/* ===== 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);

  /* Ranking-motion (기획서 00 · §10) — blue-only, component layer. FE display theater
   * on a deterministic board; reversible. */
  --airank-ring-size:      18px;                                              /* countdown ring outer Ø */
  --airank-ring-track:     color-mix(in srgb, var(--brand) 16%, transparent); /* unfilled ring track */
  --airank-cycle:          30s;    /* ★ SINGLE SOURCE OF TRUTH — MUST equal the JS base beat (t2 = 30000ms) */
  --airank-pulse-imminent: .8s;    /* quickened dot pulse in the 임박 window */
  --d-ack:                 600ms;   /* "AI 1위" crown cross-fade / acknowledgement */
  --stagger-row:           36ms;   /* body-shuffle per-row stagger (reserved) */

  /* 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:   0.75rem;                                     /* 12px 고정 — 하한 11px이 ui-ux-pro-max 안티패턴(text < 12px body)에 걸림. 태그·배지·오버라인 전부 이 토큰 */

  /* ── 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) */
  /* 노치·라운드코너 좌우 안전영역. index.html에 viewport-fit=cover가 선언돼 있는데
   * inset-left/right 사용처가 0건이라 가로에서 순위·바로가기 열이 노치 밑에 놓였다.
   * ⚠ env()의 2번째 인자(폴백) 필수 — 없으면 미지원 브라우저(인앱 웹뷰)에서 선언이
   *   통째로 invalid가 되어 padding이 0으로 떨어진다(세로까지 깨지는 최악 실패).
   * ⚠ calc(pad + env()) 금지 — 세로 테스트는 통과하지만 가로에서 64px가 되어
   *   5열 예산이 무너진다. 반드시 max()로 "둘 중 큰 값". */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --shell-pad-x: max(var(--shell-pad), var(--safe-l), var(--safe-r));
  --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-x);   /* ≥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);
  display:inline-flex; align-items:center; min-height:44px;   /* 38 → 44px (WCAG 2.5.8) */
  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-x);
  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; min-height:44px; }   /* 홈 링크 히트영역 */
.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-x) 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);
  transform:translateY(0);
  opacity:1;
  transition:transform var(--d-base) var(--e-out-quart), opacity var(--d-base) var(--e-out-quart);
}
.pc-ctabar.is-hidden-scroll{
  transform:translateY(calc(100% + env(safe-area-inset-bottom) + 12px));
  opacity:0;
  pointer-events:none;
}
.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(--cta-bg); color:var(--text-on-inverse);
  font-size:var(--fs-label); font-weight:var(--fw-bold);
  box-shadow:var(--sh-l);
  transition:background var(--d-fast) var(--e-out-quart), transform var(--d-instant) var(--e-out-quart);
}
.pc-cta:hover{ background:color-mix(in srgb, var(--cta-bg) 88%, white); }
.pc-cta:active{ transform:scale(.97); }   /* W-6 press feedback (100ms via --d-instant on transition) */
.pc-cta:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.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-x);
  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-x) 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-x);
  /* 하단 고정 CTA바 클리어런스. .pc-app의 padding-bottom은 형제인 footer에 안 먹어서
   * 면책조항("만 19세 이상"·"알선·중개하지 않습니다")이 전 기종에서 12.7px 가려졌다.
   * --ctabar-h(64)는 min-height일 뿐 실제 77px이므로 여유를 더 준다. */
  padding-bottom:calc(var(--ctabar-h) + 32px + env(safe-area-inset-bottom));
}
.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,.pc-ctabar{ 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:44px; }   /* 40 → 44px (WCAG 2.5.8) — 실기기 26종에서 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);
}


/* 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); }

/* 3-tab staggered countdown (사용자 요청) — every pay-type tab shows a live, always-
 * moving countdown, staggered 5s apart, each bound to a REAL reshuffle of its own
 * board (home.js SUB). Inactive tabs sit on the light track → blue-600 pulse/number;
 * the active tab sits on the solid-blue fill → blue-300. blue-only. */
