/* 장중 잠정 시세의 생김새. `styles.css`(표·상태)·`controls.css`(조건 컨트롤)와 갈라 둔 기준은
   200줄이 아니라 **바뀌는 계기**다 — 여기는 "시세 표시가 바뀔 때"만 손댄다.

   이 파일이 지켜야 하는 것은 하나다: **잠정 시세가 확정 종가처럼 보이면 안 된다.**
   그래서 장중 값은 색·굵기·표시가 다르고, 시세를 못 받은 칸은 **빈 칸이 아니라** 종가라고
   적힌 칸이다(빈 칸은 "데이터 없음"으로 읽히는데 사실은 "장중 시세만 없다"다).
   색은 전부 변수다. JS 는 클래스만 토글한다. */

:root {
  --live: #b26a00;          /* 잠정 — 확정값(검정)과도, 돌파 초록과도 달라야 한다 */
  --live-bg: #fff6e5;
  --live-high: #0b7a4b;     /* 장중 52주 고가 돌파 */
  --live-high-bg: #eaf7f0;
  --stale: #8a8f98;         /* 장중 시세를 못 받은 칸 */
}

/* ── 표 아래 표시줄 ───────────────────────────────────────────────── */
/* 행이 없으면(0건·실패·꺼짐 전) 통째로 사라진다 — 없는 표 위의 "장중"은 거짓말이다. */
.live[data-live="off"] { display: none; }
.live { margin-top: 8px; }
.live-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0; padding: 6px 10px; border-radius: var(--radius);
  background: var(--live-bg); font-size: 13px;
}
.live-badge {
  padding: 1px 8px; border-radius: 999px;
  background: var(--live); color: #fff; font-size: 12px; font-weight: 700;
}
.live-when { font-weight: 700; font-variant-numeric: tabular-nums; }
.live-detail { color: var(--muted); font-size: 12px; }
.live-toggle {
  margin-left: auto; padding: 3px 10px;
  border: 1px solid var(--live); border-radius: 6px;
  background: var(--bg); color: var(--live); font: inherit; font-size: 12px; cursor: pointer;
}
.live-note { margin-top: 4px; }
/* 실패는 0건과도 성공과도 달라야 한다. 표는 그대로 남고(확정 종가라 여전히 유효하다)
   표시줄만 실패를 말한다. */
.live[data-live="error"] .live-line { background: var(--err-bg); color: var(--err); }
.live[data-live="error"] .live-badge { background: var(--err); }
.live[data-live="busy"] .live-line { opacity: .7; }

/* ── 가격 칸 ──────────────────────────────────────────────────────── */
/* 잠정값. `≈` 는 장식이 아니라 **"확정이 아니다"** 라는 말이다. */
.screen-table td.col-price.is-live { color: var(--live); font-weight: 700; }
.screen-table td.col-price.is-live::before { content: "≈ "; font-size: 11px; }
/* 시세를 못 받은 칸 — 값은 그대로 두고 "종가"라고 적는다. 비우면 뜻이 뒤집힌다. */
.screen-table td.col-price.is-stale-live { color: var(--stale); }
.screen-table td.col-price.is-stale-live::after {
  content: " 종가"; font-size: 10px; font-weight: 400;
}
/* 장중 갱신이 걸린 동안 머리에도 적는다. 칸마다 읽지 않아도 무엇이 잠정인지 보인다. */
.screen-table th.col-price.is-live .sort-btn::before {
  content: "장중 "; color: var(--live); font-size: 10px; font-weight: 400;
}

/* ── 장중 52주 고가 돌파 행 ───────────────────────────────────────── */
/* 확정 돌파 칸(`.is-breakout`, ▲ 초록 글씨)과 **다른 자리·다른 모양**이다: 저쪽은 칸,
   이쪽은 행 왼쪽 띠. 같은 모양을 쓰면 아직 안 끝난 오늘이 확정 사실처럼 읽힌다. */
.screen-table tbody tr.is-live-high td { background: var(--live-high-bg); }
.screen-table tbody tr.is-live-high td.col-sym {
  box-shadow: inset 3px 0 0 var(--live-high);
}
.screen-table tbody tr.is-live-high td.col-sym::after {
  content: " 장중 신고가"; color: var(--live-high); font-size: 10px; font-weight: 700;
}
/* 색이 값인 칸(RS 히트맵)은 행 배경에 지지 않는다. */
.screen-table tbody tr.is-live-high td.rs-tier { background: inherit; }
.screen-table tbody tr.is-live-high td.rs-t0 { background: var(--rs-t0); }
.screen-table tbody tr.is-live-high td.rs-t1 { background: var(--rs-t1); }
.screen-table tbody tr.is-live-high td.rs-t2 { background: var(--rs-t2); }
.screen-table tbody tr.is-live-high td.rs-t3 { background: var(--rs-t3); }
.screen-table tbody tr.is-live-high td.rs-t4 { background: var(--rs-t4); }

@media (max-width: 720px) {
  .live-toggle { margin-left: 0; }
}