/* 캔들 차트의 **덧입히는 것들** — 커서 십자선 · 호버 툴팁 · 내보내기 줄.
   `chart.css` 에서 갈라 나왔다(2026-08-08, 200줄 한도). 저기는 **그림 자체**(팔레트·캔버스·
   범례)이고 여기는 그 위에 얹히는 DOM 이다. 캔버스가 값으로 읽는 색은 전부 저쪽에 있다 —
   여기 규칙은 하나도 `chart.js` 가 읽지 않는다.
   같은 `.chart` 안에 살기 때문에 두 파일은 **항상 함께** 붙는다(`stock.html`). */

/* ── 커서 십자선 ──────────────────────────────────────────────────────────
   `overlay.js` 가 `.chart`(position:relative) 안에 절대 배치한다. **캔버스가 아니라 DOM 인
   이유**는 비용이다 — 캔버스에 그리면 마우스가 1px 움직일 때마다 수백 개 봉과 MA 4선을 다시
   그려야 한다. 여기서는 `style.left/top` 만 바뀐다.
   선은 **데이터 영역 안에서만** 그어진다(높이·폭을 JS 가 준다) — 날짜축까지 내려가면 월
   라벨을 그어 버리고, 눈금 자리까지 나가면 가격 글씨를 지운다. */
.chart-cross {
  position: absolute;
  z-index: 1;                /* 툴팁(2)보다 아래 — 선이 글씨 위를 지나가면 안 읽힌다 */
  pointer-events: none;
  background: var(--chart-axis);
  opacity: 0.45;             /* 캔들보다 옅게. 같은 무게면 십자선이 그림으로 읽힌다 */
}
.chart-cross-v { width: 1px; }
.chart-cross-h { height: 1px; }
.chart-cross[hidden] { display: none; }

/* 가로선이 가리키는 **가격**. 선만 있으면 "어느 높이"는 알아도 "얼마"는 모른다. */
.chart-cross-price {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--chart-axis);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chart-cross-price[hidden] { display: none; }

/* ── 호버 툴팁 ────────────────────────────────────────────────────────────
   `overlay.js` 가 같은 방식으로 배치한다. 커서를 따라다니고 `hidden` 으로 숨는다. 색은
   캔들과 같은 뜻(상승 초록·하락 빨강)을 `data-dir` 로 되쓴다 — 캔버스가 아니라 DOM 이라
   CSS 변수를 그대로 쓴다. **눈으로 봐야 하는 것**은 `detail/CLAUDE.md` */
.chart-tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;      /* 툴팁이 마우스를 먹으면 그 아래 봉의 호버가 끊긴다 */
  min-width: 132px;
  padding: 6px 8px;
  border: 1px solid var(--chart-grid);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.5;
  color: var(--chart-axis);
}
.chart-tip[hidden] { display: none; }

.chart-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.chart-tip-key { color: var(--chart-axis); }
.chart-tip-val { color: #1a1a1a; font-variant-numeric: tabular-nums; }

/* 날짜 줄은 라벨이 없어 값만 굵게 — 툴팁의 제목이다. */
.chart-tip .tip-date .chart-tip-val { font-weight: 600; }

/* 등락률·종가는 방향 색으로. 나머지 줄은 중립색 그대로 둔다. */
.chart-tip[data-dir="up"] .tip-close .chart-tip-val,
.chart-tip[data-dir="up"] .tip-change .chart-tip-val { color: var(--chart-up); }
.chart-tip[data-dir="down"] .tip-close .chart-tip-val,
.chart-tip[data-dir="down"] .tip-change .chart-tip-val { color: var(--chart-down); }

/* ── 내보내기 버튼 ────────────────────────────────────────────────────────
   **차트 바로 위, 오른쪽 끝.** 캔버스 안에 겹쳐 띄우지 않는다 — 이 화면의 종목은 전부
   52주 신고가 근처라 오른쪽 위가 하필 값이 있는 자리다(버튼이 최근 봉을 가린다).
   접거나 흐리게 하지도 않는다 — 눌러야 알 수 있는 기능을 감추면 없는 것과 같다.
   결과 문구(`role="status"`)를 **버튼 아래 제 줄**에 두는 이유는 `exportbar.js` 머리말에
   있다: 클립보드는 조용히 실패할 수 있고, 그때 아무 말이 없으면 방문자는 복사된 줄 안다. */
/* 캔버스와 버튼 줄을 담는 상자(`js/detail/exportbar.js`). **여기서는 상자가 아니다** —
   `display: contents` 는 자기 상자를 만들지 않고 자식을 부모 배치에 그대로 참여시키므로,
   이 줄이 붙기 전과 배치가 같다. 상자가 되는 것은 좁은 화면뿐이다(`mobile-detail.css`). */
.chart-shot { display: contents; }

.chart-export {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 6px 8px; margin: 0 0 6px;
}
/* 버튼 셋 자체는 `buttons.css` 의 `.btn-action` 이다(D-076) — 여기는 줄의 배치와 결과 문구뿐.
   좁은 화면에서 둘을 감추고 캔버스 안으로 넣는 규칙은 `mobile-detail.css`. */
/* 성공과 실패를 **색만으로** 가르지 않는다 — 문구 자체가 무엇을 해야 하는지 말한다.
   버튼과 같은 줄에 두면 문구가 길어질 때 버튼이 왼쪽으로 밀린다(누를 자리가 움직인다).
   제 줄을 통째로 쓰되, 할 말이 없을 때는 자리도 차지하지 않는다. */
.chart-export-status {
  flex-basis: 100%; text-align: right; color: var(--muted, #6b7480); font-size: 12px;
}
.chart-export-status:empty { display: none; }
/* 실패 문구는 **캔들 색이 아니라 오류 색**이다(`--err`). 예전에는 `--chart-down` 을 썼는데,
   캔들이 한국식이 되면서 하락색이 파랑이 되었다(D-048) — 파란 실패 문구는 «잘 됐다»로 읽힌다. */
.chart-export-status.is-bad { color: var(--err, #b3261e); }

/* 시세가 없으면 내보낼 그림도 없다. 범례·캔버스와 함께 감춘다. */
.chart[data-empty="yes"] .chart-export { display: none; }