/* 홈 — WEB-DESIGN.md 4-1, 4-5, 5. 값은 tokens.css 변수만 */

.section { padding: var(--sp-10) 0; }
.section-title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.section-lead { color: var(--fg-muted); max-width: var(--w-text); margin-bottom: var(--sp-6); }

/* ── 1. 표지 ── */
.cover { position: relative; min-height: min(100svh, 980px); display: flex; flex-direction: column; overflow: clip; }
.cover .site-head { flex: none; }
.cover-stage { position: relative; flex: 1; min-height: 560px; }
.cover-words {
  position: absolute; left: 0; right: 0; top: var(--sp-7); z-index: 1;
  display: flex; justify-content: center; gap: 0.14em; pointer-events: none;
  font-size: var(--fs-hero); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: -0.03em;
}
.cover-photo { position: absolute; left: 50%; bottom: 0; z-index: 2; height: 92%; max-height: 760px; transform: translateX(-50%); }
.cover-photo img { height: 100%; width: auto; max-width: none; }
.cover-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: var(--sp-7);
}
.cover-foot .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); }
.cover-who { font-weight: var(--w-bold); font-size: var(--fs-lead); }
.cover-line { color: var(--fg-muted); }
.cover-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }

/* ── 2. 핵심 문장 ── */
.statement { padding: var(--sp-10) 0 calc(var(--sp-10) * 1.4); }
.statement p { font-size: clamp(var(--fs-h3), 5vw, var(--fs-display)); font-weight: var(--w-bold); line-height: var(--lh-heading); }

/* ── 3. 지면 ── */
.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
.sheet { background: var(--bg-raised); padding: var(--sp-7); transform-origin: 50% 0; }
.sheet .fig { --fig-hole: var(--bg-raised); max-width: 360px; }
.sheet-path { font-size: var(--fs-xs); color: var(--fg-muted); margin-bottom: var(--sp-2); }
.sheet-title { font-size: var(--fs-h4); margin-bottom: var(--sp-5); }
.sheet-label { font-size: var(--fs-xs); font-weight: var(--w-bold); color: var(--fg-muted); margin: var(--sp-5) 0 var(--sp-2); }
.sheet-q { font-size: var(--fs-lead); }
.sheet-sol > div { padding: var(--sp-1) 0; }
.sheet-think { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--rule-w) solid var(--rule); }
.sheet-think .t { font-weight: var(--w-bold); margin-bottom: var(--sp-1); }
.spread-side .btn { margin-top: var(--sp-6); }
.units { margin-top: var(--sp-6); }
.units h3 { font-size: var(--fs-body); color: var(--fg-muted); margin-bottom: var(--sp-2); }
.units + .units { margin-top: var(--sp-6); }
.rows { list-style: none; border-bottom: var(--rule-w) solid var(--rule); }
.rows a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-3) 0; min-height: 52px; border-top: var(--rule-w) solid var(--rule); text-decoration: none; }
.rows a:hover .name { text-decoration: underline; }
.rows .no { font-weight: var(--w-bold); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.rows .name { font-weight: var(--w-bold); }
.rows .meta { color: var(--fg-muted); font-size: var(--fs-xs); white-space: nowrap; }

/* ── 4. 교재 ── */
.books-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap; }
.books-head .section-title { font-size: var(--fs-display); line-height: var(--lh-display); margin: 0; }
.books-head p { color: var(--fg-muted); max-width: 360px; }
.book-stage { position: relative; height: 440px; margin-top: var(--sp-5); perspective: 1600px; }
@media (max-width: 699px) { .book-stage { height: 480px; } }   /* 폰: 책이 위로, 내지가 아래로 가므로 조금 더 */
/* 책이 옆으로 밀리는 것은 화면 안의 자리 이동 → ease-in-out. 접을 때(되돌아갈 때)는 더 빠르게 */
/* 책 크기: 표지가 A4(1:1.414). --bw 폭, --bh 높이, --bd 두께 */
.book-stage { --bw: 250px; --bh: calc(var(--bw) * 1.414); --bd: 30px; }
.book-pos { position: absolute; left: 50%; top: 50%; width: var(--bw); height: var(--bh);
  margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
  transition: transform var(--dur-move) var(--ease-in-out); }
