/*
 * ============================================================
 *  Tab 12 — 글로벌 정책 역학: 인터랙티브 맵 UI CSS
 * ============================================================
 *
 *  삽입 위치:
 *    dashboard.html 의 <style> 블록 안,
 *    기존 ".pol-tab-btn.active{...}" 규칙 (line ~414) 바로 아래에 삽입.
 *    또는 </style> 직전에 통째로 붙여넣기.
 *
 *  의존 CSS 변수 (이미 :root 에 정의됨):
 *    --bg, --card, --line, --c1, --c2, --c3, --c4,
 *    --txt, --txt2, --txt3, --mono,
 *    --shadow-sm, --shadow-md, --shadow-lg, --shadow-card,
 *    --radius, --radius-sm, --radius-xs,
 *    --grad-hero, --grad-accent, --grad-wide, --grad-dark
 *
 *  참고: 기존 코드에서 --bdr 은 미정의 상태이므로
 *        새 CSS 에서는 --line 을 사용함 (동일 역할).
 * ============================================================
 */

/* ─────────────────────────────────────────────
   0. 새로 추가하는 CSS 변수 (최소한)
   ───────────────────────────────────────────── */
:root {
  /* 지도 전용 변수 */
  --map-country-default: #cbd5e1;      /* 비대상 국가 기본 fill */
  --map-country-stroke: #94a3b8;       /* 국가 경계 stroke */
  --map-ocean: #f0f7ff;                /* 바다 배경 */
}


/* ─────────────────────────────────────────────
   1. 전체 래퍼
   ───────────────────────────────────────────── */
.policy-map-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* ─────────────────────────────────────────────
   2. 스탠스 토글 바 (경제 / 코인)
   ───────────────────────────────────────────── */
.policy-map-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: rgba(37, 99, 235, .04);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.stance-toggle-group {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 2px;
}

.stance-toggle-btn {
  padding: .4rem 1rem;
  font-size: .76rem;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--txt3);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-xs) - 2px);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.stance-toggle-btn:hover {
  color: var(--txt2);
  background: rgba(37, 99, 235, .04);
}

.stance-toggle-btn.active {
  color: #fff;
  background: var(--c1);
  box-shadow: 0 1px 4px rgba(37, 99, 235, .3);
  font-weight: 700;
}

/* 토글 라디오 도트 */
.stance-toggle-btn .toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: all .18s;
  flex-shrink: 0;
}

.stance-toggle-btn.active .toggle-dot {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}


/* ─────────────────────────────────────────────
   3. SVG 지도 컨테이너
   ───────────────────────────────────────────── */
.policy-map-svg-container {
  position: relative;
  width: 100%;
  background: var(--map-ocean);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.policy-map-svg-container svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 지도 내 국가 공통 */
.map-country {
  fill: var(--map-country-default);
  stroke: var(--map-country-stroke);
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill .2s, opacity .25s, stroke .2s, stroke-width .15s, filter .2s;
}

.map-country:hover {
  filter: brightness(1.12);
  stroke-width: 1;
  stroke: var(--c1);
}

.map-country.selected {
  stroke: var(--c1);
  stroke-width: 2;
  filter: brightness(1.05) drop-shadow(0 0 4px rgba(37, 99, 235, .35));
}

.map-country.dimmed {
  opacity: 0.4;
  cursor: pointer;
}

/* 비대상 국가 (배경) */
.map-bg-countries path {
  fill: #e8ecf1;
  stroke: #d1d5db;
  stroke-width: 0.25;
  pointer-events: none;
}

/* 국가 라벨 (SVG text) */
.map-country-label {
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 700;
  fill: var(--txt);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.5px;
}

/* 국가 플래그 아이콘 (SVG foreignObject 내부) */
.map-flag-icon {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   3b. 지도 위 국가 라벨
   ───────────────────────────────────────────── */
.policy-map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem .5rem;
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--txt);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

.policy-map-label:hover {
  background: var(--c1);
  color: #fff;
  border-color: var(--c1);
  box-shadow: 0 2px 10px rgba(37,99,235,.35);
  transform: translate(-50%, -50%) scale(1.08);
}

.policy-map-label.active {
  background: var(--c1);
  color: #fff;
  border-color: var(--c1);
  box-shadow: 0 2px 12px rgba(37,99,235,.4);
}

.policy-map-label .map-label-flag {
  font-size: .82rem;
  line-height: 1;
}

.policy-map-label .map-label-name {
  letter-spacing: -.01em;
}




/* ─────────────────────────────────────────────
   5. 범례 바 (국가 선택 버튼)
   ───────────────────────────────────────────── */
.policy-country-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .5rem .75rem;
  flex-wrap: wrap;
}

.policy-legend-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--txt2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.policy-legend-btn:hover {
  border-color: var(--c1);
  color: var(--c1);
  background: rgba(37, 99, 235, .06);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.policy-legend-btn.active {
  border-color: var(--c1);
  color: #fff;
  background: var(--c1);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}

.policy-legend-btn .legend-flag {
  font-size: .9rem;
  line-height: 1;
}

.policy-legend-btn .legend-code {
  letter-spacing: .02em;
}

/* 범례 바의 색상 인디케이터 (경제/코인 스코어) */
.policy-legend-btn .legend-score {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: .15rem;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   6. 상세 패널 (하단 그리드)
   ───────────────────────────────────────────── */
.policy-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: .5rem;
}

/* ── 왼쪽: 글로벌 지표 사이드바 ── */
.policy-gauge-sidebar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .85rem;
}

.policy-gauge-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s, border-color .2s;
  overflow: hidden;
}

.policy-gauge-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c1);
}

.policy-gauge-card .gauge-title {
  font-size: .82rem;
  color: var(--c1);
  font-weight: 700;
  margin-bottom: .5rem;
  letter-spacing: -.01em;
}

.policy-gauge-card .gauge-value {
  font-size: 1.8rem;
  font-weight: 800;
  font-family: var(--mono);
  letter-spacing: -.03em;
  line-height: 1.2;
}

.policy-gauge-card .gauge-bar {
  position: relative;
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  margin-top: .6rem;
  overflow: visible;
}

.policy-gauge-card .gauge-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  background: linear-gradient(90deg, var(--c1), #60a5fa);
}

.policy-gauge-card .gauge-indicator {
  position: absolute;
  top: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--card);
  transform: translateX(-50%);
  transition: left .4s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.policy-gauge-card .gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--txt3);
  margin-top: .3rem;
  font-family: var(--mono);
}

/* ── 오른쪽: 국가 상세 패널 ── */
.policy-country-detail {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* 국가 헤더 */
.policy-country-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: rgba(37, 99, 235, .04);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.policy-country-header .country-flag {
  font-size: 1.8rem;
  line-height: 1;
}

.policy-country-header .country-info {
  flex: 1;
}

.policy-country-header .country-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.01em;
}

.policy-country-header .country-sub {
  font-size: .75rem;
  color: var(--txt3);
  font-family: var(--mono);
  margin-top: .1rem;
}

.policy-country-header .country-scores {
  display: flex;
  gap: .5rem;
}

.policy-country-header .score-badge {
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--mono);
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  background: rgba(37, 99, 235, .08);
  color: var(--c1);
}

/* 정책 영역별 카드 */
.policy-detail-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: .65rem .85rem;
  box-shadow: var(--shadow-card);
  transition: border-color .25s, box-shadow .25s;
}

