@charset "utf-8";
/* ==========================================================================
   한샘학원 — 프리셋 P9 네온 스터디 / 아키타입 B: 풀스크린 스냅 챕터
   명세서: AIPM / 프리셋 P9 / 히어로 풀블리드 + 2중 스크림

   팔레트: Paper #F7F8FA / Surface #ECEFF4 / Ink #111827 / Accent 라임형광 #C6F24E / Night #0B1220
   모티프: 성적표·시간표 — 24px 모눈 그리드, 형광펜 하이라이트, 체크박스, 진도 게이지, WEEK 라벨

   구조: .chapter 7개가 각각 100svh. scroll-snap-type:y proximity (데스크톱 + 모션 허용).
   ★ 핀이 걸린 .ch-record 는 scroll-snap-align:none — 스냅이 핀 스크럽을 튕겨내면 안 된다.
   ⚠ scroll-behavior:smooth 전역 금지 (Lenis 충돌) — 모바일 미디어쿼리에서만
   ⚠ 초기 숨김은 전부 html.js-anim 하위에만 (파일 하단 참조)
   ⚠ 파스텔 톤 금지 · 손글씨 폰트 금지 (P9 프리셋 규칙)
   ========================================================================== */

:root{
  --paper:#F7F8FA;
  --surface:#ECEFF4;
  --ink:#111827;
  --ink-2:#374151;
  --ink-3:#6B7280;
  --accent:#C6F24E;
  --accent-dk:#A9D62F;
  --night:#0B1220;
  --night-2:#131C2E;

  --line:rgba(17,24,39,.10);
  --line-2:rgba(17,24,39,.18);
  --line-n:rgba(247,248,250,.14);

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

  --wrap:1280px;
  --gut:clamp(20px,4vw,52px);
  --rail-w:clamp(94px,9.5vw,146px);
  --grid:24px;                 /* 모눈 그리드 단위 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.72;word-break:keep-all;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pc-br{display:none}
@media(min-width:820px){.pc-br{display:inline}}
.dim{color:var(--ink-3);font-size:.86em}

/* 숫자는 전부 tabular-nums — P9 규칙 */
.hf-num,.rlog-v,.rail-seg,.rail-pct,.wk-num,.lv-code,.tt-time,.f-count,.x-lbl,.y-lbl{
  font-variant-numeric:tabular-nums;
}

/* 사진 통일 처리 — P9: contrast 1.08 · saturate .9 + 네이비 8% multiply */
.hero-media img,.lv-fig img,.sm-fig img,.mg-fig img,.mg-night img,.visit-fig img{
  filter:contrast(1.08) saturate(.9);
}
.lv-fig,.sm-fig,.mg-fig,.mg-night,.visit-fig{position:relative;overflow:hidden}
.lv-fig::after,.sm-fig::after,.mg-fig::after,.mg-night::after,.visit-fig::after{
  content:'';position:absolute;inset:0;background:var(--night);
  opacity:.08;mix-blend-mode:multiply;pointer-events:none;
}

/* ---------- 모눈 그리드 배경 (24px) — P9 모티프 ---------- */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(17,24,39,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.045) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35) 60%, rgba(0,0,0,.9));
}

/* ---------- 형광펜 하이라이트 (액센트 40% 밑줄) — P9 모티프 ---------- */
/* 형광펜은 글자 "뒤"에 깔려야 한다.
   ⚠ background-image 를 요소에 직접 걸면 큰 웨이트에서 글자를 덮은 것처럼 보인다.
     ::before 를 z-index -1 로 깔고 글자는 그 위에 둔다. */
.mark{
  font-style:normal;position:relative;display:inline-block;
  padding:0 .08em;isolation:isolate;
}
.mark::before{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.36em;
  background:rgba(198,242,78,.55);z-index:-1;
  transform:skewX(-2deg);
}
.hero-h1 .mark::before{height:.24em;bottom:.1em;background:rgba(198,242,78,.85)}

