feat(frontend): 보내기 취소 · 예약 발송 · 외부 이미지 · 인쇄 · 보낸 사람 차단 · 보내기 · 읽기 설정 화면

쓰기 화면의 [보내기 ▾](예약 발송 창), 보내기 취소 알림(남은 시간 막대), 메일함 패널 「예약됨」 · 예약 목록, 읽기 화면의 안내 줄([이미지 보기] · [고치기] · [예약 취소] · [차단 풀기]),
인쇄 화면(새 탭 — A4 폭으로 다시 재서 빈 쪽 없이), 보낸 사람 차단 창, 설정 › 보내기 · 읽기 · 차단한 주소. 디자인 README "9단계", 계약 2절.

리뷰로 고친 것:
- 붙잡힌 메일을 여러 통 처리로 지워도 예약이 그대로 나갔다 — 고르지 못하게 했다(고르기 칸 aria-disabled + 까닭, 하나 · 범위 · 모두 고르기가 건너뛴다).
  읽기 화면 [삭제]는 확인(처음 초점 「취소」) 뒤 발송을 취소하고 휴지통으로 — 서버도 MAIL_015 로 막는다.
- 엔진이 발송을 풀어도 상태가 바뀌지 않아 "보내는 중" · 「예약됨」이 남았다 — 보낼 시각 + 2초에 목록 · 열린 메일 · 예약 수를 다시 맞춘다(MAIL_014 때도).
- 설정을 연달아 고르면 늦게 온 앞 응답이 화면과 서버를 갈랐다 — 칸마다 저장은 한 번에 하나, 끝나면 마지막으로 고른 값으로 맞춘다.
- 응답을 기다리는 사이 다른 목록으로 간 사용자를 옛 목록의 다음 메일로 끌고 갔다 — 같은 목록 · 같은 메일을 보고 있을 때만 옮긴다(3 · 4단계 단추도).
- 이미지를 보일 때 본문 틀의 CSP 를 우리 출처의 중계 경로로만 연다 — 'self' 면 정화를 빠져나간 CSS url() 이 다른 API 를 부를 수 있었다.
- 알림 단추는 한 번만 돈다, 보내기 취소 알림의 마감은 설정한 초로 묶는다, [보내기 ▾] 메뉴는 화면 안에서 연다(쓰기 화면이 움직이지 않게),
  차단 목록 · 설정 저장의 상태가 멈추던 것, 초점을 잃던 것과 알리지 않던 라이브 영역.

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

frontend/src/styles/base.css

@@ -48,6 +48,11 @@ a:hover {
   outline-offset: var(--focus-ring-offset);
 }
 
+/* 초점을 잃었을 때 대신 받은 화면 영역(main — 닫힌 알림 안에 있던 초점 등, ToastHost) — 영역 전체에 고리를 그리지 않는다 */
+[data-focus-fallback]:focus {
+  outline: none;
+}
+
 /*
  * 글자 입력칸 포커스 — 한 가지 규칙 (디자인 README "메일 쓰기 · 글자 입력칸 포커스")
  * 받는 사람·참조·숨은참조 행, 제목 행, 본문 편집 영역에 .compose-field 를 붙인다.

frontend/src/styles/tokens.css

@@ -50,6 +50,9 @@
   --color-on-brand-muted: #a3c2c6;
   --color-on-brand-link: #9ed6db;
   --color-on-brand-success: #9fe0b5;
+  --color-on-brand-track: rgba(255, 255, 255, 0.18); /* 알림 안 남은 시간 막대의 바탕 (디자인 원본 MailSendLater) */
+  --color-on-brand-progress: #7fd3da; /* 알림 안 남은 시간 막대 — [보내기 취소] 가 남은 동안 (디자인 원본 MailSendLater) */
+  --color-on-brand-divider: rgba(255, 255, 255, 0.35); /* [보내기 ▾] 두 단추 사이 선 (디자인 원본 MailSendLater) */
 
   /* ── 색: 글자 ───────────────────────────── */
   --color-text: #171c26;
@@ -81,6 +84,7 @@
   --color-warning-surface: #fff7e6;
   --color-warning-text: #7a5200; /* 임시 저장 "다른 곳에서 바뀐 저장본" 안내 */
   --color-warning-hover: #fdebc8; /* 노란 줄 안의 단추에 마우스를 올렸을 때 — 메일 필터 [다시 불러오기] · [다시 켜기] (디자인 원본 MailFilterStates) */
+  --color-warning-border: #f0d9a8; /* 노란 줄 안의 흰 단추 테두리 — 읽기 화면 [이미지 보기] (디자인 원본 MailReadTools) */
   --color-success-text: #067647; /* 서명 "저장했습니다" (디자인 원본 Settings) */
   --color-status-live: #12b76a; /* 실시간 연결 "연결되어 있습니다" 점 (디자인 원본 SettingsNotify) */
   --color-star: #b7791f;