@charset "utf-8";
/* ==========================================================================
   소반한상 — P7 먹과 한지 / 아키타입 A: 스티키 사이드바 2단
   좌측 36%(.rail)가 sticky. 세로쓰기 코스명이 세로로 나열되고 현재 항목에 낙관.
   우측 64%(.feed)만 스크롤된다.
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일에서만
   ⚠ 주홍(#B5432E)은 낙관과 CTA에만. 극소량.
   ★ 세로쓰기(writing-mode:vertical-rl)는 장식이 아니라 주역이다.
   ========================================================================== */

:root{
  --hanji:#F7F4EE;
  --stone:#E5E0D5;
  --meok:#1C1B18;
  --meok-2:#12110F;
  --accent:#B5432E;
  --accent-dk:#8F3423;

  --ink-72:rgba(28,27,24,.72);
  --ink-52:rgba(28,27,24,.52);
  --line:rgba(28,27,24,.14);
  --line-lt:rgba(247,244,238,.14);

  --serif:'Noto Serif KR',serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  --wrap:1280px;
  --gut:clamp(20px,4vw,48px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--hanji);color:var(--meok);
  font-size:16px;line-height:1.75;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:820px}
.mono{font-family:var(--mono)}
.pc-br{display:none}
@media(min-width:768px){.pc-br{display:inline}}

/* 사진 통일 — 수묵톤. 음식 클로즈업만 원채도에 가깝게 */
.hero-media img,.room-media img,.reserve-media img,.place-fig img,.detail-fig img{
  filter:saturate(.6) contrast(1.02);
}
.course-fig img{filter:saturate(.86) contrast(1.03)}

/* ==========================================================================
   ★ 세로쓰기 시스템 — 이 페이지의 주역
   ========================================================================== */
.vwrite{
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:var(--serif);font-weight:300;
  letter-spacing:.06em;   /* 세로쓰기는 자간을 벌려야 읽힌다 */
  line-height:1.24;       /* 세로쓰기에서 line-height는 '열 간격' */
}
.vwrite .vline{display:block}

/* MorphSVG 목표 도형은 화면에 그리지 않는다 */
.seal-src{display:none}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:200;background:var(--hanji);display:grid;place-items:center}
.curtain-inner{display:flex;align-items:center;gap:22px}
.curtain-stroke{width:4px;height:min(200px,32vh);display:block}
.curtain-txt{
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.42em;
  color:var(--ink-52);opacity:0;
}

/* ---------- 타이포 ---------- */
.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,5vw,64px);line-height:1.2;letter-spacing:-.03em;
}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;color:var(--accent);font-weight:500}
.sec-lead{margin-top:20px;color:var(--ink-72);font-size:clamp(14.5px,1.6vw,17px);max-width:58ch}
.sec-lead.note{font-size:12.5px;color:var(--ink-52)}
.sec{padding:clamp(90px,13vw,190px) 0}
.sec-head{margin-bottom:clamp(40px,6vw,80px)}
.sec-head .h2{margin-top:16px}

