/* **조건 칩 바** — 조건을 한 줄로 접고 표를 화면의 주인공으로 만든다.
 *
 * screener_us 의 `filterbar.css` 와 같은 모양이다(그쪽 D-033). 두 화면은 **다른 오리진의
 * iframe** 이라 스타일시트를 공유할 수 없어서 나란히 둔 것이고, 값은 KR 팔레트 토큰
 * (`--line`·`--panel`·`--accent` …)으로 적었다 — 그래야 다크 모드가 저절로 따라온다.
 *
 * 여기서 정하는 것은 **껍데기뿐**이다. 안에 든 컨트롤의 CSS 는 각자 파일 그대로다
 * (`controls.css`·`scales.css`·`pickers.css`).
 *
 * ## 겹쳐 뜨는 것은 CSS 만의 일이다
 *
 * 마크업은 `<details>` 그대로다(키보드·스크린리더를 브라우저가 준다). `position: absolute`
 * 로 띄우기만 하므로 스크립트가 막힌 환경에서도 **아래로 펼쳐지며 그대로 동작한다**. */

.fbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 칩이 겹쳐 뜰 기준면. 바깥 요소를 기준으로 삼으면 스크롤할 때 팝오버가 따로 논다. */
  position: relative;
  margin: 0 0 10px;
}

/* **기준면을 갖지 않는다**(`position` 없음). 팝오버는 칩이 아니라 위 `.fbar` 에 붙는다 —
   이유는 `.fchip-body` 주석에. */
.fchip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}

/* 조건이 걸린 칩만 도드라진다 — 여섯이 같은 모양이면 무엇이 걸렸는지 훑어서 못 읽는다.
   색만으로 구별하지 않는다: 글씨도 굵어진다(`.is-on .fchip-val`). */
.fchip.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.fchip-head {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12.5px;
  /* 기본 삼각형을 지우고 아래 `::after` 로 방향만 남긴다(열림 상태를 눈으로도 준다). */
  list-style: none;
  white-space: nowrap;
}
.fchip-head::-webkit-details-marker { display: none; }
.fchip-head::after { content: '▾'; color: var(--ink-faint); font-size: 11px; }
.fchip[open] .fchip-head::after { content: '▴'; }
.fchip-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fchip-name { color: var(--ink-soft); }
.fchip-val { color: var(--ink); }
.fchip.is-on .fchip-val { font-weight: 700; color: var(--accent); }

/* 펼친 내용. **바(`.fbar`) 아래 한 자리에 바 폭 그대로** 뜬다 — 어느 칩을 눌러도 같다.
   `min-width`·`max-width`·`right` 보정이 하나도 없는 것이 이 규칙의 요점이다: 칩 바는
   `flex-wrap` 이라 좁은 화면에서 칩이 둘째 줄로 밀리는데, 칩에 붙여 두면 그때 팝오버가
   어디 설지 아무도 계산할 수 없다. 폭을 바에 맞추면 **자리를 계산할 일 자체가 없어진다.**
   어느 칩이 열렸는지는 `▴` 와 `is-on` 이 말하고, 한 번에 하나만 열린다(`js/filterbar.js`).

   ⚠️ **높이를 묶는다.** 이 화면은 iframe 안이라 팝오버가 프레임보다 길면 아래가 잘리고,
   잘린 화면은 우리 로그에 200 으로만 남는다. 업종 51개가 그 경우다 — 목록 자체는 접지
   않고(고른 것이 스크롤로 사라지면 안 된다, `js/sectors.js`) 고른 업종을 **맨 위에 한 줄로**
   다시 적어 스크롤해도 보이게 한다. */
.fchip-body {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(64vh, 460px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}

.fchip-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
/* 팝오버 안의 **두 번째 제목부터**는 위와 사이를 벌린다. 붙어 있으면 앞 컨트롤의 설명
   줄과 다음 제목이 한 덩이로 읽혀, 무엇이 무엇의 제목인지 알 수 없다. */
.fchip-body > * + .fchip-title { margin-top: 12px; }
.fchip-title .hint { color: var(--ink-faint); font-size: 11.5px; font-weight: 400; }

/* 팝오버 맨 아래의 되돌리는 줄(«모두 해제» 따위). 목록과 붙어 있으면 항목으로 읽힌다. */
.fchip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}