/*
 * LearnKoreanWith.me — page stylesheet.
 *
 * Ported from the approved wireframe (docs/design-variants/wireframe-v1.html)
 * to keep the shipped visual result identical to what was reviewed. Tokens
 * below are declared under the canonical names from
 * design-system/learnkoreanwithme/DESIGN.md; a few extra custom properties
 * (--line, --white, --card-shadow, --serif, --sans, --kr, --fs-*) are kept as
 * aliases because the component rules ported from the wireframe reference
 * them throughout — renaming every occurrence risked introducing visual
 * drift versus the reviewed markup.
 *
 * A short "functional additions" section at the bottom covers states that
 * only exist once the widget talks to the real API (loading skeletons,
 * error messaging, multi-candidate result cards, the extended interview
 * questions) — none of this existed in the static wireframe demo.
 */

:root {
  /* DESIGN.md §1 canonical tokens */
  --paper: #FCFAF4;
  --ink: #1C1917;
  --stone: #78716C;
  --border: #E7E5E4;
  --terracotta: #9A3412;
  --terracotta-dark: #7C2A0E;
  --ink-hover: #33302C;
  --paper-dim: #F5F5F4;      /* placeholder surfaces (cal grid, video frame) */
  --shimmer-mid: #F0EEE9;    /* skeleton shimmer midtone */
  --scrim: rgba(28, 25, 23, 0.55);
  --terracotta-tint: rgba(154, 52, 18, 0.08);
  --surface: #FFFFFF;

  /* Aliases used by the component CSS below (ported 1:1 from wireframe-v1) */
  --line: var(--border);
  --white: var(--surface);
  --card-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px rgba(28, 25, 23, .06);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --kr: "Gowun Batang", serif;

  /* 4-step type scale — no in-between sizes (pull-quote 1.5rem sanctioned by DESIGN.md §2) */
  --fs-display: clamp(2.75rem, 6.5vw, 4.75rem);
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-pullquote: 1.5rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  position: relative;
}

/* Whisper-level paper grain (feTurbulence, <=1.5% opacity) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.015'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

header, main, footer { position: relative; z-index: 1; }

::selection { background: var(--terracotta-tint); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ————— Header ————— */
.site-head {
  padding: 1.5rem 0 0;
}
.site-head .wrap {
  display: flex;
  /* center (was baseline): the brand mark img has no text baseline */
  align-items: center;
  justify-content: space-between;
}
.site-head .brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-head .brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
}
.site-head .brand .dot { color: var(--terracotta); }
/* Segmented control (2026-07-26): bold alone didn't read as "selected" —
   the active language now gets a filled ink pill inside a bordered group. */
.lang-toggle {
  font-size: var(--fs-small);
  color: var(--stone);
  user-select: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: var(--white);
}
.lang-toggle .lang-on,
.lang-toggle .lang-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  line-height: 1.4;
}
.lang-toggle .lang-on {
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
}
.lang-toggle .lang-off { color: var(--stone); text-decoration: none; }
.lang-toggle .lang-off:hover,
.lang-toggle .lang-off:focus-visible { color: var(--ink); text-decoration: none; background: var(--paper); }

/* ————— Shared section grammar ————— */
.section {
  padding: 7rem 0;              /* 112px — within 96–128px budget */
  border-top: 1px solid var(--line);
}
.kicker-sec {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.75rem;
}
.section h2 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.section .sec-sub {
  color: var(--stone);
  max-width: 38rem;
}
.ph-note {
  font-size: var(--fs-small);
  color: var(--stone);
  font-style: italic;
}

/* Pull-quote component (DESIGN.md §2) — Fraunces italic, ink, wide vertical margin */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 560;
  font-size: var(--fs-pullquote);
  line-height: 1.4;
  color: var(--ink);
  max-width: 38rem;
  margin: 3rem auto;
  text-align: center;
}

/* ————— ① Hook (pre-hero strip) ————— */
.hook {
  padding: 3rem 0 0;
}
.hook .pullquote { margin: 0 auto; }

