@charset "utf-8";
/* ==========================================================================
   그릿박스 — P5 키네틱 볼드 / 액센트: 볼트 옐로
   ★ 아키타입 C: 가로 스크롤 주도형 (containerAnimation + Draggable/Inertia)
   명세서: AIPM v2.5 / 프리셋 P5 / 히어로 A안
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일에서만
   ⚠ 애시드 그린 단일 액센트 금지 → 볼트 옐로 #F2E31B + 카본
   ⚠ 모바일에서 가로 핀 전면 해제. 세로 스크롤을 절대 막지 않는다.
   ========================================================================== */

:root{
  --carbon:#121212;
  --carbon-2:#1F1F1F;
  --carbon-3:#0A0A0A;
  --paper:#F4F4F2;
  --volt:#F2E31B;
  --volt-dk:#D9CA0F;
  --line:rgba(244,244,242,.14);
  --line-dk:rgba(18,18,18,.14);

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

  --wrap:1340px;
  --gut:clamp(20px,4vw,52px);
  --pad:clamp(90px,13vw,190px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--carbon);color:var(--paper);
  font-size:16px;line-height:1.7;word-break:keep-all;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--volt)}
::selection{background:var(--volt);color:var(--carbon)}

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

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 사진 톤 통일 — 명세서 §03 */
.hero-media img,.citem figure img,.space-media img,.visit-fig img,.rec-bg img,
.coitem figure img{
  filter:contrast(1.15) saturate(1.05);
}
/* 듀오톤 — 카본×볼트 */
.rec-bg img{filter:contrast(1.3) saturate(0) brightness(.62)}
.visit-fig img{filter:contrast(1.18) saturate(.35)}
.coitem figure img{filter:contrast(1.25) saturate(.18) brightness(.78)}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:200;background:var(--carbon);display:grid;place-items:center}
.curtain-word{
  font-family:var(--display);font-size:clamp(54px,14vw,170px);line-height:1;
  letter-spacing:.01em;color:var(--paper);text-align:center;
}
.curtain-bar{width:min(240px,50vw);height:3px;background:rgba(244,244,242,.16);margin:24px auto 0}
.curtain-bar span{display:block;height:100%;width:0;background:var(--volt)}