.pc-subtab__tick{
  display:inline-flex; align-items:center; gap:5px; margin-top:1px; min-height:12px;
}
.pc-subtab__pulse{
  width:6px; height:6px; border-radius:50%;
  background:var(--brand);              /* blue-600 — reads on the inactive tab's light track */
  animation:pc-ai-pulse 1.6s ease-in-out infinite;
}
.pc-subtab__count{
  font-size:var(--fs-label-sm); font-weight:var(--fw-semibold);
  color:var(--brand); font-variant-numeric:tabular-nums; line-height:1;
}
.pc-subtab[aria-selected="true"] .pc-subtab__pulse{ background:var(--white); }   /* was blue-300 (2.4:1) → white (6.3:1): 모바일 초 안보임 수정 */
.pc-subtab[aria-selected="true"] .pc-subtab__count{ color:var(--white); }
@media (prefers-reduced-motion:reduce){
  .pc-subtab__pulse{ animation:none; }   /* static dot fallback */
}

.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-soft); color:var(--brand); border:1px solid var(--border-brand);   /* Tier-2 ghost (repeated per-row) */
  font-size:var(--fs-label-sm); font-weight:var(--fw-bold); white-space:nowrap;
  transition:background 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-row__go:hover{ background:color-mix(in srgb, var(--brand-soft) 70%, var(--brand) 8%); border-color:var(--brand-strong); }
.pc-row__go:active{ transform:scale(.97); }   /* W-6 press feedback */

/* ── 작은 텍스트 정리 (ui-ux-pro-max §6 안티패턴 "text < 12px body") ──────────
 * 좁은 폭에서 글자를 더 줄이는 대신 형태를 바꾼다.
 * ⚠ 전 구간 12px 하한을 달성한 것은 아니다. 실측 잔존:
 *   · 열 헤더 라벨 11px — 5열 유지와의 트레이드오프(10 → 11px로 완화)
 *   · 단위 접미 "%" 10~11.9px, "분" 7.2px — 20~27px 숫자에 붙는 조판상 첨자이지
 *     본문 텍스트가 아니다. 12px로 올리면 타이포가 깨진다. 의도적 예외.
 * 실제로 12px 이상을 보장하는 것: 업체명 · 버튼 라벨 · 태그 · 배지.
 *  ≤359px : "AI 1위" 텍스트 → 왕관 마크 / "바로가기" → "이동"
 * 두 전환 모두 4열 항복선(359px)과 같은 경계라 레이아웃 변화와 한 박자로 움직인다. */
.pc-badge-top__ico{ display:none; width:12px; height:12px; flex:0 0 auto; }
.pc-row__go-short{ display:none; }
@media (max-width:359px){
  .pc-badge-top__t{ display:none; }
  .pc-badge-top__ico{ display:block; }
  .pc-badge-top{ padding:3px 6px; }
  .pc-row__go-long{ display:none; }
  .pc-row__go-short{ display:inline; }
  .pc-row__go{ font-size:12px; }
}

/* ════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* #3 above-the-fold: 표 앞 스택 여백을 조여 폰에서 랭킹 1행이 살짝 보이게(peek) */
  .pc-home .pc-section{ padding-block-start:28px; }
  .pc-hero-carousel{ margin-bottom:var(--space-4); }
  .pc-airank{ margin-bottom:var(--space-3); }
  .pc-subtabs{ padding:6px; margin-bottom:var(--space-4); }
  .pc-subtab{ padding:10px 6px; gap:5px; font-size:var(--fs-label-sm); }
  .pc-subtab__icon{ width:24px; height:24px; }
  .pc-subtab__tick{ min-height:16px; gap:6px; white-space:nowrap; }   /* #1 카운트다운 숫자 세로 여백 확보 */
  .pc-subtab__count{ font-weight:var(--fw-bold); }                    /* #1 폰 가독성: 글자 굵게 */
}
/* 표(.pc-row) 반응형은 파일 맨 끝 "W2" 블록으로 이관 — 아래쪽 무조건부 규칙
 * (.pc-table{gap} / .pc-row{padding})보다 뒤에 있어야 이기기 때문. */
/* min-height:481px — 폰 가로(780·812·839 × 높이 360~430)가 이 태블릿 분기로
 * 흘러들어 행이 66 → 106px가 되던 것 차단. 짝 수정으로 아래 가로 팩이 5열을 재선언한다. */
