feat(frontend): 검색에 조건 · 강조 · 준비 중 안내를 더한다 (14단계 화면 1차)

- [조건] 패널(보낸 사람 · 받는 사람 · 제목 · 내용 · 기간 · 첨부)과 결과 머리의 조건 줄 —
  조건도 화면 주소에 싣는다(since · until 은 브라우저 시간대 날짜 · 양 끝 포함)
- 결과 줄 세 줄(분할 보기)과 맞은 말 노랑 강조 — HighlightedText 가 글 조각으로 그린다(v-html 없음),
  읽기 화면은 서버가 넣은 <mark> · 제목 · 첨부 이름 강조. 강조가 든 응답은 보이기만 한다
  (답장 · 전달 · 인쇄 · 예약은 강조 없이 받는다)
- "검색 준비 중" 줄 · 한 글자 안내 · 빈 쪽이면 이어 찾기(한 번에 5번까지) + [더 찾기],
  total 이 null 이면 통 수를 숨긴다
- search-match.ts — backend search-query · search-text · subject-base 와 짝(같은 표본 표)

리뷰 반영: 이어 받는 동안 [다음] · [메일 더 보기] 기다림, 새로 고치는 동안 이어 받지 않음,
손으로 고친 주소도 패널과 같은 검사(8낱말 · 날짜 범위 · 거꾸로 된 기간), 패널 컴포넌트 나눔,
시험 정리(unmount · 보이지 않는 글자 이스케이프).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/styles/tokens.css

@@ -87,6 +87,9 @@
   --color-warning-border: #f0d9a8; /* 노란 줄 안의 흰 단추 테두리 — 읽기 화면 [이미지 보기] (디자인 원본 MailReadTools) */
   --color-success-text: #067647; /* 서명 "저장했습니다" (디자인 원본 Settings) */
   --color-status-live: #12b76a; /* 실시간 연결 "연결되어 있습니다" 점 (디자인 원본 SettingsNotify) */
+  /* 검색에서 맞은 말 — 글자색은 그대로 (14단계 디자인 원본 Search14). 짝: shared/utils/mail-html.ts 의 본문 틀 mark 색 —
+     본문 틀(iframe)은 이 변수를 읽지 못해 같은 값을 적어 둔다, 한쪽을 고치면 둘 다 */
+  --color-search-mark: #fce7a4;
   --color-star: #b7791f;
 
   /* ── 간격 (이름의 숫자 = px) ─────────────── */
@@ -139,7 +142,8 @@
   /*
    * 밀도를 위한 작은 조작 영역 — 클릭 영역 44px 기준의 의도된 예외 (디자인 README "디자인 원칙", 사용자 확정).
    * 목록 표의 별 버튼(폭 32px · 행 높이를 채움), "분할 | 목록" 전환(바깥 36px),
-   * 설정 화면의 전환 단추 · 서명 그림의 크기 줄(작게 · 보통 · 원본 · 그림 빼기 — 36px, 캔버스 확정값)에만 쓴다.
+   * 설정 화면의 전환 단추 · 서명 그림의 크기 줄(작게 · 보통 · 원본 · 그림 빼기 — 36px, 캔버스 확정값),
+   * 14단계 검색 칸 안의 [조건](32px — 아래 14단계 주석)에만 쓴다.
    */
   --size-compact-control: 2rem; /* 32px */
   --size-segment-item: 1.875rem; /* 30px — 전환 버튼 한 칸 높이 (테두리·안쪽 여백 포함 36px) */
@@ -181,6 +185,12 @@
    *   연락처 창의 이메일 · 전화번호 줄(종류 · 값) · [이메일 · 전화번호 더하기] · 회사 · 부서 · 직책 칸 높이 40(--size-filter-control) · 줄 ✕ 36×40(--size-filter-remove) ·
    *   구성원 넣기 창의 「내 연락처 | 사내 직원」 36(--size-segment-item-lg — .segmented) · 찾기 칸 40(--size-filter-control)
    */
+  /*
+   * 14단계(검색 · 조건 검색) 밀도 예외 — 새 토큰 없이 위의 것을 다시 쓴다 (디자인 README "14단계 — 검색 · 대화 묶기", 사용자 확정 캔버스 Search14).
+   *   검색 칸 안의 [조건] 높이 32(--size-compact-control) ·
+   *   「조건으로 찾기」 패널의 칸(보낸 사람 · 받는 사람 · 제목 · 내용 · 기간 · 날짜) · [조건 지우기] · [찾기] 높이 40(--size-filter-control) ·
+   *   결과 머리 아래 조건 줄 높이 40(--size-row-min) · 줄 안의 [조건 지우기] 36(--size-notice-action)
+   */
   --size-status-dot: 0.5rem; /* 8px — 설정 › 알림의 실시간 연결 점 */
   --size-option-input: 1.125rem; /* 18px — 설정 화면의 고르기 상자 · 라디오 (줄 전체가 44px 로 눌린다) */
   --form-max-width: 26.25rem; /* 420px — 비밀번호 칸 (디자인 원본 SettingsAccount) */