/* ============================================================
   comp-chips.css (Lego Block)
   검색창 + 칩 필터 컴포넌트 — /dictionary/(주제별 브라우징)와
   /pronunciation/(규칙·주제별 연습 선택)이 공용으로 쓴다. 2026-08-14
   dictionary/style.css에서 뽑아냄 — 새 카테고리 그룹이 생겨도
   시각 스타일은 한 곳에서만 고치면 되게.
   ============================================================ */
.nuance-search {
  width: 100%; font-family: var(--sans); font-size: 16px;
  padding: 13px 18px; border-radius: 12px; border: 1.5px solid var(--hairline);
  background: var(--paper-deep); color: var(--ink); margin-bottom: 14px;
}
.nuance-search:focus { outline: none; border-color: var(--red); }
.parent-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.parent-chips .nuance-chip { padding: 9px 18px; font-size: 14px; background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.parent-chips .nuance-chip.is-active { background: var(--gradient-primary); border-color: transparent; font-weight: 700; }
.nuance-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 4px; border-left: 2px solid var(--hairline); margin-bottom: 8px; }
.nuance-chips[hidden] { display: none !important; }
.nuance-chip {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--hairline);
  background: var(--paper-deep); color: var(--ink-soft); cursor: pointer; user-select: none;
  transition: all .12s ease;
}
.nuance-chip:hover { border-color: var(--red); color: var(--red); }
.nuance-chip.is-active {
  background: var(--gradient-primary); border-color: transparent; color: #fff;
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
}
.nuance-count {
  font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 12px;
}