/* ===== css/tokens.css ===== */
/*!
 * Pay Compass (소침반) — Design Tokens
 * OWNER: pc-foundation (P0). FROZEN after P0 — every other worker REFERENCES these
 * tokens only; do not redefine or fork values elsewhere. Cross-boundary need → route
 * through squad-leader.
 *
 * Source of truth: docs/dev/squad-runs/pay-compass-planning/pay-compass-landing-plan.md
 *   §5-1 Layer 1 Primitive, §5-2 Layer 2 Semantic, §5-3 Layer 3 Component, §6-1 Motion.
 *
 * HARD RULE: blue tokens only. Trust = blue, risk = red. GREEN / PURPLE / TEAL banned
 * anywhere in this system — hard fail. Components/logic must reference Layer 2/3 tokens
 * only; never reach into Layer 1 primitives directly (§5-2 header rule in the plan).
 *
 * EXCEPTION (2026-07): raster illustration ASSETS under assets/illustrations/ are exempt
 * from the blue-only rule — the Toss-magazine-style 3D illustrations use per-topic pastel
 * multicolor (peach/mint/neutral) by product decision. This exemption is scoped to image
 * assets only; all UI TOKENS + component color here remain blue-only (risk = red). Do not
 * add green/purple/teal to the token layers below.
 */

:root{
  /* ════════════════════════════════════════════════════════════════
   * LAYER 1 — PRIMITIVE (raw scale, no semantic meaning)
   * Do NOT reference these outside this file except via Layer 2/3 aliases.
   * ════════════════════════════════════════════════════════════════ */

  /* Navy scale — deep-navy chapters / inverse surfaces */
  --navy-900:#0e1124;
  --navy-800:#141a33;
  --navy-700:#1b2447;
  --navy-600:#1c2750;
  --navy-500:#26356a;
  --navy-400:#33437e;

  /* Blue scale — brand accent family */
  --blue-700:#1c39c2;
  --blue-600:#2b4ee6;
  --blue-500:#4a6bf5;
  --blue-400:#6d8bff;
  --blue-300:#7d9bff;
  --blue-200:#9fb0ee;
  --blue-150:#c3cef2;
  --blue-100:#dfe5fb;
  --blue-050:#eef1ff;

  /* Neutral scale — light-surface text/lines */
  --ink-900:#15181f;
  --ink-700:#3d4350;
  --ink-500:#626879;   /* a11y-safe muted (≈4.8:1 on white) — see §5-4 */
  --ink-400:#969ca8;   /* ≈2.8:1 on white — decorative/large-text ONLY, never small body */
  --line-200:#ebedf1;
  --line-100:#f1f2f6;
  --paper-100:#f7f8fb;
  --paper-050:#f4f5f7;
  --white:#ffffff;
  --cool-white:#f4f7fd;   /* daybreak / light-chapter reading surface (LOCK arrival) */

  /* Semantic hues — risk is the ONLY non-blue signal color in this system */
  --red-500:#e2495b;
  --red-600:#b8253a;   /* solid-red fill on white ≈5.2:1 — clears AA (G-5) */
  --red-050:#fdecef;

  /* ════════════════════════════════════════════════════════════════
   * LAYER 2 — SEMANTIC (role tokens; components/logic reference this layer)
   * ════════════════════════════════════════════════════════════════ */

  /* Surface */
  --surface-base:      var(--paper-050);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--paper-100);
  --surface-inverse:   var(--navy-900);
  --surface-inverse-2: var(--navy-500);

  /* Text */
  --text-primary:      var(--ink-900);
  --text-secondary:    var(--ink-700);
  --text-muted:        var(--ink-500);   /* default for small/secondary copy (a11y-safe) */
  --text-faint:        var(--ink-400);   /* ≥14px, decorative/non-essential labels only */
  --text-on-inverse:   var(--white);
  --text-on-inverse-2: var(--blue-150);

  /* Brand / trust */
  --brand:             var(--blue-600);
  --brand-strong:      var(--blue-700);  /* pressed/hover */
  --brand-soft:        var(--blue-050);  /* brand background tint */
  --brand-on-inverse:  var(--blue-300);
  --sky:               var(--blue-400);  /* SKY depth-layer accent (post-discovery light) */
  --surface-daylight:  var(--cool-white);/* LOCK-arrival light chapter surface */

  /* Data / status signal */
  --data-live:         var(--blue-600);  /* 현재 기준 표기 accent — NOT a live/pulse indicator (governance #16: renamed from "AI 갱신"/live-dot wording, value unchanged, no fake real-time) */
  --data-anchor:       var(--blue-600);  /* calculator #1 anchor value */
  --data-refresh:      var(--brand-soft);/* re-rank tone — reassurance tint on list re-sort, NOT amber/red (governance #16: renamed from "FLIP re-rank flash", value unchanged) */
  --risk:              var(--red-500);   /* "fraud signal" education — advisory, not alarm */
  --risk-soft:         var(--red-050);
  --risk-strong:       var(--red-600);   /* solid red button/text fill — AA on white (G-5). Tints/bands stay --risk. */

  /* Border / division */
  --border-subtle:     var(--line-100);
  --border-default:    var(--line-200);
  --border-brand:      var(--brand);

  /* Motion material — Trust Refinery Spine (M1) particle state colors */
  --spine-particle-live:  var(--blue-400); /* surviving/verified data point */
  --spine-particle-out:   var(--ink-400);  /* filtered-out point — grey fade, NOT red (non-alarming) */
  --spine-particle-flag:  var(--red-500);  /* flagged fraud-history point — brief repel moment only */

  /* ════════════════════════════════════════════════════════════════
   * LAYER 3 — COMPONENT (component-scoped tokens)
   * ════════════════════════════════════════════════════════════════ */

  /* Inverse chapter backgrounds */
  --banner-grad: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-600) 62%, var(--navy-500) 100%);
  --calc-grad:   linear-gradient(160deg, var(--navy-700), var(--navy-500));

  /* Ranking table */
  --rank1-bg:    linear-gradient(90deg, #e9eeff, #fbfcff 60%);
  --rank1-ring:  inset 0 0 0 2px var(--brand);
  --feebar-track:#e9edf3;
  --feebar-fill: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  --rank-pct:    var(--brand);

  /* Calculator result (anchoring, M3) */
  --calc-anchor-amt: var(--data-anchor);
  --calc-delta:      var(--text-muted);  /* delta stays grey/muted — never red (no fear framing) */

  /* CTA / FAB */
  --cta-bg:      var(--ink-900);         /* primary CTA = ink; brand-blue reserved for rank/data */
  --fab-bg:      var(--brand);
  --fab-shadow:  0 8px 24px rgba(43,78,230,.40);

  /* Shadow */
  --sh-s:0 1px 2px rgba(20,24,33,.04);
  --sh:  0 6px 22px rgba(20,24,33,.06);
  --sh-l:0 16px 42px rgba(24,30,64,.18);
  --sh-brand:0 4px 11px rgba(43,78,230,.24);
  /* Illustration elevation — ONE ultra-diffuse drop-shadow language for all Toss
   * cutout PNGs (A-2a). --ondark for cutouts sitting on navy surfaces. */
  --sh-illust:        drop-shadow(0 6px 14px rgba(20,24,33,.10));
  --sh-illust-ondark: drop-shadow(0 8px 18px rgba(0,0,0,.28));

  /* Radius */
  --r:22px;
  --rs:14px;

  /* Container */
  --maxw:480px;

  /* ════════════════════════════════════════════════════════════════
   * MOTION FOUNDATION (§6-1) — easing/duration/scroll tokens.
   * Exponential ease-out family only. bounce/elastic banned (function over spectacle).
   * ════════════════════════════════════════════════════════════════ */

  /* Easing */
  --e-out-quart: cubic-bezier(.25, 1, .5, 1);    /* default UI transitions */
  --e-out-quint: cubic-bezier(.22, 1, .36, 1);   /* FLIP / list re-sort */
  --e-out-expo:  cubic-bezier(.16, 1, .3, 1);    /* sheet/reader entrance */
  --e-inout:     cubic-bezier(.65, 0, .35, 1);   /* background chapter scrub interpolation */

  /* Duration */
  --d-instant: 120ms;  /* press feedback */
  --d-fast:    180ms;  /* hover / chevron */
  --d-base:    260ms;  /* tab / chip transition */
  --d-slow:    420ms;  /* bar fill / sheet */
  --d-reveal:  640ms;  /* section mask reveal */
  --d-story:   900ms;  /* FLIP flash / narrative beat */

  /* Scroll (GSAP/Lenis — read by js/app.js as the single source of truth) */
  --scrub:      0.6;   /* ScrollTrigger scrub inertia coefficient (seconds) */
  --lenis-lerp: 0.10;  /* Lenis interpolation (0.08–0.12 range) */

  /* ════════════════════════════════════════════════════════════════
   * TYPE SCALE LAYER (redesign · appendix 02 §1–§2)
   * NEW in the tabs-wizard redesign. Sits alongside the color layers as a
   * first-class token layer (there was no font-size token layer before).
   *
   * ⚠️ DELIBERATE OVERRIDE of the conservative type-skill ceiling (hero ≤ 96px,
   *    tracking ≥ −0.04em). Per appendix 02 §1 the site's CONTENT IS NUMBERS
   *    (payout %, rank, delta, minutes) and their instant legibility is the trust
   *    UX — so numeric heroes are pushed to 160px and tracking to −0.05em ON
   *    PURPOSE. `--fs-data-mega` supersedes the old `--type-data-peak` (56→96px)
   *    which no longer exists. Big ≠ loud: only HONEST numbers get large — hype
   *    copy never does (anti-dark-pattern §6 preserved).
   * ════════════════════════════════════════════════════════════════ */

  /* ── DATA-PEAK — numbers-as-heroes (top tier, above sentences) ── */
  --fs-data-mega:  clamp(4.5rem, 2.6rem + 8.3vw, 10rem);   /* 72 → 160  LOCK 87% (page max) */
  --fs-data-hero:  clamp(3rem, 1.6rem + 6vw, 7rem);        /* 48 → 112  wizard result·집계·계산기 */
  --fs-data-title: clamp(1.75rem, 1.49rem + 1.1vw, 2.5rem);/* 28 → 40   table %·stage count·step no. */

  /* ── DISPLAY — designed Hangul declarations ── */
  --fs-display-1:  clamp(2.25rem, 1.1rem + 4.9vw, 5.5rem); /* 36 → 88   hero sentence·tab 대선언 */
  --fs-display-2:  clamp(1.875rem, 1.3rem + 2.45vw, 3.5rem);/* 30 → 56  section/stage headline */

  /* ── Standard 7 tiers ── */
  --fs-headline:   clamp(1.5rem, 1.32rem + 0.75vw, 2rem);       /* 24 → 32 */
  --fs-title:      clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);  /* 18 → 22 */
  --fs-body-lg:    clamp(1.0625rem, 1.035rem + 0.12vw, 1.125rem);/* 17 → 18 */
  --fs-body:       clamp(0.9375rem, 0.915rem + 0.1vw, 1rem);    /* 15 → 16 */
  --fs-body-sm:    0.875rem;                                    /* 14 */
  --fs-label:      clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem);/* 14 → 15 */
  --fs-label-sm:   0.8125rem;                                   /* 13 */
  --fs-caption:    clamp(0.75rem, 0.74rem + 0.05vw, 0.8125rem); /* 12 → 13 */
  --fs-overline:   clamp(0.6875rem, 0.68rem + 0.05vw, 0.75rem); /* 11 → 12 */

  /* ── Weights (Pretendard) — 900/Black intentionally unused (smears in reverse) ── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Optical tracking curve — big=tighten (Latin/numbers −0.05em),
   *    small=loosen (overline +0.08em). Hangul capped at −0.03em (자모 collision). ── */
  --tr-mega:       -0.05em;   /* Latin/number only */
  --tr-hero:       -0.04em;
  --tr-data-title: -0.03em;
  --tr-display-1:  -0.03em;   /* Hangul cap */
  --tr-display-2:  -0.025em;
  --tr-headline:   -0.02em;
  --tr-title:      -0.01em;
  --tr-body:        0em;
  --tr-label:       0em;
  --tr-caption:     0.02em;
  --tr-overline:    0.08em;
  --tr-hangul-max: -0.03em;   /* hard floor for any Hangul display run */

  /* ── Line-heights (snap to the 4px grid at their target px) ── */
  --lh-mega:       0.90;
  --lh-hero:       0.92;
  --lh-data-title: 1.0;
  --lh-display-1:  1.05;
  --lh-display-2:  1.10;
  --lh-headline:   1.2;
  --lh-title:      1.35;
  --lh-body:       1.6;
  --lh-body-lg:    1.6;

  /* ════════════════════════════════════════════════════════════════
   * SPACE SCALE — 8px grid (base unit 4px, primary rhythm 8px)
   * ════════════════════════════════════════════════════════════════ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* Shell chrome geometry (referenced by shell.css + app.js) */
  --topbar-h:  56px;
  --ctabar-h:  64px;
  --shell-pad: 20px;   /* container min side padding — big-type never clips (02 §2-5) */
  --z-topbar:  100;
  --z-ctabar:  90;
  --z-fab:     110;
  --z-overlay: 200;
  --z-toast:   300;
}

