/* =========================================================================
 * build-story — AI Investment Plan Copilot 제작기 페이지 스타일
 *
 * 참고: docs/product/DESIGN_SYSTEM.md 에 정의된 제품 색상/radius 토큰을
 * 그대로 재사용해 "제품 UI와 동일한 둥근 카드 문법"을 따른다.
 * 레이아웃 리듬(넓은 섹션 간격, 좁은 아티클 폭, 큰 질문형 제목)은
 * 참고 아티클의 구조만 차용했고, 색/폰트/카피는 별도로 정의했다.
 * ========================================================================= */

:root {
  /* Color — 제품 토큰 재사용 */
  --bs-color-bg: #ffffff;
  --bs-color-bg-soft: #fafafa;
  --bs-color-surface: #edf0f2;
  --bs-color-surface-strong: #e4e7ea;

  --bs-color-text-primary: #191919;
  --bs-color-text-secondary: #5c5c5c;
  /* 제품 토큰(#929292)은 작은 텍스트에서 WCAG AA 대비(4.5:1)를 만족하지 못해
     이 페이지의 본문성 텍스트(eyebrow, caption, principle-sub 등)에는
     대비를 보정한 값을 사용한다. */
  --bs-color-text-tertiary: #6b6b6b;

  --bs-color-border: #e7e7e3;
  --bs-color-border-strong: #d5d5cf;

  --bs-color-accent: #fee500;
  --bs-color-accent-hover: #f2d900;
  --bs-color-accent-pressed: #e6cd00;
  --bs-color-accent-text: #191919;
  --bs-color-accent-soft: #fff3c4;

  --bs-color-positive: #e94b55;
  --bs-color-negative: #3b70e2;

  /* Radius */
  --bs-radius-sm: 8px;
  --bs-radius-md: 12px;
  --bs-radius-lg: 16px;
  --bs-radius-button: 14px;
  --bs-radius-full: 999px;

  /* Spacing scale */
  --bs-space-1: 8px;
  --bs-space-2: 16px;
  --bs-space-3: 24px;
  --bs-space-4: 32px;
  --bs-space-5: 48px;
  --bs-space-6: 64px;
  --bs-space-7: 96px;
  --bs-space-section: 160px;
  --bs-space-section-mobile: 88px;

  /* Spacing token scale(5차 간격 정리) — 임의 개별 값 대신 이 스케일만 사용한다 */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 112px;
  --space-5xl: 160px;

  /* Layout — 전역 컨테이너 축. 모든 섹션이 이 세 값만 사용한다(섹션별 임의 max-width 금지). */
  --build-story-wide: 1080px;
  --build-story-content: 960px;
  --build-story-text: 720px;
  /* 하위 호환 별칭 */
  --bs-container-width: var(--build-story-wide);
  --bs-article-width: var(--build-story-text);

  /* Typography */
  --bs-font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --bs-text-eyebrow: 13px;
  --bs-text-hero: clamp(32px, 4.6vw, 46px);
  --bs-text-h2: clamp(26px, 3.4vw, 34px);
  --bs-text-h3: 20px;
  --bs-text-card-title: 17px;
  --bs-text-body: 17px;
  --bs-text-small: 17px;
  --bs-text-caption: 13px;
}

/* =========================================================================
 * Reset / base
 * ========================================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bs-color-bg);
  color: var(--bs-color-text-primary);
  font-family: var(--bs-font-sans);
  font-size: var(--bs-text-body);
  line-height: 1.6;
  letter-spacing: -0.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* focus-visible baseline for all interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--bs-color-accent);
  outline-offset: 2px;
  border-radius: var(--bs-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
 * Layout primitives — 전역 컨테이너 축
 *
 * 모든 섹션은 .build-story-container(= section-inner, 960px) 하나만 쓴다.
 * 섹션마다 다른 max-width 를 새로 만들지 않는다. 텍스트 블록(.build-story-prose)은
 * 이 안에서 720px 로 좁아지되 margin-inline:auto 로 다시 가운데 정렬하지 않는다 —
 * 그래야 아래에 오는 960px 폭 그리드·카드와 같은 왼쪽 기준선을 공유한다(§2. 제목 시작선 통일).
 * ========================================================================= */
.build-story-container,
.build-story-section-inner {
  width: min(calc(100% - 48px), var(--build-story-content));
  margin-inline: auto;
}

.build-story-prose,
.build-story-section-copy {
  max-width: var(--build-story-text);
}

/* Hero·Final CTA 처럼 의도적으로 가운데 정렬해야 하는 블록만 이 수정자를 쓴다. */
.build-story-prose--center {
  margin-inline: auto;
  text-align: center;
}

.build-story-section {
  /* 12차 개편: 페이지가 너무 길어 보인다는 피드백으로 섹션 상하 여백을
     기존 대비 약 17~19% 줄였다(72px→60px, 96px→76px). */
  padding-block: 60px;
}

/* Experience 처럼 스크롤을 동반하는 narrative 섹션은 리듬 한 단계를 더 둔다. */
.build-story-section--narrative {
  padding-block: 200px;
}

.build-story-section:first-of-type {
  border-top: none;
}

@media (max-width: 720px) {
  .build-story-section {
    padding-block: 76px;
  }
  .build-story-section--narrative {
    padding-block: 120px;
  }
}

/* 18차 개편 — 제작기 전체를 관통하는 5단계 서사(문제를 찾았어요 → 문제를
   좁혔어요 → 해결 방식을 정했어요 → 직접 만들고 바꿨어요 → 검증했어요)를
   구분하는 캡션. 각 서사 구간의 시작 섹션에만 한 번씩 쓴다 — 소제목마다
   반복하지 않는다. 영문 대문자·letter-spacing 없이 제목보다 낮은 톤으로만
   보조한다. */
.build-story-narrative-caption {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-color-text-tertiary);
  text-align: left;
  margin-bottom: 16px;
  background: none;
  border: none;
}

@media (max-width: 720px) {
  .build-story-narrative-caption {
    font-size: 14px;
    margin-bottom: 13px;
  }
}

.build-story-title {
  font-size: var(--bs-text-h2);
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-color-text-primary);
}

.build-story-body {
  margin-top: var(--bs-space-4); /* title → description: 32px */
  font-size: var(--bs-text-body);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

.build-story-body p + p {
  margin-top: var(--bs-space-2);
}

.build-story-header {
  margin-bottom: 0;
}

/* =========================================================================
 * Buttons / CTA
 * ========================================================================= */
.build-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bs-space-2);
  align-items: center;
}

.build-story-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--bs-radius-button);
  font-size: var(--bs-text-small);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.build-story-button--primary {
  background: var(--bs-color-accent);
  color: var(--bs-color-accent-text);
}

.build-story-button--primary:hover {
  background: var(--bs-color-accent-hover);
}

.build-story-button--primary:active {
  background: var(--bs-color-accent-pressed);
}

/* 20차 개편 — 공개 프로덕트 URL이 아직 없는 동안(PRODUCT_URL 비어 있음)의
   CTA 상태. 색·불투명도는 그대로 두고 커서만 바꿔 "개발 중" 상태를
   과하지 않게 알린다(§사용자 확정: 시각 디자인을 망치는 회색 처리 금지). */
.js-product-cta[aria-disabled="true"] {
  cursor: not-allowed;
}

.build-story-button--secondary {
  background: transparent;
  color: var(--bs-color-text-primary);
  border-color: var(--bs-color-border-strong);
}

.build-story-button--secondary:hover {
  background: var(--bs-color-surface);
}

/* =========================================================================
 * Hero — 텍스트 타이포(크기·간격은 아래 §HERO 시각 레이아웃 블록에서 정의)
 * ========================================================================= */
.build-story-hero__title {
  margin-top: var(--bs-space-2);
  margin-bottom: 26px;
  max-width: 760px;
  margin-inline: auto;
  font-size: clamp(38px, 4.2vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
  color: var(--bs-color-text-primary);
}

@media (max-width: 720px) {
  .build-story-hero__title {
    font-size: 38px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    max-width: 100%;
    margin-bottom: 24px;
  }
}

.build-story-hero__desc {
  /* 제목→설명 간격은 title의 margin-bottom(30/24px)이 담당한다 — 여기서 또 더하지 않는다 */
  margin: 0 auto 0;
  max-width: var(--bs-article-width);
  font-size: 18px;
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

.build-story-hero__meta {
  margin-top: var(--bs-space-3);
  font-size: var(--bs-text-caption);
  color: var(--bs-color-text-tertiary);
}

.build-story-hero__profile {
  display: block;
  width: min(100px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 100%;
  margin: var(--bs-space-4) auto 0;
}

.build-story-hero__label {
  display: block;
  margin-top: var(--bs-space-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-color-text-secondary);
}

.build-story-hero__more-link {
  display: block;
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--bs-color-border-strong);
  text-underline-offset: 3px;
}

.build-story-hero__more-link:hover {
  color: var(--bs-color-text-primary);
}

.build-story-hero__more-link:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .build-story-hero__profile {
    width: min(80px, 30vw);
  }
}

.build-story-hero__actions {
  margin-top: var(--space-xl); /* 설명 → CTA: 28~32px */
  justify-content: center;
}

/* =========================================================================
 * Mock screen container — "실제 화면명이 보이는 mock" 컴포넌트
 * ========================================================================= */
.build-story-mock {
  border-radius: var(--bs-radius-lg);
  border: 1px solid var(--bs-color-border);
  background: var(--bs-color-surface);
  overflow: hidden;
}

.build-story-mock__frame {
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  padding: var(--bs-space-3);
}

.build-story-mock__label {
  align-self: flex-start;
  font-family: var(--bs-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: var(--bs-color-text-primary);
  padding: 6px 10px;
  border-radius: var(--bs-radius-full);
  margin-bottom: var(--bs-space-2);
}

.build-story-mock__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.build-story-mock__bar {
  height: 10px;
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-border-strong);
}

.build-story-mock__bar--w60 {
  width: 60%;
}
.build-story-mock__bar--w80 {
  width: 80%;
}
.build-story-mock__bar--w40 {
  width: 40%;
}
.build-story-mock__bar--w100 {
  width: 100%;
}

.build-story-mock__bubble {
  border-radius: var(--bs-radius-md);
  background: var(--bs-color-bg);
  border: 1px solid var(--bs-color-border);
  padding: 10px 12px;
}

.build-story-mock__bubble--accent {
  background: var(--bs-color-accent-soft);
  border-color: var(--bs-color-accent);
  align-self: flex-end;
}

.build-story-mock__chip {
  display: inline-block;
  height: 22px;
  width: 72px;
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-text-primary);
  opacity: 0.08;
}

.build-story-mock__caption {
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-caption);
  line-height: 1.6;
  color: var(--bs-color-text-tertiary);
  text-align: center;
}

.build-story-mock--compact .build-story-mock__frame {
  aspect-ratio: 4 / 3;
}

/* =========================================================================
 * Highlight quote
 * ========================================================================= */
.build-story-quote {
  margin-top: var(--bs-space-5);
  position: relative;
  padding: var(--bs-space-4) var(--bs-space-4) var(--bs-space-4) var(--bs-space-4);
  border-radius: var(--bs-radius-lg);
  background: var(--bs-color-surface);
}

.build-story-quote p {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--bs-color-text-primary);
}

/* =========================================================================
 * Compare card (Problem section)
 * ========================================================================= */
.build-story-compare {
  margin-top: var(--bs-space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bs-space-3);
  align-items: stretch;
}

@media (max-width: 720px) {
  .build-story-compare {
    grid-template-columns: 1fr;
  }
}

.build-story-compare__card {
  border-radius: var(--bs-radius-lg);
  padding: var(--bs-space-4);
  border: 1px solid var(--bs-color-border);
}

.build-story-compare__card--emotion {
  background: var(--bs-color-bg-soft);
  display: flex;
  align-items: center;
}

.build-story-compare__card--emotion p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--bs-color-text-secondary);
  font-style: normal;
}

.build-story-compare__card--rule {
  background: var(--bs-color-surface);
}

.build-story-compare__label {
  font-size: var(--bs-text-caption);
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
  margin-bottom: var(--bs-space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.build-story-rule-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.build-story-rule-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--bs-space-2);
  font-size: var(--bs-text-small);
  color: var(--bs-color-text-secondary);
  border-bottom: 1px solid var(--bs-color-border);
  padding-bottom: 12px;
}

.build-story-rule-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.build-story-rule-list strong {
  color: var(--bs-color-text-primary);
  font-weight: 700;
  text-align: right;
}

/* 리서치 결과(제목·본문)와 그 아래 카드(제품 결정)를 시각적으로 분리하는
   한 줄 소제목 — 본문과의 간격은 크게, 카드와의 간격은 좁게 둬서 "리서치에서
   무엇을 반영했는지"를 카드 바로 위에서 짧게 이어준다. */
.build-story-research-lead {
  margin-top: 56px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
}

.build-story-research-lead + .build-story-grid {
  margin-top: 20px;
}

/* =========================================================================
 * Card grid (insight / decision / system-design cards)
 * ========================================================================= */
.build-story-grid {
  margin-top: var(--bs-space-5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bs-space-3);
}

/* 카드 그리드 다음 본문(6차 개편에서 카드형 섹션에 새로 결합) — 콜아웃 다음 본문과 동일 리듬 */
.build-story-grid + .build-story-article-body {
  margin-top: 52px;
}

.build-story-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .build-story-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .build-story-grid,
  .build-story-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* 순서가 있는 카드(예: 구현 방식 3단계) — 카드 사이에 얇은 화살표로 흐름을 표시한다.
   2열로 접히는 900px 이하·1열로 쌓이는 720px 이하에서는 줄바꿈 위치가 카드마다
   달라져 화살표가 어색하게 겹치므로 숨긴다(세로 스택 자체가 순서를 보여준다). */
.build-story-grid--sequence {
  position: relative;
}

.build-story-grid--sequence > .build-story-card {
  position: relative;
}

.build-story-grid--sequence > .build-story-card:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  color: var(--bs-color-text-tertiary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  z-index: 1;
}

@media (max-width: 900px) {
  .build-story-grid--sequence > .build-story-card:not(:last-child)::after {
    display: none;
  }
}

.build-story-card {
  border-radius: var(--bs-radius-lg);
  background: var(--bs-color-surface);
  padding: var(--bs-space-4);
  border: 1px solid var(--bs-color-border);
}

.build-story-card__title {
  font-size: var(--bs-text-card-title);
  font-weight: 700;
  color: var(--bs-color-text-primary);
  margin-bottom: 10px;
}

.build-story-card__text {
  font-size: var(--bs-text-small);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

.build-story-card__label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-color-accent-text);
  background: var(--bs-color-accent);
  padding: 4px 10px;
  border-radius: var(--bs-radius-full);
  margin-bottom: var(--bs-space-2);
}

.build-story-card__list {
  margin-top: var(--bs-space-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.build-story-card__list li {
  font-size: var(--bs-text-small);
  line-height: 1.6;
  color: var(--bs-color-text-secondary);
  padding-left: 16px;
  position: relative;
}

.build-story-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bs-color-text-tertiary);
}

/* =========================================================================
 * 검증 섹션 — 테스트한 상황을 보여주는 닫힌 패널 하나(카드 여러 개·표 금지).
 * ========================================================================= */
.build-story-verify-panel {
  margin-top: 40px;
  padding: 28px 32px;
  border: 1px solid var(--bs-color-border);
  border-radius: var(--bs-radius-lg);
  background: var(--bs-color-bg);
}

.build-story-verify-panel__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
  margin-bottom: 16px;
}

.build-story-verify-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 32px;
}

.build-story-verify-list li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bs-color-text-secondary);
  word-break: keep-all;
  padding-left: 22px;
  position: relative;
}

.build-story-verify-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bs-color-text-tertiary);
  font-weight: 700;
}

@media (max-width: 720px) {
  .build-story-verify-list {
    grid-template-columns: 1fr;
  }
}

.build-story-verify-panel__divider {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--bs-color-border);
  text-align: left;
}

.build-story-verify-panel__subtitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--bs-color-text-primary);
  margin-bottom: 8px;
  text-align: left;
}

.build-story-verify-panel__note {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bs-color-text-secondary);
  text-align: left;
}

.build-story-verify-scope {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-color-text-tertiary);
  text-align: left;
}

.build-story-verify-panel__note + .build-story-verify-panel__note {
  margin-top: 8px;
}

/* 20차 개편 — 사용성 피드백 수집 구조: 실제 캡처 1장 + 캡션 + 아주 작은
   보조 정보(Forms·Sheets·Apps Script). 카드 3개·배지·pill을 쓰지 않고
   .build-story-verify-panel__divider 안의 하위 콘텐츠로 자연스럽게 이어지게
   한다. */
.build-story-feedback__figure {
  margin: 40px auto 0;
  width: min(100%, 380px);
  border: 1px solid var(--bs-color-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bs-color-bg);
}

.build-story-feedback__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.build-story-feedback__caption {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-color-text-tertiary);
  text-align: center;
}

.build-story-feedback__stack {
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bs-color-text-tertiary);
  text-align: center;
}

@media (max-width: 720px) {
  .build-story-feedback__figure {
    margin-top: 32px;
  }
}

/* 검증 섹션 전용 여백 축소(기존 대비 약 20%)과 제목→본문 간격 28px 고정 */
#metrics {
  padding-block: 48px;
}

#metrics .build-story-article-title {
  margin-bottom: 28px;
}

@media (max-width: 720px) {
  #metrics {
    padding-block: 60px;
  }
}

/* =========================================================================
 * Conclusion / principle box
 * ========================================================================= */
.build-story-box {
  margin-top: var(--bs-space-5);
  border-radius: var(--bs-radius-lg);
  padding: var(--bs-space-4);
  background: var(--bs-color-surface);
}

