/* ==========================================================================
   스테이온도 (STAY ONDO) — 충남 태안 독채 스테이
   프리셋 P10. 코스탈 스테이 / 레이아웃 아키타입 E. 오버레이 레이어드

   팔레트  Sand #F6F1E8 / Surface #EDE6DA / Ink #2A2A26 / Accent #5B8C85 / Deep #1C2E2B
   타이포  Display: Cormorant Garamond 300~500 / Body: Pretendard 300~400
           Label: 영문 소문자 + letter-spacing .2em
   모티프  아치 창 프레임 · 가로 헤어라인 · 소문자 영문 캡션 · 물결 SVG 디바이더 · 넓은 마진
   사진    filter: brightness(1.04) saturate(.88) — 전 이미지 일괄
   금지    채도 높은 원색 / 볼드 고딕 디스플레이 / 사진 위 검은 반투명 "박스"
           (스크림은 반드시 그라데이션으로만)
   ========================================================================== */

/* ===== 0. 토큰 ===== */
:root{
  --sand:#F6F1E8;
  --surface:#EDE6DA;
  --ink:#2A2A26;
  --accent:#5B8C85;
  --accent-dp:#42706A;
  --accent-lt:#9CBDB6;
  --deep:#1C2E2B;
  --line:rgba(42,42,38,.14);
  --line-lt:rgba(246,241,232,.2);
  --ink-72:rgba(42,42,38,.72);
  --ink-54:rgba(42,42,38,.54);
  --ink-38:rgba(42,42,38,.38);

  --serif:"Cormorant Garamond",'Apple SD Gothic Neo',serif;
  --body:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gut:clamp(20px,5vw,84px);
  --edge:46px;
  --pad:clamp(90px,13vw,190px);      /* 섹션 패딩 규칙 */
  --measure:58ch;                    /* ★ P10: 본문 max-width 58ch */
}

/* ===== 1. 리셋 ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* ⚠ 전역 scroll-behavior:smooth 금지 (Lenis 충돌) — 모바일 미디어쿼리에만 아래에서 */
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ===== 2. 타이포 프리미티브 ===== */
.display,.h2,.statement-h,.tour-title,.night-h,.book-h,.bleed-quote,
.room-body h3,.am-body h3,.tcap h3,.ar h3{
  font-family:var(--serif);font-weight:300;letter-spacing:-.02em;
}
.display{font-size:clamp(40px,8vw,118px);line-height:1.02;font-weight:300}
.h2{font-size:clamp(30px,4.6vw,62px);line-height:1.12;font-weight:300}

/* ★ Label — 영문 소문자 + .2em 자간 (P10 시그니처 모티프) */
.label{
  font-family:var(--mono);font-weight:400;
  font-size:10.5px;letter-spacing:.2em;text-transform:lowercase;
  color:var(--accent-dp);line-height:2.2;
}
.lead{font-size:clamp(15px,1.75vw,18.5px);line-height:1.9;color:var(--ink-72)}

.wrap{width:min(1240px,100% - var(--gut)*2);margin-inline:auto}

/* ===== 3. 사진 통일 처리 (★ 전 이미지 일괄 — 싼마이 방지 1순위) ===== */
img{filter:brightness(1.04) saturate(.88)}

/* ===== 4. 버튼 ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border:1px solid currentColor;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  transition:background-color .38s ease,color .38s ease,border-color .38s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dp);border-color:var(--accent-dp)}
.btn-line{border-color:rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.14)}
.btn-solid{background:var(--sand);border-color:var(--sand);color:var(--deep)}
.btn-solid:hover{background:#fff;border-color:#fff}
.btn-ghost{border-color:rgba(246,241,232,.5);color:var(--sand)}
.btn-ghost:hover{background:rgba(246,241,232,.14)}
.btn-mini{padding:10px 20px;font-size:10.5px;border-color:var(--line);color:var(--ink-72)}
.btn-mini:hover{border-color:var(--accent);color:var(--accent-dp)}

/* ===== 5. 로딩 커튼 ===== */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--sand);
  display:grid;place-items:center;
}
html:not(.js-anim) .curtain{display:none}
.curtain-inner{display:grid;justify-items:center;gap:22px;width:min(300px,70vw)}
.curtain-wave{width:100%;height:24px;overflow:visible}
.curtain-txt{opacity:0;color:var(--accent-dp)}
html:not(.js-anim) .curtain-txt{opacity:1}

/* ===== 6. 헤더 ===== */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:background-color .4s ease,border-color .4s ease,backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{background:rgba(246,241,232,.9);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.head-inner{display:flex;align-items:center;gap:clamp(14px,3vw,44px);height:70px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;transition:color .4s ease}
.site-head.is-stuck .logo{color:var(--ink)}
.logo-mark{display:block;color:var(--accent-lt);transition:color .4s ease}
.site-head.is-stuck .logo-mark{color:var(--accent)}
.logo-txt{font-family:var(--serif);font-size:20px;letter-spacing:.04em;font-weight:400}
.gnb{display:none;gap:clamp(16px,2.4vw,30px);margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.86);transition:color .4s ease}
.site-head.is-stuck .gnb{color:var(--ink-72)}
@media(min-width:960px){.gnb{display:flex}}
.gnb a{position:relative;padding:4px 0}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .34s ease}
.gnb a:hover::after{right:0}
.head-inner .btn-mini{margin-left:auto;border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.9)}
@media(min-width:960px){.head-inner .btn-mini{margin-left:0}}
.site-head.is-stuck .btn-mini{border-color:var(--line);color:var(--ink-72)}
@media(max-width:719px){.head-inner .btn-mini{display:none}}

/* ==========================================================================
   7. ★ 아키타입 E — 오버레이 레이어드
   파도가 한 겹씩 밀려와 앞선 물자국을 덮는 결.
   ⚠ 모바일(<1024px)에서는 겹침·sticky를 전부 해제한다 (함정 3)
   ========================================================================== */