/*
 * prefers-reduced-motion global kill-switch (§8-1).
 * This is a SAFETY NET independent of JS tier detection — it must work even before
 * js/main.js runs. Per-interaction reduced-motion fallbacks (static spine panel, no
 * count-up, no autoplay, etc.) are each owning module's responsibility per §6-4/§8-1.
 */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== css/base.css ===== */
/*!
 * 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; }
}

/* ===== css/shell.css ===== */
/*!
 * Pay Compass (소침반) — Global Shell
 * OWNER: shell-architect (Phase 1). FROZEN — references css/tokens.css + base.css.
 * SHELL-A tab bar · mini compass mark · SHELL-B FAB · SHELL-C bottom CTA bar ·
 * SHELL-E reader overlay · SHELL-F footer · SHELL-H toast · tab panel switching.
 * Blue tokens only. red reserved for 먹튀/risk (not used here).
 */

/* ════════════════════════════════════════════════════════════════════
 * TAB PANEL SWITCHING (JS-driven — app.js toggles .is-active)
 * Each frozen mount container is a .pc-tabpanel; only one is shown.
 * ════════════════════════════════════════════════════════════════════ */
.pc-app{ min-height:100vh; }
.pc-tabpanel{ display:none; }
.pc-tabpanel.is-active{ display:block; }
/* Give feature modules a floor so an empty (not-yet-hydrated) container still
 * occupies space during progressive load. */
.pc-tabpanel:empty{ min-height:60vh; }

/* ── W-1: chapter-crossing tab transition (CSS side) ───────────────────
 * motion-impl (app.js showTab) toggles these on the .pc-tabpanel ONLY when
 * crossing the light↔dark narrative seam (ranking↔about, ranking↔verify);
 * same-register switches stay instant. Opacity/transform only — composited;
 * the global reduced-motion kill-switch collapses the animation to instant. */
@keyframes pc-chapter-enter{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@keyframes pc-chapter-leave{
  from{ opacity:1; }
  to{ opacity:0; }
}
.pc-tabpanel.is-chapter-enter{ animation:pc-chapter-enter 200ms var(--e-out-quint); }
.pc-tabpanel.is-chapter-leave{ animation:pc-chapter-leave 200ms var(--e-out-quint); }

/* ════════════════════════════════════════════════════════════════════
 * SHELL-A — sticky top tab bar
 * Ghost (transparent, sky text) over the ranking dark hero; hardens to opaque
 * cool-white when scrolled / on any non-ranking tab. Contrast ≥4.5:1 in both.
 * ════════════════════════════════════════════════════════════════════ */
.pc-topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  min-height:calc(var(--topbar-h) + env(safe-area-inset-top));
  display:flex; align-items:center; gap:var(--space-4);
  padding-inline:var(--shell-pad);
  padding-top:env(safe-area-inset-top);   /* notch/PWA/landscape safe-area (P2-D8) */
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--d-base) var(--e-out-quart),
             border-color var(--d-base) var(--e-out-quart),
             color var(--d-base) var(--e-out-quart);
  color:var(--text-on-inverse-2);   /* ghost: sky text on the dark hero */
}
.pc-topbar.is-solid{
  background:color-mix(in srgb, var(--cool-white) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom-color:var(--border-default);
  color:var(--text-primary);
}

/* Logo lockup: mini compass mark + wordmark */
.pc-logo{ display:inline-flex; align-items:center; gap:var(--space-2); flex:0 0 auto; }
.pc-logo__word{
  font-size:var(--fs-title); font-weight:var(--fw-extrabold);
  letter-spacing:var(--tr-title); color:inherit; white-space:nowrap;
}
.pc-mark{ width:28px; height:28px; flex:0 0 auto; display:block; }
.pc-mark__svg{ width:100%; height:100%; display:block; }
/* Mini mark needle: LOCKED INSTRUMENT pose everywhere in the shell (no autonomous
 * waver — narrative-free chrome must not shimmer; §11-3). Points to true north. */
.pc-mark__needle{
  transform-box:view-box; transform-origin:32px 41px;
  transform:rotate(var(--pc-ang, 0deg));
}

/* Tab strip — horizontal-scroll sticky strip (mobile) → inline row (desktop).
 * No hamburger: tabs stay discoverable via horizontal swipe. Below 768px the
 * strip overflows (7 tabs don't fit ≤375px) with no other signal that more
 * tabs exist off-screen, so a right-edge gradient MASK fades the trailing
 * edge of the last visible tab (01 §0-3 discoverability-first horizontal
 * strip). This is an opacity mask on the content itself, not a color
 * overlay, so it reads correctly whether the topbar is ghost (ranking dark
 * hero) or solid (every other tab/state) — no color to keep in sync. */
.pc-tabbar{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:2px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  scroll-padding-right:24px;
  padding-right:8px;   /* G-6a: small right pad so the fade cuts INTO the last tab
                        * (mid-glyph = strongest "more exists" scent), not a blank gap */
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
          mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.pc-tabbar::-webkit-scrollbar{ display:none; }
.pc-tab{
  flex:0 0 auto; scroll-snap-align:start;
  display:inline-flex; align-items:center;
  padding:10px 12px; min-height:44px; border-radius:10px;   /* ≥44px touch target (P2-D7) */
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  color:currentColor; opacity:.72; white-space:nowrap;
  transition:opacity var(--d-fast) var(--e-out-quart),
             background var(--d-fast) var(--e-out-quart),
             color var(--d-fast) var(--e-out-quart);
}
.pc-tab:hover{ opacity:1; }
.pc-tab[aria-selected="true"]{
  opacity:1; color:var(--brand); background:var(--brand-soft);
}
/* On the ghost (dark) topbar the active tab reads on-inverse. */
.pc-topbar:not(.is-solid) .pc-tab[aria-selected="true"]{
  color:var(--text-on-inverse); background:color-mix(in srgb, var(--brand) 40%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
 * SHELL-C — bottom sticky CTA bar (wizard launcher, all tabs)
 * ════════════════════════════════════════════════════════════════════ */
.pc-ctabar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-ctabar);
  min-height:var(--ctabar-h);
  display:flex; align-items:center; justify-content:center;
  padding:12px var(--shell-pad) calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--cool-white) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--border-default);
}
.pc-cta{
  width:100%; max-width:520px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:14px;
  background:var(--brand); color:var(--text-on-inverse);
  font-size:var(--fs-label); font-weight:var(--fw-bold);
  box-shadow:var(--sh-brand);
  transition:background var(--d-fast) var(--e-out-quart), transform var(--d-instant) var(--e-out-quart);
}
.pc-cta:hover{ background:var(--brand-strong); }
.pc-cta:active{ transform:scale(.97); }   /* W-6 press feedback (100ms via --d-instant on transition) */
.pc-cta__spark{ font-size:1.05em; }

/* ════════════════════════════════════════════════════════════════════
 * SHELL-B — FAB (문의 safety-net). Sits above the CTA bar.
 * ════════════════════════════════════════════════════════════════════ */
.pc-fab{
  position:fixed; right:var(--space-5);
  bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
  z-index:var(--z-fab);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:var(--text-on-inverse);
  box-shadow:var(--fab-shadow);
  transition:transform var(--d-fast) var(--e-out-quart), background var(--d-fast) var(--e-out-quart);
}
.pc-fab:hover{ transform:translateY(-2px); background:var(--brand-strong); }
.pc-fab svg{ width:24px; height:24px; }
.pc-fab__badge{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--surface-inverse); color:var(--text-on-inverse);
  font-size:11px; font-weight:var(--fw-bold); line-height:18px; text-align:center;
  border:2px solid var(--cool-white);
}

/* ════════════════════════════════════════════════════════════════════
 * SHELL-E — reader overlay host (legal full text / articles / evidence)
 * Slides in from the right. Utility mode — no compass/spectacle.
 * ════════════════════════════════════════════════════════════════════ */
.pc-reader{
  position:fixed; inset:0; z-index:var(--z-overlay);
  display:flex; flex-direction:column;
  background:var(--surface-raised); color:var(--text-primary);
  transform:translateX(100%);
  transition:transform var(--d-slow) var(--e-out-expo);
  visibility:hidden;
}
.pc-reader.is-open{ transform:translateX(0); visibility:visible; }
.pc-reader__bar{
  flex:0 0 auto; height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--space-3);
  padding-inline:var(--shell-pad);
  border-bottom:1px solid var(--border-default);
  background:var(--surface-raised);
}
.pc-reader__back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--text-secondary);
}
.pc-reader__back svg{ width:20px; height:20px; }
.pc-reader__title{
  font-size:var(--fs-title); font-weight:var(--fw-bold); letter-spacing:var(--tr-title);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-reader__body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--space-6) var(--shell-pad) var(--space-9);
}
.pc-reader__body > *{ max-width:640px; margin-inline:auto; }
.pc-reader__body p{ font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); margin-top:var(--space-4); color:var(--text-secondary); }
.pc-reader__body h2{ font-size:var(--fs-headline); font-weight:var(--fw-bold); letter-spacing:var(--tr-headline); margin-top:var(--space-6); }
.pc-reader__body h3{ font-size:var(--fs-title); font-weight:var(--fw-bold); margin-top:var(--space-5); }

/* ════════════════════════════════════════════════════════════════════
 * SHELL-F — footer (disclaimer + legal links + mini nameplate)
 * NOT low-contrast / hidden: text ≥4.5:1 (§1-2 / §3-4).
 * ════════════════════════════════════════════════════════════════════ */