.build-story-box p {
  font-size: var(--bs-text-body);
  line-height: 1.75;
  color: var(--bs-color-text-primary);
}

.build-story-box p + p {
  margin-top: var(--bs-space-2);
}

.build-story-box--note {
  margin-top: var(--bs-space-2);
  background: none;
  padding: 0;
}

.build-story-box--note p {
  font-size: var(--bs-text-caption);
  color: var(--bs-color-text-tertiary);
  line-height: 1.6;
}

/* =========================================================================
 * Flow steps (Product Definition — 7 step vertical timeline)
 * ========================================================================= */
.build-story-flow {
  margin-top: var(--bs-space-5);
  display: flex;
  flex-direction: column;
}

.build-story-flow__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--bs-space-3);
}

.build-story-flow__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.build-story-flow__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bs-color-text-primary);
  color: #ffffff;
  font-size: var(--bs-text-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.build-story-flow__step:last-child .build-story-flow__number {
  background: var(--bs-color-accent);
  color: var(--bs-color-accent-text);
}

.build-story-flow__line {
  flex: 1;
  width: 2px;
  background: var(--bs-color-border-strong);
  margin-top: 6px;
}

.build-story-flow__step:last-child .build-story-flow__line {
  display: none;
}

.build-story-flow__content {
  padding-bottom: var(--bs-space-4);
}

.build-story-flow__title {
  font-size: var(--bs-text-body);
  font-weight: 700;
  color: var(--bs-color-text-primary);
  padding-top: 4px;
}

/* =========================================================================
 * Principle callout
 * ========================================================================= */
.build-story-principle {
  margin-top: var(--bs-space-5);
  text-align: center;
}

.build-story-principle__main {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--bs-color-text-primary);
}

.build-story-principle__sub {
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-small);
  line-height: 1.7;
  color: var(--bs-color-text-tertiary);
}

/* =========================================================================
 * Feature rows (Experience section — alternating text / mock)
 * ========================================================================= */
.build-story-feature {
  margin-top: var(--bs-space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bs-space-5);
  align-items: center;
}

.build-story-feature:first-child {
  margin-top: var(--bs-space-5);
}

.build-story-feature--reverse .build-story-feature__text {
  order: 2;
}

.build-story-feature--reverse .build-story-feature__visual {
  order: 1;
}

.build-story-feature__visual .build-story-mock {
  max-width: 280px;
  margin-inline: auto;
}

.build-story-feature__index {
  font-size: var(--bs-text-caption);
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
  letter-spacing: 0.06em;
}

.build-story-feature__title {
  margin-top: var(--bs-space-1);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-color-text-primary);
}

.build-story-feature__text {
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-body);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

@media (max-width: 720px) {
  .build-story-feature,
  .build-story-feature--reverse {
    grid-template-columns: 1fr;
  }
  .build-story-feature--reverse .build-story-feature__text,
  .build-story-feature--reverse .build-story-feature__visual {
    order: initial;
  }
}

/* =========================================================================
 * Scope — included / excluded list
 * ========================================================================= */
.build-story-scope {
  margin-top: var(--bs-space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bs-space-3);
}

@media (max-width: 720px) {
  .build-story-scope {
    grid-template-columns: 1fr;
  }
}

.build-story-scope__card {
  border-radius: var(--bs-radius-lg);
  padding: var(--bs-space-4);
  border: 1px solid var(--bs-color-border);
}

.build-story-scope__card--included {
  background: var(--bs-color-bg);
}

.build-story-scope__card--excluded {
  background: var(--bs-color-bg-soft);
}

.build-story-scope__title {
  font-size: var(--bs-text-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--bs-space-2);
}

.build-story-scope__card--included .build-story-scope__title {
  color: var(--bs-color-text-primary);
}

.build-story-scope__card--excluded .build-story-scope__title {
  color: var(--bs-color-text-tertiary);
}

.build-story-scope__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.build-story-scope__list li {
  font-size: var(--bs-text-small);
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}

.build-story-scope__card--included .build-story-scope__list li {
  color: var(--bs-color-text-secondary);
}

.build-story-scope__card--included .build-story-scope__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--bs-color-text-primary);
  border-bottom: 2px solid var(--bs-color-text-primary);
  transform: rotate(-45deg);
}

.build-story-scope__card--excluded .build-story-scope__list li {
  color: var(--bs-color-text-tertiary);
}

.build-story-scope__card--excluded .build-story-scope__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: linear-gradient(45deg, transparent 45%, var(--bs-color-text-tertiary) 45%, var(--bs-color-text-tertiary) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--bs-color-text-tertiary) 45%, var(--bs-color-text-tertiary) 55%, transparent 55%);
}

/* =========================================================================
 * Build log (4-day timeline)
 * ========================================================================= */
.build-story-daylog {
  margin-top: var(--bs-space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bs-space-3);
}

@media (max-width: 900px) {
  .build-story-daylog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .build-story-daylog {
    grid-template-columns: 1fr;
  }
}

.build-story-day {
  border-radius: var(--bs-radius-lg);
  padding: var(--bs-space-3);
  background: var(--bs-color-surface);
  border: 1px solid var(--bs-color-border);
}

.build-story-day__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bs-color-text-tertiary);
  text-transform: uppercase;
}

.build-story-day__title {
  margin-top: 6px;
  font-size: var(--bs-text-small);
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-day__list {
  margin-top: var(--bs-space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-story-day__list li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--bs-color-text-secondary);
  padding-left: 12px;
  position: relative;
}

.build-story-day__list li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--bs-color-text-tertiary);
}

.build-story-daylog-visual {
  margin-top: var(--bs-space-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bs-space-3);
}

@media (max-width: 720px) {
  .build-story-daylog-visual {
    grid-template-columns: 1fr;
  }
}

.build-story-daylog-visual .build-story-mock--compact {
  max-width: 100%;
}

/* =========================================================================
 * Implementation decisions
 * ========================================================================= */
.build-story-decision {
  margin-top: var(--bs-space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bs-space-4);
}

.build-story-decision__item {
  padding-top: var(--bs-space-4);
  border-top: 1px solid var(--bs-color-border);
}

.build-story-decision__item:first-child {
  padding-top: 0;
  border-top: none;
}

.build-story-decision__title {
  font-size: var(--bs-text-h3);
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-decision__text {
  margin-top: 10px;
  font-size: var(--bs-text-body);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

.build-story-code-chip {
  display: inline-block;
  margin-top: var(--bs-space-2);
  font-family: var(--bs-font-mono);
  font-size: 13px;
  color: var(--bs-color-text-primary);
  background: var(--bs-color-surface);
  padding: 6px 10px;
  border-radius: var(--bs-radius-sm);
  border: 1px solid var(--bs-color-border);
}

/* =========================================================================
 * Final CTA
 * ========================================================================= */
.build-story-final {
  text-align: center;
  padding-block: 96px;
}

.build-story-final__title {
  font-size: var(--bs-text-hero);
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-color-text-primary);
}

.build-story-final__desc {
  margin: var(--bs-space-3) auto 0;
  max-width: var(--bs-article-width);
  font-size: 17px;
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

.build-story-final__actions {
  margin-top: var(--bs-space-4);
  justify-content: center;
}

@media (max-width: 720px) {
  .build-story-final {
    padding-block: 64px;
  }
}

/* =========================================================================
 * UI frame / micro-motion — 실제 제품 스크린샷 위 CSS 강조 오버레이.
 *
 * .build-story-ui-frame     — 스크린샷을 담는 프레임(둥근 카드, 얇은 테두리)
 * .build-story-ui-highlight — 스크린샷 위 절대 위치 강조 박스(좌표는 인라인 style %)
 * --active                  — JS 가 IntersectionObserver 트리거 시 붙였다 뗀다
 * .build-story-motion-rise  — 등장 모션(오퍼시티+translateY)
 * ========================================================================= */
.build-story-ui-frame {
  position: relative;
  border-radius: var(--bs-radius-lg);
  border: 1px solid var(--bs-color-border);
  overflow: hidden;
  background: var(--bs-color-bg);
  line-height: 0;
}

.build-story-ui-frame__image {
  display: block;
  width: 100%;
  height: auto;
}

.build-story-ui-highlight {
  position: absolute;
  border-radius: var(--bs-radius-md);
  border: 2px solid transparent;
  box-shadow: none;
  transform: scale(1) translateY(0);
  transition: transform 600ms ease-out, box-shadow 600ms ease-out, border-color 600ms ease-out;
  pointer-events: none;
}

.build-story-ui-highlight--active {
  transform: scale(1.035) translateY(-5px);
  border-color: var(--bs-color-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.build-story-motion-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms ease-out, transform 650ms ease-out;
}

.build-story-motion-rise--in {
  opacity: 1;
  transform: translateY(0);
}

.build-story-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-caption);
  font-weight: 600;
  color: var(--bs-color-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.build-story-replay:hover {
  color: var(--bs-color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .build-story-ui-highlight {
    transition: border-color 200ms ease-out;
  }
  .build-story-ui-highlight--active,
  .build-story-ui-highlight--static {
    transform: none;
    box-shadow: none;
    border-color: var(--bs-color-accent);
  }
  .build-story-motion-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
 * HERO — 제품 미리보기(모션 프리뷰), 실제 조작 화면처럼 보이지 않도록 축소·크롭
 * ========================================================================= */
.build-story-hero {
  padding-block: 96px 0;
  text-align: center;
}

.build-story-hero-visual {
  width: min(100%, 820px);
  margin: 80px auto 0;
  display: flex;
  justify-content: center;
  gap: 28px;
}

.build-story-hero-device {
  width: clamp(300px, 31vw, 340px);
}

.build-story-hero-device:nth-child(2) {
  transform: translateY(24px);
}

.build-story-hero-device__frame {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: var(--bs-color-surface);
  line-height: 0;
}

.build-story-hero-device__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.build-story-hero-device__caption {
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-caption);
  color: var(--bs-color-text-tertiary);
  text-align: center;
}

/* 모바일: 한 번에 하나씩, 점으로 직접 전환(자동 슬라이드 없음) */
.build-story-hero-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.build-story-hero-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: var(--bs-space-3);
}

.build-story-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-color-border-strong);
  cursor: pointer;
  display: inline-block;
}

.build-story-hero-dot:hover {
  background: var(--bs-color-text-tertiary);
}

#hero-tab-1:checked ~ .build-story-hero-dots .build-story-hero-dot:nth-child(1),
#hero-tab-2:checked ~ .build-story-hero-dots .build-story-hero-dot:nth-child(2) {
  background: var(--bs-color-text-primary);
}

