/* 순위검색 판(D-072)만의 것 — 식별줄·근접/거래대금 칩·등락률 색. 표 자체의 모양은
   `table.css`(`.screen-table` 재사용)와 `filterbar.css`(`.fbar` 재사용) 것을 그대로 쓴다.
   차트(`.chart`)는 `chart.css`/`chartui.css` 것을 그대로 쓴다(`js/detail/chart.js` 재사용).
   좁은 화면 규칙은 여기 없다 — `mobile-rank.css` 뿐이다(`mobile.css` 규약). */

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

/* 차트가 위에 붙박인다(데스크톱, D-075 화면 반) — 표를 마우스로 굴려도 차트는 그대로
   남는다. `--bg` 로 바탕을 깔아야 스크롤되는 표 위에 떠 있을 때 아래 글자가 안 비친다.
   필터 바가 D-084 부터 차트 **위**로 옮겨졌다 — `top:0` 은 화면 맨 위 기준이라 앞에 오는
   형제가 몇 개든 상관없다(필터는 페이지가 굴러가며 스스로 지나가고 차트만 붙박인다).
   좁은 화면(≤780)은 `mobile-rank.css` 가 이 규칙을 다시 푼다. */
.rank-chart { position: sticky; top: 0; background: var(--bg); z-index: 1; }

/* `.rank-table-wrap` 은 D-082 부터 **안쪽 스크롤이 없다** — 표 안쪽 스크롤바가 낯설다는
   요청으로 `max-height`+`overflow-y:auto` 를 걷어냈다. 표는 페이지에 그대로 흐르고, 키보드로
   선택 행을 옮기면 `rank/rankscroll.keepRowVisible` 가 낸 값으로 **페이지**(`window.scrollTo`)
   가 붙박이 차트만큼만 굴러 온다(`js/rank/ranktable.js`). 테두리·가로 스크롤은 `table.css`
   의 `.table-wrap` 것을 그대로 쓴다. */

/* 표 위 세션 상태줄("장중 · 07:13 ET 기준 · 60초마다 갱신" 등, D-075) — 개수 상태줄
   (`.rank-status`)과 같은 조용한 톤이다. */
