/* 챕터 쪽 조판 — 한 챕터 = 한 쪽.
 *
 * 이야기와 실습이 같은 쪽에 있습니다. 승부처는 "한 쪽이 얼마나 잘 읽히고
 * 잘 만져지는가" 입니다.
 *
 * 기준 독자가 초 3~4 라 Teens 보다 글자가 크고 줄이 넓습니다. 본문은 400~600자,
 * 한 문장 25자 이내라 **한 쪽이 짧습니다** — 스크롤이 길면 그 자체로 실패입니다.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: var(--text)/var(--lh) var(--font);
  -webkit-text-size-adjust: 100%;
}

/* ── 머리 ───────────────────────────────────────────
   로고 · 번호 칩 열넷 · 언어. 좁은 화면에서는 세 줄로 접힙니다 */
.top {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--cream);
  border-bottom: 3px solid var(--ink);
  position: sticky; top: 0; z-index: 20;
}
/* **`.home` 이라고 부르지 않습니다.** 랜딩의 `<main class="home">` 과 이름이
   부딪쳐, 랜딩용 아래 여백 72px 이 로고에 붙어 상단 바가 166px 이 됐습니다
   (2026-08-18). 한 이름이 두 가지를 가리키면 언젠가 이렇게 됩니다 */
.top-name {
  font-weight: 800; font-size: 1.05rem; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}

/* 번호 칩 — **드롭다운을 쓰지 않습니다.** 초 3~4 에게는 안 보입니다.
   가로로 흐르고, 지금 쪽만 진하게 섭니다 */
.chips {
  display: flex; gap: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; padding: 2px 0;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 2px solid var(--ink); border-radius: 50%;
  font-size: .85rem; font-weight: 800; text-decoration: none;
  color: var(--ink); background: var(--paper);
}
.chip.p1 { background: var(--p1-soft); }
.chip.p2 { background: var(--p2-soft); }
.chip.p3 { background: var(--p3-soft); }
.chip.is-on { box-shadow: var(--drop-1); transform: translateY(-2px); }
.chip.p1.is-on { background: var(--p1); }
.chip.p2.is-on { background: var(--p2); }
.chip.p3.is-on { background: var(--p3); }

/* 언어 — **아이가 아니라 어른이 씁니다.** 작게, 그러나 늘 보이게 */
.langs { display: flex; gap: var(--s2); flex: 0 0 auto; }
.lang {
  font-size: .8rem; font-weight: 700; text-decoration: none;
  color: var(--ink-3); white-space: nowrap;
}
.lang.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a.lang:hover { color: var(--ink); }

@media (max-width: 640px) {
  /* 줄이 둘로 접힙니다. `align-content` 를 안 주면 **첫 줄이 통째로 늘어나서**
     로고 한 줄이 103px 을 먹습니다 — 상단 바가 화면의 5분의 1이 됩니다 */
  .top {
    flex-wrap: wrap; align-content: center;
    gap: var(--s2) var(--s3); padding: var(--s2) var(--s4);
  }
  .top-name, .langs { align-self: center; }
  .chips { order: 3; width: 100%; flex-basis: 100%; }
  .langs { margin-left: auto; }
}

