/* 중학교 과학 (/middle/) — 어린이 과학의 틀 위에 입는 옷 (2026-10-04)
   틀·판·머리줄은 kids.css 그대로. 여기서는 바탕 톤과 중학교 판에만 있는 것만 적는다.
   · 낮: 초등의 크림 종이 대신 차분한 회청색 종이. 그림이 클레이 디오라마(먹색·회청·크림·황토)라 바탕도 그 톤에 맞춘다.
   · 밤: kids.css 의 밤 팔레트 그대로.
   · 판 그림은 생성한 클레이 디오라마(assets/middle/<학년>-<단원>/) + 코드가 얹는 금색·청록 빛선과 숫자. */
.midpage .k-basic{
  --ink:#EDF0F3;  --ink-2:#F8FAFB;  --ink-3:#CCD4DD;
  --chalk:#18233A; --chalk-dim:#55647D;
}
body.kidspage.midpage{background:#EDF0F3;color:#18233A}
.midpage .k-bar{background:rgba(237,240,243,.92);border-bottom-color:#CCD4DD}
html[data-kids-theme="night"] .midpage .k-basic{
  --ink:#0C1526;  --ink-2:#121D33;  --ink-3:#1A2946;
  --chalk:#E8ECF4; --chalk-dim:#9AA7BF;
}
html[data-kids-theme="night"] body.kidspage.midpage{background:#0C1526;color:#E8ECF4}
html[data-kids-theme="night"] .midpage .k-bar{background:rgba(12,21,38,.9);border-bottom-color:#1A2946}

/* 판 — 그림이 판을 꽉 채운다. 모눈은 그림 뒤에 숨는다. 손가락이 그림을 끌 수 있게 */
.midpage .k-view{background:#232C3D;touch-action:none;user-select:none;-webkit-user-select:none}
.midpage .k-view svg{touch-action:none;cursor:default}
.midpage .k-view svg .m-grab{cursor:grab}
.midpage .k-view svg .m-grab:active{cursor:grabbing}
.midpage .k-stage{box-shadow:0 14px 34px rgba(24,35,58,.14)}
.midpage .k-hero img{aspect-ratio:3/2}

/* 숫자 읽기 칸 — 중학교 판은 기초부터 숫자와 식이 나온다 */
.midpage .k-read{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.midpage .k-read b{font-size:20px}
.midpage .k-read span{display:block;font-family:var(--body);font-size:13px;color:var(--chalk-dim);margin-top:2px}
.midpage .k-read .eq{grid-column:1/-1;font-family:var(--mono);font-size:15px;line-height:1.6;color:var(--chalk);
  border-color:var(--brass)}
.midpage .k-read .eq i{font-style:normal;color:var(--brass-soft)}
.midpage .k-read div.new{border-color:var(--cyan)}

/* 초등으로 돌아가는 문 · 준비 중 표시 */
.m-back a{font-size:15px}
.k-toc li.soon a{cursor:default}
.m-soon{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--chalk-dim)}
@media (max-width:520px){ .midpage .k-read b{font-size:18px} }

/* 휴대폰: 말풍선이 그림을 가리지 않게 그림 바로 위 띠로 붙인다(같은 틀 안). 넓은 화면에서는 그림 위에 뜬다. */
@media (max-width:600px){
  .midpage .k-stage .k-say.k-say-in{position:static;margin:10px 10px 10px;font-size:16px;box-shadow:none;min-height:3em}
}

/* 이 단원에서 가져갈 것 (2026-10-05) — 판을 다 만진 뒤에 읽는 서너 줄. 먼저 겪고, 이름은 나중에 붙인다. */
.m-take{margin:0 0 56px;padding:26px 28px 22px;border:1px solid var(--ink-3);border-left:4px solid var(--brass);border-radius:16px;background:var(--ink-2)}
.m-take h2{font-family:var(--disp);font-weight:700;font-size:22px;margin:0 0 12px}
.m-take ol{margin:0;padding-left:1.3em}
.m-take li{font-size:17px;line-height:1.75;margin:0 0 10px;color:var(--chalk)}
.m-take li::marker{font-family:var(--mono);font-size:14px;color:var(--brass)}
.m-take a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.m-take b{font-weight:600;color:var(--brass-soft)}
@media (max-width:520px){.m-take{padding:20px 18px 16px}.m-take li{font-size:16px}}