/* 어린이 과학 — 레이아웃 뼈대
   원칙:
   1. 새 색은 없다. 기초 구간은 science.css 의 낮 팔레트, 심화 구간은 밤 팔레트를 그대로 쓴다.
      한 페이지 안에서 낮에서 밤으로 내려간다. 스크롤이 곧 깊이다.
   2. 어른용 메뉴(topbar·검색·EN)는 이 페이지에 오지 않는다.
      머리줄에는 목차로 가는 길, 지금 자리, 학년 안의 진행, 그리고 낮·밤 단추(2026-09-29 추가)만 둔다.
      낮(기본)은 위의 설계 그대로 — 낮에서 밤으로 내려간다. 밤을 누르면 기초 구간까지 밤 팔레트로 바뀐다.
   3. 스위치·접기 없음. 판은 기초에 한 번, 심화에 같은 판이 한 번 더 나온다.
   4. 글씨는 크고, 줄은 짧고, 한 화면에 한 가지만.
   폰트·변수 이름은 science.css 를 따른다(--disp --body --mono, --brass --cyan, --d-*). */

*{box-sizing:border-box}

/* ── 두 구간의 팔레트 ─────────────────────────────── */
.k-basic{
  --ink:#F7F4EB;  --ink-2:#FFFDF5;  --ink-3:#D9D3C2;
  --chalk:#1B2740; --chalk-dim:#5B6B85;
  --brass:#A07E1C; --brass-soft:#8A6C12; --cyan:#2E7D91;
  --line:rgba(27,39,64,.8); --grid:rgba(27,39,64,.06);
  --d-math:#6A4FC4; --d-phys:#1F7E96; --d-chem:#B23F35; --d-bio:#2E7D4F;
  --d-astro:#9A7415; --d-earth:#4E5F7D; --d-eng:#9A5F1C;
}
.k-deep{
  --ink:#0C1526;  --ink-2:#121D33;  --ink-3:#1A2946;
  --chalk:#E8ECF4; --chalk-dim:#9AA7BF;
  --brass:#C9A227; --brass-soft:#E3C86A; --cyan:#6FB7C9;
  --line:rgba(232,236,244,.75); --grid:rgba(154,167,191,.08);
  --d-math:#9D8DF1; --d-phys:#5FBDD4; --d-chem:#E0685E; --d-bio:#6FC08A;
  --d-astro:#E9C45A; --d-earth:#8FA0BC; --d-eng:#D89C5A;
}
.k-basic,.k-deep{background:var(--ink);color:var(--chalk)}

