@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ===== lesson-card.css ===== */
/* ============================================================
   PODO BOLD lesson design system
   tokens: ink #1C1C1C · lime #B5FD4C · green-500 #6ABE36
           green-100 #F2FCEC · gray-100 #F5F5F5 · gray-200 #E8E8E8
           gray-400 #A5A5A5 · gray-500 #757575
   construction: white cards, 1.5px ink outline, hard offset base;
   dark pages (hero/transitions) sit on a lime base.
   NESTING RULE: max two levels of boxes — the page card plus ONE
   boxed component inside it. Never wrap boxed components (answer
   boxes, bubbles, pattern cards) in another bordered card; put
   them directly in the section. When a dialogue turn holds an
   answer box, the box IS the bubble (see .bubble.me:has below).
   Previous "Sage" design archived in
   2-beginner-patterns/design-variants.html (Variant 00).
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: #1c1c1c;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans JP", "Noto Sans KR", sans-serif;
  line-height: 1.5;
}

/* mobile-first: the lesson lives in a phone-width column everywhere,
   and simply fills the screen on real phones narrower than the cap */
.phone {
  width: min(100%, 480px);
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 30px;
  background: #ffffff;
}

/* ---------- hero ---------- */
.hero {
  min-height: 420px;
  margin: 20px 20px 0;
  padding: 42px 32px 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  background: #1c1c1c;
  border-radius: 16px;
  box-shadow: 0 6px 0 #b5fd4c;
}

.hero.small {
  min-height: 460px;
}

.eyebrow {
  width: fit-content;
  margin: 0 0 44px;
  padding: 7px 13px;
  background: #b5fd4c;
  border-radius: 999px;
  color: #1c1c1c;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 360px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.01em;
  word-break: keep-all;
}