.hero-wrap { position: relative; width: 100%; }
.pullquote--left { text-align: left; margin: 2rem 0; }

/* ————— ② Hero ————— */
.hero {
  position: relative;
  min-height: calc(100svh - 4.5rem);
  display: flex;
  align-items: center;
  padding: 4rem 0 6rem;
}

/* Name cloud — static scattered hangul names, right ~45% of hero */
.name-cloud {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 45%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.nc {
  position: absolute;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}
.nc-cap {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: rgba(120, 113, 108, 0.4);
  margin-top: 0.15rem;
}
/* Per-name: font / size ladder (one 9rem max) / opacity ladder 4–12% / sparse rotation */
.nc-1  { top: 2%;  left: 6%;  font-family: "Hahmlet", serif;           font-size: 5rem;    color: rgba(28,25,23,.08); }
.nc-2  { top: 10%; left: 54%; font-family: "Song Myung", serif;        font-size: 4rem;    color: rgba(28,25,23,.10); transform: rotate(2deg); }
.nc-3  { top: 22%; left: 32%; font-family: "Nanum Pen Script", cursive; font-size: 6rem;   color: rgba(28,25,23,.12); }
.nc-4  { top: 37%; left: 6%;  font-family: "Nanum Myeongjo", serif;    font-size: 9rem;    color: rgba(28,25,23,.06); }
.nc-5  { top: 42%; left: 68%; font-family: "Song Myung", serif;        font-size: 3.5rem;  color: rgba(28,25,23,.07); transform: rotate(-6deg); }
.nc-6  { top: 58%; left: 48%; font-family: var(--kr);                  font-size: 3rem;    color: rgba(28,25,23,.05); }
.nc-7  { top: 64%; left: 10%; font-family: "Nanum Myeongjo", serif;    font-size: 4.5rem;  color: rgba(28,25,23,.09); transform: rotate(-2deg); }
.nc-8  { top: 75%; left: 36%; font-family: "Hahmlet", serif;           font-size: 2.5rem;  color: rgba(28,25,23,.04); }
.nc-9  { top: 83%; left: 62%; font-family: var(--kr);                  font-size: 3.25rem; color: rgba(28,25,23,.11); }
.nc-10 { top: 88%; left: 10%; font-family: "Hahmlet", serif;           font-size: 2.75rem; color: rgba(154,52,18,.10); transform: rotate(4deg); }

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: left;
}

.kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  font-weight: 560;
  /* brand-color emphasis (live-gate feedback #3) — with the buttons moved to
     ink, terracotta in the headline marks the one phrase that matters */
  color: var(--terracotta);
}

.curiosity {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  max-width: 34rem;
}

.subhead {
  font-size: var(--fs-body);
  color: var(--stone);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.clara {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.clara-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clara-avatar--photo {
  background: none;
  object-fit: cover;
  border: 1px solid var(--line);
}
.clara-line {
  font-size: var(--fs-small);
  color: var(--stone);
}
.clara-line strong { color: var(--ink); font-weight: 600; }

.cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Button color system (live-gate feedback #3): every button defaults to ink;
   terracotta is reserved for the trial-booking CTAs (.btn-accent — the
   booking card + the mobile fixed bar) so the single conversion action owns
   the brand color. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.btn-primary .arrow {
  display: inline-block;
  transition: transform 200ms ease;
}
.btn-primary:hover { background: var(--ink-hover); }
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--stone);
  cursor: not-allowed;
}
.btn-primary:disabled:hover,
.btn-primary[aria-disabled="true"]:hover { background: var(--stone); }
.btn-primary:disabled:hover .arrow,
.btn-primary[aria-disabled="true"]:hover .arrow { transform: none; }

.btn-accent { background: var(--terracotta); }
.btn-accent:hover { background: var(--terracotta-dark); }

/* In-flight state (live-gate feedback #2): the arrow swaps for a spinner and
   the button keeps its own color — stone would read as "not allowed". */
.btn-primary.is-loading:disabled { background: var(--ink); cursor: progress; }
.btn-accent.is-loading:disabled { background: var(--terracotta); }
.btn-primary.is-loading .arrow { display: none; }
.btn-primary.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid rgba(252, 250, 244, 0.35);
  border-top-color: var(--white);
  border-radius: 999px;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.link-secondary {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.link-secondary:hover { border-bottom-color: var(--ink); }

/* Load motion: fade-up 12px, 80ms stagger, 400ms ease-out (motion budget ①) */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 400ms ease-out forwards;
}
.fade-up.d1 { animation-delay: 80ms; }
.fade-up.d2 { animation-delay: 160ms; }
.fade-up.d3 { animation-delay: 240ms; }
.fade-up.d4 { animation-delay: 320ms; }
.fade-up.d5 { animation-delay: 400ms; }
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ————— ② Widget ————— */
.widget-section {
  padding: 0 0 7rem;
}

.widget {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 2rem 1.25rem 2.25rem;
}

.widget-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--stone);
  margin-bottom: 1.25rem;
}

