/*
  experiences-page.css
  ------------------------------------------------------------
  experiences.html 전용 스타일입니다. 헤더/푸터/사이드독/예약패널은
  기존 css 파일들(header.css, footer.css 등)을 그대로 재사용하고,
  이 파일에는 이 페이지에만 있는 섹션들만 담았습니다.

  * 아직 실제 사진/영상이 없어서, 모든 미디어 자리는 점선 테두리 +
    라벨이 있는 "플레이스홀더 박스"로 만들어뒀습니다. 나중에 사진이
    생기면 .exp-media 안의 배경을 실제 이미지로 바꿔주시면 됩니다.
  * 클릭해서 다른 섹션으로 이동하는 요소는 전부 scroll-margin-top을
    줘서, 고정 헤더에 제목이 가려지지 않도록 했습니다.
*/

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

/* ── 공통: 이미지/영상이 들어갈 자리 (플레이스홀더) ── */
.exp-media{
  background:var(--sand);
  border:1px dashed rgba(57,49,32,.3);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:rgba(57,49,32,.55);
  font-family:var(--font-kr); font-weight:700; font-size:15px;
  padding:20px;
}
.exp-media span{ max-width:220px; }

/* ── 1. 인트로 섹션: INDOOR/OUTDOOR 토글 + 헤드라인 ── */
.exp-intro{
  padding:0 48px 64px;
  scroll-margin-top:100px;
}
.exp-toggle{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  margin-bottom:56px;
}
.exp-toggle-btn{
  font-family:var(--font-en-main); font-size:22px; letter-spacing:.12em;
  color:var(--ink); padding:10px 4px; position:relative;
  transition:color .3s var(--ease);
}
.exp-toggle-btn:first-child{ justify-self:center; }
.exp-toggle-btn:last-child{ justify-self:center; }
.exp-toggle-btn::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--accent-mint); transition:width .3s var(--ease);
}
.exp-toggle-btn:hover{ color:var(--sea-deep); }
.exp-toggle-btn:hover::after{ width:100%; }
.exp-toggle-divider{ color:rgba(57,49,32,.3); font-size:18px; padding:0 24px; }

.exp-intro-body{
  max-width:640px; margin:0 0 0 auto; text-align:right;
}
.exp-intro-body h1{
  font-family:var(--font-kr); font-size:clamp(26px, 3.6vw, 40px);
  line-height:1.35; color:var(--ink); margin-bottom:26px;
}
.exp-intro-body p{
  font-family:var(--font-kr); font-size:14px; line-height:1.9;
  color:rgba(57,49,32,.65); max-width:420px; margin:0 0 0 auto;
}
.exp-intro-body p + p{ margin-top:16px; }

.exp-intro-media{
  margin-top:56px;
  aspect-ratio:16/6.5;
}

/* ── 2. 큰 이미지 배너: "어울리고 있는 사람들" ── */
.exp-people{
  aspect-ratio:16/9;
  margin:0 24px 90px;
  scroll-margin-top:100px;
  font-size:22px;
}

/* ── 3. INDOOR 3분할 그리드 ── */
.exp-indoor{
  padding:0 24px 90px;
  scroll-margin-top:100px;
}
.exp-section-label{
  font-family:var(--font-en-main); font-size:20px; font-weight:700;
  letter-spacing:.04em; color:var(--ink); margin-bottom:20px;
}
.exp-indoor-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
}
.exp-indoor-grid .exp-media{
  aspect-ratio:1/1.05; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.exp-indoor-grid .exp-media:hover{
  background:var(--sea-light); color:var(--ink);
}

/* ── 4~6. 상세 섹션 (이미지 + 텍스트, 좌우 번갈아) ── */
.exp-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  margin:0 24px 4px;
  scroll-margin-top:100px;
}
.exp-detail .exp-media{ aspect-ratio:auto; min-height:420px; }
.exp-detail-text{
  background:var(--foam);
  display:flex; flex-direction:column; justify-content:center;
  padding:60px;
}
/* 루프탑 섹션은 이미지가 오른쪽에 오도록 순서를 뒤집습니다 */
.exp-detail.reverse .exp-detail-text{ order:-1; }

.exp-detail-text h3{
  font-family:var(--font-kr); font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.4; color:var(--ink); margin-bottom:20px;
}
.exp-detail-text p{
  font-family:var(--font-kr); font-size:13.5px; line-height:1.9;
  color:rgba(57,49,32,.65);
}

/* ── 7. OUTDOOR 섹션 ── */
.exp-outdoor{
  margin:60px 24px 100px; padding:56px 48px;
  background:var(--sand);
  scroll-margin-top:100px;
}
.exp-outdoor-list{
  list-style:none; text-align:right; margin-top:24px;
}
.exp-outdoor-list li + li{ margin-top:16px; }
.exp-outdoor-list a{
  font-family:var(--font-kr); font-size:16px; font-weight:700; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.exp-outdoor-list a:hover{ color:var(--sea-deep); border-color:var(--sea-deep); }
.exp-outdoor-list svg{ width:14px; height:14px; }

/* ── 스크롤 시 부드럽게 나타나는 리빌 애니메이션 (js/experiences-page.js가 제어) ── */
.exp-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.exp-reveal.is-visible{
  opacity:1; transform:translateY(0);
}

/* ===== 모바일(920px 이하) ===== */
@media (max-width:920px){
  .exp-toggle-btn{ font-size:17px; letter-spacing:.08em; }
  .exp-toggle-divider{ padding:0 14px; }
  .exp-page{ padding-top:90px; }
  .exp-intro{ padding:0 24px 48px; }
  .exp-intro-body{ text-align:left; margin:0; }
  .exp-intro-body p{ margin:0; }
  .exp-indoor-grid{ grid-template-columns:1fr; }
  .exp-detail{ grid-template-columns:1fr; margin:0 16px 4px; }
  .exp-detail .exp-media{ min-height:280px; }
  .exp-detail-text{ padding:36px 8px; }
  .exp-detail.reverse .exp-detail-text{ order:0; }
  .exp-outdoor{ margin:40px 16px 70px; padding:36px 24px; }
  .exp-outdoor-list{ text-align:left; }
}