/* logline — 스타일
 *
 * 색·서체·크기·이징은 전부 tokens.css 의 변수다(raw 색 0). px 로 남긴 값은 격자에서 나온 것뿐이다:
 * 24px 기준선(--spacing-stack) 의 배수, 20px 로그 행(--log-row), 1px 선. 미디어 쿼리에는 변수를 못 써서
 * 폭을 tokens.css 의 --breakpoint-md(768) · --breakpoint-lg(1024) 와 맞춰 숫자로 적었다.
 */

/* 한글이 섞이는 mono 라벨 — JetBrains Mono 에 한글이 없어 시스템 고딕으로 떨어지지 않게 Pretendard 를 뒤에 붙인다 */
:root {
  --font-label: var(--font-mono), var(--font-sans);
  --top-h: 56px;
}

/* ── 바탕 ─────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-ink-2) var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
    interpolate-size: allow-keywords;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
  word-break: keep-all;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure,
pre {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-mono--font-feature-settings);
  font-size: 1em;
}

sup {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: 0.45em;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  z-index: 10;
  top: calc(var(--spacing) * 2);
  left: var(--spacing-margin);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: calc(var(--spacing) * 4);
  background: var(--color-ink);
  color: var(--color-plate);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: max(var(--spacing-margin), env(safe-area-inset-left)) max(var(--spacing-margin), env(safe-area-inset-right));
}

/* mono 라벨 — `[ 00 ]` `FIG. B` 좌표·코드 */
.label,
.fig__tab,
.idx__l,
.tag,
.readout,
.toc,
.plate__meta,
.hist__at,
.hist__axis,
.leader__at,
.step__k,
.qa__code,
.feat__code,
.foot__in,
.app__bar,
.app__meta,
.app__run,
.app__rew,
.app__ticks,
.app__sum-k,
.app__facts dt,
.fields dt,
.price tbody th,
.plan__rows dt,
.price__per,
.copy {
  font-family: var(--font-label);
  font-feature-settings: var(--font-mono--font-feature-settings);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
  letter-spacing: 0.04em;
}

/* 넓은 자간(0.08em)은 짧은 대문자·숫자 코드에만 — 한글·소문자가 섞인 라벨에서는 글자가 흩어진다 */
.label__code,
.fig__tab > span:first-child,
.feat__code,
.qa__code,
.step__n,
.readout__k,
.hist__axis,
.leader__at {
  letter-spacing: var(--text-micro--letter-spacing);
}

/* 긴 mono 줄(판독값·결과 메타·꼬리) — 넓은 자간은 짧은 라벨에만. 문장 길이에서는 흩어져 읽힌다 */
.readout,
.app__meta,
.foot__in {
  letter-spacing: 0.02em;
}

/* ── 버튼 · 링크 ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--spacing-stack);
  border: 0;
  border-radius: var(--radius-none);
  background: var(--color-ink);
  color: var(--color-plate);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
  transition-duration: 0ms;
}

.btn--ghost {
  min-height: 40px;
  padding-inline: calc(var(--spacing) * 4);
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-size: var(--text-sm);
}

.btn--plate {
  background: var(--color-plate);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--color-ink-2);
  }

  .btn--ghost:hover {
    background: var(--color-plate);
  }

  .btn--plate:hover {
    background: var(--color-screen-ink);
  }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: 44px;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-thickness var(--motion-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link:hover {
    text-decoration-thickness: 2px;
  }
}

.cmd {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.cmd__p {
  color: var(--color-ink-2);
}

/* ── 상단 바 — 고정하지 않는다 ──────────────────────────────────────── */

.top {
  border-bottom: 1px solid var(--color-ink);
}

