/* 조건 UI — 칩 · 입력칸 · 성장률 격자. */

.controls { display: flex; flex-direction: column; gap: 8px; }

.bar {
  display: flex;
  flex-wrap: wrap;
  /* 그룹마다 높이가 다르다(업종은 목록이라 다섯 줄). `stretch` 기본값이면 옆 그룹이
     따라 늘어나 빈 상자가 된다 — 위로 맞춘다. */
  align-items: flex-start;
  gap: 8px;
}

fieldset.group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
fieldset.group.grow { flex: 1 1 240px; }

/* 끈 조건은 **사라지지 않고 흐려진다** — 사라지면 방문자가 그 조건의 존재를 잊는다. */
fieldset.group.off { opacity: 0.5; }

legend {
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
}

.chips { display: flex; flex-wrap: wrap; gap: 4px; }

.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; }

.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); }

.hint-inline { color: var(--ink-faint); font-size: 11px; }

.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;
}

/* ── 표에 보일 성장률 기준 ────────────────────────────────────────────── */
.modebar { display: flex; align-items: center; gap: 8px; }
.modebar .label { color: var(--ink-soft); font-size: 12px; }

/* ── 성장률 조건 격자 ─────────────────────────────────────────────────── */
details.growth {
  padding: 6px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
details.growth summary {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
details.growth .hint {
  margin: 6px 0 8px;
  color: var(--ink-faint);
  font-size: 11.5px;
}

table.growth-grid { border-collapse: collapse; font-size: 12px; }
table.growth-grid th {
  padding: 3px 8px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
table.growth-grid th.metric { text-align: right; }
table.growth-grid td {
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
}
/* 켠 칸을 눈에 띄게 둔다 — 열여섯 칸 중 어디에 조건이 걸렸는지 한눈에 보여야 한다. */
table.growth-grid td.on { border-color: var(--accent); background: var(--accent-soft); }

table.growth-grid input { width: 62px; text-align: right; }
table.growth-grid .g-min { margin-right: 2px; }

@media (max-width: 640px) {
  .searchbox { flex: 1 1 100%; }
  fieldset.group { flex: 1 1 100%; }
}