/* 미국 매크로 탭 — 패널·칩·범례·선차트 상자. 규칙은 web/MACRO.md.
   차트 색은 chart.css(캔들/거래량)를 그대로 따르고, 여기서는 매크로 전용 선 색만 정의한다.
   다크 테마 대응은 기존과 동일하게 하지 않는다(원전 톤 유지). */

:root {
  --macro-s1: #1f4d8f;   /* 시리즈 1: 파랑(단일 시리즈일 때도 이 색 — ADR의 --adr-line과 같은 역할) */
  --macro-s2: #b26a00;   /* 시리즈 2: 주황 */
  --macro-s3: #157347;   /* 시리즈 3: 초록 */
  --macro-s4: #7a56c2;   /* 시리즈 4: 보라 — MA_SERIES와 겹치지 않는 계열 */
  --macro-ref: var(--text-dim);
  --macro-grid: var(--border);
  --macro-h: 180px;          /* SVG 선차트(TGA·금리·스프레드) — px 고정, ADR.md §A4와 같은 이유 */
  --macro-axis-w: 64px;   /* $1,024B 같은 라벨이 다 들어가게(52px에서 잘렸었다) */
  --macro-xaxis-h: 18px;
  --macro-etf-h: 320px;      /* lightweight-charts(ETF) */
}

.macro-section[hidden] { display: none; }

