/**
 * Booking 영역 전용 스타일.
 *
 * 출처:
 *   - z_info/clarksimpson_obsidian/02-ARCHITECTURE/frontend/design.md (v0.3-pending §9.7~9.10)
 *   - z_info/clarksimpson_obsidian/02-ARCHITECTURE/frontend/BOOKING-SEARCH-UI-REDESIGN.md
 *
 * 강제 룰: .claude/rules/design-system.md (모든 색상/간격/모서리는 design-tokens.css 변수만 사용)
 */

/* ============================================================
 * 공용 booking shell — layout_main 안에서 동작
 * ============================================================ */
.booking-section {
  background: var(--color-bg-soft);
  padding: var(--space-12) 0 var(--space-16);
}

.booking-shell {
  max-width: var(--container-narrow, 880px);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.booking-shell--wide {
  max-width: var(--container-base, 1140px);
}

/* §9.5 booking-hero-half — medium-height(70vh)의 50% 축소
 * jarallax 미사용 (paradise common_scripts.js의 init 의존 제거).
 * background-image 직접 사용으로 안정적인 노출. */
.hero.booking-hero-half {
  height: 35vh;
  min-height: 240px;
  max-height: 360px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

@media (max-width: 991px) {
  .hero.booking-hero-half {
    min-height: 220px;
    height: 32vh;
  }
}

/* ============================================================
 * §9.8 진행 표시기 (booking stepper)
 * ============================================================ */
.booking-steps {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
}

.booking-steps li {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  border: var(--border-width-1) solid var(--color-border);
  transition: all var(--duration-base) var(--ease-out);
}

.booking-steps li.is-active {
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  border-color: var(--color-brand);
}

.booking-steps li.is-done {
  background: var(--color-bg);
  color: var(--color-text);
  opacity: 0.6;
}

@media (max-width: 575.98px) {
  .booking-steps {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .booking-steps li {
    min-width: 120px;
    flex: 0 0 auto;
  }
}

/* ============================================================
 * §9.7 검색 바 (booking search bar)
 * ============================================================ */
.booking-search-bar {
  background: var(--color-bg);
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  margin-bottom: var(--space-6);
}

@media (max-width: 767.98px) {
  .booking-search-bar {
    padding: var(--space-6);
  }
}

.search-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (max-width: 767.98px) {
  .search-fields {
    grid-template-columns: 1fr;
  }
}

.search-fields .field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-fields .form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.search-fields .form-control {
  border: var(--border-width-1) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  width: 100%;
}

.search-fields .form-control:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-inset-focus);
}

.search-fields input.form-control[readonly] {
  cursor: pointer;
  background: var(--color-bg);
}

/* CTA — Q-D6 (2026-05-04 v0.3-pending): booking 영역 CTA는 brand 갈색 통일 */
.booking-search-cta {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  cursor: pointer;
  box-shadow: var(--shadow-3);
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-body);
}

.booking-search-cta:hover {
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-4);
  color: var(--color-text-on-dark);
}

.booking-search-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: var(--shadow-1);
}

/* secondary modifier — brand outline (취소/처음으로/홈으로 등 보조 액션) */
.booking-search-cta--secondary {
  background: transparent;
  color: var(--color-brand);
  border: var(--border-width-2) solid var(--color-brand);
  box-shadow: none;
}

.booking-search-cta--secondary:hover {
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-2);
}

/* ============================================================
 * §9.9 듀얼 월 캘린더 — flatpickr 토큰 매핑
 *
 * 근본적인 폭 override:
 * flatpickr 기본 CSS가 .dayContainer (3중 고정 307.875px) / .flatpickr-days /
 * .flatpickr-day 에 px 고정값을 박음. 부모 100% 적용해도 자식이 px 고정이라
 * 캘린더가 좌측 절반만 차지함. 모든 자식에 !important + grid 7등분으로 강제.
 * ============================================================ */
