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