/* ---------- 타이포 ---------- */
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(32px,6.2vw,86px);line-height:1.0;letter-spacing:.01em;
}
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;color:var(--volt);font-weight:600}
.sec-lead{margin-top:20px;color:rgba(244,244,242,.6);font-size:clamp(14.5px,1.6vw,17px);max-width:56ch}
.sec-head{margin-bottom:clamp(40px,6vw,78px)}
.sec-head .h2{margin-top:14px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:2px;font-size:14.5px;font-weight:800;
  letter-spacing:.01em;transition:background .2s,color .2s,border-color .2s;will-change:transform;
}
.btn-primary{background:var(--volt);color:var(--carbon)}
.btn-primary:hover{background:var(--volt-dk)}
.btn-ghost{border:2px solid rgba(244,244,242,.3);color:var(--paper)}
.btn-ghost:hover{border-color:var(--volt);color:var(--volt)}
.btn-naver{background:#03C75A;color:#fff}
.btn-naver:hover{background:#02A64B}
.btn-mini{padding:11px 18px;font-size:12.5px;background:var(--volt);color:var(--carbon)}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.site-head.is-stuck{background:rgba(18,18,18,.92);border-bottom-color:var(--line);backdrop-filter:blur(8px)}
.head-inner{display:flex;align-items:center;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:9px}
.logo-badge{width:26px;height:26px;background:var(--volt);color:var(--carbon);
  display:grid;place-items:center;flex-shrink:0}
.logo-txt{font-family:var(--display);font-size:18px;letter-spacing:.06em}
.gnb{display:none;gap:26px;margin-left:auto;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;color:rgba(244,244,242,.62)}
@media(min-width:960px){.gnb{display:flex}}
.gnb a:hover{color:var(--volt)}
@media(max-width:959px){.btn-mini{margin-left:auto}}

/* ---------- 01 히어로 — 풀블리드 + 2중 스크림 ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:130px 0 34px;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(180deg,rgba(18,18,18,.86) 0%,rgba(18,18,18,.30) 34%,rgba(18,18,18,.90) 82%,var(--carbon) 100%),
    linear-gradient(96deg,rgba(18,18,18,.90) 0%,rgba(18,18,18,.42) 46%,rgba(18,18,18,.14) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%}
.kicker{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;
  color:var(--volt);margin-bottom:26px;font-weight:600}
.kicker .dot{width:7px;height:7px;background:var(--volt);flex-shrink:0}
.hero-h1{font-family:var(--display);font-weight:400;
  font-size:clamp(44px,10.5vw,142px);line-height:.94;letter-spacing:.01em}
.hero-h1 .hl{display:block;overflow:hidden}
.hero-h1 .accent{color:var(--volt)}
.hero-lead{margin-top:28px;font-size:clamp(15px,1.8vw,18.5px);color:rgba(244,244,242,.74);max-width:46ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  margin-top:clamp(34px,5vw,64px);padding-top:16px;border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.22em;color:rgba(244,244,242,.5);width:100%}
.scroll-tag{display:flex;align-items:center;gap:10px}
.scroll-tag i{display:block;width:36px;height:2px;background:rgba(244,244,242,.25);position:relative;overflow:hidden}
.scroll-tag i::after{content:"";position:absolute;inset:0;background:var(--volt);
  animation:sweep 1.9s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- 02 선언 — 페이지 최대 타이포 ---------- */
.statement{background:var(--paper);color:var(--carbon);padding:var(--pad) 0}
.statement .label{color:#8A7F00}
.statement-h{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,9.5vw,140px);line-height:.92;letter-spacing:.01em;margin-top:20px}
.statement-h .st-line{display:block;overflow:hidden}
.statement-sub{margin-top:clamp(32px,4.6vw,56px);display:grid;gap:18px;max-width:62ch;
  padding-top:26px;border-top:2px solid var(--carbon)}
.statement-sub p{font-size:clamp(15px,1.7vw,17.5px);color:rgba(18,18,18,.72)}
.statement-sub em{color:var(--carbon);font-weight:700;
  background:linear-gradient(180deg,transparent 62%,var(--volt) 62%)}

/* ---------- 03 ★ 시그니처 — 기록 숫자 스케일 (유지) ---------- */
.record{background:var(--carbon-3);position:relative}
.record-stage{position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;padding:clamp(96px,11vw,132px) 0 clamp(60px,7vw,86px)}

.rec-bgs{position:absolute;inset:0;z-index:0}
.rec-bg{position:absolute;inset:0;opacity:0}
.rec-bg.is-on{opacity:1}
.rec-bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.rec-bgs::after{content:"";position:absolute;inset:0;
  background:radial-gradient(75% 65% at 50% 50%,rgba(10,10,10,.58) 0%,rgba(10,10,10,.92) 72%)}

.rec-head{position:relative;z-index:3;text-align:center}
.rec-title{font-family:var(--display);font-size:clamp(26px,4vw,52px);
  line-height:1;margin-top:12px;letter-spacing:.06em;color:rgba(244,244,242,.9)}

/* 초대형 숫자 — 뷰포트를 뚫는다 */
.rec-nums{position:absolute;inset:0 0 clamp(120px,15vh,180px) 0;z-index:2;
  display:grid;place-items:center;pointer-events:none}
.rec-num{position:absolute;transform-origin:50% 50%;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;will-change:transform,opacity}
.rec-num.is-on{opacity:1}
.rn-fig{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(150px,34vw,460px);line-height:.8;letter-spacing:-.01em;
  color:var(--volt);font-variant-numeric:tabular-nums;
}
.rn-unit{display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(13px,1.7vw,22px);letter-spacing:.42em;
  color:rgba(244,244,242,.82);margin-top:clamp(6px,1vw,14px);text-indent:.42em}

/* ★ Physics2D 스파크 파편 레이어 */
.rec-spark{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.spk{position:absolute;top:0;left:0;width:7px;height:7px;background:var(--volt);
  will-change:transform,opacity}
.spk.spk-b{width:3px;height:14px;background:var(--paper)}
.spk.spk-c{width:11px;height:2px;background:var(--volt-dk)}

/* 기록 캡션 — 좌하단 고정 컬럼 */
.rec-caps{position:relative;z-index:3;margin-top:auto;
  min-height:clamp(190px,24vh,240px);width:100%}
.rec-cap{position:absolute;left:var(--gut);bottom:0;
  width:min(40ch,44vw);opacity:0;
  text-shadow:0 2px 18px rgba(10,10,10,.9)}
.rec-cap.is-on{opacity:1}
.rc-idx{font-size:11px;letter-spacing:.24em;color:var(--volt);margin-bottom:12px}
.rc-idx b{font-weight:600}
.rc-idx span{color:rgba(244,244,242,.4)}
.rec-cap h3{font-family:var(--display);font-weight:400;
  font-size:clamp(21px,3.2vw,38px);line-height:1.08;letter-spacing:.01em}
.rc-p{margin-top:14px;font-size:14.5px;color:rgba(244,244,242,.66)}

/* 좌우 마퀴 — 스크롤 속도 반응 */
.rec-mq{position:absolute;left:0;right:0;bottom:clamp(58px,7vh,86px);z-index:1;
  overflow:hidden;opacity:.14;pointer-events:none}
.rec-mq-row{display:flex;align-items:center;gap:34px;white-space:nowrap;will-change:transform}
.rec-mq-row span{font-family:var(--display);font-size:clamp(38px,7vw,96px);
  color:var(--paper);letter-spacing:.02em}
.rec-mq-row b{color:var(--volt);font-size:clamp(24px,4vw,60px)}

.rec-progress{position:absolute;left:50%;bottom:clamp(26px,3.4vh,42px);transform:translateX(-50%);
  z-index:3;width:min(220px,52vw);height:2px;background:rgba(244,244,242,.18)}
.rec-progress span{display:block;height:100%;width:0;background:var(--volt)}

/* ==========================================================================
   ★ 아키타입 C — 가로 트랙
   ========================================================================== */

/* ---- 진입 힌트 ---- */
.hx-intro{background:var(--carbon);padding:clamp(70px,10vw,120px) 0 clamp(50px,7vw,80px);
  border-top:1px solid var(--line)}
.hx-intro-h{margin-top:18px;font-family:var(--display);font-weight:400;
  font-size:clamp(24px,4.4vw,56px);line-height:1.12;letter-spacing:.01em}
.hx-intro-h em{color:var(--volt)}
.hx-hand{display:block;margin-top:14px;font-family:var(--mono);font-weight:600;
  font-size:clamp(11px,1.4vw,13px);letter-spacing:.24em;color:rgba(244,244,242,.45)}
.hx-arrow{display:flex;gap:14px;margin-top:clamp(26px,4vw,40px)}
.hxa{font-family:var(--display);font-size:clamp(30px,5.5vw,64px);line-height:1;
  color:var(--volt);opacity:.28}
.hx-arrow-down{justify-content:center;margin-top:0}

/* ---- 이탈 안내 ---- */
.hx-outro{background:var(--carbon);padding:clamp(50px,7vw,84px) 0 clamp(30px,4vw,50px)}
.hx-outro-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.hx-outro .label{letter-spacing:.3em;color:rgba(244,244,242,.4)}

/* ---- 가로 뷰포트 / 트랙 ---- */
.hx{background:var(--carbon);position:relative}
.hx-viewport{position:relative;overflow:hidden}
.hx-track{display:flex;align-items:stretch;will-change:transform}

/* 패널 공통 */
.hxp{flex:0 0 auto;position:relative;
  border-right:1px solid var(--line);background:var(--carbon)}
.hxp-inner{height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(60px,7vw,96px) clamp(24px,4vw,64px)}
.hxp-head{margin-bottom:clamp(28px,3.6vw,48px);flex:0 0 auto}
.hxp-h{font-family:var(--display);font-weight:400;
  font-size:clamp(28px,4.4vw,64px);line-height:1.02;letter-spacing:.01em;margin-top:14px}
.hxp-lead{margin-top:16px;color:rgba(244,244,242,.6);
  font-size:clamp(14px,1.5vw,16.5px);max-width:54ch}

/* 패널: 클래스 */
.hxp-class{background:var(--carbon)}
.class-rail{display:flex;gap:clamp(18px,2vw,28px);align-items:stretch}
.citem{flex:0 0 clamp(260px,26vw,360px);border:1px solid var(--line);
  display:flex;flex-direction:column;background:var(--carbon-2)}
.citem figure{overflow:hidden;border-bottom:1px solid var(--line)}
.citem figure img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.citem:hover figure img{transform:scale(1.06)}
.cbody{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.cno{font-size:11px;letter-spacing:.2em;color:var(--volt);font-weight:600}
.citem h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,27px);
  margin:10px 0 12px;letter-spacing:.01em;line-height:1.08}
.citem p{font-size:13.5px;color:rgba(244,244,242,.62)}
.cmeta{list-style:none;margin-top:auto;padding-top:18px;display:grid;gap:9px;
  border-top:1px solid var(--line)}
.cmeta li{position:relative;padding-left:18px;font-size:12.5px;color:rgba(244,244,242,.72)}
.cmeta li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--volt)}