/*
 * 주의: flatpickr inline 모드에서 target div(#bookingCalendar)는 input으로 변환되고
 * 실제 캘린더는 target의 다음 형제(<form class="booking-search-bar">의 자식)로 주입됨.
 * 따라서 .flatpickr-calendar override selector는 .booking-search-bar 기준으로 작성.
 * #bookingCalendar 자체는 flatpickr-input으로 hidden 처리.
 */
#bookingCalendar.flatpickr-input {
  display: none !important;
}

.booking-search-bar .flatpickr-calendar,
.booking-search-bar .flatpickr-calendar * {
  box-sizing: border-box;
}

/* 인라인 캘린더 — 컴팩트 v2 (50% 축소 — 2026-05-04) */
.booking-search-bar .flatpickr-calendar.inline {
  background: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: var(--border-width-1) solid var(--color-border);
  margin: var(--space-3) 0 var(--space-5) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 듀얼 월 헤더 — 좌우 균등 분할 + 컴팩트 */
.booking-search-bar .flatpickr-calendar .flatpickr-months {
  width: 100% !important;
  display: flex !important;
}

.booking-search-bar .flatpickr-calendar.showMonths-2 .flatpickr-months .flatpickr-month {
  width: 50% !important;
  flex: 1 1 50% !important;
  height: auto !important;
  min-height: 28px;
}

/* inner container — flatpickr v4 multiMonth 모드는 한 rContainer 안에 weekdays + days
 * 컨테이너가 1쌍씩 들어가고, 그 안에 weekdaycontainer / dayContainer 가 각 month 당 1개씩
 * (multiMonth=2 면 각 2개). 따라서 innerContainer 분할은 의미 없음 → block 으로 두고,
 * 실제 가로 분할은 .flatpickr-weekdays / .flatpickr-days 안에서 처리. */
.booking-search-bar .flatpickr-calendar .flatpickr-innerContainer {
  display: block !important;
  width: 100% !important;
}

.booking-search-bar .flatpickr-calendar .flatpickr-rContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* multiMonth: weekdays + days 를 둘 다 grid 2열로 강제.
 * → 자식 weekdaycontainer / dayContainer 가 각 한 month 차지하며 가로 분할. */
.booking-search-bar .flatpickr-calendar.multiMonth .flatpickr-weekdays,
.booking-search-bar .flatpickr-calendar.multiMonth .flatpickr-days {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-3);
  width: 100% !important;
}

/* 일자 컨테이너 — flatpickr 기본 307.875px 고정 강제 해제.
 * .flatpickr-days 의 기본 display:flex 가 dayContainer 를 content-based 너비
 * (≈245.5px) 로 잡아 weekdaycontainer(491px) 와 정렬 깨짐 회귀 → display:block
 * 으로 변경하여 dayContainer 가 부모 100% 폭 채우도록 강제. */
.booking-search-bar .flatpickr-calendar .flatpickr-days {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.booking-search-bar .flatpickr-calendar .dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

/* 셀 — 7등분 grid에서 균등 폭 (컴팩트: 42 → 28px, 약 33% 축소) */
.booking-search-bar .flatpickr-calendar .flatpickr-day {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 28px;
  line-height: 28px;
  margin: 0;
  font-size: var(--text-xs);
}

/* 요일 헤더 — 7등분 grid */
.booking-search-bar .flatpickr-calendar .flatpickr-weekdays {
  width: 100% !important;
}

.booking-search-bar .flatpickr-calendar .flatpickr-weekdaycontainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
  flex: none !important;
}

.booking-search-bar .flatpickr-calendar .flatpickr-weekday {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

/* multiMonth range 보정 — flex 균등 후 셀 inRange 박스 그림자 양옆 처리 */
.booking-search-bar .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}

.flatpickr-calendar.inline .flatpickr-months,
.flatpickr-calendar .flatpickr-months {
  padding-bottom: var(--space-3);
}

.flatpickr-calendar .flatpickr-month {
  color: var(--color-text);
  font-family: var(--font-heading);
}