@media (max-width: 720px) {
  .build-story-hero {
    padding-block: 64px 0;
  }

  .build-story-hero-visual {
    margin-top: 56px;
    gap: 20px;
  }

  .build-story-hero-device:nth-child(2) {
    transform: none;
  }

  .build-story-hero-devices {
    position: relative;
  }

  .build-story-hero-device {
    width: min(calc(100vw - 48px), 320px);
    margin-inline: auto;
  }

  #hero-tab-2:checked ~ .build-story-hero-devices .build-story-hero-device:nth-child(1) {
    display: none;
  }

  #hero-tab-1:checked ~ .build-story-hero-devices .build-story-hero-device:nth-child(2) {
    display: none;
  }

  .build-story-hero-dots {
    display: flex;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .build-story-hero-device {
    width: 280px;
  }
  .build-story-hero-visual {
    width: min(100%, 640px);
    gap: 20px;
  }
}

/* =========================================================================
 * DATA — Text + Grid. 카드는 본문과 같은 960px 축 안에서 2열, 패딩·radius 통일
 * ========================================================================= */
.build-story-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: var(--bs-space-5);
}

.build-story-data-card {
  min-height: 168px;
  padding: 32px;
  border-radius: var(--bs-radius-lg);
  background: var(--bs-color-surface);
  border: 1px solid var(--bs-color-border);
}

.build-story-data-card__title {
  font-size: var(--bs-text-card-title);
  font-weight: 700;
  color: var(--bs-color-text-primary);
  margin-bottom: 10px;
}

.build-story-data-card__text {
  font-size: var(--bs-text-small);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

@media (max-width: 720px) {
  .build-story-data-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .build-story-data-card {
    padding: 24px;
    min-height: 0;
  }
}

/* =========================================================================
 * EXPERIENCE — Sticky Text + Scrolling Visual
 * ========================================================================= */
.build-story-experience-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 520px);
  justify-content: space-between;
  gap: 80px;
  align-items: start;
}

.build-story-experience-intro {
  position: sticky;
  top: 120px;
}

.build-story-experience-list {
  display: flex;
  flex-direction: column;
}

.build-story-experience-item {
  margin-bottom: 160px;
}

.build-story-experience-item:last-child {
  margin-bottom: 0;
}

.build-story-experience-item__index {
  font-size: var(--bs-text-caption);
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
  letter-spacing: 0.06em;
}

.build-story-experience-item__title {
  margin-top: var(--bs-space-1);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-color-text-primary);
}

.build-story-experience-item__text {
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-body);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
}

.build-story-experience-item__visual {
  margin-top: var(--bs-space-4);
  width: 100%;
}

.build-story-experience-item__visual .build-story-ui-frame {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.build-story-experience-item__caption {
  margin-top: var(--bs-space-2);
  font-size: var(--bs-text-caption);
  color: var(--bs-color-text-tertiary);
  text-align: center;
}

@media (max-width: 900px) {
  .build-story-experience-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .build-story-experience-intro {
    position: static;
    margin-bottom: var(--bs-space-6);
  }
  .build-story-experience-item {
    margin-bottom: 96px;
  }
}

/* =========================================================================
 * ARTICLE — 제작기 아티클 전용 최소 레이아웃(3차 개편: 문단 리듬·이미지 여백 정리).
 *
 * 위의 카드 그리드·히어로 디바이스·sticky 컴포넌트는 삭제하지 않고 그대로 둔다
 * (일시 중단된 목업/모션 작업 보존). 이 아티클 버전은 그 클래스들을 쓰지 않고,
 * 아래 최소 클래스만으로 한 줄 텍스트 중심 레이아웃을 구성한다.
 *
 * 이전 개편에서 이미지 뒤에 큰 빈 공간이 생긴 실제 원인: vh/min-height 때문이
 * 아니라, 섹션 하나가 끝나고 다음 섹션이 시작될 때 .build-story-section 의
 * padding-block(양쪽 160px)이 그대로 겹쳐 마지막 이미지 → 다음 제목 사이에만
 * 320px 여백이 생겼다. 섹션 패딩을 112~136px 대(128px)로 줄이고, 이미지는
 * 컴포넌트 자체 margin(전 48~56px · 후 72~96px)으로 간격을 명시해 해결한다.
 * ========================================================================= */
.build-story-article {
  width: min(calc(100% - 48px), 800px);
  max-width: 800px;
  margin-inline: auto;
}

.build-story-article-title {
  max-width: 720px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.03em;
  margin-bottom: 24px; /* H2 → 첫 문단(모바일): 22~24px */
  color: var(--bs-color-text-primary);
  word-break: keep-all;
}

@media (min-width: 721px) {
  .build-story-article-title {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 30px; /* H2 → 첫 문단(데스크톱): 28~32px */
  }
}

.build-story-article-body {
  /* 제목→본문 간격은 title의 margin-bottom이 담당한다(이중으로 더하지 않는다).
     다른 맥락(콜아웃/리스트/본문 뒤)에서 이어질 때는 아래 조합 선택자가 덮어쓴다. */
  margin-top: 0;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.018em;
  color: #4e5968;
  word-break: keep-all;
}

/* 12차 개편: "문제 정의" 블록만 본문 폭을 좁혀 한 문단이 3줄 이내로 보이게 한다 */
.build-story-article-body--narrow {
  max-width: 480px;
}

/* 같은 논점이 이어지는 문단: 14~18px */
.build-story-article-body p {
  margin-top: 16px;
}

.build-story-article-body p:first-child {
  margin-top: 0;
}

/* 논점이 바뀌는 지점(본문 블록이 연달아 옴): 28~32px */
.build-story-article-body + .build-story-article-body {
  margin-top: var(--space-xl);
}

/* 리스트 다음 본문: 28~32px */
.build-story-article-points + .build-story-article-body {
  margin-top: var(--space-xl);
}

/* 콜아웃 → 다음 콘텐츠: 48~64px(본문→콜아웃 진입 32~40px과는 다른 관계) */
.build-story-article-callout + .build-story-article-body,
.build-story-article-callout + .build-story-article-points {
  margin-top: 52px;
}

.build-story-article-body h3 {
  margin-top: 48px;
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

/* 섹션 안에서 h3 소제목이 body 밖(형제)으로 오는 경우에도 같은 간격을 쓴다 */
.build-story-article > h3 {
  margin-top: 48px;
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

@media (min-width: 721px) {
  .build-story-article-body h3,
  .build-story-article > h3 {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 16px;
  }
}

/* H3 → 설명: 데스크톱 14~18px · 모바일 12~16px(위 margin-bottom이 이미 담당) */
h3 + .build-story-article-body {
  margin-top: 0;
}

/* 강조 박스 — 결론만 한 번 더 정리(회색 박스), 카드처럼 반복하지 않는다 */
.build-story-article-callout {
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: var(--bs-radius-lg);
  background: var(--bs-color-surface);
}

.build-story-article-callout p {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--bs-color-text-primary);
}

.build-story-article-callout__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
  margin-bottom: 10px;
}

.build-story-article-callout p + p {
  margin-top: var(--space-sm); /* 콜아웃 내부 문장 사이: 10~14px */
}

.build-story-article-callout__sub {
  margin-top: 10px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--bs-color-text-tertiary) !important;
}