.layer{position:relative;z-index:1}
.layer-sand   {background:var(--sand);color:var(--ink)}
.layer-surface{background:var(--surface);color:var(--ink)}
.layer-tour   {background:var(--deep);color:var(--sand)}
.layer-deep   {background:#0E1A18;color:var(--sand)}   /* 딥 다크 챕터 — 가장 어두운 장 */
.layer-accent {background:var(--accent-dp);color:var(--sand)}
.layer-photo  {background:var(--deep);color:#fff}
.layer-full   {background:var(--deep);color:#fff}

/* 접힌 가장자리 — 겹쳐 쌓인 장의 색인 탭 (가로 헤어라인 모티프) */
.wrap-edge{
  display:flex;align-items:center;gap:12px;height:var(--edge);padding:0 var(--gut);
  color:var(--accent-dp);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(42,42,38,.035),rgba(42,42,38,0));
  margin:0;
}
.wrap-edge i{display:block;width:28px;height:1px;background:currentColor;opacity:.5;flex:0 0 auto}
.wrap-edge.is-dark{color:var(--accent-lt);border-bottom-color:var(--line-lt);
  background:linear-gradient(180deg,rgba(246,241,232,.06),rgba(246,241,232,0))}
.layer-accent .wrap-edge.is-dark{color:rgba(246,241,232,.8);border-bottom-color:rgba(246,241,232,.28)}

.layer-in{padding:var(--pad) 0}

/* ⚠ 데스크톱에서만 겹쳐 쌓는다 */
@media(min-width:1024px){
  .layer{
    position:sticky;top:0;min-height:100svh;
    margin-top:-11vh;                    /* ★ 음수 마진 = 앞 장 위로 덮임 */
    border-radius:20px 20px 0 0;overflow:hidden;transform-origin:50% 0;
    box-shadow:0 -26px 70px rgba(28,46,43,.16),0 -1px 0 rgba(42,42,38,.08);
    will-change:transform,filter;
  }
  .layer:first-child{margin-top:0;border-radius:0;box-shadow:none}
  .layer:last-child{position:relative}   /* 마지막 장은 sticky 해제 → 푸터가 이어진다 */

  .wrap-edge{position:sticky;top:0;z-index:6;backdrop-filter:blur(5px)}
  .layer-in{display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100svh - var(--edge));padding:clamp(58px,7vw,104px) 0}

  /* ★ 시그니처 장은 화면에 오래 머문다 (줌이 다 돌기 전에 덮이면 죽는다)
     ⚠ overflow:hidden 은 자식 sticky 를 무력화 → clip 을 쓴다 */
  /* 스크럽 end를 한 화면 앞당기므로(main.js) 실제 스크럽 거리는 (높이 - 2화면)이다.
     세 장면을 느리게 보여주려면 넉넉히 400svh가 필요하다. */
  .hours{min-height:400svh;overflow:clip}
  .hours .tour-in{position:sticky;top:0;min-height:100svh;width:100%;padding:0}

  .hero .wrap-edge{display:none}
}

/* ==========================================================================
   8. L01 히어로 — 풀블리드 사진 + 2중 그라데이션 스크림
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate;
}
/* ⚠⚠ 아키타입 E 최대 함정
   모바일에서 .layer 의 overflow:hidden 이 풀리면 히어로 패럴랙스 scale(1.06)
   확대분이 문서 폭을 밀어낸다. 증상은 헤더에 나타나지만 진범은 히어로다.
   → 래퍼가 언제나 잘라낸다 */
.hero-media{position:absolute;inset:-7% 0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;will-change:transform;
  filter:brightness(1.04) saturate(.88)}
/* 2중 스크림 — 검은 박스가 아니라 그라데이션만 (P10 규칙)
   ⚠ P10은 "밝은 자연광"이다. 스크림을 세게 깔면 P3 나이트럭스처럼 보인다.
     헤드라인이 얹히는 좌하단만 딥 톤을 주고, 사진의 밝은 영역은 살린다. */
.hero::before,.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.hero::before{background:linear-gradient(180deg,rgba(28,46,43,.3) 0%,rgba(28,46,43,0) 26%,rgba(28,46,43,.06) 52%,rgba(28,46,43,.5) 100%)}
.hero::after{background:linear-gradient(96deg,rgba(28,46,43,.62) 0%,rgba(28,46,43,.2) 38%,rgba(28,46,43,0) 62%)}
.hero-in{position:relative;z-index:3;padding-top:clamp(120px,18vh,210px);padding-bottom:clamp(40px,6vh,76px)}
@media(min-width:1024px){.hero-in{justify-content:flex-end;min-height:100svh}}

.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;color:var(--accent-lt)}
.eyebrow .rule{display:block;width:54px;height:1px;background:currentColor;flex:0 0 auto}
.hero-h1{color:#fff;margin:clamp(18px,3vh,32px) 0 clamp(20px,3vh,30px);max-width:13ch;
  text-shadow:0 2px 44px rgba(20,32,30,.4)}
.hero-lead{color:rgba(255,255,255,.88);max-width:46ch}
.hero-lead em{font-style:normal;color:var(--accent-lt)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,3.6vh,40px)}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px;
  margin-top:clamp(32px,5vh,66px);padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.hero-foot .label{color:rgba(255,255,255,.66)}
.hero-scroll{display:flex;align-items:center;gap:10px;white-space:nowrap}
.hero-scroll i{display:block;width:36px;height:1px;background:rgba(255,255,255,.24);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent-lt);
  animation:sweep 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}62%,100%{transform:translateX(100%)}}
@media(max-width:719px){.pc-br{display:none}.hero-facts{display:none}}

/* ==========================================================================
   9. L02 선언 — 초대형 타이포 (페이지당 정확히 1곳)
   ========================================================================== */
.statement .layer-in{gap:clamp(24px,3.4vw,44px)}
.statement-h{
  font-size:clamp(44px,10vw,150px);line-height:1.0;letter-spacing:-.045em;
  margin:clamp(14px,2vw,26px) 0 0;font-weight:300;
}
.st-line{display:block}
@media(min-width:720px){.st-indent{margin-left:16%}}