.top__in {
  display: flex;
  align-items: center;
  gap: var(--spacing-gutter);
  height: var(--top-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-height: 44px;
  text-decoration: none;
}

.brand__mark {
  width: 20px;
  height: 20px;
  flex: none;
}

.brand__word {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: 0.06em;
}

.toc {
  display: none;
}

.toc ol {
  display: flex;
  gap: calc(var(--spacing) * 2);
}

.toc a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: 44px;
  padding-inline: calc(var(--spacing) * 2);
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.toc__n {
  color: var(--color-ink-2);
}

.toc a[aria-current="true"] {
  text-decoration-line: underline;
}

@media (hover: hover) and (pointer: fine) {
  .toc a:hover {
    text-decoration-line: underline;
  }
}

.top__cta {
  margin-left: auto;
}

.top__cta-lg {
  display: none;
}

@media (min-width: 768px) {
  .toc {
    display: block;
  }

  .top__cta-lg {
    display: inline;
  }

  .top__cta-sm {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* 목차가 본문 칸(3열)에서 시작한다 — 페이지의 색인 칸 / 본문 칸 경계와 같은 선 */
  .top__in {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }

  .brand {
    grid-column: 1 / 3;
  }

  .toc {
    grid-column: 3 / 11;
    margin-left: calc(var(--spacing) * -2);
  }

  .top__cta {
    grid-column: 11 / 13;
    justify-self: end;
  }
}

@media (max-width: 767px) {
  :root {
    --top-h: 52px;
  }

  .btn--ghost {
    min-height: 44px;
    min-width: 64px;
  }
}

/* ── 00 hero — 가치 제안 + 상세도 콜라주 ─────────────────────────────── */

.hero {
  padding-block: var(--spacing-stack) calc(var(--spacing-stack) * 2);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--spacing-stack);
}

.label {
  color: var(--color-ink-2);
}

.label__code {
  color: var(--color-ink);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
}

.hero__head .display {
  margin-top: var(--spacing-stack);
}

.lede {
  margin-top: var(--spacing-stack);
  max-width: 30em;
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

.hero__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) var(--spacing-stack);
}

.readout {
  display: block;
  color: var(--color-ink-2);
}

.readout__n,
.readout__v {
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* 12단계로 바뀌는 숫자가 줄을 흔들지 않게 — 최종값 13자 폭을 미리 잡는다 */
.readout__n {
  display: inline-block;
  min-width: 13ch;
  text-align: right;
}

.readout__sep {
  margin-inline: calc(var(--spacing) * 1);
}

/* 좁은 폭에서 "MATCH" 와 "1" 이 갈라지지 않게 — 묶음 단위로만 줄을 바꾼다 */
.readout__g {
  white-space: nowrap;
}

@media (max-width: 1023px) {
  /* 모바일·태블릿: 명령줄·판독값은 콜라주 아래로 내려간다 */
  .hero__act {
    display: contents;
  }

  .hero__head {
    order: 1;
  }

  .hero__btn {
    order: 2;
    justify-self: start;
  }

  .collage {
    order: 3;
  }

  .hero__cmd {
    order: 4;
  }

  .readout {
    order: 5;
    margin-top: calc(var(--spacing-stack) * -1);
  }
}

@media (max-width: 767px) {
  .hero__head .display,
  .lede {
    margin-top: calc(var(--spacing) * 4);
  }

  .hero__btn {
    justify-self: stretch;
    min-height: 52px;
  }

  .hero__grid {
    row-gap: calc(var(--spacing) * 5);
  }

  .readout {
    margin-top: calc(var(--spacing) * -3);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: calc(var(--spacing-stack) * 2) calc(var(--spacing-stack) * 3);
  }

  .hero__grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--spacing-gutter);
    row-gap: 0;
  }

  .hero__head,
  .hero__act,
  .readout {
    grid-column: 1 / 6;
  }

  .hero__act {
    margin-top: calc(var(--spacing) * 10);
  }

  .readout {
    margin-top: var(--spacing-stack);
  }

  .collage {
    grid-column: 6 / 13;
    grid-row: 1 / 5;
  }
}

/* 콜라주 — 7열 × 24px 기준선. 조각은 교점에만 서고, 한 칸(24px)·한 열 단위로만 겹친다. 회전·그림자 0 */
.collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--spacing-stack);
  column-gap: var(--spacing-gutter);
  align-self: start;
}

.reg {
  position: absolute;
  z-index: 4;
  width: 11px;
  height: 11px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 11px;
  text-align: center;
}

.reg--tl {
  top: -12px;
  left: -12px;
}

.reg--tr {
  top: -12px;
  right: -12px;
}

.reg--bl {
  bottom: -12px;
  left: -12px;
}

.reg--br {
  bottom: -12px;
  right: -12px;
}

.fig {
  position: relative;
  min-width: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-edge);
}

.fig__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  height: var(--spacing-stack);
  padding-inline: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
}

.fig__tab > span:last-child {
  color: var(--color-ink-2);
}

.fig--a {
  grid-column: 1 / -1;
  grid-row: 1 / 5;
  z-index: 1;
}

.fig--d {
  grid-column: 6 / 8;
  grid-row: 4 / 9;
  z-index: 2;
}

.fig--b {
  grid-column: 1 / 6;
  grid-row: 6 / 18;
  z-index: 2;
}

/* 문장판 높이는 글줄 수에 따라 24px 칸 단위로 — 폭이 좁을수록 줄이 늘어 한 칸 더 쓴다 */
.fig--c {
  grid-column: 4 / 8;
  grid-row: 16 / span 6;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: var(--color-plate);
}

