@charset "utf-8";
/* ==========================================================================
   무브먼트랩 — P5 키네틱 볼드 / 액센트: 볼트 옐로 #E8FF3A
   ★ 아키타입 B: 풀스크린 스냅 챕터
     .chapter 7개가 각각 100svh. scroll-snap-type:y proximity (데스크톱 전용).
     좌측 고정 .beat 인디케이터가 현재 장과 8카운트를 표시한다.

   ⚠ 핀이 걸린 .ch-kt 는 scroll-snap-align:none — 스냅이 핀을 방해하면 안 된다.
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일 미디어쿼리에만.
   ⚠ 기존 P5(gritbox #F2E31B / dunkburger 오렌지)와 구분:
     여기는 애시드 볼트 #E8FF3A + 잉크블랙 #0D0D0D + 콘크리트 #C9C9C2.
     디스플레이 서체도 Archivo Black이 아닌 Anton(초압축 콘덴스드)로 다르게.
   ========================================================================== */

:root{
  --ink:#0D0D0D;
  --ink-2:#161616;
  --ink-3:#050505;
  --paper:#F2F2EF;
  --concrete:#C9C9C2;
  --volt:#E8FF3A;
  --volt-dk:#C4D818;
  --volt-ink:#3D4400;
  --line:rgba(242,242,239,.13);
  --line-dk:rgba(13,13,13,.14);

  --display:'Anton','Pretendard Variable',Impact,sans-serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --mono:'Space Mono','SF Mono',Consolas,monospace;

  --wrap:1320px;
  --gut:clamp(20px,4vw,52px);
  --pad:clamp(90px,13vw,190px);
  --beat-w:0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--ink);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(--ink)}

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

.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}
.sr-hero-img{display:none}

/* 사진 톤 통일 — 명세서 §03. 전 이미지 동일 그레이딩 */
.hm-frame img,.kt-bg img,.gitem figure img,.cportrait img,
.stage-media img,.sg-item img,.visit-fig img{
  filter:grayscale(.72) contrast(1.3) brightness(.82);
}
.kt-bg img{filter:grayscale(1) contrast(1.42) brightness(.58)}
.stage-media img{filter:grayscale(.9) contrast(1.35) brightness(.5)}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:220;background:var(--ink);display:grid;place-items:center}
.curtain-inner{text-align:center;padding:0 24px}
.curtain-count{font-size:clamp(11px,2vw,14px);letter-spacing:.5em;
  color:var(--volt);margin-bottom:18px;text-indent:.5em}
.curtain-word{
  font-family:var(--display);font-size:clamp(38px,10vw,120px);line-height:.92;
  letter-spacing:-.005em;color:var(--paper);text-transform:uppercase;
}
.curtain-word span{color:var(--volt)}
.curtain-bar{width:min(260px,54vw);height:3px;background:rgba(242,242,239,.14);margin:26px 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.4vw,88px);line-height:.98;letter-spacing:-.005em;
}
.label{font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.34em;color:var(--volt)}
.sec-lead{margin-top:20px;color:rgba(242,242,239,.58);
  font-size:clamp(14.5px,1.6vw,17px);max-width:56ch}
.sec-head{margin-bottom:clamp(34px,5vw,62px)}
.sec-head .h2{margin-top:14px}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:1px;font-size:14.5px;font-weight:800;
  transition:background .2s,color .2s,border-color .2s;will-change:transform;
}
.btn-primary{background:var(--volt);color:var(--ink)}
.btn-primary:hover{background:var(--volt-dk)}
.btn-ghost{border:2px solid rgba(242,242,239,.28);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(--ink)}

/* ---------- 헤더 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.site-head.is-stuck{background:rgba(13,13,13,.9);border-bottom-color:var(--line);
  backdrop-filter:blur(9px)}
.head-inner{display:flex;align-items:center;gap:24px;height:72px;max-width:none}
.logo{display:flex;align-items:center;gap:9px}
.logo-badge{width:26px;height:26px;background:var(--volt);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0}
.logo-txt{font-family:var(--display);font-size:19px;letter-spacing:.02em}
.gnb{display:none;gap:24px;margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:rgba(242,242,239,.58)}
@media(min-width:1000px){.gnb{display:flex}}
.gnb a:hover{color:var(--volt)}
@media(max-width:999px){.btn-mini{margin-left:auto}}

/* ==========================================================================
   ★ 아키타입 B — 좌측 고정 챕터 인디케이터
   ========================================================================== */