.pc-footer{
  background:var(--surface-inverse); color:var(--text-on-inverse);
  padding:var(--space-8) var(--shell-pad);
}
.pc-footer__inner{ max-width:1200px; margin-inline:auto; }
.pc-footer__brand{ display:inline-flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.pc-footer__brand .pc-mark{ width:24px; height:24px; }
.pc-footer__brand-word{ font-size:var(--fs-title); font-weight:var(--fw-extrabold); }
.pc-footer__mission{ font-size:var(--fs-body-lg); color:var(--text-on-inverse-2); max-width:46ch; text-wrap:balance; margin-bottom:var(--space-5); }
.pc-footer__links{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-5); }
.pc-footer__link{
  display:inline-flex; align-items:center; min-height:44px;   /* touch target (P2-D7) */
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  color:var(--blue-150); text-decoration:underline; text-underline-offset:3px;
}
.pc-footer__link:hover{ color:var(--text-on-inverse); }
.pc-footer__disclaimer{
  font-size:var(--fs-caption); line-height:1.7; letter-spacing:var(--tr-caption);
  color:var(--blue-200);   /* ≥4.5:1 on navy-900 — legible, not buried */
  max-width:70ch;
}

/* ════════════════════════════════════════════════════════════════════
 * SHELL-H — toast host (empty / loading / error / 준비중 states)
 * ════════════════════════════════════════════════════════════════════ */
.pc-toast-host{
  position:fixed; left:50%; bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:var(--z-toast);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  pointer-events:none; width:max-content; max-width:calc(100vw - 2*var(--shell-pad));
}
.pc-toast{
  background:var(--surface-inverse); color:var(--text-on-inverse);
  font-size:var(--fs-body-sm); font-weight:var(--fw-medium);
  padding:10px 16px; border-radius:12px; box-shadow:var(--sh-l);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--d-base) var(--e-out-quart), transform var(--d-base) var(--e-out-quart);
}
.pc-toast.is-show{ opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════════════
 * Responsive
 * ════════════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  .pc-topbar{ gap:var(--space-6); padding-inline:var(--space-6); }
  .pc-tabbar{
    justify-content:flex-end; overflow-x:visible; padding-right:0;
    -webkit-mask-image:none; mask-image:none;   /* all 7 tabs fit — no fade needed */
  }
  .pc-tab{ padding:10px 14px; }
}
@media (max-width:767px){
  .pc-logo__word{ font-size:var(--fs-body-lg); }
  /* Tab strip stays a horizontal scroll rail; keep the logo compact. */
  /* Reserve clearance so the fixed FAB + bottom CTA bar never cover the last
   * row's 바로가기 money CTA (P1-5). */
  .pc-app{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }

  /* G-6a: positive scroll affordance — a non-interactive `›` cue at the topbar's
   * right edge over the mask fade, so the off-screen 검증기준/블랙리스트 tabs read
   * as "scroll for more," not "text ending." Fades out once JS marks the strip
   * scrolled-to-end (adds .is-tabs-end to .pc-topbar). pointer-events:none so it
   * never blocks a tab tap. Inherits currentColor → correct on ghost & solid. */
  .pc-topbar::after{
    content:"\203A";   /* › */
    position:absolute; right:6px; top:50%;
    transform:translateY(-50%); pointer-events:none;
    font-size:20px; line-height:1; font-weight:var(--fw-bold);
    color:currentColor; opacity:.6;
    transition:opacity var(--d-base) var(--e-out-quart);
  }
  .pc-topbar.is-tabs-end::after{ opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .pc-topbar,.pc-reader,.pc-toast,.pc-fab,.pc-cta{ transition-duration:.001ms; }
}

/* ════════════════════════════════════════════════════════════════════
 * PPTX 수정 1차 — slide 3 (탭 얇게 → 페이 랭킹 상단으로) · slide 2 (FAB 하단 고정)
 * Appended so the cascade overrides the base rules above.
 * ════════════════════════════════════════════════════════════════════ */

/* slide 3 — thinner top tab bar. Tab tap target relaxes 44→40px (still ≥ WCAG
 * 2.5.8 AA 24px; below the 44px AAA comfort target — flagged to team-lead). */
.pc-topbar{ min-height:calc(48px + env(safe-area-inset-top)); }
.pc-tab{ padding:8px 12px; min-height:40px; }
@media (min-width:768px){ .pc-tab{ padding:8px 14px; } }

/* slide 2 — pin the 문의 FAB flush to the very bottom (was floating higher).
 * Kept bottom-right + safe-area; see integrator flag re: exact desired treatment. */
.pc-fab{
  right:var(--space-4);
  bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
}

/* ===== css/home.css ===== */
/*!
 * Pay Compass (소침반) — home.css (랭킹 홈 · 리스트 우선)
 * OWNER: home module worker (Phase 2 → v2 changeset). References tokens.css + base.css.
 * Blue 3-layer only. red = 먹튀/risk education (S4) ONLY. Numbers = tabular-nums.
 *
 * v2: the navy scroll-scrub compass hero + founder confession teaser + inline wizard
 * CTA were removed from ranking (hero relocated to the About tab). Ranking now opens
 * straight to: orientation head → big paytype segmented control → ranking list.
 * Sections: S2 ranking table · S3 calculator · S3d verify teaser · S4 fraud signals
 * (red isolation) · S5 log tail.
 */

/* ════════════════════════════════════════════════════════════════════
 * LIGHT CHAPTER — ranking rides the cool-white reading surface. No navy
 * hero behind the topbar anymore, so the topbar stays solid on ranking
 * (home.js keeps .is-solid). Content flows normally below the sticky topbar.
 * ════════════════════════════════════════════════════════════════════ */
.pc-home__light{ position:relative; z-index:1; background:var(--surface-daylight); }

.pc-home .pc-section{ padding-block:var(--space-7); }
.pc-home__eyebrow{
  display:block; color:var(--brand); margin-bottom:var(--space-2);
}
.pc-home__lede{ color:var(--text-secondary); margin-top:var(--space-3); max-width:52ch; }

/* ════════════════════════════════════════════════════════════════════
 * S2 — RANKING. New top anchor: orientation head + BIG paytype segmented
 * control (소액/콘텐츠/카드) + table columns
 * [순위 · 업체 · 지급률(feebar+%) · 입금속도(N분,시계) · 바로가기]
 * ════════════════════════════════════════════════════════════════════ */
.pc-rank__intro{ margin-bottom:var(--space-6); }
.pc-rank__q{
  color:var(--text-primary); margin:var(--space-2) 0 var(--space-3);
  max-width:14ch; line-height:var(--lh-display-2); letter-spacing:var(--tr-display-2);
}

/* guided finder card (ITEM 2 · restored) — inline wizard launcher. Sits between
 * the ranking intro and the paytype control. Light white card with brand accents
 * so it invites without competing with the SOLID-blue segmented control below. */
.pc-rank-finder{
  width:100%; display:flex; align-items:center; gap:var(--space-4);
  padding:15px 18px; margin-bottom:var(--space-4);
  background:var(--surface-raised); border:1px solid var(--border-brand);
  border-radius:16px; box-shadow:var(--sh-s); text-align:left;
  transition:box-shadow var(--d-fast) var(--e-out-quart),
             border-color var(--d-fast) var(--e-out-quart),
             transform var(--d-instant) var(--e-out-quart);
}
.pc-rank-finder:hover{ box-shadow:var(--sh); border-color:var(--brand); }
.pc-rank-finder:active{ transform:scale(.99); }
.pc-rank-finder__ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand);
}
.pc-rank-finder__ico svg{ width:24px; height:24px; }
.pc-rank-finder__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pc-rank-finder__title{
  font-size:var(--fs-title); font-weight:var(--fw-bold);
  color:var(--text-primary); letter-spacing:var(--tr-title);
}
.pc-rank-finder__sub{ font-size:var(--fs-caption); color:var(--text-muted); }
.pc-rank-finder__arrow{
  flex:0 0 auto; width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--brand); color:var(--text-on-inverse);
  font-size:16px; font-weight:var(--fw-bold);
}

/* enlarged segmented control (ITEM 3) — ICON + label; active = SOLID BLUE fill,
 * white icon+label. This is the ranking tab's de-facto top anchor now. */
.pc-subtabs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:var(--surface-sunken); padding:8px; border-radius:18px;
  margin-bottom:var(--space-6);
}
.pc-subtab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  padding:18px 10px; border-radius:14px; text-align:center;
  font-size:var(--fs-label); font-weight:var(--fw-bold);
  letter-spacing:var(--tr-label); color:var(--text-muted);
  transition:background var(--d-fast) var(--e-out-quart),
             color var(--d-fast) var(--e-out-quart),
             box-shadow var(--d-fast) var(--e-out-quart),
             transform var(--d-instant) var(--e-out-quart);
}
.pc-subtab__icon{ width:28px; height:28px; display:grid; place-items:center; }
.pc-subtab__icon svg{ width:100%; height:100%; display:block; }
.pc-subtab:hover{ color:var(--text-secondary); }
.pc-subtab[aria-selected="true"]{
  background:var(--brand); color:var(--white); box-shadow:var(--sh-brand);
}
.pc-subtab[aria-selected="true"]:hover{ color:var(--white); }
.pc-subtab:active{ transform:scale(.985); }

.pc-table{ display:flex; flex-direction:column; gap:8px; }
.pc-table__colhead,.pc-row{
  display:grid;
  grid-template-columns:44px minmax(0,1.5fr) minmax(120px,2fr) 92px 84px;
  align-items:center; gap:var(--space-3);
}
.pc-table__colhead{
  padding:0 var(--space-4); font-size:var(--fs-label-sm);
  font-weight:var(--fw-semibold); color:var(--text-muted);
}
.pc-table__colhead span:nth-child(3),
.pc-table__colhead span:nth-child(4),
.pc-table__colhead span:nth-child(5){ text-align:center; }
.pc-table__colhead span:last-child{ text-align:right; }