/* 메타 줄은 판 아래에 붙인다 — 폭에 따라 글줄이 달라져도 남는 칸이 "비어 보이지" 않고 여백이 된다 */
.plate__meta {
  margin-top: auto;
}

@media (min-width: 1024px) {
  .fig--c {
    grid-row: 16 / span 7;
  }
}

@media (min-width: 1440px) {
  .fig--c {
    grid-row: 16 / span 6;
  }
}

/* FIG. A — 밀도 띠 */
.strip {
  position: relative;
  height: calc(var(--spacing-stack) * 3);
}

.strip__svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-ink);
}

/* 확대 상자 — 03:12 (24시간의 13.33%) 를 둘러싸고, 지시선이 FIG. B 로 내려간다 */
.strip__zoom {
  position: absolute;
  top: calc(var(--spacing) * 1);
  bottom: 0;
  left: calc(13.33% - 12px);
  width: 24px;
  box-shadow: 0 0 0 1px var(--color-ink);
}

.strip__zoom::after,
.leader::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--color-ink);
}

.strip__zoom::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: var(--spacing-stack);
  background: var(--color-ink);
}

.strip__zoom::after {
  top: calc(100% + var(--spacing-stack) - 2px);
  left: calc(50% - 1px);
}

/* FIG. D — 24h 막대 */
.hist {
  position: relative;
  height: calc(var(--spacing-stack) * 3);
  padding-top: calc(var(--spacing) * 2);
}

.hist__svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-ink);
}

.hist__x,
.hist__y {
  position: absolute;
  background: var(--color-ink);
}

.hist__x {
  top: 0;
  bottom: 0;
  left: 13.33%;
  width: 1px;
}

.hist__y {
  top: calc(var(--spacing) * 2);
  left: 0;
  right: 0;
  height: 1px;
}

.hist__at {
  position: absolute;
  top: calc(var(--spacing) * 3);
  left: calc(13.33% + 20px);
  padding-inline: calc(var(--spacing) * 1);
  background: var(--color-bg);
}

.hist__axis {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--spacing-stack);
  padding-inline: calc(var(--spacing) * 1);
  border-top: 1px solid var(--color-ink);
  color: var(--color-ink-2);
}

/* FIG. B — 로그 발췌 (어두운 화면판) */
.fig--screen {
  background: var(--color-screen-bg);
  color: var(--color-screen-ink);
  --color-focus: var(--color-accent);
}

.fig--screen .fig__tab {
  border-bottom-color: var(--color-ink-2);
  color: var(--color-screen-dim);
}

.fig--screen .fig__tab > span:last-child {
  color: var(--color-screen-dim);
}

.log {
  padding-block: calc(var(--spacing) * 3);
  font-family: var(--font-mono);
  font-feature-settings: var(--font-mono--font-feature-settings);
  font-size: var(--text-log);
  line-height: var(--log-row);
  container-type: inline-size;
}

.ln {
  white-space: nowrap;
}

.ln > span,
.ln__msg > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ln__msg > span {
  display: block;
}

.log .ln {
  display: grid;
  grid-template-columns: 2ch 12ch 5ch 13ch minmax(0, 1fr);
  column-gap: 1ch;
  height: var(--log-row);
  padding-inline: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
}

.log .ln__mk {
  grid-column: 1;
  text-align: center;
}

.log .ln__ts {
  grid-column: 2;
}

.log .ln__lv {
  grid-column: 3;
}

.log .ln__svc {
  grid-column: 4;
}

.log .ln__msg {
  grid-column: 5;
}

/* 레벨은 색이 아니라 굵기로만 — 빨간 ERROR 금지(DESIGN 9) */
.ln__ts,
.ln .ln__lv {
  color: var(--color-screen-dim);
}

.ln--warn .ln__lv {
  color: var(--color-screen-ink);
  font-weight: var(--font-weight-medium);
}

.ln--error .ln__lv {
  color: var(--color-screen-ink);
  font-weight: 800;
}

.ln__svc {
  color: var(--color-screen-dim);
}

.log .ln__msg > .ln__short {
  display: none;
}

/* 원인 줄 — 형광 띠. 띠 위 글자는 잉크, 앞에 ▶ · ERROR 굵게(색만으로 구분하지 않는다) */
.ln--cause {
  position: relative;
  isolation: isolate;
  color: var(--color-on-accent);
  font-weight: var(--font-weight-semibold);
}

.ln--cause .ln__ts,
.ln--cause .ln__lv,
.ln--cause .ln__svc {
  color: var(--color-ink-2);
}

.ln--cause .ln__lv {
  color: var(--color-on-accent);
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-accent);
  clip-path: inset(0);
}

