# 댓글 선택 화면 검색(필터) — 설계

날짜: 2026-08-04 · 대상: `server/static/auto.js`, `server/static/index.html` (서버 변경 없음)

## 목적

댓글 선택 화면(자동 탭 ID 패널 + 유튜브 구간 탭 댓글 매칭)에서 수백~수천 장 카드 중
원하는 댓글을 텍스트로 찾을 수 있게 한다.

## 동작 (필터 방식)

- 각 패널 상단(선택 요약 바 아래, 카드 섹션 위)에 검색창 1개 + 지우기 ✕.
- 입력(디바운스 150ms) 시 그 패널의 **모든 카드 섹션**(컷별 ⭐추천 / ➕채우기)이
  자기 **전체 목록**에서 일치하는 카드만 다시 그린다 — "더보기"로 안 펼친 카드도
  일치하면 나온다. 일치가 많으면 기존처럼 30장 + 더보기.
- 일치 기준: 댓글 본문(HTML→평문) + 작성자 이름, 대소문자 무시.
  댓글마다 검색용 평문을 1회 만들어 캐시(`c._st`).
- 일치 0장 섹션은 헤더째 숨김. 검색어를 지우면 원래 화면 복원.
- 선택 로직 불변: 카드는 원래 컷 섹션 소속이므로 클릭하면 그 컷에 들어간다.
  선택 링·사용중 배지·"선택한 것만 보기"는 기존 그대로(검색과 AND).

## 캡처 누락 방지 (중요)

빌드/캡처는 `wrapOf()`로 DOM에서 카드를 찾고 **없으면 조용히 건너뛴다**
(`buildAll`, `window.ytCC.capture`). 검색 필터로 선택 카드가 DOM에서 빠진 채
빌드하면 카드가 누락되므로:

1. 섹션은 검색 전 렌더 수(`baseShown`)를 기억하고, 검색 해제 시 그만큼 복원한다.
   (선택은 렌더된 카드에서만 가능 → 복원하면 선택 카드가 항상 DOM에 있음)
2. `buildAll` 시작 시(각 ID)와 `ytCC.capture` 시작 시 해당 패널의 검색을
   강제 초기화(`clearSearch(hlId)`)한 뒤 캡처한다.

## 구현 구조

- `SECS = {hlId: [setFilter,…]}` — 패널별 섹션 필터 레지스트리.
  `searchBar(hlId)`가 패널 생성 때 배열을 초기화하고, `cardSection()`이 자기
  `setFilter(q)`를 등록한다(재렌더: grid 비우고 필터된 목록으로 다시 페이징).
- `cardSection` 소폭 리팩터: `more.remove()` → `display:none` 토글
  (필터 해제 후 다시 필요할 수 있으므로).
- CSS: `.ccsearch` 몇 줄 (index.html).