.policy-detail-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c1);
}

.policy-detail-card.highlight-active {
  border-color: var(--c1);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.policy-detail-card .detail-card-title {
  font-size: .82rem;
  font-weight: 800;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: -.65rem -.85rem .65rem;
  padding: .6rem .85rem;
  background: rgba(37, 99, 235, .04);
  border-bottom: 1px solid var(--line);
}

.policy-detail-card .detail-card-title .title-icon {
  font-size: .9rem;
}

.policy-detail-card .detail-card-body {
  font-size: .82rem;
  color: var(--txt2);
  line-height: 1.75;
  font-weight: 450;
}

.policy-detail-card .detail-card-body strong {
  color: var(--txt);
  font-weight: 700;
}

/* 정책 항목 행 */
.policy-detail-card .detail-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  transition: background .12s;
}

.policy-detail-card .detail-row:hover {
  background: rgba(37, 99, 235, .04);
}

.policy-detail-card .detail-row:last-child {
  border-bottom: none;
}

.policy-detail-card .detail-label {
  font-size: .74rem;
  color: var(--txt3);
  min-width: 64px;
  font-weight: 600;
  letter-spacing: .03em;
}

.policy-detail-card .detail-value {
  font-size: .82rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--c1);
}

/* 투자 시사점 영역 */
.policy-detail-card .detail-implication {
  margin-top: .5rem;
  padding: .55rem .75rem;
  border-top: none;
  font-size: .76rem;
  color: var(--txt);
  line-height: 1.7;
  font-weight: 450;
  background: rgba(37, 99, 235, .03);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--c1);
}

.policy-detail-card .detail-implication .impl-icon {
  color: #f59e0b;
  margin-right: .2rem;
}


/* ─────────────────────────────────────────────
   7. 스탠스 점수 시각화 바 (-5 ~ +5 스케일)
   ───────────────────────────────────────────── */
.policy-stance-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

.policy-stance-bar .stance-label {
  font-size: .72rem;
  color: var(--txt2);
  min-width: 56px;
  font-weight: 500;
}

.policy-stance-bar .stance-track {
  flex: 1;
  height: 7px;
  background: linear-gradient(90deg,
    #fecaca 0%,
    #fed7aa 25%,
    #e5e7eb 50%,
    #bbf7d0 75%,
    #86efac 100%
  );
  border-radius: 4px;
  position: relative;
}

.policy-stance-bar .stance-marker {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--card);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  transition: left .35s ease, background-color .35s;
}

.policy-stance-bar .stance-score {
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--mono);
  min-width: 28px;
  text-align: right;
}

/* 스탠스 색상 유틸 */
.stance-very-positive { color: #16a34a; }
.stance-positive      { color: #22c55e; }
.stance-neutral       { color: #94a3b8; }
.stance-negative      { color: #f97316; }
.stance-very-negative { color: #ef4444; }

.stance-bg-very-positive { background-color: #16a34a; }
.stance-bg-positive      { background-color: #22c55e; }
.stance-bg-neutral       { background-color: #94a3b8; }
.stance-bg-negative      { background-color: #f97316; }
.stance-bg-very-negative { background-color: #ef4444; }


/* ─────────────────────────────────────────────
   8. 양자관계 카드 (상세 패널 내)
   ───────────────────────────────────────────── */
.policy-bilateral-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .55rem;
}

.policy-bilateral-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .8rem;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: .78rem;
  transition: border-color .25s, box-shadow .25s;
  cursor: pointer;
}

.policy-bilateral-item:hover {
  border-color: var(--c1);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.policy-bilateral-item .bilateral-flag {
  font-size: 1.1rem;
}

.policy-bilateral-item .bilateral-type {
  font-size: .68rem;
  font-weight: 700;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.policy-bilateral-item .bilateral-type.cooperation {
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
}
.policy-bilateral-item .bilateral-type.tension {
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
}
.policy-bilateral-item .bilateral-type.pressure {
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
}
.policy-bilateral-item .bilateral-type.competition {
  background: rgba(245, 158, 11, .12);
  color: #d97706;
}
.policy-bilateral-item .bilateral-type.dependency {
  background: rgba(59, 130, 246, .12);
  color: #2563eb;
}

.policy-bilateral-item .bilateral-desc {
  flex: 1;
  font-size: .74rem;
  color: var(--txt2);
  line-height: 1.45;
  font-weight: 450;
}


/* ─────────────────────────────────────────────
   8a-2. 국가별 독립 섹션 (밸류체인 패턴)
   ───────────────────────────────────────────── */
.policy-country-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.policy-country-section {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}

.policy-country-section.highlight-active {
  border-color: var(--c1);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), var(--shadow-lg);
  animation: sectionHighlight 2.5s ease;
}

@keyframes sectionHighlight {
  0%   { box-shadow: 0 0 0 3px rgba(37,99,235,.3), 0 4px 24px rgba(37,99,235,.12); }
  100% { box-shadow: 0 0 0 3px rgba(37,99,235,0), none; }
}

.policy-section-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.2rem;
  background: rgba(37, 99, 235, .04);
  border-bottom: 1px solid var(--line);
}

.policy-section-header .country-flag {
  font-size: 2rem;
  line-height: 1;
}

.policy-section-header .country-info {
  flex: 1;
}

.policy-section-header .country-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -.01em;
}

.policy-section-header .country-sub {
  font-size: .75rem;
  color: var(--c1);
  font-family: var(--mono);
  font-weight: 600;
}

.policy-section-header .country-scores {
  display: flex;
  gap: .5rem;
}

.policy-section-header .score-badge {
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--mono);
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  background: rgba(37, 99, 235, .08);
  color: var(--c1);
}

.policy-section-body {
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  background: var(--bg);
}

.policy-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

.pdp-inner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

/* ─────────────────────────────────────────────
   8b. 양자관계 역학 (독립 섹션 - 하단)
   ───────────────────────────────────────────── */
.policy-bilateral-section {
  margin-top: 1rem;
}

.policy-bilateral-section-title {
  font-size: .92rem;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 0;
  border-bottom: 2px solid var(--c1);
}

.policy-bilateral-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}

.policy-bilateral-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-card);
  transition: border-color .25s, box-shadow .25s;
  overflow: hidden;
}

.policy-bilateral-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c1);
}

.policy-bilateral-card .bilateral-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .75rem;
  background: rgba(37, 99, 235, .04);
  border-bottom: 1px solid var(--line);
  margin: -.85rem -1rem .6rem;
}

.policy-bilateral-card .bilateral-card-pair {
  font-size: .82rem;
  font-weight: 800;
  color: var(--txt);
}

.policy-bilateral-card .bilateral-card-type {
  font-size: .68rem;
  font-weight: 700;
  font-family: var(--mono);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.policy-bilateral-card .bilateral-card-aspect {
  font-size: .74rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-bottom: .3rem;
  padding: .4rem .6rem;
  border-left: 3px solid var(--c1);
  background: rgba(37, 99, 235, .03);
  border-radius: var(--radius-xs);
}


/* ─────────────────────────────────────────────
   9. 빈 상태 / 플레이스홀더
   ───────────────────────────────────────────── */
.policy-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--txt3);
  text-align: center;
}

.policy-map-placeholder .placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: .75rem;
  opacity: .5;
}

