/* 순위검색 판(D-029, 배치는 D-032)만의 것 — 차트 붙박이 · 선택 행 · 식별줄 · 칸 색.
   표 자체의 모양(테두리·정렬 머리·좁은 화면 카드 접기)은 `table.css` 의 `table.screen`
   것을 그대로 쓴다(`js/rank/table.js`). 칩 버튼은 `controls.css` 의 `.chip`. 좁은 화면
   규칙은 여기 없다 — `mobile-rank.css` 뿐이다(`mobile.css` 규약, D-023). 조건 칩 바(D-031,
   `.fbar`)가 이 판의 첫 자식이라 스크리너의 칩 바와 같은 간격(`filterbar.css` 의
   `margin: 0 0 10px`)으로 탭 바 바로 아래 붙는다 — 이 파일은 그 뒤(차트·표)만 다룬다. */

.rank-chart-box { margin-bottom: 12px; }

/* 차트가 위에 붙박인다(데스크톱) — 표를 페이지째 굴려도 차트는 그대로 남는다(D-032, 표
   자신은 더 이상 스크롤하지 않는다). `--bg` 로 바탕을 깔아야 뒤로 지나가는 표 위에 떠
   있을 때 아래 글자가 안 비친다. 좁은 화면(≤600)은 `mobile-rank.css` 가 이 규칙을 다시
   푼다 — 폰에서는 차트도 페이지와 함께 스크롤되고, 그래서 이전/다음 버튼(`nav.js`)이
   붙는다. 팝오버(`filterbar.css` `.fchip-body`, z-index 20)는 이 차트(z-index 1)보다
   위이므로 아래로 펼쳐도 차트를 가린다 — 새로 손댈 것이 없다. */
.rank-chart { position: sticky; top: 0; background: var(--bg); z-index: 1; padding-bottom: 8px; }

/* 표를 감쌀 뿐이다(D-032) — 스크롤은 **페이지**가 한다. 표 머리(`table.css` 의
   `position: sticky; top: 0`)는 이제 이 요소가 아니라 페이지 기준으로 붙박이고, 데스크톱
   에서는 붙박이 차트 밑에 붙어야 하므로 `--rank-chart-h`(`js/rank/chartinset.js` 가 잰다)
   만큼 내려 세운다 — 안 그러면 차트와 머리가 y=0 에서 겹친다. */
.rank-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
table.rank-table thead th { top: var(--rank-chart-h, 0px); }

/* 캔버스는 `canvas.js` `prepare()` 가 픽셀을 잡는다 — CSS 는 CSS 폭만 100% 로 편다
   (`detail.css` 의 같은 규칙과 짝, 이 페이지엔 그 시트가 없어 여기서 다시 적는다). */
.rank-canvas { display: block; width: 100%; }

/* 차트 아래 고정 한 줄 — 떠 있는 툴팁 상자가 아니다(루트 `CLAUDE.md`: 좁은 화면에서
   손가락이 상자를 가리고 iframe 안에서는 잘린다). */
.rank-tip {
  min-height: 1.4em; margin: 6px 0 0; padding: 4px 0; font-size: 12px; color: var(--ink-soft);
}
.rank-tip b { color: var(--ink); margin-right: 6px; }
.rank-tip span { margin-right: 10px; }
.rank-tip i { margin-right: 4px; color: var(--ink-faint); font-style: normal; }

/* 식별줄 — "기업명 · 코드 · +3.4%". 차트 바로 위(`rank/chart.js` 가 캔버스 앞에 앉힌다). */
.rank-ident {
  margin: 0 0 6px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* 기업명은 표의 기업명 칸과 같은 `a.stock`(`table.css`) — 색을 새로 짓지 않는다. 포커스
   링만 이 화면 톤(`--accent`)으로 또렷하게 준다(사용자 요청 2026-09-06). */
.rank-ident a.stock:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* NXT 프리/애프터마켓 등락률 작은 글씨(D-046) — 식별줄 등락률 뒤(`ident.js`, `.ident-pct`
   안에 중첩)·표 등락률 칸 뒤(`columns.js`)가 같이 쓴다. 본값(정규장 기준)과 다른 시점의
   값이라 살짝 옅고 작게 — 본값 판단을 방해하지 않는다(`.prov`, `table.css`, 와 같은 결).
   색은 표의 `.up`/`.down`/`.flat`(`table.css`)과 **같은 변수**를 새 선택자로 다시 쓴다 —
   `td.up` 등은 `<td>` 하나만 겨눠 이 중첩 요소엔 안 걸린다. */
.rank-ident-nxt { font-size: 11px; font-weight: 500; opacity: 0.85; }
.rank-ident-nxt.up { color: var(--up); }
.rank-ident-nxt.down { color: var(--down); }
.rank-ident-nxt.flat { color: var(--flat); }

/* 이전/다음 버튼 + 위치("N위 / 전체") 줄(D-032, 모바일 전용) — 차트 **아래**, screener_us
   와 같은 배치(사용자 요청 2026-09-06). 데스크톱은 방향키가 있어 줄 자체를 숨긴다(칸을 안
   차지해야 해서 자식이 아니라 `.rank-nav` 를 숨긴다). 좁은 화면 크기·간격은 `mobile-rank.css`. */
.rank-nav { display: none; }

/* 컨트롤 줄(시장·방향) 사이 간격. */
.rank-controls-row { margin-bottom: 8px; }

/* 개수 상태줄("N종목 · 기준일 …"). */
.rank-status { margin: 0 0 8px; color: var(--ink-faint); font-size: 13px; }

/* 날짜 선택(D-045) — `.rank-controls` 셋째 줄(`js/rank/datebar.js`). `.fbar` 가 간격·줄
   바꿈을 이미 준다(`filterbar.css`, 폭 좁은 화면도 그대로 흐른다) — 여기는 안의 조각만. */
.rank-datebar { align-items: center; font-size: 13px; color: var(--ink-soft); }
.rank-date-label { display: inline-flex; align-items: center; gap: 6px; }
.rank-date-input { font: inherit; color: inherit; }
.rank-date-tz { color: var(--ink-faint); }
.rank-date-note { color: var(--accent); }

/* ── 선택 행 (요청 지시의 두 빈틈 중 하나 — `screener_us` 참조 구현엔 없던 스타일) ──── */
/* 배경 + 왼쪽 테두리 — 색은 강조 톤 하나(`--accent-soft`/`--accent`)뿐이라 다크 모드에서도
   따로 손댈 것이 없다. */
.rank-table tbody tr.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rank-table tbody tr.is-selected:hover { background: var(--accent-soft); }

/* 코드 칸 — 종목코드는 이 표에서만 보여 준다(D-029 서버 계약). 옅게 둬 기업명보다
   눈에 덜 띄게 한다(루트 `CLAUDE.md`: 종목은 기업명으로 부른다). */
.rank-table td.code { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* 등락률 칸 색. 표의 `.up`/`.down`/`.flat`(`table.css`)을 그대로 재사용한다 — 새 이름을
   두지 않는다. 못 낸 값(`null`, `js/rank/columns.js` 가 `is-missing` 을 붙인다)은 옅은
   회색이다 — "모른다"를 빨강·파랑 어느 쪽으로도 단정 짓지 않는다. */
.rank-table td.col-chg.is-missing { color: var(--ink-faint); }

/* ── 장중(D-030 화면 반) ─────────────────────────────────────────────── */
/* 현재가 칸은 `live.css` 의 `td.price.is-live`/`.is-stale-live` 를 **그대로** 쓴다
   (선택자가 `.price` 하나만 보므로 이 칸에도 그대로 걸린다) — 새 색을 만들지 않는다.
   등락률 칸(`.col-chg`)은 `live.css` 가 모르는 자리라 여기서 같은 언어로 짓는다: 굵게 +
   `≈`(확정이 아니다). `--live` 토큰은 `live.css` 것을 그대로 읽는다(그 시트가 이 표보다
   먼저 실린다, `index.html`). */
.rank-table td.col-chg.is-live { font-weight: 700; }
.rank-table td.col-chg.is-live::before { content: "≈ "; font-size: 11px; }
/* 장중인데 그 종목만 오늘 체결이 없는 행 — 확정 값으로 되돌리지 않고 "—"(모름)를
   옅게 보여 준다(D-030: null 은 "변동 없음"이 아니다). 현재가 칸은 `is-missing` 이
   `live.css` 에 없어 여기서 짓는다. */
.rank-table td.price.is-missing { color: var(--ink-faint); }

/* 파수 막대 줄(D-032) — 버튼 없이 페이지 스크롤로 자동으로 다음 100행을 잇는다. */
.rank-more { margin-top: 10px; }
.rank-more-status { margin: 6px 0 0; color: var(--ink-faint); font-size: 12px; }
.rank-more-status:empty { display: none; }
.rank-more-sentinel { height: 1px; }