@media (min-width:768px) and (max-width:1023px) and (min-height:481px){
  /* go 96px: 버튼 실측 폭 82px이 78px 트랙을 넘치던 것 수정 */
  .pc-table__colhead,.pc-row{ grid-template-columns:44px minmax(0,1.3fr) minmax(110px,1.6fr) 88px 96px; }
}
@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;
}
/* 줄수 상한 — 히어로가 좁을수록 커지던 역진 구조(375px 228 → 280px 281px)의
 * 원인은 텍스트 줄바꿈이다. 줄수를 묶으면 폭·높이 어느 쪽에도 의존하지 않는 상한이
 * 생긴다. ⚠ display를 지정하므로 반드시 아래 짧은-뷰포트 티어들보다 **앞**에 둘 것 —
 * 뒤에 두면 티어의 display:none을 되살려 히어로가 다시 커진다(실측으로 확인).*/
.pc-hero-slide__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-hero-slide__sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── hero slide art — per-slide background via --hero-art custom prop (set inline
 * per slide by home.js's carouselHTML(), keyed off data.js's heroSlides[].art), not
 * scoped to whichever slide happens to carry a CTA. Navy→transparent scrim keeps the
 * left text ≥AA over the art on every slide. blue-on-navy only. */
.pc-hero-slide{
  position:relative;
  background-image:
    linear-gradient(90deg, var(--navy-900) 0%, var(--navy-900) 42%, rgba(14,17,36,0) 100%),
    var(--hero-art, none);
  background-repeat:no-repeat, no-repeat;
  background-position:center, right center;
  background-size:cover, cover;
}
.pc-hero-slide__cta{
  display:inline-flex; align-items:center; margin-top:16px;
  padding:11px 16px; min-height:44px; border-radius:999px;   /* pill, ≥44px hit target (WCAG 2.5.8) */
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
  color:var(--text-on-inverse); background:var(--cta-bg);   /* Tier-1 lead CTA: ink (matches .pc-cta) */
  box-shadow:var(--sh-l);
  transition:transform var(--d-instant) var(--e-out-quart), background var(--d-fast) var(--e-out-quart);
}
.pc-hero-slide__cta:hover{ background:color-mix(in srgb, var(--cta-bg) 88%, white); }
.pc-hero-slide__cta:active{ transform:translateY(1px); }

.pc-hero-dots{ position:absolute; left:22px; bottom:14px; display:flex; gap:6px; }
.pc-hero-dot{
  position:relative;
  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); }
/* 히트영역만 44×44로 확장 — 점의 시각 크기(7px)는 그대로 둔다(WCAG 2.5.8).
 * 도트 간 gap 6px + 확장 영역이 겹치지 않도록 좌우는 gap 절반만큼만 넓힌다. */
.pc-hero-dot::after{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}

/* ── 표 위 앵커 = 제목 하나 ────────────────────────────────────────────────
 * 상태 pill·리드문·인라인 파인더 카드 제거(사용자 지시). 남은 제목이 혼자 서야
 * 하므로 짧은 브랜드 룰(rule)을 위에 얹어 "의도된 제목"으로 읽히게 한다.
 * 장식은 이 룰 하나뿐 — 펄스/후광/그라디언트 텍스트 없음(blue-only 규율 유지). */
.pc-airank{ margin-bottom:var(--space-5); }
.pc-airank__title{
  position:relative; margin:0; padding-top:16px;
  color:var(--text-primary);
  letter-spacing:var(--tr-display-2); line-height:var(--lh-display-2);
  word-break:keep-all;
}
.pc-airank__title::before{
  content:''; position:absolute; top:0; left:0;
  width:36px; height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--blue-400), var(--brand));
}
@keyframes pc-ai-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.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:14px 18px 20px; }   /* #3 세로 축소(피크 확보) — 20px는 dots(bottom:14px+7px) 클리어 */
  .pc-hero-slide__cta{ margin-top:12px; }   /* tighter so CTA clears the bottom-left dots */
  .pc-row{ padding:11px 13px; }
}
@media (prefers-reduced-motion:reduce){
  .pc-hero-track{ transition:none; }
}

/* ── 소침반 소개 배너 (spotlight card, 랭킹 표 하단) ─────────────────────────
 * 밝은 랭킹 배경 위 남색 블록 → 확 튐. 이미지-탑 카드(16:9 아트가 남색 패널로 이어짐).
 * 카드 전체가 about 딥링크. 이 카드에만 파란 후광 링/그림자를 써 "하이라이트" 신호. blue-only. */