.beat{display:none}
@media(min-width:1100px){
  :root{--beat-w:198px}
  .beat{
    display:flex;flex-direction:column;justify-content:center;gap:26px;
    position:fixed;left:0;top:0;bottom:0;width:var(--beat-w);z-index:95;
    padding:96px 0 40px 26px;pointer-events:auto;
    border-right:1px solid var(--line);background:linear-gradient(90deg,rgba(5,5,5,.72),transparent);
  }
  .beat-lbl{font-size:9.5px;letter-spacing:.36em;color:rgba(242,242,239,.32);font-weight:700}
  .beat-list{list-style:none;display:grid;gap:2px}
  .beat-list a{display:flex;align-items:center;gap:11px;padding:7px 0;position:relative}
  .beat-no{font-size:10px;letter-spacing:.1em;font-weight:700;
    color:rgba(242,242,239,.3);transition:color .3s}
  .beat-list em{font-family:var(--mono);font-style:normal;font-size:10.5px;
    letter-spacing:.15em;color:rgba(242,242,239,.34);transition:color .3s,transform .35s;
    transform-origin:left center}
  .beat-list a::before{content:"";position:absolute;left:-26px;top:50%;
    width:0;height:2px;background:var(--volt);transform:translateY(-50%);
    transition:width .4s cubic-bezier(.16,1,.3,1)}
  .beat-list a:hover em{color:rgba(242,242,239,.72)}
  .beat-list li.is-now a::before{width:20px}
  .beat-list li.is-now .beat-no{color:var(--volt)}
  .beat-list li.is-now em{color:var(--paper);transform:translateX(4px)}
  .beat-count{display:flex;align-items:baseline;gap:6px;
    padding-top:18px;border-top:1px solid var(--line);width:132px}
  .beat-count span{font-size:9px;letter-spacing:.28em;color:rgba(242,242,239,.3);font-weight:700}
  .beat-count b{font-family:var(--mono);font-size:26px;font-weight:700;
    color:var(--volt);line-height:1;font-variant-numeric:tabular-nums;min-width:20px}
  /* 좌측 인디케이터 폭만큼 본문을 밀어 준다 */
  .chapter .wrap,.chapter .hero-inner,.chapter .hero-foot,.kt-head,.kt-caps{
    padding-left:calc(var(--gut) + var(--beat-w) - 26px);
  }
  .site-head .head-inner{padding-left:calc(var(--gut) + 4px)}
}

/* ==========================================================================
   ★ 스냅 챕터 골격
   ========================================================================== */
.chapters{position:relative;z-index:2}
.chapter{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  /* ⚠ overflow:hidden 금지 — 핀 구간과 내용이 100svh를 넘는 장에서 잘린다 */
}
.ch-inner{padding-top:clamp(96px,12vh,140px);padding-bottom:clamp(72px,9vh,110px)}

/* 데스크톱에서만 스냅 부착 */
@media(min-width:1024px){
  html{scroll-snap-type:y proximity}
  .chapter{scroll-snap-align:start;scroll-snap-stop:normal}
  /* ★ 핀 대상 장은 스냅 해제 — 스냅이 핀 진행을 끊는다 */
  .ch-kt{scroll-snap-align:none}
  /* 마지막 장은 푸터 때문에 100svh를 넘는다 → 시작점 정렬 */
  .ch-first{scroll-snap-align:start;justify-content:flex-start}
}

/* 장 사이 얇은 볼트 구분선 */
.chapter + .chapter::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--volt) 0%,rgba(232,255,58,.18) 22%,transparent 55%);
  z-index:6;
}

/* ==========================================================================
   章 01 — OPEN (히어로) · 영상감 배경
   ⚠ 실제 <video>로 교체할 때 .hm-frame 을 그대로 두고 img→video만 바꾸면 된다.
   ========================================================================== */