.book-stage.open .book-pos { transition-duration: var(--dur-slow); }
.book { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-24deg);
  transition: transform var(--dur-slow) var(--ease-in-out); }
/* 화면에 들어올 때 한 바퀴만 돌고 비스듬한 정면에서 멈춘다 (5초 안, WCAG 2.2.2) */
.book.spin { animation: book-spin 4.8s var(--ease-out) 1; }
@keyframes book-spin { from { transform: rotateX(-10deg) rotateY(-384deg); } to { transform: rotateX(-10deg) rotateY(-24deg); } }
.book .face { position: absolute; backface-visibility: hidden; }
.book .front { inset: 0; transform: translateZ(calc(var(--bd) / 2)); background: var(--c-sheet); }
.book .back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); background: var(--c-sheet); }
.book .front img, .book .back img { width: 100%; height: 100%; object-fit: cover; }
/* 책등(왼쪽): 흰 종이색에 책 이름 세로로 */
.book .spine { top: 0; left: calc((var(--bw) - var(--bd)) / 2); width: var(--bd); height: var(--bh);
  transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); background: var(--c-sheet);
  border-left: var(--rule-w) solid var(--c-sheet-edge); border-right: var(--rule-w) solid var(--c-sheet-edge);
  display: flex; align-items: center; justify-content: center; }
.book .spine span { writing-mode: vertical-rl; font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.08em; color: var(--c-ink); white-space: nowrap; }
.book .edge { top: 0; left: calc((var(--bw) - var(--bd)) / 2); width: var(--bd); height: var(--bh);
  transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); background: var(--c-sheet-edge); }
.book .top, .book .bottom { left: 0; top: calc((var(--bh) - var(--bd)) / 2); width: var(--bw); height: var(--bd); background: var(--c-sheet-edge); }
.book .top { transform: rotateX(90deg) translateZ(calc(var(--bh) / 2)); }
.book .bottom { transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2)); }
.book-hit { position: absolute; inset: 0; z-index: 2; }
.pages { position: absolute; inset: 0; pointer-events: none; }
.page { position: absolute; left: 50%; top: 50%; width: 190px; height: 267px; margin: -133px 0 0 -95px;
  opacity: 0; transform: translateX(var(--from-x, 0)); pointer-events: none; background: var(--c-paper);
  border-left: var(--rule-w-strong) solid var(--c-ink);   /* 겹친 내지 사이 경계 (그림자 대신) */
  /* 접을 때: 빠르게 책 쪽으로 모임 */
  transition: transform var(--dur-move) var(--ease-in-out), opacity var(--dur-fast) var(--ease-out); }
.book-stage.open .page { transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.book-stage.open .page:active { transform: translate(var(--to-x, 0), var(--to-y, 0)) scale(calc(var(--page-s, 1) * 0.98)); transition-duration: var(--dur-fast); transition-delay: 0ms; }
.page img { width: 100%; height: 100%; object-fit: cover; }
.book-stage.open .page { opacity: 1; pointer-events: auto; transform: translate(var(--to-x, 0), var(--to-y, 0)) scale(var(--page-s, 1));
  transition-delay: var(--delay, 0ms); cursor: zoom-in; }
.book-stage .page { transition-delay: var(--delay, 0ms); }
.book-stage.open .book-pos { transform: translate(var(--book-x, -300px), var(--book-y, 0)) scale(var(--book-s, 0.82)); }
.book-controls { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.book-name { font-weight: var(--w-bold); letter-spacing: var(--tracking-nav); }
.book-controls .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.book-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-7); margin-top: var(--sp-7);
  padding-top: var(--sp-5); border-top: var(--rule-w) solid var(--rule); }
/* 라인업 4권: 작은 표지 + 번호 + 이름. 누르면 위의 책이 바뀜 */
.book-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.book-list .pick { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); width: 100%; text-align: left;
  color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.book-list .pick img { width: 72px; margin-bottom: var(--sp-2); border: var(--rule-w) solid var(--rule); opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out); }