/* ★ 물결 SVG 디바이더 (P10 모티프) */
.wave-div{width:100%;margin:clamp(26px,4vw,52px) 0}
.wave-div svg{width:100%;height:32px;display:block;overflow:visible}
.wave-sm{margin:clamp(20px,3vw,38px) 0 clamp(30px,4.4vw,58px)}
.wave-lt{margin:clamp(30px,4.6vw,60px) 0}

.statement-sub{max-width:var(--measure);margin-left:auto}   /* ★ 넓은 마진 · 58ch */
.statement-sub p{font-size:clamp(14.5px,1.55vw,17px);color:var(--ink-72);line-height:1.95}
.st-mark{margin-top:20px;font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2.6vw,30px);color:var(--accent-dp) !important;line-height:1.5}
.st-note{color:var(--ink-38);border-top:1px solid var(--line);padding-top:16px;max-width:34ch;line-height:2.4}
.st-note span{display:block;margin-top:8px;letter-spacing:.02em;font-size:12.5px;
  font-family:var(--body);text-transform:none;color:var(--ink-54);line-height:1.8}

/* ==========================================================================
   10. L03 ★ 시그니처 — 공간 투어 슬로우 줌 (시간대 축)
   ========================================================================== */
.hours{position:relative;overflow:clip}
.tour-in{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;overflow:hidden;isolation:isolate;padding:0}

/* 장면 스택 — scale 1.18 → 1.02 슬로우 줌 + 크로스페이드 */
.tour-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.tscene{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.tscene.is-on{opacity:1}
.tscene img{width:100%;height:100%;object-fit:cover;will-change:transform;
  filter:brightness(1.04) saturate(.88);transform:scale(1.18)}
html:not(.js-anim) .tscene{opacity:0}
html:not(.js-anim) .tscene.is-on{opacity:1}
html:not(.js-anim) .tscene img{transform:scale(1.02)}
/* 스크림은 그라데이션만 (P10 금지: 검은 반투명 박스)
   ⚠ 아침 장면이 어두워지면 P10 자연광이 죽는다 → 캡션이 앉는 좌하단만 딥 톤 */
.tour-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(28,46,43,.24) 0%,rgba(28,46,43,0) 26%,rgba(28,46,43,.1) 48%,rgba(28,46,43,.76) 100%),
    linear-gradient(92deg,rgba(28,46,43,.6) 0%,rgba(28,46,43,.16) 44%,rgba(28,46,43,0) 68%)}

/* ★ 시간 눈금 축 (좌측 세로) — damso 대비 차별점 */
.tour-axis{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);z-index:4;
  display:none;gap:16px;align-items:stretch}
@media(min-width:1024px){.tour-axis{display:flex}}
.ax-line{position:relative;display:block;width:1px;background:rgba(246,241,232,.24);flex:0 0 auto}
.ax-fill{position:absolute;left:0;top:0;width:1px;height:0%;background:var(--accent-lt);
  transition:height .5s ease}
html:not(.js-anim) .ax-fill{height:100%}
.ax-marks{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,9vh,86px)}
.ax-mark{display:grid;gap:2px;opacity:.36;transition:opacity .55s ease,transform .55s ease;transform:translateX(-4px)}
.ax-mark.is-on{opacity:1;transform:translateX(0)}
.ax-mark b{display:block;font-size:12.5px;letter-spacing:.16em;color:var(--sand);font-weight:400;
  font-family:var(--mono)}
.ax-mark span{font-size:11px;color:var(--accent-lt);letter-spacing:.08em}
.ax-mark.is-on b{color:var(--accent-lt)}

.tour-wrap{position:relative;z-index:3;
  padding-top:clamp(110px,16vh,180px);padding-bottom:clamp(46px,7vh,84px)}
@media(min-width:1024px){.tour-wrap{padding-left:88px}}
.tour-head{margin-bottom:clamp(24px,4vh,50px)}
.tour-head .label{color:var(--accent-lt)}
.tour-title{font-size:clamp(32px,5.6vw,78px);line-height:1.05;color:var(--sand);margin-top:10px}

/* 캡션 — 3장이 겹쳐 있고 활성만 보인다.
   ⚠ 함정 3: 모바일에서는 겹침을 풀고 세로로 쌓는다 (아래 미디어쿼리) */