.pc-row{
  padding:var(--space-4);
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--rs); box-shadow:var(--sh-s);
}
.pc-row--1{ background:var(--rank1-bg); box-shadow:var(--rank1-ring), var(--sh); }
.pc-row__rank{
  font-size:var(--fs-data-title); font-weight:var(--fw-bold);
  color:var(--text-secondary); font-variant-numeric:tabular-nums; text-align:center;
}
.pc-row--1 .pc-row__rank{ color:var(--brand); }
.pc-row__vendor{ min-width:0; }
.pc-row__name{ display:flex; align-items:center; gap:8px; }
.pc-row__name b{ font-size:var(--fs-title); font-weight:var(--fw-bold); letter-spacing:var(--tr-title); }
.pc-badge-top{
  font-size:var(--fs-overline); font-weight:var(--fw-bold);
  letter-spacing:var(--tr-overline); text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid var(--blue-100); border-radius:999px; padding:2px 8px; white-space:nowrap;
}
.pc-row__summary{
  margin-top:2px; font-size:var(--fs-caption); color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-row__tags{ margin-top:5px; display:flex; gap:5px; flex-wrap:wrap; }
.pc-tag{
  font-size:var(--fs-overline); font-weight:var(--fw-semibold);
  color:var(--text-muted); background:var(--surface-sunken);
  border-radius:6px; padding:2px 7px; white-space:nowrap;
}
.pc-row__pay{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.pc-row__pct{
  font-size:var(--fs-data-title); font-weight:var(--fw-bold);
  color:var(--rank-pct); font-variant-numeric:tabular-nums; line-height:1;
}
.pc-row__pct small{ font-size:.5em; font-weight:var(--fw-bold); margin-left:1px; }
.pc-feebar{ width:100%; max-width:120px; height:7px; border-radius:5px;
  background:var(--feebar-track); overflow:hidden; }
.pc-feebar i{ display:block; height:100%; border-radius:5px; background:var(--feebar-fill); }

/* 입금속도 — clock icon + N분 */
.pc-row__speed{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--text-secondary);
}
.pc-row__speed svg{ width:16px; height:16px; color:var(--brand); }
.pc-row__speed b{ font-size:var(--fs-title); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.pc-row__speed b small{ font-size:.6em; font-weight:var(--fw-semibold); color:var(--text-muted); margin-left:1px; }

.pc-row__go{
  justify-self:end;
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px; min-height:44px; border-radius:10px;   /* ≥44px touch target (P2-D7) */
  background:var(--brand); color:var(--text-on-inverse);
  font-size:var(--fs-label-sm); font-weight:var(--fw-bold); white-space:nowrap;
  transition:background var(--d-fast) var(--e-out-quart), transform var(--d-instant) var(--e-out-quart);
}
.pc-row__go:hover{ background:var(--brand-strong); }
.pc-row__go:active{ transform:scale(.97); }   /* W-6 press feedback */

/* ════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .pc-rank-finder{ padding:13px 14px; gap:12px; }
  .pc-rank-finder__ico{ width:40px; height:40px; }
  .pc-rank-finder__sub{ display:none; }   /* single tight line — keep the list high */
  .pc-subtab{ padding:14px 6px; gap:7px; font-size:var(--fs-label-sm); }
  .pc-subtab__icon{ width:24px; height:24px; }
  .pc-table__colhead{ display:none; }         /* header labels hidden; rows self-describe */
  .pc-row{
    grid-template-columns:36px 1fr auto;
    grid-template-areas:
      "rank vendor pay"
      "rank speed go";
    row-gap:10px;
  }
  .pc-row__rank{ grid-area:rank; align-self:start; }
  .pc-row__vendor{ grid-area:vendor; }
  .pc-row__pay{ grid-area:pay; align-items:flex-end; }
  .pc-row__speed{ grid-area:speed; flex-direction:row; align-items:center; justify-self:start; }
  .pc-row__go{ grid-area:go; }
}
/* 320–360px: give the vendor name the full content width so rank-1 ("호호페이")
 * no longer breaks 1 char/line. Stack pay/speed/go below vendor. NO
 * overflow-wrap:anywhere (banned on Hangul display). (P2-D3) */
@media (max-width:360px){
  .pc-row{
    grid-template-columns:32px 1fr;
    grid-template-areas:
      "rank vendor"
      "rank pay"
      "rank speed"
      "rank go";
    row-gap:8px;
  }
  .pc-row__pay{ align-items:flex-start; }
  .pc-row__go{ justify-self:start; }
}
@media (min-width:768px) and (max-width:1023px){
  .pc-table__colhead,.pc-row{ grid-template-columns:44px minmax(0,1.3fr) minmax(110px,1.6fr) 88px 78px; }
}
@media (min-width:1024px){
  /* G-2: cap the data instrument so the % sits next to the vendor cluster, not
   * across a 1440 void. Fixed 220px feebar column kills the 2fr balloon;
   * centered 920px reads as a considered desktop table. */
  .pc-table__colhead,.pc-row{
    grid-template-columns:56px minmax(0,1.2fr) 220px 96px 96px;
    column-gap:var(--space-5);
    /* width:100% so rows resolve to the 920 cap uniformly — inside the flex
     * column (.pc-table) auto side-margins otherwise disable stretch and each
     * row collapses to its own content width (rank-1's badge made it widest). */
    width:100%; max-width:920px; margin-inline:auto;
  }
  /* A-1a: with the cluster capped, promote the #1 payout to the page's hero
   * number (ranks 2..N stay --fs-data-title). Enabled by G-2's width cap. */
  .pc-row--1 .pc-row__pct{
    font-size:clamp(2.5rem, 1.6rem + 2.2vw, 3.25rem);
    letter-spacing:var(--tr-hero);
  }
}

/* ════════════════════════════════════════════════════════════════════
 * PPTX 수정 1차 — HERO CAROUSEL (slide 1) · AI 실시간 헤더 (slide 4/5) ·
 * 얇은 행 + 순위 움직임 (slide 6) · "AI 1위" 배지 (image8)
 * ⚠ Client-directed AI/실시간 framing ("PPT대로 구현"); movement is FE-only.
 * ════════════════════════════════════════════════════════════════════ */
.pc-hero-carousel{
  position:relative; overflow:hidden;
  border-radius:18px; margin-bottom:var(--space-5);
  background:var(--banner-grad); box-shadow:var(--sh);
}
.pc-hero-carousel::after{         /* soft light circle upper-right (mockup) */
  content:""; position:absolute; top:-32%; right:-8%;
  width:58%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(109,139,255,.30), transparent 70%);
  pointer-events:none;
}
.pc-hero-track{ display:flex; transition:transform var(--d-slow) var(--e-out-expo); }
.pc-hero-slide{
  flex:0 0 100%; min-width:100%;
  padding:22px 22px 34px; color:var(--text-on-inverse);
}
.pc-hero-slide__eyebrow{ display:block; color:var(--text-on-inverse-2); margin-bottom:10px; }
.pc-hero-slide__eyebrow::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--blue-400); margin-right:7px; vertical-align:middle;
}
.pc-hero-slide__title{
  font-size:var(--fs-headline); font-weight:var(--fw-extrabold);
  line-height:1.2; letter-spacing:var(--tr-headline); word-break:keep-all;
}
.pc-hero-slide__sub{
  margin-top:12px; color:var(--text-on-inverse-2);
  font-size:var(--fs-body); word-break:keep-all;
}
.pc-hero-dots{ position:absolute; left:22px; bottom:14px; display:flex; gap:6px; }
.pc-hero-dot{
  width:7px; height:7px; border-radius:999px; padding:0; border:0;
  background:rgba(255,255,255,.32); cursor:pointer;
  transition:width var(--d-fast) var(--e-out-quart), background var(--d-fast) var(--e-out-quart);
}
.pc-hero-dot.is-active{ width:18px; background:var(--white); }

/* AI 실시간 랭킹 헤더 (slide 4/5) */
.pc-airank{ margin-bottom:var(--space-5); }
.pc-airank__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pc-airank__title{
  color:var(--text-primary); letter-spacing:var(--tr-display-2);
  line-height:var(--lh-display-2); margin:0;
}
.pc-airank__status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-caption); font-weight:var(--fw-semibold);
  color:var(--brand); background:var(--brand-soft);
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.pc-airank__dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand);
  animation:pc-ai-pulse 1.6s ease-in-out infinite;
}
@keyframes pc-ai-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.pc-airank .pc-home__lede{ margin-top:var(--space-3); }

/* slide 6/7 — thinner rows so the movement reads + 자간 밑 리포트와 통일 */
.pc-table{ gap:6px; }
.pc-row{ padding:12px var(--space-4); }
.pc-row__name b{ letter-spacing:var(--tr-title); }

/* "AI 1위" badge (image8) — filled blue pill on the DISPLAYED rank-1 row */
.pc-badge-ai{
  color:var(--white); background:var(--brand); border-color:transparent;
}

/* sponsored ad slot (is_sponsored → labeled, never interleaved) */
.pc-ad-slot{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.pc-ad-slot__label{ display:block; padding:6px 4px 0; color:var(--text-muted); }
.pc-tag--ad{ color:var(--brand); background:var(--brand-soft); }

@media (max-width:767px){
  .pc-hero-slide{ padding:18px 18px 30px; }
  .pc-row{ padding:11px 13px; }
}
@media (prefers-reduced-motion:reduce){
  .pc-airank__dot{ animation:none; }
  .pc-hero-track{ transition:none; }
}

/* ===== css/verify.css ===== */
/*!
 * Pay Compass — verify.css (검증 기준 · 4-stage 신뢰정제 spectacle)
 * OWNER: verify module worker. References css/tokens.css + base.css only.
 * (css/spine.css is NOT linked in index.html, so the canvas/pin styling the
 *  spine engine needs is provided here, tuned to this tab's pinned viewport.)
 *
 * Blue tokens only. The single red is the stage-02 먹튀 flash (.vf-flag +
 * spine flag particles), isolated and reclaimed to navy by the shader.
 */

/* ══════════════════════════════════════════════════════════════════════
 * INTRO — full-bleed navy "그 순위, 어떻게 나왔을까요?"
 * ════════════════════════════════════════════════════════════════════ */
.pc-verify { background: var(--navy-900); }

.vf-intro {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 90% at 50% 6%, var(--navy-600) 0%, var(--navy-900) 62%);
  color: var(--text-on-inverse);
  overflow: hidden;
}
.vf-intro__inner { position: relative; z-index: 1; padding-block: var(--space-9); }
.vf-intro .pc-demo-badge {
  background: rgba(157,176,238,.14);
  border-color: rgba(157,176,238,.32);
  color: var(--blue-150);
}
.vf-intro__q {
  margin-top: var(--space-5);
  color: var(--text-on-inverse);
  max-width: 14ch;
}
.vf-intro__lead {
  margin-top: var(--space-5);
  max-width: 44ch;
  color: var(--blue-200);
}
.vf-intro__lead em { font-style: normal; color: var(--brand-on-inverse); font-weight: var(--fw-semibold); }

.vf-scrollcue {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8);
  font-size: var(--fs-overline); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-overline); text-transform: uppercase;
  color: var(--blue-200);
}
.vf-scrollcue__line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--blue-300), transparent);
  animation: vf-cue 1.8s var(--e-inout) infinite;
  transform-origin: top;
}
@keyframes vf-cue { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }
/* W-7: scroll-cue reduced-motion guard — static full line, no pulse loop */
@media (prefers-reduced-motion: reduce) {
  .vf-scrollcue__line { animation: none; transform: scaleY(1); opacity: .6; }
}

/* ══════════════════════════════════════════════════════════════════════
 * SPECTACLE — tall scroll driver; .vf-viewport is pinned (100vh) and holds
 * three absolutely-stacked layers: backdrop ← particles ← copy.
 * ════════════════════════════════════════════════════════════════════ */
.vf-spectacle {
  position: relative;
  height: 460vh;               /* scroll length that drives progress 0→1 */
  background: var(--navy-900);
}
.vf-viewport {
  position: relative;
  height: 100vh;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  touch-action: pan-y;
}

/* layer 1 — background chapter arc (JS sets background per progress) */
.vf-back {
  position: absolute; inset: 0; z-index: 1;
  background: var(--navy-900);
  will-change: background;
}

/* layer 2 — the spine canvas (transparent clear; particles glow over backdrop) */
#spine-canvas.vf-canvas,
canvas.vf-canvas {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  display: block;
  background: transparent;
  pointer-events: none;
}
/* the actual drawing canvas the engine appends (Canvas2D/WebGL) */
.vf-viewport canvas.pc-spine-gl {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; display: block;
}

/* layer 3 — big text beside the particles */
.vf-fore {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  pointer-events: none;
}
.vf-fore__inner { position: relative; width: 100%; }