/* 패널: 마퀴 브리지 (액센트 풀블리드) */
.hxp-bridge{background:var(--volt);border-right-color:var(--carbon);
  display:flex;align-items:center;overflow:hidden}
.hx-bridge-inner{width:100%;overflow:hidden}
.mq-row{display:flex;align-items:center;gap:26px;white-space:nowrap;will-change:transform}
.mq-row span{font-family:var(--display);font-size:clamp(30px,4.4vw,64px);
  color:var(--carbon);letter-spacing:.03em}
.mq-row b{color:rgba(18,18,18,.42);font-size:clamp(14px,2vw,28px)}

/* 패널: 타임테이블 */
.hxp-tt{background:var(--paper);color:var(--carbon)}
.hxp-tt .label{color:#8A7F00}
.hxp-tt .hxp-lead{color:rgba(18,18,18,.64)}
.tt-wrap{width:100%}
.tt{width:100%;border-collapse:collapse;min-width:min(560px,80vw)}
.tt thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  color:rgba(18,18,18,.5);font-weight:600;text-align:left;
  padding:0 0 14px;border-bottom:2px solid var(--carbon)}
.tt-row td{padding:clamp(13px,1.5vw,20px) 14px clamp(13px,1.5vw,20px) 0;
  border-bottom:1px solid var(--line-dk);vertical-align:baseline}