/* ---------- 낙관 (전각 도장) ---------- */
.seal{
  display:inline-grid;place-items:center;width:34px;height:34px;flex-shrink:0;
  background:var(--accent);color:#fff;
  font-family:var(--serif);font-weight:500;font-size:17px;line-height:1;
  border-radius:2px;letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:2px;font-size:14.5px;font-weight:600;
  transition:background .25s,color .25s,border-color .25s;will-change:transform;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-line{border:1px solid rgba(255,255,255,.42);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.place-body .btn-line{border-color:var(--line);color:var(--meok)}
.place-body .btn-line:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-naver{background:#03C75A;color:#fff}
.btn-naver:hover{background:#02A64B}
.btn-mini{padding:11px 19px;font-size:13px;background:var(--accent);color:#fff}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.site-head.is-stuck{background:rgba(247,244,238,.92);border-bottom-color:var(--line);
  backdrop-filter:saturate(1.3) blur(10px)}
.head-inner{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;transition:color .4s}
.site-head.is-stuck .logo{color:var(--meok)}
.logo-seal{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;
  background:var(--accent);color:#fff;font-family:var(--serif);font-size:14px;
  font-weight:500;line-height:1;border-radius:2px}
.logo-txt{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-.01em}
.gnb{display:none;gap:30px;margin-left:auto;font-size:13.5px;color:rgba(255,255,255,.82);transition:color .4s}
.site-head.is-stuck .gnb{color:var(--ink-72)}
@media(min-width:900px){.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 .3s}
.gnb a:hover::after{right:0}
@media(max-width:899px){.btn-mini{margin-left:auto}}

/* ---------- 01 히어로 ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(36px,6vw,80px);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;will-change:transform}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(260deg,rgba(12,11,9,.84) 0%,rgba(12,11,9,.58) 32%,rgba(12,11,9,.14) 62%,rgba(12,11,9,.40) 100%),
    linear-gradient(180deg,rgba(12,11,9,.52) 0%,rgba(12,11,9,.10) 38%,rgba(12,11,9,.78) 100%);
}
.hero-inner{position:relative;z-index:2;color:#fff;width:100%;
  display:grid;gap:clamp(28px,4vw,52px);align-items:end;
  padding-bottom:clamp(24px,4vw,44px)}
@media(min-width:900px){
  .hero-inner{grid-template-columns:7fr 5fr;align-items:end}
  .hero-side{order:1}
  .hero-h1{order:2;justify-self:end}
}
/* ★ 히어로 세로쓰기 헤드라인 — 화면을 압도해야 한다
   ⚠ 세로쓰기에서 height 를 고정하면 글자가 잘린다. */
.hero-h1{
  color:#fff;
  font-size:clamp(38px,min(7.4vw,9.6vh),104px);
  height:5.7em;
  letter-spacing:.04em;
  text-shadow:0 2px 44px rgba(12,11,9,.42);
}
.hero-h1 .vline{overflow:hidden}
.eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.28em;color:#E8C9BE;margin-bottom:24px}
.eyebrow .rule{display:block;width:52px;height:1px;background:var(--accent)}
.hero-lead{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.85);max-width:44ch;line-height:1.8}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);margin-top:26px}
.hero-facts li{display:flex;flex-direction:column;gap:5px;
  border-top:1px solid rgba(255,255,255,.26);padding-top:11px;min-width:88px}
.hero-facts b{font-size:15px;font-weight:500;letter-spacing:.02em;color:#fff}
.hero-facts span{font-size:12px;color:rgba(255,255,255,.62)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  color:rgba(255,255,255,.52);font-size:10.5px;letter-spacing:.2em;
  border-top:1px solid rgba(255,255,255,.18);padding-top:16px;width:100%}
.hero-scroll{display:flex;align-items:center;gap:10px}
.hero-scroll i{display:block;width:34px;height:1px;background:rgba(255,255,255,.36);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:sweep 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ==========================================================================
   ★ 아키타입 A — 스티키 사이드바 2단
   ========================================================================== */
.split{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  background:var(--hanji);
}
@media(min-width:1024px){
  .split{display:grid;grid-template-columns:36fr 64fr;gap:clamp(32px,4.4vw,72px);align-items:start}
}

/* ---------- 좌측 고정 레일 ---------- */
.rail{display:none}
@media(min-width:1024px){
  .rail{
    display:block;position:sticky;top:0;height:100svh;
    padding:clamp(90px,10vw,120px) 0 clamp(40px,5vw,64px);
  }
  .rail-in{
    height:100%;display:flex;flex-direction:column;
    border-right:1px solid var(--line);padding-right:clamp(20px,2.4vw,36px);
  }
}
.rail-label{font-size:9.5px;letter-spacing:.42em;color:var(--ink-52);margin-bottom:auto}

/* ★ 세로쓰기 코스 인덱스 — 세로로 나열된다 */
.rail-list{
  list-style:none;display:flex;flex-direction:row-reverse;justify-content:flex-end;
  align-items:flex-start;gap:clamp(14px,1.8vw,26px);
  margin:clamp(24px,3vw,40px) 0;
}
.rail-item{
  position:relative;
  opacity:.28;transition:opacity .5s cubic-bezier(.16,1,.3,1);
}
.rail-item.is-on{opacity:1}
.rail-name{
  font-size:clamp(22px,2.5vw,34px);font-weight:400;color:var(--meok);
  letter-spacing:.1em;display:block;
  padding-top:14px;border-top:1px solid transparent;transition:border-color .5s;
}
.rail-item.is-on .rail-name{border-top-color:var(--accent)}

/* ★ MorphSVG 낙관 — 현재 코스에 도장이 찍힌다 */
.rail-seal{
  position:relative;width:46px;height:46px;margin-bottom:16px;
  display:grid;place-items:center;
}
.rail-seal svg{position:absolute;inset:0;width:46px;height:46px}
.rail-seal-tx{
  position:relative;z-index:2;color:#fff;
  font-family:var(--serif);font-weight:500;font-size:20px;line-height:1;
}
.rail-cap{font-size:12.5px;color:var(--ink-52);letter-spacing:.04em;margin-bottom:18px}
.rail-bar{height:1px;background:var(--line);position:relative}
.rail-bar span{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- 우측 스크롤 피드 ---------- */
.feed{min-width:0}
.chap{padding:clamp(80px,10vw,150px) 0;position:relative}
.chap:first-child{padding-top:clamp(90px,11vw,170px)}

/* ---------- 02 선언 ---------- */
.st-label{display:block;margin-bottom:clamp(24px,3.4vw,42px)}
.statement-h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,7.4vw,104px);line-height:1.04;letter-spacing:-.045em;
}
.st-line{display:block}
.statement-sub{display:grid;gap:20px;max-width:52ch;margin-top:clamp(30px,4vw,54px)}
.statement-sub p{font-size:clamp(14.5px,1.7vw,17.5px);color:var(--ink-72);line-height:1.9}
.st-seal{display:flex;align-items:flex-start;gap:14px;padding-top:20px;
  border-top:1px solid var(--line);color:var(--ink-52) !important;font-size:14px !important}

/* ==========================================================================
   ★ 시그니처 — 코스 두루마리 (Draggable + Inertia 로 손으로 펼친다)
   ========================================================================== */
.course-head{margin-bottom:clamp(28px,3.6vw,48px)}
.course-head .h2{margin-top:16px}
.course-head b{color:var(--accent);font-weight:600}

.roll-viewport{
  overflow:hidden;position:relative;
  /* ⚠ 함정 8: 세로 스크롤을 절대 막지 않는다 */
  touch-action:pan-y;
  cursor:grab;
}
.roll-viewport.is-drag{cursor:grabbing}
.roll-track{display:flex;gap:clamp(16px,2.2vw,30px);align-items:stretch;will-change:transform}

/* 코스 카드 */
.course{
  flex:0 0 clamp(260px,74vw,380px);
  background:var(--meok-2);border:1px solid var(--line-lt);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.course-fig{overflow:hidden;position:relative}
.course-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.course:hover .course-fig img{transform:scale(1.05)}
.course-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,15,.1) 0%,rgba(18,17,15,.62) 100%)}