.widget-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.input-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.input-row input {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.input-row input::placeholder { color: var(--stone); }
.input-row input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-tint);
}

/* Reveal stages (motion budget ②: widget state transitions, 8px · 300ms stagger) */
.stage {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out;
  scroll-margin-top: 1.25rem;   /* breathing room when the widget scrolls a stage into view */
}
.stage.open {
  max-height: 90rem;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}
.stage.open.s2 { transition-delay: 250ms; }
.stage.open.s3 { transition-delay: 500ms; }

.stage-inner { padding-top: 2.25rem; }

.stage-title {
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}

/* Act 1 card */
.act1 {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
}
.act1 .your-name {
  font-size: var(--fs-small);
  color: var(--stone);
}
.act1 .hangul {
  font-family: var(--kr);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 3.25rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0.25rem 0 0.1rem;
}
.act1 .roman {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--stone);
  margin-bottom: 1rem;
}

.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  /* 0.7rem vertical -> >=44px touch target (DT7) */
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.audio-btn:hover { border-color: var(--stone); }
.audio-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.audio-btn:disabled:hover { border-color: var(--line); }
.audio-btn.is-loading:disabled { cursor: progress; opacity: 1; }
.audio-btn.is-loading .icon-circle svg { display: none; }
.audio-btn.is-loading .icon-circle::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid rgba(252, 250, 244, 0.35);
  border-top-color: var(--white);
  border-radius: 999px;
  animation: btn-spin 700ms linear infinite;
}
.audio-btn .icon-circle {
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.audio-btn .icon-circle svg { width: 0.75rem; height: 0.75rem; margin-left: 2px; }
.audio-btn .audio-meta { opacity: .55; font-weight: 400; }

.bridge {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  font-weight: 560;
  color: var(--ink);
  max-width: 32rem;
  margin-top: 1.75rem;
}

/* Interview */
.interview-q {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.interview-q .note {
  font-weight: 400;
  color: var(--stone);
}
.interview-group + .interview-group { margin-top: 1.75rem; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.chip {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(120, 113, 108, 0.45);
  border-radius: 999px;
  /* 0.7rem vertical brings chip height to >=44px (DT7 touch target) */
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.chip:hover { border-color: var(--stone); }
.chip[aria-pressed="true"] {
  background: var(--terracotta-tint);
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.chip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.interview-hint {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.9rem;
}
.interview-actions {
  margin-top: 1.75rem;
}

/* Act 2 card */
.act2-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.act2-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem 1.25rem 1.25rem;
  max-width: 26rem;
}
.act2-card.is-selected {
  border-color: var(--ink);
  box-shadow: var(--card-shadow);
}
.act2-card .hangul-big {
  font-family: var(--kr);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 4rem);
  line-height: 1.15;
  color: var(--ink);
}
.act2-card .roman {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--stone);
  margin-bottom: 0.6rem;
}
.act2-card .meaning {
  font-size: var(--fs-body);
  color: var(--stone);
  margin-bottom: 1.25rem;
}
.act2-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  /* 0.7rem vertical -> >=44px touch target (DT7) */
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.share-btn:hover { background: var(--ink-hover); }
.share-btn svg { width: 0.95rem; height: 0.95rem; }
.choose-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  /* 0.7rem vertical -> >=44px touch target (DT7) */
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.choose-btn:hover { border-color: var(--stone); }
.act2-card.is-selected .choose-btn {
  border-color: var(--ink);
  color: var(--ink);
}
.act2-card .engrave {
  font-family: var(--serif);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--stone);
}

.act2-bridge {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  font-weight: 560;
  color: var(--ink);
  max-width: 32rem;
  margin-top: 1.75rem;
}
.act2-bridge .go-aulas {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.act2-bridge .go-aulas:hover { border-bottom-color: var(--terracotta); }

/* Video facade placeholder (below widget) */
.video-facade {
  max-width: 46rem;
  margin: 3rem auto 0;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-dim);
  border: 1px dashed var(--stone);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-play {
  width: 64px;
  height: 64px;
  border-radius: 999px;              /* pill radius: circular play button (audio-family) */
  background: var(--ink);            /* ink — not terracotta (accent whitelist) */
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-play svg { width: 1.4rem; height: 1.4rem; margin-left: 4px; }
.video-ph-label {
  position: absolute;
  left: 1rem;
  bottom: 0.75rem;
  font-size: var(--fs-small);
  color: var(--stone);
  font-style: italic;
}
.video-caption {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.75rem;
  text-align: center;
}

/* ————— ③ Antes → Depois ————— */
.cards-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.shift-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem 1.5rem;
}
.shift-card .lbl {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.25rem;
}
.shift-card .antes {
  color: var(--stone);
  margin-bottom: 1rem;
}
.shift-card .seta {
  color: var(--stone);
  font-size: var(--fs-small);
  margin-bottom: 1rem;
}
.shift-card .depois {
  font-weight: 600;
  color: var(--ink);
}

/* ————— ④ A Clara ————— */
.clara-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
.clara-photo {
  aspect-ratio: 3 / 4;
  max-width: 20rem;
  background: var(--paper-dim);
  border: 1px dashed var(--stone);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-size: var(--fs-small);
  font-style: italic;
}
.clara-story p {
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 1.25rem;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.trust-item .num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);
}
.trust-item .cap {
  font-size: var(--fs-small);
  color: var(--stone);
}
.clara-quote { text-align: left; margin: 3rem 0 0; }

/* ————— EN /en teachers section (JKI-201/E3) ————— */
.teachers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.teacher-card {
  position: relative; /* anchors .teacher-avatar top-right */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem 1.5rem;
  /* flex column so the CTA bottom-aligns across side-by-side cards of
     unequal content length (grid rows stretch to equal height) */
  display: flex;
  flex-direction: column;
}
.teacher-avatar {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.teacher-avatar--initial {
  background: var(--terracotta);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher-card .name-line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);
  padding-right: 4.75rem; /* keep clear of the avatar */
}
.teacher-card .badge {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.15rem;
}
.teacher-card .tz-line,
.teacher-card .bio { color: var(--ink); margin-top: 1rem; }
.teacher-card .bio { margin-bottom: 1.25rem; }
.teacher-card .teacher-cta { margin-top: auto; align-self: flex-start; }
.teacher-card a.btn-primary.teacher-cta { display: inline-flex; }

/* ————— EN /en booking teacher-select (JKI-201/E3) ————— */
.teacher-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.teacher-tab {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--stone);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}
.teacher-tab:hover { border-color: var(--stone); }
.teacher-tab[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--terracotta);
  background: var(--terracotta-tint);
  /* 선택 상태 보더를 시각 2px로 (2026-07-28 사용자 지시) — border-width를
     늘리면 탭 크기가 1px씩 밀리므로 inset shadow로 겹쳐 레이아웃 불변 */
  box-shadow: inset 0 0 0 1px var(--terracotta);
}