.tt-time{font-size:clamp(18px,2.2vw,30px);font-weight:600;letter-spacing:-.01em;width:1%;white-space:nowrap}
.tt-name{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.7vw,21px);
  letter-spacing:.01em;line-height:1.2}
.tt-note{font-size:13px;color:rgba(18,18,18,.58);text-align:right}
.tt-tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  background:var(--carbon);color:var(--volt);padding:4px 8px;margin-left:8px;
  vertical-align:middle;font-weight:600}
.tt-row.is-peak{background:rgba(242,227,27,.16)}
.tt-row.is-peak .tt-time{color:#6E6600}
.tt-note.mono{margin-top:20px;font-size:11px;letter-spacing:.05em;color:rgba(18,18,18,.46);text-align:left}

/* 패널: 요금 */
.hxp-price{background:var(--carbon-2)}
.price-rail{display:flex;gap:clamp(14px,1.6vw,22px);align-items:stretch}
.pitem{flex:0 0 clamp(228px,21vw,300px);position:relative;border:1px solid var(--line);
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;background:var(--carbon)}
.pitem.is-feature{border-color:var(--volt);background:#161503}
.pno{font-size:11px;letter-spacing:.2em;color:var(--volt);font-weight:600}
.pitem h3{font-family:var(--display);font-weight:400;font-size:clamp(18px,2vw,24px);
  margin:10px 0 12px;letter-spacing:.01em;line-height:1.1}
.pdesc{font-size:13px;color:rgba(244,244,242,.6);margin-bottom:22px}
.pfig{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pfig b{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.8vw,34px);
  color:var(--volt);letter-spacing:-.01em}
.pfig span{font-size:12.5px;color:rgba(244,244,242,.5)}
.p-badge{position:absolute;top:-1px;right:-1px;background:var(--volt);color:var(--carbon);
  font-size:9.5px;letter-spacing:.18em;font-weight:600;padding:6px 11px}
.price-note{margin-top:22px;font-size:11px;letter-spacing:.05em;color:rgba(244,244,242,.42)}

/* 패널: 코치 */
.hxp-coach{background:var(--carbon-3)}
.coach-rail{display:flex;gap:clamp(18px,2vw,28px);align-items:stretch}
.coitem{flex:0 0 clamp(260px,25vw,340px);border:1px solid var(--line);
  display:flex;flex-direction:column;background:var(--carbon-2)}
.coitem figure{overflow:hidden;border-bottom:1px solid var(--line)}
.coitem figure img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.coitem:hover figure img{transform:scale(1.06)}
.cobody{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.coitem h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,26px);
  margin:10px 0 12px;letter-spacing:.01em;line-height:1.08}
.coitem p{font-size:13.5px;color:rgba(244,244,242,.62)}

/* ---- 가로 HUD ---- */
.hx-hud{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,3vh,34px);
  z-index:12;display:flex;align-items:center;gap:16px;pointer-events:none;opacity:0}
