/* rsv 담당 전용 CSS — 클래스는 .rsv- 접두어만 씁니다. 색·간격은 base.css 토큰(var(--…))만.
   아래는 공통 작업에서 만든 예약 1단계 견본 스타일 — rsv 담당이 이어서 다듬습니다. */
.rsv-help { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.rsv-block { margin-top: var(--sp-6); }
.rsv-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-3); }
.rsv-no { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-md); font-weight: 800; }
.rsv-date-pick { color: var(--accent-ink); font-size: var(--fs-lg); }
.rsv-ampm { font-weight: 700; color: var(--ink-2); margin: var(--sp-4) 0 var(--sp-2); }
.rsv-page .chip small { font-weight: 500; font-size: var(--fs-xs); opacity: .85; }

/* ── 예약 범례·요약 ───────────────────── */
.rsv-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.rsv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rsv-dot { display: inline-block; width: .778rem; height: .778rem; border-radius: 50%; }
.rsv-dot.is-ok { background: var(--accent); }
.rsv-dot.is-off { background: var(--line-strong); }
.rsv-picked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.rsv-picked-main { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.rsv-picked-k { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.rsv-picked-v { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.rsv-fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.rsv-narrow { max-width: 16rem; }
.rsv-narrow-group { max-width: 32rem; }
.rsv-guardian { padding: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-3); }
.rsv-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.rsv-page .label { display: block; font-weight: 700; margin-bottom: var(--sp-2); }

/* ── 확인·제출 ─────────────────────── */
.rsv-confirm .card h2 { margin: 0; }
.rsv-sum { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.rsv-agree { display: flex; flex-direction: column; gap: var(--sp-2); }
.rsv-agree-desc { margin: -.333rem 0 0 2.111rem; }
.rsv-must { color: var(--warm-ink); }

/* ── 접수 완료 ─────────────────────── */
.rsv-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.rsv-done-ico { background: var(--ok-soft); color: var(--ok); }
.rsv-done-title { font-size: var(--fs-h3); font-weight: 800; }
.rsv-no-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-4) var(--sp-5); border: 2px solid var(--warm); border-radius: var(--r); background: var(--warm-soft); }
.rsv-no-box span { color: var(--warm-ink); font-weight: 700; font-size: var(--fs-sm); }
.rsv-no-box strong { font-size: var(--fs-h2); letter-spacing: .04em; color: var(--ink); }
.rsv-no-box small { color: var(--ink-2); font-size: var(--fs-sm); }
.rsv-next-t { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--sp-2); }

/* ── 조회 카드·상세 ─────────────────── */
.rsv-card { display: block; color: inherit; }
.rsv-card-no { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
.rsv-card-no b { color: var(--ink); font-size: var(--fs-lg); margin-left: 4px; }
.rsv-card-go { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-3); color: var(--accent-ink); font-weight: 700; }
.rsv-tips { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); list-style: disc; }
.rsv-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.rsv-head-title { font-size: var(--fs-h3); font-weight: 800; }
.rsv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.rsv-grid > div { padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); min-width: 0; }
.rsv-grid dt { color: var(--ink-3); font-size: var(--fs-sm); }
.rsv-grid dd { font-weight: 800; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.rsv-grid-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rsv-grid-tight dd { font-size: var(--fs-md); }
.rsv-ok { color: var(--ok); font-weight: 700; }
.rsv-fail { color: var(--danger); font-weight: 700; }
.rsv-actions { justify-content: flex-end; }
.rsv-actions .btn:first-child { margin-right: auto; }

/* ── 변경 ─────────────────────────── */
.rsv-current { background: var(--surface-3); }
.rsv-current h2 { margin: 0; }
.rsv-mini-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: 0; list-style: none; }
.rsv-mini-steps li { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); background: var(--surface-2); font-weight: 700; color: var(--ink-2); font-size: var(--fs-sm); }
.rsv-mini-steps b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: var(--fs-xs); }

/* ── 취소(시트) ────────────────────── */
.rsv-word { color: var(--danger); background: var(--danger-soft); padding: 0 6px; border-radius: 6px; }
.rsv-sheet-page .sheet { width: min(640px, 100%); }

@media (max-width: 860px) {
  .rsv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .rsv-grid, .rsv-grid-tight { grid-template-columns: 1fr; }
  .rsv-actions .btn { width: 100%; justify-content: center; }
  .rsv-actions .btn:first-child { margin-right: 0; }
  .rsv-agree-desc { margin-left: 0; }
  .rsv-no-box strong { font-size: var(--fs-h3); }
  .rsv-sheet-page .sheet-page { padding: 0; }
  .rsv-sheet-page .sheet { border-radius: 0; min-height: 100vh; }
}