/*!
 * Pay Compass (소침반) — Base Layer
 * OWNER: shell-architect (Phase 1). FROZEN — references css/tokens.css only.
 * Reset · base typography · layout primitives on the 8px grid · breakpoints.
 * Breakpoints: mobile 375–767 / tablet 768–1023 / desktop 1024–1440+.
 * Downstream feature CSS (home/verify/tabs/wizard) layers on top of this.
 */

/* ── Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul[role="list"],ol[role="list"]{ list-style:none; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:auto; }
img,picture,svg,canvas,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

/* ── Base typography ────────────────────────────────────────────────── */
body{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Malgun Gothic',sans-serif;
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  letter-spacing:var(--tr-body);
  color:var(--text-primary);
  background:var(--surface-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 1;   /* tabular figures everywhere */
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.tnum,[data-tnum]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Semantic type utility classes (map tiers → tokens; any worker may use these
 * instead of re-declaring sizes). Optical tracking baked in per tier. */
.t-data-mega { font-size:var(--fs-data-mega);  font-weight:var(--fw-extrabold); line-height:var(--lh-mega);       letter-spacing:var(--tr-mega);       font-variant-numeric:tabular-nums; white-space:nowrap; }
.t-data-hero { font-size:var(--fs-data-hero);  font-weight:var(--fw-extrabold); line-height:var(--lh-hero);       letter-spacing:var(--tr-hero);       font-variant-numeric:tabular-nums; white-space:nowrap; }
.t-data-title{ font-size:var(--fs-data-title); font-weight:var(--fw-bold);      line-height:var(--lh-data-title); letter-spacing:var(--tr-data-title); font-variant-numeric:tabular-nums; }
/* word-break:keep-all — Korean display/heading tiers must break at word (어절)
 * boundaries only, never mid-syllable-cluster ("방향"→"방/향"). Pair with
 * text-wrap:balance (already set). Do NOT add overflow-wrap:anywhere here —
 * appendix 02 §2-5 explicitly forbids it on Korean display/heading text (it
 * is the thing that CAUSES mid-word breaks); anywhere is reserved for
 * containers at risk of an unbreakable long URL/number, never Hangul copy. */
.t-display-1 { font-size:var(--fs-display-1);  font-weight:var(--fw-extrabold); line-height:var(--lh-display-1);  letter-spacing:var(--tr-display-1);  text-wrap:balance; word-break:keep-all; }
.t-display-2 { font-size:var(--fs-display-2);  font-weight:var(--fw-extrabold); line-height:var(--lh-display-2);  letter-spacing:var(--tr-display-2);  text-wrap:balance; word-break:keep-all; }
.t-headline  { font-size:var(--fs-headline);   font-weight:var(--fw-bold);      line-height:var(--lh-headline);   letter-spacing:var(--tr-headline); word-break:keep-all; }
.t-title     { font-size:var(--fs-title);      font-weight:var(--fw-bold);      line-height:var(--lh-title);      letter-spacing:var(--tr-title); word-break:keep-all; }
.t-body-lg   { font-size:var(--fs-body-lg);    font-weight:var(--fw-regular);   line-height:var(--lh-body-lg); }
.t-body      { font-size:var(--fs-body);       font-weight:var(--fw-regular);   line-height:var(--lh-body); }
.t-label     { font-size:var(--fs-label);      font-weight:var(--fw-semibold);  line-height:1.2; }
.t-caption   { font-size:var(--fs-caption);    font-weight:var(--fw-medium);    line-height:1.4; letter-spacing:var(--tr-caption); }
.t-overline  { font-size:var(--fs-overline);   font-weight:var(--fw-bold);      line-height:1.3; letter-spacing:var(--tr-overline); text-transform:uppercase; }

/* Signature payout numeral — the brand through-line the eye tracks tab-to-tab
 * (A-1b). ONE token-driven numeral identity; apply to .pc-row__pct,
 * .pc-about-stat__num, and the report "평균 87%" numeral. */
.pc-num-signature{
  color:var(--rank-pct);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--tr-data-title);
  font-weight:var(--fw-bold);
}

/* Demo-value overline — honesty label that never leaves a big number (§6).
 * Raised from muted-grey to brand-strong so the honesty cue reads as a
 * confident credibility stamp, not an apology (A-4a). */
.pc-demo-badge{
  display:inline-block; font-size:var(--fs-overline); font-weight:var(--fw-bold);
  letter-spacing:var(--tr-overline); text-transform:uppercase;
  color:var(--brand-strong); background:var(--brand-soft);
  border:1px solid var(--blue-100); border-radius:999px; padding:3px 9px;
}

/* ── Layout primitives (8px grid) ───────────────────────────────────── */
.pc-container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--shell-pad);   /* ≥20px so 160px numbers never clip on mobile */
}
.pc-container--narrow{ max-width:760px; }
.pc-container--reading{ max-width:640px; }

.pc-stack > * + *{ margin-top:var(--space-4); }
.pc-section{ padding-block:var(--space-8); }

/* ── Accessibility helpers ──────────────────────────────────────────── */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* Skip link */
.pc-skip{
  position:absolute; left:var(--space-4); top:-48px; z-index:var(--z-toast);
  background:var(--surface-inverse); color:var(--text-on-inverse);
  padding:8px 14px; border-radius:8px; font-size:var(--fs-label); font-weight:var(--fw-semibold);
  transition:top var(--d-fast) var(--e-out-quart);
}
.pc-skip:focus{ top:var(--space-4); }

/* ── Responsive: type/layout are fluid via clamp(); these guard structure ─ */
@media (max-width:767px){          /* mobile */
  .pc-section{ padding-block:var(--space-7); }
}
@media (min-width:768px) and (max-width:1023px){ /* tablet */
  .pc-container{ max-width:900px; }
}