diff --git a/.claude/agents/backend-dev.md b/.claude/agents/backend-dev.md
index 2188afa..7f0d906 100644
--- a/.claude/agents/backend-dev.md
+++ b/.claude/agents/backend-dev.md
@@ -26,7 +26,7 @@ tools: Read, Grep, Glob, Edit, Write, Bash, Skill
 
 ## 작업 순서
 
-1. 만들기 전에 `/nestjs` 의 "템플릿 기본 제공 골격"에서 재사용할 패턴을 찾는다. 같은 역할을 새로 만들지 않는다.
+1. 만들기 전에 `/nestjs` 의 "기본 골격"에서 재사용할 패턴을 찾는다. 같은 역할을 새로 만들지 않는다.
 2. 실패 경로마다 에러 코드를 정한다. 코드 없는 실패는 만들지 않는다 ([[error-codes]]).
 3. 목록 API 면 페이지네이션을 적용한다 ([[response-format]]).
 4. Swagger 데코레이터를 함께 쓴다 ([[api-design]]).
diff --git a/.claude/rules/checklist.md b/.claude/rules/checklist.md
index 8885e49..914f644 100644
--- a/.claude/rules/checklist.md
+++ b/.claude/rules/checklist.md
@@ -1,11 +1,11 @@
-# 작업 점검 & 신규 프로젝트 셋업
+# 작업 점검 & 새 환경 셋업
 
-> 이 저장소는 **재사용 템플릿**이다. 클론해 어떤 프로젝트든 시작할 수 있도록, 여기에는 **언제나 유효한 공용 규칙**만 둔다(특정 시점의 구현 상태는 두지 않는다).
-> 각 스택이 기본 제공하는 골격과 확장 규칙은 [[nestjs]] · [[vue3]] · [[flutter]] · [[docker]] 스킬 참조.
+> 여기에는 **언제나 유효한 점검 규칙**만 둔다(특정 시점의 구현 상태는 두지 않는다 — 지금 상태는 각 스킬 · API 계약 · [로드맵](../../docs/roadmap.md)).
+> 각 스택에 이미 있는 골격과 확장 규칙은 [[nestjs]] · [[vue3]] · [[flutter]] · [[docker]] 스킬 참조.
 
 ---
 
-## 1. 신규 프로젝트 셋업 (클론 직후 1회)
+## 1. 새 개발 환경 · 새 서버 셋업 (처음 한 번)
 
 - [ ] 루트 `.env.{env}.example` → `.env.{env}` 복사 후 **placeholder 값 교체** (`change-me-*` 가 남아 있으면 안 된다, [[env-structure]])
       운영은 `BACKEND_API_URL`·`CORS_ORIGIN` 을 **실제 도메인**으로 — `localhost`/`example.com` 이 남으면 기동 실패한다
@@ -85,10 +85,10 @@
 
 ## 6. 기능 확장 시 따르는 순서
 
-새 기능은 만들기 전에, 해당 스킬의 **"템플릿 기본 제공 골격"** 에서 재사용할 패턴을 먼저 찾는다(같은 역할을 새로 만들지 말 것).
+새 기능은 만들기 전에, 해당 스킬의 **"기본 골격"** 에서 재사용할 패턴을 먼저 찾는다(같은 역할을 새로 만들지 말 것).
 
 1. 해당 디렉터리 스킬 규칙 확인 ([[nestjs]] / [[vue3]] / [[flutter]])
-2. 기본 제공 골격(인터셉터·필터·에러 레지스트리·dio client·예제 모듈)에서 패턴 재사용
+2. 기본 골격(인터셉터·필터·에러 레지스트리·dio client·예제 모듈)에서 패턴 재사용
 3. 표준 응답/에러 흐름 준수 ([[response-format]] · [[error-codes]] · [[api-design]])
 4. 실패 경로마다 에러 코드 지정 — `BusinessException('CODE')` 로 던진다
 5. env 신규 값은 루트 `.env` 부터 ([[env-structure]])
diff --git a/.claude/rules/env-structure.md b/.claude/rules/env-structure.md
index 6f0f15e..466976e 100644
--- a/.claude/rules/env-structure.md
+++ b/.claude/rules/env-structure.md
@@ -5,7 +5,7 @@ description: 환경변수 단일 진실 공급원(SSOT) 구조 — 루트 .env.{
 
 # 환경변수 구조 (단일 진실 공급원: 루트 `.env`)
 
-이 템플릿은 **루트 `.env.{APP_ENV}` 가 모든 설정의 단일 진실 공급원(SSOT)** 이다.
+이 저장소는 **루트 `.env.{APP_ENV}` 가 모든 설정의 단일 진실 공급원(SSOT)** 이다.
 값을 한 곳에서만 관리하기 위해, 서비스(backend/frontend)는 자체 env에 값을 중복 작성하지 않고 **루트 → docker-compose 가 주입한 값을 그대로 사용**한다.
 
 ```
diff --git a/.claude/rules/security.md b/.claude/rules/security.md
index b14ac9b..823733b 100644
--- a/.claude/rules/security.md
+++ b/.claude/rules/security.md
@@ -64,7 +64,7 @@
   `img onerror` 같은 처리기가 실행된다. CSP 가 막아도 그것에만 기대지 않는다 ([[vue3]] 체크리스트 "외부 HTML")
 ### 파일 업로드
 
-템플릿은 `modules/upload` 에 로컬 디스크 기준 골격을 제공한다. 새 업로드 엔드포인트는 이 패턴을 복제한다.
+`modules/upload` 에 로컬 디스크 기준 골격이 있다. 새 업로드 엔드포인트는 이 패턴을 복제한다.
 
 - **확장자와 MIME 을 둘 다** 검사한다 (`upload.config.ts`). 확장자만 보면 위장이 쉽고,
   MIME 만 보면 클라이언트가 보낸 값이라 신뢰할 수 없다.
diff --git a/.claude/rules/testing.md b/.claude/rules/testing.md
index 5e8a33f..6fc1ea9 100644
--- a/.claude/rules/testing.md
+++ b/.claude/rules/testing.md
@@ -5,7 +5,7 @@ description: 세 스택 공통 테스트 규칙 — 테스트 위치/네이밍,
 
 # 테스트 규칙
 
-> 템플릿은 각 스택에 테스트 러너가 준비되어 있다 — backend `jest`, frontend `vitest`, flutter `flutter_test`.
+> 각 스택에 테스트 러너가 준비되어 있다 — backend `jest`, frontend `vitest`, flutter `flutter_test`.
 > 새 로직을 추가하면 최소한의 테스트를 함께 작성한다.
 
 ## 공통 원칙
diff --git a/.claude/skills/flutter/SKILL.md b/.claude/skills/flutter/SKILL.md
index 32395f1..dfb7c1a 100644
--- a/.claude/skills/flutter/SKILL.md
+++ b/.claude/skills/flutter/SKILL.md
@@ -10,9 +10,9 @@ description: Flutter 모바일 앱(flutter/) 개발 규칙 — Dart Sound Null S
 
 ---
 
-## 템플릿 기본 제공 골격
+## 기본 골격
 
-> 이 템플릿은 네트워크 · 세션 · 라우터 · 모듈 틀을 **기본 제공**한다. 새 코드는 이 파일들의 패턴을 재사용한다(같은 역할을 새로 만들지 말 것).
+> 네트워크 · 세션 · 라우터 · 모듈 틀이 이미 있다. 새 코드는 이 파일들의 패턴을 재사용한다(같은 역할을 새로 만들지 말 것).
 > 앱 이름 "ARA SYSTEM", 식별자 `kr.it.arasystem.app`(Android applicationId · iOS bundle id — 직원 휴대폰에 설치한 뒤에는 못 바꾼다: 식별자가 다르면 다른 앱이라 그 위에 설치되지 않는다), 패키지 `arasystem_app`.
 
 | 제공 항목 | 위치 | 비고 |
@@ -42,7 +42,7 @@ description: Flutter 모바일 앱(flutter/) 개발 규칙 — Dart Sound Null S
 | **앱 설정 · 업데이트 화면** | `lib/core/app_config/`(`app_config.dart` — 판 비교 `AppVersion` · 모양, `app_config_repository.dart`, `app_config_controller.dart` — `appUpdateRequiredProvider` · `pushAvailableProvider`) · `core/router/session_redirect.dart`(`updateRequired` 가 세션보다 먼저) · `features/app_update/`(모듈이 아니다 — 화면 · 글) · `core/app_download/`([새 버전 받기] — 받기 화면 주소 `app_download_link.dart` · 런처 `AppDownloadLauncher` · 글, 업데이트 화면과 설정 › 앱 정보가 함께 쓴다) | `GET /api/app-config` 는 띄울 때 한 번 · 앞으로 올 때 마지막으로 받은 지 1시간이 지났으면(실패는 1분 간격으로 다시) — 알리지 않고 막지 않는다. 404 `RES_001` 은 옛 서버(최소 판 없음 · 알림 쓸 수 없음). 판은 숫자 1~3칸 · 칸마다 4자리까지(서버의 판 칸 `APP_VERSION_PATTERN` 과 같다 — `-` · `+` 뒤는 버린다), 이 앱의 판을 모르면 막지 않는다. 업데이트 화면으로 옮길 때 쓰기 화면은 마저 저장한다(`ComposeController.detach(saveRemaining: true)` — 화면이 밖에서 닫힌 때도). 앱은 스토어에 올리지 않고 사내에 직접 나눠 준다(2026-11-08 — 빌드 · 서명 · 올리기는 `flutter/README.md` "사내 배포"). [새 버전 받기]는 포털의 휴대폰 앱 받기 화면 `<API_URL 의 출처>/app`(`appDownloadPageUrlOf` — `/api` 를 뗀 출처 + 경로, 짝: 웹 `mobile-app.ts` 의 `MOBILE_APP_PATH`)을 바깥 브라우저로(`LaunchMode.externalApplication` — `canLaunchUrl` 은 쓰지 않는다) 연다. 열지 못하면 스킴 없는 주소를 담아 알린다(`openAppDownloadPage` — 두 화면이 같은 알림). 앱 설정 계약은 받는 곳 주소를 싣지 않는다 |
 | **설정 탭 (`App1Shell` · `App1Push` ④)** | `lib/features/settings/` — `settings_routes.dart`(`/settings` · `/settings/licenses` · 모듈이 내놓은 절) · `presentation/pages/settings_page.dart` · `widgets/settings_notification_row.dart` · `settings_texts.dart` | 한 화면(내 정보 · 알림 · 모듈 절 · 앱 정보(앱 버전 · [새 버전 받기] — 끝 아이콘이 바깥으로 여는 아이콘, 업데이트 화면과 같은 런처 · 오픈소스 라이선스) · 문의 · [로그아웃]). 문의는 로그인 화면과 같은 저장소(`supportContactProvider`), [로그아웃]은 확인 창(`shared/widgets/confirm_dialog.dart` — 처음 초점 [취소]). 스위치 색은 테마의 `switchTheme`(보드 — 켬 청록 · 끔 테두리 · 누를 수 없음 회색) |
 | 자리 화면 | `lib/shared/widgets/placeholder_page.dart` | 화면은 캔버스로 확인받은 뒤 만든다 — 그때까지 이름(과 갈 곳)만 보이는 자리 화면. 확정되면 라우트 묶음의 builder 를 바꾼다 |
-| 예제 feature(템플릿) | `lib/features/user/` | 목록 페이지네이션(`{items, pageInfo}` — 단건 + 커서 목록) 예제로만 남긴 템플릿. 앱 API 에 `/users` 는 없다 |
+| 예제 feature(참조용) | `lib/features/user/` | 목록 페이지네이션(`{items, pageInfo}` — 단건 + 커서 목록) 예제로만 남겼다. 앱 API 에 `/users` 는 없다 |
 | 시험 도구 | `test/support/` — `fakes.dart` · `provider_harness.dart` | 가짜 서버(`FakeServer` — HttpClientAdapter) · 메모리 보안 저장소 · 손 시계(`ManualClock`) · 알림 기록(`RecordingNotifier`). 고정 대기 없이 Completer 로 차례를 맞춘다 ([[testing]]) |
 
 > **확장 시 따르는 규칙** (아래 "프로젝트 구조"는 목표 구조 — 기능 추가 시 점진적으로 채운다):
diff --git a/.claude/skills/nestjs/SKILL.md b/.claude/skills/nestjs/SKILL.md
index 0a70ef2..fe8e325 100644
--- a/.claude/skills/nestjs/SKILL.md
+++ b/.claude/skills/nestjs/SKILL.md
@@ -9,9 +9,9 @@ description: NestJS 백엔드(backend/) 개발 규칙 — 컨트롤러/서비스
 
 ---
 
-## 템플릿 기본 제공 골격
+## 기본 골격
 
-> 이 템플릿은 아래 인프라를 **기본 제공**한다. 새 코드는 이 파일들의 패턴을 재사용한다(같은 역할을 새로 만들지 말 것).
+> 아래 인프라가 이미 있다. 새 코드는 이 파일들의 패턴을 재사용한다(같은 역할을 새로 만들지 말 것).
 
 | 제공 항목 | 위치 | 비고 |
 | --- | --- | --- |
@@ -32,13 +32,13 @@ description: NestJS 백엔드(backend/) 개발 규칙 — 컨트롤러/서비스
 | 길이 검사 데코레이터 | `src/common/decorators/code-units.decorator.ts` | `MaxCodeUnits` · `MinCodeUnits` — JS 문자열 길이(UTF-16 코드 단위)로 센다(웹의 `.length` 와 같다). class-validator 의 `MinLength`·`MaxLength` 는 서로게이트 쌍 · 이모지를 덜 세어 클라이언트가 센 길이와 어긋난다 — 클라이언트와 같은 한도를 거는 문자열은 이것을 쓴다 |
 | 공백 · 중복 데코레이터 | `src/common/decorators/trim-string.decorator.ts` · `array-distinct.decorator.ts` | `TrimString()` — 앞뒤 공백을 지운 값으로 검사하고 그 값으로 저장한다(메일함 이름 · 필터의 이름 · 찾을 글 · 전달 주소). `ArrayDistinct(options)` — 배열 항목이 겹치지 않는지 Set 으로 한 번 훑는다(선형 — 원시 값은 값으로, 객체는 같은 객체일 때만. 객체 배열의 id 중복은 서비스가 Set 으로 본다 — 예: 필터 규칙 `findFilterRulesProblem`). class-validator 의 `ArrayUnique` 는 `indexOf` 비교라 항목 수의 제곱이다 — **쓰지 않는다** |
 | 직원 인증 | `modules/auth` | 쿠키 JWT 로그인·`me`·`refresh`·`logout` (계약 `docs/mail/api-contract.md` 1절) · **앱 전용 토큰 경로** `app-auth.controller.ts`(앱 1단계 — `/api/auth/app/login`·`refresh`·`logout`, 계약 1절 "앱 로그인": 웹과 같은 `AuthService` 함수를 지나 실패 카운터 · 코드 가드 · 앱 비밀번호 거절 · 막는 계정이 같고, 로그인 요청 수 상한은 웹 로그인과 같은 칸(`auth.constants.ts` 의 `LOGIN_THROTTLE` — 키를 같은 이름으로). 토큰은 응답 본문 `tokens`(끝나는 때는 토큰의 exp · `private, no-store`), 앱 토큰 둘에 `cli: 'app'`, 세션 표 `client`(web · app — 마이그레이션 `AddAppSessionClient`, DB 기본값 web — 칸을 모르는 코드가 넣어도 웹), 갱신은 같은 클라이언트의 리프레시 토큰으로만(다르면 `AUTH_001`, 세션은 끊지 않는다) · **앱 세션의 30초 유예는 그 세션을 끝낸다**(사유 `app-refresh-grace` — 앱은 갱신을 한 번에 하나만 하므로 응답을 잃었거나 토큰이 두 번 쓰였다, 응답은 웹과 같은 200 `tokens: null`). 본문 경계: `refreshToken` 이 없거나 글이 아니면 400 `VAL_001`, 빈 글 · 2,048자(`MAX_REFRESH_TOKEN_LENGTH`) 넘음은 서명을 보기 전에 틀린 토큰(갱신 401 `AUTH_001`). 로그아웃은 본문의 리프레시 토큰 → 없거나 · 빈 글 · 길거나 · 틀리면 Bearer 의 sid — 본문 모양(글이 아님 · 모르는 칸)이 틀릴 때만 400, 그 밖은 200. 앱 표시가 있는데 sid 가 UUID 가 아닌 액세스 토큰은 가드가 `AUTH_001`. 앱 요청의 "지금 세션"은 리프레시 쿠키가 없어 액세스 토큰의 sid — `AuthService.requestSessionId`, 비밀번호 바꾸기 · 로그인된 기기가 쓴다) · 비밀번호 변경 `PUT /api/auth/password`(4단계 — 직원 본인 자격으로 엔진의 `x:AccountPassword/set`, 로그인과 같은 실패 카운터 · 진행 중 잠금, 바뀌면 이 요청의 세션만 남기고 그 직원의 세션을 끊는다 — 결과를 모르는 실패에도 끊는다). 설정 `auth.settings.ts`, 쿠키 `auth-cookies.ts`, 로그인 실패 횟수 `login-attempt.service.ts`, **로그인 세션(DB)** `auth-session.entity.ts`·`auth-session.policy.ts`(1회용 회전·재사용 감지)·`auth-session.cleanup.ts`(끝난 세션 정리 cron). **메일 엔진 관리자 차단** — 정적 목록(`employee-address.ts` + `MAIL_BLOCKED_ACCOUNTS`)과 로그인·리프레시 때 엔진 권한 확인(`jmap/jmap.client.ts`) 두 겹 |
-| 메일 (웹메일 API) | `modules/mail` | 엔진 포트 `mail.provider.ts`(`MAIL_PROVIDER`) + Stalwart JMAP 어댑터 `jmap/`, 받은 메일 HTML 정화 `html/sanitize-mail-html.ts`, 보내는 서식 본문 정화(허용 목록) `html/sanitize-outgoing-html.ts`, 두 정화 앞의 사전 검사(길이·파서 스택 비용, 선형 시간) `html/html-parse-budget.ts`, 첨부 형식 `attachment.policy.ts`, 설정 `mail.settings.ts`, 발송 중복 방지(`Idempotency-Key`) `send-idempotency.ts`, 발송의 받는 사람별 결과 `jmap/delivery-status.ts`(제출 다음에 따로 읽는다 — 일부 거절은 201 의 `rejectedRecipients`, 모두 거절이면 보낸 사본을 지우고 `MAIL_010` · `MAIL_011`, 계약 2절 "받는 사람별 결과"), 첨부 임시 디스크 저장 `mail-upload-storage.ts`, 임시 저장 `draft.controller.ts`(엔진 초안 — 새로 만들고 다시 읽은 뒤 옛것을 지운다), 서명 그림 주소 규칙 `html/signature-images.ts`(보낼 때 `cid:` 로), 본문 그림 판정 `html/inline-images.ts`, 받는 사람 추천 `recipient-suggestions.service.ts`(사용자별 10분 캐시) · 순서 `recipient-ranking.ts` · 커서 `recipient-suggestion-cursor.ts` · q 맞추기 `recipient-match.ts`(8단계 — **frontend `shared/utils/recipient-match.ts` 와 짝**, 같은 표본 표를 두 쪽 테스트에 둔다 — 한쪽을 고치면 둘 다. 이름은 코드 포인트로 한 번 훑는다 — 길이에 비례), 검색어 → 엔진 조건 `jmap/search-terms.ts`(한국어 조사 표는 여기 한 곳 — 낱말 안 OR · 낱말끼리 AND, 따옴표 구절), 여러 통 `PATCH /api/messages`(엔진 요청 한 번) · 휴지통에서 영구 삭제 `message-deletion.controller.ts`(휴지통의 메일만, 조건부 지우기) — 본문 `dto/bulk-messages.dto.ts`, 새 메일 확인 `GET /api/mail-state`(`mailbox.controller.ts`), 메일함 관리 · 전체 읽음 · 비우기(`mailbox.controller.ts`, 본문 `dto/mailbox.dto.ts` — 오래 걸리는 처리는 어댑터(`BulkRun` — `jmap/bulk-run.ts`)가 500통씩 · 한 요청 25초 안에서(엔진 호출마다 남은 시간만큼) 하고 남은 수를 돌려준다, 같은 직원 · 같은 메일함은 한 번에 하나(`mail.service.ts` 의 `mailboxOperations` — 진행 중이면 `REQ_001`), 지우기는 안의 메일을 휴지통으로 옮긴 뒤) · 부재중 자동 응답 `MailVacationController`(`dto/mail-vacation.dto.ts` — 6단계부터 저장 자리는 아래 필터의 Sieve 스크립트. 응답의 `isActive`(7단계)는 엔진에서 그 스크립트가 켜져 있는지 — 본문으로는 받지 않는다) · 메일 필터 `mail-filter.controller.ts`(6단계 — `GET`·`PUT /api/mail-filters`, 본문 `dto/mail-filter.dto.ts`, 칸 사이 규칙 `mail-filters.ts`. 엔진 쪽은 Sieve 스크립트 하나(`arasystem` — 필터와 **부재중을 함께**, 엔진의 VacationResponse 는 쓰지 않고 처음 읽을 때만 이어받는다): 저장소 `jmap/jmap-filter-script.ts`(읽은 상태 그대로일 때만 쓰고 켠다 · 그사이 바뀌면 다시 읽기 · 같은 규칙이면 옛 version 이어도 저장), 글 만들기 `jmap/sieve-script.ts`, 머리 주석의 원본(JSON · 판 `FILTER_SOURCE_FORMAT`) `jmap/filter-source.ts`, 부재중 제목 · 본문 인코딩 `jmap/mime-text.ts`, JMAP 결과 읽기 `jmap/jmap-results.ts`) · 이미 받은 메일에 필터 적용 `POST /api/mail-filter-runs`(7단계 — `mail-filter.controller.ts`, 본문 `dto/mail-filter-run.dto.ts`. 저장한 필터가 아니라 본문의 규칙으로 받은편지함을 최근 메일부터 판정하고 표시 · 옮기기만 한다(전달 · 지우기 없음). 판정 `mail-filter-match.ts` 는 **`jmap/sieve-script.ts` 의 `FIELD_TESTS` 와 짝**이다 — 엔진 검색은 낱말 단위라 쓰지 않고 Sieve 의 판정을 그대로 옮겼다(한쪽을 바꾸면 다른 쪽도). 견줄 글 `jmap/filter-run-texts.ts`(원래 머리글 `header:From:all` 등 — `:asRaw` 는 붙이지 않는다(엔진이 응답의 이름에서 뗀다), 풀기 `jmap/mime-text.ts` 의 `decodeHeaderText` — 접힌 줄은 띄어쓰기 하나, 인코딩된 글은 홀로 선 것만), HTML 글자 `html/html-text.ts`(엔진의 `body :text` 와 같게 — 닫는 `p` · `br` 만 줄을 끊고 `style` · `script` · `head` · `template` 은 글째 빼며 그 밖의 태그는 빈자리 없이 뺀다. 속성이 붙은 태그는 엔진처럼 알아보지 않는다 — 2026-10-29 인증 발송 네 묶음으로 맞춤, 규칙은 계약 2절), 어댑터 `jmap/jmap-filter-run.ts`(머리글 500통 · 본문 100통 차례, 본문 값은 부분마다 256KiB · 한 통 1MiB — 바깥 메일 한 통이 메모리를 크게 쓰지 않게), 이어 할 자리 `jmap/filter-run-cursor.ts`(2판 — 위 경계 · anchor · 그 받은 시각 · 규칙 지문. 모든 조회에 `before` 를 걸어 시작한 뒤 온 메일은 보지 않고, 빠진 anchor 는 그 초부터 다시 읽는다). 한 요청의 시간은 메일함 처리와 같은 `BulkRun`, 같은 직원은 한 번에 하나(`mail.service.ts` 의 `filterRuns` — 진행 중이면 `REQ_001`)) · 원문 `GET /api/messages/{id}/source`(이름 `attachment.policy.ts` 의 `messageSourceFileName`) · 스팸 표시 `isJunk` (계약 2절) · 실시간 알림 `GET /api/mail-events`(5단계 — SSE, `mail-events.controller.ts` · 엔진을 모르는 `mail-events.service.ts`(직원마다 연결 5개 · 25초 ping · 토큰 만료 30초 전 `end` · 종료 때 `end`) · 엔진 쪽 `jmap/jmap-mail-watch.ts`(직원마다 엔진 EventSource 하나 · 75초 무소식이면 다시 잇기) · `jmap/jmap-push.ts`(스트림 읽기) · `jmap/new-mail.ts`(새 메일 거르기), SSE 형식 `shared/utils/sse.ts`. 머리글은 스트림을 열기로 정하면 바로(`flushHeaders`), 처리기에 닿기 전에 끊긴 응답(`res.destroyed`)도 정리한다) |
+| 메일 (웹메일 API) | `modules/mail` | 엔진 포트 `mail.provider.ts`(`MAIL_PROVIDER`) + Stalwart JMAP 어댑터 `jmap/`, 받은 메일 HTML 정화 `html/sanitize-mail-html.ts`, 보내는 서식 본문 정화(허용 목록) `html/sanitize-outgoing-html.ts`, 두 정화 앞의 사전 검사(길이·파서 스택 비용, 선형 시간) `html/html-parse-budget.ts`, 첨부 형식 `attachment.policy.ts`, 설정 `mail.settings.ts`, 발송 중복 방지(`Idempotency-Key`) `send-idempotency.ts`, 발송의 받는 사람별 결과 `jmap/delivery-status.ts`(제출 다음에 따로 읽는다 — 일부 거절은 201 의 `rejectedRecipients`, 모두 거절이면 보낸 사본을 지우고 `MAIL_010` · `MAIL_011`, 계약 2절 "받는 사람별 결과"), 첨부 임시 디스크 저장 `mail-upload-storage.ts`, 임시 저장 `draft.controller.ts`(엔진 초안 — 새로 만들고 다시 읽은 뒤 옛것을 지운다), 서명 그림 주소 규칙 `html/signature-images.ts`(보낼 때 `cid:` 로), 본문 그림 판정 `html/inline-images.ts`, 받는 사람 추천 `recipient-suggestions.service.ts`(사용자별 10분 캐시) · 순서 `recipient-ranking.ts` · 커서 `recipient-suggestion-cursor.ts` · q 맞추기 `recipient-match.ts`(8단계 — **frontend `shared/utils/recipient-match.ts` 와 짝**, 같은 표본 표를 두 쪽 테스트에 둔다 — 한쪽을 고치면 둘 다. 이름은 코드 포인트로 한 번 훑는다 — 길이에 비례), 검색어 → 엔진 조건 `jmap/search-terms.ts`(한국어 조사 표는 여기 한 곳 — 낱말 안 OR · 낱말끼리 AND, 따옴표 구절), 여러 통 `PATCH /api/messages`(엔진 요청 한 번) · 휴지통에서 영구 삭제 `message-deletion.controller.ts`(휴지통의 메일만, 조건부 지우기) — 본문 `dto/bulk-messages.dto.ts`, 새 메일 확인 `GET /api/mail-state`(`mailbox.controller.ts`), 메일함 관리 · 전체 읽음 · 비우기(`mailbox.controller.ts`, 본문 `dto/mailbox.dto.ts` — 오래 걸리는 처리는 어댑터(`BulkRun` — `jmap/bulk-run.ts`)가 500통씩 · 한 요청 25초 안에서(엔진 호출마다 남은 시간만큼) 하고 남은 수를 돌려준다, 같은 직원 · 같은 메일함은 한 번에 하나(`mail.service.ts` 의 `mailboxOperations` — 진행 중이면 `REQ_001`, 여러 메일함은 한꺼번에 잡는다), 지우기는 안의 메일을 휴지통으로 옮긴 뒤. 15단계 — **옮기기**는 `PATCH` 의 `parentId`(`UpdateMailboxDto` — 이름 · 상위 가운데 보낸 것만, 자리는 만들기와 같고 자기 아래는 서버가 먼저 막는다 · 엔진의 고리 거절은 같은 요청에서 다시 읽은 목록으로 가른다, 옮길 때만 그 메일함과 새 상위를 잡는다), **하위까지 지우기**는 `?withChildren=true`(`MailboxDeleteQueryDto` — 없으면 지금처럼 `VAL_001`): 서비스가 그 메일함을 먼저 잡고(처리 중이면 엔진에 묻지 않고 `REQ_001`) 목록을 읽어 하위 메일함까지 잡고, 어댑터가 나무의 메일을 한 조회(`inMailbox` OR)로 옮긴 뒤 깊은 것부터 한 요청에 지운다(엔진은 destroy 를 적은 차례대로 한다). 나무 계산은 순수 함수 `mailbox-tree.ts`) · 부재중 자동 응답 `MailVacationController`(`dto/mail-vacation.dto.ts` — 6단계부터 저장 자리는 아래 필터의 Sieve 스크립트. 응답의 `isActive`(7단계)는 엔진에서 그 스크립트가 켜져 있는지 — 본문으로는 받지 않는다) · 메일 필터 `mail-filter.controller.ts`(6단계 — `GET`·`PUT /api/mail-filters`, 본문 `dto/mail-filter.dto.ts`, 칸 사이 규칙 `mail-filters.ts`. 엔진 쪽은 Sieve 스크립트 하나(`arasystem` — 필터와 **부재중을 함께**, 엔진의 VacationResponse 는 쓰지 않고 처음 읽을 때만 이어받는다): 저장소 `jmap/jmap-filter-script.ts`(읽은 상태 그대로일 때만 쓰고 켠다 · 그사이 바뀌면 다시 읽기 · 같은 규칙이면 옛 version 이어도 저장), 글 만들기 `jmap/sieve-script.ts`, 머리 주석의 원본(JSON · 판 `FILTER_SOURCE_FORMAT`) `jmap/filter-source.ts`, 부재중 제목 · 본문 인코딩 `jmap/mime-text.ts`, JMAP 결과 읽기 `jmap/jmap-results.ts`) · 이미 받은 메일에 필터 적용 `POST /api/mail-filter-runs`(7단계 — `mail-filter.controller.ts`, 본문 `dto/mail-filter-run.dto.ts`. 저장한 필터가 아니라 본문의 규칙으로 받은편지함을 최근 메일부터 판정하고 표시 · 옮기기만 한다(전달 · 지우기 없음). 판정 `mail-filter-match.ts` 는 **`jmap/sieve-script.ts` 의 `FIELD_TESTS` 와 짝**이다 — 엔진 검색은 낱말 단위라 쓰지 않고 Sieve 의 판정을 그대로 옮겼다(한쪽을 바꾸면 다른 쪽도). 견줄 글 `jmap/filter-run-texts.ts`(원래 머리글 `header:From:all` 등 — `:asRaw` 는 붙이지 않는다(엔진이 응답의 이름에서 뗀다), 풀기 `jmap/mime-text.ts` 의 `decodeHeaderText` — 접힌 줄은 띄어쓰기 하나, 인코딩된 글은 홀로 선 것만), HTML 글자 `html/html-text.ts`(엔진의 `body :text` 와 같게 — 닫는 `p` · `br` 만 줄을 끊고 `style` · `script` · `head` · `template` 은 글째 빼며 그 밖의 태그는 빈자리 없이 뺀다. 속성이 붙은 태그는 엔진처럼 알아보지 않는다 — 2026-10-29 인증 발송 네 묶음으로 맞춤, 규칙은 계약 2절), 어댑터 `jmap/jmap-filter-run.ts`(머리글 500통 · 본문 100통 차례, 본문 값은 부분마다 256KiB · 한 통 1MiB — 바깥 메일 한 통이 메모리를 크게 쓰지 않게), 이어 할 자리 `jmap/filter-run-cursor.ts`(2판 — 위 경계 · anchor · 그 받은 시각 · 규칙 지문. 모든 조회에 `before` 를 걸어 시작한 뒤 온 메일은 보지 않고, 빠진 anchor 는 그 초부터 다시 읽는다). 한 요청의 시간은 메일함 처리와 같은 `BulkRun`, 같은 직원은 한 번에 하나(`mail.service.ts` 의 `filterRuns` — 진행 중이면 `REQ_001`)) · 원문 `GET /api/messages/{id}/source`(이름 `attachment.policy.ts` 의 `messageSourceFileName`) · 스팸 표시 `isJunk` (계약 2절) · 실시간 알림 `GET /api/mail-events`(5단계 — SSE, `mail-events.controller.ts` · 엔진을 모르는 `mail-events.service.ts`(직원마다 연결 5개 · 25초 ping · 토큰 만료 30초 전 `end` · 종료 때 `end`) · 엔진 쪽 `jmap/jmap-mail-watch.ts`(직원마다 엔진 EventSource 하나 · 75초 무소식이면 다시 잇기) · `jmap/jmap-push.ts`(스트림 읽기) · `jmap/new-mail.ts`(새 메일 거르기), SSE 형식 `shared/utils/sse.ts`. 머리글은 스트림을 열기로 정하면 바로(`flushHeaders`), 처리기에 닿기 전에 끊긴 응답(`res.destroyed`)도 정리한다) |
 | 메일 서명 | `modules/mail-signature` | 사용자마다 서명 하나(DB) + 서명 그림. 그림 형식은 내용으로 판별(매직 바이트·머리의 가로·세로, 새 의존성 없음) `signature-image-format.ts`, 파일은 업로드 볼륨의 `mail-signatures/` (`signature-image-storage.ts`), 서명에 붙지 않은 그림 정리 cron `mail-signature.cleanup.ts`. 메일 모듈이 발송·임시 저장 때 `MailSignatureService` 로 그림을 쓴다 (계약 2절 "서명") |
 | 사내 목록(로그인 기록) | `modules/mail-directory` | 웹메일 로그인에 성공한 직원(관리자·게이트웨이·막은 계정 제외)을 `AuthService` 가 기록한다 — 8단계부터는 엔진의 사내 목록(아래 주소록)을 **읽지 못할 때만** 받는 사람 추천의 "사내"를 대신한다. 직원 역할에는 엔진의 계정 목록(Principal) 권한이 없다(일부러 막아 두었다) |
 | 주소록 (8단계) | `modules/contacts` | 내 주소록(연락처 · 그룹)과 사내 목록 — 계약 3절. 컨트롤러 `contacts.controller.ts` · `contact-groups.controller.ts` · `directory-entries.controller.ts`, 서비스 `contacts.service.ts`(직원마다 주소록 캐시 `contact-book-cache.ts` — 엔진 state 로 확인(`ContactCard/get` 빈 ids, 3ms, 판은 읽기 전에 물은 것), 200명 · 모두 2,400만 · 한 사람 800만 · 30분, 같은 직원의 바꾸기는 차례로(`writeQueues`), 엔진에는 `ifInState` — 어긋남 · `serverUnavailable` 은 다시 읽어 세 번까지, 넘으면 `MAIL_001`. 쓰기의 크기 한도 800만(`MAX_ADDRESS_BOOK_WEIGHT` — 캐시의 한 사람 상한과 같은 값, 넘게 커지는 쓰기는 `CONTACT_002`). 고치기는 `PATCH`(보낸 칸만 검사) — 칸 안의 남의 속성은 어댑터 `contact-card.ts` 의 `contactPatch` 가 지금 카드와 합쳐 지킨다. 되돌리기 표 `contact-restore-store.ts`(지우기 직전에 읽은 카드 전체 — 5분 · 직원마다 20개 · 256KB · 모두 32MB) + `contact-restorations.controller.ts`) · `directory.service.ts`(사내 목록 10분 캐시, 거르기 `directory-policy.ts` — 로그인 막기와 같은 `isEmployeeAddress` + 설명의 `[setup.mjs]`). 순수 함수 `address-book.ts` · `contact-search.ts`(초성 · 겹자음 · 전화 숫자 · NFC) · `contact-paging.ts`(위치 커서 — `shared/utils/offset-cursor.ts`, 받는 사람 추천 커서도 이것), 경로 id `contact-id.pipe.ts`, 빈 글 → null `TrimStringOrNull()`. 포트 `contacts.provider.ts`(`CONTACTS_PROVIDER` · `DIRECTORY_PROVIDER`) — 엔진 어댑터는 `modules/mail/jmap/` 의 `jmap-contacts.provider.ts` · `contact-card.ts`(JSContact ↔ 도메인) · `jmap-directory.provider.ts`(`JmapClient.callDirectory()` — **사내 목록 계정만** 대리 접근). 엔진 교체는 `contacts.module.ts` 의 useClass 만. 모듈 순환을 막으려고 `MAIL_SETTINGS` · `JmapClient` 는 `modules/mail/mail-engine.module.ts` 에 둔다(메일 → 주소록 방향만, 인증 모듈은 이것을 가져온다). 사내 목록 계정(`MAIL_DIRECTORY_LOCAL_PART`, 기본 `mail-directory`)은 setup 이 복구 관리자로만 만든다 — `mail.settings.ts` 의 막는 목록에도 들어 있다 |
-| 보내기 취소 · 예약 발송 (9단계) | `modules/mail/jmap/pending-send.ts` · `jmap/envelope.ts` · `scheduled-message.controller.ts` · `scheduled-messages.service.ts` | 기다리는 곳은 엔진이다 — 제출의 FUTURERELEASE(`HOLDFOR` · `HOLDUNTIL`, 엔진 한도 7일), 취소는 `undoStatus: canceled` 뒤 그 메일을 임시보관함으로(`$draft` + `$ara-canceled`, 다시 취소해도 200). `pending-send.ts` 는 붙잡기 매개변수 · 기다리는 제출 찾기(`EmailSubmission/query` 의 `filter.after: 지금` — `undoStatus` 조건은 모든 제출을 훑는다, 정렬 이름 `sentAt`) · `pendingSend` 판정(pending 이면서 보낼 시각이 아직)이다. **발송은 늘 envelope 을 직접 준다**(`envelope.ts`) — 엔진이 받지 않는 주소(모르는 최상위 도메인 등)가 있으면 제출 전체를 거절하고 첫 주소 하나만 알려 주므로, 어댑터가 그 주소를 not-found 로 빼고 같은 메일을 다시 제출한다(한 차례에 하나 — 거절 글의 따옴표 토큰과 정확히 같은 주소부터, 20차례까지 · 발송 55초 안). **붙잡힌 메일은 취소로만 보낸편지함을 떠난다** — 한 통 · 여러 통 `PATCH`(옮기기 · 스팸) · `DELETE` · 영구 삭제 · 메일함 지우기 · 비우기 · 필터 적용이 엔진에 먼저 묻고(`pending-send.ts` 의 `readHeldEmails` — 읽지 못하거나 다 받았는지 응답의 total 로 확인하지 못하면 바꾸지 않고 `MAIL_001`, 닫힌 쪽으로), 막으면 `MAIL_015` · `failedIds` · `skippedIds`. 예약 표시 키워드 `$ara-scheduled` — 계약 2절 "보내기 취소 · 예약 발송" · "받는 사람별 결과" |
+| 보내기 취소 · 예약 발송 (9단계) | `modules/mail/jmap/pending-send.ts` · `jmap/envelope.ts` · `scheduled-message.controller.ts` · `scheduled-messages.service.ts` | 기다리는 곳은 엔진이다 — 제출의 FUTURERELEASE(`HOLDFOR` · `HOLDUNTIL`, 엔진 한도 7일), 취소는 `undoStatus: canceled` 뒤 그 메일을 임시보관함으로(`$draft` + `$ara-canceled`, 다시 취소해도 200). `pending-send.ts` 는 붙잡기 매개변수 · 기다리는 제출 찾기(`EmailSubmission/query` 의 `filter.after: 지금` — `undoStatus` 조건은 모든 제출을 훑는다, 정렬 이름 `sentAt`) · `pendingSend` 판정(pending 이면서 보낼 시각이 아직)이다. **발송은 늘 envelope 을 직접 준다**(`envelope.ts`) — 엔진이 받지 않는 주소(모르는 최상위 도메인 등)가 있으면 제출 전체를 거절하고 첫 주소 하나만 알려 주므로, 어댑터가 그 주소를 not-found 로 빼고 같은 메일을 다시 제출한다(한 차례에 하나 — 거절 글의 따옴표 토큰과 정확히 같은 주소부터, 20차례까지 · 발송 55초 안). **붙잡힌 메일은 취소로만 보낸편지함을 떠난다** — 한 통 · 여러 통 `PATCH`(옮기기 · 스팸) · `DELETE` · 영구 삭제 · 메일함 지우기 · 비우기 · 필터 적용이 엔진에 먼저 묻고(`pending-send.ts` 의 `readHeldEmails` — 읽지 못하거나 다 받았는지 응답의 total 로 확인하지 못하면 바꾸지 않고 `MAIL_001`, 닫힌 쪽으로), 막으면 `MAIL_015` · `failedIds` · `skippedIds`. 예약 표시 키워드 `$ara-scheduled`. **지금 보내기**(15단계 — `POST /api/scheduled-messages/{id}/release`, 어댑터 `releaseScheduledSend`): 그 메일 · 제출(envelope · 발신 ID)을 한 요청으로 읽어 상태를 가르고(`releaseStateOf` — 기다리는 예약 · 이미 지금 보냄 · 끊김 · 이미 보냄 · 예약 아님), envelope 을 먼저 정한 뒤 예약 제출을 취소하고(확인된 것만) **다른 요청으로** 같은 메일을 원래 envelope 그대로 다시 낸다 — MAIL FROM 의 붙잡기만 보내기 취소 초(`send-hold.ts`)로, 성공하면 예약 표시를 뗀다(`submitCall` 의 `extraPatch`). 엔진이 분명히 거절하면(SetError · 메서드 오류 · `isRequestRefused`) 한 번 더, 그래도 거절이면 임시보관함으로 되돌린 **뒤에만** `ScheduledSendReturnedToDraftsException`(서비스가 대용량 링크를 취소한 발송처럼 둔다). 결과를 모르면(시간 초과 · 연결 끊김 · 5xx) 다시 내지도 되돌리지도 않는다 — 한 번 다시 읽어 새 제출이 보이면 그 상태, 아니면 그냥 `MAIL_001`(메일은 보낸편지함에 그대로 — 같은 요청을 다시 받으면 끊긴 지금 보내기로 이어 낸다). 제출마다 남은 시간이 `MIN_SEND_WINDOW_MS` 보다 적으면 내지 않는다(그냥 `MAIL_001`), 다 보내면 링크의 보낸 때만 앞당긴다(끝나는 날은 그대로 — 덩이가 적었다). 같은 메일의 취소 · 지금 보내기는 `ScheduledMessagesService` 의 `inProgress` 로 한 번에 하나 — 계약 2절 "보내기 취소 · 예약 발송" · "받는 사람별 결과" |
 | 외부 이미지 중계 (9단계) | `modules/mail/images/` | `GET /api/mail-images/{token}`. 표 `mail-image-token.ts`(AES-256-GCM — 직원 · 원래 주소 · 1시간, 키는 프로세스가 뜰 때 무작위. 표 모양은 **짝: frontend `shared/utils/mail-html.ts` 의 `PROXIED_IMAGE_PATTERN`**), 주소 검사 `mail-image-url.ts` + `shared/utils/public-address.ts`(모든 주소가 공인일 때만 · 점 없는 이름은 묻지 않고 막는다), 받기 `mail-image-fetcher.ts`(다시 가기 3번 · 10초 · 5MB — Content-Length 가 있으면 그 크기로 한 번 잡는다), 연결 `node-image-transport.ts`(푼 주소로 고정 연결 · Host 는 원래 이름 · 쿠키 · Referer 없음, 이름 풀기는 c-ares `dns.Resolver` — 80 · 443 고정, 다른 포트 · DNS 서버는 테스트의 `forTesting()` 으로만), 형식 `mail-image-format.ts`(앞 바이트로 PNG · JPEG · GIF · WebP), 차례 `mail-image-proxy.service.ts`(서버 16 · 직원 6, 30초 · 200개까지 기다림 — 줄은 직원마다이고 받는 수가 가장 적은 직원부터 든다, 자리는 응답이 끝날 때까지 `releaseWhenDone`), `mail-image.controller.ts`(실패는 모두 404 를 직접 쓴다 — debug 로그만, IP 마다 1분 600회). 본문의 `<img src>` 를 중계 주소로 바꾸는 것은 `html/sanitize-mail-html.ts`(`externalImageSrc`) — 계약 2절 "외부 이미지 보기" |
-| 보낸 사람 차단 · 보내기 · 읽기 설정 (9단계) | `modules/mail/mail-block.controller.ts` · `mail-block.service.ts` · `mail-blocks.ts` · `modules/mail-user-settings` | 차단은 필터 · 부재중과 같은 Sieve 스크립트의 맨 앞(`jmap/sieve-script.ts`, 원본 판 2 는 차단이 있을 때만 — `jmap/filter-source.ts`). 검사 `mail-blocks.ts`(`@` 앞은 dot-atom · 64자, 여러 사람이 쓰는 메일 서비스 30개는 `mail.constants.ts` — **짝: frontend `shared/constants/mail-block.ts`**, 같은 글자 · 같은 차례 — 한쪽을 고치면 둘 다). 이미 있는 주소의 `POST` 는 꺼진 규칙을 켠다. 설정은 DB(표 `mail_settings` — 마이그레이션 `AddMailSettings`, 직원 주소마다 한 줄 · 없으면 처음 값), `MailUserSettingsService` 가 프로세스마다 60초 기억하고 DB 장애면 처음 값(10초 · `ask`)으로 — 메일 모듈이 발송(`undoSendSeconds`) · 읽기(`externalImages`) 때 읽는다 — 계약 2절 "보낸 사람 차단" · "보내기 · 읽기 설정" |
+| 보낸 사람 차단 · 보내기 · 읽기 설정 (9단계) | `modules/mail/mail-block.controller.ts` · `mail-block.service.ts` · `mail-blocks.ts` · `modules/mail-user-settings` | 차단은 필터 · 부재중과 같은 Sieve 스크립트의 맨 앞(`jmap/sieve-script.ts`, 원본 판 2 는 차단이 있을 때만 — `jmap/filter-source.ts`). 검사 `mail-blocks.ts`(`@` 앞은 dot-atom · 64자, 여러 사람이 쓰는 메일 서비스 30개는 `mail.constants.ts` — **짝: frontend `shared/constants/mail-block.ts`**, 같은 글자 · 같은 차례 — 한쪽을 고치면 둘 다). 이미 있는 주소의 `POST` 는 꺼진 규칙을 켠다. **받은편지함 정리**(15단계 — `POST /api/mail-block-runs`, `MailBlockRunController` · `MailService.runMailBlock` · 어댑터 `JmapFilterRunner.runBlock`): 필터 적용(7단계)과 같은 틀 — 차례 · cursor(`filter-run-cursor.ts` 의 `encodeBlockRunCursor` — 지문은 보낸 사람) · `BulkRun` · 같은 잠금 `filterRuns`, 요청이 도는 동안 그 직원의 스팸메일함도 `mailboxOperations` 로 잡는다(스팸메일함 비우기와 함께 돌지 않게 — 서로 `REQ_001`). 판정은 순수 함수 `mail-block-match.ts` — **짝: `jmap/sieve-script.ts` 의 `blockSection`**(엔진이 푼 From 주소 `header:From:asAddresses:all` 를 `address :all` · `:domain` 처럼, `i;ascii-casemap` — 엔진 검색은 넓게 잡아 쓰지 않는다), 할 일은 스팸메일함으로 + `$junk`. 설정은 DB(표 `mail_settings` — 마이그레이션 `AddMailSettings`, 직원 주소마다 한 줄 · 없으면 처음 값), `MailUserSettingsService` 가 프로세스마다 60초 기억하고 DB 장애면 처음 값(10초 · `ask`)으로 — 메일 모듈이 발송(`undoSendSeconds`) · 읽기(`externalImages`) 때 읽는다 — 계약 2절 "보낸 사람 차단" · "보내기 · 읽기 설정" |
 | 파일 저장 · 조각 올리기 (11단계) | `modules/file-storage` | `/api/file-uploads`(만들기 · 16MiB 조각 `PUT` · 끝내기 · 상태 · 지우기) · `/api/file-quota`. 조각은 `Content-Digest`(SHA-256)를 보고 `datasync` 뒤에 적는다, 같은 조각은 `ChunkGate`(프로세스 메모리)가 하나만 들인다, 조각 번호는 `file-id.pipe.ts`(매개변수 타입 `unknown` — 아래 점검 "경로 숫자"). 저장 포트 `FILE_BLOB_STORE` — 지금은 로컬 디스크 어댑터(named volume `/app/files`, 키는 서버가 만든 UUID 만 — `assertKey`). 보관량(직원 · 서버 총량 · 디스크 여유)은 만들기를 `pg_advisory_xact_lock` 안에서 센다(인스턴스를 늘려도 맞다). 끝내기는 `completion_started_at` · 상태 전이 결과를 본다. 악성 검사 `clamav-client.ts`(INSTREAM 직접 구현 — 판정 글은 `CLAMAV_REPLY` · `classifyClamavReply` 한 곳: 암호 · 압축 안 한도 → 검사하지 못함, 스트림 크기 한도 → 설정 오류로 검사 중 그대로 + error) · 검사 차례 `file-scan.service.ts`(DB pending · 동시 2) · 정리 cron `file-storage.cleanup.ts`. 확장자 허용 목록만 본다 — [[security]] "파일 업로드"의 예외. 계약 4절 |
 | 공개 링크 · 내려받기 (11단계) | `modules/file-sharing` · `modules/mail/mail-large-files.service.ts` · `large-file-block.ts` · `share-link.controller.ts` | 메일 한 통에 링크 하나(토큰 256비트 — DB 에는 SHA-256 만). 보낼 때 서버가 정화 · 지문 · 중복 확인 뒤 본문에 덩이를 넣는다(`large-file-block.ts` — 표시 `<!--ara-large-files:v1-->` · `data-ara-large-files` 는 서버만 넣고 두 정화기가 사용자 HTML 에서 지운다, 경계 `bodyQuoteStart`). 링크는 "확실한 실패"(`SendNotStartedException` — 형식으로 가른다)에서만 거둔다. 임시 저장은 머리글 `X-Ara-Large-Files`(보내는 메일에는 없다). 공개 경로 `/api/public-links/{token}`(로그인 없음) — 공개 호스트 미들웨어 `public-host.ts`(공개 호스트에서는 이 경로만 · 포털에서는 닫음, Host 를 스스로 정규화. 경로는 원문 · 라우터의 `req.path` · WHATWG URL · 퍼센트를 푼 원문 네 모양을 모두 본다 — 공개 호스트는 모두 공개 경로일 때만, 포털은 하나라도 공개 경로면 닫고, 읽지 못한 모양이 있으면 둘 다 닫는다. 라우터가 읽는 모양을 빼면 절대 주소 꼴 · `\` 요청이 막기를 지난다 — 2026-10-30), 파일 응답 `serveFile`(octet-stream · attachment · nosniff · CSP sandbox · no-store · Range `shared/utils/http-range.ts`), 받은 수는 조건부 UPDATE 한 문장, 종료 때 진행 중 응답을 `BeforeApplicationShutdown` 에서 끊는다. 읽기 화면의 `largeFiles` 는 표시 · 우리 출처 토큰 · 링크 주인 == From 이 모두 맞을 때만. 기간은 `shared/utils/kst-date.ts`(보낸 날부터 30일째 23:59:59 KST). 계약 4절 |
 | 계정 보안 (12단계) | `modules/account-security` · `modules/auth` 의 세션 부분 · `modules/mail/jmap/jmap-account-security.provider.ts` | 2단계 인증(엔진 TOTP — 계약 5절): 등록 `two-factor-enrollments.ts`(비밀 160비트 · 메모리 10분 · 직원마다 하나) · 켜기 · 끄기 `two-factor.service.ts`(엔진이 기준 — `enabledAt` 만 표 `two_factor_settings`) · **코드 가드 `two-factor-code-guard.ts`** — 실패 차지 · 다시 쓴 코드 확인 · (주소, 코드) "확인 중" 차지를 await 없이 한 번에 하고(같은 코드의 동시 요청이 둘 다 지나가지 않게), 받으면 그 자리에서 2분 기억한다. 결과는 받음 · 거절 · 쓰지 않음(`unused` — 새 비밀번호 거절처럼 코드와 상관없는 실패는 세지도 기억하지도 않는다). 코드 실패 카운터는 `login-attempt.service.ts`(같은 주소 15분 5 · 24시간 20 + IP 의 로그인 실패 한도). TOTP · base32 는 `shared/utils/totp.ts`(RFC 6238 — 새 의존성 없음, ±1 단계 상수 시간 비교). 잠금 `two-factor-locks.ts`(같은 직원의 2단계 바꾸기는 한 번에 하나). 로그인 2단계는 `auth.service.ts` — 앱 비밀번호 모양 거절 → 실패 차지 → 본인 Basic → **402 면 대리 접근 프로필로 정식 주소**(막는 계정의 별칭은 `AUTH_004`) → 코드는 엔진 `POST /api/auth`(mfaToken). 앱 비밀번호 `app-passwords.*`(엔진 `x:AppPassword` — 권한 `Replace` 셋, 직원마다 만들기는 한 번에 하나, 마지막 사용은 표 `app_password_usages` — 번호 · createdAt 이 같을 때만 잇는다, 비밀번호를 바꾸면 모두 지운다). 로그인된 브라우저 `modules/auth/auth-sessions.*`(경로 `/api/auth/sessions` — 지금 세션은 `AuthService.requestSessionId`: 웹은 리프레시 쿠키 · 앱은 액세스 토큰의 sid) · **끊은 세션 기억 `revoked-sessions.ts`**(액세스 토큰의 `sid` — 1시간, 기동 때 DB 에서 채운다, 끊는 모든 길이 `revokeWhere` 한 곳을 지난다 — 가드가 막고 실시간 알림은 다음 ping 때 닫는다). User-Agent → 짧은 이름 `shared/utils/user-agent.ts`(앱 이름 `ARA SYSTEM 앱` 은 세션의 `client` · 로그인 기록의 `method` 가 app 일 때만 `describeAppUserAgent` 로 — 웹 세션이 앱 꼴 UA 를 보내면 브라우저 null. 운영체제는 앱 UA `ARASYSTEM-App/<판> (Android <판>; <기종>)` 의 첫 괄호 칸 — 짝: flutter `kUserAgentProduct`). 세션 목록 항목에 `client`(web · app). 로그인 기록 `login-events.*`(표 `login_events` — 방식 webmail · app · imap · smtp, 90일 정리 cron `login-events.cleanup.ts`, 위치 커서 `login-event-cursor.ts`). 엔진 웹훅 `mail-engine-events.*` — 본문을 받기 전에 소켓 주소(`APP_NETWORK_SUBNET` — `shared/utils/cidr.ts`)와 키 유무를 보고, 원문 HMAC 을 상수 시간으로, 이 경로만 JSON 한도를 따로(4MB · 배열 10,000 · 값 200,000), 겹침은 내용 지문(`dedupe_key` 유일 인덱스 — 엔진은 다시 보낼 때 id 를 새로 붙인다), 1,000행씩 `ON CONFLICT DO NOTHING`, DB 실패는 5xx(엔진이 다시 보낸다), 빈 묶음 200(setup 의 받는 곳 확인). 마이그레이션 `AddAccountSecurity` |
@@ -249,8 +249,10 @@ SwaggerModule.setup('api-docs', app, document);
   > ⚠️ 인스턴스를 늘리면 **프로세스 메모리에 둔 한도·잠금**도 함께 옮겨야 한다 — 그대로 두면 인스턴스마다 따로 센다:
   > 로그인 실패 카운터(`modules/auth/fixed-window-counter.ts` → `INCR`+`PEXPIRE` 를 한 Lua 스크립트로),
   > 같은 주소의 진행 중 로그인·비밀번호 변경·같은 `Idempotency-Key` 의 진행 중 발송(`SET NX PX` 잠금), `@nestjs/throttler` 저장소,
-  > 같은 직원 · 같은 메일함의 오래 걸리는 처리(`mail.service.ts` 의 `mailboxOperations` — 그대로면 두 인스턴스가 같은 휴지통을 함께 비우며 서로 어긋난다 → 잠금),
-  > 같은 직원의 이미 받은 메일에 필터 적용(`mail.service.ts` 의 `filterRuns` — 그대로면 두 인스턴스가 같은 받은편지함을 함께 읽으며 서로 옮긴 메일 때문에 자리가 어긋난다 → 잠금),
+  > 같은 직원 · 같은 메일함의 오래 걸리는 처리(`mail.service.ts` 의 `mailboxOperations` — 그대로면 두 인스턴스가 같은 휴지통을 함께 비우며 서로 어긋난다 → 잠금.
+  > 15단계부터 하위까지 지우기는 나무의 메일함 모두를, 옮기기는 그 메일함과 새 상위를, 차단 정리는 그 직원의 스팸메일함을 함께 잡는다 — 그대로면 다른 인스턴스에서 스팸메일함을 비우며 옮겨 넣은 메일을 지운다),
+  > 같은 직원의 받은편지함 정리 — 이미 받은 메일에 필터 적용 · 차단할 때 받은편지함 정리(15단계)(`mail.service.ts` 의 `filterRuns` — 둘이 같은 잠금이다. 그대로면 두 인스턴스가 같은 받은편지함을 함께 읽으며 서로 옮긴 메일 때문에 자리가 어긋난다 → 잠금),
+  > 같은 메일의 예약 취소 · 지금 보내기(15단계 — `scheduled-messages.service.ts` 의 `ScheduledMessagesService.inProgress` — 그대로면 두 인스턴스가 같은 예약을 함께 지금 보내 두 번 내거나, 취소와 지금 보내기가 엇갈려 임시보관함으로 되돌린 메일을 보낸다 → 잠금),
   > 사용자별 서명 그림 올리기 차례(`mail-signature.service.ts` 의 `uploadQueues` — 그대로면 동시 업로드가 보관 상한을 넘을 수 있다 → 잠금),
   > 받는 사람 추천 캐시(`recipient-suggestions.service.ts` — 틀리지는 않지만 보낸 직후 다른 인스턴스가 10분까지 옛 목록을 준다 → 공유 캐시나 무효화 알림),
   > 실시간 알림의 직원당 연결 5개(`mail-events.service.ts` — 기능은 맞지만 인스턴스마다 따로 세고, 엔진 연결도 인스턴스마다 하나씩 생긴다 → 필요하면 공유 셈),
diff --git a/.claude/skills/vue3/SKILL.md b/.claude/skills/vue3/SKILL.md
index 476e8fc..6f1c67a 100644
--- a/.claude/skills/vue3/SKILL.md
+++ b/.claude/skills/vue3/SKILL.md
@@ -9,9 +9,9 @@ description: Vue 3 프론트엔드(frontend/) 개발 규칙 — Composition API
 
 ---
 
-## 템플릿 기본 제공 골격
+## 기본 골격
 
-> 이 템플릿은 아래를 **기본 제공**한다. 새 코드는 이 파일들의 패턴을 복제한다(같은 역할을 새로 만들지 말 것).
+> 아래가 이미 있다. 새 코드는 이 파일들의 패턴을 복제한다(같은 역할을 새로 만들지 말 것).
 
 | 제공 항목 | 위치 | 비고 |
 | --- | --- | --- |
@@ -29,7 +29,7 @@ description: Vue 3 프론트엔드(frontend/) 개발 규칙 — Composition API
 | 인증 스토어 | `src/stores/auth.store.ts` | 로그인 사용자(email·name) · 세션 복원(`restore`) · 만료 상태(`expireSession`) · 로그아웃 상태(`clearAuth()` 가 켜는 `signedOut` — 다시 로그인할 때까지 늦게 온 갱신·복원 결과를 쓰지 않는다) |
 | 공통 컴포넌트 예제 | `src/components/BaseButton.vue` | 재사용 컴포넌트 기준 패턴(타입 Props/Emits·scoped·rem·a11y) |
 | 라우터 | `src/router/index.ts` · 라우트 표 `src/router/routes.ts`(라우터와 라우트 테스트가 함께 쓴다) | lazy import + 첫 네비게이션 전 세션 복원 + `requiresAuth` 가드(미인증 → `{ name: 'login', query: { redirect } }`) |
-| 전역 셸 | `src/components/shell/AppShell.vue` | 앱 레일 + 상단 바 + 모듈 영역. 레일 모듈 목록은 `src/shared/constants/app-modules.ts` 하나 |
+| 전역 셸 | `src/components/shell/AppShell.vue` | 앱 레일 + 상단 바 + 모듈 영역. 레일 모듈 목록은 `src/shared/constants/app-modules.ts` 하나. 상단 바(`AppTopBar.vue` — 15단계): 머리글자 · [로그아웃]은 줄지 않고(nowrap) 이름 · 주소 칸만 줄어 "…"(title "이름 (주소)"), 화면 폭 480(30rem) 이하에서 주소를 감춘다 — 줄 수 · 차례는 그대로이고 검색 칸(search 슬롯 · 통합 검색)도 `min-width: 0` 으로 바 안쪽에 맞게 준다(360 에서 넘쳤다). 앱 틀은 잘못 놓은 파일을 무시한다(15단계 — `composables/useWindowFileDrop.ts` 의 `useIgnoredWindowFileDrop`: 받는 화면(`useWindowFileDrop` — 쓰기 화면 · 서명 설정)이 떠 있으면 그 화면이 받는다) |
 | 디자인 토큰·글꼴 | `src/styles/tokens.css` · `src/styles/base.css` | 색·간격·글자 크기 변수. 글꼴은 npm `pretendard` 자체 호스팅(`main.ts` 에서 import — CSP `font-src 'self'`) |
 | 브랜드 자산 | `src/assets/brand/` · `src/shared/constants/brand.ts` | 흰 로고(전체·ARA 마크). 원본은 `docs/brand/`. 탭 · 홈 화면 아이콘(`favicon-16.png` · `favicon-32.png` · `apple-touch-icon.png`)은 `index.html` 이 `/src/assets/brand/…` 로 걸어 빌드가 `/assets/` 의 해시 파일로 바꾼다 — 배포 직후 새 아이콘이 보이고, 공개 내려받기 호스트도 `/assets/` 는 연다. `public/favicon.ico` 는 주소를 직접 묻는 클라이언트용. 모양 · 크기 규칙은 디자인 README 머리 |
 | 토스트 | `src/stores/toast.store.ts` · `src/components/feedback/ToastHost.vue` | 오류는 `useApi.ts` 의 `showErrorUI()`, 성공 안내는 `composables/useToast.ts`(API 가 아닌 화면 쪽 실패 — 예: 브라우저가 알림을 막음 · 보냈지만 받는 사람 일부가 받지 못함(+ [보낸편지함 보기], 문장은 `shared/utils/mail-send-result.ts`) — 는 `useToast().error()`). 알림 안의 단추는 `{ label, run }`(예: 임시 저장본 [되돌리기]), 이동 링크는 지금처럼. 단추가 있는 알림은 10초(`TOAST_ACTION_DURATION_MS`), 마우스 · 초점이 있는 동안은 `hold`·`release` 로 멈춘다. **단추는 띄운 세션에서만 움직인다** — `useToast` 가 `authStore.generation` 에 묶고, 로그아웃 · 세션 만료 · 다른 계정 로그인 때 단추가 있는 알림을 닫는다(메일 id 는 계정마다 겹칠 수 있다). 오래 걸리는 처리는 **진행 알림** `useToast().progress(글)` — 저절로 닫히지 않고(넘쳐도 다른 알림부터 닫는다) 글을 고치다가(`update`) 끝나면 그 자리에서 결과가 된다(`succeed` · `fail` — `toast.store` 의 `update`). 결과에도 단추를 붙일 수 있다(`succeed(글, action)` · `fail(글, action)` — 7단계 필터 적용의 [{메일함} 보기] · [다시 시도], 시간 · 세션 묶기는 다른 단추와 같다). 진행 알림도 세션이 바뀌면 닫는다 |
@@ -37,12 +37,12 @@ description: Vue 3 프론트엔드(frontend/) 개발 규칙 — Composition API
 | 외부 HTML 격리 렌더링 | `src/components/mail/MailBodyFrame.vue` · `src/shared/utils/mail-html.ts` | 메일 본문 등 외부 HTML 은 이 컴포넌트로만 그린다 (sandbox·내부 CSP 근거는 파일 머리말). 보여 줄 HTML 고르기는 `displayedHtmlBody()` 하나다 — null 이거나 공백뿐이면 textBody (읽기 화면·인용 공용, 서버의 `isBodyTruncated` 와 같은 규칙) |
 | 메일 모듈 | `src/pages/mail/*` · `src/components/mail/*` | API 계약 `docs/mail/api-contract.md`, 디자인 원본 `docs/design/webmail/` |
 | 콘텐츠 열 토큰 | `src/styles/tokens.css` 의 `--content-*` · `--content-toolbar-start` | 읽기·쓰기 화면이 같은 최대 폭·여백·32px 시작선을 쓴다 (새 화면도 이 토큰으로) |
-| 밀도 예외 크기 | `src/styles/tokens.css` 의 `--size-compact-control` · `--size-segment-item` · `--size-segment-item-lg` · `--size-editor-tool` · `--size-editor-menu-item` · `--size-editor-swatch-cell` · `--size-editor-table-cell` · `--table-col-check` · `--size-row-check` · `--size-search-clear-width`/`-height` · `--size-notice-bar` · `--size-mailbox-more` · `--size-notice-action` · `--size-filter-control` · `--size-filter-remove` (주석에 "밀도 예외") | 클릭 영역 44px 기준의 의도된 예외(목록 표의 별·보기 전환, 설정 화면의 미리 보기 전환 36(`.segmented`)·서명 그림 크기 줄 36(작게·보통·원본·그림 빼기), 편집기 툴바 버튼 40×44·메뉴 항목 40·색 견본 40·표 고르기 칸 22, 3단계의 목록 표 고르기 칸 32·분할 행 고르기 칸 폭 36·검색 칸 ✕ 40×38·새 메일 알림 줄 40·검색 범위 전환 36·이동 메뉴 항목 40, 4단계의 메일함 행 ⋯ 32×40 · ⋯ 메뉴 항목 40, 5단계의 목록 위 알림 권하기 줄 40 · 줄 안의 단추 36, 6단계의 필터 조건 칸 40 · 조건 ✕ 36 · 필터 행 ▲▼ 32×40 · 켜기 스위치 누르는 곳 40×44 · 고치기 창 안 [다시 불러오기] 36, 8단계의 패널 그룹 줄 ⋯ 32×40 · 연락처 창의 줄 · 칸 40 · 줄 ✕ 36×40 · 구성원 넣기 창 전환 36 · 찾기 칸 40 — 새 토큰 없이 위 것을 다시 쓴다, 9단계의 읽기 화면 안내 줄 단추([이미지 보기] · [차단 풀기] · [고치기] · [예약 취소]) · 차단한 주소 줄의 [차단 풀기] 36(`--size-notice-action`) — 역시 새 토큰 없음, 14단계의 검색 칸 [조건] 32(`--size-compact-control`) · 조건 패널의 칸 · 단추 40(`--size-filter-control`) · 조건 줄 40 · 줄 안 [조건 지우기] 36 · 같은 대화 펼친 줄의 [답장] · [이 메일만 열기] 36 · 목록 머리 [대화로 묶기] 36(`--size-notice-action`) — 역시 새 토큰 없음, tokens.css 주석)에만 쓴다 — 사용자 확정(캔버스). 그 밖의 `--size-editor-*`(툴바 높이·글꼴 단추·본문 최소 높이 등)는 예외가 아니라 보통 크기다 |
+| 밀도 예외 크기 | `src/styles/tokens.css` 의 `--size-compact-control` · `--size-segment-item` · `--size-segment-item-lg` · `--size-editor-tool` · `--size-editor-menu-item` · `--size-editor-swatch-cell` · `--size-editor-table-cell` · `--table-col-check` · `--size-row-check` · `--size-search-clear-width`/`-height` · `--size-notice-bar` · `--size-mailbox-more` · `--size-notice-action` · `--size-filter-control` · `--size-filter-remove` (주석에 "밀도 예외") | 클릭 영역 44px 기준의 의도된 예외(목록 표의 별·보기 전환, 설정 화면의 미리 보기 전환 36(`.segmented`)·서명 그림 크기 줄 36(작게·보통·원본·그림 빼기), 편집기 툴바 버튼 40×44·메뉴 항목 40·색 견본 40·표 고르기 칸 22, 3단계의 목록 표 고르기 칸 32·분할 행 고르기 칸 폭 36·검색 칸 ✕ 40×38·새 메일 알림 줄 40·검색 범위 전환 36·이동 메뉴 항목 40, 4단계의 메일함 행 ⋯ 32×40 · ⋯ 메뉴 항목 40, 5단계의 목록 위 알림 권하기 줄 40 · 줄 안의 단추 36, 6단계의 필터 조건 칸 40 · 조건 ✕ 36 · 필터 행 ▲▼ 32×40 · 켜기 스위치 누르는 곳 40×44 · 고치기 창 안 [다시 불러오기] 36, 8단계의 패널 그룹 줄 ⋯ 32×40 · 연락처 창의 줄 · 칸 40 · 줄 ✕ 36×40 · 구성원 넣기 창 전환 36 · 찾기 칸 40 — 새 토큰 없이 위 것을 다시 쓴다, 9단계의 읽기 화면 안내 줄 단추([이미지 보기] · [차단 풀기] · [고치기] · [예약 취소]) · 차단한 주소 줄의 [차단 풀기] 36(`--size-notice-action`) — 역시 새 토큰 없음, 14단계의 검색 칸 [조건] 32(`--size-compact-control`) · 조건 패널의 칸 · 단추 40(`--size-filter-control`) · 조건 줄 40 · 줄 안 [조건 지우기] 36 · 같은 대화 펼친 줄의 [답장] · [이 메일만 열기] 36 · 목록 머리 [대화로 묶기] 36(`--size-notice-action`) — 역시 새 토큰 없음, 15단계의 같은 대화 [모두 펼치기] · 펼친 줄 머리 [답장] 36(`--size-notice-action`) — 역시 새 토큰 없음, tokens.css 주석)에만 쓴다 — 사용자 확정(캔버스). 그 밖의 `--size-editor-*`(툴바 높이·글꼴 단추·본문 최소 높이 등)는 예외가 아니라 보통 크기다 |
 | 사용자별 화면 설정 | `src/stores/mail-view.store.ts` | localStorage(키에 사용자 email, try/catch, 실패 시 기본값). 서버 설정 API 가 생기면 교체 |
 | 화면 이동 규칙 | `src/composables/useMailNavigation.ts` | 이전/다음은 replace, "목록으로"는 뒤로 가기 또는 replace (기록이 쌓이지 않게) |
 | 발송 키 규칙 | `src/shared/utils/idempotency-key.ts` 의 `shouldRenewSendKey()` | `Idempotency-Key` 는 성공과 `MAIL_005` 때만 바꾼다 — 그 밖의 실패 뒤 다시 보내기는 같은 키 (계약 2절 "발송 본문"). UUID 만들기는 `shared/utils/uuid.ts` 하나(필터 id 와 공용 — `crypto.randomUUID` 가 없으면 대체 경로) |
 | 첨부 사전 검사 | `src/shared/utils/mail-attachment.ts` 의 `precheckAttachment()` | 형식·파일당·합계 한도(`mail.store` 의 `attachmentMaxBytes`·`attachmentTotalMaxBytes`, 서버 값이 없으면 대체값). 넘는 파일은 올리지 않는다 |
-| 메일 본문 편집기 | `src/components/mail/editor/` — `MailEditor.vue` (쓰기 화면이 `defineAsyncComponent` 로 불러온다) | TipTap core (MIT 무료 패키지만, `@tiptap/*` 는 모두 같은 버전으로 고정). 툴바 배치·좁은 폭에서 접는 순서·단축키는 `docs/design/webmail/README.md` "메일 쓰기". 보낼 모양은 `mail-serialize.ts` — 서식 본문 `bodyHtml`(기본 글꼴 div, 인라인 style) + 텍스트 대체 본문 `body` (계약 2절 "서식 본문"). 답장·전달 초안 한도는 `fit-draft.ts`(처음 맞출 때 내 글 몫 5%를 남기고, 보내기 직전 `getContentForSend()` 가 다시 재서 인용을 더 줄인다 — 내 글만으로 넘으면 보내지 않고 칸 아래에 알린다), 붙여 넣거나 끌어다 놓은 파일은 첨부로(`shared/utils/editor-files.ts`, 화면 어디에 놓아도 — `composables/useWindowFileDrop.ts`). **읽어 들이는 style 값은 서버 정화와 같은 형식만** 받는다 — 규칙 `shared/utils/outgoing-html-rules.ts`(짝: backend `sanitize-outgoing-html.ts`, 같은 표본 표 `test-utils/outgoing-style-samples.ts` — 한쪽을 고치면 둘 다), 적용 `editor/mail-format-extensions.ts`. 편집기 청크를 못 받으면 `ComposeEditorLoadError.vue`("다시 시도"), 단축키 표기는 플랫폼별(`shared/utils/keyboard-shortcut.ts`). **그림은 서명 그림만** 받는다 — 노드 `editor/signature-image.ts`(쓰기 본문·서명 칸 공용, 규칙은 `outgoing-html-rules.ts` 의 그림 부분 — 짝: backend `html/signature-images.ts`·`keepSignatureImage`, 표본 `IMAGE_SAMPLES`). 메뉴(`editor/EditorMenu.vue` + `EditorPopup.vue` — 이동 ▾ · 메일함 ⋯ · 읽기 화면 ⋯ 도 같은 부품)의 꺼진 항목은 `disabled` 가 아니라 `aria-disabled` — 화살표로 가서 초점은 받되 고를 수 없다(WAI-ARIA 메뉴). 누를 수 없는 까닭은 항목의 `note`(이름 아래 작은 글, `aria-describedby`) |
+| 메일 본문 편집기 | `src/components/mail/editor/` — `MailEditor.vue` (쓰기 화면이 `defineAsyncComponent` 로 불러온다) | TipTap core (MIT 무료 패키지만, `@tiptap/*` 는 모두 같은 버전으로 고정). 툴바 배치·좁은 폭에서 접는 순서·단축키는 `docs/design/webmail/README.md` "메일 쓰기". 보낼 모양은 `mail-serialize.ts` — 서식 본문 `bodyHtml`(기본 글꼴 div, 인라인 style) + 텍스트 대체 본문 `body` (계약 2절 "서식 본문"). 답장·전달 초안 한도는 `fit-draft.ts`(처음 맞출 때 내 글 몫 5%를 남기고, 보내기 직전 `getContentForSend()` 가 다시 재서 인용을 더 줄인다 — 내 글만으로 넘으면 보내지 않고 칸 아래에 알린다), 붙여 넣거나 끌어다 놓은 파일은 첨부로(`shared/utils/editor-files.ts`, 화면 어디에 놓아도 — `composables/useWindowFileDrop.ts`). **읽어 들이는 style 값은 서버 정화와 같은 형식만** 받는다 — 규칙 `shared/utils/outgoing-html-rules.ts`(짝: backend `sanitize-outgoing-html.ts`, 같은 표본 표 `test-utils/outgoing-style-samples.ts` — 한쪽을 고치면 둘 다), 적용 `editor/mail-format-extensions.ts`. 편집기 청크를 못 받으면 `ComposeEditorLoadError.vue`("다시 시도"), 단축키 표기는 플랫폼별(`shared/utils/keyboard-shortcut.ts`). **그림은 서명 그림만** 받는다 — 노드 `editor/signature-image.ts`(쓰기 본문·서명 칸 공용, 규칙은 `outgoing-html-rules.ts` 의 그림 부분 — 짝: backend `html/signature-images.ts`·`keepSignatureImage`, 표본 `IMAGE_SAMPLES`). 메뉴(`editor/EditorMenu.vue` + `EditorPopup.vue` — 이동 ▾ · 메일함 ⋯ · 읽기 화면 ⋯ 도 같은 부품)의 꺼진 항목은 `disabled` 가 아니라 `aria-disabled` — 화살표로 가서 초점은 받되 고를 수 없다(WAI-ARIA 메뉴). 누를 수 없는 까닭은 항목의 `note`(이름 아래 작은 글, `aria-describedby`). 메뉴 · 팝오버의 좌우는 바라는 끝(`align`)으로 그린 뒤 보이는 영역 밖으로 넘치면 덜 넘치는 반대 끝에 맞춘다(15단계 — `EditorPopup` 이 그린 직후 · 초점을 주기 전에 스스로 잰다: `composables/usePopupPlacement.ts` 의 `measurePopupAlign` · 판단 `shared/utils/popup-placement.ts` 의 `popupAlignFor`). 항목은 들여쓰기(`depth` — 10 · 28 · 44 · 56)와 따로 읽힐 이름(`ariaLabel`)을 받는다 |
 | 임시 저장 | `src/composables/useDraftSaving.ts` · `components/mail/ComposeDraftStatus.vue` · `composables/useComposeDraftLink.ts`(주소 맞추기 · 옛 id 기록 · 보내지 못한 메일을 저장본으로) · `composables/useDraftTrash.ts`(휴지통 · 되돌리기) | 3초 멈춤 · 쉬지 않고 쓰면 30초 · 10초 간격 · 한 번에 하나(계약 2절 "임시 저장", 상수 `shared/constants/mail.ts` 의 `DRAFT_*`). `MAIL_008`·PUT 404 는 막지 않고 POST 로 새로. 찾지 못한 첨부가 남았거나 본문이 한도를 넘는 동안은 저장하지 않고, 실을 수 없는 첨부가 든 남의 저장본은 첫 저장을 POST 로(원본 보존). 보내기·버리기 전에는 `suspend`+`settle` — 보내기는 settle 뒤 첨부 상태를 다시 본다. 저장할 때마다 주소를 `?draft=<새 id>` 로 맞추고(떠나기 전 저장 제외), 옛 id 로 돌아오면 `mail.store` 의 `latestDraftId()` 로 마지막 저장본을 연다. 쓰기 화면 휴지통은 DELETE 가 아니라 PATCH(휴지통으로 이동) — 이미 휴지통인 메일은 DELETE 가 영구 삭제한다 |
 | 받는 사람 자동 완성 | `src/composables/useRecipientSuggestions.ts` · `shared/utils/recipient-match.ts` · `components/mail/RecipientField.vue` · `RecipientSuggestionList.vue` | 검색어는 input · compositionupdate 의 `target.value`(한글 조합 중 글자 포함)로 따로 두고, 칩 확정은 v-model. Enter 등의 조합 판정은 `shared/utils/keyboard-shortcut.ts` 의 `isImeComposing()`(`isComposing` 또는 keyCode 229 — Safari · macOS) — 새 입력 칸의 Enter 처리도 이것을 쓴다. 쓰기 화면을 열 때 `limit=100` 한 번, 모자랄 때만 250ms 뒤 `q` 로(8단계부터 초성 · 조합 중 글자도 묻는다 — 서버의 q 가 같은 맞추기다: 짝 backend `modules/mail/recipient-match.ts`, 같은 표본 표 `test-utils/recipient-match-samples.ts` — 한쪽을 고치면 둘 다. 늦은 응답은 버린다). 초성 검색·맞은 글자 강조는 `recipient-match.ts`(강조는 `<strong>` 조각 — v-html 없음). combobox 접근성(aria-activedescendant · listbox · 조합 중 Enter 무시), 완전한 주소면 미리 고르지 않는다 |
 | 메일 서명 | `src/stores/mail-signature.store.ts` · `components/mail/editor/signature/` · `shared/utils/mail-signature.ts` · `pages/settings/` | 서명은 메일 화면에 들어올 때 받아 두고 쓰기 화면이 넣는다(새 메일은 끝, 답장·전달은 인용 위 — 이어 쓰기는 다시 넣지 않는다). 설정 화면(`SettingsLayout.vue` 왼쪽 메뉴 — 묶음 · 항목은 `shared/constants/settings-menu.ts` + `MailSignaturePage.vue`)은 들어올 때마다 새로 받는다. 미리 보기는 편집기 스키마의 `DOMSerializer` 로 그린다. 그림 3장은 서명 칸 안의 그림 수로(서버 보관 상한 10장은 서버가 센다) |
@@ -53,11 +53,11 @@ description: Vue 3 프론트엔드(frontend/) 개발 규칙 — Composition API
 | 실시간 테스트 도구 | `src/test-utils/event-stream.ts`(가짜 SSE 서버) · `notification.ts`(가짜 Notification) · `web-locks.ts`(가짜 `navigator.locks` · BroadcastChannel) | 실시간 · 알림 테스트는 이것들과 손으로 돌리는 시계(`manual-clock.ts`)로 — 진짜 타이머 · 고정 대기 없이 |
 | 메일 검색 | `src/components/mail/MailSearchBox.vue`(상단 바의 search 슬롯) · `composables/useMailSearchNavigation.ts` · `MailSearchHeader.vue` · `MailSearchScope.vue` · `MailSearchEmpty.vue` · 라우트 `/mail/search` · `/mail/search/:messageId` | Enter 로만 찾는다(`isImeComposing()` 이면 무시), ✕ · Esc 는 검색을 시작한 메일함으로. 주소 `?q=…&in=<메일함 id \| all>` — 검색 화면 안의 다시 찾기 · 범위 바꾸기는 replace. 서버와 같은 한도(200자 · 낱말 8개)를 먼저 본다. 조사 처리 · 한계는 서버 몫(계약 2절 "검색") |
 | 메일 검색 — 14단계 (조건 · 강조 · 준비 중) | `src/components/mail/MailSearchConditions.vue`(조건 패널 — 칸 `MailSearchConditionFields.vue` · 기간 `MailSearchPeriodField.vue` · [조건] `MailSearchConditionsToggle.vue`, 고치는 값 `composables/useSearchConditionsDraft.ts` · 열고 닫기 `useSearchConditionsPopup.ts`) · `MailSearchConditionLine.vue`(조건 줄) · `MailSearchNotices.vue`(준비 중 · 한 글자 안내) · `MailSearchMore.vue`([더 찾기]) · `HighlightedText.vue` · `shared/utils/mail-search.ts`(조건 ↔ 주소 ↔ API · 기간 · 조건 줄 글) · `search-highlight.ts` · `search-match.ts` · `shared/constants/mail-search.ts` | 조건 이름 · 화면 주소(`since` · `until` 은 브라우저 시간대 날짜 · 양 끝 포함, 첨부 `attachment=1`) · 이어 찾기(`MAIL_SEARCH_FILL_MAX_REQUESTS` 5번)는 계약 2절 "검색 — 14단계"의 클라이언트 줄. **`search-match.ts` 는 backend `shared/utils/search-query.ts` · `search-text.ts` · `subject-base.ts` 와 짝** — 같은 표본 표 `test-utils/search-text-samples.ts`(backend `test/search-text-samples.ts` 와 행 · 차례까지 같다, 보이지 않는 글자는 `\u` 로 적는다 — 한쪽을 고치면 둘 다). 맞은 말은 `HighlightedText` 가 글 조각 + `<mark>` 로 그린다(v-html 없음 — 위치가 글 밖 · 거꾸로 · 정수가 아니면 버리고, 서로게이트 쌍을 가르지 않는다). **강조가 든 응답은 보이기만 한다** — `openMessage(id, highlight)` 는 강조 쿼리가 다르면 다시 받고, 답장 · 전달 · 인쇄 · 예약 · 대용량 첨부 다시 받기는 강조 쿼리 없이 받는다. 손으로 고친 주소도 패널과 같은 검사(8낱말 넘으면 묻지 않고 "찾을 말이 너무 많습니다"). 강조 노랑은 `--color-search-mark` — 본문 틀(`mail-html.ts`)의 같은 값과 짝. 미리 보기 줄(회색 글) 안의 강조만 글자를 `--color-text-secondary` 로 진하게(노랑 위 대비 — `MessageListItem.vue`). 패널의 [조건 지우기]는 칸만 비운다 — 패널은 열린 채 · 찾지 않음, 걸린 조건은 [찾기] · 조건 줄의 [조건 지우기]가 뺀다(2026-11-07) |
-| 같은 대화 (14단계) | `src/components/mail/MessageConversation.vue`(읽기 화면 첨부 아래 칸) · `ConversationMessageRow.vue`(줄) · `ConversationMessagePanel.vue`(펼친 안) · `stores/mail/conversation.ts` · `composables/useConversationSync.ts`(언제 받을지 — 시계 주입) · `shared/utils/mail-conversation.ts`(이름 자리 · 쪽 맞추기 · 갈 곳) · `shared/constants/mail-conversation.ts` · `shared/utils/format.ts` 의 `formatConversationTime` | 받기 · 다시 받기는 계약 2절 "대화 — 14단계"의 클라이언트 줄(100통 · 이어 묻기 5번 · [더 보기], 실패는 칸 안 안내 — 404 면 칸 없음). **다시 받기 판정은 `mail.store` 의 `mailboxTotalsKey`**(메일함마다 `id:totalCount` — 바뀔 때만 `requestConversationRefresh()`, MailLayout 의 바뀜 소식에서는 부르지 않는다 — 읽음 · 중요 표시만 바뀐 소식으로 대화를 다시 받지 않게 — 칸의 안 읽은 줄은 목록처럼 굵게 그리고, 이 탭이 바꾼 읽음은 `list.ts` 의 `watchLocalReads` 로 바로 적는다: 받는 동안 바꾼 것은 `conversation.ts` 의 `withLocalReads` 가 받은 값보다 앞세우고, 다른 탭의 읽음은 다음 받기 때 — 2026-11-07), 간격은 받기가 끝난 때(`conversationBusy` 가 꺼질 때)부터 10초. 펼친 본문은 `MailBodyFrame` · 강조 쿼리 없이, 안 읽은 메일은 `markRead`(`Promise<boolean>` — 같은 목록의 `pendingFlags` 에 같은 읽음이 있으면 건너뛴다)로. `closeMessage` 가 칸도 비운다. 초점은 누른 단추가 사라지면 줄의 펼침 단추 → 새 [다시 시도] → 칸 h3(`tabindex="-1"`) → 칸이 없어지면 읽기 화면에 `settled`. 상태 영역은 늘 두고 글만 바꾼다(다시 실패해도 읽게). [이 메일만 열기]는 분할 보기 push · 목록 보기 replace(layout prop). 줄 차례는 `orderHeldLast`(붙잡힌 메일은 끝 — 보낼 시각 차례), 미리 보기는 `previewWithoutOwnQuote`(우리 원문 인용 머리부터 잘라 냄 — `mail-conversation.ts`), 펼친 줄의 첨부 수 안내는 `ConversationMessagePanel` |
+| 같은 대화 (14단계) | `src/components/mail/MessageConversation.vue`(읽기 화면 첨부 아래 칸) · `ConversationMessageRow.vue`(줄) · `ConversationMessagePanel.vue`(펼친 안) · `stores/mail/conversation.ts` · `composables/useConversationSync.ts`(언제 받을지 — 시계 주입) · `shared/utils/mail-conversation.ts`(이름 자리 · 쪽 맞추기 · 갈 곳) · `shared/constants/mail-conversation.ts` · `shared/utils/format.ts` 의 `formatConversationTime` | 받기 · 다시 받기는 계약 2절 "대화 — 14단계"의 클라이언트 줄(100통 · 이어 묻기 5번 · [더 보기], 실패는 칸 안 안내 — 404 면 칸 없음). **다시 받기 판정은 `mail.store` 의 `mailboxTotalsKey`**(메일함마다 `id:totalCount` — 바뀔 때만 `requestConversationRefresh()`, MailLayout 의 바뀜 소식에서는 부르지 않는다 — 읽음 · 중요 표시만 바뀐 소식으로 대화를 다시 받지 않게 — 칸의 안 읽은 줄은 목록처럼 굵게 그리고, 이 탭이 바꾼 읽음은 `list.ts` 의 `watchLocalReads` 로 바로 적는다: 받는 동안 바꾼 것은 `conversation.ts` 의 `withLocalReads` 가 받은 값보다 앞세우고, 다른 탭의 읽음은 다음 받기 때 — 2026-11-07), 간격은 받기가 끝난 때(`conversationBusy` 가 꺼질 때)부터 10초. 펼친 본문은 `MailBodyFrame` · 강조 쿼리 없이, 안 읽은 메일은 `markRead`(`Promise<boolean>` — 같은 목록의 `pendingFlags` 에 같은 읽음이 있으면 건너뛴다)로. `closeMessage` 가 칸도 비운다. 초점은 누른 단추가 사라지면 줄의 펼침 단추 → 새 [다시 시도] → 칸 h3(`tabindex="-1"`) → 칸이 없어지면 읽기 화면에 `settled`. 상태 영역은 늘 두고 글만 바꾼다(다시 실패해도 읽게). [이 메일만 열기]는 분할 보기 push · 목록 보기 replace(layout prop). 줄 차례는 `orderHeldLast`(붙잡힌 메일은 끝 — 보낼 시각 차례), 미리 보기는 `previewWithoutOwnQuote`(우리 원문 인용 머리부터 잘라 냄 — `mail-conversation.ts`), 펼친 줄의 첨부 수 안내는 `ConversationMessagePanel`. 15단계: 칸 머리 오른쪽 [모두 펼치기] · [모두 접기](36 — `MAIL_CONVERSATION_TEXT.expandAll` · `collapseAll`, 판정 `conversationAllExpanded` — 하나씩 다 펼쳐도 [모두 접기]). 모두 펼친 줄의 본문은 화면에 들어온 줄부터 하나씩(`composables/useConversationPanelVisibility.ts` — IntersectionObserver 하나로 `[data-conversation-panel]` 을 보고 스토어의 `noteConversationPanelVisible` 에 알린다 · 차례 `detailQueue`, 차례 전에 화면 밖으로 나간 줄은 건너뛴다), 읽음은 본문이 화면에 보였을 때만(`lazyRows` — 손으로 펼친 줄은 지금처럼 받는 대로). 펼친 줄 머리 [답장](`data-conversation-head-reply` — 머리 틀 `.conversation-row__head` 안에 펼침 단추와 나란히, 임시 저장본 · 예약 · 지워진 메일엔 없다) |
 | 대화로 묶어 보기 (14단계) | `src/components/mail/MailConversationToggle.vue`(목록 머리 [대화로 묶기]) · `ConversationListItem.vue`(분할 보기 줄) · `ConversationTableRow.vue`(목록 보기 표 줄) · `composables/useConversationRows.ts` · `shared/utils/mail-conversation-list.ts`(응답 맞추기 · 할 일 id · 참여자 · 머리 글 · 표시 적용 · 맞추기 병합 · 삭제 뒤 갈 곳) · `stores/mail/list.ts`(출처 `conversations`) · 설정 `stores/mail-settings.store.ts` 의 `groupByConversation`(+ 설정 › 보내기 · 읽기 한 줄) · 글 `shared/constants/mail-conversation.ts` 의 `MAIL_CONVERSATION_LIST_TEXT` | 받기 · 맞추기 · 줄에 하는 일은 계약 2절 "대화 — 14단계"의 클라이언트 줄(20줄 · 맞추기는 불러온 줄 수만큼 최대 100줄 `silent` · 할 일 = `messageIds` − 붙잡힌 메일 · 줄 전체 표시는 모두 바꿨을 때만 · 옮기기 · 삭제 뒤 한 번 다시 받기). **첫 진입 짐작**은 localStorage `groupByConversationHintKey(주소)` — 설정을 받기 전 · 받지 못했으면 이 값, 받으면 서버 값, 읽기 · 쓰기가 던져도 끔. 로그아웃 · 세션 만료에 설정 스토어를 비워도 화면이 보는 값은 그대로 둔다(뒤집히면 watcher 가 떠나는 화면의 목록을 다시 부른다 — 2026-11-06 리뷰). **목록을 부르는 watcher 는 `authStore.canUseApp` 이 false 면 부르지 않는다**(소스에도 넣는다). 붙잡힌 메일이 든 줄은 고르기 칸 · 별이 `aria-disabled` + 까닭(`SEND_LATER_TEXT.heldNotSelectable`). 목록 줄의 화면 낭독 글("안 읽음, " · "중요 표시" · "첨부 있음")은 `shared/constants/mail.ts` 의 `MAIL_LIST_ROW_TEXT` — 메일 줄은 아직 직접 적은 글이라 함께 고친다. 읽기 화면 [이전] · [다음] · 위치는 대화 단위(`ListReadNav.vue`), 한 통 삭제 뒤 갈 곳은 `conversationNeighborAfterRemoval`. 분할 보기 머리의 줄인 개수 글 `listHeadShortCountText`(전체 글은 title · 숨긴 글) · 도구 줄 `selectedShort`(숨긴 글 "대화 N개 선택됨") · 표 머리 "참여자"(`participantsColumn`) · 줄 알림 `announceMove(…, { from })` → `MAIL_BULK_TEXT.movedFrom`("{메일함}에 있는 메일 N통을 …"). 영구 삭제는 `MailPurgeDialog` 의 `from` + `announcePurge(…, { from })` → `purgeTitleFrom` · `purgedFrom`(값은 `useBulkMailActions` 의 `conversationFrom` — 묶지 않은 목록 · 읽기 화면은 null). **설정 다시 받기** `composables/useMailSettingsRefresh.ts`(MailLayout — 탭이 보일 때 60초 `MAIL_SETTINGS_REFRESH_AFTER_MS` · `canUseApp`) + 스토어 `refresh()`(silent · 받는 동안 loading 으로 바꾸지 않음 · 저장 중이면 하지 않음 · 받는 사이 고른 것(`choiceSeq`) · 다시 받기(`loadSeq`) · 세션이 바뀌면 버림) · `fetchSeq` — 디자인 README "14단계 구현하며 정한 보완 — 목록 대화로 묶어 보기" |
-| 여러 통 처리 · 삭제 | `src/components/mail/MailCheckbox.vue` · `MailSelectionToolbar.vue`(+ `MailBulkButton` · `MailBulkMoveButton`) · `MailPurgeDialog.vue` · `MessageDeleteButton.vue` · `composables/useBulkMailActions.ts` · `useMessageRemoval.ts` · `useMailMoveFeedback.ts` · `shared/utils/mail-selection.ts` · `mail-bulk.ts` | 100통씩 차례로. 읽음 · 중요는 먼저 바꾸고 `failedIds` 만 되돌리고, 이동 · 삭제는 응답의 id 만 뺀다. **웹은 `DELETE /api/messages/{id}` 를 쓰지 않는다** — 휴지통 밖 삭제는 `PATCH` 이동(+ 되돌리기), 휴지통에서는 확인 대화상자(처음 초점 「취소」) 뒤 `POST /message-deletions`. 읽기 화면도 그 메일의 `mailboxIds` 로 같은 규칙을 탄다. 도구 줄은 role="toolbar" 로빙 tabindex(바쁜 · 꺼진 단추는 건너뛴다). [되돌리기] 뒤 알림은 한 메일함이면 그 이름(`restoredMessageText(…, mailboxName)` — "메일 N통을 받은편지함으로 되돌렸습니다.") — 계약 2절 "여러 통 한꺼번에" |
+| 여러 통 처리 · 삭제 | `src/components/mail/MailCheckbox.vue` · `MailSelectionToolbar.vue`(+ `MailBulkButton` · `MailBulkMoveButton`) · `MailPurgeDialog.vue` · `MessageDeleteButton.vue` · `composables/useBulkMailActions.ts` · `useMessageRemoval.ts` · `useMailMoveFeedback.ts` · `shared/utils/mail-selection.ts` · `mail-bulk.ts` | 100통씩 차례로. 읽음 · 중요는 먼저 바꾸고 `failedIds` 만 되돌리고, 이동 · 삭제는 응답의 id 만 뺀다. **웹은 `DELETE /api/messages/{id}` 를 쓰지 않는다** — 휴지통 밖 삭제는 `PATCH` 이동(+ 되돌리기), 휴지통에서는 확인 대화상자(처음 초점 「취소」) 뒤 `POST /message-deletions`. 읽기 화면도 그 메일의 `mailboxIds` 로 같은 규칙을 탄다. 도구 줄은 role="toolbar" 로빙 tabindex(바쁜 · 꺼진 단추는 건너뛴다). [되돌리기] 뒤 알림은 한 메일함이면 그 이름(`restoredMessageText(…, mailboxName)` — "메일 N통을 받은편지함으로 되돌렸습니다.") — 계약 2절 "여러 통 한꺼번에". [이동 ▾]의 옮길 곳 · 스팸 표시 · 끌어다 놓기는 아래 「메일 옮기기 · 끌어다 놓기 · 좁은 읽기 칸 (15단계)」 행 |
 | 설정 › 비밀번호 · 부재중 (4단계) | `src/pages/settings/AccountPasswordPage.vue` · `MailVacationPage.vue` · `components/settings/`(`SettingsPageFrame` 공용 틀 — 머리 오른쪽 단추는 `actions` 슬롯 · `PasswordChangeForm` · `PasswordField` · `Vacation*`) · `stores/mail-vacation.store.ts` · `shared/utils/password-change.ts` · `mail-vacation.ts` · 메뉴 `shared/constants/settings-menu.ts` | 메뉴는 묶음(계정 › 비밀번호 / 메일 › 서명 · 부재중 자동 응답 · 필터(6단계) · 알림(5단계)), 라우트 이름은 `SETTINGS_ROUTES` 하나. 비밀번호는 서버와 같은 규칙을 먼저 보고, 서버 거절(`AUTH_005` · `VAL_001`)은 칸 아래에만(알림 없음) — 성공하면 세 칸을 비운다. 부재중은 날짜만 고르고 브라우저 시간대의 시작일 0시 · 끝나는 날 다음 날 0시를 UTC 로 보낸다(변환은 `mail-vacation.ts` 한 곳 — 되읽을 때는 1ms 앞 날짜). 켤 때만 검사하고 꺼 둔 채로는 빈 값도 저장한다(길이 150 · 600 도 켤 때만 — 꺼 둔 채로는 4단계 한도까지, 끄기는 늘 저장되게). 부재중 상태는 메일 화면에 들어올 때 받고, 패널 안내 `components/mail/MailVacationNotice.vue` 가 1분마다 다시 계산한다(`useClock` · `VACATION_NOTICE_REFRESH_MS`). 저장 응답은 세션 세대(`authStore.generation`)가 바뀌었으면 쓰지 않는다. 저장한 값이 켜짐인데 엔진에서 규칙이 꺼져 있으면(응답의 `isActive: false` — 7단계) 머리 아래 노란 줄(`MailFilterNotice` 를 단추 없이 — `actionLabel` 을 주지 않는다). 칸을 고친 값이 아니라 저장한 값으로 보고, `isActive` 는 PUT 본문에 넣지 않는다(`useMail().saveVacation` 이 다섯 칸만) — 계약 1절 · 2절 "부재중 자동 응답" |
-| 메일함 관리 · 오래 걸리는 처리 (4단계) | `src/components/mail/MailboxTree.vue` · `MailboxPanelRow.vue` · `MailboxMoreButton.vue`(⋯ 메뉴) · `MailboxDialogs.vue`(+ `Mailbox*Dialog.vue`) · `MailboxEmptyButton.vue`(목록 머리 「비우기」) · `composables/useMailboxActions.ts` · `stores/mail/mailbox-admin.ts` · `shared/utils/mailbox-operation.ts` · 상수 `shared/constants/mailbox-manage.ts` | 만들기 · 이름 바꾸기는 칸 안 실패(`MAIL_009` · `VAL_001`)를 알림 없이 칸 아래에. 모두 읽음 · 비우기 · 지우기는 남은 수가 0(지우기는 `deleted: true`)이 될 때까지 다시 보내며 진행 알림을 고친다 — 진행은 응답의 `processed`, 세션이 바뀌면 멈춘다(`epoch` — 늦게 온 만들기 · 이름 바꾸기 응답도 버린다), 같은 메일함의 같은 처리는 하나, **휴지통 비우기와 메일함 지우기는 함께 돌리지 않는다**(비우기는 그사이 휴지통에 들어온 메일도 지운다 — 판정은 스토어의 `isMailboxOperationBlocked` 하나, 메뉴 · 단추 · 대화상자 확인이 모두 이것을 본다). 끝난 뒤 누른 단추가 사라져 초점을 잃었으면 패널의 지금 메일함 항목으로 옮긴다. ⋯ 메뉴는 보이는 영역 안에 다 들게 연다(`shared/utils/popup-placement.ts` — 아래가 모자라면 위로). 되돌릴 수 없는 일은 확인 대화상자(처음 초점 「취소」) 뒤에, 확인한 그 메일함만 — 계약 2절 "메일함 관리" |
+| 메일함 관리 · 오래 걸리는 처리 (4단계) | `src/components/mail/MailboxTree.vue` · `MailboxPanelRow.vue` · `MailboxMoreButton.vue`(⋯ 메뉴) · `MailboxDialogs.vue`(+ `Mailbox*Dialog.vue`) · `MailboxEmptyButton.vue`(목록 머리 「비우기」) · `composables/useMailboxActions.ts` · `stores/mail/mailbox-admin.ts` · `shared/utils/mailbox-operation.ts` · 상수 `shared/constants/mailbox-manage.ts` | 만들기 · 이름 바꾸기는 칸 안 실패(`MAIL_009` · `VAL_001`)를 알림 없이 칸 아래에. 모두 읽음 · 비우기 · 지우기는 남은 수가 0(지우기는 `deleted: true`)이 될 때까지 다시 보내며 진행 알림을 고친다 — 진행은 응답의 `processed`, 세션이 바뀌면 멈춘다(`epoch` — 늦게 온 만들기 · 이름 바꾸기 응답도 버린다), 같은 메일함의 같은 처리는 하나, **휴지통 비우기와 메일함 지우기는 함께 돌리지 않는다**(비우기는 그사이 휴지통에 들어온 메일도 지운다 — 판정은 스토어의 `isMailboxOperationBlocked` 하나, 메뉴 · 단추 · 대화상자 확인이 모두 이것을 본다). 끝난 뒤 누른 단추가 사라져 초점을 잃었으면 패널의 지금 메일함 항목으로 옮긴다. ⋯ 메뉴는 보이는 영역 안에 다 들게 연다(`shared/utils/popup-placement.ts` — 아래가 모자라면 위로 · 좌우가 넘치면 반대 끝으로(15단계 — EditorPopup)). 되돌릴 수 없는 일은 확인 대화상자(처음 초점 「취소」) 뒤에, 확인한 그 메일함만 — 계약 2절 "메일함 관리" |
 | 스팸 · 원문 (4단계) | `src/components/mail/MessageSpamButton.vue`(읽기 화면) · 도구 줄의 스팸 단추(`MailSelectionToolbar.vue`) · `MessageMoreMenu.vue`(⋯ › 원문 내려받기) | 스팸 신고 · 스팸 아님은 이동과 `isJunk` 를 한 요청에 보내고(`mailStore.moveMessages(…, { isJunk })`), [되돌리기]는 원래 메일함으로 반대 값을 보낸다. 원문(.eml)은 `useMail().downloadMessageSource()` — 첨부처럼 `confirmSession()` 을 먼저 거친다 — 계약 2절 "스팸 · 원문" |
 | 메일 필터 (6단계) | `src/pages/settings/MailFilterPage.vue` · `components/settings/MailFilter*.vue`(목록 · 행 · 목록 위 줄 `MailFilterNotice` · 빈 상태 · 안내 상자 `MailFilterNotes` · 고치기 창 `MailFilterDialog` + 조건 `MailFilterConditionFields` · `MailFilterConditionRow` · 할 일 `MailFilterActionFields`) · `mail-filter-ui.ts` · `stores/mail-filter.store.ts` · `composables/useMailFilterActions.ts`(켜기 · 순서 · 지우기 · 되돌리기 알림) · `useMailFilterDialog.ts`(창 상태) · `shared/utils/mail-filter.ts`(검사 · 요약 · 옮길 곳 · 되돌릴 자리) · `shared/constants/mail-filter.ts` · 읽기 화면 ⋯ 「이런 메일로 필터 만들기」(`MessageMoreMenu.vue` → `/settings/mail/filters?from=`) | 바꾸는 일은 모두 `PUT /api/mail-filters` 전체 교체(받은 `version`)이고 **저장은 한 번에 하나**(`saving`). 켜기 · 순서는 화면을 먼저 바꾸고 실패하면(그사이 목록이 안 바뀌었으면) 되돌린다. 창의 저장은 그 순간 목록의 켜짐 값을 쓴다. [되돌리기]는 지운 필터만 앞 · 뒤 필터 기준 자리에 다시 넣고, 누른 차례대로 앞 저장이 끝난 뒤 보낸다(`restoreQueue` — 기다림과 `send()` 사이에 await 를 두지 않는다 — 2026-10-28 리뷰의 경합). `MAIL_012` 는 목록 위 줄 + 창 안 안내와 [다시 불러오기](쓴 내용을 지키고 다시 받은 목록 위에 저장), 늦게 온 409 는 보낼 때의 순번(seq)이 그대로일 때만 줄을 켠다. 검사는 서버와 같은 규칙(전달 주소의 @ 앞은 dot-atom · 64자로 서버보다 좁게)이고 거절은 칸 아래(`VAL_001` · `MAIL_013` 은 알림을 끈다). 필터 화면이 떠 있지 않을 때 실패한 되돌리기는 알림으로(`attachPage` · `pageVisible`). 세션이 바뀌면 늦은 응답을 버린다(`authStore.generation`) — 계약 2절 "메일 필터", 디자인 README "6단계" |
 | 이미 받은 메일에 필터 적용 (7단계) | `src/components/settings/MailFilterApplyField.vue`(고치기 창의 「받은편지함에 이미 있는 메일도 정리하기」 — 창을 열 때마다 꺼짐) · `composables/useMailFilterRun.ts`(진행 · 결과 알림) · `stores/mail-filter-run.store.ts`(cursor 를 이어 보내기 — 탭마다 하나 `running`) · `shared/utils/mail-filter-run.ts`(할 일 판정 · 보낼 규칙 · 끝 알림의 메일함 · 문구) | 저장이 성공한 뒤에만 `POST /api/mail-filter-runs` 를 `cursor` 가 null 이 될 때까지 다시 보내며 진행 알림을 고친다(4단계 오래 걸리는 처리와 같은 결 — 전체는 확인 + `remaining`, 첫 응답 전에는 받은편지함의 메일 수). 전달은 보내지 않는다. 이미 받은 메일에 할 일이 없는 필터(옮길 메일함이 지워짐 · 받은편지함으로 옮기기만 · 전달만)는 칸을 끄고 시작하지도 않는다 — 판정은 `filterRunIdleReason` 하나(칸 `filterApplyBlock` · 시작 `filterRunRuleOf` 가 함께 쓴다), 이 탭에서 적용이 도는 중에도 칸을 끈다. 요청은 `silent` 로 보내고 실패는 응답이 온 때 세션이 그대로일 때만 스토어가 알린다(`REQ_001` — 다른 창 · PC 에서 적용 중 — 은 화면이 "다른 창에서 …"로). 멈추면 [다시 시도](받은 `cursor` 부터 — 수도 이어 센다), 나아가지 못한 응답이 거듭되면(`MAIL_FILTER_RUN_MAX_STALLS`) 멈춘다. 다른 화면으로 가도 이어 하고, 세션이 바뀌면 다음 요청을 보내지 않고 알림을 닫는다. 끝났거나 나아간 뒤 멈췄으면 개수 · 목록을 맞춘다 — 계약 2절 "이미 받은 메일에 적용", 디자인 README "7단계" |
@@ -70,6 +70,8 @@ description: Vue 3 프론트엔드(frontend/) 개발 규칙 — Composition API
 | 계정 보안 (12단계) | 로그인 코드 단계 `src/components/auth/LoginCodeStep.vue` · `composables/useLoginChallenge.ts` · 설정 `pages/settings/AccountTwoFactorPage.vue` · `AccountAppPasswordsPage.vue` · `AccountLoginHistoryPage.vue`(+ 비밀번호 화면의 코드 칸 `PasswordChangeForm`) · `components/settings/`(`OtpCodeField` · `TwoFactorEnableDialog` + `TwoFactorEnrollmentScan` · `TwoFactorDisableDialog` · `AppPassword*` · `MailClientSettings` · `LoginSessionList` · `LoginEventTable` · `EndOtherSessionsDialog`) · QR `components/QrCodeImage.vue`(`uqr` 0.1.3 — SVG `<rect>` v-for, v-html 없음) · API `composables/useAccountSecurity.ts` · 스토어 `two-factor` · `app-passwords` · `login-history` · 상수 `shared/constants/account-security.ts`(상한 5 · 이름 40자 · 10분 · `MAIL_CLIENT_SETTINGS`) | **비밀은 화면 메모리에만** — 코드 단계의 비밀번호는 반응형이 아닌 클로저(`useLoginChallenge` — 성공 · [다른 계정으로 로그인] · 떠날 때 · 10분(타이머와 시계 `startedAt` 둘 다)에 지운다, 화면이 사라진 뒤의 늦은 `twoFactorRequired` 로는 시작하지 않는다), 2단계 키 · otpauth 주소 · 앱 비밀번호 값은 창 안에만 두고 닫을 때 지운다. **비밀이 드는 요청은 Pinia 액션에서 부르지 않는다** — devtools 타임라인이 액션의 인자 · 결과를 기록한다(창이 `useAccountSecurity` 로 보내고 스토어에는 비밀 없는 결과만 — `apply(status)` · `add(값을 뺀 줄)`). 세션 세대(`authStore.generation`)가 바뀌면 비밀이 든 창을 모두 닫는다(12단계부터 다른 기기의 로그아웃이 이 세션을 바로 끊는다). 창은 "몇 번째로 연 창인가"로 늦은 응답을 거른다 — 단 서버가 이미 켰거나 만든 결과는 반영한다. `login()` 은 `{ status }` 를 돌려준다. 코드로 나눈다: `AUTH_006` 칸 아래 · `AUTH_007` 코드 칸 보이기(6자리가 아닐 때도 이 문구) · `AUTH_008` 처음부터(새 키) · `AUTH_009` 상한. 지금 브라우저 줄이 없으면 [다른 곳 모두 로그아웃]은 "이 브라우저를 포함해"로 묻는다. **로그인된 기기**(2026-11-06 — 앱 세션이 함께 보인다): 웹 · 앱은 세션의 `client` · 로그인 기록의 `method` 로만 가른다(User-Agent 이름으로 짐작하지 않는다 — `shared/utils/account-security.ts` 의 `sessionCounts` · `isMobileSession`), 앱 이름은 `MOBILE_APP_NAME`(짝: backend `APP_BROWSER_NAME`) — 계약 5절, 디자인 README "12단계" |
 | 전환 준비 (13단계) | 제한된 세션 `stores/auth.store.ts`(`restriction` · `twoFactorDeadline` · `restrictionChecks` · `canUseApp`) · `shared/utils/auth-session.ts` · `router/index.ts` 가드 + `composables/useSessionRestriction.ts`(App) · `useApi.ts` 의 `recheckRestriction` · 로그인 틀 단계 `components/auth/LoginPasswordChangeStep.vue` · `LoginTwoFactorSetupStep.vue` · `LoginTwoFactorScan.vue`(QR 148 — `QrCodeImage` 의 `compact`) · `LoginAccountRow.vue` · `LoginSupportLine.vue` · `composables/useLoginSecret.ts` · `shared/constants/session-restriction.ts` · 문의 연락처 `stores/support-contact.store.ts` · `shared/utils/support-contact.ts` · 유예 줄 `components/mail/TwoFactorGraceNotice.vue`(AppShell 의 `notice` 슬롯 — MailLayout 에만) · 메일 프로그램 연결 `pages/settings/AccountMailClientsPage.vue` + `components/settings/MailClientGuideList.vue` · `shared/constants/mail-clients.ts` · 30일 줄 `MailListFrame`(`MAILBOX_RETENTION_NOTICES` · `MAILBOX_EMPTY_HINTS`) | **제한된 세션**(계약 6절): login · me · refresh 의 `restriction` 이 있으면 보호 화면 대신 로그인 틀의 그 단계(새 비밀번호 → 2단계 켜기)로 — 403 `AUTH_010` 은 알림 없이 me 를 다시 받고(제한 없음이면 refresh 후 원래 요청 한 번만), 서버가 제한을 확인할 때마다(`restrictionChecks`) 다시 옮긴다. 제한된 동안은 `canUseApp` 이 false 라 나가기 확인을 묻지 않고(세션이 끝난 것처럼 — 2026-11-02 리뷰: 확인에서 이동을 취소하면 메일 화면에 갇혔다) 실시간 알림 · 새 메일 확인을 열지 않는다. 모르는 제한 이름은 `unknown` — 갱신 · 다시 보내기 없이 사전 문구 + [다른 계정으로 로그인]만. **비밀**: 로그인 때 넣은 비밀번호는 반응형이 아닌 클로저에 10분(서버가 마지막으로 확인한 때부터) — 성공 · 다른 계정 · 떠남 · `isLoggedIn` false 때 지운다, 거절(`AUTH_005`)되면 지우고 칸을 보인다. 성공한 로그인 코드도 지운다(`resetCodeStep`). 단계를 마친 뒤 refresh 가 장애면 me 를 먼저 묻는다(제한이 있으면 그 단계 · 없으면 이어 감 · me 도 실패면 위쪽 상자 + [다시 시도]). 2단계를 켠 직원의 새 비밀번호 단계는 다음 코드를 받는다(로그인 코드는 2분 다시 못 쓴다). **유예 줄**: 높이 40 · [지금 켜기] 36(안내 줄 밀도 예외 재사용), 날짜는 `twoFactorDeadline` 의 1ms 앞(올해가 아니면 해), 닫기 없음, 마감이 있으면 `GET /two-factor` 를 한 번 물어 이미 켠 직원에게는 숨긴다. 설정 › 2단계 인증은 `isRequired` · `deadline` — 필수 · 켜짐이면 끄기 대신 글. **메일 프로그램 연결**: 펼침 줄 52(`--size-header-min` 재사용 — 예외 아님) · 한 번에 하나 · 처음 모두 접힘(h3 > button · `aria-expanded` · region), 글은 상수가 원본(디자인 README 13단계), 앱 비밀번호 화면에 바로가기 줄, 아이콘 `monitor-smartphone`. `PasswordField` · `OtpCodeField` 의 `variant="login"`(로그인 틀 칸 모양), `PasswordField` 의 `readonly`. 12단계 코드 단계의 도움말은 문의 줄로 바뀌었다(`LOGIN_TWO_FACTOR_TEXT.help` 삭제) — 계약 6절, 디자인 README "13단계" |
 | 휴대폰 앱 받기 (2026-11-08) | 설정 › 계정 › 휴대폰 앱 `src/pages/settings/AccountMobileAppPage.vue` · 앱 틀 밖 받기 화면 `pages/mobile-app/MobileAppPage.vue`(`/app` — 인쇄 화면처럼 `meta.requiresAuth` 만) · `components/mobile-app/`(`MobileAppDownloadLink` · `MobileAppIcon` · `MobileAppSteps` · `MobileAppIphoneNote`) · `stores/app-release.store.ts` · API `composables/useAppReleases.ts` · `shared/utils/app-release.ts` · `shared/types/app-release.ts` · 글 `shared/constants/mobile-app.ts`(`MOBILE_APP_PATH` · `MOBILE_APP_ROUTE` — 글은 이 상수가 원본) | 안드로이드 APK 를 로그인한 직원만 받는다(스토어 없음). 판 정보 `GET /api/app-releases/android/latest` 는 들어올 때마다 `silent` 로 받는다 — 404 `RES_001` 은 "받을 앱 없음"(알림 없음 · 안내와 문의 줄만), 그 밖의 실패는 칸 자리에 `MailLoadError`(사전 문구 + [다시 시도]), 세션 세대(`authStore.generation`)가 바뀌면 늦은 응답을 버리고 값을 지운다. [앱 내려받기]는 첨부처럼 `<a href download>` + 이동 직전 `confirmSession()`(`…/latest/file`). QR(`QrCodeImage`)은 `location.origin + '/app'` 만 담는다(비밀 아님) — `/app` 은 앱의 [새 버전 받기]도 여는 약속이라 경로를 바꾸면 앱도 함께. 문의 줄은 `LoginSupportLine`(`/app` 은 `size="base"` 13). 올린 날은 브라우저 시간대(`formatLongDate`). 설정은 좁은 폭(480 이하)에서 QR 줄을 빼고 [앱 내려받기]를 전체 폭으로, `/app` 은 휴대폰 폭이 먼저 · 480 초과는 띠 전체 폭 + 가운데 칸 480 · [앱 내려받기] 48(밀도 예외 아님). 글자 17 토큰 `--font-size-title-md` — 디자인 README "휴대폰 앱 받기" |
+| 메일함 옮기기 · 하위까지 지우기 · 차단 정리 · 지금 보내기 (15단계) | 메일함 나무 도우미 `src/shared/utils/mailbox.ts`(`mailboxTree` · `mailboxSpokenName` · `mailboxDisplayName` · `mailboxMoveTargets` · `canHoldChildMailbox` · `sameMailboxName` · `descendantMailboxes`) · 옮기기 창 `components/mail/MailboxMoveDialog.vue`(+ `MailboxDialogs.vue` · `mailbox-dialog.ts` 의 `move`) · 지우기 확인 `MailboxDeleteDialog.vue`(`childCount`) · `composables/useMailboxActions.ts`(`move` · `remove(…, { withChildren })`) · `stores/mail/mailbox-admin.ts`(`moveMailbox` · `runMailboxOperation` 의 `withChildren`) · 글 `shared/utils/mailbox-operation.ts`(`mailboxMoveText`) · `shared/constants/mailbox-manage.ts`(`MAILBOX_MOVE_TEXT` · `MAILBOX_PATH_TEXT`) · 차단 창 `MessageBlockDialog.vue`(새 칸) · `MessageMoreMenu.vue` · `composables/useSenderBlock.ts`(`cleanInbox`) · `useSenderBlockRun.ts`(진행 · 결과 알림) · `stores/mail-block-run.store.ts`(`inboxBusy` · `startBlock`) · 되풀이 `stores/inbox-cleanup-run.ts`(필터 적용 · 차단 정리 공용) · 글 `shared/utils/mail-block.ts` 의 `mailBlockRunCopy` · `shared/constants/mail-filter.ts` 의 `INBOX_CLEANUP_TEXT` · 지금 보내기 `MessageReaderNotices.vue`([지금 보내기]) · `composables/useScheduledMessageActions.ts`(`sendNow`) · `stores/mail/scheduled.ts`(`releasePendingSend`) · API `composables/useMail.ts`(`moveMailbox` · `deleteMailbox` 의 `withChildren` · `runSenderBlock` · `releaseScheduledMessage`) | 계약 2절 "메일함 관리" · "보낸 사람 차단" · "보내기 취소 · 예약 발송". **나무 도우미는 한 곳** — [이동 ▾] 들여쓰기 · 끌어다 놓기 알림 · 옮기기 창이 함께 쓴다(알림 이름은 같은 이름이 다른 곳에도 있을 때만 "거래처 › 2025", 같은 자리 겹침은 대소문자 무시 — 엔진과 같다). 옮기기는 `PATCH /mailboxes/{id}` 의 `parentId`(null 은 맨 위) — 옮길 곳은 「하위 메일함 만들기」가 있는 곳과 같고, 자기 · 하위 · 지금 있는 곳 · 같은 이름이 있는 곳은 처음부터 고를 수 없다(radiogroup — 꺼진 줄에도 초점은 간다). `MAIL_009` 만 창 안, 결과 알림 + [되돌리기](원래 상위로). 하위까지 지우기는 확인 창이 물은 뒤에만 `?withChildren=true` — 나무 전체를 "지우는 중"으로 두고 수도 나무 전체로 센다, 끝나면 나무째 뺀다. 차단 창의 새 칸(처음 꺼짐)을 켜면 받은편지함의 이 메일은 첫 칸을 켠 채 잠그고(aria-disabled) 먼저 옮긴 뒤 `POST /mail-block-runs` 를 cursor 가 null 이 될 때까지 — 차단 알림 대신 진행 알림 하나가 결과로 바뀐다([스팸메일함 보기] · [다시 시도] — 다른 창에서 하는 중이어도 단추, [되돌리기] 없음). **받은편지함 정리는 한 직원에 한 번에 하나** — 이 탭의 필터 적용 · 다른 차단 정리가 도는 동안(`inboxBusy`)과 이 탭에서 스팸메일함을 비우는 동안 새 칸을 끈다(`startBlock` — 까닭 글이 다르다, 필터 적용은 스팸메일함 비우기를 보지 않는다), 다른 창은 서버가 429 `REQ_001`(차단 정리는 "다른 창에서 받은편지함이나 스팸메일함을 정리하는 중입니다. …" — 필터 적용은 "…받은편지함을 정리하는 중입니다. …"). [지금 보내기]는 `POST /scheduled-messages/{id}/release` — 응답의 `pendingSend` 가 undo 면 쓰기 화면과 같은 마감 알림 + [보내기 취소](`undoToastDeadline`), null 이면 "메일을 보냈습니다." + [보낸편지함 보기], 예약됨에서 빠진 뒤의 이동은 [예약 취소]와 같다. 503 `MAIL_001` · 결과를 모르는 실패(`SYS_001` — 앞단 502 · 504 · 시간 초과 · 연결 끊김)는 그 메일을 다시 받아 가른다(`shared/utils/pending-send.ts` 의 `unsentReleaseState`, 스토어의 `ReleaseOutcome`): 임시보관함 [임시보관함 보기] · 예약 그대로(확인함) "지금 보내지 못했습니다. …" + [다시 시도](안내 줄 그대로) · 예약만 풀림 · 다시 받지 못함은 이미 나갔을 수 있어 못 보냈다고 단정하지 않는다 — "메일을 보냈는지 확인하지 못했습니다. …" + [다시 시도](예약만 풀림은 안내 줄을 내리고, 다시 받지 못함은 마지막으로 안 그대로. [다시 시도]는 이미 보낸 메일이면 서버가 200) · 다시 낸 발송이 기다림은 보낸 것과 같다. 차단 정리와 이 탭의 스팸메일함 비우기는 서로 막는다(`isMailboxOperationBlocked` · `startBlock` — 다른 창끼리는 서버 잠금이 요청 하나씩이라 엇갈릴 수 있다, 알려진 한계) — 디자인 README "15단계" |
+| 메일 옮기기 · 끌어다 놓기 · 좁은 읽기 칸 (15단계) | 읽기 화면 [이동 ▾] `src/components/mail/MessageMoveButton.vue` · 목록 [이동 ▾] `MailBulkMoveButton.vue` · 메뉴 항목 `components/mail/mail-move-menu.ts` · 옮길 곳 규칙 `shared/utils/mail-move-targets.ts`(`mailMoveTargets` · `hasMoveTarget` · `canDropMailOn` · `hereMailboxIds` · `junkMarkForMove`) · 끌기 `composables/useMailDrag.ts`(`useMailRowDrag` · `activeMailDrag` · `takeMailDrop` · `mailDragging` — 목록 줄 넷이 쓴다) · 끄는 표 `components/mail/MailDragChip.vue`(MailLayout) · 놓기 `MailboxPanelRow.vue`(모양 · 받을지) → `MailboxTree.vue` → `useBulkMailActions` 의 `moveDragged` · 알림 이름 `useMailMoveFeedback` 의 `placeName` · 좁은 읽기 칸 `MessageReader.vue`(컨테이너 쿼리) + `MailToolButton.vue`(`collapsible` · `menu`) · 파일 놓기 무시 `composables/useWindowFileDrop.ts` 의 `useIgnoredWindowFileDrop`(앱 틀 `AppShell`) · 시험 도구 `src/test-utils/drag.ts` | 옮길 곳은 메일함 패널 차례 · 깊이(위 「메일함 옮기기 …」 행의 나무 도우미)이고 메일이 든 메일함 · 임시보관함 · 휴지통은 빼되 하위가 있으면 고를 수 없는 줄(읽기 "이 메일이 있는 메일함" · 목록 "고른 메일이 있는 메일함")로 남긴다. 들여 쓴 항목은 `EditorMenuEntry` 의 `depth` · `ariaLabel`. **스팸메일함으로 옮기는 세 길 같게**: 메뉴 · 끌기로 스팸메일함에 넣으면 `isJunk: true`, 스팸메일함에서 휴지통 밖으로 꺼내면 `isJunk: false`(`junkMarkForMove` — [스팸 신고] · [스팸 아님]과 같은 알림 · 되돌리기). 알림의 메일함 이름은 `placeName`(나무 도우미의 `mailboxDisplayName` — 옮김 · 되돌림 · 대화 목록의 "{메일함}에 있는 …" 모두). 끌기는 우리 자료(`MAIL_DRAG_TYPE` + 이 끌기의 표)만 싣고 링크의 주소는 지운다(`clearData`) — 끄는 동안의 자료는 탭 메모리(dragover 에서는 값을 읽지 못한다), 놓을 때 표가 같아야 받는다. 줄은 `:draggable="!held"` · 끌 수 없는 줄에서 시작한 링크 끌기는 dragstart 에서 막는다. 놓을 수 있는 줄만 dragover 를 받는다(나머지는 브라우저 금지 커서) · 들어온 요소 수로 점선을 켜고 끄며 끌기가 끝나면(`mailDragging`) 끈다. 파일 끌기는 받지 않는다. 앱 틀(메일 · 주소록 · 설정)에 놓은 파일은 무시하되 받는 화면(`useWindowFileDrop` — 쓰기 화면 · 서명 설정)이 떠 있으면 그 화면에 맡긴다. **좁은 읽기 칸**: 도구 줄 띠가 컨테이너(`container: reader-tools / inline-size`) — 분할 보기 580 · 휴지통 605(실측 569.19 · 594.83 에 여유) · 목록 보기 850 · 875 보다 좁으면 이름을 숨긴다(목록 보기는 단추 줄 최대 폭을 푼다, 화면 폭 기준은 tokens.css 머리). 접히는 단추는 `collapsible`(aria-label · title · `.tool-button__label`) — 계약 2절, 디자인 README "15단계" |
 | 시계 주입 | `src/composables/useClock.ts` · `src/test-utils/manual-clock.ts` | 타이머를 쓰는 로직(자동 저장 등)은 시계를 주입받는다 — 테스트는 손으로 돌리는 시계로 시간을 넘긴다(고정 대기 없이, [[testing]]) |
 | 나가기 전 확인 | `src/composables/useLeaveConfirm.ts` · `src/shared/utils/compose-changes.ts` | 화면을 연 뒤(또는 마지막으로 저장한 뒤) 바꾼 것이 있으면 앱 안 이동(라우트 떠남·바뀜)은 확인 대화상자, 탭 닫기·새로고침은 `beforeunload`. 쓰기 화면은 떠나기 전에 먼저 저장하고 저장하지 못한 것이 있을 때만 묻는다(서명 설정은 저장하지 않은 서명이 있으면 묻는다). 가드가 도는 중은 `guarding`. 바꿈 여부는 연 직후(저장한 뒤에는 마지막으로 저장한 판)의 스냅숏과 비교한다(편집기는 `isChanged()`). 떠나기 전 저장은 5초까지만 기다린다. 보낸 뒤·보내는 중·세션이 끝났을 때는 묻지 않는다 — 보내는 중에 떠나면 결과는 토스트로만 알리고 떠난 양식·새 양식을 건드리지 않는다(양식 세대로 늦게 온 결과를 버린다, 디자인 README "나가기 전 확인"). **고치던 모달 창**(필터 고치기 창 — 7단계)은 `composables/useDialogLeaveConfirm.ts` — 화면의 확인에 "창 닫기" 길을 더한다: [취소] · Esc 는 `asking: 'close'`([계속 고치기]면 창을 그대로 — 브라우저가 닫았으면 `reshow()`), 다른 화면은 `'route'`, 탭 닫기 · 새로고침은 `beforeunload`. 보내는 중 · 세션이 끝났을 때는 묻지 않는다 |
 | 읽기 화면 본문 안내 | `src/shared/utils/mail-body-notices.ts` · `shared/constants/mail.ts` 의 `MAIL_BODY_NOTICES` | 서버의 `isHtmlBodyOmitted`·`isBodyTruncated`(계약 2절 "읽기 한도")를 외부 이미지 차단과 같은 안내 줄로 보인다(`.reader__notice[data-notice]`) |
diff --git a/CLAUDE.md b/CLAUDE.md
index 668be15..5e3a9a0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,6 +1,7 @@
 # 프로젝트 개요
 
-이 저장소는 **풀스택 모노레포 기본 템플릿**이다. 누구나 클론하여 바로 개발을 시작할 수 있도록 공통 규칙과 언어별 규칙을 정의한다.
+이 저장소는 **ARA SYSTEM** — 사내 그룹웨어(첫 모듈은 메일: 웹메일 · 휴대폰 앱)다. 백엔드 · 웹 · 앱과 메일 엔진 · 운영 설정을 한 저장소에서 다루고, 여기에 공통 규칙과 스택별 규칙을 둔다.
+프로젝트 소개 · 문서 지도는 [`README.md`](README.md), 작업 차례는 [`docs/roadmap.md`](docs/roadmap.md).
 
 | 디렉터리    | 스택           | 역할                     | 개발 규칙 (스킬)                          |
 | ----------- | -------------- | ------------------------ | ----------------------------------------- |
diff --git a/README.md b/README.md
index 93ab551..eac22dc 100644
--- a/README.md
+++ b/README.md
@@ -1,109 +1,97 @@
-# 풀스택 모노레포 기본 템플릿
+# ARA SYSTEM
 
-NestJS(백엔드) · Vue 3(웹) · Flutter(모바일)를 하나의 저장소에서 운영하는 풀스택 템플릿입니다.
-세 클라이언트는 **동일한 표준 응답 포맷**과 **공통 에러 코드 맵**을 공유하며, Docker Compose로 한 번에 구동됩니다.
+사내 그룹웨어다. 첫 모듈은 **메일** — 웹메일(포털)과 휴대폰 앱(안드로이드)이다.
+메일 엔진(Stalwart)이 메일을 주고받고, 우리 서버(NestJS)가 엔진을 감싸 웹과 앱에 같은 API 를 준다. 화면은 직접 만든다(Vue 3 · Flutter).
+`@arasystem.it.kr` 메일은 2026-11-05 옛 서버(mailcow)에서 옮겨 와 전 직원이 쓰고 있다.
+
+## 지금
+
+- 운영: 메일 1~13단계. 메일 14단계(자체 검색 색인 · 같은 대화)와 앱 첫 판 · 휴대폰 앱 받기는 main 에 합쳤고 서버 배포를 기다린다.
+- 개발 중: 메일 15단계(메일 · 메일함 다루기). 다음은 16단계(개인 설정 — 주소록 가져오기 · 여러 서명 등).
+- 단계별 내용 · 다음 차례 · 미뤄 둔 후보는 [`docs/roadmap.md`](./docs/roadmap.md).
 
 ## 구성
 
-| 디렉터리    | 스택           | 역할                     | 포트(기본) |
-| ----------- | -------------- | ------------------------ | ---------- |
-| `backend/`  | NestJS + TypeORM | REST API 서버          | 3000       |
-| `frontend/` | Vue 3 + Vite   | 웹 프론트엔드            | 5173       |
-| `flutter/`  | Flutter + Riverpod | 모바일 앱            | -          |
-| `db`        | PostgreSQL     | 데이터베이스             | 5432       |
-| `redis`     | Redis          | 캐시 / 세션 (**기본 비활성**) | 6379       |
-| `mail`      | Stalwart (JMAP) | 사내 메일 엔진 — 직원 로그인 = 메일 계정 (profile `mail`, [`mail/README.md`](./mail/README.md)) | 운영 25·465·993·443 / 개발 관리 8180 |
-| `mailpit`   | Mailpit        | **개발 전용** — 사내 도메인 밖으로 보낸 메일 수집 | 8025 |
+| 이름 | 스택 | 하는 일 | 포트(개발) |
+| --- | --- | --- | --- |
+| `backend/` | NestJS · TypeORM | 웹 · 앱이 함께 쓰는 REST API — 메일 엔진 중계, 로그인 세션, 검색 색인, 앱 알림, 대용량 첨부 | 3000 |
+| `frontend/` | Vue 3 · Vite | 웹메일 화면. 운영은 nginx 가 화면과 같은 주소의 `/api` 를 백엔드로 넘긴다 | 5173 |
+| `flutter/` | Flutter · Riverpod | 휴대폰 앱(안드로이드 — 스토어 없이 사내 배포) | - |
+| `db` | PostgreSQL 15 | 로그인 세션 · 설정 · 검색 색인 · 대용량 첨부 기록 등 | 5432 |
+| `mail` | Stalwart | 메일 엔진(JMAP · IMAP · SMTP) — 직원 로그인 = 메일 계정 | 관리 8180(운영은 25 · 465 · 993 · 443) |
+| `mail-resolver` | unbound | 메일 엔진 전용 DNS(스팸 차단 목록 · DNSSEC) | - |
+| `clamav` | ClamAV | 대용량 첨부 악성 검사(운영은 늘, 개발은 profile `clamav`) | - |
+| `mailpit` | Mailpit | 개발 전용 — 바깥 주소로 보낸 메일을 모은다 | 8025 |
+| `redis` | Redis | 기본 꺼짐 — 서버를 여러 대로 늘릴 때의 자리 | 6379 |
+| `ops/` | 셸 · systemd | 운영 서버의 백업(restic) · 15분 점검 · 부팅 때 되살리기 | - |
+| `ci/` | Gitea Actions 러너 | PR 마다 lint · 시험 · 빌드 · 인프라 검사 | - |
+
+## 문서 지도
+
+| 알고 싶은 것 | 문서 |
+| --- | --- |
+| 서버 · 웹 · 앱이 함께 지키는 API 약속 | [`docs/mail/api-contract.md`](./docs/mail/api-contract.md) |
+| 웹 화면 디자인 · 화면 문구 규칙 · 단계별 화면 | [`docs/design/webmail/README.md`](./docs/design/webmail/README.md) — 디자인 원본은 같은 폴더의 `*.dc.html`(캔버스 보드) |
+| 앱 화면 | [`docs/design/app/README.md`](./docs/design/app/README.md) |
+| 메일 엔진 설정 · 운영 배포 · 백업 · 감시 · 전환 | [`mail/README.md`](./mail/README.md) |
+| 앱 개발 실행 · 사내 배포(서명 키 · APK 올리기) | [`flutter/README.md`](./flutter/README.md) |
+| CI 러너 | [`ci/README.md`](./ci/README.md) |
+| 개발 규칙(공통 · 스택별 · 역할) | [`CLAUDE.md`](./CLAUDE.md) · 아래 "개발 규칙" |
+| 로드맵 | [`docs/roadmap.md`](./docs/roadmap.md) |
+| 로고 · 색 | [`docs/brand/`](./docs/brand/) |
 
 ## 사전 요구사항
 
-- Docker / Docker Compose — backend·frontend·db·redis 구동 (컨테이너 안 런타임은 Node 24 LTS — `node:24.22.1-alpine3.24` 고정, 갱신 규칙은 docker 스킬 "Node 버전")
-- Node.js **24 LTS 권장** — 호스트에서 프론트엔드 dev 서버·메일 setup 스크립트를 실행할 때 필요하다.
-  프론트 `engines` 는 `^20.19.0 || >=22.12.0` 이라 20.19 이상이면 돌아가지만, 이미지·CI(24)와 맞추는 것을 권장한다
-  (메일 setup 스크립트는 `--env-file` 때문에 20.6 이상)
-- Flutter SDK `^3.11` — 모바일 앱 실행용 (compose 대상 아님)
+- Docker / Docker Compose — 백엔드 · DB · 메일 엔진(컨테이너 안 Node 는 24 LTS 로 고정 — docker 스킬 "Node 버전")
+- Node.js 24 LTS — 호스트에서 웹 개발 서버 · 메일 setup 스크립트를 돌릴 때
+- Flutter 3.41.9(Dart 3.11.5) — 앱(compose 대상이 아니다 — [`flutter/README.md`](./flutter/README.md))
 
-## 빠른 시작 (Docker)
+## 빠른 시작 (개발)
 
 ```bash
-# 1) 환경변수 파일 생성 (예제 복사)
-#    실제 설정값은 루트 .env.development 한 곳에서 관리한다 (SSOT).
-#    backend/frontend 는 docker-compose 가 값을 주입하므로 예제만 복사하면 된다.
-cp .env.development.example .env.development                       # ← 여기에만 값 입력
-cp backend/.env.development.example backend/.env.development       # (존재 필요: JWT 등 고유 시크릿)
-# frontend 는 compose 가 빌드 시 값을 주입하므로 자체 env 복사 불필요
+# 1) 환경변수 파일 — 값은 루트 .env.development 한 곳에 쓴다(SSOT)
+cp .env.development.example .env.development
+cp backend/.env.development.example backend/.env.development   # 있어야 한다(JWT 등 백엔드 고유 비밀)
 
-# 2) 백엔드 스택 기동 (backend + db, 기본 COMPOSE_PROFILES=mail 이면 mail + mailpit 포함)
+# 2) 백엔드 스택 — backend + db, 기본 COMPOSE_PROFILES=mail 이면 mail · mail-resolver · mailpit 까지
 docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d
 
-# 2-1) 메일 엔진 초기화 — 처음 한 번 (여러 번 실행해도 안전, mail/README.md)
+# 3) 메일 엔진 초기화 — 처음 한 번(여러 번 돌려도 안전하다). 개발 시험 계정도 여기서 만든다(mail/README.md)
 node --env-file=.env.development mail/scripts/setup.mjs
 
-# 3) 의존성 변경 시에만 --build
-docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d --build
-
-# 4) 프론트엔드는 호스트에서 직접 띄운다 (컨테이너보다 수십 배 빠르다)
+# 4) 웹은 호스트에서 띄운다 — /api 는 vite 프록시가 백엔드 컨테이너로 넘긴다
 cd frontend && npm install && npm run dev
 ```
 
-기동 후:
+- 웹 <http://localhost:5173> · API <http://localhost:3000/api> · Swagger <http://localhost:3000/api-docs>
+- 의존성을 바꿨을 때만 `up -d --build`(백엔드는 `--renew-anon-volumes` 도 — docker 스킬).
+- 백엔드를 처음 띄우면 watch 빌드에 수십 분이 걸릴 수 있다(Windows 바인드 마운트). 브랜치를 바꿨다고 다시 시작하지 않는다.
+- 웹을 컨테이너로 띄워야 하면 `--profile frontend`(느리다 — 호스트 vite 와 함께 띄우지 않는다). 운영(`docker-compose.yml` 단독)은 nginx 정적 호스팅이다.
+- 포트는 루트 `.env.{env}` 를 따른다(`FRONTEND_PORT` · `BACKEND_PORT` — `vite.config.ts` 가 직접 읽는다). 포트가 이미 쓰이면 다른 포트로 옮기지 않고 실패한다.
+- Redis 는 뜨지 않는다. 필요해지면 `COMPOSE_PROFILES` 에 `redis` 를 더한다.
 
-- 웹: <http://localhost:5173>
-- API: <http://localhost:3000/api>
-- Swagger 문서: <http://localhost:3000/api-docs>
+전체 실행 · 배포 명령은 [`.claude/skills/docker/SKILL.md`](./.claude/skills/docker/SKILL.md).
 
-> **개발 환경에서 프론트엔드는 컨테이너로 뜨지 않습니다.**
-> vite 를 컨테이너에서 돌리면 소스가 Windows 바인드 마운트 너머에 있어 첫 서빙까지 수 분이 걸립니다.
-> 호스트에서 `npm run dev` 로 띄우면 1~2초이고, `/api` 요청은 vite 프록시가 백엔드 컨테이너로 넘깁니다.
-> 컨테이너로 띄워야 한다면 `--profile frontend` 를 붙이세요 (아래 "프론트엔드 실행 방식" 참조).
-> 운영(`docker-compose.yml` 단독)은 그대로 nginx 정적 호스팅으로 동작합니다.
-
-> Redis 는 기본적으로 뜨지 않습니다. 필요해지면 루트 `.env.{env}` 에 `COMPOSE_PROFILES=redis` 를 설정하세요.
-
-### 프론트엔드 실행 방식
-
-| 방식 | 명령 | 첫 서빙 | 용도 |
-| --- | --- | --- | --- |
-| **호스트 vite (개발 기본)** | `cd frontend && npm run dev` | 1~2초 (최초 의존성 사전번들 10초 내외) | 일상 개발 |
-| 컨테이너 vite (선택) | `docker compose ... --profile frontend up -d` | 수 분 (Windows 바인드 마운트) | 호스트에 Node 를 둘 수 없을 때 |
-| nginx 정적 (운영) | `docker compose --env-file .env.production up -d --build` | - | 배포 |
-
-> 컨테이너 방식을 상시 사용하려면 루트 `.env.development` 에 `COMPOSE_PROFILES=frontend` 를 넣습니다.
-> (redis 와 함께 켤 때는 `COMPOSE_PROFILES=frontend,redis`)
-> 호스트 vite 와 컨테이너 vite 는 같은 호스트 포트를 쓰므로 **동시에 띄우지 마세요.**
-
-> **포트는 루트 `.env.{env}` 를 따릅니다.** 호스트에서 띄우는 vite 도 `FRONTEND_PORT` 로 열리고,
-> `/api` 프록시 대상은 `BACKEND_PORT` 에서 나옵니다 — `vite.config.ts` 가 루트 env 를 직접 읽습니다.
-> 포트가 이미 사용 중이면 조용히 다른 포트로 옮기지 않고 **실패**합니다
-> (`CORS_ORIGIN` 과 compose 포트 매핑이 그 값에 묶여 있어, 말없이 옮겨가면 원인 모르게 어긋납니다).
-
-전체 실행/배포 명령어는 [`.claude/skills/docker/SKILL.md`](./.claude/skills/docker/SKILL.md) 참조.
-
-## 모바일 앱 실행 (Flutter)
-
-Flutter 는 Docker Compose 대상이 아니므로 로컬에서 직접 실행합니다.
+## 앱 실행 (Flutter)
 
 ```bash
 cd flutter && cp .env.example .env && flutter pub get && flutter run
 ```
 
-> `flutter/.env` 의 `API_URL` 을 백엔드 주소로 설정합니다. (Android 에뮬레이터는 `http://10.0.2.2:3000/api`)
+`flutter/.env` 의 `API_URL` 을 백엔드 주소로 둔다(Android 에뮬레이터는 `http://10.0.2.2:3000/api`). 실기기 · 새 메일 알림 · 사내 배포는 [`flutter/README.md`](./flutter/README.md).
 
 ## 환경변수
 
-`.env*` 는 커밋하지 않습니다. 각 디렉터리의 `*.example` 파일을 복사해 사용하세요.
+`.env*` 는 커밋하지 않는다. 각 자리의 `*.example` 을 복사해 쓴다. **루트 `.env.{env}` 가 단일 진실 공급원(SSOT)**이다 — backend · frontend 는 compose 가 루트 값을 넣어 준다
+(구조는 [`.claude/rules/env-structure.md`](./.claude/rules/env-structure.md)).
 
-**루트 `.env.{env}` 가 단일 진실 공급원(SSOT)** 입니다. backend·frontend 는 docker-compose 가
-루트 값을 주입하므로 자체 env 에 값을 중복 작성하지 않습니다. (자세한 위임 구조는 [`CLAUDE.md`](./CLAUDE.md) 의 "환경변수 구조" 참조)
+| 파일 | 용도 | 값을 쓰는 곳 |
+| --- | --- | --- |
+| `.env.{env}.example` | 루트 — 모든 설정의 SSOT(compose 가 넣어 준다) | 여기 |
+| `backend/.env.{env}.example` | 백엔드 고유 비밀(JWT · 앱 알림 키 등)만 | 최소(파일은 있어야 한다) |
+| `flutter/.env.example` | 앱 — `API_URL`(compose 대상이 아니다) | 따로 |
 
-| 파일                          | 용도                                     | 값 작성 위치          |
-| ----------------------------- | ---------------------------------------- | --------------------- |
-| `.env.{env}.example`          | 루트 — 모든 설정의 SSOT (compose 주입)   | ✅ 여기에 작성        |
-| `backend/.env.{env}.example`  | 백엔드 — 고유 시크릿(JWT 등)만           | 최소 (존재 필수)      |
-| `frontend/.env.{env}.example` | 프론트 — API 주소는 같은 출처의 `/api` 고정(빌드 arg) | 작성 불필요          |
-| `flutter/.env.example`        | 모바일 — `API_URL` (compose 비대상)      | ✅ 독립 관리          |
-
-`{env}` = `development` | `production`
+`{env}` = `development` | `production`. 운영 서버의 백업 · 점검 설정은 `/etc/arasystem/`(`ops/ops.env.example` — mail/README "백업").
 
 ## 표준 응답 포맷
 
@@ -114,97 +102,74 @@ cd flutter && cp .env.example .env && flutter pub get && flutter run
 // 실패 — 사용자에게 보이는 모든 실패는 에러 코드를 가진다
 { "success": false, "error": { "code": "VAL_001", "message": "...", "traceId": "3f1c0a2e-..." } }
 
-// 목록 — data 안의 형태가 고정되어 있다
+// 목록 — data 안의 꼴이 정해져 있다
 { "success": true, "data": { "items": [], "pageInfo": { "hasNext": false, "nextCursor": null, "total": 0 } } }
 ```
 
-`traceId` 는 요청마다 발급되는 추적 ID(`x-request-id` 헤더와 동일)로, 서버 로그에 같은 값이 남습니다.
-사용자 문의가 들어오면 이 값으로 로그를 검색하면 됩니다.
+`traceId` 는 요청마다 붙는 추적 ID(`x-request-id` 헤더와 같다)라 서버 로그에 같은 값이 남는다 — 문의가 오면 이 값으로 로그를 찾는다.
+`/api/health` 는 예외다(모니터링 도구가 읽는 원본 꼴).
 
-> `/api/health` 는 예외입니다. 모니터링 도구가 읽는 엔드포인트라 래퍼 없이 원본 형식을 반환합니다.
-
-### 에러 코드는 한 곳에서 관리됩니다
+### 에러 코드는 한 곳에서
 
 ```
-backend/src/common/errors/error-codes.ts   ← 여기만 수정
+backend/src/common/errors/error-codes.ts   ← 여기만 고친다
         │  cd backend && npm run sync:error-codes
         ├─▶ frontend/src/shared/constants/error-codes.generated.ts   (자동 생성)
         └─▶ flutter/lib/core/api/error_lexicon.g.dart                (자동 생성)
 ```
 
-생성 파일은 직접 수정하지 마세요. CI 가 동기화 여부를 검사합니다.
-자세한 규칙은 [`.claude/rules/error-codes.md`](./.claude/rules/error-codes.md) 참조.
+생성 파일은 직접 고치지 않는다. CI 가 맞는지 본다 — [`.claude/rules/error-codes.md`](./.claude/rules/error-codes.md).
 
-## 로컬 개발 (Docker 없이)
-
-DB 는 컨테이너로 띄우고 앱만 호스트에서 실행하는 방식이 가장 간단합니다.
+## 커밋 전 검사
 
 ```bash
-# 1) DB 만 컨테이너로 기동 (127.0.0.1:5432 로 노출된다)
-docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d db
-
-# 2) backend — DB_HOST 기본값이 localhost 라 그대로 붙는다
-cd backend && npm ci && npm run start:dev
-
-# 3) frontend — vite dev 서버가 /api 를 localhost:3000 으로 프록시한다 (개발 기본 방식)
-cd frontend && npm ci && npm run dev
-
-# 4) flutter
-cd flutter && flutter pub get && flutter run
-```
-
-> 프론트엔드의 API 요청은 `/api` 상대경로로 나가고 vite dev 프록시가 백엔드로 넘깁니다.
-> 백엔드를 다른 주소에서 띄웠다면 `VITE_DEV_API_PROXY` 로 대상을 바꾸세요.
-
-### 커밋 전 검사
-
-```bash
-cd backend  && npm run lint && npm run test && npm run build
-cd frontend && npm run lint && npm run type-check && npm run test:unit
+# backend — 컨테이너 안에서(의존성 · lock 이 Linux 기준이라 호스트에서 npm install 하지 않는다)
+docker exec arasystem-backend npm run lint
+docker exec arasystem-backend npm run test                          # 메모리가 빠듯하면 -- --maxWorkers=2
+docker exec arasystem-backend npx jest --config ./test/jest-e2e.json   # e2e — DB · 메일 엔진이 떠 있어야 한다
+# frontend · flutter — 호스트에서
+cd frontend && npm run lint && npm run type-check && npm run test:unit   # 시간대가 걸린 화면을 고쳤으면 TZ=UTC 로도
 cd flutter  && flutter analyze && flutter test
 ```
 
-lint 는 `--max-warnings 0` 이라 경고 하나만 있어도 실패합니다. 자동 수정은 `npm run lint:fix`.
-같은 검사를 CI([`.github/workflows/ci.yml`](./.github/workflows/ci.yml))가 PR 마다 수행합니다.
+컨테이너 이름은 `<PROJECT_NAME>-backend`(개발 기본 `arasystem`). lint 는 `--max-warnings 0` 이라 경고 하나도 실패다. 같은 검사를 CI(`.github/workflows/ci.yml` · `ci-flutter.yml`)가 PR 마다 한다.
 
-> ⚠️ **의존성을 추가·제거할 때는 컨테이너 안에서** 실행하세요.
-> Windows 에서 `npm install` 하면 Linux 전용 패키지가 lock 에서 잘려 Docker 빌드가 깨집니다.
-> ```bash
-> docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development exec backend npm install <패키지>
-> ```
+> ⚠️ **백엔드 의존성은 컨테이너 안에서만 바꾼다** — Windows 에서 `npm install` 하면 Linux 전용 패키지가 lock 에서 빠져 Docker 빌드가 깨진다.
+> `docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development exec backend npm install <패키지>`
 
 ## 개발 규칙
 
-| 영역      | 문서                                              |
-| --------- | ------------------------------------------------- |
-| 공통/보안 | [`CLAUDE.md`](./CLAUDE.md) · [`.claude/rules/`](./.claude/rules/) |
-| 응답·에러 | [`response-format.md`](./.claude/rules/response-format.md) · [`error-codes.md`](./.claude/rules/error-codes.md) |
-| API 설계  | [`api-design.md`](./.claude/rules/api-design.md)   |
-| 로깅      | [`logging.md`](./.claude/rules/logging.md)         |
-| 체크리스트 | [`checklist.md`](./.claude/rules/checklist.md)    |
-| NestJS    | [`.claude/skills/nestjs/SKILL.md`](./.claude/skills/nestjs/SKILL.md)   |
-| Vue 3     | [`.claude/skills/vue3/SKILL.md`](./.claude/skills/vue3/SKILL.md)       |
-| Flutter   | [`.claude/skills/flutter/SKILL.md`](./.claude/skills/flutter/SKILL.md) |
-| Docker    | [`.claude/skills/docker/SKILL.md`](./.claude/skills/docker/SKILL.md)   |
-| 역할 분담 | [`.claude/agents/README.md`](./.claude/agents/README.md)               |
+| 영역 | 문서 |
+| --- | --- |
+| 입구 · 공통 | [`CLAUDE.md`](./CLAUDE.md) · [`.claude/rules/`](./.claude/rules/) |
+| 응답 · 에러 | [`response-format.md`](./.claude/rules/response-format.md) · [`error-codes.md`](./.claude/rules/error-codes.md) |
+| API 설계 | [`api-design.md`](./.claude/rules/api-design.md) |
+| 로깅 · 보안 | [`logging.md`](./.claude/rules/logging.md) · [`security.md`](./.claude/rules/security.md) |
+| 점검 목록 | [`checklist.md`](./.claude/rules/checklist.md) |
+| NestJS | [`.claude/skills/nestjs/SKILL.md`](./.claude/skills/nestjs/SKILL.md) |
+| Vue 3 | [`.claude/skills/vue3/SKILL.md`](./.claude/skills/vue3/SKILL.md) |
+| Flutter | [`.claude/skills/flutter/SKILL.md`](./.claude/skills/flutter/SKILL.md) |
+| Docker · 운영 | [`.claude/skills/docker/SKILL.md`](./.claude/skills/docker/SKILL.md) |
+| 역할 분담 | [`.claude/agents/README.md`](./.claude/agents/README.md) |
+
+새 화면은 캔버스 보드로 먼저 확인받은 뒤 만든다(디자인 README). 화면 · 알림 글은 디자인 README 「화면 문구 — 사용자에게 말하듯」을 따른다.
 
 ## 디렉터리 구조
 
 ```
 .
-├── backend/    # NestJS API (Controller / Service / DTO / 공통 필터·인터셉터)
-├── frontend/   # Vue 3 (pages / components / composables / stores / router)
-├── flutter/    # Flutter (core / features / shared)
-├── docker-compose.yml         # 베이스 정의
-├── docker-compose.dev.yml     # 개발 오버라이드 (핫리로드, 포트 노출)
-├── CLAUDE.md   # 프로젝트 개요 + 공통 규칙 @import
-├── .github/
-│   ├── workflows/ci.yml       # lint·test·build + 에러 코드 동기화 + 인프라(compose·Dockerfile·nginx) 검사
-│   └── pull_request_template.md
-├── ci/                        # CI 러너 (Gitea Actions) — 앱 스택과 분리
-└── .claude/
-    ├── settings.json   # Claude Code 권한·환경 설정
-    ├── rules/          # 공통 규칙 (코딩·응답 포맷·에러 코드·API 설계·로깅·보안·환경변수·테스트)
-    ├── skills/         # 도메인별 개발 규칙 (nestjs·vue3·flutter·docker)
-    └── agents/         # 역할별 규칙 (개발 3종·테스터·리뷰어·인프라·사용자/관리자 관점)
+├── backend/      # NestJS API — modules/(auth · mail · contacts · file-storage · push · ops 등) · common · shared
+├── frontend/     # Vue 3 웹메일 — pages · components · composables · stores · router, 운영 nginx 설정
+├── flutter/      # 휴대폰 앱 — core · features · shared
+├── mail/         # 메일 엔진 setup 스크립트 · DNS 리졸버 · ClamAV 설정 · 운영 문서(README)
+├── ops/          # 운영 서버의 백업 · 점검 · 부팅 되살리기(systemd)
+├── docs/         # API 계약 · 화면 디자인(캔버스 보드) · 브랜드 · 로드맵
+├── ci/           # CI 러너(Gitea Actions) — 앱 스택과 따로 띄운다
+├── data/         # 개발용 바인드 마운트 자리(내용은 커밋하지 않는다)
+├── docker-compose.yml               # 운영 · 개발 공통 정의
+├── docker-compose.dev.yml           # 개발 오버라이드(핫리로드 · 127.0.0.1 포트)
+├── docker-compose.remote-proxy.yml  # 리버스 프록시가 다른 서버에 있을 때(운영 선택)
+├── CLAUDE.md     # 개발 규칙의 입구(.claude/ 의 규칙을 불러온다)
+├── .github/      # CI 워크플로(ci.yml · ci-flutter.yml) · PR 양식
+└── .claude/      # rules(공통 규칙) · skills(스택별 규칙) · agents(역할) · 설정
 ```
diff --git a/backend/README.md b/backend/README.md
index 8f0f65f..bddfea7 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -1,98 +1,36 @@
-<p align="center">
-  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
-</p>
+# backend — ARA SYSTEM API (NestJS)
 
-[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
-[circleci-url]: https://circleci.com/gh/nestjs/nest
+웹 · 앱이 함께 쓰는 REST API 다(`/api`). 메일 엔진(Stalwart)을 JMAP 으로 감싸고, 로그인 세션 · 설정 · 검색 색인 · 앱 알림 · 대용량 첨부 · 운영 도구를 맡는다.
 
-  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
-    <p align="center">
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
-<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
-<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
-<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
-<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
-<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
-  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" alt="Donate us"/></a>
-    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
-  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow" alt="Follow us on Twitter"></a>
-</p>
-  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
-  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
+- 모듈 지도 · 개발 규칙: [`.claude/skills/nestjs/SKILL.md`](../.claude/skills/nestjs/SKILL.md)
+- API 약속(웹 · 앱과 함께): [`docs/mail/api-contract.md`](../docs/mail/api-contract.md)
+- 공통 규칙(응답 꼴 · 에러 코드 · 로그 · 보안): [`CLAUDE.md`](../CLAUDE.md)
 
-## Description
+## 실행 — 컨테이너로
 
-[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
-
-## Project setup
+백엔드는 늘 컨테이너로 띄운다. 의존성 · lock 이 Linux 기준이라 **호스트에서 `npm install` 하지 않는다**(바꿀 때도 컨테이너 안에서 — nestjs 스킬 "의존성 추가/제거").
 
 ```bash
-$ npm install
+# 저장소 루트에서 — 개발 스택(backend + db + 메일 엔진)
+docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development up -d
+docker compose -f docker-compose.yml -f docker-compose.dev.yml --env-file .env.development logs -f backend
 ```
 
-## Compile and run the project
+- 처음 띄우면 마이그레이션을 한 번 돌리고 watch 빌드를 시작한다(Windows 바인드 마운트라 수십 분 걸릴 수 있다). 코드를 고치면 저절로 다시 뜬다.
+- Swagger: <http://localhost:3000/api-docs>
+
+## 시험 · 검사
 
 ```bash
-# development
-$ npm run start
-
-# watch mode
-$ npm run start:dev
-
-# production mode
-$ npm run start:prod
+docker exec arasystem-backend npm run lint                             # 경고 0
+docker exec arasystem-backend npm run test                             # 단위 — 메모리가 빠듯하면 -- --maxWorkers=2
+docker exec arasystem-backend npx jest --config ./test/jest-e2e.json   # e2e — DB · 메일 엔진 필요
 ```
 
-## Run tests
+컨테이너 이름은 `<PROJECT_NAME>-backend`(개발 기본 `arasystem`). Git Bash 에서 컨테이너 안 경로를 줄 때는 `MSYS_NO_PATHCONV=1` 을 붙인다.
 
-```bash
-# unit tests
-$ npm run test
+## 자주 하는 일
 
-# e2e tests
-$ npm run test:e2e
-
-# test coverage
-$ npm run test:cov
-```
-
-## Deployment
-
-When you're ready to deploy your NestJS application to production, there are some key steps you can take to ensure it runs as efficiently as possible. Check out the [deployment documentation](https://docs.nestjs.com/deployment) for more information.
-
-If you are looking for a cloud-based platform to deploy your NestJS application, check out [Mau](https://mau.nestjs.com), our official platform for deploying NestJS applications on AWS. Mau makes deployment straightforward and fast, requiring just a few simple steps:
-
-```bash
-$ npm install -g @nestjs/mau
-$ mau deploy
-```
-
-With Mau, you can deploy your application in just a few clicks, allowing you to focus on building features rather than managing infrastructure.
-
-## Resources
-
-Check out a few resources that may come in handy when working with NestJS:
-
-- Visit the [NestJS Documentation](https://docs.nestjs.com) to learn more about the framework.
-- For questions and support, please visit our [Discord channel](https://discord.gg/G7Qnnhy).
-- To dive deeper and get more hands-on experience, check out our official video [courses](https://courses.nestjs.com/).
-- Deploy your application to AWS with the help of [NestJS Mau](https://mau.nestjs.com) in just a few clicks.
-- Visualize your application graph and interact with the NestJS application in real-time using [NestJS Devtools](https://devtools.nestjs.com).
-- Need help with your project (part-time to full-time)? Check out our official [enterprise support](https://enterprise.nestjs.com).
-- To stay in the loop and get updates, follow us on [X](https://x.com/nestframework) and [LinkedIn](https://linkedin.com/company/nestjs).
-- Looking for a job, or have a job to offer? Check out our official [Jobs board](https://jobs.nestjs.com).
-
-## Support
-
-Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
-
-## Stay in touch
-
-- Author - [Kamil Myśliwiec](https://twitter.com/kammysliwiec)
-- Website - [https://nestjs.com](https://nestjs.com/)
-- Twitter - [@nestframework](https://twitter.com/nestframework)
-
-## License
-
-Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).
+- **에러 코드**: `src/common/errors/error-codes.ts` 만 고치고 호스트에서 `cd backend && npm run sync:error-codes`(웹 · 앱 사전이 함께 바뀐다).
+- **DB 스키마**: 엔티티를 고친 뒤 `docker exec arasystem-backend npm run migration:generate -- src/migrations/<이름>` → 만든 SQL 을 눈으로 확인 → 엔티티와 함께 커밋(nestjs 스킬 "DB 마이그레이션").
+- **운영 도구**(운영 서버 안 명령 — 입사 · 비밀번호 재설정 · 휴대폰 앱 올리기 등): `sudo docker exec -it <PROJECT_NAME>-backend node dist/cli/ops.js` — 계약 6절 · mail/README.
diff --git a/backend/src/modules/file-sharing/file-sharing.repository.ts b/backend/src/modules/file-sharing/file-sharing.repository.ts
index dd04ee4..ffa968c 100644
--- a/backend/src/modules/file-sharing/file-sharing.repository.ts
+++ b/backend/src/modules/file-sharing/file-sharing.repository.ts
@@ -97,6 +97,19 @@ export class FileSharingRepository {
     await this.links.update({ id }, { sentEmailId });
   }
 
+  /** 보낸 때를 앞당긴다 — 취소하지 않았고 지금 보낸 때가 더 늦을 때만, 한 문장으로 (true = 바꿨다) */
+  async moveSentAtEarlier(id: string, sentAt: Date): Promise<boolean> {
+    const result = await this.links
+      .createQueryBuilder()
+      .update(ShareLinkEntity)
+      .set({ sentAt })
+      .where('id = :id', { id })
+      .andWhere('canceled_at IS NULL')
+      .andWhere('sent_at > :sentAt', { sentAt })
+      .execute();
+    return (result.affected ?? 0) > 0;
+  }
+
   /** 취소한 링크로 — 이미 취소했으면 그대로 (true = 이번에 바꿨다) */
   async cancel(
     id: string,
diff --git a/backend/src/modules/file-sharing/file-sharing.service.spec.ts b/backend/src/modules/file-sharing/file-sharing.service.spec.ts
index 4fe6cfc..d8549b0 100644
--- a/backend/src/modules/file-sharing/file-sharing.service.spec.ts
+++ b/backend/src/modules/file-sharing/file-sharing.service.spec.ts
@@ -91,6 +91,16 @@ class FakeRepository {
     return Promise.resolve();
   }
 
+  /** 실제 표처럼 — 취소하지 않았고 지금 보낸 때가 더 늦을 때만 (조건부 UPDATE 한 문장) */
+  moveSentAtEarlier(id: string, sentAt: Date) {
+    const link = this.records.find((item) => item.link.id === id)?.link;
+    if (!link || link.canceledAt !== null || link.sentAt <= sentAt) {
+      return Promise.resolve(false);
+    }
+    link.sentAt = sentAt;
+    return Promise.resolve(true);
+  }
+
   cancel(id: string, reason: 'send-failed' | 'send-canceled', now: Date) {
     const link = this.records.find((item) => item.link.id === id)?.link;
     if (!link || link.canceledAt !== null) return Promise.resolve(false);
@@ -314,6 +324,34 @@ describe('FileSharingService — 공유 링크 · 공개 내려받기 (11단계)
     expect(await codeOf(() => service.publicLink(token))).toBe('RES_001');
   });
 
+  it('예약 메일을 지금 보냈으면(메일 15단계) 보낸 때를 앞당긴다 — 끝나는 때는 그대로(덩이가 적은 날짜), 취소한 링크 · 더 늦은 시각은 바꾸지 않는다', async () => {
+    const { service, repository } = setup();
+    const scheduled = new Date(Date.now() + 5 * 24 * 60 * 60_000);
+    const created = await service.createMailLink({
+      ownerEmail: ARA,
+      senderName: '김아라',
+      files: [{ id: FILE_A, name: '설계도.dwg', size: CONTENT.length }],
+      sentAt: scheduled,
+      messageId: 'ara.release@arasystem.test',
+    });
+    const { link } = created.record;
+    const expiresAt = link.expiresAt.getTime();
+    const now = new Date();
+
+    await expect(service.markReleased(link.id, now)).resolves.toBe(true);
+    expect(link.sentAt).toEqual(now);
+    expect(link.expiresAt.getTime()).toBe(expiresAt);
+    // 다시 와도(응답을 받지 못한 재시도) 더 늦은 시각으로 되돌리지 않는다
+    await expect(service.markReleased(link.id, scheduled)).resolves.toBe(false);
+    expect(link.sentAt).toEqual(now);
+
+    await service.cancel(created.record, 'send-canceled');
+    await expect(
+      service.markReleased(link.id, new Date(now.getTime() - 1_000)),
+    ).resolves.toBe(false);
+    expect(repository.records).toHaveLength(1);
+  });
+
   describe('파일 응답 (Range · HEAD · 횟수)', () => {
     it('전체 200 — 내려받기 머리글(형식 · 이름 · nosniff · sandbox · no-store · ETag · Accept-Ranges · X-Accel-Buffering)', async () => {
       const { service } = setup();
diff --git a/backend/src/modules/file-sharing/file-sharing.service.ts b/backend/src/modules/file-sharing/file-sharing.service.ts
index 76fc345..9d480d7 100644
--- a/backend/src/modules/file-sharing/file-sharing.service.ts
+++ b/backend/src/modules/file-sharing/file-sharing.service.ts
@@ -199,6 +199,15 @@ export class FileSharingService implements BeforeApplicationShutdown {
     await this.repository.markSent(linkId, sentEmailId);
   }
 
+  /**
+   * 예약한 메일을 지금 보냈다(메일 15단계 — 계약 2절 "보내기 취소 · 예약 발송") — 보낸 때를 실제로 보낸 때로 앞당긴다(보낸 링크 목록 · 공개 화면의 보낸 때).
+   * **끝나는 때는 그대로 둔다** — 보낸 메일의 덩이가 예약 시각으로 센 그 날짜를 이미 적었다. 앞당기면 받는 사람이 본 날짜보다 먼저 끝난다(파일 기간도 그대로라 다시 세지 않는다).
+   * 취소한 링크 · 이미 그보다 앞선 보낸 때는 바꾸지 않는다 (true = 바꿨다)
+   */
+  async markReleased(linkId: string, sentAt: Date): Promise<boolean> {
+    return this.repository.moveSentAtEarlier(linkId, sentAt);
+  }
+
   /**
    * 같은 Idempotency-Key 의 재시도가 처음 메일을 찾았다 — 그 발송이 만든 링크(보낸 메일을 모르는 것)에 보낸 사본을 잇는다.
    * 결과를 모르게 끝난 첫 시도의 링크가 이렇게 제자리를 찾는다 (계약 4절 "링크를 만드는 때")
diff --git a/backend/src/modules/mail/dto/mail-block-run.dto.ts b/backend/src/modules/mail/dto/mail-block-run.dto.ts
new file mode 100644
index 0000000..dfc3901
--- /dev/null
+++ b/backend/src/modules/mail/dto/mail-block-run.dto.ts
@@ -0,0 +1,86 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsString, Matches, MaxLength, ValidateIf } from 'class-validator';
+
+import {
+  MAIL_FILTER_RUN_CURSOR_PATTERN,
+  MAX_EMAIL_LENGTH,
+  MAX_MAIL_FILTER_RUN_CURSOR_LENGTH,
+} from '@/modules/mail/mail.constants';
+import type {
+  MailBlockRunRequest,
+  MailFilterRun,
+} from '@/modules/mail/mail.types';
+import { BlockAddress } from './mail-block.dto';
+
+/**
+ * 차단할 때 받은편지함 정리 — POST /api/mail-block-runs 의 본문과 응답 (계약 2절 "보낸 사람 차단" — 15단계).
+ * 보낸 사람은 차단하기와 같은 검사(주소 · `@도메인` 모양 · 254자 — mail-blocks.ts), 차단 목록에 있는지는 서비스가 본다(없으면 404 RES_001).
+ * cursor 는 이미 받은 메일에 필터 적용(dto/mail-filter-run.dto.ts)과 같은 검사다
+ */
+
+/** null 은 "처음부터"로 받는다 — 키가 없으면(undefined) 형식 오류다 (늘 보낸다) */
+const unlessNull = (_object: object, value: unknown) => value !== null;
+
+/** POST /api/mail-block-runs — 정리할 보낸 사람(차단 목록의 값)과 이어 할 자리 */
+export class MailBlockRunRequestDto implements MailBlockRunRequest {
+  @ApiProperty({
+    description:
+      '차단 목록의 값 그대로 — 소문자 주소("kim@spam.example") 또는 도메인("@spam.example"). 차단한 뒤에만 부른다 — 차단 목록에 없으면 404 RES_001',
+    example: '@spam.example',
+    maxLength: MAX_EMAIL_LENGTH,
+  })
+  @BlockAddress()
+  sender!: string;
+
+  @ApiProperty({
+    description:
+      '이어 할 자리 — 처음은 null, 이어 할 때는 앞 응답의 cursor 그대로(해석하지 않는다). 늘 보낸다. ' +
+      '다른 보낸 사람의 cursor · 깨진 cursor 는 400 VAL_001',
+    nullable: true,
+    type: String,
+    maxLength: MAX_MAIL_FILTER_RUN_CURSOR_LENGTH,
+    example: null,
+  })
+  @ValidateIf(unlessNull)
+  @IsString({ message: '이어 할 자리를 다시 받아 주세요.' })
+  @MaxLength(MAX_MAIL_FILTER_RUN_CURSOR_LENGTH, {
+    message: '이어 할 자리를 다시 받아 주세요.',
+  })
+  @Matches(MAIL_FILTER_RUN_CURSOR_PATTERN, {
+    message: '이어 할 자리를 다시 받아 주세요.',
+  })
+  cursor!: string | null;
+}
+
+/** POST /api/mail-block-runs 의 응답 — 이미 받은 메일에 필터 적용(MailFilterRun)과 같은 꼴 */
+export class MailBlockRunDto implements MailFilterRun {
+  @ApiProperty({
+    description: '이번 요청에서 확인한 받은편지함 메일 수',
+    example: 500,
+  })
+  scanned!: number;
+
+  @ApiProperty({
+    description:
+      '그중 그 보낸 사람의 메일이라 스팸메일함으로 옮긴 수 (스팸 표시도 붙였다). 보내기를 기다리는 메일은 옮기지 않아 세지 않는다',
+    example: 37,
+  })
+  matched!: number;
+
+  @ApiProperty({
+    description:
+      '아직 확인하지 않은 메일 수 — 어림(그사이 들어오고 나간 메일이 있다). 진행의 전체는 지금까지 확인한 수 + 이 값',
+    example: 4_300,
+  })
+  remaining!: number;
+
+  @ApiProperty({
+    description:
+      'null = 끝. 아니면 같은 본문에 이 cursor 를 넣어 다시 보낸다 (해석하지 않는다)',
+    nullable: true,
+    type: String,
+    example:
+      'eyJ2IjoyLCJiIjoxNzkzMjY0NDAxLCJhIjoic2VhYWFhZXIiLCJ0IjoxNzkzMjY0MzQwLCJyIjoiZDJWM2R0ejdOMmdCVVRyZyJ9',
+  })
+  cursor!: string | null;
+}
diff --git a/backend/src/modules/mail/dto/mail-block.dto.ts b/backend/src/modules/mail/dto/mail-block.dto.ts
index e1c001e..818922d 100644
--- a/backend/src/modules/mail/dto/mail-block.dto.ts
+++ b/backend/src/modules/mail/dto/mail-block.dto.ts
@@ -32,7 +32,8 @@ function IsBlockTarget() {
   );
 }
 
-function BlockAddress(): PropertyDecorator {
+/** 차단 대상 칸 — 차단하기(POST /api/mail-blocks) · 받은편지함 정리(POST /api/mail-block-runs — 15단계)가 같이 쓴다 */
+export function BlockAddress(): PropertyDecorator {
   return applyDecorators(
     TrimString(),
     IsString({ message: '메일 주소나 @도메인 형식으로 써 주세요.' }),
diff --git a/backend/src/modules/mail/dto/mailbox.dto.spec.ts b/backend/src/modules/mail/dto/mailbox.dto.spec.ts
index e1fc5ba..3e53ac7 100644
--- a/backend/src/modules/mail/dto/mailbox.dto.spec.ts
+++ b/backend/src/modules/mail/dto/mailbox.dto.spec.ts
@@ -4,8 +4,9 @@ import { validate } from 'class-validator';
 import { MAX_MAILBOX_NAME_LENGTH } from '@/modules/mail/mail.constants';
 import {
   CreateMailboxDto,
+  MailboxDeleteQueryDto,
   MailboxMessagesPatchDto,
-  RenameMailboxDto,
+  UpdateMailboxDto,
 } from './mailbox.dto';
 
 /** 전역 ValidationPipe 와 같은 옵션으로 검증한다 (app.setup.ts — stopAtFirstError 만 빼고 — 걸린 규칙을 모두 본다, 통과 · 실패는 같다) — 변환한 값과 걸린 규칙 이름 */
@@ -29,7 +30,7 @@ async function check<T extends object>(
 describe('메일함 요청 본문 (계약 2절 "메일함 관리")', () => {
   it.each([
     ['만들기', CreateMailboxDto],
-    ['이름 바꾸기', RenameMailboxDto],
+    ['바꾸기', UpdateMailboxDto],
   ] as const)(
     `%s — 이름은 앞뒤 공백을 뺀 1~${MAX_MAILBOX_NAME_LENGTH}자 (JS 문자열 길이)`,
     async (_name, type) => {
@@ -65,7 +66,7 @@ describe('메일함 요청 본문 (계약 2절 "메일함 관리")', () => {
 
   it.each([
     ['만들기', CreateMailboxDto],
-    ['이름 바꾸기', RenameMailboxDto],
+    ['바꾸기', UpdateMailboxDto],
   ] as const)(
     '%s — "/" 와 제어 문자(줄바꿈 · 탭 등)는 쓸 수 없다, 문자열이 아니면 형식 오류',
     async (_name, type) => {
@@ -87,31 +88,72 @@ describe('메일함 요청 본문 (계약 2절 "메일함 관리")', () => {
       expect((await check(type, { name: 7 })).constraints).toEqual(
         expect.arrayContaining(['isString']),
       );
-      expect((await check(type, {})).constraints).toEqual(
+      expect((await check(type, { name: null })).constraints).toEqual(
         expect.arrayContaining(['isString']),
       );
     },
   );
 
-  it('만들기의 상위는 없거나 null(맨 위) · 메일함 id 형식 — 이름 바꾸기에는 상위가 없다', async () => {
+  it('만들기는 이름이 없으면 형식 오류 — 바꾸기는 이름을 보내지 않아도 된다(빈 본문은 서비스가 VAL_001)', async () => {
+    expect((await check(CreateMailboxDto, {})).constraints).toEqual(
+      expect.arrayContaining(['isString']),
+    );
+    expect((await check(UpdateMailboxDto, {})).constraints).toEqual([]);
+  });
+
+  it.each([
+    ['만들기', CreateMailboxDto, { name: '거래처' }],
+    ['바꾸기(옮기기 — 15단계)', UpdateMailboxDto, {}],
+  ] as const)(
+    '%s의 상위는 없거나 null(맨 위) · 메일함 id 형식',
+    async (_name, type, base) => {
+      expect((await check(type, base)).constraints).toEqual([]);
+      expect(
+        (await check(type, { ...base, parentId: null })).constraints,
+      ).toEqual([]);
+      expect(
+        (await check(type, { ...base, parentId: 'a' })).constraints,
+      ).toEqual([]);
+      for (const parentId of ['../a', '', 'a b', 7]) {
+        expect((await check(type, { ...base, parentId })).constraints).toEqual([
+          'matches',
+        ]);
+      }
+    },
+  );
+
+  it('바꾸기는 이름 · 상위를 함께 받고, 보낸 값을 그대로 둔다 — null 상위는 null(맨 위), 보내지 않은 칸은 undefined', async () => {
+    const both = await check(UpdateMailboxDto, {
+      name: ' 2025 ',
+      parentId: 'u1',
+    });
+    expect(both.constraints).toEqual([]);
+    expect(both.dto).toMatchObject({ name: '2025', parentId: 'u1' });
+
+    const top = await check(UpdateMailboxDto, { parentId: null });
+    expect(top.constraints).toEqual([]);
+    expect(top.dto.parentId).toBeNull();
+    expect(top.dto.name).toBeUndefined();
+
     expect(
-      (await check(CreateMailboxDto, { name: '거래처' })).constraints,
-    ).toEqual([]);
+      (await check(UpdateMailboxDto, { name: '거래처', role: 'inbox' }))
+        .constraints,
+    ).toEqual(['whitelistValidation']);
+  });
+
+  it('지우기의 쿼리는 withChildren=true 만 받는다 (15단계 — 하위 메일함까지)', async () => {
+    expect((await check(MailboxDeleteQueryDto, {})).constraints).toEqual([]);
     expect(
-      (await check(CreateMailboxDto, { name: '거래처', parentId: null }))
+      (await check(MailboxDeleteQueryDto, { withChildren: 'true' }))
         .constraints,
     ).toEqual([]);
+    for (const withChildren of ['false', 'TRUE', '1', '', true]) {
+      expect(
+        (await check(MailboxDeleteQueryDto, { withChildren })).constraints,
+      ).toEqual(['isIn']);
+    }
     expect(
-      (await check(CreateMailboxDto, { name: '거래처', parentId: 'a' }))
-        .constraints,
-    ).toEqual([]);
-    expect(
-      (await check(CreateMailboxDto, { name: '거래처', parentId: '../a' }))
-        .constraints,
-    ).toEqual(['matches']);
-    expect(
-      (await check(RenameMailboxDto, { name: '거래처', parentId: 'a' }))
-        .constraints,
+      (await check(MailboxDeleteQueryDto, { recursive: 'true' })).constraints,
     ).toEqual(['whitelistValidation']);
   });
 
diff --git a/backend/src/modules/mail/dto/mailbox.dto.ts b/backend/src/modules/mail/dto/mailbox.dto.ts
index a4731b9..d10cec2 100644
--- a/backend/src/modules/mail/dto/mailbox.dto.ts
+++ b/backend/src/modules/mail/dto/mailbox.dto.ts
@@ -1,6 +1,13 @@
 import { applyDecorators } from '@nestjs/common';
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
-import { Equals, IsOptional, IsString, Matches } from 'class-validator';
+import {
+  Equals,
+  IsIn,
+  IsOptional,
+  IsString,
+  Matches,
+  ValidateIf,
+} from 'class-validator';
 
 import {
   MaxCodeUnits,
@@ -16,15 +23,32 @@ import {
 /** 메일함 이름에 쓸 수 없는 '/' — 경로 구분자로 읽는 메일 프로그램이 있다 (계약 2절 "메일함 관리") */
 const NO_SLASH_PATTERN = /^[^/]*$/;
 
-/** 메일함 이름 — 앞뒤 공백을 뺀 1~MAX_MAILBOX_NAME_LENGTH 자(JS 문자열 길이), `/` · 제어 문자 없음. 만들기 · 이름 바꾸기가 같이 쓴다 */
-function MailboxName() {
+/** 메일함 이름 칸의 설명 */
+const MAILBOX_NAME_DESCRIPTION = `메일함 이름 — 앞뒤 공백을 뺀 1~${MAX_MAILBOX_NAME_LENGTH}자(JS 문자열 길이). "/" 와 제어 문자(줄바꿈 · 탭 등)는 쓸 수 없다. 같은 상위 안에 같은 이름이 있으면 409 MAIL_009`;
+
+/** 보낸 칸만 검사한다 — 없으면(undefined) 건너뛰고, null 은 검사해 형식 오류로 막는다 (이름 · 상위 가운데 바꿀 것만 보내는 PATCH) */
+const unlessAbsent = (_object: object, value: unknown) => value !== undefined;
+
+/**
+ * 메일함 이름 — 앞뒤 공백을 뺀 1~MAX_MAILBOX_NAME_LENGTH 자(JS 문자열 길이), `/` · 제어 문자 없음. 만들기 · 바꾸기가 같이 쓴다.
+ * `optional` 이면(바꾸기 — 15단계) 보내지 않아도 된다 — 보낸 값은 같은 검사를 한다(null 도 형식 오류)
+ */
+function MailboxName({ optional = false }: { optional?: boolean } = {}) {
   return applyDecorators(
-    ApiProperty({
-      description: `메일함 이름 — 앞뒤 공백을 뺀 1~${MAX_MAILBOX_NAME_LENGTH}자(JS 문자열 길이). "/" 와 제어 문자(줄바꿈 · 탭 등)는 쓸 수 없다. 같은 상위 안에 같은 이름이 있으면 409 MAIL_009`,
-      example: '프로젝트',
-      minLength: 1,
-      maxLength: MAX_MAILBOX_NAME_LENGTH,
-    }),
+    optional
+      ? ApiPropertyOptional({
+          description: `${MAILBOX_NAME_DESCRIPTION}. 보내지 않으면 이름은 그대로`,
+          example: '프로젝트',
+          minLength: 1,
+          maxLength: MAX_MAILBOX_NAME_LENGTH,
+        })
+      : ApiProperty({
+          description: MAILBOX_NAME_DESCRIPTION,
+          example: '프로젝트',
+          minLength: 1,
+          maxLength: MAX_MAILBOX_NAME_LENGTH,
+        }),
+    ...(optional ? [ValidateIf(unlessAbsent)] : []),
     TrimString(),
     IsString({ message: '메일함 이름 형식이 올바르지 않습니다.' }),
     MinCodeUnits(1, { message: '메일함 이름을 입력해 주세요.' }),
@@ -59,10 +83,43 @@ export class CreateMailboxDto {
   parentId?: string | null;
 }
 
-/** PATCH /api/mailboxes/{id} — 이름만 바꾼다 (다른 상위로 옮기기는 이 단계에서 하지 않는다) */
-export class RenameMailboxDto {
-  @MailboxName()
-  name!: string;
+/**
+ * PATCH /api/mailboxes/{id} — 이름 · 상위(옮기기 — 15단계) 가운데 바꿀 것만. 둘 다 없으면(빈 본문) 서비스가 400 VAL_001.
+ * 상위의 자리 규칙(만들기와 같다) · 자기 자신 · 하위 아래로 옮기기는 어댑터가 본다
+ */
+export class UpdateMailboxDto {
+  @MailboxName({ optional: true })
+  name?: string;
+
+  @ApiPropertyOptional({
+    description:
+      '새 상위 메일함 id — null 이면 맨 위, 보내지 않으면 상위는 그대로. 만들기와 같은 자리만(받은편지함 · 보관함 · 내 메일함 아래 — 그 밖 400 VAL_001, 없는 id 는 404 RES_001). ' +
+      '자기 자신 · 자기 하위 아래로는 400 VAL_001. 하위 메일함과 안의 메일은 함께 간다',
+    nullable: true,
+    type: String,
+    example: 'a',
+  })
+  @IsOptional()
+  @Matches(MAIL_ID_PATTERN, { message: '옮길 곳을 다시 선택해 주세요.' })
+  parentId?: string | null;
+}
+
+/** 하위 메일함까지 지우기의 값 — 이것만 받는다 (15단계) */
+export const WITH_CHILDREN = 'true';
+
+/** DELETE /api/mailboxes/{id} 의 쿼리 — withChildren=true 면 하위 메일함까지 지운다 (15단계). 모르는 쿼리는 400 VAL_001 */
+export class MailboxDeleteQueryDto {
+  @ApiPropertyOptional({
+    description:
+      'true 면 하위 메일함이 있어도 그 메일함과 하위 모두를 지운다(깊은 것부터 — 안의 메일은 휴지통으로). 없으면 하위가 있을 때 400 VAL_001(옛 화면이 모르고 하위를 지우지 않게). 다른 값은 400 VAL_001',
+    enum: [WITH_CHILDREN],
+    example: WITH_CHILDREN,
+  })
+  @IsOptional()
+  @IsIn([WITH_CHILDREN], {
+    message: '하위 메일함 지우기 값이 올바르지 않습니다.',
+  })
+  withChildren?: typeof WITH_CHILDREN;
 }
 
 /** PATCH /api/mailboxes/{id}/messages — 그 메일함 전체를 읽음으로 (true 만 받는다) */
diff --git a/backend/src/modules/mail/jmap/filter-run-cursor.spec.ts b/backend/src/modules/mail/jmap/filter-run-cursor.spec.ts
index 8fdaba7..fe660ef 100644
--- a/backend/src/modules/mail/jmap/filter-run-cursor.spec.ts
+++ b/backend/src/modules/mail/jmap/filter-run-cursor.spec.ts
@@ -1,7 +1,9 @@
 import { BusinessException } from '@/common/errors/business.exception';
 import type { MailFilterRunRequest } from '@/modules/mail/mail.types';
 import {
+  decodeBlockRunCursor,
   decodeFilterRunCursor,
+  encodeBlockRunCursor,
   encodeFilterRunCursor,
   MAX_FILTER_RUN_SECONDS,
   type FilterRunPosition,
@@ -172,3 +174,62 @@ describe('이미 받은 메일에 필터 적용의 cursor (계약 2절 "이미 
     ).toEqual({ before: NINE, anchor: null, anchorTime: null });
   });
 });
+
+describe('차단할 때 받은편지함 정리의 cursor (15단계 — 계약 2절 "보낸 사람 차단")', () => {
+  const position: FilterRunPosition = {
+    before: NINE + 1,
+    anchor: 'seaaaaer',
+    anchorTime: NINE - 60,
+  };
+
+  it('자리는 필터 적용과 같은 모양으로 되돌린다 — 지문은 그 보낸 사람', () => {
+    for (const sender of ['kim@spam.example', '@spam.example']) {
+      expect(
+        decodeBlockRunCursor(encodeBlockRunCursor(position, sender), sender),
+      ).toEqual(position);
+    }
+    expect(encodeBlockRunCursor(position, '@spam.example')).toMatch(
+      /^[A-Za-z0-9_-]+$/,
+    );
+  });
+
+  it('다른 보낸 사람의 cursor · 필터 적용의 cursor 는 VAL_001 — 거꾸로 차단 정리의 cursor 로 필터를 이어 하지도 못한다', () => {
+    const cursor = encodeBlockRunCursor(position, 'kim@spam.example');
+    for (const other of ['lee@spam.example', '@spam.example']) {
+      expect(failureOf(() => decodeBlockRunCursor(cursor, other))).toEqual({
+        code: 'VAL_001',
+        reason: 'invalid-mail-block-run-cursor:other-sender',
+      });
+    }
+    expect(
+      failureOf(() =>
+        decodeBlockRunCursor(
+          encodeFilterRunCursor(position, rule),
+          'kim@spam.example',
+        ),
+      ),
+    ).toEqual({
+      code: 'VAL_001',
+      reason: 'invalid-mail-block-run-cursor:other-sender',
+    });
+    expect(failureOf(() => decodeFilterRunCursor(cursor, rule))).toEqual({
+      code: 'VAL_001',
+      reason: 'invalid-filter-run-cursor:other-rule',
+    });
+  });
+
+  it('깨진 cursor 는 필터 적용과 같은 검사로 VAL_001', () => {
+    for (const [cursor, reason] of [
+      ['%%%', 'not-json'],
+      [forged({ v: 1, b: NINE }), 'shape'],
+      ['a'.repeat(1_025), 'too-long'],
+    ] as const) {
+      expect(
+        failureOf(() => decodeBlockRunCursor(cursor, 'kim@spam.example')),
+      ).toEqual({
+        code: 'VAL_001',
+        reason: `invalid-mail-block-run-cursor:${reason}`,
+      });
+    }
+  });
+});
diff --git a/backend/src/modules/mail/jmap/filter-run-cursor.ts b/backend/src/modules/mail/jmap/filter-run-cursor.ts
index 057c3e1..840c4f5 100644
--- a/backend/src/modules/mail/jmap/filter-run-cursor.ts
+++ b/backend/src/modules/mail/jmap/filter-run-cursor.ts
@@ -17,7 +17,10 @@ import type { MailFilterRunRequest } from '@/modules/mail/mail.types';
  * - anchorTime: 그 메일의 받은 시각(초) — 그 메일이 그사이 받은편지함에서 빠졌으면(`anchorNotFound`) `before: anchorTime + 1초` 의 처음부터 읽는다
  *   (그 초의 메일을 다시 판정한다 — 건너뛰지 않는다). 그렇게 읽은 차례에 남긴 메일이 없으면 anchor 는 없고 anchorTime 만 남는다
  * - 규칙의 지문: 묶는 방법 · 조건 · 할 일 — 다른 규칙의 cursor 를 섞어 쓰지 못하게 (충돌보다는 "다른 규칙" 감지가 목적이라 짧게 둔다)
- * 시각은 UTC 의 초(epoch)다 — 해석할 때 범위(0 ~ 9999-12-31)를 본다. 깨졌거나 다른 규칙의 것이면 400 VAL_001 — 엔진에 묻기 전에 본다
+ * 시각은 UTC 의 초(epoch)다 — 해석할 때 범위(0 ~ 9999-12-31)를 본다. 깨졌거나 다른 규칙의 것이면 400 VAL_001 — 엔진에 묻기 전에 본다.
+ *
+ * 차단할 때 받은편지함 정리(15단계 — 계약 2절 "보낸 사람 차단")도 같은 자리 · 같은 모양을 쓴다 — 지문만 그 보낸 사람(차단 목록의 값)이다.
+ * 지문의 재료가 달라(필터는 규칙의 세 칸, 차단은 표시 글 + 보낸 사람) 필터 적용의 cursor 를 차단 정리에 쓰면 다른 주인의 것으로 막힌다
  */
 const CURSOR_VERSION = 2;
 
@@ -51,9 +54,20 @@ interface EncodedFilterRunCursor {
   r: string;
 }
 
+/** 차단 정리 cursor 의 지문 재료 앞에 두는 표시 — 필터 규칙의 재료(첫 칸이 묶는 방법)와 섞이지 않게 */
+const MAIL_BLOCK_SCOPE = 'mail-block';
+
+/** 정해진 차례의 JSON 을 SHA-256 으로 — 짧게 자른다 */
+function scopeHash(canonical: unknown[]): string {
+  return createHash('sha256')
+    .update(JSON.stringify(canonical), 'utf8')
+    .digest('base64url')
+    .slice(0, RULE_HASH_LENGTH);
+}
+
 /** 규칙의 지문 — 정해진 차례의 JSON 을 SHA-256 으로 (들어온 객체의 키 순서 · 다른 속성과 상관없다) */
 function ruleHash(rule: FilterRunRule): string {
-  const canonical = JSON.stringify([
+  return scopeHash([
     rule.match,
     rule.conditions.map(({ field, operator, value }) => [
       field,
@@ -62,15 +76,19 @@ function ruleHash(rule: FilterRunRule): string {
     ]),
     [rule.actions.moveToMailboxId, rule.actions.markAsRead, rule.actions.flag],
   ]);
-  return createHash('sha256')
-    .update(canonical, 'utf8')
-    .digest('base64url')
-    .slice(0, RULE_HASH_LENGTH);
 }
 
-function invalidCursor(reason: string): BusinessException {
+/** 차단 정리의 지문 — 보낸 사람(차단 목록의 값 — 소문자) */
+function senderHash(sender: string): string {
+  return scopeHash([MAIL_BLOCK_SCOPE, sender]);
+}
+
+/** 깨진 cursor 의 로그 까닭 — 필터 적용 · 차단 정리를 가른다 */
+type CursorKind = 'filter-run' | 'mail-block-run';
+
+function invalidCursor(kind: CursorKind, reason: string): BusinessException {
   return new BusinessException('VAL_001', {
-    context: { reason: `invalid-filter-run-cursor:${reason}` },
+    context: { reason: `invalid-${kind}-cursor:${reason}` },
   });
 }
 
@@ -84,50 +102,85 @@ function isSeconds(value: unknown): value is number {
   );
 }
 
-export function encodeFilterRunCursor(
-  position: FilterRunPosition,
-  rule: FilterRunRule,
-): string {
+/** 자리와 지문을 cursor 로 */
+function encodeRunCursor(position: FilterRunPosition, hash: string): string {
   const payload: EncodedFilterRunCursor = {
     v: CURSOR_VERSION,
     b: position.before,
     a: position.anchor,
     t: position.anchorTime,
-    r: ruleHash(rule),
+    r: hash,
   };
   return Buffer.from(JSON.stringify(payload)).toString('base64url');
 }
 
+/** cursor 를 해석한다 — 형식 · 범위가 틀리거나 지문이 다르면(다른 주인의 cursor) VAL_001 */
+function decodeRunCursor(
+  cursor: string,
+  hash: string,
+  kind: CursorKind,
+): FilterRunPosition {
+  if (cursor.length > MAX_MAIL_FILTER_RUN_CURSOR_LENGTH) {
+    throw invalidCursor(kind, 'too-long');
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(Buffer.from(cursor, 'base64url').toString('utf8'));
+  } catch {
+    throw invalidCursor(kind, 'not-json');
+  }
+
+  const { v, b, a, t, r } = (parsed ?? {}) as Partial<EncodedFilterRunCursor>;
+  if (v !== CURSOR_VERSION || !isSeconds(b) || b === 0) {
+    throw invalidCursor(kind, 'shape');
+  }
+  if (!(a === null || (typeof a === 'string' && MAIL_ID_PATTERN.test(a)))) {
+    throw invalidCursor(kind, 'shape');
+  }
+  // anchor 가 있으면 그 받은 시각도 있다 — 위 경계보다 앞선다
+  if (!(t === null || (isSeconds(t) && t < b)) || (a !== null && t === null)) {
+    throw invalidCursor(kind, 'shape');
+  }
+  if (typeof r !== 'string') throw invalidCursor(kind, 'shape');
+
+  if (r !== hash) {
+    throw invalidCursor(
+      kind,
+      kind === 'filter-run' ? 'other-rule' : 'other-sender',
+    );
+  }
+
+  return { before: b, anchor: a, anchorTime: t };
+}
+
+export function encodeFilterRunCursor(
+  position: FilterRunPosition,
+  rule: FilterRunRule,
+): string {
+  return encodeRunCursor(position, ruleHash(rule));
+}
+
 /** cursor 를 해석한다 — 형식 · 범위가 틀리거나 다른 규칙의 것이면 VAL_001 */
 export function decodeFilterRunCursor(
   cursor: string,
   rule: FilterRunRule,
 ): FilterRunPosition {
-  if (cursor.length > MAX_MAIL_FILTER_RUN_CURSOR_LENGTH) {
-    throw invalidCursor('too-long');
-  }
-
-  let parsed: unknown;
-  try {
-    parsed = JSON.parse(Buffer.from(cursor, 'base64url').toString('utf8'));
-  } catch {
-    throw invalidCursor('not-json');
-  }
-
-  const { v, b, a, t, r } = (parsed ?? {}) as Partial<EncodedFilterRunCursor>;
-  if (v !== CURSOR_VERSION || !isSeconds(b) || b === 0) {
-    throw invalidCursor('shape');
-  }
-  if (!(a === null || (typeof a === 'string' && MAIL_ID_PATTERN.test(a)))) {
-    throw invalidCursor('shape');
-  }
-  // anchor 가 있으면 그 받은 시각도 있다 — 위 경계보다 앞선다
-  if (!(t === null || (isSeconds(t) && t < b)) || (a !== null && t === null)) {
-    throw invalidCursor('shape');
-  }
-  if (typeof r !== 'string') throw invalidCursor('shape');
-
-  if (r !== ruleHash(rule)) throw invalidCursor('other-rule');
-
-  return { before: b, anchor: a, anchorTime: t };
+  return decodeRunCursor(cursor, ruleHash(rule), 'filter-run');
+}
+
+/** 차단 정리의 cursor (15단계) — 자리는 필터 적용과 같고 지문은 그 보낸 사람 */
+export function encodeBlockRunCursor(
+  position: FilterRunPosition,
+  sender: string,
+): string {
+  return encodeRunCursor(position, senderHash(sender));
+}
+
+/** 차단 정리의 cursor 를 해석한다 — 형식 · 범위가 틀리거나 다른 보낸 사람(또는 필터 적용)의 것이면 VAL_001 */
+export function decodeBlockRunCursor(
+  cursor: string,
+  sender: string,
+): FilterRunPosition {
+  return decodeRunCursor(cursor, senderHash(sender), 'mail-block-run');
 }
diff --git a/backend/src/modules/mail/jmap/filter-run-texts.ts b/backend/src/modules/mail/jmap/filter-run-texts.ts
index acf2db8..8b7b4b5 100644
--- a/backend/src/modules/mail/jmap/filter-run-texts.ts
+++ b/backend/src/modules/mail/jmap/filter-run-texts.ts
@@ -83,6 +83,33 @@ function decodedHeaders(email: JmapEmail, names: readonly string[]): string[] {
   );
 }
 
+/**
+ * 차단할 때 받은편지함 정리(15단계)가 읽는 보낸 사람 — 엔진이 푼 From 머리글의 주소 목록, 같은 이름의 머리글이 여럿이면 모두(머리글마다 배열).
+ * Sieve 의 `address` 판정(jmap/sieve-script.ts 의 blockSection)이 견주는 것과 같다 — 표시 이름에 쓴 주소는 들지 않는다.
+ * 엔진은 물은 이름 그대로 답한다(Stalwart 0.16.27 — 2026-11-09 확인: `[[{ name, email }]]`)
+ */
+export const FROM_ADDRESSES_PROPERTY = 'header:From:asAddresses:all';
+
+/** From 머리글들의 주소 — 물은 이름으로 찾되 대소문자가 달라도 찾는다. 모양이 틀린 칸은 건너뛴다 */
+export function fromAddressesOf(email: JmapEmail): string[] {
+  const wanted = FROM_ADDRESSES_PROPERTY.toLowerCase();
+  for (const [key, value] of Object.entries(email)) {
+    if (key.toLowerCase() !== wanted || !Array.isArray(value)) continue;
+    return value.flatMap((header: unknown) =>
+      Array.isArray(header)
+        ? header.flatMap((address: unknown) => {
+            const found =
+              typeof address === 'object' && address !== null
+                ? (address as { email?: unknown }).email
+                : undefined;
+            return typeof found === 'string' ? [found] : [];
+          })
+        : [],
+    );
+  }
+  return [];
+}
+
 /** 머리글의 견줄 글 — 보낸 사람 · 받는 사람 · 제목 (본문은 bodyTextsOf) */
 export function headerTextsOf(email: JmapEmail): Omit<MailFilterTexts, 'body'> {
   const subject = email.subject;
diff --git a/backend/src/modules/mail/jmap/jmap-filter-run.spec.ts b/backend/src/modules/mail/jmap/jmap-filter-run.spec.ts
index 68bdac7..40f7ce8 100644
--- a/backend/src/modules/mail/jmap/jmap-filter-run.spec.ts
+++ b/backend/src/modules/mail/jmap/jmap-filter-run.spec.ts
@@ -11,6 +11,7 @@ import type {
 } from '@/modules/mail/mail.types';
 import {
   decodeFilterRunCursor,
+  encodeBlockRunCursor,
   encodeFilterRunCursor,
 } from './filter-run-cursor';
 import type { JmapClient } from './jmap.client';
@@ -1180,6 +1181,278 @@ describe('JmapFilterRunner — 이미 받은 메일에 필터 적용 (계약 2
         ).toMatchObject({ code: 'MAIL_001', reason: 'timeout' });
       });
     });
+
+    describe('차단할 때 받은편지함 정리 (runBlock — 15단계)', () => {
+      const JUNK = 'k';
+      const BLOCK_MAILBOXES: readonly Mailbox[] = [
+        mailbox(INBOX, 'inbox', 3),
+        mailbox(TARGET, null),
+        mailbox(JUNK, 'junk'),
+      ];
+      const blockContext = (
+        overrides: Partial<MailFilterRunContext> = {},
+      ): MailFilterRunContext => ({
+        mailboxes: BLOCK_MAILBOXES,
+        startedAt: Date.now(),
+        ...overrides,
+      });
+      /** 받은편지함의 메일 — 엔진이 푼 From 머리글의 주소(머리글마다 배열) */
+      const fromMail = (
+        id: string,
+        ...headers: { name: string | null; email: string }[][]
+      ) => ({
+        id,
+        mailboxIds: { [INBOX]: true },
+        receivedAt: utc(T0),
+        'header:From:asAddresses:all': headers,
+      });
+      const KIM = { name: null, email: 'kim@spam.example' };
+      const junkPatch = {
+        [`mailboxIds/${INBOX}`]: null,
+        [`mailboxIds/${JUNK}`]: true,
+        'keywords/$junk': true,
+        'keywords/$notjunk': null,
+      };
+
+      it('받은편지함을 받은 시각 내림차순으로 읽어 엔진이 푼 From 주소로 판정하고, 맞은 메일을 스팸메일함으로 옮기며 스팸 표시 — 옮기기는 읽은 상태 그대로일 때만', async () => {
+        const { runner, recorded } = fakeRunner([
+          page(
+            ['m1', 'm2', 'm3'],
+            [
+              fromMail('m1', [KIM]),
+              fromMail('m2', [{ name: null, email: 'lee@spam.example' }]),
+              fromMail('m3', [{ name: 'Kim', email: 'KIM@Spam.Example' }]),
+            ],
+          ),
+          updated(['m1', 'm3']),
+        ]);
+
+        await expect(
+          runner.runBlock(
+            ARA,
+            { sender: 'kim@spam.example', cursor: null },
+            blockContext(),
+          ),
+        ).resolves.toEqual({
+          scanned: 3,
+          matched: 2,
+          remaining: 0,
+          cursor: null,
+          rounds: 1,
+        });
+        expect(argsOf(recorded[0])).toMatchObject({
+          filter: { inMailbox: INBOX },
+          sort: [{ property: 'receivedAt', isAscending: false }],
+          limit: 500,
+          calculateTotal: true,
+        });
+        expect(argsOf(recorded[0], 1)).toMatchObject({
+          properties: [
+            'id',
+            'mailboxIds',
+            'receivedAt',
+            'header:From:asAddresses:all',
+          ],
+        });
+        // 붙잡힌 메일을 같은 요청에서 묻는다 (9단계 — 옮기지 않는다)
+        expect(methodsOf([recorded[0]])).toEqual([
+          'Email/query',
+          'Email/get',
+          'EmailSubmission/query',
+          'EmailSubmission/get',
+        ]);
+        expect(argsOf(recorded[1])).toEqual({
+          accountId: 'd',
+          ifInState: 's1',
+          update: { m1: junkPatch, m3: junkPatch },
+        });
+      });
+
+      it('판정은 차단 규칙(Sieve 의 address)과 같다 — 주소 전체가 같을 때 · From 이 여럿이면 하나라도 · 표시 이름의 주소 · 비슷한 주소는 아니다 (대소문자는 ASCII 만)', async () => {
+        const cases: [string, ReturnType<typeof fromMail>][] = [
+          ['맞음', fromMail('m1', [KIM])],
+          [
+            '맞음',
+            fromMail('m2', [
+              { name: 'First', email: 'first@example.net' },
+              { name: 'Kim', email: 'kim@spam.example' },
+            ]),
+          ],
+          [
+            '맞음',
+            fromMail('m3', [{ name: null, email: 'first@example.net' }], [KIM]),
+          ],
+          [
+            '아님',
+            fromMail('m4', [
+              { name: 'kim@spam.example', email: 'other@example.net' },
+            ]),
+          ],
+          [
+            '아님',
+            fromMail('m5', [{ name: null, email: 'kim.lee@spam.example' }]),
+          ],
+          [
+            '아님',
+            fromMail('m6', [{ name: null, email: 'kim@sub.spam.example' }]),
+          ],
+          [
+            '아님',
+            fromMail('m7', [{ name: null, email: 'akim@spam.example' }]),
+          ],
+          ['아님', fromMail('m8')],
+        ];
+        const { runner, recorded } = fakeRunner([
+          page(
+            cases.map(([, mail]) => mail.id),
+            cases.map(([, mail]) => mail),
+          ),
+          updated(['m1', 'm2', 'm3']),
+        ]);
+
+        await runner.runBlock(
+          ARA,
+          { sender: 'kim@spam.example', cursor: null },
+          blockContext(),
+        );
+        expect(Object.keys(argsOf(recorded[1]).update as object)).toEqual(
+          cases
+            .filter(([verdict]) => verdict === '맞음')
+            .map(([, mail]) => mail.id),
+        );
+      });
+
+      it('도메인 차단(@도메인)은 From 주소의 @ 뒤가 그 도메인일 때만 — 하위 도메인 · 더 긴 도메인 · 표시 이름은 아니다', async () => {
+        const mails = [
+          fromMail('m1', [{ name: null, email: 'kim@spam.example' }]),
+          fromMail('m2', [{ name: null, email: 'Lee@SPAM.example' }]),
+          fromMail('m3', [{ name: null, email: 'kim@sub.spam.example' }]),
+          fromMail('m4', [{ name: null, email: 'kim@spam.example.net' }]),
+          fromMail('m5', [
+            { name: '@spam.example', email: 'kim@other.example' },
+          ]),
+        ];
+        const { runner, recorded } = fakeRunner([
+          page(
+            mails.map(({ id }) => id),
+            mails,
+          ),
+          updated(['m1', 'm2']),
+        ]);
+
+        await runner.runBlock(
+          ARA,
+          { sender: '@spam.example', cursor: null },
+          blockContext(),
+        );
+        expect(Object.keys(argsOf(recorded[1]).update as object)).toEqual([
+          'm1',
+          'm2',
+        ]);
+      });
+
+      it('붙잡힌 메일(9단계)은 맞아도 옮기지 않는다 — 받은편지함에 남긴 것으로 세고 matched 에 넣지 않는다', async () => {
+        const later = utc(Math.floor(Date.now() / 1_000) + 3_600);
+        const { runner, recorded } = fakeRunner([
+          page(['m1', 'm2'], [fromMail('m1', [KIM]), fromMail('m2', [KIM])], {
+            held: [
+              {
+                id: 'sub1',
+                emailId: 'm2',
+                undoStatus: 'pending',
+                sendAt: later,
+              },
+            ],
+          }),
+          updated(['m1']),
+        ]);
+
+        await expect(
+          runner.runBlock(
+            ARA,
+            { sender: 'kim@spam.example', cursor: null },
+            blockContext(),
+          ),
+        ).resolves.toMatchObject({ scanned: 2, matched: 1 });
+        expect(argsOf(recorded[1])).toMatchObject({
+          update: { m1: junkPatch },
+        });
+        expect(argsOf(recorded[1]).update).not.toHaveProperty('m2');
+      });
+
+      it('스팸메일함이 없으면 엔진에 묻지 않고 MAIL_001 · 받은편지함이 없으면 할 메일이 없다', async () => {
+        const noJunk = fakeRunner([]);
+        expect(
+          await failureOf(
+            noJunk.runner.runBlock(
+              ARA,
+              { sender: 'kim@spam.example', cursor: null },
+              blockContext({
+                mailboxes: BLOCK_MAILBOXES.filter(
+                  ({ role }) => role !== 'junk',
+                ),
+              }),
+            ),
+          ),
+        ).toMatchObject({ code: 'MAIL_001', reason: 'junk-mailbox-missing' });
+        expect(noJunk.recorded).toHaveLength(0);
+
+        const noInbox = fakeRunner([]);
+        await expect(
+          noInbox.runner.runBlock(
+            ARA,
+            { sender: 'kim@spam.example', cursor: null },
+            blockContext({
+              mailboxes: BLOCK_MAILBOXES.filter(({ role }) => role !== 'inbox'),
+            }),
+          ),
+        ).resolves.toEqual({
+          scanned: 0,
+          matched: 0,
+          remaining: 0,
+          cursor: null,
+          rounds: 0,
+        });
+      });
+
+      it('이어 할 자리 — 다른 보낸 사람의 cursor · 필터 적용의 cursor · 깨진 cursor 는 엔진에 묻기 전에 VAL_001', async () => {
+        const position = { before: T0 + 1, anchor: 'm1', anchorTime: T0 };
+        const others = [
+          encodeBlockRunCursor(position, 'lee@spam.example'),
+          encodeFilterRunCursor(position, request()),
+          'not-a-cursor',
+        ];
+        for (const cursor of others) {
+          const fake = fakeRunner([]);
+          expect(
+            await failureOf(
+              fake.runner.runBlock(
+                ARA,
+                { sender: 'kim@spam.example', cursor },
+                blockContext(),
+              ),
+            ),
+          ).toMatchObject({ code: 'VAL_001' });
+          expect(fake.recorded).toHaveLength(0);
+        }
+
+        // 같은 보낸 사람의 cursor 는 그 자리부터 — anchor 다음 · 위 경계 미만
+        const fake = fakeRunner([page([], [])]);
+        await fake.runner.runBlock(
+          ARA,
+          {
+            sender: 'kim@spam.example',
+            cursor: encodeBlockRunCursor(position, 'kim@spam.example'),
+          },
+          blockContext(),
+        );
+        expect(argsOf(fake.recorded[0])).toMatchObject({
+          filter: { inMailbox: INBOX, before: utc(T0 + 1) },
+          anchor: 'm1',
+          anchorOffset: 1,
+        });
+      });
+    });
   });
 
   /**
@@ -1369,6 +1642,10 @@ describe('JmapFilterRunner — 이미 받은 메일에 필터 적용 (계약 2
           ),
           receivedAt: utc(email.receivedAt),
           'header:From:all': [` ${email.from}`],
+          // 엔진이 푼 주소 — 꺾쇠 안 (차단 정리 — 15단계)
+          'header:From:asAddresses:all': [
+            [{ name: null, email: /<([^>]+)>/.exec(email.from)?.[1] ?? '' }],
+          ],
         };
       }
 
@@ -1706,5 +1983,68 @@ describe('JmapFilterRunner — 이미 받은 메일에 필터 적용 (계약 2
       }
       expect(engine.sorted(TARGET)).toHaveLength(700 - kept.length);
     });
+
+    it('차단 정리(15단계)도 같은 틀로 끝까지 — 그 보낸 사람의 메일만 스팸메일함으로(스팸 표시) · 요청 사이에 온 새 메일은 건드리지 않는다', async () => {
+      const JUNK = 'k';
+      const engine = new FakeEngine();
+      fill(engine, 1_200);
+      let now = 1_000_000;
+      jest.spyOn(Date, 'now').mockImplementation(() => now);
+      const client = {
+        call: jest.fn(
+          (_user: string, build: (accountId: string) => JmapInvocation[]) => {
+            const calls = build('d');
+            if (calls[0][0] === 'Email/query') now += 21_000;
+            return Promise.resolve(engine.handle(calls));
+          },
+        ),
+      };
+      const runner = new JmapFilterRunner(client as unknown as JmapClient);
+      const sender = 'sales@hanbit-partners.co.kr';
+      const wanted = engine
+        .sorted(INBOX)
+        .filter(({ from }) => from.includes(sender)).length;
+
+      let cursor: string | null = null;
+      let requests = 0;
+      let matched = 0;
+      do {
+        // 요청 사이에 그 보낸 사람의 새 메일이 온다 — 시작한 뒤 온 메일은 보지 않는다 (새 메일은 Sieve 가 이미 판정했다)
+        if (cursor !== null) engine.add(T0 + 10_000 + requests, HANBIT_FROM);
+        const result = await runner.runBlock(
+          ARA,
+          { sender, cursor },
+          {
+            mailboxes: [
+              mailbox(INBOX, 'inbox', engine.sorted(INBOX).length),
+              mailbox(JUNK, 'junk'),
+            ],
+            startedAt: now,
+          },
+        );
+        matched += result.matched;
+        cursor = result.cursor;
+        requests += 1;
+        now += 100_000;
+      } while (cursor !== null && requests < 100);
+
+      expect(cursor).toBeNull();
+      expect(requests).toBeGreaterThan(1);
+      expect(matched).toBe(wanted);
+      const moved = engine.sorted(JUNK);
+      expect(moved).toHaveLength(wanted);
+      for (const email of moved) {
+        expect(email.keywords.has('$junk')).toBe(true);
+        expect(email.receivedAt).toBeLessThan(T0 + 10_000);
+      }
+      // 받은편지함에 남은 그 보낸 사람의 메일은 요청 사이에 온 새 메일뿐
+      const left = engine
+        .sorted(INBOX)
+        .filter(({ from }) => from.includes(sender));
+      expect(left).toHaveLength(requests - 1);
+      expect(left.every(({ receivedAt }) => receivedAt >= T0 + 10_000)).toBe(
+        true,
+      );
+    });
   });
 });
diff --git a/backend/src/modules/mail/jmap/jmap-filter-run.ts b/backend/src/modules/mail/jmap/jmap-filter-run.ts
index 0a5dbb9..0264747 100644
--- a/backend/src/modules/mail/jmap/jmap-filter-run.ts
+++ b/backend/src/modules/mail/jmap/jmap-filter-run.ts
@@ -1,6 +1,7 @@
 import { Injectable, Logger } from '@nestjs/common';
 
 import { BusinessException } from '@/common/errors/business.exception';
+import { isBlockedSenderMail } from '@/modules/mail/mail-block-match';
 import {
   filterFields,
   judgeFilter,
@@ -8,6 +9,7 @@ import {
 } from '@/modules/mail/mail-filter-match';
 import type {
   Mailbox,
+  MailBlockRunRequest,
   MailFilterRunContext,
   MailFilterRunOutcome,
   MailFilterRunRequest,
@@ -15,15 +17,20 @@ import type {
 import { BulkRun } from './bulk-run';
 import {
   MAX_FILTER_RUN_SECONDS,
+  decodeBlockRunCursor,
   decodeFilterRunCursor,
+  encodeBlockRunCursor,
   encodeFilterRunCursor,
+  type FilterRunPosition,
 } from './filter-run-cursor';
 import {
   FILTER_RUN_BODY_PROPERTIES,
   FILTER_RUN_PART_PROPERTIES,
+  FROM_ADDRESSES_PROPERTY,
   bodyTextsOf,
   estimatedBodyBytes,
   filterRunProperties,
+  fromAddressesOf,
   headerTextsOf,
   textPartsOf,
 } from './filter-run-texts';
@@ -97,6 +104,32 @@ const HELD_GUARD_CALLS = 'h';
 /** 붙잡힌 메일이 없다 — 옮기지 않는 규칙 · 읽은 메일이 없는 쪽 */
 const NO_HELD: HeldEmails = { ids: new Set(), complete: true };
 
+/** 처음부터 — 위 경계 · 남긴 메일 · 그 받은 시각을 아직 모른다 (첫 차례가 위 경계를 잡는다) */
+const FROM_TOP: RunState = { before: null, anchor: null, anchorTime: null };
+
+/** 바꾼 것이 없다 — 맞은 메일이 없거나 모두 바꿀 것이 없는 차례 */
+const NOTHING_APPLIED: Applied = { updated: new Set(), gone: new Set() };
+
+/**
+ * 차단 정리(15단계)가 차례마다 읽는 속성 — 받은편지함에 아직 있는지 · 받은 시각(이어 할 자리) · 엔진이 푼 From 머리글의 주소(filter-run-texts.ts).
+ * 표시는 읽지 않는다 — 맞은 메일은 늘 옮기고 스팸 표시를 붙인다(이미 붙어 있어도 같은 패치)
+ */
+const BLOCK_RUN_PROPERTIES = [
+  'id',
+  'mailboxIds',
+  'receivedAt',
+  FROM_ADDRESSES_PROPERTY,
+];
+
+/** 받은편지함이 없는 계정 — 할 메일이 없다 (필터 적용 · 차단 정리 모두) */
+const NOTHING_TO_RUN: MailFilterRunOutcome = {
+  scanned: 0,
+  matched: 0,
+  remaining: 0,
+  cursor: null,
+  rounds: 0,
+};
+
 /**
  * 한 통의 본문을 부분마다 읽는 몫 (바이트) — 한 부분은 FILTER_RUN_BODY_VALUE_BYTES 까지, 한 통은 모두 합쳐 FILTER_RUN_MESSAGE_BODY_BYTES 까지.
  * 글자 부분이 많으면 같은 몫씩 나눈다 (적어도 1바이트). 엔진의 maxBodyValueBytes 는 요청 단위라 몫이 다른 메일은 따로 읽는다
@@ -185,6 +218,37 @@ interface BodyBatch {
   readonly ids: readonly string[];
 }
 
+/** 한 차례를 판정하고 할 일을 한다 — 필터 적용(applyRound) · 차단 정리(applyBlockRound). 멈춰야 하면 null */
+type RoundRunner = (page: RoundPage) => Promise<RoundResult | null>;
+
+/** 받은편지함을 차례로 훑은 결과 (sweep) */
+interface SweepResult {
+  readonly scanned: number;
+  readonly matched: number;
+  readonly remaining: number;
+  /** 끝까지 했다 — 이어 할 자리가 없다 */
+  readonly finished: boolean;
+  /** 마지막으로 마친 차례까지의 자리 */
+  readonly position: RunState;
+  readonly rounds: number;
+}
+
+/** 판정 — true 맞음 · false 안 맞음 · 'gone' 받은편지함에서 빠진 메일(건너뛰고 세지 않는다) */
+type Verdict = boolean | 'gone';
+
+/**
+ * 차단 정리(15단계)의 패치 — 받은편지함에서 빼고 스팸메일함에 넣고 스팸 표시(`$junk` 를 붙이고 `$notjunk` 를 뗀다 — 스팸 신고 `isJunk: true` 와 같다,
+ * jmap-mail.provider.ts 의 toEmailPatch)
+ */
+function blockPatch(inboxId: string, junkId: string): Record<string, unknown> {
+  return {
+    [`mailboxIds/${inboxId}`]: null,
+    [`mailboxIds/${junkId}`]: true,
+    'keywords/$junk': true,
+    'keywords/$notjunk': null,
+  };
+}
+
 /** 옮길 메일함 — 규칙에 없거나 · 받은편지함이거나 · 메일함 목록에 없으면(지워짐) 옮기지 않는다 (계약 — 표시는 한다) */
 function runPlan(
   request: MailFilterRunRequest,
@@ -242,6 +306,41 @@ function utcDate(seconds: number): string {
   return toJmapUtcDate(new Date(seconds * MS_PER_SECOND).toISOString());
 }
 
+/**
+ * 한 차례를 마친 결과 — 판정한 수(받은편지함에서 빠진 메일은 빼고)와 받은편지함에 남긴 마지막 메일(다음 차례의 anchor).
+ * 옮긴 메일(moving 가운데 바뀐 것)과 그사이 없어진 메일은 남긴 것이 아니다
+ * @param moving 옮기기가 든 패치를 보낸 메일 — 바뀌면 받은편지함을 떠난다
+ * @param matched 이 차례에서 할 일을 한 수 (필터 적용은 이미 표시가 있던 메일 포함 · 차단 정리는 옮긴 수)
+ */
+function roundResult(
+  page: RoundPage,
+  verdicts: ReadonlyMap<string, Verdict>,
+  moving: ReadonlySet<string>,
+  applied: Applied,
+  matched: number,
+): RoundResult {
+  let judged = 0;
+  let lastStayed: string | null = null;
+  for (const id of page.ids) {
+    const verdict = verdicts.get(id);
+    if (verdict === undefined || verdict === 'gone') continue;
+    judged += 1;
+    const moved = moving.has(id) && applied.updated.has(id);
+    if (!moved && !applied.gone.has(id)) lastStayed = id;
+  }
+  return {
+    judged,
+    matched,
+    lastStayed:
+      lastStayed === null
+        ? null
+        : {
+            id: lastStayed,
+            time: receivedSeconds(page.emails.get(lastStayed)),
+          },
+  };
+}
+
 /** 차례에서 가장 최근의 받은 시각(초) — 받은편지함 맨 위 메일 (읽은 메일이 없으면 null) */
 function newestSecond(page: RoundPage): number | null {
   let newest: number | null = null;
@@ -305,6 +404,9 @@ function bodyBatches(emails: readonly JmapEmail[]): BodyBatch[] {
  *   진행(processed)은 판정한 메일 수다 — 판정한 것이 없는 차례는 멈춘 차례로 센다
  * - 이어 할 자리는 cursor — 한 차례를 다 마친 곳까지만 (도중에 멈춘 차례는 다음 요청이 다시 한다 — 할 일은 다시 해도 같다)
  * - 받은편지함 · 옮길 메일함은 서비스가 읽은 메일함 목록(context.mailboxes)에서 찾는다 — 다시 읽지 않는다
+ *
+ * 차단할 때 받은편지함 정리(runBlock — 15단계, 계약 2절 "보낸 사람 차단")도 같은 틀이다 — 차례 · 위 경계 · 자리 · 시간 · 멈춤 · 옮기기의 조건(ifInState) ·
+ * 붙잡힌 메일 막기는 그대로(sweep · readPage · applyPatches), 판정만 차단 규칙(Sieve 의 `address` — mail-block-match.ts)이고 할 일은 스팸메일함으로 옮기기 + 스팸 표시다
  */
 @Injectable()
 export class JmapFilterRunner {
@@ -318,17 +420,15 @@ export class JmapFilterRunner {
     context: MailFilterRunContext,
   ): Promise<MailFilterRunOutcome> {
     // 이어 할 자리는 엔진에 묻기 전에 본다 — 다른 규칙 · 깨진 cursor 면 VAL_001
-    let position: RunState =
+    const start: RunState =
       request.cursor === null
-        ? { before: null, anchor: null, anchorTime: null }
+        ? FROM_TOP
         : decodeFilterRunCursor(request.cursor, request);
 
     const run = new BulkRun(context.startedAt);
     const inbox = context.mailboxes.find((mailbox) => mailbox.role === 'inbox');
     // 받은편지함이 없는 계정 — 적용할 메일이 없다
-    if (!inbox) {
-      return { scanned: 0, matched: 0, remaining: 0, cursor: null, rounds: 0 };
-    }
+    if (!inbox) return NOTHING_TO_RUN;
 
     const plan = runPlan(request, inbox.id, context.mailboxes);
     const fields = filterFields(request);
@@ -341,6 +441,78 @@ export class JmapFilterRunner {
       withHeld: plan.moveTo !== null,
     };
 
+    const swept = await this.sweep(user, inbox, start, read, run, (page) =>
+      this.applyRound(user, request, plan, page, run),
+    );
+    if (!swept.finished) run.assertProgress('filter-run');
+    return this.outcomeOf(swept, (position) =>
+      encodeFilterRunCursor(position, request),
+    );
+  }
+
+  /**
+   * 차단할 때 받은편지함 정리 (계약 2절 "보낸 사람 차단" — 15단계) — 받은편지함의 그 보낸 사람 메일을 스팸메일함으로 옮기고 스팸 표시를 붙인다.
+   * 판정은 엔진이 푼 From 머리글의 주소로 차단 규칙과 같게(mail-block-match.ts) — 머리글 원문을 읽지 않는다(표시 이름에 쓴 주소가 걸리지 않게).
+   * 맞은 메일은 늘 옮긴다(옮기기라 읽은 상태 그대로일 때만 — ifInState). 붙잡힌 메일(9단계)은 옮기지 않는다(받은편지함에는 없지만 지금 규칙대로).
+   * 스팸메일함이 없으면 엔진에 묻기 전에 MAIL_001, cursor 가 깨졌거나 다른 보낸 사람의 것이면 그 앞에 VAL_001.
+   * 응답의 matched 는 스팸메일함으로 옮긴 수다
+   */
+  async runBlock(
+    user: string,
+    request: MailBlockRunRequest,
+    context: MailFilterRunContext,
+  ): Promise<MailFilterRunOutcome> {
+    const start: RunState =
+      request.cursor === null
+        ? FROM_TOP
+        : decodeBlockRunCursor(request.cursor, request.sender);
+
+    const run = new BulkRun(context.startedAt);
+    const inbox = context.mailboxes.find((mailbox) => mailbox.role === 'inbox');
+    if (!inbox) return NOTHING_TO_RUN;
+    const junk = context.mailboxes.find((mailbox) => mailbox.role === 'junk');
+    if (!junk) {
+      throw new BusinessException('MAIL_001', {
+        context: { reason: 'junk-mailbox-missing' },
+      });
+    }
+
+    const plan: RunPlan = {
+      inboxId: inbox.id,
+      moveTo: junk.id,
+      markAsRead: false,
+      flag: false,
+    };
+    const read: PageRead = {
+      properties: BLOCK_RUN_PROPERTIES,
+      needsBody: false,
+      limit: HEADER_ROUND_SIZE,
+      withHeld: true,
+    };
+
+    const swept = await this.sweep(user, inbox, start, read, run, (page) =>
+      this.applyBlockRound(user, request.sender, plan, junk.id, page, run),
+    );
+    if (!swept.finished) run.assertProgress('mail-block-run');
+    return this.outcomeOf(swept, (position) =>
+      encodeBlockRunCursor(position, request.sender),
+    );
+  }
+
+  /**
+   * 받은편지함을 받은 시각이 최근인 메일부터 차례로 훑는다 — 차례마다 읽고(readPage) 판정 · 할 일(applyRound)을 한 뒤 자리를 옮긴다.
+   * 한 요청의 시간 · 멈춤은 BulkRun. 처음 차례가 맨 위 메일의 받은 시각 + 1초를 위 경계로 잡는다(그 뒤에 온 메일은 보지 않는다).
+   * 남은 시간 때문에 끊긴 호출은 진행한 것이 있으면 거기까지로 답한다(cutOffAfterProgress)
+   */
+  private async sweep(
+    user: string,
+    inbox: Mailbox,
+    start: RunState,
+    read: PageRead,
+    run: BulkRun,
+    applyRound: RoundRunner,
+  ): Promise<SweepResult> {
+    let position = start;
     let scanned = 0;
     let matched = 0;
     let rounds = 0;
@@ -359,7 +531,7 @@ export class JmapFilterRunner {
         const newest = position.before === null ? newestSecond(page) : null;
         if (newest !== null) position = { ...position, before: newest + 1 };
 
-        const round = await this.applyRound(user, request, plan, page, run);
+        const round = await applyRound(page);
         // 멈춘다 — 이 차례는 하지 않은 것으로 (다음 요청이 같은 자리부터 다시 한다)
         if (round === null) break;
 
@@ -387,22 +559,38 @@ export class JmapFilterRunner {
     } catch (error) {
       if (!run.cutOffAfterProgress(error)) throw error;
     }
-    if (!finished) run.assertProgress('filter-run');
-
     return {
       scanned,
       matched,
       remaining: finished ? 0 : remaining,
-      cursor: finished ? null : this.cursorOf(position, request),
+      finished,
+      position,
       rounds,
     };
   }
 
+  /** 훑은 결과 → 응답 — 끝까지 했으면 cursor 없음, 아니면 마친 자리의 cursor (cursorOf) */
+  private outcomeOf(
+    swept: SweepResult,
+    encode: (position: FilterRunPosition) => string,
+  ): MailFilterRunOutcome {
+    return {
+      scanned: swept.scanned,
+      matched: swept.matched,
+      remaining: swept.remaining,
+      cursor: swept.finished ? null : this.cursorOf(swept.position, encode),
+      rounds: swept.rounds,
+    };
+  }
+
   /**
    * 이어 할 자리 — 위 경계와 남긴 마지막 메일의 받은 시각이 있어야 한다. 없으면 엔진이 받은 시각을 주지 않은 것 — MAIL_001
    * (끝까지 했으면 이어 할 자리가 필요 없어 묻지 않는다)
    */
-  private cursorOf(position: RunState, request: MailFilterRunRequest): string {
+  private cursorOf(
+    position: RunState,
+    encode: (position: FilterRunPosition) => string,
+  ): string {
     if (
       position.before === null ||
       (position.anchor !== null && position.anchorTime === null)
@@ -411,14 +599,11 @@ export class JmapFilterRunner {
         context: { reason: 'received-at-missing' },
       });
     }
-    return encodeFilterRunCursor(
-      {
-        before: position.before,
-        anchor: position.anchor,
-        anchorTime: position.anchorTime,
-      },
-      request,
-    );
+    return encode({
+      before: position.before,
+      anchor: position.anchor,
+      anchorTime: position.anchorTime,
+    });
   }
 
   /**
@@ -571,7 +756,7 @@ export class JmapFilterRunner {
     run: BulkRun,
   ): Promise<RoundResult | null> {
     /** 판정 — 'gone' 은 받은편지함에서 빠진 메일(건너뛰고 세지 않는다) */
-    const verdicts = new Map<string, boolean | 'gone'>();
+    const verdicts = new Map<string, Verdict>();
     const undecided: JmapEmail[] = [];
     const headerTexts = new Map<string, Omit<MailFilterTexts, 'body'>>();
     for (const id of page.ids) {
@@ -641,30 +826,69 @@ export class JmapFilterRunner {
 
     const applied: Applied | null =
       patches.size === 0
-        ? { updated: new Set(), gone: new Set() }
+        ? NOTHING_APPLIED
         : await this.applyPatches(user, plan, page.state, patches, run);
     if (applied === null) return null;
 
-    let judged = 0;
-    let lastStayed: string | null = null;
+    return roundResult(
+      page,
+      verdicts,
+      moving,
+      applied,
+      unchanged + applied.updated.size,
+    );
+  }
+
+  /**
+   * 차단 정리의 한 차례 (15단계) — 엔진이 푼 From 주소로 판정하고(mail-block-match.ts) 맞은 메일을 스팸메일함으로 옮긴다(스팸 표시와 함께).
+   * 붙잡힌 메일(9단계)은 옮기지 않는다 — 받은편지함에 남은 것으로 센다. matched 는 옮긴 수다. 멈춰야 하면 null (applyPatches)
+   */
+  private async applyBlockRound(
+    user: string,
+    sender: string,
+    plan: RunPlan,
+    junkId: string,
+    page: RoundPage,
+    run: BulkRun,
+  ): Promise<RoundResult | null> {
+    const verdicts = new Map<string, Verdict>();
     for (const id of page.ids) {
-      const verdict = verdicts.get(id);
-      if (verdict === undefined || verdict === 'gone') continue;
-      judged += 1;
-      const moved = moving.has(id) && applied.updated.has(id);
-      if (!moved && !applied.gone.has(id)) lastStayed = id;
+      const email = page.emails.get(id);
+      verdicts.set(
+        id,
+        email?.mailboxIds?.[plan.inboxId] !== true
+          ? 'gone'
+          : isBlockedSenderMail(fromAddressesOf(email), sender),
+      );
     }
-    return {
-      judged,
-      matched: unchanged + applied.updated.size,
-      lastStayed:
-        lastStayed === null
-          ? null
-          : {
-              id: lastStayed,
-              time: receivedSeconds(page.emails.get(lastStayed)),
-            },
-    };
+
+    const matchedIds = page.ids.filter((id) => verdicts.get(id) === true);
+    const held =
+      matchedIds.length === 0
+        ? new Set<string>()
+        : await heldAmong(
+            page.held,
+            matchedIds,
+            this.heldLookup(user, run.callOptions()),
+          );
+    const patches = new Map<string, Record<string, unknown>>();
+    for (const id of matchedIds) {
+      if (!held.has(id)) patches.set(id, blockPatch(plan.inboxId, junkId));
+    }
+
+    const applied: Applied | null =
+      patches.size === 0
+        ? NOTHING_APPLIED
+        : await this.applyPatches(user, plan, page.state, patches, run);
+    if (applied === null) return null;
+
+    return roundResult(
+      page,
+      verdicts,
+      new Set(patches.keys()),
+      applied,
+      applied.updated.size,
+    );
   }
 
   /**
diff --git a/backend/src/modules/mail/jmap/jmap-mail.provider.spec.ts b/backend/src/modules/mail/jmap/jmap-mail.provider.spec.ts
index 59fc8cf..55614ee 100644
--- a/backend/src/modules/mail/jmap/jmap-mail.provider.spec.ts
+++ b/backend/src/modules/mail/jmap/jmap-mail.provider.spec.ts
@@ -11,7 +11,10 @@ import {
   MAX_ENVELOPE_RESUBMITS,
   MAX_SEARCH_WORDS,
 } from '@/modules/mail/mail.constants';
-import { SendNotStartedException } from '@/modules/mail/mail.provider';
+import {
+  ScheduledSendReturnedToDraftsException,
+  SendNotStartedException,
+} from '@/modules/mail/mail.provider';
 import type { MailSettings } from '@/modules/mail/mail.settings';
 import type {
   DraftContent,
@@ -6545,7 +6548,7 @@ describe('JmapMailProvider', () => {
       });
     });
 
-    describe('이름 바꾸기 (renameMailbox)', () => {
+    describe('이름 바꾸기 · 옮기기 (updateMailbox — 15단계)', () => {
       it('그 메일함만 이름을 바꾸고 같은 요청에서 다시 읽어 돌려준다', async () => {
         const { provider, recorded } = fakeClient([
           mailboxList(),
@@ -6566,9 +6569,14 @@ describe('JmapMailProvider', () => {
           ],
         ]);
 
+        const log = jest
+          .spyOn(Reflect.get(provider, 'logger') as Logger, 'log')
+          .mockImplementation(() => undefined);
         await expect(
-          provider.renameMailbox(ARA, 'u1', '새 이름'),
+          provider.updateMailbox(ARA, 'u1', { name: '새 이름' }),
         ).resolves.toMatchObject({ id: 'u1', name: '새 이름', totalCount: 2 });
+        // 이름만 바꾸기는 지금처럼 로그를 남기지 않는다 (옮겼을 때만)
+        expect(log).not.toHaveBeenCalled();
         expect(recorded[1].calls).toEqual([
           [
             'Mailbox/set',
@@ -6594,41 +6602,201 @@ describe('JmapMailProvider', () => {
           ['i1', 'VAL_001'],
           ['nope', 'RES_001'],
         ] as const) {
-          const { provider, recorded } = fakeClient([
-            mailboxList(withUnknownRole),
-          ]);
-          expect(await codeOf(provider.renameMailbox(ARA, id, '새 이름'))).toBe(
-            code,
-          );
-          expect(recorded).toHaveLength(1);
+          for (const change of [{ name: '새 이름' }, { parentId: 'u3' }]) {
+            const { provider, recorded } = fakeClient([
+              mailboxList(withUnknownRole),
+            ]);
+            expect(await codeOf(provider.updateMailbox(ARA, id, change))).toBe(
+              code,
+            );
+            expect(recorded).toHaveLength(1);
+          }
         }
       });
 
-      it('지금 이름과 같으면 엔진에 묻지 않고 그대로 돌려준다', async () => {
-        const { provider, recorded } = fakeClient([mailboxList()]);
-
-        await expect(
-          provider.renameMailbox(ARA, 'u1', '프로젝트'),
-        ).resolves.toMatchObject({ id: 'u1', name: '프로젝트' });
-        expect(recorded).toHaveLength(1);
+      it('지금 이름 · 지금 상위와 같으면 엔진에 묻지 않고 그대로 돌려준다', async () => {
+        const cases: [string, { name?: string; parentId?: string | null }][] = [
+          ['u1', { name: '프로젝트' }],
+          ['u2', { parentId: 'u1' }],
+          ['u3', { parentId: null }],
+          ['u2', { name: '하위', parentId: 'u1' }],
+        ];
+        for (const [id, change] of cases) {
+          const { provider, recorded } = fakeClient([mailboxList()]);
+          const log = jest
+            .spyOn(Reflect.get(provider, 'logger') as Logger, 'log')
+            .mockImplementation(() => undefined);
+          await expect(
+            provider.updateMailbox(ARA, id, change),
+          ).resolves.toMatchObject({ id });
+          expect(recorded).toHaveLength(1);
+          // 바꾸지 않았으니 "옮겼습니다" 로그도 없다
+          expect(log).not.toHaveBeenCalled();
+        }
       });
 
-      it('같은 이름이 있으면(alreadyExists) MAIL_009, 그사이 없어졌으면 RES_001', async () => {
+      it('같은 이름이 있으면(alreadyExists — 대소문자 무시) MAIL_009, 그사이 없어졌으면 RES_001', async () => {
         for (const [setError, code] of [
           [{ type: 'alreadyExists' }, 'MAIL_009'],
           [{ type: 'notFound' }, 'RES_001'],
         ] as const) {
+          for (const change of [{ name: '보관 자료' }, { parentId: 'u4' }]) {
+            const { provider } = fakeClient([
+              mailboxList(),
+              [
+                ['Mailbox/set', { notUpdated: { u1: setError } }, 'u'],
+                ['Mailbox/get', { list: [] }, 'm'],
+              ],
+            ]);
+            expect(
+              await codeOf(provider.updateMailbox(ARA, 'u1', change)),
+            ).toBe(code);
+          }
+        }
+      });
+
+      it('옮기기 — parentId 를 바꾸고 목록 전체를 같은 요청에서 다시 읽는다 (맨 위는 null, 이름과 함께도 된다)', async () => {
+        const cases: [
+          string,
+          { name?: string; parentId: string | null },
+          Record<string, unknown>,
+        ][] = [
+          ['u1', { parentId: 'u4' }, { parentId: 'u4' }],
+          ['u2', { parentId: null }, { parentId: null }],
+          [
+            'u3',
+            { name: '2025', parentId: 'a' },
+            { name: '2025', parentId: 'a' },
+          ],
+        ];
+        for (const [id, change, update] of cases) {
+          const moved = userMailbox(id, change.name ?? id, {
+            parentId: change.parentId,
+          });
+          const { provider, recorded } = fakeClient([
+            mailboxList(),
+            [
+              ['Mailbox/set', { updated: { [id]: null } }, 'u'],
+              [
+                'Mailbox/get',
+                {
+                  list: [
+                    ...mailboxes.filter((mailbox) => mailbox.id !== id),
+                    moved,
+                  ],
+                },
+                'm',
+              ],
+            ],
+          ]);
+
+          const log = jest
+            .spyOn(Reflect.get(provider, 'logger') as Logger, 'log')
+            .mockImplementation(() => undefined);
+          await expect(
+            provider.updateMailbox(ARA, id, change),
+          ).resolves.toMatchObject({ id, parentId: change.parentId });
+          // 옮겼을 때만 — 메일함 id · 새 상위 id 만 (이름 · 주소 없이)
+          expect(log).toHaveBeenCalledTimes(1);
+          const [line] = log.mock.calls[0] as [string];
+          expect(line).toContain(`메일함=${id}`);
+          expect(line).toContain(`새 상위=${change.parentId ?? '맨 위'}`);
+          expect(line).not.toContain('2025');
+          expect(line).not.toContain(ARA);
+          expect(recorded[1].calls).toEqual([
+            ['Mailbox/set', { accountId: 'd', update: { [id]: update } }, 'u'],
+            [
+              'Mailbox/get',
+              { accountId: 'd', ids: null, properties: MAILBOX_PROPERTIES },
+              'm',
+            ],
+          ]);
+        }
+      });
+
+      it('받은편지함 · 보관함 · 내 메일함 아래로는 옮길 수 있다 — 보낸편지함 · 임시보관함 · 스팸메일함 · 휴지통 아래는 VAL_001, 없는 상위는 RES_001 (엔진에 묻지 않는다)', async () => {
+        for (const parentId of ['a', 'f', 'u3']) {
           const { provider } = fakeClient([
             mailboxList(),
             [
-              ['Mailbox/set', { notUpdated: { u1: setError } }, 'u'],
-              ['Mailbox/get', { list: [] }, 'm'],
+              ['Mailbox/set', { updated: { u4: null } }, 'u'],
+              [
+                'Mailbox/get',
+                { list: [userMailbox('u4', '보관 자료', { parentId })] },
+                'm',
+              ],
             ],
           ]);
-          expect(
-            await codeOf(provider.renameMailbox(ARA, 'u1', '보관 자료')),
-          ).toBe(code);
+          await expect(
+            provider.updateMailbox(ARA, 'u4', { parentId }),
+          ).resolves.toMatchObject({ parentId });
         }
+        for (const [parentId, code] of [
+          ['e', 'VAL_001'],
+          ['d', 'VAL_001'],
+          ['c', 'VAL_001'],
+          ['b', 'VAL_001'],
+          ['nope', 'RES_001'],
+        ] as const) {
+          const { provider, recorded } = fakeClient([mailboxList()]);
+          expect(
+            await codeOf(provider.updateMailbox(ARA, 'u4', { parentId })),
+          ).toBe(code);
+          expect(recorded).toHaveLength(1);
+        }
+      });
+
+      it('자기 자신 · 자기 하위(손주까지) 아래로는 VAL_001 — 엔진에 묻기 전에 본다', async () => {
+        const deep = [
+          ...mailboxes,
+          userMailbox('u5', '손주', { parentId: 'u2' }),
+        ];
+        for (const parentId of ['u1', 'u2', 'u5']) {
+          const { provider, recorded } = fakeClient([mailboxList(deep)]);
+          await expect(
+            provider.updateMailbox(ARA, 'u1', { parentId }),
+          ).rejects.toMatchObject({
+            code: 'VAL_001',
+            context: { reason: 'mailbox-move-into-itself' },
+          });
+          expect(recorded).toHaveLength(1);
+        }
+      });
+
+      it('엔진이 상위를 거절하면(invalidProperties parentId) — 다시 읽은 목록에 그 상위가 있으면 고리라 VAL_001, 없으면 그사이 지워져 RES_001', async () => {
+        const refusal = {
+          type: 'invalidProperties',
+          properties: ['parentId'],
+        };
+        const cycle = fakeClient([
+          mailboxList(),
+          [
+            ['Mailbox/set', { notUpdated: { u1: refusal } }, 'u'],
+            ['Mailbox/get', { list: mailboxes }, 'm'],
+          ],
+        ]);
+        expect(
+          await codeOf(
+            cycle.provider.updateMailbox(ARA, 'u1', { parentId: 'u4' }),
+          ),
+        ).toBe('VAL_001');
+
+        const gone = fakeClient([
+          mailboxList(),
+          [
+            ['Mailbox/set', { notUpdated: { u1: refusal } }, 'u'],
+            [
+              'Mailbox/get',
+              { list: mailboxes.filter((mailbox) => mailbox.id !== 'u4') },
+              'm',
+            ],
+          ],
+        ]);
+        expect(
+          await codeOf(
+            gone.provider.updateMailbox(ARA, 'u1', { parentId: 'u4' }),
+          ),
+        ).toBe('RES_001');
       });
     });
 
@@ -7093,6 +7261,240 @@ describe('JmapMailProvider', () => {
           'MAIL_001',
         );
       });
+
+      describe('하위 메일함까지 지우기 (withChildren — 15단계)', () => {
+        /** u1 › u2 › u5 (u5 는 손주) */
+        const tree = [
+          ...mailboxes,
+          userMailbox('u5', '손주', { parentId: 'u2', totalEmails: 1 }),
+        ];
+        const children = { withChildren: true };
+
+        it('나무(그 메일함 + 하위 모두)의 메일을 한 조회(OR)로 읽어 옮긴다 — 나무 안에만 있으면 휴지통으로, 나무 밖에도 있으면 나무에서만 뺀다 · 깊은 것부터 한 요청으로 지운다', async () => {
+          const { provider, recorded } = fakeClient([
+            mailboxList(tree),
+            batch(
+              [
+                only('m1', 'u1'),
+                only('m2', 'u5'),
+                { id: 'm3', mailboxIds: { u1: true, u2: true } },
+                { id: 'm4', mailboxIds: { u2: true, a: true } },
+              ],
+              's1',
+              4,
+            ),
+            [
+              [
+                'Email/set',
+                { updated: { m1: null, m2: null, m3: null, m4: null } },
+                's',
+              ],
+            ],
+            batch([]),
+            [['Mailbox/set', { destroyed: ['u5', 'u2', 'u1'] }, 'x']],
+          ]);
+
+          await expect(
+            provider.deleteMailbox(ARA, 'u1', children),
+          ).resolves.toEqual({
+            deleted: true,
+            processed: 4,
+            movedToTrash: 3,
+            remaining: 0,
+          });
+          expect(argsOf(recorded[1])).toMatchObject({
+            filter: {
+              operator: 'OR',
+              conditions: [
+                { inMailbox: 'u1' },
+                { inMailbox: 'u2' },
+                { inMailbox: 'u5' },
+              ],
+            },
+            calculateTotal: true,
+          });
+          expect(argsOf(recorded[2])).toEqual({
+            accountId: 'd',
+            ifInState: 's1',
+            update: {
+              m1: { 'mailboxIds/u1': null, 'mailboxIds/b': true },
+              m2: { 'mailboxIds/u5': null, 'mailboxIds/b': true },
+              m3: {
+                'mailboxIds/u1': null,
+                'mailboxIds/u2': null,
+                'mailboxIds/b': true,
+              },
+              m4: { 'mailboxIds/u2': null },
+            },
+          });
+          // 깊은 것부터 — 엔진은 적은 차례대로 지운다 (메일을 지우는 옵션은 쓰지 않는다)
+          expect(argsOf(recorded[4])).toEqual({
+            accountId: 'd',
+            destroy: ['u5', 'u2', 'u1'],
+            onDestroyRemoveEmails: false,
+          });
+        });
+
+        it('하위가 있는데 withChildren 이 아니면 VAL_001(지금처럼) · 하위에 역할이 있는 메일함이 있으면 VAL_001 — 아무것도 옮기지 않는다', async () => {
+          const plain = fakeClient([mailboxList(tree)]);
+          await expect(
+            plain.provider.deleteMailbox(ARA, 'u1'),
+          ).rejects.toMatchObject({
+            code: 'VAL_001',
+            context: { reason: 'mailbox-has-children' },
+          });
+
+          const odd = fakeClient([
+            mailboxList([
+              ...tree,
+              userMailbox('i1', 'Important', {
+                role: 'important',
+                parentId: 'u2',
+              }),
+            ]),
+          ]);
+          await expect(
+            odd.provider.deleteMailbox(ARA, 'u1', children),
+          ).rejects.toMatchObject({
+            code: 'VAL_001',
+            context: { reason: 'role-mailbox-in-tree' },
+          });
+          expect(odd.recorded).toHaveLength(1);
+        });
+
+        it('하위가 없는 메일함에 withChildren 을 줘도 지금 지우기와 같다 — 조건은 inMailbox 하나', async () => {
+          const { provider, recorded } = fakeClient([
+            mailboxList(tree),
+            batch([]),
+            [['Mailbox/set', { destroyed: ['u3'] }, 'x']],
+          ]);
+
+          await expect(
+            provider.deleteMailbox(ARA, 'u3', children),
+          ).resolves.toMatchObject({ deleted: true });
+          expect(argsOf(recorded[1])).toMatchObject({
+            filter: { inMailbox: 'u3' },
+          });
+          expect(argsOf(recorded[2])).toMatchObject({ destroy: ['u3'] });
+        });
+
+        it('지우는 사이 깊은 메일함에 메일이 들어오면(mailboxHasEmail) 지운 하위는 나무에서 빼고 남은 나무의 메일을 옮긴 뒤 다시 지운다', async () => {
+          const { provider, recorded } = fakeClient([
+            mailboxList(tree),
+            batch([]),
+            [
+              [
+                'Mailbox/set',
+                {
+                  destroyed: ['u5'],
+                  notDestroyed: {
+                    u2: { type: 'mailboxHasEmail' },
+                    u1: { type: 'mailboxHasChild' },
+                  },
+                },
+                'x',
+              ],
+            ],
+            batch([only('m9', 'u2')]),
+            [['Email/set', { updated: { m9: null } }, 's']],
+            batch([]),
+            [['Mailbox/set', { destroyed: ['u2', 'u1'] }, 'x']],
+          ]);
+
+          await expect(
+            provider.deleteMailbox(ARA, 'u1', children),
+          ).resolves.toEqual({
+            deleted: true,
+            processed: 1,
+            movedToTrash: 1,
+            remaining: 0,
+          });
+          expect(argsOf(recorded[3])).toMatchObject({
+            filter: {
+              operator: 'OR',
+              conditions: [{ inMailbox: 'u1' }, { inMailbox: 'u2' }],
+            },
+          });
+          expect(argsOf(recorded[6])).toMatchObject({ destroy: ['u2', 'u1'] });
+        });
+
+        it('그사이 나무 밖의 하위 메일함이 생기면(mailboxHasChild) 목록을 다시 읽어 그 메일함까지 지운다', async () => {
+          const grown = [
+            ...tree,
+            userMailbox('u6', '새 하위', { parentId: 'u1' }),
+          ];
+          const { provider, recorded } = fakeClient([
+            mailboxList(tree),
+            batch([]),
+            [
+              [
+                'Mailbox/set',
+                {
+                  destroyed: ['u5', 'u2'],
+                  notDestroyed: { u1: { type: 'mailboxHasChild' } },
+                },
+                'x',
+              ],
+            ],
+            mailboxList(
+              grown.filter(
+                (mailbox) => mailbox.id !== 'u2' && mailbox.id !== 'u5',
+              ),
+            ),
+            batch([]),
+            [['Mailbox/set', { destroyed: ['u6', 'u1'] }, 'x']],
+          ]);
+
+          await expect(
+            provider.deleteMailbox(ARA, 'u1', children),
+          ).resolves.toMatchObject({ deleted: true });
+          expect(argsOf(recorded[5])).toMatchObject({ destroy: ['u6', 'u1'] });
+        });
+
+        it('나무의 남은 수(remaining)는 OR 조회의 전체 수다 — 다 옮기지 못하면 deleted: false', async () => {
+          const fake = fakeClient([
+            mailboxList(tree),
+            batch(
+              ids('m', 500).map((id) => only(id, 'u2')),
+              's1',
+              700,
+            ),
+            [
+              [
+                'Email/set',
+                {
+                  updated: Object.fromEntries(
+                    ids('m', 500).map((id) => [id, null]),
+                  ),
+                },
+                's',
+              ],
+            ],
+          ]);
+          advanceClockAfterCall(fake, 3, 21_000);
+
+          await expect(
+            fake.provider.deleteMailbox(ARA, 'u1', children),
+          ).resolves.toEqual({
+            deleted: false,
+            processed: 500,
+            movedToTrash: 500,
+            remaining: 200,
+          });
+        });
+
+        it('한 요청의 시간은 서비스가 받은 때(startedAt)부터 센다 — 남은 시간이 모자라면 차례를 시작하지 않고 MAIL_001', async () => {
+          const { provider, recorded } = fakeClient([mailboxList(tree)]);
+          expect(
+            await codeOf(
+              provider.deleteMailbox(ARA, 'u3', {
+                startedAt: Date.now() - 21_000,
+              }),
+            ),
+          ).toBe('MAIL_001');
+          expect(recorded).toHaveLength(1);
+        });
+      });
     });
 
     describe('전체 읽음 (markMailboxRead)', () => {
@@ -8684,6 +9086,757 @@ describe('JmapMailProvider', () => {
       });
     });
 
+    describe('예약 메일 지금 보내기 (releaseScheduledSend — 15단계)', () => {
+      const SCHEDULED = { $seen: true, '$ara-scheduled': true };
+      /** 예약한 보낸 사본 — 받는 사람 둘레에 숨은참조(SEOJUN)가 있다(보낸 사본에는 Bcc 머리글이 남는다) */
+      const sentCopy = (keywords: Record<string, boolean> = SCHEDULED) => ({
+        id: 'm1',
+        mailboxIds: { e: true },
+        keywords,
+        to: [{ name: '이도윤', email: DOYUN }],
+        cc: [],
+        bcc: [{ name: null, email: SEOJUN }],
+      });
+      const queued = { delivered: 'queued', smtpReply: '250 2.1.5 Queued' };
+      /** 예약 제출 — 원래 envelope(HOLDUNTIL · 받는 사람 · 숨은참조)과 발신 ID */
+      const scheduledSubmission = (
+        overrides: Record<string, unknown> = {},
+      ) => ({
+        id: 'sub1',
+        emailId: 'm1',
+        identityId: 'b',
+        undoStatus: 'pending',
+        sendAt: inFuture(3_600_000),
+        envelope: {
+          mailFrom: {
+            email: ARA,
+            parameters: { HOLDUNTIL: inFuture(3_600_000) },
+          },
+          rcptTo: [
+            { email: DOYUN, parameters: null },
+            { email: SEOJUN, parameters: null },
+          ],
+        },
+        deliveryStatus: { [DOYUN]: queued, [SEOJUN]: queued },
+        ...overrides,
+      });
+      /** 한 요청으로 읽는 것 — 메일함 · 그 메일 · 그 메일의 제출 */
+      const releaseLookup = (
+        submissions: Record<string, unknown>[],
+        email: Record<string, unknown> | null = sentCopy(),
+      ): JmapInvocation[] => [
+        ['Mailbox/get', { list: stalwartMailboxes }, 'm'],
+        [
+          'Email/get',
+          { list: email ? [email] : [], notFound: email ? [] : ['m1'] },
+          'g',
+        ],
+        [
+          'EmailSubmission/query',
+          {
+            ids: submissions.map((submission) => submission.id),
+            total: submissions.length,
+          },
+          'rq',
+        ],
+        ['EmailSubmission/get', { list: submissions }, 'rg'],
+      ];
+      const canceledOk: JmapInvocation[] = [
+        ['EmailSubmission/set', { updated: { sub1: null } }, 'x'],
+      ];
+      const created = (sendAt: string, undoStatus = 'pending') =>
+        [
+          [
+            'EmailSubmission/set',
+            { created: { send: { id: 'sub2', sendAt, undoStatus } } },
+            's',
+          ],
+          ['Email/set', { updated: { m1: null } }, 's'],
+        ] as JmapInvocation[];
+      const result = (
+        deliveryStatus: Record<string, unknown>,
+        undoStatus = 'pending',
+      ): JmapInvocation[] => [
+        [
+          'EmailSubmission/get',
+          { list: [{ id: 'sub2', undoStatus, deliveryStatus }] },
+          'd',
+        ],
+      ];
+      const quiet = (provider: JmapMailProvider) => {
+        const logger = Reflect.get(provider, 'logger') as {
+          log: () => void;
+          warn: () => void;
+        };
+        jest.spyOn(logger, 'log').mockImplementation(() => undefined);
+        return jest.spyOn(logger, 'warn').mockImplementation(() => undefined);
+      };
+
+      it('기다리는 예약 제출을 먼저 취소하고, 같은 메일을 원래 envelope 그대로(숨은참조 포함) 보내기 취소 초만큼 붙잡아 다시 낸다 — 예약 표시를 떼고, 받는 사람별 결과는 발송과 같다', async () => {
+        const undoAt = inFuture(10_000);
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          created(undoAt),
+          result({ [DOYUN]: queued, [SEOJUN]: queued }),
+        ]);
+        quiet(provider);
+
+        const released = await provider.releaseScheduledSend(ARA, 'm1', {
+          kind: 'undo',
+          seconds: 10,
+        });
+
+        expect(released).toEqual({
+          id: 'm1',
+          rejectedRecipients: [],
+          pendingSend: { kind: 'undo', sendAt: undoAt.replace('Z', '.000Z') },
+          releasedAt: expect.any(String) as string,
+        });
+        expect(recorded).toHaveLength(4);
+        // 1) 한 요청으로 읽는다 — 엔진이 id 를 해석하지 못하면 RES_001
+        expect(recorded[0].options).toMatchObject({
+          invalidRequestCode: 'RES_001',
+        });
+        expect(recorded[0].calls.map(([method]) => method)).toEqual([
+          'Mailbox/get',
+          'Email/get',
+          'EmailSubmission/query',
+          'EmailSubmission/get',
+        ]);
+        // 2) 취소가 먼저 — 다시 내기와 다른 요청
+        expect(recorded[1].calls).toEqual([
+          [
+            'EmailSubmission/set',
+            { accountId: 'd', update: { sub1: { undoStatus: 'canceled' } } },
+            'x',
+          ],
+        ]);
+        // 3) 같은 메일 · 같은 발신 ID · 원래 받는 사람(숨은참조 SEOJUN 포함) — MAIL FROM 의 붙잡기만 HOLDFOR 로
+        expect(recorded[2].calls).toEqual([
+          [
+            'EmailSubmission/set',
+            {
+              accountId: 'd',
+              create: {
+                send: {
+                  identityId: 'b',
+                  emailId: 'm1',
+                  envelope: {
+                    mailFrom: { email: ARA, parameters: { HOLDFOR: '10' } },
+                    rcptTo: [
+                      { email: DOYUN, parameters: null },
+                      { email: SEOJUN, parameters: null },
+                    ],
+                  },
+                },
+              },
+              onSuccessUpdateEmail: {
+                '#send': {
+                  'mailboxIds/d': null,
+                  'mailboxIds/e': true,
+                  'keywords/$draft': null,
+                  'keywords/$ara-sending': null,
+                  'keywords/$ara-scheduled': null,
+                },
+              },
+            },
+            's',
+          ],
+        ]);
+        // 4) 받는 사람별 결과는 따로 읽는다 (발송과 같다)
+        expect(argsOf(recorded[3])).toMatchObject({ ids: ['sub2'] });
+      });
+
+      it('보내기 취소를 0초로 두었으면 붙잡지 않고 낸다 — pendingSend null, 일부 거절은 rejectedRecipients 로', async () => {
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          created(inFuture(0), 'final'),
+          result(
+            {
+              [DOYUN]: queued,
+              [SEOJUN]: {
+                delivered: 'no',
+                smtpReply: '550 5.1.2 Mailbox does not exist.',
+              },
+            },
+            'final',
+          ),
+        ]);
+        quiet(provider);
+
+        await expect(
+          provider.releaseScheduledSend(ARA, 'm1', null),
+        ).resolves.toMatchObject({
+          pendingSend: null,
+          rejectedRecipients: [{ email: SEOJUN, reason: 'not-found' }],
+        });
+        expect(argsOf(recorded[2])).toMatchObject({
+          create: {
+            send: {
+              envelope: { mailFrom: { email: ARA, parameters: null } },
+            },
+          },
+        });
+      });
+
+      it('예약이 아닌 메일은 RES_001 — 보내기 취소를 기다리는 메일 · 취소해 임시보관함으로 간 메일 · 제출이 없는 메일 · 보낸 일반 메일 · 없는 메일 (아무것도 바꾸지 않는다)', async () => {
+        const cases: [
+          Record<string, unknown>[],
+          Record<string, unknown> | null,
+        ][] = [
+          // 보내기 취소를 기다린다 (예약 표시 없음)
+          [
+            [scheduledSubmission({ sendAt: inFuture(8_000) })],
+            sentCopy({ $seen: true }),
+          ],
+          // 예약을 취소해 임시보관함으로 갔다
+          [
+            [scheduledSubmission({ undoStatus: 'canceled' })],
+            sentCopy({ $draft: true, '$ara-canceled': true }),
+          ],
+          // 제출이 없다
+          [[], sentCopy()],
+          // 예약이 아니었던 보낸 메일
+          [
+            [
+              scheduledSubmission({
+                undoStatus: 'final',
+                sendAt: '2026-10-29T00:00:00Z',
+              }),
+            ],
+            sentCopy({ $seen: true }),
+          ],
+          // 없는 메일
+          [[], null],
+        ];
+        for (const [submissions, email] of cases) {
+          const { provider, recorded } = fakeClient([
+            releaseLookup(submissions, email),
+          ]);
+          quiet(provider);
+          expect(
+            await codeOf(
+              provider.releaseScheduledSend(ARA, 'm1', {
+                kind: 'undo',
+                seconds: 10,
+              }),
+            ),
+          ).toBe('RES_001');
+          expect(recorded).toHaveLength(1);
+        }
+      });
+
+      it('이미 보낸 메일(예약 시각이 막 지나 final · 배달 중)은 오류가 아니다 — pendingSend null · releasedAt null, 다시 내지 않는다', async () => {
+        for (const submission of [
+          scheduledSubmission({
+            undoStatus: 'final',
+            sendAt: '2026-10-29T00:00:00Z',
+          }),
+          // 보낼 시각이 지나 배달 중 (pending 이지만 기다리지 않는다)
+          scheduledSubmission({ sendAt: '2026-10-29T00:00:00Z' }),
+        ]) {
+          const { provider, recorded } = fakeClient([
+            releaseLookup([submission]),
+          ]);
+          quiet(provider);
+          await expect(
+            provider.releaseScheduledSend(ARA, 'm1', {
+              kind: 'undo',
+              seconds: 10,
+            }),
+          ).resolves.toEqual({
+            id: 'm1',
+            rejectedRecipients: [],
+            pendingSend: null,
+            releasedAt: null,
+          });
+          expect(recorded).toHaveLength(1);
+        }
+      });
+
+      it('취소하려니 엔진이 받지 않으면(cannotUnsend — 그사이 보냄) 다시 읽어 보낸 것으로 답한다 — 다시 내지 않는다', async () => {
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          [
+            [
+              'EmailSubmission/set',
+              { notUpdated: { sub1: { type: 'cannotUnsend' } } },
+              'x',
+            ],
+          ],
+          releaseLookup([
+            scheduledSubmission({
+              undoStatus: 'final',
+              sendAt: '2026-10-29T00:00:00Z',
+            }),
+          ]),
+        ]);
+        quiet(provider);
+
+        await expect(
+          provider.releaseScheduledSend(ARA, 'm1', null),
+        ).resolves.toMatchObject({ pendingSend: null, releasedAt: null });
+        expect(recorded).toHaveLength(3);
+      });
+
+      it('이미 지금 보내기를 한 메일(취소한 예약 제출 + 그 뒤 새 제출 — 다시 누름 · 응답을 받지 못한 재시도)은 그 새 제출의 지금 상태로 — 다시 내지 않는다', async () => {
+        const undoAt = inFuture(6_000);
+        const { provider, recorded } = fakeClient([
+          releaseLookup(
+            [
+              scheduledSubmission({ undoStatus: 'canceled' }),
+              scheduledSubmission({
+                id: 'sub2',
+                undoStatus: 'pending',
+                sendAt: undoAt,
+              }),
+            ],
+            sentCopy({ $seen: true }),
+          ),
+        ]);
+        quiet(provider);
+
+        await expect(
+          provider.releaseScheduledSend(ARA, 'm1', {
+            kind: 'undo',
+            seconds: 10,
+          }),
+        ).resolves.toEqual({
+          id: 'm1',
+          rejectedRecipients: [],
+          pendingSend: { kind: 'undo', sendAt: undoAt.replace('Z', '.000Z') },
+          releasedAt: undoAt.replace('Z', '.000Z'),
+        });
+        expect(recorded).toHaveLength(1);
+      });
+
+      it('앞 요청이 예약을 취소한 뒤 끊겼으면(예약 표시 · 제출은 모두 canceled) 취소를 건너뛰고 다시 낸다', async () => {
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission({ undoStatus: 'canceled' })]),
+          created(inFuture(10_000)),
+          result({ [DOYUN]: queued, [SEOJUN]: queued }),
+        ]);
+        quiet(provider);
+
+        await expect(
+          provider.releaseScheduledSend(ARA, 'm1', {
+            kind: 'undo',
+            seconds: 10,
+          }),
+        ).resolves.toMatchObject({ pendingSend: { kind: 'undo' } });
+        expect(recorded.map(({ calls }) => calls[0][0])).toEqual([
+          'Mailbox/get',
+          'EmailSubmission/set',
+          'EmailSubmission/get',
+        ]);
+        expect(argsOf(recorded[1])).toHaveProperty('create');
+      });
+
+      it('envelope · 발신 ID 를 읽지 못하면 취소하지 않고 MAIL_001 — 취소한 뒤 다시 내지 못하는 메일이 생기지 않게', async () => {
+        for (const broken of [
+          { envelope: null },
+          { identityId: undefined },
+          {
+            envelope: {
+              mailFrom: { email: ARA },
+              rcptTo: [{ email: DOYUN }, { email: null }],
+            },
+          },
+          { envelope: { mailFrom: { email: ARA }, rcptTo: [] } },
+        ]) {
+          const { provider, recorded } = fakeClient([
+            releaseLookup([scheduledSubmission(broken)]),
+          ]);
+          quiet(provider);
+          expect(
+            await codeOf(provider.releaseScheduledSend(ARA, 'm1', null)),
+          ).toBe('MAIL_001');
+          expect(recorded).toHaveLength(1);
+        }
+      });
+
+      it('엔진이 취소를 확인하지 않으면 다시 읽어 — 아직 기다리면 다시 내지 않고 MAIL_001, 취소됐으면 잇는다', async () => {
+        const silent: JmapInvocation[] = [
+          ['EmailSubmission/set', { updated: {} }, 'x'],
+        ];
+        const still = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          silent,
+          releaseLookup([scheduledSubmission()]),
+        ]);
+        quiet(still.provider);
+        expect(
+          await codeOf(still.provider.releaseScheduledSend(ARA, 'm1', null)),
+        ).toBe('MAIL_001');
+        expect(still.recorded).toHaveLength(3);
+
+        const gone = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          new BusinessException('MAIL_001', {
+            context: { reason: 'timeout' },
+          }),
+          releaseLookup([scheduledSubmission({ undoStatus: 'canceled' })]),
+          created(inFuture(0), 'final'),
+          result({ [DOYUN]: queued, [SEOJUN]: queued }, 'final'),
+        ]);
+        quiet(gone.provider);
+        await expect(
+          gone.provider.releaseScheduledSend(ARA, 'm1', null),
+        ).resolves.toMatchObject({ pendingSend: null });
+        expect(gone.recorded).toHaveLength(5);
+      });
+
+      it('엔진이 다시 내기를 분명히 거절하면(SetError · 메서드 오류 · 4xx) 다시 읽지 않고 한 번 더, 그래도 거절이면 임시보관함으로 되돌린 뒤 MAIL_001 (ScheduledSendReturnedToDraftsException)', async () => {
+        const setError: JmapInvocation[] = [
+          [
+            'EmailSubmission/set',
+            { notCreated: { send: { type: 'serverFail' } } },
+            's',
+          ],
+        ];
+        const methodError: JmapInvocation[] = [
+          ['error', { type: 'serverFail' }, 's'],
+        ];
+        // 엔진이 요청을 실행하지 않았다(4xx — isRequestRefused)
+        const rejected = new BusinessException('MAIL_001', {
+          context: { reason: 'http-error', status: 400 },
+        });
+        for (const [first, second] of [
+          [setError, methodError],
+          [rejected, setError],
+        ] as const) {
+          const { provider, recorded } = fakeClient([
+            releaseLookup([scheduledSubmission()]),
+            canceledOk,
+            first,
+            second,
+            [['Email/set', { updated: { m1: null } }, 'u']],
+          ]);
+          const warn = quiet(provider);
+
+          const failure = await provider
+            .releaseScheduledSend(ARA, 'm1', null)
+            .catch((caught: unknown) => caught);
+          expect(failure).toBeInstanceOf(
+            ScheduledSendReturnedToDraftsException,
+          );
+          expect(failure).toMatchObject({
+            code: 'MAIL_001',
+            context: { reason: 'release-resubmit-refused' },
+          });
+          // 읽기 · 취소 · 내기 두 번 · 되돌리기 — 거절 사이에 다시 읽지 않는다
+          expect(recorded.map(({ calls }) => calls[0][0])).toEqual([
+            'Mailbox/get',
+            'EmailSubmission/set',
+            'EmailSubmission/set',
+            'EmailSubmission/set',
+            'Email/set',
+          ]);
+          expect(argsOf(recorded[4])).toEqual({
+            accountId: 'd',
+            update: {
+              m1: {
+                mailboxIds: { d: true },
+                'keywords/$draft': true,
+                'keywords/$ara-canceled': true,
+                'keywords/$ara-scheduled': null,
+                'keywords/$ara-sending': null,
+              },
+            },
+          });
+          expect(warn).toHaveBeenCalled();
+        }
+      });
+
+      it('거듭 거절해 임시보관함으로 되돌리려는데 그것마저 못 하면 그냥 MAIL_001 — 되돌림 예외가 아니다(메일은 보낸편지함에 그대로)', async () => {
+        const setError: JmapInvocation[] = [
+          [
+            'EmailSubmission/set',
+            { notCreated: { send: { type: 'serverFail' } } },
+            's',
+          ],
+        ];
+        const notMoved: JmapInvocation[] = [
+          ['Email/set', { notUpdated: { m1: { type: 'serverFail' } } }, 'u'],
+        ];
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          setError,
+          setError,
+          notMoved,
+          notMoved,
+        ]);
+        quiet(provider);
+
+        const failure = await provider
+          .releaseScheduledSend(ARA, 'm1', null)
+          .catch((caught: unknown) => caught);
+        expect(failure).toBeInstanceOf(BusinessException);
+        expect(failure).not.toBeInstanceOf(
+          ScheduledSendReturnedToDraftsException,
+        );
+        expect(failure).toMatchObject({
+          code: 'MAIL_001',
+          context: { reason: 'canceled-send-not-returned-to-drafts' },
+        });
+        expect(recorded).toHaveLength(6);
+      });
+
+      it('다시 내기가 결과를 모르게 끊겼는데 다시 읽으니 새 제출이 있으면 그 상태로 답한다 — 임시보관함으로 옮기지 않는다', async () => {
+        const undoAt = inFuture(9_000);
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          new BusinessException('MAIL_001', {
+            context: { reason: 'timeout' },
+          }),
+          releaseLookup(
+            [
+              scheduledSubmission({ undoStatus: 'canceled' }),
+              scheduledSubmission({ id: 'sub2', sendAt: undoAt }),
+            ],
+            sentCopy({ $seen: true }),
+          ),
+        ]);
+        quiet(provider);
+
+        await expect(
+          provider.releaseScheduledSend(ARA, 'm1', {
+            kind: 'undo',
+            seconds: 10,
+          }),
+        ).resolves.toMatchObject({
+          pendingSend: { kind: 'undo', sendAt: undoAt.replace('Z', '.000Z') },
+        });
+        expect(recorded).toHaveLength(4);
+      });
+
+      it('다시 내기도 · 다시 읽기도 실패하면 보냈는지 모른다 — 임시보관함으로 옮기지 않고 MAIL_001 (다시 부르면 끊긴 지금 보내기로 잇는다)', async () => {
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          new BusinessException('MAIL_001', {
+            context: { reason: 'timeout' },
+          }),
+          new BusinessException('MAIL_001', {
+            context: { reason: 'timeout' },
+          }),
+        ]);
+        quiet(provider);
+
+        const failure = await provider
+          .releaseScheduledSend(ARA, 'm1', null)
+          .catch((caught: unknown) => caught);
+        expect(failure).toBeInstanceOf(BusinessException);
+        expect(failure).not.toBeInstanceOf(
+          ScheduledSendReturnedToDraftsException,
+        );
+        expect((failure as BusinessException).code).toBe('MAIL_001');
+        expect(recorded).toHaveLength(4);
+      });
+
+      it('다시 내기의 결과를 모르고(시간 초과 · 5xx · 해석하지 못한 응답) 다시 읽어도 새 제출이 없으면 — 둘째 제출 없음 · 임시보관함으로 옮기지 않음 · 그냥 MAIL_001', async () => {
+        const unknowns: (JmapInvocation[] | Error)[] = [
+          new BusinessException('MAIL_001', { context: { reason: 'timeout' } }),
+          new BusinessException('MAIL_001', {
+            context: { reason: 'http-error', status: 502 },
+          }),
+          // 응답에 제출 결과가 없다 — 엔진이 실행했는지 모른다
+          [['Email/set', { updated: {} }, 'x']],
+        ];
+        for (const unknown of unknowns) {
+          const { provider, recorded } = fakeClient([
+            releaseLookup([scheduledSubmission()]),
+            canceledOk,
+            unknown,
+            // 다시 읽기 — 예약 표시 그대로 · 예약 제출은 취소됨 · 새 제출 없음 (끊긴 지금 보내기)
+            releaseLookup([scheduledSubmission({ undoStatus: 'canceled' })]),
+          ]);
+          const warn = quiet(provider);
+
+          const failure = await provider
+            .releaseScheduledSend(ARA, 'm1', { kind: 'undo', seconds: 10 })
+            .catch((caught: unknown) => caught);
+          expect(failure).toBeInstanceOf(BusinessException);
+          expect(failure).not.toBeInstanceOf(
+            ScheduledSendReturnedToDraftsException,
+          );
+          expect(failure).toMatchObject({
+            code: 'MAIL_001',
+            context: {
+              reason: 'release-resubmit-unknown',
+              reread: 'interrupted',
+            },
+          });
+          // 읽기 · 취소 · 내기 한 번 · 다시 읽기 — 둘째 제출도 임시보관함으로 옮기기(Email/set)도 없다
+          expect(recorded.map(({ calls }) => calls[0][0])).toEqual([
+            'Mailbox/get',
+            'EmailSubmission/set',
+            'EmailSubmission/set',
+            'Mailbox/get',
+          ]);
+          expect(argsOf(recorded[2])).toHaveProperty('create');
+          expect(warn).toHaveBeenCalledTimes(1);
+        }
+      });
+
+      it('결과를 모르게 끝난 뒤 같은 요청을 다시 받으면 이어 낸다 — 예약 취소를 건너뛰고 다시 제출만 (끊긴 지금 보내기)', async () => {
+        const undoAt = inFuture(10_000);
+        const { provider, recorded } = fakeClient([
+          // 1) 첫 요청 — 취소한 뒤 다시 내기가 시간 초과 · 다시 읽어도 새 제출 없음
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          new BusinessException('MAIL_001', { context: { reason: 'timeout' } }),
+          releaseLookup([scheduledSubmission({ undoStatus: 'canceled' })]),
+          // 2) 같은 요청을 다시 — 끊긴 지금 보내기로 이어 낸다
+          releaseLookup([scheduledSubmission({ undoStatus: 'canceled' })]),
+          created(undoAt),
+          result({ [DOYUN]: queued, [SEOJUN]: queued }),
+        ]);
+        quiet(provider);
+
+        expect(
+          await codeOf(
+            provider.releaseScheduledSend(ARA, 'm1', {
+              kind: 'undo',
+              seconds: 10,
+            }),
+          ),
+        ).toBe('MAIL_001');
+        await expect(
+          provider.releaseScheduledSend(ARA, 'm1', {
+            kind: 'undo',
+            seconds: 10,
+          }),
+        ).resolves.toEqual({
+          id: 'm1',
+          rejectedRecipients: [],
+          pendingSend: { kind: 'undo', sendAt: undoAt.replace('Z', '.000Z') },
+          releasedAt: expect.any(String) as string,
+        });
+        // 둘째 요청은 취소하지 않고(이미 취소됨) 원래 envelope 그대로 다시 낸다
+        expect(recorded.slice(4).map(({ calls }) => calls[0][0])).toEqual([
+          'Mailbox/get',
+          'EmailSubmission/set',
+          'EmailSubmission/get',
+        ]);
+        expect(argsOf(recorded[5])).toMatchObject({
+          create: {
+            send: {
+              emailId: 'm1',
+              envelope: {
+                mailFrom: { email: ARA, parameters: { HOLDFOR: '10' } },
+                rcptTo: [
+                  { email: DOYUN, parameters: null },
+                  { email: SEOJUN, parameters: null },
+                ],
+              },
+            },
+          },
+        });
+      });
+
+      it('제출마다 남은 시간을 먼저 본다 — 10초보다 적으면 내지 않고 그냥 MAIL_001 (예약은 취소된 채 — 다시 부르면 이어 낸다)', async () => {
+        const realNow = Date.now();
+        // 시계를 손으로 — 엔진 호출이 n 번 기록된 뒤부터 40초 지난 것으로 (한 요청의 시간 45초 가운데 5초 남음)
+        const clockAfter = (calls: number, recorded: unknown[]) =>
+          jest
+            .spyOn(Date, 'now')
+            .mockImplementation(() =>
+              recorded.length >= calls ? realNow + 40_000 : realNow,
+            );
+
+        // 첫 제출 전 — 취소한 뒤 남은 시간이 모자라다
+        const beforeFirst = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+        ]);
+        quiet(beforeFirst.provider);
+        const firstClock = clockAfter(2, beforeFirst.recorded);
+        try {
+          const failure = await beforeFirst.provider
+            .releaseScheduledSend(ARA, 'm1', null)
+            .catch((caught: unknown) => caught);
+          expect(failure).not.toBeInstanceOf(
+            ScheduledSendReturnedToDraftsException,
+          );
+          expect(failure).toMatchObject({
+            code: 'MAIL_001',
+            context: { reason: 'release-budget-exhausted', attempt: 1 },
+          });
+          expect(beforeFirst.recorded).toHaveLength(2);
+        } finally {
+          firstClock.mockRestore();
+        }
+
+        // 둘째 제출 전 — 첫 제출을 엔진이 거절하는 사이 시간이 갔다: 둘째는 내지 않고 되돌리지도 않는다
+        const beforeSecond = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          [
+            [
+              'EmailSubmission/set',
+              { notCreated: { send: { type: 'serverFail' } } },
+              's',
+            ],
+          ],
+        ]);
+        quiet(beforeSecond.provider);
+        const secondClock = clockAfter(3, beforeSecond.recorded);
+        try {
+          const failure = await beforeSecond.provider
+            .releaseScheduledSend(ARA, 'm1', null)
+            .catch((caught: unknown) => caught);
+          expect(failure).not.toBeInstanceOf(
+            ScheduledSendReturnedToDraftsException,
+          );
+          expect(failure).toMatchObject({
+            code: 'MAIL_001',
+            context: { reason: 'release-budget-exhausted', attempt: 2 },
+          });
+          expect(beforeSecond.recorded).toHaveLength(3);
+          // 첫 제출은 남은 시간(최대 40초)으로 — 10초 아래로 보낸 적이 없다
+          expect(beforeSecond.recorded[2].options).toEqual({
+            timeoutMs: JMAP_SEND_TIMEOUT_MS,
+          });
+        } finally {
+          secondClock.mockRestore();
+        }
+      });
+
+      it('받는 사람이 모두 받지 않았으면 기다리는 새 제출을 취소하고 임시보관함으로 되돌린다 — MAIL_010 (ScheduledSendReturnedToDraftsException)', async () => {
+        const rejected = {
+          delivered: 'no',
+          smtpReply: '550 5.1.2 Mailbox does not exist.',
+        };
+        const { provider, recorded } = fakeClient([
+          releaseLookup([scheduledSubmission()]),
+          canceledOk,
+          created(inFuture(10_000)),
+          result({ [DOYUN]: rejected, [SEOJUN]: rejected }),
+          [['EmailSubmission/set', { updated: { sub2: null } }, 'c']],
+          [['Email/set', { updated: { m1: null } }, 'u']],
+        ]);
+        quiet(provider);
+
+        const failure = await provider
+          .releaseScheduledSend(ARA, 'm1', { kind: 'undo', seconds: 10 })
+          .catch((caught: unknown) => caught);
+        expect(failure).toBeInstanceOf(ScheduledSendReturnedToDraftsException);
+        expect((failure as BusinessException).code).toBe('MAIL_010');
+        expect(argsOf(recorded[4])).toEqual({
+          accountId: 'd',
+          update: { sub2: { undoStatus: 'canceled' } },
+        });
+        expect(argsOf(recorded[5])).toMatchObject({
+          update: { m1: { mailboxIds: { d: true } } },
+        });
+      });
+    });
+
     describe('취소해 되돌린 발송을 이어 쓴다 (getDraft)', () => {
       const SIGNATURE_CID =
         'sig-0b9a4f9e-7c2d-4d3a-9f4e-1a2b3c4d5e6f@arasystem.test';
diff --git a/backend/src/modules/mail/jmap/jmap-mail.provider.ts b/backend/src/modules/mail/jmap/jmap-mail.provider.ts
index cc10059..ad634c9 100644
--- a/backend/src/modules/mail/jmap/jmap-mail.provider.ts
+++ b/backend/src/modules/mail/jmap/jmap-mail.provider.ts
@@ -12,6 +12,7 @@ import {
   MAX_ENVELOPE_RESUBMITS,
 } from '@/modules/mail/mail.constants';
 import {
+  ScheduledSendReturnedToDraftsException,
   SendNotStartedException,
   type MailProvider,
 } from '@/modules/mail/mail.provider';
@@ -34,9 +35,12 @@ import type {
   MailAttachment,
   MailBlockAdded,
   MailBlockList,
+  MailBlockRunRequest,
   Mailbox,
   MailboxBulkResult,
+  MailboxChange,
   MailboxCreate,
+  MailboxDeleteOptions,
   MailboxDeletion,
   MailFilterRunContext,
   MailFilterRunOutcome,
@@ -64,6 +68,7 @@ import type {
   PasswordChangeOutcome,
   RecipientFields,
   RejectedRecipient,
+  ReleasedScheduledSend,
   SavedDraft,
   SendHold,
   SentMessage,
@@ -72,6 +77,11 @@ import type {
   TwoFactorLoginResult,
   UploadedFile,
 } from '@/modules/mail/mail.types';
+import {
+  deepestFirstIds,
+  descendantsOf,
+  isSelfOrDescendant,
+} from '@/modules/mail/mailbox-tree';
 import { traceTag } from '@/shared/logger/request-context';
 import { maskEmail } from '@/shared/utils/mask';
 import {
@@ -114,6 +124,7 @@ import {
   firstSetError,
   isState,
   warnRefusals,
+  type MethodResult,
 } from './jmap-results';
 import {
   describeFailure,
@@ -593,9 +604,18 @@ function assertUserMailbox(mailbox: JmapMailbox, action: string): void {
   }
 }
 
+/** 엔진이 상위(parentId)를 받지 않은 거절인가 — 없는 상위 · 고리(자기 아래로 옮기기 — 2026-11-09 확인) */
+function isParentRefusal(error: JmapError): boolean {
+  return (
+    error.type === 'invalidProperties' &&
+    (error.properties ?? []).includes('parentId')
+  );
+}
+
 /**
- * 메일함 만들기 · 이름 바꾸기를 엔진이 거절한 것 — 같은 상위 안에 같은 이름(alreadyExists, 확인함)은 MAIL_009,
- * 상위가 그사이 없어졌으면(parentId 속성 거절) RES_001, 그 밖은 오류 표대로 (jmap.errors.ts)
+ * 메일함 만들기 · 이름 바꾸기 · 옮기기를 엔진이 거절한 것 — 같은 상위 안에 같은 이름(alreadyExists, 확인함 — 대소문자 무시)은 MAIL_009,
+ * 상위가 그사이 없어졌으면(parentId 속성 거절) RES_001, 그 밖은 오류 표대로 (jmap.errors.ts).
+ * 옮기기의 고리(상위는 있는데 parentId 거절)는 부르는 쪽(updateMailbox)이 먼저 VAL_001 로 가른다
  */
 function mailboxSetFailure(
   error: JmapError,
@@ -606,10 +626,7 @@ function mailboxSetFailure(
       context: { reason: 'mailbox-name-taken', method },
     });
   }
-  if (
-    error.type === 'invalidProperties' &&
-    (error.properties ?? []).includes('parentId')
-  ) {
+  if (isParentRefusal(error)) {
     return new BusinessException('RES_001', {
       context: { reason: 'mailbox-parent-gone', method },
     });
@@ -617,6 +634,80 @@ function mailboxSetFailure(
   return jmapFailure(error, { method });
 }
 
+/**
+ * 메일함 가운데 하나에라도 든 메일 (Email/query 의 조건) — 하나면 지금처럼 `inMailbox` 하나, 여럿이면(하위까지 지우기의 나무 — 15단계) OR.
+ * 엔진은 OR 조건의 전체 수를 겹치지 않게 센다(2026-11-09 확인)
+ */
+function inAnyMailbox(mailboxIds: readonly string[]): JmapEmailFilter {
+  return mailboxIds.length === 1
+    ? { inMailbox: mailboxIds[0] }
+    : {
+        operator: 'OR',
+        conditions: mailboxIds.map((inMailbox) => ({ inMailbox })),
+      };
+}
+
+/** 지울 나무 (15단계) — 그 메일함과(하위까지 지우기면) 하위 모두 */
+interface DeletionTree {
+  /** 나무의 메일함 — 그 메일함이 맨 앞 */
+  readonly ids: readonly string[];
+  /** 지울 차례 — 깊은 것부터, 그 메일함은 맨 끝 (mailbox-tree.ts) */
+  readonly order: readonly string[];
+  /** 처음 남은 수의 어림 — 나무의 메일함마다 든 수의 합 (차례를 하나도 읽지 못하고 끝날 때만 쓴다) */
+  readonly initialTotal: number;
+}
+
+/**
+ * 지울 나무를 정한다 — 하위 메일함이 있는데 하위까지 지우기가 아니면 VAL_001(옛 화면이 모르고 하위를 지우지 않게),
+ * 하위에 역할이 있는 메일함이 있으면(다른 프로그램이 만든 나무) VAL_001
+ */
+function deletionTree(
+  mailboxes: readonly JmapMailbox[],
+  root: JmapMailbox,
+  withChildren: boolean,
+): DeletionTree {
+  const descendants = descendantsOf(mailboxes, root.id).map(
+    ({ mailbox }) => mailbox,
+  );
+  if (descendants.length > 0 && !withChildren) {
+    throw new BusinessException('VAL_001', {
+      context: { reason: 'mailbox-has-children' },
+    });
+  }
+  const roleMailbox = descendants.find(
+    (mailbox) => engineRole(mailbox) !== null,
+  );
+  if (roleMailbox) {
+    throw new BusinessException('VAL_001', {
+      context: {
+        reason: 'role-mailbox-in-tree',
+        role: engineRole(roleMailbox),
+      },
+    });
+  }
+  return {
+    ids: [root.id, ...descendants.map((mailbox) => mailbox.id)],
+    order: deepestFirstIds(mailboxes, root.id),
+    initialTotal: [root, ...descendants].reduce(
+      (sum, mailbox) => sum + (mailbox.totalEmails ?? 0),
+      0,
+    ),
+  };
+}
+
+/** 지운 메일함을 나무에서 뺀다 — 나머지를 지우는 사이 메일이 들어와 다음 차례에 다시 읽을 때 */
+function withoutDestroyed(
+  tree: DeletionTree,
+  destroyed: ReadonlySet<string>,
+): DeletionTree {
+  if (destroyed.size === 0) return tree;
+  return {
+    ids: tree.ids.filter((id) => !destroyed.has(id)),
+    order: tree.order.filter((id) => !destroyed.has(id)),
+    initialTotal: tree.initialTotal,
+  };
+}
+
 /** 조회의 전체 수 — 엔진이 세어 주지 않으면 받은 수로 (가득 찼으면 더 있는 것으로 하나 더) */
 function queryTotal(result: JmapQueryResult, received: number): number {
   if (typeof result.total === 'number' && result.total >= received) {
@@ -835,13 +926,15 @@ interface CreatedSubmission {
 
 /**
  * 제출 하나(EmailSubmission/set create, 호출 id 's') — 늘 envelope 을 직접 준다. 성공하면 초안 → 보낸편지함으로 옮기고 발송 중 표시를 뗀다
- * @param emailId 같은 요청에서 만든 초안(`#draft`)이나 이미 만든 메일 id (envelope 을 고쳐 다시 낼 때)
+ * @param emailId 같은 요청에서 만든 초안(`#draft`)이나 이미 만든 메일 id (envelope 을 고쳐 다시 낼 때 · 예약 메일 지금 보내기 — 15단계)
+ * @param extraPatch 성공하면 메일에 함께 할 것 (지금 보내기는 예약 표시를 뗀다)
  */
 function submitCall(
   accountId: string,
   plan: SubmissionPlan,
   emailId: string,
   rcptTo: readonly string[],
+  extraPatch: Readonly<Record<string, unknown>> = {},
 ): JmapInvocation {
   return [
     'EmailSubmission/set',
@@ -860,6 +953,7 @@ function submitCall(
           [`mailboxIds/${plan.sentId}`]: true,
           'keywords/$draft': null,
           [`keywords/${INTERNAL_SEND_KEYWORD}`]: null,
+          ...extraPatch,
         },
       },
     },
@@ -867,6 +961,147 @@ function submitCall(
   ];
 }
 
+/**
+ * 예약 메일 지금 보내기(15단계) 한 요청이 엔진을 기다리는 시간 — 엔진 호출마다 남은 시간만큼만 기다린다.
+ * 정리(새 제출 취소 · 임시보관함으로 되돌리기 두 번 · 결과를 모를 때 다시 읽기)는 남은 시간이 모자라도 RELEASE_CLEANUP_MIN_MS 씩 더 쓴다 —
+ * 그래서 한 요청은 54초 남짓까지 걸린다(45 + 3 × 3). 앞단 nginx 의 기본 시간 제한(60초) · 클라이언트의 발송 한도(60초) 안이다
+ */
+const RELEASE_BUDGET_MS = 45_000;
+/** 정리(임시보관함으로 되돌리기 · 새 제출 취소 · 결과를 모를 때 다시 읽기)에 남은 시간이 모자라도 쓰는 최소 시간 */
+const RELEASE_CLEANUP_MIN_MS = 3_000;
+/** 다시 제출하는 횟수 — 엔진이 분명히 거절했을 때만 한 번 더 (결과를 모르면 다시 내지 않는다 — 계약 2절 "보내기 취소 · 예약 발송") */
+const RELEASE_SUBMIT_ATTEMPTS = 2;
+/** 지금 보내기가 읽는 그 메일의 제출 속성 — 상태 · 보낼 시각 · 다시 제출할 envelope · 발신 ID · 받는 사람별 결과 */
+const RELEASE_SUBMISSION_PROPERTIES = [
+  'id',
+  'emailId',
+  'identityId',
+  'undoStatus',
+  'sendAt',
+  'envelope',
+  'deliveryStatus',
+];
+/** 지금 보내기가 읽는 그 메일의 속성 — 메일함 · 표시(예약 · 취소한 발송) · 받는 사람(받는 사람별 결과를 맞춘다) */
+const RELEASE_EMAIL_PROPERTIES = [
+  'id',
+  'mailboxIds',
+  'keywords',
+  'to',
+  'cc',
+  'bcc',
+];
+
+/** 지금 보내기가 본 그 메일의 지금 상태 (releaseStateOf) */
+type ReleaseState =
+  /** 예약 표시가 있고 기다리는 제출이 있다 — 취소하고 다시 제출한다 */
+  | {
+      readonly kind: 'scheduled';
+      readonly held: readonly JmapEmailSubmission[];
+    }
+  /** 예약 표시가 있고 취소한 발송 표시는 없는데 제출이 모두 취소됐다 — 앞 요청이 취소한 뒤 끊겼다: 다시 제출만 한다 */
+  | { readonly kind: 'interrupted'; readonly source: JmapEmailSubmission }
+  /** 취소한 제출과 그 뒤 제출이 함께 있다 — 지금 보내기를 이미 했다(다시 누름 · 응답을 받지 못한 재시도) */
+  | { readonly kind: 'released'; readonly current: JmapEmailSubmission }
+  /** 예약 표시가 있고 끝나지 않은 제출이 있는데 기다리지 않는다 — 예약 시각이 지나 보냈다(배달 중 포함) */
+  | { readonly kind: 'sent'; readonly live: readonly JmapEmailSubmission[] }
+  /** 예약이 아니다 — 보내기 취소를 기다리는 메일 · 취소해 임시보관함으로 간 메일 · 제출이 없음 */
+  | { readonly kind: 'not-scheduled'; readonly why: string };
+
+/** 보낼 시각이 가장 늦은 제출 (같으면 뒤의 것) */
+function latestSubmission(
+  submissions: readonly JmapEmailSubmission[],
+): JmapEmailSubmission {
+  return submissions.reduce((latest, submission) =>
+    (Date.parse(submission.sendAt ?? '') || 0) >=
+    (Date.parse(latest.sendAt ?? '') || 0)
+      ? submission
+      : latest,
+  );
+}
+
+/**
+ * 지금 보내기가 본 그 메일의 상태 — 순수 함수 (계약 2절 "보내기 취소 · 예약 발송" — 15단계). 차례가 중요하다:
+ * 취소한 발송 표시(임시보관함으로 되돌림) → 기다리는 예약 → 이미 지금 보냄 → 앞 요청이 끊김 → 이미 보냄 → 예약이 아님.
+ * 기다리는 제출은 pending 이고 보낼 시각이 아직인 것(isHeld)이다 — 보낼 시각이 지나 배달 중인 제출은 보낸 것으로 본다
+ */
+export function releaseStateOf(
+  email: Pick<JmapEmail, 'keywords'>,
+  submissions: readonly JmapEmailSubmission[],
+  nowMs: number,
+): ReleaseState {
+  if (email.keywords?.[CANCELED_SEND_KEYWORD] === true) {
+    return { kind: 'not-scheduled', why: 'returned-to-drafts' };
+  }
+  const scheduled = email.keywords?.[SCHEDULED_SEND_KEYWORD] === true;
+  const canceled = submissions.filter(
+    (submission) => submission.undoStatus === UNDO_CANCELED,
+  );
+  const live = submissions.filter(
+    (submission) => submission.undoStatus !== UNDO_CANCELED,
+  );
+  const held = live.filter((submission) => isHeld(submission, nowMs));
+  if (scheduled && held.length > 0) return { kind: 'scheduled', held };
+  if (canceled.length > 0 && live.length > 0) {
+    return {
+      kind: 'released',
+      current:
+        held.length > 0 ? latestSubmission(held) : latestSubmission(live),
+    };
+  }
+  if (scheduled && canceled.length > 0) {
+    return { kind: 'interrupted', source: latestSubmission(canceled) };
+  }
+  if (scheduled && live.length > 0) return { kind: 'sent', live };
+  return {
+    kind: 'not-scheduled',
+    why: held.length > 0 ? 'undo-pending' : 'no-scheduled-submission',
+  };
+}
+
+/**
+ * 다시 제출할 envelope — 그 예약 제출의 보내는 사람 · 받는 사람 그대로(받는 사람을 머리글에서 다시 만들지 않는다 — 숨은참조 · envelope 에서 뺀 주소가 있다),
+ * MAIL FROM 의 붙잡기 매개변수만 바꾼다(hold — 보내기 취소 설정, 없으면 바로). 하나라도 읽지 못하면 null (다시 제출하지 않는다 — 닫힌 쪽)
+ */
+export function releaseEnvelopeOf(source: JmapEmailSubmission): {
+  readonly identityId: string;
+  readonly from: string;
+  readonly rcptTo: string[];
+} | null {
+  const identityId = source.identityId;
+  const from = source.envelope?.mailFrom?.email;
+  const recipients = source.envelope?.rcptTo;
+  if (!identityId || typeof from !== 'string' || from.trim() === '') {
+    return null;
+  }
+  if (!Array.isArray(recipients) || recipients.length === 0) return null;
+  const rcptTo: string[] = [];
+  for (const recipient of recipients) {
+    const address = recipient?.email;
+    if (typeof address !== 'string' || address.trim() === '') return null;
+    rcptTo.push(address);
+  }
+  return { identityId, from, rcptTo };
+}
+
+/** 지금 보내기가 한 요청으로 읽은 것 (readReleaseSnapshot) */
+interface ReleaseSnapshot {
+  readonly email: JmapEmail;
+  readonly submissions: JmapEmailSubmission[];
+  readonly draftsId: string;
+  readonly sentId: string;
+}
+
+/** 보낸 사본의 받는 사람 · 참조 · 숨은참조 — 받는 사람별 결과를 맞춘다(보낸 사본에는 숨은참조 머리글이 남는다 — envelope.ts 머리말) */
+function recipientsOf(
+  email: Pick<JmapEmail, 'to' | 'cc' | 'bcc'>,
+): RecipientFields {
+  return {
+    to: toAddresses(email.to),
+    cc: toAddresses(email.cc),
+    bcc: toAddresses(email.bcc),
+  };
+}
+
 /** 답장 스레드 헤더 — 원 메일의 Message-ID 를 In-Reply-To 로, References 끝에 이어 붙인다 */
 export function buildThreadHeaders(
   original: Pick<JmapEmail, 'messageId' | 'references'> | undefined,
@@ -1029,67 +1264,123 @@ export class JmapMailProvider implements MailProvider {
   }
 
   /**
-   * 메일함 이름 바꾸기 — 역할이 있는 메일함(기본 메일함)은 VAL_001, 없으면 RES_001, 같은 이름이 있으면 MAIL_009.
-   * 지금 이름과 같으면 엔진에 묻지 않고 그대로 돌려준다 (자기 이름과 겹친다고 거절되지 않게)
+   * 메일함 이름 바꾸기 · 옮기기 (15단계 — 계약 2절 "메일함 관리") — 보낸 칸(이름 · 상위)만 바꾼다. 엔진은 상위를 바꾸면 하위와 안의 메일을 함께 옮긴다.
+   * - 역할이 있는 메일함(기본 메일함)은 VAL_001, 없으면 RES_001
+   * - 새 상위: 없으면 RES_001, 만들기와 같은 자리(받은편지함 · 보관함 · 역할 없는 메일함)가 아니면 VAL_001, 자기 자신 · 자기 하위면 VAL_001 — 엔진에 묻기 전에 본다
+   *   (엔진도 고리를 invalidProperties(parentId)로 막는다 — 2026-11-09 확인. 그때 같은 요청에서 다시 읽은 목록에 새 상위가 있으면 VAL_001, 그사이 없어졌으면 RES_001)
+   * - 새 자리에 같은 이름이 있으면 엔진이 alreadyExists 로 거절한다(대소문자 무시 — 2026-11-09 확인) → MAIL_009
+   * - 이름 · 상위가 지금과 같으면 엔진에 묻지 않고 그대로 돌려준다 (자기 이름과 겹친다고 거절되지 않게). 깊이 한도는 두지 않는다(만들기와 같다)
    */
-  async renameMailbox(
+  async updateMailbox(
     user: string,
     id: string,
-    name: string,
+    change: MailboxChange,
   ): Promise<Mailbox> {
-    const mailbox = findMailbox(await this.loadMailboxes(user), id);
-    assertUserMailbox(mailbox, 'rename');
-    if (mailbox.name === name) return toMailbox(mailbox);
+    const mailboxes = await this.loadMailboxes(user);
+    const mailbox = findMailbox(mailboxes, id);
+    assertUserMailbox(mailbox, 'update');
+
+    const { name, parentId } = change;
+    if (parentId !== undefined && parentId !== null) {
+      const role = engineRole(findMailbox(mailboxes, parentId));
+      if (role !== null && !PARENT_ALLOWED_ROLES.has(role)) {
+        throw new BusinessException('VAL_001', {
+          context: { reason: 'mailbox-parent-not-allowed', parentRole: role },
+        });
+      }
+      if (isSelfOrDescendant(mailboxes, mailbox.id, parentId)) {
+        throw new BusinessException('VAL_001', {
+          context: { reason: 'mailbox-move-into-itself' },
+        });
+      }
+    }
+
+    const update: Record<string, unknown> = {};
+    if (name !== undefined && name !== mailbox.name) update.name = name;
+    if (parentId !== undefined && parentId !== (mailbox.parentId ?? null)) {
+      update.parentId = parentId;
+    }
+    if (Object.keys(update).length === 0) return toMailbox(mailbox);
+    const moving = 'parentId' in update;
 
     const responses = await this.jmap.call(user, (accountId) => [
-      ['Mailbox/set', { accountId, update: { [mailbox.id]: { name } } }, 'u'],
+      ['Mailbox/set', { accountId, update: { [mailbox.id]: update } }, 'u'],
       [
         'Mailbox/get',
-        { accountId, ids: [mailbox.id], properties: MAILBOX_PROPERTIES },
+        {
+          accountId,
+          // 옮길 때는 목록 전체 — 엔진이 상위를 거절하면 그 상위가 아직 있는지 같은 순간의 목록으로 가른다
+          ids: moving ? null : [mailbox.id],
+          properties: MAILBOX_PROPERTIES,
+        },
         'm',
       ],
     ]);
     const set = expectResult<JmapSetResult>(responses, 'u', 'Mailbox/set');
+    const { list = [] } = expectResult<JmapGetResult<JmapMailbox>>(
+      responses,
+      'm',
+      'Mailbox/get',
+    );
     const failure = firstSetError(set.notUpdated);
-    if (failure) throw mailboxSetFailure(failure, 'Mailbox/set');
+    if (failure) {
+      if (
+        moving &&
+        typeof parentId === 'string' &&
+        isParentRefusal(failure) &&
+        list.some((candidate) => candidate.id === parentId)
+      ) {
+        // 상위는 있는데 엔진이 거절했다 — 그사이 그 상위가 이 메일함의 하위가 됐다(고리)
+        throw new BusinessException('VAL_001', {
+          context: { reason: 'mailbox-move-refused', method: 'Mailbox/set' },
+        });
+      }
+      throw mailboxSetFailure(failure, 'Mailbox/set');
+    }
 
-    const [renamed] =
-      expectResult<JmapGetResult<JmapMailbox>>(responses, 'm', 'Mailbox/get')
-        .list ?? [];
-    if (!renamed) {
+    const updated = list.find((candidate) => candidate.id === mailbox.id);
+    if (!updated) {
       throw new BusinessException('RES_001', {
         context: { reason: 'mailbox-gone' },
       });
     }
-    return toMailbox(renamed);
+    if (moving) {
+      // 옮겼을 때만 — 메일함 id 만 남긴다 (이름 없이 — 사용자가 정한 글이다). 지금 자리 그대로면 위에서 엔진에 묻지 않고 돌려줬다
+      this.logger.log(
+        `${traceTag()} 메일함을 옮겼습니다: user=${maskEmail(user)}, 메일함=${mailbox.id}, 새 상위=${parentId ?? '맨 위'}${'name' in update ? ', 이름도 바꿈' : ''}`,
+      );
+    }
+    return toMailbox(updated);
   }
 
   /**
    * 메일함 지우기 (계약 2절 "메일함 관리") — 메일을 영구 삭제하지 않는다. 한 요청의 시간 · 멈춘 차례는 BulkRun.
-   * 1) 메일함 목록으로 확인 — 없으면 RES_001, 역할이 있으면 · 하위 메일함이 있으면 VAL_001
-   * 2) 차례마다 메일을 BULK_BATCH_SIZE 통씩 읽어(id · 들어 있는 메일함, 그때의 상태) 확인한 상태 그대로일 때만(ifInState) 옮긴다 —
-   *    이 메일함에만 있으면 휴지통으로(이 메일함에서 빼고 휴지통에 넣는다), 다른 메일함에도 있으면 이 메일함에서만 뺀다
-   * 3) 비었으면 빈 메일함을 지운다(`onDestroyRemoveEmails: false` — 메일을 지우는 옵션은 쓰지 않는다).
-   *    그사이 메일이 들어와 엔진이 mailboxHasEmail 로 거절하면 다시 옮긴다
-   * 다 옮기지 못하면 deleted: false 와 진행 수(processed — 이 메일함에서 빠진 수)·휴지통으로 옮긴 수·남은 수 (클라이언트가 다시 보낸다).
+   * 1) 메일함 목록으로 확인 — 없으면 RES_001, 역할이 있으면 · 하위 메일함이 있으면 VAL_001.
+   *    하위까지 지우기(withChildren — 15단계)면 그 메일함과 하위 모두(나무)를 같은 규칙으로 다룬다 — 하위에 역할이 있는 메일함이 있으면 VAL_001
+   * 2) 차례마다 나무의 메일을 BULK_BATCH_SIZE 통씩 읽어(id · 들어 있는 메일함, 그때의 상태) 확인한 상태 그대로일 때만(ifInState) 옮긴다 —
+   *    나무 안에만 있으면 휴지통으로(나무의 메일함에서 빼고 휴지통에 넣는다), 나무 밖의 메일함에도 있으면 나무의 메일함에서만 뺀다
+   * 3) 비었으면 빈 메일함을 지운다(`onDestroyRemoveEmails: false` — 메일을 지우는 옵션은 쓰지 않는다). 나무는 깊은 것부터 한 요청에 적는다 —
+   *    엔진은 적은 차례대로 지운다(2026-11-09 확인). 그사이 메일이 들어와 엔진이 mailboxHasEmail 로 거절하면 다시 옮긴다.
+   *    그사이 하위 메일함이 생기면(mailboxHasChild) 하위까지 지울 때는 나무를 다시 읽어 잇고, 아니면 VAL_001
+   * 다 옮기지 못하면 deleted: false 와 진행 수(processed — 나무에서 빠진 수)·휴지통으로 옮긴 수·남은 수 (클라이언트가 다시 보낸다).
    * 옮길 메일이 있는데 휴지통이 없으면 MAIL_001 (옮길 곳 없이 지우지 않는다).
    * 붙잡힌 메일(보내기 취소 · 예약 — 9단계)은 옮기지 않는다 — 남은 것이 그것뿐이면 이 요청에서 옮긴 것까지로 답하고(남은 수에 든다),
    * 옮긴 것이 없으면 MAIL_015 (같은 메일을 끝없이 다시 읽지 않게 — 클라이언트의 되풀이도 끝난다). 차례마다 제출을 읽지 못하면 MAIL_001
    */
-  async deleteMailbox(user: string, id: string): Promise<MailboxDeletion> {
-    const run = new BulkRun();
+  async deleteMailbox(
+    user: string,
+    id: string,
+    options: MailboxDeleteOptions = {},
+  ): Promise<MailboxDeletion> {
+    const run = new BulkRun(options.startedAt);
+    const withChildren = options.withChildren === true;
     const mailboxes = await this.loadMailboxes(user, run.callOptions());
     const mailbox = findMailbox(mailboxes, id);
     assertUserMailbox(mailbox, 'delete');
-    if (mailboxes.some((candidate) => candidate.parentId === mailbox.id)) {
-      throw new BusinessException('VAL_001', {
-        context: { reason: 'mailbox-has-children' },
-      });
-    }
+    let tree = deletionTree(mailboxes, mailbox, withChildren);
     const trashId = roleMailboxId(mailboxes, 'trash');
-    const target = `mailboxIds/${mailbox.id}`;
     let movedToTrash = 0;
-    let remaining = mailbox.totalEmails ?? 0;
+    let remaining = tree.initialTotal;
     const result = (deleted: boolean): MailboxDeletion => ({
       deleted,
       processed: run.processed,
@@ -1101,16 +1392,33 @@ export class JmapMailProvider implements MailProvider {
       while (run.canStartRound()) {
         const batch = await this.readMailboxBatch(
           user,
-          mailbox.id,
+          tree.ids,
           run.callOptions(),
         );
         remaining = batch.total;
         if (batch.emails.length === 0) {
-          if (
-            await this.destroyEmptyMailbox(user, mailbox.id, run.callOptions())
-          ) {
-            return result(true);
+          const destroyed = await this.destroyEmptyMailboxes(
+            user,
+            tree.order,
+            run.callOptions(),
+          );
+          if (destroyed.outcome === 'destroyed') return result(true);
+          if (destroyed.outcome === 'has-child') {
+            if (!withChildren) {
+              throw new BusinessException('VAL_001', {
+                context: { reason: 'mailbox-has-children' },
+              });
+            }
+            // 그사이 하위 메일함이 생겼다 — 나무를 다시 읽어 그 메일함까지 (그사이 그 메일함이 없어졌으면 지운 것으로)
+            const fresh = await this.loadMailboxes(user, run.callOptions());
+            const current = fresh.find((candidate) => candidate.id === id);
+            if (!current) return result(true);
+            tree = deletionTree(fresh, current, true);
+            if (run.stalled('mailbox-has-child')) break;
+            continue;
           }
+          // 지운 하위는 나무에서 뺀다 — 다음 차례가 없는 메일함을 묻지 않게
+          tree = withoutDestroyed(tree, destroyed.destroyed);
           // 비운 사이 메일이 들어왔다 — 다시 옮긴다 (읽은 목록이 비어 있는데도 이어서 거절되면 엔진 이상 — 멈춘다)
           if (run.stalled('mailbox-has-email')) break;
           continue;
@@ -1133,17 +1441,26 @@ export class JmapMailProvider implements MailProvider {
           batch.emails.map((email) => email.id),
           this.heldLookup(user, run.callOptions()),
         );
+        const inTree = new Set(tree.ids);
         const toTrash: string[] = [];
-        const detach: string[] = [];
+        const update: Record<string, Record<string, unknown>> = {};
         for (const email of batch.emails) {
           if (held.has(email.id)) continue;
-          if (removalFrom(inMailboxes(email), mailbox.id) === 'destroy') {
+          const mailboxIds = inMailboxes(email);
+          // 나무의 메일함에서 뺀다 — 나무 안에만 있었으면 휴지통에 넣는다
+          const patch: Record<string, unknown> = Object.fromEntries(
+            mailboxIds
+              .filter((mailboxId) => inTree.has(mailboxId))
+              .map((mailboxId) => [`mailboxIds/${mailboxId}`, null]),
+          );
+          if (mailboxIds.every((mailboxId) => inTree.has(mailboxId))) {
+            patch[`mailboxIds/${trashId}`] = true;
             toTrash.push(email.id);
-          } else {
-            detach.push(email.id);
           }
+          update[email.id] = patch;
         }
-        if (toTrash.length === 0 && detach.length === 0) {
+        const patched = Object.keys(update);
+        if (patched.length === 0) {
           // 남은 것이 붙잡힌 메일뿐이다 — 이 요청에서 옮긴 것이 있으면 거기까지, 없으면 MAIL_015 (같은 메일을 끝없이 다시 읽지 않게)
           this.warnHeldSkipped(user, held.size, '지우는 메일함에서 옮기지');
           if (run.processed > 0) break;
@@ -1152,19 +1469,7 @@ export class JmapMailProvider implements MailProvider {
         const set = await this.conditionalEmailSet(
           user,
           batch.state,
-          {
-            update: {
-              ...Object.fromEntries(
-                toTrash.map((emailId) => [
-                  emailId,
-                  { [target]: null, [`mailboxIds/${trashId}`]: true },
-                ]),
-              ),
-              ...Object.fromEntries(
-                detach.map((emailId) => [emailId, { [target]: null }]),
-              ),
-            },
-          },
+          { update },
           run.callOptions(),
         );
         if (set === null) {
@@ -1174,8 +1479,9 @@ export class JmapMailProvider implements MailProvider {
 
         const updated = new Set(Object.keys(set.updated ?? {}));
         const moved = toTrash.filter((emailId) => updated.has(emailId)).length;
-        const removed =
-          moved + detach.filter((emailId) => updated.has(emailId)).length;
+        const removed = patched.filter((emailId) =>
+          updated.has(emailId),
+        ).length;
         this.warnRefusals(user, set.notUpdated, '지우는 메일함에서 옮기지');
         movedToTrash += moved;
         remaining = Math.max(0, batch.total - removed);
@@ -1309,7 +1615,7 @@ export class JmapMailProvider implements MailProvider {
       while (run.canStartRound()) {
         const batch = await this.readMailboxBatch(
           user,
-          mailbox.id,
+          [mailbox.id],
           run.callOptions(),
         );
         if (batch.emails.length === 0) {
@@ -1440,6 +1746,15 @@ export class JmapMailProvider implements MailProvider {
     return this.filterRuns.run(user, request, context);
   }
 
+  /** 차단할 때 받은편지함 정리 (15단계) — 필터 적용과 같은 틀(JmapFilterRunner.runBlock — 계약 2절 "보낸 사람 차단") */
+  runMailBlock(
+    user: string,
+    request: MailBlockRunRequest,
+    context: MailFilterRunContext,
+  ): Promise<MailFilterRunOutcome> {
+    return this.filterRuns.runBlock(user, request, context);
+  }
+
   async getUsage(user: string): Promise<MailUsage> {
     const responses = await this.jmap.call(
       user,
@@ -3059,6 +3374,7 @@ export class JmapMailProvider implements MailProvider {
     user: string,
     id: string,
     draftsId: string,
+    options: () => JmapCallOptions | undefined = () => undefined,
   ): Promise<void> {
     const patch = {
       mailboxIds: { [draftsId]: true },
@@ -3070,9 +3386,13 @@ export class JmapMailProvider implements MailProvider {
     let reason = 'unknown';
     for (let attempt = 1; attempt <= RETURN_TO_DRAFTS_ATTEMPTS; attempt += 1) {
       try {
-        const responses = await this.jmap.call(user, (accountId) => [
-          ['Email/set', { accountId, update: { [id]: patch } }, 'u'],
-        ]);
+        const responses = await this.jmap.call(
+          user,
+          (accountId) => [
+            ['Email/set', { accountId, update: { [id]: patch } }, 'u'],
+          ],
+          options(),
+        );
         const set = expectResult<JmapSetResult>(responses, 'u', 'Email/set');
         const failure = firstSetError(set.notUpdated);
         if (!failure) return;
@@ -3089,6 +3409,476 @@ export class JmapMailProvider implements MailProvider {
     });
   }
 
+  /**
+   * 예약 메일 지금 보내기 (계약 2절 "보내기 취소 · 예약 발송" — 15단계). 엔진 사실(2026-11-09 개발 엔진 — phase15 E4): 기다리는 예약 제출을 취소하고
+   * 같은 메일을 바로 다시 제출하면 받는 사람에게 **정확히 한 통** 간다 — 취소가 된 뒤에만 다시 내므로 두 번 나갈 틈이 없다(그 전에 엔진이 보냈으면 취소가 cannotUnsend).
+   * 1) 그 메일 · 메일함 · 그 메일의 제출(envelope · 발신 ID · 결과까지)을 한 요청으로 읽어 상태를 가른다(releaseStateOf)
+   * 2) scheduled — 다시 제출할 envelope 을 먼저 정하고(못 읽으면 아무것도 바꾸지 않고 MAIL_001) 기다리는 예약 제출을 취소한다(cancelHeld).
+   *    엔진이 받지 않으면(cannotUnsend — 그사이 보냄) 다시 읽어 보냈으면 pendingSend null, 취소를 확인하지 못하면 다시 읽어 취소됐을 때만 잇는다
+   * 3) interrupted(앞 요청이 취소한 뒤 끊김) · 2) 다음 — 같은 메일을 그 envelope 그대로 다시 제출한다(resubmitReleased — 성공하면 같은 요청에서 예약 표시를 뗀다).
+   *    엔진이 거듭 거절하면 임시보관함으로 되돌리고, 결과를 모르거나 남은 시간이 모자라면 그대로 두고 MAIL_001 (다시 부르면 3) 으로 이어 낸다)
+   * 4) 받는 사람별 결과를 발송과 같은 규칙으로 읽는다 — 모두 받지 않았으면 기다리는 새 제출을 취소하고 임시보관함으로 되돌린다(MAIL_010 · MAIL_011)
+   * ScheduledSendReturnedToDraftsException 은 임시보관함으로 **되돌린 뒤에만** 던진다 — 되돌리지 못하면 그냥 MAIL_001(메일은 보낸편지함에 그대로)
+   * released · sent 는 지금 상태로 답한다(다시 제출하지 않는다). 로그는 메일 id · 보낼 시각만 (받는 사람 · 제목 없음 — 9단계와 같다)
+   */
+  async releaseScheduledSend(
+    user: string,
+    id: string,
+    hold: SendHold | null,
+  ): Promise<ReleasedScheduledSend> {
+    const startedAt = Date.now();
+    const left = () => RELEASE_BUDGET_MS - (Date.now() - startedAt);
+    /** 엔진 호출의 제한 시간 — 기본과 남은 시간 가운데 짧은 쪽, 정리는 그래도 RELEASE_CLEANUP_MIN_MS */
+    const callOptions = (floorMs = 1): JmapCallOptions => ({
+      timeoutMs: Math.max(floorMs, Math.min(JMAP_REQUEST_TIMEOUT_MS, left())),
+    });
+
+    const snapshot = await this.readReleaseSnapshot(user, id, callOptions());
+    const state = releaseStateOf(
+      snapshot.email,
+      snapshot.submissions,
+      startedAt,
+    );
+    if (state.kind === 'not-scheduled') {
+      throw new BusinessException('RES_001', {
+        context: { reason: 'not-a-scheduled-send', state: state.why },
+      });
+    }
+    if (state.kind === 'released' || state.kind === 'sent') {
+      return this.releasedNow(user, id, snapshot, state, startedAt);
+    }
+
+    // envelope 을 먼저 정한다 — 읽지 못하면 취소하지 않는다(취소한 뒤 다시 내지 못하는 메일이 생기지 않게)
+    const source =
+      state.kind === 'scheduled' ? latestSubmission(state.held) : state.source;
+    const envelope = releaseEnvelopeOf(source);
+    if (envelope === null) {
+      throw new BusinessException('MAIL_001', {
+        context: { reason: 'scheduled-envelope-unknown', state: state.kind },
+      });
+    }
+    if (state.kind === 'scheduled') {
+      const canceled = await this.cancelHeld(
+        user,
+        id,
+        state.held,
+        callOptions,
+        startedAt,
+      );
+      if (canceled !== null) return canceled;
+    } else {
+      this.logger.warn(
+        `[MAIL_001]${traceTag()} 앞서 예약을 취소하고 끊긴 지금 보내기를 잇습니다 — 다시 제출합니다: user=${maskEmail(user)}, id=${id}`,
+      );
+    }
+
+    const plan: SubmissionPlan = {
+      identityId: envelope.identityId,
+      from: envelope.from,
+      parameters: hold ? holdParameters(hold) : null,
+      draftsId: snapshot.draftsId,
+      sentId: snapshot.sentId,
+    };
+    const submitted = await this.resubmitReleased(
+      user,
+      id,
+      plan,
+      envelope.rcptTo,
+      { callOptions, left, startedAt, draftsId: snapshot.draftsId },
+    );
+    if ('released' in submitted) return submitted.released;
+
+    // 받는 사람별 결과 — 발송과 같은 규칙 (계약 2절 "받는 사람별 결과")
+    const recipients = recipientsOf(snapshot.email);
+    const result = await this.readSendResult(
+      user,
+      recipients,
+      submitted.send.id,
+      Math.min(SEND_RESULT_TIMEOUT_MS, left() - RELEASE_CLEANUP_MIN_MS),
+      envelope.rcptTo,
+    );
+    const { delivery } = result;
+    if (delivery.isEveryoneRejected) {
+      const code = everyoneRejectedCode(delivery.rejected);
+      this.logger.warn(
+        `[${code}]${traceTag()} 지금 보낸 예약 메일을 받는 사람이 모두 받지 않아 임시보관함으로 되돌립니다: user=${maskEmail(user)}, id=${id}, ${describeRejections(delivery.rejected)}`,
+      );
+      // 새 제출이 아직 기다리면 먼저 취소한다 — 풀리는 시각에 다시 보내지 않게 (못 해도 되돌린다: 받을 사람이 없다)
+      if (result.undoStatus === UNDO_PENDING && submitted.send.id) {
+        await this.cancelQuietly(user, submitted.send.id, () =>
+          callOptions(RELEASE_CLEANUP_MIN_MS),
+        );
+      }
+      await this.returnToDrafts(user, id, snapshot.draftsId, () =>
+        callOptions(RELEASE_CLEANUP_MIN_MS),
+      );
+      throw new ScheduledSendReturnedToDraftsException(code, {
+        context: {
+          reason: 'release-all-recipients-rejected',
+          rejected: delivery.rejected.length,
+        },
+      });
+    }
+    if (delivery.rejected.length > 0) {
+      this.logger.log(
+        `${traceTag()} 지금 보낸 예약 메일을 엔진이 받는 사람 일부에게 받지 않았습니다 — 나머지에게는 보냈습니다: user=${maskEmail(user)}, id=${id}, ${describeRejections(delivery.rejected)}`,
+      );
+    }
+    const pendingSend = hold
+      ? submittedPendingSend(hold, submitted.send, startedAt)
+      : null;
+    this.logger.log(
+      `${traceTag()} 예약한 메일을 지금 보냈습니다: user=${maskEmail(user)}, id=${id}, 예약했던 시각=${toUtcIso(source.sendAt) ?? 'unknown'}, ${pendingSend ? `보내기 취소 대기 — 보낼 시각=${pendingSend.sendAt}` : '바로 보냄'}`,
+    );
+    return {
+      id,
+      rejectedRecipients: toRejectedRecipients(delivery.rejected),
+      pendingSend,
+      releasedAt: new Date(startedAt).toISOString(),
+    };
+  }
+
+  /** 지금 보내기가 읽는 것 — 메일함(임시보관함 · 보낸편지함) · 그 메일 · 그 메일의 제출 (한 요청 — 엔진이 그 id 를 해석하지 못하면 RES_001) */
+  private async readReleaseSnapshot(
+    user: string,
+    id: string,
+    options: JmapCallOptions,
+  ): Promise<ReleaseSnapshot> {
+    const responses = await this.jmap.call(
+      user,
+      (accountId) => [
+        [
+          'Mailbox/get',
+          { accountId, ids: null, properties: ['id', 'role'] },
+          'm',
+        ],
+        [
+          'Email/get',
+          { accountId, ids: [id], properties: RELEASE_EMAIL_PROPERTIES },
+          'g',
+        ],
+        [
+          'EmailSubmission/query',
+          { accountId, filter: { emailIds: [id] } },
+          'rq',
+        ],
+        [
+          'EmailSubmission/get',
+          {
+            accountId,
+            '#ids': {
+              resultOf: 'rq',
+              name: 'EmailSubmission/query',
+              path: '/ids',
+            },
+            properties: RELEASE_SUBMISSION_PROPERTIES,
+          },
+          'rg',
+        ],
+      ],
+      { ...options, invalidRequestCode: 'RES_001' },
+    );
+    const draftsId = this.requireDraftsMailbox(responses);
+    const { list: mailboxes = [] } = expectResult<JmapGetResult<JmapMailbox>>(
+      responses,
+      'm',
+      'Mailbox/get',
+    );
+    const sentId = roleMailboxId(mailboxes, 'sent');
+    if (!sentId) {
+      throw new BusinessException('MAIL_001', {
+        context: { reason: 'sent-mailbox-missing' },
+      });
+    }
+    const email = this.requireEmail(responses, 'g');
+    // 첫 메서드(제출 찾기)의 오류부터 본다 — 막혔으면 뒤 메서드는 참조를 풀지 못해 invalidResultReference 로 끝난다 (listScheduledMessages 와 같다)
+    expectResult(responses, 'rq', 'EmailSubmission/query');
+    const { list: submissions = [] } = expectResult<
+      JmapGetResult<JmapEmailSubmission>
+    >(responses, 'rg', 'EmailSubmission/get');
+    return { email, submissions, draftsId, sentId };
+  }
+
+  /**
+   * 이미 지금 보내기를 했거나(released) 예약 시각에 보낸(sent) 메일 — 다시 제출하지 않고 지금 상태로 답한다.
+   * released 는 새 제출이 아직 기다리면 보내기 취소를 기다리는 발송(pendingSend undo), 받는 사람별 결과는 그 제출로 맞춘다
+   */
+  private releasedNow(
+    user: string,
+    id: string,
+    snapshot: Pick<ReleaseSnapshot, 'email'>,
+    state: Extract<ReleaseState, { kind: 'released' | 'sent' }>,
+    nowMs: number,
+  ): ReleasedScheduledSend {
+    const submissions =
+      state.kind === 'released' ? [state.current] : state.live;
+    const delivery = readDeliveryResult(
+      recipientsOf(snapshot.email),
+      submissions,
+      submittedEnvelope(submissions),
+    );
+    const sendAt =
+      state.kind === 'released' && isHeld(state.current, nowMs)
+        ? toUtcIso(state.current.sendAt)
+        : null;
+    this.logger.log(
+      `${traceTag()} ${state.kind === 'released' ? '이미 지금 보내기를 한 예약 메일입니다 — 그 발송의 지금 상태로 답합니다' : '예약 시각이 지나 이미 보낸 메일입니다 — 보낸 것으로 답합니다'}: user=${maskEmail(user)}, id=${id}`,
+    );
+    return {
+      id,
+      rejectedRecipients: toRejectedRecipients(delivery.rejected),
+      pendingSend: sendAt === null ? null : { kind: 'undo', sendAt },
+      releasedAt:
+        state.kind === 'released'
+          ? (toUtcIso(state.current.sendAt) ?? new Date(nowMs).toISOString())
+          : null,
+    };
+  }
+
+  /**
+   * 기다리는 예약 제출을 취소한다 — 엔진이 취소했다고 답한 것만 취소된 것이다(updated 에 그 제출 — cancelPendingSend 와 같다).
+   * @returns null 이면 모두 취소했다(다시 제출한다). 아니면 그대로 답할 결과 — 엔진이 받지 않았거나 확인하지 못해 다시 읽어 보니 보냈다 · 이미 지금 보냈다
+   * @throws 다시 읽어도 아직 기다리거나(취소되지 않음) 그 밖의 상태면 MAIL_001 — 아무것도 다시 내지 않았다
+   */
+  private async cancelHeld(
+    user: string,
+    id: string,
+    held: readonly JmapEmailSubmission[],
+    callOptions: () => JmapCallOptions,
+    startedAt: number,
+  ): Promise<ReleasedScheduledSend | null> {
+    let outcome: 'canceled' | 'refused' | 'unknown' = 'unknown';
+    let jmapType: string | undefined;
+    try {
+      const responses = await this.jmap.call(
+        user,
+        (accountId) => [
+          [
+            'EmailSubmission/set',
+            {
+              accountId,
+              update: Object.fromEntries(
+                held.map((submission) => [
+                  submission.id,
+                  { undoStatus: UNDO_CANCELED },
+                ]),
+              ),
+            },
+            'x',
+          ],
+        ],
+        callOptions(),
+      );
+      const set = expectResult<JmapSetResult>(
+        responses,
+        'x',
+        'EmailSubmission/set',
+      );
+      const refused = firstSetError(set.notUpdated);
+      const confirmed = set.updated ?? {};
+      if (refused) {
+        outcome = 'refused';
+        jmapType = refused.type ?? 'unknown';
+      } else if (
+        held.every((submission) =>
+          Object.prototype.hasOwnProperty.call(confirmed, submission.id),
+        )
+      ) {
+        outcome = 'canceled';
+      }
+    } catch (error) {
+      // 결과를 모른다 — 다시 읽어 가른다 (취소됐으면 잇고, 아니면 바꾸지 않은 것으로)
+      jmapType = describeFailure(error);
+    }
+    if (outcome === 'canceled') return null;
+
+    // 엔진이 받지 않았거나(그사이 보냄) 확인하지 못했다 — 다시 읽어 지금 상태로 가른다
+    const fresh = await this.readReleaseSnapshot(user, id, callOptions());
+    const state = releaseStateOf(fresh.email, fresh.submissions, Date.now());
+    if (state.kind === 'released' || state.kind === 'sent') {
+      return this.releasedNow(user, id, fresh, state, startedAt);
+    }
+    if (outcome === 'unknown' && state.kind === 'interrupted') return null;
+    throw new BusinessException('MAIL_001', {
+      context: {
+        reason:
+          outcome === 'refused'
+            ? 'release-cancel-refused'
+            : 'release-cancel-not-confirmed',
+        state: state.kind,
+        ...(jmapType !== undefined ? { jmapType } : {}),
+      },
+    });
+  }
+
+  /**
+   * 취소한 예약 메일을 같은 envelope 으로 다시 제출한다 — 성공하면 같은 요청에서 예약 표시를 뗀다(이제 보내기 취소를 기다리는 메일 · 보낸 메일이다).
+   * 실패는 둘로 가른다 (처음 발송의 finishSubmission 과 같은 결 — 9단계 리뷰 2):
+   * - 엔진이 분명히 거절했다(SetError · 메서드 오류 · 요청을 실행하지 않았다는 답 isRequestRefused) — 아무것도 나가지 않았다.
+   *   한 번 더 내고(RELEASE_SUBMIT_ATTEMPTS), 그래도 거절이면 그 메일을 임시보관함으로 되돌린 **뒤에** ScheduledSendReturnedToDraftsException(MAIL_001).
+   *   되돌리지 못하면 returnToDrafts 의 MAIL_001 그대로다(되돌림 예외가 아니다 — 메일은 예약이 취소된 채 보낸편지함에 있다)
+   * - 결과를 모른다(시간 초과 · 연결 끊김 · 5xx · 해석하지 못한 응답) — 나갔을 수 있다: 다시 내지도 · 되돌리지도 않는다 (afterUnknownResubmit)
+   * 제출마다 먼저 남은 시간을 본다 — MIN_SEND_WINDOW_MS 보다 적으면 내지 않고 MAIL_001 (보내다 끊기면 나갔는지 알 수 없다).
+   * 메일은 그대로라(예약 표시 · 취소한 예약 제출) 같은 요청을 다시 받으면 끊긴 지금 보내기(interrupted)로 이어 낸다
+   * @returns 만든 제출, 또는 그대로 답할 결과(released — 결과를 모르게 끝났지만 다시 읽으니 엔진이 만들었다)
+   */
+  private async resubmitReleased(
+    user: string,
+    id: string,
+    plan: SubmissionPlan,
+    rcptTo: readonly string[],
+    context: {
+      readonly callOptions: (floorMs?: number) => JmapCallOptions;
+      readonly left: () => number;
+      readonly startedAt: number;
+      readonly draftsId: string;
+    },
+  ): Promise<
+    | { readonly send: CreatedSubmission }
+    | { readonly released: ReleasedScheduledSend }
+  > {
+    let reason = 'unknown';
+    for (let attempt = 1; attempt <= RELEASE_SUBMIT_ATTEMPTS; attempt += 1) {
+      // 보내다 끊기면 나갔는지 알 수 없다 — 남은 시간이 모자라면 내지 않는다 (예약은 취소된 채 — 다시 부르면 이어 낸다)
+      const timeoutMs = Math.min(JMAP_SEND_TIMEOUT_MS, context.left());
+      if (timeoutMs < MIN_SEND_WINDOW_MS) {
+        this.logger.warn(
+          `[MAIL_001]${traceTag()} 지금 보내기에 남은 시간이 모자라 다시 제출하지 않았습니다 — 예약을 취소한 채 보낸편지함에 둡니다(같은 요청을 다시 받으면 이어 냅니다): user=${maskEmail(user)}, id=${id}, ${attempt}번째, 남은 시간=${Math.max(0, timeoutMs)}ms`,
+        );
+        throw new BusinessException('MAIL_001', {
+          context: {
+            reason: 'release-budget-exhausted',
+            leftMs: Math.max(0, timeoutMs),
+            attempt,
+          },
+        });
+      }
+
+      let responses: JmapInvocation[];
+      let result: MethodResult;
+      try {
+        responses = await this.jmap.call(
+          user,
+          (accountId) => [
+            submitCall(accountId, plan, id, rcptTo, {
+              [`keywords/${SCHEDULED_SEND_KEYWORD}`]: null,
+            }),
+          ],
+          { timeoutMs },
+        );
+        // 응답에 제출 결과가 없으면(해석하지 못한 응답) 결과를 모른다 — findResult 가 MAIL_001 missing-response 로 던진다
+        result = findResult(responses, 's', 'EmailSubmission/set');
+      } catch (error) {
+        // 엔진이 실행하지 않았다고 답했다(4xx · 429) — 아무것도 나가지 않았다: 한 번 더 낸다
+        if (isRequestRefused(error)) {
+          reason = describeFailure(error);
+          continue;
+        }
+        return this.afterUnknownResubmit(user, id, error, context);
+      }
+
+      const set = result.ok ? (result.args as JmapSetResult) : undefined;
+      const send = set?.created?.send;
+      if (send) {
+        this.warnIfNotMovedToSent(responses, user);
+        return { send };
+      }
+      // 엔진의 답이 거절(메서드 오류 · SetError) — 만들지 않았다: 한 번 더 낸다
+      const failure = result.ok ? firstSetError(set?.notCreated) : result.error;
+      reason = `jmap:${failure?.type ?? 'unknown'}`;
+    }
+
+    // 엔진이 거듭 거절했다 — 아무것도 나가지 않았다: 임시보관함으로 되돌린다 (못 하면 returnToDrafts 의 MAIL_001 — 되돌림 예외가 아니다)
+    this.logger.warn(
+      `[MAIL_001]${traceTag()} 예약을 취소한 메일을 엔진이 다시 받지 않아 임시보관함으로 되돌립니다 — 보내지 않았습니다: user=${maskEmail(user)}, id=${id}, reason=${reason}`,
+    );
+    await this.returnToDrafts(user, id, context.draftsId, () =>
+      context.callOptions(RELEASE_CLEANUP_MIN_MS),
+    );
+    throw new ScheduledSendReturnedToDraftsException('MAIL_001', {
+      context: { reason: 'release-resubmit-refused', jmapReason: reason },
+    });
+  }
+
+  /**
+   * 다시 제출의 결과를 모른다(시간 초과 · 연결 끊김 · 5xx · 해석하지 못한 응답) — 나갔을 수 있어 다시 내지도 · 임시보관함으로 되돌리지도 않는다.
+   * 제출을 한 번만 다시 읽어(남은 시간이 없어도 RELEASE_CLEANUP_MIN_MS) 새 제출이 보이면(엔진은 만들었다) 그 상태로 답한다.
+   * 아니면 503 MAIL_001 — 그냥 BusinessException 이다(되돌림 예외가 아니다 — 대용량 첨부 링크도 그대로).
+   * 메일은 예약이 취소된 채 보낸편지함에 그대로라 같은 요청을 다시 받으면 이어 낸다(그때 새 제출이 보이면 released 로 200)
+   */
+  private async afterUnknownResubmit(
+    user: string,
+    id: string,
+    failure: unknown,
+    context: {
+      readonly callOptions: (floorMs?: number) => JmapCallOptions;
+      readonly startedAt: number;
+    },
+  ): Promise<{ readonly released: ReleasedScheduledSend }> {
+    let reread: string;
+    try {
+      const fresh = await this.readReleaseSnapshot(
+        user,
+        id,
+        context.callOptions(RELEASE_CLEANUP_MIN_MS),
+      );
+      const state = releaseStateOf(fresh.email, fresh.submissions, Date.now());
+      if (state.kind === 'released') {
+        return {
+          released: this.releasedNow(user, id, fresh, state, context.startedAt),
+        };
+      }
+      reread = state.kind;
+    } catch (error) {
+      reread = describeFailure(error);
+    }
+    this.logger.warn(
+      `[MAIL_001]${traceTag()} 지금 보내기의 다시 제출이 결과를 모르게 끝났습니다 — 다시 내지도 · 임시보관함으로 옮기지도 않고 그대로 둡니다(같은 요청을 다시 받으면 이어 냅니다): user=${maskEmail(user)}, id=${id}, reason=${describeFailure(failure)}, 다시 읽기=${reread}`,
+    );
+    throw new BusinessException('MAIL_001', {
+      context: { reason: 'release-resubmit-unknown', reread },
+    });
+  }
+
+  /** 기다리는 제출 하나를 취소한다 — 못 해도 던지지 않는다(경고만 — 받을 사람이 없는 제출이다) */
+  private async cancelQuietly(
+    user: string,
+    submissionId: string,
+    options: () => JmapCallOptions,
+  ): Promise<void> {
+    try {
+      const responses = await this.jmap.call(
+        user,
+        (accountId) => [
+          [
+            'EmailSubmission/set',
+            {
+              accountId,
+              update: { [submissionId]: { undoStatus: UNDO_CANCELED } },
+            },
+            'c',
+          ],
+        ],
+        options(),
+      );
+      const set = expectResult<JmapSetResult>(
+        responses,
+        'c',
+        'EmailSubmission/set',
+      );
+      const refused = firstSetError(set.notUpdated);
+      if (refused) {
+        this.logger.warn(
+          `[MAIL_001]${traceTag()} 받는 사람이 모두 받지 않은 지금 보내기의 제출을 취소하지 못했습니다: user=${maskEmail(user)}, jmapType=${refused.type ?? 'unknown'}`,
+        );
+      }
+    } catch (error) {
+      this.logger.warn(
+        `[MAIL_001]${traceTag()} 받는 사람이 모두 받지 않은 지금 보내기의 제출을 취소하지 못했습니다: user=${maskEmail(user)}, reason=${describeFailure(error)}`,
+      );
+    }
+  }
+
   async uploadAttachment(
     user: string,
     file: UploadedFile,
@@ -3763,12 +4553,13 @@ export class JmapMailProvider implements MailProvider {
   /**
    * 메일함의 메일 한 차례(최대 BULK_BATCH_SIZE 통) — id · 들어 있는 메일함과 그때의 Email 상태(ifInState 에 쓴다),
    * 이 메일함의 전체 수. 조회와 읽기를 한 요청으로 한다 (같은 순간의 상태). 그 메일함에 든 것만 돌려준다.
+   * 메일함이 여럿이면(하위까지 지우기의 나무 — 15단계) 그 가운데 하나에라도 든 메일 — 전체 수도 겹치지 않게 센다(엔진의 OR 조건).
    * 같은 요청에 계정의 기다리는 제출(보낼 시각이 지금 뒤)을 묻는다 — 붙잡힌 메일(9단계)은 옮기지도 지우지도 않는다.
    * 읽은 메일이 있는데 제출을 읽지 못하면 MAIL_001 (fail closed — 비었으면 묻지 않은 것과 같다)
    */
   private async readMailboxBatch(
     user: string,
-    mailboxId: string,
+    mailboxIds: readonly string[],
     options: JmapCallOptions,
   ): Promise<{
     emails: JmapEmail[];
@@ -3784,7 +4575,7 @@ export class JmapMailProvider implements MailProvider {
           'Email/query',
           {
             accountId,
-            filter: { inMailbox: mailboxId },
+            filter: inAnyMailbox(mailboxIds),
             limit: BULK_BATCH_SIZE,
             calculateTotal: true,
           },
@@ -3817,7 +4608,10 @@ export class JmapMailProvider implements MailProvider {
     const byId = new Map((found.list ?? []).map((email) => [email.id, email]));
     const emails = ids.flatMap((emailId) => {
       const email = byId.get(emailId);
-      return email && email.mailboxIds?.[mailboxId] === true ? [email] : [];
+      return email &&
+        mailboxIds.some((mailboxId) => email.mailboxIds?.[mailboxId] === true)
+        ? [email]
+        : [];
     });
     return {
       emails,
@@ -3869,36 +4663,52 @@ export class JmapMailProvider implements MailProvider {
   }
 
   /**
-   * 빈 메일함을 지운다 — 메일이 든 메일함은 엔진이 mailboxHasEmail 로 거절한다(메일을 지우는 옵션은 쓰지 않는다, 확인함).
-   * @returns 지웠거나 이미 없으면 true, 그사이 메일이 들어와 거절됐으면 false
-   * @throws 하위 메일함이 생겼으면 VAL_001, 그 밖의 거절은 그 코드
+   * 빈 메일함들을 지운다 — 적은 차례대로(하위까지 지우기는 깊은 것부터 — 엔진은 한 요청의 destroy 를 적은 차례대로 한다, 2026-11-09 확인).
+   * 메일이 든 메일함은 엔진이 mailboxHasEmail 로, 하위가 남은 메일함은 mailboxHasChild 로 거절한다(메일을 지우는 옵션은 쓰지 않는다, 확인함).
+   * 이미 없으면(notFound) 지운 것으로 본다
+   * @returns destroyed — 모두 지웠다 · has-email — 그사이 메일이 들어와 거절된 메일함이 있다(그 위는 하위가 남아 함께 거절된다) ·
+   *   has-child — 메일은 없는데 하위가 남았다(그사이 나무 밖의 하위 메일함이 생겼다). 이번에 지운 메일함 id 도 함께
+   * @throws 그 밖의 거절은 그 코드
    */
-  private async destroyEmptyMailbox(
+  private async destroyEmptyMailboxes(
     user: string,
-    mailboxId: string,
+    mailboxIds: readonly string[],
     options: JmapCallOptions,
-  ): Promise<boolean> {
+  ): Promise<{
+    readonly outcome: 'destroyed' | 'has-email' | 'has-child';
+    readonly destroyed: ReadonlySet<string>;
+  }> {
     const responses = await this.jmap.call(
       user,
       (accountId) => [
         [
           'Mailbox/set',
-          { accountId, destroy: [mailboxId], onDestroyRemoveEmails: false },
+          {
+            accountId,
+            destroy: [...mailboxIds],
+            onDestroyRemoveEmails: false,
+          },
           'x',
         ],
       ],
       options,
     );
     const set = expectResult<JmapSetResult>(responses, 'x', 'Mailbox/set');
-    const failure = firstSetError(set.notDestroyed);
-    if (!failure || failure.type === NOT_FOUND) return true;
-    if (failure.type === MAILBOX_HAS_EMAIL) return false;
-    if (failure.type === MAILBOX_HAS_CHILD) {
-      throw new BusinessException('VAL_001', {
-        context: { reason: 'mailbox-has-children' },
-      });
+    const failures = Object.entries(set.notDestroyed ?? {}).flatMap(
+      ([mailboxId, error]) =>
+        error && error.type !== NOT_FOUND ? [{ mailboxId, error }] : [],
+    );
+    const failed = new Set(failures.map(({ mailboxId }) => mailboxId));
+    const destroyed = new Set(mailboxIds.filter((id) => !failed.has(id)));
+    if (failures.length === 0) return { outcome: 'destroyed', destroyed };
+    if (failures.some(({ error }) => error.type === MAILBOX_HAS_EMAIL)) {
+      return { outcome: 'has-email', destroyed };
     }
-    throw jmapFailure(failure, { method: 'Mailbox/set' });
+    const other = failures.find(
+      ({ error }) => error.type !== MAILBOX_HAS_CHILD,
+    );
+    if (other) throw jmapFailure(other.error, { method: 'Mailbox/set' });
+    return { outcome: 'has-child', destroyed };
   }
 
   /**
diff --git a/backend/src/modules/mail/jmap/jmap.types.ts b/backend/src/modules/mail/jmap/jmap.types.ts
index ebfeb40..4304673 100644
--- a/backend/src/modules/mail/jmap/jmap.types.ts
+++ b/backend/src/modules/mail/jmap/jmap.types.ts
@@ -150,6 +150,8 @@ export interface JmapEmailSubmission {
   id: string;
   /** 이 제출이 보내는 메일 */
   emailId?: string;
+  /** 이 제출의 발신 ID — 예약 메일 지금 보내기(15단계)가 같은 발신 ID 로 다시 제출한다 */
+  identityId?: string;
   /**
    * pending — 아직 붙잡고 있다(취소할 수 있다) · final — 보냈다 · canceled — 취소했다 (RFC 8621 §7).
    * 붙잡지 않은 제출도 대기열에서 배달하는 동안 잠깐 pending 이다 — 붙잡은 것은 보낼 시각(sendAt)이 아직 오지 않은 것으로 가린다 (9단계)
diff --git a/backend/src/modules/mail/mail-block-match.spec.ts b/backend/src/modules/mail/mail-block-match.spec.ts
new file mode 100644
index 0000000..ddfa6e7
--- /dev/null
+++ b/backend/src/modules/mail/mail-block-match.spec.ts
@@ -0,0 +1,52 @@
+import { asciiCasemap, isBlockedSenderMail } from './mail-block-match';
+
+/**
+ * 차단할 때 받은편지함 정리(15단계)의 판정 — 새로 오는 메일의 차단 규칙(jmap/sieve-script.ts 의 blockSection — Sieve `address :all :is` ·
+ * `address :domain :is`, `i;ascii-casemap`)과 같은지. 표의 "엔진이 넓게 잡은 것"은 2026-11-09 개발 엔진의 `Email/query` from 조건이 잡은 메일이다(phase15 E3)
+ */
+describe('차단 정리의 판정 (mail-block-match — Sieve 의 address 와 짝)', () => {
+  it('ASCII 글자만 소문자로 — 그 밖의 글자는 그대로 (i;ascii-casemap)', () => {
+    expect(asciiCasemap('Kim@Spam.EXAMPLE')).toBe('kim@spam.example');
+    expect(asciiCasemap('ÄBC@Ü.example')).toBe('Äbc@Ü.example');
+  });
+
+  it.each<[string, string[], boolean]>([
+    ['정확한 주소', ['kim@spam.example'], true],
+    ['대문자 주소', ['KIM@SPAM.EXAMPLE'], true],
+    [
+      '보낸 사람 둘 가운데 둘째',
+      ['first@example.net', 'kim@spam.example'],
+      true,
+    ],
+    // 엔진 검색(from)은 잡지만 차단 규칙은 맞지 않는 것
+    ['점이 더 붙은 주소', ['kim.lee@spam.example'], false],
+    ['하위 도메인', ['kim@sub.spam.example'], false],
+    ['더 긴 도메인', ['kim@spam.example.example.net'], false],
+    ['앞에 글자가 더', ['akim@spam.example'], false],
+    ['다른 도메인', ['kim@spam.example.net'], false],
+    ['From 이 없음', [], false],
+  ])('주소 차단 — %s', (_label, addresses, expected) => {
+    expect(isBlockedSenderMail(addresses, 'kim@spam.example')).toBe(expected);
+  });
+
+  it('주소 앞부분의 ASCII 밖 글자는 대소문자를 가린다 — 엔진 규칙과 같은 한계', () => {
+    expect(isBlockedSenderMail(['ü@spam.example'], 'ü@spam.example')).toBe(
+      true,
+    );
+    expect(isBlockedSenderMail(['Ü@spam.example'], 'ü@spam.example')).toBe(
+      false,
+    );
+  });
+
+  it.each<[string, string[], boolean]>([
+    ['그 도메인', ['kim@spam.example'], true],
+    ['대문자 도메인', ['Lee@SPAM.Example'], true],
+    ['둘째 보낸 사람이 그 도메인', ['a@example.net', 'b@spam.example'], true],
+    ['하위 도메인', ['kim@sub.spam.example'], false],
+    ['더 긴 도메인', ['kim@spam.example.net'], false],
+    ['도메인이 이름 끝에만', ['kim@notspam.example'], false],
+    ['@ 가 없는 주소', ['spam.example'], false],
+  ])('도메인 차단 — %s', (_label, addresses, expected) => {
+    expect(isBlockedSenderMail(addresses, '@spam.example')).toBe(expected);
+  });
+});
diff --git a/backend/src/modules/mail/mail-block-match.ts b/backend/src/modules/mail/mail-block-match.ts
new file mode 100644
index 0000000..b8d2a73
--- /dev/null
+++ b/backend/src/modules/mail/mail-block-match.ts
@@ -0,0 +1,40 @@
+/**
+ * 차단할 때 받은편지함 정리(계약 2절 "보낸 사람 차단" — 15단계)의 판정 — 순수 함수.
+ * **짝: jmap/sieve-script.ts 의 blockSection**(새로 오는 메일의 차단 규칙) — `address :all :is "from" [주소들]` ·
+ * `address :domain :is "from" [도메인들]`, 비교는 엔진 기본 `i;ascii-casemap`(ASCII 대소문자만 무시). 한쪽을 바꾸면 다른 쪽도.
+ *
+ * 견주는 것은 엔진이 푼 From 머리글의 주소다(같은 이름의 머리글이 여럿이면 모두 — 표시 이름은 보지 않는다, jmap/filter-run-texts.ts 의 fromAddressesOf).
+ * 엔진의 검색(`Email/query` 의 from)은 쓰지 않는다 — 낱말 단위라 비슷한 주소(`kim.lee@` · `@sub.` · `.example.net`)와
+ * 표시 이름에만 그 주소를 쓴 남의 메일까지 잡는다(2026-11-09 개발 엔진 확인)
+ */
+
+/** ASCII 글자만 소문자로 — 엔진의 `i;ascii-casemap` (그 밖의 글자는 그대로 견준다) */
+export function asciiCasemap(value: string): string {
+  return value.replace(/[A-Z]/g, (char) => char.toLowerCase());
+}
+
+/** 주소의 도메인 — 마지막 `@` 뒤 (없으면 빈 글) */
+function domainOf(address: string): string {
+  const at = address.lastIndexOf('@');
+  return at < 0 ? '' : address.slice(at + 1);
+}
+
+/**
+ * 그 메일의 From 주소 가운데 하나라도 차단 대상에 맞는가 — 주소 차단(`kim@spam.example`)은 주소 전체가 같을 때,
+ * 도메인 차단(`@spam.example`)은 주소의 도메인이 같을 때(하위 도메인 · 더 긴 도메인은 아님)
+ * @param fromAddresses 엔진이 푼 From 머리글의 주소들
+ * @param sender 차단 목록의 값 (소문자 주소 또는 `@도메인` — BlockedSender.address)
+ */
+export function isBlockedSenderMail(
+  fromAddresses: readonly string[],
+  sender: string,
+): boolean {
+  const wanted = asciiCasemap(sender);
+  if (wanted.startsWith('@')) {
+    const domain = wanted.slice(1);
+    return fromAddresses.some(
+      (address) => asciiCasemap(domainOf(address)) === domain,
+    );
+  }
+  return fromAddresses.some((address) => asciiCasemap(address) === wanted);
+}
diff --git a/backend/src/modules/mail/mail-block.controller.ts b/backend/src/modules/mail/mail-block.controller.ts
index c544b39..d89e294 100644
--- a/backend/src/modules/mail/mail-block.controller.ts
+++ b/backend/src/modules/mail/mail-block.controller.ts
@@ -3,6 +3,7 @@ import {
   Controller,
   Delete,
   Get,
+  HttpCode,
   HttpStatus,
   Param,
   Post,
@@ -28,17 +29,23 @@ import {
   MailBlockListDto,
   MailBlockRemovedDto,
 } from './dto/mail-block.dto';
+import {
+  MailBlockRunDto,
+  MailBlockRunRequestDto,
+} from './dto/mail-block-run.dto';
 import { MailBlockService } from './mail-block.service';
 import {
+  MAIL_BLOCK_RUNS_ROUTE,
   MAIL_BLOCKS_ROUTE,
   MAX_EMAIL_LENGTH,
   MAX_MAIL_BLOCKS,
 } from './mail.constants';
+import { MailService } from './mail.service';
 
 /** 차단의 효과 — 세 엔드포인트의 설명에 함께 쓴다 (계약 2절 "보낸 사람 차단") */
 const BLOCK_NOTE =
   '차단한 보낸 사람(머리글 From 의 주소 · 도메인 — 대소문자 무시)의 메일은 스팸메일함으로 간다. 필터 · 부재중보다 먼저 돌고 멈추므로 필터는 돌지 않고 부재중 응답도 나가지 않는다. ' +
-  '이미 받은 메일은 옮기지 않는다. 저장 자리는 필터 · 부재중과 같은 엔진 규칙(Sieve 스크립트)이다 — 필터의 version 은 묻지 않는다.';
+  '이미 받은 메일은 저절로 옮기지 않는다 — 받은편지함에 있는 것은 POST /api/mail-block-runs 로 옮긴다(15단계). 저장 자리는 필터 · 부재중과 같은 엔진 규칙(Sieve 스크립트)이다 — 필터의 version 은 묻지 않는다.';
 
 // 보낸 사람 차단 (계약 2절 "보낸 사람 차단", 9단계)
 @ApiTags('Mail')
@@ -109,3 +116,52 @@ export class MailBlockController {
     return this.blocks.remove(user, address);
   }
 }
+
+// 차단할 때 받은편지함 정리 (계약 2절 "보낸 사람 차단", 15단계) — 이미 받은 메일에 필터 적용(7단계)과 같은 틀 · 같은 잠금
+@ApiTags('Mail')
+@ApiCookieAuth()
+@UseGuards(JwtAuthGuard)
+@ApiSessionErrors('로그인 필요 (쿠키 없음·만료)')
+@Controller(MAIL_BLOCK_RUNS_ROUTE)
+export class MailBlockRunController {
+  constructor(private readonly mail: MailService) {}
+
+  @Post()
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({
+    summary: '차단한 보낸 사람의 메일을 받은편지함에서 스팸메일함으로',
+    description:
+      '받은편지함에 이미 있는 그 보낸 사람의 메일을 스팸메일함으로 옮기고 스팸 표시를 붙인다($junk — 스팸 신고와 같다). 받은편지함만 본다(정리해 둔 메일함은 건드리지 않는다). ' +
+      '판정은 새로 오는 메일의 차단 규칙과 같다 — 주소는 머리글 From 의 주소 가운데 하나가 같을 때, 도메인은 From 주소의 @ 뒤가 그 도메인과 같을 때(하위 도메인은 아님), 대소문자는 ASCII 만 무시. ' +
+      '표시 이름에 쓴 주소 · 비슷한 주소는 맞지 않는다. 보내기를 기다리는 메일은 옮기지 않는다. 되돌리기는 없다(스팸메일함에서 스팸 아님으로). ' +
+      '받은 시각이 최근인 메일부터, 첫 요청 뒤에 온 메일은 보지 않는다. 한 요청은 25초 안에 끝내고 cursor 를 돌려준다 — null 이 될 때까지 같은 본문에 받은 cursor 를 넣어 다시 보낸다. ' +
+      '같은 직원의 받은편지함 정리(이것 · POST /api/mail-filter-runs)는 한 번에 하나다 — 진행 중이면 엔진에 묻지 않고 429 REQ_001. ' +
+      '요청이 도는 동안 그 직원의 스팸메일함을 잡는다 — 그동안 스팸메일함 비우기 · 전체 읽음은 429, 비우는 중이면 이 요청이 메일함 목록을 읽은 뒤 429(받은편지함은 건드리지 않았다).',
+  })
+  @ApiStandardResponse(MailBlockRunDto, {
+    description:
+      '이번 요청에서 확인한 수 · 스팸메일함으로 옮긴 수 · 남은 수(어림) · 이어 할 자리(끝이면 null)',
+  })
+  @ApiErrorResponse(
+    'VAL_001',
+    `형식(메일 주소나 @도메인 · ${MAX_EMAIL_LENGTH}자) · 깨진 cursor · 다른 보낸 사람의 cursor · 모르는 필드 — 옮기지 않았다`,
+  )
+  @ApiErrorResponse(
+    'RES_001',
+    '차단 목록에 없는 보낸 사람(차단한 뒤에만 부른다 · 그사이 풀었다) — 옮기지 않았다',
+  )
+  @ApiErrorResponse(
+    'REQ_001',
+    '같은 직원의 받은편지함 정리(필터 적용 포함)가 진행 중(다른 탭 · PC) — 엔진에 묻지 않았다 · 스팸메일함 비우기가 진행 중 — 옮기지 않았다',
+  )
+  @ApiErrorResponse(
+    'MAIL_001',
+    '메일 엔진 장애 · 스팸메일함이 없음 · 하나도 확인하지 못하고 멈춤(시간 · 확인하는 사이 받은편지함이 계속 바뀜). 도중의 엔진 장애면 일부를 옮겼을 수 있다 — 마지막으로 받은 cursor 로 다시 보내면 된다',
+  )
+  run(
+    @CurrentUser() user: AuthenticatedUser,
+    @Body() dto: MailBlockRunRequestDto,
+  ) {
+    return this.mail.runMailBlock(user, dto);
+  }
+}
diff --git a/backend/src/modules/mail/mail-block.service.ts b/backend/src/modules/mail/mail-block.service.ts
index 372c25a..df80be5 100644
--- a/backend/src/modules/mail/mail-block.service.ts
+++ b/backend/src/modules/mail/mail-block.service.ts
@@ -6,19 +6,14 @@ import { traceTag } from '@/shared/logger/request-context';
 import { maskEmail } from '@/shared/utils/mask';
 import type { MailBlockCreateDto } from './dto/mail-block.dto';
 import {
+  describeBlockTarget,
   findBlockProblem,
   parseBlockTarget,
-  type BlockTarget,
 } from './mail-blocks';
 import { MAIL_PROVIDER, type MailProvider } from './mail.provider';
 import { MAIL_SETTINGS, type MailSettings } from './mail.settings';
 import type { MailBlockAdded, MailBlockList } from './mail.types';
 
-/** 로그에 남기는 차단 대상 — 주소는 가리고(maskEmail), 도메인 차단은 도메인만 (계약 2절 "보낸 사람 차단"의 로그) */
-function maskedTarget(target: BlockTarget): string {
-  return target.kind === 'domain' ? target.value : maskEmail(target.value);
-}
-
 /**
  * 보낸 사람 차단 (계약 2절 "보낸 사람 차단" — 9단계) — 엔진과 무관한 규칙(막을 수 없는 대상)은 여기서, 저장(엔진 규칙)은 포트가 한다.
  * - 모양은 요청 검증이 봤다 — 여기서는 내 주소 · 사내 도메인(MAIL_DOMAIN 과 그 하위) · 여러 사람이 쓰는 메일 서비스의 도메인을 막는다(VAL_001)
@@ -65,7 +60,7 @@ export class MailBlockService {
     });
     if (result.created) {
       this.logger.log(
-        `${traceTag()} 보낸 사람을 차단했습니다: user=${maskEmail(user.email)}, ${target.kind === 'domain' ? '도메인' : '주소'}=${maskedTarget(target)}`,
+        `${traceTag()} 보낸 사람을 차단했습니다: user=${maskEmail(user.email)}, ${describeBlockTarget(target)}`,
       );
     }
     return result;
@@ -84,7 +79,7 @@ export class MailBlockService {
     }
     await this.provider.removeMailBlock(user.email, target.value);
     this.logger.log(
-      `${traceTag()} 보낸 사람 차단을 풀었습니다: user=${maskEmail(user.email)}, ${target.kind === 'domain' ? '도메인' : '주소'}=${maskedTarget(target)}`,
+      `${traceTag()} 보낸 사람 차단을 풀었습니다: user=${maskEmail(user.email)}, ${describeBlockTarget(target)}`,
     );
     return { address: target.value };
   }
diff --git a/backend/src/modules/mail/mail-blocks.ts b/backend/src/modules/mail/mail-blocks.ts
index d4aca3c..3d5b8f7 100644
--- a/backend/src/modules/mail/mail-blocks.ts
+++ b/backend/src/modules/mail/mail-blocks.ts
@@ -1,6 +1,7 @@
 import { isEmail } from 'class-validator';
 import { isIP } from 'net';
 
+import { maskEmail } from '@/shared/utils/mask';
 import {
   MAX_EMAIL_LENGTH,
   PUBLIC_MAIL_DOMAINS,
@@ -88,6 +89,16 @@ export function blockTargetDomain(target: BlockTarget): string {
   return target.value.slice(target.value.lastIndexOf('@') + 1);
 }
 
+/**
+ * 로그에 남기는 차단 대상 — `주소=k***@spam.example` · `도메인=@spam.example` (계약 2절 "보낸 사람 차단"의 로그 — 주소는 가리고(maskEmail),
+ * 도메인 차단은 도메인만). 차단 · 풀기 · 받은편지함 정리(15단계)가 같이 쓴다
+ */
+export function describeBlockTarget(target: BlockTarget): string {
+  return target.kind === 'domain'
+    ? `도메인=${target.value}`
+    : `주소=${maskEmail(target.value)}`;
+}
+
 /** 사내 도메인이거나 그 하위 도메인인가 */
 function isInternalDomain(domain: string, internal: string): boolean {
   return domain === internal || domain.endsWith(`.${internal}`);
diff --git a/backend/src/modules/mail/mail-large-files.service.spec.ts b/backend/src/modules/mail/mail-large-files.service.spec.ts
index 4ecabf8..eb24a9e 100644
--- a/backend/src/modules/mail/mail-large-files.service.spec.ts
+++ b/backend/src/modules/mail/mail-large-files.service.spec.ts
@@ -147,6 +147,7 @@ function setup() {
       url: shareUrl(ORIGIN, TOKEN),
     }),
     markSent: jest.fn().mockResolvedValue(undefined),
+    markReleased: jest.fn().mockResolvedValue(true),
     cancel: jest.fn().mockResolvedValue(undefined),
     attachRetry: jest.fn().mockResolvedValue(undefined),
     findBySentEmail: jest.fn().mockResolvedValue(null),
@@ -389,6 +390,31 @@ describe('MailLargeFilesService — 메일과 대용량 첨부 (11단계)', () =
         FILE_B,
       ]);
     });
+
+    it('예약 메일을 지금 보냈으면(15단계) 그 링크의 보낸 때를 앞당긴다 — 링크가 없거나 취소한 링크면 그대로, 실패해도 던지지 않는다', async () => {
+      const { service, sharing } = setup();
+      const now = new Date('2026-11-09T05:00:00.000Z');
+
+      sharing.findBySentEmail.mockResolvedValue(record());
+      await service.onScheduledSendReleased(ARA, 'sent-1', now);
+      expect(sharing.findBySentEmail).toHaveBeenCalledWith(ARA.email, 'sent-1');
+      expect(sharing.markReleased).toHaveBeenCalledWith('link-1', now);
+
+      sharing.markReleased.mockClear();
+      for (const found of [
+        null,
+        record({ canceledAt: new Date('2026-11-09T04:00:00.000Z') }),
+      ]) {
+        sharing.findBySentEmail.mockResolvedValueOnce(found);
+        await service.onScheduledSendReleased(ARA, 'sent-1', now);
+      }
+      expect(sharing.markReleased).not.toHaveBeenCalled();
+
+      sharing.findBySentEmail.mockRejectedValueOnce(new Error('db down'));
+      await expect(
+        service.onScheduledSendReleased(ARA, 'sent-1', now),
+      ).resolves.toBeUndefined();
+    });
   });
 
   describe('읽기 — 덩이 알아보기', () => {
diff --git a/backend/src/modules/mail/mail-large-files.service.ts b/backend/src/modules/mail/mail-large-files.service.ts
index d046515..9cb905f 100644
--- a/backend/src/modules/mail/mail-large-files.service.ts
+++ b/backend/src/modules/mail/mail-large-files.service.ts
@@ -303,6 +303,29 @@ export class MailLargeFilesService implements OnModuleInit, OnModuleDestroy {
     }
   }
 
+  /**
+   * 예약 메일을 지금 보냈다(15단계 — 엔진에서 다시 제출한 뒤) — 그 발송이 만든 링크의 보낸 때를 실제로 보낸 때로 앞당긴다.
+   * 끝나는 때는 그대로 둔다 — 보낸 메일의 덩이가 그 날짜(예약 시각 기준)를 이미 적었다(FileSharingService.markReleased). 링크가 없거나 취소한 링크면 그대로.
+   * 실패해도 보내기는 된 것이다 — 경고만
+   */
+  async onScheduledSendReleased(
+    user: AuthenticatedUser,
+    sentId: string,
+    sentAt: Date,
+  ): Promise<void> {
+    try {
+      const record = await this.sharing.findBySentEmail(user.email, sentId);
+      if (!record || record.link.canceledAt !== null) return;
+      await this.sharing.markReleased(record.link.id, sentAt);
+    } catch (error) {
+      this.warn(
+        '지금 보낸 예약 메일의 링크에 보낸 때를 적지 못했습니다',
+        user,
+        error,
+      );
+    }
+  }
+
   // ── 임시 저장 ────────────────────────────────────────────────────────────
 
   /** 저장할 파일 확인 — 내 것이면 올리는 중 · 위험 판정이어도 된다. 없음 · 남의 것 · 지움 · 기간 지남은 400 MAIL_016 */
diff --git a/backend/src/modules/mail/mail.constants.ts b/backend/src/modules/mail/mail.constants.ts
index a412474..68730ee 100644
--- a/backend/src/modules/mail/mail.constants.ts
+++ b/backend/src/modules/mail/mail.constants.ts
@@ -151,6 +151,9 @@ export const SCHEDULED_SEND_MAX_LEAD_MS = 7 * 24 * 60 * 60_000;
 /** 보낸 사람 차단 라우트 경로 (`/api/mail-blocks`) — 계약 2절 "보낸 사람 차단" (9단계) */
 export const MAIL_BLOCKS_ROUTE = 'mail-blocks';
 
+/** 차단할 때 받은편지함 정리 라우트 경로 (`/api/mail-block-runs`) — 계약 2절 "보낸 사람 차단" (15단계) */
+export const MAIL_BLOCK_RUNS_ROUTE = 'mail-block-runs';
+
 /** 차단할 수 있는 주소 · 도메인 수 — 넘으면 400 VAL_001 (계약 2절 "보낸 사람 차단") */
 export const MAX_MAIL_BLOCKS = 500;
 
diff --git a/backend/src/modules/mail/mail.module.ts b/backend/src/modules/mail/mail.module.ts
index e2b6c7e..f2d723a 100644
--- a/backend/src/modules/mail/mail.module.ts
+++ b/backend/src/modules/mail/mail.module.ts
@@ -34,7 +34,10 @@ import { JmapFilterRunner } from './jmap/jmap-filter-run';
 import { JmapFilterScriptStore } from './jmap/jmap-filter-script';
 import { JmapMailProvider } from './jmap/jmap-mail.provider';
 import { MailAttachmentController } from './mail-attachment.controller';
-import { MailBlockController } from './mail-block.controller';
+import {
+  MailBlockController,
+  MailBlockRunController,
+} from './mail-block.controller';
 import { MailBlockService } from './mail-block.service';
 import { MailEventsController } from './mail-events.controller';
 import {
@@ -148,6 +151,8 @@ function attachmentUploadOptions(config: ConfigService): MulterModuleOptions {
     MailFilterController,
     MailFilterRunController,
     MailBlockController,
+    // 차단할 때 받은편지함 정리 (15단계 — 필터 적용과 같은 잠금)
+    MailBlockRunController,
     MessageController,
     // 같은 대화 · 대화로 묶은 목록 (14단계)
     ConversationController,
diff --git a/backend/src/modules/mail/mail.provider.ts b/backend/src/modules/mail/mail.provider.ts
index ec33dcf..c3e971d 100644
--- a/backend/src/modules/mail/mail.provider.ts
+++ b/backend/src/modules/mail/mail.provider.ts
@@ -13,9 +13,12 @@ import type {
   MailAttachment,
   MailBlockAdded,
   MailBlockList,
+  MailBlockRunRequest,
   Mailbox,
   MailboxBulkResult,
+  MailboxChange,
   MailboxCreate,
+  MailboxDeleteOptions,
   MailboxDeletion,
   MailFilterRunContext,
   MailFilterRunOutcome,
@@ -40,7 +43,9 @@ import type {
   PasswordChangeOutcome,
   RecipientFields,
   RejectedRecipient,
+  ReleasedScheduledSend,
   SavedDraft,
+  SendHold,
   SentMessage,
   SentMessageRecord,
   SummariesWithHeld,
@@ -68,6 +73,14 @@ export const MAIL_PROVIDER = Symbol('MAIL_PROVIDER');
  */
 export class SendNotStartedException extends BusinessException {}
 
+/**
+ * 예약 메일 지금 보내기(15단계)가 끝내 보내지 못해 그 메일을 임시보관함의 초안으로 **되돌렸다** — 예약 취소(DELETE /api/scheduled-messages/{id})와 같은 자리다.
+ * 되돌리기까지 된 때만 이 형식이다(엔진이 다시 제출을 거듭 거절함 MAIL_001 · 받는 사람이 모두 받지 않음 MAIL_010 · MAIL_011). 코드 · 응답은 BusinessException 그대로다.
+ * 결과를 모르는 실패 · 남은 시간 모자람 · 되돌리기 실패는 그냥 BusinessException(MAIL_001)이다 — 메일은 보낸편지함에 그대로다.
+ * 서비스는 이 형식으로 갈라 대용량 첨부 링크를 취소한 발송처럼 둔다(되돌린 초안이 그 파일을 쓴다) — context 는 로그 전용이라 갈래에 쓰지 않는다
+ */
+export class ScheduledSendReturnedToDraftsException extends BusinessException {}
+
 /**
  * 그 직원의 비밀번호가 만료됐다 (13단계 — 계약 6절 "비밀번호 바꾸기 강제") — 엔진은 그 계정의 권한을 비밀번호 바꾸기만으로 줄여 메일 기능이 없다
  * (본인 Basic · 게이트웨이 대리 접근 모두 — 2026-11-02 개발 엔진 확인). 프로필 · 메일 호출(엔진 세션을 열거나 메일 메서드가 forbidden)이 이 예외로 던진다.
@@ -148,16 +161,30 @@ export interface MailProvider {
    */
   createMailbox(user: string, input: MailboxCreate): Promise<Mailbox>;
 
-  /** 메일함 이름을 바꾼다 — 없으면 RES_001, 역할이 있는 메일함(기본 메일함)이면 VAL_001, 같은 이름이 있으면 MAIL_009 */
-  renameMailbox(user: string, id: string, name: string): Promise<Mailbox>;
+  /**
+   * 메일함의 이름 · 상위를 바꾼다 (15단계 — 옮기기) — 보내지 않은 칸은 그대로. 없으면 RES_001, 역할이 있는 메일함(기본 메일함)이면 VAL_001,
+   * 새 상위가 없으면 RES_001 · 만들 수 없는 자리(만들기와 같다)이거나 자기 자신 · 자기 하위면 VAL_001, 새 자리에 같은 이름이 있으면 MAIL_009.
+   * 이름 · 상위가 지금과 같으면 엔진에 묻지 않고 그대로 돌려준다. 하위 메일함과 안의 메일은 함께 간다(메일함 id 는 그대로다)
+   */
+  updateMailbox(
+    user: string,
+    id: string,
+    change: MailboxChange,
+  ): Promise<Mailbox>;
 
   /**
    * 메일함을 지운다 — 안의 메일을 휴지통으로 옮긴 뒤(다른 메일함에도 있는 메일은 이 메일함에서만 뺀다) 빈 메일함을 지운다.
    * 메일을 영구 삭제하지 않는다. 한 요청에 다 옮기지 못하면 deleted: false (클라이언트가 다시 보낸다).
    * 없으면 RES_001, 역할이 있는 메일함 · 하위 메일함이 있으면 VAL_001.
+   * `withChildren` 이면(15단계) 하위가 있어도 나무 전체(그 메일함과 하위 모두)를 같은 규칙으로 — 메일을 옮긴 뒤 깊은 것부터 지운다.
+   * 하위에 역할이 있는 메일함이 있으면 VAL_001. 수(processed · movedToTrash · remaining)는 나무 전체의 것이다.
    * 붙잡힌 메일(보내기 취소 · 예약을 기다림 — 9단계)은 옮기지 않는다 — 남은 것이 그것뿐이고 이 요청에서 옮긴 것이 없으면 MAIL_015
    */
-  deleteMailbox(user: string, id: string): Promise<MailboxDeletion>;
+  deleteMailbox(
+    user: string,
+    id: string,
+    options?: MailboxDeleteOptions,
+  ): Promise<MailboxDeletion>;
 
   /** 메일함의 안 읽은 메일을 읽음으로 바꾼다 (한 요청의 시간 안에서 차례로) — 없으면 RES_001 */
   markMailboxRead(user: string, id: string): Promise<MailboxBulkResult>;
@@ -224,6 +251,18 @@ export interface MailProvider {
     context: MailFilterRunContext,
   ): Promise<MailFilterRunOutcome>;
 
+  /**
+   * 차단할 때 받은편지함 정리 (계약 2절 "보낸 사람 차단" — 15단계) — 받은편지함에 이미 있는 그 보낸 사람의 메일을 스팸메일함으로 옮기고 스팸 표시를 한다.
+   * 판정은 새로 오는 메일의 차단 규칙(Sieve 의 `address` 판정 — mail-block-match.ts)과 같다. 차례 · 시간 · cursor 는 runMailFilter 와 같은 규칙이다
+   * (matched = 스팸메일함으로 옮긴 수). 스팸메일함이 없으면 MAIL_001, cursor 가 깨졌거나 다른 보낸 사람의 것이면 엔진에 묻기 전에 VAL_001.
+   * 차단 목록에 있는지는 서비스가 본 값이다. 받은편지함 · 스팸메일함은 context.mailboxes 에서 찾는다
+   */
+  runMailBlock(
+    user: string,
+    request: MailBlockRunRequest,
+    context: MailFilterRunContext,
+  ): Promise<MailFilterRunOutcome>;
+
   /** 메일함 사용량과 한도 (한도가 없으면 limitBytes = null) */
   getUsage(user: string): Promise<MailUsage>;
 
@@ -391,6 +430,25 @@ export interface MailProvider {
    */
   cancelPendingSend(user: string, id: string): Promise<void>;
 
+  /**
+   * 예약한 메일을 지금 보낸다 (계약 2절 "보내기 취소 · 예약 발송" — 15단계) — `id` 는 보낸 사본의 메일 id.
+   * 기다리는 예약 제출을 취소하고(엔진이 확인한 뒤에만) 같은 메일을 그 제출의 envelope 그대로 다시 제출한다 — `hold` 만큼 붙잡는다(보내기 취소 설정 — null 이면 바로).
+   * 예약 표시를 떼고, 받는 사람별 결과는 발송과 같은 규칙으로 읽는다.
+   * - 예약이 아닌 메일(보내기 취소를 기다리는 메일 · 취소해 임시보관함으로 간 메일 · 제출이 없음) · 없는 메일 → RES_001 (아무것도 바꾸지 않는다)
+   * - 이미 보냈다(예약 시각이 막 지남 — 제출이 final · 취소하려니 엔진이 받지 않음) → 오류가 아니다: pendingSend null (releasedAt null)
+   * - 이미 지금 보내기를 한 메일(취소한 예약 제출 + 그 뒤 새 제출 — 다시 누름 · 응답이 끊겨 다시 보냄) → 그 새 제출의 지금 상태
+   * - 엔진이 다시 제출을 분명히 거절하면 한 번 더 — 그래도 거절이면 그 메일을 임시보관함으로 되돌린 뒤 ScheduledSendReturnedToDraftsException(MAIL_001).
+   *   받는 사람이 모두 받지 않았어도 임시보관함으로 되돌린 뒤 같은 예외(MAIL_010 · MAIL_011). 되돌리지 못하면 그냥 MAIL_001
+   * - 다시 제출의 결과를 모르면(시간 초과 · 연결 끊김 · 5xx) 다시 내지도 · 되돌리지도 않는다 — 다시 읽어 새 제출이 보이면 그 상태, 아니면 그냥 MAIL_001.
+   *   남은 시간이 모자라 내지 않았어도 그냥 MAIL_001 — 둘 다 메일은 예약이 취소된 채 보낸편지함에 있고, 같은 요청을 다시 받으면 이어 낸다
+   * - 예약 제출의 envelope · 발신 ID 를 읽지 못하거나 엔진이 취소를 확인해 주지 않으면 MAIL_001 — 취소하지 않았거나 취소를 확인하지 못해 다시 제출하지 않았다
+   */
+  releaseScheduledSend(
+    user: string,
+    id: string,
+    hold: SendHold | null,
+  ): Promise<ReleasedScheduledSend>;
+
   /**
    * 이미 보낸 메일의 받지 않은 사람 (같은 키의 재시도 — 계약 2절 "받는 사람별 결과") — 그 메일의 제출 기록을
    * 이 요청의 받는 사람(to · cc · bcc)과 맞춰 다시 만든다. 제출 기록이 없거나 읽지 못하면 빈 배열 — 던지지 않는다 (메일은 이미 보냈다)
diff --git a/backend/src/modules/mail/mail.service.spec.ts b/backend/src/modules/mail/mail.service.spec.ts
index 5d44722..32982cc 100644
--- a/backend/src/modules/mail/mail.service.spec.ts
+++ b/backend/src/modules/mail/mail.service.spec.ts
@@ -9,6 +9,7 @@ import type { MailUserSettingsService } from '@/modules/mail-user-settings/mail-
 import type { MailUserSettings } from '@/modules/mail-user-settings/mail-user-settings.types';
 import type { ContactsService } from '@/modules/contacts/contacts.service';
 import type { DirectoryService } from '@/modules/contacts/directory.service';
+import type { MailBlockRunRequestDto } from './dto/mail-block-run.dto';
 import type { MailFilterUpdateDto } from './dto/mail-filter.dto';
 import type { MailFilterRunRequestDto } from './dto/mail-filter-run.dto';
 import type { DraftBodyDto, SendMessageDto } from './dto/send-message.dto';
@@ -82,7 +83,7 @@ function fakeProvider(): ProviderMocks {
     getProfile: mockOf<'getProfile'>(),
     listMailboxes: mockOf<'listMailboxes'>(),
     createMailbox: mockOf<'createMailbox'>(),
-    renameMailbox: mockOf<'renameMailbox'>(),
+    updateMailbox: mockOf<'updateMailbox'>(),
     deleteMailbox: mockOf<'deleteMailbox'>(),
     markMailboxRead: mockOf<'markMailboxRead'>(),
     emptyMailbox: mockOf<'emptyMailbox'>(),
@@ -91,6 +92,7 @@ function fakeProvider(): ProviderMocks {
     getMailFilters: mockOf<'getMailFilters'>(),
     setMailFilters: mockOf<'setMailFilters'>(),
     runMailFilter: mockOf<'runMailFilter'>(),
+    runMailBlock: mockOf<'runMailBlock'>(),
     openMessageSource: mockOf<'openMessageSource'>(),
     getMessageSubjects: mockOf<'getMessageSubjects'>(),
     getUsage: mockOf<'getUsage'>(),
@@ -132,6 +134,7 @@ function fakeProvider(): ProviderMocks {
     removeMailBlock: mockOf<'removeMailBlock'>(),
     listScheduledMessages: mockOf<'listScheduledMessages'>(),
     cancelPendingSend: mockOf<'cancelPendingSend'>(),
+    releaseScheduledSend: mockOf<'releaseScheduledSend'>(),
   };
 }
 
@@ -544,7 +547,7 @@ describe('MailService', () => {
 
     it('메일함 만들기 — 상위가 없으면 맨 위(null)로 넘기고, 이름 바꾸기와 함께 표시 규칙을 거친 메일함을 돌려준다', async () => {
       provider.createMailbox.mockResolvedValue(mailbox);
-      provider.renameMailbox.mockResolvedValue({
+      provider.updateMailbox.mockResolvedValue({
         ...mailbox,
         id: 'a',
         name: 'Inbox',
@@ -562,13 +565,34 @@ describe('MailService', () => {
 
       // (어댑터가 막지만) 역할이 있는 메일함은 한국어 표준 이름으로 보인다
       await expect(
-        service.renameMailbox(user, 'a', { name: '새 이름' }),
+        service.updateMailbox(user, 'a', { name: '새 이름' }),
       ).resolves.toMatchObject({ name: '받은편지함' });
-      expect(provider.renameMailbox).toHaveBeenCalledWith(
-        user.email,
-        'a',
-        '새 이름',
-      );
+      expect(provider.updateMailbox).toHaveBeenCalledWith(user.email, 'a', {
+        name: '새 이름',
+      });
+    });
+
+    it('메일함 바꾸기(15단계) — 이름 · 상위 가운데 보낸 것만 넘긴다, 둘 다 없으면 엔진에 묻지 않고 VAL_001', async () => {
+      provider.updateMailbox.mockResolvedValue(mailbox);
+
+      expect(
+        await failureOf(() => service.updateMailbox(user, 'n1', {})),
+      ).toEqual({
+        code: 'VAL_001',
+        reason: 'empty-mailbox-update',
+      });
+      expect(provider.updateMailbox).not.toHaveBeenCalled();
+
+      await service.updateMailbox(user, 'n1', { parentId: null });
+      await service.updateMailbox(user, 'n1', { parentId: 'u1' });
+      await service.updateMailbox(user, 'n1', { name: '2025', parentId: 'u1' });
+      expect(provider.updateMailbox.mock.calls).toEqual([
+        [user.email, 'n1', { parentId: null }],
+        [user.email, 'n1', { parentId: 'u1' }],
+        [user.email, 'n1', { name: '2025', parentId: 'u1' }],
+      ]);
+      // 옮긴 로그는 어댑터가 실제로 옮겼을 때만 남긴다 (지금 자리 그대로면 남기지 않게 — jmap-mail.provider.spec.ts)
+      expect(logSpy).not.toHaveBeenCalled();
     });
 
     it('메일함 지우기 — 지웠을 때만 개수를 남긴다 (메일함 이름 · 주소 없이)', async () => {
@@ -598,6 +622,37 @@ describe('MailService', () => {
       expect(line).toContain('휴지통으로 옮김=7통');
       expect(line).toContain('이 메일함에서만 뺌=2통');
       expect(line).not.toContain(user.email);
+      // 하위까지가 아니면 메일함 목록을 읽지 않고, 한 요청의 시간은 서비스가 받은 때부터 (startedAt)
+      expect(provider.listMailboxes).not.toHaveBeenCalled();
+      expect(provider.deleteMailbox).toHaveBeenLastCalledWith(
+        user.email,
+        'u4',
+        {
+          startedAt: expect.any(Number) as number,
+        },
+      );
+    });
+
+    it('하위 메일함까지 지우기(15단계 — withChildren=true)는 메일함 목록으로 나무를 정해 넘긴다', async () => {
+      provider.listMailboxes.mockResolvedValue([
+        { ...mailbox, id: 'u1' },
+        { ...mailbox, id: 'u2', parentId: 'u1' },
+        { ...mailbox, id: 'u3' },
+      ]);
+      provider.deleteMailbox.mockResolvedValue({
+        deleted: true,
+        processed: 3,
+        movedToTrash: 3,
+        remaining: 0,
+      });
+
+      await service.deleteMailbox(user, 'u1', { withChildren: 'true' });
+      expect(provider.deleteMailbox).toHaveBeenCalledWith(user.email, 'u1', {
+        withChildren: true,
+        startedAt: expect.any(Number) as number,
+      });
+      const [line] = logSpy.mock.calls.at(-1) as [string];
+      expect(line).toContain('하위까지(메일함 2개)');
     });
 
     it('전체 읽음은 { isRead: true } 를 어댑터의 전체 읽음으로 — 로그를 남기지 않는다', async () => {
@@ -712,6 +767,103 @@ describe('MailService', () => {
         provider.emptyMailbox.mockResolvedValueOnce(emptied);
         await expect(service.emptyMailbox(user, 'b')).resolves.toEqual(emptied);
       });
+
+      it('하위까지 지우기는 나무의 메일함 모두를 잡는다 — 하위 메일함의 처리 · 그 안으로 옮기기는 REQ_001, 나무 밖은 된다 (15단계)', async () => {
+        const deletion = {
+          deleted: true,
+          processed: 0,
+          movedToTrash: 0,
+          remaining: 0,
+        };
+        const first = pending<typeof deletion>();
+        provider.listMailboxes.mockResolvedValue([
+          { ...mailbox, id: 'u1' },
+          { ...mailbox, id: 'u2', parentId: 'u1' },
+          { ...mailbox, id: 'u3' },
+        ]);
+        provider.deleteMailbox.mockReturnValueOnce(first.promise);
+        provider.markMailboxRead.mockResolvedValue({
+          processed: 0,
+          remaining: 0,
+        });
+        provider.updateMailbox.mockResolvedValue(mailbox);
+
+        const running = service.deleteMailbox(user, 'u1', {
+          withChildren: 'true',
+        });
+        // 메일함 목록(엔진)을 지나 어댑터에 들어갈 때까지 기다린다
+        await new Promise((resolve) => setImmediate(resolve));
+        expect(provider.deleteMailbox).toHaveBeenCalledTimes(1);
+
+        for (const attempt of [
+          () => service.updateMailboxMessages(user, 'u2', { isRead: true }),
+          () => service.emptyMailbox(user, 'u2'),
+          // 지우는 나무 안으로 옮기기 · 지우는 나무의 메일함을 빼 가기
+          () => service.updateMailbox(user, 'u3', { parentId: 'u2' }),
+          () => service.updateMailbox(user, 'u2', { parentId: null }),
+        ]) {
+          expect(await failureOf(attempt)).toEqual({
+            code: 'REQ_001',
+            reason: 'mailbox-operation-in-progress',
+          });
+        }
+        expect(provider.updateMailbox).not.toHaveBeenCalled();
+
+        // 나무 밖은 된다 — 이름만 바꾸기는 잠그지 않는다(지금처럼)
+        await service.updateMailboxMessages(user, 'u3', { isRead: true });
+        await service.updateMailbox(user, 'u2', { name: '새 이름' });
+        expect(provider.updateMailbox).toHaveBeenCalledTimes(1);
+
+        first.finish(deletion);
+        await running;
+        await service.updateMailbox(user, 'u3', { parentId: 'u1' });
+        expect(provider.updateMailbox).toHaveBeenCalledTimes(2);
+      });
+
+      it('하위까지 지우기는 그 메일함을 먼저 잡는다 — 그 메일함이 처리 중이면 목록을 읽지 않고 REQ_001, 하위가 처리 중이면 목록만 읽고 REQ_001 (15단계)', async () => {
+        provider.listMailboxes.mockResolvedValue([
+          { ...mailbox, id: 'u1' },
+          { ...mailbox, id: 'u2', parentId: 'u1' },
+        ]);
+        const busy = pending<{ processed: number; remaining: number }>();
+        provider.markMailboxRead.mockReturnValueOnce(busy.promise);
+
+        // 그 메일함이 처리 중 — 엔진에 묻지 않는다
+        const rootBusy = service.updateMailboxMessages(user, 'u1', {
+          isRead: true,
+        });
+        expect(
+          await failureOf(() =>
+            service.deleteMailbox(user, 'u1', { withChildren: 'true' }),
+          ),
+        ).toEqual({ code: 'REQ_001', reason: 'mailbox-operation-in-progress' });
+        expect(provider.listMailboxes).not.toHaveBeenCalled();
+        busy.finish({ processed: 0, remaining: 0 });
+        await rootBusy;
+
+        // 하위가 처리 중 — 목록만 읽고 지우지 않는다, 그 메일함의 잠금은 푼다
+        const child = pending<{ processed: number; remaining: number }>();
+        provider.markMailboxRead.mockReturnValueOnce(child.promise);
+        const childBusy = service.updateMailboxMessages(user, 'u2', {
+          isRead: true,
+        });
+        expect(
+          await failureOf(() =>
+            service.deleteMailbox(user, 'u1', { withChildren: 'true' }),
+          ),
+        ).toEqual({ code: 'REQ_001', reason: 'mailbox-operation-in-progress' });
+        expect(provider.listMailboxes).toHaveBeenCalledTimes(1);
+        expect(provider.deleteMailbox).not.toHaveBeenCalled();
+        provider.markMailboxRead.mockResolvedValueOnce({
+          processed: 0,
+          remaining: 0,
+        });
+        await expect(
+          service.updateMailboxMessages(user, 'u1', { isRead: true }),
+        ).resolves.toEqual({ processed: 0, remaining: 0 });
+        child.finish({ processed: 0, remaining: 0 });
+        await childBusy;
+      });
     });
 
     describe('부재중 자동 응답 저장', () => {
@@ -1456,6 +1608,204 @@ describe('MailService', () => {
     });
   });
 
+  describe('차단할 때 받은편지함 정리 (15단계)', () => {
+    const outcome = {
+      scanned: 500,
+      matched: 12,
+      remaining: 40,
+      cursor: 'next-cursor',
+      rounds: 1,
+    };
+    const blocked = (address: string) => ({
+      address,
+      blockedAt: '2026-11-09T01:00:00.000Z',
+    });
+    const mailboxes: Mailbox[] = [
+      {
+        id: 'a',
+        name: 'Inbox',
+        role: 'inbox',
+        parentId: null,
+        sortOrder: 0,
+        totalCount: 540,
+        unreadCount: 0,
+      },
+      {
+        id: 'c',
+        name: 'Junk Mail',
+        role: 'junk',
+        parentId: null,
+        sortOrder: 0,
+        totalCount: 0,
+        unreadCount: 0,
+      },
+    ];
+    const body = (
+      sender: string,
+      cursor: string | null = null,
+    ): MailBlockRunRequestDto => ({ sender, cursor });
+
+    /** 손으로 끝내는 정리 — 끝낼 때까지 진행 중이다 */
+    function pending<T>(): {
+      promise: Promise<T>;
+      finish: (value: T) => void;
+    } {
+      let finish!: (value: T) => void;
+      const promise = new Promise<T>((resolve) => {
+        finish = resolve;
+      });
+      return { promise, finish };
+    }
+
+    beforeEach(() => {
+      provider.getMailBlocks.mockResolvedValue({
+        senders: [blocked('kim@spam.example'), blocked('@spam.example')],
+        isActive: true,
+      });
+      provider.listMailboxes.mockResolvedValue(mailboxes);
+      provider.runMailBlock.mockResolvedValue(outcome);
+    });
+
+    it('차단 목록에 있는 보낸 사람이면 메일함 목록과 함께 넘기고 결과를 돌려준다 — 대소문자 · 앞뒤 공백은 맞춘다, 로그에는 가린 주소 · 수만', async () => {
+      await expect(
+        service.runMailBlock(user, body(' Kim@Spam.Example ')),
+      ).resolves.toEqual({
+        scanned: 500,
+        matched: 12,
+        remaining: 40,
+        cursor: 'next-cursor',
+      });
+      expect(provider.runMailBlock).toHaveBeenCalledWith(
+        user.email,
+        { sender: 'kim@spam.example', cursor: null },
+        { mailboxes, startedAt: expect.any(Number) as number },
+      );
+      const [line] = logSpy.mock.calls.at(-1) as [string];
+      expect(line).toContain('확인 500통 · 옮김 12통 · 남음 40통');
+      expect(line).not.toContain('kim@spam.example');
+      expect(line).not.toContain('next-cursor');
+      expect(line).not.toContain(user.email);
+
+      // 도메인 차단은 도메인만 남긴다
+      await service.runMailBlock(user, body('@spam.example', 'next-cursor'));
+      expect(provider.runMailBlock).toHaveBeenLastCalledWith(
+        user.email,
+        { sender: '@spam.example', cursor: 'next-cursor' },
+        expect.any(Object),
+      );
+      const [domainLine] = logSpy.mock.calls.at(-1) as [string];
+      expect(domainLine).toContain('도메인=@spam.example');
+    });
+
+    it('차단 목록에 없으면 RES_001 — 받은편지함을 읽지 않는다 · 모양이 틀리면 VAL_001 (엔진에 묻지 않는다)', async () => {
+      expect(
+        await failureOf(() =>
+          service.runMailBlock(user, body('lee@spam.example')),
+        ),
+      ).toEqual({ code: 'RES_001', reason: 'mail-block-not-found' });
+      expect(provider.listMailboxes).not.toHaveBeenCalled();
+      expect(provider.runMailBlock).not.toHaveBeenCalled();
+
+      provider.getMailBlocks.mockClear();
+      expect(
+        await failureOf(() =>
+          service.runMailBlock(user, body('not an address')),
+        ),
+      ).toEqual({ code: 'VAL_001', reason: 'malformed-mail-block-run-sender' });
+      expect(provider.getMailBlocks).not.toHaveBeenCalled();
+    });
+
+    it('차단 정리가 도는 동안 그 직원의 스팸메일함을 잡는다 — 비우기 · 전체 읽음은 REQ_001, 비우는 중이면 차단 정리가 목록을 읽은 뒤 REQ_001 (받은편지함 정리 잠금도 푼다)', async () => {
+      const first = pending<typeof outcome>();
+      provider.runMailBlock.mockReturnValueOnce(first.promise);
+      provider.emptyMailbox.mockResolvedValue({ processed: 0, remaining: 0 });
+      provider.markMailboxRead.mockResolvedValue({
+        processed: 0,
+        remaining: 0,
+      });
+
+      const running = service.runMailBlock(user, body('kim@spam.example'));
+      await new Promise((resolve) => setImmediate(resolve));
+      expect(provider.runMailBlock).toHaveBeenCalledTimes(1);
+      for (const attempt of [
+        () => service.emptyMailbox(user, 'c'),
+        () => service.updateMailboxMessages(user, 'c', { isRead: true }),
+      ]) {
+        expect(await failureOf(attempt)).toEqual({
+          code: 'REQ_001',
+          reason: 'mailbox-operation-in-progress',
+        });
+      }
+      expect(provider.emptyMailbox).not.toHaveBeenCalled();
+      // 다른 메일함은 된다
+      await expect(
+        service.updateMailboxMessages(user, 'b', { isRead: true }),
+      ).resolves.toEqual({ processed: 0, remaining: 0 });
+      first.finish(outcome);
+      await running;
+
+      // 스팸메일함을 비우는 중이면 차단 정리가 REQ_001 — 받은편지함을 건드리지 않는다
+      const emptying = pending<{ processed: number; remaining: number }>();
+      provider.emptyMailbox.mockReturnValueOnce(emptying.promise);
+      const empty = service.emptyMailbox(user, 'c');
+      provider.runMailBlock.mockClear();
+      expect(
+        await failureOf(() =>
+          service.runMailBlock(user, body('kim@spam.example')),
+        ),
+      ).toEqual({ code: 'REQ_001', reason: 'mailbox-operation-in-progress' });
+      expect(provider.runMailBlock).not.toHaveBeenCalled();
+      // 받은편지함 정리 잠금(filterRuns)은 풀렸다 — 필터 적용은 된다
+      provider.runMailFilter.mockResolvedValueOnce(outcome);
+      await expect(
+        service.runMailFilter(user, {
+          match: 'always',
+          conditions: [],
+          actions: { moveToMailboxId: null, markAsRead: true, flag: false },
+          cursor: null,
+        } as unknown as MailFilterRunRequestDto),
+      ).resolves.toMatchObject({ matched: 12 });
+      emptying.finish({ processed: 0, remaining: 0 });
+      await empty;
+      await expect(
+        service.runMailBlock(user, body('kim@spam.example')),
+      ).resolves.toMatchObject({ matched: 12 });
+    });
+
+    it('같은 직원의 받은편지함 정리(필터 적용 · 차단 정리)는 한 번에 하나 — 진행 중이면 서로 REQ_001', async () => {
+      const first = pending<typeof outcome>();
+      provider.runMailBlock.mockReturnValueOnce(first.promise);
+      provider.runMailFilter.mockResolvedValue(outcome);
+
+      const running = service.runMailBlock(user, body('kim@spam.example'));
+      await new Promise((resolve) => setImmediate(resolve));
+      expect(provider.runMailBlock).toHaveBeenCalledTimes(1);
+
+      expect(
+        await failureOf(() =>
+          service.runMailBlock(user, body('@spam.example')),
+        ),
+      ).toMatchObject({ code: 'REQ_001' });
+      expect(
+        await failureOf(() =>
+          service.runMailFilter(user, {
+            match: 'always',
+            conditions: [],
+            actions: { moveToMailboxId: null, markAsRead: true, flag: false },
+            cursor: null,
+          } as unknown as MailFilterRunRequestDto),
+        ),
+      ).toMatchObject({ code: 'REQ_001' });
+      expect(provider.runMailFilter).not.toHaveBeenCalled();
+
+      first.finish(outcome);
+      await running;
+      await expect(
+        service.runMailBlock(user, body('kim@spam.example')),
+      ).resolves.toMatchObject({ matched: 12 });
+    });
+  });
+
   describe('부재중 자동 응답 읽기 (7단계 — isActive)', () => {
     it('어댑터 그대로 — 저장한 값과 엔진에서 동작하는지', async () => {
       const state = {
diff --git a/backend/src/modules/mail/mail.service.ts b/backend/src/modules/mail/mail.service.ts
index 40ef947..3f92fe5 100644
--- a/backend/src/modules/mail/mail.service.ts
+++ b/backend/src/modules/mail/mail.service.ts
@@ -30,13 +30,16 @@ import type {
   MessageDeletionDto,
   UpdateMessagesDto,
 } from './dto/bulk-messages.dto';
+import type { MailBlockRunRequestDto } from './dto/mail-block-run.dto';
 import type { MailFilterUpdateDto } from './dto/mail-filter.dto';
 import type { MailFilterRunRequestDto } from './dto/mail-filter-run.dto';
 import type { MailVacationDto } from './dto/mail-vacation.dto';
-import type {
-  CreateMailboxDto,
-  MailboxMessagesPatchDto,
-  RenameMailboxDto,
+import {
+  WITH_CHILDREN,
+  type CreateMailboxDto,
+  type MailboxDeleteQueryDto,
+  type MailboxMessagesPatchDto,
+  type UpdateMailboxDto,
 } from './dto/mailbox.dto';
 import {
   SHOW_IMAGES,
@@ -80,6 +83,7 @@ import {
   SCHEDULED_SEND_MAX_LEAD_MS,
   SCHEDULED_SEND_MIN_LEAD_MS,
 } from './mail.constants';
+import { describeBlockTarget, parseBlockTarget } from './mail-blocks';
 import { findFilterRulesProblem, findFilterRunProblem } from './mail-filters';
 import { MAIL_PROVIDER, type MailProvider } from './mail.provider';
 import { MAIL_SETTINGS, type MailSettings } from './mail.settings';
@@ -118,6 +122,7 @@ import type {
   SentMessage,
 } from './mail.types';
 import { presentMailbox, presentMailboxes } from './mailbox.presenter';
+import { subtreeIds } from './mailbox-tree';
 import { highlightDetail } from './message-highlight';
 import { RecipientSuggestionService } from './recipient-suggestions.service';
 import {
@@ -131,6 +136,7 @@ import {
   type LargeFilePlan,
   type RecognizedLargeFiles,
 } from './mail-large-files.service';
+import { undoSendHold } from './send-hold';
 
 /**
  * 엔진 장애(MAIL_001)로 끝난 발송의 키를 잠가 두는 시간.
@@ -336,13 +342,15 @@ export class MailService {
   /**
    * 진행 중인 오래 걸리는 처리(전체 읽음 · 비우기 · 지우기)의 (사용자, 메일함) — 같은 메일함에는 하나씩만, 종류가 달라도 막는다.
    * 두 탭이 같은 휴지통을 비우면 서로 상태가 어긋나 둘 다 멈추고, 동시 요청이 많으면 엔진 호출이 그 수만큼 곱절로 는다.
+   * 15단계부터 하위까지 지우기는 나무의 메일함 모두를, 옮기기는 그 메일함과 새 상위를, 차단 정리는 그 직원의 스팸메일함을 잡는다.
    * ⚠️ 프로세스 메모리다. 인스턴스를 늘리면 Redis 잠금(SET NX PX)으로 옮겨야 인스턴스 사이에서도 하나씩이 된다.
    */
   private readonly mailboxOperations = new Set<string>();
 
   /**
-   * 진행 중인 "이미 받은 메일에 필터 적용"의 직원 — 한 직원에 하나씩만 (계약 2절 "이미 받은 메일에 적용" — 다른 탭 · PC 에서 함께 하면 429 REQ_001).
-   * 두 적용이 같은 받은편지함을 함께 읽으면 서로 옮긴 메일 때문에 자리가 어긋나고 엔진 호출이 그 수만큼 곱절로 는다.
+   * 진행 중인 받은편지함 정리 — "이미 받은 메일에 필터 적용"(7단계)과 차단할 때 받은편지함 정리(15단계)의 직원. 한 직원에 하나씩만, 종류가 달라도 막는다
+   * (계약 2절 "이미 받은 메일에 적용" · "보낸 사람 차단" — 다른 탭 · PC 에서 함께 하면 429 REQ_001).
+   * 두 정리가 같은 받은편지함을 함께 읽으면 서로 옮긴 메일 때문에 자리가 어긋나고 엔진 호출이 그 수만큼 곱절로 는다.
    * ⚠️ 프로세스 메모리다. 인스턴스를 늘리면 Redis 잠금(SET NX PX)으로 옮겨야 인스턴스 사이에서도 하나씩이 된다.
    */
   private readonly filterRuns = new Set<string>();
@@ -415,32 +423,75 @@ export class MailService {
     );
   }
 
-  /** 메일함 이름 바꾸기 — 기본 메일함(역할 있음)은 VAL_001 */
-  async renameMailbox(
+  /**
+   * 메일함 이름 바꾸기 · 옮기기 (15단계) — 이름 · 상위 가운데 보낸 것만 바꾼다. 둘 다 없으면 엔진에 묻지 않고 VAL_001.
+   * 기본 메일함(역할 있음) · 만들 수 없는 자리 · 자기 하위 아래는 VAL_001, 없는 새 상위는 RES_001, 같은 이름은 MAIL_009 (어댑터).
+   * 옮길 때(parentId 가 있을 때)는 그 메일함과 새 상위의 오래 걸리는 처리와 함께 하지 않는다 — 진행 중이면 REQ_001 (runExclusive — 지우는 나무 안으로 옮기거나 지우는 메일함을 빼 가지 않게).
+   * 옮긴 로그는 어댑터가 남긴다 — 실제로 옮겼을 때만(지금 자리 그대로면 엔진에 묻지 않아 남기지 않는다), 메일함 id 만
+   */
+  async updateMailbox(
     user: AuthenticatedUser,
     id: string,
-    dto: RenameMailboxDto,
+    dto: UpdateMailboxDto,
   ): Promise<Mailbox> {
+    const { name, parentId } = dto;
+    if (name === undefined && parentId === undefined) {
+      throw new BusinessException('VAL_001', {
+        context: { reason: 'empty-mailbox-update' },
+      });
+    }
+    if (parentId === undefined) {
+      return presentMailbox(
+        await this.provider.updateMailbox(user.email, id, { name }),
+      );
+    }
+
+    const keys = parentId === null ? [id] : [id, parentId];
     return presentMailbox(
-      await this.provider.renameMailbox(user.email, id, dto.name),
+      await this.runExclusive(user, keys, () =>
+        this.provider.updateMailbox(user.email, id, {
+          ...(name === undefined ? {} : { name }),
+          parentId,
+        }),
+      ),
     );
   }
 
   /**
    * 메일함 지우기 — 안의 메일을 휴지통으로 옮긴 뒤 지운다(영구 삭제하지 않는다). 한 요청에 끝나지 않으면 deleted: false.
-   * 같은 메일함의 오래 걸리는 처리는 하나씩만 (진행 중이면 REQ_001 — runExclusive).
+   * 같은 메일함의 오래 걸리는 처리는 하나씩만 (진행 중이면 엔진에 묻지 않고 REQ_001 — runExclusive). 한 요청의 시간(25초)은 여기 들어온 때부터 센다.
+   * 하위 메일함까지 지우기(withChildren=true — 15단계)는 나무(그 메일함과 하위 모두)를 지운다 — 그 메일함을 먼저 잡고(진행 중이면 엔진에 묻지 않고 REQ_001)
+   * 메일함 목록을 읽어 하위 메일함까지 잡는다(하위가 처리 중이면 목록만 읽고 REQ_001 — 아무것도 바꾸지 않는다).
    * 지웠으면 info 로그에 개수만 남긴다 (메일함 이름 없이 — 사용자가 정한 글이다)
    */
   async deleteMailbox(
     user: AuthenticatedUser,
     id: string,
+    query: MailboxDeleteQueryDto = {},
   ): Promise<MailboxDeletion> {
-    const result = await this.runExclusive(user, id, () =>
-      this.provider.deleteMailbox(user.email, id),
-    );
+    const startedAt = Date.now();
+    const withChildren = query.withChildren === WITH_CHILDREN;
+    let treeSize = 1;
+    const result = await this.runExclusive(user, [id], async () => {
+      if (!withChildren) {
+        return this.provider.deleteMailbox(user.email, id, { startedAt });
+      }
+      // 나무의 하위 메일함 — 없는 메일함이면 없음(어댑터가 RES_001)
+      const descendants = subtreeIds(
+        await this.provider.listMailboxes(user.email),
+        id,
+      ).filter((mailboxId) => mailboxId !== id);
+      treeSize = descendants.length + 1;
+      return this.runExclusive(user, descendants, () =>
+        this.provider.deleteMailbox(user.email, id, {
+          withChildren,
+          startedAt,
+        }),
+      );
+    });
     if (result.deleted) {
       this.logger.log(
-        `${traceTag()} 메일함을 지웠습니다: user=${maskEmail(user.email)}, 이번 요청에서 휴지통으로 옮김=${result.movedToTrash}통 · 이 메일함에서만 뺌=${result.processed - result.movedToTrash}통`,
+        `${traceTag()} 메일함을 지웠습니다: user=${maskEmail(user.email)}, ${withChildren ? `하위까지(메일함 ${treeSize}개), ` : ''}이번 요청에서 휴지통으로 옮김=${result.movedToTrash}통 · 이 메일함에서만 뺌=${result.processed - result.movedToTrash}통`,
       );
     }
     return result;
@@ -461,7 +512,7 @@ export class MailService {
         context: { reason: 'unsupported-mailbox-messages-change' },
       });
     }
-    return this.runExclusive(user, id, () =>
+    return this.runExclusive(user, [id], () =>
       this.provider.markMailboxRead(user.email, id),
     );
   }
@@ -474,7 +525,7 @@ export class MailService {
     user: AuthenticatedUser,
     id: string,
   ): Promise<MailboxBulkResult> {
-    const result = await this.runExclusive(user, id, () =>
+    const result = await this.runExclusive(user, [id], () =>
       this.provider.emptyMailbox(user.email, id),
     );
     if (result.processed > 0) {
@@ -648,6 +699,61 @@ export class MailService {
     );
   }
 
+  /**
+   * 차단할 때 받은편지함 정리 (계약 2절 "보낸 사람 차단" — 15단계) — 받은편지함에 이미 있는 그 보낸 사람의 메일을 스팸메일함으로 옮긴다.
+   * 이미 받은 메일에 필터 적용(7단계)과 같은 틀이다 — 한 요청의 시간(25초)은 여기 들어온 때부터, 이어 할 자리(cursor)는 어댑터가 만든다.
+   * - 보낸 사람은 차단 목록의 모양(주소 · `@도메인`)이어야 한다 — 아니면 엔진에 묻지 않고 VAL_001
+   * - **같은 직원의 받은편지함 정리(필터 적용 · 이것)는 한 번에 하나** — 같은 잠금(filterRuns), 진행 중이면 엔진에 묻지 않고 REQ_001
+   * - 차단 목록에 없으면(차단한 뒤에만 부른다 · 그사이 풀었다) RES_001 — 요청마다 본다(도중에 풀면 다음 요청에서 멈춘다)
+   * - 요청이 도는 동안 그 직원의 스팸메일함을 메일함 처리 잠금(mailboxOperations)으로 잡는다 — 옮겨 넣는 동안 스팸메일함 비우기 · 모두 읽음이 함께 돌지 않게.
+   *   비우는 중이면 메일함 목록을 읽은 뒤 REQ_001 (받은편지함은 건드리지 않았다)
+   * 로그에는 가린 보낸 사람(도메인 차단은 도메인만) · 확인 · 옮긴 수 · 차례 수 · 걸린 시간만 남긴다
+   */
+  async runMailBlock(
+    user: AuthenticatedUser,
+    dto: MailBlockRunRequestDto,
+  ): Promise<MailFilterRun> {
+    const startedAt = Date.now();
+    const target = parseBlockTarget(dto.sender);
+    if (target === null) {
+      throw new BusinessException('VAL_001', {
+        context: { reason: 'malformed-mail-block-run-sender' },
+      });
+    }
+
+    return this.exclusive(
+      this.filterRuns,
+      user.email.toLowerCase(),
+      'mail-block-run-in-progress',
+      user,
+      async () => {
+        const { senders } = await this.provider.getMailBlocks(user.email);
+        if (!senders.some(({ address }) => address === target.value)) {
+          throw new BusinessException('RES_001', {
+            context: { reason: 'mail-block-not-found', kind: target.kind },
+          });
+        }
+        const mailboxes = await this.provider.listMailboxes(user.email);
+        // 스팸메일함이 없으면 잡을 것이 없다 — 어댑터가 MAIL_001 로 멈춘다
+        const junk = mailboxes.find((mailbox) => mailbox.role === 'junk');
+        const { rounds, ...result } = await this.runExclusive(
+          user,
+          junk ? [junk.id] : [],
+          () =>
+            this.provider.runMailBlock(
+              user.email,
+              { sender: target.value, cursor: dto.cursor },
+              { mailboxes, startedAt },
+            ),
+        );
+        this.logger.log(
+          `${traceTag()} 차단한 보낸 사람의 메일을 받은편지함에서 스팸메일함으로 옮겼습니다: user=${maskEmail(user.email)}, ${describeBlockTarget(target)}, 확인 ${result.scanned}통 · 옮김 ${result.matched}통 · 남음 ${result.remaining}통${result.cursor === null ? '(끝)' : ''}, 차례 ${rounds}번, ${Date.now() - startedAt}ms`,
+        );
+        return result;
+      },
+    );
+  }
+
   /** 받은 그대로의 메일 원문 — 파일 이름은 제목(없으면 "메일") + .eml (attachment.policy.ts 의 messageSourceFileName) */
   async openMessageSource(
     user: AuthenticatedUser,
@@ -974,12 +1080,10 @@ export class MailService {
     );
   }
 
-  /** 보내기 취소를 기다리는 붙잡기 — 그 직원 설정의 초(0 이면 붙잡지 않는다) */
+  /** 보내기 취소를 기다리는 붙잡기 — 그 직원 설정의 초(0 이면 붙잡지 않는다 — send-hold.ts) */
   private async undoHold(user: AuthenticatedUser): Promise<SendHold | null> {
     const { undoSendSeconds } = await this.userSettingsOf(user);
-    return undoSendSeconds > 0
-      ? { kind: 'undo', seconds: undoSendSeconds }
-      : null;
+    return undoSendHold(undoSendSeconds);
   }
 
   /** 임시 저장 — 처음 저장 (계약 2절 "임시 저장") */
@@ -1091,15 +1195,19 @@ export class MailService {
     );
   }
 
-  /** 같은 직원 · 같은 메일함의 오래 걸리는 처리를 하나씩만 한다 — 다른 메일함끼리는 동시에 된다 (exclusive) */
+  /**
+   * 같은 직원 · 같은 메일함의 오래 걸리는 처리를 하나씩만 한다 — 다른 메일함끼리는 동시에 된다 (exclusive).
+   * 메일함 여럿(하위까지 지우기의 나무 · 옮기기의 그 메일함과 새 상위 — 15단계)은 모두 비어 있을 때만 한꺼번에 잡는다
+   */
   private runExclusive<T>(
     user: AuthenticatedUser,
-    mailboxId: string,
+    mailboxIds: readonly string[],
     operation: () => Promise<T>,
   ): Promise<T> {
+    const owner = user.email.toLowerCase();
     return this.exclusive(
       this.mailboxOperations,
-      `${user.email.toLowerCase()}\n${mailboxId}`,
+      mailboxIds.map((mailboxId) => `${owner}\n${mailboxId}`),
       'mailbox-operation-in-progress',
       user,
       operation,
@@ -1108,25 +1216,27 @@ export class MailService {
 
   /**
    * 같은 열쇠의 일을 하나씩만 한다 — 진행 중이면 엔진에 묻지 않고 바로 REQ_001 (로그인의 진행 중 시도와 같은 모양).
+   * 열쇠가 여럿이면 하나라도 잡혀 있을 때 REQ_001 이고, 모두 비었으면 await 없이 한꺼번에 잡는다(사이에 다른 요청이 끼지 않는다).
    * 끝나면 성공 · 실패와 상관없이 푼다
    */
   private async exclusive<T>(
     running: Set<string>,
-    key: string,
+    keys: string | readonly string[],
     reason: string,
     user: AuthenticatedUser,
     operation: () => Promise<T>,
   ): Promise<T> {
-    if (running.has(key)) {
+    const held = [...new Set(typeof keys === 'string' ? [keys] : keys)];
+    if (held.some((key) => running.has(key))) {
       throw new BusinessException('REQ_001', {
         context: { reason, user: maskEmail(user.email) },
       });
     }
-    running.add(key);
+    for (const key of held) running.add(key);
     try {
       return await operation();
     } finally {
-      running.delete(key);
+      for (const key of held) running.delete(key);
     }
   }
 
diff --git a/backend/src/modules/mail/mail.types.ts b/backend/src/modules/mail/mail.types.ts
index 3ba5a07..d9a4927 100644
--- a/backend/src/modules/mail/mail.types.ts
+++ b/backend/src/modules/mail/mail.types.ts
@@ -285,18 +285,38 @@ export interface MailboxCreate {
   readonly parentId: string | null;
 }
 
+/**
+ * 메일함 바꾸기 (PATCH /api/mailboxes/{id} — 계약 2절 "메일함 관리") — 이름 · 상위(15단계 — 옮기기). 보내지 않은 칸은 그대로다.
+ * 서비스가 하나 이상인지 · 이름 형식을 본 값이다
+ */
+export interface MailboxChange {
+  /** 앞뒤 공백을 뺀 1~64자, `/` 없음 — 없으면 이름은 그대로 */
+  readonly name?: string;
+  /** 새 상위 메일함 — null 이면 맨 위, 없으면(undefined) 상위는 그대로 */
+  readonly parentId?: string | null;
+}
+
+/** 메일함 지우기의 방법 (DELETE /api/mailboxes/{id} — 15단계 "하위 메일함까지 지우기") */
+export interface MailboxDeleteOptions {
+  /** true 면 하위 메일함이 있어도 깊은 것부터 모두 지운다 — 없거나 false 면 하위가 있을 때 VAL_001 (지금처럼) */
+  readonly withChildren?: boolean;
+  /** 요청이 서비스에 들어온 때(Date.now() 의 ms) — 한 요청의 시간(25초)을 이때부터 센다. 없으면 어댑터가 시작한 때부터 */
+  readonly startedAt?: number;
+}
+
 /**
  * 메일함 지우기 결과 (DELETE /api/mailboxes/{id}) — 안의 메일을 휴지통으로 옮긴 뒤 빈 메일함을 지운다.
  * 한 요청에 다 옮기지 못하면 deleted: false — 클라이언트가 같은 요청을 다시 보낸다.
+ * 하위 메일함까지 지우면(15단계 — withChildren) 수는 나무 전체(그 메일함과 하위 모두)의 것이다
  */
 export interface MailboxDeletion {
-  /** true = 지웠다 */
+  /** true = 지웠다 (하위까지 지울 때는 나무 전체를 지웠다) */
   readonly deleted: boolean;
-  /** 이번 요청에서 이 메일함에서 빠진 메일 수 — 휴지통으로 옮긴 것 + 다른 메일함에도 있어 이 메일함에서만 뺀 것 (진행 수) */
+  /** 이번 요청에서 이 메일함(나무)에서 빠진 메일 수 — 휴지통으로 옮긴 것 + 다른 메일함에도 있어 이 메일함(나무)에서만 뺀 것 (진행 수) */
   readonly processed: number;
   /** 이번 요청에서 휴지통으로 옮긴 메일 수 (다른 메일함에도 있어 이 메일함에서만 뺀 메일은 세지 않는다) */
   readonly movedToTrash: number;
-  /** 아직 이 메일함에 남은 메일 수 */
+  /** 아직 이 메일함(나무)에 남은 메일 수 */
   readonly remaining: number;
 }
 
@@ -428,6 +448,18 @@ export interface MailFilterRunOutcome extends MailFilterRun {
   readonly rounds: number;
 }
 
+/**
+ * 차단할 때 받은편지함 정리 (POST /api/mail-block-runs — 계약 2절 "보낸 사람 차단" · 15단계) — 서비스가 차단 목록에 있는지 본 값이다.
+ * 이미 받은 메일에 필터 적용(7단계)과 같은 틀이다 — 응답 · 서비스가 넘기는 것(MailFilterRunContext) · 어댑터의 결과(MailFilterRunOutcome)는 그것을 함께 쓴다
+ * (matched 는 스팸메일함으로 옮긴 수)
+ */
+export interface MailBlockRunRequest {
+  /** 차단 목록의 값 — 소문자 주소 또는 `@도메인` (BlockedSender.address) */
+  readonly sender: string;
+  /** 처음은 null — 이어 할 때는 앞 결과의 cursor 그대로 (어댑터가 만들고 해석한다 — 다른 보낸 사람의 것이면 VAL_001) */
+  readonly cursor: string | null;
+}
+
 /** 받은 그대로의 메일 원문 (GET /api/messages/{id}/source) — 파일 이름은 서비스가 제목으로 정한다 */
 export interface MessageSource {
   readonly stream: Readable;
@@ -738,6 +770,18 @@ export interface SentMessage {
   readonly pendingSend: PendingSend | null;
 }
 
+/**
+ * 예약 메일 지금 보내기의 결과 (POST /api/scheduled-messages/{id}/release — 15단계) — 응답은 발송 결과(SentMessage)와 같은 칸이고,
+ * 대용량 첨부 링크에 적을 보낸 때를 더했다 (서비스가 떼고 답한다)
+ */
+export interface ReleasedScheduledSend extends SentMessage {
+  /**
+   * 지금 보내기로 다시 제출한 때(ISO 8601 UTC — 이 요청이나 응답을 받지 못한 앞 요청) — 대용량 첨부 링크의 "보낸 때"로 적는다.
+   * 예약 시각에 이미 보낸 메일(지금 보내기가 아니다)이면 null — 링크를 그대로 둔다
+   */
+  readonly releasedAt: string | null;
+}
+
 /**
  * 같은 Message-ID 로 이미 발송한 메일 — 받지 않은 사람은 지문이 맞을 때만 따로 다시 만든다
  * (MailProvider.getRejectedRecipients — 내용이 달라 MAIL_005 로 끝날 때 제출 기록을 헛되이 읽지 않게)
diff --git a/backend/src/modules/mail/mailbox-tree.spec.ts b/backend/src/modules/mail/mailbox-tree.spec.ts
new file mode 100644
index 0000000..1132295
--- /dev/null
+++ b/backend/src/modules/mail/mailbox-tree.spec.ts
@@ -0,0 +1,72 @@
+import { startCpuTimer } from '@/../test/cpu-time';
+import {
+  deepestFirstIds,
+  descendantsOf,
+  isSelfOrDescendant,
+  subtreeIds,
+} from './mailbox-tree';
+
+/** 거래처 › 2025 › 1분기 · 거래처 › 2026, 프로젝트(맨 위), 받은편지함 › 프로젝트 */
+const mailboxes = [
+  { id: 'a', parentId: null },
+  { id: 'u1', parentId: null },
+  { id: 'u2', parentId: 'u1' },
+  { id: 'u3', parentId: 'u2' },
+  { id: 'u4', parentId: 'u1' },
+  { id: 'p', parentId: undefined },
+  { id: 'q', parentId: 'a' },
+];
+
+describe('메일함 나무 (mailbox-tree — 15단계 옮기기 · 하위까지 지우기)', () => {
+  it('하위 메일함 모두 — 깊이와 함께 가까운 것부터, 그 메일함 자신은 넣지 않는다', () => {
+    expect(
+      descendantsOf(mailboxes, 'u1').map(({ mailbox, depth }) => [
+        mailbox.id,
+        depth,
+      ]),
+    ).toEqual([
+      ['u2', 1],
+      ['u4', 1],
+      ['u3', 2],
+    ]);
+    expect(descendantsOf(mailboxes, 'p')).toEqual([]);
+    expect(descendantsOf(mailboxes, 'nope')).toEqual([]);
+  });
+
+  it('잠글 메일함(그 메일함이 맨 앞) · 지울 차례(깊은 것부터, 그 메일함은 맨 끝)', () => {
+    expect(subtreeIds(mailboxes, 'u1')).toEqual(['u1', 'u2', 'u4', 'u3']);
+    expect(deepestFirstIds(mailboxes, 'u1')).toEqual(['u3', 'u2', 'u4', 'u1']);
+    expect(deepestFirstIds(mailboxes, 'u3')).toEqual(['u3']);
+  });
+
+  it('자기 자신 · 자기 하위(손주까지)인가 — 위 · 옆 메일함은 아니다', () => {
+    for (const candidate of ['u1', 'u2', 'u3', 'u4']) {
+      expect(isSelfOrDescendant(mailboxes, 'u1', candidate)).toBe(true);
+    }
+    for (const candidate of ['a', 'p', 'q']) {
+      expect(isSelfOrDescendant(mailboxes, 'u1', candidate)).toBe(false);
+    }
+    expect(isSelfOrDescendant(mailboxes, 'u2', 'u1')).toBe(false);
+  });
+
+  it('읽은 목록에 고리가 있어도 끝난다 — 한 번 본 메일함은 다시 보지 않는다', () => {
+    const looped = [
+      { id: 'x', parentId: 'z' },
+      { id: 'y', parentId: 'x' },
+      { id: 'z', parentId: 'y' },
+    ];
+    expect(subtreeIds(looped, 'x')).toEqual(['x', 'y', 'z']);
+    expect(deepestFirstIds(looped, 'x')).toEqual(['z', 'y', 'x']);
+  });
+
+  it('메일함 수에 비례한다 — 깊이 3,000 의 한 줄 나무도 바로 (CPU 시간)', () => {
+    const chain = Array.from({ length: 3_000 }, (_, index) => ({
+      id: `m${index}`,
+      parentId: index === 0 ? null : `m${index - 1}`,
+    }));
+    const elapsed = startCpuTimer();
+    expect(deepestFirstIds(chain, 'm0')).toHaveLength(3_000);
+    expect(isSelfOrDescendant(chain, 'm0', 'm2999')).toBe(true);
+    expect(elapsed()).toBeLessThan(500);
+  });
+});
diff --git a/backend/src/modules/mail/mailbox-tree.ts b/backend/src/modules/mail/mailbox-tree.ts
new file mode 100644
index 0000000..8766b3d
--- /dev/null
+++ b/backend/src/modules/mail/mailbox-tree.ts
@@ -0,0 +1,95 @@
+/**
+ * 메일함 나무 (순수 함수 — 계약 2절 "메일함 관리"의 15단계: 옮기기 · 하위 메일함까지 지우기) — 메일함은 parentId 로 잇는다.
+ * 엔진의 메일함(JmapMailbox)과 도메인의 메일함(Mailbox)이 함께 쓴다 — id · parentId 만 본다.
+ * 엔진이 고리를 막지만(옮기기의 invalidProperties — 2026-11-09 확인) 읽은 목록에 고리가 있어도 끝나게, 한 번 본 메일함은 다시 보지 않는다.
+ * 메일함 수에 비례한다(부모 → 자식 표를 한 번 만든다)
+ */
+
+/** 나무를 만드는 데 쓰는 칸 */
+interface TreeNode {
+  readonly id: string;
+  readonly parentId?: string | null;
+}
+
+/** 하위 메일함 하나와 그 깊이 (그 메일함의 바로 아래가 1) */
+export interface MailboxTreeEntry<T> {
+  readonly mailbox: T;
+  readonly depth: number;
+}
+
+/**
+ * 그 메일함의 하위 메일함 모두 — 깊이와 함께, 위에서부터(가까운 것부터) 차례. 그 메일함 자신은 넣지 않는다.
+ * 그 메일함이 목록에 없어도 그 id 를 상위로 둔 메일함을 찾는다(부르는 쪽이 먼저 있는지 본다)
+ */
+export function descendantsOf<T extends TreeNode>(
+  mailboxes: readonly T[],
+  rootId: string,
+): MailboxTreeEntry<T>[] {
+  const children = new Map<string, T[]>();
+  for (const mailbox of mailboxes) {
+    const parentId = mailbox.parentId ?? null;
+    if (parentId === null) continue;
+    const siblings = children.get(parentId);
+    if (siblings) siblings.push(mailbox);
+    else children.set(parentId, [mailbox]);
+  }
+
+  const seen = new Set<string>([rootId]);
+  const found: MailboxTreeEntry<T>[] = [];
+  let level = [rootId];
+  for (let depth = 1; level.length > 0; depth += 1) {
+    const next: string[] = [];
+    for (const id of level) {
+      for (const child of children.get(id) ?? []) {
+        if (seen.has(child.id)) continue;
+        seen.add(child.id);
+        found.push({ mailbox: child, depth });
+        next.push(child.id);
+      }
+    }
+    level = next;
+  }
+  return found;
+}
+
+/** 그 메일함과 하위 모두의 id — 그 메일함이 맨 앞, 하위는 가까운 것부터 (잠금 · 메일 찾기) */
+export function subtreeIds<T extends TreeNode>(
+  mailboxes: readonly T[],
+  rootId: string,
+): string[] {
+  return [
+    rootId,
+    ...descendantsOf(mailboxes, rootId).map(({ mailbox }) => mailbox.id),
+  ];
+}
+
+/**
+ * 지울 차례 — 깊은 것부터, 그 메일함은 맨 끝. 엔진은 한 요청의 destroy 를 적은 차례대로 하므로(E2 — 2026-11-09 확인)
+ * 이 차례면 빈 나무를 요청 하나로 지운다. 깊이가 같으면 찾은 차례 그대로다
+ */
+export function deepestFirstIds<T extends TreeNode>(
+  mailboxes: readonly T[],
+  rootId: string,
+): string[] {
+  const descendants = descendantsOf(mailboxes, rootId);
+  return [
+    ...[...descendants]
+      .sort((a, b) => b.depth - a.depth)
+      .map(({ mailbox }) => mailbox.id),
+    rootId,
+  ];
+}
+
+/** candidateId 가 그 메일함 자신이거나 그 하위인가 — 옮기기의 고리(자기 아래로 옮기기) 막기 */
+export function isSelfOrDescendant<T extends TreeNode>(
+  mailboxes: readonly T[],
+  rootId: string,
+  candidateId: string,
+): boolean {
+  return (
+    candidateId === rootId ||
+    descendantsOf(mailboxes, rootId).some(
+      ({ mailbox }) => mailbox.id === candidateId,
+    )
+  );
+}
diff --git a/backend/src/modules/mail/mailbox.controller.ts b/backend/src/modules/mail/mailbox.controller.ts
index 51a8c7f..fa42085 100644
--- a/backend/src/modules/mail/mailbox.controller.ts
+++ b/backend/src/modules/mail/mailbox.controller.ts
@@ -9,6 +9,7 @@ import {
   Patch,
   Post,
   Put,
+  Query,
   UseGuards,
 } from '@nestjs/common';
 import { ApiCookieAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
@@ -34,8 +35,9 @@ import {
 import { MailVacationDto, MailVacationStateDto } from './dto/mail-vacation.dto';
 import {
   CreateMailboxDto,
+  MailboxDeleteQueryDto,
   MailboxMessagesPatchDto,
-  RenameMailboxDto,
+  UpdateMailboxDto,
 } from './dto/mailbox.dto';
 import { MailIdPipe } from './mail-id.pipe';
 import {
@@ -51,7 +53,8 @@ import { MailService } from './mail.service';
 const BULK_NOTE =
   '한 요청을 25초 안에 끝내고 남은 수를 돌려준다 — 클라이언트는 남은 것이 없을 때까지 같은 요청을 다시 보낸다. ' +
   '도중에 실패하면 거기까지 처리했다 — 다시 보내면 남은 것만 처리한다. ' +
-  '같은 직원 · 같은 메일함에는 하나씩만 — 처리 중이면(종류가 달라도) 엔진에 묻지 않고 429 REQ_001. 다른 메일함은 동시에 된다.';
+  '같은 직원 · 같은 메일함에는 하나씩만 — 처리 중이면(종류가 달라도) 엔진에 묻지 않고 429 REQ_001. 다른 메일함은 동시에 된다. ' +
+  '차단할 때 받은편지함 정리(POST /api/mail-block-runs — 15단계)가 도는 동안은 스팸메일함도 처리 중이다.';
 
 /** 오래 걸리는 처리가 진행 중일 때의 안내 */
 const BULK_IN_PROGRESS =
@@ -108,20 +111,36 @@ export class MailboxController {
 
   @Patch(':id')
   @ApiOperation({
-    summary: '메일함 이름 바꾸기',
+    summary: '메일함 이름 바꾸기 · 옮기기',
     description:
-      '기본 메일함(역할이 있는 메일함 — 받은편지함 · 보낸편지함 등)은 바꿀 수 없다. 다른 상위로 옮기기는 하지 않는다.',
+      '이름(name) · 상위(parentId — 15단계 "메일함 옮기기") 가운데 바꿀 것만 보낸다 — 하나 이상(빈 본문은 400 VAL_001). parentId: null 은 맨 위다. ' +
+      '기본 메일함(역할이 있는 메일함 — 받은편지함 · 보낸편지함 등)은 바꿀 수 없다. 새 상위는 만들기와 같은 자리만(맨 위 · 받은편지함 · 보관함 · 내 메일함), ' +
+      '자기 자신 · 자기 하위 아래로는 옮길 수 없다. 하위 메일함과 안의 메일은 함께 가고 메일함 id 는 그대로다(그 메일함으로 옮기는 필터도 그대로 돈다). ' +
+      '이름 · 상위가 지금과 같으면 엔진에 묻지 않고 그대로 돌려준다. 옮길 때(parentId 가 있을 때) 그 메일함이나 새 상위의 오래 걸리는 처리가 진행 중이면 429 REQ_001.',
   })
   @ApiStandardResponse(MailboxDto, { description: '바뀐 메일함' })
-  @ApiErrorResponse('VAL_001', '기본 메일함 · 이름 형식 · 모르는 필드')
-  @ApiErrorResponse('RES_001', '없는 메일함 (형식이 틀린 id 포함)')
-  @ApiErrorResponse('MAIL_009', '같은 상위 안에 같은 이름의 메일함이 있다')
-  rename(
+  @ApiErrorResponse(
+    'VAL_001',
+    '빈 본문 · 기본 메일함 · 이름 형식 · 만들 수 없는 자리(보낸편지함 · 임시보관함 · 스팸메일함 · 휴지통 아래) · 자기 자신 · 자기 하위 아래 · 모르는 필드',
+  )
+  @ApiErrorResponse(
+    'RES_001',
+    '없는 메일함 · 없는 새 상위 (형식이 틀린 id 포함)',
+  )
+  @ApiErrorResponse(
+    'MAIL_009',
+    '새 자리(같은 상위 안)에 같은 이름의 메일함이 있다 — 대소문자는 가리지 않는다',
+  )
+  @ApiErrorResponse(
+    'REQ_001',
+    '옮길 때 — 그 메일함이나 새 상위의 오래 걸리는 처리(전체 읽음 · 비우기 · 지우기)가 진행 중 — 엔진에 묻지 않았다',
+  )
+  update(
     @CurrentUser() user: AuthenticatedUser,
     @Param('id', MailIdPipe) id: string,
-    @Body() dto: RenameMailboxDto,
+    @Body() dto: UpdateMailboxDto,
   ) {
-    return this.mail.renameMailbox(user, id, dto);
+    return this.mail.updateMailbox(user, id, dto);
   }
 
   @Delete(':id')
@@ -129,13 +148,17 @@ export class MailboxController {
     summary: '메일함 지우기 — 안의 메일을 휴지통으로 옮긴 뒤 지운다',
     description:
       '메일을 영구 삭제하지 않는다 — 이 메일함에만 있는 메일은 휴지통으로 옮기고, 다른 메일함에도 있는 메일은 이 메일함에서만 뺀 뒤 빈 메일함을 지운다. ' +
-      `옮기는 동안 들어온 메일도 옮긴다. ${BULK_NOTE} (deleted: false 면 다시 보낸다)`,
+      '하위 메일함이 있으면 withChildren=true 일 때만 지운다(15단계) — 그 메일함과 하위 모두(나무)의 메일을 같은 규칙으로 옮긴 뒤 깊은 것부터 지운다. 수는 나무 전체의 것이다. ' +
+      `옮기는 동안 들어온 메일도 옮긴다. ${BULK_NOTE} 하위까지 지울 때는 그 메일함을 먼저 잡고 목록을 읽어 하위 메일함까지 잡는다 — 하위가 처리 중이면 목록만 읽고 429. (deleted: false 면 다시 보낸다)`,
   })
   @ApiStandardResponse(MailboxDeletionDto, {
     description:
-      '지웠다(deleted: true) · 아직 옮길 메일이 남았다(deleted: false)',
+      '지웠다(deleted: true — 하위까지면 나무 전체) · 아직 옮길 메일이 남았다(deleted: false)',
   })
-  @ApiErrorResponse('VAL_001', '기본 메일함 · 하위 메일함이 있음')
+  @ApiErrorResponse(
+    'VAL_001',
+    '기본 메일함 · 하위 메일함이 있는데 withChildren=true 가 아님 · 하위에 기본 메일함이 있음 · withChildren 의 다른 값 · 모르는 쿼리',
+  )
   @ApiErrorResponse('RES_001', '없는 메일함 (형식이 틀린 id 포함)')
   @ApiErrorResponse(
     'MAIL_015',
@@ -146,8 +169,9 @@ export class MailboxController {
   remove(
     @CurrentUser() user: AuthenticatedUser,
     @Param('id', MailIdPipe) id: string,
+    @Query() query: MailboxDeleteQueryDto,
   ) {
-    return this.mail.deleteMailbox(user, id);
+    return this.mail.deleteMailbox(user, id, query);
   }
 
   @Patch(':id/messages')
diff --git a/backend/src/modules/mail/scheduled-message.controller.ts b/backend/src/modules/mail/scheduled-message.controller.ts
index 2a54fcc..506d9e0 100644
--- a/backend/src/modules/mail/scheduled-message.controller.ts
+++ b/backend/src/modules/mail/scheduled-message.controller.ts
@@ -2,7 +2,10 @@ import {
   Controller,
   Delete,
   Get,
+  HttpCode,
+  HttpStatus,
   Param,
+  Post,
   Query,
   UseGuards,
 } from '@nestjs/common';
@@ -22,6 +25,7 @@ import { JwtAuthGuard } from '@/common/guards/jwt-auth.guard';
 import {
   ScheduledMessageCanceledDto,
   ScheduledMessagePageDto,
+  SentMessageDto,
 } from './dto/mail-response.dto';
 import { MailIdPipe } from './mail-id.pipe';
 import { SCHEDULED_MESSAGES_ROUTE } from './mail.constants';
@@ -72,10 +76,54 @@ export class ScheduledMessageController {
     'MAIL_014',
     '이미 보냈다(메일 서버가 풀었음 — 보낸 제출이 있음 · 배달 중) · 붙잡은 적이 없는 메일이다 — 아무것도 바꾸지 않았다',
   )
+  @ApiErrorResponse(
+    'REQ_001',
+    '같은 메일의 지금 보내기가 처리 중(15단계) — 엔진에 묻지 않았다',
+  )
   cancel(
     @CurrentUser() user: AuthenticatedUser,
     @Param('id', MailIdPipe) id: string,
   ) {
     return this.scheduled.cancel(user, id);
   }
+
+  @Post(':id/release')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({
+    summary: '예약한 메일 지금 보내기 (15단계)',
+    description:
+      'id 는 보낸 사본의 메일 id 다. 본문 없음. 기다리는 예약 제출을 메일 서버에서 취소한 **뒤에** 같은 메일을 그 제출의 받는 사람(envelope — 숨은참조 포함) 그대로 다시 제출한다 — ' +
+      '[보내기]를 누른 것처럼 그 직원의 보내기 취소 설정 초만큼 붙잡았다 보낸다(0초면 바로 — 응답 pendingSend). 예약 표시를 떼서 이제 보내기 취소를 기다리는 메일이다(취소는 DELETE /api/scheduled-messages/{id}). ' +
+      '대용량 첨부 링크의 보낸 때는 지금으로 바꾸고 끝나는 날은 그대로 둔다(본문에 적힌 날짜). 받는 사람별 결과는 발송과 같다(rejectedRecipients). ' +
+      '이미 보낸 메일(예약 시각이 막 지남)은 오류가 아니다 — 200 pendingSend: null. 이미 지금 보내기를 한 메일(다시 누름 · 응답을 받지 못한 재시도)도 그 발송의 지금 상태로 200. ' +
+      '메일 서버가 다시 제출을 거절하면 한 번 더 하고, 그래도 거절이면 그 메일을 임시보관함으로 되돌리고(예약 취소와 같은 자리) 503 MAIL_001. ' +
+      '결과를 모르게 끝나면(시간 초과 · 연결 끊김) 다시 내지도 되돌리지도 않고 503 MAIL_001 — 메일은 보낸편지함에 그대로라 같은 요청을 다시 보내면 이어 낸다 ' +
+      '(503 뒤에는 그 메일을 다시 읽어 임시보관함인지 보낸편지함인지로 가른다). 54초 남짓 안에 답한다(정리 몫 포함 — 앞단 · 클라이언트 60초 안).',
+  })
+  @ApiStandardResponse(SentMessageDto, {
+    description:
+      '보냈다 · 보내기 취소를 기다린다(pendingSend.kind = undo) — 발송 응답과 같은 칸 (id 는 같은 메일 id)',
+  })
+  @ApiErrorResponse(
+    'RES_001',
+    '없는 메일 · 예약이 아닌 메일(보내기 취소를 기다리는 메일 · 취소해 임시보관함으로 간 메일 · 제출이 없음) — 형식이 틀린 id 포함, 아무것도 바꾸지 않았다',
+  )
+  @ApiErrorResponse(
+    'MAIL_010',
+    '받는 사람 모두 거절(없는 주소 등) — 보내지 않고 임시보관함으로 되돌렸다',
+  )
+  @ApiErrorResponse(
+    'MAIL_011',
+    '받는 사람 모두 지금은 받을 수 없음 — 보내지 않고 임시보관함으로 되돌렸다',
+  )
+  @ApiErrorResponse(
+    'REQ_001',
+    '같은 메일의 예약 취소 · 지금 보내기가 처리 중 — 엔진에 묻지 않았다',
+  )
+  release(
+    @CurrentUser() user: AuthenticatedUser,
+    @Param('id', MailIdPipe) id: string,
+  ) {
+    return this.scheduled.release(user, id);
+  }
 }
diff --git a/backend/src/modules/mail/scheduled-messages.service.spec.ts b/backend/src/modules/mail/scheduled-messages.service.spec.ts
index b9a0624..eee9d46 100644
--- a/backend/src/modules/mail/scheduled-messages.service.spec.ts
+++ b/backend/src/modules/mail/scheduled-messages.service.spec.ts
@@ -1,8 +1,15 @@
+import { Logger } from '@nestjs/common';
+
 import { BusinessException } from '@/common/errors/business.exception';
+import type { MailUserSettingsService } from '@/modules/mail-user-settings/mail-user-settings.service';
+import { DEFAULT_MAIL_USER_SETTINGS } from '@/modules/mail-user-settings/mail-user-settings.types';
 import { encodeOffsetCursor } from '@/shared/utils/offset-cursor';
 import type { MailLargeFilesService } from './mail-large-files.service';
-import type { MailProvider } from './mail.provider';
-import type { MessageSummary } from './mail.types';
+import {
+  ScheduledSendReturnedToDraftsException,
+  type MailProvider,
+} from './mail.provider';
+import type { MessageSummary, ReleasedScheduledSend } from './mail.types';
 import { ScheduledMessagesService } from './scheduled-messages.service';
 
 const user = { email: 'ara.kim@arasystem.test', name: '김아라' };
@@ -44,24 +51,48 @@ describe('ScheduledMessagesService — 예약한 메일 · 붙잡은 발송 취
   let provider: {
     listScheduledMessages: jest.Mock;
     cancelPendingSend: jest.Mock;
+    releaseScheduledSend: jest.Mock;
   };
   let service: ScheduledMessagesService;
-  let largeFiles: { onPendingSendCanceled: jest.Mock };
+  let largeFiles: {
+    onPendingSendCanceled: jest.Mock;
+    onScheduledSendReleased: jest.Mock;
+  };
+  let userSettings: { get: jest.Mock };
+
+  /** 대역 엔진의 지금 보내기 결과 — 보내기 취소를 기다린다 */
+  const released: ReleasedScheduledSend = {
+    id: 'm1',
+    rejectedRecipients: [],
+    pendingSend: { kind: 'undo', sendAt: '2026-11-09T05:00:10.000Z' },
+    releasedAt: '2026-11-09T05:00:00.000Z',
+  };
 
   beforeEach(() => {
     provider = {
       listScheduledMessages: jest.fn().mockResolvedValue(all),
       cancelPendingSend: jest.fn().mockResolvedValue(undefined),
+      releaseScheduledSend: jest.fn().mockResolvedValue(released),
     };
     largeFiles = {
       onPendingSendCanceled: jest.fn().mockResolvedValue(undefined),
+      onScheduledSendReleased: jest.fn().mockResolvedValue(undefined),
+    };
+    userSettings = {
+      get: jest.fn().mockResolvedValue({
+        ...DEFAULT_MAIL_USER_SETTINGS,
+        undoSendSeconds: 20,
+      }),
     };
     service = new ScheduledMessagesService(
       provider as unknown as MailProvider,
       largeFiles as unknown as MailLargeFilesService,
+      userSettings as unknown as MailUserSettingsService,
     );
   });
 
+  afterEach(() => jest.restoreAllMocks());
+
   it('목록 — 엔진이 준 차례(보낼 시각)대로 한 쪽, total 은 전체 수 · 커서로 이어 받는다', async () => {
     const first = await service.list(user, { limit: 2 });
     expect(first.items.map(({ id }) => id)).toEqual(['s1', 's2']);
@@ -138,4 +169,123 @@ describe('ScheduledMessagesService — 예약한 메일 · 붙잡은 발송 취
     await failureOf(() => service.cancel(user, 'm2'));
     expect(largeFiles.onPendingSendCanceled).not.toHaveBeenCalled();
   });
+
+  describe('지금 보내기 (15단계)', () => {
+    it('그 직원의 보내기 취소 초만큼 붙잡아 다시 내게 하고, 발송과 같은 칸으로 답한다 — 다시 냈으면 대용량 링크의 보낸 때를 그 시각으로', async () => {
+      await expect(service.release(user, 'm1')).resolves.toEqual({
+        id: 'm1',
+        rejectedRecipients: [],
+        pendingSend: { kind: 'undo', sendAt: '2026-11-09T05:00:10.000Z' },
+      });
+      expect(provider.releaseScheduledSend).toHaveBeenCalledWith(
+        user.email,
+        'm1',
+        { kind: 'undo', seconds: 20 },
+      );
+      expect(largeFiles.onScheduledSendReleased).toHaveBeenCalledWith(
+        user,
+        'm1',
+        new Date('2026-11-09T05:00:00.000Z'),
+      );
+    });
+
+    it('보내기 취소를 0초로 두었으면 붙잡지 않는다(null) · 설정을 읽지 못하면 처음 값(10초)으로 — 경고만', async () => {
+      userSettings.get.mockResolvedValueOnce({
+        ...DEFAULT_MAIL_USER_SETTINGS,
+        undoSendSeconds: 0,
+      });
+      await service.release(user, 'm1');
+      expect(provider.releaseScheduledSend).toHaveBeenLastCalledWith(
+        user.email,
+        'm1',
+        null,
+      );
+
+      const warn = jest
+        .spyOn(Logger.prototype, 'warn')
+        .mockImplementation(() => undefined);
+      userSettings.get.mockRejectedValueOnce(new Error('db down'));
+      await service.release(user, 'm1');
+      expect(provider.releaseScheduledSend).toHaveBeenLastCalledWith(
+        user.email,
+        'm1',
+        { kind: 'undo', seconds: 10 },
+      );
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(String(warn.mock.calls[0][0])).not.toContain(user.email);
+    });
+
+    it('이미 보낸 메일(releasedAt null)은 링크를 그대로 둔다 — 응답은 pendingSend null', async () => {
+      provider.releaseScheduledSend.mockResolvedValueOnce({
+        ...released,
+        pendingSend: null,
+        releasedAt: null,
+      });
+      await expect(service.release(user, 'm1')).resolves.toMatchObject({
+        pendingSend: null,
+      });
+      expect(largeFiles.onScheduledSendReleased).not.toHaveBeenCalled();
+    });
+
+    it('끝내 보내지 못해 임시보관함으로 되돌렸으면 링크를 취소한 발송처럼 둔다 — 그 밖의 실패는 링크를 건드리지 않는다 (코드는 그대로)', async () => {
+      provider.releaseScheduledSend.mockRejectedValueOnce(
+        new ScheduledSendReturnedToDraftsException('MAIL_010', {
+          context: { reason: 'x' },
+        }),
+      );
+      expect(await failureOf(() => service.release(user, 'm1'))).toMatchObject({
+        code: 'MAIL_010',
+      });
+      expect(largeFiles.onPendingSendCanceled).toHaveBeenCalledWith(user, 'm1');
+
+      largeFiles.onPendingSendCanceled.mockClear();
+      for (const code of ['RES_001', 'MAIL_001'] as const) {
+        provider.releaseScheduledSend.mockRejectedValueOnce(
+          new BusinessException(code, { context: { reason: 'x' } }),
+        );
+        expect(
+          await failureOf(() => service.release(user, 'm1')),
+        ).toMatchObject({
+          code,
+        });
+      }
+      expect(largeFiles.onPendingSendCanceled).not.toHaveBeenCalled();
+      expect(largeFiles.onScheduledSendReleased).not.toHaveBeenCalled();
+    });
+
+    it('같은 직원 · 같은 메일의 예약 취소 · 지금 보내기는 한 번에 하나 — 진행 중이면 엔진에 묻지 않고 REQ_001, 다른 메일은 된다, 끝나면 다시 받는다', async () => {
+      let finish!: (value: ReleasedScheduledSend) => void;
+      provider.releaseScheduledSend.mockReturnValueOnce(
+        new Promise<ReleasedScheduledSend>((resolve) => {
+          finish = resolve;
+        }),
+      );
+
+      const running = service.release(user, 'm1');
+      await new Promise((resolve) => setImmediate(resolve));
+      expect(provider.releaseScheduledSend).toHaveBeenCalledTimes(1);
+
+      for (const attempt of [
+        () => service.release(user, 'm1'),
+        () => service.cancel(user, 'm1'),
+        () =>
+          service.release({ ...user, email: 'ARA.KIM@arasystem.test' }, 'm1'),
+      ]) {
+        expect(await failureOf(attempt)).toEqual({
+          code: 'REQ_001',
+          reason: 'scheduled-send-in-progress',
+        });
+      }
+      expect(provider.cancelPendingSend).not.toHaveBeenCalled();
+      await expect(service.cancel(user, 'm2')).resolves.toEqual({
+        draftId: 'm2',
+      });
+
+      finish(released);
+      await running;
+      await expect(service.cancel(user, 'm1')).resolves.toEqual({
+        draftId: 'm1',
+      });
+    });
+  });
 });
diff --git a/backend/src/modules/mail/scheduled-messages.service.ts b/backend/src/modules/mail/scheduled-messages.service.ts
index 2a8e91c..a448072 100644
--- a/backend/src/modules/mail/scheduled-messages.service.ts
+++ b/backend/src/modules/mail/scheduled-messages.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@nestjs/common';
+import { Inject, Injectable, Logger } from '@nestjs/common';
 
 import type { AuthenticatedUser } from '@/common/decorators/current-user.decorator';
 import {
@@ -7,28 +7,48 @@ import {
   toPaginatedResult,
 } from '@/common/dto/pagination.dto';
 import { BusinessException } from '@/common/errors/business.exception';
+import { MailUserSettingsService } from '@/modules/mail-user-settings/mail-user-settings.service';
+import { DEFAULT_MAIL_USER_SETTINGS } from '@/modules/mail-user-settings/mail-user-settings.types';
+import { traceTag } from '@/shared/logger/request-context';
+import { maskEmail } from '@/shared/utils/mask';
 import {
   decodeOffsetCursor,
   encodeOffsetCursor,
 } from '@/shared/utils/offset-cursor';
 import { MailLargeFilesService } from './mail-large-files.service';
-import { MAIL_PROVIDER, type MailProvider } from './mail.provider';
-import type { MessageSummary } from './mail.types';
+import {
+  MAIL_PROVIDER,
+  ScheduledSendReturnedToDraftsException,
+  type MailProvider,
+} from './mail.provider';
+import type { MessageSummary, SendHold, SentMessage } from './mail.types';
+import { undoSendHold } from './send-hold';
 
 /** 예약한 메일 목록의 커서 범위 — 다른 목록의 커서를 섞어 쓰지 못하게 (shared/utils/offset-cursor.ts) */
 const SCHEDULED_SCOPE = 'scheduled-messages';
 
 /**
- * 붙잡아 둔 발송 (계약 2절 "보내기 취소 · 예약 발송" — 9단계) — 예약한 메일 목록과 취소.
+ * 붙잡아 둔 발송 (계약 2절 "보내기 취소 · 예약 발송" — 9단계) — 예약한 메일 목록 · 취소 · 지금 보내기(15단계).
  * 우리 서버는 붙잡은 발송을 따로 기억하지 않는다 — 목록 · 상태는 늘 엔진의 기다리는 제출에 묻는다(붙잡은 메일은 엔진을 다시 띄워도 남는다).
  * 보내기(붙잡는 시간을 정하는 것)는 MailService.sendMessage 다
  */
 @Injectable()
 export class ScheduledMessagesService {
+  private readonly logger = new Logger(ScheduledMessagesService.name);
+
+  /**
+   * 진행 중인 (직원, 메일)의 취소 · 지금 보내기 — 같은 메일에는 하나씩만(종류가 달라도 막는다 — 계약 2절, 진행 중이면 429 REQ_001).
+   * 취소와 지금 보내기가 같은 예약 제출을 함께 다루면 한쪽이 취소한 뒤 다른 쪽이 다시 내거나 임시보관함으로 옮긴다.
+   * ⚠️ 프로세스 메모리다. 인스턴스를 늘리면 Redis 잠금(SET NX PX)으로 옮겨야 인스턴스 사이에서도 하나씩이 된다
+   */
+  private readonly inProgress = new Set<string>();
+
   constructor(
     @Inject(MAIL_PROVIDER) private readonly provider: MailProvider,
-    /** 취소한 발송의 대용량 첨부 링크를 취소한 링크로 (11단계) */
+    /** 취소한 발송의 대용량 첨부 링크를 취소한 링크로 · 지금 보낸 예약의 링크에 보낸 때를 (11단계 · 15단계) */
     private readonly largeFiles: MailLargeFilesService,
+    /** 지금 보내기의 보내기 취소 초 (15단계 — [보내기]를 누른 것처럼) */
+    private readonly userSettings: MailUserSettingsService,
   ) {}
 
   /**
@@ -64,14 +84,88 @@ export class ScheduledMessagesService {
   /**
    * 붙잡은 발송을 취소하고 그 메일을 임시보관함으로 되돌린다 — 쓰기 화면이 같은 메일 id 로 이어 쓴다 (draftId).
    * 없는 메일 RES_001, 이미 보냄 · 기다리는 발송이 아님 MAIL_014, 취소를 확인하지 못함 · 옮기지 못함 MAIL_001 (어댑터 — 취소 · 예약의 로그도 어댑터가 남긴다).
-   * 엔진에서 취소가 확인된 **뒤에** 그 발송이 만든 대용량 첨부 링크를 취소한 링크로 둔다 (11단계 — 파일은 되돌린 초안이 쓴다)
+   * 엔진에서 취소가 확인된 **뒤에** 그 발송이 만든 대용량 첨부 링크를 취소한 링크로 둔다 (11단계 — 파일은 되돌린 초안이 쓴다).
+   * 같은 메일의 지금 보내기가 진행 중이면 REQ_001 (15단계)
    */
   async cancel(
     user: AuthenticatedUser,
     id: string,
   ): Promise<{ draftId: string }> {
-    await this.provider.cancelPendingSend(user.email, id);
-    await this.largeFiles.onPendingSendCanceled(user, id);
-    return { draftId: id };
+    return this.exclusive(user, id, async () => {
+      await this.provider.cancelPendingSend(user.email, id);
+      await this.largeFiles.onPendingSendCanceled(user, id);
+      return { draftId: id };
+    });
+  }
+
+  /**
+   * 예약한 메일을 지금 보낸다 (계약 2절 "보내기 취소 · 예약 발송" — 15단계) — [보내기]를 누른 것처럼 그 직원의 보내기 취소 초만큼 붙잡았다 보낸다(0 이면 바로).
+   * 응답은 발송 결과(SentMessage)와 같은 칸이다 — 예약 시각이 막 지나 이미 보냈으면 pendingSend null(오류가 아니다).
+   * - 예약이 아닌 메일 · 없는 메일 RES_001, 다시 제출하지 못함 MAIL_001 · 받는 사람 모두 거절 MAIL_010 · MAIL_011 (어댑터 — 로그도 어댑터가 남긴다)
+   * - 다시 제출한 뒤 그 발송이 만든 대용량 첨부 링크의 보낸 때를 지금으로 (끝나는 때는 그대로 — 덩이가 이미 적었다)
+   * - 끝내 보내지 못해 임시보관함으로 **되돌렸을 때만**(ScheduledSendReturnedToDraftsException) 링크를 취소한 발송처럼 둔다(되돌린 초안이 쓴다).
+   *   그 밖의 MAIL_001(결과를 모름 · 남은 시간 모자람 · 되돌리기 실패)은 링크를 건드리지 않는다 — 메일은 보낸편지함에 그대로고 다시 부르면 이어 낸다
+   * - 같은 메일의 취소 · 지금 보내기가 진행 중이면 REQ_001
+   */
+  async release(user: AuthenticatedUser, id: string): Promise<SentMessage> {
+    return this.exclusive(user, id, async () => {
+      const hold = await this.undoHold(user);
+      try {
+        const { releasedAt, ...sent } =
+          await this.provider.releaseScheduledSend(user.email, id, hold);
+        if (releasedAt !== null) {
+          await this.largeFiles.onScheduledSendReleased(
+            user,
+            id,
+            new Date(releasedAt),
+          );
+        }
+        return sent;
+      } catch (error) {
+        if (error instanceof ScheduledSendReturnedToDraftsException) {
+          await this.largeFiles.onPendingSendCanceled(user, id);
+        }
+        throw error;
+      }
+    });
+  }
+
+  /**
+   * 지금 보내기의 붙잡기 — 그 직원 설정의 보내기 취소 초(send-hold.ts). 설정을 읽지 못하면(DB 장애) 처음 값으로 보고 경고만 —
+   * 발송과 같다(MailService.userSettingsOf)
+   */
+  private async undoHold(user: AuthenticatedUser): Promise<SendHold | null> {
+    try {
+      const { undoSendSeconds } = await this.userSettings.get(user.email);
+      return undoSendHold(undoSendSeconds);
+    } catch (error) {
+      this.logger.warn(
+        `[SYS_001]${traceTag()} 보내기 · 읽기 설정을 읽지 못해 처음 값으로 봅니다: user=${maskEmail(user.email)}, reason=${error instanceof Error ? error.message : String(error)}`,
+      );
+      return undoSendHold(DEFAULT_MAIL_USER_SETTINGS.undoSendSeconds);
+    }
+  }
+
+  /** 같은 직원 · 같은 메일의 취소 · 지금 보내기를 하나씩만 — 진행 중이면 엔진에 묻지 않고 REQ_001. 끝나면 성공 · 실패와 상관없이 푼다 */
+  private async exclusive<T>(
+    user: AuthenticatedUser,
+    id: string,
+    operation: () => Promise<T>,
+  ): Promise<T> {
+    const key = `${user.email.toLowerCase()}\n${id}`;
+    if (this.inProgress.has(key)) {
+      throw new BusinessException('REQ_001', {
+        context: {
+          reason: 'scheduled-send-in-progress',
+          user: maskEmail(user.email),
+        },
+      });
+    }
+    this.inProgress.add(key);
+    try {
+      return await operation();
+    } finally {
+      this.inProgress.delete(key);
+    }
   }
 }
diff --git a/backend/src/modules/mail/send-hold.ts b/backend/src/modules/mail/send-hold.ts
new file mode 100644
index 0000000..d13f176
--- /dev/null
+++ b/backend/src/modules/mail/send-hold.ts
@@ -0,0 +1,11 @@
+import type { SendHold } from './mail.types';
+
+/**
+ * 보내기 취소를 기다리는 붙잡기 (계약 2절 "보내기 취소 · 예약 발송") — 그 직원 설정의 초, 0 이면 붙잡지 않는다(null — 바로 보낸다).
+ * 발송(MailService.sendMessage)과 예약 메일 지금 보내기(ScheduledMessagesService.release — 15단계)가 같이 쓴다 — [보내기]를 누른 것처럼 붙잡는다
+ */
+export function undoSendHold(undoSendSeconds: number): SendHold | null {
+  return undoSendSeconds > 0
+    ? { kind: 'undo', seconds: undoSendSeconds }
+    : null;
+}
diff --git a/backend/test/app.e2e-spec.ts b/backend/test/app.e2e-spec.ts
index 159b1c5..1f36631 100644
--- a/backend/test/app.e2e-spec.ts
+++ b/backend/test/app.e2e-spec.ts
@@ -84,6 +84,7 @@ import {
   AccountLoginDisabledException,
   MAIL_PROVIDER,
   PasswordExpiredException,
+  ScheduledSendReturnedToDraftsException,
 } from '@/modules/mail/mail.provider';
 import { MAIL_SETTINGS, type MailSettings } from '@/modules/mail/mail.settings';
 import type {
@@ -93,10 +94,13 @@ import type {
   DraftSource,
   Mailbox,
   MailboxBulkResult,
+  MailboxChange,
   MailboxCreate,
+  MailboxDeleteOptions,
   MailboxDeletion,
   MailBlockAdded,
   MailBlockList,
+  MailBlockRunRequest,
   MailFilterRule,
   MailFilterRunOutcome,
   MailFilterRunRequest,
@@ -118,7 +122,9 @@ import type {
   PasswordChangeOutcome,
   PendingSend,
   RecipientRejectionReason,
+  ReleasedScheduledSend,
   SavedDraft,
+  SendHold,
   SentMessage,
 } from '@/modules/mail/mail.types';
 import {
@@ -326,6 +332,9 @@ const NEVER_CONFIGURED_VACATION: MailVacation = {
 /** 9단계 — 대역 메일 엔진이 "이미 보냈다(엔진이 풀었다)"고 답하는 메일 id (409 MAIL_014 경로) */
 const ALREADY_RELEASED_MESSAGE = 'alreadyreleased';
 
+/** 15단계 — 대역 메일 엔진의 지금 보내기가 받는 사람을 모두 받지 않아 임시보관함으로 되돌리는 메일 id (400 MAIL_010 경로) */
+const RELEASE_REJECTED_MESSAGE = 'releaserejected';
+
 /**
  * 9단계 — 대역 메일 엔진이 붙잡고 있는(보내기 취소 · 예약을 기다리는) 메일 id — 옮기기 · 스팸 · 지우기는 막힌다 (409 MAIL_015 · failedIds 경로).
  * 붙잡힘 판정(보낼 시각이 지금 뒤인 pending 제출 · fail closed)은 jmap-mail.provider.spec.ts 가 본다
@@ -860,6 +869,12 @@ describe('응답 계약 (e2e)', () => {
     update: MessageUpdate;
   }[] = [];
 
+  /** 15단계 — 대역 엔진이 받은 차단 정리 · 지금 보내기, 직원마다 더한 메일함(하위 메일함이 있는 나무) · 지금 보내기를 붙잡는 문 */
+  const blockRuns: { user: string; request: MailBlockRunRequest }[] = [];
+  const releases: { user: string; id: string; hold: SendHold | null }[] = [];
+  const extraMailboxes = new Map<string, Mailbox[]>();
+  let slowReleaseGate: Promise<void> | null = null;
+
   /** 9단계 — 대역 엔진의 차단 목록(직원마다 — 최근 것부터) · 예약한 메일 · 취소한 발송 · 바깥 이미지 요청 */
   const mailBlocks = new Map<string, BlockedSender[]>();
   const scheduledMessages = new Map<string, MessageSummary[]>();
@@ -1588,30 +1603,57 @@ describe('응답 계약 (e2e)', () => {
             unreadCount: 0,
           });
         },
-        renameMailbox: (
+        // 15단계 — 이름 · 상위 바꾸기. 상위의 자리 · 고리 판정은 jmap-mail.provider.spec.ts 가 본다 (여기서는 엔진의 답만 흉내 낸다)
+        updateMailbox: (
           user: string,
           id: string,
-          name: string,
+          change: MailboxChange,
         ): Promise<Mailbox> => {
-          mailboxCalls.push({ user, action: 'rename', args: [id, name] });
+          mailboxCalls.push({ user, action: 'update', args: [id, change] });
+          if (change.parentId === MISSING_MAILBOX) {
+            return Promise.reject(
+              new BusinessException('RES_001', {
+                context: { reason: 'e2e-parent-not-found' },
+              }),
+            );
+          }
+          if (change.parentId === id) {
+            return Promise.reject(
+              new BusinessException('VAL_001', {
+                context: { reason: 'e2e-mailbox-move-into-itself' },
+              }),
+            );
+          }
+          if (change.name === TAKEN_MAILBOX_NAME) {
+            return Promise.reject(
+              new BusinessException('MAIL_009', {
+                context: { reason: 'e2e-mailbox-name-taken' },
+              }),
+            );
+          }
           return Promise.resolve({
             id,
-            name,
+            name: change.name ?? id,
             role: null,
-            parentId: null,
+            parentId: change.parentId ?? null,
             sortOrder: 0,
             totalCount: 3,
             unreadCount: 1,
           });
         },
-        deleteMailbox: (user: string, id: string): Promise<MailboxDeletion> => {
-          mailboxCalls.push({ user, action: 'delete', args: [id] });
-          return Promise.resolve({
+        deleteMailbox: async (
+          user: string,
+          id: string,
+          options?: MailboxDeleteOptions,
+        ): Promise<MailboxDeletion> => {
+          mailboxCalls.push({ user, action: 'delete', args: [id, options] });
+          if (id === SLOW_MAILBOX && slowMailboxGate) await slowMailboxGate;
+          return {
             deleted: true,
             processed: 4,
             movedToTrash: 3,
             remaining: 0,
-          });
+          };
         },
         markMailboxRead: (
           user: string,
@@ -1646,7 +1688,11 @@ describe('응답 계약 (e2e)', () => {
           inactiveScripts.delete(user);
           return Promise.resolve({ ...vacation, isActive: true });
         },
-        listMailboxes: (): Promise<Mailbox[]> => Promise.resolve(E2E_MAILBOXES),
+        listMailboxes: (user: string): Promise<Mailbox[]> =>
+          Promise.resolve([
+            ...E2E_MAILBOXES,
+            ...(extraMailboxes.get(user) ?? []),
+          ]),
         // 6단계 — 엔진 쪽 판단(지문 비교 · 한도)만 흉내 낸다. 만드는 Sieve · 조건부 쓰기는 jmap/*.spec.ts 가 본다
         getMailFilters: (user: string): Promise<MailFilterSet> => {
           const rules = mailScripts.get(user)?.rules ?? [];
@@ -1724,6 +1770,34 @@ describe('응답 계약 (e2e)', () => {
                 rounds: 1,
               };
         },
+        // 15단계 — 차단 정리. 판정 · 차례 · 이어 할 자리는 jmap-filter-run.spec.ts 가 본다. 필터 적용과 같은 문으로 붙잡는다(같은 잠금 확인)
+        runMailBlock: async (
+          user: string,
+          request: MailBlockRunRequest,
+        ): Promise<MailFilterRunOutcome> => {
+          blockRuns.push({ user, request });
+          if (request.cursor === OTHER_RULE_CURSOR) {
+            throw new BusinessException('VAL_001', {
+              context: { reason: 'e2e-mail-block-run-other-sender' },
+            });
+          }
+          if (slowFilterRunGate) await slowFilterRunGate;
+          return request.cursor === null
+            ? {
+                scanned: 500,
+                matched: 7,
+                remaining: 40,
+                cursor: 'e2eblockcursor',
+                rounds: 1,
+              }
+            : {
+                scanned: 40,
+                matched: 1,
+                remaining: 0,
+                cursor: null,
+                rounds: 1,
+              };
+        },
         openMessageSource: (
           _user: string,
           id: string,
@@ -1905,6 +1979,46 @@ describe('응답 계약 (e2e)', () => {
           canceledSends.push({ user, id });
           return Promise.resolve();
         },
+        // 15단계 — 지금 보내기 (취소 → 다시 제출 · 상태 가르기 · 되돌리기는 jmap-mail.provider.spec.ts 가 본다)
+        releaseScheduledSend: async (
+          user: string,
+          id: string,
+          hold: SendHold | null,
+        ): Promise<ReleasedScheduledSend> => {
+          releases.push({ user, id, hold });
+          if (slowReleaseGate) await slowReleaseGate;
+          if (id === GONE_MESSAGE) {
+            throw new BusinessException('RES_001', {
+              context: { reason: 'e2e-not-a-scheduled-send' },
+            });
+          }
+          if (id === RELEASE_REJECTED_MESSAGE) {
+            throw new ScheduledSendReturnedToDraftsException('MAIL_010', {
+              context: { reason: 'e2e-release-all-recipients-rejected' },
+            });
+          }
+          if (id === ALREADY_RELEASED_MESSAGE) {
+            return {
+              id,
+              rejectedRecipients: [],
+              pendingSend: null,
+              releasedAt: null,
+            };
+          }
+          const now = Date.now();
+          return {
+            id,
+            rejectedRecipients: [],
+            pendingSend:
+              hold?.kind === 'undo'
+                ? {
+                    kind: 'undo',
+                    sendAt: new Date(now + hold.seconds * 1_000).toISOString(),
+                  }
+                : null,
+            releasedAt: new Date(now).toISOString(),
+          };
+        },
       })
       .overrideProvider(MAIL_SETTINGS)
       .useValue(TEST_MAIL_SETTINGS)
@@ -2449,6 +2563,10 @@ describe('응답 계약 (e2e)', () => {
       ['get', '/api/mail-filters'],
       ['put', '/api/mail-filters'],
       ['post', '/api/mail-filter-runs'],
+      // 15단계 — 차단 정리 · 지금 보내기 (옮기기 · 하위까지 지우기는 위의 PATCH · DELETE 와 같은 경로)
+      ['post', '/api/mail-block-runs'],
+      ['post', '/api/scheduled-messages/eaaaaab/release'],
+      ['delete', '/api/mailboxes/u1?withChildren=true'],
       ['get', '/api/messages/eaaaaab/source'],
       // 템플릿 업로드 예제도 로그인한 직원만 쓴다
       ['post', '/api/files'],
@@ -3638,27 +3756,21 @@ describe('응답 계약 (e2e)', () => {
         expect(body(orphan).error?.code).toBe('RES_001');
       });
 
-      it('이름 바꾸기는 200 Mailbox — 형식이 틀린 id 는 404 RES_001, 상위는 바꾸지 않는다(모르는 필드)', async () => {
+      it('이름 바꾸기는 200 Mailbox — 형식이 틀린 id 는 404 RES_001, 이름만 보내면 상위는 그대로 (15단계부터 상위도 받는다 — 아래 "15단계")', async () => {
         const res = await send('patch', '/api/mailboxes/u1', {
           name: ' 새 이름 ',
         }).expect(200);
         expect(dataOf<{ name: string }>(res).name).toBe('새 이름');
         expect(mailboxCalls.at(-1)).toEqual({
           user: ME,
-          action: 'rename',
-          args: ['u1', '새 이름'],
+          action: 'update',
+          args: ['u1', { name: '새 이름' }],
         });
 
         const malformed = await send('patch', '/api/mailboxes/a%20b', {
           name: '새 이름',
         }).expect(404);
         expect(body(malformed).error?.code).toBe('RES_001');
-
-        const move = await send('patch', '/api/mailboxes/u1', {
-          name: '새 이름',
-          parentId: 'a',
-        }).expect(400);
-        expect(body(move).error?.code).toBe('VAL_001');
       });
 
       it('지우기는 204 가 아니라 200 { deleted, processed, movedToTrash, remaining }', async () => {
@@ -3671,7 +3783,7 @@ describe('응답 계약 (e2e)', () => {
         expect(mailboxCalls.at(-1)).toEqual({
           user: ME,
           action: 'delete',
-          args: ['u1'],
+          args: ['u1', { startedAt: expect.any(Number) as number }],
         });
       });
 
@@ -6201,6 +6313,31 @@ describe('응답 계약 (e2e)', () => {
       return { sentId, message, token, link };
     };
 
+    it('예약 메일을 지금 보내면(15단계) 그 링크의 보낸 때를 지금으로 앞당기고 끝나는 날은 그대로 둔다 — 덩이가 적은 날짜 (실제 DB 의 조건부 UPDATE)', async () => {
+      const ME = 'lf.release@e2e.arasystem.test';
+      const file = await uploadReady(ME, '지금 보내기 시험', '도면.zip');
+      const sendAt = new Date(
+        Math.floor((Date.now() + 3 * 24 * 60 * 60_000) / 1_000) * 1_000,
+      ).toISOString();
+      const { sentId, link } = await sendAndShare(ME, [file.id], { sendAt });
+      expect(link?.sentAt).toBe(sendAt);
+      const expiresAt = link?.expiresAt;
+
+      const before = Date.now();
+      await client(
+        request(server).post(`/api/scheduled-messages/${sentId}/release`),
+        ME,
+      ).expect(200);
+      const after = (await shareLinksOf(ME)).items.find(
+        (item) => item.sentEmailId === sentId,
+      );
+      expect(Date.parse(after?.sentAt ?? '')).toBeGreaterThanOrEqual(
+        Math.floor(before / 1_000) * 1_000,
+      );
+      expect(Date.parse(after?.sentAt ?? '')).toBeLessThan(Date.parse(sendAt));
+      expect(after?.expiresAt).toBe(expiresAt);
+    });
+
     it('로그인하지 않았으면 401 AUTH_001 — 공개 경로 밖은 모두', async () => {
       const id = randomUUID();
       for (const res of [
@@ -11119,6 +11256,426 @@ describe('응답 계약 (e2e)', () => {
     });
   });
 
+  /**
+   * 15단계 — 메일함 옮기기 · 하위 메일함까지 지우기 · 차단할 때 받은편지함 정리 · 예약 메일 지금 보내기 (계약 2절).
+   * 엔진 쪽 판단(상위의 자리 · 고리 · 깊은 것부터 지우기 · Sieve 와 같은 판정 · 취소 → 다시 제출)은 jmap-*.spec.ts 가 본다 — 여기서는 HTTP 형식 · 검사 · 잠금 · 응답 꼴을 본다
+   */
+  describe('15단계 — 메일함 옮기기 · 하위까지 지우기 · 차단 정리 · 지금 보내기', () => {
+    /** 보내기 · 읽기 설정 — 지금 보내기의 보내기 취소 초 (9단계 "보내기 · 읽기 설정") */
+    const patchSettings = (email: string, payload: object) =>
+      request(server)
+        .patch('/api/mail-settings')
+        .set('Cookie', cookieOf(email))
+        .send(payload);
+
+    describe('메일함 옮기기 (PATCH /api/mailboxes/{id} 의 parentId)', () => {
+      const ME = 'move.me@e2e.arasystem.test';
+      const patch = (id: string, payload: object) =>
+        request(server)
+          .patch(`/api/mailboxes/${id}`)
+          .set('Cookie', cookieOf(ME))
+          .send(payload);
+
+      it('parentId 로 옮긴다 — null 은 맨 위, 이름과 함께도 된다 · 보낸 칸만 엔진에 넘긴다', async () => {
+        const res = await patch('u1', { parentId: 'a' }).expect(200);
+        expect(body(res)).toEqual({
+          success: true,
+          data: {
+            id: 'u1',
+            name: 'u1',
+            role: null,
+            parentId: 'a',
+            sortOrder: 0,
+            totalCount: 3,
+            unreadCount: 1,
+          },
+        });
+        expect(mailboxCalls.at(-1)).toEqual({
+          user: ME,
+          action: 'update',
+          args: ['u1', { parentId: 'a' }],
+        });
+
+        await patch('u1', { parentId: null }).expect(200);
+        expect(mailboxCalls.at(-1)?.args).toEqual(['u1', { parentId: null }]);
+
+        await patch('u1', { name: ' 2025 ', parentId: 'j' }).expect(200);
+        expect(mailboxCalls.at(-1)?.args).toEqual([
+          'u1',
+          { name: '2025', parentId: 'j' },
+        ]);
+      });
+
+      it('빈 본문 · 상위 id 형식 · null 이름 · 모르는 필드는 400 VAL_001 — 엔진에 묻지 않는다', async () => {
+        const before = mailboxCalls.length;
+        for (const payload of [
+          {},
+          { parentId: '../a' },
+          { parentId: 7 },
+          { name: null },
+          { parentId: 'a', role: 'inbox' },
+        ]) {
+          const res = await patch('u1', payload).expect(400);
+          expect(body(res).error?.code).toBe('VAL_001');
+        }
+        expect(mailboxCalls).toHaveLength(before);
+      });
+
+      it('엔진의 답 그대로 — 없는 상위 404 RES_001 · 자기 아래 400 VAL_001 · 같은 이름 409 MAIL_009', async () => {
+        const orphan = await patch('u1', { parentId: MISSING_MAILBOX }).expect(
+          404,
+        );
+        expect(body(orphan).error?.code).toBe('RES_001');
+        const self = await patch('u1', { parentId: 'u1' }).expect(400);
+        expect(body(self).error?.code).toBe('VAL_001');
+        const taken = await patch('u1', {
+          name: TAKEN_MAILBOX_NAME,
+          parentId: 'a',
+        }).expect(409);
+        expect(body(taken).error?.code).toBe('MAIL_009');
+      });
+    });
+
+    describe('하위 메일함까지 지우기 (DELETE /api/mailboxes/{id}?withChildren=true)', () => {
+      const ME = 'tree.me@e2e.arasystem.test';
+      const CHILD = 'slowchild';
+      const remove = (id: string, query = '') =>
+        request(server)
+          .delete(`/api/mailboxes/${id}${query}`)
+          .set('Cookie', cookieOf(ME));
+
+      beforeAll(() => {
+        // 대역 엔진의 나무 — SLOW_MAILBOX › CHILD
+        extraMailboxes.set(ME, [
+          {
+            id: SLOW_MAILBOX,
+            name: '거래처',
+            role: null,
+            parentId: null,
+            sortOrder: 0,
+            totalCount: 0,
+            unreadCount: 0,
+          },
+          {
+            id: CHILD,
+            name: '2025',
+            role: null,
+            parentId: SLOW_MAILBOX,
+            sortOrder: 0,
+            totalCount: 0,
+            unreadCount: 0,
+          },
+        ]);
+      });
+
+      it('withChildren=true 면 하위까지 지우기를 넘기고 200 MailboxDeletion — 다른 값 · 모르는 쿼리는 400 VAL_001 (엔진에 묻지 않는다)', async () => {
+        const res = await remove('u1', '?withChildren=true').expect(200);
+        expect(body(res)).toEqual({
+          success: true,
+          data: { deleted: true, processed: 4, movedToTrash: 3, remaining: 0 },
+        });
+        expect(mailboxCalls.at(-1)).toEqual({
+          user: ME,
+          action: 'delete',
+          args: [
+            'u1',
+            { withChildren: true, startedAt: expect.any(Number) as number },
+          ],
+        });
+
+        const before = mailboxCalls.length;
+        for (const query of [
+          '?withChildren=false',
+          '?withChildren=TRUE',
+          '?withChildren=1',
+          '?recursive=true',
+        ]) {
+          const rejected = await remove('u1', query).expect(400);
+          expect(body(rejected).error?.code).toBe('VAL_001');
+        }
+        expect(mailboxCalls).toHaveLength(before);
+      });
+
+      it(
+        '나무를 지우는 동안 나무의 메일함 모두가 처리 중이다 — 하위의 전체 읽음 · 나무 안으로 옮기기는 429 REQ_001, 나무 밖은 된다',
+        async () => {
+          const httpServer = app.getHttpServer();
+          const startedServer = !httpServer.listening;
+          if (startedServer) await listenOnAnyPort(httpServer);
+
+          const gate = createGate();
+          slowMailboxGate = gate.opened;
+          const before = mailboxCalls.length;
+          const first = remove(SLOW_MAILBOX, '?withChildren=true').then(
+            (res) => res,
+          );
+
+          try {
+            await waitUntil(
+              () => mailboxCalls.length > before,
+              GATE_DEADLINE_MS,
+            );
+            for (const [method, path, payload] of [
+              ['patch', `/api/mailboxes/${CHILD}/messages`, { isRead: true }],
+              ['delete', `/api/mailboxes/${CHILD}`, undefined],
+              ['patch', '/api/mailboxes/j', { parentId: CHILD }],
+            ] as const) {
+              const req = request(server)
+                [method](path)
+                .set('Cookie', cookieOf(ME));
+              const busy = await (
+                payload === undefined ? req : req.send(payload)
+              ).expect(429);
+              expect(body(busy).error?.code).toBe('REQ_001');
+            }
+            expect(mailboxCalls).toHaveLength(before + 1);
+
+            // 나무 밖은 된다 · 이름만 바꾸기는 잠그지 않는다(지금처럼)
+            await request(server)
+              .patch('/api/mailboxes/a/messages')
+              .set('Cookie', cookieOf(ME))
+              .send({ isRead: true })
+              .expect(200);
+            await request(server)
+              .patch(`/api/mailboxes/${CHILD}`)
+              .set('Cookie', cookieOf(ME))
+              .send({ name: '새 이름' })
+              .expect(200);
+          } finally {
+            gate.open();
+            slowMailboxGate = null;
+            await Promise.allSettled([first]);
+            if (startedServer) await closeServer(httpServer);
+          }
+          expect((await first).status).toBe(200);
+        },
+        GATED_TEST_TIMEOUT_MS,
+      );
+    });
+
+    describe('차단할 때 받은편지함 정리 (POST /api/mail-block-runs)', () => {
+      const ME = 'blockrun.me@e2e.arasystem.test';
+      const SENDER = 'kim@spam.e2e.example';
+      const run = (payload: object) =>
+        request(server)
+          .post('/api/mail-block-runs')
+          .set('Cookie', cookieOf(ME))
+          .send(payload);
+
+      beforeAll(() => {
+        mailBlocks.set(ME, [
+          { address: SENDER, blockedAt: '2026-11-09T01:00:00.000Z' },
+          {
+            address: '@spam.e2e.example',
+            blockedAt: '2026-11-09T01:00:00.000Z',
+          },
+        ]);
+      });
+
+      it('200 { scanned, matched, remaining, cursor } — cursor 로 이어 하고 null 이면 끝 (차례 수는 응답에 없다)', async () => {
+        const first = await run({ sender: SENDER, cursor: null }).expect(200);
+        expect(body(first)).toEqual({
+          success: true,
+          data: {
+            scanned: 500,
+            matched: 7,
+            remaining: 40,
+            cursor: 'e2eblockcursor',
+          },
+        });
+        expect(blockRuns.at(-1)).toEqual({
+          user: ME,
+          request: { sender: SENDER, cursor: null },
+        });
+
+        const second = await run({
+          sender: '@SPAM.e2e.example',
+          cursor: 'e2eblockcursor',
+        }).expect(200);
+        expect(dataOf<{ cursor: string | null }>(second).cursor).toBeNull();
+        // 차단 목록의 모양(소문자)으로 넘긴다
+        expect(blockRuns.at(-1)?.request.sender).toBe('@spam.e2e.example');
+      });
+
+      it('차단 목록에 없으면 404 RES_001 · 형식 · cursor 키 없음 · 모르는 필드는 400 VAL_001 · 어댑터의 다른 보낸 사람 cursor 도 400 — 받은편지함을 읽지 않는다', async () => {
+        const before = blockRuns.length;
+        const missing = await run({
+          sender: 'lee@spam.e2e.example',
+          cursor: null,
+        }).expect(404);
+        expect(body(missing).error?.code).toBe('RES_001');
+
+        for (const payload of [
+          { sender: SENDER },
+          { sender: 'not an address', cursor: null },
+          { sender: SENDER, cursor: 7 },
+          { sender: SENDER, cursor: 'a b' },
+          { sender: SENDER, cursor: null, mailboxId: 'a' },
+        ]) {
+          const rejected = await run(payload).expect(400);
+          expect(body(rejected).error?.code).toBe('VAL_001');
+        }
+        expect(blockRuns).toHaveLength(before);
+
+        const other = await run({
+          sender: SENDER,
+          cursor: OTHER_RULE_CURSOR,
+        }).expect(400);
+        expect(body(other).error?.code).toBe('VAL_001');
+      });
+
+      it(
+        '같은 직원의 받은편지함 정리(필터 적용 · 차단 정리)는 한 번에 하나 — 진행 중이면 서로 429 REQ_001',
+        async () => {
+          const httpServer = app.getHttpServer();
+          const startedServer = !httpServer.listening;
+          if (startedServer) await listenOnAnyPort(httpServer);
+
+          const gate = createGate();
+          slowFilterRunGate = gate.opened;
+          const before = blockRuns.length;
+          const first = run({ sender: SENDER, cursor: null }).then(
+            (res) => res,
+          );
+          try {
+            await waitUntil(() => blockRuns.length > before, GATE_DEADLINE_MS);
+            const again = await run({ sender: SENDER, cursor: null }).expect(
+              429,
+            );
+            expect(body(again).error?.code).toBe('REQ_001');
+            const filter = await request(server)
+              .post('/api/mail-filter-runs')
+              .set('Cookie', cookieOf(ME))
+              .send({
+                match: 'always',
+                conditions: [],
+                actions: {
+                  moveToMailboxId: null,
+                  markAsRead: true,
+                  flag: false,
+                },
+                cursor: null,
+              })
+              .expect(429);
+            expect(body(filter).error?.code).toBe('REQ_001');
+            // 차단 정리가 도는 동안 그 직원의 스팸메일함(c)도 잡혀 있다 — 비우기는 429 (엔진에 묻지 않는다)
+            const emptyCalls = mailboxCalls.length;
+            const empty = await request(server)
+              .delete('/api/mailboxes/c/messages')
+              .set('Cookie', cookieOf(ME))
+              .expect(429);
+            expect(body(empty).error?.code).toBe('REQ_001');
+            expect(mailboxCalls).toHaveLength(emptyCalls);
+          } finally {
+            gate.open();
+            slowFilterRunGate = null;
+            await Promise.allSettled([first]);
+            if (startedServer) await closeServer(httpServer);
+          }
+          expect((await first).status).toBe(200);
+        },
+        GATED_TEST_TIMEOUT_MS,
+      );
+    });
+
+    describe('예약 메일 지금 보내기 (POST /api/scheduled-messages/{id}/release)', () => {
+      const ME = 'release.me@e2e.arasystem.test';
+      const release = (id: string) =>
+        request(server)
+          .post(`/api/scheduled-messages/${id}/release`)
+          .set('Cookie', cookieOf(ME));
+
+      it('200 — 발송 응답과 같은 칸 { id, rejectedRecipients, pendingSend }, 보내기 취소 설정 초만큼 붙잡게 넘긴다(0초면 null)', async () => {
+        const res = await release('escheduled1').expect(200);
+        expect(body(res)).toEqual({
+          success: true,
+          data: {
+            id: 'escheduled1',
+            rejectedRecipients: [],
+            pendingSend: {
+              kind: 'undo',
+              sendAt: expect.any(String) as string,
+            },
+          },
+        });
+        expect(releases.at(-1)).toEqual({
+          user: ME,
+          id: 'escheduled1',
+          hold: { kind: 'undo', seconds: 10 },
+        });
+
+        await patchSettings(ME, { undoSendSeconds: 0 }).expect(200);
+        const now = await release('escheduled2').expect(200);
+        expect(
+          dataOf<{ pendingSend: PendingSend | null }>(now).pendingSend,
+        ).toBeNull();
+        expect(releases.at(-1)?.hold).toBeNull();
+        await patchSettings(ME, { undoSendSeconds: 10 }).expect(200);
+      });
+
+      it('이미 보낸 메일은 오류가 아니다 — 200 pendingSend: null', async () => {
+        const res = await release(ALREADY_RELEASED_MESSAGE).expect(200);
+        expect(body(res)).toEqual({
+          success: true,
+          data: {
+            id: ALREADY_RELEASED_MESSAGE,
+            rejectedRecipients: [],
+            pendingSend: null,
+          },
+        });
+      });
+
+      it('예약이 아닌 메일 · 형식이 틀린 id 는 404 RES_001 · 받는 사람이 모두 받지 않으면 400 MAIL_010 (임시보관함으로 되돌렸다)', async () => {
+        const gone = await release(GONE_MESSAGE).expect(404);
+        expect(body(gone).error?.code).toBe('RES_001');
+
+        const before = releases.length;
+        const malformed = await release('a"b').expect(404);
+        expect(body(malformed).error?.code).toBe('RES_001');
+        expect(releases).toHaveLength(before);
+
+        const rejected = await release(RELEASE_REJECTED_MESSAGE).expect(400);
+        expect(body(rejected).error?.code).toBe('MAIL_010');
+      });
+
+      it(
+        '같은 메일의 지금 보내기 · 예약 취소는 한 번에 하나 — 진행 중이면 429 REQ_001, 다른 메일은 된다',
+        async () => {
+          const httpServer = app.getHttpServer();
+          const startedServer = !httpServer.listening;
+          if (startedServer) await listenOnAnyPort(httpServer);
+
+          const gate = createGate();
+          slowReleaseGate = gate.opened;
+          const before = releases.length;
+          const first = release('eslowrelease').then((res) => res);
+          try {
+            await waitUntil(() => releases.length > before, GATE_DEADLINE_MS);
+            const again = await release('eslowrelease').expect(429);
+            expect(body(again).error?.code).toBe('REQ_001');
+            const cancel = await request(server)
+              .delete('/api/scheduled-messages/eslowrelease')
+              .set('Cookie', cookieOf(ME))
+              .expect(429);
+            expect(body(cancel).error?.code).toBe('REQ_001');
+            // 다른 메일의 취소는 된다
+            await request(server)
+              .delete('/api/scheduled-messages/eotherheld')
+              .set('Cookie', cookieOf(ME))
+              .expect(200);
+          } finally {
+            gate.open();
+            slowReleaseGate = null;
+            await Promise.allSettled([first]);
+            if (startedServer) await closeServer(httpServer);
+          }
+          expect((await first).status).toBe(200);
+        },
+        GATED_TEST_TIMEOUT_MS,
+      );
+    });
+  });
+
   describe('출처 검사 (상태 변경 요청)', () => {
     const EVIL_ORIGIN = 'https://evil.example';
 
diff --git a/docs/design/webmail/ListDrag15.dc.html b/docs/design/webmail/ListDrag15.dc.html
new file mode 100644
index 0000000..eb24f53
--- /dev/null
+++ b/docs/design/webmail/ListDrag15.dc.html
@@ -0,0 +1,843 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<title>끌어다 놓기 · 스팸메일함으로 옮기기 · 좁은 폭 상단 바</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<style>
+@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
+body{margin:0}
+a{color:#0E7C86}a:hover{color:#0A5F67}
+:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
+.on-dark:focus-visible{outline-color:#9ED6DB}
+.cv-grid{display:grid;grid-template-columns:32px 32px 168px minmax(0,1fr) 84px;column-gap:12px;align-items:center}
+</style>
+</helmet>
+<div style="width: 1440px; height: 3845px; box-sizing: border-box; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5">
+
+  <div style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 6px; max-width: 1200px">
+    <h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">끌어다 놓기 · 스팸메일함으로 옮기기 · 좁은 폭 상단 바</h1>
+    <p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">메일 15단계(메일 · 메일함 다루기)에서 정한 것 가운데 3 · 4 · 9의 화면입니다. 목록에서 고른 메일이나 대화 줄을 메일함 패널로 끌어다 놓아 옮기고, 스팸메일함으로 옮기는 세 길(단추, 메뉴, 끌기)을 같게 맞추고, 휴대폰 폭에서 상단 바의 [로그아웃]이 꺾이지 않게 합니다. 1의 단추로 마우스가 있는 곳을 바꿔 볼 수 있습니다. 초안이며 사용자 확인 전입니다(2026-11-09).</p>
+  </div>
+
+  <section aria-labelledby="sec1-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 32px 48px 16px; display: flex; flex-direction: column; gap: 12px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="sec1-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">1. 분할 보기 (1440) · 고른 메일 3통을 끌어다 놓는 중</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">받은편지함에서 메일 3통을 고른 채 그중 한 줄(박지훈)을 눌러 메일함 패널로 끌고 있습니다. 마우스 오른쪽 아래에 메일 수를 적은 표가 따라옵니다.</p>
+    </div>
+    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px">
+      <span id="over-label" style="font-size: 13.5px; font-weight: 700; color: #344054">마우스가 있는 곳</span>
+      <div role="group" aria-labelledby="over-label" style="display: flex; flex-wrap: wrap; gap: 8px">
+        <sc-for list="{{ overModes }}" as="s" hint-placeholder-count="6">
+          <button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 0 0 auto; min-width: 112px; min-height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
+        </sc-for>
+      </div>
+    </div>
+    <div style="display: flex; flex-direction: column; gap: 1px">
+      <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">{{ overTitle }}</h3>
+      <p style="margin: 0; font-size: 12.5px; color: #667085; word-break: keep-all">{{ overNote }}</p>
+    </div>
+  </section>
+
+  <div id="board-split" role="region" aria-label="{{ splitRegionLabel }}" style="flex: 0 0 auto; height: 724px; box-sizing: border-box; display: flex; background: #FFFFFF; border-top: 1px solid #E6E8EC; border-bottom: 1px solid #E6E8EC; overflow: hidden">
+
+    <nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
+      <a href="#" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
+        <img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
+      </a>
+      <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
+        <li>
+          <a href="#" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+            <span>메일</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+            <span>캘린더</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+            <span>파일</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+            <span>주소록</span>
+          </a>
+        </li>
+      </ul>
+      <a href="#" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+        <span>설정</span>
+      </a>
+    </nav>
+
+    <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+
+      <header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
+        <span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
+        <form role="search" style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; margin: 0; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input type="search" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #171C26">
+          <button type="button" title="조건으로 찾기" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+            <span>조건</span>
+          </button>
+        </form>
+        <div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
+          <span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
+          <div style="display: flex; flex-direction: column; line-height: 1.3">
+            <span style="font-weight: 600">김아라</span>
+            <span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
+          </div>
+          <button type="button" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-weight: 500; cursor: pointer">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+            <span>로그아웃</span>
+          </button>
+        </div>
+      </header>
+
+      <div style="flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch">
+
+        <nav aria-label="메일함" style="flex: 0 0 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
+          <a href="#" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+            <span>메일 쓰기</span>
+          </a>
+          <div style="display: flex; flex-direction: column; gap: 1px">
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+              <sc-for list="{{ sys1 }}" as="b" hint-placeholder-count="6">
+                <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
+                  <a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
+                    <sc-if value="{{ b.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
+                    <sc-if value="{{ b.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
+                    <sc-if value="{{ b.isClock }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></sc-if>
+                    <sc-if value="{{ b.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
+                    <sc-if value="{{ b.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
+                    <sc-if value="{{ b.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
+                    <sc-if value="{{ b.isFolder }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></sc-if>
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
+                    <sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
+                  </a>
+                  <sc-if value="{{ b.pointerHere }}" hint-placeholder-val="{{ false }}">
+                    <span aria-hidden="true" style="position: absolute; left: {{ b.pointerX }}px; top: 13px; z-index: 6; width: 0; height: 0; pointer-events: none">
+                      <sc-if value="{{ b.dropOk }}" hint-placeholder-val="{{ true }}"><svg width="16" height="22" viewBox="0 0 16 22" style="position: absolute; left: -1px; top: -1px; display: block"><path d="M1.5 1.5 L1.5 17.5 L5.4 13.9 L8 20 L10.8 18.8 L8.3 12.9 L13.6 12.9 Z" fill="#FFFFFF" stroke="#171C26" stroke-width="1.3" stroke-linejoin="round"></path></svg></sc-if>
+                      <sc-if value="{{ b.dropNo }}" hint-placeholder-val="{{ false }}"><svg width="24" height="24" viewBox="0 0 24 24" style="position: absolute; left: -12px; top: -12px; display: block"><circle cx="12" cy="12" r="8.5" fill="none" stroke="#FFFFFF" stroke-width="5"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#FFFFFF" stroke-width="5"></line><circle cx="12" cy="12" r="8.5" fill="none" stroke="#171C26" stroke-width="2.4"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#171C26" stroke-width="2.4"></line></svg></sc-if>
+                      <span style="position: absolute; left: 16px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #0B3640; color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 28, 0.28)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                        <span>{{ chip1 }}</span>
+                      </span>
+                    </span>
+                  </sc-if>
+                </li>
+              </sc-for>
+            </ul>
+            <p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+              <sc-for list="{{ mine1 }}" as="b" hint-placeholder-count="4">
+                <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
+                  <a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
+                    <sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
+                  </a>
+                  <sc-if value="{{ b.pointerHere }}" hint-placeholder-val="{{ false }}">
+                    <span aria-hidden="true" style="position: absolute; left: {{ b.pointerX }}px; top: 13px; z-index: 6; width: 0; height: 0; pointer-events: none">
+                      <sc-if value="{{ b.dropOk }}" hint-placeholder-val="{{ true }}"><svg width="16" height="22" viewBox="0 0 16 22" style="position: absolute; left: -1px; top: -1px; display: block"><path d="M1.5 1.5 L1.5 17.5 L5.4 13.9 L8 20 L10.8 18.8 L8.3 12.9 L13.6 12.9 Z" fill="#FFFFFF" stroke="#171C26" stroke-width="1.3" stroke-linejoin="round"></path></svg></sc-if>
+                      <sc-if value="{{ b.dropNo }}" hint-placeholder-val="{{ false }}"><svg width="24" height="24" viewBox="0 0 24 24" style="position: absolute; left: -12px; top: -12px; display: block"><circle cx="12" cy="12" r="8.5" fill="none" stroke="#FFFFFF" stroke-width="5"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#FFFFFF" stroke-width="5"></line><circle cx="12" cy="12" r="8.5" fill="none" stroke="#171C26" stroke-width="2.4"></circle><line x1="6" y1="6" x2="18" y2="18" stroke="#171C26" stroke-width="2.4"></line></svg></sc-if>
+                      <span style="position: absolute; left: 16px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #0B3640; color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 28, 0.28)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                        <span>{{ chip1 }}</span>
+                      </span>
+                    </span>
+                  </sc-if>
+                </li>
+              </sc-for>
+            </ul>
+            <span style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; padding: 0 10px; border-radius: 7px; color: #344054; font-weight: 500">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <span>새 메일함</span>
+            </span>
+          </div>
+          <div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
+            <div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
+              <span>메일함 사용량</span>
+              <span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
+            </div>
+            <div style="height: 4px; border-radius: 2px; background: #E4E7EC">
+              <div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
+            </div>
+          </div>
+        </nav>
+
+        <section aria-labelledby="split-count" style="flex: 0 0 384px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; border-right: 1px solid #E6E8EC">
+          <div style="display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 12px; border-bottom: 1px solid #E6E8EC; background: #F3F8F8">
+            <h2 id="split-count" style="flex: 0 0 auto; margin: 0 4px 0 0; font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums">3통 선택됨</h2>
+            <div role="toolbar" aria-label="고른 메일" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center">
+              <button type="button" aria-label="읽음 표시" title="읽음 표시" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"></path><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"></path></svg></button>
+              <button type="button" aria-label="안 읽음 표시" title="안 읽음 표시" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></button>
+              <button type="button" aria-label="중요 표시" title="중요 표시" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></button>
+              <button type="button" aria-label="이동" title="이동" aria-haspopup="menu" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg></button>
+              <button type="button" aria-label="스팸 신고" title="스팸 신고" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></button>
+              <button type="button" aria-label="삭제" title="삭제" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #B42318; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+              <button type="button" aria-label="선택 해제" title="선택 해제 (Esc)" style="margin-left: auto; width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+            </div>
+          </div>
+          <ul aria-label="받은편지함 메일 목록" style="list-style: none; margin: 0; padding: 0">
+            <sc-for list="{{ items1 }}" as="r" hint-placeholder-count="10">
+              <li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: {{ r.bg }}">
+                <button type="button" role="checkbox" aria-checked="{{ r.checkedStr }}" aria-label="{{ r.pickLabel }}" style="flex: 0 0 auto; width: 36px; display: flex; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: transparent; cursor: pointer">
+                  <sc-if value="{{ r.checked }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="0.25" y="0.25" width="15.5" height="15.5" rx="4" fill="#0E7C86"></rect><polyline points="4.2 8.3 6.9 10.8 11.8 5.4" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg></sc-if>
+                  <sc-if value="{{ r.notChecked }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#FFFFFF" stroke="#8A94A3" stroke-width="1.5"></rect></svg></sc-if>
+                </button>
+                <a href="#" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 10px; line-height: 1.4; color: inherit; text-decoration: none">
+                  <span style="display: flex; align-items: center; gap: 6px">
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ r.whoFw }}; color: {{ r.whoColor }}">{{ r.who }}</span>
+                    <span style="flex: 0 0 auto; font-size: 12px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
+                  </span>
+                  <span style="display: flex; align-items: center; gap: 6px; min-width: 0">
+                    <span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ r.subFw }}; color: #171C26">{{ r.subject }}</span>
+                    <sc-if value="{{ r.hasAtt }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></sc-if>
+                  </span>
+                </a>
+                <button type="button" aria-label="중요 표시" aria-pressed="{{ r.starredStr }}" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: {{ r.starColor }}; cursor: pointer">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="{{ r.starFill }}" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                </button>
+              </li>
+            </sc-for>
+          </ul>
+        </section>
+
+        <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+          <div style="border-bottom: 1px solid #E6E8EC">
+            <div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; max-width: 800px; box-sizing: border-box; padding: 4px 32px 4px 22px">
+              <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>
+                <span>답장</span>
+              </span>
+              <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg>
+                <span>전체 답장</span>
+              </span>
+              <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
+                <span>전달</span>
+              </span>
+              <span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
+              <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 8px 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg>
+                <span>이동</span>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
+              </span>
+              <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #344054; font-weight: 500">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                <span>스팸 신고</span>
+              </span>
+              <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; color: #B42318; font-weight: 500">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+                <span>삭제</span>
+              </span>
+              <span aria-label="더 보기" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #344054"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></span>
+            </div>
+          </div>
+          <article aria-labelledby="split-subject" style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px">
+            <div style="display: flex; align-items: flex-start; gap: 8px">
+              <h3 id="split-subject" style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">Re: 유지보수 계약 갱신 건</h3>
+              <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+            </div>
+            <div style="display: flex; align-items: flex-start; gap: 12px">
+              <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">이</span>
+              <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
+                <div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
+                  <span style="font-size: 13.5px; font-weight: 600">이도윤</span>
+                  <span style="font-size: 12.5px; color: #667085">doyun.lee@arasystem.it.kr</span>
+                  <span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">2026. 11. 9. (월) 오전 10:42</span>
+                </div>
+                <span style="font-size: 12.5px; color: #4A5363">받는 사람  김아라 &lt;ara.kim@arasystem.it.kr&gt;</span>
+              </div>
+            </div>
+            <div style="font-size: 14px; line-height: 1.75; color: #1F2733; max-width: 680px">
+              <p style="margin: 0">김아라님, 안녕하세요.</p>
+              <p style="margin: 14px 0 0">말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.<br>기간은 1년이고, 단가는 작년과 같습니다.</p>
+              <p style="margin: 14px 0 0">이도윤 드림</p>
+            </div>
+            <section aria-labelledby="split-att" style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
+              <h4 id="split-att" style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">첨부 파일 1개</h4>
+              <div style="display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
+                <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
+                <span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
+                  <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">유지보수_계약서_초안.docx</span>
+                  <span style="font-size: 12px; color: #667085">64 KB</span>
+                </span>
+                <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #344054"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></span>
+              </div>
+            </section>
+          </article>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <p style="flex: 0 0 auto; margin: 0; padding: 12px 48px 0; font-size: 12.5px; color: #667085; word-break: keep-all">고르지 않은 줄을 끌면 그 줄만 옮기고, 고른 메일은 그대로 둡니다. 보내기를 기다리는 메일의 줄은 끌 수 없습니다. 읽기 화면 도구 줄의 [이동 ▾]는 정한 것 1의 모습입니다.</p>
+
+  <section aria-labelledby="sec2-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 16px; display: flex; flex-direction: column; gap: 8px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="sec2-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">2. 목록 보기 (1440) · 대화 줄 하나를 끌어다 놓는 중</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">대화로 묶은 받은편지함에서 고르지 않은 줄(박지훈, 나 · 3통)을 끌어 견적 메일함 위에 두었습니다. 따라오는 표에는 대화 수를 적습니다.</p>
+    </div>
+  </section>
+
+  <div id="board-list" role="region" aria-label="화면: 목록 보기, 대화로 묶은 받은편지함에서 대화 줄을 견적 메일함으로 끌어다 놓는 중" style="flex: 0 0 auto; height: 680px; box-sizing: border-box; display: flex; background: #FFFFFF; border-top: 1px solid #E6E8EC; border-bottom: 1px solid #E6E8EC; overflow: hidden">
+
+    <nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
+      <a href="#" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
+        <img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
+      </a>
+      <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
+        <li>
+          <a href="#" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+            <span>메일</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+            <span>캘린더</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+            <span>파일</span>
+          </a>
+        </li>
+        <li>
+          <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+            <span>주소록</span>
+          </a>
+        </li>
+      </ul>
+      <a href="#" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+        <span>설정</span>
+      </a>
+    </nav>
+
+    <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+
+      <header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
+        <span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
+        <form role="search" style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; margin: 0; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input type="search" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #171C26">
+          <button type="button" title="조건으로 찾기" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+            <span>조건</span>
+          </button>
+        </form>
+        <div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
+          <span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
+          <div style="display: flex; flex-direction: column; line-height: 1.3">
+            <span style="font-weight: 600">김아라</span>
+            <span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
+          </div>
+          <button type="button" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #4A5363; font: inherit; font-weight: 500; cursor: pointer">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+            <span>로그아웃</span>
+          </button>
+        </div>
+      </header>
+
+      <div style="flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch">
+
+        <nav aria-label="메일함" style="flex: 0 0 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
+          <a href="#" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+            <span>메일 쓰기</span>
+          </a>
+          <div style="display: flex; flex-direction: column; gap: 1px">
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+              <sc-for list="{{ sys2 }}" as="b" hint-placeholder-count="6">
+                <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
+                  <a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
+                    <sc-if value="{{ b.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
+                    <sc-if value="{{ b.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
+                    <sc-if value="{{ b.isClock }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></sc-if>
+                    <sc-if value="{{ b.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
+                    <sc-if value="{{ b.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
+                    <sc-if value="{{ b.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
+                    <sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
+                  </a>
+                </li>
+              </sc-for>
+            </ul>
+            <p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+              <sc-for list="{{ mine2 }}" as="b" hint-placeholder-count="4">
+                <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ b.bg }}; outline: {{ b.outline }}; outline-offset: -2px">
+                  <a href="#" aria-current="{{ b.current }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 36px 0 {{ b.indent }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
+                    <sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
+                  </a>
+                  <sc-if value="{{ b.pointerHere }}" hint-placeholder-val="{{ false }}">
+                    <span aria-hidden="true" style="position: absolute; left: {{ b.pointerX }}px; top: 13px; z-index: 6; width: 0; height: 0; pointer-events: none">
+                      <svg width="16" height="22" viewBox="0 0 16 22" style="position: absolute; left: -1px; top: -1px; display: block"><path d="M1.5 1.5 L1.5 17.5 L5.4 13.9 L8 20 L10.8 18.8 L8.3 12.9 L13.6 12.9 Z" fill="#FFFFFF" stroke="#171C26" stroke-width="1.3" stroke-linejoin="round"></path></svg>
+                      <span style="position: absolute; left: 16px; top: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; background: #0B3640; color: #FFFFFF; font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 28, 0.28)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                        <span>{{ chip2 }}</span>
+                      </span>
+                    </span>
+                  </sc-if>
+                </li>
+              </sc-for>
+            </ul>
+            <span style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; padding: 0 10px; border-radius: 7px; color: #344054; font-weight: 500">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <span>새 메일함</span>
+            </span>
+          </div>
+          <div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
+            <div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
+              <span>메일함 사용량</span>
+              <span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
+            </div>
+            <div style="height: 4px; border-radius: 2px; background: #E4E7EC">
+              <div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
+            </div>
+          </div>
+        </nav>
+
+        <section aria-labelledby="list-title" style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+          <div style="display: flex; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box; padding: 4px 8px 4px 20px; border-bottom: 1px solid #E6E8EC">
+            <div style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px">
+              <h2 id="list-title" style="margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap">받은편지함</h2>
+              <span style="font-size: 12px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">대화 7개, 안 읽은 메일 2통</span>
+            </div>
+            <div style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px">
+              <button type="button" aria-pressed="true" style="display: inline-flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid #D0D5DD; border-radius: 8px; background: #E3F2F3; color: #0A5F67; font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                <span>대화로 묶기</span>
+              </button>
+              <div role="group" aria-label="보기 방식" style="display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
+                <span style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: #344054; font-size: 12px; font-weight: 500">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" ry="2"></rect><line x1="10" y1="4" x2="10" y2="20"></line></svg>
+                  <span>분할</span>
+                </span>
+                <span style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font-size: 12px; font-weight: 600">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"></line><line x1="9" y1="12" x2="20" y2="12"></line><line x1="9" y1="18" x2="20" y2="18"></line><line x1="4" y1="6" x2="4.01" y2="6"></line><line x1="4" y1="12" x2="4.01" y2="12"></line><line x1="4" y1="18" x2="4.01" y2="18"></line></svg>
+                  <span>목록</span>
+                </span>
+              </div>
+              <span aria-label="새로고침" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #4A5363">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+              </span>
+            </div>
+          </div>
+          <div aria-hidden="true" class="cv-grid" style="height: 32px; box-sizing: border-box; padding: 0 8px 0 20px; background: #FBFBFC; border-bottom: 1px solid #E6E8EC; font-size: 12px; font-weight: 600; color: #667085">
+            <span style="display: flex; align-items: center"><svg width="16" height="16" viewBox="0 0 16 16"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#FFFFFF" stroke="#8A94A3" stroke-width="1.5"></rect></svg></span>
+            <span style="display: flex; align-items: center"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+            <span>참여자</span>
+            <span>제목</span>
+            <span style="text-align: right">날짜</span>
+          </div>
+          <ul aria-label="받은편지함 대화 목록" style="list-style: none; margin: 0; padding: 0">
+            <sc-for list="{{ convRows }}" as="c" hint-placeholder-count="7">
+              <li class="cv-grid" style="height: 38px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #EEF0F3; background: {{ c.bg }}">
+                <span style="display: flex; align-items: center"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="3.5" fill="#FFFFFF" stroke="#8A94A3" stroke-width="1.5"></rect></svg></span>
+                <span style="display: flex; align-items: center; color: {{ c.starColor }}"><svg width="14" height="14" viewBox="0 0 24 24" fill="{{ c.starFill }}" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+                <span style="min-width: 0; display: flex; align-items: center; gap: 6px">
+                  <span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ c.fw }}; color: {{ c.whoColor }}">{{ c.who }}</span>
+                  <sc-if value="{{ c.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 500; color: #667085; font-variant-numeric: tabular-nums">{{ c.count }}</span></sc-if>
+                </span>
+                <span style="min-width: 0; display: flex; align-items: center; gap: 6px">
+                  <span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ c.fw }}; color: #171C26">{{ c.subject }}</span>
+                  <sc-if value="{{ c.hasAtt }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></sc-if>
+                </span>
+                <span style="text-align: right; white-space: nowrap; font-size: 12px; font-weight: {{ c.dateFw }}; color: {{ c.dateColor }}; font-variant-numeric: tabular-nums">{{ c.date }}</span>
+              </li>
+            </sc-for>
+          </ul>
+          <div style="display: flex; justify-content: center; padding: 10px 20px 20px">
+            <span style="display: inline-flex; align-items: center; min-height: 40px; padding: 0 24px; border-radius: 8px; color: #0E7C86; font-weight: 600">메일 더 보기</span>
+          </div>
+        </section>
+
+      </div>
+    </div>
+  </div>
+  <p style="flex: 0 0 auto; margin: 0; padding: 12px 48px 0; font-size: 12.5px; color: #667085; word-break: keep-all">대화 줄을 끌면 그 대화에서 지금 메일함(받은편지함)에 있는 메일만 옮깁니다. [이동 ▾]와 같이 보내기를 기다리는 메일은 빼고, 놓은 뒤 알림은 3e입니다.</p>
+
+  <section aria-labelledby="sec3-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 16px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="sec3-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">3. 놓은 뒤 알림</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">메뉴로 옮길 때와 같은 알림이고, 화면 오른쪽 아래에 뜹니다. [되돌리기]가 있는 알림은 10초 동안 남습니다.</p>
+    </div>
+    <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch">
+
+      <sc-for list="{{ toasts }}" as="t" hint-placeholder-count="5">
+        <section style="grid-column: {{ t.span }}; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 18px 16px 18px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+          <div style="display: flex; flex-direction: column; gap: 2px">
+            <h3 style="margin: 0; font-size: 14px; font-weight: 700; word-break: keep-all">{{ t.title }}</h3>
+            <p style="margin: 0; font-size: 12.5px; color: #667085; word-break: keep-all">{{ t.note }}</p>
+          </div>
+          <div role="status" style="width: 100%; max-width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            <span style="flex: 1 1 auto; min-width: 0; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere">{{ t.text }}</span>
+            <button type="button" class="on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #9ED6DB; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
+          </div>
+        </section>
+      </sc-for>
+
+    </div>
+    <p style="margin: 0; font-size: 12.5px; color: #667085; word-break: keep-all">끌어다 놓기는 마우스로만 합니다. 키보드와 터치 화면에서는 지금처럼 [이동 ▾]로 옮기고, 옮길 곳과 알림은 같습니다.</p>
+  </section>
+
+  <section aria-labelledby="sec4-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 16px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="sec4-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">4. 상단 바 · 휴대폰 폭 360 (2배로 확대)</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363; word-break: keep-all">레일 72와 상단 바만 잘라 2배로 키웠습니다. 바 안쪽 폭은 256입니다(360에서 레일 72와 바의 좌우 여백 32를 뺀 폭). 넓은 화면은 달라지지 않습니다.</p>
+    </div>
+
+    <div style="display: flex; align-items: flex-start; gap: 32px">
+      <div style="flex: 0 0 auto; width: 720px; height: 400px; box-sizing: content-box; overflow: hidden; border: 1px solid #D0D5DD; border-radius: 12px; background: #FFFFFF">
+        <div style="width: 360px; height: 200px; transform: scale(2); transform-origin: 0 0; display: flex; overflow: hidden; background: #FFFFFF">
+          <div style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="48" height="17" style="display: block; width: 48px; height: auto"></span>
+            <span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+              <span>메일</span>
+            </span>
+            <span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+              <span>캘린더</span>
+            </span>
+          </div>
+          <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+            <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC; background: #FFFFFF">
+              <span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
+              <div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: #757D8A">메일 검색</span>
+                <span style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 6px; color: #4A5363; font-size: 12.5px; font-weight: 600">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  <span>조건</span>
+                </span>
+              </div>
+              <div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
+                <span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
+                <div style="display: flex; flex-direction: column; line-height: 1.3">
+                  <span style="font-weight: 600">김아라</span>
+                  <span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
+                </div>
+                <span style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  <span>로그아웃</span>
+                </span>
+              </div>
+            </div>
+            <div style="flex: 1 1 auto; box-sizing: border-box; padding: 14px 10px; background: #F8F9FB">
+              <span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+                <span>메일 쓰기</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px">
+        <h3 style="margin: 0; font-size: 15px; font-weight: 700; color: #B42318">4a. 지금</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
+          <li>검색 칸(기본 폭 280)이 둘째 줄로, 계정 칸이 셋째 줄로 내려갑니다.</li>
+          <li>계정 칸은 아바타 32, 이름과 주소, [로그아웃] 순서입니다. 주소는 줄지 않아 [로그아웃]만 줄어들고 글자가 두 줄로 꺾입니다.</li>
+          <li>주소가 더 긴 직원은 [로그아웃]이 한 글자씩 꺾여 셋째 줄이 더 높아집니다.</li>
+        </ul>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: flex-start; gap: 32px">
+      <div style="flex: 0 0 auto; width: 720px; height: 400px; box-sizing: content-box; overflow: hidden; border: 1px solid #D0D5DD; border-radius: 12px; background: #FFFFFF">
+        <div style="width: 360px; height: 200px; transform: scale(2); transform-origin: 0 0; display: flex; overflow: hidden; background: #FFFFFF">
+          <div style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="48" height="17" style="display: block; width: 48px; height: auto"></span>
+            <span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+              <span>메일</span>
+            </span>
+            <span style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+              <span>캘린더</span>
+            </span>
+          </div>
+          <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+            <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC; background: #FFFFFF">
+              <span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
+              <div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: #757D8A">메일 검색</span>
+                <span style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border-radius: 6px; color: #4A5363; font-size: 12.5px; font-weight: 600">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                  <span>조건</span>
+                </span>
+              </div>
+              <div style="margin-left: auto; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 10px">
+                <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-weight: 600">김</span>
+                <div style="min-width: 0; display: flex; flex-direction: column; line-height: 1.3">
+                  <span title="김아라 (ara.kim@arasystem.it.kr)" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">김아라</span>
+                </div>
+                <span style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; white-space: nowrap">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                  <span>로그아웃</span>
+                </span>
+              </div>
+            </div>
+            <div style="flex: 1 1 auto; box-sizing: border-box; padding: 14px 10px; background: #F8F9FB">
+              <span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+                <span>메일 쓰기</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4px">
+        <h3 style="margin: 0; font-size: 15px; font-weight: 700; color: #0A5F67">4b. 고친 뒤</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
+          <li>[로그아웃]은 줄지도 꺾이지도 않습니다. 늘 한 줄입니다.</li>
+          <li>화면 폭이 480 이하면 주소를 감추고 이름만 둡니다.</li>
+          <li>이름이나 주소가 아주 길어 넘치면 끝을 "…"로 줄이고, 마우스를 올리면 다 보입니다.</li>
+          <li>줄 수와 차례(메일, 검색 칸, 계정)는 지금과 같습니다.</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <div style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
+
+    <section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+      <h2 style="margin: 0; font-size: 14px; font-weight: 700">정한 것 · 끌 수 있는 것과 놓을 곳</h2>
+      <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
+        <li>고른 줄을 끌면 고른 메일을 모두, 고르지 않은 줄을 끌면 그 줄만 옮깁니다. 고른 것은 그대로 둡니다.</li>
+        <li>대화로 묶은 목록의 줄은 그 대화에서 지금 메일함에 있는 메일을 옮깁니다. 보내기를 기다리는 메일은 빼고([이동 ▾]와 같다), 그런 메일뿐인 줄은 끌 수 없습니다.</li>
+        <li>놓을 곳은 [이동 ▾]의 옮길 곳에 휴지통을 더한 곳입니다. 지금 메일함, 임시보관함, 예약됨에는 놓을 수 없습니다.</li>
+        <li>휴지통에 놓으면 [삭제], 스팸메일함에 놓으면 [스팸 신고]와 같고, 그 밖은 [이동 ▾]와 같습니다. 알림과 [되돌리기]도 같습니다.</li>
+      </ul>
+    </section>
+
+    <section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+      <h2 style="margin: 0; font-size: 14px; font-weight: 700">끌어다 놓는 동안의 모양</h2>
+      <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
+        <li>마우스를 따라오는 표는 커서 오른쪽 아래에 붙습니다. "메일 N통" 또는 "대화 N개"이고, 알림과 같은 어두운 바탕(#0B3640)에 12.5px 굵은 흰 글자, 봉투나 말풍선 아이콘입니다.</li>
+        <li>놓을 수 있는 메일함 위에서는 그 줄에 2px 청록 점선과 옅은 청록 바탕이 생깁니다. 쓰기 화면에 파일을 끌어다 놓을 때와 같은 모양이라 초점 선(실선)과 헷갈리지 않습니다.</li>
+        <li>놓을 수 없는 곳 위에서는 줄이 그대로이고 마우스 커서만 금지 모양(⊘)이 됩니다. 메일함 줄마다 금지 표시를 그리지 않습니다.</li>
+        <li>끌기 시작한 줄은 흐리게 하지 않습니다. 고른 줄은 고른 바탕 그대로입니다.</li>
+      </ul>
+    </section>
+
+    <section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+      <h2 style="margin: 0; font-size: 14px; font-weight: 700">정한 것 · 스팸메일함으로 옮기는 길</h2>
+      <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
+        <li>[스팸 신고], [이동 ▾]에서 스팸메일함 고르기, 스팸메일함에 끌어다 놓기는 모두 스팸 표시를 붙여 옮깁니다(3c). 지금은 [이동 ▾]만 표시 없이 옮깁니다.</li>
+        <li>스팸메일함에서 휴지통이 아닌 메일함으로 옮기면(메뉴, 끌기) [스팸 아님]과 같이 스팸 아님 표시를 붙입니다(3d). 휴지통으로 옮길 때는 표시를 바꾸지 않습니다.</li>
+        <li>[되돌리기]는 원래 메일함으로 옮기며 표시도 되돌립니다. 지금의 [스팸 신고], [스팸 아님]과 같습니다.</li>
+      </ul>
+    </section>
+
+    <section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+      <h2 style="margin: 0; font-size: 14px; font-weight: 700">구현 때 맞출 것</h2>
+      <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054; word-break: keep-all">
+        <li>HTML5 끌어다 놓기로 만들고, 따라오는 표는 setDragImage 로 붙입니다. 놓을 수 없는 곳에서는 dropEffect 를 none 으로 두어 브라우저가 금지 커서를 보입니다. 커서 모양과 따라오는 표의 투명도는 운영체제와 브라우저마다 조금 다릅니다.</li>
+        <li>목록 줄은 링크라 지금도 끌면 그 메일 화면의 주소(URL)가 끌려 나갑니다. 우리 끌기 자료로 바꾸고, 다른 창이나 바깥 프로그램에 놓아도 아무 일도 일어나지 않게 합니다.</li>
+        <li>메일함 패널은 쓰기 화면에도 보이므로 파일 끌기는 받지 않습니다(첨부 놓기와 겹치지 않게). 메일 화면에 파일을 잘못 놓으면 지금은 브라우저가 그 파일을 열어 웹메일을 떠나는데, 앞으로는 무시합니다.</li>
+        <li>패널의 메일함이 많아 아래가 가려져 있으면 패널 끝에서 저절로 스크롤되는지 확인합니다.</li>
+        <li>상단 바는 아바타와 [로그아웃]을 줄지 않게 하고 이름 칸만 줄게 합니다. 480 이하에서 주소를 감추는 것은 tokens.css 의 화면 폭 기준에 한 줄을 더합니다.</li>
+      </ul>
+    </section>
+
+  </div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":3845}}'>
+class Component extends DCLogic {
+  state = { over: null };
+
+  // 상태 고르기 단추 — 다른 보드(SettingsMobileApp)와 같은 모양
+  modes(list, current, choose) {
+    return list.map((x) => {
+      const on = x.id === current;
+      return {
+        label: x.label,
+        pressed: on ? 'true' : 'false',
+        pick: () => choose(x.id),
+        bg: on ? '#E3F2F3' : '#FFFFFF',
+        fg: on ? '#0A5F67' : '#344054',
+        border: on ? '#0E7C86' : '#D0D5DD',
+      };
+    });
+  }
+
+  // 메일함 패널 — target 은 마우스가 있는 메일함. 지금 메일함(받은편지함) · 임시보관함 · 예약됨에는 놓을 수 없다
+  panel(target) {
+    const SYSTEM = [
+      { id: 'inbox', name: '받은편지함', icon: 'inbox', count: '2' },
+      { id: 'sent', name: '보낸편지함', icon: 'sent' },
+      { id: 'scheduled', name: '예약됨', icon: 'clock', count: '1' },
+      { id: 'drafts', name: '임시보관함', icon: 'drafts' },
+      { id: 'junk', name: '스팸메일함', icon: 'junk' },
+      { id: 'trash', name: '휴지통', icon: 'trash' },
+    ];
+    const MINE = [
+      { id: 'clients', name: '거래처', icon: 'folder', count: '1' },
+      { id: 'project', name: '프로젝트', icon: 'folder', count: '2' },
+      { id: 'quotes', name: '견적', icon: 'folder', depth: 1 },
+      { id: 'partners', name: '협력사', icon: 'folder' },
+    ];
+    const BLOCKED = ['inbox', 'drafts', 'scheduled'];
+    const row = (b) => {
+      const current = b.id === 'inbox';
+      const here = b.id === target;
+      const ok = here && BLOCKED.indexOf(b.id) < 0;
+      const strong = current || ok;
+      const indent = b.depth ? 28 : 10;
+      return {
+        name: b.name,
+        isInbox: b.icon === 'inbox',
+        isSent: b.icon === 'sent',
+        isClock: b.icon === 'clock',
+        isDrafts: b.icon === 'drafts',
+        isJunk: b.icon === 'junk',
+        isTrash: b.icon === 'trash',
+        isFolder: b.icon === 'folder',
+        hasCount: !!b.count,
+        count: b.count || '',
+        indent: indent,
+        current: current ? 'page' : 'false',
+        bg: ok ? '#F3F8F8' : current ? '#E3F2F3' : 'transparent',
+        outline: ok ? '2px dashed #0E7C86' : 'none',
+        fg: strong ? '#0A5F67' : '#344054',
+        fw: strong ? '600' : '500',
+        countColor: strong ? '#0A5F67' : '#171C26',
+        pointerHere: here,
+        dropOk: ok,
+        dropNo: here && !ok,
+        pointerX: indent + 56,
+      };
+    };
+    return { system: SYSTEM.map(row), mine: MINE.map(row) };
+  }
+
+  renderVals() {
+    const st = this.state;
+    const over = st.over ?? 'clients';
+    const OVER = [
+      { id: 'clients', label: '거래처', title: '1a. 거래처 위 · 놓을 수 있음', note: '줄에 청록 점선과 옅은 바탕이 생깁니다. 놓으면 메일 3통을 거래처로 옮기고, 알림에 [되돌리기]를 붙입니다(3a).' },
+      { id: 'trash', label: '휴지통', title: '1b. 휴지통 위 · 놓을 수 있음', note: '[삭제]와 같습니다. 휴지통으로 옮기고, 알림에 [되돌리기]를 붙입니다(3b).' },
+      { id: 'junk', label: '스팸메일함', title: '1c. 스팸메일함 위 · 놓을 수 있음', note: '[스팸 신고]와 같습니다. 스팸 표시를 붙여 옮기고, [되돌리기]는 표시도 되돌립니다(3c).' },
+      { id: 'drafts', label: '임시보관함', title: '1d. 임시보관함 위 · 놓을 수 없음', note: '줄은 밝아지지 않고 마우스 커서만 금지 모양이 됩니다. 여기서 놓으면 아무 일도 일어나지 않습니다.' },
+      { id: 'scheduled', label: '예약됨', title: '1e. 예약됨 위 · 놓을 수 없음', note: '예약한 메일을 모아 보는 곳이라 놓을 수 없습니다. 줄은 그대로이고 커서만 금지 모양입니다.' },
+      { id: 'inbox', label: '받은편지함', title: '1f. 받은편지함 위 · 놓을 수 없음', note: '지금 보고 있는 메일함입니다. 지금 메일함 바탕 그대로이고 커서만 금지 모양입니다.' },
+    ];
+    const cur = OVER.find((x) => x.id === over) || OVER[0];
+    const p1 = this.panel(over);
+    const p2 = this.panel('quotes');
+
+    // 분할 보기 목록 — 고른 줄 셋(박지훈 줄에서 끌기 시작), 연 메일은 맨 위 줄
+    const MAILS = [
+      { who: '이도윤', time: '오전 10:42', subject: 'Re: 유지보수 계약 갱신 건', unread: true, att: true, open: true },
+      { who: '(주)한빛솔루션', time: '오전 9:31', subject: '서버 증설 견적서 송부드립니다', att: true, checked: true },
+      { who: '인사팀', time: '오전 9:05', subject: '[공지] 계약직 채용 일정 안내', unread: true },
+      { who: '박지훈', time: '어제', subject: 'Re: 견적 조건 문의드립니다', checked: true, grabbed: true },
+      { who: '박준호', time: '어제', subject: '11월 인프라 점검 일정 조율' },
+      { who: '(주)한빛솔루션', time: '11월 6일', subject: '유지보수 계약 갱신 안내', checked: true },
+      { who: '정하늘', time: '11월 6일', subject: 'Re: 신규 입사자 교육 회의록' },
+      { who: '최서연', time: '11월 5일', subject: '11월 비용 정산 안내', star: true },
+      { who: '보안팀', time: '11월 4일', subject: '[공지] 하반기 정보보안 교육 이수 요청' },
+      { who: '김민수', time: '11월 3일', subject: 'Re: 전사 회의 참석 안내', att: true },
+    ];
+    const items1 = MAILS.map((m) => ({
+      who: m.who,
+      time: m.time,
+      subject: m.subject,
+      hasAtt: !!m.att,
+      checked: !!m.checked,
+      notChecked: !m.checked,
+      checkedStr: m.checked ? 'true' : 'false',
+      pickLabel: '고르기: ' + m.subject,
+      bg: m.grabbed ? '#DDEFF0' : m.checked ? '#E8F4F5' : m.open ? '#E3F2F3' : '#FFFFFF',
+      whoFw: m.unread ? '650' : '450',
+      whoColor: m.unread ? '#171C26' : '#344054',
+      subFw: m.unread ? '600' : '400',
+      timeFw: m.unread ? '600' : '400',
+      timeColor: m.unread ? '#171C26' : '#667085',
+      starredStr: m.star ? 'true' : 'false',
+      starColor: m.star ? '#B7791F' : '#98A2B3',
+      starFill: m.star ? '#B7791F' : 'none',
+    }));
+
+    // 목록 보기 · 대화로 묶은 받은편지함 — 박지훈, 나 줄을 끌어다 놓는 중(끌기 시작한 줄은 마우스를 올린 바탕 그대로)
+    const CONVS = [
+      { who: '이도윤, 나', count: '4통', subject: 'Re: 유지보수 계약 갱신 건', date: '오전 10:42', unread: true, att: true },
+      { who: '인사팀', subject: '[공지] 계약직 채용 일정 안내', date: '오전 9:05', unread: true },
+      { who: '박지훈, 나', count: '3통', subject: 'Re: 견적 조건 문의드립니다', date: '11.08', grabbed: true },
+      { who: '정하늘, 나', count: '3통', subject: 'Re: 신규 입사자 교육 회의록', date: '11.08' },
+      { who: '박준호', subject: '11월 인프라 점검 일정 조율', date: '11.06' },
+      { who: '최서연', subject: '11월 비용 정산 안내', date: '11.05', star: true },
+      { who: '인사팀, 김민수, 나', count: '6통', subject: 'Re: 전사 회의 참석 안내', date: '11.03', att: true },
+    ];
+    const convRows = CONVS.map((c) => ({
+      who: c.who,
+      count: c.count || '',
+      hasCount: !!c.count,
+      subject: c.subject,
+      date: c.date,
+      hasAtt: !!c.att,
+      bg: c.grabbed ? '#F3F8F8' : '#FFFFFF',
+      fw: c.unread ? '650' : '450',
+      whoColor: c.unread ? '#171C26' : '#344054',
+      dateFw: c.unread ? '600' : '400',
+      dateColor: c.unread ? '#171C26' : '#667085',
+      starColor: c.star ? '#B7791F' : '#98A2B3',
+      starFill: c.star ? '#B7791F' : 'none',
+    }));
+
+    // 놓은 뒤 알림 — 글은 화면 상수 그대로 (MAIL_BULK_TEXT.moved · movedFrom · MAIL_SPAM_TEXT.notSpamMoved)
+    const toasts = [
+      { span: 'span 2', title: '3a. 내 메일함(거래처)에 놓았을 때', note: '[이동 ▾]로 옮길 때와 같습니다.', text: '메일 3통을 거래처로 옮겼습니다.' },
+      { span: 'span 2', title: '3b. 휴지통에 놓았을 때', note: '[삭제]와 같습니다. 영구 삭제하지 않고 휴지통으로 옮깁니다.', text: '메일 3통을 휴지통으로 옮겼습니다.' },
+      { span: 'span 2', title: '3c. 스팸메일함에 놓았을 때', note: '[스팸 신고]와 같습니다. [이동 ▾]에서 스팸메일함을 골라도 같습니다.', text: '메일 3통을 스팸메일함으로 옮겼습니다.' },
+      { span: 'span 3', title: '3d. 스팸메일함에서 다른 메일함으로 옮겼을 때', note: '[스팸 아님]과 같습니다. 끌어다 놓기와 [이동 ▾]가 같고, 휴지통으로 옮길 때는 3b와 같습니다.', text: '메일 1통을 스팸이 아닌 메일로 표시해 거래처로 옮겼습니다.' },
+      { span: 'span 3', title: '3e. 대화 줄을 견적에 놓았을 때(2)', note: '줄의 3통은 대화 전체라서, 옮긴 메일이 받은편지함에 있던 것임을 밝힙니다. 대화 줄에 [이동 ▾]를 쓸 때와 같습니다.', text: '받은편지함에 있는 메일 2통을 견적으로 옮겼습니다.' },
+    ];
+
+    return {
+      overModes: this.modes(OVER, over, (id) => this.setState({ over: id })),
+      overTitle: cur.title,
+      overNote: cur.note,
+      splitRegionLabel: '화면: 분할 보기, 고른 메일 3통을 ' + cur.label + ' 위로 끌어다 놓는 중',
+      sys1: p1.system,
+      mine1: p1.mine,
+      sys2: p2.system,
+      mine2: p2.mine,
+      chip1: '메일 3통',
+      chip2: '대화 1개',
+      items1: items1,
+      convRows: convRows,
+      toasts: toasts,
+    };
+  }
+}
+</script>
+</body>
+</html>
diff --git a/docs/design/webmail/Mailbox15.dc.html b/docs/design/webmail/Mailbox15.dc.html
new file mode 100644
index 0000000..c57d516
--- /dev/null
+++ b/docs/design/webmail/Mailbox15.dc.html
@@ -0,0 +1,765 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<title>메일함 옮기기 · 하위 메일함까지 지우기 · 차단할 때 받은 메일 옮기기</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<style>
+@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
+body{margin:0}
+a{color:#0E7C86}a:hover{color:#0A5F67}
+:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
+.on-dark:focus-visible{outline-color:#9ED6DB}
+.primary{background:#0E7C86;color:#FFFFFF}
+.primary:hover{background:#0A5F67}
+.ghost{background:transparent;color:#344054}
+.ghost:hover{background:#F2F4F7;color:#171C26}
+.danger-solid{background:#B42318;color:#FFFFFF}
+.danger-solid:hover{background:#912018}
+.menu-item{background:transparent;color:#171C26}
+.menu-item:hover,.menu-item.is-hover{background:#F2F4F7}
+.menu-item.is-danger{color:#B42318}
+.menu-item.is-danger:hover{background:#FEF3F2}
+.dest-row{background:transparent}
+.dest-row:hover{background:#F2F4F7}
+.dest-row.is-on,.dest-row.is-on:hover{background:#E3F2F3}
+.dest-row.is-off:hover{background:transparent}
+.toast-action{background:transparent;color:#9ED6DB;text-decoration:none}
+.toast-action:hover{color:#FFFFFF}
+.toast-link{background:transparent;color:#0E7C86}
+.toast-link:hover{color:#0A5F67}
+.toast-close{background:transparent;color:#4A5363}
+.toast-close:hover{background:#F2F4F7}
+</style>
+</helmet>
+<div style="width: 1440px; height: 4937px; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 48px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
+
+  <div style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 6px">
+    <h1 style="margin: 0; max-width: 1200px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">메일 15단계 · 메일함 옮기기 · 하위 메일함까지 지우기 · 차단할 때 받은 메일 옮기기</h1>
+    <p style="margin: 0; max-width: 1100px; font-size: 13.5px; color: #4A5363">메일함 패널의 ⋯ 메뉴와 보낸 사람 차단 창에 더하는 것입니다. 메일함을 다른 메일함 안이나 맨 위로 옮기고, 하위 메일함이 있는 메일함도 한 번에 지우고, 보낸 사람을 차단할 때 받은편지함에 이미 있는 그 사람의 메일까지 스팸메일함으로 옮깁니다. 2의 목록은 줄을 눌러 고를 수 있습니다. 예시의 보낸 사람은 news@example.com입니다. 초안이며 사용자 확인 전입니다(2026-11-09).</p>
+  </div>
+
+  <section aria-labelledby="s1-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s1-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">1. 메일함 ⋯ 메뉴</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">내 메일함의 ⋯ 메뉴에 [옮기기]가 생깁니다. 이름 바꾸기 다음, 지우기 앞입니다. 받은편지함 같은 기본 메일함에는 없습니다.</p>
+    </div>
+    <div style="display: flex; gap: 24px; align-items: flex-start">
+
+      <div style="flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">내 메일함의 ⋯</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">거래처 안의 2025</p>
+        </div>
+        <nav aria-label="메일함" style="box-sizing: border-box; width: 210px; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border: 1px solid #E6E8EC; border-radius: 12px">
+          <span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+            <span>메일 쓰기</span>
+          </span>
+          <div style="display: flex; flex-direction: column; gap: 1px">
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+              <sc-for list="{{ f1Roles }}" as="m" hint-placeholder-count="5">
+                <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ m.bg }}">
+                  <span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ m.indent }}px; color: {{ m.fg }}; font-weight: {{ m.fw }}">
+                    <sc-if value="{{ m.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
+                    <sc-if value="{{ m.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
+                    <sc-if value="{{ m.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
+                    <sc-if value="{{ m.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
+                    <sc-if value="{{ m.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ m.name }}</span>
+                    <sc-if value="{{ m.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ m.countColor }}; font-variant-numeric: tabular-nums">{{ m.count }}</span></sc-if>
+                  </span>
+                  <sc-if value="{{ m.hasMore }}" hint-placeholder-val="{{ true }}">
+                    <button type="button" aria-label="{{ m.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ m.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ m.moreBg }}; color: #4A5363; opacity: {{ m.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                  </sc-if>
+                </li>
+              </sc-for>
+            </ul>
+            <p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
+            <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+              <sc-for list="{{ f1Mine }}" as="n" hint-placeholder-count="7">
+                <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ n.bg }}">
+                  <span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ n.indent }}px; color: {{ n.fg }}; font-weight: {{ n.fw }}">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                    <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ n.name }}</span>
+                    <sc-if value="{{ n.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ n.countColor }}; font-variant-numeric: tabular-nums">{{ n.count }}</span></sc-if>
+                  </span>
+                  <button type="button" aria-label="{{ n.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ n.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ n.moreBg }}; color: #4A5363; opacity: {{ n.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                  <sc-if value="{{ n.open }}" hint-placeholder-val="{{ false }}">
+                    <div role="menu" aria-label="{{ n.menuLabel }}" style="position: absolute; top: 44px; right: 0; z-index: 6; min-width: 196px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+                      <sc-for list="{{ n.items }}" as="it" hint-placeholder-count="5">
+                        <button type="button" role="menuitem" class="{{ it.cls }}" style="display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; text-align: left; white-space: nowrap; cursor: pointer">{{ it.label }}</button>
+                      </sc-for>
+                    </div>
+                  </sc-if>
+                </li>
+              </sc-for>
+            </ul>
+            <span style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; color: #344054; font-weight: 500">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <span>새 메일함</span>
+            </span>
+          </div>
+        </nav>
+      </div>
+
+      <div style="flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">받은편지함의 ⋯</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">기본 메일함에는 옮기기가 없습니다</p>
+        </div>
+        <nav aria-label="메일함" style="box-sizing: border-box; width: 210px; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border: 1px solid #E6E8EC; border-radius: 12px">
+          <span style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+            <span>메일 쓰기</span>
+          </span>
+          <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+            <sc-for list="{{ f1RolesB }}" as="m" hint-placeholder-count="5">
+              <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ m.bg }}">
+                <span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ m.indent }}px; color: {{ m.fg }}; font-weight: {{ m.fw }}">
+                  <sc-if value="{{ m.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
+                  <sc-if value="{{ m.isSent }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></sc-if>
+                  <sc-if value="{{ m.isDrafts }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg></sc-if>
+                  <sc-if value="{{ m.isJunk }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></sc-if>
+                  <sc-if value="{{ m.isTrash }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></sc-if>
+                  <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ m.name }}</span>
+                  <sc-if value="{{ m.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ m.countColor }}; font-variant-numeric: tabular-nums">{{ m.count }}</span></sc-if>
+                </span>
+                <sc-if value="{{ m.hasMore }}" hint-placeholder-val="{{ true }}">
+                  <button type="button" aria-label="{{ m.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ m.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ m.moreBg }}; color: #4A5363; opacity: {{ m.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                </sc-if>
+                <sc-if value="{{ m.open }}" hint-placeholder-val="{{ false }}">
+                  <div role="menu" aria-label="{{ m.menuLabel }}" style="position: absolute; top: 44px; right: 0; z-index: 6; min-width: 196px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+                    <sc-for list="{{ m.items }}" as="it" hint-placeholder-count="2">
+                      <button type="button" role="menuitem" class="{{ it.cls }}" style="display: flex; align-items: center; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; text-align: left; white-space: nowrap; cursor: pointer">{{ it.label }}</button>
+                    </sc-for>
+                  </div>
+                </sc-if>
+              </li>
+            </sc-for>
+          </ul>
+        </nav>
+      </div>
+
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+        <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <li>항목 차례는 모두 읽음으로 표시, 하위 메일함 만들기, 이름 바꾸기, 옮기기, 지우기입니다. 안 읽은 메일이 없으면 첫 항목이 빠지는 것은 지금과 같습니다.</li>
+          <li>옮기기는 내 메일함에만 있습니다. 받은편지함, 보낸편지함 같은 기본 메일함은 옮기지 않습니다.</li>
+          <li>하위 메일함이 있어도 옮길 수 있습니다. 하위 메일함과 안의 메일이 함께 가고, 그 메일함으로 옮기는 필터도 그대로 돕니다.</li>
+          <li>창을 여는 다른 항목(하위 메일함 만들기, 이름 바꾸기)처럼 이름 뒤에 …를 붙이지 않았습니다.</li>
+          <li>메일함을 지우는 동안에는 지금처럼 모든 항목을 누를 수 없습니다. 항목 높이 40은 지금 메뉴와 같습니다.</li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <section aria-labelledby="s2-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s2-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">2. 옮기기 창</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">옮길 곳은 맨 위, 받은편지함, 내 메일함 가운데서 고릅니다. 목록의 줄을 눌러 고를 수 있습니다.</p>
+    </div>
+    <div style="display: flex; gap: 24px; align-items: flex-start">
+
+      <div style="flex: 0 0 640px; box-sizing: border-box; display: flex; justify-content: center; padding: 36px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+        <div role="dialog" aria-modal="true" aria-labelledby="f2-title" aria-describedby="f2-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+          <h3 id="f2-title" style="margin: 0; font-size: 15px; font-weight: 700">‘2025’ 메일함을 어디로 옮길까요?</h3>
+          <p id="f2-msg" style="margin: 0; color: #4A5363">하위 메일함과 안의 메일도 함께 옮깁니다.</p>
+          <div role="radiogroup" aria-label="옮길 곳" style="display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 4px; border: 1px solid #E6E8EC; border-radius: 8px">
+            <sc-for list="{{ f2Rows }}" as="r" hint-placeholder-count="10">
+              <sc-if value="{{ r.isHeading }}" hint-placeholder-val="{{ false }}">
+                <p style="margin: 8px 10px 2px; font-size: 12px; font-weight: 600; color: #667085">{{ r.name }}</p>
+              </sc-if>
+              <sc-if value="{{ r.isRow }}" hint-placeholder-val="{{ true }}">
+                <button type="button" role="radio" aria-checked="{{ r.checked }}" aria-disabled="{{ r.off }}" class="{{ r.cls }}" onClick="{{ r.pick }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ r.indent }}px; border: 0; border-radius: 7px; color: {{ r.fg }}; font: inherit; font-weight: {{ r.fw }}; text-align: left; cursor: {{ r.cursor }}">
+                  <sc-if value="{{ r.isTop }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></sc-if>
+                  <sc-if value="{{ r.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
+                  <sc-if value="{{ r.isFolder }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></sc-if>
+                  <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: {{ r.dim }}">{{ r.name }}</span>
+                  <sc-if value="{{ r.hasNote }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085">{{ r.note }}</span></sc-if>
+                  <sc-if value="{{ r.isChecked }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg></sc-if>
+                </button>
+              </sc-if>
+            </sc-for>
+          </div>
+          <div style="display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px">
+            <button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; opacity: {{ f2MoveOpacity }}; cursor: pointer">옮기기</button>
+            <button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+        <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <li>창 폭은 400입니다(주소록의 그룹 창과 같습니다). 처음에는 아무 곳도 고르지 않은 채 열리고, 고르기 전에는 [옮기기]를 누를 수 없습니다.</li>
+          <li>목록은 메일함 패널과 같은 차례와 들여쓰기이고 줄 높이는 40입니다. 고른 줄은 패널의 지금 메일함처럼 청록 바탕에 굵은 글자이고, 오른쪽에 체크 표시가 붙습니다.</li>
+          <li>옮기는 메일함(거래처 안의 2025)과 그 안의 정산은 흐리게 두고 고를 수 없습니다. 지금 있는 곳(거래처)도 고를 수 없고 지금 있는 곳 표시를 붙입니다. 맨 위에 있는 메일함이면 맨 위 줄에 붙습니다.</li>
+          <li>바로 아래에 같은 이름의 메일함이 있는 곳(보관 안의 2025)도 처음부터 고를 수 없게 하고, 같은 자리에 같은 이름의 메일함이 있습니다 표시를 붙입니다. 대소문자는 가리지 않고 견줍니다. 서버에 묻기 전에 화면이 하는 검사라 화면 상수 글입니다.</li>
+          <li>옮길 곳에 보낸편지함, 임시보관함, 스팸메일함, 휴지통은 없습니다. 하위 메일함을 만들 수 있는 곳과 같습니다.</li>
+          <li>하위 메일함이 없으면 제목 아래 글은 "안의 메일도 함께 옮깁니다."입니다.</li>
+          <li>메일함이 많으면 목록 칸 안에서 스크롤합니다. 화살표 키로 줄을 옮기고, Enter는 [옮기기], Esc는 [취소]와 같습니다.</li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <section aria-labelledby="s3-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s3-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">3. 그사이 같은 이름이 생겼을 때</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">드문 경우입니다. 창을 연 사이 다른 창에서 프로젝트 안에 2025를 만들어, 프로젝트를 고르고 [옮기기]를 누르자 서버가 거절한 모습입니다.</p>
+    </div>
+    <div style="display: flex; gap: 24px; align-items: flex-start">
+
+      <div style="flex: 0 0 640px; box-sizing: border-box; display: flex; justify-content: center; padding: 36px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+        <div role="dialog" aria-modal="true" aria-labelledby="f3-title" aria-describedby="f3-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+          <h3 id="f3-title" style="margin: 0; font-size: 15px; font-weight: 700">‘2025’ 메일함을 어디로 옮길까요?</h3>
+          <p id="f3-msg" style="margin: 0; color: #4A5363">하위 메일함과 안의 메일도 함께 옮깁니다.</p>
+          <div role="radiogroup" aria-label="옮길 곳" aria-describedby="f3-err" style="display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 4px; border: 1px solid #E6E8EC; border-radius: 8px">
+            <sc-for list="{{ f3Rows }}" as="r" hint-placeholder-count="10">
+              <sc-if value="{{ r.isHeading }}" hint-placeholder-val="{{ false }}">
+                <p style="margin: 8px 10px 2px; font-size: 12px; font-weight: 600; color: #667085">{{ r.name }}</p>
+              </sc-if>
+              <sc-if value="{{ r.isRow }}" hint-placeholder-val="{{ true }}">
+                <button type="button" role="radio" aria-checked="{{ r.checked }}" aria-disabled="{{ r.off }}" class="{{ r.cls }}" onClick="{{ r.pick }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ r.indent }}px; border: 0; border-radius: 7px; color: {{ r.fg }}; font: inherit; font-weight: {{ r.fw }}; text-align: left; cursor: {{ r.cursor }}">
+                  <sc-if value="{{ r.isTop }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg></sc-if>
+                  <sc-if value="{{ r.isInbox }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></sc-if>
+                  <sc-if value="{{ r.isFolder }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ r.dim }}"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></sc-if>
+                  <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: {{ r.dim }}">{{ r.name }}</span>
+                  <sc-if value="{{ r.hasNote }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 400; color: #667085">{{ r.note }}</span></sc-if>
+                  <sc-if value="{{ r.isChecked }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg></sc-if>
+                </button>
+              </sc-if>
+            </sc-for>
+          </div>
+          <p id="f3-err" role="alert" style="display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; color: #B42318">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+            <span>같은 이름의 메일함이 이미 있습니다.</span>
+          </p>
+          <div style="display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px">
+            <button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">옮기기</button>
+            <button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+        <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <li>같은 이름은 보통 2의 표시로 미리 막습니다. 이 그림은 창의 목록이 연 때의 것이라 막지 못한 경우입니다.</li>
+          <li>글은 오류 사전의 MAIL_009를 그대로 씁니다. 알림은 띄우지 않고 창을 그대로 둡니다(이름 바꾸기 창과 같습니다). 다른 곳을 고르면 글이 사라집니다.</li>
+          <li>대소문자만 다른 이름(Report와 report)도 같은 이름으로 봅니다. 미리 막는 검사도 같은 규칙입니다.</li>
+          <li>그사이 메일함이 사라졌으면 RES_001 알림을 띄우고 창을 닫은 뒤 메일함 목록을 다시 받습니다(이름 바꾸기 창과 같습니다).</li>
+          <li>옮기는 동안에는 [옮기기]를 다시 누를 수 없습니다.</li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <section aria-labelledby="s4-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s4-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">4. 옮긴 뒤 알림</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">메일함 패널에 바로 나타나고, 알림의 [되돌리기]로 원래 있던 곳에 되돌립니다.</p>
+    </div>
+    <div style="display: flex; gap: 24px; align-items: flex-start">
+
+      <div style="flex: 0 0 210px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">옮긴 뒤 메일함 패널</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">2025가 정산과 함께 프로젝트 안으로</p>
+        </div>
+        <nav aria-label="메일함" style="box-sizing: border-box; width: 210px; display: flex; flex-direction: column; gap: 1px; padding: 2px 10px 10px; background: #F8F9FB; border: 1px solid #E6E8EC; border-radius: 12px">
+          <p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
+          <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+            <sc-for list="{{ f4Mine }}" as="n" hint-placeholder-count="7">
+              <li style="position: relative; display: flex; align-items: center; border-radius: 7px; background: {{ n.bg }}">
+                <span style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ n.indent }}px; color: {{ n.fg }}; font-weight: {{ n.fw }}">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                  <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ n.name }}</span>
+                  <sc-if value="{{ n.hasCount }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; font-weight: 600; color: {{ n.countColor }}; font-variant-numeric: tabular-nums">{{ n.count }}</span></sc-if>
+                </span>
+                <button type="button" aria-label="{{ n.moreLabel }}" aria-haspopup="menu" aria-expanded="{{ n.openStr }}" style="flex: 0 0 auto; width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: {{ n.moreBg }}; color: #4A5363; opacity: {{ n.moreOpacity }}; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+              </li>
+            </sc-for>
+          </ul>
+        </nav>
+      </div>
+
+      <div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 18px">
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">다른 메일함 안으로 옮겼을 때</h3>
+          <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다.</span>
+            <button type="button" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
+          </div>
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">맨 위로 옮겼을 때</h3>
+          <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘2025’ 메일함을 다른 메일함 밖으로 옮겼습니다.</span>
+            <button type="button" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
+          </div>
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 8px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">[되돌리기]를 누른 뒤</h3>
+          <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘2025’ 메일함을 ‘거래처’ 안으로 되돌렸습니다.</span>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+        <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <li>메일함 패널에 바로 나타납니다. 보던 메일함을 옮겨도 그 메일함을 계속 봅니다.</li>
+          <li>[되돌리기]는 원래 있던 곳으로 다시 옮깁니다. 단추가 있는 알림은 지금처럼 10초 동안 남습니다.</li>
+          <li>받은편지함 안으로 옮겼으면 "‘2025’ 메일함을 받은편지함 안으로 옮겼습니다."처럼 받은편지함에는 따옴표를 붙이지 않습니다.</li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <section aria-labelledby="s5-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s5-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">5. 하위 메일함까지 지우기</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">하위 메일함이 있는 메일함을 지우려 하면 지금은 지울 수 없다고만 알립니다. 15단계부터는 하위 메일함까지 함께 지울지 묻습니다.</p>
+    </div>
+    <div style="display: flex; gap: 24px; align-items: flex-start">
+
+      <div style="flex: 0 0 408px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">지금</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">하위 메일함을 먼저 지우라고만 합니다</p>
+        </div>
+        <div style="box-sizing: border-box; height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+          <div role="alertdialog" aria-modal="true" aria-labelledby="f5a-title" aria-describedby="f5a-msg" style="width: 360px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+            <h3 id="f5a-title" style="margin: 0; font-size: 15px; font-weight: 700">‘거래처’ 메일함을 지울 수 없습니다</h3>
+            <p id="f5a-msg" style="margin: 0; color: #4A5363">하위 메일함이 있습니다. 하위 메일함을 먼저 지워 주세요.</p>
+            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
+              <button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">확인</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 0 0 408px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">15단계</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">하위 메일함까지 지울지 묻습니다 · 처음 초점은 [취소]</p>
+        </div>
+        <div style="box-sizing: border-box; height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+          <div role="alertdialog" aria-modal="true" aria-labelledby="f5b-title" aria-describedby="f5b-msg" style="width: 360px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+            <h3 id="f5b-title" style="margin: 0; font-size: 15px; font-weight: 700">‘거래처’ 메일함과 하위 메일함 2개를 지울까요?</h3>
+            <p id="f5b-msg" style="margin: 0; color: #4A5363">하위 메일함에 든 메일까지 모두 40통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다. 지운 메일함은 되돌릴 수 없습니다.</p>
+            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
+              <button type="button" class="danger-solid" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">지우기</button>
+              <button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; outline: 2px solid #0E7C86; outline-offset: 2px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+        <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <li>하위 메일함 수는 아래의 모든 깊이를 셉니다(2025와 그 안의 정산으로 2개). 메일 수도 하위 메일함까지 더한 수입니다.</li>
+          <li>메일이 하나도 없으면 둘째 글은 "하위 메일함까지 모두 비어 있습니다. 지운 메일함은 되돌릴 수 없습니다."입니다.</li>
+          <li>처음 초점은 [취소]이고, 휴지통을 비우는 동안에는 [지우기]를 누를 수 없습니다. 둘 다 지금 지우기 창과 같습니다.</li>
+        </ul>
+      </div>
+
+    </div>
+    <p style="margin: 0; font-size: 12.5px; color: #4A5363">진행과 결과는 지금 메일함 지우기와 같습니다. "‘거래처’ 메일함을 지우는 중 · 12 / 40통" 알림이 끝나면 "‘거래처’ 메일함을 지웠습니다. 안의 메일 40통은 휴지통에 있습니다."로 바뀝니다.</p>
+  </section>
+
+  <section aria-labelledby="s6-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s6-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">6. 보낸 사람 차단 창</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">지금 창에 칸 하나를 더해, 받은편지함에 이미 있는 같은 보낸 사람의 메일까지 스팸메일함으로 옮깁니다. 많을 수 있고 한꺼번에 되돌릴 수 없어서 처음에는 꺼져 있습니다.</p>
+    </div>
+    <div style="display: flex; gap: 12px; align-items: stretch">
+
+      <div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">처음 모습</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">이 주소만 · 새 칸은 꺼져 있습니다</p>
+        </div>
+        <div style="flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 20px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+          <div role="dialog" aria-modal="true" aria-labelledby="f6a-title" aria-describedby="f6a-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+            <h3 id="f6a-title" style="margin: 0; font-size: 15px; font-weight: 700">보낸 사람 차단</h3>
+            <p id="f6a-msg" style="margin: 0; color: #4A5363">앞으로 오는 메일은 스팸메일함으로 옮겨지고, 부재중 자동 응답도 보내지 않습니다.</p>
+            <div style="display: flex; flex-direction: column; gap: 14px; margin-top: 6px">
+              <div role="radiogroup" aria-label="차단할 범위" style="display: flex; flex-direction: column; gap: 4px">
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #0E7C86; border-radius: 8px; background: #F3F8F8; cursor: pointer">
+                  <input type="radio" name="f6a-scope" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 주소만</span><span style="font-size: 12.5px; color: #4A5363">news@example.com</span></span>
+                </label>
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer">
+                  <input type="radio" name="f6a-scope" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 도메인 전체</span><span style="font-size: 12.5px; color: #4A5363">@example.com에서 오는 메일 모두</span></span>
+                </label>
+              </div>
+              <div style="display: flex; flex-direction: column">
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
+                  <input type="checkbox" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span>이 메일도 스팸메일함으로 옮기기</span>
+                </label>
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
+                  <input type="checkbox" aria-describedby="f6a-note" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span>받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기</span>
+                </label>
+                <p id="f6a-note" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">옮긴 메일은 한꺼번에 되돌릴 수 없습니다.</p>
+              </div>
+              <p style="margin: 0; font-size: 12.5px; color: #667085">차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.</p>
+            </div>
+            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
+              <button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">차단</button>
+              <button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">이 도메인 전체를 고르고 새 칸을 켬</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">이 메일이 받은편지함에 있어 첫 칸이 켜진 채 잠깁니다</p>
+        </div>
+        <div style="flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 20px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+          <div role="dialog" aria-modal="true" aria-labelledby="f6b-title" aria-describedby="f6b-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+            <h3 id="f6b-title" style="margin: 0; font-size: 15px; font-weight: 700">보낸 사람 차단</h3>
+            <p id="f6b-msg" style="margin: 0; color: #4A5363">앞으로 오는 메일은 스팸메일함으로 옮겨지고, 부재중 자동 응답도 보내지 않습니다.</p>
+            <div style="display: flex; flex-direction: column; gap: 14px; margin-top: 6px">
+              <div role="radiogroup" aria-label="차단할 범위" style="display: flex; flex-direction: column; gap: 4px">
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer">
+                  <input type="radio" name="f6b-scope" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 주소만</span><span style="font-size: 12.5px; color: #4A5363">news@example.com</span></span>
+                </label>
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #0E7C86; border-radius: 8px; background: #F3F8F8; cursor: pointer">
+                  <input type="radio" name="f6b-scope" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 도메인 전체</span><span style="font-size: 12.5px; color: #4A5363">@example.com에서 오는 메일 모두</span></span>
+                </label>
+              </div>
+              <div style="display: flex; flex-direction: column">
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: default">
+                  <input type="checkbox" checked aria-disabled="true" aria-describedby="f6b-lock" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86; opacity: 0.5">
+                  <span style="opacity: 0.5">이 메일도 스팸메일함으로 옮기기</span>
+                </label>
+                <p id="f6b-lock" style="margin: -10px 0 0 28px; font-size: 12.5px; color: #667085">받은편지함의 메일을 옮길 때 함께 옮깁니다.</p>
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
+                  <input type="checkbox" checked aria-describedby="f6b-note" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span>받은편지함에 있는 이 도메인의 메일도 스팸메일함으로 옮기기</span>
+                </label>
+                <p id="f6b-note" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">옮긴 메일은 한꺼번에 되돌릴 수 없습니다.</p>
+              </div>
+              <p style="margin: 0; font-size: 12.5px; color: #667085">차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.</p>
+            </div>
+            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
+              <button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">차단</button>
+              <button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">스팸메일함의 메일에서 차단할 때</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">첫 칸은 지금처럼 없고 새 칸은 남습니다</p>
+        </div>
+        <div style="flex: 1 1 auto; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding: 20px 0; border-radius: 12px; background: rgba(11, 54, 64, 0.32)">
+          <div role="dialog" aria-modal="true" aria-labelledby="f6c-title" aria-describedby="f6c-msg" style="width: 400px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 14px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF; box-shadow: 0 14px 36px rgba(16, 24, 28, 0.14)">
+            <h3 id="f6c-title" style="margin: 0; font-size: 15px; font-weight: 700">보낸 사람 차단</h3>
+            <p id="f6c-msg" style="margin: 0; color: #4A5363">앞으로 오는 메일은 스팸메일함으로 옮겨지고, 부재중 자동 응답도 보내지 않습니다.</p>
+            <div style="display: flex; flex-direction: column; gap: 14px; margin-top: 6px">
+              <div role="radiogroup" aria-label="차단할 범위" style="display: flex; flex-direction: column; gap: 4px">
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #0E7C86; border-radius: 8px; background: #F3F8F8; cursor: pointer">
+                  <input type="radio" name="f6c-scope" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 주소만</span><span style="font-size: 12.5px; color: #4A5363">news@example.com</span></span>
+                </label>
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px; border: 1px solid #D0D5DD; border-radius: 8px; cursor: pointer">
+                  <input type="radio" name="f6c-scope" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span style="display: flex; flex-direction: column; min-width: 0; line-height: 1.4"><span style="font-weight: 600">이 도메인 전체</span><span style="font-size: 12.5px; color: #4A5363">@example.com에서 오는 메일 모두</span></span>
+                </label>
+              </div>
+              <div style="display: flex; flex-direction: column">
+                <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
+                  <input type="checkbox" aria-describedby="f6c-note" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+                  <span>받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기</span>
+                </label>
+                <p id="f6c-note" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">옮긴 메일은 한꺼번에 되돌릴 수 없습니다.</p>
+              </div>
+              <p style="margin: 0; font-size: 12.5px; color: #667085">차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.</p>
+            </div>
+            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px">
+              <button type="button" class="primary" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">차단</button>
+              <button type="button" class="ghost" style="min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">취소</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div style="display: flex; gap: 12px; align-items: flex-start">
+
+      <div style="flex: 0 0 440px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">이 탭에서 필터를 적용하는 중일 때</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">창 안의 두 칸만 그렸습니다 · 새 칸이 꺼지고 까닭이 붙습니다</p>
+        </div>
+        <div style="box-sizing: border-box; display: flex; flex-direction: column; padding: 2px 20px 16px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF">
+          <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: pointer">
+            <input type="checkbox" checked style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86">
+            <span>이 메일도 스팸메일함으로 옮기기</span>
+          </label>
+          <label style="display: flex; align-items: flex-start; gap: 10px; min-height: 44px; box-sizing: border-box; padding-top: 12px; cursor: default">
+            <input type="checkbox" aria-disabled="true" aria-describedby="f6d-busy" style="flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0E7C86; opacity: 0.5">
+            <span style="opacity: 0.5">받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기</span>
+          </label>
+          <p id="f6d-busy" style="margin: 2px 0 0 28px; font-size: 12.5px; color: #667085">받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.</p>
+        </div>
+      </div>
+
+      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+        <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+        <ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <li>새 칸은 창을 열 때마다 꺼진 채 시작합니다. 첫 칸은 지금처럼 켜진 채 시작합니다.</li>
+          <li>새 칸을 켰는데 이 메일이 받은편지함에 있으면 첫 칸은 켜진 채 잠기고(aria-disabled) 칸 아래에 까닭이 붙습니다. 새 칸을 끄면 첫 칸은 원래대로 돌아옵니다. 이 메일이 다른 메일함에 있으면 잠그지 않습니다.</li>
+          <li>이 도메인 전체를 고르면 새 칸의 이 보낸 사람이 이 도메인으로 바뀝니다. 차단처럼 그 도메인만 보고 하위 도메인은 보지 않습니다.</li>
+          <li>받은편지함에 있는 메일만 옮깁니다. 직원이 정리해 둔 다른 메일함은 그대로 둡니다(필터 적용과 같습니다).</li>
+          <li>이 탭에서 필터를 받은편지함에 적용하는 동안에는 새 칸을 끄고(aria-disabled) 칸 아래 글을 까닭으로 바꿉니다. 7단계 필터 창의 칸과 같습니다.</li>
+          <li>두 칸은 붙여 두고, 칸 글이 두 줄이면 고르기 상자를 첫 줄에 맞춥니다. 칸 아래 글은 글 선(28)에 맞춰 들여 씁니다.</li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <section aria-labelledby="s7-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 14px">
+    <div style="display: flex; align-items: baseline; gap: 16px">
+      <h2 id="s7-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">7. 차단한 뒤 알림</h2>
+      <p style="margin: 0; font-size: 13.5px; color: #4A5363">새 칸을 켜고 차단하면 차단 알림을 따로 띄우지 않습니다. 알림 하나가 차단했다는 글로 시작해 진행 숫자를 보이다가, 같은 자리에서 결과로 바뀝니다. 7단계 필터 적용의 진행 알림과 같은 결입니다.</p>
+    </div>
+    <div style="display: flex; gap: 32px; align-items: flex-start">
+
+      <div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">새 칸을 켜지 않았을 때</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">지금 차단 알림 그대로</p>
+        </div>
+        <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단하고 이 메일을 스팸메일함으로 옮겼습니다.</span>
+          <button type="button" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
+        </div>
+      </div>
+
+      <div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">새 칸을 켰을 때</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">알림 하나가 진행을 보이다가 같은 자리에서 결과로</p>
+        </div>
+        <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ED6DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="M21 12a9 9 0 1 1-6.22-8.56"></path></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500; font-variant-numeric: tabular-nums">‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인</span>
+        </div>
+        <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다.</span>
+          <a href="#" class="toast-action on-dark" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px; font-weight: 600">스팸메일함 보기</a>
+        </div>
+        <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했습니다. 받은편지함에는 옮길 메일이 없습니다.</span>
+        </div>
+      </div>
+
+      <div style="flex: 0 0 400px; display: flex; flex-direction: column; gap: 10px">
+        <div style="display: flex; flex-direction: column; gap: 1px">
+          <h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">새 칸을 켰는데 멈췄을 때</h3>
+          <p style="margin: 0; font-size: 12.5px; color: #667085">도중에 멈춤 · 처음부터 실패 · 다른 창에서 하는 중</p>
+        </div>
+        <div role="alert" style="width: 400px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했습니다. 받은편지함은 4,800통 가운데 1,200통까지 확인해 12통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요.</span>
+          <button type="button" class="toast-link" style="flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
+          <button type="button" class="toast-close" aria-label="알림 닫기" style="flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+        </div>
+        <div role="alert" style="width: 400px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요.</span>
+          <button type="button" class="toast-link" style="flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
+          <button type="button" class="toast-close" aria-label="알림 닫기" style="flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+        </div>
+        <div role="alert" style="width: 400px; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B42318" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 1px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+          <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">‘news@example.com’을(를) 차단했습니다. 다른 창에서 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.</span>
+          <button type="button" class="toast-link" style="flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">다시 시도</button>
+          <button type="button" class="toast-close" aria-label="알림 닫기" style="flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; cursor: pointer"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
+        </div>
+      </div>
+
+    </div>
+    <div style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
+      <h3 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h3>
+      <ul style="margin: 0; padding-left: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; color: #344054">
+        <li>새 칸을 켠 차단은 알림이 하나라 [되돌리기]가 없습니다. 차단은 [설정] → [차단한 주소]에서 풉니다. 새 칸을 켜지 않았으면 지금 알림이 [되돌리기]와 함께 그대로 뜹니다.</li>
+        <li>결과와 멈춤 글은 모두 차단했다는 말로 시작합니다. 차단은 이미 끝났고, 받은편지함의 메일 옮기기만 멈춘 것입니다.</li>
+        <li>숫자는 확인한 메일 / 받은편지함의 메일 수이고, 최근 메일부터 확인합니다. 첫 응답 전에는 받은편지함의 메일 수를 씁니다.</li>
+        <li>[스팸메일함 보기]는 스팸메일함 목록으로 갑니다. 옮긴 메일이 없으면 단추가 없습니다. 잘못 옮긴 메일은 스팸메일함에서 [스팸 아님]으로 돌려놓습니다.</li>
+        <li>[다시 시도]는 멈춘 자리부터, 처음부터 실패했으면 처음부터 합니다. 차단한 뒤에는 ⋯ 메뉴가 차단 풀기로 바뀌어 다시 고를 길이 없으므로, 다른 창에서 하는 중일 때도 단추를 둡니다.</li>
+        <li>다른 창에서 하는 중 글은 필터 적용과 함께 씁니다. 지금 필터 글(다른 창에서 필터로 받은편지함을 정리하는 중입니다.)도 구현 때 이 글로 바꿉니다.</li>
+        <li>그동안 다른 화면으로 가도 이어 하고, 탭을 닫거나 로그아웃하면 멈추고 알림을 닫습니다. 필터 적용과 이 일은 한 직원에 한 번에 하나만 돕니다.</li>
+      </ul>
+    </div>
+  </section>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":4937}}'>
+class Component extends DCLogic {
+  state = { dest: null };
+
+  // 메일함 패널의 한 줄 — MailboxPanelRow 와 같은 값(줄 40 · 들여쓰기 10 · 28 · 44 · 56 · ⋯ 32×40)
+  panelRow(m, extra) {
+    const x = extra || {};
+    const INDENT = [10, 28, 44, 56];
+    const active = Boolean(x.active);
+    const open = Array.isArray(x.items);
+    return {
+      name: m.name,
+      count: m.count ? String(m.count) : '',
+      hasCount: Boolean(m.count),
+      indent: INDENT[Math.min(m.depth || 0, 3)],
+      isInbox: m.kind === 'inbox',
+      isSent: m.kind === 'sent',
+      isDrafts: m.kind === 'drafts',
+      isJunk: m.kind === 'junk',
+      isTrash: m.kind === 'trash',
+      bg: active ? '#E3F2F3' : open ? '#F2F4F7' : 'transparent',
+      fg: active ? '#0A5F67' : '#344054',
+      fw: active ? '600' : '500',
+      countColor: active ? '#0A5F67' : '#171C26',
+      hasMore: m.more !== false,
+      open: open,
+      openStr: open ? 'true' : 'false',
+      moreOpacity: open ? '1' : '0',
+      moreBg: open ? '#E6E8EC' : 'transparent',
+      moreLabel: m.name + ' 메일함 메뉴',
+      menuLabel: m.name + ' 메일함',
+      items: x.items || [],
+    };
+  }
+
+  // 옮기기 창의 줄 — 패널과 같은 차례 · 들여쓰기, 고를 수 없는 줄은 이름 · 아이콘만 흐리게(까닭 글은 그대로)
+  destRows(chosen, pickable) {
+    const INDENT = [10, 28, 44, 56];
+    const LIST = [
+      { id: 'top', kind: 'top', name: '맨 위', depth: 0, note: '다른 메일함 안에 두지 않습니다', can: true },
+      { id: 'inbox', kind: 'inbox', name: '받은편지함', depth: 0, can: true },
+      { id: 'mine', kind: 'heading', name: '내 메일함' },
+      { id: 'c', kind: 'folder', name: '거래처', depth: 0, note: '지금 있는 곳', can: false },
+      { id: 'c25', kind: 'folder', name: '2025', depth: 1, can: false },
+      { id: 'c25s', kind: 'folder', name: '정산', depth: 2, can: false },
+      { id: 'b', kind: 'folder', name: '보관', depth: 0, note: '같은 이름의 메일함이 있습니다', can: false },
+      { id: 'b25', kind: 'folder', name: '2025', depth: 1, can: true },
+      { id: 'p', kind: 'folder', name: '프로젝트', depth: 0, can: true },
+      { id: 'pq', kind: 'folder', name: '견적', depth: 1, can: true },
+    ];
+    return LIST.map((x) => {
+      const heading = x.kind === 'heading';
+      const on = !heading && x.can && x.id === chosen;
+      const off = !heading && !x.can;
+      return {
+        isHeading: heading,
+        isRow: !heading,
+        isTop: x.kind === 'top',
+        isInbox: x.kind === 'inbox',
+        isFolder: x.kind === 'folder',
+        name: x.name,
+        note: x.note || '',
+        hasNote: Boolean(x.note),
+        indent: INDENT[Math.min(x.depth || 0, 3)],
+        checked: on ? 'true' : 'false',
+        isChecked: on,
+        off: off ? 'true' : 'false',
+        cls: on ? 'dest-row is-on' : off ? 'dest-row is-off' : 'dest-row',
+        fg: on ? '#0A5F67' : '#344054',
+        fw: on ? '600' : '500',
+        dim: off ? '0.5' : '1',
+        cursor: off ? 'default' : 'pointer',
+        pick: () => {
+          if (pickable && !off && !heading) this.setState({ dest: x.id });
+        },
+      };
+    });
+  }
+
+  renderVals() {
+    const st = this.state;
+    const dest = st.dest ?? 'p';
+    const item = (label, cls) => ({ label: label, cls: cls || 'menu-item' });
+
+    const ROLES = [
+      { kind: 'inbox', name: '받은편지함', count: 3 },
+      { kind: 'sent', name: '보낸편지함', more: false },
+      { kind: 'drafts', name: '임시보관함', more: false },
+      { kind: 'junk', name: '스팸메일함', count: 1 },
+      { kind: 'trash', name: '휴지통' },
+    ];
+    // 옮기기 전 — 거래처 안에 2025(그 안에 정산), 보관 안에도 2025 가 있다
+    const BEFORE = [
+      { id: 'c', name: '거래처', depth: 0, count: 1 },
+      { id: 'c25', name: '2025', depth: 1, count: 4 },
+      { id: 'c25s', name: '정산', depth: 2 },
+      { id: 'b', name: '보관', depth: 0 },
+      { id: 'b25', name: '2025', depth: 1 },
+      { id: 'p', name: '프로젝트', depth: 0, count: 2 },
+      { id: 'pq', name: '견적', depth: 1 },
+    ];
+    // 옮긴 뒤 — 2025 가 정산과 함께 프로젝트 안으로 (같은 상위 안은 이름 차례 — 숫자가 먼저)
+    const AFTER = [
+      { id: 'c', name: '거래처', depth: 0, count: 1 },
+      { id: 'b', name: '보관', depth: 0 },
+      { id: 'b25', name: '2025', depth: 1 },
+      { id: 'p', name: '프로젝트', depth: 0, count: 2 },
+      { id: 'c25', name: '2025', depth: 1, count: 4 },
+      { id: 'c25s', name: '정산', depth: 2 },
+      { id: 'pq', name: '견적', depth: 1 },
+    ];
+    const mineMenu = [
+      item('모두 읽음으로 표시'),
+      item('하위 메일함 만들기'),
+      item('이름 바꾸기'),
+      item('옮기기', 'menu-item is-hover'),
+      item('지우기', 'menu-item is-danger'),
+    ];
+    const inboxMenu = [item('모두 읽음으로 표시'), item('하위 메일함 만들기')];
+
+    const f2Rows = this.destRows(dest, true);
+    const canMove = f2Rows.some((r) => r.isChecked);
+    return {
+      f1Roles: ROLES.map((m) => this.panelRow(m, { active: m.kind === 'inbox' })),
+      f1Mine: BEFORE.map((m) => this.panelRow(m, m.id === 'c25' ? { items: mineMenu } : {})),
+      f1RolesB: ROLES.map((m) => this.panelRow(m, m.kind === 'inbox' ? { active: true, items: inboxMenu } : {})),
+      f4Mine: AFTER.map((m) => this.panelRow(m)),
+      f2Rows: f2Rows,
+      f2MoveOpacity: canMove ? '1' : '0.5',
+      f3Rows: this.destRows('p', false),
+    };
+  }
+}
+</script>
+</body>
+</html>
diff --git a/docs/design/webmail/README.md b/docs/design/webmail/README.md
index e2929e0..7f4997a 100644
--- a/docs/design/webmail/README.md
+++ b/docs/design/webmail/README.md
@@ -1088,8 +1088,8 @@ API 와 서버 규칙은 계약 2절 "실시간 알림".
 
 ### 처음 판에서 미룬 것
 
-본문 강조의 다음 · 이전 이동, 검색어 줄임말(from: 같은 꼴), 대화째 끌어다 놓기, 첨부 파일 안의 글 찾기, 끝이 바뀐 말 찾기(형태소 분석).
-같은 대화 칸 머리의 [모두 펼치기]와 펼친 줄 머리의 [답장]도 다음 후보로 둔다(2026-11-07 사용자 관점 점검에서 나온 제안 — 사용자가 미루기로 정함). 지금은 줄마다 펼치고, [답장]은 펼친 본문 아래에만 있다.
+본문 강조의 다음 · 이전 이동, 검색어 줄임말(from: 같은 꼴), 첨부 파일 안의 글 찾기, 끝이 바뀐 말 찾기(형태소 분석).
+대화째 끌어다 놓기와 같은 대화 칸 머리의 [모두 펼치기] · 펼친 줄 머리의 [답장](2026-11-07 사용자 관점 점검에서 나와 미뤘던 것)은 15단계에서 했다(아래 "15단계").
 
 ## 휴대폰 앱 받기 (2026-11-08 확정 — `SettingsMobileApp`)
 
@@ -1164,6 +1164,114 @@ PC 에서는 설정 › 계정 › 휴대폰 앱(A)이 QR 코드로 휴대폰에
 - 서명 키가 다른 판(시험판)이 깔린 휴대폰은 새 판을 덮어 설치할 수 없다 — 그때는 앱을 지운 뒤 설치하고 로그인을 다시 한다.
 - 미룬 것: 앱 안에서 받아 바로 설치, 최소 판이 아닌 새 판 알림, 아이폰(Ad Hoc · TestFlight), Google 개발자 인증(2027 전 세계 — 그 전에 등록할지 정한다).
 
+## 15단계 — 메일 · 메일함 다루기 (2026-11-09 확정 — `Reader15` · `ListDrag15` · `Mailbox15`)
+
+메일과 메일함을 옮기고 정리하는 일을 더한다 — 읽기 화면 [이동 ▾] · 끌어다 놓기 · 메일함 옮기기 · 하위 메일함까지 지우기 · 차단할 때 받은 메일 옮기기 · 예약 메일 [지금 보내기].
+서버 약속은 계약 2절("메일함 관리" · "보낸 사람 차단" · "보내기 취소 · 예약 발송")이다. 글의 원본은 화면 상수(`shared/constants/mailbox-manage.ts` · `mail-block.ts` · `mail-send-later.ts` · `mail-filter.ts`)이고 아래는 옮겨 적은 것이다.
+새 크기 토큰 · 밀도 예외는 없다 — 옮기기 창의 줄 40 은 메일함 패널의 줄(`--size-row-min`), [지금 보내기] 36 은 안내 줄 단추(`--size-notice-action`)를 다시 쓴다. 문구는 위 「화면 문구 — 사용자에게 말하듯」을 따른다.
+
+### 읽기 화면 · 목록 · 상단 바 (`Reader15` 1~3 · 6 · `ListDrag15`)
+
+- **읽기 화면 [이동 ▾]**: 도구 줄 답장 · 전체 답장 · 전달 | **이동 ▾** · 스팸 신고 · 삭제 · ⋯ — 메일이 어디로 가는지를 한 묶음에 둔다(목록 보기는 지금처럼 구분선 없이 [전달] 뒤).
+  메뉴는 목록 도구 줄의 [이동 ▾]와 같은 부품(항목 40) · 같은 옮길 곳이다. 그 메일이 든 메일함(검색 결과에서 연 메일도 그 메일이 든 메일함) · 임시보관함 · 휴지통은 없다 — 휴지통으로는 [삭제]로 옮긴다.
+  보내기를 기다리는 메일(보내는 중 · 예약)에는 [스팸 신고]처럼 없다. 키보드는 목록의 [이동 ▾]와 같다(Enter · Space · 아래 화살표로 열면 첫 항목에 초점, Esc 는 메뉴만 닫고 [이동 ▾]으로).
+- **옮긴 뒤**: [삭제]와 같은 길 — 분할 보기는 목록의 다음 메일을 열고 목록 보기는 목록으로 돌아간다. 알림 "메일 1통을 거래처 › 2025로 옮겼습니다." + [되돌리기](10초 — 되돌리면 "메일 1통을 받은편지함으로 되돌렸습니다.").
+- **옮길 메일함은 메일함 패널처럼**: 같은 차례로 깊이만큼 들여 쓰고(10 · 28 · 44 · 56, 3단계까지) 앞에 패널과 같은 아이콘, 기본 메일함과 내 메일함 사이에 가는 선.
+  들여 쓴 메일함은 화면 낭독이 위 메일함부터 읽는다("거래처 안의 2025"). 목록의 [이동 ▾]도 같은 모양이다.
+- **그 메일이 든 메일함에 하위 메일함이 있으면** 빼지 않고 고를 수 없는 흐린 줄(aria-disabled)로 남기고 이름 아래에 "이 메일이 있는 메일함" — 하위 메일함이 누구 밑에 있는지 보이게.
+  하위 메일함이 없으면 지금처럼 뺀다. 목록의 [이동 ▾]는 같은 규칙에 글만 "고른 메일이 있는 메일함"이다.
+- **알림의 메일함 이름**: 같은 이름의 메일함이 다른 곳에도 있을 때만 위 메일함 이름을 붙인다("거래처 › 2025로" — 정하는 규칙은 아래 "15단계 구현하며 정한 보완"의 메일함 나무 도우미).
+  목록의 [이동 ▾] · 끌어다 놓기 · 되돌리기 알림도 같다.
+- **메뉴 자리**: 화면(보이는 영역) 밖으로 넘치면 반대 끝에 맞춘다 — 단추 왼쪽 끝에 맞춘 메뉴가 오른쪽 밖으로 넘치면 메뉴 오른쪽 끝을 단추 오른쪽 끝에. 위아래만 바꾸던 메뉴 자리 정하기에 좌우를 더해 같은 부품의 모든 메뉴에 걸린다.
+- **좁은 읽기 칸**: 도구 줄의 이름은 화면 폭이 아니라 읽기 칸 폭(컨테이너 쿼리)으로 숨긴다 — 이름을 한 줄에 다 보일 폭에 여유를 둔 580(도구 줄 좌우 여백 포함 · 휴지통은 [영구 삭제] 때문에 605)보다 좁으면 아이콘만 40×44([이동 ▾]는 ▾ 까지).
+  이름은 마우스를 올리면 뜨는 글(title)과 화면 낭독(aria-label)으로 읽힌다. 분할 보기 1144~1233px 에서 두 줄로 꺾이던 일이 없고, 360 에서도 두 줄로 끝난다.
+- **끌어다 놓기**(목록 → 메일함 패널): 고른 줄을 끌면 고른 것 모두, 고르지 않은 줄을 끌면 그 줄만(고른 것은 그대로). 대화로 묶은 목록의 줄은 그 대화에서 지금 메일함에 든 메일(보내기를 기다리는 메일은 빼고 — [이동 ▾]와 같다),
+  보내기를 기다리는 메일의 줄 · 그런 메일뿐인 대화 줄은 끌 수 없다.
+  - 끄는 동안 마우스 오른쪽 아래에 "메일 N통" · "대화 N개" 표(알림과 같은 어두운 바탕 · 12.5 굵은 흰 글자 · 봉투 · 말풍선 아이콘). 끈 줄은 흐리게 하지 않는다.
+  - 놓을 수 있는 메일함 위에서는 그 줄에 2px 청록 점선 · 옅은 청록 바탕(쓰기 화면 파일 놓기와 같은 모양 — 초점 선과 헷갈리지 않게). 놓을 수 없는 곳(지금 메일함 · 임시보관함 · 「예약됨」)은 줄이 그대로이고 마우스 커서만 금지 모양이다.
+  - 놓을 곳은 [이동 ▾]의 옮길 곳 + 휴지통. 휴지통에 놓으면 [삭제], 스팸메일함에 놓으면 [스팸 신고]와 같고 그 밖은 [이동 ▾]와 같다(알림 · [되돌리기]도 같다).
+  - 마우스로만 한다 — 키보드 · 터치는 [이동 ▾]. 메일함 패널은 쓰기 화면에도 보이므로 파일 끌기는 받지 않는다(첨부 놓기와 겹치지 않게). 줄의 링크가 끌어 가던 메일 주소(URL)는 싣지 않는다 — 다른 창 · 바깥 프로그램에 놓아도 아무 일 없다.
+- **스팸메일함으로 옮기는 세 길 같게**: [스팸 신고] · [이동 ▾]에서 스팸메일함 · 스팸메일함에 끌어다 놓기는 모두 스팸 표시를 붙여 옮긴다. 스팸메일함에서 휴지통이 아닌 메일함으로 옮기면(메뉴 · 끌기)
+  [스팸 아님]과 같이 스팸 아님 표시를 붙인다 — "메일 1통을 스팸이 아닌 메일로 표시해 거래처로 옮겼습니다." 휴지통으로는 표시를 바꾸지 않는다. [되돌리기]는 표시도 되돌린다.
+- **화면에 파일을 잘못 놓으면**(메일 · 주소록 · 설정 — 로그인 뒤 모든 모듈 화면): 지금은 브라우저가 그 파일을 열어 웹메일을 떠났다 — 무시한다(놓는 동안 금지 커서). 쓰기 화면은 지금처럼 어디에 놓아도 첨부로, 서명 설정은 그림으로 받는다.
+- **상단 바 좁은 폭**(360 — 바 안쪽 256): [로그아웃]은 줄지도 꺾이지도 않는다. 이름 · 주소는 넘치면 끝을 "…"로 줄이고 마우스를 올리면 다 보인다(title "김아라 (ara.kim@arasystem.it.kr)").
+  화면 폭 480 이하에서는 주소를 감추고 이름만 둔다. 줄 수와 차례(메일 · 검색 칸 · 계정)는 지금과 같다 — 계정 줄을 첫 줄로 올리지 않는다(Tab 차례). 검색 칸은 바 안쪽 폭에 맞게 준다.
+- **같은 대화 [모두 펼치기]**: 칸 머리 오른쪽의 글자 단추(36 — 펼친 줄의 [답장]과 같은 크기, 안내 줄 단추 `--size-notice-action` 재사용). 불러온 줄(지금 보는 메일 빼고)을 모두 펼치고 [모두 접기]로 바뀐다 —
+  줄을 하나씩 다 펼쳐도 [모두 접기]이고, 하나라도 접혀 있으면 [모두 펼치기]. [더 보기]로 더 받은 줄은 접힌 채로 온다.
+  본문은 한꺼번에 받지 않는다 — 화면에 들어오는 줄부터 하나씩(요청 수 한도와 화면 무게), 아직 화면 밖인 줄은 받는 중과 같은 자리만 둔다.
+  읽음은 지금 규칙 그대로 — 본문이 화면에 보인 메일만 읽음이 되고 펼쳤어도 화면 밖이면 그대로다.
+- **펼친 줄 머리 [답장]**: 펼친 줄 머리 오른쪽(36) — 긴 메일을 끝까지 내리지 않고 답장한다. 줄 머리 전체가 펼침 단추라 머리를 감싸는 틀을 두고 펼침 단추와 [답장]을 나란히 놓는다(마우스를 올린 바탕은 틀 전체).
+  아래쪽 [답장] · [이 메일만 열기]는 그대로이고, 임시 저장본 · 예약한 메일의 줄에는 없다(지금과 같다).
+
+### 메일함 ⋯ 「옮기기」 · 옮기기 창 (`Mailbox15` 1~4)
+
+- **⋯ 메뉴**: 내 메일함(역할 없는 메일함 — 받은편지함 아래에 만든 메일함 포함)에만 「옮기기」. 차례는 모두 읽음으로 표시 · 하위 메일함 만들기 · 이름 바꾸기 · **옮기기** · 지우기.
+  창을 여는 다른 항목처럼 이름 뒤에 …를 붙이지 않는다. 메일함을 지우는 동안에는 지금처럼 모든 항목을 누를 수 없다.
+- **옮기기 창**(모달 400): 제목 "‘2025’ 메일함을 어디로 옮길까요?" · 글 "하위 메일함과 안의 메일도 함께 옮깁니다."(하위가 없으면 "안의 메일도 함께 옮깁니다.") → 옮길 곳 목록 → [옮기기] [취소].
+  - 목록(테두리 칸 · 줄 40 · 메일함 패널과 같은 차례 · 들여쓰기 10 · 28 · 44 · 56 · 패널 아이콘): 「맨 위」(위 화살표 — "다른 메일함 안에 두지 않습니다") · 받은편지함(과 그 아래) · "내 메일함" 묶음.
+    보낸편지함 · 임시보관함 · 스팸메일함 · 휴지통은 없다(하위 메일함을 만들 수 있는 곳과 같다). 메일함이 많으면 목록 칸 안에서 스크롤한다.
+  - 처음에는 아무 곳도 고르지 않은 채 열리고 [옮기기]는 꺼져 있다. 고른 줄은 패널의 지금 메일함처럼 청록 바탕 · 굵은 글자 · 오른쪽 체크.
+  - 고를 수 없는 줄은 이름 · 아이콘만 흐리게(까닭 글은 그대로): 옮기는 메일함과 그 하위(까닭 없음) · 지금 있는 곳("지금 있는 곳" — 맨 위의 메일함이면 맨 위 줄) ·
+    바로 아래에 같은 이름의 메일함이 있는 곳("같은 이름의 메일함이 있습니다" — 대소문자를 가리지 않는다, 서버에 묻기 전에 화면이 하는 검사).
+  - 줄은 radiogroup 의 radio 다. 화살표로 줄을 옮기면 고를 수 있는 줄은 바로 고르고, Enter 는 [옮기기], Esc 는 [취소]와 같다. 들여 쓴 줄은 위 메일함부터 읽는다("거래처 안의 2025").
+- **그사이 같은 이름이 생겼을 때**(드묾 — 409 `MAIL_009`): 목록 아래 빨간 사전 문구 "같은 이름의 메일함이 이미 있습니다." — 알림 없이 창을 둔다. 다른 곳을 고르면 사라진다.
+  그사이 메일함이 사라졌으면(`RES_001`) 알림을 띄우고 창을 닫은 뒤 메일함 목록을 다시 받는다(이름 바꾸기 창과 같다). 옮기는 동안에는 [옮기기]를 다시 누를 수 없다.
+- **옮긴 뒤**: 메일함 패널에 바로 나타나고(하위 메일함과 안의 메일이 함께 간다 · 그 메일함으로 옮기는 필터도 그대로 돈다), 보던 메일함이면 그 메일함을 계속 본다.
+  알림 "‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다."(받은편지함은 따옴표 없이 "…받은편지함 안으로 …") · 맨 위로는 "‘2025’ 메일함을 다른 메일함 밖으로 옮겼습니다." + [되돌리기](원래 있던 곳으로 —
+  "‘2025’ 메일함을 ‘거래처’ 안으로 되돌렸습니다.").
+
+### 하위 메일함까지 지우기 (`Mailbox15` 5)
+
+- 하위 메일함이 있는 메일함의 「지우기」는 지금까지의 "지울 수 없습니다" 창 대신 확인 창(처음 초점 [취소]): "‘거래처’ 메일함과 하위 메일함 2개를 지울까요?" ·
+  "하위 메일함에 든 메일까지 모두 40통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다. 지운 메일함은 되돌릴 수 없습니다." [지우기] [취소].
+  메일이 하나도 없으면 둘째 글은 "하위 메일함까지 모두 비어 있습니다. 지운 메일함은 되돌릴 수 없습니다." 하위 메일함 수 · 메일 수는 모든 깊이를 센다.
+- 확인하면 같은 지우기를 하위까지(`?withChildren=true`) 보낸다 — 진행 · 결과는 지금 메일함 지우기 그대로("‘거래처’ 메일함을 지우는 중 · 12 / 40통" → "‘거래처’ 메일함을 지웠습니다. 안의 메일 40통은 휴지통에 있습니다.").
+  휴지통을 비우는 동안에는 [지우기]를 누를 수 없다(지금과 같다).
+
+### 보낸 사람 차단 창 — 받은편지함의 메일도 옮기기 (`Mailbox15` 6~7)
+
+- 「이 메일도 스팸메일함으로 옮기기」 아래에 「받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기」 + "옮긴 메일은 한꺼번에 되돌릴 수 없습니다." — 창을 열 때마다 **꺼진 채** 시작한다.
+  「이 도메인 전체」를 고르면 "…이 도메인의 메일도 …"(그 도메인만 — 하위 도메인은 보지 않는다). 두 칸은 붙여 두고, 칸 글이 두 줄이면 고르기 상자를 첫 줄에 맞춘다. 칸 아래 글은 글 선(28)에 맞춘다.
+- 새 칸을 켰는데 이 메일이 받은편지함에 있으면 첫 칸은 켜진 채 잠기고(aria-disabled) 아래에 "받은편지함의 메일을 옮길 때 함께 옮깁니다." — 새 칸을 끄면 첫 칸은 원래 값으로 돌아온다.
+  이 메일이 다른 메일함에 있으면 잠그지 않는다. 스팸메일함의 메일이면 첫 칸은 지금처럼 없고 새 칸은 남는다.
+- 이 탭에서 받은편지함을 정리하는 동안(필터 적용 · 다른 차단 정리)은 새 칸을 끄고(aria-disabled) 칸 아래 글을 "받은편지함을 정리하는 중이라 지금은 고를 수 없습니다."로 바꾼다.
+  이 탭에서 스팸메일함을 비우는 동안도 끄고 "스팸메일함을 비우는 중이라 지금은 고를 수 없습니다."로 바꾼다(보드에 없다 — 아래 "15단계 구현하며 정한 보완").
+- **차단한 뒤**: 새 칸을 켜지 않았으면 지금 알림 그대로(+ [되돌리기]). 켰으면 차단 알림을 따로 띄우지 않고 알림 하나가 진행을 보이다 같은 자리에서 결과로 바뀐다 — [되돌리기]는 없다(차단은 설정에서 푼다):
+  "‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인"(확인한 메일 / 받은편지함의 메일 수 — 첫 응답 전에는 받은편지함의 메일 수) →
+  "‘news@example.com’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다." + [스팸메일함 보기] · 옮길 메일이 없으면 "…차단했습니다. 받은편지함에는 옮길 메일이 없습니다."(단추 없음).
+  - 멈춤: "…받은편지함은 4,800통 가운데 1,200통까지 확인해 12통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요." + [다시 시도](멈춘 자리부터 · 수는 이어 센다)
+  - 처음부터 실패: "…차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요." + [다시 시도](처음부터)
+  - 다른 창에서 하는 중: "…차단했습니다. 다른 창에서 받은편지함이나 스팸메일함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요." + [다시 시도] — 차단한 뒤에는 ⋯ 메뉴가 「차단 풀기」라 다시 고를 길이 이것뿐이다.
+    서버의 차단 정리는 받은편지함 정리(필터 적용)뿐 아니라 스팸메일함 비우기와도 잠금을 나누어 두 곳을 함께 말한다(2026-11-09 재리뷰).
+    필터 적용의 429 글은 "다른 창에서 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요." 그대로다(7단계의 "다른 창에서 필터로 …"를 이 글로 바꿨다).
+  - 그동안 다른 화면으로 가도 이어 하고, 탭을 닫거나 로그아웃하면 멈추고 알림을 닫는다. 필터 적용과 이 일은 한 직원에 한 번에 하나다. 잘못 옮긴 메일은 스팸메일함에서 [스팸 아님]으로 돌려놓는다.
+
+### 예약한 메일 [지금 보내기] (`Reader15` 4~5)
+
+- 예약한 메일의 청록 안내 줄 단추가 [지금 보내기] [고치기] [예약 취소] 차례다(같은 흰 단추 36 — 누르는 동안 세 단추를 함께 막는다). 예약됨 목록 줄 · 휴대폰 앱에는 두지 않는다.
+- 누르면 [보내기]를 누른 것과 같다 — 보내기 취소 설정의 초만큼 기다렸다 보내고, 그동안 "메일을 보냈습니다." + [보내기 취소] + 남은 시간 막대(9단계 마감 알림 그대로). 확인 창은 두지 않는다.
+  끔으로 두었거나 예약 시각이 막 지나 이미 보낸 메일이면 오류가 아니라 "메일을 보냈습니다." + [보낸편지함 보기]. 받는 사람 일부가 받지 못하면 쓰기 화면과 같은 문장이다.
+- 알림의 [보내기 취소]는 지금의 [보내기 취소]와 같다(그 메일을 쓰기 화면으로 — 다시 예약하려면 [보내기 ▾] → [예약 발송…]).
+- 보낸 메일은 예약됨에서 빠지므로 분할 보기는 다음 예약 메일을 열고 목록 보기는 예약됨 목록으로 간다([예약 취소]와 같다). 예약됨 수를 다시 맞춘다. 보낸편지함에서 연 메일이면 그 자리에 두고 안내 줄만 사라진다(날짜 칸은 보내는 동안 "보내는 중").
+- 예약 시각보다 먼저 보내므로 대용량 첨부 링크의 기간은 실제로 보낸 날부터 센다(서버).
+- **보내지 못했거나 결과를 모를 때**(서버가 503 `MAIL_001` 로 답함 — 결과를 모르는 실패와 엔진이 거절해 임시보관함으로 되돌린 실패가 같은 꼴이다.
+  앞단의 502 · 504 · 시간 초과 · 연결 끊김(`SYS_001`)도 결과를 모르는 실패라 같은 갈래다): 사전 문구 알림은 끄고, 화면이 그 메일을 다시 받아 붙잡은 발송과 메일함으로 가른다(2026-11-09 15단계 리뷰 · 재리뷰).
+  - 임시보관함: "지금 보내지 못해 임시보관함으로 옮겼습니다." + [임시보관함 보기] — 예약됨을 떠났으니 안내 줄을 내리고 이동은 [예약 취소]와 같다.
+  - 예약이 그대로(예약을 거두기 전에 멈췄다 — 예약한 시각에 나간다): "지금 보내지 못했습니다. 다시 시도해 주세요." + [다시 시도](같은 요청 — 같은 메일은 요청 하나로 묶는다). 안내 줄은 그대로 둔다.
+  - 예약만 풀렸다(보낸편지함에 있고 기다리는 발송이 없다 — 예약한 시각에 따로 나가지는 않는다): "메일을 보냈는지 확인하지 못했습니다. [다시 시도]를 누르면 아직 보내지 않았을 때만 보냅니다." + [다시 시도].
+    이미 나갔을 수 있어(보내기 취소 0초로 바로 나감 · 응답만 잃음 · 그사이 예약 시각이 됨) 못 보냈다고 단정하지 않는다 — 그 글을 믿고 손으로 다시 보내면 두 통이 간다(2026-11-09 마지막 확인).
+    [다시 시도]는 같은 요청이라 안전하다(이미 보낸 메일이면 서버가 200 으로 답한다). 예약이 아닌 것은 확인했으니 "…에 보낼 메일입니다." 안내 줄은 내린다 — 예약됨 · 보낸편지함 · 검색 어디서 열었든.
+    예약됨에서는 빠지므로 이동은 [예약 취소]와 같고, 보낸편지함 · 검색에서 연 메일은 그 자리에 둔다.
+  - 다시 낸 발송이 보내기 취소를 기다린다: 보낸 것과 같다("메일을 보냈습니다." + [보내기 취소]).
+  - 그 메일을 다시 받지 못했다: 위와 같은 "메일을 보냈는지 확인하지 못했습니다. …" + [다시 시도] — 보냈다 · 못 보냈다 · 되돌렸다고 말하지 않는다(닫힌 쪽).
+    안내 줄은 마지막으로 안 상태 그대로 두고, 다음 다시 맞추기에서 바로잡힌다.
+  - 예약됨 수와 목록은 어느 쪽이든 다시 맞춘다. 받는 사람이 모두 받지 않으면(400 `MAIL_010` · 503 `MAIL_011` — 그 메일은 임시보관함에) 사전 문구 그대로다.
+  - **알려진 한계**: 드물게 [다시 시도]를 누르지 않고 알림을 닫으면 그 메일은 보내지 않은 채 보낸편지함에 남는다 — 9단계 예약 취소와 같은 한계다.
+
+### 처음 판에서 미룬 것
+
+메일함을 끌어 옮기기 · 순서 바꾸기(옮기기 창으로), 차단할 때 옮긴 메일의 한꺼번에 되돌리기, 예약됨 목록 줄의 단추, 옮기기 단축키, 휴대폰 앱의 [지금 보내기].
+
 ## 구현하며 정한 보완 (2026-10-26 — 캔버스에는 아직 없다)
 
 - 찾지 못한 첨부(보관 시간이 지난 업로드·지워진 원본)는 실패로 표시하고, 전달 원본에는 "빼기"만 둔다(다시 올릴 수 없다).
@@ -1574,3 +1682,75 @@ PC 에서는 설정 › 계정 › 휴대폰 앱(A)이 QR 코드로 휴대폰에
 - **앱 그림**의 모서리는 한 변의 1/4 이다(48 은 12, 52 는 13 — 보드 값).
 - **폭 기준**: 설정의 QR 줄을 빼는 좁은 폭은 480 이하(공개 내려받기 화면의 좁은 폭과 같은 값), `/app` 의 넓은 화면은 그 반대(481 이상)다.
 - 글자 크기 17(`/app` 의 앱 이름 · 받을 앱이 없을 때의 제목)은 토큰 `--font-size-title-md` 를 더했다(크기 · 밀도 예외 토큰은 아니다).
+
+### 15단계 구현하며 정한 보완 (2026-11-09 — 캔버스에는 아직 없다)
+
+메일함 · 차단 · 예약 쪽을 먼저, 읽기 화면 · 목록 · 상단 바 쪽을 뒤에 적는다.
+
+- **메일함 나무 도우미**(`shared/utils/mailbox.ts`): 패널 차례로 편 나무 `mailboxTree`(깊이 · 위 메일함 · 하위가 있는지 · 묶음), 화면 낭독 이름 `mailboxSpokenName`("거래처 안의 2025" —
+  더 깊으면 "거래처 안의 2025 안의 정산"), 알림 이름 `mailboxDisplayName`(같은 이름이 다른 곳에도 있을 때만 "거래처 › 2025" — 위 메일함까지 같으면 가를 수 있을 때까지 올라간다, 맨 위의 메일함은 이름 그대로).
+  [이동 ▾] · 끌어다 놓기 · 옮기기 창이 함께 쓴다. 알림의 이름은 글자 모양으로 견주고(NFC — 대소문자는 가린다), 같은 자리 겹침은 대소문자를 가리지 않는다(엔진과 같다).
+- **옮기기 창**
+  - 옮길 곳은 ⋯ 「하위 메일함 만들기」가 있는 메일함(받은편지함 · 내 메일함)과 맨 위다. 하위를 둘 수 없는 메일함(보낸편지함 등 · 보관함) 아래의 메일함은 그 위까지 모두 둘 수 있는 곳일 때만 넣는다 —
+    다른 메일 프로그램이 보낸편지함 아래에 만든 메일함은 옮길 곳에 없다.
+  - 화살표는 꺼진 줄에도 초점을 옮긴다(까닭을 읽게 — 고른 것은 그대로). 처음과 끝에서 돌고, Home · End 도 된다. 처음 초점은 고를 수 있는 첫 줄이다(로빙 tabindex).
+  - 맨 위에서 옮긴 것을 되돌린 글은 "‘2025’ 메일함을 다른 메일함 밖으로 되돌렸습니다."(보드에 없다 — 맨 위로 옮긴 글과 같은 결). [되돌리기]가 실패하면(그사이 원래 자리에 같은 이름 · 원래 상위가 지워짐) 사전 문구 알림만.
+  - 옮길 수 없는 자리였으면(400 `VAL_001` — 그사이 나무가 바뀜) 알림을 본 뒤 메일함 목록을 다시 받고 창은 둔다(다시 고를 수 있게). `REQ_001`(그 메일함을 정리하는 중) 등도 알림만 · 창은 그대로.
+  - 옮기는 동안 [옮기기]는 `aria-disabled` + `aria-busy`(누른 단추가 초점을 잃지 않게), 고르기 전에는 `disabled`.
+- **하위까지 지우기**: 지우는 동안 나무의 모든 메일함(하위 포함)을 "지우는 중"으로 둔다 — 그 메뉴들이 꺼지고, 나무 안의 메일함을 따로 지우기 시작하지 않는다.
+  하위 메일함을 보고 있었어도 끝나면 받은편지함으로 간다. 하위가 없는 메일함은 지금처럼 `withChildren` 없이 보낸다.
+- **차단할 때 받은 메일 옮기기**
+  - 「이 메일도 …」가 켜져 있으면 그 메일을 먼저 옮긴 뒤 받은편지함 정리를 시작한다. 그 메일이 받은편지함에 있었으면 옮긴 수에 넣는다.
+    옮긴 뒤 읽기 화면은 다음 메일을 열지 않고 목록으로 간다 — 분할 보기는 읽기 칸이 비고 목록 보기는 목록이다(2026-11-09 실사용 시험: 다음 메일이 같은 보낸 사람의 것이면
+    열자마자 읽음이 되고, 곧 정리가 스팸메일함으로 옮겨 받은편지함 주소에 [스팸 아님] · 차단 안내가 뜬 채 남았다). 목록은 정리가 끝나면 다시 맞춘다. 새 칸을 켜지 않은 차단은 지금처럼 삭제와 같이 다음 메일이다.
+  - 이 탭에서 받은편지함을 정리하는 중에 [다시 시도]를 누르면 "‘…’을(를) 차단했습니다. 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요." + 같은 [다시 시도](보드에 없다 — 필터 적용의 busy 와 같은 결).
+  - 그사이 차단을 풀었으면(404 `RES_001`) 진행 알림을 닫고 사전 문구만 보인다.
+  - 끝났거나 나아간 뒤 멈췄으면 개수를 다시 받고, 받은편지함 · 스팸메일함 목록을 보고 있으면 그 목록도 맞춘다(필터 적용과 같다).
+  - 되풀이(cursor · 25초 · 나아가지 못한 응답 3번)는 필터 적용과 함께 쓴다(`stores/inbox-cleanup-run.ts`).
+  - 이 탭에서 받은편지함 정리(필터 적용 · 차단 정리)가 하나라도 도는 동안은 필터 고치기 창의 「받은편지함에 이미 있는 메일도 정리하기」도 끈다 — 차단 창의 새 칸과 같은 규칙(`inboxBusy`)이다.
+    두 칸의 까닭 글은 같은 공용 글 "받은편지함을 정리하는 중이라 지금은 고를 수 없습니다."(Mailbox15 보드의 차단 칸 글)이고, 7단계 칸 글 "다른 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤에 고를 수 있습니다."도
+    이 글로 바꿨다 — 칸을 끈 까닭이 필터가 아니라 차단 정리일 수도 있어서다(메인이 정함).
+    같은 까닭으로 필터 적용 알림의 [다시 시도]도 이 탭의 차단 정리를 보고(`inboxBusy`), 그때 글은 공용 글 "받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요."다(7단계 "다른 필터로 …"에서 바꿨다).
+  - 이 탭에서 차단 정리가 도는 동안은 스팸메일함 비우기를 시작할 수 없다(메뉴 · 목록 머리 [비우기] · 확인 단추가 같은 판정 — 휴지통 비우기와 메일함 지우기를 함께 돌리지 않는 규칙과 같은 결).
+    옮겨 온 메일이 들어오자마자 영구 삭제되지 않게다. 반대로 이 탭에서 스팸메일함을 비우는 동안은 차단 창의 새 칸을 끄고(까닭 "스팸메일함을 비우는 중이라 지금은 고를 수 없습니다.") 차단 정리를 시작하지 않는다 —
+    알림의 [다시 시도]를 누르면 "‘…’을(를) 차단했습니다. 스팸메일함을 비우는 중입니다. 끝난 뒤 다시 시도해 주세요." + 같은 [다시 시도](2026-11-09 재리뷰).
+    필터 적용은 스팸메일함에 넣지 않으므로 막지 않는다(`inboxBusy` 는 그대로이고 차단 정리만 `mail-block-run.store` 의 `startBlock` 을 본다).
+    다른 창과는 서버가 요청마다 스팸메일함 처리 잠금을 잡아 겹친 요청을 429 로 막지만, 잠금은 요청 하나씩이라 두 창의 비우기와 차단 정리가 요청 사이에 번갈아 돌 수 있다 —
+    차단 정리가 옮겨 넣은 메일을 다른 창의 다음 비우기 요청이 지울 수 있다(알려진 한계 — 다른 창끼리의 휴지통 비우기와 메일함 지우기와 같다, 계약 2절 "보낸 사람 차단").
+- **지금 보내기**
+  - 서버가 혹시 409 `MAIL_014`(이미 보냄)로 답해도 보낸 것으로 다룬다("메일을 보냈습니다." — 약속은 200 이다).
+  - 503 `MAIL_001` · `SYS_001` 의 갈래(임시보관함 · 예약 그대로 · 예약만 풀림 · 다시 낸 발송이 기다림 · 다시 받지 못함)는 위 "예약한 메일 [지금 보내기]"에 적었다 — 사전 문구 알림은 끄고 화면 글 하나로 알린다.
+    판정은 `shared/utils/pending-send.ts` 의 `unsentReleaseState` 하나다(임시보관함을 먼저 보고, 다음으로 기다리는 발송의 종류). 다시 낸 발송이 보내기 취소를 기다리는 갈래는 리뷰에 없던 것이라 구현하며 정했다 —
+    같은 요청을 다시 보내도 서버가 그 상태로 200 을 주므로 보낸 것과 같게 알린다(받는 사람별 결과는 모르니 일부가 받지 못한 문장은 없다).
+    받는 사람이 모두 받지 않았거나(400 `MAIL_010` · 503 `MAIL_011`) 예약이 그사이 사라졌으면(404) 사전 문구 알림만 보이고 그 자리에 두며, 예약 표시 · 예약됨 수 · 보이는 목록을 서버 기준으로 다시 맞춘다.
+  - 보내기 취소 알림의 마감은 쓰기 화면과 같은 규칙이다(설정한 초를 알면 "지금 + 초 − 1초", 모르면 보낼 시각까지 · 30초를 넘지 않게 — `undoToastDeadline`).
+  - 안내 줄이 좁으면(글이 12rem 보다 좁아질 때) 단추 셋을 묶음째 다음 줄 오른쪽으로 보낸다 — 단추가 셋이 되며 360 폭에서 글이 한 글자 폭으로 눌리지 않게(보드는 넓은 폭만 그렸다).
+- **모달 창의 제목 · 글**(모든 창 — `ModalDialog`): 낱말 가운데서 줄을 바꾸지 않는다(`word-break: keep-all` — "지울까/요?"가 나왔다, 15단계 전부터).
+  띄어쓰기 없는 긴 글(긴 주소 · 파일 이름)은 창 밖으로 넘치지 않게 아무 데서나 끊는다(`overflow-wrap: anywhere`). 슬롯에 넣은 칸 · 목록은 쓰는 쪽이 정한다(2026-11-09 실사용 시험).
+
+**읽기 화면 · 목록 · 상단 바**
+
+- **좁은 읽기 칸의 기준(보드에 없는 것)**: 컨테이너는 도구 줄 띠(`.reader__toolbar-bar` — 칸 전체 폭)다. 목록 보기는 앞에 [목록으로] · 이전/다음이 함께 놓여 이름이 다 보이는 줄이 800(콘텐츠 열)보다 조금 넓다 —
+  그래서 목록 보기만 단추 줄의 최대 폭을 풀고 접는 폭을 850 · 휴지통 875 로 두었다(분할 보기의 필요 폭에 [목록으로] · 이전/다음 · 위치 글을 더한 어림 — 실사용 시험에서 넉넉했다). 화면 폭 기준은 tokens.css 머리에 한 줄씩 적었다.
+  분할 보기는 보드의 570 · 595 가 아니라 580 · 605 다 — 실측한 필요 폭(받은편지함 569.19 · 휴지통 594.83)에 여유가 0.81 · 0.17px 뿐이라 글자 · 여백이 1px 만 늘어도 좁은 구간에서 두 줄로 꺾인다(15단계 실사용 시험).
+- **메뉴 폭**: 옮길 메일함 메뉴는 이름 길이만큼(200 부터 320 까지 — 좁은 화면은 화면 폭 − 80 까지) 넓어지고 그보다 긴 이름은 줄을 바꾼다(보드는 줄을 바꾸지 않는 짧은 이름만 그렸다).
+- **좌우 바꾸기**: 오른쪽 끝에 맞춘 메뉴(⋯)가 왼쪽 밖으로 넘칠 때도 같은 규칙으로 단추 왼쪽 끝에 맞춘다(360 에서 ⋯ 가 둘째 줄 맨 앞으로 내려간다). 양쪽 다 넘치면 덜 넘치는 쪽이다(위아래와 같은 결).
+- **흐린 줄 더**: 하위 메일함이 있는 휴지통 · 임시보관함(다른 메일 프로그램이 지운 폴더를 휴지통 아래에 둔다)도 까닭 글 없이 흐린 줄로 남겨 그 하위 메일함을 고를 수 있게 한다.
+  흐린 줄 아래에 보일 하위 메일함이 하나도 없으면 그 줄도 뺀다.
+- **전체 메일함 검색에서 [이동 ▾] · 끌기**: 고른 메일이 모두 든 메일함만 "메일이 있는 메일함"으로 친다(메일마다 다르면 아무 데나 옮길 수 있다 — 지금과 같다).
+- **끌어다 놓기**
+  - 줄 전체가 끌린다(링크만이 아니라) — 목록 보기 표의 글은 마우스로 끌어 고를 수 없게 된다(두 번 눌러 고르기는 된다).
+  - 끄는 표는 메일 화면에 늘 그려 두는 화면 밖 요소를 브라우저가 찍은 것이다(setDragImage) — 운영체제 · 브라우저마다 투명도 · 커서 모양이 조금 다르다.
+  - 이 탭에서 시작한 끌기만 받는다(다른 탭 · 바깥에서 끌어 온 같은 꼴의 자료는 놓을 수 없다).
+  - 열어 둔 메일을 끌어 옮겼으면 목록 도구 줄로 옮길 때처럼 목록 주소로 바꿔 끼운다.
+  - 패널의 메일함이 많아 아래가 가려져 있으면 패널 끝에서 저절로 스크롤되는지는 브라우저가 한다 — 브라우저에서 확인한다.
+- **파일 놓기 무시는 앱 틀(AppShell)에**: 처음에는 메일 화면에만 걸어 주소록 · 설정에 놓은 파일은 여전히 브라우저가 열었다(15단계 실사용 시험) — 로그인 뒤 모든 모듈 화면이 쓰는 앱 틀로 옮겼다.
+  쓰기 화면 · 서명 설정도 앱 틀 안이라 두 창 처리기가 함께 걸린다 — 파일을 받는 화면이 떠 있으면 무시하는 쪽이 아무것도 하지 않는다(어느 쪽이 먼저 걸렸는지와 상관없이 받는 화면이 받는다).
+  앱 틀 밖의 화면(로그인 · 인쇄 · 휴대폰 앱 받기 · 공개 내려받기)은 그대로다.
+- **상단 바**: 줄어든 이름 · 주소의 title 은 이름 · 주소 칸 전체에 둔다(넓은 폭에서 주소가 줄어도 같은 글).
+  검색 칸(메일 검색 · 비활성 통합 검색)은 최소 폭을 0 으로 둔다 — 입력 칸의 기본 폭에 묶여 360 에서 278 로 바 안쪽(256)을 넘고 화면이 옆으로 10px 밀렸다(14단계부터 — 15단계 실사용 시험).
+- **같은 대화 [모두 펼치기]**
+  - 손으로 펼친 줄은 지금처럼 누른 그 자리에서 본문을 받고 받는 대로 읽음이다. [모두 펼치기]로 펼친 줄만 화면에 들어올 때 차례로 받는다 — 차례가 오기 전에 화면 밖으로 나간 줄은 건너뛰고 다시 들어오면 다시 줄을 선다.
+  - 받는 사이 화면 밖으로 나갔으면 읽음으로 바꾸지 않고, 다시 들어올 때 읽음이다(읽음이 실패해도 드나들 때마다 다시 묻지 않는다).
+  - 화면에 들어왔는지 알 수 없는 브라우저(IntersectionObserver 없음)는 펼친 줄이 생기면 들어온 것으로 본다 — 그래도 하나씩 받는다.
+  - 펼칠 줄이 없으면(지금 메일만 받고 나머지를 받는 중) 단추가 없다. 그사이 지워진 메일(본문이 404)의 줄에는 머리 [답장]도 없다(아래 [답장]과 같다).
diff --git a/docs/design/webmail/Reader15.dc.html b/docs/design/webmail/Reader15.dc.html
new file mode 100644
index 0000000..67d6d94
--- /dev/null
+++ b/docs/design/webmail/Reader15.dc.html
@@ -0,0 +1,1274 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<title>15단계 · 읽기 화면 · 이동 · 지금 보내기 · 같은 대화 펼치기</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<style>
+@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
+body{margin:0}
+a{color:#0E7C86}a:hover{color:#0A5F67}
+:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
+.ghost{background:transparent;color:#344054}
+.ghost:hover{background:#F2F4F7;color:#171C26}
+.danger{background:transparent;color:#B42318}
+.danger:hover{background:#FEF3F2;color:#912018}
+.menu-item{color:#171C26}
+.menu-item:hover{background:#F2F4F7}
+.text-btn{background:transparent;color:#0E7C86}
+.text-btn:hover{background:#E3F2F3;color:#0A5F67}
+.notice-btn{background:#FFFFFF;color:#0A5F67}
+.notice-btn:hover{background:#F3F8F8}
+.toast-action{background:transparent;color:#9ED6DB}
+.toast-action:hover{color:#FFFFFF}
+.conv-head{background:#FFFFFF}
+.conv-head:hover{background:#F8F9FB}
+</style>
+</helmet>
+<div style="width: 1440px; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: 56px; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5">
+
+  <header style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 6px; word-break: keep-all">
+    <h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">15단계 · 읽기 화면에서 옮기기 · 지금 보내기 · 같은 대화 모두 펼치기</h1>
+    <p style="margin: 0; max-width: 1180px; font-size: 13.5px; color: #4A5363">메일 15단계(메일 · 메일함 다루기) 가운데 읽기 화면에 더하는 셋입니다. 1~3은 도구 줄의 [이동 ▾]과 옮길 메일함의 들여쓰기, 4~5는 예약한 메일의 [지금 보내기], 6은 같은 대화 칸의 [모두 펼치기]와 펼친 줄 머리의 [답장]입니다. 화면 글은 지금 화면 상수의 글을 그대로 쓰고, 새로 지은 글은 [지금 보내기], [모두 펼치기], [모두 접기], 들여 쓴 메일함의 화면 낭독 이름(거래처 안의 2025), 흐린 줄의 까닭 글(이 메일이 있는 메일함), 같은 이름이 있을 때 알림에 붙는 위 메일함 이름(거래처 › 2025로)입니다. 예시 날은 2026년 11월 9일(월) 오전이고 직원은 김아라입니다. 메인 검토(정할 것 여섯)를 반영한 초안이며 사용자 확인 전입니다(2026-11-09).</p>
+  </header>
+
+  <sc-for list="{{ frames }}" as="f" hint-placeholder-count="6">
+    <section aria-labelledby="{{ f.headId }}" style="flex: 0 0 auto; box-sizing: border-box; padding: 48px 48px 14px; display: flex; flex-direction: column; gap: 6px; word-break: keep-all">
+      <h2 id="{{ f.headId }}" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640">{{ f.title }}</h2>
+      <p style="margin: 0; max-width: 1200px; font-size: 13.5px; color: #4A5363">{{ f.desc }}</p>
+      <sc-if value="{{ f.hasModes }}" hint-placeholder-val="{{ false }}">
+        <div role="group" aria-label="{{ f.modesLabel }}" style="display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px">
+          <sc-for list="{{ f.modes }}" as="s" hint-placeholder-count="2">
+            <button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 0 0 auto; min-width: 152px; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
+          </sc-for>
+        </div>
+      </sc-if>
+    </section>
+
+    <sc-if value="{{ f.isSplit }}" hint-placeholder-val="{{ true }}">
+      <div role="region" aria-label="{{ f.regionLabel }}" style="position: relative; flex: 0 0 auto; height: 730px; box-sizing: border-box; display: flex; background: #FFFFFF; border-top: 1px solid #E6E8EC; border-bottom: 1px solid #E6E8EC; overflow: hidden">
+
+        <nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
+          <a href="#" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
+            <img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
+          </a>
+          <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
+            <li>
+              <a href="#" aria-current="page" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; background: #155A64; color: #FFFFFF; font-size: 11px; font-weight: 600; text-decoration: none">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                <span>메일</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                <span>캘린더</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                <span>파일</span>
+              </a>
+            </li>
+            <li>
+              <a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                <span>주소록</span>
+              </a>
+            </li>
+          </ul>
+          <a href="#" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; color: #A3C2C6; font-size: 11px; font-weight: 500; text-decoration: none">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+            <span>설정</span>
+          </a>
+        </nav>
+
+        <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+
+          <header style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
+            <span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">메일</span>
+            <div role="search" style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 4px 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+              <input type="search" aria-label="메일 검색" placeholder="메일 검색" style="flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; color: #171C26">
+              <button type="button" title="조건으로 찾기" aria-expanded="false" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4A5363; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                <span>조건</span>
+              </button>
+            </div>
+            <div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
+              <span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 13px; font-weight: 600">김</span>
+              <div style="display: flex; flex-direction: column; line-height: 1.3">
+                <span style="font-weight: 600">김아라</span>
+                <span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
+              </div>
+              <a href="#" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; text-decoration: none">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                <span>로그아웃</span>
+              </a>
+            </div>
+          </header>
+
+          <div style="flex: 1 1 auto; min-height: 0; display: flex">
+
+            <nav aria-label="메일함" style="flex: 0 0 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
+              <a href="#" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; background: #0E7C86; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-decoration: none">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+                <span>메일 쓰기</span>
+              </a>
+              <div style="display: flex; flex-direction: column; gap: 1px">
+                <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+                  <sc-for list="{{ f.panelSys }}" as="b" hint-placeholder-count="6">
+                    <li style="border-radius: 7px; background: {{ b.bg }}">
+                      <a href="#" aria-current="{{ b.current }}" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ b.pad }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="{{ b.d }}"></path></svg>
+                        <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
+                        <sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="padding-right: 6px; font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
+                      </a>
+                    </li>
+                  </sc-for>
+                </ul>
+                <p style="margin: 12px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">내 메일함</p>
+                <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
+                  <sc-for list="{{ f.panelMine }}" as="b" hint-placeholder-count="5">
+                    <li style="border-radius: 7px; background: {{ b.bg }}">
+                      <a href="#" aria-current="{{ b.current }}" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 4px 0 {{ b.pad }}px; border-radius: 7px; color: {{ b.fg }}; font-weight: {{ b.fw }}; text-decoration: none">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><path d="{{ b.d }}"></path></svg>
+                        <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{ b.name }}</span>
+                        <sc-if value="{{ b.hasCount }}" hint-placeholder-val="{{ false }}"><span style="padding-right: 6px; font-size: 12px; font-weight: 600; color: {{ b.countColor }}; font-variant-numeric: tabular-nums">{{ b.count }}</span></sc-if>
+                      </a>
+                    </li>
+                  </sc-for>
+                </ul>
+                <button type="button" class="ghost" style="display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 7px; font: inherit; font-weight: 500; text-align: left; cursor: pointer">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  <span>새 메일함</span>
+                </button>
+              </div>
+              <div style="margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 2px; border-top: 1px solid #E6E8EC">
+                <div style="display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #667085">
+                  <span>메일함 사용량</span>
+                  <span style="font-variant-numeric: tabular-nums">0.9 / 5 GB</span>
+                </div>
+                <div style="height: 4px; border-radius: 2px; background: #E4E7EC">
+                  <div style="width: 18%; height: 4px; border-radius: 2px; background: #0E7C86"></div>
+                </div>
+              </div>
+            </nav>
+
+            <section aria-labelledby="{{ f.listTitleId }}" style="flex: 0 0 384px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; border-right: 1px solid #E6E8EC">
+              <div style="display: flex; align-items: center; gap: 4px; min-height: 52px; box-sizing: border-box; padding: 4px 4px 4px 16px; border-bottom: 1px solid #E6E8EC">
+                <div style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden">
+                  <h3 id="{{ f.listTitleId }}" style="flex: 0 0 auto; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap">{{ f.listTitle }}</h3>
+                  <span style="flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">{{ f.listCount }}</span>
+                </div>
+                <div style="flex: 0 0 auto; display: flex; align-items: center; gap: 4px">
+                  <sc-if value="{{ f.groupToggle }}" hint-placeholder-val="{{ true }}">
+                    <button type="button" aria-pressed="false" aria-label="대화로 묶기" title="대화로 묶기" style="width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF; color: #344054; cursor: pointer">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                    </button>
+                  </sc-if>
+                  <div role="group" aria-label="보기 방식" style="display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #D0D5DD; border-radius: 8px; background: #FFFFFF">
+                    <span style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; background: #E3F2F3; color: #0A5F67; font-size: 12px; font-weight: 600">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2" ry="2"></rect><line x1="10" y1="4" x2="10" y2="20"></line></svg>
+                      <span>분할</span>
+                    </span>
+                    <span style="display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 6px; color: #344054; font-size: 12px; font-weight: 500">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"></line><line x1="9" y1="12" x2="20" y2="12"></line><line x1="9" y1="18" x2="20" y2="18"></line><line x1="4" y1="6" x2="4.01" y2="6"></line><line x1="4" y1="12" x2="4.01" y2="12"></line><line x1="4" y1="18" x2="4.01" y2="18"></line></svg>
+                      <span>목록</span>
+                    </span>
+                  </div>
+                  <button type="button" aria-label="새로고침" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #4A5363; cursor: pointer">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+                  </button>
+                </div>
+              </div>
+              <ul aria-label="{{ f.listLabel }}" style="list-style: none; margin: 0; padding: 0">
+                <sc-for list="{{ f.mailRows }}" as="r" hint-placeholder-count="10">
+                  <li style="display: flex; align-items: stretch; border-bottom: 1px solid #EEF0F3; background: {{ r.bg }}">
+                    <a href="#" style="flex: 1 1 auto; min-width: 0; min-height: 50px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 2px 6px 16px; line-height: 1.4; color: inherit; text-decoration: none">
+                      <span style="display: flex; align-items: center; gap: 6px">
+                        <span style="flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ r.whoFw }}; color: {{ r.whoColor }}">{{ r.who }}</span>
+                        <span style="flex: 0 0 auto; font-size: 12px; font-weight: {{ r.timeFw }}; color: {{ r.timeColor }}; font-variant-numeric: tabular-nums">{{ r.time }}</span>
+                      </span>
+                      <span style="display: flex; align-items: center; gap: 6px; min-width: 0">
+                        <span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: {{ r.subFw }}; color: #171C26">{{ r.subject }}</span>
+                        <sc-if value="{{ r.hasAtt }}" hint-placeholder-val="{{ false }}"><svg role="img" aria-label="첨부 있음" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg></sc-if>
+                      </span>
+                    </a>
+                    <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; display: flex; align-items: center; justify-content: center; color: #98A2B3">
+                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    </span>
+                  </li>
+                </sc-for>
+                <sc-for list="{{ f.schedRows }}" as="s" hint-placeholder-count="2">
+                  <li style="border-bottom: 1px solid #EEF0F3; background: {{ s.bg }}">
+                    <a href="#" style="display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px; align-content: center; min-height: 50px; box-sizing: border-box; padding: 6px 16px; line-height: 1.4; color: inherit; text-decoration: none">
+                      <span style="min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054">{{ s.who }}</span>
+                      <span style="font-size: 12px; font-weight: 600; color: #0A5F67; font-variant-numeric: tabular-nums; white-space: nowrap">{{ s.time }}</span>
+                      <span style="grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #171C26">{{ s.subject }}</span>
+                    </a>
+                  </li>
+                </sc-for>
+              </ul>
+            </section>
+
+            <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
+              <div style="border-bottom: 1px solid #E6E8EC">
+                <div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; max-width: 800px; box-sizing: border-box; padding: 4px 32px 4px 22px">
+                  <sc-if value="{{ f.toolsNormal }}" hint-placeholder-val="{{ true }}">
+                    <a href="#" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font-weight: 500; text-decoration: none">
+                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>
+                      <span>답장</span>
+                    </a>
+                    <a href="#" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font-weight: 500; text-decoration: none">
+                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg>
+                      <span>전체 답장</span>
+                    </a>
+                    <a href="#" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font-weight: 500; text-decoration: none">
+                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
+                      <span>전달</span>
+                    </a>
+                    <span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
+                    <div style="position: relative">
+                      <button type="button" class="ghost" onClick="{{ f.toggleMove }}" aria-haspopup="menu" aria-expanded="{{ f.moveOpenStr }}" title="이동" style="display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 44px; box-sizing: border-box; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: {{ f.moveBg }}; font: inherit; font-weight: 500; cursor: pointer">
+                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg>
+                        <span>이동</span>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                      </button>
+                      <sc-if value="{{ f.menuOpen }}" hint-placeholder-val="{{ true }}">
+                        <div role="menu" aria-label="옮길 메일함" style="position: absolute; top: 48px; left: 0; z-index: 5; min-width: 200px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+                          <sc-for list="{{ f.menuItems }}" as="m" hint-placeholder-count="8">
+                            <sc-if value="{{ m.isSep }}" hint-placeholder-val="{{ false }}"><hr style="width: 100%; height: 1px; margin: 4px 0; border: 0; background: #EEF0F3"></sc-if>
+                            <sc-if value="{{ m.isItem }}" hint-placeholder-val="{{ true }}">
+                              <button type="button" role="menuitem" class="menu-item" aria-label="{{ m.aria }}" aria-disabled="{{ m.ariaDisabled }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ m.pad }}px; border: 0; border-radius: 6px; background: {{ m.bg }}; font: inherit; text-align: left; white-space: nowrap; cursor: pointer">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ m.dim }}"><path d="{{ m.d }}"></path></svg>
+                                <span style="flex: 1 1 auto; opacity: {{ m.dim }}">{{ m.name }}</span>
+                              </button>
+                            </sc-if>
+                          </sc-for>
+                        </div>
+                      </sc-if>
+                    </div>
+                    <button type="button" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">
+                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                      <span>스팸 신고</span>
+                    </button>
+                  </sc-if>
+                  <button type="button" class="danger" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+                    <span>삭제</span>
+                  </button>
+                  <button type="button" class="ghost" aria-label="더 보기" title="더 보기" aria-haspopup="menu" aria-expanded="false" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg>
+                  </button>
+                </div>
+              </div>
+
+              <article aria-labelledby="{{ f.subjectId }}" style="display: flex; flex-direction: column; gap: 18px; max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px">
+                <div style="display: flex; align-items: flex-start; gap: 8px">
+                  <h3 id="{{ f.subjectId }}" style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">{{ f.subject }}</h3>
+                  <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                  </span>
+                </div>
+                <div style="display: flex; align-items: flex-start; gap: 12px">
+                  <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">{{ f.initial }}</span>
+                  <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px">
+                    <div style="display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
+                      <span style="font-size: 13.5px; font-weight: 600">{{ f.fromName }}</span>
+                      <span style="font-size: 12.5px; color: #667085">{{ f.fromEmail }}</span>
+                      <span style="margin-left: auto; font-size: 12.5px; color: #667085; white-space: nowrap; font-variant-numeric: tabular-nums">{{ f.date }}</span>
+                    </div>
+                    <span style="font-size: 12.5px; color: #4A5363"><span style="margin-right: 6px">받는 사람</span>{{ f.to }}</span>
+                  </div>
+                </div>
+                <sc-if value="{{ f.hasNotice }}" hint-placeholder-val="{{ false }}">
+                  <div style="display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 8px 8px 8px 12px; border-radius: 8px; background: #E3F2F3; color: #0A5F67; font-size: 12.5px">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                    <span style="flex: 1 1 auto; min-width: 0; font-weight: 500">{{ f.noticeText }}</span>
+                    <button type="button" class="notice-btn" style="flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #9ED6DB; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">지금 보내기</button>
+                    <button type="button" class="notice-btn" style="flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #9ED6DB; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">고치기</button>
+                    <button type="button" class="notice-btn" style="flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #9ED6DB; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">예약 취소</button>
+                  </div>
+                </sc-if>
+                <div style="white-space: pre-line; font-size: 14px; line-height: 1.75; color: #1F2733; max-width: 680px">{{ f.body }}</div>
+                <sc-if value="{{ f.hasAtt }}" hint-placeholder-val="{{ true }}">
+                  <section style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
+                    <h4 style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">첨부 파일 1개</h4>
+                    <div style="display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
+                      <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                      </span>
+                      <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
+                        <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">{{ f.attName }}</span>
+                        <span style="font-size: 12px; color: #667085">{{ f.attSize }}</span>
+                      </div>
+                      <button type="button" aria-label="{{ f.attLabel }}" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                      </button>
+                    </div>
+                  </section>
+                </sc-if>
+                <sc-if value="{{ f.hasConvPeek }}" hint-placeholder-val="{{ false }}">
+                  <section aria-label="같은 대화" style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
+                    <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px">
+                      <h4 style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">같은 대화 6통</h4>
+                      <button type="button" class="text-btn" style="flex: 0 0 auto; min-height: 36px; margin-right: -10px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">모두 펼치기</button>
+                    </div>
+                    <ol style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 8px; overflow: hidden">
+                      <sc-for list="{{ f.convPeek }}" as="p" hint-placeholder-count="3">
+                        <li style="border-top: {{ p.borderTop }}">
+                          <div style="display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 6px 14px">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: {{ p.avatarBg }}; color: {{ p.avatarFg }}; font-size: 12px; font-weight: 600">{{ p.initial }}</span>
+                            <span style="flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">{{ p.who }}</span>
+                            <sc-if value="{{ p.hasMailbox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; color: #667085">{{ p.mailbox }}</span></sc-if>
+                            <span style="flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ p.preview }}</span>
+                            <span style="flex: 0 0 auto; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">{{ p.time }}</span>
+                          </div>
+                        </li>
+                      </sc-for>
+                    </ol>
+                  </section>
+                </sc-if>
+              </article>
+            </div>
+          </div>
+        </div>
+
+        <sc-if value="{{ f.toastMove }}" hint-placeholder-val="{{ false }}">
+          <div role="status" style="position: absolute; right: 20px; bottom: 20px; z-index: 8; width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            <span style="flex: 1 1 auto; min-width: 0; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere">{{ f.toastText }}</span>
+            <button type="button" class="toast-action" style="flex: 0 0 auto; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">되돌리기</button>
+          </div>
+        </sc-if>
+        <sc-if value="{{ f.toastSent }}" hint-placeholder-val="{{ false }}">
+          <div role="status" style="position: absolute; right: 20px; bottom: 20px; z-index: 8; width: 400px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; padding: 8px 6px 10px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            <span style="flex: 1 1 0; min-width: 0; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere">메일을 보냈습니다.</span>
+            <button type="button" class="toast-action" style="flex: 0 0 auto; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer">보내기 취소</button>
+            <span aria-hidden="true" style="flex: 0 0 calc(100% - 8px); display: block; height: 3px; margin: 2px 0; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden"><span style="display: block; width: 62%; height: 100%; border-radius: 2px; background: #7FD3DA"></span></span>
+          </div>
+        </sc-if>
+      </div>
+    </sc-if>
+
+    <sc-if value="{{ f.isCuts }}" hint-placeholder-val="{{ false }}">
+      <div style="flex: 0 0 auto; box-sizing: border-box; padding: 4px 48px 0; display: flex; flex-direction: column; gap: 28px">
+        <div style="display: flex; gap: 32px; align-items: flex-start">
+
+          <div style="flex: 0 0 640px; display: flex; flex-direction: column; gap: 10px">
+            <div style="min-height: 62px; display: flex; flex-direction: column; gap: 2px; word-break: keep-all">
+              <h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">2-1. 폭 1024 · 읽기 칸 744 · 이름이 보임</h3>
+              <p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">읽기 칸이 목록 아래로 내려와 넓어서 이름이 다 보입니다. 읽기 칸에서 왼쪽 640만 잘랐습니다.</p>
+            </div>
+            <div style="width: 640px; height: 178px; box-sizing: border-box; overflow: hidden; background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 10px">
+              <div style="width: 744px">
+                <div style="border-bottom: 1px solid #E6E8EC">
+                  <div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; box-sizing: border-box; padding: 4px 32px 4px 22px">
+                    <a href="#" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font-weight: 500; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg><span>답장</span></a>
+                    <a href="#" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font-weight: 500; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg><span>전체 답장</span></a>
+                    <a href="#" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; font-weight: 500; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg><span>전달</span></a>
+                    <span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
+                    <button type="button" class="ghost" title="이동" aria-haspopup="menu" aria-expanded="false" style="display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 44px; box-sizing: border-box; padding: 0 8px 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg><span>이동</span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
+                    <button type="button" class="ghost" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg><span>스팸 신고</span></button>
+                    <button type="button" class="danger" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 500; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg><span>삭제</span></button>
+                    <button type="button" class="ghost" aria-label="더 보기" title="더 보기" aria-haspopup="menu" aria-expanded="false" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                  </div>
+                </div>
+                <div style="display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; padding: 20px 32px 0">
+                  <div style="display: flex; align-items: flex-start; gap: 8px">
+                    <h4 style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">2025년 유지보수 정산 자료 보내 드립니다</h4>
+                    <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+                  </div>
+                  <div style="display: flex; align-items: flex-start; gap: 12px">
+                    <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">한</span>
+                    <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
+                      <span style="font-size: 13.5px; font-weight: 600">(주)한빛솔루션 영업팀</span>
+                      <span style="font-size: 12.5px; color: #667085">sales@example.com</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div style="flex: 0 0 536px; display: flex; flex-direction: column; gap: 10px">
+            <div style="min-height: 62px; display: flex; flex-direction: column; gap: 2px; word-break: keep-all">
+              <h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">2-2. 폭 1200 · 분할 보기의 읽기 칸 536 · 아이콘만</h3>
+              <p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">읽기 칸이 570보다 좁아 아이콘만 남고 한 줄입니다. 화면 폭 1100 기준이던 때 이름이 두 줄로 꺾이던 폭입니다.</p>
+            </div>
+            <div style="width: 536px; height: 178px; box-sizing: border-box; overflow: hidden; background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 10px">
+              <div style="border-bottom: 1px solid #E6E8EC">
+                <div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; box-sizing: border-box; padding: 4px 32px 4px 22px">
+                  <a href="#" class="ghost" aria-label="답장" title="답장" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg></a>
+                  <a href="#" class="ghost" aria-label="전체 답장" title="전체 답장" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg></a>
+                  <a href="#" class="ghost" aria-label="전달" title="전달" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg></a>
+                  <span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
+                  <button type="button" class="ghost" aria-label="이동" title="이동" aria-haspopup="menu" aria-expanded="false" style="min-width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 0 8px 0 10px; border: 0; border-radius: 8px; font: inherit; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
+                  <button type="button" class="ghost" aria-label="스팸 신고" title="스팸 신고" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></button>
+                  <button type="button" class="danger" aria-label="삭제" title="삭제" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+                  <button type="button" class="ghost" aria-label="더 보기" title="더 보기" aria-haspopup="menu" aria-expanded="false" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                </div>
+              </div>
+              <div style="display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; padding: 20px 32px 0">
+                <div style="display: flex; align-items: flex-start; gap: 8px">
+                  <h4 style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">2025년 유지보수 정산 자료 보내 드립니다</h4>
+                  <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+                </div>
+                <div style="display: flex; align-items: flex-start; gap: 12px">
+                  <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 14px; font-weight: 600">한</span>
+                  <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px">
+                    <span style="font-size: 13.5px; font-weight: 600">(주)한빛솔루션 영업팀</span>
+                    <span style="font-size: 12.5px; color: #667085">sales@example.com</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div style="display: flex; gap: 32px; align-items: flex-start">
+        <div style="flex: 0 0 360px; display: flex; flex-direction: column; gap: 10px">
+          <div style="min-height: 82px; display: flex; flex-direction: column; gap: 2px; word-break: keep-all">
+            <h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">2-3. 폭 360 · 읽기 칸 288</h3>
+            <p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">왼쪽 띠는 앱 레일(72)입니다. 읽기 칸이 288이라 아이콘만 남고, [삭제]와 [⋯]가 둘째 줄로 넘어가 두 줄입니다.</p>
+          </div>
+          <div style="width: 360px; height: 300px; box-sizing: border-box; display: flex; overflow: hidden; background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 10px">
+            <div aria-hidden="true" style="flex: 0 0 72px; background: #0B3640"></div>
+            <div style="flex: 0 0 288px; min-width: 0">
+              <div style="border-bottom: 1px solid #E6E8EC">
+                <div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; box-sizing: border-box; padding: 4px 32px 4px 22px">
+                  <a href="#" class="ghost" aria-label="답장" title="답장" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg></a>
+                  <a href="#" class="ghost" aria-label="전체 답장" title="전체 답장" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg></a>
+                  <a href="#" class="ghost" aria-label="전달" title="전달" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg></a>
+                  <span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
+                  <button type="button" class="ghost" aria-label="이동" title="이동" aria-haspopup="menu" aria-expanded="false" style="min-width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 0 8px 0 10px; border: 0; border-radius: 8px; font: inherit; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
+                  <button type="button" class="ghost" aria-label="스팸 신고" title="스팸 신고" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></button>
+                  <button type="button" class="danger" aria-label="삭제" title="삭제" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+                  <button type="button" class="ghost" aria-label="더 보기" title="더 보기" aria-haspopup="menu" aria-expanded="false" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                </div>
+              </div>
+              <div style="display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; padding: 20px 32px 0">
+                <div style="display: flex; align-items: flex-start; gap: 8px">
+                  <h4 style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">2025년 유지보수 정산 자료 보내 드립니다</h4>
+                  <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="flex: 0 0 360px; display: flex; flex-direction: column; gap: 10px">
+          <div style="min-height: 82px; display: flex; flex-direction: column; gap: 2px; word-break: keep-all">
+            <h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">2-4. 폭 360 · [이동 ▾]을 연 모습</h3>
+            <p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">메뉴가 화면 오른쪽 밖으로 넘치면 메뉴 오른쪽 끝을 단추 오른쪽 끝에 맞춥니다. 메뉴 자리 정하기에 좌우 바꾸기를 더해, 같은 부품을 쓰는 모든 메뉴에 걸립니다.</p>
+          </div>
+          <div style="width: 360px; height: 420px; box-sizing: border-box; display: flex; overflow: hidden; background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 10px">
+            <div aria-hidden="true" style="flex: 0 0 72px; background: #0B3640"></div>
+            <div style="flex: 0 0 288px; min-width: 0">
+              <div style="border-bottom: 1px solid #E6E8EC">
+                <div role="group" aria-label="이 메일로 할 일" style="display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; box-sizing: border-box; padding: 4px 32px 4px 22px">
+                  <a href="#" class="ghost" aria-label="답장" title="답장" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg></a>
+                  <a href="#" class="ghost" aria-label="전체 답장" title="전체 답장" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="7 17 2 12 7 7"></polyline><polyline points="12 17 7 12 12 7"></polyline><path d="M22 18v-2a4 4 0 0 0-4-4H7"></path></svg></a>
+                  <a href="#" class="ghost" aria-label="전달" title="전달" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg></a>
+                  <span aria-hidden="true" style="width: 1px; height: 20px; margin: 0 6px; background: #E6E8EC"></span>
+                  <div style="position: relative">
+                    <button type="button" class="ghost" aria-label="이동" title="이동" aria-haspopup="menu" aria-expanded="true" style="min-width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 0 8px 0 10px; border: 0; border-radius: 8px; background: #F2F4F7; font: inherit; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5"></path><path d="M2 13h10"></path><path d="m9 16 3-3-3-3"></path></svg><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
+                    <div role="menu" aria-label="옮길 메일함" style="position: absolute; top: 48px; right: 0; z-index: 5; min-width: 200px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+                      <sc-for list="{{ f.cutMenu }}" as="m" hint-placeholder-count="8">
+                        <sc-if value="{{ m.isSep }}" hint-placeholder-val="{{ false }}"><hr style="width: 100%; height: 1px; margin: 4px 0; border: 0; background: #EEF0F3"></sc-if>
+                        <sc-if value="{{ m.isItem }}" hint-placeholder-val="{{ true }}">
+                          <button type="button" role="menuitem" class="menu-item" aria-label="{{ m.aria }}" aria-disabled="{{ m.ariaDisabled }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ m.pad }}px; border: 0; border-radius: 6px; background: {{ m.bg }}; font: inherit; text-align: left; white-space: nowrap; cursor: pointer">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; opacity: {{ m.dim }}"><path d="{{ m.d }}"></path></svg>
+                            <span style="flex: 1 1 auto; opacity: {{ m.dim }}">{{ m.name }}</span>
+                          </button>
+                        </sc-if>
+                      </sc-for>
+                    </div>
+                  </div>
+                  <button type="button" class="ghost" aria-label="스팸 신고" title="스팸 신고" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></button>
+                  <button type="button" class="danger" aria-label="삭제" title="삭제" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+                  <button type="button" class="ghost" aria-label="더 보기" title="더 보기" aria-haspopup="menu" aria-expanded="false" style="width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="19" cy="12" r="1.6"></circle></svg></button>
+                </div>
+              </div>
+              <div style="display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; padding: 20px 32px 0">
+                <div style="display: flex; align-items: flex-start; gap: 8px">
+                  <h4 style="flex: 1 1 auto; margin: 4px 0 0; font-size: 20px; line-height: 1.4; font-weight: 650; letter-spacing: -0.015em">2025년 유지보수 정산 자료 보내 드립니다</h4>
+                  <span aria-hidden="true" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #98A2B3"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div>
+      </div>
+    </sc-if>
+
+    <sc-if value="{{ f.isConv }}" hint-placeholder-val="{{ false }}">
+      <div style="flex: 0 0 auto; box-sizing: border-box; padding: 4px 48px 0; display: flex; gap: 40px; align-items: flex-start">
+        <sc-for list="{{ f.convCols }}" as="col" hint-placeholder-count="2">
+          <div style="flex: 0 0 652px; display: flex; flex-direction: column; gap: 10px">
+            <div style="height: 60px; display: flex; flex-direction: column; gap: 2px; word-break: keep-all">
+              <h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ col.title }}</h3>
+              <p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">{{ col.note }}</p>
+            </div>
+            <div style="box-sizing: border-box; background: #FFFFFF; border: 1px solid #D0D5DD; border-radius: 10px; overflow: hidden">
+              <div style="display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; padding: 14px 32px 30px">
+                <div style="font-size: 14px; line-height: 1.75; color: #1F2733; max-width: 680px">이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.<br><br>이도윤 드림</div>
+                <section style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
+                  <h4 style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">첨부 파일 1개</h4>
+                  <div style="display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 4px 2px 4px 8px; border: 1px solid #E6E8EC; border-radius: 8px">
+                    <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #F2F4F7; color: #4A5363"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg></span>
+                    <div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35">
+                      <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500">유지보수_계약서_수정본.docx</span>
+                      <span style="font-size: 12px; color: #667085">52 KB</span>
+                    </div>
+                    <button type="button" aria-label="유지보수_계약서_수정본.docx 내려받기" style="flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #344054; cursor: pointer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></button>
+                  </div>
+                </section>
+
+                <section aria-label="같은 대화" style="display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #EEF0F3">
+                  <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px">
+                    <h4 style="margin: 0; font-size: 12.5px; font-weight: 600; color: #4A5363">같은 대화 6통</h4>
+                    <button type="button" class="text-btn" onClick="{{ col.toggleAll }}" style="flex: 0 0 auto; min-height: 36px; margin-right: -10px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer">{{ col.headLabel }}</button>
+                  </div>
+                  <ol style="list-style: none; margin: 0; padding: 0; border: 1px solid #E6E8EC; border-radius: 8px; overflow: hidden">
+                    <sc-for list="{{ col.rows }}" as="c" hint-placeholder-count="6">
+                      <li style="position: relative; border-top: {{ c.borderTop }}">
+                        <sc-if value="{{ c.foldAbove }}" hint-placeholder-val="{{ false }}">
+                          <span aria-hidden="true" style="position: absolute; left: 0; right: 0; top: -2px; z-index: 2; border-top: 2px dashed #DC6803"></span>
+                          <span aria-hidden="true" style="position: absolute; right: 10px; top: -12px; z-index: 3; padding: 1px 8px; border-radius: 10px; background: #FEF0C7; color: #93370D; font-size: 11.5px; font-weight: 600; line-height: 20px; white-space: nowrap">누른 순간 화면 아래 끝</span>
+                        </sc-if>
+                        <sc-if value="{{ c.isCurrent }}" hint-placeholder-val="{{ false }}">
+                          <div aria-current="true" style="display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 6px 14px 6px 40px; background: #F3F8F8">
+                            <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 12px; font-weight: 600">{{ c.initial }}</span>
+                            <span style="flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">{{ c.who }}</span>
+                            <span style="flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: #0A5F67">지금 보고 있는 메일</span>
+                            <span style="flex: 0 0 auto; font-size: 12px; color: #667085; font-variant-numeric: tabular-nums">{{ c.time }}</span>
+                          </div>
+                        </sc-if>
+                        <sc-if value="{{ c.isOther }}" hint-placeholder-val="{{ true }}">
+                          <div class="conv-head" style="display: flex; align-items: center">
+                            <button type="button" aria-expanded="{{ c.expandedStr }}" onClick="{{ c.toggle }}" style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 6px {{ c.padRight }}px 6px 14px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer">
+                              <sc-if value="{{ c.expanded }}" hint-placeholder-val="{{ false }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="6 9 12 15 18 9"></polyline></svg></sc-if>
+                              <sc-if value="{{ c.collapsed }}" hint-placeholder-val="{{ true }}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="9 18 15 12 9 6"></polyline></svg></sc-if>
+                              <span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: {{ c.avatarBg }}; color: {{ c.avatarFg }}; font-size: 12px; font-weight: 600">{{ c.initial }}</span>
+                              <span style="flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600">{{ c.who }}</span>
+                              <sc-if value="{{ c.hasMailbox }}" hint-placeholder-val="{{ false }}"><span style="flex: 0 0 auto; font-size: 12px; color: #667085">{{ c.mailbox }}</span></sc-if>
+                              <span style="flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #667085">{{ c.preview }}</span>
+                              <span style="flex: 0 0 auto; font-size: 12px; font-weight: {{ c.timeFw }}; color: {{ c.timeColor }}; font-variant-numeric: tabular-nums">{{ c.time }}</span>
+                            </button>
+                            <sc-if value="{{ c.headReply }}" hint-placeholder-val="{{ false }}"><a href="#" class="text-btn" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; margin-right: 4px; padding: 0 10px; border-radius: 8px; font-weight: 600; text-decoration: none">답장</a></sc-if>
+                          </div>
+                          <sc-if value="{{ c.expanded }}" hint-placeholder-val="{{ false }}">
+                            <div style="display: flex; flex-direction: column; gap: 10px; padding: 2px 16px 14px 78px">
+                              <span style="font-size: 12.5px; color: #4A5363; overflow-wrap: anywhere"><span style="margin-right: 6px">받는 사람</span>{{ c.to }}</span>
+                              <span style="font-size: 12.5px; color: #667085; overflow-wrap: anywhere"><span style="margin-right: 6px">제목</span>{{ c.subject }}</span>
+                              <sc-if value="{{ c.loaded }}" hint-placeholder-val="{{ false }}"><div style="white-space: pre-line; font-size: 14px; line-height: 1.75; color: #1F2733">{{ c.body }}</div></sc-if>
+                              <sc-if value="{{ c.hasAttNote }}" hint-placeholder-val="{{ false }}">
+                                <span style="display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #4A5363; word-break: keep-all"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg><span>{{ c.attNote }}</span></span>
+                              </sc-if>
+                              <sc-if value="{{ c.loading }}" hint-placeholder-val="{{ false }}">
+                                <div aria-busy="true" aria-label="메일 불러오는 중" style="display: flex; flex-direction: column; gap: 10px; padding: 6px 0">
+                                  <span style="display: block; width: 80%; height: 10px; border-radius: 4px; background: #EEF0F3"></span>
+                                  <span style="display: block; width: 45%; height: 10px; border-radius: 4px; background: #EEF0F3"></span>
+                                </div>
+                              </sc-if>
+                              <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px">
+                                <sc-if value="{{ c.bottomReply }}" hint-placeholder-val="{{ true }}"><a href="#" class="text-btn" style="display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; font-weight: 600; text-decoration: none">답장</a></sc-if>
+                                <a href="#" class="text-btn" style="display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; font-weight: 600; text-decoration: none">이 메일만 열기</a>
+                              </div>
+                            </div>
+                          </sc-if>
+                        </sc-if>
+                      </li>
+                    </sc-for>
+                  </ol>
+                </section>
+              </div>
+            </div>
+          </div>
+        </sc-for>
+      </div>
+    </sc-if>
+
+    <sc-if value="{{ f.hasSamples }}" hint-placeholder-val="{{ false }}">
+      <div style="flex: 0 0 auto; box-sizing: border-box; padding: 22px 48px 0; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start">
+        <sc-for list="{{ f.samples }}" as="t" hint-placeholder-count="2">
+          <div style="flex: 0 0 {{ t.width }}px; display: flex; flex-direction: column; gap: 10px">
+            <div style="display: flex; flex-direction: column; gap: 2px; word-break: keep-all">
+              <h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ t.title }}</h3>
+              <p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">{{ t.note }}</p>
+            </div>
+            <sc-if value="{{ t.isToast }}" hint-placeholder-val="{{ false }}">
+              <div role="status" style="width: 400px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 6px 8px 14px; border-radius: 10px; background: #0B3640; color: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9FE0B5" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                <span style="flex: 1 1 auto; min-width: 0; font-weight: 500; word-break: keep-all; overflow-wrap: anywhere">{{ t.toastText }}</span>
+                <sc-if value="{{ t.hasAction }}" hint-placeholder-val="{{ false }}"><a href="#" class="toast-action" style="flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 6px; font-weight: 600; text-decoration: none">{{ t.actionLabel }}</a></sc-if>
+              </div>
+            </sc-if>
+            <sc-if value="{{ t.isMenu }}" hint-placeholder-val="{{ false }}">
+              <div role="menu" aria-label="옮길 메일함" style="width: 240px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.12)">
+                <sc-for list="{{ t.menu }}" as="m" hint-placeholder-count="9">
+                  <sc-if value="{{ m.isSep }}" hint-placeholder-val="{{ false }}"><hr style="width: 100%; height: 1px; margin: 4px 0; border: 0; background: #EEF0F3"></sc-if>
+                  <sc-if value="{{ m.isItem }}" hint-placeholder-val="{{ true }}">
+                    <button type="button" role="menuitem" class="menu-item" aria-label="{{ m.aria }}" aria-disabled="{{ m.ariaDisabled }}" style="display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 10px 0 {{ m.pad }}px; border: 0; border-radius: 6px; background: {{ m.bg }}; font: inherit; text-align: left; cursor: pointer">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; align-self: flex-start; margin-top: 12px; opacity: {{ m.dim }}"><path d="{{ m.d }}"></path></svg>
+                      <span style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 0">
+                        <span style="opacity: {{ m.dim }}">{{ m.name }}</span>
+                        <sc-if value="{{ m.hasNote }}" hint-placeholder-val="{{ false }}"><span style="font-size: 12px; line-height: 1.4; color: #667085">{{ m.note }}</span></sc-if>
+                      </span>
+                    </button>
+                  </sc-if>
+                </sc-for>
+              </div>
+            </sc-if>
+          </div>
+        </sc-for>
+      </div>
+    </sc-if>
+  </sc-for>
+
+  <div style="flex: 0 0 auto; box-sizing: border-box; padding: 52px 48px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; word-break: keep-all">
+    <sc-for list="{{ notes }}" as="n" hint-placeholder-count="4">
+      <section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid {{ n.border }}; border-radius: 12px">
+        <h2 style="margin: 0; font-size: 14px; font-weight: 700; color: {{ n.color }}">{{ n.title }}</h2>
+        <ul style="margin: 0; padding-left: {{ n.padLeft }}px; list-style: {{ n.listStyle }}; display: flex; flex-direction: column; gap: 6px; color: #344054">
+          <sc-for list="{{ n.items }}" as="i" hint-placeholder-count="5">
+            <li>{{ i.text }}</li>
+          </sc-for>
+        </ul>
+      </section>
+    </sc-for>
+  </div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":8043}}'>
+class Component extends DCLogic {
+  state = { moveOpen: null, convOpen: null };
+
+  // 메일함 아이콘 — 패널과 같은 Feather 도형을 path 하나로 옮겼다(웹 icons.ts 의 inbox · send · file-text · alert-octagon · trash · folder · clock)
+  icons() {
+    return {
+      inbox: 'M22 12L16 12L14 15L10 15L8 12L2 12M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z',
+      sent: 'M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z',
+      drafts: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2L14 8L20 8M16 13L8 13M16 17L8 17',
+      junk: 'M7.86 2L16.14 2L22 7.86L22 16.14L16.14 22L7.86 22L2 16.14L2 7.86ZM12 8L12 12M12 16L12.01 16',
+      trash: 'M3 6L5 6L21 6M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2',
+      folder: 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z',
+      scheduled: 'M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0M12 6L12 12L16 14',
+    };
+  }
+
+  // 깊이마다 왼쪽 안쪽 여백 — 메일함 패널과 같은 10 · 28 · 44 · 56(3단계까지)
+  indent(depth) {
+    return String([10, 28, 44, 56][Math.min(depth, 3)]);
+  }
+
+  boxRow(name, icon, depth, count, active) {
+    return {
+      name: name,
+      d: this.icons()[icon],
+      pad: this.indent(depth),
+      bg: active ? '#E3F2F3' : 'transparent',
+      fg: active ? '#0A5F67' : '#344054',
+      fw: active ? '600' : '500',
+      current: active ? 'page' : 'false',
+      hasCount: count > 0,
+      count: String(count),
+      countColor: active ? '#0A5F67' : '#171C26',
+    };
+  }
+
+  panel(active, inboxUnread, scheduledCount) {
+    return {
+      sys: [
+        this.boxRow('받은편지함', 'inbox', 0, inboxUnread, active === 'inbox'),
+        this.boxRow('보낸편지함', 'sent', 0, 0, false),
+        this.boxRow('예약됨', 'scheduled', 0, scheduledCount, active === 'scheduled'),
+        this.boxRow('임시보관함', 'drafts', 0, 0, false),
+        this.boxRow('스팸메일함', 'junk', 0, 0, false),
+        this.boxRow('휴지통', 'trash', 0, 0, false),
+      ],
+      mine: [
+        this.boxRow('거래처', 'folder', 0, 0, false),
+        this.boxRow('2025', 'folder', 1, 0, false),
+        this.boxRow('견적', 'folder', 1, 0, false),
+        this.boxRow('프로젝트', 'folder', 0, 0, false),
+        this.boxRow('2025', 'folder', 1, 0, false),
+      ],
+    };
+  }
+
+  inbox() {
+    return [
+      { id: 'r1', who: '(주)한빛솔루션 영업팀', time: '오전 10:42', subject: '2025년 유지보수 정산 자료 보내 드립니다', att: true },
+      { id: 'r2', who: '이도윤', time: '오전 9:30', subject: 'Re: 유지보수 계약 갱신 건', att: true, unread: true },
+      { id: 'r3', who: '인사팀', time: '오전 9:05', subject: '[인사팀] 11월 연차 사용 계획 제출 안내', unread: true },
+      { id: 'r4', who: '박준호', time: '어제', subject: '11월 인프라 점검 일정 조율' },
+      { id: 'r5', who: '최서연', time: '11월 6일', subject: '10월 경비 정산 마감 안내' },
+      { id: 'r6', who: '보안팀', time: '11월 5일', subject: '[공지] 하반기 정보보안 교육 이수 요청' },
+      { id: 'r7', who: '정하늘', time: '11월 4일', subject: '신규 입사자 메일 계정 생성 요청 (11/16 입사)' },
+      { id: 'r8', who: '총무팀', time: '11월 3일', subject: '[총무팀] 사무실 공조 설비 점검 일정 안내' },
+      { id: 'r9', who: '이도윤', time: '11월 2일', subject: '11월 배포 일정 공유' },
+      { id: 'r10', who: '김태윤', time: '10월 30일', subject: '회의실 예약 화면 저장 오류 문의' },
+    ];
+  }
+
+  // 분할 보기의 2줄 행 — 안 읽음은 굵기 · 색으로만(뱃지 없음)
+  mailRows(selectedId, removedId, readId) {
+    return this.inbox()
+      .filter((x) => x.id !== removedId)
+      .map((x) => {
+        const unread = !!x.unread && x.id !== readId;
+        return {
+          who: x.who,
+          time: x.time,
+          subject: x.subject,
+          hasAtt: !!x.att,
+          bg: x.id === selectedId ? '#E3F2F3' : '#FFFFFF',
+          whoFw: unread ? '650' : '450',
+          whoColor: unread ? '#171C26' : '#344054',
+          subFw: unread ? '600' : '400',
+          timeFw: unread ? '600' : '400',
+          timeColor: unread ? '#171C26' : '#667085',
+        };
+      });
+  }
+
+  scheduledList() {
+    return [
+      { id: 's1', who: '받는 사람: 이도윤', time: '11월 10일 (화) 오전 9:00', subject: '11월 셋째 주 배포 일정 확인 부탁드립니다' },
+      { id: 's2', who: '받는 사람: 인프라팀 외 2명', time: '11월 12일 (목) 오후 2:00', subject: '[공지] 11월 정기 점검 안내' },
+    ];
+  }
+
+  schedRows(selectedId, removedId) {
+    return this.scheduledList()
+      .filter((x) => x.id !== removedId)
+      .map((x) => ({ who: x.who, time: x.time, subject: x.subject, bg: x.id === selectedId ? '#E3F2F3' : '#FFFFFF' }));
+  }
+
+  // 메뉴 항목 — 들여쓴 메일함은 화면 낭독이 위 메일함부터 읽는다(aria)
+  menuItem(name, icon, depth, opts) {
+    const o = opts || {};
+    return {
+      isSep: false,
+      isItem: true,
+      name: name,
+      aria: o.aria || name,
+      d: this.icons()[icon],
+      pad: this.indent(depth),
+      bg: o.hover ? '#F2F4F7' : 'transparent',
+      dim: o.disabled ? '0.5' : '1',
+      ariaDisabled: o.disabled ? 'true' : 'false',
+      hasNote: !!o.note,
+      note: o.note || '',
+    };
+  }
+
+  menuSep() {
+    return { isSep: true, isItem: false, name: '', aria: '', d: '', pad: '10', bg: 'transparent', dim: '1', ariaDisabled: 'false', hasNote: false, note: '' };
+  }
+
+  // 받은편지함의 메일 — 받은편지함 · 임시보관함 · 휴지통은 없다
+  inboxMenu(hover) {
+    return [
+      this.menuItem('보낸편지함', 'sent', 0),
+      this.menuItem('스팸메일함', 'junk', 0),
+      this.menuSep(),
+      this.menuItem('거래처', 'folder', 0),
+      this.menuItem('2025', 'folder', 1, { aria: '거래처 안의 2025', hover: hover }),
+      this.menuItem('견적', 'folder', 1, { aria: '거래처 안의 견적' }),
+      this.menuItem('프로젝트', 'folder', 0),
+      this.menuItem('2025', 'folder', 1, { aria: '프로젝트 안의 2025' }),
+    ];
+  }
+
+  // 거래처에 든 메일을 열었을 때 — 하위 메일함이 있는 그 메일함은 흐린 줄(고를 수 없음)로 남긴다(11-09 정함)
+  parentMenu() {
+    return [
+      this.menuItem('받은편지함', 'inbox', 0),
+      this.menuItem('보낸편지함', 'sent', 0),
+      this.menuItem('스팸메일함', 'junk', 0),
+      this.menuSep(),
+      this.menuItem('거래처', 'folder', 0, { disabled: true, note: '이 메일이 있는 메일함' }),
+      this.menuItem('2025', 'folder', 1, { aria: '거래처 안의 2025' }),
+      this.menuItem('견적', 'folder', 1, { aria: '거래처 안의 견적' }),
+      this.menuItem('프로젝트', 'folder', 0),
+      this.menuItem('2025', 'folder', 1, { aria: '프로젝트 안의 2025' }),
+    ];
+  }
+
+  convItems() {
+    return [
+      {
+        id: 'c1', mine: true, mailbox: '보낸편지함', initial: '김', time: '11월 3일 (화) 오후 2:10', reply: true, inView: true,
+        subject: '유지보수 계약 갱신 건', to: '이도윤 <doyun.lee@arasystem.it.kr>',
+        preview: '다음 달에 끝나는 유지보수 계약을 1년 더 이어 가려고 합니다.',
+        body: `이도윤님,
+
+다음 달에 끝나는 유지보수 계약을 1년 더 이어 가려고 합니다.
+조건을 정리해서 보내 주시면 검토하겠습니다.
+
+김아라`,
+      },
+      {
+        id: 'c2', who: '이도윤', initial: '이', time: '11월 5일 (목) 오전 9:30', reply: true, inView: true,
+        subject: 'Re: 유지보수 계약 갱신 건', to: '김아라 <ara.kim@arasystem.it.kr>',
+        preview: '네, 확인했습니다. 단가와 기간을 정리해서 다음 주 초에 보내 드리겠습니다.',
+        body: `네, 확인했습니다.
+단가와 기간을 정리해서 다음 주 초에 보내 드리겠습니다.
+
+이도윤`,
+      },
+      {
+        id: 'c3', mine: true, mailbox: '보낸편지함', initial: '김', time: '11월 5일 (목) 오후 1:05', reply: true, foldAbove: true,
+        subject: 'Re: 유지보수 계약 갱신 건', to: '이도윤 <doyun.lee@arasystem.it.kr>',
+        preview: '감사합니다. 초안은 다음 주 초까지 받으면 됩니다.',
+        body: `감사합니다.
+초안은 다음 주 초까지 받으면 됩니다.
+
+김아라`,
+      },
+      { id: 'c4', current: true, who: '이도윤', initial: '이', time: '오늘 오전 9:30' },
+      {
+        id: 'c5', mine: true, mailbox: '임시보관함', initial: '김', time: '오늘 오전 9:52', reply: false,
+        subject: 'Re: 유지보수 계약 갱신 건', to: '이도윤 <doyun.lee@arasystem.it.kr>',
+        preview: '고쳐 주신 초안 확인했습니다. 서명본은 내일 오전에 보내 드리겠습니다.',
+        body: `고쳐 주신 초안 확인했습니다.
+서명본은 내일 오전에 보내 드리겠습니다.
+
+김아라`,
+      },
+      {
+        id: 'c6', mine: true, mailbox: '보낸편지함', initial: '김', time: '예약 · 11월 10일 오전 9:00', pending: true, reply: false,
+        subject: 'Re: 유지보수 계약 갱신 건', to: '이도윤 <doyun.lee@arasystem.it.kr>',
+        preview: '서명한 계약서를 첨부해 보내 드립니다.',
+        body: `이도윤님,
+
+서명한 계약서를 첨부해 보내 드립니다.
+확인 부탁드립니다.
+
+김아라`,
+        attNote: '첨부 파일 1개는 [이 메일만 열기]를 누르면 볼 수 있습니다.',
+      },
+    ];
+  }
+
+  // before: 줄마다 눌러 펼친다(펼친 줄은 본문을 받은 모습) · after: [모두 펼치기]를 누른 직후(점선 아래는 받기 전)
+  convRows(openMap, mode) {
+    return this.convItems().map((c, i) => {
+      const expanded = !c.current && (mode === 'after' ? true : !!openMap[c.id]);
+      const loading = mode === 'after' && expanded && !c.inView;
+      return {
+        isCurrent: !!c.current,
+        isOther: !c.current,
+        borderTop: i === 0 ? '0' : '1px solid #EEF0F3',
+        foldAbove: mode === 'after' && !!c.foldAbove,
+        initial: c.initial,
+        avatarBg: c.mine ? '#F2F4F7' : '#E3F2F3',
+        avatarFg: c.mine ? '#4A5363' : '#0A5F67',
+        who: c.mine ? '나' : c.who,
+        hasMailbox: !!c.mailbox,
+        mailbox: c.mailbox || '',
+        preview: c.preview || '',
+        time: c.time,
+        timeFw: c.pending ? '600' : '400',
+        timeColor: c.pending ? '#0A5F67' : '#667085',
+        expanded: expanded,
+        collapsed: !expanded,
+        expandedStr: expanded ? 'true' : 'false',
+        toggle: mode === 'before' ? () => this.setState({ convOpen: { ...openMap, [c.id]: !openMap[c.id] } }) : () => {},
+        headReply: expanded && !!c.reply,
+        padRight: expanded && c.reply ? '6' : '14',
+        to: c.to || '',
+        subject: c.subject || '',
+        loaded: expanded && !loading,
+        loading: loading,
+        body: c.body || '',
+        hasAttNote: expanded && !loading && !!c.attNote,
+        attNote: c.attNote || '',
+        bottomReply: !!c.reply,
+      };
+    });
+  }
+
+  // 상태 고르기 단추 — SettingsMobileApp 과 같은 모양
+  modes(list, current, choose) {
+    return list.map((x) => {
+      const on = x.id === current;
+      return {
+        label: x.label,
+        pressed: on ? 'true' : 'false',
+        pick: () => choose(x.id),
+        bg: on ? '#E3F2F3' : '#FFFFFF',
+        fg: on ? '#0A5F67' : '#344054',
+        border: on ? '#0E7C86' : '#D0D5DD',
+      };
+    });
+  }
+
+  base() {
+    return {
+      headId: '', title: '', desc: '',
+      hasModes: false, modesLabel: '', modes: [],
+      isSplit: false, isCuts: false, isConv: false,
+      regionLabel: '',
+      panelSys: [], panelMine: [],
+      listTitleId: '', listTitle: '', listCount: '', listLabel: '', groupToggle: false,
+      mailRows: [], schedRows: [],
+      toolsNormal: false, menuOpen: false, moveOpenStr: 'false', moveBg: 'transparent', toggleMove: () => {}, menuItems: [],
+      subjectId: '', subject: '', initial: '', fromName: '', fromEmail: '', date: '', to: '',
+      hasNotice: false, noticeText: '',
+      body: '',
+      hasAtt: false, attName: '', attSize: '', attLabel: '',
+      hasConvPeek: false, convPeek: [],
+      toastMove: false, toastText: '', toastSent: false,
+      cutMenu: [],
+      convCols: [],
+      hasSamples: false, samples: [],
+    };
+  }
+
+  sample(x) {
+    return Object.assign(
+      { title: '', note: '', width: '400', isToast: false, toastText: '', hasAction: false, actionLabel: '', isMenu: false, menu: [] },
+      x,
+    );
+  }
+
+  renderVals() {
+    const st = this.state;
+    const moveOpen = st.moveOpen ?? true;
+    const beforeOpen = st.convOpen ?? {};
+    const expandable = this.convItems().filter((c) => !c.current).map((c) => c.id);
+    const allOpen = expandable.every((id) => !!beforeOpen[id]);
+    const openCount = expandable.filter((id) => !!beforeOpen[id]).length;
+    const beforeMode = allOpen ? 'all' : openCount === 0 ? 'none' : openCount === 1 ? 'one' : '';
+
+    const p1 = this.panel('inbox', 2, 2);
+    const p3 = this.panel('inbox', 1, 2);
+    const p4 = this.panel('scheduled', 2, 2);
+    const p5 = this.panel('scheduled', 2, 1);
+
+    const f1 = Object.assign(this.base(), {
+      headId: 'f1-h',
+      title: '1. 읽기 화면의 [이동 ▾] · 분할 보기 1440',
+      desc: '도구 줄의 [전달] 뒤 구분선 다음에 [이동 ▾]을 둡니다. 메뉴는 목록 도구 줄의 [이동 ▾]과 같은 부품이고, 옮길 메일함은 메일함 패널처럼 깊이만큼 들여 씁니다. 이 메일이 든 받은편지함과 임시보관함, 휴지통은 메뉴에 없습니다. 휴지통으로는 [삭제]로 옮깁니다. 아래 단추나 화면의 [이동 ▾]으로 메뉴를 닫고 열 수 있습니다.',
+      hasModes: true,
+      modesLabel: '1의 상태 고르기',
+      modes: this.modes(
+        [
+          { id: 'open', label: '메뉴를 연 모습' },
+          { id: 'closed', label: '메뉴를 닫은 모습' },
+        ],
+        moveOpen ? 'open' : 'closed',
+        (id) => this.setState({ moveOpen: id === 'open' }),
+      ),
+      isSplit: true,
+      regionLabel: '화면: 분할 보기, 받은편지함의 메일에서 [이동 ▾]을 연 모습',
+      panelSys: p1.sys,
+      panelMine: p1.mine,
+      listTitleId: 'f1-list',
+      listTitle: '받은편지함',
+      listCount: '안 읽은 메일 2통',
+      listLabel: '받은편지함 메일',
+      groupToggle: true,
+      mailRows: this.mailRows('r1', null, null),
+      toolsNormal: true,
+      menuOpen: moveOpen,
+      moveOpenStr: moveOpen ? 'true' : 'false',
+      moveBg: moveOpen ? '#F2F4F7' : 'transparent',
+      toggleMove: () => this.setState({ moveOpen: !moveOpen }),
+      menuItems: this.inboxMenu(true),
+      subjectId: 'f1-subject',
+      subject: '2025년 유지보수 정산 자료 보내 드립니다',
+      initial: '한',
+      fromName: '(주)한빛솔루션 영업팀',
+      fromEmail: 'sales@example.com',
+      date: '2026. 11. 9. (월) 오전 10:42',
+      to: '김아라 <ara.kim@arasystem.it.kr>',
+      body: `안녕하세요, (주)한빛솔루션 영업팀입니다.
+
+2025년 유지보수 정산 자료를 첨부해 보내 드립니다.
+확인하시고 궁금하신 점은 회신 주시면 안내드리겠습니다.
+
+감사합니다.`,
+      hasAtt: true,
+      attName: '2025_유지보수_정산.pdf',
+      attSize: '184 KB',
+      attLabel: '2025_유지보수_정산.pdf 내려받기',
+      hasSamples: true,
+      samples: [
+        this.sample({
+          title: '이 메일이 든 메일함에 하위 메일함이 있을 때',
+          note: '거래처에 든 메일을 연 모습입니다. 거래처를 고를 수 없는 흐린 줄로 남기고 이름 아래에 까닭을 적어, 2025와 견적이 거래처 밑에 있는 것이 보이게 합니다. 하위 메일함이 없으면 지금처럼 뺍니다.',
+          width: '560',
+          isMenu: true,
+          menu: this.parentMenu(),
+        }),
+      ],
+    });
+
+    const f2 = Object.assign(this.base(), {
+      headId: 'f2-h',
+      title: '2. 읽기 칸이 좁으면 도구 줄은 아이콘만',
+      desc: '아이콘만 두는 기준은 화면 폭이 아니라 읽기 칸 폭입니다(컨테이너 쿼리). 읽기 칸이 이름을 한 줄에 다 보일 폭보다 좁으면 이름을 숨기고 아이콘만 둡니다(40×44, [이동 ▾]은 ▾까지 남깁니다). 그 폭은 도구 줄 좌우 여백까지 넣어 570이고, 휴지통은 [영구 삭제] 때문에 595입니다. 이름은 마우스를 올리면 뜨는 글(title)과 화면 낭독(aria-label)으로 읽힙니다. 화면 폭 1100으로 가르던 때 분할 보기 1144~1233px에서 이름이 두 줄로 꺾이던 일이 없어지고, 360에서도 두 줄로 끝납니다.',
+      isCuts: true,
+      cutMenu: this.inboxMenu(false),
+    });
+
+    const f3 = Object.assign(this.base(), {
+      headId: 'f3-h',
+      title: '3. 옮긴 뒤 · 다음 메일을 열고 알림',
+      desc: '[삭제]와 같은 길입니다. 분할 보기는 목록의 다음 메일을 열고(목록 보기는 목록으로 돌아갑니다), 오른쪽 아래에 지금의 옮기기 알림을 띄웁니다. 예시는 1에서 거래처 아래의 2025로 옮긴 뒤입니다. 2025가 프로젝트 아래에도 있어서 알림에 위 메일함 이름을 붙였습니다(이름이 하나뿐이면 지금처럼 이름만). 알림의 [되돌리기]는 10초 동안 있습니다. 열린 다음 메일은 읽음이 되어 안 읽은 메일이 1통으로 줄었습니다.',
+      isSplit: true,
+      regionLabel: '화면: 분할 보기, 옮긴 뒤 다음 메일을 연 모습',
+      panelSys: p3.sys,
+      panelMine: p3.mine,
+      listTitleId: 'f3-list',
+      listTitle: '받은편지함',
+      listCount: '안 읽은 메일 1통',
+      listLabel: '받은편지함 메일',
+      groupToggle: true,
+      mailRows: this.mailRows('r2', 'r1', 'r2'),
+      toolsNormal: true,
+      subjectId: 'f3-subject',
+      subject: 'Re: 유지보수 계약 갱신 건',
+      initial: '이',
+      fromName: '이도윤',
+      fromEmail: 'doyun.lee@arasystem.it.kr',
+      date: '2026. 11. 9. (월) 오전 9:30',
+      to: '김아라 <ara.kim@arasystem.it.kr>',
+      body: `김아라님, 안녕하세요.
+
+말씀하신 조건으로 계약서 초안을 고쳐 첨부했습니다.
+기간은 1년이고, 단가는 작년과 같습니다.
+
+이번 주 안에 회신 주시면 다음 주 월요일에 서명하겠습니다.
+
+이도윤 드림`,
+      hasAtt: true,
+      attName: '유지보수_계약서_수정본.docx',
+      attSize: '52 KB',
+      attLabel: '유지보수_계약서_수정본.docx 내려받기',
+      hasConvPeek: true,
+      convPeek: this.convRows({}, 'before').slice(0, 3),
+      toastMove: true,
+      toastText: '메일 1통을 거래처 › 2025로 옮겼습니다.',
+      hasSamples: true,
+      samples: [
+        this.sample({
+          title: '[되돌리기]를 누른 뒤',
+          note: '한 메일함으로 되돌렸으면 그 이름을 넣는 지금 글입니다. 열린 메일은 그대로 둡니다.',
+          isToast: true,
+          toastText: '메일 1통을 받은편지함으로 되돌렸습니다.',
+        }),
+      ],
+    });
+
+    const f4 = Object.assign(this.base(), {
+      headId: 'f4-h',
+      title: '4. 예약한 메일 · 안내 줄에 [지금 보내기]',
+      desc: '예약한 메일을 열면 머리 아래 청록 줄의 단추가 [지금 보내기] [고치기] [예약 취소] 차례입니다. 도구 줄은 지금처럼 [삭제]와 [⋯]뿐이고 [이동 ▾]은 없습니다. 보내기를 기다리는 메일은 취소해야 보낸편지함을 떠나기 때문입니다. 예약됨 목록 줄에는 단추를 두지 않습니다.',
+      isSplit: true,
+      regionLabel: '화면: 분할 보기, 예약됨의 메일을 연 모습',
+      panelSys: p4.sys,
+      panelMine: p4.mine,
+      listTitleId: 'f4-list',
+      listTitle: '예약됨',
+      listCount: '2통 · 보낼 시각이 이른 순서',
+      listLabel: '예약됨 메일',
+      schedRows: this.schedRows('s1', null),
+      subjectId: 'f4-subject',
+      subject: '11월 셋째 주 배포 일정 확인 부탁드립니다',
+      initial: '김',
+      fromName: '김아라',
+      fromEmail: 'ara.kim@arasystem.it.kr',
+      date: '2026. 11. 6. (금) 오후 4:20',
+      to: '이도윤 <doyun.lee@arasystem.it.kr>',
+      hasNotice: true,
+      noticeText: '11월 10일 (화) 오전 9:00에 보낼 메일입니다.',
+      body: `이도윤님,
+
+11월 셋째 주 배포 일정을 아래처럼 잡았습니다.
+- 11월 17일 (화) 오후 7시: 사내 메일 서버 점검
+- 11월 19일 (목) 오후 7시: 웹메일 새 판 배포
+
+일정이 괜찮은지 확인 부탁드립니다.
+
+김아라`,
+    });
+
+    const f5 = Object.assign(this.base(), {
+      headId: 'f5-h',
+      title: '5. [지금 보내기]를 누른 뒤',
+      desc: '[보내기]를 누른 것과 같습니다. 보내기 취소 설정(설정 › 메일 › 보내기 · 읽기)의 초만큼 기다렸다 보내고, 그동안 알림에 [보내기 취소]와 남은 시간 막대가 있습니다(9단계 마감 알림 그대로). 확인 창은 두지 않습니다. 보낸 메일은 예약됨에서 빠지므로 분할 보기는 다음 예약 메일을 열고(목록 보기는 예약됨 목록으로), 예약됨 수가 1로 줄었습니다. 알림의 [보내기 취소]는 지금의 [보내기 취소]와 같아서 그 메일을 쓰기 화면으로 엽니다. 다시 예약하려면 쓰기 화면에서 [보내기 ▾] → [예약 발송…]을 고릅니다.',
+      isSplit: true,
+      regionLabel: '화면: 분할 보기, [지금 보내기]를 누른 뒤',
+      panelSys: p5.sys,
+      panelMine: p5.mine,
+      listTitleId: 'f5-list',
+      listTitle: '예약됨',
+      listCount: '1통 · 보낼 시각이 이른 순서',
+      listLabel: '예약됨 메일',
+      schedRows: this.schedRows('s2', 's1'),
+      subjectId: 'f5-subject',
+      subject: '[공지] 11월 정기 점검 안내',
+      initial: '김',
+      fromName: '김아라',
+      fromEmail: 'ara.kim@arasystem.it.kr',
+      date: '2026. 11. 6. (금) 오후 5:05',
+      to: '인프라팀 <infra@arasystem.it.kr>, 박준호 <junho.park@arasystem.it.kr>, 정하늘 <haneul.jung@arasystem.it.kr>',
+      hasNotice: true,
+      noticeText: '11월 12일 (목) 오후 2:00에 보낼 메일입니다.',
+      body: `인프라팀 여러분,
+
+11월 정기 점검을 아래처럼 합니다.
+점검하는 동안 사내 메일과 파일 서버에 잠시 접속하지 못할 수 있습니다.
+
+- 11월 13일 (금) 오후 8시부터 10시까지
+
+김아라`,
+      toastSent: true,
+      hasSamples: true,
+      samples: [
+        this.sample({
+          title: '보내기 취소를 끔으로 둔 경우',
+          note: '기다리지 않고 바로 보냅니다. 지금 [보내기]를 누른 뒤와 같은 알림입니다.',
+          isToast: true,
+          toastText: '메일을 보냈습니다.',
+          hasAction: true,
+          actionLabel: '보낸편지함 보기',
+        }),
+        this.sample({
+          title: '누르기 전에 이미 보낸 경우',
+          note: '예약 시각이 막 지나 먼저 보낸 메일이면 오류가 아닙니다. 바라던 대로 메일이 나갔으므로 서버가 성공으로 답하고, 설정을 끔으로 둔 때와 같은 알림을 띄웁니다.',
+          isToast: true,
+          toastText: '메일을 보냈습니다.',
+          hasAction: true,
+          actionLabel: '보낸편지함 보기',
+        }),
+      ],
+    });
+
+    const f6 = Object.assign(this.base(), {
+      headId: 'f6-h',
+      title: '6. 같은 대화 · [모두 펼치기]와 펼친 줄 머리의 [답장]',
+      desc: '3에서 연 메일의 아래쪽입니다. 칸 머리 오른쪽의 [모두 펼치기]를 누르면 불러온 줄을 모두 펼치고 [모두 접기]로 바뀝니다. 본문은 화면에 들어오는 줄부터 차례로 받고, 아직 화면 밖인 줄은 자리만 둡니다. 펼친 줄 머리 오른쪽에 [답장](36)을 두고, 아래쪽 [답장]과 [이 메일만 열기]는 그대로입니다. 임시 저장본과 예약한 메일의 줄에는 [답장]이 없습니다. 두 그림은 읽기 칸을 폭 652로 줄여 잘랐습니다.',
+      hasModes: true,
+      modesLabel: '6-1의 상태 고르기',
+      modes: this.modes(
+        [
+          { id: 'none', label: '6-1 모두 접힘' },
+          { id: 'one', label: '6-1 하나 펼침' },
+          { id: 'all', label: '6-1 모두 펼침' },
+        ],
+        beforeMode,
+        (id) => {
+          const next = {};
+          if (id === 'one') next.c2 = true;
+          if (id === 'all') {
+            expandable.forEach((key) => {
+              next[key] = true;
+            });
+          }
+          this.setState({ convOpen: next });
+        },
+      ),
+      isConv: true,
+      convCols: [
+        {
+          title: '6-1. 누르기 전',
+          note: '줄을 누르면 지금처럼 하나씩 펼치고 접습니다. 이 그림에서도 줄과 [모두 펼치기]를 눌러 볼 수 있습니다.',
+          headLabel: allOpen ? '모두 접기' : '모두 펼치기',
+          toggleAll: () => {
+            const next = {};
+            if (!allOpen) {
+              expandable.forEach((id) => {
+                next[id] = true;
+              });
+            }
+            this.setState({ convOpen: next });
+          },
+          rows: this.convRows(beforeOpen, 'before'),
+        },
+        {
+          title: '6-2. [모두 펼치기]를 누른 뒤',
+          note: '점선 위는 누른 순간 화면 안에 있던 줄이라 본문을 받았습니다. 점선 아래 줄은 내려서 화면에 들어올 때 받습니다.',
+          headLabel: '모두 접기',
+          toggleAll: () => {},
+          rows: this.convRows({}, 'after'),
+        },
+      ],
+    });
+
+    const notes = [
+      {
+        title: '이동 ▾ (1 · 2 · 3)',
+        color: '#171C26',
+        border: '#E6E8EC',
+        listStyle: 'disc',
+        padLeft: '18',
+        items: [
+          { text: '자리는 [전달] 뒤 구분선 다음, [스팸 신고] 앞입니다. 메일이 어디로 가는지를 한 묶음에 둡니다.' },
+          { text: '메뉴는 목록 도구 줄의 [이동 ▾]과 같은 부품(항목 40)이고 옮길 곳도 같습니다. 그 메일이 든 메일함(검색 결과에서 연 메일도 그 메일이 든 메일함), 임시보관함, 휴지통을 뺍니다.' },
+          { text: '그 메일이 든 메일함에 하위 메일함이 있으면 빼지 않고 고를 수 없는 흐린 줄로 남겨, 이름 아래에 이 메일이 있는 메일함이라고 적습니다(1 아래 견본). 하위 메일함이 없으면 지금처럼 뺍니다. 목록의 [이동 ▾]도 같은 규칙이고, 목록에 맞는 까닭 글은 구현 때 맞춥니다.' },
+          { text: '옮길 곳은 메일함 패널과 같은 차례로 깊이만큼 들여 쓰고(패널과 같은 10 · 28 · 44 · 56, 3단계까지) 앞에 패널과 같은 아이콘을 둡니다. 기본 메일함과 내 메일함 사이에는 가는 선을 둡니다. 목록의 [이동 ▾] 메뉴도 같은 모양이 됩니다.' },
+          { text: '들여 쓴 메일함은 화면 낭독이 위 메일함부터 읽습니다(거래처 안의 2025). 같은 이름이 둘이어도 가를 수 있습니다.' },
+          { text: '옮긴 뒤 알림은 같은 이름의 메일함이 다른 곳에도 있을 때만 위 메일함 이름을 붙입니다(거래처 › 2025로). 이름이 하나뿐이면 지금처럼 이름만 씁니다. 목록의 [이동 ▾]과 끌어다 놓기 알림도 같은 규칙입니다.' },
+          { text: '메뉴가 화면 오른쪽 밖으로 넘치면 메뉴 오른쪽 끝을 단추 오른쪽 끝에 맞춥니다. 위아래만 바꾸던 메뉴 자리 정하기에 좌우 바꾸기를 더해, 같은 부품을 쓰는 모든 메뉴에 걸립니다.' },
+          { text: '도구 줄의 이름은 읽기 칸이 이름을 다 보일 폭(570, 휴지통 595)보다 좁을 때만 숨깁니다(컨테이너 쿼리).' },
+          { text: '보내기를 기다리는 메일(보내는 중, 예약)에는 [스팸 신고]처럼 [이동 ▾]이 없습니다.' },
+          { text: '키보드는 목록의 [이동 ▾]과 같습니다. Enter, Space, 아래 화살표로 열면 첫 항목에 초점이 가고, Esc는 메뉴만 닫고 [이동 ▾]으로 돌아갑니다.' },
+        ],
+      },
+      {
+        title: '지금 보내기 (4 · 5)',
+        color: '#171C26',
+        border: '#E6E8EC',
+        listStyle: 'disc',
+        padLeft: '18',
+        items: [
+          { text: '[지금 보내기]는 안내 줄 맨 앞의 같은 흰 단추(36)입니다. 누르는 동안 세 단추를 함께 막습니다(지금 [고치기], [예약 취소]와 같습니다).' },
+          { text: '확인 창은 두지 않습니다. 보내기 취소 시간 동안 되돌릴 수 있어서입니다.' },
+          { text: '알림의 [보내기 취소]는 지금의 [보내기 취소]와 같습니다. 그 메일을 쓰기 화면으로 열고, 다시 예약하려면 [보내기 ▾] → [예약 발송…]을 고릅니다.' },
+          { text: '예약 시각이 막 지나 먼저 보낸 메일이면 오류가 아닙니다. 서버가 성공으로 답하고 화면은 메일을 보냈습니다와 [보낸편지함 보기]로 알립니다.' },
+          { text: '보낸 메일은 예약됨에서 빠지고 보낸편지함에 남습니다. 기다리는 동안은 날짜 칸이 지금처럼 보내는 중입니다.' },
+          { text: '예약 시각보다 먼저 보내므로 대용량 첨부 링크의 기간은 실제로 보낸 날부터 셉니다.' },
+          { text: '예약됨 목록 줄과 휴대폰 앱에는 이번에 두지 않습니다.' },
+        ],
+      },
+      {
+        title: '같은 대화 (6)',
+        color: '#171C26',
+        border: '#E6E8EC',
+        listStyle: 'disc',
+        padLeft: '18',
+        items: [
+          { text: '[모두 펼치기]는 칸 머리 오른쪽의 글자 단추(36, [답장]과 같은 크기)입니다. 줄을 하나씩 펼쳐 모두 펼쳐져도 [모두 접기]가 되고, 하나라도 접혀 있으면 [모두 펼치기]입니다. [더 보기]로 더 받은 줄은 접힌 채로 옵니다.' },
+          { text: '본문은 한꺼번에 받지 않습니다. 화면에 들어오는 줄부터 하나씩 받습니다(요청 수 한도와 화면 무게 때문입니다).' },
+          { text: '읽음은 지금 규칙 그대로입니다. 본문이 화면에 보인 메일만 읽음이 되고, 펼쳤어도 화면 밖이면 그대로입니다.' },
+          { text: '줄 머리의 [답장]은 펼침 단추 옆에 따로 놓인 단추입니다. 지금은 줄 머리 전체가 단추라서 줄을 감싸는 틀을 하나 두고 둘을 나란히 놓습니다.' },
+          { text: '지금 보고 있는 메일의 줄은 지금처럼 펼치지 않습니다.' },
+        ],
+      },
+    ];
+
+    return {
+      frames: [f1, f2, f3, f4, f5, f6],
+      notes: notes,
+    };
+  }
+}
+</script>
+</body>
+</html>
diff --git a/docs/design/webmail/canvas.json b/docs/design/webmail/canvas.json
index da141b2..791ec14 100644
--- a/docs/design/webmail/canvas.json
+++ b/docs/design/webmail/canvas.json
@@ -59,9 +59,12 @@
     "App1SearchStates.dc.html": { "x": 3178, "y": 33450, "w": 2660, "h": 1028, "title": "앱 · 검색 (상태 · 결과에서 연 메일)", "is_interactive": true },
     "App1SearchConditions.dc.html": { "x": 5918, "y": 33450, "w": 1784, "h": 1028, "title": "앱 · 검색 2차 (조건으로 찾기)", "is_interactive": true },
     "App1Push.dc.html": { "x": 0, "y": 34900, "w": 2222, "h": 3270, "title": "앱 · 새 메일 알림 (푸시)", "is_interactive": true },
-    "SettingsMobileApp.dc.html": { "x": 0, "y": 38770, "w": 1440, "h": 3209, "title": "설정 · 휴대폰 앱 · 앱 받기 화면", "is_interactive": true }
+    "SettingsMobileApp.dc.html": { "x": 0, "y": 38770, "w": 1440, "h": 3209, "title": "설정 · 휴대폰 앱 · 앱 받기 화면", "is_interactive": true },
+    "Reader15.dc.html": { "x": 0, "y": 42600, "w": 1440, "h": 8043, "title": "읽기 화면 · 이동 · 지금 보내기 · 같은 대화", "is_interactive": true },
+    "ListDrag15.dc.html": { "x": 1520, "y": 42600, "w": 1440, "h": 3845, "title": "목록 · 끌어다 놓기 · 상단 바 좁은 폭", "is_interactive": true },
+    "Mailbox15.dc.html": { "x": 3040, "y": 42600, "w": 1440, "h": 4937, "title": "메일함 옮기기 · 하위까지 지우기 · 차단할 때 받은 메일", "is_interactive": true }
   },
-  "order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.dc.html", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.dc.html", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.dc.html", "App1Push.dc.html", "SettingsMobileApp.dc.html"],
+  "order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.dc.html", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.dc.html", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.dc.html", "App1Push.dc.html", "SettingsMobileApp.dc.html", "Reader15.dc.html", "ListDrag15.dc.html", "Mailbox15.dc.html"],
   "notes": {
     "flow": { "x": 0, "y": -300, "text": "arasystem 웹메일 — 1단계 화면 (로그인 → 메일함 → 쓰기)", "kind": "title1", "maxW": 4480 },
     "phase2": { "x": 0, "y": 2180, "text": "2단계 화면 — 임시 저장 · 받는 사람 자동 완성 · 서명 (2026-10-27 확정)", "kind": "title1", "maxW": 2960 },
@@ -80,7 +83,8 @@
     "app1search": { "x": 0, "y": 33150, "text": "앱 1단계 검색 화면 — 찾기 · 결과 · 강조 · 이어 찾기 · 안내 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 5838 },
     "app1search2": { "x": 5918, "y": 33150, "text": "앱 검색 2차 — 조건으로 찾기 · 날짜 · 조건 줄 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1784 },
     "app1push": { "x": 0, "y": 34600, "text": "앱 새 메일 알림 — 허락 묻기 · 설정 · 휴대폰 알림 · 업데이트 · 앱 아이콘 — 2026-11-07 확정(글은 화면 상수가 기준) · 11-08 업데이트 화면 · 앱 정보를 사내 배포에 맞게 바꿈(확정)", "kind": "title1", "maxW": 2222 },
-    "appdist": { "x": 0, "y": 38470, "text": "휴대폰 앱 받기 — 설정 › 휴대폰 앱 · 휴대폰 받기 화면(로그인한 직원만) — 2026-11-08 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1440 }
+    "appdist": { "x": 0, "y": 38470, "text": "휴대폰 앱 받기 — 설정 › 휴대폰 앱 · 휴대폰 받기 화면(로그인한 직원만) — 2026-11-08 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1440 },
+    "phase15": { "x": 0, "y": 42300, "text": "15단계 화면 — 메일 · 메일함 다루기(이동 · 끌어다 놓기 · 메일함 옮기기 · 지금 보내기 · 같은 대화) — 2026-11-09 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 4480 }
   },
   "designSystems": []
 }
diff --git a/docs/mail/api-contract.md b/docs/mail/api-contract.md
index 1e9f9ce..581fbee 100644
--- a/docs/mail/api-contract.md
+++ b/docs/mail/api-contract.md
@@ -411,8 +411,8 @@ HTML 은 정화하기 **전에** 길이(HTML 부분이 여럿이면 이어 붙
 | --- | --- | --- | --- |
 | `GET /api/mailboxes` | — | 200 `{ items: Mailbox[], pageInfo }` (hasNext=false) | `MAIL_001` |
 | `POST /api/mailboxes` | `{ name, parentId? }` (아래 "메일함 관리") | 201 `Mailbox` | 400 `VAL_001`, 404 `RES_001`(없는 parentId), 409 `MAIL_009`(같은 자리에 같은 이름), 503 `MAIL_001` |
-| `PATCH /api/mailboxes/{id}` | `{ name }` | 200 `Mailbox` | 400 `VAL_001`(기본 메일함), 404 `RES_001`, 409 `MAIL_009`, 503 `MAIL_001` |
-| `DELETE /api/mailboxes/{id}` | — | 200 `MailboxDeletion` — 안의 메일을 휴지통으로 옮긴 뒤 지운다 | 400 `VAL_001`(기본 메일함 · 하위 메일함 있음), 404 `RES_001`, 409 `MAIL_015`(남은 메일이 붙잡힌 메일뿐 — 9단계 "보내기 취소 · 예약 발송"), 429 `REQ_001`(같은 메일함의 처리가 진행 중), 503 `MAIL_001` |
+| `PATCH /api/mailboxes/{id}` | `{ name?, parentId? }` — 하나 이상(`parentId` 는 15단계 "메일함 옮기기" — `null` 은 맨 위) | 200 `Mailbox` | 400 `VAL_001`(빈 본문 · 기본 메일함 · 만들 수 없는 자리 · 자기 자신 · 자기 하위 아래), 404 `RES_001`(없는 메일함 · 없는 새 상위), 409 `MAIL_009`, 429 `REQ_001`(옮길 때 — 그 메일함 · 새 상위의 처리가 진행 중), 503 `MAIL_001` |
+| `DELETE /api/mailboxes/{id}` | `withChildren=true`(선택 — 15단계 "하위 메일함까지 지우기") | 200 `MailboxDeletion` — 안의 메일을 휴지통으로 옮긴 뒤 지운다(하위까지면 나무 전체) | 400 `VAL_001`(기본 메일함 · 하위 메일함이 있는데 `withChildren=true` 가 아님 · 하위에 기본 메일함 · 다른 값), 404 `RES_001`, 409 `MAIL_015`(남은 메일이 붙잡힌 메일뿐 — 9단계 "보내기 취소 · 예약 발송"), 429 `REQ_001`(같은 메일함(하위까지면 나무의 메일함)의 처리가 진행 중), 503 `MAIL_001` |
 | `PATCH /api/mailboxes/{id}/messages` | `{ isRead: true }` — 그 메일함 전체를 읽음으로 | 200 `MailboxBulkResult` | 400 `VAL_001`, 404 `RES_001`, 429 `REQ_001`(같은 메일함의 처리가 진행 중), 503 `MAIL_001` |
 | `DELETE /api/mailboxes/{id}/messages` | — 휴지통 · 스팸메일함 비우기(영구 삭제) | 200 `MailboxBulkResult` | 400 `VAL_001`(휴지통 · 스팸메일함이 아님), 404 `RES_001`, 409 `MAIL_015`(남은 메일이 붙잡힌 메일뿐 — 9단계), 429 `REQ_001`(같은 메일함의 처리가 진행 중), 503 `MAIL_001` |
 | `GET /api/mail-vacation` | — | 200 `MailVacationState` (아래 "부재중 자동 응답" — `MailVacation` + 7단계의 `isActive`) | 503 `MAIL_001` |
@@ -446,13 +446,15 @@ HTML 은 정화하기 **전에** 길이(HTML 부분이 여럿이면 이어 붙
 | `GET /api/mail-signature/images/{id}` | — | 그림 파일 (표준 래퍼 없음, 본인 그림만) | 404 `RES_001` |
 | `GET /api/recipient-suggestions` | `q`(선택, 1~100자) · `limit`(기본 20, 최대 100) · `cursor` | 200 `{ items: RecipientSuggestion[], pageInfo }` (아래 "받는 사람 추천") | 400 `VAL_001`, 503 `MAIL_001` |
 | `GET /api/scheduled-messages` | `cursor` · `limit`(기본 20, 최대 100) | 200 `{ items: MessageSummary[], pageInfo }` — 예약한 메일, 보낼 시각 차례, `total` 포함 (아래 "보내기 취소 · 예약 발송", 9단계) | 400 `VAL_001`, 503 `MAIL_001` |
-| `DELETE /api/scheduled-messages/{id}` | — (`id` 는 보낸 사본의 메일 id) | 200 `{ draftId }` — 붙잡은 발송을 취소하고 임시보관함으로(보내기 취소 · 예약 취소). 이미 취소한 발송이면 다시 200(같은 id) | 404 `RES_001`(형식이 틀린 id 포함), 409 `MAIL_014`(이미 보냄 · 기다리는 발송이 아님), 503 `MAIL_001` |
+| `DELETE /api/scheduled-messages/{id}` | — (`id` 는 보낸 사본의 메일 id) | 200 `{ draftId }` — 붙잡은 발송을 취소하고 임시보관함으로(보내기 취소 · 예약 취소). 이미 취소한 발송이면 다시 200(같은 id) | 404 `RES_001`(형식이 틀린 id 포함), 409 `MAIL_014`(이미 보냄 · 기다리는 발송이 아님), 429 `REQ_001`(같은 메일의 지금 보내기가 진행 중 — 15단계), 503 `MAIL_001` |
+| `POST /api/scheduled-messages/{id}/release` | — 본문 없음(`id` 는 보낸 사본의 메일 id) | 200 `ReleasedSend` — 예약한 메일을 지금 보낸다(15단계, 아래 "보내기 취소 · 예약 발송"의 "지금 보내기"). 이미 보냈으면 200 `pendingSend: null` | 400 `MAIL_010`(받는 사람 모두 거절 — 임시보관함으로 되돌렸다), 404 `RES_001`(예약이 아닌 메일 · 형식이 틀린 id 포함), 429 `REQ_001`(같은 메일의 예약 취소 · 지금 보내기가 진행 중), 503 `MAIL_001`(임시보관함으로 되돌렸거나 · 결과를 몰라 보낸편지함에 그대로 — 그 메일을 다시 읽어 가른다) · `MAIL_011` |
 | `GET /api/mail-images/{token}` | — | 바깥 이미지 (표준 래퍼 없음 — 아래 "외부 이미지 보기", 9단계) | 404 `RES_001`(까닭을 가리지 않는다) |
 | `GET /api/mail-settings` | — | 200 `MailSettings` (아래 "보내기 · 읽기 설정", 9단계) | — |
 | `PATCH /api/mail-settings` | `Partial<MailSettings>` — 하나 이상 | 200 `MailSettings` | 400 `VAL_001` |
 | `GET /api/mail-blocks` | — | 200 `MailBlockList` (아래 "보낸 사람 차단", 9단계) | 503 `MAIL_001` |
 | `POST /api/mail-blocks` | `{ address }` — 주소 또는 `@도메인` | 201 `BlockedSender` (이미 있으면 200 — 꺼져 있던 규칙도 켠다) | 400 `VAL_001` · `MAIL_013`, 503 `MAIL_001` |
 | `DELETE /api/mail-blocks/{address}` | — (URL 인코딩) | 200 `{ address }` | 404 `RES_001`(차단하지 않은 주소 · 틀린 모양), 503 `MAIL_001` |
+| `POST /api/mail-block-runs` | `{ sender, cursor }` — 받은편지함에 이미 있는 그 보낸 사람의 메일을 스팸메일함으로(15단계, 아래 "보낸 사람 차단"의 "받은편지함 정리") | 200 `MailBlockRun` | 400 `VAL_001`(형식 · 깨진 cursor · 다른 보낸 사람의 cursor), 404 `RES_001`(차단 목록에 없음), 429 `REQ_001`(같은 직원의 받은편지함 정리(필터 적용 포함) · 스팸메일함 비우기가 진행 중), 503 `MAIL_001`(스팸메일함 없음 포함) |
 
 표에 없는 실패 (구현에서 확정):
 
@@ -1082,12 +1084,12 @@ interface MessageDeletionResult {
 
 ```ts
 interface MailboxCreate { name: string; parentId?: string | null }   // parentId 없음 = 맨 위
-interface MailboxRename { name: string }
+interface MailboxUpdate { name?: string; parentId?: string | null }  // 하나 이상 — 보내지 않은 칸은 그대로. parentId: null = 맨 위 (15단계 — 4단계의 MailboxRename { name } 을 넓혔다)
 interface MailboxDeletion {
-  deleted: boolean        // true = 지웠다. false = 아직 옮길 메일이 남았다 — 같은 요청을 다시 보낸다
-  processed: number       // 이번 요청에서 이 메일함에서 빠진 메일 수 — 휴지통으로 옮김 + 다른 메일함에도 있어 이 메일함에서만 뺌 (진행 표시용)
+  deleted: boolean        // true = 지웠다(하위까지면 나무 전체). false = 아직 옮길 메일이 남았다 — 같은 요청을 다시 보낸다
+  processed: number       // 이번 요청에서 이 메일함(하위까지면 나무)에서 빠진 메일 수 — 휴지통으로 옮김 + 다른 메일함에도 있어 이 메일함에서만 뺌 (진행 표시용)
   movedToTrash: number    // 그중 휴지통으로 옮긴 수 (끝난 알림의 "안의 메일 N통은 휴지통에 있습니다")
-  remaining: number       // 아직 남은 메일 수
+  remaining: number       // 아직 남은 메일 수 (하위까지면 나무 전체에 — 여러 메일함에 든 메일도 한 번)
 }
 interface MailboxBulkResult {
   processed: number       // 이번 요청에서 읽음으로 바꾼 · 지운 메일 수
@@ -1102,14 +1104,35 @@ interface MailboxBulkResult {
 - **만들 수 있는 자리**: 맨 위, 받은편지함 · 보관함 · 내 메일함(역할 없음) 아래. 보낸편지함 · 임시보관함 · 스팸메일함 · 휴지통 아래는 400 `VAL_001`.
   웹 화면은 받은편지함 · 내 메일함 아래만 메뉴에 둔다(보관함 아래는 다른 메일 프로그램이 만든 것을 그대로 보인다).
 - **기본 메일함**(역할이 있는 메일함)은 이름을 바꾸거나 지울 수 없다 — 400 `VAL_001`. 화면은 메뉴에 그 항목을 두지 않는다.
-- **지우기**: 하위 메일함이 있으면 400 `VAL_001`(화면이 먼저 막는다). 안의 메일은 **휴지통으로 옮긴 뒤**(다른 메일함에도 있는 메일은 이 메일함에서만 뺀다)
+- **지우기**: 하위 메일함이 있으면 400 `VAL_001`(화면이 먼저 막는다 — 15단계부터는 아래 "하위 메일함까지 지우기"). 안의 메일은 **휴지통으로 옮긴 뒤**(다른 메일함에도 있는 메일은 이 메일함에서만 뺀다)
   빈 메일함을 지운다 — 엔진은 메일이 든 메일함을 `mailboxHasEmail` 로 거절하므로(`onDestroyRemoveEmails: false` — 메일을 영구 삭제하는 옵션은 쓰지 않는다) 그사이 들어온 메일도 남지 않는다.
   메일이 많으면 한 요청에 다 옮기지 못한다 — `deleted: false` 면 클라이언트가 같은 요청을 다시 보낸다.
+- **옮기기**(15단계 — `PATCH /api/mailboxes/{id}` 의 `parentId`): `{ name?, parentId? }` 가운데 바꿀 것만 보낸다 — 둘 다 없으면 400 `VAL_001`, `parentId: null` 은 맨 위.
+  - 새 상위는 **만들기와 같은 자리**다 — 맨 위 · 받은편지함 · 보관함 · 내 메일함 아래(그 밖은 400 `VAL_001`, 없는 상위는 404 `RES_001`). 기본 메일함은 옮길 수 없다(400 `VAL_001`).
+  - 자기 자신 · 자기 하위(손주까지) 아래로는 400 `VAL_001` — 서버가 엔진에 묻기 전에 메일함 목록으로 본다. 엔진도 고리를 `invalidProperties`(parentId)로 막는다(2026-11-09 개발 엔진 확인) —
+    그 거절이 오면 같은 요청에서 다시 읽은 목록에 새 상위가 있으면 400 `VAL_001`(그사이 생긴 고리), 없으면 404 `RES_001`(그사이 지워짐)이다.
+  - 새 자리에 같은 이름이 있으면 409 `MAIL_009` — **엔진은 대소문자를 가리지 않는다**(`p15-자식` 도 `P15-자식` 과 겹친다 — 같은 날 확인). 화면은 같은 이름이 있는 곳을 처음부터 고르지 못하게 한다(같은 판정).
+  - 하위 메일함과 안의 메일은 함께 간다 — 메일함 id 는 그대로라 그 메일함으로 옮기는 필터도 그대로 돈다. 깊이 한도는 두지 않는다(만들기와 같다 — 엔진은 15칸까지 막지 않았다).
+  - 이름 · 상위가 지금과 같으면 엔진에 묻지 않고 200(그대로). 응답은 지금처럼 `Mailbox`(새 `parentId`).
+  - 옮길 때(`parentId` 를 보낼 때) 그 메일함이나 새 상위의 오래 걸리는 처리(아래)가 진행 중이면 엔진에 묻지 않고 429 `REQ_001` — 지우는 나무 안으로 옮기거나 지우는 메일함을 빼 가지 않게. 이름만 바꾸기는 지금처럼 잡지 않는다.
+  - 로그: 실제로 옮겼을 때만, 메일함 id 와 새 상위 id 만(이름 없이 — 사용자가 정한 글이다).
+- **하위 메일함까지 지우기**(15단계 — `DELETE /api/mailboxes/{id}?withChildren=true`): `withChildren=true` 일 때만 하위가 있어도 지운다 — 없으면 지금처럼 400 `VAL_001`(옛 화면이 모르고 하위를 지우지 않게).
+  값은 `true` 만 받는다(그 밖 · 모르는 쿼리는 400 `VAL_001`).
+  - 나무(그 메일함과 하위 모두)를 지금 지우기와 같은 규칙으로 — 나무의 메일을 한 조회(`inMailbox` 의 OR — 엔진이 겹치지 않게 센다)로 500통씩 읽어, 나무 안에만 있는 메일은 휴지통으로,
+    나무 밖의 메일함에도 있는 메일은 나무의 메일함에서만 뺀다(확인한 상태 그대로일 때만 — `ifInState`). 붙잡힌 메일은 그대로 둔다(9단계 — 남은 것이 그것뿐이면 `MAIL_015`).
+  - 비었으면 빈 메일함을 **깊은 것부터 한 요청에** 지운다(`onDestroyRemoveEmails: false`) — 엔진은 한 요청의 destroy 를 적은 차례대로 한다(2026-11-09 확인 — 위에서부터 적으면 맨 아래 하나만 지워진다).
+    그사이 메일이 들어와 거절되면 지운 하위는 나무에서 빼고 남은 나무의 메일을 다시 옮긴다. 그사이 나무 밖의 하위 메일함이 생기면(`mailboxHasChild`) 목록을 다시 읽어 그 메일함까지 지운다.
+  - 하위에 기본 메일함(역할이 있는 메일함 — 다른 프로그램이 만든 이상한 나무)이 있으면 400 `VAL_001`.
+  - 응답은 지금 `MailboxDeletion` 그대로 — 수는 나무 전체의 것이다(`deleted: true` 까지 다시 보낸다). 그 밖의 오류는 지금 지우기와 같다.
+  - 잠금: 나무의 메일함 모두(아래 "같은 직원 · 같은 메일함의 처리는 한 번에 하나") — 서버는 그 메일함을 먼저 잡고(처리 중이면 엔진에 묻지 않고 429 `REQ_001`)
+    메일함 목록을 읽어 하위 메일함까지 잡는다(하위가 처리 중이면 목록만 읽고 429 — 아무것도 바꾸지 않는다). 휴지통 비우기와 함께 돌지 않는 것은 지금처럼 화면이 막는다.
 - **전체 읽음**(`PATCH /api/mailboxes/{id}/messages {isRead:true}`): 안 읽은 메일을 500통씩 읽음으로 바꾼다. **비우기**(`DELETE /api/mailboxes/{id}/messages`): 휴지통 · 스팸메일함만,
   500통씩 확인한 상태 그대로일 때만(`ifInState`) 영구 삭제한다 — 그 메일함에만 있는 메일은 지우고, 다른 메일함에도 있는 메일은 그 메일함에서만 뺀다(`POST /api/message-deletions` 와 같은 규칙).
 - 오래 걸리는 처리(전체 읽음 · 비우기 · 메일함 지우기)는 한 요청을 25초 안에 끝내고(엔진 호출마다 남은 시간만큼만 기다린다) `remaining` 을 돌려준다.
   클라이언트는 0(또는 `deleted: true`)이 될 때까지 다시 보내며 진행을 알림으로 보인다("…하는 중 · 600 / 1,234통"). 도중에 실패하면 거기까지 처리한 수를 알리고, 다시 하면 남은 것만 처리한다.
   - 같은 직원 · 같은 메일함의 처리는 한 번에 하나다 — 진행 중이면 엔진에 묻지 않고 429 `REQ_001`(다른 탭에서 같은 메일함을 처리할 때). 다른 메일함끼리는 함께 된다.
+    하위까지 지우기는 나무의 메일함 모두를(하위는 목록을 읽은 뒤), 옮기기는 그 메일함과 새 상위를 함께 잡는다(15단계 — 하나라도 처리 중이면 429).
+    차단할 때 받은편지함 정리(15단계 — 아래 "보낸 사람 차단")가 도는 동안은 그 직원의 스팸메일함도 잡혀 있다 — 그동안 스팸메일함 비우기 · 전체 읽음은 429.
   - 한 요청의 상한 25초는 메일함 목록을 읽기 전부터 잰다(엔진의 세션 조회 포함). 다음 500통은 남은 시간이 5초보다 많을 때만 시작한다.
   - 멈추는 경우 — 진행한 것이 있으면 거기까지 200(`remaining` > 0 · `deleted: false`), 하나도 처리하지 못했으면 503 `MAIL_001`(클라이언트가 끝없이 다시 보내지 않게):
     아무것도 바뀌지 않는 차례(확인하는 사이 계속 바뀜 · 바뀐 것도 거절도 없음 · 비운 메일함을 지우는 사이 메일이 들어옴)가 이어서 3번, 남은 시간 때문에 엔진 호출이 끊김.
@@ -1480,6 +1503,45 @@ interface PendingSend {
   - 서명 그림 부분 빼기 · `cid:sig-…` 되돌리기는 취소 표시(`$ara-canceled`)가 있는 초안에만 한다(다른 메일 프로그램이 만든 초안의 그림은 건드리지 않는다).
   - 취소와 옮기기는 다른 요청이다(같은 요청에 두면 취소가 실패해도 옮겨진다). 취소는 됐는데 옮기지 못하면(엔진 오류) 한 번 더 하고, 그래도 못 하면 503 `MAIL_001` —
     그 메일은 보내지 않은 채 보낸편지함에 남는다(드묾 — 알려진 한계, warn 로그).
+  - 같은 메일의 지금 보내기(아래)가 진행 중이면 엔진에 묻지 않고 429 `REQ_001`(15단계).
+- **지금 보내기**(15단계 — `POST /api/scheduled-messages/{id}/release`, `id` 는 보낸 사본의 메일 id, 본문 없음): 예약한 메일을 [보내기]를 누른 것처럼 보낸다.
+  엔진 사실(2026-11-09 개발 엔진): 기다리는 예약 제출을 취소(`undoStatus: canceled`)하고 같은 메일을 바로 다시 제출하면 받는 사람에게 **정확히 한 통** 간다 —
+  취소가 된 뒤에만 다시 내므로 두 번 나갈 틈이 없다(그 전에 엔진이 보냈으면 취소가 `cannotUnsend`). 이미 보냈거나 이미 취소한 제출을 취소해도 `cannotUnsend` 라 서버는 제출의 `undoStatus` 를 다시 읽어 가른다.
+  ```ts
+  interface ReleasedSend {                    // 발송 응답(SentMessage)과 같은 칸
+    id: string                                // 같은 메일 id (보낸 사본)
+    rejectedRecipients: RejectedRecipient[]   // 받는 사람별 결과 — 발송과 같은 규칙(아래 "받는 사람별 결과")
+    pendingSend: PendingSend | null           // { kind: 'undo', sendAt } — 보내기 취소를 기다린다 · null — 바로 보냈다 · 이미 보냈다
+  }
+  ```
+  - 차례: 그 메일 · 메일함 · 그 메일의 제출(envelope · 발신 ID · 결과까지)을 한 요청으로 읽고 → 다시 낼 envelope 을 먼저 정한 뒤(읽지 못하면 취소하지 않고 503 `MAIL_001`) →
+    기다리는 예약 제출을 취소한다(엔진이 취소를 확인한 것만 — 확인이 없거나 결과를 모르면 다시 읽어 취소됐을 때만 잇고, 아직 기다리면 다시 내지 않고 503 `MAIL_001`) →
+    **다른 요청으로** 같은 메일을 그 제출의 envelope 그대로(받는 사람 · 참조 · 숨은참조 · envelope 에서 뺀 주소까지 원래 제출의 것 — 머리글에서 다시 만들지 않는다) 다시 제출한다.
+    MAIL FROM 의 붙잡기 매개변수만 바꾼다 — 그 직원의 보내기 취소 설정(`undoSendSeconds`)만큼 `HOLDFOR`(0 이면 붙잡지 않는다 — 설정을 읽지 못하면 처음 값 10초).
+    성공하면 같은 요청에서 예약 표시(`$ara-scheduled`)를 뗀다 — 이제 보내기 취소를 기다리는 메일이다(취소는 지금처럼 `DELETE` — 쓰기 화면으로).
+  - **이미 보낸 메일**(예약 시각이 막 지나 제출이 `final` · 보낼 시각이 지나 배달 중 · 취소하려니 엔진이 `cannotUnsend`)은 오류가 아니다 → 200 `pendingSend: null`(보낸 것으로).
+  - **이미 지금 보내기를 한 메일**(취소한 예약 제출 + 그 뒤 새 제출 — 다시 누름 · 응답을 받지 못한 재시도)도 다시 내지 않고 그 새 제출의 지금 상태로 200(기다리면 `pendingSend: { kind: 'undo' }`).
+  - 예약이 아닌 메일(보내기 취소를 기다리는 메일 · 취소해 임시보관함으로 간 메일(`$ara-canceled`) · 제출이 없음 · 예약하지 않고 보낸 메일) · 없는 메일 · 형식이 틀린 id 는 404 `RES_001` — 아무것도 바꾸지 않는다.
+  - 앞 요청이 예약을 취소한 뒤 끊겼으면(예약 표시가 있고 취소 표시는 없는데 제출이 모두 `canceled`) 취소를 건너뛰고 다시 제출만 한다 — 보내지지도 예약돼 있지도 않은 메일이 남지 않게(구현하며 정함).
+  - 다시 제출이 실패하면 둘로 가른다(처음 발송과 같은 결 — 위 "발송 본문"의 "엔진이 받지 않는 주소"에서 요청째 거절과 결과를 모르는 실패를 가르는 것과 같다):
+    - **엔진이 분명히 거절했다**(SetError · 메서드 오류 · 요청을 실행하지 않았다는 4xx · 429 — 아무것도 나가지 않았다): 한 번 더 낸다. 그래도 거절이면 그 메일을 임시보관함으로 되돌리고
+      (예약 취소와 같은 되돌리기 — `$draft` · `$ara-canceled`, 대용량 첨부 링크도 취소한 발송처럼) 503 `MAIL_001`(warn — 메일은 임시보관함에 있다).
+    - **결과를 모른다**(시간 초과 · 연결 끊김 · 5xx · 해석하지 못한 응답 — 나갔을 수 있다): 다시 내지도 · 임시보관함으로 옮기지도 않는다. 제출을 한 번 다시 읽어(남은 시간이 없어도 3초)
+      새 제출이 보이면 그 상태로 200, 아니면 503 `MAIL_001` — 메일은 예약이 취소된 채 보낸편지함에 그대로다(링크도 그대로). 같은 요청을 다시 보내면 위의 "끊긴 지금 보내기"로 이어 낸다
+      (그때 새 제출이 보이면 "이미 지금 보내기를 한 메일"로 200).
+    - 제출마다 먼저 남은 시간을 본다 — 10초보다 적으면 내지 않고 503 `MAIL_001`(결과를 모를 때와 같다 — 메일은 보낸편지함에 그대로, 다시 보내면 이어 낸다).
+    - 임시보관함으로 되돌리기마저 실패하면 503 `MAIL_001` — 메일은 예약이 취소된 채 보낸편지함에 남는다(위 예약 취소의 "옮기지 못하면"과 같다).
+    - 503 `MAIL_001` 은 응답만으로는 어느 쪽인지 모른다(응답 꼴은 그대로) — **클라이언트는 503 뒤에 그 메일을 다시 읽어**(`GET /api/messages/{id}`) 임시보관함에 있으면 되돌린 것으로,
+      보낸편지함에 있으면 [다시 시도](같은 `POST` — 이어 낸다)를 보인다.
+    - **알려진 한계**: 결과를 모르는 503 뒤에 다시 보내지 않으면 그 메일은 보내지 않은 채(예약도 취소된 채) 보낸편지함에 남는다 — 9단계 예약 취소의 "옮기지 못하면"과 같은 한계다(드묾, warn 로그).
+  - 받는 사람이 **모두** 받지 않으면(발송의 `MAIL_010` · `MAIL_011` 과 같은 판정) 보내지 않은 것이다 — 기다리는 새 제출을 취소하고 그 메일을 임시보관함으로 되돌린 뒤
+    400 `MAIL_010` · 503 `MAIL_011`(구현하며 정함 — 발송처럼 사본을 지우지 않는다: 쓰기 화면이 없는 메일이라 잃지 않게). 일부만 받지 않았으면 200 `rejectedRecipients`.
+  - 대용량 첨부(4절): 다시 제출한 뒤 그 발송이 만든 링크의 **보낸 때를 지금으로 앞당기고 끝나는 날은 그대로 둔다** — 보낸 메일의 덩이가 예약 시각으로 센 끝나는 날을 이미 적었다(앞당기면 받는 사람이 본 날짜보다 먼저 끝난다).
+    이미 보낸 메일이면 링크를 건드리지 않는다.
+  - 같은 직원 · 같은 메일의 예약 취소 · 지금 보내기는 한 번에 하나 — 진행 중이면 엔진에 묻지 않고 429 `REQ_001`.
+    서버는 54초 남짓 안에 답한다 — 엔진 호출은 45초 안에서 남은 시간만큼, 정리(새 제출 취소 · 임시보관함으로 되돌리기 · 결과를 모를 때 다시 읽기)는 남은 시간이 없어도 3초씩 더 쓴다.
+    앞단 nginx · 클라이언트의 60초 안이다(클라이언트는 발송과 같은 시간 한도로 부른다).
+  - 로그: 메일 id · 예약했던 시각 · 보낼 시각만(받는 사람 · 제목 없음 — 위 "로그"와 같다).
 - **중복 발송 방지와 함께**: 취소한 발송의 `Idempotency-Key` 로 다시 보내면 409 `MAIL_005`(보내지 않는다) — 클라이언트는 취소 뒤 새 키로 보낸다.
   서버는 취소한 발송의 메일을 "보낸 것"으로도, "끊긴 발송이 남긴 초안"으로도 보지 않는다(지우지 않는다). 취소 표시(`$ara-canceled`)가 있으면 제출 기록과 상관없이 취소한 발송이다.
   붙잡는 시간은 지문에 넣지 않는다 — 같은 키로 다시 보내면 `sendAt` 이 달라도 처음 결과(그때의 `pendingSend`)를 돌려준다.
@@ -1547,7 +1609,8 @@ interface MailBlockList {
 ```
 
 - **효과**: 차단한 보낸 사람(머리글 From 의 주소 · 도메인 — 대소문자 무시)의 메일은 스팸메일함으로 간다. 필터 · 부재중보다 먼저 돌고 멈추므로 필터는 돌지 않고 부재중 응답도 나가지 않는다.
-  이미 받은 메일은 옮기지 않는다 — 읽기 화면의 차단 창은 그 메일만 함께 스팸메일함으로 옮긴다(`PATCH /api/messages/{id}` 의 `isJunk`).
+  이미 받은 메일은 저절로 옮기지 않는다 — 읽기 화면의 차단 창은 그 메일만 함께 스팸메일함으로 옮기고(`PATCH /api/messages/{id}` 의 `isJunk`),
+  받은편지함에 있는 그 보낸 사람의 다른 메일은 고르면 아래 "받은편지함 정리"(15단계)로 옮긴다.
 - **검사**: 주소는 발송의 주소와 같은 규칙에 `@` 앞은 dot-atom · 64자까지(따옴표 앞부분은 받지 않는다 — 클라이언트의 `isStrictEmail` 과 같은 폭, 2026-10-29 리뷰),
   도메인은 `@` + 호스트 이름(점이 하나 이상 · 253자 · IP 주소 아님 · ASCII 만 — 국제화 도메인은 `xn--` 꼴로, `${` 는 받지 않는다).
   이미 차단한 주소를 다시 `POST` 하면 200 — 엔진에서 규칙이 꺼져 있었으면 같은 원본을 다시 써서 켠다. 그래서 `POST` · `DELETE` 가 성공한 뒤에는 늘 켜져 있다(`isActive: true`).
@@ -1568,6 +1631,34 @@ interface MailBlockList {
 - **클라이언트**: 읽기 화면 ⋯ 「보낸 사람 차단」(사내 직원 · 내 주소면 없고, 이미 차단했으면 「보낸 사람 차단 풀기」, 500개면 꺼짐 + 까닭) → 확인 창(이 주소만 · 이 도메인 전체,
   「이 메일도 스팸메일함으로 옮기기」) → `POST`(+ 옮기기) → 알림 + [되돌리기](차단을 풀고 메일을 원래 메일함으로 — 구현하며 정함). 설정 › 메일 › 차단한 주소에서 더하고 푼다.
   스팸메일함에서 차단한 보낸 사람의 메일을 열면 안내 줄 + [차단 풀기]. 차단 목록은 메일 화면에 들어올 때 받아 둔다.
+- **받은편지함 정리**(15단계 — `POST /api/mail-block-runs`): 차단한 뒤 받은편지함에 이미 있는 그 보낸 사람의 메일을 스팸메일함으로 옮기고 스팸 표시를 붙인다(`$junk` 를 붙이고 `$notjunk` 를 뗀다 — 스팸 신고 `isJunk: true` 와 같다).
+  ```ts
+  interface MailBlockRunRequest {
+    sender: string           // 차단 목록의 값 그대로 — 소문자 주소 또는 "@도메인" (BlockedSender.address — 대소문자 · 앞뒤 공백은 서버가 맞춘다)
+    cursor: string | null    // 처음은 null, 이어 할 때는 앞 응답의 cursor 그대로 — 늘 보낸다
+  }
+  interface MailBlockRun {   // 이미 받은 메일에 필터 적용(MailFilterRun)과 같은 꼴
+    scanned: number          // 이번 요청에서 확인한 받은편지함 메일 수
+    matched: number          // 그중 스팸메일함으로 옮긴 수 (붙잡힌 메일은 옮기지 않아 세지 않는다)
+    remaining: number        // 아직 확인하지 않은 수 — 어림
+    cursor: string | null    // null = 끝
+  }
+  ```
+  - 차단 목록에 없으면(차단한 뒤에만 부른다 · 그사이 풀었다) 404 `RES_001` — 요청마다 본다(도중에 풀면 다음 요청이 멈춘다). 보낸 사람의 모양은 차단하기와 같은 검사(400 `VAL_001`).
+  - 틀은 위 "이미 받은 메일에 적용"(7단계)과 같다: 받은편지함만(정리해 둔 메일함은 건드리지 않는다) · 받은 시각이 최근인 메일부터 · 첫 요청의 위 경계 뒤에 온 메일은 보지 않는다(새로 온 메일은 차단 규칙이 이미 옮겼다) ·
+    `cursor`(위 경계 · 마지막으로 남긴 메일과 그 받은 시각 · 보낸 사람의 지문 — 다른 보낸 사람의 cursor · 필터 적용의 cursor · 깨진 cursor 는 400 `VAL_001`) ·
+    한 요청 25초 · 다음 차례는 남은 시간 5초 넘을 때만 · 나아감 없는 차례 3번이면 멈춤 · 하나도 확인하지 못하면 503 `MAIL_001`. 옮기기는 읽은 상태 그대로일 때만(`ifInState`).
+  - **같은 직원의 받은편지함 정리(필터 적용 · 이것)는 한 번에 하나** — 같은 잠금, 진행 중이면 엔진에 묻지 않고 429 `REQ_001`.
+  - 요청이 도는 동안 그 직원의 **스팸메일함**을 메일함 처리 잠금(위 "메일함 관리" — 같은 메일함의 처리는 한 번에 하나)으로 잡는다 — 옮겨 넣는 동안 스팸메일함 비우기 · 전체 읽음이 함께 돌지 않게(그동안 그쪽이 429).
+    스팸메일함을 비우는 중이면 메일함 목록을 읽은 뒤 429 `REQ_001` — 받은편지함은 건드리지 않았다(비우기가 끝난 뒤 같은 `cursor` 로 다시 보낸다).
+    잠금은 **요청 하나씩**이다 — 다른 창에서 비우기와 차단 정리가 함께 진행되면 요청 사이에 번갈아 돌 수 있어, 차단 정리가 옮겨 넣은 메일을 다음 비우기 요청이 지울 수 있다
+    (알려진 한계 — 휴지통 비우기와 메일함 지우기의 관계와 같다. 같은 탭에서는 화면이 둘을 함께 돌리지 않는다).
+  - **판정은 차단 규칙(위 "만든 Sieve")과 같다** — 주소는 From 의 주소 가운데 하나가 같을 때(`address :all :is`), 도메인은 From 주소의 `@` 뒤가 그 도메인과 같을 때(`address :domain :is` — 하위 도메인 · 더 긴 도메인은 아님),
+    대소문자는 ASCII 만 무시(`i;ascii-casemap`). 견주는 것은 **엔진이 푼 From 머리글의 주소**(`header:From:asAddresses:all` — 같은 이름의 머리글이 여럿이면 모두)다 — 표시 이름에 그 주소를 쓴 남의 메일은 걸리지 않는다.
+    엔진 검색(`Email/query` 의 `from`)은 쓰지 않는다 — 낱말 단위라 넓게 잡는다(2026-11-09 개발 엔진: `kim.lee@` · `@sub.` · `.example.net` · 표시 이름에만 그 주소를 쓴 남의 메일까지).
+  - 붙잡힌 메일(9단계)은 옮기지 않는다(받은편지함에는 없지만 지금 규칙대로). 스팸메일함이 없으면 503 `MAIL_001`. 되돌리기는 없다(스팸메일함에서 [스팸 아님]으로).
+  - 로그: 보낸 사람은 가린다(`maskEmail` — 도메인 차단은 도메인만). 확인 · 옮긴 수 · 차례 · 시간만.
+  - **클라이언트**: 차단 창의 「받은편지함에 있는 이 보낸 사람의 다른 메일도 옮기기」(처음 꺼짐)를 켜면 차단(`POST /api/mail-blocks`)이 성공한 뒤 이 요청을 `cursor` 가 null 이 될 때까지 보낸다 — 진행 · 결과 알림은 디자인 README "15단계".
 
 ### 보내기 · 읽기 설정 (`/api/mail-settings`) — 9단계
 
@@ -1594,8 +1685,10 @@ interface MailSettings {
 
 탭을 모두 닫아도 오는 알림(웹 푸시 — 엔진은 `webpush-vapid` 를 지원한다), 알림 소리(운영체제 설정을 따른다), 휴대폰 푸시, 본문 안 이미지(인라인 cid — 붙여 넣은 이미지는 첨부로, 서명 그림만 예외), 메일 안의 배경 그림 보이기 · 보낸 사람마다 고르는 "이미지 늘 보기" 목록(9단계는 설정 세 가지로),
 여러 개의 서명(자체 검색 색인 · 조건 검색 · 검색어 강조는 14단계에서 했다 — 위 "검색 — 14단계"),
-끌어다 놓아 옮기기, 메일함 옮기기(다른 상위로) · 하위 메일함까지 한꺼번에 지우기, 앱 비밀번호 · 2단계 인증(엔진은 지원한다), 부재중 응답의 서식 본문 · 사내/외부 구분,
-예약한 메일의 「지금 보내기」 · 7일 넘는 예약(엔진 한도) · 차단할 때 이미 받은 그 보낸 사람의 메일 모두 옮기기(9단계는 그 메일만).
+메일함을 끌어 옮기기 · 메일함 순서 바꾸기(15단계는 ⋯ 메뉴 「옮기기」 창으로 — 메일을 끌어다 메일함에 놓기는 15단계에서 했다, 서버는 지금 `PATCH /api/messages` 그대로), 옮기기 단축키,
+부재중 응답의 서식 본문 · 사내/외부 구분(앱 비밀번호 · 2단계 인증은 12단계에서 했다), 7일 넘는 예약(엔진 한도), 예약됨 목록 줄의 [지금 보내기](15단계는 읽기 화면의 예약 안내 줄에만),
+차단 정리의 되돌리기 · 받은편지함 밖 메일함의 정리(15단계는 받은편지함만 — 위 "보낸 사람 차단"의 "받은편지함 정리").
+15단계에 한 것: 메일함 옮기기 · 하위 메일함까지 지우기(위 "메일함 관리"), 차단할 때 받은편지함 정리(위 "보낸 사람 차단"), 예약한 메일 지금 보내기(위 "보내기 취소 · 예약 발송").
 
 ---
 
@@ -2128,6 +2221,9 @@ interface FileUploadCreate {
 - 덩이는 제출할 때 메일 안에 들어 있다 — 엔진이 붙잡았다가 그대로 보낸다.
 - 링크의 보낸 때: 예약은 `sendAt`(끝나는 날도 그 날짜로 센다 — 예약 7일 + 30일이면 37일까지 보관), 보내기 취소를 기다리는 발송은 요청한 때(몇 초 차이는 무시).
   예약 링크는 보낼 시각 전에도 열린다(주소를 아는 사람은 보낸 사람뿐이다).
+- 예약한 메일을 **지금 보내면**(15단계 — 2절 "보내기 취소 · 예약 발송"의 "지금 보내기") 보낸 때를 다시 제출한 때로 앞당긴다(조건부 UPDATE 한 문장 — 취소한 링크 · 이미 그보다 앞선 보낸 때는 그대로).
+  **끝나는 날은 그대로 둔다** — 보낸 메일의 덩이가 예약 시각으로 센 날짜를 이미 적었다(메일은 고칠 수 없다 — 앞당기면 받는 사람이 본 날짜보다 먼저 끝난다). 파일의 보관 기간도 그대로다.
+  끝내 보내지 못해 임시보관함으로 **되돌렸을 때만** 예약 취소처럼 그 링크를 취소한 링크로 둔다 — 결과를 몰라 보낸편지함에 그대로 둔 503 은 링크도 그대로다(다시 보내면 이어 낸다).
 - 취소(`DELETE /api/scheduled-messages/{id}`)가 엔진에서 확인된 뒤 그 발송이 만든 링크를 취소한 링크로 둔다. 파일은 남는다(되돌린 초안이 쓴다 — 임시 저장 기간으로, 보내지 않은 파일 목록에 다시 나온다).
 - 되돌린 초안(취소 표시 `$ara-canceled`)을 열면 서버가 원문 HTML 의 표시 사이(덩이)를 정화 **전에** 떼고(`mail.service.ts:1282-1304` 의 `draftHtml` — 취소한 발송의 서명 그림을 되돌리는 그 자리),
   텍스트 본문의 덩이도 뗀다(서버가 넣은 글 그대로일 때 — 손대면 남는다). 그 링크의 파일을 `largeFiles` 로 돌려준다 → 쓰기 화면은 대용량 목록으로 보이고, 다시 보내면 새 링크다.
diff --git a/docs/roadmap.md b/docs/roadmap.md
new file mode 100644
index 0000000..abc7323
--- /dev/null
+++ b/docs/roadmap.md
@@ -0,0 +1,73 @@
+# ARA SYSTEM 로드맵
+
+그룹웨어 전체의 작업 차례다. 단계 번호는 모듈마다 따로 센다 — 메일의 "N단계"는 API 계약([`docs/mail/api-contract.md`](./mail/api-contract.md))과
+화면 디자인([`docs/design/webmail/README.md`](./design/webmail/README.md))의 "N단계"와 같다. 단계마다 **조사 → 캔버스(화면 보드) → 확정 → 구현 → 배포** 차례로 한다.
+
+마지막 정리: 2026-11-09
+
+## 지금
+
+- **운영**: 메일 1~13단계. 2026-11-05 옛 메일 서버(mailcow)에서 전 직원이 옮겨 왔다(메일만 옮겼다 — 주소록 · 달력 · 필터 · 부재중 · 서명은 직원이 새로).
+- **배포를 기다림**: 메일 14단계 · 앱 서버(앱 로그인 · 새 메일 알림) · 휴대폰 앱 받기 — main 에 합쳤고, 전환 뒤 안정화 1~2주를 지나 11월 셋째 주에 운영에 올린다.
+- **개발 중**: 메일 15단계(메일 · 메일함 다루기).
+- **다음**: 메일 16단계(개인 설정).
+
+## 1부 — 메일
+
+| 단계 | 내용 | 상태 |
+| --- | --- | --- |
+| 1 | 웹메일 기본 — 로그인 · 메일함 · 목록 · 읽기 · 쓰기(서식 편집기 · 첨부) | 운영 |
+| 2 | 임시 저장 · 서명 · 받는 사람 자동 완성 | 운영 |
+| 3 | 새 메일 확인 · 검색 · 여러 통 한꺼번에(읽음 · 중요 · 이동 · 삭제) | 운영 |
+| 4 | 메일함 관리 · 비밀번호 바꾸기 · 부재중 자동 응답 · 스팸 · 원문 | 운영 |
+| 5 | 실시간 새 메일 · 바탕화면 알림 | 운영 |
+| 6 | 메일 필터 | 운영 |
+| 7 | 이미 받은 메일에 필터 적용 | 운영 |
+| 8 | 주소록(내 연락처 · 그룹 · 사내 목록) | 운영 |
+| 9 | 보내기 취소 · 예약 발송 · 외부 이미지 보기 · 인쇄 · 보낸 사람 차단 · 보내기 · 읽기 설정 | 운영 |
+| 10 | 파일럿 공존 — 옛 서버와 같은 도메인을 함께 쓰며 먼저 써 보기 | 운영(전환으로 끝남) |
+| 11 | 대용량 첨부 — 링크로 보내기 · 조각 올리기 · 30일 보관 · 로그인 없는 내려받기 화면 · 악성 검사 | 운영 |
+| 12 | 계정 보안 — 2단계 인증 · 앱 비밀번호 · 로그인 기록 · 로그인된 기기 | 운영 |
+| 13 | 전환 준비 — 새 비밀번호 · 2단계 필수 · 메일 프로그램 연결 안내 · 운영 도구 · 백업 · 감시 · 휴지통 · 스팸 30일 | 운영 |
+| 14 | 자체 검색 색인 · 조건 검색 · 검색어 강조 · 같은 대화 · 대화로 묶어 보기 | main 에 합침 — 배포 기다림 |
+| 15 | 메일 · 메일함 다루기 — 읽기 화면 [이동] · 끌어다 놓기 · 메일함 옮기기 · 하위까지 지우기 · 차단할 때 받은편지함 정리 · 예약 메일 [지금 보내기] · 같은 대화 [모두 펼치기] | 개발 중 |
+| 16 | 개인 설정 — **주소록 가져오기 · 내보내기**(vCard · CSV) · 여러 서명(사내 · 대외 · 영문) · 부재중 응답의 서식 본문과 사내/외부 구분 · 2단계 인증 휴대폰 직접 바꾸기 | 다음 |
+
+- 15단계부터는 직원이 쓰며 바라는 것을 먼저 본다 — 16단계가 끝날 즈음 아래 "추후 후보" 가운데 요청이 실제로 있는 것을 골라 다음 단계로 넣는다.
+- 2026-11-09 계획에서 뺀 것: 수신 확인 · 사내 발송 취소(사내 받는 사람에게만 되고, 흔한 실수는 보내기 취소가 막는다 — 아래 후보로).
+
+## 공통 기반 — 조직 · 권한
+
+부서 · 관리자 화면 · 모듈 사이 권한. 파일 공유 · 일정 공유 · 사내 AI 의 데이터 범위가 모두 "누가 무엇을 볼 수 있나"에 달려 2부보다 먼저 한다.
+
+## 2부 — 다른 웹 모듈
+
+파일 저장소 → 캘린더(일정 · 초대) → 사내 AI(메일 · 파일 · 일정을 쓰는 도우미) → 그 밖. 파일 저장소는 11단계 대용량 첨부의 저장 · 올리기를 바탕으로 한다.
+
+## 3부 — 휴대폰 앱 (웹과 나란히)
+
+| 판 | 내용 | 상태 |
+| --- | --- | --- |
+| 앱 1단계 | 로그인(코드 · 새 비밀번호 · 2단계 켜기) · 메일(목록 · 읽기 · 쓰기 · 첨부 · 검색 · 이동 · 삭제) · 새 메일 알림(안드로이드) | main 에 합침 — 서버 배포 뒤 직원 배포 |
+| 사내 배포 | 스토어 없이 우리 키로 서명한 APK 를 포털의 휴대폰 앱 받기 화면에서 | main 에 합침 — 서명 키 준비됨 |
+| 다음 판 후보 | 주소록 · 대용량 첨부 · 필터 · 서식 편집 · 예약 메일 [지금 보내기] | 첫 판 반응을 보고 고른다 |
+
+## 추후 후보 (필요해지면)
+
+단계마다 "처음 판에서 미룬 것" · "이 단계에서 하지 않는 것"을 한데 모은 것이다. 직원 요청이 있거나 다른 모듈을 만들 때 함께 본다.
+
+- **메일 쓰기 · 읽기**: 수신 확인 · 사내 발송 취소, 본문 안에 그림 넣기(지금은 붙여 넣으면 첨부), 메일 안의 배경 그림, 보낸 사람마다 "이미지 늘 보기", 탭을 모두 닫아도 오는 알림(웹 푸시),
+  7일 넘는 예약(메일 엔진 한도라 어렵다).
+- **검색**(14단계에서 미룸): 강조한 곳 사이 다음 · 이전 이동, 검색어 줄임말(`from:` 꼴), 첨부 파일 안의 글 찾기, 끝이 바뀐 말 찾기(형태소 분석).
+- **메일함 정리**(15단계에서 미룸): 메일함을 끌어 옮기기 · 순서 바꾸기, 옮기기 단축키, 예약됨 목록 줄의 [지금 보내기], 차단할 때 옮긴 메일 한꺼번에 되돌리기 · 받은편지함 밖 메일함 정리.
+- **대용량 첨부**(11단계에서 미룸 — 파일 저장소 때 함께): 보관 기간 고르기 · 연장, 다시 보내기, 받는 사람 확인 코드 · 비밀번호, 사내 직원만 받기, 받는 사람별 기록,
+  처음 받음 · 만료 전 알림, 미리 보기, 모두 받기(zip), 폴더 올리기, 링크 → 메일에 담기 되돌리기.
+- **계정 · 보안**(12 · 13단계에서 미룸 — 공통 기반 때 함께): 복구 코드, 이 브라우저 기억, 패스키, 새 기기 로그인 알림 메일, 계정 변경 기록, 로그인 기록의 나라 · 지역,
+  앱 비밀번호 이름 바꾸기 · 만료, 비밀번호 스스로 재설정, 공용 주소로 보내기 · 공유 메일함, 웹메일 관리자 화면.
+- **앱**: 앱 안에서 받아 바로 설치, 최소 판이 아닌 새 판 알림, 아이폰, Google 개발자 인증(2027년 전 세계 — 그 전에 등록할지 정한다).
+
+## 틈날 때 (기능이 아닌 것)
+
+- 작은 정리: 메일 첨부 받기 경로의 긴 한글 파일 이름(nginx 머리글 버퍼), 백엔드 대소문자 라우팅에 대한 옛 주석, 앱 APK 확인을 서명 지문 대조로.
+- 기술 정리(9단계에서 나온 것): 외부 이미지 중계의 접근 로그 양, 실시간 알림에 발송 상태 싣기, 예약 시각 범위의 오류 코드, 모두 4xx 로 붙잡힌 발송의 엔진 동작 실측.
+- 의존성 갱신(배포 2주가 지난 판 — 보안 릴리스는 바로)과 코드 정리(쓰기 화면 쪼개기, 운영 이미지의 시험 파일).
diff --git a/frontend/README.md b/frontend/README.md
index 40e015c..9ca2629 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,48 +1,32 @@
-# frontend
+# frontend — ARA SYSTEM 웹메일 (Vue 3)
 
-This template should help get you started developing with Vue 3 in Vite.
+웹메일 화면이다. 개발에서는 호스트의 vite 로, 운영에서는 nginx 가 화면을 내주고 같은 주소의 `/api` 를 백엔드로 넘긴다.
 
-## Recommended IDE Setup
+- 구조 · 개발 규칙(골격 · 스토어 · 컴포저블 · 화면별 파일): [`.claude/skills/vue3/SKILL.md`](../.claude/skills/vue3/SKILL.md)
+- 화면 디자인 · 화면 문구 규칙: [`docs/design/webmail/README.md`](../docs/design/webmail/README.md)
+- API 약속: [`docs/mail/api-contract.md`](../docs/mail/api-contract.md)
 
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+## 개발 서버
 
-## Recommended Browser Setup
-
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
+```bash
+cd frontend && npm install && npm run dev   # http://localhost:5173 — /api 는 vite 프록시가 백엔드 컨테이너로
 ```
 
-### Compile and Hot-Reload for Development
+백엔드 · DB · 메일 엔진은 루트의 개발 스택으로 먼저 띄운다(루트 README "빠른 시작"). 포트는 루트 `.env.{mode}` 의 `FRONTEND_PORT` · `BACKEND_PORT` 를 따른다.
+API 응답이 JSON 이 아니라 HTML 이면 vite 프록시가 백엔드에 닿지 못한 것이다(백엔드 컨테이너 · 포트를 본다).
 
-```sh
-npm run dev
+## 검사
+
+```bash
+npm run lint         # 경고 0
+npm run type-check
+npm run test:unit    # 시간대가 걸린 화면을 고쳤으면 Git Bash 에서 TZ=UTC npm run test:unit -- --run 도
 ```
 
-### Type-Check, Compile and Minify for Production
+## 운영 빌드
 
-```sh
-npm run build
-```
+운영은 이미지(nginx)로 만든다 — `docker compose --env-file .env.production up -d --build`(docker 스킬 "운영 환경" · "같은 주소 배포"). `VITE_API_BASE_URL` 은 `/api` 로 고정이다.
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
+## 편집기
 
-```sh
-npm run test:unit
-```
+VS Code + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar). 형 검사는 `vue-tsc` 다.
diff --git a/frontend/src/components/feedback/ModalDialog.vue b/frontend/src/components/feedback/ModalDialog.vue
index e60484e..bc539bc 100644
--- a/frontend/src/components/feedback/ModalDialog.vue
+++ b/frontend/src/components/feedback/ModalDialog.vue
@@ -11,6 +11,7 @@
 // - 닫기는 열기보다 먼저 한다 — 한 대화상자가 닫히고 다른 대화상자가 열리는 때(세션 만료) 둘이 겹치지 않게
 // 단추는 actions 슬롯에 둔다: class="modal-dialog__action" (보조 단추는 modal-dialog__action--secondary, 되돌릴 수 없는 일은 --danger 를 더한다)
 // 글(message) 대신 · 글 아래에 입력 칸을 둘 때는 기본 슬롯에 넣는다 — 글이 없으면 describedBy 로 칸의 안내를 가리킨다
+// 제목 · 글은 낱말 단위로 줄을 바꾸고(keep-all) 띄어쓰기 없는 긴 글만 아무 데서나 끊는다(15단계 실사용 시험) — 슬롯 안의 글은 쓰는 쪽이 정한다
 import { computed, onMounted, ref, watch } from 'vue'
 
 interface Props {
@@ -190,6 +191,16 @@ onMounted(() => {
   background: var(--color-backdrop);
 }
 
+/*
+ * 제목 · 글은 낱말 가운데서 줄을 바꾸지 않는다("지울까/요?" — 2026-11-09 실사용 시험). 띄어쓰기 없는 긴 글(긴 주소 · 파일 이름)은
+ * 창 밖으로 넘치지 않게 아무 데서나 끊는다 — 둘을 함께 둔다
+ */
+.modal-dialog__title,
+.modal-dialog__message {
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
 .modal-dialog__title {
   margin: 0;
   font-size: var(--font-size-title-sm);
diff --git a/frontend/src/components/mail/ConversationListItem.vue b/frontend/src/components/mail/ConversationListItem.vue
index 8dcdaed..d7d3901 100644
--- a/frontend/src/components/mail/ConversationListItem.vue
+++ b/frontend/src/components/mail/ConversationListItem.vue
@@ -5,11 +5,14 @@
 // - 줄의 메일이 모두 보내기를 기다리는 메일이면 고르기 · 별을 쓸 수 없다(aria-disabled + 까닭은 title — 메일 줄의 고르기 칸과 같은 결)
 // - 마지막 메일이 붙잡힌 메일이면 시각 자리가 "보내는 중" · "예약 · …"(청록 굵게 — 메일 목록과 같다)
 // - 임시보관함의 제목 없는 저장본은 메일 줄처럼 흐린 "(제목 없음)" (리뷰 L5)
+// 끌어다 놓기(15단계 — 디자인 원본 ListDrag15): 줄을 메일함 패널로 끌어 옮긴다 — 고른 줄이면 고른 것 모두, 아니면 이 줄만.
+//   그 대화에서 이 메일함에 든 메일을 옮기고(붙잡힌 메일은 빼고), 그런 메일뿐인 줄은 끌 수 없다. 줄의 링크가 끌어 가던 메일 주소 대신 우리 끌기 자료만 싣는다 (useMailRowDrag)
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import AppIcon from '@/components/AppIcon.vue'
 import MailCheckbox from '@/components/mail/MailCheckbox.vue'
+import { useMailRowDrag } from '@/composables/useMailDrag'
 import { MAIL_BULK_TEXT, MAIL_LIST_ROW_TEXT, MAIL_NO_SUBJECT } from '@/shared/constants/mail'
 import { MAIL_CONVERSATION_LIST_TEXT } from '@/shared/constants/mail-conversation'
 import { SEND_LATER_TEXT } from '@/shared/constants/mail-send-later'
@@ -55,6 +58,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const drag = useMailRowDrag()
+
 const subject = computed(() => props.row.latest.subject || MAIL_NO_SUBJECT)
 const countText = computed(() => conversationCountText(props.row))
 /** 마지막 메일이 붙잡아 둔 발송이면 "예약 · …" · "보내는 중" (9단계) */
@@ -85,7 +90,10 @@ function onStar() {
       { 'is-selected': selected, 'is-unread': unread, 'is-checked': checked, 'is-checking': checking },
     ]"
     :data-row-id="row.id"
+    :draggable="!held"
     @mousedown="onMouseDown"
+    @dragstart="(event: DragEvent) => drag.start(event, row.id)"
+    @dragend="drag.end"
   >
     <MailCheckbox
       class="thread-row__check"
diff --git a/frontend/src/components/mail/ConversationMessagePanel.vue b/frontend/src/components/mail/ConversationMessagePanel.vue
index 0823ed2..dfa80d2 100644
--- a/frontend/src/components/mail/ConversationMessagePanel.vue
+++ b/frontend/src/components/mail/ConversationMessagePanel.vue
@@ -10,6 +10,8 @@
 // - [답장]은 읽기 화면의 [답장]과 같은 쓰기 화면이고, 임시 저장본 · 예약한 메일에는 없다. [이 메일만 열기]는 그 메일을 읽기 화면으로 연다(mail-conversation.ts) —
 //   분할 보기는 기록에 쌓고, 목록 보기는 이전 · 다음처럼 바꿔 끼운다([목록으로]가 쌓인 기록으로 돌아가지 않게)
 // - 본문 안에서 누른 Ctrl+P(맥 ⌘P)는 이 메일의 인쇄 화면을 연다(읽기 화면과 같은 판정 — useMailPrint)
+// - [모두 펼치기](15단계)로 펼친 줄은 본문을 바로 받지 않는다 — 이 안(data-conversation-panel)이 화면에 들어오면 칸이 스토어에 알려 차례로 받는다.
+//   받기 전에는 받는 중과 같은 뼈대(aria-busy)다 (useConversationPanelVisibility)
 import { computed } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -70,6 +72,7 @@ function onFrameKeydown(event: KeyboardEvent) {
   <div
     :id="panelId"
     class="conversation-panel"
+    :data-conversation-panel="row.message.id"
   >
     <p
       v-if="recipients"
diff --git a/frontend/src/components/mail/ConversationMessageRow.vue b/frontend/src/components/mail/ConversationMessageRow.vue
index 0c16ab9..f9dd569 100644
--- a/frontend/src/components/mail/ConversationMessageRow.vue
+++ b/frontend/src/components/mail/ConversationMessageRow.vue
@@ -6,6 +6,9 @@
 // - 붙잡힌 메일(보내기 취소 · 예약 — 9단계)은 시각 자리에 목록과 같은 "보내는 중" · "예약 · …"(청록 굵게)
 // - 안 읽은 메일(row.unread — 2026-11-07)은 목록 줄(MessageListItem)과 같은 굵기 · 색: 이름 650, 미리 보기 · 시각 600(목록 줄의 제목 · 시각 자리).
 //   화면 낭독은 이름 앞에 목록과 같은 "안 읽음, "(MAIL_LIST_ROW_TEXT). 지금 보는 메일의 줄도 같다
+// - 펼친 줄 머리 오른쪽 [답장](15단계 — 디자인 원본 Reader15 "6", 36 — 안내 줄 단추 크기): 긴 메일을 끝까지 내리지 않고 답장한다.
+//   줄 머리 전체가 펼침 단추라 머리를 감싸는 틀(마우스를 올린 바탕은 틀에) 안에 펼침 단추와 [답장]을 나란히 둔다(단추 안에 단추를 넣지 않는다).
+//   펼친 안 아래의 [답장] · [이 메일만 열기]는 그대로다. 임시 저장본 · 예약한 메일 · 그사이 지워진 메일의 줄에는 없다(아래 [답장]과 같다)
 // 뱃지 · 알약 없이 글로만 보인다. 검색 강조는 넣지 않는다
 import { computed } from 'vue'
 
@@ -39,6 +42,13 @@ const emit = defineEmits<Emits>()
 
 /** 펼친 안의 id — 메일 id 는 서버의 불투명한 글이라 그대로 붙인다 */
 const panelId = computed(() => `conversation-panel-${props.row.message.id}`)
+/** 펼친 줄 머리의 [답장] — 답장할 수 있는 메일이고(row.replyLocation) 그사이 지워지지 않았을 때 (펼친 안 아래 [답장]과 같은 조건) */
+const headReply = computed(() => {
+  if (!props.expanded || !props.row.replyLocation) return null
+  const detail = props.detail
+  if (detail?.status === 'error' && detail.error.code === 'RES_001') return null
+  return props.row.replyLocation
+})
 </script>
 
 <template>
@@ -69,39 +79,49 @@ const panelId = computed(() => `conversation-panel-${props.row.message.id}`)
     </div>
 
     <template v-else>
-      <button
-        type="button"
-        class="conversation-row__line"
-        :aria-expanded="expanded"
-        :aria-controls="expanded ? panelId : undefined"
-        data-conversation-toggle
-        @click="emit('toggle', row.message.id)"
-      >
-        <AppIcon
-          :name="expanded ? 'chevron-down' : 'chevron-right'"
-          :stroke-width="2"
-          class="conversation-row__chevron"
-        />
-        <span
-          :class="['conversation-row__avatar', { 'conversation-row__avatar--mine': row.sender.mine }]"
-          aria-hidden="true"
-        >{{ row.sender.initial }}</span>
-        <span class="conversation-row__who">
+      <div :class="['conversation-row__head', { 'conversation-row__head--reply': headReply }]">
+        <button
+          type="button"
+          class="conversation-row__line"
+          :aria-expanded="expanded"
+          :aria-controls="expanded ? panelId : undefined"
+          data-conversation-toggle
+          @click="emit('toggle', row.message.id)"
+        >
+          <AppIcon
+            :name="expanded ? 'chevron-down' : 'chevron-right'"
+            :stroke-width="2"
+            class="conversation-row__chevron"
+          />
           <span
-            v-if="row.unread"
-            class="visually-hidden"
-          >{{ MAIL_LIST_ROW_TEXT.unreadPrefix }}</span>{{ row.sender.name }}
-        </span>
-        <span
-          v-if="row.sender.mailboxName"
-          class="conversation-row__mailbox"
-        >{{ row.sender.mailboxName }}</span>
-        <span class="conversation-row__preview">{{ row.preview }}</span>
-        <time
-          :class="['conversation-row__time', { 'is-pending': row.pending }]"
-          :datetime="row.timeValue"
-        >{{ row.time }}</time>
-      </button>
+            :class="['conversation-row__avatar', { 'conversation-row__avatar--mine': row.sender.mine }]"
+            aria-hidden="true"
+          >{{ row.sender.initial }}</span>
+          <span class="conversation-row__who">
+            <span
+              v-if="row.unread"
+              class="visually-hidden"
+            >{{ MAIL_LIST_ROW_TEXT.unreadPrefix }}</span>{{ row.sender.name }}
+          </span>
+          <span
+            v-if="row.sender.mailboxName"
+            class="conversation-row__mailbox"
+          >{{ row.sender.mailboxName }}</span>
+          <span class="conversation-row__preview">{{ row.preview }}</span>
+          <time
+            :class="['conversation-row__time', { 'is-pending': row.pending }]"
+            :datetime="row.timeValue"
+          >{{ row.time }}</time>
+        </button>
+        <RouterLink
+          v-if="headReply"
+          class="conversation-row__reply"
+          :to="headReply"
+          data-conversation-head-reply
+        >
+          {{ MAIL_CONVERSATION_TEXT.reply }}
+        </RouterLink>
+      </div>
       <ConversationMessagePanel
         v-if="expanded"
         :panel-id="panelId"
@@ -132,10 +152,47 @@ const panelId = computed(() => `conversation-panel-${props.row.message.id}`)
   text-align: left;
 }
 
-button.conversation-row__line:hover {
+/* 다른 메일의 머리 — 펼침 단추와 [답장]을 감싸고, 마우스를 올린 바탕은 머리 전체에 (디자인 원본 Reader15 "6") */
+.conversation-row__head {
+  display: flex;
+  align-items: center;
+  background: var(--color-surface);
+}
+
+.conversation-row__head:hover {
   background: var(--color-surface-panel);
 }
 
+.conversation-row__head .conversation-row__line {
+  flex: 1 1 auto;
+  min-width: 0;
+  background: transparent;
+}
+
+/* [답장]이 있으면 단추 오른쪽 안쪽을 줄인다 — [답장]의 안쪽 여백이 시각과 사이를 둔다 */
+.conversation-row__head--reply .conversation-row__line {
+  padding-right: var(--space-6);
+}
+
+/* 펼친 줄 머리의 [답장] — 36 글자 단추(안내 줄 단추의 밀도 예외 재사용), 펼친 안 아래의 [답장]과 같은 모양 */
+.conversation-row__reply {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--size-notice-action);
+  margin-right: var(--space-4);
+  padding: 0 var(--space-10);
+  border-radius: var(--radius-md);
+  color: var(--color-brand);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.conversation-row__reply:hover {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand-strong);
+}
+
 /* 상자가 넘치는 것을 자르므로(모서리) 고리를 안쪽에 그린다 */
 button.conversation-row__line:focus-visible {
   outline-offset: calc(var(--focus-ring-width) * -1);
diff --git a/frontend/src/components/mail/ConversationTableRow.vue b/frontend/src/components/mail/ConversationTableRow.vue
index 1c45e3c..61d4706 100644
--- a/frontend/src/components/mail/ConversationTableRow.vue
+++ b/frontend/src/components/mail/ConversationTableRow.vue
@@ -6,11 +6,14 @@
 // - 줄의 메일이 모두 보내기를 기다리는 메일이면 고르기 · 별을 쓸 수 없다(aria-disabled + 까닭은 title)
 // - 임시보관함의 제목 없는 저장본은 메일 표처럼 흐린 "(제목 없음)" (리뷰 L5)
 // 칸 폭 · 칸 공통 여백은 표(MessageTable)가 정한다.
+// 끌어다 놓기(15단계 — 디자인 원본 ListDrag15): 줄을 메일함 패널로 끌어 옮긴다 — 고른 줄이면 고른 것 모두, 아니면 이 줄만.
+//   그 대화에서 이 메일함에 든 메일을 옮기고(붙잡힌 메일은 빼고), 그런 메일뿐인 줄은 끌 수 없다. 줄의 링크가 끌어 가던 메일 주소 대신 우리 끌기 자료만 싣는다 (useMailRowDrag)
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import AppIcon from '@/components/AppIcon.vue'
 import MailCheckbox from '@/components/mail/MailCheckbox.vue'
+import { useMailRowDrag } from '@/composables/useMailDrag'
 import { MAIL_BULK_TEXT, MAIL_LIST_ROW_TEXT, MAIL_NO_SUBJECT } from '@/shared/constants/mail'
 import { MAIL_CONVERSATION_LIST_TEXT } from '@/shared/constants/mail-conversation'
 import { SEND_LATER_TEXT } from '@/shared/constants/mail-send-later'
@@ -47,6 +50,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const drag = useMailRowDrag()
+
 const subject = computed(() => props.row.latest.subject || MAIL_NO_SUBJECT)
 const countText = computed(() => conversationCountText(props.row))
 /** 마지막 메일이 붙잡아 둔 발송이면 "예약 · …" · "보내는 중" (9단계) */
@@ -80,8 +85,11 @@ function onStar() {
   <tr
     :class="['thread-table-row', { 'is-unread': unread, 'is-checked': checked }]"
     :data-row-id="row.id"
+    :draggable="!held"
     @click="onRowClick"
     @mousedown="onMouseDown"
+    @dragstart="(event: DragEvent) => drag.start(event, row.id)"
+    @dragend="drag.end"
   >
     <td class="mail-table__check">
       <!-- 폭 32px · 행 높이를 채우는 고르기 상자 — 44px 기준의 의도된 예외 (메일 표와 같다) -->
diff --git a/frontend/src/components/mail/MailBulkMoveButton.vue b/frontend/src/components/mail/MailBulkMoveButton.vue
index e8bde88..0c1ab57 100644
--- a/frontend/src/components/mail/MailBulkMoveButton.vue
+++ b/frontend/src/components/mail/MailBulkMoveButton.vue
@@ -3,17 +3,21 @@
 // 메뉴는 편집기 메뉴(EditorMenu — 항목 높이 40, 메뉴 항목 밀도 예외)를 같이 쓴다. 키보드로 열면(Enter · Space · 아래 화살표) 첫 항목에 초점,
 // 마우스로 열면 메뉴 자체에 초점(EditorPopup). Esc 는 메뉴만 닫고 이 단추로 돌아간다 — EditorPopup 이 Esc 를 막아 목록 칸의 "선택 풀기"까지 가지 않는다.
 // 받은 속성(data-tool · tabindex — 도구 줄의 로빙)은 단추에 붙인다.
+// 15단계(디자인 원본 Reader15): 옮길 곳은 메일함 패널처럼 들여 쓴 나무(mail-move-menu.ts — 읽기 화면의 [이동 ▾]와 같은 모양 · 같은 규칙).
+// 고른 메일이 든 메일함에 하위 메일함이 있으면 고를 수 없는 흐린 줄로 남긴다("고른 메일이 있는 메일함"). 메뉴가 화면 밖으로 넘치면 좌우를 바꿔 연다(EditorPopup)
 import { computed, ref } from 'vue'
 
 import EditorMenu from '@/components/mail/editor/EditorMenu.vue'
 import type { EditorMenuItem } from '@/components/mail/editor/editor-menu'
 import MailBulkButton from '@/components/mail/MailBulkButton.vue'
+import { moveMenuItems } from '@/components/mail/mail-move-menu'
 import { MAIL_BULK_TEXT } from '@/shared/constants/mail'
 import type { Mailbox } from '@/shared/types/mail'
+import { hasMoveTarget, type MailMoveTarget } from '@/shared/utils/mail-move-targets'
 
 interface Props {
-  /** 옮길 수 있는 메일함 — 지금 메일함 · 임시보관함 · 휴지통을 뺀 메일함 */
-  mailboxes: readonly Mailbox[]
+  /** 옮길 곳 — 메일함 패널 차례 · 깊이, 고른 메일이 든 메일함 · 임시보관함 · 휴지통은 빼거나 고를 수 없는 줄로 (mail-move-targets.ts) */
+  mailboxes: readonly MailMoveTarget[]
   labelMode: 'always' | 'wide' | 'never'
   disabled?: boolean
 }
@@ -35,10 +39,10 @@ const open = ref<boolean>(false)
 const byKeyboard = ref<boolean>(false)
 
 const trigger = computed<HTMLElement | null>(() => buttonRef.value?.element ?? null)
-const items = computed<EditorMenuItem[]>(() => props.mailboxes.map((mailbox) => ({ id: mailbox.id, label: mailbox.name })))
+const items = computed<EditorMenuItem[]>(() => moveMenuItems(props.mailboxes, MAIL_BULK_TEXT.moveHereChecked))
 
 function openMenu(keyboard: boolean) {
-  if (props.disabled || items.value.length === 0) return
+  if (props.disabled || !hasMoveTarget(props.mailboxes)) return
   byKeyboard.value = keyboard
   open.value = true
 }
@@ -64,10 +68,11 @@ function onClose(restoreFocus: boolean) {
 }
 
 function onSelect(id: string) {
+  const target = props.mailboxes.find((row) => row.mailbox.id === id && !row.disabled)
+  if (!target) return
   open.value = false
   trigger.value?.focus()
-  const target = props.mailboxes.find((mailbox) => mailbox.id === id)
-  if (target) emit('move', target)
+  emit('move', target.mailbox)
 }
 </script>
 
@@ -88,6 +93,7 @@ function onSelect(id: string) {
     />
     <EditorMenu
       v-if="open"
+      class="bulk-move__menu"
       :label="MAIL_BULK_TEXT.moveMenu"
       :items="items"
       :trigger="trigger"
@@ -103,4 +109,13 @@ function onSelect(id: string) {
 .bulk-move {
   position: relative;
 }
+
+/* 옮길 메일함 메뉴 — 이름 길이만큼(폭 200 부터 320 까지), 그보다 긴 이름은 줄을 바꾼다 (디자인 원본 Reader15) */
+.bulk-move__menu {
+  width: max-content;
+  min-width: 12.5rem;
+  /* 좁은 화면에서는 단추의 어느 끝에 맞춰도 화면 안에 들게 — 폭 360 이면 280 까지 */
+  max-width: min(20rem, calc(100vw - 5rem));
+  overflow-wrap: anywhere;
+}
 </style>
diff --git a/frontend/src/components/mail/MailDragChip.vue b/frontend/src/components/mail/MailDragChip.vue
new file mode 100644
index 0000000..86a4349
--- /dev/null
+++ b/frontend/src/components/mail/MailDragChip.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+// 목록 줄을 끄는 동안 마우스를 따라오는 표 — "메일 3통" · "대화 1개" (15단계 — 디자인 원본 ListDrag15 "끌어다 놓는 동안의 모양")
+// 알림과 같은 어두운 바탕(#0B3640)에 12.5px 굵은 흰 글자, 봉투(메일) · 말풍선(대화) 아이콘. 마우스 오른쪽 아래에 붙는다.
+// 브라우저는 끌기를 시작하는 순간 그려진 요소의 모습을 찍는다(setDragImage) — 그래서 메일 화면(MailLayout)에 늘 그려 두되 화면 밖에 두고,
+// 수 · 아이콘은 끌기를 시작할 때 useMailDrag 가 이 요소에 바로 적는다(화면 갱신을 기다리면 늦다). 화면 낭독에는 읽히지 않는다(aria-hidden)
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import { registerMailDragChip } from '@/composables/useMailDrag'
+
+const hostRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  registerMailDragChip(hostRef.value)
+})
+
+onBeforeUnmount(() => {
+  registerMailDragChip(null)
+})
+</script>
+
+<template>
+  <div
+    ref="hostRef"
+    class="drag-chip-host"
+    aria-hidden="true"
+    data-kind="messages"
+    data-mail-drag-chip
+  >
+    <span class="drag-chip">
+      <AppIcon
+        name="mail"
+        :size="14"
+        :stroke-width="2"
+        class="drag-chip__icon drag-chip__icon--messages"
+      />
+      <AppIcon
+        name="message-square"
+        :size="14"
+        :stroke-width="2"
+        class="drag-chip__icon drag-chip__icon--conversations"
+      />
+      <span data-drag-chip-text />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+/*
+ * 화면 밖에 그려 둔다 — 보이지 않아야 하지만 그려져 있어야 브라우저가 모습을 찍는다(display: none 이면 찍히지 않는다).
+ * 요소의 왼쪽 위가 마우스 자리다 — 표는 그 안에서 오른쪽 16 · 아래 22 만큼 비켜 둔다 (디자인 원본 ListDrag15)
+ */
+.drag-chip-host {
+  position: fixed;
+  top: 0;
+  left: -100rem;
+  padding: var(--space-22) 0 0 var(--space-16);
+  pointer-events: none;
+}
+
+.drag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  /* 위아래 5 · 오른쪽 10 · 왼쪽 8 (디자인 원본 ListDrag15) */
+  padding: 0.3125rem var(--space-10) 0.3125rem var(--space-8);
+  border-radius: var(--radius-md);
+  background: var(--color-brand-surface);
+  color: var(--color-surface);
+  font-size: var(--font-size-label);
+  font-weight: 600;
+  line-height: var(--line-height-tight);
+  white-space: nowrap;
+  box-shadow: var(--shadow-toast-strong);
+}
+
+/* 끄는 것에 맞는 아이콘만 — 메일 줄은 봉투, 대화 줄은 말풍선 */
+.drag-chip-host[data-kind='messages'] .drag-chip__icon--conversations,
+.drag-chip-host[data-kind='conversations'] .drag-chip__icon--messages {
+  display: none;
+}
+</style>
diff --git a/frontend/src/components/mail/MailListDrag.stage15.spec.ts b/frontend/src/components/mail/MailListDrag.stage15.spec.ts
new file mode 100644
index 0000000..83f4d5e
--- /dev/null
+++ b/frontend/src/components/mail/MailListDrag.stage15.spec.ts
@@ -0,0 +1,422 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, type DOMWrapper, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+import { defineComponent, h } from 'vue'
+
+import { endMailDrag, MAIL_DRAG_TYPE } from '@/composables/useMailDrag'
+import type { ConversationSummary, Mailbox, MessagesPatch, MessageSummary } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore } from '@/stores/toast.store'
+import { dragEvent, fakeDataTransfer, type FakeDataTransfer } from '@/test-utils/drag'
+import { flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import MailboxPanel from './MailboxPanel.vue'
+import MailDragChip from './MailDragChip.vue'
+import MessageList from './MessageList.vue'
+import MessageTable from './MessageTable.vue'
+
+// 15단계 — 목록 줄을 메일함 패널로 끌어다 놓기 · 목록 [이동 ▾]의 들여 쓴 나무 · 스팸메일함으로 옮기는 세 길 (디자인 원본 ListDrag15 · Reader15)
+
+function box(id: string, role: Mailbox['role'], name: string, partial: Partial<Mailbox> = {}): Mailbox {
+  return { id, name, role, parentId: null, sortOrder: 0, totalCount: 3, unreadCount: 0, ...partial }
+}
+
+const MAILBOXES: Mailbox[] = [
+  box('inbox', 'inbox', '받은편지함'),
+  box('sent', 'sent', '보낸편지함'),
+  box('drafts', 'drafts', '임시보관함'),
+  box('junk', 'junk', '스팸메일함'),
+  box('trash', 'trash', '휴지통'),
+  box('clients', null, '거래처'),
+  box('quotes', null, '견적', { parentId: 'clients' }),
+  box('project', null, '프로젝트', { sortOrder: 1 }),
+  box('project-quotes', null, '견적', { parentId: 'project' }),
+]
+
+function summary(id: string, mailboxId = 'inbox', partial: Partial<MessageSummary> = {}): MessageSummary {
+  return {
+    id,
+    threadId: `t-${id}`,
+    mailboxIds: [mailboxId],
+    from: { name: '박지훈', email: 'jihun.park@example.com' },
+    to: [],
+    subject: `견적 조건 문의드립니다 ${id}`,
+    preview: '',
+    receivedAt: '2026-11-08T01:00:00Z',
+    isRead: true,
+    isFlagged: false,
+    hasAttachment: false,
+    size: 100,
+    pendingSend: null,
+    ...partial,
+  }
+}
+
+function conversation(id: string, messageIds: string[], partial: Partial<ConversationSummary> = {}): ConversationSummary {
+  return {
+    id,
+    latest: summary(messageIds[0] ?? id),
+    participants: [{ name: '박지훈', email: 'jihun.park@example.com' }],
+    messageCount: 3,
+    messageIds,
+    pendingSendIds: [],
+    isRead: true,
+    isFlagged: false,
+    hasAttachment: false,
+    ...partial,
+  }
+}
+
+describe('목록 줄 끌어다 놓기 · 목록 [이동 ▾] (15단계)', () => {
+  let pinia: Pinia
+  let requests: MockRequest[]
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated({ email: 'ara.kim@arasystem.it.kr', name: '김아라' })
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) wrapper.unmount()
+    // 끌기 자료는 탭(모듈)에 하나다 — 놓지 않고 끝난 시험의 끌기가 다음 시험에 남지 않게
+    endMailDrag()
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  function serve(messages: MessageSummary[], conversations: ConversationSummary[] = []) {
+    requests = installMockApi((request) => {
+      if (request.url === '/mailboxes') return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: 9 } })
+      if (request.url === '/messages' && request.method === 'GET') {
+        return ok({ items: messages, pageInfo: { hasNext: false, nextCursor: null, total: messages.length } })
+      }
+      if (request.url === '/conversations') {
+        return ok({
+          items: conversations,
+          pageInfo: { hasNext: false, nextCursor: null, total: conversations.length },
+          basis: 'index',
+        })
+      }
+      if (request.method === 'PATCH' && request.url === '/messages') {
+        return ok({ updatedIds: (request.data as MessagesPatch).ids, failedIds: [] })
+      }
+      return ok({ usedBytes: 0, limitBytes: null, attachmentMaxBytes: 1, attachmentTotalMaxBytes: 1 })
+    })
+  }
+
+  /** 메일 화면처럼 — 메일함 패널 · 목록 · 끄는 동안의 표 */
+  async function mountScreen(
+    options: {
+      boxId?: string
+      messages?: MessageSummary[]
+      conversations?: ConversationSummary[]
+      view?: 'split' | 'list'
+    } = {},
+  ) {
+    const boxId = options.boxId ?? 'inbox'
+    const messages = options.messages ?? [summary('m1'), summary('m2'), summary('m3')]
+    serve(messages, options.conversations)
+    const store = useMailStore()
+    store.mailboxes = MAILBOXES
+    store.mailboxesStatus = 'ready'
+    if (options.conversations) {
+      store.listSource = { kind: 'conversations', mailboxId: boxId }
+      store.conversations = options.conversations
+    } else {
+      store.currentMailboxId = boxId
+      store.messages = messages
+    }
+    store.pageInfo = { hasNext: false, nextCursor: null, total: options.conversations?.length ?? messages.length }
+    store.listStatus = 'ready'
+    const router = createTestRouter()
+    await router.push(`/mail/${boxId}`)
+    await router.isReady()
+    const List = options.view === 'list' ? MessageTable : MessageList
+    const Screen = defineComponent({
+      setup: () => () => h('div', [h(MailboxPanel), h(List), h(MailDragChip)]),
+    })
+    const wrapper = mount(Screen, { global: { plugins: [pinia, router] }, attachTo: document.body })
+    mounted.push(wrapper)
+    await flushPromises()
+    return { wrapper, store, router }
+  }
+
+  const patches = () =>
+    requests.filter((request) => request.method === 'PATCH' && request.url === '/messages').map((request) => request.data)
+  const toastTexts = () => useToastStore().toasts.map((toast) => toast.message)
+
+  function panelRow(wrapper: VueWrapper, name: string, index = 0): DOMWrapper<Element> {
+    const rows = wrapper.findAll('.mailbox-row').filter((row) => row.get('.mailbox-row__name').text() === name)
+    const row = rows[index]
+    if (!row) throw new Error(`${name} 줄이 없다`)
+    return row
+  }
+
+  function listRow(wrapper: VueWrapper, id: string): DOMWrapper<Element> {
+    const row = wrapper.find(`[data-row-id="${id}"]`)
+    if (!row.exists()) throw new Error(`${id} 줄이 없다`)
+    return row
+  }
+
+  /** 줄을 끌기 시작한다 — 줄 안의 링크에서 시작해도 줄이 받는다 (브라우저는 링크의 주소를 먼저 실어 둔다) */
+  function startDrag(row: DOMWrapper<Element>): FakeDataTransfer {
+    const transfer = fakeDataTransfer()
+    transfer.setData('text/uri-list', 'http://localhost/mail/inbox/m2')
+    transfer.setData('text/plain', 'http://localhost/mail/inbox/m2')
+    const origin = row.find('a').exists() ? row.get('a').element : row.element
+    origin.dispatchEvent(dragEvent('dragstart', transfer))
+    return transfer
+  }
+
+  /** 패널 줄 위로 들어와 머문다 — dragover 를 받았는가(놓을 수 있는가) */
+  function hover(row: DOMWrapper<Element>, transfer: FakeDataTransfer): boolean {
+    row.element.dispatchEvent(dragEvent('dragenter', transfer))
+    const over = dragEvent('dragover', transfer)
+    row.element.dispatchEvent(over)
+    return over.defaultPrevented
+  }
+
+  async function dropOn(row: DOMWrapper<Element>, transfer: FakeDataTransfer) {
+    hover(row, transfer)
+    row.element.dispatchEvent(dragEvent('drop', transfer))
+    await flushPromises()
+  }
+
+  describe('끄는 것과 끄는 동안의 모양', () => {
+    it('줄을 끌면 우리 끌기 자료만 싣는다 — 링크의 메일 주소는 지우고, 마우스를 따라오는 표는 "메일 1통"', async () => {
+      const { wrapper } = await mountScreen()
+
+      const transfer = startDrag(listRow(wrapper, 'm2'))
+
+      expect(transfer.types).toEqual([MAIL_DRAG_TYPE])
+      expect(transfer.getData(MAIL_DRAG_TYPE)).not.toBe('')
+      expect(transfer.effectAllowed).toBe('move')
+      const chip = wrapper.get('[data-mail-drag-chip]')
+      expect(transfer.dragImage).toBe(chip.element)
+      expect(chip.text()).toBe('메일 1통')
+      expect(chip.attributes('data-kind')).toBe('messages')
+      expect(chip.attributes('aria-hidden')).toBe('true')
+      // 끈 줄은 흐리게 하지 않는다 — 줄은 그대로
+      expect(listRow(wrapper, 'm2').classes()).toEqual(['message-row'])
+    })
+
+    it('놓을 수 있는 메일함 위에서는 점선 · 옅은 청록(is-drop-target), 나가면 지운다 — 지금 메일함 · 임시보관함 · 「예약됨」은 받지 않는다', async () => {
+      const { wrapper, store } = await mountScreen()
+      store.scheduledCount = 1
+      await flushPromises()
+      const transfer = startDrag(listRow(wrapper, 'm2'))
+
+      const clients = panelRow(wrapper, '거래처')
+      expect(hover(clients, transfer)).toBe(true)
+      expect(transfer.dropEffect).toBe('move')
+      await flushPromises()
+      expect(clients.classes()).toContain('is-drop-target')
+      clients.element.dispatchEvent(dragEvent('dragleave', transfer))
+      await flushPromises()
+      expect(clients.classes()).not.toContain('is-drop-target')
+
+      for (const name of ['받은편지함', '임시보관함']) {
+        const row = panelRow(wrapper, name)
+        expect(hover(row, transfer)).toBe(false)
+        await flushPromises()
+        expect(row.classes()).not.toContain('is-drop-target')
+      }
+      const scheduled = wrapper.get('[data-scheduled-mailbox]')
+      const over = dragEvent('dragover', transfer)
+      scheduled.element.dispatchEvent(over)
+      expect(over.defaultPrevented).toBe(false)
+      // 휴지통은 놓을 수 있다 — [삭제]와 같다
+      expect(hover(panelRow(wrapper, '휴지통'), transfer)).toBe(true)
+    })
+
+    it('파일 끌기는 메일함 패널이 받지 않는다 (쓰기 화면의 첨부 놓기와 겹치지 않게)', async () => {
+      const { wrapper } = await mountScreen()
+
+      const files = fakeDataTransfer([new File(['x'], '보고서.pdf')])
+      expect(hover(panelRow(wrapper, '거래처'), files)).toBe(false)
+    })
+
+    it('보내기를 기다리는 메일의 줄은 끌 수 없다 — draggable 이 아니고 링크를 끌어도 막는다', async () => {
+      const held = summary('m9', 'sent', { pendingSend: { kind: 'scheduled', sendAt: '2026-11-10T00:00:00Z' } })
+      const { wrapper } = await mountScreen({ boxId: 'sent', messages: [summary('m1', 'sent'), held] })
+
+      expect(listRow(wrapper, 'm9').attributes('draggable')).toBe('false')
+      expect(listRow(wrapper, 'm1').attributes('draggable')).toBe('true')
+      const transfer = fakeDataTransfer()
+      const start = dragEvent('dragstart', transfer)
+      listRow(wrapper, 'm9').get('a').element.dispatchEvent(start)
+      expect(start.defaultPrevented).toBe(true)
+      expect(transfer.types).toEqual([])
+    })
+  })
+
+  describe('놓으면', () => {
+    it('내 메일함에 놓으면 [이동 ▾]와 같다 — "메일 1통을 거래처로 옮겼습니다." + [되돌리기]', async () => {
+      const { wrapper, store } = await mountScreen()
+
+      await dropOn(panelRow(wrapper, '거래처'), startDrag(listRow(wrapper, 'm2')))
+
+      expect(patches()).toEqual([{ ids: ['m2'], mailboxId: 'clients' }])
+      expect(store.messages.map((message) => message.id)).toEqual(['m1', 'm3'])
+      const [toast] = useToastStore().toasts
+      expect(toast?.message).toBe('메일 1통을 거래처로 옮겼습니다.')
+      expect(toast?.action && 'label' in toast.action ? toast.action.label : null).toBe('되돌리기')
+      expect(panelRow(wrapper, '거래처').classes()).not.toContain('is-drop-target')
+    })
+
+    it('같은 이름의 메일함이 또 있으면 위 메일함 이름을 붙인다 — "메일 1통을 프로젝트 › 견적으로 옮겼습니다."', async () => {
+      const { wrapper } = await mountScreen()
+
+      await dropOn(panelRow(wrapper, '견적', 1), startDrag(listRow(wrapper, 'm1')))
+
+      expect(patches()).toEqual([{ ids: ['m1'], mailboxId: 'project-quotes' }])
+      expect(toastTexts()).toEqual(['메일 1통을 프로젝트 › 견적으로 옮겼습니다.'])
+    })
+
+    it('고른 줄을 끌면 고른 것 모두 — 표는 "메일 2통", 휴지통에 놓으면 [삭제]와 같고 고른 것을 푼다', async () => {
+      const { wrapper, store } = await mountScreen()
+      store.toggleCheck('m1')
+      store.toggleCheck('m3')
+      await flushPromises()
+
+      const transfer = startDrag(listRow(wrapper, 'm3'))
+      expect(wrapper.get('[data-mail-drag-chip]').text()).toBe('메일 2통')
+      await dropOn(panelRow(wrapper, '휴지통'), transfer)
+
+      expect(patches()).toEqual([{ ids: ['m1', 'm3'], mailboxId: 'trash' }])
+      expect(toastTexts()).toEqual(['메일 2통을 휴지통으로 옮겼습니다.'])
+      expect(store.checkedCount).toBe(0)
+    })
+
+    it('고르지 않은 줄을 끌면 그 줄만 — 고른 것은 그대로 둔다', async () => {
+      const { wrapper, store } = await mountScreen()
+      store.toggleCheck('m1')
+      await flushPromises()
+
+      await dropOn(panelRow(wrapper, '거래처'), startDrag(listRow(wrapper, 'm2')))
+
+      expect(patches()).toEqual([{ ids: ['m2'], mailboxId: 'clients' }])
+      expect([...store.checkedIds]).toEqual(['m1'])
+    })
+
+    it('스팸메일함에 놓으면 [스팸 신고]와 같다 — 스팸 표시를 함께, [되돌리기]는 표시도 되돌린다', async () => {
+      const { wrapper } = await mountScreen({ view: 'list' })
+
+      await dropOn(panelRow(wrapper, '스팸메일함'), startDrag(listRow(wrapper, 'm2')))
+
+      expect(patches()).toEqual([{ ids: ['m2'], mailboxId: 'junk', isJunk: true }])
+      const [toast] = useToastStore().toasts
+      expect(toast?.message).toBe('메일 1통을 스팸메일함으로 옮겼습니다.')
+      if (toast?.action && 'run' in toast.action) toast.action.run()
+      await flushPromises()
+      expect(patches().at(-1)).toEqual({ ids: ['m2'], mailboxId: 'inbox', isJunk: false })
+    })
+
+    it('스팸메일함에서 꺼내 놓으면 [스팸 아님]과 같다 — 휴지통에 놓으면 표시는 그대로', async () => {
+      const { wrapper } = await mountScreen({ boxId: 'junk', messages: [summary('m1', 'junk'), summary('m2', 'junk')] })
+
+      await dropOn(panelRow(wrapper, '거래처'), startDrag(listRow(wrapper, 'm1')))
+      expect(patches()).toEqual([{ ids: ['m1'], mailboxId: 'clients', isJunk: false }])
+      expect(toastTexts()).toEqual(['메일 1통을 스팸이 아닌 메일로 표시해 거래처로 옮겼습니다.'])
+
+      await dropOn(panelRow(wrapper, '휴지통'), startDrag(listRow(wrapper, 'm2')))
+      expect(patches().at(-1)).toEqual({ ids: ['m2'], mailboxId: 'trash' })
+    })
+
+    it('대화로 묶은 목록의 줄은 그 대화에서 이 메일함에 든 메일 — 표는 "대화 1개", 알림은 "받은편지함에 있는 메일 2통을 …"', async () => {
+      const rows = [
+        conversation('c1', ['m6', 'm5']),
+        conversation('c2', ['m4', 'm3'], { pendingSendIds: ['m3'] }),
+        conversation('c3', ['m2'], { pendingSendIds: ['m2'] }),
+      ]
+      const { wrapper } = await mountScreen({ conversations: rows })
+
+      // 보내기를 기다리는 메일뿐인 줄은 끌 수 없다
+      expect(listRow(wrapper, 'c3').attributes('draggable')).toBe('false')
+      const transfer = startDrag(listRow(wrapper, 'c1'))
+      const chip = wrapper.get('[data-mail-drag-chip]')
+      expect(chip.text()).toBe('대화 1개')
+      expect(chip.attributes('data-kind')).toBe('conversations')
+      await dropOn(panelRow(wrapper, '견적'), transfer)
+
+      expect(patches()).toEqual([{ ids: ['m6', 'm5'], mailboxId: 'quotes' }])
+      expect(toastTexts()).toEqual(['받은편지함에 있는 메일 2통을 거래처 › 견적으로 옮겼습니다.'])
+
+      // 붙잡힌 메일은 빼고 옮긴다 — [이동 ▾]와 같다
+      await dropOn(panelRow(wrapper, '거래처'), startDrag(listRow(wrapper, 'c2')))
+      expect(patches().at(-1)).toEqual({ ids: ['m4'], mailboxId: 'clients' })
+    })
+
+    it('다른 탭 · 바깥에서 끌어 온 같은 종류의 자료는 받지 않는다 (이 탭에서 시작한 끌기만)', async () => {
+      const { wrapper } = await mountScreen()
+
+      const foreign = fakeDataTransfer()
+      foreign.setData(MAIL_DRAG_TYPE, 'other-tab')
+      expect(hover(panelRow(wrapper, '거래처'), foreign)).toBe(false)
+      panelRow(wrapper, '거래처').element.dispatchEvent(dragEvent('drop', foreign))
+      await flushPromises()
+      expect(patches()).toEqual([])
+    })
+  })
+
+  describe('목록 [이동 ▾] — 읽기 화면과 같은 나무 · 같은 규칙', () => {
+    async function openMoveMenu(wrapper: VueWrapper) {
+      await wrapper.get('[data-tool="move"]').trigger('keydown', { key: 'ArrowDown' })
+      await flushPromises()
+      return wrapper.get('[role="menu"]')
+    }
+
+    it('메일함 패널처럼 들여 쓰고 화면 낭독은 위 메일함부터 — 고른 메일이 든 메일함에 하위가 있으면 흐린 줄 "고른 메일이 있는 메일함"', async () => {
+      const { wrapper, store } = await mountScreen({
+        boxId: 'clients',
+        messages: [summary('m1', 'clients'), summary('m2', 'clients')],
+        view: 'list',
+      })
+      store.toggleCheck('m1')
+      await flushPromises()
+
+      const menu = await openMoveMenu(wrapper)
+      const items = menu.findAll('[role="menuitem"]')
+      expect(items.map((item) => item.attributes('aria-label') ?? item.find('.menu__label').text())).toEqual([
+        '받은편지함',
+        '보낸편지함',
+        '스팸메일함',
+        '거래처',
+        '거래처 안의 견적',
+        '프로젝트',
+        '프로젝트 안의 견적',
+      ])
+      const here = items[3]
+      expect(here?.attributes('aria-disabled')).toBe('true')
+      expect(here?.get('.menu__note').text()).toBe('고른 메일이 있는 메일함')
+      expect(menu.findAll('hr')).toHaveLength(1)
+    })
+
+    it('스팸메일함을 고르면 [스팸 신고]와 같다 — 스팸 표시를 함께 · 알림의 메일함 이름은 같은 이름이 있을 때만 위 메일함까지', async () => {
+      const { wrapper, store } = await mountScreen({ view: 'list' })
+      store.toggleCheck('m1')
+      await flushPromises()
+
+      let menu = await openMoveMenu(wrapper)
+      await menu.findAll('[role="menuitem"]').find((item) => item.text() === '스팸메일함')?.trigger('click')
+      await flushPromises()
+      expect(patches()).toEqual([{ ids: ['m1'], mailboxId: 'junk', isJunk: true }])
+      expect(toastTexts()).toEqual(['메일 1통을 스팸메일함으로 옮겼습니다.'])
+
+      store.toggleCheck('m2')
+      await flushPromises()
+      menu = await openMoveMenu(wrapper)
+      await menu
+        .findAll('[role="menuitem"]')
+        .find((item) => item.attributes('aria-label') === '거래처 안의 견적')
+        ?.trigger('click')
+      await flushPromises()
+      expect(patches().at(-1)).toEqual({ ids: ['m2'], mailboxId: 'quotes' })
+      expect(toastTexts().at(-1)).toBe('메일 1통을 거래처 › 견적으로 옮겼습니다.')
+    })
+  })
+})
diff --git a/frontend/src/components/mail/MailSearchBox.vue b/frontend/src/components/mail/MailSearchBox.vue
index 68e0977..90df7ad 100644
--- a/frontend/src/components/mail/MailSearchBox.vue
+++ b/frontend/src/components/mail/MailSearchBox.vue
@@ -8,6 +8,7 @@
 //   패널이 열린 동안 검색 칸의 Enter 는 [찾기]와 같고, 검색 칸의 Esc 는 패널만 닫는다(초점은 검색 칸에 남는다).
 //   검색 칸이 비어도 조건만으로 찾는다. 패널이 닫힌 채 누른 Enter 는 걸려 있는 조건을 그대로 둔다.
 //   패널의 [조건 지우기]는 패널의 칸만 비운다(MailSearchConditions) — 걸린 조건은 [찾기]를 누르거나 결과의 조건 줄 [조건 지우기]로 뺀다
+// - 좁은 폭(15단계 실사용 시험 — 360)에서는 상단 바 안쪽 폭에 맞게 칸이 준다(min-width 0 — 입력 칸의 최소 폭에 묶여 바 밖으로 넘치지 않게)
 import { computed, nextTick, ref, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -152,6 +153,8 @@ watch(
 .mail-search {
   position: relative;
   flex: 1 1 17.5rem;
+  /* 바 안쪽이 280 보다 좁으면(폭 360 — 256) 그만큼 준다. 없으면 입력 칸의 최소 폭에 묶여 바 밖으로 넘치고 화면이 옆으로 밀린다 */
+  min-width: 0;
   max-width: 32.5rem;
   display: flex;
   align-items: center;
diff --git a/frontend/src/components/mail/MailToolButton.vue b/frontend/src/components/mail/MailToolButton.vue
index 9860cdd..c5d9af5 100644
--- a/frontend/src/components/mail/MailToolButton.vue
+++ b/frontend/src/components/mail/MailToolButton.vue
@@ -4,6 +4,11 @@
 // 사용 예: <MailToolButton icon="reply" label="답장" :to="{ name: 'mail-compose', query: { replyTo: id } }" />
 // 누를 수 없는 까닭을 알려야 하면 disabled 대신 unavailable(aria-disabled — 초점은 받고 누르면 아무것도 하지 않는다) + describedby(까닭 글의 id).
 // 하는 중이면 busy(aria-busy — 누르면 아무것도 하지 않는다)
+// 15단계(디자인 원본 Reader15 "2"):
+// - collapsible: 읽기 칸이 좁으면 이름을 숨기고 아이콘만(40×44) 둘 수 있는 단추 — 숨기는 때는 읽기 화면이 정한다(MessageReader 의 컨테이너 쿼리).
+//   이름은 숨겨도 화면 낭독(aria-label)과 마우스를 올리면 뜨는 글(title)로 읽힌다
+// - menu: 메뉴를 여는 단추 — 이름 뒤 ▾ (아이콘만일 때도 ▾ 는 남긴다 — [이동 ▾])
+import { ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -26,6 +31,10 @@ interface Props {
   /** 까닭 · 설명 글의 id — aria-describedby */
   describedby?: string
   iconStrokeWidth?: number
+  /** 좁은 읽기 칸에서 아이콘만 둘 수 있다 (15단계) — 이름은 aria-label · title 로도 */
+  collapsible?: boolean
+  /** 메뉴를 여는 단추 — 이름 뒤 ▾ */
+  menu?: boolean
 }
 
 interface Emits {
@@ -41,33 +50,46 @@ const props = withDefaults(defineProps<Props>(), {
   busy: false,
   describedby: undefined,
   iconStrokeWidth: 1.75,
+  collapsible: false,
+  menu: false,
 })
 
 const emit = defineEmits<Emits>()
 
+const buttonRef = ref<HTMLButtonElement | null>(null)
+
 function onButtonClick(event: MouseEvent) {
   if (props.unavailable || props.busy) return
   emit('click', event)
 }
+
+defineExpose({
+  /** 단추 요소(단추일 때) — 메뉴의 바깥 누름 판정 · 초점 되돌리기에 쓴다 */
+  element: buttonRef,
+})
 </script>
 
 <template>
   <RouterLink
     v-if="to"
     :to="to"
-    :class="['tool-button', `tool-button--${tone}`]"
+    :class="['tool-button', `tool-button--${tone}`, { 'tool-button--collapsible': collapsible }]"
+    :aria-label="collapsible ? label : undefined"
+    :title="collapsible ? label : undefined"
   >
     <AppIcon
       :name="icon"
       :size="15"
       :stroke-width="iconStrokeWidth"
     />
-    <span>{{ label }}</span>
+    <span class="tool-button__label">{{ label }}</span>
   </RouterLink>
   <a
     v-else-if="href"
     :href="href"
-    :class="['tool-button', `tool-button--${tone}`]"
+    :class="['tool-button', `tool-button--${tone}`, { 'tool-button--collapsible': collapsible }]"
+    :aria-label="collapsible ? label : undefined"
+    :title="collapsible ? label : undefined"
     @click="emit('click', $event)"
   >
     <AppIcon
@@ -75,16 +97,23 @@ function onButtonClick(event: MouseEvent) {
       :size="15"
       :stroke-width="iconStrokeWidth"
     />
-    <span>{{ label }}</span>
+    <span class="tool-button__label">{{ label }}</span>
   </a>
   <button
     v-else
+    ref="buttonRef"
     type="button"
-    :class="['tool-button', `tool-button--${tone}`]"
+    :class="[
+      'tool-button',
+      `tool-button--${tone}`,
+      { 'tool-button--collapsible': collapsible, 'tool-button--menu': menu },
+    ]"
     :disabled="disabled"
     :aria-disabled="unavailable ? 'true' : undefined"
     :aria-busy="busy ? 'true' : undefined"
     :aria-describedby="describedby"
+    :aria-label="collapsible ? label : undefined"
+    :title="collapsible ? label : undefined"
     @click="onButtonClick"
   >
     <AppIcon
@@ -92,7 +121,14 @@ function onButtonClick(event: MouseEvent) {
       :size="15"
       :stroke-width="iconStrokeWidth"
     />
-    <span>{{ label }}</span>
+    <span class="tool-button__label">{{ label }}</span>
+    <AppIcon
+      v-if="menu"
+      name="chevron-down"
+      :size="12"
+      :stroke-width="2"
+      class="tool-button__chevron"
+    />
   </button>
 </template>
 
@@ -125,6 +161,13 @@ function onButtonClick(event: MouseEvent) {
   cursor: progress;
 }
 
+/* 메뉴를 여는 단추 — ▾ 쪽 안쪽을 줄인다 (디자인 원본 Reader15 [이동 ▾] — 왼쪽 10 · 오른쪽 8) */
+.tool-button--menu {
+  justify-content: center;
+  min-width: var(--size-icon-button);
+  padding-right: var(--space-8);
+}
+
 .tool-button--accent {
   color: var(--color-brand-strong);
   font-weight: 600;
diff --git a/frontend/src/components/mail/MailboxDeleteDialog.vue b/frontend/src/components/mail/MailboxDeleteDialog.vue
index d738082..3f782c3 100644
--- a/frontend/src/components/mail/MailboxDeleteDialog.vue
+++ b/frontend/src/components/mail/MailboxDeleteDialog.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-// 메일함 지우기 확인 (디자인 원본 MailboxManage, 공용 모양 ModalDialog — role=alertdialog)
-// - 하위 메일함이 있으면 지울 수 없다: "‘프로젝트’ 메일함을 지울 수 없습니다" · "하위 메일함이 있습니다. 하위 메일함을 먼저 지워 주세요." · [확인]
-// - 아니면: "‘거래처’ 메일함을 지울까요?" · "안의 메일 12통은 휴지통으로 옮깁니다. 지운 메일함은 되돌릴 수 없습니다."
+// 메일함 지우기 확인 (디자인 원본 MailboxManage · Mailbox15, 공용 모양 ModalDialog — role=alertdialog)
+// - "‘거래처’ 메일함을 지울까요?" · "안의 메일 12통은 휴지통으로 옮깁니다. 지운 메일함은 되돌릴 수 없습니다."
 //   (빈 메일함은 "빈 메일함입니다. …") · [지우기](빨강 채움) [취소] — 열리면 「취소」에 초점 (실수로 Enter 를 눌러도 지워지지 않게)
+// - 하위 메일함이 있으면 하위까지 지울지 묻는다 (15단계 — 지금까지의 "지울 수 없습니다" 창을 대신한다):
+//   "‘거래처’ 메일함과 하위 메일함 2개를 지울까요?" · "하위 메일함에 든 메일까지 모두 40통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 …"
+//   (메일이 하나도 없으면 "하위 메일함까지 모두 비어 있습니다. …"). 하위 메일함 수 · 메일 수는 모든 깊이를 센다(부르는 쪽 — MailboxDialogs)
 // - 휴지통을 비우는 동안은 [지우기]를 누를 수 없다 (blocked — 비우기가 옮겨 간 메일까지 영구 삭제하지 않게)
 // 고정 id — #mailbox-delete-dialog · #mailbox-delete-title · #mailbox-delete-message · #mailbox-delete-confirm · #mailbox-delete-cancel
 import { computed } from 'vue'
@@ -14,10 +16,10 @@ import { formatCount } from '@/shared/utils/format'
 interface Props {
   open: boolean
   mailboxName: string
-  /** 안의 메일 수 */
+  /** 휴지통으로 옮길 메일 수 — 하위 메일함이 있으면 하위까지 더한 수 */
   messageCount: number
-  /** 하위 메일함이 있다 — 지울 수 없다고 알린다 */
-  hasChildren: boolean
+  /** 모든 깊이의 하위 메일함 수 — 있으면 하위까지 지울지 묻는다 (15단계) */
+  childCount?: number
   /** 지금은 시작할 수 없다 (휴지통을 비우는 중) — [지우기]를 끈다 */
   blocked?: boolean
 }
@@ -28,15 +30,22 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  childCount: 0,
   blocked: false,
 })
 const emit = defineEmits<Emits>()
 
 const title = computed(() =>
-  props.hasChildren ? MAILBOX_DIALOG_TEXT.blockedTitle(props.mailboxName) : MAILBOX_DIALOG_TEXT.deleteTitle(props.mailboxName),
+  props.childCount > 0
+    ? MAILBOX_DIALOG_TEXT.deleteTreeTitle(props.mailboxName, formatCount(props.childCount))
+    : MAILBOX_DIALOG_TEXT.deleteTitle(props.mailboxName),
 )
 const message = computed(() => {
-  if (props.hasChildren) return MAILBOX_DIALOG_TEXT.blockedMessage
+  if (props.childCount > 0) {
+    return props.messageCount > 0
+      ? MAILBOX_DIALOG_TEXT.deleteTreeMessage(formatCount(props.messageCount))
+      : MAILBOX_DIALOG_TEXT.deleteTreeEmptyMessage
+  }
   return props.messageCount > 0
     ? MAILBOX_DIALOG_TEXT.deleteMessage(formatCount(props.messageCount))
     : MAILBOX_DIALOG_TEXT.deleteEmptyMessage
@@ -56,35 +65,23 @@ const message = computed(() => {
   >
     <template #actions>
       <button
-        v-if="hasChildren"
+        id="mailbox-delete-confirm"
+        type="button"
+        class="modal-dialog__action modal-dialog__action--danger"
+        :disabled="blocked"
+        @click="emit('confirm')"
+      >
+        {{ MAILBOX_DIALOG_TEXT.deleteConfirm }}
+      </button>
+      <button
         id="mailbox-delete-cancel"
         type="button"
-        class="modal-dialog__action"
+        class="modal-dialog__action modal-dialog__action--secondary"
         autofocus
         @click="emit('cancel')"
       >
-        {{ MAILBOX_DIALOG_TEXT.blockedConfirm }}
+        {{ MAILBOX_DIALOG_TEXT.cancel }}
       </button>
-      <template v-else>
-        <button
-          id="mailbox-delete-confirm"
-          type="button"
-          class="modal-dialog__action modal-dialog__action--danger"
-          :disabled="blocked"
-          @click="emit('confirm')"
-        >
-          {{ MAILBOX_DIALOG_TEXT.deleteConfirm }}
-        </button>
-        <button
-          id="mailbox-delete-cancel"
-          type="button"
-          class="modal-dialog__action modal-dialog__action--secondary"
-          autofocus
-          @click="emit('cancel')"
-        >
-          {{ MAILBOX_DIALOG_TEXT.cancel }}
-        </button>
-      </template>
     </template>
   </ModalDialog>
 </template>
diff --git a/frontend/src/components/mail/MailboxDialogs.vue b/frontend/src/components/mail/MailboxDialogs.vue
index 8ad4680..f843da1 100644
--- a/frontend/src/components/mail/MailboxDialogs.vue
+++ b/frontend/src/components/mail/MailboxDialogs.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
-// 메일함 패널의 대화상자 — ⋯ 메뉴 · [+ 새 메일함]이 연다 (디자인 원본 MailboxManage · useMailboxActions)
+// 메일함 패널의 대화상자 — ⋯ 메뉴 · [+ 새 메일함]이 연다 (디자인 원본 MailboxManage · Mailbox15 · useMailboxActions)
 // - 새 메일함 · 하위 메일함 · 이름 바꾸기: 이름 대화상자. 같은 이름(MAIL_009) · 형식(VAL_001)은 칸 아래에 보이고 대화상자를 둔다.
 //   메일함이 그사이 사라졌으면(RES_001 — 알림은 인터셉터) 닫고 메일함 목록을 다시 맞춘다. 그 밖의 실패는 알림을 보고 다시 누를 수 있게 둔다.
 //   이름을 바꾸지 않았으면 보내지 않고 닫는다. 기다리는 사이 화면이 사라졌으면 칸 아래에 보일 실패를 알림으로 알린다 (notifyApiError)
-// - 지우기: 하위 메일함이 있으면 지울 수 없다고 알린다. 확인하면 닫고 지우기를 시작한다 (진행은 알림으로)
+// - 옮기기(15단계): 옮길 곳 창. 같은 이름(MAIL_009 — 그사이 다른 창에서 만듦)은 목록 아래에 보이고 창을 둔다. 메일함 · 옮길 곳이 사라졌으면(RES_001) ·
+//   옮길 수 없는 자리였으면(VAL_001 — 그사이 나무가 바뀜) 알림(인터셉터)을 보고 목록을 다시 맞춘다 — RES_001 은 창을 닫는다. 지금 있는 곳은 고를 수 없다
+// - 지우기: 하위 메일함이 있으면 하위까지 지울지 묻는다(15단계 — 하위 메일함 수 · 메일 수는 모든 깊이). 확인하면 닫고 지우기를 시작한다 (진행은 알림으로)
 // - 비우기: 확인하면 닫고 비우기를 시작한다
 // - 휴지통 비우기 · 메일함 지우기는 서로 도는 동안 시작할 수 없다 — 확인 단추를 끄고, 누르는 순간에도 다시 본다 (useMailboxActions 의 isBlocked)
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
 import MailboxDeleteDialog from '@/components/mail/MailboxDeleteDialog.vue'
 import MailboxEmptyDialog from '@/components/mail/MailboxEmptyDialog.vue'
+import MailboxMoveDialog from '@/components/mail/MailboxMoveDialog.vue'
 import MailboxNameDialog from '@/components/mail/MailboxNameDialog.vue'
 import type { MailboxDialogRequest } from '@/components/mail/mailbox-dialog'
 import { notifyApiError } from '@/composables/useApi'
-import { useMailboxActions } from '@/composables/useMailboxActions'
+import { useMailboxActions, type MailboxNameResult } from '@/composables/useMailboxActions'
 import type { Mailbox } from '@/shared/types/mail'
-import { hasChildMailbox } from '@/shared/utils/mailbox'
+import { descendantMailboxes, hasChildMailbox, mailboxMoveTargets } from '@/shared/utils/mailbox'
 import { useMailStore } from '@/stores/mail.store'
 
 interface Props {
@@ -34,6 +37,8 @@ const actions = useMailboxActions()
 
 const pending = ref<boolean>(false)
 const nameError = ref<string | null>(null)
+/** 옮기기 창 목록 아래의 거절 (MAIL_009) */
+const moveError = ref<string | null>(null)
 /** 화면(메일 모듈)이 사라졌다 — 칸 아래에 보일 곳이 없다 */
 let unmounted = false
 
@@ -49,6 +54,16 @@ const target = computed<Mailbox | null>(() => {
 })
 const parentName = computed(() => (props.request?.kind === 'create' ? (props.request.parent?.name ?? null) : null))
 const hasChildren = computed(() => (target.value ? hasChildMailbox(mailStore.mailboxes, target.value.id) : false))
+/** 모든 깊이의 하위 메일함 — 지우기 확인 창의 "하위 메일함 2개" · 메일 수 (15단계) */
+const descendants = computed(() => (target.value ? descendantMailboxes(mailStore.mailboxes, target.value.id) : []))
+/** 지우면 휴지통으로 갈 메일 수 — 하위 메일함까지 더한다 */
+const treeMessageCount = computed(() =>
+  [target.value, ...descendants.value].reduce((sum, mailbox) => sum + Math.max(0, mailbox?.totalCount ?? 0), 0),
+)
+/** 옮길 곳 — 옮기기 창이 열려 있을 때만 */
+const moveTargets = computed(() =>
+  props.request?.kind === 'move' && target.value ? mailboxMoveTargets(mailStore.mailboxes, target.value) : [],
+)
 /** 지금은 시작할 수 없다 — 휴지통 비우기 ↔ 메일함 지우기 */
 const deleteBlocked = computed(() => (target.value ? actions.isBlocked('delete', target.value) : false))
 const emptyBlocked = computed(() => (target.value ? actions.isBlocked('empty', target.value) : false))
@@ -56,9 +71,44 @@ const emptyBlocked = computed(() => (target.value ? actions.isBlocked('empty', t
 function close() {
   pending.value = false
   nameError.value = null
+  moveError.value = null
   emit('close')
 }
 
+/**
+ * 이름 · 옮기기 창의 결과를 받는다 — 칸 안에 보일 실패(inline)는 보여 주고 창을 둔다, 그사이 사라졌으면(RES_001) 닫고 목록을 다시 맞춘다.
+ * 기다리는 사이 화면이 사라졌으면 칸 안에 보일 실패를 알림으로, 다른 창으로 바뀌었으면 건드리지 않는다
+ */
+function settleResult(
+  request: MailboxDialogRequest,
+  result: MailboxNameResult | null,
+  showInline: (message: string) => void,
+) {
+  if (unmounted) {
+    // 칸 아래에 보일 곳이 사라졌다 — 끈 알림을 띄운다 (성공 알림은 이미 떴다)
+    if (result?.status === 'failed' && result.inline) notifyApiError(result.error)
+    return
+  }
+  // 기다리는 사이 닫았거나 다른 대화상자를 열었으면 그 대화상자를 건드리지 않는다 (결과 알림은 이미 떴다)
+  if (props.request !== request) return
+  pending.value = false
+  if (!result || result.status !== 'failed') {
+    close()
+    return
+  }
+  if (result.inline) {
+    showInline(result.error.message)
+    return
+  }
+  if (result.error.code === 'RES_001') {
+    void mailStore.loadMailboxes({ background: true })
+    close()
+    return
+  }
+  // 옮길 수 없는 자리(VAL_001 — 그사이 나무가 바뀜)는 알림을 본 뒤 바뀐 나무로 다시 고를 수 있게 목록만 다시 맞춘다
+  if (request.kind === 'move' && result.error.code === 'VAL_001') void mailStore.loadMailboxes({ background: true })
+}
+
 async function onSubmitName(name: string) {
   const request = props.request
   if (!request || pending.value) return
@@ -73,34 +123,31 @@ async function onSubmitName(name: string) {
       : request.kind === 'create'
         ? await actions.create(name, request.parent?.id ?? null)
         : null
-  if (unmounted) {
-    // 칸 아래에 보일 곳이 사라졌다 — 끈 알림을 띄운다 (성공 알림은 이미 떴다)
-    if (result?.status === 'failed' && result.inline) notifyApiError(result.error)
-    return
-  }
-  // 기다리는 사이 닫았거나 다른 대화상자를 열었으면 그 대화상자를 건드리지 않는다 (결과 알림은 이미 떴다)
-  if (props.request !== request) return
-  pending.value = false
-  if (!result || result.status !== 'failed') {
-    close()
-    return
-  }
-  if (result.inline) {
-    nameError.value = result.error.message
-    return
-  }
-  if (result.error.code === 'RES_001') {
-    void mailStore.loadMailboxes({ background: true })
-    close()
-  }
+  settleResult(request, result, (message) => {
+    nameError.value = message
+  })
+}
+
+async function onSubmitMove(parentId: string | null) {
+  const request = props.request
+  const mailbox = target.value
+  if (!request || request.kind !== 'move' || !mailbox || pending.value) return
+  pending.value = true
+  moveError.value = null
+  const result = await actions.move(mailbox, parentId)
+  settleResult(request, result, (message) => {
+    moveError.value = message
+  })
 }
 
 function onConfirmDelete() {
   const mailbox = target.value
   // 누르는 순간 다시 본다 — 그사이 휴지통 비우기가 시작됐으면 대화상자를 그대로 둔다
   if (!mailbox || deleteBlocked.value) return
+  // 하위 메일함이 있으면 확인 창이 하위까지 지운다고 물었다 — 그때만 하위까지 지운다 (15단계)
+  const withChildren = hasChildren.value
   close()
-  void actions.remove(mailbox)
+  void actions.remove(mailbox, { withChildren })
 }
 
 function onConfirmEmpty() {
@@ -115,6 +162,7 @@ watch(
   () => props.request,
   () => {
     nameError.value = null
+    moveError.value = null
   },
 )
 
@@ -135,11 +183,22 @@ onBeforeUnmount(() => {
     @cancel="close"
     @clear-error="nameError = null"
   />
+  <MailboxMoveDialog
+    :open="request?.kind === 'move'"
+    :mailbox-name="target?.name ?? ''"
+    :has-children="hasChildren"
+    :targets="moveTargets"
+    :pending="pending"
+    :error="moveError"
+    @submit="onSubmitMove"
+    @cancel="close"
+    @clear-error="moveError = null"
+  />
   <MailboxDeleteDialog
     :open="request?.kind === 'delete'"
     :mailbox-name="target?.name ?? ''"
-    :message-count="target?.totalCount ?? 0"
-    :has-children="hasChildren"
+    :message-count="treeMessageCount"
+    :child-count="descendants.length"
     :blocked="deleteBlocked"
     @confirm="onConfirmDelete"
     @cancel="close"
diff --git a/frontend/src/components/mail/MailboxMoveDialog.vue b/frontend/src/components/mail/MailboxMoveDialog.vue
new file mode 100644
index 0000000..ef18c06
--- /dev/null
+++ b/frontend/src/components/mail/MailboxMoveDialog.vue
@@ -0,0 +1,371 @@
+<script setup lang="ts">
+// 메일함 옮기기 창 (15단계 — 디자인 원본 Mailbox15 "옮기기 창" · "그사이 같은 이름이 생겼을 때", 공용 모양 ModalDialog — 폭 400 medium)
+// 제목 "‘2025’ 메일함을 어디로 옮길까요?" · 글 "하위 메일함과 안의 메일도 함께 옮깁니다."(하위가 없으면 "안의 메일도 함께 옮깁니다.") →
+// 옮길 곳 목록(테두리 칸 · 줄 40 · 메일함 패널과 같은 차례 · 들여쓰기 10 · 28 · 44 · 56): 맨 위 · 받은편지함(과 그 아래) · "내 메일함" 묶음 → [옮기기] [취소]
+// - 처음에는 아무 곳도 고르지 않은 채 열리고, 고르기 전에는 [옮기기]를 누를 수 없다. 고른 줄은 청록 바탕 · 굵은 글자 · 오른쪽 체크
+// - 고를 수 없는 줄은 이름 · 아이콘만 흐리게(까닭 글은 그대로): 옮기는 메일함과 그 하위(까닭 없음) · 지금 있는 곳 · 같은 이름의 메일함이 있는 곳
+//   (대소문자 무시 — 서버에 묻기 전에 화면이 하는 검사). 맨 위 줄은 평소 "다른 메일함 안에 두지 않습니다"
+// - 줄은 radiogroup 의 radio — 화살표 · Home · End 로 줄을 옮기면(꺼진 줄에도 초점은 간다 — 까닭을 읽게) 고를 수 있는 줄은 바로 고른다.
+//   Enter 는 [옮기기], Esc 는 [취소]와 같다. 들여 쓴 줄의 이름은 위 메일함부터 읽는다("거래처 안의 2025")
+// - 그사이 같은 이름이 생겨 서버가 거절하면(MAIL_009) 목록 아래 빨간 사전 문구 — 알림 없이 창을 둔다. 다른 곳을 고르면 지운다(clear-error)
+// - 옮기는 동안(pending)은 [옮기기]를 aria-disabled 로 막는다 — 누른 단추가 초점을 잃지 않게
+// 고정 id — #mailbox-move-dialog · #mailbox-move-title · #mailbox-move-message · #mailbox-move-error · #mailbox-move-confirm · #mailbox-move-cancel
+import { computed, nextTick, ref, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import type { IconName } from '@/shared/constants/icons'
+import { MAILBOX_MOVE_TEXT, MAILBOX_PANEL_TEXT } from '@/shared/constants/mailbox-manage'
+import { mailboxIcon, mailboxSpokenName, type MailboxMoveTarget } from '@/shared/utils/mailbox'
+
+interface Props {
+  open: boolean
+  /** 옮기는 메일함의 이름 */
+  mailboxName: string
+  /** 하위 메일함이 있다 — 제목 아래 글이 바뀐다 */
+  hasChildren: boolean
+  /** 옮길 곳 (mailbox.ts 의 mailboxMoveTargets) */
+  targets: readonly MailboxMoveTarget[]
+  /** 옮기는 중 — [옮기기]를 다시 누를 수 없다 */
+  pending?: boolean
+  /** 서버가 거절한 까닭(사전 문구 — MAIL_009). 다른 곳을 고르면 부모가 지운다(clear-error) */
+  error?: string | null
+}
+
+interface Emits {
+  /** parentId — 새 상위, 맨 위면 null */
+  (e: 'submit', parentId: string | null): void
+  (e: 'cancel'): void
+  (e: 'clear-error'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pending: false,
+  error: null,
+})
+const emit = defineEmits<Emits>()
+
+/** 들여쓰기는 3단계까지 (메일함 패널과 같다) */
+const MAX_INDENT_DEPTH = 3
+/** 맨 위 줄의 열쇠 — 메일함 id 는 비지 않는다 */
+const TOP_KEY = ''
+const ERROR_ID = 'mailbox-move-error'
+
+interface MoveRow {
+  key: string
+  parentId: string | null
+  icon: IconName
+  name: string
+  /** 화면 낭독 이름 — 들여 쓴 줄은 위 메일함부터 */
+  spokenName: string
+  depth: number
+  /** 이름 오른쪽 작은 글 — 고를 수 없는 까닭 · 맨 위 줄의 설명 */
+  note: string | null
+  pickable: boolean
+  /** 이 줄 앞에 "내 메일함" 묶음 이름을 둔다 */
+  headingBefore: boolean
+}
+
+/** 고를 수 없는 까닭의 글 — 옮기는 메일함 자신 · 하위는 글이 없다 */
+const BLOCK_NOTES = {
+  self: null,
+  current: MAILBOX_MOVE_TEXT.current,
+  sameName: MAILBOX_MOVE_TEXT.sameName,
+} as const
+
+const listRef = ref<HTMLElement | null>(null)
+/** 고른 줄 — 처음에는 없다 */
+const chosenKey = ref<string | null>(null)
+/** 탭으로 들어올 줄 (로빙 tabindex) — 고른 줄, 없으면 첫 고를 수 있는 줄 */
+const focusKey = ref<string>(TOP_KEY)
+
+const message = computed(() => (props.hasChildren ? MAILBOX_MOVE_TEXT.messageWithChildren : MAILBOX_MOVE_TEXT.message))
+const rows = computed<MoveRow[]>(() => {
+  let headingShown = false
+  return props.targets.map((target) => {
+    const entry = target.entry
+    const headingBefore = target.group === 'mine' && !headingShown
+    if (headingBefore) headingShown = true
+    const note = target.block ? BLOCK_NOTES[target.block] : entry ? null : MAILBOX_MOVE_TEXT.topNote
+    return {
+      key: target.parentId ?? TOP_KEY,
+      parentId: target.parentId,
+      icon: entry ? mailboxIcon(entry.mailbox) : 'arrow-up',
+      name: entry ? entry.mailbox.name : MAILBOX_MOVE_TEXT.top,
+      spokenName: entry ? mailboxSpokenName(entry) : MAILBOX_MOVE_TEXT.top,
+      depth: entry ? Math.min(entry.depth, MAX_INDENT_DEPTH) : 0,
+      note,
+      pickable: target.block === null,
+      headingBefore,
+    }
+  })
+})
+/** 고른 줄 — 목록이 바뀌어(다시 받음) 고를 수 없게 됐으면 고르지 않은 것으로 본다 */
+const chosen = computed<MoveRow | null>(() => rows.value.find((row) => row.key === chosenKey.value && row.pickable) ?? null)
+
+/** 줄마다 겹치지 않는 이름 — 맨 위 줄과 메일함 줄을 가른다 (메일함 id 가 "top" 이어도 겹치지 않게) */
+function rowName(row: MoveRow): string {
+  return row.parentId === null ? 'top' : `m-${row.key}`
+}
+
+function noteId(row: MoveRow): string | undefined {
+  return row.note ? `mailbox-move-note-${rowName(row)}` : undefined
+}
+
+function rowElement(key: string): HTMLElement | null {
+  const list = listRef.value
+  if (!list) return null
+  return [...list.querySelectorAll<HTMLElement>('[data-move-row]')].find((element) => element.dataset.moveRow === key) ?? null
+}
+
+function choose(row: MoveRow) {
+  focusKey.value = row.key
+  if (!row.pickable || props.pending) return
+  if (chosenKey.value !== row.key && props.error) emit('clear-error')
+  chosenKey.value = row.key
+}
+
+/** 화살표 · Home · End — 줄을 옮기고 고를 수 있으면 고른다 (꺼진 줄에도 초점은 간다) */
+function moveFocus(target: MoveRow | undefined) {
+  if (!target) return
+  choose(target)
+  void nextTick(() => rowElement(target.key)?.focus())
+}
+
+function onListKeydown(event: KeyboardEvent) {
+  const list = rows.value
+  const index = list.findIndex((row) => row.key === focusKey.value)
+  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+    event.preventDefault()
+    moveFocus(list[(index + 1) % list.length])
+  } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+    event.preventDefault()
+    moveFocus(list[(index - 1 + list.length) % list.length])
+  } else if (event.key === 'Home') {
+    event.preventDefault()
+    moveFocus(list[0])
+  } else if (event.key === 'End') {
+    event.preventDefault()
+    moveFocus(list[list.length - 1])
+  } else if (event.key === 'Enter') {
+    // Enter 는 [옮기기]와 같다 (줄 단추의 눌림으로 넘기지 않는다)
+    event.preventDefault()
+    submit()
+  }
+}
+
+function submit() {
+  const row = chosen.value
+  if (!row || props.pending) return
+  emit('submit', row.parentId)
+}
+
+/** 처음 초점 — 고를 수 있는 첫 줄 (없으면 첫 줄) */
+function initialFocusKey(): string {
+  return (rows.value.find((row) => row.pickable) ?? rows.value[0])?.key ?? TOP_KEY
+}
+
+// 열 때마다 아무것도 고르지 않은 채로
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return
+    chosenKey.value = null
+    focusKey.value = initialFocusKey()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <ModalDialog
+    id="mailbox-move-dialog"
+    :open="open"
+    :title="MAILBOX_MOVE_TEXT.title(mailboxName)"
+    :message="message"
+    title-id="mailbox-move-title"
+    message-id="mailbox-move-message"
+    medium
+    @cancel="emit('cancel')"
+  >
+    <div
+      ref="listRef"
+      role="radiogroup"
+      class="mailbox-move__list"
+      :aria-label="MAILBOX_MOVE_TEXT.listLabel"
+      :aria-describedby="error ? ERROR_ID : undefined"
+      @keydown="onListKeydown"
+    >
+      <template
+        v-for="row in rows"
+        :key="rowName(row)"
+      >
+        <p
+          v-if="row.headingBefore"
+          class="mailbox-move__heading"
+        >
+          {{ MAILBOX_PANEL_TEXT.myMailboxes }}
+        </p>
+        <button
+          type="button"
+          role="radio"
+          :class="['mailbox-move__row', `mailbox-move__row--depth-${row.depth}`]"
+          :aria-checked="chosen?.key === row.key ? 'true' : 'false'"
+          :aria-disabled="row.pickable ? undefined : 'true'"
+          :aria-label="row.spokenName"
+          :aria-describedby="noteId(row)"
+          :tabindex="row.key === focusKey ? 0 : -1"
+          :autofocus="row.key === focusKey"
+          :data-move-row="row.key"
+          @click="choose(row)"
+        >
+          <AppIcon
+            :name="row.icon"
+            class="mailbox-move__icon"
+          />
+          <span class="mailbox-move__name">{{ row.name }}</span>
+          <span
+            v-if="row.note"
+            :id="noteId(row)"
+            class="mailbox-move__note"
+          >{{ row.note }}</span>
+          <AppIcon
+            v-if="chosen?.key === row.key"
+            name="check"
+            :stroke-width="2"
+            class="mailbox-move__check"
+          />
+        </button>
+      </template>
+    </div>
+    <p
+      v-if="error"
+      :id="ERROR_ID"
+      class="form-message form-message--error"
+      role="alert"
+    >
+      <AppIcon
+        name="alert-circle"
+        :size="14"
+        :stroke-width="2"
+      />
+      <span>{{ error }}</span>
+    </p>
+    <template #actions>
+      <button
+        id="mailbox-move-confirm"
+        type="button"
+        class="modal-dialog__action"
+        :disabled="!chosen"
+        :aria-disabled="pending ? 'true' : undefined"
+        :aria-busy="pending"
+        @click="submit"
+      >
+        {{ MAILBOX_MOVE_TEXT.confirm }}
+      </button>
+      <button
+        id="mailbox-move-cancel"
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        @click="emit('cancel')"
+      >
+        {{ MAILBOX_MOVE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+/* 옮길 곳 목록 — 테두리 칸 · 안쪽 4 · 줄 사이 1 (디자인 원본 Mailbox15). 메일함이 많으면 칸 안에서 스크롤한다 */
+.mailbox-move__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  max-height: min(20rem, 50vh);
+  overflow-y: auto;
+  margin-top: var(--space-4);
+  padding: var(--space-4);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+/* "내 메일함" 묶음 이름 — 패널과 같은 12 굵게 회색 */
+.mailbox-move__heading {
+  margin: var(--space-8) var(--space-10) var(--space-2);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+/* 줄 40 — 메일함 패널의 줄과 같은 높이 · 들여쓰기 */
+.mailbox-move__row {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  width: 100%;
+  min-height: var(--size-row-min);
+  padding: 0 var(--space-10);
+  border: 0;
+  border-radius: var(--radius-item);
+  background: transparent;
+  color: var(--color-text-strong);
+  font: inherit;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mailbox-move__row--depth-1 {
+  padding-left: var(--space-28);
+}
+
+.mailbox-move__row--depth-2 {
+  padding-left: var(--space-44);
+}
+
+.mailbox-move__row--depth-3 {
+  padding-left: var(--space-56);
+}
+
+.mailbox-move__row:hover:not([aria-disabled='true']):not([aria-checked='true']) {
+  background: var(--color-surface-muted);
+}
+
+/* 고른 줄 — 패널의 지금 메일함처럼 청록 바탕 · 굵은 글자 */
+.mailbox-move__row[aria-checked='true'] {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand-strong);
+  font-weight: 600;
+}
+
+/* 고를 수 없는 줄 — 이름 · 아이콘만 흐리게 (까닭 글은 그대로) */
+.mailbox-move__row[aria-disabled='true'] {
+  cursor: default;
+}
+
+.mailbox-move__row[aria-disabled='true'] .mailbox-move__icon,
+.mailbox-move__row[aria-disabled='true'] .mailbox-move__name {
+  opacity: 0.5;
+}
+
+.mailbox-move__icon,
+.mailbox-move__check {
+  flex: 0 0 auto;
+}
+
+.mailbox-move__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mailbox-move__note {
+  flex: 0 0 auto;
+  font-size: var(--font-size-small);
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/mail/MailboxPanel.move.spec.ts b/frontend/src/components/mail/MailboxPanel.move.spec.ts
new file mode 100644
index 0000000..f46d02e
--- /dev/null
+++ b/frontend/src/components/mail/MailboxPanel.move.spec.ts
@@ -0,0 +1,437 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { Mailbox } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore } from '@/stores/toast.store'
+import {
+  fail,
+  flushPromises,
+  installMockApi,
+  ok,
+  restoreApiAdapter,
+  type MockRequest,
+  type MockResult,
+} from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import MailboxPanel from './MailboxPanel.vue'
+
+// 메일함 패널 — 15단계 메일함 옮기기 · 하위 메일함까지 지우기 (디자인 원본 Mailbox15 · 계약 2절 "메일함 관리")
+
+function box(id: string, role: Mailbox['role'], name: string, partial: Partial<Mailbox> = {}): Mailbox {
+  return { id, name, role, parentId: null, sortOrder: 0, totalCount: 0, unreadCount: 0, ...partial }
+}
+
+/** 보드의 예 — 거래처 안에 2025(그 안에 정산), 보관 안에도 2025, 프로젝트 안에 견적 */
+const MAILBOXES: Mailbox[] = [
+  box('inbox', 'inbox', '받은편지함', { unreadCount: 3, totalCount: 148 }),
+  box('sent', 'sent', '보낸편지함', { totalCount: 64 }),
+  box('drafts', 'drafts', '임시보관함', { totalCount: 2 }),
+  box('junk', 'junk', '스팸메일함', { totalCount: 5 }),
+  box('trash', 'trash', '휴지통', { totalCount: 21 }),
+  box('c', null, '거래처', { totalCount: 1 }),
+  box('c25', null, '2025', { parentId: 'c', totalCount: 4 }),
+  box('c25s', null, '정산', { parentId: 'c25', totalCount: 35 }),
+  box('b', null, '보관'),
+  box('b25', null, '2025', { parentId: 'b' }),
+  box('p', null, '프로젝트', { totalCount: 2 }),
+  box('pq', null, '견적', { parentId: 'p' }),
+]
+
+interface Deferred {
+  promise: Promise<MockResult>
+  resolve: (result: MockResult) => void
+}
+
+function deferred(): Deferred {
+  let resolve: (result: MockResult) => void = () => undefined
+  const promise = new Promise<MockResult>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+type Reply = MockResult | Deferred
+
+describe('MailboxPanel — 메일함 옮기기 · 하위까지 지우기 (15단계)', () => {
+  let pinia: Pinia
+  let requests: MockRequest[]
+  let replies: Map<string, Reply[]>
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated({ email: 'ara.kim@arasystem.it.kr', name: '김아라' })
+    replies = new Map()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  function reply(key: string, ...results: Reply[]) {
+    replies.set(key, results)
+  }
+
+  async function mountPanel(mailboxes: Mailbox[] = MAILBOXES, viewing = 'inbox') {
+    requests = installMockApi((request) => {
+      const queue = replies.get(`${request.method} ${request.url}`)
+      if (queue && queue.length > 0) {
+        const next = queue.length > 1 ? queue.shift() : queue[0]
+        if (next) return typeof next === 'object' && 'promise' in next ? next.promise : next
+      }
+      if (request.url === '/mailboxes') {
+        return ok({ items: [...useMailStore().mailboxes], pageInfo: { hasNext: false, nextCursor: null, total: 12 } })
+      }
+      if (request.url === '/messages') return ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } })
+      return ok(null)
+    })
+    const store = useMailStore()
+    store.mailboxes = mailboxes.map((mailbox) => ({ ...mailbox }))
+    store.mailboxesStatus = 'ready'
+    const router = createTestRouter()
+    await router.push(`/mail/${viewing}`)
+    await router.isReady()
+    store.currentMailboxId = viewing
+    const wrapper = mount(MailboxPanel, { attachTo: document.body, global: { plugins: [pinia, router] } })
+    await flushPromises()
+    return { wrapper, router, store }
+  }
+
+  /** 패널의 줄 — 같은 이름이 둘이면 몇 번째인지 */
+  const row = (wrapper: VueWrapper, name: string, nth = 0) => {
+    const found = wrapper.findAll('.mailbox-row').filter((item) => item.get('.mailbox-row__name').text() === name)[nth]
+    if (!found) throw new Error(`${name} 줄이 없다`)
+    return found
+  }
+
+  async function choose(wrapper: VueWrapper, name: string, label: string, nth = 0) {
+    await row(wrapper, name, nth).get('[data-mailbox-more]').trigger('click')
+    await flushPromises()
+    const item = wrapper.findAll('[role="menu"] [role^="menuitem"]').find((candidate) => candidate.text() === label)
+    if (!item) throw new Error(`${name} 메뉴에 ${label} 이 없다`)
+    await item.trigger('click')
+    await flushPromises()
+  }
+
+  const dialogOpen = (id: string) => document.getElementById(id)?.hasAttribute('open') ?? false
+  const toastTexts = () => useToastStore().toasts.map((toast) => toast.message)
+  const sent = (method: string, url: string) => requests.filter((request) => request.method === method && request.url === url)
+  const moveRows = (wrapper: VueWrapper) => wrapper.findAll('[data-move-row]')
+  const moveRow = (wrapper: VueWrapper, key: string) => wrapper.get(`[data-move-row="${key}"]`)
+  const panelNames = (wrapper: VueWrapper) =>
+    wrapper.findAll('.mailbox-tree__list')[1]?.findAll('.mailbox-row__name').map((name) => name.text())
+
+  /** 알림의 단추를 누른다 — 알림을 닫고 그 단추의 일을 한다 (ToastHost 와 같은 길 — takeAction) */
+  function runToastAction(index = 0) {
+    const toast = useToastStore().toasts[index]
+    const action = toast ? useToastStore().takeAction(toast.id) : null
+    if (!action || !('run' in action)) throw new Error('단추가 없다')
+    action.run()
+  }
+
+  describe('옮기기', () => {
+    it('⋯ 「옮기기」 → 창 — 맨 위 · 받은편지함 · 내 메일함 차례, 고를 수 없는 줄은 흐리게 · 까닭, 처음에는 아무것도 고르지 않고 [옮기기]가 꺼져 있다', async () => {
+      const { wrapper } = await mountPanel()
+      await choose(wrapper, '2025', '옮기기')
+
+      expect(dialogOpen('mailbox-move-dialog')).toBe(true)
+      expect(wrapper.get('#mailbox-move-title').text()).toBe('‘2025’ 메일함을 어디로 옮길까요?')
+      expect(wrapper.get('#mailbox-move-message').text()).toBe('하위 메일함과 안의 메일도 함께 옮깁니다.')
+      expect(wrapper.get('[role="radiogroup"]').attributes('aria-label')).toBe('옮길 곳')
+      expect(wrapper.get('.mailbox-move__heading').text()).toBe('내 메일함')
+      expect(
+        moveRows(wrapper).map((item) => [
+          item.get('.mailbox-move__name').text(),
+          item.find('.mailbox-move__note').exists() ? item.get('.mailbox-move__note').text() : null,
+          item.attributes('aria-disabled') ?? null,
+        ]),
+      ).toEqual([
+        ['맨 위', '다른 메일함 안에 두지 않습니다', null],
+        ['받은편지함', null, null],
+        ['거래처', '지금 있는 곳', 'true'],
+        ['2025', null, 'true'],
+        ['정산', null, 'true'],
+        ['보관', '같은 이름의 메일함이 있습니다', 'true'],
+        ['2025', null, null],
+        ['프로젝트', null, null],
+        ['견적', null, null],
+      ])
+      // 보낸편지함 · 임시보관함 · 스팸메일함 · 휴지통은 옮길 곳이 아니다
+      expect(moveRows(wrapper).some((item) => ['sent', 'drafts', 'junk', 'trash'].includes(item.attributes('data-move-row') ?? ''))).toBe(
+        false,
+      )
+      // 들여 쓴 줄은 위 메일함부터 읽는다 · 까닭 글은 설명으로
+      expect(moveRow(wrapper, 'b25').attributes('aria-label')).toBe('보관 안의 2025')
+      expect(moveRow(wrapper, 'c25s').attributes('aria-label')).toBe('거래처 안의 2025 안의 정산')
+      expect(moveRow(wrapper, 'c25s').classes()).toContain('mailbox-move__row--depth-2')
+      expect(moveRow(wrapper, 'c').attributes('aria-describedby')).toBe('mailbox-move-note-m-c')
+      expect(moveRows(wrapper).every((item) => item.attributes('aria-checked') === 'false')).toBe(true)
+      expect(wrapper.get('#mailbox-move-confirm').attributes('disabled')).toBeDefined()
+      // 처음 초점은 고를 수 있는 첫 줄 — 로빙 tabindex
+      expect(document.activeElement).toBe(moveRow(wrapper, '').element)
+      expect(moveRows(wrapper).filter((item) => item.attributes('tabindex') === '0')).toHaveLength(1)
+    })
+
+    it('줄을 눌러 고르고 [옮기기] → PATCH { parentId } · 패널에 바로 · "‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다." + [되돌리기]는 원래 자리로', async () => {
+      const moved = box('c25', null, '2025', { parentId: 'p', totalCount: 4 })
+      reply('PATCH /mailboxes/c25', ok(moved), ok({ ...moved, parentId: 'c' }))
+      const { wrapper, store } = await mountPanel()
+      await choose(wrapper, '2025', '옮기기')
+
+      // 고를 수 없는 줄은 눌러도 고르지 않는다
+      await moveRow(wrapper, 'b').trigger('click')
+      expect(wrapper.get('#mailbox-move-confirm').attributes('disabled')).toBeDefined()
+      await moveRow(wrapper, 'p').trigger('click')
+      expect(moveRow(wrapper, 'p').attributes('aria-checked')).toBe('true')
+      expect(moveRow(wrapper, 'p').find('.mailbox-move__check').exists()).toBe(true)
+      await wrapper.get('#mailbox-move-confirm').trigger('click')
+      await flushPromises()
+
+      expect(sent('PATCH', '/mailboxes/c25').map((request) => request.data)).toEqual([{ parentId: 'p' }])
+      expect(dialogOpen('mailbox-move-dialog')).toBe(false)
+      expect(panelNames(wrapper)).toEqual(['거래처', '보관', '2025', '프로젝트', '2025', '정산', '견적'])
+      expect(toastTexts()).toEqual(['‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다.'])
+      expect(useToastStore().toasts[0]?.action?.label).toBe('되돌리기')
+
+      runToastAction()
+      await flushPromises()
+      expect(sent('PATCH', '/mailboxes/c25').map((request) => request.data)).toEqual([{ parentId: 'p' }, { parentId: 'c' }])
+      expect(toastTexts()).toEqual(['‘2025’ 메일함을 ‘거래처’ 안으로 되돌렸습니다.'])
+      expect(store.mailboxes.find((mailbox) => mailbox.id === 'c25')?.parentId).toBe('c')
+    })
+
+    it('맨 위로는 parentId: null — "다른 메일함 밖으로", 받은편지함 안으로는 따옴표 없이', async () => {
+      reply(
+        'PATCH /mailboxes/pq',
+        ok(box('pq', null, '견적')),
+        ok(box('pq', null, '견적', { parentId: 'inbox' })),
+      )
+      const { wrapper } = await mountPanel()
+      await choose(wrapper, '견적', '옮기기')
+      // 하위 메일함이 없으면 글이 짧다
+      expect(wrapper.get('#mailbox-move-message').text()).toBe('안의 메일도 함께 옮깁니다.')
+      await moveRow(wrapper, '').trigger('click')
+      await wrapper.get('#mailbox-move-confirm').trigger('click')
+      await flushPromises()
+
+      expect(sent('PATCH', '/mailboxes/pq').map((request) => request.data)).toEqual([{ parentId: null }])
+      expect(toastTexts()).toEqual(['‘견적’ 메일함을 다른 메일함 밖으로 옮겼습니다.'])
+
+      await choose(wrapper, '견적', '옮기기')
+      // 맨 위에 있는 메일함 — 맨 위 줄이 지금 있는 곳
+      expect(moveRow(wrapper, '').get('.mailbox-move__note').text()).toBe('지금 있는 곳')
+      await moveRow(wrapper, 'inbox').trigger('click')
+      await wrapper.get('#mailbox-move-confirm').trigger('click')
+      await flushPromises()
+      expect(toastTexts()).toContain('‘견적’ 메일함을 받은편지함 안으로 옮겼습니다.')
+    })
+
+    it('키보드 — 화살표로 줄을 옮기며 고른다(꺼진 줄에도 초점은 간다 — 고른 것은 그대로) · Enter 는 [옮기기]', async () => {
+      reply('PATCH /mailboxes/c25', ok(box('c25', null, '2025', { parentId: 'inbox' })))
+      const { wrapper } = await mountPanel()
+      await choose(wrapper, '2025', '옮기기')
+
+      await moveRow(wrapper, '').trigger('keydown', { key: 'ArrowDown' })
+      await flushPromises()
+      expect(document.activeElement).toBe(moveRow(wrapper, 'inbox').element)
+      expect(moveRow(wrapper, 'inbox').attributes('aria-checked')).toBe('true')
+      expect(moveRow(wrapper, 'inbox').attributes('tabindex')).toBe('0')
+
+      await moveRow(wrapper, 'inbox').trigger('keydown', { key: 'ArrowDown' })
+      await flushPromises()
+      expect(document.activeElement).toBe(moveRow(wrapper, 'c').element)
+      expect(moveRow(wrapper, 'c').attributes('aria-checked')).toBe('false')
+      expect(moveRow(wrapper, 'inbox').attributes('aria-checked')).toBe('true')
+
+      await moveRow(wrapper, 'c').trigger('keydown', { key: 'End' })
+      await flushPromises()
+      expect(document.activeElement).toBe(moveRow(wrapper, 'pq').element)
+      await moveRow(wrapper, 'pq').trigger('keydown', { key: 'Home' })
+      await flushPromises()
+      expect(moveRow(wrapper, '').attributes('aria-checked')).toBe('true')
+      await moveRow(wrapper, '').trigger('keydown', { key: 'ArrowUp' })
+      await flushPromises()
+      // 처음에서 위로 가면 끝으로 돈다
+      expect(moveRow(wrapper, 'pq').attributes('aria-checked')).toBe('true')
+
+      await moveRow(wrapper, 'pq').trigger('keydown', { key: 'Home' })
+      await moveRow(wrapper, '').trigger('keydown', { key: 'ArrowDown' })
+      await moveRow(wrapper, 'inbox').trigger('keydown', { key: 'Enter' })
+      await flushPromises()
+      expect(sent('PATCH', '/mailboxes/c25').map((request) => request.data)).toEqual([{ parentId: 'inbox' }])
+    })
+
+    it('그사이 같은 이름(409 MAIL_009) — 알림 없이 목록 아래 빨간 사전 문구 · 창은 그대로, 다른 곳을 고르면 사라진다', async () => {
+      reply('PATCH /mailboxes/c25', fail(409, 'MAIL_009'))
+      const { wrapper } = await mountPanel()
+      await choose(wrapper, '2025', '옮기기')
+      await moveRow(wrapper, 'p').trigger('click')
+      await wrapper.get('#mailbox-move-confirm').trigger('click')
+      await flushPromises()
+
+      const error = wrapper.get('#mailbox-move-error')
+      expect(error.text()).toBe(ERROR_CODE_MESSAGES.MAIL_009)
+      expect(error.attributes('role')).toBe('alert')
+      expect(wrapper.get('[role="radiogroup"]').attributes('aria-describedby')).toBe('mailbox-move-error')
+      expect(dialogOpen('mailbox-move-dialog')).toBe(true)
+      expect(useToastStore().toasts).toEqual([])
+
+      await moveRow(wrapper, 'pq').trigger('click')
+      expect(wrapper.find('#mailbox-move-error').exists()).toBe(false)
+    })
+
+    it('메일함이 그사이 사라졌으면(404 RES_001) — 알림을 보고 창을 닫은 뒤 메일함 목록을 다시 받는다', async () => {
+      reply('PATCH /mailboxes/c25', fail(404, 'RES_001'))
+      const { wrapper } = await mountPanel()
+      await choose(wrapper, '2025', '옮기기')
+      const before = sent('GET', '/mailboxes').length
+      await moveRow(wrapper, 'p').trigger('click')
+      await wrapper.get('#mailbox-move-confirm').trigger('click')
+      await flushPromises()
+
+      expect(toastTexts()).toEqual([ERROR_CODE_MESSAGES.RES_001])
+      expect(dialogOpen('mailbox-move-dialog')).toBe(false)
+      expect(sent('GET', '/mailboxes').length).toBeGreaterThan(before)
+    })
+
+    it('옮기는 동안 [옮기기]는 aria-disabled · aria-busy — 다시 눌러도 한 번만 보낸다', async () => {
+      const pending = deferred()
+      reply('PATCH /mailboxes/c25', pending)
+      const { wrapper } = await mountPanel()
+      await choose(wrapper, '2025', '옮기기')
+      await moveRow(wrapper, 'p').trigger('click')
+      const confirm = wrapper.get('#mailbox-move-confirm')
+      await confirm.trigger('click')
+      await flushPromises()
+
+      expect(confirm.attributes('aria-disabled')).toBe('true')
+      expect(confirm.attributes('aria-busy')).toBe('true')
+      await confirm.trigger('click')
+      await flushPromises()
+      expect(sent('PATCH', '/mailboxes/c25')).toHaveLength(1)
+
+      pending.resolve(ok(box('c25', null, '2025', { parentId: 'p' })))
+      await flushPromises()
+      expect(dialogOpen('mailbox-move-dialog')).toBe(false)
+    })
+  })
+
+  describe('하위 메일함까지 지우기', () => {
+    it('확인(처음 초점 「취소」) 뒤 DELETE ?withChildren=true 를 deleted 가 될 때까지 — 진행 수는 나무 전체, 지우는 동안 하위 메일함의 메뉴도 꺼지고 끝나면 나무 전체가 빠진다', async () => {
+      const second = deferred()
+      reply(
+        'DELETE /mailboxes/c',
+        ok({ deleted: false, processed: 12, movedToTrash: 12, remaining: 28 }),
+        second,
+        ok({ deleted: true, processed: 0, movedToTrash: 0, remaining: 0 }),
+      )
+      const { wrapper, store } = await mountPanel()
+
+      await choose(wrapper, '거래처', '지우기')
+      expect(wrapper.get('#mailbox-delete-title').text()).toBe('‘거래처’ 메일함과 하위 메일함 2개를 지울까요?')
+      expect(wrapper.get('#mailbox-delete-message').text()).toBe(
+        '하위 메일함에 든 메일까지 모두 40통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다. 지운 메일함은 되돌릴 수 없습니다.',
+      )
+      expect(document.activeElement?.id).toBe('mailbox-delete-cancel')
+
+      await wrapper.get('#mailbox-delete-confirm').trigger('click')
+      await flushPromises()
+      expect(useToastStore().toasts.map((toast) => [toast.kind, toast.message])).toEqual([
+        ['progress', '‘거래처’ 메일함을 지우는 중 · 12 / 40통'],
+      ])
+      // 지우는 나무의 메일함은 모든 항목을 누를 수 없다
+      await row(wrapper, '정산').get('[data-mailbox-more]').trigger('click')
+      await flushPromises()
+      const items = wrapper.findAll('[role="menu"] [role^="menuitem"]')
+      expect(items.length).toBeGreaterThan(0)
+      expect(items.every((item) => item.attributes('aria-disabled') === 'true')).toBe(true)
+      await row(wrapper, '정산').get('[data-mailbox-more]').trigger('click')
+
+      second.resolve(ok({ deleted: false, processed: 28, movedToTrash: 28, remaining: 0 }))
+      await flushPromises()
+
+      expect(sent('DELETE', '/mailboxes/c').map((request) => request.params)).toEqual([
+        { withChildren: true },
+        { withChildren: true },
+        { withChildren: true },
+      ])
+      expect(toastTexts()).toEqual(['‘거래처’ 메일함을 지웠습니다. 안의 메일 40통은 휴지통에 있습니다.'])
+      expect(store.mailboxes.map((mailbox) => mailbox.id)).not.toEqual(expect.arrayContaining(['c']))
+      expect(store.mailboxes.some((mailbox) => ['c', 'c25', 'c25s'].includes(mailbox.id))).toBe(false)
+      expect(panelNames(wrapper)).toEqual(['보관', '2025', '프로젝트', '견적'])
+    })
+
+    it('하위 메일함을 보고 있었어도 지운 뒤 받은편지함으로 간다', async () => {
+      reply('DELETE /mailboxes/c', ok({ deleted: true, processed: 40, movedToTrash: 40, remaining: 0 }))
+      const { wrapper, router } = await mountPanel(MAILBOXES, 'c25s')
+
+      await choose(wrapper, '거래처', '지우기')
+      await wrapper.get('#mailbox-delete-confirm').trigger('click')
+      await flushPromises()
+
+      expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
+    })
+
+    it('하위 메일함까지 비어 있으면 "하위 메일함까지 모두 비어 있습니다." · 하위가 없는 메일함은 지금 지우기 그대로(withChildren 없이)', async () => {
+      reply('DELETE /mailboxes/b', ok({ deleted: true, processed: 0, movedToTrash: 0, remaining: 0 }))
+      reply('DELETE /mailboxes/pq', ok({ deleted: true, processed: 0, movedToTrash: 0, remaining: 0 }))
+      const { wrapper } = await mountPanel()
+
+      await choose(wrapper, '보관', '지우기')
+      expect(wrapper.get('#mailbox-delete-title').text()).toBe('‘보관’ 메일함과 하위 메일함 1개를 지울까요?')
+      expect(wrapper.get('#mailbox-delete-message').text()).toBe(
+        '하위 메일함까지 모두 비어 있습니다. 지운 메일함은 되돌릴 수 없습니다.',
+      )
+      await wrapper.get('#mailbox-delete-confirm').trigger('click')
+      await flushPromises()
+      expect(sent('DELETE', '/mailboxes/b').map((request) => request.params)).toEqual([{ withChildren: true }])
+
+      await choose(wrapper, '견적', '지우기')
+      expect(wrapper.get('#mailbox-delete-title').text()).toBe('‘견적’ 메일함을 지울까요?')
+      await wrapper.get('#mailbox-delete-confirm').trigger('click')
+      await flushPromises()
+      expect(sent('DELETE', '/mailboxes/pq').map((request) => request.params)).toEqual([{}])
+    })
+  })
+
+  describe('차단할 때 받은 메일 옮기기와 스팸메일함 비우기', () => {
+    it('이 탭에서 차단 정리가 도는 동안은 「스팸메일함 비우기」를 누를 수 없다 · 확인 단추도 꺼지고 스토어도 시작하지 않는다 — 끝나면 다시 켜진다', async () => {
+      const { wrapper, store } = await mountPanel()
+      const blockRun = useMailBlockRunStore()
+      const junk = store.mailboxes.find((mailbox) => mailbox.id === 'junk')
+      if (!junk) throw new Error('스팸메일함이 없다')
+
+      // 확인 창을 연 뒤에 정리가 시작돼도 누르는 순간 다시 본다
+      await choose(wrapper, '스팸메일함', '스팸메일함 비우기')
+      blockRun.running = true
+      await flushPromises()
+      expect(wrapper.get('#mailbox-empty-confirm').attributes('disabled')).toBeDefined()
+      await wrapper.get('#mailbox-empty-confirm').trigger('click')
+      await flushPromises()
+      expect(sent('DELETE', '/mailboxes/junk/messages')).toEqual([])
+      await wrapper.get('#mailbox-empty-cancel').trigger('click')
+      await flushPromises()
+
+      await row(wrapper, '스팸메일함').get('[data-mailbox-more]').trigger('click')
+      await flushPromises()
+      const item = wrapper.findAll('[role="menu"] [role^="menuitem"]').find((candidate) => candidate.text() === '스팸메일함 비우기')
+      expect(item?.attributes('aria-disabled')).toBe('true')
+      await row(wrapper, '스팸메일함').get('[data-mailbox-more]').trigger('click')
+      expect((await store.runMailboxOperation('empty', junk, () => undefined)).status).toBe('canceled')
+      // 휴지통 비우기는 상관없다
+      expect(store.isMailboxOperationBlocked('empty', { role: 'trash' })).toBe(false)
+
+      blockRun.running = false
+      await flushPromises()
+      expect(store.isMailboxOperationBlocked('empty', junk)).toBe(false)
+    })
+  })
+})
diff --git a/frontend/src/components/mail/MailboxPanel.spec.ts b/frontend/src/components/mail/MailboxPanel.spec.ts
index 66bd927..d220c50 100644
--- a/frontend/src/components/mail/MailboxPanel.spec.ts
+++ b/frontend/src/components/mail/MailboxPanel.spec.ts
@@ -169,15 +169,18 @@ describe('MailboxPanel — 메일함 관리', () => {
       ['스팸메일함 비우기', true],
     ])
     expect(await labels('휴지통')).toEqual([['휴지통 비우기', true]])
+    // 내 메일함에는 「옮기기」 — 이름 바꾸기 다음 · 지우기 앞 (15단계)
     expect(await labels('프로젝트')).toEqual([
       ['모두 읽음으로 표시', false],
       ['하위 메일함 만들기', false],
       ['이름 바꾸기', false],
+      ['옮기기', false],
       ['지우기', true],
     ])
     expect(await labels('견적')).toEqual([
       ['하위 메일함 만들기', false],
       ['이름 바꾸기', false],
+      ['옮기기', false],
       ['지우기', true],
     ])
     expect(row(wrapper, '보낸편지함').find('[data-mailbox-more]').exists()).toBe(false)
@@ -302,16 +305,17 @@ describe('MailboxPanel — 메일함 관리', () => {
   })
 
   describe('지우기 — 안의 메일은 휴지통으로', () => {
-    it('하위 메일함이 있으면 지울 수 없다 — [확인]만, 보내지 않는다', async () => {
+    it('하위 메일함이 있으면 하위까지 지울지 묻는다 (15단계) — [취소]면 보내지 않는다', async () => {
       const { wrapper } = await mountPanel()
       await choose(wrapper, '프로젝트', '지우기')
 
       expect(dialogOpen('mailbox-delete-dialog')).toBe(true)
       expect(wrapper.get('#mailbox-delete-dialog').attributes('role')).toBe('alertdialog')
-      expect(wrapper.get('#mailbox-delete-title').text()).toBe('‘프로젝트’ 메일함을 지울 수 없습니다')
-      expect(wrapper.get('#mailbox-delete-message').text()).toBe('하위 메일함이 있습니다. 하위 메일함을 먼저 지워 주세요.')
-      expect(wrapper.find('#mailbox-delete-confirm').exists()).toBe(false)
-      expect(wrapper.get('#mailbox-delete-cancel').text()).toBe('확인')
+      expect(wrapper.get('#mailbox-delete-title').text()).toBe('‘프로젝트’ 메일함과 하위 메일함 1개를 지울까요?')
+      expect(wrapper.get('#mailbox-delete-message').text()).toBe(
+        '하위 메일함에 든 메일까지 모두 24통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다. 지운 메일함은 되돌릴 수 없습니다.',
+      )
+      expect(document.activeElement?.id).toBe('mailbox-delete-cancel')
 
       await wrapper.get('#mailbox-delete-cancel').trigger('click')
       await flushPromises()
@@ -603,6 +607,7 @@ describe('MailboxPanel — 메일함 관리', () => {
         ['모두 읽음으로 표시', false],
         ['하위 메일함 만들기', false],
         ['이름 바꾸기', false],
+        ['옮기기', false],
         ['지우기', true],
       ])
       await row(wrapper, '거래처').get('[data-mailbox-more]').trigger('click')
diff --git a/frontend/src/components/mail/MailboxPanel.vue b/frontend/src/components/mail/MailboxPanel.vue
index be45004..7d968e0 100644
--- a/frontend/src/components/mail/MailboxPanel.vue
+++ b/frontend/src/components/mail/MailboxPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // 메일함 패널 — 메일 쓰기 + 메일함 목록 + 아래 안내 · 사용량 (디자인 원본 Main · Compose 왼쪽 · MailboxManage)
 // - 메일함 목록은 두 묶음(기본 메일함 · "내 메일함")과 [+ 새 메일함] — MailboxTree
-// - 메일함마다 ⋯ 메뉴(MailboxPanelRow) — 모두 읽음 · 하위 메일함 · 이름 바꾸기 · 지우기 · 비우기. 대화상자는 MailboxDialogs, 하는 일은 useMailboxActions
+// - 메일함마다 ⋯ 메뉴(MailboxPanelRow) — 모두 읽음 · 하위 메일함 · 이름 바꾸기 · 옮기기(15단계) · 지우기 · 비우기. 대화상자는 MailboxDialogs, 하는 일은 useMailboxActions
 // - 아래: 부재중 자동 응답이 켜져 있으면 안내(MailVacationNotice) → 사용량
 // - 「예약됨」(9단계)은 예약한 메일이 있을 때만 보낸편지함 아래 — 수는 메일 화면이 받아 둔다(mail.store 의 scheduledCount)
 // 안 읽은 개수는 뱃지가 아니라 오른쪽의 평범한 숫자로 보인다.
@@ -42,6 +42,7 @@ function onAction(action: MailboxAction, mailbox: Mailbox) {
   }
   if (action === 'createChild') dialog.value = { kind: 'create', parent: mailbox }
   else if (action === 'rename') dialog.value = { kind: 'rename', mailbox }
+  else if (action === 'move') dialog.value = { kind: 'move', mailbox }
   else if (action === 'delete') dialog.value = { kind: 'delete', mailbox }
   else dialog.value = { kind: 'empty', mailbox }
 }
diff --git a/frontend/src/components/mail/MailboxPanelRow.vue b/frontend/src/components/mail/MailboxPanelRow.vue
index 5564e08..f479eeb 100644
--- a/frontend/src/components/mail/MailboxPanelRow.vue
+++ b/frontend/src/components/mail/MailboxPanelRow.vue
@@ -4,11 +4,22 @@
 // - ⋯ 는 마우스를 올리거나 초점이 가면 보이고, 메뉴가 열린 동안은 계속 보인다 (터치 화면은 늘 보인다). 할 일이 없는 메일함은 ⋯ 를 그리지 않는다
 // - 메뉴 항목은 메일함마다 다르다 (shared/utils/mailbox.ts 의 mailboxActions). 같은 처리가 도는 동안은 그 항목을 끈다 —
 //   휴지통을 비우는 동안의 「지우기」, 메일함을 지우는 동안의 「휴지통 비우기」도 끈다 (함께 돌 수 없다 — useMailboxActions 의 isBlocked)
-import { computed, ref } from 'vue'
+// - 목록 줄을 끌어다 놓는 곳(15단계 — 디자인 원본 ListDrag15): 놓을 수 있는 메일함 위에서는 줄에 2px 청록 점선 · 옅은 청록 바탕
+//   (쓰기 화면 파일 놓기와 같은 모양 — 초점 선(실선)과 헷갈리지 않게). 놓을 수 없는 곳(메일이 이미 든 메일함 · 임시보관함)은 줄이 그대로이고
+//   dragover 를 받지 않아 브라우저의 금지 커서가 뜬다. 우리 메일 끌기만 받는다 — 파일 끌기는 받지 않는다(쓰기 화면의 첨부 놓기와 겹치지 않게).
+//   놓으면 drop-mail 로 알리고 옮기는 일은 메일함 나무(MailboxTree)가 한다
+import { computed, ref, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
 import MailboxMoreButton from '@/components/mail/MailboxMoreButton.vue'
 import type { EditorMenuItem } from '@/components/mail/editor/editor-menu'
+import {
+  activeMailDrag,
+  canDropDragOn,
+  mailDragging,
+  takeMailDrop,
+  type MailDragPayload,
+} from '@/composables/useMailDrag'
 import { MAILBOX_MENU_TEXT } from '@/shared/constants/mailbox-manage'
 import type { Mailbox } from '@/shared/types/mail'
 import { formatCount } from '@/shared/utils/format'
@@ -23,6 +34,8 @@ interface Props {
 
 interface Emits {
   (e: 'action', action: MailboxAction, mailbox: Mailbox): void
+  /** 목록 줄을 이 메일함에 끌어다 놓았다 (15단계) */
+  (e: 'drop-mail', mailbox: Mailbox, drag: MailDragPayload): void
 }
 
 const props = defineProps<Props>()
@@ -34,6 +47,9 @@ const mailStore = useMailStore()
 const MAX_INDENT_DEPTH = 3
 
 const menuOpen = ref<boolean>(false)
+/** 놓을 수 있는 끌기가 이 줄 위에 있다 — 들어온 요소 수를 세어 줄 안의 링크 · 단추 사이를 지날 때 깜빡이지 않게 */
+const dropDepth = ref<number>(0)
+const dropOver = computed(() => dropDepth.value > 0)
 
 /** 그 메일함에서 돌고 있는 처리 — 지우는 중이면 모든 항목을 끈다. 함께 돌 수 없는 처리가 도는 동안의 지우기 · 비우기도 끈다 */
 function isDisabled(action: MailboxAction): boolean {
@@ -67,10 +83,52 @@ function onSelect(id: string) {
   const action = mailboxActions(props.mailbox).find((candidate) => candidate === id)
   if (action) emit('action', action, props.mailbox)
 }
+
+/** 이 메일함에 놓을 수 있는 끌기인가 — 우리 메일 끌기이고 놓을 수 있는 메일함일 때만 (아니면 null — 브라우저의 금지 커서) */
+function droppableDrag(event: DragEvent): MailDragPayload | null {
+  const drag = activeMailDrag(event)
+  return drag && canDropDragOn(drag, props.mailbox) ? drag : null
+}
+
+function onDragEnter(event: DragEvent) {
+  if (!droppableDrag(event)) return
+  event.preventDefault()
+  dropDepth.value += 1
+}
+
+function onDragOver(event: DragEvent) {
+  if (!droppableDrag(event)) return
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+}
+
+function onDragLeave(event: DragEvent) {
+  if (!droppableDrag(event)) return
+  dropDepth.value = Math.max(0, dropDepth.value - 1)
+}
+
+function onDrop(event: DragEvent) {
+  dropDepth.value = 0
+  if (!droppableDrag(event)) return
+  event.preventDefault()
+  const drag = takeMailDrop(event)
+  if (drag) emit('drop-mail', props.mailbox, drag)
+}
+
+// 끌기가 끝나면(다른 곳에 놓음 · Esc 로 그만둠) 점선을 끈다 — 마지막 dragleave 를 놓쳤어도 남지 않게
+watch(mailDragging, (dragging) => {
+  if (!dragging) dropDepth.value = 0
+})
 </script>
 
 <template>
-  <li :class="['mailbox-row', { 'is-active': active, 'is-open': menuOpen }]">
+  <li
+    :class="['mailbox-row', { 'is-active': active, 'is-open': menuOpen, 'is-drop-target': dropOver }]"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
     <RouterLink
       :to="{ name: 'mail-mailbox', params: { mailboxId: mailbox.id } }"
       :class="['mailbox-row__link', depthClass]"
@@ -166,6 +224,19 @@ function onSelect(id: string) {
   color: var(--color-brand-strong);
 }
 
+/* 끌어다 놓을 수 있는 메일함 위 — 2px 청록 점선 · 옅은 청록 바탕 (쓰기 화면 파일 놓기와 같은 모양, 디자인 원본 ListDrag15) */
+.mailbox-row.is-drop-target {
+  outline: var(--focus-ring-width) dashed var(--color-brand);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+  background: var(--color-brand-tint);
+}
+
+.mailbox-row.is-drop-target .mailbox-row__link,
+.mailbox-row.is-drop-target .mailbox-row__count {
+  color: var(--color-brand-strong);
+  font-weight: 600;
+}
+
 /* ⋯ — 마우스를 올리거나 초점이 가면, 메뉴가 열린 동안은 계속 보인다 */
 .mailbox-row__more {
   opacity: 0;
diff --git a/frontend/src/components/mail/MailboxTree.vue b/frontend/src/components/mail/MailboxTree.vue
index 554e220..3edbb0e 100644
--- a/frontend/src/components/mail/MailboxTree.vue
+++ b/frontend/src/components/mail/MailboxTree.vue
@@ -4,11 +4,15 @@
 // "내 메일함" 이 비어도 묶음 이름과 [+ 새 메일함]은 둔다 — 첫 메일함을 만들 수 있게
 // 「예약됨」(9단계 — 예약한 메일이 있을 때만)은 기본 메일함 묶음의 보낸편지함(과 그 하위) 바로 아래 — 보낸편지함이 없으면 묶음 끝.
 // 예약됨을 보는 동안은 수가 0 이 되어도 남긴다 — 다 취소하거나 보낸 뒤에도 지금 있는 곳이 패널에 보이게
+// 목록 줄을 메일함 줄에 끌어다 놓으면(15단계 — 디자인 원본 ListDrag15) 여기서 옮긴다 — 휴지통이면 [삭제], 스팸메일함이면 [스팸 신고]와 같고
+// 그 밖은 [이동 ▾]와 같다(알림 · [되돌리기]도 같다 — useBulkMailActions 의 moveDragged). 「예약됨」에는 놓을 수 없다
 import { computed } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
 import MailboxPanelRow from '@/components/mail/MailboxPanelRow.vue'
 import MailboxScheduledRow from '@/components/mail/MailboxScheduledRow.vue'
+import { useBulkMailActions } from '@/composables/useBulkMailActions'
+import type { MailDragPayload } from '@/composables/useMailDrag'
 import { MAILBOX_PANEL_TEXT } from '@/shared/constants/mailbox-manage'
 import type { Mailbox } from '@/shared/types/mail'
 import { splitMailboxGroups, type MailboxAction, type MailboxNode } from '@/shared/utils/mailbox'
@@ -34,6 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const emit = defineEmits<Emits>()
 
+const bulk = useBulkMailActions()
+
 const MY_GROUP_ID = 'mailbox-panel-mine'
 /** 보낸편지함이 없을 때 — 「예약됨」을 기본 메일함 묶음 끝에 (메일함 id 는 비지 않는다) */
 const AT_GROUP_END = ''
@@ -43,6 +49,11 @@ const groups = computed(() => splitMailboxGroups(props.nodes))
  * 「예약됨」을 넣을 자리 — 기본 메일함 묶음에서 이 메일함 줄 뒤(보낸편지함 하위의 끝). 보낸편지함이 없으면 묶음 끝(AT_GROUP_END).
  * 예약한 메일이 없으면 null (그리지 않는다) — 다만 예약됨을 보고 있으면 남긴다
  */
+/** 끌어다 놓은 메일을 그 메일함으로 옮긴다 */
+function onDropMail(mailbox: Mailbox, drag: MailDragPayload) {
+  void bulk.moveDragged(drag, mailbox)
+}
+
 const scheduledAfterId = computed<string | null>(() => {
   if (props.scheduledCount <= 0 && !props.scheduledActive) return null
   const system = groups.value.system
@@ -67,6 +78,7 @@ const scheduledAfterId = computed<string | null>(() => {
           :depth="node.depth"
           :active="node.mailbox.id === activeId"
           @action="(action, mailbox) => emit('action', action, mailbox)"
+          @drop-mail="onDropMail"
         />
         <MailboxScheduledRow
           v-if="scheduledAfterId === node.mailbox.id"
@@ -98,6 +110,7 @@ const scheduledAfterId = computed<string | null>(() => {
         :depth="node.depth"
         :active="node.mailbox.id === activeId"
         @action="(action, mailbox) => emit('action', action, mailbox)"
+        @drop-mail="onDropMail"
       />
     </ul>
     <button
diff --git a/frontend/src/components/mail/MessageBlockDialog.spec.ts b/frontend/src/components/mail/MessageBlockDialog.spec.ts
new file mode 100644
index 0000000..73564ce
--- /dev/null
+++ b/frontend/src/components/mail/MessageBlockDialog.spec.ts
@@ -0,0 +1,148 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+import type { MailBlockRunBlock } from '@/stores/mail-block-run.store'
+import MessageBlockDialog from './MessageBlockDialog.vue'
+
+// 보낸 사람 차단 창의 15단계 새 칸 — 「받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기」
+// (디자인 원본 Mailbox15 "보낸 사람 차단 창" · 디자인 README "15단계")
+
+interface DialogProps {
+  open: boolean
+  senderEmail: string
+  inJunk?: boolean
+  inInbox?: boolean
+  cleanupBlock?: MailBlockRunBlock | null
+}
+
+const mounted: VueWrapper[] = []
+
+afterEach(() => {
+  for (const wrapper of mounted.splice(0)) wrapper.unmount()
+  document.body.innerHTML = ''
+})
+
+function mountDialog(props: Partial<DialogProps> = {}) {
+  const wrapper = mount(MessageBlockDialog, {
+    props: { open: true, senderEmail: 'News@Example.com', inInbox: true, ...props },
+    attachTo: document.body,
+  })
+  mounted.push(wrapper)
+  return wrapper
+}
+
+const moveBox = (wrapper: VueWrapper) => wrapper.get<HTMLInputElement>('[data-block-move]')
+const cleanBox = (wrapper: VueWrapper) => wrapper.get<HTMLInputElement>('[data-block-clean]')
+const confirmed = (wrapper: VueWrapper) => wrapper.emitted('confirm') ?? []
+
+describe('MessageBlockDialog — 받은편지함의 메일도 옮기기 (15단계)', () => {
+  it('처음에는 첫 칸 켜짐 · 새 칸 꺼짐 — 새 칸 아래 "옮긴 메일은 한꺼번에 되돌릴 수 없습니다." · [차단]은 지금처럼', async () => {
+    const wrapper = mountDialog()
+
+    expect(moveBox(wrapper).element.checked).toBe(true)
+    expect(moveBox(wrapper).attributes('aria-disabled')).toBeUndefined()
+    expect(cleanBox(wrapper).element.checked).toBe(false)
+    expect(cleanBox(wrapper).element.closest('label')?.textContent?.trim()).toBe(
+      '받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기',
+    )
+    expect(cleanBox(wrapper).attributes('aria-describedby')).toBe('block-dialog-clean-note')
+    expect(wrapper.get('#block-dialog-clean-note').text()).toBe('옮긴 메일은 한꺼번에 되돌릴 수 없습니다.')
+
+    await wrapper.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(wrapper)).toEqual([['news@example.com', true, false]])
+  })
+
+  it('새 칸을 켜면 받은편지함의 메일이면 첫 칸은 켠 채 잠긴다(aria-disabled · 까닭) — 눌러도 그대로, 새 칸을 끄면 원래 값으로', async () => {
+    const wrapper = mountDialog()
+    // 먼저 첫 칸을 꺼 둔다
+    await moveBox(wrapper).setValue(false)
+    expect(moveBox(wrapper).element.checked).toBe(false)
+
+    await cleanBox(wrapper).setValue(true)
+    expect(moveBox(wrapper).element.checked).toBe(true)
+    expect(moveBox(wrapper).attributes('aria-disabled')).toBe('true')
+    expect(moveBox(wrapper).attributes('aria-describedby')).toBe('block-dialog-move-lock')
+    expect(wrapper.get('#block-dialog-move-lock').text()).toBe('받은편지함의 메일을 옮길 때 함께 옮깁니다.')
+
+    // 잠긴 칸은 눌러도 바뀌지 않는다
+    await moveBox(wrapper).trigger('click')
+    await nextTick()
+    expect(moveBox(wrapper).element.checked).toBe(true)
+
+    await wrapper.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(wrapper).at(-1)).toEqual(['news@example.com', true, true])
+
+    await cleanBox(wrapper).setValue(false)
+    expect(moveBox(wrapper).element.checked).toBe(false)
+    expect(moveBox(wrapper).attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.find('#block-dialog-move-lock').exists()).toBe(false)
+  })
+
+  it('이 메일이 받은편지함이 아니면 잠그지 않는다 · 스팸메일함의 메일이면 첫 칸이 없고 새 칸만', async () => {
+    const elsewhere = mountDialog({ inInbox: false })
+    await cleanBox(elsewhere).setValue(true)
+    expect(moveBox(elsewhere).attributes('aria-disabled')).toBeUndefined()
+    await moveBox(elsewhere).setValue(false)
+    await elsewhere.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(elsewhere)).toEqual([['news@example.com', false, true]])
+
+    const inJunk = mountDialog({ inInbox: false, inJunk: true })
+    expect(inJunk.find('[data-block-move]').exists()).toBe(false)
+    await cleanBox(inJunk).setValue(true)
+    await inJunk.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(inJunk)).toEqual([['news@example.com', false, true]])
+  })
+
+  it('「이 도메인 전체」를 고르면 새 칸이 "이 도메인의 메일"로 바뀌고 @도메인으로 막는다', async () => {
+    const wrapper = mountDialog()
+    await wrapper.get('[data-block-scope="domain"]').setValue(true)
+    await cleanBox(wrapper).setValue(true)
+
+    expect(cleanBox(wrapper).element.closest('label')?.textContent?.trim()).toBe(
+      '받은편지함에 있는 이 도메인의 메일도 스팸메일함으로 옮기기',
+    )
+    await wrapper.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(wrapper)).toEqual([['@example.com', true, true]])
+  })
+
+  it('이 탭에서 받은편지함을 정리하는 중이면 새 칸을 끄고(aria-disabled) 칸 아래 글을 까닭으로 — 눌러도 켜지지 않는다', async () => {
+    const wrapper = mountDialog({ cleanupBlock: 'inbox' })
+
+    expect(cleanBox(wrapper).attributes('aria-disabled')).toBe('true')
+    expect(wrapper.get('#block-dialog-clean-note').text()).toBe('받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.')
+    await cleanBox(wrapper).trigger('click')
+    await nextTick()
+    expect(cleanBox(wrapper).element.checked).toBe(false)
+    await wrapper.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(wrapper)).toEqual([['news@example.com', true, false]])
+  })
+
+  it('이 탭에서 스팸메일함을 비우는 중이면 새 칸을 끄고 칸 아래 글을 그 까닭으로 — 켜 둔 칸도 꺼진 것으로 보낸다, 끝나면 다시 고를 수 있다', async () => {
+    const wrapper = mountDialog()
+    await cleanBox(wrapper).setValue(true)
+    await wrapper.setProps({ cleanupBlock: 'junk' })
+
+    expect(cleanBox(wrapper).attributes('aria-disabled')).toBe('true')
+    expect(cleanBox(wrapper).element.checked).toBe(false)
+    expect(wrapper.get('#block-dialog-clean-note').text()).toBe('스팸메일함을 비우는 중이라 지금은 고를 수 없습니다.')
+    // 첫 칸의 잠금도 풀린다 — 새 칸이 꺼진 것과 같다
+    expect(moveBox(wrapper).attributes('aria-disabled')).toBeUndefined()
+    await wrapper.get('[data-block-confirm]').trigger('click')
+    expect(confirmed(wrapper)).toEqual([['news@example.com', true, false]])
+
+    await wrapper.setProps({ cleanupBlock: null })
+    expect(cleanBox(wrapper).attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.get('#block-dialog-clean-note').text()).toBe('옮긴 메일은 한꺼번에 되돌릴 수 없습니다.')
+  })
+
+  it('열 때마다 처음 값으로 — 새 칸은 꺼진 채 시작한다', async () => {
+    const wrapper = mountDialog()
+    await cleanBox(wrapper).setValue(true)
+    await wrapper.setProps({ open: false })
+    await wrapper.setProps({ open: true })
+
+    expect(cleanBox(wrapper).element.checked).toBe(false)
+    expect(moveBox(wrapper).element.checked).toBe(true)
+  })
+})
diff --git a/frontend/src/components/mail/MessageBlockDialog.vue b/frontend/src/components/mail/MessageBlockDialog.vue
index c746650..d419d51 100644
--- a/frontend/src/components/mail/MessageBlockDialog.vue
+++ b/frontend/src/components/mail/MessageBlockDialog.vue
@@ -1,56 +1,108 @@
 <script setup lang="ts">
-// 보낸 사람 차단 확인 창 (디자인 원본 MailReadTools · README "9단계 › 차단 확인 창") — 모달 400(medium)
+// 보낸 사람 차단 확인 창 (디자인 원본 MailReadTools · Mailbox15 · README "9단계 › 차단 확인 창" · "15단계 › 보낸 사람 차단 창") — 모달 400(medium)
 // 제목 "보낸 사람 차단" · 설명 → 고르기 둘(「이 주소만」 주소 · 「이 도메인 전체」 @도메인 에서 오는 메일 모두) →
-// 체크 「이 메일도 스팸메일함으로 옮기기」(처음 켜짐 — 이미 스팸메일함의 메일이면 두지 않는다) → 안내 → [차단](처음 초점 — 되돌릴 수 있는 일) [취소]
+// 체크 둘(붙여 둔다 — 칸 글이 두 줄이면 고르기 상자를 첫 줄에 맞춘다):
+//   「이 메일도 스팸메일함으로 옮기기」(처음 켜짐 — 이미 스팸메일함의 메일이면 두지 않는다)
+//   「받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기」(15단계 — 처음 꺼짐, 「이 도메인 전체」를 고르면 "이 도메인의 메일") +
+//   그 아래 "옮긴 메일은 한꺼번에 되돌릴 수 없습니다."
+// → 안내 → [차단](처음 초점 — 되돌릴 수 있는 일) [취소]
+// - 새 칸을 켰는데 이 메일이 받은편지함에 있으면 첫 칸은 켜진 채 잠그고(aria-disabled) 아래에 "받은편지함의 메일을 옮길 때 함께 옮깁니다." —
+//   새 칸을 끄면 첫 칸은 원래 값으로 돌아온다. 이 메일이 다른 메일함에 있으면 잠그지 않는다
+// - 이 탭에서 받은편지함을 정리하거나(필터 적용 · 다른 차단 정리) 스팸메일함을 비우는 중이면(cleanupBlock — 15단계 리뷰) 새 칸을 끄고(aria-disabled)
+//   칸 아래 글을 그 까닭으로 바꾼다
 // 여러 사람이 쓰는 메일 서비스(gmail.com · naver.com 등 — 서버와 같은 목록)는 「이 도메인 전체」를 끄고 그 아래에 까닭을 둔다.
-// 열 때마다 「이 주소만」 · 옮기기 켜짐으로 시작한다. Esc 는 [취소]와 같다
+// 열 때마다 「이 주소만」 · 첫 칸 켜짐 · 새 칸 꺼짐으로 시작한다. Esc 는 [취소]와 같다
+// 칸 아래 글은 고르기 상자 글 선(28)에 맞춰 들여 쓴다 — 고정 id #block-dialog-move-lock · #block-dialog-clean-note
 import { computed, ref, watch } from 'vue'
 
 import ModalDialog from '@/components/feedback/ModalDialog.vue'
 import { MAIL_BLOCK_TEXT } from '@/shared/constants/mail-block'
 import { normalizeEmail } from '@/shared/utils/mail-address'
 import { domainBlockOf, emailDomainOf, isPublicMailDomain } from '@/shared/utils/mail-block'
+import type { MailBlockRunBlock } from '@/stores/mail-block-run.store'
 
 interface Props {
   open: boolean
   /** 보낸 사람 주소 */
   senderEmail: string
-  /** 이 메일이 이미 스팸메일함에 있다 — 옮기기 칸을 두지 않는다 */
+  /** 이 메일이 이미 스팸메일함에 있다 — 첫 칸을 두지 않는다 */
   inJunk?: boolean
+  /** 이 메일이 받은편지함에 있다 — 새 칸을 켜면 첫 칸을 켠 채 잠근다 (15단계) */
+  inInbox?: boolean
+  /** 새 칸을 지금 고를 수 없는 까닭 — 이 탭에서 받은편지함을 정리하는 중(inbox) · 스팸메일함을 비우는 중(junk), 없으면 null (15단계) */
+  cleanupBlock?: MailBlockRunBlock | null
 }
 
 interface Emits {
-  /** target 은 주소 또는 "@도메인" (소문자) */
-  (e: 'confirm', target: string, moveToJunk: boolean): void
+  /** target 은 주소 또는 "@도메인" (소문자) · cleanInbox 는 받은편지함의 그 보낸 사람 메일도 옮긴다 (15단계) */
+  (e: 'confirm', target: string, moveToJunk: boolean, cleanInbox: boolean): void
   (e: 'cancel'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
   inJunk: false,
+  inInbox: false,
+  cleanupBlock: null,
 })
 const emit = defineEmits<Emits>()
 
+const LOCK_NOTE_ID = 'block-dialog-move-lock'
+const CLEAN_NOTE_ID = 'block-dialog-clean-note'
+
 const scope = ref<'address' | 'domain'>('address')
+/** 첫 칸에 고른 값 — 잠긴 동안에도 기억했다가 새 칸을 끄면 돌아온다 */
 const moveToJunk = ref<boolean>(true)
+const cleanInbox = ref<boolean>(false)
+/** 새 칸을 고를 수 없다 */
+const cleanupBusy = computed(() => props.cleanupBlock !== null)
 
 const address = computed(() => normalizeEmail(props.senderEmail))
 const domain = computed(() => emailDomainOf(props.senderEmail))
 const domainTarget = computed(() => domainBlockOf(domain.value))
 /** 「이 도메인 전체」를 고를 수 없다 — 여러 사람이 쓰는 메일 서비스 · 도메인이 없는 주소 */
 const domainDisabled = computed(() => domain.value === '' || isPublicMailDomain(domain.value))
+const blocksDomain = computed(() => scope.value === 'domain' && !domainDisabled.value)
+/** 새 칸이 켜져 있다 — 고를 수 없는 동안은 꺼진 것으로 본다 */
+const cleaning = computed(() => cleanInbox.value && !cleanupBusy.value)
+/** 첫 칸을 켠 채 잠근다 — 받은편지함의 메일을 옮길 때 이 메일도 함께 옮긴다 */
+const moveLocked = computed(() => cleaning.value && props.inInbox && !props.inJunk)
+const moveChecked = computed(() => moveLocked.value || moveToJunk.value)
+const cleanLabel = computed(() => (blocksDomain.value ? MAIL_BLOCK_TEXT.cleanInboxDomain : MAIL_BLOCK_TEXT.cleanInboxSender))
+const cleanNote = computed(() => {
+  if (props.cleanupBlock === 'junk') return MAIL_BLOCK_TEXT.cleanJunkBusy
+  return props.cleanupBlock === 'inbox' ? MAIL_BLOCK_TEXT.cleanInboxBusy : MAIL_BLOCK_TEXT.cleanInboxNote
+})
 
-function confirm() {
-  const target = scope.value === 'domain' && !domainDisabled.value ? domainTarget.value : address.value
-  emit('confirm', target, moveToJunk.value && !props.inJunk)
+/** 잠긴 칸 · 고를 수 없는 칸은 눌러도 바꾸지 않는다 (aria-disabled — 초점은 받는다) */
+function onMoveClick(event: MouseEvent) {
+  if (moveLocked.value) event.preventDefault()
 }
 
-// 열 때마다 처음 값으로 — 「이 주소만」 · 옮기기 켜짐
+function onMoveChange(event: Event) {
+  moveToJunk.value = (event.target as HTMLInputElement).checked
+}
+
+function onCleanClick(event: MouseEvent) {
+  if (cleanupBusy.value) event.preventDefault()
+}
+
+function onCleanChange(event: Event) {
+  cleanInbox.value = (event.target as HTMLInputElement).checked
+}
+
+function confirm() {
+  const target = blocksDomain.value ? domainTarget.value : address.value
+  emit('confirm', target, moveChecked.value && !props.inJunk, cleaning.value)
+}
+
+// 열 때마다 처음 값으로 — 「이 주소만」 · 첫 칸 켜짐 · 새 칸 꺼짐
 watch(
   () => props.open,
   (open) => {
     if (!open) return
     scope.value = 'address'
     moveToJunk.value = true
+    cleanInbox.value = false
   },
 )
 </script>
@@ -117,18 +169,49 @@ watch(
           {{ MAIL_BLOCK_TEXT.scopeDomainPublic }}
         </p>
       </div>
-      <label
-        v-if="!inJunk"
-        class="block-dialog__move"
-      >
-        <input
-          v-model="moveToJunk"
-          type="checkbox"
-          class="block-dialog__input"
-          data-block-move
+      <div class="block-dialog__checks">
+        <template v-if="!inJunk">
+          <label :class="['block-dialog__check', { 'is-locked': moveLocked }]">
+            <input
+              type="checkbox"
+              class="block-dialog__input"
+              :checked="moveChecked"
+              :aria-disabled="moveLocked ? 'true' : undefined"
+              :aria-describedby="moveLocked ? LOCK_NOTE_ID : undefined"
+              data-block-move
+              @click="onMoveClick"
+              @change="onMoveChange"
+            >
+            <span class="block-dialog__check-label">{{ MAIL_BLOCK_TEXT.moveToJunk }}</span>
+          </label>
+          <p
+            v-if="moveLocked"
+            :id="LOCK_NOTE_ID"
+            class="form-message block-dialog__note block-dialog__note--lock"
+          >
+            {{ MAIL_BLOCK_TEXT.moveToJunkLocked }}
+          </p>
+        </template>
+        <label :class="['block-dialog__check', { 'is-disabled': cleanupBusy }]">
+          <input
+            type="checkbox"
+            class="block-dialog__input"
+            :checked="cleaning"
+            :aria-disabled="cleanupBusy ? 'true' : undefined"
+            :aria-describedby="CLEAN_NOTE_ID"
+            data-block-clean
+            @click="onCleanClick"
+            @change="onCleanChange"
+          >
+          <span class="block-dialog__check-label">{{ cleanLabel }}</span>
+        </label>
+        <p
+          :id="CLEAN_NOTE_ID"
+          class="form-message block-dialog__note block-dialog__note--clean"
         >
-        <span>{{ MAIL_BLOCK_TEXT.moveToJunk }}</span>
-      </label>
+          {{ cleanNote }}
+        </p>
+      </div>
       <p class="form-message">
         {{ MAIL_BLOCK_TEXT.settingsHint }}
       </p>
@@ -220,20 +303,45 @@ watch(
   color: var(--color-icon-muted);
 }
 
-/* 「이 도메인 전체」를 끈 까닭 — 고르기 글자 선(28)에 맞춰 들여 쓴다 */
+/* 칸 아래 까닭 · 안내 — 고르기 글자 선(28)에 맞춰 들여 쓴다 */
 .block-dialog__note {
   margin-left: var(--space-28);
 }
 
-.block-dialog__move {
+/* 체크 둘은 붙여 둔다 (디자인 원본 Mailbox15 — 줄 44 · 위 12, 칸 글이 두 줄이면 고르기 상자를 첫 줄에 맞춘다) */
+.block-dialog__checks {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+}
+
+.block-dialog__check {
+  display: flex;
+  align-items: flex-start;
   gap: var(--space-10);
   min-height: var(--size-touch);
+  padding-top: var(--space-12);
   cursor: pointer;
 }
 
-.block-dialog__move .block-dialog__input {
-  margin: 0;
+/* 잠긴 첫 칸 · 고를 수 없는 새 칸 — 상자와 이름을 흐리게 (aria-disabled — 초점은 받는다) */
+.block-dialog__check.is-locked,
+.block-dialog__check.is-disabled {
+  cursor: default;
+}
+
+.block-dialog__check.is-locked .block-dialog__input,
+.block-dialog__check.is-locked .block-dialog__check-label,
+.block-dialog__check.is-disabled .block-dialog__input,
+.block-dialog__check.is-disabled .block-dialog__check-label {
+  opacity: 0.5;
+}
+
+/* 잠긴 첫 칸의 까닭은 그 칸 바로 아래로 당긴다 (보드 -10) */
+.block-dialog__note--lock {
+  margin-top: calc(var(--space-10) * -1);
+}
+
+.block-dialog__note--clean {
+  margin-top: var(--space-2);
 }
 </style>
diff --git a/frontend/src/components/mail/MessageConversation.stage15.spec.ts b/frontend/src/components/mail/MessageConversation.stage15.spec.ts
new file mode 100644
index 0000000..6045ba7
--- /dev/null
+++ b/frontend/src/components/mail/MessageConversation.stage15.spec.ts
@@ -0,0 +1,354 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { CLOCK } from '@/composables/useClock'
+import type { Mailbox, MessageDetail, MessageSummary } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore } from '@/stores/toast.store'
+import { createManualClock, type ManualClock } from '@/test-utils/manual-clock'
+import { flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest, type MockResult } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import MessageReader from './MessageReader.vue'
+
+// 15단계 — 같은 대화 칸의 [모두 펼치기] · [모두 접기]와 펼친 줄 머리의 [답장] (디자인 원본 Reader15 "6")
+// - [모두 펼치기]는 불러온 줄을 모두 펼친다 — 본문은 펼친 안이 화면에 들어오는 줄부터 하나씩 받는다(한꺼번에 부르지 않는다)
+// - 읽음은 지금 규칙 그대로 — 본문이 화면에 보인 메일만 읽음이다(펼쳤어도 화면 밖이면 그대로)
+// 화면에 들어오고 나가는 것은 가짜 IntersectionObserver 로 흉내 낸다 (jsdom 에는 없다)
+
+const USER = { email: 'ara.kim@arasystem.test', name: '김아라' }
+const INBOX: Mailbox = { id: 'inbox', name: '받은편지함', role: 'inbox', parentId: null, sortOrder: 0, totalCount: 3, unreadCount: 2 }
+const SENT: Mailbox = { ...INBOX, id: 'sent', name: '보낸편지함', role: 'sent', unreadCount: 0 }
+const DRAFTS: Mailbox = { ...INBOX, id: 'drafts', name: '임시보관함', role: 'drafts', unreadCount: 0 }
+const MAILBOXES = [INBOX, SENT, DRAFTS]
+const NOW = new Date(2026, 10, 9, 10).getTime()
+const at = (...parts: [number, number, number, number, number]) => new Date(...parts).toISOString()
+
+function summary(id: string, partial: Partial<MessageSummary> = {}): MessageSummary {
+  return {
+    id,
+    threadId: 't1',
+    mailboxIds: ['inbox'],
+    from: { name: '이도윤', email: 'doyun.lee@arasystem.test' },
+    to: [{ name: '김아라', email: USER.email }],
+    subject: 'Re: 유지보수 계약 갱신 건',
+    preview: '네, 확인했습니다.',
+    receivedAt: at(2026, 10, 3, 9, 30),
+    isRead: true,
+    isFlagged: false,
+    hasAttachment: false,
+    size: 100,
+    pendingSend: null,
+    ...partial,
+  }
+}
+
+function detail(base: MessageSummary): MessageDetail {
+  return {
+    ...base,
+    cc: [],
+    bcc: [],
+    replyTo: [],
+    sentAt: null,
+    messageId: null,
+    references: [],
+    htmlBody: null,
+    textBody: `${base.id} 본문`,
+    hasBlockedImages: false,
+    attachments: [],
+  }
+}
+
+const FIRST = summary('c1', {
+  mailboxIds: ['sent'],
+  from: { name: '김아라', email: USER.email },
+  receivedAt: at(2026, 10, 3, 14, 10),
+})
+const SECOND = summary('c2', { isRead: false, receivedAt: at(2026, 10, 5, 9, 30) })
+const THIRD = summary('c3', { isRead: false, receivedAt: at(2026, 10, 5, 13, 5) })
+const DRAFT = summary('c5', { mailboxIds: ['drafts'], from: USER, receivedAt: at(2026, 10, 9, 9, 52) })
+const CURRENT = summary('c4', { receivedAt: at(2026, 10, 9, 9, 30) })
+const THREAD = [FIRST, SECOND, THIRD, CURRENT, DRAFT]
+
+function page(items: MessageSummary[], nextCursor: string | null = null, total: number | null = items.length): MockResult {
+  return ok({ items, pageInfo: { hasNext: nextCursor !== null, nextCursor, total }, basis: 'index' })
+}
+
+function deferred() {
+  let resolve: (result: MockResult) => void = () => undefined
+  const promise = new Promise<MockResult>((settle) => {
+    resolve = settle
+  })
+  return { promise, resolve }
+}
+
+/** 가짜 IntersectionObserver — 테스트가 요소를 화면에 넣고 뺀다 */
+class FakeIntersectionObserver {
+  static instances: FakeIntersectionObserver[] = []
+  readonly targets = new Set<Element>()
+
+  constructor(private readonly callback: IntersectionObserverCallback) {
+    FakeIntersectionObserver.instances.push(this)
+  }
+
+  observe(element: Element) {
+    this.targets.add(element)
+  }
+
+  unobserve(element: Element) {
+    this.targets.delete(element)
+  }
+
+  disconnect() {
+    this.targets.clear()
+  }
+
+  takeRecords(): IntersectionObserverEntry[] {
+    return []
+  }
+
+  /** 그 요소들이 화면에 들어왔다 · 나갔다 — 보고 있는 것만 알린다 */
+  static set(elements: Element[], visible: boolean) {
+    for (const instance of FakeIntersectionObserver.instances) {
+      const entries = elements
+        .filter((element) => instance.targets.has(element))
+        .map((target) => ({ target, isIntersecting: visible }) as IntersectionObserverEntry)
+      if (entries.length > 0) instance.callback(entries, instance as unknown as IntersectionObserver)
+    }
+  }
+}
+
+describe('MessageConversation — [모두 펼치기] · 펼친 줄 머리의 [답장] (15단계)', () => {
+  let pinia: Pinia
+  let clock: ManualClock
+  let requests: MockRequest[]
+  let details: Map<string, ReturnType<typeof deferred>>
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated(USER)
+    clock = createManualClock(NOW)
+    FakeIntersectionObserver.instances = []
+    vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
+    details = new Map()
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) {
+      if (!wrapper.vm.$.isUnmounted) wrapper.unmount()
+    }
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  /** 본문은 테스트가 풀어 줄 때 온다 (deferredDetails) — 아니면 바로 */
+  function serve(options: { conversation?: (request: MockRequest) => MockResult | Promise<MockResult>; hold?: boolean } = {}) {
+    requests = installMockApi((request) => {
+      if (request.url.endsWith('/conversation')) return options.conversation?.(request) ?? page(THREAD)
+      if (request.method === 'PATCH') return ok({ ...SECOND, isRead: true })
+      if (request.url === '/mailboxes') return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: 3 } })
+      if (request.url.startsWith('/messages/')) {
+        const id = request.url.split('/').pop() ?? ''
+        const body = ok(detail(THREAD.find((item) => item.id === id) ?? summary(id)))
+        if (!options.hold) return body
+        const wait = deferred()
+        details.set(id, wait)
+        return wait.promise.then(() => body)
+      }
+      return ok(null)
+    })
+  }
+
+  async function mountReader() {
+    const store = useMailStore()
+    store.mailboxes = MAILBOXES
+    store.listSource = { kind: 'mailbox', mailboxId: 'inbox' }
+    store.messages = [SECOND, THIRD, CURRENT]
+    store.pageInfo = { hasNext: false, nextCursor: null, total: 3 }
+    store.listStatus = 'ready'
+    store.selected = detail(CURRENT)
+    store.selectedId = CURRENT.id
+    store.selectedStatus = 'ready'
+    const router = createTestRouter()
+    await router.push(`/mail/inbox/${CURRENT.id}`)
+    await router.isReady()
+    const wrapper = mount(MessageReader, {
+      props: { layout: 'split' },
+      attachTo: document.body,
+      global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: clock } },
+    })
+    mounted.push(wrapper)
+    await flushPromises()
+    return { wrapper, store }
+  }
+
+  const detailGets = () =>
+    requests
+      .filter((request) => request.method === 'GET' && /^\/messages\/[^/]+$/.test(request.url))
+      .map((request) => request.url.split('/').pop())
+  const patches = () => requests.filter((request) => request.method === 'PATCH').map((request) => request.url)
+  const rowOf = (wrapper: VueWrapper, id: string) => wrapper.get(`[data-conversation-row="${id}"]`)
+  const toggleAll = (wrapper: VueWrapper) => wrapper.get('[data-conversation-toggle-all]')
+  const panelOf = (wrapper: VueWrapper, id: string) => wrapper.get(`[data-conversation-panel="${id}"]`).element
+
+  async function show(wrapper: VueWrapper, ids: string[], visible = true) {
+    FakeIntersectionObserver.set(
+      ids.map((id) => panelOf(wrapper, id)),
+      visible,
+    )
+    await flushPromises()
+  }
+
+  it('칸 머리 오른쪽에 [모두 펼치기] — 누르면 불러온 줄(지금 메일 빼고)을 모두 펼치고 [모두 접기]가 된다', async () => {
+    serve()
+    const { wrapper } = await mountReader()
+
+    const button = toggleAll(wrapper)
+    expect(button.text()).toBe('모두 펼치기')
+    expect(button.element.tagName).toBe('BUTTON')
+    // 칸 제목과 같은 머리 줄
+    expect(button.element.parentElement?.querySelector('h3')?.textContent?.trim()).toBe('같은 대화 5통')
+
+    await button.trigger('click')
+    expect(toggleAll(wrapper).text()).toBe('모두 접기')
+    for (const id of ['c1', 'c2', 'c3', 'c5']) {
+      expect(rowOf(wrapper, id).get('[data-conversation-toggle]').attributes('aria-expanded')).toBe('true')
+    }
+    // 지금 보는 메일의 줄은 지금처럼 펼치지 않는다
+    expect(rowOf(wrapper, 'c4').find('[data-conversation-toggle]').exists()).toBe(false)
+    // 누른 것만으로는 본문을 받지 않는다 — 화면에 들어온 줄부터
+    expect(detailGets()).toEqual([])
+    expect(rowOf(wrapper, 'c3').find('[data-conversation-detail-loading]').attributes('aria-busy')).toBe('true')
+
+    await toggleAll(wrapper).trigger('click')
+    expect(toggleAll(wrapper).text()).toBe('모두 펼치기')
+    for (const id of ['c1', 'c2', 'c3', 'c5']) {
+      expect(rowOf(wrapper, id).get('[data-conversation-toggle]').attributes('aria-expanded')).toBe('false')
+    }
+    expect(wrapper.find('[data-conversation-panel]').exists()).toBe(false)
+  })
+
+  it('본문은 화면에 들어온 줄부터 하나씩 받는다 — 앞 줄을 받는 동안 다음 줄은 기다리고, 차례 전에 화면 밖으로 나간 줄은 건너뛴다', async () => {
+    serve({ hold: true })
+    const { wrapper } = await mountReader()
+    await toggleAll(wrapper).trigger('click')
+    await flushPromises()
+
+    await show(wrapper, ['c1', 'c2', 'c3'])
+    expect(detailGets()).toEqual(['c1'])
+
+    // c3 는 차례가 오기 전에 화면 밖으로 나갔다
+    await show(wrapper, ['c3'], false)
+    details.get('c1')?.resolve(ok(null))
+    await flushPromises()
+    expect(detailGets()).toEqual(['c1', 'c2'])
+    details.get('c2')?.resolve(ok(null))
+    await flushPromises()
+    expect(detailGets()).toEqual(['c1', 'c2'])
+    expect(rowOf(wrapper, 'c1').find('iframe').exists()).toBe(true)
+    expect(rowOf(wrapper, 'c3').find('iframe').exists()).toBe(false)
+
+    // 다시 들어오면 받는다 · 한 번 받은 줄은 다시 들어와도 다시 받지 않는다
+    await show(wrapper, ['c3', 'c1'])
+    expect(detailGets()).toEqual(['c1', 'c2', 'c3'])
+  })
+
+  it('읽음은 본문이 화면에 보인 메일만 — 받는 사이 화면 밖으로 나갔으면 들어올 때 읽음으로', async () => {
+    serve({ hold: true })
+    const { wrapper, store } = await mountReader()
+    await toggleAll(wrapper).trigger('click')
+    await flushPromises()
+
+    await show(wrapper, ['c2'])
+    expect(detailGets()).toEqual(['c2'])
+    // 받는 사이 내려서 화면 밖으로
+    await show(wrapper, ['c2'], false)
+    details.get('c2')?.resolve(ok(null))
+    await flushPromises()
+    expect(patches()).toEqual([])
+    expect(store.messages.find((message) => message.id === 'c2')?.isRead).toBe(false)
+
+    await show(wrapper, ['c2'])
+    expect(patches()).toEqual(['/messages/c2'])
+    expect(store.messages.find((message) => message.id === 'c2')?.isRead).toBe(true)
+
+    // 다시 드나들어도 다시 묻지 않는다
+    await show(wrapper, ['c2'], false)
+    await show(wrapper, ['c2'])
+    expect(patches()).toEqual(['/messages/c2'])
+  })
+
+  it('하나씩 다 펼쳐도 [모두 접기] — 하나라도 접으면 다시 [모두 펼치기]', async () => {
+    serve()
+    const { wrapper } = await mountReader()
+
+    for (const id of ['c1', 'c2', 'c3', 'c5']) await rowOf(wrapper, id).get('[data-conversation-toggle]').trigger('click')
+    await flushPromises()
+    expect(toggleAll(wrapper).text()).toBe('모두 접기')
+
+    await rowOf(wrapper, 'c1').get('[data-conversation-toggle]').trigger('click')
+    expect(toggleAll(wrapper).text()).toBe('모두 펼치기')
+  })
+
+  it('[더 보기]로 더 받은 줄은 접힌 채로 오고 단추는 다시 [모두 펼치기]', async () => {
+    const filler = Array.from({ length: 95 }, (_, index) =>
+      summary(`p${index}`, { receivedAt: at(2026, 9, 1, 9, index % 60) }),
+    )
+    const later = summary('c9', { receivedAt: at(2026, 10, 9, 9, 59) })
+    serve({
+      conversation: ({ params }) =>
+        params.cursor ? page([later], null, null) : page([...filler, ...THREAD], 'next', null),
+    })
+    const { wrapper } = await mountReader()
+
+    await toggleAll(wrapper).trigger('click')
+    expect(toggleAll(wrapper).text()).toBe('모두 접기')
+
+    await wrapper.get('[data-conversation-more]').trigger('click')
+    await flushPromises()
+    expect(rowOf(wrapper, 'c9').get('[data-conversation-toggle]').attributes('aria-expanded')).toBe('false')
+    expect(rowOf(wrapper, 'c2').get('[data-conversation-toggle]').attributes('aria-expanded')).toBe('true')
+    expect(toggleAll(wrapper).text()).toBe('모두 펼치기')
+  })
+
+  it('펼칠 줄이 없으면(지금 메일만 받았고 나머지를 받는 중) [모두 펼치기]가 없다', async () => {
+    const rest = deferred()
+    serve({ conversation: ({ params }) => (params.cursor ? rest.promise : page([CURRENT], 'next', 3)) })
+    const { wrapper } = await mountReader()
+
+    expect(wrapper.find('[data-conversation]').exists()).toBe(true)
+    expect(wrapper.find('[data-conversation-toggle-all]').exists()).toBe(false)
+
+    rest.resolve(page([FIRST, SECOND], null, 3))
+    await flushPromises()
+    expect(toggleAll(wrapper).text()).toBe('모두 펼치기')
+  })
+
+  it('펼친 줄 머리 오른쪽에 [답장](펼침 단추와 따로 놓인 링크) — 접힌 줄 · 임시 저장본의 줄에는 없다', async () => {
+    serve()
+    const { wrapper } = await mountReader()
+
+    expect(rowOf(wrapper, 'c2').find('[data-conversation-head-reply]').exists()).toBe(false)
+    await rowOf(wrapper, 'c2').get('[data-conversation-toggle]').trigger('click')
+    await rowOf(wrapper, 'c5').get('[data-conversation-toggle]').trigger('click')
+    await flushPromises()
+
+    const reply = rowOf(wrapper, 'c2').get('[data-conversation-head-reply]')
+    expect(reply.text()).toBe('답장')
+    expect(reply.attributes('href')).toBe('/mail/compose?replyTo=c2')
+    // 단추 안에 넣지 않고 머리 틀 안에 나란히 둔다
+    expect(reply.element.closest('button')).toBeNull()
+    expect(reply.element.parentElement?.querySelector('[data-conversation-toggle]')).not.toBeNull()
+    // 아래쪽 [답장] · [이 메일만 열기]는 그대로
+    expect(rowOf(wrapper, 'c2').find('[data-conversation-reply]').exists()).toBe(true)
+    expect(rowOf(wrapper, 'c2').find('[data-conversation-open]').exists()).toBe(true)
+
+    expect(rowOf(wrapper, 'c5').find('[data-conversation-head-reply]').exists()).toBe(false)
+  })
+})
diff --git a/frontend/src/components/mail/MessageConversation.vue b/frontend/src/components/mail/MessageConversation.vue
index c7c78e4..f2ae0d8 100644
--- a/frontend/src/components/mail/MessageConversation.vue
+++ b/frontend/src/components/mail/MessageConversation.vue
@@ -11,11 +11,15 @@
 //   다시 받아 빠진 줄) 그 줄이 남았으면 그 줄의 펼침 단추로, 아니면 칸 제목(h3 — tabindex -1)으로. 받는 중이면 다 받을 때까지 기다리고,
 //   칸이 없어졌으면 읽기 화면에 맡긴다(settled — 본문으로). 초점이 칸 밖에 있었으면 건드리지 않는다
 // 받는 때(메일이 바뀜 · 쓰기 화면에서 돌아옴 · 메일함들의 통 수가 바뀜을 모아서)는 useConversationSync 가 정한다
+// - 칸 머리 오른쪽 [모두 펼치기](15단계 — 디자인 원본 Reader15 "6" · 36 글자 단추): 불러온 줄을 모두 펼치고 [모두 접기]가 된다(하나씩 다 펼쳐도).
+//   본문은 펼친 안이 화면에 들어오는 줄부터 하나씩 받는다(useConversationPanelVisibility → 스토어의 noteConversationPanelVisible).
+//   펼칠 줄이 없으면(지금 메일뿐 — 나머지를 받는 중) 단추가 없다
 import { computed, nextTick, ref, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
 import ConversationMessageRow from '@/components/mail/ConversationMessageRow.vue'
 import { useClock } from '@/composables/useClock'
+import { useConversationPanelVisibility } from '@/composables/useConversationPanelVisibility'
 import { useConversationSync } from '@/composables/useConversationSync'
 import { MAIL_CONVERSATION_TEXT } from '@/shared/constants/mail-conversation'
 import { formatCount, formatTraceCode } from '@/shared/utils/format'
@@ -77,6 +81,15 @@ function loadMore() {
   if (!mailStore.conversationLoadingMore) void mailStore.loadMoreConversation()
 }
 
+/** 펼칠 줄이 있다 — [모두 펼치기] · [모두 접기]를 둔다 */
+const canExpandAll = computed(() => mailStore.conversationExpandableIds.length > 0)
+
+/** [모두 펼치기] ↔ [모두 접기] — 하나라도 접혀 있으면 모두 펼친다 */
+function toggleAll() {
+  if (mailStore.conversationAllExpanded) mailStore.collapseAllConversation()
+  else mailStore.expandAllConversation()
+}
+
 // ── 초점 지키기 ─────────────────────────────────────────
 
 /** 다시 그릴 때 바뀌는 것 — 칸 · 안내 · [더 보기] · 줄 · 펼친 줄과 그 본문의 상태 */
@@ -146,6 +159,13 @@ watch(
   { flush: 'pre' },
 )
 
+// 펼친 안이 화면에 들어오고 나가는 것을 스토어에 알린다 — [모두 펼치기]의 본문은 화면에 들어온 줄부터 하나씩 (15단계)
+useConversationPanelVisibility({
+  root: sectionRef,
+  watchKey: () => renderKey.value,
+  onChange: (id, inView) => mailStore.noteConversationPanelVisible(id, inView),
+})
+
 // 받지 못했을 때만 읽어 준다 — 비웠다가 넣어 다시 못 받아도 다시 읽게
 watch(failed, async (isFailed) => {
   announcement.value = ''
@@ -163,14 +183,25 @@ watch(failed, async (isFailed) => {
     aria-labelledby="reader-conversation-title"
     data-conversation
   >
-    <h3
-      id="reader-conversation-title"
-      ref="titleRef"
-      class="conversation__title"
-      tabindex="-1"
-    >
-      {{ title }}
-    </h3>
+    <div class="conversation__head">
+      <h3
+        id="reader-conversation-title"
+        ref="titleRef"
+        class="conversation__title"
+        tabindex="-1"
+      >
+        {{ title }}
+      </h3>
+      <button
+        v-if="canExpandAll"
+        type="button"
+        class="conversation__toggle-all"
+        data-conversation-toggle-all
+        @click="toggleAll"
+      >
+        {{ mailStore.conversationAllExpanded ? MAIL_CONVERSATION_TEXT.collapseAll : MAIL_CONVERSATION_TEXT.expandAll }}
+      </button>
+    </div>
     <ol class="conversation__list">
       <ConversationMessageRow
         v-for="row in rows"
@@ -245,6 +276,33 @@ watch(failed, async (isFailed) => {
   border-top: var(--border-width) solid var(--color-border-subtle);
 }
 
+/* 칸 머리 — 제목 · 오른쪽 [모두 펼치기] (디자인 원본 Reader15 "6" — 높이 36) */
+.conversation__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-8);
+  min-height: var(--size-notice-action);
+}
+
+/* [모두 펼치기] · [모두 접기] — 36 글자 단추, 펼친 줄 머리의 [답장]과 같은 크기(안내 줄 단추의 밀도 예외 재사용). 글자 끝을 상자 끝에 맞춘다 */
+.conversation__toggle-all {
+  flex: 0 0 auto;
+  min-height: var(--size-notice-action);
+  margin-right: calc(var(--space-10) * -1);
+  padding: 0 var(--space-10);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-brand);
+  font-weight: 600;
+}
+
+.conversation__toggle-all:hover {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand-strong);
+}
+
 .conversation__title {
   margin: 0;
   outline-offset: var(--focus-ring-offset);
diff --git a/frontend/src/components/mail/MessageDeleteButton.vue b/frontend/src/components/mail/MessageDeleteButton.vue
index ce7c475..d693bcc 100644
--- a/frontend/src/components/mail/MessageDeleteButton.vue
+++ b/frontend/src/components/mail/MessageDeleteButton.vue
@@ -9,6 +9,7 @@
 // - 지운 뒤: 분할 보기는 다음 메일(없으면 이전 메일, 그것도 없으면 목록), 목록 보기는 목록으로 (useMessageRemoval 의 leaveRemoved).
 //   그사이 다른 목록 · 다른 메일로 옮겨 갔거나 서버가 그대로 두었으면 움직이지 않는다
 // - DELETE /api/messages/{id} 는 쓰지 않는다 (그사이 다른 창이 휴지통으로 옮긴 메일을 확인 없이 영구 삭제하게 된다)
+// - 읽기 칸이 좁으면 아이콘만 (15단계 — MailToolButton 의 collapsible · MessageReader 의 컨테이너 쿼리 — 「영구 삭제」는 이름이 길어 더 넓은 폭에서 접는다)
 import { computed, ref, watch } from 'vue'
 
 import ModalDialog from '@/components/feedback/ModalDialog.vue'
@@ -95,6 +96,7 @@ watch([held, permanent, () => props.message.id], () => {
     :label="permanent ? MAIL_BULK_TEXT.purge : MAIL_BULK_TEXT.delete"
     tone="danger"
     :disabled="working"
+    collapsible
     data-reader-delete
     @click="onClick"
   />
diff --git a/frontend/src/components/mail/MessageListItem.vue b/frontend/src/components/mail/MessageListItem.vue
index cbec462..6575b14 100644
--- a/frontend/src/components/mail/MessageListItem.vue
+++ b/frontend/src/components/mail/MessageListItem.vue
@@ -10,12 +10,15 @@
 // - 행을 누르면 지금처럼 메일을 연다. Ctrl(⌘)+클릭은 하나씩, Shift+클릭은 범위로 고른다 (새 탭 · 새 창으로 열지 않는다)
 // - 아직 보내지 않은 메일(9단계)은 고를 수 없다 — 고르기 상자는 꺼진 모양(aria-disabled · 까닭은 title), Ctrl · Shift + 클릭도 고르지 않는다
 //   (옮기거나 지워도 엔진은 그 시각에 보낸다 — 열어서 취소하거나 삭제한다. 스토어도 건너뛴다 — selection.ts)
+// 끌어다 놓기(15단계 — 디자인 원본 ListDrag15): 줄을 메일함 패널로 끌어 옮긴다 — 고른 줄이면 고른 것 모두, 아니면 이 줄만.
+//   보내기를 기다리는 메일의 줄은 끌 수 없다. 줄의 링크가 끌어 가던 메일 주소 대신 우리 끌기 자료만 싣는다 (useMailRowDrag)
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import AppIcon from '@/components/AppIcon.vue'
 import HighlightedText from '@/components/mail/HighlightedText.vue'
 import MailCheckbox from '@/components/mail/MailCheckbox.vue'
+import { useMailRowDrag } from '@/composables/useMailDrag'
 import { MAIL_BULK_TEXT, MAIL_NO_SUBJECT } from '@/shared/constants/mail'
 import { SEND_LATER_TEXT } from '@/shared/constants/mail-send-later'
 import type { MailboxRole, MessageListItem } from '@/shared/types/mail'
@@ -60,6 +63,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const drag = useMailRowDrag()
+
 const who = computed(() => rowWho(props.message, { role: props.role, mixed: props.mixed, view: 'split' }))
 const subject = computed(() => props.message.subject || MAIL_NO_SUBJECT)
 /** 붙잡아 둔 발송이면 "예약 · …" · "보내는 중" (9단계) */
@@ -104,7 +109,10 @@ function onMouseDown(event: MouseEvent) {
       },
     ]"
     :data-row-id="message.id"
+    :draggable="!held"
     @mousedown="onMouseDown"
+    @dragstart="(event: DragEvent) => drag.start(event, message.id)"
+    @dragend="drag.end"
   >
     <MailCheckbox
       class="message-row__check"
diff --git a/frontend/src/components/mail/MessageMoreMenu.vue b/frontend/src/components/mail/MessageMoreMenu.vue
index 53e29fb..3dcdd8e 100644
--- a/frontend/src/components/mail/MessageMoreMenu.vue
+++ b/frontend/src/components/mail/MessageMoreMenu.vue
@@ -16,7 +16,8 @@
 // 메뉴를 열 때 필터를 아직 받지 않았으면 받아 본다(알리지 않는다 — 모르는 동안은 켜 두고, 설정 화면이 다시 본다)
 // 차단: 사내 직원(사내 도메인) · 내 주소에는 항목이 없다. 이미 막았으면(주소 또는 도메인) 「보낸 사람 차단 풀기」(바로 푼다 + [되돌리기]),
 // 아니면 「보낸 사람 차단」 → 확인 창(MessageBlockDialog). 500개면 끄고 까닭을 아래에. 차단 목록은 메일 화면에 들어올 때 받아 두고,
-// 메뉴를 열 때 못 받았으면 다시 받아 본다(알리지 않는다). 막으며 이 메일을 스팸메일함으로 옮겼으면 삭제처럼 다음 메일 · 목록으로 간다
+// 메뉴를 열 때 못 받았으면 다시 받아 본다(알리지 않는다). 막으며 이 메일을 스팸메일함으로 옮겼으면 삭제처럼 다음 메일 · 목록으로 간다 —
+// 받은편지함의 그 보낸 사람 메일도 옮기기로 했으면(15단계 새 칸) 다음 메일을 열지 않고 목록으로(분할 보기는 읽기 칸이 빈다)
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -44,12 +45,13 @@ import { isHeldMessage } from '@/shared/utils/pending-send'
 import { useAuthStore } from '@/stores/auth.store'
 import { useContactsStore } from '@/stores/contacts.store'
 import { useMailBlockStore } from '@/stores/mail-block.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
 import { useMailFilterStore } from '@/stores/mail-filter.store'
 import { useMailStore } from '@/stores/mail.store'
 
 interface Props {
   message: MessageDetail
-  /** split: 차단하며 옮기면 다음 메일을 연다 · list: 목록으로 */
+  /** split: 차단하며 옮기면 다음 메일을 연다(받은편지함 정리를 켰으면 목록으로) · list: 목록으로 */
   layout?: 'split' | 'list'
 }
 
@@ -63,6 +65,8 @@ const mailStore = useMailStore()
 const filterStore = useMailFilterStore()
 const contactsStore = useContactsStore()
 const blockStore = useMailBlockStore()
+/** 차단 창의 새 칸을 지금 고를 수 없는 까닭 — 이 탭에서 받은편지함을 정리하거나 스팸메일함을 비우는 중 (15단계 — startBlock) */
+const blockRunStore = useMailBlockRunStore()
 const contactDialog = useMailContactDialog()
 const print = useMailPrint()
 const senderBlock = useSenderBlock()
@@ -93,6 +97,11 @@ const blockable = computed(
 /** 이미 막고 있는 차단 (주소 또는 도메인) */
 const senderBlockEntry = computed(() => (blockable.value ? blockStore.blockOf(sender.value) : null))
 const inJunk = computed(() => removal.isInJunk(props.message))
+/** 받은편지함의 메일이다 — 차단 창의 새 칸을 켜면 「이 메일도 …」를 켠 채 잠근다 (15단계) */
+const inInbox = computed(() => {
+  const inboxId = mailStore.mailboxByRole('inbox')?.id
+  return inboxId !== undefined && props.message.mailboxIds.includes(inboxId)
+})
 
 const items = computed<EditorMenuItem[]>(() => {
   const list: EditorMenuItem[] = [
@@ -206,17 +215,20 @@ function focusButton() {
 
 /**
  * 차단 확인 창의 [차단] — 창을 닫고 막는다. 이 메일을 스팸메일함으로 옮겼으면 삭제처럼 다음 메일 · 목록으로.
+ * 받은편지함의 그 보낸 사람 메일도 옮기기로 했으면(cleanInbox — 15단계) 정리는 알림이 이어 보인다(기다리지 않는다).
+ * 그때는 다음 메일을 열지 않고 목록으로 간다 — 다음 메일이 같은 보낸 사람의 것이면 열자마자 읽음이 되고, 곧 정리가 스팸메일함으로 옮겨
+ * 받은편지함 주소에 그 메일이 남는다(2026-11-09 실사용 시험). 목록은 정리가 끝나면 다시 맞춘다(useSenderBlockRun).
  * 기다리는 사이 다른 목록 · 다른 메일로 옮겨 갔으면(stale · leaveRemoved 의 stillShowing) 움직이지 않는다
  */
-async function onBlock(target: string, moveToJunk: boolean) {
+async function onBlock(target: string, moveToJunk: boolean, cleanInbox: boolean) {
   blockDialogOpen.value = false
   const message = props.message
   const source = mailStore.listSource
   const nextId = mailStore.neighborAfterRemoval(message.id)
-  const outcome = await senderBlock.block(message, target, moveToJunk)
+  const outcome = await senderBlock.block(message, target, moveToJunk, cleanInbox)
   if (!outcome.moved || outcome.stale) return
   const removed = !mailStore.isListedMessage(message.id)
-  await removal.leaveRemoved({ removed, nextId: removed ? nextId : null }, source, props.layout, message.id)
+  await removal.leaveRemoved({ removed, nextId: removed && !cleanInbox ? nextId : null }, source, props.layout, message.id)
 }
 
 // 다른 메일로 바뀌면 지난 보낸 사람의 결과를 버린다 (확인 창도 닫는다 — 다른 메일의 보낸 사람을 막지 않게)
@@ -269,6 +281,8 @@ watch(
       :open="blockDialogOpen"
       :sender-email="sender"
       :in-junk="inJunk"
+      :in-inbox="inInbox"
+      :cleanup-block="blockRunStore.startBlock"
       @confirm="onBlock"
       @cancel="blockDialogOpen = false"
     />
diff --git a/frontend/src/components/mail/MessageMoveButton.vue b/frontend/src/components/mail/MessageMoveButton.vue
new file mode 100644
index 0000000..bf7c069
--- /dev/null
+++ b/frontend/src/components/mail/MessageMoveButton.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// 읽기 화면의 「이동 ▾」 — 열린 메일 한 통을 고른 메일함으로 (15단계 — 디자인 원본 Reader15 "1 · 2 · 3", README "15단계")
+// - 자리: 답장 · 전체 답장 · 전달 | 이동 ▾ · 스팸 신고 · 삭제 · ⋯ — 메일이 어디로 가는지를 한 묶음에 둔다
+// - 메뉴는 목록 도구 줄의 [이동 ▾]와 같은 부품 · 같은 목록(mail-move-menu.ts): 메일함 패널처럼 들여 쓴 나무에서 그 메일이 든 메일함
+//   (검색 결과에서 연 메일도 그 메일이 든 메일함) · 임시보관함 · 휴지통을 뺀다. 그 메일이 든 메일함에 하위 메일함이 있으면 고를 수 없는
+//   흐린 줄로 남기고 이름 아래에 "이 메일이 있는 메일함". 휴지통으로는 [삭제]로 옮긴다
+// - 옮긴 뒤는 [삭제]와 같은 길: 분할 보기는 다음 메일, 목록 보기는 목록으로 + "메일 1통을 거래처 › 2025로 옮겼습니다." + [되돌리기]
+//   (같은 이름이 다른 곳에도 있을 때만 위 메일함 이름 — useMailMoveFeedback). 스팸메일함으로 옮기면 [스팸 신고], 스팸메일함에서 꺼내면 [스팸 아님]과 같다
+// - 보내기를 기다리는 메일(보내는 중 · 예약)에는 없다 — 읽기 화면이 그리지 않는다(취소해야만 보낸편지함을 떠난다)
+// - 키보드는 목록의 [이동 ▾]와 같다: Enter · Space · 아래 화살표로 열면 첫 항목에 초점, Esc 는 메뉴만 닫고 이 단추로 돌아간다.
+//   마우스로 열면 메뉴 자체에 초점(EditorPopup). 메뉴가 화면 밖으로 넘치면 단추 오른쪽 끝에 맞춘다(EditorPopup 의 좌우 바꾸기)
+// - 읽기 칸이 좁으면 이름을 숨기고 아이콘 + ▾ 만(MailToolButton 의 collapsible — MessageReader 의 컨테이너 쿼리)
+import { computed, ref } from 'vue'
+
+import EditorMenu from '@/components/mail/editor/EditorMenu.vue'
+import type { EditorMenuItem } from '@/components/mail/editor/editor-menu'
+import MailToolButton from '@/components/mail/MailToolButton.vue'
+import { moveMenuItems } from '@/components/mail/mail-move-menu'
+import { useMessageRemoval } from '@/composables/useMessageRemoval'
+import { MAIL_BULK_TEXT } from '@/shared/constants/mail'
+import type { MessageSummary } from '@/shared/types/mail'
+import { hasMoveTarget, mailMoveTargets } from '@/shared/utils/mail-move-targets'
+import { useMailStore } from '@/stores/mail.store'
+
+interface Props {
+  message: MessageSummary
+  /** split: 옮기면 다음 메일을 연다 · list: 옮기면 목록으로 */
+  layout: 'split' | 'list'
+}
+
+const props = defineProps<Props>()
+
+const mailStore = useMailStore()
+const removal = useMessageRemoval()
+
+const buttonRef = ref<InstanceType<typeof MailToolButton> | null>(null)
+const open = ref<boolean>(false)
+/** 키보드로 열었다 — 첫 항목에 초점 */
+const byKeyboard = ref<boolean>(false)
+const working = ref<boolean>(false)
+
+const trigger = computed<HTMLElement | null>(() => buttonRef.value?.element ?? null)
+/** 옮길 곳 — 그 메일이 든 메일함은 빼거나(하위가 있으면) 고를 수 없는 줄로 */
+const targets = computed(() => mailMoveTargets(mailStore.mailboxes, new Set(props.message.mailboxIds)))
+const items = computed<EditorMenuItem[]>(() => moveMenuItems(targets.value, MAIL_BULK_TEXT.moveHere))
+/** 옮길 곳이 하나도 없으면(메일함 목록을 아직 못 받음) 그리지 않는다 */
+const available = computed(() => hasMoveTarget(targets.value))
+
+function openMenu(keyboard: boolean) {
+  if (working.value || !available.value) return
+  byKeyboard.value = keyboard
+  open.value = true
+}
+
+function onClick(event: MouseEvent) {
+  if (open.value) {
+    open.value = false
+    return
+  }
+  // detail 0 — Enter · Space 로 눌렀다
+  openMenu(event.detail === 0)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'ArrowDown' || open.value) return
+  event.preventDefault()
+  openMenu(true)
+}
+
+function onClose(restoreFocus: boolean) {
+  open.value = false
+  if (restoreFocus) trigger.value?.focus()
+}
+
+async function onSelect(id: string) {
+  const target = targets.value.find((row) => row.mailbox.id === id && !row.disabled)
+  if (!target || working.value) return
+  open.value = false
+  trigger.value?.focus()
+  const message = props.message
+  const source = mailStore.listSource
+  working.value = true
+  try {
+    const outcome = await removal.moveTo(message, target.mailbox)
+    await removal.leaveRemoved(outcome, source, props.layout, message.id)
+  } finally {
+    working.value = false
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="available"
+    class="reader-move"
+  >
+    <MailToolButton
+      ref="buttonRef"
+      icon="folder-move"
+      :label="MAIL_BULK_TEXT.move"
+      collapsible
+      menu
+      aria-haspopup="menu"
+      :aria-expanded="open"
+      :disabled="working"
+      data-reader-move
+      @click="onClick"
+      @keydown="onKeydown"
+    />
+    <EditorMenu
+      v-if="open"
+      class="reader-move__menu"
+      :label="MAIL_BULK_TEXT.moveMenu"
+      :items="items"
+      :trigger="trigger"
+      :focus-content="!byKeyboard"
+      @select="onSelect"
+      @close="onClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* 메뉴는 이 단추 바로 아래 — 도구 줄 아래 선 밑에서 연다 (EditorPopup) */
+.reader-move {
+  position: relative;
+  display: inline-flex;
+}
+
+/* 옮길 메일함 메뉴 — 목록의 [이동 ▾]와 같은 폭 (MailBulkMoveButton) */
+.reader-move__menu {
+  width: max-content;
+  min-width: 12.5rem;
+  /* 좁은 화면에서는 단추의 어느 끝에 맞춰도 화면 안에 들게 — 폭 360 이면 280 까지 */
+  max-width: min(20rem, calc(100vw - 5rem));
+  overflow-wrap: anywhere;
+}
+</style>
diff --git a/frontend/src/components/mail/MessageReader.sendnow-block.spec.ts b/frontend/src/components/mail/MessageReader.sendnow-block.spec.ts
new file mode 100644
index 0000000..75d4039
--- /dev/null
+++ b/frontend/src/components/mail/MessageReader.sendnow-block.spec.ts
@@ -0,0 +1,623 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { Mailbox, MessageDetail, MessagesPatch, MessageSummary } from '@/shared/types/mail'
+import type { MailListSource } from '@/shared/utils/mail-list-source'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailFilterRunStore } from '@/stores/mail-filter-run.store'
+import { useMailSettingsStore } from '@/stores/mail-settings.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore } from '@/stores/toast.store'
+import { fail, flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest, type MockResult } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import MessageReader from './MessageReader.vue'
+
+// 읽기 화면의 15단계 — 예약 안내 줄 [지금 보내기] · 보낸 사람 차단 창의 「받은편지함에 있는 이 보낸 사람의 메일도 …」
+// (디자인 원본 Reader15 "지금 보내기" · Mailbox15 "보낸 사람 차단 창" · 계약 2절 "보내기 취소 · 예약 발송" · "보낸 사람 차단")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const INBOX: Mailbox = { id: 'inbox', name: '받은편지함', role: 'inbox', parentId: null, sortOrder: 0, totalCount: 120, unreadCount: 0 }
+const SENT: Mailbox = { ...INBOX, id: 'sent', name: '보낸편지함', role: 'sent', totalCount: 2 }
+const DRAFTS: Mailbox = { ...INBOX, id: 'drafts', name: '임시보관함', role: 'drafts', totalCount: 0 }
+const JUNK: Mailbox = { ...INBOX, id: 'junk', name: '스팸메일함', role: 'junk', totalCount: 0 }
+const TRASH: Mailbox = { ...INBOX, id: 'trash', name: '휴지통', role: 'trash', totalCount: 0 }
+const MAILBOXES = [INBOX, SENT, DRAFTS, JUNK, TRASH]
+
+const NEWSLETTER: MessageDetail = {
+  id: 'm1',
+  threadId: 't1',
+  mailboxIds: ['inbox'],
+  from: { name: '클라우드 브리프', email: 'news@cloudbrief.example' },
+  to: [USER],
+  subject: '[클라우드 브리프] 11월 둘째 주',
+  preview: '',
+  receivedAt: '2026-11-09T00:00:00Z',
+  isRead: true,
+  isFlagged: false,
+  hasAttachment: false,
+  size: 100,
+  pendingSend: null,
+  cc: [],
+  bcc: [],
+  replyTo: [],
+  sentAt: null,
+  messageId: null,
+  references: [],
+  htmlBody: null,
+  textBody: '이번 주 소식입니다.',
+  hasBlockedImages: false,
+  imagesShown: false,
+  attachments: [],
+}
+const SEND_AT = '2026-11-10T00:00:00.000Z'
+/** 내가 예약한 메일 — 보낸편지함 · 예약됨 */
+const SCHEDULED: MessageDetail = {
+  ...NEWSLETTER,
+  id: 's1',
+  mailboxIds: ['sent'],
+  from: USER,
+  to: [{ name: '이도윤', email: 'doyun.lee@arasystem.it.kr' }],
+  subject: '11월 셋째 주 배포 일정 확인 부탁드립니다',
+  pendingSend: { kind: 'scheduled', sendAt: SEND_AT },
+}
+
+function deferred() {
+  let resolve: (result: MockResult) => void = () => undefined
+  const promise = new Promise<MockResult>((settle) => {
+    resolve = settle
+  })
+  return { promise, resolve }
+}
+
+interface MountOptions {
+  message?: MessageDetail
+  source?: MailListSource
+  layout?: 'split' | 'list'
+  extra?: (request: MockRequest) => MockResult | Promise<MockResult> | undefined
+}
+
+describe('MessageReader — 15단계 지금 보내기 · 차단할 때 받은 메일 옮기기', () => {
+  let pinia: Pinia
+  let requests: MockRequest[]
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().startSession(USER)
+    vi.spyOn(window, 'open').mockImplementation(() => null)
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) {
+      if (!wrapper.vm.$.isUnmounted) wrapper.unmount()
+    }
+    vi.restoreAllMocks()
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  async function mountWith(options: MountOptions = {}) {
+    const message = options.message ?? NEWSLETTER
+    const source = options.source ?? { kind: 'mailbox', mailboxId: message.mailboxIds[0] ?? 'inbox' }
+    requests = installMockApi((request) => {
+      const handled = options.extra?.(request)
+      if (handled) return handled
+      if (request.url === '/mail-filters') return ok({ rules: [], version: 'v1', isActive: true })
+      if (request.url === '/contacts') return ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } })
+      if (request.url === '/mail-blocks' && request.method === 'GET') return ok({ senders: [], isActive: true })
+      if (request.url === '/mail-blocks' && request.method === 'POST') {
+        return ok({ address: (request.data as { address: string }).address, blockedAt: '2026-11-09T05:00:00.000Z' }, 201)
+      }
+      if (request.url === '/mailboxes') return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: 5 } })
+      if (request.url === '/messages' && request.method === 'GET') {
+        return ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } })
+      }
+      if (request.url === '/messages') return ok({ updatedIds: (request.data as MessagesPatch).ids, failedIds: [] })
+      if (request.url === '/scheduled-messages') {
+        return ok({ items: [{ ...SCHEDULED, id: 'm2' }], pageInfo: { hasNext: false, nextCursor: null, total: 1 } })
+      }
+      return ok({ usedBytes: 0, limitBytes: null, attachmentMaxBytes: 1, attachmentTotalMaxBytes: 1 })
+    })
+    const store = useMailStore()
+    store.mailboxes = MAILBOXES
+    store.listSource = source
+    store.messages = [message, { ...message, id: 'm2', subject: '다음 메일', pendingSend: message.pendingSend }] as MessageSummary[]
+    store.pageInfo = { hasNext: false, nextCursor: null, total: 2 }
+    store.listStatus = 'ready'
+    store.selected = message
+    store.selectedId = message.id
+    store.selectedStatus = 'ready'
+    const router = createTestRouter()
+    const listPath = source.kind === 'scheduled' ? '/mail/scheduled' : `/mail/${message.mailboxIds[0] ?? 'inbox'}`
+    await router.push(listPath)
+    await router.push(`${listPath}/${message.id}`)
+    await router.isReady()
+    const wrapper = mount(MessageReader, {
+      props: { layout: options.layout ?? 'split' },
+      global: { plugins: [pinia, router] },
+      attachTo: document.body,
+    })
+    mounted.push(wrapper)
+    await flushPromises()
+    return { wrapper, router, store }
+  }
+
+  const releases = () => requests.filter((request) => request.method === 'POST' && request.url.endsWith('/release'))
+  const toasts = () => useToastStore().toasts
+
+  /** 설정 › 보내기 취소 10초를 받아 두었다 (메일 화면에 들어올 때 받는다 — MailLayout) */
+  function knowUndoSeconds() {
+    const settings = useMailSettingsStore()
+    settings.settings = { undoSendSeconds: 10, externalImages: 'ask', groupByConversation: false }
+    settings.status = 'ready'
+  }
+
+  describe('예약 안내 줄 [지금 보내기]', () => {
+    it('POST …/release(본문 없음) → "메일을 보냈습니다." + [보내기 취소](설정한 초로 센 마감) · 예약됨에서 빠지고 다음 예약 메일 · 예약됨 수를 다시 묻는다', async () => {
+      knowUndoSeconds()
+      const { wrapper, router, store } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'scheduled' },
+        extra: (request) =>
+          request.url === '/scheduled-messages/s1/release'
+            ? ok({ id: 's1', rejectedRecipients: [], pendingSend: { kind: 'undo', sendAt: new Date(Date.now() + 10_000).toISOString() } })
+            : undefined,
+      })
+      const countsBefore = requests.filter((request) => request.url === '/scheduled-messages').length
+
+      await wrapper.get('[data-scheduled-send]').trigger('click')
+      await flushPromises()
+
+      expect(releases().map((request) => [request.url, request.data])).toEqual([['/scheduled-messages/s1/release', undefined]])
+      expect(store.messages.map((message) => message.id)).toEqual(['m2'])
+      expect(router.currentRoute.value.fullPath).toBe('/mail/scheduled/m2')
+      expect(requests.filter((request) => request.url === '/scheduled-messages').length).toBeGreaterThan(countsBefore)
+      const [toast] = toasts()
+      expect(toasts()).toHaveLength(1)
+      expect(toast).toMatchObject({ kind: 'success', message: '메일을 보냈습니다.', action: { label: '보내기 취소' } })
+      // 마감은 설정한 10초에서 1초를 뺀 때 — 이 PC 시계가 서버와 어긋나도 알림이 늘어나지 않게
+      const span = (toast?.expiresAt ?? 0) - (toast?.shownAt ?? 0)
+      expect(span).toBeGreaterThan(8_900)
+      expect(span).toBeLessThanOrEqual(9_000)
+    })
+
+    it('누르는 동안 세 단추를 함께 막는다(aria-disabled) — [지금 보내기]는 aria-busy, 다시 눌러도 한 번만 보낸다', async () => {
+      const pending = deferred()
+      const { wrapper } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'scheduled' },
+        extra: (request) => (request.url === '/scheduled-messages/s1/release' ? pending.promise : undefined),
+      })
+      const notice = wrapper.get('[data-notice="scheduled"]')
+
+      await notice.get('[data-scheduled-send]').trigger('click')
+      expect(notice.findAll('button').map((button) => button.attributes('aria-disabled'))).toEqual(['true', 'true', 'true'])
+      expect(notice.get('[data-scheduled-send]').attributes('aria-busy')).toBe('true')
+      await notice.get('[data-scheduled-send]').trigger('click')
+      await notice.get('[data-scheduled-cancel]').trigger('click')
+      await flushPromises()
+      expect(releases()).toHaveLength(1)
+      expect(requests.some((request) => request.method === 'DELETE')).toBe(false)
+
+      pending.resolve(ok({ id: 's1', rejectedRecipients: [], pendingSend: null }))
+      await flushPromises()
+    })
+
+    it('바로 보냈거나 예약 시각이 막 지나 이미 보낸 메일(pendingSend: null) — "메일을 보냈습니다." + [보낸편지함 보기]', async () => {
+      const { wrapper } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'scheduled' },
+        extra: (request) =>
+          request.url === '/scheduled-messages/s1/release' ? ok({ id: 's1', rejectedRecipients: [], pendingSend: null }) : undefined,
+      })
+
+      await wrapper.get('[data-scheduled-send]').trigger('click')
+      await flushPromises()
+
+      expect(toasts()).toMatchObject([
+        {
+          kind: 'success',
+          message: '메일을 보냈습니다.',
+          expiresAt: null,
+          action: { label: '보낸편지함 보기', to: { name: 'mail-mailbox', params: { mailboxId: 'sent' } } },
+        },
+      ])
+    })
+
+    it('받는 사람 일부가 받지 못하면 그 문장 — 보내기 취소를 기다리는 동안이면 [보내기 취소]와 함께', async () => {
+      const { wrapper } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'scheduled' },
+        extra: (request) =>
+          request.url === '/scheduled-messages/s1/release'
+            ? ok({
+                id: 's1',
+                rejectedRecipients: [{ email: 'nobody@arasystem.it.kr', reason: 'not-found' }],
+                pendingSend: { kind: 'undo', sendAt: new Date(Date.now() + 10_000).toISOString() },
+              })
+            : undefined,
+      })
+
+      await wrapper.get('[data-scheduled-send]').trigger('click')
+      await flushPromises()
+
+      expect(toasts()).toMatchObject([
+        { kind: 'error', message: '보냈지만 1명은 받지 못합니다. nobody@arasystem.it.kr (없는 주소)', action: { label: '보내기 취소' } },
+      ])
+    })
+
+    it('보낸편지함에서 연 예약 메일 — 그 자리에 남고 안내 줄만 사라진다(초점은 본문으로) · 붙잡힌 발송은 보내기 취소를 기다리는 것으로 바뀐다', async () => {
+      const sendAt = new Date(Date.now() + 10_000).toISOString()
+      const { wrapper, router, store } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'mailbox', mailboxId: 'sent' },
+        extra: (request) =>
+          request.url === '/scheduled-messages/s1/release'
+            ? ok({ id: 's1', rejectedRecipients: [], pendingSend: { kind: 'undo', sendAt } })
+            : undefined,
+      })
+
+      await wrapper.get('[data-scheduled-send]').trigger('click')
+      await flushPromises()
+
+      expect(router.currentRoute.value.fullPath).toBe('/mail/sent/s1')
+      expect(store.selected?.pendingSend).toEqual({ kind: 'undo', sendAt })
+      expect(wrapper.find('[data-notice="scheduled"]').exists()).toBe(false)
+      expect(document.activeElement).toBe(wrapper.get('iframe').element)
+    })
+
+    describe('보내지 못했거나 결과를 모를 때(503 MAIL_001 · SYS_001) — 그 메일을 다시 받아 붙잡은 발송 · 메일함으로 가른다', () => {
+      /** 예약은 풀렸는데 다시 내지 못한 메일 — 서버가 결과를 모를 때 남기는 꼴(보낸편지함 · 붙잡은 발송 없음) */
+      const UNSCHEDULED: MessageDetail = { ...SCHEDULED, pendingSend: null }
+      /** 보낸편지함 목록 — 다시 맞추면 그 메일은 남고(예약만 풀림) 다음 예약 메일도 있다 */
+      const sentList = (first: MessageDetail) =>
+        ok({ items: [first, { ...SCHEDULED, id: 'm2', subject: '다음 메일' }], pageInfo: { hasNext: false, nextCursor: null, total: 2 } })
+
+      it('임시보관함으로 되돌아갔으면 "지금 보내지 못해 임시보관함으로 옮겼습니다." + [임시보관함 보기] · 예약됨을 떠났으니 안내 줄을 내리고 다음 예약 메일', async () => {
+        const { wrapper, router } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'scheduled' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') return fail(503, 'MAIL_001')
+            // 엔진이 거절해 서버가 그 메일을 임시보관함으로 되돌렸다
+            if (request.method === 'GET' && request.url === '/messages/s1') {
+              return ok({ ...SCHEDULED, mailboxIds: ['drafts'], pendingSend: null })
+            }
+            return undefined
+          },
+        })
+        const listsBefore = requests.filter((request) => request.url === '/scheduled-messages').length
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        // 사전 문구(MAIL_001) 대신 화면 글 하나
+        expect(toasts()).toMatchObject([
+          {
+            kind: 'error',
+            message: '지금 보내지 못해 임시보관함으로 옮겼습니다.',
+            action: { label: '임시보관함 보기', to: { name: 'mail-mailbox', params: { mailboxId: 'drafts' } } },
+          },
+        ])
+        expect(router.currentRoute.value.fullPath).toBe('/mail/scheduled/m2')
+        expect(requests.filter((request) => request.url === '/scheduled-messages').length).toBeGreaterThan(listsBefore)
+      })
+
+      it('예약이 그대로면(예약을 거두기 전에 멈춤) "지금 보내지 못했습니다. 다시 시도해 주세요." + [다시 시도] · 안내 줄은 그대로 — [다시 시도]는 같은 요청을 보낸다', async () => {
+        let attempt = 0
+        const { wrapper, router, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'scheduled' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') {
+              attempt += 1
+              return attempt === 1 ? fail(503, 'MAIL_001') : ok({ id: 's1', rejectedRecipients: [], pendingSend: null })
+            }
+            // 예약 제출이 아직 기다린다 — 예약 표시 그대로
+            if (request.method === 'GET' && request.url === '/messages/s1') return ok(SCHEDULED)
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        const [failed] = toasts()
+        expect(toasts()).toMatchObject([
+          { kind: 'error', message: '지금 보내지 못했습니다. 다시 시도해 주세요.', action: { label: '다시 시도' } },
+        ])
+        expect(router.currentRoute.value.fullPath).toBe('/mail/scheduled/s1')
+        expect(store.selected?.pendingSend).toEqual(SCHEDULED.pendingSend)
+        expect(wrapper.find('[data-notice="scheduled"]').exists()).toBe(true)
+        expect(wrapper.get('[data-scheduled-send]').attributes('aria-disabled')).toBeUndefined()
+
+        const action = failed ? useToastStore().takeAction(failed.id) : null
+        if (!action || !('run' in action)) throw new Error('단추가 없다')
+        action.run()
+        await flushPromises()
+        expect(releases()).toHaveLength(2)
+        expect(toasts().map((toast) => toast.message)).toEqual(['메일을 보냈습니다.'])
+      })
+
+      it('예약만 풀렸으면(보낸편지함 · 기다리는 발송 없음 — 이미 나갔을 수 있다) 예약됨에서 연 메일: "보냈는지 확인하지 못했습니다 …" + [다시 시도] · 예약됨에서 빠지고 다음 예약 메일', async () => {
+        let attempt = 0
+        const { wrapper, router, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'scheduled' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') {
+              attempt += 1
+              return attempt === 1 ? fail(503, 'MAIL_001') : ok({ id: 's1', rejectedRecipients: [], pendingSend: null })
+            }
+            if (request.method === 'GET' && request.url === '/messages/s1') return ok(UNSCHEDULED)
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        const [failed] = toasts()
+        expect(toasts()).toMatchObject([
+          { kind: 'error', message: '메일을 보냈는지 확인하지 못했습니다. [다시 시도]를 누르면 아직 보내지 않았을 때만 보냅니다.', action: { label: '다시 시도' } },
+        ])
+        expect(store.messages.map((message) => message.id)).toEqual(['m2'])
+        expect(router.currentRoute.value.fullPath).toBe('/mail/scheduled/m2')
+        // 분할 보기 화면이 다음 메일을 연다 (이 시험은 읽기 화면만 띄운다)
+        store.selectedId = 'm2'
+
+        // [다시 시도]는 같은 요청 — 서버가 이어 낸다. 다른 메일을 보고 있으니 그 자리에 둔다
+        const action = failed ? useToastStore().takeAction(failed.id) : null
+        if (!action || !('run' in action)) throw new Error('단추가 없다')
+        action.run()
+        await flushPromises()
+        expect(releases()).toHaveLength(2)
+        expect(toasts().map((toast) => toast.message)).toEqual(['메일을 보냈습니다.'])
+        expect(router.currentRoute.value.fullPath).toBe('/mail/scheduled/m2')
+      })
+
+      it('예약만 풀렸으면 보낸편지함에서 연 메일도 안내 줄을 내린다 — 그 자리에 남고(목록에도 남는다) 초점은 본문으로', async () => {
+        const { wrapper, router, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'mailbox', mailboxId: 'sent' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') return fail(503, 'MAIL_001')
+            if (request.method === 'GET' && request.url === '/messages/s1') return ok(UNSCHEDULED)
+            if (request.method === 'GET' && request.url === '/messages') return sentList(UNSCHEDULED)
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        expect(toasts()).toMatchObject([
+          { kind: 'error', message: '메일을 보냈는지 확인하지 못했습니다. [다시 시도]를 누르면 아직 보내지 않았을 때만 보냅니다.', action: { label: '다시 시도' } },
+        ])
+        expect(router.currentRoute.value.fullPath).toBe('/mail/sent/s1')
+        expect(store.selected?.pendingSend).toBeNull()
+        expect(store.selected?.mailboxIds).toEqual(['sent'])
+        expect(store.messages.map((message) => message.id)).toEqual(['s1', 'm2'])
+        expect(wrapper.find('[data-notice="scheduled"]').exists()).toBe(false)
+        expect(document.activeElement).toBe(wrapper.get('iframe').element)
+      })
+
+      it('결과를 모르는 실패(504 SYS_001 — 앞단이 기다리다 끊음)도 같은 갈래 — 사전 문구 알림 없이 다시 받아 가른다', async () => {
+        const { wrapper, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'mailbox', mailboxId: 'sent' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') return fail(504, 'SYS_001')
+            if (request.method === 'GET' && request.url === '/messages/s1') return ok(UNSCHEDULED)
+            if (request.method === 'GET' && request.url === '/messages') return sentList(UNSCHEDULED)
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        expect(requests.filter((request) => request.method === 'GET' && request.url === '/messages/s1')).toHaveLength(1)
+        expect(toasts().map((toast) => toast.message)).toEqual(['메일을 보냈는지 확인하지 못했습니다. [다시 시도]를 누르면 아직 보내지 않았을 때만 보냅니다.'])
+        expect(store.selected?.pendingSend).toBeNull()
+        expect(wrapper.find('[data-notice="scheduled"]').exists()).toBe(false)
+      })
+
+      it('연결이 끊겼는데(SYS_001) 다시 받아 보니 다시 낸 발송이 보내기 취소를 기다리면 보낸 것과 같다 — "메일을 보냈습니다." + [보내기 취소]', async () => {
+        knowUndoSeconds()
+        const sendAt = new Date(Date.now() + 10_000).toISOString()
+        const { wrapper, router, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'scheduled' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') return 'network'
+            if (request.method === 'GET' && request.url === '/messages/s1') {
+              return ok({ ...SCHEDULED, pendingSend: { kind: 'undo', sendAt } })
+            }
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        expect(toasts()).toMatchObject([{ kind: 'success', message: '메일을 보냈습니다.', action: { label: '보내기 취소' } }])
+        expect(store.messages.map((message) => message.id)).toEqual(['m2'])
+        expect(router.currentRoute.value.fullPath).toBe('/mail/scheduled/m2')
+      })
+
+      it('그 메일을 다시 받지 못하면 보냈다 · 못 보냈다 · 되돌렸다고 하지 않는다 — "보냈는지 확인하지 못했습니다 …" + [다시 시도] · 안내 줄은 마지막으로 안 그대로', async () => {
+        const { wrapper, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'scheduled' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') return fail(503, 'MAIL_001')
+            if (request.method === 'GET' && request.url === '/messages/s1') return 'network'
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        expect(toasts()).toMatchObject([{ kind: 'error', message: '메일을 보냈는지 확인하지 못했습니다. [다시 시도]를 누르면 아직 보내지 않았을 때만 보냅니다.', action: { label: '다시 시도' } }])
+        expect(store.selected?.pendingSend).toEqual(SCHEDULED.pendingSend)
+        expect(wrapper.find('[data-notice="scheduled"]').exists()).toBe(true)
+      })
+
+      it('받는 사람이 모두 받지 않으면(400 MAIL_010 — 임시보관함으로) 지금처럼 사전 문구 · 예약 표시를 서버 기준으로 다시 맞춘다', async () => {
+        const { wrapper, store } = await mountWith({
+          message: SCHEDULED,
+          source: { kind: 'scheduled' },
+          extra: (request) => {
+            if (request.url === '/scheduled-messages/s1/release') return fail(400, 'MAIL_010')
+            if (request.method === 'GET' && request.url === '/messages/s1') {
+              return ok({ ...SCHEDULED, mailboxIds: ['drafts'], pendingSend: null })
+            }
+            return undefined
+          },
+        })
+
+        await wrapper.get('[data-scheduled-send]').trigger('click')
+        await flushPromises()
+
+        expect(toasts().map((toast) => toast.message)).toEqual([ERROR_CODE_MESSAGES.MAIL_010])
+        expect(store.selected?.pendingSend).toBeNull()
+        expect(wrapper.find('[data-notice="scheduled"]').exists()).toBe(false)
+      })
+    })
+
+    it('혹시 409 MAIL_014(이미 보냄)로 와도 오류가 아니다 — "메일을 보냈습니다."', async () => {
+      const { wrapper } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'scheduled' },
+        extra: (request) => (request.url === '/scheduled-messages/s1/release' ? fail(409, 'MAIL_014') : undefined),
+      })
+
+      await wrapper.get('[data-scheduled-send]').trigger('click')
+      await flushPromises()
+
+      expect(toasts().map((toast) => toast.message)).toEqual(['메일을 보냈습니다.'])
+    })
+
+    it('알림의 [보내기 취소]는 지금의 보내기 취소와 같다 — DELETE 로 취소하고 그 메일로 쓰기 화면', async () => {
+      knowUndoSeconds()
+      const { wrapper, router } = await mountWith({
+        message: SCHEDULED,
+        source: { kind: 'scheduled' },
+        extra: (request) => {
+          if (request.url === '/scheduled-messages/s1/release') {
+            return ok({ id: 's1', rejectedRecipients: [], pendingSend: { kind: 'undo', sendAt: new Date(Date.now() + 10_000).toISOString() } })
+          }
+          if (request.method === 'DELETE' && request.url === '/scheduled-messages/s1') return ok({ draftId: 's1' })
+          return undefined
+        },
+      })
+
+      await wrapper.get('[data-scheduled-send]').trigger('click')
+      await flushPromises()
+      const [toast] = toasts()
+      const action = toast ? useToastStore().takeAction(toast.id) : null
+      if (!action || !('run' in action)) throw new Error('단추가 없다')
+      action.run()
+      await flushPromises()
+
+      expect(requests.filter((request) => request.method === 'DELETE').map((request) => request.url)).toEqual([
+        '/scheduled-messages/s1',
+      ])
+      expect(router.currentRoute.value.fullPath).toBe('/mail/compose?draft=s1')
+    })
+  })
+
+  describe('차단 창 — 받은편지함에 있는 이 보낸 사람의 메일도 옮기기', () => {
+    async function openBlockDialog(wrapper: VueWrapper) {
+      await wrapper.get('[data-reader-more]').trigger('click')
+      await flushPromises()
+      await wrapper.findAll('[role="menuitem"]').at(-1)?.trigger('click')
+      await flushPromises()
+      return wrapper.get('[data-block-dialog]')
+    }
+
+    it('새 칸을 켜고 [차단] — 이 메일을 먼저 옮기고 받은편지함 정리를 시작한다 · 차단 알림 대신 알림 하나가 결과(이 메일까지 센 수) + [스팸메일함 보기] · 다음 메일 대신 목록으로', async () => {
+      const { wrapper, router } = await mountWith({
+        extra: (request) =>
+          request.url === '/mail-block-runs' ? ok({ scanned: 120, matched: 3, remaining: 0, cursor: null }) : undefined,
+      })
+
+      const dialog = await openBlockDialog(wrapper)
+      await dialog.get('[data-block-clean]').setValue(true)
+      // 받은편지함의 메일이라 첫 칸은 켠 채 잠긴다
+      expect(dialog.get('[data-block-move]').attributes('aria-disabled')).toBe('true')
+      await wrapper.get('[data-block-confirm]').trigger('click')
+      await flushPromises()
+
+      const order = requests
+        .filter((request) => request.method !== 'GET')
+        .map((request) => `${request.method} ${request.url}`)
+      expect(order).toEqual(['POST /mail-blocks', 'PATCH /messages', 'POST /mail-block-runs'])
+      expect(requests.find((request) => request.method === 'PATCH')?.data).toEqual({ ids: ['m1'], mailboxId: 'junk', isJunk: true })
+      expect(requests.find((request) => request.url === '/mail-block-runs')?.data).toEqual({
+        sender: 'news@cloudbrief.example',
+        cursor: null,
+      })
+      expect(toasts()).toMatchObject([
+        {
+          kind: 'success',
+          message: '‘news@cloudbrief.example’을(를) 차단하고 받은편지함의 메일 4통을 스팸메일함으로 옮겼습니다.',
+          action: { label: '스팸메일함 보기' },
+        },
+      ])
+      // 다음 메일을 열지 않고 목록으로 — 다음 메일이 같은 보낸 사람의 것이면 읽음이 된 채 곧 정리가 옮긴다 (분할 보기는 읽기 칸이 빈다)
+      expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
+      expect(requests.some((request) => request.method === 'GET' && request.url === '/messages/m2')).toBe(false)
+    })
+
+    it('목록 보기에서도 새 칸을 켠 차단은 목록으로 돌아간다 (새 칸을 켜지 않으면 지금처럼 다음 메일 — stage9 시험)', async () => {
+      const { wrapper, router } = await mountWith({
+        layout: 'list',
+        extra: (request) =>
+          request.url === '/mail-block-runs' ? ok({ scanned: 120, matched: 0, remaining: 0, cursor: null }) : undefined,
+      })
+
+      const dialog = await openBlockDialog(wrapper)
+      await dialog.get('[data-block-clean]').setValue(true)
+      await wrapper.get('[data-block-confirm]').trigger('click')
+      await flushPromises()
+
+      expect(requests.filter((request) => request.url === '/mail-block-runs')).toHaveLength(1)
+      expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
+    })
+
+    it('이 탭에서 필터를 적용하는 중이면 새 칸이 꺼져 있다 — 까닭 글', async () => {
+      const { wrapper } = await mountWith()
+      useMailFilterRunStore().running = true
+
+      const dialog = await openBlockDialog(wrapper)
+      expect(dialog.get('[data-block-clean]').attributes('aria-disabled')).toBe('true')
+      expect(dialog.get('#block-dialog-clean-note').text()).toBe('받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.')
+    })
+
+    it('이 탭에서 스팸메일함을 비우는 중이면 새 칸이 꺼져 있다 — 그 까닭 글, 비우기가 끝나면 다시 고를 수 있다', async () => {
+      const emptying = deferred()
+      const { wrapper, store } = await mountWith({
+        extra: (request) =>
+          request.method === 'DELETE' && request.url === '/mailboxes/junk/messages' ? emptying.promise : undefined,
+      })
+      const empty = store.runMailboxOperation('empty', JUNK, () => undefined)
+
+      const dialog = await openBlockDialog(wrapper)
+      expect(dialog.get('[data-block-clean]').attributes('aria-disabled')).toBe('true')
+      expect(dialog.get('#block-dialog-clean-note').text()).toBe('스팸메일함을 비우는 중이라 지금은 고를 수 없습니다.')
+
+      emptying.resolve(ok({ processed: 0, remaining: 0 }))
+      await empty
+      await flushPromises()
+      expect(dialog.get('[data-block-clean]').attributes('aria-disabled')).toBeUndefined()
+      expect(dialog.get('#block-dialog-clean-note').text()).toBe('옮긴 메일은 한꺼번에 되돌릴 수 없습니다.')
+    })
+  })
+})
diff --git a/frontend/src/components/mail/MessageReader.spec.ts b/frontend/src/components/mail/MessageReader.spec.ts
index 47bc107..aa58b83 100644
--- a/frontend/src/components/mail/MessageReader.spec.ts
+++ b/frontend/src/components/mail/MessageReader.spec.ts
@@ -565,7 +565,7 @@ describe('MessageReader 스팸 신고 · 원문 내려받기 (4단계 — 디자
 
   const patches = () => requests.filter((request) => request.method === 'PATCH').map((request) => request.data)
 
-  it('도구 줄 — 답장 · 전체 답장 · 전달 | 스팸 신고 · 삭제 · ⋯(더 보기)', async () => {
+  it('도구 줄 — 답장 · 전체 답장 · 전달 | 이동 ▾(15단계) · 스팸 신고 · 삭제 · ⋯(더 보기)', async () => {
     const { wrapper } = await mountWith()
     const toolbar = wrapper.get('.reader__toolbar')
 
@@ -573,6 +573,7 @@ describe('MessageReader 스팸 신고 · 원문 내려받기 (4단계 — 디자
       '답장',
       '전체 답장',
       '전달',
+      '이동',
       '스팸 신고',
       '삭제',
     ])
diff --git a/frontend/src/components/mail/MessageReader.stage15.spec.ts b/frontend/src/components/mail/MessageReader.stage15.spec.ts
new file mode 100644
index 0000000..cad31bd
--- /dev/null
+++ b/frontend/src/components/mail/MessageReader.stage15.spec.ts
@@ -0,0 +1,323 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+import { h } from 'vue'
+
+import type { Mailbox, MessageDetail, MessagesPatch, MessageSummary } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore } from '@/stores/toast.store'
+import { flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import MessageReader from './MessageReader.vue'
+import readerSource from './MessageReader.vue?raw'
+
+// 15단계 — 읽기 화면의 [이동 ▾] · 좁은 읽기 칸의 아이콘만 도구 줄 (디자인 원본 Reader15 "1 · 2 · 3")
+
+function box(id: string, role: Mailbox['role'], name: string, partial: Partial<Mailbox> = {}): Mailbox {
+  return { id, name, role, parentId: null, sortOrder: 0, totalCount: 3, unreadCount: 0, ...partial }
+}
+
+const MAILBOXES: Mailbox[] = [
+  box('inbox', 'inbox', '받은편지함'),
+  box('sent', 'sent', '보낸편지함'),
+  box('drafts', 'drafts', '임시보관함'),
+  box('junk', 'junk', '스팸메일함'),
+  box('trash', 'trash', '휴지통'),
+  box('clients', null, '거래처'),
+  box('clients-2025', null, '2025', { parentId: 'clients' }),
+  box('quotes', null, '견적', { parentId: 'clients' }),
+  box('project', null, '프로젝트', { sortOrder: 1 }),
+  box('project-2025', null, '2025', { parentId: 'project' }),
+]
+
+function message(id: string, mailboxId: string, partial: Partial<MessageSummary> = {}): MessageDetail {
+  return {
+    id,
+    threadId: `t-${id}`,
+    mailboxIds: [mailboxId],
+    from: { name: '(주)한빛솔루션 영업팀', email: 'sales@example.com' },
+    to: [{ name: '김아라', email: 'ara.kim@arasystem.it.kr' }],
+    subject: `2025년 유지보수 정산 자료 ${id}`,
+    preview: '',
+    receivedAt: '2026-11-09T01:42:00Z',
+    isRead: true,
+    isFlagged: false,
+    hasAttachment: false,
+    size: 100,
+    pendingSend: null,
+    cc: [],
+    bcc: [],
+    replyTo: [],
+    sentAt: null,
+    messageId: null,
+    references: [],
+    htmlBody: null,
+    textBody: '본문',
+    hasBlockedImages: false,
+    attachments: [],
+    ...partial,
+  }
+}
+
+describe('MessageReader — [이동 ▾] (15단계)', () => {
+  let pinia: Pinia
+  let requests: MockRequest[]
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated({ email: 'ara.kim@arasystem.it.kr', name: '김아라' })
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) wrapper.unmount()
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  async function mountReader(
+    options: { box?: string; layout?: 'split' | 'list'; open?: Partial<MessageSummary> } = {},
+  ) {
+    const boxId = options.box ?? 'inbox'
+    requests = installMockApi((request) => {
+      if (request.url === '/mailboxes') return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: 10 } })
+      if (request.url === '/messages' && request.method === 'GET') {
+        return ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } })
+      }
+      if (request.url === '/messages') return ok({ updatedIds: (request.data as MessagesPatch).ids, failedIds: [] })
+      return ok({ usedBytes: 0, limitBytes: null, attachmentMaxBytes: 1, attachmentTotalMaxBytes: 1 })
+    })
+    const store = useMailStore()
+    store.mailboxes = MAILBOXES
+    store.listSource = { kind: 'mailbox', mailboxId: boxId }
+    const open = message('m1', boxId, options.open)
+    store.messages = [open, message('m2', boxId)] as MessageSummary[]
+    store.pageInfo = { hasNext: false, nextCursor: null, total: 2 }
+    store.listStatus = 'ready'
+    store.selected = open
+    store.selectedId = open.id
+    store.selectedStatus = 'ready'
+    const router = createTestRouter()
+    await router.push(`/mail/${boxId}/m1`)
+    await router.isReady()
+    const wrapper = mount(MessageReader, {
+      props: { layout: options.layout ?? 'split' },
+      slots: options.layout === 'list' ? { 'toolbar-start': () => h('a', { href: `/mail/${boxId}` }, '목록으로') } : {},
+      global: { plugins: [pinia, router] },
+      attachTo: document.body,
+    })
+    mounted.push(wrapper)
+    return { wrapper, router, store }
+  }
+
+  const patches = () =>
+    requests.filter((request) => request.method === 'PATCH' && request.url === '/messages').map((request) => request.data)
+  const toastTexts = () => useToastStore().toasts.map((toast) => toast.message)
+
+  async function openMenu(wrapper: VueWrapper) {
+    await wrapper.get('[data-reader-move]').trigger('keydown', { key: 'ArrowDown' })
+    await flushPromises()
+    return wrapper.get('[role="menu"]')
+  }
+
+  async function pick(wrapper: VueWrapper, label: string) {
+    const menu = await openMenu(wrapper)
+    const item = menu.findAll('[role="menuitem"]').find((entry) => (entry.attributes('aria-label') ?? entry.text()) === label)
+    if (!item) throw new Error(`${label} 항목이 없다`)
+    await item.trigger('click')
+    await flushPromises()
+  }
+
+  it('[전달] 뒤 구분선 다음, [스팸 신고] 앞 — 메뉴를 여는 단추(▾)이고 키보드로 열면 첫 항목에 초점', async () => {
+    const { wrapper } = await mountReader()
+    const toolbar = wrapper.get('.reader__toolbar')
+    const move = wrapper.get('[data-reader-move]')
+
+    const order = [...toolbar.element.children].map((child) =>
+      child.matches('.toolbar-divider') ? '|' : (child.textContent ?? '').trim() || (child.getAttribute('aria-label') ?? ''),
+    )
+    expect(order.slice(0, 7)).toEqual(['답장', '전체 답장', '전달', '|', '이동', '스팸 신고', '삭제'])
+    expect(move.attributes('aria-haspopup')).toBe('menu')
+    expect(move.attributes('aria-expanded')).toBe('false')
+    expect(move.find('.tool-button__chevron').exists()).toBe(true)
+
+    const menu = await openMenu(wrapper)
+    expect(menu.attributes('aria-label')).toBe('옮길 메일함')
+    expect(document.activeElement).toBe(menu.find('[role="menuitem"]').element)
+    expect(move.attributes('aria-expanded')).toBe('true')
+  })
+
+  it('옮길 곳은 메일함 패널처럼 들여 쓴다 — 그 메일이 든 받은편지함 · 임시보관함 · 휴지통은 없고, 기본 메일함과 내 메일함 사이에 선', async () => {
+    const { wrapper } = await mountReader()
+    const menu = await openMenu(wrapper)
+
+    const entries = [...menu.element.children].map((child) => {
+      if (child.tagName === 'HR') return '---'
+      const depth = [...child.classList].find((name) => name.startsWith('menu__item--depth-'))
+      return `${child.textContent?.trim()}${depth ? ` (${depth.slice(-1)})` : ''}`
+    })
+    expect(entries).toEqual(['보낸편지함', '스팸메일함', '---', '거래처', '2025 (1)', '견적 (1)', '프로젝트', '2025 (1)'])
+    // 들여 쓴 메일함은 위 메일함부터 읽는다 — 같은 이름이 둘이어도 가른다
+    const labels = menu.findAll('[role="menuitem"]').map((item) => item.attributes('aria-label') ?? null)
+    expect(labels).toEqual([null, null, null, '거래처 안의 2025', '거래처 안의 견적', null, '프로젝트 안의 2025'])
+    // 앞에 패널과 같은 아이콘
+    expect(menu.findAll('[role="menuitem"] .menu__icon')).toHaveLength(7)
+  })
+
+  it('그 메일이 든 메일함에 하위 메일함이 있으면 고를 수 없는 흐린 줄 "이 메일이 있는 메일함" — 눌러도 옮기지 않는다', async () => {
+    const { wrapper } = await mountReader({ box: 'clients' })
+    const menu = await openMenu(wrapper)
+
+    const here = menu.findAll('[role="menuitem"]').find((item) => item.text().startsWith('거래처'))
+    expect(here?.attributes('aria-disabled')).toBe('true')
+    expect(here?.get('.menu__note').text()).toBe('이 메일이 있는 메일함')
+    expect(here?.attributes('aria-describedby')).toBe(here?.get('.menu__note').attributes('id'))
+    // 받은편지함이 처음으로 든다 (그 메일은 거래처에 있다)
+    expect(menu.findAll('[role="menuitem"]')[0]?.text()).toBe('받은편지함')
+
+    await here?.trigger('click')
+    await flushPromises()
+    expect(patches()).toEqual([])
+    expect(wrapper.find('[role="menu"]').exists()).toBe(true)
+  })
+
+  it('옮기면 [삭제]와 같은 길 — 다음 메일을 열고 "메일 1통을 거래처 › 2025로 옮겼습니다."(같은 이름이 또 있어서) + [되돌리기]', async () => {
+    const { wrapper, router, store } = await mountReader()
+
+    await pick(wrapper, '거래처 안의 2025')
+
+    expect(patches()).toEqual([{ ids: ['m1'], mailboxId: 'clients-2025' }])
+    expect(store.messages.map((item) => item.id)).toEqual(['m2'])
+    expect(router.currentRoute.value.fullPath).toBe('/mail/inbox/m2')
+    const [toast] = useToastStore().toasts
+    expect(toast?.message).toBe('메일 1통을 거래처 › 2025로 옮겼습니다.')
+
+    if (toast?.action && 'run' in toast.action) toast.action.run()
+    await flushPromises()
+    expect(patches().at(-1)).toEqual({ ids: ['m1'], mailboxId: 'inbox' })
+    expect(toastTexts().at(-1)).toBe('메일 1통을 받은편지함으로 되돌렸습니다.')
+  })
+
+  it('같은 이름이 하나뿐이면 이름만 — "메일 1통을 견적으로 옮겼습니다." · 목록 보기는 목록으로 돌아간다', async () => {
+    const { wrapper, router } = await mountReader({ layout: 'list' })
+
+    await pick(wrapper, '거래처 안의 견적')
+
+    expect(toastTexts()).toEqual(['메일 1통을 견적으로 옮겼습니다.'])
+    expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
+  })
+
+  it('스팸메일함을 고르면 [스팸 신고]와 같다 — 스팸 표시를 함께 보내고 [되돌리기]는 표시도 되돌린다', async () => {
+    const { wrapper } = await mountReader()
+
+    await pick(wrapper, '스팸메일함')
+
+    expect(patches()).toEqual([{ ids: ['m1'], mailboxId: 'junk', isJunk: true }])
+    const [toast] = useToastStore().toasts
+    expect(toast?.message).toBe('메일 1통을 스팸메일함으로 옮겼습니다.')
+    if (toast?.action && 'run' in toast.action) toast.action.run()
+    await flushPromises()
+    expect(patches().at(-1)).toEqual({ ids: ['m1'], mailboxId: 'inbox', isJunk: false })
+  })
+
+  it('스팸메일함에서 휴지통 밖으로 꺼내면 [스팸 아님]과 같다 — "스팸이 아닌 메일로 표시해 …로 옮겼습니다."', async () => {
+    const { wrapper } = await mountReader({ box: 'junk' })
+
+    await pick(wrapper, '프로젝트')
+
+    expect(patches()).toEqual([{ ids: ['m1'], mailboxId: 'project', isJunk: false }])
+    expect(toastTexts()).toEqual(['메일 1통을 스팸이 아닌 메일로 표시해 프로젝트로 옮겼습니다.'])
+  })
+
+  it('보내기를 기다리는 메일(보내는 중 · 예약)에는 [이동 ▾]가 없다 — [스팸 신고]처럼', async () => {
+    const sendAt = '2026-11-10T00:00:00Z'
+    const { wrapper } = await mountReader({ box: 'sent', open: { pendingSend: { kind: 'undo', sendAt } } })
+
+    expect(wrapper.find('[data-reader-move]').exists()).toBe(false)
+    expect(wrapper.find('[data-reader-spam]').exists()).toBe(false)
+  })
+})
+
+describe('MessageReader — 좁은 읽기 칸의 아이콘만 도구 줄 (15단계 — 디자인 원본 Reader15 "2")', () => {
+  let pinia: Pinia
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated({ email: 'ara.kim@arasystem.it.kr', name: '김아라' })
+    installMockApi(() => ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } }))
+  })
+
+  afterEach(() => {
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  async function mountWith(boxId: string, layout: 'split' | 'list' = 'split') {
+    const store = useMailStore()
+    store.mailboxes = MAILBOXES
+    store.listSource = { kind: 'mailbox', mailboxId: boxId }
+    const open = message('m1', boxId)
+    store.selected = open
+    store.selectedId = open.id
+    store.selectedStatus = 'ready'
+    const router = createTestRouter()
+    await router.push(`/mail/${boxId}/m1`)
+    await router.isReady()
+    return mount(MessageReader, { props: { layout }, global: { plugins: [pinia, router] } })
+  }
+
+  it('도구 줄의 이름 단추는 이름을 숨겨도 읽히게 aria-label · title 을 둔다 (숨기는 때는 읽기 칸 폭의 컨테이너 쿼리)', async () => {
+    const wrapper = await mountWith('inbox')
+
+    const buttons = wrapper.findAll('.reader__toolbar .tool-button--collapsible')
+    expect(buttons.map((button) => [button.attributes('aria-label'), button.attributes('title')])).toEqual([
+      ['답장', '답장'],
+      ['전체 답장', '전체 답장'],
+      ['전달', '전달'],
+      ['이동', '이동'],
+      ['스팸 신고', '스팸 신고'],
+      ['삭제', '삭제'],
+    ])
+    // 이름은 따로 감싼 글 — 좁으면 이것만 숨긴다
+    expect(buttons.map((button) => button.get('.tool-button__label').text())).toEqual([
+      '답장',
+      '전체 답장',
+      '전달',
+      '이동',
+      '스팸 신고',
+      '삭제',
+    ])
+  })
+
+  it('접는 폭을 가르는 모양 — 분할 보기 · 목록 보기, 「영구 삭제」가 있는 휴지통은 따로', async () => {
+    const inbox = await mountWith('inbox')
+    expect(inbox.get('.reader__toolbar').classes()).toEqual(['reader__toolbar', 'reader__toolbar--split'])
+    inbox.unmount()
+
+    const trash = await mountWith('trash')
+    expect(trash.get('.reader__toolbar').classes()).toContain('reader__toolbar--long')
+    expect(trash.get('[data-reader-delete]').text()).toBe('영구 삭제')
+    trash.unmount()
+
+    const list = await mountWith('inbox', 'list')
+    expect(list.get('.reader__toolbar').classes()).toContain('reader__toolbar--list')
+    list.unmount()
+  })
+
+  it('접는 폭 — 분할 보기 580 · 「영구 삭제」 605(실측 필요 폭 569.19 · 594.83 에 여유를 둔다), 목록 보기 850 · 875 (15단계 실사용 시험)', () => {
+    // jsdom 은 컨테이너 쿼리를 계산하지 않는다 — 원본의 기준을 읽는다 (px = rem × 16)
+    const queries = [...readerSource.matchAll(/@container reader-tools \(width < ([\d.]+)rem\) \{\s*([^\s{]+)/g)].map(
+      ([, rem = '', selector = '']) => [Number(rem) * 16, selector],
+    )
+    expect(queries).toEqual([
+      [580, '.reader__toolbar'],
+      [605, '.reader__toolbar--long'],
+      [850, '.reader__toolbar--list'],
+      [875, '.reader__toolbar--list.reader__toolbar--long'],
+    ])
+  })
+})
diff --git a/frontend/src/components/mail/MessageReader.stage9.spec.ts b/frontend/src/components/mail/MessageReader.stage9.spec.ts
index 5feb6b3..10747c9 100644
--- a/frontend/src/components/mail/MessageReader.stage9.spec.ts
+++ b/frontend/src/components/mail/MessageReader.stage9.spec.ts
@@ -289,12 +289,12 @@ describe('MessageReader — 9단계', () => {
   describe('예약한 메일 — 청록 안내 줄 · 답장 · 전달 · 스팸 신고 없음 · 삭제는 예약 취소 뒤 휴지통 (디자인 원본 MailSendLater)', () => {
     const cancels = () => requests.filter((request) => request.method === 'DELETE' && request.url.startsWith('/scheduled-messages/'))
 
-    it('머리 아래 "10월 30일 (금) 오전 9:00에 보낼 메일입니다."(조사는 붙여 쓴다) + [고치기] [예약 취소] — 도구 줄은 삭제 · ⋯ 뿐이다', async () => {
+    it('머리 아래 "10월 30일 (금) 오전 9:00에 보낼 메일입니다."(조사는 붙여 쓴다) + [지금 보내기](15단계) [고치기] [예약 취소] — 도구 줄은 삭제 · ⋯ 뿐이다', async () => {
       const { wrapper } = await mountWith({ message: SCHEDULED, source: { kind: 'scheduled' } })
       const notice = wrapper.get('[data-notice="scheduled"]')
 
       expect(notice.get('.reader__notice-text').text()).toBe(`${formatScheduleTime(SEND_AT)}에 보낼 메일입니다.`)
-      expect(notice.findAll('button').map((button) => button.text())).toEqual(['고치기', '예약 취소'])
+      expect(notice.findAll('button').map((button) => button.text())).toEqual(['지금 보내기', '고치기', '예약 취소'])
       expect(wrapper.findAll('.reader__toolbar .tool-button').map((button) => button.text())).toEqual(['삭제'])
       expect(wrapper.find('[data-reader-more]').exists()).toBe(true)
     })
diff --git a/frontend/src/components/mail/MessageReader.vue b/frontend/src/components/mail/MessageReader.vue
index b20c42f..22735ef 100644
--- a/frontend/src/components/mail/MessageReader.vue
+++ b/frontend/src/components/mail/MessageReader.vue
@@ -3,10 +3,14 @@
 // 본문 HTML 은 MailBodyFrame(격리된 iframe)에만 그린다.
 // 툴바와 본문은 콘텐츠 열(tokens.css --content-*)을 따른다 — 분할 보기 읽기 · 목록 보기 읽기 · 쓰기 공통.
 // 검색 결과에서 연 메일은 받는 사람 아래에 "메일함  받은편지함" 한 줄을 더한다 (디자인 README "3단계 › 검색").
-// 도구 줄: 답장 · 전체 답장 · 전달 | 스팸 신고(스팸메일함에서는 스팸 아님) · 삭제 · ⋯(더 보기 — 인쇄(9단계) · 원문 내려받기 ·
+// 도구 줄: 답장 · 전체 답장 · 전달 | 이동 ▾(15단계) · 스팸 신고(스팸메일함에서는 스팸 아님) · 삭제 · ⋯(더 보기 — 인쇄(9단계) · 원문 내려받기 ·
 // 보낸 사람을 주소록에 추가(8단계) · 이런 메일로 필터 만들기 · 보낸 사람 차단(9단계))
-// (디자인 README "4단계 › 스팸 · 원문" · "6단계 › 상태 · 들어오는 길" · "9단계 › 읽기 화면").
-// 아직 보내지 않은 메일(9단계 — 보내는 중 · 예약)은 스팸 신고가 없다 — 옮기거나 지워도 엔진은 그 시각에 보낸다. 「삭제」는 확인 창 뒤 발송을 취소하고 휴지통으로.
+// (디자인 README "4단계 › 스팸 · 원문" · "6단계 › 상태 · 들어오는 길" · "9단계 › 읽기 화면" · "15단계").
+// 아직 보내지 않은 메일(9단계 — 보내는 중 · 예약)은 이동 · 스팸 신고가 없다 — 옮기거나 지워도 엔진은 그 시각에 보낸다. 「삭제」는 확인 창 뒤 발송을 취소하고 휴지통으로.
+// 읽기 칸이 좁으면 도구 줄의 이름을 숨기고 아이콘만 둔다(15단계 — 디자인 원본 Reader15 "2"). 기준은 화면 폭이 아니라 읽기 칸 폭(컨테이너 쿼리 —
+// 도구 줄 띠가 그 칸이다): 이름을 한 줄에 다 보일 폭(도구 줄 좌우 여백 포함 — 실측 569.19, 「영구 삭제」가 있으면 594.83)에 여유를 두어 580 · 605.
+// 목록 보기는 앞에 [목록으로] · 이전/다음이 함께 놓여 850 · 875 이고, 그 폭에서 한 줄에 들도록 단추 줄의 최대 폭(콘텐츠 열 800)을 풀어 둔다.
+// 이름은 aria-label · title 로 읽힌다 (MailToolButton 의 collapsible)
 // 예약한 메일은 답장 · 전체 답장 · 전달도 없고, 머리 아래 청록 안내 줄([고치기] [예약 취소])이 있다.
 // 「삭제」 · 「영구 삭제」는 MessageDeleteButton — 휴지통인지는 그 메일의 메일함으로 정한다. 「스팸 신고」는 MessageSpamButton, ⋯ 는 MessageMoreMenu.
 // 머리 아래 안내 줄(예약 · 차단한 보낸 사람 · 본문 한도 · 외부 이미지 [이미지 보기])은 MessageReaderNotices.
@@ -29,10 +33,12 @@ import MessageAttachments from '@/components/mail/MessageAttachments.vue'
 import MessageConversation from '@/components/mail/MessageConversation.vue'
 import MessageDeleteButton from '@/components/mail/MessageDeleteButton.vue'
 import MessageMoreMenu from '@/components/mail/MessageMoreMenu.vue'
+import MessageMoveButton from '@/components/mail/MessageMoveButton.vue'
 import MessageReaderNotices from '@/components/mail/MessageReaderNotices.vue'
 import MessageSpamButton from '@/components/mail/MessageSpamButton.vue'
 import { useMailNavigation } from '@/composables/useMailNavigation'
 import { useMailPrint } from '@/composables/useMailPrint'
+import { useMessageRemoval } from '@/composables/useMessageRemoval'
 import { MAIL_NO_SENDER, MAIL_SEARCH_TEXT } from '@/shared/constants/mail'
 import { formatMailDateTime, initialOf } from '@/shared/utils/format'
 import { displayName, formatAddressList } from '@/shared/utils/mail-address'
@@ -49,21 +55,30 @@ interface Props {
   layout?: 'split' | 'list'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   layout: 'split',
 })
 
 const mailStore = useMailStore()
 const { backToSourceList, replaceWithMailbox } = useMailNavigation()
 const print = useMailPrint()
+const removal = useMessageRemoval()
 
 const bodyFrameRef = ref<InstanceType<typeof MailBodyFrame> | null>(null)
 
 const message = computed(() => mailStore.selected)
 /** 예약한 메일 — 답장 · 전달이 없다 (9단계) */
 const scheduled = computed(() => isScheduledMessage(message.value))
-/** 아직 보내지 않은 메일(보내는 중 · 예약) — 스팸 신고(옮기기)가 없다 */
+/** 아직 보내지 않은 메일(보내는 중 · 예약) — 이동 · 스팸 신고(옮기기)가 없다 */
 const held = computed(() => isHeldMessage(message.value))
+/** 도구 줄이 「영구 삭제」를 보인다 — 이름이 길어 더 넓은 폭에서 아이콘만으로 접는다 (MessageDeleteButton 과 같은 판정) */
+const longDelete = computed(() => Boolean(message.value && !held.value && removal.deletesPermanently(message.value)))
+/** 도구 줄의 모양 — 보기 방식(목록 보기는 앞에 [목록으로] · 이전/다음)과 「영구 삭제」에 따라 아이콘만으로 접는 폭이 다르다 */
+const toolbarClass = computed(() => [
+  'reader__toolbar',
+  `reader__toolbar--${props.layout}`,
+  { 'reader__toolbar--long': longDelete.value },
+])
 /** 검색 결과에서 연 메일의 메일함 이름 — 메일함 목록에서 열었으면 null */
 const searchMailboxName = computed(() => {
   if (!mailStore.search || !message.value) return null
@@ -128,7 +143,7 @@ onBeforeUnmount(() => {
       class="reader__toolbar-bar"
     >
       <div
-        class="reader__toolbar"
+        :class="toolbarClass"
         role="group"
         aria-label="이 메일로 할 일"
       >
@@ -138,24 +153,32 @@ onBeforeUnmount(() => {
             <MailToolButton
               icon="reply"
               label="답장"
+              collapsible
               :to="{ name: 'mail-compose', query: { replyTo: message.id } }"
             />
             <MailToolButton
               icon="reply-all"
               label="전체 답장"
+              collapsible
               :to="{ name: 'mail-compose', query: { replyTo: message.id, all: '1' } }"
             />
             <MailToolButton
               icon="forward"
               label="전달"
+              collapsible
               :to="{ name: 'mail-compose', query: { forward: message.id } }"
             />
             <MailToolbarDivider v-if="layout === 'split'" />
-            <MessageSpamButton
-              v-if="!held"
-              :message="message"
-              :layout="layout"
-            />
+            <template v-if="!held">
+              <MessageMoveButton
+                :message="message"
+                :layout="layout"
+              />
+              <MessageSpamButton
+                :message="message"
+                :layout="layout"
+              />
+            </template>
           </template>
           <MessageDeleteButton
             :message="message"
@@ -325,11 +348,15 @@ onBeforeUnmount(() => {
   flex-direction: column;
 }
 
-/* 툴바 띠 — 칸 전체 폭으로 아래 선을 긋고, 스크롤해도 위에 남는다 */
+/*
+ * 툴바 띠 — 칸 전체 폭으로 아래 선을 긋고, 스크롤해도 위에 남는다.
+ * 띠가 읽기 칸 폭의 컨테이너다(15단계) — 단추 이름을 숨길지 이 폭으로 정한다 (아래 @container). 크기 봉쇄는 가로뿐이라 메뉴는 띠 밖으로 나온다
+ */
 .reader__toolbar-bar {
   position: sticky;
   top: 0;
   z-index: 1;
+  container: reader-tools / inline-size;
   border-bottom: var(--border-width) solid var(--color-border);
   background: var(--color-surface);
 }
@@ -345,6 +372,76 @@ onBeforeUnmount(() => {
   padding: var(--space-4) var(--content-inline) var(--space-4) var(--content-toolbar-start);
 }
 
+/* 목록 보기 — 앞의 [목록으로] · 이전/다음까지 이름이 다 보이는 줄은 콘텐츠 열(800)보다 조금 넓다. 줄의 최대 폭을 풀어 넓은 칸에서는 한 줄에 둔다 */
+.reader__toolbar--list {
+  max-width: none;
+}
+
+/*
+ * 읽기 칸이 단추 이름을 한 줄에 다 보일 폭보다 좁으면 — 이름을 숨기고 아이콘만 40×44 ([이동 ▾]는 ▾ 까지 남긴다).
+ * 폭(15단계 — 디자인 원본 Reader15 "2", 도구 줄 좌우 여백 포함): 분할 보기 580 · 「영구 삭제」 605 — 보드의 570 · 595 는 실측 필요 폭(569.19 · 594.83)에
+ * 여유가 0.81 · 0.17px 뿐이라 글자 · 여백이 1px 만 늘어도 좁은 구간에서 두 줄로 꺾인다(15단계 실사용 시험). 목록 보기는 앞의 [목록으로] · 이전/다음을 더해 850 · 875
+ */
+@container reader-tools (width < 36.25rem) {
+  .reader__toolbar :deep(.tool-button--collapsible) {
+    justify-content: center;
+    min-width: var(--size-icon-button);
+  }
+
+  .reader__toolbar :deep(.tool-button--collapsible:not(.tool-button--menu)) {
+    padding: 0;
+  }
+
+  .reader__toolbar :deep(.tool-button--collapsible .tool-button__label) {
+    display: none;
+  }
+}
+
+@container reader-tools (width < 37.8125rem) {
+  .reader__toolbar--long :deep(.tool-button--collapsible) {
+    justify-content: center;
+    min-width: var(--size-icon-button);
+  }
+
+  .reader__toolbar--long :deep(.tool-button--collapsible:not(.tool-button--menu)) {
+    padding: 0;
+  }
+
+  .reader__toolbar--long :deep(.tool-button--collapsible .tool-button__label) {
+    display: none;
+  }
+}
+
+@container reader-tools (width < 53.125rem) {
+  .reader__toolbar--list :deep(.tool-button--collapsible) {
+    justify-content: center;
+    min-width: var(--size-icon-button);
+  }
+
+  .reader__toolbar--list :deep(.tool-button--collapsible:not(.tool-button--menu)) {
+    padding: 0;
+  }
+
+  .reader__toolbar--list :deep(.tool-button--collapsible .tool-button__label) {
+    display: none;
+  }
+}
+
+@container reader-tools (width < 54.6875rem) {
+  .reader__toolbar--list.reader__toolbar--long :deep(.tool-button--collapsible) {
+    justify-content: center;
+    min-width: var(--size-icon-button);
+  }
+
+  .reader__toolbar--list.reader__toolbar--long :deep(.tool-button--collapsible:not(.tool-button--menu)) {
+    padding: 0;
+  }
+
+  .reader__toolbar--list.reader__toolbar--long :deep(.tool-button--collapsible .tool-button__label) {
+    display: none;
+  }
+}
+
 /* 콘텐츠 열 — 최대 800px · 좌우 32px · 위 20px · 아래 36px, 영역 안 왼쪽 정렬 */
 .reader__content {
   display: flex;
diff --git a/frontend/src/components/mail/MessageReaderNotices.vue b/frontend/src/components/mail/MessageReaderNotices.vue
index cd5909b..51a5a1e 100644
--- a/frontend/src/components/mail/MessageReaderNotices.vue
+++ b/frontend/src/components/mail/MessageReaderNotices.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 // 읽기 화면 머리 아래의 안내 줄 (디자인 원본 MailReadTools · MailSendLater · README "9단계" · "읽기 화면의 본문 안내")
-// 차례: 예약한 메일(청록 — [고치기] [예약 취소]) → 차단한 보낸 사람의 메일(회색 — 스팸메일함에서만, [차단 풀기]) →
+// 차례: 예약한 메일(청록 — [지금 보내기](15단계) [고치기] [예약 취소]) → 차단한 보낸 사람의 메일(회색 — 스팸메일함에서만, [차단 풀기]) →
 //       본문이 다 보이는지(생략 → 잘림 — 계약 2절 "읽기 한도") → 외부 이미지 차단(노랑 — [이미지 보기]).
 // - [이미지 보기](36 — 밀도 예외 --size-notice-action): 그 메일만 `images=show` 로 다시 받아 본문만 바꾼다(스토어의 showImages — 늦은 응답은 버린다).
 //   보이면(imagesShown — 설정으로 처음부터 보인 것 포함) 이 줄은 없다. 다시 열면 설정대로다
-// - 예약 안내 줄의 단추는 붙잡은 발송 취소(useScheduledMessageActions) — 하는 동안은 두 단추를 함께 막는다(aria-disabled · aria-busy)
-// - 단추를 누른 뒤 줄이 사라지면 초점을 본문으로 돌려 달라고 알린다(settled — 읽기 화면이 옮긴다. [이미지 보기] · [차단 풀기] · [고치기] · [예약 취소])
+// - 예약 안내 줄의 단추는 지금 보내기 · 붙잡은 발송 취소(useScheduledMessageActions) — 하는 동안은 세 단추를 함께 막는다(aria-disabled · aria-busy)
+// - 단추를 누른 뒤 줄이 사라지면 초점을 본문으로 돌려 달라고 알린다(settled — 읽기 화면이 옮긴다. [이미지 보기] · [차단 풀기] · [지금 보내기] · [고치기] · [예약 취소])
 // 줄 안의 단추는 disabled 대신 aria-disabled — 초점이 그대로 남게 (누르면 아무것도 하지 않는다)
 import { computed, ref } from 'vue'
 
@@ -42,7 +42,7 @@ const scheduledActions = useScheduledMessageActions()
 const senderBlock = useSenderBlock()
 
 /** 예약 줄 · 차단 줄의 단추가 하는 중 */
-const working = ref<'edit' | 'cancel' | 'unblock' | null>(null)
+const working = ref<'send' | 'edit' | 'cancel' | 'unblock' | null>(null)
 
 const pending = computed(() => messagePendingSend(props.message))
 const scheduledTime = computed(() =>
@@ -63,16 +63,18 @@ async function showImages() {
   if (await mailStore.showImages()) emit('settled')
 }
 
-/** [고치기] · [예약 취소] — 취소했으면 이 줄이 단추와 함께 사라진다(초점을 옮겨 달라 — 다른 화면 · 메일로 갔으면 읽기 화면이 그대로 둔다) */
-async function runScheduled(kind: 'edit' | 'cancel') {
+/**
+ * [지금 보내기] · [고치기] · [예약 취소] — 했으면 이 줄이 단추와 함께 사라진다(초점을 옮겨 달라 — 다른 화면 · 메일로 갔으면 읽기 화면이 그대로 둔다).
+ * 지금 보내기(15단계)는 예약을 취소하지 않고 보낸다 — 보내기 취소를 기다리는 동안은 보낸편지함 날짜 칸이 "보내는 중"이다
+ */
+async function runScheduled(kind: 'send' | 'edit' | 'cancel') {
   if (working.value) return
   working.value = kind
   let done = false
   try {
-    done =
-      kind === 'edit'
-        ? await scheduledActions.editScheduled(props.message.id)
-        : await scheduledActions.cancelScheduled(props.message, props.layout)
+    if (kind === 'send') done = await scheduledActions.sendNow(props.message, props.layout)
+    else if (kind === 'edit') done = await scheduledActions.editScheduled(props.message.id)
+    else done = await scheduledActions.cancelScheduled(props.message, props.layout)
   } finally {
     working.value = null
   }
@@ -103,26 +105,39 @@ async function unblock() {
       class="reader__notice-icon"
     />
     <span class="reader__notice-text reader__notice-text--strong">{{ SEND_LATER_TEXT.notice(scheduledTime) }}</span>
-    <button
-      type="button"
-      class="reader__notice-action"
-      :aria-disabled="working ? 'true' : undefined"
-      :aria-busy="working === 'edit' ? 'true' : undefined"
-      data-scheduled-edit
-      @click="runScheduled('edit')"
-    >
-      {{ SEND_LATER_TEXT.edit }}
-    </button>
-    <button
-      type="button"
-      class="reader__notice-action"
-      :aria-disabled="working ? 'true' : undefined"
-      :aria-busy="working === 'cancel' ? 'true' : undefined"
-      data-scheduled-cancel
-      @click="runScheduled('cancel')"
-    >
-      {{ SEND_LATER_TEXT.cancelSchedule }}
-    </button>
+    <!-- 단추 셋은 한 묶음 — 줄이 좁으면 묶음째 다음 줄 오른쪽으로 (15단계 — 글이 한 글자 폭으로 눌리지 않게) -->
+    <span class="reader__notice-actions">
+      <button
+        type="button"
+        class="reader__notice-action"
+        :aria-disabled="working ? 'true' : undefined"
+        :aria-busy="working === 'send' ? 'true' : undefined"
+        data-scheduled-send
+        @click="runScheduled('send')"
+      >
+        {{ SEND_LATER_TEXT.sendNow }}
+      </button>
+      <button
+        type="button"
+        class="reader__notice-action"
+        :aria-disabled="working ? 'true' : undefined"
+        :aria-busy="working === 'edit' ? 'true' : undefined"
+        data-scheduled-edit
+        @click="runScheduled('edit')"
+      >
+        {{ SEND_LATER_TEXT.edit }}
+      </button>
+      <button
+        type="button"
+        class="reader__notice-action"
+        :aria-disabled="working ? 'true' : undefined"
+        :aria-busy="working === 'cancel' ? 'true' : undefined"
+        data-scheduled-cancel
+        @click="runScheduled('cancel')"
+      >
+        {{ SEND_LATER_TEXT.cancelSchedule }}
+      </button>
+    </span>
   </div>
 
   <div
@@ -216,6 +231,7 @@ async function unblock() {
 
 /* 예약한 메일 — 청록 (디자인 원본 MailSendLater: 바탕 #E3F2F3 · 글 #0A5F67 · 단추 테두리 #9ED6DB) */
 .reader__notice--brand {
+  flex-wrap: wrap;
   gap: var(--space-8);
   background: var(--color-brand-subtle);
   color: var(--color-brand-strong);
@@ -223,6 +239,19 @@ async function unblock() {
   --reader-notice-button-hover: var(--color-brand-tint);
 }
 
+/* 단추 셋 — [지금 보내기] [고치기] [예약 취소] (15단계). 넓으면 글 오른쪽 한 줄, 좁으면 묶음째 다음 줄 오른쪽 */
+.reader__notice-actions {
+  flex: 0 0 auto;
+  display: flex;
+  gap: var(--space-8);
+  margin-left: auto;
+}
+
+/* 글이 이 폭보다 좁아지면 단추 묶음이 다음 줄로 간다 */
+.reader__notice--brand .reader__notice-text {
+  flex-basis: 12rem;
+}
+
 /* 차단한 보낸 사람 — 회색 (디자인 원본 MailReadTools: 바탕 #F2F4F7 · 글 #344054 · 단추 테두리 #D0D5DD) */
 .reader__notice--muted {
   background: var(--color-surface-muted);
diff --git a/frontend/src/components/mail/MessageSpamButton.vue b/frontend/src/components/mail/MessageSpamButton.vue
index 13d51bb..5a1e2dd 100644
--- a/frontend/src/components/mail/MessageSpamButton.vue
+++ b/frontend/src/components/mail/MessageSpamButton.vue
@@ -4,6 +4,7 @@
 // - 그 밖은 「스팸 신고」 — 스팸메일함으로 옮기고 스팸 표시. 알림에 [되돌리기](원래 메일함 · 원래 표시로)
 // - 옮길 메일함(스팸메일함 · 받은편지함)을 모르면(메일함 목록을 아직 못 받음) 그리지 않는다
 // - 옮긴 뒤: 삭제와 같다 — 분할 보기는 다음 메일, 목록 보기는 목록으로 (leaveRemoved)
+// - 읽기 칸이 좁으면 아이콘만 (15단계 — MailToolButton 의 collapsible · MessageReader 의 컨테이너 쿼리)
 import { computed, ref } from 'vue'
 
 import MailToolButton from '@/components/mail/MailToolButton.vue'
@@ -49,6 +50,7 @@ async function onClick() {
     :label="inJunk ? MAIL_SPAM_TEXT.notSpam : MAIL_SPAM_TEXT.report"
     :tone="inJunk ? 'accent' : 'default'"
     :disabled="working"
+    collapsible
     data-reader-spam
     @click="onClick"
   />
diff --git a/frontend/src/components/mail/MessageTableRow.vue b/frontend/src/components/mail/MessageTableRow.vue
index 678a353..05579ec 100644
--- a/frontend/src/components/mail/MessageTableRow.vue
+++ b/frontend/src/components/mail/MessageTableRow.vue
@@ -7,12 +7,15 @@
 //   고를 수 없다 — 고르기 상자는 꺼진 모양(aria-disabled · 까닭은 title), Ctrl · Shift + 클릭도 고르지 않는다 (옮기거나 지워도 엔진은 그 시각에 보낸다)
 // - 검색 결과(14단계)는 제목의 맞은 말을 <mark>(HighlightedText — searchHighlight 의 위치)로 그린다. 행 높이(38)는 그대로 — 미리 보기 줄은 분할 보기만
 // 칸 폭 · 칸 공통 여백은 표(MessageTable)가 정한다.
+// 끌어다 놓기(15단계 — 디자인 원본 ListDrag15): 줄을 메일함 패널로 끌어 옮긴다 — 고른 줄이면 고른 것 모두, 아니면 이 줄만.
+//   보내기를 기다리는 메일의 줄은 끌 수 없다. 줄의 링크가 끌어 가던 메일 주소 대신 우리 끌기 자료만 싣는다 (useMailRowDrag)
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 import AppIcon from '@/components/AppIcon.vue'
 import HighlightedText from '@/components/mail/HighlightedText.vue'
 import MailCheckbox from '@/components/mail/MailCheckbox.vue'
+import { useMailRowDrag } from '@/composables/useMailDrag'
 import { MAIL_BULK_TEXT, MAIL_NO_SUBJECT } from '@/shared/constants/mail'
 import { SEND_LATER_TEXT } from '@/shared/constants/mail-send-later'
 import type { MailboxRole, MessageListItem } from '@/shared/types/mail'
@@ -45,6 +48,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const drag = useMailRowDrag()
+
 const who = computed(() => rowWho(props.message, { role: props.role, mixed: props.mixed, view: 'table' }))
 const subject = computed(() => props.message.subject || MAIL_NO_SUBJECT)
 const unread = computed(() => isRowUnread(props.message, props.role))
@@ -80,8 +85,11 @@ function onMouseDown(event: MouseEvent) {
   <tr
     :class="['mail-table__row', { 'is-unread': unread, 'is-checked': checked }]"
     :data-row-id="message.id"
+    :draggable="!held"
     @click="onRowClick"
     @mousedown="onMouseDown"
+    @dragstart="(event: DragEvent) => drag.start(event, message.id)"
+    @dragend="drag.end"
   >
     <td class="mail-table__check">
       <!-- 폭 32px · 행 높이를 채우는 고르기 상자 — 44px 기준의 의도된 예외 (디자인 README "3단계", 별 칸과 같다) -->
diff --git a/frontend/src/components/mail/editor/EditorMenu.vue b/frontend/src/components/mail/editor/EditorMenu.vue
index bd3ab79..a8e35a4 100644
--- a/frontend/src/components/mail/editor/EditorMenu.vue
+++ b/frontend/src/components/mail/editor/EditorMenu.vue
@@ -4,6 +4,7 @@
 // 같은 모양을 쓰는 곳: 여러 통 처리의 이동 ▾ · 메일함 패널의 ⋯ (되돌릴 수 없는 항목은 tone 'danger' — 빨간 글자) · 읽기 화면의 ⋯
 // 꺼진 항목(disabled)은 disabled 가 아니라 aria-disabled — 화살표로 가서 초점은 받되 고를 수 없다(WAI-ARIA 메뉴 권고).
 // 누를 수 없는 까닭은 이름 아래 작은 글(note)이고 항목이 aria-describedby 로 가리킨다 — 꺼진 항목이어도 그 글은 흐리지 않는다
+// 들여 쓴 항목(depth — 15단계 [이동 ▾]의 메일함 나무)은 메일함 패널과 같은 10 · 28 · 44 · 56 에서 시작하고, 화면 낭독 이름이 따로 있으면(ariaLabel) 그것으로 읽힌다
 import { useId } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -43,6 +44,14 @@ function noteId(itemId: string): string {
   return `${menuId}-${itemId}-note`
 }
 
+/** 들여쓰기는 3단계까지 — 그 아래는 같은 깊이로 (메일함 패널과 같다) */
+const MAX_MENU_DEPTH = 3
+
+function depthClass(depth: number | undefined): string | undefined {
+  if (!depth || depth <= 0) return undefined
+  return `menu__item--depth-${Math.min(depth, MAX_MENU_DEPTH)}`
+}
+
 /** 꺼진 항목은 골라도 아무것도 하지 않는다 (메뉴도 닫지 않는다) */
 function select(item: EditorMenuItem, event: MouseEvent) {
   if (item.separator || item.disabled) return
@@ -70,8 +79,13 @@ function select(item: EditorMenuItem, event: MouseEvent) {
       <button
         v-else
         type="button"
-        :class="['menu__item', { 'menu__item--danger': item.tone === 'danger', 'menu__item--noted': item.note }]"
+        :class="[
+          'menu__item',
+          depthClass(item.depth),
+          { 'menu__item--danger': item.tone === 'danger', 'menu__item--noted': item.note },
+        ]"
         :role="item.role ?? 'menuitem'"
+        :aria-label="item.ariaLabel"
         :aria-checked="isToggle(item.role) ? Boolean(item.checked) : undefined"
         :aria-haspopup="item.opens"
         :aria-disabled="item.disabled ? 'true' : undefined"
@@ -154,6 +168,19 @@ function select(item: EditorMenuItem, event: MouseEvent) {
   background: var(--color-surface-muted);
 }
 
+/* 들여 쓴 항목 — 메일함 패널과 같은 왼쪽 안쪽 (MailboxPanelRow) */
+.menu__item--depth-1 {
+  padding-left: var(--space-28);
+}
+
+.menu__item--depth-2 {
+  padding-left: var(--space-44);
+}
+
+.menu__item--depth-3 {
+  padding-left: var(--space-56);
+}
+
 .menu__item[aria-disabled='true'] {
   opacity: 0.5;
   cursor: default;
diff --git a/frontend/src/components/mail/editor/EditorPopup.spec.ts b/frontend/src/components/mail/editor/EditorPopup.spec.ts
new file mode 100644
index 0000000..d2a2052
--- /dev/null
+++ b/frontend/src/components/mail/editor/EditorPopup.spec.ts
@@ -0,0 +1,87 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+
+import EditorMenu from './EditorMenu.vue'
+
+// 15단계 — 메뉴 자리의 좌우 바꾸기 (디자인 원본 Reader15 2-4): 바라는 끝에 맞춰 그린 메뉴가 보이는 영역 밖으로 넘치면 반대 끝에 맞춘다.
+// EditorPopup 을 쓰는 메뉴 · 팝오버 모두에 걸린다 — 여기서는 EditorMenu 로 본다
+
+function rect(left: number, width: number, top = 0, height = 40): DOMRect {
+  return { left, right: left + width, width, top, bottom: top + height, height, x: left, y: top, toJSON: () => ({}) } as DOMRect
+}
+
+/** 단추와 메뉴를 감싼 칸 — 실제 쓰는 곳(MailBulkMoveButton 등)과 같은 모양 */
+function host(align: 'start' | 'end') {
+  return defineComponent({
+    setup() {
+      const trigger = ref<HTMLButtonElement | null>(null)
+      return () =>
+        h('div', { class: 'host' }, [
+          h('button', { ref: trigger, type: 'button', class: 'trigger' }, '이동'),
+          trigger.value
+            ? h(EditorMenu, {
+                label: '옮길 메일함',
+                items: [
+                  { id: 'a', label: '보낸편지함' },
+                  { id: 'b', label: '스팸메일함' },
+                ],
+                trigger: trigger.value,
+                align,
+              })
+            : null,
+        ])
+    },
+  })
+}
+
+describe('EditorPopup — 좌우 자리', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    wrapper?.unmount()
+    wrapper = null
+    vi.restoreAllMocks()
+    document.body.innerHTML = ''
+  })
+
+  /** 화면 폭 360 — 단추(40)는 triggerLeft, 메뉴 폭 200 */
+  function layout(triggerLeft: number) {
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(360)
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+      if (this.matches('.trigger')) return rect(triggerLeft, 40)
+      if (this.matches('[role="menu"]')) return rect(triggerLeft, 200, 44, 120)
+      return rect(0, 0)
+    })
+  }
+
+  async function open(align: 'start' | 'end') {
+    wrapper = mount(host(align), { attachTo: document.body })
+    // 첫 그리기에서 단추 ref 를 받고, 다음 그리기에서 메뉴를 그린다
+    await nextTick()
+    await nextTick()
+    return wrapper.get('[role="menu"]')
+  }
+
+  it('왼쪽 끝에 맞춘 메뉴가 화면 오른쪽 밖으로 넘치면 단추 오른쪽 끝에 맞춘다', async () => {
+    layout(240)
+    const menu = await open('start')
+
+    expect(menu.classes()).toContain('editor-popup--end')
+    expect(menu.classes()).not.toContain('editor-popup--start')
+  })
+
+  it('다 들어가면 바라는 끝 그대로', async () => {
+    layout(60)
+    const menu = await open('start')
+
+    expect(menu.classes()).toContain('editor-popup--start')
+  })
+
+  it('오른쪽 끝에 맞춘 메뉴(⋯)가 화면 왼쪽 밖으로 넘치면 단추 왼쪽 끝에 맞춘다', async () => {
+    layout(80)
+    const menu = await open('end')
+
+    expect(menu.classes()).toContain('editor-popup--start')
+  })
+})
diff --git a/frontend/src/components/mail/editor/EditorPopup.vue b/frontend/src/components/mail/editor/EditorPopup.vue
index 09b30cc..a44a6c8 100644
--- a/frontend/src/components/mail/editor/EditorPopup.vue
+++ b/frontend/src/components/mail/editor/EditorPopup.vue
@@ -5,8 +5,13 @@
 // - 메뉴(role=menu): 위·아래 화살표 · Home · End 로 항목을 옮기고, Tab 은 메뉴를 닫는다
 // - 마우스로 열었으면(focusContent) 항목이 아니라 팝오버 자체에 초점을 둔다 — 고른 항목에 키보드 고리가 뜨지 않게.
 //   화살표를 누르면 그때 항목으로 들어간다 (키보드로 열면 처음부터 항목에 초점)
+// - 맞출 끝(align)은 바라는 쪽이다 — 그린 직후(초점을 주기 전) 재어, 보이는 영역 밖으로 넘치면 반대 끝에 맞춘다
+//   (15단계 — 좁은 폭의 읽기 화면 [이동 ▾]처럼 왼쪽 끝에 맞춘 메뉴가 화면 오른쪽 밖으로 넘치면 단추 오른쪽 끝에. usePopupPlacement 의 measurePopupAlign)
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import { measurePopupAlign } from '@/composables/usePopupPlacement'
+import type { PopupAlign } from '@/shared/utils/popup-placement'
+
 interface Props {
   role: 'menu' | 'dialog'
   label: string
@@ -32,6 +37,8 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 const rootRef = ref<HTMLElement | null>(null)
+/** 실제로 맞춘 끝 — 바라는 끝(align)으로 그린 뒤 넘치면 반대 끝 */
+const placedAlign = ref<PopupAlign>(props.align)
 
 /**
  * 화살표로 오가는 항목 — 꺼진 메뉴 항목은 aria-disabled 라 여기에 든다(초점은 받되 고를 수 없다 — WAI-ARIA 메뉴, EditorMenu).
@@ -105,8 +112,16 @@ function onFocusOut(event: FocusEvent) {
   if (isOutside(event.relatedTarget)) emit('close', false)
 }
 
+/** 바라는 끝으로 그린 팝오버를 재어 넘치면 반대 끝으로 — 초점을 주기 전에 (넘친 자리에 초점이 가 화면이 옆으로 밀리지 않게) */
+function placeSide() {
+  const root = rootRef.value
+  if (!root || !props.trigger) return
+  placedAlign.value = measurePopupAlign(props.trigger, root, props.align)
+}
+
 onMounted(() => {
   document.addEventListener('pointerdown', onDocumentPointerDown, true)
+  placeSide()
   void nextTick(focusInitial)
 })
 
@@ -120,7 +135,7 @@ onBeforeUnmount(() => {
     ref="rootRef"
     :role="role"
     :aria-label="label"
-    :class="['editor-popup', `editor-popup--${align}`, `editor-popup--${role}`]"
+    :class="['editor-popup', `editor-popup--${placedAlign}`, `editor-popup--${role}`]"
     tabindex="-1"
     data-editor-popup
     @keydown="onKeydown"
diff --git a/frontend/src/components/mail/editor/editor-menu.ts b/frontend/src/components/mail/editor/editor-menu.ts
index c87ed0b..2c2896f 100644
--- a/frontend/src/components/mail/editor/editor-menu.ts
+++ b/frontend/src/components/mail/editor/editor-menu.ts
@@ -18,6 +18,12 @@ export interface EditorMenuEntry {
   disabled?: boolean
   /** 이름 아래 작은 글 — 누를 수 없는 까닭 등 (읽기 화면 ⋯ 「이런 메일로 필터 만들기」 — 필터 50개). 꺼져도 흐리지 않는다 */
   note?: string
+  /**
+   * 화면 낭독 이름 — 보이는 이름과 다르게 읽힐 때만 (15단계 [이동 ▾]의 들여 쓴 메일함 "거래처 안의 2025" — 같은 이름이 둘이어도 가르게)
+   */
+  ariaLabel?: string
+  /** 들여쓰기 단계 — 메일함 패널처럼 왼쪽 안쪽 10 · 28 · 44 · 56 (3단계까지, 15단계 [이동 ▾]의 메일함 나무) */
+  depth?: number
   /** danger: 되돌릴 수 없는 일 — 빨간 글자 (메일함 ⋯ 메뉴의 지우기 · 비우기) */
   tone?: 'danger'
   /** 한 단계 더 여는 항목 (›) — 메뉴인지 대화상자인지 */
diff --git a/frontend/src/components/mail/mail-move-menu.ts b/frontend/src/components/mail/mail-move-menu.ts
new file mode 100644
index 0000000..aae8558
--- /dev/null
+++ b/frontend/src/components/mail/mail-move-menu.ts
@@ -0,0 +1,29 @@
+// [이동 ▾] 메뉴의 항목 — 목록 도구 줄(MailBulkMoveButton)과 읽기 화면(MessageMoveButton)이 같은 모양을 쓴다
+// (15단계 — 디자인 원본 Reader15 "1 · 이 메일이 든 메일함에 하위 메일함이 있을 때"). 옮길 곳을 고르는 규칙은 shared/utils/mail-move-targets.ts
+// - 메일함 패널처럼 깊이만큼 들여 쓰고(10 · 28 · 44 · 56) 앞에 패널과 같은 아이콘, 기본 메일함과 내 메일함 사이에 가는 선
+// - 들여 쓴 메일함은 화면 낭독이 위 메일함부터 읽는다("거래처 안의 2025")
+// - 메일이 든 메일함을 남긴 줄은 고를 수 없고(aria-disabled) 이름 아래에 까닭(hereNote)을 적는다
+import { menuSeparator, type EditorMenuItem } from '@/components/mail/editor/editor-menu'
+import type { MailMoveTarget } from '@/shared/utils/mail-move-targets'
+import { mailboxIcon } from '@/shared/utils/mailbox'
+
+/** 기본 메일함과 내 메일함 사이의 선 — 메뉴 안에 하나뿐이다(두 묶음은 이어져 있다) */
+const GROUP_SEPARATOR_ID = 'move-menu-group-separator'
+
+export function moveMenuItems(rows: readonly MailMoveTarget[], hereNote: string): EditorMenuItem[] {
+  const items: EditorMenuItem[] = []
+  rows.forEach((row, index) => {
+    const previous = rows[index - 1]
+    if (previous && previous.group !== row.group) items.push(menuSeparator(GROUP_SEPARATOR_ID))
+    items.push({
+      id: row.mailbox.id,
+      label: row.mailbox.name,
+      ariaLabel: row.spokenName === row.mailbox.name ? undefined : row.spokenName,
+      icon: mailboxIcon(row.mailbox),
+      depth: row.depth,
+      disabled: row.disabled,
+      note: row.here ? hereNote : undefined,
+    })
+  })
+  return items
+}
diff --git a/frontend/src/components/mail/mailbox-dialog.ts b/frontend/src/components/mail/mailbox-dialog.ts
index ef247b3..7a50a63 100644
--- a/frontend/src/components/mail/mailbox-dialog.ts
+++ b/frontend/src/components/mail/mailbox-dialog.ts
@@ -5,5 +5,7 @@ export type MailboxDialogRequest =
   /** 새 메일함 — parent 가 없으면 맨 위 ("내 메일함"), 있으면 그 안 */
   | { kind: 'create'; parent: Mailbox | null }
   | { kind: 'rename'; mailbox: Mailbox }
+  /** 메일함 옮기기 (15단계) — 옮길 곳을 고르는 창 */
+  | { kind: 'move'; mailbox: Mailbox }
   | { kind: 'delete'; mailbox: Mailbox }
   | { kind: 'empty'; mailbox: Mailbox }
diff --git a/frontend/src/components/shell/AppShell.spec.ts b/frontend/src/components/shell/AppShell.spec.ts
new file mode 100644
index 0000000..fc8f2a5
--- /dev/null
+++ b/frontend/src/components/shell/AppShell.spec.ts
@@ -0,0 +1,128 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+import { defineComponent, h } from 'vue'
+
+import MailSignaturePage from '@/pages/settings/MailSignaturePage.vue'
+import SettingsLayout from '@/pages/settings/SettingsLayout.vue'
+import type { MailSignature, SignatureImage } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import { useToastStore } from '@/stores/toast.store'
+import { dragEvent, fakeDataTransfer } from '@/test-utils/drag'
+import { flushPromises, installMockApi, ok, restoreApiAdapter, type MockHandler } from '@/test-utils/mock-api'
+import { installProseMirrorDom } from '@/test-utils/prosemirror-dom'
+import { createTestRouter } from '@/test-utils/router'
+
+// 앱 틀 — 잘못 놓은 파일 무시 (15단계 실사용 시험: 메일 화면(MailLayout)에서만 막아서 주소록 · 설정에 놓은 파일은 브라우저가 열어 웹메일을 떠났다).
+// 로그인 뒤 모든 모듈 화면이 이 틀을 쓴다 — 설정 화면(SettingsLayout)으로 본다. 파일을 받는 화면(서명 설정 — useWindowFileDrop)은 지금처럼 받는다
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+/** 서명 칸(지연 로딩한 TipTap 청크)을 기다리는 시간 — 서명 설정 테스트와 같은 값 */
+const EDITOR_LOAD_TIMEOUT_MS = 15_000
+
+const SIGNATURE: MailSignature = {
+  bodyHtml: '<div style="font-size: 14px"><p style="margin: 0">김아라 · 인프라팀</p></div>',
+  body: '김아라 · 인프라팀',
+  isForNew: true,
+  isForReply: true,
+  images: [],
+  updatedAt: '2026-10-27T05:00:00Z',
+}
+
+const UPLOADED: SignatureImage = {
+  id: '00000000-0000-4000-8000-000000000001',
+  type: 'image/png',
+  size: 1000,
+  width: 480,
+  height: 60,
+}
+
+/**
+ * 파일을 받는 곳이 없는 설정 화면(비밀번호 자리). 시험 라우터의 함수형 빈 화면은 인스턴스가 없어
+ * RouterView 가 떠날 때(vnode.component) 다루지 못한다 — 화면을 옮겨 가는 이 시험에서는 보통 컴포넌트로 둔다
+ */
+const PasswordScreen = defineComponent({ name: 'PasswordScreen', render: () => h('h1', '비밀번호') })
+
+const server: MockHandler = ({ method, url }) => {
+  if (method === 'GET' && url === '/mail-signature') return ok(SIGNATURE)
+  if (method === 'POST' && url === '/mail-signature/images') return ok(UPLOADED, 201)
+  return ok(null)
+}
+
+describe('AppShell — 잘못 놓은 파일 (15단계)', () => {
+  let pinia: Pinia
+  const mounted: VueWrapper[] = []
+
+  beforeAll(installProseMirrorDom)
+  beforeAll(async () => {
+    await import('@/components/mail/editor/signature/SignatureForm.vue')
+  }, EDITOR_LOAD_TIMEOUT_MS)
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated(USER)
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) wrapper.unmount()
+    document.body.innerHTML = ''
+    useToastStore().clear()
+    restoreApiAdapter()
+  })
+
+  it('설정 화면에 놓은 파일은 막고(놓을 수 없는 모양 · 브라우저가 열지 않는다), 서명 설정 화면은 지금처럼 그림을 받아 올린다', async () => {
+    const requests = installMockApi(server)
+    const router = createTestRouter()
+    // 같은 이름의 빈 화면을 바꿔 끼운다 — 서명 설정은 진짜 화면 (메뉴의 다른 설정 화면은 빈 화면 그대로)
+    router.addRoute({
+      path: '/settings/account/password',
+      name: 'settings-account-password',
+      component: PasswordScreen,
+      meta: { requiresAuth: true },
+    })
+    router.addRoute({
+      path: '/settings/mail/signature',
+      name: 'settings-mail-signature',
+      component: MailSignaturePage,
+      meta: { requiresAuth: true },
+    })
+    await router.push('/settings/account/password')
+    await router.isReady()
+    const wrapper = mount(SettingsLayout, { attachTo: document.body, global: { plugins: [pinia, router] } })
+    mounted.push(wrapper)
+    await flushPromises()
+    expect(wrapper.get('h1').text()).toBe('비밀번호')
+
+    // 설정 › 비밀번호 — 파일을 받는 곳이 없다: 놓을 수 없는 모양이고, 놓아도 기본 동작(브라우저가 파일을 연다)을 막는다
+    const report = fakeDataTransfer([new File(['x'], '보고서.pdf')])
+    report.dropEffect = 'copy'
+    const over = dragEvent('dragover', report)
+    document.body.dispatchEvent(over)
+    expect(over.defaultPrevented).toBe(true)
+    expect(report.dropEffect).toBe('none')
+    const drop = dragEvent('drop', report)
+    document.body.dispatchEvent(drop)
+    expect(drop.defaultPrevented).toBe(true)
+
+    // 설정 › 서명 — 같은 앱 틀 안의 받는 화면이 화면 어디에 놓은 그림이든 받아 올린다
+    await router.push('/settings/mail/signature')
+    await vi.waitFor(
+      () => {
+        if (!wrapper.find('#signature-body').exists()) throw new Error('서명 칸을 불러오는 중')
+      },
+      { timeout: EDITOR_LOAD_TIMEOUT_MS },
+    )
+    await flushPromises()
+    const logo = fakeDataTransfer([new File([new Uint8Array(1000)], '로고.png', { type: 'image/png' })])
+    document.body.dispatchEvent(dragEvent('dragover', logo))
+    expect(logo.dropEffect).toBe('copy')
+    document.body.dispatchEvent(dragEvent('drop', logo))
+    await flushPromises()
+
+    // 올린 것은 서명 설정에 놓은 그림 하나뿐 — 비밀번호 화면에 놓은 파일은 어디로도 가지 않았다
+    expect(requests.filter((request) => request.method === 'POST').map((request) => request.url)).toEqual([
+      '/mail-signature/images',
+    ])
+  })
+})
diff --git a/frontend/src/components/shell/AppShell.vue b/frontend/src/components/shell/AppShell.vue
index 0201e4f..a0796e6 100644
--- a/frontend/src/components/shell/AppShell.vue
+++ b/frontend/src/components/shell/AppShell.vue
@@ -3,10 +3,13 @@
 // 모든 모듈 레이아웃은 이 셸로 감싼다: <AppShell module-id="mail"> … </AppShell>
 // 모듈의 검색 칸은 search 슬롯으로 상단 바에 넣는다: <template #search><MailSearchBox /></template> (없으면 비활성 통합 검색)
 // 상단 바 바로 아래 모듈 폭 전체의 안내 줄은 notice 슬롯 (13단계 — 메일 화면의 2단계 인증 유예 줄)
+// 잘못 놓은 파일은 무시한다(15단계 — 로그인 뒤 모든 모듈 화면): 받지 않는 곳에 놓으면 브라우저가 그 파일을 열어 웹메일을 떠난다.
+// 파일을 받는 화면(쓰기 화면 · 서명 설정 — useWindowFileDrop)이 떠 있으면 지금처럼 그 화면이 받는다 (useIgnoredWindowFileDrop)
 import { computed } from 'vue'
 
 import AppRail from './AppRail.vue'
 import AppTopBar from './AppTopBar.vue'
+import { useIgnoredWindowFileDrop } from '@/composables/useWindowFileDrop'
 import { findAppModule, type AppModuleId } from '@/shared/constants/app-modules'
 
 interface Props {
@@ -16,6 +19,9 @@ interface Props {
 const props = defineProps<Props>()
 
 const moduleLabel = computed(() => findAppModule(props.moduleId).label)
+
+// 메일 · 주소록 · 설정 어디에 파일을 잘못 놓아도 아무 일 없게 (받는 화면이 떠 있으면 그 화면에 맡긴다)
+useIgnoredWindowFileDrop()
 </script>
 
 <template>
diff --git a/frontend/src/components/shell/AppTopBar.spec.ts b/frontend/src/components/shell/AppTopBar.spec.ts
new file mode 100644
index 0000000..c6b1582
--- /dev/null
+++ b/frontend/src/components/shell/AppTopBar.spec.ts
@@ -0,0 +1,94 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import MailSearchBox from '@/components/mail/MailSearchBox.vue'
+import mailSearchBoxSource from '@/components/mail/MailSearchBox.vue?raw'
+import { useAuthStore } from '@/stores/auth.store'
+import { restoreApiAdapter } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import AppTopBar from './AppTopBar.vue'
+import topBarSource from './AppTopBar.vue?raw'
+
+// 상단 바 — 15단계 좁은 폭(디자인 원본 ListDrag15 "4. 상단 바 · 휴대폰 폭 360"): 이름 · 주소 칸만 줄고 넘치면 "…", 전체는 마우스를 올리면 보인다.
+// 줄 · 숨김(480 이하에서 주소 감춤)은 CSS 라 여기서는 차례 · 이름 · title 만 본다.
+// 검색 칸도 바 안쪽(폭 360 — 256)에 맞게 준다(15단계 실사용 시험 — 278 로 넘쳐 화면이 옆으로 밀렸다) — 그 규칙은 원본의 style 에서 읽는다
+
+/** 컴포넌트 원본에서 한 규칙의 본문 — jsdom 은 컴포넌트의 style 을 적용하지 않는다 (주석은 뺀다 — MailboxPage.search.spec 과 같은 읽기) */
+function ruleBody(source: string, selector: string): string {
+  const rules = source
+    .slice(source.indexOf('<style'))
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .matchAll(/([^{}]+)\{([^}]*)\}/g)
+  for (const [, found = '', body = ''] of rules) {
+    if (found.replace('<style scoped>', '').trim() === selector) return body
+  }
+  return ''
+}
+
+describe('AppTopBar — 계정 칸', () => {
+  let pinia: Pinia
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated({ email: 'ara.kim@arasystem.it.kr', name: '김아라' })
+  })
+
+  afterEach(() => {
+    restoreApiAdapter()
+  })
+
+  async function mountBar() {
+    const router = createTestRouter()
+    await router.push('/mail/inbox')
+    await router.isReady()
+    return mount(AppTopBar, { props: { title: '메일' }, global: { plugins: [pinia, router] } })
+  }
+
+  it('차례는 그대로 — 모듈 이름 · 검색 칸 · 계정(머리글자 · 이름과 주소 · [로그아웃])', async () => {
+    const wrapper = await mountBar()
+
+    const children = [...wrapper.get('.top-bar').element.children].map((child) => child.className)
+    expect(children).toEqual(['top-bar__title', 'top-bar__search', 'top-bar__account'])
+    const account = [...wrapper.get('.top-bar__account').element.children].map((child) => child.className)
+    expect(account).toEqual(['top-bar__avatar', 'top-bar__who', 'top-bar__logout'])
+    expect(wrapper.get('.top-bar__logout').text()).toBe('로그아웃')
+  })
+
+  it('이름 · 주소가 줄어 "…"가 되어도 마우스를 올리면 다 보인다 — "김아라 (ara.kim@arasystem.it.kr)"', async () => {
+    const wrapper = await mountBar()
+
+    const who = wrapper.get('.top-bar__who')
+    expect(who.attributes('title')).toBe('김아라 (ara.kim@arasystem.it.kr)')
+    expect(who.get('.top-bar__name').text()).toBe('김아라')
+    expect(who.get('.top-bar__email').text()).toBe('ara.kim@arasystem.it.kr')
+  })
+
+  it('폭 360 에서도 검색 칸이 바 밖으로 넘치지 않는다 — 메일 검색 칸은 바의 줄 칸이고, 칸 · 입력 칸 모두 최소 폭 0 이라 바 안쪽만큼 준다', async () => {
+    const router = createTestRouter()
+    await router.push('/mail/inbox')
+    await router.isReady()
+    const wrapper = mount(AppTopBar, {
+      props: { title: '메일' },
+      slots: { search: MailSearchBox },
+      global: { plugins: [pinia, router] },
+    })
+
+    // 감싸는 칸 없이 바로 바의 줄 칸이다 — 감싸는 칸이 있으면 그 칸의 최소 폭(입력 칸의 기본 폭)에 다시 묶인다
+    const children = [...wrapper.get('.top-bar').element.children].map((child) => child.className)
+    expect(children).toEqual(['top-bar__title', 'mail-search', 'top-bar__account'])
+
+    // 280 에서 시작해 줄 수 있고(flex 1 1 17.5rem), 입력 칸의 기본 폭에 묶이지 않는다(min-width 0) — 비활성 통합 검색 칸도 같다
+    expect(ruleBody(mailSearchBoxSource, '.mail-search')).toMatch(/flex:\s*1 1 17\.5rem;/)
+    const shrinking = [
+      [mailSearchBoxSource, '.mail-search'],
+      [mailSearchBoxSource, '.mail-search__input'],
+      [topBarSource, '.top-bar__search'],
+      [topBarSource, '.top-bar__search-input'],
+    ] as const
+    for (const [source, selector] of shrinking) {
+      expect(ruleBody(source, selector), selector).toMatch(/min-width:\s*0;/)
+    }
+  })
+})
diff --git a/frontend/src/components/shell/AppTopBar.vue b/frontend/src/components/shell/AppTopBar.vue
index 650c93a..d313789 100644
--- a/frontend/src/components/shell/AppTopBar.vue
+++ b/frontend/src/components/shell/AppTopBar.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 // 상단 바 — 모듈 이름 · 검색 칸 · 로그인한 직원 · 로그아웃
 // 검색 칸은 모듈이 search 슬롯으로 넣는다(메일: "메일 검색" — MailSearchBox). 넣지 않은 모듈은 비활성 "통합 검색"(준비 중)이다.
+// 좁은 폭(15단계 — 디자인 원본 ListDrag15 "4. 상단 바 · 휴대폰 폭 360"): [로그아웃] · 머리글자는 줄지도 꺾이지도 않고 이름 · 주소 칸만 준다 —
+// 넘치면 끝을 "…"로 줄이고 전체는 마우스를 올리면 보인다(title). 화면 폭 480 이하에서는 주소를 감추고 이름만 둔다.
+// 줄 수와 차례(모듈 이름 · 검색 칸 · 계정)는 그대로다 — 계정 칸을 첫 줄로 올리지 않는다(Tab 차례).
+// 검색 칸(모듈의 search 슬롯 · 비활성 통합 검색)도 바 안쪽보다 넓어지지 않는다 — 폭 360 에서 바 안쪽 256 에 맞게 준다(min-width 0)
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -23,6 +27,11 @@ const { logout } = useAuth()
 
 const loggingOut = ref<boolean>(false)
 const initial = computed(() => initialOf(authStore.user?.name, authStore.user?.email ?? ''))
+/** 줄어든 이름 · 주소의 전체 — "김아라 (ara.kim@arasystem.it.kr)" */
+const accountTitle = computed(() => {
+  const user = authStore.user
+  return user ? `${user.name} (${user.email})` : ''
+})
 
 async function onLogout() {
   if (loggingOut.value) return
@@ -68,7 +77,10 @@ async function onLogout() {
         class="top-bar__avatar"
         aria-hidden="true"
       >{{ initial }}</span>
-      <div class="top-bar__who">
+      <div
+        class="top-bar__who"
+        :title="accountTitle"
+      >
         <span class="top-bar__name">{{ authStore.user.name }}</span>
         <span class="top-bar__email">{{ authStore.user.email }}</span>
       </div>
@@ -108,6 +120,8 @@ async function onLogout() {
 
 .top-bar__search {
   flex: 1 1 17.5rem;
+  /* 좁은 폭에서는 바 안쪽에 맞게 준다 (메일 검색 칸 MailSearchBox 와 같다) */
+  min-width: 0;
   max-width: 32.5rem;
   display: flex;
   align-items: center;
@@ -135,12 +149,16 @@ async function onLogout() {
 
 .top-bar__account {
   margin-left: auto;
+  /* 줄이 모자라면 이름 · 주소 칸이 준다 (줄을 넘지 않는다) */
+  min-width: 0;
+  max-width: 100%;
   display: flex;
   align-items: center;
   gap: var(--space-10);
 }
 
 .top-bar__avatar {
+  flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -153,11 +171,20 @@ async function onLogout() {
 }
 
 .top-bar__who {
+  min-width: 0;
   display: flex;
   flex-direction: column;
   line-height: var(--line-height-tight);
 }
 
+/* 넘치면 끝을 "…"로 — 전체는 칸의 title */
+.top-bar__name,
+.top-bar__email {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .top-bar__name {
   font-weight: 600;
 }
@@ -167,7 +194,10 @@ async function onLogout() {
   color: var(--color-text-muted);
 }
 
+/* [로그아웃]은 줄지도 꺾이지도 않는다 */
 .top-bar__logout {
+  flex: 0 0 auto;
+  white-space: nowrap;
   display: inline-flex;
   align-items: center;
   gap: var(--space-6);
@@ -183,4 +213,11 @@ async function onLogout() {
 .top-bar__logout:hover {
   background: var(--color-surface-muted);
 }
+
+/* 화면 폭 480 이하 — 주소를 감추고 이름만 (tokens.css 화면 폭 기준) */
+@media (max-width: 30rem) {
+  .top-bar__email {
+    display: none;
+  }
+}
 </style>
diff --git a/frontend/src/composables/useBulkMailActions.ts b/frontend/src/composables/useBulkMailActions.ts
index 28251e1..bfdc8a7 100644
--- a/frontend/src/composables/useBulkMailActions.ts
+++ b/frontend/src/composables/useBulkMailActions.ts
@@ -2,10 +2,12 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { notifyApiError } from './useApi'
+import type { MailDragPayload } from './useMailDrag'
 import { useMailMoveFeedback } from './useMailMoveFeedback'
 import type { Mailbox } from '@/shared/types/mail'
-import { listLocationOf } from '@/shared/utils/mail-list-source'
-import { useMailStore, type MailBulkResult, type MoveOptions } from '@/stores/mail.store'
+import { listLocationOf, scopeMailboxIdOf } from '@/shared/utils/mail-list-source'
+import { hereMailboxIds, junkMarkForMove, mailMoveTargets, type MailMoveTarget } from '@/shared/utils/mail-move-targets'
+import { useMailStore, type BulkMoveResult, type MailBulkResult, type MoveOptions } from '@/stores/mail.store'
 
 // 여러 통 처리 — 도구 줄의 단추가 하는 일 (계약 2절 "여러 통 한꺼번에" · 디자인 README "3단계 › 여러 통 처리")
 // - 읽음 · 안 읽음 · 중요 표시: 목록이 바로 바뀌므로 알리지 않는다 (서버가 바꾸지 못한 메일만 되돌린다)
@@ -16,6 +18,10 @@ import { useMailStore, type MailBulkResult, type MoveOptions } from '@/stores/ma
 // - 대화로 묶은 메일함(14단계)은 고른 줄의 메일 모두에 한다(붙잡힌 메일은 빼고 — 스토어). "중요 해제"는 고른 줄이 모두 중요 표시가 있을 때.
 //   옮기기 · 삭제 · 스팸 알림은 "받은편지함에 있는 메일 2통을 휴지통으로 옮겼습니다." — 줄의 "4통"은 대화 전체라서 (2026-11-06 실사용 시험).
 //   휴지통의 영구 삭제도 확인 창 · 알림이 "휴지통에 있는 메일 2통을 영구 삭제할까요? · …했습니다." (2026-11-07 — conversationFrom)
+// - 15단계: [이동 ▾]의 옮길 곳은 메일함 패널처럼 들여 쓴 나무(mail-move-targets.ts — 고른 메일이 든 메일함에 하위 메일함이 있으면 고를 수 없는 줄로 남긴다).
+//   스팸메일함으로 옮기면 [스팸 신고]와 같이 스팸 표시를, 스팸메일함에서 휴지통 밖으로 꺼내면 [스팸 아님]과 같이 스팸 아님 표시를 함께 보낸다(junkMarkForMove).
+//   목록 줄을 메일함 패널에 끌어다 놓은 것(moveDragged — 휴지통에 놓으면 [삭제])도 같은 길 · 같은 알림이다.
+//   알림의 메일함 이름은 같은 이름이 다른 곳에도 있을 때만 "거래처 › 2025" (useMailMoveFeedback)
 
 export function useBulkMailActions() {
   const mailStore = useMailStore()
@@ -40,18 +46,28 @@ export function useBulkMailActions() {
    * 대화로 묶은 목록이면 지금 메일함의 이름 — 줄의 통 수는 대화 전체라 알림 · 영구 삭제 확인이 그 메일함의 메일임을 밝힌다
    * ("받은편지함에 있는 메일 2통을 …" · "휴지통에 있는 메일 2통을 영구 삭제할까요?"). 묶지 않은 목록이면 null (지금 글 그대로)
    */
-  const conversationFrom = computed<string | null>(() =>
-    mailStore.isConversationList ? (mailStore.currentMailbox?.name ?? null) : null,
-  )
-  /** 이동 메뉴 — 지금 메일함 · 임시보관함 · 휴지통을 뺀 메일함 (메일함 패널 순서) */
-  const moveTargets = computed<Mailbox[]>(() =>
-    mailStore.orderedMailboxes
-      .map((node) => node.mailbox)
-      .filter(
-        (mailbox) =>
-          mailbox.id !== mailStore.currentMailboxId && mailbox.role !== 'drafts' && mailbox.role !== 'trash',
-      ),
-  )
+  const conversationFrom = computed<string | null>(() => {
+    const mailbox = mailStore.isConversationList ? mailStore.currentMailbox : null
+    return mailbox ? feedback.placeName(mailbox) : null
+  })
+  /**
+   * 이동 메뉴 — 메일함 패널 차례 · 깊이. 고른 메일이 든 메일함(목록이 가리키는 메일함 · 고른 메일이 모두 든 곳) · 임시보관함 · 휴지통은
+   * 빼고, 그중 하위 메일함이 있는 것은 고를 수 없는 줄로 남긴다 (mail-move-targets.ts)
+   */
+  const moveTargets = computed<MailMoveTarget[]>(() => {
+    const scopeId = scopeMailboxIdOf(mailStore.listSource)
+    const here = mailStore.isConversationList
+      ? hereMailboxIds([], scopeId)
+      : hereMailboxIds(mailStore.checkedMessages, scopeId)
+    return mailMoveTargets(mailStore.mailboxes, here)
+  })
+
+  /** 옮기며 함께 보낼 스팸 표시 — 부르는 쪽이 정했으면(스팸 신고 · 스팸 아님) 그대로, 아니면 옮길 곳과 지금 메일함으로 (junkMarkForMove) */
+  function junkOptionsFor(mailbox: Mailbox, options: MoveOptions): MoveOptions {
+    if (options.isJunk !== undefined) return options
+    const isJunk = junkMarkForMove(mailbox, inJunk.value)
+    return isJunk === undefined ? {} : { isJunk }
+  }
 
   async function markRead(isRead: boolean): Promise<void> {
     await mailStore.patchChecked({ isRead })
@@ -71,15 +87,39 @@ export function useBulkMailActions() {
     await router.replace(listLocationOf(source))
   }
 
+  /** 옮긴 뒤 — 열어 둔 메일이 빠졌으면 목록으로, 알림(+ 되돌리기) */
+  async function settleMove(result: BulkMoveResult, mailbox: Mailbox, from: string | null): Promise<void> {
+    await leaveRemovedMessage(result)
+    feedback.announceMove(result, mailbox, { from })
+  }
+
   async function moveTo(mailbox: Mailbox, options: MoveOptions = {}): Promise<void> {
     if (busy.value || mailStore.checkedCount === 0) return
     // 대화로 묶은 목록은 줄의 통 수가 대화 전체라 알림이 지금 메일함의 메일임을 밝힌다 — 시작할 때의 메일함 (기다리는 사이 목록이 바뀔 수 있다)
     const from = conversationFrom.value
+    const moveOptions = junkOptionsFor(mailbox, options)
     busy.value = true
     try {
-      const result = await mailStore.moveChecked(mailbox.id, options)
-      await leaveRemovedMessage(result)
-      feedback.announceMove(result, mailbox.name, { from })
+      const result = await mailStore.moveChecked(mailbox.id, moveOptions)
+      await settleMove(result, mailbox, from)
+    } finally {
+      busy.value = false
+    }
+  }
+
+  /**
+   * 목록 줄을 메일함 패널에 끌어다 놓았다 (15단계 — useMailDrag) — 놓은 메일함이 휴지통이면 [삭제], 스팸메일함이면 [스팸 신고]와 같고, 그 밖은 [이동 ▾]와 같다.
+   * 고른 것을 끌었으면 옮긴 뒤 고른 것을 푼다(하나라도 옮겼을 때 — 도구 줄과 같다). 고르지 않은 줄을 끌었으면 고른 것은 그대로 둔다
+   */
+  async function moveDragged(drag: MailDragPayload, mailbox: Mailbox): Promise<void> {
+    if (busy.value || drag.targets.length === 0) return
+    const from = drag.kind === 'conversations' ? conversationFrom.value : null
+    const moveOptions = junkOptionsFor(mailbox, {})
+    busy.value = true
+    try {
+      const result = await mailStore.moveMessages(drag.targets, mailbox.id, moveOptions)
+      if (drag.fromSelection && !result.stale && result.doneIds.length > 0) mailStore.clearChecked()
+      await settleMove(result, mailbox, from)
     } finally {
       busy.value = false
     }
@@ -134,6 +174,7 @@ export function useBulkMailActions() {
     markRead,
     toggleFlagged,
     moveTo,
+    moveDragged,
     moveToTrash,
     moveSpam,
     purge,
diff --git a/frontend/src/composables/useConversationPanelVisibility.ts b/frontend/src/composables/useConversationPanelVisibility.ts
new file mode 100644
index 0000000..5e953c2
--- /dev/null
+++ b/frontend/src/composables/useConversationPanelVisibility.ts
@@ -0,0 +1,71 @@
+import { onBeforeUnmount, onMounted, watch, type Ref } from 'vue'
+
+// 같은 대화 칸의 펼친 안([data-conversation-panel]) 가운데 화면에 들어온 것을 알린다
+// (15단계 — 디자인 원본 Reader15 "6": [모두 펼치기]의 본문은 화면에 들어오는 줄부터 하나씩 받는다 — 받는 차례는 스토어의 noteConversationPanelVisible).
+// - IntersectionObserver 하나로 칸 안의 펼친 안을 모두 본다. 칸을 다시 그릴 때마다(watchKey) 새로 생긴 안은 보기 시작하고, 사라진 안은 나간 것으로 알린다
+// - 보이는 곳은 화면이다 — 읽기 칸처럼 스크롤되는 조상이 잘라 낸 곳은 보이지 않는 것으로 친다(IntersectionObserver 의 기본 뿌리가 그렇게 잰다)
+// - IntersectionObserver 가 없는 브라우저 · 시험 환경은 펼친 안이 생기면 들어온 것으로 본다(받는 것은 그래도 하나씩이다)
+// - 칸이 사라지면(읽기 화면을 떠남) 보던 안을 모두 나간 것으로 알린다
+
+/** 펼친 안의 표시 — 값은 그 줄의 메일 id (ConversationMessagePanel) */
+const PANEL_SELECTOR = '[data-conversation-panel]'
+
+export interface ConversationPanelVisibilityOptions {
+  /** 칸 — 그 안의 펼친 안을 본다 (칸이 없으면 null) */
+  root: Ref<HTMLElement | null>
+  /** 다시 그릴 때 바뀌는 값 — 바뀌면 펼친 안을 다시 센다 */
+  watchKey: () => unknown
+  onChange: (id: string, visible: boolean) => void
+}
+
+export function useConversationPanelVisibility(options: ConversationPanelVisibilityOptions): void {
+  /** 보고 있는 안 — 요소마다 그 줄의 메일 id */
+  const observed = new Map<Element, string>()
+  let observer: IntersectionObserver | null = null
+
+  function report(entries: IntersectionObserverEntry[]) {
+    for (const entry of entries) {
+      const id = observed.get(entry.target)
+      if (id !== undefined) options.onChange(id, entry.isIntersecting)
+    }
+  }
+
+  function forget(element: Element, id: string) {
+    observed.delete(element)
+    observer?.unobserve(element)
+    options.onChange(id, false)
+  }
+
+  /** 지금 칸 안의 펼친 안과 맞춘다 — 사라진 안은 나간 것으로, 새 안은 보기 시작한다 */
+  function sync() {
+    const panels = new Map<Element, string>()
+    for (const element of options.root.value?.querySelectorAll<HTMLElement>(PANEL_SELECTOR) ?? []) {
+      const id = element.dataset.conversationPanel
+      if (id) panels.set(element, id)
+    }
+    for (const [element, id] of [...observed]) {
+      if (panels.get(element) !== id) forget(element, id)
+    }
+    for (const [element, id] of panels) {
+      if (observed.has(element)) continue
+      observed.set(element, id)
+      if (observer) observer.observe(element)
+      else options.onChange(id, true)
+    }
+  }
+
+  onMounted(() => {
+    if (typeof IntersectionObserver !== 'undefined') observer = new IntersectionObserver(report)
+    sync()
+  })
+
+  watch(options.watchKey, sync, { flush: 'post' })
+
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+    observer = null
+    const left = [...observed.values()]
+    observed.clear()
+    for (const id of left) options.onChange(id, false)
+  })
+}
diff --git a/frontend/src/composables/useMail.spec.ts b/frontend/src/composables/useMail.spec.ts
index 374d102..6ceecfb 100644
--- a/frontend/src/composables/useMail.spec.ts
+++ b/frontend/src/composables/useMail.spec.ts
@@ -192,3 +192,72 @@ describe('useMail 이미 받은 메일에 적용 — POST /mail-filter-runs (계
     expect(requests[0]?.config.silent).toEqual(['REQ_001'])
   })
 })
+
+describe('useMail — 15단계 메일 · 메일함 다루기 (계약 2절 "메일함 관리" · "보낸 사람 차단" · "보내기 취소 · 예약 발송")', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  afterEach(() => {
+    restoreApiAdapter()
+  })
+
+  it('메일함 옮기기는 PATCH /mailboxes/{id} 에 parentId 만 — 맨 위는 null 을 그대로 싣는다', async () => {
+    const requests = installMockApi(() => ok({ id: 'c25' }))
+
+    await useMail().moveMailbox('c/25', { parentId: 'p' }, { silent: ['MAIL_009'] })
+    await useMail().moveMailbox('c25', { parentId: null })
+
+    expect(requests.map((item) => `${item.method} ${item.url}`)).toEqual(['PATCH /mailboxes/c%2F25', 'PATCH /mailboxes/c25'])
+    expect(requests.map((item) => item.data)).toEqual([{ parentId: 'p' }, { parentId: null }])
+    expect(requests[0]?.config.silent).toEqual(['MAIL_009'])
+  })
+
+  it('하위까지 지우기는 ?withChildren=true — 주지 않으면 쿼리 없이 (옛 화면처럼 하위가 있으면 서버가 막는다)', async () => {
+    const requests = installMockApi(() => ok({ deleted: true, processed: 0, movedToTrash: 0, remaining: 0 }))
+
+    await useMail().deleteMailbox('c', { withChildren: true, silent: ['RES_001'] })
+    await useMail().deleteMailbox('c')
+
+    expect(requests.map((item) => [item.method, item.url, item.params])).toEqual([
+      ['DELETE', '/mailboxes/c', { withChildren: true }],
+      ['DELETE', '/mailboxes/c', {}],
+    ])
+    expect(requests[0]?.config.silent).toEqual(['RES_001'])
+    // withChildren 은 요청 설정으로 새지 않는다
+    expect(Object.keys(requests[0]?.config ?? {})).not.toContain('withChildren')
+  })
+
+  it('차단 정리는 POST /mail-block-runs { sender, cursor } — 필터 적용과 같은 시간 한도', async () => {
+    const run = { scanned: 1200, matched: 12, remaining: 3600, cursor: 'b1' }
+    const requests = installMockApi(() => ok(run))
+
+    await expect(useMail().runSenderBlock({ sender: '@example.com', cursor: null }, { silent: true })).resolves.toEqual(run)
+
+    expect(requests.map((item) => `${item.method} ${item.url}`)).toEqual(['POST /mail-block-runs'])
+    expect(requests[0]?.data).toEqual({ sender: '@example.com', cursor: null })
+    expect(requests[0]?.config.timeout).toBe(MAIL_FILTER_RUN_TIMEOUT_MS)
+  })
+
+  it.each([
+    ['보내기 취소를 기다리는 중이면 그대로', { id: 's/1', pendingSend: { kind: 'undo', sendAt: '2026-11-09T05:00:10.000Z' }, rejectedRecipients: [] }],
+    ['바로 보냈으면 null', { id: 's/1', pendingSend: null, rejectedRecipients: [NOBODY] }],
+  ])('지금 보내기는 POST /scheduled-messages/{id}/release (본문 없음) — %s', async (_label, reply) => {
+    const requests = installMockApi(() => ok(reply))
+
+    await expect(useMail().releaseScheduledMessage('s/1')).resolves.toEqual(reply)
+
+    expect(requests.map((item) => `${item.method} ${item.url}`)).toEqual(['POST /scheduled-messages/s%2F1/release'])
+    expect(requests[0]?.data).toBeUndefined()
+  })
+
+  it.each([
+    ['칸이 없는 응답', {}],
+    ['모양이 틀린 칸', { id: 7, pendingSend: { kind: 'later', sendAt: '곧' }, rejectedRecipients: 'x' }],
+    ['빈 응답', null],
+  ])('지금 보내기 응답은 늘 값으로 맞춘다 — %s 은 빈 배열 · null · 요청한 id', async (_label, reply) => {
+    installMockApi(() => ok(reply))
+
+    await expect(useMail().releaseScheduledMessage('s1')).resolves.toEqual({ id: 's1', rejectedRecipients: [], pendingSend: null })
+  })
+})
diff --git a/frontend/src/composables/useMail.ts b/frontend/src/composables/useMail.ts
index 38aae4b..5ee4631 100644
--- a/frontend/src/composables/useMail.ts
+++ b/frontend/src/composables/useMail.ts
@@ -10,6 +10,7 @@ import {
   MAIL_SEND_TIMEOUT_MS,
   MAIL_UPLOAD_TIMEOUT_MS,
 } from '@/shared/constants/mail'
+import { MAIL_BLOCK_RUN_TIMEOUT_MS } from '@/shared/constants/mail-block'
 import { MAIL_CONVERSATION_TIMEOUT_MS } from '@/shared/constants/mail-conversation'
 import type {
   Attachment,
@@ -19,6 +20,8 @@ import type {
   Draft,
   DraftPayload,
   DraftSaved,
+  MailBlockRun,
+  MailBlockRunRequest,
   MailFilterRun,
   MailFilterRunRequest,
   MailFilterSet,
@@ -32,6 +35,7 @@ import type {
   MailboxBulkResult,
   MailboxCreatePayload,
   MailboxDeletion,
+  MailboxMovePayload,
   MailboxRenamePayload,
   MessageDeletionRequest,
   MessageDeletionResult,
@@ -46,6 +50,7 @@ import type {
   RecipientSuggestionQuery,
   SaveSignaturePayload,
   ScheduledMessageCancel,
+  ReleasedSend,
   SearchIndexState,
   SendMessagePayload,
   SentMessage,
@@ -70,6 +75,11 @@ export interface GetMessageOptions extends MailRequestOptions {
   highlight?: MessageHighlightQuery | null
 }
 
+/** 메일함 지우기의 옵션 — withChildren 이면 하위 메일함까지 (15단계 — `?withChildren=true`) */
+export interface DeleteMailboxOptions extends MailRequestOptions {
+  withChildren?: boolean
+}
+
 export interface SendMessageOptions extends MailRequestOptions {
   /**
    * 중복 발송 방지 키 (계약 2절) — 쓰기 화면마다 하나 만들고, 실패 뒤 다시 보낼 때도 같은 값을 넘긴다.
@@ -87,6 +97,12 @@ type SentMessageReply = Omit<SentMessage, 'rejectedRecipients' | 'pendingSend'>
   pendingSend?: unknown
 }
 
+/**
+ * POST /scheduled-messages/{id}/release 가 실제로 주는 모양 (15단계 — 계약의 ReleasedSend). 모양이 틀리면(응답을 바꾼 게이트웨이 등)
+ * releaseScheduledMessage 가 빈 배열 · null · 요청한 id 로 맞춘다
+ */
+type ScheduledReleaseReply = { id?: unknown; rejectedRecipients?: unknown; pendingSend?: unknown } | null
+
 /** GET · PUT /mail-vacation 이 실제로 주는 모양 — 7단계 앞의 서버는 isActive 가 없다 (vacationStateOf 가 맞춘다) */
 type MailVacationReply = MailVacation & { isActive?: unknown }
 
@@ -153,13 +169,25 @@ export function useMail() {
   }
 
   /**
-   * 메일함 지우기 — 안의 메일을 휴지통으로 옮긴 뒤 지운다. 한 요청에 다 옮기지 못하면 deleted: false 다 (같은 요청을 다시 보낸다).
-   * 하위 메일함이 있으면 400 VAL_001 (화면이 먼저 막는다)
+   * 메일함 옮기기 (15단계) — 같은 PATCH 에 parentId 만 보낸다(null 은 맨 위). 하위 메일함과 안의 메일이 함께 간다.
+   * 새 상위 안에 같은 이름(대소문자 무시)이면 409 MAIL_009, 자기 자신 · 하위 아래 · 둘 수 없는 자리는 400 VAL_001, 없는 메일함 · 상위는 404 RES_001,
+   * 그 메일함의 오래 걸리는 처리가 진행 중이면 429 REQ_001
    */
-  function deleteMailbox(id: string, options?: MailRequestOptions): Promise<MailboxDeletion> {
+  function moveMailbox(id: string, payload: MailboxMovePayload, options?: MailRequestOptions): Promise<Mailbox> {
+    return api.patch<Mailbox, Mailbox>(`/mailboxes/${segment(id)}`, { parentId: payload.parentId }, options)
+  }
+
+  /**
+   * 메일함 지우기 — 안의 메일을 휴지통으로 옮긴 뒤 지운다. 한 요청에 다 옮기지 못하면 deleted: false 다 (같은 요청을 다시 보낸다).
+   * 하위 메일함이 있으면 withChildren(?withChildren=true — 15단계)일 때만 하위까지 깊은 것부터 지운다. 없으면 400 VAL_001
+   * (확인 창이 하위까지 지울지 물은 뒤에만 켠다 — 옛 화면이 모르고 하위를 지우지 않게)
+   */
+  function deleteMailbox(id: string, options: DeleteMailboxOptions = {}): Promise<MailboxDeletion> {
+    const { withChildren, ...requestOptions } = options
     return api.delete<MailboxDeletion, MailboxDeletion>(`/mailboxes/${segment(id)}`, {
       timeout: MAIL_MAILBOX_OPERATION_TIMEOUT_MS,
-      ...options,
+      ...requestOptions,
+      ...(withChildren ? { params: { withChildren: true } } : {}),
     })
   }
 
@@ -229,6 +257,20 @@ export function useMail() {
     })
   }
 
+  /**
+   * 차단한 보낸 사람(주소 · 도메인)의 메일 가운데 받은편지함에 이미 있는 것을 스팸메일함으로 옮긴다 (15단계 — 차단 창의 새 칸).
+   * 필터 적용과 같은 규칙이다: 한 요청은 25초 안에 끝나고 cursor 를 돌려준다 — null 이 될 때까지 같은 sender 에 그 cursor 를 넣어 다시 보낸다
+   * (부르는 쪽 — mail-block-run.store). 같은 직원의 받은편지함 정리(필터 적용 · 이것)가 다른 곳에서 진행 중이면 429 REQ_001,
+   * 차단 목록에 없는 sender 는 404 RES_001, cursor 가 틀리면 400 VAL_001, 하나도 확인하지 못했으면 503 MAIL_001
+   */
+  function runSenderBlock(request: MailBlockRunRequest, options?: MailRequestOptions): Promise<MailBlockRun> {
+    return api.post<MailBlockRun, MailBlockRun>(
+      '/mail-block-runs',
+      { sender: request.sender, cursor: request.cursor },
+      { timeout: MAIL_BLOCK_RUN_TIMEOUT_MS, ...options },
+    )
+  }
+
   /**
    * 새 메일 확인 — 메일함이나 메일이 하나라도 바뀌면 state 가 달라진다 (계약 2절 "새 메일 확인").
    * 메일을 읽지 않는 가벼운 조회라 화면이 보이는 동안 1분마다 부른다 (useMailStatePolling)
@@ -447,6 +489,28 @@ export function useMail() {
     return api.delete<ScheduledMessageCancel, ScheduledMessageCancel>(`/scheduled-messages/${segment(id)}`, options)
   }
 
+  /**
+   * 예약한 메일을 지금 보낸다 (15단계 — 읽기 화면 예약 안내 줄의 [지금 보내기]). id 는 보낸 사본의 메일 id(예약 취소와 같다), 본문 없음.
+   * 서버가 예약을 거두고 같은 메일을 다시 제출한다 — 보내기 취소 설정의 초만큼 붙잡았다 보내면 pendingSend { kind: 'undo' }, 바로 보냈으면 null.
+   * 예약 시각이 막 지나 이미 보낸 메일 · 이미 지금 보내기를 한 메일도 200 이다(오류가 아니다). 예약이 아닌 메일 · 없는 메일은 404 RES_001.
+   * 다시 제출하지 못하면 503 MAIL_001 — 엔진이 거절했으면 임시보관함으로 되돌렸고, 결과를 모르면 메일은 보낸편지함에 그대로이며 같은 요청을 다시 보내면
+   * 서버가 이어 낸다(어느 쪽인지는 그 메일을 다시 읽어 가른다 — stores/mail/scheduled.ts). 받는 사람이 모두 받지 않으면 400 MAIL_010 · 503 MAIL_011(임시보관함으로 되돌렸다),
+   * 같은 메일의 취소 · 지금 보내기가 진행 중이면 429 REQ_001. 발송처럼 한도는 MAIL_SEND_TIMEOUT_MS (서버는 54초 남짓 안에 답한다).
+   * 받는 사람별 결과(rejectedRecipients)와 pendingSend 는 발송과 같은 규칙으로 늘 값으로 맞춘다 — 없거나 모양이 틀리면 빈 배열 · null, id 가 없으면 요청한 id
+   */
+  async function releaseScheduledMessage(id: string, options?: MailRequestOptions): Promise<ReleasedSend> {
+    const released = await api.post<ScheduledReleaseReply, ScheduledReleaseReply>(
+      `/scheduled-messages/${segment(id)}/release`,
+      undefined,
+      { timeout: MAIL_SEND_TIMEOUT_MS, ...options },
+    )
+    return {
+      id: typeof released?.id === 'string' && released.id !== '' ? released.id : id,
+      rejectedRecipients: Array.isArray(released?.rejectedRecipients) ? released.rejectedRecipients : [],
+      pendingSend: pendingSendOf(released?.pendingSend),
+    }
+  }
+
   /**
    * 첨부 한 개 업로드 (multipart `file`).
    * 형식·크기 오류(FILE_001·FILE_002)는 파일 목록에 직접 표시하므로 그 코드만 전역 알림을 끈다.
@@ -505,6 +569,7 @@ export function useMail() {
     getQuota,
     createMailbox,
     renameMailbox,
+    moveMailbox,
     deleteMailbox,
     markMailboxRead,
     emptyMailbox,
@@ -513,6 +578,7 @@ export function useMail() {
     getFilters,
     saveFilters,
     runFilter,
+    runSenderBlock,
     messageSourceUrl,
     downloadMessageSource,
     getMailState,
@@ -527,6 +593,7 @@ export function useMail() {
     sendMessage,
     listScheduledMessages,
     cancelScheduledMessage,
+    releaseScheduledMessage,
     uploadAttachment,
     attachmentDownloadUrl,
     downloadAttachment,
diff --git a/frontend/src/composables/useMailDrag.ts b/frontend/src/composables/useMailDrag.ts
new file mode 100644
index 0000000..bc11403
--- /dev/null
+++ b/frontend/src/composables/useMailDrag.ts
@@ -0,0 +1,169 @@
+import { computed, shallowRef } from 'vue'
+
+import { MAIL_BULK_TEXT } from '@/shared/constants/mail'
+import type { Mailbox } from '@/shared/types/mail'
+import { formatCount } from '@/shared/utils/format'
+import { conversationActionIdsOf, isConversationHeld } from '@/shared/utils/mail-conversation-list'
+import { scopeMailboxIdOf } from '@/shared/utils/mail-list-source'
+import { canDropMailOn, hereMailboxIds } from '@/shared/utils/mail-move-targets'
+import { isHeldMessage } from '@/shared/utils/pending-send'
+import { createUuid } from '@/shared/utils/uuid'
+import { useMailStore } from '@/stores/mail.store'
+
+// 목록 줄을 메일함 패널로 끌어다 놓기 (15단계 — 디자인 원본 ListDrag15 · 디자인 README "15단계")
+// - 끄는 것: 고른 줄을 끌면 고른 것 모두, 고르지 않은 줄을 끌면 그 줄만(고른 것은 그대로). 대화로 묶은 목록은 그 대화에서 지금 메일함에 든 메일
+//   (붙잡힌 메일은 빼고 — [이동 ▾]와 같다). 보내기를 기다리는 메일의 줄 · 그런 메일뿐인 대화 줄은 끌 수 없다
+// - 끄는 동안 마우스 오른쪽 아래에 "메일 N통" · "대화 N개" 표(MailDragChip — setDragImage). 끈 줄은 흐리게 하지 않는다
+// - 놓을 곳은 메일함 패널의 줄(MailboxPanelRow) — [이동 ▾]의 옮길 곳 + 휴지통([삭제]와 같다). 메일이 이미 든 메일함 · 임시보관함 · 「예약됨」은 놓을 수 없다
+//   (브라우저의 금지 커서 — dragover 를 받지 않는다)
+// - 끄는 것은 우리 끌기 자료(MAIL_DRAG_TYPE)뿐이다 — 줄의 링크가 끌어 가던 메일 주소(URL)는 지운다. 다른 창 · 바깥 프로그램에 놓아도 아무 일 없다
+// - 끄는 동안의 자료는 이 탭의 메모리에만 둔다(dragover 에서는 dataTransfer 의 값을 읽을 수 없다) — 놓을 때 dataTransfer 의 표와 견줘 같은 끌기인지 본다
+// - 마우스로만 한다 — 키보드 · 터치는 [이동 ▾](옮길 곳 · 알림이 같다)
+
+/** 우리 끌기 자료의 종류 — 값은 이 끌기의 표(token) */
+export const MAIL_DRAG_TYPE = 'application/x-arasystem-mail'
+
+/** 옮길 메일 하나 — id 와 되돌릴 메일함을 정할 메일함 (스토어의 moveMessages 와 같은 꼴) */
+export interface MailDragTarget {
+  id: string
+  mailboxIds: string[]
+}
+
+/** 끄는 동안의 자료 */
+export interface MailDragPayload {
+  /** 이 끌기의 표 — dataTransfer 에 실은 값과 같아야 놓기를 받는다 */
+  token: string
+  /** 끈 것 — 메일 줄 · 대화 줄 */
+  kind: 'messages' | 'conversations'
+  /** 표의 수 — 메일 수 또는 대화 수 */
+  count: number
+  targets: MailDragTarget[]
+  /** 놓을 수 없는 메일함 — 메일이 이미 든 곳 (mail-move-targets.ts 의 hereMailboxIds) */
+  hereIds: ReadonlySet<string>
+  /** 고른 것을 끌었다 — 옮기면 고른 것을 푼다 */
+  fromSelection: boolean
+}
+
+/** 지금 끄는 것 — 놓거나 그만두면 null */
+const current = shallowRef<MailDragPayload | null>(null)
+/** 마우스를 따라오는 표 — MailDragChip 이 그린다 (setDragImage 는 그려 둔 요소의 모습을 찍는다) */
+let chipElement: HTMLElement | null = null
+
+/** 메일을 끄는 중인가 — 끌기가 끝나면(놓음 · 그만둠) 메일함 줄이 켜 둔 점선을 끈다 (MailboxPanelRow) */
+export const mailDragging = computed<boolean>(() => current.value !== null)
+
+/** MailDragChip 이 표 요소를 알린다 (사라질 때 null) */
+export function registerMailDragChip(element: HTMLElement | null): void {
+  chipElement = element
+}
+
+/** 지금 끄는 메일 — 우리 끌기이고 이 탭에서 시작했을 때만 (다른 탭 · 바깥에서 끌어 온 것은 null) */
+export function activeMailDrag(event: DragEvent): MailDragPayload | null {
+  const types = event.dataTransfer?.types
+  if (!types || !Array.from(types).includes(MAIL_DRAG_TYPE)) return null
+  return current.value
+}
+
+/** 놓은 끌기 — 표가 같을 때만 자료를 돌려주고 끌기를 끝낸다 */
+export function takeMailDrop(event: DragEvent): MailDragPayload | null {
+  const payload = activeMailDrag(event)
+  if (!payload || event.dataTransfer?.getData(MAIL_DRAG_TYPE) !== payload.token) return null
+  current.value = null
+  return payload
+}
+
+/** 끌기가 끝났다 — 놓았든 그만뒀든 (끈 줄의 dragend) */
+export function endMailDrag(): void {
+  current.value = null
+}
+
+/** 그 메일함에 지금 끄는 메일을 놓을 수 있는가 */
+export function canDropDragOn(payload: MailDragPayload, mailbox: Pick<Mailbox, 'id' | 'role'>): boolean {
+  return canDropMailOn(mailbox, payload.hereIds)
+}
+
+/** 표에 수 · 아이콘을 넣는다 — 끌기를 시작하는 그 순간에 그려져 있어야 해서 화면 갱신을 기다리지 않고 바로 고친다 */
+function paintChip(chip: HTMLElement, payload: MailDragPayload) {
+  const count = formatCount(payload.count)
+  chip.dataset.kind = payload.kind
+  const label = chip.querySelector<HTMLElement>('[data-drag-chip-text]')
+  if (label) {
+    label.textContent =
+      payload.kind === 'conversations' ? MAIL_BULK_TEXT.dragConversations(count) : MAIL_BULK_TEXT.dragMessages(count)
+  }
+}
+
+/**
+ * 끌기를 시작한다 — 링크가 실은 주소를 지우고 우리 자료만 싣는다. 표가 있으면 마우스를 따라오게 한다
+ * (표 요소의 왼쪽 위가 마우스 자리다 — 표는 그 안에서 오른쪽 아래로 비켜 그려 둔다, MailDragChip)
+ */
+function beginMailDrag(event: DragEvent, payload: MailDragPayload) {
+  const transfer = event.dataTransfer
+  if (!transfer) return
+  transfer.clearData()
+  transfer.setData(MAIL_DRAG_TYPE, payload.token)
+  transfer.effectAllowed = 'move'
+  if (chipElement) {
+    paintChip(chipElement, payload)
+    transfer.setDragImage(chipElement, 0, 0)
+  }
+  current.value = payload
+}
+
+/**
+ * 목록 줄의 끌기 (MessageListItem · MessageTableRow · ConversationListItem · ConversationTableRow).
+ * 줄 요소에 :draggable="!held"(보내기를 기다리는 메일의 줄은 끌 수 없다) · @dragstart="drag.start($event, id)" · @dragend="drag.end" 를 단다.
+ * 끌 수 없는 줄에서 시작한 끌기(줄 안의 링크를 끈 것)는 dragstart 에서 막는다
+ */
+export function useMailRowDrag() {
+  const mailStore = useMailStore()
+
+  /** 끌 수 있는 줄인가 — 보내기를 기다리는 메일의 줄 · 그런 메일뿐인 대화 줄은 아니다 */
+  function canDrag(rowId: string): boolean {
+    if (mailStore.isConversationList) {
+      const row = mailStore.conversations.find((entry) => entry.id === rowId)
+      return Boolean(row && !isConversationHeld(row))
+    }
+    const message = mailStore.messages.find((entry) => entry.id === rowId)
+    return Boolean(message && !isHeldMessage(message))
+  }
+
+  /** 그 줄을 끌면 옮길 것 — 고른 줄이면 고른 것 모두 */
+  function payloadOf(rowId: string): MailDragPayload | null {
+    if (!canDrag(rowId)) return null
+    const fromSelection = mailStore.checkedIds.has(rowId)
+    const scopeId = scopeMailboxIdOf(mailStore.listSource)
+    let kind: MailDragPayload['kind']
+    let count: number
+    let targets: MailDragTarget[]
+    if (mailStore.isConversationList) {
+      const rows = fromSelection
+        ? mailStore.checkedConversations
+        : mailStore.conversations.filter((entry) => entry.id === rowId)
+      kind = 'conversations'
+      count = rows.length
+      targets = conversationActionIdsOf(rows).map((id) => ({ id, mailboxIds: scopeId ? [scopeId] : [] }))
+    } else {
+      const messages = fromSelection
+        ? mailStore.checkedMessages
+        : mailStore.messages.filter((entry) => entry.id === rowId && !isHeldMessage(entry))
+      kind = 'messages'
+      count = messages.length
+      targets = messages.map((message) => ({ id: message.id, mailboxIds: [...message.mailboxIds] }))
+    }
+    if (targets.length === 0) return null
+    return { token: createUuid(), kind, count, targets, hereIds: hereMailboxIds(targets, scopeId), fromSelection }
+  }
+
+  function start(event: DragEvent, rowId: string) {
+    const payload = payloadOf(rowId)
+    if (!payload) {
+      // 끌 수 없는 줄 — 링크의 주소 끌기도 막는다
+      event.preventDefault()
+      return
+    }
+    beginMailDrag(event, payload)
+  }
+
+  return { canDrag, start, end: endMailDrag }
+}
diff --git a/frontend/src/composables/useMailFilterRun.spec.ts b/frontend/src/composables/useMailFilterRun.spec.ts
index 24a4933..7ae8f71 100644
--- a/frontend/src/composables/useMailFilterRun.spec.ts
+++ b/frontend/src/composables/useMailFilterRun.spec.ts
@@ -7,6 +7,7 @@ import { SEARCH_SCOPE_ALL } from '@/shared/constants/mail'
 import { MAIL_FILTER_RUN_TEXT } from '@/shared/constants/mail-filter'
 import type { Mailbox, MailFilterRule, MailFilterRun, MailFilterRunRequest } from '@/shared/types/mail'
 import { useAuthStore } from '@/stores/auth.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
 import { useMailFilterRunStore } from '@/stores/mail-filter-run.store'
 import { useMailStore } from '@/stores/mail.store'
 import { useToastStore, type Toast } from '@/stores/toast.store'
@@ -237,7 +238,7 @@ describe('useMailFilterRun', () => {
     await flushPromises()
 
     expect(useToastStore().toasts).toMatchObject([
-      { kind: 'error', message: '다른 창에서 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.', action: null },
+      { kind: 'error', message: '다른 창에서 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.', action: null },
     ])
   })
 
@@ -252,7 +253,7 @@ describe('useMailFilterRun', () => {
     expect(useToastStore().toasts).toHaveLength(1)
     expect(toast).toMatchObject({
       kind: 'error',
-      message: '다른 창에서 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+      message: '다른 창에서 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
       action: { label: '다시 시도' },
     })
     press(toast)
@@ -327,7 +328,8 @@ describe('useMailFilterRun', () => {
     await flushPromises()
 
     expect(runs()).toHaveLength(3)
-    const busy = '다른 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.'
+    // 차단 정리와 함께 쓰는 공용 글 (15단계에 "다른 필터로 …"에서 바꿨다)
+    const busy = '받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.'
     expect(shown()).toEqual([
       ['progress', '‘둘’ 필터로 받은편지함을 정리하는 중 · 0 / 8,412통 확인'],
       ['error', busy],
@@ -349,6 +351,27 @@ describe('useMailFilterRun', () => {
     expect(shown()).toEqual([['success', '‘하나’ 필터로 받은편지함의 메일 37통을 정리했습니다.']])
   })
 
+  it('이 탭에서 차단할 때 받은 메일을 옮기는 중(15단계)에도 시작하지 않고 공용 글로 알린다 — 정리가 끝난 뒤 [다시 시도]로 보낸다', async () => {
+    replies(step(8412, 3, 0, null))
+    const blockRun = useMailBlockRunStore()
+    blockRun.running = true
+
+    expect(useMailFilterRun().start(rule())).toBe(false)
+    await flushPromises()
+    expect(runs()).toEqual([])
+    const busy = withAction()
+    expect(busy).toMatchObject({
+      kind: 'error',
+      message: '받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+      action: { label: '다시 시도' },
+    })
+
+    blockRun.running = false
+    press(busy)
+    await flushPromises()
+    expect(runs()).toHaveLength(1)
+  })
+
   describe('끝난 뒤 개수 · 목록 맞추기 (4단계 오래 걸리는 처리와 같은 결)', () => {
     it('끝나면 메일함 개수 · 사용량을 다시 받고, 받은편지함 목록을 보고 있으면 그 목록도 맞춘다', async () => {
       viewing('inbox')
diff --git a/frontend/src/composables/useMailFilterRun.ts b/frontend/src/composables/useMailFilterRun.ts
index cd58067..2490d49 100644
--- a/frontend/src/composables/useMailFilterRun.ts
+++ b/frontend/src/composables/useMailFilterRun.ts
@@ -10,6 +10,7 @@ import {
 } from '@/shared/utils/mail-filter-run'
 import { listLocationOf, scopeMailboxIdOf } from '@/shared/utils/mail-list-source'
 import { useAuthStore } from '@/stores/auth.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
 import { useMailFilterRunStore, type MailFilterRunOutcome } from '@/stores/mail-filter-run.store'
 import { useMailStore } from '@/stores/mail.store'
 import type { ToastAction } from '@/stores/toast.store'
@@ -28,8 +29,9 @@ import type { ToastAction } from '@/stores/toast.store'
 //   실패 까닭(서버 · 연결)은 스토어가 사전 문구로 알렸다 — 진행 알림은 결과로만 바뀌고 같은 오류를 다시 띄우지 않는다(4단계와 같다).
 //   단추는 띄운 세션에서만 움직인다 (useToast)
 // - 끝났거나 이번에 나아간 뒤 멈췄으면 개수 · 목록을 맞춘다(4단계 settle 과 같은 결) — 실시간 연결이 없는 탭에서 1분까지 옛 개수가 보이지 않게
-// - 이 탭에서 다른 적용이 돌고 있으면 시작하지 않고 "다른 필터를 … 끝난 뒤 다시 시도해 주세요." + 같은 [다시 시도](같은 자리 · 같은 수) —
-//   앞 적용이 끝난 뒤 다시 누를 수 있다 (고치기 창은 그동안 칸을 끈다 — 이 길은 앞 실패 알림의 [다시 시도]에서 온다)
+// - 이 탭에서 받은편지함을 정리하는 중이면(다른 필터 적용 · 차단 정리 — 15단계 inboxBusy) 시작하지 않고
+//   "받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요."(공용 글) + 같은 [다시 시도](같은 자리 · 같은 수) —
+//   앞 정리가 끝난 뒤 다시 누를 수 있다 (고치기 창은 그동안 칸을 끈다 — 이 길은 앞 실패 알림의 [다시 시도]에서 온다)
 // - 그동안 다른 화면으로 가도 이어 한다 — 스토어가 돌리고, 이 함수가 만든 단추도 화면이 사라진 뒤에 움직인다. 세션이 바뀌면 멈추고 알림을 닫는다
 
 /** 시작할 자리 — 처음부터(cursor null · 수 0) 또는 앞 실패의 자리 */
@@ -39,6 +41,8 @@ type FailedOutcome = Extract<MailFilterRunOutcome, { status: 'failed' }>
 
 export function useMailFilterRun() {
   const runStore = useMailFilterRunStore()
+  /** 이 탭에서 받은편지함을 정리하는 중인지 — 필터 적용 · 차단 정리 (inboxBusy) */
+  const inboxCleanup = useMailBlockRunStore()
   const mailStore = useMailStore()
   const authStore = useAuthStore()
   const toast = useToast()
@@ -91,11 +95,11 @@ export function useMailFilterRun() {
   }
 
   /**
-   * 진행 알림을 띄우고 끝날 때까지 보낸다. 이 탭에서 다른 적용이 돌고 있으면 시작하지 않고 알린다 —
-   * 같은 자리 · 같은 수의 [다시 시도]를 붙여 앞 적용이 끝난 뒤 다시 누를 수 있게
+   * 진행 알림을 띄우고 끝날 때까지 보낸다. 이 탭에서 받은편지함을 정리하는 중이면(다른 필터 적용 · 차단 정리) 시작하지 않고 알린다 —
+   * 같은 자리 · 같은 수의 [다시 시도]를 붙여 앞 정리가 끝난 뒤 다시 누를 수 있게
    */
   async function execute(rule: MailFilterRule, request: MailFilterRunRule, from: RunFrom): Promise<void> {
-    if (runStore.running) {
+    if (inboxCleanup.inboxBusy) {
       toast.error(MAIL_FILTER_RUN_TEXT.busy, retryAction(rule, request, from))
       return
     }
@@ -120,13 +124,13 @@ export function useMailFilterRun() {
 
   /**
    * 저장한 규칙(응답 목록의 그 규칙 — 앞뒤 공백을 지운 값)을 받은편지함에 적용한다. 진행 알림이 저장 알림을 대신하면 true.
-   * 이미 받은 메일에 할 일이 없으면(고치기 창의 칸과 같은 판정 — 칸이 꺼져 있었다) 보내지 않는다. 이 탭에서 다른 적용이 돌고 있으면
+   * 이미 받은 메일에 할 일이 없으면(고치기 창의 칸과 같은 판정 — 칸이 꺼져 있었다) 보내지 않는다. 이 탭에서 받은편지함을 정리하는 중이면
    * 그렇게 알리기만 한다([다시 시도] 단추와 함께). 둘 다 false — 부르는 쪽이 "필터를 저장했습니다."를 띄운다
    */
   function start(rule: MailFilterRule): boolean {
     const request = filterRunRuleOf(rule, mailStore.mailboxes)
     if (!request) return false
-    const started = !runStore.running
+    const started = !inboxCleanup.inboxBusy
     void execute(rule, request, fromStart())
     return started
   }
diff --git a/frontend/src/composables/useMailMoveFeedback.ts b/frontend/src/composables/useMailMoveFeedback.ts
index e391e98..01844e3 100644
--- a/frontend/src/composables/useMailMoveFeedback.ts
+++ b/frontend/src/composables/useMailMoveFeedback.ts
@@ -1,5 +1,6 @@
 import { useToast } from './useToast'
 import { DRAFT_UNDO_LABEL } from '@/shared/constants/mail'
+import type { Mailbox } from '@/shared/types/mail'
 import {
   movedMessageText,
   notSpamMovedText,
@@ -8,6 +9,7 @@ import {
   type BulkOrigin,
   type BulkTextOptions,
 } from '@/shared/utils/mail-bulk'
+import { mailboxDisplayName } from '@/shared/utils/mailbox'
 import { useMailStore, type BulkMoveResult, type MailBulkResult, type MoveOptions } from '@/stores/mail.store'
 
 /**
@@ -21,16 +23,24 @@ import { useMailStore, type BulkMoveResult, type MailBulkResult, type MoveOption
  * - 일부만 처리했으면 뒤에 "N통은 그사이 옮겨졌거나 지워져 그대로 두었습니다." (하나도 못 했으면 그 문장만)
  * - 하나도 보내지 못했으면(요청 실패 — 인터셉터가 알렸다) 알리지 않는다
  * 되돌리기는 알림을 띄운 세션에서만 움직인다 (useToast)
+ * 메일함 이름은 같은 이름의 메일함이 다른 곳에도 있을 때만 위 메일함 이름을 붙인다 — "메일 1통을 거래처 › 2025로 옮겼습니다." (15단계 — mailbox.ts 의 mailboxDisplayName,
+ * 목록 · 읽기 화면의 [이동 ▾] · 끌어다 놓기 · 되돌리기 알림이 모두 같다)
  */
 export function useMailMoveFeedback() {
   const mailStore = useMailStore()
   const toast = useToast()
 
+  /** 알림에 쓰는 메일함 이름 — 같은 이름이 다른 곳에도 있으면 "거래처 › 2025" */
+  function placeName(mailbox: Pick<Mailbox, 'id' | 'name'>): string {
+    return mailboxDisplayName(mailStore.mailboxes, mailbox)
+  }
+
   /** 되돌린 메일함의 이름 — 한 메일함으로 되돌릴 때만(여러 곳이면 null), 메일함 목록에 없으면 null */
   function restoredPlaceOf(origins: readonly BulkOrigin[]): string | null {
     if (origins.length !== 1) return null
     const mailboxId = origins[0]?.mailboxId
-    return mailStore.mailboxes.find((mailbox) => mailbox.id === mailboxId)?.name ?? null
+    const mailbox = mailStore.mailboxes.find((candidate) => candidate.id === mailboxId)
+    return mailbox ? placeName(mailbox) : null
   }
 
   async function undo(origins: readonly BulkOrigin[], options: MoveOptions): Promise<void> {
@@ -40,13 +50,17 @@ export function useMailMoveFeedback() {
     if (done > 0 || skipped > 0) toast.success(restoredMessageText(done, skipped, restoredPlaceOf(origins)))
   }
 
-  /** textOptions.from — 대화로 묶은 목록에서 줄에 한 일이면 그 목록의 메일함 이름 ("받은편지함에 있는 메일 2통을 …") */
-  function announceMove(result: BulkMoveResult, mailboxName: string, textOptions: BulkTextOptions = {}) {
+  /**
+   * target — 옮긴 메일함(알림의 이름은 placeName).
+   * textOptions.from — 대화로 묶은 목록에서 줄에 한 일이면 그 목록의 메일함 이름 ("받은편지함에 있는 메일 2통을 …")
+   */
+  function announceMove(result: BulkMoveResult, target: Pick<Mailbox, 'id' | 'name'>, textOptions: BulkTextOptions = {}) {
     const done = result.doneIds.length
     const skipped = result.skippedIds.length
     if (done === 0 && skipped === 0) return
     const origins = result.origins
     const undoOptions: MoveOptions = result.isJunk === undefined ? {} : { isJunk: !result.isJunk }
+    const mailboxName = placeName(target)
     const text =
       result.isJunk === false
         ? notSpamMovedText(done, mailboxName, skipped, textOptions)
@@ -64,5 +78,5 @@ export function useMailMoveFeedback() {
     if (done > 0 || skipped > 0) toast.success(purgedMessageText(done, skipped, textOptions))
   }
 
-  return { announceMove, announcePurge }
+  return { announceMove, announcePurge, placeName }
 }
diff --git a/frontend/src/composables/useMailboxActions.ts b/frontend/src/composables/useMailboxActions.ts
index 98564f7..66540b2 100644
--- a/frontend/src/composables/useMailboxActions.ts
+++ b/frontend/src/composables/useMailboxActions.ts
@@ -8,13 +8,20 @@ import type { ErrorCode } from '@/shared/constants/error-codes.generated'
 import { MAILBOX_RESULT_TEXT } from '@/shared/constants/mailbox-manage'
 import type { Mailbox } from '@/shared/types/mail'
 import { isSearchRouteName, listLocationOf, scopeMailboxIdOf } from '@/shared/utils/mail-list-source'
-import { initialOperationTotal, mailboxOperationCopy, type MailboxOperationKind } from '@/shared/utils/mailbox-operation'
-import { useMailStore } from '@/stores/mail.store'
+import { descendantMailboxes } from '@/shared/utils/mailbox'
+import {
+  initialOperationTotal,
+  mailboxMoveText,
+  mailboxOperationCopy,
+  type MailboxOperationKind,
+} from '@/shared/utils/mailbox-operation'
+import { useMailStore, type MailboxOperationOptions } from '@/stores/mail.store'
 
 // 메일함 관리 — 메일함 패널의 ⋯ 메뉴 · 대화상자와 휴지통 / 스팸메일함 목록 머리의 「비우기」가 하는 일 (계약 2절 "메일함 관리" · 디자인 README "4단계")
 // - 만들기 · 이름 바꾸기: 대화상자가 칸 안에 보일 실패(같은 이름 MAIL_009 · 형식 VAL_001)는 알리지 않고 돌려준다. 그 밖은 인터셉터가 알린다.
 //   성공하면 짧은 알림 ("‘협력사’ 메일함을 만들었습니다." · "메일함 이름을 바꿨습니다.") — 메일함 패널에 바로 나타난다.
 //   기다리는 사이 세션이 바뀌었으면 아무것도 하지 않는다 (canceled)
+// - 옮기기(15단계): 같은 이름(MAIL_009)만 창이 칸 아래에 보인다. 옮기면 "‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다." + [되돌리기](원래 있던 곳으로)
 // - 오래 걸리는 처리(모두 읽음 · 비우기 · 메일함 지우기): 알림이 "…하는 중 · 600 / 1,234통"(돌아가는 아이콘)으로 남았다가 끝나면 결과로 바뀐다.
 //   처리하는 동안 다른 일을 해도 된다. 도중에 실패하면 거기까지 처리한 수를 알린다(실패 까닭은 인터셉터가 알렸다 — 하나도 못 했으면 그것만).
 //   다른 탭이 먼저 해서 처리할 것이 없었으면 그렇게 알린다("…에 안 읽은 메일이 없습니다." · "…이 이미 비어 있습니다.").
@@ -25,6 +32,8 @@ import { useMailStore } from '@/stores/mail.store'
 
 /** 이름 대화상자가 칸 안에 보이는 실패 — 같은 이름 · 형식 */
 const NAME_INLINE_CODES: readonly ErrorCode[] = ['MAIL_009', 'VAL_001']
+/** 옮기기 창이 칸 아래에 보이는 실패 — 그사이 옮길 곳에 같은 이름이 생겼다 (15단계 — 보통은 창이 먼저 막는다) */
+const MOVE_INLINE_CODES: readonly ErrorCode[] = ['MAIL_009']
 /** 메일함 패널의 지금 메일함 항목 (MailboxPanel 의 data-mailbox-panel) */
 const CURRENT_MAILBOX_LINK = '[data-mailbox-panel] a[aria-current="page"]'
 
@@ -86,6 +95,46 @@ export function useMailboxActions() {
     )
   }
 
+  /** 새 상위의 메일함 — 맨 위(null)면 null. 목록에 없으면(그사이 지워짐) null 로 보고 이름 없이 알린다 */
+  function parentOf(parentId: string | null): Mailbox | null {
+    return parentId === null ? null : (mailStore.mailboxes.find((mailbox) => mailbox.id === parentId) ?? null)
+  }
+
+  /**
+   * [되돌리기] — 원래 있던 곳으로 다시 옮긴다. 실패(그사이 원래 자리에 같은 이름이 생김 · 원래 상위가 지워짐 등)는 인터셉터가 알린다.
+   * 기다리는 사이 세션이 바뀌었으면 알리지 않는다 (단추는 띄운 세션에서만 움직인다 — useToast)
+   */
+  async function undoMove(mailbox: Mailbox, originalParentId: string | null): Promise<void> {
+    const into = parentOf(originalParentId)
+    try {
+      const moved = await mailStore.moveMailbox(mailbox.id, originalParentId)
+      if (moved) toast.success(mailboxMoveText(moved.name, into, { restored: true }))
+    } catch {
+      // 인터셉터가 알렸다
+    }
+  }
+
+  /**
+   * 메일함 옮기기 (15단계 — 디자인 원본 Mailbox15). 같은 이름(MAIL_009)은 창이 칸 아래에 보이도록 알리지 않고 돌려준다 — 그 밖은 인터셉터가 알린다.
+   * 옮겼으면 "‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다." + [되돌리기](원래 있던 곳으로) — 메일함 패널에 바로 나타나고, 보던 메일함이면 그대로 본다(id 가 같다)
+   */
+  async function move(mailbox: Mailbox, parentId: string | null): Promise<MailboxNameResult> {
+    const originalParentId = mailbox.parentId
+    const into = parentOf(parentId)
+    try {
+      const moved = await mailStore.moveMailbox(mailbox.id, parentId, { silent: MOVE_INLINE_CODES })
+      if (!moved) return { status: 'canceled' }
+      toast.success(mailboxMoveText(moved.name, into), {
+        label: MAILBOX_RESULT_TEXT.undo,
+        run: () => void undoMove(moved, originalParentId),
+      })
+      return { status: 'saved', mailbox: moved }
+    } catch (error) {
+      const apiError = toApiError(error)
+      return { status: 'failed', error: apiError, inline: MOVE_INLINE_CODES.includes(apiError.code) }
+    }
+  }
+
   /** 지금 화면이 그 메일함(의 목록 · 메일 · 그 안의 검색)을 보고 있는가 */
   function isViewing(mailboxId: string): boolean {
     const route = router.currentRoute.value
@@ -94,8 +143,9 @@ export function useMailboxActions() {
   }
 
   /** 끝난 뒤의 이동 (위 규칙) */
-  async function moveAway(kind: MailboxOperationKind, mailboxId: string): Promise<void> {
-    if (!isViewing(mailboxId)) return
+  async function moveAway(kind: MailboxOperationKind, mailboxIds: readonly string[]): Promise<void> {
+    // 하위까지 지웠으면 하위 메일함을 보고 있어도 받은편지함으로 (15단계)
+    if (!mailboxIds.some(isViewing)) return
     if (kind === 'delete') {
       await replaceWithMailbox(mailStore.defaultMailbox?.id ?? null)
       return
@@ -113,12 +163,21 @@ export function useMailboxActions() {
     document.querySelector<HTMLElement>(CURRENT_MAILBOX_LINK)?.focus()
   }
 
-  async function runOperation(kind: MailboxOperationKind, mailbox: Mailbox): Promise<void> {
+  async function runOperation(
+    kind: MailboxOperationKind,
+    mailbox: Mailbox,
+    options: MailboxOperationOptions = {},
+  ): Promise<void> {
     if (isRunning(kind, mailbox.id) || isBlocked(kind, mailbox)) return
     const copy = mailboxOperationCopy(kind, mailbox.name)
-    const progress = toast.progress(copy.progress(0, initialOperationTotal(kind, mailbox)))
-    const outcome = await mailStore.runMailboxOperation(kind, mailbox, (step) =>
-      progress.update(copy.progress(step.processed, step.total)),
+    // 하위까지 지우면 첫 응답 전의 전체 수도 나무 전체의 메일 수다 (15단계)
+    const descendants = options.withChildren ? descendantMailboxes(mailStore.mailboxes, mailbox.id) : []
+    const progress = toast.progress(copy.progress(0, initialOperationTotal(kind, mailbox, descendants)))
+    const outcome = await mailStore.runMailboxOperation(
+      kind,
+      mailbox,
+      (step) => progress.update(copy.progress(step.processed, step.total)),
+      options,
     )
     if (outcome.status === 'canceled') {
       progress.dismiss()
@@ -132,7 +191,7 @@ export function useMailboxActions() {
     }
     // 지우기는 "안의 메일 N통은 휴지통에 있습니다" — 다른 메일함에도 있어 이 메일함에서만 뺀 메일은 세지 않는다
     progress.succeed(copy.done(kind === 'delete' ? outcome.movedToTrash : outcome.processed))
-    await moveAway(kind, mailbox.id)
+    await moveAway(kind, [mailbox.id, ...descendants.map((child) => child.id)])
     if (kind !== 'read') await recoverFocus()
   }
 
@@ -146,10 +205,13 @@ export function useMailboxActions() {
     return runOperation('empty', mailbox)
   }
 
-  /** 메일함 지우기(안의 메일은 휴지통으로) — 확인 대화상자를 거친 뒤에만 부른다. 하위 메일함이 있으면 대화상자가 먼저 막는다 */
-  function remove(mailbox: Mailbox): Promise<void> {
-    return runOperation('delete', mailbox)
+  /**
+   * 메일함 지우기(안의 메일은 휴지통으로) — 확인 대화상자를 거친 뒤에만 부른다. 하위 메일함이 있으면 확인 창이 하위까지 지울지 묻고
+   * withChildren 으로 부른다 (15단계 — 진행 · 결과 알림은 지금 지우기 그대로, 수는 나무 전체)
+   */
+  function remove(mailbox: Mailbox, options: MailboxOperationOptions = {}): Promise<void> {
+    return runOperation('delete', mailbox, options)
   }
 
-  return { isRunning, isBlocked, create, rename, markAllRead, empty, remove }
+  return { isRunning, isBlocked, create, rename, move, markAllRead, empty, remove }
 }
diff --git a/frontend/src/composables/useMessageRemoval.ts b/frontend/src/composables/useMessageRemoval.ts
index e7df937..8b7a824 100644
--- a/frontend/src/composables/useMessageRemoval.ts
+++ b/frontend/src/composables/useMessageRemoval.ts
@@ -3,8 +3,9 @@ import { useRouter } from 'vue-router'
 import { notifyApiError } from './useApi'
 import { useMailMoveFeedback } from './useMailMoveFeedback'
 import { useMailNavigation } from './useMailNavigation'
-import type { MessageSummary } from '@/shared/types/mail'
+import type { Mailbox, MessageSummary } from '@/shared/types/mail'
 import { listLocationOf, messageLocationOf, sameListSource, type MailListSource } from '@/shared/utils/mail-list-source'
+import { junkMarkForMove } from '@/shared/utils/mail-move-targets'
 import { useMailStore } from '@/stores/mail.store'
 
 // 읽기 화면의 「삭제」 · 「영구 삭제」 · 「스팸 신고」 · 「스팸 아님」 — 열린 메일 한 통
@@ -17,6 +18,8 @@ import { useMailStore } from '@/stores/mail.store'
 // - 「영구 삭제」: 확인 대화상자를 거친 뒤 POST /message-deletions — "메일 1통을 영구 삭제했습니다."
 // - 「스팸 신고」: 스팸메일함으로 옮기며 스팸 표시(isJunk: true) — 스팸메일함에 든 메일이면 「스팸 아님」: 받은편지함으로 · isJunk: false.
 //   알림에 [되돌리기] (원래 메일함 · 원래 표시로)
+// - 「이동 ▾」(15단계 — 디자인 원본 Reader15): 고른 메일함으로 옮긴다 — "메일 1통을 거래처 › 2025로 옮겼습니다." + [되돌리기].
+//   스팸메일함으로 옮기면 [스팸 신고]와 같이 스팸 표시를, 스팸메일함에서 휴지통 밖으로 꺼내면 [스팸 아님]과 같이 스팸 아님 표시를 함께 보낸다(junkMarkForMove)
 // - DELETE /messages/{id} 는 쓰지 않는다 — 메일함 정보가 낡았으면(그사이 다른 창이 휴지통으로 옮겼으면) 확인 없이 영구 삭제하기 때문이다.
 //   이 길에서는 낡은 정보가 해롭지 않다: 이미 휴지통에 있는 메일을 휴지통으로 옮기면 그대로이고, 휴지통을 떠난 메일의 영구 삭제는
 //   서버가 그대로 둔다(skippedIds — 목록을 다시 맞춘다)
@@ -69,7 +72,19 @@ export function useMessageRemoval() {
     }
     const nextId = mailStore.neighborAfterRemoval(message.id)
     const result = await mailStore.moveMessages([message], trash.mailbox.id)
-    feedback.announceMove(result, trash.mailbox.name)
+    feedback.announceMove(result, trash.mailbox)
+    return outcomeOf(message.id, nextId, result.doneIds.includes(message.id), result.stale)
+  }
+
+  /**
+   * 「이동 ▾」로 고른 메일함으로 옮긴다 — 스팸메일함으로 · 스팸메일함에서 꺼내면 스팸 표시도 함께(위 규칙).
+   * 알림은 [삭제]와 같은 길이다 (되돌리기는 원래 메일함 · 원래 표시로)
+   */
+  async function moveTo(message: MessageSummary, mailbox: Mailbox): Promise<MessageRemovalOutcome> {
+    const isJunk = junkMarkForMove(mailbox, isInJunk(message))
+    const nextId = mailStore.neighborAfterRemoval(message.id)
+    const result = await mailStore.moveMessages([message], mailbox.id, isJunk === undefined ? {} : { isJunk })
+    feedback.announceMove(result, mailbox)
     return outcomeOf(message.id, nextId, result.doneIds.includes(message.id), result.stale)
   }
 
@@ -91,7 +106,7 @@ export function useMessageRemoval() {
     }
     const nextId = mailStore.neighborAfterRemoval(message.id)
     const result = await mailStore.moveMessages([message], target.mailbox.id, { isJunk: reportsSpam })
-    feedback.announceMove(result, target.mailbox.name)
+    feedback.announceMove(result, target.mailbox)
     return outcomeOf(message.id, nextId, result.doneIds.includes(message.id), result.stale)
   }
 
@@ -122,5 +137,5 @@ export function useMessageRemoval() {
     await router.replace(outcome.nextId ? messageLocationOf(source, outcome.nextId) : listLocationOf(source))
   }
 
-  return { deletesPermanently, isInJunk, moveToTrash, purge, moveSpam, stillShowing, leaveRemoved }
+  return { deletesPermanently, isInJunk, moveToTrash, moveTo, purge, moveSpam, stillShowing, leaveRemoved }
 }
diff --git a/frontend/src/composables/usePopupPlacement.ts b/frontend/src/composables/usePopupPlacement.ts
index 3e8c20c..f381692 100644
--- a/frontend/src/composables/usePopupPlacement.ts
+++ b/frontend/src/composables/usePopupPlacement.ts
@@ -1,27 +1,68 @@
 import { ref, watch, type Ref } from 'vue'
 
-import { opensUpward } from '@/shared/utils/popup-placement'
+import { opensUpward, popupAlignFor, type PopupAlign } from '@/shared/utils/popup-placement'
 
 // 펼침 메뉴를 아래로 열지 위로 열지 — 메뉴를 그린 직후(초점을 주기 전) 아래로 그린 메뉴를 재어, 보이는 영역 아래가 모자라면 위로 연다
 // (판단은 순수 함수 popup-placement.ts 의 opensUpward, 여기서는 재기만 한다).
 // 쓰는 곳: 메일함 · 주소록 그룹 줄의 ⋯ (MailboxMoreButton — 스크롤되는 패널 안), 쓰기 화면의 [보내기 ▾] (ComposeFooter — 화면 맨 아래 단추 줄.
 // 아래로 열면 메뉴가 화면 밖에 생기고 초점이 들어갈 때 쓰기 화면이 튀어 올랐다 — 2026-10-29 리뷰)
 // 메뉴는 EditorPopup 이 연 뒤 다음 틱에 초점을 준다 — 그 전에 위아래가 정해진다 (같은 그리기 차례 안의 post 감시)
+// 좌우(15단계): 메뉴를 단추의 왼쪽 끝에 맞춰 열었는데 보이는 영역 오른쪽 밖으로 넘치면 단추의 오른쪽 끝에 맞춘다 —
+// EditorPopup 이 그린 직후 스스로 잰다(measurePopupAlign — 같은 부품을 쓰는 메뉴 · 팝오버 모두). 판단은 popup-placement.ts 의 popupAlignFor
 
 /** 잘라 내는 overflow — 이 조상 밖은 보이지 않는다 */
 const CLIPPING_OVERFLOW = new Set(['auto', 'scroll', 'hidden', 'clip', 'overlay'])
 
-/** 요소가 보일 수 있는 세로 영역 — 화면과 잘라 내는 조상(스크롤되는 칸 등)들이 겹치는 부분 */
-function visibleArea(element: Element): { top: number; bottom: number } {
-  let top = 0
-  let bottom = window.innerHeight
+interface VisibleArea {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+/** 화면 폭 — 세로 스크롤 막대는 뺀다(막대 밑의 메뉴는 보이지 않는다). 재지 못하면(시험 환경 등) 창 폭 */
+function viewportWidth(): number {
+  return document.documentElement.clientWidth || window.innerWidth
+}
+
+/** 요소가 보일 수 있는 영역 — 화면과 잘라 내는 조상(스크롤되는 칸 등)들이 겹치는 부분. 세로 · 가로를 따로 본다 */
+function visibleArea(element: Element): VisibleArea {
+  const area: VisibleArea = { top: 0, bottom: window.innerHeight, left: 0, right: viewportWidth() }
   for (let node = element.parentElement; node; node = node.parentElement) {
-    if (!CLIPPING_OVERFLOW.has(getComputedStyle(node).overflowY)) continue
+    const style = getComputedStyle(node)
+    const clipsY = CLIPPING_OVERFLOW.has(style.overflowY)
+    const clipsX = CLIPPING_OVERFLOW.has(style.overflowX)
+    if (!clipsY && !clipsX) continue
     const rect = node.getBoundingClientRect()
-    top = Math.max(top, rect.top)
-    bottom = Math.min(bottom, rect.bottom)
+    if (clipsY) {
+      area.top = Math.max(area.top, rect.top)
+      area.bottom = Math.min(area.bottom, rect.bottom)
+    }
+    if (clipsX) {
+      area.left = Math.max(area.left, rect.left)
+      area.right = Math.min(area.right, rect.right)
+    }
   }
-  return { top, bottom }
+  return area
+}
+
+/**
+ * 메뉴를 단추의 어느 끝에 맞출지 잰다 — 바라는 끝(preferred)으로 그린 메뉴의 폭으로, 보이는 영역 밖으로 넘치면 덜 넘치는 반대 끝 (15단계).
+ * 메뉴는 단추를 감싼 칸(position: relative) 안에서 그 칸의 끝 — 곧 단추의 끝 — 에 맞춰 열린다 (EditorPopup)
+ */
+export function measurePopupAlign(trigger: HTMLElement, popup: HTMLElement, preferred: PopupAlign): PopupAlign {
+  const buttonRect = trigger.getBoundingClientRect()
+  const area = visibleArea(trigger)
+  return popupAlignFor(
+    {
+      triggerLeft: buttonRect.left,
+      triggerRight: buttonRect.right,
+      popupWidth: popup.getBoundingClientRect().width,
+      areaLeft: area.left,
+      areaRight: area.right,
+    },
+    preferred,
+  )
 }
 
 export interface PopupPlacementOptions {
diff --git a/frontend/src/composables/useScheduledMessageActions.ts b/frontend/src/composables/useScheduledMessageActions.ts
index d4b5a12..d6689c0 100644
--- a/frontend/src/composables/useScheduledMessageActions.ts
+++ b/frontend/src/composables/useScheduledMessageActions.ts
@@ -3,10 +3,14 @@ import { isNavigationFailure, useRouter, type RouteLocationRaw } from 'vue-route
 import { notifyApiError } from './useApi'
 import { useMessageRemoval } from './useMessageRemoval'
 import { useToast } from './useToast'
-import { SEND_LATER_TEXT } from '@/shared/constants/mail-send-later'
-import type { MessageSummary } from '@/shared/types/mail'
+import { MAIL_PARTIAL_SEND_TEXT, MAIL_SENT_ACTION_LABEL, MAIL_SENT_MESSAGE } from '@/shared/constants/mail'
+import { SEND_LATER_TEXT, UNDO_SEND_DEADLINE_MARGIN_MS, UNDO_SEND_MAX_MS } from '@/shared/constants/mail-send-later'
+import type { MessageSummary, ReleasedSend } from '@/shared/types/mail'
+import { partialSendMessage } from '@/shared/utils/mail-send-result'
+import { undoToastDeadline } from '@/shared/utils/pending-send'
 import { useAuthStore } from '@/stores/auth.store'
-import { useMailStore } from '@/stores/mail.store'
+import { useMailStore, type ReleaseOutcome } from '@/stores/mail.store'
+import { useMailSettingsStore } from '@/stores/mail-settings.store'
 
 /**
  * 붙잡아 둔 발송을 다루는 일 (계약 2절 "보내기 취소 · 예약 발송" · 디자인 README "9단계") — 모두 DELETE /scheduled-messages/{id} 한 길이다.
@@ -17,6 +21,8 @@ import { useMailStore } from '@/stores/mail.store'
  *   두 경우 모두 쓰기 화면으로 가지 못했으면(지금 화면의 나가기 확인에서 머물기로 함 등) 그 자리에 두고
  *   "…취소하고 임시보관함으로 옮겼습니다." + [고치기](그 메일로 쓰기 화면) — 취소는 이미 됐다
  * - [예약 취소](예약 안내 줄): 임시보관함으로 + "예약을 취소하고 임시보관함으로 옮겼습니다." + [고치기] — 삭제처럼 목록에서 빠진 뒤의 이동
+ * - [지금 보내기](예약 안내 줄 — 15단계): POST /scheduled-messages/{id}/release(취소가 아니다) → 쓰기 화면의 보낸 뒤 알림과 같은 알림 + [예약 취소]와 같은 이동.
+ *   보내지 못했거나 결과를 모르면(503 MAIL_001 · SYS_001) 스토어가 그 메일을 다시 받아 가른 결과대로 알린다 (sendNow)
  * - [삭제](아직 보내지 않은 메일 — 보내는 중 · 예약, 확인 창 뒤): 발송을 취소한 뒤 휴지통으로 + "보내지 않고 휴지통으로 옮겼습니다."
  * 같은 메일의 취소가 이미 진행 중이면(빠르게 두 번 누름 · 두 곳에서 누름) 두 번째는 아무것도 하지 않는다 (스토어도 요청을 하나만 보낸다).
  * 세션은 일을 시작할 때 잡는다 — 기다리는 사이 바뀌었으면(로그아웃 · 다른 계정) 이동 · 알림을 하지 않는다(앞 사용자의 메일을 새 세션에 열지 않게).
@@ -26,6 +32,7 @@ export function useScheduledMessageActions() {
   const router = useRouter()
   const authStore = useAuthStore()
   const mailStore = useMailStore()
+  const settingsStore = useMailSettingsStore()
   const toast = useToast()
   const removal = useMessageRemoval()
 
@@ -90,6 +97,90 @@ export function useScheduledMessageActions() {
     return true
   }
 
+  /**
+   * 지금 보낸 뒤의 알림 — 쓰기 화면의 보낸 뒤 알림과 같다 (디자인 원본 Reader15 "[지금 보내기]를 누른 뒤").
+   * 보내기 취소를 기다리는 중이면 "메일을 보냈습니다." + [보내기 취소](마감 알림 — 남은 시간 막대, 설정한 초로 센다),
+   * 바로 보냈거나 이미 보낸 메일이면 "메일을 보냈습니다." + [보낸편지함 보기]. 받는 사람 일부가 받지 못하면 그 문장(오류 알림 모양)으로
+   */
+  function notifyReleased(messageId: string, released: ReleasedSend) {
+    const pending = released.pendingSend
+    const now = Date.now()
+    const expiresAt =
+      pending?.kind === 'undo'
+        ? undoToastDeadline({
+            sendAt: pending.sendAt,
+            now,
+            undoSendSeconds: settingsStore.knownUndoSendSeconds,
+            marginMs: UNDO_SEND_DEADLINE_MARGIN_MS,
+            maxMs: UNDO_SEND_MAX_MS,
+          })
+        : Number.NaN
+    if (pending?.kind === 'undo' && expiresAt > now) {
+      const undo = { label: SEND_LATER_TEXT.undo, run: () => void undoSend(messageId) }
+      const partial = partialSendMessage(released.rejectedRecipients, { pendingKind: 'undo' })
+      if (partial) toast.error(partial, undo, { expiresAt })
+      else toast.success(MAIL_SENT_MESSAGE, undo, { expiresAt })
+      return
+    }
+    const sentMailbox = mailStore.mailboxByRole('sent')
+    const sentLocation = sentMailbox ? { name: 'mail-mailbox', params: { mailboxId: sentMailbox.id } } : null
+    const partial = partialSendMessage(released.rejectedRecipients)
+    if (partial) {
+      toast.error(partial, sentLocation ? { label: MAIL_PARTIAL_SEND_TEXT.action, to: sentLocation } : undefined)
+      return
+    }
+    toast.success(MAIL_SENT_MESSAGE, sentLocation ? { label: MAIL_SENT_ACTION_LABEL, to: sentLocation } : undefined)
+  }
+
+  /** 지금 보내지 못해 임시보관함으로 되돌아갔다 — "지금 보내지 못해 임시보관함으로 옮겼습니다." + [임시보관함 보기] */
+  function notifyReverted() {
+    const drafts = mailStore.mailboxByRole('drafts')
+    const draftsLocation = drafts ? { name: 'mail-mailbox', params: { mailboxId: drafts.id } } : null
+    toast.error(
+      SEND_LATER_TEXT.sendNowReverted,
+      draftsLocation ? { label: SEND_LATER_TEXT.viewDrafts, to: draftsLocation } : undefined,
+    )
+  }
+
+  /**
+   * [지금 보내기](예약 안내 줄 — 15단계) — 예약을 거두고 같은 메일을 지금 보낸다([보내기]를 누른 것과 같다 — 보내기 취소 설정의 초만큼 붙잡았다 보낸다).
+   * 확인 창은 두지 않는다. 보낸 메일은 예약됨에서 빠지므로 분할 보기는 다음 예약 메일을, 목록 보기는 예약됨 목록을 연다([예약 취소]와 같다).
+   * 보낸편지함에서 연 메일이면 그 자리에 둔다(날짜 칸이 "보내는 중"이 된다).
+   * 보내지 못했거나 결과를 모르면(503 MAIL_001 · SYS_001 — 스토어가 그 메일을 다시 받아 가른다):
+   * - 임시보관함으로 되돌아갔다: "…임시보관함으로 옮겼습니다." + [임시보관함 보기] (예약됨을 떠났다 — 이동은 위와 같다)
+   * - 예약이 그대로다(확인했다): "지금 보내지 못했습니다. 다시 시도해 주세요." + [다시 시도](같은 요청 — 안내 줄은 그대로 둔다)
+   * - 예약만 풀렸다(보낸편지함에 그대로 · 기다리는 발송이 없다): "메일을 보냈는지 확인하지 못했습니다. …" + [다시 시도] —
+   *   이미 나갔을 수 있어(보내기 취소 0초 · 응답만 잃음) 못 보냈다고 단정하지 않는다. 예약이 아닌 것은 확인했으니 안내 줄이 사라지고 예약됨에서도 빠진다(이동은 위와 같다)
+   * - 다시 받지 못했다: 같은 "확인하지 못했습니다" 글 + [다시 시도] — 안내 줄은 마지막으로 안 그대로 둔다
+   * - 다시 낸 발송이 보내기 취소를 기다린다: 보낸 것과 같다
+   * [다시 시도]는 같은 요청이다 — 이미 보낸 메일이면 서버가 200 으로 답하므로 두 통이 가지 않는다.
+   * 안내 줄이 사라지면(보냄 · 되돌림 · 예약만 풀림) true — 그 밖의 실패(인터셉터가 알렸다) · 예약이 그대로 · 다시 받지 못함 · 그사이 세션이 바뀌었으면 false
+   */
+  async function sendNow(message: MessageSummary, layout: 'split' | 'list'): Promise<boolean> {
+    if (mailStore.isReleasingPendingSend(message.id) || mailStore.isCancellingPendingSend(message.id)) return false
+    const session = authStore.generation
+    const source = mailStore.listSource
+    const nextId = mailStore.neighborAfterRemoval(message.id)
+    let outcome: ReleaseOutcome
+    try {
+      outcome = await mailStore.releasePendingSend(message.id)
+    } catch {
+      return false
+    }
+    if (authStore.generation !== session) return false
+    const retry = { label: SEND_LATER_TEXT.retry, run: () => void sendNow(message, layout) }
+    if (outcome.status === 'retryable' || outcome.status === 'unknown') {
+      toast.error(outcome.status === 'retryable' ? SEND_LATER_TEXT.sendNowFailed : SEND_LATER_TEXT.sendNowUnconfirmed, retry)
+      return false
+    }
+    if (outcome.status === 'unscheduled') toast.error(SEND_LATER_TEXT.sendNowUnconfirmed, retry)
+    else if (outcome.status === 'reverted') notifyReverted()
+    else notifyReleased(message.id, outcome.released)
+    const removed = removedFromList(message.id)
+    await removal.leaveRemoved({ removed, nextId: removed ? nextId : null }, source, layout, message.id)
+    return true
+  }
+
   /**
    * [삭제] — 아직 보내지 않은 메일(보내는 중 · 예약)의 확인 창에서 「삭제」를 누른 뒤에만 부른다.
    * 발송을 취소한 뒤 휴지통으로 옮긴다 (취소하지 않고 옮기면 엔진은 그 시각에 그대로 보낸다)
@@ -114,5 +205,5 @@ export function useScheduledMessageActions() {
     return true
   }
 
-  return { undoSend, editScheduled, cancelScheduled, deletePendingSend }
+  return { undoSend, editScheduled, cancelScheduled, sendNow, deletePendingSend }
 }
diff --git a/frontend/src/composables/useSenderBlock.ts b/frontend/src/composables/useSenderBlock.ts
index 353ec5a..a772d96 100644
--- a/frontend/src/composables/useSenderBlock.ts
+++ b/frontend/src/composables/useSenderBlock.ts
@@ -1,4 +1,5 @@
 import { notifyApiError } from './useApi'
+import { useSenderBlockRun } from './useSenderBlockRun'
 import { useToast } from './useToast'
 import { MAIL_BLOCK_TEXT } from '@/shared/constants/mail-block'
 import type { MessageSummary } from '@/shared/types/mail'
@@ -8,7 +9,7 @@ import { useAuthStore } from '@/stores/auth.store'
 import { useMailBlockStore } from '@/stores/mail-block.store'
 import { useMailStore } from '@/stores/mail.store'
 
-/** 차단의 결과 — 메일을 스팸메일함으로 옮겼으면 moved (읽기 화면이 삭제처럼 다음 메일로 넘어간다) */
+/** 차단의 결과 — 메일을 스팸메일함으로 옮겼으면 moved (읽기 화면이 삭제처럼 다음 메일로 넘어간다 — 받은편지함 정리를 켰으면 목록으로) */
 export interface SenderBlockOutcome {
   blocked: boolean
   moved: boolean
@@ -23,6 +24,7 @@ export interface SenderBlockOutcome {
  * 보낸 사람 차단 · 풀기와 그 알림 (계약 2절 "보낸 사람 차단" · 디자인 README "9단계 › 읽기 화면 · 설정 › 차단한 주소").
  * - 차단(읽기 화면의 확인 창): POST /mail-blocks → 「이 메일도 스팸메일함으로 옮기기」를 켰으면 그 메일을 스팸메일함으로(isJunk: true — 스팸 신고와 같은 길) →
  *   "‘주소’을(를) 차단하고 이 메일을 스팸메일함으로 옮겼습니다." + [되돌리기](차단을 풀고 메일을 원래 메일함으로 — 받은편지함에서 막았으면 받은편지함)
+ *   「받은편지함에 있는 이 보낸 사람의 메일도 …」(15단계)를 켰으면 그 알림 대신 받은편지함 정리의 진행 알림 하나 (useSenderBlockRun — [되돌리기] 없음)
  * - 풀기(⋯ 「보낸 사람 차단 풀기」 · 스팸메일함의 [차단 풀기] · 설정의 [차단 풀기]): DELETE → "‘주소’ 차단을 풀었습니다." + [되돌리기](다시 차단).
  *   이미 받은 메일은 옮기지 않는다. 다른 곳에서 이미 풀었으면(404) 푼 것과 같다 (스토어가 가른다)
  * 요청 실패는 인터셉터가 알린다 — 여기서는 알리지 않는다. 되돌리기는 알림을 띄운 세션에서만 움직인다 (useToast).
@@ -33,6 +35,7 @@ export function useSenderBlock() {
   const blockStore = useMailBlockStore()
   const mailStore = useMailStore()
   const toast = useToast()
+  const blockRun = useSenderBlockRun()
 
   /** 지금 세션에서 시작한 일이 그대로인지 — 시작할 때 잡아 둔 세대와 견준다 */
   function sessionGuard(): () => boolean {
@@ -54,9 +57,16 @@ export function useSenderBlock() {
   }
 
   /**
-   * 차단 — target 은 주소 또는 "@도메인". moveToJunk 면 그 메일을 스팸메일함으로 옮긴다(이미 스팸메일함이면 옮기지 않는다)
+   * 차단 — target 은 주소 또는 "@도메인". moveToJunk 면 그 메일을 스팸메일함으로 옮긴다(이미 스팸메일함이면 옮기지 않는다).
+   * cleanInbox(15단계 — 차단 창의 새 칸)면 받은편지함에 이미 있는 그 보낸 사람(도메인)의 메일도 옮기기 시작한다 — 차단 알림 대신 진행 알림 하나
+   * (useSenderBlockRun — [되돌리기] 없음, 기다리지 않는다). 이 메일을 먼저 옮겼으면(받은편지함에 있었다) 그 한 통도 옮긴 수에 넣는다
    */
-  async function block(message: MessageSummary, target: string, moveToJunk: boolean): Promise<SenderBlockOutcome> {
+  async function block(
+    message: MessageSummary,
+    target: string,
+    moveToJunk: boolean,
+    cleanInbox = false,
+  ): Promise<SenderBlockOutcome> {
     const sameSession = sessionGuard()
     let address: string
     try {
@@ -68,6 +78,8 @@ export function useSenderBlock() {
     let origins: BulkOrigin[] = []
     let moved = false
     let stale = false
+    const inboxId = mailStore.mailboxByRole('inbox')?.id
+    const wasInInbox = inboxId !== undefined && message.mailboxIds.includes(inboxId)
     if (moveToJunk) {
       const junk = await mailStore.resolveMailboxByRole('junk')
       if ('error' in junk) {
@@ -80,6 +92,10 @@ export function useSenderBlock() {
       }
     }
     if (!sameSession()) return { blocked: true, moved: false, stale }
+    if (cleanInbox) {
+      blockRun.start(address, { alreadyMoved: moved && wasInInbox ? 1 : 0 })
+      return { blocked: true, moved, stale }
+    }
     const particle = objectParticle(address)
     toast.success(
       moved ? MAIL_BLOCK_TEXT.blockedAndMoved(address, particle) : MAIL_BLOCK_TEXT.blocked(address, particle),
diff --git a/frontend/src/composables/useSenderBlockRun.spec.ts b/frontend/src/composables/useSenderBlockRun.spec.ts
new file mode 100644
index 0000000..a56df96
--- /dev/null
+++ b/frontend/src/composables/useSenderBlockRun.spec.ts
@@ -0,0 +1,285 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
+
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { MailBlockRun, MailBlockRunRequest, Mailbox } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailFilterRunStore } from '@/stores/mail-filter-run.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore, type Toast } from '@/stores/toast.store'
+import {
+  fail,
+  flushPromises,
+  installMockApi,
+  ok,
+  restoreApiAdapter,
+  type MockRequest,
+  type MockResult,
+} from '@/test-utils/mock-api'
+import { useSenderBlockRun } from './useSenderBlockRun'
+
+// 차단할 때 받은편지함의 메일도 스팸메일함으로 — 알림 하나가 진행을 보이다 결과로 · [다시 시도] · 끝난 뒤 개수 · 목록 맞추기
+// (디자인 원본 Mailbox15 "차단한 뒤 알림" · 계약 2절 "보낸 사람 차단" — 15단계)
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const SENDER = 'news@example.com'
+
+function mailbox(id: string, name: string, role: Mailbox['role'] = null, totalCount = 0): Mailbox {
+  return { id, name, role, parentId: null, sortOrder: 0, totalCount, unreadCount: 0 }
+}
+
+const MAILBOXES: Mailbox[] = [mailbox('inbox', '받은편지함', 'inbox', 4800), mailbox('junk', '스팸메일함', 'junk', 5)]
+
+function step(scanned: number, matched: number, remaining: number, cursor: string | null): MockResult {
+  const run: MailBlockRun = { scanned, matched, remaining, cursor }
+  return ok(run)
+}
+
+function deferred() {
+  let finish: (result: MockResult) => void = () => undefined
+  const promise = new Promise<MockResult>((resolve) => {
+    finish = resolve
+  })
+  return { promise, finish }
+}
+
+describe('useSenderBlockRun', () => {
+  let requests: MockRequest[]
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useAuthStore().startSession(USER)
+    useMailStore().mailboxes = MAILBOXES.map((item) => ({ ...item }))
+  })
+
+  afterEach(() => {
+    useToastStore().clear()
+    restoreApiAdapter()
+  })
+
+  function replies(...results: (MockResult | Promise<MockResult>)[]) {
+    let next = 0
+    requests = installMockApi((request) => {
+      if (request.url === '/mail-block-runs') {
+        const result = results[Math.min(next, results.length - 1)] as MockResult | Promise<MockResult>
+        next += 1
+        return result
+      }
+      if (request.url === '/mailboxes') {
+        return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: MAILBOXES.length } })
+      }
+      if (request.url === '/messages') return ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } })
+      return ok(null)
+    })
+  }
+
+  const runs = () => requests.filter((request) => request.url === '/mail-block-runs')
+  const bodies = () => runs().map((request) => request.data as MailBlockRunRequest)
+  const shown = () => useToastStore().toasts.map((toast) => [toast.kind, toast.message])
+  const withAction = () => useToastStore().toasts.find((toast) => toast.action !== null)
+  const listRequests = () => requests.filter((request) => request.method === 'GET' && request.url === '/messages')
+
+  function press(toast: Toast | undefined) {
+    if (toast?.action && 'run' in toast.action) toast.action.run()
+  }
+
+  it('진행 알림이 남았다가 끝나면 그 자리에서 결과로 — "…차단하고 받은편지함의 메일 37통을 …옮겼습니다." + [스팸메일함 보기] · [되돌리기] 없음', async () => {
+    const second = deferred()
+    replies(step(1200, 10, 3600, 'b1'), second.promise)
+
+    useSenderBlockRun().start(SENDER)
+    expect(shown()).toEqual([
+      ['progress', '‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 0 / 4,800통 확인'],
+    ])
+    await flushPromises()
+    expect(shown()).toEqual([
+      ['progress', '‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인'],
+    ])
+
+    second.finish(step(3600, 27, 0, null))
+    await flushPromises()
+    expect(bodies()).toEqual([
+      { sender: SENDER, cursor: null },
+      { sender: SENDER, cursor: 'b1' },
+    ])
+    const [toast] = useToastStore().toasts
+    expect(useToastStore().toasts).toHaveLength(1)
+    expect(toast).toMatchObject({
+      kind: 'success',
+      message: '‘news@example.com’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다.',
+      action: { label: '스팸메일함 보기', to: { name: 'mail-mailbox', params: { mailboxId: 'junk' } } },
+    })
+  })
+
+  it('먼저 옮긴 이 메일(받은편지함)도 옮긴 수에 넣는다 · 옮길 메일이 없으면 "…옮길 메일이 없습니다."(단추 없음)', async () => {
+    replies(step(4800, 0, 0, null))
+
+    useSenderBlockRun().start(SENDER, { alreadyMoved: 1 })
+    await flushPromises()
+    expect(useToastStore().toasts).toMatchObject([
+      { kind: 'success', message: '‘news@example.com’을(를) 차단하고 받은편지함의 메일 1통을 스팸메일함으로 옮겼습니다.' },
+    ])
+
+    useToastStore().clear()
+    useSenderBlockRun().start('@example.com')
+    await flushPromises()
+    expect(useToastStore().toasts).toMatchObject([
+      { kind: 'success', message: '‘@example.com’을(를) 차단했습니다. 받은편지함에는 옮길 메일이 없습니다.', action: null },
+    ])
+  })
+
+  it('도중에 멈추면 멈춤 문구 + [다시 시도] — 그 cursor 로 이어서 수를 이어 센다 (까닭은 사전 문구 알림)', async () => {
+    replies(step(1200, 12, 3600, 'b1'), fail(503, 'MAIL_001'), step(3600, 25, 0, null))
+
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(shown()).toContainEqual(['error', ERROR_CODE_MESSAGES.MAIL_001])
+    const stopped = withAction()
+    expect(stopped).toMatchObject({
+      kind: 'error',
+      message:
+        '‘news@example.com’을(를) 차단했습니다. 받은편지함은 4,800통 가운데 1,200통까지 확인해 12통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요.',
+      action: { label: '다시 시도' },
+    })
+
+    useToastStore().clear()
+    press(stopped)
+    await flushPromises()
+    expect(bodies().map((body) => body.cursor)).toEqual([null, 'b1', 'b1'])
+    expect(useToastStore().toasts).toMatchObject([
+      { message: '‘news@example.com’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다.' },
+    ])
+  })
+
+  it('처음 요청부터 실패하면 "…차단했지만 받은편지함의 메일은 옮기지 못했습니다." + [다시 시도] — 처음부터 (먼저 옮긴 수는 그대로)', async () => {
+    replies(fail(500, 'SYS_001'), step(4800, 3, 0, null))
+
+    useSenderBlockRun().start(SENDER, { alreadyMoved: 1 })
+    await flushPromises()
+    const failed = withAction()
+    expect(failed).toMatchObject({
+      kind: 'error',
+      message: '‘news@example.com’을(를) 차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요.',
+      action: { label: '다시 시도' },
+    })
+
+    useToastStore().clear()
+    press(failed)
+    await flushPromises()
+    expect(bodies().map((body) => body.cursor)).toEqual([null, null])
+    expect(useToastStore().toasts).toMatchObject([
+      { message: '‘news@example.com’을(를) 차단하고 받은편지함의 메일 4통을 스팸메일함으로 옮겼습니다.' },
+    ])
+  })
+
+  it('다른 창 · PC 에서 받은편지함이나 스팸메일함을 정리하는 중이면(429) 그 알림 하나 — 처음 요청이어도 [다시 시도]를 둔다 (차단한 뒤에는 다시 고를 길이 없다)', async () => {
+    replies(fail(429, 'REQ_001'), step(4800, 2, 0, null))
+
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(useToastStore().toasts).toHaveLength(1)
+    const busy = withAction()
+    expect(busy).toMatchObject({
+      kind: 'error',
+      message: '‘news@example.com’을(를) 차단했습니다. 다른 창에서 받은편지함이나 스팸메일함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+      action: { label: '다시 시도' },
+    })
+
+    press(busy)
+    await flushPromises()
+    expect(bodies().map((body) => body.cursor)).toEqual([null, null])
+  })
+
+  it('이 탭에서 필터를 적용하는 중이면 시작하지 않고 알린다 — 그 알림의 [다시 시도]로 앞 정리가 끝난 뒤 다시 한다', async () => {
+    replies(step(4800, 1, 0, null))
+    const filterRun = useMailFilterRunStore()
+    filterRun.running = true
+
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(runs()).toEqual([])
+    const busy = withAction()
+    expect(busy).toMatchObject({
+      kind: 'error',
+      message: '‘news@example.com’을(를) 차단했습니다. 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+      action: { label: '다시 시도' },
+    })
+
+    filterRun.running = false
+    press(busy)
+    await flushPromises()
+    expect(runs()).toHaveLength(1)
+  })
+
+  it('이 탭에서 스팸메일함을 비우는 중이면 시작하지 않고 그 까닭으로 알린다 — 비우기가 끝난 뒤 그 알림의 [다시 시도]로 한다', async () => {
+    const emptying = deferred()
+    requests = installMockApi((request) => {
+      if (request.method === 'DELETE' && request.url === '/mailboxes/junk/messages') return emptying.promise
+      if (request.url === '/mail-block-runs') return step(4800, 1, 0, null)
+      if (request.url === '/mailboxes') {
+        return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: MAILBOXES.length } })
+      }
+      return ok({ items: [], pageInfo: { hasNext: false, nextCursor: null, total: 0 } })
+    })
+    const mail = useMailStore()
+    const junk = mail.mailboxByRole('junk')
+    if (!junk) throw new Error('스팸메일함이 없다')
+    const empty = mail.runMailboxOperation('empty', junk, () => undefined)
+
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(runs()).toEqual([])
+    const busy = withAction()
+    expect(busy).toMatchObject({
+      kind: 'error',
+      message: '‘news@example.com’을(를) 차단했습니다. 스팸메일함을 비우는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+      action: { label: '다시 시도' },
+    })
+
+    emptying.finish(ok({ processed: 5, remaining: 0 }))
+    await empty
+    press(busy)
+    await flushPromises()
+    expect(runs()).toHaveLength(1)
+  })
+
+  it('그사이 차단을 풀었으면(404 RES_001) 사전 문구만 — 진행 알림은 닫는다', async () => {
+    replies(fail(404, 'RES_001'))
+
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(shown()).toEqual([['error', ERROR_CODE_MESSAGES.RES_001]])
+  })
+
+  it('끝나면 개수를 다시 받고, 받은편지함 · 스팸메일함 목록을 보고 있으면 그 목록도 맞춘다 — 다른 메일함이면 개수만', async () => {
+    replies(step(4800, 2, 0, null))
+    const mailStore = useMailStore()
+    mailStore.listSource = { kind: 'mailbox', mailboxId: 'junk' }
+    mailStore.listStatus = 'ready'
+
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(requests.some((request) => request.url === '/mailboxes')).toBe(true)
+    expect(listRequests().map((request) => request.params.mailboxId)).toEqual(['junk'])
+
+    mailStore.listSource = { kind: 'mailbox', mailboxId: 'other' }
+    useSenderBlockRun().start(SENDER)
+    await flushPromises()
+    expect(listRequests()).toHaveLength(1)
+  })
+
+  it('세션이 바뀌면 진행 알림을 닫고 다음 요청을 보내지 않는다', async () => {
+    const first = deferred()
+    replies(first.promise, step(10, 0, 0, null))
+
+    useSenderBlockRun().start(SENDER)
+    useAuthStore().clearAuth()
+    await nextTick()
+    first.finish(step(1200, 12, 3600, 'b1'))
+    await flushPromises()
+
+    expect(runs()).toHaveLength(1)
+    expect(useToastStore().toasts).toEqual([])
+  })
+})
diff --git a/frontend/src/composables/useSenderBlockRun.ts b/frontend/src/composables/useSenderBlockRun.ts
new file mode 100644
index 0000000..d4ba14c
--- /dev/null
+++ b/frontend/src/composables/useSenderBlockRun.ts
@@ -0,0 +1,125 @@
+import { useToast, type ProgressToast } from './useToast'
+import { MAIL_BLOCK_TEXT } from '@/shared/constants/mail-block'
+import { listLocationOf, scopeMailboxIdOf } from '@/shared/utils/mail-list-source'
+import { mailBlockRunCopy, type MailBlockRunCopy, type MailBlockRunCounts } from '@/shared/utils/mail-block'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailBlockRunStore, type MailBlockRunOutcome } from '@/stores/mail-block-run.store'
+import { useMailStore } from '@/stores/mail.store'
+import type { ToastAction } from '@/stores/toast.store'
+
+// 차단할 때 받은편지함에 이미 있는 그 보낸 사람의 메일도 스팸메일함으로 — 진행 · 결과 알림
+// (디자인 README "15단계 › 보낸 사람 차단 창" · 디자인 원본 Mailbox15 "차단한 뒤 알림" — 7단계 필터 적용 useMailFilterRun 과 같은 결)
+// - 차단 창에서 새 칸을 켜고 [차단]하면 차단 알림을 따로 띄우지 않는다. 알림 하나가 "‘…’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 ·
+//   1,200 / 4,800통 확인"(첫 응답 전의 전체는 받은편지함의 메일 수 — 모르면 수를 뺀다)으로 남았다가 끝나면 그 자리에서 결과로 바뀐다. [되돌리기]는 없다
+//   - 끝: "‘…’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다." + [스팸메일함 보기] · 옮긴 메일이 없으면 "…옮길 메일이 없습니다."(단추 없음)
+//   - 멈춤(이어 할 자리가 있다): "…4,800통 가운데 1,200통까지 확인해 12통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요." + [다시 시도](그 cursor 부터 — 수는 이어 센다)
+//   - 처음 요청부터 실패: "…차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요." + [다시 시도](처음부터)
+//   - 429 REQ_001(다른 창 · PC 에서 받은편지함이나 스팸메일함을 정리하는 중 — 서버의 차단 정리는 스팸메일함 비우기와도 잠금을 나눈다):
+//     "…차단했습니다. 다른 창에서 받은편지함이나 스팸메일함을 정리하는 중입니다. …" + [다시 시도] —
+//     차단한 뒤에는 ⋯ 메뉴가 「차단 풀기」로 바뀌어 다시 고를 길이 이것뿐이라 처음 요청이어도 단추를 둔다(필터 적용과 다르다)
+//   - 그사이 차단을 풀었으면(404 RES_001 — 사전 문구로 알렸다) 진행 알림만 닫는다
+//   실패 까닭(서버 · 연결)은 스토어가 사전 문구로 알렸다 — 진행 알림은 결과로만 바뀌고 같은 오류를 다시 띄우지 않는다. 단추는 띄운 세션에서만 움직인다 (useToast)
+// - 이 메일을 「이 메일도 …」 칸으로 먼저 옮겼으면(받은편지함의 메일) 그 한 통도 옮긴 수에 넣는다 (alreadyMoved — 서버는 그 뒤에 받은편지함을 본다)
+// - 끝났거나 이번에 나아간 뒤 멈췄으면 개수 · 목록(받은편지함 · 스팸메일함을 보고 있으면)을 맞춘다
+// - 이 탭에서 받은편지함을 정리하는 중(필터 적용 · 다른 차단 정리)이면 시작하지 않고 "…받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요." +
+//   같은 [다시 시도](같은 자리 · 같은 수), 스팸메일함을 비우는 중이면 "…스팸메일함을 비우는 중입니다. …" + 같은 [다시 시도] (스토어의 startBlock) —
+//   차단 창은 그동안 새 칸을 끄므로 이 길은 앞 알림의 [다시 시도]에서 온다
+// - 그동안 다른 화면으로 가도 이어 한다 — 스토어가 돌린다. 세션이 바뀌면 멈추고 알림을 닫는다
+
+/** 시작할 자리 — 처음부터(cursor null · 수 0 — 먼저 옮긴 이 메일은 센다) 또는 앞 실패의 자리 */
+type RunFrom = MailBlockRunCounts & { cursor: string | null }
+
+type FailedOutcome = Extract<MailBlockRunOutcome, { status: 'failed' }>
+
+export interface SenderBlockRunOptions {
+  /** 차단 창의 「이 메일도 …」로 먼저 옮긴 받은편지함의 메일 수 (0 · 1) — 옮긴 수에 더한다 */
+  alreadyMoved?: number
+}
+
+export function useSenderBlockRun() {
+  const runStore = useMailBlockRunStore()
+  const mailStore = useMailStore()
+  const authStore = useAuthStore()
+  const toast = useToast()
+
+  /** 처음부터 — 진행 알림의 전체는 받은편지함의 메일 수 (메일함을 아직 받지 않았으면 0 — 수를 뺀다) */
+  function fromStart(alreadyMoved: number): RunFrom {
+    const inboxTotal = Math.max(0, mailStore.mailboxByRole('inbox')?.totalCount ?? 0)
+    return { cursor: null, scanned: 0, matched: Math.max(0, alreadyMoved), total: inboxTotal }
+  }
+
+  /** 끝 알림의 [스팸메일함 보기] — 옮긴 메일이 있고 스팸메일함을 알 때만 */
+  function viewJunkAction(matched: number): ToastAction | undefined {
+    const junk = matched > 0 ? mailStore.mailboxByRole('junk') : null
+    if (!junk) return undefined
+    return { label: MAIL_BLOCK_TEXT.viewJunk, to: listLocationOf({ kind: 'mailbox', mailboxId: junk.id }) }
+  }
+
+  function retryAction(sender: string, from: RunFrom): ToastAction {
+    return { label: MAIL_BLOCK_TEXT.runRetry, run: () => void execute(sender, from) }
+  }
+
+  /**
+   * 옮긴 뒤 개수 · 목록을 맞춘다 (필터 적용의 syncAfterRun 과 같은 결) — 메일함 개수 · 사용량을 다시 받고,
+   * 보이는 목록이 받은편지함 · 스팸메일함(그 안의 검색 포함)이면 그 목록도 맞춘다. 전체 메일함 검색은 건드리지 않는다
+   */
+  function syncAfterRun() {
+    mailStore.syncCounts()
+    const scope = scopeMailboxIdOf(mailStore.listSource)
+    if (scope === null) return
+    const touched = [mailStore.mailboxByRole('inbox')?.id, mailStore.mailboxByRole('junk')?.id]
+    if (touched.includes(scope)) void mailStore.syncVisibleList({ includeSearch: true })
+  }
+
+  /** 멈췄다 — 이어 할 자리가 있으면 그 자리에서, 없으면 처음부터 다시 하는 단추 (다른 창에서 하는 중일 때도 단추를 둔다) */
+  function settleFailure(
+    sender: string,
+    copy: MailBlockRunCopy,
+    from: RunFrom,
+    outcome: FailedOutcome,
+    progress: ProgressToast,
+  ) {
+    const { cursor, scanned, matched, total } = outcome
+    const resume = cursor !== null ? retryAction(sender, { cursor, scanned, matched, total }) : null
+    if (outcome.error.code === 'RES_001') progress.dismiss()
+    else if (outcome.error.code === 'REQ_001') progress.fail(copy.otherWindow, resume ?? retryAction(sender, from))
+    else if (resume) progress.fail(copy.stopped(outcome), resume)
+    else progress.fail(copy.notMoved, retryAction(sender, from))
+  }
+
+  /** 진행 알림을 띄우고 끝날 때까지 보낸다. 이 탭에서 받은편지함을 정리하거나 스팸메일함을 비우는 중이면 시작하지 않고 알린다 */
+  async function execute(sender: string, from: RunFrom): Promise<void> {
+    const copy = mailBlockRunCopy(sender)
+    const block = runStore.startBlock
+    if (block !== null) {
+      toast.error(block === 'junk' ? copy.junkBusy : copy.busy, retryAction(sender, from))
+      return
+    }
+    const session = authStore.generation
+    const progress = toast.progress(copy.progress(from))
+    const outcome = await runStore.run({ ...from, sender }, (tally) => progress.update(copy.progress(tally)))
+    // 세션이 바뀌었다(진행 알림은 이미 닫혔다 — 다음 사람의 목록을 맞추지 않는다) · 이 탭의 다른 정리와 겹쳤다(위에서 막는다)
+    if (outcome.status === 'canceled' || outcome.status === 'busy' || authStore.generation !== session) {
+      progress.dismiss()
+      return
+    }
+    if (outcome.status === 'done') {
+      progress.succeed(copy.done(outcome.matched), viewJunkAction(outcome.matched))
+      syncAfterRun()
+      return
+    }
+    settleFailure(sender, copy, from, outcome, progress)
+    // 이번에 나아간 것이 있으면 — 거기까지 바뀐 개수 · 목록을 맞춘다
+    if (outcome.scanned > from.scanned) syncAfterRun()
+  }
+
+  /**
+   * 차단(그 값 그대로 — 소문자 주소 또는 "@도메인")한 뒤 받은편지함을 정리하기 시작한다 — 기다리지 않는다(알림이 진행 · 결과를 보인다).
+   * 차단 창이 새 칸을 켰을 때만 부른다
+   */
+  function start(sender: string, options: SenderBlockRunOptions = {}): void {
+    void execute(sender, fromStart(options.alreadyMoved ?? 0))
+  }
+
+  return { start }
+}
diff --git a/frontend/src/composables/useWindowFileDrop.spec.ts b/frontend/src/composables/useWindowFileDrop.spec.ts
new file mode 100644
index 0000000..d158f7d
--- /dev/null
+++ b/frontend/src/composables/useWindowFileDrop.spec.ts
@@ -0,0 +1,87 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, type PropType } from 'vue'
+
+import { dragEvent, fakeDataTransfer } from '@/test-utils/drag'
+import { useIgnoredWindowFileDrop, useWindowFileDrop } from './useWindowFileDrop'
+
+// 15단계 — 화면에 파일을 잘못 놓으면 브라우저가 그 파일을 열어 웹메일을 떠났다. 앱 틀(AppShell — 메일 · 주소록 · 설정)은 파일 놓기를 무시하고,
+// 받는 화면(useWindowFileDrop — 같은 앱 틀 안의 쓰기 화면 · 서명 설정)이 떠 있으면 그 화면이 지금처럼 받는다 (앱 틀 그대로는 AppShell.spec)
+
+/** 앱 틀(파일 놓기 무시) — receive 를 주면 받는 화면(쓰기 화면처럼 파일을 받는다) */
+const Screen = defineComponent({
+  props: {
+    receive: { type: Function as PropType<((files: File[]) => void) | null>, default: null },
+  },
+  setup(props) {
+    if (props.receive) useWindowFileDrop(props.receive)
+    else useIgnoredWindowFileDrop()
+    return () => h('div')
+  },
+})
+
+describe('useIgnoredWindowFileDrop — 앱 틀의 파일 놓기 무시', () => {
+  const mounted: VueWrapper[] = []
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) wrapper.unmount()
+    document.body.innerHTML = ''
+  })
+
+  function mountScreen(receive: ((files: File[]) => void) | null = null) {
+    const wrapper = mount(Screen, { props: { receive }, attachTo: document.body })
+    mounted.push(wrapper)
+    return wrapper
+  }
+
+  it('파일을 끌어 오면 놓을 수 없는 모양(dropEffect none)이고, 놓아도 브라우저가 열지 않는다(기본 동작을 막는다)', () => {
+    mountScreen()
+    const transfer = fakeDataTransfer([new File(['x'], '보고서.pdf')])
+
+    const over = dragEvent('dragover', transfer)
+    document.body.dispatchEvent(over)
+    expect(over.defaultPrevented).toBe(true)
+    expect(transfer.dropEffect).toBe('none')
+
+    const drop = dragEvent('drop', transfer)
+    document.body.dispatchEvent(drop)
+    expect(drop.defaultPrevented).toBe(true)
+  })
+
+  it('파일이 아닌 끌기(글 · 메일 끌기)는 건드리지 않는다', () => {
+    mountScreen()
+    const transfer = fakeDataTransfer()
+    transfer.setData('text/plain', '글')
+
+    const over = dragEvent('dragover', transfer)
+    document.body.dispatchEvent(over)
+    expect(over.defaultPrevented).toBe(false)
+    const drop = dragEvent('drop', transfer)
+    document.body.dispatchEvent(drop)
+    expect(drop.defaultPrevented).toBe(false)
+  })
+
+  it('쓰기 화면이 떠 있으면(나중에 걸려도 먼저 걸려도) 쓰기 화면이 파일을 첨부로 받는다', () => {
+    // 메일 화면이 먼저 뜨고 쓰기 화면이 뒤에 뜬다 — 창 처리기는 메일 화면 것이 먼저 돈다
+    mountScreen()
+    const onFiles = vi.fn()
+    const compose = mountScreen(onFiles)
+    const report = new File(['x'], '보고서.pdf')
+    const transfer = fakeDataTransfer([report])
+
+    document.body.dispatchEvent(dragEvent('dragover', transfer))
+    expect(transfer.dropEffect).toBe('copy')
+    document.body.dispatchEvent(dragEvent('drop', transfer))
+    expect(onFiles).toHaveBeenCalledWith([report])
+
+    // 쓰기 화면을 떠나면 다시 무시한다
+    compose.unmount()
+    mounted.splice(mounted.indexOf(compose), 1)
+    const later = fakeDataTransfer([report])
+    const over = dragEvent('dragover', later)
+    document.body.dispatchEvent(over)
+    expect(over.defaultPrevented).toBe(true)
+    expect(later.dropEffect).toBe('none')
+    expect(onFiles).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/frontend/src/composables/useWindowFileDrop.ts b/frontend/src/composables/useWindowFileDrop.ts
index 4590a40..875e0d6 100644
--- a/frontend/src/composables/useWindowFileDrop.ts
+++ b/frontend/src/composables/useWindowFileDrop.ts
@@ -2,6 +2,13 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { isFileDrag } from '@/shared/utils/editor-files'
 
+/**
+ * 지금 떠 있는 파일 받는 곳의 수 (쓰기 화면 · 서명 설정 — useWindowFileDrop).
+ * 앱 틀의 "파일 놓기 무시"(useIgnoredWindowFileDrop — AppShell)는 받는 곳이 없을 때만 막는다 — 쓰기 화면 · 서명 설정도 앱 틀 안이라
+ * 둘의 창 처리기가 함께 걸린다. 어느 쪽이 먼저 걸렸는지와 상관없이 받는 화면이 이기게 (15단계)
+ */
+let activeReceivers = 0
+
 /**
  * 화면 어디에 놓아도 파일을 받는다 — 이 화면이 떠 있는 동안 window 에서 파일 끌기를 받는다
  * (디자인 README "본문 이미지 → 첨부 파일": 쓰기 화면 어디에 놓아도 첨부로 올린다).
@@ -46,6 +53,46 @@ export function useWindowFileDrop(onFiles: (files: File[]) => void) {
     ['drop', onDrop],
   ] as const
 
+  onMounted(() => {
+    activeReceivers += 1
+    for (const [type, listener] of listeners) window.addEventListener(type, listener)
+  })
+
+  onBeforeUnmount(() => {
+    activeReceivers = Math.max(0, activeReceivers - 1)
+    for (const [type, listener] of listeners) window.removeEventListener(type, listener)
+  })
+
+  return { dragging }
+}
+
+/**
+ * 이 화면이 떠 있는 동안 창에 놓은 파일을 받지 않고 버린다 (15단계 — 앱 틀 AppShell: 메일 · 주소록 · 설정 등 로그인 뒤 모든 모듈 화면).
+ * 받지 않은 곳에 놓으면 브라우저가 그 파일을 열어 웹메일을 떠난다 — 목록 · 읽기 화면 · 주소록 · 설정에 파일을 잘못 놓아도 아무 일 없게.
+ * - 놓는 동안 마우스 커서는 놓을 수 없는 모양이다(dropEffect none — 메일함 패널도 파일은 받지 않는다)
+ * - 파일을 받는 화면(쓰기 화면 · 서명 설정 — useWindowFileDrop)이 떠 있으면 아무것도 하지 않는다(그 화면에 맡긴다)
+ * - 글 · 메일 끌기(목록 줄을 메일함 패널로 — useMailDrag)는 건드리지 않는다
+ */
+export function useIgnoredWindowFileDrop() {
+  function ignores(event: DragEvent): boolean {
+    return activeReceivers === 0 && !event.defaultPrevented && isFileDrag(event)
+  }
+
+  function onDragOver(event: DragEvent) {
+    if (!ignores(event)) return
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'none'
+  }
+
+  function onDrop(event: DragEvent) {
+    if (ignores(event)) event.preventDefault()
+  }
+
+  const listeners = [
+    ['dragover', onDragOver],
+    ['drop', onDrop],
+  ] as const
+
   onMounted(() => {
     for (const [type, listener] of listeners) window.addEventListener(type, listener)
   })
@@ -53,6 +100,4 @@ export function useWindowFileDrop(onFiles: (files: File[]) => void) {
   onBeforeUnmount(() => {
     for (const [type, listener] of listeners) window.removeEventListener(type, listener)
   })
-
-  return { dragging }
 }
diff --git a/frontend/src/pages/mail/MailLayout.vue b/frontend/src/pages/mail/MailLayout.vue
index a5f3083..3a77a8b 100644
--- a/frontend/src/pages/mail/MailLayout.vue
+++ b/frontend/src/pages/mail/MailLayout.vue
@@ -11,10 +11,12 @@
 // (usePendingSendRefresh). 들어올 때 보내기 · 읽기 설정도 받아 둔다 — 쓰기 화면의 [보내기 취소] 알림이 설정한 초로 마감을 센다(못 받으면 알리지 않는다).
 // 탭이 다시 보일 때 마지막으로 받은 지 60초가 지났으면 설정을 조용히 다시 받는다 — 다른 탭에서 바꾼 묶기가 남지 않게 (useMailSettingsRefresh, 14단계)
 // 회사가 2단계 인증을 필수로 정한 유예 기간이면 상단 바 바로 아래에 노란 줄 (13단계 — TwoFactorGraceNotice)
+// 잘못 놓은 파일은 앱 틀(AppShell)이 무시한다 — 쓰기 화면은 지금처럼 어디에 놓아도 첨부로 받는다 (15단계 — useWindowFileDrop)
 import { provide } from 'vue'
 
 import AppShell from '@/components/shell/AppShell.vue'
 import MailContactDialogHost from '@/components/mail/MailContactDialogHost.vue'
+import MailDragChip from '@/components/mail/MailDragChip.vue'
 import MailSearchBox from '@/components/mail/MailSearchBox.vue'
 import MailboxPanel from '@/components/mail/MailboxPanel.vue'
 import TwoFactorGraceNotice from '@/components/mail/TwoFactorGraceNotice.vue'
@@ -82,4 +84,6 @@ usePendingSendRefresh({ clock })
     <RouterView />
   </AppShell>
   <MailContactDialogHost />
+  <!-- 목록 줄을 메일함 패널로 끄는 동안 마우스를 따라오는 표 (15단계 — 화면 밖에 그려 둔다) -->
+  <MailDragChip />
 </template>
diff --git a/frontend/src/pages/settings/MailFilterPage.spec.ts b/frontend/src/pages/settings/MailFilterPage.spec.ts
index 753b705..3bb3e56 100644
--- a/frontend/src/pages/settings/MailFilterPage.spec.ts
+++ b/frontend/src/pages/settings/MailFilterPage.spec.ts
@@ -17,6 +17,7 @@ import type {
   MessageDetail,
 } from '@/shared/types/mail'
 import { useAuthStore } from '@/stores/auth.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
 import { useMailStore } from '@/stores/mail.store'
 import { useToastStore } from '@/stores/toast.store'
 import {
@@ -953,7 +954,8 @@ describe('MailFilterPage', () => {
 
       await openRule(wrapper, 'r2')
       expect(applyBox(wrapper).attributes('disabled')).toBeDefined()
-      expect(applyHelp(wrapper)).toBe('다른 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤에 고를 수 있습니다.')
+      // 차단 창의 새 칸과 같은 글 (15단계에 "다른 필터로 …"에서 바꿨다)
+      expect(applyHelp(wrapper)).toBe('받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.')
       await click(wrapper.get('#mail-filter-cancel'))
 
       // 다른 화면으로 가도 이어 한다
@@ -969,6 +971,21 @@ describe('MailFilterPage', () => {
       expect(applyBox(again).attributes('disabled')).toBeUndefined()
     })
 
+    it('이 탭에서 차단할 때 받은 메일을 옮기는 동안(15단계)도 칸을 끄고 같은 까닭 — 끝나면 다시 고를 수 있다', async () => {
+      const { wrapper } = await mountPage()
+      const blockRun = useMailBlockRunStore()
+      blockRun.running = true
+
+      await openRule(wrapper, 'r2')
+      expect(applyBox(wrapper).attributes('disabled')).toBeDefined()
+      expect(applyHelp(wrapper)).toBe('받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.')
+
+      blockRun.running = false
+      await flushPromises()
+      expect(applyBox(wrapper).attributes('disabled')).toBeUndefined()
+      expect(applyHelp(wrapper)).toBe(MAIL_FILTER_APPLY_TEXT.help)
+    })
+
     it('「적용」을 고르고 저장하는 중에 창을 닫거나 화면을 떠나도 — 저장이 끝나면 적용한다', async () => {
       const reply = deferred()
       const { wrapper } = await mountPage({ save: () => reply.promise, run: () => step(8412, 37, 0, null) })
diff --git a/frontend/src/pages/settings/MailFilterPage.vue b/frontend/src/pages/settings/MailFilterPage.vue
index 2d38626..e296eed 100644
--- a/frontend/src/pages/settings/MailFilterPage.vue
+++ b/frontend/src/pages/settings/MailFilterPage.vue
@@ -13,7 +13,8 @@
 //   주소에서 지운다(replace — 새로 고침에 또 열리지 않게)
 // - 누른 단추가 사라져 초점을 잃으면(지운 행 · 사라진 줄 · 빈 상태의 [새 필터]) 가까운 행이나 머리의 [새 필터]로 옮긴다
 // - 창의 「받은편지함에 이미 있는 메일도 정리하기」(7단계)를 고른 채 저장하면 저장한 뒤 받은편지함에 적용한다(useMailFilterActions → useMailFilterRun).
-//   이 탭에서 적용하는 중이면 창의 그 칸을 끈다(mail-filter-run.store 의 running — 화면을 떠나도 적용은 이어진다)
+//   이 탭에서 받은편지함을 정리하는 중이면(필터 적용 · 차단할 때 받은 메일 옮기기 — 15단계) 창의 그 칸을 끈다
+//   (mail-block-run.store 의 inboxBusy — 차단 창의 새 칸과 같은 규칙, 화면을 떠나도 정리는 이어진다)
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -32,12 +33,13 @@ import { MAIL_FILTER_FROM_QUERY, MAIL_FILTER_TEXT } from '@/shared/constants/mai
 import type { MailFilterRule } from '@/shared/types/mail'
 import { formatCount } from '@/shared/utils/format'
 import { useAuthStore } from '@/stores/auth.store'
-import { useMailFilterRunStore } from '@/stores/mail-filter-run.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
 import { useMailFilterStore } from '@/stores/mail-filter.store'
 import { useMailStore } from '@/stores/mail.store'
 
 const filterStore = useMailFilterStore()
-const filterRunStore = useMailFilterRunStore()
+/** 이 탭에서 받은편지함을 정리하는 중인지 — 필터 적용 · 차단 정리 (inboxBusy) */
+const inboxCleanup = useMailBlockRunStore()
 const mailStore = useMailStore()
 const authStore = useAuthStore()
 const route = useRoute()
@@ -282,7 +284,7 @@ watch(
         :busy="filterStore.saving"
         :error="dialogError"
         :conflict="dialogConflict"
-        :apply-busy="filterRunStore.running"
+        :apply-busy="inboxCleanup.inboxBusy"
         @save="(rule, apply) => settleDialog(saveDialog(rule, { apply }))"
         @remove="settleDialog(removeDialog())"
         @cancel="cancelDialog"
diff --git a/frontend/src/shared/constants/mail-block.ts b/frontend/src/shared/constants/mail-block.ts
index 6e60187..adb6a8c 100644
--- a/frontend/src/shared/constants/mail-block.ts
+++ b/frontend/src/shared/constants/mail-block.ts
@@ -1,8 +1,19 @@
 // 보낸 사람 차단 (계약 2절 "보낸 사람 차단" · 디자인 README "9단계 › 읽기 화면" · "설정 · 차단한 주소", 원본 MailReadTools · SettingsSendRead)
+// 15단계 — 차단할 때 받은편지함에 이미 있는 그 보낸 사람의 메일도 옮기기 (디자인 README "15단계", 원본 Mailbox15 "보낸 사람 차단 창" · "차단한 뒤 알림")
+
+import { MAIL_FILTER_RUN_TIMEOUT_MS } from '@/shared/constants/mail'
+import { INBOX_CLEANUP_TEXT, MAIL_FILTER_RUN_MAX_STALLS } from '@/shared/constants/mail-filter'
 
 /** 차단할 수 있는 주소 · 도메인 수 — 넘으면 서버도 400 VAL_001 */
 export const MAIL_BLOCK_MAX = 500
 
+/**
+ * 받은 메일 옮기기(POST /mail-block-runs)의 요청 하나 — 서버가 필터 적용과 같은 규칙(한 요청 25초 안 · cursor)으로 하니 같은 한도를 쓴다
+ */
+export const MAIL_BLOCK_RUN_TIMEOUT_MS = MAIL_FILTER_RUN_TIMEOUT_MS
+/** 한 번도 나아가지 못한 응답이 이만큼 이어지면 멈춘다 — 필터 적용과 같은 안전장치 */
+export const MAIL_BLOCK_RUN_MAX_STALLS = MAIL_FILTER_RUN_MAX_STALLS
+
 /** 도메인 차단의 앞 글자 — "@spam.example" 은 그 도메인에서 오는 메일 모두 */
 export const MAIL_BLOCK_DOMAIN_PREFIX = '@'
 
@@ -65,6 +76,19 @@ export const MAIL_BLOCK_TEXT = {
   /** 「이 도메인 전체」를 끈 까닭 — 여러 사람이 쓰는 메일 서비스 (보드에 없다) */
   scopeDomainPublic: '여러 사람이 쓰는 메일 서비스라 도메인으로 막을 수 없습니다.',
   moveToJunk: '이 메일도 스팸메일함으로 옮기기',
+  /** 새 칸을 켰고 이 메일이 받은편지함에 있을 때 — 첫 칸을 켠 채 잠그고 그 아래 (15단계) */
+  moveToJunkLocked: '받은편지함의 메일을 옮길 때 함께 옮깁니다.',
+  /** 15단계 새 칸 — 처음 꺼짐. 「이 도메인 전체」를 고르면 도메인 글로 바뀐다 */
+  cleanInboxSender: '받은편지함에 있는 이 보낸 사람의 메일도 스팸메일함으로 옮기기',
+  cleanInboxDomain: '받은편지함에 있는 이 도메인의 메일도 스팸메일함으로 옮기기',
+  cleanInboxNote: '옮긴 메일은 한꺼번에 되돌릴 수 없습니다.',
+  /** 이 탭에서 받은편지함을 정리하는 중(필터 적용 · 다른 차단 정리) — 새 칸을 끄고 칸 아래 글을 까닭으로 (필터 고치기 창의 칸과 같은 글) */
+  cleanInboxBusy: INBOX_CLEANUP_TEXT.busy,
+  /**
+   * 이 탭에서 스팸메일함을 비우는 중 — 새 칸을 끄고 칸 아래 글을 까닭으로 (보드에 없다 — 15단계 리뷰, 위 공용 글과 같은 결).
+   * 옮겨 넣은 메일이 들어오자마자 영구 삭제되지 않게
+   */
+  cleanJunkBusy: '스팸메일함을 비우는 중이라 지금은 고를 수 없습니다.',
   settingsHint: '차단은 [설정] → [차단한 주소]에서 풀 수 있습니다.',
   confirm: '차단',
   cancel: '취소',
@@ -81,6 +105,39 @@ export const MAIL_BLOCK_TEXT = {
   unblockRestored: (address: string, particle: string) => `‘${address}’${particle} 다시 차단했습니다.`,
   undo: '되돌리기',
 
+  // ── 새 칸을 켠 차단 — 알림 하나가 진행을 보이다가 그 자리에서 결과로 (15단계, [되돌리기] 없음) ──
+  // particle 은 objectParticle, 수는 formatCount 로 만든 글자. 확인 = 지금까지 확인한 수, 전체 = 확인 + 남은 수(첫 응답 전에는 받은편지함의 메일 수)
+  runProgress: (address: string, particle: string) =>
+    `‘${address}’${particle} 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중`,
+  /** 진행 문구 뒤 — 전체를 아직 모르면 뺀다 */
+  runProgressCount: (scanned: string, total: string) => ` · ${scanned} / ${total}통 확인`,
+  runDone: (address: string, particle: string, matched: string) =>
+    `‘${address}’${particle} 차단하고 받은편지함의 메일 ${matched}통을 스팸메일함으로 옮겼습니다.`,
+  /** 옮길 메일이 없었다 */
+  runNone: (address: string, particle: string) => `‘${address}’${particle} 차단했습니다. 받은편지함에는 옮길 메일이 없습니다.`,
+  /** 도중에 멈췄다 — [다시 시도]는 멈춘 자리부터 */
+  runStopped: (address: string, particle: string, total: string, scanned: string, matched: string) =>
+    `‘${address}’${particle} 차단했습니다. 받은편지함은 ${total}통 가운데 ${scanned}통까지 확인해 ${matched}통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요.`,
+  /** 처음 요청부터 실패했다 — [다시 시도]는 처음부터 */
+  runNotMoved: (address: string, particle: string) =>
+    `‘${address}’${particle} 차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요.`,
+  /**
+   * 429 REQ_001 — 같은 직원의 받은편지함 정리(필터 적용 · 다른 차단 정리)나 스팸메일함 비우기가 다른 창 · PC 에서 진행 중 (15단계 리뷰 —
+   * 서버의 차단 정리는 스팸메일함 비우기와도 잠금을 나눈다. 필터 적용의 429 글은 받은편지함만 말한다 — INBOX_CLEANUP_TEXT.otherWindow)
+   */
+  runOtherWindow: (address: string, particle: string) =>
+    `‘${address}’${particle} 차단했습니다. 다른 창에서 받은편지함이나 스팸메일함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.`,
+  /**
+   * 이 탭에서 받은편지함을 정리하는 중(필터 적용 · 다른 차단 정리)에 [다시 시도]를 눌렀다 (보드에 없다 — 필터 적용의 busy 와 같은 공용 글).
+   * 같은 [다시 시도](같은 자리 · 같은 수)를 붙여 앞 정리가 끝난 뒤 다시 누를 수 있게 한다
+   */
+  runBusy: (address: string, particle: string) => `‘${address}’${particle} 차단했습니다. ${INBOX_CLEANUP_TEXT.tabBusy}`,
+  /** 이 탭에서 스팸메일함을 비우는 중에 [다시 시도]를 눌렀다 (보드에 없다 — runBusy 와 같은 결, 같은 [다시 시도]를 붙인다) */
+  runJunkBusy: (address: string, particle: string) =>
+    `‘${address}’${particle} 차단했습니다. 스팸메일함을 비우는 중입니다. 끝난 뒤 다시 시도해 주세요.`,
+  runRetry: '다시 시도',
+  viewJunk: '스팸메일함 보기',
+
   // ── 스팸메일함에서 읽을 때 ──
   senderNotice: '차단한 보낸 사람의 메일입니다.',
   unblock: '차단 풀기',
diff --git a/frontend/src/shared/constants/mail-conversation.ts b/frontend/src/shared/constants/mail-conversation.ts
index d922cf1..9df7ce7 100644
--- a/frontend/src/shared/constants/mail-conversation.ts
+++ b/frontend/src/shared/constants/mail-conversation.ts
@@ -54,6 +54,12 @@ export const MAIL_CONVERSATION_TEXT = {
   bodyTitle: (who: string, time: string) => `메일 본문: ${who}, ${time}`,
   more: '더 보기',
   moreBusy: '불러오는 중…',
+  /**
+   * 칸 머리 오른쪽의 글자 단추 (15단계 — 디자인 원본 Reader15 "6. 같은 대화") — 하나라도 접혀 있으면 [모두 펼치기], 모두 펼쳐져 있으면(하나씩 다 펼쳐도) [모두 접기].
+   * 펼친 줄 머리의 [답장]은 위 reply 와 같은 글이다
+   */
+  expandAll: '모두 펼치기',
+  collapseAll: '모두 접기',
   loadFailed: '같은 대화를 불러오지 못했습니다.',
   retry: '다시 시도',
   traceCode: (code: string) => `문의 코드 ${code}`,
diff --git a/frontend/src/shared/constants/mail-filter.ts b/frontend/src/shared/constants/mail-filter.ts
index e1e1ac2..091a879 100644
--- a/frontend/src/shared/constants/mail-filter.ts
+++ b/frontend/src/shared/constants/mail-filter.ts
@@ -166,10 +166,24 @@ export const MAIL_FILTER_DIALOG_TEXT = {
   actionsEmpty: '할 일을 하나 이상 골라 주세요.',
 } as const
 
+/**
+ * 받은편지함 정리 — 이미 받은 메일에 필터 적용(7단계)과 차단할 때 받은 메일 옮기기(15단계)가 함께 쓰는 글.
+ * 같은 직원의 받은편지함 정리는 한 번에 하나다 — 다른 창 · PC 에서 하는 중이면 서버가 429 REQ_001 (디자인 원본 Mailbox15 "차단한 뒤 알림").
+ * otherWindow 는 필터 적용의 429 글이다 — 차단 정리의 429 는 스팸메일함 비우기도 말한다(MAIL_BLOCK_TEXT.runOtherWindow — 15단계 리뷰).
+ * 이 탭에서 하나라도 도는 동안은 필터 고치기 창의 칸과 차단 창의 새 칸을 끄고 그 까닭(busy)을 칸 아래에 쓴다 (디자인 원본 Mailbox15 "보낸 사람 차단 창") —
+ * 차단 창의 새 칸은 이 탭에서 스팸메일함을 비우는 동안에도 끈다(MAIL_BLOCK_TEXT.cleanJunkBusy)
+ */
+export const INBOX_CLEANUP_TEXT = {
+  otherWindow: '다른 창에서 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+  busy: '받은편지함을 정리하는 중이라 지금은 고를 수 없습니다.',
+  /** 이 탭에서 정리하는 중에 [다시 시도]를 눌렀다 — 필터 적용의 알림 · 차단 정리의 알림("…차단했습니다. " 뒤)이 함께 쓴다 */
+  tabBusy: '받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+} as const
+
 /**
  * 고치기 창의 「받은편지함에 이미 있는 메일도 정리하기」 (7단계 — 디자인 원본 MailFilterApply · MailFilterApplyStates).
  * 6단계의 안내 띠("새로 오는 메일에만 적용됩니다 …") 자리에 둔다. 고를 수 없으면 설명이 그 까닭이다 —
- * 이 탭에서 다른 필터를 적용하는 중 → 옮길 메일함이 지워짐 → 받은편지함으로 옮기기만 → 전달만 (mail-filter-run.ts 의 filterApplyBlock 차례)
+ * 이 탭에서 받은편지함을 정리하는 중(필터 적용 · 차단 정리 — 15단계) → 옮길 메일함이 지워짐 → 받은편지함으로 옮기기만 → 전달만 (mail-filter-run.ts 의 filterApplyBlock 차례)
  */
 export const MAIL_FILTER_APPLY_TEXT = {
   label: '받은편지함에 이미 있는 메일도 정리하기',
@@ -181,7 +195,8 @@ export const MAIL_FILTER_APPLY_TEXT = {
   missingMailbox: '옮길 메일함이 지워져 이미 받은 메일에 할 일이 없습니다. 다른 메일함을 골라 주세요.',
   /** 받은편지함으로 옮기기만 — 이미 받은편지함에 있는 메일이다 (7단계 리뷰로 더한 경우) */
   inboxOnly: '받은편지함으로 옮기기만 하는 필터는 이미 받은 메일에 할 일이 없습니다.',
-  busy: '다른 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤에 고를 수 있습니다.',
+  /** 이 탭에서 받은편지함을 정리하는 중 — 차단 창의 새 칸과 같은 글 (15단계에 "다른 필터로 …"에서 바꿨다) */
+  busy: INBOX_CLEANUP_TEXT.busy,
   /** 상자 아래 한 줄 */
   spam: '스팸 메일은 필터를 거치지 않습니다.',
 } as const
@@ -204,13 +219,16 @@ export const MAIL_FILTER_RUN_TEXT = {
     `${quoted} 필터로 ${total}통 가운데 ${scanned}통까지 확인하고 멈췄습니다. 그동안 ${matched}통을 정리했습니다. 다시 시도해 주세요.`,
   /** 처음 요청부터 실패했다 — 필터는 저장되어 있다(새로 오는 메일에는 적용된다) */
   notApplied: '필터는 저장했지만 받은편지함은 정리하지 못했습니다. 다시 시도해 주세요.',
-  /** 429 REQ_001 — 같은 직원의 적용이 다른 창 · PC 에서 진행 중 */
-  otherWindow: '다른 창에서 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
   /**
-   * 이 탭에서 다른 필터를 적용하는 중에 [다시 시도]를 눌렀다 (보드에 없던 경우 — 2026-10-29 구현하며 정함).
-   * 같은 [다시 시도](같은 자리 · 같은 수)를 붙여 앞 적용이 끝난 뒤 다시 누를 수 있게 한다
+   * 429 REQ_001 — 같은 직원의 받은편지함 정리(필터 적용 · 차단할 때 받은 메일 옮기기)가 다른 창 · PC 에서 진행 중 (INBOX_CLEANUP_TEXT).
+   * 차단 정리의 429 글은 스팸메일함 비우기도 말해 따로다 (MAIL_BLOCK_TEXT.runOtherWindow — 15단계 리뷰)
    */
-  busy: '다른 필터로 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+  otherWindow: INBOX_CLEANUP_TEXT.otherWindow,
+  /**
+   * 이 탭에서 받은편지함을 정리하는 중(다른 필터 적용 · 차단 정리)에 [다시 시도]를 눌렀다 (보드에 없던 경우 — 2026-10-29 구현하며 정함,
+   * 15단계에 차단 정리와 함께 쓰는 글로 바꿨다 — INBOX_CLEANUP_TEXT). 같은 [다시 시도](같은 자리 · 같은 수)를 붙여 앞 정리가 끝난 뒤 다시 누를 수 있게 한다
+   */
+  busy: INBOX_CLEANUP_TEXT.tabBusy,
   retry: '다시 시도',
 } as const
 
diff --git a/frontend/src/shared/constants/mail-send-later.ts b/frontend/src/shared/constants/mail-send-later.ts
index 8a2e080..386d958 100644
--- a/frontend/src/shared/constants/mail-send-later.ts
+++ b/frontend/src/shared/constants/mail-send-later.ts
@@ -1,5 +1,7 @@
 // 보내기 취소 · 예약 발송 · 예약됨 (계약 2절 "보내기 취소 · 예약 발송" · 디자인 README "9단계 › 보내기 취소 · 예약 발송", 원본 MailSendLater)
 
+import { UNDO_SEND_OPTIONS } from '@/shared/constants/mail-settings'
+
 /** 예약할 수 있는 가장 이른 때 — 지금부터 5분 뒤 (서버도 같은 한도로 400 VAL_001) */
 export const SCHEDULE_MIN_LEAD_MS = 5 * 60_000
 /** 예약할 수 있는 가장 늦은 때 — 7일 안 (엔진 한도 — 계약 2절) */
@@ -76,6 +78,24 @@ export const SEND_LATER_TEXT = {
   sendAtColumn: '보낼 시각',
   /** 읽기 화면 머리 아래 청록 줄 — "10월 30일 (금) 오전 9:00에 보낼 메일입니다." */
   notice: (time: string) => `${time}에 보낼 메일입니다.`,
+  /**
+   * 청록 줄 맨 앞 단추 (15단계 — 디자인 원본 Reader15 "지금 보내기"). [보내기]를 누른 것과 같다 — 보내기 취소 설정의 초만큼 붙잡았다 보낸다.
+   * 확인 창은 두지 않는다(보내기 취소로 되돌릴 수 있다). 알림은 쓰기 화면의 보낸 뒤 알림과 같다
+   */
+  sendNow: '지금 보내기',
+  /**
+   * 지금 보내지 못했거나 결과를 모른다(503 MAIL_001 · SYS_001 — 15단계 리뷰). 그 메일을 다시 받아
+   * 임시보관함이면 sendNowReverted + [임시보관함 보기],
+   * 예약이 그대로면(확인했다 — 예약한 시각에 나간다) sendNowFailed + [다시 시도](같은 요청 — 안내 줄은 그대로 둔다),
+   * 예약만 풀렸거나(기다리는 발송이 없다 — 안내 줄을 내린다) 다시 받지 못했으면(안내 줄은 마지막으로 안 그대로) sendNowUnconfirmed + [다시 시도].
+   * 이 두 갈래는 이미 나갔을 수 있다(보내기 취소 0초로 바로 나감 · 응답만 잃음 · 그사이 예약 시각이 됨) — 보내지 못했다고 단정하지 않는다
+   * (그 글을 믿고 손으로 다시 보내면 두 통이 간다). [다시 시도]는 안전하다 — 이미 보낸 메일이면 서버가 200 으로 답한다
+   */
+  sendNowReverted: '지금 보내지 못해 임시보관함으로 옮겼습니다.',
+  viewDrafts: '임시보관함 보기',
+  sendNowUnconfirmed: '메일을 보냈는지 확인하지 못했습니다. [다시 시도]를 누르면 아직 보내지 않았을 때만 보냅니다.',
+  sendNowFailed: '지금 보내지 못했습니다. 다시 시도해 주세요.',
+  retry: '다시 시도',
   edit: '고치기',
   cancelSchedule: '예약 취소',
   canceled: '예약을 취소하고 임시보관함으로 옮겼습니다.',
@@ -111,3 +131,8 @@ export const PENDING_RELEASE_MAX_RECHECKS = 3
  * 마감이 서버보다 늦으면 늦게 누른 [보내기 취소]가 "이미 보낸 메일"(MAIL_014)이 된다
  */
 export const UNDO_SEND_DEADLINE_MARGIN_MS = 1_000
+/**
+ * 설정을 모를 때 [보내기 취소] 알림이 남는 가장 긴 시간 — 설정의 가장 긴 값(30초). 쓰기 화면(ComposePage)과 같은 값이다
+ * (15단계 예약 [지금 보내기]의 알림이 함께 쓴다 — pending-send.ts 의 undoToastDeadline)
+ */
+export const UNDO_SEND_MAX_MS = Math.max(...UNDO_SEND_OPTIONS) * 1000
diff --git a/frontend/src/shared/constants/mail.ts b/frontend/src/shared/constants/mail.ts
index 11824dc..1179471 100644
--- a/frontend/src/shared/constants/mail.ts
+++ b/frontend/src/shared/constants/mail.ts
@@ -332,6 +332,15 @@ export const MAIL_BULK_TEXT = {
   unflag: '중요 해제',
   move: '이동',
   moveMenu: '옮길 메일함',
+  /**
+   * [이동 ▾] 메뉴에 고를 수 없게 남긴 줄의 까닭 (15단계 — 디자인 원본 Reader15) — 메일이 든 메일함에 하위 메일함이 있으면 나무 모양을 지키려고 남긴다.
+   * 읽기 화면은 그 메일, 목록 도구 줄은 고른 메일
+   */
+  moveHere: '이 메일이 있는 메일함',
+  moveHereChecked: '고른 메일이 있는 메일함',
+  /** 목록 줄을 메일함 패널로 끄는 동안 마우스를 따라오는 표 (15단계 — 디자인 원본 ListDrag15) */
+  dragMessages: (count: string) => `메일 ${count}통`,
+  dragConversations: (count: string) => `대화 ${count}개`,
   delete: '삭제',
   purge: '영구 삭제',
   clear: '선택 해제',
diff --git a/frontend/src/shared/constants/mailbox-manage.ts b/frontend/src/shared/constants/mailbox-manage.ts
index 022273f..b06d9e7 100644
--- a/frontend/src/shared/constants/mailbox-manage.ts
+++ b/frontend/src/shared/constants/mailbox-manage.ts
@@ -12,6 +12,16 @@ export const MAILBOX_NAME_FORBIDDEN_CHAR = '/'
  */
 export const MAILBOX_OPERATION_MAX_STALLS = 3
 
+/**
+ * 들여 쓴 메일함의 이름 (15단계 — 디자인 원본 Reader15 · Mailbox15). 위 메일함부터 잇는다.
+ * spokenJoin: 화면 낭독 이름 "거래처 안의 2025" · displayJoin: 같은 이름이 다른 곳에도 있을 때 알림에 쓰는 "거래처 › 2025"
+ * (shared/utils/mailbox.ts 의 mailboxSpokenName · mailboxDisplayName)
+ */
+export const MAILBOX_PATH_TEXT = {
+  spokenJoin: ' 안의 ',
+  displayJoin: ' › ',
+} as const
+
 export const MAILBOX_PANEL_TEXT = {
   /** 기본 메일함 아래 묶음 이름 (12px 굵게) */
   myMailboxes: '내 메일함',
@@ -27,6 +37,8 @@ export const MAILBOX_MENU_TEXT = {
   markRead: '모두 읽음으로 표시',
   createChild: '하위 메일함 만들기',
   rename: '이름 바꾸기',
+  /** 15단계 — 내 메일함만. 창을 여는 다른 항목처럼 이름 뒤에 …를 붙이지 않는다 (디자인 원본 Mailbox15) */
+  move: '옮기기',
   delete: '지우기',
   emptyTrash: '휴지통 비우기',
   emptyJunk: '스팸메일함 비우기',
@@ -46,19 +58,55 @@ export const MAILBOX_DIALOG_TEXT = {
   deleteMessage: (count: string) => `안의 메일 ${count}통은 휴지통으로 옮깁니다. 지운 메일함은 되돌릴 수 없습니다.`,
   deleteEmptyMessage: '빈 메일함입니다. 지운 메일함은 되돌릴 수 없습니다.',
   deleteConfirm: '지우기',
-  blockedTitle: (name: string) => `‘${name}’ 메일함을 지울 수 없습니다`,
-  blockedMessage: '하위 메일함이 있습니다. 하위 메일함을 먼저 지워 주세요.',
-  blockedConfirm: '확인',
+  /**
+   * 하위 메일함이 있는 메일함 지우기 (15단계 — 디자인 원본 Mailbox15 "하위 메일함까지 지우기"). children 은 모든 깊이의 하위 메일함 수,
+   * count 는 하위 메일함까지 더한 메일 수 (formatCount 로 만든 글자)
+   */
+  deleteTreeTitle: (name: string, children: string) => `‘${name}’ 메일함과 하위 메일함 ${children}개를 지울까요?`,
+  deleteTreeMessage: (count: string) =>
+    `하위 메일함에 든 메일까지 모두 ${count}통을 휴지통으로 옮깁니다. 휴지통에 들어간 메일은 30일 뒤 자동으로 지워집니다. 지운 메일함은 되돌릴 수 없습니다.`,
+  deleteTreeEmptyMessage: '하위 메일함까지 모두 비어 있습니다. 지운 메일함은 되돌릴 수 없습니다.',
   /** "휴지통의 메일 21통을 모두 영구 삭제할까요?" */
   emptyTitle: (mailbox: string, count: string) => `${mailbox}의 메일 ${count}통을 모두 영구 삭제할까요?`,
   emptyMessage: '지운 메일은 되돌릴 수 없습니다.',
   emptyConfirm: '영구 삭제',
 } as const
 
-/** 만들기 · 이름 바꾸기 알림 — 메일함 패널에 바로 나타나므로 짧게 (디자인 원본 MailActions4 "알림 문구") */
+/**
+ * 메일함 옮기기 창 (15단계 — 디자인 원본 Mailbox15 "옮기기 창" · "그사이 같은 이름이 생겼을 때") — 모달 400(medium).
+ * 줄의 까닭 글(지금 있는 곳 · 같은 이름)은 서버에 묻기 전에 화면이 하는 검사라 화면 상수 글이다. 묶음 이름 "내 메일함"은 MAILBOX_PANEL_TEXT
+ */
+export const MAILBOX_MOVE_TEXT = {
+  title: (name: string) => `‘${name}’ 메일함을 어디로 옮길까요?`,
+  /** 하위 메일함이 있을 때 · 없을 때 */
+  messageWithChildren: '하위 메일함과 안의 메일도 함께 옮깁니다.',
+  message: '안의 메일도 함께 옮깁니다.',
+  /** 목록(radiogroup)의 이름 */
+  listLabel: '옮길 곳',
+  top: '맨 위',
+  topNote: '다른 메일함 안에 두지 않습니다',
+  current: '지금 있는 곳',
+  sameName: '같은 이름의 메일함이 있습니다',
+  confirm: '옮기기',
+  cancel: '취소',
+} as const
+
+/** 만들기 · 이름 바꾸기 · 옮기기 알림 — 메일함 패널에 바로 나타나므로 짧게 (디자인 원본 MailActions4 "알림 문구" · Mailbox15 "옮긴 뒤 알림") */
 export const MAILBOX_RESULT_TEXT = {
   created: (name: string) => `‘${name}’ 메일함을 만들었습니다.`,
   renamed: '메일함 이름을 바꿨습니다.',
+  /**
+   * 옮긴 곳의 이름 — 내 메일함은 따옴표로 묶고, 받은편지함 같은 기본 메일함은 묶지 않는다
+   * ("‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다." · "…받은편지함 안으로 옮겼습니다.")
+   */
+  quoted: (name: string) => `‘${name}’`,
+  movedInto: (name: string, into: string) => `‘${name}’ 메일함을 ${into} 안으로 옮겼습니다.`,
+  movedToTop: (name: string) => `‘${name}’ 메일함을 다른 메일함 밖으로 옮겼습니다.`,
+  /** [되돌리기] 뒤 — 원래 있던 곳으로 */
+  restoredInto: (name: string, into: string) => `‘${name}’ 메일함을 ${into} 안으로 되돌렸습니다.`,
+  /** 맨 위에서 옮긴 것을 되돌렸을 때 (보드에 없다 — 맨 위로 옮긴 글과 같은 결) */
+  restoredToTop: (name: string) => `‘${name}’ 메일함을 다른 메일함 밖으로 되돌렸습니다.`,
+  undo: '되돌리기',
 } as const
 
 /**
diff --git a/frontend/src/shared/types/mail.ts b/frontend/src/shared/types/mail.ts
index c7f20e7..1954d06 100644
--- a/frontend/src/shared/types/mail.ts
+++ b/frontend/src/shared/types/mail.ts
@@ -364,6 +364,18 @@ export interface ScheduledMessageCancel {
   draftId: string
 }
 
+/**
+ * POST /scheduled-messages/{id}/release 응답 — 예약을 거두고 같은 메일을 지금 보냈다 (15단계 "지금 보내기" — 계약 2절의 ReleasedSend).
+ * 발송 응답(SentMessage)과 같은 칸이다: pendingSend 는 보내기 취소를 기다리는 동안 { kind: 'undo', sendAt }, 바로 보냈으면 null
+ * (예약 시각이 막 지나 이미 보낸 메일도 null — 오류가 아니다). useMail().releaseScheduledMessage 가 칸을 늘 값으로 맞춘다
+ */
+export interface ReleasedSend {
+  /** 같은 메일 id (보낸 사본) — 없으면 요청한 id */
+  id: string
+  rejectedRecipients: RejectedRecipient[]
+  pendingSend: PendingSend | null
+}
+
 // ── 보내기 · 읽기 설정 (계약 2절 "보내기 · 읽기 설정" — 9단계) ─────────────
 
 /** 보내기 취소 시간(초) — 0 이면 바로 보낸다 */
@@ -451,7 +463,19 @@ export interface MailboxRenamePayload {
   name: string
 }
 
-/** DELETE /mailboxes/{id} 응답 — deleted 가 false 면 아직 옮길 메일이 남았다(같은 요청을 다시 보낸다) */
+/**
+ * PATCH /mailboxes/{id} 본문 — 메일함 옮기기 (15단계). parentId: null 은 맨 위.
+ * 새 상위는 만들기와 같은 자리만(맨 위 · 받은편지함 · 내 메일함 — 그 밖 400 VAL_001), 자기 자신 · 하위 아래는 400 VAL_001,
+ * 새 상위 안에 같은 이름(대소문자 무시)은 409 MAIL_009, 없는 상위는 404 RES_001. 하위 메일함과 안의 메일이 함께 간다
+ */
+export interface MailboxMovePayload {
+  parentId: string | null
+}
+
+/**
+ * DELETE /mailboxes/{id} 응답 — deleted 가 false 면 아직 옮길 메일이 남았다(같은 요청을 다시 보낸다).
+ * 하위 메일함까지 지우면(?withChildren=true — 15단계) 수는 모두 나무 전체(그 메일함 + 모든 하위)의 것이고 deleted 는 나무를 다 지웠는가다
+ */
 export interface MailboxDeletion {
   deleted: boolean
   /**
@@ -581,6 +605,22 @@ export interface MailFilterRunRequest extends MailFilterRunRule {
   cursor: string | null
 }
 
+/**
+ * POST /mail-block-runs 본문 — 차단할 때 받은편지함에 이미 있는 그 보낸 사람(도메인)의 메일을 스팸메일함으로 (15단계).
+ * sender 는 차단 목록의 값 그대로(소문자 주소 또는 "@도메인") — 차단한 뒤에만 부른다(목록에 없으면 404 RES_001)
+ */
+export interface MailBlockRunRequest {
+  sender: string
+  /** 처음은 null, 이어 할 때는 앞 응답의 cursor 그대로 (다른 sender 의 cursor · 깨진 cursor 는 400 VAL_001) */
+  cursor: string | null
+}
+
+/**
+ * POST /mail-block-runs 응답 — 필터 적용(MailFilterRun)과 같은 꼴. matched 는 스팸메일함으로 옮긴 수.
+ * 같은 직원의 받은편지함 정리(필터 적용 · 이것)는 한 번에 하나 — 다른 곳에서 하는 중이면 429 REQ_001
+ */
+export type MailBlockRun = MailFilterRun
+
 /** POST /mail-filter-runs 응답 — 한 요청은 25초 안에 끝난다 */
 export interface MailFilterRun {
   /** 이번 요청에서 확인한 받은편지함 메일 수 */
diff --git a/frontend/src/shared/utils/mail-block.spec.ts b/frontend/src/shared/utils/mail-block.spec.ts
index 829be39..1f1ac32 100644
--- a/frontend/src/shared/utils/mail-block.spec.ts
+++ b/frontend/src/shared/utils/mail-block.spec.ts
@@ -10,6 +10,7 @@ import {
   isPublicMailDomain,
   isUnblockableSender,
   mailBlockInputOf,
+  mailBlockRunCopy,
 } from './mail-block'
 
 // 보낸 사람 차단 (계약 2절 "보낸 사람 차단") — 차단 값 · 검사 · 찾기
@@ -134,3 +135,40 @@ describe('mailBlockInputOf — 설정 › 차단한 주소의 칸 (서버보다
     expect(mailBlockInputOf('new@spam.example', OWN, full)).toEqual({ problem: 'full' })
   })
 })
+
+describe('차단할 때 받은 메일 옮기기 — 알림 문구 (15단계 — 디자인 원본 Mailbox15 "차단한 뒤 알림")', () => {
+  const copy = mailBlockRunCopy('news@example.com')
+
+  it('하는 중 — "…차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인" · 전체를 모르면 수를 뺀다', () => {
+    expect(copy.progress({ scanned: 1200, total: 4800 })).toBe(
+      '‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인',
+    )
+    expect(copy.progress({ scanned: 0, total: 0 })).toBe(
+      '‘news@example.com’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중',
+    )
+  })
+
+  it('끝 — 옮긴 수 · 옮길 메일이 없으면 그렇게', () => {
+    expect(copy.done(37)).toBe('‘news@example.com’을(를) 차단하고 받은편지함의 메일 37통을 스팸메일함으로 옮겼습니다.')
+    expect(copy.done(0)).toBe('‘news@example.com’을(를) 차단했습니다. 받은편지함에는 옮길 메일이 없습니다.')
+  })
+
+  it('멈춤 · 처음부터 실패 · 다른 창에서 하는 중 · 이 탭에서 하는 중 — 모두 "차단했다"로 시작한다', () => {
+    expect(copy.stopped({ scanned: 1200, matched: 12, total: 4800 })).toBe(
+      '‘news@example.com’을(를) 차단했습니다. 받은편지함은 4,800통 가운데 1,200통까지 확인해 12통을 옮긴 뒤 멈췄습니다. 다시 시도해 주세요.',
+    )
+    expect(copy.notMoved).toBe('‘news@example.com’을(를) 차단했지만 받은편지함의 메일은 옮기지 못했습니다. 다시 시도해 주세요.')
+    // 서버의 차단 정리는 스팸메일함 비우기와도 잠금을 나눈다 — 필터 적용의 429 글(받은편지함만)과 다르다 (15단계 리뷰)
+    expect(copy.otherWindow).toBe(
+      '‘news@example.com’을(를) 차단했습니다. 다른 창에서 받은편지함이나 스팸메일함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.',
+    )
+    expect(copy.busy).toBe('‘news@example.com’을(를) 차단했습니다. 받은편지함을 정리하는 중입니다. 끝난 뒤 다시 시도해 주세요.')
+    expect(copy.junkBusy).toBe('‘news@example.com’을(를) 차단했습니다. 스팸메일함을 비우는 중입니다. 끝난 뒤 다시 시도해 주세요.')
+  })
+
+  it('도메인 차단도 같은 글 — 받침에 맞춘 조사는 그 값의 끝 글자로', () => {
+    expect(mailBlockRunCopy('@example.com').done(2)).toBe(
+      '‘@example.com’을(를) 차단하고 받은편지함의 메일 2통을 스팸메일함으로 옮겼습니다.',
+    )
+  })
+})
diff --git a/frontend/src/shared/utils/mail-block.ts b/frontend/src/shared/utils/mail-block.ts
index 6e9ac7c..459d998 100644
--- a/frontend/src/shared/utils/mail-block.ts
+++ b/frontend/src/shared/utils/mail-block.ts
@@ -3,8 +3,15 @@
 // 내 주소와 사내 도메인(내 주소의 도메인과 그 하위 — 서버의 MAIL_DOMAIN)은 막을 수 없고, 여러 사람이 쓰는 메일 서비스는 도메인으로 막을 수 없다.
 // 검사는 서버보다 좁게 본다(isStrictEmail) — 화면이 통과시킨 값은 서버도 받는다.
 
-import { MAIL_BLOCK_DOMAIN_PREFIX, MAIL_BLOCK_MAX, PUBLIC_MAIL_DOMAINS } from '@/shared/constants/mail-block'
+import {
+  MAIL_BLOCK_DOMAIN_PREFIX,
+  MAIL_BLOCK_MAX,
+  MAIL_BLOCK_TEXT,
+  PUBLIC_MAIL_DOMAINS,
+} from '@/shared/constants/mail-block'
 import type { BlockedSender } from '@/shared/types/mail'
+import { formatCount } from '@/shared/utils/format'
+import { objectParticle } from '@/shared/utils/korean'
 import { isStrictEmail, normalizeEmail } from '@/shared/utils/mail-address'
 
 /** 칸에 쓴 값의 문제 — 형식 · 이미 차단함 · 내 주소 · 사내 도메인 · 여러 사람이 쓰는 메일 서비스의 도메인 · 500개 */
@@ -80,3 +87,50 @@ export function mailBlockInputOf(
   if (blocks.length >= MAIL_BLOCK_MAX) return { problem: 'full' }
   return { address: value }
 }
+
+// ── 차단할 때 받은 메일 옮기기 — 알림 문구 (15단계 — 디자인 원본 Mailbox15 "차단한 뒤 알림") ─────────────
+
+/** 지금까지 — 확인한 수 · 옮긴 수 · 전체(확인 + 남은 수, 첫 응답 전에는 받은편지함의 메일 수 — 모르면 0) */
+export interface MailBlockRunCounts {
+  scanned: number
+  matched: number
+  total: number
+}
+
+export interface MailBlockRunCopy {
+  /** 하는 중 — "‘…’을(를) 차단했습니다. 받은편지함의 메일을 스팸메일함으로 옮기는 중 · 1,200 / 4,800통 확인" (전체를 모르면 수를 뺀다) */
+  progress: (counts: Pick<MailBlockRunCounts, 'scanned' | 'total'>) => string
+  /** 끝남 — 옮긴 수. 0 이면 "…받은편지함에는 옮길 메일이 없습니다." */
+  done: (matched: number) => string
+  /** 도중에 멈춤 — 거기까지의 수 */
+  stopped: (counts: MailBlockRunCounts) => string
+  /** 처음 요청부터 실패 */
+  notMoved: string
+  /** 다른 창 · PC 에서 받은편지함이나 스팸메일함을 정리하는 중 (429) */
+  otherWindow: string
+  /** 이 탭에서 받은편지함을 정리하는 중에 [다시 시도] */
+  busy: string
+  /** 이 탭에서 스팸메일함을 비우는 중에 [다시 시도] (15단계 리뷰) */
+  junkBusy: string
+}
+
+/** 그 차단(주소 · "@도메인")의 알림 문구 — 모두 "차단했다"는 말로 시작한다(차단은 이미 끝났고 옮기기만 멈춘 것이다) */
+export function mailBlockRunCopy(address: string): MailBlockRunCopy {
+  const particle = objectParticle(address)
+  return {
+    progress: ({ scanned, total }) =>
+      total > 0
+        ? `${MAIL_BLOCK_TEXT.runProgress(address, particle)}${MAIL_BLOCK_TEXT.runProgressCount(formatCount(scanned), formatCount(total))}`
+        : MAIL_BLOCK_TEXT.runProgress(address, particle),
+    done: (matched) =>
+      matched > 0
+        ? MAIL_BLOCK_TEXT.runDone(address, particle, formatCount(matched))
+        : MAIL_BLOCK_TEXT.runNone(address, particle),
+    stopped: ({ scanned, matched, total }) =>
+      MAIL_BLOCK_TEXT.runStopped(address, particle, formatCount(total), formatCount(scanned), formatCount(matched)),
+    notMoved: MAIL_BLOCK_TEXT.runNotMoved(address, particle),
+    otherWindow: MAIL_BLOCK_TEXT.runOtherWindow(address, particle),
+    busy: MAIL_BLOCK_TEXT.runBusy(address, particle),
+    junkBusy: MAIL_BLOCK_TEXT.runJunkBusy(address, particle),
+  }
+}
diff --git a/frontend/src/shared/utils/mail-move-targets.spec.ts b/frontend/src/shared/utils/mail-move-targets.spec.ts
new file mode 100644
index 0000000..4d18e4a
--- /dev/null
+++ b/frontend/src/shared/utils/mail-move-targets.spec.ts
@@ -0,0 +1,138 @@
+import { describe, expect, it } from 'vitest'
+
+import type { Mailbox } from '@/shared/types/mail'
+import {
+  canDropMailOn,
+  hasMoveTarget,
+  hereMailboxIds,
+  junkMarkForMove,
+  mailMoveTargets,
+  type MailMoveTarget,
+} from './mail-move-targets'
+
+// 15단계 — 메일을 옮길 곳 (디자인 원본 Reader15 "1 · 이 메일이 든 메일함에 하위 메일함이 있을 때" · ListDrag15)
+
+function box(id: string, role: Mailbox['role'], name: string, partial: Partial<Mailbox> = {}): Mailbox {
+  return { id, name, role, parentId: null, sortOrder: 0, totalCount: 0, unreadCount: 0, ...partial }
+}
+
+const MAILBOXES: Mailbox[] = [
+  box('inbox', 'inbox', '받은편지함'),
+  box('sent', 'sent', '보낸편지함'),
+  box('drafts', 'drafts', '임시보관함'),
+  box('junk', 'junk', '스팸메일함'),
+  box('trash', 'trash', '휴지통'),
+  box('clients', null, '거래처'),
+  box('clients-2025', null, '2025', { parentId: 'clients' }),
+  box('quotes', null, '견적', { parentId: 'clients' }),
+  box('project', null, '프로젝트', { sortOrder: 1 }),
+  box('project-2025', null, '2025', { parentId: 'project' }),
+]
+
+/** 줄을 "이름 깊이 [고를 수 없음] [여기]" 로 — 차례 · 들여쓰기를 한눈에 */
+function shape(rows: readonly MailMoveTarget[]): string[] {
+  return rows.map(
+    (row) => `${row.mailbox.name} ${row.depth}${row.disabled ? ' off' : ''}${row.here ? ' here' : ''} ${row.group}`,
+  )
+}
+
+describe('mailMoveTargets — [이동 ▾]의 옮길 곳', () => {
+  it('메일함 패널 차례 · 깊이로, 메일이 든 메일함 · 임시보관함 · 휴지통은 뺀다 (받은편지함의 메일)', () => {
+    const rows = mailMoveTargets(MAILBOXES, new Set(['inbox']))
+
+    expect(shape(rows)).toEqual([
+      '보낸편지함 0 system',
+      '스팸메일함 0 system',
+      '거래처 0 mine',
+      '2025 1 mine',
+      '견적 1 mine',
+      '프로젝트 0 mine',
+      '2025 1 mine',
+    ])
+    // 들여 쓴 메일함은 위 메일함부터 읽는다 — 같은 이름이 둘이어도 가른다
+    expect(rows.map((row) => row.spokenName)).toEqual([
+      '보낸편지함',
+      '스팸메일함',
+      '거래처',
+      '거래처 안의 2025',
+      '거래처 안의 견적',
+      '프로젝트',
+      '프로젝트 안의 2025',
+    ])
+  })
+
+  it('메일이 든 메일함에 하위 메일함이 있으면 고를 수 없는 줄로 남긴다 (거래처의 메일)', () => {
+    const rows = mailMoveTargets(MAILBOXES, new Set(['clients']))
+
+    expect(shape(rows)).toEqual([
+      '받은편지함 0 system',
+      '보낸편지함 0 system',
+      '스팸메일함 0 system',
+      '거래처 0 off here mine',
+      '2025 1 mine',
+      '견적 1 mine',
+      '프로젝트 0 mine',
+      '2025 1 mine',
+    ])
+  })
+
+  it('하위 메일함이 있는 휴지통(다른 메일 프로그램이 지운 폴더를 넣어 둠)은 까닭 없이 고를 수 없는 줄 — 하위 메일함은 고를 수 있다', () => {
+    const rows = mailMoveTargets([...MAILBOXES, box('old', null, '옛 폴더', { parentId: 'trash' })], new Set(['inbox']))
+
+    expect(shape(rows).slice(0, 4)).toEqual(['보낸편지함 0 system', '스팸메일함 0 system', '휴지통 0 off system', '옛 폴더 1 system'])
+  })
+
+  it('남긴 줄 아래에 보일 하위 메일함이 없으면 그 줄도 뺀다', () => {
+    // 거래처의 하위가 모두 메일이 든 곳이고 하위가 없다 — 거래처도 남길 까닭이 없다
+    const list = [box('inbox', 'inbox', '받은편지함'), box('a', null, '거래처'), box('b', null, '2025', { parentId: 'a' })]
+    expect(shape(mailMoveTargets(list, new Set(['a', 'b'])))).toEqual(['받은편지함 0 system'])
+  })
+
+  it('고를 수 있는 곳이 없으면 hasMoveTarget 이 거짓', () => {
+    expect(hasMoveTarget(mailMoveTargets([box('inbox', 'inbox', '받은편지함')], new Set(['inbox'])))).toBe(false)
+    expect(hasMoveTarget(mailMoveTargets(MAILBOXES, new Set(['inbox'])))).toBe(true)
+  })
+})
+
+describe('canDropMailOn — 끌어다 놓을 수 있는 메일함', () => {
+  it('[이동 ▾]의 옮길 곳 + 휴지통 — 메일이 든 메일함 · 임시보관함에는 놓을 수 없다', () => {
+    const here = new Set(['inbox'])
+    expect(MAILBOXES.filter((mailbox) => canDropMailOn(mailbox, here)).map((mailbox) => mailbox.id)).toEqual([
+      'sent',
+      'junk',
+      'trash',
+      'clients',
+      'clients-2025',
+      'quotes',
+      'project',
+      'project-2025',
+    ])
+  })
+})
+
+describe('hereMailboxIds — 옮기는 메일이 이미 든 메일함', () => {
+  it('목록이 가리키는 메일함과, 옮기는 메일이 모두 든 메일함', () => {
+    expect([...hereMailboxIds([{ mailboxIds: ['inbox'] }, { mailboxIds: ['inbox', 'clients'] }], 'inbox')]).toEqual(['inbox'])
+    // 전체 메일함 검색 — 목록이 가리키는 메일함이 없다. 메일마다 다르면 모두가 든 곳만
+    expect([...hereMailboxIds([{ mailboxIds: ['inbox'] }, { mailboxIds: ['clients'] }], null)]).toEqual([])
+    expect([...hereMailboxIds([{ mailboxIds: ['clients', 'project'] }], null)]).toEqual(['clients', 'project'])
+  })
+})
+
+describe('junkMarkForMove — 스팸메일함으로 옮기는 세 길 같게', () => {
+  it('스팸메일함으로 옮기면 스팸 표시([스팸 신고]와 같다)', () => {
+    expect(junkMarkForMove({ role: 'junk' }, false)).toBe(true)
+  })
+
+  it('스팸메일함에서 휴지통 밖으로 꺼내면 스팸 아님 표시([스팸 아님]과 같다) — 휴지통으로는 표시를 바꾸지 않는다', () => {
+    expect(junkMarkForMove({ role: null }, true)).toBe(false)
+    expect(junkMarkForMove({ role: 'inbox' }, true)).toBe(false)
+    expect(junkMarkForMove({ role: 'trash' }, true)).toBeUndefined()
+  })
+
+  it('그 밖의 옮기기는 표시를 바꾸지 않는다', () => {
+    expect(junkMarkForMove({ role: null }, false)).toBeUndefined()
+    expect(junkMarkForMove({ role: 'trash' }, false)).toBeUndefined()
+    expect(junkMarkForMove({ role: 'junk' }, true)).toBeUndefined()
+  })
+})
diff --git a/frontend/src/shared/utils/mail-move-targets.ts b/frontend/src/shared/utils/mail-move-targets.ts
new file mode 100644
index 0000000..65bccc1
--- /dev/null
+++ b/frontend/src/shared/utils/mail-move-targets.ts
@@ -0,0 +1,97 @@
+// 메일을 옮길 곳 — [이동 ▾](목록 · 읽기 화면)의 메뉴와 끌어다 놓기가 함께 쓰는 규칙 (15단계 — 디자인 원본 Reader15 · ListDrag15, 순수 함수만 둔다)
+// - 옮길 곳은 메일함 패널과 같은 차례 · 깊이다(mailbox.ts 의 mailboxTree) — 같은 이름이 다른 상위 아래에 있어도 가를 수 있게 들여 쓴다
+// - 메일이 이미 든 메일함(here) · 임시보관함 · 휴지통은 옮길 곳이 아니다(휴지통으로는 [삭제]로 — 끌어다 놓기는 휴지통에도 놓을 수 있다).
+//   그 메일함에 하위 메일함이 있으면 빼지 않고 고를 수 없는 줄로 남긴다 — 하위 메일함이 누구 밑에 있는지 보이게
+// - 스팸메일함으로 옮기면 [스팸 신고]와 같이 스팸 표시를, 스팸메일함에서 휴지통 밖으로 꺼내면 [스팸 아님]과 같이 스팸 아님 표시를 함께 보낸다(junkMarkForMove)
+
+import type { Mailbox, MessageSummary } from '@/shared/types/mail'
+import { mailboxSpokenName, mailboxTree, type MailboxGroup } from '@/shared/utils/mailbox'
+
+/** 옮길 곳 한 줄 */
+export interface MailMoveTarget {
+  mailbox: Mailbox
+  /** 들여쓰기 단계 — 뿌리 0 (패널처럼 3단계까지만 들여 쓴다) */
+  depth: number
+  /** 화면 낭독 이름 — 위 메일함부터 "거래처 안의 2025" (뿌리면 이름 그대로) */
+  spokenName: string
+  /** 고를 수 없다 — 나무 모양을 지키려고 남긴 줄 (메일이 든 메일함 · 임시보관함 · 휴지통에 하위 메일함이 있을 때) */
+  disabled: boolean
+  /** 메일이 이미 든 메일함 — 고를 수 없는 까닭을 이름 아래에 적는다 */
+  here: boolean
+  /** 기본 메일함 묶음 · 내 메일함 묶음 — 메뉴는 둘 사이에 선을 긋는다 */
+  group: MailboxGroup
+}
+
+/** 메일 옮기기의 옮길 곳이 아닌 메일함 — 임시보관함(임시 저장본만) · 휴지통(옮기기가 아니라 [삭제]) */
+function isNeverMoveTarget(mailbox: Pick<Mailbox, 'role'>): boolean {
+  return mailbox.role === 'drafts' || mailbox.role === 'trash'
+}
+
+/**
+ * [이동 ▾] 메뉴의 옮길 곳 — 메일함 패널 차례. 메일이 든 메일함(hereIds) · 임시보관함 · 휴지통은 빼고, 그중 하위 메일함이 있는 것은
+ * 고를 수 없는 줄로 남긴다. 남긴 줄 아래에 보일 하위 메일함이 하나도 없으면 그 줄도 뺀다
+ */
+export function mailMoveTargets(list: readonly Mailbox[], hereIds: ReadonlySet<string>): MailMoveTarget[] {
+  const rows: MailMoveTarget[] = []
+  for (const entry of mailboxTree(list)) {
+    const here = hereIds.has(entry.mailbox.id)
+    const blocked = here || isNeverMoveTarget(entry.mailbox)
+    if (blocked && !entry.hasChildren) continue
+    rows.push({
+      mailbox: entry.mailbox,
+      depth: entry.depth,
+      spokenName: mailboxSpokenName(entry),
+      disabled: blocked,
+      here,
+      group: entry.group,
+    })
+  }
+  // 고를 수 없는 줄 가운데 바로 뒤에 더 깊은 줄(보일 하위 메일함)이 없는 것을 뒤에서부터 뺀다 — 위 줄도 함께 비면 그 줄도
+  for (let index = rows.length - 1; index >= 0; index -= 1) {
+    const row = rows[index]
+    if (!row?.disabled) continue
+    if ((rows[index + 1]?.depth ?? -1) <= row.depth) rows.splice(index, 1)
+  }
+  return rows
+}
+
+/** 고를 수 있는 옮길 곳이 있는가 — 없으면 [이동 ▾] 메뉴를 열지 않는다 */
+export function hasMoveTarget(rows: readonly MailMoveTarget[]): boolean {
+  return rows.some((row) => !row.disabled)
+}
+
+/**
+ * 끌어다 놓을 수 있는 메일함인가 (메일함 패널의 줄) — [이동 ▾]의 옮길 곳에 휴지통을 더한 곳(= [삭제]).
+ * 메일이 이미 든 메일함 · 임시보관함에는 놓을 수 없다 (「예약됨」은 메일함이 아니라 놓을 곳이 없다)
+ */
+export function canDropMailOn(mailbox: Pick<Mailbox, 'id' | 'role'>, hereIds: ReadonlySet<string>): boolean {
+  return mailbox.role !== 'drafts' && !hereIds.has(mailbox.id)
+}
+
+/**
+ * 옮기는 메일이 이미 든 메일함 — 목록이 가리키는 메일함(scopeId)과, 옮기는 메일이 모두 들어 있는 메일함.
+ * 그곳으로 옮겨도 달라지는 것이 없다 (전체 메일함 검색에서 여러 메일함의 메일을 골랐으면 모두가 든 곳만)
+ */
+export function hereMailboxIds(
+  targets: readonly Pick<MessageSummary, 'mailboxIds'>[],
+  scopeId: string | null,
+): Set<string> {
+  const here = new Set<string>()
+  if (scopeId) here.add(scopeId)
+  const [first, ...rest] = targets
+  if (!first) return here
+  for (const id of first.mailboxIds) {
+    if (rest.every((target) => target.mailboxIds.includes(id))) here.add(id)
+  }
+  return here
+}
+
+/**
+ * 옮기며 함께 보낼 스팸 표시 — 스팸메일함으로 옮기면 스팸(true, [스팸 신고]와 같다), 스팸메일함에서 휴지통 밖으로 꺼내면 스팸 아님(false, [스팸 아님]과 같다).
+ * 휴지통으로 옮기는 것은 표시를 바꾸지 않는다(undefined — 그냥 옮기기). 되돌리기는 반대 값을 보낸다 (useMailMoveFeedback)
+ */
+export function junkMarkForMove(target: Pick<Mailbox, 'role'>, fromJunk: boolean): boolean | undefined {
+  if (target.role === 'junk') return fromJunk ? undefined : true
+  if (fromJunk && target.role !== 'trash') return false
+  return undefined
+}
diff --git a/frontend/src/shared/utils/mailbox-operation.spec.ts b/frontend/src/shared/utils/mailbox-operation.spec.ts
index 585d6d9..d046cd1 100644
--- a/frontend/src/shared/utils/mailbox-operation.spec.ts
+++ b/frontend/src/shared/utils/mailbox-operation.spec.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import { MAILBOX_OPERATION_TEXT } from '@/shared/constants/mailbox-manage'
-import { initialOperationTotal, mailboxOperationCopy } from './mailbox-operation'
+import { initialOperationTotal, mailboxMoveText, mailboxOperationCopy } from './mailbox-operation'
 
 // 오래 걸리는 메일함 처리의 알림 문구 (디자인 원본 MailActions4 "오래 걸리는 처리" · "알림 문구")
 
@@ -42,3 +42,27 @@ describe('mailboxOperationCopy', () => {
     expect(initialOperationTotal('delete', mailbox)).toBe(148)
   })
 })
+
+describe('하위 메일함까지 지우기 · 메일함 옮기기 (15단계 — 디자인 원본 Mailbox15)', () => {
+  it('하위까지 지우면 시작할 때의 전체 수에 모든 깊이의 하위 메일함 메일을 더한다 — 모두 읽음은 그대로 안 읽은 수', () => {
+    const mailbox = { unreadCount: 3, totalCount: 12 }
+    const descendants = [{ totalCount: 4 }, { totalCount: 24 }, { totalCount: -1 }]
+
+    expect(initialOperationTotal('delete', mailbox, descendants)).toBe(40)
+    expect(initialOperationTotal('read', mailbox, descendants)).toBe(3)
+    expect(initialOperationTotal('delete', mailbox)).toBe(12)
+  })
+
+  it('옮긴 뒤 알림 — 내 메일함은 따옴표 · 받은편지함은 따옴표 없이 · 맨 위는 "다른 메일함 밖으로", 되돌린 뒤는 "되돌렸습니다"', () => {
+    const project = { name: '프로젝트', role: null }
+    const inbox = { name: '받은편지함', role: 'inbox' as const }
+
+    expect(mailboxMoveText('2025', project)).toBe('‘2025’ 메일함을 ‘프로젝트’ 안으로 옮겼습니다.')
+    expect(mailboxMoveText('2025', inbox)).toBe('‘2025’ 메일함을 받은편지함 안으로 옮겼습니다.')
+    expect(mailboxMoveText('2025', null)).toBe('‘2025’ 메일함을 다른 메일함 밖으로 옮겼습니다.')
+    expect(mailboxMoveText('2025', { name: '거래처', role: null }, { restored: true })).toBe(
+      '‘2025’ 메일함을 ‘거래처’ 안으로 되돌렸습니다.',
+    )
+    expect(mailboxMoveText('2025', null, { restored: true })).toBe('‘2025’ 메일함을 다른 메일함 밖으로 되돌렸습니다.')
+  })
+})
diff --git a/frontend/src/shared/utils/mailbox-operation.ts b/frontend/src/shared/utils/mailbox-operation.ts
index c1f6579..ae87fb7 100644
--- a/frontend/src/shared/utils/mailbox-operation.ts
+++ b/frontend/src/shared/utils/mailbox-operation.ts
@@ -1,7 +1,7 @@
 // 오래 걸리는 메일함 처리 — 모두 읽음 · 비우기 · 메일함 지우기의 알림 문구 (계약 2절 "메일함 관리" · 디자인 원본 MailActions4 — 순수 함수만 둔다)
 // 서버는 한 요청에 500통씩(25초 안) 처리하고 남은 수를 돌려준다 — 화면은 0 이 될 때까지 다시 보내며 "…하는 중 · 600 / 1,234통"을 보인다.
 
-import { MAILBOX_OPERATION_TEXT } from '@/shared/constants/mailbox-manage'
+import { MAILBOX_OPERATION_TEXT, MAILBOX_RESULT_TEXT } from '@/shared/constants/mailbox-manage'
 import type { Mailbox } from '@/shared/types/mail'
 import { formatCount } from '@/shared/utils/format'
 import { objectParticle, subjectParticle } from '@/shared/utils/korean'
@@ -21,9 +21,17 @@ export interface MailboxOperationCopy {
   failed: (done: number, total: number) => string
 }
 
-/** 시작할 때 아는 전체 수 — 첫 응답 전에 알림에 보인다 (그 뒤로는 서버가 돌려준 남은 수로 맞춘다) */
-export function initialOperationTotal(kind: MailboxOperationKind, mailbox: Pick<Mailbox, 'unreadCount' | 'totalCount'>): number {
-  return Math.max(0, kind === 'read' ? mailbox.unreadCount : mailbox.totalCount)
+/**
+ * 시작할 때 아는 전체 수 — 첫 응답 전에 알림에 보인다 (그 뒤로는 서버가 돌려준 남은 수로 맞춘다).
+ * 하위 메일함까지 지우면(15단계) 하위 메일함(descendants — 모든 깊이)의 메일 수도 더한다
+ */
+export function initialOperationTotal(
+  kind: MailboxOperationKind,
+  mailbox: Pick<Mailbox, 'unreadCount' | 'totalCount'>,
+  descendants: readonly Pick<Mailbox, 'totalCount'>[] = [],
+): number {
+  if (kind === 'read') return Math.max(0, mailbox.unreadCount)
+  return [mailbox, ...descendants].reduce((sum, item) => sum + Math.max(0, item.totalCount), 0)
 }
 
 export function mailboxOperationCopy(kind: MailboxOperationKind, mailboxName: string): MailboxOperationCopy {
@@ -61,3 +69,17 @@ export function mailboxOperationCopy(kind: MailboxOperationKind, mailboxName: st
     failed,
   }
 }
+
+/**
+ * 메일함 옮기기 알림 (15단계 — 디자인 원본 Mailbox15 "옮긴 뒤 알림"). into 는 새 상위 — null 이면 맨 위("다른 메일함 밖으로").
+ * 내 메일함은 따옴표로 묶고 받은편지함 같은 기본 메일함은 묶지 않는다. restored 면 [되돌리기] 뒤의 글("…안으로 되돌렸습니다.")
+ */
+export function mailboxMoveText(
+  name: string,
+  into: Pick<Mailbox, 'name' | 'role'> | null,
+  options: { restored?: boolean } = {},
+): string {
+  if (!into) return options.restored ? MAILBOX_RESULT_TEXT.restoredToTop(name) : MAILBOX_RESULT_TEXT.movedToTop(name)
+  const place = into.role === null ? MAILBOX_RESULT_TEXT.quoted(into.name) : into.name
+  return options.restored ? MAILBOX_RESULT_TEXT.restoredInto(name, place) : MAILBOX_RESULT_TEXT.movedInto(name, place)
+}
diff --git a/frontend/src/shared/utils/mailbox.spec.ts b/frontend/src/shared/utils/mailbox.spec.ts
index 904b222..012241e 100644
--- a/frontend/src/shared/utils/mailbox.spec.ts
+++ b/frontend/src/shared/utils/mailbox.spec.ts
@@ -3,12 +3,19 @@ import { describe, expect, it } from 'vitest'
 import { MAILBOX_EMPTY_HINTS } from '@/shared/constants/mail'
 import type { Mailbox } from '@/shared/types/mail'
 import {
+  canHoldChildMailbox,
+  descendantMailboxes,
   emptyMailboxText,
   hasChildMailbox,
   mailboxActions,
+  mailboxDisplayName,
   mailboxIcon,
+  mailboxMoveTargets,
   mailboxNameProblem,
+  mailboxSpokenName,
+  mailboxTree,
   orderMailboxes,
+  sameMailboxName,
   splitMailboxGroups,
 } from './mailbox'
 
@@ -121,11 +128,13 @@ describe('메일함 관리 (4단계 — 디자인 README "메일함 관리")', (
     ])
   })
 
-  it('⋯ 메뉴 — 안 읽은 메일이 있으면 모두 읽음 · 받은편지함과 내 메일함은 하위 메일함 · 내 메일함만 이름 바꾸기 · 지우기 · 휴지통 / 스팸메일함은 비우기', () => {
+  it('⋯ 메뉴 — 안 읽은 메일이 있으면 모두 읽음 · 받은편지함과 내 메일함은 하위 메일함 · 내 메일함만 이름 바꾸기 · 옮기기 · 지우기 · 휴지통 / 스팸메일함은 비우기', () => {
     expect(mailboxActions({ ...inbox, unreadCount: 3 })).toEqual(['markRead', 'createChild'])
     expect(mailboxActions(inbox)).toEqual(['createChild'])
     expect(mailboxActions(sent)).toEqual([])
-    expect(mailboxActions({ ...project, unreadCount: 1 })).toEqual(['markRead', 'createChild', 'rename', 'delete'])
+    // 옮기기는 이름 바꾸기 다음 · 지우기 앞 (15단계 — 디자인 원본 Mailbox15). 받은편지함 아래의 내 메일함도 옮길 수 있다
+    expect(mailboxActions({ ...project, unreadCount: 1 })).toEqual(['markRead', 'createChild', 'rename', 'move', 'delete'])
+    expect(mailboxActions(inboxChild)).toEqual(['createChild', 'rename', 'move', 'delete'])
     expect(mailboxActions({ ...trash, totalCount: 21 })).toEqual(['empty'])
     expect(mailboxActions(mailbox({ id: 'j', name: '스팸메일함', role: 'junk', totalCount: 5, unreadCount: 1 }))).toEqual([
       'markRead',
@@ -135,7 +144,7 @@ describe('메일함 관리 (4단계 — 디자인 README "메일함 관리")', (
     expect(mailboxActions(trash)).toEqual([])
   })
 
-  it('하위 메일함이 있는가 — 지우기를 막는다', () => {
+  it('하위 메일함이 있는가 — 지우기 확인 창이 하위까지 지울지 묻는다', () => {
     expect(hasChildMailbox([project, quote], 'p')).toBe(true)
     expect(hasChildMailbox([project, quote], 'q')).toBe(false)
   })
@@ -150,3 +159,176 @@ describe('메일함 관리 (4단계 — 디자인 README "메일함 관리")', (
     expect(mailboxNameProblem('견적\u00852026')).toBe('invalid')
   })
 })
+
+describe('메일함 나무 (15단계 — 디자인 원본 Mailbox15 · Reader15)', () => {
+  // 보드의 예: 거래처 안에 2025(그 안에 정산) · 견적, 보관 안에도 2025, 프로젝트 안에 견적 — 받은편지함 아래 협력사
+  const inbox = mailbox({ id: 'i', name: '받은편지함', role: 'inbox' })
+  const sent = mailbox({ id: 's', name: '보낸편지함', role: 'sent' })
+  const sentFolder = mailbox({ id: 'sf', name: '보낸 정리', parentId: 's' })
+  const junk = mailbox({ id: 'j', name: '스팸메일함', role: 'junk' })
+  const trash = mailbox({ id: 't', name: '휴지통', role: 'trash' })
+  const partner = mailbox({ id: 'ip', name: '협력사', parentId: 'i' })
+  const client = mailbox({ id: 'c', name: '거래처' })
+  const client2025 = mailbox({ id: 'c25', name: '2025', parentId: 'c' })
+  const settle = mailbox({ id: 'c25s', name: '정산', parentId: 'c25' })
+  const clientQuote = mailbox({ id: 'cq', name: '견적', parentId: 'c' })
+  const keep = mailbox({ id: 'b', name: '보관' })
+  const keep2025 = mailbox({ id: 'b25', name: '2025', parentId: 'b' })
+  const project = mailbox({ id: 'p', name: '프로젝트' })
+  const projectQuote = mailbox({ id: 'pq', name: '견적', parentId: 'p' })
+  const LIST = [
+    project,
+    projectQuote,
+    keep2025,
+    keep,
+    settle,
+    clientQuote,
+    client2025,
+    client,
+    partner,
+    trash,
+    junk,
+    sentFolder,
+    sent,
+    inbox,
+  ]
+
+  it('mailboxTree — 패널 차례 · 깊이에 위 메일함 · 하위가 있는지 · 묶음', () => {
+    const entries = mailboxTree(LIST)
+
+    expect(entries.map((entry) => [entry.mailbox.id, entry.depth, entry.group, entry.hasChildren])).toEqual([
+      ['i', 0, 'system', true],
+      ['ip', 1, 'system', false],
+      ['s', 0, 'system', true],
+      ['sf', 1, 'system', false],
+      ['j', 0, 'system', false],
+      ['t', 0, 'system', false],
+      ['c', 0, 'mine', true],
+      ['c25', 1, 'mine', true],
+      ['c25s', 2, 'mine', false],
+      ['cq', 1, 'mine', false],
+      ['b', 0, 'mine', true],
+      ['b25', 1, 'mine', false],
+      ['p', 0, 'mine', true],
+      ['pq', 1, 'mine', false],
+    ])
+    expect(entries.find((entry) => entry.mailbox.id === 'c25s')?.ancestors.map((item) => item.id)).toEqual(['c', 'c25'])
+    expect(entries.find((entry) => entry.mailbox.id === 'c')?.ancestors).toEqual([])
+    // 차례와 깊이는 패널(orderMailboxes)과 같다
+    expect(entries.map((entry) => [entry.mailbox.id, entry.depth])).toEqual(
+      orderMailboxes(LIST).map((node) => [node.mailbox.id, node.depth]),
+    )
+  })
+
+  it('mailboxTree — 부모를 찾을 수 없거나 순환이어도 빠뜨리지 않고 위 메일함은 나무 그대로', () => {
+    const entries = mailboxTree([
+      mailbox({ id: 'orphan', name: '고아', parentId: 'missing' }),
+      mailbox({ id: 'a', name: '가', parentId: 'b' }),
+      mailbox({ id: 'b', name: '나', parentId: 'a' }),
+    ])
+
+    expect(entries.map((entry) => entry.mailbox.id).sort()).toEqual(['a', 'b', 'orphan'])
+    for (const entry of entries) expect(entry.ancestors).toHaveLength(entry.depth)
+  })
+
+  it('mailboxSpokenName — 위 메일함부터 "거래처 안의 2025"', () => {
+    const entries = mailboxTree(LIST)
+    const spoken = (id: string) => {
+      const entry = entries.find((item) => item.mailbox.id === id)
+      return entry ? mailboxSpokenName(entry) : ''
+    }
+
+    expect(spoken('c25')).toBe('거래처 안의 2025')
+    expect(spoken('c25s')).toBe('거래처 안의 2025 안의 정산')
+    expect(spoken('ip')).toBe('받은편지함 안의 협력사')
+    expect(spoken('c')).toBe('거래처')
+  })
+
+  it('mailboxDisplayName — 같은 이름이 다른 곳에도 있을 때만 "거래처 › 2025", 하나뿐이면 이름 그대로', () => {
+    expect(mailboxDisplayName(LIST, client2025)).toBe('거래처 › 2025')
+    expect(mailboxDisplayName(LIST, keep2025)).toBe('보관 › 2025')
+    expect(mailboxDisplayName(LIST, projectQuote)).toBe('프로젝트 › 견적')
+    expect(mailboxDisplayName(LIST, settle)).toBe('정산')
+    expect(mailboxDisplayName(LIST, client)).toBe('거래처')
+    expect(mailboxDisplayName(LIST, inbox)).toBe('받은편지함')
+  })
+
+  it('mailboxDisplayName — 위 메일함 이름까지 같으면 가를 수 있을 때까지 올라간다 · 맨 위의 메일함은 이름 그대로', () => {
+    const a = mailbox({ id: 'a', name: 'A' })
+    const aYear = mailbox({ id: 'ay', name: '2025', parentId: 'a' })
+    const aMonth = mailbox({ id: 'am', name: '11월', parentId: 'ay' })
+    const b = mailbox({ id: 'b', name: 'B' })
+    const bYear = mailbox({ id: 'by', name: '2025', parentId: 'b' })
+    const bMonth = mailbox({ id: 'bm', name: '11월', parentId: 'by' })
+    const rootMonth = mailbox({ id: 'rm', name: '11월' })
+    const list = [a, aYear, aMonth, b, bYear, bMonth, rootMonth]
+
+    expect(mailboxDisplayName(list, aMonth)).toBe('A › 2025 › 11월')
+    expect(mailboxDisplayName(list, bMonth)).toBe('B › 2025 › 11월')
+    expect(mailboxDisplayName(list, rootMonth)).toBe('11월')
+    // 목록에 없는 메일함(그사이 지워짐)은 이름 그대로
+    expect(mailboxDisplayName(list, { id: 'gone', name: '11월' })).toBe('11월')
+  })
+
+  it('mailboxDisplayName — 글자 모양이 같으면(NFC · NFD) 같은 이름으로 본다', () => {
+    const a = mailbox({ id: 'a', name: 'A' })
+    const b = mailbox({ id: 'b', name: 'B' })
+    const composed = mailbox({ id: 'q', name: '견적', parentId: 'a' })
+    const decomposed = mailbox({ id: 'n', name: '견적'.normalize('NFD'), parentId: 'b' })
+
+    expect(mailboxDisplayName([a, b, composed, decomposed], composed)).toBe('A › 견적')
+  })
+
+  it('canHoldChildMailbox · sameMailboxName — 하위 메일함은 받은편지함 · 내 메일함만, 이름은 대소문자를 가리지 않는다', () => {
+    expect([inbox, sent, junk, trash, client].map(canHoldChildMailbox)).toEqual([true, false, false, false, true])
+    expect(canHoldChildMailbox(mailbox({ id: 'a', name: '보관함', role: 'archive' }))).toBe(false)
+    expect(sameMailboxName('Report', 'report')).toBe(true)
+    expect(sameMailboxName('p15-자식', 'P15-자식')).toBe(true)
+    expect(sameMailboxName('2025', '2026')).toBe(false)
+  })
+
+  it('mailboxMoveTargets — 맨 위 · 받은편지함(과 그 아래) · 내 메일함, 고를 수 없는 줄은 까닭과 함께 남긴다', () => {
+    const targets = mailboxMoveTargets(LIST, client2025)
+
+    expect(targets.map((target) => [target.parentId, target.group, target.block])).toEqual([
+      [null, 'top', null],
+      ['i', 'system', null],
+      ['ip', 'system', null],
+      // 지금 있는 곳 · 옮기는 메일함과 그 하위 · 바로 아래에 같은 이름(보관 › 2025)이 있는 곳
+      ['c', 'mine', 'current'],
+      ['c25', 'mine', 'self'],
+      ['c25s', 'mine', 'self'],
+      ['cq', 'mine', null],
+      ['b', 'mine', 'sameName'],
+      ['b25', 'mine', null],
+      ['p', 'mine', null],
+      ['pq', 'mine', null],
+    ])
+    // 보낸편지함 · 스팸메일함 · 휴지통과 그 아래(보낸 정리)는 옮길 곳이 아니다
+    expect(targets.some((target) => ['s', 'sf', 'j', 't'].includes(target.parentId ?? ''))).toBe(false)
+    expect(targets[3]?.entry?.mailbox.id).toBe('c')
+    expect(targets[0]?.entry).toBeNull()
+  })
+
+  it('mailboxMoveTargets — 맨 위의 메일함은 맨 위 줄이 지금 있는 곳, 같은 이름은 대소문자를 가리지 않고 본다', () => {
+    const report = mailbox({ id: 'r', name: 'Report', sortOrder: 1 })
+    const lowerReport = mailbox({ id: 'pr', name: 'report', parentId: 'p' })
+    const targets = mailboxMoveTargets([inbox, project, report, lowerReport], report)
+
+    expect(targets.map((target) => [target.parentId, target.block])).toEqual([
+      [null, 'current'],
+      ['i', null],
+      ['p', 'sameName'],
+      ['pr', null],
+      ['r', 'self'],
+    ])
+    // 맨 위에 같은 이름(대소문자만 다름)이 있으면 맨 위 줄도 고를 수 없다
+    const nested = mailbox({ id: 'n', name: 'REPORT', parentId: 'p' })
+    expect(mailboxMoveTargets([inbox, project, report, nested], nested)[0]?.block).toBe('sameName')
+  })
+
+  it('descendantMailboxes — 모든 깊이의 하위 메일함', () => {
+    expect(descendantMailboxes(LIST, 'c').map((item) => item.id)).toEqual(['c25', 'c25s', 'cq'])
+    expect(descendantMailboxes(LIST, 'c25s')).toEqual([])
+  })
+})
diff --git a/frontend/src/shared/utils/mailbox.ts b/frontend/src/shared/utils/mailbox.ts
index d3239fe..796f5f3 100644
--- a/frontend/src/shared/utils/mailbox.ts
+++ b/frontend/src/shared/utils/mailbox.ts
@@ -7,7 +7,11 @@ import {
   MAILBOX_ROLE_ORDER,
   type MailboxKind,
 } from '@/shared/constants/mail'
-import { MAILBOX_NAME_FORBIDDEN_CHAR, MAILBOX_NAME_MAX_LENGTH } from '@/shared/constants/mailbox-manage'
+import {
+  MAILBOX_NAME_FORBIDDEN_CHAR,
+  MAILBOX_NAME_MAX_LENGTH,
+  MAILBOX_PATH_TEXT,
+} from '@/shared/constants/mailbox-manage'
 import type { IconName } from '@/shared/constants/icons'
 import type { Mailbox, MailboxRole } from '@/shared/types/mail'
 import { subjectParticle } from '@/shared/utils/korean'
@@ -89,7 +93,140 @@ export function splitMailboxGroups(nodes: readonly MailboxNode[]): { system: Mai
   return { system, mine }
 }
 
-/** 하위 메일함이 있는가 — 있으면 지울 수 없다 (서버도 400 VAL_001, 화면이 먼저 막는다) */
+// ── 메일함 나무 (15단계 — [이동 ▾] 들여쓰기 · 옮기기 창 · 알림의 "상위 › 이름") ─────────────
+
+/** 메일함 패널의 두 묶음 — 기본 메일함(역할이 있는 뿌리와 그 아래) · 내 메일함(역할 없는 뿌리와 그 아래) */
+export type MailboxGroup = 'system' | 'mine'
+
+/** 메일함 나무의 한 줄 — 패널과 같은 차례 · 깊이(orderMailboxes)에 위 메일함 · 하위가 있는지 · 묶음을 더했다 */
+export interface MailboxTreeEntry extends MailboxNode {
+  /** 뿌리부터 바로 위 메일함까지 — 뿌리면 빈 배열 */
+  ancestors: readonly Mailbox[]
+  /** 하위 메일함이 있다 */
+  hasChildren: boolean
+  group: MailboxGroup
+}
+
+/**
+ * 메일함 목록 → 패널 차례로 편 나무. 차례 · 깊이는 orderMailboxes 그대로(부모를 찾을 수 없거나 순환이면 맨 위로 — 빠뜨리지 않는다),
+ * 묶음은 splitMailboxGroups 와 같다(뿌리의 역할을 하위가 따라간다)
+ */
+export function mailboxTree(list: readonly Mailbox[]): MailboxTreeEntry[] {
+  const nodes = orderMailboxes(list)
+  const entries: MailboxTreeEntry[] = []
+  /** 지금 줄 위의 메일함들 — 깊이 d 인 줄 앞에는 d 개가 남는다 (orderMailboxes 는 부모 바로 뒤에 하위를 둔다) */
+  const path: Mailbox[] = []
+  let group: MailboxGroup = 'mine'
+  nodes.forEach((node, index) => {
+    path.length = Math.min(path.length, node.depth)
+    if (node.depth === 0) group = node.mailbox.role !== null ? 'system' : 'mine'
+    entries.push({
+      mailbox: node.mailbox,
+      depth: node.depth,
+      ancestors: [...path],
+      hasChildren: (nodes[index + 1]?.depth ?? -1) > node.depth,
+      group,
+    })
+    path.push(node.mailbox)
+  })
+  return entries
+}
+
+/** 들여 쓴 메일함의 화면 낭독 이름 — 위 메일함부터 "거래처 안의 2025" (뿌리면 이름 그대로) */
+export function mailboxSpokenName(entry: Pick<MailboxTreeEntry, 'mailbox' | 'ancestors'>): string {
+  return [...entry.ancestors.map((mailbox) => mailbox.name), entry.mailbox.name].join(MAILBOX_PATH_TEXT.spokenJoin)
+}
+
+/** 보기에 같은 이름인가 — 알림에서 가려야 할 이름 (글자 모양이 같으면 같다 — NFC) */
+function sameDisplayedName(a: string, b: string): boolean {
+  return a.normalize('NFC') === b.normalize('NFC')
+}
+
+/**
+ * 알림에 쓰는 메일함 이름 — 같은 이름의 메일함이 다른 곳에도 있을 때만 위 메일함 이름을 붙인다 ("거래처 › 2025").
+ * 위 메일함까지 같으면 한 단계씩 더 올라가 가를 수 있을 때까지 붙인다("거래처 › 2025 › 정산"). 맨 위의 메일함 · 목록에 없는 메일함은 이름 그대로
+ */
+export function mailboxDisplayName(list: readonly Mailbox[], mailbox: Pick<Mailbox, 'id' | 'name'>): string {
+  if (list.filter((other) => sameDisplayedName(other.name, mailbox.name)).length < 2) return mailbox.name
+  const entries = mailboxTree(list)
+  const own = entries.find((entry) => entry.mailbox.id === mailbox.id)
+  if (!own || own.ancestors.length === 0) return mailbox.name
+  const others = entries.filter(
+    (entry) => entry.mailbox.id !== mailbox.id && sameDisplayedName(entry.mailbox.name, mailbox.name),
+  )
+  const ownPath = own.ancestors.map((ancestor) => ancestor.name)
+  for (let take = 1; take <= ownPath.length; take += 1) {
+    const tail = ownPath.slice(-take)
+    const clash = others.some((other) => {
+      const otherPath = other.ancestors.map((ancestor) => ancestor.name)
+      if (otherPath.length < take) return false
+      return otherPath.slice(-take).every((name, index) => sameDisplayedName(name, tail[index] ?? ''))
+    })
+    if (!clash) return [...tail, mailbox.name].join(MAILBOX_PATH_TEXT.displayJoin)
+  }
+  return [...ownPath, mailbox.name].join(MAILBOX_PATH_TEXT.displayJoin)
+}
+
+/** 하위 메일함을 둘 수 있는 메일함 — 받은편지함 · 내 메일함(역할 없음). ⋯ 「하위 메일함 만들기」와 옮기기 창의 옮길 곳이 같은 규칙이다 */
+export function canHoldChildMailbox(mailbox: Pick<Mailbox, 'role'>): boolean {
+  return mailbox.role === 'inbox' || mailbox.role === null
+}
+
+/** 같은 자리에 둘 수 없는 이름인가 — 엔진은 대소문자를 가리지 않고 같은 이름으로 본다 (Report 와 report — 15단계 엔진 실측 E1) */
+export function sameMailboxName(a: string, b: string): boolean {
+  return a.normalize('NFC').toLowerCase() === b.normalize('NFC').toLowerCase()
+}
+
+/** 옮기기 창에서 고를 수 없는 까닭 — 옮기는 메일함 자신이나 그 하위 · 지금 있는 곳 · 같은 이름의 메일함이 이미 있는 곳 */
+export type MailboxMoveBlock = 'self' | 'current' | 'sameName'
+
+/** 옮기기 창의 한 줄 (디자인 원본 Mailbox15 "옮기기 창") */
+export interface MailboxMoveTarget {
+  /** 옮기면 새 상위 — 맨 위 줄이면 null */
+  parentId: string | null
+  /** 그 메일함 — 맨 위 줄이면 null */
+  entry: MailboxTreeEntry | null
+  /** 맨 위 줄 · 기본 메일함(받은편지함과 그 아래) · 내 메일함 */
+  group: 'top' | MailboxGroup
+  /** 고를 수 없으면 그 까닭 */
+  block: MailboxMoveBlock | null
+}
+
+/**
+ * 메일함을 옮길 곳 — 맨 위 · 받은편지함(과 그 아래) · 내 메일함을 패널 차례로 (디자인 원본 Mailbox15 "옮기기 창").
+ * 하위 메일함을 둘 수 없는 메일함(보낸편지함 · 임시보관함 · 스팸메일함 · 휴지통 · 보관함)과 그 아래는 뺀다 — 하위 메일함을 만들 수 있는 곳과 같다.
+ * 고를 수 없는 줄도 남긴다: 옮기는 메일함 자신과 그 하위(self) → 지금 있는 곳(current) → 바로 아래에 같은 이름(대소문자 무시)이 있는 곳(sameName) 차례로 본다
+ */
+export function mailboxMoveTargets(
+  list: readonly Mailbox[],
+  moving: Pick<Mailbox, 'id' | 'name' | 'parentId'>,
+): MailboxMoveTarget[] {
+  const blockOf = (parentId: string | null, inside: boolean): MailboxMoveBlock | null => {
+    if (inside) return 'self'
+    if (moving.parentId === parentId) return 'current'
+    const taken = list.some(
+      (mailbox) => mailbox.id !== moving.id && mailbox.parentId === parentId && sameMailboxName(mailbox.name, moving.name),
+    )
+    return taken ? 'sameName' : null
+  }
+  const targets: MailboxMoveTarget[] = [{ parentId: null, entry: null, group: 'top', block: blockOf(null, false) }]
+  for (const entry of mailboxTree(list)) {
+    // 그 메일함과 위 메일함이 모두 하위 메일함을 둘 수 있는 곳이어야 한다 (보낸편지함 아래의 메일함 등은 뺀다)
+    if (!canHoldChildMailbox(entry.mailbox) || !entry.ancestors.every(canHoldChildMailbox)) continue
+    const inside = entry.mailbox.id === moving.id || entry.ancestors.some((ancestor) => ancestor.id === moving.id)
+    targets.push({ parentId: entry.mailbox.id, entry, group: entry.group, block: blockOf(entry.mailbox.id, inside) })
+  }
+  return targets
+}
+
+/** 그 메일함 아래의 모든 하위 메일함 — 모든 깊이 (하위까지 지우기 확인 창의 "하위 메일함 2개" · 메일 수 — 15단계) */
+export function descendantMailboxes(list: readonly Mailbox[], id: string): Mailbox[] {
+  return mailboxTree(list)
+    .filter((entry) => entry.ancestors.some((ancestor) => ancestor.id === id))
+    .map((entry) => entry.mailbox)
+}
+
+/** 하위 메일함이 있는가 — 지우기 확인 창이 하위까지 지울지 묻는다 (15단계 — 서버는 withChildren=true 일 때만 지운다) */
 export function hasChildMailbox(list: readonly Mailbox[], id: string): boolean {
   return list.some((mailbox) => mailbox.parentId === id)
 }
@@ -100,18 +237,18 @@ export function isEmptiableMailbox(mailbox: Pick<Mailbox, 'role'>): boolean {
 }
 
 /** ⋯ 메뉴가 할 수 있는 일 */
-export type MailboxAction = 'markRead' | 'createChild' | 'rename' | 'delete' | 'empty'
+export type MailboxAction = 'markRead' | 'createChild' | 'rename' | 'move' | 'delete' | 'empty'
 
 /**
- * 메일함마다 ⋯ 메뉴의 항목 (디자인 README "4단계 › 메일함 관리"):
- * 모두 읽음으로 표시(안 읽은 메일이 있을 때) · 하위 메일함 만들기(받은편지함 · 내 메일함) · 이름 바꾸기 · 지우기(내 메일함만) ·
+ * 메일함마다 ⋯ 메뉴의 항목 (디자인 README "4단계 › 메일함 관리" · "15단계 › 메일함 옮기기"):
+ * 모두 읽음으로 표시(안 읽은 메일이 있을 때) · 하위 메일함 만들기(받은편지함 · 내 메일함) · 이름 바꾸기 · 옮기기 · 지우기(내 메일함만) ·
  * 휴지통 / 스팸메일함 비우기(그 메일함에서만 — 빈 메일함이면 뺀다). 할 일이 없으면 빈 목록 — ⋯ 단추를 그리지 않는다
  */
 export function mailboxActions(mailbox: Mailbox): MailboxAction[] {
   const actions: MailboxAction[] = []
   if (mailbox.unreadCount > 0) actions.push('markRead')
-  if (mailbox.role === 'inbox' || mailbox.role === null) actions.push('createChild')
-  if (mailbox.role === null) actions.push('rename', 'delete')
+  if (canHoldChildMailbox(mailbox)) actions.push('createChild')
+  if (mailbox.role === null) actions.push('rename', 'move', 'delete')
   if (isEmptiableMailbox(mailbox) && mailbox.totalCount > 0) actions.push('empty')
   return actions
 }
diff --git a/frontend/src/shared/utils/pending-send.spec.ts b/frontend/src/shared/utils/pending-send.spec.ts
index f4a73a6..64ae78d 100644
--- a/frontend/src/shared/utils/pending-send.spec.ts
+++ b/frontend/src/shared/utils/pending-send.spec.ts
@@ -9,6 +9,7 @@ import {
   pendingWatchesOf,
   samePendingSend,
   undoToastDeadline,
+  unsentReleaseState,
 } from './pending-send'
 
 // 엔진이 붙잡아 둔 내 발송 (계약 2절 "보내기 취소 · 예약 발송" — 9단계) — 순수 함수
@@ -88,3 +89,29 @@ describe('보낸 뒤 알림의 [보내기 취소] 마감 (리뷰 #11)', () => {
     expect(undoToastDeadline({ ...base, sendAt: at(20_000), undoSendSeconds: 0 })).toBe(NOW + 20_000)
   })
 })
+
+describe('지금 보내기가 결과를 모른 채 끝난 뒤 다시 받은 메일 (15단계 리뷰)', () => {
+  const scheduled = { kind: 'scheduled' as const, sendAt: at(3_600_000) }
+  const undo = { kind: 'undo' as const, sendAt: at(10_000) }
+
+  it('임시보관함에 있으면 되돌린 것 — 붙잡은 발송보다 먼저 본다', () => {
+    expect(unsentReleaseState({ mailboxIds: ['drafts'], pendingSend: null }, 'drafts')).toBe('reverted')
+    expect(unsentReleaseState({ mailboxIds: ['drafts'], pendingSend: scheduled }, 'drafts')).toBe('reverted')
+  })
+
+  it('보낸편지함 — 붙잡은 발송이 예약이면 그대로 · 보내기 취소를 기다리면 보낸 것 · 없으면 예약만 풀린 것', () => {
+    expect(unsentReleaseState({ mailboxIds: ['sent'], pendingSend: scheduled }, 'drafts')).toBe('scheduled')
+    expect(unsentReleaseState({ mailboxIds: ['sent'], pendingSend: undo }, 'drafts')).toBe('undo')
+    expect(unsentReleaseState({ mailboxIds: ['sent'], pendingSend: null }, 'drafts')).toBe('unscheduled')
+    // 모양이 틀린 붙잡은 발송은 없는 것으로 읽는다
+    expect(unsentReleaseState({ mailboxIds: ['sent'], pendingSend: { kind: 'later', sendAt: 'x' } as never }, 'drafts')).toBe(
+      'unscheduled',
+    )
+  })
+
+  it('다시 받지 못했으면 모른다 · 임시보관함을 모르면 붙잡은 발송이 없는 메일을 예약만 풀린 것으로', () => {
+    expect(unsentReleaseState(null, 'drafts')).toBe('unknown')
+    expect(unsentReleaseState({ mailboxIds: ['drafts'], pendingSend: null }, null)).toBe('unscheduled')
+    expect(unsentReleaseState({ mailboxIds: undefined as never, pendingSend: scheduled }, 'drafts')).toBe('scheduled')
+  })
+})
diff --git a/frontend/src/shared/utils/pending-send.ts b/frontend/src/shared/utils/pending-send.ts
index 39f3de2..380f5af 100644
--- a/frontend/src/shared/utils/pending-send.ts
+++ b/frontend/src/shared/utils/pending-send.ts
@@ -126,3 +126,32 @@ export function undoToastDeadline(input: UndoDeadlineInput): number {
   if (seconds !== null && seconds > 0) return input.now + seconds * 1000 - input.marginMs
   return Math.min(Date.parse(input.sendAt), input.now + input.maxMs)
 }
+
+// ── 지금 보내기가 결과를 모른 채 끝난 뒤 (15단계 — 계약 2절 "지금 보내기") ─────────────
+
+/**
+ * 지금 보내기가 503 MAIL_001 · 결과를 모르는 실패(SYS_001 — 앞단 502 · 504 · 시간 초과 · 연결 끊김)로 끝난 뒤 다시 받은 그 메일의 상태.
+ * - reverted: 임시보관함에 있다 — 엔진이 거절해 되돌렸다(보내지 않았다)
+ * - undo: 다시 낸 발송이 보내기 취소를 기다린다 — 보낸 것이다(같은 요청을 다시 보내도 서버가 이 상태로 200 을 준다)
+ * - scheduled: 예약이 그대로다 — 예약한 시각에 나간다
+ * - unscheduled: 예약은 풀렸고 기다리는 발송이 없다 — 예약한 시각에 따로 나가지는 않는다. 다시 낸 발송이 이미 나갔는지는 모른다
+ *   (보내기 취소 0초 · 응답만 잃음). 같은 요청을 다시 보내면 서버가 아직 보내지 않았을 때만 이어 낸다
+ * - unknown: 다시 받지 못했다
+ */
+export type UnsentReleaseState = 'reverted' | 'undo' | 'scheduled' | 'unscheduled' | 'unknown'
+
+/**
+ * 다시 받은 메일(없으면 null — 받지 못했다) → 상태. 임시보관함을 먼저 본다(되돌린 메일은 붙잡은 발송이 없다).
+ * 임시보관함 id 를 모르면 붙잡은 발송이 없는 메일을 unscheduled 로 둔다 — 되돌렸든 아니든 예약은 풀렸다
+ */
+export function unsentReleaseState(
+  fresh: Pick<MessageSummary, 'mailboxIds' | 'pendingSend'> | null,
+  draftsId: string | null,
+): UnsentReleaseState {
+  if (fresh === null) return 'unknown'
+  const mailboxIds: unknown = fresh.mailboxIds
+  if (draftsId !== null && Array.isArray(mailboxIds) && mailboxIds.includes(draftsId)) return 'reverted'
+  const pending = messagePendingSend(fresh)
+  if (pending === null) return 'unscheduled'
+  return pending.kind === 'undo' ? 'undo' : 'scheduled'
+}
diff --git a/frontend/src/shared/utils/popup-placement.spec.ts b/frontend/src/shared/utils/popup-placement.spec.ts
index a121308..a2478c1 100644
--- a/frontend/src/shared/utils/popup-placement.spec.ts
+++ b/frontend/src/shared/utils/popup-placement.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { opensUpward } from './popup-placement'
+import { opensUpward, popupAlignFor } from './popup-placement'
 
 // 메일함 패널의 ⋯ 메뉴 — 아래로 열면 잘릴 때 위로 연다
 
@@ -20,3 +20,42 @@ describe('opensUpward', () => {
     expect(opensUpward({ ...base, triggerTop: 220, triggerBottom: 260, areaTop: 0, areaBottom: 320 })).toBe(true)
   })
 })
+
+// 15단계 — 폭 360 의 읽기 화면 [이동 ▾](디자인 원본 Reader15 2-4): 단추 왼쪽 끝에 맞춘 메뉴가 화면 오른쪽 밖으로 넘치면 단추 오른쪽 끝에 맞춘다
+describe('popupAlignFor', () => {
+  /** 폭 360 화면 · 레일 72 뒤의 읽기 칸 — [이동 ▾](40) 이 x 240~280 */
+  const narrow = { triggerLeft: 240, triggerRight: 280, popupWidth: 200, areaLeft: 0, areaRight: 360 }
+
+  it('왼쪽 끝에 맞춰 다 들어가면 그대로', () => {
+    expect(popupAlignFor({ ...narrow, triggerLeft: 100, triggerRight: 140 }, 'start')).toBe('start')
+  })
+
+  it('왼쪽 끝에 맞추면 오른쪽 밖으로 넘치고 오른쪽 끝에 맞추면 들어가면 — 단추 오른쪽 끝에 맞춘다', () => {
+    expect(popupAlignFor(narrow, 'start')).toBe('end')
+  })
+
+  it('오른쪽 끝에 맞춘 메뉴(⋯)가 왼쪽 밖으로 넘치면 — 단추 왼쪽 끝에 맞춘다(⋯ 가 둘째 줄 맨 앞으로 내려간 폭 360)', () => {
+    expect(popupAlignFor({ ...narrow, triggerLeft: 94, triggerRight: 134 }, 'end')).toBe('start')
+    // 다 들어가면 바라는 끝 그대로
+    expect(popupAlignFor(narrow, 'end')).toBe('end')
+  })
+
+  it('양쪽 다 넘치면 덜 넘치는 쪽 — 똑같이 넘치면 바라는 끝', () => {
+    const wide = { triggerLeft: 120, triggerRight: 160, popupWidth: 300, areaLeft: 0, areaRight: 360 }
+    // 왼쪽 끝에 맞추면 오른쪽으로 60 · 오른쪽 끝에 맞추면 왼쪽으로 140 넘친다
+    expect(popupAlignFor(wide, 'start')).toBe('start')
+    expect(popupAlignFor(wide, 'end')).toBe('start')
+    const even = { triggerLeft: 130, triggerRight: 230, popupWidth: 400, areaLeft: 0, areaRight: 360 }
+    expect(popupAlignFor(even, 'start')).toBe('start')
+    expect(popupAlignFor(even, 'end')).toBe('end')
+  })
+
+  it('보이는 영역은 화면이 아니라 잘라 내는 칸일 수 있다 — 칸의 오른쪽 끝을 넘으면 넘친 것이다', () => {
+    expect(popupAlignFor({ ...narrow, triggerLeft: 500, triggerRight: 540, areaLeft: 300, areaRight: 680 }, 'start')).toBe(
+      'end',
+    )
+    expect(popupAlignFor({ ...narrow, triggerLeft: 400, triggerRight: 440, areaLeft: 300, areaRight: 680 }, 'start')).toBe(
+      'start',
+    )
+  })
+})
diff --git a/frontend/src/shared/utils/popup-placement.ts b/frontend/src/shared/utils/popup-placement.ts
index 3a23b28..c69ceee 100644
--- a/frontend/src/shared/utils/popup-placement.ts
+++ b/frontend/src/shared/utils/popup-placement.ts
@@ -1,5 +1,6 @@
-// 펼침 메뉴의 자리 — 아래로 열면 보이는 영역을 넘을 때 위로 연다 (메일함 패널처럼 스크롤되는 칸 안의 ⋯ 메뉴, 순수 함수만 둔다)
-// 보이는 영역(화면과 스크롤 · 잘림 조상이 겹치는 부분)을 재는 일은 부르는 쪽이 한다.
+// 펼침 메뉴의 자리 — 아래로 열면 보이는 영역을 넘을 때 위로 연다 (메일함 패널처럼 스크롤되는 칸 안의 ⋯ 메뉴),
+// 단추의 왼쪽 끝에 맞춰 열면 오른쪽 밖으로 넘칠 때 단추의 오른쪽 끝에 맞춘다 (15단계 — 좁은 폭의 읽기 화면 [이동 ▾], 순수 함수만 둔다)
+// 보이는 영역(화면과 스크롤 · 잘림 조상이 겹치는 부분)을 재는 일은 부르는 쪽이 한다 (composables/usePopupPlacement.ts).
 
 export interface PopupFitInput {
   /** 연 단추의 위 · 아래 (화면 좌표) */
@@ -20,3 +21,34 @@ export function opensUpward(input: PopupFitInput): boolean {
   const above = input.triggerTop - input.areaTop - input.gap
   return input.popupHeight > below && above > below
 }
+
+/** 메뉴를 단추의 어느 끝에 맞출지 — start: 메뉴 왼쪽 끝을 단추 왼쪽 끝에 · end: 메뉴 오른쪽 끝을 단추 오른쪽 끝에 */
+export type PopupAlign = 'start' | 'end'
+
+export interface PopupSideInput {
+  /** 연 단추의 왼쪽 · 오른쪽 (화면 좌표) */
+  triggerLeft: number
+  triggerRight: number
+  /** 메뉴 폭 */
+  popupWidth: number
+  /** 보이는 영역의 왼쪽 · 오른쪽 (화면 좌표) */
+  areaLeft: number
+  areaRight: number
+}
+
+/** 그 끝에 맞췄을 때 보이는 영역 밖으로 넘치는 폭 — start 는 오른쪽 밖, end 는 왼쪽 밖 */
+function overflowOf(input: PopupSideInput, align: PopupAlign): number {
+  if (align === 'start') return Math.max(0, input.triggerLeft + input.popupWidth - input.areaRight)
+  return Math.max(0, input.areaLeft - (input.triggerRight - input.popupWidth))
+}
+
+/**
+ * 메뉴를 맞출 끝 — 바라는 끝(preferred)에 맞춰 다 보이면 그대로, 넘치면 덜 넘치는 반대 끝으로
+ * (반대 끝에도 다 들지 않으면 덜 넘치는 쪽 — 위아래의 opensUpward 처럼 넓은 쪽으로. 똑같이 넘치면 바라는 끝)
+ */
+export function popupAlignFor(input: PopupSideInput, preferred: PopupAlign): PopupAlign {
+  const wanted = overflowOf(input, preferred)
+  if (wanted === 0) return preferred
+  const other: PopupAlign = preferred === 'start' ? 'end' : 'start'
+  return overflowOf(input, other) < wanted ? other : preferred
+}
diff --git a/frontend/src/stores/inbox-cleanup-run.ts b/frontend/src/stores/inbox-cleanup-run.ts
new file mode 100644
index 0000000..10faa67
--- /dev/null
+++ b/frontend/src/stores/inbox-cleanup-run.ts
@@ -0,0 +1,85 @@
+// 받은편지함 정리의 되풀이 — 이미 받은 메일에 필터 적용(7단계 — mail-filter-run.store)과 차단할 때 받은 메일 옮기기(15단계 — mail-block-run.store)가 함께 쓴다
+// (계약 2절 "이미 받은 메일에 적용" · "보낸 사람 차단" — 같은 규칙: 한 요청 25초 안 · cursor)
+// - 서버가 한 요청을 25초 안에 끝내고 cursor 를 돌려준다 — null 이 될 때까지 같은 일에 그 cursor 를 넣어 다시 보낸다.
+//   다시 보낼 때마다 onProgress (확인 = scanned 합, 전체 = 확인 + remaining). 이어 하기([다시 시도])는 앞 실패의 cursor · 수에서 시작한다
+// - 요청은 알림을 끄고 보낸다(send 가 silent) — 실패를 알릴지는 응답이 온 때의 세션으로 정한다: 세션이 바뀐 뒤 늦게 온 실패는 알리지 않는다.
+//   화면이 따로 알리는 거절(screenNotified — 다른 창 · PC 에서 하는 중 429 REQ_001)은 알리지 않고, 그 밖은 사전 문구로 알린다
+// - 한 번도 나아가지 못한 응답(확인 0 인데 cursor 가 있다)이 maxStalls 번 이어지면 멈추고 BIZ_001 — 같은 요청을 끝없이 보내지 않게 (서버는 그럴 때 503 을 준다)
+// - 세션이 바뀌면(sameSession 이 false) 다음 요청을 보내지 않고 멈춘다(canceled). 늦게 온 응답도 쓰지 않는다
+// "한 탭에서 한 번에 하나"는 부르는 스토어가 정한다(running) — 이 함수는 되풀이만 한다
+import { getErrorMessage, notifyApiError, toApiError, type ApiError } from '@/composables/useApi'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+
+/** 지금까지 — 확인한 수 · 할 일을 한 수 · 전체(확인 + 남은 수 — 어림. 첫 응답 전에는 받은편지함의 메일 수, 모르면 0) */
+export interface InboxCleanupTally {
+  scanned: number
+  matched: number
+  total: number
+}
+
+/** 한 요청의 응답 — POST /mail-filter-runs · /mail-block-runs 가 같은 꼴이다 */
+export interface InboxCleanupStep {
+  scanned: number
+  matched: number
+  remaining: number
+  /** null = 끝 */
+  cursor: string | null
+}
+
+export type InboxCleanupOutcome =
+  | ({ status: 'done' } & InboxCleanupTally)
+  /** 도중에 멈췄다 — cursor 는 이어 할 자리(마지막으로 받은 cursor — 처음 요청부터 실패했으면 시작한 cursor), 수는 거기까지 */
+  | ({ status: 'failed'; cursor: string | null; error: ApiError } & InboxCleanupTally)
+  /** 세션이 바뀌었다 — 아무것도 알리지 않는다 */
+  | { status: 'canceled' }
+
+export interface InboxCleanupLoop {
+  /** 시작할 자리와 수 — 처음부터(cursor null · 수 0) 또는 앞 실패의 자리 */
+  start: InboxCleanupTally & { cursor: string | null }
+  /** 한 요청을 보낸다 — 알림을 끄고(silent) */
+  send: (cursor: string | null) => Promise<InboxCleanupStep>
+  onProgress: (tally: InboxCleanupTally) => void
+  /** 시작한 세션이 그대로인가 (authStore.generation) */
+  sameSession: () => boolean
+  /** 화면이 따로 알리는 거절 — 그 밖의 실패는 여기서 사전 문구로 알린다 */
+  screenNotified: readonly ErrorCode[]
+  /** 나아가지 못한 응답이 이만큼 이어지면 멈춘다 */
+  maxStalls: number
+}
+
+const CANCELED = { status: 'canceled' } as const
+
+/** 서버가 준 수 — 음수는 0 으로 */
+function countOf(value: number): number {
+  return Math.max(0, value)
+}
+
+/** 끝날 때까지(cursor 가 null) 보낸다 — 세션이 바뀌면 멈춘다 */
+export async function runInboxCleanup(loop: InboxCleanupLoop): Promise<InboxCleanupOutcome> {
+  let { cursor, scanned, matched, total } = loop.start
+  let stalls = 0
+  for (;;) {
+    let step: InboxCleanupStep
+    try {
+      step = await loop.send(cursor)
+    } catch (caught) {
+      if (!loop.sameSession()) return CANCELED
+      const error = toApiError(caught)
+      if (!loop.screenNotified.includes(error.code)) notifyApiError(error)
+      return { status: 'failed', cursor, scanned, matched, total, error }
+    }
+    if (!loop.sameSession()) return CANCELED
+    const stepScanned = countOf(step.scanned)
+    scanned += stepScanned
+    matched += countOf(step.matched)
+    total = scanned + countOf(step.remaining)
+    if (step.cursor === null) return { status: 'done', scanned, matched, total }
+    cursor = step.cursor
+    stalls = stepScanned > 0 ? 0 : stalls + 1
+    if (stalls >= loop.maxStalls) {
+      const error: ApiError = { code: 'BIZ_001', message: getErrorMessage('BIZ_001') }
+      return { status: 'failed', cursor, scanned, matched, total, error }
+    }
+    loop.onProgress({ scanned, matched, total })
+  }
+}
diff --git a/frontend/src/stores/mail-block-run.store.spec.ts b/frontend/src/stores/mail-block-run.store.spec.ts
new file mode 100644
index 0000000..1b28128
--- /dev/null
+++ b/frontend/src/stores/mail-block-run.store.spec.ts
@@ -0,0 +1,177 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
+
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { Mailbox, MailBlockRun, MailBlockRunRequest } from '@/shared/types/mail'
+import { useAuthStore } from '@/stores/auth.store'
+import type { InboxCleanupTally } from '@/stores/inbox-cleanup-run'
+import { useMailFilterRunStore } from '@/stores/mail-filter-run.store'
+import { useMailStore } from '@/stores/mail.store'
+import { useToastStore } from '@/stores/toast.store'
+import {
+  fail,
+  flushPromises,
+  installMockApi,
+  ok,
+  restoreApiAdapter,
+  type MockRequest,
+  type MockResult,
+} from '@/test-utils/mock-api'
+import { useMailBlockRunStore, type MailBlockRunStart } from './mail-block-run.store'
+
+// 차단할 때 받은 메일 옮기기 — cursor 가 null 이 될 때까지 · 수를 이어 센다 · 이 탭의 받은편지함 정리는 한 번에 하나 · 세션이 바뀌면 멈춘다
+// (계약 2절 "보낸 사람 차단" — 15단계 POST /mail-block-runs)
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const FROM_START: MailBlockRunStart = { sender: 'news@example.com', cursor: null, scanned: 0, matched: 0, total: 4800 }
+const JUNK: Mailbox = { id: 'junk', name: '스팸메일함', role: 'junk', parentId: null, sortOrder: 0, totalCount: 40, unreadCount: 0 }
+
+function step(scanned: number, matched: number, remaining: number, cursor: string | null): MockResult {
+  const run: MailBlockRun = { scanned, matched, remaining, cursor }
+  return ok(run)
+}
+
+function deferred() {
+  let finish: (result: MockResult) => void = () => undefined
+  const promise = new Promise<MockResult>((resolve) => {
+    finish = resolve
+  })
+  return { promise, finish }
+}
+
+describe('mail-block-run.store', () => {
+  let requests: MockRequest[]
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useAuthStore().startSession(USER)
+  })
+
+  afterEach(() => {
+    useToastStore().clear()
+    restoreApiAdapter()
+  })
+
+  function replies(...results: (MockResult | Promise<MockResult>)[]) {
+    let next = 0
+    requests = installMockApi(() => {
+      const result = results[Math.min(next, results.length - 1)] as MockResult | Promise<MockResult>
+      next += 1
+      return result
+    })
+  }
+
+  const bodies = () => requests.map((request) => request.data as MailBlockRunRequest)
+  const toasts = () => useToastStore().toasts.map((toast) => toast.message)
+
+  it('cursor 가 null 이 될 때까지 같은 sender 에 cursor 를 넣어 다시 보내고, 확인 · 옮긴 수를 이어 센다 — 요청은 알림을 끄고 보낸다', async () => {
+    replies(step(1200, 10, 3600, 'b1'), step(3600, 27, 0, null))
+    const store = useMailBlockRunStore()
+    const progress: InboxCleanupTally[] = []
+
+    const running = store.run(FROM_START, (tally) => progress.push(tally))
+    expect(store.running).toBe(true)
+    expect(store.inboxBusy).toBe(true)
+    const outcome = await running
+
+    expect(outcome).toEqual({ status: 'done', scanned: 4800, matched: 37, total: 4800 })
+    expect(bodies()).toEqual([
+      { sender: 'news@example.com', cursor: null },
+      { sender: 'news@example.com', cursor: 'b1' },
+    ])
+    expect(requests.every((request) => request.config.silent === true)).toBe(true)
+    expect(progress).toEqual([{ scanned: 1200, matched: 10, total: 4800 }])
+    expect(store.running).toBe(false)
+  })
+
+  it('이 탭에서 받은편지함을 정리하는 중이면(필터 적용 · 다른 차단 정리) 보내지 않는다 — busy', async () => {
+    const first = deferred()
+    replies(first.promise, step(10, 0, 0, null))
+    const store = useMailBlockRunStore()
+
+    const running = store.run(FROM_START, () => undefined)
+    expect((await store.run(FROM_START, () => undefined)).status).toBe('busy')
+    first.finish(step(10, 0, 0, null))
+    await running
+
+    // 필터 적용이 도는 동안도 — 같은 직원의 받은편지함 정리는 한 번에 하나
+    useMailFilterRunStore().running = true
+    expect(store.inboxBusy).toBe(true)
+    expect((await store.run(FROM_START, () => undefined)).status).toBe('busy')
+    expect(requests).toHaveLength(1)
+  })
+
+  it('이 탭에서 스팸메일함을 비우는 동안은 보내지 않는다(startBlock junk) — 필터 적용은 막지 않는다(inboxBusy 는 그대로), 끝나면 다시 시작할 수 있다', async () => {
+    const emptying = deferred()
+    requests = installMockApi((request) =>
+      request.method === 'DELETE' && request.url === '/mailboxes/junk/messages' ? emptying.promise : step(10, 0, 0, null),
+    )
+    const mail = useMailStore()
+    mail.mailboxes = [JUNK]
+    const store = useMailBlockRunStore()
+    expect(store.startBlock).toBeNull()
+
+    const empty = mail.runMailboxOperation('empty', JUNK, () => undefined)
+    expect(store.startBlock).toBe('junk')
+    expect(store.inboxBusy).toBe(false)
+    expect((await store.run(FROM_START, () => undefined)).status).toBe('busy')
+    expect(requests.filter((request) => request.url === '/mail-block-runs')).toEqual([])
+
+    emptying.finish(ok({ processed: 40, remaining: 0 }))
+    expect((await empty).status).toBe('done')
+    expect(store.startBlock).toBeNull()
+    expect((await store.run(FROM_START, () => undefined)).status).toBe('done')
+    expect(requests.filter((request) => request.url === '/mail-block-runs')).toHaveLength(1)
+  })
+
+  it('받은편지함 정리가 먼저 보인다 — 필터 적용 중이면 스팸메일함을 비우는 중이어도 inbox', async () => {
+    const emptying = deferred()
+    requests = installMockApi(() => emptying.promise)
+    const mail = useMailStore()
+    mail.mailboxes = [JUNK]
+    const store = useMailBlockRunStore()
+
+    const empty = mail.runMailboxOperation('empty', JUNK, () => undefined)
+    useMailFilterRunStore().running = true
+    expect(store.startBlock).toBe('inbox')
+    useMailFilterRunStore().running = false
+    expect(store.startBlock).toBe('junk')
+
+    emptying.finish(ok({ processed: 40, remaining: 0 }))
+    await empty
+  })
+
+  it('도중에 실패하면 거기까지의 수와 이어 할 자리를 돌려준다 — 까닭은 사전 문구로, 429 REQ_001 은 알리지 않는다(화면이 "다른 창에서 …")', async () => {
+    replies(step(1200, 12, 3600, 'b1'), fail(503, 'MAIL_001'))
+    const stopped = await useMailBlockRunStore().run(FROM_START, () => undefined)
+
+    expect(stopped).toMatchObject({ status: 'failed', cursor: 'b1', scanned: 1200, matched: 12, total: 4800 })
+    expect(toasts()).toEqual([ERROR_CODE_MESSAGES.MAIL_001])
+
+    useToastStore().clear()
+    replies(fail(429, 'REQ_001'))
+    const busyElsewhere = await useMailBlockRunStore().run(FROM_START, () => undefined)
+    expect(busyElsewhere).toMatchObject({ status: 'failed', cursor: null, error: { code: 'REQ_001' } })
+    expect(toasts()).toEqual([])
+  })
+
+  it('세션이 바뀌면 다음 요청을 보내지 않는다 — 늦게 온 응답도 쓰지 않고, 새 세션은 바로 시작할 수 있다', async () => {
+    const first = deferred()
+    replies(first.promise, step(10, 0, 0, null))
+    const store = useMailBlockRunStore()
+
+    const running = store.run(FROM_START, () => undefined)
+    useAuthStore().clearAuth()
+    await nextTick()
+    expect(store.running).toBe(false)
+    useAuthStore().startSession(USER)
+    await nextTick()
+    first.finish(step(1200, 12, 3600, 'b1'))
+
+    expect(await running).toEqual({ status: 'canceled' })
+    expect(requests).toHaveLength(1)
+    await flushPromises()
+    expect(store.running).toBe(false)
+  })
+})
diff --git a/frontend/src/stores/mail-block-run.store.ts b/frontend/src/stores/mail-block-run.store.ts
new file mode 100644
index 0000000..1e99fc5
--- /dev/null
+++ b/frontend/src/stores/mail-block-run.store.ts
@@ -0,0 +1,96 @@
+import { computed, ref, watch } from 'vue'
+import { defineStore } from 'pinia'
+
+import { useMail } from '@/composables/useMail'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import { MAIL_BLOCK_RUN_MAX_STALLS } from '@/shared/constants/mail-block'
+import { useAuthStore } from '@/stores/auth.store'
+import { runInboxCleanup, type InboxCleanupOutcome, type InboxCleanupTally } from '@/stores/inbox-cleanup-run'
+import { useMailFilterRunStore } from '@/stores/mail-filter-run.store'
+import { useMailStore } from '@/stores/mail.store'
+
+// 차단할 때 받은편지함에 이미 있는 그 보낸 사람(도메인)의 메일을 스팸메일함으로 — 계약 2절 "보낸 사람 차단" (15단계 — POST /api/mail-block-runs)
+// - 필터 적용(7단계 — mail-filter-run.store)과 같은 결이다: 서버가 한 요청을 25초 안에 끝내고 cursor 를 돌려준다 — null 이 될 때까지
+//   같은 sender 에 그 cursor 를 넣어 다시 보낸다(되풀이는 inbox-cleanup-run.ts). 이어 하기([다시 시도])는 앞 실패의 cursor · 수에서 시작한다
+// - 같은 직원의 받은편지함 정리(필터 적용 · 이것)는 한 번에 하나다 — 다른 탭 · PC 에서 하는 중이면 서버가 429 REQ_001(화면이 "다른 창에서 …"로 알린다),
+//   이 탭에서 필터 적용이나 다른 차단 정리가 도는 동안은 시작하지 않는다(inboxBusy — 차단 창의 새 칸을 끈다)
+// - 이 탭에서 스팸메일함을 비우는 동안도 시작하지 않는다(15단계 리뷰 — 옮겨 넣은 메일이 들어오자마자 영구 삭제되지 않게, 반대 방향은
+//   mailbox-admin 의 isOperationBlocked). 서버도 요청마다 스팸메일함 처리 잠금을 함께 잡는다(다른 창에서 비우는 중이면 429 — 위와 같은 알림).
+//   필터 적용은 스팸메일함에 넣지 않으므로 막지 않는다 — inboxBusy 는 그대로이고 차단 정리만 startBlock 을 본다
+// - 그 밖의 실패 까닭은 사전 문구로 알린다 — 요청은 알림을 끄고 보내고, 응답이 온 때 세션이 그대로일 때만 알린다
+// - 세션이 바뀌면(로그아웃 · 세션 만료 · 다른 계정 — authStore.generation) 다음 요청을 보내지 않고 멈춘다(canceled)
+// - 화면과 상관없이 앱이 떠 있는 동안 이어 한다(다른 화면으로 가도 된다). 탭을 닫으면 멈춘다 — 이어 하지 않는다
+
+/** 처음부터(cursor null · 수 0 · 전체는 받은편지함의 메일 수) 또는 앞 실패의 자리에서 */
+export interface MailBlockRunStart extends InboxCleanupTally {
+  /** 차단 목록의 값 그대로 — 소문자 주소 또는 "@도메인" */
+  sender: string
+  cursor: string | null
+}
+
+export type MailBlockRunOutcome =
+  | InboxCleanupOutcome
+  /** 이 탭에서 받은편지함을 정리하거나(필터 적용 · 다른 차단 정리) 스팸메일함을 비우는 중이다 — 보내지 않았다 */
+  | { status: 'busy' }
+
+/** 차단 정리를 지금 시작할 수 없는 까닭 — 이 탭에서 받은편지함을 정리하는 중(inbox) · 스팸메일함을 비우는 중(junk) */
+export type MailBlockRunBlock = 'inbox' | 'junk'
+
+/** 화면이 알리는 거절 — 같은 직원의 받은편지함 정리나 스팸메일함 비우기가 다른 곳에서 진행 중 */
+const SCREEN_NOTIFIED: readonly ErrorCode[] = ['REQ_001']
+
+export const useMailBlockRunStore = defineStore('mail-block-run', () => {
+  const mailApi = useMail()
+  const authStore = useAuthStore()
+  const filterRunStore = useMailFilterRunStore()
+  // 메일 스토어도 셋업에서 이 스토어를 부른다 — 서로 셋업에서는 읽지 않고 계산할 때만 읽는다 (Pinia 의 서로 쓰는 스토어)
+  const mailStore = useMailStore()
+
+  /** 이 탭에서 차단 정리를 하는 중 — 한 번에 하나 */
+  const running = ref<boolean>(false)
+  /** 이 탭에서 받은편지함을 정리하는 중 — 필터 적용 · 차단 정리 (같은 직원은 한 번에 하나 — 차단 창의 새 칸을 끈다) */
+  const inboxBusy = computed<boolean>(() => running.value || filterRunStore.running)
+  /** 이 탭에서 스팸메일함을 비우는 중 (mailbox-admin — 15단계 리뷰) — 차단 정리만 막는다 */
+  const junkEmptying = computed<boolean>(() => {
+    const junk = mailStore.mailboxByRole('junk')
+    return junk !== null && mailStore.isMailboxOperationRunning('empty', junk.id)
+  })
+  /** 차단 정리를 지금 시작할 수 없는 까닭 — 없으면 null (차단 창의 새 칸 · 시작 · [다시 시도]가 함께 본다) */
+  const startBlock = computed<MailBlockRunBlock | null>(() => {
+    if (inboxBusy.value) return 'inbox'
+    return junkEmptying.value ? 'junk' : null
+  })
+
+  /** 끝날 때까지(cursor 가 null) 보낸다 — 세션이 바뀌면 멈춘다 */
+  async function run(
+    start: MailBlockRunStart,
+    onProgress: (tally: InboxCleanupTally) => void,
+  ): Promise<MailBlockRunOutcome> {
+    if (startBlock.value !== null) return { status: 'busy' }
+    const session = authStore.generation
+    running.value = true
+    try {
+      return await runInboxCleanup({
+        start,
+        send: (cursor) => mailApi.runSenderBlock({ sender: start.sender, cursor }, { silent: true }),
+        onProgress,
+        sameSession: () => authStore.generation === session,
+        screenNotified: SCREEN_NOTIFIED,
+        maxStalls: MAIL_BLOCK_RUN_MAX_STALLS,
+      })
+    } finally {
+      // 세션이 바뀐 뒤 끝난 옛 정리는 새 세션의 표시를 건드리지 않는다 (아래 watch 가 이미 내렸다)
+      if (authStore.generation === session) running.value = false
+    }
+  }
+
+  // 로그아웃 · 세션 만료 · 다른 계정 로그인 — 하던 정리는 다음 요청을 보내지 않는다(run 이 멈춘다). 새 세션은 바로 시작할 수 있다
+  watch(
+    () => authStore.generation,
+    () => {
+      running.value = false
+    },
+  )
+
+  return { running, inboxBusy, startBlock, run }
+})
diff --git a/frontend/src/stores/mail-filter-run.store.ts b/frontend/src/stores/mail-filter-run.store.ts
index 1b174a7..ab36d6a 100644
--- a/frontend/src/stores/mail-filter-run.store.ts
+++ b/frontend/src/stores/mail-filter-run.store.ts
@@ -1,23 +1,25 @@
 import { ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 
-import { getErrorMessage, notifyApiError, toApiError, type ApiError } from '@/composables/useApi'
 import { useMail } from '@/composables/useMail'
 import type { ErrorCode } from '@/shared/constants/error-codes.generated'
 import { MAIL_FILTER_RUN_MAX_STALLS } from '@/shared/constants/mail-filter'
-import type { MailFilterRun, MailFilterRunRule } from '@/shared/types/mail'
+import type { MailFilterRunRule } from '@/shared/types/mail'
 import type { MailFilterRunTally } from '@/shared/utils/mail-filter-run'
 import { useAuthStore } from '@/stores/auth.store'
+import { runInboxCleanup, type InboxCleanupOutcome } from '@/stores/inbox-cleanup-run'
 
 // 이미 받은 메일에 필터 적용 — 계약 2절 "이미 받은 메일에 적용 (/api/mail-filter-runs)" (7단계)
 // - 서버가 한 요청을 25초 안에 끝내고 cursor 를 돌려준다 — null 이 될 때까지 같은 규칙에 그 cursor 를 넣어 다시 보낸다.
 //   다시 보낼 때마다 onProgress (확인 = scanned 합, 전체 = 확인 + remaining). 이어 하기([다시 시도])는 앞 실패의 cursor · 수에서 시작한다
+//   (되풀이는 차단 정리와 함께 쓰는 inbox-cleanup-run.ts — 15단계에서 나눴다)
 // - 한 탭에서 한 번에 하나(running — 고치기 창이 그동안 「…에도 적용」 칸을 끈다). 다른 탭 · PC 의 적용은 서버가 429 REQ_001 로 막는다 —
-//   그 알림은 화면이 "다른 창에서 …"로 한다. 그 밖의 실패 까닭은 여기서 사전 문구로 알린다(4단계 오래 걸리는 처리의 인터셉터 알림과 같은 알림 —
+//   그 알림은 화면이 "다른 창에서 …"로 한다. 그 밖의 실패 까닭은 사전 문구로 알린다(4단계 오래 걸리는 처리의 인터셉터 알림과 같은 알림 —
 //   요청은 알림을 끄고 보내고, 응답이 온 때 세션이 그대로일 때만 알린다: 세션이 바뀐 뒤 늦게 온 실패는 알리지 않는다)
 // - 한 번도 나아가지 못한 응답(확인 0 인데 cursor 가 있다)이 이어지면 멈추고 BIZ_001 — 같은 요청을 끝없이 보내지 않게 (서버는 그럴 때 503 을 준다)
 // - 세션이 바뀌면(로그아웃 · 세션 만료 · 다른 계정 — authStore.generation) 다음 요청을 보내지 않고 멈춘다(canceled). 늦게 온 응답도 쓰지 않는다
 // - 화면과 상관없이 앱이 떠 있는 동안 이어 한다(다른 화면으로 가도 된다). 탭을 닫으면 멈춘다 — 이어 하지 않는다
+// - 차단할 때 받은 메일 옮기기(15단계 — mail-block-run.store)는 이 탭에서 이것이 도는 동안 시작하지 않는다(차단 창의 새 칸을 끈다)
 
 /** 처음부터(cursor null · 수 0 · 전체는 받은편지함의 메일 수) 또는 앞 실패의 자리에서 */
 export interface MailFilterRunStart extends MailFilterRunTally {
@@ -26,22 +28,12 @@ export interface MailFilterRunStart extends MailFilterRunTally {
 }
 
 export type MailFilterRunOutcome =
-  | ({ status: 'done' } & MailFilterRunTally)
-  /** 도중에 멈췄다 — cursor 는 이어 할 자리(마지막으로 받은 cursor — 처음 요청부터 실패했으면 null), 수는 거기까지 */
-  | ({ status: 'failed'; cursor: string | null; error: ApiError } & MailFilterRunTally)
+  | InboxCleanupOutcome
   /** 이 탭에서 다른 적용이 돌고 있다 — 보내지 않았다 */
   | { status: 'busy' }
-  /** 세션이 바뀌었다 — 아무것도 알리지 않는다 */
-  | { status: 'canceled' }
 
 /** 화면이 알리는 거절 — 같은 직원의 적용이 다른 곳에서 진행 중 (그 밖의 실패는 여기서 알린다) */
 const SCREEN_NOTIFIED: readonly ErrorCode[] = ['REQ_001']
-const CANCELED = { status: 'canceled' } as const
-
-/** 서버가 준 수 — 음수는 0 으로 */
-function countOf(value: number): number {
-  return Math.max(0, value)
-}
 
 export const useMailFilterRunStore = defineStore('mail-filter-run', () => {
   const mailApi = useMail()
@@ -58,34 +50,16 @@ export const useMailFilterRunStore = defineStore('mail-filter-run', () => {
     if (running.value) return { status: 'busy' }
     const session = authStore.generation
     running.value = true
-    let { cursor, scanned, matched, total } = start
-    let stalls = 0
     try {
-      for (;;) {
-        let step: MailFilterRun
-        try {
-          // 알림을 끄고 보낸다 — 실패를 알릴지는 응답이 온 때의 세션으로 정한다 (세션 만료 대화상자는 그대로 뜬다)
-          step = await mailApi.runFilter({ ...start.rule, cursor }, { silent: true })
-        } catch (caught) {
-          if (authStore.generation !== session) return CANCELED
-          const error = toApiError(caught)
-          if (!SCREEN_NOTIFIED.includes(error.code)) notifyApiError(error)
-          return { status: 'failed', cursor, scanned, matched, total, error }
-        }
-        if (authStore.generation !== session) return CANCELED
-        const stepScanned = countOf(step.scanned)
-        scanned += stepScanned
-        matched += countOf(step.matched)
-        total = scanned + countOf(step.remaining)
-        if (step.cursor === null) return { status: 'done', scanned, matched, total }
-        cursor = step.cursor
-        stalls = stepScanned > 0 ? 0 : stalls + 1
-        if (stalls >= MAIL_FILTER_RUN_MAX_STALLS) {
-          const error: ApiError = { code: 'BIZ_001', message: getErrorMessage('BIZ_001') }
-          return { status: 'failed', cursor, scanned, matched, total, error }
-        }
-        onProgress({ scanned, matched, total })
-      }
+      return await runInboxCleanup({
+        start,
+        // 알림을 끄고 보낸다 — 실패를 알릴지는 응답이 온 때의 세션으로 정한다 (세션 만료 대화상자는 그대로 뜬다)
+        send: (cursor) => mailApi.runFilter({ ...start.rule, cursor }, { silent: true }),
+        onProgress,
+        sameSession: () => authStore.generation === session,
+        screenNotified: SCREEN_NOTIFIED,
+        maxStalls: MAIL_FILTER_RUN_MAX_STALLS,
+      })
     } finally {
       // 세션이 바뀐 뒤 끝난 옛 적용은 새 세션의 표시를 건드리지 않는다 (아래 watch 가 이미 내렸다)
       if (authStore.generation === session) running.value = false
diff --git a/frontend/src/stores/mail.store.ts b/frontend/src/stores/mail.store.ts
index 5cd3919..c044a9a 100644
--- a/frontend/src/stores/mail.store.ts
+++ b/frontend/src/stores/mail.store.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 
 import { useMail } from '@/composables/useMail'
 import { useAuthStore } from '@/stores/auth.store'
+import { useMailBlockRunStore } from '@/stores/mail-block-run.store'
 import { createBulkActions } from './mail/bulk'
 import { createConversationState } from './mail/conversation'
 import { createListState } from './mail/list'
@@ -14,15 +15,16 @@ import { createSelection } from './mail/selection'
 
 export type { BulkResult } from '@/shared/utils/mail-bulk'
 export type { BulkMoveResult, FlagChanges, LoadStatus, MailBulkResult, MoveOptions, SearchOrigin } from './mail/types'
-export type { MailboxOperationOutcome, MailboxOperationProgress } from './mail/mailbox-admin'
+export type { MailboxOperationOptions, MailboxOperationOutcome, MailboxOperationProgress } from './mail/mailbox-admin'
 export type { ConversationDetailState } from './mail/conversation'
+export type { ReleaseOutcome } from './mail/scheduled'
 
 // 메일 도메인 스토어 — 메일함 · 사용량 · 보이는 목록(메일함 · 대화로 묶은 메일함 · 검색 결과 · 예약됨) · 고른 메일 · 열린 메일
 // 한 스토어를 기능별 모듈(stores/mail/*)로 나눠 조립한다 — 화면은 이 스토어 하나만 본다.
 //   mailboxes.ts 메일함 · 사용량 | list.ts 보이는 목록 · 이 탭이 바꾼 것 | selection.ts 고른 메일
 //   message.ts 열린 메일 · 읽음 · 중요 표시 · 외부 이미지 보기 | bulk.ts 여러 통 처리 (읽기 화면의 한 통 삭제 · 스팸 신고 포함)
-//   mailbox-admin.ts 메일함 만들기 · 이름 바꾸기 · 오래 걸리는 처리(모두 읽음 · 비우기 · 메일함 지우기)
-//   scheduled.ts 예약됨 개수 · 붙잡은 발송 취소(보내기 취소 · 예약 취소 — 9단계) · 엔진이 풀었는지 다시 보기
+//   mailbox-admin.ts 메일함 만들기 · 이름 바꾸기 · 옮기기(15단계) · 오래 걸리는 처리(모두 읽음 · 비우기 · 메일함 지우기 — 하위까지 지우기 포함)
+//   scheduled.ts 예약됨 개수 · 붙잡은 발송 취소(보내기 취소 · 예약 취소 — 9단계) · 지금 보내기(15단계) · 엔진이 풀었는지 다시 보기
 //   conversation.ts 읽기 화면의 같은 대화 · 펼친 줄의 본문 (14단계)
 //
 // 오류 처리 원칙:
@@ -43,7 +45,14 @@ export const useMailStore = defineStore('mail', () => {
   const selection = createSelection(list)
   const message = createMessageActions({ mailApi, mailboxes: mailboxState, list, opened })
   const bulk = createBulkActions({ mailApi, mailboxes: mailboxState, list, selection, opened })
-  const admin = createMailboxAdmin({ mailApi, mailboxes: mailboxState, list })
+  // 차단할 때 받은 메일을 옮기는 동안(15단계)은 스팸메일함 비우기를 시작하지 않는다 (mailbox-admin.ts 의 isOperationBlocked)
+  const blockRunStore = useMailBlockRunStore()
+  const admin = createMailboxAdmin({
+    mailApi,
+    mailboxes: mailboxState,
+    list,
+    blockCleanupRunning: () => blockRunStore.running,
+  })
   const scheduled = createScheduledState({
     mailApi,
     mailboxes: mailboxState,
@@ -227,6 +236,9 @@ export const useMailStore = defineStore('mail', () => {
     loadScheduledCount: scheduled.loadScheduledCount,
     cancelPendingSend: scheduled.cancelPendingSend,
     isCancellingPendingSend: scheduled.isCancellingPendingSend,
+    // 예약 메일 지금 보내기 (15단계)
+    releasePendingSend: scheduled.releasePendingSend,
+    isReleasingPendingSend: scheduled.isReleasingPendingSend,
     refreshPendingSends,
     // 같은 대화 (14단계)
     conversationMessageId: conversation.conversationMessageId,
@@ -250,6 +262,12 @@ export const useMailStore = defineStore('mail', () => {
     loadMoreConversation: conversation.loadMoreConversation,
     toggleConversationMessage: conversation.toggleConversationMessage,
     retryConversationDetail: conversation.retryConversationDetail,
+    // 같은 대화 [모두 펼치기] · [모두 접기] (15단계)
+    conversationExpandableIds: conversation.conversationExpandableIds,
+    conversationAllExpanded: conversation.conversationAllExpanded,
+    expandAllConversation: conversation.expandAllConversation,
+    collapseAllConversation: conversation.collapseAllConversation,
+    noteConversationPanelVisible: conversation.noteConversationPanelVisible,
     // 여러 통 처리 · 한 통 삭제
     patchChecked: bulk.patchChecked,
     toggleConversationFlag: bulk.toggleConversationFlag,
@@ -264,6 +282,8 @@ export const useMailStore = defineStore('mail', () => {
     isMailboxOperationBlocked: admin.isOperationBlocked,
     createMailbox: admin.createMailbox,
     renameMailbox: admin.renameMailbox,
+    // 메일함 옮기기 · 하위까지 지우기 (15단계 — runMailboxOperation 의 withChildren)
+    moveMailbox: admin.moveMailbox,
     runMailboxOperation: admin.runMailboxOperation,
     // 쓰기 화면
     lastBrowseLocation,
diff --git a/frontend/src/stores/mail/conversation.ts b/frontend/src/stores/mail/conversation.ts
index 16409c1..1090d1e 100644
--- a/frontend/src/stores/mail/conversation.ts
+++ b/frontend/src/stores/mail/conversation.ts
@@ -16,6 +16,11 @@
 //   같은 길(markRead — 목록 · 메일함 개수도 맞춘다)로 읽음. 이 탭이 아는 값(열린 메일 · 보이는 목록 · 이 칸이 읽음으로 바꾼 것)을 먼저 본다 —
 //   받아 둔 대화가 옛 값이어도 같은 메일을 두 번 읽음으로 바꾸지 않게. 받아 둔 본문은 접힌 줄의 것을 최근 MAIL_CONVERSATION_DETAIL_CACHE_MAX 개만 둔다.
 //   그사이 지워진 메일(본문이 404 RES_001)은 대화를 다시 받아 그 줄을 뺀다([더 보기]로 더 받은 대화는 그 줄만 뺀다)
+// 모두 펼치기 · 모두 접기 (15단계 — 디자인 원본 Reader15 "6. 같은 대화"): 모두 펼치기는 불러온 줄(지금 메일 빼고)을 모두 펼치되 본문은 바로 받지 않는다 —
+//   칸이 알려 주는 대로(noteConversationPanelVisible — 펼친 안이 화면에 들어옴 · 나감) 화면에 들어온 줄부터 하나씩(detailQueue) 받는다.
+//   100통을 한꺼번에 부르지 않는다 — 요청 수 한도(경로 · IP 마다 1분 100회, 사무실은 함께 센다)와 화면 무게. 차례가 오기 전에 화면 밖으로 나간 줄은 건너뛴다.
+//   읽음은 지금 규칙 그대로 — 본문이 화면에 보인 메일만 읽음이 된다(펼쳤어도 화면 밖이면 그대로: 받았을 때 화면 밖이었으면 들어올 때 읽음).
+//   [더 보기]로 더 받은 줄은 접힌 채로 온다. 모두 접기는 펼친 줄을 모두 접는다(받아 둔 본문은 접힌 줄의 상한까지만 둔다)
 // 이 탭이 바꾼 읽음 (2026-11-07 — 칸이 안 읽은 줄을 굵게 그린다): 목록 · 열린 메일에 읽음을 적을 때마다(list.ts 의 watchLocalReads — 펼친 줄 · 읽기 화면에서
 //   연 메일 · 목록과 여러 통 처리의 읽음 · 안 읽음 표시 · 실패해 되돌림 · 서버가 돌려준 요약 · 메일함 ⋯ › 모두 읽음) 칸의 줄에도 바로 적는다.
 //   받는 동안 바꾼 것 · 받기를 시작할 때 보내던 것은 받은 값보다 이 탭의 값을 믿는다 — 받은 쪽은 그 바꿈이 서버에 닿기 전의 값일 수 있다.
@@ -132,6 +137,15 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
   )
   /** 대화를 묻는 중 — 끝나면 칸이 다시 받기의 간격을 그때부터 센다 (실제로 물었을 때만 켜진다) */
   const conversationBusy = computed<boolean>(() => conversationInFlight.value > 0)
+  /** 펼칠 수 있는 줄 — 불러온 줄에서 지금 메일을 뺀 것 (15단계 — [모두 펼치기]는 이것이 있을 때만) */
+  const conversationExpandableIds = computed<string[]>(() =>
+    conversationItems.value.map((item) => item.id).filter((id) => id !== conversationMessageId.value),
+  )
+  /** 펼칠 수 있는 줄이 모두 펼쳐져 있다 — 단추가 [모두 접기]가 된다(하나씩 다 펼쳐도) */
+  const conversationAllExpanded = computed<boolean>(() => {
+    const ids = conversationExpandableIds.value
+    return ids.length > 0 && ids.every((id) => conversationExpandedIds.value.has(id))
+  })
 
   let runSeq = 0
   let conversationSeq = 0
@@ -147,6 +161,15 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
    */
   const localReads = new Map<string, LocalRead>()
   let localReadSeq = 0
+  /**
+   * 모두 펼치기 (머리말 — 15단계) — 화면에 그리지 않으므로 반응형이 아니다.
+   * lazyRows: 모두 펼치기로 펼쳤고 아직 읽음을 보지 않은 줄(본문이 화면에 보일 때 읽음) · visiblePanels: 펼친 안이 화면에 들어와 있는 줄 ·
+   * detailQueue: 화면에 들어온 차례대로 본문을 받을 줄 (하나씩 — pumpingDetails)
+   */
+  const lazyRows = new Set<string>()
+  const visiblePanels = new Set<string>()
+  const detailQueue: string[] = []
+  let pumpingDetails = false
 
   /** 받는 일 하나의 확인 — 그 뒤 다른 일이 시작됐거나 · 다른 대화 · 세션이 바뀌었으면 false */
   function liveCheck(messageId: string): () => boolean {
@@ -295,7 +318,10 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
     conversationPageInfo.value = gathered.pageInfo
     const ids = new Set(gathered.items.map((item) => item.id))
     const expanded = [...conversationExpandedIds.value]
-    if (expanded.some((id) => !ids.has(id))) conversationExpandedIds.value = new Set(expanded.filter((id) => ids.has(id)))
+    if (expanded.some((id) => !ids.has(id))) {
+      for (const id of expanded) if (!ids.has(id)) forgetLazy(id)
+      conversationExpandedIds.value = new Set(expanded.filter((id) => ids.has(id)))
+    }
   }
 
   /** 받아 둔 본문을 고친 뒤, 접힌 줄의 것이 상한을 넘으면 오래 보지 않은 것부터 버린다 (펼친 줄의 것은 늘 둔다) */
@@ -319,6 +345,7 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
 
   function collapse(id: string) {
     if (!conversationExpandedIds.value.has(id)) return
+    forgetLazy(id)
     const next = new Set(conversationExpandedIds.value)
     next.delete(id)
     conversationExpandedIds.value = next
@@ -366,6 +393,7 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
       conversationExpandedIds.value = new Set()
       conversationDetails.value = new Map()
       markedRead.clear()
+      clearLazy()
     }
     const live = liveCheck(messageId)
     // 처음 받을 때는 쪽마다 보인다 — 두 통 넘게 모였거나 · 다른 메일이 있다는 수(total)를 받았거나 · 더 묻지 않으면 칸을 그리고 뒤에서 잇는다
@@ -546,7 +574,7 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
       const detail = await mailApi.getMessage(id, { silent: true })
       if (stale()) return
       setDetail(id, { status: 'ready', detail })
-      if (conversationExpandedIds.value.has(id)) void readExpanded(id, detail)
+      readIfSeen(id, detail)
     } catch (error) {
       if (stale()) return
       const apiError = toApiError(error)
@@ -577,6 +605,98 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
     return conversationDetails.value.get(id)?.status === 'error' ? loadConversationDetail(id) : Promise.resolve()
   }
 
+  // ── 모두 펼치기 · 모두 접기 (머리말 — 15단계) ─────────────────────
+
+  /**
+   * 받은 본문을 읽음으로 — 펼쳐 있을 때만. 모두 펼치기로 펼친 줄은 본문이 화면에 보일 때만(화면 밖이면 들어올 때 — noteConversationPanelVisible).
+   * 손으로 펼친 줄은 누른 그 자리라 받는 대로다 (지금 규칙 그대로)
+   */
+  function readIfSeen(id: string, detail: MessageDetail) {
+    if (!conversationExpandedIds.value.has(id)) return
+    if (lazyRows.has(id)) {
+      if (!visiblePanels.has(id)) return
+      lazyRows.delete(id)
+    }
+    void readExpanded(id, detail)
+  }
+
+  /** 그 줄의 모두 펼치기 몫을 잊는다 — 접었다 · 대화에서 빠졌다 */
+  function forgetLazy(id: string) {
+    lazyRows.delete(id)
+    const index = detailQueue.indexOf(id)
+    if (index >= 0) detailQueue.splice(index, 1)
+  }
+
+  function clearLazy() {
+    lazyRows.clear()
+    visiblePanels.clear()
+    detailQueue.length = 0
+  }
+
+  /**
+   * 화면에 들어온 차례대로 본문을 하나씩 받는다 — 차례가 왔을 때 접혔거나 · 화면 밖으로 나갔거나 · 이미 받았으면(받는 중 포함) 건너뛴다.
+   * 대화 · 세션이 바뀌면 받은 것을 버린다(loadConversationDetail)
+   */
+  async function pumpDetailQueue(): Promise<void> {
+    if (pumpingDetails) return
+    pumpingDetails = true
+    try {
+      for (let id = detailQueue.shift(); id !== undefined; id = detailQueue.shift()) {
+        if (!conversationExpandedIds.value.has(id) || !visiblePanels.has(id) || conversationDetails.value.has(id)) continue
+        await loadConversationDetail(id)
+      }
+    } finally {
+      pumpingDetails = false
+    }
+  }
+
+  /**
+   * [모두 펼치기] — 불러온 줄(지금 메일 빼고)을 모두 펼친다. 본문은 펼친 안이 화면에 들어올 때 받는다(noteConversationPanelVisible).
+   * 이미 펼친 줄은 그대로 둔다(손으로 펼친 줄은 받는 대로 읽음이다)
+   */
+  function expandAllConversation(): void {
+    const next = new Set(conversationExpandedIds.value)
+    for (const id of conversationExpandableIds.value) {
+      if (next.has(id)) continue
+      next.add(id)
+      lazyRows.add(id)
+    }
+    if (next.size !== conversationExpandedIds.value.size) conversationExpandedIds.value = next
+  }
+
+  /** [모두 접기] — 펼친 줄을 모두 접는다. 받아 둔 본문은 접힌 줄의 상한까지만 남는다 */
+  function collapseAllConversation(): void {
+    if (conversationExpandedIds.value.size === 0) return
+    lazyRows.clear()
+    detailQueue.length = 0
+    conversationExpandedIds.value = new Set()
+    setDetails(() => undefined)
+  }
+
+  /**
+   * 펼친 줄의 안이 화면에 들어왔다 · 나갔다 (칸이 알린다 — MessageConversation). 들어왔는데 본문이 없으면 받을 차례에 넣고,
+   * 받아 둔 본문이 있는데 모두 펼치기로 펼친 줄이면 이제 보였으니 읽음으로. 나가면 받을 차례에서 뺀다(다시 들어오면 다시 넣는다)
+   */
+  function noteConversationPanelVisible(id: string, visible: boolean): void {
+    if (!visible) {
+      visiblePanels.delete(id)
+      const index = detailQueue.indexOf(id)
+      if (index >= 0) detailQueue.splice(index, 1)
+      return
+    }
+    visiblePanels.add(id)
+    if (!conversationExpandedIds.value.has(id)) return
+    const state = conversationDetails.value.get(id)
+    if (state?.status === 'ready') {
+      // 손으로 펼친 줄은 받을 때 읽음으로 했다 — 화면에 드나들 때마다 다시 묻지 않는다(읽음이 실패한 뒤에도)
+      if (lazyRows.has(id)) readIfSeen(id, state.detail)
+      return
+    }
+    if (state || detailQueue.includes(id)) return
+    detailQueue.push(id)
+    void pumpDetailQueue()
+  }
+
   function reset() {
     runSeq += 1
     conversationSeq += 1
@@ -593,6 +713,7 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
     refreshAgain = false
     markedRead.clear()
     localReads.clear()
+    clearLazy()
   }
 
   return {
@@ -610,6 +731,8 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
     conversationVisible,
     conversationFailed,
     conversationBusy,
+    conversationExpandableIds,
+    conversationAllExpanded,
     loadConversation,
     retryConversation,
     refreshConversation,
@@ -618,6 +741,9 @@ export function createConversationState({ mailApi, list, opened, markRead, sessi
     loadMoreConversation,
     toggleConversationMessage,
     retryConversationDetail,
+    expandAllConversation,
+    collapseAllConversation,
+    noteConversationPanelVisible,
     reset,
   }
 }
diff --git a/frontend/src/stores/mail/mailbox-admin.ts b/frontend/src/stores/mail/mailbox-admin.ts
index f755534..d515e43 100644
--- a/frontend/src/stores/mail/mailbox-admin.ts
+++ b/frontend/src/stores/mail/mailbox-admin.ts
@@ -1,10 +1,15 @@
-// 메일 스토어 모듈 — 메일함 관리 (계약 2절 "메일함 관리" — 4단계, mail.store.ts 가 조립한다)
-// - 만들기 · 이름 바꾸기: 서버가 돌려준 메일함을 바로 보이고, 뒤이어 메일함 목록을 서버 기준으로 다시 맞춘다
+// 메일 스토어 모듈 — 메일함 관리 (계약 2절 "메일함 관리" — 4단계 · 15단계, mail.store.ts 가 조립한다)
+// - 만들기 · 이름 바꾸기 · 옮기기(15단계): 서버가 돌려준 메일함을 바로 보이고, 뒤이어 메일함 목록을 서버 기준으로 다시 맞춘다
+// - 하위 메일함까지 지우기(15단계): 같은 지우기에 withChildren 을 실어 보낸다 — 나무 전체를 "지우는 중"으로 두고 끝나면 나무 전체를 뺀다
 // - 오래 걸리는 처리(모두 읽음 · 비우기 · 메일함 지우기): 서버가 한 요청을 25초 안에 끝내고 남은 수를 돌려준다 —
 //   0(지우기는 deleted: true)이 될 때까지 같은 요청을 다시 보내며 진행을 알린다. 도중에 실패하면 거기까지 처리한 수를 돌려준다
 //   (다시 하면 남은 것만 처리한다). 요청 실패는 인터셉터가 알린다. 그동안 다른 일을 해도 된다 — 같은 메일함의 같은 처리만 한 번에 하나
 // - 휴지통 비우기와 메일함 지우기는 함께 돌지 않는다: 비우기는 차례마다 그때의 휴지통을 다시 읽어 지우므로, 그동안 지운 메일함의 메일이
-//   휴지통에 들어가자마자 영구 삭제된다 ("안의 메일은 휴지통에 있습니다"가 거짓이 된다). 스팸메일함 비우기는 상관없다 (isOperationBlocked)
+//   휴지통에 들어가자마자 영구 삭제된다 ("안의 메일은 휴지통에 있습니다"가 거짓이 된다) (isOperationBlocked)
+// - 같은 결로 스팸메일함 비우기는 이 탭에서 차단할 때 받은 메일을 옮기는 동안(15단계) 시작하지 않는다 — 그동안 옮겨 온 메일이 들어오자마자
+//   영구 삭제되지 않게 (blockCleanupRunning — 반대로 차단 정리도 이 탭에서 스팸메일함을 비우는 동안 시작하지 않는다, mail-block-run.store 의 startBlock).
+//   다른 창 · PC 와는 막지 못한다 — 서버의 (직원, 스팸메일함) 잠금은 요청 하나 동안만이라 두 창의 비우기와 차단 정리가 요청 사이에 번갈아 돌 수 있고,
+//   그러면 옮겨 넣은 메일을 다음 비우기 요청이 지울 수 있다(알려진 한계 — 다른 창끼리의 휴지통 비우기와 메일함 지우기와 같다, 계약 2절 "보낸 사람 차단")
 // - 이미 지워진 메일함(지우기의 404 RES_001 — 다른 탭이 먼저 지웠거나, 응답이 끊긴 뒤 다시 보냈다)은 실패가 아니라 끝난 것으로 다룬다
 // - 세션이 바뀌면(로그아웃 · 다른 계정 — reset) 하던 처리는 더 보내지 않고 멈춘다 (canceled — 알리지 않는다).
 //   만들기 · 이름 바꾸기의 늦은 응답도 쓰지 않는다 — 메일함 id 는 계정마다 겹칠 수 있어 다음 사용자의 메일함을 덮게 된다
@@ -14,6 +19,7 @@ import { getErrorMessage, toApiError, type ApiError } from '@/composables/useApi
 import type { MailRequestOptions } from '@/composables/useMail'
 import { MAILBOX_OPERATION_MAX_STALLS } from '@/shared/constants/mailbox-manage'
 import type { Mailbox } from '@/shared/types/mail'
+import { descendantMailboxes } from '@/shared/utils/mailbox'
 import { initialOperationTotal, type MailboxOperationKind } from '@/shared/utils/mailbox-operation'
 import { scopeMailboxIdOf } from '@/shared/utils/mail-list-source'
 import type { ListState } from './list'
@@ -24,6 +30,8 @@ interface MailboxAdminDeps {
   mailApi: MailApi
   mailboxes: MailboxesState
   list: ListState
+  /** 이 탭에서 차단할 때 받은 메일을 옮기는 중인가 (mail-block-run.store 의 running — 15단계) — 그동안 스팸메일함 비우기를 막는다 */
+  blockCleanupRunning?: () => boolean
 }
 
 /** 진행 — 지금까지 처리한 수 / 처리한 수 + 남은 수 */
@@ -32,6 +40,12 @@ export interface MailboxOperationProgress {
   total: number
 }
 
+/** 오래 걸리는 처리의 옵션 */
+export interface MailboxOperationOptions {
+  /** 지우기 — 하위 메일함까지 (15단계 — 확인 창이 하위까지 지울지 물은 뒤에만. 서버는 ?withChildren=true 일 때만 하위가 있는 메일함을 지운다) */
+  withChildren?: boolean
+}
+
 export type MailboxOperationOutcome =
   /** 끝났다 — 처리한 수 (0 이면 이미 끝나 있었다) · 휴지통으로 옮긴 수 (지우기에서만) */
   | { status: 'done'; processed: number; movedToTrash: number }
@@ -58,7 +72,7 @@ function operationKey(kind: MailboxOperationKind, mailboxId: string): string {
   return `${kind}:${mailboxId}`
 }
 
-export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDeps) {
+export function createMailboxAdmin({ mailApi, mailboxes, list, blockCleanupRunning = () => false }: MailboxAdminDeps) {
   /** 돌고 있는 처리 — "종류:메일함 id" (메뉴 항목 · 비우기 단추를 그동안 끈다) */
   const runningOperations = shallowRef<ReadonlyMap<string, RunningOperation>>(new Map())
   /** 세션이 바뀔 때마다 오른다 — 하던 처리 · 늦게 온 응답은 쓰지 않고 멈춘다 */
@@ -69,8 +83,9 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
   }
 
   /**
-   * 지금은 시작할 수 없는 처리인가 — 휴지통을 비우는 동안의 메일함 지우기, 메일함을 지우는 동안의 휴지통 비우기 (위 설명).
-   * 스팸메일함 비우기 · 모두 읽음은 막지 않는다
+   * 지금은 시작할 수 없는 처리인가 — 휴지통을 비우는 동안의 메일함 지우기, 메일함을 지우는 동안의 휴지통 비우기,
+   * 차단할 때 받은 메일을 옮기는 동안의 스팸메일함 비우기 (위 설명 — 메뉴 · 목록 머리 [비우기] · 확인 단추가 모두 이것을 본다).
+   * 모두 읽음은 막지 않는다
    */
   function isOperationBlocked(kind: MailboxOperationKind, mailbox: Pick<Mailbox, 'role'>): boolean {
     if (kind === 'delete') {
@@ -80,6 +95,7 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
     if (kind === 'empty' && mailbox.role === 'trash') {
       return [...runningOperations.value.values()].some((operation) => operation.kind === 'delete')
     }
+    if (kind === 'empty' && mailbox.role === 'junk') return blockCleanupRunning()
     return false
   }
 
@@ -118,10 +134,23 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
     return renamed
   }
 
-  async function sendStep(kind: MailboxOperationKind, mailboxId: string): Promise<OperationStep> {
+  /**
+   * 메일함 옮기기 (15단계) — 서버가 돌려준 메일함(새 parentId)을 바로 보이고 목록을 서버 기준으로 다시 맞춘다(하위 메일함은 parentId 가 그대로라
+   * 나무를 따라 함께 옮겨 보인다). 같은 이름이면 409 MAIL_009 (예외가 그대로 올라간다). 기다리는 사이 세션이 바뀌었으면 null
+   */
+  async function moveMailbox(id: string, parentId: string | null, options?: MailRequestOptions): Promise<Mailbox | null> {
+    const started = epoch
+    const moved = await mailApi.moveMailbox(id, { parentId }, options)
+    if (started !== epoch) return null
+    mailboxes.upsertMailbox(moved)
+    void mailboxes.loadMailboxes({ background: true })
+    return moved
+  }
+
+  async function sendStep(kind: MailboxOperationKind, mailboxId: string, withChildren: boolean): Promise<OperationStep> {
     if (kind === 'delete') {
       // 이미 지워진 메일함(RES_001)은 끝난 것으로 다룬다 — 알림을 끄고 아래 runMailboxOperation 이 받는다
-      const result = await mailApi.deleteMailbox(mailboxId, { silent: ['RES_001'] })
+      const result = await mailApi.deleteMailbox(mailboxId, { silent: ['RES_001'], withChildren })
       const processed = typeof result.processed === 'number' ? result.processed : result.movedToTrash
       return { processed, movedToTrash: result.movedToTrash, remaining: result.remaining, done: result.deleted }
     }
@@ -129,11 +158,19 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
     return { processed: result.processed, movedToTrash: 0, remaining: result.remaining, done: result.remaining <= 0 }
   }
 
-  /** 한 번 보낸 뒤 — 남은 수를 패널에 바로 보인다 (끝나면 서버 기준으로 다시 맞춘다) */
-  function applyStep(kind: MailboxOperationKind, mailboxId: string, step: OperationStep) {
+  /** 지운 메일함을 패널에서 뺀다 — 하위까지 지웠으면 나무 전체를 (15단계) */
+  function removeDeleted(tree: readonly string[]) {
+    for (const id of tree) mailboxes.removeMailbox(id)
+  }
+
+  /**
+   * 한 번 보낸 뒤 — 남은 수를 패널에 바로 보인다 (끝나면 서버 기준으로 다시 맞춘다).
+   * 하위까지 지우는 동안의 남은 수는 나무 전체의 것이라 그 메일함의 수로 쓰지 않는다 — 끝나면 나무 전체를 뺀다
+   */
+  function applyStep(kind: MailboxOperationKind, mailboxId: string, step: OperationStep, tree: readonly string[]) {
     if (kind === 'read') mailboxes.setCounts(mailboxId, { unreadCount: Math.max(0, step.remaining) })
-    else if (kind === 'delete' && step.done) mailboxes.removeMailbox(mailboxId)
-    else mailboxes.setCounts(mailboxId, { totalCount: Math.max(0, step.remaining) })
+    else if (kind === 'delete' && step.done) removeDeleted(tree)
+    else if (tree.length === 1) mailboxes.setCounts(mailboxId, { totalCount: Math.max(0, step.remaining) })
   }
 
   /**
@@ -153,32 +190,38 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
   /**
    * 오래 걸리는 처리 — 끝날 때까지(남은 수 0 · 지우기는 deleted: true) 같은 요청을 다시 보낸다. 다시 보낼 때마다 onProgress.
    * 실패는 요청마다 인터셉터가 알린다(notified). 한 번도 나아가지 못한 응답이 이어지면 멈추고 BIZ_001 로 돌려준다(아직 알리지 않았다).
-   * 같은 처리가 이미 돌고 있거나 함께 돌 수 없는 처리가 돌고 있으면 시작하지 않는다 (canceled)
+   * 같은 처리가 이미 돌고 있거나 함께 돌 수 없는 처리가 돌고 있으면 시작하지 않는다 (canceled).
+   * 하위까지 지우기(options.withChildren — 15단계)는 시작할 때의 나무(그 메일함 + 모든 하위)를 함께 "지우는 중"으로 두고(그 메뉴들도 끈다),
+   * 전체 수는 나무 전체의 메일 수로 센다. 나무 안의 메일함 하나라도 지우는 중이면 시작하지 않는다
    */
   async function runMailboxOperation(
     kind: MailboxOperationKind,
     mailbox: Mailbox,
     onProgress: (progress: MailboxOperationProgress) => void,
+    options: MailboxOperationOptions = {},
   ): Promise<MailboxOperationOutcome> {
-    if (isOperationRunning(kind, mailbox.id) || isOperationBlocked(kind, mailbox)) return { status: 'canceled' }
-    const operation: RunningOperation = { kind, mailboxId: mailbox.id }
+    const withChildren = kind === 'delete' && options.withChildren === true
+    const descendants = withChildren ? descendantMailboxes(mailboxes.mailboxes.value, mailbox.id) : []
+    const tree = [mailbox.id, ...descendants.map((child) => child.id)]
+    if (tree.some((id) => isOperationRunning(kind, id)) || isOperationBlocked(kind, mailbox)) return { status: 'canceled' }
+    const operations: RunningOperation[] = tree.map((mailboxId) => ({ kind, mailboxId }))
     const started = epoch
-    markRunning(operation, true)
+    for (const operation of operations) markRunning(operation, true)
     let processed = 0
     let movedToTrash = 0
-    let total = initialOperationTotal(kind, mailbox)
+    let total = initialOperationTotal(kind, mailbox, descendants)
     let stalls = 0
     try {
       for (;;) {
         let step: OperationStep
         try {
-          step = await sendStep(kind, mailbox.id)
+          step = await sendStep(kind, mailbox.id, withChildren)
         } catch (error) {
           if (started !== epoch) return { status: 'canceled' }
           const apiError = toApiError(error)
           if (kind === 'delete' && apiError.code === 'RES_001') {
             // 이미 지워진 메일함 — 다른 탭이 먼저 지웠거나 끊긴 응답 뒤에 다시 보냈다
-            mailboxes.removeMailbox(mailbox.id)
+            removeDeleted(tree)
             settle(kind, mailbox.id)
             return { status: 'done', processed, movedToTrash }
           }
@@ -189,7 +232,7 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
         processed += Math.max(0, step.processed)
         movedToTrash += Math.max(0, step.movedToTrash)
         total = processed + Math.max(0, step.remaining)
-        applyStep(kind, mailbox.id, step)
+        applyStep(kind, mailbox.id, step, tree)
         if (step.done) break
         stalls = step.processed > 0 ? 0 : stalls + 1
         if (stalls >= MAILBOX_OPERATION_MAX_STALLS) {
@@ -203,7 +246,7 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
       return { status: 'done', processed, movedToTrash }
     } finally {
       // 세션이 바뀐 뒤 끝난 옛 처리는 새 세션의 표시를 건드리지 않는다 (reset 이 이미 비웠다)
-      if (started === epoch) markRunning(operation, false)
+      if (started === epoch) for (const operation of operations) markRunning(operation, false)
     }
   }
 
@@ -218,6 +261,7 @@ export function createMailboxAdmin({ mailApi, mailboxes, list }: MailboxAdminDep
     isOperationBlocked,
     createMailbox,
     renameMailbox,
+    moveMailbox,
     runMailboxOperation,
     reset,
   }
diff --git a/frontend/src/stores/mail/scheduled.ts b/frontend/src/stores/mail/scheduled.ts
index 0a5bcad..abaa99a 100644
--- a/frontend/src/stores/mail/scheduled.ts
+++ b/frontend/src/stores/mail/scheduled.ts
@@ -6,19 +6,48 @@
 //   같은 메일의 취소는 한 번에 하나다 — 이어 누른 두 번째가 첫 번째의 결과를 기다린다(두 번째 요청이 "이미 보냈다"(MAIL_014)로 거짓 알림을 띄우지 않게)
 // - 엔진이 붙잡은 발송을 풀어도(보냄) 새 메일 확인 · 실시간 알림의 state 는 바뀌지 않는다 — 그래서 보낼 시각이 지나면 보이는 목록 · 열린 메일 ·
 //   예약됨 수를 다시 본다(refreshPendingSends — 때는 usePendingSendRefresh 가 정한다). 취소가 MAIL_014(이미 보냄)이면 바로 다시 본다
+// - 지금 보내기(15단계)는 결과를 ReleaseOutcome 으로 돌려준다 — 503 MAIL_001 · 결과를 모르는 실패(SYS_001)는 그 메일을 다시 받아
+//   붙잡은 발송 · 메일함으로 가른다(unsentReleaseState): 임시보관함 reverted · 다시 낸 발송이 기다림 released · 예약 그대로 retryable ·
+//   예약만 풀림 unscheduled · 다시 받지 못함 unknown. 열린 메일의 안내 줄은 예약이 풀린 것을 확인했을 때(보냄 · 되돌림 · 예약만 풀림)만 내린다
 import { ref } from 'vue'
 
 import { toApiError } from '@/composables/useApi'
 import type { MailRequestOptions } from '@/composables/useMail'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
 import { SCHEDULED_COUNT_PAGE_SIZE } from '@/shared/constants/mail-send-later'
-import type { MessageSummary, ScheduledMessageCancel } from '@/shared/types/mail'
-import { mailboxListIdOf, sameListSource } from '@/shared/utils/mail-list-source'
-import { messagePendingSend, pendingSendOf, samePendingSend } from '@/shared/utils/pending-send'
+import type { MessageSummary, ScheduledMessageCancel, ReleasedSend } from '@/shared/types/mail'
+import { mailboxListIdOf, sameListSource, type MailListSource } from '@/shared/utils/mail-list-source'
+import { messagePendingSend, pendingSendOf, samePendingSend, unsentReleaseState } from '@/shared/utils/pending-send'
 import type { ListState } from './list'
 import type { MailboxesState } from './mailboxes'
 import type { OpenedMessage } from './message'
 import type { MailApi } from './types'
 
+/** 이미 보낸 메일 — 지금 보내기에서는 바라던 대로 나간 것이다 (15단계) */
+const MAIL_ALREADY_SENT: ErrorCode = 'MAIL_014'
+/** 지금 보내지 못했다 — 결과를 모르거나 임시보관함으로 되돌렸다 (15단계 — 메일이 어디 있는지 보고 화면이 알린다) */
+const MAIL_UNAVAILABLE: ErrorCode = 'MAIL_001'
+/** 결과를 모르는 실패 — 앞단의 502 · 504, 시간 초과, 연결 끊김, 서버 오류 (15단계 — MAIL_001 과 같은 갈래) */
+const UNKNOWN_FAILURE: ErrorCode = 'SYS_001'
+/** 지금 보내기에서 화면이 알리는 코드 — 인터셉터 알림을 끈다 */
+const RELEASE_SCREEN_CODES: readonly ErrorCode[] = [MAIL_ALREADY_SENT, MAIL_UNAVAILABLE, UNKNOWN_FAILURE]
+
+/** 지금 보내기의 결과 (15단계 — 그 밖의 실패는 예외로 올라간다) */
+export type ReleaseOutcome =
+  /** 보냈다 — 보내기 취소를 기다리거나 바로 보냈다(이미 보낸 메일 · 결과를 모른 뒤 다시 받아 보니 다시 낸 발송이 기다리는 메일 포함) */
+  | { status: 'released'; released: ReleasedSend }
+  /** 보내지 못해 그 메일이 임시보관함으로 되돌아갔다 — 예약됨을 떠났다 (다시 받아 보니 임시보관함) */
+  | { status: 'reverted' }
+  /**
+   * 예약은 풀렸고 기다리는 발송이 없다(보낸편지함에 그대로) — 예약한 시각에 따로 나가지는 않지만, 이미 나갔는지는 모른다(보내기 취소 0초 · 응답만 잃음).
+   * 같은 요청을 다시 보내면 서버가 아직 보내지 않았을 때만 이어 낸다
+   */
+  | { status: 'unscheduled' }
+  /** 보내지 못했다 — 예약이 그대로인 것을 확인했다(예약한 시각에 나간다). 같은 요청을 다시 보내면 된다 */
+  | { status: 'retryable' }
+  /** 그 메일을 다시 받지 못해 어떻게 됐는지 모른다 — 이미 나갔을 수 있다. 같은 요청을 다시 보내면 서버가 아직 보내지 않았을 때만 낸다 */
+  | { status: 'unknown' }
+
 interface ScheduledDeps {
   mailApi: MailApi
   mailboxes: MailboxesState
@@ -36,6 +65,8 @@ export function createScheduledState({ mailApi, mailboxes, list, opened, session
   let countSeq = 0
   /** 메일마다 진행 중인 취소 — 같은 메일의 두 번째 취소는 이것을 기다린다 */
   const cancels = new Map<string, Promise<ScheduledMessageCancel>>()
+  /** 메일마다 진행 중인 지금 보내기 (15단계) — 같은 메일의 두 번째는 이것을 기다린다 */
+  const releases = new Map<string, Promise<ReleaseOutcome>>()
 
   /** 예약한 메일 수를 다시 묻는다 — 실패는 알리지 않고 지난 값을 둔다 */
   async function loadScheduledCount(): Promise<void> {
@@ -122,6 +153,129 @@ export function createScheduledState({ mailApi, mailboxes, list, opened, session
     return result
   }
 
+  /** 같은 메일의 지금 보내기가 진행 중인가 (15단계) */
+  function isReleasingPendingSend(id: string): boolean {
+    return releases.has(id)
+  }
+
+  /** 지금 보내기가 끝난 뒤 — 예약됨에서 빼고 열린 메일의 붙잡은 발송을 응답으로 바꾼다. 다른 목록이면 서버 기준으로 맞추기만 한다 */
+  function settleRelease(id: string, source: MailListSource | null, result: ReleasedSend) {
+    // 예약됨에서는 빠진다(이제 보내기 취소를 기다리거나 보낸 메일이다). 보낸편지함 목록이면 줄은 남고 날짜 칸만 바뀐다 — 다시 맞추며 들어온다
+    if (sameListSource(list.listSource.value, source) && source?.kind === 'scheduled') list.removeFromList(new Set([id]))
+    const current = opened.selected.value
+    if (current?.id === id) opened.selected.value = { ...current, pendingSend: result.pendingSend }
+    resyncAfterRelease()
+  }
+
+  /** 예약됨 수 · 메일함 개수 · 보이는 목록을 서버 기준으로 다시 맞춘다 — 열린 메일은 건드리지 않는다 */
+  function resyncAfterRelease() {
+    void list.syncVisibleList({ includeSearch: true })
+    mailboxes.syncCounts()
+    void loadScheduledCount()
+  }
+
+  /**
+   * 예약이 풀린 채 그 메일이 남았다(임시보관함으로 되돌림 · 예약만 풀림) — 열린 메일의 안내 줄을 내린다(예약됨 · 보낸편지함 · 검색 어디서 열었든).
+   * 그 목록을 보고 있으면 뺀다: 예약됨에서는 늘(이제 예약이 아니다), 메일함 목록에서는 보낸편지함을 떠났을 때(leftMailbox — 되돌림)만
+   */
+  function settleUnscheduled(id: string, source: MailListSource | null, mailboxIds: string[] | null, leftMailbox: boolean) {
+    if (
+      sameListSource(list.listSource.value, source) &&
+      (source?.kind === 'scheduled' || (leftMailbox && mailboxListIdOf(source) !== null))
+    ) {
+      list.removeFromList(new Set([id]))
+    }
+    const current = opened.selected.value
+    if (current?.id === id) opened.selected.value = { ...current, mailboxIds: mailboxIds ?? current.mailboxIds, pendingSend: null }
+  }
+
+  /**
+   * 503 MAIL_001 · 결과를 모르는 실패(SYS_001) 뒤 — 결과를 모르는 실패(메일은 보낸편지함에 그대로 · 같은 요청을 다시 보내면 이어 낸다)와
+   * 엔진이 거절해 임시보관함으로 되돌린 실패가 같은 꼴로 온다. 그 메일을 다시 받아 가른다(unsentReleaseState):
+   * - 임시보관함: reverted — 예약됨 · 보낸편지함 목록에서 빼고 열린 메일의 안내 줄을 내린다(예약 취소와 같다)
+   * - 다시 낸 발송이 보내기 취소를 기다린다: released — 지금 보내기가 끝난 것과 같다(같은 요청을 다시 보내도 서버가 이 상태로 200 을 준다)
+   * - 예약 그대로: retryable — 안내 줄은 그대로(다시 받은 시각으로만 맞춘다)
+   * - 예약만 풀림(붙잡은 발송이 없다 · 보낸편지함): unscheduled — 예약이 아닌 것은 확인했으니 안내 줄을 내리고 예약됨에서 뺀다(보낸편지함 목록에는 남는다).
+   *   이미 나갔는지는 모른다 — 화면은 보냈다고도 못 보냈다고도 하지 않는다
+   * - 다시 받지 못함: unknown — 안내 줄은 마지막으로 안 그대로 둔다(다음 다시 맞추기가 바로잡는다). 보냈다 · 못 보냈다 · 되돌렸다고 말하지 않는다(닫힌 쪽)
+   * 예약됨 수와 목록은 어느 쪽이든 다시 맞춘다
+   */
+  async function settleUnsentRelease(id: string, source: MailListSource | null, session: number): Promise<ReleaseOutcome> {
+    let fresh: MessageSummary | null = null
+    try {
+      fresh = await mailApi.getMessage(id, { silent: true })
+    } catch {
+      // 다시 받지 못했다 — 다시 시도할 것으로
+    }
+    if (sessionGeneration() !== session) return { status: 'unknown' }
+    const state = unsentReleaseState(fresh, mailboxes.mailboxByRole('drafts')?.id ?? null)
+    const pending = messagePendingSend(fresh)
+    const mailboxIds = fresh !== null && Array.isArray(fresh.mailboxIds) ? fresh.mailboxIds : null
+    if (state === 'undo' && pending) {
+      const released: ReleasedSend = { id, rejectedRecipients: [], pendingSend: pending }
+      settleRelease(id, source, released)
+      return { status: 'released', released }
+    }
+    if (state === 'reverted' || state === 'unscheduled') settleUnscheduled(id, source, mailboxIds, state === 'reverted')
+    if (state === 'scheduled') {
+      // 예약은 살아 있다 — 다시 받은 시각으로만 맞춘다(안내 줄은 그대로)
+      const current = opened.selected.value
+      if (current?.id === id && !samePendingSend(pending, messagePendingSend(current))) {
+        opened.selected.value = { ...current, pendingSend: pending }
+      }
+    }
+    resyncAfterRelease()
+    if (state === 'reverted') return { status: 'reverted' }
+    if (state === 'unscheduled') return { status: 'unscheduled' }
+    if (state === 'scheduled') return { status: 'retryable' }
+    return { status: 'unknown' }
+  }
+
+  async function sendRelease(id: string, options?: MailRequestOptions): Promise<ReleaseOutcome> {
+    const session = sessionGeneration()
+    const source = list.listSource.value
+    let result: ReleasedSend
+    try {
+      // 이미 보낸 메일(MAIL_014)은 서버가 200 으로 답하기로 했지만, 혹시 409 로 오더라도 바라던 대로 나간 것이다 — 보낸 것으로 다룬다.
+      // 503 MAIL_001 · 결과를 모르는 실패(SYS_001)는 화면이 그 메일을 다시 받아 보고 알린다 (settleUnsentRelease)
+      result = await mailApi.releaseScheduledMessage(id, { silent: RELEASE_SCREEN_CODES, ...options })
+    } catch (error) {
+      if (sessionGeneration() !== session) throw error
+      const { code, canceled } = toApiError(error)
+      if (canceled) throw error
+      if (code === MAIL_UNAVAILABLE || code === UNKNOWN_FAILURE) return settleUnsentRelease(id, source, session)
+      if (code !== MAIL_ALREADY_SENT) {
+        // 받는 사람이 모두 받지 않아 임시보관함으로 되돌렸거나(400 MAIL_010 · 503 MAIL_011) 그사이 예약이 사라졌다(404) ·
+        // 같은 메일을 다른 곳에서 하는 중(429) — 알림은 인터셉터, 화면의 예약 표시 · 수를 다시 맞춘다
+        void refreshPendingSends()
+        mailboxes.syncCounts()
+        throw error
+      }
+      result = { id, rejectedRecipients: [], pendingSend: null }
+    }
+    // 기다리는 사이 세션이 바뀌었으면(다른 계정 — 메일 id 가 겹칠 수 있다) 목록 · 열린 메일을 건드리지 않는다
+    if (sessionGeneration() === session) settleRelease(id, source, result)
+    return { status: 'released', released: result }
+  }
+
+  /**
+   * 예약한 메일을 지금 보낸다 (POST /scheduled-messages/{id}/release — 15단계). 응답의 pendingSend 가 { kind: 'undo' } 면 보내기 취소를 기다리는 중,
+   * null 이면 보냈다(예약 시각이 막 지나 먼저 보낸 메일도) — released. 예약됨 · 메일함 개수 · 보이는 목록 · 열린 메일을 맞춘다.
+   * 503 MAIL_001 · 결과를 모르는 실패(SYS_001)면 그 메일을 다시 받아 가른다 — 임시보관함으로 되돌렸다(reverted) · 다시 낸 발송이 기다린다(released) ·
+   * 예약만 풀렸다(unscheduled) · 예약이 그대로다(retryable) · 다시 받지 못했다(unknown) (settleUnsentRelease) — 알림은 부르는 쪽(화면 글).
+   * 같은 메일의 지금 보내기가 진행 중이면 새로 보내지 않고 그 결과를 함께 기다린다.
+   * 그 밖의 실패(404 · 400 MAIL_010 · 503 MAIL_011 · 429)는 예외가 그대로 올라간다 — 알림은 인터셉터가 띄운다
+   */
+  function releasePendingSend(id: string, options?: MailRequestOptions): Promise<ReleaseOutcome> {
+    const running = releases.get(id)
+    if (running) return running
+    const release = sendRelease(id, options).finally(() => {
+      if (releases.get(id) === release) releases.delete(id)
+    })
+    releases.set(id, release)
+    return release
+  }
+
   /**
    * 붙잡은 발송을 취소한다 (DELETE /scheduled-messages/{id}) — 그 메일은 보내지 않고 임시보관함으로 옮겨진다(같은 id → draftId).
    * 예약됨 · 메일함 목록에서는 뺀다(보낸편지함을 떠났다 — 임시보관함이면 다시 맞추며 들어온다), 열린 메일이면 붙잡은 발송 표시를 내린다.
@@ -143,6 +297,7 @@ export function createScheduledState({ mailApi, mailboxes, list, opened, session
     scheduledCount.value = 0
     nextScheduled.value = null
     cancels.clear()
+    releases.clear()
   }
 
   return {
@@ -151,6 +306,8 @@ export function createScheduledState({ mailApi, mailboxes, list, opened, session
     loadScheduledCount,
     cancelPendingSend,
     isCancellingPendingSend,
+    releasePendingSend,
+    isReleasingPendingSend,
     refreshPendingSends,
     reset,
   }
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index aa9ffc3..5bca981 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -7,6 +7,8 @@
  *   70rem(1120px) 이상 — 레일 · 메일함 · 목록 · 본문이 한 줄에 놓이고 칸마다 따로 스크롤된다.
  *   그보다 좁으면 칸이 아래로 접히고 화면 전체가 스크롤된다.
  *   목록 보기 표(MessageTable) — 68.6875rem(1099px) 이하에서 크기 칸 숨김, 37.4375rem(599px) 이하에서 칸 축소.
+ *   상단 바(AppTopBar) — 30rem(480px) 이하에서 계정 칸의 주소를 감추고 이름만 둔다 (15단계).
+ *   읽기 화면 도구 줄(MessageReader)은 화면 폭이 아니라 읽기 칸 폭(컨테이너 쿼리) — 36.25rem(580px, 휴지통은 37.8125rem 605px)보다 좁으면 아이콘만 (15단계).
  */
 :root {
   /* ── 글꼴 ─────────────────────────────── */
diff --git a/frontend/src/test-utils/drag.ts b/frontend/src/test-utils/drag.ts
new file mode 100644
index 0000000..b234d7c
--- /dev/null
+++ b/frontend/src/test-utils/drag.ts
@@ -0,0 +1,59 @@
+// 단위 테스트 전용 — 끌어다 놓기 이벤트 (jsdom 에는 DragEvent · DataTransfer 가 없다).
+// 브라우저처럼 dragstart 에 넣은 값은 놓을 때만 읽히고(getData), 끄는 동안(dragenter · dragover)에는 종류(types)만 보인다 —
+// 테스트도 같은 DataTransfer 를 dragstart · dragover · drop 에 함께 넘긴다. 앱 코드에서 import 하지 않는다
+
+export interface FakeDataTransfer {
+  types: string[]
+  files: File[]
+  effectAllowed: string
+  dropEffect: string
+  setData(type: string, value: string): void
+  getData(type: string): string
+  /** 파일 밖의 값을 모두 지운다 (브라우저처럼 — 끌기를 시작할 때만 쓸 수 있다) */
+  clearData(): void
+  setDragImage(image: Element, x: number, y: number): void
+  /** setDragImage 로 붙인 그림 (테스트가 본다) */
+  dragImage: Element | null
+}
+
+/** 메일 끌기에 쓰는 빈 DataTransfer — 파일 끌기면 files 를 넘긴다(types 에 'Files') */
+export function fakeDataTransfer(files: File[] = []): FakeDataTransfer {
+  const data = new Map<string, string>()
+  const transfer: FakeDataTransfer = {
+    types: files.length > 0 ? ['Files'] : [],
+    files,
+    effectAllowed: 'uninitialized',
+    dropEffect: 'none',
+    dragImage: null,
+    setData(type, value) {
+      data.set(type, value)
+      if (!transfer.types.includes(type)) transfer.types.push(type)
+    },
+    getData(type) {
+      return data.get(type) ?? ''
+    },
+    clearData() {
+      data.clear()
+      transfer.types = transfer.types.filter((type) => type === 'Files')
+    },
+    setDragImage(image) {
+      transfer.dragImage = image
+    },
+  }
+  return transfer
+}
+
+/** dragstart · dragenter · dragover · dragleave · drop · dragend — bubbles · cancelable, 마우스 자리(clientX · clientY)는 0 */
+export function dragEvent(
+  type: string,
+  dataTransfer: FakeDataTransfer,
+  init: { relatedTarget?: EventTarget | null; ctrlKey?: boolean } = {},
+): Event {
+  const event = new Event(type, { bubbles: true, cancelable: true })
+  Object.defineProperty(event, 'dataTransfer', { value: dataTransfer })
+  Object.defineProperty(event, 'relatedTarget', { value: init.relatedTarget ?? null })
+  Object.defineProperty(event, 'clientX', { value: 0 })
+  Object.defineProperty(event, 'clientY', { value: 0 })
+  Object.defineProperty(event, 'ctrlKey', { value: init.ctrlKey ?? false })
+  return event
+}