/* components.css — 컴포넌트 9개. 클래스 ns-<component>__<part>, 상태는 data-*. 토큰만 참조한다.
   애니메이션은 transform·opacity만(기획 11절). 정적 상태를 여기서 정하고 움직임은 GSAP가 준다. */

/* ───────── 키네틱 텍스트 ───────── */
.ns-kinetic { color: var(--ns-color-fg-neutral); }
.ns-kinetic__line { display: block; }
.ns-kinetic__word, .ns-kinetic__char { display: inline-block; }
.ns-kinetic[data-tone="paper"]     { color: var(--ns-color-fg-neutral-inverted); }
.ns-kinetic[data-tone="noise"]     { color: var(--ns-color-fg-noise); }
.ns-kinetic[data-tone="signal"]    { color: var(--ns-color-fg-brand-contrast); }
.ns-kinetic[data-tone="warning"]   { color: var(--ns-color-fg-critical); }
.ns-kinetic[data-tone="confirmed"] { color: var(--ns-color-fg-informative); }
/* hero·display 크기는 원색을 쓴다 (대비 검사: hero/display 전용) */
.ns-kinetic.ns-type-hero[data-tone="signal"],    .ns-kinetic.ns-type-display[data-tone="signal"]    { color: var(--ns-color-fg-brand); }
.ns-kinetic.ns-type-hero[data-tone="warning"],   .ns-kinetic.ns-type-display[data-tone="warning"]   { color: var(--ns-color-fg-critical-vivid); }
.ns-kinetic.ns-type-hero[data-tone="confirmed"], .ns-kinetic.ns-type-display[data-tone="confirmed"] { color: var(--ns-color-fg-informative-vivid); }
/* night 섹션: 본문 크기는 on-night 토큰, 원색은 그대로 */
[data-tone="night"] .ns-kinetic { color: var(--ns-color-fg-neutral-inverted); }
[data-tone="night"] .ns-kinetic[data-tone="noise"]     { color: var(--ns-color-fg-noise); }
[data-tone="night"] .ns-kinetic[data-tone="signal"]    { color: var(--ns-color-fg-brand-on-night); }
[data-tone="night"] .ns-kinetic[data-tone="warning"]   { color: var(--ns-color-fg-critical-on-night); }
[data-tone="night"] .ns-kinetic[data-tone="confirmed"] { color: var(--ns-color-fg-informative-on-night); }
[data-tone="night"] .ns-kinetic.ns-type-hero[data-tone="signal"],    [data-tone="night"] .ns-kinetic.ns-type-display[data-tone="signal"]    { color: var(--ns-color-fg-brand-on-night); }
[data-tone="night"] .ns-kinetic.ns-type-hero[data-tone="warning"],   [data-tone="night"] .ns-kinetic.ns-type-display[data-tone="warning"]   { color: var(--ns-color-fg-critical-on-night); }
[data-tone="night"] .ns-kinetic.ns-type-hero[data-tone="confirmed"], [data-tone="night"] .ns-kinetic.ns-type-display[data-tone="confirmed"] { color: var(--ns-color-fg-informative-on-night); }
/* 시세 방향 — 유일한 유채색. 등락 숫자에만 쓴다 */
.ns-kinetic[data-tone="up"]   { color: var(--ns-color-fg-up); }
.ns-kinetic[data-tone="down"] { color: var(--ns-color-fg-down); }
.ns-kinetic.ns-type-hero[data-tone="up"],   .ns-kinetic.ns-type-display[data-tone="up"]   { color: var(--ns-color-fg-up-vivid); }
.ns-kinetic.ns-type-hero[data-tone="down"], .ns-kinetic.ns-type-display[data-tone="down"] { color: var(--ns-color-fg-down-vivid); }
[data-tone="night"] .ns-kinetic[data-tone="up"]   { color: var(--ns-color-fg-up-on-night); }
[data-tone="night"] .ns-kinetic[data-tone="down"] { color: var(--ns-color-fg-down-on-night); }
[data-tone="night"] .ns-kinetic.ns-type-hero[data-tone="up"],   [data-tone="night"] .ns-kinetic.ns-type-display[data-tone="up"]   { color: var(--ns-color-fg-up-vivid); }
[data-tone="night"] .ns-kinetic.ns-type-hero[data-tone="down"], [data-tone="night"] .ns-kinetic.ns-type-display[data-tone="down"] { color: var(--ns-color-fg-down-vivid); }
/* 문제 재정의: 타이핑·취소선 (기획 6절) */
.ns-kinetic__word[data-decoration="strike"] {
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--ns-color-fg-critical);
  color: var(--ns-color-fg-noise);
}
.ns-kinetic__word[data-decoration="typed"]::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin-left: 0.05em;
  vertical-align: -0.1em;
  background: currentColor;
}