.policy-map-placeholder .placeholder-text {
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.6;
}

/* 국가 미선택 상태의 상세 패널 */
.policy-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--txt3);
  font-size: .84rem;
  font-weight: 500;
  text-align: center;
  padding: 1.5rem;
}


/* ─────────────────────────────────────────────
   10. 애니메이션
   ───────────────────────────────────────────── */
@keyframes mapFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mapPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}

.policy-country-detail {
  animation: mapFadeIn .25s ease;
}

/* 선택 국가 전환 시 페이드 */
.policy-detail-card.entering {
  animation: mapFadeIn .2s ease;
}


/* ─────────────────────────────────────────────
   11. 모바일 반응형 — 768px 이하
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 지도 풀 width */
  .policy-map-svg-container {
    max-width: 100%;
    border-radius: var(--radius-sm);
  }

  /* 사이드바 모바일: 세로 정렬 */
  .policy-gauge-sidebar {
    flex-direction: column;
    gap: .65rem;
  }

  .policy-gauge-sidebar::-webkit-scrollbar {
    display: none;
  }

  .policy-gauge-card {
    min-width: 200px;
    flex-shrink: 0;
  }

  /* 범례 바 wrap */
  .policy-country-legend {
    gap: .35rem;
    padding: .4rem .5rem;
  }

  .policy-legend-btn {
    padding: .3rem .55rem;
    font-size: .7rem;
  }

  /* 토글 */
  .stance-toggle-btn {
    padding: .35rem .7rem;
    font-size: .72rem;
  }

  /* 상세 카드 패딩 축소 */
  .policy-detail-card {
    padding: .5rem .7rem;
  }

  .policy-detail-card .detail-card-title {
    margin: -.5rem -.7rem .5rem;
    padding: .5rem .7rem;
  }

  .policy-country-header {
    padding: .7rem .9rem;
  }

  .policy-country-header .country-flag {
    font-size: 1.5rem;
  }

  .policy-country-header .country-name {
    font-size: .95rem;
  }

  /* 양자관계 리스트 1열 */
  .policy-bilateral-list {
    grid-template-columns: 1fr;
  }

  .policy-bilateral-cards {
    grid-template-columns: 1fr;
  }

  .policy-section-grid {
    grid-template-columns: 1fr;
  }

  .pdp-inner-grid {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .policy-section-header .country-scores {
    gap: .35rem;
  }

  .policy-section-header .score-badge {
    font-size: .66rem;
    padding: 2px 7px;
  }

  .policy-bilateral-card .bilateral-card-header {
    padding: .4rem .6rem;
    margin: -.85rem -1rem .5rem;
  }

  .policy-bilateral-card .bilateral-card-pair {
    font-size: .76rem;
  }

  .policy-map-label {
    font-size: .55rem;
    padding: .12rem .3rem;
    border-radius: 8px;
    gap: .12rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
  }

  .policy-map-label .map-label-flag {
    font-size: .6rem;
  }

  .policy-map-label .map-label-name {
    font-size: .5rem;
    max-width: 2.5em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .policy-section-header .country-flag {
    font-size: 1.5rem;
  }

  .policy-section-header .country-name {
    font-size: .95rem;
  }

  .policy-section-header {
    padding: .8rem 1rem;
    gap: .5rem;
  }

  .policy-section-body {
    padding: .8rem 1rem;
  }
}

/* ─────────────────────────────────────────────
   12. 초소형 화면 — 480px 이하
   ───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* 범례 버튼 2줄 허용 */
  .policy-country-legend {
    justify-content: flex-start;
    gap: .3rem;
    padding: .35rem .4rem;
  }

  .policy-legend-btn {
    padding: .25rem .45rem;
    font-size: .66rem;
    border-radius: 16px;
  }

  .policy-legend-btn .legend-flag {
    font-size: .78rem;
  }

  /* 패널 패딩 축소 */
  .policy-map-header {
    padding: .5rem .6rem;
    gap: .4rem;
  }

  .stance-toggle-btn {
    padding: .3rem .5rem;
    font-size: .68rem;
  }

  .policy-detail-card {
    padding: .45rem .6rem;
  }

  .policy-detail-card .detail-card-title {
    font-size: .78rem;
    margin: -.45rem -.6rem .45rem;
    padding: .45rem .6rem;
  }

  .policy-detail-card .detail-card-body {
    font-size: .78rem;
  }

  .policy-country-header {
    padding: .6rem .7rem;
    gap: .5rem;
    flex-wrap: wrap;
  }

  .policy-country-header .country-scores {
    width: 100%;
    justify-content: flex-start;
    gap: .35rem;
  }

  .policy-gauge-card {
    padding: .75rem .85rem;
    min-width: 170px;
  }

  .policy-gauge-card .gauge-value {
    font-size: 1.5rem;
  }

  .policy-stance-bar .stance-label {
    font-size: .68rem;
    min-width: 48px;
  }

  .policy-stance-bar .stance-track {
    height: 6px;
  }

  .policy-stance-bar .stance-marker {
    width: 11px;
    height: 11px;
  }

  /* 지도 컨테이너 패딩 제거 */
  .policy-map-svg-container {
    border-radius: var(--radius-xs);
  }

  .policy-map-label {
    font-size: .5rem;
    padding: .1rem .22rem;
    gap: .08rem;
  }

  .policy-map-label .map-label-flag {
    font-size: .52rem;
  }

  .policy-map-label .map-label-name {
    display: none;
  }
}


/* ─────────────────────────────────────────────
   13. 글로벌 브리핑 (Tab 1)
   ───────────────────────────────────────────── */
.pb-hero {
  background: linear-gradient(135deg, rgba(37,99,235,.06) 0%, rgba(96,165,250,.03) 100%);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.2rem;
}
.pb-hero-badge {
  font-size: .68rem;
  font-weight: 700;
  color: var(--c1);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.pb-hero-narrative {
  font-size: .82rem;
  line-height: 1.85;
  color: var(--txt);
  font-weight: 500;
}
.pb-hero-tags {
  margin-top: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.pb-tag {
  font-size: .66rem;
  font-weight: 600;
  color: var(--c1);
  background: rgba(37,99,235,.06);
  padding: .2rem .5rem;
  border-radius: 10px;
  border: 1px solid rgba(37,99,235,.15);
}

.pb-insights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.pb-insight-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: .8rem 1rem;
}
.pb-insight-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: .4rem;
}
.pb-insight-desc {
  font-size: .72rem;
  line-height: 1.6;
  color: var(--txt2);
}

.pb-section-title {
  font-size: .88rem;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: .8rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--c1);
  display: inline-block;
}

.pb-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.pb-gauge-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .8rem 1rem;
  transition: border-color .25s;
}
.pb-gauge-card:hover { border-color: var(--c1); }
.pb-gauge-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--txt2);
  margin-bottom: .3rem;
}
.pb-gauge-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .4rem;
}
.pb-gauge-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--mono);
}
.pb-gauge-trend {
  font-size: .72rem;
  font-weight: 700;
}
.pb-gauge-track {
  position: relative;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: visible;
}
.pb-gauge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s;
}
.pb-gauge-dot {
  position: absolute;
  top: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  transform: translateX(-50%);
  transition: left .5s;
}
.pb-gauge-ends {
  display: flex;
  justify-content: space-between;
  font-size: .64rem;
  color: var(--txt3);
  margin-top: .25rem;
}
.pb-gauge-reason {
  font-size: .64rem;
  color: var(--txt3);
  line-height: 1.5;
  margin-top: .4rem;
  padding-top: .35rem;
  border-top: 1px solid var(--line);
}