.hx-viewport.is-live .hx-hud{opacity:1;transition:opacity .4s}
.hx-hud-lbl{font-size:10.5px;letter-spacing:.28em;color:var(--volt);font-weight:600;
  flex:0 0 auto;min-width:112px}
.hx-hud-bar{flex:1 1 auto;height:2px;background:rgba(244,244,242,.2)}
.hx-hud-bar span{display:block;height:100%;width:0;background:var(--volt)}
.hx-hud-drag{font-size:10px;letter-spacing:.26em;color:rgba(244,244,242,.5);flex:0 0 auto}
/* 브리지 패널 위에서는 HUD가 노란 배경에 묻힌다 → 다크 알약 */
.hx-hud::before{content:"";position:absolute;inset:-10px -14px;
  background:rgba(10,10,10,.55);z-index:-1;border-radius:2px}

/* 드래그 커서 (데스크톱 가로 모드에서만 JS가 is-grab 부여) */
.hx-viewport.is-grab .hx-track{cursor:grab}
.hx-viewport.is-grab .hx-track:active{cursor:grabbing}

/* ---------- 09 공간 풀블리드 ---------- */
.space{position:relative;overflow:hidden;padding:clamp(100px,14vw,180px) 0}
.space-media{position:absolute;inset:-12% 0;z-index:0}
.space-media img{width:100%;height:100%;object-fit:cover;will-change:transform;opacity:.4}
.space::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,18,18,.82),rgba(18,18,18,.62) 45%,rgba(18,18,18,.94))}
.space-cap{position:relative;z-index:2}

/* ---------- 10 FAQ ---------- */
.faq{background:var(--carbon)}
.acc{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:clamp(20px,2.4vw,28px) 46px clamp(20px,2.4vw,28px) 0;
  position:relative;font-size:clamp(15px,1.9vw,19px);font-weight:700;color:var(--paper)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:2px;
  background:var(--volt);transform:translateY(-50%)}
.qa summary::before{content:"";position:absolute;right:14px;top:50%;width:2px;height:14px;
  background:var(--volt);transform:translateY(-50%);transition:transform .3s}
.qa[open] summary::before{transform:translateY(-50%) scaleY(0)}
.qa summary:hover{color:var(--volt)}
.qa-body{padding:0 0 clamp(22px,2.6vw,30px)}
.qa-body p{font-size:14.5px;color:rgba(244,244,242,.64);max-width:62ch}

/* ---------- 11 체험 CTA ---------- */
.trial{background:var(--paper);color:var(--carbon);padding:var(--pad) 0}
.trial .label{color:#8A7F00}
.trial .sec-lead{color:rgba(18,18,18,.66)}
.trial-h{font-family:var(--display);font-weight:400;
  font-size:clamp(34px,7vw,102px);line-height:.96;letter-spacing:.01em;margin-top:16px}
.trial-list{list-style:none;margin:clamp(30px,4vw,44px) 0;display:grid;gap:12px;
  padding-top:26px;border-top:2px solid var(--carbon)}
.trial-list li{position:relative;padding-left:22px;font-size:15px;color:rgba(18,18,18,.76)}
.trial-list li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:3px;background:var(--carbon)}
.trial-cta{display:flex;gap:10px;flex-wrap:wrap}
.trial .btn-ghost{border-color:rgba(18,18,18,.28);color:var(--carbon)}
.mini-note{margin-top:20px;font-size:13px;color:rgba(18,18,18,.52)}