/* ---------- 로딩 커튼 ---------- */
.curtain{position:fixed;inset:0;z-index:220;background:var(--night);display:grid;place-items:center;text-align:center}
.curtain-word{
  font-weight:900;font-size:clamp(48px,11vw,132px);line-height:1;
  letter-spacing:-.03em;color:var(--paper);
}
.curtain-sub{margin-top:14px;font-size:11px;letter-spacing:.32em;color:var(--accent)}
.curtain-bar{width:min(230px,52vw);height:2px;background:rgba(247,248,250,.16);margin:26px auto 0}
.curtain-bar span{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- 타이포 ---------- */
.h2{
  font-weight:850;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(30px,5.4vw,72px);
}
.h2-night{color:var(--paper)}
.label{
  font-size:10.5px;letter-spacing:.3em;font-weight:600;color:var(--ink-3);
  display:block;
}
.label.accent{color:var(--accent-dk)}
.sec-lead{margin-top:20px;color:var(--ink-2);font-size:clamp(14.5px,1.55vw,17.5px);max-width:58ch}
.sec-head{margin-bottom:clamp(32px,4.6vw,62px)}
.sec-head .h2{margin-top:14px}
.sec-head-row{display:grid;gap:24px}
@media(min-width:1000px){
  .sec-head-row{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:48px}
  .sec-lead-side{margin-top:0;max-width:38ch}
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:3px;font-size:14.5px;font-weight:800;
  letter-spacing:-.01em;transition:background .22s,color .22s,border-color .22s;will-change:transform;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000}
.btn-ghost{border:2px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(17,24,39,.04)}
.btn-mini{padding:11px 19px;font-size:12.5px;background:var(--accent);color:var(--ink);border-radius:3px;font-weight:800}
.btn-mini:hover{background:var(--accent-dk)}

/* ---------- 헤더 ---------- */
.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(247,248,250,.94);border-bottom-color:var(--line);backdrop-filter:blur(10px)}
.head-inner{display:flex;align-items:center;gap:22px;height:70px}
.logo{display:flex;align-items:center;gap:9px;min-width:0}
.logo-mark{width:25px;height:25px;border-radius:3px;background:var(--accent);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0}
.logo-txt{font-weight:900;font-size:19px;letter-spacing:-.03em}
.logo-en{font-size:10px;letter-spacing:.2em;color:var(--ink-3);display:none}
@media(min-width:560px){.logo-en{display:inline}}
.gnb{display:none;gap:26px;margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2)}
@media(min-width:1000px){.gnb{display:flex}}
.gnb a{position:relative;padding-bottom:2px}
.gnb a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:6px;
  background:rgba(198,242,78,.62);z-index:-1;transition:right .3s cubic-bezier(.16,1,.3,1)}
.gnb a:hover::after{right:0}
@media(max-width:999px){.btn-mini{margin-left:auto}}
.site-head.on-night .logo-txt,.site-head.on-night .gnb{color:var(--paper)}
.site-head.on-night .logo-en{color:rgba(247,248,250,.55)}
.site-head.on-night.is-stuck{background:rgba(11,18,32,.9);border-bottom-color:var(--line-n)}

/* ==========================================================================
   ★ 챕터 인디케이터 — 시간표 레일 (아키타입 B)
   ========================================================================== */
