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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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