feat(frontend): 임시 저장·서명 설정·받는 사람 자동 완성 화면

- 쓰기 화면 자동 저장(3초 멈춤 · 30초 · 10초 간격 · 한 번에 하나)과 상태 글, 저장할 때마다 주소를 ?draft= 로 맞춰
  새로고침해도 이어 쓴다. MAIL_008 · PUT 404 는 막지 않고 새 저장본으로 남긴다
- 찾지 못한 첨부가 남았거나 본문이 한도를 넘는 동안은 저장하지 않고, 실을 수 없는 첨부가 든 남의 저장본은 원본을 지우지 않는다
- 휴지통은 휴지통으로 옮기기(PATCH)와 되돌리기 — 이미 휴지통에 있는 메일을 DELETE 로 영구 삭제하지 않게
- 설정 › 메일 › 서명: 서식 · 그림(크기 줄) · 미리 보기 · 넣을 메일, 저장하지 않고 떠나면 묻는다
- 받는 사람 자동 완성: 사내 · 최근 묶음, 초성 검색(조합 중 글자 포함), 완전한 주소는 미리 고르지 않는다
- 본문에 그림으로 보인 첨부(isInline)는 읽기 화면의 첨부 목록에서 빼고 전달에는 붙인다

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

frontend/src/styles/base.css

@@ -63,6 +63,35 @@ a:hover {
   outline: none;
 }
 
+/*
+ * 둘 · 셋 중 하나를 고르는 전환 단추 — 설정 화면의 그림 크기 · 미리 볼 메일 (디자인 원본 Settings 의 .seg)
+ * 회색 바탕 묶음 안에서 고른 칸만 흰 바탕 + 그림자. 단추 높이 36 — 캔버스 확정값, 44px 기준의 밀도 예외(--size-segment-item-lg).
+ * 사용: <div role="group" class="segmented"><button class="segmented__item" :aria-pressed="…">…</button></div>
+ */
+.segmented {
+  display: inline-flex;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-muted);
+}
+
+.segmented__item {
+  min-height: var(--size-segment-item-lg);
+  padding: 0 var(--space-12);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-weight: 600;
+}
+
+.segmented__item[aria-pressed='true'] {
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-segment);
+}
+
 /* 화면에는 숨기고 스크린리더에는 읽힌다 (안 읽음·준비 중 같은 상태 전달용) */
 .visually-hidden {
   position: absolute;

frontend/src/styles/tokens.css

@@ -22,6 +22,7 @@
   --font-size-body: 0.875rem; /* 14px — 본문·입력 */
   --font-size-title-sm: 0.9375rem; /* 15px — 영역 제목 */
   --font-size-title: 1rem; /* 16px — 상단 바 모듈 이름 */
+  --font-size-title-lg: 1.125rem; /* 18px — 설정 화면 제목 (디자인 원본 Settings) */
   --font-size-heading: 1.25rem; /* 20px — 메일 제목 */
   --font-size-heading-lg: 1.375rem; /* 22px — 로그인 제목 */
   --font-size-display: 1.875rem; /* 30px — 로그인 소개 문구 */
@@ -73,7 +74,8 @@
   --color-danger-surface: #fef3f2;
   --color-danger-border: #fbd7d3;
   --color-warning-surface: #fff7e6;
-  --color-warning-text: #7a5200;
+  --color-warning-text: #7a5200; /* 임시 저장 "다른 곳에서 바뀐 저장본" 안내 */
+  --color-success-text: #067647; /* 서명 "저장했습니다" (디자인 원본 Settings) */
   --color-star: #b7791f;
 
   /* ── 간격 (이름의 숫자 = px) ─────────────── */
@@ -116,16 +118,19 @@
   --shadow-toast: 0 0.625rem 1.75rem rgba(16, 24, 28, 0.12);
   --shadow-toast-strong: 0 0.625rem 1.75rem rgba(16, 24, 28, 0.22);
   --shadow-dialog: 0 0.875rem 2.25rem rgba(16, 24, 28, 0.14);
+  --shadow-segment: 0 0.0625rem 0.125rem rgba(16, 24, 28, 0.14); /* 전환 단추의 고른 칸 (디자인 원본 Settings) */
   --color-backdrop: rgba(11, 54, 64, 0.32);
 
   /* ── 크기 ───────────────────────────────── */
   --size-touch: 2.75rem; /* 44px — 누를 수 있는 최소 영역 */
   /*
    * 밀도를 위한 작은 조작 영역 — 클릭 영역 44px 기준의 의도된 예외 (디자인 README "디자인 원칙", 사용자 확정).
-   * 목록 표의 별 버튼(폭 32px · 행 높이를 채움)과 "분할 | 목록" 전환(바깥 36px)에만 쓴다.
+   * 목록 표의 별 버튼(폭 32px · 행 높이를 채움), "분할 | 목록" 전환(바깥 36px),
+   * 설정 화면의 전환 단추 · 서명 그림의 크기 줄(작게 · 보통 · 원본 · 그림 빼기 — 36px, 캔버스 확정값)에만 쓴다.
    */
   --size-compact-control: 2rem; /* 32px */
   --size-segment-item: 1.875rem; /* 30px — 전환 버튼 한 칸 높이 (테두리·안쪽 여백 포함 36px) */
+  --size-segment-item-lg: 2.25rem; /* 36px — 밀도 예외: 설정 화면의 전환 단추(그림 크기 · 미리 볼 메일) · 그림 빼기 (디자인 원본 Settings) */
   --size-icon-button: 2.5rem; /* 40px — 새로고침 · 이전/다음 버튼 폭 (높이는 44px) */
   --size-rail: 4.5rem; /* 72px — 앱 레일 폭 */
   --size-rail-item: 3.75rem; /* 60px */