/* =====================================================================
   pension2 app.css — 퍼블리싱에 없는 보완 스타일 (테마 토큰만 사용)

   🔴 퍼블리싱 CSS 파일(reset·layout·common·sub·main·reservation)은 **고치지 않는다.**
   시안과 md5 를 맞춰 두어야 다음 시안 갱신 때 무엇이 우리 손인지 구별된다.
   우리 보완은 전부 이 파일에 모은다 (velora·forest·hotel 과 같은 방식).
   ===================================================================== */

/* ── 이용안내: 카드 높이·정렬 (H14-45) ───────────────────────
   대표님 지적: "이용안내 섹션 카드별 높이 맞춰야함".
   🔴 시안 CSS 가 `align-items: center` 라 길이가 다른 카드가 세로 가운데로 흩어진다.
   시안 자체의 결함이라 여기서 바로잡는다 — 한 줄의 카드가 가장 큰 것에 맞춰진다. */
.guide-information-section .guide-information-list {align-items: stretch;}
.guide-information-section .guide-information-item .desc-box {flex: 1;}


/* =====================================================================
   H14-45 — 예약 완료 · 확인 화면의 안내 블록과 버튼 (BookingNotices)

   마크업은 `Support/BookingNotices` 한 곳에서 나온다(네 테마 공통).
   색·여백만 여기서 이 테마의 토큰으로 정한다 — H14-44 의 인라인 style 을 걷어낸 자리다.
   ===================================================================== */
.booking-info-notices {display:flex; flex-direction:column; row-gap:12px; margin:24px 0;}
.booking-info-note {border:1px solid var(--color-border1); border-radius:8px; padding:16px 18px; background:var(--color-bg1);}
.booking-info-note-tit {margin:0 0 8px; font-size:15px; font-weight:700; color:var(--color-static1);}
.booking-info-note-list {margin:0; padding:0; list-style:none; display:flex; flex-direction:column; row-gap:6px;}
.booking-info-note-list li {font-size:13px; line-height:1.7; color:var(--color-text2); padding-left:12px; text-indent:-12px;}
.booking-info-note-list li::before {content:'· ';}

.booking-info-actions {display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 32px;}
.booking-info-action {flex:1 1 160px; text-align:center; padding:12px 16px; border-radius:6px; font-size:14px; font-weight:600; text-decoration:none; transition:opacity .2s;}
.booking-info-action:hover {opacity:.85;}
.booking-info-action--primary {background:var(--color-static1); color:var(--color-white); border:1px solid var(--color-static1);}
.booking-info-action--line {background:var(--color-white); color:var(--color-static1); border:1px solid var(--color-border1);}
.booking-info-action--kakao {background:#FEE500; color:#3B1E1E; border:1px solid #FEE500;}
@media (max-width: 768px) {
    .booking-info-action {flex:1 1 100%;}
}

/* ── 안 접히는 안내 아코디언 (H14-45) ────────────────────────
   예약 확인 화면은 `reservation.js` 를 안 싣는다(시안 규칙). 그래서 안내를
   전부 펼친 채 그리는데, 시안 CSS 의 펼친 높이가 `max-height: 500px` 다.
   🔴 사장님이 취소·환불 규정을 길게 써 두면 그 아래가 **소리 없이 잘린다** —
   잘렸다는 것을 알려 주는 것이 아무것도 없다. 그래서 여기서 풀어 준다. */
.reservation-confirm-section .reservation-guide-item--static .reservation-guide-box {max-height: none;}
.reservation-confirm-section .reservation-guide-item--static .reservation-guide-btn {cursor: default;}

/* ── 스크립트가 못 뜬 손님용 대체 링크 (H14-46) ─────────────
   객실 상세 요약 배너의 날짜·인원 버튼은 팝오버로 동작한다. 스크립트가 못 뜨면
   그 버튼은 아무 일도 안 한다 — 그때만 이 줄이 보인다(app.js 가 뜨면 지운다). */
.reservation-summary-box .no-js-search {margin-top: var(--fs-12); text-align: center;}
.reservation-summary-box .no-js-search a {color: var(--color-text3); text-decoration: underline;}

/* =====================================================================
   H14-46 — 예약 취소 **요청** 상자 (BookingCancelBox)

   마크업은 `Support/BookingCancelBox` 한 곳에서 나온다(네 테마 공통).
   색·여백만 여기서 이 테마의 토큰으로 정한다.
   ===================================================================== */
.booking-cancel-box {margin:24px 0 32px; padding:20px; border:1px solid var(--color-border1); border-radius:8px; background:var(--color-bg1);}
.booking-cancel-tit {margin:0 0 8px; font-size:16px; font-weight:700; color:var(--color-static1);}
.booking-cancel-desc {margin:0 0 14px; font-size:13px; line-height:1.7; color:var(--color-text2);}
.booking-cancel-desc strong {font-weight:700;}
.booking-cancel-reason {margin:8px 0 0; font-size:13px; color:var(--color-text2);}
.booking-cancel-msg {margin:0 0 12px; font-size:13px; font-weight:600;}
.booking-cancel-msg--ok {color:var(--color-static1);}
.booking-cancel-msg--error {color:#C0392B;}
.booking-cancel-reasons {margin:0 0 14px; padding:0; border:0; display:flex; flex-wrap:wrap; gap:8px 16px;}
.booking-cancel-legend {padding:0; margin:0 0 8px; font-size:13px; font-weight:600; color:var(--color-static1);}
.booking-cancel-reason-item {display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--color-text2); cursor:pointer;}
.booking-cancel-label {display:block; margin:0 0 6px; font-size:13px; font-weight:600; color:var(--color-static1);}
.booking-cancel-memo {width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--color-border1); border-radius:6px; font-size:13px; line-height:1.6; color:var(--color-static1); background:var(--color-white); resize:vertical;}
.booking-cancel-submit {margin-top:12px; padding:12px 20px; border:1px solid var(--color-static1); border-radius:6px; background:var(--color-white); color:var(--color-static1); font-size:14px; font-weight:600; cursor:pointer;}
.booking-cancel-submit:hover {background:var(--color-static1); color:var(--color-white);}
.booking-cancel-box--done {border-style:dashed;}