.tour-caps{position:relative;min-height:clamp(230px,30vh,290px)}
.tcap{position:absolute;inset:0;max-width:var(--measure);opacity:0;visibility:hidden;
  transform:translateY(18px);transition:opacity .7s ease,transform .7s ease,visibility .7s}
.tcap.is-active{opacity:1;visibility:visible;transform:none}
html:not(.js-anim) .tcap{position:relative;opacity:1;visibility:visible;transform:none;
  margin-bottom:26px}
.tcap-time{display:flex;align-items:baseline;gap:12px;color:var(--accent-lt)}
.tcap-time b{font-size:clamp(20px,2.4vw,28px);letter-spacing:.1em;font-weight:400;color:var(--sand)}
.tcap h3{font-size:clamp(24px,3.4vw,44px);line-height:1.16;color:var(--sand);margin:12px 0 14px}
.tcap-p{font-size:clamp(14px,1.5vw,16.5px);color:rgba(246,241,232,.76);line-height:1.9;max-width:var(--measure)}
.tcap-meta{margin-top:14px;padding-top:12px;border-top:1px solid rgba(246,241,232,.2);
  color:var(--accent-lt);max-width:44ch}

/* ==========================================================================
   11. 공통 섹션 헤드
   ========================================================================== */
.sec-head{margin-bottom:clamp(34px,5vw,66px);max-width:var(--measure)}
.sec-head .h2{margin:12px 0 18px}
.sec-lead{font-size:clamp(14.5px,1.55vw,17px);color:var(--ink-72);line-height:1.92;max-width:var(--measure)}
.layer-deep .sec-lead,.layer-accent .sec-lead{color:rgba(246,241,232,.78)}
.layer-deep .label,.layer-accent .label,.layer-tour .label{color:var(--accent-lt)}

/* ==========================================================================
   12. L04 독채 3동
   ========================================================================== */
.room-grid{display:grid;gap:clamp(28px,3.6vw,44px)}
@media(min-width:760px){.room-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.room-grid{grid-template-columns:repeat(3,1fr)}}
.room{display:grid;gap:20px}
/* ★ 아치 창 프레임 (P10 모티프) — 이미지 상단이 아치로 잘린다 */
.room-fig{position:relative;overflow:hidden;border-radius:999px 999px 6px 6px;background:var(--sand)}
.room-fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid var(--line);border-radius:inherit}
.room-fig img{width:100%;aspect-ratio:3/4;object-fit:cover;will-change:transform}
.room-no{color:var(--accent)}
.room-body h3{font-size:clamp(24px,2.8vw,34px);margin:6px 0 10px}
.room-body p{font-size:14.5px;color:var(--ink-72);line-height:1.9;max-width:38ch}
.room-spec{margin-top:18px;border-top:1px solid var(--line)}
.room-spec > div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.room-spec dt{font-size:13px;color:var(--ink-54)}
.room-spec dd{margin:0;color:var(--ink);text-align:right}
.room-note{margin-top:clamp(30px,4vw,52px);color:var(--ink-54);max-width:64ch;
  font-family:var(--body);font-size:12.5px;letter-spacing:0;text-transform:none;line-height:1.9;
  border-top:1px solid var(--line);padding-top:16px}

/* ==========================================================================
   13. L05 / L09 풀블리드 사진 챕터 (P10 명암 리듬 — 2곳)
   ========================================================================== */
.bleed{position:relative;min-height:clamp(520px,84svh,900px);overflow:hidden;isolation:isolate;
  display:flex;align-items:center}
.bleed-media{position:absolute;inset:-6% 0;z-index:0;overflow:hidden}
.bleed-media img{width:100%;height:100%;object-fit:cover;will-change:transform;
  filter:brightness(1.04) saturate(.88)}
