/* 조건 컨트롤의 **속** — 칩 버튼 · 입력칸 · 성장률 격자 · 표 위 도구줄.
 *
 * 칩 바의 껍데기는 `filterbar.css`, 눈금 슬라이더는 `scales.css` 다. 나눈 기준은 200줄이
 * 아니라 **바뀌는 계기**다: 여기는 "컨트롤 하나의 생김새"가, 저기는 "조건을 어떻게 접는가"가
 * 바뀔 때 손댄다.
 *
 * ⚠️ `stock.html` 도 이 파일을 부른다(기간 버튼이 같은 `.chip` 을 쓴다) — 표 화면 전용
 *    규칙을 여기 넣지 않는다. */

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* 조건이 서로 지워 무의미해진 줄. **사라지지 않고 흐려진다** — 사라지면 방문자가 그
   조건의 존재를 잊고, 자기가 건 조건이 무시된 줄도 모른다. */
.chips.off { opacity: 0.5; }

.chip {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
/* ⚠️ **`:not(.on)` 을 빼지 마라.** `.chip:hover:not(:disabled)` 는 명시도가 (0,3,0) 이라
   `.chip.on` (0,2,0) 을 이긴다 — 그래서 이 줄이 없으면 **켠 칩에 마우스를 올리는 순간
   글자색이 배경색(둘 다 `--accent`)과 같아져 글자가 사라진다.** 커서를 치우면 돌아오므로
   스크린샷에서나 겨우 잡히고, 쓰는 사람은 "왜 가끔 빈 동그라미가 보이지" 하고 만다
   `✅ 겪음 (2026-08-12, 헤드리스 스크린샷)`. */
.chip:hover:not(:disabled):not(.on) { border-color: var(--accent); color: var(--accent); }
.chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
/* 켠 칩에도 «눌린다»는 신호는 있어야 한다 — 색을 바꾸는 대신 밝기만 건드린다. */
.chip.on:hover:not(:disabled) { filter: brightness(1.1); }
.chip:disabled { cursor: not-allowed; opacity: 0.6; }
.chip.clear { border-style: dashed; }

label.inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}

label.toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
label.toggle input { accent-color: var(--accent); }

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

/* 한 줄에 나란히 서는 입력칸들. 좁아지면 아래로 흐른다. */
.rowline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 0; }

.num-input { width: 68px; }

input[type="number"], select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.tilde { color: var(--ink-faint); }

/* ⚠️ **`display` 를 주지 않는다.** 상세의 기간 줄이 같은 클래스를 flex 항목으로 쓴다
   (`js/detail/tools.js`) — `block` 을 박으면 그 줄이 통째로 접힌다. 조건 팝오버에서는
   `<p>` 로 쓰므로 이미 블록이고, 여기서는 그 여백만 줄인다. */
.hint-inline { color: var(--ink-faint); font-size: 11.5px; }
.hint-inline b { color: var(--ink-soft); }
p.hint-inline { margin: 5px 0 0; }

/* 고른 것 되짚기(업종). 목록이 스크롤돼도 **위에 남아** 지금 무엇이 켜져 있는지 말한다. */
.picked {
  margin: 0 0 6px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink-soft);
  font-size: 11.5px;
}
.picked b { color: var(--accent); }

.badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

/* ── 표 위 도구줄 ─────────────────────────────────────────────────────── */
/* «표에 보일 성장률»과 «표시할 칸». **조건이 아니다** — 서버에 다시 묻지 않고 표의 종목도
   그대로다. 그래서 조건 칩 바가 아니라 표 바로 위에 산다. */
.tabletools { margin: 0 0 8px; }
.modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.modebar .label { color: var(--ink-soft); font-size: 12px; }
/* 초기화는 오른쪽 끝으로 민다 — 기준 칩 옆에 붙으면 «기준 하나»로 읽힌다. */
.modebar .clear { margin-left: auto; }

/* 조건이 **무엇을 빼고 있는지** 말하는 줄. 힌트(`--ink-faint`)와 다른 색이어야 한다 —
   같은 회색으로 두면 설명문에 섞여 아무도 안 읽고, 그 조건은 계속 조용히 종목을 지운다.
   경보는 아니다: 조건은 제대로 걸렸고 다만 대상이 줄었을 뿐이다(`js/growth.js` L17). */
.warn-inline {
  margin: 8px 0 0;
  padding: 6px 9px;
  border-left: 3px solid var(--warn);
  border-radius: 0 5px 5px 0;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 11.5px;
}
.warn-inline b { color: var(--ink); }