.book-list .pick:active { transform: scale(0.97); }
.book-list .pick[aria-pressed="true"] { color: var(--fg); }
.book-list .pick[aria-pressed="true"] img { opacity: 1; border-color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .book-list .pick:hover img { opacity: 1; } }
.book-list .no { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.book-list b { font-weight: var(--w-bold); letter-spacing: var(--tracking-nav); }
.book-list .sub { font-size: var(--fs-xs); }
@media (max-width: 767px) { .book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.no-js .pages { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); pointer-events: auto; }
.no-js .page { position: static; margin: 0; width: auto; height: auto; opacity: 1; transform: none; }
.no-js .book-controls { display: none; }
/* 확대 창: 가운데에서 살짝 커지며 나타남 (모달이라 기준점은 가운데), 닫기는 바로 */
.zoom { border: 0; padding: 0; background: transparent; max-width: min(92vw, 760px); max-height: 92vh; margin: auto;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.zoom[open] { opacity: 1; transform: none; }
@starting-style { .zoom[open] { opacity: 0; transform: scale(0.96); } }
.zoom::backdrop { background: var(--c-ink); opacity: 0.92; transition: opacity var(--dur-base) var(--ease-out); }
@starting-style { .zoom[open]::backdrop { opacity: 0; } }
.zoom img { max-height: 92vh; width: auto; cursor: zoom-out; }

/* ── 학습 관리 (짧게) ── */
.system-points { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6);
  border-top: var(--rule-w-strong) solid var(--rule-strong); padding-top: var(--sp-5); margin-bottom: var(--sp-7); }
.system-points b { display: block; font-size: var(--fs-lead); margin-bottom: var(--sp-2); }
.system-points span { color: var(--fg-muted); }
@media (max-width: 1023px) { .system-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teacher-text .teacher-headline { font-size: var(--fs-h4); font-weight: var(--w-bold); color: var(--fg); line-height: var(--lh-heading); }

/* ── 5. 강사 ── */
.teacher { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.teacher-photo { background: var(--bg-raised); display: flex; align-items: flex-end; justify-content: center; min-height: 680px; overflow: clip; padding-top: var(--sp-8); }
.teacher-photo img { width: 82%; max-width: 480px; }
.teacher-text { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-9) var(--sp-8); }
.teacher-text h2 { font-size: var(--fs-display); line-height: var(--lh-display); margin-bottom: var(--sp-5); }
.teacher-text p { color: var(--fg-muted); max-width: 460px; margin-bottom: var(--sp-6); }
.slot { border: var(--rule-w) dashed var(--rule); padding: var(--sp-3) var(--sp-4); }

/* ── 6. 수업 안내 ── */
/* 왼쪽: 제목·문의, 오른쪽: 반 목록 표 (위의 지면·강사 섹션과 다른 구성) */
.class-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-8); align-items: start; }
.class-side .class-actions { margin-top: var(--sp-5); }
@media (max-width: 1023px) { .class-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } }
.class-table { width: 100%; border-collapse: collapse; }
.class-table th { text-align: left; font-size: var(--fs-xs); color: var(--fg-muted); font-weight: var(--w-bold);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: var(--rule-w-strong) solid var(--rule-strong); }
.class-table td { padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; border-bottom: var(--rule-w) solid var(--rule); }
.class-table td:first-child { font-weight: var(--w-bold); }
.class-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ── 모바일 홈: 한 화면 다이얼 (768px 미만) ── */
.dial-screen, .menu-list { display: none; }
@media (max-width: 767px) {
  body.home > .site-head-global { display: none; }
  .desk { display: none; }
  .dial-screen { display: block; position: relative; height: 100svh; min-height: 620px; overflow: clip; }
  .menu-list { display: block; padding: var(--sp-7) 0; }
}
.dial-top { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; min-height: 64px; }
.dial-top a { text-decoration: none; }
.dial-top .wordmark { font-size: var(--fs-body); }
.dial-top .out { font-size: var(--fs-xs); font-weight: var(--w-bold); min-height: 44px; display: inline-flex; align-items: center; }
.dial-title { position: relative; z-index: 3; margin-top: var(--sp-4); }
.dial-title h1 { display: block; font-size: var(--fs-h1); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: -0.02em; }
.dial-title span { display: block; margin-top: var(--sp-3); color: var(--fg-muted); }
.dial-photo { position: absolute; right: -18%; top: 15%; height: 50%; z-index: 1; }
.dial-photo img { height: 100%; width: auto; max-width: none; }
.dial { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dial-item { pointer-events: auto; }
/* 다이얼을 미는 영역은 원호를 따라 왼쪽 좁은 띠만. 나머지(오른쪽·위·아래)에서는 페이지가 그대로 스크롤된다 */
.dial-swipe { position: absolute; left: 0; width: 34%; top: 46%; height: 40%; z-index: 2; touch-action: none; }
.dial-hint { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--fg-muted); }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial circle { fill: none; stroke: var(--rule); }
/* 다이얼은 자주 돌리는 조작 → 900ms는 느림. 420ms ease-in-out */
.dial-item { position: absolute; left: 0; top: 0; transform-origin: 0 0; min-height: 44px; min-width: 44px;
  font-weight: var(--w-bold); font-variant-numeric: tabular-nums; color: var(--fg-muted); line-height: 1;
  transition: transform var(--dur-move) var(--ease-in-out), opacity var(--dur-base) var(--ease-out), color var(--dur-base) ease; }