.bleed::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(28,46,43,.68) 0%,rgba(28,46,43,.22) 48%,rgba(28,46,43,0) 78%)}
.bleed-pool::before{background:linear-gradient(260deg,rgba(28,46,43,.68) 0%,rgba(28,46,43,.22) 48%,rgba(28,46,43,0) 78%)}
.bleed .layer-in{position:relative;z-index:2;padding:clamp(60px,10vw,120px) 0;min-height:0}
.bleed-in{max-width:var(--measure)}
.bleed-in-r{margin-left:auto;text-align:right}
.bleed-quote{font-size:clamp(26px,4.4vw,58px);line-height:1.24;color:#fff;font-style:italic;
  text-shadow:0 2px 40px rgba(20,32,30,.36)}
.bleed-cap{margin-top:20px;color:var(--accent-lt)}

/* ==========================================================================
   14. L06 조식 · 어메니티
   ========================================================================== */
.am-grid{display:grid;gap:clamp(26px,3.4vw,42px)}
@media(min-width:720px){.am-grid{grid-template-columns:repeat(3,1fr)}}
.am{display:grid;gap:18px}
.am-fig{overflow:hidden;border-radius:4px;background:var(--surface)}
.am-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;will-change:transform}
.am-no{color:var(--accent)}
.am-body h3{font-size:clamp(20px,2.2vw,27px);margin:4px 0 10px}
.am-body p{font-size:14px;color:var(--ink-72);line-height:1.9}
.am-meta{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-38)}

.kit-list{display:grid;gap:1px;background:var(--line);margin-top:clamp(34px,4.6vw,60px);
  border:1px solid var(--line)}
@media(min-width:640px){.kit-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.kit-list{grid-template-columns:repeat(4,1fr)}}
.kit{background:var(--sand);padding:clamp(20px,2.4vw,30px)}
.kit .label{color:var(--accent)}
.kit p{font-size:13.5px;color:var(--ink-72);line-height:1.86;margin-top:8px}

/* ==========================================================================
   15. L07 딥 다크 챕터 (밤)
   ========================================================================== */
.night{position:relative;overflow:hidden;isolation:isolate}
/* ⚠ P10 명암 리듬의 "딥 다크 챕터 1개" — 여기만은 확실히 어두워야 리듬이 생긴다.
   원본이 밝은 황혼 사진이라 opacity + 딥 그라데이션을 겹쳐 밤으로 내린다. */
.night-media{position:absolute;inset:-6% 0;z-index:0;overflow:hidden;opacity:.34}
.night-media img{width:100%;height:100%;object-fit:cover;will-change:transform;
  filter:brightness(.72) saturate(.7)}
.night::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(170deg,rgba(14,26,24,.94) 0%,rgba(18,32,30,.8) 42%,rgba(12,22,21,.97) 100%)}
.night .layer-in{position:relative;z-index:2}
.night-h{font-size:clamp(32px,5.2vw,74px);line-height:1.08;color:var(--sand);margin:14px 0 clamp(26px,3.6vw,46px)}
.night-body{display:grid;gap:clamp(26px,3.6vw,52px)}
@media(min-width:900px){.night-body{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:start}}
.night-body > p{font-size:clamp(14.5px,1.55vw,17px);color:rgba(246,241,232,.78);line-height:1.95;max-width:var(--measure)}
.night-list{border-top:1px solid var(--line-lt)}
.night-list > div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line-lt)}
.night-list dt{font-size:13.5px;color:rgba(246,241,232,.6)}
.night-list dd{margin:0;color:var(--accent-lt);text-align:right}
.night-note{margin-top:clamp(26px,3.4vw,44px);color:rgba(246,241,232,.56);max-width:56ch;
  font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;line-height:1.9}

/* ==========================================================================
   16. L08 주변 안내
   ========================================================================== */
.around-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:680px){.around-list{grid-template-columns:repeat(2,1fr)}}
.ar{background:var(--surface);padding:clamp(24px,3vw,40px);display:grid;gap:10px;align-content:start}
.ar-dist{color:var(--accent)}
.ar h3{font-size:clamp(20px,2.2vw,28px)}
.ar p{font-size:14px;color:var(--ink-72);line-height:1.9;max-width:40ch}
.tide-note{margin-top:clamp(30px,4vw,52px);padding:clamp(22px,2.8vw,34px);
  border:1px solid var(--accent);border-radius:4px;background:rgba(91,140,133,.07);max-width:var(--measure)}
