/* booking.php 전용 — 공통은 front.css */

/* ===== PC (데스크톱, 1024px+) 레이아웃 ===== */
@media (min-width: 1024px) {
  :root { --maxw: 980px; --pad: 36px; }

  /* 갤러리: 낮고 넓은 배너 비율로 */
  .gallery__img { aspect-ratio: 21 / 8; }

  /* 시설정보 / Q&A: 읽기 좋은 폭으로 중앙 정렬 */
  .tabpanel[data-panel="info"]:not([hidden]),
  .tabpanel[data-panel="faq"]:not([hidden]) { max-width: 760px; margin: 0 auto; }

  /* 예약 탭 그리드: 1행 = 선택공간 | 날짜선택, 이후(시간/인원/환불)는 전체 폭 */
  .tabpanel[data-panel="booking"]:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 44px; align-items: start;
  }
  .tabpanel[data-panel="booking"] > section { min-width: 0; grid-column: 1 / -1; }
  .tabpanel[data-panel="booking"] > section:nth-child(1) { grid-column: 1; border-top: 0; }
  .tabpanel[data-panel="booking"] > section:nth-child(2) { grid-column: 2; border-top: 0; }

  /* 방 사진: 데스크톱에서는 그리드로 전부 펼침 (가로 스크롤 불필요) */
  .room__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow: visible; scroll-snap-type: none; }
  .room__photos > picture { width: auto; height: 130px; }

  /* 달력: 과도하게 넓어지지 않게 */
  .cal { max-width: 540px; }

  /* 시간 슬롯: 4열 → 6열 */
  .slots { grid-template-columns: repeat(6, 1fr); }

  /* 하단 결제바: 페이지 폭 + 살짝 떠 있는 카드 느낌 */
  .paybar {
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -6px 24px rgba(20,24,31,0.08);
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
  }
}

.chatw__avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #fff;
}

/* ---------- PC: FAQ 일자형 리스트 (라인 구분 아코디언) ---------- */
@media (min-width: 1024px) {
  .faq-list { display: block; border-top: 1px solid var(--line); }
  .faq-item { border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
  .faq-item__q { padding: 19px 4px; font-size: 15px; font-weight: 600; }
  .faq-item__badge { display: none; }
  .faq-item__a { padding: 0 4px 20px; border-top: 0; background: transparent; }
}

/* 공간 선택 섹션: 모바일=전체 목록에서 선택 / PC=선택한 방 하나만 표시 */
.rt-pc { display: none; }

.change-room-btn { display: none; }

@media (min-width: 1024px) {
  .rt-mobile { display: none; }
  .rt-pc { display: inline; }
  /* 선택한 방 카드만 표시 (목록 스크롤 제거) */
  .room:not(.is-selected) { display: none; }
  .change-room-btn {
    display: block; width: 100%; margin-top: 12px;
    appearance: none; cursor: pointer; font: inherit;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 13px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.3px; color: var(--text);
    transition: border-color .12s;
  }
  .change-room-btn:hover { border-color: var(--text-dim); }
}

/* PC: 탭바 제거 — 뒤로가기는 상단 로고(시설정보로 이동) */
@media (min-width: 1024px) {
  .tabs { display: none; }
  .topbar__link { display: none; }  /* PC: 예약링크 버튼 숨김 */
}

a.topbar__logo { text-decoration: none; color: inherit; }

.page { padding-bottom: 110px; }