.course-body{display:flex;gap:clamp(14px,2vw,22px);padding:clamp(20px,2.6vw,30px);flex:1}
/* ★ 코스 이름 = 세로쓰기. 카드에서 가장 큰 활자 */
.course-name{
  font-size:clamp(24px,3.2vw,38px);font-weight:400;color:var(--hanji);
  align-self:flex-start;letter-spacing:.1em;
  padding-left:14px;border-left:1px solid var(--accent);
}
.course-txt{display:flex;flex-direction:column;gap:12px;flex:1;padding-top:4px}
.course-no{font-size:10.5px;letter-spacing:.28em;color:#D98A76}
.course-txt p{font-size:13.5px;color:rgba(247,244,238,.62);line-height:1.85}
.course-txt .seal{margin-top:auto;align-self:flex-start}

/* 진행 인디케이터 */
.roll-foot{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);
  margin-top:clamp(22px,3vw,36px)}
.roll-idx{font-size:11px;letter-spacing:.2em;color:var(--ink-52);
  display:flex;gap:7px;align-items:baseline;flex-shrink:0}
.roll-idx b{font-size:20px;font-weight:500;color:var(--meok)}
.roll-progress{flex:1;height:1px;background:var(--line);position:relative}
.roll-progress span{display:block;height:100%;width:0;background:var(--accent)}
.roll-hint{font-size:10px;letter-spacing:.28em;color:var(--ink-52);flex-shrink:0}