.ch-hero{justify-content:flex-end;padding:130px 0 30px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hm-frame{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease}
.hm-frame.is-on{opacity:1}
.hm-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  will-change:transform;
  /* 영상감 1: 상시 드리프트(느린 줌·패닝)로 정지 이미지를 살린다 */
  animation:drift 26s ease-in-out infinite alternate;
}
.hm-frame:nth-child(2) img{animation-duration:31s;animation-direction:alternate-reverse}
.hm-frame:nth-child(3) img{animation-duration:22s}
@keyframes drift{
  0%  {transform:scale(1.06) translate3d(0,0,0)}
  50% {transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}
  100%{transform:scale(1.09) translate3d(1.4%,1%,0)}
}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(13,13,13,.88) 0%,rgba(13,13,13,.24) 32%,rgba(13,13,13,.9) 80%,var(--ink) 100%),
    linear-gradient(94deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.42) 48%,rgba(13,13,13,.1) 100%);
}
/* 영상감 2: 미세 스캔라인 + 셔터 플리커 — "재생 중" 느낌 */
.hero-scan{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  animation:flick 5.5s steps(2) infinite;opacity:.5}
@keyframes flick{0%,92%{opacity:.5}94%{opacity:.22}96%{opacity:.6}100%{opacity:.5}}

.hero-inner{position:relative;z-index:3}
.kicker{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.28em;
  color:var(--volt);margin-bottom:26px;font-weight:700}
.kicker .dot{width:7px;height:7px;background:var(--volt);flex-shrink:0;
  animation:pulse 1.05s steps(2) infinite}
@keyframes pulse{0%,49%{opacity:1}50%,100%{opacity:.2}}
.hero-h1{font-family:var(--display);font-weight:400;
  font-size:clamp(46px,11vw,152px);line-height:.9;letter-spacing:-.01em}
.hero-h1 .hl{display:block;overflow:hidden}
.hero-h1 .accent{color:var(--volt);font-weight:400}
.hero-lead{margin-top:28px;font-size:clamp(15px,1.8vw,18.5px);
  color:rgba(242,242,239,.72);max-width:46ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.hero-foot{position:relative;z-index:3;display:flex;justify-content:space-between;
  align-items:center;margin-top:clamp(32px,5vw,60px);padding-top:16px;
  border-top:1px solid var(--line);font-size:10px;letter-spacing:.22em;
  color:rgba(242,242,239,.46)}
.scroll-tag{display:flex;align-items:center;gap:10px}
.scroll-tag i{display:block;width:38px;height:2px;background:rgba(242,242,239,.22);
  position:relative;overflow:hidden}
.scroll-tag i::after{content:"";position:absolute;inset:0;background:var(--volt);
  animation:sweep 1.8s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ==========================================================================
   章 02 — ★ SIGNATURE : REASSEMBLE (영상 배경 + 키네틱 타이포)
   ========================================================================== */
.ch-kt{background:var(--ink-3);padding:0}
.kt-stage{position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(96px,12vh,140px) 0 clamp(58px,7vh,84px)}

.kt-bgs{position:absolute;inset:0;z-index:0}
.kt-bg{position:absolute;inset:0;opacity:0}
.kt-bg.is-on{opacity:1}
.kt-bg img{width:100%;height:100%;object-fit:cover;will-change:transform;
  /* 영상감 3: 배경 4장 각각 다른 주기로 상시 드리프트 → 정지 사진이 흐른다 */
  animation:drift 24s ease-in-out infinite alternate}
.kt-bg:nth-child(2) img{animation-duration:19s;animation-direction:alternate-reverse}
.kt-bg:nth-child(3) img{animation-duration:28s}
.kt-bg:nth-child(4) img{animation-duration:21s;animation-direction:alternate-reverse}
.kt-bgs::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(78% 68% at 50% 48%,rgba(5,5,5,.42) 0%,rgba(5,5,5,.94) 74%)}
.kt-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.34;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 4px);
  animation:flick 4.2s steps(2) infinite}