/* 작은 구조 그림 — 가로 흐름, 마지막 단계는 향후 계획(점선)으로 구분 */
/* 3개(위 줄) + 2개(아래 줄) 고정 2행 구조 — 화면 폭에 따라 들쭉날쭉 줄바꿈되지 않게
   안정적으로 배치하고, 전체를 화면(본문 폭) 가운데로 정렬한다. */
.build-story-flow-diagram {
  margin: 32px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.build-story-flow-diagram__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.build-story-flow-diagram__step {
  padding: 10px 14px;
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-color-text-primary);
  white-space: nowrap;
}

.build-story-flow-diagram__step--future {
  background: none;
  border: 1px dashed var(--bs-color-border-strong);
  color: var(--bs-color-text-tertiary);
  font-weight: 500;
}

.build-story-flow-diagram__arrow {
  color: var(--bs-color-text-tertiary);
  font-size: 13px;
  flex-shrink: 0;
}

/* 아래 화살표 전용 트랙 — 폭을 다이어그램 전체(=1행 폭)와 맞추고,
   화살표는 이 트랙 안에서 JS가 계산한 위치(1행 마지막 버블의 가로 중심)로
   절대 배치한다. JS 실행 전/실패 시에는 가운데 정렬로 대체된다. */
.build-story-flow-diagram__arrow-row {
  position: relative;
  width: 100%;
  height: 18px;
}

.build-story-flow-diagram__arrow--down {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  padding: 2px 0;
}

@media (max-width: 640px) {
  .build-story-flow-diagram__row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   제품 소개 섹션의 4단계 작동 방식 다이어그램(사용자 → AI → 코드 → 사용자).
   HTML/CSS로만 구현하고 PNG 텍스트는 쓰지 않는다.
   --------------------------------------------------------------------- */
.build-story-workflow-diagram__title {
  text-align: center;
  margin: var(--bs-space-4) 0 0;
}

.build-story-workflow-diagram {
  display: flex;
  align-items: stretch;
  gap: 12px;
  max-width: 1080px;
  margin: var(--bs-space-3) auto 0;
  padding: 0;
  list-style: none;
}

.build-story-workflow-diagram__step {
  flex: 1 1 0;
  min-width: 0;
  padding: 20px 16px;
  border-radius: var(--bs-radius-lg);
  border: 1px solid var(--bs-color-border);
  background: var(--bs-color-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.build-story-workflow-diagram__step--ai {
  background: var(--bs-color-accent-soft);
  border-color: transparent;
}

.build-story-workflow-diagram__step--code {
  border-color: var(--bs-color-border-strong);
}

.build-story-workflow-diagram__step--confirm {
  background: var(--bs-color-surface);
  border-color: transparent;
}

.build-story-workflow-diagram__role {
  font-size: 12px;
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
}

.build-story-workflow-diagram__step-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
  margin: 0;
}

.build-story-workflow-diagram__step-text,
.build-story-workflow-diagram__step-example {
  font-size: 15px;
  color: var(--bs-color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.build-story-workflow-diagram__step-example {
  padding: 8px 10px;
  background: var(--bs-color-bg-soft);
  border-radius: var(--bs-radius-md);
  border: 1px solid var(--bs-color-border);
  width: fit-content;
}

.build-story-workflow-diagram__arrow {
  align-self: center;
  color: var(--bs-color-text-tertiary);
  font-size: 16px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .build-story-workflow-diagram {
    flex-direction: column;
    gap: 14px;
  }

  .build-story-workflow-diagram__arrow {
    transform: rotate(90deg);
  }
}

/* ---------------------------------------------------------------------
   주문 검증 섹션의 자동화 범위 다이어그램 — 현재 프로토타입(실선)과
   향후 주문 연결(점선)을 하나의 흐름으로 이어 보여준다.
   --------------------------------------------------------------------- */
.build-story-scope-diagram {
  max-width: 1040px;
  margin: var(--bs-space-4) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bs-space-2);
}

.build-story-scope-diagram__title {
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: var(--bs-color-text-primary);
  margin: 0 0 8px;
}

.build-story-scope-diagram__region {
  width: 100%;
  padding: 20px 24px;
  border-radius: var(--bs-radius-lg);
}

.build-story-scope-diagram__region--current {
  border: 1px solid var(--bs-color-border);
  background: var(--bs-color-bg);
}

.build-story-scope-diagram__region--future {
  border: 1px dashed var(--bs-color-border-strong);
  background: var(--bs-color-accent-soft);
}

.build-story-scope-diagram__region-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
  margin: 0 0 12px;
  text-align: center;
}

.build-story-scope-diagram__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.build-story-scope-diagram__step {
  padding: 10px 14px;
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-color-text-primary);
  white-space: nowrap;
}

.build-story-scope-diagram__step--future {
  background: rgba(255, 255, 255, 0.65);
  border: 1px dashed var(--bs-color-border-strong);
}

.build-story-scope-diagram__step--highlight {
  background: var(--bs-color-accent-soft);
}

.build-story-scope-diagram__region--future .build-story-scope-diagram__step--highlight {
  background: var(--bs-color-accent);
  border-color: transparent;
  font-weight: 700;
}

.build-story-scope-diagram__step-arrow {
  color: var(--bs-color-text-tertiary);
  font-size: 13px;
}

.build-story-scope-diagram__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.build-story-scope-diagram__connector-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--bs-color-text-tertiary);
}

.build-story-scope-diagram__connector-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bs-color-text-tertiary);
}

.build-story-scope-diagram__exceptions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.build-story-scope-diagram__exceptions li {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-bg);
  border: 1px solid var(--bs-color-border-strong);
  color: var(--bs-color-text-tertiary);
}

.build-story-scope-diagram__caption {
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-color-text-primary);
  max-width: 640px;
}

@media (max-width: 640px) {
  .build-story-scope-diagram__region {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .build-story-scope-diagram__steps {
    flex-direction: column;
    align-items: stretch;
  }

  .build-story-scope-diagram__step-arrow {
    align-self: center;
    transform: rotate(90deg);
  }
}

/* 인터뷰/이전-이후처럼 짧은 항목 3개 이하를 나열할 때만 쓴다(카드 그리드 아님) */
.build-story-article-points {
  margin-top: var(--space-lg); /* 본문 → 리스트: 24px */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 리스트 항목 사이: 12~16px */
}

.build-story-article-point {
  padding-left: var(--bs-space-3);
  border-left: 2px solid var(--bs-color-border-strong);
}

.build-story-article-point__title {
  font-size: 18px; /* 본문(17px)보다 작아 보이지 않도록 +1px */
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-article-point__text {
  margin-top: 6px;
  font-size: var(--bs-text-small);
  line-height: 1.7;
  color: var(--bs-color-text-secondary);
}

/* 이전 → 이후 한 쌍 비교(문제 재정의용, 카드 아님) */
.build-story-article-shift {
  margin-top: var(--bs-space-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--bs-space-2);
  align-items: center;
}

.build-story-article-shift__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
  margin-bottom: 6px;
}

.build-story-article-shift__text {
  font-size: var(--bs-text-small);
  line-height: 1.6;
  color: var(--bs-color-text-primary);
}

.build-story-article-shift__arrow {
  color: var(--bs-color-text-tertiary);
  font-size: 18px;
}

@media (max-width: 560px) {
  .build-story-article-shift {
    grid-template-columns: 1fr;
  }
  .build-story-article-shift__arrow {
    transform: rotate(90deg);
    justify-self: flex-start;
  }
}

/* 일반 대표 이미지(조사 자료 등) — 전 48~56px · 후 72~96px */
.build-story-article-figure {
  margin: 56px auto 0;
}

.build-story-article-figure + .build-story-article-body,
.build-story-article-figure + .build-story-article-callout,
.build-story-article-figure + h3 {
  margin-top: 88px;
}

/* ---------------------------------------------------------------------
 * 제품 화면 플로우(§7) — 각 단계는 콘텐츠 높이만큼만 차지한다.
 * 이미지 뒤 320px 여백 문제의 실제 원인은 vh 가 아니라 섹션 padding-block
 * 이 겹친 것이었지만, 단계 사이 간격도 이 컴포넌트가 직접 소유하게 해
 * 섹션 패딩과 이중으로 더해지지 않게 한다.
 * --------------------------------------------------------------------- */
.build-story-product-flow {
  margin-top: 56px;
}

.build-story-product-step {
  /* 22차 개편 — 단계 사이 세로 여백을 80px → 66px로 줄여(약 18% 축소)
     제품 흐름보다 스크롤 길이가 먼저 느껴지는 문제를 줄인다(§사용자 확정). */
  margin-top: 66px;
}

.build-story-product-step:first-child {
  margin-top: 0;
}

.build-story-product-step__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-product-step__text {
  margin-top: 10px;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: #4e5968;
}

.build-story-product-figure {
  width: min(100%, 420px);
  /* 22차 개편 — 설명 문구와 이미지 사이 간격을 24px → 16px로 줄인다
     (§사용자 확정: "화면 설명과 이미지 사이 간격 축소"). */
  margin: 16px auto 0;
  border-radius: var(--bs-radius-lg);
  border: 1px solid var(--bs-color-border);
  overflow: hidden;
}

.build-story-product-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 13차 개편: 제품 흐름(작은 진행 화면)과 결과 영역(큰 결과 화면)의 크기를
   구분해 같은 결과 화면이 비슷한 크기로 반복되어 보이지 않게 한다.
   22차 개편 — 세 화면이 작게 느껴진다는 피드백으로 300px → 340px로
   약 13% 확대했다(§사용자 확정, 세 단계 모두 같은 --compact 값을 써서
   표시 너비는 계속 통일돼 있다). */
.build-story-product-figure--compact {
  width: min(100%, 340px);
}

.build-story-product-figure--large {
  width: min(100%, 640px);
}

.build-story-product-caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bs-color-text-tertiary);
  text-align: center;
}