/* ───────── 시장 정보 오브젝트 ───────── */
.ns-event {
  display: inline-flex;
  align-items: center;
  gap: var(--ns-dimension-x2);
  padding: var(--ns-dimension-x2) var(--ns-dimension-x3);
  border: 1px solid var(--ns-color-stroke-neutral-weak);
  border-radius: var(--ns-radius-r2);
  background: var(--ns-color-bg-layer-default);
  color: var(--ns-color-fg-neutral);
  font-size: var(--ns-font-size-t6);
  line-height: var(--ns-line-height-t6);
  white-space: nowrap;
  transform-origin: center;
}
.ns-event__icon { --ns-icon-size: 20px; color: var(--ns-color-fg-neutral-subtle); }
.ns-event__value { font-weight: var(--ns-font-weight-medium); }
.ns-event__time  { color: var(--ns-color-fg-neutral-subtle); font-size: var(--ns-font-size-t4); }
.ns-event[data-kind="price"] .ns-event__value,
.ns-event[data-kind="candle"] .ns-event__value { color: var(--ns-color-fg-neutral-muted); }
.ns-event__value[data-dir="up"]   { color: var(--ns-color-fg-up) !important; }   /* 상태(noise·signal)와 무관하게 방향색 유지 */
.ns-event__value[data-dir="down"] { color: var(--ns-color-fg-down) !important; }
[data-tone="night"] .ns-event__value[data-dir="up"]   { color: var(--ns-color-fg-up-on-night) !important; }
[data-tone="night"] .ns-event__value[data-dir="down"] { color: var(--ns-color-fg-down-on-night) !important; }
/* noise: 정리되지 않은 정보 — 낮은 채도, 작게 */
.ns-event[data-state="noise"] {
  border-color: var(--ns-color-stroke-neutral-subtle);
  background: transparent;
  color: var(--ns-color-fg-noise);
}
.ns-event[data-state="noise"] .ns-event__icon,
.ns-event[data-state="noise"] .ns-event__time,
.ns-event[data-state="noise"] .ns-event__value { color: var(--ns-color-fg-noise); }
/* filtered: 걸러진 정보 — 화면 밖으로 낙하하기 직전 */
.ns-event[data-state="filtered"] {
  border-color: transparent;
  background: transparent;
  color: var(--ns-color-fg-disabled);
  opacity: 0.45;
  text-decoration: line-through;
}
.ns-event[data-state="filtered"] .ns-event__icon,
.ns-event[data-state="filtered"] .ns-event__time,
.ns-event[data-state="filtered"] .ns-event__value { color: var(--ns-color-fg-disabled); }
/* matched: 보유 종목과 연결됨 */
.ns-event[data-state="matched"] {
  border-color: var(--ns-color-stroke-brand-weak);
  background: var(--ns-color-bg-brand-weak);
}
.ns-event[data-state="matched"] .ns-event__icon { color: var(--ns-color-fg-brand-contrast); }
/* signal: 사용자에게 중요 — 크기와 굵기 증가 */
.ns-event[data-state="signal"] {
  border: 2px solid var(--ns-color-stroke-brand-solid);
  background: var(--ns-color-bg-layer-default);
  color: var(--ns-color-fg-brand-contrast);
  font-size: var(--ns-font-size-t8);
  line-height: var(--ns-line-height-t8);
  font-weight: var(--ns-font-weight-bold);
  padding: var(--ns-dimension-x3) var(--ns-dimension-x5);
  box-shadow: var(--ns-shadow-s2);
}
.ns-event[data-state="signal"] .ns-event__icon { --ns-icon-size: 24px; color: var(--ns-color-fg-brand-contrast); }
.ns-event[data-state="signal"] .ns-event__value { color: var(--ns-color-fg-neutral); }
/* night 위 */
[data-tone="night"] .ns-event { background: var(--ns-color-palette-static-white-alpha-50); border-color: var(--ns-color-palette-static-white-alpha-200); color: var(--ns-color-fg-neutral-inverted); }
[data-tone="night"] .ns-event .ns-event__icon, [data-tone="night"] .ns-event .ns-event__time { color: var(--ns-color-fg-noise); }
[data-tone="night"] .ns-event[data-state="noise"] { background: transparent; border-color: var(--ns-color-palette-static-white-alpha-100); color: var(--ns-color-fg-noise); }
[data-tone="night"] .ns-event[data-state="filtered"] { color: var(--ns-color-palette-gray-500); border-color: transparent; }
[data-tone="night"] .ns-event[data-state="matched"] { background: var(--ns-color-palette-static-white-alpha-100); border-color: var(--ns-color-palette-gray-600); }
[data-tone="night"] .ns-event[data-state="matched"] .ns-event__icon { color: var(--ns-color-fg-brand-on-night); }
[data-tone="night"] .ns-event[data-state="signal"] { background: var(--ns-color-palette-static-white-alpha-200); border-color: var(--ns-color-fg-neutral-inverted); color: var(--ns-color-fg-neutral-inverted); box-shadow: none; }
[data-tone="night"] .ns-event[data-state="signal"] .ns-event__icon { color: var(--ns-color-fg-neutral-inverted); }
[data-tone="night"] .ns-event[data-state="signal"] .ns-event__value { color: var(--ns-color-fg-neutral-inverted); }