/* ── 푸터 ─────────────────────────────────────────── */
.foot {
  margin-top: var(--s8);
  padding: var(--s6) var(--s5);
  border-top: 3px solid var(--ink);
  background: var(--cream-2);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: baseline; justify-content: center;
  font-size: .9rem;
}
.foot-name { font-weight: 800; color: var(--ink); text-decoration: none; }
.foot-line { color: var(--ink-2); }
.foot-links { display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot-links a {
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.foot-links a:hover { color: var(--ink); }

/* ── 챕터 ─────────────────────────────────────────── */
.chapter {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s8);
}
/* 챕터 머리 — 번호와 **부 이름**이 한 줄에. 부 색이 여기서 한 번 더 나옵니다 */
.ch-head { display: flex; align-items: baseline; gap: var(--s3); margin: 0; }
.ch-num {
  margin: 0; font-size: 3.5rem; font-weight: 800; line-height: 1;
  color: var(--cream-3); letter-spacing: -.03em;
}
.ch-part {
  padding: 3px var(--s4); border-radius: var(--radius-pill);
  border: 2px solid var(--ink); font-size: .82rem; font-weight: 800;
}
.p1 .ch-part { background: var(--p1); }
.p2 .ch-part { background: var(--p2); }
.p3 .ch-part { background: var(--p3); }
.ch-title {
  margin: var(--s2) 0 var(--s6);
  font-size: 1.85rem; line-height: 1.3; letter-spacing: -.02em;
}
/* **본문 조판은 본문에만 닿습니다.**
 *
 * `.chapter p` 는 특정도가 (0,1,1) 이라 실습 안의 `.lab-answer`·`.c6-say` 같은
 * (0,1,0) 규칙을 이깁니다. 실습이 자기 여백을 못 갖고 위에 붙어 있었습니다
 * (집필자 확인 2026-08-17). 껍데기 쪽에도 같은 한 줄이 있었고, 둘을 같이
 * 고쳐야 했습니다.
 *
 * 자식 선택자로 끊습니다 — 본문의 문단은 `.chapter` 바로 아래에만 있습니다. */
.chapter > p { margin: 0 0 var(--s5); }
.chapter > h2 { font-size: 1.3rem; margin: var(--s7) 0 var(--s3); }
.chapter > hr { border: 0; border-top: 2px solid var(--line); margin: var(--s7) 0; }
.chapter strong { font-weight: 800; }
/* 캐릭터 상자 안의 문단은 따로 정합니다 (자식 선택자 밖이라) */
.box-body p { margin: 0 0 var(--s3); }

/* 본문 속 화면 이름 — `한 번 더 그려 줘` 처럼 역따옴표로 감싼 것.
 *
 * 스타일이 없어서 **글꼴만 고정폭으로 바뀐 맨 글자**로 나오고 있었습니다.
 * 한글 고정폭은 자간이 넓어 "한  번  더" 처럼 벌어져 보입니다.
 * 실습 안의 `.lab-key` 와 같은 모양으로 맞춥니다 — 단추 이름은 단추처럼 보여야 합니다. */
/* 본문 속 화면 이름만. 실습 안의 `.lab-key` 는 껍데기가 정합니다 */
.chapter > p code, .box-body code {
  font: inherit; font-weight: 800;
  background: var(--yellow); border-radius: 5px; padding: 0 .25em;
  white-space: nowrap;
}

/* 용어 — 누르면 뜻이 뜹니다.
 *
 * **`[hidden]` 을 이겨서는 안 됩니다.** `display: block` 을 주었더니 브라우저의
 * `[hidden] { display: none }` 을 덮어써서 뜻 상자가 **항상 보이고** 있었고,
 * 게다가 블록이라 문단을 두 동아리로 갈라놓았습니다. 그리고 누르는 동작 자체가
 * 없었습니다 — Teens 가 남긴 ":term 단추는 눌러도 아무 일이 없었다" 를 그대로
 * 재현한 셈입니다 (집필자 확인 2026-08-17).
 *
 * 지금은 떠 있는 쪽지입니다. 글줄을 건드리지 않습니다. */
.term-wrap { position: relative; }
.term {
  font: inherit; font-weight: 800; color: var(--ink);
  background: var(--yellow); border: 0; border-radius: 6px;
  padding: 0 .25em; cursor: pointer;
}
.term[aria-expanded="true"] { background: var(--leaf); }
.term-mean[hidden] { display: none; }
.term-mean {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 8px);
  width: max-content; max-width: min(20em, 78vw);
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-sm);
  box-shadow: var(--drop-2);
  font-size: .95rem; font-weight: 400; line-height: 1.6; color: var(--ink-2);
  text-align: left;
}

