/* 여러 개를 고르는 목록 — **업종**(조건 칩 속)과 **표시할 칸**(표 바로 위).
 *
 * `controls.css` 에서 갈라 나왔다(200줄 한도, 루트 `CLAUDE.md` — 압축이 아니라 분리로
 * 지킨다). 나눈 기준은 바뀌는 계기다: `controls.css` 는 컨트롤 하나의 생김새이고, 여기는
 * «여러 개를 켜고 끄는 목록» 하나의 규칙이다. 둘은 같은 칩 모양을 쓰지만 늘어나는 이유가
 * 다르다 — 업종은 상류가 늘면 늘고, 칸은 우리가 칸을 더하면 는다. */

/* ── 가로로 흐르는 목록 ───────────────────────────────────────────────── */
/* 이름 길이가 제각각이라 격자가 아니라 **줄바꿈 흐름**이다 — 격자로 두면 가장 긴 이름에
   칸 너비가 맞춰져 짧은 이름 옆이 텅 빈다.
   ⚠️ **여기에 `max-height` 를 주지 않는다.** 목록을 제 상자에 가두면 켠 것이 밖으로
   스크롤돼 사라진다 — 팝오버 전체의 높이는 `filterbar.css` 가 묶고, 고른 업종은 목록
   맨 위에 다시 적어 둔다(`js/sectors.js`). */
.sector-list, .col-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 8px 0;
}

.sector-item, .col-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
}
.sector-item:hover, .col-item:hover { border-color: var(--accent); }
/* 켠 것은 **테두리와 글자가 같이** 바뀐다 — 체크 표시 하나는 여러 줄 사이에서 안 띈다. */
.sector-item.on, .col-item.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.sector-item input, .col-item input { flex: none; margin: 0; cursor: pointer; accent-color: var(--accent); }
.col-item.locked { opacity: 0.55; cursor: not-allowed; }
.col-item.locked input { cursor: not-allowed; }
.sector-item .ct { color: var(--ink-faint); font-size: 11px; font-weight: 400; }

/* ── 표시할 칸 ────────────────────────────────────────────────────────── */
/* 표 바로 위에 접히는 상자로 산다. **기본이 펼침**인 이유는 `js/colpick.js` 머리말에. */
details.colpick {
  padding: 6px 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
details.colpick > summary {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
details.colpick .col-list { margin-bottom: 4px; }