/* crayon-shelf — 노란 색도화지 위 크레파스 전면 책장.
 * 색·크기·간격은 tokens.css 의 변수만 쓴다. 손 선은 생성기(_design/gen)가 미리 흔든 SVG 를 border-image 로 붙인다 —
 * 큰 면에 실시간 SVG 필터를 걸지 않는다(메인 지시 3). 테두리 두께는 0 이고 그림만 상자 안쪽에 겹쳐 그린다(크기는 padding 이 정한다). */

/* ── 리셋(:where 로 특이도 0 — lessons #49) ── */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(body, h1, h2, h3, p, ol, ul, dl, dd, figure, table) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }
:where(img, svg) { display: block; max-width: 100%; }
:where(button, a, .cover) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(button) { user-select: none; -webkit-user-select: none; }
:where([hidden]) { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100svh;
  font-family: var(--font-display);
  font-size: var(--text-kid);
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-bg) url("/crayon-shelf/assets/line/grain.svg?v=def1b6c4") 0 0 / 240px 240px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 손 선 상자 — 이름 하나에 그림 하나 ── */
.f-paper, .f-paper-b, .f-paper-flat, .f-shade, .f-tag, .f-tag-b, .f-tag-flat, .f-btn-blue, .f-btn-paper, .f-dash { border: 0 solid transparent; }
.f-paper { border-image: url("/crayon-shelf/assets/line/paper-a.svg?v=e1f6f941") 32 fill / 16px / 0 stretch; }
.f-paper-b { border-image: url("/crayon-shelf/assets/line/paper-b.svg?v=dfa820f9") 32 fill / 16px / 0 stretch; }
.f-paper-flat { border-image: url("/crayon-shelf/assets/line/paper-flat.svg?v=a1b6589f") 32 fill / 16px / 0 stretch; }
.f-shade { border-image: url("/crayon-shelf/assets/line/shade.svg?v=1a77d26c") 32 fill / 16px / 0 stretch; }
.f-tag { border-image: url("/crayon-shelf/assets/line/tag-a.svg?v=e161746b") 40 fill / 20px / 0 stretch; }
.f-tag-b { border-image: url("/crayon-shelf/assets/line/tag-b.svg?v=b6e73172") 40 fill / 20px / 0 stretch; }
.f-tag-flat { border-image: url("/crayon-shelf/assets/line/tag-flat.svg?v=d1fb4242") 40 fill / 20px / 0 stretch; }
.f-btn-blue { border-image: url("/crayon-shelf/assets/line/btn-blue.svg?v=46624a19") 64 fill / 32px / 0 stretch; }
.f-btn-paper { border-image: url("/crayon-shelf/assets/line/btn-paper.svg?v=d80e2dda") 64 fill / 32px / 0 stretch; }
.f-dash { border-image: url("/crayon-shelf/assets/line/dash-ink.svg?v=82d3f297") 32 fill / 16px / 0 round; }