/* ---------- ★ MotionPath 상차림 순서 ---------- */
.flow-wrap{position:relative}
.flow-svg{display:none}
@media(min-width:1024px){
  .flow-svg{display:block;width:100%;height:200px;overflow:visible;margin-bottom:-40px}
}
.flow-steps{list-style:none;display:grid;gap:clamp(18px,2.4vw,24px)}
@media(min-width:700px){.flow-steps{grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px)}}
.fstep{border-top:1px solid var(--line);padding-top:18px;transition:border-color .45s}
.fstep.is-on{border-top-color:var(--accent)}
.fno{display:block;font-size:10.5px;letter-spacing:.28em;color:var(--ink-52);transition:color .45s}
.fstep.is-on .fno{color:var(--accent)}
.fstep h3{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2.1vw,24px);
  margin:10px 0 8px;letter-spacing:-.02em}
.fstep p{font-size:13px;color:var(--ink-72);line-height:1.8}

/* ---------- 상차림 ---------- */
.sang-grid{display:grid;gap:clamp(20px,2.6vw,32px)}
@media(min-width:820px){.sang-grid{grid-template-columns:1fr 1fr;align-items:stretch}}
.sang-card{background:#fff;border:1px solid var(--line);
  padding:clamp(24px,3vw,38px);display:flex;flex-direction:column}
.sang-card.is-feature{background:var(--stone);border-color:rgba(28,27,24,.2)}
.sang-top{display:flex;gap:clamp(16px,2.2vw,26px);margin-bottom:clamp(20px,2.6vw,30px)}
/* ★ 상차림 이름 = 세로쓰기 (2열) */
.sang-name{font-size:clamp(22px,2.8vw,32px);font-weight:400;color:var(--meok);
  align-self:flex-start;letter-spacing:.1em;line-height:1.5;
  height:4.6em;
  padding-left:13px;border-left:1px solid var(--accent);flex-shrink:0}
.sang-meta{flex:1;padding-top:4px}
.sang-no{display:block;font-size:10.5px;letter-spacing:.28em;color:var(--accent);margin-bottom:12px}
.sang-desc{font-size:14px;color:var(--ink-72);line-height:1.85}
.sang-list{list-style:none;display:grid;gap:11px;margin-bottom:clamp(20px,2.6vw,28px)}
.sang-list li{position:relative;padding-left:19px;font-size:13.5px;color:var(--ink-72)}
.sang-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--accent)}
.sang-list b{font-weight:600;color:var(--meok)}
.sang-price{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);padding-top:18px}
.sang-price dt{font-size:12.5px;color:var(--ink-52);letter-spacing:.1em}
.sang-price dd{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);font-weight:400;letter-spacing:-.02em}
.sang-notes{display:grid;gap:12px;margin-top:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--line);padding-top:clamp(22px,2.6vw,30px)}
.sang-notes p{font-size:13.5px;color:var(--ink-72);line-height:1.85}
.sang-notes b{color:var(--meok);font-weight:600;margin-right:8px}
.price-note{margin-top:22px;font-size:11px;letter-spacing:.06em;color:var(--ink-52)}

/* ---------- 개별 룸 / 그릇 (★줌 트랜지션) ---------- */
.zoomer{overflow:hidden;position:relative}
.zoomer img{width:100%;object-fit:cover;will-change:transform}
.chap-room .room-media{aspect-ratio:3/2}
.chap-room .room-media img{height:100%}
.room-cap{margin-top:clamp(24px,3vw,38px)}
.room-cap .h2{margin-top:16px}

.detail-fig{margin-bottom:clamp(24px,3vw,38px)}
.detail-fig img{aspect-ratio:4/3}
@media(min-width:820px){
  .detail{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,3.4vw,52px);align-items:center}
  .detail-fig{margin-bottom:0}
  .detail-fig img{aspect-ratio:1/1}
}
.detail-body .h2{margin-top:16px}
.detail-list{list-style:none;display:grid;gap:10px;margin-top:26px}
.detail-list li{position:relative;padding-left:19px;font-size:14px;color:var(--ink-72)}
.detail-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--accent)}