.rail{
  display:none;position:fixed;right:0;top:0;bottom:0;width:var(--rail-w);z-index:80;
  padding:88px 16px 26px;border-left:1px solid var(--line);
  background:rgba(236,239,244,.55);backdrop-filter:blur(6px);
  flex-direction:column;
}
@media(min-width:1024px){.rail{display:flex}}
.rail-top{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.rail-lbl{font-size:9px;letter-spacing:.26em;color:var(--ink-3)}
.rail-seg{font-size:26px;font-weight:600;line-height:1;color:var(--ink)}
.rail-list{list-style:none;display:flex;flex-direction:column;gap:2px;flex:1}
.rl{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;
  padding:7px 0;font-size:11px;color:var(--ink-3);transition:color .25s}
.rl-num{font-size:10px;letter-spacing:.06em}
.rl-bar{grid-column:1/-1;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.rl-bar::after{content:'';position:absolute;inset:0;right:100%;background:var(--accent);transition:right .45s cubic-bezier(.16,1,.3,1)}
.rl-name{font-size:11px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl.is-on{color:var(--ink)}
.rl.is-on .rl-bar::after{right:0}
.rl:hover{color:var(--ink-2)}
.rail-gauge{height:3px;background:var(--line-2);margin-top:14px}
.rail-gauge span{display:block;height:100%;width:0;background:var(--ink)}
.rail-pct{font-size:10px;color:var(--ink-3);margin-top:7px;text-align:right}
/* 나이트 챕터에서 레일 반전 */
.rail.on-night{background:rgba(11,18,32,.72);border-left-color:var(--line-n)}
.rail.on-night .rail-seg,.rail.on-night .rl.is-on{color:var(--paper)}
.rail.on-night .rail-lbl,.rail.on-night .rl,.rail.on-night .rail-pct{color:rgba(247,248,250,.5)}
.rail.on-night .rl-bar{background:var(--line-n)}
.rail.on-night .rail-gauge{background:var(--line-n)}
.rail.on-night .rail-gauge span{background:var(--accent)}

/* ==========================================================================
   ★ 아키타입 B — 스냅 챕터
   ========================================================================== */
.chapters{position:relative;z-index:2}

/* 스냅은 데스크톱 + 모션 허용에서만. proximity라 답답하지 않다. */
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  .chapter{scroll-snap-align:start;scroll-snap-stop:normal}
  /* ★ 핀 구간은 스냅 제외 — 스냅이 핀 스크럽을 튕겨내면 시그니처가 깨진다 */
  .ch-record{scroll-snap-align:none}
  /* 마지막 장은 푸터 때문에 100svh를 넘으므로 시작점 정렬 */
  .ch-visit{scroll-snap-align:start}
}

.chapter{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(98px,12vh,138px) 0 clamp(56px,7vh,92px);
  /* ⚠ overflow:hidden 금지 — 핀 구간과 100svh를 넘는 장에서 내용이 잘린다 */
}
.ch-inner{position:relative;z-index:3;width:100%}
@media(min-width:1024px){.chapter{padding-right:var(--rail-w)}}

/* 명암 리듬: 밝은 페이퍼 기조 + 나이트 다크 1장 + 서피스 교차 */
.ch-level{background:var(--surface)}
.ch-record{background:var(--night)}
.ch-curri{background:var(--paper)}
.ch-staff{background:var(--surface)}
.ch-manage{background:var(--paper)}
.ch-visit{background:var(--surface)}

/* ==========================================================================
   章 01 — 히어로 (풀블리드 + 2중 스크림)
   ========================================================================== */
.ch-hero{justify-content:flex-end;background:var(--night)}
/* ★ overflow:hidden 필수 — 패럴랙스 scale 확대분이 모바일 가로 오버플로를 만든다 */
.hero-media{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;will-change:transform}
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim-a{background:linear-gradient(to top, rgba(11,18,32,.94) 0%, rgba(11,18,32,.72) 38%, rgba(11,18,32,.18) 74%, rgba(11,18,32,.34) 100%)}
.scrim-b{background:linear-gradient(105deg, rgba(11,18,32,.86) 0%, rgba(11,18,32,.5) 42%, rgba(11,18,32,0) 74%)}

.hero-inner{padding-bottom:clamp(20px,5vh,54px)}
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.22em;
  color:var(--accent);font-weight:600;
}
.kicker .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0}
.hero-h1{
  margin-top:20px;color:var(--paper);font-weight:900;letter-spacing:-.045em;
  font-size:clamp(40px,8vw,118px);line-height:1.02;
}
.hero-h1 .hl{display:block;overflow:hidden}
.hero-lead{margin-top:24px;color:rgba(247,248,250,.76);font-size:clamp(14.5px,1.6vw,18px);max-width:62ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ch-hero .btn-primary{background:var(--accent);color:var(--ink)}
.ch-hero .btn-primary:hover{background:var(--accent-dk)}
.ch-hero .btn-ghost{border-color:rgba(247,248,250,.34);color:var(--paper)}
.ch-hero .btn-ghost:hover{border-color:var(--paper);background:rgba(247,248,250,.07)}

.hero-facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,54px);
  margin-top:clamp(32px,5vh,52px);padding-top:22px;border-top:1px solid rgba(247,248,250,.16);
}
.hero-facts li{display:flex;flex-direction:column;gap:3px}
.hf-num{font-size:clamp(22px,3vw,34px);font-weight:600;color:var(--accent);line-height:1}
.hf-lbl{font-size:12px;color:rgba(247,248,250,.6);letter-spacing:-.01em}
.hf-lbl sup{color:var(--accent)}
.hero-note{margin-top:14px;font-size:10.5px;color:rgba(247,248,250,.42);letter-spacing:.02em}