/* ————— ⑤ Como funciona ————— */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--ink);
  padding-top: 1.25rem;
}
.step .n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);            /* step numbers in ink — never terracotta */
  margin-bottom: 0.5rem;
}
.step h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  margin-bottom: 0.35rem;
}
.step p {
  font-size: var(--fs-small);
  color: var(--stone);
}

/* ————— ⑥ Testemunhos ————— */
.testi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testi-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--ink);
  flex: 1;
}
.testi-card .who {
  font-size: var(--fs-small);
  color: var(--stone);
}

/* ————— ⑦ Reservar (main CTA) ————— */
.reservar-card {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 2rem 1.25rem;
}
/* one price per line (live-gate feedback #6) — the anchor (normal price)
   above, the trial offer below, each readable at a glance */
.price-anchor {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
}
.price-anchor .normal { display: block; color: var(--stone); font-weight: 400; }
.price-anchor .trial { display: block; }
.includes {
  list-style: none;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.6rem;
}
.includes li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--ink);
}
.includes li::before {
  content: "—";
  color: var(--stone);
  flex: none;
}
.personal-line {
  color: var(--stone);
  margin-bottom: 1.5rem;
}
.cal-embed {
  border: 1px dashed var(--stone);
  border-radius: 12px;
  background: var(--paper-dim);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 18rem;
  margin: 0 auto 1rem;
}
.cal-grid span {
  aspect-ratio: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* author display:grid는 UA의 [hidden]{display:none}을 이기므로 명시 필요 —
   없으면 임베드 로드 후에도 스켈레톤이 영원히 보이는 버그 (2026-07-27 실예약 검수) */
.cal-grid[hidden] { display: none; }
.cal-caption {
  font-size: var(--fs-small);
  color: var(--stone);
}
.reservar-cta-row { margin-top: 1.5rem; text-align: center; }
/* 모바일: 예약 임베드가 좌우 공간을 최대로 쓰도록 3중 패딩 축소
   (wrap 1.25 + card 1.25 + embed 1.25rem이 겹쳐 뷰포트 1/3이 여백이었음) */
@media (max-width: 640px) {
  .reservar-card { padding: 1.5rem 0.75rem; }
  .cal-embed { padding: 1.25rem 0.5rem; }
}

/* ————— ⑧ Email (second track) ————— */
.email-inner { max-width: 40rem; }
.email-form { margin-top: 2rem; }
.field-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-body);
  margin-bottom: 0.6rem;
}
.email-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.email-row input[type="email"] {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.email-row input[type="email"]:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-tint);
}
.btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.btn-ink:hover { background: var(--ink-hover); }
.btn-ink:disabled { background: var(--stone); cursor: not-allowed; }
.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  max-width: 36rem;
}
.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--terracotta);
}
.consent label {
  font-size: var(--fs-small);
  color: var(--stone);
  line-height: 1.55;
}
/* 2026-07-26 opt-in-less pivot item 6: one-time-use email microcopy (pt/en
   _email_capture partials). .consent above is now dead CSS -- the checkbox
   it styled was removed same day -- left in place, harmless. */