.pc-ctabanner{
  display:block; margin-top:22px; border-radius:24px; overflow:hidden;
  background:var(--navy-900); color:var(--white); text-decoration:none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent),
    0 16px 40px rgba(43,78,230,.30),
    var(--sh);
  transition:transform var(--d-fast) var(--e-out-quart), box-shadow var(--d-fast) var(--e-out-quart);
}
.pc-ctabanner:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent),
    0 22px 52px rgba(43,78,230,.38),
    var(--sh);
}
.pc-ctabanner:active{ transform:scale(.99); }
.pc-ctabanner:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.pc-ctabanner__art{
  display:block; width:100%; aspect-ratio:16/9;
  background:var(--navy-900) url("../assets/illustrations/ctabanner-compass.png") center top/cover no-repeat;
}
.pc-ctabanner__body{ display:block; padding:22px 24px 26px; }
.pc-ctabanner__badge{
  display:inline-block; margin-bottom:12px; padding:5px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--brand) 22%, var(--navy-900));
  color:var(--blue-150); font-size:var(--fs-label-sm); font-weight:var(--fw-semibold);
}
.pc-ctabanner__title{
  margin:0; font-size:var(--fs-display-2); font-weight:var(--fw-extrabold);
  line-height:1.18; color:var(--white); word-break:keep-all;
}
.pc-ctabanner__sub{
  margin:10px 0 0; font-size:var(--fs-body); line-height:1.6;
  color:var(--text-on-inverse-2); word-break:keep-all;
}
.pc-ctabanner__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:20px; min-height:48px; border-radius:14px;
  background:var(--white); color:var(--navy-900);
  font-size:var(--fs-label); font-weight:var(--fw-semibold);
}
@media (prefers-reduced-motion:reduce){ .pc-ctabanner{ transition:none; } }

/* ════════════════════════════════════════════════════════════════════
 * 랭킹 모션 (기획서 00) — 갱신 카운트다운 ring · "AI 1위" crown cross-fade ·
 * up-mover wash · 임박 buildup. Blue-only · transform/opacity only · reversible.
 * ════════════════════════════════════════════════════════════════════ */



/* "AI 1위" crown — cross-fades onto the DISPLAYED rank-1 at FLIP settle (§4.5).
 * display is JS-controlled (none on non-#1 → reserves no width); opacity animates. */
.pc-row__crown{ display:none; opacity:0; }

/* up-mover wash (§4.3) — a row whose rank improved gets a --data-refresh overlay
 * fading out over --d-story. An ::after overlay (not background-color) so it never
 * fights the row's own surface / --rank1-bg. Blue-only; no stripe/glow/scale/count-up. */