/* ── 캐릭터가 서는 상자 ────────────────────────────────
 * **여기 둘뿐입니다.** 이미 아이에게 말을 걸고 있는 자리에만 세웁니다.
 * 새로 말을 걸게 만들지 않습니다. */
.box {
  display: flex; gap: var(--s4); align-items: flex-start;
  margin: var(--s6) 0;
  padding: var(--s4) var(--s5) var(--s4) var(--s3);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--drop-2);
}
.box--think { background: #FFFBF2; }
.box--withAdult { background: #F4FBF5; }
.box-cut { flex: 0 0 auto; width: 76px; height: 76px; }
.box-body > :last-child { margin-bottom: 0; }
.box-label {
  display: block; font-size: .82rem; color: var(--ink-3);
  letter-spacing: .04em; margin-bottom: var(--s1);
}

/* ── 앞뒤로 넘기기 ─────────────────────────────────── */
.turns {
  max-width: var(--measure); margin: 0 auto;
  padding: 0 var(--s5) var(--s8);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
}
.turn {
  padding: var(--s4); border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--paper);
  text-decoration: none; color: var(--ink);
}
.turn--next { text-align: right; }
.turn span { display: block; font-size: .8rem; color: var(--ink-3); }
.turn b { font-size: .98rem; }

/* ── 첫 쪽 ────────────────────────────────────────── */
.home { max-width: 62em; margin: 0 auto; padding: 0 var(--s5) var(--s8); }

/* ── 히어로 ───────────────────────────────────────────
   **가만히 선 여섯 줄로는 아무 이야기가 안 됩니다.** 풀밭을 깔고 그 위에
   저마다 다른 일을 하는 여섯을 세웁니다 — 가리키고, 생각하고, 손뼉 치고,
   걷고, 손 흔들고, 환호합니다. 1번에서 만날 친구들이라 여기서 얼굴을
   익히는 자리이기도 합니다. */
.hero { text-align: center; padding: var(--s6) 0 var(--s7); }

.hero-scene {
  position: relative; isolation: isolate;
  max-width: 860px; margin: 0 auto var(--s6);
  aspect-ratio: 24 / 9;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2);
  overflow: hidden; background: var(--p2-soft);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  /* 배경은 4:3 인데 무대는 24:9 라 위아래가 많이 잘립니다.
     가운데를 자르면 **바닥이 사라져** 캐릭터가 공중에 뜹니다.
     아래쪽을 남기고 하늘을 더 자릅니다 */
  object-position: 50% 66%;
}
/* 바닥에 서게 둡니다. `--y` 는 바닥에서 띄운 만큼, `--s` 는 크기 —
   뒤에 선 아이가 작아서 깊이가 생깁니다.

   **움직임은 여기서 주지 않습니다.** SVG 파일이 스스로 숨쉬고 깜빡이고
   손뼉을 칩니다 (`assets/anim/`). 바깥에서 한 겹 더 흔들면 두 움직임이
   엇박으로 겹쳐 어지럽습니다. */
.hero-one {
  position: absolute;
  left: var(--x); bottom: var(--y);
  width: calc(var(--s) * 21%); height: auto;
  translate: -50% 0;
  filter: drop-shadow(0 3px 0 rgba(78, 70, 119, .25));
}

@media (max-width: 640px) {
  .hero-scene { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
  .hero-one { width: calc(var(--s) * 25%); }
}

.home-title { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 var(--s2); letter-spacing: -.03em; }
.home-sub { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--text-lg); }
.home-count { margin: 0 0 var(--s5); color: var(--ink-3); font-size: .9rem; font-weight: 700; }
.home-go {
  display: inline-block; padding: var(--s3) var(--s7);
  background: var(--leaf); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--drop-3);
  font-size: 1.1rem; font-weight: 800; text-decoration: none;
}
.home-go:active { transform: translateY(4px); box-shadow: none; }