.rank-live-status { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

/* 식별줄 — "AAPL · Apple Inc. · +3.42%". 차트 바로 위, 기간 버튼 위(`rank/rankchart.js`). */
.rank-ident {
  margin: 0 0 6px; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* 심볼·회사명 링크(2026-09-06, 상세 페이지로 이동) — `.gaps-list .sym-link`(표 밖 링크)와
   같은 토큰(`--accent`)이다. 표 안 `.sym-link` 는 `color:inherit` 이지만 그건 칸 안에서
   "모든 행이 링크"라 광고할 필요가 없어서고, 여기는 굵은 식별줄 안의 유일한 링크라
   눈에 띄어야 클릭 가능함이 전달된다. */
.rank-ident-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.rank-ident-link:hover, .rank-ident-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

.rank-status { margin: 8px 0; color: var(--muted); font-size: 13px; }

/* ── 모바일 이전/다음(2026-09-06) — 기본은 숨김, `mobile-rank.css`(≤780)가 켠다. 좁은 화면
   규칙만 `mobile-*.css` 에 두는 규약(`web/CLAUDE.md`)이라 `display` 값 자체는 여기 있다. */
.rank-nav { display: none; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.rank-nav-pos { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ── 선택 행(2026-09-05 사용자 신고 — DOM 선택은 됐지만 눈에 안 보였다) — KR 과 같은
   규칙(`screener_kr/web/rank.css`). 새 색 정의 없이 있는 토큰만: `--accent-weak` 는
   `styles.css` 의 옅은 강조 배경, `--accent` 는 그 진한 짝. */
.rank-table tbody tr.is-selected { background: var(--accent-weak); box-shadow: inset 3px 0 0 var(--accent); }
.rank-table tbody tr.is-selected:hover { background: var(--accent-weak); }

/* 표 자체(`tableEl.tabIndex = 0`, `ranktable.js`)가 포커스를 받는다 — 방향키가 먹는지
   눈으로 알 수 있게. offset 음수는 `financials.css` 의 같은 관례(테두리가 셀을 안 가린다). */
.rank-table:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 등락률 칸(`.col-chg`) 색. **표의 상승/하락(`--up`)과는 다른 변수다** — 저 값은 신고가
   돌파를 뜻하고(`styles.css`), 이건 오르내림 방향이다. 캔들과 같은 값(D-048)이지만
   `.col-chg` 는 `.chart` 의 자손이 아니라 그 변수를 상속받지 못해 **여기서 다시 이름을
   둔다**(`bars.css` 의 `--fb-up`/`--fb-down` 과 같은 판단). 값을 바꾸려면 그쪽도 같이:
       grep -rn "d62b2b\|1257c9" web/*.css */
:root {
  --rank-up: #d62b2b;
  --rank-down: #1257c9;
}
.rank-table td.col-chg.is-up { color: var(--rank-up); font-weight: 700; }
.rank-table td.col-chg.is-down { color: var(--rank-down); font-weight: 700; }
.rank-table td.col-chg.is-missing { color: var(--muted); }

/* 연장거래 보조 표기("(애프터마켓 $9.35)", D-075 화면 반, 2026-09-04 사용자 정정) — 본 값
   (정규장 시세)보다 **작고 옅게** — 괄호 값은 덤이지 본 값을 대신하지 않는다
   (`rank/rankpaint.js` 의 `paintPrice`/`paintChange`). 좁은 화면(≤600)은 `mobile-rank.css`
   가 줄을 바꾼다. */
.rank-table .live-ext { font-size: 12px; font-weight: 400; color: var(--muted); }

/* ── 신고가 근접 칩(`rank/ranknear.js`) ─────────────────────────────── */
.near-toggle-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.near-input { width: 100%; }
.near-value { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ── 최소 거래대금 칩(`rank/rankvolume.js`) — `buttons.css` 의 `.btn-toggle`(기간 버튼과 같은
   부품, D-076). 옛 `.volume-btn` 은 «같은 모양»이라 적혀 있었지만 실제로는 모서리·바탕이 달랐다. */

/* ── 기준일 칩(`rank/rankdate.js`, D-095) — 「오늘로」 버튼 모양은 `buttons.css` 의
   `.btn-action`(D-076) 그대로다, 여기는 간격·배치만. 좁은 화면 규칙은 없다 — 칩 안이라
   `.fchip-body`(`filterbar.css`)의 폭 제한을 그대로 물려받는다. */
.rank-date-input { font: inherit; }
.rank-date-tz { color: var(--muted); font-size: 12px; }
.rank-date-today { margin-left: 4px; }
.rank-date-note { margin-top: 6px; }

/* ── 더보기(D-072 명세 추가) — 버튼·그라데이션은 `buttons.css` 의 `.btn-more`·`.btn-more-wrap`
   (13F 「더보기」와 한 벌, D-076). 부품은 다르다 — 저쪽은 이미 그린 행을 펴는 것이고 여기는
   다음 100행을 실제로 받는다(`rank/rankmore.js`). 여기 남는 것은 이 판에만 있는 상태 문구다. */
.rank-more-status { color: var(--muted); font-size: 12px; }
.rank-more-status:empty { display: none; }

/* 파수막대 — 모바일 자동 로드의 트리거일 뿐 눈에 보일 이유가 없다(`IntersectionObserver`
   가 이 칸이 화면에 들어오는 순간을 본다, `rank/rankmore.js`). */
.rank-more-sentinel { height: 1px; }

/* ── 행 창 상태줄 "21–40 / 120"(D-093) — `<caption>` 은 기본으로 표 **위**에 뜬다,
   `caption-side` 로 아래로 옮긴다. 클릭 요소가 아니다(`rank/window.js` 의 순수 문자열을
   그대로 앉힌다) — 좁은 화면(≤780)은 창이 없어 빈 문자열, `:empty` 로 자리도 안 차지한다. */
.rank-window-status {
  caption-side: bottom; text-align: right;
  margin-top: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.rank-window-status:empty { display: none; }