/* 방향 비교 표 · 조사 비교 표 — 공통 */
.build-story-article-table {
  margin-top: 32px;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bs-text-small);
}

.build-story-article-table th,
.build-story-article-table td {
  text-align: left;
  padding: 18px 18px;
  border-bottom: 1px solid var(--bs-color-border);
  vertical-align: top;
  line-height: 1.6;
}

.build-story-article-table th {
  color: var(--bs-color-text-tertiary);
  font-weight: 700;
}

.build-story-article-table td {
  color: var(--bs-color-text-secondary);
  line-height: 1.6;
}

/* 제품을 만든 순서 — 날짜 없이 번호 + 제목 + 짧은 설명만 */
.build-story-process-steps {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.build-story-process-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--bs-space-3);
}

.build-story-process-step__number {
  font-size: 17px;
  font-weight: 700;
  color: var(--bs-color-text-tertiary);
}

.build-story-process-step__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-process-step__text {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: #4e5968;
}

@media (max-width: 480px) {
  .build-story-process-step {
    grid-template-columns: 28px 1fr;
  }
}

@media (max-width: 480px) {
  .build-story-article-timeline__day {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* =========================================================================
 * 히어로 제품 프리뷰(5차 간격 정리) — 읽을 수 있는 크기로 확대 + 왼쪽 채팅만 모션.
 *
 * 하단 여백: 다음 섹션(product-intro)이 이미 .build-story-section 의
 * padding-top(112px)을 가지므로, 여기서는 작게만 더해 미리보기와 다음
 * 섹션 제목이 하나의 흐름으로 이어지게 한다(과도하게 떨어지지 않게).
 * ========================================================================= */
.build-story-hero {
  /* 18차 개편: HERO가 뷰포트를 억지로 채우지 않고 콘텐츠 높이만큼만
     차지하게 한다(min-height:100vh·space-between 등은 원래 없었다 —
     확인 후 제거할 것이 없었다). 하단은 36px만 두고, 다음 섹션 자체
     padding-block(60px)과 합쳐 "과정 보기 링크 → 다음 섹션" 96px를
     맞춘다(§여기서 96px를 다 주면 이중으로 더해진다). */
  padding-top: 88px;
  padding-bottom: 36px;
}

@media (max-width: 720px) {
  .build-story-hero {
    /* 모바일 다음 섹션 padding-block(76px)과 합쳐 72px에 가깝게 맞춘다 */
    padding-bottom: 0;
  }
}

.hero-product-preview {
  /* 두 카드를 동일 폭으로 두려면 5:5에 가까운 여유 폭이 필요해 960px로
     넓혔다(기존 820px는 60:40 비율 전제였다). */
  width: min(calc(100% - 48px), 960px);
  margin: 64px auto 0; /* CTA → 목업: 64px */

  /* 첫 화면엔 실제 높이의 46%만 보이고(절단 높이는 script.js가 실측해서
     인라인으로 지정), 사용자가 스크롤을 시작하거나 모션이 재생되는 시점에
     is-revealed가 붙어 전체가 드러난다 */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.hero-product-preview.is-revealed {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-product-cards {
  display: grid;
  /* 18차 개편: 결과 카드만 더 크고 무겁게 보이지 않도록 두 카드를 동일
     폭으로 맞췄다(기존 40:60 → 50:50). */
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  align-items: start;
}

.hero-product-card {
  width: 100%;
  min-width: 0;
}

.hero-product-frame {
  /* 18차 개편: 고정 aspect-ratio·min/max-height를 없애 프레임이 실제
     콘텐츠(말풍선 스택 / 결과 요약 크롭) 높이에 맞게 자연스럽게 끝나게
     했다 — 이전에는 이미지가 프레임보다 짧아 안에 빈 흰 영역이 남았다. */
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 왼쪽 채팅 — 18차 개편: 겹쳐 쌓던 절대좌표 스택(top:0/30/50%)을 버렸다.
   새 문구(삼성전자 시나리오)는 옛 AAPL 캡처보다 길어서, 겹쳐 쌓으면 뒤
   말풍선이 앞 말풍선의 마지막 문장을 가려 "잘린 것처럼" 보이는 문제가
   있었다. 지금은 순서대로 쌓아(margin-top) 각 말풍선이 서로를 가리지
   않게 한다 — 페이드인 모션(opacity/transform)은 그대로 유지한다. */
.hero-chat-bubble {
  position: relative;
  width: 100%;
  opacity: 0;
}

.hero-chat-bubble img {
  /* 18차 개편: 오른쪽 결과 카드와 세로 크기를 맞추려 90%로 10% 축소했다
     (텍스트가 이미지에 포함돼 있어 폰트 크기만 따로 줄일 수 없다). 왼쪽
     말풍선은 왼쪽 정렬을 유지하고, 사용자 말풍선만 오른쪽 정렬을 유지한다.
     모바일(≤720px)에서는 이미 두 카드 높이가 거의 맞아 90%를 유지한다. */
  display: block;
  width: 90%;
  height: auto;
}

/* 19차 개편: 데스크톱 폭에서는 왼쪽 채팅 카드가 오른쪽 결과 카드보다
   여전히 커서(§사용자 확정: "여전히 1번카드가 길어"), 데스크톱에서만
   한 번 더 줄인다 — 90% → 80%(추가 ~11% 축소). */
@media (min-width: 721px) {
  .hero-chat-bubble img {
    width: 80%;
  }
}

.hero-chat-bubble--user img {
  margin-left: auto;
}

.hero-chat-bubble--q1 {
  /* 캡처를 예시 문구 끝까지 그대로 써서(더 잘라내지 않음) 말풍선 배경
     자체의 둥근 하단이 보이게 한다 — 컨테이너에 border-radius를 씌우는
     방식은 말풍선이 이미지 폭 전체를 채우지 않아 효과가 없었다. */
  transform: translateY(10px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}

.hero-chat-bubble--user {
  margin-top: 16px;
  transform: translateX(12px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}

.hero-chat-bubble--q2 {
  margin-top: 16px;
  transform: translateY(10px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}

.hero-chat-bubble--in {
  opacity: 1;
  transform: translate(0, 0);
}

/* 오른쪽 결과 — 화면 전체 페이드인 + 핵심 숫자 영역만 한 번 강조 */
.hero-result-frame {
  /* 18차 개편: 이미지를 프레임 가장자리까지 꽉 채우지 않고 안쪽 여백을 둬
     카드답게 보이게 하고, 왼쪽 채팅 카드와 세로 크기 차이도 줄인다.
     카드 자체는 더 이상 새로 나타나지 않는다(§처음부터 보임) — 왼쪽 채팅이
     등장하는 동안 오른쪽 카드가 매번 다시 페이드인하면 산만해서, 카드는
     고정해 두고 평가손익 숫자 롤업 + 스켈레톤 셰메 두 가지 모션만 왼쪽과
     동시에 재생한다. */
  padding: 20px 20px 32px;
}

/* 실제 캡처 이미지와 그 위에 겹치는 숫자 롤업 오버레이(.hero-metric-value)의
   기준 박스 — 프레임 자체는 이제 여백(padding)과 스켈레톤 줄까지 포함하므로
   이미지 기준 좌표(%)를 쓰려면 이미지만 감싸는 위치 기준점이 따로 필요하다. */
.hero-result-image-wrap {
  position: relative;
}

.hero-result-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* 18차 개편 — 실제 화면 캡처 아래, 왼쪽 채팅 카드와 세로 크기를 맞추기 위한
   가벼운 스켈레톤 로딩 표시(실제 UI를 흉내 내는 목업이 아니라 "아래 내용이
   더 있다"는 뉘앙스만 준다). 색은 중립 회색, 움직임은 은은한 shimmer 하나뿐. */
.hero-skeleton-lines {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-skeleton-line {
  height: 15px;
  border-radius: 7px;
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 50%, #eef0f2 75%);
  background-size: 200% 100%;
  animation: hero-skeleton-shimmer 1.8s ease-in-out infinite;
}

.hero-skeleton-line--short {
  width: 55%;
}

@keyframes hero-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-skeleton-line {
    animation: none;
  }
}

/* 월 최대 투자 금액 — 실제 화면의 숫자 자리에 라이브 텍스트를 겹쳐 자릿수 롤업 */
.hero-metric-value {
  /* 실제 화면(AnalysisBody.tsx)의 평가손익 숫자와 같은 위치에 겹치도록
     430px 캡처 기준으로 다시 측정한 좌표(§18차 개편). 폰트 값도 실제
     화면의 text-display(28px/700/-1px, #191919, tabular-nums)와 같다. */
  position: absolute;
  left: 4.65%;
  top: 14.7%;
  width: 90.7%;
  height: 16%;
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -1px;
  color: var(--bs-color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

.hero-odometer-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}

.hero-odometer-digit__reel {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(0.16, 0.9, 0.35, 1);
}

.hero-odometer-digit__reel span {
  height: 1em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-odometer-static {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-odometer-digit__reel {
    transition: none;
  }
}

.hero-product-caption {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #8b95a1;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-chat-bubble {
    transition: opacity 150ms ease-out;
    transform: none !important;
  }
  .hero-chat-bubble--in {
    opacity: 1;
  }
}

/* 18차 개편 — 모바일에서는 탭으로 하나씩 전환하지 않고 두 화면을 순서대로
   세로로 쌓는다(§CTA·목업·과정 보기가 하나의 흐름으로 이어지게). 탭
   UI(라디오 전환)는 완전히 제거했다. */
@media (max-width: 720px) {
  .hero-product-preview {
    margin-top: 48px; /* CTA → 첫 목업 */
  }

  .hero-product-cards {
    display: block;
  }

  .hero-product-card {
    max-width: 340px;
    margin-inline: auto;
  }

  .hero-product-cards .hero-product-card + .hero-product-card {
    margin-top: 48px; /* 첫 목업 설명 → 두 번째 목업 */
  }

  .build-story-hero__more-link {
    margin-top: 36px; /* 두 번째 목업 설명 → 과정 보기 */
  }
}

/* 조사 과정 4단계 — 번호 + 제목 + 짧은 설명(카드 아님) */
.build-story-research-flow {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}

.build-story-research-flow > div {
  padding-left: 20px;
  border-left: 2px solid var(--bs-color-border-strong);
}

.build-story-research-flow strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-research-flow span {
  display: block;
  margin-top: 4px;
  font-size: var(--bs-text-small);
  line-height: 1.6;
  color: var(--bs-color-text-secondary);
}

@media (max-width: 640px) {
  .build-story-research-flow {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
 * 책갈피형 목차 — 독자가 궁금해할 질문 7개로 현재 위치 표시 + 이동.
 * 본문을 밀지 않는 fixed 보조 내비게이션이며, 1240px 이하에서는 숨기고
 * 모바일 목차 버튼 + 하단 시트로 대체한다.
 * ========================================================================= */

/* section 대표 anchor — 레이아웃에 아무 영향을 주지 않는 스크롤 타깃 */
.build-story-section-anchor {
  display: block;
  position: relative;
  top: -96px;
  width: 0;
  height: 0;
  visibility: hidden;
}

/* 기존 section을 그대로 anchor로 재사용하는 경우(#problem, #hypothesis)의 스크롤 여백 */
#problem,
#hypothesis {
  scroll-margin-top: 96px;
}

/* -------------------------------------------------------------------------
 * 데스크톱 플로팅 책갈피
 * ----------------------------------------------------------------------- */
.build-story-bookmark {
  position: fixed;
  top: 50%;
  right: max(24px, calc((100vw - 1280px) / 2));
  transform: translateY(-50%) translateX(6px);
  z-index: 40;

  /* 가장 긴 항목("어떤 문제를 풀기로 했나요?")도 절대 두 줄로 꺾이지 않도록
     실측 텍스트 폭(132px) + 점·여백을 넉넉히 더한 값 */
  width: 204px;
  padding: 9px;

  border: 1px solid rgba(25, 31, 40, 0.07);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);

  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 200ms ease,
    transform 200ms ease,
    visibility 200ms ease;
}

.build-story-bookmark.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.build-story-bookmark nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.build-story-bookmark a {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 40px;
  padding: 8px 10px;

  border-radius: 13px;
  color: #8b95a1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap; /* 절대 두 줄로 꺾이지 않게 */
  text-decoration: none;

  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.build-story-bookmark a:hover {
  color: #4e5968;
  background: rgba(242, 244, 246, 0.76);
}

.build-story-bookmark a:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-bookmark__dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d1d6db;

  transition:
    width 150ms ease,
    height 150ms ease,
    background-color 150ms ease;
}

.build-story-bookmark a[aria-current="true"] {
  color: #191f28;
  font-weight: 650;
  background: rgba(255, 212, 0, 0.13);
}

.build-story-bookmark a[aria-current="true"] .build-story-bookmark__dot {
  width: 7px;
  height: 7px;
  background: #f2c94c;
}

@media (max-width: 1240px) {
  .build-story-bookmark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-story-bookmark {
    transition: opacity 1ms linear, visibility 1ms linear;
    transform: translateY(-50%) !important;
  }
}

/* -------------------------------------------------------------------------
 * 모바일/태블릿(≤1240px) 목차 버튼
 * ----------------------------------------------------------------------- */
.build-story-mobile-toc-button {
  display: none;
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 40;

  min-width: 58px;
  height: 44px;
  padding: 0 16px;

  border: 1px solid rgba(25, 31, 40, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);

  color: #333d4b;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.build-story-mobile-toc-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.build-story-mobile-toc-button:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

@media (max-width: 1240px) {
  .build-story-mobile-toc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-story-mobile-toc-button {
    transition: opacity 1ms linear, visibility 1ms linear;
  }
}

/* -------------------------------------------------------------------------
 * 모바일 하단 시트
 * ----------------------------------------------------------------------- */
.build-story-mobile-toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(25, 31, 40, 0.32);
  opacity: 0;
  transition: opacity 220ms ease;
}

.build-story-mobile-toc-overlay.is-open {
  opacity: 1;
}

.build-story-mobile-toc-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-height: 78vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #ffffff;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);

  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.build-story-mobile-toc-sheet.is-open {
  transform: translateY(0);
}

.build-story-mobile-toc-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 6px auto 14px;
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-border-strong);
}

.build-story-mobile-toc-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.build-story-mobile-toc-sheet__header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-mobile-toc-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bs-color-surface);
  color: var(--bs-color-text-secondary);
  font-size: 14px;
  cursor: pointer;
}

.build-story-mobile-toc-sheet__close:hover {
  background: var(--bs-color-surface-strong);
}

.build-story-mobile-toc-sheet__close:focus-visible,
.build-story-mobile-toc-button:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-mobile-toc-sheet__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 4px;
}

.build-story-mobile-toc-sheet__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 13px;
  color: var(--bs-color-text-secondary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  word-break: keep-all;
  text-decoration: none;
}

.build-story-mobile-toc-sheet__nav a:hover {
  background: var(--bs-color-surface);
}

.build-story-mobile-toc-sheet__nav a:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-mobile-toc-sheet__nav a[aria-current="true"] {
  color: #191f28;
  font-weight: 700;
  background: rgba(255, 212, 0, 0.13);
}

.build-story-mobile-toc-sheet__nav a[aria-current="true"] .build-story-bookmark__dot {
  width: 7px;
  height: 7px;
  background: #f2c94c;
}

body.build-story-scroll-lock {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .build-story-mobile-toc-overlay,
  .build-story-mobile-toc-sheet {
    transition: opacity 1ms linear, transform 1ms linear;
  }
}

/* =========================================================================
 * 스티키 헤더 + 맨 위로 가기 버튼 — 책갈피형 목차를 대체한다.
 * 1섹션(HERO)을 벗어나 스크롤하면 나타난다.
 * ========================================================================= */
.build-story-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;

  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--bs-color-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
}

.build-story-sticky-header.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.build-story-sticky-header__inner {
  display: flex;
  justify-content: flex-end;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
}

.build-story-sticky-header__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.build-story-sticky-header__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;

  border: 1px solid var(--bs-color-border-strong);
  border-radius: var(--bs-radius-full);
  background: var(--bs-color-bg);
  color: var(--bs-color-text-primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;

  transition: background-color 150ms ease, border-color 150ms ease;
}

.build-story-sticky-header__link:hover {
  background: var(--bs-color-bg-soft);
  border-color: var(--bs-color-text-primary);
}

.build-story-sticky-header__link:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-sticky-header__link--primary {
  border-color: transparent;
  background: var(--bs-color-accent);
  color: var(--bs-color-accent-text);
}

.build-story-sticky-header__link--primary:hover {
  background: var(--bs-color-accent-hover);
  border-color: transparent;
}

.build-story-sticky-header__link--primary:active {
  background: var(--bs-color-accent-pressed);
}

@media (max-width: 640px) {
  .build-story-sticky-header__inner {
    padding: 8px 16px;
  }

  .build-story-sticky-header__link {
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
  }

  /* 24차 개편 — 모바일 헤더는 "투자 리허설 시작하기"·"문제 해결 과정" 두
     개만 남긴다(§사용자 확정). GitHub 링크는 데스크톱 폭에서만 보인다 —
     3개를 다 두면 한 줄에 안 들어가 헤더가 두 줄로 접힌다. */
  .build-story-sticky-header__link--desktop-only {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-story-sticky-header {
    transition: opacity 1ms linear, visibility 1ms linear;
    transform: none !important;
  }
}

.build-story-back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 45;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--bs-color-border-strong);
  background: var(--bs-color-bg);
  color: var(--bs-color-text-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 200ms ease,
    visibility 200ms ease,
    transform 200ms ease,
    background-color 150ms ease;
}

.build-story-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.build-story-back-to-top:hover {
  background: var(--bs-color-bg-soft);
}

.build-story-back-to-top:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .build-story-back-to-top {
    transition: opacity 1ms linear, visibility 1ms linear;
    transform: none !important;
  }
}

/* =========================================================================
 * 페이지 최하단 — 과제 출처 표기(9차 개편에서 히어로 상단에서 이동)
 * ========================================================================= */
.build-story-footer {
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}

.build-story-footer__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.build-story-footer__meta {
  font-size: var(--bs-text-caption);
  color: var(--bs-color-text-tertiary);
}

/* 21차 개편 — 푸터의 PRD 링크는 헤더 알약형 버튼과 같은 크기·모양을 쓰되
   자리만 푸터 크레딧 옆으로 옮긴 것이라 별도 크기 조정은 하지 않는다. */
.build-story-footer__prd-link {
  flex: 0 0 auto;
}

/* =========================================================================
 * 인터뷰 원문 모달 — "개인용 AI 투자 도구 개발자 1:1 심층 인터뷰" 링크를
 * 누르면 원문 전체를 보여준다. 기존 모바일 목차 시트(overlay + is-open +
 * body.build-story-scroll-lock) 패턴을 그대로 따르되, 하단 시트가 아니라
 * 중앙 다이얼로그로 만들었다.
 * ========================================================================= */
.build-story-interview-modal-trigger {
  color: var(--bs-color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--bs-color-border-strong);
  text-underline-offset: 2px;
  cursor: pointer;
}

.build-story-interview-modal-trigger:hover {
  color: var(--bs-color-text-primary);
}

.build-story-interview-modal-trigger:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-interview-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;

  background: rgba(25, 31, 40, 0.42);

  opacity: 0;
  /* visibility는 transition 목록에 넣지 않는다 — 넣으면 hidden→visible 전환이
     한 프레임 늦게 반영되어, 열리는 즉시 닫기 버튼에 포커스를 옮기지 못한다 */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.build-story-interview-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.build-story-interview-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 61;

  width: min(calc(100% - 32px), 640px);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 20px;
  background: var(--bs-color-bg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);

  opacity: 0;
  /* visibility는 transition 목록에 넣지 않는다 — 넣으면 hidden→visible 전환이
     한 프레임 늦게 반영되어, 열리는 즉시 닫기 버튼에 포커스를 옮기지 못한다 */
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -48%) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
}

.build-story-interview-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.build-story-interview-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;

  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--bs-color-border);
}

