@font-face {
  font-family: ElioIPA;
  src: url("/book/fonts/NotoSansIPA-books.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: ElioEN;
  src: url("/book/fonts/Nunito-books.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: ElioKR;
  src: url("/book/fonts/NotoSansKR-books.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fbfaf4;
  color: #244c40;
  font-family: ElioKR, ElioEN, ElioIPA, "Apple SD Gothic Neo", sans-serif;
  line-height: 1.75;
}
a {
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.45;
}
:focus-visible {
  outline: 3px solid #c76c32;
  outline-offset: 5px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.22;
  letter-spacing: -0.05em;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.4;
  letter-spacing: -0.035em;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.5;
}
p {
  overflow-wrap: anywhere;
}
.header,
main,
footer {
  max-width: 1240px;
  margin: auto;
}
.header {
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.wordmark {
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1.7rem;
}
.wordmark span {
  font-size: 0.65rem;
  display: block;
  letter-spacing: 0.3em;
}
nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
nav a {
  text-decoration: none;
  font-size: 0.95rem;
}
.hero {
  padding: 4rem 3rem 5rem;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 3rem;
}
.eyebrow {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #6b7861;
}
.hero p:not(.eyebrow) {
  font-size: 1.15rem;
}
.button {
  display: inline-flex;
  gap: 2rem;
  align-items: center;
  background: #285c49;
  color: white;
  padding: 0.8rem 1.4rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: bold;
}
.hero-art {
  background: #e9edda;
  border-radius: 48% 48% 40% 40%;
  text-align: center;
  padding: 2rem 1rem;
}
.hero-art img {
  width: min(100%, 300px);
  height: auto;
  object-fit: contain;
}
.hero-art p {
  font-size: 0.95rem !important;
  margin: 0;
  color: #567051;
}
.section {
  padding: 3rem;
}
.section-heading {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
}
.section-heading > p {
  max-width: 28rem;
  color: #66736a;
}
.stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 2rem 0;
}
.stage {
  border: 1px solid #d6ddcf;
  border-radius: 1.2rem;
  background: #f4f5eb;
  color: inherit;
  padding: 1rem 0.6rem;
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
}
.stage small,
.stage strong,
.stage span {
  display: block;
}
.stage strong {
  font-size: 1.2rem;
}
.stage small {
  font-size: 0.7rem;
}
.stage span {
  font-size: 0.75rem;
}
.stage[aria-pressed="true"] {
  background: #2d604c;
  color: #fff;
  border-color: #2d604c;
}
.stage-detail {
  background: #f0f1e6;
  padding: 1.5rem;
  border-radius: 1.2rem;
  margin-bottom: 2rem;
}
.stage-detail h3 {
  margin-bottom: 0.25rem;
}
.steps {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.step {
  flex: 1;
  min-width: min(100%, 200px);
  background: #fbfaf4;
  padding: 1rem;
  border-radius: 0.8rem;
}
.step p {
  margin: 0;
  font-size: 0.9rem;
}
.books {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.book {
  border: 1px solid #dfe3d8;
  border-radius: 1.4rem;
  background: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.book-cover {
  background: #e5ebd7;
  padding: 2rem;
  text-align: center;
}
.book-cover img {
  height: 150px;
  max-width: 100%;
  object-fit: contain;
}
.book-content {
  padding: 1.5rem;
  flex: 1;
}
.book-content p {
  color: #657269;
}
.badge {
  font-size: 0.75rem;
  background: #edf1e4;
  padding: 0.2rem 0.6rem;
  border-radius: 0.6rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.book button {
  border: 0;
  min-height: 48px;
}
.empty {
  grid-column: 1/-1;
  padding: 2rem;
  border: 1px dashed #b7c6b5;
  border-radius: 1rem;
}
.guide {
  margin-top: 2rem;
  background: #eef0e4;
  border-radius: 2rem;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
.guide-grid span {
  font-size: 0.8rem;
  color: #8c6f4f;
}
.guide-note {
  font-size: 0.9rem;
  color: #647361;
}
footer {
  padding: 4rem 3rem;
}
footer p,
footer a {
  font-size: 0.9rem;
}
/* Plain links to the static book pages and age courses (works without script). */
.static-links {
  margin-top: 1.25rem;
}
.static-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.static-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
#reader {
  width: min(1050px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  border: 0;
  border-radius: 1.5rem;
  background: #fbfaf4;
  color: #244c40;
  padding: 2rem;
  overflow: auto;
}
.reader-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.reader-top p {
  margin: 0;
}
.quiet {
  border: 1px solid #b3c3ae;
  background: transparent;
  border-radius: 2rem;
  padding: 0.6rem 1rem;
  color: inherit;
  min-height: 48px;
}
.reader-controls {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
}
.reader-controls button {
  padding: 0.6rem 1.3rem;
  border: 1px solid #a9bea9;
  border-radius: 2rem;
  background: #e6ecdc;
  color: inherit;
  min-height: 48px;
}
.reader-controls p {
  margin: 0;
  text-align: center;
}
.story-image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
}
.scene-draft {
  background: #e8ecd9;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}
.scene-draft img {
  width: 150px;
  max-width: 100%;
  height: auto;
}
.scene-draft p {
  font-size: 0.9rem;
  color: #63735c;
  margin-bottom: 0;
}
.story-text {
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.5;
  text-align: center;
  margin: 1rem 0;
  color: #244c40;
}
.parent-note {
  font-size: 0.95rem;
  color: #65715d;
}
.reader-intro {
  max-width: 44rem;
}
.reader-intro dt {
  font-weight: bold;
  margin-top: 1rem;
}
.reader-intro dd {
  margin: 0.25rem 0 1rem;
}
.skip {
  position: absolute;
  top: 0;
  left: 0;
  /* Hidden by its own height, so it stays out of view at 200% text too. */
  transform: translateY(-110%);
  background: white;
  padding: 0.5rem;
  z-index: 5;
}
.skip:focus {
  /* Inset by more than the global focus ring offset so the whole ring shows. */
  transform: translate(0.75rem, 0.75rem);
}
#load-error {
  padding: 2rem;
}
body.reading {
  overflow: hidden;
}
@media (max-width: 800px) {
  .header,
  .hero,
  .section,
  footer {
    padding: 1.5rem;
  }
  .hero {
    gap: 1.5rem;
  }
  .stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .section-heading {
    display: block;
  }
  .books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-grid {
    gap: 1rem;
  }
}
@media (max-width: 520px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-art {
    padding: 1rem;
  }
  .hero-art img {
    max-width: 160px;
  }
  .books,
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .header {
    gap: 1rem;
  }
  nav {
    gap: 1rem;
  }
  #reader {
    padding: 1rem;
  }
  .reader-controls {
    gap: 0.5rem;
  }
  .reader-controls button {
    padding: 0.6rem 0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .header,
  footer,
  .skip,
  .reader-controls,
  .reader-top {
    display: none;
  }
  body.reading > main {
    display: none;
  }
  body.reading > #reader {
    display: block;
    position: static;
    max-height: none;
    width: 100%;
    overflow: visible;
  }
  
}
/* Minimums use rem so large text also reduces the number of columns. */
.hero {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.stages {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
}
.books {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.guide-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.step {
  font: inherit;
  text-align: left;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
}
.step strong {
  display: block;
}
.step[aria-pressed="true"] {
  border-color: #70946b;
  box-shadow: inset 0 0 0 1px #70946b;
}

.hero-art img {
  border-radius: 45%;
}

[lang="en"] {
  font-family: ElioEN, ElioKR, ElioIPA, sans-serif;
}
.story-spread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
  align-items: center;
}
.story-picture,
.story-copy {
  min-width: 0;
}
.story-copy audio {
  width: 100%;
  margin-top: 1rem;
}
.story-copy .story-text {
  text-align: left;
  overflow-wrap: anywhere;
}
#reader-title {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0.5rem 0 1rem;
}
@media (max-height: 500px) {
  #reader {
    padding: 1rem;
  }
  .reader-controls {
    margin-top: 1rem;
  }
  .reader-top .quiet {
    padding: 0.4rem 0.8rem;
  }
  .scene-draft {
    padding: 1rem;
  }
  .scene-draft img {
    width: 90px;
  }
}

.pdf-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 0.5rem 1rem 0.5rem 0;
  text-underline-offset: 0.25em;
}
.book .pdf-link {
  margin-left: 1rem;
}
@media (max-height: 500px) and (min-width: 650px) {
  .story-copy .story-text {
    margin: 0 0 0.5rem;
  }
  .story-copy audio {
    margin-top: 0.5rem;
  }
  #reader-title {
    margin: 0.25rem 0 0.5rem;
  }
  .reader-controls {
    margin-top: 0.5rem;
  }
}
.picture-mode {
  margin-top: 1rem;
}
.picture-mode[aria-pressed="true"] {
  background: #e3ead5;
  border-color: #6c8a61;
}
.picture-prompt {
  font-size: 1.25rem;
  line-height: 1.7;
}
.picture-mode[hidden] {
  display: none;
}

.reader-top .picture-mode {
  margin: 0;
}
.reader-top .eyebrow {
  margin-right: auto;
}

.step > span {
  display: block;
  font-size: 0.9rem;
}
.parent-note summary {
  min-height: 44px;
  padding: 0.4rem 0;
  cursor: pointer;
}
.age-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr));
  gap: 0.6rem;
  margin: 2rem 0;
}
.age-choice {
  border: 1px solid #d6ddcf;
  border-radius: 1rem;
  background: #f0f2e7;
  color: inherit;
  padding: 0.8rem 0.5rem;
}
.age-choice strong,
.age-choice span {
  display: block;
}
.age-choice strong {
  font-size: 1.15rem;
}
.age-choice span {
  font-size: 0.75rem;
}
.age-choice[aria-pressed="true"] {
  background: #2d604c;
  color: white;
  border-color: #2d604c;
}
.daily-course-heading h3 {
  margin-bottom: 0.4rem;
}
.daily-course-heading p {
  color: #66736a;
}
.daily-calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.daily-calendar-controls label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.daily-calendar-controls select {
  font: inherit;
  color: inherit;
  background: white;
  border: 1px solid #b3c3ae;
  border-radius: 0.7rem;
  padding: 0.6rem;
  max-width: 100%;
  min-height: 48px;
}
.range-label {
  font-size: 0.8rem;
  margin: 1rem 0;
}
.daily-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
  gap: 0.6rem;
}
.day-tile {
  border: 1px solid #c4d1bd;
  background: #edf2e2;
  color: inherit;
  border-radius: 1rem;
  padding: 0.65rem 0.4rem;
  min-width: 0;
}
.day-tile span,
.day-tile strong,
.day-tile small {
  display: block;
}
.day-tile span {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.day-tile strong {
  font-size: 1.3rem;
  line-height: 1.4;
}
.day-tile small {
  font-size: 0.7rem;
}
.day-tile.planned {
  background: #f8f8f0;
  color: #687466;
  border-color: #e1e5d8;
}
.day-tile[aria-pressed="true"] {
  border-color: #285c49;
  box-shadow: inset 0 0 0 2px #285c49;
}
.daily-card {
  margin-top: 1.5rem;
  border: 1px solid #d9e0cf;
  background: #f0f2e5;
  border-radius: 1.4rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
  align-items: center;
}
.daily-card > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
}
.daily-copy {
  min-width: 0;
}
.daily-copy .parent-note {
  margin: 0.7rem 0 0;
}
.daily-card .pdf-link {
  margin-left: 1rem;
}
.daily-section {
  border-top: 1px solid #e3e6db;
}
/* A quiet, local-only reading marker. No score, streak or locked day. */
.daily-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d9e0cf;
  border-radius: 1rem;
  background: #edf1e4;
}
.daily-resume-label {
  min-width: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.daily-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-width: 0;
}
.daily-progress .button,
.daily-progress .quiet {
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.daily-progress .button {
  justify-content: center;
  border: 0;
  text-align: center;
}
.daily-progress-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #526957;
}
.daily-progress-status {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #526957;
}
.day-read-mark {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.35em;
  border-radius: 50%;
  background: #2d604c;
  vertical-align: middle;
}
.day-tile.is-read:not([aria-pressed="true"]) {
  border-color: #8aa885;
}
@media (prefers-color-scheme: dark) {
  .daily-progress {
    border-color: #5b7f6a;
    background: #21382e;
    color: #f4f1e6;
  }
  .daily-progress .button {
    background: #e7eed7;
    color: #1c352c;
  }
  .daily-progress .quiet {
    border-color: #a9c4ad;
    color: #f4f1e6;
  }
  .daily-progress :focus-visible {
    outline-color: #ffd9a8;
  }
  .daily-progress-note {
    color: #c9d6c7;
  }
}