/* ───────── 태그 ───────── */
.ns-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--ns-dimension-x3);
  border-radius: var(--ns-radius-full);
  font-size: var(--ns-font-size-t5);
  line-height: 1;
  font-weight: var(--ns-font-weight-medium);
  white-space: nowrap;
  background: var(--ns-color-bg-neutral-weak-alpha);
  color: var(--ns-color-fg-neutral);
}
.ns-tag[data-variant="stock"] { background: var(--ns-color-bg-brand-weak); color: var(--ns-color-fg-brand-contrast); }
.ns-tag[data-variant="impact"] { font-weight: var(--ns-font-weight-bold); }
.ns-tag[data-variant="impact"][data-tone="warning"]   { background: var(--ns-color-bg-critical-weak);    color: var(--ns-color-fg-critical-contrast); }
.ns-tag[data-variant="impact"][data-tone="signal"]    { background: var(--ns-color-bg-brand-weak);       color: var(--ns-color-fg-brand-contrast); }
.ns-tag[data-variant="impact"][data-tone="confirmed"] { background: var(--ns-color-bg-informative-weak); color: var(--ns-color-fg-informative-contrast); border: 1px solid var(--ns-color-stroke-informative-weak); } /* 모노톤: 근거 칩은 테두리, 위험 칩은 채움 */
.ns-tag[data-variant="time"] { font-family: var(--ns-font-family-mono); font-variant-numeric: tabular-nums; background: transparent; border: 1px solid var(--ns-color-stroke-neutral-weak); color: var(--ns-color-fg-neutral-muted); }
/* 구현 완료 / 기획 — 색만이 아니라 채움·점선으로도 구분(기획 10절) */
.ns-tag[data-variant="status"][data-status="implemented"] { background: var(--ns-color-bg-neutral-solid); color: var(--ns-color-fg-neutral-inverted); font-size: var(--ns-font-size-t4); }
.ns-tag[data-variant="status"][data-status="planned"] { background: transparent; border: 1.5px dashed var(--ns-color-stroke-neutral-solid); color: var(--ns-color-fg-neutral-muted); font-size: var(--ns-font-size-t4); }
/* 잉크 solid 칩: paper 글자 */
.ns-tag[data-tone="brand-solid"] { background: var(--ns-color-bg-brand-solid); color: var(--ns-color-fg-neutral-inverted); font-weight: var(--ns-font-weight-bold); font-size: var(--ns-font-size-t7); height: 40px; }

