/* ==========================================================
   components/control.css — 선택 컨트롤
   .seg(세그먼트) · .chips/.chip(연령·주제 탭) · .fbar(보기 기준 한 묶음)
   · .tag(작은 라벨) · .select(드롭다운) · .field(입력창)
   선택 상태는 aria-pressed="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[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 800; box-shadow: var(--shadow-1); }
.seg button[aria-pressed="true"] .ico { color: var(--brand); }

/* ---------- 칩 ---------- */
.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 small { font-size: 11.5px; font-weight: 600; color: var(--ink-4); }
.chip[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 700; box-shadow: none; }
.chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .62); }
.chip-sm { height: 32px; padding: 0 12px; font-size: 13px; }
a.chip.is-on { background: var(--navy); color: #fff; font-weight: 700; box-shadow: none; }

/* ---------- 보기 기준 (전체/또래별/주제별 + 칩) ---------- */
.fbar { display: grid; gap: 10px; min-width: 0; }
.fbar-mode { justify-self: start; }
.fbar-chips { animation: fade-up .25s var(--ease) both; }
.fbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- 태그 ---------- */
.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-mute { background: var(--surface-2); color: var(--ink-3); }
.tag-paper { background: var(--paper-2); color: #7A5B22; }

/* ---------- 드롭다운 ---------- */
.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:last-child { position: absolute; right: 11px; width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; }
.select > .pre { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--brand); pointer-events: none; }
.select > .pre ~ select { padding-left: 34px; }

/* ---------- 입력창 ---------- */
.field {
  display: flex; align-items: center; gap: 10px; min-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, .field textarea {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none;
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.field textarea { min-height: 150px; padding: 14px 0; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); font-weight: 500; }