/* ── 8-Country Matrix ── */
.pb-matrix-wrap {
  margin-bottom: 1.5rem;
}
.pb-matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pb-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
  font-size: .72rem;
}
.pb-matrix th {
  padding: .5rem .6rem;
  text-align: center;
  font-weight: 700;
  background: rgba(37,99,235,.04);
  border: 1px solid var(--line);
  color: var(--txt);
  vertical-align: bottom;
  white-space: nowrap;
}
.pb-matrix th span { font-size: .64rem; font-weight: 600; }
.pb-matrix td {
  padding: .35rem .5rem;
  text-align: center;
  border: 1px solid var(--line);
  white-space: nowrap;
  font-family: var(--mono);
}
.pb-matrix-label {
  text-align: left !important;
  font-weight: 700;
  color: var(--txt);
  background: rgba(37,99,235,.02);
  font-family: inherit !important;
}

/* ── Recent Events ── */
.pb-events {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.5rem;
}
.pb-event-item {
  display: flex;
  align-items: start;
  gap: .6rem;
  padding: .5rem .7rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pb-event-date {
  font-size: .66rem;
  font-family: var(--mono);
  color: var(--txt3);
  min-width: 72px;
  white-space: nowrap;
}
.pb-event-body {
  flex: 1;
  font-size: .74rem;
  color: var(--txt);
}
.pb-event-flag { margin-right: .2rem; }
.pb-event-title { font-weight: 600; }
.pb-event-desc {
  font-size: .68rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-top: .15rem;
}

/* ── Watchlist ── */
.pb-watchlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.pb-watch-item {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: .7rem .9rem;
  transition: border-color .25s;
}
.pb-watch-critical { border-left: 4px solid #ef4444; }
.pb-watch-high { border-left: 4px solid #f59e0b; }
.pb-watch-normal { border-left: 4px solid #3b82f6; }
.pb-watch-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.pb-watch-dday {
  font-size: .74rem;
  font-weight: 800;
  font-family: var(--mono);
  color: #ef4444;
}
.pb-watch-critical .pb-watch-dday { color: #ef4444; }
.pb-watch-high .pb-watch-dday { color: #f59e0b; }
.pb-watch-normal .pb-watch-dday { color: #3b82f6; }
.pb-watch-date {
  font-size: .64rem;
  color: var(--txt3);
  font-family: var(--mono);
}
.pb-watch-event {
  font-size: .76rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: .2rem;
}
.pb-watch-desc {
  font-size: .68rem;
  color: var(--txt2);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   14. 국가간 역학 (Tab 2)
   ───────────────────────────────────────────── */
.pd-network-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}
.pd-network-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: .6rem;
}
.pd-legend-item {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  color: var(--txt2);
}
.pd-legend-line {
  display: inline-block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
}
.pd-network-svg {
  width: 100%;
  max-height: 500px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.pd-node circle { transition: stroke-width .2s; }
.pd-node:hover circle { stroke-width: 4; filter: drop-shadow(0 0 6px rgba(37,99,235,.3)); }
.pd-edge { transition: opacity .2s, stroke-width .2s; }


.pd-bilateral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: .7rem;
  margin-bottom: 1.5rem;
}
.pd-bilateral-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: .7rem .85rem;
  transition: border-color .25s;
}
.pd-bilateral-card:hover { border-color: var(--c1); }
.pd-bilateral-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.pd-bilateral-pair {
  font-size: .88rem;
  font-weight: 700;
  color: var(--txt);
}
.pd-bilateral-type {
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 6px;
  white-space: nowrap;
}
.pd-bilateral-aspect {
  font-size: .74rem;
  color: var(--txt);
  margin-bottom: .3rem;
}
.pd-bilateral-detail {
  font-size: .74rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-top: .1rem;
}
.pd-bilateral-impl {
  margin-top: .35rem;
  padding: .35rem .55rem;
  background: rgba(37,99,235,.03);
  border-left: 3px solid var(--c1);
  border-radius: 4px;
  font-size: .68rem;
  color: var(--txt);
  line-height: 1.5;
}
.pd-bilateral-toggle { user-select: none; }
.pd-bilateral-chevron { font-size: .65rem; color: var(--txt3); margin-left: auto; transition: transform .2s; }
.pd-bilateral-card.expanded .pd-bilateral-chevron { transform: rotate(180deg); }
.pd-bilateral-bg-summary { font-size: .72rem; color: var(--txt2); line-height: 1.55; padding: .35rem 0; border-bottom: 1px solid rgba(37,99,235,.06); margin-bottom: .3rem; }
.pd-bilateral-detail-body { padding-top: .4rem; animation: pdFadeIn .2s; }
.pd-nature-tag { font-size: .62rem; padding: .12rem .4rem; background: rgba(37,99,235,.06); color: var(--c1); border-radius: 6px; font-weight: 600; }
.pd-score-mini { display: inline-flex; gap: 2px; align-items: center; }
.pd-sort-btns { display: flex; gap: .3rem; }
.pd-sort-btn { font-size: .68rem; padding: .25rem .6rem; border: 1.5px solid var(--line); background: var(--bg); color: var(--txt3); border-radius: 6px; cursor: pointer; transition: all .15s; }
.pd-sort-btn.active { background: var(--c1); color: #fff; border-color: var(--c1); }
@keyframes pdFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.pd-chains-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.pd-chain-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 1rem;
  overflow: hidden;
}
.pd-chain-trigger {
  padding: .6rem .8rem;
  background: rgba(239, 68, 68, .06);
  border: 1.5px solid rgba(239, 68, 68, .15);
  border-radius: 8px;
  font-size: .76rem;
  color: var(--txt);
  line-height: 1.55;
  margin-bottom: .5rem;
}
.pd-chain-trigger-icon { font-size: .9rem; }
.pd-chain-steps {
  position: relative;
  padding-left: 20px;
  margin-bottom: .5rem;
}
.pd-chain-steps::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--c1), rgba(37,99,235,.2));
}
.pd-chain-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .3rem 0;
}
.pd-chain-step-num {
  position: relative;
  z-index: 2;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
.pd-chain-step-body {
  font-size: .78rem;
  color: var(--txt);
  line-height: 1.5;
}
.pd-chain-step-flag { font-size: .88rem; }
.pd-chain-arrow {
  text-align: center;
  color: var(--c1);
  font-size: 1rem;
  padding: .1rem 0;
  margin-left: 14px;
}
.pd-chain-impl {
  padding: .6rem .8rem;
  background: rgba(37, 99, 235, .05);
  border: 1.5px solid rgba(37, 99, 235, .12);
  border-radius: 8px;
  font-size: .74rem;
  color: var(--txt);
  line-height: 1.55;
  margin-top: .5rem;
}
.pd-chain-impl-icon { font-size: .9rem; }

/* ─────────────────────────────────────────────
   15. 정책 심층분석 (Tab 3)
   ───────────────────────────────────────────── */
.pdp-country-tabs {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--line);
  scrollbar-width: none;
}
.pdp-country-tabs::-webkit-scrollbar { display: none; }
.pdp-country-tab {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .7rem;
  border: 1.5px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--bg);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  color: var(--txt2);
  white-space: nowrap;
  transition: all .2s;
}
.pdp-country-tab:hover { background: rgba(37,99,235,.04); color: var(--txt); }
.pdp-country-tab.active {
  background: rgba(37,99,235,.06);
  border-color: var(--c1);
  color: var(--c1);
  font-weight: 700;
}
.pdp-tab-flag { font-size: 1rem; }
.pdp-tab-name { font-size: .72rem; }