.log__win {
  height: calc(var(--log-row) * 8);
  overflow: hidden;
}

.log__tail {
  will-change: transform;
}

/* 원인 줄은 잘리면 안 된다 — 긴 판본(31자)이 다 들어가지 않는 폭이면 서비스 칸을 접고 짧은 판본으로 */
@container (max-width: 540px) {
  .log .ln {
    grid-template-columns: 2ch 12ch 5ch minmax(0, 1fr);
  }

  .log .ln__svc {
    display: none;
  }

  .log .ln__msg {
    grid-column: 4;
  }

  .log .ln__msg > .ln__long {
    display: none;
  }

  .log .ln__msg > .ln__short {
    display: block;
  }
}

/* 360px 급 폰 — 짧은 판본(18자)도 다 들어가도록 한 단계 작게. 줄 높이 20px 는 그대로 */
@container (max-width: 340px) {
  .log {
    font-size: 0.75rem;
  }
}

/* 지시선 — 원인 줄 오른쪽 끝에서 FIG. C 의 윗변까지. 세로 길이 = C 윗변(16행 × 24) − 원인 줄 중심(B 안 106px + B 윗변 5행 × 24) */
.leader--bc {
  position: absolute;
  top: calc(var(--spacing-stack) + var(--spacing) * 3 + var(--log-row) * 3.5);
  left: 100%;
  width: calc(var(--spacing-gutter) + 12px);
  height: calc(var(--spacing-stack) * 15 - (var(--spacing-stack) * 5 + var(--spacing-stack) + var(--spacing) * 3 + var(--log-row) * 3.5));
  border-top: 1px solid var(--color-ink);
  border-right: 1px solid var(--color-ink);
}

.leader--bc::after {
  right: -2px;
  bottom: -2px;
}

.leader__at {
  position: absolute;
  top: calc(var(--spacing-stack) * 4 + var(--spacing) * 3);
  left: calc(100% + var(--spacing-gutter) + 20px);
  display: flex;
  flex-direction: column;
  color: var(--color-ink-2);
  white-space: nowrap;
}

/* FIG. C — 문장판 */
.plate__text {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.plate__meta {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) 0;
  color: var(--color-ink-2);
}

/* 모바일 — 줄이지 않고 세로로 다시 쌓는다 */
@media (max-width: 767px) {
  .collage {
    display: flex;
    flex-direction: column;
  }

  .fig--a {
    order: 1;
  }

  .fig--b {
    order: 2;
    margin-top: var(--spacing-stack);
  }

  .fig--c {
    order: 3;
    margin-top: calc(var(--spacing) * -4);
    margin-left: calc(var(--spacing) * 4);
  }

  .fig--d {
    order: 4;
    margin-top: var(--spacing-stack);
  }

  .fig--a .fig__tab {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: var(--spacing-stack);
    border-bottom: 0;
    border-left: 1px solid var(--color-ink);
    background: var(--color-bg);
  }

  .fig--a .fig__tab > span:last-child {
    display: none;
  }

  .strip {
    height: var(--spacing-stack);
  }

  .strip__zoom {
    top: 0;
  }

  .log__win {
    height: calc(var(--log-row) * 3);
  }

  .leader--bc,
  .leader__at {
    display: none;
  }

  .plate__text {
    font-size: var(--text-base);
    line-height: 1.6;
  }

  .plate__meta {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .reg--bl,
  .reg--br {
    display: none;
  }
}

@media (min-width: 768px) {
  .fig--c {
    padding-bottom: calc(var(--spacing) * 3);
  }
}

@media (min-width: 1200px) {
  .plate__text {
    font-size: var(--text-lg);
  }
}

/* ── 행 — 페이지는 번호 매긴 행의 목록이다 ─────────────────────────── */

.row {
  border-top: 1px solid var(--color-ink);
  padding-block: var(--spacing-row);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(var(--spacing) * 4);
}

.idx {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 8);
}

.idx__n {
  font-family: var(--font-display);
  font-size: var(--text-index);
  font-weight: var(--font-weight-medium);
  line-height: var(--text-index--line-height);
  font-variant-numeric: tabular-nums;
}

/* 한글 낱말이 주인 라벨 — 11px mono 대문자 자간은 한글에서 흩어져 보여 한 단계 키우고 자간을 줄인다 */
.idx__l,
.toc,
.price tbody th,
.plan__rows dt,
.app__sum-k {
  font-size: var(--text-log);
  letter-spacing: 0.02em;
}

.idx__l {
  color: var(--color-ink-2);
}

.body {
  grid-column: 1 / -1;
  min-width: 0;
}