/* 생성기는 class 이름을 짧게 두고, 여기서 어떤 손 선을 입을지 정한다 */
.nametag--a, .profile:first-child, .cover-tag, .chip:nth-child(odd), .band-tag { border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/tag-a.svg?v=e161746b") 40 fill / 20px / 0 stretch; }
.nametag--b, .profile:last-child, .chip:nth-child(even) { border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/tag-b.svg?v=b6e73172") 40 fill / 20px / 0 stretch; }
.btn--blue { border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/btn-blue.svg?v=46624a19") 64 fill / 32px / 0 stretch; }
.btn--paper, .turn, .back, .door, .num, .gate-close, .to-kid, .pull, .plug { border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/btn-paper.svg?v=d80e2dda") 64 fill / 32px / 0 stretch; }
.ph { border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/dash-fill.svg?v=e2ef1a6b") 32 fill / 16px / 0 stretch; }
.ph::before { content: ""; position: absolute; inset: 0; border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/dash-ink.svg?v=82d3f297") 32 / 16px / 0 round; pointer-events: none; }
.leaf-art, .board, .gate-sheet, .closed .cover-face, .slot-empty > span, .wip-note { border: 0 solid transparent; }
.wip-note { border-image: url("/crayon-shelf/assets/line/tag-flat.svg?v=d1fb4242") 40 fill / 20px / 0 stretch; }
.leaf-art, .board, .gate-sheet { border-image: url("/crayon-shelf/assets/line/paper-a.svg?v=e1f6f941") 32 fill / 16px / 0 stretch; }
.leaf-text { border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/paper-b.svg?v=dfa820f9") 32 fill / 16px / 0 stretch; }
.slot-empty > span { border-image: url("/crayon-shelf/assets/line/dash-ink.svg?v=82d3f297") 32 / 16px / 0 round; }

/* ── 공용 ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--spacing-4); top: -100px; z-index: 50; padding: var(--spacing-3) var(--spacing-5); background: var(--color-paper); border-radius: var(--radius-tag); font-size: var(--text-kid); }
.skip:focus { top: var(--spacing-4); }
:focus-visible { outline: 4px solid var(--color-accent); outline-offset: 4px; }
:where(.cover, .btn, .nametag, .door, .turn, .back, .num, .chip, .profile) { border-radius: var(--radius-button); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-3);
  min-height: var(--spacing-target); padding: var(--spacing-3) var(--spacing-8);
  font-family: var(--font-display); font-size: var(--text-kid-lg); line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform 120ms var(--ease-out);
}
.btn--kid { min-height: var(--spacing-target-kid); }
.btn--blue { color: var(--color-on-blue); }
.btn--paper { color: var(--color-ink); }
.btn svg { width: 28px; height: 28px; flex: none; }
.btn:active, .turn:active, .back:active, .door:active, .num:active, .nametag:active, .profile:active, .chip:active { transform: scale(0.96); }

/* 손 동그라미(선택 표시) */
.ring { position: absolute; inset: -10px -14px; width: calc(100% + 28px); height: calc(100% + 20px); max-width: none; color: var(--color-blue); opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out); }
[aria-pressed="true"] > .ring { opacity: 1; }

/* ── 머리(아이 화면) ── */
.top-in { display: flex; align-items: center; gap: var(--spacing-6); min-height: 96px; padding: var(--spacing-4) var(--spacing-gutter); max-width: 1600px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: var(--spacing-2); text-decoration: none; min-height: var(--spacing-target); }
.brand-mark { width: 56px; height: 48px; color: var(--color-ink); }
.brand-name { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--color-ink); white-space: nowrap; }
.kids { display: flex; gap: var(--spacing-6); margin-left: auto; }
.nametag {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; min-height: var(--spacing-target-kid); padding: var(--spacing-2) var(--spacing-6);
  font-size: var(--text-kid-lg); line-height: 1; color: var(--color-ink);
  transform: rotate(-2deg);
  transition: transform 120ms var(--ease-out);
}
.nametag--b { transform: rotate(1.5deg); }
.nametag-name { position: relative; }
.door {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: var(--spacing-target-kid); height: var(--spacing-target-kid); flex: none;
  text-decoration: none; color: var(--color-ink); font-size: var(--text-kid); line-height: 1;
}
.door-icon { width: 30px; height: 30px; margin-bottom: 2px; }
.door-label { font-size: var(--text-kid); line-height: 1; }

/* ── 홈 ── */
.home { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-12); padding: var(--spacing-6) var(--spacing-gutter) var(--spacing-16); max-width: 1600px; margin-inline: auto; }
.shelf-wrap { min-width: 0; }
.shelf-name { position: relative; display: inline-block; font-size: var(--text-name); line-height: 1.05; font-weight: 400; margin: 0 0 var(--spacing-6) var(--spacing-2); }
.underline { position: absolute; left: -4px; right: -4px; bottom: -12px; width: calc(100% + 8px); height: 16px; max-width: none; color: var(--color-crayon-orange); }
.underline path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 500ms var(--ease-out) 150ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.shelf {
  --cols: var(--cols-w, 3);
  --gap: var(--spacing-shelf-gap);
  --post: var(--spacing-post);
  --inner: var(--spacing-4);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  padding: 0 calc(var(--post) + var(--inner)) var(--spacing-4);
}
.shelf::before, .shelf::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--post); background: url("/crayon-shelf/assets/line/post.svg?v=5a927c63") 0 0 / 100% 100% no-repeat; }
.shelf::before { left: 0; }
.shelf::after { right: 0; }
.plank { grid-column: 1 / -1; display: block; height: 24px; margin: 0 calc(-1 * var(--inner)) var(--spacing-6); background: url("/crayon-shelf/assets/line/plank-a.svg?v=01ec38f0") 0 0 / 100% 100% no-repeat; }
.plank--b { background-image: url("/crayon-shelf/assets/line/plank-b.svg?v=6418dee4"); }
.plank--c { background-image: url("/crayon-shelf/assets/line/plank-c.svg?v=bd374356"); }
.plank--top { margin-bottom: var(--spacing-4); }
.only-n { display: none; }

.slot-empty { display: block; aspect-ratio: 4 / 5; position: relative; }
.slot-empty > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-4); font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--text-kid) * 1.35); line-height: 1.1; color: var(--color-ink-soft); }

/* 표지 */
.cover { position: relative; display: block; aspect-ratio: 4 / 5; text-decoration: none; color: var(--color-ink); container-type: inline-size; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 100%; }
.cover-face { position: absolute; inset: 0; display: block; transition: transform 120ms var(--ease-out); }
a.cover:active .cover-face { transform: scale(0.96); }
.cover-tag {
  position: absolute; z-index: 1; top: 7%; left: 10px; right: 10px;
  display: block; padding: var(--spacing-2) 0;
  font-family: var(--font-display); font-size: var(--text-cover); line-height: 1.15; text-align: center; white-space: nowrap;
  border-image-outset: 10px 6px;
}
.ph { position: absolute; inset: 0; display: block; overflow: hidden; }
.ph-in { position: absolute; inset: auto 8% 9%; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); text-align: center; color: var(--color-ink-soft); }
.ph-cap { font-size: var(--text-kid); line-height: 1.15; }
.ph-desc { font-size: var(--text-kid); line-height: 1.3; }
.ph-ratio { display: inline-flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-kid); line-height: 1; }
.ph-icon { width: 32px; height: 24px; color: var(--color-ink); flex: none; }
.ph--cover .ph-desc { display: none; }
.ph--cover .ph-in { inset: 38% 8% 7%; justify-content: center; }
/* 그리는 중 — 아직 못 읽는 책 표지에 붙인 연필 글씨 종이 딱지(그림 파일이 와도 남는다) */
.wip-note { position: absolute; z-index: 1; right: -4%; bottom: -3%; padding: var(--spacing-2) var(--spacing-3); font-family: var(--font-hand); font-weight: 700; font-size: calc(var(--text-kid) * 1.2); line-height: 1; white-space: nowrap; color: var(--color-ink-soft); transform: rotate(-5deg); }
.cover[data-wip] .ph--cover .ph-in { bottom: 24%; }
/* 생성 삽화 — 크레파스 선 액자(선만 그린 그림)를 위에 겹친다. 그림은 선 안쪽으로 4px 들인다 */
.art-frame { position: absolute; inset: 0; display: block; }
.art-frame::after { content: ""; position: absolute; inset: 0; border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/ink-only.svg?v=298cca4c") 32 / 16px / 0 stretch; pointer-events: none; }
.art { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); max-width: none; object-fit: cover; border-radius: var(--radius-paper); background: var(--color-paper-shade); }
@container (max-width: 179px) {
  .ph-ratio-k { display: none; }
  .ph--cover .ph-in { inset: auto 6% 7%; }
  .ph-cap { white-space: nowrap; }
  .wip-note { font-size: var(--text-kid); padding: var(--spacing-1) var(--spacing-2); }
  .cover[data-wip] .ph--cover .ph-in { bottom: 24%; }
  .cover[data-wip] .ph-cap { display: none; } /* 작은 표지는 딱지 + 그리는 중 사이가 좁다 — 비율·아이콘만 남긴다 */
}
@container (min-width: 260px) {
  .ph--cover .ph-desc { display: block; max-width: 16em; font-size: var(--text-kid); }
  .ph--cover .ph-cap { font-size: var(--text-kid-lg); color: var(--color-ink); }
  .ph--cover .ph-icon { width: 44px; height: 33px; }
}
@container (max-width: 125px) {
  .cover-tag { font-size: var(--text-sm); left: 8px; right: 8px; }
  .ph-cap { display: none; }
  .wip-note { font-size: var(--text-sm); }
  .ph-ratio { font-size: var(--text-sm); }
}
@container (max-width: 100px) { .cover-tag { font-size: var(--text-xs); left: 6px; right: 6px; } }
@container (max-width: 80px) { .cover-tag, .ph-cap, .ph-ratio, .wip-note { display: none; } }

