/* ══ 예약 티켓 — 한 벌 (D-539 R3 → D-745 시안 A «예약은 한 장이다») ═══════════════════════════
   [날짜 기둥 | 누구와 무엇을 | (상태)] — [내 예약] 목록·예약 상세(모달)·리뷰 쓰기 머리·세무사 상세의
   예약 모달(«만들어지는 티켓»)·/book이 이 파일 하나를 본다. 지면마다 베끼면 갈린다(D-731의 교훈).
   🔴 굵기는 500이다(design.md §2 — 700은 화면 머리만). 옛 800/700(D-541)은 시안 A에서 500으로
      내렸다 — 목록 카드(.rsv-card, client.css)가 이미 500이라 상세·모달만 굵었다.
   ⚠ 이 파일을 싣는 지면: reservations · reservation-detail(+조각 rsv-detail) · review-write ·
     tax-detail · book. 조각을 모달로 띄우는 지면은 이 파일과 annotate.css를 둘 다 링크해야 한다.
   날짜를 덩어리로 분리한다 — 왼쪽 칸이 「언제」만, 오른쪽이 「누구와 무엇을」을 맡는다(D-539).
   ⚠ 라벨-값 표로 되돌리지 마라. 예전 배치는 space-between이라 라벨과 값이 카드 양끝으로
     벌어져 눈이 660px을 건너야 했다(사용자 지적으로 뒤집은 자리다).
   ⚠ 이 머리 주석을 고칠 때 닫기 표시를 두 번 쓰지 마라 — 처음 만들 때 짝 없는 닫기 표시가 남아
     파서가 첫 규칙(.rsv-tk{display:flex})을 통째로 버렸고, 티켓이 세로로 쌓여 떴다(8091 실측).
     CssCommentBalanceTest가 이 짝을 잰다(주석 본문에 닫기 표시 글자를 적어도 걸린다 — 방금 그랬다). */
.rsv-tk { display: flex; align-items: center; gap: 16px; }
.rsv-tk-when {
  flex: none; min-width: 92px; text-align: center;   /* width → min-width(quick-p1): «10/12»가 «10/1 · 2»로 꺾이던 결함 — 칸이 필요하면 넓어진다 */
  border-right: 1px dashed var(--border); padding-right: 16px;
}
.rsv-tk-when b {
  display: block; font-size: var(--fs-title1); font-weight: 600; white-space: nowrap;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.rsv-tk-when i {
  display: block; font-style: normal; font-size: var(--fs-caption1);
  color: var(--text-tertiary); margin-top: 4px;
}
.rsv-tk-when em {
  display: block; font-style: normal; font-size: var(--fs-caption1); font-weight: 600; white-space: nowrap;
  color: var(--text-primary); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.rsv-tk-main { min-width: 0; }
/* 🔴 «누구와 무엇을»이 주인공이다(D-541) — 작게 되돌리지 마라. 상태 칩이 오른쪽으로 물러난
   것도 같은 이유다: 칩은 부가 정보이고 이름·상품이 본문이다. */
.rsv-tk-who {
  margin: 0; font-size: var(--fs-title2); font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsv-tk-what {
  margin: 4px 0 0; font-size: var(--fs-body2); color: var(--text-secondary);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* 상태 칩 — 오른쪽 끝, 위쪽 정렬. 이름이 길어도 칩이 밀려나지 않게 flex:none. */
.rsv-tk-chip { margin-left: auto; align-self: flex-start; flex: none; }
.rsv-tk-what i { font-style: normal; color: var(--text-tertiary); }
/* 🔴 금액은 굵게 남긴다 — R3의 약점으로 지적한 자리다(한 줄에 섞이면 돈이 작아진다). */
/* 상품명이 굵다 — «무엇을 샀나»가 금액보다 먼저 읽혀야 한다(D-541에서 뒤집었다). */
.rsv-tk-what b { font-weight: 600; color: var(--text-primary); }
.rsv-tk-what span { font-variant-numeric: tabular-nums; }

/* ── 세무사 시점 «지금 상태» — 안1 «A+B»(quick-p1, 사용자 승인 2026-10-11 «안1로 진행») ─────────────
   단계 막대(예약 · 확정 · 상담 중 · 완료)가 «어디까지», 배너가 «할 일 + 남은 시간». 색은 파랑·회색 토큰뿐 —
   할 일이 있으면 연한 파랑(--primary-light), 기다림·끝·취소는 회색(--grey100). 글자 13px↑ · 굵기 400/600 · 모서리 16 · 4의 배수.
   판정은 TaxStatusView 한 곳이고 이 규칙들은 rsv-detail 조각(전체 지면·[내 예약] 모달)에만 선다. */
.rsv-status { margin-top: 16px; }
.rsv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.rsv-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
/* 잇는 선 — 앞 칸 점 가운데에서 이 칸 점 가운데까지. 이 칸에 닿았으면(지남·지금·끝) 파랑. */
.rsv-step + .rsv-step::before {
  content: ''; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--grey200);
}
.rsv-step.is-done::before, .rsv-step.is-now::before, .rsv-step.is-end::before { background: var(--primary); }
.rsv-step-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--grey300); background: var(--surface);
}
.rsv-step-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rsv-step.is-done .rsv-step-dot { border-color: var(--primary); color: var(--primary); }
.rsv-step.is-now .rsv-step-dot { border-color: var(--primary); background: var(--primary); }
.rsv-step.is-now .rsv-step-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); }
.rsv-step.is-end .rsv-step-dot { border-color: var(--primary); background: var(--primary); color: var(--surface); }
.rsv-step-t { font-size: var(--fs-caption1); line-height: 20px; color: var(--text-tertiary); }
.rsv-step.is-done .rsv-step-t { color: var(--text-secondary); }
.rsv-step.is-now .rsv-step-t, .rsv-step.is-end .rsv-step-t { color: var(--primary-pressed); font-weight: 600; }
/* 취소·노쇼 — 막대 전체를 회색으로 낮추고 그 자리에 ×(빨강 없이 — 끝난 예약이지 경고가 아니다). */
.rsv-steps.is-off .rsv-step::before { background: var(--grey200); }
.rsv-steps.is-off .rsv-step.is-done .rsv-step-dot { border-color: var(--grey400); color: var(--grey500); }
.rsv-steps.is-off .rsv-step-t { color: var(--text-tertiary); }
.rsv-step.is-x .rsv-step-dot { border-color: var(--grey600); background: var(--grey600); color: var(--surface); }
.rsv-steps .rsv-step.is-x .rsv-step-t { color: var(--text-secondary); font-weight: 600; }