.h2 {
  margin-bottom: calc(var(--spacing-stack) * 2);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-2xl--line-height);
  letter-spacing: var(--tracking-tight);
}

@media (max-width: 1023px) {
  .idx__l::before {
    content: "— ";
  }

  /* 1열에서는 색인 줄이 제목 바로 위에 온다 — 제목 아래 간격을 위(32)보다 좁혀 제목이 제 내용에 붙게 한다 */
  .h2,
  .cta__say {
    margin-bottom: var(--spacing-stack);
  }

  .proof__head {
    row-gap: calc(var(--spacing) * 8);
    margin-bottom: var(--spacing-stack);
  }
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: calc(var(--spacing) * 5);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }

  /* 색인 칸 — 옆에 본문 칸이 있을 때만 sticky */
  .idx {
    grid-column: 1 / 3;
    position: sticky;
    top: var(--spacing-stack);
    align-self: start;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    margin-bottom: 0;
  }

  .body {
    grid-column: 3 / -1;
  }
}

/* ── 01 제품 화면 — HTML 로 그린 가상 검색 화면 ────────────────────── */

.product {
  display: grid;
  row-gap: calc(var(--spacing) * 8);
}

.shot {
  min-width: 0;
}

.notes {
  display: grid;
  gap: calc(var(--spacing) * 4) var(--spacing-gutter);
}

.notes li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: calc(var(--spacing) * 3);
  align-items: start;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink-2);
}

.notes .pin {
  margin-top: 2px;
}

.notes b {
  display: block;
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
}

.notes code {
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .notes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .product {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }

  .shot {
    grid-column: 1 / 9;
  }

  .notes {
    grid-column: 9 / 11;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: var(--spacing-stack);
  }
}

.pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--color-ink);
  color: var(--color-plate);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  grid-template-rows: 36px 52px minmax(0, 1fr) 56px;
  aspect-ratio: 16 / 10;
  background: var(--color-bg);
  box-shadow: var(--shadow-edge);
  container-type: inline-size;
}

/* 번호 표식은 화면 바깥 테두리에 걸친다 — 그림 위를 가리지 않는다 */
.app .pin {
  position: absolute;
  z-index: 2;
  left: -10px;
  top: 50%;
  translate: 0 -50%;
}

.app__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-ink);
  white-space: nowrap;
}

.app__ws {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.app__mark {
  width: 14px;
  height: 14px;
}

.app__range {
  color: var(--color-ink-2);
}

.app__query {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 3);
  border-bottom: 1px solid var(--color-ink);
}

.app__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 32px;
  padding-inline: calc(var(--spacing) * 3);
  overflow: hidden;
  background: var(--color-plate);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  font-family: var(--font-mono);
  font-feature-settings: var(--font-mono--font-feature-settings);
  font-size: var(--text-log);
  white-space: nowrap;
}

