feat(frontend): 새 메일 확인·메일 검색·여러 통 선택과 처리 화면

- 화면이 보이는 동안 1분마다 바뀐 것을 묻고 목록·메일함 숫자·탭 제목 "(N)" 을 맞춘다 — 늦게 온 응답은 목록 변경 세대로 버린다
- 상단 검색 칸 → /mail/search (범위 전환, 결과 없음 안내에 엔진 한계)
- 표·분할 보기에서 여러 통 고르기와 도구 줄, 이동 메뉴, 휴지통 이동 + 되돌리기, 휴지통에서만 확인 뒤 영구 삭제
- 읽기 화면의 삭제도 DELETE 대신 휴지통 이동 · 확인 뒤 영구 삭제 — 다른 창이 휴지통에 넣은 메일을 확인 없이 지우지 않게
- 되돌리기 알림은 띄운 세션에서만 움직인다 — 메일 id 는 계정마다 겹칠 수 있다
- 메일 스토어를 기능별 setup 모듈로 나눴다 (공개 API 그대로)

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

frontend/src/styles/tokens.css

@@ -43,6 +43,7 @@
   --color-brand: #0e7c86; /* 강조 버튼 · 링크 · 진행률 */
   --color-brand-strong: #0a5f67; /* 강조 글자 · 눌린 상태 */
   --color-brand-subtle: #e3f2f3; /* 선택한 행 · 현재 메일함 · 아바타 */
+  --color-brand-tint: #f3f8f8; /* 여러 통 처리 도구 줄 · 새 메일 알림 줄 바탕 (디자인 원본 BulkSelect · ListStates) */
   --color-on-brand: #ffffff;
   --color-on-brand-text: #e6eff0;
   --color-on-brand-muted: #a3c2c6;
@@ -63,6 +64,8 @@
   --color-surface-muted: #f2f4f7; /* 받는 사람 토큰 · 파일 아이콘 */
   --color-surface-sunken: #fbfbfc; /* 목록 표 머리 줄 */
   --color-row-hover: #f3f8f8; /* 목록 표 행 hover */
+  --color-row-checked: #e8f4f5; /* 고른 행 (여러 통 처리) */
+  --color-row-checked-hover: #ddeff0; /* 고른 행에 마우스를 올렸을 때 */
   --color-border: #e6e8ec;
   --color-border-subtle: #eef0f3;
   --color-border-strong: #d0d5dd; /* 보기 전환 세그먼트 테두리 */
@@ -71,6 +74,7 @@
 
   /* ── 색: 상태 ───────────────────────────── */
   --color-danger: #b42318;
+  --color-danger-strong: #912018; /* 영구 삭제 단추에 마우스를 올렸을 때 */
   --color-danger-surface: #fef3f2;
   --color-danger-border: #fbd7d3;
   --color-warning-surface: #fff7e6;
@@ -100,6 +104,7 @@
   --space-44: 2.75rem;
   --space-48: 3rem;
   --space-56: 3.5rem;
+  --space-72: 4.5rem;
   --space-80: 5rem;
 
   /* ── 모서리 ─────────────────────────────── */
@@ -131,7 +136,18 @@
   --size-compact-control: 2rem; /* 32px */
   --size-segment-item: 1.875rem; /* 30px — 전환 버튼 한 칸 높이 (테두리·안쪽 여백 포함 36px) */
   --size-segment-item-lg: 2.25rem; /* 36px — 밀도 예외: 설정 화면의 전환 단추(그림 크기 · 미리 볼 메일) · 그림 빼기 (디자인 원본 Settings) */
