/* ==========================================================
   components/control.css — 선택 컨트롤
   .seg(세그먼트: 학교급 전환) · .chips/.chip(정렬 탭·빠른 선택)
   · .tag(작은 라벨) · .select(드롭다운)
   선택 상태는 aria-pressed="true" 또는 aria-selected="true" 로 표시한다.
   ========================================================== */

/* ---------- 세그먼트 ---------- */
.seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 13px; background: var(--surface-2); }
.seg button {
  flex: 1 0 auto; height: 34px; padding: 0 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] {
  background: #fff; color: var(--ink); font-weight: 800; box-shadow: var(--shadow-1);
}

/* ---------- 칩 ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 38px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: all .15s;
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--line-hover); color: var(--ink); }
.chip .ico { width: 16px; height: 16px; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--navy); color: #fff; font-weight: 700; box-shadow: none; }

/* ---------- 태그 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.tag .ico { width: 13px; height: 13px; }
.tag-brand { background: var(--brand-soft); color: var(--brand-deep); }
.tag-navy { background: var(--navy-soft); color: var(--navy-2); }
.tag-blue { background: var(--blue-soft); color: var(--blue-deep); }
.tag-ok { background: var(--ok-soft); color: var(--ok-deep); }
.tag-warn { background: var(--warn-soft); color: var(--warn-deep); }
.tag-mute { background: var(--surface-2); color: var(--ink-3); }
.tag-spc { background: var(--spc-soft); color: var(--spc); }

/* ---------- 드롭다운 ---------- */
.select {
  position: relative; display: inline-flex; align-items: center; height: 42px; min-width: 0;
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s;
}
.select:hover { box-shadow: inset 0 0 0 1.5px var(--line-hover); }
.select:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand-line), var(--focus-ring); }
.select select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 36px 0 14px;
  border: 0; border-radius: 12px; background: none; outline: none; cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.select > .ico { position: absolute; right: 11px; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.select .pre { flex: none; padding-left: 12px; color: var(--ink-4); }
.select .pre + select { padding-left: 6px; }