/* ═══════════════════════════════════════════════════════════════════════════
   KY MOTORS — live.css · 실시간 차량 현황 (v4.1.0 · 2026-09-22 인터랙션 시안)
   v4.css 공용 부품(.f .inp .btn .bnr .kytoast)을 쓴다. 상태는 #lvRoot 의 .is-found / .is-error 로만 갈린다.
   ═══════════════════════════════════════════════════════════════════════════ */
.lv{ padding:calc(var(--hd) + 48px) 0 clamp(72px,9vw,120px); background:var(--surface); }
.lv__wrap{ width:min(720px,calc(100% - 2*var(--gutter))); margin-inline:auto; }

.lv-live{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.lv-live__tag{ font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--red); }
.lv-live__dot{ width:8px; height:8px; border-radius:50%; background:var(--n3); }
.is-found .lv-live__dot{ background:var(--success); animation:lvPulse 1.6s ease-in-out infinite; }
.lv-live__u{ font-size:12px; color:var(--n5); }
.lv-h{ font-size:clamp(26px,3vw,36px); font-weight:500; letter-spacing:-.04em; line-height:1.25; margin:0 0 8px; }
.lv-sub{ margin:0 0 28px; font-size:14px; line-height:1.8; color:var(--n5); }

/* ── 조회칸 — 성공하면 300ms 로 접힌다 ── */
.lv-formwrap{ overflow:hidden; max-height:420px; opacity:1; transition:max-height 300ms var(--ease),opacity 300ms; }
.is-found .lv-formwrap{ max-height:0; opacity:0; pointer-events:none; }
.lv-form{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; gap:12px; align-items:end;
  padding:20px; border-radius:var(--radius); background:#fff; border:1px solid var(--n2); transition:border-color var(--t);
}
.is-error .lv-form{ border:1.5px solid #b82b20; padding:19.5px; }
.lv-form.is-shake{ animation:kyShake 300ms ease-out; }
.lv-inp--num{ letter-spacing:.1em; }
.lv-go{ min-height:52px; min-width:120px; gap:10px; justify-content:center; }
.lv-err{ margin-top:12px; animation:kyFade 200ms ease-out; }
.lv-err b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.02em; margin-bottom:6px; }
.lv-err > span{ display:block; font-size:13px; line-height:1.7; }
.lv-err__links{ margin-top:10px; }
.lv-hint{ margin:12px 0 0; font-size:12px; color:var(--n5); line-height:1.7; }
@media (max-width:639px){
  .lv-form{ grid-template-columns:1fr; padding:16px; gap:12px; }
  .is-error .lv-form{ padding:15.5px; }
  .lv-go{ width:100%; }
}

/* ── 결과 카드 ── */
.lv-card{ border-radius:var(--radius); background:#fff; border:1px solid var(--n2); padding:28px; animation:kyFade 300ms ease-out; margin-top:4px; }
.lv-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.lv-card__id{ font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.12em; color:var(--n5); margin-bottom:8px; }
.lv-state{ font-size:22px; font-weight:600; letter-spacing:-.03em; line-height:1.3; margin:0; }
.lv-state em{ font-style:normal; color:var(--red); }
.lv-again{ gap:0; padding:0 14px; }
.lv-meter{ display:flex; align-items:baseline; gap:8px; margin-top:26px; }
.lv-meter em{ font-family:var(--display); font-size:64px; font-weight:600; font-style:normal; letter-spacing:-.01em; line-height:1; font-variant-numeric:tabular-nums; }
.lv-meter__pc{ font-family:var(--display); font-size:20px; font-weight:600; color:var(--n5); }
.lv-meter__note{ margin-left:auto; font-size:12px; color:var(--n5); }
.lv-bar{ height:4px; background:var(--n1); border-radius:2px; overflow:hidden; margin-top:12px; }
.lv-bar i{ display:block; height:100%; width:0; background:var(--red); transition:width 600ms var(--ease); }
.lv-steps{ margin:28px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.lv-step{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.lv-step__r{ display:flex; align-items:center; gap:6px; }
.lv-step__n{
  flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--n0); background:transparent; border:1.5px solid var(--n2);
}
.lv-step__line{ flex:1; height:1.5px; background:var(--n2); }
.lv-step:last-child .lv-step__line{ visibility:hidden; }
.lv-step__t{ font-size:13px; color:var(--n4); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lv-step.is-done .lv-step__n{ background:var(--n9); border-color:var(--n9); animation:kyPop 200ms ease-out both; }
.lv-step.is-done .lv-step__line{ background:var(--n9); }
.lv-step.is-done .lv-step__t{ color:var(--n9); }
.lv-step.is-run .lv-step__n{ background:var(--red); border-color:var(--red); animation:lvPulse 1.6s ease-in-out infinite; }
.lv-step.is-run .lv-step__t{ color:var(--n9); font-weight:600; }
.lv-step.is-hid{ visibility:hidden; }
.lv-foot{ margin-top:24px; padding-top:18px; border-top:1px solid var(--n1); font-size:13px; color:var(--n5); line-height:1.7; }
@media (max-width:639px){
  .lv-card{ padding:20px; }
  .lv-state{ font-size:18px; }
  .lv-meter em{ font-size:52px; }
  .lv-steps{ grid-template-columns:1fr; gap:12px; }
  .lv-step{ flex-direction:row; align-items:center; gap:12px; }
  .lv-step__line{ display:none; }
  .lv-step__t{ font-size:14px; white-space:normal; }
}

/* ── 앱 밴드 ── */
.lv-app{
  margin-top:40px; padding:28px; border-radius:var(--radius); background:var(--n9); color:var(--n0);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.lv-app__lab{ font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--red-light); margin-bottom:10px; }
.lv-app__h{ font-size:20px; font-weight:500; letter-spacing:-.03em; line-height:1.3; }
.lv-app__cta{ display:flex; gap:10px; flex-wrap:wrap; }
.lv-app .btn{ min-height:48px; padding:0 18px; font-size:14px; gap:12px; }

@keyframes lvPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.85);} }
@media (prefers-reduced-motion:reduce){
  .lv-live__dot,.lv-step.is-run .lv-step__n,.lv-step.is-done .lv-step__n,.lv-card,.lv-err{ animation:none; }
}