.app__q {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__run {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.app__run kbd {
  padding: 2px 6px;
  box-shadow: inset 0 0 0 1px var(--color-ink-2);
  color: var(--color-ink);
  letter-spacing: 0;
}

.app__res {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-block: calc(var(--spacing) * 2);
  background: var(--color-screen-bg);
  color: var(--color-screen-ink);
  font-family: var(--font-mono);
  font-feature-settings: var(--font-mono--font-feature-settings);
  font-size: var(--text-log);
  line-height: var(--log-row);
}

.app__meta {
  display: block;
  height: var(--spacing-stack);
  line-height: var(--spacing-stack);
  padding-inline: calc(var(--spacing) * 3);
  color: var(--color-screen-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 고정된 원인 줄 — 형광은 한 화면에 한 곳(히어로)이라 여기서는 반전(밝은 띠 · 어두운 글자)으로 고정을 보인다 */
.app__pin {
  position: relative;
  display: grid;
  grid-template-columns: 7ch 12ch 5ch minmax(0, 1fr);
  column-gap: 1ch;
  align-items: center;
  height: 28px;
  padding-inline: calc(var(--spacing) * 3);
  background: var(--color-screen-ink);
  color: var(--color-screen-bg);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.app__pin > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__pin .ln__ts,
.app__pin .ln__lv {
  color: var(--color-screen-bg);
}

.app__pin .ln__lv {
  font-weight: 800;
}

.app__lines {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: calc(var(--spacing) * 1);
}

.app__lines .ln {
  display: grid;
  grid-template-columns: 12ch 5ch minmax(0, 1fr);
  column-gap: 1ch;
  height: var(--log-row);
  padding-inline: calc(var(--spacing) * 3 + 8ch) calc(var(--spacing) * 3);
}

.app__sum {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  min-height: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-plate);
  border-left: 1px solid var(--color-ink);
}

.app__sum .pin {
  left: auto;
  right: -10px;
  top: calc(var(--spacing) * 3 + 8px);
}

.app__sum-k {
  color: var(--color-ink-2);
}

.app__sum-t {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.55;
}

.app__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 3);
  margin-top: auto;
  padding-top: calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-rule);
}

.app__facts dt {
  color: var(--color-ink-2);
}

.app__facts dd {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.app__time {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  padding-inline: calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-ink);
}

.app__rew {
  flex: none;
  padding: 4px 8px;
  box-shadow: inset 0 0 0 1px var(--color-ink);
  white-space: nowrap;
}

.app__track {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app__bars {
  display: block;
  width: 100%;
  height: 20px;
  color: var(--color-ink);
}

.app__ticks {
  display: flex;
  justify-content: space-between;
  color: var(--color-ink-2);
}

@container (max-width: 760px) {
  .app__facts div:nth-child(n + 3) {
    display: none;
  }

  .app__meta {
    font-size: 10px;
  }
}

@container (max-width: 620px) {
  .app__sum-t {
    font-size: var(--text-sm);
  }

  .app__run {
    display: none;
  }
}

@media (max-width: 767px) {
  /* 좁은 폭에서는 16:10 을 지키면 글자가 9px 밑으로 내려간다 — 한 열로 다시 짠다 */
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
  }

  .app__bar {
    min-height: 36px;
  }

  .app__query {
    min-height: 52px;
  }

  .app__lines {
    flex: none;
  }

  .app__lines li:nth-child(n + 6) {
    display: none;
  }

  .app__lines .ln {
    grid-template-columns: 12ch minmax(0, 1fr);
    padding-inline: calc(var(--spacing) * 3);
  }

  .app__lines .ln__lv {
    display: none;
  }

  .app__pin {
    grid-template-columns: 6ch 12ch minmax(0, 1fr);
  }

  .app__pin .ln__lv {
    display: none;
  }

  .app__sum {
    border-left: 0;
    border-top: 1px solid var(--color-ink);
  }

  .app__time {
    min-height: 64px;
  }
}

/* ── 02 기능 — 표의 행 (카드 아님) ──────────────────────────────────── */

.feats {
  border-bottom: 1px solid var(--color-ink);
}

.feat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--spacing) * 2) var(--spacing-gutter);
  padding-block: var(--spacing-stack);
  border-top: 1px solid var(--color-ink);
  transition: box-shadow var(--motion-fast) var(--ease-out);
}

.feat__code {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: var(--color-ink-2);
  transition: color var(--motion-fast) var(--ease-out);
}

.feat__fig {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.feat__fig .unit {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-2);
}

.feat__name {
  grid-column: 1 / -1;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-xl--line-height);
  letter-spacing: -0.01em;
}

.feat__desc {
  grid-column: 1 / -1;
  max-width: 34em;
  color: var(--color-ink-2);
}

@media (hover: hover) and (pointer: fine) {
  .feat:hover {
    box-shadow: inset 0 1px 0 var(--color-ink);
  }

  .feat:hover .feat__code {
    color: var(--color-ink);
  }
}

@media (min-width: 768px) {
  .feat {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr);
    align-items: baseline;
    padding-block: calc(var(--spacing) * 8);
  }

  .feat__code,
  .feat__name,
  .feat__desc,
  .feat__fig {
    grid-row: 1;
  }

  .feat__code {
    grid-column: 1;
    align-self: baseline;
  }

  .feat__name {
    grid-column: 2;
  }

  .feat__desc {
    grid-column: 3;
  }

  .feat__fig {
    grid-column: 4;
  }
}

/* ── 03 작동 방식 — 3열 변환 ─────────────────────────────────────── */

.steps {
  display: grid;
  row-gap: calc(var(--spacing-stack) * 2);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  min-width: 0;
}

.step + .step::before {
  content: "↓";
  position: absolute;
  top: calc(var(--spacing-stack) * -1.5);
  left: 0;
  font-family: var(--font-mono);
  color: var(--color-ink-2);
  line-height: var(--spacing-stack);
}

.step__k {
  display: flex;
  gap: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--color-ink);
}

.step__n {
  color: var(--color-ink-2);
}

.step__t {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--text-xl--line-height);
  letter-spacing: -0.01em;
}

.step__raw {
  padding: calc(var(--spacing) * 4);
  background: var(--color-screen-bg);
  color: var(--color-screen-ink);
  font-size: var(--text-log);
  line-height: var(--log-row);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.fields {
  background: var(--color-plate);
  box-shadow: var(--shadow-edge);
}

.fields div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  align-items: baseline;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-top: 1px solid var(--color-rule);
}