.kt-head{position:relative;z-index:5;display:flex;align-items:baseline;
  gap:18px;flex-wrap:wrap}
.kt-genre{font-size:clamp(12px,1.8vw,17px);font-weight:700;letter-spacing:.4em;
  color:rgba(242,242,239,.72);text-indent:.4em}

/* 키네틱 타이포 — 분해·재조합 대상 */
.kt-type{position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(2px,.6vh,10px);pointer-events:none;padding:0 12px}
.kt-line{font-family:var(--display);font-weight:400;
  font-size:clamp(56px,14.5vw,214px);line-height:.86;letter-spacing:-.015em;
  color:var(--paper);white-space:nowrap;text-align:center;
  text-shadow:0 6px 46px rgba(5,5,5,.75)}
.kt-line-b{color:var(--volt);
  -webkit-text-stroke:0;text-shadow:0 6px 46px rgba(5,5,5,.7)}
.kt-line .kchar{display:inline-block;will-change:transform,opacity}

/* Physics2D 파티클 레이어 */
.kt-burst{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.pt{position:absolute;top:0;left:0;width:7px;height:7px;background:var(--volt);
  will-change:transform,opacity}
.pt.pt-b{width:2px;height:16px;background:var(--paper)}
.pt.pt-c{width:14px;height:2px;background:var(--volt-dk)}

/* 캡션 — 좌하단 컬럼 */
.kt-caps{position:relative;z-index:5;margin-top:auto;
  min-height:clamp(186px,25vh,242px)}
.kt-cap{position:absolute;left:var(--gut);bottom:0;width:min(42ch,46vw);opacity:0;
  text-shadow:0 2px 20px rgba(5,5,5,.94)}
.kt-cap.is-on{opacity:1}
.kc-idx{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--volt);margin-bottom:12px}
.kc-idx span{color:rgba(242,242,239,.36)}
.kt-cap h2{font-family:var(--display);font-weight:400;
  font-size:clamp(20px,3.1vw,37px);line-height:1.1;letter-spacing:-.005em}
.kc-p{margin-top:13px;font-size:14.5px;color:rgba(242,242,239,.64)}

.kt-progress{position:absolute;left:50%;bottom:clamp(22px,3vh,38px);transform:translateX(-50%);
  z-index:7;width:min(230px,54vw);height:2px;background:rgba(242,242,239,.16)}
.kt-progress span{display:block;height:100%;width:0;background:var(--volt)}
@media(min-width:1100px){
  .kt-cap{left:calc(var(--gut) + var(--beat-w) - 26px)}
  .kt-progress{left:calc(50% + (var(--beat-w) - 26px)/2)}
}

/* ==========================================================================
   章 03 — GENRE (밝은 장 · 리듬 전환)
   ========================================================================== */
.ch-genre{background:var(--paper);color:var(--ink)}
.ch-genre .label{color:var(--volt-ink)}
.ch-genre .sec-lead{color:rgba(13,13,13,.66)}
.gen-grid{display:grid;gap:clamp(14px,1.8vw,24px)}
@media(min-width:760px){.gen-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.gen-grid{grid-template-columns:repeat(4,1fr)}}
.gitem{border:1px solid var(--line-dk);background:#fff;display:flex;flex-direction:column}
.gitem figure{overflow:hidden;border-bottom:1px solid var(--line-dk);background:var(--ink)}
.gitem figure img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.gitem:hover figure img{transform:scale(1.07)}
.gbody{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.gno{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--volt-ink)}
.gitem h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.1vw,26px);
  margin:9px 0 4px;line-height:1.06}
.gsub{font-size:10px;font-weight:700;letter-spacing:.26em;
  color:rgba(13,13,13,.4);margin-bottom:12px}
.gitem p{font-size:13.5px;color:rgba(13,13,13,.66)}
.gmeta{list-style:none;margin-top:auto;padding-top:16px;display:grid;gap:8px;
  border-top:1px solid var(--line-dk)}
.gmeta li{position:relative;padding-left:17px;font-size:12.5px;color:rgba(13,13,13,.74)}
.gmeta li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:3px;
  background:var(--volt);outline:1px solid rgba(13,13,13,.2)}