/* ---------- 12 오시는 길 ---------- */
.visit{background:var(--carbon)}
.visit-grid{display:grid;gap:clamp(30px,4vw,64px);align-items:center}
@media(min-width:900px){.visit-grid{grid-template-columns:6fr 5fr}}
.visit-fig{position:relative}
.visit-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.visit-cap{position:absolute;left:0;bottom:0;right:0;display:flex;justify-content:space-between;
  padding:12px 16px;background:rgba(10,10,10,.78);font-size:10px;
  letter-spacing:.22em;color:rgba(244,244,242,.62)}
.visit-body address{font-style:normal;margin-top:22px;font-size:15px;
  color:rgba(244,244,242,.72);line-height:1.9}
.visit-info{display:grid;gap:11px;margin:26px 0}
.visit-info>div{display:grid;grid-template-columns:64px 1fr;gap:14px;font-size:14.5px}
.visit-info dt{color:rgba(244,244,242,.45);font-size:12px;letter-spacing:.1em;padding-top:2px}
.visit-list{list-style:none;display:grid;gap:9px;margin-bottom:28px;
  padding-top:22px;border-top:1px solid var(--line)}
.visit-list li{position:relative;padding-left:18px;font-size:13.5px;color:rgba(244,244,242,.62)}
.visit-list li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:2px;background:var(--volt)}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--carbon-3);color:rgba(244,244,242,.6);
  padding:clamp(54px,6vw,84px) 0 120px;border-top:1px solid var(--line)}
.foot-inner{display:grid;gap:28px}
@media(min-width:900px){.foot-inner{grid-template-columns:1fr 1fr;align-items:start}}
.foot-brand .logo-txt{font-size:24px}
.foot-brand .mono{font-size:10px;letter-spacing:.24em;color:rgba(244,244,242,.35);margin-top:8px}
.foot-info p{font-size:13px;line-height:1.9}
.foot-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;display:grid;gap:10px}
.foot-note p{font-size:12px;color:rgba(244,244,242,.42);line-height:1.8}
.demo-badge{display:inline-block;border:1px solid var(--volt);color:var(--volt) !important;
  padding:9px 16px;font-size:12.5px !important}
.demo-badge b{color:var(--paper)}
.made-by{letter-spacing:.2em;font-size:10px !important;color:rgba(244,244,242,.28) !important}

/* ---------- 모바일 고정 CTA ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:2px;position:fixed;
    left:0;right:0;bottom:0;z-index:95;background:var(--carbon)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:800}
  .mb-call{background:var(--volt);color:var(--carbon)}
  .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 .citem{opacity:0}
html.js-anim .coitem{opacity:0}
html.js-anim .pitem{opacity:0}
html.js-anim .tt-row{opacity:0}
html.js-anim .cmeta li{opacity:0}
html.js-anim .trial-list li{opacity:0}
html.js-anim .visit-info>div{opacity:0}
html.js-anim .qa{opacity:0}

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

/* ---------- 접근성 ---------- */
:focus-visible{outline:3px solid var(--volt);outline-offset:3px}

/* ==========================================================================
   ★ 데스크톱(1024+): 가로 트랙 실제 치수
   패널 폭은 내용에 맞춰 각각 다르게 → 단조로운 100vw 반복을 피한다.
   ========================================================================== */
@media(min-width:1024px){
  .hx-viewport{height:100svh}
  .hx-track{height:100svh}
  .hxp-class{width:min(1180px,96vw)}
  .hxp-bridge{width:min(760px,62vw)}
  .hxp-tt{width:min(960px,84vw)}
  .hxp-price{width:min(1180px,96vw)}
  .hxp-coach{width:min(1140px,94vw)}
}