/* each stage overlaps; only .is-active is shown */
.vf-stage {
  position: absolute; top: 50%; left: var(--shell-pad);
  transform: translateY(-50%);
  max-width: min(48ch, 56%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--e-out-quart);
}
.vf-fore .pc-container { position: relative; }
.vf-stage.is-active { opacity: 1; visibility: visible; }
/* Fix B — stage-01 ships VISIBLE by default (never gated behind the JS
   activation race). impeccable: reveal enhances an already-visible default.
   `:not(.is-past)` keeps it visible at rest + while active, but lets it hide
   normally once the scroll scrubs past it (applyStage adds .is-past). */
.vf-stage[data-stage="0"]:not(.is-past) { opacity: 1; visibility: visible; }
.vf-stage__text { position: relative; z-index: 1; pointer-events: auto; }

/* ghost numeral — oversize, low-opacity anchor behind the headline */
.vf-ghost {
  position: absolute; z-index: 0;
  top: 50%; left: -0.06em; transform: translateY(-54%);
  font-size: var(--fs-data-hero);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--tr-hero);
  color: var(--blue-400);
  opacity: .12;
  pointer-events: none;
}

.vf-stage__eyebrow { display: block; color: var(--blue-200); margin-bottom: var(--space-3); }
.vf-stage__head {
  color: var(--text-on-inverse);
  text-shadow: 0 2px 30px rgba(14,17,36,.55);
}
.vf-stage__head .vf-line { display: block; }
.vf-stage__head em { font-style: normal; color: var(--brand-on-inverse); }
.vf-stage__head em.vf-flag { color: var(--risk); }   /* the ONLY red word — stage 02, reclaimed */
.vf-stage__cap {
  margin-top: var(--space-4);
  max-width: 40ch;
  color: var(--blue-150);
}

/* live count (scroll-driven, not a timer) */
.vf-count {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(157,176,238,.22);
  border-radius: 999px;
  background: rgba(14,17,36,.35);
}
.vf-count__num { color: var(--brand-on-inverse); }
.vf-count__label { color: var(--blue-200); }

.vf-stage__home {
  display: inline-block; margin-top: var(--space-5);
  padding: 10px 18px; border-radius: 999px;
  background: var(--brand); color: var(--white);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  box-shadow: var(--sh-brand);
  pointer-events: auto;
}
.vf-stage__home:hover { background: var(--brand-strong); }

/* light-chapter arrival — text flips to ink for contrast on the pale backdrop */
.vf-fore.is-light .vf-stage__head { color: var(--text-primary); text-shadow: none; }
.vf-fore.is-light .vf-stage__head em { color: var(--brand); }
.vf-fore.is-light .vf-stage__eyebrow { color: var(--brand); }
.vf-fore.is-light .vf-stage__cap { color: var(--text-secondary); }
.vf-fore.is-light .vf-count { background: rgba(255,255,255,.55); border-color: var(--blue-100); }
.vf-fore.is-light .vf-count__num { color: var(--brand); }
.vf-fore.is-light .vf-count__label { color: var(--text-muted); }
.vf-fore.is-light .vf-ghost { color: var(--navy-500); opacity: .1; }