/* ───────── 기능 설명 ───────── */
.ns-feature-list__item {
  display: grid;
  grid-template-columns: var(--ns-dimension-x20) calc(var(--ns-dimension-x20) * 4 + var(--ns-dimension-x5)) minmax(0, 1fr);
  align-items: center;
  min-height: calc(var(--ns-dimension-x30) + var(--ns-dimension-x1));
}
.ns-feature-list__number {
  font-size: var(--ns-font-size-t6);
  line-height: var(--ns-line-height-t6);
  letter-spacing: 0.08em;
  color: var(--ns-color-fg-neutral-subtle);
}
.ns-feature-list__name {
  font-size: var(--ns-font-size-t12);
  line-height: var(--ns-line-height-t12);
  letter-spacing: -0.035em;
  font-weight: var(--ns-font-weight-bold);
}
.ns-feature-list__description {
  font-size: var(--ns-font-size-t8);
  line-height: var(--ns-line-height-t8);
  color: var(--ns-color-fg-neutral-subtle);
}
.ns-feature-heading__index {
  margin-bottom: var(--ns-dimension-x7);
  font-size: var(--ns-font-size-t6);
  line-height: var(--ns-line-height-t6);
  letter-spacing: 0.14em;
  color: var(--ns-color-fg-neutral-subtle);
}
.ns-feature-heading__title {
  font-size: var(--ns-font-size-t14);
  line-height: var(--ns-line-height-t14);
  letter-spacing: -0.04em;
  font-weight: var(--ns-font-weight-heavy);
}
.ns-analysis-list { margin: 0; }
.ns-analysis-list__item {
  min-height: var(--ns-dimension-x30);
  display: grid;
  align-content: center;
  gap: var(--ns-dimension-x2_5);
}
.ns-analysis-list__item dt {
  font-size: var(--ns-font-size-t5);
  line-height: var(--ns-line-height-t5);
  color: var(--ns-color-fg-neutral-subtle);
}
.ns-analysis-list__item dd {
  margin: 0;
  font-size: var(--ns-font-size-t9);
  line-height: var(--ns-line-height-t9);
  font-weight: var(--ns-font-weight-bold);
}
.ns-next-event {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--ns-dimension-x6);
}
.ns-next-event span { font-size: var(--ns-font-size-t6); color: var(--ns-color-fg-neutral-subtle); }
.ns-next-event strong { font-size: var(--ns-font-size-t9); }

/* 야간 배경 위 태그: 잉크 채움 칩은 반전, 투명 칩은 paper 글자 */
[data-tone="night"] .ns-tag[data-tone="brand-solid"],
[data-tone="night"] .ns-tag[data-variant="status"][data-status="implemented"] { background: var(--ns-color-fg-neutral-inverted); color: var(--ns-color-fg-neutral); }
[data-tone="night"] .ns-tag[data-variant="time"] { color: var(--ns-color-fg-neutral-inverted); border-color: var(--ns-color-palette-gray-600); }
[data-tone="night"] .ns-tag[data-variant="status"][data-status="planned"] { color: var(--ns-color-fg-neutral-inverted); border-color: var(--ns-color-palette-gray-500); }

/* ───────── 포트폴리오 ───────── */
.ns-portfolio {
  display: grid;
  gap: var(--ns-dimension-x4);
  width: 100%;
  max-width: 760px;
}
.ns-portfolio__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 96px;
  align-items: center;
  gap: var(--ns-dimension-x5);
  font-size: var(--ns-font-size-t9);
  line-height: var(--ns-line-height-t9);
}
.ns-portfolio__name { font-weight: var(--ns-font-weight-medium); }
.ns-portfolio__bar { display: block; height: 14px; border-radius: var(--ns-radius-full); background: var(--ns-color-bg-neutral-weak-alpha); overflow: hidden; }
.ns-portfolio__fill { display: block; height: 100%; width: calc(var(--weight, 0) * 1%); border-radius: inherit; background: var(--ns-color-bg-neutral-solid-muted); transform-origin: left center; }
.ns-portfolio__weight { text-align: right; font-weight: var(--ns-font-weight-medium); }
.ns-portfolio__row[data-highlight="true"] .ns-portfolio__name,
.ns-portfolio__row[data-highlight="true"] .ns-portfolio__weight { color: var(--ns-color-fg-brand-contrast); font-weight: var(--ns-font-weight-bold); }
.ns-portfolio__row[data-highlight="true"] .ns-portfolio__fill { background: var(--ns-color-bg-brand-solid); }
.ns-portfolio__row[data-highlight="false"] { color: var(--ns-color-fg-noise); }
.ns-portfolio__row[data-highlight="false"] .ns-portfolio__fill { background: var(--ns-color-bg-disabled); }
.ns-portfolio__summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--ns-dimension-x4);
  padding-top: var(--ns-dimension-x5);
  border-top: 1px solid var(--ns-color-stroke-neutral-muted);
  font-size: var(--ns-font-size-t9);
  font-weight: var(--ns-font-weight-bold);
}
.ns-portfolio__summary-value { font-size: var(--ns-font-size-t14); line-height: 1; color: var(--ns-color-fg-brand-contrast); }
[data-tone="night"] .ns-portfolio__row[data-highlight="true"] .ns-portfolio__name,
[data-tone="night"] .ns-portfolio__row[data-highlight="true"] .ns-portfolio__weight,
[data-tone="night"] .ns-portfolio__summary-value { color: var(--ns-color-fg-brand-on-night); }
[data-tone="night"] .ns-portfolio__bar { background: var(--ns-color-palette-static-white-alpha-100); }
[data-tone="night"] .ns-portfolio__fill { background: var(--ns-color-palette-gray-600); }
[data-tone="night"] .ns-portfolio__row[data-highlight="true"] .ns-portfolio__fill { background: var(--ns-color-fg-neutral-inverted); }