/* ── 부(部) ───────────────────────────────────────── */
.home-part { margin: 0 0 var(--s8); }
.home-part h2 {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s2); font-size: 1.35rem;
}
.home-part h2 b {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: var(--stroke) solid var(--ink); border-radius: 50%;
  box-shadow: var(--drop-1); font-size: 1.05rem;
}
.home-part.p1 h2 b { background: var(--p1); }
.home-part.p2 h2 b { background: var(--p2); }
.home-part.p3 h2 b { background: var(--p3); }
.home-part-lead { margin: 0 0 var(--s5); color: var(--ink-2); }

/* 데스크톱 3열 · 태블릿 2열 · 손전화 1열 */
.ch-list {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .ch-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ch-list { grid-template-columns: 1fr; } }
/* 카드 — 그림이 위, 번호와 글이 아래. 가로로 눕히면 3열에서 글이 눌립니다 */
.ch-card {
  display: grid; gap: var(--s3); align-content: start;
  padding: var(--s4) var(--s5);
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2);
}
/* 눌리는 느낌 — 그림자가 사라지면서 아래로 내려앉습니다. 가족 앱들의 방식입니다 */
.ch-card { transition: transform .12s ease-out, box-shadow .12s ease-out; }
.ch-card:hover { transform: translateY(-3px); box-shadow: var(--drop-3); }
.ch-card:active { transform: translateY(4px); box-shadow: none; }
.ch-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* 번호 — 그림 위에 겹칩니다. 따로 줄을 잡아먹지 않게 */
.ch-card { position: relative; }
.ch-card-num {
  position: absolute; top: -12px; left: -10px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--leaf); border: var(--stroke) solid var(--ink);
  box-shadow: var(--drop-1);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
/* 부마다 번호 색이 다릅니다 — 차례를 훑으면 세 덩어리가 보입니다 */
.home-part.p1 .ch-card-num { background: var(--p1); }
.home-part.p2 .ch-card-num { background: var(--p2); }
.home-part.p3 .ch-card-num { background: var(--p3); }
.ch-card b { display: block; font-size: 1.05rem; line-height: 1.35; }
.ch-card i { font-style: normal; font-size: .88rem; color: var(--ink-2); }

/* 카드 그림 — **그 쪽의 실습이 내놓는 것**입니다. 아이가 카드만 보고
   무엇을 만지는 쪽인지 알아야 합니다.

   가로형으로 자릅니다. 원본이 128칸짜리 생성물이라 정사각으로 크게 세우면
   두 배로 늘어나 뭉갭니다 — **띠처럼 두면 늘어난 티가 덜 나고** 카드도
   짧아집니다 */
.ch-thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--cream-2);
}
/* 캐릭터·아이콘은 **잘라내면 안 됩니다** — 머리나 발이 잘립니다.
   통째로 세우고 남는 자리는 크림으로 둡니다 */
.ch-thumb.is-cut { object-fit: contain; padding: var(--s2); }
.ch-card-body { display: block; min-width: 0; }

/* ── 곁쪽 (어른 안내 · 출처) ──────────────────────────────────
   아이가 읽는 쪽이 아니라 **어른이 찾아오는 쪽**입니다. 번호도 앞뒤
   화살표도 없고, 표와 목록이 나옵니다 */
.chapter.is-aside .ch-title { margin-top: var(--s6); }
.chapter.is-aside h2 {
  margin: var(--s7) 0 var(--s3); font-size: 1.15rem; font-weight: 800;
  padding-bottom: var(--s2); border-bottom: 3px solid var(--ink);
}
.chapter.is-aside table {
  width: 100%; border-collapse: collapse; margin: var(--s4) 0;
  font-size: .95rem;
}
.chapter.is-aside th, .chapter.is-aside td {
  padding: var(--s2) var(--s3); text-align: left; vertical-align: top;
  border-bottom: 2px solid var(--cream-2);
}
.chapter.is-aside th { font-weight: 800; }
.chapter.is-aside ul { padding-left: 1.2em; }
.chapter.is-aside li { margin: var(--s1) 0; }