/* 오늘의 책 받침대 */
.stand { min-width: 0; padding-top: var(--spacing-12); }
.stand-in { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--spacing-4); }
.sticker { position: absolute; z-index: 3; top: -52px; left: max(0px, calc(50% - 228px)); width: 128px; height: 132px; display: grid; place-items: center; color: var(--color-accent); transform: rotate(-9deg); }
.sticker-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticker-text { position: relative; width: 4em; font-size: var(--text-kid-lg); line-height: 1.05; color: var(--color-paper); text-align: center; }
.stand-cover { position: relative; width: min(300px, 78%); }
.cover--stand { width: 100%; }
.tape { position: absolute; z-index: 2; width: 84px; height: 26px; background: url("/crayon-shelf/assets/line/tape.svg?v=dcb40436") 0 0 / 100% 100% no-repeat; }
.tape--l { top: -10px; left: -18px; transform: rotate(-34deg); }
.tape--r { top: -8px; right: -20px; transform: rotate(28deg); }
.stand-text { display: grid; justify-items: center; gap: var(--spacing-3); }
.stand-title { font-size: var(--text-title); line-height: 1.15; font-weight: 400; }
.stand-meta { font-size: var(--text-kid); color: var(--color-ink-soft); }
.stand-more { display: inline-flex; align-items: center; min-height: var(--spacing-target); padding: 0 var(--spacing-3); font-size: var(--text-kid); color: var(--color-blue); text-underline-offset: 4px; }

.doodle { position: absolute; pointer-events: none; color: var(--color-ink); }
.doodle--sun { top: var(--spacing-2); right: var(--spacing-gutter); width: 80px; height: 80px; transform: rotate(8deg); }
.doodle--grass { left: calc(var(--spacing-gutter) + var(--spacing-8)); bottom: var(--spacing-4); width: 120px; height: 40px; }

/* 꼬리 */
.foot { padding: var(--spacing-10) var(--spacing-gutter) calc(var(--spacing-10) + env(safe-area-inset-bottom)); background: url("/crayon-shelf/assets/line/rule.svg?v=5ba74125") 0 0 / 100% 6px no-repeat; }
.foot-in { max-width: 1600px; margin-inline: auto; display: grid; gap: var(--spacing-2); }
.foot-note { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--text-body--line-height); color: var(--color-ink-soft); max-width: 60em; }
.foot-back { justify-self: start; display: inline-flex; align-items: center; min-height: var(--spacing-target); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink); text-underline-offset: 4px; }

/* 어른 확인 겹창 */
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--spacing-gutter); background: color-mix(in srgb, var(--color-ink) 40%, transparent); }
.gate-sheet { position: relative; background: var(--color-paper) content-box; width: min(460px, 100%); padding: var(--spacing-10) var(--spacing-8) var(--spacing-8); text-align: center; display: grid; gap: var(--spacing-4); }
.gate-sheet:focus { outline: none; }
.gate-close { position: absolute; top: var(--spacing-3); right: var(--spacing-3); width: var(--spacing-target-kid); height: var(--spacing-target-kid); display: grid; place-items: center; }
.gate-close svg { width: 26px; height: 26px; }
.gate-kicker { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink-soft); padding-inline: var(--spacing-12); }
.gate-q { font-size: var(--text-display); line-height: 1.15; font-weight: 400; }
.gate-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-3); }
.num { min-height: var(--spacing-target-kid); font-size: var(--text-kid-lg); }
.gate-msg { min-height: 1.4em; font-size: var(--text-kid); color: var(--color-ink-soft); }

/* ── 읽기 ── */
body[data-page="read"] { overflow-y: auto; }
.topbar-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-4); min-height: 88px; padding: var(--spacing-3) var(--spacing-gutter); }
.back { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1); min-width: var(--spacing-target-kid); min-height: var(--spacing-target-kid); padding: 0 var(--spacing-5) 0 var(--spacing-3); text-decoration: none; font-size: var(--text-kid); line-height: 1; }
.back svg { width: 28px; height: 28px; }
.read-title { font-size: clamp(1.25rem, 0.8rem + 1.2vw, 2rem); line-height: 1.15; font-weight: 400; text-align: center; }
.count { font-size: var(--text-kid-lg); line-height: 1; min-width: 4.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* 읽어 주세요 — 낭독 토글. 꺼짐 = 종이 버튼 + 흐린 물결, 켜짐 = 파랑 버튼 + 또렷한 물결(글자는 그대로 — aria-pressed 가 상태를 말한다) */
.topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-4); }
/* 오른쪽이 [읽어 주세요] 만큼 넓어져 책 제목이 책 가운데에서 비켜난다 — 넓은 화면은 양옆을 같은 몫으로 */
@media (min-width: 1024px) {
  .topbar-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .topbar-in > .back { justify-self: start; }
}
.voice {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  min-width: var(--spacing-target-kid); min-height: var(--spacing-target-kid); padding: 0 var(--spacing-6) 0 var(--spacing-4);
  font-family: var(--font-display); font-size: var(--text-kid); line-height: 1; white-space: nowrap; color: var(--color-ink);
  border: 0 solid transparent; border-image: url("/crayon-shelf/assets/line/btn-paper.svg?v=d80e2dda") 64 fill / 32px / 0 stretch; border-radius: var(--radius-button);
  transition: transform 120ms var(--ease-out);
}
.voice[aria-pressed="true"] { border-image-source: url("/crayon-shelf/assets/line/btn-blue.svg?v=46624a19"); color: var(--color-on-blue); }
.voice:active { transform: scale(0.96); }
.voice-icon { width: 32px; height: 32px; flex: none; }
.voice-waves { transition: opacity 160ms var(--ease-out); }
.voice[aria-pressed="false"] .voice-waves { opacity: 0.35; }

