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

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

  /* 갤러리: 낮고 넓은 배너 비율로 */
  .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; }

  /* 예약 탭: 2단 그리드 — 좌측 공간 선택(sticky), 우측 날짜/시간/인원/환불 */
  .tabpanel[data-panel="booking"]:not([hidden]) {
    display: grid; grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 48px; align-items: start;
  }
  .tabpanel[data-panel="booking"] > section { min-width: 0; grid-column: 2; }
  .tabpanel[data-panel="booking"] > section:first-child {
    grid-column: 1; grid-row: 1 / span 4;
    position: sticky; top: 104px;
    max-height: calc(100vh - 190px); overflow-y: auto;
    padding-right: 4px;
  }
  .tabpanel[data-panel="booking"] > section:nth-child(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; }
}
