/* 빨리 공통 조각 (ppalli.app 아이덴티티, 2026-10-10)
   서브 사이트는 이 파일을 자기 저장소에 복사해서 씁니다(외부에서 불러오지 않음, CSP style-src 'self' 유지).
   클래스 이름은 모두 pp- 로 시작해서 사이트 자체 CSS와 겹치지 않습니다. */
:root{
  --pp-paper:#fff;--pp-ink:#1d2731;--pp-muted:#5f6872;--pp-line:#e4e6e9;
  --pp-navy:#22303f;--pp-on-navy:#f4f5f7;--pp-tang:#f28c28;--pp-tang-text:#b65a08;--pp-tile:#f2f3f4;
  --pp-site:var(--pp-navy);--pp-r-frame:12px;--pp-r-ctl:8px}
@media (prefers-color-scheme:dark){:root{
  --pp-paper:#141619;--pp-ink:#eceef1;--pp-muted:#a2a8af;--pp-line:#2a2e33;
  --pp-navy:#1d2834;--pp-on-navy:#eef0f3;--pp-tang:#f5a04a;--pp-tang-text:#f5a04a;--pp-tile:#1c1f23}}

/* 로고: 굵은 글자 + 귤색 네모 마침표. <a class="pp-brand" href="https://ppalli.app/">빨리<i class="pp-dot" aria-hidden="true"></i></a> */
.pp-brand{font-weight:900;font-size:1.3rem;letter-spacing:-.05em;color:var(--pp-ink);text-decoration:none;line-height:1;white-space:nowrap}
.pp-dot{display:inline-block;width:.19em;height:.19em;margin-left:.07em;background:var(--pp-tang);vertical-align:baseline}
.pp-brand:hover .pp-dot,.pp-brand:focus-visible .pp-dot{animation:pp-drop .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes pp-drop{35%{transform:translateY(-.5em)}70%{transform:translateY(.06em) scale(1.25,.7)}}

/* 맨 위 줄: 왼쪽 "빨리." (ppalli.app으로), 그 옆에 이 사이트 이름, 오른쪽에 메뉴 */
.pp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.pp-bar .pp-site{display:flex;align-items:center;gap:10px}
.pp-bar nav{display:flex;gap:16px;font-size:.95rem}
.pp-bar nav a{color:var(--pp-muted);text-decoration:none}
.pp-bar nav a:hover,.pp-bar nav a[aria-current]{color:var(--pp-ink)}
.pp-bar .pp-name{font-weight:700;color:var(--pp-ink);text-decoration:none;padding-left:10px;border-left:1px solid var(--pp-line);line-height:1.2}

/* 버튼: 주 버튼은 귤색 한 개만, 나머지는 테두리 */
.pp-btn{display:inline-block;border:0;font:inherit;font-weight:700;padding:11px 18px;border-radius:var(--pp-r-ctl);background:var(--pp-tang);color:#1b2531;text-decoration:none;cursor:pointer;transition:transform .12s ease-out}
.pp-btn.pp-sub{background:transparent;color:var(--pp-ink);box-shadow:inset 0 0 0 1.5px var(--pp-line)}
.pp-btn.pp-ink{background:var(--pp-navy);color:var(--pp-on-navy)}
.pp-btn:active{transform:scale(.97)}
.pp-btn:focus-visible{outline:2px solid var(--pp-tang);outline-offset:3px}

/* "끝" 도장: 복사·인쇄·저장을 마친 순간에만 찍는다. 부모에 position:relative, 도장에 .pp-on 클래스를 붙이면 찍힌다 */
.pp-stamp{position:absolute;width:54px;height:54px;color:var(--pp-tang-text);opacity:0;pointer-events:none;transform:rotate(var(--pp-r,-9deg)) scale(1.5)}
.pp-stamp.pp-on{opacity:1;transform:rotate(var(--pp-r,-9deg)) scale(1);transition:transform .16s cubic-bezier(.3,1.4,.6,1),opacity .08s}

/* 맨 아래 "빨리의 다른 도구" 줄 */
.pp-other{border-top:1px solid var(--pp-line);padding:20px 0 0;margin-top:40px}
.pp-other h2{font-size:1rem;margin:0 0 10px}
.pp-other ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pp-other a{display:inline-block;padding:8px 12px;border-radius:var(--pp-r-ctl);background:var(--pp-tile);color:var(--pp-ink);text-decoration:none;font-size:.92rem}
.pp-other a:hover{box-shadow:inset 0 0 0 1.5px var(--pp-tang)}
@media print{.pp-other,.pp-stamp{display:none}}
@media (prefers-reduced-motion:reduce){.pp-brand .pp-dot,.pp-stamp,.pp-btn{animation:none!important;transition:none!important}}