.flatpickr-calendar .flatpickr-current-month {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text);
  /* 한국식 "2026년 5월" 순서로 표기 — flex order 로 numInputWrapper(년도) 를 먼저 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  order: 1;
  position: static !important;
  display: inline-flex !important;
  align-items: baseline;
  width: auto !important;
  min-width: 0 !important;
}

/* 4자리 연도 + arrow 영역 잘림 방지 — input 너비 ch 단위 강제 */
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  width: 4ch !important;
  min-width: 4ch !important;
  padding: 0 !important;
  text-align: center;
}

/* numInputWrapper 직후에 "년" suffix 자동 추가 (다음 형제 ::before 가 아닌 wrapper ::after) */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper::after {
  content: "년";
  margin-left: 2px;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .cur-month {
  order: 2;
}

.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: var(--color-text);
  font-weight: var(--font-bold);
}

.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  color: var(--color-brand);
  fill: var(--color-brand);
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
  color: var(--color-brand-dark);
  fill: var(--color-brand-dark);
}

.flatpickr-calendar .flatpickr-weekday {
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}

.flatpickr-calendar .flatpickr-day {
  color: var(--color-text);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-body);
}

.flatpickr-calendar .flatpickr-day:hover {
  background: var(--color-bg-tinted);
  color: var(--color-text);
}

.flatpickr-calendar .flatpickr-day.today {
  border: none;
  color: var(--color-brand);
  font-weight: var(--font-bold);
}

.flatpickr-calendar .flatpickr-day.today:hover {
  background: var(--color-brand);
  color: var(--color-text-on-dark);
}

/* 선택/range — Q-D6: brand 갈색 통일 (피드백 3번) */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  font-weight: var(--font-bold);
  border-color: var(--color-brand);
}

.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.inRange:hover {
  /* var(--color-brand) #978667 18% over white = #ECE9E4 (불투명 변환).
   * alpha 사용 시 인접 셀의 box-shadow + 자기 background 가 가산되어 띠가 보이고,
   * box-shadow 제거 시 셀 사이 미세 gap 이 노출되는 딜레마를 불투명 색상으로 해결.
   * TODO: design.md §9.9 캘린더 토큰 보강 시 `--color-brand-tinted-18` 로 정규화. */
  background: #ECE9E4;
  color: var(--color-text);
  box-shadow: -5px 0 0 #ECE9E4, 5px 0 0 #ECE9E4;
  border-color: transparent;
}

/* range 양 끝 셀 box-shadow — flatpickr 기본 파란색 override (1박 케이스에서 갭 brand 통일) */
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.startRange:hover {
  box-shadow: 5px 0 0 var(--color-brand);
}

.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.endRange:hover {
  box-shadow: -5px 0 0 var(--color-brand);
}

/* 1박 케이스 (startRange + endRange 인접) — flatpickr 원본의 endRange 좌측 box-shadow가
 * specificity (0,5,0)로 우리 룰을 이기므로, 동일 selector + .flatpickr-calendar 접두로 (0,6,0) 확보 후 brand 색상 적용. */
.flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--color-brand);
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

/* ============================================================
 * §9.10 v2 객실 결과 카드 (booking room result card) — 2026-05-04 재설계
 * 가로형: 좌 이미지 + 중앙 정보(이름/배지/시설) + 우 가격/CTA
 * ============================================================ */
.booking-results-section {
  margin-top: var(--space-10);
}

.booking-results-section .search-summary {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: var(--border-width-1) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.booking-results-section .search-summary strong {
  color: var(--color-text);
  font-weight: var(--font-bold);
}

.rooms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* 카드: 데스크톱 3열 grid (이미지 320 / 정보 1fr / 가격 280) / 모바일 1열 stack */
.room-card {
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: var(--space-6);
  background: var(--color-bg);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  transition: all var(--duration-base) var(--ease-out);
}

.room-card:hover {
  box-shadow: var(--shadow-3);
}

@media (max-width: 991px) {
  .room-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* 좌: 이미지 영역 */
.room-card__image {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
}

.room-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 중앙: 정보 영역 */
.room-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.room-card__name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-tight);
}