/* ── 바탕 ─────────────────────────────────────────── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.kidspage{margin:0;font-family:var(--body);font-weight:400;font-size:18px;line-height:1.8;
  letter-spacing:-.01em;-webkit-text-size-adjust:100%;background:#F7F4EB;color:#1B2740;
  word-break:keep-all}
.k-wrap{max-width:820px;margin:0 auto;padding:0 20px}
.k-wrap.wide{max-width:980px}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ── 머리줄 ───────────────────────────────────────── */
.k-bar{position:sticky;top:0;z-index:40;background:rgba(247,244,235,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid #D9D3C2;color:#1B2740;transition:background .4s,color .4s,border-color .4s}
.k-bar.in-deep{background:rgba(12,21,38,.9);border-color:#1A2946;color:#E8ECF4}
.k-bar-in{max-width:980px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.k-home{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;opacity:.8}
.k-home:hover{opacity:1}
.k-home svg{width:18px;height:18px}
.k-here{flex:1;font-family:var(--disp);font-weight:700;font-size:15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.k-here small{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;
  opacity:.7;margin-right:8px}
/* 학년 안의 진행 — 8칸. 32 는 아이에게 너무 먼 숫자라 학년 단위로만 센다 */
.k-dots{display:flex;gap:5px;flex:0 0 auto}
.k-dots i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.2}
.k-dots i.done{opacity:.55}
.k-dots i.now{opacity:1;background:#A07E1C}
.k-bar.in-deep .k-dots i.now{background:#C9A227}

/* ── 단원 머리 ────────────────────────────────────── */
.k-title{padding:56px 0 36px}
.k-title .k-num{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--brass);
  margin:0 0 14px}
.k-title h1{font-family:var(--disp);font-weight:700;font-size:clamp(30px,5vw,42px);line-height:1.3;
  margin:0 0 16px}
.k-title .k-ask{font-size:19px;color:var(--chalk-dim);margin:0;max-width:34em}

/* ── 판 하나 ──────────────────────────────────────── */
.k-board{margin:0 0 72px}
.k-board-h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.k-board-h h2{font-family:var(--disp);font-weight:700;font-size:26px;margin:0}
/* 판 종류 표시 — 조절·배치·돌려보기. 색이 아니라 모양으로 구분한다 */
.k-kind{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--chalk-dim);
  border:1px solid var(--ink-3);border-radius:999px;padding:3px 10px;white-space:nowrap}
.k-kind::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:-1px;
  background:var(--chalk-dim)}
.k-kind.adjust::before{border-radius:50%}
.k-kind.place::before{border-radius:0}
.k-kind.run::before{width:0;height:0;background:none;border-left:8px solid var(--chalk-dim);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
/* 판 본체 — 그림이 위, 손잡이가 아래. 넓어져도 옆으로 가르지 않는다(아이는 위아래 하나만 배운다) */
.k-stage{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:18px;overflow:hidden}
.k-view{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;position:relative;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px}
.k-view svg,.k-view canvas,.k-view video{width:100%;height:100%;display:block}
.k-ctl{padding:16px 18px 18px;border-top:1px solid var(--ink-3);display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center}
.k-ctl label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--chalk-dim);min-width:180px;flex:1}
.k-ctl input[type=range]{width:100%;accent-color:var(--brass)}
.k-ctl .k-chips{display:flex;gap:8px;flex-wrap:wrap}
.k-ctl .k-chips button,.k-ctl>button{font:inherit;font-size:15px;background:var(--ink);color:var(--chalk);
  border:1px solid var(--ink-3);border-radius:999px;padding:8px 16px;cursor:pointer}
.k-ctl .k-chips button.on,.k-ctl>button.on{border-color:var(--brass);color:var(--brass)}
/* 판이 하는 말 — 설명글이 아니라 눌러서 나오는 말. 조작 결과로만 채워진다 */
.k-say{margin:12px 0 0;min-height:1.8em;font-size:18px;padding:12px 18px;border-left:3px solid var(--brass);
  background:var(--ink-2);border-radius:0 12px 12px 0}
.k-say:empty{visibility:hidden}

/* ── 영상 자리 ────────────────────────────────────── */
.k-clip{margin:0 0 72px}
.k-clip figure{margin:0}
.k-clip video{width:100%;aspect-ratio:16/9;border-radius:18px;background:var(--ink-2);
  border:1px solid var(--ink-3);display:block}
.k-clip figcaption{font-size:15px;color:var(--chalk-dim);margin:10px 4px 0}

/* ── 심화 판에 붙는 숫자 ───────────────────────────── */
.k-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:14px 18px;
  border-top:1px solid var(--ink-3);font-family:var(--mono)}
.k-read div{background:var(--ink);border:1px solid var(--ink-3);border-radius:10px;padding:10px 12px}
.k-read b{display:block;font-size:22px;font-weight:500;color:var(--brass-soft)}
.k-read span{font-size:12px;letter-spacing:.06em;color:var(--chalk-dim)}
.k-read .eq{grid-column:1/-1;font-size:20px;color:var(--chalk);text-align:center}

/* ── 낮에서 밤으로 ─────────────────────────────────── */
/* 한 화면을 다 써서 번진다. 벽이 아니라 내려가는 길이다. 글은 한 줄만. */
.k-descend{height:100vh;height:100dvh;min-height:520px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(180deg,#F7F4EB 0%,#8FA0BC 48%,#0C1526 100%);color:#E8ECF4}
.k-descend p{font-family:var(--disp);font-size:clamp(20px,3.4vw,28px);margin:0 0 18px;
  color:#F7F4EB;text-shadow:0 1px 8px rgba(12,21,38,.5)}
.k-descend svg{width:28px;height:28px;opacity:.85;animation:k-bob 1.8s ease-in-out infinite}
@keyframes k-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.k-descend svg{animation:none}}

.k-deep{padding-top:40px}
.k-deep .k-title{padding-top:20px}
.k-deep .k-title .k-num{color:var(--cyan)}

/* ── 큰형으로 가는 문 — 심화가 있는 페이지에만 ────────── */
.k-door{margin:0 0 60px;padding:24px 26px;border:1px solid var(--ink-3);border-radius:18px;
  background:var(--ink-2);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.k-door .k-door-t{flex:1;min-width:220px}
.k-door .k-door-t b{display:block;font-family:var(--disp);font-size:20px;margin-bottom:4px}
.k-door .k-door-t span{font-size:15px;color:var(--chalk-dim)}
.k-door a{font-size:15px;text-decoration:none;border:1px solid var(--brass);color:var(--brass);
  border-radius:999px;padding:10px 18px;white-space:nowrap}
.k-door a:hover{background:var(--brass);color:#141005}

/* ── 위로 가는 조용한 길 ───────────────────────────── */
.k-up{display:block;text-align:center;font-size:14px;color:var(--chalk-dim);text-decoration:none;
  margin:0 0 36px;opacity:.7}
.k-up:hover{opacity:1}

/* ── 다음 페이지 — 길은 하나 ───────────────────────── */
.k-next{margin:0;padding:0 0 80px}
.k-next a{display:flex;align-items:center;gap:18px;text-decoration:none;background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:18px;padding:22px 26px;transition:border-color .16s}
.k-next a:hover{border-color:var(--brass)}
.k-next .k-next-l{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--brass);
  flex:0 0 auto}
.k-next .k-next-t{flex:1;font-family:var(--disp);font-weight:700;font-size:22px}
.k-next svg{width:24px;height:24px;flex:0 0 auto}
/* 학년이 바뀌는 다음은 문이 다르다 — 폭죽은 js 몫, 여기서는 자리만 */
.k-next.grade-end a{border-color:var(--brass)}
.k-next.grade-end .k-next-l{color:var(--cyan)}

/* ── 목차 페이지 ──────────────────────────────────── */
.k-toc-hero{padding:64px 0 30px}
.k-toc-hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(32px,6vw,50px);line-height:1.25;margin:0 0 14px}
.k-toc-hero p{font-size:19px;color:var(--chalk-dim);margin:0;max-width:30em}
.k-grade{padding:26px 0 40px;border-top:1px solid var(--ink-3)}
.k-grade h2{font-family:var(--disp);font-weight:700;font-size:24px;margin:0 0 16px;display:flex;align-items:baseline;gap:14px}
.k-grade h2 small{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;color:var(--brass)}
.k-toc{list-style:none;margin:0;padding:0;counter-reset:unit}
.k-toc li{border-bottom:1px solid var(--ink-3)}
.k-toc li:last-child{border-bottom:0}
.k-toc a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:14px 4px;
  text-decoration:none;color:var(--chalk)}
.k-toc a:hover .k-toc-t{color:var(--brass)}
.k-toc .k-toc-n{font-family:var(--mono);font-size:13px;color:var(--chalk-dim)}
.k-toc .k-toc-t{font-size:19px}
/* 심화가 있는 단원은 아래가 있다는 표시 — 작은 달 하나. 없는 단원은 아무것도 없다 */
.k-toc .k-toc-deep{width:12px;height:12px;border-radius:50%;background:#0C1526;box-shadow:inset -3px -1px 0 #E9C45A}
.k-toc li.here a{background:var(--ink-2);border-radius:12px;padding-left:12px;padding-right:12px}
.k-toc li.here .k-toc-n::after{content:"여기";margin-left:8px;color:var(--brass);letter-spacing:.1em}
.k-toc li.soon a{opacity:.45;pointer-events:none}

@media (max-width:560px){
  body.kidspage{font-size:17px}
  .k-title{padding-top:40px}
  .k-board-h{flex-direction:column;gap:6px}
  .k-ctl label{min-width:0;flex-basis:100%}
  .k-next .k-next-t{font-size:19px}
}

/* ── 판의 첫 줄은 상황, 둘째 줄은 물음 ──────────────── */
/* h2 가 상황(친구와 시소를 타요), .k-q 가 물음. 판 안에서 나오는 말(.k-say)은 현상만. */
.k-q{font-size:19px;color:var(--chalk-dim);margin:-6px 0 16px}

/* ── 배치하는 판 부품 — 동물의 생활에서 처음 씀 ─────── */
/* 그림판 안에 상자와 조각이 놓인다. 끌기가 아니라 누르기. 아이가 조각을 누르고 상자를 누른다. */
.k-view.place{display:block;padding:16px;aspect-ratio:auto;min-height:320px}
.k-bins{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.k-bins.one{grid-template-columns:1fr}
.k-bin{min-height:110px;border:2px dashed var(--ink-3);border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;
  align-content:flex-start;background:var(--ink);transition:border-color .15s,background .15s;cursor:pointer}
.k-bin.target{border-color:var(--brass);background:var(--ink-2)}
.k-bin .k-bin-t{flex-basis:100%;font-size:14px;color:var(--chalk-dim);margin:0 0 2px}
.k-bin.scene{min-height:170px;background-size:cover;background-position:center;border-style:solid}
.k-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding-top:6px;border-top:1px solid var(--ink-3)}
.k-tile{font:inherit;font-size:15px;line-height:1.2;background:var(--ink-2);color:var(--chalk);border:2px solid var(--ink-3);
  border-radius:12px;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;
  transition:transform .12s,border-color .12s}
.k-tile .k-pic{font-size:30px;line-height:1}
.k-tile.picked{border-color:var(--brass);transform:translateY(-3px)}
.k-tile.ok{border-color:var(--d-bio)}
.k-tile.no{border-color:var(--d-chem)}
.k-tile.dim{opacity:.35}
.k-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k-pair .k-col{display:flex;flex-direction:column;gap:8px}
.k-pair .k-tile{flex-direction:row;justify-content:flex-start;text-align:left;min-width:0}
.k-pair .k-tile.done{border-color:var(--d-bio);opacity:.55;pointer-events:none}
@media (max-width:560px){.k-bins{grid-template-columns:1fr}.k-pair{grid-template-columns:1fr}}

/* ── 돌려보는 판 부품 — 생물의 한살이에서 처음 씀 ─────── */
/* 시간 손잡이 하나와 재생 단추 하나. 단계 점은 지금 어디쯤인지 보여 준다 */
.k-run{display:flex;align-items:center;gap:12px;width:100%}
.k-play{font:inherit;width:46px;height:46px;border-radius:50%;border:2px solid var(--brass);background:var(--ink);
  color:var(--brass);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.k-play svg{width:20px;height:20px}
.k-play.on{background:var(--brass);color:#141005}
.k-run label{flex:1;min-width:0}
.k-steps{display:flex;justify-content:space-between;padding:6px 18px 0;font-size:13px;color:var(--chalk-dim)}
.k-steps span{flex:1;text-align:center;position:relative;padding-top:12px}
.k-steps span::before{content:"";position:absolute;top:0;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink-3)}
.k-steps span.now{color:var(--chalk)}
.k-steps span.now::before{background:var(--brass)}
.k-steps span.done::before{background:var(--chalk-dim)}
/* 순서 맞추기 — 카드를 차례로 누른다 */
.k-order{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:14px}
.k-order .k-tile{min-width:88px;position:relative}
.k-order .k-tile .k-n{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:var(--brass);color:#141005;
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.k-order .k-tile.set{border-color:var(--d-bio)}

/* ── 상황 그림 — 단원 머리에 하나, 판마다 하나 ─────────── */
/* 그림 파일이 아직 없으면 자리는 비어 있고 깨진 아이콘은 안 보인다(onerror 로 .missing) */
.k-hero{margin:0 0 28px}
.k-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;display:block;background:var(--ink-2)}
.k-scene{margin:0 0 16px}
.k-scene img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;display:block;background:var(--ink-2)}
.k-hero.missing,.k-scene.missing{display:none}

/* ── 학년 폭죽 — 8·16·24 단원 끝에서 한 번 ─────────── */
.k-fw{position:fixed;inset:0;z-index:100;background:#0C1526;display:flex;align-items:center;justify-content:center;flex-direction:column;
  color:#E8ECF4;cursor:pointer;animation:k-fw-in .4s ease}
.k-fw canvas{position:absolute;inset:0;width:100%;height:100%}
.k-fw p{position:relative;font-family:var(--disp);font-size:clamp(24px,5vw,40px);margin:0;text-shadow:0 2px 12px rgba(0,0,0,.5);text-align:center;padding:0 24px}
.k-fw small{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.16em;opacity:.6;margin-top:18px}
@keyframes k-fw-in{from{opacity:0}to{opacity:1}}

/* 칩도 맞고 틀림을 보인다 */
.k-chips button.ok{border-color:var(--d-bio);color:var(--d-bio)}
.k-chips button.no{border-color:var(--d-chem);color:var(--d-chem)}

/* 입체 판: 격자 없음, 종이 느낌 바탕 */
.k-view.solid{background:radial-gradient(ellipse at 40% 30%,var(--ink-2),var(--ink) 80%)}

/* 판 안의 이동 단추 */
.k-go{display:inline-block;font-size:14px;text-decoration:none;border:1px solid var(--brass);color:var(--brass);border-radius:999px;padding:8px 14px}
.k-go:hover{background:var(--brass);color:#141005}


/* ── 낮·밤 단추 (2026-09-29) ─────────────────────────────
   html[data-kids-theme="night"] 이면 기초 구간도 심화와 같은 밤 팔레트를 쓴다.
   판 그림은 심화 구간에서 이미 밤 팔레트로 한 번 더 그려지므로 그대로 맞는다.
   저장은 localStorage 'sa-kids-theme' — 어른 사이트의 낮·밤(sa-theme)과 따로 둔다. */
.k-theme{flex:0 0 auto;margin-left:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid currentColor;background:transparent;color:inherit;font-size:16px;line-height:1;
  cursor:pointer;opacity:.75;display:inline-flex;align-items:center;justify-content:center;padding:0}
.k-theme:hover{opacity:1}
.k-dots + .k-theme{margin-left:4px}
html[data-kids-theme="night"] body.kidspage{background:#0C1526;color:#E8ECF4}
html[data-kids-theme="night"] .k-basic{
  --ink:#0C1526;  --ink-2:#121D33;  --ink-3:#1A2946;
  --chalk:#E8ECF4; --chalk-dim:#9AA7BF;
  --brass:#C9A227; --brass-soft:#E3C86A; --cyan:#6FB7C9;
  --line:rgba(232,236,244,.75); --grid:rgba(154,167,191,.08);
  --d-math:#9D8DF1; --d-phys:#5FBDD4; --d-chem:#E0685E; --d-bio:#6FC08A;
  --d-astro:#E9C45A; --d-earth:#8FA0BC; --d-eng:#D89C5A;
}
html[data-kids-theme="night"] .k-bar{background:rgba(12,21,38,.9);border-color:#1A2946;color:#E8ECF4}
html[data-kids-theme="night"] .k-dots i.now{background:#C9A227}
html[data-kids-theme="night"] .k-descend{background:linear-gradient(180deg,#0C1526 0%,#16233D 50%,#0C1526 100%)}
html[data-kids-theme="night"] .k-hero img,html[data-kids-theme="night"] .k-scene img{filter:brightness(.88)}