/* ==========================================================================
   章 04 — CREW (다크)
   ========================================================================== */
.ch-crew{background:var(--ink-2)}
.crew-rail{display:grid;gap:clamp(14px,1.8vw,24px)}
@media(min-width:860px){.crew-rail{grid-template-columns:repeat(3,1fr)}}
.citem{border:1px solid var(--line);background:var(--ink);display:flex;flex-direction:column}
.cportrait{overflow:hidden;border-bottom:1px solid var(--line);position:relative}
.cportrait img{width:100%;aspect-ratio:5/4;object-fit:cover;
  transition:transform .85s cubic-bezier(.16,1,.3,1)}
.citem:hover .cportrait img{transform:scale(1.06)}
.cportrait::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(13,13,13,.7) 100%)}
.cbody{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.cno{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--volt)}
.citem h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.1vw,26px);
  margin:9px 0 11px;line-height:1.06}
.citem p{font-size:13.5px;color:rgba(242,242,239,.62)}
.cmeta{list-style:none;margin-top:auto;padding-top:16px;display:grid;gap:8px;
  border-top:1px solid var(--line)}
.cmeta li{position:relative;padding-left:17px;font-size:12.5px;color:rgba(242,242,239,.72)}
.cmeta li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--volt)}
.crew-note{margin-top:clamp(22px,3vw,34px);padding-top:18px;border-top:1px solid var(--line)}
.crew-note p{font-size:11px;letter-spacing:.06em;color:rgba(242,242,239,.36)}

/* ==========================================================================
   章 05 — TIMETABLE (밝은 장)
   ========================================================================== */
.ch-time{background:var(--concrete);color:var(--ink)}
.ch-time .label{color:var(--volt-ink)}
.ch-time .sec-lead{color:rgba(13,13,13,.66)}
.tt-wrap{width:100%}
.tt{width:100%;border-collapse:collapse}
.tt thead th{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.24em;
  color:rgba(13,13,13,.5);text-align:left;padding:0 0 13px;border-bottom:2px solid var(--ink)}
.tt-row td{padding:clamp(11px,1.3vw,17px) 14px clamp(11px,1.3vw,17px) 0;
  border-bottom:1px solid var(--line-dk);vertical-align:baseline}
.tt-time{font-family:var(--mono);font-size:clamp(16px,2vw,26px);font-weight:700;
  width:1%;white-space:nowrap}
.tt-name{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.7vw,21px);line-height:1.2}
.tt-note{font-size:12.5px;color:rgba(13,13,13,.56);text-align:right}
.tt-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.16em;background:var(--ink);color:var(--volt);padding:3px 8px;
  margin-left:8px;vertical-align:middle}
.tt-row.is-peak{background:rgba(232,255,58,.34)}

.fee-rail{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(30px,4vw,50px)}
@media(min-width:720px){.fee-rail{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.fee-rail{grid-template-columns:repeat(4,1fr)}}
.fitem{position:relative;border:1px solid var(--line-dk);background:#fff;
  padding:clamp(18px,2vw,26px);display:flex;flex-direction:column}
.fitem.is-feature{border-color:var(--ink);border-width:2px;background:var(--ink);color:var(--paper)}
.fitem.is-feature .fdesc{color:rgba(242,242,239,.6)}
.fitem.is-feature .fno{color:var(--volt)}
.fno{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--volt-ink)}
.fitem h3{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.9vw,23px);
  margin:9px 0 11px;line-height:1.08}
.fdesc{font-size:13px;color:rgba(13,13,13,.62);margin-bottom:20px}
.ffig{margin-top:auto;padding-top:15px;border-top:1px solid var(--line-dk);
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.fitem.is-feature .ffig{border-top-color:var(--line)}
.ffig b{font-family:var(--mono);font-weight:700;font-size:clamp(21px,2.4vw,30px);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fitem.is-feature .ffig b{color:var(--volt)}
.ffig span{font-size:12.5px;color:rgba(13,13,13,.5)}
.fitem.is-feature .ffig span{color:rgba(242,242,239,.5)}
.f-badge{position:absolute;top:-2px;right:-2px;background:var(--volt);color:var(--ink);
  font-size:9px;font-weight:700;letter-spacing:.18em;padding:6px 11px}
.fee-note{margin-top:20px;font-size:11px;letter-spacing:.04em;color:rgba(13,13,13,.5)}

/* ==========================================================================
   章 06 — STAGE (다크 · 풀블리드 배경)
   ========================================================================== */
.ch-stage{background:var(--ink-3);overflow:hidden}
.stage-media{position:absolute;inset:-8% 0;z-index:0}
.stage-media img{width:100%;height:100%;object-fit:cover;will-change:transform;opacity:.5}
.ch-stage::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,5,5,.86),rgba(5,5,5,.6) 42%,rgba(5,5,5,.95))}
.stage-inner{position:relative;z-index:2}
.stage-steps{list-style:none;display:grid;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:820px){.stage-steps{grid-template-columns:repeat(4,1fr)}}
.sstep{background:rgba(13,13,13,.72);padding:clamp(20px,2.4vw,30px)}
.ss-no{display:block;font-size:10px;font-weight:700;letter-spacing:.24em;color:var(--volt)}
.sstep h3{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.9vw,23px);
  margin:11px 0 10px;line-height:1.1}
.sstep p{font-size:13px;color:rgba(242,242,239,.6)}
.stage-gal{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.4vw,42px)}
@media(min-width:820px){.stage-gal{grid-template-columns:3fr 2fr}}
.sg-item{position:relative;overflow:hidden;border:1px solid var(--line)}
.sg-item img{width:100%;aspect-ratio:16/9;object-fit:cover;will-change:transform}
.sg-item figcaption{position:absolute;left:0;bottom:0;right:0;padding:10px 14px;
  background:rgba(5,5,5,.8);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  color:rgba(242,242,239,.6)}

/* ==========================================================================
   章 07 — FIRST STEP (밝은 장 + 오시는 길 + 푸터)
   ========================================================================== */
.ch-first{background:var(--paper);color:var(--ink)}
.ch-first .label{color:var(--volt-ink)}
.ch-first .sec-lead{color:rgba(13,13,13,.66)}
.first-h{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,8vw,112px);line-height:.94;letter-spacing:-.01em;margin-top:14px}
.first-list{list-style:none;margin:clamp(26px,3.4vw,40px) 0;display:grid;gap:11px;
  padding-top:24px;border-top:2px solid var(--ink)}
.first-list li{position:relative;padding-left:22px;font-size:15px;color:rgba(13,13,13,.76)}
.first-list li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:3px;background:var(--ink)}
.first-cta{display:flex;gap:10px;flex-wrap:wrap}
.ch-first .btn-ghost{border-color:rgba(13,13,13,.26);color:var(--ink)}
.ch-first .btn-ghost:hover{border-color:var(--volt-ink);color:var(--volt-ink)}
.mini-note{margin-top:18px;font-size:13px;color:rgba(13,13,13,.52)}

.visit-grid{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center;
  margin-top:clamp(46px,6vw,84px);padding-top:clamp(34px,4.4vw,58px);
  border-top:1px solid var(--line-dk)}
@media(min-width:920px){.visit-grid{grid-template-columns:6fr 5fr}}
.visit-fig{position:relative;background:var(--ink)}
.visit-fig img{width:100%;aspect-ratio:21/9;object-fit:cover;will-change:transform}
.visit-cap{position:absolute;left:0;bottom:0;right:0;display:flex;justify-content:space-between;
  padding:11px 15px;background:rgba(5,5,5,.78);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;color:rgba(242,242,239,.6)}
.visit-h{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,54px);
  line-height:1;margin-top:12px}
.visit-body address{font-style:normal;margin-top:18px;font-size:15px;
  color:rgba(13,13,13,.72);line-height:1.9}