.pc-row{ position:relative; }
.pc-row.is-uprank::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--data-refresh);
  animation:pc-uprank-wash var(--d-story) var(--e-out-quart) forwards;
}
@keyframes pc-uprank-wash{ from{ opacity:1; } to{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  .pc-row.is-uprank::after{ animation:none; opacity:0; }
}

/* ════════════════════════════════════════════════════════════════════
 * W2 — 표 5열 유지 (280~767px)
 *
 * 데스크톱의 [순위·업체·지급률·입금속도·바로가기] 표 골격을 폰에서도 유지한다.
 * 기존 구현은 ≤767px에서 3열 2행, ≤360px에서 2열 4행으로 무너뜨렸는데, 그건
 * 설계가 아니라 "AI 1위 배지가 업체명과 같은 flex 줄을 점유해 이름이 1글자씩
 * 쪼개지던" 결함의 우회책이었다(측정으로 확인).
 *
 * ⚠ 이 블록이 파일 맨 끝에 있는 이유(게이트 B-1):
 *   위쪽에 .pc-table{gap:6px} / .pc-row{padding:12px …} 무조건부 규칙과
 *   @media(max-width:767px){.pc-row{padding:11px 13px}}가 있고 특이도가 같다.
 *   앞에 두면 소스 순서에서 져서 무성 실패한다. 규칙을 추가할 때 위로 옮기지 말 것.
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* .pc-table__colhead는 .pc-table의 자식이 아니라 형제라 변수를 상속받지 못한다.
   * 한쪽에만 선언하면 var()가 무효화되어 헤더가 1열로 접히고 5개 span이 세로로
   * 쌓여 높이가 14px→130px로 폭주한다(실측). 반드시 두 선택자에 함께 선언한다. */
  .pc-table__colhead,.pc-row{
    --pcgrid: 22px minmax(0,1fr) clamp(56px,18vw,92px) clamp(36px,10vw,54px) clamp(62px,17vw,84px);
    --pcgap: clamp(5px,1.8vw,10px);
  }
  .pc-table{ gap:8px; }                     /* 터치 타깃 간격 하한 8px */
  .pc-table__colhead{
    display:grid; padding:0 10px 3px;
    grid-template-columns:var(--pcgrid); column-gap:var(--pcgap);
    font-size:11px;                          /* 10 → 11px: 열 라벨은 본문성 텍스트다 */
  }
  .pc-table__colhead span{ text-align:center; }
  .pc-table__colhead span:nth-child(2){ text-align:left; }
  .pc-table__colhead span:last-child{ text-align:center; }

  .pc-row{
    grid-template-columns:var(--pcgrid);
    grid-template-areas:none;               /* 구 2행/4행 areas 해제 */
    column-gap:var(--pcgap); row-gap:0;
    padding:10px; align-items:center;
  }
  .pc-row__rank,.pc-row__vendor,.pc-row__pay,.pc-row__speed,.pc-row__go{ grid-area:auto; }

  .pc-row__rank{ font-size:15px; align-self:center; }

  /* 업체명: 넘치지 말고 잘려야 한다. 배지는 안 줄고 이름만 압축되던 구조를
   * min-width:0 + ellipsis로 바꾼다(게이트 B-5). */
  .pc-row__name{ min-width:0; gap:5px; }
  .pc-row__name b{
    font-size:clamp(12.5px,3.8vw,15px);
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .pc-badge-top{ flex:0 0 auto; }
  .pc-row__summary{ display:none; }         /* 세로 1줄을 통째로 먹어 표 밀도를 죽임 */

  .pc-row__pay{ align-items:center; gap:4px; }
  .pc-row__pct{ font-size:clamp(20px,6.2vw,27px); }
  .pc-feebar{ max-width:100%; height:6px; }

  /* 자식 b가 --fs-title을 직접 선언하므로 부모에 걸면 상속이 진다(게이트 B-2) */
  .pc-row__speed{ flex-direction:column; gap:1px; justify-self:center; }
  .pc-row__speed b{ font-size:12px; }
  .pc-row__speed svg{ width:14px; height:14px; }

  /* 좌우 패딩 28px를 그대로 두면 트랙을 넘친다(게이트 B-3) */
  .pc-row__go{ padding:8px 4px; font-size:12px; min-height:44px; justify-self:stretch; }
}

/* 태그는 세로 한 줄을 통째로 먹는다 — 소형 태블릿 이상에서만 */
@media (max-width:600px){ .pc-row__tags{ display:none; } }

/* 300–359 : 입금속도 열 항복 → 4열. 배지는 왕관, 라벨은 "이동"(위 블록에서 전환) */
@media (max-width:359px){
  .pc-table__colhead,.pc-row{
    --pcgrid: 22px minmax(0,1fr) clamp(50px,17vw,62px) clamp(46px,15vw,58px);   /* 18 → 22px: "순위" 헤더 라벨 실측폭 22px */
  }
  .pc-table__colhead span:nth-child(4){ display:none; }
  .pc-row__speed{ display:none; }
  .pc-row__rank{ font-size:13px; }
  .pc-row__pct{ font-size:20px; }
}

/* 열 라벨 축약 — 좁은 트랙에서 "입금속도"/"바로가기"가 2줄로 접혀 헤더가 19→35px로
 * 커지던 것 차단. 폰트가 아니라 문구를 줄인다(10px 밑으로 내리지 않기 위해). */
.pc-table__colhead i{ font-style:normal; }
.pc-table__colhead .ch-short{ display:none; }
/* 전환 임계가 열마다 다르다 — "입금속도"는 430px부터 접히고(트랙 36px),
 * "바로가기"는 359px까지 버틴다. 헤더 문구는 항상 그 열의 버튼 라벨과 같아야
 * 하므로(버튼은 359px에서 "이동"으로 바뀜) 두 열을 따로 건다. */
@media (max-width:430px){
  .pc-table__colhead span{ white-space:nowrap; }
  .pc-table__colhead span:nth-child(4) .ch-long{ display:none; }
  .pc-table__colhead span:nth-child(4) .ch-short{ display:inline; }
}
@media (max-width:359px){
  .pc-table__colhead span:nth-child(5) .ch-long{ display:none; }
  .pc-table__colhead span:nth-child(5) .ch-short{ display:inline; }
}

/* 배지 축약 임계 보정 (실측): "AI 1위" 텍스트 배지는 54.2px, 왕관 마크는 26px.
 * 업체명 부족분이 360px에서 26px / 375px 20px / 390px 16px / 412px 5px / 430px 0px
 * 이므로, 왕관 전환을 430px까지 올려야 이름이 안 잘린다. 359px는 4열 항복선일 뿐
 * 배지 임계와는 별개 문제였다. */
@media (max-width:430px){
  .pc-badge-top__t{ display:none; }
  .pc-badge-top__ico{ display:block; }
  .pc-badge-top{ padding:3px 6px; }
}

/* ════════════════════════════════════════════════════════════════════
 * 짧은 뷰포트 팩 — 표를 첫 화면으로 끌어올린다
 *
 * 트리거가 폭이 아니라 **높이**인 이유: 첫 화면에 랭킹이 한 행도 안 보이던 기기가
 * 전부 높이 ≤667px이었다(280×653 · 320×568 · 717×512 Fold 펼침). 717은 폭이 넓어
 * 폭 기준 미디어쿼리로는 잡히지 않는다.
 *
 * 임계 700 → 790px (실기기 26종 검증): 브라우저 크롬을 뺀 실사용 높이가 715~780px인
 * 주력 기종이 통째로 사각지대였다 — iPhone 11(414×715) · 15 Pro Max(430×739) ·
 * Galaxy S8(360×740) · 12 Pro Max(428×746) · Pixel 5(393×727)가 전부 1행만 보였다.
 * 790px으로 올리면 이들이 3행, Galaxy S24(360×780)는 4행이 된다. 790 초과 기종
 * (iPhone X 812 · Z Flip 6 804 · Pixel 7 839)은 이미 2~3행이라 무영향.
 *
 * 히어로는 맨 위에 그대로 둔다(사용자 결정). 대신 좁을수록 오히려 두꺼워지던
 * 역진 구조를 잡는다 — 히어로 높이는 텍스트 줄바꿈 때문에 375px 228 → 320px 257
 * → 280px 281px로 거꾸로 커지고 있었다.
 * ════════════════════════════════════════════════════════════════════ */
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-home .pc-section{ padding-block-start:14px; }

  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-hero-carousel{ margin-bottom:12px; }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide{ padding:12px 16px 20px; }          /* 20px = dots(bottom:14+7) 클리어 */
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide__title{ font-size:clamp(17px,4.6vw,22px); line-height:1.2; }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide__sub{ display:none; }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide__cta{ margin-top:10px; }            /* 터치 타깃 높이는 건드리지 않음 */

  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-airank{ margin-bottom:12px; }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-airank__title{ padding-top:0; font-size:clamp(20px,5.6vw,26px); }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-airank__title::before{ display:none; }         /* 룰이 차지하던 padding-top 16px 회수 */

  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-subtabs{ padding:5px; margin-bottom:12px; gap:6px; }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-subtab{ padding:8px 4px; gap:3px; }
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-subtab__icon{ width:20px; height:20px; }

  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) /* 표 자체도 한 단계 조인다 — 부가정보 2줄이 행 높이를 결정하고 있었다 */
  .pc-row__tags,
  :where(html:not([data-vp]),html[data-vp="m"],html[data-vp="s"],html[data-vp="xs"]) .pc-row__summary{ display:none; }