.pdp-map-compact {
  margin-bottom: 1rem;
}
.pdp-map-compact .policy-map-svg-container {
  overflow: visible;
  border-radius: 10px;
}

.pdp-panels {}
.pdp-panel { display: none; }
.pdp-panel.active { display: block; }

.pdp-econ-card {
  border-left: 4px solid #3b82f6;
}
.pdp-econ-card .detail-card-title {
  background: rgba(59,130,246,.07);
  color: #2563eb;
}
.pdp-econ-card:hover {
  border-color: #3b82f6;
}

.pdp-crypto-card {
  border-left: 4px solid #f59e0b;
}
.pdp-crypto-card .detail-card-title {
  background: rgba(245,158,11,.07);
  color: #d97706;
}
.pdp-crypto-card:hover {
  border-color: #f59e0b;
}

/* ─────────────────────────────────────────────
   16. 타임라인 & 전망 (Tab 4)
   ───────────────────────────────────────────── */
.po-countdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.po-countdown-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .7rem .9rem;
  transition: border-color .25s;
}
.po-countdown-card:hover { border-color: var(--c1); }
.po-cd-urgent { border-left: 4px solid #ef4444; }
.po-cd-soon { border-left: 4px solid #f59e0b; }
.po-cd-normal { border-left: 4px solid #3b82f6; }
.po-cd-dday {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--mono);
  margin-bottom: .1rem;
}
.po-cd-date {
  font-size: .62rem;
  color: var(--txt3);
  font-family: var(--mono);
  margin-bottom: .3rem;
}
.po-cd-content {
  font-size: .74rem;
  color: var(--txt);
}
.po-cd-title { font-weight: 600; }
.po-cd-desc {
  font-size: .66rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-top: .2rem;
}

.po-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}
.po-scenario-card {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
  transition: border-color .25s;
}
.po-scenario-card:hover { border-color: var(--c1); }
.po-scenario-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: .5rem;
  margin-bottom: .4rem;
}
.po-scenario-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--txt);
}
.po-scenario-prob {
  font-size: .64rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 8px;
  white-space: nowrap;
}
.po-scenario-trigger {
  font-size: .72rem;
  color: var(--txt2);
  margin-bottom: .5rem;
}
.po-scenario-impacts { }
.po-scenario-impact {
  font-size: .72rem;
  color: var(--txt);
  padding: .25rem 0 .25rem .5rem;
  border-left: 2px solid var(--line);
  margin-bottom: .25rem;
}
.po-scenario-invest {
  font-size: .66rem;
  color: #f59e0b;
  margin-top: .1rem;
}

.po-timeline-filter {
  display: flex;
  gap: .3rem;
  margin-bottom: .8rem;
}
.po-tl-filter {
  padding: .3rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 600;
  color: var(--txt2);
  transition: all .2s;
}
.po-tl-filter:hover { border-color: var(--c1); color: var(--c1); }
.po-tl-filter.active {
  background: var(--c1);
  color: #fff;
  border-color: var(--c1);
}

/* Timeline V2 - Vertical Rail Design */
.po-tl-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.po-tl-years { display: flex; gap: .3rem; }
.po-tl-year {
  padding: .4rem .8rem; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--txt2); font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.po-tl-year:hover { border-color: var(--c1); color: var(--c1); }
.po-tl-year.active { background: var(--c1); color: #fff; border-color: var(--c1); }
.po-tl-filters { display: flex; gap: .3rem; }

@media (max-width: 768px) {
  .po-tl-controls {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
  }
  .po-tl-years {
    justify-content: center;
  }
  .po-tl-year {
    flex: 1;
    text-align: center;
    padding: .38rem .5rem;
    font-size: .7rem;
    border-radius: 10px;
  }
  .po-tl-filters {
    justify-content: center;
  }
  .po-tl-filter {
    flex: 1;
    text-align: center;
    padding: .32rem .4rem;
    font-size: .66rem;
    border-radius: 8px;
  }
}
@media (max-width: 480px) {
  .po-tl-year {
    padding: .32rem .3rem;
    font-size: .64rem;
  }
  .po-tl-filter {
    padding: .28rem .25rem;
    font-size: .6rem;
  }
}

.po-timeline-v2 { margin-bottom: 1.5rem; }

.po-qblock {
  margin-bottom: 2rem;
  animation: poBlockIn .35s ease-out both;
}
@keyframes poBlockIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: none; } }
.po-qblock:nth-child(2) { animation-delay: .05s; }
.po-qblock:nth-child(3) { animation-delay: .1s; }
.po-qblock:nth-child(4) { animation-delay: .15s; }

.po-qblock-hdr {
  margin-bottom: .8rem; padding: .75rem 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(37,99,235,.02) 100%);
  border-radius: 12px; border-left: 4px solid var(--c1);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.po-qblock-label {
  font-size: .95rem; font-weight: 800; color: var(--c1);
  white-space: nowrap;
}
.po-qblock-summary {
  font-size: .72rem; color: var(--txt2); line-height: 1.6; text-align: right;
}

/* Vertical rail */
.po-rail {
  position: relative; padding-left: 28px;
  border-left: 2.5px solid var(--line); margin-left: 10px;
}
.po-rail::after {
  content: ''; position: absolute; bottom: 0; left: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
}
.po-rail-item {
  position: relative; margin-bottom: .8rem;
  transition: opacity .25s;
}
.po-rail-dot {
  position: absolute; left: -35px; top: 14px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--c1);
  z-index: 1;
  transition: transform .2s, box-shadow .2s;
}
.po-rail-item:hover .po-rail-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.po-rail-card {
  padding: .75rem 1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.po-rail-card:hover {
  border-color: var(--c1); box-shadow: 0 4px 16px rgba(37,99,235,.1);
  transform: translateX(4px);
}
.po-rail-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem;
  margin-bottom: .4rem;
}
.po-rail-date {
  font-size: .78rem; font-weight: 800; color: var(--txt);
  font-family: var(--mono);
  background: rgba(37,99,235,.06); padding: .1rem .4rem; border-radius: 4px;
}
.po-rail-flag {
  font-size: .72rem; color: var(--txt2);
}
.po-rail-status {
  font-size: .66rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 4px;
}
.po-rail-impact {
  font-size: .63rem; font-weight: 600;
  padding: .12rem .4rem; border-radius: 4px;
  background: rgba(37,99,235,.06);
}
.po-rail-title {
  font-size: .82rem; font-weight: 700; color: var(--txt); line-height: 1.45;
}
.po-rail-desc {
  font-size: .72rem; color: var(--txt2); line-height: 1.65; margin-top: .3rem;
  padding-left: .5rem; border-left: 2px solid var(--line);
}

/* ─────────────────────────────────────────────
   16b. 인트로 배너 & 다음 섹션 유도
   ───────────────────────────────────────────── */
