/* 캔들 차트의 **덧입히는 것들** — 커서 십자선 · 호버 툴팁 · 내보내기 줄.
   `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; }

/* ── 종목 링크 툴팁(D-173, `js/stocktip/`) ────────────────────────────────────
   상세 링크 위 마우스에 뜨는 판 — 맨 위가 이 차트(3개월)라 차트 덧입힘과 같은 시트에 둔다(index.html 200줄 한도).
   색은 styles.css·controls.css(`--rs-t0..4`)·chart.css 토큰만 쓴다.
   차트는 상세와 같은 `.chart` 조립이라 범례·내보내기 줄은 여기서만 숨긴다(작은 판에 아홉 항목이 두 줄로 선다). */

.stock-hover {
  position: fixed; z-index: 1000; left: 0; top: 0;
  width: 460px; max-width: calc(100vw - 16px);
  padding: 10px 12px 12px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  font-size: 13px; line-height: 1.4;
}
.stock-hover[hidden], .stock-hover-chart[hidden] { display: none; }
.stock-hover .chart-legend,
.stock-hover .chart-export { display: none; }

.stock-hover-head { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.stock-hover-sym { font-size: 15px; }
.stock-hover-name { overflow: hidden; text-overflow: ellipsis; }
.stock-hover-asof { margin-left: auto; color: var(--muted); font-size: 11px; }
.stock-hover-status { margin: 8px 0 0; color: var(--muted); }

.stock-hover-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 8px 0 0;
}
.stock-hover-fact { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.stock-hover-key { margin: 0; color: var(--muted); white-space: nowrap; }
/* 수익률 두 칸은 «(시장 대비 +23%p)»가 붙어 반 칸에 안 들어간다(말줄임으로 잘렸다, 2026-10-13) — 한 줄 전체. */
.stock-hover-fact.fact-ret_3m, .stock-hover-fact.fact-ret_12m { grid-column: 1 / -1; }
.stock-hover-val .fact-aside { margin-left: 4px; font-weight: 400; color: var(--muted); }
.stock-hover-val {
  margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stock-hover-val.is-missing,
.stock-hover-num.is-missing { font-weight: 400; color: var(--muted); }
.stock-hover-val.rs-tier { padding: 0 6px; border-radius: 4px; color: #111; }
.stock-hover-val.rs-t0 { background: var(--rs-t0); }
.stock-hover-val.rs-t1 { background: var(--rs-t1); }
.stock-hover-val.rs-t2 { background: var(--rs-t2); }
.stock-hover-val.rs-t3 { background: var(--rs-t3); }
.stock-hover-val.rs-t4 { background: var(--rs-t4); }

.stock-hover-growth { width: 100%; margin: 8px 0 0; border-collapse: collapse; border-top: 1px solid var(--line); }
.stock-hover-growth th, .stock-hover-growth td { padding: 3px 0 0; text-align: left; font-weight: 400; }
.stock-hover-growth th { color: var(--muted); }
.stock-hover-growth .stock-hover-num { text-align: right; font-variant-numeric: tabular-nums; }
.stock-hover-growth td.stock-hover-num { font-weight: 600; color: var(--fg); }
.stock-hover-growth td.stock-hover-num.is-missing { font-weight: 400; color: var(--muted); }