.email-micro {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.email-aux {
  margin-top: 2rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.email-status {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.email-status[hidden] { display: none; }

/* ————— ⑨ FAQ ————— */
.faq-list {
  max-width: 44rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  min-height: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .mark { color: var(--stone); flex: none; }
.faq-list details[open] summary .mark .plus { display: none; }
.faq-list details:not([open]) summary .mark .minus { display: none; }
.faq-list .faq-a {
  padding: 0 0 1.25rem;
  color: var(--stone);
  max-width: 38rem;
}

/* ————— Footer ————— */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 3rem 0 6rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.site-foot .foot-main {
  display: flex;
  align-items: flex-start; /* badge tops-aligns with the links row */
  gap: 1.1rem;
}
.site-foot .foot-logo {
  display: block;
  flex: none;
  /* 이전 세로 실루엣(~66px)의 크기감 유지 (2026-07-27 사용자: "그 전 크기가
     크고 좋았는데") — 두 줄 텍스트보다 살짝 큰 60px */
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
}
.site-foot .foot-body {
  flex: 1;
  min-width: 0;
}
/* 링크 행 + 연락처 행을 배지(60px)와 같은 높이로: 첫 줄은 배지 상단,
   둘째 줄은 배지 하단에 정렬 (2026-07-27 사용자 지시) */
.site-foot .foot-id {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.site-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0;
}
.site-foot .foot-contact { margin-bottom: 0; }
.site-foot a {
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.site-foot a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.site-foot p { margin-bottom: 0.25rem; }
.site-foot .foot-legal {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--stone);
  opacity: 0.75;
}
.site-foot .foot-legal p { margin-bottom: 0; }

/* ————— Mobile fixed CTA bar (mobile only; price allowed here — DT9) ————— */
.fixed-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
}
.fixed-cta .btn-primary {
  width: 100%;
  justify-content: center;
}

/* ————— Back-to-top button (live-gate feedback #7) ————— */
.back-to-top {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 11;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--ink-hover); }
.back-to-top svg { width: 1.1rem; height: 1.1rem; }

/* ————— Responsive ————— */
@media (max-width: 767px) {
  .hero { min-height: 0; padding: 3.5rem 0 5rem; }
  /* Keep only the 4 most subtle names, shrunk behind the headline */
  .name-cloud { width: auto; left: 0; }
  .nc { display: none; }
  .nc-4, .nc-5, .nc-6, .nc-8 { display: flex; }
  .nc-4 { top: 1%;  left: 48%; font-size: 4.5rem; }
  .nc-5 { top: 18%; left: 6%;  font-size: 2.5rem; }
  .nc-6 { top: 32%; left: 58%; font-size: 2.25rem; }
  .nc-8 { top: 46%; left: 18%; font-size: 2rem; }
  .nc-cap { display: none; }
  .section { padding: 6rem 0; }   /* 96px — lower edge of budget */
  .fixed-cta.visible { display: block; }
  /* single line even at 320px (codex review 2026-07-24: a wrapped label makes
     the bar taller than the offsets below and the back-to-top button overlaps
     it) — smaller type, vertical padding keeps the >=44px touch target */
  .fixed-cta .btn-primary {
    white-space: nowrap;
    font-size: var(--fs-small);
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  body.has-fixed-cta { padding-bottom: 5rem; }
  /* lift the back-to-top button above the fixed CTA bar */
  body.has-fixed-cta .back-to-top { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

@media (min-width: 640px) {
  .input-row { flex-direction: row; }
  .input-row input { flex: 1; }
  .input-row .btn-primary { flex: none; }
  .cta-row { flex-direction: row; align-items: center; gap: 1.75rem; }
  .widget { padding: 2.5rem 2.75rem 2.75rem; }
  .email-row { flex-direction: row; }
  .email-row input[type="email"] { flex: 1; }
  .email-row .btn-ink { flex: none; }
}

@media (min-width: 768px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .clara-grid { grid-template-columns: 20rem 1fr; }
  .teachers-grid { grid-template-columns: repeat(2, 1fr); }
  .reservar-card { padding: 2.5rem 2.75rem; }
  .act2-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ————— Reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none; opacity: 1; transform: none; }
  .stage, .btn-primary, .btn-primary .arrow, .link-secondary, .chip,
  .audio-btn, .share-btn, .choose-btn, .input-row input, .act2-bridge .go-aulas,
  .email-row input, .btn-ink, .site-foot a, .skeleton-line, .back-to-top {
    transition: none;
    animation: none;
  }
  /* keep the in-flight spinner spinning — it conveys state, not decoration */
  .btn-primary.is-loading::after,
  .audio-btn.is-loading .icon-circle::after { animation: btn-spin 700ms linear infinite; }
}

/* ═════════════════════════════════════════════════════════════════════
   Functional additions beyond wireframe v1 (real API wiring, JKI-150)
   ═════════════════════════════════════════════════════════════════════ */

/* Loading skeleton (Act 1 / Act 2 fetch in flight) — no new accent color,
   just a stone-toned shimmer on the existing card surface. */
.skeleton-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
}
.skeleton-line {
  height: 1rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, var(--shimmer-mid) 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  margin-bottom: 0.6rem;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.tall { height: 2.5rem; width: 60%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-caption {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.75rem;
}

/* Error state — stone/ink only, no new accent (DESIGN.md §1 whitelist) */
.widget-error {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 1.25rem 1.25rem;
  color: var(--ink);
  font-size: var(--fs-body);
}
.widget-error a { color: var(--ink); text-decoration: underline; }
.widget-error[hidden] { display: none; }

/* Toggle-style chip group used for anchor (Q3): identical chip visuals,
   exactly one of two can be pressed. */
.anchor-toggle { display: flex; flex-wrap: wrap; gap: 0.55rem; }

/* The widget itself was split into its own section (separate from
   .widget-section, now used only by _video.html.erb) so the two could
   become distinct partials without changing the wireframe's total vertical
   rhythm: zero padding here, .video-facade's own 3rem top margin plus the
   video section's 7rem bottom padding reproduce the original spacing. */
.widget-block { padding: 0; }

/* Honeypot field (ET2) — kept in the layout flow (not display:none) so it
   still gets filled by naive bots, but invisible and unreachable for people. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* interim stock imagery (functional additions) */
.clara-photo--img { padding: 0; overflow: hidden; }
.clara-photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-frame--poster { background-size: cover; background-position: center; }
.video-frame--poster .video-ph-label { background: var(--scrim); color: #FCFAF4; padding: .2rem .6rem; border-radius: 6px; }
/* Cal.com lazy embed (DT5) */
/* 라이브 전환 후에는 placeholder 치장(점선 테두리·회색 배경·안쪽 패딩)을 걷어
   iframe이 카드 폭을 그대로 쓰게 한다 (2026-07-27 모바일 실예약 검수) */
.cal-embed--live {
  min-height: 560px;
  border: 0;
  background: transparent;
  padding: 0;
}
.cal-fallback { margin-top: .75rem; font-size: .875rem; color: var(--stone); }
.cal-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cal-fallback a:hover { color: var(--terracotta); }

/* privacy page — minimal type conformance (Fraunces headings + measure) */
.privacy-page { padding: 4rem 1.25rem 6rem; max-width: 44rem; }
.privacy-page h1 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.privacy-page h2 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: var(--fs-lead);
  margin: 2.5rem 0 0.75rem;
}
.privacy-page p, .privacy-page li { margin-bottom: 0.75rem; }
.privacy-page ul { padding-left: 1.25rem; }
.privacy-page a { color: var(--ink); }
.privacy-page .legal-notice {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 1rem 0;
}
.privacy-page .legal-notice p { margin-bottom: 0.15rem; }

/* ————— /alunos (students-only booking, option B) ————— */
.alunos-page { padding: 4rem 1.25rem 6rem; max-width: 46rem; }
.alunos-page h1 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.alunos-sub { color: var(--stone); margin-bottom: 2rem; max-width: 34rem; }
.alunos-error { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--terracotta-dark); }
.alunos-help { margin-top: 2rem; font-size: var(--fs-small); color: var(--stone); }
.alunos-help a, .alunos-page .cal-fallback a { color: var(--ink); }

/* placeholder testimonial marker (removed when real quotes arrive) */
.testi-tag { font-size: 0.75rem; color: var(--stone); border: 1px solid var(--border); border-radius: 999px; padding: 0 .5rem; margin-left: .4rem; vertical-align: middle; }