/* ───────── 브리핑 카드 ───────── */
.ns-briefing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ns-dimension-x6);
  padding: var(--ns-dimension-x6) var(--ns-dimension-x8);
  border: 1px solid var(--ns-color-stroke-neutral-weak);
  border-radius: var(--ns-radius-r4);
  background: var(--ns-color-bg-layer-default);
  color: var(--ns-color-fg-neutral);
  box-shadow: var(--ns-shadow-s1);
  width: 100%;
  max-width: 1100px;
}
.ns-briefing__index { font-size: var(--ns-font-size-t9); line-height: var(--ns-line-height-t9); color: var(--ns-color-fg-neutral-subtle); font-weight: var(--ns-font-weight-medium); padding-top: 2px; }
.ns-briefing__body { display: grid; gap: var(--ns-dimension-x3); }
.ns-briefing__title { font-size: var(--ns-font-size-t9); line-height: var(--ns-line-height-t9); font-weight: var(--ns-font-weight-bold); }
.ns-briefing__tags { display: flex; flex-wrap: wrap; gap: var(--ns-dimension-x2); }
.ns-briefing__meta { display: flex; flex-wrap: wrap; gap: var(--ns-dimension-x2) var(--ns-dimension-x8); margin: 0; }
.ns-briefing__meta > div { display: flex; gap: var(--ns-dimension-x2); align-items: baseline; font-size: var(--ns-font-size-t6); line-height: var(--ns-line-height-t6); }
.ns-briefing__meta dt { color: var(--ns-color-fg-neutral-subtle); }
.ns-briefing__meta dd { margin: 0; font-weight: var(--ns-font-weight-medium); }
.ns-briefing__meta dd[data-tone="signal"]    { color: var(--ns-color-fg-brand-contrast); }
.ns-briefing__meta dd[data-tone="warning"]   { color: var(--ns-color-fg-critical); }
.ns-briefing__meta dd[data-tone="confirmed"] { color: var(--ns-color-fg-informative); }
.ns-briefing__meta dd[data-tone="time"]      { color: var(--ns-color-fg-neutral-muted); }
.ns-briefing[data-status="planned"] { border-style: dashed; border-color: var(--ns-color-stroke-neutral-solid); box-shadow: none; }
/* 전체 화면으로 확장된 첫 번째 브리핑 (Scene 8) */
.ns-briefing[data-size="expanded"] { max-width: none; padding: var(--ns-dimension-x12) var(--ns-dimension-x14); gap: var(--ns-dimension-x10); border-radius: var(--ns-radius-r6); box-shadow: var(--ns-shadow-s3); }
.ns-briefing[data-size="expanded"] .ns-briefing__index { font-size: var(--ns-font-size-t13); line-height: var(--ns-line-height-t13); }
.ns-briefing[data-size="expanded"] .ns-briefing__body { gap: var(--ns-dimension-x6); }
.ns-briefing[data-size="expanded"] .ns-briefing__title { font-size: var(--ns-font-size-t14); line-height: var(--ns-line-height-t14); }
.ns-briefing[data-size="expanded"] .ns-briefing__meta > div { font-size: var(--ns-font-size-t9); line-height: var(--ns-line-height-t9); }
.ns-briefing[data-size="expanded"] .ns-tag { height: 40px; font-size: var(--ns-font-size-t7); padding: 0 var(--ns-dimension-x4); }