/* ── 예상 환불 금액 (H14-47) ─────────────────────────────────
   🔴 숫자만 크게 보이면 손님은 그것을 **확정 금액**으로 읽는다.
   근거 줄과 '예상' 안내를 같은 상자 안에 두어 함께 읽히게 한다. */
.booking-cancel-refund {margin:0 0 14px; padding:14px 16px; border:1px solid var(--color-border1); border-radius:6px; background:var(--color-white);}
.booking-cancel-refund-amount {margin:0 0 4px; font-size:15px; line-height:1.6; color:var(--color-static1);}
.booking-cancel-refund-amount strong {font-size:19px; font-weight:700; color:var(--color-static1);}
.booking-cancel-refund-basis {margin:0 0 8px; font-size:13px; color:var(--color-text2);}
.booking-cancel-refund-note {margin:0; font-size:12px; line-height:1.7; color:var(--color-text2); opacity:.85;}
.booking-cancel-refund--none .booking-cancel-refund-amount strong {color:#C0392B;}


/* ── H14-91: 취소 요청 상자 컨트롤 복원 ─────────────────────────
   테마 reset 이 legend 를 1px 로 접고 radio 를 appearance:none(0px)으로 지워
   '취소 사유' 제목과 선택 상태가 화면에서 사라졌다(신고: 문구 오인·사유 클릭 안 됨).
   pension2·velora 는 전역 라벨 여백이 얹혀 '더 하실 말씀'과 입력칸이 50px+ 벌어졌다.
   공용 마크업(BookingCancelBox)의 컨트롤을 테마 위에서 명시적으로 되살린다. */
.booking-cancel-legend {position:static !important; width:auto !important; height:auto !important; overflow:visible !important; clip:auto !important; clip-path:none !important; margin:0 0 10px !important; padding:0; display:block; font-size:14px; font-weight:700;}
.booking-cancel-reason-item {padding:8px 14px; border:1px solid rgb(0 0 0 / 15%); border-radius:999px; user-select:none;}
.booking-cancel-reason-item input[type="radio"] {appearance:auto !important; -webkit-appearance:radio !important; position:static !important; width:15px !important; height:15px !important; margin:0 !important; clip:auto !important; clip-path:none !important; accent-color:var(--color-static1);}
.booking-cancel-reason-item:has(input:checked) {border-color:var(--color-static1); box-shadow:inset 0 0 0 1px var(--color-static1);}
.booking-cancel-form {display:block !important; row-gap:0 !important;}  /* 전역 form flex gap 무효화 — '더 하실 말씀' 벌어짐의 원인 */
.booking-cancel-reasons {margin:0 0 16px !important;}
.booking-cancel-label {margin:0 0 6px !important;}
.booking-cancel-memo {margin:0 !important;}

/* ── H14-94: 취소된 예약 상태 배너 (BookingCancelBox::statusNotice) ──
   취소 화면은 정상 예약과 한눈에 달라야 한다 — 확인 화면 맨 위에 놓이고
   붉은 왼줄 + 옅은 붉은 배경으로 구분한다. 취소가 아니면 아예 안 그려진다. */
.booking-cancel-box--canceled {border:1px solid rgba(192, 57, 43, .35); border-left:4px solid #C0392B; background:#FDF5F4;}
.booking-cancel-box--canceled .booking-cancel-tit {color:#C0392B;}
.booking-cancel-box--canceled .booking-cancel-desc {margin:0;}

/* ── H14-94 v2: 취소 요청 "접수 중" 배너 — 취소 확정(붉음)과 구분되는 노란 톤.
   접수는 접수다 — 취소된 것처럼 보이면 그것도 거짓말이다. */
.booking-cancel-box--requested {border:1px solid rgba(176, 128, 24, .4); border-left:4px solid #B08018; background:#FDF9EE;}
.booking-cancel-box--requested .booking-cancel-tit {color:#8A6512;}
.booking-cancel-box--requested .booking-cancel-desc {margin:0;}

/* ── H14-97: 객실 상세 갤러리 — 사진이 한 장뿐일 때 ─────────────
   사이드 줄(23%)을 안 그리는 대신 메인이 그 높이까지 차지한다.
   (사이드 줄 자체의 중복 사진 문제는 뷰에서 고쳤다 — slice(1,4)) */
.reservation-room-info-section .room-detail-gallery--single .gallery-main {height: 100%;}

/* ── H14-97 후속: 금액 내역의 hidden 줄이 그대로 보이던 것 ─────────
   시안 CSS 가 li 에 display:flex 를 걸어 UA 의 [hidden]{display:none} 을 이긴다
   (쇼핑 주문서에서 같은 병 — shopping-order-form.md "[hidden] 이 display 에 지던 줄").
   "추가 인원 0명 · 추가 옵션 × 0" 이 0원으로 늘 보였다. 시안 CSS 는 안 건드린다(H14-45). */
.reservation-detail-section .full-box-body .reservation-price-list li[hidden] {display: none;}
.reservation-room-info-section .full-box-body .reservation-price-list li[hidden] {display: none;}