/* 종목 상세 캔들 차트. `styles.css` 의 색 변수를 쓰되, **캔버스가 값으로 읽어야 하는 색**은
   여기 `.chart` 에 모아 둔다 — 캔버스는 CSS 클래스를 못 쓰기 때문에 `chart.js` 가
   `getComputedStyle` 로 이 속성들을 읽는다. 그래서 이 블록이 팔레트의 단일 소스이고,
   `chart.js` 의 리터럴은 스타일시트가 안 붙었을 때의 폴백일 뿐이다.
   (JS 는 여기 색을 **읽기만** 한다. 쓰는 곳은 없다.) */

.chart {
  /* **한국식: 상승 빨강 · 하락 파랑**(방문자 요청, 2026-08-29 — D-048). 축은 달러지만
     읽는 사람이 한국 독자라, 미국식 초록·빨강을 쓰면 빨간 봉을 «내렸다»로 읽어 그림
     전체가 거꾸로 읽힌다. 색은 `screener_kr/web/styles.css` 의 `--up`/`--down`(라이트)과
     **같은 값**이다 — 두 앱은 다른 오리진의 iframe 이라 스타일시트를 못 나눠 쓰고,
     나란히 둔 사본이다. 값을 바꾸려면 양쪽을 함께 바꾼다:

         grep -rn "d62b2b\|1257c9" ~/Projects/screener_{kr,us}/web/

     `styles.css` 의 `--up`(표의 오늘 돌파)과는 그래도 변수를 나눠 둔다: 표의 뜻이
     바뀌어도 차트의 캔들 색이 따라 변하면 안 된다. */
  --chart-up: #d62b2b;
  --chart-down: #1257c9;
  --chart-grid: #e3e6ea;
  --chart-axis: #6b7480;
  /* 캔버스가 **직접 칠하는** 배경. CSS `background` 로만 두면 `toBlob` 이 투명 PNG 를
     내보내 붙여넣는 곳의 색이 그대로 비친다(어두운 앱에서는 글씨가 사라진다). */
  --chart-bg: #ffffff;

  /* 이동평균 4개(10/50/150/200 — 미너비니 기준선, `app/chart.py`). **캔들 색을 피해** 골랐고,
     기간이 길수록 채도를 낮춰 (10 노랑 → 200 회색) 짧은 선이 앞으로 읽히게 했다.
     ⚠️ 50일선은 원래 파랑 `#2563eb` 였다 — 하락봉이 파랑이 된 날(2026-08-29) 파란 봉
     위를 지나는 파란 선이 되어 **청록으로 옮겼다**. 캔들 색을 다시 만지는 사람은 이 넷도
     함께 본다: 캔들과 같은 색의 이동평균선은 에러 없이 «없는 선»이 된다. */
  --ma-10: #f59e0b;
  --ma-50: #0d9488;
  --ma-150: #7c3aed;
  --ma-200: #64748b;

  /* 평균거래량(50일) 선. 아래 칸에만 있어 이동평균과 겹치지 않지만, 색까지 같으면 저장한
     그림에서 "다섯 번째 이동평균"으로 읽힌다 — 10일선보다 짙은 주황으로 갈라 둔다. */
  --vma: #d97706;

  /* ANTS 점 넷(`app/ants.py` 의 코드가 그대로 이름이다). 회색 → 노랑 → 하늘 → 초록 순으로
     밝아지므로 색약이어도 **밝기 순서**가 강도를 말해 준다. 초록은 캔들이 빨강·파랑이 된
     뒤로 **이 점들만 쓰는 색**이라 그날의 봉과 섞이지 않는다(전에는 양봉과 한 덩어리로
     읽힐까 봐 캔들 초록보다 밝게 잡아 두었다). ⚠️ 하늘(`--ant-mp`)만은 하락봉 파랑과
     이웃이다 — 봉보다 밝고 둥글어 갈리지만 눈으로 볼 목록에 있다(`docs/manual-qa-stock.md`). */
  --ant-m: #9aa4b2;
  --ant-mv: #eab308;
  --ant-mp: #0ea5e9;
  --ant-mvp: #16a34a;

  position: relative;
  margin: 12px 0;
}

/* 폭은 컨테이너가 정하고 높이는 JS 가 폭에서 만든다(`chart.js` ASPECT). 여기서 높이를
   또 정하면 두 곳이 높이를 갖게 되고, 리사이즈 중에 캔버스가 늘었다 줄었다 한다. */
.chart-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: var(--radius, 8px);
  background: var(--bg, #fff);
}

/* ── 범례 ──────────────────────────────────────────────────────────
   캔버스 안에 그리지 않는다. 안에 있으면 확대·복사·스크린리더에서 사라지고,
   좁은 폭에서 캔들 위에 겹친다. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7480);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 색만으로 계열을 구별하게 두지 않는다 — 견본 옆에 `20일` 처럼 기간을 항상 적는다. */
.chart-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.chart-legend-item.ma-10 .chart-swatch { background: var(--ma-10); }
.chart-legend-item.ma-50 .chart-swatch { background: var(--ma-50); }
.chart-legend-item.ma-150 .chart-swatch { background: var(--ma-150); }
.chart-legend-item.ma-200 .chart-swatch { background: var(--ma-200); }
.chart-legend-item.vma .chart-swatch { background: var(--vma); }

/* ANTS 줄. 견본이 **동그라미**인 이유는 화면의 그것이 점이라서다 — 선 견본을 쓰면 어느
   것이 선이고 어느 것이 점인지 범례가 거짓말을 한다. */
.chart-legend-ants { margin-top: 2px; }
.chart-legend-title { font-weight: 600; }
.chart-swatch-dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-legend-item.ant-m .chart-swatch { background: var(--ant-m); }
.chart-legend-item.ant-mv .chart-swatch { background: var(--ant-mv); }
.chart-legend-item.ant-mp .chart-swatch { background: var(--ant-mp); }
.chart-legend-item.ant-mvp .chart-swatch { background: var(--ant-mvp); }

/* ── 시세가 없을 때 ────────────────────────────────────────────────
   빈 캔버스는 "고장"과 구별되지 않는다(`web/CLAUDE.md` 의 0건 규칙과 같은 이유).
   말을 적고, 캔버스와 범례는 감춘다. */
.chart-empty {
  margin: 0;
  padding: 24px 12px;
  border: 1px dashed var(--line, #e3e6ea);
  border-radius: var(--radius, 8px);
  text-align: center;
  color: var(--muted, #6b7480);
  font-size: 14px;
}

.chart[data-empty="no"] .chart-empty { display: none; }
.chart[data-empty="yes"] .chart-canvas,
.chart[data-empty="yes"] .chart-legend { display: none; }