/* 입시·재수 세계 · "새벽 6시 50분의 자습실 — 하루가 칸으로 채워지는 시간표 한 장" (📚 보드 09_입시재수 §4)
 * 시험지 종이 #F5F4F0 · 카드 #FFFFFF · 먹 #1D1D1B(글자·버튼·채운 칸) · 연필 #6B6A66(보조 글) · 연필 회색 #E4E2DB(식사 칸·일과표 면)
 * 채점 빨간펜 #B8342A 는 딱 3곳: 수능 D-day 숫자 · 시간표 "지금" 칸 · 폰 하단 상담 버튼 (5% 이하)
 * 제목·시간·숫자 = IBM Plex Sans KR 500(크게 · 굵게 쓰지 않음) · 본문 Pretendard 400/600 · 그라데이션 0 · 그림자 0 */
:root{--head:"IBM Plex Sans KR",var(--font);--on-ink:#FFFFFF}
.h-l,.sec-title,.cta-end h2,.director blockquote p,.pk,.day-list time,.ck,.cv,.sm,.fees td.fee strong,.dday b,.hr,.pn,.sn{font-family:var(--head);font-weight:500}
.sec-title{font-size:28px;line-height:1.3;letter-spacing:-.035em}
.sec-label{display:flex;align-items:center}
.sec-label::before{content:"";flex:none;width:8px;height:8px;border-radius:1.5px;background:var(--ink);margin-right:8px}
.sec-lead{font-size:15px;line-height:1.65}
.brand svg{margin-right:10px}

/* ── 첫 화면: 문장은 처음부터 읽히고, 시간표 칸만 채워진다 ─────── */
.hero{padding:32px 0 0}
.eyebrow{display:block;font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:0;margin-bottom:14px}
.h-l{display:block;font-size:34px;line-height:1.26;letter-spacing:-.045em}
.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}

.sheet{margin-top:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 16px 14px}
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;line-height:1.4;color:var(--ink-2)}
.sheet-t{font-weight:600;color:var(--ink)}
.dday[hidden]{display:none}
.dday b{font-size:16px;color:var(--accent);margin-left:6px;letter-spacing:-.01em}
.wk{display:grid;grid-template-columns:20px repeat(7,1fr);grid-template-rows:20px repeat(16,10px);grid-gap:4px 3px;gap:4px 3px;margin-top:12px}
.wk>*{grid-row-start:var(--h);grid-column-start:var(--d)}
.wd{font-size:11px;font-weight:600;line-height:20px;text-align:center;color:var(--ink-2)}
.wd.today{color:var(--ink)}
.hr{font-size:10px;line-height:10px;color:var(--ink-2);letter-spacing:0}
.c{position:relative;display:block;background:var(--bg);border-radius:2px}
.f{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:2px}
.f.s{background:var(--ink)}
.f.r{background:var(--mood)}
.now{position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--accent);border-radius:4px}
.legend{display:flex;align-items:center;margin-top:12px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;margin-right:14px}
.legend .lg-now{margin:0 0 0 auto}
.sw{width:10px;height:10px;border-radius:2px;margin-right:6px;flex:none}
.sw.s{background:var(--ink)}
.sw.r{background:var(--mood)}
.sw.n{border:2px solid var(--accent)}

/* 재생 전 모습은 html.fx 에서만 · .go 가 붙으면 한 번 채우고 멈춤 (transform · opacity 만) */
.fx .hero .f{transform:scaleY(0);transform-origin:50% 0}
.fx .hero.go .f{transform:none;transition:transform 340ms var(--ease-out) var(--t)}
.fx .hero .now,.fx .hero .lg-now{opacity:0;transform:scale(1.3)}
.fx .hero .lg-now{transform:translate3d(0,4px,0)}
.fx .hero.go .now,.fx .hero.go .lg-now{opacity:1;transform:none;transition:opacity 280ms var(--ease-out) 1600ms,transform 420ms var(--ease-out) 1600ms}

@media (min-width:1024px){
  .hero{padding:72px 0 0}
  .hero-copy{display:grid;grid-template-columns:1fr 360px;grid-column-gap:64px;column-gap:64px;align-items:end}
  .eyebrow{font-size:15px;margin-bottom:24px}
  .h-l{font-size:60px;line-height:1.2}
  .hero-sub{margin:0;font-size:17px}
  .hero-act{margin-top:28px}
  .sheet{margin-top:56px;padding:24px 32px 20px}
  .sheet-head{font-size:14px}
  .dday b{font-size:18px}
  .wk{grid-template-columns:32px repeat(16,1fr);grid-template-rows:22px repeat(7,24px);grid-gap:4px;gap:4px;margin-top:16px}
  .wk>*{grid-row-start:var(--d);grid-column-start:var(--h)}
  .wd{font-size:12px;line-height:24px;text-align:left}
  .hr{font-size:12px;line-height:22px}
  .legend{margin-top:16px;font-size:13px}
  .fx .hero .f{transform:scaleX(0);transform-origin:0 50%}
}

