/* index_v2 — the sections added on top of main.css
   ================================================
   No new design system. Everything here spends the variables main.css already
   defines, keeps the hairline-and-whitespace vocabulary, and adds no icons,
   no cards and no gradients. Loaded only by index_v2.html so the live page is
   untouched. */

/* ── Hero footnote ────────────────────────────────────────────
   The 12.41% carries an asterisk now, and an asterisk without its note is
   worse than no asterisk. */
.hero-note {
  margin: 14px 0 0; max-width: 34rem;
  font-size: 13.5px; line-height: 1.5; color: var(--sky-3);
}
.hero-note sup { margin-right: 2px; }
.stat-line sup { font-size: .62em; vertical-align: super; margin-left: 1px; }

/* ── Platform flow ────────────────────────────────────────────
   Five layers as one falling line. The rule down the left is the flow; the
   dot on each step is where a layer sits on it. On a phone it is already
   vertical, so nothing needs to change but the spacing. */
.flow { list-style: none; margin: 0 auto; padding: 0 0 0 30px; max-width: 780px; position: relative; }
.flow::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px;
  width: 1px; background: var(--sky-line);
}
.flow-step { position: relative; padding: 0 0 clamp(30px, 4vw, 44px); }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before {
  content: ""; position: absolute; left: -30px; top: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--sky-line); background: var(--glow);
}
.flow-tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--glow);
}
[data-lang="ko"] .flow-tag { letter-spacing: .04em; text-transform: none; }
.flow-step h3 { margin: 0 0 4px; font-size: clamp(20px, 2.4vw, 25px); color: var(--sky); }
.flow-src { margin: 0 0 8px; font-size: 14px; color: var(--sky-3); }
.flow-say { margin: 0; max-width: 46rem; color: var(--sky-2); }
.flow-loop {
  max-width: 780px; margin: clamp(26px, 3vw, 36px) auto 0; padding-left: 30px;
  font-size: 15px; color: var(--sky-3);
}

/* ── Service modes ────────────────────────────────────────────
   Two questions side by side on a wide screen, stacked on a narrow one. The
   multiplication at the end is the point, so it gets its own line. */
.modes { display: grid; gap: clamp(34px, 4vw, 56px); max-width: 980px; margin-inline: auto; }
@media (min-width: 860px) { .modes { grid-template-columns: 1.15fr 1fr; } }
.mode-q {
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--sky-line);
  font-size: 15px; color: var(--sky); font-weight: 500;
}
.mode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.mode-list li { font-size: 15.5px; line-height: 1.55; color: var(--sky-2); }
.mode-list b { display: block; margin-bottom: 3px; font-weight: 600; color: var(--sky); }
.mode-sum {
  max-width: 980px; margin: clamp(34px, 4vw, 52px) auto 8px;
  text-align: center; font-size: 15px; color: var(--sky-3);
}
.mode-sum b {
  display: block; margin-bottom: 4px;
  font-size: clamp(30px, 4vw, 42px); font-weight: 200;
  letter-spacing: -.03em; color: var(--sky);
}

/* ── What shipped in the platform ─────────────────────────────
   A list, not a feature grid: no boxes, no icons, one hairline each. */
.ships {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 760px; display: grid; gap: 0;
}
.ships li {
  padding: 15px 0 15px 26px; position: relative;
  border-top: 1px solid var(--sky-line);
  font-size: 16px; color: var(--sky-2);
}
.ships li:last-child { border-bottom: 1px solid var(--sky-line); }
.ships li::before {
  content: ""; position: absolute; left: 4px; top: 24px;
  width: 6px; height: 1px; background: var(--glow);
}

/* ── Deployment blueprint ─────────────────────────────────────*/
.deploy { display: grid; gap: clamp(40px, 5vw, 64px); max-width: 1000px; margin-inline: auto; }
@media (min-width: 880px) { .deploy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 879px) {
  .deploy-col + .deploy-col { border-top: 1px solid var(--sky-line); padding-top: clamp(34px, 5vw, 48px); }
}
.deploy-kind {
  margin: 0 0 10px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sky-3);
}
[data-lang="ko"] .deploy-kind { letter-spacing: .02em; text-transform: none; font-size: 14px; }
.scope-tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px;
  border: 1px solid var(--sky-line); border-radius: 980px;
  font-size: 11.5px; letter-spacing: .02em; text-transform: none; color: var(--glow);
}
.deploy-col h3 { margin: 0 0 20px; font-size: clamp(20px, 2.3vw, 24px); color: var(--sky); }
.deploy-steps { margin: 0; padding: 0 0 0 1.35em; display: grid; gap: 12px; }
.deploy-steps li { font-size: 15.5px; line-height: 1.55; color: var(--sky-2); }
.deploy-steps li::marker { color: var(--sky-3); font-variant-numeric: tabular-nums; }
.deploy-say {
  margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid var(--sky-line);
  font-size: 15px; color: var(--sky-3);
}