/* ── W-2 · stage-progress rail (pinned in the viewport; JS drives node/fill) ── */
.vf-rail {
  position: absolute; z-index: 4;
  right: var(--shell-pad); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.vf-rail__dot {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(157,176,238,.18);
  border: 1px solid rgba(157,176,238,.35);
  transition: background .3s var(--e-out-quart), transform .3s var(--e-out-quart),
              border-color .3s, box-shadow .3s;
}
.vf-rail__no {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: var(--fw-bold); font-style: normal;
  color: var(--blue-300); opacity: 0; white-space: nowrap;
  transition: opacity .3s;
}
.vf-rail__dot.is-done { background: var(--blue-400); border-color: var(--blue-400); }
.vf-rail__dot.is-active {
  background: var(--brand); border-color: transparent;
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(109,139,255,.20);
}
.vf-rail__dot.is-active .vf-rail__no { opacity: 1; color: var(--brand-on-inverse); }
.vf-rail__conn { width: 2px; height: 40px; background: rgba(157,176,238,.16); overflow: hidden; }
.vf-rail__fill {
  display: block; width: 100%; height: 100%;
  background: var(--blue-400);
  transform: scaleY(0); transform-origin: top;
}

/* ── W-4 · needle-lock bloom rhyme (one-shot pulse over the rank-1 bar) ── */
.vf-bloom {
  position: absolute; z-index: 2;
  top: 30%; left: 46%;
  width: 34vmin; height: 34vmin; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(circle, rgba(234,241,255,.9) 0%, rgba(234,241,255,0) 70%);
  opacity: 0; pointer-events: none;
}
.vf-bloom.is-bloom { animation: vf-bloom-pulse 380ms var(--e-out-quart) 1; }
@keyframes vf-bloom-pulse {
  0%   { opacity: 0;  transform: translate(-50%,-50%) scale(0.60); }
  45%  { opacity: .9; transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .vf-bloom, .vf-bloom.is-bloom { animation: none !important; opacity: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
 * METHODOLOGY — cool-white light chapter (arrival), 4 criteria + 3 steps.
 * ════════════════════════════════════════════════════════════════════ */
.vf-method {
  position: relative;
  background: var(--cool-white);
  color: var(--text-primary);
  border-top: 1px solid var(--blue-100);
}
.vf-method__head { text-align: center; max-width: 46ch; margin-inline: auto; }
.vf-method__title { margin-top: var(--space-4); }
.vf-method__sub { margin-top: var(--space-4); color: var(--text-secondary); }
.vf-method__stamp { margin-top: var(--space-3); color: var(--text-muted); }

.vf-crit-grid {
  margin-top: var(--space-8);
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vf-crit {
  position: relative;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.vf-crit__dot {
  position: absolute; top: var(--space-6); left: var(--space-6);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.vf-crit__title { margin-left: 22px; }
.vf-crit__desc { margin-top: var(--space-3); color: var(--text-secondary); }

.vf-proc { margin-top: var(--space-9); }
.vf-proc__title { text-align: center; }
.vf-steps {
  margin-top: var(--space-6);
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vf-step {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5);
  background: var(--brand-soft);
  border-radius: var(--rs);
}
.vf-step__no { color: var(--brand); line-height: 1; flex: none; }
.vf-step__title { }
.vf-step__desc { margin-top: var(--space-2); color: var(--text-secondary); }

.vf-adsep {
  margin-top: var(--space-9);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--banner-grad);
  color: var(--text-on-inverse);
  border-radius: var(--r);
}
.vf-adsep__title { color: var(--text-on-inverse); }
.vf-adsep__body { margin-top: var(--space-4); color: var(--blue-150); max-width: 52ch; margin-inline: auto; }
.vf-adsep__cta {
  display: inline-block; margin-top: var(--space-6);
  padding: 12px 22px; border-radius: 999px;
  background: var(--white); color: var(--brand);
  font-size: var(--fs-label); font-weight: var(--fw-bold);
}
.vf-adsep__cta:hover { background: var(--blue-050); }

/* ══════════════════════════════════════════════════════════════════════
 * STATIC (tier-c / reduced-motion) — no motion, 100% content preserved.
 * ════════════════════════════════════════════════════════════════════ */
.vf-static-spectacle {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-600) 70%, var(--cool-white) 100%);
  padding-block: var(--space-9);
}
.vf-static-figure {
  margin: 0 auto var(--space-8);
  max-width: 920px;
  padding: var(--space-5);
  background: var(--navy-800);
  border: 1px solid var(--navy-400);
  border-radius: var(--r);
}
.vf-static-svg { width: 100%; height: auto; }
.vf-sstages { display: grid; gap: var(--space-5); }
.vf-sstage {
  position: relative;
  display: flex; gap: var(--space-5); align-items: center;
  padding: var(--space-6);
  background: rgba(20,26,51,.55);
  border: 1px solid var(--navy-400);
  border-radius: var(--r);
  color: var(--text-on-inverse);
}
.vf-sstage:last-child { background: rgba(255,255,255,.9); color: var(--text-primary); border-color: var(--blue-100); }
.vf-ghost--static {
  position: static; transform: none; opacity: .22;
  color: var(--blue-300); flex: none;
}
.vf-sstage:last-child .vf-ghost--static { color: var(--brand); opacity: .16; }
.vf-sstage .vf-stage__head { text-shadow: none; }
.vf-sstage:last-child .vf-stage__head { color: var(--text-primary); }
.vf-sstage:last-child .vf-stage__head em { color: var(--brand); }
.vf-sstage:last-child .vf-stage__eyebrow { color: var(--brand); }
.vf-sstage:last-child .vf-stage__cap { color: var(--text-secondary); }
.vf-sstage:last-child .vf-count__num { color: var(--brand); }
.vf-sstage:last-child .vf-count__label { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .vf-crit-grid { grid-template-columns: 1fr; }
  .vf-steps { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .vf-spectacle { height: 420vh; }
  .vf-rail { display: none; }   /* narrow fine-pointer window: stages are bottom-anchored, rail would crowd */
  .vf-stage {
    left: var(--shell-pad); right: var(--shell-pad);
    max-width: none;
  }
  .vf-stage__cap { max-width: none; }
  .vf-ghost { font-size: 88px; opacity: .1; }
  .vf-fore { align-items: flex-end; }
  .vf-stage { top: auto; bottom: 12vh; transform: none; }
  .vf-sstage { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ════════════════════════════════════════════════════════════════════
 * PPTX 수정 1차 — slide 8: 검증기준 가독성 (띄어쓰기·자간·행간 개선)
 * `word-break:keep-all` = Korean stays whole-word per line (no mid-word breaks);
 * `text-wrap:pretty` balances ragged edges; slightly looser line-height + relaxed
 * tracking on running copy. Body/caption run tighter tracking than the default
 * −0.02~−0.03em display tokens for comfortable reading. Appended → cascade wins.
 * ════════════════════════════════════════════════════════════════════ */
.pc-verify .vf-stage__head,
.pc-verify .vf-stage__cap,
.pc-verify .vf-crit__title,
.pc-verify .vf-crit__desc,
.pc-verify .vf-step__title,
.pc-verify .vf-step__desc,
.pc-verify .vf-method__title,
.pc-verify .vf-method__sub,
.pc-verify .vf-adsep__title,
.pc-verify .vf-adsep__body,
.pc-verify .vf-intro__q,
.pc-verify .vf-intro__lead{
  word-break: keep-all;
  text-wrap: pretty;
}
/* running copy (paragraphs) — looser line-height + neutral tracking for legibility */
.pc-verify .vf-stage__cap,
.pc-verify .vf-crit__desc,
.pc-verify .vf-step__desc,
.pc-verify .vf-method__sub,
.pc-verify .vf-adsep__body,
.pc-verify .vf-intro__lead{
  line-height: 1.72;
  letter-spacing: 0.01em;
}

/* ===== css/tabs.css ===== */
/*!
 * Pay Compass — tabs.css (리포트 · 소침반 소개 · 문의하기 · 이용 가이드 · 블랙리스트)
 * OWNER: content-tabs-builder (Phase 2). References css/tokens.css + base.css only.
 * Blue tokens throughout; red (--risk) isolated to the 블랙리스트 tab (.pc-bl-tab).
 */

/* ── content-panel wrapper (tabs-owned; NOT the frozen shell.css .pc-tab
 * tab-BUTTON class — reusing that name caused the opacity/clip collision) ── */
.pc-tabsec{ white-space:normal; }

/* ── shared tab header ──────────────────────────────────────────────── */
.pc-tabhead{ margin-bottom:var(--space-6); }
.pc-tabhead h1{ margin-bottom:var(--space-3); }
.pc-tabhead__lead{ color:var(--text-secondary); }
/* ── toss cutout illustrations (transparent PNGs → drop-shadow, never box-shadow) ── */
.pc-tabhead--illust{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.pc-tabhead--illust .pc-tabhead__txt{ flex:1 1 240px; min-width:0; }
.pc-tabhead--illust .pc-tabhead__txt h1{ margin-bottom:var(--space-3); }
.pc-tabhead__illust{ flex:0 0 auto; width:118px; height:auto; filter:var(--sh-illust); }
.pc-guide-illust{ margin:0 auto var(--space-3); width:156px; max-width:58%; }
.pc-guide-illust img{ display:block; width:100%; height:auto; filter:var(--sh-illust); }
@media (max-width:560px){ .pc-tabhead__illust{ width:88px; } }
@media (min-width:1024px){
  /* G-7: desktop editorial 2-col header — the illustration carries real weight
   * instead of floating small above centered text. */
  .pc-tabhead--illust{ flex-wrap:nowrap; }
  .pc-tabhead__illust{ width:200px; }
  .pc-guide-illust{ width:220px; max-width:40%; }
}
/* tabs-owned spacing modifier — do NOT redefine base.css .pc-demo-badge itself */
.pc-tb-badge--gap{ margin-bottom:var(--space-3); }
/* tabs-owned color modifier — do NOT redefine base.css .t-overline itself */
.pc-tb-label--muted{ color:var(--text-muted); }

.pc-empty{
  border:1px dashed var(--border-default); border-radius:var(--rs);
  background:var(--surface-sunken); padding:var(--space-6);
  text-align:center;
}
.pc-empty b{ display:block; margin-bottom:var(--space-2); }
.pc-empty p{ color:var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════
 * 1. 리포트
 * ════════════════════════════════════════════════════════════════════ */
.pc-rep-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.pc-rep-row{
  display:flex; align-items:center; gap:var(--space-4);
  width:100%; text-align:left;
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:var(--rs); padding:var(--space-4) var(--space-5);
  box-shadow:var(--sh-s); transition:border-color var(--d-fast) var(--e-out-quart), box-shadow var(--d-fast) var(--e-out-quart), transform var(--d-fast) var(--e-out-quart);
}
.pc-rep-row:hover{ border-color:var(--border-brand); box-shadow:var(--sh); }
.pc-rep-row:active{ transform:scale(.995); }
.pc-rep-row__body{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.pc-rep-row__title{ color:var(--text-primary); }
.pc-rep-row__sub{ color:var(--text-muted); }
.pc-rep-row__chev{ color:var(--text-faint); font-size:22px; line-height:1; flex:0 0 auto; }
/* NEW badge — brand/neutral, NOT red */
.pc-rep-new{
  flex:0 0 auto; align-self:flex-start;
  background:var(--brand-soft); color:var(--brand-strong);
  border:1px solid var(--blue-100); border-radius:999px;
  padding:2px 8px;
}

.pc-pager{
  display:flex; align-items:center; justify-content:center; gap:var(--space-4);
  margin-top:var(--space-5);
}
.pc-pager__btn{
  width:40px; height:40px; border-radius:999px;
  border:1px solid var(--border-default); background:var(--surface-raised);
  color:var(--text-secondary); font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--d-fast) var(--e-out-quart), color var(--d-fast) var(--e-out-quart);
}
.pc-pager__btn:hover{ border-color:var(--border-brand); color:var(--brand); }
.pc-pager__label{ color:var(--text-muted); font-size:var(--fs-label); min-width:52px; text-align:center; }

/* magazine */
.pc-mag{ margin-top:var(--space-8); }
.pc-mag h2{ margin-bottom:var(--space-5); }
.pc-mag-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-3); }
@media (min-width:768px){
  .pc-mag-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  /* G-8b: lead card spans full width so 5 cards = 1(lead)+2+2, never a trailing
   * orphan — holds whether auto-fit resolves to 2 or 3 tracks. */
  .pc-mag-grid > .pc-mag-card:first-child{ grid-column:1 / -1; }
}
.pc-mag-card{
  display:flex; flex-direction:column; gap:var(--space-2); text-align:left;
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:var(--rs); padding:var(--space-5); overflow:hidden;
  box-shadow:var(--sh-s); transition:border-color var(--d-fast) var(--e-out-quart), box-shadow var(--d-fast) var(--e-out-quart), transform var(--d-fast) var(--e-out-quart);
}
/* toss-style full-bleed cover art: negative-margin out to card edges, corners clipped by card overflow */
.pc-mag-card__media{ margin:calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-1); background:var(--surface-base); }
.pc-mag-card__media img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.pc-mag-card:hover{ border-color:var(--border-brand); box-shadow:var(--sh); }
.pc-mag-card:active{ transform:scale(.995); }
.pc-mag-cat{ color:var(--brand); }
.pc-mag-title{ color:var(--text-primary); }
.pc-mag-meta{ color:var(--text-muted); margin-top:auto; }

/* report reader body (rendered into #pc-reader-body, shell-owned overlay) */
.pc-rep-period{ color:var(--text-muted); }
.pc-rep-glance{ display:flex; gap:var(--space-6); margin:var(--space-4) 0; flex-wrap:wrap; }
.pc-rep-stat{ display:flex; flex-direction:column; gap:2px; }
.pc-rep-stat b{ color:var(--brand); }
.pc-rep-note{ color:var(--text-secondary); }
.pc-rep-ranklist{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); }
.pc-rep-rankrow{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-sunken); border-radius:var(--rs);
}
.pc-rep-rank{ color:var(--text-faint); font-weight:var(--fw-bold); width:20px; }
.pc-rep-vname{ flex:1 1 auto; font-weight:var(--fw-semibold); }
.pc-rep-vpct{ color:var(--brand); font-weight:var(--fw-bold); }
.pc-rep-disc{ color:var(--text-muted); margin-top:var(--space-6); }

/* article rich-text (verbatim bodyHtml) — scoped under the tabs-owned
 * .pc-tb-article wrapper so it never restyles other content (legal docs,
 * report doc) rendered into the shared shell.css .pc-reader__body. */
.pc-reader__body .pc-tb-article .lead{ font-size:var(--fs-body-lg); color:var(--text-primary); font-weight:var(--fw-medium); }
.pc-reader__body .pc-tb-article ul,.pc-reader__body .pc-tb-article ol{ max-width:640px; margin:var(--space-3) auto 0; padding-left:1.3em; }
.pc-reader__body .pc-tb-article li{ font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--text-secondary); margin-top:var(--space-2); }
.pc-reader__body .pc-tb-article .callout{
  max-width:640px; margin:var(--space-5) auto 0;
  background:var(--brand-soft); border:1px solid var(--blue-100);
  border-radius:var(--rs); padding:var(--space-4) var(--space-5);
  font-size:var(--fs-body); color:var(--text-secondary);
}
.pc-reader__body .pc-tb-article .callout b{ color:var(--brand-strong); }

/* ════════════════════════════════════════════════════════════════════
 * 2. 소침반 소개
 * ════════════════════════════════════════════════════════════════════ */
.pc-about-hero{
  background:var(--banner-grad); color:var(--text-on-inverse);
  padding-block:var(--space-9);
}
.pc-about-kicker{ color:var(--brand-on-inverse); display:block; margin-bottom:var(--space-4); }
.pc-about-quote{ color:var(--white); margin-bottom:var(--space-5); }
.pc-about-sub{ color:var(--text-on-inverse-2); }

/* ── founder scroll-narrative: pinned compass instrument + passing story ──
 * The aside sticks while the story column scrolls past; the needle (dial)
 * wavers on scroll and LOCKS on 진북 at the payoff. Single ScrollTrigger drives
 * the needle; per-beat reveals via IntersectionObserver (.is-in). */
.pc-aboutn{ background:var(--surface-daylight); }
.pc-aboutn__inner{
  display:grid; grid-template-columns:1fr; gap:var(--space-6);
  padding-block:var(--space-8) var(--space-9);
}
@media (min-width:860px){
  .pc-aboutn__inner{ grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:var(--space-8); align-items:start; }
}

/* aside — sticky instrument card */
.pc-aboutn__aside{
  position:sticky; top:calc(var(--topbar-h) + var(--space-4)); z-index:1;
  align-self:start;
}
.pc-aboutn__instrument{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:var(--r); padding:var(--space-6) var(--space-5);
  box-shadow:var(--sh);
}
.pc-aboutn__kicker{ color:var(--brand); letter-spacing:var(--tr-overline); }
.pc-aboutn__compass{ width:min(56vw,180px); aspect-ratio:1; }
.pc-aboutn__readout{ display:flex; flex-direction:column; align-items:center; gap:6px; min-height:44px; }
.pc-aboutn__north{
  font-size:var(--fs-overline); font-weight:var(--fw-bold); letter-spacing:var(--tr-overline);
  text-transform:uppercase; color:var(--brand);
  background:var(--brand-soft); border:1px solid var(--blue-100);
  border-radius:999px; padding:2px 10px;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--d-base) var(--e-out-quart), transform var(--d-base) var(--e-out-quart);
}
.pc-aboutn.is-locked .pc-aboutn__north,.pc-aboutn__north.is-in{ opacity:1; transform:none; }
.pc-aboutn__side{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--text-secondary);
}
.pc-aboutn__side::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--sky); box-shadow:0 0 10px var(--sky);
  transition:background var(--d-base) var(--e-out-quart), box-shadow var(--d-base) var(--e-out-quart);
}
.pc-aboutn.is-locked .pc-aboutn__side{ color:var(--brand-strong); }
.pc-aboutn.is-locked .pc-aboutn__side::before{ background:var(--brand); box-shadow:0 0 10px var(--brand); }
@media (max-width:859px){
  .pc-aboutn__instrument{ flex-direction:row; justify-content:flex-start; gap:var(--space-4); padding:var(--space-4) var(--space-5); }
  .pc-aboutn__compass{ width:96px; flex:0 0 auto; }
  .pc-aboutn__instrument .pc-aboutn__kicker{ display:none; }
  .pc-aboutn__readout{ align-items:flex-start; min-height:0; }
}
@media (max-width:767px){
  /* P2-D6: shrink the pinned needle card footprint (~23% of viewport → smaller)
   * while KEEPING position:sticky — protects both the motion floor AND the
   * watch-it-LOCK choreography (do NOT switch the aside to position:relative). */
  .pc-aboutn__compass{ width:72px; }
  .pc-aboutn__instrument{ gap:var(--space-3); padding:var(--space-3) var(--space-4); }
}

/* story column — beats reveal as they pass the compass */
.pc-aboutn__story{ min-width:0; }
.pc-aboutn__beat{
  color:var(--text-secondary); max-width:44ch;
  opacity:.55; transform:translateY(20px);
  transition:opacity var(--d-slow) var(--e-out-quart), transform var(--d-slow) var(--e-out-quart);
}
.pc-aboutn__beat + .pc-aboutn__beat{ margin-top:var(--space-8); }
.pc-aboutn__beat b{ color:var(--text-primary); font-weight:var(--fw-bold); }
.pc-aboutn__beat.is-in{ opacity:1; transform:none; }

