/* QuickScribble webinar page.
   The promotion page's colors, fonts, and one column (webinar_design.md,
   section 7; W22), so the two pages look like one project. The fonts are
   loaded in index.html. */

:root {
  --paper: #F2E8D5;       /* background */
  --ink: #2A211A;         /* text, rules */
  --accent: #8B2F23;      /* buttons */
  --muted: #5E4630;       /* secondary text */
  --card: #FBF6EC;        /* cards */
  --line: #D9C7A6;        /* paper lines */
  --card-border: #CDB896; /* card borders */

  --font-body: 'Gowun Batang', serif;
  --font-label: 'Nanum Gothic Coding', monospace;

  --column: 36rem;        /* the single column's widest */
  --gutter: 20px;         /* side margin */

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  word-break: keep-all;     /* Korean breaks between words, not inside them */
  overflow-wrap: break-word;
}

b {
  font-weight: 700;
}

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

/* Phone first: one column, as wide as the screen, centered on wider screens. */
.page,
.footer {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.label {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Shown and hidden with `hidden` (main.js); nothing may show them. */
[hidden] {
  display: none !important;
}

/* For screen readers only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 1. Hero ---------- */

.hero {
  padding-top: 40px;
}

/* The tagline sits under a double rule, like the promotion page's brand. */
.brand {
  padding-top: 12px;
  border-top: 3px double var(--ink);
}

.headline {
  margin: 24px 0 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.byline {
  margin: 12px 0 0;
  color: var(--muted);
}

/* The facts as a card of label · value rows. */
.facts {
  margin: 20px 0 24px;
  padding: 6px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: 6px;
  background: var(--card);
}

.facts div {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.facts div:last-child {
  border-bottom: 0;
}

.facts dt {
  flex: 0 0 5.5em;
  padding-top: 0.2em;
  font-family: var(--font-label);
  font-size: 0.875rem;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-weight: 700;
}

/* Like the promotion page's 저장 button. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--accent);
  color: var(--card);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
}

.button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Sections ---------- */

.section {
  margin-top: 64px;
  scroll-margin-top: 16px;
}

/* Section headings under a single rule; the double rule is the hero's. */
h2 {
  margin: 0 0 16px;
  padding-top: 10px;
  border-top: 1.5px solid var(--ink);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.45;
}

p {
  margin: 0 0 12px;
}

ul {
  margin: 0 0 12px;
  padding-left: 1.25em;
}

li {
  margin-bottom: 4px;
}

.more {
  margin-top: 16px;
}

/* Smaller, muted asides. */
.note {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- 2. Topics: numbered, the number in the label font ---------- */

.topics {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: topic;
}

.topics li {
  position: relative;
  margin: 0 0 16px;
  padding-left: 2.25em;
  counter-increment: topic;
}

.topics li::before {
  content: counter(topic, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-label);
  font-size: 0.875rem;
  color: var(--accent);
}

.topics h3 {
  margin: 0 0 2px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.topics p {
  margin: 0;
  font-size: 1rem;
}

/* ---------- 3. Promotion material ---------- */

.material-title {
  margin: 32px 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

/* The four illustrations, two by two; their edges already fade into the paper. */
.arts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.arts li {
  margin: 0;
}

.art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Animations A and B: stacked on a phone; side by side, at the same height,
   once the column is wide enough (each grows by its screen's width per
   height). The still frames, with reduced motion, always stack. */
.demos {
  display: grid;
  gap: 24px;
  margin-top: 16px;
}

.demo-fig {
  margin: 0;
}

.demo-fig figcaption,
.clip figcaption {
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 34rem) and (prefers-reduced-motion: no-preference) {
  .demos {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .demo-fig-cover {
    flex: 390 1 0;
    min-width: 0;
  }

  .demo-fig-main {
    flex: 832 1 0;
    min-width: 0;
  }

  .demos .phone {
    width: 100%;
    max-width: none;
  }
}

/* The clip, across the column. */
.clip {
  margin: 12px 0 0;
}

.clip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---------- 4. Shorts: 9:16, at most 320px wide ---------- */

.shorts-frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  margin: 16px auto 0;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: #1B1B1B;
}

.shorts-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#shorts .more {
  text-align: center;
}

/* ---------- Animations A and B: copied from the promotion page's style.css,
   as they are (W24; there: promotion_design.md, section 5.2) ---------- */

/* The parts live in the hidden sprite at the top of index.html. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* A phone: the screen inside a dark bezel. */
.phone {
  flex: none;
  margin: 0 auto;
  padding: 5px;
  border-radius: 28px;
  background: #1B1B1B;
}

.phone svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 23px;
}

/* Galaxy Z Fold5 cover screen (D13): 904 × 2316 px, 344 × 882 dp. */
.phone-cover {
  width: 210px;
}

/* Main screen: 1812 × 2176 px, 690 × 829 dp. As wide as the column allows,
   so its text is about as big as the cover screen's. */
.phone-main {
  width: 100%;
  max-width: 420px;
}

/* With reduced motion, still frames replace the animation. */
.stills {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.still {
  margin: 0;
}

.still svg {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #1B1B1B;
  border-radius: 12px;
  background: #1B1B1B;
}

.still figcaption {
  margin-top: 4px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  text-align: center;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .phone {
    display: none;
  }

  .stills {
    display: grid;
  }
}

.qs-finger {
  fill: #FFFFFF;
  fill-opacity: 0.5;
  stroke: #2A211A;
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}

/* One 13 s timeline for every part. Times in the comments are seconds.
   The 패널's phases (qs-*) are the same in A and B; each has its own way
   in before 2.6 s, its own typing, and its own finger:
   2.6 패널 opens · 3.7–7.8 typing · 8.2 저장 tapped · 8.4 저장됨 · 9.5 closes. */

.anim .qa-shade,
.anim .qs-keyboard,
.anim .qs-stamp,
.anim .qs-clip {
  transform-box: fill-box;
}

.anim .qa-shade { animation: qa-shade 13s infinite; }
.anim .qa-tile-press { animation: qa-tile-press 13s infinite; }
.anim .qa-finger { animation: qa-finger 13s infinite; }
.anim .qs-panel { animation: qs-panel 13s infinite; }
.anim .qs-keyboard { animation: qs-keyboard 13s infinite; }
.anim .qs-placeholder { animation: qs-placeholder 13s step-end infinite; }
.anim .qs-save { animation: qs-save 13s step-end infinite; }
.anim .qs-saved { animation: qs-saved 13s step-end infinite; }
.anim .qs-stamp { transform-origin: center; animation: qs-stamp 13s infinite; }
.anim .qa-caret { animation: qa-caret-move 13s step-end infinite, qs-caret-blink 13s step-end infinite; }
.anim .qs-clip { transform-origin: 0 50%; }
.anim .qa-clip-1 { animation: qa-type-1 13s step-end infinite; }
.anim .qa-clip-2 { animation: qa-type-2 13s step-end infinite; }
.anim .qa-clip-3 { animation: qa-type-3 13s step-end infinite; }
.anim .qb-card-press { animation: qb-card-press 13s infinite; }
.anim .qb-finger { animation: qb-finger 13s infinite; }
.anim .qb-caret { animation: qb-caret-move 13s step-end infinite, qs-caret-blink 13s step-end infinite; }
.anim .qb-clip-1 { animation: qb-type-1 13s step-end infinite; }
.anim .qb-clip-2 { animation: qb-type-2 13s step-end infinite; }

/* 0.85–1.45 the shade comes down; 2.6–2.75 it goes as the 패널 opens. */
@keyframes qa-shade {
  0%, 6.54% { transform: translateY(-100%); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  11.15% { transform: translateY(0); opacity: 1; }
  20% { transform: translateY(0); opacity: 1; }
  21.15%, 100% { transform: translateY(0); opacity: 0; }
}

/* 2.15–2.6 the 퀵노트 tile lights up under the finger. */
@keyframes qa-tile-press {
  0%, 16.54% { opacity: 0; }
  17.31%, 19.23% { opacity: 0.3; }
  20.77%, 100% { opacity: 0; }
}

/* 0.8–1.6 swipe down; 1.9–2.5 tap the tile; 8.0–8.55 tap 저장. */
@keyframes qa-finger {
  0%, 6.15% { opacity: 0; transform: translate(172px, 24px) scale(1); }
  6.92% { opacity: 1; transform: translate(172px, 24px) scale(1); animation-timing-function: ease-in-out; }
  11.15% { opacity: 1; transform: translate(172px, 300px) scale(1); }
  12.31% { opacity: 0; transform: translate(172px, 300px) scale(1); }
  13.08%, 14.62% { opacity: 0; transform: translate(292px, 110px) scale(1); }
  15.38% { opacity: 1; transform: translate(292px, 110px) scale(1); }
  16.54% { opacity: 1; transform: translate(292px, 110px) scale(0.82); }
  17.69% { opacity: 1; transform: translate(292px, 110px) scale(1); }
  19.23% { opacity: 0; transform: translate(292px, 110px) scale(1); }
  20%, 61.54% { opacity: 0; transform: translate(286px, 70px) scale(1); }
  62.31% { opacity: 1; transform: translate(286px, 70px) scale(1); }
  63.08% { opacity: 1; transform: translate(286px, 70px) scale(0.82); }
  64.23% { opacity: 1; transform: translate(286px, 70px) scale(1); }
  65.77%, 100% { opacity: 0; transform: translate(286px, 70px) scale(1); }
}

/* 2.6–2.9 the 패널 rises over the lock screen, opaque by 2.75 so the lock
   screen doesn't show through; 9.5–9.8 it closes. */
@keyframes qs-panel {
  0%, 20% { opacity: 0; transform: translateY(24px); animation-timing-function: ease-out; }
  21.15% { opacity: 1; }
  22.31%, 73.08% { opacity: 1; transform: translateY(0); }
  75.38%, 100% { opacity: 0; transform: translateY(0); }
}

/* 2.8–3.2 the keyboard opens in the text; 8.4–8.7 it closes for 저장됨. */
@keyframes qs-keyboard {
  0%, 21.54% { transform: translateY(100%); animation-timing-function: ease-out; }
  24.62%, 64.62% { transform: translateY(0); animation-timing-function: ease-in; }
  66.92%, 100% { transform: translateY(100%); }
}

/* 3.7 the first character: the placeholder goes, 저장 turns solid. */
@keyframes qs-placeholder {
  0% { opacity: 1; }
  28.46%, 100% { opacity: 0; }
}

/* 8.2–8.35 pressed. */
@keyframes qs-save {
  0% { opacity: 0.45; }
  28.46% { opacity: 1; }
  63.08% { opacity: 0.8; }
  64.23%, 100% { opacity: 1; }
}

/* 8.4 저장됨; the stamp lands by 8.6. */
@keyframes qs-saved {
  0% { opacity: 0; }
  64.62%, 100% { opacity: 1; }
}

@keyframes qs-stamp {
  0%, 64.62% { opacity: 0; transform: scale(1.35); animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1.4); }
  66.15%, 100% { opacity: 1; transform: scale(1); }
}

/* The caret blinks in the text from 3.1, is steady while typing, and goes at 8.4. */
@keyframes qs-caret-blink {
  0% { opacity: 0; }
  23.85% { opacity: 1; }
  26.54% { opacity: 0; }
  28.46% { opacity: 1; }
  64.62%, 100% { opacity: 0; }
}

/* A's typing, one syllable every 0.1 s from 3.7 (widths from Gowun Batang at 19 sp). */
@keyframes qa-type-1 {
  0% { transform: scaleX(0); }
  28.46% { transform: scaleX(0.094); }
  29.23% { transform: scaleX(0.198); }
  30% { transform: scaleX(0.231); }
  30.77% { transform: scaleX(0.330); }
  31.54% { transform: scaleX(0.364); }
  32.31% { transform: scaleX(0.459); }
  33.08% { transform: scaleX(0.556); }
  33.85% { transform: scaleX(0.660); }
  34.62% { transform: scaleX(0.693); }
  35.38% { transform: scaleX(0.797); }
  36.15% { transform: scaleX(0.896); }
  36.92% { transform: scaleX(1.000); }
}
@keyframes qa-type-2 {
  0% { transform: scaleX(0); }
  39.62% { transform: scaleX(0.086); }
  40.38% { transform: scaleX(0.115); }
  41.15% { transform: scaleX(0.203); }
  41.92% { transform: scaleX(0.286); }
  42.69% { transform: scaleX(0.378); }
  43.46% { transform: scaleX(0.407); }
  44.23% { transform: scaleX(0.495); }
  45% { transform: scaleX(0.584); }
  45.77% { transform: scaleX(0.676); }
  46.54% { transform: scaleX(0.705); }
  47.31% { transform: scaleX(0.793); }
  48.08% { transform: scaleX(0.885); }
  48.85% { transform: scaleX(0.972); }
  49.62% { transform: scaleX(1.000); }
}
@keyframes qa-type-3 {
  0% { transform: scaleX(0); }
  52.31% { transform: scaleX(0.113); }
  53.08% { transform: scaleX(0.222); }
  53.85% { transform: scaleX(0.260); }
  54.62% { transform: scaleX(0.371); }
  55.38% { transform: scaleX(0.481); }
  56.15% { transform: scaleX(0.588); }
  56.92% { transform: scaleX(0.626); }
  57.69% { transform: scaleX(0.734); }
  58.46% { transform: scaleX(0.772); }
  59.23% { transform: scaleX(0.890); }
  60% { transform: scaleX(1.000); }
}
@keyframes qa-caret-move {
  0% { transform: translate(24px, 210px); }
  28.46% { transform: translate(40.5px, 210px); }
  29.23% { transform: translate(58.8px, 210px); }
  30% { transform: translate(64.7px, 210px); }
  30.77% { transform: translate(82.1px, 210px); }
  31.54% { transform: translate(88.0px, 210px); }
  32.31% { transform: translate(104.8px, 210px); }
  33.08% { transform: translate(121.8px, 210px); }
  33.85% { transform: translate(140.1px, 210px); }
  34.62% { transform: translate(146.0px, 210px); }
  35.38% { transform: translate(164.2px, 210px); }
  36.15% { transform: translate(181.7px, 210px); }
  36.92% { transform: translate(199.9px, 210px); }
  38.65% { transform: translate(24px, 246px); }
  39.62% { transform: translate(41.1px, 246px); }
  40.38% { transform: translate(47.0px, 246px); }
  41.15% { transform: translate(64.5px, 246px); }
  41.92% { transform: translate(81.0px, 246px); }
  42.69% { transform: translate(99.2px, 246px); }
  43.46% { transform: translate(105.1px, 246px); }
  44.23% { transform: translate(122.6px, 246px); }
  45% { transform: translate(140.3px, 246px); }
  45.77% { transform: translate(158.5px, 246px); }
  46.54% { transform: translate(164.4px, 246px); }
  47.31% { transform: translate(181.9px, 246px); }
  48.08% { transform: translate(200.1px, 246px); }
  48.85% { transform: translate(217.6px, 246px); }
  49.62% { transform: translate(223.1px, 246px); }
  51.35% { transform: translate(24px, 282px); }
  52.31% { transform: translate(41.5px, 282px); }
  53.08% { transform: translate(58.4px, 282px); }
  53.85% { transform: translate(64.3px, 282px); }
  54.62% { transform: translate(81.4px, 282px); }
  55.38% { transform: translate(98.5px, 282px); }
  56.15% { transform: translate(115.0px, 282px); }
  56.92% { transform: translate(120.9px, 282px); }
  57.69% { transform: translate(137.6px, 282px); }
  58.46% { transform: translate(143.5px, 282px); }
  59.23% { transform: translate(161.8px, 282px); }
  60% { transform: translate(178.8px, 282px); }
}

/* B: 1.6–2.25 tap the 상시 알림; 8.0–8.55 tap 저장. */
@keyframes qb-finger {
  0%, 12.31% { opacity: 0; transform: translate(345px, 268px) scale(1); }
  13.08% { opacity: 1; transform: translate(345px, 268px) scale(1); }
  14.62% { opacity: 1; transform: translate(345px, 268px) scale(0.82); }
  15.77% { opacity: 1; transform: translate(345px, 268px) scale(1); }
  17.31% { opacity: 0; transform: translate(345px, 268px) scale(1); }
  20%, 61.54% { opacity: 0; transform: translate(632px, 70px) scale(1); }
  62.31% { opacity: 1; transform: translate(632px, 70px) scale(1); }
  63.08% { opacity: 1; transform: translate(632px, 70px) scale(0.82); }
  64.23% { opacity: 1; transform: translate(632px, 70px) scale(1); }
  65.77%, 100% { opacity: 0; transform: translate(632px, 70px) scale(1); }
}

/* 1.9–2.6 the notification darkens under the finger. */
@keyframes qb-card-press {
  0%, 14.62% { opacity: 0; }
  15.38%, 18.46% { opacity: 0.08; }
  20%, 100% { opacity: 0; }
}

/* B's typing, one syllable every 0.095 s from 3.7. */
@keyframes qb-type-1 {
  0% { transform: scaleX(0); }
  28.46% { transform: scaleX(0.045); }
  29.19% { transform: scaleX(0.093); }
  29.92% { transform: scaleX(0.135); }
  30.65% { transform: scaleX(0.150); }
  31.38% { transform: scaleX(0.194); }
  32.12% { transform: scaleX(0.238); }
  32.85% { transform: scaleX(0.253); }
  33.58% { transform: scaleX(0.297); }
  34.31% { transform: scaleX(0.341); }
  35.04% { transform: scaleX(0.389); }
  35.77% { transform: scaleX(0.404); }
  36.5% { transform: scaleX(0.452); }
  37.23% { transform: scaleX(0.497); }
  37.96% { transform: scaleX(0.544); }
  38.69% { transform: scaleX(0.560); }
  39.42% { transform: scaleX(0.604); }
  40.15% { transform: scaleX(0.620); }
  40.88% { transform: scaleX(0.666); }
  41.62% { transform: scaleX(0.708); }
  42.35% { transform: scaleX(0.751); }
  43.08% { transform: scaleX(0.795); }
  43.81% { transform: scaleX(0.810); }
  44.54% { transform: scaleX(0.855); }
  45.27% { transform: scaleX(0.897); }
  46% { transform: scaleX(0.940); }
  46.73% { transform: scaleX(0.986); }
  47.46% { transform: scaleX(1.000); }
}
@keyframes qb-type-2 {
  0% { transform: scaleX(0); }
  50.12% { transform: scaleX(0.091); }
  50.85% { transform: scaleX(0.187); }
  51.58% { transform: scaleX(0.217); }
  52.31% { transform: scaleX(0.307); }
  53.04% { transform: scaleX(0.396); }
  53.77% { transform: scaleX(0.482); }
  54.5% { transform: scaleX(0.513); }
  55.23% { transform: scaleX(0.602); }
  55.96% { transform: scaleX(0.697); }
  56.69% { transform: scaleX(0.728); }
  57.42% { transform: scaleX(0.821); }
  58.15% { transform: scaleX(0.911); }
  58.88% { transform: scaleX(1.000); }
}
@keyframes qb-caret-move {
  0% { transform: translate(24px, 210px); }
  28.46% { transform: translate(41.5px, 210px); }
  29.19% { transform: translate(59.7px, 210px); }
  29.92% { transform: translate(75.9px, 210px); }
  30.65% { transform: translate(81.8px, 210px); }
  31.38% { transform: translate(98.5px, 210px); }
  32.12% { transform: translate(115.6px, 210px); }
  32.85% { transform: translate(121.5px, 210px); }
  33.58% { transform: translate(138.2px, 210px); }
  34.31% { transform: translate(155.3px, 210px); }
  35.04% { transform: translate(173.5px, 210px); }
  35.77% { transform: translate(179.4px, 210px); }
  36.5% { transform: translate(197.7px, 210px); }
  37.23% { transform: translate(215.1px, 210px); }
  37.96% { transform: translate(233.4px, 210px); }
  38.69% { transform: translate(239.3px, 210px); }
  39.42% { transform: translate(256.4px, 210px); }
  40.15% { transform: translate(262.3px, 210px); }
  40.88% { transform: translate(279.9px, 210px); }
  41.62% { transform: translate(296.5px, 210px); }
  42.35% { transform: translate(313.0px, 210px); }
  43.08% { transform: translate(329.7px, 210px); }
  43.81% { transform: translate(335.6px, 210px); }
  44.54% { transform: translate(352.7px, 210px); }
  45.27% { transform: translate(369.0px, 210px); }
  46% { transform: translate(385.6px, 210px); }
  46.73% { transform: translate(403.0px, 210px); }
  47.46% { transform: translate(408.6px, 210px); }
  49.15% { transform: translate(24px, 246px); }
  50.12% { transform: translate(41.5px, 246px); }
  50.85% { transform: translate(59.7px, 246px); }
  51.58% { transform: translate(65.6px, 246px); }
  52.31% { transform: translate(82.7px, 246px); }
  53.04% { transform: translate(99.8px, 246px); }
  53.77% { transform: translate(116.3px, 246px); }
  54.5% { transform: translate(122.2px, 246px); }
  55.23% { transform: translate(139.3px, 246px); }
  55.96% { transform: translate(157.6px, 246px); }
  56.69% { transform: translate(163.5px, 246px); }
  57.42% { transform: translate(181.3px, 246px); }
  58.15% { transform: translate(198.4px, 246px); }
  58.88% { transform: translate(215.5px, 246px); }
}

/* ---------- 6. Signup ---------- */

.signup-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.signup-form fieldset > * + *,
.signup-form .status {
  margin-top: 16px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

/* 16px or more, so a phone's browser doesn't zoom in on focus. */
#email {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1.5px solid var(--card-border);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
}

#email::placeholder {
  color: #7A6148;
}

#email:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

#email[aria-invalid="true"],
#consent[aria-invalid="true"] {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-error {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent);
}

/* The consent: the checkbox and its label, with a large tap area. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#consent {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0.25em 0 0;
  accent-color: var(--accent);
}

.consent label {
  font-weight: 700;
  cursor: pointer;
}

.required {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--accent);
}

/* The honeypot: off screen, not display: none, which some bots skip. */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* 이미 신청하셨습니다, a refused address, or an error with a retry. */
.status {
  margin-bottom: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--card-border);
  border-left-width: 4px;
  border-radius: 3px;
  background: var(--card);
  font-size: 0.9375rem;
}

.status-error {
  border-left-color: var(--accent);
  color: var(--accent);
}

.status-info {
  border-left-color: var(--ink);
}

/* The privacy notice: a card, shown in full beside the consent. */
.notice {
  padding: 12px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: 6px;
  background: var(--card);
  font-size: 0.9375rem;
}

.notice-title {
  margin-bottom: 6px;
  font-weight: 700;
}

.recording {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The thank-you screen and the closing message, in a double rule like the hero. */
.thanks,
.ended {
  margin-top: 24px;
  padding: 16px;
  border: 3px double var(--ink);
  border-radius: 6px;
  background: var(--card);
  scroll-margin-top: 16px;
}

.thanks:focus,
.ended:focus {
  outline: none;
}

.thanks-title,
.ended-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.thanks-replay {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 72px;
  padding-bottom: 40px;
  font-size: 0.875rem;
  color: var(--muted);
}

.footer p {
  margin: 0 0 4px;
}

/* The rule sits on the first line, so it stays inside the side margins. */
.footer .label {
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 3px double var(--ink);
}