.visit-info{display:grid;gap:10px;margin:22px 0}
.visit-info>div{display:grid;grid-template-columns:58px 1fr;gap:14px;font-size:14.5px}
.visit-info dt{color:rgba(13,13,13,.45);font-size:12px;letter-spacing:.08em;padding-top:2px}
.visit-list{list-style:none;display:grid;gap:8px;margin-bottom:24px;
  padding-top:20px;border-top:1px solid var(--line-dk)}
.visit-list li{position:relative;padding-left:17px;font-size:13.5px;color:rgba(13,13,13,.64)}
.visit-list li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:2px;background:var(--volt-ink)}

/* ---------- 푸터 ---------- */
.site-foot{background:var(--ink-3);color:rgba(242,242,239,.58);
  padding:clamp(48px,6vw,78px) 0 110px;margin-top:clamp(50px,7vw,90px)}
.foot-inner{display:grid;gap:26px}
@media(min-width:900px){.foot-inner{grid-template-columns:1fr 1fr;align-items:start}}
.foot-brand .logo-txt{font-size:25px}
.foot-brand .mono{font-size:9.5px;letter-spacing:.24em;color:rgba(242,242,239,.32);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:22px;display:grid;gap:10px}
.foot-note p{font-size:12px;color:rgba(242,242,239,.4);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(242,242,239,.26) !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:98;background:var(--ink)}
  .mobile-bar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:800}
  .mb-call{background:var(--volt);color:var(--ink)}
  .mb-naver{background:#03C75A;color:#fff}
  .site-foot{padding-bottom:126px}
  .head-inner{height:60px}
}

/* ---------- 애니메이션 초기 상태 (js-anim 하위에만) ---------- */
html.js-anim .fade-up{opacity:0}
html.js-anim .gitem{opacity:0}
html.js-anim .citem{opacity:0}
html.js-anim .fitem{opacity:0}
html.js-anim .tt-row{opacity:0}
html.js-anim .sstep{opacity:0}
html.js-anim .sg-item{opacity:0}
html.js-anim .gmeta li{opacity:0}
html.js-anim .cmeta li{opacity:0}
html.js-anim .first-list li{opacity:0}
html.js-anim .visit-info>div{opacity:0}

/* ⚠ 전역 scroll-behavior:smooth 금지 (Lenis 충돌). 모바일에만. */
@media(max-width:1023px){html{scroll-behavior:smooth}}

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

/* ==========================================================================
   ⚠ 모바일·태블릿(≤1023px)
   스냅·핀 전면 해제 → 일반 세로 흐름. 세로 스크롤을 절대 가로채지 않는다.
   핀 의존 요소(.kt-line / .kt-cap / .kt-bg)는 CSS로 반드시 살린다.
   ========================================================================== */
@media(max-width:1023px){
  html{scroll-snap-type:none !important}
  .chapter{scroll-snap-align:none;min-height:0;display:block}
  .ch-hero{min-height:100svh;display:flex}
  .ch-inner{padding-top:clamp(84px,13vw,120px);padding-bottom:clamp(64px,11vw,100px)}

  /* ---- 시그니처: 핀 해제 → 타이포와 캡션을 세로로 펼친다 ---- */
  .ch-kt{padding:0}
  .kt-stage{min-height:0;display:block;padding:clamp(84px,13vw,120px) 0 clamp(56px,9vw,84px)}
  .kt-bgs{position:absolute;top:0;left:0;right:0;height:78vh}
  .kt-bg{opacity:0}
  .kt-bg.is-on{opacity:1}
  .kt-type{position:relative;inset:auto;display:block;
    margin:clamp(26px,7vw,50px) 0 clamp(30px,7vw,54px);padding:0 var(--gut)}
  .kt-line{font-size:clamp(46px,15vw,110px);white-space:normal;text-align:left;
    opacity:1 !important;transform:none !important}
  .kt-burst{display:none}
  .kt-progress{display:none}
  .kt-caps{position:relative;min-height:0;margin-top:0;
    display:grid;gap:clamp(28px,6vw,44px)}
  .kt-cap{position:relative;left:auto !important;bottom:auto;width:100%;
    opacity:1 !important;text-shadow:none;
    padding-top:18px;border-top:1px solid var(--line)}
  .kt-genre{opacity:1}

  /* 마지막 장 푸터가 밀려나지 않게 */
  .ch-first{display:block}
}