.pol-intro-banner {
  padding: .6rem 1rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(37,99,235,.01) 100%);
  border-radius: 10px;
  border-left: 3px solid var(--c1);
  font-size: .76rem;
  color: var(--txt2);
  line-height: 1.65;
}
.pol-intro-banner strong { color: var(--txt); font-weight: 700; }

/* ─────────────────────────────────────────────
   Policy Interpretation Guide (.pg-*)
   ───────────────────────────────────────────── */
.pg-intro {
  font-size: .78rem; color: var(--txt2); line-height: 1.7;
  margin-bottom: 1.5rem; padding: .7rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}

/* Master Decision Flow */
.pg-flow { margin-bottom: 2rem; }
.pg-flow-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.pg-flow-num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--c1); color: #fff; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.pg-flow-body { flex: 1; }
.pg-flow-title {
  font-size: .88rem; font-weight: 800; color: var(--txt); margin-bottom: .45rem;
  letter-spacing: -.01em;
}
.pg-flow-desc { font-size: .76rem; color: var(--txt2); line-height: 1.7; }
.pg-flow-desc .pg-bullets {
  list-style: none; padding: 0; margin: .35rem 0 0 0;
}
.pg-flow-desc .pg-bullets li {
  position: relative; padding-left: .85rem; margin-bottom: .25rem;
  font-size: .75rem; line-height: 1.65; color: var(--txt2);
}
.pg-flow-desc .pg-bullets li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c1); opacity: .6;
}
.pg-flow-tip {
  font-size: .72rem; color: var(--c1); margin-top: .5rem;
  padding: .4rem .65rem; background: rgba(37,99,235,.05); border-radius: 8px;
  border-left: 3px solid rgba(37,99,235,.3); line-height: 1.65;
}
.pg-flow-tip .pg-bullets {
  list-style: none; padding: 0; margin: .25rem 0 0 0;
}
.pg-flow-tip .pg-bullets li {
  position: relative; padding-left: .85rem; margin-bottom: .2rem;
  font-size: .71rem; line-height: 1.6;
}
.pg-flow-tip .pg-bullets li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--c1); opacity: .5;
}
.pg-flow-arrow { text-align: center; color: var(--c1); font-size: .7rem; padding: .2rem 0; }

/* Framework Tabs */
.pg-fw-tabs {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
}
.pg-fw-tab {
  padding: .4rem .7rem; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--txt2); font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.pg-fw-tab:hover { border-color: var(--c1); color: var(--c1); }