/* 만든 방법 표시(그림 · 목소리) — 책 소개 메타 아래에만 있는 어른용 작은 줄. 읽기 화면(책 안)에는 두지 않는다 */
.credit { display: flex; flex-wrap: wrap; column-gap: var(--spacing-1); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }
.foot-link { display: inline-flex; align-items: center; min-height: var(--spacing-target); vertical-align: middle; color: var(--color-ink); text-underline-offset: 4px; }

.reader {
  --book-w: min(1240px, 100vw - 2 * (var(--spacing-gutter) + var(--spacing-arrow) + var(--spacing-4)));
  --page-w: calc(var(--book-w) / 2);
  --page-h: min(var(--page-w), 100svh - 240px);
  padding: var(--spacing-6) 0 var(--spacing-10);
}
.stage { display: grid; grid-template-columns: var(--spacing-arrow) var(--book-w) var(--spacing-arrow); justify-content: center; align-items: start; column-gap: var(--spacing-4); }
.turn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); color: var(--color-ink); font-size: var(--text-kid); line-height: 1; }
.turn svg { width: 32px; height: 32px; flex: none; }
.turn--side { width: var(--spacing-arrow); height: var(--spacing-arrow); margin-top: calc(var(--page-h) / 2 - var(--spacing-arrow) / 2); }
.turn[disabled] { opacity: 0.35; cursor: default; }
.turn[disabled]:active { transform: none; }
.reader[data-view="cover"] .turn--side, .reader[data-view="wip"] .turn--side { visibility: hidden; }

.book { position: relative; width: var(--book-w); perspective: 1800px; }
.book { touch-action: pan-y; } /* 가로 밀기는 넘김 판정이 받는다 — 브라우저가 가져가면 pointercancel 로 끊긴다 */
.closed { display: grid; justify-items: center; gap: var(--spacing-6); }
.cover--closed { height: var(--page-h); width: auto; aspect-ratio: 4 / 5; }
.cover--closed .cover-tag { font-size: var(--text-title); top: 8%; left: 14%; right: 14%; border-image-outset: 12px 8px; }
.btn--open { min-height: var(--spacing-arrow); padding-inline: var(--spacing-10); }

/* 책 높이는 --page-h 가 바닥이고, 장의 내용(마지막 장의 도장·단추)이 더 길면 책이 늘어난다 — 높이를 못 박으면
   내용이 책 밖으로 흘러 아래 점 줄이 책 안쪽에 앉는다(2026-10-02 사용자 지적, 1024×600 마지막 장) */
.spread { position: relative; display: grid; min-height: var(--page-h); }
.leaf { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.leaf-art { position: relative; display: grid; place-items: center; padding: var(--spacing-5); }
.leaf-art-in { position: relative; width: calc(var(--page-h) - 40px); height: calc(var(--page-h) - 40px); }
.leaf-art-in .ph-in { inset: 50% 10% auto; transform: translateY(-50%); gap: var(--spacing-3); }
.leaf-art-in .ph-cap { font-size: var(--text-kid-lg); color: var(--color-ink); }
.leaf-art-in .ph-icon { width: 48px; height: 36px; }
.leaf-text { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-6); padding: var(--spacing-10) calc(var(--spacing-8) + var(--spacing-1)); }
.story { font-family: var(--font-story); font-size: var(--text-story); line-height: var(--text-story--line-height); text-wrap: pretty; }
.folio { position: absolute; right: var(--spacing-8); bottom: var(--spacing-5); font-size: var(--text-kid); color: var(--color-ink-soft); }
.end { display: grid; justify-items: start; gap: var(--spacing-4); }
.stamp { position: relative; display: grid; place-items: center; width: 256px; height: 128px; color: var(--color-accent); transform: rotate(-10deg); opacity: 0; }
.stamp.is-stamped { opacity: 1; }
.stamp-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp-text { position: relative; font-size: var(--text-stamp); line-height: 1; }
.end-btns { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }

/* 넘기는 장(3D) */
.flipper { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; z-index: 3; will-change: transform; }
.flipper--fwd { left: 50%; transform-origin: 0 50%; }
.flipper--back { left: 0; transform-origin: 100% 50%; }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face--back { transform: rotateY(180deg); }
.flip-face > * { position: absolute; inset: 0; }
.under { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.under--l { left: 0; }
.under--r { left: 50%; }
.under > * { position: absolute; inset: 0; }

.turnbar { display: flex; align-items: center; justify-content: center; gap: var(--spacing-4); margin-top: var(--spacing-6); }
.turn--bar { display: none; }
.dots { display: flex; align-items: center; gap: var(--spacing-2); min-height: 24px; }
.dots li { width: 12px; height: 12px; border-radius: var(--radius-dot); background: var(--color-ink-soft); opacity: 0.55; }
.dots li[data-now] { width: 16px; height: 16px; background: var(--color-accent); opacity: 1; }
.reader[data-view="cover"] .turnbar, .reader[data-view="wip"] .turnbar { visibility: hidden; }

/* 준비 중 장 */
.wip {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--spacing-12); align-items: center;
  /* 화면 높이 안에서 세로 가운데 — 아래만 비던 300px 를 위아래로 나눈다(qa-1 P2-2). 88 = 읽기 머리, 나머지는 .reader 위아래 padding */
  min-height: calc(100svh - 88px - var(--spacing-6) - var(--spacing-10));
}
.wip-cover { justify-self: end; width: min(100%, 280px); } /* 표지는 조연 — 안내 문장이 주인공(qa-1 P2-2) */
.cover--wip { width: 100%; }
.cover--wip .cover-tag { font-size: var(--text-kid-lg); left: 10%; right: 10%; border-image-outset: 10px 6px; }
.wip-text { display: grid; gap: var(--spacing-4); justify-items: start; }
.wip-scribble { width: 180px; height: 108px; color: var(--color-ink); }
.wip-lead { font-size: var(--text-display); line-height: 1.15; white-space: nowrap; }
.wip-sub { font-size: var(--text-kid-sub); line-height: 1.35; color: var(--color-ink-soft); max-width: 22em; }
.wip-picks { display: flex; flex-wrap: wrap; gap: var(--spacing-6); padding-top: var(--spacing-2); }
.cover--pick { width: 150px; }
.wip .cover--pick { width: clamp(140px, 11vw, 150px); } /* 140 아래면 표지 딱지가 16px(아이 바닥 20 미만)로 떨어진다 */

/* ── 부모 모드 ── */
body[data-page="parent"] { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--text-body--line-height); }
.top--parent .top-in, .top--book .top-in { min-height: 88px; }
.to-kid, .to-adult { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-target); padding: 0 var(--spacing-6); font-family: var(--font-display); font-size: var(--text-kid); text-decoration: none; color: var(--color-ink); }
.to-kid svg { width: 24px; height: 24px; }
.notice { padding: var(--spacing-3) var(--spacing-gutter); font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.5; text-align: center; background: var(--color-paper) url("/crayon-shelf/assets/line/rule.svg?v=5ba74125") 0 100% / 100% 6px no-repeat; color: var(--color-ink); }
.parent { display: grid; gap: var(--spacing-8); padding: var(--spacing-8) var(--spacing-gutter) var(--spacing-16); max-width: 1440px; margin-inline: auto; }
.parent-head { display: grid; gap: var(--spacing-2); }
.page-title { font-family: var(--font-display); font-size: var(--text-display); line-height: 1.12; font-weight: 400; }
.page-lead { font-size: var(--text-base); color: var(--color-ink-soft); max-width: 40em; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-12); }
.profiles { display: flex; gap: var(--spacing-6); }
.profile { position: relative; display: grid; justify-items: start; gap: 0; min-width: 168px; min-height: var(--spacing-target-kid); padding: var(--spacing-3) var(--spacing-6); text-align: left; color: var(--color-ink); transform: rotate(-1.5deg); }
.profile:last-child { transform: rotate(1deg); }
.profile-name { position: relative; font-family: var(--font-display); font-size: var(--text-kid-lg); line-height: 1.1; }
.profile-meta { position: relative; font-size: var(--text-sm); color: var(--color-ink-soft); }
.profile-meta b { font-weight: 700; color: var(--color-ink); }
.bands { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); }
.bands-label { font-size: var(--text-sm); color: var(--color-ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }
.chip { position: relative; min-height: var(--spacing-target); padding: 0 var(--spacing-5); font-family: var(--font-display); font-size: var(--text-kid); line-height: 1; color: var(--color-ink); }
.chip > span { position: relative; }

.parent-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-8); align-items: start; }
.board { padding: var(--spacing-8); display: grid; gap: var(--spacing-5); min-width: 0; }
.board-title { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.2; font-weight: 400; }
.board-title small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink-soft); margin-left: var(--spacing-2); }
.board-note { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* 작은 책장 — 칸마다 표지 · 판자 조각 · [빼기]. 판자 끝 높이가 같아 나란히 놓으면 한 장처럼 이어진다 */
.mini { display: flex; flex-wrap: wrap; row-gap: var(--spacing-5); }
.mini-cell { width: calc(100% / var(--mini-cols, 5)); display: grid; justify-items: center; gap: var(--spacing-2); }
.mini-cell .cover { width: calc(100% - var(--spacing-5)); margin-bottom: -2px; }
.mini-cell::before { content: ""; order: 1; display: block; width: 100%; height: 18px; background: url("/crayon-shelf/assets/line/plank-a.svg?v=01ec38f0") 0 0 / 100% 100% no-repeat; }
.mini-cell .cover, .mini-cell .slot-empty { order: 0; }
.mini-cell .pull, .mini-cell .mini-gap { order: 2; }
.mini-cell .slot-empty { width: calc(100% - var(--spacing-5)); }
.mini-cell .slot-empty > span { font-size: var(--text-sm); }
.mini .cover-tag { font-size: var(--text-mini-tag); left: 6px; right: 6px; } /* 부모 화면(어른용) 작은 판 — 딱지가 표지 폭을 넘지 않게 */
.mini .wip-note { font-size: var(--text-xs); }
.mini-gap { display: block; height: var(--spacing-target); }
.pull, .plug { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1); min-height: var(--spacing-target); padding: 0 var(--spacing-4); font-family: var(--font-display); font-size: var(--text-base); color: var(--color-ink); }
.pull svg, .plug svg { width: 20px; height: 20px; }
.plug { border-image-source: url("/crayon-shelf/assets/line/btn-blue.svg?v=46624a19"); color: var(--color-on-blue); }

.sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-4); }
.sums > div { display: grid; gap: var(--spacing-1); }
.sums dt { font-size: var(--text-sm); color: var(--color-ink-soft); order: 2; }
.sums dd { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; order: 1; }
.sums dd small { font-size: var(--text-kid); }
.sums > div:last-child dd { font-size: 1.75rem; line-height: 1.15; }
.log { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.log th { text-align: left; font-weight: 600; color: var(--color-ink-soft); padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) 0; }
.log td { padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) 0; }
.log tr { background: url("/crayon-shelf/assets/line/rule.svg?v=5ba74125") 0 100% / 100% 6px no-repeat; }

.ledger { display: grid; gap: var(--spacing-6); }
.group { display: grid; gap: var(--spacing-2); }
.group-title { font-family: var(--font-display); font-size: var(--text-kid-lg); font-weight: 400; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-5); padding: var(--spacing-3) 0; background: url("/crayon-shelf/assets/line/rule.svg?v=5ba74125") 0 100% / 100% 6px no-repeat; }
.cover--mini { width: 64px; }
.row-main { display: grid; gap: var(--spacing-1); min-width: 0; }
.row-title { font-family: var(--font-display); font-size: var(--text-kid); line-height: 1.25; color: var(--color-ink); text-underline-offset: 4px; justify-self: start; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.flag { display: inline-block; padding: 0 var(--spacing-2); border-radius: var(--radius-tag); background: var(--color-paper-shade); color: var(--color-ink); font-size: var(--text-xs); }
.fit { display: none; font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-blue); }
.row[data-fit-on] .fit { display: inline; }
.row-act { display: flex; align-items: center; gap: var(--spacing-3); }
.on-shelf { display: inline-flex; align-items: center; gap: var(--spacing-1); font-family: var(--font-display); font-size: var(--text-base); color: var(--color-green); }
.on-shelf svg { width: 22px; height: 22px; }

/* ── 책 소개 ── */
.back--top { margin-left: auto; }
.to-adult { margin-left: var(--spacing-2); font-family: var(--font-body); font-size: var(--text-base); padding: 0 var(--spacing-3); text-decoration: underline; text-underline-offset: 4px; }
.book-page { padding: var(--spacing-8) var(--spacing-gutter) var(--spacing-16); max-width: 1320px; margin-inline: auto; }
.intro { display: grid; gap: var(--spacing-16); }
.intro-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-12); align-items: center; }
.intro-cover { position: relative; margin-top: calc(-1 * var(--spacing-6)); justify-self: center; width: min(400px, 100%); }
.cover--intro { width: 100%; --tilt: -2deg; }
.cover--intro .cover-tag { font-size: var(--text-title); left: 12%; right: 12%; border-image-outset: 12px 8px; }
.intro-text { display: grid; justify-items: start; gap: var(--spacing-4); }
.band-tag { padding: var(--spacing-2) var(--spacing-5); font-size: var(--text-kid); line-height: 1; transform: rotate(-2deg); }
.intro-meta { font-size: var(--text-kid-sub); line-height: 1.2; color: var(--color-ink-soft); }
.intro-plot { font-size: var(--text-kid-sub); line-height: 1.45; max-width: 22em; } /* 아이가 읽는 글이라 Jua(--font-display) — Pretendard 19px 는 17px 로 보였다(qa-1 P2-1) */
.intro-wip { font-size: var(--text-kid-sub); line-height: 1.35; color: var(--color-ink-soft); max-width: 20em; padding: var(--spacing-3) var(--spacing-5); background: var(--color-paper); border-radius: var(--radius-tag); }
.preview, .same { display: grid; gap: var(--spacing-5); }
.preview-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-8); }
.preview-item { display: grid; gap: var(--spacing-3); align-content: start; }
.preview-item .ph, .preview-item .art-frame { position: relative; inset: auto; aspect-ratio: 1; height: auto; }
.preview-item .ph-in { inset: 50% 8% auto; transform: translateY(-50%); }
.preview-text { font-size: var(--text-kid-sub); line-height: 1.4; }
.preview-n { color: var(--color-ink-soft); margin-right: var(--spacing-1); }
.preview-none { display: flex; align-items: center; gap: var(--spacing-4); font-size: var(--text-kid-sub); color: var(--color-ink-soft); }
.preview-none svg { width: 120px; height: 72px; color: var(--color-ink); flex: none; }
.same-row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); align-items: end; }
.same-item { display: grid; justify-items: center; gap: var(--spacing-2); width: 170px; }
.cover--same { width: 100%; }
.same-now { font-size: var(--text-kid-sub); color: var(--color-ink-soft); }
.book-page .board-title small { font-family: var(--font-display); font-size: var(--text-kid); } /* 아이 화면의 "앞 3장" — 부모 화면 board-title small(16px)과 가른다 */