-  --size-icon-button: 2.5rem; /* 40px — 새로고침 · 이전/다음 버튼 폭 (높이는 44px) */
+  --size-icon-button: 2.5rem; /* 40px — 새로고침 · 이전/다음 · 여러 통 처리 도구(아이콘만일 때) 버튼 폭 (높이는 44px) */
+  --size-search-box: 2.5rem; /* 40px — 상단 검색 칸 높이 */
+  /*
+   * 3단계(새 메일 · 검색 · 여러 통 처리) 밀도 예외 — 클릭 영역 44px 기준의 의도된 예외 (디자인 README "3단계", 사용자 확정 캔버스).
+   *   목록 표의 고르기 칸 32(--table-col-check — 별 칸과 같다) · 분할 보기 행의 고르기 칸 폭 36 ·
+   *   검색어 지우기 40×38 · 새 메일 알림 줄 높이 40 · 검색 범위 전환 36(--size-segment-item-lg) · 이동 메뉴 항목 40(--size-editor-menu-item)
+   */
+  --size-row-check: 2.25rem; /* 36px — 분할 보기 행 왼쪽의 고르기 칸 폭 · 밀도 예외 */
+  --size-search-clear-width: 2.5rem; /* 40px — 검색어 지우기(✕) 폭 · 밀도 예외 */
+  --size-search-clear-height: 2.375rem; /* 38px — 검색 칸(40) 안쪽 높이를 채운다 · 밀도 예외 */
+  --size-notice-bar: 2.5rem; /* 40px — "새 메일 N통 · 맨 위로" 줄 높이 · 밀도 예외 */
+  --size-checkbox: 1rem; /* 16px — 고르기 상자 */
   --size-rail: 4.5rem; /* 72px — 앱 레일 폭 */
   --size-rail-item: 3.75rem; /* 60px */
   --size-row-min: 2.5rem; /* 40px — 메일함 항목 */
@@ -143,13 +159,15 @@
   --size-table-head: 2rem; /* 32px — 목록 보기 표 머리 줄 */
   --size-table-row: 2.375rem; /* 38px — 목록 보기 표 행 */
   --table-gap: 0.75rem; /* 12px — 표 칸 사이 */
+  --table-col-check: 2rem; /* 32px — 고르기 칸 · 밀도 예외 (별 칸과 같다) */
   --table-col-star: 2rem; /* 32px */
+  --table-col-mailbox: 6rem; /* 96px — 전체 메일함 검색 결과의 메일함 칸 (보낸 사람 뒤) */
   --table-col-who: 10.5rem; /* 168px */
   --table-col-who-narrow: 7rem; /* 112px — 600px 미만 */
   --table-col-date: 5.25rem; /* 84px */
   --table-col-date-narrow: 4.5rem; /* 72px — 600px 미만 */
   --table-col-size: 4rem; /* 64px */
-  --table-min-width: 25rem; /* 400px — 이보다 좁으면 가로 스크롤 */
+  --table-min-width: 27.5rem; /* 440px — 이보다 좁으면 가로 스크롤 (고르기 칸 포함, 디자인 원본 BulkSelect) */
 
   /*
    * ── 콘텐츠 열 (읽기 · 쓰기 공통) ─────────────
@@ -172,7 +190,7 @@
    *   툴바 아이콘 버튼 40×44 · 메뉴 항목 높이 40 · 색 견본 칸 40×40 · 표 고르기 칸 22(간격 3, 키보드는 화살표)
    */
   --size-editor-tool: 2.5rem; /* 40px — 툴바 아이콘 버튼 폭 (높이는 --size-touch 44px) · 밀도 예외 */
-  --size-editor-menu-item: 2.5rem; /* 40px — 메뉴 항목 높이 · 밀도 예외 */
+  --size-editor-menu-item: 2.5rem; /* 40px — 메뉴 항목 높이 · 밀도 예외 (여러 통 처리의 이동 메뉴도 같은 메뉴를 쓴다) */
   --size-editor-swatch-cell: 2.5rem; /* 40px — 색 견본 칸 · 밀도 예외 */
   --size-editor-table-cell: 1.375rem; /* 22px — 표 고르기 격자 칸 · 밀도 예외 */
   --editor-table-cell-gap: 0.1875rem; /* 3px */