/* 챕터 쪽 조판 — 한 챕터 = 한 쪽.
 *
 * 이야기와 실습이 같은 쪽에 있습니다. 승부처는 "한 쪽이 얼마나 잘 읽히고
 * 잘 만져지는가" 입니다.
 *
 * 기준 독자가 초 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(--s7) 0 var(--s8); }
.hero-cast {
  display: flex; justify-content: center; align-items: flex-end;
  gap: var(--s2); margin: 0 0 var(--s5); flex-wrap: wrap;
}
.hero-one {
  width: clamp(56px, 13vw, 104px); height: auto;
  /* 여섯이 한 몸처럼 굳어 보이지 않게 **아주 조금씩** 어긋나게 둡니다.
     `--k` 는 몇 번째인지 (build.mjs 가 넣습니다) */
  transform: translateY(calc(var(--k) % 2 * -8px));
  animation: hero-bob 3.6s ease-in-out infinite;
  animation-delay: calc(var(--k) * -.45s);
}
@keyframes hero-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
.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 {
  margin: var(--s3) 0 var(--s5);
  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); }
}