/* ---------- 예약 안내 ---------- */
.guide-list{list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.guide-list{grid-template-columns:repeat(2,1fr)}}
.gitem{background:var(--hanji);padding:clamp(22px,2.8vw,34px)}
.gno{display:block;font-size:10.5px;letter-spacing:.28em;color:var(--accent);margin-bottom:16px}
.gitem h3{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2.1vw,24px);
  letter-spacing:-.02em;margin-bottom:12px}
.gitem p{font-size:13.5px;color:var(--ink-72);line-height:1.85}

/* ---------- 후기 ---------- */
.voice-grid{display:grid;gap:clamp(20px,2.6vw,32px)}
@media(min-width:760px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.voice{border-top:1px solid var(--line);padding-top:24px}
.voice p{font-family:var(--serif);font-size:clamp(15px,1.8vw,18px);line-height:1.8;
  font-weight:300;letter-spacing:-.015em}
.voice cite{display:block;margin-top:20px;font-size:11px;color:var(--ink-52);
  font-style:normal;letter-spacing:.14em}

/* ---------- FAQ ---------- */
.acc{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(15px,1.7vw,17.5px);font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.qa-body{padding:0 0 26px}
.qa-body p{font-size:14px;color:var(--ink-72);max-width:64ch;line-height:1.85}

/* ---------- 최종 CTA ---------- */
.reserve{position:relative;overflow:hidden;background:var(--meok);color:var(--hanji);
  padding:clamp(90px,13vw,180px) 0;text-align:center}
.reserve-media{position:absolute;inset:-8% 0;z-index:0}
.reserve-media img{width:100%;height:100%;object-fit:cover;opacity:.22;will-change:transform}
.reserve::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 45%,rgba(18,17,15,.5) 0%,rgba(18,17,15,.94) 74%)}
.reserve-inner{position:relative;z-index:2}
.reserve .label{color:#D98A76}
.reserve-h{font-family:var(--serif);font-weight:300;margin:18px 0 0;
  font-size:clamp(28px,5.4vw,68px);line-height:1.16;letter-spacing:-.035em}
.reserve .sec-lead{color:rgba(247,244,238,.66);margin:22px auto 0}
.hours{display:grid;gap:1px;background:rgba(247,244,238,.14);
  border:1px solid rgba(247,244,238,.14);margin:clamp(34px,4.6vw,54px) 0;text-align:left}
@media(min-width:640px){.hours{grid-template-columns:1fr 1fr}}
.hours>div{background:var(--meok);padding:17px 22px;display:flex;
  justify-content:space-between;gap:12px;font-size:14px}
.hours dt{color:rgba(247,244,238,.55)}
.hours dd{font-weight:600;letter-spacing:.02em}
.reserve-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mini-note{margin-top:22px;font-size:12.5px;color:rgba(247,244,238,.46)}

/* ---------- 오시는 길 ---------- */
.place{background:var(--hanji)}
.place-grid{display:grid;gap:clamp(30px,4.4vw,64px);align-items:center}
@media(min-width:900px){.place-grid{grid-template-columns:6fr 5fr}}
.place-fig{overflow:hidden}
.place-fig img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:2px}
.place-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;
  font-size:10px;color:var(--ink-52);border-top:1px solid var(--line);
  padding-top:10px;letter-spacing:.14em}
.place-body .h2{margin:16px 0 20px}
.place-body address{font-style:normal;color:var(--ink-72);font-size:15px;line-height:1.95}
.place-list{list-style:none;margin:24px 0 30px;display:grid;gap:10px}
.place-list li{position:relative;padding-left:19px;font-size:14px;color:var(--ink-72)}
.place-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--accent)}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--meok-2);color:rgba(247,244,238,.66);
  padding:clamp(56px,7vw,90px) 0 120px;border-top:1px solid rgba(247,244,238,.1)}
.foot-inner{display:grid;gap:30px}
@media(min-width:900px){.foot-inner{grid-template-columns:1fr 1fr;align-items:start}}
.foot-brand .logo-txt{color:var(--hanji);font-size:22px}
.foot-brand .mono{font-size:10px;letter-spacing:.22em;color:rgba(247,244,238,.4);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.95}
.foot-note{grid-column:1/-1;border-top:1px solid rgba(247,244,238,.12);
  padding-top:26px;display:grid;gap:11px}