/* ── 나에게 맞는 반: 시간표 칸처럼 붙은 네 칸 ───────────── */
.pick-list{display:grid;grid-template-columns:1fr 1fr;grid-gap:1px;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.pick-list li{background:var(--surface)}
.pick-list a{position:relative;display:block;min-height:112px;padding:20px;transition:background-color 200ms}
.pick-list a:hover{background:var(--bg)}
.pick-list a:active{background:var(--bg)}
.pk{display:block;font-size:28px;line-height:1.2;letter-spacing:-.03em}
.pick-list span{display:block;margin-top:8px;font-size:14px;color:var(--ink-2)}
.pick-list svg{position:absolute;right:20px;top:26px;color:var(--ink-2)}
@media (min-width:1024px){
  .pick-list{grid-template-columns:repeat(4,1fr)}
  .pick-list a{min-height:160px;padding:32px}
  .pk{font-size:36px}
  .pick-list span{font-size:15px;margin-top:12px}
  .pick-list svg{right:32px;top:44px}
}

/* ── 하루 일과: 연필 회색 면 · 시간 줄 ───────────────── */
.band{margin-top:var(--sec);padding:96px 0;background:var(--mood)}
.day .sec-lead{color:var(--ink-2)}
.day-list li:not(:last-child)::before{content:"";position:absolute;left:67.5px;top:28px;bottom:-20px;width:1px;background:rgba(29,29,27,.24)}
.day-list li{position:relative;display:grid;grid-template-columns:56px 24px 1fr;align-items:start;padding:12px 0}
.day-list time{font-size:16px;line-height:24px;letter-spacing:0}
.day-list .nd{justify-self:center;margin-top:8px;width:8px;height:8px;border-radius:1.5px;background:var(--ink)}
.day-list b{display:block;font-size:16px;font-weight:600;line-height:24px}
.day-list span{display:block;font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:2px}
.day-list .rest time,.day-list .rest b{color:var(--ink-2)}
.day-list .rest b{font-weight:400}
.day-list .rest .nd{background:var(--mood);border:1.5px solid var(--ink-2)}
@media (min-width:1024px){
  .band{padding:144px 0}
  .day-in{display:grid;grid-template-columns:5fr 6fr;grid-column-gap:96px;column-gap:96px;align-items:start}
  .day-list li:not(:last-child)::before{left:83.5px;top:30px;bottom:-22px}
  .day-list li{grid-template-columns:72px 24px 1fr;padding:14px 0}
  .day-list time{font-size:18px}
  .day-list b{font-size:18px}
  .day-list span{font-size:15px}
}

/* ── 관리하는 것: 표 한 장 ─────────────────────── */
.care-row{display:grid;grid-template-columns:72px 1fr;border-top:1px solid var(--line);padding:24px 0}
.care-row p{grid-column:2}
.care-row .ck{grid-row:1 / span 2}
.care-row:last-child{border-bottom:1px solid var(--line)}
.care-row.care-head{display:none}
.ck{display:block;font-size:22px;line-height:1.2;letter-spacing:-.03em}
.care-row p{font-size:15px;line-height:1.6}
.care-row small{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
.care-row .cb{margin-top:12px;font-weight:600}
@media (min-width:1024px){
  .care-row p,.care-row .ck{grid-column:auto;grid-row:auto}
  .care-row{grid-template-columns:200px 1fr 320px;grid-column-gap:48px;column-gap:48px;align-items:baseline;padding:32px 0}
  .care-row.care-head{display:grid;border-top:0;padding:0 0 12px;font-size:13px;font-weight:600;color:var(--ink-2)}
  .care-row small{display:none}
  .ck{font-size:28px;margin:0}
  .care-row p{font-size:17px}
  .care-row .cb{margin:0;font-weight:600}
}

/* ── 반 안내: 먹 표지 + 한 줄 목록 ───────────────── */
.crs li{display:grid;grid-template-columns:64px 1fr;grid-column-gap:16px;column-gap:16px;padding:24px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.crs li:last-child{border-bottom:1px solid var(--line)}
.cv{grid-row:1 / span 2;width:64px;height:64px;border-radius:8px;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;font-size:20px;letter-spacing:-.03em}
.grade{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}
.crs h3{font-size:19px;line-height:1.4;letter-spacing:-.02em;margin-top:2px}
.crs p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.cmeta{grid-column:2;display:flex;align-items:baseline;justify-content:space-between;margin-top:12px;font-size:14px}
.cmeta span{color:var(--ink-2)}
.cmeta em{flex:none;margin-left:12px;font-style:normal;font-weight:600}
@media (min-width:1024px){
  .crs li{grid-template-columns:88px 1fr 280px;grid-column-gap:40px;column-gap:40px;align-items:center;padding:32px 0}
  .cv{grid-row:auto;width:88px;height:88px;font-size:26px;border-radius:12px}
  .crs h3{font-size:22px}
  .crs p{font-size:16px}
  .cmeta{grid-column:3;display:block;margin:0;text-align:right;font-size:15px}
  .cmeta span,.cmeta em{display:block}
  .cmeta em{margin:4px 0 0}
}

/* ── 자습 공간: 배치도 선 그림 ─────────────────── */
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.plan svg{width:100%;height:auto}
.plan .wall{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.plan .dk{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.plan .st{fill:var(--mood)}
.plan .box{fill:var(--mood);stroke:var(--ink);stroke-width:1.5}
.plan .tb{fill:none;stroke:var(--ink);stroke-width:1.5}
.plan .ch{fill:var(--mood);stroke:none}
.plan .pl{font-family:var(--font);font-size:11px;font-weight:600;fill:var(--ink-2);text-anchor:middle}
.plan .bd rect{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.plan .bd text{font-family:var(--head);font-weight:500;font-size:12px;fill:var(--ink);text-anchor:middle}
.room-list{margin-top:24px}
.room-list li{display:grid;grid-template-columns:36px 1fr;padding:16px 0;border-top:1px solid var(--line)}
.room-list li:last-child{border-bottom:1px solid var(--line)}
.room-list .pn{width:22px;height:22px;margin-top:1px;border:1.5px solid var(--ink);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.room-list h3{font-size:17px;line-height:1.45;font-weight:600}
.room-list p{margin-top:2px;font-size:15px;line-height:1.6;color:var(--ink-2)}
@media (min-width:1024px){
  .room-in{display:grid;grid-template-columns:5fr 6fr;grid-column-gap:96px;column-gap:96px;align-items:start}
  .room .sec-head{grid-column:1;grid-row:1}
  .room-list{grid-column:1;grid-row:2;margin:0}
  .plan{grid-column:2;grid-row:1 / span 2;padding:32px}
  .room-list h3{font-size:18px}
  .room-list p{font-size:16px}
}

/* ── 원장 인사: 종이 위 큰 문장 ─────────────────── */
.director blockquote{margin:0;border-top:2px solid var(--ink);padding-top:32px}
.director blockquote p{font-size:25px;line-height:1.48;letter-spacing:-.035em}
.dir-body{margin-top:32px;max-width:34em}
.dir-body p{color:var(--ink-2);font-size:16px;line-height:1.7}
.dir-body p+p{margin-top:12px}
.dir-body .sign{margin-top:24px;color:var(--ink);font-weight:600;font-size:15px}
@media (min-width:1024px){
  .dir-in{display:grid;grid-template-columns:7fr 5fr;grid-column-gap:96px;column-gap:96px;align-items:end}
  .director .sec-label{grid-column:1 / -1}
  .director blockquote{padding-top:48px}
  .director blockquote p{font-size:40px;line-height:1.4}
  .dir-body{margin:0}
}

/* ── 상담은 이렇게: 걸리는 시간이 먼저 보이게 ───────── */
.steps li{display:grid;grid-template-columns:72px 1fr;padding:20px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .sn{grid-row:1;grid-column:1;font-size:12px;color:var(--ink-2);line-height:20px}
.steps .sm{grid-row:2 / span 2;grid-column:1;font-size:22px;line-height:1.3;letter-spacing:-.03em}
.steps h3{grid-row:1 / span 2;grid-column:2;font-size:18px;line-height:1.45;font-weight:600;align-self:end}
.steps p{grid-row:3;grid-column:2;margin-top:4px;font-size:15px;line-height:1.6;color:var(--ink-2)}
@media (min-width:1024px){
  .steps{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:48px;column-gap:48px}
  .steps li{display:block;padding:24px 0 0;border-top:2px solid var(--ink)}
  .steps li:last-child{border-bottom:0}
  .steps .sn{display:block}
  .steps .sm{display:block;font-size:36px;margin-top:8px}
  .steps h3{margin-top:16px;font-size:20px}
  .steps p{font-size:16px}
}

/* ── 교습비 · 끝 상담 · 하단 막대 ─────────────────── */
.fees td.fee strong{font-size:20px}
.cta-end{margin-top:var(--sec);padding:96px 0;background:var(--ink);color:var(--bg)}
.cta-end .wrap>div{border-top:0;padding-top:0}
.cta-end h2{font-size:28px;line-height:1.35;letter-spacing:-.035em}
.cta-end p{color:rgba(245,244,240,.72)}
.cta-end .btn-main{background:var(--bg);color:var(--ink)}
.foot{border-top:0}
.bar .b-main{background:var(--accent)}
@media (min-width:1024px){
  .sec-title{font-size:40px;line-height:1.26}
  .cta-end{padding:144px 0}
  .cta-end h2{font-size:48px;line-height:1.25}
}