/* 2단계 — 초단신 뷰포트(≤560px). Fold 펼침(717×512) · 가로모드 폰이 여기 해당한다.
 * 1단계만으로는 717×512에서 26px 모자랐다(실측). 히어로는 여전히 맨 위에 남는다. */
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-home .pc-section{ padding-block-start:10px; }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-hero-carousel{ margin-bottom:10px; }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide{ padding:10px 14px 18px; }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide__title{ font-size:clamp(15px,3.4vw,18px); }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-hero-slide__cta{ display:none; }   /* 하단 고정 CTA바 + 상단 탭으로 도달 가능 — 중복 제거 */
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-airank{ margin-bottom:10px; }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-airank__title{ font-size:clamp(18px,4.4vw,22px); }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-subtabs{ margin-bottom:10px; padding:4px; }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-subtab{ padding:6px 4px; }
  :where(html[data-vp="s"],html[data-vp="xs"]) .pc-subtab__icon{ display:none; }      /* 라벨만 — 아이콘 28px는 이 높이에서 사치 */


/* ════════════════════════════════════════════════════════════════════
 * 3단계 — 커버 스크린급(≤400px 높이). Galaxy Z Flip 커버(360×298) · 폰 가로모드.
 *
 * 실측 예산(360×298): 상단바 48 + 섹션여백 10 + 히어로 90 + 제목 20 + 세그먼트 61
 * + 열헤더 21 = 1행 시작 y 279. 실사용선은 221(=298 − CTA바 77) → 0행.
 * 1행(66px)을 넣으려면 1행 시작이 155 이하여야 하므로 −124px가 필요했다.
 *
 * 히어로는 여전히 맨 위에 남는다(사용자 결정) — 제목 한 줄짜리 띠로만 줄인다.
 * ════════════════════════════════════════════════════════════════════ */
  :where(html[data-vp="xs"]) .pc-topbar{ min-height:40px; }
  :where(html[data-vp="xs"]) .pc-home .pc-section{ padding-block-start:6px; }

  :where(html[data-vp="xs"]) /* 히어로 = 제목 한 줄 띠. 아트는 배경으로 남아 브랜드 인상은 유지된다. */
  .pc-hero-carousel{ margin-bottom:6px; }
  :where(html[data-vp="xs"]) .pc-hero-slide{ padding:8px 12px; min-height:0; }
  :where(html[data-vp="xs"]) .pc-hero-slide__title{ font-size:14px; line-height:1.25; }
  :where(html[data-vp="xs"]) .pc-hero-slide__eyebrow,
  :where(html[data-vp="xs"]) .pc-hero-dots{ display:none; }

  :where(html[data-vp="xs"]) .pc-airank{ margin-bottom:6px; }
  :where(html[data-vp="xs"]) .pc-airank__title{ font-size:16px; }

  :where(html[data-vp="xs"]) .pc-subtabs{ margin-bottom:6px; padding:3px; gap:4px; }
  :where(html[data-vp="xs"]) .pc-subtab{ padding:5px 3px; font-size:11px; }
  :where(html[data-vp="xs"]) .pc-subtab__tick{ display:none; }        /* 카운트다운은 이 높이에서 사치 */

  :where(html[data-vp="xs"]) /* 열 헤더 숨김 — 각 셀의 sr-only 라벨(순위/지급률/입금속도)이 대신한다 */
  .pc-table__colhead{ display:none; }

  :where(html[data-vp="xs"]) /* 하단 CTA바: 버튼 44px는 사수하고 패딩만 조인다 (77 → 48px) */
  .pc-ctabar{ min-height:48px; padding:2px var(--shell-pad-x) calc(2px + env(safe-area-inset-bottom)); }