.ch-foot{
  position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-top:clamp(22px,4vh,42px);font-size:10px;letter-spacing:.2em;
  color:rgba(247,248,250,.42);
}
.scroll-tag{display:inline-flex;align-items:center;gap:8px}
.scroll-tag i{display:block;width:26px;height:1px;background:var(--accent);transform-origin:left;
  animation:sc 1.9s ease-in-out infinite}
@keyframes sc{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}

/* ==========================================================================
   章 02 — 진단·레벨 편성
   ========================================================================== */
.level-grid{display:grid;gap:clamp(28px,4vw,54px)}
@media(min-width:1000px){.level-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.lv-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.lv{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:clamp(18px,2.4vw,26px);position:relative;
}
.lv::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.lv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lv-code{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--ink)}
.lv-tag{font-size:10px;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line-2);padding:2px 8px;border-radius:2px}
.lv-name{margin-top:9px;font-size:clamp(17px,2vw,21px);font-weight:800;letter-spacing:-.03em}
.lv-desc{margin-top:7px;font-size:14px;color:var(--ink-2);line-height:1.68}

/* 진도 게이지 바 — P9 모티프 */
.gauge{margin-top:14px;height:6px;background:rgba(17,24,39,.09);border-radius:2px;overflow:hidden}
.gauge-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}

.lv-fig{border-radius:4px}
.lv-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.lv-fig figcaption{
  position:relative;z-index:2;margin-top:10px;font-size:10.5px;letter-spacing:.01em;
  color:var(--ink-3);line-height:1.6;
}

/* 체크박스 리스트 — P9 모티프 */
.chk-list{list-style:none;display:grid;gap:10px;margin-top:clamp(28px,4vw,46px)}
@media(min-width:760px){.chk-list{grid-template-columns:1fr 1fr;gap:12px 32px}}
.chk-tight{margin-top:20px}
@media(min-width:760px){.chk-tight{grid-template-columns:1fr}}
.chk{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--ink-2);
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.chk-box{
  width:16px;height:16px;flex-shrink:0;margin-top:4px;border:1.6px solid var(--ink);
  border-radius:2px;position:relative;background:var(--accent);
}
.chk-box::after{
  content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(42deg);
}

/* ==========================================================================
   ★★ 章 03 — 성적 그래프 스크럽 (시그니처 · 나이트)
   핀 트리거 = 핀 대상 = .rec-stage
   ========================================================================== */