.pg-fw-tab.active { background: var(--c1); color: #fff; border-color: var(--c1); }

/* Framework Panel */
.pg-fw-panel { display: none; margin-bottom: 1.5rem; }
.pg-fw-panel.active { display: block; }

.pg-fw-header {
  display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem;
}
.pg-fw-icon { font-size: 2rem; }
.pg-fw-name { font-size: .95rem; font-weight: 800; color: var(--txt); }
.pg-fw-core { font-size: .78rem; color: var(--c1); font-weight: 600; font-style: italic; }
.pg-fw-desc {
  font-size: .76rem; color: var(--txt2); line-height: 1.7;
  margin-bottom: 1rem; padding: .6rem .8rem;
  background: rgba(37,99,235,.03); border-radius: 8px;
}
.pg-sub-title {
  font-size: .8rem; font-weight: 700; color: var(--txt); margin-bottom: .5rem;
  padding-left: .5rem; border-left: 3px solid var(--c1);
}

/* Key Indicators */
.pg-indicators {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .5rem; margin-bottom: 1.2rem;
}
.pg-indicator {
  padding: .55rem .7rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px;
}
.pg-ind-name { font-size: .76rem; font-weight: 700; color: var(--txt); margin-bottom: .15rem; }
.pg-ind-why { font-size: .7rem; color: var(--txt2); line-height: 1.5; }

/* Decision Tree */
.pg-tree { margin-bottom: 1.2rem; }
.pg-tree-row {
  display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: .5rem;
  padding: .6rem .7rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: .4rem;
}
.pg-tree-cond {
  font-size: .74rem; font-weight: 700; color: var(--txt);
  padding-right: .5rem; border-right: 2px solid var(--c1);
}
.pg-tree-interp { font-size: .72rem; color: var(--txt2); line-height: 1.5; }
.pg-tree-action {
  font-size: .72rem; color: var(--c1); font-weight: 600; line-height: 1.5;
  padding-left: .5rem; border-left: 2px solid rgba(37,99,235,.2);
}

/* Current Application */
.pg-current {
  margin-bottom: .8rem; padding: .65rem .85rem;
  background: rgba(37,99,235,.05); border-radius: 8px;
  border-left: 3px solid var(--c1);
}
.pg-current-label {
  font-size: .68rem; font-weight: 700; color: var(--c1);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem;
}
.pg-current-text { font-size: .74rem; color: var(--txt); line-height: 1.6; }

/* Pitfall */
.pg-pitfall {
  padding: .55rem .75rem; background: rgba(239,68,68,.05);
  border: 1px solid rgba(239,68,68,.15); border-radius: 8px;
  font-size: .72rem; color: var(--txt2); line-height: 1.5;
}
.pg-pitfall-icon { color: #ef4444; font-size: .85rem; margin-right: .2rem; }

/* Live Application Cards */
.pg-apps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: .7rem;
}
.pg-app-card {
  padding: .8rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
}
.pg-app-event {
  font-size: .82rem; font-weight: 700; color: var(--txt);
  padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: 1.5px solid var(--line);
}
.pg-app-steps { display: flex; flex-direction: column; gap: .35rem; }
.pg-app-step { font-size: .72rem; color: var(--txt2); line-height: 1.5; display: flex; gap: .4rem; align-items: flex-start; }
.pg-app-badge {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--c1); color: #fff; font-size: .6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}

@media (max-width: 768px) {
  .pg-tree-row { grid-template-columns: 1fr; }
  .pg-tree-cond { border-right: none; border-bottom: 2px solid var(--c1); padding-bottom: .3rem; margin-bottom: .3rem; }
  .pg-tree-action { border-left: none; border-top: 1px solid rgba(37,99,235,.2); padding-left: 0; padding-top: .3rem; }
  .pg-fw-tabs { gap: .3rem; }
  .pg-fw-tab { padding: .3rem .5rem; font-size: .68rem; }
  .pg-indicators { grid-template-columns: 1fr; }
  .pg-apps { grid-template-columns: 1fr; }

  .pg-flow-step { padding: .75rem .9rem; gap: .7rem; }
  .pg-flow-num { width: 30px; height: 30px; font-size: .78rem; }
  .pg-flow-title { font-size: .82rem; }
  .pg-flow-desc { font-size: .73rem; }
  .pg-flow-tip { font-size: .68rem; padding: .35rem .55rem; }
  .pg-intro { font-size: .74rem; padding: .55rem .8rem; }

  .pg-fw-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
  }
  .pg-fw-tab {
    padding: .45rem .5rem;
    font-size: .68rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
    border-radius: 10px;
  }

  .pg-fw-header { flex-direction: column; gap: .4rem; align-items: flex-start; }
  .pg-fw-icon { font-size: 1.5rem; }
  .pg-fw-name { font-size: .85rem; }
  .pg-fw-core { font-size: .72rem; }
  .pg-fw-desc { font-size: .72rem; padding: .5rem .65rem; }
  .pg-sub-title { font-size: .75rem; }
  .pg-indicator { padding: .45rem .6rem; }
  .pg-ind-name { font-size: .72rem; }
  .pg-ind-why { font-size: .67rem; }
  .pg-current { padding: .55rem .7rem; }
  .pg-current-text { font-size: .7rem; }
  .pg-pitfall { font-size: .68rem; padding: .45rem .6rem; }

  .pol-intro-banner { font-size: .72rem; padding: .5rem .8rem; }
  .pb-section-title { font-size: .82rem; }

  .pdp-country-tabs {
    position: sticky;
    top: 96px;
    z-index: 50;
    background: var(--bg);
    padding-top: .4rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
}

@media (max-width: 480px) {
  .pg-flow-step { padding: .6rem .7rem; gap: .55rem; flex-direction: column; align-items: stretch; }
  .pg-flow-num { width: 26px; height: 26px; font-size: .72rem; align-self: flex-start; }
  .pg-flow-title { font-size: .78rem; }
  .pg-flow-desc { font-size: .7rem; }
  .pg-flow-tip { font-size: .66rem; }
  .pg-flow-desc .pg-bullets li { font-size: .69rem; }
  .pg-flow-tip .pg-bullets li { font-size: .66rem; }

  .pg-fw-tabs { gap: .25rem; grid-template-columns: 1fr 1fr; }
  .pg-fw-tab { padding: .35rem .35rem; font-size: .63rem; }

  .pg-tree-row { padding: .5rem .6rem; }
  .pg-tree-cond { font-size: .7rem; }
  .pg-tree-interp { font-size: .68rem; }
  .pg-tree-action { font-size: .68rem; }

  .pg-apps { gap: .5rem; }
  .pg-app-card { padding: .6rem; }
  .pg-app-event { font-size: .76rem; }
  .pg-app-step { font-size: .68rem; }

  .policy-section-header { flex-wrap: wrap; padding: .6rem .75rem; }
  .policy-section-header .country-scores { width: 100%; justify-content: flex-start; }

  .policy-bilateral-card { padding: .65rem .75rem; }
}
.pol-next-section {
  margin-top: 2rem;
  padding: .75rem 1rem;
  background: rgba(37,99,235,.03);
  border-radius: 10px;
  text-align: center;
  font-size: .74rem;
  color: var(--txt3);
  border: 1px dashed rgba(37,99,235,.15);
}
.pol-next-section strong { color: var(--c1); }

/* ─────────────────────────────────────────────
   17. 모바일 반응형 — 신규 탭
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .pb-hero { padding: 1rem 1.2rem; }
  .pb-gauges { grid-template-columns: repeat(2, 1fr); }
  .pb-insights { grid-template-columns: 1fr; }
  .pb-watchlist { grid-template-columns: 1fr; }
  .pd-bilateral-grid { grid-template-columns: 1fr; }
  .pd-chains-grid { grid-template-columns: 1fr; }
  .po-scenarios-grid { grid-template-columns: 1fr; }
  .po-countdown-grid { grid-template-columns: repeat(2, 1fr); }
  .po-quarter-events { grid-template-columns: 1fr; }
  .pdp-country-tab { padding: .35rem .5rem; }
  .pdp-tab-name { display: none; }
}

@media (max-width: 480px) {
  .pb-gauges { grid-template-columns: 1fr; }
  .pb-gauge-value { font-size: 1.2rem; }
  .po-countdown-grid { grid-template-columns: 1fr; }
  .pd-network-svg { max-height: 300px; }
  .pdp-country-tab { padding: .3rem .4rem; }
}

/* ─────────────────────────────────────────────
   18. 인쇄 스타일
   ───────────────────────────────────────────── */
@media print {
  .policy-map-wrapper {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .stance-toggle-group,
  .policy-country-legend {
    display: flex !important;
  }

  .policy-detail-card,
  .policy-gauge-card {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
  }
}

/* ─────────────────────────────────────────────
   17. 글로벌 산업 밸류체인 & 자원 지도 (.vc-map-*)
   ───────────────────────────────────────────── */
.vc-map-filters {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem;
}
.vc-map-filter-btn {
  padding: .4rem .7rem; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--txt2); font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.vc-map-filter-btn:hover { border-color: var(--c1); color: var(--c1); }
.vc-map-filter-btn.active { background: var(--c1); color: #fff; border-color: var(--c1); }

.vc-map-container {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem;
  padding: 1rem;
}
.vc-map-svg-wrap {
  position: relative; width: 100%; aspect-ratio: 1.71 / 1;
}
.vc-map-svg-wrap svg {
  width: 100%; height: 100%;
}
.vc-map-svg-wrap svg path.map-country {
  fill: var(--line); stroke: var(--bg); stroke-width: .5;
  transition: fill .3s, opacity .3s; cursor: pointer;
}
.vc-map-svg-wrap svg path.map-country:hover { opacity: .8; }
.vc-map-svg-wrap svg path.map-country.vc-highlighted { stroke-width: 1.2; }

.vc-map-marker {
  position: absolute; transform: translate(-50%,-50%);
  cursor: pointer; transition: all .25s; z-index: 5;
}
.vc-map-marker-dot {
  border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.22); transition: transform .2s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 800; color: #fff; letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.vc-map-marker:hover .vc-map-marker-dot {
  transform: scale(1.3);
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.vc-map-marker.active .vc-map-marker-dot {
  transform: scale(1.45);
  box-shadow: 0 0 0 5px rgba(37,99,235,.25), 0 3px 10px rgba(0,0,0,.25);
}
.vc-map-marker-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: .58rem; font-weight: 700; color: var(--txt); white-space: nowrap;
  margin-top: 3px; pointer-events: none; text-align: center;
  text-shadow: 0 0 3px var(--card), 0 0 3px var(--card), 0 0 3px var(--card);
}
.vc-map-marker.active .vc-map-marker-label { color: var(--c1); font-weight: 800; }

.vc-map-marker-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,.92); color: #fff; padding: .4rem .65rem;
  border-radius: 8px; font-size: .65rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s; z-index: 20; line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.vc-map-marker-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(15,23,42,.92);
}
.vc-map-marker:hover .vc-map-marker-tooltip { opacity: 1; }

@keyframes vcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), .45), 0 2px 6px rgba(0,0,0,.22); }
  50% { box-shadow: 0 0 0 6px rgba(var(--pulse-rgb), 0), 0 2px 6px rgba(0,0,0,.22); }
}
.vc-map-marker.vc-pulse .vc-map-marker-dot {
  animation: vcPulse 2s ease-in-out infinite;
}

.vc-map-legend {
  position: absolute; top: 12px; left: 12px; z-index: 10;
  display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem .7rem;
  font-size: .66rem; color: var(--txt); align-items: center;
  background: rgba(255,255,255,.88); backdrop-filter: blur(6px);
  border-radius: 8px; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
[data-theme="dark"] .vc-map-legend {
  background: rgba(15,23,42,.82);
}
.vc-map-legend-item {
  display: flex; align-items: center; gap: .25rem;
}
.vc-map-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  .vc-map-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
  }
  .vc-map-filter-btn {
    padding: .4rem .3rem;
    font-size: .63rem;
    white-space: normal;
    text-align: center;
    border-radius: 10px;
  }
  .vc-map-marker-label { font-size: .48rem; margin-top: 2px; }
  .vc-map-marker-dot { font-size: .45rem; border-width: 2px; }
  .vc-map-legend {
    top: 6px; left: 6px; padding: .35rem .5rem; font-size: .58rem; gap: .35rem;
  }
  .vc-map-legend-dot { width: 8px; height: 8px; }
}

