feat(frontend): 설정 › 메일 › 필터 · 읽기 화면에서 필터 만들기

확정 보드(SettingsFilter · MailFilterStates)대로 필터 목록 · 켜기 · 순서 · 지우기(되돌리기) ·
고치기 창을 만들고, 읽기 화면 ⋯ 에 「이런 메일로 필터 만들기」를 둔다.

- 저장은 한 번에 하나다. 되돌리기는 누른 차례대로, 앞 저장이 끝난 뒤에 보낸다 —
  연달아 누르면 하나가 사라지던 경합을 리뷰에서 찾았다
- 다른 곳에서 먼저 바꿨으면 창 안에서도 다시 불러올 수 있고, 쓴 내용은 지킨다
- 메뉴의 꺼진 항목은 aria-disabled 로 둔다(편집기 메뉴 공용) — 키보드로 가서 까닭을 들을 수 있다

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

frontend/src/styles/tokens.css

@@ -80,6 +80,7 @@
   --color-danger-border: #fbd7d3;
   --color-warning-surface: #fff7e6;
   --color-warning-text: #7a5200; /* 임시 저장 "다른 곳에서 바뀐 저장본" 안내 */
+  --color-warning-hover: #fdebc8; /* 노란 줄 안의 단추에 마우스를 올렸을 때 — 메일 필터 [다시 불러오기] · [다시 켜기] (디자인 원본 MailFilterStates) */
   --color-success-text: #067647; /* 서명 "저장했습니다" (디자인 원본 Settings) */
   --color-status-live: #12b76a; /* 실시간 연결 "연결되어 있습니다" 점 (디자인 원본 SettingsNotify) */
   --color-star: #b7791f;
@@ -126,6 +127,7 @@
   --shadow-toast-strong: 0 0.625rem 1.75rem rgba(16, 24, 28, 0.22);
   --shadow-dialog: 0 0.875rem 2.25rem rgba(16, 24, 28, 0.14);
   --shadow-segment: 0 0.0625rem 0.125rem rgba(16, 24, 28, 0.14); /* 전환 단추의 고른 칸 (디자인 원본 Settings) */
+  --shadow-switch-knob: 0 0.0625rem 0.125rem rgba(16, 24, 40, 0.24); /* 켜기 스위치의 동그라미 (디자인 원본 SettingsFilter) */
   --color-backdrop: rgba(11, 54, 64, 0.32);
 
   /* ── 크기 ───────────────────────────────── */
@@ -160,6 +162,15 @@
    *   목록 위 권하기 줄 높이 40(--size-notice-bar — 새 메일 알림 줄과 같다) · 줄 안의 [알림 켜기] 높이 36 · [✕ 닫기] 36×36
    */
   --size-notice-action: 2.25rem; /* 36px — 알림 권하기 줄 안의 단추 · 밀도 예외 */
+  /*
+   * 6단계(메일 필터) 밀도 예외 — 클릭 영역 44px 기준의 의도된 예외 (디자인 README "6단계 — 메일 필터", 사용자 확정 캔버스).
+   *   목록 행의 켜기 스위치 누르는 곳 40×44(--size-icon-button × --size-touch — 그림은 36×20) ·
+   *   목록 행의 ▲ ▼ 32×40(--size-mailbox-more × --size-row-min — 메일함 ⋯ 와 같다) ·
+   *   목록 위 노란 줄 · 고치기 창 안 [다시 불러오기] 높이 36(--size-notice-action) ·
+   *   고치기 창의 조건 줄(어디에서 · 포함 · 찾을 글) · 옮길 메일함 · 전달 주소 칸과 [조건 더하기] 높이 40 · 조건 ✕ 36×40
+   */
+  --size-filter-control: 2.5rem; /* 40px — 고치기 창의 조건 줄 · 옮길 메일함 · 전달 주소 칸 · [조건 더하기] 높이 · 밀도 예외 */
+  --size-filter-remove: 2.25rem; /* 36px — 조건 ✕ 폭 (높이는 --size-filter-control) · 밀도 예외 */
   --size-status-dot: 0.5rem; /* 8px — 설정 › 알림의 실시간 연결 점 */
   --size-option-input: 1.125rem; /* 18px — 설정 화면의 고르기 상자 · 라디오 (줄 전체가 44px 로 눌린다) */
   --form-max-width: 26.25rem; /* 420px — 비밀번호 칸 (디자인 원본 SettingsAccount) */