.letter-panel {
  background: #f1f4e9;
  color: #244c40;
  border-radius: 1.2rem;
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
}
.letter-parts, .letter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.letter-row .letter-parts { justify-content: center; flex-wrap: nowrap; }
.letter-row { min-width: 0; }
.letter-panel [hidden] { display: none; }
.letter-tile {
  font-family: ElioEN, sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.4;
  min-width: 0;
  padding: .1em .15em;
  border-bottom: .08em solid #70946b;
}
.letter-tile.pointed { background: #d7e5bd; outline: 3px solid #245c4b; border-radius: .3rem; }
.letter-whole { font: 800 clamp(2rem, 8vw, 4rem)/1.4 ElioEN, sans-serif; text-align: center; margin: 0; }
.letter-actions button { min-height: 48px; white-space: normal; }
.letter-status { margin: 0; line-height: 1.7; }
.letter-tip { margin: 0; line-height: 1.7; padding: .5rem .75rem; border-radius: .8rem; background: #fffaf0; color: #3d4a2f; border-left: 4px solid #e0a95a; }
/* Large text keeps each glyph at its full width; the ordered tiles wrap. */
.letter-panel { padding: clamp(.5rem, 2vw, 1.2rem); }
.letter-row .letter-parts { flex-wrap: wrap; }
.letter-tile { flex: 0 0 auto; }
.letter-tile { padding-top: 0; padding-bottom: 0; }
@media (max-height: 500px) and (min-width: 650px) {
  .letter-panel { padding: .5rem; gap: .375rem; }
  .letter-status { font-size: .875rem; line-height: 1.5; }
}
.letter-rows { display: grid; gap: 1rem; }
@media (max-height: 500px) and (min-width: 650px) {
  .letter-panel[data-rows="2"] .letter-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
}

/* Each reading scene is a normal full-page history entry, never a modal. */
.chapter-label { font-size: 1rem; line-height: 1.5; font-weight: 700; margin: 0 0 0.7rem; color: #596957; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
body.reading { overflow: auto; background: #f6f2e8; }
#reader {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  min-height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: clamp(0.75rem, 2vw, 2rem);
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: #fffcf5;
  --stage-color: #3f765f;
}
#reader[data-stage="sprout"] { --stage-color: #748e39; }
#reader[data-stage="leaf"] { --stage-color: #bc7f37; }
#reader[data-stage="branch"] { --stage-color: #477b91; }
#reader[data-stage="tree"] { --stage-color: #79649b; }
#reader[data-stage="forest"] { --stage-color: #9a667c; }
#reader .reader-top { gap: 0.5rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--stage-color); }
#reader-label { color: var(--stage-color); font-weight: 800; line-height: 1.6; }
#reader #close-reader { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
#reader-title { font-size: 1.15rem; font-weight: 750; margin: 0.6rem 0 1rem; }
#reader-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#reader-body > .reader-intro { width: 100%; }
/* The picture is the hero: about 62% of the row, as tall as the space between the toolbar
   and the page turns allows (books.js measures --reader-picture-max). rem-based minimums
   stack the sentence under the picture on narrow screens and at large text sizes. */
#reader .story-spread { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); margin-block: auto; }
#reader .story-picture { flex: 1.8 1 22rem; align-self: flex-start; }
#reader .story-copy { flex: 1 1 15rem; align-self: center; }
#reader .story-image { border-radius: 0.6rem; object-fit: contain; }
/* aspect-ratio keeps the picture's space reserved before the image loads, so a page
   turn never collapses the box and jumps the sentence (review 2026-11-09). */
#reader .story-picture .story-image {
  width: min(100%, calc(var(--reader-picture-max, 70dvh) * 1360 / 768));
  aspect-ratio: 1360 / 768;
  max-width: 100%;
  height: auto;
  max-height: var(--reader-picture-max, 70dvh);
  margin-inline: auto;
}
#reader .story-copy { padding: 0.5rem 0; }
#reader .story-text { font-size: 1.5rem; line-height: 1.65; color: #253b32; }
#reader .story-text.short-text { font-size: 2.5rem; line-height: 1.45; }
#reader .narration-note { font-size: 0.95rem; color: #596b5f; line-height: 1.7; }
/* Page turns stay in reach while every line remains in normal document flow. */
html { scroll-padding-block-end: var(--reader-controls-space, 0px); }
#reader .reader-controls {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid #d7decd;
  padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
  margin-top: 1rem;
  background: #fffcf5;
}
#reader .reader-controls button {
  min-width: 0;
  max-width: 100%;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}
