/* signup-step-hero v1 — 자동 생성. 손으로 고치지 말 것.
   값의 출처: scripts/lib-hero-video-spec.mjs · 근거는 그 파일의 contrastAfterScrim() 이 계산한다.
   [측정] 텍스트 영역 최악 휘도 — account 102.6 ·
   specialty 125.4 · review 102
   ★specialty 는 scrim 없이는 흰 글자 대비가 4.09:1 로 WCAG AA(4.5:1) 에 미달한다. */

/* ── 국소 scrim — 글자 있는 좌측만 덮는다 ───────────────────── */
.vhero .scrim{position:absolute;inset:0;pointer-events:none}
.vhero .scrim::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(0,0,0,0.34) 0%,
    rgba(0,0,0,0.313) 38%,
    rgba(0,0,0,0.116) 66%,
    rgba(0,0,0,0) 88%);
}
[data-theme="light"] .vhero .scrim::before{
  background:linear-gradient(100deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.350) 38%,
    rgba(255,255,255,0.129) 66%,
    rgba(255,255,255,0) 88%);
}
/* 글자는 scrim 이 덮는 대역 안에만 앉는다. 이 폭을 넓히면 위 대비 계산이 깨진다. */
.vhero .wrap{max-width:62%}
@media (max-width:760px){ .vhero .wrap{max-width:88%} }

.vhero{--hero-fg:#fff;--hero-fg-2:rgba(255,255,255,.78);--hero-hair:rgba(255,255,255,.34)}
[data-theme="light"] .vhero{--hero-fg:#11120f;--hero-fg-2:rgba(17,18,15,.7);--hero-hair:rgba(17,18,15,.3)}

/* ── 단계 레일 — 실제 순서가 있는 흐름이라 번호가 정보다 ───── */
.vhero .srail{display:flex;align-items:center;gap:8px;list-style:none;margin:0 0 .9rem;padding:0}
.vhero .srail li{display:flex;align-items:center;gap:8px}
.vhero .srail .dot{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.7rem;font-weight:700;line-height:1;
  color:var(--hero-fg-2);border:1px solid var(--hero-hair);
  font-variant-numeric:tabular-nums;
}
.vhero .srail .dot[data-on]{
  background:linear-gradient(135deg,#fbbf24,#FF6600);color:#1a1206;border-color:transparent;
}
.vhero .srail .bar{width:22px;height:1px;background:var(--hero-hair)}

/* ── 개념 신호 — 영상이 하려던 말을 글자 없이 못박는다 ─────── */
.vhero .scue{display:block;width:clamp(58px,7vw,84px);height:auto;margin:0 0 .8rem;overflow:visible}
.vhero .scue [stroke]{stroke:var(--hero-fg)}
.vhero .scue .faint{opacity:.4}
.vhero .scue .pulse{animation:scue-breathe 5.2s ease-in-out infinite}
.vhero .scue .d2{animation-delay:-2.6s}
@keyframes scue-breathe{0%,100%{opacity:.42}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .vhero .scue .pulse{animation:none;opacity:.85} }

/* ── 무엇이 필요한가 ────────────────────────────────────── */
.vhero .sneed{
  display:inline-flex;align-items:center;gap:7px;
  margin:1rem 0 0;padding:5px 12px;border-radius:999px;
  border:1px solid var(--hero-hair);color:var(--hero-fg-2);
  font-size:clamp(.66rem,1.1vw,.78rem);line-height:1.5;
}