/*
  rooms-page.css
  ------------------------------------------------------------
  rooms.html 전용 스타일입니다. 헤더/푸터/사이드독/예약패널은
  기존 css 파일들을 그대로 재사용하고, 여기엔 이 페이지만의
  섹션(객실 4종 선택 그리드 + 상세 섹션)만 담았습니다.

  이 페이지는 config를 거치지 않고 내용을 HTML에 직접 써넣는
  방식입니다 (experiences.html과 같은 이유 — 자세한 배경은
  experiences.html 상단 주석 참고).
*/

.rooms-page{ padding-top:110px; }

.rooms-intro{
  max-width:640px; margin:0 auto; text-align:center; padding:0 24px 56px;
}
.rooms-intro .eyebrow{ display:block; margin-bottom:18px; }
.rooms-intro h1{
  font-size:clamp(28px, 3.4vw, 42px); font-weight:400; line-height:1.3; color:var(--ink);
}

/* ── 1. 객실 4종 선택 (2x2) ── */
.room-select-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:2px;
  padding:0 24px 90px;
}
.room-select-card{
  position:relative; aspect-ratio:4/3; cursor:pointer; overflow:hidden;
  background:var(--sand);
  border:1px dashed rgba(57,49,32,.3);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px;
  transition:background .25s var(--ease);
}
.room-select-card:hover{ background:var(--sea-light); }
.room-select-card .room-name{
  font-family:var(--font-en-main); font-size:22px; font-weight:700; color:var(--ink);
  margin-bottom:6px;
}
.room-select-card .room-tag{
  font-family:var(--font-kr); font-size:13px; color:rgba(57,49,32,.6);
}

/* ── 2. 객실 상세 섹션 (4개 반복) ── */
.room-detail{
  margin:0 24px 4px; scroll-margin-top:100px;
}
.room-detail-gallery{
  background:var(--sand); border:1px dashed rgba(57,49,32,.3);
  aspect-ratio:16/7; display:flex; align-items:center; justify-content:center;
  color:rgba(57,49,32,.55); font-family:var(--font-kr); font-weight:700; font-size:15px;
}
.room-detail-body{ padding:32px 4px 64px; max-width:640px; }
.room-detail-body h2{
  font-family:var(--font-en-main); font-size:26px; font-weight:700; color:var(--ink);
  margin-bottom:16px;
}
.room-detail-meta{
  display:flex; gap:24px; flex-wrap:wrap; margin-bottom:18px;
  font-family:var(--font-kr); font-size:13.5px; color:rgba(57,49,32,.65);
}
.room-detail-meta span{ display:inline-flex; align-items:center; gap:6px; }
.room-detail-meta svg{ width:15px; height:15px; flex-shrink:0; }
.room-detail-body p.desc{
  font-family:var(--font-kr); font-size:14.5px; line-height:1.85; color:rgba(57,49,32,.7);
}

.room-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.room-reveal.is-visible{
  opacity:1; transform:translateY(0);
}

@media (max-width:920px){
  .rooms-page{ padding-top:90px; }
  .room-select-grid{ grid-template-columns:1fr; padding:0 24px 60px; }
  .room-detail{ margin:0 16px 4px; }
  .room-detail-body{ padding:24px 4px 48px; }
}