/* 에스코어 드림 3·4·5 (Light 300 · Regular 400 · Medium 500)
   글꼴 파일은 fonts/ 폴더에 들어 있어 인터넷이 없어도 쓸 수 있다.
   굵기는 300~500만 쓴다: 보조 글씨 300, 본문 400, 제목·강조 500 */
@font-face {
  font-family: "SCoreDream";
  src: local("S-Core Dream 3 Light"), local("SCDream3"), url("../fonts/S-CoreDream-3Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "SCoreDream";
  src: local("S-Core Dream 4 Regular"), local("SCDream4"), url("../fonts/S-CoreDream-4Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SCoreDream";
  src: local("S-Core Dream 5 Medium"), local("SCDream5"), url("../fonts/S-CoreDream-5Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

body { font-family: "SCoreDream", "Malgun Gothic", system-ui, sans-serif; font-synthesis: none; }
b, strong, h1, h2, h3, h4, h5, h6, th { font-weight: 500; }
button, input, textarea, select { font-family: inherit; }

/* ---------- 스크롤 막대: 얇고 어둡게, 마우스를 올릴 때만 보이게 ---------- */
.toc, .lesson-nav, .content, .lesson-main { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.toc:hover { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.content:hover, .lesson-nav:hover, .lesson-main:hover { scrollbar-color: rgba(0, 0, 0, .18) transparent; }
.toc::-webkit-scrollbar, .lesson-nav::-webkit-scrollbar, .content::-webkit-scrollbar, .lesson-main::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-track, .lesson-nav::-webkit-scrollbar-track, .content::-webkit-scrollbar-track, .lesson-main::-webkit-scrollbar-track { background: transparent; }
.toc::-webkit-scrollbar-button, .lesson-nav::-webkit-scrollbar-button, .content::-webkit-scrollbar-button, .lesson-main::-webkit-scrollbar-button { display: none; }
.toc::-webkit-scrollbar-thumb, .lesson-nav::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb, .lesson-main::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.toc:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
.content:hover::-webkit-scrollbar-thumb, .lesson-nav:hover::-webkit-scrollbar-thumb, .lesson-main:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); }
:root[data-theme="dark"] .content:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); }

/* 이야기 삽화: 오른쪽에 작게 */
.story-img { float: right; width: 32%; max-width: 460px; margin: 4px 0 16px 28px; border-radius: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.s-story::after, .story-block::after { content: ""; display: block; clear: both; }
@media (max-width: 560px) { .story-img { float: none; width: 100%; margin: 6px 0 14px; } }


/* ---------- 이야기·설명 페이지: 왼쪽 글, 오른쪽 삽화 (여백 없이 꽉 차게) ---------- */
.s-story { max-width: none !important; width: 100%; }
.s-story.has-img { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 34%); gap: 40px; align-items: start; }
.s-story.has-img .story-img { float: none; width: 100%; max-width: none; margin: 0; position: sticky; top: 0; }
.slide.story { overflow-y: auto; }
.ex-grid { width: 100%; }
.ex-grid.has-img { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); gap: 48px; align-items: center; }
.ex-img { width: 100%; border-radius: 22px; box-shadow: 0 8px 26px rgba(0, 0, 0, .12); }
@media (max-width: 1100px) {
  .s-story.has-img, .ex-grid.has-img { grid-template-columns: 1fr; }
  .s-story.has-img .story-img { position: static; max-width: 520px; }
}

/* ---------- 설명 페이지: 교과서 발췌 상자 ---------- */
.tb-quote { margin-top: 26px; border-left: 8px solid #c2255c; background: #fff0f6; border-radius: 14px; padding: 16px 22px; font-size: calc(24px * var(--s)); line-height: 1.6; }
.tbq-head { font-size: .8em; font-weight: 500; color: #a61e4d; margin-bottom: 4px; }
.tbq-text { margin: 0; font-weight: 300; color: #3b1d2a; }
.tbq-fix { margin-top: 10px; background: #fff4e6; border-radius: 10px; padding: 10px 14px; color: #5c3200; font-weight: 400; }
.tbq-fix b { color: #d9480f; font-weight: 500; margin-right: 6px; }
:root[data-theme="dark"] .tb-quote { background: #3a1626; }
:root[data-theme="dark"] .tbq-text { color: #ffdeeb; }
:root[data-theme="dark"] .tbq-fix { background: #3a2a12; color: #ffe0b3; }

/* 동아: 삽화 + 교과서 그림을 오른쪽 칸에 함께 */
.ex-media { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.tb-fig { margin: 0; background: #fff; border: 2px solid var(--line, #ddd); border-radius: 18px; padding: 10px; text-align: center; }
.tb-fig img { max-width: 100%; max-height: 38vh; object-fit: contain; display: block; margin: 0 auto; }
.tb-fig figcaption { font-size: .55em; color: #6a7380; margin-top: 6px; font-weight: 400; }
.ex-media .ex-img + .tb-fig img { max-height: 26vh; }

/* 이야기: 삽화를 오른쪽에 띄우고 글이 삽화 아래까지 흐르게 */
.s-story.has-img { display: block; }
.s-story.has-img .story-img { float: right; width: 34%; max-width: none; margin: 6px 0 18px 36px; position: static; }
.s-story-text::after { content: ""; display: block; clear: both; }
@media (max-width: 900px) { .s-story.has-img .story-img { float: none; width: 100%; max-width: 520px; margin: 0 0 16px; } }

/* 교과서 발췌: 설명 아래(페이지 하단)에 넓게, 글자 크게 */
.explain .tb-quote { margin-top: 28px; font-size: calc(30px * var(--s)); padding: 18px 28px; }
.explain .tbq-head { font-size: .75em; }
.explain .tbq-text { font-weight: 400; }

/* 표지: 오늘의 목표 — 눈에 띄는 상자 */
.s-goal { font-size: calc(44px * var(--s)) !important; color: var(--text) !important; line-height: 1.45 !important; font-weight: 500;
  background: var(--accent-soft); border: 0 !important; border-left: 12px solid var(--accent) !important; border-radius: 22px;
  padding: calc(26px * var(--s)) calc(36px * var(--s)) !important; margin-top: calc(30px * var(--s)); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.s-goal small { display: table !important; font-size: .55em !important; font-weight: 500; color: #fff !important; background: var(--accent);
  border-radius: 999px; padding: 4px 16px; margin-bottom: 12px; letter-spacing: .02em; }

/* ── 디자인 고도화: 설명 페이지 균형, 단계 칩 ── */
/* 교과서 쪽수 표시는 오른쪽 아래에 고정 (내용이 위로 쏠리지 않게) */
.slide { position: relative; }
.slide .s-tb { position: absolute; right: 28px; bottom: 16px; margin-top: 0 !important; padding-top: 0 !important; }
/* 그림이 없는 설명 페이지: 글을 조금 키우고, 오른쪽에 큰 아이콘을 흐리게 */
.ex-grid { position: relative; }
.ex-grid:not(.has-img) .ex-text { max-width: 82%; }
.ex-grid:not(.has-img) .s-lines { font-size: calc(40px * var(--s)); }
.ex-mark { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: calc(230px * var(--s)); line-height: 1; opacity: .13; pointer-events: none; user-select: none; filter: saturate(.8); }
/* 수업 단계 칩 */
.stage-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 10px 0 0; }
.stage { border: 0; border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 15px; font-weight: 500; background: var(--line); color: var(--muted); cursor: pointer; transition: transform .12s; }
.stage:hover { transform: translateY(-1px); }
.stage.done { background: var(--accent-soft); color: var(--accent); }
.stage.on { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }