feat(frontend): 설정(비밀번호 · 부재중 응답) · 메일함 관리 · 스팸 신고 · 원문 내려받기 화면

- 설정 메뉴를 계정 · 메일 묶음으로, 비밀번호 바꾸기(칸 아래 오류 · 30초 한도)와 부재중 자동 응답(기간 · 미리 보기 · 나가기 확인),
  메일함 패널의 부재중 안내(1분마다 다시 계산)
- 메일함 패널의 내 메일함 묶음 · ⋯ 메뉴(보이는 영역 안에 열기) · 대화상자(만들기 · 이름 바꾸기 · 지우기), 목록 머리 비우기
  — 확인한 그 메일함만, 휴지통 비우기와 메일함 지우기는 함께 돌리지 않는다
- 오래 걸리는 처리의 진행 알림("…하는 중 · 600 / 1,234통" → 결과), 세션이 바뀌면 멈추고 늦게 온 응답은 쓰지 않는다
- 읽기 화면 · 여러 통 도구 줄의 스팸 신고 / 스팸 아님 + 되돌리기, ⋯ › 원문 내려받기 (.eml)

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

frontend/src/styles/base.css

@@ -92,6 +92,78 @@ a:hover {
   box-shadow: var(--shadow-segment);
 }
 
+/*
+ * 테두리 있는 입력칸 — 설정 화면 · 메일함 이름 대화상자 (디자인 원본 SettingsAccount · SettingsVacation · MailboxManage 의 .field · .pw-box)
+ * 높이 44 · 테두리 #D0D5DD. 초점은 강조색 1px 테두리 + 1px 그림자(상단 검색 칸과 같다), 오류는 빨간 테두리, 꺼진 칸은 흐리게.
+ * 칸 안에 단추가 있는 상자(비밀번호 보기)는 상자에 .form-input 을, 안의 입력 요소에 .form-input__control 을 붙인다 —
+ * 입력 요소에 초점이 있을 때만 상자에 초점을 보인다 (안의 단추에 초점이 가면 단추 고리만 보인다).
+ * 오류 상태는 입력 요소의 aria-invalid="true" (상자는 .is-invalid) 로 그린다.
+ */
+.form-input {
+  min-height: var(--size-touch);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.form-input:focus,
+.form-input:has(.form-input__control:focus) {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 var(--border-width) var(--color-brand);
+}
+
+.form-input[aria-invalid='true'],
+.form-input.is-invalid {
+  border-color: var(--color-danger);
+}
+
+.form-input[aria-invalid='true']:focus,
+.form-input.is-invalid:has(.form-input__control:focus) {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 var(--border-width) var(--color-danger);
+}
+
+.form-input:disabled {
+  background: var(--color-surface-panel);
+  color: var(--color-icon-muted);
+}
+
+.form-input__control {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 var(--space-12);
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.form-input__control:focus,
+.form-input__control:focus-visible {
+  outline: none;
+}
+
+/* 칸 아래 안내 · 오류 (12.5px) — 오류는 빨간 글 + alert-circle 아이콘 (디자인 원본 SettingsAccount) */
+.form-message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-6);
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.form-message--error {
+  color: var(--color-danger);
+}
+
+/* 아이콘을 첫 줄 가운데에 맞춘다 */
+.form-message > .app-icon {
+  margin-top: var(--space-2);
+}
+
 /* 화면에는 숨기고 스크린리더에는 읽힌다 (안 읽음·준비 중 같은 상태 전달용) */
 .visually-hidden {
   position: absolute;

frontend/src/styles/tokens.css

@@ -148,6 +148,15 @@
   --size-search-clear-height: 2.375rem; /* 38px — 검색 칸(40) 안쪽 높이를 채운다 · 밀도 예외 */
   --size-notice-bar: 2.5rem; /* 40px — "새 메일 N통 · 맨 위로" 줄 높이 · 밀도 예외 */
   --size-checkbox: 1rem; /* 16px — 고르기 상자 */
+  /*
+   * 4단계(계정 · 메일 설정) 밀도 예외 — 클릭 영역 44px 기준의 의도된 예외 (디자인 README "4단계 › 메일함 관리", 사용자 확정 캔버스).
+   *   메일함 행의 ⋯ 단추 32×40(행 높이 --size-row-min — 목록 표의 별 칸과 같은 폭) · ⋯ 메뉴 항목 40(--size-editor-menu-item)
+   */
+  --size-mailbox-more: 2rem; /* 32px — 메일함 행의 ⋯ 단추 폭 · 밀도 예외 */
+  --size-option-input: 1.125rem; /* 18px — 설정 화면의 고르기 상자 · 라디오 (줄 전체가 44px 로 눌린다) */
+  --form-max-width: 26.25rem; /* 420px — 비밀번호 칸 (디자인 원본 SettingsAccount) */
+  --form-wide-max-width: 32.5rem; /* 520px — 자동 응답 제목 칸 (디자인 원본 SettingsVacation) */
+  --note-max-width: 38.75rem; /* 620px — 설정 화면의 안내 상자 */
   --size-rail: 4.5rem; /* 72px — 앱 레일 폭 */
   --size-rail-item: 3.75rem; /* 60px */
   --size-row-min: 2.5rem; /* 40px — 메일함 항목 */