/* ★ 핀 章은 flex 컨테이너면 안 된다.
   ⚠ 실측 버그: .chapter{display:flex} 상태에서 핀을 걸면 GSAP 이 만든 pin-spacer 가
     flex 아이템이 되어 높이(900+3400)가 무시되고 100svh 로 눌린다.
     그 결과 다음 章이 fixed 된 스테이지 위로 올라와 시그니처가 가려진다.
     display:block 으로 두어 spacer 가 제 높이를 갖게 한다. */
.ch-record{padding:0;display:block}
/* 핀 대상. 100svh 를 "넘지 않아야" 한다 —
   넘으면 핀이 걸린 내내 로그 카드가 화면 밖에 머물러 시그니처가 안 보인다. */
.rec-stage{
  min-height:100svh;display:flex;align-items:center;
  padding:clamp(76px,9vh,100px) 0 clamp(28px,4vh,48px);
}
.rec-inner{width:100%}
@media(min-width:1024px){.rec-stage{max-height:100svh;overflow:hidden}}
@media(min-width:1024px){.rec-stage{padding-right:var(--rail-w)}}
.rec-inner{position:relative;z-index:3}
/* 데스크톱 2단 — 좌: 헤드+로그 / 우: 그래프.
   1단으로 쌓으면 높이가 100svh 를 넘어 로그가 화면 밖으로 나간다. */
.rec-cols{display:grid;gap:clamp(20px,3vw,40px)}
@media(min-width:1024px){
  .rec-cols{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center}
}
.rec-head{max-width:64ch;display:flex;flex-direction:column}
.rec-head .h2{margin-top:10px;font-size:clamp(28px,4.2vw,54px)}
.rec-lead{margin-top:12px;color:rgba(247,248,250,.66);font-size:clamp(13.5px,1.4vw,15.5px);max-width:56ch}

.chart-wrap{margin-top:clamp(20px,2.6vw,30px);position:relative}
.chart{width:100%;height:auto;display:block;overflow:visible}
/* ★ 핀 구간 전체가 100svh 안에 들어가야 한다.
   SVG 를 컨테이너 폭에 그대로 맡기면 높이 560px 이 나와 로그 카드가 화면 밖으로 밀린다.
   뷰포트 높이에 연동해 상한을 건다. */
