/* ===========================================================================
   encyclopedia.css — 백과사전 인덱스 전용 신규 클래스.
   style.css(Plumbline) 토큰을 재사용하고, 인덱스에만 필요한 필터 UI/상태만 추가한다.
   쿨/뉴트럴·코발트(#2F6BFF)만 사용(웜톤 금지). AA 대비. 기존 컴포넌트 재정의 없음.
   reduced-motion 전역 처리는 style.css가 이미 담당.
   ========================================================================= */

/* ---- 히어로(백과사전 프레이밍) ---------------------------------------------- */
.enc-hero{ padding:var(--s8) 0 var(--s6) }
.enc-hero-kicker{
  font-family:var(--mono); font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 var(--s3);
}
.enc-hero h1{
  font-family:var(--display); font-size:var(--t-hero); line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); margin:0 0 var(--s4); max-width:18ch;
}
.enc-hero-lede{
  font-size:var(--t-lede); line-height:1.6; color:var(--slate);
  margin:0; max-width:var(--maxw-detail);
}

/* ---- 스티키 필터바(헤더 56px 아래) ------------------------------------------ */
.filter-bar{
  position:sticky; top:56px; z-index:20;
  display:flex; flex-direction:column; gap:var(--s3);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:var(--s4) 0;
  margin-bottom:var(--s5);
}
.search-input{
  width:100%; box-sizing:border-box;
  font-family:var(--sans); font-size:var(--t-body); color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-chip);
  padding:10px 14px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.search-input::placeholder{ color:var(--faint) }
.search-input:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-tint);
}

.filter-chips{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  overflow-x:auto; scrollbar-width:thin;
}
.filter-chip{
  flex:0 0 auto;
  font-family:var(--sans); font-size:var(--t-meta); font-weight:500;
  color:var(--mute);
  background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 12px; cursor:pointer; white-space:nowrap;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.filter-chip:hover{ border-color:var(--line-strong); color:var(--ink) }
.filter-chip:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.filter-chip.is-on{
  border-color:var(--accent); background:var(--accent-tint); color:var(--ink);
}
.filter-chip .c{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  font-variant-numeric:tabular-nums; margin-left:2px;
}
.filter-chip.is-on .c{ color:var(--accent) }

.result-count{
  font-family:var(--mono); font-size:var(--t-meta); color:var(--mute);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* ---- 그룹 카운트(계약은 .group-count; style.css는 .group-num만 가짐) ---------- */
.group-count{
  margin-left:auto;
  font-family:var(--mono); font-size:var(--t-meta); font-weight:500;
  color:var(--mute); font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* ---- 필터 상태 ------------------------------------------------------------- */
.row.is-hidden{ display:none }
.group.is-empty{ display:none }

.no-results{
  display:none;
  text-align:center; color:var(--slate);
  font-size:var(--t-body); padding:var(--s9) var(--gutter);
}
.no-results.is-on{ display:block }

/* ---- 반응형 --------------------------------------------------------------- */
@media (max-width:560px){
  .filter-chip{ padding:5px 10px }
  .enc-hero{ padding:var(--s7) 0 var(--s5) }
}