/* ── 중간 폭: 넓은 한 칸 ── */
@media (max-width: 1023px) {
  .top-in { min-height: 88px; }
  .home { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-10); }
  .stand { padding-top: var(--spacing-8); }
  .stand-in { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); justify-items: start; text-align: left; align-items: center; column-gap: var(--spacing-10); }
  .stand-cover { width: 100%; max-width: 280px; justify-self: center; }
  .stand-text { justify-items: start; }
  .sticker { left: 0; top: -40px; }

  /* 넘김 띠는 고정(fixed)이 아니라 흐름 안 맨 아래 — 내용이 짧으면 화면 바닥에 붙고, 마지막 장처럼 길면 책 뒤로 밀린다.
     고정이면 393×660 마지막 장에서 띠(점 줄)가 단추·쪽 번호 위에 앉았다(2026-10-02) */
  body[data-page="read"] { display: flex; flex-direction: column; }
  .reader { --art: min(46vw - var(--spacing-gutter), 100svh - 280px); flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 0; }
  .stage { flex: 1 0 auto; }
  .stage { display: block; padding-inline: var(--spacing-gutter); }
  .turn--side { display: none; }
  .book { width: auto; perspective: none; }
  .cover--closed { height: min(560px, 100svh - 300px); }
  .spread { min-height: 0; }
  .leaf { position: relative; inset: auto; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-8); align-items: center; }
  .leaf-art { padding: var(--spacing-3); }
  .leaf-art-in { width: var(--art); height: var(--art); }
  .leaf-text { border-image: none; padding: 0; gap: var(--spacing-4); }
  .folio { position: static; align-self: flex-end; }
  .stamp { width: 210px; height: 105px; }
  .turnbar {
    margin: var(--spacing-6) 0 0;
    justify-content: space-between; min-height: 88px;
    padding: var(--spacing-3) var(--spacing-gutter) calc(var(--spacing-3) + env(safe-area-inset-bottom));
    background: var(--color-bg) url("/crayon-shelf/assets/line/rule.svg?v=5ba74125") 0 0 / 100% 6px no-repeat;
  }
  .turnbar .dots { flex: 1; justify-content: center; flex-wrap: wrap; }
  .turn--bar { display: inline-flex; min-width: var(--spacing-target-kid); min-height: var(--spacing-target-kid); padding: 0 var(--spacing-5); }
  .reader[data-view="cover"] .turnbar, .reader[data-view="wip"] .turnbar { display: none; }
  .wip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--spacing-8); min-height: calc(100svh - 88px - var(--spacing-6) - 112px); }
  .wip-cover { width: min(100%, 220px); }

  .parent-grid { grid-template-columns: minmax(0, 1fr); }
  .intro-top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .intro-cover { width: 60%; max-width: 420px; margin-top: 0; }
  .intro-text { justify-self: stretch; }
}

/* ── 좁은 폭: 한 칸 ── */
@media (max-width: 719px) {
  .top--kid .top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand door" "kids kids"; gap: var(--spacing-2) var(--spacing-4); min-height: 0; padding-block: var(--spacing-1) 0; }
  .top--kid .brand { grid-area: brand; min-height: 64px; }
  .top--kid .door { grid-area: door; }
  .top--kid .kids { grid-area: kids; display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-5); margin: 0; padding: var(--spacing-1) var(--spacing-3) var(--spacing-1); }
  .nametag { min-width: 0; min-height: 60px; }
  .ring { inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px); }
  .brand-mark { width: 44px; height: 38px; }
  .brand-name { font-size: var(--text-kid-lg); }
  .home { padding-top: var(--spacing-4); gap: var(--spacing-8); }
  .shelf-name { margin-bottom: var(--spacing-5); }
  .shelf { --cols: var(--cols-n, 2); --gap: var(--spacing-4); --post: 0.625rem; --inner: var(--spacing-3); }
  .only-w { display: none; }
  .only-n { display: block; }
  .plank { margin-bottom: var(--spacing-5); height: 22px; }
  .plank--top { margin-bottom: var(--spacing-3); }
  .stand-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .stand-cover { width: 62%; }
  .stand-text { justify-items: center; }
  .sticker { left: 2%; top: -30px; width: 100px; height: 104px; }
  .sticker-text { font-size: var(--text-kid); }
  .doodle--sun { width: 56px; height: 56px; top: calc(var(--spacing-4) + 6px); right: var(--spacing-gutter); }
  .doodle--grass { display: none; }

  .topbar-in { min-height: 64px; padding-block: 0; gap: var(--spacing-2); }
  .back { padding: 0 var(--spacing-3); }
  .back span { display: none; }
  .count { min-width: 3.4em; font-size: var(--text-kid); }
  .topbar-end { gap: var(--spacing-2); }
  /* 단추가 하나 더 서는 책에서는 장 번호 칸을 고정 폭으로 잡지 않는다 — 360 에서 제목이 세 줄로 접혔다 */
  .topbar-end:has(.voice:not([hidden])) .count { min-width: 0; }
  .voice { padding: 0; }
  .voice-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .reader { --art: min(100vw - 32px, 100svh - 300px); padding-top: var(--spacing-3); }
  .stage { padding-inline: var(--spacing-4); }
  .leaf {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--spacing-5); justify-items: center;
    /* 그림 아래 남는 높이를 글이 받아 가운데에 앉는다 — 글 아래만 250px 비던 것(qa-1 P3-1). 64 = 읽기 머리, 112 = 넘김 띠 자리 */
    min-height: calc(100svh - 64px - var(--spacing-3) - 112px - env(safe-area-inset-bottom));
  }
  .leaf-art { padding: 0; width: var(--art); height: var(--art); }
  .leaf-art-in { width: calc(var(--art) - 24px); height: calc(var(--art) - 24px); }
  .leaf-text { justify-self: stretch; padding-inline: var(--spacing-1); }
  .end { position: static; justify-items: center; }
  .stamp { position: absolute; right: var(--spacing-2); top: calc(-1 * (var(--spacing-5) + 104px)); width: 196px; height: 98px; }
  .end-btns { justify-content: center; }
  .turn-label { display: none; }
  .turn--bar { padding: 0; }
  .cover--closed { height: auto; width: min(300px, 78vw); }
  .wip { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--spacing-5); min-height: 0; align-content: start; }
  .wip-cover { justify-self: center; width: 40%; }
  .cover--wip .cover-tag { font-size: var(--text-kid); }
  .wip-scribble { width: 120px; height: 72px; }
  .wip-lead { white-space: normal; }
  .wip-text { justify-items: center; }
  .wip-text { width: 100%; min-width: 0; }
  .wip-sub { max-width: 100%; }
  .wip-picks { justify-content: center; flex-wrap: wrap; gap: var(--spacing-5); }
  .cover--pick, .wip .cover--pick { width: 140px; }

  .profiles { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .profile { min-width: 0; }
  .board { padding: var(--spacing-6) var(--spacing-5); }
  .to-kid { padding: 0 var(--spacing-4); }
  .gate-sheet { padding-top: calc(var(--spacing-target-kid) + var(--spacing-4)); }
  .mini { --mini-cols: 2; } /* 3칸이면 표지 87px — 16px 제목이 안 들어간다(qa-1 P3-3). 아이 책장 모바일과 같은 2칸 */
  .sums dd { font-size: 2.25rem; }
  .row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "cv main" "cv act"; row-gap: var(--spacing-2); }
  .row-cover { grid-area: cv; align-self: start; }
  .cover--mini { width: 56px; }
  .row-main { grid-area: main; }
  .row-act { grid-area: act; flex-wrap: wrap; }
  .intro-cover { width: 75%; }
  .preview-list { grid-template-columns: minmax(0, 1fr); }
  .same-row { justify-content: center; gap: var(--spacing-5); }
  .same-item { width: calc(50% - var(--spacing-5)); }
  .top--book .top-in { flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-4); }
  .top--book .to-adult { padding-inline: var(--spacing-2); }
}

