/* 빨리 공통 조각 (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;--pp-focus:#b65a08}
@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;--pp-focus:#f5a04a}}

/* 로고: 굵은 글자 + 귤색 네모 마침표. <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-focus);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}}

/* 10-11 가상 유저 테스트 공통 수정 (README "공통 기준" 참고) */
/* 포커스 테두리: 귤색 #f28c28은 흰 바탕 대비 2.4:1이라 진한 귤 #b65a08(4.6:1)로 */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--pp-focus);outline-offset:3px}
/* 머리글·바닥글 링크는 손가락으로 누르기 쉽게 높이 44px */
.pp-bar a,.pp-bar nav a,footer a{display:inline-flex;align-items:center;min-height:44px}
.pp-other a{min-height:44px;display:inline-flex;align-items:center}
.pp-other a b{flex:none;margin-right:.4em}
/* 일본어는 일본 글꼴을 먼저 (한국 글꼴로 한자가 한국식 모양이 되지 않게) */
html:lang(ja) body,[lang="ja"]:not(html){font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif}
html:lang(ja) body{word-break:normal;line-break:strict}
/* 방침 같은 문서에서 긴 주소가 좁은 화면 밖으로 넘치지 않게 */
:where(main,article) :where(p,li,td,dd) a{overflow-wrap:anywhere}

/* 10-11 가상 유저 테스트 2차 공통 수정 (README "공통 기준" 10~17) */
/* hidden 속성은 언제나 숨김 (.pp-btn의 display가 [hidden]을 이기던 버그) */
[hidden]{display:none!important}
/* 머리글·바닥글 링크는 너비도 44px 이상 ("소개"처럼 짧은 링크) */
.pp-bar a,.pp-bar nav a,footer a{min-width:44px;justify-content:center}
/* 좁은 화면에서 맨 위 줄이 두 줄로 꺾이지 않게 */
@media (max-width:420px){.pp-bar{gap:8px}.pp-bar .pp-site{gap:8px}.pp-bar .pp-name{padding-left:8px}.pp-bar nav{gap:4px;font-size:.9rem}}
/* 본문 바로가기: 키보드로 처음 Tab을 누르면 나타남. <a class="pp-skip" href="#main">본문 바로가기</a> */
.pp-skip{position:absolute;left:8px;top:-80px;z-index:1000;padding:12px 16px;border-radius:var(--pp-r-ctl);background:var(--pp-navy);color:var(--pp-on-navy);font-weight:700;text-decoration:none}
.pp-skip:focus{top:8px}
/* 인쇄: 어두운 화면에서 인쇄해도 흰 종이에 검은 글자, 머리글·바닥글·다른 도구 줄은 빼고 */
@media print{
  :root{--pp-paper:#fff;--pp-ink:#000;--pp-muted:#333;--pp-line:#bbb;--pp-tile:#fff;--pp-navy:#22303f;--pp-on-navy:#fff;--pp-tang-text:#b65a08;color-scheme:light}
  html,body{background:#fff!important;color:#000!important}
  .pp-bar,.pp-skip,.pp-other,:where(body,body>div)>footer{display:none!important}}
/* 3차 (10-11 가상 유저 2차 [공통]): 누르는 칸의 테두리는 배경과 3:1 이상. --pp-line은 구분선(장식)용으로 그대로 둔다. */
:root{--pp-ctl-line:#80878f}
@media (prefers-color-scheme:dark){:root{--pp-ctl-line:#6b7279}}
.pp-btn.pp-sub{box-shadow:inset 0 0 0 1.5px var(--pp-ctl-line)}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit]),select,textarea){border-color:var(--pp-ctl-line)}