/* 수학·과학 세계 · "모눈 노트 위의 풀이" (📚 보드 01_수학과학 §4)
 * 노트 종이 #F7F6F2 · 잉크 네이비 #16234A(글자·버튼·도형) · 빨간펜 #D2462E(보조선·밑줄·체크만 · 5%) · 청사진 하늘 #DCE4EC(로드맵 면)
 * 제목·숫자 = IBM Plex Sans KR 600 · 본문 Pretendard 400/600 */
:root{--head:"IBM Plex Sans KR",var(--font)}
.h-l,.sec-title,.cta-end h2,.director blockquote p,.road h3,.diff-list h3,.steps h3,.fees td.fee strong,.tt-cls small,.eq,.lb,.steps .n,.diff-list .n{font-family:var(--head);font-weight:600}

/* ── 첫 화면 ───────────────────────────── */
.hero{position:relative;padding:24px 0 8px;overflow:hidden}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;
  background-image:linear-gradient(rgba(22,35,74,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(22,35,74,.08) 1px,transparent 1px),
    linear-gradient(rgba(22,35,74,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(22,35,74,.025) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,8px 8px,8px 8px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.hero-in{position:relative}
.eyebrow{display:block;font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:0;margin-bottom:12px}
.h-l{display:block;font-size:34px;line-height:1.26;letter-spacing:-.03em}
.ul{position:relative;display:inline-block}
.ul-line{position:absolute;left:0;right:0;bottom:1px;height:3px;background:var(--accent);border-radius:2px;transform-origin:0 50%}
.hero-sub{margin-top:16px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.hero-act{margin-top:24px;display:flex;align-items:center;flex-wrap:wrap}
.hero-act .btn{margin-right:20px}
.hero-fig{margin:24px -4px 0;position:relative}
.hero-fig>svg{width:100%;height:auto;overflow:visible}
.hero-fig .ln{stroke:var(--ink);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hero-fig .ax{stroke:var(--accent);stroke-width:2.25;stroke-linecap:round}
.hero-fig .pt{fill:var(--bg);stroke:var(--ink);stroke-width:2}
.hero-fig .wa{fill:rgba(22,35,74,.12)}
.hero-fig .wb{fill:var(--mood)}
.hero-fig .arc-g{fill:none;stroke:var(--ink);stroke-width:1.5}
.hero-fig .lb{font-size:17px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.eq{display:flex;align-items:center;justify-content:flex-end;font-size:18px;color:var(--ink);margin-top:4px}
.eq i{font-style:normal}
.check{flex:none;width:26px;height:22px;margin-left:10px;overflow:visible}
.check path{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* 재생 전 모습은 html.fx 에서만 · .go 가 붙으면 한 번 재생하고 멈춤 (transform · opacity 만) */
.fx .hero .h-in{opacity:0;transform:translate3d(0,14px,0)}
.fx .hero.go .h-in{opacity:1;transform:none;transition:opacity 640ms var(--ease-out) var(--d),transform 640ms var(--ease-out) var(--d)}
.fx .hero .ul-line{transform:scaleX(0)}
.fx .hero.go .ul-line{transform:scaleX(1);transition:transform 620ms var(--ease-out) var(--d)}
.fx .hero .ln{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%}
.fx .hero.go .ln{transform:scaleX(1);transition:transform var(--ms) cubic-bezier(.65,0,.35,1) var(--d)}
.fx .hero .pt{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:50% 50%}
.fx .hero.go .pt{opacity:1;transform:none;transition:opacity 300ms var(--ease-out) var(--d),transform 420ms var(--ease-out) var(--d)}
.fx .hero .ax{opacity:0}
.fx .hero.go .ax{opacity:1;transition:opacity 180ms linear var(--d)}
.fx .hero .wg,.fx .hero .arc-g,.fx .hero .lb{opacity:0}
.fx .hero.go .wg,.fx .hero.go .arc-g,.fx .hero.go .lb{opacity:1;transition:opacity 480ms var(--ease-out) var(--d)}
.eq span{display:inline-block}
.fx .hero .eq span{opacity:0;transform:translate3d(0,8px,0)}
.fx .hero.go .eq span{opacity:1;transform:none;transition:opacity 500ms var(--ease-out) 2750ms,transform 500ms var(--ease-out) 2750ms}
.fx .hero .check{opacity:0;transform:scale(.4) rotate(-12deg);transform-origin:30% 80%}
.fx .hero.go .check{opacity:1;transform:none;transition:opacity 200ms var(--ease-out) var(--d),transform 380ms var(--ease-out) var(--d)}

@media (min-width:1024px){
  .hero{padding:56px 0 24px}
  .hero-in{display:grid;grid-template-columns:5fr 6fr;grid-column-gap:48px;column-gap:48px;align-items:center;min-height:560px}
  .eyebrow{font-size:15px;margin-bottom:20px}
  .h-l{font-size:58px;line-height:1.22}
  .ul-line{height:4px;bottom:2px}
  .hero-sub{font-size:18px;margin-top:24px}
  .hero-act{margin-top:40px}
  .hero-fig{margin:0}
  .eq{font-size:20px}
}

/* ── 다른 점: 번호 목록 3줄 + 선 그림 1개씩 ───── */
.diff-list li{position:relative;padding:24px 56px 24px 0;border-top:1px solid var(--line)}
.diff-list li:last-child{border-bottom:1px solid var(--line)}
.diff-list .glyph{position:absolute;right:0;top:24px;color:var(--ink)}
.diff-list .n{display:block;font-size:14px;color:var(--ink-2);margin-bottom:8px}
.diff-list h3{font-size:19px;line-height:1.45;letter-spacing:-.02em}
.diff-list p{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.6}
@media (min-width:1024px){
  .diff-list li{display:grid;grid-template-columns:96px 5fr 6fr 64px;grid-column-gap:32px;column-gap:32px;align-items:center;padding:40px 0}
  .diff-list .glyph{position:static;justify-self:end;grid-column:4;grid-row:1}
  .diff-list .n{margin:0;font-size:16px}
  .diff-list h3{font-size:24px}
  .diff-list p{margin:0;font-size:16px}
}

/* ── 학년 로드맵: 분위기 면 · 폰 세로 흐름 / PC 가로 흐름 ── */
.band{margin-top:var(--sec);padding:96px 0;background:var(--mood)}
.road{position:relative;margin-top:8px}
.road li{position:relative;padding:0 0 32px 36px}
.road li:last-child{padding-bottom:0}
.road li::before{content:"";position:absolute;left:7px;top:20px;bottom:-4px;width:2px;background:rgba(22,35,74,.22)}
.road li:last-child::before{display:none}
.road .node{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.road .grade{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.road h3{font-size:20px;line-height:1.4;margin-top:4px;letter-spacing:-.02em}
.road p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.road .meta{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border-radius:6px;padding:4px 10px}
@media (min-width:1024px){
  .band{padding:144px 0}
  .road{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:32px;column-gap:32px;margin-top:16px}
  .road li{padding:40px 0 0}
  .road li::before{left:0;right:-32px;top:7px;bottom:auto;width:auto;height:2px}
  .road .node{top:0}
  .road h3{font-size:22px}
}

/* ── 시작하는 방법 3단계 ─────────────────── */
.steps{display:grid;grid-row-gap:24px;row-gap:24px}
.steps li{display:grid;align-content:start;grid-template-columns:40px 1fr;grid-column-gap:12px;column-gap:12px}
.steps .n{grid-row:1 / span 2;width:32px;height:32px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px}
.steps h3{font-size:18px;line-height:1.45;padding-top:3px}
.steps p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-top:4px}
.start-btn{margin-top:40px;width:100%}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(3,1fr);grid-column-gap:0;column-gap:0}
  .steps li{grid-template-columns:1fr;padding:0 32px;border-left:1px solid var(--line)}
  .steps li:first-child{padding-left:0;border-left:0}
  .steps .n{grid-row:auto;margin-bottom:16px}
  .steps h3{font-size:20px}
  .start-btn{width:auto;padding:0 40px;margin-top:56px}
}

/* ── 시간표 ─────────────────────────── */
.tt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 20px}
.tt-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.tt-head{border-top:0;padding:12px 0 10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.tt-cls{font-size:16px;font-weight:600;line-height:1.4}
.tt-cls small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.tt-days{display:grid;grid-template-columns:repeat(6,26px);grid-column-gap:4px;column-gap:4px}
.tt-days b{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border-radius:6px;color:var(--ink-2)}
.tt-row:not(.tt-head) .tt-days b{border:1px solid var(--line)}
.tt-days b.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tt-head .tt-days b{height:auto;border:0}
.tt-note{margin-top:16px;font-size:14px;color:var(--ink-2)}
@media (min-width:1024px){
  .tt{padding:8px 32px}
  .tt-row{padding:20px 0}
  .tt-cls{display:flex;align-items:baseline;font-size:17px}
  .tt-cls small{margin:0 0 0 16px;font-size:14px}
  .tt-days{grid-template-columns:repeat(6,40px);grid-column-gap:8px;column-gap:8px}
  .tt-days b{width:40px;height:32px;font-size:13px}
}

/* ── 원장 인사: 잉크 네이비 면 ─────────────── */
.sec-mood{margin-top:var(--sec);padding:96px 0;background:var(--ink);color:var(--bg)}
.sec-mood .sec-label{color:rgba(247,246,242,.7)}
.director blockquote{margin:0}
.director blockquote p{font-size:26px;line-height:1.42;letter-spacing:-.03em}
.dir-body{margin-top:40px;max-width:32em}
.dir-body p{color:rgba(247,246,242,.8);font-size:16px;line-height:1.7}
.dir-body p+p{margin-top:12px}
.dir-body .sign{margin-top:32px;color:var(--bg);font-weight:600;font-size:15px}
.dir-body .sign::before{content:"";display:inline-block;width:24px;height:2px;background:var(--accent);vertical-align:middle;margin-right:12px}
@media (min-width:1024px){
  .sec-mood{padding:144px 0}
  .director .wrap{display:grid;grid-template-columns:7fr 5fr;grid-column-gap:64px;column-gap:64px;align-items:end}
  .director .sec-label{grid-column:1 / -1}
  .director blockquote p{font-size:42px;line-height:1.34}
  .dir-body{margin:0}
}
.fees td.fee strong{font-size:19px}