@media(min-width:1024px){
  .chart{max-height:min(46svh,420px);width:auto;max-width:100%;margin:0 auto}
}
.gline,.hline{stroke:rgba(247,248,250,.14)}
.hline{stroke:rgba(247,248,250,.2)}
.target-line{stroke:var(--accent);stroke-width:1.6;opacity:.72}
.t-lbl{fill:var(--accent);font-size:10px;letter-spacing:.18em}
.cross-glow{
  fill:var(--accent);opacity:0;
  filter:blur(14px);
}
.line-main{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pt{fill:var(--night);stroke:var(--accent);stroke-width:2.2}
.pt.is-cross{fill:var(--accent);stroke:var(--accent)}
.x-lbl text,.y-lbl text{fill:rgba(247,248,250,.44);font-size:10.5px;letter-spacing:.06em;font-family:var(--mono)}

.chart-cap{
  margin-top:14px;font-size:10.5px;line-height:1.7;color:rgba(247,248,250,.5);
  max-width:74ch;letter-spacing:0;
}
.chart-cap strong{color:var(--accent);font-weight:600}

.rec-log{
  display:grid;gap:12px;margin-top:clamp(20px,3vw,30px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:820px) and (max-width:1023px){.rec-log{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}}
/* 데스크톱 좌측 컬럼에서는 2×2 격자 — 4열로 두면 좁아서 숫자가 깨진다 */
@media(min-width:1024px){.rec-log{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}}
.rlog{
  border-top:1px solid var(--line-n);padding-top:12px;
  display:flex;flex-direction:column;gap:4px;
}
@media(min-width:820px) and (max-width:1023px){
  .rlog{padding:12px 20px 0;border-left:1px solid var(--line-n)}
  .rlog:first-child{padding-left:0;border-left:0}
}
.rlog-k{font-size:9.5px;letter-spacing:.2em;color:rgba(247,248,250,.42)}
.rlog-v{font-size:clamp(24px,3.4vw,40px);font-weight:600;color:var(--accent);line-height:1.05}
.rlog-u{font-size:14px;color:rgba(247,248,250,.5);margin-left:-2px}
.rlog-state-v{font-size:clamp(15px,1.8vw,20px);font-weight:800;color:var(--paper);
  font-family:var(--sans);letter-spacing:-.02em}
.rlog-state.is-hit .rlog-state-v{color:var(--accent)}

.rec-bar{margin-top:clamp(18px,2.6vw,28px);height:3px;background:var(--line-n)}
.rec-bar span{display:block;height:100%;width:0;background:var(--accent)}
.rec-hint{margin-top:9px;font-size:10px;letter-spacing:.2em;color:rgba(247,248,250,.34)}

/* ==========================================================================
   章 04 — 12주 커리큘럼
   ========================================================================== */
.wk-list{list-style:none;display:grid;gap:14px}
@media(min-width:700px){.wk-list{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.wk-list{grid-template-columns:repeat(4,1fr)}}
.wk{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;
}
.wk-num{font-size:10px;letter-spacing:.2em;color:var(--ink-3);font-weight:600}
.wk-t{margin-top:12px;font-size:clamp(17px,1.9vw,20px);font-weight:850;letter-spacing:-.035em;line-height:1.28}
.wk-d{margin-top:10px;font-size:13.5px;color:var(--ink-2);line-height:1.68;flex:1}
.wk .gauge{margin-top:18px}

/* 형광 스트립 (페이지당 1곳) — P9 명암 리듬 */
.strip{
  margin-top:clamp(34px,5vw,64px);background:var(--accent);
  padding:clamp(24px,3.6vw,44px) 0;
  margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);
}
.strip-in{padding-left:var(--gut);padding-right:var(--gut)}
.strip-t{font-size:clamp(19px,3.1vw,38px);font-weight:900;letter-spacing:-.04em;line-height:1.2;color:var(--ink)}
.strip-t em{font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.strip-d{margin-top:10px;font-size:11.5px;letter-spacing:.08em;color:rgba(17,24,39,.66)}

/* ==========================================================================
   章 05 — 강사 · 시간표 (Flip 필터)
   ========================================================================== */
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(20px,2.6vw,30px)}
.f-btn{
  padding:9px 17px;border:1.5px solid var(--line-2);border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s;
}
.f-btn:hover{border-color:var(--ink);color:var(--ink)}
.f-btn.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.f-count{margin-left:auto;font-size:10.5px;letter-spacing:.14em;color:var(--ink-3)}

.tt-grid{display:grid;gap:12px}
@media(min-width:640px){.tt-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.tt-grid{grid-template-columns:repeat(4,1fr)}}
.tt{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:18px 18px 20px;position:relative;
}
.tt::after{
  content:'';position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.tt:hover::after{transform:scaleX(1)}
.tt.is-hidden{display:none}
.tt-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tt-sub{font-size:9.5px;letter-spacing:.2em;font-weight:600;color:var(--ink);
  background:var(--accent);padding:3px 7px;border-radius:2px}
.tt-day{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}
.tt-t{margin-top:13px;font-size:15.5px;font-weight:800;letter-spacing:-.03em;line-height:1.34}
.tt-time{margin-top:7px;font-size:12.5px;font-weight:500;color:var(--ink)}
.tt-d{margin-top:8px;font-size:12.5px;color:var(--ink-3);line-height:1.62}

.staff-media{display:grid;gap:12px;margin-top:clamp(22px,3vw,36px)}
@media(min-width:760px){.staff-media{grid-template-columns:1.35fr 1fr}}
.sm-fig{border-radius:4px}
.sm-fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
@media(min-width:760px){.staff-media .sm-fig:last-child img{aspect-ratio:auto;min-height:100%}}

/* ==========================================================================
   章 06 — 학습 관리 시스템
   ========================================================================== */
.mg-grid{display:grid;gap:clamp(26px,3.6vw,48px)}
@media(min-width:1000px){.mg-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.mg-steps{list-style:none;display:flex;flex-direction:column;gap:0}
.mg{
  display:grid;grid-template-columns:auto 1fr;gap:4px 18px;
  padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--line);
}
.mg:last-child{border-bottom:1px solid var(--line)}
.mg-n{grid-row:1/3;font-size:11px;letter-spacing:.14em;color:var(--accent-dk);font-weight:600;padding-top:4px}
.mg-t{font-size:clamp(16px,1.9vw,20px);font-weight:850;letter-spacing:-.035em}
.mg-d{font-size:13.5px;color:var(--ink-2);line-height:1.68}
.mg-side{display:flex;flex-direction:column;gap:0}
.mg-fig{border-radius:4px}
.mg-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mg-night{margin-top:clamp(28px,4vw,52px);border-radius:4px}
.mg-night img{width:100%;aspect-ratio:16/7;object-fit:cover;will-change:transform}
.mg-night figcaption{
  position:relative;z-index:2;margin-top:11px;font-size:12px;color:var(--ink-3);
}

/* ==========================================================================
   章 07 — 상담 + 푸터
   ========================================================================== */
.ch-visit{justify-content:space-between}
.visit-grid{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:980px){.visit-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}}
.visit-copy .h2{margin-top:12px}
.visit-info{margin-top:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:0}
.visit-info>div{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line)}
.visit-info>div:last-child{border-bottom:1px solid var(--line)}
.visit-info dt{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}
.visit-info dd{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.visit-info dd a{border-bottom:2px solid var(--accent)}
.visit-note{margin-top:22px;font-size:11.5px;line-height:1.75;color:var(--ink-3);max-width:56ch}
.visit-side{display:grid;gap:12px}
@media(min-width:520px){.visit-side{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.visit-side{grid-template-columns:1fr}}
.visit-fig{border-radius:4px}
.visit-fig img{width:100%;aspect-ratio:16/9;object-fit:cover}

.site-foot{
  position:relative;z-index:3;margin-top:clamp(40px,6vh,80px);
  background:var(--night);color:var(--paper);padding:clamp(32px,4.6vw,56px) 0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
@media(min-width:1024px){.site-foot{margin-right:calc(50% - 50vw + var(--rail-w))}}
.foot-in{display:flex;flex-direction:column;gap:14px}
.foot-brand{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.foot-en{font-size:10px;letter-spacing:.22em;color:var(--accent)}
.foot-note{font-size:13px;color:rgba(247,248,250,.66);max-width:64ch;line-height:1.72}
.foot-note strong{color:var(--accent);font-weight:700}
.foot-legal{font-size:10px;letter-spacing:.04em;color:rgba(247,248,250,.36);
  padding-top:14px;border-top:1px solid var(--line-n)}

/* ==========================================================================
   SplitText 라인 마스크
   ========================================================================== */
.sp-line{overflow:hidden;will-change:transform}

/* ==========================================================================
   태블릿 이하 (<=1023px) — 핀·스냅 해제. 핀 의존 요소를 CSS가 정적으로 살린다.
   ========================================================================== */
@media(max-width:1023px){
  html{scroll-snap-type:none !important}
  .chapter{
    scroll-snap-align:none;
    min-height:0;                       /* 100svh 강제 해제 → 내용 길이만큼 */
    padding:clamp(74px,10vh,104px) 0 clamp(52px,7vh,80px);
    display:block;
  }
  .ch-hero{min-height:100svh;display:flex}
  /* ★ 함정 대응 — 핀이 해제돼도 시그니처 그래프가 반드시 보인다 */
  .rec-stage{min-height:0;padding:0;display:block}
  .rec-log{margin-top:22px}
  .rec-hint{display:none}
}

/* 모바일 (<=760px) */
@media(max-width:760px){
  /* 모바일에서 SVG 가 너무 납작해진다 — 좌우를 살짝 넘겨 세로 높이를 확보 */
  .chart{min-height:220px}
  .hero-facts{gap:18px 26px}
  .hf-num{font-size:22px}
  .strip{margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1)}
  .visit-info>div{grid-template-columns:1fr;gap:3px}
  .chart-wrap{margin-left:calc(var(--gut)*-.5);margin-right:calc(var(--gut)*-.5)}
  /* 모바일 스무스 스크롤은 여기서만 (Lenis 미가동 구간) */
  html{scroll-behavior:smooth}
  .rec-log{grid-template-columns:1fr 1fr;gap:10px}
  .rlog-v{font-size:24px}
}

/* ==========================================================================
   ★ 초기 숨김 — 반드시 html.js-anim 하위에만.
     GSAP 로드 실패 시 main.js가 클래스를 제거하며 콘텐츠가 살아난다.
   ========================================================================== */
html.js-anim .fade-up{opacity:0}
html.js-anim .lv{opacity:0}
html.js-anim .chk{opacity:0}
html.js-anim .wk{opacity:0}
html.js-anim .mg{opacity:0}
html.js-anim .visit-info>div{opacity:0}
/* ⚠ .tt(시간표 카드)는 Flip 대상이라 초기 숨김을 걸지 않는다 —
     필터 후 영영 안 보이는 사고가 난다 */

/* DrawSVG 대상은 js-anim 하위에서만 감춘다 (GSAP 실패 시 그래프가 살아나야 한다) */
html.js-anim .gline,
html.js-anim .hline,
html.js-anim .target-line,
html.js-anim .line-main,
html.js-anim .pt{opacity:0}

/* 게이지 바 — JS가 채운다. 실패 시 CSS 변수값으로 즉시 채워진다. */
html:not(.js-anim) .gauge-fill{width:var(--w,100%)}
html.js-anim .gauge-fill{width:0}

/* ==========================================================================
   ★ 폴백 안전망 — html에 js-anim 이 없으면(=GSAP 실패/차단) 전부 보이게.
     기본 규칙에 opacity:0을 걸면 폴백이 죽는다. html:not(.js-anim) 로 직접 겨냥한다.
   ========================================================================== */
html:not(.js-anim) .fade-up,
html:not(.js-anim) .lv,
html:not(.js-anim) .chk,
html:not(.js-anim) .wk,
html:not(.js-anim) .mg,
html:not(.js-anim) .visit-info>div,
html:not(.js-anim) .tt,
html:not(.js-anim) .gline,
html:not(.js-anim) .hline,
html:not(.js-anim) .target-line,
html:not(.js-anim) .line-main,
html:not(.js-anim) .pt{opacity:1 !important;transform:none !important;visibility:visible !important}
html:not(.js-anim) .curtain{display:none !important}
html:not(.js-anim) .sp-line{overflow:visible}

/* ==========================================================================
   reduced-motion — 모션은 없애되 콘텐츠는 전부 살린다
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-snap-type:none !important;scroll-behavior:auto}
  .chapter{scroll-snap-align:none;min-height:0;display:block;
    padding:clamp(66px,9vh,96px) 0 clamp(48px,6vh,72px)}
  .ch-hero{min-height:100svh;display:flex}
  .rec-stage{min-height:0;padding:0;display:block}
  .scroll-tag i{animation:none;transform:scaleX(1)}
  html.js-anim .fade-up,html.js-anim .lv,html.js-anim .chk,html.js-anim .wk,
  html.js-anim .mg,html.js-anim .visit-info>div,
  html.js-anim .gline,html.js-anim .hline,html.js-anim .target-line,
  html.js-anim .line-main,html.js-anim .pt{opacity:1 !important}
  html.js-anim .gauge-fill{width:var(--w,100%)}
  .sp-line{overflow:visible}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}