/* 라이브 보드에서는 순위가 프론트 난수로 움직이지 않는다(home.js startMovement).
 * 움직이지 않는데 갱신 카운트다운을 돌리면 거짓말이 되므로 함께 숨긴다. */
:root[data-rank-static] .pc-subtab__tick{ display:none; }

/* ════════════════════════════════════════════════════════════════════
 * 폰 가로모드 팩 — 세로 예산 회수 + 표 5열 재선언
 *
 * 조건 3중 가드(설계 문서 18):
 *  · min-width:560px  — ★ 안드로이드 크롬은 소프트 키보드가 레이아웃 뷰포트까지
 *    줄여서 세로 390×844가 입력 중 390×380이 된다 = orientation:landscape로 뒤집힘.
 *    세로폰 최대폭 430 / 가로폰 최소폭 568 사이의 560이 이 오발동을 막는다.
 *  · max-width:950px  — Fold 커버 가로(1112) 배제
 *  · max-height:480px — 태블릿 가로(768×1024 → 1024×768) 배제
 *  종횡비 판정은 기각 — 데스크톱 1920×1080(1.78)과 폰 가로(1.78~2.17)가 겹친다.
 * ════════════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (min-width:560px) and (max-width:950px) and (max-height:480px){
  /* ── 세로 예산 회수 ── */
  .pc-home .pc-section{ padding-block-start:8px; }
  .pc-hero-carousel{ margin-bottom:8px; }
  .pc-hero-slide{ padding:8px 14px; min-height:0; }
  .pc-hero-slide__title{ font-size:15px; line-height:1.25; }
  .pc-hero-slide__sub,.pc-hero-slide__eyebrow,.pc-hero-slide__cta,.pc-hero-dots{ display:none; }

  /* 제목은 숨기되 heading 계층은 유지 — display:none이면 문서 구조에서 사라진다 */
  .pc-airank{ margin-bottom:0; }
  .pc-airank__title{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .pc-airank__title::before{ display:none; }

  .pc-subtabs{ padding:4px; margin-bottom:8px; gap:5px; }
  .pc-subtab{ padding:6px 4px; gap:4px; flex-direction:row; }
  .pc-subtab__icon{ width:18px; height:18px; }

  /* 하단 CTA바 미니 — 위저드 유일 진입점이라 숨기거나 자동숨김하면 안 된다 */
  .pc-ctabar{ min-height:48px; padding:2px var(--shell-pad-x) calc(2px + env(safe-area-inset-bottom)); }

  /* ── 표 5열 재선언 ──
   * 위 W2 블록은 max-width:767px 조건이라 폭 780·812·839인 폰 가로에는 안 걸린다.
   * 태블릿 분기도 min-height:481px로 막았으므로 여기서 다시 정의해야 한다.
   * ⚠ 지우지 말 것 — 지우면 폰 가로에서 5열 정의가 통째로 증발한다. */
  .pc-table__colhead,.pc-row{
    --pcgrid: 26px minmax(0,1fr) clamp(64px,10vw,96px) clamp(40px,6vw,56px) clamp(64px,9vw,86px);
    --pcgap: 8px;
    grid-template-columns:var(--pcgrid);
    grid-template-areas:none;
    column-gap:var(--pcgap);
  }
  .pc-table{ gap:8px; max-width:720px; margin-inline:auto; }   /* 839px 폭에서 업체명 507px는 과잉 */
  .pc-table__colhead{
    display:grid; padding:0 10px 3px; font-size:11px; max-width:720px; margin-inline:auto;
  }
  .pc-row{ padding:8px 10px; row-gap:0; align-items:center; }
  .pc-row__rank,.pc-row__vendor,.pc-row__pay,.pc-row__speed,.pc-row__go{ grid-area:auto; }
  .pc-row__rank{ font-size:15px; }
  .pc-row__summary{ display:none; }
  /* ⚠ 태그 숨김은 현재 max-height:790px 팩에 우연히 얹혀 있다. 그 팩이 바뀌면
   * 가로에서 행이 66 → 75px로 회귀하므로 여기서 명시적으로 다시 선언한다. */
  .pc-row__tags{ display:none; }
  .pc-row__pay{ flex-direction:column; align-items:center; gap:4px; }
  .pc-row__pct{ font-size:22px; }
  .pc-feebar{ max-width:100%; height:6px; }
  .pc-row__speed{ flex-direction:column; gap:1px; justify-self:center; }
  .pc-row__speed b{ font-size:12px; }
  .pc-row__go{ padding:8px 6px; font-size:12px; min-height:44px; justify-self:stretch; }
}

/* ===== 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(--cta-bg); color: var(--text-on-inverse);   /* Tier-1 lead CTA: ink (matches .pc-cta) */
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  box-shadow: var(--sh-l), 0 0 0 1px rgba(255,255,255,.08);   /* +hairline ring so the ink pill reads on the dark verify backdrop */
  pointer-events: auto;
}
.vf-stage__home:hover { background: color-mix(in srgb, var(--cta-bg) 88%, white); }

/* 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:color-mix(in srgb, var(--cta-bg) 88%, white); }   /* Tier-1: no blue hue-shift on hover */
.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; }
}