/* ==========================================================================
   ⚠ 모바일·태블릿(≤1023px): 가로 핀·Draggable 전면 해제
   overflow-x:auto 손스크롤 레일 + 패널은 세로로 나열.
   세로 스크롤을 절대 가로채지 않는다 (touch-action 기본값 유지).
   ========================================================================== */
@media(max-width:1023px){
  .hx-viewport{height:auto;overflow:visible}
  .hx-track{display:block;height:auto;transform:none !important;will-change:auto}
  .hxp{width:auto !important;border-right:0;border-bottom:1px solid var(--line)}
  .hxp-inner{padding:clamp(64px,11vw,96px) 0;display:block}
  .hxp-head{padding:0 var(--gut)}
  .hx-hud{display:none}

  /* 카드 레일 → 손스크롤 (세로 제스처는 브라우저가 그대로 처리) */
  .class-rail,.price-rail,.coach-rail{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:0 var(--gut) 14px;
    scrollbar-width:thin;
  }
  .class-rail>*,.price-rail>*,.coach-rail>*{scroll-snap-align:start}
  .citem{flex:0 0 min(300px,78vw)}
  .coitem{flex:0 0 min(300px,78vw)}
  .pitem{flex:0 0 min(256px,70vw)}

  /* 브리지 마퀴는 세로 흐름에서도 띠로 남긴다 */
  .hxp-bridge{padding:16px 0;border-bottom:2px solid var(--carbon)}
  .hxp-bridge .hx-bridge-inner{overflow:hidden}

  /* 타임테이블은 표 자체가 가로 스크롤 */
  .hxp-tt .tt-wrap{overflow-x:auto;padding:0 var(--gut)}
  .hxp-tt .tt{min-width:520px}
  .hxp-tt .tt-note.mono{padding:0 var(--gut)}
  .price-note{padding:0 var(--gut)}

  /* 진입/이탈 힌트는 세로 흐름에선 의미가 약하다 → 화살표만 축소 */
  .hx-arrow{display:none}
  .hx-outro{display:none}

  /* ---- 시그니처: 핀 해제 → 숫자 3개를 세로로 나열 ---- */
  .record-stage{min-height:0;display:block;padding:clamp(80px,12vw,120px) 0}
  .rec-bgs{position:absolute;inset:0}
  .rec-bg{opacity:0}
  .rec-bg.is-on{opacity:1}
  .rec-progress{display:none}
  .rec-spark{display:none}
  .rec-mq{position:relative;bottom:auto;margin:34px 0 0;opacity:.16}

  .rec-nums{position:relative;inset:auto;display:grid;place-items:stretch;
    gap:clamp(52px,10vw,78px);margin-top:clamp(40px,7vw,60px)}
  .rec-num{position:relative;opacity:1;align-items:flex-start;
    padding:0 var(--gut);width:100%}
  .rn-fig{font-size:clamp(96px,30vw,220px)}
  .rn-unit{text-indent:0;margin-top:2px}

  /* 캡션은 JS가 해당 .rec-num 안으로 옮긴다 → 숫자 바로 아래에 붙는다 */
  .rec-caps{position:relative;min-height:0;margin-top:0}
  .rec-num .rec-cap{position:relative;left:auto;right:auto;bottom:auto;opacity:1;
    width:100%;max-width:none;margin-top:clamp(16px,3.4vw,24px);
    padding:0;text-shadow:none;align-self:flex-start}
}

/* ==========================================================================
   GSAP 로드 실패/차단 시 (html.no-anim) — 전부 정적으로 펼친다
   ⚠ 가로 트랙은 핀도 Draggable도 없다 → 세로 나열 + 레일 손스크롤로 강제
   ========================================================================== */