.hero-subtitle {
  margin: 22px 0 0;
  max-width: 360px;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

h1 .title-ja {
  display: block;
  margin-top: 10px;
}

.hero-topic {
  margin-top: auto;
  padding: 18px 20px;
  background: #b5fd4c;
  border-radius: 14px;
}

.hero-topic .label {
  display: block;
  color: rgba(28,28,28,.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-topic .value {
  display: block;
  margin-top: 7px;
  color: #1c1c1c;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 850;
}

.hero-topic .english {
  color: rgba(28,28,28,.65);
}

.down {
  display: none;
}

/* ---------- section pages ---------- */
.section {
  margin: 24px 20px 0;
  padding: 36px 30px 40px;
  min-height: 440px;
  background: #fff;
  border: 1.5px solid #1c1c1c;
  border-radius: 16px;
  box-shadow: 0 5px 0 #1c1c1c;
}

.section + .section {
  margin-top: 24px;
}

.section-title {
  margin: 0;
  color: #1c1c1c;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
}

/* Japanese gloss kept in parentheses after a Korean title — lighter
   and thinner so the Korean reads as the primary title */
.title-ja {
  font-size: 0.6em;
  font-weight: 500;
  color: #a5a5a5;
  letter-spacing: 0;
  white-space: nowrap;
}

h1 .title-ja,
.transition-title .title-ja {
  color: rgba(255, 255, 255, .55);
}

/* the instruction box carries the lime pill design (the per-section
   kicker pills were retired in its favor): target-language
   instruction on top, learner-language translation below */
.section-subtitle {
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 26px;
  padding: 12px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #b5fd4c;
  color: #1c1c1c;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

/* The tutor reads this line aloud, so it may only break at spaces — the
   default breaks Hangul between syllables (읽을/게요) and the orphan makes
   the reader stumble. Korean-only: Japanese has no spaces to break at. */
.section-subtitle .ko {
  display: block;
  word-break: keep-all;
}

.section-subtitle .ja {
  display: block;
  margin-top: 3px;
  color: rgba(28,28,28,.66);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- cards ---------- */
.card {
  margin: 24px 0 0;
  padding: 26px;
  background: #fff;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}

/* worksheet: a plain (borderless) wrapper so the write-in blanks sit
   directly in the section — never a box inside a box */
.worksheet {
  margin-top: 24px;
}

/* ---------- big letter teaching blocks ---------- */
/* when the lesson teaches the letters themselves, each letter is the
   hero: one full-width block (big glyph + a short sound hint), stacked
   one per row. the .letter-row wrapper has no border, so the only boxes
   are the section card + each letter block — two levels, never nested. */
.letter-row {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.letter-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 26px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
}

.letter-card > .korean {
  flex: 0 0 1.5em;
  font-size: 50px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
}

.letter-card > .english,
.letter-card > .translation {
  flex: 1 1 auto;
  margin: 0;
  color: #575753;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}

.task-block {
  padding: 9px 0;
}

.task-block:first-child,
.section-subtitle + .task-block,
.chip-row + .task-block {
  padding-top: 0;
}

.task-block:last-child {
  padding-bottom: 0;
}

.task-label {
  display: block;
  margin-bottom: 14px;
  color: #757575;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.activity-title {
  margin: 0;
  color: #1c1c1c;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.005em;
}

.activity-subtitle {
  margin: 6px 0 22px;
  color: #757575;
  font-size: 15px;
  line-height: 1.38;
  font-weight: 600;
}

.model-list {
  display: grid;
  gap: 18px;
}

/* reading lines: Japanese gloss as a header box on top, Korean below
   — matching the dialogue bubbles and answer cards */
.model-line {
  display: flex;
  flex-direction: column;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  overflow: hidden;
}

.model-line > .translation {
  order: -1;
  margin: 0;
  padding: 9px 14px;
  background: #f5f5f5;
  border-bottom: 1.5px solid #1c1c1c;
  color: #575753;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

.model-line > .korean {
  padding: 14px 16px;
}

.prompt-line {
  display: block;
  margin-bottom: 9px;
  color: #1c1c1c;
  font-size: 17px;
  font-weight: 700;
}

.plain-card {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #e8e8e8;
}

.tip {
  display: inline-block;
  margin: 0 0 13px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #1c1c1c;
  color: #b5fd4c;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

p {
  margin: 0 0 14px;
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* ---------- text ---------- */
.korean {
  display: block;
  color: #1c1c1c;
  font-size: 19px;
  line-height: 1.38;
  font-weight: 700;
  letter-spacing: 0;
  word-break: keep-all;
}

.xl {
  font-size: 28px;
}

.english {
  display: block;
  margin-top: 5px;
  color: #757575;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.translation {
  display: block;
  margin-top: 5px;
  color: #757575;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.teacher {
  margin: 0 0 16px;
  color: #757575;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- grids / misc ---------- */
.grid {
  display: grid;
  gap: 10px;
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pill {
  min-height: 74px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fff;
}

.row {
  padding: 14px 0;
  border-bottom: 1px solid #e8e8e8;
  overflow-wrap: anywhere;
}

.row:first-child {
  padding-top: 0;
}

.row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.blank {
  display: block;
  height: 72px;
  margin: 12px 0 10px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
}

.blank.small {
  height: 64px;
}

/* ---------- answer boxes ---------- */
.answer-box {
  display: block;
  margin: 10px 0 6px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.answer-label {
  display: block;
  padding: 9px 14px;
  border-bottom: 1.5px solid #1c1c1c;
  background: #f5f5f5;
  color: #575753;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

/* open write-in areas carry a very light grey so they read as
   "fill the whole thing here" (fill-in sentences keep white). Any
   answer placed inside is rendered barely-visible, like the pills. */
.answer-space {
  display: block;
  min-height: 84px;
  padding: 13px 16px;
  background: #f8f8f7;
  color: #e7e7e4;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  word-break: keep-all;
}

.answer-fill {
  display: block;
  padding: 18px 16px 20px;
  background: #fff;
}

.answer-box.small .answer-space {
  min-height: 64px;
}

.answer-box.tall .answer-space {
  min-height: 112px;
}

/* inline blank: a dashed pill that auto-sizes to its answer. The
   answer text lives inside but is rendered the same color as the
   fill, so it's invisible while still driving the pill's width.
   (temporarily tinted slightly off-bg so it's visible during review) */
.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 34px;
  padding: 0 20px;
  margin: 0 4px;
  vertical-align: middle;
  background: #f8f8f7;
  border: 1.5px dashed #1c1c1c;
  border-radius: 999px;
  color: #ededeb;
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

/* the input twin of .slot — a blank someone types into. Inferred as the
   "value" sync kind, so a data-sync-id is all it takes to mirror it live. */
.slot-input {
  display: inline-flex;
  min-width: 2.5em;
  max-width: 9em;
  height: 34px;
  padding: 0 14px;
  margin: 0 4px;
  vertical-align: middle;
  background: #f8f8f7;
  border: 1.5px dashed #1c1c1c;
  border-radius: 999px;
  color: #1c1c1c;
  font: inherit;
  font-weight: 700;
  text-align: center;
  field-sizing: content;
  -webkit-appearance: none;
}
.slot-input::placeholder { color: #b4b4b0; font-weight: 700; }
.slot-input:focus { outline: none; border-style: solid; background: #fff; }
.bubble.me .slot-input { background: #f6fdf0; }

.option-line {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid #e8e8e8;
  color: #1c1c1c;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
}

.option-line:last-child {
  border-bottom: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

/* ---------- pattern teaching ---------- */
.pattern-stack {
  display: grid;
  gap: 14px;
}

.pattern-card {
  padding: 20px 22px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
}

.pattern-card .korean {
  font-size: 21px;
  font-weight: 800;
}

/* examples sit a step below the pattern: muted box, smaller text */
.example-card {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f5f3;
}

.example-card .korean {
  font-size: 17px;
  font-weight: 600;
  color: #575753;
}

.example-card .translation {
  font-size: 13px;
}

.note-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.pattern-stack + .note-grid {
  margin-top: 18px;
}

.note-box {
  padding: 18px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
}

.note-arrow {
  display: block;
  margin: 8px 0 10px;
  color: #6abe36;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.section-kicker {
  display: block;
  margin-bottom: 12px;
  color: #6abe36;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ---------- hints ---------- */
.hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #757575;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.hint-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1.5px solid #1c1c1c;
  border-radius: 999px;
  background: #fff;
  color: #1c1c1c;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
}

/* ---------- listen ---------- */
.listen-card {
  background: #fff;
  padding: 0;
  overflow: hidden;
}

.listen-line {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-bottom: 0;
}

.listen-line > .translation {
  order: -1;
  margin: 0;
  padding: 9px 14px;
  background: #f5f5f5;
  border-bottom: 1.5px solid #1c1c1c;
  color: #575753;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

.listen-line > .korean {
  padding: 14px 16px;
}

/* teaching cards: Japanese meaning sits above the Korean too, but as
   a light label so the Korean stays the visual hero (tip examples are
   excluded so their "full → casual" arrow order is preserved) */
.pattern-card,
.pattern-card > .example-card,
.review-pattern {
  display: flex;
  flex-direction: column;
}

.pattern-card > .translation,
.pattern-card > .example-card > .translation,
.review-pattern > .translation {
  order: -1;
  margin: 0 0 6px;
}

.choice {
  display: inline-flex;
  margin: 8px 6px 0 0;
  padding: 12px 14px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
  color: #1c1c1c;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- dialogue ---------- */
.dialogue {
  display: grid;
  gap: 14px;
}

.card + .dialogue {
  margin-top: 24px;
}

/* dialogue turns: chat layout — avatar + name beside the bubble,
   the partner on the left, the learner (me) on the right */
.turn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.turn.me {
  flex-direction: row-reverse;
}

/* legacy speaker-name column (still used by other lessons) */
.speaker {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 12px;
}

.sp-ko {
  color: #1c1c1c;
  font-size: 15.5px;
  line-height: 1.2;
  font-weight: 800;
}

.sp-ja {
  color: #a5a5a5;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 700;
}

.avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #ececea;
}

/* default icon avatar for the practice activities (not hana/haruka) */
.avatar.icon {
  display: grid;
  place-items: center;
  color: #fff;
  background: #bcbcb9;
}

.turn.me .avatar.icon {
  background: #b3e187;
}

.avatar.icon svg {
  width: 26px;
  height: 26px;
}

.turn .bubble {
  flex: 1 1 auto;
  min-width: 0;
}

/* the chat-tail corner — also on bubbles whose content is an answer box */
.turn.other .bubble,
.turn.other .bubble > .answer-box {
  border-top-left-radius: 4px;
}

.turn.me .bubble,
.turn.me .bubble > .answer-box {
  border-top-right-radius: 4px;
}

/* a hint sitting inside a dialogue bubble */
.bubble .hint {
  margin-top: 10px;
}

.bubble {
  padding: 14px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.bubble.me {
  background: #f2fcec;
  box-shadow: 4px 5px 0 #b5fd4c;
}

.bubble .answer-box {
  background: #fff;
}

/* nesting rule: when a "me" turn holds an answer box, the box IS
   the bubble — drop the wrapper's chrome so only one box renders */
.bubble.me:has(> .answer-box) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.bubble.me:has(> .answer-box) > .answer-box {
  margin: 0;
  box-shadow: 4px 5px 0 #b5fd4c;
}

.bubble.me:has(> .answer-box) .answer-label {
  background: #e7f8d8;
}

/* section 3 "me" boxes are green: their write-in areas and pills follow
   the green convention (a touch lighter than the green header) */
.bubble.me .answer-space {
  background: #f6fdf0;
  color: #e3f1d5;
}

.bubble.me .slot {
  background: #f6fdf0;
  color: #e3f1d5;
}

.bubble.me:has(> .answer-box) > .hint {
  margin-top: 12px;
}

/* dialogue bubbles that hold a Korean line: float the Japanese gloss
   into a header box on top, Korean below — matching the answer cards */
.bubble:has(> .korean) {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.bubble:has(> .korean) > .translation {
  order: -1;
  margin: 0;
  padding: 9px 14px;
  background: #f5f5f5;
  border-bottom: 1.5px solid #1c1c1c;
  color: #575753;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

.bubble:has(> .korean) > .korean {
  padding: 14px 16px;
}

.bubble.me:has(> .korean) {
  background: #fff;
}

.bubble.me:has(> .korean) > .translation {
  background: #f2fcec;
}

/* ---------- missions ---------- */
.mission {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.mission li {
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid #e8e8e8;
  color: #1c1c1c;
  font-size: 16px;
  font-weight: 600;
}

.mission li:first-child {
  padding-top: 0;
}

.mission li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* roleplay mission: KO instruction, JA below, hint words underneath */
.mission-task .ja {
  display: block;
  margin-top: 3px;
  color: #757575;
  font-size: 13px;
  font-weight: 600;
}

.mission li .hint {
  margin-top: 9px;
}

/* free-talk round labels need breathing room after a card/dialogue */
.card + .section-kicker,
.dialogue + .section-kicker {
  margin-top: 28px;
}

/* native tip: the dropped particle */
.example-card s {
  color: #b0b0b0;
}

.mission li::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 11px 0 -30px;
  border: 2px solid #1c1c1c;
  border-radius: 5px;
  background: #fff;
  vertical-align: -2px;
}

.sign {
  padding: 21px 18px;
  text-align: center;
  border: 1.5px solid #1c1c1c;
  border-radius: 16px;
  background: #fff;
}

strong {
  font-weight: 800;
}

/* ---------- transitions ---------- */
.transition-page {
  min-height: 440px;
  margin: 24px 20px 0;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #1c1c1c;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 0 #b5fd4c;
}

.transition-kicker {
  width: fit-content;
  margin-bottom: 18px;
  padding: 6px 13px;
  background: #b5fd4c;
  border-radius: 999px;
  color: #1c1c1c;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.transition-title {
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
}

.transition-copy {
  max-width: 420px;
  margin: 12px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .hero {
    min-height: 420px;
    margin: 14px 12px 0;
    padding: 36px 24px 32px;
  }

  .eyebrow {
    margin-bottom: 44px;
  }

  h1 {
    font-size: 27px;
  }

  .section {
    margin: 20px 12px 0;
    padding: 32px 22px 36px;
    min-height: 440px;
  }

  .korean {
    font-size: 18px;
  }

  .xl {
    font-size: 27px;
  }

  .transition-page {
    min-height: 440px;
    margin: 20px 12px 0;
    padding: 34px 24px;
  }
}

/* ---------- visible (un-pilled) rule examples ---------- */
.note-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
}

.note-examples .korean {
  font-size: 18px;
  font-weight: 700;
  color: #757575;
}

.note-examples .korean strong {
  color: #1c1c1c;
}

/* ---------- choose-an-option activity ---------- */
.choose-list {
  display: grid;
  gap: 10px;
}

.choose-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
}

.choose-word {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 800;
  color: #1c1c1c;
}

/* word/option rows: the word and the "을 / 를" pills sit together,
   centered as one group; the slash divides the two options */
.choose-row:not(.sentence) {
  justify-content: center;
  gap: 18px;
}

.choose-opts {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* sentence rows: Japanese header on top, the choice sentence below */
.choose-row.sentence {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.choose-row.sentence > .translation {
  margin: 0;
  padding: 9px 14px;
  background: #f5f5f5;
  border-bottom: 1.5px solid #1c1c1c;
  color: #575753;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

.choose-row.sentence > .choose-sentence {
  padding: 14px 20px;
}

.choose-sentence {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  color: #1c1c1c;
}

/* each choice sits in a dashed pill (same language as the fill-in
   blanks), with a slash dividing the two options */
.opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4em;
  padding: 9px 16px;
  border: 1.5px dashed #1c1c1c;
  border-radius: 999px;
  background: #f1f1ef;
  color: #1c1c1c;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
}

.choose-sentence .opt {
  min-width: 2.6em;
  padding: 5px 13px;
  font-size: 17px;
  vertical-align: middle;
}

.sep {
  color: #b0b0b0;
  font-size: 19px;
  font-weight: 400;
}

.choose-sentence .sep {
  margin: 0 4px;
}

/* note boxes always stack vertically — the lesson lives in a phone-width
   column everywhere, so a 2-up grid only ever looks cramped. one idea
   reads top-to-bottom, roomy and instantly scannable. */

/* ---------- shared spotlight (interactive/spotlight.js) ----------
   The tutor's "look here" pointer, mirrored to the learner. A ring that
   reads on every page background — white cards, lime brand pages, dark
   transition pages. Only the visual lives here; the sync is in the script. */
.is-spot {
  border-radius: 10px;
  outline: 3px solid #ff2d55;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 45, 85, .20);
  animation: spotPulse 1.15s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255, 45, 85, .20); }
  50%      { box-shadow: 0 0 0 11px rgba(255, 45, 85, .08); }
}
[data-spot] { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .is-spot { animation: none; } }

/* ---------- 참! 잘했어요 stamp ----------
   The tutor's praise stamp, mirrored to the learner. Only the visual lives
   here; who may stamp and what is shared is in interactive/stamp.js. */

/* Hidden by default wherever it sits — the lone overlay, and the copy inside
   the pager button until teaching mode turns that one on. */
.stamp-art { display: none; }

/* ONE overlay, a sibling of .phone rather than a child of a page. Appending it
   to the page would make the img :last-child, and the track sheet hands that
   child a margin-bottom: auto to centre the component pages — the stamp would
   silently absorb it and break their layout. :has() reads the class off
   whichever page is showing instead, so page DOM is never touched.

   Fixed, not absolute: paged pages are variously block, flex, or flex-via-
   :has() and vary in height, so the viewport is the one stable box to centre
   in — and .phone is itself centred in the viewport, so the two coincide.
   z-index stays under the pager's 60 so the bar is never covered. */
.phone:has(> .pg-on.stamped) ~ .stamp-art {
  /* Ink, not paint: the stamp lands over the activity, so it stays translucent
     enough to read the tiles through. Declared as a property because the
     keyframes have to fade in to exactly this value, not to 1. */
  --stamp-ink: .9;

  /* Off dead-centre, up and to the right — enough to feel hand-placed rather
     than pasted, not enough to leave the activity. Both are doubled in the
     inset below, because margin:auto splits whatever free space is left.

     The vertical one needs a correction first: the pager reserves 118px at the
     bottom of the viewport, so the CARD's centre already sits ~47px above the
     viewport's. Centring on the viewport therefore reads as dead-centre on the
     card, which is why a 40px nudge was invisible. The 94px term (118 minus
     the card's 24px top margin) cancels that out, so --stamp-nudge-y is
     measured from the card's centre, where the eye judges it. */
  --stamp-nudge-x: 40px;
  /* Spend the nudge only where there is room for it. The title-plus-script
     header is a fixed ~190px whatever the window height, so on a short viewport
     the card has no slack to lift a big stamp clear of the script box — below
     ~820px the nudge relaxes back to card-centred, and on the shortest windows
     it goes a touch negative rather than ride up into the script. */
  --stamp-nudge-y: clamp(-14px, (100vh - 820px) / 2, 46px);

  display: block;
  position: fixed;
  inset: 0 0 calc(94px + var(--stamp-nudge-y) * 2) calc(var(--stamp-nudge-x) * 2);
  z-index: 50;
  margin: auto;             /* centred on the phone column, which is itself centred */
  /* 30vh caps it on short windows for the same reason */
  width: min(66vw, 300px, 30vh);
  height: auto;
  opacity: var(--stamp-ink);
  pointer-events: none;     /* praise must never eat a tap on the activity */
  animation: stampPress .13s cubic-bezier(.1, .75, .2, 1) both;
}

/* A stamp does not bounce: it comes straight down, hits, and stops dead. So
   the tilt is constant (rotating during the descent read like a screw going
   in) and nothing overshoots the resting state — the snap comes from the
   timing function, which spends most of its 130ms in the last few pixels. */
@keyframes stampPress {
  from { opacity: 0; transform: scale(1.5) rotate(-7deg); }
  55%  { opacity: var(--stamp-ink); }
  to   { opacity: var(--stamp-ink); transform: scale(1) rotate(-7deg); }
}

/* The button wears a small copy of the stamp, and only the tutor sees it.
   Scoped to .pager because the track sheet loads after this one and sets
   .pg-btn { display: grid } — an unscoped .pg-stamp ties on specificity and
   loses on order, which would show the learner a button they cannot use. */
.pager .pg-stamp { display: none; }
/* The art is already a bordered circle, so the button adds no ring of its own —
   a ring inside a ring is the box-in-a-box the system rules out, and it left
   the faces rendering at 21px as an unreadable smudge. The stamp IS the button:
   34px, no border, no fill. */
body.teaching .pager .pg-stamp {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}
body.teaching .pager .pg-stamp > .stamp-art { display: block; width: 34px; height: auto; }

/* Five items crowd the pill's rounded end — the last one sat 1px inside the
   flat edge, where the 999px radius has already curved away. */
body.teaching .pager { padding-right: 15px; }

@media (prefers-reduced-motion: reduce) {
  .phone:has(> .pg-on.stamped) ~ .stamp-art { animation: none; transform: rotate(-7deg); }
}


/* ===== trial.css ===== */
/* ============================================================
   PODO trial-lesson additions — loaded AFTER ../lesson-card.css
   Adds: lime brand pages (cover / act dividers / closing),
   greeting chat with katakana reading (yomi), needs-analysis
   option rows, and the consultation/roadmap worksheet bits
   (ported from onboarding-screens.html, restyled to Podo Bold).
   ============================================================ */

/* ---------- brand pages (cover · divider · closing) ---------- */
.brand-page {
  min-height: 640px;
  margin: 24px 20px 0;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #b5fd4c;
  border-radius: 16px;
  box-shadow: 0 6px 0 #1c1c1c;
}

.phone > .brand-page:first-child {
  margin-top: 20px;
}

.brand-page.divider {
  min-height: 580px;
}

/* mascot on act dividers — white sticker so the lime body reads on the lime page */
.brand-mascot {
  width: 164px;
  height: 164px;
  object-fit: contain;
  padding: 16px;
  background: #fff;
  border: 2px solid #1c1c1c;
  border-radius: 26px;
  box-sizing: border-box;
}

/* every trial page card stays taller than it is wide (no square pages on mobile) */
.section {
  min-height: 580px;
}

.podo-badge {
  display: inline-flex;
  align-items: center;
  background: #1c1c1c;
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
}

.podo-badge .logo {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
  padding-right: 14px;
}

.podo-badge .tag {
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  color: #1c1c1c;
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
}

.brand-kicker {
  margin: 26px 0 0;
  color: rgba(28,28,28,.55);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-title {
  margin: 8px 0 0;
  color: #1c1c1c;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  word-break: keep-all;
}

.brand-page.divider .brand-title {
  font-size: 33px;
}

.brand-title .small {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(28,28,28,.55);
  letter-spacing: 0;
}

/* japanese step name under a big korean divider title */
.brand-title .ja {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 800;
  color: rgba(28,28,28,.6);
  letter-spacing: 0;
}

.brand-sub {
  max-width: 320px;
  margin: 16px 0 0;
  color: rgba(28,28,28,.66);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
  word-break: keep-all;
}

/* closing page */
.end-head {
  margin: 0;
  color: #1c1c1c;
  font-size: 21px;
  font-weight: 900;
}

.end-card {
  width: 100%;
  margin-top: 20px;
  padding: 16px 20px 36px;
  background: #fff;
  border: 1.5px solid #1c1c1c;
  border-radius: 18px;
  text-align: left;
}

.end-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid #ececea;
  color: #1c1c1c;
  font-size: 15px;
  font-weight: 800;
}

.end-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #b5fd4c;
  color: #1c1c1c;
  font-size: 14px;
  font-weight: 900;
}

.end-title {
  margin: 36px 0 0;
  text-align: center;
  color: #1c1c1c;
  font-size: 29px;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -.01em;
  word-break: keep-all;
}

/* No accent on the closing title. Green type is neither the brand lime nor
   readable ink, and a lime highlight is the colour of the page showing round
   the card, so it punches a hole in it. The line is large and bold already —
   emphasising half of it adds nothing. */

.end-copy {
  margin: 16px 0 0;
  text-align: center;
  color: #575753;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 600;
  word-break: keep-all;
}

/* ---------- greeting chat with reading (yomi) ---------- */
/* same bubble language as the roleplay cards: the learner-language
   translation sits in a header strip on top, Korean below — plus the
   katakana reading tucked under the Korean line, in green */
.bubble.intro > .korean {
  padding: 13px 16px 0;
  font-size: 20px;
  font-weight: 800;
}

.bubble.intro > .yomi {
  display: block;
  padding: 5px 16px 13px;
  color: #57a021;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.5;
}

.bubble.me.intro {
  background: #fff;
}

/* speaker column: avatar with the name underneath */
.who {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 48px;
}

.who-name {
  color: #575753;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
}

/* blue nudge folded into the foot of the learner's bubble:
   "reply to the tutor!" — the instruction sits with the line to say */
.bubble.intro > .cue {
  display: block;
  padding: 8px 16px;
  border-top: 1.5px dashed #cfd8e6;
  background: #f4f8ff;
  color: #3b82f6;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}

/* ---------- needs-analysis option rows ---------- */
.opt-list {
  display: grid;
  gap: 11px;
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.opt-row .emo {
  flex: none;
  font-size: 22px;
  line-height: 1;
}

.opt-row .opt-body {
  flex: 1 1 auto;
  min-width: 0;
}

.opt-row .opt-main {
  display: block;
  color: #1c1c1c;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.opt-row .opt-sub {
  display: block;
  margin-top: 2px;
  color: #757575;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.opt-row .lv-badge {
  flex: none;
  min-width: 48px;
  padding: 10px 0;
  text-align: center;
  background: #1c1c1c;
  color: #b5fd4c;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
}

/* numbered variant: a bare numeral, sized up so it reads at a glance */
.opt-row .lv-badge.num {
  min-width: 38px;
  padding: 4px 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 900;
}

/* ---------- consultation worksheet ---------- */
.ws-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e8e8e8;
}

.ws-row:first-child {
  padding-top: 0;
}

.ws-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ws-row .lab {
  flex: none;
  width: 88px;
  color: #1c1c1c;
  font-size: 13.5px;
  font-weight: 800;
}

.chips {
  display: flex;
  gap: 7px;
}

.nchip {
  position: relative;
  line-height: 0;
  cursor: pointer;
}

.nchip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.nchip span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
}

.nchip input:checked + span {
  background: #b5fd4c;
}

/* course checkboxes */
.cgroup-label {
  display: block;
  margin: 20px 0 0;
  color: #757575;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cgroup-label:first-child,
.section-subtitle + .cgroup-label {
  margin-top: 0;
}

.cgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ccheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.ccheck .t {
  color: #1c1c1c;
  font-size: 13.5px;
  font-weight: 800;
}

.ccheck .t small {
  margin-left: 3px;
  color: #757575;
  font-size: 10.5px;
  font-weight: 600;
}

.cbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.7px solid #1c1c1c;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.cbox:checked {
  background: #b5fd4c;
}

.cbox:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1c1c1c;
  font-size: 11px;
  font-weight: 900;
}

/* the one big write-in: months / per-week / total sessions */
.plan-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 22px;
  padding: 16px 18px;
  background: #1c1c1c;
  border-radius: 14px;
  color: #fff;
}

.plan-banner .k {
  color: #b5fd4c;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.plan-banner .k small {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.5);
  font-size: 10px;
  font-weight: 700;
}

.plan-banner .line small {
  display: inline;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  font-weight: 800;
}

.plan-banner .line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
}

.write {
  width: 56px;
  padding: 4px 2px;
  border: none;
  border-radius: 8px;
  background: #b5fd4c;
  color: #1c1c1c;
  text-align: center;
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
}

.write::placeholder {
  color: rgba(28,28,28,.35);
  font-size: 14px;
}

.write:focus {
  outline: 2px solid #fff;
}

/* ---------- freetalk question ladder ---------- */
.ladder {
  display: grid;
  gap: 12px;
}

.ladder-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.ladder-item .lv {
  flex: none;
  margin-top: 2px;
  padding: 4px 10px;
  border: 1.5px solid #6abe36;
  border-radius: 999px;
  background: #f2fcec;
  color: #3f7a1c;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.ladder-item .lv.hot {
  border-color: #1c1c1c;
  background: #1c1c1c;
  color: #b5fd4c;
}

.ladder-item .korean {
  font-size: 17px;
}

/* ============================================================
   HANGUL TEACHING KIT (trial-1)
   ------------------------------------------------------------
   One idea runs through every page: a syllable is not a picture,
   it is a BOX with two seats. 子音 = amber seat, 母音 = rose seat.
   The same two colours mark the letter cards, the read drills,
   the words and the write-in guides, so the learner stops seeing
   a squiggle and starts seeing structure.

   TRAINING WHEELS: tints are teaching aids, so they are switched
   OFF (.plain) on the find / dictation drills — the learner has
   to see the parts without help there.
   ============================================================ */
:root {
  --c-bg: #ffeeb8;   /* 子音 seat */
  --c-ink: #96690d;
  --v-bg: #ffd7e5;   /* 母音 seat */
  --v-ink: #bf1b5c;
  --b-bg: #cfe3ff;   /* 받침 seat — never taught in the trial, only previewed
                        on the curriculum page as "this is what comes later" */
}

/* ---------- anatomy block: the glyph sitting in its two seats ---------- */
.anat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.blk {
  display: block;   /* spans are inline: without this the box collapses */
  position: relative;
  flex: none;
  margin: 0 auto;
  width: 162px;
  height: 162px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.blk.sm { width: 150px; height: 150px; }

.blk .zone {
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 5px 2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.blk.lr .zone.c { inset: 0 54% 0 0; align-items: flex-end; background: var(--c-bg); color: var(--c-ink); }
.blk.lr .zone.v { inset: 0 0 0 46%; align-items: flex-end; background: var(--v-bg); color: var(--v-ink); }
.blk.tb .zone.c { inset: 0 0 50% 0; align-items: flex-start; background: var(--c-bg); color: var(--c-ink); }
.blk.tb .zone.v { inset: 50% 0 0 0; align-items: flex-end; background: var(--v-bg); color: var(--v-ink); }

.blk .glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #1c1c1c;
  font-size: 92px;
  font-weight: 800;
  line-height: 1;
}

.blk.sm .glyph { font-size: 86px; }

.anat .eq {
  color: #1c1c1c;
  font-size: 28px;
  font-weight: 900;
}

.anat .kana {
  color: #1c1c1c;
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.anat .kana small {
  display: block;
  margin-top: 8px;
  color: #757575;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* the parts named underneath the block */
.parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.part {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid #1c1c1c;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
}

.part b { font-size: 21px; line-height: 1; }
.part em { color: #575753; font-size: 12px; font-style: normal; font-weight: 700; }

/* ---------- build strip: ㅇ + ㅏ → 아 ---------- */
.build {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.build .b { text-align: center; }

.build .tile {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
}

.build .tile.res { box-shadow: 0 4px 0 #1c1c1c; }

.build .b small {
  display: block;
  margin-top: 7px;
  color: #757575;
  font-size: 11.5px;
  font-weight: 700;
}

.build .op {
  align-self: center;
  padding-bottom: 20px;
  font-size: 24px;
  font-weight: 900;
}

/* ---------- placement blocks side by side ---------- */
.blk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.blk-item { text-align: center; }

.blk-item .cap {
  display: block;
  margin-top: 11px;
  color: #1c1c1c;
  font-size: 13.5px;
  font-weight: 800;
}

.blk-item .cap small {
  display: block;
  margin-top: 3px;
  color: #757575;
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- combination table (payoff: 2 × 6 = 12 blocks) ---------- */
.combo {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 24px;
}

.combo span {
  display: grid;
  place-items: center;
  height: 64px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}

.combo .corner { border: none; background: transparent; }

/* ---------- read drills ----------
   the letters ARE the activity, so they fill the page: a 3-wide grid of
   big tiles rather than a thin row of chips floating in white space */
.read-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.read-chip {
  display: grid;
  place-items: center;
  height: 148px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  font-size: 76px;
  font-weight: 800;
  line-height: 1;
}

/* whole words need width, not height */
.read-grid.words .read-chip {
  height: 112px;
  font-size: 34px;
}

/* ---------- words broken into syllables ---------- */
.wordset {
  display: grid;
  gap: 11px;
  margin-top: 24px;
}

.word-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.word-card .syls {
  display: flex;
  flex: none;
  gap: 5px;
}

.word-card .syl {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.word-card .body { min-width: 0; }

.word-card .yomi-line {
  display: block;
  color: #57a021;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.word-card .mean {
  display: block;
  margin-top: 3px;
  color: #575753;
  font-size: 14.5px;
  font-weight: 700;
}

/* ---------- the unreadable-sentence hook ---------- */
.hook-quote {
  margin-top: 24px;
  padding: 26px 20px;
  border-radius: 14px;
  background: #1c1c1c;
  text-align: center;
}

.hook-quote .q {
  display: block;
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.hook-quote .m {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- "you already know some Korean" rows ---------- */
.known {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.known-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 18px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.known-row .k {
  flex: none;
  width: 108px;
  color: #1c1c1c;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
}

.known-row .j {
  color: #575753;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}

.known-row .j small {
  display: block;
  margin-top: 2px;
  color: #a5a5a5;
  font-size: 11.5px;
  font-weight: 700;
}

/* sentences, not words: a whole sentence cannot live in the 108px word
   column, so the row stacks instead of running two columns */
.known.lines .known-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.known.lines .known-row .k {
  width: auto;
  font-size: 22px;
}

/* ---------- payoff counter ---------- */
.payoff {
  margin-top: 24px;
  padding: 34px 20px;
  border: 1.5px solid #1c1c1c;
  border-radius: 16px;
  background: #b5fd4c;
  box-shadow: 0 4px 0 #1c1c1c;
  text-align: center;
}

.payoff .eqline {
  color: #1c1c1c;
  font-size: 15.5px;
  font-weight: 800;
}

.payoff .big {
  display: block;
  margin: 6px 0 2px;
  color: #1c1c1c;
  font-size: 84px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.payoff .cap {
  display: block;
  color: rgba(28,28,28,.7);
  font-size: 14px;
  font-weight: 800;
}

/* letter cards: the glyph sits in its coloured seat(s) */
.letter-card > .korean.seat-lr,
.letter-card > .korean.seat-tb,
.letter-card > .korean.seat-v,
.letter-card > .korean.seat-c {
  flex: 0 0 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 44px;
}

/* The kana anchor, big enough to read as an equal partner, in a fixed
   column so every card lines up. A mouth hint used to sit to its right,
   but only some letters need one, so that column was empty on half the
   cards — that contrast now has its own comparison page. */
.letter-card > .kana-eq {
  flex: none;
  min-width: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1c1c1c;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.letter-card > .kana-eq i {
  color: #a5a5a5;
  font-size: 19px;
  font-style: normal;
  font-weight: 800;
}

/* The sound column: the letters that spell the block, in their seat
   colours. Present on every card, so the row never goes ragged — and it
   does what kana cannot: ナ does not come apart, n ＋ a does. */
.letter-card > .sound {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
}

.letter-card > .sound i {
  display: grid;
  place-items: center;
  min-width: 30px;
  padding: 5px 7px;
  border-radius: 9px;
  color: #1c1c1c;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.letter-card > .sound b {
  color: #a5a5a5;
  font-size: 13px;
  font-weight: 800;
}

/* ---------- mouth photos (Sejong 한국어 입문, 학습1/학습5) ----------
   The lesson is audio-only, so the learner can never watch the tutor's
   mouth. These photos put that information back into the page: front
   view for the lip shape, side view for rounding and protrusion. */
.letter-card > .mouth {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 11px;
  border: 1.5px solid #1c1c1c;
  object-fit: cover;
  background: #fff;
}

/* the letter cards run four uniform slots once a mouth photo joins:
   glyph · kana · sound · mouth — so the columns are retuned to fit */
.letter-card {
  gap: 14px;
  padding: 15px 20px;
}

/* ---------- same-kana pairs, compared side by side ---------- */
.pair-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.pair-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
}

/* the shared katakana, stated once for the pair */
.pair-kana {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  border-radius: 11px;
  background: #1c1c1c;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.pair-side {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.pair-side .g {
  display: grid;
  place-items: center;
  height: 74px;
  border-radius: 12px;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

/* front then side: the side view is what shows rounding and protrusion */
.pair-side .shots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.pair-side .shots img {
  width: 56px;
  height: 56px;
  border: 1.5px solid #1c1c1c;
  border-radius: 9px;
  object-fit: cover;
}

.pair-side small {
  display: block;
  margin-top: 8px;
  color: #575753;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

/* Concept pages carry one small diagram, so the leftover space is split
   above and below it rather than dumped at the foot of the card — the
   activity sits in the optical centre where the eye lands. */
.section:has(> .anat),
.section:has(> .build),
.section:has(> .blk-row),
.section:has(> .combo),
.section:has(> .payoff),
.section:has(> .usp),
.section:has(> .offer),
.section:has(> .ptable) {
  display: flex;
  flex-direction: column;
}

/* free space opens ABOVE the diagram and BELOW whatever closes the page,
   so a diagram and its caption/chip stay welded together as one group */
.section > .anat,
.section > .build,
.section > .blk-row,
.section > .combo,
.section > .payoff,
.section > .usp,
.section > .offer,
.section > .ptable { margin-top: auto; }

.section:has(> .anat) > :last-child,
.section:has(> .build) > :last-child,
.section:has(> .blk-row) > :last-child,
.section:has(> .combo) > :last-child,
.section:has(> .payoff) > :last-child,
.section:has(> .usp) > :last-child,
.section:has(> .offer) > :last-child,
.section:has(> .ptable) > :last-child { margin-bottom: auto; }

/* a hint chip sitting under a component needs air (hard shadows below) */
.section > .hint { margin-top: 16px; }

/* The two seat fills, reused by every component above. Declared last
   and doubled (.seat-lr.seat-lr) so they always win over a component's
   own white background — the colour code must never be overridden. */
.seat-lr.seat-lr { background: linear-gradient(90deg, var(--c-bg) 0 46%, var(--v-bg) 46%); }
.seat-tb.seat-tb { background: linear-gradient(180deg, var(--c-bg) 0 50%, var(--v-bg) 50%); }
.seat-v.seat-v   { background: var(--v-bg); }
.seat-c.seat-c   { background: var(--c-bg); }

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .brand-page {
    margin: 20px 12px 0;
    padding: 36px 22px;
  }

  .brand-title {
    font-size: 38px;
  }

  .brand-page.divider .brand-title {
    font-size: 29px;
  }

  .combo span { height: 58px; font-size: 24px; }
  .read-chip { height: 128px; font-size: 66px; }
  .anat { gap: 12px; }
  .blk { width: 146px; height: 146px; }
  .blk .glyph { font-size: 84px; }
  .anat .kana { font-size: 54px; }
  .letter-card > .kana-eq { font-size: 24px; }
}

/* ============================================================
   TAP ACTIVITIES (no whiteboard)
   ------------------------------------------------------------
   Every task is answered by tapping. Two components carry all of
   them, so the learner learns one interaction and reuses it:
     .tap-grid  — choose the tile(s) (find / listen-and-pick)
     .builder   — assemble a syllable from a jamo keypad, which is
                  what "write the character" becomes without a pen
   ============================================================ */

/* ---------- tap to choose ---------- */
.tap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.tap-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Listen-and-pick is not one six-way choice, it is three two-way ones. Laid
   out as a plain grid the learner reads all six as a single question and the
   drill looks far harder than it is, so each question gets its own numbered
   band. The band is filled, never bordered — the tiles inside already carry
   a border, and a bordered wrapper would box them twice. */
.tap-grid.rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.tap-row {
  display: grid;
  grid-template-columns: 30px 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 2px;
  border-radius: 18px;
  background: #f5f5f5;
}

.tap-n {
  font-size: 17px;
  font-weight: 800;
  color: #a5a5a5;
  text-align: center;
}

.tap-grid.rows .tap-tile { height: 100px; font-size: 48px; }

.tap-tile {
  position: relative;
  display: grid;
  place-items: center;
  height: 118px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  color: #1c1c1c;
  font-family: inherit;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .09s, background .12s, box-shadow .12s;
}

.tap-grid.words .tap-tile { height: 136px; font-size: 34px; }

.tap-tile:active { transform: scale(.96); }

/* answered: right fills lime, wrong greys back out — the mark is a
   corner badge so the letter itself is never covered */
.tap-tile.right {
  background: #b5fd4c;
  box-shadow: 0 4px 0 #1c1c1c;
}

.tap-tile.wrong {
  background: #f5f5f5;
  color: #a5a5a5;
  border-style: dashed;
}

.tap-tile::after {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 15px;
  font-weight: 900;
}

.tap-tile.right::after { content: "✓"; color: #3f7a1c; }
.tap-tile.wrong::after { content: "✕"; color: #c0c0c0; }

/* ---------- build a syllable from the keypad ---------- */
.builder { margin-top: 24px; }

.build-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}

.build-task {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.build-task .ask {
  color: #575753;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

/* the slot the keypad is currently filling */
.build-slot {
  position: relative;
  width: 74px;
  height: 74px;
  border: 1.8px dashed #1c1c1c;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.build-slot.active {
  border-style: solid;
  box-shadow: 0 0 0 4px rgba(181,253,76,.55);
}

.build-slot.done { border-style: solid; }

.build-slot .zone {
  position: absolute;
  border-radius: 9px;
}

.build-slot.lr .zone.c { inset: 4px 54% 4px 4px; }
.build-slot.lr .zone.v { inset: 4px 4px 4px 46%; }
.build-slot.tb .zone.c { inset: 4px 4px 50% 4px; }
.build-slot.tb .zone.v { inset: 50% 4px 4px 4px; }

.build-slot .glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

.build-slot .ok {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1.5px solid #1c1c1c;
  border-radius: 50%;
  background: #b5fd4c;
  font-size: 13px;
  font-weight: 900;
}

.build-slot.done .ok { display: grid; }

/* the tasks stack prompt over slot so three fit across a phone */
.build-task {
  flex-direction: column;
  gap: 8px;
}

/* the keypad: only the 8 parts this lesson has taught, in seat colours,
   so the learner can never build a letter they have not met */
.keys-label {
  margin: 16px 0 8px;
  color: #757575;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}

.keys {
  display: grid;
  gap: 7px;
}

.keys.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keys.v6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* one taught consonant so far. The key keeps the width it has in .c3 and sits
   centred, so a single option doesn't read as two keys that failed to load. */
.keys.c1 {
  grid-template-columns: minmax(0, calc((100% - 14px) / 3));
  justify-content: center;
}

.key {
  display: grid;
  place-items: center;
  height: 48px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  color: #1c1c1c;
  font-family: inherit;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .09s, box-shadow .12s;
}

.key:active { transform: scale(.92); }
.key.on { box-shadow: 0 0 0 3px rgba(28,28,28,.3); }

/* a wrong pair shakes rather than scolding */
@keyframes miss { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.build-slot.miss { animation: miss .3s; border-color: #d9534f; }

/* ============================================================
   TEACHING MODE  (선생님 모드)
   ------------------------------------------------------------
   The green box is what the tutor SAYS to the learner. The dark
   box below is what the tutor DOES — read order, answers, pacing
   — and the learner must never see it, so none of it exists in
   the page until the switch on the cover is turned on. Student
   view is the default, and reloading returns to it.

   Notes are written in Korean: the tutor reads Korean, and a
   Japanese beginner cannot, which is a second lock on the answers.
   ============================================================ */
.tutor-note { display: none; }

/* Sits directly under the green script it belongs to — the tutor reads
   the line, then sees what to do next. In student view it is display:none,
   so it collapses completely and leaves no gap behind. */
body.teaching .tutor-note {
  display: block;
  /* The bottom margin collapses against whatever follows, so components that
     bring their own top margin (.tap-grid, .builder) are unaffected, while a
     .dialogue — which has none — stops colliding with the bar. */
  margin: 14px 0 18px;
  padding: 8px 12px 8px 9px;
  border-left: 3px solid #b5fd4c;
  border-radius: 5px 10px 10px 5px;
  background: #1c1c1c;
  /* hugs its text like the green script box above it, rather than running
     full-bleed and out-weighting the line it belongs to */
  width: fit-content;
  max-width: 100%;
}

body.teaching .section-subtitle + .tutor-note { margin-top: -14px; }

.tutor-note {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;   /* reversed text: light enough to read as prose, heavy enough on dark */
  line-height: 1.45;
  word-break: keep-all;
}

/* answers surface the way .slot does in the pattern lessons: present
   for the tutor, never loud — a ghost of the answer inside the blank */
body.teaching .build-slot:not(.done)::after {
  content: attr(data-a);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e6e6e4;
  font-size: 42px;
  font-weight: 800;
  pointer-events: none;
}

body.teaching .tap-tile[data-ok]:not(.right):not(.wrong)::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed #e2e2e0;
  border-radius: 10px;
}

/* ---------- the switch, tucked into the cover's corner ----------
   Deliberately quiet: a learner should not notice it, and should have
   no reason to try it. It only asserts itself once it is on, so the
   tutor can see at a glance that answers are showing. */
.phone > .brand-page:first-child { position: relative; }

.mode-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 6px;
  border: 1.2px solid rgba(28,28,28,.22);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}

.mode-toggle input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.mode-toggle .sw {
  position: relative;
  flex: none;
  width: 26px;
  height: 15px;
  border: 1.2px solid rgba(28,28,28,.3);
  border-radius: 999px;
  background: transparent;
  transition: background .15s, border-color .15s;
}

.mode-toggle .sw i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(28,28,28,.35);
  transition: transform .15s, background .15s;
}

.mode-toggle .lbl {
  color: rgba(28,28,28,.42);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* on: no longer shy, so the tutor cannot leave it on by accident */
.mode-toggle input:checked ~ .lbl { color: #1c1c1c; }
.mode-toggle:has(input:checked) {
  background: #1c1c1c;
  border-color: #1c1c1c;
}
.mode-toggle:has(input:checked) .lbl { color: #b5fd4c; }
.mode-toggle input:checked + .sw { background: #b5fd4c; border-color: #b5fd4c; }
.mode-toggle input:checked + .sw i { transform: translateX(11px); background: #1c1c1c; }


/* ============================================================
   CONSULTATION · the deck remembers the answers
   ------------------------------------------------------------
   The needs-analysis rows are real answers now, and the report
   page reads them back: goal + pace + the tutor's level call
   become an expected duration, a curve and a course list.
   ============================================================ */
.opt-list {
  display: grid;
  gap: 11px;
}

button.opt-row {
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .09s, background .12s, box-shadow .12s;
}

button.opt-row:active { transform: scale(.99); }

.opt-row.on {
  background: #b5fd4c;
  box-shadow: 0 4px 0 #1c1c1c;
}

.opt-row.on .opt-sub { color: rgba(28,28,28,.62); }
.opt-row.on .lv-badge { background: #1c1c1c; color: #b5fd4c; }

/* ---------- level check ---------- */
.lvpick {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.lvrow {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, box-shadow .12s;
}

.lvrow.on { background: #b5fd4c; box-shadow: 0 4px 0 #1c1c1c; }

.lvrow .lvn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1c1c1c;
  color: #b5fd4c;
  font-size: 17px;
  font-weight: 900;
}

.lvrow.on .lvn { background: #fff; color: #1c1c1c; }
.lvrow .lvt { display: block; font-size: 15px; font-weight: 800; }
.lvrow .lvs { display: block; margin-top: 2px; color: #757575; font-size: 12px; font-weight: 600; }
.lvrow.on .lvs { color: rgba(28,28,28,.62); }

/* ---------- the report ---------- */
/* Skeleton preview: the report's own shape in grey, so the page reads as
   "your plan lands here" rather than as an empty card. */
.rep-empty {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.sk {
  border: 1.5px solid #ececea;
  border-radius: 14px;
  background: #fafafa;
}

.sk-head { height: 62px; border-color: #e4e4e2; background: #f0f0ee; }

.sk-plot { height: 152px; padding: 12px 8px; }
.sk-plot svg { display: block; width: 100%; height: 100%; }

.sk-facts { display: grid; gap: 0; padding: 4px 16px; }

.sk-facts i {
  height: 13px;
  margin: 13px 0;
  border-radius: 999px;
  background: #ededeb;
}

.sk-facts i:nth-child(1) { width: 62%; }
.sk-facts i:nth-child(2) { width: 48%; }
.sk-facts i:nth-child(3) { width: 55%; }

.sk-course { height: 50px; }

/* the skeleton's companion: names the missing answer AND goes there */
.rep-jump {
  display: block;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #b5fd4c;
  box-shadow: 0 4px 0 #1c1c1c;
  color: #1c1c1c;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.rep-jump:active { transform: translateY(2px); box-shadow: 0 2px 0 #1c1c1c; }
.rep-jump .rj-t { display: block; font-size: 14px; font-weight: 900; word-break: keep-all; }
.rep-jump .rj-s { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; opacity: .62; }
.rep-jump .rj-s::after { content: " ↑"; }

.rep.ready ~ .rep-jump, .rep-jump.hide { display: none; }

.rep { display: none; }
.rep.ready { display: block; }
.rep.ready + .rep-empty, .rep-empty.hide { display: none; }

.rep-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #1c1c1c;
}

.rep-goal {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.rep-eta { flex: none; text-align: right; }
.rep-eta b { display: block; color: #b5fd4c; font-size: 25px; font-weight: 900; line-height: 1; }
.rep-eta small { display: block; margin-top: 3px; color: rgba(255,255,255,.55); font-size: 10.5px; font-weight: 700; }

.rep-plot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  padding: 8px 4px 4px;
}

.rep-facts {
  display: grid;
  gap: 0;
  margin-top: 16px;
  padding: 4px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
}

.rf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #e8e8e8;
}

.rf:last-child { border-bottom: 0; }
.rf .k { flex: 1 1 auto; color: #757575; font-size: 13px; font-weight: 700; }
.rf .v { flex: none; color: #1c1c1c; font-size: 14.5px; font-weight: 800; }

.rep .cgroup-label { margin-top: 20px; }


.rep-courses {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.rc {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
  color: #1c1c1c;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.rc .rcn {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #b5fd4c;
  font-size: 12px;
  font-weight: 900;
}

.rc .rcb { flex: 1 1 auto; min-width: 0; }
.rc .rct { display: block; font-size: 14px; font-weight: 800; }
.rc .rcs { display: block; margin-top: 2px; color: #757575; font-size: 11.5px; font-weight: 700; }
.rc::after { content: "→"; flex: none; color: #a5a5a5; font-size: 14px; font-weight: 900; }
.rc:active { transform: translateY(2px); }

.rep-why {
  margin: 14px 0 0;
  color: #575753;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

/* ============================================================
   INFO & SALES pages (from the PODO KOREAN deck)
   ============================================================ */
.jump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  margin-top: 26px;
}

.jbtn {
  display: grid;
  place-items: center;
  padding: 13px 8px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
  color: #1c1c1c;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.jbtn:active { transform: translateY(2px); }

.usp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 24px;
}

.uspc {
  padding: 16px 14px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.uspc .n { display: block; color: #1c1c1c; font-size: 21px; font-weight: 900; line-height: 1.1; }
.uspc .t { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 800; }
.uspc .s { display: block; margin-top: 4px; color: #757575; font-size: 11.5px; font-weight: 600; line-height: 1.4; word-break: keep-all; }

/* ------------------------------------------------------------
   THE OFFER — one plan, then the discounts walked down to it.
   Built as a receipt on purpose: the learner watches the number
   fall instead of comparing three cards and guessing.
   ------------------------------------------------------------ */
.offer {
  margin-top: 22px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 0 #1c1c1c;
  overflow: hidden;
}

.offer-h {
  position: relative;
  padding: 15px 16px 14px;
  border-bottom: 1.5px solid #1c1c1c;
  background: #b5fd4c;
}

.obadge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #b5fd4c;
  font-size: 10.5px;
  font-weight: 900;
}

.offer-h .ot { display: block; font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.offer-h .os { display: block; margin-top: 3px; color: rgba(28,28,28,.62); font-size: 12px; font-weight: 700; }

.calc { padding: 6px 16px 4px; }

.cl {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ececea;
  font-size: 13.5px;
  font-weight: 700;
}

.cl span { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
.cl b { flex: none; font-size: 15px; font-weight: 800; }

.cl em {
  padding: 2px 7px;
  border-radius: 999px;
  background: #f2fcec;
  color: #6abe36;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.cl .d3 {
  padding: 2px 7px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #b5fd4c;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.cl.cut b { color: #6abe36; }

.cl.total {
  align-items: center;
  padding: 13px 0 14px;
  border-bottom: 0;
  font-size: 15px;
  font-weight: 900;
}

.cl.total b { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }

.offer-f {
  padding: 11px 16px;
  border-top: 1.5px solid #1c1c1c;
  background: #f5f5f5;
  color: #575753;
  font-size: 12px;
  font-weight: 700;
}

.offer-f b { color: #1c1c1c; font-weight: 900; }

/* the next decision, not a competing one — shown after they're in */
.upsell {
  margin-top: 14px;
  padding: 14px 16px 15px;
  border-radius: 13px;
  background: #f5f5f5;
}

.upsell .ut { display: block; font-size: 13.5px; font-weight: 900; }

.urow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff;
}

.urow.best { background: #f2fcec; box-shadow: inset 0 0 0 1.5px #6abe36; }
.urow .ul { flex: none; width: 48px; font-size: 12.5px; font-weight: 800; }
.urow .uv { font-size: 16px; font-weight: 900; }
.urow .uv small { margin-left: 2px; color: #757575; font-size: 11px; font-weight: 700; }
.urow .usave { margin-left: auto; color: #6abe36; font-size: 11.5px; font-weight: 900; }

.unote { margin: 9px 0 0; color: #757575; font-size: 11.5px; font-weight: 700; }

.morelink {
  display: block;
  margin-top: 14px;
  padding: 12px;
  border: 1.5px dashed #b0b0ac;
  border-radius: 11px;
  color: #757575;
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.morelink::after { content: " →"; }

/* ---------- the full table, only if they ask ---------- */
.ptable {
  width: 100%;
  margin-top: 22px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 12.5px;
}

.ptable th, .ptable td { padding: 10px 8px; text-align: center; }

.ptable thead th {
  border-bottom: 1.5px solid #1c1c1c;
  background: #1c1c1c;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

.ptable tbody td { border-bottom: 1px solid #ececea; font-weight: 800; }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr.grp td { border-top: 1.5px solid #1c1c1c; }
.ptable tbody tr.grp:first-child td { border-top: 0; }

.ptable td[rowspan] {
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 900;
}

.ptable td[rowspan] small { display: block; margin-top: 3px; color: #757575; font-size: 10.5px; font-weight: 700; }
.ptable td.hi { background: #f2fcec; color: #1c1c1c; }

.pt-note { margin: 12px 0 0; color: #757575; font-size: 11.5px; font-weight: 700; line-height: 1.5; }

/* FAQ */
.faq { display: grid; gap: 11px; margin-top: 24px; }

.qa {
  padding: 14px 16px;
  border: 1.5px solid #1c1c1c;
  border-radius: 13px;
  background: #fff;
}

.qa .q { display: block; font-size: 14px; font-weight: 800; line-height: 1.4; word-break: keep-all; }
.qa .q::before { content: "Q. "; color: #6abe36; font-weight: 900; }
.qa .a { display: block; margin-top: 7px; color: #575753; font-size: 13px; font-weight: 600; line-height: 1.5; word-break: keep-all; }

/* ============================================================
   LINE BREAKING
   ------------------------------------------------------------
   word-break:keep-all keeps Korean words whole, and several
   components inherit it. Japanese has no spaces, so under
   keep-all a JP sentence can only break at 。 — it then runs
   the full width and rams the card edge. Every Japanese-bearing
   element opts back out to normal breaking.
   (The plan and sales pages are Korean, so they keep keep-all.)
   ============================================================ */
.title-ja,
.section-subtitle .ja,
.brand-title .ja,
.bubble.intro > .cue,
.who-name,
.transition-copy,
.known-row .j,
.pair-side small,
.blk-item .cap small,
.letter-card > .english,
.model-line > .translation,
.word-card .mean,
.sign .english,
.uspc .s,
.card .row,
.mission li,
.end-title,
.end-copy,
.hint-chip,
.brand-page:not(#p-info) .brand-sub {
  word-break: normal;
  line-break: normal;
}

/* ============================================================
   CURRICULUM PAGE
   ------------------------------------------------------------
   One long page instead of four thin ones. The learner reads it
   bottom-up in the order they will actually study: 한글 first,
   then patterns, then the worlds, then freetalking. Every stage
   answers the same three questions in the same order —
   what it is, what it looks like, what you can do after it.
   ============================================================ */
.cur-hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px auto 0;
}

/* the four stages as a jump rail, so the tutor can open one directly */
.rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.rl {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 11px 4px;
  border: 1.5px solid #1c1c1c;
  border-radius: 12px;
  background: #fff;
  color: #1c1c1c;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.rl:active { transform: translateY(2px); }

.rl-n {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
}

.rl-t { font-size: 12px; font-weight: 800; }

/* ---------- one stage ---------- */
.stg {
  margin-top: 14px;
  padding: 17px 15px 19px;
  border: 1.5px solid #1c1c1c;
  border-radius: 14px;
  background: #fff;
  scroll-margin-top: 14px;
}

.stg-h { display: flex; align-items: center; gap: 10px; }

.stg-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #fff;
  font-size: 13.5px;
  font-weight: 900;
}

.stg-t { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }

.stg-c {
  margin-left: auto;
  flex: none;
  color: #757575;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.stg-p {
  margin: 10px 0 0;
  color: #575753;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

/* the demo area — background only, so a stage stays ONE box deep */
.stg-viz {
  margin-top: 13px;
  padding: 15px 12px;
  border-radius: 12px;
  background: #f5f5f5;
}

.viz-cap {
  margin: 11px 0 0;
  color: #757575;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

/* what you can do at the end of the stage */
.stg-goal {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #f2fcec;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.stg-goal::before { content: "→"; flex: none; color: #6abe36; font-weight: 900; }

/* the lime thread that shows the stages are one road, not four products */
.stg-link {
  display: block;
  width: 4px;
  height: 18px;
  margin: 0 auto;
  border-radius: 999px;
  background: #b5fd4c;
}

/* ---------- stage 1 · letters snapping into blocks ---------- */
.crow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.crow + .crow { margin-top: 11px; }
.crow i { color: #a5a5a5; font-size: 15px; font-style: normal; font-weight: 900; }

.lt {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}

.lt.c { background: var(--c-bg); }
.lt.v { background: var(--v-bg); }
.lt.b { background: var(--b-bg); }

/* the assembled syllable, seats showing through */
.sq {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.sq em { position: absolute; }
.sq.lr em.zc { inset: 0 54% 0 0; background: var(--c-bg); }
.sq.lr em.zv { inset: 0 0 0 46%; background: var(--v-bg); }
.sq.b3 em.zc { inset: 0 54% 32% 0; background: var(--c-bg); }
.sq.b3 em.zv { inset: 0 0 32% 46%; background: var(--v-bg); }
.sq.b3 em.zb { inset: 68% 0 0 0; background: var(--b-bg); }

.sq b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.ck {
  flex: none;
  min-width: 34px;
  color: #757575;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

/* ---------- stage 2 · one pattern, many sentences ---------- */
.sent { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.wrd {
  padding: 7px 11px;
  border: 1.5px solid #1c1c1c;
  border-radius: 10px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 800;
}

.wrd.hole { border-style: dashed; background: #b5fd4c; letter-spacing: -.06em; }
.wrd.pat { background: #1c1c1c; color: #b5fd4c; }

/* the whole point of the stage: ONE frame, and the sentences fall out of it */
.pf-tag {
  display: block;
  width: fit-content;
  margin: 0 auto 9px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #b5fd4c;
  font-size: 11px;
  font-weight: 900;
}

.pf-tag.out { margin-top: 9px; background: #6abe36; color: #fff; }

.pf-arrow {
  display: block;
  margin-top: 10px;
  color: #757575;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
}

.pf-arrow::before { content: "↓"; display: block; color: #6abe36; font-size: 15px; font-weight: 900; }

.pat-out { display: grid; gap: 6px; }

.po {
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

/* highlighter, not a chip — a padded chip fakes a space into 학생입니다 */
.po b { background: linear-gradient(transparent 48%, #b5fd4c 48%); font-weight: 900; }
.po.more { background: none; color: #757575; font-size: 12px; font-weight: 700; }

/* a real line from the course, with the pattern it hands over */
.ex {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 10px 13px;
  border-radius: 11px;
  background: #f5f5f5;
}

.ex-lv {
  flex: none;
  width: 34px;
  color: #757575;
  font-size: 11px;
  font-weight: 800;
}

.ex-k { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 800; }

.ex-p {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #b5fd4c;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- stage 3 · the four worlds ---------- */
.worlds { display: grid; gap: 10px; margin-top: 13px; }

.wd {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f5f5f5;
}

.wd img { width: 44px; height: 44px; }
.wd-h { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 900; }
.wd-h small { margin-left: auto; color: #757575; font-size: 11px; font-weight: 700; }

.wd-l {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.wd-l small { margin-left: auto; flex: none; color: #757575; font-size: 10.5px; font-weight: 700; }

/* ---------- stage 4 · freetalking ---------- */
.free-hero { display: flex; align-items: center; gap: 14px; }
.free-hero img { flex: none; width: 96px; height: 96px; }

.free-hero p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.45;
}

.free-hero p small {
  display: block;
  margin-top: 6px;
  color: #757575;
  font-size: 11.5px;
  font-weight: 700;
}

/* themes read as icons first — the names are abstract, the shapes aren't */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.tg {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  padding: 11px 5px 10px;
  border-radius: 11px;
  background: #f5f5f5;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  word-break: keep-all;
}

.tg svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #1c1c1c;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tg svg .fill { fill: #b5fd4c; }

.tg.more {
  align-content: center;
  background: #b5fd4c;
  color: #1c1c1c;
}

/* one real question, so "주제" stops being an abstraction */
.qcard {
  margin-top: 10px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #f2fcec;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.qcard small {
  display: block;
  margin-bottom: 6px;
  color: #6abe36;
  font-size: 11px;
  font-weight: 800;
}

/* ============================================================
   PAGED MODE  (the default)
   ------------------------------------------------------------
   The deck is a flat list of pages under .phone, so "one at a
   time" costs nothing structurally: hide the siblings, show one.
   Scrolling is one tap away and remains the fallback — printing,
   Cmd+F and scanning ahead all depend on it, so this never
   becomes the only way to read the deck. @media print always
   expands the whole deck regardless of mode.
   ============================================================ */
.mode-toggle.view { top: 46px; }

.phone.paged > * { display: none; }
.phone.paged > .pg-on { display: flex; }
.phone.paged > .section.pg-on { display: block; }

/* the section rules that centre a lone component use :has(), which
   still applies — but display:block above would drop the flex they
   set up, so re-assert it for those pages only */
.phone.paged > .section.pg-on:has(> .anat),
.phone.paged > .section.pg-on:has(> .build),
.phone.paged > .section.pg-on:has(> .blk-row),
.phone.paged > .section.pg-on:has(> .combo),
.phone.paged > .section.pg-on:has(> .payoff),
.phone.paged > .section.pg-on:has(> .usp),
.phone.paged > .section.pg-on:has(> .offer),
.phone.paged > .section.pg-on:has(> .ptable) { display: flex; }

body { padding-bottom: 84px; }         /* the bar must not cover the last line */

/* a page on its own should fill the screen rather than leave a dead band
   above the bar — the :has() centring rules then have room to work */
.phone.paged > .pg-on { min-height: calc(100vh - 118px); }
@supports (height: 100dvh) { .phone.paged > .pg-on { min-height: calc(100dvh - 118px); } }

/* Paged mode fills the screen with the single active page, which already
   reserves room for the bar (the -118px above). The scroll-mode chrome that
   lives OUTSIDE that page — the .phone 100vh floor and the body's bottom
   padding — would otherwise stack on top of a full-height page and force a
   scroll even on a short one. Drop both while paged. */
.phone.paged { min-height: 0; }
body.paged { padding-bottom: 0; }

/* The bar floats over the bottom of the screen. On a short page that is just
   empty card, so nothing to clear; on a page tall enough to scroll, the last
   line has to stop above it. Put that clearance INSIDE the scrollable page
   (only .section pages ever grow tall — brand/transition pages stay short),
   so it travels with the scroll instead of stacking onto every page the way
   the body padding did. */
.phone.paged > .section.pg-on { padding-bottom: 88px; }

.pager {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(calc(100% - 32px), 448px);
  padding: 8px;
  border: 1.5px solid #1c1c1c;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 #1c1c1c;
}

.pg-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #1c1c1c;
  border-radius: 50%;
  background: #b5fd4c;
  color: #1c1c1c;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pg-btn:active { transform: translateY(2px); }
.pg-btn:disabled { background: #f0f0ee; border-color: #d8d8d4; color: #b4b4b0; cursor: default; }
.pg-btn:disabled:active { transform: none; }

.pg-mid { flex: 1 1 auto; min-width: 0; }

.pg-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
}

.pg-label .pg-act { font-size: 14.5px; font-weight: 900; }
.pg-label .pg-n { color: #757575; }

/* a page opened from the 포도 안내 index is off the Next chain, so say so */
.pg-label .pg-n.ref { color: #6abe36; font-weight: 800; }

@media print {
  .pager { display: none; }
  .phone.paged > * { display: block; }   /* printing always gets the whole deck */
}

.pg-teach, .pg-exit { width: 32px; height: 32px; background: #fff; font-size: 13px; font-weight: 900; }
.phone.paged ~ .pager .pg-exit { background: #1c1c1c; color: #b5fd4c; }
.pg-teach.on { background: #1c1c1c; color: #b5fd4c; }

/* ============================================================
   Frameless page cards — no black outline/offset-shadow around
   the page itself. Inner components keep their borders; only the
   OUTER page frame is dropped, so pages float on the background.
   ============================================================ */
.section        { border-color: transparent; box-shadow: none; }
.brand-page     { box-shadow: none; }
.transition-page { box-shadow: none; }


/* ============================================================
   PATTERN ACTIVITIES  (문장 활동)
   ------------------------------------------------------------
   The hangul deck answers everything with .tap-grid / .builder.
   A pattern deck needs three more, and they are the three the
   interactive core lesson already ships — so the markup, the
   class names and the states are taken from
   interactive/sample-lesson-interactive.html rather than invented:

     .slot / .answer-space  → typed blanks     (kind "value")
     .choose-row .opt       → tap one of two   (kind "selection")
     .choice → .build-zone  → order the words  (kind "order")

   Feedback stays quiet and immediate, the way a tap-tile's does:
   right fills lime, wrong greys back out, and the tutor still leads.
   ============================================================ */

/* ---------- typed blanks ---------- */
.slot-input.correct {
  border-style: solid;
  background: #b5fd4c;
}

.slot-input.wrong {
  border-color: #d9534f;
  background: #fdf1f1;
  color: #d9534f;
  animation: miss .3s;               /* the builder's shake, reused */
}

/* a write-in area becomes a real field and keeps the tinted
   "fill the whole thing here" box it already had */
.answer-space.as-input {
  padding: 0;
  color: #1c1c1c;
}

.answer-space.as-input .space-input,
.answer-space.as-input .free-input {
  display: block;
  width: 100%;
  min-height: inherit;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: #1c1c1c;
  font: inherit;
  font-family: inherit;
  font-weight: 700;
  resize: none;
  -webkit-appearance: none;
}

.answer-space.as-input .space-input:focus,
.answer-space.as-input .free-input:focus { outline: none; }
.answer-space.as-input:focus-within { background: #fff; }

.answer-space.as-input .space-input::placeholder,
.answer-space.as-input .free-input::placeholder { color: #d8d8d4; font-weight: 700; }

.answer-space.as-input.correct,
.bubble.me .answer-space.as-input.correct { background: #e9fbcf; }

/* ---------- order the words ---------- */
/* the answer area turns into the tray the chips land in; the pool
   underneath holds the ones not placed yet */
.build-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: #1c1c1c;
}

.build-zone .choice,
.chip-pool .choice { margin: 0; }

.build-zone.correct,
.bubble.me .build-zone.correct { background: #e9fbcf; }

.build-zone.wrong {
  background: #fdf1f1;
  box-shadow: inset 0 0 0 1.5px #d9534f;
}

.chip-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 20px;
  margin-top: 10px;
}

.choice {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.choice:active { transform: translateY(1px); }

/* ---------- tap one of two ---------- */
.opt {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.opt.correct { border-style: solid; background: #b5fd4c; }

/* a wrong pick greys back out and STAYS greyed — `chosen` is the class
   that travels, so the look has to survive as long as the choice does
   (a 700ms flash is invisible to the other screen) */
.opt.chosen:not(.correct) { background: #f5f5f5; color: #a5a5a5; }
.opt.wrong { border-color: #d9534f; background: #fdf1f1; color: #d9534f; animation: miss .3s; }
.opt.dim { opacity: .35; }

/* ---------- which part of the Japanese line the blank asks for ----------
   The header strip carries the whole sentence, but the blank is usually only
   a piece of it — a particle, an ending, one clause. A highlighter swipe
   under that piece (the same one the 안내 page uses on patterns) says "this
   is the part you say in Korean", without adding a second line of text.
   No mark means the whole line is the answer. */
.answer-label .target {
  background: linear-gradient(transparent 52%, #b5fd4c 52%);
  color: #1c1c1c;
  font-weight: 800;
}

/* ---------- self-check list ---------- */
.mission li {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.mission li.checked::before {
  content: "✓";
  background: #b5fd4c;
  color: #1c1c1c;
  font-size: 11px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
}

/* ---------- teaching mode ----------
   Same rule as the letter deck: the answer is present for the tutor and
   never loud. Typed blanks take the answer as their placeholder (set in
   the deck's script — CSS cannot reach inside an input); these two have
   nowhere to put one, so they get a ghost of their own. */
body.teaching .opt[data-correct]:not(.chosen) { box-shadow: 0 0 0 2.5px #e6e6e4; }

body.teaching .build-zone:not(:has(> *))::after {
  content: attr(data-a);
  color: #ddddd9;
  font-size: 17px;
  font-weight: 700;
}