@media (max-width: 480px) {
  .vc-map-filters {
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
  }
  .vc-map-filter-btn {
    padding: .35rem .2rem;
    font-size: .58rem;
  }
  .vc-map-marker-label { display: none; }
  .vc-map-marker-dot { font-size: .4rem; border-width: 1.5px; }
  .vc-map-legend {
    position: relative; top: auto; left: auto;
    margin-bottom: .5rem; border-radius: 8px;
    justify-content: center;
  }
}

/* Value Chain Flow Diagram */
.vc-flow-section { margin-bottom: 1.5rem; }
.vc-flow-title {
  font-size: .82rem; font-weight: 700; color: var(--txt); margin-bottom: .8rem;
}
.vc-flow-stages {
  display: flex; align-items: stretch; gap: 0; overflow-x: auto;
  padding-bottom: .5rem;
}
.vc-flow-stage {
  flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem; position: relative;
}
.vc-flow-stage:not(:last-child)::after {
  content: '→'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: var(--c1); font-weight: 700; z-index: 2;
}
.vc-flow-stage-name {
  font-size: .72rem; font-weight: 700; color: var(--c1); margin-bottom: .5rem;
  text-align: center; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}
.vc-flow-country {
  display: flex; align-items: center; gap: .3rem;
  padding: .2rem .4rem; margin-top: .25rem; border-radius: 6px;
  background: rgba(37,99,235,.03); font-size: .68rem; color: var(--txt);
  cursor: pointer; transition: background .2s;
}
.vc-flow-country:hover { background: rgba(37,99,235,.08); }
.vc-flow-country-flag { font-size: .75rem; }
.vc-flow-country-share {
  margin-left: auto; font-weight: 700; color: var(--c1); font-size: .65rem;
}

/* Bottleneck / Chokepoint indicators */
.vc-bottleneck-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .6rem; margin-top: 1rem;
}
.vc-bottleneck {
  padding: .7rem .85rem;
  border-radius: 10px; font-size: .7rem; line-height: 1.55;
  transition: transform .2s, box-shadow .2s;
}
.vc-bottleneck:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.vc-bottleneck.vc-bn-critical {
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); color: #b91c1c;
}
.vc-bottleneck.vc-bn-high {
  background: rgba(249,115,22,.06); border: 1px solid rgba(249,115,22,.2); color: #c2410c;
}
.vc-bottleneck.vc-bn-moderate {
  background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2); color: #b45309;
}
.vc-bottleneck-header {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem;
  font-weight: 700; font-size: .74rem;
}
.vc-bottleneck-severity {
  font-size: .58rem; font-weight: 700; padding: .15rem .4rem; border-radius: 4px;
  margin-left: auto; text-transform: uppercase; letter-spacing: .03em;
}
.vc-bn-critical .vc-bottleneck-severity { background: rgba(239,68,68,.12); color: #dc2626; }
.vc-bn-high .vc-bottleneck-severity { background: rgba(249,115,22,.12); color: #ea580c; }
.vc-bn-moderate .vc-bottleneck-severity { background: rgba(245,158,11,.12); color: #d97706; }
.vc-bottleneck-title {
  font-size: .85rem; font-weight: 700; color: var(--txt,#1e293b);
  margin: 1.2rem 0 .5rem; padding-left: .2rem;
}
.vc-bottleneck-bar-wrap {
  height: 5px; background: rgba(0,0,0,.06); border-radius: 3px; margin: .4rem 0;
  display: flex; align-items: center; gap: .4rem; position: relative;
}
.vc-bottleneck-bar {
  height: 100%; border-radius: 3px; transition: width .5s ease; flex-shrink: 0;
}
.vc-bottleneck-bar-label {
  font-size: .6rem; font-weight: 700; color: var(--sub,#64748b); white-space: nowrap;
}
.vc-bottleneck-text { font-size: .67rem; line-height: 1.5; opacity: .9; }
.vc-bottleneck-icon { margin-right: .3rem; }

/* Country Detail Panel */
.vc-country-panel {
  background: var(--card); border: 1.5px solid var(--c1); border-radius: 12px;
  padding: 1.2rem; margin-bottom: 1.5rem;
  display: none; animation: vcPanelIn .3s ease;
}
.vc-country-panel.active { display: block; }
@keyframes vcPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.vc-country-header {
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.vc-country-flag { font-size: 2rem; }
.vc-country-name { font-size: 1rem; font-weight: 800; color: var(--txt); }
.vc-country-leverage {
  font-size: .74rem; color: var(--c1); font-weight: 600; margin-top: .15rem;
}
.vc-country-close {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--txt2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: all .2s;
}
.vc-country-close:hover { border-color: #ef4444; color: #ef4444; }

.vc-country-strengths {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}
.vc-strength-card {
  padding: .5rem .7rem; background: rgba(37,99,235,.03);
  border: 1px solid var(--line); border-radius: 8px;
}
.vc-strength-industry {
  font-size: .68rem; font-weight: 700; color: var(--c1); margin-bottom: .2rem;
}
.vc-strength-items {
  font-size: .7rem; color: var(--txt2); line-height: 1.5;
}

.vc-country-vulnerabilities {
  padding: .5rem .7rem; background: rgba(239,68,68,.03);
  border: 1px solid rgba(239,68,68,.12); border-radius: 8px;
  font-size: .7rem; color: #b91c1c; line-height: 1.5;
}

/* Sector detail within industry */
.vc-sector-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .8rem; margin-bottom: 1.2rem;
}
.vc-sector-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .8rem; transition: border-color .2s;
}
.vc-sector-card:hover { border-color: var(--c1); }
.vc-sector-name {
  font-size: .78rem; font-weight: 700; color: var(--txt); margin-bottom: .5rem;
}
.vc-sector-stage-label {
  font-size: .65rem; font-weight: 600; color: var(--c1); margin-top: .4rem; margin-bottom: .2rem;
}
.vc-sector-country-row {
  display: flex; align-items: center; gap: .3rem;
  padding: .15rem 0; font-size: .68rem; color: var(--txt2);
}
.vc-sector-country-bar {
  flex: 1; height: 4px; background: var(--line); border-radius: 2px; margin: 0 .3rem;
  overflow: hidden;
}
.vc-sector-country-bar-fill {
  height: 100%; border-radius: 2px; background: var(--c1);
}

/* Stage color coding */
.vc-stage-upstream { --stage-color: #22c55e; }
.vc-stage-midstream { --stage-color: #3b82f6; }
.vc-stage-downstream { --stage-color: #8b5cf6; }
.vc-stage-enduse { --stage-color: #f59e0b; }

@media (max-width: 768px) {
  .vc-flow-stages { flex-direction: column; }
  .vc-flow-stage:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -14px; transform: translateX(-50%); }
  .vc-sector-grid { grid-template-columns: 1fr; }
  .vc-country-strengths { grid-template-columns: 1fr; }
}