html.no-anim .hx-viewport{height:auto !important;overflow:visible !important}
html.no-anim .hx-track{display:block !important;height:auto !important;transform:none !important}
html.no-anim .hxp{width:auto !important;border-right:0;border-bottom:1px solid var(--line)}
html.no-anim .hxp-inner{padding:clamp(64px,10vw,110px) 0;display:block}
html.no-anim .hxp-head{padding:0 var(--gut)}
html.no-anim .hx-hud{display:none}
html.no-anim .class-rail,
html.no-anim .price-rail,
html.no-anim .coach-rail{overflow-x:auto;padding:0 var(--gut) 14px}
html.no-anim .citem{flex:0 0 min(320px,80vw)}
html.no-anim .coitem{flex:0 0 min(320px,80vw)}
html.no-anim .pitem{flex:0 0 min(270px,72vw)}
html.no-anim .hxp-tt .tt-wrap{overflow-x:auto;padding:0 var(--gut)}
html.no-anim .hxp-tt .tt{min-width:520px}
html.no-anim .hxp-tt .tt-note.mono{padding:0 var(--gut)}
html.no-anim .price-note{padding:0 var(--gut)}
html.no-anim .hx-arrow,html.no-anim .hx-outro{display:none}

html.no-anim .record-stage{min-height:0;display:block;padding:clamp(80px,12vw,120px) 0}
html.no-anim .rec-nums{position:relative;inset:auto;display:grid;place-items:stretch;
  gap:clamp(46px,9vw,70px);margin-top:clamp(40px,7vw,60px)}
html.no-anim .rec-num{position:relative;opacity:1;align-items:flex-start;
  padding:0 var(--gut);width:100%}
html.no-anim .rn-fig{font-size:clamp(96px,26vw,240px)}
html.no-anim .rn-unit{text-indent:0;margin-top:2px}
html.no-anim .rec-caps{position:relative;min-height:0;display:flex;flex-direction:column;margin-top:0}
html.no-anim .rec-num .rec-cap{position:relative;left:auto;right:auto;bottom:auto;opacity:1;
  width:100%;max-width:52ch;margin-top:clamp(16px,2.4vw,24px);padding:0;text-shadow:none;
  align-self:flex-start}
html.no-anim .rec-progress{display:none}
html.no-anim .rec-spark{display:none}
html.no-anim .rec-mq{position:relative;bottom:auto;margin:34px 0 0}

/* ---------- 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 .citem,html.js-anim .coitem,html.js-anim .pitem,
  html.js-anim .tt-row,html.js-anim .cmeta li,html.js-anim .trial-list li,
  html.js-anim .visit-info>div,html.js-anim .qa{opacity:1 !important}
  .curtain{display:none}
  .scroll-tag i::after{animation:none}

  /* 가로 트랙: 핀 없이 세로로 펼친다 */
  .hx-viewport{height:auto !important;overflow:visible !important}
  .hx-track{display:block !important;height:auto !important;transform:none !important}
  .hxp{width:auto !important;border-right:0;border-bottom:1px solid var(--line)}
  .hxp-inner{padding:clamp(64px,10vw,110px) 0;display:block}
  .hxp-head{padding:0 var(--gut)}
  .hx-hud{display:none}
  .class-rail,.price-rail,.coach-rail{overflow-x:auto;padding:0 var(--gut) 14px}
  .hxp-tt .tt-wrap{overflow-x:auto;padding:0 var(--gut)}
  .hxp-tt .tt{min-width:520px}
  .hxp-tt .tt-note.mono{padding:0 var(--gut)}
  .price-note{padding:0 var(--gut)}
  .hx-arrow,.hx-outro{display:none}

  /* 시그니처: 최종 완성 상태를 정적으로 즉시 표시 */
  .record-stage{min-height:0;display:block;padding:clamp(80px,12vw,120px) 0}
  .rec-nums{position:relative;inset:auto;display:grid;place-items:stretch;
    gap:clamp(46px,9vw,70px);margin-top:clamp(40px,7vw,60px)}
  .rec-num{position:relative;opacity:1 !important;align-items:flex-start;padding:0 var(--gut)}
  .rn-fig{font-size:clamp(96px,26vw,240px)}
  .rn-unit{text-indent:0}
  .rec-caps{position:relative;min-height:0;display:flex;flex-direction:column}
  .rec-cap{position:relative;left:auto;right:auto;bottom:auto;opacity:1 !important;
    margin-top:clamp(30px,6vw,44px);max-width:none}
  .rec-progress{display:none}
  .rec-spark{display:none}
  .rec-mq{position:relative;bottom:auto;margin-top:30px}
}