/* ═══════════════════════════════════════════════════════════════════════════
   KY MOTORS — booking.css · 정비 예약 (v4.1.0 · 2026-09-22 인터랙션 시안)
   v4.css 의 공용 부품(.f .inp .chip .slotb .cal .bnr .ckb .btn .kytoast .kydlg)을 쓰고,
   여기에는 예약 화면 고유의 것만 둔다: 720px 한 열 · 진행 막대 · 단계 슬라이드 · 조회 대기 상자 ·
   확인 카드 · 요약 · 완료 연출 · 폰 달력 시트 · 폰 하단 고정 단추.
   ⚠ site.css 는 안 쓴다(AGENTS 7).
   ═══════════════════════════════════════════════════════════════════════════ */

.bk{ padding:calc(var(--hd) + 40px) 0 clamp(72px,9vw,120px); background:var(--surface); }
.bk__wrap{ width:min(720px,calc(100% - 2*var(--gutter))); margin-inline:auto; }

/* ── 진행 표시 ── */
.bk-top{ display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-bottom:10px; }
.bk-back{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 6px 0 0; border:0; background:none;
  font-size:14px; font-weight:500; color:var(--n6); transition:color var(--t);
}
.bk-back:hover{ color:var(--red); }
.bk-count{ font-family:var(--meta); font-size:13px; font-weight:500; color:var(--n5); overflow:hidden; display:inline-flex; margin-left:auto; }
.bk-count > span{ display:inline-block; animation:kyRowIn 250ms ease-out; }
.bk-prog{ height:2px; background:var(--n2); border-radius:1px; overflow:hidden; margin-bottom:36px; }
.bk-prog i{ display:block; height:100%; width:0; background:var(--red); transition:width 400ms var(--ease),background 600ms; }
.bk-prog.is-done i{ background:var(--success); }

/* ── 단계 ── 한 번에 하나. 앞으로 = 오른쪽에서, 뒤로 = 왼쪽에서 24px · 300ms ── */
.bk-step{ display:none; }
.bk-step.is-on{ display:block; }
.bk-step.is-fwd{ animation:kyFwd 300ms var(--ease) both; }
.bk-step.is-back{ animation:kyBack 300ms var(--ease) both; }
.bk-h{ font-size:clamp(26px,3.4vw,34px); font-weight:500; letter-spacing:-.04em; line-height:1.25; margin:0 0 6px; }
.bk-sub{ margin:0 0 28px; font-size:14px; line-height:1.8; color:var(--n5); }
.bk-fields{ display:flex; flex-direction:column; gap:22px; }
.bk-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.bk-grid2 > *{ min-width:0; }
.bk-act{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:6px; }
.bk-act--row{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; margin-top:24px; }
.bk-act .btn--lg{ min-width:220px; }
.tbtn{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; background:none; border:0;
  color:var(--n9); font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:4px; transition:color var(--t);
}
.tbtn:hover{ color:var(--red); }
.tbtn:disabled{ opacity:.4; cursor:default; }
.bk-fine{ margin:24px 0 0; font-size:12px; line-height:1.7; color:var(--n4); }
.bk-help{ margin:40px 0 0; font-size:13px; color:var(--n5); display:flex; gap:10px; flex-wrap:wrap; }
.bk-help a{ text-decoration:underline; text-underline-offset:3px; }