/* ───────── 근거 연결 ───────── */
.ns-evidence {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--ns-dimension-x24);
  align-items: center;
  width: 100%;
}
.ns-evidence__text { color: var(--ns-color-fg-neutral); }
.ns-evidence__ref {
  color: var(--ns-color-fg-informative);
  font-weight: var(--ns-font-weight-bold);
  border-bottom: 3px solid var(--ns-color-stroke-informative-solid);
  padding-bottom: 0.05em;
}
.ns-evidence__sources { display: grid; gap: var(--ns-dimension-x4); }
.ns-evidence__source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ns-dimension-x3);
  padding: var(--ns-dimension-x3) var(--ns-dimension-x4);
  border-left: 3px solid var(--ns-color-stroke-informative-weak);
  background: var(--ns-color-bg-layer-default);
  border-radius: 0 var(--ns-radius-r2) var(--ns-radius-r2) 0;
  font-size: var(--ns-font-size-t7);
  line-height: var(--ns-line-height-t7);
  font-weight: var(--ns-font-weight-medium);
}
.ns-evidence__source .ns-icon { --ns-icon-size: 24px; color: var(--ns-color-fg-informative); }
.ns-evidence__source-kind { font-size: var(--ns-font-size-t3); letter-spacing: 0.08em; color: var(--ns-color-fg-neutral-subtle); }
.ns-evidence__source[data-kind="time"] { border-left-color: var(--ns-color-stroke-neutral-weak); }
.ns-evidence__source[data-kind="time"] .ns-icon { color: var(--ns-color-fg-neutral-muted); }
.ns-evidence__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ns-evidence__links path { fill: none; stroke: var(--ns-color-stroke-informative-weak); stroke-width: 2; }
[data-tone="night"] .ns-evidence__text { color: var(--ns-color-fg-neutral-inverted); }
[data-tone="night"] .ns-evidence__ref { color: var(--ns-color-fg-informative-on-night); border-bottom-color: var(--ns-color-palette-gray-500); }
[data-tone="night"] .ns-evidence__source { background: var(--ns-color-palette-static-white-alpha-50); color: var(--ns-color-fg-neutral-inverted); border-left-color: var(--ns-color-palette-gray-600); }
[data-tone="night"] .ns-evidence__source .ns-icon { color: var(--ns-color-fg-informative-on-night); }
[data-tone="night"] .ns-evidence__links path { stroke: var(--ns-color-palette-gray-600); }

/* ───────── 챕터 인트로 (night 톤 섹션 안에서만 쓴다) ───────── */
.ns-chapter {
  display: grid;
  justify-items: center;
  gap: var(--ns-dimension-x8);
  text-align: center;
  color: var(--ns-color-fg-neutral-inverted);
}
.ns-chapter::before { content: ""; width: 64px; height: 4px; background: var(--ns-color-fg-neutral-inverted); }
.ns-chapter__eyebrow {
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t9);
  line-height: var(--ns-line-height-t9);
  letter-spacing: 0.24em;
  color: var(--ns-color-fg-brand-on-night);
}
.ns-chapter__eyebrow b { color: var(--ns-color-fg-neutral-inverted); font-weight: var(--ns-font-weight-bold); }
.ns-chapter__title { text-wrap: balance; }

/* ───────── 상시 UI: 진행선 + HUD (기획 5.4) ───────── */
.ns-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ns-color-bg-neutral-weak-alpha);
  z-index: var(--ns-z-floating);
}
.ns-progress__bar { display: block; height: 100%; width: calc(var(--progress, 0) * 100%); background: var(--ns-color-palette-gray-600); } /* paper·night 양쪽 위에 놓이므로 중간 회색 */
.ns-progress[data-static] { position: absolute; }
/* 표지 같은 간주에서는 상시 UI가 물러난다 */
.ns-hud, .ns-progress { transition: opacity 400ms var(--ns-timing-function-easing); }
.ns-hud[data-hidden="true"], .ns-progress[data-hidden="true"] { opacity: 0; pointer-events: none; }
.ns-hud {
  position: fixed;
  right: var(--ns-dimension-x6);
  bottom: var(--ns-dimension-x6);
  display: flex;
  align-items: center;
  gap: var(--ns-dimension-x4);
  z-index: var(--ns-z-floating);
  color: var(--ns-color-fg-neutral-subtle);
  font-family: var(--ns-font-family-mono);
  font-size: var(--ns-font-size-t3);
  letter-spacing: 0.12em;
}
.ns-hud[data-static] { position: absolute; }
.ns-hud__fullscreen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--ns-radius-r2);
  color: var(--ns-color-fg-neutral-muted);
  transition: background var(--ns-duration-color-transition) var(--ns-timing-function-easing);
}
.ns-hud__fullscreen:hover { background: var(--ns-color-bg-transparent-pressed); }
:fullscreen .ns-hud__fullscreen,
:-webkit-full-screen .ns-hud__fullscreen { display: none; }
[data-tone="night"] .ns-hud, .ns-hud[data-tone="night"] { color: var(--ns-color-fg-noise); }