.room-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.room-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tinted);
  color: var(--color-brand-dark);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.room-card__badge i {
  font-size: var(--text-base);
}

.room-card__guests {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.room-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.room-card__facility-group {
  margin-top: var(--space-3);
}

.room-card__facility-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-2);
}

.room-card__facilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 575.98px) {
  .room-card__facilities {
    grid-template-columns: 1fr;
  }
}

.room-card__facilities li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.room-card__facilities i {
  color: var(--color-brand);
  font-size: var(--text-base);
  flex-shrink: 0;
}

/* 우: 가격 + CTA 영역 */
.room-card__price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  text-align: center;
}

@media (max-width: 991px) {
  .room-card__price {
    text-align: left;
  }
}

.room-card__price-label {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.room-card__price-amount {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  font-family: var(--font-numeric);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.room-card__cta {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
}

.room-card__cta:hover {
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-2);
  color: var(--color-text-on-dark);
}

.room-card__promo {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.room-card__promo i {
  color: var(--color-brand);
}

@media (max-width: 991px) {
  .room-card__promo {
    justify-content: flex-start;
  }
}

/* ============================================================
 * 카드 / 폼 / 알림 (모든 booking view 공통)
 * ============================================================ */
.booking-card {
  background: var(--color-bg);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  margin-bottom: var(--space-6);
}

.booking-card h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.booking-card .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.booking-card .form-row .form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.booking-card .form-row .form-control {
  border: var(--border-width-1) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  width: 100%;
}

.booking-card .form-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.booking-card .alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.booking-card .alert-info {
  background: var(--color-bg-tinted);
  color: var(--color-text);
  border: var(--border-width-1) solid var(--color-border);
}

.booking-card .alert-danger {
  background: rgba(187, 0, 0, 0.08);
  color: var(--color-danger);
  border: var(--border-width-1) solid rgba(187, 0, 0, 0.2);
}

.booking-card .btn-outline {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--color-text);
  border: var(--border-width-2) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  font-family: var(--font-body);
}

.booking-card .btn-outline:hover {
  background: #4b514d;
  color: var(--color-text-on-dark);
  border-color: transparent;
}

/* booking_card_full — 검색 폼 등 wide */
.booking-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.booking-actions .btn-cta {
  flex: 1;
  min-width: 200px;
}

/* booking-actions 안의 booking-search-cta — 풀폭 해제 + 균등 분배 (보조 + 메인 나란히) */
.booking-actions .booking-search-cta {
  flex: 1;
  width: auto;
  min-width: 200px;
}

/* ============================================================
 * §9.11 통합 view (ISSUE-047 — guest_checkout.php) — 1차 간략
 * 4영역: 선택된 객실 정보 / 예약자 정보 / 안내·약관 / 액션 버튼
 * ============================================================ */

/* 결제 탭 2x2 grid (좌7:우3) — guest_checkout.php
 * 행 1: [hold banner | 선택된 객실]
 * 행 2: [예약자 정보 + 약관 | 취소/예약 버튼] */
.booking-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-6);
  align-items: start;
}