/* ==========================================================================
   정적 폴백 — GSAP 로드 실패(html.no-anim) / reduced-motion 공통
   두 경우 모두 핀·스냅이 없다 → 시그니처를 세로로 펼치고 콘텐츠를 전부 살린다.
   ⚠ JS staticFallback()이 html.no-anim을 붙이고 커튼도 DOM에서 제거한다.
     아래 커튼 숨김은 JS가 못 돌았을 때를 위한 보험이다.
   ========================================================================== */
html.no-anim{scroll-snap-type:none !important}
html.no-anim .curtain{display:none !important}
html.no-anim .chapter{scroll-snap-align:none;min-height:0;display:block}
html.no-anim .ch-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
html.no-anim .ch-first{display:block}
html.no-anim .kt-stage{min-height:0;display:block;padding:clamp(84px,12vw,130px) 0 clamp(56px,8vw,84px)}
html.no-anim .kt-bgs{position:absolute;top:0;left:0;right:0;height:72vh}
html.no-anim .kt-type{position:relative;inset:auto;display:block;
  margin:clamp(26px,6vw,52px) 0;padding:0 var(--gut)}
html.no-anim .kt-line{font-size:clamp(46px,13vw,140px);white-space:normal;text-align:left;
  opacity:1 !important;transform:none !important}
html.no-anim .kt-burst,html.no-anim .kt-progress{display:none}
html.no-anim .kt-caps{position:relative;min-height:0;margin-top:0;display:grid;
  gap:clamp(28px,5vw,44px)}
html.no-anim .kt-cap{position:relative;left:auto !important;bottom:auto;width:100%;
  max-width:56ch;opacity:1 !important;text-shadow:none;
  padding-top:18px;border-top:1px solid var(--line)}
html.no-anim .fade-up,html.no-anim .gitem,html.no-anim .citem,html.no-anim .fitem,
html.no-anim .tt-row,html.no-anim .sstep,html.no-anim .sg-item,html.no-anim .gmeta li,
html.no-anim .cmeta li,html.no-anim .first-list li,html.no-anim .visit-info>div{
  opacity:1 !important;transform:none !important}

/* ---------- reduced-motion ----------
   JS가 살아 있으면 staticFallback()이 html.no-anim을 붙여 위 규칙이 그대로 적용된다.
   아래는 JS가 늦거나 없을 때를 위한 동일 상태의 CSS-only 사본이다. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html{scroll-snap-type:none !important;scroll-behavior:auto}
  .chapter{scroll-snap-align:none;min-height:0;display:block}
  .ch-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
  .ch-first{display:block}
  .curtain{display:none}
  .scroll-tag i::after,.kicker .dot,.hero-scan,.kt-grain,.hm-frame img,.kt-bg img{animation:none}
  .kt-stage{min-height:0;display:block;padding:clamp(84px,12vw,130px) 0 clamp(56px,8vw,84px)}
  .kt-bgs{position:absolute;top:0;left:0;right:0;height:72vh}
  .kt-type{position:relative;inset:auto;display:block;margin:clamp(26px,6vw,52px) 0;padding:0 var(--gut)}
  .kt-line{font-size:clamp(46px,13vw,140px);white-space:normal;text-align:left;
    opacity:1 !important;transform:none !important}
  .kt-burst,.kt-progress{display:none}
  .kt-caps{position:relative;min-height:0;margin-top:0;display:grid;gap:clamp(28px,5vw,44px)}
  .kt-cap{position:relative;left:auto !important;bottom:auto;width:100%;max-width:56ch;
    opacity:1 !important;text-shadow:none;padding-top:18px;border-top:1px solid var(--line)}
  html.js-anim .fade-up,html.js-anim .gitem,html.js-anim .citem,html.js-anim .fitem,
  html.js-anim .tt-row,html.js-anim .sstep,html.js-anim .sg-item,html.js-anim .gmeta li,
  html.js-anim .cmeta li,html.js-anim .first-list li,html.js-anim .visit-info>div{
    opacity:1 !important}
}