.macro-block {
  margin-top: 22px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ── ETF 칩(그룹별 줄)·기간 버튼 ──────────────────────────────────────────
   칩(.toggle)과 기간 버튼(.preset)을 서로 다른 상자에 둔다 — 위쪽 테두리 구분선 +
   옅은 배경으로 "종목 고르기"와 "구간 고르기"가 다른 조작임을 시각적으로 가른다. */
.macro-etf-chips { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.macro-chip-row { flex-wrap: wrap; }
.macro-etf-toolbar {
  margin: 4px 0 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}
/* 오버플로 안전판(§M1) — lightweight-charts가 스켈레톤을 못 지운 순간이 있어도
   컨테이너 밖(다음 패널)으로 절대 새지 않는다. position:relative라 stacking에서
   이후 in-flow 형제보다 위에 그려지므로, 여기서 자르는 것이 유일하게 확실한 방어선이다. */
.macro-etf-chart { position: relative; width: 100%; height: var(--macro-etf-h); overflow: hidden; }
/* 캔버스 좌상단 오버레이 — 티커+서버 라벨(macro-etf-chart.js가 render()마다 채운다). 화면과
   이미지 복사본이 같은 문구를 보게 하려고 캔버스 위에 얹지, 헤더 캡션과 중복 문자열을 짓지 않는다. */
.macro-etf-overlay {
  /* lightweight-charts가 자기 캔버스 레이어에 z-index를 쓴다 — 이 값과 같거나 낮으면
     DOM 순서(차트 div가 나중에 붙는다)에 밀려 오버레이가 캔들 밑에 깔린다(실측 확인). */
  position: absolute; top: 6px; left: 8px; z-index: 5; pointer-events: none;
  padding: 1px 7px; border-radius: 5px; background: rgba(255,255,255,.78);
  font-weight: 700; font-size: 13px; color: var(--text);
}
.macro-etf-values {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; font-size: 14px;
}
.macro-etf-values .macro-item b { font-weight: 700; }

/* ── 선차트(TGA·금리·스프레드) — adr.css의 .adr-chart/.adr-yaxis 구조와 같은 방식 ──────── */
.macro-line-chart {
  position: relative;
  height: calc(var(--macro-h) + var(--macro-xaxis-h));
  padding: 0 0 var(--macro-xaxis-h) var(--macro-axis-w);
}
.macro-line-chart .empty { margin: 0; padding: 24px 0; }
.macro-plot { position: relative; height: 100%; }
.macro-svg { display: block; width: 100%; height: 100%; }

.macro-path { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* TGA의 area 채우기(macro-line.js의 area:true) — 그라디언트 `<stop>` 색은 CSS 변수로 받는다
   (하드코딩 금지, web/CLAUDE.md §4와 같은 원칙). id는 패널마다 고유해야 한다(macro-line.js). */
.macro-area { stroke: none; }
.macro-grad-a.macro-s1 { stop-color: var(--macro-s1); stop-opacity: .35; }
.macro-grad-b.macro-s1 { stop-color: var(--macro-s1); stop-opacity: 0; }
.macro-grad-a.macro-s2 { stop-color: var(--macro-s2); stop-opacity: .35; }
.macro-grad-b.macro-s2 { stop-color: var(--macro-s2); stop-opacity: 0; }
.macro-grad-a.macro-s3 { stop-color: var(--macro-s3); stop-opacity: .35; }
.macro-grad-b.macro-s3 { stop-color: var(--macro-s3); stop-opacity: 0; }
.macro-grad-a.macro-s4 { stop-color: var(--macro-s4); stop-opacity: .35; }
.macro-grad-b.macro-s4 { stop-color: var(--macro-s4); stop-opacity: 0; }
.macro-s1 { stroke: var(--macro-s1); }
.macro-s2 { stroke: var(--macro-s2); }
.macro-s3 { stroke: var(--macro-s3); }
.macro-s4 { stroke: var(--macro-s4); }
.macro-ref { stroke: var(--macro-ref); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.macro-grid { stroke: var(--macro-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }

.macro-yaxis, .macro-xaxis {
  position: absolute; color: var(--text-dim); font-size: 11px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.macro-yaxis { top: 0; left: 0; width: var(--macro-axis-w); height: var(--macro-h); overflow: hidden; }
/* 라벨이 상자 왼쪽 밖으로 새지 않게 오른쪽 정렬 + 최대 폭으로 가둔다($1,024B 잘림 수정). */
.macro-ytick {
  position: absolute; right: 6px; max-width: calc(var(--macro-axis-w) - 8px);
  overflow: hidden; text-overflow: clip; transform: translateY(-50%); white-space: nowrap;
}
.macro-xaxis { left: var(--macro-axis-w); right: 0; bottom: 0; height: var(--macro-xaxis-h); }
.macro-xtick { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.macro-xtick:last-child { transform: translateX(-100%); }

/* ── 크로스헤어 툴팁(macro-line-view.js) — adr-tip과 같은 방식 ────────────── */
.macro-cross {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--text-dim); opacity: .5; pointer-events: none;
}
.macro-tip {
  position: absolute; top: 6px; z-index: 2; min-width: 140px; padding: 7px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%); font-size: 12px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.macro-tip-date { margin-bottom: 4px; font-weight: 700; }
.macro-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.macro-tip-row span { color: var(--text-dim); }
/* 값 색을 그 시리즈의 선 색과 맞춘다(macro-line.js가 붙인 인덱스와 같은 macro-sN). */
.macro-tip-row.macro-s1 b { color: var(--macro-s1); }
.macro-tip-row.macro-s2 b { color: var(--macro-s2); }
.macro-tip-row.macro-s3 b { color: var(--macro-s3); }
.macro-tip-row.macro-s4 b { color: var(--macro-s4); }

/* ── 국채 금리 범례 — 선(.macro-path.macro-sN)과 같은 --macro-s* 색을 스와치에도 쓴다 ───── */
.macro-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; font-size: 12px; }
.macro-legend .legend-item { display: inline-flex; align-items: center; gap: 5px; }
.macro-legend .legend-swatch { display: inline-block; width: 18px; height: 2px; }
.macro-legend .legend-swatch.macro-s1 { background: var(--macro-s1); }
.macro-legend .legend-swatch.macro-s2 { background: var(--macro-s2); }
.macro-legend .legend-swatch.macro-s3 { background: var(--macro-s3); }
.macro-legend .legend-swatch.macro-s4 { background: var(--macro-s4); }

.macro-values { margin: 6px 0 0; font-size: 14px; }
.macro-values .macro-item { margin-right: 14px; }
.macro-values .macro-item b { font-weight: 700; }

@media (max-width: 720px) {
  :root { --macro-h: 140px; --macro-axis-w: 56px; --macro-etf-h: 260px; }
}

/* 모바일 좌우 인셋 — chart.css의 .chart-section과 같은 실측 기준·같은 이유(styles.css 참고). */
@media (max-width: 600px) {
  .macro-block { padding-left: 8px; padding-right: 8px; }
}