/* **눈금 슬라이더(스케일바)** — 시가총액 두 손잡이 · RS 한 손잡이.
 *
 * screener_us 의 `.cap-slider`·`.rs-slider` 와 같은 모양이고, 여기서는 둘이 **같은 뼈대**
 * (`.scale*`)를 쓴다 — 한쪽만 고쳐 두 스케일바가 다르게 생기는 일을 없애려고 그렇게 했다.
 *
 * ⚠️ **JS 는 색을 만지지 않는다.** 스크립트가 style 속성에 쓰는 것은 채움 **기하**
 * (`--lo`/`--hi`) 하나뿐이고, 색은 전부 `styles.css` 의 토큰에서 온다(다크 모드가 저절로
 * 따라오는 이유가 그것이다).
 *
 * 셀렉트 상자 두 개였다 `❌ 바꿈 (2026-08-20)`. 상자는 «0 ~ 최대» 중 어디쯤인지를 못
 * 보여 준다 — 목록을 열어야 눈금이 몇 칸인지 알 수 있고, 지금 고른 구간이 전체의 얼마인지는
 * 끝까지 안 보인다. 눈금을 깔아 두면 그 둘이 한눈에 읽힌다. */

/* 시가총액 «읽기 줄»(D-034) — 손잡이가 움직이는 동안(`input`)에도 지금 고른 금액을 늘
   보여 준다. 640px 아래에서 `.scale-ticks` 가운데 눈금이 지워지는 자리를 메운다
   (`mobile-screen.css`) — 하지만 그 미디어쿼리 없이 **모든 폭에서** 보인다(D-023 규약대로
   기능 CSS 에는 `@media` 를 두지 않는다). 숫자 줄이라 `tabular-nums` 로 자릿수가 안 흔들리게 한다. */
.scale-readout {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── 뼈대 ─────────────────────────────────────────────────────────────── */
.scale { position: relative; height: 30px; }

.scale-track {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--line);
}
.scale-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lo, 0%);
  right: calc(100% - var(--hi, 100%));
  border-radius: 999px;
  background: var(--accent);
}

/* 눈금 글자. 고른 양 끝은 강조색, 그 사이는 본문색, 밖은 흐린 색 — 색만으로 구간을
   말하지 않는다(끝 두 칸은 굵기도 다르다). */
.scale-ticks {
  display: flex;
  margin: 1px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-faint);
  font-size: 10.5px;
}
.scale-ticks li { flex: 1 1 0; text-align: center; }
.scale-ticks li:first-child { text-align: left; }
.scale-ticks li:last-child { text-align: right; }
.scale-ticks li.is-inside { color: var(--ink-soft); }
.scale-ticks li.is-edge { color: var(--accent); font-weight: 700; }

/* ── 손잡이 ───────────────────────────────────────────────────────────── */
/* 시가총액은 입력 **두 개를 겹쳐** 놓는다. 트랙 전체가 위쪽 입력에 가려 아래쪽 손잡이를
   못 잡는 것이 이 패턴의 유일한 함정이라, 트랙은 클릭을 통과시키고 **손잡이만** 받는다. */
.scale-input {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.scale-lo { z-index: 3; }
.scale-hi { z-index: 2; }
/* 상한이 오른쪽 끝에 붙으면 위에 깔린 하한 입력이 그것을 덮어 못 잡는다 → 층을 바꾼다. */
.scale.hi-front .scale-hi { z-index: 4; }

.scale-input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.scale-input::-moz-range-track { height: 100%; background: transparent; }
.scale-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  pointer-events: auto;
  cursor: pointer;
}
.scale-input::-moz-range-thumb {
  width: 17px; height: 17px;
  border: 0; border-radius: 50%;
  background: var(--accent);
  pointer-events: auto;
  cursor: pointer;
}
.scale-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── RS 한 손잡이 ─────────────────────────────────────────────────────── */
/* 브라우저 기본 손잡이에 `accent-color` 만 준다 — 위의 2핸들과 달리 겹칠 것이 없어서
   직접 그릴 이유가 없다. 색은 같은 토큰이라 두 스케일바가 같은 파랑이다. */
.rs-row { display: flex; align-items: center; gap: 10px; }
.rs-slider { flex: 1 1 auto; min-width: 120px; accent-color: var(--accent); }
.rs-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rs-readout { min-width: 82px; font-weight: 700; white-space: nowrap; text-align: right; }
.rs-scale.is-off .rs-row { opacity: 0.5; }
.rs-scale.is-off .rs-readout { color: var(--ink-faint); font-weight: 400; }
.rs-note { margin: 5px 0 0; color: var(--ink-faint); font-size: 11.5px; }