.foot-note p{font-size:12px;color:rgba(247,244,238,.46);line-height:1.8}
.demo-badge{display:inline-block;border:1px solid var(--accent);color:#D98A76 !important;
  padding:9px 16px;font-size:12.5px !important}
.demo-badge b{color:#fff}
.made-by{letter-spacing:.2em;font-size:10px !important;color:rgba(247,244,238,.3) !important}

/* ---------- 모바일 고정 CTA ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:1px;position:fixed;
    left:0;right:0;bottom:0;z-index:95;background:rgba(28,27,24,.16)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:600}
  .mb-call{background:var(--accent);color:#fff}
  .mb-naver{background:#03C75A;color:#fff}
  .site-foot{padding-bottom:130px}
  .head-inner{height:62px}
}

/* ---------- 애니메이션 초기 상태 (js-anim 하위에만) ---------- */
html.js-anim .fade-up{opacity:0}
html.js-anim .course{opacity:0}
html.js-anim .sang-card{opacity:0}
html.js-anim .gitem{opacity:0}
html.js-anim .voice{opacity:0}
html.js-anim .qa{opacity:0}
html.js-anim .fstep{opacity:0}
html.js-anim .hours>div{opacity:0}
html.js-anim .place-list li{opacity:0}
html.js-anim .detail-list li{opacity:0}
html.js-anim .hero-facts li{opacity:0}
html.js-anim #curtainPath{visibility:hidden}
html.js-anim #flowLit{visibility:hidden}
html.js-anim #flowDot{opacity:0}

@media(max-width:1023px){html{scroll-behavior:smooth}}

/* ---------- 접근성 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reserve :focus-visible,.chap-room :focus-visible,
.site-foot :focus-visible,.hero :focus-visible{outline-color:#D98A76}

/* ==========================================================================
   ⚠ 함정 4 — 모바일·태블릿(<1024px): sticky 해제, 좌측 내용은 섹션 헤더로
   ========================================================================== */
@media(max-width:1023px){
  .split{display:block;padding-left:var(--gut);padding-right:var(--gut)}
  .rail{display:none}
  .chap{padding:clamp(64px,10vw,96px) 0}

  /* 레일이 사라지므로 각 장의 코스명을 섹션 헤더로 되살린다 (함정 4) */
  .chap[data-cap]::before{
    content:attr(data-cap);
    display:block;font-family:var(--mono);font-size:10px;letter-spacing:.32em;
    color:var(--ink-52);padding-bottom:14px;margin-bottom:clamp(22px,4vw,32px);
    border-bottom:1px solid var(--line);
  }

  /* 두루마리는 손으로 밀 수 있게 (네이티브 가로 스크롤)
     ⚠ 여기서는 Draggable을 걸지 않으므로 touch-action을 풀어 준다.
        pan-y 로 두면 가로 스와이프가 막혀 2번 이후 코스에 손이 닿지 않는다. */
  .roll-viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;cursor:auto;
    touch-action:pan-x pan-y}
  .roll-viewport::-webkit-scrollbar{display:none}
  .course{scroll-snap-align:start}
  .roll-track{transform:none !important}
  .roll-progress{display:none}
}

/* 모바일에서 세로쓰기 헤드라인이 화면을 넘지 않도록 */
@media(max-width:899px){
  .hero-h1{font-size:clamp(34px,min(10vw,7.4vh),68px)}
  .hero-inner{justify-items:start}
}
@media(max-width:520px){
  .course-body{flex-direction:row}
  .course-name{font-size:clamp(24px,7vw,32px)}
  .sang-top{flex-direction:row}
}

/* ---------- reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html.js-anim .fade-up,html.js-anim .course,html.js-anim .sang-card,
  html.js-anim .gitem,html.js-anim .voice,html.js-anim .qa,html.js-anim .fstep,
  html.js-anim .hours>div,html.js-anim .place-list li,
  html.js-anim .detail-list li,html.js-anim .hero-facts li{opacity:1 !important}
  html.js-anim #curtainPath{visibility:visible}
  html.js-anim #flowLit{visibility:visible}
  html.js-anim #flowDot{opacity:1}
  .curtain{display:none}
  .hero-scroll i::after{animation:none}
  .roll-viewport{overflow-x:auto}
  .roll-track{transform:none !important}
  .roll-progress{display:none}
  .rail-item{opacity:1}
}