/* 출처 목록 — 이름이 많아 여러 칸으로 흘립니다 */
.src-count { display: none; }
.src-list {
  columns: 2 12em; column-gap: var(--s5);
  padding-left: 1.2em; font-size: .9rem;
}
.src-list li { break-inside: avoid; }

/* 차례 아래 곁쪽 줄 */
.sides {
  display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center;
  margin: var(--s7) 0 0; padding-top: var(--s5);
  border-top: 3px dashed var(--cream-3);
}
.side-link {
  font-size: .9rem; font-weight: 700; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.side-link:hover { color: var(--ink); }

/* ── 심화 (쪽 맨 아래) ───────────────────────────────────────
   **아이가 읽는 부분과 확실히 달라 보여야 합니다.** 같은 조판이면 아이가
   "아직 안 끝났나" 하고 계속 읽다가 지칩니다.

   그래서 바탕을 한 겹 눕히고, 글자를 조금 줄이고, 줄간격을 좁힙니다 —
   본문은 초 3~4 를 위해 1.85 인데 여기는 어른이 읽는 글입니다. */
.deeper {
  max-width: calc(var(--measure) + 4em);
  margin: var(--s8) auto 0;
  padding: var(--s6) var(--s6) var(--s7);
  background: var(--cream-2);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  font-size: .97rem; line-height: 1.75;
}
.deeper h2 {
  margin: 0; font-size: 1.15rem; font-weight: 800;
  display: inline-block;
  padding: 3px var(--s4); border-radius: var(--radius-pill);
  background: var(--paper); border: 2px solid var(--ink);
}
.deeper-who {
  /* **제목 바로 아래를 벌립니다.** 붙어 있으면 제목과 이 줄이 한 덩이로
     읽힙니다 (집필자 확인 2026-08-18) */
  margin: var(--s5) 0 var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 2px dashed var(--cream-3);
  font-size: .85rem; color: var(--ink-3); font-weight: 700;
}
.deeper p { margin: 0 0 var(--s4); }
.deeper p:last-child { margin-bottom: 0; }
.deeper strong { font-weight: 800; }
.deeper code {
  font: 600 .9em/1 var(--font-mono);
  padding: 2px 6px; border-radius: 6px;
  background: var(--paper); border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .deeper { margin-inline: var(--s4); padding: var(--s5) var(--s4) var(--s6); }
}

/* 오류 및 수정 제안 — 가족 사이트가 다 갖고 있는 자리입니다.
   **아이가 아니라 어른이 누릅니다.** 오른쪽 끝으로 밀어 둡니다 */
.foot-report {
  margin-inline-start: auto;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
}
.foot-report:hover { color: var(--ink); }
@media (max-width: 640px) { .foot-report { margin-inline-start: 0; } }

/* 「검수 전」 — 원어민이 아직 안 읽은 언어에 붙습니다.
   **숨기지 않고 밝힙니다.** 집필자가 못 읽는 말이 있고, 그 사실을 감추면
   틀린 글이 그 말의 깃발을 달고 나갑니다 */
.foot-draft {
  padding: 2px var(--s3); border-radius: var(--radius-pill);
  background: var(--yellow); border: 2px solid var(--ink);
  font-size: .78rem; font-weight: 800;
}

/* `/go` — 자바스크립트가 꺼져 있을 때 보이는 말 목록 */
.go-langs {
  list-style: none; padding: 0; margin: var(--s6) 0 0;
  display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap;
}
.go-langs a {
  display: inline-block; padding: var(--s3) var(--s6);
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-pill);
  box-shadow: var(--drop-2); font-weight: 800;
}