/* ── 조회 대기 상자 — 세로 막대(1초에 차오름) + 점(1.6초 깜빡) + 0·10·40초 문구 ── */
.bk-wait{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius); background:var(--n1); }
.bk-wait__bar{ flex:none; width:3px; height:44px; border-radius:2px; background:var(--n2); position:relative; overflow:hidden; }
.bk-wait__bar i{ position:absolute; left:0; bottom:0; width:100%; height:0; background:linear-gradient(to top,var(--red) 60%,#c62f2300); transition:height 1s linear; }
.bk-wait.is-on .bk-wait__bar i{ height:100%; }
.bk-wait__dot{ flex:none; margin-top:6px; width:8px; height:8px; border-radius:50%; background:var(--red); animation:kyBlink 1.6s ease-in-out infinite; }
.bk-wait__t{ font-size:14px; line-height:1.7; color:var(--n7); animation:kyFade 300ms ease-out; }

/* ── 확인 카드 — 줄이 60ms 간격으로 들어온다(booking.js 가 --i 를 준다) ── */
.ic{ border:1px solid var(--n2); border-radius:var(--radius); background:#fff; overflow:hidden; }
.ic__row{
  display:grid; grid-template-columns:120px 1fr; gap:12px; padding:14px 18px; border-top:1px solid var(--n1); font-size:14px;
  animation:kyRowIn 300ms var(--ease) both; animation-delay:calc(var(--i,0) * 60ms);
}
.ic__row:first-child{ border-top:0; }
.ic__row > span{ color:var(--n5); }
.ic__row > b{ font-weight:500; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.ic__chip{
  font-family:var(--meta); font-size:10px; font-weight:600; letter-spacing:.06em; font-style:normal;
  padding:4px 6px; border-radius:2px; color:#fff; background:var(--n5);
}
.ic__chip.is-warn{ background:var(--warning); color:var(--n9); }
.ic__chip.is-bad{ background:#b82b20; }
.ic__chip.is-off{ background:var(--n3); color:var(--n9); }
@media (max-width:479px){ .ic__row{ grid-template-columns:1fr; gap:2px; } }

/* ── 요약 ── */
.sum{ border:1px solid var(--n2); border-radius:var(--radius); background:#fff; padding:4px 18px; }
.sum__rows{ margin:0; }
.sum__rows > div{ display:grid; grid-template-columns:90px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--n1); font-size:14px; }
.sum__rows > div:first-child{ border-top:0; }
.sum__rows dt{ color:var(--n5); }
.sum__rows dd{ margin:0; font-weight:500; min-width:0; overflow-wrap:anywhere; }
.bk-bring{ font-size:14px; }
.bk-bring a{ text-decoration:underline; text-underline-offset:3px; margin-left:6px; }
.ckb__in{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ── 날짜 단추 + 달력 ── */
.bk-datef{ position:relative; }
.bk-dateb{ text-align:left; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; }
.bk-dateb:hover{ border-color:var(--n9); }
.bk-dateb .is-ph{ color:var(--n4); }
.bk-dateb__c{ font-size:13px; color:var(--n5); white-space:nowrap; }
.bk-calwrap{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; }
.bk-calbg{ display:none; }
.bk-cal{ animation:kyUp 200ms ease-out; }
.bk-cal__handle{ display:none; }
.bk-cal__foot{ margin:12px 0 0; font-size:11px; color:var(--n5); text-align:center; }
/* 폰: 아래에서 올라오는 시트 · 손잡이 · 바깥을 누르면 닫힘 */
@media (max-width:719px){
  .bk-calwrap{ position:fixed; inset:0; z-index:120; top:0; }
  .bk-calbg{ display:block; position:absolute; inset:0; background:#0e111099; animation:kyFade 200ms ease-out; }
  .bk-cal{
    position:absolute; left:0; right:0; bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; border:0;
    padding:12px 16px calc(28px + env(safe-area-inset-bottom)); box-shadow:0 -8px 32px #0e111033;
    animation:kySheet 300ms var(--ease);
  }
  .bk-cal__handle{ display:block; width:36px; height:4px; border-radius:2px; background:var(--n2); margin:0 auto 14px; }
  .bk-cal .cal__day{ font-size:15px; }
}

/* ── 완료 연출 — 체크 600ms → 제목·부제 200ms 뒤 → 요약 300ms → 준비물 550ms → 단추 750ms ── */
.bk-done{ text-align:center; padding-top:16px; }
.bk-done__mark{ display:block; margin:0 auto 20px; }
.bk-step.is-on .bk-done__mark path{ animation:kyDraw 600ms var(--ease) forwards; }
.bk-done__h,.bk-done__s{ animation:kyFade 400ms ease-out 200ms both; }
.bk-done__sum{ text-align:left; animation:kyUp 450ms var(--ease) 300ms both; }
.bk-done__bring{ margin-top:16px; text-align:left; animation:kyUp 450ms var(--ease) 550ms both; }
.bk-done__act{ justify-content:center; animation:kyUp 450ms var(--ease) 750ms both; }

/* ── 폰: 단계의 주 단추는 하단에 고정(탭 바 대신) · 본문 아래 여백 확보 ── */
@media (max-width:719px){
  .bk{ padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
  .bk-act .btn--lg{ min-width:0; width:100%; }
  .bk-act--row .btn--lg{ width:100%; }
  .bk-step.is-on .bk-act.is-fixed{
    position:fixed; left:0; right:0; bottom:0; z-index:80; padding:12px 20px calc(24px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--surface) 70%,#f6f5f100); gap:8px; pointer-events:none;
  }
  .bk-step.is-on .bk-act.is-fixed > *{ pointer-events:auto; }
  .bk-step.is-on .bk-act.is-fixed .tbtn{ align-self:center; min-height:36px; }
}

/* ── 오시는 길 (홈 14 와 같은 모양) ── */
.visit{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(32px,5vw,80px); }
.visit__txt{ min-width:0; }
.vdl{ margin:40px 0 0; display:grid; grid-template-columns:auto 1fr; gap:18px 28px; font-size:15px; line-height:1.7; }
.vdl dt{ color:var(--muted); padding-top:4px; font-family:var(--meta); font-size:11px; letter-spacing:.14em; }
.vdl dd{ margin:0; }
.vdl dd b{ font-weight:500; display:inline; }
.vdl dd span{ display:block; font-size:13px; color:var(--muted); }
.vdl dd span.inl{ display:inline; }
.visit__ways{ display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; font-size:13px; color:var(--muted); }
.visit__ways a{ border-bottom:1px solid var(--line); }
.visit__map{ min-width:0; width:100%; aspect-ratio:16/10; background:var(--n1); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; }
@media (max-width:719px){ .visit__map{ aspect-ratio:auto; height:280px; } }
.visit__scale{ position:absolute; inset:0; transform-origin:0 0; }
.visit__map .root_daum_roughmap{ width:640px !important; height:360px !important; }
.visit__map .wrap_controllers{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .bk-step.is-fwd,.bk-step.is-back,.bk-cal,.bk-calbg,.ic__row,.bk-done__h,.bk-done__s,.bk-done__sum,.bk-done__bring,.bk-done__act{ animation:none; }
  .bk-done__mark path{ stroke-dashoffset:0; }
  .bk-wait__dot{ animation:none; }
}