/* 조건 컨트롤 배치 · 최소 RS · 섹터 선택 · 표의 RS 셀 색.
   `styles.css` 에서 갈라 나왔고, 돌파·저점 컨트롤은 다시 `breakout.css` 로 갈라 나갔다 —
   나눈 기준은 200줄이 아니라 **바뀌는 계기**다: 여기는 "시총·RS·섹터 컨트롤이 바뀔 때",
   styles.css 는 "표·상태 표시가 바뀔 때" 손댄다.
   색은 전부 변수로만 있고 JS 는 클래스만 토글한다(색을 JS 가 만지지 않는다). */

:root {
  /* RS 히트 5구간(0-19/20-39/40-59/60-79/80-99). quant `_diverge` 의 파랑→회백→빨강을
     구간 중앙값에서 뽑은 것이다 — 두 화면에서 "빨강=강"이 같은 뜻이어야 한다. */
  --rs-t0: #5e97f4;
  --rs-t1: #a5c1ef;
  --rs-t2: #ebebeb;
  --rs-t3: #eda8a8;
  --rs-t4: #ee6565;
  --rs-strong: #b3261e;   /* 섹터 RS 가 기준(기본 70) 이상일 때 */
  /* 고른 항목의 바탕. 섹터 칩과 돌파 라디오가 **같은 색으로 골라진 티**를 내야 해서
     여기(먼저 읽히는 파일)에 둔다 — `breakout.css` 도 이 변수를 쓴다. */
  --pick-bg: #eef4ff;
}

/* ── 조건 컨트롤 배치 ─────────────────────────────────────────────── */
.controls {
  display: grid; gap: 14px 20px; grid-template-columns: repeat(2, minmax(240px, 1fr));
}
.filter-wide { grid-column: 1 / -1; }
.controls-title .hint { font-weight: 400; color: var(--muted); font-size: 12px; }

/* ── 최소 RS ──────────────────────────────────────────────────────── */
.rs-toggle-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.rs-toggle { accent-color: var(--accent); }
.rs-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.rs-slider { flex: 1 1 auto; min-width: 120px; accent-color: var(--accent); }
.rs-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rs-readout { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-min.is-off .rs-row { opacity: .55; }
.rs-min.is-off .rs-readout { color: var(--muted); }
.rs-note { margin-top: 4px; }

/* ── 섹터 선택 ────────────────────────────────────────────────────── */
/* **격자가 아니라 흐름이다.** 칸을 고정 폭으로 나누면 `Communication Services` 같은 긴 이름이
   칸 안에서 잘리고 `1 종 / 목` 이 줄바꿈된다. 항목은 제 내용만큼만 넓고, 자리가 모자라면
   다음 줄로 넘어간다 — 한 항목 **안에서는** 아무것도 접히지 않는다. */
.sec-list {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  list-style: none; margin: 0; padding: 0;
}
.sec-item { max-width: 100%; }
.sec-label {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.sec-label:hover { background: var(--row-hover); }
.sec-check { accent-color: var(--accent); }
.sec-check:checked ~ .sec-name { font-weight: 700; color: var(--accent); }
.sec-label:has(.sec-check:checked) { background: var(--pick-bg); border-color: var(--accent); }
.sec-label:has(.sec-check:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 이름을 자르지 않는다 — 자르면 `Communication Servi…` 가 되어 무슨 섹터인지 못 읽는다. */
.sec-name { white-space: nowrap; }
.sec-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sec-rs {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.sec-rs.is-strong { color: var(--rs-strong); }
/* 결측은 회색 작은 글씨. 낮은 RS 와 **같은 모양이면 안 된다.** */
.sec-rs.is-missing { color: var(--muted); font-weight: 400; font-size: 11px; }
/* 다른 조건 때문에 0 종목이 된 섹터. 선택돼 있으면 지우지 않고 이렇게 남긴다. */
.sec-item.is-none .sec-label { opacity: .6; }

.sec-summary { margin-top: 6px; }
/* 일괄 버튼 두 개는 **항상 보인다**. 누를 수 없을 때 숨기면 "전체 해제"가 있다는 것을
   모르고, 눌러도 아무 일이 없으면 고장으로 읽힌다 — 그래서 숨기지 않고 끈다(:disabled). */
.sec-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.sec-bulk-btn {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 12px; cursor: pointer;
}
.sec-bulk-btn:hover:enabled { background: var(--row-hover); }
.sec-bulk-btn:disabled { opacity: .5; cursor: default; }
.sec-bulk-hint { color: var(--muted); font-size: 11px; }

/* ── 요약 줄의 조건 표기 ──────────────────────────────────────────── */
.conditions { margin-left: 8px; color: var(--muted); font-size: 12px; }

/* ── 표의 RS 칸 ───────────────────────────────────────────────────── */
/* 값이 있을 때만 색이 붙는다. 결측은 색 없는 회색 글씨라 "약함"으로 안 읽힌다. */
.screen-table td.col-rs { font-weight: 700; }
.screen-table td.rs-tier { color: #111; }
.screen-table td.rs-t0 { background: var(--rs-t0); }
.screen-table td.rs-t1 { background: var(--rs-t1); }
.screen-table td.rs-t2 { background: var(--rs-t2); }
.screen-table td.rs-t3 { background: var(--rs-t3); }
.screen-table td.rs-t4 { background: var(--rs-t4); }
.screen-table td.col-rs.is-missing {
  color: var(--muted); font-weight: 400; font-size: 12px; text-align: right;
}
/* 색칠한 칸은 행 hover 로 배경이 바뀌면 안 된다(색이 값이다). */
.screen-table tbody tr:hover td.rs-tier { filter: brightness(1.03); }

/* 섹터 목록은 좁은 화면에서 따로 손댈 것이 없다 — 흐름 배치라 스스로 줄을 바꾼다. */
@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr; }
}

/* 제목 줄에 얹는 컨트롤(예: RS 필터 토글). 제목 아래 한 줄을 쓰지 않아 표가 더 보인다. */
.controls-title .title-slot { margin-left: 8px; font-weight: 400; }