.rsv-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  margin-top: 16px; padding: 16px 20px; border-radius: 16px;
}
.rsv-banner.is-todo { background: var(--primary-light); }
.rsv-banner.is-quiet { background: var(--grey100); }
.rsv-banner-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); color: var(--primary);
}
.rsv-banner.is-quiet .rsv-banner-ic { color: var(--grey700); }
.rsv-banner-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rsv-banner-t { margin: 0; font-size: var(--fs-body1); line-height: 24px; font-weight: 600; color: var(--text-primary); }
.rsv-banner-d { margin: 4px 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.rsv-banner-time {
  margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: 600;
  color: var(--primary-pressed); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rsv-banner.is-quiet .rsv-banner-time { color: var(--text-secondary); }
/* 폰 — 남은 시간은 설명 아래 줄로(아이콘 열을 비워 글줄과 맞춘다). */
@media (max-width: 600px) {
  .rsv-banner { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 16px; }
  .rsv-banner-time { grid-column: 2; margin-top: 4px; }
}

/* 폰 — 상세 티켓도 목록처럼 쌓는다(D-944 문제 4): 날짜 띠 위 · 이름 아래 · 상태 칩은 오른쪽 위 끝.
   가로 그대로면 이름이 «김민수 세…»로 잘리고 상품 줄이 360에서 7줄로 늘며 «·»가 홀로 남았다. 목록 카드(.rsv-card)는 client.css가 따로 쌓는다. */
@media (max-width: 600px) {
  .rsv-detail .rsv-tk { position: relative; flex-direction: column; align-items: stretch; gap: 12px; }
  .rsv-detail .rsv-tk-when {
    display: flex; align-items: baseline; gap: 8px; min-width: 0; text-align: left;
    border-right: 0; border-bottom: 1px dashed var(--border); padding: 0 96px 12px 0;
  }
  .rsv-detail .rsv-tk-when i, .rsv-detail .rsv-tk-when em { margin-top: 0; }
  .rsv-detail .rsv-tk-when em { margin-left: auto; }
  .rsv-detail .rsv-tk-who { white-space: normal; }
  .rsv-detail .rsv-tk:not(:has(.rsv-tk-when)) .rsv-tk-who { padding-right: 96px; }
  .rsv-detail .rsv-tk-what b, .rsv-detail .rsv-tk-what span { white-space: nowrap; }
  .rsv-detail .rsv-tk-chip { position: absolute; top: 16px; right: 16px; margin: 0; }
}