/* ==================================================================
   KIIP Level 5 — study site
   ------------------------------------------------------------------
   Two layers, and the boundary between them matters:

   1. SECTIONS declare how dense and how prominent their contents are,
      as a handful of custom properties (--scale, --lead, --flow and the
      chrome tokens). They never mention a block type.

   2. BLOCK COMPONENTS express their size relative to those properties
      and never mention a section. Custom properties inherit, so one
      declaration on a section retunes everything inside it.

   Adding a section kind is therefore one rule listing what differs from
   the defaults on `.sect`, however many block types it happens to
   contain. See "section kinds" below.
   ================================================================== */

/* --- palette and fonts -------------------------------------------- */

:root {
  /* Every colour is written once, as its light value and then its dark one.
     The page follows the system unless the reader has chosen otherwise, in
     which case data-theme on <html> flips color-scheme, and light-dark()
     with it. */
  color-scheme: light dark;

  --paper: light-dark(#fbf9f4, #15171a);
  --raised: light-dark(#ffffff, #1d2024);
  --ink: light-dark(#23201b, #e7e3db);
  --ink-soft: light-dark(#5c564c, #a8a196);
  --ink-faint: light-dark(#8b8478, #7c7669);
  --rule: light-dark(#e3ddd0, #2e3338);
  --rule-soft: light-dark(#efeade, #24282c);
  --accent: light-dark(#1f6f6b, #63c7bf);
  --accent-soft: light-dark(#dbeceb, #1c3a38);
  --accent-ink: light-dark(#12403e, #a9e2dc);
  --mark: light-dark(#f2e3b6, #4c3f1c);
  --en-surface: light-dark(#edf4f3, #1a2523);
  --en-edge: light-dark(#cfe4e1, #27403c);
  --anno: light-dark(#d3e7e5, #21433f);
  --anno-hover: light-dark(#b9dcd8, #2c5852);
  --anno-open: light-dark(#f2e3b6, #4c3f1c);
  --anno-gloss: light-dark(#e2dbf1, #332c52);
  --anno-gloss-hover: light-dark(#d0c6e8, #443a69);
  --anno-gloss-ink: light-dark(#5b4c9c, #b6a9e8);
  --aside: light-dark(#f1eff6, #1f1e26);
  --aside-chip: #6f62a8;
  --aside-ink: light-dark(#574a8c, #b3a9df);

  /* The eight 편, in the colours the book gives them on its contents pages
     (read off the photographs, so near rather than exact). The book sets
     white on them; at screen sizes that needs a deeper shade than print, so
     each is carried a step down from what the page shows. The hues, which
     are what identifies a part, are the book's. */
  --part-1: light-dark(#517f3c, #6fa552);   /* 사회   green */
  --part-2: light-dark(#9a6c12, #c69433);   /* 교육   amber */
  --part-3: light-dark(#4f549b, #7176bb);   /* 문화   blue-violet */
  --part-4: light-dark(#a4502f, #c8724f);   /* 정치   terracotta */
  --part-5: light-dark(#514080, #7b68b4);   /* 경제   deep purple */
  --part-6: light-dark(#a94459, #cf6a80);   /* 법     rose */
  --part-7: light-dark(#3f755d, #5b9b7d);   /* 역사   sage green */
  --part-8: light-dark(#9c3663, #c2537f);   /* 지리   magenta */

  --ko: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 42rem;
  --section-gap: 3rem;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* --- base ---------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

.wrap { max-width: 66rem; margin: 0 auto; padding: 0 1.5rem 6rem; }

.masthead {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
  padding: 2rem 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.masthead h1 {
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
}

.masthead h1 a { color: inherit; text-decoration: none; }
.masthead .sub { color: var(--ink-faint); font-size: 0.85rem; margin: 0; }

/* The reader's own light/dark choice, kept at the far end of the masthead
   so it is out of the way of the reading and in the same place on both
   pages. It carries the theme it would switch to, not the one in force. */
.theme {
  margin-left: auto;
  font: inherit;
  font-size: 0.8rem;
  font-family: var(--ui);
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  line-height: 1.6;
}

.theme:hover { border-color: var(--ink-faint); color: var(--ink); }
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.backlink { display: inline-block; margin-top: 2rem; font-size: 0.85rem; text-decoration: none; }

/* --- index page ---------------------------------------------------- */

.progress {
  font-size: 0.8rem; color: var(--ink-faint); margin: 0 0 2.5rem;
}

/* The contents run part by part, as the book prints them: a coloured chip
   naming the 편, and its chapters under it. The part supplies its own colour
   through --part, so every rule below is written once. */

.part { margin-bottom: 2.75rem; --part: var(--ink-soft); }

.part[data-part="1"] { --part: var(--part-1); }
.part[data-part="2"] { --part: var(--part-2); }
.part[data-part="3"] { --part: var(--part-3); }
.part[data-part="4"] { --part: var(--part-4); }
.part[data-part="5"] { --part: var(--part-5); }
.part[data-part="6"] { --part: var(--part-6); }
.part[data-part="7"] { --part: var(--part-7); }
.part[data-part="8"] { --part: var(--part-8); }

.part-head {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.part-chip {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  background: var(--part); color: #fff;
  border-radius: 6px; padding: 0.3rem 0.75rem 0.35rem;
}

.part-num {
  font-family: var(--ko); font-size: 0.72rem; opacity: 0.85;
}

.part-name {
  font-family: var(--ko); font-size: 1rem; font-weight: 700; margin: 0;
  color: inherit;
}

.part-en {
  font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the four pages that close the part, in the part's own colour */
.part-link {
  margin-left: auto;
  font-family: var(--ko); font-size: 0.8rem;
  color: var(--part); text-decoration: none;
  border: 1px solid var(--part); border-radius: 5px;
  padding: 0.22rem 0.6rem;
}

.part-link:hover, .part-link:focus-visible {
  background: var(--part); color: #fff;
}

/* the part's colour carries down its chapters as a spine */
.entries { border-left: 2px solid var(--part); padding-left: 0.9rem; }

.entries > .entry { border-top: 1px solid var(--rule); }
.entries > .entry:last-child { border-bottom: 1px solid var(--rule); }

.entry {
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0 1rem;
  padding: 0.85rem 0.5rem; text-decoration: none; color: inherit;
}

a.entry:hover { background: var(--raised); }

/* A chapter that is not written up yet still belongs in the contents; it is
   set back rather than left out, so the shape of the book stays visible. */
.entry.is-pending { color: var(--ink-faint); }
.entry.is-pending .ko { font-weight: 500; }

.entry .num {
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
  font-size: 0.9rem; padding-top: 0.15rem;
}

.entry .head {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}

.entry .ko { font-family: var(--ko); font-size: 1.1rem; font-weight: 600; }
.entry .en { color: var(--ink-soft); font-size: 0.85rem; }

.entry .question {
  display: block; font-family: var(--ko); font-size: 0.85rem;
  color: var(--ink-faint); margin-top: 0.2rem; word-break: keep-all;
}

.entry .page {
  font-size: 0.78rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; padding-top: 0.3rem;
}

.empty { color: var(--ink-faint); padding: 2rem 0; }

/* --- chapter head -------------------------------------------------- */

.lesson-head { margin-bottom: 2.5rem; }

.lesson-head .eyebrow {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}

.lesson-head h2 {
  font-family: var(--ko); font-size: 2.1rem;
  margin: 0.2rem 0 0.1rem; line-height: 1.25;
}

.lesson-head .en { color: var(--ink-soft); margin: 0; }

.doc { max-width: var(--measure); }

/* ==================================================================
   THE SECTION SYSTEM
   ================================================================== */

/* Defaults every section inherits. A section kind overrides only what
   the textbook actually sets differently.

   --scale       type scale for running text inside the section
   --aux-scale   type scale for supporting matter (glossary, tables,
                 captions, cards) — kept separate because these floor
                 out fast, and a small aside still needs a legible table
   --lead        line-height for Korean running text
   --flow        vertical gap between blocks
   --surface     background
   --edge        border colour
   --pad         inner padding
   --radius      corner radius
   --title-*     the section's own heading                             */

.sect {
  --scale: 1;
  --aux-scale: var(--scale);
  --lead: 2.05;
  --flow: 1.3rem;
  --surface: transparent;
  --edge: transparent;
  --pad: 0;
  --radius: 0;
  --title-size: 1.15rem;
  --title-weight: 600;
  --title-color: var(--ink);
  --title-rule: 1px solid var(--rule);
  --title-gap: 1.25rem;
  --title-bg: transparent;
  --title-pad: 0 0 0.6rem;
  --title-radius: 0;
  --title-wrap: normal;
  --sub-align: left;
  --head-display: block;
  --head-gap: 0;
  --topic-size: 1.13rem;
  --topic-color: var(--ink);
  --topic-align: left;
  --cell-align: left;
  --column-title: var(--accent);

  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: var(--section-gap);
}

.sect-head {
  display: var(--head-display);
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--head-gap);
  margin-bottom: var(--title-gap);
}

.sect-title {
  font-family: var(--ko);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--title-color);
  background: var(--title-bg);
  border-bottom: var(--title-rule);
  border-radius: var(--title-radius);
  padding: var(--title-pad);
  margin: 0;
  white-space: var(--title-wrap);
}

.sect-topic {
  font-family: var(--ko);
  font-size: calc(var(--topic-size) * var(--scale));
  font-weight: 600;
  color: var(--topic-color);
  text-align: var(--topic-align);
  line-height: 1.5;
  margin: 0;
}

/* --- section kinds -------------------------------------------------- */

/* 01 / 02 — the numbered halves of a chapter, its main structure. */
.sect-part {
  --title-size: 1.5rem;
  --title-weight: 700;
  --title-rule: 2px solid var(--accent);
  --title-gap: 1.5rem;
}

/* 알아두면 좋아요 — a small tinted box at the foot of the page. Quieter
   and tighter than the body, and labelled with a chip instead of a
   heading of its own. */
.sect-aside {
  --scale: 0.84;
  --aux-scale: 0.93;
  --lead: 1.85;
  --flow: 0.7rem;
  --surface: var(--aside);
  --pad: 1rem 1.15rem;
  --radius: 5px;

  /* label and topic on one line, the label set as a chip */
  --head-display: flex;
  --head-gap: 0.5rem;
  --title-size: 0.83rem;
  --title-color: #fff;
  --title-bg: var(--aside-chip);
  --title-pad: 0.18rem 0.5rem;
  --title-radius: 3px;
  --title-wrap: nowrap;
  --title-rule: 0;
  --title-gap: 0.7rem;
  --topic-color: var(--aside-ink);
  --column-title: var(--aside-ink);

  margin-bottom: 2.5rem;
}

/* 주요 내용정리 · 이야기 나누기 — full-width closing sections, set larger
   and more openly than the body. */
.sect-review,
.sect-discuss {
  --lead: 2.15;
  --surface: var(--raised);
  --edge: var(--rule);
  --pad: 1.9rem 2rem 1.5rem;
  --radius: 8px;
  --title-size: 1.4rem;
  --title-color: var(--accent);
  --title-rule: 0;
  --title-gap: 1.4rem;
}

.sect-review { --flow: 0.75rem; }

/* the 이야기 나누기 article headline is centred beneath the section title */
.sect-discuss {
  --head-gap: 1rem;
  --topic-align: center;
  --topic-size: 1.2rem;
}

/* --- the spread that closes a 편 ------------------------------------ */

/* 대단원 정리 — what the part covered, tabulated as the book tabulates it. */
.sect-summary {
  --surface: var(--raised);
  --edge: var(--rule);
  --pad: 1.9rem 2rem 1.5rem;
  --radius: 8px;
  --title-size: 1.4rem;
  --title-color: var(--accent);
  --title-rule: 0;
  --title-gap: 1.4rem;
}

/* 가로 세로 퀴즈 · 단원 종합 평가 — questions with their answers covered, set
   like 주요 내용정리, which is the other place a gap is filled in. */
.sect-quiz,
.sect-exam {
  --lead: 2.15;
  --flow: 0.75rem;
  --surface: var(--raised);
  --edge: var(--rule);
  --pad: 1.9rem 2rem 1.5rem;
  --radius: 8px;
  --title-size: 1.4rem;
  --title-color: var(--accent);
  --title-rule: 0;
  --title-gap: 1.4rem;
}

/* The 가로 세로 퀴즈 grid. It is not typed into: the cells stand empty with
   their numbers until a clue's answer is revealed, and the word is then
   written across its own run. */

.crossword {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 1px;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto var(--flow);
  background: var(--ink-soft);
  border: 1px solid var(--ink-soft);
  font-family: var(--ko);
}

.cw-cell, .cw-block {
  position: relative;
  aspect-ratio: 1;
  background: var(--raised);
}

.cw-block { background: var(--anno-gloss); }

.cw-num {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.58em;
  line-height: 1.2;
  color: var(--ink-faint);
  font-family: var(--ui);
}

.cw-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.95rem;
  color: var(--accent-ink);
}

.cw-cell.is-shown { background: var(--accent-soft); }

/* 일상생활과 민주주의 · 한국 대통령과 만난 정상들 — the part's own features,
   which read as articles of their own. */
.sect-feature {
  --title-size: 1.5rem;
  --title-weight: 700;
  --title-rule: 2px solid var(--accent);
  --title-gap: 1.5rem;
}

/* generated commentary, not textbook content */
/* the unit table is set centred on the page, unlike the tables in an
   article, which run to the left with their prose */
.sect-related { --cell-align: center; }

.sect-notes {
  --scale: 0.88;
  --title-size: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}

/* ==================================================================
   BLOCK COMPONENTS
   Each sizes itself from the section tokens. None names a section.
   ================================================================== */

.sub-title {
  font-family: var(--ko); font-weight: 600;
  font-size: calc(1.05rem * var(--scale));
  margin: calc(2rem * var(--scale)) 0 calc(0.9rem * var(--scale));
  text-align: var(--sub-align);
}

h5.sub-title { font-size: calc(0.97rem * var(--scale)); color: var(--ink-soft); }
.sect > .sub-title:first-of-type { margin-top: 0; }

.ko-para {
  font-family: var(--ko);
  font-size: calc(1.12rem * var(--scale));
  line-height: var(--lead);
  margin: 0 0 var(--flow);
  word-break: keep-all;
}

.ko-para.is-prompt,
.para-pair.is-prompt { font-weight: 600; margin-top: 1.6rem; }

/* A translated paragraph is rows of sentence pairs. Left alone the rows are
   inline, so the Korean reads as a paragraph and the English is not
   rendered; side by side turns each row into two columns. */

.para-pair {
  font-family: var(--ko);
  font-size: calc(1.12rem * var(--scale));
  line-height: var(--lead);
  margin: 0 0 var(--flow);
  word-break: keep-all;
}

.para-pair .row { display: inline; }
.para-pair .en { display: none; }

/* Going between the two layouts means re-flowing the sentences of a
   paragraph into a column, which cannot be interpolated — animating around
   it only decorated the jump. So the paragraph fades out, changes layout
   while it cannot be seen, and fades back. */

.para-pair { transition: opacity 0.15s ease; }
.para-pair.is-fading { opacity: 0; }

/* while the height is being animated the paragraph is clipped, so growing
   content does not spill past the box it is growing into */
.para-pair.is-resizing {
  overflow: hidden;
  transition: opacity 0.15s ease, height 0.26s ease;
}

/* Even columns. Giving the English the wider half left it short of the row,
   which the cell then had to pad out; at 1:1 it wraps to about the depth the
   Korean takes and the two sit level. */
.para-pair.is-split .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.1rem;
}

.para-pair.is-split .ko { display: block; padding: 0.5rem 0; }

/* the cell fills the row, so the tint runs unbroken down the column even
   where the Korean sentence is the taller of the two */
.para-pair.is-split .en {
  display: block;
  overflow: hidden;
  font-family: var(--ui);
  font-size: calc(0.94rem * var(--aux-scale));
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--en-surface);
  border: 1px solid var(--en-edge);
  border-bottom: 0;
  padding: 0.5rem 0.8rem;
}

/* the tint reads as one column per paragraph, closed top and bottom */
.para-pair.is-split .row:last-child .en { border-bottom: 1px solid var(--en-edge); }
.para-pair.is-split .row:first-child .en { border-radius: 5px 5px 0 0; }
.para-pair.is-split .row:last-child .en { border-radius: 0 0 5px 5px; }
.para-pair.is-split .row:only-child .en { border-radius: 5px; }

/* too narrow for two columns: the row folds, and each translation becomes
   its own panel under the sentence it renders */
@media (max-width: 46rem) {
  .para-pair.is-split .row { grid-template-columns: 1fr; gap: 0.25rem; }
  .para-pair.is-split .ko { padding-bottom: 0; }
  .para-pair.is-split .en {
    border: 1px solid var(--en-edge);
    border-radius: 5px;
    margin-bottom: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .para-pair, .para-pair.is-resizing { transition: none; }
}

/* the control that turns an article side by side */
.split-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: inherit;
  font-family: var(--ui);
  font-size: calc(0.76rem * var(--aux-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0.1rem 0;
  margin: 0 0 0.6rem;
  cursor: pointer;
}

.split-toggle:hover { color: var(--accent); }
.split-toggle[aria-pressed="true"] { color: var(--accent); }

.split-toggle::before {
  content: "";
  width: 0.8em;
  height: 0.62em;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  background:
    linear-gradient(to right, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
}

/* the English name of a section or subsection, under its Korean heading */
.en-title {
  display: block;
  font-family: var(--ui);
  font-weight: 400;
  font-size: calc(0.85rem * var(--aux-scale));
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.ko-list {
  font-family: var(--ko);
  font-size: calc(1.05rem * var(--scale));
  margin: 0 0 var(--flow);
  padding-left: 1.4rem;
}

ol.ko-list { padding-left: 1.6rem; }
ol.ko-list li::marker { color: var(--ink-faint); }

/* a sub-list sits under its parent item, marked apart from it */
.ko-sublist {
  margin: calc(0.3rem * var(--scale)) 0 0;
  padding-left: 1.1rem;
  font-size: calc(0.95rem * var(--scale));
  list-style-type: "\2013\a0";
}

.ko-bullet {
  line-height: var(--lead);
  margin-bottom: calc(0.4rem * var(--scale));
  word-break: keep-all;
}

/* margin glossary ---------------------------------------------------- */

.glossbox {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 var(--flow);
  background: var(--raised);
  font-size: calc(0.9rem * var(--aux-scale));
}

.gloss-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr;
  gap: 0.2rem 1rem;
  padding: 0.4rem 0;
  border-top: 1px dotted var(--rule);
}

.gloss-row:first-child { border-top: 0; }

.gloss-term { font-family: var(--ko); font-weight: 600; }
.gloss-def { font-family: var(--ko); color: var(--ink-soft); word-break: keep-all; }

@media (max-width: 34rem) {
  .gloss-row { grid-template-columns: 1fr; }
}

/* prose the book sets side by side; one column on a narrow screen */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: calc(1.4rem * var(--scale));
  margin-bottom: var(--flow);
}

.column > .ko-para:last-child { margin-bottom: 0; }

.column-title {
  font-family: var(--ko); font-weight: 700;
  font-size: calc(0.97rem * var(--scale));
  color: var(--column-title);
  margin: 0 0 calc(0.5rem * var(--scale));
}

/* fill-in gaps in 주요 내용정리 ---------------------------------------
   An answer stays covered until it is asked for. The text is still there,
   so it copies and reads to a screen reader — it is only hidden from the
   eye, which is the point of the exercise. */

.blank {
  font: inherit;
  font-family: var(--ko);
  padding: 0 0.35em;
  border: 0;
  border-radius: 2px;
  background: var(--ink-soft);
  color: transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.blank:hover { background: var(--ink); }

.blank.is-shown {
  background: var(--mark);
  color: var(--ink);
  cursor: pointer;
}

.blank.is-empty {
  display: inline-block;
  min-width: 5em;
  padding: 0;
  background: none;
  border-bottom: 1px solid var(--ink-faint);
  cursor: default;
}

/* tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 0 0 var(--flow); }

.table-wrap table {
  border-collapse: collapse;
  font-family: var(--ko);
  font-size: calc(0.9rem * var(--aux-scale));
  min-width: 100%;
}

.table-wrap th, .table-wrap td {
  border: 1px solid var(--rule);
  padding: 0.45rem 0.7rem;
  text-align: var(--cell-align, left);
  vertical-align: top;
  word-break: keep-all;
}

.table-wrap th {
  background: var(--rule-soft); font-weight: 600;
  white-space: nowrap; text-align: center;
}
.table-wrap td:first-child { white-space: nowrap; color: var(--ink-soft); }

/* a cell merged down its rows sits in the middle of what it covers, the way
   the bracket it stands for does */
.table-wrap td[rowspan] { vertical-align: middle; }

/* bar chart ---------------------------------------------------------- */

.chart { margin: 0 0 var(--flow); padding: 0; }

.bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr 3.5rem;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.35rem;
  font-family: var(--ko);
  font-size: calc(0.88rem * var(--aux-scale));
}

.bar-track {
  position: relative;
  background: var(--rule-soft); border-radius: 3px; height: 0.85rem;
}

/* placed from the zero line, which the script works out from the data */
.bar-fill {
  position: absolute; top: 0; height: 100%;
  background: var(--accent); border-radius: 3px;
}

.bar-fill.is-below { background: var(--anno-gloss-ink); }
.bar-value { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.chart figcaption {
  margin-top: 0.6rem;
  font-size: calc(0.82rem * var(--aux-scale));
  color: var(--ink-faint);
  font-family: var(--ko);
}

/* verse, diagram labels, captions, margin scribbles ------------------ */

.verse {
  font-family: var(--ko);
  font-size: calc(1.05rem * var(--scale));
  border-left: 2px solid var(--rule);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 0 0 var(--flow);
}

.verse p { margin: 0 0 0.4rem; line-height: 1.8; word-break: keep-all; }

.labels {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 var(--flow);
  font-family: var(--ko);
  font-size: calc(0.85rem * var(--aux-scale));
}

.labels span {
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 0.15rem 0.55rem; color: var(--ink-soft);
}

/* Grouped labels: the page sorts its pictures into kinds, so the kind is
   named once and its pictures sit under it. The groups sit side by side and
   wrap onto their own lines when there is no room. */

.labels.is-grouped { gap: 0.7rem 1.8rem; align-items: flex-start; }

.label-group { display: flex; flex-direction: column; gap: 0.35rem; }

.label-group-name {
  margin: 0; color: var(--ink);
  font-size: calc(0.82rem * var(--aux-scale));
  border-bottom: 1px solid var(--rule); padding-bottom: 0.2rem;
}

.label-group-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* A figure from the page: the photo itself is not reproduced, so the caption
   is given an empty frame to sit under rather than floating on its own. */

.figure { margin: 0 0 var(--flow); }

.figure-slot {
  aspect-ratio: 16 / 6;
  border: 1px dashed var(--rule);
  border-radius: 4px;
  background: var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.figure-slot::after {
  content: "photo";
  font-size: calc(0.7rem * var(--aux-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.7;
}

.figure figcaption {
  font-family: var(--ko);
  font-size: calc(0.85rem * var(--aux-scale));
  color: var(--ink-faint);
  margin-top: 0.5rem;
}

p.source {
  font-family: var(--ko);
  font-size: calc(0.85rem * var(--aux-scale));
  color: var(--ink-faint);
  margin: 0 0 var(--flow);
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
}

.margin-note {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  font-family: var(--ko);
  font-size: calc(0.82rem * var(--aux-scale));
  color: var(--ink-faint);
  margin: 0 0 var(--flow);
}

.margin-label {
  font-family: var(--ui); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.8em;
}

/* section translation ------------------------------------------------ */

details.trans {
  margin: -0.4rem 0 var(--flow);
  font-size: calc(0.92rem * var(--aux-scale));
  color: var(--ink-soft);
  border-left: 2px solid var(--accent-soft);
  padding-left: 1rem;
}

details.trans summary {
  cursor: pointer; color: var(--accent);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}

details.trans p { margin: 0.7rem 0; }

/* transcription notes ------------------------------------------------ */

.notes { font-size: calc(0.9rem * var(--scale)); color: var(--ink-faint); padding-left: 1.1rem; }
.notes li { margin-bottom: 0.45rem; }
.notes .count { font-variant-numeric: tabular-nums; }

.notes .ko { font-family: var(--ko); color: var(--ink-soft); }

/* ==================================================================
   ANNOTATIONS
   ================================================================== */

/* An annotated word is highlighted rather than underlined: the band fills
   the line so it reads as a marked word at a glance. Vertical padding on an
   inline box paints without disturbing the line, and box-decoration-break
   keeps a word highlighted on both lines when it wraps. */

/* A button, but a word first: the browser makes button text unselectable,
   which quietly drops every marked word from anything copied out of the
   page. */
button.anno, button.blank {
  -webkit-user-select: text;
  user-select: text;
}

button.anno {
  font: inherit;
  color: inherit;
  display: inline;
  border: 0;
  padding: 0.32em 0.16em;
  margin: 0 -0.02em;
  border-radius: 3px;
  background: var(--anno);
  cursor: pointer;
  transition: background 0.12s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

button.anno:hover { background: var(--anno-hover); }

/* a word the textbook glosses in the margin beside the article, as against
   one marked in the text for another reason */
button.anno.is-glossed { background: var(--anno-gloss); }
button.anno.is-glossed:hover { background: var(--anno-gloss-hover); }

button.anno[aria-expanded="true"] {
  background: var(--anno-open);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The background is repeated here, not inherited from the rule above: this
   selector has to outweigh .is-glossed:hover, or an open word would fall
   back to violet whenever the pointer rested on it. */
button.anno.is-glossed[aria-expanded="true"] {
  background: var(--anno-open);
  box-shadow: inset 0 -2px 0 var(--anno-gloss-ink);
}

/* It grows out of the line it belongs to; see fill() in assets/lesson.js.
   The clipping is a clip-path rather than overflow, and that is the whole
   trick: overflow other than visible makes the card a block formatting
   context, and a block formatting context sitting between a paragraph and
   the heading below it stops their margins collapsing. The fully closed
   card would then still be holding those two margins apart, and removing it
   let them collapse — a jump of one margin, at the very end of the fold.
   clip-path clips what is painted and leaves the layout alone, so a closed
   card takes up exactly as much room as no card at all. */
.anno-card {
  clip-path: inset(0);
  transition: height 0.22s ease, margin-top 0.22s ease,
              margin-bottom 0.22s ease, padding-block 0.22s ease,
              border-block-width 0.22s ease, opacity 0.16s ease;
}

/* Everything that holds the box open, closed. The padding matters as much
   as the height: box-sizing is border-box, so a card with 1rem of padding
   cannot be shorter than about 34px however small a height it is given —
   which the animation met as a jump at each end, and a short card met as a
   jump through half its height.

   The height itself is driven from the script and is deliberately not set
   here: an inline height outranks a class, and the card would refuse to
   fold. */
.anno-card.is-collapsed {
  margin-top: 0;                /* the script may make this negative, to give
                                   back the margin the card is parting */
  margin-bottom: 0;
  padding-block: 0;
  border-block-width: 0;
  opacity: 0;
}

.anno-card {
  /* the card's own colour: its edge and the word it explains, so a card
     reads as the same kind of thing as the word that opened it */
  --card-edge: var(--accent);
  --card-ink: var(--accent);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--card-edge);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin: 0.2rem 0 var(--flow);
  font-size: calc(0.92rem * var(--aux-scale));
  line-height: 1.7;
}

/* a word the textbook glosses is marked in violet, and says so in violet */
.anno-card.is-glossed {
  --card-edge: var(--anno-gloss-ink);
  --card-ink: var(--anno-gloss-ink);
}

.anno-card p { margin: 0 0 0.75rem; }
.anno-card p:last-child { margin-bottom: 0; }
.anno-card .headword {
  font-family: var(--ko);
  font-size: 1.15em;
  font-weight: 600;
  color: var(--card-ink);
}
.anno-card .hanja { font-family: var(--ko); color: var(--ink-soft); }
.anno-card .hanja b { color: var(--ink); font-weight: 600; }
.anno-card .usage { color: var(--ink-soft); white-space: pre-line; }
.anno-card .surfaces { color: var(--ink-faint); font-size: 0.9em; font-family: var(--ko); }

@media (max-width: 34rem) {
  .sect-review, .sect-discuss { --pad: 1.3rem 1.2rem 1rem; }
}