.pc-aboutn__illust{ margin:var(--space-7) 0; width:240px; max-width:72%; }
.pc-aboutn__illust img{ display:block; width:100%; height:auto; filter:var(--sh-illust); }
.pc-aboutn__illust--mid{
  opacity:.55; transform:translateY(20px);
  transition:opacity var(--d-slow) var(--e-out-quart), transform var(--d-slow) var(--e-out-quart);
}
.pc-aboutn__illust--mid.is-in{ opacity:1; transform:none; }

/* the LOCK payoff — lands in sync with the needle settling (--pay-op driven by JS) */
.pc-aboutn__payoff{
  margin-top:var(--space-9);
  padding:var(--space-7) var(--space-6);
  background:var(--banner-grad); color:var(--text-on-inverse);
  border-radius:var(--r); box-shadow:var(--sh-l);
  opacity:calc(0.72 + 0.28 * var(--pay-op, 0));
  transform:translateY(calc((1 - var(--pay-op, 0)) * 8px));
}
.pc-aboutn__payoff-eyebrow{ display:block; color:var(--brand-on-inverse); margin-bottom:var(--space-3); }
.pc-aboutn__payoff-line{ color:var(--white); margin-bottom:var(--space-4); }
.pc-aboutn__payoff-body{ color:var(--blue-200); max-width:46ch; }
.pc-aboutn__payoff-body b{ color:var(--white); font-weight:var(--fw-bold); }
.pc-aboutn__illust--end{ margin:var(--space-6) auto 0; width:220px; max-width:64%; }
.pc-aboutn__illust--end img{ filter:var(--sh-illust-ondark); }

@media (prefers-reduced-motion:reduce){
  .pc-aboutn__beat,.pc-aboutn__illust--mid,.pc-aboutn__north{ opacity:1 !important; transform:none !important; }
  .pc-aboutn__payoff{ opacity:1 !important; transform:none !important; }
}

.pc-about-stats{
  display:grid; grid-template-columns:1fr; gap:var(--space-5);
  padding:var(--space-6); border-radius:var(--r);
  background:var(--surface-daylight); border:1px solid var(--border-default);
}
@media (min-width:768px){ .pc-about-stats{ grid-template-columns:repeat(3,1fr); } }
.pc-about-stat{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
/* metrics render on the data-title scale (28→40, table-%/count purpose),
 * NOT data-hero: 3 hero numbers in a 3-col grid collide into one blob ≥768. */
.pc-about-stat__num{ color:var(--brand); font-size:var(--fs-data-title); white-space:normal; line-height:var(--lh-data-title); }
.pc-about-stat__label{ color:var(--text-secondary); }
.pc-about-asof{ color:var(--text-muted); margin-top:var(--space-5); }

/* ════════════════════════════════════════════════════════════════════
 * 3. 문의하기
 * ════════════════════════════════════════════════════════════════════ */
.pc-contact-chat,.pc-contact-biz{
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:var(--r); padding:var(--space-6); box-shadow:var(--sh-s);
  margin-bottom:var(--space-5);
}
.pc-contact-chat h2,.pc-contact-biz h2{ margin-bottom:var(--space-2); }
.pc-contact-chat p,.pc-contact-biz p{ color:var(--text-secondary); margin-bottom:var(--space-4); }

/* ════════════════════════════════════════════════════════════════════
 * shared intake form (vendor + blacklist)
 * Default validation tone = brand-blue (non-risk context: the 문의하기
 * vendor form). Red is a scoped override for .pc-bl-report only — see
 * "블랙리스트 report form — risk-context red" below. §11: red reserved
 * for 먹튀/risk contexts; the vendor form is not one of them.
 * ════════════════════════════════════════════════════════════════════ */
.pcf-form{ display:flex; flex-direction:column; gap:var(--space-4); }
.pcf-field{ display:flex; flex-direction:column; gap:var(--space-2); }
.pcf-label{ color:var(--text-primary); }
.pcf-req{ color:var(--brand-strong); }
.pcf-input{
  width:100%; background:var(--surface-base);
  border:1px solid var(--border-default); border-radius:var(--rs);
  padding:12px 14px; font-size:var(--fs-body); color:var(--text-primary);
  transition:border-color var(--d-fast) var(--e-out-quart), box-shadow var(--d-fast) var(--e-out-quart);
}
.pcf-input::placeholder{ color:var(--text-faint); }
.pcf-input:focus{ outline:none; border-color:var(--border-brand); box-shadow:0 0 0 3px var(--brand-soft); }
.pcf-textarea{ resize:vertical; min-height:88px; line-height:var(--lh-body); }
.pcf-select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:40px; }
.pcf-input[aria-invalid="true"]{ border-color:var(--brand-strong); box-shadow:0 0 0 3px var(--brand-soft); }
.pcf-error{ color:var(--brand-strong); min-height:0; }
.pcf-error:empty{ display:none; }

/* 블랙리스트 report form — risk-context red override (scoped to .pc-bl-report
 * only; the vendor form on 문의하기 keeps the brand-blue default above). */
.pc-bl-report .pcf-req{ color:var(--risk); }
.pc-bl-report .pcf-input[aria-invalid="true"]{ border-color:var(--risk); box-shadow:0 0 0 3px var(--risk-soft); }
.pc-bl-report .pcf-error{ color:var(--risk); }

.pcf-checks{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.pcf-check{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--border-default); border-radius:999px;
  padding:8px 14px; min-height:44px; font-size:var(--fs-label); color:var(--text-secondary);
  transition:border-color var(--d-fast) var(--e-out-quart), background var(--d-fast) var(--e-out-quart);
}
.pcf-check:hover{ border-color:var(--border-brand); }
.pcf-check input{ accent-color:var(--brand); width:16px; height:16px; }
.pcf-check:has(input:checked){ border-color:var(--border-brand); background:var(--brand-soft); color:var(--brand-strong); }

.pcf-btn,.pcf-submit{
  align-self:flex-start;
  border-radius:999px; padding:12px 22px;
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  transition:background var(--d-fast) var(--e-out-quart), opacity var(--d-fast) var(--e-out-quart), transform var(--d-instant) var(--e-out-quart);
}
.pcf-btn--primary,.pcf-submit{ background:var(--cta-bg); color:var(--white); }
.pcf-btn--primary:hover,.pcf-submit:hover{ background:var(--brand-strong); }
.pcf-btn:active,.pcf-submit:active{ transform:scale(.98); }
.pcf-submit{ width:100%; align-self:stretch; text-align:center; }
.pcf-submit[data-loading]{ opacity:.6; cursor:progress; }
.pcf-submit--risk{ background:var(--risk-strong); }
.pcf-submit--risk:hover{ background:var(--red-600); filter:brightness(.94); }
.pcf-hint{ color:var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════
 * 4. 이용 가이드
 * ════════════════════════════════════════════════════════════════════ */
.pc-guide-subtabs{ display:flex; gap:var(--space-2); margin-bottom:var(--space-6); flex-wrap:wrap; }
.pc-guide-pill{
  border:1px solid var(--border-default); border-radius:999px;
  padding:9px 18px; font-size:var(--fs-label); font-weight:var(--fw-semibold);
  color:var(--text-secondary); background:var(--surface-raised);
  transition:all var(--d-fast) var(--e-out-quart);
}
.pc-guide-pill:hover{ border-color:var(--border-brand); }
.pc-guide-pill.pc-tb-active{ background:var(--brand); border-color:var(--brand); color:var(--white); }

.pc-guide-intro{ color:var(--text-secondary); margin-bottom:var(--space-6); }
.pc-guide-steps{ display:flex; flex-direction:column; gap:var(--space-4); }
.pc-guide-step{ display:flex; gap:var(--space-4); align-items:flex-start; }
.pc-guide-step__no{
  flex:0 0 auto; color:var(--brand); min-width:44px;
  line-height:1;
}
.pc-guide-step__body b{ display:block; margin-bottom:2px; color:var(--text-primary); }
.pc-guide-step__body p{ color:var(--text-secondary); }

.pc-faq{ margin-top:var(--space-8); }
.pc-faq h2{ margin-bottom:var(--space-4); }
.pc-faq-item{ border-bottom:1px solid var(--border-default); }
.pc-faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  width:100%; text-align:left; padding:var(--space-4) 0; color:var(--text-primary);
}
.pc-faq-mark{ color:var(--brand); font-size:22px; line-height:1; flex:0 0 auto; }
.pc-faq-a{ padding:0 0 var(--space-4); }
.pc-faq-a p{ color:var(--text-secondary); }

/* ════════════════════════════════════════════════════════════════════
 * 5. 블랙리스트 — red isolation (risk context only)
 * ════════════════════════════════════════════════════════════════════ */
.pc-bl-tab .pc-tabhead__lead{ color:var(--text-secondary); }
.pc-bl-registry{
  border:1px solid var(--border-default); border-radius:var(--rs);
  overflow:hidden; background:var(--surface-raised);
}
.pc-bl-thead,.pc-bl-row{
  display:grid; grid-template-columns:1.4fr 1fr 1.3fr 0.9fr;
  gap:var(--space-3); align-items:center;
  padding:var(--space-3) var(--space-4);
}
.pc-bl-thead{
  background:var(--surface-sunken); color:var(--text-muted);
  font-size:var(--fs-caption); font-weight:var(--fw-bold);
  border-bottom:1px solid var(--border-default);
}
.pc-bl-row{ border-top:1px solid var(--border-subtle); font-size:var(--fs-label); }
.pc-bl-c--name{ font-weight:var(--fw-semibold); color:var(--text-primary); }
.pc-bl-c--date{ color:var(--text-muted); }
.pc-bl-c--tag{ color:var(--risk); }
.pc-bl-c--status{ color:var(--text-secondary); }
.pc-bl-empty{ padding:var(--space-7) var(--space-5); text-align:center; white-space:normal; }
.pc-bl-empty b{ display:block; margin-bottom:var(--space-2); color:var(--text-primary); }
.pc-bl-empty p{ color:var(--text-muted); max-width:44ch; margin-inline:auto; white-space:normal; }

.pc-bl-pointer{
  margin:var(--space-5) 0 var(--space-7);
  padding:var(--space-4) var(--space-5);
  background:var(--risk-soft); border:1px solid var(--red-050);
  border-left:3px solid var(--risk); border-radius:var(--rs);
  color:var(--text-secondary);
}
.pc-bl-link{ color:var(--brand); font-weight:var(--fw-semibold); text-decoration:underline; text-underline-offset:3px; }

.pc-bl-report{
  background:var(--surface-raised); border:1px solid var(--border-default);
  border-radius:var(--r); padding:var(--space-6); box-shadow:var(--sh-s);
}
.pc-bl-report h2{ margin-bottom:var(--space-2); }
.pc-bl-report > p{ color:var(--text-secondary); margin-bottom:var(--space-4); }

/* small screens: registry collapses gracefully */
@media (max-width:600px){
  .pc-bl-thead{ display:none; }
  .pc-bl-row{ grid-template-columns:1fr 1fr; gap:var(--space-1) var(--space-3); }
  .pc-bl-c--name{ grid-column:1 / -1; }
}

/* ===== css/wizard.css ===== */
/*!
 * Pay Compass — wizard.css (SHELL-D 추천 위저드 바텀시트 + 침 바인딩)
 * OWNER: wizard module worker (Phase 3). References tokens.css + base.css only.
 *
 * NAMESPACE: every class is prefixed .pc-wz*. State classes (.is-open/.is-selected/
 * .is-error/.is-top) are always qualified under a .pc-wz* ancestor so they cannot
 * collide with the shared home/verify/tabs cascade. Blue 3-layer tokens only —
 * NO red (wizard carries no risk context); the form-validation warn tone is sky/brand.
 */