.dial-item:active { opacity: 0.7; }
.dial-item[aria-current="true"] { color: var(--fg); }
.dial-info { position: absolute; z-index: 4; right: var(--gutter); }
.dial-info .en { font-weight: var(--w-bold); letter-spacing: var(--tracking-nav); }
.dial-info .ko { color: var(--fg-muted); font-size: var(--fs-xs); margin-bottom: var(--sp-3); }
.dial-info .btn { min-height: 44px; padding: 0 var(--sp-4); }
.dial-arrows { position: absolute; z-index: 4; right: var(--gutter); bottom: var(--sp-5); display: flex; gap: var(--sp-2); }
.dial-arrows button { width: 44px; height: 44px; border: var(--rule-w) solid var(--rule); }
.no-js .dial, .no-js .dial-info, .no-js .dial-arrows { display: none; }
.menu-list .rows a { grid-template-columns: minmax(0, 1fr) auto; }

/* ── 태블릿 ── */
@media (max-width: 1023px) {
  .spread { grid-template-columns: minmax(0, 1fr); }
  .teacher { grid-template-columns: minmax(0, 1fr); }
  .teacher-photo { min-height: 520px; }
  .teacher-text { padding: var(--sp-8) var(--gutter); }
}

/* ── 스크롤 연출 (WEB-DESIGN 5) — 지원하는 브라우저에서만, 움직임 줄이기면 전부 정지 ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cover-words .l { animation: words-l linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    .cover-words .r { animation: words-r linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    .cover-photo { animation: photo-rise linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    /* 화면에 들어오기 전에는 원래 밝기(대비 유지), 아래 끝에 닿는 순간(보이지 않을 때)부터 흐림 → 밝음 */
    .statement .line { animation: line-on linear forwards; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .sheet { animation: sheet-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .book-approach { animation: book-near linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .teacher-photo img { animation: teacher-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
/* 첫 화면 등장 (페이지를 열 때 한 번): 글자는 흐릿하게 → 선명하게, 사진은 살짝 아래에서. 스크롤 연출과 겹치지 않게 안쪽 요소에 */
@media (prefers-reduced-motion: no-preference) {
  .cover-words span span { display: inline-block; animation: cover-in var(--dur-slow) var(--ease-out) both; }
  .cover-words .r span { animation-delay: 80ms; }
  .cover-photo img { animation: cover-photo-in 1100ms var(--ease-out) 120ms both; }
  .cover-foot .wrap { animation: cover-in var(--dur-slow) var(--ease-out) 360ms both; }
}
@keyframes cover-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cover-photo-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes words-l { to { transform: translateX(-18%); } }
@keyframes words-r { to { transform: translateX(18%); } }
@keyframes photo-rise { to { transform: translateX(-50%) translateY(-7%) scale(1.04); } }
@keyframes line-on { from { opacity: 0.16; } to { opacity: 1; } }
@keyframes sheet-in { from { transform: scale(0.92); } to { transform: scale(1); } }
@keyframes book-near { from { transform: translateY(80px) scale(0.78); } to { transform: none; } }
@keyframes teacher-rise { from { transform: translateY(90px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .book.spin { animation: none; }
}