/* 빨리 공통 조각 (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{display:inline-block;min-width:44px;padding-block:11px;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}
.pp-btn:disabled,.pp-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

/* "끝" 도장: 복사·인쇄·저장을 마친 순간에만 찍는다. 부모에 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)}

/* 홈 화면에 추가 칸 (공통 기준 32, pp-install.js). 다시 쓸 일이 있는 사이트에만. 스크립트가 열기 전에는 숨어 있다 */
.pp-install{margin-top:28px;padding:20px;border:1.5px solid var(--pp-ctl-line);border-radius:var(--pp-r-frame);display:grid;gap:14px;max-width:560px}
.pp-install[hidden]{display:none}
.pp-install-head{display:flex;gap:12px;align-items:flex-start}
.pp-install-head svg{flex:none;width:28px;height:28px;color:var(--pp-ink)}
.pp-install h2{font-size:1.05rem;font-weight:700;line-height:1.4;margin:0}
.pp-install-head p{margin:2px 0 0;color:var(--pp-muted);font-size:.93rem}
.pp-install .pp-btn{justify-self:start;min-height:44px}
.pp-install-say{margin:0;font-size:.93rem;color:var(--pp-ink)}
@media print{.pp-install{display:none!important}}

/* 33 (10-11 월급컷 가상 유저 [공통]): 맨 위 메뉴 링크도 누르는 칸 44px */
.pp-bar nav a{display:inline-flex;align-items:center;min-height:44px}

/* 35 (10-11 운임컷·노임셈 아이폰 [공통]): 아이폰 사파리는 날짜 칸에 width:100%를 무시하고 고유 너비를 써서 오른쪽으로 넘친다.
   color-scheme은 어두운 화면에서 체크박스·날짜 선택 창이 흰 네모로 뜨는 것을 막는다(고대비 블록의 light 지정은 그대로). */
:root{color-scheme:light dark}
input[type=date],input[type=time],input[type=month],input[type=datetime-local]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:44px;box-sizing:border-box;text-align:left}
input::-webkit-date-and-time-value{text-align:left;margin:0}

/* 37. 바닥글 정본 (10-12): 모든 서브 사이트가 같은 순서·모양. 1줄 이 사이트 링크(없으면 줄째 생략), 2줄 운영과 정책, 3줄 저작권. */
.pp-foot{border-top:1px solid var(--pp-line);margin-top:48px;padding:16px 0 32px;color:var(--pp-muted);font-size:.9375rem;line-height:1.5}
.pp-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:20px}
.pp-foot a{color:var(--pp-muted);text-decoration:underline;text-decoration-color:var(--pp-line);text-underline-offset:3px}
.pp-foot a:hover,.pp-foot a:focus-visible{color:var(--pp-ink);text-decoration-color:currentColor}
.pp-foot .pp-foot-site a{color:var(--pp-ink);font-weight:600}
.pp-foot .pp-foot-run{margin-top:4px}
.pp-foot .pp-foot-run .pp-brand{font-size:1.05rem;min-width:0;padding:0;text-decoration:none;color:var(--pp-ink);margin-left:6px}
.pp-foot .pp-foot-copy{margin:10px 0 0}
.pp-foot .pp-foot-legal{margin-top:4px}

/* 38. 피드백 링크 (10-12, GJ "지금 넣자"): 바닥글 바로 위 한 줄. ppalli.app/feedback으로 간다 */
.pp-fb{margin:48px 0 0;font-size:.9375rem;line-height:1.5}
.pp-fb a{display:inline-flex;align-items:center;min-height:44px;color:var(--pp-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--pp-line);text-underline-offset:3px}
.pp-fb a:hover,.pp-fb a:focus-visible{text-decoration-color:currentColor}
.pp-fb+.pp-foot{margin-top:8px}
@media print{.pp-fb{display:none}}

/* 40. 근거·기준일 한 줄 (10-12, GJ "넣어라"): 돈·법·고시 결과 바로 아래. 인쇄에도 남긴다 */
.pp-basis{margin:8px 0 0;font-size:.875rem;line-height:1.5;color:var(--pp-muted)}
.pp-basis a{color:inherit;text-decoration:underline;text-decoration-color:var(--pp-line);text-underline-offset:3px}

/* 45. 파일 안심 문구 (10-12): 파일 고르는 칸과 결과 가까이. 실제로 서버로 보내는 화면에는 쓰지 않는다 */
.pp-safe{margin:10px 0 0;font-size:1.0625rem;line-height:1.5;font-weight:700;color:var(--pp-ink)}
.pp-safe::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.45em;background:var(--pp-tang);vertical-align:.1em}