.build-story-interview-modal__header h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-color-text-primary);
  word-break: break-all;
}

.build-story-interview-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;

  border: none;
  border-radius: 50%;
  background: var(--bs-color-bg-soft);
  color: var(--bs-color-text-secondary);
  font-size: 15px;
  cursor: pointer;
}

.build-story-interview-modal__close:hover {
  background: var(--bs-color-border);
}

.build-story-interview-modal__close:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-interview-modal__body {
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.build-story-interview-modal__intro {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 650;
  color: var(--bs-color-text-primary);
}

.build-story-interview-modal__meta {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--bs-color-text-tertiary);
}

.build-story-interview-modal__transcript {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bs-color-text-secondary);
  word-break: keep-all;
}

/* 20차 개편 — 딥리서치·유튜브 사례 합성 모달 본문(research-content.js가
   채운다). 인터뷰 모달과 같은 오버레이/다이얼로그 껍데기를 재사용하고,
   본문 안 요소(제목·문단·표·목록)만 여기서 스타일링한다. */
.build-story-research-modal__body h3 {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-color-text-primary);
}

.build-story-research-modal__body h4 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bs-color-text-primary);
}

.build-story-research-modal__body h4:first-child {
  margin-top: 0;
}

.build-story-research-modal__body p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--bs-color-text-secondary);
  word-break: keep-all;
}