/* ── Roadmap ──────────────────────────────────────────────────
   Horizontal on a wide screen, a vertical timeline on a narrow one. The
   arrows are pseudo-elements so they never end up in the accessibility tree
   or in a copied selection. */
.road {
  list-style: none; margin: 0 auto clamp(40px, 5vw, 60px); padding: 0;
  max-width: 1040px; display: grid; gap: 22px;
}
@media (min-width: 900px) { .road { grid-template-columns: repeat(4, 1fr); gap: 30px; } }
.road li { position: relative; padding-top: 16px; border-top: 1px solid var(--sky-line); font-size: 15px; color: var(--sky-2); }
.road li b { display: block; margin-bottom: 5px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); font-weight: 500; }
[data-lang="ko"] .road li b { letter-spacing: .03em; text-transform: none; font-size: 14px; }
@media (min-width: 900px) {
  .road li + li::before {
    content: "→"; position: absolute; left: -21px; top: 14px;
    color: var(--sky-3); font-size: 14px;
  }
}

/* ── Demonstrated vs next ─────────────────────────────────────
   Kept visibly apart. The whole point is that the right column has not
   happened yet. */
.status { display: grid; gap: clamp(30px, 4vw, 52px); max-width: 900px; margin-inline: auto; }
@media (min-width: 780px) { .status { grid-template-columns: 1fr 1fr; } }
.status-head {
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--sky-line);
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
}
[data-lang="ko"] .status-head { letter-spacing: .02em; text-transform: none; font-size: 14.5px; }
.status-head.done { color: var(--glow); }
.status-head.next { color: var(--sky-3); }
.status-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.status-col li { font-size: 15.5px; color: var(--sky-2); }
.status-col .next ~ ul li,
.status-head.next + ul li { color: var(--sky-3); }

@media (prefers-reduced-motion: reduce) {
  .flow-step, .mode-axis, .deploy-col, .road, .status-col { opacity: 1; transform: none; }
}

/* ── Headline measure for the two new sections ────────────────
   `.mid` is 720px, tuned for the original headlines. The Korean lines here
   are longer — "공간에 따라 운영 방식이 달라집니다." measures 875px at this size —
   so the authored two-line break was collapsing into three. Widen the
   headline's measure for these sections only, and keep the paragraphs at the
   reading width they were set for. */
#platform .mid, #modes .mid, #learning .mid { max-width: 920px; }
#platform .mid .lede, #modes .mid .lede, #learning .mid .lede { max-width: 760px; margin-inline: auto; }
#platform .mid .eyebrow, #modes .mid .eyebrow, #learning .mid .eyebrow { max-width: 760px; margin-inline: auto; }

/* The platform lede carries an authored two-line break. Its first line
   measures 897px, so it needs the wider measure and only holds above about
   1000px; below that the break is dropped and the text wraps on its own. */
#platform .mid .lede { max-width: 920px; }
.lede br.wide { display: none; }
@media (min-width: 1000px) { .lede br.wide { display: inline; } }

/* `.band p` in main.css is one element more specific than any of these class
   selectors and silently replaces their margins — including the `auto` sides
   that centre them. Every paragraph added here that needs centring has to
   out-specify it, or it sits flush left in the wrap instead. */
.band .flow-loop { margin: clamp(26px, 3vw, 36px) auto 0; }
.band .mode-sum  { margin: clamp(34px, 4vw, 52px) auto 8px; }
.band .hero-note { margin: 14px 0 0; }
.band .flow-say  { margin: 0; }
.band .flow-src  { margin: 0 0 8px; }
.band .deploy-say { margin: 22px 0 0; }

/* The chart's vertical dimension had neither an axis nor a name. */
.chart .y-lab { font-size: 14px; fill: var(--sky-3); }

/* The modes lede carries an authored break whose first line measures 900px. */
#modes .mid .lede { max-width: 920px; }

/* Authored breaks are used in a few notes and ledes now, not only the hero
   intro; the same width rule applies to all of them. */
.note br.wide, .figure-cap br.wide, .note-sky br.wide { display: none; }
@media (min-width: 1000px) {
  .note br.wide, .figure-cap br.wide, .note-sky br.wide { display: inline; }
}

/* One paragraph needs its two sentences on two lines, and the first of them
   measures 950px — wider than the 720px reading measure the ledes use. Given
   its own width, and its break held back until the column can actually hold
   it, so it never lands as three lines with an orphan. */
#problem .mid { max-width: 980px; }
#problem .mid .eyebrow, #problem .mid h2 { max-width: 720px; margin-inline: auto; }
.wide-lede { max-width: 980px; margin-inline: auto; }
.wide-lede br.wide { display: none; }
@media (min-width: 1060px) { .wide-lede br.wide { display: inline; } }