/* chapter3.css — Chapter 3 (정책의 시선 / 다국가 정책 비교) 전용 스타일
   원본: chapter3.html 의 Chapter 5 정책 CSS 영역 (lines 2219-2819)
   - lenses.css 패턴과 동일: .lenses 스코프 안에 nesting
   - chapter3.html 의 sage accent(var(--mint))를 우리 mint 로 치환
*/

.lenses {
  /* ====== Chapter 5: 다국가 정책 비교 (우주 정책) ====== */
  .pol-card { padding: 0; }

  /* (jolt 방지는 .pol-empty 자체의 min-height 로 처리 — 본문 460 룰 제거) */

  .pol-top-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }
  .pol-summary-box {
    background: #FFFFFF;
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03);
  }
  .pol-summary-label {
    font-size: 9.5px;
    color: var(--fg-soft);
    opacity: 0.8;
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .pol-summary-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.5;
    letter-spacing: -0.005em;
  }
  .pol-summary-box.accent .pol-summary-label { color: var(--accent); }
  .pol-summary-box.accent .pol-summary-value { color: var(--fg); }

  /* 국가 그리드 — flex layout.
     단일 국가 모드일 때 가운데 정렬되고, 양국 모드일 때 자연스럽게
     양옆으로 펼쳐지는 모션을 위해 grid 대신 flex 채택.
     align-items: stretch 로 두 country 카드의 세로 길이가 일치하도록 (taller
     쪽에 맞춰 stretch). 단일 모드에서도 visible 카드의 가로 폭이 양국
     모드와 동일하게 50%-gap/2 유지되도록 .pol-country 에서 flex-basis 고정. */
  .pol-grid {
    display: flex;
    justify-content: center;
    /* flex-start (not stretch) so a dual-country mode doesn't pull both
       cards up to the taller one's height — keeps single vs dual mode
       visually consistent in length. */
    align-items: flex-start;
    gap: 14px;
  }
  .pol-country {
    background: #FFFFFF;
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 10px;
    padding: 14px 14px 12px;
    box-shadow:
      0 1px 2px rgba(15, 17, 21, 0.03),
      0 4px 14px rgba(15, 17, 21, 0.04);
  }
  .pol-country-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  .pol-country-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .pol-country-flag {
    font-size: 20px;
    border-radius: 1.5px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
    align-self: flex-start;
  }
  .pol-country-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .pol-country-type {
    font-size: 11px;
    color: var(--fg-soft);
    opacity: 0.75;
    letter-spacing: 0;
    text-align: right;
    line-height: 1.45;
    /* 200px: "NASA · FCC · Space Force" 한 줄 들어오게 (160px 였을 때 wrap
       → 미국 header가 CN 보다 1줄 더 커져서 카드 전체 길이 불일치). */
    max-width: 200px;
  }

  .pol-section {
    margin-bottom: 10px;
  }
  .pol-section:last-child {
    margin-bottom: 0;
  }
  .pol-section-label {
    font-size: 11px;
    color: var(--fg-soft);
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: 8px;
  }

  /* 아젠다 태그 */
  .pol-agenda {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .pol-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 4px 9px;
    border-radius: 999px;
    letter-spacing: -0.005em;
  }

  /* 정책 카드 */
  .pol-policy {
    background: var(--bg-soft);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
  }
  .pol-policy:last-child { margin-bottom: 0; }
  .pol-policy:hover {
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(15, 17, 21, 0.04);
  }
  .pol-policy.orange,
  .pol-policy.red,
  .pol-policy.blue { /* color variants kept for hover only */ }
  .pol-policy-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
  }
  .pol-policy-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.015em;
    line-height: 1.3;
  }
  .pol-policy-src {
    font-size: 9px;
    color: var(--fg-soft);
    opacity: 0.65;
    letter-spacing: 0;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .pol-policy-src:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }
  .pol-policy-desc {
    font-size: 11.5px;
    color: var(--fg-soft);
    line-height: 1.55;
  }

  /* Operating Model (국가 카드 내부) */
  .pol-om {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .pol-om-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .pol-om-row:last-child { border-bottom: none; }
  .pol-om-key {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--fg-soft);
    letter-spacing: 0.04em;
    font-weight: 600;
  }
  .pol-om-val {
    font-size: 12px;
    color: var(--fg);
    line-height: 1.4;
  }
  .pol-om-val.cn strong { color: #5B7FB8; font-weight: 700; }
  .pol-om-val.us strong { color: #C9A56B; font-weight: 700; }

  /* Operating Model 매트릭스 */
  .pol-matrix-block {
    background: #FFFFFF;
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 10px;
    padding: 18px 18px 14px;
    box-shadow:
      0 1px 2px rgba(15, 17, 21, 0.03),
      0 4px 14px rgba(15, 17, 21, 0.04);
  }

  /* 빌드 셀렉터 — chapter1 의 .lens-bar / .lens-chip 패턴에 맞춰 통일 */
  .pol-builder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03);
  }
  .pol-builder-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  /* chapter1 의 .lens-label 과 동일한 톤 */
  .pol-builder-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fg-soft);
    margin-right: 8px;
    min-width: 56px;
    flex-shrink: 0;
  }
  /* chapter1 의 .lens-chip — 흰 배경 pill, sans, 12.5px */
  .pol-builder-chip {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 7px 13px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
    /* transition 은 색/그림자만 — transform 은 즉각 반응하도록 짧게 별도 지정 */
    transition: background-color 0.18s ease,
                color 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
  }
  .pol-builder-chip:not(.disabled):hover {
    border-color: var(--fg);
  }
  /* 클릭 순간 살짝 눌리는 press 피드백 */
  .pol-builder-chip:not(.disabled):active {
    transform: scale(0.96);
  }
  /* chapter1 의 .lens-chip.active — 솔리드 ink 배경 + 흰 글자.
     hover/shadow 변동 없이 한결같이 검정으로 유지 */
  .pol-builder-chip.active,
  .pol-builder-chip.active:hover {
    background: var(--fg);
    color: #FFFFFF;
    border-color: var(--fg);
    box-shadow: none;
  }
  .pol-builder-result {
    font-size: 10px;
    color: var(--fg-soft);
    opacity: 0.7;
    letter-spacing: 0;
    margin-left: auto;
  }
  .pol-builder-result strong { color: var(--accent); font-weight: 700; opacity: 1; }

  .pol-matrix-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .pol-matrix-title-eyebrow {
    font-size: 9.5px;
    color: var(--accent);
    letter-spacing: 0;
    font-weight: 700;
  }
  .pol-matrix {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    gap: 0;
  }
  .pol-matrix-cell {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
    color: var(--fg);
    line-height: 1.45;
  }
  .pol-matrix-cell.head {
    font-size: 9.5px;
    color: var(--fg-soft);
    letter-spacing: 0;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
  }
  .pol-matrix-cell.row-label {
    font-size: 10px;
    color: var(--fg-soft);
    letter-spacing: 0;
    font-weight: 600;
  }
  .pol-matrix-cell.cn { color: var(--fg); }
  .pol-matrix-cell.cn strong { color: #5B7FB8; font-weight: 700; }
  .pol-matrix-cell.us { color: var(--fg); }
  .pol-matrix-cell.us strong { color: #C9A56B; font-weight: 700; }
  .pol-matrix-row:last-child .pol-matrix-cell { border-bottom: none; }

  /* Mobile/tablet: pol-grid 를 세로로 stack. 단, dual-country 모드 (CN + US 둘
     다 표시) 일 때는 각 country 의 max-height 를 강제로 줄여서 viewport 안에
     양쪽 다 들어오게 compress. 데스크탑의 "가로로 구겨지는" transition 의
     모바일 등가물 = "세로로 구겨짐". 솔로 모드 (cn-only / us-only) 일 때는
     기본 상태 그대로 → 압축 없음. */
  @media (max-width: 1024px) {
    .pol-grid { flex-direction: column; align-items: stretch; gap: 10px; }
    .pol-top-summary { grid-template-columns: 1fr 1fr; }
    .pol-matrix { grid-template-columns: 1fr; }
    .pol-matrix-cell.head:not(:first-child) { display: none; }
  }
  /* dual-country 모드에서만 각 country card 압축. 핵심:
       - 비-highlight program 의 illustration 숨김 (제목+태그만 남김)
       - padding 축소
       - max-height 강제 → 기존 transition (0.7s) 이 smooth 한 "구겨짐" 으로 보임
     Golden Dome (.auto-highlight) 만 illustration 유지해서 climax 가 살아있음. */
  @media (max-width: 1024px) {
    .pol-grid:not(.cn-only):not(.us-only) .pol-country {
      max-height: 440px;
      padding: 10px 12px 8px;
    }
    .pol-grid:not(.cn-only):not(.us-only) .pol-program:not(.auto-highlight) .pol-program-illust {
      display: none;
    }
    .pol-grid:not(.cn-only):not(.us-only) .pol-program:not(.auto-highlight) {
      padding: 7px 10px;
    }
    .pol-grid:not(.cn-only):not(.us-only) .pol-program.auto-highlight .pol-program-illust {
      height: 72px;
    }
    /* country header / type 줄도 살짝 컴팩트 */
    .pol-grid:not(.cn-only):not(.us-only) .pol-country-header {
      margin-bottom: 8px;
      padding-bottom: 6px;
    }
    .pol-grid:not(.cn-only):not(.us-only) .pol-country-name { font-size: 14px; }
    .pol-grid:not(.cn-only):not(.us-only) .pol-country-type {
      font-size: 10px;
      max-width: 110px;
    }
  }
  @media (max-width: 640px) {
    .pol-top-summary { grid-template-columns: 1fr; }
    /* pol-builder (Country/Topic 필터) 칩이 좁은 폰에서 한 줄에 다 안 들어가도
       자연스레 wrap. label 도 좀 더 컴팩트하게. */
    .pol-builder-row { gap: 6px; }
    .pol-builder-chip { font-size: 12px; padding: 5px 10px; }
    /* mobile 에선 필터 영역 너무 빽빽 — 첫 두 chip (CN/US, Space/AI) 만 노출.
       Country row: label + CN + US 까지 (4번째 부터인 Korea/EU/Japan 숨김).
       Topic row: label + Space + AI 까지 (4번째 부터인 Datacenter/Defense/Energy 숨김). */
    .pol-builder-row .pol-builder-chip:nth-child(n+4) { display: none; }
    /* Golden Dome popout 의 Issue/Category — selected (.active) 만 노출.
       .ghost (Stargate · CHIPS Act 2.0 · International · Tech demonstration) 숨김. */
    .tflow-chip.ghost { display: none; }
    /* 솔로 모드 (cn-only / us-only) 의 기본 카드 padding/font — dual-mode 압축
       은 ≤1024 블록에서 selector 로 따로 처리되므로 여기엔 안 둠. */
    .pol-country { padding: 12px 10px 10px; }
    .pol-country-name { font-size: 14px; }
    .pol-program { padding: 8px 10px; }
    .pol-program-illust { height: 64px; }
  }

  /* ====== Chapter 5: 대표 우주 프로그램 카드 ====== */
  .pol-programs {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .pol-program {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.15s;
    position: relative;
  }
  /* 자동 데모 시퀀스의 마지막 단계에서 Golden Dome 카드를 한 번 강조하는
     클래스 — popout 등장 전 사용자 시선을 카드로 끌어 자연스럽게 연결. */
  .pol-program.auto-highlight {
    border-color: var(--accent);
    background: rgba(var(--mint-rgb), 0.06);
    box-shadow: 0 0 0 2px rgba(var(--mint-rgb), 0.18),
                0 10px 24px rgba(var(--mint-rgb), 0.22);
    transform: translateY(-2px);
  }
  .pol-program-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .pol-program-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.015em;
    flex: 1;
    line-height: 1.3;
  }
  .pol-program-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .pol-program-tag.cn {
    background: rgba(91, 127, 184, 0.12);
    color: #4A6A9D;
  }
  .pol-program-tag.us {
    background: rgba(201, 165, 107, 0.18);
    color: #7C5B27;
  }
  .pol-program-desc {
    font-size: 12.5px;
    color: var(--fg-soft);
    line-height: 1.55;
  }
  .pol-program-arrow {
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
    opacity: 0;
    transition: all 0.18s;
    margin-left: 2px;
  }

  /* === SVG 일러스트 영역 ===
        country 카드 합산 ≈ 520px (3 cards × 96px illust). lens-card 자체 높이는
        그대로 두면서 viewport 안에 마지막 카드까지 들어오게 살짝 압축. */
  .pol-program-illust {
    width: 100%;
    height: 96px;
    margin: -10px -12px 8px;
    padding: 6px 12px;
    width: calc(100% + 24px);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .pol-program-illust svg {
    width: 100%;
    height: 100%;
    max-width: 240px;
  }
  /* CN 카드: 블루톤 그라데이션 배경 */
  .pol-program-illust.cn-tiangong,
  .pol-program-illust.cn-change,
  .pol-program-illust.cn-standards {
    background: linear-gradient(135deg, rgba(91,127,184,0.04) 0%, rgba(91,127,184,0.10) 100%);
  }
  /* US 카드: 앰버톤 그라데이션 배경 */
  .pol-program-illust.us-artemis,
  .pol-program-illust.us-starshield {
    background: linear-gradient(135deg, rgba(201,165,107,0.04) 0%, rgba(201,165,107,0.10) 100%);
  }
  /* Golden Dome 카드: 액센트 그린 배경 */
  .pol-program-illust.us-golden-dome {
    background: linear-gradient(135deg, rgba(var(--mint-rgb),0.05) 0%, rgba(var(--mint-rgb),0.14) 100%);
  }

  /* === 애니메이션 영역 stage (chapter1·2 의 .universe 와 동일 패턴)
        빈 상태 / 국가 그리드가 같은 세로 공간을 차지하도록 한 단계 감싸서 jolt 방지.
        lens-card-body 안에서 flex: 1 로 남는 세로 공간을 흡수 — min-height 540 은 안전 floor
        (3 cards × 102px illust + padding/gap 안에 들어옴). */
  .pol-stage {
    min-height: 540px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  /* === 빈 상태 (필터 미선택) === */
  .pol-empty {
    padding: 36px 24px;
    text-align: center;
    background: var(--bg-soft);
    border: 1px dashed var(--line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* stage 안에서 가능한 공간을 채워 grid 상태와 동일한 높이 유지 */
    flex: 1;
    transition: opacity 0.3s, transform 0.3s;
  }
  .pol-empty.hidden {
    display: none;
  }
  .pol-empty-icon {
    font-size: 32px;
    color: var(--accent);
    line-height: 1;
    opacity: 0.6;
  }
  .pol-empty-text {
    font-size: 14px;
    color: var(--fg-soft);
    line-height: 1.6;
  }
  .pol-empty-text strong {
    color: var(--fg);
    font-weight: 700;
  }
  .pol-empty-hint {
    font-size: 11.5px;
    color: var(--fg-soft);
    letter-spacing: 0;
    opacity: 0.78;
    margin-top: 4px;
  }
  .pol-empty-chip {
    display: inline-block;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 7px;
    margin: 0 2px;
    font-size: 11px;
    color: var(--fg);
  }

  /* === 칩 disabled (한국/EU/일본/AI 등 비활성)
        chapter1 의 .lens-chip.add-chip 과 동일: dashed border + mono + (+) 원형 아이콘 === */
  .pol-builder-chip.disabled {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--fg-soft);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 7px 11px;
    cursor: not-allowed;
    opacity: 0.7;
  }
  .pol-builder-chip.disabled::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
  }
  .pol-builder-chip.disabled:hover {
    border-color: var(--line);
  }
  .pol-builder-chip:not(.disabled) {
    cursor: pointer;
  }

  /* === pol-grid 등장 애니메이션 (필터 선택 시) === */
  .pol-grid {
    display: none;
  }
  .pol-grid.visible {
    /* 부모 base .pol-grid 가 display:flex 라 visible 일 때도 그대로 flex.
       flex: 1 제거 — pol-grid 가 stage 전체 높이가 아닌 내용물 (tallest
       country card) 높이로 크기 되도록. align-items: stretch 와 함께 사용
       해야 cards 가 적정 높이로 통일됨. stage 의 남는 공간은 overflow:hidden
       으로 처리. */
    display: flex;
    animation: pol-grid-in 0.4s ease-out;
  }
  @keyframes pol-grid-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* 개별 프로그램 카드는 stagger 로 등장 */
  .pol-grid.visible .pol-program {
    animation: pol-card-in 0.5s ease-out both;
  }
  .pol-grid.visible .pol-country[data-country="cn"] .pol-program:nth-child(1) { animation-delay: 0.05s; }
  .pol-grid.visible .pol-country[data-country="cn"] .pol-program:nth-child(2) { animation-delay: 0.15s; }
  .pol-grid.visible .pol-country[data-country="cn"] .pol-program:nth-child(3) { animation-delay: 0.25s; }
  .pol-grid.visible .pol-country[data-country="us"] .pol-program:nth-child(1) { animation-delay: 0.10s; }
  .pol-grid.visible .pol-country[data-country="us"] .pol-program:nth-child(2) { animation-delay: 0.20s; }
  .pol-grid.visible .pol-country[data-country="us"] .pol-program:nth-child(3) { animation-delay: 0.30s; }
  @keyframes pol-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* 국가 카드 flex item:
       flex-basis 를 calc(50% - 7px) 로 고정해서 양국 모드와 단일 모드 모두
       visible 카드의 가로 폭이 동일하게 유지 (gap 14 의 절반인 7 을 뺀 50%).
       max-width: 480 으로 너무 넓어지는 것 방지.
       max-height: 1000 — collapsed 상태와 transition 가능하도록 명시적 ceiling
       을 둔 것. 실제 content 높이가 1000 미만이므로 활성 카드에는 영향 없음.
       단일 모드: 비활성 카드는 flex-basis 0 + max-width 0 + max-height 0 으로
       완전 collapse. (max-height 0 이 없으면 width 0 에 끼인 content 가
       세로로 무한대 줄바꿈돼 align-items: stretch 가 그 높이에 맞춰 active
       카드까지 늘려버림 — 이게 직전에 본 '비어있는 세로 공간' 의 원인.)
       overflow:hidden 으로 collapse 중 내용이 흘러나오지 않게.

       Transition tuning: max-width / max-height / flex-basis / padding /
       border-width 는 cubic-bezier(0.22, 1, 0.36, 1) ease-out-quart 로 0.7s
       — slide-in 이 끝쪽에서 부드럽게 감속. opacity / transform 은 살짝 짧고
       약간 delay (0.1s) 를 줘서 layout 이 먼저 자리잡고 content 가 따라오는
       느낌. */
  .pol-grid .pol-country {
    flex: 0 0 calc(50% - 7px);
    max-width: 480px;
    max-height: 1000px;
    overflow: hidden;
    transition: max-width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                flex-basis 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                border-width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s ease 0.1s,
                transform 0.5s ease 0.1s,
                box-shadow 0.35s ease;
  }
  .pol-grid.cn-only .pol-country[data-country="us"],
  .pol-grid.us-only .pol-country[data-country="cn"] {
    flex-basis: 0;
    max-width: 0;
    max-height: 0;
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
    /* 4 면 padding/border 모두 0 — collapsed 카드가 0×0 으로 완전 사라져야
       active 카드의 stretch 가 정상 높이로 잡힘. */
    padding: 0;
    border-width: 0;
  }

  /* === 비교 분석 하이라이트 (양국 모드에서 한쪽씩 강조) ===
     auto-demo 후반부에 CN ↔ US 하이라이트를 번갈아 띄워 "둘을 비교
     분석할 수 있다" 는 뉘앙스를 전달. is-dimmed 는 살짝 흐리게,
     is-highlight 는 미세하게 살아남는 정도. */
  .pol-grid .pol-country.is-dimmed {
    opacity: 0.42;
    transform: scale(0.985);
  }
  .pol-grid .pol-country.is-highlight {
    box-shadow:
      0 1px 2px rgba(15, 17, 21, 0.04),
      0 10px 28px rgba(15, 17, 21, 0.08);
    transform: translateY(-2px);
  }

  /* === auto-demo 칩 click 시각 피드백 ===
     active 칩의 검정 배경/흰 텍스트가 animation 도중에 깜빡일 가능성을
     차단하기 위해 active 상태에선 명시적으로 다시 못 박아둠. */
  .pol-builder-chip.auto-pulse {
    animation: polChipPulse 0.55s ease;
  }
  .pol-builder-chip.active.auto-pulse {
    background-color: var(--fg);
    color: #FFFFFF;
    border-color: var(--fg);
  }

  /* ============================================================
     Golden Dome popout — mirrors chapter1 .popout pattern
     (position: absolute anchored to .pol-card; same scale-in
     animation as chapter1)
     ============================================================ */

  .pol-card { position: relative; }

  /* ===== OVERLAY — popout 뒷배경 blur. header / progress bar 는 별도
     z-index 로 위에 올라가므로 blur 영향 없음. */
  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }

  .overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* ===== POPOUT — chapter1-demo 내부 top/bottom 양쪽 고정으로 영역 안에 정확히 들어가게 ===== */
  .popout {
    position: absolute;
    /* top: 96px = lens-card-header 와 겹치지 않도록 breathing room 포함. */
    top: 96px;
    /* bottom: 20px → Golden Dome timeline 마지막 단계까지 scroll 없이
       보이게. */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) scale(0.97);
    width: min(620px, 92%);
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .popout.show {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
  }

  .popout-head {
    padding: 18px 26px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
    background: white;
    position: relative;
  }

  /* live indicator inside popout */
  .popout-live {
    position: absolute;
    top: 18px;
    right: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
  }

  .popout-live-dot {
    width: 6px;
    height: 6px;
    background: var(--live);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 200, 150, 0.6);
    animation: livePulse 1.4s ease-in-out infinite;
  }

  .popout-live-time {
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0;
  }

  .popout-id { flex: 1; }

  .popout-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--accent);
    margin-bottom: 8px;
  }

  .popout-name {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .popout-name .flag,
  .popout-name .fi { font-size: 22px; }

  .popout-name-tag {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--muted);
    background: var(--bg-soft);
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 4px;
  }

  .popout-close {
    background: var(--bg-soft);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .popout-close:hover { background: var(--line); }

  .popout-body {
    overflow-y: auto;
    /* 22/26 → 14/18 — Golden Dome timeline 3 phases 가 한 화면에 들어오도록
       popout body 의 위·아래 padding 단축. */
    padding: 14px 26px 18px;
  }

  /* breadcrumb */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 11.5px;
    letter-spacing: 0;
    color: var(--muted);
  }

  .breadcrumb-item {
    cursor: pointer;
    transition: color 0.2s;
  }

  .breadcrumb-item:hover { color: var(--ink); }

  .breadcrumb-item.active {
    color: var(--accent);
    font-weight: 600;
  }

  .breadcrumb-sep { opacity: 0.4; }

  /* SpaceX card content */
  .sx-summary {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border-radius: 8px;
    position: relative;
  }

  .sx-summary strong { color: var(--ink); font-weight: 600; }

  .sx-meta {
    display: flex;
    gap: 18px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line);
    align-items: center;
    flex-wrap: wrap;
  }

  .sx-meta strong { color: var(--accent); font-weight: 600; }

  .sx-meta-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--live);
    font-weight: 600;
  }

  .sx-meta-live-dot {
    width: 5px;
    height: 5px;
    background: var(--live);
    border-radius: 50%;
    animation: livePulse 1.4s ease-in-out infinite;
  }

  .nv-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
    opacity: 0;
    transform: translateY(10px);
    animation: rowIn 0.5s ease forwards;
    position: relative;
  }

  .nv-row:last-child { border-bottom: none; }
  .nv-row:nth-child(1) { animation-delay: 0.15s; }
  .nv-row:nth-child(2) { animation-delay: 0.30s; }
  .nv-row:nth-child(3) { animation-delay: 0.45s; }
  .nv-row:nth-child(4) { animation-delay: 0.60s; }


  /* NEW badge on live signal */
  .nv-row.is-new::before {
    content: 'NEW';
    position: absolute;
    top: 8px;
    left: -8px;
    background: var(--hot);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0;
    box-shadow: 0 2px 8px rgba(220,38,38,0.3);
    animation: livePulse 1.4s ease-in-out infinite;
  }

  .nv-row-cat {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .nv-row-tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nv-row-tag .num {
    background: var(--accent);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
  }

  .nv-row-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }

  .nv-row-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .nv-row-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
  }

  .nv-row-item-name {
    font-weight: 600;
    color: var(--ink);
  }

  .nv-row-item-sub {
    font-size: 12px;
    color: var(--muted);
  }

  .nv-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .nv-row-evidence {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
  }

  .nv-row-time {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted-soft);
    letter-spacing: 0.04em;
  }

  .nv-row.is-new .nv-row-time {
    color: var(--hot);
    font-weight: 600;
  }

  /* .next-link (Micron 으로 가는 cross-chapter teaser) 와 Micron 가치사슬 팝업 (.vchain-*)
     은 chapter 2 로 이전 — chapter2.css 참고 */

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1024px) {
    .section { padding: 0 0 24px; }
    .intro-title { font-size: 34px; }
    .universe-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .popout { width: 94%; top: 84px; bottom: 40px; }
    .nv-row { grid-template-columns: 1fr; gap: 6px; }
    .nv-row-meta { align-items: flex-start; }
  }

  @media (max-width: 640px) {
    .intro-title { font-size: 26px; }
    .universe-grid { grid-template-columns: repeat(2, 1fr); }
    .lens-row { justify-content: flex-start; }
    .popout-head { padding: 14px 16px; }
    .popout-body { padding: 14px 16px; }
    .popout-live { right: 50px; top: 14px; padding: 4px 8px; font-size: 8px; }
  }

  /* ====== popout-sub (subtitle below popout-name in Golden Dome popout) ====== */
  .popout-sub {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
  }

  /* ==========================================================================
     Golden Dome timeline content — ported verbatim from chapter3.html
     (originally lines ~2820-3215 + the .tflow-phase / .tflow-timeline reveal
     rules at ~3560-3578). Only the CONTENT-level rules; everything related to
     the original .tflow-modal / .timeline-modal / .opinion-modal / .tflow-conflict
     / .tflow-cf-* wrappers is intentionally OMITTED — our popout wrapper
     (.popout / .overlay) supplies the modal chrome and scale-in animation.
     ========================================================================== */

  /* Build 셀렉터 */
  .tflow-builder {
    display: flex;
    flex-direction: column;
    /* gap/margin-bottom/padding 모두 살짝 줄여서 builder 영역이 차지하는
       수직 공간 단축 — timeline 이 한 화면에 들어오도록. */
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 17, 21, 0.06);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03);
  }
  .tflow-builder-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .tflow-builder-label {
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--fg-soft);
    flex-shrink: 0;
    min-width: 84px;
  }
  .tflow-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--fg-soft);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0;
  }
  .tflow-chip:hover { color: var(--fg); border-color: var(--fg-soft); }
  .tflow-chip.active {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
  }
  .tflow-chip.ghost {
    border-style: dashed;
    opacity: 0.55;
  }
  .tflow-chip.ghost::before {
    content: '+ ';
    opacity: 0.7;
  }
  .tflow-builder-result {
    font-size: 10px;
    color: var(--fg-soft);
    opacity: 0.7;
    letter-spacing: 0;
    margin-left: auto;
  }
  .tflow-builder-result strong { color: var(--accent); font-weight: 700; opacity: 1; }

  /* 수직 타임라인 컨테이너 */
  .tflow-timeline {
    position: relative;
    padding-left: 28px;
    /* 22 → 12 — popout 안에 Jan-Feb / March / April 3개 phase 가 한 화면에
       들어오도록 timeline 하단 공간 단축. */
    margin-bottom: 12px;
  }
  .tflow-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--line);
    border-radius: 2px;
    /* reveal — grows from top when .tflow-timeline-in is added */
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.2s ease-out;
  }
  .tflow-timeline.tflow-timeline-in::before {
    transform: scaleY(1);
  }

  /* Phase 그룹 */
  .tflow-phase {
    /* 28 → 18 — phase 간 vertical gap 단축. */
    margin-bottom: 18px;
    position: relative;
    /* stagger reveal — triggered by openGoldenDomePopout() */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }
  .tflow-phase.tflow-phase-in {
    opacity: 1;
    transform: translateY(0);
  }
  .tflow-phase:last-child { margin-bottom: 8px; }
  .tflow-phase-dot {
    position: absolute;
    left: -28px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 2px var(--accent);
    z-index: 2;
  }
  .tflow-phase-dot.mixed {
    background: #C9A56B;
    box-shadow: 0 0 0 2px #C9A56B;
  }
  .tflow-phase-dot.negative {
    background: #D87A7A;
    box-shadow: 0 0 0 2px #D87A7A;
  }

  .tflow-phase-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .tflow-phase-month {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
  }
  .tflow-phase-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.015em;
  }
  .tflow-phase-summary {
    font-size: 12px;
    color: var(--fg-soft);
    line-height: 1.55;
    /* 12 → 6 — summary 와 event 카드 사이 공간 단축. */
    margin-bottom: 6px;
    padding-left: 0;
  }
  .tflow-phase-summary strong { color: var(--fg); font-weight: 700; }

  /* 이벤트 카드 — 6 컬럼 grid (timeline-modal-body 변형 적용) */
  .tflow-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tflow-event {
    display: grid;
    grid-template-columns: 50px 84px 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
  }
  .tflow-event:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(95, 184, 164, 0.08);
  }
  .tflow-event:hover .tflow-event-source {
    color: var(--accent);
    border-color: var(--accent);
  }
  .tflow-event-date {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--fg-soft);
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .tflow-event-cat {
    font-size: 11.5px;
    letter-spacing: 0;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
    text-align: center;
    line-height: 1.3;
    height: fit-content;
  }
  .tflow-event-cat.policy {
    background: rgba(95, 184, 164, 0.15);
    color: #2A6557;
  }
  .tflow-event-cat.arch {
    background: rgba(143, 180, 212, 0.18);
    color: #3B6A8F;
  }
  .tflow-event-cat.industry {
    background: rgba(201, 165, 107, 0.18);
    color: #7C5B27;
  }
  .tflow-event-body {
    min-width: 0;
  }
  .tflow-event-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.005em;
    line-height: 1.35;
    margin-bottom: 3px;
  }
  .tflow-event-signal {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 5px 10px;
    border-radius: 4px;
    height: fit-content;
    white-space: nowrap;
  }
  .tflow-event-signal.positive {
    background: rgba(95, 184, 164, 0.15);
    color: var(--accent);
  }
  .tflow-event-signal.mixed {
    background: rgba(201, 165, 107, 0.18);
    color: #B58B47;
  }
  .tflow-event-signal.negative {
    background: rgba(216, 122, 122, 0.18);
    color: #C25E5E;
  }
  /* 원문 링크 */
  .tflow-event-source {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--fg-soft);
    letter-spacing: 0;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .tflow-event-source-arrow {
    font-size: 10px;
    opacity: 0.7;
  }
  /* "찬반의견 보기" 버튼 (정적 표시 — 클릭은 비활성, return false; in markup) */
  .tflow-event-debate {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--accent);
    background: rgba(95, 184, 164, 0.10);
    border: 1px solid rgba(95, 184, 164, 0.35);
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .tflow-event-debate:hover {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
  }
  .tflow-event-debate-arrow { font-size: 11px; line-height: 1; }

  @media (max-width: 700px) {
    .tflow-event { grid-template-columns: 1fr; gap: 4px; }
  }
}

/* ==========================================================================
   @keyframes — CSS Nesting 안에 두면 일부 브라우저가 무시하므로 외부로 분리
   (chapter1.css 와 동일한 패턴)
   ========================================================================== */
@keyframes polChipPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}