.fields div:first-child {
  border-top: 0;
}

.fields dt {
  color: var(--color-ink-2);
}

.fields dd {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.step__say {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* 여러 줄에 걸치는 구절이라 clip-path 대신 배경 폭으로 긋는다 — 두 정지점이 같은 색이라 그라데이션이 아니라 단색 띠다 */
.hl {
  padding-inline: 2px;
  background-color: transparent;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-on-accent);
}

.step__d {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }

  .step:nth-child(1) {
    grid-column: 1 / 4;
  }

  .step:nth-child(2) {
    grid-column: 4 / 8;
  }

  .step:nth-child(3) {
    grid-column: 8 / 11;
  }

  .step + .step::before {
    content: "→";
    top: 0;
    left: calc(var(--spacing-gutter) * -1);
    width: var(--spacing-gutter);
    text-align: center;
    line-height: var(--text-micro--line-height);
    font-size: var(--text-sm);
  }

  .fields div {
    grid-template-columns: 7rem minmax(0, 1fr);
  }
}

/* ── 04 가상 고객 — 수치 한 줄 ─────────────────────────────────────── */

.proof__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4) var(--spacing-gutter);
  margin-bottom: calc(var(--spacing-stack) * 2);
}

.proof__head .h2 {
  margin-bottom: 0;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  box-shadow: inset 0 0 0 1px var(--color-ink);
  color: var(--color-ink);
}

.proof {
  display: grid;
  border-top: 1px solid var(--color-ink);
}

.proof li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--color-rule);
}

.proof__n {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-figure--line-height);
  letter-spacing: var(--text-figure--letter-spacing);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.proof__n small {
  font-size: 0.42em;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

.proof__d {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

@media (max-width: 767px) {
  .proof__head .tag {
    order: -1;
  }
}

@media (min-width: 768px) {
  .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }

  .proof li {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--spacing) * 3);
    padding-block: var(--spacing-stack) 0;
    border-bottom: 0;
  }

  .proof li + li {
    padding-left: var(--spacing-gutter);
    border-left: 1px solid var(--color-rule);
  }
}

/* ── 05 가격 — 비교표 (모바일은 요금제별 덩어리) ───────────────────── */