.booking-checkout-grid__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.booking-checkout-grid__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* 우측 컬럼 액션 버튼 — 컬럼 좁음 대응 세로 stack (.booking-actions 기본 가로 override) */
.booking-checkout-grid__aside .booking-actions {
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 0;
}
.booking-checkout-grid__aside .booking-actions > .booking-search-cta {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* 모바일: 1열 stack */
@media (max-width: 991.98px) {
  .booking-checkout-grid {
    grid-template-columns: 1fr;
  }
  .booking-checkout-grid__aside .booking-actions {
    flex-direction: row;
  }
  .booking-checkout-grid__aside .booking-actions > .booking-search-cta {
    flex: 1;
    width: auto;
    min-width: 200px;
  }
}

/* 데스크톱(≥992px) — 우측 컬럼 좁음 → 객실 카드 내부도 1열 stack (image 위, info 아래)
 * 기본 .room-summary-grid(200px 1fr) 가로 배치는 우측 ~325px 컬럼에서 info 영역이 ~125px로 좁아져
 * dl 값(₱/₩ 가격 등) overflow 발생. aside 컨텍스트에서 cascade override. */
@media (min-width: 992px) {
  .booking-checkout-grid__aside .booking-room-summary .room-summary-grid {
    grid-template-columns: 1fr;
  }
}
.booking-room-summary .room-summary-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 600px) {
  .booking-room-summary .room-summary-grid {
    grid-template-columns: 1fr;
  }
}

.booking-room-summary .room-summary-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

.booking-room-summary .room-summary-name {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.booking-room-summary .room-summary-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.booking-room-summary .room-summary-dl dt {
  color: var(--color-text-muted);
}

.booking-room-summary .room-summary-dl dd {
  margin: 0;
  text-align: right;
}

.booking-room-summary .room-summary-amount-label {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  padding-top: var(--space-2);
  border-top: var(--border-width-1) solid var(--color-border);
  /* margin-top 제거 — dd .amount-value 의 margin: 0 이 specificity 로 dt 와 어긋나
   * (dt margin-top:4 vs dd margin-top:0) border-top 의 Y 좌표가 4px 어긋남.
   * row-gap: var(--space-2) 가 이미 row 사이 공간 제공. */
  /* dl column-gap 영역에 border 연결선 (dt → dd 사이 끊김 방지) */
  position: relative;
}
.booking-room-summary .room-summary-amount-label::after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(-1 * var(--space-4));
  width: var(--space-4);
  border-top: var(--border-width-1) solid var(--color-border);
}

.booking-room-summary .room-summary-amount-value {
  font-family: var(--font-numeric);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-brand-dark);
  padding-top: var(--space-2);
  border-top: var(--border-width-1) solid var(--color-border);
  margin-top: var(--space-1);
}

/* 예약금 정책 라벨 (예: "(예약금 · 1박분)") — amount-label 안에서 약하게 표시 */
.booking-room-summary .room-summary-amount-policy {
  display: block;
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* 잔금 — muted 표시 (체크인 시 별도 결제) */
.booking-room-summary .room-summary-balance-label,
.booking-room-summary .room-summary-balance-value {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.booking-room-summary .room-summary-balance-value {
  font-family: var(--font-numeric);
}

/* 페소 옆 원(KRW) 병기 — 동등 표시 (부모와 동일한 폰트/사이즈/색상),
 * 별도 라인으로 떨어져 깔끔한 줄바꿈. */
.booking-room-summary .room-summary-amount-krw {
  display: block;
  margin-left: 0;
}

/* ₱·₩ 통화 병기 dd 한정 — 원화(KRW)가 위, 페소(PHP)가 아래로 시각 swap
 * (마크업 순서는 그대로 두고 flex column-reverse 로 시각만 뒤집음) */
.booking-room-summary .room-summary-dl dd:has(.room-summary-amount-krw) {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}

/* 잔금 안내 멘트 — dl 닫고 별도 p (체크인 현지 결제 안내) */
.booking-room-summary .booking-room-summary-balance-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* 안내·약관 영역 (3영역) */
.booking-card .booking-section-heading {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width-1) solid var(--color-border);
}

.booking-policy-info {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-soft);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.booking-policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.booking-policy-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-1) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.booking-policy-check:hover {
  border-color: var(--color-brand);
  background: var(--color-bg-tinted);
}

.booking-policy-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  cursor: pointer;
  flex-shrink: 0;
}

.booking-policy-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.booking-policy-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  flex-shrink: 0;
}

.booking-policy-link:hover {
  color: var(--color-brand);
}