.build-story-research-modal__body p:first-child {
  margin-top: 0;
}

.build-story-research-modal__body ul,
.build-story-research-modal__body ol {
  margin: 8px 0 0;
  padding-left: 20px;
}

.build-story-research-modal__body li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--bs-color-text-secondary);
  word-break: keep-all;
}

.build-story-research-modal__body li + li {
  margin-top: 2px;
}

.build-story-research-modal__warning {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--bs-color-border);
  border-radius: 10px;
  background: var(--bs-color-bg-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--bs-color-text-tertiary);
}

.build-story-research-modal__table-wrap {
  margin-top: 12px;
  overflow-x: auto;
  border: 1px solid var(--bs-color-border);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.build-story-research-modal__table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
}

.build-story-research-modal__table-wrap th,
.build-story-research-modal__table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bs-color-border);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  color: var(--bs-color-text-secondary);
  word-break: keep-all;
  vertical-align: top;
}

.build-story-research-modal__table-wrap th {
  background: var(--bs-color-bg-soft);
  color: var(--bs-color-text-primary);
  font-weight: 700;
  white-space: nowrap;
}

.build-story-research-modal__table-wrap tr:last-child td {
  border-bottom: none;
}

.build-story-research-modal__refs {
  font-size: 13px;
}

.build-story-research-modal__refs a {
  color: var(--bs-color-text-secondary);
  word-break: break-all;
}

.build-story-research-modal__refs a:hover {
  color: var(--bs-color-text-primary);
}

@media (max-width: 640px) {
  .build-story-interview-modal {
    width: calc(100% - 24px);
    max-height: 82vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-story-interview-modal-overlay,
  .build-story-interview-modal {
    transition: opacity 1ms linear;
  }

  .build-story-interview-modal {
    transform: translate(-50%, -50%) !important;
  }
}

/* =========================================================================
 * 제품 결정 기록(Product Decision Log) — 구현 방식과 검증 사이, 얇은 구분선
 * 아코디언. 거대한 회색 박스로 감싸지 않고, 항목마다 위/아래 테두리 한 줄로만
 * 구분한다. 한 번에 하나만 열린다(one-open-at-a-time, script.js).
 * ========================================================================= */
.build-story-pdl__list {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--bs-color-border);
}

.build-story-pdl__item {
  border-bottom: 1px solid var(--bs-color-border);
}

.build-story-pdl__item-heading {
  margin: 0;
}

.build-story-pdl__item-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 4px;

  border: none;
  background: transparent;
  color: var(--bs-color-text-primary);
  font-family: inherit;
  font-size: 17px;
  font-weight: 650;
  text-align: left;
  letter-spacing: -0.01em;
  cursor: pointer;

  transition: color 150ms ease;
}

.build-story-pdl__item-trigger:hover {
  color: var(--bs-color-text-secondary);
}

.build-story-pdl__item-trigger:focus-visible {
  outline: 2px solid rgba(25, 31, 40, 0.7);
  outline-offset: 2px;
}

.build-story-pdl__chevron {
  flex: 0 0 auto;
  color: var(--bs-color-text-tertiary);
  transition: transform 200ms ease;
}

.build-story-pdl__item-trigger[aria-expanded="true"] .build-story-pdl__chevron {
  transform: rotate(180deg);
}

.build-story-pdl__panel {
  padding: 0 4px 22px;
}

.build-story-pdl__panel p {
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: -0.018em;
  color: #4e5968;
  word-break: keep-all;
}

.build-story-pdl__panel p + p {
  margin-top: 14px;
}

.build-story-pdl__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  flex-shrink: 0;
  margin-right: 8px;
  padding: 2px 0;
  border-radius: var(--bs-radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.build-story-pdl__label--problem {
  background: var(--bs-color-bg-soft);
  color: var(--bs-color-text-secondary);
}

.build-story-pdl__label--decision {
  background: var(--bs-color-accent-soft);
  color: var(--bs-color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .build-story-pdl__chevron {
    transition: none;
  }
}

/* =========================================================================
 * PRODUCT DEFINITION — 카드 장식(배경·테두리·그림자) 없이 .build-story-grid
 * 3열 그리드 안에 얇은 밑줄 제목 + 본문만 두는 목록.
 * ========================================================================= */
.build-story-definition-item__title {
  font-size: var(--bs-text-card-title);
  font-weight: 700;
  color: var(--bs-color-text-primary);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bs-color-border);
  word-break: keep-all;
}

.build-story-definition-item__text {
  font-size: var(--bs-text-small);
  line-height: 1.75;
  color: var(--bs-color-text-secondary);
  word-break: keep-all;
}