.price {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.price th,
.price td {
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: baseline;
}

.price thead th,
.price thead td {
  border-top: 1px solid var(--color-ink);
}

.price thead th {
  padding-block: calc(var(--spacing) * 4);
  background: var(--color-plate);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* "팀" 은 강조색이 아니라 반전으로 — 형광은 찾아낸 것에만 쓴다 */
.price thead th.is-team {
  background: var(--color-ink);
  color: var(--color-plate);
}

.price .is-team {
  box-shadow:
    inset 1px 0 0 var(--color-ink),
    inset -1px 0 0 var(--color-ink);
}

.price tbody th {
  width: 22%;
  color: var(--color-ink-2);
  font-weight: var(--font-weight-regular);
}

.price tbody tr:last-child td,
.price tbody tr:last-child th {
  border-bottom: 1px solid var(--color-ink);
}

.price__cost td {
  padding-block: calc(var(--spacing) * 5);
}

.price__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.price__per {
  display: block;
  margin-top: calc(var(--spacing) * 1.5);
  color: var(--color-ink-2);
}

.price__go td {
  padding-block: calc(var(--spacing) * 2);
}

.plans {
  display: none;
}

@media (max-width: 767px) {
  .price {
    display: none;
  }

  .plans {
    display: block;
    border-bottom: 1px solid var(--color-ink);
  }

  .plan {
    padding-bottom: var(--spacing-stack);
    border-top: 1px solid var(--color-ink);
  }

  .plan + .plan {
    margin-top: var(--spacing-stack);
  }

  .plan__name {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background: var(--color-plate);
    font-size: var(--text-xl);
    line-height: 1.3;
  }

  .plan--team .plan__name {
    background: var(--color-ink);
    color: var(--color-plate);
  }

  .plan__cost {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4) 0;
  }

  .plan__cost .price__n,
  .plan__cost .price__per {
    display: inline;
    margin: 0;
  }

  .plan__rows div {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    border-top: 1px solid var(--color-rule);
  }

  .plan__rows dt {
    color: var(--color-ink-2);
  }

  .plan__rows dd {
    font-size: var(--text-sm);
    text-align: right;
  }

  .plan .link {
    margin-top: calc(var(--spacing) * 2);
  }
}

/* ── 06 FAQ — <details> 네이티브 ──────────────────────────────────── */

.faq {
  border-top: 1px solid var(--color-ink);
}

.qa {
  border-bottom: 1px solid var(--color-ink);
}

.qa summary {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 24px;
  gap: calc(var(--spacing) * 4);
  align-items: baseline;
  min-height: 44px;
  padding-block: calc(var(--spacing) * 5);
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa__code {
  color: var(--color-ink-2);
}

.qa__q {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.qa__sign {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  text-align: right;
}

.qa__sign::before {
  content: "+";
}

.qa[open] .qa__sign::before {
  content: "−";
}

.qa__a {
  max-width: 40em;
  padding: 0 0 calc(var(--spacing) * 6) calc(4.5rem + var(--spacing) * 4);
  color: var(--color-ink-2);
}

@media (hover: hover) and (pointer: fine) {
  .qa summary:hover .qa__q {
    text-decoration-line: underline;
  }
}

@media (max-width: 767px) {
  .qa summary {
    grid-template-columns: minmax(0, 1fr) 24px;
    row-gap: calc(var(--spacing) * 1);
  }

  .qa__code {
    grid-column: 1 / -1;
  }

  .qa__a {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .qa::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--motion-base) var(--ease-in-out),
        content-visibility var(--motion-base) allow-discrete;
    }

    .qa[open]::details-content {
      block-size: auto;
    }
  }
}

/* ── 07 CTA — 페이지 유일의 어두운 전폭 판 ─────────────────────────── */

.row--screen {
  background: var(--color-screen-bg);
  color: var(--color-screen-ink);
  --color-focus: var(--color-accent);
}

.row--screen .idx__l {
  color: var(--color-screen-dim);
}

.cta__say {
  margin-bottom: calc(var(--spacing-stack) * 2);
  color: var(--color-screen-ink);
}

.cta__cmd {
  display: flex;
  align-items: stretch;
  max-width: 44rem;
  margin-bottom: calc(var(--spacing) * 8);
  box-shadow: inset 0 0 0 1px var(--color-screen-dim);
}

.cta__line {
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-feature-settings: var(--font-mono--font-feature-settings);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.cta__line .cmd__p {
  margin-right: calc(var(--spacing) * 1);
  color: var(--color-screen-dim);
}

.cta__line code {
  overflow-wrap: anywhere;
}

.cursor {
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: 1ch;
  height: 1.2em;
  margin-left: 2px;
  vertical-align: -0.25em;
}

/* 커서 깜박임 — 터미널의 대기 상태 표시(사용자 요청 2026-09-25). 등장 연출이 아니라 상태이고, 동작 줄이기에서는 멈춘다. */
@media (prefers-reduced-motion: no-preference) {
  .cursor {
    animation: cursor-blink 1.1s steps(1, end) infinite;
  }
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

.copy {
  flex: none;
  min-width: 64px;
  min-height: 48px;
  padding-inline: calc(var(--spacing) * 4);
  border: 0;
  border-left: 1px solid var(--color-screen-dim);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-screen-ink);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.copy:active {
  transform: translateY(1px);
  transition-duration: 0ms;
}

@media (hover: hover) and (pointer: fine) {
  .copy:hover {
    background: var(--color-ink-2);
  }
}

/* ── 꼬리 ─────────────────────────────────────────────────────────── */

.foot {
  padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 6 + env(safe-area-inset-bottom));
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) var(--spacing-gutter);
  color: var(--color-ink-2);
}

.foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-ink);
  text-underline-offset: 4px;
}

/* ── 모션 — 기계적: 빨리 닿고 단단히 선다. transform · opacity · clip-path 만 ─────── */

@media (prefers-reduced-motion: no-preference) {
  /* Fade in + Stagger — 콜라주 조각 A → D → B → C, 첫 로드 한 번 */
  .fig {
    animation: fig-in var(--motion-base) var(--ease-out) both;
  }

  .fig--d {
    animation-delay: 60ms;
  }

  .fig--b {
    animation-delay: 120ms;
  }

  .fig--c {
    animation-delay: 180ms;
  }

  /* Reveal — 형광 띠를 왼쪽에서 오른쪽으로 한 번 긋는다. JS 가 없으면 처음부터 칠해진 채로 */
  .js .band::before {
    transition: clip-path var(--motion-slow) var(--ease-out) var(--band-delay, 120ms);
  }

  .js .band:not(.is-lit)::before {
    clip-path: inset(0 100% 0 0);
  }

  .js .ln--cause {
    --band-delay: 420ms;
  }

  .js .hl {
    transition: background-size var(--motion-slow) var(--ease-out) 120ms;
  }

  .js .hl:not(.is-lit) {
    background-size: 0% 100%;
  }
}

@keyframes fig-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}