/* ── 짧은 창(높이 ≤ 640): 점 줄을 숨기고 장 번호(머리의 "7 / 7")만 둔다 ──
   점 줄 24px + 위 여백 24px 를 책에 돌려준다. 점은 장 번호와 같은 정보라 빼도 잃는 것이 없다 */
@media (max-height: 640px) {
  .dots { display: none; }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .reader { --page-h: min(var(--page-w), 100svh - 176px); padding-bottom: var(--spacing-6); } /* 176 = 머리 88 + 위 24 + 아래 24 + 숨 40 */
  .turnbar { display: none; } /* 넓은 화면의 띠에는 점만 있다 — 넘김 단추는 책 옆 */
  .leaf-text { padding-block: var(--spacing-6); gap: var(--spacing-4); }
  .stamp { width: 210px; height: 105px; }
  .cover--closed { height: calc(100svh - 248px); } /* 248 = 머리 88 + 위 24 + 사이 24 + [펼쳐 볼까?] 64 + 아래 24 + 숨 24 */
}
/* 중간 폭이면서 짧은 창(가로 폰 844×390 · 1000×565 창): 아래 고정 띠가 화면의 1/4 을 먹고 책을 덮는다 →
   넘김 단추를 넓은 화면처럼 책 옆으로 옮기고 띠를 없앤다. 그림은 남는 높이를 다 받는다 */
@media (min-width: 720px) and (max-width: 1023px) and (max-height: 640px) {
  .reader {
    --book-w: calc(100vw - 2 * (var(--spacing-gutter) + var(--spacing-arrow) + var(--spacing-4)));
    --art: min(var(--book-w) / 2 - var(--spacing-8), 100svh - 148px); /* 148 = 머리 88 + 위 24 + 그림 틀 안쪽 24 + 숨 12 */
    padding-bottom: var(--spacing-3);
  }
  .stage { display: grid; padding-inline: 0; }
  .book { width: var(--book-w); }
  .turn--side { display: inline-flex; margin-top: calc(var(--art) / 2 + var(--spacing-3) - var(--spacing-arrow) / 2); }
  .turnbar { display: none; }
  /* 닫힌 표지: 표지와 [펼쳐 볼까?] 를 옆으로 — 위아래로 쌓으면 표지가 160px 로 줄어 딱지 글자가 넘친다 */
  .closed { grid-auto-flow: column; justify-content: center; align-items: center; column-gap: var(--spacing-10); }
  .cover--closed { height: calc(100svh - 136px); }
  .cover--closed .cover-tag { font-size: var(--text-kid-lg); left: 10%; right: 10%; border-image-outset: 10px 6px; }
  /* 마지막 장: 도장은 그림 오른쪽 아래 귀퉁이에 찍는다(좁은 폭과 같은 방식) — 글 칸에 쌓으면 창 높이를 넘는다.
     위 귀퉁이는 장면의 주인공(고래·꿈 구름)이 서는 자리라 아래로 */
  .leaf { align-items: start; gap: var(--spacing-6); }
  .end-btns .btn { padding-inline: var(--spacing-5); } /* 두 단추가 한 줄에 서야 창 높이 안에 든다(844×390 글 칸 302px) */
  .leaf-text { position: static; gap: var(--spacing-3); align-self: center; }
  .stamp { position: absolute; left: calc(var(--art) - 184px); top: calc(var(--art) - 96px); }
  .stamp-text { font-size: var(--text-kid-lg); }
  .stamp::before { content: ""; position: absolute; inset: 9% 6%; border-radius: var(--radius-tag); background: color-mix(in oklab, var(--color-paper) 88%, transparent); } /* 그림 위에 찍히니 글자 뒤에 종이를 댄다 */
  .wip { min-height: 0; }
}

@media (max-width: 719px) and (min-height: 760px) { .story { font-size: var(--text-story-tall); } }

/* ── 모션: 한 번 돌고 꺼진다(≤600ms) ── */
@keyframes pop { from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(10px) scale(0.92); } }
.cover.is-pop { animation: pop 220ms var(--ease-out) calc(var(--i, 0) * 40ms) both; }
@keyframes wiggle { 0%, 100% { transform: rotate(var(--tilt, 0deg)); } 30% { transform: rotate(calc(var(--tilt, 0deg) + 2deg)); } 65% { transform: rotate(calc(var(--tilt, 0deg) - 2deg)); } }
@media (hover: hover) and (pointer: fine) {
  a.cover:hover { animation: wiggle 300ms var(--ease-out) 1; }
  .btn:hover, .turn:not([disabled]):hover, .back:hover, .door:hover, .nametag:hover { filter: brightness(1.04); }
}
@keyframes slide-in { from { opacity: 0; transform: translateY(-16px); } }
.is-slide { animation: slide-in 220ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .underline path { animation: none; stroke-dashoffset: 0; }
  .cover.is-pop, .is-slide, a.cover:hover { animation: none; }
  .ring { transition: none; }
}