/* ════════════════════════════════════════════════════════════════════
 * OVERLAY + SCRIM
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz{
  position:fixed; inset:0; z-index:var(--z-overlay);
  display:flex; align-items:flex-end; justify-content:center;
  visibility:hidden; pointer-events:none;
}
.pc-wz.is-open{ visibility:visible; pointer-events:auto; }

.pc-wz__scrim{
  position:absolute; inset:0;
  background:rgba(14,17,36,.52);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity var(--d-base) var(--e-out-quart);
}
.pc-wz.is-open .pc-wz__scrim{ opacity:1; }

/* ════════════════════════════════════════════════════════════════════
 * SHEET
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__sheet{
  position:relative;
  width:100%; max-width:520px;
  max-height:calc(100dvh - var(--space-6));
  display:flex; flex-direction:column;
  background:var(--surface-raised); color:var(--text-primary);
  border-radius:var(--r) var(--r) 0 0;
  box-shadow:var(--sh-l);
  outline:none;
}
/* Closed state is hidden via .pc-wz{visibility:hidden} — the sheet keeps its
 * natural flex-end position (no resting transform) so gsap can clearProps cleanly. */
@media (min-width:640px){
  .pc-wz{ align-items:center; }
  .pc-wz__sheet{ border-radius:var(--r); max-height:calc(100dvh - var(--space-8)); }
}

/* ── top control row ── */
.pc-wz__top{
  flex:0 0 auto;
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4) 0;
  min-height:40px;
  touch-action:none;                 /* P2-D5 — own the vertical drag gesture */
}
.pc-wz__back,
.pc-wz__close{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-secondary);
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  padding:6px; border-radius:999px;
  transition:background var(--d-fast) var(--e-out-quart), color var(--d-fast);
}
.pc-wz__back svg{ width:18px; height:18px; }
/* P2-D4 — ≥44px touch targets */
.pc-wz__back{ min-height:44px; }
.pc-wz__close{ margin-left:auto; min-width:44px; min-height:44px; padding:10px; justify-content:center; }
.pc-wz__close svg{ width:20px; height:20px; }
.pc-wz__back:hover,
.pc-wz__close:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.pc-wz__back[hidden]{ display:none; }
.pc-wz__grip{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:38px; height:4px; border-radius:999px; background:var(--border-default);
  cursor:grab;                       /* P2-D5 — now a real drag affordance */
}

/* ── mini needle slot ── */
.pc-wz__needle{
  flex:0 0 auto;
  width:64px; height:64px;
  margin:var(--space-2) auto var(--space-1);
}

/* ── scrollable body ── */
.pc-wz__body{
  flex:1 1 auto;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* P0-4 — reserve on-screen-keyboard clearance (--wz-kb set by wizard.js visualViewport). */
  padding:var(--space-2) var(--space-5) calc(var(--space-6) + var(--wz-kb, 0px) + env(safe-area-inset-bottom));
  text-align:center;
}

/* ════════════════════════════════════════════════════════════════════
 * SHARED STEP HEAD
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__eyebrow{
  display:block; color:var(--brand);
  text-transform:uppercase;
  margin-bottom:var(--space-2);
}
.pc-wz__head{
  color:var(--text-primary);
  margin:0 auto;
  max-width:16em;
}
.pc-wz__sub{
  color:var(--text-muted);
  margin:var(--space-2) auto 0;
  max-width:24em;
}

/* ════════════════════════════════════════════════════════════════════
 * CHIPS
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__chips{
  margin-top:var(--space-5);
  text-align:left;
}
.pc-wz__chips--grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
}
.pc-wz__chips--col{
  display:flex; flex-direction:column; gap:var(--space-3);
}

.pc-wz-chip{
  display:flex; align-items:center; gap:var(--space-3);
  width:100%;
  padding:var(--space-4);
  background:var(--surface-raised);
  border:1.5px solid var(--border-default);
  border-radius:var(--rs);
  text-align:left;
  transition:border-color var(--d-fast) var(--e-out-quart),
             background var(--d-fast), transform var(--d-instant);
}
.pc-wz-chip:hover{ border-color:var(--blue-200); background:var(--brand-soft); }
.pc-wz-chip:active{ transform:scale(.98); }
.pc-wz-chip.is-selected{
  border-color:var(--brand); background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand);
}
.pc-wz-chip--wide{ padding:var(--space-4) var(--space-5); }

.pc-wz-chip__badge{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 8px;
  border-radius:10px;
  font-size:var(--fs-label-sm); font-weight:var(--fw-bold); letter-spacing:-.01em;
}
.pc-wz-chip__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pc-wz-chip__label{
  font-size:var(--fs-body-lg); font-weight:var(--fw-semibold); color:var(--text-primary);
}
.pc-wz-chip__desc{
  font-size:var(--fs-caption); color:var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
 * FIELD (card-other · birth year) + honest inline error (sky/brand, NOT red)
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__field{
  display:flex; gap:var(--space-2);
  margin:var(--space-5) auto 0;
  max-width:320px;
}
.pc-wz__input{
  flex:1 1 auto; min-width:0;
  padding:var(--space-3) var(--space-4);
  font-size:var(--fs-body-lg); color:var(--text-primary);
  text-align:center;
  background:var(--surface-sunken);
  border:1.5px solid var(--border-default);
  border-radius:var(--rs);
  transition:border-color var(--d-fast) var(--e-out-quart), box-shadow var(--d-fast);
}
.pc-wz__input::placeholder{ color:var(--text-faint); }
.pc-wz__input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.pc-wz__input.is-error{
  border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(109,139,255,.20);   /* sky wash — attention without alarm */
}
.pc-wz__submit{
  flex:0 0 auto;
  padding:var(--space-3) var(--space-5);
  font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--white);
  background:var(--brand); border-radius:var(--rs);
  transition:background var(--d-fast) var(--e-out-quart);
}
.pc-wz__submit:hover{ background:var(--brand-strong); }
.pc-wz__error{
  margin:var(--space-3) auto 0;
  max-width:320px;
  font-size:var(--fs-caption); font-weight:var(--fw-semibold);
  color:var(--brand-strong);                    /* sky/brand warn tone (no red here) */
}
.pc-wz__error[hidden]{ display:none; }

/* ════════════════════════════════════════════════════════════════════
 * 만 19세 HARD GATE — calm navy panel, no bypass control anywhere
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__gate{
  margin-top:var(--space-4);
  padding:var(--space-6) var(--space-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
}
.pc-wz__gate-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:var(--surface-inverse); color:var(--brand-on-inverse);
}
.pc-wz__gate-ico svg{ width:30px; height:30px; }

/* ════════════════════════════════════════════════════════════════════
 * ANALYZING — single fixed line; the needle waver is the only "측정 중" signal
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__analyze{
  padding:var(--space-8) var(--space-4);
}
.pc-wz__analyze-line{
  color:var(--text-secondary);
  font-weight:var(--fw-semibold);
}

/* ════════════════════════════════════════════════════════════════════
 * RESULT
 * ════════════════════════════════════════════════════════════════════ */
.pc-wz__result{ padding-top:var(--space-3); }
.pc-wz__result .pc-wz__head{ margin-bottom:var(--space-5); }

.pc-wz__rec{
  text-align:center;
  padding:var(--space-5) var(--space-4) var(--space-4);
  background:linear-gradient(180deg, var(--brand-soft), var(--surface-raised) 70%);
  border:1px solid var(--blue-100);
  border-radius:var(--r);
}
.pc-wz__rec-id{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-bottom:var(--space-3);
}
.pc-wz__rec-name{ color:var(--text-primary); }
.pc-wz__rec-meta{ color:var(--text-muted); font-weight:var(--fw-medium); }

.pc-wz__pct-block{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-1);
}
.pc-wz__pct-num{
  display:flex; align-items:flex-start; justify-content:center;
  color:var(--brand);
}
.pc-wz__pct{ color:var(--brand); line-height:.92; }
.pc-wz__pct-unit{
  font-size:.46em; font-weight:var(--fw-bold);
  align-self:flex-start; margin-top:.34em; margin-left:.04em;
  color:var(--brand);
}
.pc-wz__pct-cap{ color:var(--text-muted); }

.pc-wz__rec-facts{
  display:flex; align-items:center; justify-content:center; gap:var(--space-5);
  margin-top:var(--space-4); padding-top:var(--space-4);
  border-top:1px solid var(--blue-100);
}
.pc-wz__speed{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pc-wz__speed-lbl{ color:var(--text-muted); }
.pc-wz__speed b{ font-size:var(--fs-body-lg); color:var(--text-primary); font-weight:var(--fw-bold); }
.pc-wz__go{
  padding:var(--space-3) var(--space-5);
  font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--white);
  background:var(--brand); border-radius:999px;
  box-shadow:var(--sh-brand);
  transition:background var(--d-fast) var(--e-out-quart);
}
.pc-wz__go:hover{ background:var(--brand-strong); }

.pc-wz__prep{
  margin-top:var(--space-4);
  color:var(--text-muted); text-align:center;
}
.pc-wz__guide-hook{
  display:inline-block; margin-top:2px;
  color:var(--brand); font-weight:var(--fw-semibold);
  white-space:nowrap;
}
.pc-wz__guide-hook:hover{ color:var(--brand-strong); text-decoration:underline; }

/* ── condition top3 ── */
.pc-wz__top3{ margin-top:var(--space-6); text-align:left; }
.pc-wz__top3-title{
  display:flex; align-items:center; gap:var(--space-2);
  color:var(--text-secondary); margin-bottom:var(--space-3);
}
.pc-wz__top3-list{ display:flex; flex-direction:column; gap:var(--space-2); }
.pc-wz-rankrow{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-sunken);
  border:1px solid var(--border-subtle);
  border-radius:var(--rs);
}
.pc-wz-rankrow.is-top{
  background:var(--rank1-bg); box-shadow:var(--rank1-ring); border-color:transparent;
}
.pc-wz-rankrow__no{
  flex:0 0 auto;
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-caption); font-weight:var(--fw-bold);
  background:var(--surface-raised); color:var(--text-muted);
}
.pc-wz-rankrow.is-top .pc-wz-rankrow__no{ background:var(--brand); color:var(--white); }
.pc-wz-rankrow__name{ flex:1 1 auto; font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--text-primary); }
.pc-wz-rankrow__pct{ flex:0 0 auto; color:var(--brand); }
.pc-wz-rankrow__unit{ font-size:.5em; font-weight:var(--fw-bold); margin-left:1px; }

/* ── restart / empty ── */
.pc-wz__restart{
  display:block; width:100%; max-width:320px;
  margin:var(--space-6) auto 0;
  padding:var(--space-4);
  font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--text-secondary);
  background:var(--surface-sunken);
  border:1.5px solid var(--border-default); border-radius:var(--rs);
  transition:border-color var(--d-fast) var(--e-out-quart), background var(--d-fast);
}
.pc-wz__restart:hover{ border-color:var(--blue-200); background:var(--brand-soft); }

.pc-wz__empty{ padding:var(--space-7) var(--space-4); }
.pc-wz__empty .pc-wz__sub{ margin-bottom:var(--space-2); }

/* ════════════════════════════════════════════════════════════════════
 * REDUCED MOTION — kill the slide/press micro-motion (tokens.css already
 * neutralizes durations; keep transforms honest here too)
 * ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pc-wz-chip:active{ transform:none; }
}