#reader .reader-controls #previous { justify-self: start; }
#reader .reader-controls #next { justify-self: end; }
#reader .reader-controls #next { color: #fff; background: var(--stage-color); border-color: var(--stage-color); }
#reader .reader-controls p { min-width: 0; margin: 0; text-align: center; font-family: ElioEN, ElioKR, sans-serif; }
#reader .reader-intro { margin: 1rem auto; line-height: 1.8; }
#reader .narration-start { margin: 0.5rem 0; align-self: flex-start; }
@media (min-width: 650px) and (max-height: 500px) {
  #reader { padding: 0.6rem 1rem; }
  #reader .reader-top { padding-bottom: 0.4rem; }
  #reader-title { margin: 0.3rem 0 0.5rem; }
  #reader .story-copy { padding: 0; }
}
@media print {
  body.reading > #main { display: none; }
  body.reading > #reader { display: block; min-height: auto; padding: 0; }
}

/* A consistent shelf: one stage colour, clear book length, one primary action. */
.stage[data-id="seed"] { border-top: 5px solid #3f765f; }
.stage[data-id="sprout"] { border-top: 5px solid #748e39; }
.stage[data-id="leaf"] { border-top: 5px solid #bc7f37; }
.stage[data-id="branch"] { border-top: 5px solid #477b91; }
.stage[data-id="tree"] { border-top: 5px solid #79649b; }
.stage[data-id="forest"] { border-top: 5px solid #9a667c; }
.book-facts { color: #526957; font-size: 0.9rem; font-weight: 750; line-height: 1.7; }
@media (min-width: 650px) and (max-height: 500px) {
  #reader .story-text.short-text { font-size: 1.8rem; line-height: 1.45; }
  #reader .narration-note { margin: 0.4rem 0; }
}

@media print {
  #reader .reader-controls { display: none; }
  html { scroll-padding-block-end: 0; }
}

/* Korean wraps between words, never mid-word ("따라가 / 요."); a word longer than its
   line (an English word or URL) can still break so nothing overflows. */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* The day card sits above the calendar so the open button is reached first. */
.daily-card {
  margin-bottom: 1.5rem;
  scroll-margin-top: 1rem;
}
.age-choice .age-course {
  font-size: 0.7rem;
  line-height: 1.5;
}
/* Short buttons keep a compact line box so large text needs fewer rows. */
#reader .reader-top .quiet,
#reader .reader-controls button,
#reader .reader-controls p {
  line-height: 1.35;
}
/* Set by books.js when the toolbar and sticky page turns cannot both fit (e.g. 200% text
   on a landscape phone): the page turns follow the page instead of covering the toolbar. */
#reader.controls-in-flow .reader-controls {
  position: static;
}
/* Last page: re-reading is a quiet choice beside the sentence; 다음 stays the main button. */
#reader .story-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}
#reader .story-end-note {
  flex-basis: 100%;
  margin: 0;
  font-weight: 750;
  line-height: 1.6;
  color: #3f5a4c;
}
#reader #restart-book {
  min-height: 44px;
  max-width: 100%;
  padding: 0.45rem 1rem;
  line-height: 1.35;
  white-space: normal;
}
/* The book label shrinks and wraps onto two short lines before the toolbar buttons wrap
   onto a second row, so the toolbar stays one row wherever it can. */
#reader .reader-top #reader-label { flex: 1 1 7rem; min-width: 0; letter-spacing: 0.04em; }
/* Short landscape screens: the English title row gives its height to the picture (the
   label above already names the book), and the bars are tightened with 44px targets. */
@media (max-height: 500px) {
  #reader { padding-block: 0.5rem; }
  #reader-title { display: none; }
  #reader-label { line-height: 1.45; }
  #reader .reader-top { padding-bottom: 0.35rem; }
  #reader .reader-top .quiet { min-height: 44px; padding: 0.3rem 0.75rem; font-size: 0.9rem; }
  #reader .reader-controls { margin-top: 0.4rem; padding-block: 0.3rem max(0.3rem, env(safe-area-inset-bottom)); }
  #reader .reader-controls button { min-height: 44px; padding-block: 0.3rem; }
  #reader .story-end { margin-top: 0.5rem; }
}
@media print {
  #reader .story-picture .story-image { max-height: none; }
}
/* One sound model: when the browser blocks autoplay, 소리 듣기 is the one bright start
   button in the toolbar (in place of 소리 끄기/켜기); 다시 듣기 is a large, calm button right
   under the sentence. It keeps its space while waiting so the sentence never jumps. */
#reader #start-narration {
  color: #fff;
  background: var(--stage-color);
  border-color: var(--stage-color);
  font-weight: 800;
}
#reader #start-narration::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.7em;
  margin-right: 0.45em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#reader .replay-narration {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  max-width: 100%;
  margin: 0.75rem 0 0.25rem;
  padding: 0.5rem 1.4rem 0.5rem 1.1rem;
  border: 2px solid var(--stage-color);
  border-radius: 2rem;
  background: #fff;
  color: #253b32;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
#reader .replay-narration svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: var(--stage-color);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#reader .replay-narration.waiting { visibility: hidden; }
@media (max-height: 500px) {
  #reader .replay-narration { min-height: 48px; margin-top: 0.25rem; padding-block: 0.3rem; font-size: 1.05rem; }
}
@media print {
  #reader .replay-narration { display: none; }
}

/* App call-to-action band (store badge slots). Filled by tools/release/build_web.py. */
.app-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  border: 1px solid #c9d6c2;
  border-radius: 2rem;
  background: #f1f6ec;
}
.app-cta-copy {
  flex: 1 1 22rem;
  min-width: 0;
}
.app-cta-copy p:last-child {
  margin-bottom: 0;
}
.store-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.store-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 0.55rem 1.2rem;
  border: 1px solid #245c4b;
  border-radius: 1rem;
  background: #245c4b;
  color: #fff;
  line-height: 1.4;
  text-decoration: none;
}
.store-badge-kicker {
  font-size: 0.78rem;
  font-weight: 800;
}
.store-badge-name {
  font-size: 1rem;
  font-weight: 800;
}
.store-badge-pending {
  border-style: dashed;
  border-color: #8fa58c;
  background: transparent;
  color: #3d5a4d;
}
@media print {
  .app-cta { display: none; }
}