.tide-note .label{color:var(--accent-dp)}
.tide-note p:last-child{font-size:14px;color:var(--ink-72);line-height:1.9;margin-top:8px}
.tide-note b{font-weight:500;color:var(--ink)}

/* ==========================================================================
   17. L10 예약 안내
   ========================================================================== */
.policy-cols{display:grid;gap:clamp(34px,4.6vw,72px)}
@media(min-width:940px){.policy-cols{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
.pol-list{border-top:1px solid var(--line);align-self:start}
.pol-list > div{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.pol-list dt{font-size:13.5px;color:var(--ink-54);flex:0 0 auto}
.pol-list dd{margin:0;text-align:right;font-size:13.5px;color:var(--ink)}

.acc-label{color:var(--accent);margin-bottom:14px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:18px 0;font-size:15px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .35s ease}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa-body{padding:0 0 20px;max-width:var(--measure)}
.qa-body p{font-size:14px;color:var(--ink-72);line-height:1.92}

.voice-strip{margin-top:clamp(46px,6vw,88px);border-top:1px solid var(--line);padding-top:clamp(26px,3.4vw,44px)}
.vs-title{color:var(--accent);margin-bottom:20px}
.vs-note{color:var(--ink-38);letter-spacing:.02em;text-transform:none;font-family:var(--body);font-size:11px}
.voice-grid{display:grid;gap:clamp(20px,2.6vw,32px)}
@media(min-width:760px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.voice{padding:clamp(20px,2.4vw,28px);background:var(--surface);border-radius:4px}
.voice p{font-family:var(--serif);font-size:clamp(16px,1.8vw,20px);line-height:1.62;color:var(--ink)}
.voice cite{display:block;margin-top:14px;font-style:normal;color:var(--ink-38)}

/* ==========================================================================
   18. L11 예약 CTA + 오시는 길 + 푸터
   ========================================================================== */
.book-h{font-size:clamp(32px,5.4vw,78px);line-height:1.06;color:var(--sand);margin:12px 0 20px}
.book .sec-lead{max-width:var(--measure)}
.book-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,42px)}
.place-row{display:grid;gap:clamp(24px,3.4vw,52px)}
@media(min-width:820px){.place-row{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:start}}
.place-body address{font-style:normal;font-size:15px;line-height:2;color:rgba(246,241,232,.86);margin-top:8px}
.place-body .label{color:rgba(246,241,232,.6)}
.place-list{border-top:1px solid rgba(246,241,232,.28)}
.place-list li{padding:13px 0;border-bottom:1px solid rgba(246,241,232,.28);
  font-size:14px;color:rgba(246,241,232,.82);line-height:1.8}

.site-foot{border-top:1px solid rgba(246,241,232,.26);padding:clamp(40px,5vw,64px) 0 clamp(30px,4vw,50px)}
.foot-inner{display:grid;gap:clamp(22px,3vw,40px)}
@media(min-width:900px){.foot-inner{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.1fr)}}
.foot-brand .logo-txt{color:var(--sand)}
.foot-brand .label{color:rgba(246,241,232,.55);margin-top:6px}
.foot-info p{font-size:12.5px;color:rgba(246,241,232,.62);line-height:2}
.foot-note p{font-size:12px;color:rgba(246,241,232,.55);line-height:1.9;margin-bottom:8px}
.demo-badge{color:rgba(246,241,232,.86) !important}
.demo-badge b{color:var(--sand);font-weight:500}
.made-by{color:rgba(246,241,232,.4) !important;margin-top:12px}

/* ==========================================================================
   19. 모바일 하단 바
   ========================================================================== */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:130;display:grid;grid-template-columns:1fr 1fr;
  background:rgba(246,241,232,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mobile-bar a{padding:16px 8px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.mb-call{color:var(--ink)}
.mb-msg{background:var(--accent);color:#fff}
@media(min-width:760px){.mobile-bar{display:none}}
@media(max-width:759px){body{padding-bottom:54px}}

/* ==========================================================================
   20. 리빌 초기 상태
   ⚠ 함정 5 — 초기 숨김은 반드시 html.js-anim 하위에만.
     GSAP 로드 실패 시 클래스가 제거되면 전부 즉시 보인다.
     (기본 규칙에 opacity:0 을 걸면 클래스 제거로 되살릴 수 없다)
   ========================================================================== */
html.js-anim .rise,
html.js-anim .fade-up{opacity:0}
html.js-anim .anim-h,
html.js-anim .statement-h,
html.js-anim .hero-h1,
html.js-anim .tour-title{opacity:0}
html.js-anim .loaded .rise{}
.sp-line{overflow:hidden}

/* ==========================================================================
   21. 모바일 — ⚠ 함정 3: 겹침·핀 전부 해제, 핀 의존 요소를 CSS로 살린다
   ========================================================================== */
@media(max-width:1023px){
  html{scroll-behavior:smooth}   /* 전역 금지 → 모바일 미디어쿼리에만 (Lenis 미가동) */

  .layer{position:relative !important;top:auto;margin-top:0 !important;
    min-height:0;border-radius:0;box-shadow:none;overflow:visible;
    transform:none !important;filter:none !important}
  /* ⚠ 히어로만은 overflow:hidden 유지 — 패럴랙스 scale 확대분 유출 방지 */
  .hero,.bleed,.night,.tour-in{overflow:hidden !important}
  .layer-in{min-height:0}

  /* 시그니처: 핀·겹침 해제 → 장면 3개를 세로로 나열 */
  .hours{min-height:0;overflow:visible}
  .tour-in{position:relative;min-height:0;display:block}
  .tour-stage{position:relative;inset:auto;height:clamp(280px,52vw,420px)}
  .tscene{position:absolute;inset:0}
  .tour-scrim{background:linear-gradient(180deg,rgba(28,46,43,.34) 0%,rgba(28,46,43,.08) 40%,rgba(28,46,43,.72) 100%)}
  .tour-wrap{padding-top:clamp(34px,7vw,56px);padding-bottom:clamp(40px,8vw,64px);
    background:var(--deep)}
  .tour-caps{position:static;min-height:0;display:grid;gap:clamp(26px,5vw,40px)}
  .tcap{position:static;opacity:1 !important;visibility:visible !important;transform:none !important;
    padding-top:22px;border-top:1px solid rgba(246,241,232,.2)}
  .tcap:first-child{border-top:0;padding-top:0}
  .tour-axis{display:none}

  .room-fig img{aspect-ratio:4/3}
  .bleed{min-height:clamp(360px,64svh,520px)}
  .bleed-in-r{text-align:left;margin-left:0}
}

@media(max-width:719px){
  .head-inner{height:60px}
  .hero-foot{gap:10px}
  .hero-scroll{display:none}
  .room-spec > div,.pol-list > div,.night-list > div{flex-direction:column;gap:2px;align-items:flex-start}
  .room-spec dd,.pol-list dd,.night-list dd{text-align:left}
  .bleed-quote{font-size:clamp(23px,7vw,34px)}
}

/* ==========================================================================
   22. prefers-reduced-motion — 모션은 없애고 콘텐츠는 살린다
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  html.js-anim .rise,html.js-anim .fade-up,html.js-anim .anim-h,
  html.js-anim .statement-h,html.js-anim .hero-h1,html.js-anim .tour-title{opacity:1}
  .curtain{display:none}
  .tcap{position:relative;opacity:1;visibility:visible;transform:none;margin-bottom:26px}
  .tour-caps{position:static;min-height:0}
  .tscene{opacity:0}
  .tscene.is-on{opacity:1}
  .tscene img{transform:scale(1.02)}
  .ax-fill{height:100%}
  .hero-scroll i::after{animation:none}
}

/* ==========================================================================
   23. print
   ========================================================================== */
@media print{
  .site-head,.mobile-bar,.curtain,.hero-media,.bleed-media,.night-media,.tour-stage{display:none !important}
  .layer{position:static !important;margin:0 !important;color:#000 !important;background:#fff !important}
  .tcap{position:static;opacity:1;visibility:visible}
}