/* ============================================================
 * §9.12 결제 완료 페이지 (ISSUE-052 — done.php)
 * - 원형 체크 아이콘 (brand 색)
 * - 라운드 정보 박스
 * - 홈으로 pill 버튼
 * ============================================================ */

.booking-done-section {
  padding-top: 0;
}

.booking-done-card {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.booking-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--space-5);
  color: var(--color-brand);
}

.booking-done-icon svg {
  display: block;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 4px 14px rgba(151, 134, 103, 0.25));
}

.booking-done-headline {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.booking-done-subline {
  margin: 0 0 var(--space-7);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.booking-done-subline strong {
  color: var(--color-text);
  font-family: var(--font-numeric);
  font-weight: var(--font-bold);
}

.booking-done-link {
  color: var(--color-brand-dark);
  text-decoration: underline;
  font-weight: var(--font-semibold);
}

.booking-done-link:hover {
  color: var(--color-brand);
}

.booking-done-info {
  margin: 0 auto var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: var(--border-width-1) solid var(--color-border);
  text-align: center;
}

.booking-done-info__room {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.booking-done-info__schedule,
.booking-done-info__amount {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.booking-done-info__amount {
  margin-top: var(--space-3);
}

.booking-done-info__amount strong {
  font-family: var(--font-numeric);
  font-weight: var(--font-bold);
  color: var(--color-brand-dark);
  margin-left: var(--space-1);
}

.booking-done-info__sep {
  margin: 0 var(--space-2);
  color: var(--color-text-muted);
}

/* 두 번째 카드 — 결제 정보 (결제 카드 / 금액 / 일시) */
.booking-done-info--payment {
  margin-bottom: var(--space-8);
}

.booking-done-info__heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.booking-done-info__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  text-align: left;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-sm);
}

.booking-done-info__dl dt {
  color: var(--color-text-muted);
  font-weight: var(--font-normal);
}

.booking-done-info__dl dd {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-numeric);
}

.booking-done-info__dl dd strong {
  font-weight: var(--font-bold);
  color: var(--color-brand-dark);
}

.booking-done-home-btn {
  display: inline-block;
  min-width: 220px;
  padding: var(--space-3) var(--space-8);
  background: var(--color-brand);
  color: var(--color-text-on-dark);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: var(--border-width-1) solid var(--color-brand);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.booking-done-home-btn:hover {
  background: var(--color-brand-dark);
  color: var(--color-text-on-dark);
  border-color: var(--color-brand-dark);
}

/* ─────────────────────────────────────────────
 * ISSUE-063 B-2 — 검색 폼 하단 정책 안내
 * ───────────────────────────────────────────── */
.booking-search-notice {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-alt, #faf8f3);
  border: var(--border-width-1, 1px) solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.booking-search-notice li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted, var(--color-text));
  line-height: var(--leading-snug, 1.5);
}

.booking-search-notice li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
}

/* ─────────────────────────────────────────────
 * ISSUE-063 B-3 — Empty State (객실 0건 / 1~2박 카톡 유도)
 * ───────────────────────────────────────────── */
.booking-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface, #ffffff);
  border: var(--border-width-1, 1px) solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.booking-empty-state__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(151, 134, 103, 0.12);
  color: var(--color-brand);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xl);
}

.booking-empty-state--no-rooms .booking-empty-state__icon {
  background: rgba(187, 0, 0, 0.08);
  color: var(--color-danger);
}

.booking-empty-state__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.booking-empty-state__message {
  margin: 0;
  max-width: 480px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed, 1.6);
  color: var(--color-text-muted, var(--color-text));
}

.booking-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: #fae100; /* 카카오 옐로우 — 채널 가이드라인 색상 */
  color: #3c1e1e;
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: filter var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.booking-empty-state__cta:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .booking-empty-state {
    padding: var(--space-6) var(--space-4);
  }
  .booking-empty-state__icon {
    width: 56px;
    height: 56px;
    font-size: var(--text-xl);
  }
}