/* ==========================================================
   components/control.css — 선택 컨트롤
   .seg(세그먼트: 비싼 순/저렴한 순, 지난주/지난달) · .chips/.chip(항목·카테고리 탭)
   · .tag(작은 라벨) · .select(드롭다운) · .field(입력창) · .range(슬라이더)
   선택 상태는 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;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg button .ico { width: 15px; height: 15px; }
.seg button:hover { color: var(--ink); }
.seg button:disabled { color: var(--ink-4); cursor: not-allowed; opacity: .65; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] {
  background: #fff; color: var(--ink); font-weight: 800; box-shadow: var(--shadow-1);
}
/* 순서 세그먼트: 선택된 쪽 방향 색을 아이콘에만 입힌다 */
.seg-order button[data-order="exp"][aria-pressed="true"] .ico { color: var(--exp); }
.seg-order button[data-order="aff"][aria-pressed="true"] .ico { color: var(--aff); }

/* ---------- 칩 ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap-chips { flex-wrap: wrap; overflow: visible; }
.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 #D5DAE3; color: var(--ink); }
.chip .ico { width: 16px; height: 16px; }
.chip .cdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--navy); color: #fff; font-weight: 700; box-shadow: none; }
.chip-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---------- 태그 ---------- */
.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-ok { background: var(--ok-soft); color: var(--ok-deep); }
.tag-warn { background: var(--warn-soft); color: var(--warn-deep); }
.tag-info { background: var(--info-soft); color: var(--info-deep); }
.tag-mute { background: var(--surface-2); color: var(--ink-3); }
.tag-sale { background: #FFF0F6; color: #B8286A; }

/* ---------- 드롭다운 ---------- */
.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 #D5DAE3; }
.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; }

/* ---------- 지역 고르기 버튼 (선택된 지역 + 바꾸기) ---------- */
.pick {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 12px; min-width: 0;
  border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 14.5px; font-weight: 800; color: var(--ink); transition: box-shadow .15s;
}
.pick:hover { box-shadow: inset 0 0 0 1.5px #D5DAE3; }
.pick .ico { width: 17px; height: 17px; color: var(--ink-4); }
.pick .ico:first-child { color: var(--brand); }

/* ---------- 입력창 ---------- */
.field {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
  border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s;
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--brand), var(--focus-ring); }
.field .ico { color: var(--ink-4); }
.field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.field input::placeholder { color: var(--ink-4); font-weight: 500; }
.field input::-webkit-search-cancel-button { display: none; }
.field .clear { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.field .clear .ico { width: 15px; height: 15px; color: inherit; }

/* ---------- 슬라이더 (맞춤 계산) ---------- */
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; cursor: pointer;
  --fill: 50%; --c: var(--brand);
}
.range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--c) 0 var(--fill), var(--line-2) var(--fill) 100%);
}
.range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line-2); }
.range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--c); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c); box-shadow: 0 2px 8px rgba(29, 36, 51, .18);
}
.range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--c); box-shadow: 0 2px 8px rgba(29, 36, 51, .18);
}
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(14, 162, 113, .2); }