/* 장중 잠정 시세의 생김새(D-026). `table.css`(표)·`controls.css`(조건)와 갈라 둔 기준은
   200줄이 아니라 **바뀌는 계기**다 — 여기는 «시세 표시가 바뀔 때»만 손댄다.

   이 파일이 지켜야 하는 것은 둘이다:
   ① **잠정 시세가 확정 종가처럼 보이면 안 된다.** 장중 값은 색·굵기·표시가 다르고,
      시세를 못 받은 칸은 **빈 칸이 아니라** 종가라고 적힌 칸이다(빈 칸은 «데이터 없음»으로
      읽히는데 사실은 «장중 시세만 없다»다).
   ② **출처가 다르다는 사실이 화면에 있어야 한다**(`docs/limitations.md` L18) — 토스는 NXT 를
      포함한 통합 시세고 판정값은 KRX 종가다. 그 말은 표시줄 문구가 하고, 여기는 자리만 준다.

   색은 전부 변수다. JS 는 클래스만 토글한다. 다크 팔레트는 `[data-theme="dark"]` 한 곳뿐이다
   (`@media` 와 두 곳에 적으면 한쪽만 고쳐진 날 «OS 다크에서만 옛 색»이 된다 — `theme.js`). */

:root {
  --live: #b26a00;            /* 잠정 — 확정값(본문색)과도, 상승 빨강과도 달라야 한다 */
  --live-bg: #fff6e5;
  --live-high: #d62b2b;       /* 장중 52주 고가 돌파. 한국식이라 **빨강**이다 */
  --live-high-bg: #fdecec;
  --stale: #8a93a3;           /* 장중 시세를 못 받은 칸 */
}

:root[data-theme="dark"] {
  --live: #f0b357;
  --live-bg: #2a2213;
  --live-high: #ff6b6b;
  --live-high-bg: #2c1a1a;
  --stale: #757e8d;
}

/* ── 표 아래 표시줄 ───────────────────────────────────────────────── */
/* 행이 없으면(0건·실패 전) 통째로 사라진다 — 없는 표 위의 «장중»은 거짓말이다. */
.live[data-live="off"]:empty,
.live:empty { 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-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: 4px 0 0; }
/* 실패는 성공과 달라야 한다. 표는 그대로 남고(확정 종가라 여전히 유효하다) 줄만 실패를 말한다. */
.live[data-live="error"] .live-line { background: var(--accent-soft); color: var(--ink); }
.live[data-live="error"] .live-badge { background: var(--ink-soft); }
.live[data-live="off"] .live-line { background: var(--panel); color: var(--ink-soft); }
.live[data-live="off"] .live-badge { background: var(--ink-faint); }

/* ── 가격 칸 ──────────────────────────────────────────────────────── */
/* 잠정값. `≈` 는 장식이 아니라 **«확정이 아니다»** 라는 말이다. */
table.screen td.price.is-live { color: var(--live); font-weight: 700; }
table.screen td.price.is-live::before { content: "≈ "; font-size: 11px; }
/* 시세를 못 받은 칸 — 값은 그대로 두고 «종가»라고 적는다. 비우면 뜻이 뒤집힌다. */
table.screen td.price.is-stale-live { color: var(--stale); }
table.screen td.price.is-stale-live::after {
  content: " 종가"; font-size: 10px; font-weight: 400;
}

/* ── 장중 52주 고가 돌파 행 ───────────────────────────────────────── */
/* 확정 돌파 칸과 **다른 자리·다른 모양**이다: 저쪽은 칸, 이쪽은 행이다. 같은 모양을 쓰면
   아직 안 끝난 오늘이 확정 사실처럼 읽힌다. */
table.screen tbody tr.is-live-high td { background: var(--live-high-bg); }
table.screen tbody tr.is-live-high td.name {
  box-shadow: inset 3px 0 0 var(--live-high);
}
table.screen tbody tr.is-live-high td.name::after {
  content: " 장중 신고가"; color: var(--live-high); font-size: 10px; font-weight: 700;
}