From 907287021f222411b6a4aeee6834c92a07abed40 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Tue, 10 Nov 2026 11:44:42 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=EC=A3=BC=EC=86=8C=EB=A1=9D?=
 =?UTF-8?q?=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20=C2=B7=20=EB=82=B4?=
 =?UTF-8?q?=EB=B3=B4=EB=82=B4=EA=B8=B0=20=C2=B7=20=EC=97=AC=EB=9F=AC=20?=
 =?UTF-8?q?=EC=84=9C=EB=AA=85=EA=B3=BC=20=EC=84=9C=EB=AA=85=20=EB=B0=94?=
 =?UTF-8?q?=EA=BE=B8=EA=B8=B0=20=C2=B7=20=EB=B6=80=EC=9E=AC=EC=A4=91=20?=
 =?UTF-8?q?=EC=84=9C=EC=8B=9D=20=C2=B7=20=ED=9C=B4=EB=8C=80=ED=8F=B0=20?=
 =?UTF-8?q?=EB=B0=94=EA=BE=B8=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

메일 16단계(개인 설정)의 화면이다(보드 Contacts16 · Signature16 · Settings16).
- 주소록: 브라우저가 vCard · CSV · 엑셀(.xlsx)을 읽어 미리 보기(파일은 서버로 가지 않는다 — 새 의존성 없이
  DecompressionStream · DOMParser), 네이버 · Google · Outlook 머리를 알아보고 칸 없는 정보는 메모 끝에,
  묶음(100명 · 값 8,000 · 700KB)으로 넣고 ✕까지 남는 결과 알림의 [되돌리기], 내보내기 창.
- 서명: 왼쪽 목록 · 오른쪽 편집 · 메일에 넣을 서명 둘, 쓰기 화면 [서명 ▾]로 서명 자리만 바꾸기
  (앱과 같은 경계 — 앞 빈 줄을 지켜 임시 저장 · 이어 쓰기에서도 찾는다).
- 부재중: 내용 편집기(서식이 있을 때만 서식 본문) · 회사 밖에서 온 메일 응답 셋 · 미리 보기 전환.
- 2단계 인증: [휴대폰 바꾸기] 두 걸음 창(비밀은 창 안에만).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../contacts/ContactExportDialog.vue          | 368 +++++++++
 .../contacts/ContactImportDialog.vue          | 450 ++++++++++
 .../contacts/ContactImportGroupFields.vue     | 262 ++++++
 .../contacts/ContactImportInfoField.vue       | 129 +++
 .../contacts/ContactImportPicker.vue          | 228 +++++
 .../contacts/ContactImportSummary.vue         | 378 +++++++++
 .../components/contacts/ContactsDialogs.vue   |  13 +-
 .../src/components/contacts/ContactsList.vue  | 136 ++-
 .../src/components/contacts/contacts-ui.ts    |   6 +-
 .../src/components/feedback/ToastHost.vue     |  20 +-
 .../src/components/mail/ComposeFooter.vue     |   3 +
 .../components/mail/ComposeSignatureMenu.vue  | 237 ++++++
 .../src/components/mail/editor/EditorMenu.vue |   7 +
 .../src/components/mail/editor/MailEditor.vue |  45 +-
 .../mail/editor/mail-editor-handle.ts         |  12 +
 .../components/mail/editor/mail-extensions.ts |   3 +
 .../mail/editor/mail-signature-block.spec.ts  | 266 ++++++
 .../mail/editor/mail-signature-block.ts       | 269 ++++++
 .../signature/SignatureDefaultsField.vue      | 155 ++++
 .../signature/SignatureDeleteDialog.vue       |  70 ++
 .../editor/signature/SignatureEditor.spec.ts  |  99 +++
 .../mail/editor/signature/SignatureEditor.vue | 134 ++-
 .../mail/editor/signature/SignatureEmpty.vue  |  94 +++
 .../mail/editor/signature/SignatureForm.vue   | 377 +++++----
 .../mail/editor/signature/SignatureList.vue   | 214 +++++
 .../editor/signature/SignaturePreview.vue     |  16 +-
 .../editor/signature/SignatureSettings.vue    | 328 ++++++++
 .../editor/signature/SignatureToolbar.vue     |  24 +-
 .../editor/signature/signature-extensions.ts  |  15 +-
 .../settings/TwoFactorEnrollmentScan.vue      |  24 +-
 .../settings/TwoFactorReplaceDialog.vue       | 589 +++++++++++++
 .../settings/TwoFactorReplaceSteps.vue        |  90 ++
 .../settings/VacationExternalFields.vue       | 151 ++++
 .../src/components/settings/VacationForm.vue  | 220 ++++-
 .../settings/VacationMessageFields.vue        | 176 +++-
 .../components/settings/VacationPreview.vue   | 138 +++-
 .../src/components/shell/AppShell.spec.ts     |  15 +-
 .../src/composables/useAccountSecurity.ts     |  40 +-
 frontend/src/composables/useContactImport.ts  | 430 ++++++++++
 frontend/src/composables/useContacts.ts       |  64 +-
 .../src/composables/useContactsDialogs.ts     |  11 +
 frontend/src/composables/useMail.ts           |  52 +-
 frontend/src/composables/useMailSignatures.ts | 133 +++
 frontend/src/composables/useToast.ts          |  24 +-
 .../pages/contacts/ContactsTransfer.spec.ts   | 780 ++++++++++++++++++
 .../src/pages/mail/ComposePage.drafts.spec.ts | 316 ++++++-
 frontend/src/pages/mail/ComposePage.vue       | 121 ++-
 frontend/src/pages/mail/MailLayout.vue        |   4 +-
 .../AccountTwoFactorPage.replace.spec.ts      | 618 ++++++++++++++
 .../settings/AccountTwoFactorPage.spec.ts     |  19 +-
 .../pages/settings/AccountTwoFactorPage.vue   |  94 ++-
 .../pages/settings/MailSignaturePage.spec.ts  | 682 ++++++++++-----
 .../src/pages/settings/MailSignaturePage.vue  |  24 +-
 .../pages/settings/MailVacationPage.spec.ts   | 554 ++++++++++++-
 .../src/pages/settings/MailVacationPage.vue   |  27 +-
 .../src/shared/constants/account-security.ts  |  46 +-
 frontend/src/shared/constants/contacts.ts     | 203 ++++-
 frontend/src/shared/constants/icons.ts        |   6 +
 .../src/shared/constants/mail-signature.ts    | 119 ++-
 .../src/shared/constants/mail-vacation.ts     |  53 +-
 .../shared/constants/session-restriction.ts   |   7 +-
 frontend/src/shared/types/account-security.ts |  19 +
 frontend/src/shared/types/contacts.ts         |  54 +-
 frontend/src/shared/types/mail-signature.ts   |  42 +
 frontend/src/shared/types/mail.ts             |  53 +-
 .../utils/contact-import/batches.spec.ts      |  97 +++
 .../shared/utils/contact-import/batches.ts    |  79 ++
 .../shared/utils/contact-import/csv.spec.ts   |  77 ++
 .../src/shared/utils/contact-import/csv.ts    |  92 +++
 .../utils/contact-import/read-file.spec.ts    |  95 +++
 .../shared/utils/contact-import/read-file.ts  |  99 +++
 .../utils/contact-import/records.spec.ts      | 341 ++++++++
 .../shared/utils/contact-import/records.ts    | 508 ++++++++++++
 .../shared/utils/contact-import/table.spec.ts | 290 +++++++
 .../src/shared/utils/contact-import/table.ts  | 406 +++++++++
 .../src/shared/utils/contact-import/text.ts   |  43 +
 .../src/shared/utils/contact-import/types.ts  |  71 ++
 .../utils/contact-import/values.spec.ts       | 147 ++++
 .../src/shared/utils/contact-import/values.ts | 216 +++++
 .../shared/utils/contact-import/vcard.spec.ts | 233 ++++++
 .../src/shared/utils/contact-import/vcard.ts  | 430 ++++++++++
 .../shared/utils/contact-import/xlsx.spec.ts  | 107 +++
 .../src/shared/utils/contact-import/xlsx.ts   | 185 +++++
 .../src/shared/utils/contact-import/zip.ts    | 167 ++++
 frontend/src/shared/utils/mail-forward.ts     |   6 +-
 frontend/src/shared/utils/mail-quote.ts       |  11 +-
 frontend/src/shared/utils/mail-reply.ts       |   6 +-
 .../src/shared/utils/mail-signature.spec.ts   |  88 +-
 frontend/src/shared/utils/mail-signature.ts   |  79 +-
 .../src/shared/utils/mail-vacation.spec.ts    | 239 +++++-
 frontend/src/shared/utils/mail-vacation.ts    | 224 ++++-
 .../src/stores/contact-import.store.spec.ts   |  71 ++
 frontend/src/stores/contact-import.store.ts   |  38 +
 frontend/src/stores/contacts.store.ts         |  13 +
 .../src/stores/mail-signature.store.spec.ts   | 233 +++++-
 frontend/src/stores/mail-signature.store.ts   | 271 +++++-
 .../src/stores/mail-vacation.store.spec.ts    |  39 +-
 frontend/src/stores/mail-vacation.store.ts    |   2 +-
 frontend/src/stores/toast.store.spec.ts       |  63 ++
 frontend/src/stores/toast.store.ts            |  32 +-
 frontend/src/test-utils/euc-kr.ts             |  35 +
 frontend/src/test-utils/zip.ts                | 173 ++++
 102 files changed, 14738 insertions(+), 924 deletions(-)
 create mode 100644 frontend/src/components/contacts/ContactExportDialog.vue
 create mode 100644 frontend/src/components/contacts/ContactImportDialog.vue
 create mode 100644 frontend/src/components/contacts/ContactImportGroupFields.vue
 create mode 100644 frontend/src/components/contacts/ContactImportInfoField.vue
 create mode 100644 frontend/src/components/contacts/ContactImportPicker.vue
 create mode 100644 frontend/src/components/contacts/ContactImportSummary.vue
 create mode 100644 frontend/src/components/mail/ComposeSignatureMenu.vue
 create mode 100644 frontend/src/components/mail/editor/mail-signature-block.spec.ts
 create mode 100644 frontend/src/components/mail/editor/mail-signature-block.ts
 create mode 100644 frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue
 create mode 100644 frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue
 create mode 100644 frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts
 create mode 100644 frontend/src/components/mail/editor/signature/SignatureEmpty.vue
 create mode 100644 frontend/src/components/mail/editor/signature/SignatureList.vue
 create mode 100644 frontend/src/components/mail/editor/signature/SignatureSettings.vue
 create mode 100644 frontend/src/components/settings/TwoFactorReplaceDialog.vue
 create mode 100644 frontend/src/components/settings/TwoFactorReplaceSteps.vue
 create mode 100644 frontend/src/components/settings/VacationExternalFields.vue
 create mode 100644 frontend/src/composables/useContactImport.ts
 create mode 100644 frontend/src/composables/useMailSignatures.ts
 create mode 100644 frontend/src/pages/contacts/ContactsTransfer.spec.ts
 create mode 100644 frontend/src/pages/settings/AccountTwoFactorPage.replace.spec.ts
 create mode 100644 frontend/src/shared/types/mail-signature.ts
 create mode 100644 frontend/src/shared/utils/contact-import/batches.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/batches.ts
 create mode 100644 frontend/src/shared/utils/contact-import/csv.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/csv.ts
 create mode 100644 frontend/src/shared/utils/contact-import/read-file.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/read-file.ts
 create mode 100644 frontend/src/shared/utils/contact-import/records.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/records.ts
 create mode 100644 frontend/src/shared/utils/contact-import/table.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/table.ts
 create mode 100644 frontend/src/shared/utils/contact-import/text.ts
 create mode 100644 frontend/src/shared/utils/contact-import/types.ts
 create mode 100644 frontend/src/shared/utils/contact-import/values.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/values.ts
 create mode 100644 frontend/src/shared/utils/contact-import/vcard.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/vcard.ts
 create mode 100644 frontend/src/shared/utils/contact-import/xlsx.spec.ts
 create mode 100644 frontend/src/shared/utils/contact-import/xlsx.ts
 create mode 100644 frontend/src/shared/utils/contact-import/zip.ts
 create mode 100644 frontend/src/stores/contact-import.store.spec.ts
 create mode 100644 frontend/src/stores/contact-import.store.ts
 create mode 100644 frontend/src/test-utils/euc-kr.ts
 create mode 100644 frontend/src/test-utils/zip.ts

diff --git a/frontend/src/components/contacts/ContactExportDialog.vue b/frontend/src/components/contacts/ContactExportDialog.vue
new file mode 100644
index 0000000..9533678
--- /dev/null
+++ b/frontend/src/components/contacts/ContactExportDialog.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+// 연락처 내보내기 창 (디자인 원본 Contacts16 "5" — 칸 하나 창 400, 새 그룹 창과 같은 폭)
+// 「내보낼 연락처」 내 주소록 전체(처음 — "연락처 342명") · 그룹 하나(고르면 그룹 고르기 칸 44 — 첫 그룹이 골라진다, "거래처 · 24명") +
+// "내 주소록의 연락처만 내보내고 사내 목록은 넣지 않습니다." → 「파일 형식」 vCard (.vcf)(처음) · CSV (.csv) → 파일 이름 → [내보내기] [취소]
+// - 파일 이름은 주소록-날짜, 그룹이면 주소록-그룹 이름-날짜. 날짜는 이 PC 의 날짜이고 파일 이름에 쓸 수 없는 글자는 _ 로 (서버가 붙이는 이름과 같은 꼴)
+// - 구성원이 없는 그룹을 고르면 [내보내기]를 끄고(aria-disabled) 까닭을 그룹 칸 아래에 — 다른 그룹을 고르면 바로 돌아온다
+// - 그룹이 하나도 없으면 「그룹 하나」를 고를 수 없다(disabled)
+// [내보내기]: 창을 닫고 바로 내려받는다 — 첨부 받기처럼 이동 직전에 로그인을 확인하고(confirmSession), 파일은 서버가 만든다. 따로 알림은 띄우지 않는다
+// 고정 id — #contact-export-dialog · #contact-export-title · #contact-export-empty
+import { computed, ref, watch } from 'vue'
+
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import { useClock } from '@/composables/useClock'
+import { useContacts } from '@/composables/useContacts'
+import { CONTACT_EXPORT_EXTENSIONS, CONTACT_EXPORT_TEXT } from '@/shared/constants/contacts'
+import type { ContactExportFormat } from '@/shared/types/contacts'
+import { formatCount, formatDate } from '@/shared/utils/format'
+import { useContactsStore } from '@/stores/contacts.store'
+
+interface Props {
+  open: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const contactsStore = useContactsStore()
+const contactsApi = useContacts()
+const clock = useClock()
+
+const EMPTY_ID = 'contact-export-empty'
+/** 파일 이름에 쓸 수 없는 글자 (Windows · macOS 공통) */
+const UNSAFE_FILE_CHARS = /[\\/:*?"<>|\u0000-\u001f\u007f]/g
+
+const scope = ref<'all' | 'group'>('all')
+const groupId = ref<string>('')
+const format = ref<ContactExportFormat>('vcard')
+
+const groups = computed(() => contactsStore.groups)
+const group = computed(() => groups.value.find((item) => item.id === groupId.value) ?? null)
+const allHint = computed(() => {
+  const total = contactsStore.contactTotal
+  return total === null ? '' : CONTACT_EXPORT_TEXT.allCount(formatCount(total))
+})
+/** 고른 그룹에 구성원이 없다 — [내보내기]를 끈다 */
+const groupEmpty = computed(() => scope.value === 'group' && group.value !== null && group.value.memberCount <= 0)
+const unavailable = computed(() => groupEmpty.value || (scope.value === 'group' && group.value === null))
+const fileName = computed(() => {
+  const date = formatDate(new Date(clock.now()))
+  const extension = CONTACT_EXPORT_EXTENSIONS[format.value]
+  const parts =
+    scope.value === 'group' && group.value
+      ? [CONTACT_EXPORT_TEXT.fileBase, group.value.name.replace(UNSAFE_FILE_CHARS, '_'), date]
+      : [CONTACT_EXPORT_TEXT.fileBase, date]
+  return `${parts.join('-')}.${extension}`
+})
+
+const scopes = computed(() => [
+  { value: 'all' as const, label: CONTACT_EXPORT_TEXT.all, hint: allHint.value, disabled: false },
+  { value: 'group' as const, label: CONTACT_EXPORT_TEXT.group, hint: CONTACT_EXPORT_TEXT.groupHint, disabled: groups.value.length === 0 },
+])
+const formats = [
+  { value: 'vcard' as const, label: CONTACT_EXPORT_TEXT.vcard, hint: CONTACT_EXPORT_TEXT.vcardHint },
+  { value: 'csv' as const, label: CONTACT_EXPORT_TEXT.csv, hint: CONTACT_EXPORT_TEXT.csvHint },
+]
+
+function chooseScope(value: 'all' | 'group') {
+  scope.value = value
+  if (value === 'group' && !group.value) groupId.value = groups.value[0]?.id ?? ''
+}
+
+function submit() {
+  if (unavailable.value) return
+  const query = scope.value === 'group' && group.value ? { format: format.value, groupId: group.value.id } : { format: format.value }
+  emit('close')
+  void contactsApi.downloadContactExport(query)
+}
+
+// 열 때마다 처음 값 — 내 주소록 전체 · vCard
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return
+    scope.value = 'all'
+    groupId.value = ''
+    format.value = 'vcard'
+    contactsStore.ensureGroups()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <ModalDialog
+    id="contact-export-dialog"
+    :open="open"
+    :title="CONTACT_EXPORT_TEXT.title"
+    title-id="contact-export-title"
+    medium
+    data-contact-export
+    @cancel="emit('close')"
+  >
+    <fieldset class="export-dialog__fieldset">
+      <legend class="export-dialog__legend">
+        {{ CONTACT_EXPORT_TEXT.scopeLegend }}
+      </legend>
+      <div
+        v-for="item in scopes"
+        :key="item.value"
+        :class="['export-dialog__card', { 'is-checked': scope === item.value, 'is-disabled': item.disabled }]"
+      >
+        <label class="export-dialog__option">
+          <input
+            type="radio"
+            name="contact-export-scope"
+            class="export-dialog__radio"
+            :value="item.value"
+            :checked="scope === item.value"
+            :disabled="item.disabled"
+            :data-export-scope="item.value"
+            @change="chooseScope(item.value)"
+          >
+          <span class="export-dialog__text">
+            <span class="export-dialog__label">{{ item.label }}</span>
+            <span
+              v-if="item.hint"
+              class="export-dialog__hint"
+            >{{ item.hint }}</span>
+          </span>
+        </label>
+        <template v-if="item.value === 'group' && scope === 'group'">
+          <select
+            class="export-dialog__select"
+            :aria-label="CONTACT_EXPORT_TEXT.groupSelect"
+            :aria-describedby="groupEmpty ? EMPTY_ID : undefined"
+            :value="groupId"
+            data-export-group
+            @change="groupId = ($event.target as HTMLSelectElement).value"
+          >
+            <option
+              v-for="option in groups"
+              :key="option.id"
+              :value="option.id"
+            >
+              {{ CONTACT_EXPORT_TEXT.groupOption(option.name, formatCount(option.memberCount)) }}
+            </option>
+          </select>
+          <p
+            v-if="groupEmpty && group"
+            :id="EMPTY_ID"
+            role="status"
+            class="export-dialog__empty"
+          >
+            {{ CONTACT_EXPORT_TEXT.groupEmpty(group.name) }}
+          </p>
+        </template>
+      </div>
+      <p class="export-dialog__note">
+        {{ CONTACT_EXPORT_TEXT.directoryNote }}
+      </p>
+    </fieldset>
+
+    <fieldset class="export-dialog__fieldset export-dialog__fieldset--format">
+      <legend class="export-dialog__legend">
+        {{ CONTACT_EXPORT_TEXT.formatLegend }}
+      </legend>
+      <label
+        v-for="item in formats"
+        :key="item.value"
+        :class="['export-dialog__card', 'export-dialog__option', { 'is-checked': format === item.value }]"
+      >
+        <input
+          type="radio"
+          name="contact-export-format"
+          class="export-dialog__radio"
+          :value="item.value"
+          :checked="format === item.value"
+          :data-export-format="item.value"
+          @change="format = item.value"
+        >
+        <span class="export-dialog__text">
+          <span class="export-dialog__label">{{ item.label }}</span>
+          <span class="export-dialog__hint">{{ item.hint }}</span>
+        </span>
+      </label>
+    </fieldset>
+
+    <p
+      v-if="!unavailable"
+      class="export-dialog__file"
+    >
+      <span class="export-dialog__file-label">{{ CONTACT_EXPORT_TEXT.fileName }}</span>
+      <span
+        class="export-dialog__file-name"
+        data-export-file-name
+      >{{ fileName }}</span>
+    </p>
+
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action export-dialog__submit"
+        :aria-disabled="unavailable ? 'true' : undefined"
+        :aria-describedby="groupEmpty ? EMPTY_ID : undefined"
+        autofocus
+        data-export-submit
+        @click="submit"
+      >
+        {{ CONTACT_EXPORT_TEXT.submit }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        data-export-cancel
+        @click="emit('close')"
+      >
+        {{ CONTACT_EXPORT_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+.export-dialog__fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+  margin: var(--space-4) 0 0;
+  padding: 0;
+  border: 0;
+}
+
+.export-dialog__fieldset--format {
+  margin-top: var(--space-8);
+}
+
+.export-dialog__legend {
+  margin: 0 0 var(--space-4);
+  padding: 0;
+  font-size: var(--font-size-label);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+/* 고르기 상자 — 테두리 상자, 고른 상자는 청록 테두리 + 옅은 바탕 (차단 창과 같은 결) */
+.export-dialog__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  min-height: var(--size-touch);
+  padding: var(--space-10);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.export-dialog__card.is-checked {
+  border-color: var(--color-brand);
+  background: var(--color-brand-tint);
+}
+
+.export-dialog__card.is-disabled {
+  color: var(--color-icon-muted);
+}
+
+.export-dialog__option {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--space-10);
+  cursor: pointer;
+}
+
+.export-dialog__card.is-disabled .export-dialog__option {
+  cursor: default;
+}
+
+.export-dialog__radio {
+  flex: 0 0 auto;
+  width: var(--size-option-input);
+  height: var(--size-option-input);
+  margin: var(--space-1) 0 0;
+  accent-color: var(--color-brand);
+}
+
+.export-dialog__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: var(--line-height-heading);
+}
+
+.export-dialog__label {
+  font-weight: 600;
+}
+
+.export-dialog__hint {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+.export-dialog__card.is-disabled .export-dialog__hint {
+  color: var(--color-icon-muted);
+}
+
+/* 그룹 고르기 칸 44 — 고르기 글 선(28)에 맞춰 들여 쓴다 */
+.export-dialog__select {
+  width: calc(100% - var(--space-28));
+  height: var(--size-touch);
+  margin-left: var(--space-28);
+  padding: 0 var(--space-10);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.export-dialog__select:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 var(--border-width) var(--color-brand);
+}
+
+.export-dialog__empty {
+  margin: 0 0 0 var(--space-28);
+  font-size: var(--font-size-label);
+  color: var(--color-warning-text);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.export-dialog__note {
+  margin: var(--space-2) 0 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.export-dialog__file {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-8);
+  margin: var(--space-6) 0 0;
+  font-size: var(--font-size-label);
+}
+
+.export-dialog__file-label {
+  color: var(--color-text-muted);
+}
+
+.export-dialog__file-name {
+  font-weight: 600;
+  color: var(--color-text-strong);
+  overflow-wrap: anywhere;
+}
+
+/* 누를 수 없는 [내보내기] — 끄지 않고 흐리게 (초점은 받는다) */
+.modal-dialog__action.export-dialog__submit[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/components/contacts/ContactImportDialog.vue b/frontend/src/components/contacts/ContactImportDialog.vue
new file mode 100644
index 0000000..73041df
--- /dev/null
+++ b/frontend/src/components/contacts/ContactImportDialog.vue
@@ -0,0 +1,450 @@
+<script setup lang="ts">
+// 연락처 가져오기 창 (디자인 원본 Contacts16 "2" · "3" — 넓은 창 620, 필터 창 · 연락처 창과 같은 틀)
+// ① 파일 고르기(ContactImportPicker): [파일 고르기]는 .vcf · .csv · .xlsx 만 보이게 걸러 둔 파일 고르는 창, 창 어디에 끌어다 놓아도 받는다
+//    (끄는 동안 놓는 자리가 청록 점선). 파일은 이 브라우저에서 읽고 회사 서버로 올리지 않는다(useContactImport 의 read).
+//    읽지 못하면 자리 아래 빨간 글(알림 없음) — 다른 파일을 고르거나 놓으면 지운다. 읽는 동안 [취소]는 읽기를 멈추고 창을 닫는다
+// ② 미리 보기: 파일 이름 + [다른 파일 고르기](파일 고르는 창을 바로 연다 — 고른 그룹과 체크 칸은 그대로) · "연락처 340명을 찾았습니다." ·
+//    세 묶음(ContactImportSummary) · 그룹(ContactImportGroupFields) · 메모 체크 칸(ContactImportInfoField — 칸이 없는 정보가 있을 때만) ·
+//    한도 안내(노란 상자) · [연락처 N명 넣기](처음 초점) [취소]. 넣을 연락처가 없으면 단추를 끄고(aria-disabled) 까닭을 단추 옆에.
+//    창이 화면보다 길면 창 안이 스크롤하고 단추 줄은 고정하지 않는다(필터 창과 같다)
+// [연락처 N명 넣기]: 새 그룹 이름을 비웠으면 칸 아래 "그룹 이름을 넣어 주세요." — 아니면 창을 닫고 넣기를 시작한다(진행 알림 — useContactImport 의 start)
+// Esc · [취소]는 묻지 않고 닫는다(아직 아무것도 넣지 않았다)
+// 고정 id — #contact-import-dialog · #contact-import-title · #contact-import-message · #contact-import-found · #contact-import-nothing
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import ContactImportGroupFields from '@/components/contacts/ContactImportGroupFields.vue'
+import ContactImportInfoField from '@/components/contacts/ContactImportInfoField.vue'
+import ContactImportPicker from '@/components/contacts/ContactImportPicker.vue'
+import ContactImportSummary from '@/components/contacts/ContactImportSummary.vue'
+import type { ImportGroupMode } from '@/components/contacts/contacts-ui'
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import { useContactImport } from '@/composables/useContactImport'
+import {
+  CONTACT_IMPORT_ACCEPT,
+  CONTACT_IMPORT_ERROR_TEXT,
+  CONTACT_IMPORT_TEXT,
+  CONTACTS_PANEL_TEXT,
+} from '@/shared/constants/contacts'
+import {
+  extraGroupName,
+  fileGroupsOf,
+  fileGroupsText,
+  hasImportedInfo,
+  importPlanOf,
+  infoSampleOf,
+  type ImportExtraGroup,
+  type ImportPreview,
+} from '@/shared/utils/contact-import/records'
+import type { ContactFileProblem, ImportedFileKind } from '@/shared/utils/contact-import/types'
+import { isFileDrag } from '@/shared/utils/editor-files'
+import { formatCount } from '@/shared/utils/format'
+import { useContactsStore } from '@/stores/contacts.store'
+
+interface Props {
+  open: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const contactsStore = useContactsStore()
+const importer = useContactImport()
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const pickerRef = ref<InstanceType<typeof ContactImportPicker> | null>(null)
+const groupFieldsRef = ref<InstanceType<typeof ContactImportGroupFields> | null>(null)
+const submitRef = ref<HTMLButtonElement | null>(null)
+
+const step = ref<'pick' | 'reading' | 'preview'>('pick')
+const error = ref<string | null>(null)
+const fileName = ref<string>('')
+/** 파일을 끌어 창 위에 있는 동안 — 들어온 요소 수 (자식 사이를 지날 때 깜빡이지 않게) */
+const dragDepth = ref<number>(0)
+const preview = shallowRef<ImportPreview | null>(null)
+const groupMode = ref<ImportGroupMode>('none')
+const existingGroupId = ref<string>('')
+const newGroupName = ref<string>('')
+const newGroupError = ref<string | null>(null)
+const appendInfo = ref<boolean>(true)
+/** 지금 읽는 파일 — 끊으면(창을 닫음 · 다른 파일) 그 결과는 버린다 */
+let reading: AbortController | null = null
+
+const dragging = computed(() => dragDepth.value > 0)
+const groups = computed(() => contactsStore.groups)
+const insertCount = computed(() => preview.value?.toInsert.length ?? 0)
+const foundText = computed(() => CONTACT_IMPORT_TEXT.found(formatCount(preview.value?.found ?? 0)))
+const groupsText = computed(() =>
+  preview.value ? fileGroupsText(fileGroupsOf(preview.value.toInsert, groups.value)) : '',
+)
+const showInfo = computed(() => preview.value !== null && hasImportedInfo(preview.value.toInsert))
+const infoSample = computed(() => (preview.value ? infoSampleOf(preview.value.toInsert) : null))
+/** 한도 안내 — 남은 자리가 하나도 없으면(주소록이 가득 참) 패널의 3,000개 안내 */
+const limitText = computed(() => {
+  const overLimit = preview.value?.overLimit ?? 0
+  if (overLimit <= 0) return null
+  if (insertCount.value === 0) return CONTACTS_PANEL_TEXT.fullNote
+  return CONTACT_IMPORT_TEXT.limit(formatCount(insertCount.value), formatCount(overLimit))
+})
+const submitLabel = computed(() =>
+  insertCount.value > 0 ? CONTACT_IMPORT_TEXT.submit(formatCount(insertCount.value)) : CONTACT_IMPORT_TEXT.submitNone,
+)
+
+function problemText(problem: ContactFileProblem, kind: ImportedFileKind | null): string {
+  if (problem === 'notFound' && kind === 'vcard') return CONTACT_IMPORT_ERROR_TEXT.notFoundCards
+  return CONTACT_IMPORT_ERROR_TEXT[problem]
+}
+
+function stopReading() {
+  reading?.abort()
+  reading = null
+}
+
+function close() {
+  stopReading()
+  dragDepth.value = 0
+  emit('close')
+}
+
+function openPicker() {
+  fileInputRef.value?.click()
+}
+
+async function readFile(file: File) {
+  stopReading()
+  const current = new AbortController()
+  reading = current
+  step.value = 'reading'
+  fileName.value = file.name
+  error.value = null
+  const outcome = await importer.read(file, current.signal)
+  if (reading !== current || current.signal.aborted || outcome.status === 'canceled') return
+  reading = null
+  if (outcome.status === 'ready') {
+    preview.value = outcome.preview
+    step.value = 'preview'
+    await nextTick()
+    submitRef.value?.focus()
+    return
+  }
+  preview.value = null
+  step.value = 'pick'
+  // 서버에 묻지 못했으면(error) 인터셉터가 사전 문구로 알렸다 — 칸 아래에는 쓰지 않는다
+  error.value = outcome.status === 'failed' ? problemText(outcome.problem, outcome.kind) : null
+  await nextTick()
+  pickerRef.value?.focusPick()
+}
+
+/** 고르거나 놓은 파일 — 하나만 받는다 */
+function takeFiles(files: readonly File[]) {
+  const [file] = files
+  if (!file) return
+  if (files.length > 1) {
+    stopReading()
+    preview.value = null
+    step.value = 'pick'
+    error.value = CONTACT_IMPORT_ERROR_TEXT.multiple
+    void nextTick(() => pickerRef.value?.focusPick())
+    return
+  }
+  void readFile(file)
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  // 같은 파일을 다시 골라도 change 가 오게 비운다
+  input.value = ''
+  takeFiles(files)
+}
+
+function onDragEnter(event: DragEvent) {
+  if (!isFileDrag(event)) return
+  event.preventDefault()
+  dragDepth.value += 1
+}
+
+function onDragOver(event: DragEvent) {
+  if (!isFileDrag(event)) return
+  event.preventDefault()
+  if (event.dataTransfer) event.dataTransfer.dropEffect = step.value === 'reading' ? 'none' : 'copy'
+}
+
+function onDragLeave(event: DragEvent) {
+  if (!isFileDrag(event)) return
+  dragDepth.value = Math.max(0, dragDepth.value - 1)
+}
+
+/** 창 어디에 놓아도 받는다 — 읽는 동안은 받지 않는다(브라우저가 파일을 열지 않게 막기만) */
+function onDrop(event: DragEvent) {
+  dragDepth.value = 0
+  if (!isFileDrag(event)) return
+  event.preventDefault()
+  if (step.value === 'reading') return
+  takeFiles(Array.from(event.dataTransfer?.files ?? []))
+}
+
+function extraGroup(): ImportExtraGroup | null {
+  if (groupMode.value === 'existing' && existingGroupId.value) return { kind: 'existing', id: existingGroupId.value }
+  if (groupMode.value !== 'new') return { kind: 'none' }
+  const name = extraGroupName(newGroupName.value)
+  return name ? { kind: 'new', name } : null
+}
+
+function submit() {
+  const current = preview.value
+  if (!current || insertCount.value === 0) return
+  const extra = extraGroup()
+  if (!extra) {
+    newGroupError.value = CONTACT_IMPORT_TEXT.extraNameRequired
+    void nextTick(() => groupFieldsRef.value?.focusNewName())
+    return
+  }
+  const plan = importPlanOf(current, groups.value, extra, appendInfo.value && showInfo.value)
+  emit('close')
+  void importer.start(plan)
+}
+
+function resetForm() {
+  stopReading()
+  step.value = 'pick'
+  error.value = null
+  fileName.value = ''
+  dragDepth.value = 0
+  preview.value = null
+  groupMode.value = 'none'
+  existingGroupId.value = ''
+  newGroupName.value = ''
+  newGroupError.value = null
+  appendInfo.value = true
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      resetForm()
+      contactsStore.ensureGroups()
+    } else {
+      stopReading()
+    }
+  },
+  { immediate: true },
+)
+
+watch([newGroupName, groupMode], () => {
+  newGroupError.value = null
+})
+
+onBeforeUnmount(stopReading)
+</script>
+
+<template>
+  <ModalDialog
+    id="contact-import-dialog"
+    :open="open"
+    :title="CONTACT_IMPORT_TEXT.title"
+    :message="step === 'preview' ? '' : CONTACT_IMPORT_TEXT.message"
+    title-id="contact-import-title"
+    message-id="contact-import-message"
+    :described-by="step === 'preview' ? 'contact-import-found' : undefined"
+    wide
+    data-contact-import
+    @cancel="close"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <ContactImportPicker
+      v-if="step !== 'preview' || !preview"
+      ref="pickerRef"
+      :reading="step === 'reading'"
+      :dragging="dragging"
+      :file-name="fileName"
+      :error="error"
+      @pick="openPicker"
+    />
+    <template v-else>
+      <div class="import-dialog__file">
+        <AppIcon
+          name="file-text"
+          :size="16"
+          class="import-dialog__file-icon"
+        />
+        <span
+          class="import-dialog__file-name"
+          data-import-file-name
+        >{{ fileName }}</span>
+        <button
+          type="button"
+          class="import-dialog__text-button"
+          data-import-pick-another
+          @click="openPicker"
+        >
+          {{ CONTACT_IMPORT_TEXT.pickAnother }}
+        </button>
+      </div>
+      <p
+        id="contact-import-found"
+        class="import-dialog__found"
+        data-import-found
+      >
+        {{ foundText }}
+      </p>
+      <ContactImportSummary :preview="preview" />
+      <template v-if="insertCount > 0">
+        <ContactImportGroupFields
+          ref="groupFieldsRef"
+          v-model:mode="groupMode"
+          v-model:existing-id="existingGroupId"
+          v-model:new-name="newGroupName"
+          :groups-text="groupsText"
+          :new-name-error="newGroupError"
+          :groups="groups"
+          :groups-full="contactsStore.isGroupsFull"
+        />
+        <ContactImportInfoField
+          v-if="showInfo"
+          v-model="appendInfo"
+          :sample="infoSample"
+        />
+      </template>
+      <p
+        v-if="limitText"
+        role="status"
+        class="import-dialog__limit"
+        data-import-limit
+      >
+        <AppIcon
+          name="alert-triangle"
+          :size="15"
+          :stroke-width="1.9"
+          class="import-dialog__limit-icon"
+        />
+        <span>{{ limitText }}</span>
+      </p>
+    </template>
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="visually-hidden"
+      :accept="CONTACT_IMPORT_ACCEPT"
+      tabindex="-1"
+      aria-hidden="true"
+      data-import-file
+      @change="onFileChange"
+    >
+    <template #actions>
+      <span
+        v-if="step === 'preview' && preview && insertCount === 0"
+        id="contact-import-nothing"
+        role="status"
+        class="import-dialog__nothing"
+      >{{ CONTACT_IMPORT_TEXT.nothing }}</span>
+      <button
+        v-if="step === 'preview' && preview"
+        ref="submitRef"
+        type="button"
+        class="modal-dialog__action import-dialog__submit"
+        :aria-disabled="insertCount === 0 ? 'true' : undefined"
+        :aria-describedby="insertCount === 0 ? 'contact-import-nothing' : undefined"
+        data-import-submit
+        @click="submit"
+      >
+        {{ submitLabel }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        data-import-cancel
+        @click="close"
+      >
+        {{ CONTACT_IMPORT_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+/* 파일 줄 — 아이콘 · 이름(줄임) · [다른 파일 고르기] (위 글과 붙여 둔다) */
+.import-dialog__file {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-width: 0;
+  margin-top: calc(var(--space-4) * -1);
+}
+
+.import-dialog__file-icon {
+  color: var(--color-text-muted);
+}
+
+.import-dialog__file-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-strong);
+}
+
+.import-dialog__text-button {
+  flex: 0 0 auto;
+  min-height: var(--size-touch);
+  padding: 0 var(--space-10);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-brand);
+  font-weight: 600;
+}
+
+.import-dialog__text-button:hover {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand-strong);
+}
+
+.import-dialog__found {
+  margin: calc(var(--space-6) * -1) 0 var(--space-4);
+  font-size: var(--font-size-body);
+  font-weight: 600;
+}
+
+/* 한도 안내 — 노란 상자 12.5 */
+.import-dialog__limit {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-8);
+  margin: var(--space-6) 0 0;
+  padding: var(--space-10) var(--space-12);
+  border-radius: var(--radius-md);
+  background: var(--color-warning-surface);
+  color: var(--color-warning-text);
+  font-size: var(--font-size-label);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.import-dialog__limit-icon {
+  margin-top: var(--space-2);
+}
+
+/* 넣을 연락처가 없을 때 — 단추 옆(왼쪽)의 까닭 */
+.import-dialog__nothing {
+  align-self: center;
+  margin-right: auto;
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+/* 누를 수 없는 [연락처 넣기] — 끄지 않고 흐리게 (초점은 받는다) */
+.modal-dialog__action.import-dialog__submit[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/components/contacts/ContactImportGroupFields.vue b/frontend/src/components/contacts/ContactImportGroupFields.vue
new file mode 100644
index 0000000..4930ddb
--- /dev/null
+++ b/frontend/src/components/contacts/ContactImportGroupFields.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+// 가져오기 창 ② 의 그룹 (디자인 원본 Contacts16 "3")
+// - 파일에 적힌 그룹 글: "파일에 적힌 그룹 4개 가운데 거래처, 세무는 이미 있는 그룹에 넣고 동호회, 학교는 새로 만듭니다." (records.ts 의 fileGroupsText)
+// - 「가져온 연락처를 모두 넣을 그룹」: 넣지 않음(처음) · 이미 있는 그룹(고르기 칸 44 — "거래처 · 4명") · 새 그룹(이름 칸 44 · 50자)
+//   그룹이 100개면 「새 그룹」을 끄고(aria-disabled — 초점은 받는다) 아래에 "그룹은 100개까지 만들 수 있습니다.", 그룹이 하나도 없으면 「이미 있는 그룹」을 끈다
+//   새 그룹 이름을 비운 채 넣으려 하면 칸 아래 "그룹 이름을 넣어 주세요."(창이 정한다). 새 그룹 이름이 이미 있는 그룹과 같으면 그 그룹에 넣는다
+import { computed, nextTick, ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import type { ImportGroupMode } from '@/components/contacts/contacts-ui'
+import {
+  CONTACT_GROUP_NAME_MAX_LENGTH,
+  CONTACT_IMPORT_TEXT,
+  CONTACTS_PANEL_TEXT,
+} from '@/shared/constants/contacts'
+import type { ContactGroup } from '@/shared/types/contacts'
+import { formatCount } from '@/shared/utils/format'
+
+interface Props {
+  groupsText: string
+  mode: ImportGroupMode
+  existingId: string
+  newName: string
+  newNameError: string | null
+  groups: readonly ContactGroup[]
+  groupsFull: boolean
+}
+
+interface Emits {
+  (e: 'update:mode', value: ImportGroupMode): void
+  (e: 'update:existingId', value: string): void
+  (e: 'update:newName', value: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const NEW_NOTE_ID = 'contact-import-new-group-note'
+const NEW_ERROR_ID = 'contact-import-new-group-error'
+
+const nameRef = ref<HTMLInputElement | null>(null)
+
+const modes = computed(() => [
+  { value: 'none' as const, label: CONTACT_IMPORT_TEXT.extraNone, unavailable: false },
+  { value: 'existing' as const, label: CONTACT_IMPORT_TEXT.extraExisting, unavailable: props.groups.length === 0 },
+  { value: 'new' as const, label: CONTACT_IMPORT_TEXT.extraNew, unavailable: props.groupsFull },
+])
+
+/** 고를 수 없는 줄은 눌러도 바꾸지 않는다 (aria-disabled — 화살표로 와도 앞 고르기가 남는다) */
+function onModeClick(event: MouseEvent, unavailable: boolean) {
+  if (unavailable) event.preventDefault()
+}
+
+function onModeChange(value: ImportGroupMode) {
+  emit('update:mode', value)
+  if (value === 'existing' && !props.groups.some((group) => group.id === props.existingId)) {
+    emit('update:existingId', props.groups[0]?.id ?? '')
+  }
+  if (value === 'new') void nextTick(() => nameRef.value?.focus())
+}
+
+defineExpose({
+  focusNewName: () => nameRef.value?.focus(),
+})
+</script>
+
+<template>
+  <div class="import-groups">
+    <div class="import-groups__file">
+      <p class="import-groups__label">
+        {{ CONTACT_IMPORT_TEXT.groupsLabel }}
+      </p>
+      <p
+        class="import-groups__text"
+        data-import-groups-text
+      >
+        {{ groupsText }}
+      </p>
+    </div>
+
+    <fieldset class="import-groups__fieldset">
+      <legend class="import-groups__label">
+        {{ CONTACT_IMPORT_TEXT.extraLegend }}
+      </legend>
+      <div class="import-groups__modes">
+        <label
+          v-for="item in modes"
+          :key="item.value"
+          :class="['import-groups__mode', { 'is-unavailable': item.unavailable }]"
+        >
+          <input
+            type="radio"
+            name="contact-import-group-mode"
+            class="import-groups__radio"
+            :value="item.value"
+            :checked="mode === item.value"
+            :aria-disabled="item.unavailable ? 'true' : undefined"
+            :aria-describedby="item.value === 'new' && item.unavailable ? NEW_NOTE_ID : undefined"
+            :data-import-group-mode="item.value"
+            @click="onModeClick($event, item.unavailable)"
+            @change="onModeChange(item.value)"
+          >
+          <span>{{ item.label }}</span>
+        </label>
+      </div>
+      <p
+        v-if="groupsFull"
+        :id="NEW_NOTE_ID"
+        class="import-groups__note"
+      >
+        {{ CONTACTS_PANEL_TEXT.groupsFullNote }}
+      </p>
+      <select
+        v-if="mode === 'existing'"
+        class="import-groups__control"
+        :aria-label="CONTACT_IMPORT_TEXT.extraLegend"
+        :value="existingId"
+        data-import-group-select
+        @change="emit('update:existingId', ($event.target as HTMLSelectElement).value)"
+      >
+        <option
+          v-for="group in groups"
+          :key="group.id"
+          :value="group.id"
+        >
+          {{ CONTACT_IMPORT_TEXT.groupOption(group.name, formatCount(group.memberCount)) }}
+        </option>
+      </select>
+      <template v-if="mode === 'new'">
+        <input
+          ref="nameRef"
+          class="import-groups__control"
+          type="text"
+          :value="newName"
+          :aria-label="CONTACT_IMPORT_TEXT.extraNewName"
+          :placeholder="CONTACT_IMPORT_TEXT.extraNewName"
+          :maxlength="CONTACT_GROUP_NAME_MAX_LENGTH"
+          autocomplete="off"
+          :aria-invalid="newNameError ? 'true' : 'false'"
+          :aria-describedby="newNameError ? NEW_ERROR_ID : undefined"
+          data-import-group-name
+          @input="emit('update:newName', ($event.target as HTMLInputElement).value)"
+        >
+        <p
+          v-if="newNameError"
+          :id="NEW_ERROR_ID"
+          class="form-message form-message--error"
+        >
+          <AppIcon
+            name="alert-circle"
+            :size="14"
+            :stroke-width="2"
+          />
+          <span>{{ newNameError }}</span>
+        </p>
+      </template>
+      <p class="import-groups__hint">
+        {{ CONTACT_IMPORT_TEXT.extraHint }}
+      </p>
+    </fieldset>
+  </div>
+</template>
+
+<style scoped>
+.import-groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin-top: var(--space-6);
+}
+
+.import-groups__file {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.import-groups__label {
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-label);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.import-groups__text {
+  margin: 0;
+  color: var(--color-text-strong);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.import-groups__fieldset {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.import-groups__modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--space-22);
+}
+
+/* 고르기 줄 44 */
+.import-groups__mode {
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  min-height: var(--size-touch);
+  cursor: pointer;
+}
+
+.import-groups__mode.is-unavailable {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.import-groups__radio {
+  width: var(--size-option-input);
+  height: var(--size-option-input);
+  margin: 0;
+  accent-color: var(--color-brand);
+}
+
+.import-groups__note {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+/* 고르기 칸 · 이름 칸 280 × 44 */
+.import-groups__control {
+  width: min(17.5rem, 100%);
+  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);
+  font: inherit;
+}
+
+.import-groups__control:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: 0 0 0 var(--border-width) var(--color-brand);
+}
+
+.import-groups__control[aria-invalid='true'] {
+  border-color: var(--color-danger);
+}
+
+.import-groups__hint {
+  margin: var(--space-4) 0 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/contacts/ContactImportInfoField.vue b/frontend/src/components/contacts/ContactImportInfoField.vue
new file mode 100644
index 0000000..4127105
--- /dev/null
+++ b/frontend/src/components/contacts/ContactImportInfoField.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+// 가져오기 창 ② 의 메모 체크 칸 (디자인 원본 Contacts16 "3")
+// 「주소, 생일, 홈페이지, 별명처럼 주소록에 칸이 없는 정보는 메모 끝에 붙이기」(처음 켜짐) + "메모가 1,000자를 넘게 되면 붙이지 않습니다."
+// 켜 두면 아래에 견본 — "예: 강민지의 메모": 원래 메모(흐리게) · 빈 줄 · "가져온 정보" · "회사 주소: …" 줄들 (records.ts 의 infoSampleOf)
+import { CONTACT_IMPORT_TEXT } from '@/shared/constants/contacts'
+import type { ImportInfoSample } from '@/shared/utils/contact-import/records'
+
+interface Props {
+  modelValue: boolean
+  sample: ImportInfoSample | null
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const HELP_ID = 'contact-import-info-help'
+</script>
+
+<template>
+  <div class="import-info">
+    <label class="import-info__check">
+      <input
+        type="checkbox"
+        class="import-info__input"
+        :checked="modelValue"
+        :aria-describedby="HELP_ID"
+        data-import-info
+        @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+      >
+      <span>{{ CONTACT_IMPORT_TEXT.info }}</span>
+    </label>
+    <p
+      :id="HELP_ID"
+      class="import-info__help"
+    >
+      {{ CONTACT_IMPORT_TEXT.infoHint }}
+    </p>
+    <div
+      v-if="modelValue && sample"
+      class="import-info__sample"
+      data-import-info-sample
+    >
+      <span class="import-info__caption">{{ CONTACT_IMPORT_TEXT.infoSample(sample.name) }}</span>
+      <span
+        v-for="(line, index) in sample.original"
+        :key="`o${index}`"
+        class="import-info__line import-info__line--original"
+      >{{ line }}</span>
+      <span
+        v-if="sample.original.length > 0"
+        class="import-info__gap"
+        aria-hidden="true"
+      />
+      <span
+        v-for="(line, index) in sample.added"
+        :key="`a${index}`"
+        class="import-info__line"
+      >{{ line }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.import-info {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 체크 줄 44 — 위 12, 글이 두 줄이면 상자를 첫 줄에 맞춘다 */
+.import-info__check {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-10);
+  min-height: var(--size-touch);
+  padding-top: var(--space-12);
+  cursor: pointer;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.import-info__input {
+  flex: 0 0 auto;
+  width: var(--size-option-input);
+  height: var(--size-option-input);
+  margin: var(--space-1) 0 0;
+  accent-color: var(--color-brand);
+}
+
+.import-info__help {
+  margin: var(--space-2) 0 0 var(--space-28);
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+/* 견본 — 옅은 회색 상자, 원래 메모는 흐리게 */
+.import-info__sample {
+  display: flex;
+  flex-direction: column;
+  margin: var(--space-8) 0 0 var(--space-28);
+  padding: var(--space-10) var(--space-12);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-panel);
+  font-size: var(--font-size-label);
+}
+
+.import-info__caption {
+  margin-bottom: var(--space-4);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+.import-info__line {
+  color: var(--color-text-body);
+  overflow-wrap: anywhere;
+}
+
+.import-info__line--original {
+  color: var(--color-text-muted);
+}
+
+.import-info__gap {
+  min-height: var(--space-8);
+}
+</style>
diff --git a/frontend/src/components/contacts/ContactImportPicker.vue b/frontend/src/components/contacts/ContactImportPicker.vue
new file mode 100644
index 0000000..4503d43
--- /dev/null
+++ b/frontend/src/components/contacts/ContactImportPicker.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+// 가져오기 창 ① 파일 고르기 (디자인 원본 Contacts16 "2") — 놓는 자리 · 읽지 못한 까닭 · 받는 형식 안내
+// - 처음: 올리기 아이콘 + [파일 고르기](채운 단추 — 창의 처음 초점) + "파일을 여기로 끌어다 놓아도 됩니다."
+// - 끄는 동안(dragging — 창 어디에 끌어 와도): 자리가 2px 청록 점선 · 옅은 청록 바탕, "놓으면 이 파일에서 연락처를 찾습니다"
+// - 읽는 동안: 도는 아이콘 + "파일을 읽는 중…" + 파일 이름. 화면 낭독기에는 늘 있는 상태 영역(role=status — 글만 바꾼다)이 같은 글을 읽는다
+// - 읽지 못했으면 자리 아래 빨간 글(role=alert — 알림은 띄우지 않는다). 다른 파일을 고르거나 놓으면 창이 지운다
+// 끌어다 놓기 처리는 창(ContactImportDialog)이 한다 — 창 어디에 놓아도 받는다
+import { ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import { CONTACT_IMPORT_TEXT } from '@/shared/constants/contacts'
+
+interface Props {
+  reading: boolean
+  dragging: boolean
+  fileName: string
+  error: string | null
+}
+
+interface Emits {
+  (e: 'pick'): void
+}
+
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const pickRef = ref<HTMLButtonElement | null>(null)
+
+defineExpose({
+  /** [파일 고르기]에 초점을 둔다 — 읽지 못한 뒤 */
+  focusPick: () => pickRef.value?.focus(),
+})
+</script>
+
+<template>
+  <div class="import-picker">
+    <div
+      :class="['import-picker__zone', { 'is-dragging': dragging && !reading }]"
+      data-import-zone
+    >
+      <template v-if="reading">
+        <AppIcon
+          name="loader"
+          :size="24"
+          :stroke-width="2"
+          class="import-picker__spinner"
+        />
+        <!-- 같은 글을 화면 낭독기는 아래 상태 영역(늘 있다)에서 읽는다 — 두 번 읽지 않게 숨긴다 -->
+        <p
+          class="import-picker__reading"
+          aria-hidden="true"
+        >
+          {{ CONTACT_IMPORT_TEXT.reading }}
+        </p>
+        <p class="import-picker__file">
+          {{ fileName }}
+        </p>
+      </template>
+      <template v-else-if="dragging">
+        <AppIcon
+          name="upload"
+          :size="28"
+          class="import-picker__icon import-picker__icon--active"
+        />
+        <p class="import-picker__dropping">
+          {{ CONTACT_IMPORT_TEXT.dropping }}
+        </p>
+      </template>
+      <template v-else>
+        <AppIcon
+          name="upload"
+          :size="28"
+          :stroke-width="1.5"
+          class="import-picker__icon"
+        />
+        <button
+          ref="pickRef"
+          type="button"
+          class="import-picker__pick"
+          autofocus
+          data-import-pick
+          @click="emit('pick')"
+        >
+          {{ CONTACT_IMPORT_TEXT.pick }}
+        </button>
+        <p class="import-picker__hint">
+          {{ CONTACT_IMPORT_TEXT.dropHint }}
+        </p>
+      </template>
+    </div>
+    <!-- 상태 영역은 늘 두고 글만 바꾼다 — 글과 함께 생기는 영역은 화면 낭독기가 읽지 않기도 한다 -->
+    <p
+      class="visually-hidden"
+      role="status"
+      data-import-status
+    >
+      {{ reading ? CONTACT_IMPORT_TEXT.reading : '' }}
+    </p>
+    <p
+      v-if="error"
+      role="alert"
+      class="import-picker__error"
+      data-import-error
+    >
+      <AppIcon
+        name="alert-circle"
+        :size="14"
+        :stroke-width="2"
+        class="import-picker__error-icon"
+      />
+      <span>{{ error }}</span>
+    </p>
+    <p class="import-picker__formats">
+      {{ CONTACT_IMPORT_TEXT.formats }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.import-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  margin-top: var(--space-6);
+}
+
+/* 놓는 자리 168 — 1px 회색 점선 · 옅은 회색 바탕 (디자인 원본 Contacts16 "2") */
+.import-picker__zone {
+  min-height: 10.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-10);
+  padding: var(--space-20);
+  border: var(--border-width) dashed var(--color-icon-muted);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-panel);
+  text-align: center;
+}
+
+/* 끄는 동안 — 2px 청록 점선 · 옅은 청록 바탕 (테두리가 1px 굵어진 만큼 안쪽을 줄여 자리가 그대로) */
+.import-picker__zone.is-dragging {
+  padding: calc(var(--space-20) - var(--border-width));
+  border: calc(var(--border-width) * 2) dashed var(--color-brand);
+  background: var(--color-brand-tint);
+}
+
+.import-picker__icon {
+  color: var(--color-icon-muted);
+}
+
+.import-picker__icon--active {
+  color: var(--color-brand-strong);
+}
+
+.import-picker__pick {
+  min-height: var(--size-touch);
+  padding: 0 var(--space-16);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--color-brand);
+  color: var(--color-on-brand);
+  font-weight: 600;
+}
+
+.import-picker__pick:hover {
+  background: var(--color-brand-strong);
+}
+
+.import-picker__hint,
+.import-picker__formats,
+.import-picker__file {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.import-picker__file {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.import-picker__dropping {
+  margin: 0;
+  font-weight: 600;
+  color: var(--color-brand-strong);
+}
+
+.import-picker__reading {
+  margin: 0;
+  font-weight: 600;
+  color: var(--color-text-strong);
+}
+
+.import-picker__spinner {
+  color: var(--color-brand);
+  animation: import-picker-spin 0.9s linear infinite;
+}
+
+@keyframes import-picker-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 읽지 못한 까닭 — 칸 아래 빨간 글 12.5 */
+.import-picker__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-6);
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-danger);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.import-picker__error-icon {
+  margin-top: var(--space-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .import-picker__spinner {
+    animation: none;
+  }
+}
+</style>
diff --git a/frontend/src/components/contacts/ContactImportSummary.vue b/frontend/src/components/contacts/ContactImportSummary.vue
new file mode 100644
index 0000000..fd77ce6
--- /dev/null
+++ b/frontend/src/components/contacts/ContactImportSummary.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+// 가져오기 창 ② 미리 보기의 세 묶음 (디자인 원본 Contacts16 "3") — 글과 숫자로만 나눈다(뱃지 없음)
+// - 넣을 연락처: 앞 6명의 표(이름 · 이메일 · 전화 · 회사 · 그룹) + "그 밖에 N명"
+// - 이미 있는 연락처는 건너뜁니다 · 넣지 못하는 줄(vCard 는 연락처): 눌러 펼친다(aria-expanded). 펼친 목록은 6줄 높이까지 늘고 넘으면 목록 안에서 넘긴다
+//   줄 번호는 엑셀에서 보이는 행 번호(머리 줄이 1번째 줄), vCard 는 "12번째 연락처". 빈 묶음은 두지 않는다
+import { computed, ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import { CONTACT_IMPORT_PREVIEW_ROWS, CONTACT_IMPORT_TEXT } from '@/shared/constants/contacts'
+import {
+  duplicateReasonText,
+  importPositionText,
+  previewRowsOf,
+  type ImportPreview,
+} from '@/shared/utils/contact-import/records'
+import { formatCount } from '@/shared/utils/format'
+
+interface Props {
+  preview: ImportPreview
+}
+
+const props = defineProps<Props>()
+
+const duplicatesOpen = ref<boolean>(false)
+const problemsOpen = ref<boolean>(false)
+
+const rows = computed(() => previewRowsOf(props.preview))
+const others = computed(() => Math.max(0, props.preview.toInsert.length - CONTACT_IMPORT_PREVIEW_ROWS))
+const vcard = computed(() => props.preview.kind === 'vcard')
+const problemLabel = computed(() =>
+  vcard.value ? CONTACT_IMPORT_TEXT.problemCards : CONTACT_IMPORT_TEXT.problemLines,
+)
+const problemCount = computed(() => {
+  const count = formatCount(props.preview.problems.length)
+  return vcard.value ? CONTACT_IMPORT_TEXT.people(count) : CONTACT_IMPORT_TEXT.lineCount(count)
+})
+const duplicates = computed(() =>
+  props.preview.duplicates.map((duplicate) => ({
+    key: `${duplicate.position}`,
+    position: importPositionText(props.preview.kind, duplicate.position),
+    name: duplicate.name,
+    detail: duplicate.detail,
+    reason: duplicateReasonText(props.preview.kind, duplicate),
+  })),
+)
+const problems = computed(() =>
+  props.preview.problems.map((problem) => ({
+    key: `${problem.position}`,
+    position: importPositionText(props.preview.kind, problem.position),
+    what: problem.what,
+    reason: problem.reason,
+  })),
+)
+</script>
+
+<template>
+  <div
+    class="import-summary"
+    data-import-summary
+  >
+    <div
+      v-if="preview.toInsert.length > 0"
+      class="import-summary__insert"
+    >
+      <div class="import-summary__head">
+        <span class="import-summary__label">{{ CONTACT_IMPORT_TEXT.insertSection }}</span>
+        <span
+          class="import-summary__count"
+          data-import-insert-count
+        >{{ CONTACT_IMPORT_TEXT.people(formatCount(preview.toInsert.length)) }}</span>
+      </div>
+      <div
+        role="table"
+        class="import-summary__table"
+        :aria-label="CONTACT_IMPORT_TEXT.insertTable(formatCount(rows.length))"
+      >
+        <div
+          role="row"
+          class="import-summary__row import-summary__row--head"
+        >
+          <span role="columnheader">{{ CONTACT_IMPORT_TEXT.columns.name }}</span>
+          <span role="columnheader">{{ CONTACT_IMPORT_TEXT.columns.email }}</span>
+          <span role="columnheader">{{ CONTACT_IMPORT_TEXT.columns.phone }}</span>
+          <span role="columnheader">{{ CONTACT_IMPORT_TEXT.columns.company }}</span>
+          <span role="columnheader">{{ CONTACT_IMPORT_TEXT.columns.groups }}</span>
+        </div>
+        <div
+          v-for="row in rows"
+          :key="row.key"
+          role="row"
+          class="import-summary__row"
+          data-import-row
+        >
+          <span
+            role="cell"
+            class="import-summary__cell import-summary__cell--name"
+          >{{ row.name }}</span>
+          <span
+            role="cell"
+            class="import-summary__cell"
+          >{{ row.email }}</span>
+          <span
+            role="cell"
+            class="import-summary__cell import-summary__cell--number"
+          >{{ row.phone }}</span>
+          <span
+            role="cell"
+            class="import-summary__cell"
+          >{{ row.company }}</span>
+          <span
+            role="cell"
+            class="import-summary__cell"
+          >{{ row.groups }}</span>
+        </div>
+      </div>
+      <p
+        v-if="others > 0"
+        class="import-summary__others"
+      >
+        {{ CONTACT_IMPORT_TEXT.others(formatCount(others)) }}
+      </p>
+    </div>
+
+    <div
+      v-if="duplicates.length > 0"
+      class="import-summary__section"
+    >
+      <button
+        type="button"
+        class="import-summary__toggle"
+        :aria-expanded="duplicatesOpen ? 'true' : 'false'"
+        aria-controls="contact-import-duplicates"
+        data-import-duplicates-toggle
+        @click="duplicatesOpen = !duplicatesOpen"
+      >
+        <AppIcon
+          :name="duplicatesOpen ? 'chevron-down' : 'chevron-right'"
+          :size="14"
+          :stroke-width="2"
+          class="import-summary__chevron"
+        />
+        <span class="import-summary__label">{{ CONTACT_IMPORT_TEXT.duplicateSection }}</span>
+        <span class="import-summary__count">{{ CONTACT_IMPORT_TEXT.people(formatCount(duplicates.length)) }}</span>
+      </button>
+      <ul
+        v-show="duplicatesOpen"
+        id="contact-import-duplicates"
+        class="import-summary__list"
+        :aria-label="CONTACT_IMPORT_TEXT.duplicateSection"
+        data-import-duplicates
+      >
+        <li
+          v-for="item in duplicates"
+          :key="item.key"
+          class="import-summary__item"
+        >
+          <span class="import-summary__position">{{ item.position }}</span>
+          <span class="import-summary__who"><span class="import-summary__who-name">{{ item.name }}</span>{{ item.detail }}</span>
+          <span class="import-summary__reason">{{ item.reason }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      v-if="problems.length > 0"
+      class="import-summary__section"
+    >
+      <button
+        type="button"
+        class="import-summary__toggle"
+        :aria-expanded="problemsOpen ? 'true' : 'false'"
+        aria-controls="contact-import-problems"
+        data-import-problems-toggle
+        @click="problemsOpen = !problemsOpen"
+      >
+        <AppIcon
+          :name="problemsOpen ? 'chevron-down' : 'chevron-right'"
+          :size="14"
+          :stroke-width="2"
+          class="import-summary__chevron"
+        />
+        <span class="import-summary__label">{{ problemLabel }}</span>
+        <span class="import-summary__count">{{ problemCount }}</span>
+      </button>
+      <ul
+        v-show="problemsOpen"
+        id="contact-import-problems"
+        class="import-summary__list"
+        :aria-label="problemLabel"
+        data-import-problems
+      >
+        <li
+          v-for="item in problems"
+          :key="item.key"
+          class="import-summary__item import-summary__item--problem"
+        >
+          <span class="import-summary__position">{{ item.position }}</span>
+          <span class="import-summary__problem">
+            <span class="import-summary__what">{{ item.what }}</span>
+            <span class="import-summary__problem-reason">{{ item.reason }}</span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.import-summary {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.import-summary__insert {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-10) var(--space-12);
+}
+
+.import-summary__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-8);
+  padding-bottom: var(--space-6);
+}
+
+.import-summary__label {
+  font-weight: 600;
+}
+
+.import-summary__count {
+  margin-left: auto;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.import-summary__table {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size-label);
+}
+
+/* 표 칸 — 이름 64 · 이메일 1.7fr · 전화 96 · 회사 1fr · 그룹 76 (디자인 원본 Contacts16 "3") */
+.import-summary__row {
+  display: grid;
+  grid-template-columns: 4rem minmax(0, 1.7fr) 6rem minmax(0, 1fr) 4.75rem;
+  column-gap: var(--space-10);
+  align-items: center;
+  min-height: 1.875rem;
+  border-bottom: var(--border-width) solid var(--color-border-subtle);
+}
+
+.import-summary__row--head {
+  min-height: 1.75rem;
+  border-bottom-color: var(--color-border);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+.import-summary__cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-strong);
+}
+
+.import-summary__cell--name {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.import-summary__cell--number {
+  font-variant-numeric: tabular-nums;
+}
+
+.import-summary__others {
+  margin: var(--space-6) 0 0;
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+}
+
+.import-summary__section {
+  border-top: var(--border-width) solid var(--color-border);
+}
+
+.import-summary__section:first-child {
+  border-top: 0;
+}
+
+/* 펼치기 줄 44 */
+.import-summary__toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-height: var(--size-touch);
+  padding: 0 var(--space-12);
+  border: 0;
+  background: var(--color-surface);
+  color: var(--color-text);
+  text-align: left;
+}
+
+.import-summary__toggle:hover {
+  background: var(--color-surface-panel);
+}
+
+.import-summary__chevron {
+  color: var(--color-text-muted);
+}
+
+/* 펼친 목록 — 6줄 높이(186)까지, 넘으면 목록 안에서 넘긴다 */
+.import-summary__list {
+  max-height: 11.625rem;
+  margin: 0;
+  padding: 0 var(--space-16) var(--space-6) 2.125rem;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.import-summary__item {
+  display: grid;
+  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
+  column-gap: var(--space-10);
+  align-items: center;
+  min-height: 1.875rem;
+  border-top: var(--border-width) solid var(--color-border-subtle);
+  font-size: var(--font-size-label);
+}
+
+.import-summary__item--problem {
+  grid-template-columns: 4.75rem minmax(0, 1fr);
+  padding: var(--space-6) 0;
+}
+
+.import-summary__position {
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.import-summary__who {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-strong);
+}
+
+.import-summary__who-name {
+  margin-right: var(--space-6);
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.import-summary__reason {
+  color: var(--color-text-muted);
+}
+
+.import-summary__problem {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.import-summary__what {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-strong);
+}
+
+.import-summary__problem-reason {
+  color: var(--color-warning-text);
+}
+</style>
diff --git a/frontend/src/components/contacts/ContactsDialogs.vue b/frontend/src/components/contacts/ContactsDialogs.vue
index 937a168..7a310ad 100644
--- a/frontend/src/components/contacts/ContactsDialogs.vue
+++ b/frontend/src/components/contacts/ContactsDialogs.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 // 주소록 화면의 창 묶음 — 패널 · 목록 · 상세가 연 창을 그린다 (useContactsDialogs · 메일함 패널의 MailboxDialogs 와 같은 결)
-// - 연락처 추가 · 고치기(ContactDialog) · 새 그룹 · 이름 바꾸기(ContactGroupNameDialog) · 구성원 넣기(ContactGroupMembersDialog)
+// - 연락처 추가 · 고치기(ContactDialog) · 새 그룹 · 이름 바꾸기(ContactGroupNameDialog) · 구성원 넣기(ContactGroupMembersDialog) ·
+//   가져오기(ContactImportDialog) · 내보내기(ContactExportDialog — 16단계)
 // - 창은 한 번 그리면 두고 열고 닫기만 한다 — 닫을 때 초점이 연 단추로 돌아가게(ModalDialog). 닫히는 동안 글이 바뀌지 않게 마지막 요청을 쥐고 있는다
 // - 닫은 뒤 연 단추가 사라져(지운 연락처의 [고치기] 등) 초점을 잃었으면 목록 칸으로 옮긴다
 import { computed, nextTick, shallowRef, watch } from 'vue'
 
 import ContactDialog from '@/components/contacts/ContactDialog.vue'
+import ContactExportDialog from '@/components/contacts/ContactExportDialog.vue'
 import ContactGroupMembersDialog from '@/components/contacts/ContactGroupMembersDialog.vue'
 import ContactGroupNameDialog from '@/components/contacts/ContactGroupNameDialog.vue'
+import ContactImportDialog from '@/components/contacts/ContactImportDialog.vue'
 import type { ContactsDialogRequest } from '@/composables/useContactsDialogs'
 import type { Contact, ContactGroup } from '@/shared/types/contacts'
 import type { ContactPrefill } from '@/shared/utils/contacts'
@@ -75,4 +78,12 @@ watch(
     :group="membersTarget"
     @close="close"
   />
+  <ContactImportDialog
+    :open="kind === 'import'"
+    @close="close"
+  />
+  <ContactExportDialog
+    :open="kind === 'export'"
+    @close="close"
+  />
 </template>
diff --git a/frontend/src/components/contacts/ContactsList.vue b/frontend/src/components/contacts/ContactsList.vue
index 0b9c2e6..0f146f2 100644
--- a/frontend/src/components/contacts/ContactsList.vue
+++ b/frontend/src/components/contacts/ContactsList.vue
@@ -6,6 +6,9 @@
 // - 줄(ContactsListItem) — 이름 차례(서버), 100명씩 받고 끝에 [더 보기]
 // - 상태: 불러오는 중(뼈대) · 못 받음(사내 목록은 "사내 목록을 불러오지 못했습니다" + [다시 시도], 없는 그룹은 [전체 연락처로]) ·
 //   찾은 것 없음 · 처음(연락처 없음 — [연락처 추가]) · 빈 그룹([구성원 넣기]) · 빈 사내 목록 (디자인 원본 ContactsEdit "상태")
+// - 16단계(디자인 원본 Contacts16 "1"): 「전체 연락처」 머리 오른쪽에 [가져오기] · [내보내기](도구 단추 — 그룹 머리와 같은 꼴).
+//   연락처가 하나도 없으면 [내보내기]를 끄고(aria-disabled) 까닭 "내보낼 연락처가 없습니다."(title · 숨긴 글), 3,000개면 [가져오기]도 끄고 패널의 3,000개 안내를 까닭으로,
+//   가져오는 동안(되돌리기 포함)은 [가져오기]가 바쁜 표시(aria-busy — 눌러도 아무 일이 없다). 빈 주소록 안내에는 테두리 단추 [가져오기]와 안내 한 줄을 더한다
 // data-contacts-list — 지운 뒤 · 창을 닫은 뒤 초점을 잃으면 여기로 (useContactActions · ContactsDialogs)
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -21,11 +24,13 @@ import {
   CONTACTS_EMPTY_TEXT,
   CONTACTS_LIST_TEXT,
   CONTACTS_PANEL_TEXT,
+  CONTACTS_TRANSFER_TEXT,
   DIRECTORY_KIND_TEXT,
 } from '@/shared/constants/contacts'
 import { contactDisplayName, contactListMeta, primaryEmail } from '@/shared/utils/contacts'
 import { contactsItemLocation, contactsListLocation, type ContactsRouteState } from '@/shared/utils/contacts-route'
 import { formatCount } from '@/shared/utils/format'
+import { useContactImportStore } from '@/stores/contact-import.store'
 import { useContactsStore } from '@/stores/contacts.store'
 
 interface Props {
@@ -35,10 +40,16 @@ interface Props {
 const props = defineProps<Props>()
 
 const store = useContactsStore()
+const importStore = useContactImportStore()
 const dialogs = useContactsDialogs()
 const actions = useContactActions()
 const router = useRouter()
 
+/** 「전체 연락처」 머리의 [가져오기] · [내보내기]가 꺼진 까닭 (숨긴 글 — aria-describedby) */
+const EXPORT_NOTE_ID = 'contacts-export-note'
+/** 패널의 3,000개 안내 (ContactsPanel) — [가져오기]가 꺼진 까닭으로 함께 쓴다 */
+const FULL_NOTE_ID = 'contacts-full-note'
+
 /** 목록 줄 — 연락처 · 사내 항목을 같은 모양으로 */
 interface ListRow {
   id: string
@@ -93,6 +104,10 @@ const groupEmpty = computed(() => group.value !== null && group.value.memberCoun
 const composing = computed(() => group.value !== null && store.composingGroupId === group.value.id)
 /** 없는 그룹 — 다른 곳에서 지웠거나 주소에 남은 옛 id */
 const missingGroup = computed(() => source.value.kind === 'group' && store.listError?.code === 'RES_001')
+/** 연락처가 하나도 없다 — [내보내기]를 끈다 (수를 모르면 끄지 않는다) */
+const nothingToExport = computed(() => store.contactTotal === 0)
+/** 이 탭에서 가져오기 · 되돌리기가 도는 중 — [가져오기]의 바쁜 표시 */
+const importing = computed(() => importStore.busy !== null)
 
 function itemLocation(id: string) {
   return contactsItemLocation(source.value, id, props.state.q)
@@ -117,6 +132,15 @@ function leaveToAll() {
 function addContact() {
   if (!store.isFull) dialogs.openContact(null)
 }
+
+/** [가져오기] — 3,000개 · 가져오는 중이면 아무 일이 없다 */
+function openImport() {
+  if (!store.isFull && !importing.value) dialogs.openImport()
+}
+
+function openExport() {
+  if (!nothingToExport.value) dialogs.openExport()
+}
 </script>
 
 <template>
@@ -166,6 +190,35 @@ function addContact() {
             class="visually-hidden"
           >{{ CONTACT_GROUP_MENU_TEXT.composeEmptyNote }}</span>
         </div>
+        <div
+          v-else-if="source.kind === 'all'"
+          class="contacts-list__actions"
+        >
+          <MailToolButton
+            icon="upload"
+            :label="CONTACTS_TRANSFER_TEXT.import"
+            :unavailable="store.isFull"
+            :busy="importing"
+            :describedby="store.isFull ? FULL_NOTE_ID : undefined"
+            :title="store.isFull ? CONTACTS_PANEL_TEXT.fullNote : undefined"
+            data-contacts-import
+            @click="openImport"
+          />
+          <MailToolButton
+            icon="download"
+            :label="CONTACTS_TRANSFER_TEXT.export"
+            :unavailable="nothingToExport"
+            :describedby="nothingToExport ? EXPORT_NOTE_ID : undefined"
+            :title="nothingToExport ? CONTACTS_TRANSFER_TEXT.exportEmptyNote : undefined"
+            data-contacts-export
+            @click="openExport"
+          />
+          <span
+            v-if="nothingToExport"
+            :id="EXPORT_NOTE_ID"
+            class="visually-hidden"
+          >{{ CONTACTS_TRANSFER_TEXT.exportEmptyNote }}</span>
+        </div>
       </div>
       <p
         v-if="directoryNote"
@@ -295,19 +348,39 @@ function addContact() {
       :hint="CONTACTS_EMPTY_TEXT.firstHint"
       data-contacts-empty="first"
     >
-      <button
-        type="button"
-        class="contacts-list__primary-button"
-        :aria-disabled="store.isFull ? 'true' : undefined"
-        @click="addContact"
-      >
-        <AppIcon
-          name="user-plus"
-          :size="15"
-          :stroke-width="2"
-        />
-        <span>{{ CONTACTS_PANEL_TEXT.add }}</span>
-      </button>
+      <div class="contacts-list__first-actions">
+        <button
+          type="button"
+          class="contacts-list__primary-button"
+          :aria-disabled="store.isFull ? 'true' : undefined"
+          @click="addContact"
+        >
+          <AppIcon
+            name="user-plus"
+            :size="15"
+            :stroke-width="2"
+          />
+          <span>{{ CONTACTS_PANEL_TEXT.add }}</span>
+        </button>
+        <button
+          type="button"
+          class="contacts-list__outline-button contacts-list__outline-button--icon"
+          :aria-disabled="store.isFull ? 'true' : undefined"
+          :aria-busy="importing ? 'true' : undefined"
+          data-contacts-first-import
+          @click="openImport"
+        >
+          <AppIcon
+            name="upload"
+            :size="15"
+            :stroke-width="1.9"
+          />
+          <span>{{ CONTACTS_TRANSFER_TEXT.import }}</span>
+        </button>
+      </div>
+      <p class="contacts-list__first-note contacts-list__first-note--import">
+        {{ CONTACTS_TRANSFER_TEXT.firstImportNote }}
+      </p>
       <p class="contacts-list__first-note">
         {{ CONTACTS_EMPTY_TEXT.firstNote }}
       </p>
@@ -514,6 +587,43 @@ function addContact() {
   color: var(--color-text-muted);
 }
 
+/* 빈 주소록의 단추 둘 — [연락처 추가] · 테두리 [가져오기] (디자인 원본 Contacts16 "1") */
+.contacts-list__first-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-8);
+  margin-top: var(--space-6);
+}
+
+.contacts-list__first-actions .contacts-list__primary-button,
+.contacts-list__first-actions .contacts-list__outline-button {
+  margin-top: 0;
+}
+
+.contacts-list__outline-button--icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: var(--color-text-strong);
+}
+
+.contacts-list__outline-button--icon[aria-disabled='true'],
+.contacts-list__outline-button--icon[aria-disabled='true']:hover {
+  background: transparent;
+  color: var(--color-text-strong);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.contacts-list__outline-button--icon[aria-busy='true'] {
+  cursor: progress;
+}
+
+.contacts-list__first-note--import {
+  margin-top: var(--space-6);
+}
+
 /* 넓은 화면에서는 목록 칸만 따로 스크롤한다 (tokens.css 화면 폭 기준) */
 @media (min-width: 70rem) {
   .contacts-list {
diff --git a/frontend/src/components/contacts/contacts-ui.ts b/frontend/src/components/contacts/contacts-ui.ts
index 085cd84..0da2736 100644
--- a/frontend/src/components/contacts/contacts-ui.ts
+++ b/frontend/src/components/contacts/contacts-ui.ts
@@ -1,4 +1,5 @@
-// 주소록 화면의 부품끼리 주고받는 값 — 패널의 그룹 줄(ContactsGroupRow) ↔ 패널, 연락처 창의 줄 묶음(ContactEntryRows) ↔ 창(ContactDialog)
+// 주소록 화면의 부품끼리 주고받는 값 — 패널의 그룹 줄(ContactsGroupRow) ↔ 패널, 연락처 창의 줄 묶음(ContactEntryRows) ↔ 창(ContactDialog),
+// 가져오기 창의 그룹 칸(ContactImportGroupFields) ↔ 창(ContactImportDialog)
 
 /** 그룹 줄 ⋯ 메뉴가 할 수 있는 일 */
 export type ContactGroupAction = 'rename' | 'compose' | 'delete'
@@ -24,6 +25,9 @@ export interface ContactEntryPatch {
   value?: string
 }
 
+/** 가져오기 창 — 가져온 연락처를 모두 넣을 그룹 (넣지 않음 · 이미 있는 그룹 · 새 그룹) */
+export type ImportGroupMode = 'none' | 'existing' | 'new'
+
 /** 키 하나를 뺀 기록 — 같은 주소 안내를 지울 때 */
 export function withoutKey<T>(record: Readonly<Record<number, T>>, key: number): Record<number, T> {
   const next: Record<number, T> = { ...record }
diff --git a/frontend/src/components/feedback/ToastHost.vue b/frontend/src/components/feedback/ToastHost.vue
index 66845ad..3b052ce 100644
--- a/frontend/src/components/feedback/ToastHost.vue
+++ b/frontend/src/components/feedback/ToastHost.vue
@@ -8,6 +8,7 @@
 // 초점이 든 알림이 닫히면(시간이 다 됨 — 마감이 있는 알림 포함 · 단추 · 넘침 · 세션이 바뀜) 초점을 알림에 들어오기 전 자리로 돌려준다 —
 // 그 요소가 사라졌으면 화면의 main 으로 (키보드 사용자가 자리를 잃고 body 로 빠지지 않게 — 2026-10-29 리뷰)
 // 단추는 한 번만 움직인다 — 닫히는 동안(퇴장 전환) 다시 눌러도 할 일을 또 하지 않는다 (toast.store 의 takeAction)
+// ✕로 닫을 때까지 남는 알림(sticky — 16단계 주소록 가져오기 결과)은 성공 알림에도 ✕ 를 단다(브랜드 바탕용 색 — 디자인 원본 Contacts16 "4")
 import { ref, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -150,10 +151,11 @@ watch(
           {{ toast.action.label }}
         </button>
         <button
-          v-if="toast.kind === 'error'"
+          v-if="toast.kind === 'error' || toast.sticky"
           type="button"
-          class="toast__close"
+          :class="['toast__close', { 'toast__close--on-brand': toast.kind !== 'error' }]"
           aria-label="알림 닫기"
+          data-toast-close
           @click="toastStore.dismiss(toast.id)"
         >
           <AppIcon
@@ -342,6 +344,20 @@ watch(
   background: var(--color-surface-muted);
 }
 
+/* 브랜드 바탕(성공 알림) 위의 ✕ — 흐린 청록 글자, 마우스를 올리면 흰 글자 (디자인 원본 Contacts16 "4") */
+.toast__close--on-brand {
+  color: var(--color-on-brand-muted);
+}
+
+.toast__close--on-brand:hover {
+  background: var(--color-on-brand-track);
+  color: var(--color-on-brand);
+}
+
+.toast__close--on-brand:focus-visible {
+  outline-color: var(--color-on-brand-link);
+}
+
 /* 인쇄하지 않는다 — 고정 위치라 남아 있으면 쪽마다 찍힌다 (9단계 인쇄 화면) */
 @media print {
   .toast-host {
diff --git a/frontend/src/components/mail/ComposeFooter.vue b/frontend/src/components/mail/ComposeFooter.vue
index 07e2744..c037a3e 100644
--- a/frontend/src/components/mail/ComposeFooter.vue
+++ b/frontend/src/components/mail/ComposeFooter.vue
@@ -9,6 +9,7 @@
 // 꺼진 [보내기] · ▾ 는 disabled 가 아니라 aria-disabled 다(11단계 — 초점은 받는다). 첨부 때문에 막혔으면(올리는 중 · 다 올리지 못함 · 빼야 하는 파일)
 // [임시 저장] 오른쪽에 까닭 글(ⓘ 12.5 — 두 단추의 aria-describedby #compose-send-why)을 두고, 누르면 보내지 않고 까닭을 화면 낭독기에 읽어 준다(role=status).
 // 「예약 발송…」도 같다. 임시 저장은 그대로 된다 (디자인 README "11단계 › 다 올릴 때까지 보내기를 막는다")
+// [임시 저장] 다음 자리(signature 슬롯)에 쓰기 화면이 [서명 ▾]를 둔다 (16단계 — ComposeSignatureMenu, 디자인 원본 Signature16 6)
 // 고정 id · 이름 — 화면 검증 · 테스트가 쓴다: 보내기 .compose__send · ▾ .compose__send-more · 임시 저장 #compose-save-draft ·
 // 상태 #compose-draft-status(ComposeDraftStatus) · 까닭 #compose-send-why · 줄 .compose__footer
 import { computed, nextTick, ref, watch } from 'vue'
@@ -191,6 +192,8 @@ watch(unavailable, (off) => {
     >
       임시 저장
     </button>
+    <!-- [서명 ▾] (16단계) — 쓰기 화면이 넣는다 -->
+    <slot name="signature" />
     <p
       v-if="blockedReason"
       :id="REASON_ID"
diff --git a/frontend/src/components/mail/ComposeSignatureMenu.vue b/frontend/src/components/mail/ComposeSignatureMenu.vue
new file mode 100644
index 0000000..d27bd68
--- /dev/null
+++ b/frontend/src/components/mail/ComposeSignatureMenu.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+// 쓰기 화면 [서명 ▾] (디자인 원본 Signature16 6 · README "16단계 — 여러 서명") — 아래 단추 줄의 [임시 저장] 다음.
+// 단추는 [임시 저장]과 같은 글자 단추(44)에 ▾. 화면 낭독은 툴바의 글꼴 단추처럼 지금 본문에 든 서명까지 읽는다("서명: 대외" · "서명: 넣지 않음") —
+// 서명 자리가 어느 서명과도 같지 않으면(그 메일에서 고쳤거나 지운 서명) "서명"만.
+// 메뉴는 편집기 메뉴(EditorMenu — 항목 40 · 폭 220): 서명(만든 차례 — 지금 본문에 든 서명에 ✓, "기본" 표시 없음) · 넣지 않음 · 가는 선 · 서명 관리.
+// 서명이 없으면 넣지 않음과 서명 관리만. 키보드는 [보내기 ▾]와 같다 — Enter · Space · 아래 화살표로 열면 첫 항목에 초점, 마우스로 열면 메뉴 자체에,
+// Esc 는 메뉴만 닫고 [서명 ▾]로 돌아간다. 아래 자리가 모자라면 위로 연다(usePopupPlacement — 아래 단추 줄에서는 보통 위).
+// 고르면 select(서명 id · 넣지 않음은 null), 서명 관리는 manage — 본문의 서명 자리를 바꾸는 일과 낭독 글(announcement)은 쓰기 화면이 정한다.
+// 고정 id · 이름 — 단추 #compose-signature · 메뉴 .compose-signature__menu · 낭독 [data-signature-status]
+import { computed, ref, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import EditorMenu from '@/components/mail/editor/EditorMenu.vue'
+import { menuSeparator, type EditorMenuItem } from '@/components/mail/editor/editor-menu'
+import { usePopupPlacement } from '@/composables/usePopupPlacement'
+import { COMPOSE_SIGNATURE_TEXT } from '@/shared/constants/mail-signature'
+import type { ComposeSignatureState } from '@/shared/types/mail-signature'
+
+interface SignatureChoice {
+  id: string
+  name: string
+}
+
+interface Props {
+  /** 내 서명 — 만든 차례 */
+  signatures: readonly SignatureChoice[]
+  /** 지금 본문에 든 서명 */
+  state: ComposeSignatureState
+  /** 누를 수 없다 — 편집기를 불러오는 중 · 보내는 중 등 */
+  disabled?: boolean
+  /** 서명을 바꾼 뒤 화면 낭독기에 읽어 줄 글 (role=status) */
+  announcement?: string
+}
+
+interface Emits {
+  /** 서명을 골랐다 — 넣지 않음은 null */
+  (e: 'select', id: string | null): void
+  /** 서명 관리 — 설정 › 메일 › 서명으로 */
+  (e: 'manage'): void
+  /** 메뉴를 열었다 — 서명을 아직 받지 못했으면 다시 받아 본다 */
+  (e: 'open'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  announcement: '',
+})
+const emit = defineEmits<Emits>()
+
+/** 메뉴 항목 id — 서명 id(서버가 만든 값)와 겹치지 않게 앞에 붙인다 */
+const SIGNATURE_ITEM_PREFIX = 'signature:'
+const NONE_ITEM = 'none'
+const MANAGE_ITEM = 'manage'
+/** 키보드로 열면 첫 항목부터 — 켜진(✓) 항목이 있어도 */
+const FIRST_ITEM = '[role^="menuitem"]'
+
+const buttonRef = ref<HTMLButtonElement | null>(null)
+const menuRef = ref<InstanceType<typeof EditorMenu> | null>(null)
+const menuOpen = ref<boolean>(false)
+/** 키보드로 열었다 — 첫 항목에 초점 */
+const byKeyboard = ref<boolean>(false)
+/** 위로 연다 — 단추 아래가 모자랄 때 (메뉴를 그린 직후 · 초점을 주기 전에 잰다) */
+const { upward } = usePopupPlacement({
+  open: menuOpen,
+  trigger: () => buttonRef.value,
+  popup: () => {
+    const menu: unknown = menuRef.value?.$el
+    return menu instanceof HTMLElement ? menu : null
+  },
+})
+
+const trigger = computed<HTMLElement | null>(() => buttonRef.value)
+/** 단추의 화면 낭독 이름 — "서명: 대외" · "서명: 넣지 않음" · 고친 서명이면 "서명" */
+const buttonLabel = computed(() => {
+  const { state } = props
+  if (state.kind === 'none') return COMPOSE_SIGNATURE_TEXT.buttonLabel(COMPOSE_SIGNATURE_TEXT.none)
+  if (state.kind === 'signature') {
+    const current = props.signatures.find((signature) => signature.id === state.id)
+    if (current) return COMPOSE_SIGNATURE_TEXT.buttonLabel(current.name)
+  }
+  return COMPOSE_SIGNATURE_TEXT.button
+})
+const items = computed<EditorMenuItem[]>(() => {
+  const { state } = props
+  return [
+    ...props.signatures.map((signature) => ({
+      id: `${SIGNATURE_ITEM_PREFIX}${signature.id}`,
+      role: 'menuitemradio' as const,
+      label: signature.name,
+      checked: state.kind === 'signature' && state.id === signature.id,
+    })),
+    {
+      id: NONE_ITEM,
+      role: 'menuitemradio' as const,
+      label: COMPOSE_SIGNATURE_TEXT.none,
+      checked: state.kind === 'none',
+    },
+    menuSeparator('separator'),
+    { id: MANAGE_ITEM, label: COMPOSE_SIGNATURE_TEXT.manage },
+  ]
+})
+
+function openMenu(keyboard: boolean) {
+  if (props.disabled) return
+  byKeyboard.value = keyboard
+  menuOpen.value = true
+  emit('open')
+}
+
+function onClick(event: MouseEvent) {
+  if (menuOpen.value) {
+    menuOpen.value = false
+    return
+  }
+  // detail 0 — Enter · Space 로 눌렀다
+  openMenu(event.detail === 0)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'ArrowDown' || menuOpen.value) return
+  event.preventDefault()
+  openMenu(true)
+}
+
+function onMenuClose(restoreFocus: boolean) {
+  menuOpen.value = false
+  if (restoreFocus) buttonRef.value?.focus()
+}
+
+function onSelect(id: string) {
+  menuOpen.value = false
+  buttonRef.value?.focus()
+  if (id === MANAGE_ITEM) emit('manage')
+  else if (id === NONE_ITEM) emit('select', null)
+  else if (id.startsWith(SIGNATURE_ITEM_PREFIX)) emit('select', id.slice(SIGNATURE_ITEM_PREFIX.length))
+}
+
+// 보내는 중 · 양식을 새로 채움 등으로 꺼지면 메뉴도 닫는다
+watch(
+  () => props.disabled,
+  (off) => {
+    if (off) menuOpen.value = false
+  },
+)
+</script>
+
+<template>
+  <div class="compose-signature">
+    <button
+      id="compose-signature"
+      ref="buttonRef"
+      type="button"
+      class="compose-signature__button"
+      aria-haspopup="menu"
+      :aria-expanded="menuOpen"
+      :aria-label="buttonLabel"
+      :disabled="disabled"
+      @click="onClick"
+      @keydown="onKeydown"
+    >
+      <span>{{ COMPOSE_SIGNATURE_TEXT.button }}</span>
+      <AppIcon
+        name="chevron-down"
+        :size="12"
+        :stroke-width="2.25"
+      />
+    </button>
+    <EditorMenu
+      v-if="menuOpen"
+      ref="menuRef"
+      :class="['compose-signature__menu', { 'compose-signature__menu--up': upward }]"
+      :label="COMPOSE_SIGNATURE_TEXT.menuLabel"
+      :items="items"
+      :trigger="trigger"
+      :focus-content="!byKeyboard"
+      :initial-focus="FIRST_ITEM"
+      @select="onSelect"
+      @close="onMenuClose"
+    />
+    <span
+      class="visually-hidden"
+      role="status"
+      data-signature-status
+    >{{ announcement }}</span>
+  </div>
+</template>
+
+<style scoped>
+/* 메뉴가 이 단추 아래(모자라면 위)에서 열린다 */
+.compose-signature {
+  position: relative;
+  display: inline-flex;
+}
+
+/* [임시 저장]과 같은 글자 단추 44 + ▾ (디자인 원본 Signature16 6) */
+.compose-signature__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-height: var(--size-touch);
+  padding: 0 var(--space-10) 0 var(--space-14);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-strong);
+  font-weight: 500;
+}
+
+.compose-signature__button:hover:not(:disabled),
+.compose-signature__button[aria-expanded='true'] {
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+}
+
+.compose-signature__button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 메뉴 폭 220 — 긴 이름은 한 줄로 줄인다 */
+.compose-signature__menu {
+  width: 13.75rem;
+  box-sizing: border-box;
+}
+
+.compose-signature__menu :deep(.menu__label) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 아래가 모자라면 위로 — 단추 위쪽에 같은 간격을 두고 연다 (편집기 메뉴의 아래 열림보다 앞선다) */
+.compose-signature .compose-signature__menu--up {
+  top: auto;
+  bottom: calc(100% + var(--space-4));
+}
+</style>
diff --git a/frontend/src/components/mail/editor/EditorMenu.vue b/frontend/src/components/mail/editor/EditorMenu.vue
index a8e35a4..c8e0da3 100644
--- a/frontend/src/components/mail/editor/EditorMenu.vue
+++ b/frontend/src/components/mail/editor/EditorMenu.vue
@@ -19,6 +19,11 @@ interface Props {
   align?: 'start' | 'end'
   /** 마우스로 열었다 — 항목 대신 메뉴 자체에 초점 (EditorPopup) */
   focusContent?: boolean
+  /**
+   * 키보드로 열 때 초점을 줄 항목 (선택자) — 주지 않으면 켜진 항목, 그다음 첫 항목 (EditorPopup).
+   * 메뉴 단추(쓰기 화면 [서명 ▾] — 16단계)는 켜진 항목이 있어도 첫 항목에서 시작한다
+   */
+  initialFocus?: string
 }
 
 interface Emits {
@@ -30,6 +35,7 @@ interface Emits {
 withDefaults(defineProps<Props>(), {
   align: 'start',
   focusContent: false,
+  initialFocus: '',
 })
 const emit = defineEmits<Emits>()
 
@@ -66,6 +72,7 @@ function select(item: EditorMenuItem, event: MouseEvent) {
     :trigger="trigger"
     :align="align"
     :focus-content="focusContent"
+    :initial-focus="initialFocus"
     @close="(restore) => emit('close', restore)"
   >
     <template
diff --git a/frontend/src/components/mail/editor/MailEditor.vue b/frontend/src/components/mail/editor/MailEditor.vue
index f7622d0..4cf3ab8 100644
--- a/frontend/src/components/mail/editor/MailEditor.vue
+++ b/frontend/src/components/mail/editor/MailEditor.vue
@@ -10,6 +10,8 @@
 //   맞춘 내용으로 편집기를 만들므로 실행 취소 기록은 맞춘 내용에서 시작한다.
 //   보내기 직전에 다시 재어(getContentForSend) 넘으면 인용을 더 줄인다 — 내 글만으로 넘으면 보내지 않는다.
 // - 붙여 넣거나 끌어다 놓은 파일은 본문에 넣지 않고 files 로 넘긴다 — 쓰기 화면이 첨부로 올린다.
+// - 서명 자리(16단계): 쓰기 화면의 [서명 ▾]가 replaceSignature 로 그 자리만 바꾸고, 어느 서명이 들었는지는
+//   signaturePlace · signatureFingerprint 로 견준다 (mail-signature-block.ts — 앱과 같은 경계라 저장본에서도 다시 찾는다).
 // - 편집 영역(.compose-field)의 아래 선이 포커스 선이다 (styles/base.css). 첨부 영역의 위 선은 없다.
 import {
   Editor,
@@ -34,6 +36,13 @@ import type {
   MailEditorSnapshot,
 } from '@/components/mail/editor/mail-editor-handle'
 import { docToTextWithQuoteStart, normalizeIncomingHtml, toMailHtml } from '@/components/mail/editor/mail-serialize'
+import {
+  findSignatureBlock,
+  replaceSignatureTransaction,
+  signatureFingerprintOf,
+  signatureNodeOf,
+  withSignatureBoundary,
+} from '@/components/mail/editor/mail-signature-block'
 import { hasSignatureImage } from '@/components/mail/editor/signature-image'
 import { DROP_TO_ATTACH_LABEL, MAIL_EDITOR_BODY_ID } from '@/shared/constants/mail-editor'
 import { pastedFiles, pastedImageName, renameFile } from '@/shared/utils/editor-files'
@@ -150,7 +159,9 @@ const editor = markRaw(
  * 문서의 보낼 모양 — 서식 본문과 같은 내용의 텍스트. 원문 인용이 있으면 서식 본문에 인용 경계 표시를 두고
  * 텍스트에서 인용이 시작하는 자리를 함께 준다 (11단계 — 대용량 첨부 덩이 자리)
  */
-function contentOf(doc: ProseMirrorNode): MailEditorContent {
+function contentOf(edited: ProseMirrorNode): MailEditorContent {
+  // 서명 자리 앞의 빈 줄을 지킨다 — 한글 조합 중에 빠진 채 저장 · 보내도 다시 열 때 서명 자리를 찾게 (mail-signature-block.ts)
+  const doc = withSignatureBoundary(edited)
   const { text, quoteStart } = docToTextWithQuoteStart(doc)
   // 보이는 내용이 없으면 텍스트 메일로 — 빈 문단만 남은 서식 본문을 보내지 않는다.
   // 글자 없이 서명 그림만 있으면 서식 본문으로 보낸다 (텍스트 대체 본문에는 그림이 없다)
@@ -235,6 +246,26 @@ function markSaved(savePoint: EditorSavePoint) {
   opened = { doc, settled: doc }
 }
 
+/** 본문 안 서명 자리의 비교 값 — 없으면 null (16단계 [서명 ▾], mail-signature-block.ts) */
+function signaturePlace(): string | null {
+  const found = findSignatureBlock(editor.state.doc)
+  return found ? signatureFingerprintOf(found.node) : null
+}
+
+/** 서명 HTML 의 비교 값 — 편집기 스키마로 읽은 모양으로 (읽을 것이 없으면 빈 글) */
+function signatureFingerprint(html: string): string {
+  const node = signatureNodeOf(editor.schema, html)
+  return node ? signatureFingerprintOf(node) : ''
+}
+
+/** 서명 자리만 바꾼다 — 실행 취소로 되돌린다. 서명 글의 주소를 자동 링크로 바꾸지 않는다 (서명에 있는 그대로) */
+function replaceSignature(html: string | null) {
+  if (!mounted) return
+  const node = html === null ? null : signatureNodeOf(editor.schema, html)
+  const tr = replaceSignatureTransaction(editor.state, node)
+  if (tr?.docChanged) editor.view.dispatch(tr.setMeta('preventAutolink', true))
+}
+
 /**
  * 본문에 초점을 준다 — 'start' · 'end' 면 커서를 맨 위(답장) · 맨 끝으로, 주지 않으면 커서 자리 그대로.
  * TipTap 의 focus 명령은 다음 화면 그리기 때 초점을 옮긴다 — 곧바로 쓰는 첫 글자가 사라지지 않게 바로 옮긴다.
@@ -273,7 +304,17 @@ watch(
   },
 )
 
-defineExpose({ getContent, getContentForSend, focus, isChanged, captureForSave, markSaved })
+defineExpose({
+  getContent,
+  getContentForSend,
+  focus,
+  isChanged,
+  captureForSave,
+  markSaved,
+  signaturePlace,
+  signatureFingerprint,
+  replaceSignature,
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/mail/editor/mail-editor-handle.ts b/frontend/src/components/mail/editor/mail-editor-handle.ts
index 539f70b..b00d84f 100644
--- a/frontend/src/components/mail/editor/mail-editor-handle.ts
+++ b/frontend/src/components/mail/editor/mail-editor-handle.ts
@@ -59,6 +59,18 @@ export interface MailEditorHandle {
   captureForSave: () => MailEditorSnapshot | null
   /** 저장이 끝났다 — 그때의 본문을 "바꾸지 않은" 기준으로 삼는다 (isChanged 가 이것과 견준다) */
   markSaved: (savePoint: EditorSavePoint) => void
+  /**
+   * 본문 안 서명 자리의 비교 값 — 서명 자리가 없으면 null (16단계 [서명 ▾] — 어느 서명이 들었는지 signatureFingerprint 와 견준다).
+   * 글(공백을 하나로)과 그림으로 만든 값이라 서명 안을 고쳤으면 어느 서명과도 같지 않다
+   */
+  signaturePlace: () => string | null
+  /** 서명 HTML 의 비교 값 — signaturePlace 와 같은 규칙(편집기 스키마로 읽은 모양) */
+  signatureFingerprint: (html: string) => string
+  /**
+   * 서명 자리만 바꾼다 — 쓴 글 · 인용은 그대로이고 실행 취소로 되돌린다. html 이 null 이면 서명 자리와 그 앞의 빈 줄을 뺀다.
+   * 서명 자리가 없으면 처음 넣는 자리(새 메일은 본문 끝, 답장 · 전달은 원문 인용 위)에 빈 줄 하나 뒤로 넣는다
+   */
+  replaceSignature: (html: string | null) => void
 }
 
 /** 편집기 청크를 내려받는다 — 쓰기 화면의 defineAsyncComponent 가 부른다 (TipTap 은 이 청크에만 있다) */
diff --git a/frontend/src/components/mail/editor/mail-extensions.ts b/frontend/src/components/mail/editor/mail-extensions.ts
index 8480d1e..cb7ecf6 100644
--- a/frontend/src/components/mail/editor/mail-extensions.ts
+++ b/frontend/src/components/mail/editor/mail-extensions.ts
@@ -3,6 +3,7 @@
 // 문단·줄바꿈, 굵게·기울임·밑줄·취소선, 글자 색·배경 색·글꼴·글자 크기, 정렬·들여쓰기, 목록, 인용, 가로줄, 표, 링크, 서명 그림.
 // 제목 스타일·코드·줄 간격은 두지 않는다 — 붙여 넣은 글에 있어도 스키마가 받지 않아 빠진다.
 // 그림은 서명 그림(/api/mail-signature/images/{id})만 받는다 (signature-image.ts — 쓰기 화면이 넣어 둔 서명 · 임시 저장본).
+// 서명 자리(16단계 — [서명 ▾] 가 바꾸는 자리)는 블록 노드 하나다 — 빈 줄 뒤의 속성 없는 div 로 나가고 들어온다 (mail-signature-block.ts).
 // 붙여 넣은 글 · 원문 인용의 서식 값은 서버 형식에 맞는 것만 읽는다 (mail-format-extensions.ts — 보이는 모양 = 보내는 모양).
 import { Extension, type AnyExtension } from '@tiptap/core'
 import { TableKit } from '@tiptap/extension-table'
@@ -23,6 +24,7 @@ import {
   mailOrderedList,
   starterKitPart,
 } from '@/components/mail/editor/mail-format-extensions'
+import { MailSignatureBlock } from '@/components/mail/editor/mail-signature-block'
 import { SignatureImage } from '@/components/mail/editor/signature-image'
 import {
   EDITOR_INDENT_STEP_PX,
@@ -266,6 +268,7 @@ export function createMailEditorExtensions(hooks: Partial<MailEditorHooks> = {})
     MailTableCell,
     MailTableHeader,
     SignatureImage,
+    MailSignatureBlock,
     Placeholder.configure({ placeholder: EDITOR_PLACEHOLDER }),
     MailEditorBehavior.configure({
       openLink: hooks.openLink ?? null,
diff --git a/frontend/src/components/mail/editor/mail-signature-block.spec.ts b/frontend/src/components/mail/editor/mail-signature-block.spec.ts
new file mode 100644
index 0000000..2004251
--- /dev/null
+++ b/frontend/src/components/mail/editor/mail-signature-block.spec.ts
@@ -0,0 +1,266 @@
+import { Editor, createDocument, getHTMLFromFragment, getSchema } from '@tiptap/core'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { EditorState, TextSelection } from '@tiptap/pm/state'
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+
+import { createMailEditorExtensions } from '@/components/mail/editor/mail-extensions'
+import { docToText, normalizeIncomingHtml, toMailHtml } from '@/components/mail/editor/mail-serialize'
+import {
+  MAIL_SIGNATURE_NODE,
+  findSignatureBlock,
+  replaceSignatureTransaction,
+  signatureFingerprintOf,
+  signatureNodeOf,
+  withSignatureBoundary,
+} from '@/components/mail/editor/mail-signature-block'
+import { buildQuoteHtml } from '@/shared/utils/mail-quote'
+import { newMailHtmlWithSignature, signatureBlockHtml } from '@/shared/utils/mail-signature'
+import { installProseMirrorDom } from '@/test-utils/prosemirror-dom'
+
+// 쓰기 본문의 서명 자리 (16단계 — 디자인 원본 Signature16 6 · 계약 2절 "앱이 만드는 모양")
+
+const schema = getSchema(createMailEditorExtensions())
+const IMAGE_ID = '3f1c0a2e-0f1b-4f2a-9a1e-6c9f0a1b2c3d'
+/** 서버가 정화해 준 서명 HTML 모양 — 글꼴 div 로 감쌌다 */
+const OUTSIDE =
+  '<div style="font-family: \'Malgun Gothic\'; font-size: 14px; line-height: 1.75">' +
+  '<p style="margin: 0"><strong>김아라</strong> · 인프라팀</p>' +
+  `<p style="margin: 0">ARA SYSTEM · <img src="/api/mail-signature/images/${IMAGE_ID}" width="144" alt=""></p></div>`
+const INSIDE = '<p style="margin: 0"><strong>김아라</strong> · 인프라팀</p><p style="margin: 0">내선 1234</p>'
+/** 보낸 본문의 감싸개 (toMailHtml · 앱 kMailBodyWrapperStyle) */
+const WRAPPER_STYLE = "font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; line-height: 1.75"
+
+function doc(html: string): ProseMirrorNode {
+  return createDocument(normalizeIncomingHtml(html), schema)
+}
+
+/** 맨 위 단계 블록의 모양 — 서명 자리는 [서명:글], 원문 인용은 [인용], 빈 문단은 '' */
+function blocks(node: ProseMirrorNode): string[] {
+  const out: string[] = []
+  node.forEach((child) => {
+    if (child.type.name === MAIL_SIGNATURE_NODE) out.push(`[서명:${child.textContent}]`)
+    else if (child.type.name === 'blockquote') out.push('[인용]')
+    else out.push(child.textContent)
+  })
+  return out
+}
+
+/** 보내는 모양 — 쓰기 화면과 같은 길 (getHTML → toMailHtml) */
+function mailHtml(node: ProseMirrorNode): string {
+  return toMailHtml(getHTMLFromFragment(node.content, schema))
+}
+
+/** 서버의 보내는 정화가 하는 일 중 경계에 닿는 것 — data-* 를 지운다 (sanitize-outgoing-html.ts) */
+function sanitizeLikeServer(html: string): string {
+  return html.replace(/ data-[a-z-]+="[^"]*"/g, '')
+}
+
+function apply(node: ProseMirrorNode, signatureHtml: string | null): ProseMirrorNode {
+  const state = EditorState.create({ doc: node, schema })
+  const signature = signatureHtml === null ? null : signatureNodeOf(schema, signatureHtml)
+  const tr = replaceSignatureTransaction(state, signature)
+  return tr ? state.apply(tr).doc : node
+}
+
+describe('서명 자리 — 읽기', () => {
+  it('새 메일은 쓸 줄 · 빈 줄 하나 · 서명 자리 — 서명 안의 글꼴 div 는 풀고 문단만 둔다', () => {
+    const node = doc(newMailHtmlWithSignature(OUTSIDE))
+    expect(blocks(node)).toEqual(['', '', '[서명:김아라 · 인프라팀ARA SYSTEM · ]'])
+    expect(findSignatureBlock(node)?.index).toBe(2)
+  })
+
+  it('답장 · 전달은 인용 위 — 쓸 줄 · 빈 줄 · 서명 자리 · 인용', () => {
+    const html = buildQuoteHtml([{ label: '제목', value: '일정' }], '<p>원문</p>', signatureBlockHtml(INSIDE))
+    expect(blocks(doc(html))).toEqual(['', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+  })
+
+  it('보낸(저장한) 본문은 빈 문단 뒤 속성 없는 div 로 나가고, 서버가 정화한 뒤 다시 열어도 그 자리를 찾는다', () => {
+    const node = doc(buildQuoteHtml([{ label: '제목', value: '일정' }], '<p>원문</p>', signatureBlockHtml(INSIDE)))
+    const sent = mailHtml(node)
+    // 앱과 같은 경계 — 빈 문단(<br>) 바로 뒤의 속성 없는 div, 안의 문단은 margin: 0
+    expect(sent).toContain(
+      '<p style="margin: 0"><br></p><div><p style="margin: 0"><strong>김아라</strong> · 인프라팀</p><p style="margin: 0">내선 1234</p></div>',
+    )
+    const reopened = doc(sanitizeLikeServer(sent))
+    expect(blocks(reopened)).toEqual(['', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+    const before = findSignatureBlock(node)
+    const after = findSignatureBlock(reopened)
+    expect(before && after && signatureFingerprintOf(after.node)).toBe(before && signatureFingerprintOf(before.node))
+  })
+
+  it('앱이 만든 본문(compose_body.dart)도 서명 자리로 읽는다 — 감싸개 · 빈 문단 · 서명 div · 원문 인용', () => {
+    const app =
+      `<div style="${WRAPPER_STYLE}">` +
+      '<p style="margin: 0">확인했습니다.</p><p style="margin: 0"><br></p>' +
+      '<div><p style="margin: 0">김아라 · 인프라팀</p></div>' +
+      '<blockquote style="margin: 24px 0 0; padding: 2px 0 2px 14px"><p style="margin: 0; font-size: 12.5px"><strong>원본 메일</strong></p>' +
+      '<table style="margin: 0 0 12px"><tbody><tr><td>제목</td><td>일정</td></tr></tbody></table><p style="margin: 0">원문</p></blockquote></div>'
+    expect(blocks(doc(app))).toEqual(['확인했습니다.', '', '[서명:김아라 · 인프라팀]', '[인용]'])
+  })
+
+  it.each([
+    ['빈 문단 뒤가 아니다', '<p>글</p><div><p>서명 같은 글</p></div>'],
+    ['속성이 있다', '<p>글</p><p></p><div style="color: #344054"><p>꾸민 div</p></div>'],
+    ['글도 그림도 없다(인용 경계 표시가 남은 빈 div)', '<p>글</p><p></p><div></div><p>다음</p>'],
+    ['원문 인용 안이다', '<p>글</p><blockquote><p>원본 메일</p><p></p><div><p>남의 서명</p></div></blockquote>'],
+  ])('속성 없는 div 라도 서명 자리가 아니다 — %s', (_label, html) => {
+    expect(findSignatureBlock(doc(html))).toBeNull()
+  })
+})
+
+describe('서명 자리 — 바꾸기 (replaceSignatureTransaction)', () => {
+  const NEW_MAIL = newMailHtmlWithSignature(OUTSIDE)
+
+  it('다른 서명으로 — 그 자리만 바뀌고 쓴 글 · 인용은 그대로', () => {
+    const reply = buildQuoteHtml([{ label: '제목', value: '일정' }], '<p>원문</p>', signatureBlockHtml(OUTSIDE))
+    const written = doc(reply.replace('<p></p>', '<p>보내 주신 견적서 잘 받았습니다.</p>'))
+    const changed = apply(written, INSIDE)
+    expect(blocks(changed)).toEqual(['보내 주신 견적서 잘 받았습니다.', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+    // 텍스트 대체 본문 — 내 글 · 빈 줄 · 서명 · 인용 줄 (서명 뒤에는 빈 줄이 없다 — 앱과 같다)
+    expect(docToText(changed)).toBe(
+      '보내 주신 견적서 잘 받았습니다.\n\n김아라 · 인프라팀\n내선 1234\n> 원본 메일\n> 제목: 일정\n>\n> 원문',
+    )
+  })
+
+  it('넣지 않음 — 서명 자리와 그 앞의 빈 줄을 뺀다', () => {
+    expect(blocks(apply(doc(NEW_MAIL.replace('<p></p>', '<p>안녕하세요.</p>')), null))).toEqual(['안녕하세요.'])
+  })
+
+  it('서명 자리가 없으면 처음 넣는 자리에 — 새 메일은 쓴 글 끝에 빈 줄 하나 뒤로 (있는 빈 줄을 쓴다)', () => {
+    expect(blocks(apply(doc('<p>안녕하세요.</p>'), INSIDE))).toEqual(['안녕하세요.', '', '[서명:김아라 · 인프라팀내선 1234]'])
+    expect(blocks(apply(doc('<p>안녕하세요.</p><p></p><p></p>'), INSIDE))).toEqual([
+      '안녕하세요.',
+      '',
+      '[서명:김아라 · 인프라팀내선 1234]',
+      '',
+    ])
+    // 아무것도 쓰지 않았다 — 쓸 줄 · 빈 줄 · 서명 (처음 넣는 모양과 같다)
+    expect(blocks(apply(doc('<p></p>'), INSIDE))).toEqual(['', '', '[서명:김아라 · 인프라팀내선 1234]'])
+  })
+
+  it('서명 자리가 없으면 처음 넣는 자리에 — 답장 · 전달은 인용 위', () => {
+    const reply = doc(buildQuoteHtml([{ label: '제목', value: '일정' }], '<p>원문</p>'))
+    expect(blocks(apply(reply, INSIDE))).toEqual(['', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+    const written = doc(buildQuoteHtml([{ label: '제목', value: '일정' }], '<p>원문</p>').replace('<p></p>', '<p>네.</p>'))
+    expect(blocks(apply(written, INSIDE))).toEqual(['네.', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+  })
+
+  it('서명 자리도 없고 넣지 않음이면 바꿀 것이 없다', () => {
+    const state = EditorState.create({ doc: doc('<p>글</p>'), schema })
+    expect(replaceSignatureTransaction(state, null)).toBeNull()
+  })
+})
+
+describe('어느 서명이 들었나 (signatureFingerprintOf)', () => {
+  it('같은 서명은 같은 값 — 서명 안을 고치면 달라진다, 공백 · nbsp 는 하나로 본다', () => {
+    const inserted = findSignatureBlock(doc(newMailHtmlWithSignature(INSIDE)))
+    const fresh = signatureNodeOf(schema, INSIDE)
+    expect(inserted && fresh && signatureFingerprintOf(inserted.node)).toBe(fresh && signatureFingerprintOf(fresh))
+
+    const spaced = signatureNodeOf(schema, '<p>김아라 \u00a0· 인프라팀</p>')
+    const plain = signatureNodeOf(schema, '<p>김아라  · 인프라팀</p>')
+    expect(spaced && signatureFingerprintOf(spaced)).toBe(plain && signatureFingerprintOf(plain))
+
+    const edited = signatureNodeOf(schema, INSIDE.replace('1234', '5678'))
+    expect(edited && signatureFingerprintOf(edited)).not.toBe(fresh && signatureFingerprintOf(fresh))
+  })
+
+  it('그림도 견준다 — 글이 같아도 그림이 다르면 다른 서명', () => {
+    const withLogo = signatureNodeOf(schema, OUTSIDE)
+    const withoutLogo = signatureNodeOf(schema, OUTSIDE.replace(/<img[^>]*>/, ''))
+    expect(withLogo && signatureFingerprintOf(withLogo)).not.toBe(withoutLogo && signatureFingerprintOf(withoutLogo))
+  })
+})
+
+describe('서명 자리 지키기 — 하나뿐 · 앞에는 늘 빈 줄 (2026-11-10 리뷰 M3)', () => {
+  const editors: Editor[] = []
+
+  beforeAll(installProseMirrorDom)
+
+  afterEach(() => {
+    for (const editor of editors.splice(0)) editor.destroy()
+  })
+
+  /** 쓰기 화면의 편집기와 같게 — 플러그인(서명 자리 지키기)은 화면에 붙일 때 켜진다 */
+  function mountedEditor(content: string): Editor {
+    const editor = new Editor({ element: null, extensions: createMailEditorExtensions(), content })
+    editors.push(editor)
+    editor.mount(document.createElement('div'))
+    return editor
+  }
+
+  /** 서명 앞 빈 줄 안에 커서 — 맨 위 단계 index 번째 문단의 처음 */
+  function cursorInto(editor: Editor, index: number) {
+    let pos = 0
+    for (let at = 0; at < index; at += 1) pos += editor.state.doc.child(at).nodeSize
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, pos + 1)))
+  }
+
+  /** 저장하고 다시 연 모양 — 보내는 모양(빈 줄을 지킨 문서 → toMailHtml)에서 서버 정화처럼 data-* 를 지우고 다시 읽는다 */
+  function reopened(editor: Editor): ProseMirrorNode {
+    const html = toMailHtml(getHTMLFromFragment(withSignatureBoundary(editor.state.doc).content, schema))
+    return doc(sanitizeLikeServer(html))
+  }
+
+  const WRITTEN = newMailHtmlWithSignature(INSIDE).replace('<p></p>', '<p>안녕하세요.</p>')
+  const SIGNED = '[서명:김아라 · 인프라팀내선 1234]'
+
+  it('서명 자리가 하나 더 들어오면(서명 안에서 복사해 붙여 넣기 등) 처음부터 있던 것만 두고 나머지는 문단으로 푼다', () => {
+    const editor = mountedEditor(newMailHtmlWithSignature(INSIDE).replace('<p></p>', '<p>첫 줄</p>'))
+    editor.commands.insertContentAt(0, signatureBlockHtml('<p>복사한 서명</p>'))
+
+    const signatures: string[] = []
+    editor.state.doc.forEach((child) => {
+      if (child.type.name === MAIL_SIGNATURE_NODE) signatures.push(child.textContent)
+    })
+    expect(signatures).toEqual(['김아라 · 인프라팀내선 1234'])
+    expect(editor.state.doc.textContent).toContain('복사한 서명')
+  })
+
+  it('서명 위 빈 줄에 글을 쓰면 그 아래 · 서명 위에 빈 줄을 다시 둔다 — 커서는 쓰던 자리, 실행 취소는 입력과 함께, 다시 열어도 서명 자리', () => {
+    const editor = mountedEditor(WRITTEN)
+    cursorInto(editor, 1)
+    editor.commands.insertContent('감사합니다.')
+
+    expect(blocks(editor.state.doc).slice(0, 4)).toEqual(['안녕하세요.', '감사합니다.', '', SIGNED])
+    expect(editor.state.selection.$from.parent.textContent).toBe('감사합니다.')
+    expect(blocks(reopened(editor)).slice(0, 4)).toEqual(['안녕하세요.', '감사합니다.', '', SIGNED])
+
+    editor.commands.undo()
+    expect(blocks(editor.state.doc).slice(0, 3)).toEqual(['안녕하세요.', '', SIGNED])
+  })
+
+  it('Backspace 로 서명 위 빈 줄을 지워도 빈 줄을 다시 둔다 — 쓴 글은 그대로, 커서는 윗줄 끝, 다시 열어도 서명 자리', () => {
+    const editor = mountedEditor(WRITTEN)
+    cursorInto(editor, 1)
+    editor.commands.keyboardShortcut('Backspace')
+
+    expect(blocks(editor.state.doc).slice(0, 3)).toEqual(['안녕하세요.', '', SIGNED])
+    expect(editor.state.selection.$from.parent.textContent).toBe('안녕하세요.')
+    expect(editor.state.selection.$from.parentOffset).toBe('안녕하세요.'.length)
+    expect(blocks(reopened(editor)).slice(0, 3)).toEqual(['안녕하세요.', '', SIGNED])
+  })
+
+  it('한글을 조합하는 중에는 미룬다 — 보내고 저장하는 모양(withSignatureBoundary)이 채우고, 조합이 끝난 다음 입력에서 편집기도 채운다', () => {
+    const editor = mountedEditor(WRITTEN)
+    cursorInto(editor, 1)
+    editor.view.dispatch(editor.state.tr.insertText('감').setMeta('composition', 1))
+
+    expect(blocks(editor.state.doc).slice(0, 3)).toEqual(['안녕하세요.', '감', SIGNED])
+    expect(blocks(withSignatureBoundary(editor.state.doc)).slice(0, 4)).toEqual(['안녕하세요.', '감', '', SIGNED])
+    expect(blocks(reopened(editor)).slice(0, 4)).toEqual(['안녕하세요.', '감', '', SIGNED])
+
+    editor.commands.insertContent(' ')
+    expect(blocks(editor.state.doc).slice(0, 4)).toEqual(['안녕하세요.', '감 ', '', SIGNED])
+  })
+
+  it('빈 줄이 있으면 그대로 — 앱이 만든 저장본 모양도 바꾸지 않는다', () => {
+    const app = doc(
+      `<div style="${WRAPPER_STYLE}">` +
+        '<p style="margin: 0">확인했습니다.</p><p style="margin: 0"><br></p>' +
+        '<div><p style="margin: 0">김아라 · 인프라팀</p></div></div>',
+    )
+    expect(withSignatureBoundary(app)).toBe(app)
+    expect(mailHtml(app)).toContain('<p style="margin: 0"><br></p><div><p style="margin: 0">김아라 · 인프라팀</p></div>')
+  })
+})
diff --git a/frontend/src/components/mail/editor/mail-signature-block.ts b/frontend/src/components/mail/editor/mail-signature-block.ts
new file mode 100644
index 0000000..1892b0d
--- /dev/null
+++ b/frontend/src/components/mail/editor/mail-signature-block.ts
@@ -0,0 +1,269 @@
+// 쓰기 본문의 서명 자리 — 16단계 [서명 ▾] (디자인 원본 Signature16 6 · 계약 2절 "앱이 만드는 모양")
+// 서명 자리는 빈 줄 하나 뒤의 서명 덩어리다. 편집기 안에서는 블록 노드 하나(mailSignature — 안은 서명의 문단들)이고,
+// 보낼 때는 속성 없는 <div> 로 나간다 — 앱과 같은 경계라 임시 저장본을 다시 열어도(웹 · 앱 모두) 그 자리를 다시 찾는다.
+// - 읽기: 쓰기 화면이 처음 넣는 서명은 표시를 단 div(data-mail-signature — mail-signature.ts 의 signatureBlockHtml),
+//   저장본 · 보내기 취소로 되돌린 메일은 "맨 위 단계에서 빈 문단 바로 뒤의 속성 없는 div 이고 글이나 그림이 있다"(서버 정화가 data-* 를 지운다).
+//   맨 위 단계 = 문서 바로 아래 · 또는 문서에 하나뿐인 감싸는 div(보낸 본문의 글꼴 div) 바로 아래. 원문 인용 안의 div 는 서명 자리가 아니다.
+// - 서명 자리는 하나다 — 붙여 넣기 · 끌어 놓기로 하나 더 생기면 처음부터 있던 것만 두고 나머지는 문단으로 푼다(appendTransaction).
+// - 서명 자리 바로 앞에는 늘 빈 줄 — 그 빈 줄에 글을 쓰거나 Backspace 로 지우면 빈 줄을 다시 넣는다(appendTransaction — 한글 조합 중에는 미룬다),
+//   보내고 저장하는 모양도 한 번 더 지킨다(withSignatureBoundary — MailEditor 의 contentOf). 빈 줄이 빠지면 다시 열 때 경계를 찾지 못한다(2026-11-10 리뷰 M3).
+// - 바꾸기(replaceSignatureTransaction): 그 자리만 새 서명으로 — 쓴 글 · 인용 · 첨부는 그대로이고 실행 취소로 되돌린다.
+//   넣지 않음은 서명 자리와 그 앞의 빈 줄을 뺀다. 서명 자리가 없으면 처음 넣는 자리(새 메일은 본문 끝, 답장 · 전달은 원문 인용 위)에 빈 줄 하나 뒤로 넣는다.
+// - 어느 서명이 들었는지(signatureFingerprintOf)는 글(공백을 하나로 줄여)과 그림 주소로 견준다 — 고쳤으면 어느 서명과도 같지 않다.
+import { Node, createDocument } from '@tiptap/core'
+import { Fragment, type Node as ProseMirrorNode, type Schema } from '@tiptap/pm/model'
+import { Plugin, PluginKey, type EditorState, type Transaction } from '@tiptap/pm/state'
+
+import { blockLines, normalizeIncomingHtml } from '@/components/mail/editor/mail-serialize'
+import { SIGNATURE_IMAGE_NODE } from '@/components/mail/editor/signature-image'
+import { MAIL_SIGNATURE_MARK_ATTRIBUTE } from '@/shared/constants/mail-signature'
+import { signatureBlockHtml } from '@/shared/utils/mail-signature'
+import { normalizeSignatureImageSrc } from '@/shared/utils/outgoing-html-rules'
+
+export const MAIL_SIGNATURE_NODE = 'mailSignature'
+
+/** 빈 줄로 보는 공백 — JS 의 \s 는 nbsp(U+00A0)도 포함한다 */
+const BLANK = /^\s*$/
+
+/** 글도 그림도 없는 문단인가 (DOM) — <p></p> · <p><br></p> · 공백뿐 */
+function isEmptyParagraphElement(element: Element | null): boolean {
+  return (
+    element !== null &&
+    element.tagName === 'P' &&
+    BLANK.test(element.textContent ?? '') &&
+    element.querySelector('img') === null
+  )
+}
+
+/** 맨 위 단계인가 — 문서(body) 바로 아래, 또는 body 에 하나뿐인 감싸는 div(보낸 본문의 글꼴 div) 바로 아래 */
+function isTopLevelElement(element: HTMLElement): boolean {
+  const parent = element.parentElement
+  if (!parent) return false
+  if (parent.tagName === 'BODY') return true
+  const grand = parent.parentElement
+  return (
+    parent.tagName === 'DIV' &&
+    !parent.hasAttribute(MAIL_SIGNATURE_MARK_ATTRIBUTE) &&
+    grand?.tagName === 'BODY' &&
+    grand.children.length === 1
+  )
+}
+
+/**
+ * 저장본의 서명 경계인가 — 맨 위 단계에서 빈 문단 바로 뒤의 속성 없는 div 이고 글이나 그림이 있다 (계약 2절 "앱이 만드는 모양").
+ * 인용 경계 표시(대용량 첨부)가 남은 빈 div 는 서명이 아니다
+ */
+export function isSignatureBoundaryElement(element: HTMLElement): boolean {
+  if (element.tagName !== 'DIV' || element.attributes.length > 0) return false
+  if (!isTopLevelElement(element)) return false
+  if (!isEmptyParagraphElement(element.previousElementSibling)) return false
+  return !BLANK.test(element.textContent ?? '') || element.querySelector('img') !== null
+}
+
+/** 글도 그림도 없는 문단인가 (편집기 문서) */
+export function isEmptyParagraphNode(node: ProseMirrorNode): boolean {
+  if (node.type.name !== 'paragraph') return false
+  let empty = BLANK.test(node.textContent)
+  if (empty) {
+    node.descendants((child) => {
+      if (child.type.name === SIGNATURE_IMAGE_NODE) empty = false
+      return empty
+    })
+  }
+  return empty
+}
+
+/** 문서 맨 위 단계의 서명 자리 — 없으면 null */
+export function findSignatureBlock(doc: ProseMirrorNode): { node: ProseMirrorNode; pos: number; index: number } | null {
+  let pos = 0
+  for (let index = 0; index < doc.childCount; index += 1) {
+    const child = doc.child(index)
+    if (child.type.name === MAIL_SIGNATURE_NODE) return { node: child, pos, index }
+    pos += child.nodeSize
+  }
+  return null
+}
+
+/** 서명 비교 값 — 글(공백을 하나로)과 그림 주소. 같은 서명을 넣은 자리 · 저장본에서 되찾은 자리가 같은 값이 된다 */
+export function signatureFingerprintOf(node: ProseMirrorNode): string {
+  const text = blockLines(node).join('\n').replace(/\s+/g, ' ').trim()
+  const images: string[] = []
+  node.descendants((child) => {
+    if (child.type.name === SIGNATURE_IMAGE_NODE) images.push(normalizeSignatureImageSrc(child.attrs.src) ?? '')
+    return true
+  })
+  return `${text}\n${images.join(' ')}`
+}
+
+/** 서명 HTML → 서명 자리 노드 (편집기 스키마로 읽는다 — 스키마에 없는 것은 빠진다). 읽을 것이 없으면 null */
+export function signatureNodeOf(schema: Schema, html: string): ProseMirrorNode | null {
+  const doc = createDocument(signatureBlockHtml(normalizeIncomingHtml(html)), schema)
+  const first = doc.firstChild
+  return first?.type.name === MAIL_SIGNATURE_NODE ? first : null
+}
+
+/** 맨 위 단계의 첫 원문 인용 자리 — 없으면 null */
+function mailQuoteIndex(doc: ProseMirrorNode): number | null {
+  for (let index = 0; index < doc.childCount; index += 1) {
+    const child = doc.child(index)
+    if (child.type.name === 'blockquote' && child.attrs.mailQuote) return index
+  }
+  return null
+}
+
+/** 맨 위 단계 index 번째 블록이 시작하는 자리 */
+function positionOfIndex(doc: ProseMirrorNode, index: number): number {
+  let pos = 0
+  for (let at = 0; at < index && at < doc.childCount; at += 1) pos += doc.child(at).nodeSize
+  return pos
+}
+
+/**
+ * 서명 자리가 없을 때 넣을 자리와 넣을 것 — 처음 넣는 자리와 같다: 새 메일은 본문 끝, 답장 · 전달은 원문 인용 위.
+ * 쓴 글의 마지막 블록 뒤에 빈 줄 하나 · 서명 (그 자리에 이미 빈 줄이 있으면 그것을 쓴다). 쓴 글이 없으면 쓸 줄 · 빈 줄 · 서명
+ */
+function insertionOf(doc: ProseMirrorNode): { index: number; blankLines: number } {
+  const limit = mailQuoteIndex(doc) ?? doc.childCount
+  let last = -1
+  for (let index = 0; index < limit; index += 1) {
+    if (!isEmptyParagraphNode(doc.child(index))) last = index
+  }
+  if (last < 0) {
+    // 쓴 글이 없다 — 쓸 줄과 빈 줄 하나를 둔다 (있는 빈 줄을 먼저 쓴다)
+    const present = Math.min(limit, 2)
+    return { index: present, blankLines: 2 - present }
+  }
+  const after = last + 1
+  const reuse = after < limit && isEmptyParagraphNode(doc.child(after))
+  return reuse ? { index: after + 1, blankLines: 0 } : { index: after, blankLines: 1 }
+}
+
+/**
+ * 서명 자리를 바꾸는 거래 — signature 가 null 이면 서명 자리와 그 앞의 빈 줄을 뺀다(없으면 바꿀 것이 없다 — null).
+ * 서명 자리가 없으면 처음 넣는 자리에 넣는다
+ */
+export function replaceSignatureTransaction(state: EditorState, signature: ProseMirrorNode | null): Transaction | null {
+  const { doc, schema } = state
+  const found = findSignatureBlock(doc)
+  const tr = state.tr
+  if (found && signature) {
+    tr.replaceWith(found.pos, found.pos + found.node.nodeSize, signature)
+    return tr
+  }
+  if (found) {
+    const before = found.index > 0 ? doc.child(found.index - 1) : null
+    const start = before && isEmptyParagraphNode(before) ? found.pos - before.nodeSize : found.pos
+    tr.delete(start, found.pos + found.node.nodeSize)
+    return tr
+  }
+  const paragraph = schema.nodes.paragraph
+  if (!signature || !paragraph) return null
+  const { index, blankLines } = insertionOf(doc)
+  const blanks = Array.from({ length: blankLines }, () => paragraph.create())
+  tr.insert(positionOfIndex(doc, index), Fragment.fromArray([...blanks, signature]))
+  return tr
+}
+
+/** 서명 자리 바로 앞이 빈 줄이 아니면 그 서명 자리 — 그 앞에 빈 줄을 넣어야 경계가 선다. 서명 자리가 없거나 이미 빈 줄이면 null */
+function blockMissingBlankLine(doc: ProseMirrorNode): { pos: number; index: number } | null {
+  const found = findSignatureBlock(doc)
+  if (!found) return null
+  const before = found.index > 0 ? doc.child(found.index - 1) : null
+  return before && isEmptyParagraphNode(before) ? null : found
+}
+
+/**
+ * 보내고 저장할 문서 — 서명 자리 바로 앞에 빈 줄이 없으면 하나 넣은 문서 (있으면 그대로).
+ * 편집기는 늘 빈 줄을 지키지만(아래 appendTransaction) 한글 조합 중에는 미루므로, 보내는 · 저장하는 모양에서 한 번 더 지킨다 —
+ * 빈 줄이 빠지면 다시 열 때 서명 자리를 찾지 못한다(계약 2절 "앱이 만드는 모양"의 경계). 쓴 글은 지우지 않는다
+ */
+export function withSignatureBoundary(doc: ProseMirrorNode): ProseMirrorNode {
+  const missing = blockMissingBlankLine(doc)
+  const paragraph = doc.type.schema.nodes.paragraph
+  if (!missing || !paragraph) return doc
+  const children: ProseMirrorNode[] = []
+  doc.forEach((child, _offset, index) => {
+    if (index === missing.index) children.push(paragraph.create())
+    children.push(child)
+  })
+  return doc.copy(Fragment.fromArray(children))
+}
+
+const signatureBlockKey = new PluginKey('mailSignatureBlock')
+
+/**
+ * 서명 자리는 하나 — 붙여 넣기(서명 안에서 복사한 글은 서명 자리째 붙는다) 등으로 둘 이상이 되면 처음부터 있던 것만 두고 나머지는 문단으로 푼다.
+ * 처음부터 있던 것을 모르면(없었거나 지워졌다) 첫 것을 둔다
+ */
+function unwrapExtraSignatures(
+  transactions: readonly Transaction[],
+  oldState: EditorState,
+  newState: EditorState,
+  tr: Transaction,
+) {
+  const blocks: { node: ProseMirrorNode; pos: number }[] = []
+  newState.doc.forEach((child, offset) => {
+    if (child.type.name === MAIL_SIGNATURE_NODE) blocks.push({ node: child, pos: offset })
+  })
+  if (blocks.length < 2) return
+  const previous = findSignatureBlock(oldState.doc)
+  let kept = 0
+  if (previous) {
+    let mapped: number | null = previous.pos
+    for (const transaction of transactions) {
+      const result = transaction.mapping.mapResult(mapped)
+      mapped = result.deleted ? null : result.pos
+      if (mapped === null) break
+    }
+    const index = blocks.findIndex((block) => block.pos === mapped)
+    if (index >= 0) kept = index
+  }
+  // 뒤에서부터 풀어 앞 블록의 자리가 바뀌지 않게
+  for (let index = blocks.length - 1; index >= 0; index -= 1) {
+    if (index === kept) continue
+    const block = blocks[index]
+    if (block) tr.replaceWith(block.pos, block.pos + block.node.nodeSize, block.node.content)
+  }
+}
+
+/**
+ * 서명 자리 지키기 — 문서가 바뀐 거래 뒤에 (1) 서명 자리를 하나로 (2) 서명 자리 바로 앞에 빈 줄을 둔다.
+ * (2)는 그 빈 줄에 글을 쓰거나(Backspace · Delete 로) 빈 줄을 지웠을 때 빈 줄을 다시 넣는 것이다 — 쓴 글은 그대로 두고 그 아래 · 서명 위에 새 빈 줄,
+ * 커서는 쓰던 자리 그대로, 실행 취소는 그 입력과 한 번에 되돌린다(덧붙인 거래는 입력과 같은 기록 묶음).
+ * 한글을 조합하는 중(거래의 composition 표시)에는 미룬다 — 조합 중인 글 옆의 화면을 바꾸지 않게. 다음 거래 · 보내고 저장하는 모양(withSignatureBoundary)이 채운다
+ */
+function guardSignatureBlock(transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) {
+  if (!transactions.some((transaction) => transaction.docChanged)) return null
+  const tr = newState.tr
+  unwrapExtraSignatures(transactions, oldState, newState, tr)
+  const composing = transactions.some((transaction) => Boolean(transaction.getMeta('composition')))
+  const paragraph = newState.schema.nodes.paragraph
+  const missing = composing ? null : blockMissingBlankLine(tr.doc)
+  if (missing && paragraph) tr.insert(missing.pos, paragraph.create())
+  return tr.docChanged ? tr : null
+}
+
+/** 서명 자리 노드 — 쓰기 본문 스키마(mail-extensions.ts)에 든다. 서명 칸(SignatureEditor) 스키마에는 없다 */
+export const MailSignatureBlock = Node.create({
+  name: MAIL_SIGNATURE_NODE,
+  group: 'block',
+  content: 'block+',
+
+  parseHTML() {
+    return [
+      // 쓰기 화면이 처음 넣는 서명 — 표시로 안다 (속성 없는 div 규칙보다 먼저)
+      { tag: `div[${MAIL_SIGNATURE_MARK_ATTRIBUTE}]`, priority: 60 },
+      // 저장본 · 앱이 만든 본문 — 빈 문단 뒤의 속성 없는 div
+      { tag: 'div', getAttrs: (element: HTMLElement) => (isSignatureBoundaryElement(element) ? null : false) },
+    ]
+  },
+
+  // 보낼 때 · 저장할 때 속성 없는 div — 앱과 같은 경계 (표시는 서버 정화가 어차피 지운다)
+  renderHTML() {
+    return ['div', 0]
+  },
+
+  addProseMirrorPlugins() {
+    return [new Plugin({ key: signatureBlockKey, appendTransaction: guardSignatureBlock })]
+  },
+})
diff --git a/frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue b/frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue
new file mode 100644
index 0000000..b70342d
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureDefaultsField.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+// 메일에 넣을 서명 — 새 메일 · 답장과 전달 (디자인 원본 Signature16 1). 지금의 두 체크(새 메일 · 답장과 전달)를 대신한다.
+// 고를 것은 서명(만든 차례) · 넣지 않음. 고르는 대로 바로 저장한다(mail-signature.store 의 chooseDefault — 한 번에 하나,
+// 끝내 실패하면 서버가 확인한 값으로 되돌린다 · 오류 알림은 인터셉터). 저장이 끝나면 고른 칸 오른쪽에 "저장했습니다"(초록 ✓ · role=status),
+// 다시 고르면 내린다. 서명이 하나도 없으면 이 칸을 감춘다(서명 화면이 그리지 않는다).
+// 고정 id — 새 메일 #signature-default-new · 답장과 전달 #signature-default-reply · 안내 #signature-defaults-hint · 저장 글 [data-default-saved]
+import { ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import { SIGNATURE_DEFAULTS_TEXT } from '@/shared/constants/mail-signature'
+import type { SignatureUse } from '@/shared/types/mail-signature'
+import { useMailSignatureStore } from '@/stores/mail-signature.store'
+
+const store = useMailSignatureStore()
+
+/** "넣지 않음" 의 값 — select 는 글만 받는다 */
+const NONE_VALUE = ''
+const HINT_ID = 'signature-defaults-hint'
+
+const FIELDS: readonly { use: SignatureUse; id: string; label: string }[] = [
+  { use: 'new', id: 'signature-default-new', label: SIGNATURE_DEFAULTS_TEXT.newMessage },
+  { use: 'reply', id: 'signature-default-reply', label: SIGNATURE_DEFAULTS_TEXT.reply },
+]
+
+/** "저장했습니다"를 보일 칸 — 마지막으로 고른 칸의 저장이 다 끝났고 성공했을 때 */
+const savedField = ref<SignatureUse | null>(null)
+let choiceSeq = 0
+
+function valueOf(use: SignatureUse): string {
+  const id = use === 'new' ? store.defaults.newMessageId : store.defaults.replyId
+  return id ?? NONE_VALUE
+}
+
+async function choose(use: SignatureUse, event: Event) {
+  const value = (event.target as HTMLSelectElement).value
+  choiceSeq += 1
+  const mine = choiceSeq
+  savedField.value = null
+  const saved = await store.chooseDefault(use, value === NONE_VALUE ? null : value)
+  if (mine === choiceSeq && saved) savedField.value = use
+}
+</script>
+
+<template>
+  <fieldset class="signature-defaults">
+    <legend class="signature-defaults__legend">
+      {{ SIGNATURE_DEFAULTS_TEXT.legend }}
+    </legend>
+    <div
+      v-for="field in FIELDS"
+      :key="field.use"
+      class="signature-defaults__row"
+    >
+      <label
+        :for="field.id"
+        class="signature-defaults__label"
+      >{{ field.label }}</label>
+      <select
+        :id="field.id"
+        class="form-input signature-defaults__select"
+        :value="valueOf(field.use)"
+        :aria-describedby="HINT_ID"
+        @change="(event) => choose(field.use, event)"
+      >
+        <option
+          v-for="signature in store.signatures"
+          :key="signature.id"
+          :value="signature.id"
+        >
+          {{ signature.name }}
+        </option>
+        <option :value="NONE_VALUE">
+          {{ SIGNATURE_DEFAULTS_TEXT.none }}
+        </option>
+      </select>
+      <span
+        class="signature-defaults__saved"
+        role="status"
+        :data-default-saved="field.use"
+      >
+        <template v-if="savedField === field.use">
+          <AppIcon
+            name="check"
+            :size="14"
+            :stroke-width="2.2"
+          />
+          <span>{{ SIGNATURE_DEFAULTS_TEXT.saved }}</span>
+        </template>
+      </span>
+    </div>
+    <p
+      :id="HINT_ID"
+      class="signature-defaults__hint"
+    >
+      {{ SIGNATURE_DEFAULTS_TEXT.hint }}
+    </p>
+  </fieldset>
+</template>
+
+<style scoped>
+.signature-defaults {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.signature-defaults__legend {
+  margin: 0 0 var(--space-6);
+  padding: 0;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.signature-defaults__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-6) var(--space-12);
+}
+
+/* 칸 이름 — 폭 84 (디자인 원본 Signature16) */
+.signature-defaults__label {
+  flex: 0 0 5.25rem;
+  color: var(--color-text-strong);
+}
+
+/* 고르기 — 폭 240, 좁으면 줄어든다 */
+.signature-defaults__select {
+  width: 15rem;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0 var(--space-10);
+  font: inherit;
+}
+
+/* "저장했습니다" — 초록 12.5 + ✓ (보내기 · 읽기 설정과 같은 색) */
+.signature-defaults__saved {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  font-size: var(--font-size-label);
+  color: var(--color-success-text);
+  white-space: nowrap;
+}
+
+.signature-defaults__hint {
+  margin: var(--space-2) 0 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue b/frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue
new file mode 100644
index 0000000..7248363
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureDeleteDialog.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// 서명 지우기 확인 (디자인 원본 Signature16 4, 공용 모양 ModalDialog — role=alertdialog, 메일함 지우기 창과 같은 폭 360)
+// "‘대외’ 서명을 지울까요?" · 기본으로 넣던 곳마다 다른 글(새 메일 · 답장과 전달 · 둘 다 · 기본 아님) · [지우기](빨강 채움) [취소].
+// 처음 초점은 [취소]이고 Esc 도 [취소]와 같다. 지우는 동안은 [지우기]를 누를 수 없다.
+// 고정 id — #signature-delete-dialog · #signature-delete-title · #signature-delete-message · #signature-delete-confirm · #signature-delete-cancel
+import { computed } from 'vue'
+
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import { SIGNATURE_DELETE_TEXT } from '@/shared/constants/mail-signature'
+import { signatureDeleteMessage, type SignatureUses } from '@/shared/utils/mail-signature'
+
+interface Props {
+  open: boolean
+  /** 지울 서명의 이름 */
+  name: string
+  /** 그 서명을 기본으로 넣는 메일 */
+  uses: SignatureUses
+  /** 지우는 중 */
+  busy?: boolean
+}
+
+interface Emits {
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  busy: false,
+})
+const emit = defineEmits<Emits>()
+
+const title = computed(() => SIGNATURE_DELETE_TEXT.title(props.name))
+const message = computed(() => signatureDeleteMessage(props.uses))
+</script>
+
+<template>
+  <ModalDialog
+    id="signature-delete-dialog"
+    :open="open"
+    role="alertdialog"
+    :title="title"
+    :message="message"
+    title-id="signature-delete-title"
+    message-id="signature-delete-message"
+    @cancel="emit('cancel')"
+  >
+    <template #actions>
+      <button
+        id="signature-delete-confirm"
+        type="button"
+        class="modal-dialog__action modal-dialog__action--danger"
+        :disabled="busy"
+        :aria-busy="busy"
+        @click="emit('confirm')"
+      >
+        {{ SIGNATURE_DELETE_TEXT.confirm }}
+      </button>
+      <!-- 처음 초점 — 실수로 Enter 를 눌러도 지워지지 않게 -->
+      <button
+        id="signature-delete-cancel"
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        autofocus
+        @click="emit('cancel')"
+      >
+        {{ SIGNATURE_DELETE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
diff --git a/frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts b/frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts
new file mode 100644
index 0000000..2193661
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureEditor.spec.ts
@@ -0,0 +1,99 @@
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+
+import { editorOf, installProseMirrorDom, pasteEvent } from '@/test-utils/prosemirror-dom'
+import SignatureEditor from './SignatureEditor.vue'
+
+// 공용 편집기 — 서명 칸 · 부재중 자동 응답 내용 칸(16단계)이 함께 쓴다 (prop 은 phase16 shared-editor.md)
+
+const IMAGE_ID = '3f1c0a2e-0f1b-4f2a-9a1e-6c9f0a1b2c3d'
+
+describe('SignatureEditor — 공용 편집기 (16단계)', () => {
+  const mounted: VueWrapper[] = []
+
+  beforeAll(installProseMirrorDom)
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) wrapper.unmount()
+    document.body.innerHTML = ''
+  })
+
+  function mountEditor(props: Record<string, unknown> = {}) {
+    const wrapper = mount(SignatureEditor, {
+      attachTo: document.body,
+      props: { labelledBy: 'field-label', ...props },
+    })
+    mounted.push(wrapper)
+    return wrapper
+  }
+
+  const toolNames = (wrapper: VueWrapper) =>
+    wrapper.findAll('[role="toolbar"] button').map((button) => button.attributes('aria-label'))
+
+  it('기본값은 서명 칸 그대로 — 편집 영역 #signature-body · 툴바 "서명 서식" · 그림 단추', () => {
+    const wrapper = mountEditor()
+    expect(wrapper.find('#signature-body').exists()).toBe(true)
+    expect(wrapper.get('[role="toolbar"]').attributes()).toMatchObject({
+      'aria-label': '서명 서식',
+      'aria-controls': 'signature-body',
+    })
+    expect(toolNames(wrapper)).toEqual(['굵게', '기울임', '밑줄', '글자 색: 기본', '링크', '그림 넣기'])
+  })
+
+  it('부재중 내용 칸처럼 — id · 툴바 이름을 바꾸고 그림을 끄면 그림 단추 · 그림 노드가 없고 파일을 받지 않는다', async () => {
+    const wrapper = mountEditor({
+      bodyId: 'vacation-body',
+      toolbarLabel: '자동 응답 서식',
+      allowImages: false,
+      initialHtml: `<p>휴가 중입니다.<img src="/api/mail-signature/images/${IMAGE_ID}" width="144" alt=""></p>`,
+    })
+    const body = wrapper.get('#vacation-body')
+    expect(body.attributes('aria-labelledby')).toBe('field-label')
+    expect(wrapper.get('[role="toolbar"]').attributes()).toMatchObject({
+      'aria-label': '자동 응답 서식',
+      'aria-controls': 'vacation-body',
+    })
+    expect(toolNames(wrapper)).toEqual(['굵게', '기울임', '밑줄', '글자 색: 기본', '링크'])
+    // 저장한 글에 그림이 섞여 와도 스키마가 받지 않아 빠진다
+    expect(body.find('img').exists()).toBe(false)
+
+    body.element.dispatchEvent(pasteEvent({ files: [new File(['x'], '사진.png', { type: 'image/png' })] }))
+    expect(wrapper.emitted('files')).toBeUndefined()
+  })
+
+  it('getText — 서식을 뺀 글(글자 수를 셀 때), getContent — 쓰기 본문과 같은 서식 본문 · 글', async () => {
+    const wrapper = mountEditor({ allowImages: false, initialHtml: '<p><strong>안녕하세요</strong>, 김아라입니다.</p><p>복귀는 11월 23일입니다.</p>' })
+    const exposed = wrapper.vm as unknown as {
+      getText: () => string
+      getContent: () => { text: string; html: string | null }
+    }
+    expect(exposed.getText()).toBe('안녕하세요, 김아라입니다.\n복귀는 11월 23일입니다.')
+    const content = exposed.getContent()
+    expect(content.text).toBe(exposed.getText())
+    expect(content.html).toMatch(/^<div style="font-family: [^"]+; font-size: 14px; line-height: 1\.75"><p style="margin: 0"><strong>/)
+
+    editorOf(wrapper.element).commands.clearContent(true)
+    expect(exposed.getText()).toBe('')
+    expect(exposed.getContent()).toEqual({ text: '', html: null, quoteStart: null })
+  })
+
+  it('invalid — 편집 영역 aria-invalid · 빨간 테두리, disabled — 읽기만 · 툴바 단추를 끈다(바꿈으로 알리지 않는다)', async () => {
+    const wrapper = mountEditor({ allowImages: false, initialHtml: '<p>내용</p>' })
+    const body = () => wrapper.get('#signature-body')
+
+    await wrapper.setProps({ invalid: true, describedBy: 'field-error' })
+    expect(body().attributes()).toMatchObject({ 'aria-invalid': 'true', 'aria-describedby': 'field-error' })
+    expect(wrapper.classes()).toContain('signature-editor--invalid')
+
+    await wrapper.setProps({ invalid: false, disabled: true })
+    expect(body().attributes('aria-invalid')).toBeUndefined()
+    expect(body().attributes('contenteditable')).toBe('false')
+    expect(body().attributes('aria-disabled')).toBe('true')
+    expect(wrapper.findAll('[role="toolbar"] button').every((button) => button.attributes('disabled') !== undefined)).toBe(true)
+    expect(wrapper.classes()).toContain('signature-editor--disabled')
+
+    await wrapper.setProps({ disabled: false })
+    expect(body().attributes('contenteditable')).toBe('true')
+    expect(wrapper.emitted('change')).toBeUndefined()
+  })
+})
diff --git a/frontend/src/components/mail/editor/signature/SignatureEditor.vue b/frontend/src/components/mail/editor/signature/SignatureEditor.vue
index 0006015..9af2b4e 100644
--- a/frontend/src/components/mail/editor/signature/SignatureEditor.vue
+++ b/frontend/src/components/mail/editor/signature/SignatureEditor.vue
@@ -6,10 +6,14 @@
 // - 내용이 바뀌면 change 로 문서를 넘긴다 — 미리 보기가 그 문서를 그린다
 // - 바꿨는가(isChanged)는 처음 불러온 서명, 저장한 뒤에는 저장한 서명(markSaved)과 견준다 — 서명 화면의 나가기 확인
 // TipTap 은 이 폴더(components/mail/editor/) 안에서만 쓴다 — 서명 화면이 지연 로딩한다.
+// 16단계 — 공용 편집기: 부재중 자동 응답의 내용 칸도 이것을 쓴다(쓰는 법은 prop 머리말). 기본값은 서명 칸 그대로다.
+// - bodyId: 편집 영역 id(툴바의 aria-controls) · toolbarLabel: 툴바 이름 · allowImages: false 면 그림 단추 · 그림 노드가 없고
+//   붙여 넣거나 끌어다 놓은 파일은 받지 않는다(무시) · invalid: aria-invalid + 빨간 테두리 · disabled: 고칠 수 없게(흐리게, 툴바 끔)
+// - 편집 영역의 최소 높이는 CSS 변수 --signature-editor-min-height(기본 8.25rem = 132) — 쓰는 쪽 감싸개에서 바꾼다
 import { Editor, getHTMLFromFragment } from '@tiptap/core'
 import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { NodeSelection } from '@tiptap/pm/state'
-import { computed, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, markRaw, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
 import type { EditorSavePoint, MailEditorContent } from '@/components/mail/editor/mail-editor-handle'
@@ -21,7 +25,12 @@ import {
 } from '@/components/mail/editor/signature-image'
 import { createSignatureEditorExtensions } from '@/components/mail/editor/signature/signature-extensions'
 import SignatureToolbar from '@/components/mail/editor/signature/SignatureToolbar.vue'
-import { SIGNATURE_TEXT, type SignatureImageSize } from '@/shared/constants/mail-signature'
+import {
+  SIGNATURE_BODY_ID,
+  SIGNATURE_TEXT,
+  SIGNATURE_TOOLBAR_LABEL,
+  type SignatureImageSize,
+} from '@/shared/constants/mail-signature'
 import type { SignatureImage } from '@/shared/types/mail'
 import { pastedFiles } from '@/shared/utils/editor-files'
 import { imageSizeOf, imageWidthFor, insertedImageWidth } from '@/shared/utils/mail-signature'
@@ -34,19 +43,29 @@ interface Props {
   labelledBy: string
   /** 아래 안내 · 오류 id (aria-describedby) */
   describedBy?: string | null
-  /** 알고 있는 그림 — 원본 폭을 찾는다 (서명이 쓰는 그림 + 이번에 올린 그림) */
-  images: ReadonlyMap<string, SignatureImage>
+  /** 알고 있는 그림 — 원본 폭을 찾는다 (서명이 쓰는 그림 + 이번에 올린 그림). 그림을 쓰지 않는 칸은 주지 않는다 */
+  images?: ReadonlyMap<string, SignatureImage>
   /** 그림을 더 넣을 수 없다 (올리는 중) */
   imageDisabled?: boolean
   /** 파일을 끌고 있다 — 칸 위에 덮개를 보인다 */
   dragging?: boolean
+  /** 편집 영역의 id — 툴바가 aria-controls 로 가리킨다. 한 화면에 칸이 둘이면 다르게 준다 (기본 "signature-body") */
+  bodyId?: string
+  /** 툴바의 화면 낭독 이름 (기본 "서명 서식") */
+  toolbarLabel?: string
+  /** 그림을 쓴다 — false 면 그림 단추가 없고, 붙여 넣은 그림은 빠지며, 붙여 넣거나 끌어다 놓은 파일은 받지 않는다 */
+  allowImages?: boolean
+  /** 잘못된 입력 — 편집 영역이 aria-invalid 이고 테두리가 빨갛다 (오류 글은 describedBy 로 잇는다) */
+  invalid?: boolean
+  /** 고칠 수 없다 — 편집 영역을 읽기만 하고(흐리게) 툴바 단추를 끈다 */
+  disabled?: boolean
 }
 
 interface Emits {
   (e: 'ready', doc: ProseMirrorNode): void
   /** 내용이 바뀌었다 (커서만 옮긴 것은 빼고) */
   (e: 'change', doc: ProseMirrorNode): void
-  /** 붙여 넣거나 끌어다 놓은 파일 — 그림으로 올린다 */
+  /** 붙여 넣거나 끌어다 놓은 파일 — 그림으로 올린다 (allowImages 가 false 면 보내지 않는다) */
   (e: 'files', files: File[]): void
   /** 그림 단추 — 파일 고르기를 연다 */
   (e: 'pick-image'): void
@@ -55,14 +74,20 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   initialHtml: '',
   describedBy: null,
+  images: () => new Map<string, SignatureImage>(),
   imageDisabled: false,
   dragging: false,
+  bodyId: SIGNATURE_BODY_ID,
+  toolbarLabel: SIGNATURE_TOOLBAR_LABEL,
+  allowImages: true,
+  invalid: false,
+  disabled: false,
 })
 const emit = defineEmits<Emits>()
 
-/** 화면에 하나뿐인 서명 칸 */
-const SIGNATURE_BODY_ID = 'signature-body'
 const IMAGE_SIZES: readonly SignatureImageSize[] = ['small', 'medium', 'original']
+/** 그림 크기 줄의 이름표 id — 한 화면에 칸이 여럿이어도 겹치지 않게 */
+const imageSizeLabelId = `${useId()}-image-size-label`
 
 const bodyRef = ref<HTMLElement | null>(null)
 const toolbarRef = ref<InstanceType<typeof SignatureToolbar> | null>(null)
@@ -74,36 +99,44 @@ let mounted = false
  */
 let baseline: { doc: ProseMirrorNode; settled: ProseMirrorNode } | null = null
 
-const extensions = createSignatureEditorExtensions({
-  openLink: () => toolbarRef.value?.openLink(),
-  focusToolbar: () => toolbarRef.value?.focusToolbar(),
-})
+const extensions = createSignatureEditorExtensions(
+  {
+    openLink: () => toolbarRef.value?.openLink(),
+    focusToolbar: () => toolbarRef.value?.focusToolbar(),
+  },
+  { images: props.allowImages },
+)
+
+/**
+ * 붙여 넣거나 끌어다 놓은 파일 — 그림을 쓰는 칸이면 files 로 넘기고, 아니면 받지 않는다(무시 — 글이 함께 오면 글은 그대로 붙는다).
+ * 넘길 파일이 없으면 false (편집기가 글을 붙인다)
+ */
+function takeFiles(files: File[]): boolean {
+  if (files.length === 0) return false
+  if (props.allowImages) emit('files', files)
+  return true
+}
 
 const editor = markRaw(
   new Editor({
     element: null,
     extensions,
+    editable: !props.disabled,
     content: props.initialHtml ? normalizeIncomingHtml(props.initialHtml) : '',
     editorProps: {
       attributes: () => ({
-        id: SIGNATURE_BODY_ID,
+        id: props.bodyId,
         role: 'textbox',
         'aria-multiline': 'true',
         'aria-labelledby': props.labelledBy,
         ...(props.describedBy ? { 'aria-describedby': props.describedBy } : {}),
+        ...(props.invalid ? { 'aria-invalid': 'true' } : {}),
+        ...(props.disabled ? { 'aria-disabled': 'true' } : {}),
       }),
-      handlePaste: (_view, event) => {
-        const files = pastedFiles(event.clipboardData)
-        if (files.length === 0) return false
-        emit('files', files)
-        return true
-      },
+      handlePaste: (_view, event) => takeFiles(pastedFiles(event.clipboardData)),
       handleDrop: (_view, event, _slice, moved) => {
         if (moved) return false
-        const files = Array.from(event.dataTransfer?.files ?? [])
-        if (files.length === 0) return false
-        emit('files', files)
-        return true
+        return takeFiles(Array.from(event.dataTransfer?.files ?? []))
       },
       transformPastedHTML: normalizeIncomingHtml,
     },
@@ -180,6 +213,11 @@ function getContent(): MailEditorContent {
   return { text, html: toMailHtml(getHTMLFromFragment(doc.content, editor.schema)), quoteStart: null }
 }
 
+/** 보이는 글 — 서식을 뺀 텍스트(getContent 의 text 와 같다, 끝의 빈 줄은 뺀다). 글자 수를 셀 때 */
+function getText(): string {
+  return docToText(editor.state.doc)
+}
+
 /** 서명이 쓰는 그림 id */
 function imageIds(): Set<string> {
   return signatureImageIdsOf(editor.state.doc)
@@ -224,23 +262,39 @@ onBeforeUnmount(() => {
 
 // 오류 안내가 생기거나 사라지면 서명 칸의 aria 속성을 다시 그린다
 watch(
-  () => props.describedBy,
+  () => [props.describedBy, props.invalid],
   () => {
     if (mounted && !editor.isDestroyed) editor.view.updateState(editor.state)
   },
 )
 
-defineExpose({ getContent, insertImage, imageIds, focus, isChanged, captureSavePoint, markSaved })
+// 고칠 수 없게 되면 읽기만 — 바꿈(change)으로 알리지 않는다
+watch(
+  () => props.disabled,
+  (disabled) => {
+    if (!editor.isDestroyed) editor.setEditable(!disabled, false)
+  },
+)
+
+defineExpose({ getContent, getText, insertImage, imageIds, focus, isChanged, captureSavePoint, markSaved })
 </script>
 
 <template>
-  <div :class="['signature-editor', { 'is-dragging': dragging }]">
+  <div
+    :class="[
+      'signature-editor',
+      { 'is-dragging': dragging, 'signature-editor--invalid': invalid, 'signature-editor--disabled': disabled },
+    ]"
+  >
     <SignatureToolbar
       ref="toolbarRef"
       :editor="editor"
       :revision="revision"
-      :controls="SIGNATURE_BODY_ID"
+      :controls="bodyId"
+      :label="toolbarLabel"
+      :allow-images="allowImages"
       :image-disabled="imageDisabled"
+      :disabled="disabled"
       @pick-image="emit('pick-image')"
     />
     <div class="signature-editor__frame">
@@ -257,16 +311,16 @@ defineExpose({ getContent, insertImage, imageIds, focus, isChanged, captureSaveP
       </div>
     </div>
     <div
-      v-if="selectedImage"
+      v-if="selectedImage && allowImages"
       class="signature-editor__sizes"
     >
       <span
-        id="signature-image-size-label"
+        :id="imageSizeLabelId"
         class="signature-editor__sizes-label"
       >{{ SIGNATURE_TEXT.imageSizeLabel }}</span>
       <div
         role="group"
-        aria-labelledby="signature-image-size-label"
+        :aria-labelledby="imageSizeLabelId"
         class="segmented"
       >
         <button
@@ -310,12 +364,32 @@ defineExpose({ getContent, insertImage, imageIds, focus, isChanged, captureSaveP
   box-shadow: 0 0 0 var(--border-width) var(--color-brand);
 }
 
+/* 잘못된 입력 — 빨간 테두리, 초점이 있으면 빨간 고리 (테두리 입력칸 .form-input 과 같은 색) */
+.signature-editor--invalid,
+.signature-editor--invalid:has(.ProseMirror:focus) {
+  border-color: var(--color-danger);
+}
+
+.signature-editor--invalid:has(.ProseMirror:focus) {
+  box-shadow: 0 0 0 var(--border-width) var(--color-danger);
+}
+
+/* 고칠 수 없다 — 다른 꺼진 칸처럼 흐리게 */
+.signature-editor--disabled {
+  opacity: 0.6;
+}
+
+.signature-editor--disabled .signature-editor__body :deep(.ProseMirror) {
+  cursor: not-allowed;
+}
+
 .signature-editor__frame {
   position: relative;
 }
 
+/* 편집 영역 최소 높이 132 — 쓰는 쪽이 --signature-editor-min-height 로 바꿀 수 있다 (부재중 내용 칸 150) */
 .signature-editor__body :deep(.ProseMirror) {
-  min-height: 8.25rem;
+  min-height: var(--signature-editor-min-height, 8.25rem);
   padding: var(--space-14) var(--space-16);
   font-family: var(--font-family-mail-body);
   font-size: var(--font-size-body);
diff --git a/frontend/src/components/mail/editor/signature/SignatureEmpty.vue b/frontend/src/components/mail/editor/signature/SignatureEmpty.vue
new file mode 100644
index 0000000..f7aa8cf
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureEmpty.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+// 서명이 없을 때 (디자인 원본 Signature16 2) — 점선 상자 안에 펜 아이콘 · "아직 서명이 없습니다" · 안내 · [새 서명](채운 단추).
+// 메일에 넣을 서명 칸과 목록은 그리지 않는다(고를 서명이 없다 — 서명 화면이 정한다).
+// 고정 id — [새 서명] #signature-empty-new
+import AppIcon from '@/components/AppIcon.vue'
+import { SIGNATURE_TEXT } from '@/shared/constants/mail-signature'
+
+interface Emits {
+  (e: 'create'): void
+}
+
+const emit = defineEmits<Emits>()
+</script>
+
+<template>
+  <div class="signature-empty">
+    <AppIcon
+      name="edit"
+      :size="36"
+      :stroke-width="1.5"
+      class="signature-empty__icon"
+    />
+    <p class="signature-empty__title">
+      {{ SIGNATURE_TEXT.emptyTitle }}
+    </p>
+    <p class="signature-empty__body">
+      {{ SIGNATURE_TEXT.emptyBody }}
+    </p>
+    <button
+      id="signature-empty-new"
+      type="button"
+      class="signature-empty__new"
+      @click="emit('create')"
+    >
+      <AppIcon
+        name="plus"
+        :size="15"
+        :stroke-width="2"
+      />
+      <span>{{ SIGNATURE_TEXT.newSignature }}</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+/* 점선 상자 — 위아래 40 · 좌우 24 (디자인 원본 Signature16 2) */
+.signature-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-40) var(--space-24);
+  border: var(--border-width) dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  text-align: center;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.signature-empty__icon {
+  color: var(--color-icon-muted);
+}
+
+.signature-empty__title {
+  margin: var(--space-4) 0 0;
+  font-size: var(--font-size-body);
+  font-weight: 600;
+}
+
+.signature-empty__body {
+  max-width: 25rem;
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.signature-empty__new {
+  margin-top: var(--space-6);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  min-height: var(--size-touch);
+  padding: 0 var(--space-16);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--color-brand);
+  color: var(--color-on-brand);
+  font-weight: 600;
+}
+
+.signature-empty__new:hover {
+  background: var(--color-brand-strong);
+}
+</style>
diff --git a/frontend/src/components/mail/editor/signature/SignatureForm.vue b/frontend/src/components/mail/editor/signature/SignatureForm.vue
index 21ae404..605afb2 100644
--- a/frontend/src/components/mail/editor/signature/SignatureForm.vue
+++ b/frontend/src/components/mail/editor/signature/SignatureForm.vue
@@ -1,109 +1,129 @@
 <script setup lang="ts">
-// 메일 서명 설정 (디자인 원본 Settings · README "2단계 › 서명") — 설정 › 메일 › 서명 화면이 지연 로딩한다 (TipTap 이 이 청크에만 있다)
-// 위에서부터 서명 칸(툴바 · 편집 영역 · 그림 크기 줄) → 안내 → 서명을 넣을 메일(새 메일 · 답장 · 전달) → [저장] → 미리 보기.
+// 서명 하나 고치기 (디자인 원본 Settings · Signature16 1 · 3 · README "2단계 › 서명" · "16단계 — 여러 서명")
+// 이름 → 서명 칸(툴바 · 편집 영역 · 그림 크기 줄) → 안내 → [저장] (+ [이 서명 지우기] — 새 서명은 [취소]) → 미리 보기.
+// 고른 서명마다 새로 만든다(서명 화면 SignatureSettings 가 key 로) — 새 서명은 처음 [저장]에 만들고, 그 뒤로는 같은 칸에서 고친다.
+// - 이름: 앞뒤 공백을 뺀 1~30자(칸이 30자에서 막는다), 같은 이름은 영문 대소문자를 가리지 않고 본다. [저장]할 때 걸리면 칸 아래 안내 대신 빨간 글과
+//   이름 칸에 초점(알림 없음), 이름을 고치면 안내로 돌아간다. 서버가 거절하면(VAL_001) 목록을 조용히 다시 받아 그사이 다른 창에서 같은 이름을
+//   만들었으면 같은 빨간 글, 아니면 서명 칸 아래에 사전 문구(본문 길이 · 그림 3장 등).
 // - 그림: 그림 단추 · 붙여 넣기 · 끌어다 놓기(화면 어디든) → 사전 검사(PNG · JPG · GIF, 300KB, 3장) → POST /mail-signature/images →
 //   커서 자리에 보통(144) 폭으로 넣는다. 걸리면(또는 서버가 형식 · 크기로 거절하면) 서명 칸 아래에 사전 문구 (FILE_001 · FILE_002 · VAL_001).
-//   3장은 서명 칸에 있는 서로 다른 그림으로 센다 — 뺀 그림은 세지 않는다 (서명 저장의 한도, 계약 2절 "서명").
-//   올려 두기만 한 그림까지 한 사람 10장은 서버가 올리기에서 막는다(VAL_001) — 그 알림은 인터셉터가 띄운다.
-// - 저장: PUT /mail-signature { bodyHtml(쓰기 본문과 같은 인라인 서식), body(텍스트 서명), isForNew, isForReply } —
-//   비었으면 둘 다 null. 길이 한도(서식 10,000 · 텍스트 2,000)는 보내기 전에 먼저 막는다(VAL_001).
-//   저장하면 "저장했습니다. 새로 여는 쓰기 화면부터 들어갑니다." — 무엇이든 다시 바꾸면 내린다.
-// - 나가기 확인: 처음 불러온(저장한 뒤에는 저장한) 서명과 다르면 앱 안 이동은 대화상자, 탭 닫기 · 새로고침은 브라우저 확인창
-//   (useLeaveConfirm). 올리는 중인 그림도 바꿈이다. 저장하는 중 · 세션이 끝났을 때는 앱 안 이동을 묻지 않는다.
-// 고정 id · 이름 — 화면 검증 · 테스트가 쓴다: 서명 칸 #signature-body · 그림 고르기 #signature-image-input ·
-// 새 메일 #signature-for-new · 답장 · 전달 #signature-for-reply · 저장 #signature-save · 상태 #signature-save-status ·
-// 오류 #signature-error · 크기 단추 [data-size] · 미리 보기 단추 [data-mode] ·
-// 나가기 확인 #signature-leave-dialog · #signature-leave-stay(계속 고치기) · #signature-leave-confirm(나가기)
+//   3장은 서명 칸에 있는 서로 다른 그림으로 센다 — 뺀 그림은 세지 않는다. 한 사람 20장은 서버가 올리기에서 막는다(VAL_001 — 알림은 인터셉터).
+// - 저장: 새 서명은 POST /mail-signatures, 있던 서명은 PUT /mail-signatures/{id} { name, bodyHtml, body } — 본문이 비었으면 둘 다 null.
+//   길이 한도(서식 10,000 · 텍스트 2,000)는 보내기 전에 먼저 막는다(VAL_001). 저장한 뒤 글은 기본으로 넣는 서명이면
+//   "저장했습니다. 다음에 메일을 쓸 때부터 들어갑니다.", 아니면 "저장했습니다." — 무엇이든 다시 바꾸면 내린다.
+// - 바꿈(dirty)은 처음(저장한 뒤에는 저장한) 이름 · 서명과 다르거나 그림을 올리는 중 — 서명 화면이 다른 서명을 고르거나 떠날 때 묻는다.
+// 고정 id — 화면 검증 · 테스트가 쓴다: 이름 #signature-name(안내 #signature-name-hint · 오류 #signature-name-error) · 서명 칸 #signature-body ·
+// 그림 고르기 #signature-image-input · 저장 #signature-save · 상태 #signature-save-status · 오류 #signature-error ·
+// 지우기 #signature-delete · 취소 #signature-cancel · 크기 단추 [data-size] · 미리 보기 단추 [data-mode]
 import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { computed, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
-import LeaveConfirmDialog from '@/components/feedback/LeaveConfirmDialog.vue'
 import SignatureEditor from '@/components/mail/editor/signature/SignatureEditor.vue'
 import SignaturePreview from '@/components/mail/editor/signature/SignaturePreview.vue'
 import { getErrorMessage, toApiError } from '@/composables/useApi'
-import { useLeaveConfirm } from '@/composables/useLeaveConfirm'
-import { useMail } from '@/composables/useMail'
+import { useMailSignatures } from '@/composables/useMailSignatures'
 import { useWindowFileDrop } from '@/composables/useWindowFileDrop'
 import {
   SIGNATURE_HTML_MAX_LENGTH,
   SIGNATURE_IMAGE_ACCEPT,
   SIGNATURE_IMAGE_INLINE_CODES,
-  SIGNATURE_LEAVE_DIALOG,
+  SIGNATURE_NAME_MAX_LENGTH,
   SIGNATURE_SAVE_INLINE_CODES,
   SIGNATURE_TEXT,
   SIGNATURE_TEXT_MAX_LENGTH,
 } from '@/shared/constants/mail-signature'
-import type { MailSignature, SignatureImage } from '@/shared/types/mail'
+import type { SignatureImage } from '@/shared/types/mail'
+import type { MailSignature } from '@/shared/types/mail-signature'
 import { renameFile } from '@/shared/utils/editor-files'
 import { textToParagraphHtml } from '@/shared/utils/mail-quote'
-import { precheckSignatureImage, signatureImageUploadName } from '@/shared/utils/mail-signature'
-import { useAuthStore } from '@/stores/auth.store'
+import {
+  precheckSignatureImage,
+  signatureImageUploadName,
+  signatureNameProblem,
+  signatureUsesOf,
+} from '@/shared/utils/mail-signature'
 import { useMailSignatureStore } from '@/stores/mail-signature.store'
 
 interface Props {
-  /** 서버의 서명 — 이 값으로 칸을 채운다 */
-  signature: MailSignature
+  /** 고치는 서명 — 새 서명이면 null (처음 [저장]에 만든다) */
+  signature: MailSignature | null
+  /** 다른 서명의 이름 — 같은 이름 검사 */
+  otherNames: readonly string[]
+}
+
+interface Emits {
+  /** 저장했다 — 새 서명이면 만든 서명 */
+  (e: 'saved', signature: MailSignature): void
+  /** [이 서명 지우기] — 묻는 창은 서명 화면이 띄운다 */
+  (e: 'delete'): void
+  /** 새 서명의 [취소] */
+  (e: 'cancel'): void
+  /** 저장하지 않은 바꿈이 있는가 */
+  (e: 'dirty', dirty: boolean): void
+  /** 저장하는 중인가 */
+  (e: 'saving', saving: boolean): void
 }
 
 const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
 
-const { uploadSignatureImage } = useMail()
-const authStore = useAuthStore()
+const { uploadSignatureImage } = useMailSignatures()
 const signatureStore = useMailSignatureStore()
 
 const LABEL_ID = 'signature-label'
 const HINT_ID = 'signature-hint'
 const ERROR_ID = 'signature-error'
+const NAME_HINT_ID = 'signature-name-hint'
+const NAME_ERROR_ID = 'signature-name-error'
 
 /** 처음 내용 — 서식 서명, 없으면 텍스트 서명을 문단으로 (다른 메일 프로그램이 텍스트만 남긴 경우) */
 const initialHtml =
-  props.signature.bodyHtml ?? (props.signature.body ? textToParagraphHtml(props.signature.body) : '')
+  props.signature?.bodyHtml ?? (props.signature?.body ? textToParagraphHtml(props.signature.body) : '')
 
 const editorRef = ref<InstanceType<typeof SignatureEditor> | null>(null)
+const nameInputRef = ref<HTMLInputElement | null>(null)
 const fileInputRef = ref<HTMLInputElement | null>(null)
-const forNew = ref<boolean>(props.signature.isForNew)
-const forReply = ref<boolean>(props.signature.isForReply)
+const name = ref<string>(props.signature?.name ?? '')
+/** 처음(저장한 뒤에는 저장한) 이름 — 이것과 다르면 바꾼 것이다 */
+const savedName = ref<string>(props.signature?.name ?? '')
+const nameError = ref<'empty' | 'duplicate' | null>(null)
 /** 미리 보기가 그릴 문서 — 편집기가 바뀔 때마다 */
 const previewDoc = shallowRef<ProseMirrorNode | null>(null)
 const saveState = ref<'idle' | 'saving' | 'saved'>('idle')
+/** 저장한 뒤 글 — 저장한 때 그 서명이 기본으로 들어가는지로 고른다 */
+const savedMessage = ref<string>('')
 /** 서명 칸 아래 오류 — 사전 문구 */
 const errorMessage = ref<string | null>(null)
 /** 올리는 중인 그림 수 */
 const uploading = ref<number>(0)
 /** 알고 있는 그림 — 원본 폭을 찾는다 */
 const images = shallowRef<ReadonlyMap<string, SignatureImage>>(
-  new Map(props.signature.images.map((image) => [image.id, image])),
+  new Map((props.signature?.images ?? []).map((image) => [image.id, image])),
 )
-/** 불러온(저장한 뒤에는 저장한) 뒤 서명 칸을 바꿨다 — 편집기가 잰다 */
+/** 처음(저장한 뒤에는 저장한) 뒤 서명 칸을 바꿨다 — 편집기가 잰다 */
 const editorChanged = ref<boolean>(false)
-/** 불러온(저장한) 때의 "넣을 메일" — 이것과 다르면 바꾼 것이다 */
-const savedOptions = shallowRef({ forNew: props.signature.isForNew, forReply: props.signature.isForReply })
 
 const describedBy = computed(() => (errorMessage.value ? `${HINT_ID} ${ERROR_ID}` : HINT_ID))
-/** 떠나면 잃는 것이 있다 — 저장하지 않은 서명 칸 · 넣을 메일, 올리는 중인 그림 */
-const hasUnsavedChanges = computed(
-  () =>
-    editorChanged.value ||
-    uploading.value > 0 ||
-    forNew.value !== savedOptions.value.forNew ||
-    forReply.value !== savedOptions.value.forReply,
-)
-
-/**
- * 떠나기 전 확인 — 앱 안 이동은 대화상자, 창 닫기 · 새로고침은 브라우저 확인창.
- * 저장하는 중에는 앱 안 이동을 묻지 않는다(저장은 이어진다). 세션이 끝났거나 제한이 붙었으면(13단계) 묻지 않는다 — 그 흐름이 로그인 화면으로 보낸다.
- */
-const { confirming: leaveConfirming, stay: stayOnForm, leave: leaveForm } = useLeaveConfirm({
-  active: () => hasUnsavedChanges.value && saveState.value !== 'saving' && authStore.canUseApp,
-  unloadActive: () => hasUnsavedChanges.value && authStore.canUseApp,
+const nameErrorText = computed(() => {
+  if (nameError.value === 'empty') return SIGNATURE_TEXT.nameEmpty
+  return nameError.value === 'duplicate' ? SIGNATURE_TEXT.nameDuplicate : null
 })
+/** 떠나거나 다른 서명을 고르면 잃는 것이 있다 — 저장하지 않은 이름 · 서명 칸, 올리는 중인 그림 */
+const hasUnsavedChanges = computed(
+  () => editorChanged.value || uploading.value > 0 || name.value !== savedName.value,
+)
 
 /** 무엇이든 바꾸면 "저장했습니다"를 내린다 */
 function markChanged() {
   if (saveState.value === 'saved') saveState.value = 'idle'
 }
 
+function onNameInput() {
+  nameError.value = null
+  markChanged()
+}
+
 function onEditorReady(doc: ProseMirrorNode) {
   previewDoc.value = doc
 }
@@ -138,7 +158,7 @@ async function addImage(file: File) {
     markChanged()
   } catch (error) {
     const apiError = toApiError(error)
-    // 형식 · 크기는 칸 아래에 — 그 밖(올려 둔 그림 10장 초과 VAL_001 등)은 인터셉터가 알렸다
+    // 형식 · 크기는 칸 아래에 — 그 밖(올려 둔 그림 20장 초과 VAL_001 등)은 인터셉터가 알렸다
     if (SIGNATURE_IMAGE_INLINE_CODES.includes(apiError.code)) errorMessage.value = apiError.message
   } finally {
     uploading.value -= 1
@@ -150,7 +170,7 @@ async function addImages(files: File[]) {
   for (const file of files) await addImage(file)
 }
 
-// 화면 어디에 그림을 놓아도 받는다 — 브라우저가 파일을 열어 쓰던 서명을 잃지 않게
+// 화면 어디에 그림을 놓아도 지금 고른 서명에 넣는다 — 브라우저가 파일을 열어 쓰던 서명을 잃지 않게
 const { dragging } = useWindowFileDrop((files) => void addImages(files))
 
 function pickImage() {
@@ -165,9 +185,34 @@ function onFilesChosen(event: Event) {
   void addImages(files)
 }
 
+function focusName() {
+  nameInputRef.value?.focus()
+}
+
+/** 이름이 걸렸다 — 칸 아래 빨간 글 · 이름 칸에 초점 */
+function showNameProblem(problem: 'empty' | 'duplicate') {
+  nameError.value = problem
+  void nextTick(focusName)
+}
+
+/** 서버가 저장을 거절했다(VAL_001) — 목록을 다시 받아 그사이 같은 이름이 생겼으면 이름 칸, 아니면 서명 칸 아래에 사전 문구 */
+async function explainRejection(message: string, trimmedName: string) {
+  await signatureStore.refresh()
+  const others = signatureStore.signatures
+    .filter((signature) => signature.id !== props.signature?.id)
+    .map((signature) => signature.name)
+  if (signatureNameProblem(trimmedName, others) === 'duplicate') showNameProblem('duplicate')
+  else errorMessage.value = message
+}
+
 async function save() {
   const editor = editorRef.value
   if (!editor || saveState.value === 'saving') return
+  const problem = signatureNameProblem(name.value, props.otherNames)
+  if (problem) {
+    showNameProblem(problem)
+    return
+  }
   const content = editor.getContent()
   // 길이 한도 — 서버도 같은 한도로 VAL_001 을 준다 (서식은 정화한 뒤 재지만 정화는 거의 줄이지 않는다)
   if ((content.html?.length ?? 0) > SIGNATURE_HTML_MAX_LENGTH || content.text.length > SIGNATURE_TEXT_MAX_LENGTH) {
@@ -179,34 +224,82 @@ async function save() {
   saveState.value = 'saving'
   // 저장할 때의 모양 — 저장이 끝나면 이것을 "바꾸지 않은" 기준으로 삼는다 (저장하는 동안 더 고친 것은 바꿈으로 남는다)
   const savePoint = editor.captureSavePoint()
-  const options = { forNew: forNew.value, forReply: forReply.value }
+  const trimmedName = name.value.trim()
+  const typedName = name.value
+  const payload = { name: trimmedName, bodyHtml: content.html, body: content.text === '' ? null : content.text }
+  const options = { silent: SIGNATURE_SAVE_INLINE_CODES }
   try {
-    const saved = await signatureStore.save(
-      {
-        bodyHtml: content.html,
-        body: content.text === '' ? null : content.text,
-        isForNew: options.forNew,
-        isForReply: options.forReply,
-      },
-      { silent: SIGNATURE_SAVE_INLINE_CODES },
-    )
+    const current = props.signature
+    const saved = current
+      ? await signatureStore.update(current.id, payload, options)
+      : await signatureStore.create(payload, options)
     images.value = new Map([...images.value, ...saved.images.map((image) => [image.id, image] as const)])
     editorRef.value?.markSaved(savePoint)
     editorChanged.value = editorRef.value?.isChanged() ?? false
-    savedOptions.value = options
+    savedName.value = saved.name
+    // 저장하는 동안 이름을 더 고치지 않았으면 저장한 이름(앞뒤 공백을 뺀)으로 맞춘다
+    if (name.value === typedName) name.value = saved.name
+    savedMessage.value =
+      signatureUsesOf(saved.id, signatureStore.defaults) !== null ? SIGNATURE_TEXT.saved : SIGNATURE_TEXT.savedPlain
     saveState.value = 'saved'
+    emit('saved', saved)
   } catch (error) {
     saveState.value = 'idle'
     const apiError = toApiError(error)
-    if (SIGNATURE_SAVE_INLINE_CODES.includes(apiError.code)) errorMessage.value = apiError.message
+    if (SIGNATURE_SAVE_INLINE_CODES.includes(apiError.code)) await explainRejection(apiError.message, trimmedName)
   }
 }
 
-watch([forNew, forReply], markChanged)
+watch(hasUnsavedChanges, (dirty) => emit('dirty', dirty), { immediate: true })
+watch(
+  () => saveState.value === 'saving',
+  (saving) => emit('saving', saving),
+)
+
+defineExpose({ focusName })
 </script>
 
 <template>
   <div class="signature-form">
+    <div class="signature-form__name">
+      <label
+        for="signature-name"
+        class="signature-form__label"
+      >{{ SIGNATURE_TEXT.nameLabel }}</label>
+      <input
+        id="signature-name"
+        ref="nameInputRef"
+        v-model="name"
+        type="text"
+        class="form-input signature-form__name-input"
+        autocomplete="off"
+        :maxlength="SIGNATURE_NAME_MAX_LENGTH"
+        :placeholder="SIGNATURE_TEXT.namePlaceholder"
+        :aria-invalid="nameError ? 'true' : undefined"
+        :aria-describedby="nameError ? NAME_ERROR_ID : NAME_HINT_ID"
+        @input="onNameInput"
+      >
+      <p
+        v-if="nameErrorText"
+        :id="NAME_ERROR_ID"
+        class="form-message form-message--error"
+      >
+        <AppIcon
+          name="alert-circle"
+          :size="14"
+          :stroke-width="2"
+        />
+        <span>{{ nameErrorText }}</span>
+      </p>
+      <p
+        v-else
+        :id="NAME_HINT_ID"
+        class="form-message"
+      >
+        {{ SIGNATURE_TEXT.nameHint }}
+      </p>
+    </div>
+
     <div class="signature-form__field">
       <p
         :id="LABEL_ID"
@@ -270,31 +363,6 @@ watch([forNew, forReply], markChanged)
       </p>
     </div>
 
-    <fieldset class="signature-form__usage">
-      <legend class="signature-form__legend">
-        {{ SIGNATURE_TEXT.usageLegend }}
-      </legend>
-      <label class="signature-form__option">
-        <input
-          id="signature-for-new"
-          v-model="forNew"
-          type="checkbox"
-          class="signature-form__checkbox"
-        >
-        <span>{{ SIGNATURE_TEXT.forNew }}</span>
-      </label>
-      <label class="signature-form__option">
-        <input
-          id="signature-for-reply"
-          v-model="forReply"
-          type="checkbox"
-          class="signature-form__checkbox"
-        >
-        <span>{{ SIGNATURE_TEXT.forReply }}</span>
-        <span class="signature-form__option-note">{{ SIGNATURE_TEXT.forReplyNote }}</span>
-      </label>
-    </fieldset>
-
     <div class="signature-form__actions">
       <button
         id="signature-save"
@@ -317,27 +385,38 @@ watch([forNew, forReply], markChanged)
             :size="15"
             :stroke-width="2.2"
           />
-          <span>{{ SIGNATURE_TEXT.saved }}</span>
+          <span>{{ savedMessage }}</span>
         </template>
       </span>
+      <button
+        v-if="signature"
+        id="signature-delete"
+        type="button"
+        class="signature-form__delete"
+        :disabled="saveState === 'saving'"
+        @click="emit('delete')"
+      >
+        <AppIcon
+          name="trash"
+          :size="15"
+        />
+        <span>{{ SIGNATURE_TEXT.delete }}</span>
+      </button>
+      <button
+        v-else
+        id="signature-cancel"
+        type="button"
+        class="signature-form__cancel"
+        :disabled="saveState === 'saving'"
+        @click="emit('cancel')"
+      >
+        {{ SIGNATURE_TEXT.cancel }}
+      </button>
     </div>
 
     <hr class="signature-form__rule">
 
-    <SignaturePreview
-      :doc="previewDoc"
-      :for-new="forNew"
-      :for-reply="forReply"
-    />
-
-    <!-- 저장하지 않은 채 떠나려 할 때 — 답할 때까지 이동이 기다린다 (useLeaveConfirm) -->
-    <LeaveConfirmDialog
-      :open="leaveConfirming"
-      id-prefix="signature-leave"
-      :copy="SIGNATURE_LEAVE_DIALOG"
-      @stay="stayOnForm"
-      @leave="leaveForm"
-    />
+    <SignaturePreview :doc="previewDoc" />
   </div>
 </template>
 
@@ -348,6 +427,20 @@ watch([forNew, forReply], markChanged)
   gap: var(--space-22);
 }
 
+.signature-form__name {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/* 이름 칸 — 폭 320, 칸이 좁으면 칸 폭 (디자인 원본 Signature16) */
+.signature-form__name-input {
+  width: 20rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+}
+
 .signature-form__field {
   display: flex;
   flex-direction: column;
@@ -357,6 +450,7 @@ watch([forNew, forReply], markChanged)
 .signature-form__label {
   margin: 0;
   font-weight: 600;
+  color: var(--color-text);
 }
 
 .signature-form__alert {
@@ -383,46 +477,11 @@ watch([forNew, forReply], markChanged)
   color: var(--color-text-muted);
 }
 
-.signature-form__usage {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.signature-form__legend {
-  margin: 0 0 var(--space-4);
-  padding: 0;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.signature-form__option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-10);
-  min-height: var(--size-touch);
-  cursor: pointer;
-}
-
-.signature-form__checkbox {
-  width: 1.125rem;
-  height: 1.125rem;
-  margin: 0;
-  accent-color: var(--color-brand);
-  cursor: pointer;
-}
-
-.signature-form__option-note {
-  color: var(--color-text-muted);
-}
-
 .signature-form__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-12);
+  gap: var(--space-8) var(--space-12);
 }
 
 .signature-form__save {
@@ -442,7 +501,9 @@ watch([forNew, forReply], markChanged)
   background: var(--color-brand-strong);
 }
 
-.signature-form__save:disabled {
+.signature-form__save:disabled,
+.signature-form__delete:disabled,
+.signature-form__cancel:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -455,6 +516,42 @@ watch([forNew, forReply], markChanged)
   font-weight: 500;
 }
 
+/* [이 서명 지우기] — [저장]과 떨어뜨려 오른쪽 끝 (디자인 원본 Signature16 1) */
+.signature-form__delete {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  min-height: var(--size-touch);
+  padding: 0 var(--space-12);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-danger);
+  font-weight: 600;
+}
+
+.signature-form__delete:hover:not(:disabled) {
+  background: var(--color-danger-surface);
+  color: var(--color-danger-strong);
+}
+
+/* 새 서명의 [취소] — 보조 단추 (디자인 원본 Signature16 3) */
+.signature-form__cancel {
+  min-height: var(--size-touch);
+  padding: 0 var(--space-16);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-strong);
+  font-weight: 500;
+}
+
+.signature-form__cancel:hover:not(:disabled) {
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+}
+
 .signature-form__rule {
   width: 100%;
   height: var(--border-width);
diff --git a/frontend/src/components/mail/editor/signature/SignatureList.vue b/frontend/src/components/mail/editor/signature/SignatureList.vue
new file mode 100644
index 0000000..d6d1a01
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureList.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+// 내 서명 목록 (디자인 원본 Signature16 1 · 3) — 만든 차례, 줄 높이 52.
+// 고른 줄은 메일함 패널의 지금 메일함처럼 청록 바탕에 굵은 글자(aria-current). 이름 아래 작은 회색 글은 그 서명을 기본으로 넣는 메일(뱃지 없음),
+// 아직 저장하지 않은 새 줄은 "저장하지 않음". 아래에 [새 서명](글자 단추) · 개수 글 — 10개면 [새 서명]은 aria-disabled(초점은 받는다)이고
+// 개수 글이 그 까닭으로 바뀐다(필터의 50개와 같은 꼴). 칸 폭이 640 보다 좁으면 목록이 위로 올라가 칸 폭을 쓴다(컨테이너 쿼리 — SignatureSettings).
+// 고정 id · 표시 — 목록 이름 #signature-list-label · 줄 [data-signature-row="<id | new>"] · [새 서명] #signature-new · 개수 글 #signature-count
+import AppIcon from '@/components/AppIcon.vue'
+import { SIGNATURE_TEXT } from '@/shared/constants/mail-signature'
+
+export interface SignatureListRow {
+  /** 서명 id — 아직 저장하지 않은 새 줄은 'new' */
+  key: string
+  name: string
+  /** 이름 아래 회색 글 — 없으면 빈 글 */
+  sub: string
+  current: boolean
+}
+
+interface Props {
+  rows: readonly SignatureListRow[]
+  /** 저장한 서명 수 */
+  count: number
+  /** 더 만들 수 없다 (10개) */
+  full: boolean
+}
+
+interface Emits {
+  (e: 'pick', key: string): void
+  (e: 'create'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const COUNT_ID = 'signature-count'
+
+function onCreate() {
+  if (props.full) return
+  emit('create')
+}
+</script>
+
+<template>
+  <div class="signature-list">
+    <p
+      id="signature-list-label"
+      class="signature-list__label"
+    >
+      {{ SIGNATURE_TEXT.listLabel }}
+    </p>
+    <ul
+      class="signature-list__rows"
+      aria-labelledby="signature-list-label"
+    >
+      <li
+        v-for="row in rows"
+        :key="row.key"
+        class="signature-list__item"
+      >
+        <button
+          type="button"
+          :class="['signature-list__row', { 'signature-list__row--current': row.current }]"
+          :aria-current="row.current ? 'true' : undefined"
+          :data-signature-row="row.key"
+          @click="emit('pick', row.key)"
+        >
+          <span class="signature-list__name">{{ row.name }}</span>
+          <span
+            v-if="row.sub"
+            class="signature-list__sub"
+          >{{ row.sub }}</span>
+        </button>
+      </li>
+    </ul>
+    <button
+      id="signature-new"
+      type="button"
+      class="signature-list__new"
+      :aria-disabled="full ? 'true' : undefined"
+      :aria-describedby="full ? COUNT_ID : undefined"
+      @click="onCreate"
+    >
+      <AppIcon
+        name="plus"
+        :size="16"
+      />
+      <span>{{ SIGNATURE_TEXT.newSignature }}</span>
+    </button>
+    <p
+      :id="COUNT_ID"
+      class="signature-list__count"
+    >
+      {{ full ? SIGNATURE_TEXT.full : SIGNATURE_TEXT.count(count) }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+/* 목록 — 폭 208 (디자인 원본 Signature16 1). 칸이 640 보다 좁으면 위로 올라가 칸 폭을 쓴다 */
+.signature-list {
+  flex: 0 0 13rem;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+@container signature-settings (max-width: 40rem) {
+  .signature-list {
+    flex-basis: auto;
+    width: 100%;
+  }
+}
+
+.signature-list__label {
+  margin: 0;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.signature-list__rows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.signature-list__item + .signature-list__item {
+  border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+/* 줄 — 높이 52 (--size-header-min 재사용 — 밀도 예외 아님) */
+.signature-list__row {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--space-1);
+  width: 100%;
+  min-height: var(--size-header-min);
+  box-sizing: border-box;
+  padding: var(--space-6) var(--space-12);
+  border: 0;
+  background: var(--color-surface);
+  color: var(--color-text);
+  text-align: left;
+}
+
+.signature-list__row:hover {
+  background: var(--color-surface-panel);
+}
+
+.signature-list__row--current,
+.signature-list__row--current:hover {
+  background: var(--color-brand-subtle);
+  color: var(--color-brand-strong);
+}
+
+.signature-list__name {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.signature-list__row--current .signature-list__name {
+  font-weight: 600;
+}
+
+.signature-list__sub {
+  font-size: var(--font-size-small);
+  line-height: 1.4;
+  color: var(--color-text-muted);
+}
+
+.signature-list__row--current .signature-list__sub {
+  color: var(--color-brand-strong);
+}
+
+/* [새 서명] — 글자 단추 44 (아이콘이 목록 왼쪽 선에 오게 왼쪽 -2) */
+.signature-list__new {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-height: var(--size-touch);
+  margin-left: calc(var(--space-2) * -1);
+  padding: 0 var(--space-12) 0 var(--space-10);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-strong);
+  font-weight: 500;
+}
+
+.signature-list__new:hover:not([aria-disabled='true']) {
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+}
+
+/* 10개 — 초점은 받고 누를 수 없다. 마우스를 올려도 그대로 */
+.signature-list__new[aria-disabled='true'] {
+  color: var(--color-icon-muted);
+  cursor: not-allowed;
+}
+
+.signature-list__count {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/mail/editor/signature/SignaturePreview.vue b/frontend/src/components/mail/editor/signature/SignaturePreview.vue
index 7f75120..d1c97bc 100644
--- a/frontend/src/components/mail/editor/signature/SignaturePreview.vue
+++ b/frontend/src/components/mail/editor/signature/SignaturePreview.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-// 서명 미리 보기 (디자인 원본 Settings) — [새 메일 | 답장] 을 바꿔 보며, 쓰기 화면에 들어갈 자리를 보인다.
+// 서명 미리 보기 (디자인 원본 Settings · Signature16) — [새 메일 | 답장] 을 바꿔 보며, 쓰기 화면에 들어갈 자리를 보인다.
 // - 새 메일: (여기에 쓴 내용) · 빈 줄 · 서명 / 답장: 같은 위에 원문 인용(자리만 — 실제 메일이 아니다)
 // - 서명은 편집 중인 문서를 편집기 스키마로 그린다 (DOMSerializer — 스키마가 그리는 태그 · 속성뿐이라 남의 HTML 을 넣지 않는다).
-//   그 쓰기 종류에 넣지 않기로 했으면 서명을 빼고 아래 안내가 바뀐다.
+// - 16단계: 서명이 여럿이라 고른 서명이 그 메일에 들어갈 자리를 늘 보인다 (기본으로 넣을지는 위의 "메일에 넣을 서명"이 정한다)
 import { DOMSerializer, type Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { computed, ref, watch } from 'vue'
 
@@ -18,10 +18,6 @@ export type SignaturePreviewMode = 'new' | 'reply'
 interface Props {
   /** 편집 중인 서명 문서 (없으면 아직 불러오는 중) */
   doc: ProseMirrorNode | null
-  /** 새 메일에 넣는다 */
-  forNew: boolean
-  /** 답장 · 전달에 넣는다 */
-  forReply: boolean
 }
 
 const props = defineProps<Props>()
@@ -34,12 +30,7 @@ const MODES: readonly { mode: SignaturePreviewMode; label: string }[] = [
   { mode: 'reply', label: SIGNATURE_TEXT.previewReply },
 ]
 
-/** 이 쓰기 종류에 서명을 넣는다 */
-const shown = computed(() => (mode.value === 'reply' ? props.forReply : props.forNew))
-const note = computed(() => {
-  if (mode.value === 'reply') return props.forReply ? SIGNATURE_PREVIEW_NOTES.replyOn : SIGNATURE_PREVIEW_NOTES.replyOff
-  return props.forNew ? SIGNATURE_PREVIEW_NOTES.newOn : SIGNATURE_PREVIEW_NOTES.newOff
-})
+const note = computed(() => SIGNATURE_PREVIEW_NOTES[mode.value])
 
 /** 서명 문서를 그린다 — 스키마의 toDOM 결과만 붙인다 */
 function render() {
@@ -92,7 +83,6 @@ watch([() => props.doc, signatureRef], render, { flush: 'post', immediate: true
       </p>
       <p><br></p>
       <div
-        v-show="shown"
         ref="signatureRef"
         class="signature-preview__signature"
         data-signature-preview
diff --git a/frontend/src/components/mail/editor/signature/SignatureSettings.vue b/frontend/src/components/mail/editor/signature/SignatureSettings.vue
new file mode 100644
index 0000000..098be3e
--- /dev/null
+++ b/frontend/src/components/mail/editor/signature/SignatureSettings.vue
@@ -0,0 +1,328 @@
+<script setup lang="ts">
+// 설정 › 메일 › 서명 — 여러 서명 (디자인 원본 Signature16 · README "16단계 — 여러 서명" · 계약 2절 "서명").
+// 서명 화면(MailSignaturePage)이 받은 뒤 지연 로딩한다 — TipTap 이 이 청크에만 있다.
+// 위에서부터 "메일에 넣을 서명"(기본 둘 — 서명이 있을 때만) → 왼쪽 내 서명 목록 · 오른쪽 고른 서명 고치기(SignatureForm).
+// 칸 폭이 640 보다 좁으면 목록을 위로 올리고 고치는 칸을 그 아래에 둔다 — 창 폭이 아니라 이 칸의 폭을 본다(컨테이너 쿼리).
+// - 처음 고른 서명은 새 메일에 넣는 서명, 넣지 않음이면 첫 서명. 서명이 없으면 안내와 [새 서명]만(SignatureEmpty).
+// - [새 서명]: 목록 끝에 "저장하지 않음" 줄이 생기고 빈 이름 칸(초점) · 서명 칸이 열린다. 처음 [저장]에 만든다 — 서명이 하나도 없던 직원이면
+//   두 곳의 기본이 그 서명이 된다(서버). [취소]는 새 줄을 빼고 전에 고른 서명을 연다. 10개면 [새 서명]을 누를 수 없다.
+// - 저장하지 않은 것이 있으면 다른 서명을 고르거나 [새 서명] · [취소]를 누를 때 나가기 확인과 같은 창으로 묻는다
+//   (처음 초점 [계속 고치기] · [바꾼 내용 버리기]). 다른 화면으로 갈 때는 지금 서명 화면의 나가기 확인 그대로(useLeaveConfirm) —
+//   저장하는 중이거나 세션이 끝났을 때(제한된 세션 포함)는 묻지 않는다. 메일에 넣을 서명 두 칸은 고를 때 바로 저장되므로 묻는 까닭이 아니다.
+// - [이 서명 지우기]: 묻고(SignatureDeleteDialog — 기본이던 곳마다 다른 글) 지운 뒤 "‘영문’ 서명을 지웠습니다." 알림과 목록의 첫 서명을 연다.
+//   마지막 서명을 지우면 서명이 없을 때의 화면이 된다. 지운 서명을 기본으로 넣던 곳은 넣지 않음이 된다(다른 서명이 저절로 기본이 되지 않는다).
+// 고정 id — 다른 서명 확인 #signature-switch-dialog(· -stay · -confirm) · 나가기 확인 #signature-leave-dialog(· -stay · -confirm)
+import { computed, nextTick, ref, watch } from 'vue'
+
+import LeaveConfirmDialog from '@/components/feedback/LeaveConfirmDialog.vue'
+import SignatureDefaultsField from '@/components/mail/editor/signature/SignatureDefaultsField.vue'
+import SignatureDeleteDialog from '@/components/mail/editor/signature/SignatureDeleteDialog.vue'
+import SignatureEmpty from '@/components/mail/editor/signature/SignatureEmpty.vue'
+import SignatureForm from '@/components/mail/editor/signature/SignatureForm.vue'
+import SignatureList, { type SignatureListRow } from '@/components/mail/editor/signature/SignatureList.vue'
+import { useLeaveConfirm } from '@/composables/useLeaveConfirm'
+import { useToast } from '@/composables/useToast'
+import {
+  MAIL_SIGNATURE_MAX_COUNT,
+  SIGNATURE_DELETE_TEXT,
+  SIGNATURE_LEAVE_DIALOG,
+  SIGNATURE_SWITCH_DIALOG,
+  SIGNATURE_TEXT,
+} from '@/shared/constants/mail-signature'
+import type { MailSignature } from '@/shared/types/mail-signature'
+import { signatureUsesOf, signatureUsesText } from '@/shared/utils/mail-signature'
+import { useAuthStore } from '@/stores/auth.store'
+import { useMailSignatureStore } from '@/stores/mail-signature.store'
+
+/** 목록의 아직 저장하지 않은 새 줄 */
+const NEW_KEY = 'new'
+
+type Selection = { kind: 'saved'; id: string } | { kind: 'new' }
+/** 묻는 창의 답을 기다리는 일 — 다른 서명 고르기 · 새 서명 · 새 서명 [취소] */
+type PendingSwitch = { kind: 'pick'; id: string } | { kind: 'create' } | { kind: 'cancel' }
+
+const store = useMailSignatureStore()
+const authStore = useAuthStore()
+const toast = useToast()
+
+const selection = ref<Selection | null>(initialSelection())
+/** 고치는 칸을 새로 만든다 — 다른 서명을 열 때마다 (새 서명을 처음 저장한 것은 같은 칸이다) */
+const formKey = ref<number>(0)
+const formRef = ref<InstanceType<typeof SignatureForm> | null>(null)
+const rootRef = ref<HTMLElement | null>(null)
+/** 고치는 칸에 저장하지 않은 것이 있다 · 저장하는 중 (SignatureForm 이 알린다) */
+const formDirty = ref<boolean>(false)
+const formSaving = ref<boolean>(false)
+const pendingSwitch = ref<PendingSwitch | null>(null)
+/** [새 서명]을 열기 전에 고르던 서명 — [취소]가 돌아간다 */
+let beforeNew: string | null = null
+/** 지울 서명 — 묻는 창이 열린 동안 */
+const deleteTarget = ref<MailSignature | null>(null)
+const deleting = ref<boolean>(false)
+
+const selectedId = computed(() => (selection.value?.kind === 'saved' ? selection.value.id : null))
+const selectedSignature = computed(() => store.signatureById(selectedId.value))
+const isFull = computed(() => store.signatures.length >= MAIL_SIGNATURE_MAX_COUNT)
+const otherNames = computed(() =>
+  store.signatures.filter((signature) => signature.id !== selectedId.value).map((signature) => signature.name),
+)
+const rows = computed<SignatureListRow[]>(() => {
+  const saved = store.signatures.map((signature) => ({
+    key: signature.id,
+    name: signature.name,
+    sub: signatureUsesText(signatureUsesOf(signature.id, store.defaults)),
+    current: signature.id === selectedId.value,
+  }))
+  if (selection.value?.kind !== 'new') return saved
+  return [...saved, { key: NEW_KEY, name: SIGNATURE_TEXT.newSignature, sub: SIGNATURE_TEXT.unsavedRow, current: true }]
+})
+/** 묻는 창의 글 — 지금 고치는 서명의 이름으로 (새 서명은 이름 대신 "새 서명에 쓴 내용") */
+const switchMessage = computed(() => {
+  const pending = pendingSwitch.value
+  const current = selectedSignature.value
+  if (!pending) return ''
+  if (pending.kind === 'cancel') return SIGNATURE_SWITCH_DIALOG.cancelNew
+  if (!current) return pending.kind === 'pick' ? SIGNATURE_SWITCH_DIALOG.pickFromNew : SIGNATURE_SWITCH_DIALOG.cancelNew
+  return pending.kind === 'pick' ? SIGNATURE_SWITCH_DIALOG.pick(current.name) : SIGNATURE_SWITCH_DIALOG.create(current.name)
+})
+const switchCopy = computed(() => ({
+  title: SIGNATURE_SWITCH_DIALOG.title,
+  message: switchMessage.value,
+  stay: SIGNATURE_SWITCH_DIALOG.stay,
+  leave: SIGNATURE_SWITCH_DIALOG.discard,
+}))
+const deleteUses = computed(() =>
+  deleteTarget.value ? signatureUsesOf(deleteTarget.value.id, store.defaults) : null,
+)
+
+/**
+ * 다른 화면으로 떠나기 전 확인 — 저장하지 않은 서명이 있을 때. 저장하는 중에는 앱 안 이동을 묻지 않는다(저장은 이어진다).
+ * 세션이 끝났거나 제한이 붙었으면(13단계) 묻지 않는다 — 그 흐름이 로그인 화면으로 보낸다
+ */
+const { confirming: leaveConfirming, stay: stayOnPage, leave: leavePage } = useLeaveConfirm({
+  active: () => formDirty.value && !formSaving.value && authStore.canUseApp,
+  unloadActive: () => formDirty.value && authStore.canUseApp,
+})
+
+function initialSelection(): Selection | null {
+  const first = store.defaultSignature('new') ?? store.signatures[0] ?? null
+  return first ? { kind: 'saved', id: first.id } : null
+}
+
+/** 서명을 연다 — 고치는 칸을 새로 만든다 (바꾼 것은 버린다) */
+function open(next: Selection | null) {
+  selection.value = next
+  formKey.value += 1
+  formDirty.value = false
+  formSaving.value = false
+}
+
+/** 목록의 줄 — 지금 줄이면 아무것도 하지 않는다 */
+function onPick(key: string) {
+  if (key === NEW_KEY || key === selectedId.value) return
+  if (formDirty.value) {
+    pendingSwitch.value = { kind: 'pick', id: key }
+    return
+  }
+  open({ kind: 'saved', id: key })
+}
+
+function onCreate() {
+  if (isFull.value) return
+  // 새 서명을 이미 열었다 — 이름 칸으로
+  if (selection.value?.kind === 'new') {
+    formRef.value?.focusName()
+    return
+  }
+  if (formDirty.value) {
+    pendingSwitch.value = { kind: 'create' }
+    return
+  }
+  startNew()
+}
+
+function startNew() {
+  beforeNew = selectedId.value
+  open({ kind: 'new' })
+  // 이름 칸에 초점 (디자인 원본 Signature16 3)
+  void nextTick(() => formRef.value?.focusName())
+}
+
+function onCancel() {
+  if (formDirty.value) {
+    pendingSwitch.value = { kind: 'cancel' }
+    return
+  }
+  cancelNew()
+}
+
+/** 새 줄을 빼고 전에 고른 서명을 연다 (없으면 첫 서명, 서명이 없으면 빈 화면) — 초점은 연 줄로 */
+function cancelNew() {
+  const back = store.signatureById(beforeNew) ?? store.signatures[0] ?? null
+  open(back ? { kind: 'saved', id: back.id } : null)
+  focusCurrent()
+}
+
+/** 지금 줄(없으면 빈 화면의 [새 서명])에 초점 — 누른 단추가 사라졌을 때 */
+function focusCurrent() {
+  void nextTick(() => {
+    const target =
+      rootRef.value?.querySelector<HTMLElement>('[data-signature-row][aria-current="true"]') ??
+      rootRef.value?.querySelector<HTMLElement>('#signature-empty-new')
+    target?.focus()
+  })
+}
+
+function onSwitchStay() {
+  pendingSwitch.value = null
+}
+
+/** [바꾼 내용 버리기] — 바꾼 것을 버리고 누른 일을 한다 */
+function onSwitchDiscard() {
+  const pending = pendingSwitch.value
+  pendingSwitch.value = null
+  if (!pending) return
+  if (pending.kind === 'pick') open({ kind: 'saved', id: pending.id })
+  else if (pending.kind === 'create') startNew()
+  else cancelNew()
+}
+
+/** 새 서명을 처음 저장했다 — 그 서명을 고른 것으로 (칸은 그대로 둔다 — 쓰던 자리 · 실행 취소 기록이 남게) */
+function onSaved(signature: MailSignature) {
+  if (selection.value?.kind === 'new') selection.value = { kind: 'saved', id: signature.id }
+}
+
+function onDeleteRequest() {
+  deleteTarget.value = selectedSignature.value
+}
+
+function onDeleteCancel() {
+  if (!deleting.value) deleteTarget.value = null
+}
+
+async function onDeleteConfirm() {
+  const target = deleteTarget.value
+  if (!target || deleting.value) return
+  deleting.value = true
+  try {
+    await store.remove(target.id)
+  } catch {
+    // 지우지 못했다 — 알림은 인터셉터. 창만 닫는다
+    deleting.value = false
+    deleteTarget.value = null
+    return
+  }
+  deleting.value = false
+  deleteTarget.value = null
+  toast.success(SIGNATURE_DELETE_TEXT.done(target.name))
+  const first = store.signatures[0] ?? null
+  open(first ? { kind: 'saved', id: first.id } : null)
+  focusCurrent()
+}
+
+// 고치던 서명이 목록에서 사라졌다(다시 받은 목록 — 다른 창에서 지웠다) — 쓰던 것은 그대로 두고 새 서명으로 본다([저장]하면 새로 만든다)
+watch(selectedSignature, (current) => {
+  if (current === null && selection.value?.kind === 'saved') selection.value = { kind: 'new' }
+})
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="signature-settings"
+  >
+    <SignatureDefaultsField v-if="store.signatures.length > 0" />
+
+    <div
+      v-if="selection"
+      class="signature-settings__body"
+    >
+      <div class="signature-settings__layout">
+        <SignatureList
+          :rows="rows"
+          :count="store.signatures.length"
+          :full="isFull"
+          @pick="onPick"
+          @create="onCreate"
+        />
+        <div class="signature-settings__form">
+          <SignatureForm
+            ref="formRef"
+            :key="formKey"
+            :signature="selectedSignature"
+            :other-names="otherNames"
+            @saved="onSaved"
+            @delete="onDeleteRequest"
+            @cancel="onCancel"
+            @dirty="(dirty) => (formDirty = dirty)"
+            @saving="(saving) => (formSaving = saving)"
+          />
+        </div>
+      </div>
+    </div>
+    <SignatureEmpty
+      v-else
+      @create="onCreate"
+    />
+
+    <SignatureDeleteDialog
+      :open="deleteTarget !== null"
+      :name="deleteTarget?.name ?? ''"
+      :uses="deleteUses"
+      :busy="deleting"
+      @confirm="onDeleteConfirm"
+      @cancel="onDeleteCancel"
+    />
+
+    <!-- 저장하지 않은 채 다른 서명을 고르거나 [새 서명] · [취소]를 누를 때 -->
+    <LeaveConfirmDialog
+      :open="pendingSwitch !== null"
+      id-prefix="signature-switch"
+      :copy="switchCopy"
+      @stay="onSwitchStay"
+      @leave="onSwitchDiscard"
+    />
+
+    <!-- 저장하지 않은 채 다른 화면으로 갈 때 — 답할 때까지 이동이 기다린다 (useLeaveConfirm) -->
+    <LeaveConfirmDialog
+      :open="leaveConfirming"
+      id-prefix="signature-leave"
+      :copy="SIGNATURE_LEAVE_DIALOG"
+      @stay="stayOnPage"
+      @leave="leavePage"
+    />
+  </div>
+</template>
+
+<style scoped>
+.signature-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-22);
+}
+
+/* 목록과 고치는 칸을 담은 칸 — 이 칸의 폭으로 배치를 고른다 (컨테이너 쿼리, SignatureList 도 같은 이름을 본다) */
+.signature-settings__body {
+  container: signature-settings / inline-size;
+}
+
+/* 목록 왼쪽(208) · 고치는 칸 오른쪽 — 사이 24 (디자인 원본 Signature16 1) */
+.signature-settings__layout {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-24);
+}
+
+.signature-settings__form {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* 칸이 640 보다 좁으면 목록을 위로 */
+@container signature-settings (max-width: 40rem) {
+  .signature-settings__layout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/frontend/src/components/mail/editor/signature/SignatureToolbar.vue b/frontend/src/components/mail/editor/signature/SignatureToolbar.vue
index 7ba6263..70b7423 100644
--- a/frontend/src/components/mail/editor/signature/SignatureToolbar.vue
+++ b/frontend/src/components/mail/editor/signature/SignatureToolbar.vue
@@ -4,6 +4,7 @@
 // - role="toolbar": Tab 한 번에 들어와 화살표 · Home · End 로 옮긴다(로빙 tabindex). Esc → 서명 칸, 서명 칸에서 Alt+F10 → 툴바
 // - 키보드로 누른 단추는 초점을 툴바에 두고, 마우스로 누른 단추와 팝오버에서 고른 값은 서명 칸으로 돌아간다
 // 그림 단추는 파일 고르기를 연다 — 올리기는 서명 화면(SignatureForm)이 한다 (pick-image).
+// 16단계 — 부재중 내용 칸도 쓴다: 이름(label — "자동 응답 서식" 등) · 그림 단추 없이(allowImages: false) · 칸을 고칠 수 없을 때 모두 끔(disabled).
 import type { ChainedCommands, Editor } from '@tiptap/core'
 import { computed, nextTick, ref } from 'vue'
 
@@ -16,6 +17,7 @@ import { applyLink, readLinkTarget, removeLink, type LinkTarget } from '@/compon
 import type { LinkFormValue } from '@/components/mail/editor/editor-menu'
 import { readToolbarStatus } from '@/components/mail/editor/editor-state'
 import { EDITOR_SHORTCUTS, EDITOR_TEXT_COLORS, type EditorColor } from '@/shared/constants/mail-editor'
+import { SIGNATURE_TOOLBAR_LABEL } from '@/shared/constants/mail-signature'
 
 interface Props {
   editor: Editor
@@ -23,8 +25,14 @@ interface Props {
   revision: number
   /** 서명 칸 id — aria-controls */
   controls: string
+  /** 툴바의 화면 낭독 이름 — 주지 않으면 "서명 서식" */
+  label?: string
+  /** 그림 단추를 둔다 — false 면 없다 (부재중 내용 칸) */
+  allowImages?: boolean
   /** 그림을 더 넣을 수 없다 (올리는 중 등) */
   imageDisabled?: boolean
+  /** 칸을 고칠 수 없다 — 모든 단추를 끈다 */
+  disabled?: boolean
 }
 
 interface Emits {
@@ -33,7 +41,10 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  label: SIGNATURE_TOOLBAR_LABEL,
+  allowImages: true,
   imageDisabled: false,
+  disabled: false,
 })
 const emit = defineEmits<Emits>()
 
@@ -60,7 +71,9 @@ const marks = computed(() => [
   { id: 'underline' as const, label: '밑줄', icon: 'underline' as const, pressed: status.value.underline, run: (chain: ChainedCommands) => chain.toggleUnderline() },
 ])
 
-const focusableTools = computed(() => TOOL_ORDER.filter((id) => id !== 'image' || !props.imageDisabled))
+const focusableTools = computed(() =>
+  TOOL_ORDER.filter((id) => id !== 'image' || (props.allowImages && !props.imageDisabled)),
+)
 const rovingTool = computed<ToolId>(() =>
   focusableTools.value.includes(activeTool.value) ? activeTool.value : 'bold',
 )
@@ -179,8 +192,9 @@ defineExpose({
     ref="rootRef"
     class="signature-toolbar"
     role="toolbar"
-    aria-label="서명 서식"
+    :aria-label="label"
     :aria-controls="controls"
+    :aria-disabled="disabled ? 'true' : undefined"
     @keydown="onKeydown"
     @focusin="onFocusIn"
   >
@@ -191,6 +205,7 @@ defineExpose({
       :label="item.label"
       :shortcut="EDITOR_SHORTCUTS[item.id]"
       :pressed="item.pressed"
+      :disabled="disabled"
       :focusable="rovingTool === item.id"
       @press="runTool(item.run)"
     >
@@ -208,6 +223,7 @@ defineExpose({
         title="글자 색"
         haspopup="dialog"
         :expanded="popup?.id === 'textColor'"
+        :disabled="disabled"
         :focusable="rovingTool === 'textColor'"
         @press="togglePopup('textColor')"
       >
@@ -235,6 +251,7 @@ defineExpose({
         :shortcut="EDITOR_SHORTCUTS.link"
         haspopup="dialog"
         :expanded="popup?.id === 'link'"
+        :disabled="disabled"
         :focusable="rovingTool === 'link'"
         @press="togglePopup('link')"
       >
@@ -254,10 +271,11 @@ defineExpose({
     </div>
 
     <EditorToolButton
+      v-if="allowImages"
       tool="image"
       label="그림 넣기"
       title="그림 넣기 (PNG, JPG, GIF)"
-      :disabled="imageDisabled"
+      :disabled="imageDisabled || disabled"
       :focusable="rovingTool === 'image'"
       @press="emit('pick-image')"
     >
diff --git a/frontend/src/components/mail/editor/signature/signature-extensions.ts b/frontend/src/components/mail/editor/signature/signature-extensions.ts
index 35177c1..b1ed878 100644
--- a/frontend/src/components/mail/editor/signature/signature-extensions.ts
+++ b/frontend/src/components/mail/editor/signature/signature-extensions.ts
@@ -1,7 +1,8 @@
-// 서명 칸(TipTap) 확장 구성 — 디자인 README "2단계 › 서명" (디자인 원본 Settings)
+// 서명 칸(TipTap) 확장 구성 — 디자인 README "2단계 › 서명" (디자인 원본 Settings · Signature16)
 // 쓸 수 있는 것: 문단 · 줄바꿈, 굵게 · 기울임 · 밑줄, 글자 색, 링크, 서명 그림. 그 밖(목록 · 표 · 글꼴 · 글자 크기 등)은
 // 스키마에 없어 붙여 넣어도 글자만 남는다. 값 형식은 쓰기 본문과 같다 (서버 정화 허용 목록 — mail-format-extensions.ts).
 // 서명은 쓰기 화면을 열 때 본문에 그대로 들어가므로, 이 스키마는 쓰기 본문 스키마(mail-extensions.ts)의 일부여야 한다.
+// 16단계 — 부재중 자동 응답의 내용 칸도 이 편집기를 쓴다(그림 없이 — images: false 면 스키마에 그림이 없어 붙여 넣은 그림도 빠진다).
 import { Extension, type AnyExtension } from '@tiptap/core'
 import { TextStyle } from '@tiptap/extension-text-style'
 import { StarterKit } from '@tiptap/starter-kit'
@@ -53,13 +54,21 @@ const STARTER_KIT_OPTIONS = {
   link: false,
 } as const
 
-export function createSignatureEditorExtensions(hooks: Partial<SignatureEditorHooks> = {}): AnyExtension[] {
+export interface SignatureEditorSchemaOptions {
+  /** 서명 그림을 받는다 — 주지 않으면 받는다 (부재중 내용 칸은 false) */
+  images?: boolean
+}
+
+export function createSignatureEditorExtensions(
+  hooks: Partial<SignatureEditorHooks> = {},
+  options: SignatureEditorSchemaOptions = {},
+): AnyExtension[] {
   return [
     StarterKit.configure(STARTER_KIT_OPTIONS),
     createMailLinkExtension(),
     TextStyle,
     MailColor,
-    SignatureImage,
+    ...(options.images === false ? [] : [SignatureImage]),
     SignatureBehavior.configure({
       openLink: hooks.openLink ?? null,
       focusToolbar: hooks.focusToolbar ?? null,
diff --git a/frontend/src/components/settings/TwoFactorEnrollmentScan.vue b/frontend/src/components/settings/TwoFactorEnrollmentScan.vue
index 821a061..e8a7bc8 100644
--- a/frontend/src/components/settings/TwoFactorEnrollmentScan.vue
+++ b/frontend/src/components/settings/TwoFactorEnrollmentScan.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 // 2단계 인증 켜기 창의 ① — QR · 키 · [복사] (디자인 원본 SettingsTwoFactor "켜기 창" · 계약 5절 "2단계 인증")
+// 휴대폰 바꾸기 창(16단계 — TwoFactorReplaceDialog)도 같은 부품을 쓴다 — 머리 글 · 닫을 때의 안내 · 키 이름 id 만 다르게 준다
+// (두 창이 한 화면에 함께 있어 id 가 겹치지 않게)
 // "인증 앱으로 QR 코드를 찍어 주세요" + QR(화면이 otpauthUrl 로 그린다 — QrCodeImage) + "인증 앱에서 [+] → 「QR 코드 스캔」…" +
 // "찍을 수 없으면 이 키를 입력하세요" — 32자 키(4자씩 띄움 · 고정폭 · 띄어쓰기 없이 조각만 — 골라 복사해도 키 그대로) + [복사](36 — 밀도 예외) +
 // "앱에는 「ARA SYSTEM (주소)」로 저장됩니다." + 켜지 않고 닫으면 키를 버린다는 안내
@@ -8,7 +10,7 @@
 // - 키는 일부러 두 줄(한 줄에 4묶음)로 그리고, 줄은 묶음 사이에서만 바뀐다 — 묶음 · 줄은 줄바꿈 없는 inline-block 덩어리다.
 //   block 으로 나누면 골라 복사할 때 줄바꿈이 끼므로 inline-block 으로 둔다(글자 사이에 띄어쓰기 · 줄바꿈 문자를 넣지 않는다 — 읽어 주는 글도 32자 그대로).
 //   좁은 폭에서는 줄 안에서도 묶음 사이에서만 줄이 바뀐다 (2026-10-31 브라우저 점검 — 620 창에서 마지막 묶음이 "EL / WN" 으로 갈렸다)
-// 고정 id — #two-factor-key-label
+// 고정 id — #two-factor-key-label (keyLabelId 로 바꾼다)
 import { computed } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -28,13 +30,23 @@ interface Props {
   error: ApiError | null
   /** 직원 주소 — "앱에는 「ARA SYSTEM (주소)」로 저장됩니다." */
   email: string
+  /** 머리 글 — 휴대폰 바꾸기 창은 "새 휴대폰의 인증 앱으로 …" */
+  title?: string
+  /** 마치지 않고 닫으면 키를 버린다는 안내 */
+  discardNote?: string
+  /** "찍을 수 없으면 이 키를 입력해 주세요" 의 id — [복사]의 aria-describedby 가 가리킨다 */
+  keyLabelId?: string
 }
 
 interface Emits {
   (e: 'retry'): void
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  title: TWO_FACTOR_ENABLE_TEXT.scanTitle,
+  discardNote: TWO_FACTOR_ENABLE_TEXT.discardNote,
+  keyLabelId: 'two-factor-key-label',
+})
 const emit = defineEmits<Emits>()
 
 const toast = useToast()
@@ -54,7 +66,7 @@ async function copyKey() {
 
 <template>
   <div class="scan">
-    <span class="scan__title">{{ TWO_FACTOR_ENABLE_TEXT.scanTitle }}</span>
+    <span class="scan__title">{{ title }}</span>
     <div
       v-if="status === 'error' && error"
       class="scan__load-error"
@@ -96,7 +108,7 @@ async function copyKey() {
         </p>
         <div class="scan__key">
           <span
-            id="two-factor-key-label"
+            :id="keyLabelId"
             class="scan__key-label"
           >{{ TWO_FACTOR_ENABLE_TEXT.keyLabel }}</span>
           <div class="scan__key-row">
@@ -120,7 +132,7 @@ async function copyKey() {
               type="button"
               class="scan__copy"
               :aria-label="TWO_FACTOR_ENABLE_TEXT.copyLabel"
-              aria-describedby="two-factor-key-label"
+              :aria-describedby="keyLabelId"
               :aria-disabled="enrollment ? undefined : 'true'"
               data-enable-copy
               @click="copyKey"
@@ -133,7 +145,7 @@ async function copyKey() {
             </button>
           </div>
           <span class="scan__key-note">{{ TWO_FACTOR_ENABLE_TEXT.savedAs(email) }}</span>
-          <span class="scan__key-note">{{ TWO_FACTOR_ENABLE_TEXT.discardNote }}</span>
+          <span class="scan__key-note">{{ discardNote }}</span>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/settings/TwoFactorReplaceDialog.vue b/frontend/src/components/settings/TwoFactorReplaceDialog.vue
new file mode 100644
index 0000000..bfd47e4
--- /dev/null
+++ b/frontend/src/components/settings/TwoFactorReplaceDialog.vue
@@ -0,0 +1,589 @@
+<script setup lang="ts">
+// 2단계 인증 휴대폰 바꾸기 창 — 모달 620(wide · 켜기 창과 같은 폭) · 창 하나에서 두 걸음 (16단계 — 디자인 원본 Settings16 5~8 · 계약 5절 "2단계 인증")
+// ① 새 휴대폰 등록: QR · 키 · [복사](TwoFactorEnrollmentScan — 켜기 창과 같은 부품) + 새 휴대폰의 코드 → [다음] [취소]
+//    키는 창을 열 때마다 새로 만든다(POST /two-factor/enrollments — 켜져 있을 때도). [다음]은 새 휴대폰의 코드를 먼저 확인한다(…/enrollments/{id}/verification)
+// ② 지금 휴대폰으로 확인: 지금 휴대폰의 코드 · 지금 비밀번호 + 문의 줄(LoginSupportLine) → [이전] · [바꾸기] [취소] (POST /two-factor/replacements)
+//    마지막 [바꾸기] 한 번에 바뀐다 — 그때까지 2단계 인증은 지금 휴대폰으로 그대로 켜져 있다
+// - 제목 아래 차례(TwoFactorReplaceSteps)는 글로만. 처음 초점은 ①의 코드 칸, ②로 넘어가면 지금 휴대폰의 코드 칸,
+//   [이전]은 ①로(QR · 키는 그대로, 새 휴대폰의 코드 칸은 비운다 — 같은 코드는 2분 동안 다시 받지 않는다)
+// - 칸 아래 오류(알림 없이 · 그 칸에 초점): ① 새 휴대폰의 코드 AUTH_006(칸을 비운다) / ② 지금 휴대폰의 코드 AUTH_006(칸을 비운다) · 지금 비밀번호 AUTH_005.
+//   보내기 전에: 6자리가 아니면 AUTH_007 문구, 비밀번호가 비었으면 VAL_001 문구 — 칸 차례(코드 → 비밀번호)로 본다
+// - AUTH_008(등록이 없음 · 10분 지남 · 더 새 등록 · 그사이 다른 곳에서 꺼짐) — 상태를 다시 받아 꺼졌으면 창을 닫고 사전 문구로 알리고(화면은 「꺼짐」),
+//   아니면 ①로 돌아와 창 위에 사전 문구를 보이고 새 키로 다시 그린다(코드는 비운다)
+// - 결과를 모르는 실패(503 MAIL_001 · SYS_001 — 시간 초과 · 연결 끊김 · 앞단 5xx)는 바뀌었다고도 아니라고도 하지 않는다 — 창 위 상자(unconfirmed),
+//   창은 ② 그대로 · 지금 휴대폰의 코드는 비운다. 창을 닫은 뒤에 왔으면 알림(unconfirmedClosed)
+// - 바꾸면 알림 "2단계 인증 휴대폰을 바꿨습니다. …"(창을 닫았거나 화면을 떠난 뒤 왔어도 — 지금 휴대폰의 코드가 막혔다), 상태는 스토어에(apply — 켠 때는 그대로)
+// - 비밀(키 · otpauth 주소 · 코드 · 지금 비밀번호)은 이 창의 화면 메모리에만 두고 닫으면 지운다. 요청은 이 창이 보낸다 — Pinia 액션의 인자로 개발 도구에 남지 않게
+// - 확인하는 동안 [다음]은 「확인하는 중…」, 바꾸는 동안 [바꾸기]는 「바꾸는 중…」 — 둘 다 aria-disabled(초점을 지킨다). [취소] · Esc 는 늘 누를 수 있다
+// - 몇 번째로 연 창인가(openSeq)를 보낼 때 잡아 둔다 — 닫았다 다시 연 창에 앞 요청의 거절을 넣지 않는다.
+//   세션이 바뀌면(로그아웃 · 만료 · 다른 기기의 [다른 곳 모두 로그아웃]) 키 · 칸을 지우고 닫는다
+// 고정 id — #two-factor-replace-title · #two-factor-replace-message · #two-factor-replace-key-label ·
+//          #two-factor-replace-new-code · #two-factor-replace-current-code · #two-factor-replace-password
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import LoginSupportLine from '@/components/auth/LoginSupportLine.vue'
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import OtpCodeField from '@/components/settings/OtpCodeField.vue'
+import PasswordField from '@/components/settings/PasswordField.vue'
+import TwoFactorEnrollmentScan from '@/components/settings/TwoFactorEnrollmentScan.vue'
+import TwoFactorReplaceSteps, { type TwoFactorReplaceStep } from '@/components/settings/TwoFactorReplaceSteps.vue'
+import { useAccountSecurity } from '@/composables/useAccountSecurity'
+import { getErrorMessage, notifyApiError, toApiError, type ApiError } from '@/composables/useApi'
+import { useToast } from '@/composables/useToast'
+import { TWO_FACTOR_REPLACE_TEXT } from '@/shared/constants/account-security'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import type { TwoFactorEnrollment } from '@/shared/types/account-security'
+import { isCompleteOtp } from '@/shared/utils/account-security'
+import { isImeComposing } from '@/shared/utils/keyboard-shortcut'
+import { useAuthStore } from '@/stores/auth.store'
+import { useSupportContactStore } from '@/stores/support-contact.store'
+import { useTwoFactorStore } from '@/stores/two-factor.store'
+
+interface Props {
+  open: boolean
+  /** 직원 주소 — "앱에는 ‘ARA SYSTEM (주소)’로 저장됩니다." */
+  email: string
+}
+
+interface Emits {
+  (e: 'close'): void
+  /** 바꿨다 — 상태는 스토어에 넣었고 알림도 띄웠다 */
+  (e: 'replaced'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+/** ① 새 휴대폰의 코드 확인 — 칸 아래 · 창 위에 보이는 거절 */
+const VERIFY_INLINE_CODES: readonly ErrorCode[] = ['AUTH_006', 'AUTH_008']
+/** ② 바꾸기 — 칸 아래 · 창 위에 보이는 거절 */
+const REPLACE_INLINE_CODES: readonly ErrorCode[] = ['AUTH_005', 'AUTH_006', 'AUTH_008']
+/** 결과를 모르는 실패 — 엔진이 바꿨는지 모른다(503 MAIL_001 · 시간 초과 · 연결 끊김 · 앞단 5xx 는 SYS_001) */
+const UNCONFIRMED_CODES: readonly ErrorCode[] = ['MAIL_001', 'SYS_001']
+
+const api = useAccountSecurity()
+const authStore = useAuthStore()
+const twoFactorStore = useTwoFactorStore()
+const supportContactStore = useSupportContactStore()
+const toast = useToast()
+
+const newCodeRef = ref<InstanceType<typeof OtpCodeField> | null>(null)
+const currentCodeRef = ref<InstanceType<typeof OtpCodeField> | null>(null)
+const passwordRef = ref<InstanceType<typeof PasswordField> | null>(null)
+
+const step = ref<TwoFactorReplaceStep>('new')
+/** 등록 — 비밀이 들어 있다. 반응형 깊이 없이 둔다 */
+const enrollment = shallowRef<TwoFactorEnrollment | null>(null)
+const enrollStatus = ref<'loading' | 'ready' | 'error'>('loading')
+const enrollError = ref<ApiError | null>(null)
+/** 창 위 상자 — 처음부터 다시(AUTH_008) · 결과를 모름 */
+const notice = ref<string | null>(null)
+const newCode = ref<string>('')
+const newCodeError = ref<string | null>(null)
+const currentCode = ref<string>('')
+const currentCodeError = ref<string | null>(null)
+const password = ref<string>('')
+const showPassword = ref<boolean>(false)
+const passwordError = ref<string | null>(null)
+/** 보내는 중 — ① 새 휴대폰의 코드 확인 · ② 바꾸기 */
+const busy = ref<'verifying' | 'replacing' | null>(null)
+
+/** 창을 연 차례 — 열 때 · 세션이 바뀔 때 오른다. 보낼 때 잡아 두고 응답이 오면 견준다 */
+let openSeq = 0
+/** 등록을 받는 차례 — 창을 닫거나 다시 받으면 앞의 응답은 버린다 */
+let enrollSeq = 0
+let unmounted = false
+
+/** [다음]을 누를 수 없다 — 키가 아직 없거나 보내는 중 */
+const nextUnavailable = computed(() => enrollStatus.value !== 'ready' || busy.value !== null)
+const message = computed(() =>
+  step.value === 'new' ? TWO_FACTOR_REPLACE_TEXT.newMessage : TWO_FACTOR_REPLACE_TEXT.currentMessage,
+)
+
+function clearSecrets() {
+  enrollSeq += 1
+  enrollment.value = null
+  newCode.value = ''
+  currentCode.value = ''
+  password.value = ''
+  showPassword.value = false
+}
+
+function clearErrors() {
+  newCodeError.value = null
+  currentCodeError.value = null
+  passwordError.value = null
+}
+
+function resetForm() {
+  clearSecrets()
+  clearErrors()
+  step.value = 'new'
+  enrollStatus.value = 'loading'
+  enrollError.value = null
+  notice.value = null
+  busy.value = null
+}
+
+/** 보낸 그 창이 아직 열려 있고 세션도 그대로인가 — 늦게 온 응답을 이 창에 쓸지 */
+function stillHere(session: number, opened: number): boolean {
+  return !unmounted && props.open && opened === openSeq && authStore.generation === session
+}
+
+async function focusLater(target: () => { focus: () => void } | null, session: number, opened: number) {
+  await nextTick()
+  if (stillHere(session, opened)) target()?.focus()
+}
+
+async function startEnrollment() {
+  enrollSeq += 1
+  const current = enrollSeq
+  const opened = openSeq
+  const session = authStore.generation
+  enrollment.value = null
+  enrollStatus.value = 'loading'
+  enrollError.value = null
+  try {
+    const result = await api.startTwoFactorEnrollment({ silent: true })
+    if (current !== enrollSeq || !stillHere(session, opened)) return
+    enrollment.value = result
+    enrollStatus.value = 'ready'
+  } catch (caught) {
+    if (current !== enrollSeq || !stillHere(session, opened)) return
+    enrollStatus.value = 'error'
+    enrollError.value = toApiError(caught)
+  }
+}
+
+/**
+ * 처음부터 다시(AUTH_008) — 2단계 인증이 그사이 다른 곳에서 꺼졌으면 창을 닫고 사전 문구로 알린다(화면은 「꺼짐」).
+ * 아니면(켜져 있거나 상태를 못 받음) ①로 돌아와 창 위에 사전 문구를 보이고 새 키로 다시 그린다 — 코드는 비운다
+ */
+async function restart(error: ApiError, session: number, opened: number) {
+  const status = await twoFactorStore.refresh()
+  if (!stillHere(session, opened)) return
+  if (status && !status.isEnabled) {
+    notifyApiError(error)
+    emit('close')
+    return
+  }
+  step.value = 'new'
+  notice.value = error.message
+  newCode.value = ''
+  currentCode.value = ''
+  clearErrors()
+  await startEnrollment()
+  await focusLater(() => newCodeRef.value, session, opened)
+}
+
+function setNewCode(value: string) {
+  newCode.value = value
+  newCodeError.value = null
+}
+
+function setCurrentCode(value: string) {
+  currentCode.value = value
+  currentCodeError.value = null
+}
+
+function setPassword(value: string) {
+  password.value = value
+  passwordError.value = null
+}
+
+/** ① [다음] — 새 휴대폰의 코드를 확인하고 ②로 */
+async function verify() {
+  const current = enrollment.value
+  if (nextUnavailable.value || !current) return
+  if (!isCompleteOtp(newCode.value)) {
+    newCodeError.value = getErrorMessage('AUTH_007')
+    newCodeRef.value?.focus()
+    return
+  }
+  const opened = openSeq
+  const session = authStore.generation
+  busy.value = 'verifying'
+  try {
+    await api.verifyTwoFactorEnrollment(current.enrollmentId, { otpCode: newCode.value }, { silent: VERIFY_INLINE_CODES })
+    if (!stillHere(session, opened)) return
+    // 맞다 — 쓴 코드는 비우고 ②로 (QR · 키는 [이전]을 위해 둔다)
+    newCode.value = ''
+    notice.value = null
+    clearErrors()
+    step.value = 'current'
+    void focusLater(() => currentCodeRef.value, session, opened)
+  } catch (caught) {
+    const apiError = toApiError(caught)
+    // 확인은 엔진을 바꾸지 않는다 — 창을 닫았거나 다시 열었으면 알리지 않고 버린다
+    if (!stillHere(session, opened)) return
+    if (apiError.code === 'AUTH_006') {
+      newCodeError.value = apiError.message
+      newCode.value = ''
+      newCodeRef.value?.focus()
+    } else if (apiError.code === 'AUTH_008') {
+      await restart(apiError, session, opened)
+    }
+    // 그 밖의 실패(시도 과다 REQ_001 등)는 인터셉터가 알렸다
+  } finally {
+    if (opened === openSeq) busy.value = null
+  }
+}
+
+/** ② [바꾸기] — 지금 휴대폰의 코드 · 지금 비밀번호로 바꾼다 */
+async function submit() {
+  const current = enrollment.value
+  if (busy.value !== null || !current) return
+  const codeProblem = isCompleteOtp(currentCode.value) ? null : getErrorMessage('AUTH_007')
+  const passwordProblem = password.value === '' ? getErrorMessage('VAL_001') : null
+  currentCodeError.value = codeProblem
+  passwordError.value = passwordProblem
+  if (codeProblem) {
+    currentCodeRef.value?.focus()
+    return
+  }
+  if (passwordProblem) {
+    passwordRef.value?.focus()
+    return
+  }
+  const opened = openSeq
+  const session = authStore.generation
+  busy.value = 'replacing'
+  try {
+    const status = await api.replaceTwoFactor(
+      { enrollmentId: current.enrollmentId, currentOtpCode: currentCode.value, currentPassword: password.value },
+      { silent: [...REPLACE_INLINE_CODES, ...UNCONFIRMED_CODES] },
+    )
+    if (authStore.generation !== session) return
+    // 서버가 바꿨다 — 창을 닫았거나 화면을 떠났어도 상태를 맞추고 알린다 (지금 휴대폰의 코드는 이제 막혔다)
+    twoFactorStore.apply(status)
+    toast.success(TWO_FACTOR_REPLACE_TEXT.done)
+    if (unmounted) return
+    if (opened === openSeq) clearSecrets()
+    emit('replaced')
+  } catch (caught) {
+    const apiError = toApiError(caught)
+    if (authStore.generation !== session) return
+    const unconfirmed = UNCONFIRMED_CODES.includes(apiError.code)
+    if (!stillHere(session, opened)) {
+      // 보낸 창이 없다 — 결과를 모르면 늘 알리고, 칸 아래 글은 닫힌 채일 때만 알림으로 (다시 연 창에는 넣지 않는다 · 처음부터 다시는 다음에 열 때 새 키로)
+      if (unconfirmed) toast.error(TWO_FACTOR_REPLACE_TEXT.unconfirmedClosed)
+      else if (opened === openSeq && apiError.code !== 'AUTH_008' && REPLACE_INLINE_CODES.includes(apiError.code)) notifyApiError(apiError)
+      return
+    }
+    if (unconfirmed) {
+      notice.value = TWO_FACTOR_REPLACE_TEXT.unconfirmed
+      currentCode.value = ''
+      currentCodeRef.value?.focus()
+    } else if (apiError.code === 'AUTH_005') {
+      passwordError.value = apiError.message
+      passwordRef.value?.focus()
+    } else if (apiError.code === 'AUTH_006') {
+      currentCodeError.value = apiError.message
+      currentCode.value = ''
+      currentCodeRef.value?.focus()
+    } else if (apiError.code === 'AUTH_008') {
+      await restart(apiError, session, opened)
+    }
+    // 그 밖의 실패(시도 과다 REQ_001 · 처리 중 등)는 인터셉터가 알렸다
+  } finally {
+    if (opened === openSeq) busy.value = null
+  }
+}
+
+/** ② [이전] — ①로. QR · 키는 그대로, 새 휴대폰의 코드는 다시 넣는다 (지금 휴대폰의 코드도 시간이 지나 비운다) */
+async function back() {
+  if (busy.value !== null) return
+  const opened = openSeq
+  const session = authStore.generation
+  step.value = 'new'
+  newCode.value = ''
+  currentCode.value = ''
+  notice.value = null
+  clearErrors()
+  await focusLater(() => newCodeRef.value, session, opened)
+}
+
+/** 칸에서 Enter — ①은 [다음], ②는 [바꾸기]와 같다 (한글 조합 중의 Enter 는 글자 확정이라 무시한다) */
+function onFieldKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' || isImeComposing(event)) return
+  if (!(event.target instanceof HTMLInputElement)) return
+  event.preventDefault()
+  void (step.value === 'new' ? verify() : submit())
+}
+
+function cancel() {
+  emit('close')
+}
+
+// 열 때마다 새 키 — 닫으면 키 · 칸을 버린다. 문의 연락처는 한 번만 받는다(못 받으면 글만)
+watch(
+  () => props.open,
+  (open) => {
+    if (open) openSeq += 1
+    resetForm()
+    if (!open) return
+    void startEnrollment()
+    void supportContactStore.ensureLoaded()
+  },
+  { immediate: true },
+)
+
+// 세션이 바뀌면 키 · 칸을 지우고 닫는다 — 앞 요청의 결과도 버린다
+watch(
+  () => authStore.generation,
+  () => {
+    openSeq += 1
+    resetForm()
+    if (props.open) emit('close')
+  },
+)
+
+onBeforeUnmount(() => {
+  unmounted = true
+  clearSecrets()
+})
+</script>
+
+<template>
+  <ModalDialog
+    :open="open"
+    wide
+    :title="TWO_FACTOR_REPLACE_TEXT.title"
+    title-id="two-factor-replace-title"
+    described-by="two-factor-replace-message"
+    @cancel="cancel"
+  >
+    <TwoFactorReplaceSteps :step="step" />
+    <p
+      id="two-factor-replace-message"
+      class="replace__message"
+      data-replace-message
+    >
+      {{ message }}
+    </p>
+    <p
+      v-if="notice"
+      class="replace__notice"
+      role="alert"
+      data-replace-notice
+    >
+      <AppIcon
+        name="alert-circle"
+        class="replace__notice-icon"
+      />
+      <span>{{ notice }}</span>
+    </p>
+
+    <ol
+      v-if="step === 'new'"
+      class="replace__steps"
+      data-replace-step="new"
+      @keydown="onFieldKeydown"
+    >
+      <li class="replace__step">
+        <span
+          class="replace__number"
+          aria-hidden="true"
+        >1</span>
+        <div class="replace__step-body">
+          <TwoFactorEnrollmentScan
+            :enrollment="enrollment"
+            :status="enrollStatus"
+            :error="enrollError"
+            :email="email"
+            :title="TWO_FACTOR_REPLACE_TEXT.scanTitle"
+            :discard-note="TWO_FACTOR_REPLACE_TEXT.discardNote"
+            key-label-id="two-factor-replace-key-label"
+            @retry="startEnrollment"
+          />
+        </div>
+      </li>
+      <li class="replace__step">
+        <span
+          class="replace__number"
+          aria-hidden="true"
+        >2</span>
+        <div class="replace__step-body">
+          <OtpCodeField
+            id="two-factor-replace-new-code"
+            ref="newCodeRef"
+            :label="TWO_FACTOR_REPLACE_TEXT.newCodeLabel"
+            :model-value="newCode"
+            :error="newCodeError"
+            :readonly="busy === 'verifying'"
+            autofocus
+            @update:model-value="setNewCode"
+          />
+        </div>
+      </li>
+    </ol>
+
+    <template v-else>
+      <div
+        class="replace__fields"
+        data-replace-step="current"
+        @keydown="onFieldKeydown"
+      >
+        <OtpCodeField
+          id="two-factor-replace-current-code"
+          ref="currentCodeRef"
+          :label="TWO_FACTOR_REPLACE_TEXT.currentCodeLabel"
+          :model-value="currentCode"
+          :error="currentCodeError"
+          :readonly="busy === 'replacing'"
+          @update:model-value="setCurrentCode"
+        />
+        <div class="replace__password">
+          <PasswordField
+            id="two-factor-replace-password"
+            ref="passwordRef"
+            :label="TWO_FACTOR_REPLACE_TEXT.passwordLabel"
+            :model-value="password"
+            autocomplete="current-password"
+            :shown="showPassword"
+            :toggle-label="TWO_FACTOR_REPLACE_TEXT.showPassword"
+            :error="passwordError"
+            :readonly="busy === 'replacing'"
+            @update:model-value="setPassword"
+            @toggle="showPassword = !showPassword"
+          />
+        </div>
+      </div>
+      <div class="replace__support">
+        <LoginSupportLine
+          :question="TWO_FACTOR_REPLACE_TEXT.support"
+          :fallback="TWO_FACTOR_REPLACE_TEXT.support"
+          :contact="supportContactStore.text"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <template v-if="step === 'new'">
+        <button
+          type="button"
+          class="modal-dialog__action"
+          :aria-disabled="nextUnavailable ? 'true' : undefined"
+          :aria-busy="busy === 'verifying' ? 'true' : undefined"
+          data-replace-next
+          @click="verify"
+        >
+          {{ busy === 'verifying' ? TWO_FACTOR_REPLACE_TEXT.verifying : TWO_FACTOR_REPLACE_TEXT.next }}
+        </button>
+      </template>
+      <template v-else>
+        <button
+          type="button"
+          class="modal-dialog__action modal-dialog__action--secondary replace__back"
+          :aria-disabled="busy !== null ? 'true' : undefined"
+          data-replace-back
+          @click="back"
+        >
+          <AppIcon
+            name="chevron-left"
+            :stroke-width="2"
+          />
+          <span>{{ TWO_FACTOR_REPLACE_TEXT.back }}</span>
+        </button>
+        <button
+          type="button"
+          class="modal-dialog__action"
+          :aria-disabled="busy !== null ? 'true' : undefined"
+          :aria-busy="busy === 'replacing' ? 'true' : undefined"
+          data-replace-submit
+          @click="submit"
+        >
+          {{ busy === 'replacing' ? TWO_FACTOR_REPLACE_TEXT.submitting : TWO_FACTOR_REPLACE_TEXT.submit }}
+        </button>
+      </template>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        data-replace-cancel
+        @click="cancel"
+      >
+        {{ TWO_FACTOR_REPLACE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+.replace__message {
+  margin: 0;
+  color: var(--color-text-secondary);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+/* 창 위 상자 — 처음부터 다시 · 결과를 모름 (켜기 창의 상자와 같은 빨간 상자) */
+.replace__notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-8);
+  margin: var(--space-4) 0 0;
+  padding: var(--space-10) var(--space-12);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-surface);
+  color: var(--color-danger);
+  font-size: var(--font-size-label);
+}
+
+.replace__notice-icon {
+  margin-top: var(--space-1);
+}
+
+/* ① 차례 1 · 2 — 켜기 창과 같은 청록 굵은 숫자(동그라미 없음) · 숫자 칸 22 · 사이 18 */
+.replace__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-18);
+  margin: var(--space-8) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.replace__step {
+  display: grid;
+  grid-template-columns: var(--space-22) minmax(0, 1fr);
+  gap: var(--space-6);
+}
+
+.replace__number {
+  font-weight: 700;
+  color: var(--color-brand-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+.replace__step-body {
+  min-width: 0;
+}
+
+/* ② 칸 — 사이 14 */
+.replace__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-14);
+  margin-top: var(--space-8);
+}
+
+/* 지금 비밀번호 칸 — 최대 320 */
+.replace__password {
+  max-width: 20rem;
+}
+
+/* 문의 줄 — 위에 선 하나 */
+.replace__support {
+  margin-top: var(--space-6);
+  padding-top: var(--space-12);
+  border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+/* [이전] — 단추 줄 왼쪽 끝 · 왼쪽 화살표 (틀의 단추 모양보다 앞서게 두 클래스로) */
+.modal-dialog__action.replace__back {
+  gap: var(--space-4);
+  margin-right: auto;
+  padding: 0 var(--space-14) 0 var(--space-10);
+}
+</style>
diff --git a/frontend/src/components/settings/TwoFactorReplaceSteps.vue b/frontend/src/components/settings/TwoFactorReplaceSteps.vue
new file mode 100644
index 0000000..eed8ed4
--- /dev/null
+++ b/frontend/src/components/settings/TwoFactorReplaceSteps.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+// 휴대폰 바꾸기 창의 차례 — "새 휴대폰 등록 › 지금 휴대폰으로 확인" (16단계 — 디자인 원본 Settings16 6 · 7)
+// 글로만 보인다(뱃지 · 동그라미 숫자 없음): 지금 걸음은 청록 굵게(aria-current="step"), 마친 걸음은 앞에 초록 체크, 남은 걸음은 회색. 사이의 › 는 읽지 않는다
+import AppIcon from '@/components/AppIcon.vue'
+import { TWO_FACTOR_REPLACE_TEXT } from '@/shared/constants/account-security'
+
+/** 바꾸기 창의 걸음 — ① 새 휴대폰 등록 · ② 지금 휴대폰으로 확인 */
+export type TwoFactorReplaceStep = 'new' | 'current'
+
+interface Props {
+  step: TwoFactorReplaceStep
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <ol
+    class="replace-steps"
+    :aria-label="TWO_FACTOR_REPLACE_TEXT.stepsLabel"
+    data-replace-steps
+  >
+    <li
+      :class="['replace-steps__item', { 'is-current': step === 'new' }]"
+      :aria-current="step === 'new' ? 'step' : undefined"
+    >
+      <AppIcon
+        v-if="step !== 'new'"
+        name="check"
+        :size="14"
+        :stroke-width="2.2"
+        class="replace-steps__done"
+      />
+      <span>{{ TWO_FACTOR_REPLACE_TEXT.stepNew }}</span>
+    </li>
+    <li
+      class="replace-steps__separator"
+      aria-hidden="true"
+    >
+      <AppIcon
+        name="chevron-right"
+        :size="14"
+        :stroke-width="2"
+      />
+    </li>
+    <li
+      :class="['replace-steps__item', { 'is-current': step === 'current' }]"
+      :aria-current="step === 'current' ? 'step' : undefined"
+    >
+      <span>{{ TWO_FACTOR_REPLACE_TEXT.stepCurrent }}</span>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+/* 12.5px · 사이 4 8 — 좁으면 줄을 바꾼다 */
+.replace-steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4) var(--space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--font-size-label);
+}
+
+.replace-steps__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+.replace-steps__item.is-current {
+  color: var(--color-brand-strong);
+  font-weight: 700;
+}
+
+.replace-steps__done {
+  color: var(--color-success-text);
+}
+
+.replace-steps__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-icon-muted);
+}
+</style>
diff --git a/frontend/src/components/settings/VacationExternalFields.vue b/frontend/src/components/settings/VacationExternalFields.vue
new file mode 100644
index 0000000..94b0c71
--- /dev/null
+++ b/frontend/src/components/settings/VacationExternalFields.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+// 부재중 자동 응답 — 회사 밖에서 온 메일 (16단계 — 디자인 원본 Settings16 1 · 2 · 4, 계약 2절 "부재중 자동 응답")
+// 내용 칸과 [저장] 사이. "보낸 사람 주소가 회사 메일 주소(@도메인)가 아닌 메일입니다."(내 주소의 도메인) + 고르기 셋(라디오 18 · 이름 굵게 + 아래 설명 12.5 —
+// 보내기 · 읽기 설정의 외부 이미지 칸과 같은 모양): 사내와 같은 응답(처음 값) · 보내지 않기 · 따로 쓰기 — 칸이 열리는 따로 쓰기가 맨 끝.
+// 따로 쓰기를 고르면 바로 아래(고르기 글자 선 28 에 맞춰 들여 씀)에 회사 밖에 보낼 제목 · 내용 칸이 열린다 — 그 칸은 쓰는 쪽이 기본 슬롯으로 넣는다.
+// 다른 고르기로 바꾸면 칸을 닫지만(v-show) 써 둔 글은 그대로 남아 함께 저장한다. 끈 동안은 묶음째 흐리게
+// 고정 id — #vacation-external-same · #vacation-external-none · #vacation-external-separate · #vacation-external-hint
+import { VACATION_EXTERNAL_MODES, VACATION_TEXT } from '@/shared/constants/mail-vacation'
+import type { MailVacationExternalMode } from '@/shared/types/mail'
+
+interface Props {
+  mode: MailVacationExternalMode
+  /** 회사 메일 도메인 — 내 주소의 것 */
+  domain: string
+  disabled: boolean
+}
+
+interface Emits {
+  (e: 'update:mode', mode: MailVacationExternalMode): void
+}
+
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+</script>
+
+<template>
+  <fieldset
+    class="vacation-external"
+    :disabled="disabled"
+    aria-describedby="vacation-external-hint"
+    data-vacation-external
+  >
+    <legend class="vacation-external__legend">
+      {{ VACATION_TEXT.externalLegend }}
+    </legend>
+    <p
+      id="vacation-external-hint"
+      class="vacation-external__hint"
+    >
+      {{ VACATION_TEXT.externalHint(domain) }}
+    </p>
+    <label
+      v-for="option in VACATION_EXTERNAL_MODES"
+      :key="option"
+      class="vacation-external__option"
+    >
+      <input
+        :id="`vacation-external-${option}`"
+        type="radio"
+        name="vacation-external"
+        class="vacation-external__radio"
+        :value="option"
+        :checked="mode === option"
+        :aria-describedby="`vacation-external-${option}-hint`"
+        @change="emit('update:mode', option)"
+      >
+      <span class="vacation-external__option-text">
+        <span class="vacation-external__option-label">{{ VACATION_TEXT.externalOptions[option].label }}</span>
+        <span
+          :id="`vacation-external-${option}-hint`"
+          class="vacation-external__option-hint"
+        >{{ VACATION_TEXT.externalOptions[option].hint }}</span>
+      </span>
+    </label>
+    <!-- 따로 쓰기의 두 칸 — 다른 고르기면 닫지만 글은 남긴다 -->
+    <div
+      v-show="mode === 'separate'"
+      class="vacation-external__separate"
+      data-vacation-external-separate
+    >
+      <slot />
+    </div>
+  </fieldset>
+</template>
+
+<style scoped>
+.vacation-external {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+/* 끈 동안 — 기간 묶음과 같이 글을 흐리게 (안의 제목 칸 · 편집기는 스스로 흐려진다) */
+.vacation-external:disabled .vacation-external__option-text {
+  color: var(--color-icon-muted);
+}
+
+.vacation-external:disabled .vacation-external__option-hint {
+  color: inherit;
+}
+
+.vacation-external__legend {
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.vacation-external__hint {
+  margin: var(--space-2) 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+/* 줄마다 라디오 18 · 이름(굵게) + 아래 설명 — 줄 전체가 44 (보내기 · 읽기 설정의 외부 이미지 칸과 같다) */
+.vacation-external__option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-10);
+  min-height: var(--size-touch);
+  padding: var(--space-8) 0;
+  cursor: pointer;
+}
+
+.vacation-external:disabled .vacation-external__option {
+  cursor: default;
+}
+
+.vacation-external__radio {
+  flex: 0 0 auto;
+  width: var(--size-option-input);
+  height: var(--size-option-input);
+  margin: var(--space-1) 0 0;
+  accent-color: var(--color-brand);
+}
+
+.vacation-external__option-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.vacation-external__option-label {
+  font-weight: 600;
+}
+
+.vacation-external__option-hint {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+/* 따로 쓰기의 두 칸 — 고르기 글자 선(라디오 18 + 사이 10 = 28)에 맞춰 들여 쓴다 · 사이 18 */
+.vacation-external__separate {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-18);
+  padding: var(--space-6) 0 0 var(--space-28);
+}
+</style>
diff --git a/frontend/src/components/settings/VacationForm.vue b/frontend/src/components/settings/VacationForm.vue
index b4993d4..e646503 100644
--- a/frontend/src/components/settings/VacationForm.vue
+++ b/frontend/src/components/settings/VacationForm.vue
@@ -1,35 +1,53 @@
 <script setup lang="ts">
-// 부재중 자동 응답 설정 (디자인 원본 SettingsVacation · 계약 2절 "부재중 자동 응답")
-// 위에서부터 [x] 사용(44) → 기간(VacationPeriodFields) → 제목 · 내용(VacationMessageFields) → [저장] + 상태 글 → 미리 보기(VacationPreview).
+// 부재중 자동 응답 설정 (디자인 원본 SettingsVacation · 16단계 Settings16 1~4 · 계약 2절 "부재중 자동 응답")
+// 위에서부터 [x] 사용(44) → 기간(VacationPeriodFields) → 제목 · 내용(VacationMessageFields — 내용은 서명 칸과 같은 서식 편집기, 그림 없음) →
+// 회사 밖에서 온 메일(VacationExternalFields — 사내와 같은 응답 · 보내지 않기 · 따로 쓰기, 따로 쓰기면 회사 밖에 보낼 제목 · 내용) →
+// [저장] + 상태 글 → 미리 보기(VacationPreview — [사내 | 회사 밖]).
+// 편집기(TipTap)가 든 청크라 설정 화면(MailVacationPage)이 이 양식째 지연 로딩한다 — 못 받으면 쓰기 화면과 같은 "다시 시도".
 // - 끄면 아래 칸을 흐리게(쓴 글은 남긴다). 켤 때만 제목 · 내용이 필요하다 — 꺼 두면 빈 칸도 저장된다
-// - 저장하기 전에 막는 것(켜 둘 때): 기간(날짜가 없음 · 시작이 끝보다 늦음) · 빈 제목 · 빈 내용 — 그 칸 아래에 사전 문구(VAL_001), 첫 칸으로 초점.
-//   서버의 거절(VAL_001)은 저장 단추 옆에 사전 문구로 (알림은 끈다) — 저장하는 사이 화면을 떠났으면 알림으로 (notifyApiError)
+// - 저장하기 전에 막는 것(켜 둘 때 — 보는 차례 기간 · 제목 · 내용 · 회사 밖에 보낼 제목 · 회사 밖에 보낼 내용, 첫 칸으로 초점):
+//   기간(날짜가 없음 · 시작이 끝보다 늦음) · 빈 제목 · 빈 내용 · 서식 본문 10,000자 넘음 — 그 칸 아래에 사전 문구(VAL_001),
+//   내용이 600자(서식을 뺀 보이는 글)를 넘으면 "내용은 600자까지 쓸 수 있습니다." + 빨간 글자 수. 회사 밖 두 칸은 따로 쓰기일 때만 본다. 알림은 띄우지 않는다.
+//   서버의 거절(VAL_001)은 저장 단추 옆에 사전 문구로 (알림은 끈다) — 저장하는 사이 화면을 떠났으면 알림으로 (notifyApiError).
+//   MAIL_013(엔진 규칙이 한도를 넘음 — 부재중은 서식 본문이 원본과 응답에 두 번 들어가 필터가 없어도 넘을 수 있다)은 같은 자리에 부재중 글(saveTooLong)로
+// - 저장: PUT /mail-vacation 일곱 칸 — 내용은 편집기의 보이는 글(textBody) · 서식 본문(htmlBody — 비었으면 null),
+//   회사 밖 응답(external)은 고르기와 상관없이 따로 쓴 제목 · 내용을 함께(다른 고르기로 바꿔도 글을 남긴다 — 보드 결정).
+//   서식 본문은 서식(굵게 · 기울임 · 밑줄 · 글자 색 · 링크)을 쓴 칸만 — 글만 쓴 칸은 null (서버가 새 칸을 쓴 직원만 새 원본 판으로 저장한다 — 16단계 리뷰)
 // - 저장하면 "저장했습니다. 10월 30일(금)부터 11월 3일(화)까지 자동으로 답합니다." 등 — 무엇이든 다시 바꾸면 내린다
+// - 16단계 전에 저장한 글만 있는 응답은 줄마다 문단으로 연다(textToParagraphHtml)
 // - 나가기 확인: 불러온(저장한 뒤에는 저장한) 값과 다르면 앱 안 이동은 대화상자, 탭 닫기 · 새로고침은 브라우저 확인창 (서명 설정과 같다).
-//   저장하는 중 · 세션이 끝났을 때는 앱 안 이동을 묻지 않는다
+//   내용은 편집기가 잰다(isChanged — 저장한 뒤에는 저장한 내용과). 저장하는 중 · 세션이 끝났을 때는 앱 안 이동을 묻지 않는다
 // 고정 id — #vacation-enabled · #vacation-save · #vacation-save-status ·
 // 나가기 확인 #vacation-leave-dialog · #vacation-leave-stay · #vacation-leave-confirm (칸의 id 는 각 칸 컴포넌트에)
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { computed, onBeforeUnmount, reactive, ref, shallowRef } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
 import LeaveConfirmDialog from '@/components/feedback/LeaveConfirmDialog.vue'
+import VacationExternalFields from '@/components/settings/VacationExternalFields.vue'
 import VacationMessageFields from '@/components/settings/VacationMessageFields.vue'
 import VacationPeriodFields from '@/components/settings/VacationPeriodFields.vue'
 import VacationPreview from '@/components/settings/VacationPreview.vue'
 import { getErrorMessage, notifyApiError, toApiError } from '@/composables/useApi'
 import { useLeaveConfirm } from '@/composables/useLeaveConfirm'
-import { VACATION_LEAVE_DIALOG, VACATION_TEXT } from '@/shared/constants/mail-vacation'
-import type { MailVacation } from '@/shared/types/mail'
-import { formatDate } from '@/shared/utils/format'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import { VACATION_BODY_MAX_LENGTH, VACATION_LEAVE_DIALOG, VACATION_TEXT } from '@/shared/constants/mail-vacation'
+import type { MailVacation, MailVacationExternalMode } from '@/shared/types/mail'
+import { formatCount, formatDate } from '@/shared/utils/format'
+import { textToParagraphHtml } from '@/shared/utils/mail-quote'
 import {
+  emailDomainOf,
+  firstVacationProblem,
   sameVacationForm,
+  vacationExternalOf,
   vacationFormOf,
   vacationPayloadOf,
   vacationProblems,
   vacationSavedText,
   type VacationForm,
   type VacationPeriod,
-  type VacationProblem,
+  type VacationProblemField,
+  type VacationProblems,
 } from '@/shared/utils/mail-vacation'
 import { useAuthStore } from '@/stores/auth.store'
 import { useMailVacationStore } from '@/stores/mail-vacation.store'
@@ -41,29 +59,52 @@ interface Props {
 
 const props = defineProps<Props>()
 
+/** [저장] 옆에 보이는 서버 거절 — 알림을 끈다 (MAIL_013 은 부재중 글로 바꿔 보인다) */
+const SAVE_INLINE_CODES: readonly ErrorCode[] = ['VAL_001', 'MAIL_013']
+
 const authStore = useAuthStore()
 const vacationStore = useMailVacationStore()
 
 const periodRef = ref<InstanceType<typeof VacationPeriodFields> | null>(null)
 const messageRef = ref<InstanceType<typeof VacationMessageFields> | null>(null)
+const externalRef = ref<InstanceType<typeof VacationMessageFields> | null>(null)
+
+/**
+ * 편집기에 처음 넣을 내용 — 서식 본문이 있으면 그것, 없으면 지금 글을 줄마다 문단으로(16단계 전에 저장한 글만 있는 응답), 둘 다 없으면 빈 칸
+ */
+function bodyHtmlOf(htmlBody: string | null | undefined, textBody: string | null | undefined): string {
+  if (htmlBody) return htmlBody
+  return textBody ? textToParagraphHtml(textBody) : ''
+}
+
+const external = vacationExternalOf(props.vacation.external)
+const insideHtml = bodyHtmlOf(props.vacation.htmlBody, props.vacation.textBody)
+const outsideHtml = bodyHtmlOf(external.htmlBody, external.textBody)
 
 const form = reactive<VacationForm>(vacationFormOf(props.vacation))
-/** 불러온(저장한 뒤에는 저장한) 값 — 이것과 다르면 바꾼 것이다 */
+/** 불러온(저장한 뒤에는 저장한) 칸 — 이것과 다르면 바꾼 것이다 (내용은 편집기가 잰다) */
 const saved = shallowRef<VacationForm>(vacationFormOf(props.vacation))
+/** 불러온(저장한) 뒤 내용 칸을 바꿨다 — 편집기가 잰다 */
+const bodyChanged = ref<boolean>(false)
 const saveState = ref<'idle' | 'saving' | 'saved'>('idle')
 const savedText = ref<string>('')
-const problems = ref<VacationProblem[]>([])
+const problems = ref<VacationProblems>({})
 /** 서버가 거절한 까닭 (사전 문구) */
 const saveError = ref<string | null>(null)
+/** 미리 보기가 그릴 문서 — 편집기가 바뀔 때마다 */
+const insideDoc = shallowRef<ProseMirrorNode | null>(null)
+const outsideDoc = shallowRef<ProseMirrorNode | null>(null)
 /** 화면이 사라졌다 — 저장 단추 옆 글을 볼 곳이 없다 */
 let unmounted = false
 
-const changed = computed(() => !sameVacationForm(form, saved.value))
-const problemText = getErrorMessage('VAL_001')
+const changed = computed(() => !sameVacationForm(form, saved.value) || bodyChanged.value)
+const domain = computed(() => emailDomainOf(authStore.user?.email ?? ''))
 
-/** 그 칸에 걸린 문제의 문구 — 없으면 null */
-function problemOf(problem: VacationProblem): string | null {
-  return problems.value.includes(problem) ? problemText : null
+/** 그 칸에 걸린 문제의 문구 — 없으면 null. 내용이 600자를 넘으면 전용 글, 그 밖은 사전 문구(VAL_001) */
+function problemOf(field: VacationProblemField): string | null {
+  const kind = problems.value[field]
+  if (!kind) return null
+  return kind === 'tooLong' ? VACATION_TEXT.bodyTooLong(formatCount(VACATION_BODY_MAX_LENGTH)) : getErrorMessage('VAL_001')
 }
 
 // 세션이 끝났거나 제한이 붙었으면(13단계) 묻지 않는다 — 그 흐름이 로그인 화면으로 보낸다
@@ -72,17 +113,35 @@ const { confirming: leaveConfirming, stay: stayOnForm, leave: leaveForm } = useL
   unloadActive: () => changed.value && authStore.canUseApp,
 })
 
-/** 칸을 고친다 — 그 칸의 문제와 "저장했습니다" · 서버 거절을 내린다 */
-function edit(patch: Partial<VacationForm>, clears: readonly VacationProblem[]) {
-  Object.assign(form, patch)
-  problems.value = problems.value.filter((problem) => !clears.includes(problem))
+function clearProblems(clears: readonly VacationProblemField[]) {
+  if (clears.every((field) => problems.value[field] === undefined)) return
+  const next = { ...problems.value }
+  for (const field of clears) delete next[field]
+  problems.value = next
+}
+
+/** 무엇이든 바꾸면 "저장했습니다" · 서버 거절을 내린다 */
+function markChanged() {
   saveError.value = null
   if (saveState.value === 'saved') saveState.value = 'idle'
 }
 
-/** 켜고 끄기 — 끄면 칸이 흐려지므로 걸려 있던 문제도 내린다 */
+/** 칸을 고친다 — 그 칸의 문제와 "저장했습니다" · 서버 거절을 내린다 */
+function edit(patch: Partial<VacationForm>, clears: readonly VacationProblemField[]) {
+  Object.assign(form, patch)
+  clearProblems(clears)
+  markChanged()
+}
+
+/** 켜고 끄기 — 끄면 칸이 흐려지므로 걸려 있던 문제도 모두 내린다 */
 function setEnabled(event: Event) {
-  edit({ isEnabled: (event.target as HTMLInputElement).checked }, ['period', 'subject', 'textBody'])
+  edit({ isEnabled: (event.target as HTMLInputElement).checked }, [
+    'period',
+    'subject',
+    'textBody',
+    'externalSubject',
+    'externalTextBody',
+  ])
 }
 
 /** 기간 정하기로 바꾸는데 날짜가 비었으면 시작을 오늘로 채운다 (끝은 사용자가 고른다) */
@@ -91,38 +150,85 @@ function setPeriod(period: VacationPeriod) {
   edit({ period, ...prefill }, ['period'])
 }
 
-function focusFirst(found: readonly VacationProblem[]) {
-  if (found.includes('period')) periodRef.value?.focus()
-  else if (found.includes('subject')) messageRef.value?.focusSubject()
-  else if (found.includes('textBody')) messageRef.value?.focusBody()
+/** 회사 밖 응답 고르기 — 다른 고르기면 회사 밖 두 칸을 보지 않으니 그 문제를 내린다 (쓴 글은 남긴다) */
+function setExternalMode(mode: MailVacationExternalMode) {
+  edit({ externalMode: mode }, ['externalSubject', 'externalTextBody'])
+}
+
+function measureBodies() {
+  bodyChanged.value = (messageRef.value?.isChanged() ?? false) || (externalRef.value?.isChanged() ?? false)
+}
+
+function onInsideReady(doc: ProseMirrorNode) {
+  insideDoc.value = doc
+}
+
+function onOutsideReady(doc: ProseMirrorNode) {
+  outsideDoc.value = doc
+}
+
+/** 내용 칸을 고쳤다 — 그 칸의 문제를 내리고 미리 보기를 다시 그린다 */
+function onInsideChange(doc: ProseMirrorNode) {
+  insideDoc.value = doc
+  measureBodies()
+  clearProblems(['textBody'])
+  markChanged()
+}
+
+function onOutsideChange(doc: ProseMirrorNode) {
+  outsideDoc.value = doc
+  measureBodies()
+  clearProblems(['externalTextBody'])
+  markChanged()
+}
+
+function focusProblem(field: VacationProblemField) {
+  if (field === 'period') periodRef.value?.focus()
+  else if (field === 'subject') messageRef.value?.focusSubject()
+  else if (field === 'textBody') messageRef.value?.focusBody()
+  else if (field === 'externalSubject') externalRef.value?.focusSubject()
+  else externalRef.value?.focusBody()
 }
 
 async function save() {
-  if (saveState.value === 'saving') return
+  const insideFields = messageRef.value
+  const outsideFields = externalRef.value
+  if (saveState.value === 'saving' || !insideFields || !outsideFields) return
   saveError.value = null
-  const found = vacationProblems(form)
+  const inside = insideFields.getContent()
+  const outside = outsideFields.getContent()
+  const found = vacationProblems(form, inside, outside)
   problems.value = found
-  if (found.length > 0) {
-    focusFirst(found)
+  const first = firstVacationProblem(found)
+  if (first) {
+    focusProblem(first)
     return
   }
   const sent: VacationForm = { ...form }
+  // 저장할 때의 내용 — 저장이 끝나면 이것을 "바꾸지 않은" 기준으로 삼는다 (저장하는 동안 더 고친 것은 바꿈으로 남는다)
+  const insidePoint = insideFields.captureSavePoint()
+  const outsidePoint = outsideFields.captureSavePoint()
   saveState.value = 'saving'
   try {
-    const result = await vacationStore.save(vacationPayloadOf(sent), { silent: ['VAL_001'] })
+    const result = await vacationStore.save(vacationPayloadOf(sent, inside, outside), { silent: SAVE_INLINE_CODES })
     const savedForm = vacationFormOf(result)
     // 저장하는 동안 더 고치지 않았으면 서버가 저장한 값으로 맞춘다 (흐린 칸의 맞지 않는 기간은 비워 저장했다)
     if (sameVacationForm(form, sent)) Object.assign(form, savedForm)
     saved.value = savedForm
+    messageRef.value?.markSaved(insidePoint)
+    externalRef.value?.markSaved(outsidePoint)
+    measureBodies()
     savedText.value = vacationSavedText(result)
     saveState.value = 'saved'
   } catch (error) {
     saveState.value = 'idle'
     const apiError = toApiError(error)
-    if (apiError.code !== 'VAL_001') return
+    if (!SAVE_INLINE_CODES.includes(apiError.code)) return
+    // 엔진 규칙이 한도를 넘음 — 사전 문구(필터 · 차단 목록) 대신 부재중 글로 (서식 본문이 두 번 들어가 필터가 없어도 넘을 수 있다)
+    const message = apiError.code === 'MAIL_013' ? VACATION_TEXT.saveTooLong : apiError.message
     // 알림을 끈 거절 — 화면을 떠났으면 알림으로 알린다 (보내는 사이 떠나도 묻지 않는다)
-    if (unmounted) notifyApiError(apiError)
-    else saveError.value = apiError.message
+    if (unmounted) notifyApiError({ ...apiError, message })
+    else saveError.value = message
   }
 }
 
@@ -158,15 +264,47 @@ onBeforeUnmount(() => {
 
     <VacationMessageFields
       ref="messageRef"
+      id-prefix="vacation"
+      :subject-label="VACATION_TEXT.subject"
+      :body-label="VACATION_TEXT.body"
+      :toolbar-label="VACATION_TEXT.toolbarLabel"
+      :hint="VACATION_TEXT.bodyHint"
       :subject="form.subject"
-      :text-body="form.textBody"
+      :initial-html="insideHtml"
       :disabled="!form.isEnabled"
+      :limit-active="form.isEnabled"
       :subject-error="problemOf('subject')"
       :body-error="problemOf('textBody')"
       @update:subject="edit({ subject: $event }, ['subject'])"
-      @update:text-body="edit({ textBody: $event }, ['textBody'])"
+      @ready="onInsideReady"
+      @change="onInsideChange"
     />
 
+    <VacationExternalFields
+      :mode="form.externalMode"
+      :domain="domain"
+      :disabled="!form.isEnabled"
+      @update:mode="setExternalMode"
+    >
+      <VacationMessageFields
+        ref="externalRef"
+        class="vacation-form__external-message"
+        id-prefix="vacation-external"
+        :subject-label="VACATION_TEXT.externalSubject"
+        :body-label="VACATION_TEXT.externalBody"
+        :toolbar-label="VACATION_TEXT.externalToolbarLabel"
+        :subject="form.externalSubject"
+        :initial-html="outsideHtml"
+        :disabled="!form.isEnabled"
+        :limit-active="form.isEnabled && form.externalMode === 'separate'"
+        :subject-error="problemOf('externalSubject')"
+        :body-error="problemOf('externalTextBody')"
+        @update:subject="edit({ externalSubject: $event }, ['externalSubject'])"
+        @ready="onOutsideReady"
+        @change="onOutsideChange"
+      />
+    </VacationExternalFields>
+
     <div class="vacation-form__actions">
       <button
         id="vacation-save"
@@ -207,8 +345,11 @@ onBeforeUnmount(() => {
       :enabled="form.isEnabled"
       :sender-name="authStore.user?.name ?? ''"
       :sender-email="authStore.user?.email ?? ''"
+      :mode="form.externalMode"
       :subject="form.subject"
-      :text-body="form.textBody"
+      :external-subject="form.externalSubject"
+      :inside-doc="insideDoc"
+      :outside-doc="outsideDoc"
     />
 
     <!-- 저장하지 않은 채 떠나려 할 때 — 답할 때까지 이동이 기다린다 (useLeaveConfirm) -->
@@ -246,6 +387,11 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
+/* 따로 쓰기의 두 칸 — 사이 18 (디자인 원본 Settings16 2 — 칸 묶음의 22 보다 앞서게 한 단계 더 좁혀 고른다) */
+.vacation-form .vacation-form__external-message {
+  gap: var(--space-18);
+}
+
 .vacation-form__actions {
   display: flex;
   flex-wrap: wrap;
diff --git a/frontend/src/components/settings/VacationMessageFields.vue b/frontend/src/components/settings/VacationMessageFields.vue
index 7ba085a..7d7eab1 100644
--- a/frontend/src/components/settings/VacationMessageFields.vue
+++ b/frontend/src/components/settings/VacationMessageFields.vue
@@ -1,16 +1,37 @@
 <script setup lang="ts">
-// 부재중 자동 응답의 제목(44 · 최대 폭 520 · 150자) · 내용(여러 줄 · 600자 · 글자만) (디자인 원본 SettingsVacation — 한도는 계약 2절)
-// 끈 동안은 흐리게(쓴 글은 남긴다). 문제가 있으면 그 칸 아래에 사전 문구 — 검사는 부모(VacationForm)가 한다.
-// 고정 id — #vacation-subject · #vacation-subject-error · #vacation-body · #vacation-body-hint · #vacation-body-error
-import { ref } from 'vue'
+// 부재중 자동 응답의 제목(44 · 최대 폭 520 · 150자) · 내용(서식 편집기 — 16단계, 디자인 원본 Settings16 1 · 2 · 4 — 한도는 계약 2절)
+// 사내 답장 칸(제목 · 내용)과 따로 쓰기의 회사 밖 칸(회사 밖에 보낼 제목 · 회사 밖에 보낼 내용)이 함께 쓴다 — id 는 idPrefix 로 가른다.
+// - 내용 칸은 서명 칸과 같은 편집기(SignatureEditor — 그림 끔: 굵게 · 기울임 · 밑줄 | 글자 색 · 링크, 툴바 52 · 단추 40×44 · 맑은 고딕 14 · 줄 간격 1.75 · 높이 150).
+//   TipTap 이 든 청크라 이 부품은 지연 로딩한 부재중 양식(VacationForm) 안에서만 쓴다
+// - 칸 이름 오른쪽에 글자 수 "132 / 600"(서식을 뺀 보이는 글 — 편집기의 getText, 주소록 메모와 같은 자리). 켜 둔 채 600자를 넘으면 빨갛게
+// - 끈 동안은 흐리게(쓴 글은 남긴다 — 편집기는 읽기만). 문제가 있으면 그 칸 아래에 글(사전 문구 · 600자 글) — 검사는 부모(VacationForm)가 한다
+// - 보낼 내용(getContent)의 서식 본문은 서식(굵게 · 기울임 · 밑줄 · 글자 색 · 링크)이 하나라도 있을 때만 — 글만 쓴 응답은 null(hasVacationFormatting, 16단계 리뷰)
+// 고정 id — #{idPrefix}-subject · #{idPrefix}-subject-error · #{idPrefix}-body(편집 영역) · #{idPrefix}-body-label · #{idPrefix}-body-error · #{idPrefix}-body-hint
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { computed, ref } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
+import SignatureEditor from '@/components/mail/editor/signature/SignatureEditor.vue'
+import type { EditorSavePoint } from '@/components/mail/editor/mail-editor-handle'
 import { VACATION_BODY_MAX_LENGTH, VACATION_SUBJECT_MAX_LENGTH, VACATION_TEXT } from '@/shared/constants/mail-vacation'
+import { formatCount } from '@/shared/utils/format'
+import { hasVacationFormatting, type VacationContent } from '@/shared/utils/mail-vacation'
 
 interface Props {
+  /** id 앞부분 — 사내 답장 "vacation" · 회사 밖 "vacation-external" */
+  idPrefix: string
+  subjectLabel: string
+  bodyLabel: string
+  /** 툴바의 화면 낭독 이름 */
+  toolbarLabel: string
+  /** 내용 칸 아래 안내 — 없으면 두지 않는다 (회사 밖 칸) */
+  hint?: string
   subject: string
-  textBody: string
+  /** 편집기에 처음 넣을 내용 */
+  initialHtml: string
   disabled: boolean
+  /** 글자 수 한도를 지금 보는가 — 켜 둘 때만 넘은 수를 빨갛게 */
+  limitActive: boolean
   /** 칸마다의 문제 문구 — 없으면 null */
   subjectError?: string | null
   bodyError?: string | null
@@ -18,25 +39,80 @@ interface Props {
 
 interface Emits {
   (e: 'update:subject', value: string): void
-  (e: 'update:textBody', value: string): void
+  /** 편집기를 다 만들었다 — 미리 보기가 그릴 문서 */
+  (e: 'ready', doc: ProseMirrorNode): void
+  /** 내용이 바뀌었다 (커서만 옮긴 것은 빼고) */
+  (e: 'change', doc: ProseMirrorNode): void
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  hint: '',
   subjectError: null,
   bodyError: null,
 })
 const emit = defineEmits<Emits>()
 
 const subjectRef = ref<HTMLInputElement | null>(null)
-const bodyRef = ref<HTMLTextAreaElement | null>(null)
+const editorRef = ref<InstanceType<typeof SignatureEditor> | null>(null)
+/** 보이는 글의 길이 — 편집기가 바뀔 때마다 다시 센다 */
+const bodyLength = ref<number>(0)
+/** 편집 중인 문서 — 편집기가 다 만들어지거나 바뀔 때마다 받는다 (서식이 있는지 본다) */
+let currentDoc: ProseMirrorNode | null = null
+
+const subjectId = computed(() => `${props.idPrefix}-subject`)
+const subjectErrorId = computed(() => `${props.idPrefix}-subject-error`)
+const bodyId = computed(() => `${props.idPrefix}-body`)
+const bodyLabelId = computed(() => `${props.idPrefix}-body-label`)
+const bodyErrorId = computed(() => `${props.idPrefix}-body-error`)
+const bodyHintId = computed(() => `${props.idPrefix}-body-hint`)
+/** 편집 영역의 설명 — 오류 → 안내 차례 (디자인 원본 Settings16 4) */
+const bodyDescribedBy = computed(() => {
+  const ids = [props.bodyError ? bodyErrorId.value : '', props.hint ? bodyHintId.value : ''].filter(Boolean)
+  return ids.length > 0 ? ids.join(' ') : null
+})
+const count = computed(() => VACATION_TEXT.bodyCount(formatCount(bodyLength.value), formatCount(VACATION_BODY_MAX_LENGTH)))
+const overLimit = computed(() => props.limitActive && bodyLength.value > VACATION_BODY_MAX_LENGTH)
+
+function countBody() {
+  bodyLength.value = editorRef.value?.getText().length ?? 0
+}
+
+function onReady(doc: ProseMirrorNode) {
+  currentDoc = doc
+  countBody()
+  emit('ready', doc)
+}
+
+function onChange(doc: ProseMirrorNode) {
+  currentDoc = doc
+  countBody()
+  emit('change', doc)
+}
 
 function valueOf(event: Event): string {
-  return (event.target as HTMLInputElement | HTMLTextAreaElement).value
+  return (event.target as HTMLInputElement).value
+}
+
+/**
+ * 보낼 내용 — 보이는 글 · 서식 본문. 서식 본문은 서식이 하나라도 있을 때만(글만 쓴 응답 · 빈 칸은 null). 편집기가 아직 없으면 빈 내용
+ */
+function getContent(): VacationContent {
+  const content = editorRef.value?.getContent()
+  const formatted = currentDoc !== null && hasVacationFormatting(currentDoc)
+  return { text: content?.text ?? '', html: formatted ? (content?.html ?? null) : null }
 }
 
 defineExpose({
   focusSubject: () => subjectRef.value?.focus(),
-  focusBody: () => bodyRef.value?.focus(),
+  focusBody: () => editorRef.value?.focus(),
+  getContent,
+  /** 불러온(저장한 뒤에는 저장한) 내용과 다른가 */
+  isChanged: (): boolean => editorRef.value?.isChanged() ?? false,
+  /** 저장할 때의 내용 — 저장이 끝나면 markSaved 로 돌려준다 */
+  captureSavePoint: (): EditorSavePoint | null => editorRef.value?.captureSavePoint() ?? null,
+  markSaved: (point: EditorSavePoint | null) => {
+    if (point) editorRef.value?.markSaved(point)
+  },
 })
 </script>
 
@@ -44,11 +120,11 @@ defineExpose({
   <div class="vacation-message">
     <div class="vacation-message__field">
       <label
-        for="vacation-subject"
+        :for="subjectId"
         class="vacation-message__label"
-      >{{ VACATION_TEXT.subject }}</label>
+      >{{ subjectLabel }}</label>
       <input
-        id="vacation-subject"
+        :id="subjectId"
         ref="subjectRef"
         class="form-input vacation-message__subject"
         type="text"
@@ -56,12 +132,12 @@ defineExpose({
         :maxlength="VACATION_SUBJECT_MAX_LENGTH"
         :disabled="disabled"
         :aria-invalid="subjectError ? 'true' : 'false'"
-        :aria-describedby="subjectError ? 'vacation-subject-error' : undefined"
+        :aria-describedby="subjectError ? subjectErrorId : undefined"
         @input="emit('update:subject', valueOf($event))"
       >
       <p
         v-if="subjectError"
-        id="vacation-subject-error"
+        :id="subjectErrorId"
         class="form-message form-message--error"
       >
         <AppIcon
@@ -73,26 +149,33 @@ defineExpose({
       </p>
     </div>
 
-    <div class="vacation-message__field">
-      <label
-        for="vacation-body"
-        class="vacation-message__label"
-      >{{ VACATION_TEXT.body }}</label>
-      <textarea
-        id="vacation-body"
-        ref="bodyRef"
-        class="form-input vacation-message__body"
-        rows="6"
-        :value="textBody"
-        :maxlength="VACATION_BODY_MAX_LENGTH"
+    <div class="vacation-message__field vacation-message__body">
+      <div class="vacation-message__label-row">
+        <span
+          :id="bodyLabelId"
+          class="vacation-message__label"
+        >{{ bodyLabel }}</span>
+        <span
+          :class="['vacation-message__count', { 'is-over': overLimit }]"
+          :data-vacation-count="idPrefix"
+        >{{ count }}</span>
+      </div>
+      <SignatureEditor
+        ref="editorRef"
+        :body-id="bodyId"
+        :toolbar-label="toolbarLabel"
+        :allow-images="false"
+        :labelled-by="bodyLabelId"
+        :described-by="bodyDescribedBy"
+        :invalid="bodyError !== null"
         :disabled="disabled"
-        :aria-invalid="bodyError ? 'true' : 'false'"
-        :aria-describedby="bodyError ? 'vacation-body-hint vacation-body-error' : 'vacation-body-hint'"
-        @input="emit('update:textBody', valueOf($event))"
+        :initial-html="initialHtml"
+        @ready="onReady"
+        @change="onChange"
       />
       <p
         v-if="bodyError"
-        id="vacation-body-error"
+        :id="bodyErrorId"
         class="form-message form-message--error"
       >
         <AppIcon
@@ -103,10 +186,11 @@ defineExpose({
         <span>{{ bodyError }}</span>
       </p>
       <p
-        id="vacation-body-hint"
+        v-if="hint"
+        :id="bodyHintId"
         class="form-message"
       >
-        {{ VACATION_TEXT.bodyHint }}
+        {{ hint }}
       </p>
     </div>
   </div>
@@ -134,10 +218,28 @@ defineExpose({
   max-width: var(--form-wide-max-width);
 }
 
+/* 내용 칸 이름 줄 — 오른쪽에 글자 수 (주소록 메모와 같은 자리 · 12px) */
+.vacation-message__label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-8);
+}
+
+.vacation-message__count {
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 켜 둔 채 600자를 넘음 — 빨갛게 굵게 (디자인 원본 Settings16 4) */
+.vacation-message__count.is-over {
+  font-weight: 600;
+  color: var(--color-danger);
+}
+
+/* 편집 영역 높이 150 (디자인 원본 Settings16 — 서명 칸은 132) */
 .vacation-message__body {
-  width: 100%;
-  padding: var(--space-10) var(--space-12);
-  line-height: var(--line-height-body);
-  resize: vertical;
+  --signature-editor-min-height: 9.375rem;
 }
 </style>
diff --git a/frontend/src/components/settings/VacationPreview.vue b/frontend/src/components/settings/VacationPreview.vue
index 28683a1..d470a59 100644
--- a/frontend/src/components/settings/VacationPreview.vue
+++ b/frontend/src/components/settings/VacationPreview.vue
@@ -1,26 +1,69 @@
 <script setup lang="ts">
-// 부재중 자동 응답의 미리 보기 — "보낸 사람이 받는 답장" (디자인 원본 SettingsVacation)
-// 보낸 사람(나) · 제목 · 내용(글자 그대로 — 메일 본문 글꼴 14px · 줄 간격 1.75) + 아래 한 줄
-// (켜짐: "같은 사람에게 매번 보내지는 않습니다(메일 엔진 규칙)." · 꺼짐: "꺼져 있습니다 — 자동으로 답하지 않습니다.")
-import { computed } from 'vue'
+// 부재중 자동 응답의 미리 보기 — "보낸 사람이 받는 답장" (디자인 원본 SettingsVacation · 16단계 Settings16 3)
+// 머리 오른쪽 전환 [사내 | 회사 밖](36 — 서명 미리 보기와 같은 .segmented, 밀도 예외 재사용) — 처음은 사내 쪽. 사내와 같은 응답일 때도 둔다.
+// 보낸 사람(나) · 제목 · 내용(받는 사람이 보는 서식 그대로 — 메일 본문 글꼴 14px · 줄 간격 1.75) + 아래 한 줄(vacationPreviewNote).
+// - 내용은 편집 중인 문서를 편집기 스키마로 그린다(DOMSerializer — 스키마가 그리는 태그 · 속성뿐이라 남의 HTML 을 넣지 않는다, 서명 미리 보기와 같다).
+//   칸을 고친 값을 바로 그린다. 따로 쓰기의 회사 밖 쪽은 회사 밖에 보낼 제목 · 내용, 그 밖은 위의 제목 · 내용
+// - 보내지 않기의 회사 밖 쪽은 답장 대신 회색 상자 "회사 밖에서 온 메일에는 자동으로 답하지 않습니다." — 아래 글은 없다(꺼져 있으면 꺼짐 글)
+import { DOMSerializer, type Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { computed, ref, watch } from 'vue'
 
 import { MAIL_NO_SUBJECT } from '@/shared/constants/mail'
 import { VACATION_TEXT } from '@/shared/constants/mail-vacation'
+import type { MailVacationExternalMode } from '@/shared/types/mail'
+import {
+  vacationPreviewNote,
+  vacationPreviewSendsNothing,
+  vacationPreviewUsesExternal,
+  type VacationPreviewSide,
+} from '@/shared/utils/mail-vacation'
 
 interface Props {
   enabled: boolean
   senderName: string
   senderEmail: string
+  /** 회사 밖에서 온 메일에 보낼 응답 */
+  mode: MailVacationExternalMode
   subject: string
-  textBody: string
+  externalSubject: string
+  /** 편집 중인 문서 — 사내(위 내용) · 회사 밖(따로 쓴 내용). 아직 없으면 null */
+  insideDoc: ProseMirrorNode | null
+  outsideDoc: ProseMirrorNode | null
 }
 
 const props = defineProps<Props>()
 
+const SIDES: readonly { side: VacationPreviewSide; label: string }[] = [
+  { side: 'inside', label: VACATION_TEXT.previewInside },
+  { side: 'outside', label: VACATION_TEXT.previewOutside },
+]
+
+const side = ref<VacationPreviewSide>('inside')
+const bodyRef = ref<HTMLElement | null>(null)
+
 const sender = computed(() =>
   props.senderName ? `${props.senderName} <${props.senderEmail}>` : props.senderEmail,
 )
-const shownSubject = computed(() => props.subject.trim() || MAIL_NO_SUBJECT)
+const usesExternal = computed(() => vacationPreviewUsesExternal(props.mode, side.value))
+const sendsNothing = computed(() => vacationPreviewSendsNothing(props.mode, side.value))
+const shownSubject = computed(
+  () => (usesExternal.value ? props.externalSubject : props.subject).trim() || MAIL_NO_SUBJECT,
+)
+const shownDoc = computed(() => (usesExternal.value ? props.outsideDoc : props.insideDoc))
+const note = computed(() => vacationPreviewNote(props.enabled, props.mode, side.value))
+
+/** 문서를 그린다 — 스키마의 toDOM 결과만 붙인다 */
+function render() {
+  const target = bodyRef.value
+  if (!target) return
+  target.replaceChildren()
+  const doc = shownDoc.value
+  if (!doc) return
+  const fragment = DOMSerializer.fromSchema(doc.type.schema).serializeFragment(doc.content, { document })
+  target.append(fragment)
+}
+
+watch([shownDoc, bodyRef], render, { flush: 'post', immediate: true })
 </script>
 
 <template>
@@ -29,13 +72,42 @@ const shownSubject = computed(() => props.subject.trim() || MAIL_NO_SUBJECT)
     aria-labelledby="vacation-preview-title"
     data-vacation-preview
   >
-    <h2
-      id="vacation-preview-title"
-      class="vacation-preview__title"
+    <div class="vacation-preview__head">
+      <h2
+        id="vacation-preview-title"
+        class="vacation-preview__title"
+      >
+        {{ VACATION_TEXT.previewTitle }}
+      </h2>
+      <div
+        role="group"
+        :aria-label="VACATION_TEXT.previewSwitchLabel"
+        class="segmented"
+      >
+        <button
+          v-for="option in SIDES"
+          :key="option.side"
+          type="button"
+          class="segmented__item vacation-preview__side"
+          :data-preview-side="option.side"
+          :aria-pressed="side === option.side"
+          @click="side = option.side"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </div>
+    <div
+      v-if="sendsNothing"
+      class="vacation-preview__none"
+      data-vacation-preview-none
+    >
+      {{ VACATION_TEXT.previewNone }}
+    </div>
+    <div
+      v-else
+      class="vacation-preview__card"
     >
-      {{ VACATION_TEXT.previewTitle }}
-    </h2>
-    <div class="vacation-preview__card">
       <dl class="vacation-preview__meta">
         <dt class="vacation-preview__label">
           {{ VACATION_TEXT.previewFrom }}
@@ -53,18 +125,18 @@ const shownSubject = computed(() => props.subject.trim() || MAIL_NO_SUBJECT)
           {{ shownSubject }}
         </dd>
       </dl>
-      <!-- 글자 그대로 — 템플릿의 들여쓰기 공백이 끼지 않게 v-text 로 넣는다 -->
       <div
+        ref="bodyRef"
         class="vacation-preview__body"
         data-vacation-preview-body
-        v-text="textBody"
       />
     </div>
     <p
+      v-if="note"
       class="vacation-preview__note"
       data-vacation-preview-note
     >
-      {{ enabled ? VACATION_TEXT.previewNoteOn : VACATION_TEXT.previewNoteOff }}
+      {{ note }}
     </p>
   </section>
 </template>
@@ -76,12 +148,24 @@ const shownSubject = computed(() => props.subject.trim() || MAIL_NO_SUBJECT)
   gap: var(--space-12);
 }
 
+/* 머리 — 제목 + 전환, 좁으면 줄을 바꾼다 (사이 8 14) */
+.vacation-preview__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-14);
+}
+
 .vacation-preview__title {
   margin: 0;
   font-size: var(--font-size-body);
   font-weight: 700;
 }
 
+.vacation-preview__side {
+  padding: 0 var(--space-14);
+}
+
 .vacation-preview__card {
   display: flex;
   flex-direction: column;
@@ -110,7 +194,7 @@ const shownSubject = computed(() => props.subject.trim() || MAIL_NO_SUBJECT)
   overflow-wrap: anywhere;
 }
 
-/* 받는 쪽이 보는 모양 — 글자 그대로(줄바꿈 · 공백), 메일 본문 글꼴 */
+/* 받는 쪽이 보는 모양 — 메일 본문 글꼴 · 문단 사이 없음 · 여러 칸 띄어쓰기는 그대로(보내는 본문이 nbsp 로 바꾼다) */
 .vacation-preview__body {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -120,6 +204,28 @@ const shownSubject = computed(() => props.subject.trim() || MAIL_NO_SUBJECT)
   color: var(--color-text-body);
 }
 
+.vacation-preview__body :deep(p) {
+  margin: 0;
+}
+
+.vacation-preview__body :deep(a) {
+  color: var(--color-brand);
+}
+
+/* 보내지 않기의 회사 밖 쪽 — 답장 자리에 회색 상자 (최소 높이 120) */
+.vacation-preview__none {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 7.5rem;
+  padding: var(--space-20);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-panel);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
 .vacation-preview__note {
   margin: 0;
   font-size: var(--font-size-label);
diff --git a/frontend/src/components/shell/AppShell.spec.ts b/frontend/src/components/shell/AppShell.spec.ts
index fc8f2a5..5608ae3 100644
--- a/frontend/src/components/shell/AppShell.spec.ts
+++ b/frontend/src/components/shell/AppShell.spec.ts
@@ -5,7 +5,8 @@ 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 type { SignatureImage } from '@/shared/types/mail'
+import type { MailSignature } from '@/shared/types/mail-signature'
 import { useAuthStore } from '@/stores/auth.store'
 import { useToastStore } from '@/stores/toast.store'
 import { dragEvent, fakeDataTransfer } from '@/test-utils/drag'
@@ -21,10 +22,10 @@ const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
 const EDITOR_LOAD_TIMEOUT_MS = 15_000
 
 const SIGNATURE: MailSignature = {
+  id: 'sig-1',
+  name: '기본 서명',
   bodyHtml: '<div style="font-size: 14px"><p style="margin: 0">김아라 · 인프라팀</p></div>',
   body: '김아라 · 인프라팀',
-  isForNew: true,
-  isForReply: true,
   images: [],
   updatedAt: '2026-10-27T05:00:00Z',
 }
@@ -44,7 +45,11 @@ const UPLOADED: SignatureImage = {
 const PasswordScreen = defineComponent({ name: 'PasswordScreen', render: () => h('h1', '비밀번호') })
 
 const server: MockHandler = ({ method, url }) => {
-  if (method === 'GET' && url === '/mail-signature') return ok(SIGNATURE)
+  // 서명 설정 (16단계 — 여러 서명): 목록 · 기본 둘
+  if (method === 'GET' && url === '/mail-signatures') {
+    return ok({ items: [SIGNATURE], pageInfo: { hasNext: false, nextCursor: null, total: 1 } })
+  }
+  if (method === 'GET' && url === '/mail-signature-defaults') return ok({ newMessageId: SIGNATURE.id, replyId: SIGNATURE.id })
   if (method === 'POST' && url === '/mail-signature/images') return ok(UPLOADED, 201)
   return ok(null)
 }
@@ -55,7 +60,7 @@ describe('AppShell — 잘못 놓은 파일 (15단계)', () => {
 
   beforeAll(installProseMirrorDom)
   beforeAll(async () => {
-    await import('@/components/mail/editor/signature/SignatureForm.vue')
+    await import('@/components/mail/editor/signature/SignatureSettings.vue')
   }, EDITOR_LOAD_TIMEOUT_MS)
 
   beforeEach(() => {
diff --git a/frontend/src/composables/useAccountSecurity.ts b/frontend/src/composables/useAccountSecurity.ts
index 59db9f9..70e0b97 100644
--- a/frontend/src/composables/useAccountSecurity.ts
+++ b/frontend/src/composables/useAccountSecurity.ts
@@ -12,7 +12,10 @@ import type {
   TwoFactorActivationPayload,
   TwoFactorDeactivationPayload,
   TwoFactorEnrollment,
+  TwoFactorReplacementPayload,
   TwoFactorStatus,
+  TwoFactorVerification,
+  TwoFactorVerificationPayload,
 } from '@/shared/types/account-security'
 import type { PaginatedResult } from '@/shared/types/pagination'
 
@@ -35,13 +38,44 @@ export function useAccountSecurity() {
   }
 
   /**
-   * 등록 시작 (꺼져 있을 때만) — 새 키 · otpauth 주소 · 이때까지 켜야 하는 시각(10분).
-   * 직원마다 기다리는 등록은 하나다 — 새로 시작하면 앞의 것은 버린다. 이미 켜져 있으면 409 AUTH_008
+   * 등록 시작 — 새 키 · otpauth 주소 · 이때까지 켜거나 바꿔야 하는 시각(10분). 꺼져 있으면 켜기용, 켜져 있으면 휴대폰 바꾸기용이다(16단계).
+   * 직원마다 기다리는 등록은 하나다 — 새로 시작하면 앞의 것은 버린다
    */
   function startTwoFactorEnrollment(options?: AccountSecurityRequestOptions): Promise<TwoFactorEnrollment> {
     return api.post<TwoFactorEnrollment, TwoFactorEnrollment>('/two-factor/enrollments', null, options)
   }
 
+  /**
+   * 휴대폰 바꾸기 ① (16단계) — 새 휴대폰의 코드를 그 등록의 키로 먼저 확인한다(엔진은 등록 때 코드를 보지 않는다). 맞으면 서버가 등록에 "확인됨"을 둔다.
+   * 코드 틀림 · 다시 쓴 코드 400 AUTH_006 · 등록이 없음 · 10분 지남 · 더 새 등록 409 AUTH_008
+   */
+  function verifyTwoFactorEnrollment(
+    enrollmentId: string,
+    payload: TwoFactorVerificationPayload,
+    options?: AccountSecurityRequestOptions,
+  ): Promise<TwoFactorVerification> {
+    return api.post<TwoFactorVerification, TwoFactorVerification>(
+      `/two-factor/enrollments/${segment(enrollmentId)}/verification`,
+      payload,
+      options,
+    )
+  }
+
+  /**
+   * 휴대폰 바꾸기 ② (16단계) — 지금 비밀번호를 먼저 보고(AUTH_005) 지금 휴대폰의 코드로(AUTH_006) 새 키로 바꾼다. 2단계 인증이 꺼지는 틈이 없다.
+   * 등록이 확인되지 않음 · 10분 지남 · 그사이 꺼짐 409 AUTH_008. 결과를 모르면 503 MAIL_001 — 다시 읽어도 가를 수 없다.
+   * 서버가 엔진을 여러 번 부르므로 한도를 길게 둔다. 응답은 GET 과 같은 모양(켠 때는 그대로)
+   */
+  function replaceTwoFactor(
+    payload: TwoFactorReplacementPayload,
+    options?: AccountSecurityRequestOptions,
+  ): Promise<TwoFactorStatus> {
+    return api.post<TwoFactorStatus, TwoFactorStatus>('/two-factor/replacements', payload, {
+      timeout: TWO_FACTOR_CHANGE_TIMEOUT_MS,
+      ...options,
+    })
+  }
+
   /**
    * 켜기 — 코드를 등록의 키로 먼저 확인한 뒤 엔진에 쓴다. 코드 틀림 400 AUTH_006 · 지금 비밀번호 틀림 400 AUTH_005 ·
    * 등록이 없음 · 10분 지남 · 그사이 바뀜 409 AUTH_008. 서버가 엔진을 여러 번 부르므로 한도를 길게 둔다
@@ -116,6 +150,8 @@ export function useAccountSecurity() {
   return {
     getTwoFactor,
     startTwoFactorEnrollment,
+    verifyTwoFactorEnrollment,
+    replaceTwoFactor,
     activateTwoFactor,
     deactivateTwoFactor,
     listAppPasswords,
diff --git a/frontend/src/composables/useContactImport.ts b/frontend/src/composables/useContactImport.ts
new file mode 100644
index 0000000..aa2de32
--- /dev/null
+++ b/frontend/src/composables/useContactImport.ts
@@ -0,0 +1,430 @@
+import { notifyApiError, toApiError, type ApiError } from './useApi'
+import { useContacts } from './useContacts'
+import { useToast } from './useToast'
+import {
+  CONTACT_IMPORT_BATCH_MAX_BYTES,
+  CONTACT_IMPORT_BATCH_MAX_VALUES,
+  CONTACT_IMPORT_BATCH_SIZE,
+  CONTACT_IMPORT_TOAST_TEXT,
+  CONTACT_IMPORT_UNDO_BATCH_SIZE,
+} from '@/shared/constants/contacts'
+import type { ContactImportChecked, ContactImportCheckStatus, ContactImported, ContactImportItem } from '@/shared/types/contacts'
+import { envelopeOf, requestBatchSize, type RequestBatchLimits } from '@/shared/utils/contact-import/batches'
+import { readContactFile } from '@/shared/utils/contact-import/read-file'
+import {
+  checkItemOf,
+  contactGroupKey,
+  prepareImport,
+  previewOf,
+  type ContactImportPlan,
+  type ContactImportPlanEntry,
+  type ImportPreview,
+} from '@/shared/utils/contact-import/records'
+import type { ContactFileProblem, ContactFileReadResult, ImportedFileKind } from '@/shared/utils/contact-import/types'
+import { formatCount } from '@/shared/utils/format'
+import { createUuid } from '@/shared/utils/uuid'
+import { useAuthStore } from '@/stores/auth.store'
+import { useContactImportStore } from '@/stores/contact-import.store'
+import { useContactsStore } from '@/stores/contacts.store'
+import type { ToastAction } from '@/stores/toast.store'
+
+// 주소록 가져오기 — 파일 읽기 · 미리 보기 확인 · 넣기 · [되돌리기] (16단계 — 디자인 원본 Contacts16 "2" ~ "4" · 계약 3절 "가져오기")
+// 읽기(read): 파일은 이 브라우저에서 읽고(shared/utils/contact-import), 넣을 수 있는 연락처만 묶음(아래)으로 서버에 이미 있는지 묻는다
+//   (POST /contact-import-checks — 만들지 않는다). 남은 자리(remaining)를 다 채우면 더 묻지 않는다 — 넘는 연락처는 어차피 넣지 않는다
+//   (요청 수 한도 — 경로 · IP 마다 1분 100회 — 를 아끼려고. 그 연락처 가운데 이미 있는 것은 미리 보기의 수에 "넣을 연락처"로 세진다).
+//   실패는 인터셉터가 사전 문구로 알린다 — 창은 파일 고르기로 돌아간다
+// 넣기(start): 창을 닫고 진행 알림 "연락처를 넣는 중 · 120 / 330명" — 새 그룹을 먼저 만들고(같은 이름이 생겼으면 그 그룹, 100개면 그 그룹 없이.
+//   만들기 응답만 잃은 뒤 [다시 시도]에서 같은 이름이 돌아오면 그 그룹도 이번에 만든 것으로 센다)
+//   묶음마다 POST /contact-imports. 끝나면 같은 자리에서 결과 "연락처 330명을 넣었습니다. …" + [되돌리기] + ✕(✕로 닫을 때까지 남는다).
+//   멈추면 오류 알림 + [다시 시도](남은 것부터 — 같은 uid 라 두 번 들어가지 않는다, 이 알림도 ✕까지 남는다). 멈춘 알림에는 [되돌리기]가 없다.
+//   - 409 CONTACT_002: 그사이 주소록이 찼다 — 남은 자리를 다시 물어 그만큼만 넣고 나머지는 "넣지 못함"(크기 한도면 멈춘다)
+//   - 404 RES_001: 넣을 그룹이 그사이 지워졌다 — 그룹을 다시 받아 없는 그룹은 빼고 한 번 더
+// [되돌리기]: "가져온 연락처를 지우는 중 · 100 / 330명" — 이번에 넣은 연락처를 묶음마다 지우고(POST /contact-deletions) 이번에 새로 만든 그룹을 지운다
+// 확인 · 넣기 · 되돌리기 묶음은 100명 · JSON 값 8,000개 · 700KB 가운데 먼저 닿는 데서 끊는다(batches.ts — 서버 본문 한도 값 10,000 · 1MB 를 넘지 않게,
+//   칸을 한도까지 채운 연락처가 몰리면 100명보다 적게 보낸다)
+// 넣기 · 되돌리기 · [다시 시도]는 이 탭에서 하나씩 돈다(contact-import.store 의 enqueue — 도는 동안 누른 것은 끝난 뒤에, 그사이 세션이 바뀌었으면 하지 않는다).
+// 다른 화면으로 가도 이어 한다. 세션이 바뀌면(로그아웃 · 만료 · 다른 계정) 다음 요청을 보내지 않고 알림을 닫는다(진행 · 단추 알림은 toast.store 가 닫는다).
+// 끝나거나 멈추면 연락처 수 · 그룹 · 보는 목록을 다시 받는다 (contacts.store 의 afterBulkChange)
+
+/** 파일을 읽은 결과 — ready 면 미리 보기, failed 면 칸 아래 글의 까닭, error 면 서버 확인이 실패(알림은 인터셉터가 띄웠다) */
+export type ContactImportReadOutcome =
+  | { status: 'ready'; preview: ImportPreview }
+  | { status: 'failed'; problem: ContactFileProblem; kind: ImportedFileKind | null }
+  | { status: 'error' }
+  | { status: 'canceled' }
+
+/** 넣는 일의 자리 — [다시 시도]가 이어 간다 */
+interface ImportRun {
+  plan: ContactImportPlan
+  /** 그룹 열쇠 → id (null 이면 만들지 못함 — 그 그룹 없이 넣는다) */
+  groupIds: Map<string, string | null>
+  /** 이번에 새로 만든 그룹 — [되돌리기]가 지운다 */
+  createdGroupIds: string[]
+  /**
+   * 만들기를 보냈지만 결과를 모르는 그룹(열쇠 — 응답 없음 · 5xx). 서버에서는 만들어졌을 수 있다 —
+   * [다시 시도]에서 같은 이름(CONTACT_001)이 돌아오면 이번에 만든 그룹으로 센다(되돌리면 지운다)
+   */
+  unsureGroupKeys: Set<string>
+  /** 다음에 보낼 자리 · 끝(한도에 걸리면 줄어든다) */
+  next: number
+  end: number
+  insertedIds: string[]
+  /** 메일 서버가 받지 않은 연락처 수 */
+  missed: number
+  /** 그룹에 넣지 못한 연락처(uid) — 그룹 100개 · 구성원 500명 */
+  groupLess: Set<string>
+  overLimit: number
+}
+
+interface UndoRun {
+  ids: string[]
+  groupIds: string[]
+  next: number
+  groupNext: number
+  groupsDeleted: number
+}
+
+type RunOutcome = 'done' | 'failed' | 'canceled'
+
+/** 확인 · 넣기 묶음 — 100명 · 값 8,000개 · 700KB 가운데 먼저 닿는 데서 (batches.ts) */
+const IMPORT_BATCH_LIMITS: RequestBatchLimits = {
+  maxItems: CONTACT_IMPORT_BATCH_SIZE,
+  maxValues: CONTACT_IMPORT_BATCH_MAX_VALUES,
+  maxBytes: CONTACT_IMPORT_BATCH_MAX_BYTES,
+}
+/** 되돌리기 묶음 — 100명 · 값 · 바이트 (id 뿐이라 보통 사람 수에서 끊긴다) */
+const UNDO_BATCH_LIMITS: RequestBatchLimits = { ...IMPORT_BATCH_LIMITS, maxItems: CONTACT_IMPORT_UNDO_BATCH_SIZE }
+/** 본문의 겉 — `{"contacts":[…]}` · `{"ids":[…]}` */
+const CONTACTS_ENVELOPE = envelopeOf('contacts')
+const IDS_ENVELOPE = envelopeOf('ids')
+
+/** 서버가 받았는지 모르는 실패 — 응답이 없거나(시간 초과 · 연결 끊김) 5xx. 4xx 는 서버가 거절한 것이다 */
+function outcomeUnknown(error: ApiError): boolean {
+  return error.status === undefined || error.status >= 500
+}
+
+/** 화면이 만드는 uid — urn:uuid: + 소문자 UUID (계약 3절) */
+export function newContactUid(): string {
+  return `urn:uuid:${createUuid().toLowerCase()}`
+}
+
+export function useContactImport() {
+  const contactsApi = useContacts()
+  const contactsStore = useContactsStore()
+  const importStore = useContactImportStore()
+  const authStore = useAuthStore()
+  const toast = useToast()
+
+  // ── 읽기 ─────────────────────────────────────────
+
+  /** 파일을 읽고 이미 있는 연락처를 서버에 묻는다 — signal 을 끊으면(창을 닫음 · 다른 파일) canceled */
+  async function read(file: File, signal: AbortSignal): Promise<ContactImportReadOutcome> {
+    let result: ContactFileReadResult
+    try {
+      result = await readContactFile(file)
+    } catch {
+      // 읽다가 뜻밖에 멈췄다(깨진 파일 등) — 창이 "읽는 중"에 머물지 않게 열지 못한 파일로 알린다
+      result = { ok: false, problem: 'unreadable', kind: null }
+    }
+    if (signal.aborted) return { status: 'canceled' }
+    if (!result.ok) return { status: 'failed', problem: result.problem, kind: result.kind }
+    const prepared = prepareImport(result.kind, result.records, newContactUid)
+    const items = prepared.candidates.map(checkItemOf)
+    const statuses = new Map<string, ContactImportCheckStatus>()
+    let remaining: number | null = null
+    let fresh = 0
+    for (let start = 0; start < items.length; ) {
+      if (remaining !== null && fresh >= remaining) break
+      const window = items.slice(start, start + CONTACT_IMPORT_BATCH_SIZE)
+      const batch = window.slice(0, requestBatchSize(window, IMPORT_BATCH_LIMITS, CONTACTS_ENVELOPE))
+      start += batch.length
+      let checked: ContactImportChecked
+      try {
+        checked = await contactsApi.checkContactImport(batch, { signal })
+      } catch (caught) {
+        return signal.aborted || toApiError(caught).canceled ? { status: 'canceled' } : { status: 'error' }
+      }
+      if (signal.aborted) return { status: 'canceled' }
+      remaining = checked.remaining
+      for (const item of checked.items) {
+        statuses.set(item.uid, item.status)
+        if (item.status === 'new') fresh += 1
+      }
+    }
+    return { status: 'ready', preview: previewOf(prepared, statuses, remaining) }
+  }
+
+  // ── 넣기 ─────────────────────────────────────────
+
+  function count(value: number): string {
+    return formatCount(value)
+  }
+
+  function progressText(run: ImportRun): string {
+    return CONTACT_IMPORT_TOAST_TEXT.progress(count(run.insertedIds.length), count(run.end))
+  }
+
+  /** 끝 알림 — 넣은 수 + 건너뛴 수 · 한도에 걸린 수를 한 문장씩 */
+  function resultText(run: ImportRun): string {
+    const parts: string[] = [CONTACT_IMPORT_TOAST_TEXT.done(count(run.insertedIds.length))]
+    if (run.plan.skipped > 0) parts.push(CONTACT_IMPORT_TOAST_TEXT.skipped(count(run.plan.skipped)))
+    if (run.overLimit > 0) parts.push(CONTACT_IMPORT_TOAST_TEXT.full(count(run.overLimit)))
+    if (run.groupLess.size > 0) parts.push(CONTACT_IMPORT_TOAST_TEXT.groupLimit(count(run.groupLess.size)))
+    if (run.missed > 0) parts.push(CONTACT_IMPORT_TOAST_TEXT.missed(count(run.missed)))
+    return parts.join(' ')
+  }
+
+  /** 그룹 열쇠들 → 이번 줄의 groupIds (만들지 못한 그룹은 뺀다) */
+  function itemOf(entry: ContactImportPlanEntry, run: ImportRun): ContactImportItem {
+    const ids = entry.groupKeys
+      .map((key) => run.groupIds.get(key) ?? null)
+      .filter((id): id is string => id !== null)
+    return { ...entry.item, groupIds: [...new Set(ids)] }
+  }
+
+  /** 같은 이름의 그룹이 그사이 생겼다 — 그룹을 다시 받아 그 그룹의 id (없으면 null) */
+  async function existingGroupId(key: string): Promise<string | null> {
+    await contactsStore.loadGroups()
+    return contactsStore.groups.find((group) => contactGroupKey(group.name) === key)?.id ?? null
+  }
+
+  /**
+   * 새 그룹을 만든다(이미 만든 것은 건너뛴다 — [다시 시도]). 다 됐으면 null, 멈춰야 하면 그 결과
+   * (같은 이름 CONTACT_001 은 그 그룹, 100개 CONTACT_002 는 그 그룹 없이 — 둘은 알리지 않는다. 그 밖의 실패는 인터셉터가 알렸다)
+   */
+  async function resolveGroups(run: ImportRun, alive: () => boolean): Promise<RunOutcome | null> {
+    for (const group of run.plan.groups) {
+      if (run.groupIds.has(group.key)) continue
+      if (group.id !== null) {
+        run.groupIds.set(group.key, group.id)
+        continue
+      }
+      try {
+        const created = await contactsApi.createContactGroup(
+          { name: group.name },
+          { silent: ['CONTACT_001', 'CONTACT_002'] },
+        )
+        if (!alive()) return 'canceled'
+        run.groupIds.set(group.key, created.id)
+        run.createdGroupIds.push(created.id)
+      } catch (caught) {
+        if (!alive()) return 'canceled'
+        const error = toApiError(caught)
+        if (error.code === 'CONTACT_001') {
+          const id = await existingGroupId(group.key)
+          run.groupIds.set(group.key, id)
+          // 앞선 만들기의 응답만 잃었다 — 그 그룹은 이번에 만든 것이다(되돌리면 지운다)
+          if (id !== null && run.unsureGroupKeys.has(group.key) && !run.createdGroupIds.includes(id)) {
+            run.createdGroupIds.push(id)
+          }
+        } else if (error.code === 'CONTACT_002') {
+          run.groupIds.set(group.key, null)
+        } else {
+          if (outcomeUnknown(error)) run.unsureGroupKeys.add(group.key)
+          return 'failed'
+        }
+        if (!alive()) return 'canceled'
+      }
+    }
+    return null
+  }
+
+  /** 남은 자리 — 409 CONTACT_002 뒤에 다시 묻는다. 모르면 null */
+  async function roomFor(items: readonly ContactImportItem[]): Promise<number | null> {
+    try {
+      const checked = await contactsApi.checkContactImport(items, { silent: true })
+      return Math.max(0, checked.remaining)
+    } catch {
+      return null
+    }
+  }
+
+  /** 그룹이 그사이 지워졌다 — 그룹을 다시 받아 없는 그룹은 뺀다 */
+  async function forgetRemovedGroups(run: ImportRun): Promise<void> {
+    await contactsStore.loadGroups()
+    const present = new Set(contactsStore.groups.map((group) => group.id))
+    for (const [key, id] of run.groupIds) {
+      if (id !== null && !present.has(id)) run.groupIds.set(key, null)
+    }
+  }
+
+  function noteResult(run: ImportRun, slice: readonly ContactImportPlanEntry[], result: ContactImported) {
+    const byUid = new Map(result.items.map((item) => [item.uid, item]))
+    for (const entry of slice) {
+      const created = byUid.get(entry.item.uid)
+      if (!created) {
+        run.missed += 1
+        continue
+      }
+      run.insertedIds.push(created.id)
+      const groupLess = entry.groupKeys.some((key) => (run.groupIds.get(key) ?? null) === null)
+      if (groupLess || created.skippedGroupIds.length > 0) run.groupLess.add(entry.item.uid)
+    }
+  }
+
+  async function runImport(run: ImportRun, alive: () => boolean, onProgress: () => void): Promise<RunOutcome> {
+    const grouped = await resolveGroups(run, alive)
+    if (grouped !== null) return grouped
+    let retriedGroups = false
+    while (run.next < run.end) {
+      const window = run.plan.entries.slice(run.next, Math.min(run.end, run.next + CONTACT_IMPORT_BATCH_SIZE))
+      const windowItems = window.map((entry) => itemOf(entry, run))
+      const size = requestBatchSize(windowItems, IMPORT_BATCH_LIMITS, CONTACTS_ENVELOPE)
+      const slice = window.slice(0, size)
+      const items = windowItems.slice(0, size)
+      let result: ContactImported
+      try {
+        result = await contactsApi.importContacts(items, { silent: ['CONTACT_002', 'RES_001'] })
+      } catch (caught) {
+        if (!alive()) return 'canceled'
+        const error = toApiError(caught)
+        if (error.code === 'CONTACT_002') {
+          const room = await roomFor(items)
+          if (!alive()) return 'canceled'
+          if (room !== null && room < items.length) {
+            const end = run.next + room
+            run.overLimit += run.end - end
+            run.end = end
+            continue
+          }
+        } else if (error.code === 'RES_001' && !retriedGroups) {
+          retriedGroups = true
+          await forgetRemovedGroups(run)
+          if (!alive()) return 'canceled'
+          continue
+        }
+        if (error.code === 'CONTACT_002' || error.code === 'RES_001') notifyApiError(error)
+        return 'failed'
+      }
+      if (!alive()) return 'canceled'
+      retriedGroups = false
+      noteResult(run, slice, result)
+      run.next += slice.length
+      onProgress()
+    }
+    return 'done'
+  }
+
+  function undoAction(run: ImportRun): ToastAction | undefined {
+    if (run.insertedIds.length === 0 && run.createdGroupIds.length === 0) return undefined
+    const undo: UndoRun = {
+      ids: [...run.insertedIds],
+      groupIds: [...run.createdGroupIds],
+      next: 0,
+      groupNext: 0,
+      groupsDeleted: 0,
+    }
+    return {
+      label: CONTACT_IMPORT_TOAST_TEXT.undo,
+      run: () => void importStore.enqueue('undo', () => executeUndo(undo)),
+    }
+  }
+
+  /** 넣는다 — 차례(contact-import.store 의 enqueue) 안에서 부른다 */
+  async function execute(run: ImportRun): Promise<void> {
+    const session = authStore.generation
+    const alive = () => authStore.generation === session
+    const progress = toast.progress(progressText(run))
+    const outcome = await runImport(run, alive, () => progress.update(progressText(run)))
+    if (outcome === 'canceled' || !alive()) {
+      progress.dismiss()
+      return
+    }
+    contactsStore.afterBulkChange()
+    if (outcome === 'done') {
+      progress.succeed(resultText(run), undoAction(run), { sticky: true })
+      return
+    }
+    const retry: ToastAction = {
+      label: CONTACT_IMPORT_TOAST_TEXT.retry,
+      run: () => void importStore.enqueue('import', () => execute(run)),
+    }
+    const stopped =
+      run.insertedIds.length > 0
+        ? CONTACT_IMPORT_TOAST_TEXT.stopped(count(run.end), count(run.insertedIds.length))
+        : CONTACT_IMPORT_TOAST_TEXT.notStarted
+    progress.fail(stopped, retry, { sticky: true })
+  }
+
+  /**
+   * [연락처 N명 넣기] — 창이 만든 계획대로 넣는다(창은 이미 닫혔다). 이 탭에서 가져오기 · 되돌리기가 도는 중이면 끝난 뒤에 한다
+   * ([가져오기]가 그동안 열리지 않으니 보통은 바로 시작한다)
+   */
+  function start(plan: ContactImportPlan): Promise<void> {
+    const run: ImportRun = {
+      plan,
+      groupIds: new Map(),
+      createdGroupIds: [],
+      unsureGroupKeys: new Set(),
+      next: 0,
+      end: plan.entries.length,
+      insertedIds: [],
+      missed: 0,
+      groupLess: new Set(),
+      overLimit: plan.overLimit,
+    }
+    return importStore.enqueue('import', () => execute(run))
+  }
+
+  // ── 되돌리기 ────────────────────────────────────────
+
+  async function runUndo(undo: UndoRun, alive: () => boolean, onProgress: () => void): Promise<RunOutcome> {
+    while (undo.next < undo.ids.length) {
+      const window = undo.ids.slice(undo.next, undo.next + CONTACT_IMPORT_UNDO_BATCH_SIZE)
+      const batch = window.slice(0, requestBatchSize(window, UNDO_BATCH_LIMITS, IDS_ENVELOPE))
+      try {
+        await contactsApi.deleteContacts(batch)
+      } catch {
+        return alive() ? 'failed' : 'canceled'
+      }
+      if (!alive()) return 'canceled'
+      undo.next += batch.length
+      onProgress()
+    }
+    while (undo.groupNext < undo.groupIds.length) {
+      const id = undo.groupIds[undo.groupNext] ?? ''
+      try {
+        await contactsApi.deleteContactGroup(id, { silent: ['RES_001'] })
+        undo.groupsDeleted += 1
+      } catch (caught) {
+        if (!alive()) return 'canceled'
+        // 그사이 다른 곳에서 지운 그룹은 지운 것으로 본다(세지는 않는다)
+        if (toApiError(caught).code !== 'RES_001') return 'failed'
+      }
+      if (!alive()) return 'canceled'
+      undo.groupNext += 1
+    }
+    return 'done'
+  }
+
+  /** 되돌린다 — 차례(contact-import.store 의 enqueue) 안에서 부른다 */
+  async function executeUndo(undo: UndoRun): Promise<void> {
+    const session = authStore.generation
+    const alive = () => authStore.generation === session
+    const total = count(undo.ids.length)
+    const progress = toast.progress(CONTACT_IMPORT_TOAST_TEXT.undoProgress(count(undo.next), total))
+    const outcome = await runUndo(undo, alive, () =>
+      progress.update(CONTACT_IMPORT_TOAST_TEXT.undoProgress(count(undo.next), total)),
+    )
+    if (outcome === 'canceled' || !alive()) {
+      progress.dismiss()
+      return
+    }
+    contactsStore.afterBulkChange(undo.ids.slice(0, undo.next))
+    if (outcome === 'done') {
+      progress.succeed(
+        undo.groupsDeleted > 0
+          ? CONTACT_IMPORT_TOAST_TEXT.undoneWithGroups(total, count(undo.groupsDeleted))
+          : CONTACT_IMPORT_TOAST_TEXT.undone(total),
+      )
+      return
+    }
+    const retry: ToastAction = {
+      label: CONTACT_IMPORT_TOAST_TEXT.retry,
+      run: () => void importStore.enqueue('undo', () => executeUndo(undo)),
+    }
+    progress.fail(CONTACT_IMPORT_TOAST_TEXT.undoStopped(total, count(undo.next)), retry, { sticky: true })
+  }
+
+  return { read, start }
+}
diff --git a/frontend/src/composables/useContacts.ts b/frontend/src/composables/useContacts.ts
index cd3016c..f972250 100644
--- a/frontend/src/composables/useContacts.ts
+++ b/frontend/src/composables/useContacts.ts
@@ -1,10 +1,14 @@
 import type { AxiosRequestConfig } from 'axios'
 
-import { useApi } from './useApi'
+import { buildApiUrl, confirmSession, useApi } from './useApi'
+import { startBrowserDownload } from './useMail'
 import { CONTACT_GROUP_MEMBER_PAGES_MAX, CONTACTS_PAGE_SIZE } from '@/shared/constants/contacts'
 import type {
   Contact,
   ContactDeleted,
+  ContactDeletions,
+  ContactDeletionsPayload,
+  ContactExportQuery,
   ContactGroup,
   ContactGroupCreatePayload,
   ContactGroupDeleted,
@@ -12,6 +16,10 @@ import type {
   ContactGroupMembersAdded,
   ContactGroupMembersPayload,
   ContactGroupRenamePayload,
+  ContactImportChecked,
+  ContactImported,
+  ContactImportItem,
+  ContactImportPayload,
   ContactInput,
   ContactListQuery,
   ContactPatch,
@@ -21,6 +29,15 @@ import type {
 } from '@/shared/types/contacts'
 import type { PaginatedResult } from '@/shared/types/pagination'
 
+const CONTACT_EXPORTS_PATH = '/contact-exports'
+
+/** 내보내기 파일 주소 — axios baseURL 과 같은 규칙으로 만들어야 쿠키(Path=/api)가 함께 간다 */
+export function contactExportUrl(query: ContactExportQuery): string {
+  const params = new URLSearchParams({ format: query.format })
+  if (query.groupId) params.set('groupId', query.groupId)
+  return `${buildApiUrl(CONTACT_EXPORTS_PATH)}?${params.toString()}`
+}
+
 /** 호출부가 정할 수 있는 요청 옵션 — 화면이 오류를 직접 그릴 때 silent, 취소가 필요하면 signal */
 export type ContactsRequestOptions = Pick<AxiosRequestConfig, 'silent' | 'signal'>
 
@@ -141,6 +158,47 @@ export function useContacts() {
     return members
   }
 
+  // ── 가져오기 · 내보내기 (16단계 — 계약 3절 "가져오기 · 내보내기") ─────────────
+
+  /**
+   * 가져올 연락처가 이미 있는가 — 만들지 않는다. 1~100명. remaining 은 더 둘 수 있는 연락처 수(3,000 − 지금 수).
+   * 같은 파일 안의 겹침은 화면이 본다(같은 규칙)
+   */
+  function checkContactImport(
+    contacts: readonly ContactImportItem[],
+    options?: ContactsRequestOptions,
+  ): Promise<ContactImportChecked> {
+    const payload: ContactImportPayload = { contacts: [...contacts] }
+    return api.post<ContactImportChecked, ContactImportChecked>('/contact-import-checks', payload, options)
+  }
+
+  /**
+   * 가져온 연락처를 만든다 — 1~100명, 엔진 요청 한 번. 같은 uid 를 다시 보내면 두 번 만들지 않는다.
+   * 한도(연락처 3,000 · 크기)를 넘는 묶음은 409 CONTACT_002(하나도 만들지 않음), 없는 그룹은 404 RES_001, 검사에 걸리면 400 VAL_001.
+   * 엔진이 일부만 받으면 받은 것만 온다
+   */
+  function importContacts(contacts: readonly ContactImportItem[], options?: ContactsRequestOptions): Promise<ContactImported> {
+    const payload: ContactImportPayload = { contacts: [...contacts] }
+    return api.post<ContactImported, ContactImported>('/contact-imports', payload, options)
+  }
+
+  /** 여러 연락처를 지운다 — 1~500개(겹치지 않게). 되돌리기 표는 남기지 않는다 (가져오기의 [되돌리기]) */
+  function deleteContacts(ids: readonly string[], options?: ContactsRequestOptions): Promise<ContactDeletions> {
+    const payload: ContactDeletionsPayload = { ids: [...ids] }
+    return api.post<ContactDeletions, ContactDeletions>('/contact-deletions', payload, options)
+  }
+
+  /**
+   * 내 주소록(또는 그룹 하나)을 파일로 내려받는다 — 첨부처럼 이동하기 전에 세션을 확인한다 (confirmSession).
+   * <a href> 이동은 axios 의 401 갱신 규칙을 타지 않아, 액세스 토큰이 만료된 채 이동하면 오류 JSON 이 파일로 받아진다.
+   * @returns 내려받기를 시작했으면 true. false 면 안내(세션 만료 대화상자 · 알림)는 이미 끝났다
+   */
+  async function downloadContactExport(query: ContactExportQuery): Promise<boolean> {
+    if (!(await confirmSession())) return false
+    startBrowserDownload(contactExportUrl(query))
+    return true
+  }
+
   return {
     listContacts,
     getContact,
@@ -156,5 +214,9 @@ export function useContacts() {
     listDirectoryEntries,
     getDirectoryEntry,
     listGroupMembers,
+    checkContactImport,
+    importContacts,
+    deleteContacts,
+    downloadContactExport,
   }
 }
diff --git a/frontend/src/composables/useContactsDialogs.ts b/frontend/src/composables/useContactsDialogs.ts
index 293b168..fb68297 100644
--- a/frontend/src/composables/useContactsDialogs.ts
+++ b/frontend/src/composables/useContactsDialogs.ts
@@ -14,6 +14,9 @@ export type ContactsDialogRequest =
   | { kind: 'group-name'; group: ContactGroup | null }
   /** 구성원 넣기 */
   | { kind: 'members'; group: ContactGroup }
+  /** 연락처 가져오기 · 내보내기 (16단계 — 「전체 연락처」 머리 · 빈 주소록) */
+  | { kind: 'import' }
+  | { kind: 'export' }
 
 export interface ContactsDialogsHandle {
   /** 지금 연 창 — 없으면 null (읽기만) */
@@ -21,6 +24,8 @@ export interface ContactsDialogsHandle {
   openContact: (contact: Contact | null, prefill?: ContactPrefill | null) => void
   openGroupName: (group: ContactGroup | null) => void
   openMembers: (group: ContactGroup) => void
+  openImport: () => void
+  openExport: () => void
   close: () => void
 }
 
@@ -39,6 +44,12 @@ export function createContactsDialogs(): ContactsDialogsHandle {
     openMembers: (group) => {
       request.value = { kind: 'members', group }
     },
+    openImport: () => {
+      request.value = { kind: 'import' }
+    },
+    openExport: () => {
+      request.value = { kind: 'export' }
+    },
     close: () => {
       request.value = null
     },
diff --git a/frontend/src/composables/useMail.ts b/frontend/src/composables/useMail.ts
index 5ee4631..7fcdcda 100644
--- a/frontend/src/composables/useMail.ts
+++ b/frontend/src/composables/useMail.ts
@@ -27,7 +27,6 @@ import type {
   MailFilterSet,
   MailFilterSetPayload,
   MailQuota,
-  MailSignature,
   MailState,
   MailVacation,
   MailVacationState,
@@ -48,18 +47,17 @@ import type {
   MessagesPatched,
   RecipientSuggestion,
   RecipientSuggestionQuery,
-  SaveSignaturePayload,
   ScheduledMessageCancel,
   ReleasedSend,
   SearchIndexState,
   SendMessagePayload,
   SentMessage,
-  SignatureImage,
   UpdateMessagePayload,
 } from '@/shared/types/mail'
 import type { CursorPaginationQuery, PaginatedResult } from '@/shared/types/pagination'
 import { conversationPageOf } from '@/shared/utils/mail-conversation'
 import { conversationListPageOf } from '@/shared/utils/mail-conversation-list'
+import { vacationExternalOf } from '@/shared/utils/mail-vacation'
 import { pendingSendOf } from '@/shared/utils/pending-send'
 
 /** 호출부가 정할 수 있는 요청 옵션 — 화면이 오류를 직접 그릴 때 silent, 취소가 필요하면 signal */
@@ -103,15 +101,28 @@ type SentMessageReply = Omit<SentMessage, 'rejectedRecipients' | 'pendingSend'>
  */
 type ScheduledReleaseReply = { id?: unknown; rejectedRecipients?: unknown; pendingSend?: unknown } | null
 
-/** GET · PUT /mail-vacation 이 실제로 주는 모양 — 7단계 앞의 서버는 isActive 가 없다 (vacationStateOf 가 맞춘다) */
-type MailVacationReply = MailVacation & { isActive?: unknown }
+/**
+ * GET · PUT /mail-vacation 이 실제로 주는 모양 — 7단계 앞의 서버는 isActive 가, 16단계 앞의 서버는 htmlBody · external 이 없다
+ * (vacationStateOf 가 맞춘다)
+ */
+type MailVacationReply = Omit<MailVacation, 'htmlBody' | 'external'> & {
+  isActive?: unknown
+  htmlBody?: unknown
+  external?: unknown
+}
 
 /**
  * 부재중 응답 → 화면의 값. isActive 가 없거나 불리언이 아니면(옛 서버 · 응답을 바꾼 게이트웨이) 동작하는 것으로 본다 —
- * "지금은 동작하지 않습니다" 줄을 잘못 띄우지 않게 (계약 2절 "부재중 자동 응답"의 MailVacationState)
+ * "지금은 동작하지 않습니다" 줄을 잘못 띄우지 않게 (계약 2절 "부재중 자동 응답"의 MailVacationState).
+ * 서식 본문 · 회사 밖 응답(16단계)이 없거나 모양이 틀리면 글만 · 사내와 같은 응답으로 — 옛 화면이 저장한 것과 같게 읽는다
  */
 function vacationStateOf(reply: MailVacationReply): MailVacationState {
-  return { ...reply, isActive: typeof reply.isActive === 'boolean' ? reply.isActive : true }
+  return {
+    ...reply,
+    htmlBody: typeof reply.htmlBody === 'string' ? reply.htmlBody : null,
+    external: vacationExternalOf(reply.external),
+    isActive: typeof reply.isActive === 'boolean' ? reply.isActive : true,
+  }
 }
 
 export interface UploadOptions {
@@ -217,7 +228,8 @@ export function useMail() {
 
   /**
    * 전체 교체 — 꺼도 제목 · 내용은 남긴다. 응답은 저장한 값 + isActive (저장하면 엔진에서 다시 켜진다).
-   * 본문은 다섯 칸만 골라 보낸다 — 받은 응답(isActive 가 든 MailVacationState)을 그대로 넘겨도 isActive 가 실리지 않게 (서버가 400 VAL_001)
+   * 본문은 일곱 칸만 골라 보낸다 — 받은 응답(isActive 가 든 MailVacationState)을 그대로 넘겨도 isActive 가 실리지 않게 (서버가 400 VAL_001).
+   * 서식 본문 · 회사 밖 응답(16단계)은 늘 보낸다 — 주지 않았으면 글만 · 사내와 같은 응답 (서버가 새 칸이 없는 옛 요청을 그렇게 저장하는 것과 같다)
    */
   async function saveVacation(payload: MailVacation, options?: MailRequestOptions): Promise<MailVacationState> {
     const body: MailVacation = {
@@ -226,6 +238,9 @@ export function useMail() {
       toDate: payload.toDate,
       subject: payload.subject,
       textBody: payload.textBody,
+      htmlBody: payload.htmlBody ?? null,
+      // 네 칸만 새로 만든다 (모르는 칸이 실리지 않게)
+      external: vacationExternalOf(payload.external),
     }
     return vacationStateOf(await api.put<MailVacationReply, MailVacationReply>('/mail-vacation', body, options))
   }
@@ -409,24 +424,6 @@ export function useMail() {
     })
   }
 
-  // ── 서명 (계약 2절 "서명") ─────────────────────────────
-
-  /** 저장한 적 없으면 기본값(둘 다 넣기 · 빈 서명)이 온다 */
-  function getSignature(options?: MailRequestOptions): Promise<MailSignature> {
-    return api.get<MailSignature, MailSignature>('/mail-signature', options)
-  }
-
-  function saveSignature(payload: SaveSignaturePayload, options?: MailRequestOptions): Promise<MailSignature> {
-    return api.put<MailSignature, MailSignature>('/mail-signature', payload, options)
-  }
-
-  /** 서명 그림 한 장 (multipart `file`) — PNG · JPEG · GIF, 300KB 이하, 한 사람 3장까지 */
-  function uploadSignatureImage(file: File, options?: MailRequestOptions): Promise<SignatureImage> {
-    const form = new FormData()
-    form.append('file', file)
-    return api.post<SignatureImage, SignatureImage>('/mail-signature/images', form, options)
-  }
-
   // ── 받는 사람 추천 (계약 2절 "받는 사람 추천") ──────────────
 
   /**
@@ -600,9 +597,6 @@ export function useMail() {
     getDraft,
     createDraft,
     updateDraft,
-    getSignature,
-    saveSignature,
-    uploadSignatureImage,
     listRecipientSuggestions,
   }
 }
diff --git a/frontend/src/composables/useMailSignatures.ts b/frontend/src/composables/useMailSignatures.ts
new file mode 100644
index 0000000..3cb8b9d
--- /dev/null
+++ b/frontend/src/composables/useMailSignatures.ts
@@ -0,0 +1,133 @@
+import type { AxiosRequestConfig } from 'axios'
+
+import { getErrorMessage, notifyApiError, useApi, type ApiError } from './useApi'
+import type { SignatureImage } from '@/shared/types/mail'
+import type { MailSignature, MailSignatureDefaults, MailSignaturePayload } from '@/shared/types/mail-signature'
+
+/** 호출부가 정할 수 있는 요청 옵션 — 화면이 오류를 직접 그릴 때 silent, 취소가 필요하면 signal */
+export type MailSignatureRequestOptions = Pick<AxiosRequestConfig, 'silent' | 'signal'>
+
+/** 경로에 넣는 값은 늘 인코딩한다 */
+const segment = (value: string) => encodeURIComponent(value)
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function textOrNull(value: unknown): string | null {
+  return typeof value === 'string' ? value : null
+}
+
+/** 서명 하나 — id · 이름이 없으면 null (응답을 바꾼 게이트웨이 등 — 그런 줄은 쓰지 않는다) */
+function signatureOf(value: unknown): MailSignature | null {
+  if (!isRecord(value) || typeof value.id !== 'string' || typeof value.name !== 'string') return null
+  return {
+    id: value.id,
+    name: value.name,
+    bodyHtml: textOrNull(value.bodyHtml),
+    body: textOrNull(value.body),
+    images: Array.isArray(value.images) ? (value.images as SignatureImage[]) : [],
+    updatedAt: textOrNull(value.updatedAt),
+  }
+}
+
+/** 목록 응답 { items, pageInfo } 의 서명 — 모양이 틀린 줄은 뺀다 */
+function signatureListOf(reply: unknown): MailSignature[] {
+  const items = isRecord(reply) && Array.isArray(reply.items) ? reply.items : []
+  return items.flatMap((item: unknown) => {
+    const signature = signatureOf(item)
+    return signature ? [signature] : []
+  })
+}
+
+/** 기본 둘 — 글이 아닌 값은 넣지 않음(null)으로 본다 */
+function defaultsOf(reply: unknown): MailSignatureDefaults {
+  const value = isRecord(reply) ? reply : {}
+  return { newMessageId: textOrNull(value.newMessageId), replyId: textOrNull(value.replyId) }
+}
+
+/**
+ * 만들기 · 고치기 응답 — 모양이 틀리면 보낸 값으로 메운다. 만든 서명의 id 를 모르면 실패로 알린다(SYS_001 — 인터셉터는 성공으로 보고 알리지 않았다).
+ * 그 서명은 서버에 있을 수 있다 — 화면에 다시 들어오면 목록에 보인다
+ */
+function savedSignatureOf(reply: unknown, sent: MailSignaturePayload, id?: string): MailSignature {
+  const signature = signatureOf(reply)
+  if (signature) return signature
+  if (!id) {
+    const error: ApiError = { code: 'SYS_001', message: getErrorMessage('SYS_001') }
+    notifyApiError(error)
+    throw error
+  }
+  return { id, ...sent, images: [], updatedAt: null }
+}
+
+// 여러 서명 API Composable — docs/mail/api-contract.md 2절 "서명" (16단계, 모두 로그인 필요)
+// 인터셉터가 { success, data } 를 언래핑한다. 컴포넌트는 이것을 직접 부르지 않고 스토어(mail-signature.store)를 거친다 —
+// 서명 그림 올리기만 서명 화면(SignatureForm)이 부른다 (올린 그림은 서명을 저장할 때 붙는다)
+export function useMailSignatures() {
+  const api = useApi()
+
+  /** 내 서명 — 만든 차례, 10개까지 (pageInfo.hasNext 는 늘 false) */
+  async function listSignatures(options?: MailSignatureRequestOptions): Promise<MailSignature[]> {
+    return signatureListOf(await api.get<unknown, unknown>('/mail-signatures', options))
+  }
+
+  /**
+   * 새 서명 — 201. 서명이 하나도 없던 직원이면 서버가 기본 둘을 이 서명으로 정한다.
+   * 이름이 비었거나 30자 초과 · 같은 이름 · 11번째 · 본문 한도(서식 10,000 · 글 2,000 · 그림 3장)는 400 VAL_001
+   */
+  async function createSignature(
+    payload: MailSignaturePayload,
+    options?: MailSignatureRequestOptions,
+  ): Promise<MailSignature> {
+    return savedSignatureOf(await api.post<unknown, unknown>('/mail-signatures', payload, options), payload)
+  }
+
+  /** 서명 고치기 — 이름 · 본문 전체를 바꾼다. 없는 서명은 404 RES_001, 검사는 만들기와 같다 */
+  async function updateSignature(
+    id: string,
+    payload: MailSignaturePayload,
+    options?: MailSignatureRequestOptions,
+  ): Promise<MailSignature> {
+    return savedSignatureOf(
+      await api.put<unknown, unknown>(`/mail-signatures/${segment(id)}`, payload, options),
+      payload,
+      id,
+    )
+  }
+
+  /** 서명 지우기 — 204. 이 서명을 기본으로 넣던 곳은 넣지 않음이 되고, 이 서명에만 쓰던 그림은 서버가 지운다 */
+  async function deleteSignature(id: string, options?: MailSignatureRequestOptions): Promise<void> {
+    await api.delete(`/mail-signatures/${segment(id)}`, options)
+  }
+
+  /** 새 메일 · 답장과 전달에 넣을 서명 */
+  async function getDefaults(options?: MailSignatureRequestOptions): Promise<MailSignatureDefaults> {
+    return defaultsOf(await api.get<unknown, unknown>('/mail-signature-defaults', options))
+  }
+
+  /** 기본 둘을 바꾼다 — 둘 다 보낸다. 없는 서명 id 는 404 RES_001 */
+  async function saveDefaults(
+    defaults: MailSignatureDefaults,
+    options?: MailSignatureRequestOptions,
+  ): Promise<MailSignatureDefaults> {
+    return defaultsOf(await api.put<unknown, unknown>('/mail-signature-defaults', defaults, options))
+  }
+
+  /** 서명 그림 한 장 (multipart `file`) — PNG · JPEG · GIF, 300KB 이하. 한 사람이 보관하는 그림은 20장까지(넘으면 400 VAL_001) */
+  function uploadSignatureImage(file: File, options?: MailSignatureRequestOptions): Promise<SignatureImage> {
+    const form = new FormData()
+    form.append('file', file)
+    return api.post<SignatureImage, SignatureImage>('/mail-signature/images', form, options)
+  }
+
+  return {
+    listSignatures,
+    createSignature,
+    updateSignature,
+    deleteSignature,
+    getDefaults,
+    saveDefaults,
+    uploadSignatureImage,
+  }
+}
diff --git a/frontend/src/composables/useToast.ts b/frontend/src/composables/useToast.ts
index ff84274..79a512b 100644
--- a/frontend/src/composables/useToast.ts
+++ b/frontend/src/composables/useToast.ts
@@ -9,9 +9,9 @@ export interface ProgressToast {
   /** 진행 문구를 바꾼다 ("…하는 중 · 600 / 1,234통") */
   update: (message: string) => void
   /** 끝났다 — 성공 알림으로 바꾼다 (그사이 닫혔으면 새로 띄운다). 예: 필터 적용의 [거래처 보기] */
-  succeed: (message: string, action?: ToastAction) => void
+  succeed: (message: string, action?: ToastAction, options?: ToastResultOptions) => void
   /** 도중에 멈췄다 — 오류 알림으로 바꾼다 (그사이 닫혔으면 새로 띄운다). 예: 필터 적용의 [다시 시도] */
-  fail: (message: string, action?: ToastAction) => void
+  fail: (message: string, action?: ToastAction, options?: ToastResultOptions) => void
   /** 알리지 않고 닫는다 */
   dismiss: () => void
 }
@@ -19,6 +19,13 @@ export interface ProgressToast {
 /** 알림 옵션 — expiresAt(ms — Date.now)에 닫는다. 붙잡아도 멈추지 않고 남은 시간 막대가 보인다 (9단계 [보내기 취소]) */
 export interface ToastOptions {
   expiresAt?: number
+  /** ✕로 닫을 때까지 남긴다 (16단계 주소록 가져오기의 결과 — toast.store 머리말) */
+  sticky?: boolean
+}
+
+/** 진행 알림의 결과 옵션 — ✕로 닫을 때까지 남긴다 */
+export interface ToastResultOptions {
+  sticky?: boolean
 }
 
 /**
@@ -49,6 +56,7 @@ export function useToast() {
       message,
       action: action ? sessionBound(action) : undefined,
       expiresAt: options.expiresAt ?? null,
+      sticky: options.sticky === true,
     })
   }
 
@@ -63,6 +71,7 @@ export function useToast() {
       message,
       action: action ? sessionBound(action) : undefined,
       expiresAt: options.expiresAt ?? null,
+      sticky: options.sticky === true,
     })
   }
 
@@ -72,18 +81,21 @@ export function useToast() {
     let id = store.show({ kind: 'progress', message })
     const sameSession = () => authStore.generation === session
 
-    function settle(kind: TimedToastKind, text: string, action?: ToastAction) {
+    function settle(kind: TimedToastKind, text: string, action?: ToastAction, options: ToastResultOptions = {}) {
       if (!sameSession()) return
       const bound = action ? sessionBound(action) : null
-      if (!store.update(id, { kind, message: text, action: bound })) id = store.show({ kind, message: text, action: bound })
+      const sticky = options.sticky === true
+      if (!store.update(id, { kind, message: text, action: bound, sticky })) {
+        id = store.show({ kind, message: text, action: bound, sticky })
+      }
     }
 
     return {
       update: (text) => {
         if (sameSession()) store.update(id, { message: text })
       },
-      succeed: (text, action) => settle('success', text, action),
-      fail: (text, action) => settle('error', text, action),
+      succeed: (text, action, options) => settle('success', text, action, options),
+      fail: (text, action, options) => settle('error', text, action, options),
       dismiss: () => store.dismiss(id),
     }
   }
diff --git a/frontend/src/pages/contacts/ContactsTransfer.spec.ts b/frontend/src/pages/contacts/ContactsTransfer.spec.ts
new file mode 100644
index 0000000..b50346a
--- /dev/null
+++ b/frontend/src/pages/contacts/ContactsTransfer.spec.ts
@@ -0,0 +1,780 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type DOMWrapper, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+import { h, type FunctionalComponent } from 'vue'
+import { createMemoryHistory, createRouter, RouterView, type Router } from 'vue-router'
+
+import ToastHost from '@/components/feedback/ToastHost.vue'
+import { CLOCK } from '@/composables/useClock'
+import { CONTACT_IMPORT_ERROR_TEXT, CONTACT_IMPORT_TEXT, CONTACTS_PANEL_TEXT } from '@/shared/constants/contacts'
+import type { Contact, ContactGroup, ContactImportItem } from '@/shared/types/contacts'
+import type { PaginatedResult } from '@/shared/types/pagination'
+import { formatDate } from '@/shared/utils/format'
+import { useAuthStore } from '@/stores/auth.store'
+import { useContactImportStore } from '@/stores/contact-import.store'
+import { useToastStore } from '@/stores/toast.store'
+import { dragEvent, fakeDataTransfer } from '@/test-utils/drag'
+import { createManualClock } from '@/test-utils/manual-clock'
+import { buildXlsx } from '@/test-utils/zip'
+import {
+  fail,
+  flushPromises,
+  installMockApi,
+  ok,
+  restoreApiAdapter,
+  type MockRequest,
+  type MockResult,
+} from '@/test-utils/mock-api'
+import ContactsLayout from './ContactsLayout.vue'
+import ContactsPage from './ContactsPage.vue'
+
+// 주소록 가져오기 · 내보내기 (16단계 — 디자인 원본 Contacts16 · 계약 3절 "가져오기 · 내보내기")
+// 서버는 흉내다 — 확인(이메일이 주소록에 있으면 exists) · 넣기(uid 마다 하나, 같은 uid 는 다시 만들지 않는다) · 여러 명 지우기 · 그룹
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const Empty: FunctionalComponent = () => h('div')
+Empty.displayName = 'Empty'
+/** 손 시계의 지금 — 2026-11-10 (이 PC 의 날짜 — 내보낼 파일 이름) */
+const NOW = new Date(2026, 10, 10, 9, 30).getTime()
+
+function contact(id: string, name: string, email: string | null, patch: Partial<Contact> = {}): Contact {
+  return {
+    id,
+    name,
+    emails: email ? [{ address: email, label: 'work' }] : [],
+    phones: [],
+    company: null,
+    department: null,
+    title: null,
+    note: null,
+    groupIds: [],
+    ...patch,
+  }
+}
+
+interface ServerState {
+  contacts: Contact[]
+  groups: ContactGroup[]
+  /** GET /contacts?limit=1 의 total — 한도 시험 */
+  total?: number
+  /** 확인이 주는 남은 자리 — 주지 않으면 3,000 − 연락처 수 */
+  remaining?: number
+  /** 넣기 요청마다 — 주면 그 결과를 쓴다(undefined 면 보통대로) */
+  importReply?: (request: MockRequest, index: number) => MockResult | undefined
+  /** 그룹을 만든 뒤 — 주면 그 결과를 쓴다(만들고 응답만 잃은 경우) */
+  groupCreateReply?: (created: ContactGroup) => MockResult | undefined
+}
+
+function pageOf<T>(items: T[], total: number = items.length): PaginatedResult<T> {
+  return { items, pageInfo: { hasNext: false, nextCursor: null, total } }
+}
+
+function groupsOf(state: ServerState): ContactGroup[] {
+  return state.groups.map((group) => ({
+    ...group,
+    memberCount: state.contacts.filter((item) => item.groupIds.includes(group.id)).length,
+  }))
+}
+
+function serve(state: ServerState, request: MockRequest, imports: { count: number }, uids: Map<string, string>): MockResult {
+  const { method, url, params } = request
+  const id = decodeURIComponent(url.split('/')[2] ?? '')
+  if (url === '/auth/me') return ok({ user: USER, restriction: null, twoFactorDeadline: null })
+  if (url === '/contact-groups' && method === 'GET') return ok(pageOf(groupsOf(state)))
+  if (url === '/contact-groups' && method === 'POST') {
+    const body = request.data as { name: string }
+    if (state.groups.some((group) => group.name.toLowerCase() === body.name.toLowerCase())) return fail(409, 'CONTACT_001')
+    const created: ContactGroup = { id: `ng${state.groups.length + 1}`, name: body.name, memberCount: 0 }
+    state.groups.push(created)
+    return state.groupCreateReply?.(created) ?? ok(created, 201)
+  }
+  if (url.startsWith('/contact-groups/') && method === 'DELETE') {
+    const group = state.groups.find((item) => item.id === id)
+    if (!group) return fail(404, 'RES_001')
+    state.groups = state.groups.filter((item) => item.id !== id)
+    return ok({ id, name: group.name, memberIds: [], restoreToken: null })
+  }
+  if (url === '/contact-import-checks') {
+    const items = (request.data as { contacts: ContactImportItem[] }).contacts
+    const known = new Set(state.contacts.flatMap((item) => item.emails.map((email) => email.address.toLowerCase())))
+    return ok({
+      items: items.map((item) => ({
+        uid: item.uid,
+        status: item.emails.some((email) => known.has(email.address.toLowerCase())) ? 'exists' : 'new',
+      })),
+      remaining: state.remaining ?? 3000 - state.contacts.length,
+    })
+  }
+  if (url === '/contact-imports') {
+    imports.count += 1
+    const custom = state.importReply?.(request, imports.count)
+    if (custom) return custom
+    const items = (request.data as { contacts: ContactImportItem[] }).contacts
+    const created = items.map((item) => {
+      const existing = uids.get(item.uid)
+      if (existing) return { uid: item.uid, id: existing, skippedGroupIds: [] }
+      const newId = `c${state.contacts.length + 100}`
+      uids.set(item.uid, newId)
+      state.contacts.push({
+        id: newId,
+        name: item.name,
+        emails: item.emails,
+        phones: item.phones,
+        company: item.company,
+        department: item.department,
+        title: item.title,
+        note: item.note,
+        groupIds: item.groupIds,
+      })
+      return { uid: item.uid, id: newId, skippedGroupIds: [] }
+    })
+    return ok({ items: created }, 201)
+  }
+  if (url === '/contact-deletions') {
+    const ids = (request.data as { ids: string[] }).ids
+    const deletedIds = ids.filter((item) => state.contacts.some((existing) => existing.id === item))
+    state.contacts = state.contacts.filter((item) => !ids.includes(item.id))
+    return ok({ deletedIds, notFoundIds: ids.filter((item) => !deletedIds.includes(item)) })
+  }
+  if (url === '/contacts' && method === 'GET') {
+    if (params.limit === 1 && params.groupId === undefined && params.q === undefined) {
+      return ok(pageOf([], state.total ?? state.contacts.length))
+    }
+    const items = state.contacts.filter((item) => params.groupId === undefined || item.groupIds.includes(String(params.groupId)))
+    return ok(pageOf(items, state.total ?? items.length))
+  }
+  if (url === '/directory-entries') return ok(pageOf([]))
+  return ok(null)
+}
+
+function testRouter(): Router {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: Empty },
+      { path: '/login', name: 'login', component: Empty },
+      { path: '/mail', name: 'mail', component: Empty },
+      { path: '/mail/compose', name: 'mail-compose', component: Empty },
+      { path: '/settings', name: 'settings', component: Empty },
+      {
+        path: '/contacts',
+        component: ContactsLayout,
+        children: [
+          { path: '', name: 'contacts', component: ContactsPage },
+          { path: 'all/:contactId', name: 'contacts-contact', component: ContactsPage },
+          { path: 'groups/:groupId', name: 'contacts-group', component: ContactsPage },
+          { path: 'groups/:groupId/:contactId', name: 'contacts-group-contact', component: ContactsPage },
+          { path: 'directory/:kind(people|shared)', name: 'contacts-directory', component: ContactsPage },
+          { path: 'directory/:kind(people|shared)/:entryId', name: 'contacts-directory-entry', component: ContactsPage },
+        ],
+      },
+    ],
+  })
+}
+
+/** 네이버 꼴 CSV — 값마다 앞에 ' , UTF-8 BOM */
+function naverCsv(rows: string[][]): File {
+  const header = ['성', '이름', '휴대폰번호', '이메일', '그룹명', '회사·소속명', '부서명', '직책', '회사주소', '메모']
+  const lines = [header, ...rows].map((cells, index) => (index === 0 ? cells : cells.map((cell) => `'${cell}`)).join(','))
+  return new File([`\uFEFF${lines.join('\n')}\n`], 'NAVER_Contacts.csv', { type: 'text/csv' })
+}
+
+describe('주소록 가져오기 · 내보내기 (16단계)', () => {
+  let pinia: Pinia
+  let requests: MockRequest[]
+  let state: ServerState
+  let imports: { count: number }
+  let uids: Map<string, string>
+  let downloads: string[]
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().startSession(USER)
+    imports = { count: 0 }
+    uids = new Map()
+    downloads = []
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(function (this: HTMLAnchorElement) {
+      downloads.push(this.getAttribute('href') ?? '')
+    })
+    state = {
+      contacts: [
+        contact('c1', '박지훈', 'jihoon.park@example.com', { groupIds: ['g1'] }),
+        contact('c2', '오세훈', 'sehun.oh@example.net'),
+      ],
+      groups: [
+        { id: 'g1', name: '거래처', memberCount: 0 },
+        { id: 'g2', name: '세무', memberCount: 0 },
+        { id: 'g3', name: '협력사 담당', memberCount: 0 },
+      ],
+    }
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) {
+      if (!wrapper.vm.$.isUnmounted) wrapper.unmount()
+    }
+    vi.restoreAllMocks()
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  async function mountApp(path = '/contacts') {
+    requests = installMockApi((request) => serve(state, request, imports, uids))
+    const router = testRouter()
+    await router.push(path)
+    await router.isReady()
+    const clock = createManualClock(NOW)
+    const app = mount(
+      { render: () => [h(RouterView), h(ToastHost)] },
+      { attachTo: document.body, global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: clock } } },
+    )
+    mounted.push(app)
+    await flushPromises()
+    return { app, router }
+  }
+
+  /** 조건이 될 때까지 기다린다 — 파일 읽기 · 압축 풀기 · 요청이 여러 번 양보한다 */
+  async function until(condition: () => boolean, tries = 60) {
+    for (let index = 0; index < tries && !condition(); index += 1) await flushPromises()
+    if (!condition()) throw new Error('기다린 조건이 되지 않았다')
+  }
+
+  async function click(target: Pick<DOMWrapper<Element>, 'element' | 'trigger'>) {
+    ;(target.element as HTMLElement).focus()
+    await target.trigger('click')
+    await flushPromises()
+  }
+
+  async function chooseFile(app: VueWrapper, file: File) {
+    const input = app.get('[data-import-file]')
+    Object.defineProperty(input.element, 'files', { value: [file], configurable: true })
+    await input.trigger('change')
+  }
+
+  const toasts = () => useToastStore().toasts
+  const toastMessages = () => toasts().map((toast) => toast.message)
+  const isOpen = (app: VueWrapper, selector: string) => app.find(`${selector}[open]`).exists()
+
+  async function openImport(app: VueWrapper) {
+    await click(app.get('[data-contacts-import]'))
+    expect(isOpen(app, '[data-contact-import]')).toBe(true)
+  }
+
+  async function readPreview(app: VueWrapper, file: File) {
+    await chooseFile(app, file)
+    await until(() => app.find('[data-import-found]').exists())
+  }
+
+  describe('「전체 연락처」 머리 · 빈 주소록', () => {
+    it('전체 연락처 머리에만 [가져오기] · [내보내기] — 그룹 머리는 지금 그대로', async () => {
+      const { app, router } = await mountApp()
+      expect(app.get('[data-contacts-import]').text()).toBe('가져오기')
+      expect(app.get('[data-contacts-export]').text()).toBe('내보내기')
+      expect(app.get('[data-contacts-export]').attributes('aria-disabled')).toBeUndefined()
+
+      await router.push('/contacts/groups/g1')
+      await flushPromises()
+      expect(app.find('[data-contacts-import]').exists()).toBe(false)
+      expect(app.find('[data-contacts-add-members]').exists()).toBe(true)
+    })
+
+    it('연락처가 하나도 없으면 [내보내기]를 끄고 까닭, 빈 칸 안내에 테두리 [가져오기]와 안내 한 줄', async () => {
+      state.contacts = []
+      const { app } = await mountApp()
+      const exportButton = app.get('[data-contacts-export]')
+      expect(exportButton.attributes('aria-disabled')).toBe('true')
+      expect(exportButton.attributes('title')).toBe('내보낼 연락처가 없습니다.')
+      expect(app.get(`#${exportButton.attributes('aria-describedby')}`).text()).toBe('내보낼 연락처가 없습니다.')
+      await click(exportButton)
+      expect(isOpen(app, '[data-contact-export]')).toBe(false)
+
+      const empty = app.get('[data-contacts-empty="first"]')
+      expect(empty.get('[data-contacts-first-import]').text()).toBe('가져오기')
+      expect(empty.findAll('.contacts-list__first-note').map((note) => note.text())).toEqual([
+        '다른 메일이나 휴대폰에서 내보낸 연락처 파일이 있으면 [가져오기]로 한 번에 넣을 수 있습니다.',
+        '메일을 읽다가 [⋯] → [보낸 사람을 주소록에 추가]로도 넣을 수 있습니다.',
+      ])
+      await click(empty.get('[data-contacts-first-import]'))
+      expect(isOpen(app, '[data-contact-import]')).toBe(true)
+    })
+
+    it('연락처가 3,000개면 [가져오기]도 끄고 패널의 3,000개 안내를 까닭으로, 가져오는 동안은 바쁜 표시', async () => {
+      state.total = 3000
+      const { app } = await mountApp()
+      const importButton = app.get('[data-contacts-import]')
+      expect(importButton.attributes('aria-disabled')).toBe('true')
+      expect(importButton.attributes('aria-describedby')).toBe('contacts-full-note')
+      expect(importButton.attributes('title')).toBe(CONTACTS_PANEL_TEXT.fullNote)
+      await click(importButton)
+      expect(isOpen(app, '[data-contact-import]')).toBe(false)
+
+      state.total = 10
+      useContactImportStore().busy = 'import'
+      const busy = await mountApp()
+      expect(busy.app.get('[data-contacts-import]').attributes('aria-busy')).toBe('true')
+      await click(busy.app.get('[data-contacts-import]'))
+      expect(isOpen(busy.app, '[data-contact-import]')).toBe(false)
+    })
+  })
+
+  describe('가져오기 창 ① 파일 고르기', () => {
+    it('처음 — 글 · [파일 고르기](처음 초점) · 형식 안내 · [취소]만', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      const dialog = app.get('[data-contact-import]')
+      expect(dialog.get('#contact-import-title').text()).toBe('연락처 가져오기')
+      expect(dialog.get('#contact-import-message').text()).toBe(
+        '네이버, Google, Outlook 같은 메일이나 휴대폰에서 내보낸 연락처 파일을 그대로 넣을 수 있습니다.',
+      )
+      expect(document.activeElement).toBe(dialog.get('[data-import-pick]').element)
+      expect(dialog.get('.import-picker__formats').text()).toBe(
+        'vCard(.vcf), CSV(.csv), 엑셀(.xlsx) 파일을 넣을 수 있습니다. 파일 하나는 20MB까지입니다.',
+      )
+      expect(dialog.get('[data-import-file]').attributes('accept')).toBe('.vcf,.csv,.xlsx')
+      expect(dialog.find('[data-import-submit]').exists()).toBe(false)
+    })
+
+    it('읽는 동안의 상태 영역은 늘 있고 글만 바뀐다 — 영역이 글과 함께 생기면 화면 낭독기가 읽지 않기도 한다', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      const status = app.get('[data-import-status]')
+      expect(status.attributes('role')).toBe('status')
+      expect(status.text()).toBe('')
+      await chooseFile(app, naverCsv([['강', '민지', '', 'minji.kang@example.com', '', '', '', '', '', '']]))
+      expect(app.get('[data-import-status]').element).toBe(status.element)
+      expect(status.text()).toBe(CONTACT_IMPORT_TEXT.reading)
+      expect(app.get('.import-picker__reading').attributes('aria-hidden')).toBe('true')
+      await until(() => app.find('[data-import-found]').exists())
+    })
+
+    it('읽다가 뜻밖에 멈추면 "읽는 중"에 머물지 않고 열지 못한 파일로 칸 아래에 알린다', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      const file = new File(['이름,이메일'], '연락처.csv')
+      Object.defineProperty(file, 'size', {
+        get: () => {
+          throw new Error('읽기 실패')
+        },
+      })
+      await chooseFile(app, file)
+      await until(() => app.find('[data-import-error]').exists())
+      expect(app.get('[data-import-error]').text()).toBe(CONTACT_IMPORT_ERROR_TEXT.unreadable)
+      expect(app.find('[data-import-pick]').exists()).toBe(true)
+    })
+
+    it('끌어 오는 동안 놓는 자리가 바뀌고, 여러 파일을 놓으면 칸 아래 글(알림 없음)', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      const zone = app.get('[data-import-zone]')
+      const transfer = fakeDataTransfer([new File(['a'], 'a.csv'), new File(['b'], 'b.csv')])
+      zone.element.dispatchEvent(dragEvent('dragenter', transfer))
+      await flushPromises()
+      expect(zone.classes()).toContain('is-dragging')
+      expect(zone.text()).toBe('놓으면 이 파일에서 연락처를 찾습니다')
+
+      const drop = dragEvent('drop', transfer)
+      zone.element.dispatchEvent(drop)
+      await flushPromises()
+      expect(drop.defaultPrevented).toBe(true)
+      expect(app.get('[data-import-error]').text()).toBe('파일은 한 번에 하나만 넣을 수 있습니다.')
+      expect(app.get('[data-import-error]').attributes('role')).toBe('alert')
+      expect(zone.classes()).not.toContain('is-dragging')
+      expect(toasts()).toEqual([])
+    })
+
+    it.each([
+      ['list.xls', 'xls 내용', '옛 엑셀 파일(.xls)은 넣을 수 없습니다. 엑셀에서 [다른 이름으로 저장]을 눌러 .xlsx나 CSV 파일로 저장한 뒤 넣어 주세요.'],
+      ['photo.png', '\u0000PNG', '넣을 수 없는 파일입니다. vCard(.vcf), CSV(.csv), 엑셀(.xlsx) 파일을 골라 주세요.'],
+      ['empty.csv', '날짜,금액\n2026-11-10,3000\n', '이 파일에서 연락처를 찾지 못했습니다. 이름이나 이메일이 든 열이 있는지 확인해 주세요.'],
+      ['empty.vcf', 'VERSION:3.0\n', '이 파일에서 연락처를 찾지 못했습니다.'],
+    ])('읽지 못하면 칸 아래 빨간 글 — %s', async (name, content, message) => {
+      const { app } = await mountApp()
+      await openImport(app)
+      await chooseFile(app, new File([content], name))
+      await until(() => app.find('[data-import-error]').exists())
+      expect(app.get('[data-import-error]').text()).toBe(message)
+      expect(document.activeElement).toBe(app.get('[data-import-pick]').element)
+      expect(requests.some((request) => request.url === '/contact-import-checks')).toBe(false)
+    })
+  })
+
+  describe('가져오기 창 ② 미리 보기 · 넣기 · 되돌리기', () => {
+    const rows = [
+      ['강', '민지', '01041203387', 'minji.kang@example.com', '거래처', '한빛상사', '구매팀', '과장', '서울 중구 세종대로 110', '견적 문의는 월말 전에 보내기.'],
+      ['박', '지훈', '', 'jihoon.park@example.com', '', '한빛상사', '영업팀', '', '', ''],
+      ['김', '도현', '01055210934', 'dohyun.kim@example.net', '거래처', '그린클라우드', '', '', '', ''],
+      ['', '', '01090346621', '', '', '', '', '', '', ''],
+      ['문', '가은', '', 'gaeun.moon@example.net', '동호회', '', '', '', '', ''],
+      ['강', '민지', '', 'MINJI.KANG@example.com', '', '', '', '', '', ''],
+    ]
+
+    it('세 묶음 · 그룹 글 · 메모 견본 — 처음 초점은 [연락처 N명 넣기]', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv(rows))
+      const dialog = app.get('[data-contact-import]')
+
+      expect(dialog.get('[data-import-file-name]').text()).toBe('NAVER_Contacts.csv')
+      expect(dialog.get('[data-import-found]').text()).toBe('연락처 6명을 찾았습니다.')
+      expect(dialog.get('[data-import-insert-count]').text()).toBe('3명')
+      expect(dialog.findAll('[data-import-row]').map((row) => row.findAll('[role="cell"]').map((cell) => cell.text()))).toEqual([
+        ['강민지', 'minji.kang@example.com', '010-4120-3387', '한빛상사', '거래처'],
+        ['김도현', 'dohyun.kim@example.net', '010-5521-0934', '그린클라우드', '거래처'],
+        ['문가은', 'gaeun.moon@example.net', '', '', '동호회'],
+      ])
+      expect(document.activeElement).toBe(dialog.get('[data-import-submit]').element)
+      expect(dialog.get('[data-import-submit]').text()).toBe('연락처 3명 넣기')
+
+      const toggle = dialog.get('[data-import-duplicates-toggle]')
+      expect(toggle.text()).toContain('이미 있는 연락처는 건너뜁니다')
+      expect(toggle.text()).toContain('2명')
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+      await click(toggle)
+      expect(toggle.attributes('aria-expanded')).toBe('true')
+      expect(
+        dialog.findAll('[data-import-duplicates] li').map((item) => item.findAll('span').map((span) => span.text())),
+      ).toEqual([
+        ['3번째 줄', '박지훈jihoon.park@example.com', '박지훈', '주소록에 있음'],
+        ['7번째 줄', '강민지MINJI.KANG@example.com', '강민지', '2번째 줄과 같음'],
+      ])
+
+      await click(dialog.get('[data-import-problems-toggle]'))
+      expect(dialog.get('[data-import-problems-toggle]').text()).toContain('넣지 못하는 줄')
+      expect(dialog.get('[data-import-problems] li').text()).toContain('5번째 줄')
+      expect(dialog.get('[data-import-problems] li').text()).toContain('010-9034-6621')
+      expect(dialog.get('[data-import-problems] li').text()).toContain('이름과 이메일이 모두 없습니다.')
+
+      expect(dialog.get('[data-import-groups-text]').text()).toBe(
+        '파일에 적힌 그룹 2개 가운데 거래처는 이미 있는 그룹에 넣고 동호회는 새로 만듭니다.',
+      )
+      expect(dialog.get('[data-import-info]').element).toHaveProperty('checked', true)
+      expect(dialog.get('[data-import-info-sample]').text()).toContain('예: 강민지의 메모')
+      expect(dialog.get('[data-import-info-sample]').text()).toContain('회사 주소: 서울 중구 세종대로 110')
+      expect(requests.filter((request) => request.url === '/contact-import-checks')).toHaveLength(1)
+    })
+
+    it('[연락처 N명 넣기] — 새 그룹을 먼저 만들고 100명씩 넣는다, 결과는 ✕까지 남고 [되돌리기]가 넣은 연락처 · 새 그룹을 지운다', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv(rows))
+      const dialog = app.get('[data-contact-import]')
+
+      await dialog.get('[data-import-group-mode="new"]').setValue(true)
+      await click(dialog.get('[data-import-submit]'))
+      expect(dialog.get('[data-import-group-name]').attributes('aria-invalid')).toBe('true')
+      expect(dialog.get('.import-groups .form-message--error').text()).toBe('그룹 이름을 넣어 주세요.')
+      expect(document.activeElement).toBe(dialog.get('[data-import-group-name]').element)
+      expect(isOpen(app, '[data-contact-import]')).toBe(true)
+
+      await dialog.get('[data-import-group-name]').setValue('네이버 주소록')
+      await click(dialog.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.kind === 'success'))
+      expect(isOpen(app, '[data-contact-import]')).toBe(false)
+
+      const groupCreates = requests.filter((request) => request.url === '/contact-groups' && request.method === 'POST')
+      expect(groupCreates.map((request) => (request.data as { name: string }).name)).toEqual(['네이버 주소록', '동호회'])
+      const importRequests = requests.filter((request) => request.url === '/contact-imports')
+      expect(importRequests).toHaveLength(1)
+      expect(requests.indexOf(importRequests[0]!)).toBeGreaterThan(requests.indexOf(groupCreates[1]!))
+      const sent = (importRequests[0]?.data as { contacts: ContactImportItem[] }).contacts
+      expect(sent.map((item) => [item.name, item.groupIds])).toEqual([
+        ['강민지', ['g1', 'ng4']],
+        ['김도현', ['g1', 'ng4']],
+        ['문가은', ['ng5', 'ng4']],
+      ])
+      expect(sent[0]?.uid).toMatch(/^urn:uuid:[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/)
+      expect(sent[0]?.note).toBe('견적 문의는 월말 전에 보내기.\n\n가져온 정보\n회사 주소: 서울 중구 세종대로 110')
+      expect(sent[0]?.phones).toEqual([{ number: '010-4120-3387', label: 'mobile' }])
+
+      const [result] = toasts()
+      expect(result?.message).toBe('연락처 3명을 넣었습니다. 이미 있던 2명은 건너뛰었습니다.')
+      expect(result?.sticky).toBe(true)
+      expect(app.get('[data-toast-close]').attributes('aria-label')).toBe('알림 닫기')
+      // 끝나면 연락처 수 · 그룹 · 보는 목록을 다시 받는다
+      await until(() => app.get('[data-contacts-count]').text() === '5명')
+
+      await click(app.get('.toast__action'))
+      await until(() => toastMessages().some((message) => message.startsWith('가져온 연락처 3명')))
+      expect(toastMessages()).toEqual(['가져온 연락처 3명과 새로 만든 그룹 2개를 지웠습니다.'])
+      const deletions = requests.filter((request) => request.url === '/contact-deletions')
+      expect(deletions.map((request) => (request.data as { ids: string[] }).ids)).toEqual([['c102', 'c103', 'c104']])
+      expect(
+        requests.filter((request) => request.method === 'DELETE').map((request) => request.url),
+      ).toEqual(['/contact-groups/ng4', '/contact-groups/ng5'])
+      expect(state.contacts.map((item) => item.id)).toEqual(['c1', 'c2'])
+    })
+
+    it('주소록이 차면 남은 자리만큼 — 한도 안내 · 단추의 수, 결과에 넣지 못한 수', async () => {
+      state.remaining = 1
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv(rows))
+      const dialog = app.get('[data-contact-import]')
+      expect(dialog.get('[data-import-limit]').text()).toBe(
+        '연락처는 3,000개까지 둘 수 있어 앞에서부터 1명만 넣습니다. 나머지 2명은 넣지 않습니다.',
+      )
+      expect(dialog.get('[data-import-submit]').text()).toBe('연락처 1명 넣기')
+
+      await click(dialog.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.kind === 'success'))
+      expect(toastMessages()).toEqual([
+        '연락처 1명을 넣었습니다. 이미 있던 2명은 건너뛰었습니다. 연락처는 3,000개까지 둘 수 있어 나머지 2명은 넣지 못했습니다.',
+      ])
+    })
+
+    it('남은 자리가 하나도 없으면(그사이 주소록이 참) 한도 안내는 패널의 3,000개 안내 · [연락처 넣기]는 꺼진다', async () => {
+      state.remaining = 0
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv(rows))
+      expect(app.get('[data-import-limit]').text()).toBe(CONTACTS_PANEL_TEXT.fullNote)
+      expect(app.get('[data-import-submit]').attributes('aria-disabled')).toBe('true')
+      expect(app.find('[data-import-insert-count]').exists()).toBe(false)
+    })
+
+    it('넣을 연락처가 없으면 [연락처 넣기]를 끄고(aria-disabled) 까닭을 단추 옆에', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv([rows[1]!]))
+      const submit = app.get('[data-import-submit]')
+      expect(submit.text()).toBe('연락처 넣기')
+      expect(submit.attributes('aria-disabled')).toBe('true')
+      expect(app.get(`#${submit.attributes('aria-describedby')}`).text()).toBe('넣을 연락처가 없습니다.')
+      await click(submit)
+      expect(isOpen(app, '[data-contact-import]')).toBe(true)
+      expect(requests.some((request) => request.url === '/contact-imports')).toBe(false)
+    })
+
+    it('도중에 멈추면 오류 알림 + [다시 시도](✕까지 남는다) — 남은 연락처부터 같은 uid 로 이어 넣는다', async () => {
+      const many = Array.from({ length: 150 }, (_, index) => ['이', `사람${index}`, '', `p${index}@example.org`, '', '', '', '', '', ''])
+      state.importReply = (_request, index) => (index === 2 ? 'network' : undefined)
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv(many))
+      await click(app.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.kind === 'error' && toast.action !== null))
+
+      const stopped = toasts().find((toast) => toast.action !== null)
+      expect(stopped?.message).toBe('연락처 150명 가운데 100명을 넣고 멈췄습니다. 다시 시도해 주세요.')
+      expect(stopped?.sticky).toBe(true)
+      expect(stopped?.action?.label).toBe('다시 시도')
+      const firstBatches = requests.filter((request) => request.url === '/contact-imports')
+      const secondUids = (firstBatches[1]?.data as { contacts: ContactImportItem[] }).contacts.map((item) => item.uid)
+      expect(secondUids).toHaveLength(50)
+
+      state.importReply = undefined
+      const retry = app.findAll('.toast').find((toast) => toast.text().includes('멈췄습니다'))
+      await click(retry!.get('.toast__action'))
+      await until(() => toasts().some((toast) => toast.kind === 'success'))
+      const batches = requests.filter((request) => request.url === '/contact-imports')
+      expect(batches).toHaveLength(3)
+      expect((batches[2]?.data as { contacts: ContactImportItem[] }).contacts.map((item) => item.uid)).toEqual(secondUids)
+      expect(toastMessages()).toContain('연락처 150명을 넣었습니다.')
+      expect(state.contacts).toHaveLength(152)
+    })
+
+    it('칸을 한도까지 채운 연락처 100명 — 확인 · 넣기 묶음이 값 8,000개에서 나뉜다 (서버 본문 한도 값 10,000 · 1MB 를 넘지 않게)', async () => {
+      /** 서버(json-shape.ts)와 같은 셈 — 맨 바깥 1 + 객체 · 배열마다 항목 수 */
+      const serverValueCount = (body: unknown): number => {
+        let values = 1
+        const pending: unknown[] = [body]
+        while (pending.length > 0) {
+          const next = pending.pop()
+          if (typeof next !== 'object' || next === null) continue
+          const children = Array.isArray(next) ? next : Object.values(next)
+          values += children.length
+          pending.push(...children)
+        }
+        return values
+      }
+      const lines = ['이름,이메일,휴대폰']
+      for (let index = 0; index < 100; index += 1) {
+        const emails = Array.from({ length: 20 }, (_, k) => `p${index}.${k}@example.org`).join('; ')
+        const phones = Array.from({ length: 20 }, (_, k) => `010-${1000 + index}-${2000 + k}`).join('; ')
+        lines.push(`사람${index},"${emails}","${phones}"`)
+      }
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, new File([lines.join('\n')], '큰 연락처.csv'))
+      expect(app.get('[data-import-submit]').text()).toBe('연락처 100명 넣기')
+      await click(app.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.kind === 'success'))
+
+      for (const url of ['/contact-import-checks', '/contact-imports']) {
+        const sent = requests.filter((request) => request.url === url)
+        expect(sent.map((request) => (request.data as { contacts: unknown[] }).contacts.length)).toEqual([61, 39])
+        for (const request of sent) {
+          expect(serverValueCount(request.data)).toBeLessThanOrEqual(8000)
+          expect(new TextEncoder().encode(JSON.stringify(request.data)).length).toBeLessThanOrEqual(700 * 1024)
+        }
+      }
+      expect(toastMessages()).toContain('연락처 100명을 넣었습니다.')
+      expect(state.contacts).toHaveLength(102)
+    })
+
+    it('새 그룹 만들기의 응답만 잃은 뒤 [다시 시도] — 같은 이름(CONTACT_001)이 돌아오면 이번에 만든 그룹으로 보고 [되돌리기]가 지운다', async () => {
+      state.groupCreateReply = () => 'network'
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv([rows[4]!]))
+      await click(app.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.action !== null))
+      expect(toasts().find((toast) => toast.action !== null)?.message).toBe('연락처를 넣지 못했습니다. 다시 시도해 주세요.')
+      // 서버에는 만들어졌다
+      expect(state.groups.map((group) => group.name)).toContain('동호회')
+
+      state.groupCreateReply = undefined
+      const retry = app.findAll('.toast').find((toast) => toast.text().includes('넣지 못했습니다'))
+      await click(retry!.get('.toast__action'))
+      await until(() => toasts().some((toast) => toast.kind === 'success'))
+      const sent = requests.filter((request) => request.url === '/contact-imports')
+      expect((sent[0]?.data as { contacts: ContactImportItem[] }).contacts.map((item) => item.groupIds)).toEqual([['ng4']])
+
+      const result = app.findAll('.toast').find((toast) => toast.text().includes('넣었습니다'))
+      await click(result!.get('.toast__action'))
+      await until(() => toastMessages().some((message) => message.startsWith('가져온 연락처 1명')))
+      expect(toastMessages()).toContain('가져온 연락처 1명과 새로 만든 그룹 1개를 지웠습니다.')
+      expect(requests.filter((request) => request.method === 'DELETE').map((request) => request.url)).toEqual([
+        '/contact-groups/ng4',
+      ])
+      expect(state.groups.map((group) => group.name)).toEqual(['거래처', '세무', '협력사 담당'])
+    })
+
+    it('그사이 다른 곳에서 같은 이름의 그룹을 만들었으면(CONTACT_001) 그 그룹에 넣고 [되돌리기]는 그 그룹을 지우지 않는다', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv([rows[4]!]))
+      state.groups.push({ id: 'other', name: '동호회', memberCount: 0 })
+      await click(app.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.kind === 'success'))
+      const sent = requests.filter((request) => request.url === '/contact-imports')
+      expect((sent[0]?.data as { contacts: ContactImportItem[] }).contacts.map((item) => item.groupIds)).toEqual([['other']])
+
+      await click(app.get('.toast__action'))
+      await until(() => toastMessages().some((message) => message.startsWith('가져온 연락처 1명')))
+      expect(toastMessages()).toEqual(['가져온 연락처 1명을 지웠습니다.'])
+      expect(requests.some((request) => request.method === 'DELETE')).toBe(false)
+      expect(state.groups.map((group) => group.id)).toContain('other')
+    })
+
+    it('처음부터 넣지 못하면 "연락처를 넣지 못했습니다." + [다시 시도]', async () => {
+      state.importReply = () => fail(503, 'MAIL_001')
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, naverCsv([rows[0]!]))
+      await click(app.get('[data-import-submit]'))
+      await until(() => toasts().some((toast) => toast.action !== null))
+      expect(toasts().find((toast) => toast.action !== null)?.message).toBe('연락처를 넣지 못했습니다. 다시 시도해 주세요.')
+    })
+
+    it('엑셀(.xlsx — 네이버 내보내기처럼 칸 안 문자열)도 같은 미리 보기', async () => {
+      const bytes = await buildXlsx([
+        ['성', '이름', '휴대폰번호', '이메일', '그룹명', '회사·소속명', '부서명'],
+        ['남궁', '서연', '01077142093', 'seoyeon.namgung@example.com', '거래처', '서린디자인', ''],
+        ['류', '지환', '', 'jihwan.ryu@example.com', '세무', '바른회계법인', ''],
+      ])
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, new File([bytes.slice()], 'NAVER_Contacts.xlsx'))
+      expect(app.get('[data-import-found]').text()).toBe('연락처 2명을 찾았습니다.')
+      expect(app.findAll('[data-import-row]').map((row) => row.get('[role="cell"]').text())).toEqual(['남궁서연', '류지환'])
+      expect(app.get('[data-import-groups-text]').text()).toBe('파일에 적힌 그룹 거래처, 세무는 이미 있는 그룹에 넣습니다.')
+      // 칸 없는 정보가 없으면 메모 체크 칸을 두지 않는다
+      expect(app.find('[data-import-info]').exists()).toBe(false)
+    })
+
+    it('vCard — 줄 대신 "N번째 연락처", 묶음 이름은 "넣지 못하는 연락처"', async () => {
+      const vcf = [
+        'BEGIN:VCARD',
+        'VERSION:3.0',
+        'FN:신예린',
+        'EMAIL;type=INTERNET;type=HOME:yerin.shin@example.com',
+        'END:VCARD',
+        'BEGIN:VCARD',
+        'VERSION:3.0',
+        'TEL;type=CELL:010-3192-5540',
+        'END:VCARD',
+      ].join('\r\n')
+      const { app } = await mountApp()
+      await openImport(app)
+      await readPreview(app, new File([vcf], '연락처.vcf'))
+      const toggle = app.get('[data-import-problems-toggle]')
+      expect(toggle.text()).toContain('넣지 못하는 연락처')
+      expect(toggle.text()).toContain('1명')
+      await click(toggle)
+      expect(app.get('[data-import-problems] li').text()).toContain('2번째 연락처')
+    })
+
+    it('[취소] · Esc 는 묻지 않고 닫고, 읽는 중이면 읽기를 멈춘다', async () => {
+      const { app } = await mountApp()
+      await openImport(app)
+      await chooseFile(app, naverCsv(rows))
+      await click(app.get('[data-import-cancel]'))
+      expect(isOpen(app, '[data-contact-import]')).toBe(false)
+      await flushPromises()
+      await flushPromises()
+      await openImport(app)
+      expect(app.find('[data-import-found]').exists()).toBe(false)
+      expect(app.find('[data-import-pick]').exists()).toBe(true)
+    })
+  })
+
+  describe('내보내기 창', () => {
+    it('처음 — 내 주소록 전체 · vCard, 파일 이름은 주소록-날짜. [내보내기]는 세션을 확인한 뒤 바로 내려받는다', async () => {
+      const { app } = await mountApp()
+      await click(app.get('[data-contacts-export]'))
+      const dialog = app.get('[data-contact-export]')
+      expect(isOpen(app, '[data-contact-export]')).toBe(true)
+      expect(dialog.get('#contact-export-title').text()).toBe('연락처 내보내기')
+      expect(dialog.get('[data-export-scope="all"]').element).toHaveProperty('checked', true)
+      expect(dialog.get('[data-export-format="vcard"]').element).toHaveProperty('checked', true)
+      expect(dialog.text()).toContain('연락처 2명')
+      expect(dialog.text()).toContain('내 주소록의 연락처만 내보내고 사내 목록은 넣지 않습니다.')
+      expect(dialog.get('[data-export-file-name]').text()).toBe(`주소록-${formatDate(new Date(NOW))}.vcf`)
+
+      await click(dialog.get('[data-export-submit]'))
+      expect(isOpen(app, '[data-contact-export]')).toBe(false)
+      await until(() => downloads.length > 0)
+      expect(requests.some((request) => request.url === '/auth/me')).toBe(true)
+      expect(downloads).toEqual(['/api/contact-exports?format=vcard'])
+    })
+
+    it('그룹 하나를 CSV 로 — 첫 그룹이 골라지고 파일 이름에 그룹 이름', async () => {
+      const { app } = await mountApp()
+      await click(app.get('[data-contacts-export]'))
+      const dialog = app.get('[data-contact-export]')
+      await dialog.get('[data-export-scope="group"]').setValue(true)
+      await dialog.get('[data-export-format="csv"]').setValue(true)
+      expect((dialog.get('[data-export-group]').element as HTMLSelectElement).value).toBe('g1')
+      expect(dialog.get('[data-export-group]').findAll('option').map((option) => option.text())).toEqual([
+        '거래처 · 1명',
+        '세무 · 0명',
+        '협력사 담당 · 0명',
+      ])
+      expect(dialog.get('[data-export-file-name]').text()).toBe(`주소록-거래처-${formatDate(new Date(NOW))}.csv`)
+      await click(dialog.get('[data-export-submit]'))
+      await until(() => downloads.length > 0)
+      expect(downloads).toEqual(['/api/contact-exports?format=csv&groupId=g1'])
+    })
+
+    it('구성원이 없는 그룹이면 [내보내기]를 끄고 까닭을 그룹 칸 아래에 — 다른 그룹을 고르면 돌아온다', async () => {
+      const { app } = await mountApp()
+      await click(app.get('[data-contacts-export]'))
+      const dialog = app.get('[data-contact-export]')
+      await dialog.get('[data-export-scope="group"]').setValue(true)
+      await dialog.get('[data-export-group]').setValue('g3')
+      const submit = dialog.get('[data-export-submit]')
+      expect(submit.attributes('aria-disabled')).toBe('true')
+      expect(dialog.get('#contact-export-empty').text()).toBe('‘협력사 담당’ 그룹에는 아직 아무도 없어 내보낼 연락처가 없습니다.')
+      expect(dialog.find('[data-export-file-name]').exists()).toBe(false)
+      await click(submit)
+      expect(downloads).toEqual([])
+
+      await dialog.get('[data-export-group]').setValue('g1')
+      expect(submit.attributes('aria-disabled')).toBeUndefined()
+    })
+  })
+})
diff --git a/frontend/src/pages/mail/ComposePage.drafts.spec.ts b/frontend/src/pages/mail/ComposePage.drafts.spec.ts
index 32c894e..7b99583 100644
--- a/frontend/src/pages/mail/ComposePage.drafts.spec.ts
+++ b/frontend/src/pages/mail/ComposePage.drafts.spec.ts
@@ -7,7 +7,8 @@ import ToastHost from '@/components/feedback/ToastHost.vue'
 import { CLOCK } from '@/composables/useClock'
 import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
 import { MAIL_BODY_MAX_LENGTH } from '@/shared/constants/mail'
-import type { Draft, MailSignature, Mailbox, MessageDetail } from '@/shared/types/mail'
+import type { Draft, Mailbox, MessageDetail } from '@/shared/types/mail'
+import type { MailSignature, MailSignatureDefaults } from '@/shared/types/mail-signature'
 import { formatDraftSavedTime } from '@/shared/utils/format'
 import { useAuthStore } from '@/stores/auth.store'
 import { useMailStore } from '@/stores/mail.store'
@@ -68,32 +69,30 @@ const MAILBOXES: Mailbox[] = [
   { id: 'trash', name: '휴지통', role: 'trash', parentId: null, sortOrder: 5, totalCount: 0, unreadCount: 0 },
 ]
 
-const NO_SIGNATURE: MailSignature = {
-  bodyHtml: null,
-  body: null,
-  isForNew: true,
-  isForReply: true,
-  images: [],
-  updatedAt: null,
-}
-
+/** 서명 — 새 메일 · 답장과 전달 기본 (16단계 — 여러 서명, 계약 2절 "서명") */
 const SIGNATURE: MailSignature = {
+  id: 'sig-out',
+  name: '대외',
   bodyHtml:
     '<div style="font-family: \'Malgun Gothic\'; font-size: 14px; line-height: 1.75">' +
     '<p style="margin: 0"><strong>김아라</strong> · 인프라팀</p>' +
     `<p style="margin: 0"><img src="/api/mail-signature/images/${IMAGE_ID}" width="144" alt=""></p></div>`,
   body: '김아라 · 인프라팀',
-  isForNew: true,
-  isForReply: true,
   images: [{ id: IMAGE_ID, type: 'image/png', size: 1000, width: 480, height: 120 }],
   updatedAt: SAVED_AT,
 }
 
+/** 서명이 없는 직원의 기본 둘 */
+const NO_DEFAULTS: MailSignatureDefaults = { newMessageId: null, replyId: null }
+
 /** 먼저 보는 응답 — undefined 면 기본 서버가 답한다 */
 type ExtraHandler = (request: MockRequest) => MockResult | Promise<MockResult> | undefined
 
 interface ServerOptions {
-  signature?: MailSignature
+  /** 내 서명 — 비면 서명 없음 */
+  signatures?: MailSignature[]
+  /** 기본 둘 — 비면 첫 서명을 두 곳 모두에, 서명이 없으면 넣지 않음 */
+  defaults?: MailSignatureDefaults
   /** POST · PUT /drafts 의 응답 — 비면 d1, d2 … 로 성공 */
   draftResults?: MockResult[]
   /** GET /drafts/{id} */
@@ -122,7 +121,14 @@ function server(options: ServerOptions = {}): MockHandler {
     if (method === 'GET' && url === '/mailboxes') {
       return ok({ items: MAILBOXES, pageInfo: { hasNext: false, nextCursor: null, total: 3 } })
     }
-    if (method === 'GET' && url === '/mail-signature') return ok(options.signature ?? NO_SIGNATURE)
+    if (method === 'GET' && url === '/mail-signatures') {
+      const signatures = options.signatures ?? []
+      return ok({ items: signatures, pageInfo: { hasNext: false, nextCursor: null, total: signatures.length } })
+    }
+    if (method === 'GET' && url === '/mail-signature-defaults') {
+      const first = options.signatures?.[0]?.id ?? null
+      return ok(options.defaults ?? (first ? { newMessageId: first, replyId: first } : NO_DEFAULTS))
+    }
     if (method === 'GET' && url.startsWith('/drafts/')) {
       const draft = options.draft ?? drafts.get(url.slice('/drafts/'.length))
       if (!draft) return fail(404, 'RES_001')
@@ -1045,7 +1051,7 @@ describe('ComposePage — 임시 저장 · 서명 (2단계)', () => {
     it('저장본으로 채우고 답장으로 연다 — 서명은 다시 넣지 않고, 고치면 그 id 로 PUT (inReplyTo 그대로)', async () => {
       const { wrapper, requests } = await mountCompose(
         '/mail/compose?draft=d7',
-        server({ draft: DRAFT, signature: SIGNATURE }),
+        server({ draft: DRAFT, signatures: [SIGNATURE] }),
       )
 
       expect(wrapper.get('h1').text()).toBe('답장')
@@ -1143,23 +1149,63 @@ describe('ComposePage — 임시 저장 · 서명 (2단계)', () => {
     })
   })
 
-  describe('서명 (계약 2절 "서명")', () => {
-    it('새 메일은 본문 끝 — 쓸 줄 · 빈 줄 하나 뒤에 서명(그림 포함). 넣어 둔 서명은 "바꿈"이 아니다', async () => {
-      const { wrapper, requests } = await mountCompose('/mail/compose', server({ signature: SIGNATURE }))
-      const paragraphs = wrapper.findAll('#compose-body p')
+  describe('서명 (계약 2절 "서명" — 16단계 여러 서명)', () => {
+    /** 둘째 서명 — 사내 (그림 없음) */
+    const INSIDE: MailSignature = {
+      id: 'sig-in',
+      name: '사내',
+      bodyHtml: '<p style="margin: 0"><strong>김아라</strong> · 인프라팀</p><p style="margin: 0">내선 1234</p>',
+      body: '김아라 · 인프라팀\n내선 1234',
+      images: [],
+      updatedAt: SAVED_AT,
+    }
 
-      expect(paragraphs.map((paragraph) => paragraph.text())).toEqual(['', '', '김아라 · 인프라팀', ''])
+    /** 맨 위 단계 블록 — 서명 자리는 [서명:글], 원문 인용은 [인용] */
+    function blocks(wrapper: VueWrapper): string[] {
+      const out: string[] = []
+      editorOf(wrapper.element).state.doc.forEach((node) => {
+        if (node.type.name === 'mailSignature') out.push(`[서명:${node.textContent}]`)
+        else out.push(node.type.name === 'blockquote' ? '[인용]' : node.textContent)
+      })
+      return out
+    }
+
+    function menuItems(wrapper: VueWrapper) {
+      return wrapper.findAll('.compose-signature__menu [role^="menuitem"]')
+    }
+
+    /** [서명 ▾]를 열고 이름이 같은 항목을 누른다 */
+    async function pickSignature(wrapper: VueWrapper, label: string) {
+      await wrapper.get('#compose-signature').trigger('click')
+      await flushPromises()
+      const item = menuItems(wrapper).find((entry) => entry.text() === label)
+      if (!item) throw new Error(`메뉴에 ${label} 이 없다`)
+      await item.trigger('click')
+      await flushPromises()
+      await flushPromises()
+    }
+
+    function signatureStatus(wrapper: VueWrapper): string {
+      return wrapper.get('[data-signature-status]').text()
+    }
+
+    it('새 메일은 본문 끝 — 쓸 줄 · 빈 줄 하나 뒤에 새 메일 기본 서명(그림 포함). 넣어 둔 서명은 "바꿈"이 아니다', async () => {
+      const { wrapper, requests } = await mountCompose('/mail/compose', server({ signatures: [SIGNATURE] }))
+
+      // 끝의 빈 줄은 편집기가 첫 거래 때 스스로 붙인다 — 연 직후에는 서명 자리가 끝이다
+      expect(blocks(wrapper)).toEqual(['', '', '[서명:김아라 · 인프라팀]'])
       expect(wrapper.get('#compose-body img[src]').attributes()).toMatchObject({
         src: `/api/mail-signature/images/${IMAGE_ID}`,
         width: '144',
       })
+      expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 대외')
       await wait(30_000)
       expect(draftCalls(requests)).toEqual([])
       expect(blocksUnload()).toBe(false)
     })
 
-    it('보내면 서명 그림이 서식 본문에 남는다 — 텍스트 대체 본문에는 그림이 없다', async () => {
-      const { wrapper, requests } = await mountCompose('/mail/compose', server({ signature: SIGNATURE }))
+    it('보내면 서명 자리는 빈 문단 뒤의 속성 없는 div(앱과 같은 경계) — 그림은 서식 본문에만', async () => {
+      const { wrapper, requests } = await mountCompose('/mail/compose', server({ signatures: [SIGNATURE] }))
       const input = wrapper.get('#compose-to')
       await input.setValue('doyun.lee@arasystem.it.kr')
       await input.trigger('blur')
@@ -1171,33 +1217,219 @@ describe('ComposePage — 임시 저장 · 서명 (2단계)', () => {
       const send = requests.find((request) => request.method === 'POST' && request.url === '/messages')
       const data = send?.data as { body: string; bodyHtml: string }
       expect(data.body).toBe('\n\n김아라 · 인프라팀')
-      expect(data.bodyHtml).toContain(`<img src="/api/mail-signature/images/${IMAGE_ID}" width="144" alt="">`)
-    })
-
-    it('답장 · 전달은 인용 위 — 쓸 줄 · 빈 줄 · 서명 · 인용', async () => {
-      const { wrapper } = await mountCompose('/mail/compose?replyTo=m1', server({ signature: SIGNATURE }))
-      const doc = editorOf(wrapper.element).state.doc
-      const blocks: string[] = []
-      doc.forEach((node) => blocks.push(node.type.name === 'blockquote' ? '인용' : node.textContent))
-      expect(blocks.slice(0, 5)).toEqual(['', '', '김아라 · 인프라팀', '', '인용'])
-    })
-
-    it('답장 · 전달에 넣지 않기로 했으면 넣지 않는다', async () => {
-      const { wrapper } = await mountCompose(
-        '/mail/compose?replyTo=m1',
-        server({ signature: { ...SIGNATURE, isForReply: false } }),
+      expect(data.bodyHtml).toContain(
+        '<p style="margin: 0"><br></p><div><p style="margin: 0"><strong>김아라</strong> · 인프라팀</p>' +
+          `<p style="margin: 0"><img src="/api/mail-signature/images/${IMAGE_ID}" width="144" alt=""></p></div>`,
       )
-      expect(wrapper.find('#compose-body img[src]').exists()).toBe(false)
-      expect(wrapper.get('#compose-body').text()).not.toContain('김아라 · 인프라팀')
     })
 
-    it('서명을 못 받아도 서명 없이 연다 — 알리지 않는다', async () => {
-      const { wrapper } = await mountCompose(
+    it('답장 · 전달은 인용 위에 답장과 전달 기본 서명', async () => {
+      const reply = await mountCompose(
+        '/mail/compose?replyTo=m1',
+        server({ signatures: [SIGNATURE, INSIDE], defaults: { newMessageId: SIGNATURE.id, replyId: INSIDE.id } }),
+      )
+      expect(blocks(reply.wrapper).slice(0, 4)).toEqual(['', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+      expect(reply.wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 사내')
+    })
+
+    it('답장과 전달 기본이 넣지 않음이면 넣지 않는다', async () => {
+      const none = await mountCompose(
+        '/mail/compose?replyTo=m1',
+        server({ signatures: [SIGNATURE], defaults: { newMessageId: SIGNATURE.id, replyId: null } }),
+      )
+      expect(none.wrapper.find('#compose-body img[src]').exists()).toBe(false)
+      expect(blocks(none.wrapper).slice(0, 2)).toEqual(['', '[인용]'])
+      expect(none.wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 넣지 않음')
+    })
+
+    it('서명을 못 받아도 서명 없이 연다 — 알리지 않고, [서명 ▾]를 열 때 다시 받아 본다', async () => {
+      let failing = true
+      const { wrapper, requests } = await mountCompose(
         '/mail/compose',
-        server({ extra: (request) => (request.url === '/mail-signature' ? fail(503, 'MAIL_001') : undefined) }),
+        server({
+          signatures: [SIGNATURE],
+          extra: (request) => (failing && request.url === '/mail-signatures' ? fail(503, 'MAIL_001') : undefined),
+        }),
       )
       expect(wrapper.get('#compose-body').text()).toBe('')
       expect(useToastStore().toasts).toEqual([])
+
+      failing = false
+      await wrapper.get('#compose-signature').trigger('click')
+      await flushPromises()
+      expect(requests.filter((request) => request.url === '/mail-signatures')).toHaveLength(2)
+      expect(menuItems(wrapper).map((item) => item.text())).toEqual(['대외', '넣지 않음', '서명 관리'])
+    })
+
+    describe('[서명 ▾] — 쓰기 화면에서 서명 바꾸기 (디자인 원본 Signature16 6)', () => {
+      const BOTH = { signatures: [SIGNATURE, INSIDE], defaults: { newMessageId: SIGNATURE.id, replyId: INSIDE.id } }
+
+      it('메뉴 — 서명(만든 차례) · 넣지 않음 · 가는 선 · 서명 관리, 지금 든 서명에 ✓. 키보드로 열면 첫 항목, Esc 는 단추로', async () => {
+        const { wrapper } = await mountCompose('/mail/compose', server(BOTH), [], true)
+        const button = wrapper.get('#compose-signature')
+        expect(button.attributes('aria-haspopup')).toBe('menu')
+        expect(button.attributes('aria-expanded')).toBe('false')
+
+        ;(button.element as HTMLButtonElement).focus()
+        await button.trigger('keydown', { key: 'ArrowDown' })
+        await flushPromises()
+        expect(button.attributes('aria-expanded')).toBe('true')
+        expect(wrapper.get('.compose-signature__menu').attributes('aria-label')).toBe('서명')
+        expect(
+          menuItems(wrapper).map((item) => [item.text(), item.attributes('role'), item.attributes('aria-checked')]),
+        ).toEqual([
+          ['대외', 'menuitemradio', 'true'],
+          ['사내', 'menuitemradio', 'false'],
+          ['넣지 않음', 'menuitemradio', 'false'],
+          ['서명 관리', 'menuitem', undefined],
+        ])
+        expect(wrapper.find('.compose-signature__menu hr').exists()).toBe(true)
+        expect(document.activeElement?.textContent?.trim()).toBe('대외')
+
+        await wrapper.get('.compose-signature__menu').trigger('keydown', { key: 'Escape' })
+        await flushPromises()
+        expect(wrapper.find('.compose-signature__menu').exists()).toBe(false)
+        expect(document.activeElement?.id).toBe('compose-signature')
+      })
+
+      it('다른 서명을 고르면 서명 자리만 바뀐다 — 쓴 글은 그대로, 화면 낭독기에 알리고(알림 없음) 실행 취소로 되돌린다', async () => {
+        const { wrapper, requests } = await mountCompose('/mail/compose', server(BOTH))
+        editorOf(wrapper.element).commands.insertContentAt(1, '도윤님, 안녕하세요.')
+        await flushPromises()
+
+        await pickSignature(wrapper, '사내')
+        expect(blocks(wrapper)).toEqual(['도윤님, 안녕하세요.', '', '[서명:김아라 · 인프라팀내선 1234]', ''])
+        expect(signatureStatus(wrapper)).toBe('서명을 ‘사내’로 바꿨습니다.')
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 사내')
+        expect(useToastStore().toasts).toEqual([])
+        // 바꾼 서명도 바꿈이다 — 임시 저장한다
+        await wait(3_000)
+        expect(draftCalls(requests)).toHaveLength(1)
+
+        editorOf(wrapper.element).commands.undo()
+        await flushPromises()
+        expect(blocks(wrapper)).toEqual(['도윤님, 안녕하세요.', '', '[서명:김아라 · 인프라팀]', ''])
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 대외')
+      })
+
+      it('넣지 않음 — 서명 자리와 그 앞의 빈 줄을 빼고, 다시 고르면 처음 넣는 자리(본문 끝)에 넣는다', async () => {
+        const { wrapper } = await mountCompose('/mail/compose', server(BOTH))
+        editorOf(wrapper.element).commands.insertContentAt(1, '안녕하세요.')
+        await flushPromises()
+
+        await pickSignature(wrapper, '넣지 않음')
+        expect(blocks(wrapper)).toEqual(['안녕하세요.', ''])
+        expect(signatureStatus(wrapper)).toBe('서명을 ‘넣지 않음’으로 바꿨습니다.')
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 넣지 않음')
+
+        await pickSignature(wrapper, '사내')
+        expect(blocks(wrapper)).toEqual(['안녕하세요.', '', '[서명:김아라 · 인프라팀내선 1234]', ''])
+      })
+
+      it('답장은 인용 위의 서명 자리만 바뀐다', async () => {
+        const { wrapper } = await mountCompose('/mail/compose?replyTo=m1', server(BOTH))
+        await pickSignature(wrapper, '대외')
+        expect(blocks(wrapper).slice(0, 4)).toEqual(['', '', '[서명:김아라 · 인프라팀]', '[인용]'])
+        await pickSignature(wrapper, '넣지 않음')
+        expect(blocks(wrapper).slice(0, 2)).toEqual(['', '[인용]'])
+        await pickSignature(wrapper, '사내')
+        expect(blocks(wrapper).slice(0, 4)).toEqual(['', '', '[서명:김아라 · 인프라팀내선 1234]', '[인용]'])
+      })
+
+      it('서명 안을 고치면 어느 서명과도 같지 않다 — ✓ 없이, 단추는 "서명"만. 고르면 고친 것도 새 서명으로 바뀐다', async () => {
+        const { wrapper } = await mountCompose('/mail/compose', server(BOTH))
+        const editor = editorOf(wrapper.element)
+        let inside = -1
+        editor.state.doc.descendants((node, pos) => {
+          if (inside < 0 && node.isText && node.text === '김아라') inside = pos
+        })
+        editor.commands.insertContentAt(inside, '대표 ')
+        await flushPromises()
+
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명')
+        await wrapper.get('#compose-signature').trigger('click')
+        await flushPromises()
+        expect(menuItems(wrapper).map((item) => item.attributes('aria-checked'))).toEqual(['false', 'false', 'false', undefined])
+        await menuItems(wrapper)[0]?.trigger('click')
+        await flushPromises()
+        expect(blocks(wrapper)).toEqual(['', '', '[서명:김아라 · 인프라팀]', ''])
+      })
+
+      it('이어 쓰는 임시 저장본 — 서명 자리를 다시 찾아 같은 서명이면 ✓, 바꾸면 그 자리만 바뀐다 (서명을 다시 넣지 않는다)', async () => {
+        const saved: Draft = {
+          id: 'd9',
+          to: [],
+          cc: [],
+          bcc: [],
+          subject: '견적',
+          body: '확인했습니다.\n\n김아라 · 인프라팀\n내선 1234',
+          // 서버가 정화한 저장본 — 감싸개 · 빈 문단 뒤의 속성 없는 div (data-* 없음)
+          bodyHtml:
+            '<div style="font-family: \'Malgun Gothic\', sans-serif; font-size: 14px; line-height: 1.75">' +
+            '<p style="margin: 0">확인했습니다.</p><p style="margin: 0"><br /></p>' +
+            '<div><p style="margin: 0"><strong>김아라</strong> · 인프라팀</p><p style="margin: 0">내선 1234</p></div></div>',
+          attachments: [],
+          inReplyTo: null,
+          updatedAt: '2026-10-26T01:00:00Z',
+        }
+        const { wrapper } = await mountCompose('/mail/compose?draft=d9', server({ ...BOTH, draft: saved }))
+
+        expect(blocks(wrapper)).toEqual(['확인했습니다.', '', '[서명:김아라 · 인프라팀내선 1234]'])
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 사내')
+        await pickSignature(wrapper, '대외')
+        expect(blocks(wrapper)).toEqual(['확인했습니다.', '', '[서명:김아라 · 인프라팀]', ''])
+      })
+
+      it('서명 위 빈 줄에 글을 써도 빈 줄을 다시 두어 저장 · 다시 열기에서 서명 자리를 찾는다 (리뷰 M3)', async () => {
+        // 같은 서버 — 저장한 판을 기억했다가 다시 열 때 내준다
+        const handler = server(BOTH)
+        const first = await mountCompose('/mail/compose', handler)
+        const editor = editorOf(first.wrapper.element)
+        // 쓸 줄은 비우고 서명 바로 위 빈 줄(둘째 줄)에 쓴다
+        editor.commands.insertContentAt(editor.state.doc.child(0).nodeSize + 1, '감사합니다.')
+        await flushPromises()
+        expect(blocks(first.wrapper)).toEqual(['', '감사합니다.', '', '[서명:김아라 · 인프라팀]', ''])
+
+        await wait(3_000)
+        const saved = draftCalls(first.requests)[0]
+        expect(saved?.method).toBe('POST')
+        expect((saved?.data as { bodyHtml: string }).bodyHtml).toContain(
+          '<p style="margin: 0">감사합니다.</p><p style="margin: 0"><br></p><div>',
+        )
+        first.wrapper.unmount()
+
+        // 저장한 판을 다시 연다 — 서명 자리를 찾고 그 서명에 ✓
+        const { wrapper } = await mountCompose('/mail/compose?draft=d1', handler)
+        expect(blocks(wrapper).slice(0, 4)).toEqual(['', '감사합니다.', '', '[서명:김아라 · 인프라팀]'])
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 대외')
+      })
+
+      it('Backspace 로 서명 위 빈 줄을 지워도 빈 줄을 다시 두어 저장 · 다시 열기에서 서명 자리를 찾는다 (리뷰 M3)', async () => {
+        const handler = server(BOTH)
+        const first = await mountCompose('/mail/compose', handler)
+        const editor = editorOf(first.wrapper.element)
+        editor.commands.insertContentAt(1, '안녕하세요.')
+        // 서명 바로 위 빈 줄(둘째 줄)에서 Backspace
+        const blankLine = editor.state.doc.child(0).nodeSize + 1
+        editor.commands.setTextSelection(blankLine)
+        editor.commands.keyboardShortcut('Backspace')
+        await flushPromises()
+        expect(blocks(first.wrapper).slice(0, 3)).toEqual(['안녕하세요.', '', '[서명:김아라 · 인프라팀]'])
+
+        await wait(3_000)
+        expect(draftCalls(first.requests)).toHaveLength(1)
+        first.wrapper.unmount()
+
+        const { wrapper } = await mountCompose('/mail/compose?draft=d1', handler)
+        expect(blocks(wrapper).slice(0, 3)).toEqual(['안녕하세요.', '', '[서명:김아라 · 인프라팀]'])
+        expect(wrapper.get('#compose-signature').attributes('aria-label')).toBe('서명: 대외')
+      })
+
+      it('서명 관리 — 설정 › 메일 › 서명으로 간다 (바꾼 것이 없으면 묻지 않는다)', async () => {
+        const { wrapper, router } = await mountCompose('/mail/compose', server(BOTH))
+        await pickSignature(wrapper, '서명 관리')
+        expect(router.currentRoute.value.name).toBe('settings-mail-signature')
+      })
     })
   })
 })
diff --git a/frontend/src/pages/mail/ComposePage.vue b/frontend/src/pages/mail/ComposePage.vue
index 5d921e1..7145f9f 100644
--- a/frontend/src/pages/mail/ComposePage.vue
+++ b/frontend/src/pages/mail/ComposePage.vue
@@ -6,6 +6,11 @@
 // 받는 사람을 채운 새 메일(8단계 — 주소록의 [메일 쓰기] · 주소 링크 · [그룹에 메일 쓰기]): 주소는 URL 이 아니라 라우터 상태로 온다(compose-prefill.ts).
 //   채운 받는 사람은 "바꿈"이 아니다(답장처럼 — 손대지 않고 닫으면 저장하지 않는다). 초점은 제목으로 (받는 사람은 이미 있다)
 // 서명: 열 때 설정의 서명을 보통 글로 넣어 둔다 — 새 메일은 본문 끝(빈 줄 하나 뒤), 답장 · 전달은 인용 위 (디자인 README "2단계 › 서명").
+// 16단계(여러 서명 — 디자인 원본 Signature16 6): 넣는 서명은 "메일에 넣을 서명"의 새 메일 · 답장과 전달 기본이고, 서명 자리(빈 줄 뒤의 서명 덩어리 —
+//   앱과 같은 경계, mail-signature-block.ts)로 넣는다. 아래 단추 줄 [임시 저장] 다음의 [서명 ▾](ComposeSignatureMenu)로 그 자리만 다른 서명 · 넣지 않음으로
+//   바꾼다(쓴 글 · 인용 · 첨부는 그대로, 실행 취소로 되돌린다) — 바꾸면 화면 낭독기에 "서명을 ‘사내’로 바꿨습니다."(알림 없음).
+//   어느 서명이 들었는지는 서명 자리의 글 · 그림을 저장한 서명과 견준다(이어 쓰는 저장본도 — 고쳤으면 ✓ 없이). 서명 관리는 설정 › 메일 › 서명으로(나가기 규칙대로).
+//   받는 사람에 따라 저절로 바꾸지 않는다.
 // 임시 저장 (계약 2절 "임시 저장" · 디자인 README "2단계 › 임시 저장", useDraftSaving):
 // - 바꾼 내용이 있으면 입력이 3초 멈출 때(10초에 한 번까지 — 쉬지 않고 쓰면 처음 바꾼 뒤 30초에) · 「임시 저장」을 누를 때 ·
 //   화면을 떠날 때 저장한다. 상태는 아래 단추 줄에.
@@ -71,6 +76,7 @@ import ComposeFooter from '@/components/mail/ComposeFooter.vue'
 import ComposeHeader from '@/components/mail/ComposeHeader.vue'
 import ComposeLeaveDialog from '@/components/mail/ComposeLeaveDialog.vue'
 import ComposeScheduleDialog from '@/components/mail/ComposeScheduleDialog.vue'
+import ComposeSignatureMenu from '@/components/mail/ComposeSignatureMenu.vue'
 import RecipientField from '@/components/mail/RecipientField.vue'
 import {
   MAIL_EDITOR_RETRY,
@@ -106,8 +112,11 @@ import {
 import { IMAGE_AS_ATTACHMENT_MESSAGE } from '@/shared/constants/mail-editor'
 import { SEND_LATER_TEXT, UNDO_SEND_DEADLINE_MARGIN_MS } from '@/shared/constants/mail-send-later'
 import { UNDO_SEND_OPTIONS } from '@/shared/constants/mail-settings'
+import { COMPOSE_SIGNATURE_TEXT } from '@/shared/constants/mail-signature'
+import { SETTINGS_ROUTES } from '@/shared/constants/settings-menu'
 import type { ErrorCode } from '@/shared/constants/error-codes.generated'
 import type { Draft, DraftPayload, SendMessagePayload, SentMessage } from '@/shared/types/mail'
+import type { ComposeSignatureState } from '@/shared/types/mail-signature'
 import {
   isSameComposeForm,
   snapshotComposeForm,
@@ -131,8 +140,9 @@ import {
 import { buildForwardDraft, isForwardSubject } from '@/shared/utils/mail-forward'
 import { textToParagraphHtml } from '@/shared/utils/mail-quote'
 import { buildReplyDraft } from '@/shared/utils/mail-reply'
+import { directionParticle } from '@/shared/utils/korean'
 import { partialSendMessage } from '@/shared/utils/mail-send-result'
-import { newMailHtmlWithSignature, signatureHtmlFor } from '@/shared/utils/mail-signature'
+import { newMailHtmlWithSignature, signatureBlockHtml, signatureHtmlOf } from '@/shared/utils/mail-signature'
 import { MAIL_SCHEDULED_ROUTE } from '@/shared/utils/mail-list-source'
 import { undoToastDeadline } from '@/shared/utils/pending-send'
 import { rejectedScheduleProblem, sendAtOf, type ScheduleRejection } from '@/shared/utils/schedule-send'
@@ -239,6 +249,12 @@ let focusBodyWhenReady = false
 const preparing = ref<boolean>(false)
 /** 새 메일에 넣을 서명을 기다리는 중 — 편집기를 서명과 함께 만든다 (받는 사람 · 제목은 그대로 쓸 수 있다) */
 const bodyPending = ref<boolean>(false)
+/** 본문에 든 서명 — [서명 ▾]의 ✓ · 단추의 화면 낭독 이름 (16단계 — 편집기가 준비되면 · 본문이 바뀔 때마다 다시 잰다) */
+const signatureState = ref<ComposeSignatureState>({ kind: 'none' })
+/** 서명을 바꾼 뒤 화면 낭독기에 읽어 줄 글 — "서명을 ‘사내’로 바꿨습니다." */
+const signatureAnnouncement = ref<string>('')
+/** 서명 HTML 마다의 비교 값 — 편집기 스키마로 한 번 읽어 둔다 (스키마는 편집기를 새로 만들어도 같다) */
+const signatureFingerprints = new Map<string, string>()
 /** 제목에 보이는 쓰기 종류 — 이어 쓰는 저장본은 불러온 뒤 답장 · 전달 · 새 메일 중 하나로 정한다 */
 const composeKind = ref<ComposeMode>('new')
 /** 발송 · 임시 저장의 inReplyTo — 답장할 메일 id (이어 쓰는 저장본은 저장본의 값) */
@@ -520,6 +536,8 @@ const recipientSuggestions = useRecipientSuggestions({
 })
 provide(RECIPIENT_SUGGESTIONS, recipientSuggestions)
 recipientSuggestions.preload()
+// [서명 ▾]의 목록 · 이어 쓰는 저장본의 서명 견주기 — 메일 화면이 받아 두었으면 그대로 (새 메일 · 답장은 받은 뒤 서명을 넣는다)
+void signatureStore.ensureLoaded()
 
 function commitRecipientInputs() {
   toField.value?.commit()
@@ -637,33 +655,32 @@ function resetForm(next: ComposeSource, sourceId: string | null) {
 
 let prepareSeq = 0
 
-/** 새 메일 — 서명을 받은 뒤 편집기를 만든다 (받는 사람 · 제목은 그동안에도 쓸 수 있다) */
+/** 새 메일 — 서명을 받은 뒤 편집기를 만든다 (받는 사람 · 제목은 그동안에도 쓸 수 있다). 넣는 서명은 새 메일 기본 (못 받았으면 넣지 않는다) */
 async function prepareNew() {
   prepareSeq += 1
   const seq = prepareSeq
   bodyPending.value = true
-  const signature = signatureHtmlFor(await signatureStore.ensureSignature(), 'new')
+  await signatureStore.ensureLoaded()
   if (seq !== prepareSeq) return
+  const signature = signatureHtmlOf(signatureStore.defaultSignature('new'))
   if (signature) draftHtml.value = newMailHtmlWithSignature(signature)
   bodyPending.value = false
 }
 
-/** 답장·전달 — 원본 메일과 서명을 불러와 양식을 채운다 */
+/** 답장·전달 — 원본 메일과 서명을 불러와 양식을 채운다. 넣는 서명은 답장과 전달 기본 */
 async function prepareFrom(messageId: string, sourceMode: Exclude<ComposeMode, 'new'>) {
   prepareSeq += 1
   const seq = prepareSeq
   preparing.value = true
   try {
-    const [original, signature] = await Promise.all([
-      getMessage(messageId),
-      signatureStore.ensureSignature(),
-    ])
+    const [original] = await Promise.all([getMessage(messageId), signatureStore.ensureLoaded()])
     if (seq !== prepareSeq) return
-    const signatureHtml = signatureHtmlFor(signature, 'reply')
+    const signatureHtml = signatureHtmlOf(signatureStore.defaultSignature('reply'))
+    const signatureBlock = signatureHtml ? signatureBlockHtml(signatureHtml) : null
     /** 처음 채운 원본 첨부 — 불러오는 동안 사용자가 붙인 파일(창에 끌어다 놓기 등)은 여기 들지 않는다 ("바꿈"으로 남는다) */
     let filledAttachments: readonly number[] = []
     if (sourceMode === 'forward') {
-      const draft = buildForwardDraft(original, undefined, signatureHtml)
+      const draft = buildForwardDraft(original, undefined, signatureBlock)
       subject.value = draft.subject
       draftHtml.value = draft.html
       // 원본 첨부는 다시 올리지 않고 id 를 그대로 보낸다 — 목록에서 하나씩 뺄 수 있다
@@ -671,7 +688,7 @@ async function prepareFrom(messageId: string, sourceMode: Exclude<ComposeMode, '
         .filter((item) => item.status === 'done')
         .map((item) => item.key)
     } else {
-      const draft = buildReplyDraft(original, authStore.user?.email ?? '', sourceMode, undefined, signatureHtml)
+      const draft = buildReplyDraft(original, authStore.user?.email ?? '', sourceMode, undefined, signatureBlock)
       to.value = draft.to.map(tokenFromAddress)
       cc.value = draft.cc.map(tokenFromAddress)
       showCopies.value = cc.value.length > 0
@@ -761,6 +778,7 @@ function isFocusFree(): boolean {
 function onEditorReady() {
   editorReady.value = true
   bodyChanged.value = false
+  refreshSignatureState()
   if (!focusBodyWhenReady) return
   focusBodyWhenReady = false
   void nextTick(() => {
@@ -1094,13 +1112,72 @@ function clearLengthError(field: 'subject' | 'body') {
   if (lengthError.value === field) lengthError.value = null
 }
 
-/** 본문이 바뀌었다 — 길이 안내를 내리고, 저장한 때와 다른지 다시 잰 뒤 자동 저장 차례를 잡는다 */
+/** 본문이 바뀌었다 — 길이 안내를 내리고, 저장한 때와 다른지 다시 잰 뒤 자동 저장 차례를 잡는다. 든 서명도 다시 잰다 */
 function onEditorChange() {
   clearLengthError('body')
   bodyChanged.value = editorRef.value?.isChanged() ?? false
+  refreshSignatureState()
   drafts.touch()
 }
 
+/** 서명 HTML 의 비교 값 — 서명마다 한 번 편집기 스키마로 읽는다 */
+function signatureFingerprintOf(editor: MailEditorHandle, html: string): string {
+  let fingerprint = signatureFingerprints.get(html)
+  if (fingerprint === undefined) {
+    fingerprint = editor.signatureFingerprint(html)
+    signatureFingerprints.set(html, fingerprint)
+  }
+  return fingerprint
+}
+
+/**
+ * 본문에 든 서명을 다시 잰다 — 서명 자리가 없으면 넣지 않음, 있으면 글 · 그림이 같은 서명(만든 차례로 먼저 맞는 것),
+ * 어느 서명과도 같지 않으면(그 메일에서 고쳤거나 지운 서명) ✓ 없이 (디자인 원본 Signature16 "서명 자리")
+ */
+function refreshSignatureState() {
+  const editor = editorRef.value
+  if (!editor || !editorReady.value) return
+  const place = editor.signaturePlace()
+  if (place === null) {
+    signatureState.value = { kind: 'none' }
+    return
+  }
+  const match = signatureStore.signatures.find((signature) => {
+    const html = signatureHtmlOf(signature)
+    return html !== null && signatureFingerprintOf(editor, html) === place
+  })
+  signatureState.value = match ? { kind: 'signature', id: match.id } : { kind: 'edited' }
+}
+
+/** [서명 ▾]를 열었다 — 서명을 받지 못했으면 다시 받아 본다 (받으면 목록이 채워진다) */
+function onSignatureMenuOpen() {
+  void signatureStore.ensureLoaded()
+}
+
+/**
+ * [서명 ▾]에서 골랐다 — 본문의 서명 자리만 그 서명으로(넣지 않음은 서명 자리와 그 앞의 빈 줄을 뺀다).
+ * 서명 자리가 없으면 처음 넣는 자리(새 메일은 본문 끝, 답장 · 전달은 인용 위)에. 바꾼 뒤 화면 낭독기에만 알린다
+ */
+async function onPickSignature(id: string | null) {
+  const editor = editorRef.value
+  if (!editor || !editorReady.value) return
+  const signature = signatureStore.signatureById(id)
+  // 그사이 다른 창에서 지운 서명이면 바꾸지 않는다
+  if (id !== null && !signature) return
+  editor.replaceSignature(signatureHtmlOf(signature))
+  refreshSignatureState()
+  const name = signature?.name ?? COMPOSE_SIGNATURE_TEXT.none
+  // 같은 글이어도 다시 읽게 비웠다가 넣는다
+  signatureAnnouncement.value = ''
+  await nextTick()
+  signatureAnnouncement.value = COMPOSE_SIGNATURE_TEXT.changed(name, directionParticle(name))
+}
+
+/** 서명 관리 — 설정 › 메일 › 서명으로. 쓰던 메일은 나가기 규칙대로 먼저 임시 저장한다 (저장하지 못했을 때만 묻는다) */
+function onManageSignatures() {
+  void router.push({ name: SETTINGS_ROUTES.signature })
+}
+
 function pickFiles() {
   fileInputRef.value?.click()
 }
@@ -1173,6 +1250,12 @@ watch([sendable, () => authStore.generation], ([can], [, previousSession]) => {
 watch(hasMissingLarge, (missing) => {
   if (!missing) drafts.touch()
 })
+
+// 서명을 (다시) 받았다 — [서명 ▾]의 ✓ 를 다시 잰다
+watch(
+  () => signatureStore.signatures,
+  () => refreshSignatureState(),
+)
 </script>
 
 <template>
@@ -1349,7 +1432,19 @@ watch(hasMissingLarge, (missing) => {
         :sender="sender"
         @save-draft="onSaveDraft"
         @schedule="openSchedule"
-      />
+      >
+        <template #signature>
+          <ComposeSignatureMenu
+            :signatures="signatureStore.signatures"
+            :state="signatureState"
+            :disabled="!editorReady || preparing || bodyPending || sending || discarding"
+            :announcement="signatureAnnouncement"
+            @open="onSignatureMenuOpen"
+            @select="onPickSignature"
+            @manage="onManageSignatures"
+          />
+        </template>
+      </ComposeFooter>
     </form>
 
     <!-- 예약 발송 창 (9단계) — [예약]이면 보내기와 같은 흐름에 sendAt 을 더한다 -->
diff --git a/frontend/src/pages/mail/MailLayout.vue b/frontend/src/pages/mail/MailLayout.vue
index 3a77a8b..d5915c9 100644
--- a/frontend/src/pages/mail/MailLayout.vue
+++ b/frontend/src/pages/mail/MailLayout.vue
@@ -40,8 +40,8 @@ provide(MAIL_CONTACT_DIALOG, createMailContactDialog())
 void mailStore.ensureMailboxes()
 // 패널 하단 사용량과 쓰기 화면의 첨부 한도(attachmentMaxBytes)
 void mailStore.ensureQuota()
-// 쓰기 화면이 열 때 넣을 서명 — 미리 받아 두면 편집기가 기다리지 않는다 (못 받으면 서명 없이 연다)
-void useMailSignatureStore().ensureSignature()
+// 쓰기 화면이 열 때 넣을 서명 · [서명 ▾]의 목록 — 서명 목록과 기본 둘(16단계)을 미리 받아 두면 편집기가 기다리지 않는다 (못 받으면 서명 없이 연다)
+void useMailSignatureStore().ensureLoaded()
 // 메일함 패널 아래의 부재중 안내 — 못 받으면 알리지 않고 그리지 않는다 (지난 값은 둔다)
 void useMailVacationStore().load()
 // 패널의 「예약됨」 — 예약한 메일이 있을 때만 그린다
diff --git a/frontend/src/pages/settings/AccountTwoFactorPage.replace.spec.ts b/frontend/src/pages/settings/AccountTwoFactorPage.replace.spec.ts
new file mode 100644
index 0000000..e6f7d1a
--- /dev/null
+++ b/frontend/src/pages/settings/AccountTwoFactorPage.replace.spec.ts
@@ -0,0 +1,618 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { TWO_FACTOR_CHANGE_TIMEOUT_MS } from '@/shared/constants/account-security'
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { TwoFactorEnrollment, TwoFactorStatus } from '@/shared/types/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import { useToastStore } from '@/stores/toast.store'
+import { useTwoFactorStore } from '@/stores/two-factor.store'
+import { fail, flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest, type MockResult } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import AccountTwoFactorPage from './AccountTwoFactorPage.vue'
+
+// 설정 › 계정 › 2단계 인증 — 휴대폰 바꾸기 (16단계 — 디자인 원본 Settings16 5~8 · 계약 5절 "2단계 인증")
+// ① 새 휴대폰 등록(QR · 키 · 새 휴대폰의 코드 → [다음]) ② 지금 휴대폰으로 확인(지금 휴대폰의 코드 · 지금 비밀번호 → [바꾸기])
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const ON: TwoFactorStatus = { isEnabled: true, enabledAt: '2026-10-31T00:12:00.000Z' }
+const OFF: TwoFactorStatus = { isEnabled: false, enabledAt: null }
+const PASSWORD = 'old-pass-1234'
+const DONE = '2단계 인증 휴대폰을 바꿨습니다. 이제 새 휴대폰의 코드로 로그인합니다.'
+const UNCONFIRMED =
+  '휴대폰을 바꿨는지 확인하지 못했습니다. 지금 휴대폰에 다음 코드가 뜨면 넣고 [바꾸기]를 다시 눌러 주세요. 코드가 맞지 않다고 나오면 이미 바뀌었을 수 있으니, 다음에 로그인할 때 새 휴대폰의 코드를 넣어 주세요.'
+const UNCONFIRMED_CLOSED =
+  '휴대폰을 바꿨는지 확인하지 못했습니다. 다음에 로그인할 때 새 휴대폰의 코드가 맞지 않으면 지금 휴대폰의 코드를 넣어 주세요.'
+const SUPPORT = '지금 휴대폰을 쓸 수 없나요? 관리자에게 2단계 인증을 풀어 달라고 요청한 뒤, 새 휴대폰으로 다시 켜 주세요.'
+
+function enrollment(seq: number): TwoFactorEnrollment {
+  const secret = seq === 1 ? 'R4WN6HMQT2XBZK7DPL3FJC5YVQ2GNEA6' : 'K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS'
+  return {
+    enrollmentId: `enroll-${seq}`,
+    secret,
+    otpauthUrl: `otpauth://totp/ARA%20SYSTEM:ara.kim%40arasystem.it.kr?secret=${secret}&issuer=ARA%20SYSTEM&algorithm=SHA1&digits=6&period=30`,
+    expiresAt: '2026-11-10T00:22:00.000Z',
+  }
+}
+
+type Handler = (request: MockRequest) => MockResult | Promise<MockResult>
+
+interface Server {
+  status?: () => MockResult
+  verify?: Handler
+  replace?: Handler
+  supportContact?: () => MockResult
+}
+
+/** 응답을 손으로 풀어 주는 요청 — 보내는 동안의 모양을 본다 */
+function held() {
+  const replies: ((result: MockResult) => void)[] = []
+  const handler: Handler = () =>
+    new Promise<MockResult>((resolve) => {
+      replies.push(resolve)
+    })
+  return { handler, replies }
+}
+
+describe('AccountTwoFactorPage — 휴대폰 바꾸기 (16단계)', () => {
+  let pinia: Pinia
+  let requests: MockRequest[]
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    useAuthStore().markAuthenticated(USER)
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) {
+      if (!wrapper.vm.$.isUnmounted) wrapper.unmount()
+    }
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  async function mountPage(server: Server = {}) {
+    let enrollSeq = 0
+    requests = installMockApi((request) => {
+      if (request.url === '/two-factor') return server.status ? server.status() : ok(ON)
+      if (request.url === '/two-factor/enrollments') {
+        enrollSeq += 1
+        return ok(enrollment(enrollSeq), 201)
+      }
+      if (/^\/two-factor\/enrollments\/[^/]+\/verification$/.test(request.url)) {
+        return server.verify ? server.verify(request) : ok({ verified: true })
+      }
+      if (request.url === '/two-factor/replacements') return server.replace ? server.replace(request) : ok(ON)
+      if (request.url === '/support-contact') return server.supportContact ? server.supportContact() : ok({ text: null })
+      return ok(null)
+    })
+    const router = createTestRouter()
+    await router.push('/settings/account/two-factor')
+    await router.isReady()
+    const wrapper = mount(AccountTwoFactorPage, { attachTo: document.body, global: { plugins: [pinia, router] } })
+    mounted.push(wrapper)
+    await flushPromises()
+    return wrapper
+  }
+
+  const calls = (pattern: string | RegExp) =>
+    requests.filter((request) => (typeof pattern === 'string' ? request.url === pattern : pattern.test(request.url)))
+  const verifyCalls = () => calls(/\/verification$/)
+  const toastMessages = () => useToastStore().toasts.map((toast) => toast.message)
+  const dialog = () => document.querySelector<HTMLDialogElement>('dialog[aria-labelledby="two-factor-replace-title"]')
+  const inDialog = <T extends Element = HTMLElement>(selector: string) => dialog()?.querySelector<T>(selector) ?? null
+  const inputValue = (id: string) => (document.getElementById(id) as HTMLInputElement | null)?.value
+  const stepItems = () =>
+    Array.from(inDialog('[data-replace-steps]')?.querySelectorAll('li') ?? []).map((item) => ({
+      text: item.textContent?.trim() ?? '',
+      current: item.getAttribute('aria-current'),
+      done: item.querySelector('svg') !== null && !item.hasAttribute('aria-hidden'),
+    }))
+
+  async function openReplace(wrapper: VueWrapper) {
+    await wrapper.get('[data-two-factor-replace]').trigger('click')
+    await flushPromises()
+  }
+
+  async function next(wrapper: VueWrapper, code: string) {
+    await wrapper.get('#two-factor-replace-new-code').setValue(code)
+    await wrapper.get('[data-replace-next]').trigger('click')
+    await flushPromises()
+  }
+
+  async function fillCurrent(wrapper: VueWrapper, values: { code?: string; password?: string }) {
+    if (values.code !== undefined) await wrapper.get('#two-factor-replace-current-code').setValue(values.code)
+    if (values.password !== undefined) await wrapper.get('#two-factor-replace-password').setValue(values.password)
+  }
+
+  async function submit(wrapper: VueWrapper) {
+    await wrapper.get('[data-replace-submit]').trigger('click')
+    await flushPromises()
+  }
+
+  /** ②까지 — 새 휴대폰의 코드를 확인했다 */
+  async function toCurrentStep(wrapper: VueWrapper) {
+    await openReplace(wrapper)
+    await next(wrapper, '482913')
+  }
+
+  describe('① 새 휴대폰 등록', () => {
+    it('[휴대폰 바꾸기]를 누르면 창 — 켜진 채 새 키를 받고, 차례 · 글 · QR · 키는 바꾸기 글로, 처음 초점은 새 휴대폰의 코드 칸', async () => {
+      const wrapper = await mountPage()
+      await openReplace(wrapper)
+
+      expect(dialog()?.hasAttribute('open')).toBe(true)
+      expect(dialog()?.getAttribute('aria-describedby')).toBe('two-factor-replace-message')
+      expect(calls('/two-factor/enrollments').map((request) => request.method)).toEqual(['POST'])
+      expect(inDialog('#two-factor-replace-title')?.textContent?.trim()).toBe('2단계 인증 휴대폰 바꾸기')
+      expect(inDialog('[data-replace-steps]')?.getAttribute('aria-label')).toBe('휴대폰 바꾸기 차례')
+      expect(stepItems()).toEqual([
+        { text: '새 휴대폰 등록', current: 'step', done: false },
+        { text: '', current: null, done: false },
+        { text: '지금 휴대폰으로 확인', current: null, done: false },
+      ])
+      expect(inDialog('#two-factor-replace-message')?.textContent?.trim()).toBe(
+        '새 휴대폰을 등록하고 지금 휴대폰으로 확인하면 바뀝니다. 바꾸기를 마칠 때까지는 지금 휴대폰의 코드로 로그인합니다.',
+      )
+      const text = dialog()?.textContent ?? ''
+      expect(text).toContain('새 휴대폰의 인증 앱으로 QR 코드를 찍어 주세요')
+      expect(text).toContain('인증 앱에서 [+] → [QR 코드 스캔]을 고른 뒤 이 그림을 찍어 주세요.')
+      expect(text).toContain('앱에는 ‘ARA SYSTEM (ara.kim@arasystem.it.kr)’로 저장됩니다.')
+      expect(text).toContain('바꾸지 않고 닫으면 이 키는 더 쓸 수 없습니다. 새 휴대폰의 인증 앱에 먼저 추가했다면 앱에서 그 계정을 지워 주세요.')
+      expect(inDialog('[data-qr-code]')?.getAttribute('aria-label')).toBe('인증 앱에 등록할 QR 코드')
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('R4WN6HMQT2XBZK7DPL3FJC5YVQ2GNEA6')
+      expect(document.querySelector('label[for="two-factor-replace-new-code"]')?.textContent).toBe('새 휴대폰의 앱에 표시된 6자리 코드')
+      expect(document.activeElement?.id).toBe('two-factor-replace-new-code')
+      // 단추는 [다음] [취소]
+      expect(Array.from(dialog()?.querySelectorAll('.modal-dialog__actions button') ?? []).map((button) => button.textContent?.trim())).toEqual([
+        '다음',
+        '취소',
+      ])
+    })
+
+    it('키 이름 id 가 켜기 창과 겹치지 않는다 — [복사]는 바꾸기 창의 키 이름을 가리킨다', async () => {
+      const wrapper = await mountPage()
+      await openReplace(wrapper)
+
+      expect(document.querySelectorAll('#two-factor-key-label')).toHaveLength(1)
+      expect(document.querySelectorAll('#two-factor-replace-key-label')).toHaveLength(1)
+      expect(inDialog('[data-enable-copy]')?.getAttribute('aria-describedby')).toBe('two-factor-replace-key-label')
+    })
+
+    it('6자리가 아니면 보내지 않고 칸 아래에 AUTH_007 문구 · 그 칸에 초점', async () => {
+      const wrapper = await mountPage()
+      await openReplace(wrapper)
+      await next(wrapper, '12')
+
+      expect(verifyCalls()).toEqual([])
+      expect(wrapper.get('#two-factor-replace-new-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_007)
+      expect(document.activeElement?.id).toBe('two-factor-replace-new-code')
+    })
+
+    it('[다음]은 새 휴대폰의 코드를 먼저 확인한다 — 확인하는 동안 「확인하는 중…」(aria-busy · aria-disabled), 다시 눌러도 요청은 하나', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ verify: handler })
+      await openReplace(wrapper)
+      await next(wrapper, '482913')
+
+      expect(verifyCalls().map((request) => [request.method, request.url, request.data])).toEqual([
+        ['POST', '/two-factor/enrollments/enroll-1/verification', { otpCode: '482913' }],
+      ])
+      const button = wrapper.get('[data-replace-next]')
+      expect(button.text()).toBe('확인하는 중…')
+      expect(button.attributes()).toMatchObject({ 'aria-busy': 'true', 'aria-disabled': 'true' })
+      await button.trigger('click')
+      await flushPromises()
+      expect(verifyCalls()).toHaveLength(1)
+
+      replies[0]?.(ok({ verified: true }))
+      await flushPromises()
+      expect(wrapper.find('[data-replace-step="current"]').exists()).toBe(true)
+    })
+
+    it('새 휴대폰의 코드가 틀리면(AUTH_006) 칸 아래 · 칸을 비우고 초점 — QR · 키는 그대로, 알림 없음', async () => {
+      const wrapper = await mountPage({ verify: () => fail(400, 'AUTH_006') })
+      await openReplace(wrapper)
+      await next(wrapper, '000111')
+
+      expect(wrapper.get('#two-factor-replace-new-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+      expect(inputValue('two-factor-replace-new-code')).toBe('')
+      expect(document.activeElement?.id).toBe('two-factor-replace-new-code')
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('R4WN6HMQT2XBZK7DPL3FJC5YVQ2GNEA6')
+      expect(calls('/two-factor/enrollments')).toHaveLength(1)
+      expect(wrapper.find('[data-replace-step="current"]').exists()).toBe(false)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('AUTH_008(10분 지남 · 더 새 등록) — 창 위에 사전 문구, 새 키로 다시 그리고 코드는 비운다 · 처음 초점은 코드 칸', async () => {
+      const wrapper = await mountPage({ verify: () => fail(409, 'AUTH_008') })
+      await openReplace(wrapper)
+      await next(wrapper, '482913')
+      await flushPromises()
+
+      expect(calls('/two-factor')).toHaveLength(2)
+      expect(calls('/two-factor/enrollments')).toHaveLength(2)
+      const notice = wrapper.get('[data-replace-notice]')
+      expect(notice.text()).toBe(ERROR_CODE_MESSAGES.AUTH_008)
+      expect(notice.attributes('role')).toBe('alert')
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      expect(inputValue('two-factor-replace-new-code')).toBe('')
+      expect(document.activeElement?.id).toBe('two-factor-replace-new-code')
+      expect(dialog()?.hasAttribute('open')).toBe(true)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('코드 칸에서 Enter 도 [다음]과 같다', async () => {
+      const wrapper = await mountPage()
+      await openReplace(wrapper)
+      await wrapper.get('#two-factor-replace-new-code').setValue('482913')
+      await wrapper.get('#two-factor-replace-new-code').trigger('keydown', { key: 'Enter' })
+      await flushPromises()
+
+      expect(verifyCalls()).toHaveLength(1)
+      expect(wrapper.find('[data-replace-step="current"]').exists()).toBe(true)
+    })
+  })
+
+  describe('② 지금 휴대폰으로 확인', () => {
+    it('새 휴대폰을 확인하면 ② — 차례(마친 걸음 체크 · 지금 걸음) · 글 · 칸 둘 · 문의 줄 · [이전] [바꾸기] [취소], 처음 초점은 지금 휴대폰의 코드 칸', async () => {
+      const wrapper = await mountPage()
+      await toCurrentStep(wrapper)
+
+      expect(stepItems()).toEqual([
+        { text: '새 휴대폰 등록', current: null, done: true },
+        { text: '', current: null, done: false },
+        { text: '지금 휴대폰으로 확인', current: 'step', done: false },
+      ])
+      expect(inDialog('#two-factor-replace-message')?.textContent?.trim()).toBe(
+        '새 휴대폰을 확인했습니다. 지금 휴대폰의 코드와 비밀번호를 넣으면 바뀌고, 그 뒤로는 새 휴대폰의 코드로만 로그인합니다.',
+      )
+      expect(document.querySelector('label[for="two-factor-replace-current-code"]')?.textContent).toBe('지금 휴대폰의 앱에 표시된 6자리 코드')
+      expect(document.querySelector('label[for="two-factor-replace-password"]')?.textContent).toBe('지금 비밀번호')
+      expect(wrapper.get('#two-factor-replace-current-code').attributes()).toMatchObject({
+        inputmode: 'numeric',
+        autocomplete: 'one-time-code',
+      })
+      expect(wrapper.get('#two-factor-replace-password').attributes('autocomplete')).toBe('current-password')
+      // 연락처가 없으면 글만
+      expect(inDialog('[data-support-line]')?.textContent?.trim()).toBe(SUPPORT)
+      expect(inDialog('[data-support-contact]')).toBeNull()
+      // ①의 칸 · QR 은 없다
+      expect(inDialog('[data-qr-code]')).toBeNull()
+      expect(document.getElementById('two-factor-replace-new-code')).toBeNull()
+      expect(Array.from(dialog()?.querySelectorAll('.modal-dialog__actions button') ?? []).map((button) => button.textContent?.trim())).toEqual([
+        '이전',
+        '바꾸기',
+        '취소',
+      ])
+      expect(document.activeElement?.id).toBe('two-factor-replace-current-code')
+    })
+
+    it('문의 연락처가 있으면 물음 다음 줄에 연락처', async () => {
+      const wrapper = await mountPage({ supportContact: () => ok({ text: 'IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it' }) })
+      await toCurrentStep(wrapper)
+
+      expect(inDialog('[data-support-line]')?.textContent).toContain(SUPPORT)
+      expect(inDialog('[data-support-contact]')?.textContent).toBe('IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it')
+      expect(calls('/support-contact')).toHaveLength(1)
+    })
+
+    it('보내기 전에 본다 — 칸 차례(지금 코드 → 비밀번호): 코드가 6자리가 아니면 AUTH_007 문구, 비밀번호를 비우면 VAL_001 문구', async () => {
+      const wrapper = await mountPage()
+      await toCurrentStep(wrapper)
+
+      await submit(wrapper)
+      expect(calls('/two-factor/replacements')).toEqual([])
+      expect(wrapper.get('#two-factor-replace-current-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_007)
+      expect(document.activeElement?.id).toBe('two-factor-replace-current-code')
+
+      await fillCurrent(wrapper, { code: '135 790' })
+      await submit(wrapper)
+      expect(calls('/two-factor/replacements')).toEqual([])
+      expect(wrapper.find('#two-factor-replace-current-code-error').exists()).toBe(false)
+      expect(wrapper.get('#two-factor-replace-password-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+      expect(document.activeElement?.id).toBe('two-factor-replace-password')
+    })
+
+    it('[바꾸기] — POST /two-factor/replacements { enrollmentId, currentOtpCode, currentPassword } · 30초, 창을 닫고 알림 · 화면은 그대로 · 초점은 [휴대폰 바꾸기]', async () => {
+      const wrapper = await mountPage()
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+
+      expect(calls('/two-factor/replacements').map((request) => request.data)).toEqual([
+        { enrollmentId: 'enroll-1', currentOtpCode: '135790', currentPassword: PASSWORD },
+      ])
+      expect(calls('/two-factor/replacements')[0]?.config.timeout).toBe(TWO_FACTOR_CHANGE_TIMEOUT_MS)
+      expect(dialog()?.hasAttribute('open')).toBe(false)
+      expect(toastMessages()).toEqual([DONE])
+      expect(useToastStore().toasts[0]).toMatchObject({ kind: 'success' })
+      // 켠 때는 그대로
+      expect(wrapper.get('[data-two-factor-label]').text()).toBe('2026년 10월 31일부터 켜짐')
+      expect(document.activeElement?.hasAttribute('data-two-factor-replace')).toBe(true)
+      // 키 · 칸은 지웠다 (닫힌 창은 ①의 빈 자리로 돌아간다)
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('')
+      expect(inDialog('[data-qr-code]')).toBeNull()
+      expect(inputValue('two-factor-replace-password')).toBeUndefined()
+    })
+
+    it('바꾸는 동안 「바꾸는 중…」 — [바꾸기] · [이전]은 aria-disabled, 다시 눌러도 요청은 하나 · [이전]도 움직이지 않는다', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ replace: handler })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+
+      const button = wrapper.get('[data-replace-submit]')
+      expect(button.text()).toBe('바꾸는 중…')
+      expect(button.attributes()).toMatchObject({ 'aria-busy': 'true', 'aria-disabled': 'true' })
+      expect(wrapper.get('[data-replace-back]').attributes('aria-disabled')).toBe('true')
+      await submit(wrapper)
+      await wrapper.get('[data-replace-back]').trigger('click')
+      await flushPromises()
+      expect(calls('/two-factor/replacements')).toHaveLength(1)
+      expect(wrapper.find('[data-replace-step="current"]').exists()).toBe(true)
+
+      replies[0]?.(ok(ON))
+      await flushPromises()
+      expect(toastMessages()).toEqual([DONE])
+    })
+
+    it('지금 비밀번호가 틀리면(AUTH_005) 비밀번호 칸 아래 · 그 칸에 초점 — 코드는 남긴다, 알림 없음', async () => {
+      const wrapper = await mountPage({ replace: () => fail(400, 'AUTH_005') })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: 'wrong-pass' })
+      await submit(wrapper)
+
+      expect(wrapper.get('#two-factor-replace-password-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_005)
+      expect(document.activeElement?.id).toBe('two-factor-replace-password')
+      expect(inputValue('two-factor-replace-current-code')).toBe('135790')
+      expect(dialog()?.hasAttribute('open')).toBe(true)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('지금 휴대폰의 코드가 틀리면(AUTH_006) 코드 칸 아래 · 칸을 비우고 초점 — 비밀번호는 남긴다, 알림 없음', async () => {
+      const wrapper = await mountPage({ replace: () => fail(400, 'AUTH_006') })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '000111', password: PASSWORD })
+      await submit(wrapper)
+
+      expect(wrapper.get('#two-factor-replace-current-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+      expect(inputValue('two-factor-replace-current-code')).toBe('')
+      expect(inputValue('two-factor-replace-password')).toBe(PASSWORD)
+      expect(document.activeElement?.id).toBe('two-factor-replace-current-code')
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('AUTH_008 · 아직 켜져 있음 — ①로 돌아와 창 위에 사전 문구, 새 키 · 새 휴대폰의 코드는 비운다', async () => {
+      const wrapper = await mountPage({ replace: () => fail(409, 'AUTH_008') })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+      await flushPromises()
+
+      expect(wrapper.find('[data-replace-step="new"]').exists()).toBe(true)
+      expect(stepItems()[0]).toMatchObject({ current: 'step', done: false })
+      expect(wrapper.get('[data-replace-notice]').text()).toBe(ERROR_CODE_MESSAGES.AUTH_008)
+      expect(calls('/two-factor/enrollments')).toHaveLength(2)
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      expect(inputValue('two-factor-replace-new-code')).toBe('')
+      expect(document.activeElement?.id).toBe('two-factor-replace-new-code')
+      expect(toastMessages()).toEqual([])
+
+      // 새 키로 다시 확인하면 ②의 창 위 글은 내린다 — 그 등록으로 보낸다
+      await next(wrapper, '246802')
+      expect(wrapper.find('[data-replace-notice]').exists()).toBe(false)
+      expect(verifyCalls().at(-1)?.url).toBe('/two-factor/enrollments/enroll-2/verification')
+    })
+
+    it('AUTH_008 · 그사이 다른 곳에서 꺼짐 — 창을 닫고 사전 문구로 알린다, 화면은 「꺼짐」', async () => {
+      let disabledElsewhere = false
+      const wrapper = await mountPage({
+        status: () => ok(disabledElsewhere ? OFF : ON),
+        replace: () => {
+          disabledElsewhere = true
+          return fail(409, 'AUTH_008')
+        },
+      })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+      await flushPromises()
+
+      expect(dialog()?.hasAttribute('open')).toBe(false)
+      expect(toastMessages()).toEqual([ERROR_CODE_MESSAGES.AUTH_008])
+      expect(wrapper.get('[data-two-factor-label]').text()).toBe('꺼짐')
+      expect(calls('/two-factor/enrollments')).toHaveLength(1)
+    })
+
+    it('결과를 모르면(503 MAIL_001) 바뀌었다고도 아니라고도 하지 않는다 — 창 위 상자 · ② 그대로 · 코드는 비우고 초점, 사전 알림 없음', async () => {
+      const wrapper = await mountPage({ replace: () => fail(503, 'MAIL_001') })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+
+      const notice = wrapper.get('[data-replace-notice]')
+      expect(notice.text()).toBe(UNCONFIRMED)
+      expect(notice.attributes('role')).toBe('alert')
+      expect(wrapper.find('[data-replace-step="current"]').exists()).toBe(true)
+      expect(inputValue('two-factor-replace-current-code')).toBe('')
+      expect(inputValue('two-factor-replace-password')).toBe(PASSWORD)
+      expect(document.activeElement?.id).toBe('two-factor-replace-current-code')
+      expect(toastMessages()).toEqual([])
+      // 화면의 상태는 건드리지 않는다
+      expect(useTwoFactorStore().twoFactor).toEqual(ON)
+    })
+
+    it('결과를 모르는 채 다시 [바꾸기] — 코드가 맞지 않다고 나와도 창 위 상자는 남긴다', async () => {
+      let replies = 0
+      const wrapper = await mountPage({
+        replace: () => {
+          replies += 1
+          return replies === 1 ? 'network' : fail(400, 'AUTH_006')
+        },
+      })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+      expect(wrapper.get('[data-replace-notice]').text()).toBe(UNCONFIRMED)
+      // 응답 없음(SYS_001)도 사전 알림 없이 같은 상자
+      expect(toastMessages()).toEqual([])
+
+      await fillCurrent(wrapper, { code: '975310' })
+      await submit(wrapper)
+      expect(wrapper.get('#two-factor-replace-current-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+      expect(wrapper.get('[data-replace-notice]').text()).toBe(UNCONFIRMED)
+    })
+
+    it('[이전] — ①로(같은 키 · 새 키를 받지 않음), 새 휴대폰의 코드는 비우고 초점, 다시 [다음]은 같은 등록으로', async () => {
+      const wrapper = await mountPage()
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+
+      await wrapper.get('[data-replace-back]').trigger('click')
+      await flushPromises()
+      expect(wrapper.find('[data-replace-step="new"]').exists()).toBe(true)
+      expect(stepItems()[0]).toMatchObject({ current: 'step', done: false })
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('R4WN6HMQT2XBZK7DPL3FJC5YVQ2GNEA6')
+      expect(calls('/two-factor/enrollments')).toHaveLength(1)
+      expect(inputValue('two-factor-replace-new-code')).toBe('')
+      expect(document.activeElement?.id).toBe('two-factor-replace-new-code')
+
+      await next(wrapper, '246802')
+      expect(verifyCalls().map((request) => request.url)).toEqual([
+        '/two-factor/enrollments/enroll-1/verification',
+        '/two-factor/enrollments/enroll-1/verification',
+      ])
+      // 지금 휴대폰의 코드는 시간이 지나 비웠고, 지금 비밀번호는 창을 닫을 때까지 남는다
+      expect(inputValue('two-factor-replace-current-code')).toBe('')
+      expect(inputValue('two-factor-replace-password')).toBe(PASSWORD)
+    })
+
+    it('두 칸에서 Enter 도 [바꾸기]와 같다', async () => {
+      const wrapper = await mountPage()
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await wrapper.get('#two-factor-replace-password').trigger('keydown', { key: 'Enter' })
+      await flushPromises()
+
+      expect(calls('/two-factor/replacements')).toHaveLength(1)
+      expect(toastMessages()).toEqual([DONE])
+    })
+  })
+
+  describe('닫은 뒤 · 세션', () => {
+    it('[취소]로 닫아도 서버가 바꿨으면 화면을 맞추고 알린다', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ replace: handler })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+      await wrapper.get('[data-replace-cancel]').trigger('click')
+      await flushPromises()
+      expect(dialog()?.hasAttribute('open')).toBe(false)
+
+      replies[0]?.(ok({ ...ON, enabledAt: '2026-11-01T00:00:00.000Z' }))
+      await flushPromises()
+      expect(toastMessages()).toEqual([DONE])
+      expect(useTwoFactorStore().twoFactor?.enabledAt).toBe('2026-11-01T00:00:00.000Z')
+    })
+
+    it('닫은 뒤 온 결과를 모르는 실패는 알림으로 · 칸 아래 거절은 사전 문구 알림으로', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ replace: handler })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+      await wrapper.get('[data-replace-cancel]').trigger('click')
+      await flushPromises()
+      replies[0]?.(fail(503, 'MAIL_001'))
+      await flushPromises()
+      expect(useToastStore().toasts.map((toast) => [toast.kind, toast.message])).toEqual([['error', UNCONFIRMED_CLOSED]])
+
+      useToastStore().clear()
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: 'wrong-pass' })
+      await submit(wrapper)
+      await wrapper.get('[data-replace-cancel]').trigger('click')
+      await flushPromises()
+      replies[1]?.(fail(400, 'AUTH_005'))
+      await flushPromises()
+      expect(toastMessages()).toEqual([ERROR_CODE_MESSAGES.AUTH_005])
+    })
+
+    it('닫았다 다시 연 창에는 앞 요청의 거절을 넣지 않는다 — 새 키로 ①부터', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ replace: handler })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+      await wrapper.get('[data-replace-cancel]').trigger('click')
+      await flushPromises()
+
+      await openReplace(wrapper)
+      expect(calls('/two-factor/enrollments')).toHaveLength(2)
+      expect(wrapper.find('[data-replace-step="new"]').exists()).toBe(true)
+      expect(wrapper.get('[data-replace-next]').text()).toBe('다음')
+
+      replies[0]?.(fail(400, 'AUTH_006'))
+      await flushPromises()
+      expect(wrapper.find('#two-factor-replace-new-code-error').exists()).toBe(false)
+      expect(wrapper.find('[data-replace-notice]').exists()).toBe(false)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('닫으면 키 · 칸을 지운다 — 다시 열면 새 키, 닫은 뒤 늦게 온 확인은 ②로 넘기지 않는다', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ verify: handler })
+      await openReplace(wrapper)
+      await next(wrapper, '482913')
+      await wrapper.get('[data-replace-cancel]').trigger('click')
+      await flushPromises()
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('')
+
+      replies[0]?.(ok({ verified: true }))
+      await flushPromises()
+      expect(wrapper.find('[data-replace-step="current"]').exists()).toBe(false)
+
+      await openReplace(wrapper)
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      expect(inputValue('two-factor-replace-new-code')).toBe('')
+    })
+
+    it('세션이 바뀌면(다른 곳에서 이 세션을 끊음 → 세션 만료) 창을 닫고 키 · 코드 · 비밀번호를 지운다', async () => {
+      const wrapper = await mountPage()
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+
+      useAuthStore().expireSession()
+      await flushPromises()
+
+      expect(dialog()?.hasAttribute('open')).toBe(false)
+      expect(inDialog('[data-qr-code]')).toBeNull()
+      expect(inDialog('[data-enable-key]')?.textContent).toBe('')
+      expect(document.getElementById('two-factor-replace-password')).toBeNull()
+      expect(document.getElementById('two-factor-replace-current-code')).toBeNull()
+      expect(inputValue('two-factor-replace-new-code')).toBe('')
+    })
+
+    it('바꾸는 사이 세션이 바뀌었으면(로그아웃) 늦게 온 결과를 쓰지 않는다 — 알림도 없다', async () => {
+      const { handler, replies } = held()
+      const wrapper = await mountPage({ replace: handler })
+      await toCurrentStep(wrapper)
+      await fillCurrent(wrapper, { code: '135790', password: PASSWORD })
+      await submit(wrapper)
+
+      useAuthStore().clearAuth()
+      replies[0]?.(ok(ON))
+      await flushPromises()
+
+      expect(toastMessages()).toEqual([])
+      expect(useTwoFactorStore().twoFactor).toBeNull()
+    })
+  })
+})
diff --git a/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts b/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts
index 7bce367..540738b 100644
--- a/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts
+++ b/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts
@@ -110,6 +110,8 @@ describe('AccountTwoFactorPage', () => {
     expect(wrapper.get('[data-two-factor-state]').text()).toContain('지금은 로그인할 때 비밀번호만 확인합니다.')
     expect(wrapper.get('[data-two-factor-enable]').text()).toBe('2단계 인증 켜기')
     expect(wrapper.find('[data-two-factor-disable]').exists()).toBe(false)
+    // 꺼져 있으면 [휴대폰 바꾸기]가 없다 — 켜기 창으로 새 휴대폰에서 켠다
+    expect(wrapper.find('[data-two-factor-replace]').exists()).toBe(false)
     const warning = wrapper.get('[data-two-factor-warning]')
     expect(warning.text()).toContain('켜면 메일 프로그램은 앱 비밀번호로 다시 연결해야 합니다')
     expect(warning.get('a').text()).toBe('앱 비밀번호')
@@ -120,12 +122,18 @@ describe('AccountTwoFactorPage', () => {
     expect(wrapper.find('[data-two-factor-notes]').exists()).toBe(false)
   })
 
-  it('켜짐 — 「2026년 10월 31일부터 켜짐」 · [2단계 인증 끄기] · 안내 상자 / 켠 때를 모르면 「켜짐」', async () => {
+  it('켜짐 — 「2026년 10월 31일부터 켜짐」 · [휴대폰 바꾸기] [2단계 인증 끄기] · 안내 상자 / 켠 때를 모르면 「켜짐」', async () => {
     const wrapper = await mountPage({ status: () => ok(ON) })
 
     expect(wrapper.get('[data-two-factor-label]').text()).toBe('2026년 10월 31일부터 켜짐')
     expect(wrapper.get('[data-two-factor-label]').classes()).toContain('two-factor__state-label--on')
     expect(wrapper.get('[data-two-factor-disable]').text()).toBe('2단계 인증 끄기')
+    // [휴대폰 바꾸기]는 [2단계 인증 끄기] 바로 앞 (16단계)
+    const actions = wrapper.get('.two-factor__actions').element.children
+    expect(Array.from(actions).map((child) => child.textContent?.trim())).toEqual(['휴대폰 바꾸기', '2단계 인증 끄기'])
+    expect(wrapper.get('[data-two-factor-notes]').text()).toContain(
+      '휴대폰을 바꿀 때는 [휴대폰 바꾸기]를 눌러 주세요. 새 휴대폰과 지금 휴대폰의 코드가 모두 필요합니다.',
+    )
     expect(wrapper.find('[data-two-factor-warning]').exists()).toBe(false)
     expect(wrapper.get('[data-two-factor-notes]').text()).toContain('휴대폰을 잃어버렸거나 인증 앱을 지웠으면 관리자에게 문의해 주세요.')
     expect(wrapper.get('[data-two-factor-notes]').text()).toContain('메일 프로그램은 앱 비밀번호로 연결합니다.')
@@ -661,14 +669,19 @@ describe('AccountTwoFactorPage — 필수인 직원 (13단계)', () => {
     expect(wrapper.find('[data-two-factor-grace]').exists()).toBe(false)
   })
 
-  it('켜짐 — [2단계 인증 끄기] 대신 「회사 정책에 따라 끌 수 없습니다」, 휴대폰 바꾸기 안내는 관리자에게 해제 요청', async () => {
+  it('켜짐 — [2단계 인증 끄기] 대신 「회사 정책에 따라 끌 수 없습니다」, 그 앞에 [휴대폰 바꾸기] · 안내 첫 줄은 보통 직원과 같은 글 (16단계)', async () => {
     const wrapper = await mountWith({ ...ON, isRequired: true, deadline: null })
 
     expect(wrapper.find('[data-two-factor-disable]').exists()).toBe(false)
     expect(wrapper.get('[data-two-factor-locked]').text()).toBe('회사 정책에 따라 끌 수 없습니다')
+    expect(wrapper.get('[data-two-factor-replace]').text()).toBe('휴대폰 바꾸기')
+    // [휴대폰 바꾸기]가 끌 수 없다는 글 앞
+    const actions = wrapper.get('.two-factor__actions').element.children
+    expect(Array.from(actions).map((child) => child.textContent?.trim())).toEqual(['휴대폰 바꾸기', '회사 정책에 따라 끌 수 없습니다'])
     expect(wrapper.find('[data-two-factor-grace]').exists()).toBe(false)
     const notes = wrapper.get('[data-two-factor-notes]').text()
-    expect(notes).toContain('휴대폰을 바꿀 때는 관리자에게 2단계 인증을 풀어 달라고 요청해 주세요. 다음에 로그인할 때 새 휴대폰으로 다시 켜면 됩니다.')
+    expect(notes).toContain('휴대폰을 바꿀 때는 [휴대폰 바꾸기]를 눌러 주세요. 새 휴대폰과 지금 휴대폰의 코드가 모두 필요합니다.')
+    expect(notes).not.toContain('관리자에게 2단계 인증을 풀어 달라고 요청해 주세요')
     expect(notes).toContain('휴대폰을 잃어버렸거나 인증 앱을 지웠으면 관리자에게 문의해 주세요.')
   })
 })
diff --git a/frontend/src/pages/settings/AccountTwoFactorPage.vue b/frontend/src/pages/settings/AccountTwoFactorPage.vue
index 6ce4145..6edf96c 100644
--- a/frontend/src/pages/settings/AccountTwoFactorPage.vue
+++ b/frontend/src/pages/settings/AccountTwoFactorPage.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 // 설정 › 계정 › 2단계 인증 (디자인 원본 SettingsTwoFactor · README "12단계 › 설정 › 계정 › 2단계 인증" · 계약 5절 "2단계 인증")
 // — /settings/account/two-factor · 탭 제목 "2단계 인증"
-// 머리 + 설명 → 상태 상자(글자로만 — 뱃지 · 스위치 없음): 「꺼짐」(회색 굵게) + [2단계 인증 켜기] / 「켜짐 — 2026년 10월 31일부터」(초록 굵게 — 켠 때를 모르면 「켜짐」) + [2단계 인증 끄기]
+// 머리 + 설명 → 상태 상자(글자로만 — 뱃지 · 스위치 없음): 「꺼짐」(회색 굵게) + [2단계 인증 켜기] /
+// 「켜짐 — 2026년 10월 31일부터」(초록 굵게 — 켠 때를 모르면 「켜짐」) + [휴대폰 바꾸기](테두리 44 — 16단계) [2단계 인증 끄기]
 // - 꺼져 있을 때: 갈색 경고(켜면 메일 프로그램은 앱 비밀번호로 — 앱 비밀번호 링크) + 「켜는 차례」 1 · 2 · 3(청록 굵은 숫자)
-// - 켜져 있을 때: 안내 상자(휴대폰 바꾸기 · 잃어버림 · 메일 프로그램은 앱 비밀번호로)
-// - 켜기 창(TwoFactorEnableDialog — 620) · 끄기 창(TwoFactorDisableDialog — 400, 처음 초점 「취소」)
+// - 켜져 있을 때: 안내 상자(휴대폰 바꾸기 — [휴대폰 바꾸기]로 · 잃어버림 · 메일 프로그램은 앱 비밀번호로)
+// - 켜기 창(TwoFactorEnableDialog — 620) · 끄기 창(TwoFactorDisableDialog — 400, 처음 초점 「취소」) ·
+//   휴대폰 바꾸기 창(TwoFactorReplaceDialog — 620, 두 걸음 — 16단계 · 디자인 원본 Settings16 5~8)
 // - 켠 직후: 머리 아래 안내 상자 "2단계 인증을 켰습니다" + [앱 비밀번호 만들기](36) — 이 화면을 떠나면 사라진다(화면 상태). 초점은 그 상자로
 // - 끈 뒤: 알림 「2단계 인증을 껐습니다.」 — 화면은 「꺼짐」, 초점은 [2단계 인증 켜기]로
+// - 휴대폰을 바꾼 뒤: 알림(창이 띄운다) — 화면은 그대로(켠 때도 그대로), 초점은 [휴대폰 바꾸기]로
 // - 들어올 때마다 상태를 새로 받는다(two-factor.store). 받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도"
 // - 세션이 바뀌면(다른 기기의 [다른 곳 모두 로그아웃]으로 이 세션이 끊김 · 로그아웃 · 만료) 창을 모두 닫는다 — 세션 만료 창 뒤에 QR · 키 · 입력한 비밀번호가 남지 않게
 //   (창은 닫힐 때 키 · 칸을 지운다)
 // 회사가 2단계 인증을 필수로 정한 직원(13단계 — GET /two-factor 의 isRequired · deadline, 디자인 README "13단계 › 설정 › 2단계 인증 — 필수인 직원"):
 // - 유예 중 · 꺼짐 — 머리 아래 갈색 상자(방패) "11월 30일까지 2단계 인증을 켜 주세요" (날짜는 시작일 전날 — 올해가 아니면 해를 붙인다)
-// - 켜짐 — [2단계 인증 끄기] 대신 회색 글 "회사 정책에 따라 끌 수 없습니다"(서버도 VAL_001), 아래 안내의 첫 줄은 관리자에게 해제를 요청하는 글
+// - 켜짐 — [2단계 인증 끄기] 대신 회색 글 "회사 정책에 따라 끌 수 없습니다"(서버도 VAL_001). [휴대폰 바꾸기]는 그 앞에 그대로 —
+//   바꾸는 동안 2단계 인증이 꺼지지 않아 정책과 어긋나지 않는다(16단계). 아래 안내의 첫 줄도 보통 직원과 같은 글
 import { computed, nextTick, ref, watch } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
@@ -21,9 +25,10 @@ import MailLoadError from '@/components/mail/MailLoadError.vue'
 import SettingsPageFrame from '@/components/settings/SettingsPageFrame.vue'
 import TwoFactorDisableDialog from '@/components/settings/TwoFactorDisableDialog.vue'
 import TwoFactorEnableDialog from '@/components/settings/TwoFactorEnableDialog.vue'
+import TwoFactorReplaceDialog from '@/components/settings/TwoFactorReplaceDialog.vue'
 import { useClock } from '@/composables/useClock'
 import { useToast } from '@/composables/useToast'
-import { TWO_FACTOR_TEXT } from '@/shared/constants/account-security'
+import { TWO_FACTOR_REPLACE_TEXT, TWO_FACTOR_TEXT } from '@/shared/constants/account-security'
 import { TWO_FACTOR_GRACE_TEXT } from '@/shared/constants/session-restriction'
 import { SETTINGS_ROUTES } from '@/shared/constants/settings-menu'
 import { twoFactorStateLabel } from '@/shared/utils/account-security'
@@ -37,9 +42,11 @@ const toast = useToast()
 const clock = useClock()
 
 const enableRef = ref<HTMLButtonElement | null>(null)
+const replaceRef = ref<HTMLButtonElement | null>(null)
 const noticeRef = ref<HTMLElement | null>(null)
 const enableOpen = ref<boolean>(false)
 const disableOpen = ref<boolean>(false)
+const replaceOpen = ref<boolean>(false)
 /** 이 화면에서 방금 켰다 — 머리 아래 안내 상자 (떠나면 사라진다) */
 const justEnabled = ref<boolean>(false)
 
@@ -73,12 +80,20 @@ async function onDisabled() {
   enableRef.value?.focus()
 }
 
+/** 휴대폰을 바꿨다 — 알림은 창이 띄웠다. 화면은 그대로, 초점은 [휴대폰 바꾸기]로 */
+async function onReplaced() {
+  replaceOpen.value = false
+  await nextTick()
+  replaceRef.value?.focus()
+}
+
 // 세션이 바뀌면 창을 모두 닫는다 (켠 직후 안내도 내린다)
 watch(
   () => authStore.generation,
   () => {
     enableOpen.value = false
     disableOpen.value = false
+    replaceOpen.value = false
     justEnabled.value = false
   },
 )
@@ -169,20 +184,34 @@ void twoFactorStore.load()
           />
           <span>{{ TWO_FACTOR_TEXT.enable }}</span>
         </button>
-        <span
-          v-else-if="required"
-          class="two-factor__locked"
-          data-two-factor-locked
-        >{{ TWO_FACTOR_GRACE_TEXT.cannotDisable }}</span>
-        <button
+        <div
           v-else
-          type="button"
-          class="two-factor__disable"
-          data-two-factor-disable
-          @click="disableOpen = true"
+          class="two-factor__actions"
         >
-          {{ TWO_FACTOR_TEXT.disable }}
-        </button>
+          <button
+            ref="replaceRef"
+            type="button"
+            class="two-factor__replace"
+            data-two-factor-replace
+            @click="replaceOpen = true"
+          >
+            {{ TWO_FACTOR_REPLACE_TEXT.open }}
+          </button>
+          <span
+            v-if="required"
+            class="two-factor__locked"
+            data-two-factor-locked
+          >{{ TWO_FACTOR_GRACE_TEXT.cannotDisable }}</span>
+          <button
+            v-else
+            type="button"
+            class="two-factor__disable"
+            data-two-factor-disable
+            @click="disableOpen = true"
+          >
+            {{ TWO_FACTOR_TEXT.disable }}
+          </button>
+        </div>
       </div>
 
       <template v-if="!enabled">
@@ -239,7 +268,7 @@ void twoFactorStore.load()
       >
         <p class="two-factor__note">
           <span aria-hidden="true">·</span>
-          <span>{{ required ? TWO_FACTOR_GRACE_TEXT.noteChangePhone : TWO_FACTOR_TEXT.noteChangePhone }}</span>
+          <span>{{ TWO_FACTOR_TEXT.noteChangePhone }}</span>
         </p>
         <p class="two-factor__note">
           <span aria-hidden="true">·</span>
@@ -275,6 +304,12 @@ void twoFactorStore.load()
       @close="disableOpen = false"
       @disabled="onDisabled"
     />
+    <TwoFactorReplaceDialog
+      :open="replaceOpen"
+      :email="email"
+      @close="replaceOpen = false"
+      @replaced="onReplaced"
+    />
   </SettingsPageFrame>
 </template>
 
@@ -395,6 +430,29 @@ void twoFactorStore.load()
   background: var(--color-brand-strong);
 }
 
+/* 켜져 있을 때의 단추 묶음 — [휴대폰 바꾸기] [2단계 인증 끄기](또는 끌 수 없다는 글). 좁으면 줄을 바꾼다 */
+.two-factor__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-12);
+}
+
+/* 휴대폰 바꾸기 — 흰 바탕 · 테두리 (아이콘 없음 — 끄기 단추와 같은 꼴, 16단계) */
+.two-factor__replace {
+  min-height: var(--size-touch);
+  padding: 0 var(--space-16);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-strong);
+  font-weight: 600;
+}
+
+.two-factor__replace:hover {
+  background: var(--color-surface-muted);
+}
+
 /* 끄기 — 흰 바탕 · 빨간 글 · 테두리 */
 .two-factor__disable {
   min-height: var(--size-touch);
diff --git a/frontend/src/pages/settings/MailSignaturePage.spec.ts b/frontend/src/pages/settings/MailSignaturePage.spec.ts
index cc5de8e..2cd7b4c 100644
--- a/frontend/src/pages/settings/MailSignaturePage.spec.ts
+++ b/frontend/src/pages/settings/MailSignaturePage.spec.ts
@@ -3,7 +3,8 @@ 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 { MailSignature, SaveSignaturePayload, SignatureImage } from '@/shared/types/mail'
+import type { SignatureImage } from '@/shared/types/mail'
+import type { MailSignature, MailSignatureDefaults, MailSignaturePayload } from '@/shared/types/mail-signature'
 import { useAuthStore } from '@/stores/auth.store'
 import { useMailSignatureStore } from '@/stores/mail-signature.store'
 import { useToastStore } from '@/stores/toast.store'
@@ -21,62 +22,95 @@ import { editorOf, installProseMirrorDom } from '@/test-utils/prosemirror-dom'
 import { createTestRouter, routeViewProvide } from '@/test-utils/router'
 import MailSignaturePage from './MailSignaturePage.vue'
 
-// 설정 › 메일 › 서명 (디자인 원본 Settings · 계약 2절 "서명")
+// 설정 › 메일 › 서명 — 여러 서명 (디자인 원본 Signature16 · 계약 2절 "서명", 16단계)
 
 const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
-/** 서명 칸(지연 로딩한 TipTap 청크)을 기다리는 시간 — 쓰기 화면 테스트와 같은 값 */
+/** 서명 화면(지연 로딩한 TipTap 청크)을 기다리는 시간 — 쓰기 화면 테스트와 같은 값 */
 const EDITOR_LOAD_TIMEOUT_MS = 15_000
-const IMAGE_ID = '3f1c0a2e-0f1b-4f2a-9a1e-6c9f0a1b2c3d'
 const NEW_IMAGE_ID = '00000000-0000-4000-8000-000000000001'
-const SAVED_AT = '2026-10-27T06:00:00Z'
+const SAVED_AT = '2026-11-10T06:00:00Z'
 
-const SIGNATURE: MailSignature = {
-  bodyHtml: '<div style="font-size: 14px"><p style="margin: 0"><strong>김아라</strong> · 인프라팀</p></div>',
-  body: '김아라 · 인프라팀',
-  isForNew: true,
-  isForReply: true,
-  images: [],
-  updatedAt: '2026-10-27T05:00:00Z',
+function signature(id: string, name: string, html: string): MailSignature {
+  return { id, name, bodyHtml: html, body: name, images: [], updatedAt: '2026-11-10T05:00:00Z' }
 }
 
+/** 보드의 예시 — 사내(답장과 전달 기본) · 대외(새 메일 기본) · 영문 */
+const IN = signature('in', '사내', '<p style="margin: 0"><strong>김아라</strong> · 인프라팀</p><p style="margin: 0">내선 1234</p>')
+const OUT = signature('out', '대외', '<p style="margin: 0"><strong>김아라</strong> · 인프라팀</p><p style="margin: 0">ARA SYSTEM</p>')
+const EN = signature('en', '영문', '<p style="margin: 0"><strong>Ara Kim</strong> · Infrastructure Team</p>')
+const DEFAULTS: MailSignatureDefaults = { newMessageId: 'out', replyId: 'in' }
+
 function imageOf(id: string, width: number): SignatureImage {
   return { id, type: 'image/png', size: 1000, width, height: 60 }
 }
 
-interface Server {
-  signature?: MailSignature | MockResult
+interface ServerOptions {
+  list?: MailSignature[]
+  defaults?: MailSignatureDefaults
+  /** 목록 받기 응답을 바꾼다 (실패 등) — undefined 면 지금 목록 */
+  listReply?: () => MockResult | undefined
   /** 그림 올리기 응답 — 비면 NEW_IMAGE_ID · 폭 480 */
   uploads?: MockResult[]
-  save?: (request: MockRequest) => MockResult | Promise<MockResult>
+  /** 서명 만들기 · 고치기 응답 — undefined 면 서버처럼 저장한다 */
+  save?: (request: MockRequest) => MockResult | Promise<MockResult> | undefined
+  /** 기본 둘 저장 응답 — undefined 면 서버처럼 저장한다 */
+  saveDefaults?: (request: MockRequest) => MockResult | undefined
 }
 
-function server(options: Server = {}): MockHandler {
+/** 서명 서버 — 목록 · 기본 둘을 기억한다 (만들기 · 고치기 · 지우기가 다음 받기에 보인다) */
+function server(options: ServerOptions = {}): MockHandler {
+  let list = [...(options.list ?? [IN, OUT, EN])]
+  let defaults = { ...(options.defaults ?? DEFAULTS) }
   const uploads = [...(options.uploads ?? [])]
-  return (request) => {
+  let created = 0
+  const page = () => ok({ items: list, pageInfo: { hasNext: false, nextCursor: null, total: list.length } })
+  return async (request) => {
     const { method, url } = request
-    if (method === 'GET' && url === '/mail-signature') {
-      const signature = options.signature ?? SIGNATURE
-      return typeof signature === 'string' || 'status' in signature ? signature : ok(signature)
+    if (method === 'GET' && url === '/mail-signatures') return options.listReply?.() ?? page()
+    if (method === 'GET' && url === '/mail-signature-defaults') return ok(defaults)
+    if (method === 'PUT' && url === '/mail-signature-defaults') {
+      const reply = options.saveDefaults?.(request)
+      if (reply) return reply
+      defaults = { ...(request.data as MailSignatureDefaults) }
+      return ok(defaults)
     }
-    if (method === 'POST' && url === '/mail-signature/images') {
-      return uploads.shift() ?? ok(imageOf(NEW_IMAGE_ID, 480), 201)
+    if (method === 'POST' && url === '/mail-signature/images') return uploads.shift() ?? ok(imageOf(NEW_IMAGE_ID, 480), 201)
+    if ((method === 'POST' && url === '/mail-signatures') || (method === 'PUT' && url.startsWith('/mail-signatures/'))) {
+      const reply = await options.save?.(request)
+      if (reply) return reply
+      const body = request.data as MailSignaturePayload
+      if (method === 'POST') {
+        created += 1
+        const saved: MailSignature = { id: `new-${created}`, ...body, images: [], updatedAt: SAVED_AT }
+        if (list.length === 0) defaults = { newMessageId: saved.id, replyId: saved.id }
+        list = [...list, saved]
+        return ok(saved, 201)
+      }
+      const id = url.slice('/mail-signatures/'.length)
+      const saved: MailSignature = { id, ...body, images: [], updatedAt: SAVED_AT }
+      list = list.map((item) => (item.id === id ? saved : item))
+      return ok(saved)
     }
-    if (method === 'PUT' && url === '/mail-signature') {
-      if (options.save) return options.save(request)
-      const body = request.data as SaveSignaturePayload
-      return ok({ ...body, images: [], updatedAt: SAVED_AT })
+    if (method === 'DELETE' && url.startsWith('/mail-signatures/')) {
+      const id = url.slice('/mail-signatures/'.length)
+      list = list.filter((item) => item.id !== id)
+      defaults = {
+        newMessageId: defaults.newMessageId === id ? null : defaults.newMessageId,
+        replyId: defaults.replyId === id ? null : defaults.replyId,
+      }
+      return { status: 204 }
     }
     return ok(null)
   }
 }
 
-describe('MailSignaturePage', () => {
+describe('MailSignaturePage — 여러 서명 (16단계)', () => {
   let pinia: Pinia
   const mounted: VueWrapper[] = []
 
   beforeAll(installProseMirrorDom)
   beforeAll(async () => {
-    await import('@/components/mail/editor/signature/SignatureForm.vue')
+    await import('@/components/mail/editor/signature/SignatureSettings.vue')
   }, EDITOR_LOAD_TIMEOUT_MS)
 
   beforeEach(() => {
@@ -89,11 +123,13 @@ describe('MailSignaturePage', () => {
     for (const wrapper of mounted.splice(0)) {
       if (!wrapper.vm.$.isUnmounted) wrapper.unmount()
     }
+    document.body.innerHTML = ''
     useToastStore().clear()
     restoreApiAdapter()
   })
 
-  async function mountPage(handler: MockHandler, waitForEditor = true) {
+  /** 서명 화면을 띄운다 — waitFor 가 나타날 때까지 기다린다 (null 이면 기다리지 않는다) */
+  async function mountPage(handler: MockHandler, waitFor: string | null = '#signature-body') {
     const requests = installMockApi(handler)
     const router = createTestRouter()
     await router.push('/settings/mail/signature')
@@ -105,10 +141,10 @@ describe('MailSignaturePage', () => {
     })
     mounted.push(wrapper)
     await flushPromises()
-    if (waitForEditor) {
+    if (waitFor) {
       await vi.waitFor(
         () => {
-          if (!wrapper.find('#signature-body').exists()) throw new Error('서명 칸을 불러오는 중')
+          if (!wrapper.find(waitFor).exists()) throw new Error('서명 화면을 불러오는 중')
         },
         { timeout: EDITOR_LOAD_TIMEOUT_MS },
       )
@@ -117,24 +153,66 @@ describe('MailSignaturePage', () => {
     return { wrapper, requests, router }
   }
 
-  function choose(wrapper: VueWrapper, files: File[]) {
-    const picker = wrapper.get('#signature-image-input')
-    Object.defineProperty(picker.element, 'files', { value: files, configurable: true })
-    return picker.trigger('change')
+  /** 목록 줄 — 이름과 아래 회색 글 (사이에 빈칸 하나) */
+  function rows(wrapper: VueWrapper): string[] {
+    return wrapper.findAll('[data-signature-row]').map((row) =>
+      row
+        .findAll('span')
+        .map((part) => part.text())
+        .join(' '),
+    )
   }
 
-  const png = (name = '로고.png', size = 1000) => new File([new Uint8Array(size)], name, { type: 'image/png' })
-
-  function saveRequest(requests: MockRequest[]) {
-    return requests.find((request) => request.method === 'PUT' && request.url === '/mail-signature')
+  function currentRow(wrapper: VueWrapper): string | undefined {
+    return wrapper.find('[data-signature-row][aria-current="true"]').attributes('data-signature-row')
   }
 
-  it('저장한 서명으로 칸을 채우고, 넣을 메일 · 미리 보기를 보인다', async () => {
+  function dialogOpen(wrapper: VueWrapper, id: string): boolean {
+    return wrapper.find(`#${id}`).exists() && wrapper.get(`#${id}`).attributes('open') !== undefined
+  }
+
+  /** 서명 끝에 한 줄을 더 쓴다 */
+  async function typeLine(wrapper: VueWrapper, text: string) {
+    const editor = editorOf(wrapper.element)
+    editor.commands.insertContentAt(editor.state.doc.content.size, `<p>${text}</p>`)
+    await flushPromises()
+  }
+
+  /** 다른 서명을 열고 새 편집기가 붙을 때까지 기다린다 */
+  async function pick(wrapper: VueWrapper, id: string) {
+    await wrapper.get(`[data-signature-row="${id}"]`).trigger('click')
+    await flushPromises()
+  }
+
+  const saveRequests = (requests: MockRequest[]) =>
+    requests.filter((request) => request.url.startsWith('/mail-signatures') && request.method !== 'GET')
+
+  it('메일에 넣을 서명 · 내 서명 목록 · 고른 서명 — 처음에는 새 메일에 넣는 서명이 골라져 있다', async () => {
     const { wrapper } = await mountPage(server())
 
     expect(wrapper.get('h1').text()).toBe('서명')
-    expect(wrapper.get('#signature-body').text()).toBe('김아라 · 인프라팀')
-    expect(wrapper.get('#signature-body').attributes('aria-labelledby')).toBe('signature-label')
+    expect(wrapper.text()).toContain(
+      '보내는 메일 끝에 넣는 글입니다. 여러 개 만들어 두면 메일을 쓸 때 [서명]에서 골라 바꿀 수 있고, 그 메일에서만 고치거나 지울 수도 있습니다.',
+    )
+    // 기본 둘 — 서명(만든 차례) · 넣지 않음
+    expect(wrapper.get('legend').text()).toBe('메일에 넣을 서명')
+    const options = wrapper.findAll('#signature-default-new option').map((option) => option.text())
+    expect(options).toEqual(['사내', '대외', '영문', '넣지 않음'])
+    expect((wrapper.get('#signature-default-new').element as HTMLSelectElement).value).toBe('out')
+    expect((wrapper.get('#signature-default-reply').element as HTMLSelectElement).value).toBe('in')
+    expect(wrapper.get('#signature-defaults-hint').text()).toBe(
+      '메일을 쓰기 시작할 때 본문에 넣어 둡니다. 고르는 대로 바로 저장됩니다.',
+    )
+    // 목록 — 이름 아래 그 서명을 기본으로 넣는 메일
+    expect(wrapper.get('#signature-list-label').text()).toBe('내 서명')
+    expect(rows(wrapper)).toEqual(['사내 답장과 전달', '대외 새 메일', '영문'])
+    expect(currentRow(wrapper)).toBe('out')
+    expect(wrapper.get('#signature-count').text()).toBe('서명 3개를 만들었고, 10개까지 만들 수 있습니다.')
+    // 고른 서명 — 이름 · 서명 칸 · 지우기
+    expect((wrapper.get('#signature-name').element as HTMLInputElement).value).toBe('대외')
+    expect(wrapper.get('#signature-name').attributes('maxlength')).toBe('30')
+    expect(wrapper.get('#signature-name-hint').text()).toBe('메일을 쓸 때 [서명]에서 고르는 이름입니다. 30자까지 쓸 수 있습니다.')
+    expect(wrapper.get('#signature-body').text()).toBe('김아라 · 인프라팀ARA SYSTEM')
     expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('서명 서식')
     expect(wrapper.findAll('[role="toolbar"] button').map((button) => button.attributes('aria-label'))).toEqual([
       '굵게',
@@ -144,25 +222,33 @@ describe('MailSignaturePage', () => {
       '링크',
       '그림 넣기',
     ])
-    expect((wrapper.get('#signature-for-new').element as HTMLInputElement).checked).toBe(true)
-    expect((wrapper.get('#signature-for-reply').element as HTMLInputElement).checked).toBe(true)
-    expect(wrapper.get('[data-signature-preview]').text()).toBe('김아라 · 인프라팀')
+    expect(wrapper.get('#signature-delete').text()).toBe('이 서명 지우기')
+    expect(wrapper.find('#signature-cancel').exists()).toBe(false)
+    // 미리 보기 — 고른 서명이 들어갈 자리
+    expect(wrapper.get('[data-signature-preview]').text()).toBe('김아라 · 인프라팀ARA SYSTEM')
     expect(wrapper.get('[data-signature-preview-note]').text()).toBe('새 메일은 본문 끝에 서명을 넣습니다.')
+    await wrapper.get('[data-mode="reply"]').trigger('click')
+    expect(wrapper.find('.signature-preview__quote').exists()).toBe(true)
+    expect(wrapper.get('[data-signature-preview-note]').text()).toBe('답장과 전달에는 인용한 원문 위에 서명을 넣습니다.')
   })
 
   it('받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도"', async () => {
     let fails = 1
     const { wrapper, requests } = await mountPage(
-      (request) => {
-        if (request.url === '/mail-signature' && fails > 0) {
+      server({
+        listReply: () => {
+          if (fails === 0) return undefined
           fails -= 1
           return fail(503, 'MAIL_001')
-        }
-        return server()(request)
-      },
-      false,
+        },
+      }),
+      null,
     )
+    await vi.waitFor(() => {
+      if (!wrapper.find('[role="alert"]').exists()) throw new Error('받는 중')
+    })
     expect(wrapper.get('[role="alert"]').text()).toContain(ERROR_CODE_MESSAGES.MAIL_001)
+    expect(useToastStore().toasts).toEqual([])
 
     await wrapper.get('[role="alert"] button').trigger('click')
     await vi.waitFor(
@@ -171,162 +257,357 @@ describe('MailSignaturePage', () => {
       },
       { timeout: EDITOR_LOAD_TIMEOUT_MS },
     )
-    expect(requests.filter((request) => request.url === '/mail-signature')).toHaveLength(2)
+    expect(requests.filter((request) => request.url === '/mail-signatures')).toHaveLength(2)
   })
 
-  it('[저장] — 쓰기 본문과 같은 서식 본문 · 텍스트 서명 · 넣을 메일을 보내고 "저장했습니다"를 보인다 (바꾸면 내린다)', async () => {
-    const { wrapper, requests } = await mountPage(server())
-    const editor = editorOf(wrapper.element)
-    editor.commands.insertContentAt(editor.state.doc.content.size, '<p>ARA SYSTEM</p>')
-    await wrapper.get('#signature-for-reply').setValue(false)
+  describe('서명이 없을 때 · 새 서명', () => {
+    it('안내와 [새 서명]만 — 메일에 넣을 서명 칸과 목록은 없다', async () => {
+      const { wrapper } = await mountPage(
+        server({ list: [], defaults: { newMessageId: null, replyId: null } }),
+        '#signature-empty-new',
+      )
+      expect(wrapper.text()).toContain('아직 서명이 없습니다')
+      expect(wrapper.text()).toContain(
+        '보내는 메일 끝에 넣을 이름, 소속, 연락처를 만들어 두면 메일을 쓸 때마다 본문에 넣어 둡니다. 사내용과 대외용처럼 여러 개를 만들어 골라 쓸 수도 있습니다.',
+      )
+      expect(wrapper.find('#signature-default-new').exists()).toBe(false)
+      expect(wrapper.find('[data-signature-row]').exists()).toBe(false)
+    })
 
+    it('[새 서명] — 목록 끝에 "저장하지 않음" 줄 · 빈 이름 칸에 초점, [취소]하면 돌아간다', async () => {
+      const { wrapper } = await mountPage(
+        server({ list: [], defaults: { newMessageId: null, replyId: null } }),
+        '#signature-empty-new',
+      )
+      await wrapper.get('#signature-empty-new').trigger('click')
+      await vi.waitFor(() => {
+        if (!wrapper.find('#signature-body').exists()) throw new Error('서명 칸을 여는 중')
+      })
+      await flushPromises()
+
+      expect(rows(wrapper)).toEqual(['새 서명 저장하지 않음'])
+      expect(currentRow(wrapper)).toBe('new')
+      expect(document.activeElement?.id).toBe('signature-name')
+      expect(wrapper.get('#signature-name').attributes('placeholder')).toBe('예: 사내, 대외, 영문')
+      expect(wrapper.find('#signature-delete').exists()).toBe(false)
+
+      await wrapper.get('#signature-cancel').trigger('click')
+      await flushPromises()
+      expect(wrapper.find('[data-signature-row]').exists()).toBe(false)
+      expect(document.activeElement?.id).toBe('signature-empty-new')
+    })
+
+    it('첫 서명을 저장하면 두 곳의 기본이 그 서명 — "다음에 메일을 쓸 때부터 들어갑니다."', async () => {
+      const { wrapper, requests } = await mountPage(
+        server({ list: [], defaults: { newMessageId: null, replyId: null } }),
+        '#signature-empty-new',
+      )
+      await wrapper.get('#signature-empty-new').trigger('click')
+      await vi.waitFor(() => {
+        if (!wrapper.find('#signature-body').exists()) throw new Error('서명 칸을 여는 중')
+      })
+      await wrapper.get('#signature-name').setValue('  기본 서명 ')
+      // 빈 서명 칸의 첫 줄에 쓴다
+      editorOf(wrapper.element).commands.insertContent('김아라 · 인프라팀')
+      await flushPromises()
+
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+
+      expect(saveRequests(requests).map((request) => `${request.method} ${request.url}`)).toEqual(['POST /mail-signatures'])
+      expect(saveRequests(requests)[0]?.data).toEqual({
+        name: '기본 서명',
+        bodyHtml: expect.stringMatching(/^<div style="font-family: [^"]+; font-size: 14px; line-height: 1\.75">/),
+        body: '김아라 · 인프라팀',
+      })
+      expect(wrapper.get('#signature-save-status').text()).toBe('저장했습니다. 다음에 메일을 쓸 때부터 들어갑니다.')
+      expect(rows(wrapper)).toEqual(['기본 서명 새 메일, 답장과 전달'])
+      expect(currentRow(wrapper)).toBe('new-1')
+      expect((wrapper.get('#signature-name').element as HTMLInputElement).value).toBe('기본 서명')
+      // 같은 칸 그대로 — 이제 [이 서명 지우기] · 메일에 넣을 서명 칸이 보인다
+      expect(wrapper.find('#signature-delete').exists()).toBe(true)
+      expect((wrapper.get('#signature-default-reply').element as HTMLSelectElement).value).toBe('new-1')
+      // 다시 저장하면 고치기(PUT)
+      await typeLine(wrapper, 'ARA SYSTEM')
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+      expect(saveRequests(requests).map((request) => `${request.method} ${request.url}`)).toEqual([
+        'POST /mail-signatures',
+        'PUT /mail-signatures/new-1',
+      ])
+    })
+
+    it('두 번째 서명은 기본을 바꾸지 않는다 — "저장했습니다."만', async () => {
+      const { wrapper } = await mountPage(server())
+      await wrapper.get('#signature-new').trigger('click')
+      await flushPromises()
+      await wrapper.get('#signature-name').setValue('견적용')
+      await typeLine(wrapper, '견적 담당 김아라')
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.get('#signature-save-status').text()).toBe('저장했습니다.')
+      expect(rows(wrapper)).toEqual(['사내 답장과 전달', '대외 새 메일', '영문', '견적용'])
+      expect(useMailSignatureStore().defaults).toEqual(DEFAULTS)
+    })
+
+    it('10개면 [새 서명]은 누를 수 없다 — 초점은 받고 까닭이 목록 아래 글', async () => {
+      const ten = Array.from({ length: 10 }, (_unused, index) => signature(`s${index}`, `서명 ${index + 1}`, '<p>글</p>'))
+      const { wrapper } = await mountPage(server({ list: ten, defaults: { newMessageId: 's0', replyId: null } }))
+      const button = wrapper.get('#signature-new')
+
+      expect(button.attributes('aria-disabled')).toBe('true')
+      expect(button.attributes('aria-describedby')).toBe('signature-count')
+      expect(wrapper.get('#signature-count').text()).toBe('서명은 10개까지 만들 수 있습니다. 쓰지 않는 서명을 지워 주세요.')
+      await button.trigger('click')
+      await flushPromises()
+      expect(wrapper.find('[data-signature-row="new"]').exists()).toBe(false)
+    })
+  })
+
+  describe('이름 검사 — 1~30자 · 같은 이름(영문 대소문자 무시)', () => {
+    it('비었거나 같은 이름이면 칸 아래 빨간 글 · 이름 칸에 초점 (알림 · 요청 없음), 고치면 안내로', async () => {
+      const ENGLISH = signature('english', 'English', '<p>Ara Kim</p>')
+      const { wrapper, requests } = await mountPage(server({ list: [IN, OUT, ENGLISH] }))
+      const input = wrapper.get('#signature-name')
+
+      await input.setValue('   ')
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+      expect(wrapper.get('#signature-name-error').text()).toBe('이름을 넣어 주세요.')
+      expect(input.attributes('aria-invalid')).toBe('true')
+      expect(input.attributes('aria-describedby')).toBe('signature-name-error')
+      expect(document.activeElement?.id).toBe('signature-name')
+
+      await input.setValue('사내')
+      expect(wrapper.find('#signature-name-error').exists()).toBe(false)
+      expect(wrapper.find('#signature-name-hint').exists()).toBe(true)
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+      expect(wrapper.get('#signature-name-error').text()).toBe('같은 이름의 서명이 있습니다.')
+
+      // 영문은 대소문자를 가리지 않는다
+      await input.setValue(' ENGLISH ')
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+      expect(wrapper.get('#signature-name-error').text()).toBe('같은 이름의 서명이 있습니다.')
+      expect(saveRequests(requests)).toEqual([])
+      expect(useToastStore().toasts).toEqual([])
+    })
+
+    it('그사이 다른 창에서 같은 이름을 만들었으면 서버의 거절(VAL_001)도 같은 빨간 글 — 아니면 서명 칸 아래에 사전 문구', async () => {
+      let otherWindow = false
+      const { wrapper, requests } = await mountPage(
+        server({
+          listReply: () =>
+            otherWindow
+              ? ok({ items: [IN, OUT, EN, signature('x', '행사 안내', '<p>글</p>')], pageInfo: { hasNext: false, nextCursor: null, total: 4 } })
+              : undefined,
+          save: () => fail(400, 'VAL_001'),
+        }),
+      )
+      await wrapper.get('#signature-name').setValue('행사 안내')
+      otherWindow = true
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+      expect(wrapper.get('#signature-name-error').text()).toBe('같은 이름의 서명이 있습니다.')
+      expect(requests.filter((request) => request.url === '/mail-signatures' && request.method === 'GET')).toHaveLength(2)
+
+      await wrapper.get('#signature-name').setValue('행사 안내 2')
+      await wrapper.get('#signature-save').trigger('click')
+      await flushPromises()
+      expect(wrapper.find('#signature-name-error').exists()).toBe(false)
+      expect(wrapper.get('#signature-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+      expect(wrapper.get('#signature-body').attributes('aria-describedby')).toBe('signature-hint signature-error')
+      expect(useToastStore().toasts).toEqual([])
+    })
+  })
+
+  it('기본이 아닌 서명을 고쳐 저장 — PUT 이름 · 본문, "저장했습니다."', async () => {
+    const { wrapper, requests } = await mountPage(server())
+    await pick(wrapper, 'en')
+    expect((wrapper.get('#signature-name').element as HTMLInputElement).value).toBe('영문')
+    await wrapper.get('#signature-name').setValue('English')
+    await typeLine(wrapper, 'ARA SYSTEM')
     await wrapper.get('#signature-save').trigger('click')
     await flushPromises()
 
-    expect(saveRequest(requests)?.data).toEqual({
-      bodyHtml: expect.stringMatching(/^<div style="font-family: [^"]+; font-size: 14px; line-height: 1\.75">/),
-      body: '김아라 · 인프라팀\nARA SYSTEM',
-      isForNew: true,
-      isForReply: false,
-    })
-    expect(wrapper.get('#signature-save-status').text()).toBe('저장했습니다. 다음에 메일을 쓸 때부터 들어갑니다.')
-    expect(useMailSignatureStore().signature?.isForReply).toBe(false)
+    const put = saveRequests(requests)[0]
+    expect(put?.url).toBe('/mail-signatures/en')
+    expect(put?.data).toMatchObject({ name: 'English', body: 'Ara Kim · Infrastructure Team\nARA SYSTEM' })
+    expect(wrapper.get('#signature-save-status').text()).toBe('저장했습니다.')
+    expect(rows(wrapper)).toEqual(['사내 답장과 전달', '대외 새 메일', 'English'])
 
-    await wrapper.get('#signature-for-new').setValue(false)
+    // 무엇이든 다시 바꾸면 내린다
+    await wrapper.get('#signature-name').setValue('English 2')
     expect(wrapper.get('#signature-save-status').text()).toBe('')
   })
 
-  it('비운 서명은 bodyHtml · body 모두 null 로 저장한다', async () => {
-    const { wrapper, requests } = await mountPage(server())
-    editorOf(wrapper.element).commands.clearContent(true)
+  describe('메일에 넣을 서명 — 고르는 대로 바로 저장', () => {
+    it('고르면 PUT 기본 둘 → 고른 칸 오른쪽에 "저장했습니다", 목록의 회색 글도 바뀐다', async () => {
+      const { wrapper, requests } = await mountPage(server())
+      await wrapper.get('#signature-default-reply').setValue('out')
+      await flushPromises()
 
-    await wrapper.get('#signature-save').trigger('click')
-    await flushPromises()
+      const put = requests.find((request) => request.method === 'PUT' && request.url === '/mail-signature-defaults')
+      expect(put?.data).toEqual({ newMessageId: 'out', replyId: 'out' })
+      expect(wrapper.get('[data-default-saved="reply"]').text()).toBe('저장했습니다')
+      expect(wrapper.get('[data-default-saved="new"]').text()).toBe('')
+      expect(rows(wrapper)).toEqual(['사내', '대외 새 메일, 답장과 전달', '영문'])
 
-    expect(saveRequest(requests)?.data).toEqual({ bodyHtml: null, body: null, isForNew: true, isForReply: true })
+      // 다시 고르면 내리고, 넣지 않음은 null
+      await wrapper.get('#signature-default-new').setValue('')
+      expect(wrapper.get('[data-default-saved="reply"]').text()).toBe('')
+      await flushPromises()
+      expect(requests.filter((request) => request.url === '/mail-signature-defaults' && request.method === 'PUT').at(-1)?.data).toEqual({
+        newMessageId: null,
+        replyId: 'out',
+      })
+      expect(wrapper.get('[data-default-saved="new"]').text()).toBe('저장했습니다')
+    })
+
+    it('저장하지 못하면 고르기 전 값으로 되돌리고 오류 알림', async () => {
+      const { wrapper } = await mountPage(server({ saveDefaults: () => fail(503, 'MAIL_001') }))
+      await wrapper.get('#signature-default-new').setValue('en')
+      await flushPromises()
+
+      expect((wrapper.get('#signature-default-new').element as HTMLSelectElement).value).toBe('out')
+      expect(wrapper.get('[data-default-saved="new"]').text()).toBe('')
+      expect(useToastStore().toasts.map((toast) => toast.message)).toEqual([ERROR_CODE_MESSAGES.MAIL_001])
+    })
   })
 
-  it('서버가 서명을 거절하면(VAL_001) 알림 없이 서명 칸 아래에 사전 문구', async () => {
-    const { wrapper } = await mountPage(server({ save: () => fail(400, 'VAL_001') }))
+  describe('다른 서명을 고를 때 · [새 서명] — 저장하지 않은 것이 있으면 묻는다', () => {
+    it('바꾼 것이 없으면 묻지 않고 연다', async () => {
+      const { wrapper } = await mountPage(server())
+      await pick(wrapper, 'in')
+      expect(dialogOpen(wrapper, 'signature-switch-dialog')).toBe(false)
+      expect(currentRow(wrapper)).toBe('in')
+      expect(wrapper.get('#signature-body').text()).toBe('김아라 · 인프라팀내선 1234')
+    })
 
-    await wrapper.get('#signature-save').trigger('click')
-    await flushPromises()
+    it('[계속 고치기]는 그대로(처음 초점), [바꾼 내용 버리기]는 누른 서명을 연다', async () => {
+      const { wrapper } = await mountPage(server())
+      await typeLine(wrapper, '덧붙인 줄')
+      await pick(wrapper, 'in')
 
-    expect(wrapper.get('#signature-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
-    expect(wrapper.get('#signature-body').attributes('aria-describedby')).toBe('signature-hint signature-error')
-    expect(useToastStore().toasts).toEqual([])
+      expect(dialogOpen(wrapper, 'signature-switch-dialog')).toBe(true)
+      expect(wrapper.get('#signature-switch-dialog').attributes('role')).toBe('alertdialog')
+      expect(wrapper.get('#signature-switch-title').text()).toBe('저장하지 않은 서명이 있습니다')
+      expect(wrapper.get('#signature-switch-message').text()).toBe('다른 서명을 고르면 ‘대외’ 서명에서 바꾼 내용이 사라집니다.')
+      expect(wrapper.get('#signature-switch-stay').text()).toBe('계속 고치기')
+      expect(wrapper.get('#signature-switch-confirm').text()).toBe('바꾼 내용 버리기')
+      expect(document.activeElement?.id).toBe('signature-switch-stay')
+
+      await wrapper.get('#signature-switch-stay').trigger('click')
+      await flushPromises()
+      expect(currentRow(wrapper)).toBe('out')
+      expect(wrapper.get('#signature-body').text()).toContain('덧붙인 줄')
+
+      await wrapper.get('#signature-new').trigger('click')
+      await flushPromises()
+      expect(wrapper.get('#signature-switch-message').text()).toBe('새 서명을 만들면 ‘대외’ 서명에서 바꾼 내용이 사라집니다.')
+      await wrapper.get('#signature-switch-stay').trigger('click')
+      await flushPromises()
+
+      await pick(wrapper, 'in')
+      await wrapper.get('#signature-switch-confirm').trigger('click')
+      await flushPromises()
+      expect(currentRow(wrapper)).toBe('in')
+      expect(wrapper.get('#signature-body').text()).toBe('김아라 · 인프라팀내선 1234')
+    })
+  })
+
+  describe('서명 지우기', () => {
+    it.each([
+      ['out', '‘대외’ 서명을 지울까요?', '새 메일에 넣는 서명이라 지우면 앞으로 새 메일에는 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.'],
+      ['in', '‘사내’ 서명을 지울까요?', '답장과 전달에 넣는 서명이라 지우면 앞으로 답장과 전달에는 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.'],
+      ['en', '‘영문’ 서명을 지울까요?', '지운 서명은 되돌릴 수 없습니다.'],
+    ])('묻는 글은 기본으로 넣던 곳마다 — %s (처음 초점 [취소])', async (id, title, message) => {
+      const { wrapper } = await mountPage(server())
+      await pick(wrapper, id)
+      await wrapper.get('#signature-delete').trigger('click')
+      await flushPromises()
+
+      expect(dialogOpen(wrapper, 'signature-delete-dialog')).toBe(true)
+      expect(wrapper.get('#signature-delete-dialog').attributes('role')).toBe('alertdialog')
+      expect(wrapper.get('#signature-delete-title').text()).toBe(title)
+      expect(wrapper.get('#signature-delete-message').text()).toBe(message)
+      expect(document.activeElement?.id).toBe('signature-delete-cancel')
+
+      await wrapper.get('#signature-delete-cancel').trigger('click')
+      await flushPromises()
+      expect(dialogOpen(wrapper, 'signature-delete-dialog')).toBe(false)
+    })
+
+    it('지우면 알림 · 목록의 첫 서명을 열고, 그 서명을 기본으로 넣던 곳은 넣지 않음', async () => {
+      const { wrapper, requests } = await mountPage(server())
+      await wrapper.get('#signature-delete').trigger('click')
+      await flushPromises()
+      await wrapper.get('#signature-delete-confirm').trigger('click')
+      await flushPromises()
+
+      expect(requests.some((request) => request.method === 'DELETE' && request.url === '/mail-signatures/out')).toBe(true)
+      expect(useToastStore().toasts.map((toast) => toast.message)).toEqual(['‘대외’ 서명을 지웠습니다.'])
+      expect(rows(wrapper)).toEqual(['사내 답장과 전달', '영문'])
+      expect(currentRow(wrapper)).toBe('in')
+      expect((wrapper.get('#signature-default-new').element as HTMLSelectElement).value).toBe('')
+    })
+
+    it('마지막 서명을 지우면 서명이 없을 때의 화면', async () => {
+      const { wrapper } = await mountPage(server({ list: [IN], defaults: { newMessageId: 'in', replyId: 'in' } }))
+      await wrapper.get('#signature-delete').trigger('click')
+      await flushPromises()
+      await wrapper.get('#signature-delete-confirm').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('아직 서명이 없습니다')
+      expect(wrapper.find('#signature-default-new').exists()).toBe(false)
+      expect(document.activeElement?.id).toBe('signature-empty-new')
+    })
   })
 
   describe('서명 그림', () => {
+    const png = (name = '로고.png', size = 1000) => new File([new Uint8Array(size)], name, { type: 'image/png' })
+
+    function choose(wrapper: VueWrapper, files: File[]) {
+      const picker = wrapper.get('#signature-image-input')
+      Object.defineProperty(picker.element, 'files', { value: files, configurable: true })
+      return picker.trigger('change')
+    }
+
     it('그림을 올려 보통(144) 폭으로 넣고 고른다 — 크기 줄: 작게 96 · 보통 144 · 원본(600 이하) · 그림 빼기', async () => {
       const { wrapper, requests } = await mountPage(server({ uploads: [ok(imageOf(NEW_IMAGE_ID, 800), 201)] }))
       await choose(wrapper, [png()])
       await flushPromises()
 
-      const upload = requests.find((request) => request.url === '/mail-signature/images')
-      expect(upload?.data).toBeInstanceOf(FormData)
+      expect(requests.find((request) => request.url === '/mail-signature/images')?.data).toBeInstanceOf(FormData)
       const image = () => wrapper.get('#signature-body img[src]')
       expect(image().attributes()).toMatchObject({ src: `/api/mail-signature/images/${NEW_IMAGE_ID}`, width: '144' })
-      expect(wrapper.get('[aria-labelledby="signature-image-size-label"]').attributes('role')).toBe('group')
-      const pressed = () => wrapper.get('[data-size][aria-pressed="true"]').text()
-      expect(pressed()).toBe('보통')
-
-      await wrapper.get('[data-size="small"]').trigger('click')
-      expect(image().attributes('width')).toBe('96')
-      expect(pressed()).toBe('작게')
+      expect(wrapper.get('.signature-editor__sizes [role="group"]').attributes('aria-labelledby')).toBe(
+        wrapper.get('.signature-editor__sizes-label').attributes('id'),
+      )
       await wrapper.get('[data-size="original"]').trigger('click')
       expect(image().attributes('width')).toBe('600')
-      expect(pressed()).toBe('원본')
-
       await wrapper.get('.signature-editor__remove').trigger('click')
       expect(wrapper.find('#signature-body img[src]').exists()).toBe(false)
-      expect(wrapper.find('[data-size]').exists()).toBe(false)
     })
 
-    it('작은 그림은 늘리지 않는다 — 원래 폭으로 넣는다', async () => {
-      const { wrapper } = await mountPage(server({ uploads: [ok(imageOf(NEW_IMAGE_ID, 80), 201)] }))
-      await choose(wrapper, [png()])
+    it('형식이 맞지 않으면 올리기 전에 막고 서명 칸 아래에 사전 문구 · 한 사람 20장 넘김(VAL_001)은 알림으로', async () => {
+      const { wrapper, requests } = await mountPage(server({ uploads: [fail(400, 'VAL_001')] }))
+      await choose(wrapper, [new File(['x'], '로고.webp', { type: 'image/webp' })])
       await flushPromises()
-      expect(wrapper.get('#signature-body img[src]').attributes('width')).toBe('80')
-    })
-
-    it.each([
-      ['PNG · JPG · GIF 가 아니면 FILE_001', new File(['x'], '로고.webp', { type: 'image/webp' }), 'FILE_001'],
-      ['확장자와 형식이 다르면 FILE_001', new File(['x'], '로고.gif', { type: 'image/png' }), 'FILE_001'],
-      ['300KB 를 넘으면 FILE_002', png('큰 로고.png', 300 * 1024 + 1), 'FILE_002'],
-    ] as const)('올리기 전에 막는다 — %s (서명 칸 아래에 사전 문구)', async (_label, file, code) => {
-      const { wrapper, requests } = await mountPage(server())
-      await choose(wrapper, [file])
-      await flushPromises()
-
       expect(requests.some((request) => request.url === '/mail-signature/images')).toBe(false)
-      expect(wrapper.get('#signature-error').text()).toBe(ERROR_CODE_MESSAGES[code])
-    })
-
-    it('3장까지 — 서명 칸에 있는 서로 다른 그림을 센다 (같은 그림 두 번은 한 장, 뺀 그림은 세지 않는다)', async () => {
-      const SECOND_ID = '00000000-0000-4000-8000-000000000002'
-      const imageTag = (id: string) => `<img src="/api/mail-signature/images/${id}" width="96" alt="">`
-      const withTwo: MailSignature = {
-        ...SIGNATURE,
-        bodyHtml: `<p>${imageTag(IMAGE_ID)}${imageTag(IMAGE_ID)}${imageTag(SECOND_ID)}</p>`,
-        images: [imageOf(IMAGE_ID, 200), imageOf(SECOND_ID, 200)],
-      }
-      const { wrapper, requests } = await mountPage(
-        server({
-          signature: withTwo,
-          uploads: [
-            ok(imageOf('00000000-0000-4000-8000-000000000003', 200), 201),
-            ok(imageOf('00000000-0000-4000-8000-000000000004', 200), 201),
-          ],
-        }),
-      )
-      const uploads = () => requests.filter((request) => request.url === '/mail-signature/images')
-
-      // 두 장이 있다 — 한 장만 더 올리고 넷째 장은 올리지 않고 막는다
-      await choose(wrapper, [png('a.png'), png('b.png')])
-      await flushPromises()
-      expect(uploads()).toHaveLength(1)
-      expect(wrapper.get('#signature-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
-      expect(useToastStore().toasts).toEqual([])
-
-      // 서명 칸에서 그림을 빼면 다시 넣을 수 있다 — 올려 두기만 한 그림은 세지 않는다 (그것은 서버의 10장 한도)
-      const editor = editorOf(wrapper.element)
-      let secondAt = -1
-      editor.state.doc.descendants((node, pos) => {
-        if (node.attrs.src === `/api/mail-signature/images/${SECOND_ID}`) secondAt = pos
-      })
-      editor.commands.setNodeSelection(secondAt)
-      await flushPromises()
-      await wrapper.get('.signature-editor__remove').trigger('click')
-
-      await choose(wrapper, [png('c.png')])
-      await flushPromises()
-      expect(uploads()).toHaveLength(2)
-      expect(wrapper.find('#signature-error').exists()).toBe(false)
-      expect(wrapper.findAll('#signature-body img[src]')).toHaveLength(4)
-    })
-
-    it('서버가 그림을 거절하면(FILE_001 등) 알림 없이 서명 칸 아래에 사전 문구', async () => {
-      const { wrapper } = await mountPage(server({ uploads: [fail(400, 'FILE_001')] }))
-      await choose(wrapper, [png()])
-      await flushPromises()
-
       expect(wrapper.get('#signature-error').text()).toBe(ERROR_CODE_MESSAGES.FILE_001)
-      expect(useToastStore().toasts).toEqual([])
-    })
 
-    it('올려 둔 그림이 10장을 넘었다는 거절(VAL_001)은 인터셉터의 알림으로 — 서명 칸 아래 문구는 형식 · 크기 거절만', async () => {
-      const { wrapper } = await mountPage(server({ uploads: [fail(400, 'VAL_001')] }))
       await choose(wrapper, [png()])
       await flushPromises()
-
       expect(wrapper.find('#signature-error').exists()).toBe(false)
       expect(useToastStore().toasts.map((toast) => toast.message)).toEqual([ERROR_CODE_MESSAGES.VAL_001])
-      expect(wrapper.find('#signature-body img[src]').exists()).toBe(false)
     })
   })
 
-  describe('나가기 확인 (디자인 README "2단계 › 서명")', () => {
+  describe('다른 화면으로 갈 때 (나가기 확인)', () => {
     /** 창 닫기 · 새로고침 때 브라우저 확인창을 띄우려 하는가 */
     function blocksUnload(): boolean {
       const event = new Event('beforeunload', { cancelable: true })
@@ -334,42 +615,22 @@ describe('MailSignaturePage', () => {
       return event.defaultPrevented
     }
 
-    function dialogOpen(wrapper: VueWrapper): boolean {
-      return wrapper.get('#signature-leave-dialog').attributes('open') !== undefined
-    }
-
-    /** 서명 끝에 한 줄을 더 쓴다 */
-    function typeLine(wrapper: VueWrapper, text: string) {
-      const editor = editorOf(wrapper.element)
-      editor.commands.insertContentAt(editor.state.doc.content.size, `<p>${text}</p>`)
-      return flushPromises()
-    }
-
-    it('바꾸고 떠나면 묻는다 — alertdialog · 처음 초점은 계속 고치기, [계속 고치기]는 머물고 [나가기]는 떠난다', async () => {
+    it('바꾸고 떠나면 묻는다 — [계속 고치기]는 머물고 [나가기]는 떠난다', async () => {
       const { wrapper, router } = await mountPage(server())
       await typeLine(wrapper, 'ARA SYSTEM')
       expect(blocksUnload()).toBe(true)
 
       const stay = router.push('/mail/inbox')
       await flushPromises()
-
-      const dialog = wrapper.get('#signature-leave-dialog')
-      expect(dialogOpen(wrapper)).toBe(true)
-      expect(dialog.attributes('role')).toBe('alertdialog')
-      expect(dialog.attributes('aria-labelledby')).toBe('signature-leave-title')
-      expect(dialog.attributes('aria-describedby')).toBe('signature-leave-message')
-      expect(wrapper.get('#signature-leave-title').text()).toBe('저장하지 않은 서명이 있습니다')
+      expect(dialogOpen(wrapper, 'signature-leave-dialog')).toBe(true)
       expect(wrapper.get('#signature-leave-message').text()).toBe('이 화면을 나가면 바꾼 서명이 사라집니다.')
-      expect(wrapper.get('#signature-leave-stay').text()).toBe('계속 고치기')
       expect(wrapper.get('#signature-leave-confirm').text()).toBe('나가기')
       expect(document.activeElement?.id).toBe('signature-leave-stay')
 
       await wrapper.get('#signature-leave-stay').trigger('click')
       await stay
       await flushPromises()
-      expect(dialogOpen(wrapper)).toBe(false)
       expect(router.currentRoute.value.fullPath).toBe('/settings/mail/signature')
-      expect(wrapper.get('#signature-body').text()).toContain('ARA SYSTEM')
 
       const leave = router.push('/mail/inbox')
       await flushPromises()
@@ -378,19 +639,13 @@ describe('MailSignaturePage', () => {
       expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
     })
 
-    it('불러온(저장한 뒤에는 저장한) 서명과 같으면 묻지 않는다 — 바꿨다 되돌린 것 · 저장한 뒤, 창 닫기 확인도 그동안만', async () => {
+    it('메일에 넣을 서명을 고른 것 · 저장한 뒤는 묻지 않는다', async () => {
       const { wrapper, router } = await mountPage(server())
+      await wrapper.get('#signature-default-reply').setValue('en')
+      await flushPromises()
       expect(blocksUnload()).toBe(false)
 
-      // 넣을 메일을 바꿨다 되돌리면 바꾼 것이 아니다
-      await wrapper.get('#signature-for-reply').setValue(false)
-      expect(blocksUnload()).toBe(true)
-      await wrapper.get('#signature-for-reply').setValue(true)
-      expect(blocksUnload()).toBe(false)
-
-      // 쓰고 저장하면 저장한 서명이 새 기준이다
       await typeLine(wrapper, 'ARA SYSTEM')
-      await wrapper.get('#signature-for-new').setValue(false)
       expect(blocksUnload()).toBe(true)
       await wrapper.get('#signature-save').trigger('click')
       await flushPromises()
@@ -398,7 +653,6 @@ describe('MailSignaturePage', () => {
 
       await router.push('/mail/inbox')
       await flushPromises()
-      expect(dialogOpen(wrapper)).toBe(false)
       expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
     })
 
@@ -408,7 +662,8 @@ describe('MailSignaturePage', () => {
         server({
           save: (request) =>
             new Promise<MockResult>((resolve) => {
-              finishSave = () => resolve(ok({ ...(request.data as SaveSignaturePayload), images: [], updatedAt: SAVED_AT }))
+              finishSave = () =>
+                resolve(ok({ id: 'out', ...(request.data as MailSignaturePayload), images: [], updatedAt: SAVED_AT }))
             }),
         }),
       )
@@ -419,57 +674,30 @@ describe('MailSignaturePage', () => {
 
       await router.push('/mail/inbox')
       await flushPromises()
-      expect(dialogOpen(wrapper)).toBe(false)
+      expect(dialogOpen(wrapper, 'signature-leave-dialog')).toBe(false)
       expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
 
       ;(finishSave as (() => void) | null)?.()
       await flushPromises()
       expect(blocksUnload()).toBe(false)
-      expect(useMailSignatureStore().signature?.body).toBe('김아라 · 인프라팀\nARA SYSTEM')
+      expect(useMailSignatureStore().signatureById('out')?.body).toBe('김아라 · 인프라팀\nARA SYSTEM\nARA SYSTEM')
     })
 
-    it('제한이 붙으면(13단계) 묻지 않는다 — 세션이 끝난 때처럼 창 닫기 확인도 뗀다', async () => {
+    it('제한이 붙거나(13단계) 세션이 끝나면 묻지 않는다', async () => {
       const { wrapper, router } = await mountPage(server())
       await typeLine(wrapper, 'ARA SYSTEM')
       expect(blocksUnload()).toBe(true)
 
       useAuthStore().markAuthenticated(USER, { restriction: 'passwordChange', twoFactorDeadline: null })
       await flushPromises()
-
       expect(blocksUnload()).toBe(false)
-      await router.push('/login')
-      await flushPromises()
-      expect(dialogOpen(wrapper)).toBe(false)
-      expect(router.currentRoute.value.fullPath).toBe('/login')
-    })
-
-    it('세션이 끝나면 묻지 않는다 — 서명 칸을 내리고 창 닫기 확인도 뗀다', async () => {
-      const { wrapper, router } = await mountPage(server())
-      await typeLine(wrapper, 'ARA SYSTEM')
-      expect(blocksUnload()).toBe(true)
 
       useAuthStore().expireSession()
       await flushPromises()
-
-      expect(blocksUnload()).toBe(false)
       await router.push('/login')
       await flushPromises()
       expect(wrapper.find('#signature-leave-dialog').exists()).toBe(false)
       expect(router.currentRoute.value.fullPath).toBe('/login')
     })
   })
-
-  it('미리 보기 — [답장]은 인용 위에 서명, 넣지 않기로 했으면 빼고 안내가 바뀐다', async () => {
-    const { wrapper } = await mountPage(server())
-    const replyMode = wrapper.get('[data-mode="reply"]')
-    await replyMode.trigger('click')
-
-    expect(replyMode.attributes('aria-pressed')).toBe('true')
-    expect(wrapper.find('.signature-preview__quote').exists()).toBe(true)
-    expect(wrapper.get('[data-signature-preview-note]').text()).toBe('답장과 전달에는 인용한 원문 위에 서명을 넣습니다.')
-
-    await wrapper.get('#signature-for-reply').setValue(false)
-    expect(wrapper.get('[data-signature-preview]').isVisible()).toBe(false)
-    expect(wrapper.get('[data-signature-preview-note]').text()).toBe('답장과 전달에는 서명을 넣지 않습니다.')
-  })
 })
diff --git a/frontend/src/pages/settings/MailSignaturePage.vue b/frontend/src/pages/settings/MailSignaturePage.vue
index a31d220..31dbb68 100644
--- a/frontend/src/pages/settings/MailSignaturePage.vue
+++ b/frontend/src/pages/settings/MailSignaturePage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-// 설정 › 메일 › 서명 (디자인 원본 Settings · README "2단계 › 서명") — /settings/mail/signature
-// 들어올 때마다 서명을 새로 받는다(다른 창에서 고쳤을 수 있다). 받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도".
+// 설정 › 메일 › 서명 (디자인 원본 Settings · Signature16 · README "2단계 › 서명" · "16단계 — 여러 서명") — /settings/mail/signature
+// 들어올 때마다 서명 목록과 메일에 넣을 서명(기본 둘)을 새로 받는다(다른 창에서 고쳤을 수 있다).
+// 받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도". 받으면 서명 화면(SignatureSettings — 목록 · 고치는 칸 · 기본 둘)을 그린다.
 // 서명 칸(TipTap)은 지연 로딩한다 — 못 받으면 쓰기 화면과 같은 "다시 시도" (ComposeEditorLoadError · MAIL_EDITOR_RETRY).
 import { defineAsyncComponent, provide, ref } from 'vue'
 
@@ -10,19 +11,19 @@ import { MAIL_EDITOR_RETRY } from '@/components/mail/editor/mail-editor-handle'
 import { SIGNATURE_TEXT } from '@/shared/constants/mail-signature'
 import { useMailSignatureStore } from '@/stores/mail-signature.store'
 
-/** 서명 칸 — TipTap 을 이 화면에서만 내려받는다 */
-const SignatureForm = defineAsyncComponent({
-  loader: () => import('@/components/mail/editor/signature/SignatureForm.vue'),
+/** 서명 화면 — TipTap 을 이 화면에서만 내려받는다 */
+const SignatureSettings = defineAsyncComponent({
+  loader: () => import('@/components/mail/editor/signature/SignatureSettings.vue'),
   errorComponent: ComposeEditorLoadError,
 })
 
 const signatureStore = useMailSignatureStore()
 
-/** 서명 칸을 새로 만든다 — 청크를 못 받았을 때 "다시 시도" */
-const formKey = ref<number>(0)
+/** 서명 화면을 새로 만든다 — 청크를 못 받았을 때 "다시 시도" */
+const settingsKey = ref<number>(0)
 
 provide(MAIL_EDITOR_RETRY, () => {
-  formKey.value += 1
+  settingsKey.value += 1
 })
 
 function reload() {
@@ -57,10 +58,9 @@ reload()
         leave-label=""
         @retry="reload"
       />
-      <SignatureForm
-        v-else-if="signatureStore.status === 'ready' && signatureStore.signature"
-        :key="formKey"
-        :signature="signatureStore.signature"
+      <SignatureSettings
+        v-else-if="signatureStore.status === 'ready'"
+        :key="settingsKey"
       />
       <div
         v-else
diff --git a/frontend/src/pages/settings/MailVacationPage.spec.ts b/frontend/src/pages/settings/MailVacationPage.spec.ts
index 72e3a3f..03871bd 100644
--- a/frontend/src/pages/settings/MailVacationPage.spec.ts
+++ b/frontend/src/pages/settings/MailVacationPage.spec.ts
@@ -1,10 +1,12 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Editor } from '@tiptap/core'
 import { mount, type VueWrapper } from '@vue/test-utils'
 import { createPinia, setActivePinia, type Pinia } from 'pinia'
 
+import { toMailHtml } from '@/components/mail/editor/mail-serialize'
 import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
 import { VACATION_TEXT } from '@/shared/constants/mail-vacation'
-import type { MailVacation, MailVacationState } from '@/shared/types/mail'
+import type { MailVacation, MailVacationExternal, MailVacationState } from '@/shared/types/mail'
 import { formatDate } from '@/shared/utils/format'
 import { endOfDayIso, startOfDayIso } from '@/shared/utils/mail-vacation'
 import { useAuthStore } from '@/stores/auth.store'
@@ -19,20 +21,48 @@ import {
   type MockRequest,
   type MockResult,
 } from '@/test-utils/mock-api'
+import { installProseMirrorDom } from '@/test-utils/prosemirror-dom'
 import { createTestRouter, routeViewProvide } from '@/test-utils/router'
+import { WAIT_FOR_TIMEOUT_MS } from '@/test-utils/timeouts'
 import MailVacationPage from './MailVacationPage.vue'
 
-// 설정 › 메일 › 부재중 자동 응답 (디자인 원본 SettingsVacation · 계약 2절 "부재중 자동 응답")
+// 설정 › 메일 › 부재중 자동 응답 (디자인 원본 SettingsVacation · 16단계 Settings16 1~4 · 계약 2절 "부재중 자동 응답")
+// 16단계: 내용 칸이 서명 칸과 같은 서식 편집기(지연 로딩한 TipTap 청크)이고, 회사 밖에서 온 메일에 보낼 응답을 고른다
 
 const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+/** 양식(지연 로딩한 TipTap 청크)을 기다리는 시간 — 서명 설정 테스트와 같은 값 */
+const EDITOR_LOAD_TIMEOUT_MS = 15_000
+/** 회사 밖 응답의 처음 값 — 사내와 같은 응답 · 쓴 글 없음 */
+const SAME: MailVacationExternal = { mode: 'same', subject: null, textBody: null, htmlBody: null }
 /** 설정한 적 없는 계정 — 꺼짐 · 빈 값 */
-const NEVER: MailVacation = { isEnabled: false, fromDate: null, toDate: null, subject: '', textBody: '' }
+const NEVER: MailVacation = {
+  isEnabled: false,
+  fromDate: null,
+  toDate: null,
+  subject: '',
+  textBody: '',
+  htmlBody: null,
+  external: SAME,
+}
+/** 저장해 둔 서식 본문 — 편집기가 다시 내보내는 모양 그대로 (그대로 저장하면 같은 글이 간다) */
+const SAVED_HTML = toMailHtml('<p>안녕하세요, 김아라입니다.</p><p><strong>11월 4일</strong>에 돌아옵니다.</p>')
 const SAVED: MailVacation = {
   isEnabled: true,
   fromDate: startOfDayIso('2026-10-30'),
   toDate: endOfDayIso('2026-11-03'),
-  subject: '부재중 안내 — 11월 4일 복귀',
-  textBody: '안녕하세요, 김아라입니다.\n급한 일은 인프라팀으로 연락해 주세요.',
+  subject: '부재중 안내 (11월 4일 복귀)',
+  textBody: '안녕하세요, 김아라입니다.\n11월 4일에 돌아옵니다.',
+  htmlBody: SAVED_HTML,
+  external: SAME,
+}
+/** 회사 밖에 따로 쓴 응답 — 서식(굵게)이 있어 서식 본문도 함께 간다 */
+const OUTSIDE_PARAGRAPHS = '<p>안녕하세요, ARA SYSTEM 김아라입니다.</p><p>급한 일은 <strong>인프라팀</strong>으로 보내 주세요.</p>'
+const OUTSIDE_HTML = toMailHtml(OUTSIDE_PARAGRAPHS)
+const SEPARATE: MailVacationExternal = {
+  mode: 'separate',
+  subject: '부재중 안내',
+  textBody: '안녕하세요, ARA SYSTEM 김아라입니다.\n급한 일은 인프라팀으로 보내 주세요.',
+  htmlBody: OUTSIDE_HTML,
 }
 
 interface Server {
@@ -40,11 +70,23 @@ interface Server {
   save?: (request: MockRequest) => MockResult | Promise<MockResult>
 }
 
+/** 편집 영역(id)의 TipTap 편집기 — TipTap 이 view.dom.editor 에 붙여 둔다 */
+function editorAt(id: string): Editor {
+  const dom = document.getElementById(id) as (HTMLElement & { editor?: Editor }) | null
+  if (!dom?.editor) throw new Error('편집기가 아직 없다')
+  return dom.editor
+}
+
 describe('MailVacationPage', () => {
   let pinia: Pinia
   let requests: MockRequest[]
   const mounted: VueWrapper[] = []
 
+  beforeAll(installProseMirrorDom)
+  beforeAll(async () => {
+    await import('@/components/settings/VacationForm.vue')
+  }, EDITOR_LOAD_TIMEOUT_MS)
+
   beforeEach(() => {
     pinia = createPinia()
     setActivePinia(pinia)
@@ -60,7 +102,19 @@ describe('MailVacationPage', () => {
     document.body.innerHTML = ''
   })
 
-  async function mountPage(server: Server = {}) {
+  async function waitForForm(wrapper: VueWrapper) {
+    await vi.waitFor(
+      () => {
+        if (!wrapper.find('#vacation-body').exists() || !wrapper.find('#vacation-external-body').exists()) {
+          throw new Error('부재중 양식을 불러오는 중')
+        }
+      },
+      { timeout: WAIT_FOR_TIMEOUT_MS },
+    )
+    await flushPromises()
+  }
+
+  async function mountPage(server: Server = {}, waitForEditors = true) {
     requests = installMockApi((request) => {
       if (request.method === 'GET' && request.url === '/mail-vacation') {
         const vacation = server.vacation ?? NEVER
@@ -80,75 +134,155 @@ describe('MailVacationPage', () => {
     })
     mounted.push(wrapper)
     await flushPromises()
+    if (waitForEditors) await waitForForm(wrapper)
     return { wrapper, router }
   }
 
-  const puts = () => requests.filter((request) => request.method === 'PUT').map((request) => request.data)
+  const puts = () => requests.filter((request) => request.method === 'PUT').map((request) => request.data as MailVacation)
   const value = (wrapper: VueWrapper, selector: string) => (wrapper.get(selector).element as HTMLInputElement).value
+  const checked = (wrapper: VueWrapper, selector: string) => (wrapper.get(selector).element as HTMLInputElement).checked
+  const separateSection = (wrapper: VueWrapper) => wrapper.get('[data-vacation-external-separate]').element as HTMLElement
 
   async function save(wrapper: VueWrapper) {
     await wrapper.get('#vacation-save').trigger('click')
     await flushPromises()
   }
 
-  it('설정한 적 없는 계정 — 꺼짐 · 끌 때까지 · 빈 칸, 끈 동안은 아래 칸이 흐리다', async () => {
+  /** 편집기의 내용을 바꾼다 — 사용자가 고친 것처럼 바뀜(update)을 알린다 */
+  async function setBody(id: string, html: string) {
+    editorAt(id).commands.setContent(html)
+    await flushPromises()
+  }
+
+  it('설정한 적 없는 계정 — 꺼짐 · 끌 때까지 · 빈 칸 · 사내와 같은 응답, 끈 동안은 아래 칸이 흐리다', async () => {
     const { wrapper } = await mountPage()
 
     expect(wrapper.get('h1').text()).toBe('부재중 자동 응답')
-    expect((wrapper.get('#vacation-enabled').element as HTMLInputElement).checked).toBe(false)
-    expect((wrapper.get('#vacation-period-until-off').element as HTMLInputElement).checked).toBe(true)
+    expect(checked(wrapper, '#vacation-enabled')).toBe(false)
+    expect(checked(wrapper, '#vacation-period-until-off')).toBe(true)
     expect(wrapper.get('fieldset').attributes('disabled')).toBeDefined()
     expect(wrapper.get('#vacation-subject').attributes('disabled')).toBeDefined()
-    expect(wrapper.get('#vacation-body').attributes('disabled')).toBeDefined()
     // 엔진이 바이트로 막는 한도 안 — 한글로 채워도 저장된다 (계약 2절 "부재중 자동 응답"의 "길이 한도의 근거")
     expect(wrapper.get('#vacation-subject').attributes('maxlength')).toBe('150')
-    expect(wrapper.get('#vacation-body').attributes('maxlength')).toBe('600')
+    // 내용 칸은 편집기 — 끈 동안은 읽기만
+    const body = wrapper.get('#vacation-body')
+    expect(body.attributes()).toMatchObject({ role: 'textbox', 'aria-disabled': 'true', contenteditable: 'false' })
+    expect(body.attributes('aria-labelledby')).toBe('vacation-body-label')
+    expect(body.attributes('aria-describedby')).toBe('vacation-body-hint')
+    expect(wrapper.get('#vacation-body-label').text()).toBe('내용')
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe('0 / 600')
+    expect(wrapper.get('#vacation-body-hint').text()).toBe(
+      '굵게, 기울임, 밑줄, 글자 색, 링크를 쓸 수 있습니다. 그림은 넣을 수 없고, 서명은 붙지 않습니다.',
+    )
+    expect(wrapper.get('[data-vacation-external]').attributes('disabled')).toBeDefined()
+    expect(checked(wrapper, '#vacation-external-same')).toBe(true)
+    expect(separateSection(wrapper).style.display).toBe('none')
     expect(wrapper.get('[data-vacation-preview-note]').text()).toBe('꺼져 있어 자동으로 답하지 않습니다.')
   })
 
-  it('저장한 값으로 채운다 — 날짜는 브라우저 시간대의 날짜로, 미리 보기는 보낸 사람 · 제목 · 내용', async () => {
+  it('내용 칸 툴바 — 굵게 · 기울임 · 밑줄 | 글자 색 · 링크, 그림 단추 없음 (서명 칸과 같은 편집기)', async () => {
+    const { wrapper } = await mountPage()
+    const toolbars = wrapper.findAll('[role="toolbar"]')
+
+    expect(toolbars.map((toolbar) => toolbar.attributes('aria-label'))).toEqual(['자동 응답 서식', '회사 밖 자동 응답 서식'])
+    expect(toolbars[0]?.findAll('button').map((button) => button.attributes('aria-label'))).toEqual([
+      '굵게',
+      '기울임',
+      '밑줄',
+      '글자 색: 기본',
+      '링크',
+    ])
+    expect(toolbars[0]?.attributes('aria-controls')).toBe('vacation-body')
+    expect(toolbars[1]?.attributes('aria-controls')).toBe('vacation-external-body')
+  })
+
+  it('저장한 값으로 채운다 — 날짜는 브라우저 시간대의 날짜로, 내용은 서식 그대로, 미리 보기는 보낸 사람 · 제목 · 서식 내용', async () => {
     const { wrapper } = await mountPage({ vacation: SAVED })
 
-    expect((wrapper.get('#vacation-period-range').element as HTMLInputElement).checked).toBe(true)
+    expect(checked(wrapper, '#vacation-period-range')).toBe(true)
     expect(value(wrapper, '#vacation-from')).toBe('2026-10-30')
     expect(value(wrapper, '#vacation-to')).toBe('2026-11-03')
     expect(wrapper.get('#vacation-period-hint').text()).toBe(VACATION_TEXT.rangeHint)
     expect(value(wrapper, '#vacation-subject')).toBe(SAVED.subject)
+    expect(wrapper.get('#vacation-body').attributes('contenteditable')).toBe('true')
+    expect(wrapper.get('#vacation-body').findAll('p').map((paragraph) => paragraph.text())).toEqual([
+      '안녕하세요, 김아라입니다.',
+      '11월 4일에 돌아옵니다.',
+    ])
+    expect(wrapper.get('#vacation-body strong').text()).toBe('11월 4일')
+    // 글자 수는 서식을 뺀 보이는 글
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe(`${SAVED.textBody.length} / 600`)
     const preview = wrapper.get('[data-vacation-preview]')
     expect(preview.text()).toContain('김아라 <ara.kim@arasystem.it.kr>')
     expect(preview.get('[data-vacation-preview-subject]').text()).toBe(SAVED.subject)
-    expect(preview.get('[data-vacation-preview-body]').element.textContent).toBe(SAVED.textBody)
+    expect(preview.get('[data-vacation-preview-body]').element.innerHTML).toBe(
+      '<p>안녕하세요, 김아라입니다.</p><p><strong>11월 4일</strong>에 돌아옵니다.</p>',
+    )
     expect(wrapper.get('[data-vacation-preview-note]').text()).toBe(
       '받은 메일의 보낸 사람에게 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
     )
   })
 
+  it('16단계 전에 저장한 글만 있는 응답(서식 본문 · 회사 밖 칸이 없는 서버)은 줄마다 문단으로 열고, 그대로 저장하면 일곱 칸을 보낸다', async () => {
+    const old = {
+      isEnabled: true,
+      fromDate: null,
+      toDate: null,
+      subject: '부재중 안내',
+      textBody: '안녕하세요.\n\n복귀 후 답장 드리겠습니다.',
+    }
+    const { wrapper } = await mountPage({ vacation: old })
+
+    expect(wrapper.get('#vacation-body').findAll('p').map((paragraph) => paragraph.text())).toEqual([
+      '안녕하세요.',
+      '',
+      '복귀 후 답장 드리겠습니다.',
+    ])
+    expect(checked(wrapper, '#vacation-external-same')).toBe(true)
+    await save(wrapper)
+
+    expect(puts()).toEqual([
+      {
+        ...old,
+        // 서식이 없으니 서식 본문은 보내지 않는다 — 글만 쓴 직원은 옛 판 그대로 (16단계 리뷰)
+        htmlBody: null,
+        external: SAME,
+      },
+    ])
+  })
+
   it('받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도"', async () => {
     let reply: MailVacation | MockResult = fail(503, 'MAIL_001')
-    const { wrapper } = await mountPage({
-      get vacation() {
-        return reply
+    const { wrapper } = await mountPage(
+      {
+        get vacation() {
+          return reply
+        },
       },
-    })
+      false,
+    )
 
     expect(wrapper.text()).toContain(ERROR_CODE_MESSAGES.MAIL_001)
     expect(useToastStore().toasts).toEqual([])
     reply = SAVED
     await wrapper.get('.mail-load-error__action').trigger('click')
     await flushPromises()
+    await waitForForm(wrapper)
     expect(wrapper.find('#vacation-enabled').exists()).toBe(true)
   })
 
-  it('켜고 기간을 정해 저장 — 시작일 0시 · 끝나는 날 다음 날 0시를 UTC 로 보내고 "…부터 …까지 자동으로 답합니다."', async () => {
+  it('켜고 기간을 정해 저장 — 시작일 0시 · 끝나는 날 다음 날 0시를 UTC 로, 내용은 보이는 글 · 서식 본문을 함께 보내고 "…부터 …까지 자동으로 답합니다."', async () => {
     const { wrapper } = await mountPage()
     await wrapper.get('#vacation-enabled').setValue(true)
+    expect(wrapper.get('#vacation-body').attributes('contenteditable')).toBe('true')
     await wrapper.get('#vacation-period-range').setValue(true)
     // 날짜가 비었으면 시작을 오늘로 채운다
     expect(value(wrapper, '#vacation-from')).toBe(formatDate(new Date()))
     await wrapper.get('#vacation-from').setValue('2026-10-30')
     await wrapper.get('#vacation-to').setValue('2026-11-03')
     await wrapper.get('#vacation-subject').setValue('부재중 안내')
-    await wrapper.get('#vacation-body').setValue('휴가입니다.')
+    await setBody('vacation-body', '<p><strong>휴가</strong>입니다.</p>')
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe('6 / 600')
     await save(wrapper)
 
     expect(puts()).toEqual([
@@ -158,6 +292,8 @@ describe('MailVacationPage', () => {
         toDate: new Date(2026, 10, 4).toISOString(),
         subject: '부재중 안내',
         textBody: '휴가입니다.',
+        htmlBody: toMailHtml('<p><strong>휴가</strong>입니다.</p>'),
+        external: SAME,
       },
     ])
     expect(wrapper.get('#vacation-save-status').text()).toBe(
@@ -165,12 +301,70 @@ describe('MailVacationPage', () => {
     )
     expect(useMailVacationStore().vacation?.isEnabled).toBe(true)
 
-    // 다시 바꾸면 내린다
+    // 다시 바꾸면 내린다 — 제목 칸이든 내용 칸이든
     await wrapper.get('#vacation-subject').setValue('부재중 안내 (수정)')
     expect(wrapper.get('#vacation-save-status').text()).toBe('')
+    await save(wrapper)
+    expect(wrapper.get('#vacation-save-status').text()).not.toBe('')
+    await setBody('vacation-body', '<p>휴가입니다!</p>')
+    expect(wrapper.get('#vacation-save-status').text()).toBe('')
   })
 
-  it('켜 둘 때는 제목 · 내용 · 기간을 먼저 본다 — 칸 아래에 사전 문구(VAL_001), 첫 칸으로 초점 · 보내지 않는다', async () => {
+  it('서식이 하나도 없으면 서식 본문을 보내지 않는다(htmlBody null) — 굵게 · 링크 · 글자 색이 하나라도 있으면 함께 보낸다 (16단계 리뷰)', async () => {
+    const { wrapper } = await mountPage({ vacation: SAVED })
+    const lastPut = () => puts().at(-1)
+
+    // 글만 — 문단 · 줄바꿈은 글자 본문에도 남아 서식이 아니다
+    await setBody('vacation-body', '<p>휴가입니다.</p><p>11월 4일에<br>돌아옵니다.</p>')
+    await save(wrapper)
+    expect(lastPut()).toMatchObject({ textBody: '휴가입니다.\n11월 4일에\n돌아옵니다.', htmlBody: null })
+
+    // 굵게 하나
+    await setBody('vacation-body', '<p><strong>휴가</strong>입니다.</p>')
+    await save(wrapper)
+    expect(lastPut()?.htmlBody).toBe(toMailHtml('<p><strong>휴가</strong>입니다.</p>'))
+
+    // 링크 · 글자 색도 서식이다
+    await setBody('vacation-body', '<p><a href="mailto:infra@arasystem.it.kr">인프라팀</a>으로 연락해 주세요.</p>')
+    await save(wrapper)
+    expect(lastPut()?.htmlBody).toContain('href="mailto:infra@arasystem.it.kr"')
+    await setBody('vacation-body', '<p><span style="color: #0E7C86">11월 4일</span>에 돌아옵니다.</p>')
+    await save(wrapper)
+    expect(lastPut()?.htmlBody).toContain('11월 4일')
+    expect(lastPut()?.htmlBody).not.toBeNull()
+
+    // 서식을 모두 지우면 다시 글만 — 꺼 두고 저장할 때도 같다
+    await setBody('vacation-body', '<p>11월 4일에 돌아옵니다.</p>')
+    await wrapper.get('#vacation-enabled').setValue(false)
+    await save(wrapper)
+    expect(lastPut()).toMatchObject({ isEnabled: false, textBody: '11월 4일에 돌아옵니다.', htmlBody: null })
+  })
+
+  it('서버가 MAIL_013(엔진 규칙 한도)으로 거절하면 알림 없이 [저장] 옆에 부재중 글 — 화면을 떠난 뒤면 그 글로 알림', async () => {
+    let reply: MockResult | Promise<MockResult> = fail(400, 'MAIL_013')
+    const { wrapper, router } = await mountPage({ vacation: SAVED, save: () => reply })
+    await save(wrapper)
+
+    expect(wrapper.get('#vacation-save-status').text()).toBe('자동 응답이 너무 깁니다. 서식이나 내용을 줄여 주세요.')
+    expect(wrapper.get('#vacation-save-status').classes()).toContain('is-error')
+    expect(useToastStore().toasts).toEqual([])
+
+    let finish: (result: MockResult) => void = () => undefined
+    reply = new Promise<MockResult>((resolve) => {
+      finish = resolve
+    })
+    await wrapper.get('#vacation-subject').setValue('바꾼 제목')
+    await save(wrapper)
+    await router.push('/mail/inbox')
+    wrapper.unmount()
+    finish(fail(400, 'MAIL_013'))
+    await flushPromises()
+    expect(useToastStore().toasts.map((toast) => [toast.kind, toast.message])).toEqual([
+      ['error', '자동 응답이 너무 깁니다. 서식이나 내용을 줄여 주세요.'],
+    ])
+  })
+
+  it('켜 둘 때는 기간 · 제목 · 내용을 먼저 본다 — 칸 아래에 사전 문구(VAL_001), 첫 칸으로 초점 · 보내지 않는다, 고치기 시작한 칸만 내린다', async () => {
     const { wrapper } = await mountPage()
     await wrapper.get('#vacation-enabled').setValue(true)
     await wrapper.get('#vacation-period-range').setValue(true)
@@ -183,46 +377,94 @@ describe('MailVacationPage', () => {
     expect(wrapper.get('#vacation-subject-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
     expect(wrapper.get('#vacation-body-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
     expect(wrapper.get('#vacation-subject').attributes('aria-invalid')).toBe('true')
+    // 편집기 칸도 aria-invalid · 빨간 테두리 — 설명은 오류 → 안내 차례
+    expect(wrapper.get('#vacation-body').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.get('#vacation-body').attributes('aria-describedby')).toBe('vacation-body-error vacation-body-hint')
+    expect(wrapper.get('.signature-editor').classes()).toContain('signature-editor--invalid')
     expect(document.activeElement?.id).toBe('vacation-from')
+    expect(useToastStore().toasts).toEqual([])
 
     // 고친 칸의 문구만 내린다
     await wrapper.get('#vacation-subject').setValue('부재중 안내')
     expect(wrapper.find('#vacation-subject-error').exists()).toBe(false)
     expect(wrapper.find('#vacation-body-error').exists()).toBe(true)
+    await setBody('vacation-body', '<p>휴가입니다.</p>')
+    expect(wrapper.find('#vacation-body-error').exists()).toBe(false)
+    expect(wrapper.get('#vacation-body').attributes('aria-invalid')).toBeUndefined()
+    expect(wrapper.find('#vacation-period-error').exists()).toBe(true)
   })
 
-  it('켠 채 저장할 때 제목 150자 · 내용 600자를 넘으면(4단계 한도로 저장해 둔 긴 글 등) 칸 아래에 사전 문구 — 줄이면 저장한다', async () => {
-    const { wrapper } = await mountPage({ vacation: { ...SAVED, subject: 'S'.repeat(151), textBody: 'B'.repeat(601) } })
+  it('내용 칸이 비었으면 내용 칸에 초점 — 사전 문구(VAL_001)', async () => {
+    const { wrapper } = await mountPage({ vacation: { ...SAVED, textBody: '', htmlBody: null } })
+    await save(wrapper)
+
+    expect(puts()).toEqual([])
+    expect(wrapper.get('#vacation-body-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe('0 / 600')
+    expect(document.activeElement?.id).toBe('vacation-body')
+  })
+
+  it('켠 채 저장할 때 제목 150자 · 내용 600자를 넘으면(4단계 한도로 저장해 둔 긴 글 등) 제목은 사전 문구, 내용은 "내용은 600자까지 쓸 수 있습니다." + 빨간 글자 수 — 줄이면 저장한다', async () => {
+    const { wrapper } = await mountPage({ vacation: { ...SAVED, subject: 'S'.repeat(151), textBody: 'B'.repeat(601), htmlBody: null } })
+    const count = wrapper.get('[data-vacation-count="vacation"]')
+    expect(count.text()).toBe('601 / 600')
+    expect(count.classes()).toContain('is-over')
     await save(wrapper)
 
     expect(puts()).toEqual([])
     expect(wrapper.get('#vacation-subject-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
-    expect(wrapper.get('#vacation-body-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+    expect(wrapper.get('#vacation-body-error').text()).toBe('내용은 600자까지 쓸 수 있습니다.')
     expect(document.activeElement?.id).toBe('vacation-subject')
+    expect(useToastStore().toasts).toEqual([])
 
     await wrapper.get('#vacation-subject').setValue('S'.repeat(150))
-    await wrapper.get('#vacation-body').setValue('B'.repeat(600))
+    await setBody('vacation-body', `<p>${'B'.repeat(600)}</p>`)
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe('600 / 600')
+    expect(wrapper.get('[data-vacation-count="vacation"]').classes()).not.toContain('is-over')
     await save(wrapper)
-    expect(puts()).toEqual([{ ...SAVED, subject: 'S'.repeat(150), textBody: 'B'.repeat(600) }])
+    expect(puts()).toEqual([
+      {
+        ...SAVED,
+        subject: 'S'.repeat(150),
+        textBody: 'B'.repeat(600),
+        htmlBody: null,
+      },
+    ])
+  })
+
+  it('글은 600자 안인데 서식이 많아 서식 본문이 10,000자를 넘으면 사전 문구(VAL_001) — 서명과 같은 한도', async () => {
+    const { wrapper } = await mountPage({ vacation: SAVED })
+    const colored = Array.from({ length: 200 }, () => '<span style="color: #B42318">가</span><span style="color: #067647">나</span>').join('')
+    await setBody('vacation-body', `<p>${colored}</p>`)
+    await save(wrapper)
+
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe('400 / 600')
+    expect(puts()).toEqual([])
+    expect(wrapper.get('#vacation-body-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
   })
 
   it('켜진 옛 긴 글(4단계에 저장한 내용 1,000자)도 끄는 것은 늘 저장된다 — 꺼 둘 때는 길이를 보지 않는다 (서버는 꺼 둔 채로 4단계 한도까지 받는다)', async () => {
     const longBody = 'B'.repeat(1_000)
-    const { wrapper } = await mountPage({ vacation: { ...SAVED, textBody: longBody } })
+    const { wrapper } = await mountPage({ vacation: { ...SAVED, textBody: longBody, htmlBody: null } })
     await wrapper.get('#vacation-enabled').setValue(false)
+    // 꺼 두면 넘은 글자 수도 빨갛지 않다 — 켤 때만 센다
+    expect(wrapper.get('[data-vacation-count="vacation"]').classes()).not.toContain('is-over')
     await save(wrapper)
 
-    expect(puts()).toEqual([{ ...SAVED, isEnabled: false, textBody: longBody }])
+    expect(puts()).toEqual([
+      { ...SAVED, isEnabled: false, textBody: longBody, htmlBody: null },
+    ])
     expect(wrapper.find('#vacation-body-error').exists()).toBe(false)
     expect(wrapper.get('#vacation-save-status').text()).toBe('저장했습니다. 자동 응답을 껐고, 써 둔 글은 그대로 남아 있습니다.')
     expect(useMailVacationStore().vacation?.isEnabled).toBe(false)
-    expect(value(wrapper, '#vacation-body')).toBe(longBody)
+    expect(wrapper.get('[data-vacation-count="vacation"]').text()).toBe('1,000 / 600')
   })
 
-  it('끄면 빈 제목 · 내용도 저장된다 — 쓴 글은 남기고 "자동 응답을 껐습니다 — 써 둔 글은 남겨 둡니다."', async () => {
+  it('끄면 빈 제목 · 내용도 저장된다 — 쓴 글은 남기고 "자동 응답을 껐고, 써 둔 글은 그대로 남아 있습니다."', async () => {
     const { wrapper } = await mountPage({ vacation: SAVED })
     await wrapper.get('#vacation-enabled').setValue(false)
     expect(value(wrapper, '#vacation-subject')).toBe(SAVED.subject)
+    expect(wrapper.get('#vacation-body').attributes('contenteditable')).toBe('false')
     await save(wrapper)
 
     expect(puts()).toEqual([{ ...SAVED, isEnabled: false }])
@@ -276,6 +518,220 @@ describe('MailVacationPage', () => {
     ])
   })
 
+  describe('회사 밖에서 온 메일 (16단계 — 디자인 원본 Settings16 1 · 2 · 4)', () => {
+    const optionTexts = (wrapper: VueWrapper) =>
+      wrapper.get('[data-vacation-external]').findAll('.vacation-external__option').map((option) => option.text())
+
+    it('내용 칸과 [저장] 사이 — 내 주소의 도메인 설명 · 고르기 셋(사내와 같은 응답 · 보내지 않기 · 따로 쓰기), 처음 값은 사내와 같은 응답', async () => {
+      const { wrapper } = await mountPage({ vacation: SAVED })
+      const fieldset = wrapper.get('[data-vacation-external]')
+
+      expect(fieldset.get('legend').text()).toBe('회사 밖에서 온 메일')
+      expect(fieldset.get('#vacation-external-hint').text()).toBe('보낸 사람 주소가 회사 메일 주소(@arasystem.it.kr)가 아닌 메일입니다.')
+      expect(optionTexts(wrapper)).toEqual([
+        '사내와 같은 응답회사 안팎 모두 위의 제목과 내용으로 답합니다.',
+        '보내지 않기회사 밖에서 온 메일에는 자동으로 답하지 않습니다.',
+        '따로 쓰기회사 밖에서 온 메일에 보낼 제목과 내용을 따로 씁니다.',
+      ])
+      expect(wrapper.get('#vacation-external-none').attributes('aria-describedby')).toBe('vacation-external-none-hint')
+      expect(checked(wrapper, '#vacation-external-same')).toBe(true)
+      // 자리 — 내용 칸 뒤 · [저장] 앞
+      const position = (selector: string) => wrapper.get(selector).element
+      expect(position('#vacation-body').compareDocumentPosition(fieldset.element)).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+      expect(fieldset.element.compareDocumentPosition(position('#vacation-save'))).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+      expect(separateSection(wrapper).style.display).toBe('none')
+    })
+
+    it('따로 쓰기 — 바로 아래에 회사 밖에 보낼 제목 · 내용 칸이 열리고, 저장하면 external 에 함께 보낸다', async () => {
+      const { wrapper } = await mountPage({ vacation: SAVED })
+      await wrapper.get('#vacation-external-separate').setValue(true)
+
+      expect(separateSection(wrapper).style.display).toBe('')
+      expect(wrapper.get('label[for="vacation-external-subject"]').text()).toBe('회사 밖에 보낼 제목')
+      expect(wrapper.get('#vacation-external-body-label').text()).toBe('회사 밖에 보낼 내용')
+      // 회사 밖 내용 칸에는 아래 안내가 없다
+      expect(wrapper.find('#vacation-external-body-hint').exists()).toBe(false)
+      expect(wrapper.get('#vacation-external-body').attributes('aria-describedby')).toBeUndefined()
+      await wrapper.get('#vacation-external-subject').setValue(SEPARATE.subject ?? '')
+      await setBody('vacation-external-body', OUTSIDE_PARAGRAPHS)
+      expect(wrapper.get('[data-vacation-count="vacation-external"]').text()).toBe(`${SEPARATE.textBody?.length} / 600`)
+      await save(wrapper)
+
+      expect(puts()).toEqual([{ ...SAVED, external: SEPARATE }])
+    })
+
+    it('회사 밖 칸도 서식이 없으면 서식 본문을 보내지 않는다 — 기울임 하나면 함께 보낸다 (16단계 리뷰)', async () => {
+      const { wrapper } = await mountPage({ vacation: SAVED })
+      await wrapper.get('#vacation-external-separate').setValue(true)
+      await wrapper.get('#vacation-external-subject').setValue('부재중 안내')
+      await setBody('vacation-external-body', '<p>11월 20일까지 자리를 비웁니다.</p>')
+      await save(wrapper)
+
+      expect(puts().at(-1)?.external).toEqual({
+        mode: 'separate',
+        subject: '부재중 안내',
+        textBody: '11월 20일까지 자리를 비웁니다.',
+        htmlBody: null,
+      })
+      // 사내 칸은 그대로 서식(굵게)이 있어 서식 본문이 간다
+      expect(puts().at(-1)?.htmlBody).toBe(SAVED_HTML)
+
+      await setBody('vacation-external-body', '<p><em>11월 20일</em>까지 자리를 비웁니다.</p>')
+      await save(wrapper)
+      expect(puts().at(-1)?.external?.htmlBody).toBe(toMailHtml('<p><em>11월 20일</em>까지 자리를 비웁니다.</p>'))
+    })
+
+    it('저장해 둔 따로 쓰기로 연다 — 칸이 열려 있고 회사 밖 제목 · 서식 내용이 그대로', async () => {
+      const { wrapper } = await mountPage({ vacation: { ...SAVED, external: SEPARATE } })
+
+      expect(checked(wrapper, '#vacation-external-separate')).toBe(true)
+      expect(separateSection(wrapper).style.display).toBe('')
+      expect(value(wrapper, '#vacation-external-subject')).toBe(SEPARATE.subject)
+      expect(wrapper.get('#vacation-external-body').findAll('p').map((paragraph) => paragraph.text())).toEqual([
+        '안녕하세요, ARA SYSTEM 김아라입니다.',
+        '급한 일은 인프라팀으로 보내 주세요.',
+      ])
+      // 그대로 저장하면 같은 글이 간다
+      await save(wrapper)
+      expect(puts()).toEqual([{ ...SAVED, external: SEPARATE }])
+    })
+
+    it('다른 고르기로 바꾸면 두 칸을 닫지만 써 둔 글은 남겨 두고 함께 저장한다 — 다시 따로 쓰기를 고르면 그대로', async () => {
+      const { wrapper } = await mountPage({ vacation: { ...SAVED, external: SEPARATE } })
+      await wrapper.get('#vacation-external-none').setValue(true)
+
+      expect(separateSection(wrapper).style.display).toBe('none')
+      await save(wrapper)
+      expect(puts()).toEqual([{ ...SAVED, external: { ...SEPARATE, mode: 'none' } }])
+
+      await wrapper.get('#vacation-external-separate').setValue(true)
+      expect(separateSection(wrapper).style.display).toBe('')
+      expect(value(wrapper, '#vacation-external-subject')).toBe(SEPARATE.subject)
+      expect(wrapper.get('#vacation-external-body').text()).toContain('급한 일은 인프라팀으로 보내 주세요.')
+    })
+
+    it('켤 때 회사 밖 두 칸은 따로 쓰기일 때만 본다 — 비었으면 사전 문구 · 600자를 넘으면 같은 전용 글, 사내와 같은 응답 · 보내지 않기면 비어 있어도 저장한다', async () => {
+      const { wrapper } = await mountPage({ vacation: SAVED })
+      await wrapper.get('#vacation-external-separate').setValue(true)
+      await save(wrapper)
+
+      expect(puts()).toEqual([])
+      expect(wrapper.get('#vacation-external-subject-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+      expect(wrapper.get('#vacation-external-subject').attributes('aria-invalid')).toBe('true')
+      expect(wrapper.get('#vacation-external-body-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+      expect(wrapper.get('#vacation-external-body').attributes('aria-describedby')).toBe('vacation-external-body-error')
+      expect(document.activeElement?.id).toBe('vacation-external-subject')
+
+      await wrapper.get('#vacation-external-subject').setValue('부재중 안내')
+      await setBody('vacation-external-body', `<p>${'가'.repeat(601)}</p>`)
+      const count = wrapper.get('[data-vacation-count="vacation-external"]')
+      expect(count.text()).toBe('601 / 600')
+      expect(count.classes()).toContain('is-over')
+      await save(wrapper)
+      expect(puts()).toEqual([])
+      expect(wrapper.get('#vacation-external-body-error').text()).toBe('내용은 600자까지 쓸 수 있습니다.')
+      expect(document.activeElement?.id).toBe('vacation-external-body')
+
+      // 보내지 않기로 바꾸면 회사 밖 두 칸의 문구를 내리고, 길어도 저장한다 (글은 남긴다)
+      await wrapper.get('#vacation-external-none').setValue(true)
+      expect(wrapper.find('#vacation-external-body-error').exists()).toBe(false)
+      await save(wrapper)
+      expect(puts()).toHaveLength(1)
+      expect(puts()[0]?.external).toMatchObject({ mode: 'none', subject: '부재중 안내', textBody: '가'.repeat(601) })
+    })
+
+    it('자동 응답을 끄면 이 칸도 다른 칸처럼 흐려진다 — 고르기 · 회사 밖 칸 모두', async () => {
+      const { wrapper } = await mountPage({ vacation: { ...SAVED, external: SEPARATE } })
+      await wrapper.get('#vacation-enabled').setValue(false)
+
+      expect(wrapper.get('[data-vacation-external]').attributes('disabled')).toBeDefined()
+      expect(wrapper.get('#vacation-external-subject').attributes('disabled')).toBeDefined()
+      expect(wrapper.get('#vacation-external-body').attributes('contenteditable')).toBe('false')
+    })
+  })
+
+  describe('미리 보기 [사내 | 회사 밖] (16단계 — 디자인 원본 Settings16 3)', () => {
+    const preview = (wrapper: VueWrapper) => wrapper.get('[data-vacation-preview]')
+    const sides = (wrapper: VueWrapper) =>
+      preview(wrapper)
+        .findAll('[data-preview-side]')
+        .map((button) => [button.text(), button.attributes('aria-pressed')])
+
+    async function pick(wrapper: VueWrapper, side: 'inside' | 'outside') {
+      await preview(wrapper).get(`[data-preview-side="${side}"]`).trigger('click')
+    }
+
+    it('전환 — "미리 볼 답장" · 처음은 사내 쪽, 사내와 같은 응답이면 두 쪽이 같은 답장이고 아래 글만 다르다', async () => {
+      const { wrapper } = await mountPage({ vacation: SAVED })
+
+      expect(preview(wrapper).get('[role="group"]').attributes('aria-label')).toBe('미리 볼 답장')
+      expect(sides(wrapper)).toEqual([
+        ['사내', 'true'],
+        ['회사 밖', 'false'],
+      ])
+      await pick(wrapper, 'outside')
+      expect(sides(wrapper)).toEqual([
+        ['사내', 'false'],
+        ['회사 밖', 'true'],
+      ])
+      expect(preview(wrapper).get('[data-vacation-preview-subject]').text()).toBe(SAVED.subject)
+      expect(preview(wrapper).get('[data-vacation-preview-body]').text()).toContain('11월 4일에 돌아옵니다.')
+      expect(preview(wrapper).get('[data-vacation-preview-note]').text()).toBe(
+        '회사 밖에서 온 메일에도 같은 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+      )
+    })
+
+    it('따로 쓰기 — 사내 쪽은 위의 글 · "사내에서 온 메일에 …", 회사 밖 쪽은 회사 밖에 보낼 제목 · 내용 · "회사 밖에서 온 메일에 …"', async () => {
+      const { wrapper } = await mountPage({ vacation: { ...SAVED, external: SEPARATE } })
+
+      expect(preview(wrapper).get('[data-vacation-preview-subject]').text()).toBe(SAVED.subject)
+      expect(preview(wrapper).get('[data-vacation-preview-note]').text()).toBe(
+        '사내에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+      )
+      await pick(wrapper, 'outside')
+      expect(preview(wrapper).get('[data-vacation-preview-subject]').text()).toBe(SEPARATE.subject)
+      expect(preview(wrapper).get('[data-vacation-preview-body]').element.innerHTML).toBe(
+        OUTSIDE_PARAGRAPHS,
+      )
+      expect(preview(wrapper).get('[data-vacation-preview-note]').text()).toBe(
+        '회사 밖에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+      )
+
+      // 칸을 고친 값을 바로 그린다
+      await wrapper.get('#vacation-external-subject').setValue('부재중 안내 (수정)')
+      await setBody('vacation-external-body', '<p><em>잠시</em> 자리를 비웁니다.</p>')
+      expect(preview(wrapper).get('[data-vacation-preview-subject]').text()).toBe('부재중 안내 (수정)')
+      expect(preview(wrapper).get('[data-vacation-preview-body]').element.innerHTML).toBe('<p><em>잠시</em> 자리를 비웁니다.</p>')
+    })
+
+    it('보내지 않기 — 회사 밖 쪽은 답장 대신 회색 상자 한 줄 · 아래 글 없음, 사내 쪽은 "사내에서 온 메일에 …"', async () => {
+      const { wrapper } = await mountPage({ vacation: { ...SAVED, external: { ...SAME, mode: 'none' } } })
+
+      expect(preview(wrapper).get('[data-vacation-preview-note]').text()).toBe(
+        '사내에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+      )
+      await pick(wrapper, 'outside')
+      expect(preview(wrapper).get('[data-vacation-preview-none]').text()).toBe('회사 밖에서 온 메일에는 자동으로 답하지 않습니다.')
+      expect(preview(wrapper).find('[data-vacation-preview-subject]').exists()).toBe(false)
+      expect(preview(wrapper).find('[data-vacation-preview-note]').exists()).toBe(false)
+
+      // 사내 쪽으로 돌아오면 내용을 다시 그린다
+      await pick(wrapper, 'inside')
+      expect(preview(wrapper).get('[data-vacation-preview-body]').text()).toContain('안녕하세요, 김아라입니다.')
+    })
+
+    it('사내 쪽 내용도 칸을 고친 값을 바로 그린다 · 꺼 두면 두 쪽 모두 "꺼져 있어 자동으로 답하지 않습니다."', async () => {
+      const { wrapper } = await mountPage({ vacation: SAVED })
+      await setBody('vacation-body', '<p><u>내일</u> 돌아옵니다.</p>')
+      expect(preview(wrapper).get('[data-vacation-preview-body]').element.innerHTML).toBe('<p><u>내일</u> 돌아옵니다.</p>')
+
+      await wrapper.get('#vacation-enabled').setValue(false)
+      expect(preview(wrapper).get('[data-vacation-preview-note]').text()).toBe('꺼져 있어 자동으로 답하지 않습니다.')
+      await pick(wrapper, 'outside')
+      expect(preview(wrapper).get('[data-vacation-preview-note]').text()).toBe('꺼져 있어 자동으로 답하지 않습니다.')
+    })
+  })
+
   describe('엔진에서 규칙이 꺼졌을 때 (7단계 — 디자인 원본 MailFilterApplyStates)', () => {
     const INACTIVE_TEXT =
       '다른 곳에서 메일 설정이 바뀌어 켜 둔 자동 응답이 지금은 나가지 않습니다. 아래 [저장]을 누르면 다시 켜집니다.'
@@ -350,11 +806,39 @@ describe('MailVacationPage', () => {
       expect(router.currentRoute.value.fullPath).toBe('/mail/inbox')
     })
 
-    it('되돌렸거나 저장했으면 묻지 않는다', async () => {
+    it('내용 칸(편집기)만 고쳐도 묻는다 · 회사 밖 고르기 · 회사 밖 내용도', async () => {
+      const { wrapper, router } = await mountPage({ vacation: SAVED })
+      await setBody('vacation-body', '<p>바꾼 내용</p>')
+
+      const first = router.push('/mail/inbox')
+      await flushPromises()
+      expect(dialogOpen()).toBe(true)
+      await wrapper.get('#vacation-leave-stay').trigger('click')
+      await first
+
+      // 내용을 처음대로 되돌리면 묻지 않는 대신, 회사 밖 고르기를 바꾸면 묻는다
+      await setBody('vacation-body', '<p>안녕하세요, 김아라입니다.</p><p><strong>11월 4일</strong>에 돌아옵니다.</p>')
+      await wrapper.get('#vacation-external-none').setValue(true)
+      const second = router.push('/mail/inbox')
+      await flushPromises()
+      expect(dialogOpen()).toBe(true)
+      await wrapper.get('#vacation-leave-stay').trigger('click')
+      await second
+
+      await wrapper.get('#vacation-external-same').setValue(true)
+      await setBody('vacation-external-body', '<p>회사 밖 글</p>')
+      const third = router.push('/mail/inbox')
+      await flushPromises()
+      expect(dialogOpen()).toBe(true)
+      await wrapper.get('#vacation-leave-stay').trigger('click')
+      await third
+    })
+
+    it('되돌렸거나 저장했으면 묻지 않는다 — 내용 칸은 저장한 내용과 견준다', async () => {
       const { wrapper, router } = await mountPage({ vacation: SAVED })
       await wrapper.get('#vacation-subject').setValue('바꾼 제목')
       await wrapper.get('#vacation-subject').setValue(SAVED.subject)
-      await wrapper.get('#vacation-body').setValue('바꾼 내용')
+      await setBody('vacation-body', '<p>바꾼 내용</p>')
       await save(wrapper)
 
       await router.push('/mail/inbox')
diff --git a/frontend/src/pages/settings/MailVacationPage.vue b/frontend/src/pages/settings/MailVacationPage.vue
index 8eb360c..3cb0db7 100644
--- a/frontend/src/pages/settings/MailVacationPage.vue
+++ b/frontend/src/pages/settings/MailVacationPage.vue
@@ -1,18 +1,36 @@
 <script setup lang="ts">
-// 설정 › 메일 › 부재중 자동 응답 (디자인 원본 SettingsVacation · README "4단계 › 부재중 자동 응답") — /settings/mail/vacation
+// 설정 › 메일 › 부재중 자동 응답 (디자인 원본 SettingsVacation · 16단계 Settings16 · README "4단계 › 부재중 자동 응답") — /settings/mail/vacation
 // 들어올 때마다 새로 받는다(다른 창 · 메일 프로그램에서 바꿨을 수 있다). 받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도".
 // 저장한 값이 켜짐인데 엔진에서 우리 규칙이 꺼져 있으면(isActive: false — 7단계, 디자인 원본 MailFilterApplyStates) 머리 아래 노란 줄
 // "켜 둔 자동 응답이 지금은 동작하지 않습니다 …"(필터 화면의 줄과 같은 모양, 단추 없음 — [저장]은 늘 누를 수 있다).
 // 저장하면 응답의 isActive 로 맞춘다(저장하면 다시 켜진다). 꺼 두었으면 보이지 않는다 — 칸을 고친 값이 아니라 저장한 값으로 본다
+// 16단계: 내용 칸이 서식 편집기(TipTap)라 양식(VacationForm)째 지연 로딩한다 — 못 받으면 쓰기 화면 · 서명 설정과 같은 "다시 시도"
+// (ComposeEditorLoadError · MAIL_EDITOR_RETRY)
+import { defineAsyncComponent, provide, ref } from 'vue'
+
+import ComposeEditorLoadError from '@/components/mail/ComposeEditorLoadError.vue'
 import MailLoadError from '@/components/mail/MailLoadError.vue'
+import { MAIL_EDITOR_RETRY } from '@/components/mail/editor/mail-editor-handle'
 import MailFilterNotice from '@/components/settings/MailFilterNotice.vue'
 import SettingsPageFrame from '@/components/settings/SettingsPageFrame.vue'
-import VacationForm from '@/components/settings/VacationForm.vue'
 import { VACATION_TEXT } from '@/shared/constants/mail-vacation'
 import { useMailVacationStore } from '@/stores/mail-vacation.store'
 
+/** 부재중 양식 — TipTap 을 이 화면에서만 내려받는다 */
+const VacationForm = defineAsyncComponent({
+  loader: () => import('@/components/settings/VacationForm.vue'),
+  errorComponent: ComposeEditorLoadError,
+})
+
 const vacationStore = useMailVacationStore()
 
+/** 양식을 새로 만든다 — 청크를 못 받았을 때 "다시 시도" */
+const formKey = ref<number>(0)
+
+provide(MAIL_EDITOR_RETRY, () => {
+  formKey.value += 1
+})
+
 function reload() {
   void vacationStore.load()
 }
@@ -40,7 +58,10 @@ reload()
         :message="VACATION_TEXT.inactive"
         data-vacation-inactive
       />
-      <VacationForm :vacation="vacationStore.vacation" />
+      <VacationForm
+        :key="formKey"
+        :vacation="vacationStore.vacation"
+      />
     </template>
     <div
       v-else
diff --git a/frontend/src/shared/constants/account-security.ts b/frontend/src/shared/constants/account-security.ts
index 772d766..47bb329 100644
--- a/frontend/src/shared/constants/account-security.ts
+++ b/frontend/src/shared/constants/account-security.ts
@@ -95,7 +95,8 @@ export const TWO_FACTOR_TEXT = {
     '[2단계 인증 켜기]를 누르고 화면의 QR 코드를 인증 앱으로 찍습니다.',
     '앱에 표시된 6자리 코드와 지금 비밀번호를 넣으면 켜집니다. 그다음부터 로그인할 때마다 코드를 묻습니다.',
   ],
-  noteChangePhone: '휴대폰을 바꿀 때는 2단계 인증을 끈 뒤 새 휴대폰으로 다시 켜 주세요. 끌 때 지금 휴대폰의 코드가 필요합니다.',
+  /** 켜져 있을 때 아래 안내의 첫 줄 — 회사 정책으로 끌 수 없는 직원도 같은 글 (16단계 — 끄지 않고 [휴대폰 바꾸기]로 바꾼다) */
+  noteChangePhone: '휴대폰을 바꿀 때는 [휴대폰 바꾸기]를 눌러 주세요. 새 휴대폰과 지금 휴대폰의 코드가 모두 필요합니다.',
   noteLostPhone: '휴대폰을 잃어버렸거나 인증 앱을 지웠으면 관리자에게 문의해 주세요.',
   noteMailClientBefore: '메일 프로그램은 ',
   noteMailClientLink: '앱 비밀번호',
@@ -132,6 +133,49 @@ export const TWO_FACTOR_ENABLE_TEXT = {
   retry: '다시 시도',
 } as const
 
+/**
+ * 2단계 인증 휴대폰 바꾸기 창 (모달 620 · 두 걸음 — 16단계, 디자인 원본 Settings16 5~8).
+ * QR · 키 · [복사]의 그 밖의 글은 켜기 창(TWO_FACTOR_ENABLE_TEXT) 그대로다. 거절 글은 사전 문구(AUTH_005 · AUTH_006 · AUTH_007 · AUTH_008 · REQ_001)만
+ */
+export const TWO_FACTOR_REPLACE_TEXT = {
+  /** 상태 상자의 단추 — [2단계 인증 끄기] 앞 (회사 정책으로 끌 수 없는 직원에게도) */
+  open: '휴대폰 바꾸기',
+  title: '2단계 인증 휴대폰 바꾸기',
+  /** 제목 아래 차례 — 글로만(지금 걸음 청록 굵게 · 마친 걸음 체크) */
+  stepsLabel: '휴대폰 바꾸기 차례',
+  stepNew: '새 휴대폰 등록',
+  stepCurrent: '지금 휴대폰으로 확인',
+  /** ① 새 휴대폰 등록 */
+  newMessage: '새 휴대폰을 등록하고 지금 휴대폰으로 확인하면 바뀝니다. 바꾸기를 마칠 때까지는 지금 휴대폰의 코드로 로그인합니다.',
+  scanTitle: '새 휴대폰의 인증 앱으로 QR 코드를 찍어 주세요',
+  discardNote: '바꾸지 않고 닫으면 이 키는 더 쓸 수 없습니다. 새 휴대폰의 인증 앱에 먼저 추가했다면 앱에서 그 계정을 지워 주세요.',
+  newCodeLabel: '새 휴대폰의 앱에 표시된 6자리 코드',
+  next: '다음',
+  verifying: '확인하는 중…',
+  /** ② 지금 휴대폰으로 확인 */
+  currentMessage: '새 휴대폰을 확인했습니다. 지금 휴대폰의 코드와 비밀번호를 넣으면 바뀌고, 그 뒤로는 새 휴대폰의 코드로만 로그인합니다.',
+  currentCodeLabel: '지금 휴대폰의 앱에 표시된 6자리 코드',
+  passwordLabel: '지금 비밀번호',
+  showPassword: '지금 비밀번호 보기',
+  /** ② 아래 문의 줄 — 연락처가 있으면 다음 줄에 연락처, 없으면 이 글만 (로그인 화면의 문의 줄과 같은 꼴) */
+  support: '지금 휴대폰을 쓸 수 없나요? 관리자에게 2단계 인증을 풀어 달라고 요청한 뒤, 새 휴대폰으로 다시 켜 주세요.',
+  back: '이전',
+  submit: '바꾸기',
+  submitting: '바꾸는 중…',
+  cancel: '취소',
+  /** 바꾼 뒤 알림 — 단추 없음 (「2단계 인증을 껐습니다.」와 같은 모양) */
+  done: '2단계 인증 휴대폰을 바꿨습니다. 이제 새 휴대폰의 코드로 로그인합니다.',
+  /**
+   * 결과를 모르는 실패(503 MAIL_001 · 시간 초과 · 연결 끊김) — 바뀌었다고도 아니라고도 하지 않는다. 창 위 상자(창은 ② 그대로).
+   * 바뀌었다면 지금 휴대폰의 코드는 이미 막혀 [바꾸기]가 코드가 맞지 않다고 거절한다 (보드에 없는 새 글 — 16단계 구현)
+   */
+  unconfirmed:
+    '휴대폰을 바꿨는지 확인하지 못했습니다. 지금 휴대폰에 다음 코드가 뜨면 넣고 [바꾸기]를 다시 눌러 주세요. 코드가 맞지 않다고 나오면 이미 바뀌었을 수 있으니, 다음에 로그인할 때 새 휴대폰의 코드를 넣어 주세요.',
+  /** 결과를 모르는 실패가 창을 닫은 뒤 왔을 때의 알림 (보드에 없는 새 글 — 16단계 구현) */
+  unconfirmedClosed:
+    '휴대폰을 바꿨는지 확인하지 못했습니다. 다음에 로그인할 때 새 휴대폰의 코드가 맞지 않으면 지금 휴대폰의 코드를 넣어 주세요.',
+} as const
+
 /** 2단계 인증 끄기 창 (alertdialog 400 · 처음 초점 「취소」) */
 export const TWO_FACTOR_DISABLE_TEXT = {
   title: '2단계 인증을 끌까요?',
diff --git a/frontend/src/shared/constants/contacts.ts b/frontend/src/shared/constants/contacts.ts
index 1fe92ac..c91b6c5 100644
--- a/frontend/src/shared/constants/contacts.ts
+++ b/frontend/src/shared/constants/contacts.ts
@@ -2,7 +2,7 @@
 // 한도는 서버와 같은 값이다 — 서버가 최종 검증한다. 문구는 README "화면 문구 — 사용자에게 말하듯"(2026-11-05)을 따른다 — 보드의 옛 글과 다를 수 있다.
 
 import type { ContactEmailLabel, ContactPhoneLabel, DirectoryKind } from '@/shared/types/contacts'
-import { directionParticle } from '@/shared/utils/korean'
+import { directionParticle, subjectParticle } from '@/shared/utils/korean'
 
 /**
  * 주소록 라우트 이름 — 라우트 표(router/routes.ts) · 레일(app-modules.ts) · 화면 안의 링크 · 읽기 화면 ⋯ 「주소록에서 보기」가 함께 쓴다.
@@ -328,3 +328,204 @@ export const RECIPIENT_CONTACT_TEXT = {
   /** "주소가 없는 1명 · 이미 넣은 2명은 뺐습니다." */
   skipped: (parts: string) => `${parts}은 뺐습니다.`,
 } as const
+
+// ── 가져오기 · 내보내기 (16단계 — 디자인 원본 Contacts16 · 계약 3절 "가져오기 · 내보내기") ─────────────
+// 글은 보드(Contacts16)의 글 그대로다. 파일은 이 브라우저에서 읽고(shared/utils/contact-import/) 넣기로 한 연락처만 100명씩 서버로 보낸다
+
+/** 보조사 "은/는" — 받침이 있으면 "은"(subjectParticle 과 같은 판정), 소리를 알 수 없으면 "은(는)" */
+function topicParticle(word: string): '은' | '는' | '은(는)' {
+  const subject = subjectParticle(word)
+  if (subject === '이(가)') return '은(는)'
+  return subject === '이' ? '은' : '는'
+}
+
+/** 가져올 수 있는 파일 하나의 크기 — 사진이 든 휴대폰 vCard 도 들어가게 20MB. 넘으면 읽지 않고 바로 알린다 */
+export const CONTACT_IMPORT_FILE_MAX_BYTES = 20 * 1024 * 1024
+/** 파일 고르는 창에 보일 형식 — 넣을 수 있는 셋만 */
+export const CONTACT_IMPORT_ACCEPT = '.vcf,.csv,.xlsx'
+/** 서버에 한 번에 보내는 연락처 수 — 확인(POST /contact-import-checks) · 넣기(POST /contact-imports) 모두 1~100 */
+export const CONTACT_IMPORT_BATCH_SIZE = 100
+/** [되돌리기]가 한 번에 지우는 수 — 서버는 500개까지 받지만 진행을 자주 보이려고 넣기와 같게 */
+export const CONTACT_IMPORT_UNDO_BATCH_SIZE = 100
+/**
+ * 한 요청 본문의 값 수 · 바이트 상한 — 앱 공통 본문 한도(값 10,000개 · JSON 1MB)보다 넉넉히 아래에서 묶음을 끊는다
+ * (칸을 한도까지 채운 연락처 100명이면 값 10,000개를 넘는다 — 계약 3절 "가져오기 · 내보내기"의 본문 한도). 사람 수와 함께 먼저 닿는 데서 끊는다
+ */
+export const CONTACT_IMPORT_BATCH_MAX_VALUES = 8_000
+export const CONTACT_IMPORT_BATCH_MAX_BYTES = 700 * 1024
+/** 미리 보기 표에 보이는 넣을 연락처 수 (나머지는 "그 밖에 N명") */
+export const CONTACT_IMPORT_PREVIEW_ROWS = 6
+/** 그룹 글에 이름을 몇 개까지 쓰는지 — 넘으면 "앞 셋 외 N개" */
+export const CONTACT_IMPORT_GROUP_NAMES_SHOWN = 3
+/** 그룹 하나의 구성원 수 — 넘는 넣기는 그 그룹만 빼고 만든다 (서버가 skippedGroupIds 로 알린다) */
+export const CONTACT_GROUP_MEMBERS_MAX = 500
+/** 엑셀(.xlsx — zip) 안의 파일을 풀었을 때 하나 · 모두의 크기 상한 — 넘으면 열지 않는다(압축 폭탄) */
+export const CONTACT_IMPORT_XLSX_ENTRY_MAX_BYTES = 64 * 1024 * 1024
+export const CONTACT_IMPORT_XLSX_TOTAL_MAX_BYTES = 96 * 1024 * 1024
+/**
+ * 엑셀 첫 시트에서 늘어놓는 칸 수의 합(사이의 빈 칸 포함) — 넘으면 열지 않는다. 먼 열(XFD)에 칸 하나씩 둔 줄이 많으면
+ * 줄마다 빈 칸 16,384개를 채워 메모리가 부푼다. 보통 주소록 파일은 많아야 수십만 칸이다
+ */
+export const CONTACT_IMPORT_XLSX_CELLS_MAX = 4_000_000
+
+/** 「전체 연락처」 머리의 [가져오기] · [내보내기]와 빈 주소록 (디자인 원본 Contacts16 "1") */
+export const CONTACTS_TRANSFER_TEXT = {
+  import: '가져오기',
+  export: '내보내기',
+  /** 연락처가 하나도 없을 때 [내보내기]가 꺼진 까닭 */
+  exportEmptyNote: '내보낼 연락처가 없습니다.',
+  /** 빈 주소록 안내의 둘째 줄 */
+  firstImportNote: '다른 메일이나 휴대폰에서 내보낸 연락처 파일이 있으면 [가져오기]로 한 번에 넣을 수 있습니다.',
+} as const
+
+/** 가져오기 창 (넓은 창 620 — 디자인 원본 Contacts16 "2" · "3") */
+export const CONTACT_IMPORT_TEXT = {
+  title: '연락처 가져오기',
+  message: '네이버, Google, Outlook 같은 메일이나 휴대폰에서 내보낸 연락처 파일을 그대로 넣을 수 있습니다.',
+  pick: '파일 고르기',
+  dropHint: '파일을 여기로 끌어다 놓아도 됩니다.',
+  dropping: '놓으면 이 파일에서 연락처를 찾습니다',
+  reading: '파일을 읽는 중…',
+  formats: 'vCard(.vcf), CSV(.csv), 엑셀(.xlsx) 파일을 넣을 수 있습니다. 파일 하나는 20MB까지입니다.',
+  cancel: '취소',
+  pickAnother: '다른 파일 고르기',
+  found: (count: string) => `연락처 ${count}명을 찾았습니다.`,
+  insertSection: '넣을 연락처',
+  insertTable: (count: string) => `넣을 연락처 앞 ${count}명`,
+  columns: { name: '이름', email: '이메일', phone: '전화', company: '회사', groups: '그룹' },
+  others: (count: string) => `그 밖에 ${count}명`,
+  duplicateSection: '이미 있는 연락처는 건너뜁니다',
+  /** 넣지 못하는 묶음 — CSV · 엑셀은 줄, vCard 는 연락처 */
+  problemLines: '넣지 못하는 줄',
+  problemCards: '넣지 못하는 연락처',
+  people: (count: string) => `${count}명`,
+  lineCount: (count: string) => `${count}개`,
+  /** 줄 번호는 엑셀에서 보이는 행 번호(머리 줄이 1번째 줄), vCard 는 몇 번째 연락처 */
+  line: (position: string) => `${position}번째 줄`,
+  card: (position: string) => `${position}번째 연락처`,
+  inBook: '주소록에 있음',
+  sameLine: (position: string) => `${position}번째 줄과 같음`,
+  sameCard: (position: string) => `${position}번째 연락처와 같음`,
+  groupsLabel: '그룹',
+  groupsNone: '파일에 적힌 그룹이 없습니다.',
+  /** 이름 줄이기 — "거래처, 세무, 동호회 외 2개" */
+  groupNamesMore: (names: string, count: string) => `${names} 외 ${count}개`,
+  /** 파일에 적힌 그룹 — 이미 있는 그룹 · 새로 만들 그룹 */
+  groupsMixed: (count: string, existing: string, created: string) =>
+    `파일에 적힌 그룹 ${count}개 가운데 ${existing}${topicParticle(existing)} 이미 있는 그룹에 넣고 ${created}${topicParticle(created)} 새로 만듭니다.`,
+  groupsExisting: (names: string) => `파일에 적힌 그룹 ${names}${topicParticle(names)} 이미 있는 그룹에 넣습니다.`,
+  groupsCreated: (names: string) => `파일에 적힌 그룹 ${names}${topicParticle(names)} 새로 만듭니다.`,
+  extraLegend: '가져온 연락처를 모두 넣을 그룹',
+  extraNone: '넣지 않음',
+  extraExisting: '이미 있는 그룹',
+  extraNew: '새 그룹',
+  extraNewName: '새 그룹 이름',
+  extraHint: '파일에 적힌 그룹에 더해 넣습니다.',
+  extraNameRequired: '그룹 이름을 넣어 주세요.',
+  groupOption: (name: string, count: string) => `${name} · ${count}명`,
+  info: '주소, 생일, 홈페이지, 별명처럼 주소록에 칸이 없는 정보는 메모 끝에 붙이기',
+  infoHint: '메모가 1,000자를 넘게 되면 붙이지 않습니다.',
+  infoSample: (name: string) => `예: ${name}의 메모`,
+  limit: (count: string, rest: string) =>
+    `연락처는 3,000개까지 둘 수 있어 앞에서부터 ${count}명만 넣습니다. 나머지 ${rest}명은 넣지 않습니다.`,
+  submit: (count: string) => `연락처 ${count}명 넣기`,
+  submitNone: '연락처 넣기',
+  nothing: '넣을 연락처가 없습니다.',
+} as const
+
+/** 파일을 읽지 못했을 때 칸 아래 글 — 알림은 띄우지 않는다 (디자인 원본 Contacts16 "2") */
+export const CONTACT_IMPORT_ERROR_TEXT = {
+  unsupported: '넣을 수 없는 파일입니다. vCard(.vcf), CSV(.csv), 엑셀(.xlsx) 파일을 골라 주세요.',
+  xls: '옛 엑셀 파일(.xls)은 넣을 수 없습니다. 엑셀에서 [다른 이름으로 저장]을 눌러 .xlsx나 CSV 파일로 저장한 뒤 넣어 주세요.',
+  tooLarge: '파일이 너무 큽니다. 파일 하나는 20MB까지 넣을 수 있습니다.',
+  notFound: '이 파일에서 연락처를 찾지 못했습니다. 이름이나 이메일이 든 열이 있는지 확인해 주세요.',
+  /** vCard 는 앞 문장만 */
+  notFoundCards: '이 파일에서 연락처를 찾지 못했습니다.',
+  unreadable: '이 파일을 열지 못했습니다. 암호를 건 엑셀 파일이면 암호를 푼 뒤 넣어 주세요.',
+  multiple: '파일은 한 번에 하나만 넣을 수 있습니다.',
+} as const
+
+/** 넣지 못하는 줄의 까닭 — 형식 · 길이 글은 연락처 창의 글을 쓴다 (한 줄 칸은 어느 칸인지를 앞에 붙인다) */
+export const CONTACT_IMPORT_PROBLEM_TEXT = {
+  required: '이름과 이메일이 모두 없습니다.',
+  email: CONTACT_DIALOG_TEXT.emailInvalid,
+  textTooLong: (field: string) =>
+    `${field}${topicParticle(field)} ${CONTACT_DIALOG_TEXT.textTooLong(CONTACT_TEXT_MAX_LENGTH.toLocaleString('ko-KR'))}`,
+  note: CONTACT_DIALOG_TEXT.noteTooLong(CONTACT_NOTE_MAX_LENGTH.toLocaleString('ko-KR')),
+  fields: { name: '이름', company: '회사', department: '부서', title: '직책' },
+} as const
+
+/**
+ * 메모 끝에 붙이는 "가져온 정보" — 주소록에 칸이 없는 정보를 "이름: 값" 꼴로 한 줄씩 (디자인 원본 Contacts16 "3" 메모 견본).
+ * 형식에 맞지 않는 전화번호(내선이 붙은 번호 등)도 버리지 않고 여기에 둔다
+ */
+export const CONTACT_IMPORT_INFO_TEXT = {
+  heading: '가져온 정보',
+  workAddress: '회사 주소',
+  homeAddress: '집 주소',
+  otherAddress: '기타 주소',
+  address: '주소',
+  birthday: '생일',
+  anniversary: '기념일',
+  homepage: '홈페이지',
+  nickname: '별명',
+  messenger: '메신저',
+  phone: '전화',
+  /** 날짜 — 해를 모르면 "3월 14일" */
+  date: (year: number | null, month: number, day: number) =>
+    year === null ? `${month}월 ${day}일` : `${year}년 ${month}월 ${day}일`,
+  lunar: (date: string) => `${date} (음력)`,
+  line: (label: string, value: string) => `${label}: ${value}`,
+} as const
+
+/** 넣는 동안 · 끝난 뒤 · 되돌리기 알림 (디자인 원본 Contacts16 "4") */
+export const CONTACT_IMPORT_TOAST_TEXT = {
+  progress: (done: string, total: string) => `연락처를 넣는 중 · ${done} / ${total}명`,
+  done: (count: string) => `연락처 ${count}명을 넣었습니다.`,
+  skipped: (count: string) => `이미 있던 ${count}명은 건너뛰었습니다.`,
+  full: (count: string) => `연락처는 3,000개까지 둘 수 있어 나머지 ${count}명은 넣지 못했습니다.`,
+  groupLimit: (count: string) =>
+    `그룹은 100개, 그룹 하나에는 500명까지 둘 수 있어 ${count}명은 그룹에 넣지 못했습니다.`,
+  /** 메일 서버가 일부만 받았을 때 (보드에 없는 글) */
+  missed: (count: string) => `${count}명은 넣지 못했습니다.`,
+  stopped: (total: string, done: string) => `연락처 ${total}명 가운데 ${done}명을 넣고 멈췄습니다. 다시 시도해 주세요.`,
+  notStarted: '연락처를 넣지 못했습니다. 다시 시도해 주세요.',
+  undo: '되돌리기',
+  retry: '다시 시도',
+  undoProgress: (done: string, total: string) => `가져온 연락처를 지우는 중 · ${done} / ${total}명`,
+  undone: (count: string) => `가져온 연락처 ${count}명을 지웠습니다.`,
+  undoneWithGroups: (count: string, groups: string) =>
+    `가져온 연락처 ${count}명과 새로 만든 그룹 ${groups}개를 지웠습니다.`,
+  undoStopped: (total: string, done: string) =>
+    `가져온 연락처 ${total}명 가운데 ${done}명을 지우고 멈췄습니다. 다시 시도해 주세요.`,
+} as const
+
+/** 내보내기 창 (칸 하나 창 400 — 디자인 원본 Contacts16 "5") */
+export const CONTACT_EXPORT_TEXT = {
+  title: '연락처 내보내기',
+  scopeLegend: '내보낼 연락처',
+  all: '내 주소록 전체',
+  allCount: (count: string) => `연락처 ${count}명`,
+  group: '그룹 하나',
+  groupHint: '고른 그룹의 구성원만',
+  groupSelect: '내보낼 그룹',
+  groupOption: (name: string, count: string) => `${name} · ${count}명`,
+  groupEmpty: (name: string) => `‘${name}’ 그룹에는 아직 아무도 없어 내보낼 연락처가 없습니다.`,
+  directoryNote: '내 주소록의 연락처만 내보내고 사내 목록은 넣지 않습니다.',
+  formatLegend: '파일 형식',
+  vcard: 'vCard (.vcf)',
+  vcardHint: '다른 메일이나 휴대폰으로 옮길 때',
+  csv: 'CSV (.csv)',
+  csvHint: '엑셀에서 열어 볼 때',
+  fileName: '파일 이름',
+  /** 파일 이름 — 주소록-날짜, 그룹이면 주소록-그룹 이름-날짜 (서버가 붙이는 이름과 같은 꼴) */
+  fileBase: '주소록',
+  submit: '내보내기',
+  cancel: '취소',
+} as const
+
+/** 내보내기 형식마다 파일 끝 */
+export const CONTACT_EXPORT_EXTENSIONS = {
+  vcard: 'vcf',
+  csv: 'csv',
+} as const
diff --git a/frontend/src/shared/constants/icons.ts b/frontend/src/shared/constants/icons.ts
index 4a56424..c8d0386 100644
--- a/frontend/src/shared/constants/icons.ts
+++ b/frontend/src/shared/constants/icons.ts
@@ -129,6 +129,12 @@ export const ICONS = {
     polyline('7 10 12 15 17 10'),
     line(12, 15, 12, 3),
   ],
+  /** 올리기 — 주소록 [가져오기] (16단계, 디자인 원본 Contacts16) */
+  upload: [
+    path('M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'),
+    polyline('17 8 12 3 7 8'),
+    line(12, 3, 12, 15),
+  ],
   file: [path('M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'), polyline('13 2 13 9 20 9')],
   check: [polyline('20 6 9 17 4 12')],
   /** 보기 전환 — 분할 */
diff --git a/frontend/src/shared/constants/mail-signature.ts b/frontend/src/shared/constants/mail-signature.ts
index 065734b..f98ccfb 100644
--- a/frontend/src/shared/constants/mail-signature.ts
+++ b/frontend/src/shared/constants/mail-signature.ts
@@ -1,4 +1,4 @@
-// 메일 서명 상수 — 계약 2절 "서명" · 디자인 README "2단계 › 서명" (디자인 원본 Settings)
+// 메일 서명 상수 — 계약 2절 "서명" · 디자인 README "2단계 › 서명" · "16단계 — 여러 서명" (디자인 원본 Settings · Signature16 — 글은 보드 그대로)
 // 한도는 서버(backend/src/modules/mail-signature/mail-signature.constants.ts)와 같은 값이다 — 서버가 최종 검증한다.
 
 import type { ErrorCode } from '@/shared/constants/error-codes.generated'
@@ -9,7 +9,7 @@ export const SIGNATURE_IMAGE_MAX_BYTES = 300 * 1024
 /**
  * 서명에 넣을 수 있는 그림 수 — 서명 칸에 있는 서로 다른 그림으로 센다(뺀 그림은 세지 않는다).
  * 넘으면 서명 저장이 400 VAL_001 — 클라이언트가 그림을 넣기 전에 먼저 막는다.
- * (올려 두기만 한 그림까지 한 사람 10장은 서버가 따로 막는다 — 올리기가 400 VAL_001, 알림은 인터셉터)
+ * (올려 두기만 한 그림까지 한 사람 20장(16단계 — 여러 서명이 함께 쓴다)은 서버가 따로 막는다 — 올리기가 400 VAL_001, 알림은 인터셉터)
  */
 export const SIGNATURE_IMAGE_MAX_COUNT = 3
 /** 서명 서식(HTML) 최대 길이 — 서버는 정화한 뒤 잰다(넘으면 400 VAL_001). 보내기 전에 같은 길이로 먼저 막는다 */
@@ -39,12 +39,29 @@ export const SIGNATURE_IMAGE_SIZES = {
 } as const
 export type SignatureImageSize = keyof typeof SIGNATURE_IMAGE_SIZES | 'original'
 
-/** 그림 올리기의 실패 중 서명 칸 아래에 직접 보이는 코드 (형식 · 크기) — 전역 알림은 끈다. 10장 초과(VAL_001)는 알림으로 */
+
+/** 서명은 직원마다 10개까지 — 11번째는 서버가 400 VAL_001 (화면이 [새 서명]을 먼저 막는다) */
+export const MAIL_SIGNATURE_MAX_COUNT = 10
+/** 서명 이름 — 앞뒤 공백을 뺀 1~30자 (JS 문자열 길이 — 칸의 maxlength 와 같다) */
+export const SIGNATURE_NAME_MAX_LENGTH = 30
+
+/**
+ * 쓰기 화면이 처음 넣는 서명 자리의 표시 — 편집기가 이 div 를 서명 경계 노드로 읽는다 (16단계, mail-signature-block.ts).
+ * 보낼 때는 표시 없는 <div> 로 나가고, 임시 저장본을 다시 열면 "빈 문단 뒤 속성 없는 div" 로 서명 자리를 다시 찾는다(앱과 같은 경계 — 계약 2절)
+ */
+export const MAIL_SIGNATURE_MARK_ATTRIBUTE = 'data-mail-signature'
+
+/** 서명 칸 툴바의 화면 낭독 이름 — 공용 편집기(SignatureEditor)를 다른 칸이 쓸 때는 그 칸의 이름을 준다 (16단계 부재중 "자동 응답 서식") */
+export const SIGNATURE_TOOLBAR_LABEL = '서명 서식'
+/** 서명 칸의 편집 영역 id — 서명 화면에는 칸이 하나다 */
+export const SIGNATURE_BODY_ID = 'signature-body'
+
+/** 그림 올리기의 실패 중 서명 칸 아래에 직접 보이는 코드 (형식 · 크기) — 전역 알림은 끈다. 20장 초과(VAL_001)는 알림으로 */
 export const SIGNATURE_IMAGE_INLINE_CODES: readonly ErrorCode[] = ['FILE_001', 'FILE_002']
-/** 서명 저장의 실패 중 서명 칸 아래에 직접 보이는 코드 (길이 · 그림 3장 초과) — 전역 알림은 끈다 */
+/** 서명 저장의 실패 중 화면이 직접 보이는 코드 (이름 · 길이 · 그림 3장 초과) — 전역 알림은 끈다 */
 export const SIGNATURE_SAVE_INLINE_CODES: readonly ErrorCode[] = ['VAL_001']
 
-/** 서명을 바꾸고 저장하지 않은 채 떠날 때 (앱 안 이동은 대화상자, 탭 닫기 · 새로고침은 브라우저 확인창) */
+/** 서명을 바꾸고 저장하지 않은 채 다른 화면으로 갈 때 (앱 안 이동은 대화상자, 탭 닫기 · 새로고침은 브라우저 확인창) */
 export const SIGNATURE_LEAVE_DIALOG = {
   title: '저장하지 않은 서명이 있습니다',
   message: '이 화면을 나가면 바꾼 서명이 사라집니다.',
@@ -52,22 +69,48 @@ export const SIGNATURE_LEAVE_DIALOG = {
   leave: '나가기',
 } as const
 
-/** 설정 화면 문구 (디자인 원본 Settings) */
+/**
+ * 저장하지 않은 채 다른 서명을 고르거나 [새 서명] · [취소]를 누를 때 (디자인 원본 Signature16 5) — 나가기 확인과 같은 창.
+ * 새 서명(아직 저장하지 않은 줄)의 글은 보드에 없어 지었다 — "‘새 서명’ 서명에서"가 되지 않게 (16단계 구현하며 정함)
+ */
+export const SIGNATURE_SWITCH_DIALOG = {
+  title: '저장하지 않은 서명이 있습니다',
+  pick: (name: string) => `다른 서명을 고르면 ‘${name}’ 서명에서 바꾼 내용이 사라집니다.`,
+  create: (name: string) => `새 서명을 만들면 ‘${name}’ 서명에서 바꾼 내용이 사라집니다.`,
+  pickFromNew: '다른 서명을 고르면 새 서명에 쓴 내용이 사라집니다.',
+  cancelNew: '취소하면 새 서명에 쓴 내용이 사라집니다.',
+  stay: '계속 고치기',
+  discard: '바꾼 내용 버리기',
+} as const
+
+/** 설정 화면 문구 (디자인 원본 Settings · Signature16) */
 export const SIGNATURE_TEXT = {
   title: '서명',
   description:
-    '보내는 메일 끝에 넣는 글입니다. 메일을 쓰기 시작할 때 본문에 미리 넣어 두니, 그 메일에서만 고치거나 지울 수도 있습니다.',
+    '보내는 메일 끝에 넣는 글입니다. 여러 개 만들어 두면 메일을 쓸 때 [서명]에서 골라 바꿀 수 있고, 그 메일에서만 고치거나 지울 수도 있습니다.',
+  listLabel: '내 서명',
+  newSignature: '새 서명',
+  /** 아직 저장하지 않은 새 줄의 이름 아래 글 */
+  unsavedRow: '저장하지 않음',
+  count: (count: number) => `서명 ${count}개를 만들었고, 10개까지 만들 수 있습니다.`,
+  full: '서명은 10개까지 만들 수 있습니다. 쓰지 않는 서명을 지워 주세요.',
+  nameLabel: '이름',
+  namePlaceholder: '예: 사내, 대외, 영문',
+  nameHint: '메일을 쓸 때 [서명]에서 고르는 이름입니다. 30자까지 쓸 수 있습니다.',
+  nameEmpty: '이름을 넣어 주세요.',
+  nameDuplicate: '같은 이름의 서명이 있습니다.',
   fieldLabel: '서명 내용',
   hint:
     '굵게, 기울임, 밑줄, 글자 색, 링크, 그림을 쓸 수 있습니다. 그림은 PNG, JPG, GIF 파일을 한 장 300KB 이하로 3장까지 넣을 수 있고 ' +
     '붙여 넣거나 끌어다 놓아도 됩니다. 그림은 메일에 함께 실어 보내서 받는 사람 쪽에서 외부 이미지처럼 막히지 않습니다.',
-  usageLegend: '서명을 넣을 메일',
-  forNew: '새 메일',
-  forReply: '답장과 전달',
-  forReplyNote: '인용한 원문 위에 넣습니다',
   save: '저장',
   saving: '저장하는 중…',
+  /** [저장] 뒤 — 기본으로 넣는 서명 */
   saved: '저장했습니다. 다음에 메일을 쓸 때부터 들어갑니다.',
+  /** [저장] 뒤 — 기본이 아닌 서명 */
+  savedPlain: '저장했습니다.',
+  delete: '이 서명 지우기',
+  cancel: '취소',
   uploading: '그림을 올리는 중…',
   imageSizeLabel: '그림 크기',
   imageSizes: { small: '작게', medium: '보통', original: '원본' },
@@ -77,14 +120,47 @@ export const SIGNATURE_TEXT = {
   previewNew: '새 메일',
   previewReply: '답장',
   previewBody: '(여기에 쓴 내용)',
+  emptyTitle: '아직 서명이 없습니다',
+  emptyBody:
+    '보내는 메일 끝에 넣을 이름, 소속, 연락처를 만들어 두면 메일을 쓸 때마다 본문에 넣어 둡니다. ' +
+    '사내용과 대외용처럼 여러 개를 만들어 골라 쓸 수도 있습니다.',
 } as const
 
-/** 미리 보기 아래 안내 (디자인 원본 Settings) */
+/** 메일에 넣을 서명 (기본 둘) — 고르는 대로 바로 저장 (디자인 원본 Signature16 1) */
+export const SIGNATURE_DEFAULTS_TEXT = {
+  legend: '메일에 넣을 서명',
+  newMessage: '새 메일',
+  reply: '답장과 전달',
+  none: '넣지 않음',
+  hint: '메일을 쓰기 시작할 때 본문에 넣어 둡니다. 고르는 대로 바로 저장됩니다.',
+  saved: '저장했습니다',
+} as const
+
+/** 목록 줄의 이름 아래 회색 글 — 그 서명을 기본으로 넣는 메일 */
+export const SIGNATURE_USES_TEXT = {
+  new: '새 메일',
+  reply: '답장과 전달',
+  both: '새 메일, 답장과 전달',
+} as const
+
+/** 서명 지우기 (디자인 원본 Signature16 4) — 처음 초점은 [취소] */
+export const SIGNATURE_DELETE_TEXT = {
+  title: (name: string) => `‘${name}’ 서명을 지울까요?`,
+  messageNew: '새 메일에 넣는 서명이라 지우면 앞으로 새 메일에는 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.',
+  messageReply:
+    '답장과 전달에 넣는 서명이라 지우면 앞으로 답장과 전달에는 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.',
+  messageBoth:
+    '새 메일에도, 답장과 전달에도 넣는 서명이라 지우면 앞으로 어느 메일에도 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.',
+  message: '지운 서명은 되돌릴 수 없습니다.',
+  confirm: '지우기',
+  cancel: '취소',
+  done: (name: string) => `‘${name}’ 서명을 지웠습니다.`,
+} as const
+
+/** 미리 보기 아래 안내 (디자인 원본 Settings · Signature16 — 고른 서명이 들어갈 자리) */
 export const SIGNATURE_PREVIEW_NOTES = {
-  newOn: '새 메일은 본문 끝에 서명을 넣습니다.',
-  newOff: '새 메일에는 서명을 넣지 않습니다.',
-  replyOn: '답장과 전달에는 인용한 원문 위에 서명을 넣습니다.',
-  replyOff: '답장과 전달에는 서명을 넣지 않습니다.',
+  new: '새 메일은 본문 끝에 서명을 넣습니다.',
+  reply: '답장과 전달에는 인용한 원문 위에 서명을 넣습니다.',
 } as const
 
 /**
@@ -99,3 +175,14 @@ export const SIGNATURE_PREVIEW_QUOTE = {
   ],
   body: '(원래 메일 내용)',
 } as const
+
+/** 쓰기 화면 [서명 ▾] (디자인 원본 Signature16 6) — 바꾼 뒤 글은 화면 낭독기만 읽는다(알림 없음) */
+export const COMPOSE_SIGNATURE_TEXT = {
+  button: '서명',
+  /** 단추의 화면 낭독 이름 — 지금 본문에 든 서명까지 (툴바의 글꼴 단추처럼). 어느 서명과도 같지 않으면 "서명"만 */
+  buttonLabel: (name: string) => `서명: ${name}`,
+  menuLabel: '서명',
+  none: '넣지 않음',
+  manage: '서명 관리',
+  changed: (name: string, particle: string) => `서명을 ‘${name}’${particle} 바꿨습니다.`,
+} as const
diff --git a/frontend/src/shared/constants/mail-vacation.ts b/frontend/src/shared/constants/mail-vacation.ts
index 0cc6101..ed73e02 100644
--- a/frontend/src/shared/constants/mail-vacation.ts
+++ b/frontend/src/shared/constants/mail-vacation.ts
@@ -5,10 +5,21 @@
 // 한글로는 저장되지 않았다). 켤 때만 본다 — 꺼 둔 채로는 서버가 4단계 한도까지 받아, 4단계에 저장한 긴 글이 켜져 있어도 끌 수 있다
 // (꺼 두면 칸이 흐려 고칠 수 없다).
 
+// 16단계(디자인 원본 Settings16 1~4): 내용 칸이 서명 칸과 같은 편집기(그림 없음)다 — 600자는 서식을 뺀 보이는 글(편집기의 getText — 서버가 받는
+// textBody 와 같다)로 세고, 서식 본문은 서명과 같은 10,000자(서버가 정화한 뒤 잰다). 회사 밖에서 온 메일에 보낼 응답을 고른다(사내와 같은 응답 · 보내지 않기 · 따로 쓰기 —
+// 열리는 칸이 맨 아래). 따로 쓴 제목 · 내용은 위 칸과 같은 한도다.
+
+import type { MailVacationExternalMode } from '@/shared/types/mail'
+
 /** 제목 — 켤 때 1~150자 */
 export const VACATION_SUBJECT_MAX_LENGTH = 150
-/** 내용 — 켤 때 1~600자 (글자만) */
+/** 내용 — 켤 때 1~600자 (서식을 뺀 보이는 글) */
 export const VACATION_BODY_MAX_LENGTH = 600
+/** 서식 본문 — 켤 때 10,000자까지 (서명과 같은 한도 · 서버는 정화한 뒤 잰다 — 16단계) */
+export const VACATION_HTML_MAX_LENGTH = 10_000
+
+/** 회사 밖 응답 고르기의 차례 — 칸이 열리는 따로 쓰기가 맨 끝 (16단계 — 보드 검토에서 정함) */
+export const VACATION_EXTERNAL_MODES: readonly MailVacationExternalMode[] = ['same', 'none', 'separate']
 /**
  * 메일함 패널 안내를 다시 계산하는 간격 — 끝나는 시각이 지나면 사라지고, 시작 전 문구("10월 30일 ~ …")가 시작한 뒤의 문구로 바뀐다
  * (안내의 날짜는 하루 단위라 1분이면 충분하다)
@@ -27,13 +38,51 @@ export const VACATION_TEXT = {
   rangeHint: '시작하는 날 0시부터 끝나는 날 밤 12시까지 답합니다. 시각은 이 PC의 시간으로 셉니다.',
   subject: '제목',
   body: '내용',
-  bodyHint: '서식과 그림 없이 글자만 보내고, 서명은 붙지 않습니다.',
+  /** 내용 칸 아래 안내 (16단계 — 서식 편집기) */
+  bodyHint: '굵게, 기울임, 밑줄, 글자 색, 링크를 쓸 수 있습니다. 그림은 넣을 수 없고, 서명은 붙지 않습니다.',
+  /** 칸 이름 오른쪽 글자 수 — "132 / 600" (주소록 메모와 같은 자리) */
+  bodyCount: (length: string, max: string) => `${length} / ${max}`,
+  /** 켠 채 저장할 때 600자를 넘으면 칸 아래 (빨간 글자 수와 함께 — 회사 밖에 보낼 내용 칸도 같은 글) */
+  bodyTooLong: (max: string) => `내용은 ${max}자까지 쓸 수 있습니다.`,
+  /** 툴바의 화면 낭독 이름 */
+  toolbarLabel: '자동 응답 서식',
+  externalToolbarLabel: '회사 밖 자동 응답 서식',
+  /** 회사 밖에서 온 메일 — 고르기 셋 (16단계) */
+  externalLegend: '회사 밖에서 온 메일',
+  /** 도메인은 내 주소의 것 */
+  externalHint: (domain: string) => `보낸 사람 주소가 회사 메일 주소(@${domain})가 아닌 메일입니다.`,
+  externalOptions: {
+    same: { label: '사내와 같은 응답', hint: '회사 안팎 모두 위의 제목과 내용으로 답합니다.' },
+    none: { label: '보내지 않기', hint: '회사 밖에서 온 메일에는 자동으로 답하지 않습니다.' },
+    separate: { label: '따로 쓰기', hint: '회사 밖에서 온 메일에 보낼 제목과 내용을 따로 씁니다.' },
+  } satisfies Record<MailVacationExternalMode, { label: string; hint: string }>,
+  /** 따로 쓰기를 고르면 열리는 두 칸 */
+  externalSubject: '회사 밖에 보낼 제목',
+  externalBody: '회사 밖에 보낼 내용',
   save: '저장',
   saving: '저장하는 중…',
+  /**
+   * 서버가 400 MAIL_013(필터 · 차단 · 부재중을 담는 엔진 규칙이 한도를 넘음)으로 거절했을 때 [저장] 옆 글 — 알림은 끈다.
+   * 부재중은 서식 본문이 원본과 응답에 두 번 들어가 필터가 없어도 넘을 수 있어 사전 문구("필터나 차단 목록이 …") 대신 이 글 (16단계 리뷰)
+   */
+  saveTooLong: '자동 응답이 너무 깁니다. 서식이나 내용을 줄여 주세요.',
   previewTitle: '보낸 사람이 받는 답장',
+  /** 미리 보기 머리 오른쪽 전환 [사내 | 회사 밖] (36 — 서명 미리 보기와 같은 부품) */
+  previewSwitchLabel: '미리 볼 답장',
+  previewInside: '사내',
+  previewOutside: '회사 밖',
   previewFrom: '보낸 사람',
   previewSubject: '제목',
+  /** 사내와 같은 응답 — 사내 쪽 아래 글(16단계 전의 글 그대로) */
   previewNoteOn: '받은 메일의 보낸 사람에게 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+  /** 사내와 같은 응답 — 회사 밖 쪽 아래 글 */
+  previewNoteSameOutside: '회사 밖에서 온 메일에도 같은 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+  /** 보내지 않기 · 따로 쓰기 — 사내 쪽 */
+  previewNoteInside: '사내에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+  /** 따로 쓰기 — 회사 밖 쪽 */
+  previewNoteOutside: '회사 밖에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+  /** 보내지 않기 — 회사 밖 쪽에 답장 대신(회색 상자 · 아래 글 없음) */
+  previewNone: '회사 밖에서 온 메일에는 자동으로 답하지 않습니다.',
   previewNoteOff: '꺼져 있어 자동으로 답하지 않습니다.',
   // 저장한 뒤의 상태 글 — 날짜는 "10월 30일(금)" (올해가 아니면 앞에 연도)
   savedOff: '저장했습니다. 자동 응답을 껐고, 써 둔 글은 그대로 남아 있습니다.',
diff --git a/frontend/src/shared/constants/session-restriction.ts b/frontend/src/shared/constants/session-restriction.ts
index 66fc53c..334e648 100644
--- a/frontend/src/shared/constants/session-restriction.ts
+++ b/frontend/src/shared/constants/session-restriction.ts
@@ -82,8 +82,9 @@ export const TWO_FACTOR_GRACE_TEXT = {
   action: '지금 켜기',
   /** 설정 › 2단계 인증 머리 아래 갈색 상자의 둘째 줄 */
   settingsText: '회사 정책에 따라 그 뒤에는 2단계 인증을 켜야 로그인할 수 있습니다.',
-  /** 필수인 직원이 켠 뒤 — [2단계 인증 끄기] 대신 */
+  /**
+   * 필수인 직원이 켠 뒤 — [2단계 인증 끄기] 대신 ([휴대폰 바꾸기]는 그 앞에 그대로 — 16단계).
+   * 아래 안내의 첫 줄은 16단계부터 보통 직원과 같은 글이다(TWO_FACTOR_TEXT.noteChangePhone — 끄지 않고 바꾼다)
+   */
   cannotDisable: '회사 정책에 따라 끌 수 없습니다',
-  /** 필수인 직원이 켠 뒤 — 아래 안내의 첫 줄 (12단계 「끈 뒤 새 휴대폰으로 다시 켜 주세요」 대신) */
-  noteChangePhone: '휴대폰을 바꿀 때는 관리자에게 2단계 인증을 풀어 달라고 요청해 주세요. 다음에 로그인할 때 새 휴대폰으로 다시 켜면 됩니다.',
 } as const
diff --git a/frontend/src/shared/types/account-security.ts b/frontend/src/shared/types/account-security.ts
index 8f33e54..3246671 100644
--- a/frontend/src/shared/types/account-security.ts
+++ b/frontend/src/shared/types/account-security.ts
@@ -37,6 +37,25 @@ export interface TwoFactorDeactivationPayload {
   otpCode: string
 }
 
+/** POST /two-factor/enrollments/{id}/verification 본문 (16단계 — 휴대폰 바꾸기 ①, 새 휴대폰의 코드) */
+export interface TwoFactorVerificationPayload {
+  otpCode: string
+}
+
+/** POST /two-factor/enrollments/{id}/verification 응답 — 새 휴대폰의 코드가 그 등록의 키와 맞다 (서버가 등록에 "확인됨"을 둔다) */
+export interface TwoFactorVerification {
+  verified: true
+}
+
+/** POST /two-factor/replacements 본문 (16단계 — 휴대폰 바꾸기 ②). 응답은 GET /two-factor 와 같은 모양 */
+export interface TwoFactorReplacementPayload {
+  /** ①에서 확인한 등록 */
+  enrollmentId: string
+  /** 지금 휴대폰의 코드 */
+  currentOtpCode: string
+  currentPassword: string
+}
+
 /** 앱 비밀번호 · 로그인 기록의 메일 프로그램 방식 */
 export type MailClientProtocol = 'imap' | 'smtp'
 
diff --git a/frontend/src/shared/types/contacts.ts b/frontend/src/shared/types/contacts.ts
index 4ba3c42..e0995e6 100644
--- a/frontend/src/shared/types/contacts.ts
+++ b/frontend/src/shared/types/contacts.ts
@@ -1,4 +1,4 @@
-// 주소록 API 공유 타입 — docs/mail/api-contract.md 3절 "주소록 — 8단계"와 같은 구조
+// 주소록 API 공유 타입 — docs/mail/api-contract.md 3절 "주소록 — 8단계"(16단계 가져오기 · 내보내기 포함)와 같은 구조
 // 계약이 바뀌면 이 파일부터 맞춘다 (백엔드 Swagger 가 최종 기준).
 
 import type { CursorPaginationQuery } from '@/shared/types/pagination'
@@ -138,3 +138,55 @@ export interface DirectoryListQuery extends CursorPaginationQuery {
   /** 그 그룹 구성원이 가진 주소를 뺀다 — 구성원 넣기 창 */
   excludeGroupId?: string
 }
+
+// ── 가져오기 · 내보내기 (16단계 — 계약 3절 "가져오기 · 내보내기") ──────────────
+
+/**
+ * 가져오기 한 줄 — 만들기 본문(ContactInput — 검사도 같다)에 화면이 만든 uid(`urn:uuid:` + 소문자 UUID).
+ * 같은 uid 를 다시 보내면 서버는 두 번 만들지 않고 그 카드 id 를 돌려준다 (멈춘 넣기를 [다시 시도]로 잇는다)
+ */
+export interface ContactImportItem extends ContactInput {
+  uid: string
+}
+
+/** POST /contact-import-checks · /contact-imports 본문 — 1~100명 */
+export interface ContactImportPayload {
+  contacts: ContactImportItem[]
+}
+
+/** 이미 있는 연락처인가 — 같은 이메일(앞뒤 공백 · 대소문자 무시), 이메일이 없으면 이름과 전화(숫자만)가 모두 같은 연락처 */
+export type ContactImportCheckStatus = 'new' | 'exists'
+
+/** POST /contact-import-checks 응답 — 만들지 않는다. remaining 은 더 둘 수 있는 연락처 수(3,000 − 지금 수) */
+export interface ContactImportChecked {
+  items: { uid: string; status: ContactImportCheckStatus }[]
+  remaining: number
+}
+
+/**
+ * POST /contact-imports 응답(201) — 만든 것만 온다(엔진이 일부만 받으면 빠진 uid 는 넣지 못한 것).
+ * skippedGroupIds 는 구성원 500명이 넘어 넣지 못한 그룹 (그 연락처는 그 그룹 없이 만들었다)
+ */
+export interface ContactImported {
+  items: { uid: string; id: string; skippedGroupIds: string[] }[]
+}
+
+/** POST /contact-deletions 본문 — 1~500개, 겹치지 않게 */
+export interface ContactDeletionsPayload {
+  ids: string[]
+}
+
+/** POST /contact-deletions 응답 — 없던 id 는 notFoundIds (되돌리기 표는 남기지 않는다) */
+export interface ContactDeletions {
+  deletedIds: string[]
+  notFoundIds: string[]
+}
+
+/** 내보내기 형식 — vCard 3.0 · CSV(UTF-8 BOM) */
+export type ContactExportFormat = 'vcard' | 'csv'
+
+/** GET /contact-exports 쿼리 — groupId 가 없으면 내 주소록 전체 (사내 목록은 넣지 않는다) */
+export interface ContactExportQuery {
+  format: ContactExportFormat
+  groupId?: string
+}
diff --git a/frontend/src/shared/types/mail-signature.ts b/frontend/src/shared/types/mail-signature.ts
new file mode 100644
index 0000000..9548a8a
--- /dev/null
+++ b/frontend/src/shared/types/mail-signature.ts
@@ -0,0 +1,42 @@
+// 여러 서명 — 계약 2절 "서명" (16단계 · 디자인 원본 Signature16)
+// 서명은 직원마다 10개까지, 만든 차례로 온다. 새 메일 · 답장과 전달에 넣을 서명(기본 둘)은 따로 고른다.
+// 서명 그림의 모양은 지금 그대로다 (shared/types/mail.ts 의 SignatureImage — 그림 경로 /mail-signature/images 도 그대로).
+
+import type { SignatureImage } from '@/shared/types/mail'
+
+/** GET · POST · PUT /mail-signatures 의 서명 하나 */
+export interface MailSignature {
+  id: string
+  /** 이름 — 앞뒤 공백을 뺀 1~30자, 겹치지 않는다(영문 대소문자를 가리지 않는다) */
+  name: string
+  /** 서명 서식 — 서식 본문 규칙 + 서명 그림 (비었으면 null) */
+  bodyHtml: string | null
+  /** 텍스트 서명 — 텍스트 대체 본문에 넣는다 (비었으면 null) */
+  body: string | null
+  /** 이 서명이 쓰는 그림 */
+  images: SignatureImage[]
+  /** 마지막으로 저장한 시각 (ISO 8601 UTC) */
+  updatedAt: string | null
+}
+
+/** POST · PUT /mail-signatures 본문 */
+export interface MailSignaturePayload {
+  name: string
+  bodyHtml: string | null
+  body: string | null
+}
+
+/** GET · PUT /mail-signature-defaults — 새 메일 · 답장과 전달에 넣을 서명 (null = 넣지 않음) */
+export interface MailSignatureDefaults {
+  newMessageId: string | null
+  replyId: string | null
+}
+
+/** 서명을 넣는 쓰기 종류 — 새 메일 · 답장과 전달 */
+export type SignatureUse = 'new' | 'reply'
+
+/**
+ * 쓰기 화면 본문에 든 서명 — 저장한 서명(그 id) · 넣지 않음(서명 자리가 없다) ·
+ * 서명 자리가 있지만 어느 서명과도 글 · 그림이 같지 않다(고쳤거나 지운 서명 — [서명 ▾] 에 ✓ 를 붙이지 않는다)
+ */
+export type ComposeSignatureState = { kind: 'signature'; id: string } | { kind: 'none' } | { kind: 'edited' }
diff --git a/frontend/src/shared/types/mail.ts b/frontend/src/shared/types/mail.ts
index 1954d06..b0d0ffb 100644
--- a/frontend/src/shared/types/mail.ts
+++ b/frontend/src/shared/types/mail.ts
@@ -498,9 +498,30 @@ export interface MailboxBulkResult {
 
 // ── 부재중 자동 응답 (계약 2절 "부재중 자동 응답" — 4단계) ──────────────
 
+/**
+ * 회사 밖에서 온 메일(봉투 보낸 사람의 도메인이 회사 메일 도메인이 아님)에 보낼 응답 (16단계) —
+ * same: 사내와 같은 응답(처음 값 — 위 제목 · 내용) · none: 보내지 않기 · separate: 따로 쓰기(아래 제목 · 내용)
+ */
+export type MailVacationExternalMode = 'same' | 'none' | 'separate'
+
+/**
+ * 회사 밖 응답 (16단계). 다른 mode 로 바꿔도 따로 쓴 제목 · 내용은 그대로 저장한다 — 다시 따로 쓰기를 고르면 그대로 나온다.
+ * 따로 쓰기를 켤 때는 제목(1~150자) · 내용(1~600자 — 보이는 글) · 서식 본문(정화 뒤 10,000자)이 위 칸과 같은 한도다. 쓴 적 없으면 셋 다 null
+ */
+export interface MailVacationExternal {
+  mode: MailVacationExternalMode
+  subject: string | null
+  /** 보이는 글 — 서식 본문의 대체 본문 */
+  textBody: string | null
+  /** 서식 본문 — null 이면 글만 */
+  htmlBody: string | null
+}
+
 /**
  * PUT /mail-vacation 본문 — 저장은 전체 교체. 꺼도 쓴 제목 · 내용은 남긴다.
- * 제목(1~150자) · 내용(1~600자)은 켤 때만 필요하다 — 꺼져 있으면 빈 값도 된다. 설정한 적 없으면 꺼짐 · 빈 값이 온다
+ * 제목(1~150자) · 내용(1~600자)은 켤 때만 필요하다 — 꺼져 있으면 빈 값도 된다. 설정한 적 없으면 꺼짐 · 빈 값이 온다.
+ * 16단계에 더한 칸(htmlBody · external)은 응답에 늘 있다 — 없으면(16단계 전 서버) 글만 · 사내와 같은 응답이다(useMail 이 맞춘다).
+ * 기간만 보는 곳(메일함 패널 안내)은 4단계 칸만 쓴다. 화면은 늘 일곱 칸을 다 보낸다(useMail.saveVacation)
  */
 export interface MailVacation {
   isEnabled: boolean
@@ -509,8 +530,12 @@ export interface MailVacation {
   /** ISO 8601 UTC — null 이면 끌 때까지. 화면은 끝나는 날 다음 날 0시(브라우저 시간대)를 보낸다 */
   toDate: string | null
   subject: string
-  /** 글자만(서식 없음) — 서명은 붙지 않는다 */
+  /** 보이는 글 — 서식 본문의 대체 본문(16단계 전에는 글만). 서명은 붙지 않는다 */
   textBody: string
+  /** 서식 본문 (16단계 — 서명 칸과 같은 편집기, 그림 없음). null 이면 글만 */
+  htmlBody?: string | null
+  /** 회사 밖에서 온 메일에 보낼 응답 (16단계) */
+  external?: MailVacationExternal
 }
 
 /** GET · PUT /mail-vacation 의 응답 (7단계) — 저장한 값 + 엔진에서 지금 동작하는지 */
@@ -647,30 +672,6 @@ export interface SignatureImage {
   height: number
 }
 
-/** GET · PUT /mail-signature — 사용자마다 하나 */
-export interface MailSignature {
-  /** 서명 서식 — 서식 본문 규칙 + 서명 그림 */
-  bodyHtml: string | null
-  /** 텍스트 서명 (텍스트 대체 본문에 넣는다) */
-  body: string | null
-  /** 새 메일에 넣는다 */
-  isForNew: boolean
-  /** 답장 · 전달에 넣는다 — 인용 위 */
-  isForReply: boolean
-  /** 서명이 쓰는 그림 */
-  images: SignatureImage[]
-  /** 저장한 적 없으면 null */
-  updatedAt: string | null
-}
-
-/** PUT /mail-signature 본문 */
-export interface SaveSignaturePayload {
-  bodyHtml: string | null
-  body: string | null
-  isForNew: boolean
-  isForReply: boolean
-}
-
 // ── 받는 사람 추천 (계약 2절 "받는 사람 추천" · 3절 "메일과 함께") ────────────────
 
 /**
diff --git a/frontend/src/shared/utils/contact-import/batches.spec.ts b/frontend/src/shared/utils/contact-import/batches.spec.ts
new file mode 100644
index 0000000..311c75c
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/batches.spec.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  CONTACT_IMPORT_BATCH_MAX_BYTES,
+  CONTACT_IMPORT_BATCH_MAX_VALUES,
+  CONTACT_IMPORT_BATCH_SIZE,
+} from '@/shared/constants/contacts'
+import type { ContactImportItem } from '@/shared/types/contacts'
+import { envelopeOf, jsonValueCount, requestBatchSize, utf8Length } from './batches'
+
+// 요청 묶음 나누기 — 100명 · JSON 값 8,000개 · 700KB 가운데 먼저 닿는 데서 (계약 3절 "가져오기 · 내보내기"의 본문 한도)
+
+const LIMITS = {
+  maxItems: CONTACT_IMPORT_BATCH_SIZE,
+  maxValues: CONTACT_IMPORT_BATCH_MAX_VALUES,
+  maxBytes: CONTACT_IMPORT_BATCH_MAX_BYTES,
+}
+
+/** 칸을 한도까지 채운 연락처 — 이메일 · 전화 20개씩 */
+function fullContact(index: number, groupIds: string[] = []): ContactImportItem {
+  return {
+    uid: `urn:uuid:00000000-0000-4000-8000-${String(index).padStart(12, '0')}`,
+    name: `사람${index}`,
+    emails: Array.from({ length: 20 }, (_, k) => ({ address: `p${index}.${k}@example.org`, label: 'work' as const })),
+    phones: Array.from({ length: 20 }, (_, k) => ({ number: `010-${1000 + index}-${2000 + k}`, label: 'mobile' as const })),
+    company: '한빛상사',
+    department: '구매팀',
+    title: '과장',
+    note: null,
+    groupIds,
+  }
+}
+
+/** 서버(backend shared/utils/json-shape.ts — findJsonShapeProblem)와 같은 셈: 맨 바깥 1 + 객체 · 배열마다 항목 수 */
+function serverValueCount(body: unknown): number {
+  let values = 1
+  const pending: unknown[] = [body]
+  while (pending.length > 0) {
+    const next = pending.pop()
+    if (typeof next !== 'object' || next === null) continue
+    const children = Array.isArray(next) ? next : Object.values(next)
+    values += children.length
+    pending.push(...children)
+  }
+  return values
+}
+
+describe('jsonValueCount · utf8Length', () => {
+  it('값 하나하나를 센다 — 서버의 셈(맨 바깥 + 항목 수)과 같다', () => {
+    const body = { contacts: [fullContact(1), fullContact(2, ['g1', 'g2'])] }
+    expect(jsonValueCount(body)).toBe(serverValueCount(body))
+    // 연락처 하나 = 자기 1 + 칸 9 + 이메일 20 × (1 + 2) + 전화 20 × (1 + 2) + 그룹 수
+    expect(jsonValueCount(fullContact(1))).toBe(130)
+    expect(jsonValueCount(fullContact(2, ['g1', 'g2']))).toBe(132)
+    expect(jsonValueCount({ a: undefined, b: null })).toBe(2)
+  })
+
+  it('UTF-8 길이 — 한글 3바이트 · 그림 글자 4바이트', () => {
+    expect(utf8Length('abc')).toBe(3)
+    expect(utf8Length('강민지')).toBe(9)
+    expect(utf8Length('😀')).toBe(4)
+    expect(utf8Length('é')).toBe(2)
+    expect(envelopeOf('contacts')).toEqual({ values: 2, bytes: '{"contacts":[]}'.length })
+  })
+})
+
+describe('requestBatchSize', () => {
+  it('보통 연락처는 100명에서 끊는다', () => {
+    const items = Array.from({ length: 150 }, (_, index) => ({ uid: `u${index}`, name: `사람${index}`, emails: [], phones: [] }))
+    expect(requestBatchSize(items, LIMITS, envelopeOf('contacts'))).toBe(100)
+    expect(requestBatchSize([], LIMITS, envelopeOf('contacts'))).toBe(0)
+  })
+
+  it('칸을 한도까지 채운 연락처 100명은 값 8,000개에서 나뉜다 — 나뉜 본문이 서버 한도(값 10,000)를 넘지 않는다', () => {
+    const items = Array.from({ length: 100 }, (_, index) => fullContact(index))
+    const first = requestBatchSize(items, LIMITS, envelopeOf('contacts'))
+    expect(first).toBe(61)
+    const body = { contacts: items.slice(0, first) }
+    expect(serverValueCount(body)).toBeLessThanOrEqual(CONTACT_IMPORT_BATCH_MAX_VALUES)
+    expect(serverValueCount({ contacts: items.slice(0, first + 1) })).toBeGreaterThan(CONTACT_IMPORT_BATCH_MAX_VALUES)
+    expect(requestBatchSize(items.slice(first), LIMITS, envelopeOf('contacts'))).toBe(39)
+  })
+
+  it('바이트에서도 끊는다 — 본문의 UTF-8 길이가 상한을 넘지 않게', () => {
+    const big = { uid: 'u', note: '메'.repeat(1000) }
+    const items = Array.from({ length: 100 }, () => big)
+    const limits = { ...LIMITS, maxBytes: 10_000 }
+    const size = requestBatchSize(items, limits, envelopeOf('contacts'))
+    expect(size).toBe(3)
+    expect(utf8Length(JSON.stringify({ contacts: items.slice(0, size) }))).toBeLessThanOrEqual(10_000)
+    expect(utf8Length(JSON.stringify({ contacts: items.slice(0, size + 1) }))).toBeGreaterThan(10_000)
+  })
+
+  it('첫 항목이 홀로 넘어도 하나는 담는다', () => {
+    expect(requestBatchSize([{ note: 'x'.repeat(100) }], { ...LIMITS, maxBytes: 10 }, envelopeOf('contacts'))).toBe(1)
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/batches.ts b/frontend/src/shared/utils/contact-import/batches.ts
new file mode 100644
index 0000000..1f22019
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/batches.ts
@@ -0,0 +1,79 @@
+// 요청 묶음 나누기 — 순수 함수 (16단계 가져오기 · 계약 3절 "가져오기 · 내보내기"의 본문 한도)
+// 확인 · 넣기 · 되돌리기 요청의 본문은 앱 공통 한도(JSON 1MB · 값 10,000개)를 지나야 한다. 보통 100명이 50KB 남짓이지만
+// 칸을 한도까지 채운 연락처(이메일 · 전화 20개씩 · 그룹 여럿)가 몰리면 100명이 값 10,000개를 넘는다 —
+// 그래서 사람 수 · 값 수 · 바이트 가운데 먼저 닿는 데서 끊는다(상한은 서버 한도보다 넉넉히 아래 — constants/contacts.ts).
+// 값 수는 서버와 같은 셈이다 — 값 하나하나를 센다(맨 바깥 포함, 객체 · 배열마다 그 항목 수를 더한 것과 같다 — 짝: backend shared/utils/json-shape.ts).
+// 바이트는 JSON.stringify 의 UTF-8 길이다
+
+/** 한 묶음의 상한 */
+export interface RequestBatchLimits {
+  maxItems: number
+  maxValues: number
+  maxBytes: number
+}
+
+/** 본문의 겉 — `{"contacts":[ … ]}` 처럼 항목 배열을 감싼 부분의 값 수 · 바이트 (항목 사이 쉼표는 따로 센다) */
+export interface RequestEnvelope {
+  values: number
+  bytes: number
+}
+
+/** `{ "<key>": [ … ] }` 꼴 본문의 겉 — 맨 바깥 객체 · 그 안의 배열 둘이 값이고, 바이트는 `{"key":[` + `]}` */
+export function envelopeOf(key: string): RequestEnvelope {
+  return { values: 2, bytes: utf8Length(`{${JSON.stringify(key)}:[]}`) }
+}
+
+/** 글의 UTF-8 바이트 수 */
+export function utf8Length(text: string): number {
+  let bytes = 0
+  for (let index = 0; index < text.length; index += 1) {
+    const code = text.charCodeAt(index)
+    if (code < 0x80) bytes += 1
+    else if (code < 0x800) bytes += 2
+    else if (code >= 0xd800 && code <= 0xdbff && index + 1 < text.length) {
+      // 서로게이트 쌍 — 네 바이트 글자 하나
+      bytes += 4
+      index += 1
+    } else bytes += 3
+  }
+  return bytes
+}
+
+/** 값 하나가 본문에서 차지하는 값 수 — 그 값과 그 안의 모든 값 (JSON 으로 나가지 않는 undefined 는 세지 않는다) */
+export function jsonValueCount(value: unknown): number {
+  let count = 0
+  const pending: unknown[] = [value]
+  while (pending.length > 0) {
+    const next = pending.pop()
+    if (next === undefined) continue
+    count += 1
+    if (typeof next === 'object' && next !== null) {
+      for (const child of Array.isArray(next) ? next : Object.values(next)) pending.push(child)
+    }
+  }
+  return count
+}
+
+/**
+ * 앞에서부터 한 묶음에 담을 항목 수 — 사람 수 · 값 수 · 바이트 가운데 먼저 닿는 데서 끊는다.
+ * 첫 항목이 홀로 넘어도 하나는 담는다(그런 연락처는 없다 — 칸마다 한도가 있다). 항목이 없으면 0
+ */
+export function requestBatchSize(
+  items: readonly unknown[],
+  limits: RequestBatchLimits,
+  envelope: RequestEnvelope,
+): number {
+  let values = envelope.values
+  let bytes = envelope.bytes
+  let size = 0
+  for (const item of items) {
+    if (size >= limits.maxItems) break
+    const itemValues = jsonValueCount(item)
+    const itemBytes = utf8Length(JSON.stringify(item) ?? '') + (size > 0 ? 1 : 0)
+    if (size > 0 && (values + itemValues > limits.maxValues || bytes + itemBytes > limits.maxBytes)) break
+    values += itemValues
+    bytes += itemBytes
+    size += 1
+  }
+  return size
+}
diff --git a/frontend/src/shared/utils/contact-import/csv.spec.ts b/frontend/src/shared/utils/contact-import/csv.spec.ts
new file mode 100644
index 0000000..6722408
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/csv.spec.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+
+import { encodeEucKr } from '@/test-utils/euc-kr'
+import { detectCsvDelimiter, parseCsv } from './csv'
+import { decodeText, decodeWithCharset, looksBinary } from './text'
+
+// CSV 읽기 · 글자 풀기 (16단계 가져오기 — 디자인 원본 Contacts16 "6 받는 파일")
+
+describe('parseCsv', () => {
+  it('따옴표로 감싼 칸 안의 쉼표 · 줄바꿈 · "" 를 그대로 둔다', () => {
+    const text = '이름,메모\r\n강민지,"견적은 월말 전에, ""꼭""\n보내기"\r\n박지훈,\r\n'
+    expect(parseCsv(text)).toEqual([
+      ['이름', '메모'],
+      ['강민지', '견적은 월말 전에, "꼭"\n보내기'],
+      ['박지훈', ''],
+    ])
+  })
+
+  it('줄 끝은 CRLF · LF · CR 모두 받고, 글 끝의 줄바꿈 뒤는 줄로 세지 않는다', () => {
+    expect(parseCsv('a,b\nc,d\re,f\r\n')).toEqual([
+      ['a', 'b'],
+      ['c', 'd'],
+      ['e', 'f'],
+    ])
+    expect(parseCsv('a,b')).toEqual([['a', 'b']])
+  })
+
+  it('빈 줄도 한 줄로 둔다 — 엑셀의 행 번호와 맞게 (부르는 쪽이 건너뛴다)', () => {
+    expect(parseCsv('이름\n\n강민지\n')).toEqual([['이름'], [''], ['강민지']])
+  })
+
+  it('구분자는 첫 줄에 가장 많은 것 — 탭 · 세미콜론도 받는다', () => {
+    expect(detectCsvDelimiter('이름\t이메일\t회사\n김\ta@b.kr\tX')).toBe('\t')
+    expect(detectCsvDelimiter('Name;E-mail;Phone\nKim;a@b.kr;010')).toBe(';')
+    expect(detectCsvDelimiter('"a,b";c\nx')).toBe(';')
+    expect(parseCsv('이름\t메모\n김\t"a\tb"')).toEqual([
+      ['이름', '메모'],
+      ['김', 'a\tb'],
+    ])
+  })
+
+  it('닫히지 않은 따옴표 · 칸 가운데의 따옴표는 느슨하게 읽는다', () => {
+    expect(parseCsv('a,"bc\nd')).toEqual([['a', 'bc\nd']])
+    expect(parseCsv('a,b"c,d')).toEqual([['a', 'b"c', 'd']])
+  })
+})
+
+describe('decodeText', () => {
+  it('UTF-8 BOM 은 떼고 UTF-8 로 읽는다 (네이버 · 우리 내보내기)', () => {
+    const bytes = Uint8Array.from([0xef, 0xbb, 0xbf, ...new TextEncoder().encode('이름,이메일')])
+    expect(decodeText(bytes)).toBe('이름,이메일')
+  })
+
+  it('BOM 이 없으면 UTF-8, 틀린 바이트가 있으면 EUC-KR (한국어 엑셀의 CSV)', () => {
+    expect(decodeText(new TextEncoder().encode('김아라,ara@x.kr'))).toBe('김아라,ara@x.kr')
+    // 시험은 KS X 1001 글자만 쓴다 — Node(ICU)의 euc-kr 은 CP949 확장 글자(똠 등)를 모른다(브라우저는 WHATWG 대로 안다)
+    expect(decodeText(encodeEucKr('성,이름\n강,민지\n홍길동'))).toBe('성,이름\n강,민지\n홍길동')
+  })
+
+  it('UTF-16 BOM 이 있으면 그 꼴로 읽는다', () => {
+    const utf16 = Uint8Array.from([0xff, 0xfe, 0x74, 0xc7, 0x84, 0xb9])
+    expect(decodeText(utf16)).toBe('이름')
+  })
+
+  it('vCard 2.1 의 CHARSET — 모르는 이름이면 UTF-8, cp949 처럼 브라우저가 모르는 한국어 이름은 EUC-KR', () => {
+    const euckr = encodeEucKr('강민지')
+    expect(decodeWithCharset(euckr, 'EUC-KR')).toBe('강민지')
+    expect(decodeWithCharset(euckr, 'cp949')).toBe('강민지')
+    expect(decodeWithCharset(new TextEncoder().encode('강민지'), null)).toBe('강민지')
+    expect(decodeWithCharset(new TextEncoder().encode('강민지'), 'x-unknown')).toBe('강민지')
+  })
+
+  it('NUL 이 든 글은 바이너리로 본다', () => {
+    expect(looksBinary('PNG\u0000\u0001')).toBe(true)
+    expect(looksBinary('이름,이메일')).toBe(false)
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/csv.ts b/frontend/src/shared/utils/contact-import/csv.ts
new file mode 100644
index 0000000..932e5d5
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/csv.ts
@@ -0,0 +1,92 @@
+// CSV 읽기 — 순수 함수 (16단계 가져오기)
+// RFC 4180 꼴: 따옴표로 감싼 칸 안의 구분자 · 줄바꿈 · "" (따옴표 하나)를 받는다. 줄 끝은 CRLF · LF · CR 모두.
+// 구분자는 첫 줄(따옴표 밖)에 쉼표 · 탭 · 세미콜론 가운데 가장 많은 것 — 같으면 쉼표 (엑셀의 "텍스트(탭으로 분리)"도 받는다).
+// 글 길이에 비례하게 한 번만 훑는다 — 정규식 되돌림 없이
+
+const QUOTE = '"'
+const CANDIDATE_DELIMITERS = [',', '\t', ';'] as const
+export type CsvDelimiter = (typeof CANDIDATE_DELIMITERS)[number]
+
+/** 첫 줄(따옴표 밖)에서 가장 많이 나온 구분자 */
+export function detectCsvDelimiter(text: string): CsvDelimiter {
+  const counts = new Map<CsvDelimiter, number>(CANDIDATE_DELIMITERS.map((delimiter) => [delimiter, 0]))
+  let quoted = false
+  for (const char of text) {
+    if (char === QUOTE) {
+      quoted = !quoted
+      continue
+    }
+    if (quoted) continue
+    if (char === '\n' || char === '\r') break
+    const count = counts.get(char as CsvDelimiter)
+    if (count !== undefined) counts.set(char as CsvDelimiter, count + 1)
+  }
+  let best: CsvDelimiter = ','
+  for (const delimiter of CANDIDATE_DELIMITERS) {
+    if ((counts.get(delimiter) ?? 0) > (counts.get(best) ?? 0)) best = delimiter
+  }
+  return best
+}
+
+/**
+ * CSV 글 → 줄마다 칸. 빈 줄도 한 줄로 둔다(엑셀의 행 번호와 맞게 — 부르는 쪽이 건너뛴다). 글 끝의 줄바꿈 뒤는 줄로 세지 않는다.
+ * 따옴표가 닫히지 않은 채 끝나면 끝까지를 그 칸으로 본다 (느슨하게)
+ */
+export function parseCsv(text: string, delimiter: CsvDelimiter = detectCsvDelimiter(text)): string[][] {
+  const rows: string[][] = []
+  let row: string[] = []
+  let field = ''
+  /** 따옴표로 감싼 칸 안이다 — 닫는 따옴표 뒤의 글은 그대로 붙인다(느슨하게) */
+  let quoted = false
+  let index = 0
+  const length = text.length
+
+  const endField = () => {
+    row.push(field)
+    field = ''
+  }
+  const endRow = () => {
+    endField()
+    rows.push(row)
+    row = []
+  }
+
+  while (index < length) {
+    const char = text[index] ?? ''
+    if (quoted) {
+      if (char === QUOTE) {
+        if (text[index + 1] === QUOTE) {
+          field += QUOTE
+          index += 2
+          continue
+        }
+        quoted = false
+        index += 1
+        continue
+      }
+      field += char
+      index += 1
+      continue
+    }
+    if (char === QUOTE && field === '') {
+      quoted = true
+      index += 1
+      continue
+    }
+    if (char === delimiter) {
+      endField()
+      index += 1
+      continue
+    }
+    if (char === '\r' || char === '\n') {
+      endRow()
+      index += char === '\r' && text[index + 1] === '\n' ? 2 : 1
+      continue
+    }
+    field += char
+    index += 1
+  }
+  // 마지막 줄 — 글이 줄바꿈으로 끝났으면 더할 것이 없다
+  if (field !== '' || row.length > 0 || quoted) endRow()
+  return rows
+}
diff --git a/frontend/src/shared/utils/contact-import/read-file.spec.ts b/frontend/src/shared/utils/contact-import/read-file.spec.ts
new file mode 100644
index 0000000..33ab9f7
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/read-file.spec.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest'
+
+import { CONTACT_IMPORT_FILE_MAX_BYTES } from '@/shared/constants/contacts'
+import { encodeEucKr } from '@/test-utils/euc-kr'
+import { buildXlsx, buildZip } from '@/test-utils/zip'
+import { readContactFile } from './read-file'
+
+// 파일 하나 읽기 — 형식은 이름 끝과 파일 앞부분을 함께 본다 (디자인 원본 Contacts16 "2" — 읽지 못한 까닭)
+
+function fileOf(name: string, data: Uint8Array | string): File {
+  const bytes = typeof data === 'string' ? new TextEncoder().encode(data) : data
+  return new File([bytes.slice()], name)
+}
+
+/** 옛 오피스 파일(CFB)의 머리 + 목록 이름(UTF-16LE) */
+function cfbWith(streamName: string): Uint8Array {
+  const name: number[] = []
+  for (const char of streamName) name.push(char.charCodeAt(0), 0)
+  return Uint8Array.from([0xd0, 0xcf, 0x11, 0xe0, 0xa1, 0xb1, 0x1a, 0xe1, ...new Array(64).fill(0), ...name])
+}
+
+describe('readContactFile', () => {
+  it('20MB 를 넘으면 읽지 않고 바로 tooLarge', async () => {
+    const huge = { name: 'big.vcf', size: CONTACT_IMPORT_FILE_MAX_BYTES + 1, arrayBuffer: () => Promise.reject(new Error('읽으면 안 된다')) }
+    expect(await readContactFile(huge)).toEqual({ ok: false, problem: 'tooLarge', kind: null })
+  })
+
+  it('네이버 CSV(UTF-8 BOM · 값 앞의 \') — 표로 읽는다', async () => {
+    const csv = "\uFEFF성,이름,휴대폰번호,이메일,회사·소속명\n'강,'민지,'01041203387,'minji.kang@example.com,'한빛상사\n"
+    const result = await readContactFile(fileOf('NAVER_Contacts.csv', csv))
+    expect(result).toMatchObject({ ok: true, kind: 'table' })
+    expect(result.ok && result.records[0]).toMatchObject({ position: 2, name: '강민지', company: '한빛상사' })
+  })
+
+  it('EUC-KR CSV(한국어 엑셀의 "CSV(쉼표로 분리)")', async () => {
+    const bytes = encodeEucKr('이름,전자 메일 주소,휴대폰\r\n홍길동,gildong@example.com,010-1111-2222\r\n')
+    const result = await readContactFile(fileOf('주소록.csv', bytes))
+    expect(result.ok && result.records[0]).toMatchObject({
+      name: '홍길동',
+      emails: [{ address: 'gildong@example.com', label: 'work' }],
+    })
+  })
+
+  it('이름이 .csv 여도 안이 엑셀이면 엑셀로 읽는다', async () => {
+    const bytes = await buildXlsx([
+      ['이름', '이메일'],
+      ['김도현', 'dohyun.kim@example.net'],
+    ])
+    const result = await readContactFile(fileOf('contacts.csv', bytes))
+    expect(result).toMatchObject({ ok: true, kind: 'table', records: [{ name: '김도현' }] })
+  })
+
+  it('vCard — 이름이 .txt 여도 첫 줄이 BEGIN:VCARD 면 vCard', async () => {
+    const text = 'BEGIN:VCARD\nVERSION:3.0\nFN:문가은\nEMAIL:gaeun.moon@example.net\nEND:VCARD\n'
+    expect(await readContactFile(fileOf('export.txt', text))).toMatchObject({
+      ok: true,
+      kind: 'vcard',
+      records: [{ position: 1, name: '문가은' }],
+    })
+  })
+
+  it('옛 엑셀(.xls) · 암호를 건 엑셀 · 그 밖의 옛 오피스 파일을 가른다', async () => {
+    expect(await readContactFile(fileOf('list.xls', cfbWith('Workbook')))).toMatchObject({ ok: false, problem: 'xls' })
+    expect(await readContactFile(fileOf('list.csv', cfbWith('Workbook')))).toMatchObject({ ok: false, problem: 'xls' })
+    expect(await readContactFile(fileOf('secret.xlsx', cfbWith('EncryptedPackage')))).toMatchObject({
+      ok: false,
+      problem: 'unreadable',
+    })
+    expect(await readContactFile(fileOf('memo.doc', cfbWith('WordDocument')))).toMatchObject({
+      ok: false,
+      problem: 'unsupported',
+    })
+  })
+
+  it('넣을 수 없는 형식 — 그림 · 워드(zip) · 이름 끝을 모르는 글', async () => {
+    const png = Uint8Array.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00])
+    expect(await readContactFile(fileOf('photo.png', png))).toMatchObject({ ok: false, problem: 'unsupported' })
+    const docx = await buildZip([{ name: 'word/document.xml', data: '<w:document/>' }])
+    expect(await readContactFile(fileOf('resume.docx', docx))).toMatchObject({ ok: false, problem: 'unsupported' })
+    expect(await readContactFile(fileOf('notes.md', '# 메모'))).toMatchObject({ ok: false, problem: 'unsupported' })
+  })
+
+  it('.xlsx 인데 zip 이 아니면 열지 못한 것이다', async () => {
+    expect(await readContactFile(fileOf('broken.xlsx', '이름,이메일'))).toMatchObject({ ok: false, problem: 'unreadable' })
+  })
+
+  it('연락처를 찾지 못함 — 이름 · 이메일 열이 없는 CSV, 카드가 없는 vCard(vCard 는 kind 로 앞 문장만 쓴다)', async () => {
+    expect(await readContactFile(fileOf('a.csv', '날짜,금액\n2026-11-10,3000\n'))).toEqual({
+      ok: false,
+      problem: 'notFound',
+      kind: 'table',
+    })
+    expect(await readContactFile(fileOf('a.vcf', 'VERSION:3.0\n'))).toEqual({ ok: false, problem: 'notFound', kind: 'vcard' })
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/read-file.ts b/frontend/src/shared/utils/contact-import/read-file.ts
new file mode 100644
index 0000000..d6b0a41
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/read-file.ts
@@ -0,0 +1,99 @@
+// 연락처 파일 하나를 읽는다 — 형식을 알아보고(이름 끝 + 파일 앞부분) 연락처를 꺼낸다 (16단계 가져오기 · 디자인 원본 Contacts16 "2")
+// - 20MB 를 넘으면 읽지 않고 바로 tooLarge
+// - 안이 zip 이면 엑셀(.xlsx)로 — 이름이 .csv 여도. xl/workbook.xml 이 없는 zip(워드 · 그냥 zip)은 unsupported
+// - 안이 옛 오피스 파일(CFB)이면: 암호를 건 .xlsx(EncryptedPackage)는 unreadable, 옛 엑셀(Workbook · Book)은 xls, 그 밖은 unsupported
+// - 이름이 .xls 면 xls, .xlsx 인데 zip 이 아니면 unreadable
+// - 그 밖은 글로 풀어(BOM → UTF-8 → EUC-KR) 첫 줄이 BEGIN:VCARD 면 vCard, 이름이 .vcf 면 vCard, .csv · .tsv · .txt 면 CSV, 아니면 unsupported
+// 파일은 서버로 보내지 않는다 — 이 브라우저에서만 읽는다
+
+import { CONTACT_IMPORT_FILE_MAX_BYTES } from '@/shared/constants/contacts'
+import { parseCsv } from './csv'
+import { tableRecords } from './table'
+import { decodeText, looksBinary } from './text'
+import type { ContactFileReadResult, ImportedFileKind, TableRow } from './types'
+import { looksLikeVCard, parseVCards } from './vcard'
+import { NotSpreadsheetError, readXlsxRows } from './xlsx'
+import { isZip } from './zip'
+
+/** 옛 오피스 파일(CFB — .xls · .doc · 암호를 건 .xlsx)의 처음 여덟 바이트 */
+const CFB_SIGNATURE = [0xd0, 0xcf, 0x11, 0xe0, 0xa1, 0xb1, 0x1a, 0xe1] as const
+const CSV_EXTENSIONS = new Set(['csv', 'tsv', 'txt'])
+const VCARD_EXTENSIONS = new Set(['vcf', 'vcard'])
+
+function extensionOf(name: string): string {
+  const dot = name.lastIndexOf('.')
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : ''
+}
+
+function isCfb(bytes: Uint8Array): boolean {
+  return CFB_SIGNATURE.every((value, index) => bytes[index] === value)
+}
+
+function matchesAt(bytes: Uint8Array, pattern: readonly number[], index: number): boolean {
+  return pattern.every((value, offset) => bytes[index + offset] === value)
+}
+
+/** UTF-16LE 로 적힌 이름이 바이트 안에 있는가 (CFB 의 목록 이름) */
+function containsUtf16Name(bytes: Uint8Array, name: string): boolean {
+  const pattern: number[] = []
+  for (const char of name) pattern.push(char.charCodeAt(0), 0)
+  const first = pattern[0]
+  for (let index = 0; index + pattern.length <= bytes.length; index += 1) {
+    if (bytes[index] === first && matchesAt(bytes, pattern, index)) return true
+  }
+  return false
+}
+
+function failed(problem: Exclude<ContactFileReadResult, { ok: true }>['problem'], kind: ImportedFileKind | null = null): ContactFileReadResult {
+  return { ok: false, problem, kind }
+}
+
+async function readSpreadsheet(bytes: Uint8Array): Promise<ContactFileReadResult> {
+  let rows: TableRow[]
+  try {
+    rows = await readXlsxRows(bytes)
+  } catch (caught) {
+    return failed(caught instanceof NotSpreadsheetError ? 'unsupported' : 'unreadable', 'table')
+  }
+  return tableResult(rows)
+}
+
+function tableResult(rows: readonly TableRow[]): ContactFileReadResult {
+  const table = tableRecords(rows)
+  if (!table.recognized || table.records.length === 0) return failed('notFound', 'table')
+  return { ok: true, kind: 'table', records: table.records }
+}
+
+function textResult(text: string, extension: string): ContactFileReadResult {
+  if (looksLikeVCard(text) || VCARD_EXTENSIONS.has(extension)) {
+    const records = parseVCards(text)
+    return records.length > 0 ? { ok: true, kind: 'vcard', records } : failed('notFound', 'vcard')
+  }
+  if (!CSV_EXTENSIONS.has(extension)) return failed('unsupported')
+  const rows = parseCsv(text).map((cells, index) => ({ position: index + 1, cells }))
+  return tableResult(rows)
+}
+
+/** 파일 하나를 읽는다 — 읽기(파일 · 압축 풀기)만 기다린다 */
+export async function readContactFile(file: Pick<File, 'name' | 'size' | 'arrayBuffer'>): Promise<ContactFileReadResult> {
+  if (file.size > CONTACT_IMPORT_FILE_MAX_BYTES) return failed('tooLarge')
+  const extension = extensionOf(file.name)
+  let bytes: Uint8Array
+  try {
+    bytes = new Uint8Array(await file.arrayBuffer())
+  } catch {
+    return failed('unreadable')
+  }
+  if (bytes.length > CONTACT_IMPORT_FILE_MAX_BYTES) return failed('tooLarge')
+  if (isZip(bytes)) return readSpreadsheet(bytes)
+  if (isCfb(bytes)) {
+    if (containsUtf16Name(bytes, 'EncryptedPackage')) return failed('unreadable', 'table')
+    if (containsUtf16Name(bytes, 'Workbook') || containsUtf16Name(bytes, 'Book')) return failed('xls', 'table')
+    return failed('unsupported')
+  }
+  if (extension === 'xls') return failed('xls', 'table')
+  if (extension === 'xlsx') return failed('unreadable', 'table')
+  const text = decodeText(bytes)
+  if (looksBinary(text)) return failed('unsupported')
+  return textResult(text, extension)
+}
diff --git a/frontend/src/shared/utils/contact-import/records.spec.ts b/frontend/src/shared/utils/contact-import/records.spec.ts
new file mode 100644
index 0000000..5c7986d
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/records.spec.ts
@@ -0,0 +1,341 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ContactGroup } from '@/shared/types/contacts'
+import {
+  contactGroupKey,
+  duplicateReasonText,
+  fileGroupsOf,
+  fileGroupsText,
+  importPlanOf,
+  importPositionText,
+  infoSampleOf,
+  namePhonesKey,
+  noteWithInfo,
+  phoneDigitsKey,
+  prepareImport,
+  previewOf,
+  previewRowsOf,
+} from './records'
+import { emptyImportedRecord, type ImportedRecord } from './types'
+
+// 읽은 연락처 → 넣을 · 이미 있는 · 넣지 못하는 (디자인 원본 Contacts16 "3" · 계약 3절 — 서버와 같은 검사 · 겹침 규칙)
+
+function record(position: number, patch: Partial<ImportedRecord>): ImportedRecord {
+  return { ...emptyImportedRecord(position), ...patch }
+}
+
+let uidSeq = 0
+const uid = () => {
+  uidSeq += 1
+  return `urn:uuid:00000000-0000-4000-8000-${String(uidSeq).padStart(12, '0')}`
+}
+
+const GROUPS: ContactGroup[] = [
+  { id: 'g1', name: '거래처', memberCount: 4 },
+  { id: 'g2', name: '세무', memberCount: 2 },
+  { id: 'g3', name: 'Project Alpha', memberCount: 3 },
+]
+
+describe('prepareImport', () => {
+  it('넣지 못하는 줄 — 이메일 형식 → 이름과 이메일이 모두 없음 → 한 줄 칸 100자 → 메모 1,000자', () => {
+    const prepared = prepareImport(
+      'table',
+      [
+        record(57, { phones: [{ number: '01090346621', label: 'mobile' }] }),
+        record(203, { name: '정해린', emails: [{ address: 'haerin.jung@@example.net', label: 'work' }] }),
+        record(204, { name: '가'.repeat(101) }),
+        record(205, { name: '나', company: '회'.repeat(101) }),
+        record(206, { name: '다', note: '메'.repeat(1001) }),
+      ],
+      uid,
+    )
+    expect(prepared.candidates).toEqual([])
+    expect(prepared.problems).toEqual([
+      { position: 57, what: '010-9034-6621', reason: '이름과 이메일이 모두 없습니다.' },
+      { position: 203, what: '정해린 · haerin.jung@@example.net', reason: '이메일 형식이 올바르지 않습니다.' },
+      { position: 204, what: '가'.repeat(101), reason: '이름은 100자까지 쓸 수 있습니다.' },
+      { position: 205, what: `나 · ${'회'.repeat(101)}`, reason: '회사는 100자까지 쓸 수 있습니다.' },
+      { position: 206, what: '다', reason: '메모는 1,000자까지 쓸 수 있습니다.' },
+    ])
+  })
+
+  it('값을 다듬는다 — 이메일 겹침 빼기(대소문자 무시), 전화 하이픈, 형식에 맞지 않는 전화는 가져온 정보로', () => {
+    const prepared = prepareImport(
+      'table',
+      [
+        record(2, {
+          name: ' 강민지 ',
+          emails: [
+            { address: 'Minji.Kang@Example.com', label: 'work' },
+            { address: 'minji.kang@example.com ', label: 'personal' },
+          ],
+          phones: [
+            { number: '01041203387', label: 'mobile' },
+            { number: '010-4120-3387', label: 'mobile' },
+            { number: '02-555-0147 내선 3', label: 'work' },
+          ],
+          note: '첫 줄\r\n둘째 줄\t끝',
+          groups: ['거래처', ' 거래처 ', '* myContacts', '동호회'],
+          info: [{ kind: 'nickname', value: '민지' }],
+        }),
+      ],
+      uid,
+    )
+    const [candidate] = prepared.candidates
+    expect(candidate?.input).toEqual({
+      name: '강민지',
+      emails: [{ address: 'Minji.Kang@Example.com', label: 'work' }],
+      phones: [{ number: '010-4120-3387', label: 'mobile' }],
+      company: null,
+      department: null,
+      title: null,
+      note: '첫 줄\n둘째 줄 끝',
+      groupIds: [],
+    })
+    expect(candidate?.groups).toEqual(['거래처', '동호회'])
+    expect(candidate?.info).toEqual(['별명: 민지', '전화: 02-555-0147 내선 3'])
+    expect(candidate?.uid).toMatch(/^urn:uuid:[0-9a-f-]{36}$/)
+  })
+
+  it('파일 안의 겹침 — 같은 이메일은 앞 줄과 같음, 이메일이 없으면 이름과 전화(숫자만)가 모두 같을 때', () => {
+    const prepared = prepareImport(
+      'table',
+      [
+        record(2, { name: '강민지', emails: [{ address: 'minji.kang@example.com', label: 'work' }] }),
+        record(3, { name: '김도현', phones: [{ number: '010-5521-0934', label: 'mobile' }] }),
+        record(31, { name: '강민지2', emails: [{ address: 'MINJI.KANG@example.com', label: 'work' }] }),
+        record(40, { name: ' 김도현', phones: [{ number: '01055210934', label: 'mobile' }] }),
+        record(41, { name: '김도현', phones: [{ number: '010-0000-0000', label: 'mobile' }] }),
+      ],
+      uid,
+    )
+    expect(prepared.candidates.map((item) => item.position)).toEqual([2, 3, 41])
+    expect(prepared.duplicates).toEqual([
+      { position: 31, name: '강민지2', detail: 'MINJI.KANG@example.com', samePosition: 2 },
+      { position: 40, name: '김도현', detail: '010-5521-0934', samePosition: 3 },
+    ])
+    expect(prepared.found).toBe(5)
+  })
+
+  it('이름 + 전화 열쇠는 서버(contact-import.ts 의 phoneDigitsKey)와 같다 — 숫자만 · 숫자 없는 번호 빼기 · 겹침 없이 · 차례대로', () => {
+    expect(
+      phoneDigitsKey([{ number: '02-555-0147' }, { number: '(02) 555-0147' }, { number: '#*' }, { number: '010-1' }]),
+    ).toBe('0101,025550147')
+    expect(phoneDigitsKey([])).toBe('')
+    expect(namePhonesKey({ name: ' 김도현 ', phones: [{ number: '010-5521-0934', label: 'mobile' }] })).toBe(
+      '김도현\u000001055210934',
+    )
+    expect(namePhonesKey({ name: '  ', phones: [] })).toBeNull()
+  })
+
+  it('같은 번호가 두 번 적힌 줄도 한 번 적힌 줄과 같은 사람이다 (겹침을 없애고 견준다)', () => {
+    const prepared = prepareImport(
+      'table',
+      [
+        record(2, {
+          name: '김도현',
+          phones: [
+            { number: '02-555-0147', label: 'work' },
+            { number: '(02) 555-0147', label: 'other' },
+          ],
+        }),
+        record(3, { name: '김도현', phones: [{ number: '025550147', label: 'work' }] }),
+      ],
+      uid,
+    )
+    expect(prepared.candidates.map((item) => item.position)).toEqual([2])
+    expect(prepared.duplicates).toEqual([{ position: 3, name: '김도현', detail: '02-555-0147', samePosition: 2 }])
+  })
+
+  it('숫자 없는 번호는 열쇠에 넣지 않는다 — 가져온 정보로 가고, 번호 하나만 적힌 줄과 같은 사람이다', () => {
+    const prepared = prepareImport(
+      'table',
+      [
+        record(2, {
+          name: '문가은',
+          phones: [
+            { number: '010-7714-2093', label: 'mobile' },
+            { number: '내선 없음', label: 'other' },
+          ],
+        }),
+        record(3, { name: '문가은', phones: [{ number: '01077142093', label: 'mobile' }] }),
+      ],
+      uid,
+    )
+    expect(prepared.candidates[0]?.info).toEqual(['전화: 내선 없음'])
+    expect(prepared.duplicates.map((item) => [item.position, item.samePosition])).toEqual([[3, 2]])
+  })
+
+  it('이메일 · 전화는 20개까지만 담는다 (서버 한도)', () => {
+    const emails = Array.from({ length: 25 }, (_, index) => ({ address: `p${index}@example.com`, label: 'work' as const }))
+    const [candidate] = prepareImport('vcard', [record(1, { name: '많음', emails })], uid).candidates
+    expect(candidate?.input.emails).toHaveLength(20)
+  })
+})
+
+describe('previewOf', () => {
+  const prepared = prepareImport(
+    'table',
+    [
+      record(2, { name: '강민지', emails: [{ address: 'minji@example.com', label: 'work' }], groups: ['거래처'] }),
+      record(4, { name: '박지훈', emails: [{ address: 'jihoon@example.com', label: 'work' }] }),
+      record(5, { name: '문가은', emails: [{ address: 'gaeun@example.com', label: 'work' }], groups: ['동호회'] }),
+      record(6, { name: '강민지', emails: [{ address: 'minji@example.com', label: 'work' }] }),
+      record(7, { phones: [{ number: '010', label: 'mobile' }] }),
+    ],
+    uid,
+  )
+  const statuses = new Map(prepared.candidates.map((item) => [item.uid, item.position === 4 ? 'exists' : 'new'] as const))
+
+  it('주소록에 있는 연락처는 건너뛰고(줄 차례로 합친다), 남은 자리만큼 앞에서부터 넣는다', () => {
+    const preview = previewOf(prepared, statuses, 1)
+    expect(preview.toInsert.map((item) => item.position)).toEqual([2])
+    expect(preview.overLimit).toBe(1)
+    expect(preview.duplicates.map((item) => [item.position, item.samePosition])).toEqual([
+      [4, null],
+      [6, 2],
+    ])
+    expect(preview.problems.map((item) => item.position)).toEqual([7])
+    expect(preview.found).toBe(5)
+  })
+
+  it('묻지 않은 연락처(남은 자리를 다 채워 멈춤)는 새 연락처로 본다', () => {
+    const preview = previewOf(prepared, new Map(), null)
+    expect(preview.toInsert.map((item) => item.position)).toEqual([2, 4, 5])
+    expect(preview.overLimit).toBe(0)
+  })
+
+  it('표 줄 · 줄 번호 · 겹침 까닭 글', () => {
+    const preview = previewOf(prepared, statuses, null)
+    expect(previewRowsOf(preview)).toEqual([
+      { key: prepared.candidates[0]?.uid, name: '강민지', email: 'minji@example.com', phone: '', company: '', groups: '거래처' },
+      { key: prepared.candidates[2]?.uid, name: '문가은', email: 'gaeun@example.com', phone: '', company: '', groups: '동호회' },
+    ])
+    expect(importPositionText('table', 4)).toBe('4번째 줄')
+    expect(importPositionText('vcard', 12)).toBe('12번째 연락처')
+    expect(duplicateReasonText('table', preview.duplicates[0]!)).toBe('주소록에 있음')
+    expect(duplicateReasonText('table', preview.duplicates[1]!)).toBe('2번째 줄과 같음')
+    expect(duplicateReasonText('vcard', preview.duplicates[1]!)).toBe('2번째 연락처와 같음')
+  })
+})
+
+describe('그룹 글', () => {
+  function candidatesWith(groups: string[][]) {
+    return prepareImport(
+      'table',
+      groups.map((names, index) => record(index + 2, { name: `사람${index}`, groups: names })),
+      uid,
+    ).candidates
+  }
+
+  it('이미 있는 그룹 · 새로 만들 그룹 — 그룹 키는 앞뒤 공백 · ASCII 대소문자 무시', () => {
+    expect(contactGroupKey(' Project ALPHA ')).toBe('project alpha')
+    const summary = fileGroupsOf(candidatesWith([['거래처', '동호회'], ['세무', 'project alpha', '학교']]), GROUPS)
+    expect(summary).toEqual({ existing: ['거래처', '세무', 'Project Alpha'], created: ['동호회', '학교'] })
+    // 라틴 글자로 끝나는 이름은 소리를 알 수 없어 "은(는)"
+    expect(fileGroupsText(summary)).toBe(
+      '파일에 적힌 그룹 5개 가운데 거래처, 세무, Project Alpha은(는) 이미 있는 그룹에 넣고 동호회, 학교는 새로 만듭니다.',
+    )
+  })
+
+  it('보드의 글 — "거래처, 세무는 이미 있는 그룹에 넣고 동호회, 학교는 새로 만듭니다."', () => {
+    const summary = fileGroupsOf(candidatesWith([['거래처', '동호회'], ['세무', '학교']]), GROUPS)
+    expect(fileGroupsText(summary)).toBe('파일에 적힌 그룹 4개 가운데 거래처, 세무는 이미 있는 그룹에 넣고 동호회, 학교는 새로 만듭니다.')
+  })
+
+  it('한쪽뿐 · 없음 · 넷 넘으면 앞 셋과 외 N개', () => {
+    expect(fileGroupsText({ existing: ['거래처'], created: [] })).toBe('파일에 적힌 그룹 거래처는 이미 있는 그룹에 넣습니다.')
+    expect(fileGroupsText({ existing: [], created: ['동호회', '학교'] })).toBe('파일에 적힌 그룹 동호회, 학교는 새로 만듭니다.')
+    expect(fileGroupsText({ existing: [], created: [] })).toBe('파일에 적힌 그룹이 없습니다.')
+    expect(fileGroupsText({ existing: [], created: ['가', '나', '다', '라', '마'] })).toBe(
+      '파일에 적힌 그룹 가, 나, 다 외 2개는 새로 만듭니다.',
+    )
+  })
+})
+
+describe('가져온 정보 · 넣을 계획', () => {
+  it('메모 끝에 빈 줄 하나와 가져온 정보를 붙인다 — 1,000자를 넘게 되면 붙이지 않는다', () => {
+    expect(noteWithInfo('견적 문의는 월말 전에 보내기.', ['회사 주소: 서울 중구 세종대로 110', '별명: 민지'])).toBe(
+      '견적 문의는 월말 전에 보내기.\n\n가져온 정보\n회사 주소: 서울 중구 세종대로 110\n별명: 민지',
+    )
+    expect(noteWithInfo(null, ['별명: 민지'])).toBe('가져온 정보\n별명: 민지')
+    expect(noteWithInfo('메'.repeat(990), ['별명: 민지'])).toBe('메'.repeat(990))
+    expect(noteWithInfo('그대로', [])).toBe('그대로')
+  })
+
+  it('가져온 정보의 값은 한 줄 글로 다듬는다 — 탭 · \\r · 제어 문자가 메모에 남으면 서버가 그 묶음 전체를 400 으로 거절한다', () => {
+    const prepared = prepareImport(
+      'vcard',
+      [
+        record(1, {
+          name: '강민지',
+          phones: [{ number: '02-555\u0001-0147\t내선 3', label: 'work' }],
+          info: [
+            { kind: 'nickname', value: '민\t지\r\n' },
+            { kind: 'nickname', value: '\u0007' },
+            { kind: 'homepage', value: 'https://example.com/\u0000a' },
+          ],
+        }),
+      ],
+      uid,
+    )
+    expect(prepared.candidates[0]?.info).toEqual(['별명: 민 지', '홈페이지: https://example.com/ a', '전화: 02-555 -0147 내선 3'])
+    const plan = importPlanOf(previewOf(prepared, new Map(), 3000), GROUPS, { kind: 'none' }, true)
+    const note = plan.entries[0]?.item.note ?? ''
+    expect(note).toBe('가져온 정보\n별명: 민 지\n홈페이지: https://example.com/ a\n전화: 02-555 -0147 내선 3')
+    // 서버의 메모 규칙 — 줄바꿈(\n) 밖의 제어 문자(C0 · DEL · C1)는 받지 않는다
+    const controls = [...note].filter((char) => {
+      const code = char.charCodeAt(0)
+      return char !== '\n' && (code <= 0x1f || (code >= 0x7f && code <= 0x9f))
+    })
+    expect(controls).toEqual([])
+  })
+
+  it('붙인 메모는 연락처 창과 같은 메모 정리를 한 번 더 지난다', () => {
+    expect(noteWithInfo('첫 줄\r\n둘째\t줄', ['별명: 민\u0001지'])).toBe('첫 줄\n둘째 줄\n\n가져온 정보\n별명: 민 지')
+  })
+
+  it('견본은 정보가 붙는 첫 연락처 — 원래 메모 · 붙는 줄', () => {
+    const candidates = prepareImport(
+      'table',
+      [
+        record(2, { name: '정보 없음' }),
+        record(3, { name: '강민지', note: '견적 문의', info: [{ kind: 'birthday', value: '1988년 3월 14일 (음력)' }] }),
+      ],
+      uid,
+    ).candidates
+    expect(infoSampleOf(candidates)).toEqual({
+      name: '강민지',
+      original: ['견적 문의'],
+      added: ['가져온 정보', '생일: 1988년 3월 14일 (음력)'],
+    })
+  })
+
+  it('계획 — 그룹 열쇠 · 모두 넣을 그룹(이미 있는 이름이면 그 그룹) · 메모 붙이기 · 건너뛴 수', () => {
+    const prepared = prepareImport(
+      'table',
+      [
+        record(2, { name: '강민지', emails: [{ address: 'minji@example.com', label: 'work' }], groups: ['거래처', '동호회'], info: [{ kind: 'nickname', value: '민지' }] }),
+        record(3, { name: '박지훈', emails: [{ address: 'minji@example.com', label: 'work' }] }),
+        record(4, { name: '문가은', emails: [{ address: 'gaeun@example.com', label: 'work' }] }),
+      ],
+      uid,
+    )
+    const preview = previewOf(prepared, new Map(), 3000)
+    const plan = importPlanOf(preview, GROUPS, { kind: 'new', name: ' 세무 ' }, true)
+    expect(plan.groups).toEqual([
+      { key: '세무', name: '세무', id: 'g2' },
+      { key: '거래처', name: '거래처', id: 'g1' },
+      { key: '동호회', name: '동호회', id: null },
+    ])
+    expect(plan.entries.map((entry) => entry.groupKeys)).toEqual([['거래처', '동호회', '세무'], ['세무']])
+    expect(plan.entries[0]?.item.note).toBe('가져온 정보\n별명: 민지')
+    expect(plan.entries[0]?.item.uid).toBe(prepared.candidates[0]?.uid)
+    expect(plan.skipped).toBe(1)
+    expect(plan.overLimit).toBe(0)
+
+    const without = importPlanOf(preview, GROUPS, { kind: 'existing', id: 'g3' }, false)
+    expect(without.entries[0]?.item.note).toBeNull()
+    expect(without.entries.map((entry) => entry.groupKeys)).toEqual([['거래처', '동호회', 'project alpha'], ['project alpha']])
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/records.ts b/frontend/src/shared/utils/contact-import/records.ts
new file mode 100644
index 0000000..2ca512e
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/records.ts
@@ -0,0 +1,508 @@
+// 읽은 연락처 → 넣을 연락처 · 이미 있는 연락처 · 넣지 못하는 줄 (16단계 가져오기 · 디자인 원본 Contacts16 "3" · 계약 3절)
+// - 검사는 연락처 추가 창 · 서버와 같거나 더 좁다(contacts.ts · mail-address.ts 의 isStrictEmail) — 화면이 넘긴 줄은 서버도 받는다
+//   넣지 못하는 까닭: 이메일 형식 → 이름과 이메일이 모두 없음 → 이름 · 회사 · 부서 · 직책 100자 → 메모 1,000자
+// - 파일 안의 겹침(서버와 같은 규칙 — 짝: backend modules/contacts/contact-import.ts): 같은 이메일(앞뒤 공백 · 대소문자 무시)이 앞 줄에 있으면 "N번째 줄과 같음",
+//   이메일이 없으면 이름(앞뒤 공백만 뺌)과 전화 숫자 모음(번호마다 숫자만 — 겹침 · 차례 무시, 숫자 없는 번호는 뺌)이 모두 같은 앞 줄.
+//   주소록과의 겹침은 서버가 본다(POST /contact-import-checks)
+// - 형식이 맞지 않는 전화번호(내선 · 글자가 든 번호)는 버리지 않고 "가져온 정보"의 전화 줄로 둔다. 전화 · 이메일은 20개까지
+// - 넣을 때 메모 끝에 "가져온 정보"를 붙인다(고를 수 있다) — 붙이면 1,000자를 넘는 연락처는 그 연락처만 붙이지 않는다.
+//   정보 값은 한 줄 글로 다듬고(cleanText), 붙인 메모는 연락처 창과 같은 메모 정리를 한 번 더 지난다(서버는 메모의 줄바꿈 밖 제어 문자를 받지 않는다)
+
+import {
+  CONTACT_EMAIL_MAX_LENGTH,
+  CONTACT_EMAILS_MAX,
+  CONTACT_GROUP_NAME_MAX_LENGTH,
+  CONTACT_IMPORT_GROUP_NAMES_SHOWN,
+  CONTACT_IMPORT_INFO_TEXT,
+  CONTACT_IMPORT_PREVIEW_ROWS,
+  CONTACT_IMPORT_PROBLEM_TEXT,
+  CONTACT_IMPORT_TEXT,
+  CONTACT_NOTE_MAX_LENGTH,
+  CONTACT_PHONES_MAX,
+  CONTACT_TEXT_MAX_LENGTH,
+} from '@/shared/constants/contacts'
+import type {
+  ContactEmail,
+  ContactGroup,
+  ContactImportCheckStatus,
+  ContactImportItem,
+  ContactInput,
+  ContactPhone,
+} from '@/shared/types/contacts'
+import { contactNoteText, isValidContactPhone } from '@/shared/utils/contacts'
+import { formatCount } from '@/shared/utils/format'
+import { isStrictEmail, normalizeEmail } from '@/shared/utils/mail-address'
+import type { ImportedFileKind, ImportedInfo, ImportedInfoKind, ImportedRecord } from './types'
+import { cleanGroupName, cleanText, formatKoreanPhone } from './values'
+
+/** 넣을 수 있는 연락처 하나 — 서버의 검사를 통과하는 값 (그룹 · 가져온 정보는 넣을 때 붙인다) */
+export interface ImportCandidate {
+  position: number
+  /** urn:uuid: + 소문자 UUID — 확인 · 넣기 · 다시 넣기가 같은 값을 쓴다 */
+  uid: string
+  /** groupIds 는 비어 있다. note 는 파일의 메모 그대로(가져온 정보 없이) */
+  input: ContactInput
+  /** 파일에 적힌 그룹 이름 — 다듬었고 겹치지 않는다 */
+  groups: string[]
+  /** 가져온 정보 줄 ("회사 주소: 서울 중구 세종대로 110") */
+  info: string[]
+}
+
+/** 넣지 못하는 줄 */
+export interface ImportProblem {
+  position: number
+  /** 그 줄에 적힌 것 — 이름 · 이메일 · 전화 · 회사 가운데 앞의 둘 */
+  what: string
+  reason: string
+}
+
+/** 이미 있는 연락처 — samePosition 이 있으면 파일 앞 줄과 같음, null 이면 주소록에 있음 */
+export interface ImportDuplicate {
+  position: number
+  name: string
+  /** 이메일 — 없으면 전화번호 */
+  detail: string
+  samePosition: number | null
+}
+
+export interface PreparedImport {
+  kind: ImportedFileKind
+  /** 파일에서 찾은 연락처 수 (넣지 못하는 줄 포함) */
+  found: number
+  /** 파일 안에서 겹치지 않는 넣을 수 있는 연락처 — 파일 차례 */
+  candidates: ImportCandidate[]
+  /** 파일 안의 겹침 */
+  duplicates: ImportDuplicate[]
+  problems: ImportProblem[]
+}
+
+const INFO_LABELS: Readonly<Record<ImportedInfoKind, string>> = {
+  workAddress: CONTACT_IMPORT_INFO_TEXT.workAddress,
+  homeAddress: CONTACT_IMPORT_INFO_TEXT.homeAddress,
+  otherAddress: CONTACT_IMPORT_INFO_TEXT.otherAddress,
+  address: CONTACT_IMPORT_INFO_TEXT.address,
+  birthday: CONTACT_IMPORT_INFO_TEXT.birthday,
+  anniversary: CONTACT_IMPORT_INFO_TEXT.anniversary,
+  homepage: CONTACT_IMPORT_INFO_TEXT.homepage,
+  nickname: CONTACT_IMPORT_INFO_TEXT.nickname,
+  messenger: CONTACT_IMPORT_INFO_TEXT.messenger,
+  phone: CONTACT_IMPORT_INFO_TEXT.phone,
+}
+
+const TEXT_FIELDS = ['name', 'company', 'department', 'title'] as const
+
+/** 그룹 이름을 견줄 열쇠 — 서버와 같다(앞뒤 공백을 빼고 ASCII 대소문자 무시) */
+export function contactGroupKey(name: string): string {
+  return name.trim().replace(/[A-Z]/g, (char) => char.toLowerCase())
+}
+
+/** 줄 번호 글 — "4번째 줄" · vCard "12번째 연락처" */
+export function importPositionText(kind: ImportedFileKind, position: number): string {
+  const text = formatCount(position)
+  return kind === 'vcard' ? CONTACT_IMPORT_TEXT.card(text) : CONTACT_IMPORT_TEXT.line(text)
+}
+
+/** 겹침의 까닭 — "주소록에 있음" · "2번째 줄과 같음" */
+export function duplicateReasonText(kind: ImportedFileKind, duplicate: ImportDuplicate): string {
+  if (duplicate.samePosition === null) return CONTACT_IMPORT_TEXT.inBook
+  const text = formatCount(duplicate.samePosition)
+  return kind === 'vcard' ? CONTACT_IMPORT_TEXT.sameCard(text) : CONTACT_IMPORT_TEXT.sameLine(text)
+}
+
+/**
+ * 가져온 정보 줄 — 값은 한 줄 글로 다듬는다(cleanText — 탭 · \r · 제어 문자는 띄어쓰기). vCard 의 별명 · 형식이 틀린 전화 등에 남은 제어 문자가
+ * 메모에 들어가면 서버가 메모 규칙으로 그 묶음 전체를 400 으로 거절한다. 다듬어 빈 값은 뺀다
+ */
+function infoLinesOf(info: readonly ImportedInfo[], invalidPhones: readonly string[]): string[] {
+  const lines = new Set<string>()
+  const add = (label: string, value: string) => {
+    const text = cleanText(value)
+    if (text !== null) lines.add(CONTACT_IMPORT_INFO_TEXT.line(label, text))
+  }
+  for (const item of info) add(INFO_LABELS[item.kind], item.value)
+  for (const number of invalidPhones) add(INFO_LABELS.phone, number)
+  return [...lines]
+}
+
+interface Checked {
+  input: ContactInput
+  groups: string[]
+  info: string[]
+  /** 넣지 못하는 까닭 — 없으면 null */
+  problem: string | null
+}
+
+function uniqueGroups(names: readonly string[]): string[] {
+  const seen = new Set<string>()
+  const result: string[] = []
+  for (const raw of names) {
+    const name = cleanGroupName(raw, CONTACT_GROUP_NAME_MAX_LENGTH)
+    if (!name) continue
+    const key = contactGroupKey(name)
+    if (seen.has(key)) continue
+    seen.add(key)
+    result.push(name)
+  }
+  return result
+}
+
+/** 연락처 하나를 서버의 규칙으로 맞추고 본다 */
+function checkRecord(record: ImportedRecord): Checked {
+  const emails: ContactEmail[] = []
+  const seenEmails = new Set<string>()
+  let emailProblem = false
+  for (const email of record.emails) {
+    const address = email.address.trim()
+    if (address === '') continue
+    if (address.length > CONTACT_EMAIL_MAX_LENGTH || !isStrictEmail(address)) {
+      emailProblem = true
+      continue
+    }
+    const key = normalizeEmail(address)
+    if (seenEmails.has(key)) continue
+    seenEmails.add(key)
+    emails.push({ address, label: email.label })
+  }
+  const phones: ContactPhone[] = []
+  const invalidPhones: string[] = []
+  const seenPhones = new Set<string>()
+  for (const phone of record.phones) {
+    const number = formatKoreanPhone(phone.number.trim())
+    if (number === '' || seenPhones.has(number)) continue
+    seenPhones.add(number)
+    if (isValidContactPhone(number)) phones.push({ number, label: phone.label })
+    else invalidPhones.push(number)
+  }
+  const note = record.note === null ? null : contactNoteText(record.note).trim() || null
+  const input: ContactInput = {
+    name: cleanText(record.name),
+    emails: emails.slice(0, CONTACT_EMAILS_MAX),
+    phones: phones.slice(0, CONTACT_PHONES_MAX),
+    company: cleanText(record.company),
+    department: cleanText(record.department),
+    title: cleanText(record.title),
+    note,
+    groupIds: [],
+  }
+  let problem: string | null = null
+  if (emailProblem) problem = CONTACT_IMPORT_PROBLEM_TEXT.email
+  else if (input.name === null && input.emails.length === 0) problem = CONTACT_IMPORT_PROBLEM_TEXT.required
+  else {
+    const long = TEXT_FIELDS.find((field) => (input[field]?.length ?? 0) > CONTACT_TEXT_MAX_LENGTH)
+    if (long) problem = CONTACT_IMPORT_PROBLEM_TEXT.textTooLong(CONTACT_IMPORT_PROBLEM_TEXT.fields[long])
+    else if ((note?.length ?? 0) > CONTACT_NOTE_MAX_LENGTH) problem = CONTACT_IMPORT_PROBLEM_TEXT.note
+  }
+  return { input, groups: uniqueGroups(record.groups), info: infoLinesOf(record.info, invalidPhones), problem }
+}
+
+/** 넣지 못하는 줄에 적힌 것 — 이름 · 이메일 · 전화 · 회사 가운데 앞의 둘 */
+function problemWhat(record: ImportedRecord): string {
+  const phone = record.phones[0]?.number
+  const parts = [
+    cleanText(record.name),
+    cleanText(record.emails[0]?.address),
+    cleanText(phone === undefined ? null : formatKoreanPhone(phone.trim())),
+    cleanText(record.company),
+  ].filter((part): part is string => part !== null)
+  return parts.slice(0, 2).join(' · ')
+}
+
+/** 이름과 전화 숫자 모음을 잇는 글 — 이름 칸에 올 수 없는 제어 문자 (서버와 같다) */
+const NAME_PHONES_SEPARATOR = '\u0000'
+
+/**
+ * 전화번호들의 숫자 모음 — 번호마다 숫자만 남기고, 숫자가 없는 번호는 빼고, 겹침을 없앤 뒤 차례로 "," 로 잇는다.
+ * 짝: backend modules/contacts/contact-import.ts 의 phoneDigitsKey (계약 3절 "가져오기" — 한쪽을 고치면 둘 다)
+ */
+export function phoneDigitsKey(phones: readonly Pick<ContactPhone, 'number'>[]): string {
+  const digits = new Set<string>()
+  for (const phone of phones) {
+    const only = phone.number.replace(/\D+/g, '')
+    if (only !== '') digits.add(only)
+  }
+  return [...digits].sort().join(',')
+}
+
+/**
+ * 이메일이 없는 연락처를 견줄 열쇠 — 이름(앞뒤 공백만 뺀 글) + 전화 숫자 모음. 이름이 없으면 null (견주지 않는다).
+ * 짝: backend contact-import.ts 의 namePhonesKey
+ */
+export function namePhonesKey(input: Pick<ContactInput, 'name' | 'phones'>): string | null {
+  const name = input.name?.trim() ?? ''
+  return name === '' ? null : `${name}${NAME_PHONES_SEPARATOR}${phoneDigitsKey(input.phones)}`
+}
+
+/** 보이는 이름 — 이름이 없으면 첫 이메일 */
+function displayNameOf(input: ContactInput): string {
+  return input.name ?? input.emails[0]?.address ?? ''
+}
+
+/** 읽은 연락처를 나눈다 — 넣을 수 있는 것 · 파일 안 겹침 · 넣지 못하는 것 (uid 는 넣을 수 있는 것에만 만든다) */
+export function prepareImport(
+  kind: ImportedFileKind,
+  records: readonly ImportedRecord[],
+  createUid: () => string,
+): PreparedImport {
+  const candidates: ImportCandidate[] = []
+  const duplicates: ImportDuplicate[] = []
+  const problems: ImportProblem[] = []
+  const emailOwners = new Map<string, number>()
+  const namePhoneOwners = new Map<string, number>()
+  for (const record of records) {
+    const checked = checkRecord(record)
+    if (checked.problem !== null) {
+      problems.push({ position: record.position, what: problemWhat(record), reason: checked.problem })
+      continue
+    }
+    const { input } = checked
+    const emailKeys = input.emails.map((email) => normalizeEmail(email.address))
+    const nameKey = namePhonesKey(input)
+    const same =
+      emailKeys.length > 0
+        ? emailKeys.map((key) => emailOwners.get(key)).find((owner) => owner !== undefined)
+        : nameKey === null
+          ? undefined
+          : namePhoneOwners.get(nameKey)
+    if (same !== undefined) {
+      duplicates.push({
+        position: record.position,
+        name: displayNameOf(input),
+        detail: input.emails[0]?.address ?? input.phones[0]?.number ?? '',
+        samePosition: same,
+      })
+      continue
+    }
+    for (const key of emailKeys) emailOwners.set(key, record.position)
+    if (nameKey !== null && !namePhoneOwners.has(nameKey)) namePhoneOwners.set(nameKey, record.position)
+    candidates.push({ position: record.position, uid: createUid(), input, groups: checked.groups, info: checked.info })
+  }
+  return { kind, found: records.length, candidates, duplicates, problems }
+}
+
+/** 서버에 묻는 항목 — 그룹 없이 (확인은 그룹을 보지 않는다) */
+export function checkItemOf(candidate: ImportCandidate): ContactImportItem {
+  return { ...candidate.input, groupIds: [], uid: candidate.uid }
+}
+
+// ── 미리 보기 ──────────────────────────────────────────
+
+export interface ImportPreview {
+  kind: ImportedFileKind
+  found: number
+  /** 넣을 연락처 — 파일 차례, 남은 자리만큼(넘으면 앞에서부터) */
+  toInsert: ImportCandidate[]
+  /** 넣을 수 있지만 3,000개 한도로 넣지 않는 수 */
+  overLimit: number
+  /** 이미 있는 연락처 — 파일 안 겹침과 주소록에 있음, 줄 차례 */
+  duplicates: ImportDuplicate[]
+  problems: ImportProblem[]
+}
+
+/**
+ * 서버의 확인 결과로 미리 보기를 만든다. statuses 에 없는 연락처(남은 자리를 다 채워 묻지 않은 것)는 새 연락처로 본다.
+ * remaining 이 null 이면(묻지 않음) 한도를 보지 않는다
+ */
+export function previewOf(
+  prepared: PreparedImport,
+  statuses: ReadonlyMap<string, ContactImportCheckStatus>,
+  remaining: number | null,
+): ImportPreview {
+  const fresh: ImportCandidate[] = []
+  const inBook: ImportDuplicate[] = []
+  for (const candidate of prepared.candidates) {
+    if (statuses.get(candidate.uid) === 'exists') {
+      inBook.push({
+        position: candidate.position,
+        name: displayNameOf(candidate.input),
+        detail: candidate.input.emails[0]?.address ?? candidate.input.phones[0]?.number ?? '',
+        samePosition: null,
+      })
+    } else {
+      fresh.push(candidate)
+    }
+  }
+  const room = remaining === null ? fresh.length : Math.max(0, remaining)
+  const toInsert = fresh.slice(0, room)
+  return {
+    kind: prepared.kind,
+    found: prepared.found,
+    toInsert,
+    overLimit: fresh.length - toInsert.length,
+    duplicates: [...prepared.duplicates, ...inBook].sort((a, b) => a.position - b.position),
+    problems: prepared.problems,
+  }
+}
+
+/** 미리 보기 표의 줄 */
+export interface ImportPreviewRow {
+  key: string
+  name: string
+  email: string
+  phone: string
+  company: string
+  groups: string
+}
+
+export function previewRowsOf(preview: ImportPreview): ImportPreviewRow[] {
+  return preview.toInsert.slice(0, CONTACT_IMPORT_PREVIEW_ROWS).map((candidate) => ({
+    key: candidate.uid,
+    name: displayNameOf(candidate.input),
+    email: candidate.input.emails[0]?.address ?? '',
+    phone: candidate.input.phones[0]?.number ?? '',
+    company: candidate.input.company ?? '',
+    groups: candidate.groups.join(', '),
+  }))
+}
+
+// ── 그룹 ──────────────────────────────────────────────
+
+export interface FileGroupSummary {
+  /** 이미 있는 그룹 — 주소록의 이름으로 */
+  existing: string[]
+  /** 새로 만들 그룹 — 파일의 이름으로 */
+  created: string[]
+}
+
+/** 넣을 연락처에 적힌 그룹을 이미 있는 것 · 새로 만들 것으로 나눈다 (처음 나온 차례) */
+export function fileGroupsOf(toInsert: readonly ImportCandidate[], groups: readonly ContactGroup[]): FileGroupSummary {
+  const byKey = new Map(groups.map((group) => [contactGroupKey(group.name), group]))
+  const seen = new Set<string>()
+  const summary: FileGroupSummary = { existing: [], created: [] }
+  for (const candidate of toInsert) {
+    for (const name of candidate.groups) {
+      const key = contactGroupKey(name)
+      if (seen.has(key)) continue
+      seen.add(key)
+      const group = byKey.get(key)
+      if (group) summary.existing.push(group.name)
+      else summary.created.push(name)
+    }
+  }
+  return summary
+}
+
+/** 이름 늘어놓기 — 셋을 넘으면 "앞 셋 외 N개" */
+function namesText(names: readonly string[]): string {
+  const shown = names.slice(0, CONTACT_IMPORT_GROUP_NAMES_SHOWN).join(', ')
+  const rest = names.length - CONTACT_IMPORT_GROUP_NAMES_SHOWN
+  return rest > 0 ? CONTACT_IMPORT_TEXT.groupNamesMore(shown, formatCount(rest)) : shown
+}
+
+/** 미리 보기의 그룹 글 */
+export function fileGroupsText(summary: FileGroupSummary): string {
+  const total = summary.existing.length + summary.created.length
+  if (total === 0) return CONTACT_IMPORT_TEXT.groupsNone
+  if (summary.created.length === 0) return CONTACT_IMPORT_TEXT.groupsExisting(namesText(summary.existing))
+  if (summary.existing.length === 0) return CONTACT_IMPORT_TEXT.groupsCreated(namesText(summary.created))
+  return CONTACT_IMPORT_TEXT.groupsMixed(formatCount(total), namesText(summary.existing), namesText(summary.created))
+}
+
+// ── 메모 끝 "가져온 정보" ─────────────────────────────────
+
+/**
+ * 메모 + 가져온 정보 — 붙이면 1,000자를 넘으면 메모 그대로.
+ * 붙인 메모는 연락처 창과 같은 메모 정리(contactNoteText)를 한 번 더 지난다 — 서버가 받는 메모만 보낸다
+ */
+export function noteWithInfo(note: string | null, info: readonly string[]): string | null {
+  if (info.length === 0) return note
+  const block = [CONTACT_IMPORT_INFO_TEXT.heading, ...info].join('\n')
+  const combined = contactNoteText(note ? `${note}\n\n${block}` : block).trim()
+  return combined.length > CONTACT_NOTE_MAX_LENGTH ? note : combined
+}
+
+/** 미리 보기의 메모 견본 — 가져온 정보가 붙는 첫 연락처. 없으면 null */
+export interface ImportInfoSample {
+  name: string
+  /** 원래 메모의 줄 (흐리게) */
+  original: string[]
+  /** 붙는 줄 — 첫 줄이 "가져온 정보" */
+  added: string[]
+}
+
+export function infoSampleOf(toInsert: readonly ImportCandidate[]): ImportInfoSample | null {
+  const candidate = toInsert.find(
+    (item) => item.info.length > 0 && noteWithInfo(item.input.note, item.info) !== item.input.note,
+  )
+  if (!candidate) return null
+  return {
+    name: displayNameOf(candidate.input),
+    original: candidate.input.note ? candidate.input.note.split('\n') : [],
+    added: [CONTACT_IMPORT_INFO_TEXT.heading, ...candidate.info],
+  }
+}
+
+/** 가져온 정보가 있는 연락처가 있는가 — 없으면 메모 체크 칸을 두지 않는다 */
+export function hasImportedInfo(toInsert: readonly ImportCandidate[]): boolean {
+  return toInsert.some((candidate) => candidate.info.length > 0)
+}
+
+// ── 넣을 계획 ──────────────────────────────────────────
+
+/** 가져온 연락처를 모두 넣을 그룹 */
+export type ImportExtraGroup = { kind: 'none' } | { kind: 'existing'; id: string } | { kind: 'new'; name: string }
+
+export interface ContactImportPlanEntry {
+  /** groupIds 는 비어 있다 — 넣을 때 groupKeys 의 그룹 id 로 채운다 */
+  item: ContactImportItem
+  groupKeys: string[]
+}
+
+export interface ContactImportPlanGroup {
+  key: string
+  name: string
+  /** 이미 있는 그룹이면 그 id, 새로 만들 그룹이면 null */
+  id: string | null
+}
+
+/** [연락처 N명 넣기]가 넘기는 계획 — 넣는 동안(다른 화면으로 가도) 이것만 본다 */
+export interface ContactImportPlan {
+  entries: ContactImportPlanEntry[]
+  groups: ContactImportPlanGroup[]
+  /** 이미 있던 수 (주소록 + 파일 안 겹침) */
+  skipped: number
+  /** 3,000개 한도로 넣지 않는 수 */
+  overLimit: number
+}
+
+/** 새 그룹 이름을 다듬는다 — 빈 이름이면 null (창이 "그룹 이름을 넣어 주세요.") */
+export function extraGroupName(name: string): string | null {
+  return cleanGroupName(name, CONTACT_GROUP_NAME_MAX_LENGTH)
+}
+
+export function importPlanOf(
+  preview: ImportPreview,
+  groups: readonly ContactGroup[],
+  extra: ImportExtraGroup,
+  appendInfo: boolean,
+): ContactImportPlan {
+  const byKey = new Map(groups.map((group) => [contactGroupKey(group.name), group]))
+  const planGroups = new Map<string, ContactImportPlanGroup>()
+  const remember = (name: string, id: string | null = null): string => {
+    const key = contactGroupKey(name)
+    if (!planGroups.has(key)) {
+      const existing = byKey.get(key)
+      planGroups.set(key, { key, name: existing?.name ?? name, id: id ?? existing?.id ?? null })
+    }
+    return key
+  }
+  let extraKey: string | null = null
+  if (extra.kind === 'existing') {
+    const group = groups.find((item) => item.id === extra.id)
+    if (group) extraKey = remember(group.name, group.id)
+  } else if (extra.kind === 'new') {
+    const name = extraGroupName(extra.name)
+    if (name) extraKey = remember(name)
+  }
+  const entries = preview.toInsert.map((candidate) => {
+    const keys = candidate.groups.map((name) => remember(name))
+    if (extraKey !== null && !keys.includes(extraKey)) keys.push(extraKey)
+    const note = appendInfo ? noteWithInfo(candidate.input.note, candidate.info) : candidate.input.note
+    return { item: { ...candidate.input, note, groupIds: [], uid: candidate.uid }, groupKeys: keys }
+  })
+  return {
+    entries,
+    groups: [...planGroups.values()],
+    skipped: preview.duplicates.length,
+    overLimit: preview.overLimit,
+  }
+}
diff --git a/frontend/src/shared/utils/contact-import/table.spec.ts b/frontend/src/shared/utils/contact-import/table.spec.ts
new file mode 100644
index 0000000..a736bb1
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/table.spec.ts
@@ -0,0 +1,290 @@
+import { describe, expect, it } from 'vitest'
+
+import { parseCsv } from './csv'
+import { detectTableLayout, normalizeHeader, tableRecords } from './table'
+import type { TableRow } from './types'
+
+// 표(CSV · 엑셀)의 머리 줄로 꼴을 알아보고 칸을 맞춘다 (16단계 — 디자인 원본 Contacts16 "6 칸 맞추기")
+// 표본은 지어낸 사람 · 주소다. 네이버 머리는 decisions 0절의 63열 차례(실제 머리 글의 띄어쓰기 · 괄호는 다를 수 있어 낱말로 견준다)
+
+const NAVER_HEADERS = [
+  '성', '이름', '경칭', '중간이름', '호칭', '닉네임', '휴대폰번호', '이메일', '그룹명', '회사번호', '집번호',
+  '회사Fax번호', '집Fax번호', '기타번호', '전화번호직접입력(전화종류)', '전화번호직접입력(번호)', '생일(YYYYMMDD)',
+  '생일(양력음력)', '기념일(이름)', '기념일(날짜)', '회사·소속명', '부서명', '직책', '회사우편번호', '회사주소',
+  '집우편번호', '집주소', '기타우편번호', '기타주소', '주소직접입력(이름)', '주소직접입력(우편번호)', '주소직접입력(정보)',
+  '홈페이지', '메신저타입', '메신저주소', '메모',
+  ...[1, 2, 3].map((n) => `추가휴대폰번호${n}`),
+  ...[1, 2, 3].map((n) => `추가회사번호${n}`),
+  ...[1, 2, 3].map((n) => `추가집번호${n}`),
+  ...[1, 2, 3].map((n) => `추가회사Fax번호${n}`),
+  ...[1, 2, 3].map((n) => `추가집Fax번호${n}`),
+  ...[1, 2, 3].map((n) => `추가기타번호${n}`),
+  ...[1, 2, 3].map((n) => `추가이메일${n}`),
+  ...[1, 2, 3].map((n) => `추가홈페이지${n}`),
+  ...[1, 2, 3].map((n) => `추가그룹명${n}`),
+]
+
+/** 네이버 CSV 한 줄 — 모든 값 앞에 ' (빈 칸도) */
+function naverRow(values: Partial<Record<string, string>>): string[] {
+  return NAVER_HEADERS.map((header) => `'${values[header] ?? ''}`)
+}
+
+function rowsOf(table: readonly (readonly string[])[]): TableRow[] {
+  return table.map((cells, index) => ({ position: index + 1, cells: [...cells] }))
+}
+
+describe('머리 이름 · 꼴', () => {
+  it('공백 · 기호를 빼고 소문자로 견준다', () => {
+    expect(normalizeHeader('E-mail 1 - Value')).toBe('email1value')
+    expect(normalizeHeader("'회사·소속명")).toBe('회사소속명')
+    expect(normalizeHeader('\uFEFFBusiness Country/Region')).toBe('businesscountryregion')
+  })
+
+  it('네이버 · Google · Outlook · 우리 내보내기를 머리 줄로 알아본다', () => {
+    expect(detectTableLayout(NAVER_HEADERS.map(normalizeHeader))).toBe('naver')
+    expect(detectTableLayout(['firstname', 'lastname', 'email1label', 'email1value'])).toBe('google')
+    expect(detectTableLayout(['name', 'givenname', 'groupmembership'])).toBe('google')
+    expect(detectTableLayout(['firstname', 'lastname', 'emailaddress', 'businessphone', 'jobtitle'])).toBe('outlook')
+    expect(
+      detectTableLayout(['이름', '이메일', '휴대폰', '회사전화', '집전화', '기타전화', '회사', '부서', '직함', '메모', '그룹']),
+    ).toBe('ours')
+    expect(detectTableLayout(['성명', '휴대전화'])).toBe('other')
+  })
+})
+
+describe('네이버 63열', () => {
+  it('성 + 이름을 붙이고, 값 앞의 작은따옴표를 떼고, 칸 없는 정보는 info 로', () => {
+    const table = [
+      NAVER_HEADERS,
+      naverRow({
+        성: '강',
+        이름: '민지',
+        닉네임: '민지',
+        휴대폰번호: '01041203387',
+        이메일: 'minji.kang@example.com',
+        그룹명: '거래처',
+        회사번호: '025550147',
+        회사Fax번호: '025550148',
+        '전화번호직접입력(전화종류)': '사무실2',
+        '전화번호직접입력(번호)': '01099998888',
+        '생일(YYYYMMDD)': '19880314',
+        '생일(양력음력)': '음력',
+        '기념일(이름)': '입사일',
+        '기념일(날짜)': '20150302',
+        '회사·소속명': '한빛상사',
+        부서명: '구매팀',
+        직책: '과장',
+        회사우편번호: '04524',
+        회사주소: '서울 중구 세종대로 110',
+        '주소직접입력(이름)': '본가',
+        '주소직접입력(정보)': '부산 해운대구',
+        홈페이지: 'www.example.com',
+        메신저타입: '카카오톡',
+        메신저주소: 'minji88',
+        메모: '견적 문의는 월말 전에 보내기.',
+        추가휴대폰번호1: '01055556666',
+        추가이메일1: 'minji@home.example',
+        추가그룹명1: '동호회',
+      }),
+      naverRow({}),
+    ]
+    const result = tableRecords(rowsOf(table))
+    expect(result.layout).toBe('naver')
+    expect(result.recognized).toBe(true)
+    expect(result.records).toHaveLength(1)
+    const [record] = result.records
+    expect(record).toMatchObject({
+      position: 2,
+      name: '강민지',
+      company: '한빛상사',
+      department: '구매팀',
+      title: '과장',
+      note: '견적 문의는 월말 전에 보내기.',
+      groups: ['거래처', '동호회'],
+    })
+    expect(record?.emails).toEqual([
+      { address: 'minji.kang@example.com', label: 'work' },
+      { address: 'minji@home.example', label: 'work' },
+    ])
+    // 하이픈은 칸 맞추기(records.ts)가 넣는다 — 여기서는 종류만
+    expect(record?.phones).toEqual([
+      { number: '01041203387', label: 'mobile' },
+      { number: '025550147', label: 'work' },
+      { number: '025550148', label: 'other' },
+      { number: '01099998888', label: 'other' },
+      { number: '01055556666', label: 'mobile' },
+    ])
+    expect(record?.info).toEqual([
+      { kind: 'nickname', value: '민지' },
+      { kind: 'homepage', value: 'www.example.com' },
+      { kind: 'workAddress', value: '서울 중구 세종대로 110 (04524)' },
+      { kind: 'address', value: '본가 부산 해운대구' },
+      { kind: 'birthday', value: '1988년 3월 14일 (음력)' },
+      { kind: 'anniversary', value: '입사일 2015년 3월 2일' },
+      { kind: 'messenger', value: '카카오톡 minji88' },
+    ])
+  })
+
+  it('머리 글의 띄어쓰기 · 괄호가 달라도 낱말로 알아본다 (회사 주소 · 생일 · 전화종류)', () => {
+    const table = [
+      ['성', '이름', '휴대폰 번호', '회사·소속명', '그룹명', '회사 주소', '생일', '전화종류', '전화번호'],
+      ['박', '지훈', '010-3192-5540', '한빛상사', '거래처', '서울 중구', '1990-01-02', '집', '02-111-2222'],
+    ]
+    const [record] = tableRecords(rowsOf(table)).records
+    expect(record).toMatchObject({ name: '박지훈', company: '한빛상사', groups: ['거래처'] })
+    expect(record?.phones).toEqual([
+      { number: '010-3192-5540', label: 'mobile' },
+      { number: '02-111-2222', label: 'other' },
+    ])
+    expect(record?.info).toEqual([
+      { kind: 'workAddress', value: '서울 중구' },
+      { kind: 'birthday', value: '1990년 1월 2일' },
+    ])
+  })
+})
+
+describe('Google CSV', () => {
+  it('새 머리 — 짝 칸(E-mail 1 - Label/Value), " ::: " 여러 값, 시스템 라벨 빼기', () => {
+    const csv = [
+      'First Name,Middle Name,Last Name,Nickname,Organization Name,Organization Title,Organization Department,Birthday,Notes,Labels,' +
+        'E-mail 1 - Label,E-mail 1 - Value,E-mail 2 - Label,E-mail 2 - Value,Phone 1 - Label,Phone 1 - Value,Phone 2 - Label,Phone 2 - Value,' +
+        'Address 1 - Label,Address 1 - Formatted,Website 1 - Label,Website 1 - Value,Event 1 - Label,Event 1 - Value,IM 1 - Label,IM 1 - Service,IM 1 - Value',
+      'John,,Smith,Johnny,Acme,Engineer,R&D,1985-07-04,"Met at expo",* myContacts ::: 거래처 ::: * starred,' +
+        '* Work,john@acme.example,Home,john@home.example ::: js@home.example,Mobile,+1 555-0100,Work Fax,+1 555-0199,' +
+        'Work,"1 Main St\nSpringfield",Profile,https://acme.example/john,Anniversary,2010-06-01,,Skype,john.smith',
+    ].join('\n')
+    const result = tableRecords(rowsOf(parseCsv(csv)))
+    expect(result.layout).toBe('google')
+    const [record] = result.records
+    expect(record).toMatchObject({
+      name: 'John Smith',
+      company: 'Acme',
+      title: 'Engineer',
+      department: 'R&D',
+      note: 'Met at expo',
+      groups: ['* myContacts', '거래처', '* starred'],
+    })
+    expect(record?.emails).toEqual([
+      { address: 'john@acme.example', label: 'work' },
+      { address: 'john@home.example', label: 'personal' },
+      { address: 'js@home.example', label: 'personal' },
+    ])
+    expect(record?.phones).toEqual([
+      { number: '+1 555-0100', label: 'mobile' },
+      { number: '+1 555-0199', label: 'other' },
+    ])
+    expect(record?.info).toEqual(
+      expect.arrayContaining([
+        { kind: 'nickname', value: 'Johnny' },
+        { kind: 'workAddress', value: '1 Main St Springfield' },
+        { kind: 'homepage', value: 'https://acme.example/john' },
+        { kind: 'anniversary', value: '2010년 6월 1일' },
+        { kind: 'messenger', value: 'Skype john.smith' },
+        { kind: 'birthday', value: '1985년 7월 4일' },
+      ]),
+    )
+  })
+
+  it('옛 머리 — Name 이 이름 전체, Group Membership, Organization 1 - Name', () => {
+    const csv = [
+      'Name,Given Name,Additional Name,Family Name,Yomi Name,Group Membership,E-mail 1 - Type,E-mail 1 - Value,Phone 1 - Type,Phone 1 - Value,Organization 1 - Name,Organization 1 - Title',
+      '강서윤,서윤,,강,,* myContacts ::: 거래처,* ,seoyun@hanbit.example,,01024813307,한빛상사,과장',
+    ].join('\r\n')
+    const [record] = tableRecords(rowsOf(parseCsv(csv))).records
+    expect(record).toMatchObject({ name: '강서윤', company: '한빛상사', title: '과장', groups: ['* myContacts', '거래처'] })
+    expect(record?.emails).toEqual([{ address: 'seoyun@hanbit.example', label: 'work' }])
+    // 종류를 모르는 번호는 번호로 짐작한다 — 국내 휴대전화
+    expect(record?.phones).toEqual([{ number: '01024813307', label: 'mobile' }])
+  })
+})
+
+describe('Outlook CSV (영어)', () => {
+  it('Title 은 경칭이라 쓰지 않고 Job Title 이 직책, 회사 주소 조각을 잇는다', () => {
+    const csv = [
+      'Title,First Name,Middle Name,Last Name,Suffix,Company,Department,Job Title,Business Street,Business City,Business State,' +
+        'Business Postal Code,Business Country/Region,Business Phone,Business Fax,Home Phone,Mobile Phone,Other Phone,E-mail Address,' +
+        'E-mail Type,E-mail Display Name,E-mail 2 Address,Birthday,Notes,Categories,Web Page',
+      'Mr.,Ryu,,Jihwan,,Bareun Accounting,Tax,Partner,12 Teheran-ro,Gangnam-gu,Seoul,06236,,02-555-0100,02-555-0101,,010-7714-2093,,' +
+        'jihwan@bareun.example,SMTP,Ryu Jihwan (jihwan@bareun.example),ryu@mail.example,0/0/00,,세무;거래처,www.bareun.example',
+    ].join('\r\n')
+    const result = tableRecords(rowsOf(parseCsv(csv)))
+    expect(result.layout).toBe('outlook')
+    const [record] = result.records
+    expect(record).toMatchObject({
+      name: 'Ryu Jihwan',
+      company: 'Bareun Accounting',
+      department: 'Tax',
+      title: 'Partner',
+      groups: ['세무', '거래처'],
+    })
+    expect(record?.emails).toEqual([
+      { address: 'jihwan@bareun.example', label: 'work' },
+      { address: 'ryu@mail.example', label: 'work' },
+    ])
+    expect(record?.phones).toEqual([
+      { number: '02-555-0100', label: 'work' },
+      { number: '02-555-0101', label: 'other' },
+      { number: '010-7714-2093', label: 'mobile' },
+    ])
+    expect(record?.info).toEqual([
+      { kind: 'homepage', value: 'www.bareun.example' },
+      { kind: 'workAddress', value: '12 Teheran-ro, Gangnam-gu, Seoul (06236)' },
+    ])
+  })
+})
+
+describe('우리가 내보낸 CSV · 모르는 꼴', () => {
+  it('우리 머리 — 한 칸에 "; " 로 이은 값을 나누고, 수식 막기로 붙인 작은따옴표만 뗀다', () => {
+    const csv = [
+      '이름,이메일,휴대폰,회사 전화,집 전화,기타 전화,회사,부서,직함,메모,그룹',
+      "강민지,minji.kang@example.com; minji@home.example,010-4120-3387,02-555-0147,,'+82 2 555 0000,한빛상사,구매팀,과장,'=SUM(1),거래처; 동호회",
+    ].join('\r\n')
+    const result = tableRecords(rowsOf(parseCsv(csv)))
+    expect(result.layout).toBe('ours')
+    const [record] = result.records
+    expect(record).toMatchObject({ name: '강민지', title: '과장', note: '=SUM(1)', groups: ['거래처', '동호회'] })
+    expect(record?.emails).toEqual([
+      { address: 'minji.kang@example.com', label: 'work' },
+      { address: 'minji@home.example', label: 'work' },
+    ])
+    expect(record?.phones).toEqual([
+      { number: '010-4120-3387', label: 'mobile' },
+      { number: '02-555-0147', label: 'work' },
+      { number: '+82 2 555 0000', label: 'other' },
+    ])
+  })
+
+  it('모르는 꼴은 열 이름 낱말로 짐작한다 (성명 · 휴대전화 · 직위 · 비고 · 소속)', () => {
+    const table = [
+      ['번호', '성명', '휴대전화', 'E-mail', '소속', '직위', '비고'],
+      ['1', '최유진', '010-2222-3333', 'yujin@example.net', '그린클라우드', '대리', '세미나'],
+    ]
+    const result = tableRecords(rowsOf(table))
+    expect(result.layout).toBe('other')
+    expect(result.records[0]).toMatchObject({
+      name: '최유진',
+      company: '그린클라우드',
+      title: '대리',
+      note: '세미나',
+      emails: [{ address: 'yujin@example.net', label: 'work' }],
+    })
+    // "번호" 열(일련번호)은 전화로 보지 않는다
+    expect(result.records[0]?.phones).toEqual([{ number: '010-2222-3333', label: 'mobile' }])
+  })
+
+  it('이름 · 이메일 열이 하나도 없으면 알아보지 못한 것이다', () => {
+    const result = tableRecords(rowsOf([['날짜', '금액'], ['2026-11-10', '3000']]))
+    expect(result.recognized).toBe(false)
+    expect(result.records).toEqual([])
+  })
+
+  it('줄 번호는 엑셀의 행 번호다 — 머리 위 빈 줄 · 사이의 빈 줄도 센다', () => {
+    const result = tableRecords(rowsOf([[''], ['이름', '이메일'], ['김', 'a@x.kr'], ['', ''], ['이', 'b@x.kr']]))
+    expect(result.records.map((record) => record.position)).toEqual([3, 5])
+  })
+
+  it('네이버가 아니어도 값 대부분이 앞에 작은따옴표를 달았으면 모두 뗀다', () => {
+    const result = tableRecords(rowsOf([['이름', '전화번호'], ["'김아라", "'01012345678"]]))
+    expect(result.records[0]).toMatchObject({ name: '김아라', phones: [{ number: '01012345678', label: 'mobile' }] })
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/table.ts b/frontend/src/shared/utils/contact-import/table.ts
new file mode 100644
index 0000000..e497a63
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/table.ts
@@ -0,0 +1,406 @@
+// 표(CSV · 엑셀)의 줄 → 연락처 — 머리 줄로 꼴을 알아보고 칸마다 주소록 칸을 정한다 (16단계 가져오기 · 디자인 원본 Contacts16 "6")
+// 아는 꼴: 네이버 주소록(한국어 63열 — 성 · 이름 · 휴대폰번호 …) · Google(새 머리 "First Name … E-mail 1 - Label/Value" · 옛 머리 "Name, Given Name …") ·
+//         Outlook(영어 — "First Name … E-mail Address … Business Phone") · 우리가 내보낸 CSV(이름 · 이메일 · 휴대폰 · 회사 전화 …).
+// 모르는 꼴은 열 이름의 낱말(이메일 · 전화 · 회사 · 부서 · 메모 · 그룹 …)로 짐작한다. 이름이나 이메일 열이 하나도 없으면 연락처를 찾지 못한 것이다.
+// - 머리 이름은 공백 · 기호를 빼고 소문자로 견준다("E-mail 1 - Value" → email1value, "회사·소속명" → 회사소속명)
+// - 네이버 CSV 는 값마다 앞에 ' 가 붙는다(빈 칸도) — 떼고 읽는다. 다른 꼴은 엑셀 수식 막기로 붙인 ' (뒤가 = + - @) 만 뗀다
+// - 이메일 · 전화는 종류대로(팩스 · 직접 입력한 번호는 기타, 종류를 모르는 "전화번호" 칸은 번호로 짐작 — 국내 휴대전화면 휴대전화),
+//   종류를 모르는 이메일 칸은 회사(연락처 추가 창의 처음 값과 같다)
+// - 칸이 없는 정보(주소 · 생일 양력/음력 · 기념일 · 홈페이지 · 별명 · 메신저)는 info 로 — 메모 끝 "가져온 정보"가 된다
+
+import type { ContactEmailLabel, ContactPhoneLabel } from '@/shared/types/contacts'
+import { emptyImportedRecord, type ImportedInfoKind, type ImportedRecord, type TableRow } from './types'
+import {
+  cleanText,
+  composeName,
+  emptyAddressParts,
+  formatAddress,
+  formatImportedDate,
+  guessPhoneLabel,
+  isLunarMarker,
+  normalizePhone,
+  phoneLabelOfText,
+  splitEmails,
+  splitMultiValue,
+  type AddressParts,
+} from './values'
+
+export type TableLayout = 'naver' | 'google' | 'outlook' | 'ours' | 'other'
+
+type AddressSlot = 'work' | 'home' | 'other' | 'direct' | 'main'
+type AddressPart = keyof AddressParts | 'label'
+/** Google 의 짝 칸 — "E-mail 1 - Label" + "E-mail 1 - Value" */
+type PairedFamily = 'email' | 'phone' | 'address' | 'website' | 'event' | 'im' | 'organization'
+
+type ColumnRole =
+  | { kind: 'name' | 'family' | 'given' | 'middle' }
+  | { kind: 'email'; label: ContactEmailLabel }
+  /** auto — 종류를 모르는 칸: 번호로 짐작한다 */
+  | { kind: 'phone'; label: ContactPhoneLabel | 'auto' }
+  | { kind: 'company' | 'department' | 'title' | 'note' | 'groups' }
+  | { kind: 'nickname' | 'homepage' | 'birthday' | 'birthdayCalendar' }
+  | { kind: 'anniversary'; part: 'name' | 'date' }
+  | { kind: 'messenger'; part: 'service' | 'address' }
+  | { kind: 'address'; slot: AddressSlot; part: AddressPart }
+  | { kind: 'paired'; family: PairedFamily; index: string; part: string }
+  | { kind: 'ignore' }
+
+const IGNORE: ColumnRole = { kind: 'ignore' }
+
+/** 머리 이름 → 견줄 글: 앞의 BOM · ' 를 떼고, 공백 · 기호를 빼고 소문자로 */
+export function normalizeHeader(value: string): string {
+  return value
+    .replace(/^\uFEFF/, '')
+    .replace(/^'+/, '')
+    .trim()
+    .toLowerCase()
+    .replace(/[\s·・.\-_/()[\]{}:,'"’&]/g, '')
+}
+
+/** Google 의 짝 칸 — 무리 · 번호 · 조각 */
+const PAIRED_COLUMN =
+  /^(e?mail|phone|address|website|event|im|organization|relation|customfield)(\d+)(type|label|value|formatted|street|city|pobox|region|postalcode|country|extendedaddress|service|name|title|department|yominame|symbol|location|jobdescription)$/
+const FAMILY_COLUMN = /^(성|성씨|lastname|familyname|surname)$/
+/** 전화 열의 낱말 — "번호"만으로는 보지 않는다(일련번호 열이 흔하다) */
+const PHONE_WORDS = /(phone|tel|mobile|cell|fax|pager|전화|휴대|핸드폰|팩스)/
+/** 네이버의 "회사번호 · 집번호 · 기타번호 · 추가회사번호1" */
+const NAVER_PHONE = /^(추가)?(회사|집|기타|직장|자택)(fax)?번호\d*$/
+const NAVER_SIGNATURE = ['성', '이름', '휴대폰번호', '회사소속명', '부서명', '그룹명', '추가이메일1', '회사번호', '집번호']
+const OURS_SIGNATURE = ['이름', '이메일', '휴대폰', '회사전화', '집전화', '기타전화', '회사', '부서', '직함', '메모', '그룹']
+/** 네이버로 보는 머리 수 · 우리 꼴로 보는 머리 수 */
+const NAVER_MIN_HITS = 4
+const OURS_MIN_HITS = 6
+
+/** 머리 줄로 꼴을 알아본다 */
+export function detectTableLayout(headers: readonly string[]): TableLayout {
+  const set = new Set(headers)
+  if (set.has('email1value') || set.has('phone1value') || set.has('groupmembership')) return 'google'
+  if (set.has('emailaddress') && (set.has('jobtitle') || set.has('businessphone') || set.has('mobilephone'))) {
+    return 'outlook'
+  }
+  if (NAVER_SIGNATURE.filter((header) => set.has(header)).length >= NAVER_MIN_HITS) return 'naver'
+  if (OURS_SIGNATURE.filter((header) => set.has(header)).length >= OURS_MIN_HITS) return 'ours'
+  return 'other'
+}
+
+function emailLabelOfHeader(header: string): ContactEmailLabel {
+  if (/(회사|직장|업무|work|business|office)/.test(header)) return 'work'
+  if (/(개인|집|home|personal|private)/.test(header)) return 'personal'
+  if (/(기타|other)/.test(header)) return 'other'
+  return 'work'
+}
+
+function phoneLabelOfHeader(header: string): ContactPhoneLabel | 'auto' {
+  if (/(직접|fax|팩스|pager|호출)/.test(header)) return 'other'
+  if (/(mobile|cell|휴대|핸드폰|모바일)/.test(header)) return 'mobile'
+  if (/(회사|직장|업무|work|business|company|office)/.test(header)) return 'work'
+  if (/(집|자택|home)/.test(header)) return 'home'
+  if (/(기타|other|car|radio|telex|tty|isdn|primary|callback|assistant|대표)/.test(header)) return 'other'
+  return 'auto'
+}
+
+function addressRole(header: string): ColumnRole {
+  const slot: AddressSlot = /직접/.test(header)
+    ? 'direct'
+    : /(회사|직장|business|work|office)/.test(header)
+      ? 'work'
+      : /(집|자택|home)/.test(header)
+        ? 'home'
+        : /(기타|other)/.test(header)
+          ? 'other'
+          : 'main'
+  let part: AddressPart = 'full'
+  if (/(우편|postal|zip|postcode)/.test(header)) part = 'postal'
+  else if (/(이름|label|종류)$/.test(header)) part = 'label'
+  else if (/street/.test(header)) part = 'street'
+  else if (/city/.test(header)) part = 'city'
+  else if (/country/.test(header)) part = 'country'
+  else if (/(state|region)/.test(header)) part = 'region'
+  else if (/pobox/.test(header)) part = 'pobox'
+  return { kind: 'address', slot, part }
+}
+
+/** 머리 하나의 쓰임 — 차례가 중요하다(회사번호는 전화, 회사주소는 주소, 회사소속명은 회사) */
+function classifyHeader(header: string, layout: TableLayout, hasFamily: boolean): ColumnRole {
+  if (header === '' || /(yomi|phonetic|발음|읽기)/.test(header)) return IGNORE
+  const paired = PAIRED_COLUMN.exec(header)
+  if (paired) {
+    const family = (paired[1] === 'mail' ? 'email' : paired[1]) as PairedFamily | 'relation' | 'customfield'
+    if (family === 'relation' || family === 'customfield') return IGNORE
+    return { kind: 'paired', family, index: paired[2] ?? '', part: paired[3] ?? '' }
+  }
+  if (FAMILY_COLUMN.test(header)) return { kind: 'family' }
+  if (/^(firstname|givenname)$/.test(header) || (header === '이름' && hasFamily)) return { kind: 'given' }
+  if (/^(middlename|additionalname|중간이름)$/.test(header)) return { kind: 'middle' }
+  if (/^(name|fullname|displayname|이름|성명|성함|표시이름|연락처이름|contactname)$/.test(header)) return { kind: 'name' }
+  if (/^(nickname|닉네임|별명|애칭)$/.test(header)) return { kind: 'nickname' }
+  // Outlook 의 Title 은 Mr. · Ms. 같은 경칭이다 (직책은 Job Title)
+  if (header === 'title' && layout === 'outlook') return IGNORE
+  if (/^(nameprefix|namesuffix|prefix|suffix|경칭|호칭|fileas|shortname|initials|maidenname)$/.test(header)) return IGNORE
+  if (/(e?mail|메일)/.test(header)) {
+    return /(type|label|displayname|표시|종류)/.test(header) ? IGNORE : { kind: 'email', label: emailLabelOfHeader(header) }
+  }
+  if (/(메신저|messenger|imaddress|impp)/.test(header) || header === 'im') {
+    return { kind: 'messenger', part: /(타입|type|종류|service|서비스)/.test(header) ? 'service' : 'address' }
+  }
+  if (/(우편|postal|zip|postcode|주소|address|street|city|state|region|country|국가|pobox)/.test(header)) return addressRole(header)
+  if (PHONE_WORDS.test(header) || NAVER_PHONE.test(header) || header === '연락처') {
+    return /(종류|type|label)$/.test(header) ? IGNORE : { kind: 'phone', label: phoneLabelOfHeader(header) }
+  }
+  if (/^(company|companyname|organization|organizationname|회사|회사명|회사소속명|소속|소속명|직장|직장명|회사이름)$/.test(header)) {
+    return { kind: 'company' }
+  }
+  if (/(department|부서)/.test(header)) return { kind: 'department' }
+  if (/^(jobtitle|organizationtitle|title|직책|직함|직위|직급|position)$/.test(header)) return { kind: 'title' }
+  if (/^(notes?|메모|비고|memo|comments?|설명)$/.test(header)) return { kind: 'note' }
+  if (/^(labels|groupmembership|categories|category|그룹|그룹명|추가그룹명\d*|groups?|분류|카테고리|라벨)$/.test(header)) {
+    return { kind: 'groups' }
+  }
+  if (/(생일|생년월일|birthday|birthdate)/.test(header)) {
+    return { kind: /(양력|음력|lunar|solar)/.test(header) ? 'birthdayCalendar' : 'birthday' }
+  }
+  if (/(기념일|anniversary)/.test(header)) return { kind: 'anniversary', part: /(이름|name|종류|label)/.test(header) ? 'name' : 'date' }
+  if (/(홈페이지|homepage|website|webpage|웹사이트|블로그|blog)/.test(header) || /^url\d*$/.test(header)) {
+    return { kind: 'homepage' }
+  }
+  return IGNORE
+}
+
+/** 이름 · 이메일을 읽을 수 있는 열이 있는가 — 없으면 "연락처를 찾지 못했습니다" */
+function hasContactColumns(roles: readonly ColumnRole[]): boolean {
+  return roles.some(
+    (role) =>
+      role.kind === 'name' ||
+      role.kind === 'family' ||
+      role.kind === 'given' ||
+      role.kind === 'email' ||
+      (role.kind === 'paired' && role.family === 'email'),
+  )
+}
+
+// ── 값 ────────────────────────────────────────────────
+
+/** 엑셀 수식 막기로 붙인 ' — 뒤가 = + - @ 일 때만 */
+const FORMULA_GUARD = /^'[=+\-@]/
+/** 값 앞의 ' 를 모두 떼는 꼴로 볼 비율 — 값이 있는 칸의 절반 넘게 ' 로 시작한다(네이버) */
+const QUOTED_MAJORITY = 0.5
+const QUOTE_SAMPLE_ROWS = 50
+
+function quotesEveryValue(rows: readonly TableRow[], layout: TableLayout): boolean {
+  if (layout === 'naver') return true
+  let filled = 0
+  let quoted = 0
+  for (const row of rows.slice(0, QUOTE_SAMPLE_ROWS)) {
+    for (const cell of row.cells) {
+      if (cell === '') continue
+      filled += 1
+      if (cell.startsWith("'")) quoted += 1
+    }
+  }
+  return filled > 0 && quoted / filled > QUOTED_MAJORITY
+}
+
+function cellValue(raw: string, stripQuotes: boolean): string {
+  if (stripQuotes && raw.startsWith("'")) return raw.slice(1)
+  return FORMULA_GUARD.test(raw) ? raw.slice(1) : raw
+}
+
+/** Google 라벨 "* Work" → "work" (별표는 대표 표시) */
+function pairedLabel(value: string | undefined): string {
+  return (value ?? '').replace(/^\*\s*/, '').trim().toLowerCase()
+}
+
+function emailLabelOfText(label: string): ContactEmailLabel {
+  if (/(work|회사|직장)/.test(label)) return 'work'
+  if (/(home|personal|개인|집)/.test(label)) return 'personal'
+  if (label !== '') return 'other'
+  return 'work'
+}
+
+function addressKindOf(slot: AddressSlot): ImportedInfoKind {
+  if (slot === 'work') return 'workAddress'
+  if (slot === 'home') return 'homeAddress'
+  if (slot === 'other') return 'otherAddress'
+  return 'address'
+}
+
+/** 한 줄 → 연락처 (빈 줄이면 null) */
+function recordOfRow(row: TableRow, roles: readonly ColumnRole[], stripQuotes: boolean): ImportedRecord | null {
+  const cells = row.cells.map((cell) => cellValue(cell, stripQuotes))
+  if (cells.every((cell) => cell.trim() === '')) return null
+  const record = emptyImportedRecord(row.position)
+  const names = { name: null as string | null, family: null as string | null, given: null as string | null, middle: null as string | null }
+  const addresses = new Map<string, AddressParts & { label: string | null }>()
+  const paired = new Map<string, { family: PairedFamily; parts: Map<string, string> }>()
+  let birthday: string | null = null
+  let lunar = false
+  let anniversaryName: string | null = null
+  let anniversaryDate: string | null = null
+  let messengerService: string | null = null
+  const messengerAddresses: string[] = []
+  const notes: string[] = []
+
+  const addPhone = (value: string, label: ContactPhoneLabel | 'auto') => {
+    for (const part of splitMultiValue(value)) {
+      const number = normalizePhone(part)
+      if (number) record.phones.push({ number, label: label === 'auto' ? guessPhoneLabel(number) : label })
+    }
+  }
+
+  roles.forEach((role, index) => {
+    const value = cells[index] ?? ''
+    if (value.trim() === '') return
+    switch (role.kind) {
+      case 'name':
+      case 'family':
+      case 'given':
+      case 'middle':
+        names[role.kind] ??= value
+        break
+      case 'email':
+        for (const address of splitEmails(value)) record.emails.push({ address, label: role.label })
+        break
+      case 'phone':
+        addPhone(value, role.label)
+        break
+      case 'company':
+      case 'department':
+      case 'title':
+        record[role.kind] ??= cleanText(value)
+        break
+      case 'note':
+        notes.push(value.trim())
+        break
+      case 'groups':
+        // 펼쳐 넘기지 않는다(push(...) 는 인자 수 한도 — 조각이 수십만 개면 RangeError)
+        for (const name of splitMultiValue(value)) record.groups.push(name)
+        break
+      case 'nickname':
+      case 'homepage':
+        for (const part of splitMultiValue(value)) {
+          const text = cleanText(part)
+          if (text) record.info.push({ kind: role.kind, value: text })
+        }
+        break
+      case 'birthday':
+        birthday ??= value
+        break
+      case 'birthdayCalendar':
+        lunar = isLunarMarker(value)
+        break
+      case 'anniversary':
+        if (role.part === 'name') anniversaryName ??= cleanText(value)
+        else anniversaryDate ??= value
+        break
+      case 'messenger':
+        if (role.part === 'service') {
+          messengerService ??= cleanText(value)
+          break
+        }
+        for (const address of splitMultiValue(value)) messengerAddresses.push(address)
+        break
+      case 'address': {
+        const parts = addresses.get(role.slot) ?? { ...emptyAddressParts(), label: null }
+        parts[role.part] ??= value
+        addresses.set(role.slot, parts)
+        break
+      }
+      case 'paired': {
+        const key = `${role.family}:${role.index}`
+        const entry = paired.get(key) ?? { family: role.family, parts: new Map<string, string>() }
+        entry.parts.set(role.part, value)
+        paired.set(key, entry)
+        break
+      }
+      default:
+        break
+    }
+  })
+
+  for (const { family, parts } of paired.values()) {
+    const label = pairedLabel(parts.get('label') ?? parts.get('type'))
+    const value = parts.get('value') ?? ''
+    if (family === 'email') {
+      for (const address of splitEmails(value)) record.emails.push({ address, label: emailLabelOfText(label) })
+    } else if (family === 'phone') {
+      addPhone(value, label === '' ? 'auto' : phoneLabelOfText(label))
+    } else if (family === 'website') {
+      for (const part of splitMultiValue(value)) {
+        const text = cleanText(part)
+        if (text) record.info.push({ kind: 'homepage', value: text })
+      }
+    } else if (family === 'event') {
+      const date = formatImportedDate(value)
+      const name = cleanText(parts.get('label') ?? parts.get('type'))
+      if (date) record.info.push({ kind: 'anniversary', value: name && !/anniversary/i.test(name) ? `${name} ${date}` : date })
+    } else if (family === 'im') {
+      const service = cleanText(parts.get('service'))
+      const address = cleanText(value)
+      if (address) record.info.push({ kind: 'messenger', value: service ? `${service} ${address}` : address })
+    } else if (family === 'organization') {
+      record.company ??= cleanText(parts.get('name'))
+      record.title ??= cleanText(parts.get('title'))
+      record.department ??= cleanText(parts.get('department'))
+    } else {
+      const slot: AddressSlot = /(work|회사)/.test(label) ? 'work' : /(home|집)/.test(label) ? 'home' : label ? 'other' : 'main'
+      const address = formatAddress({
+        ...emptyAddressParts(),
+        full: parts.get('formatted') ?? null,
+        street: parts.get('street') ?? null,
+        extended: parts.get('extendedaddress') ?? null,
+        city: parts.get('city') ?? null,
+        region: parts.get('region') ?? null,
+        postal: parts.get('postalcode') ?? null,
+        country: parts.get('country') ?? null,
+        pobox: parts.get('pobox') ?? null,
+      })
+      if (address) record.info.push({ kind: addressKindOf(slot), value: address })
+    }
+  }
+
+  for (const [slot, parts] of addresses) {
+    const address = formatAddress(parts)
+    if (!address) continue
+    const label = cleanText(parts.label)
+    record.info.push({ kind: addressKindOf(slot as AddressSlot), value: label ? `${label} ${address}` : address })
+  }
+  const birthdayText = formatImportedDate(birthday, lunar)
+  if (birthdayText) record.info.push({ kind: 'birthday', value: birthdayText })
+  const anniversary = formatImportedDate(anniversaryDate)
+  if (anniversary) {
+    record.info.push({ kind: 'anniversary', value: anniversaryName ? `${anniversaryName} ${anniversary}` : anniversary })
+  }
+  for (const address of messengerAddresses) {
+    const text = cleanText(address)
+    if (text) record.info.push({ kind: 'messenger', value: messengerService ? `${messengerService} ${text}` : text })
+  }
+
+  record.name = cleanText(names.name) ?? composeName(names.family, names.given, names.middle)
+  record.note = notes.length > 0 ? notes.join('\n') : null
+  return record
+}
+
+export interface TableReadResult {
+  layout: TableLayout
+  /** 이름이나 이메일 열이 있다 */
+  recognized: boolean
+  records: ImportedRecord[]
+}
+
+/** 표의 줄들 → 연락처 — 첫 번째로 값이 있는 줄이 머리, 그 뒤의 빈 줄은 건너뛴다 */
+export function tableRecords(rows: readonly TableRow[]): TableReadResult {
+  const headerIndex = rows.findIndex((row) => row.cells.some((cell) => cell.trim() !== ''))
+  const header = rows[headerIndex]
+  if (!header) return { layout: 'other', recognized: false, records: [] }
+  const headers = header.cells.map(normalizeHeader)
+  const layout = detectTableLayout(headers)
+  const hasFamily = headers.some((value) => FAMILY_COLUMN.test(value))
+  const roles = headers.map((value) => classifyHeader(value, layout, hasFamily))
+  if (!hasContactColumns(roles)) return { layout, recognized: false, records: [] }
+  const body = rows.slice(headerIndex + 1)
+  const stripQuotes = quotesEveryValue(body, layout)
+  const records = body
+    .map((row) => recordOfRow(row, roles, stripQuotes))
+    .filter((record): record is ImportedRecord => record !== null)
+  return { layout, recognized: true, records }
+}
diff --git a/frontend/src/shared/utils/contact-import/text.ts b/frontend/src/shared/utils/contact-import/text.ts
new file mode 100644
index 0000000..369c8aa
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/text.ts
@@ -0,0 +1,43 @@
+// 연락처 파일의 글자 풀기 — 순수 함수 (16단계 가져오기 · 디자인 원본 Contacts16 "6 받는 파일")
+// 차례: BOM(UTF-8 · UTF-16) → BOM 이 없으면 UTF-8(틀린 바이트가 있으면 실패) → 그것도 아니면 EUC-KR.
+// EUC-KR 라벨은 WHATWG 인코딩 표에서 windows-949(CP949 전체 — 한국어 엑셀의 "CSV(쉼표로 분리)")다.
+// 'cp949' 라벨은 브라우저 · Node 모두 RangeError 라 쓰지 않는다 (바깥 조사 2026-11-10)
+
+const UTF8_BOM = [0xef, 0xbb, 0xbf] as const
+const UTF16LE_BOM = [0xff, 0xfe] as const
+const UTF16BE_BOM = [0xfe, 0xff] as const
+
+function startsWith(bytes: Uint8Array, prefix: readonly number[]): boolean {
+  return prefix.every((value, index) => bytes[index] === value)
+}
+
+/** 파일의 바이트 → 글. BOM 은 떼고 돌려준다 */
+export function decodeText(bytes: Uint8Array): string {
+  if (startsWith(bytes, UTF8_BOM)) return new TextDecoder('utf-8').decode(bytes.subarray(UTF8_BOM.length))
+  if (startsWith(bytes, UTF16LE_BOM)) return new TextDecoder('utf-16le').decode(bytes.subarray(UTF16LE_BOM.length))
+  if (startsWith(bytes, UTF16BE_BOM)) return new TextDecoder('utf-16be').decode(bytes.subarray(UTF16BE_BOM.length))
+  try {
+    return new TextDecoder('utf-8', { fatal: true }).decode(bytes)
+  } catch {
+    return new TextDecoder('euc-kr').decode(bytes)
+  }
+}
+
+/**
+ * 글자 이름(vCard 2.1 의 CHARSET)으로 바이트를 푼다 — 모르는 이름이면 UTF-8.
+ * 'cp949' · 'ks_c_5601-1987' 처럼 브라우저가 모르는 한국어 이름은 EUC-KR 로 읽는다
+ */
+export function decodeWithCharset(bytes: Uint8Array, charset: string | null): string {
+  const label = (charset ?? '').trim().toLowerCase()
+  const korean = label === 'cp949' || label === 'ms949' || label === 'uhc' || label === 'ks_c_5601-1987'
+  try {
+    return new TextDecoder(korean ? 'euc-kr' : label || 'utf-8').decode(bytes)
+  } catch {
+    return new TextDecoder('utf-8').decode(bytes)
+  }
+}
+
+/** 글 안에 NUL 이 있다 — 글 파일이 아니다 (그림 · 문서 같은 바이너리) */
+export function looksBinary(text: string): boolean {
+  return text.includes('\u0000')
+}
diff --git a/frontend/src/shared/utils/contact-import/types.ts b/frontend/src/shared/utils/contact-import/types.ts
new file mode 100644
index 0000000..8f25fec
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/types.ts
@@ -0,0 +1,71 @@
+// 연락처 가져오기의 공통 타입 — 파일(CSV · 엑셀 · vCard)을 읽은 결과와 주소록 칸으로 맞춘 결과 (16단계)
+
+import type { ContactEmailLabel, ContactPhoneLabel } from '@/shared/types/contacts'
+
+/** 표의 한 줄 — position 은 엑셀에서 보이는 행 번호(머리 줄이 1) */
+export interface TableRow {
+  position: number
+  cells: string[]
+}
+
+/** 주소록에 칸이 없는 정보 — 메모 끝 "가져온 정보" 줄이 된다 */
+export type ImportedInfoKind =
+  | 'workAddress'
+  | 'homeAddress'
+  | 'otherAddress'
+  | 'address'
+  | 'birthday'
+  | 'anniversary'
+  | 'homepage'
+  | 'nickname'
+  | 'messenger'
+  | 'phone'
+
+export interface ImportedInfo {
+  kind: ImportedInfoKind
+  value: string
+}
+
+/**
+ * 파일에서 읽은 연락처 하나 — 아직 검사 · 정리 전(파일에 적힌 그대로에 가깝다).
+ * position 은 CSV · 엑셀은 행 번호, vCard 는 몇 번째 연락처(1부터)
+ */
+export interface ImportedRecord {
+  position: number
+  name: string | null
+  emails: { address: string; label: ContactEmailLabel }[]
+  phones: { number: string; label: ContactPhoneLabel }[]
+  company: string | null
+  department: string | null
+  title: string | null
+  note: string | null
+  /** 파일에 적힌 그룹 이름 (시스템 라벨은 뺐다) */
+  groups: string[]
+  info: ImportedInfo[]
+}
+
+/** 파일의 꼴 — 줄 번호를 "N번째 줄"(표) · "N번째 연락처"(vCard)로 적는다 */
+export type ImportedFileKind = 'table' | 'vcard'
+
+/** 읽지 못한 까닭 — 칸 아래 글 (CONTACT_IMPORT_ERROR_TEXT) */
+export type ContactFileProblem = 'unsupported' | 'xls' | 'tooLarge' | 'notFound' | 'unreadable'
+
+export type ContactFileReadResult =
+  | { ok: true; kind: ImportedFileKind; records: ImportedRecord[] }
+  | { ok: false; problem: ContactFileProblem; kind: ImportedFileKind | null }
+
+/** 빈 연락처 하나 — 읽는 쪽이 칸을 채운다 */
+export function emptyImportedRecord(position: number): ImportedRecord {
+  return {
+    position,
+    name: null,
+    emails: [],
+    phones: [],
+    company: null,
+    department: null,
+    title: null,
+    note: null,
+    groups: [],
+    info: [],
+  }
+}
diff --git a/frontend/src/shared/utils/contact-import/values.spec.ts b/frontend/src/shared/utils/contact-import/values.spec.ts
new file mode 100644
index 0000000..35cd70c
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/values.spec.ts
@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  cleanGroupName,
+  composeName,
+  emptyAddressParts,
+  formatAddress,
+  formatImportedDate,
+  formatKoreanPhone,
+  guessPhoneLabel,
+  normalizePhone,
+  phoneLabelOfText,
+  splitEmails,
+  splitMultiValue,
+} from './values'
+
+// 가져온 값 다듬기 (16단계 — 디자인 원본 Contacts16 "6 칸 맞추기")
+
+describe('composeName — 성과 이름을 하나로', () => {
+  it('한글끼리는 붙여 쓴다 (강 + 민지 = 강민지, 남궁 + 서연)', () => {
+    expect(composeName('강', '민지')).toBe('강민지')
+    expect(composeName('남궁', '서연')).toBe('남궁서연')
+    expect(composeName(' 강 ', null)).toBe('강')
+    expect(composeName(null, '민지')).toBe('민지')
+  })
+
+  it('영문은 이름 · 중간 이름 · 성 차례로 띄운다', () => {
+    expect(composeName('Smith', 'John')).toBe('John Smith')
+    expect(composeName('Smith', 'John', 'Q.')).toBe('John Q. Smith')
+  })
+
+  it('모두 비면 null', () => {
+    expect(composeName('', ' ', null)).toBeNull()
+  })
+})
+
+describe('전화번호', () => {
+  it('숫자만 적힌 국내 번호에 하이픈을 넣는다', () => {
+    expect(formatKoreanPhone('01012345678')).toBe('010-1234-5678')
+    expect(formatKoreanPhone('0111234567')).toBe('011-123-4567')
+    expect(formatKoreanPhone('0255501470')).toBe('02-5550-1470')
+    expect(formatKoreanPhone('025550147')).toBe('02-555-0147')
+    expect(formatKoreanPhone('0311234567')).toBe('031-123-4567')
+    expect(formatKoreanPhone('07012345678')).toBe('070-1234-5678')
+    expect(formatKoreanPhone('15881234')).toBe('1588-1234')
+  })
+
+  it('엑셀이 앞의 0 을 뺀 휴대전화(1012345678)는 0 을 되살린다', () => {
+    expect(formatKoreanPhone('1012345678')).toBe('010-1234-5678')
+  })
+
+  it('하이픈 · 국가 번호가 있거나 모르는 꼴이면 그대로', () => {
+    expect(formatKoreanPhone('010-4120-3387')).toBe('010-4120-3387')
+    expect(formatKoreanPhone('+82 10-1234-5678')).toBe('+82 10-1234-5678')
+    expect(formatKoreanPhone('12345')).toBe('12345')
+  })
+
+  it('tel: 을 떼고 전각 숫자 · 여러 가지 줄표를 보통 글자로', () => {
+    expect(normalizePhone('tel:+82-10-1234-5678;ext=12')).toBe('+82-10-1234-5678')
+    expect(normalizePhone('０１０－１２３４‐５６７８')).toBe('010-1234-5678')
+  })
+
+  it('종류 글 · 번호로 종류를 정한다 — 팩스는 기타, 모르는 칸의 휴대전화 번호는 휴대전화', () => {
+    expect(phoneLabelOfText('Work Fax')).toBe('other')
+    expect(phoneLabelOfText('Mobile')).toBe('mobile')
+    expect(phoneLabelOfText('직장')).toBe('work')
+    expect(phoneLabelOfText('Home')).toBe('home')
+    expect(phoneLabelOfText('')).toBe('other')
+    expect(guessPhoneLabel('010-1234-5678')).toBe('mobile')
+    expect(guessPhoneLabel('02-555-0147')).toBe('other')
+  })
+})
+
+describe('formatImportedDate', () => {
+  it('여러 꼴의 날짜를 "1988년 3월 14일"로', () => {
+    expect(formatImportedDate('19880314')).toBe('1988년 3월 14일')
+    expect(formatImportedDate('1988-03-14')).toBe('1988년 3월 14일')
+    expect(formatImportedDate('1988-03-14T00:00:00Z')).toBe('1988년 3월 14일')
+    expect(formatImportedDate('3/14/1988')).toBe('1988년 3월 14일')
+    expect(formatImportedDate('1988. 3. 14.')).toBe('1988년 3월 14일')
+  })
+
+  it('해를 모르면 "3월 14일" (vCard 의 --0314 · 아이폰의 1604년)', () => {
+    expect(formatImportedDate('--0314')).toBe('3월 14일')
+    expect(formatImportedDate('1604-03-14')).toBe('3월 14일')
+  })
+
+  it('음력이면 뒤에 (음력), 읽지 못하면 적힌 그대로, 비었거나 0 뿐이면 null', () => {
+    expect(formatImportedDate('19880314', true)).toBe('1988년 3월 14일 (음력)')
+    expect(formatImportedDate('봄 무렵')).toBe('봄 무렵')
+    expect(formatImportedDate('0/0/00')).toBeNull()
+    expect(formatImportedDate('  ')).toBeNull()
+  })
+})
+
+describe('formatAddress', () => {
+  it('한 줄 주소는 그대로, 우편번호는 뒤에 괄호로', () => {
+    expect(formatAddress({ ...emptyAddressParts(), full: '서울 중구 세종대로 110', postal: '04524' })).toBe(
+      '서울 중구 세종대로 110 (04524)',
+    )
+  })
+
+  it('한글 조각은 큰 곳부터 띄어 쓰고 우리나라 이름은 쓰지 않는다', () => {
+    const parts = { ...emptyAddressParts(), street: '세종대로 110', city: '중구', region: '서울', country: '대한민국' }
+    expect(formatAddress(parts)).toBe('서울 중구 세종대로 110')
+  })
+
+  it('영문 조각은 작은 곳부터 쉼표로, 다른 나라 이름은 끝에', () => {
+    const parts = {
+      ...emptyAddressParts(),
+      street: '1 Infinite Loop',
+      city: 'Cupertino',
+      region: 'CA',
+      postal: '95014',
+      country: 'United States',
+    }
+    expect(formatAddress(parts)).toBe('1 Infinite Loop, Cupertino, CA, United States (95014)')
+  })
+
+  it('아무 조각도 없으면 null', () => {
+    expect(formatAddress(emptyAddressParts())).toBeNull()
+  })
+})
+
+describe('여러 값 · 그룹 이름', () => {
+  it('Google 의 " ::: " · 우리 내보내기의 "; " 로 나눈다', () => {
+    expect(splitMultiValue('* myContacts ::: 거래처')).toEqual(['* myContacts', '거래처'])
+    expect(splitMultiValue('010-1111-2222; 010-3333-4444')).toEqual(['010-1111-2222', '010-3333-4444'])
+    expect(splitEmails('a@x.kr, b@x.kr; c@x.kr ::: d@x.kr')).toEqual(['a@x.kr', 'b@x.kr', 'c@x.kr', 'd@x.kr'])
+    expect(splitMultiValue('a::::b ;; c')).toEqual(['a', ':b', 'c'])
+  })
+
+  // 옛 정규식(\s*:::\s*)은 긴 빈칸에서 자리마다 다시 훑어 길이의 제곱이라 이 시험이 시간 한도 안에 끝나지 않는다
+  it('긴 빈칸이 있어도 길이에 비례하게 나눈다 — 구분자 둘레의 빈칸은 나눈 뒤 뺀다', () => {
+    const spaces = ' '.repeat(400_000)
+    expect(splitMultiValue(`a${spaces}b${spaces}:::${spaces}c;d`)).toEqual([`a${spaces}b`, 'c', 'd'])
+    expect(splitEmails(`a@x.kr${spaces}:::${spaces}b@x.kr`)).toEqual(['a@x.kr', 'b@x.kr'])
+  })
+
+  it('Google 시스템 라벨(* myContacts · Starred)과 빈 이름은 뺀다, 50자까지', () => {
+    expect(cleanGroupName('* myContacts', 50)).toBeNull()
+    expect(cleanGroupName('Starred', 50)).toBeNull()
+    expect(cleanGroupName('  ', 50)).toBeNull()
+    expect(cleanGroupName(' 거래처 ', 50)).toBe('거래처')
+    expect(cleanGroupName('가'.repeat(60), 50)).toBe('가'.repeat(50))
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/values.ts b/frontend/src/shared/utils/contact-import/values.ts
new file mode 100644
index 0000000..ae13b5a
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/values.ts
@@ -0,0 +1,216 @@
+// 가져온 값 다듬기 — 순수 함수 (16단계 가져오기 · 디자인 원본 Contacts16 "6 칸 맞추기")
+// - 이름: 성 + 이름을 하나로 — 한글 성이면 성 다음 이름(한글끼리는 붙여 쓴다 — 강 + 민지 = 강민지, 엔진 카드 읽기와 같은 규칙), 그 밖은 이름 · 중간 이름 · 성을 띄어 쓴다
+// - 전화: 숫자만 적힌 국내 번호에 하이픈을 넣는다(01012345678 → 010-1234-5678). 앞의 tel: 은 떼고, 전각 숫자 · 여러 가지 줄표는 보통 글자로
+// - 날짜: 생일 · 기념일을 "1988년 3월 14일"로 (해를 모르면 "3월 14일", 읽지 못하면 적힌 그대로)
+// - 여러 값이 든 칸: Google 의 " ::: " · 우리 내보내기의 "; "
+
+import { CONTACT_IMPORT_INFO_TEXT } from '@/shared/constants/contacts'
+import type { ContactPhoneLabel } from '@/shared/types/contacts'
+import { singleLineText } from '@/shared/utils/contacts'
+
+const HANGUL_SYLLABLE_START = 0xac00
+const HANGUL_SYLLABLE_END = 0xd7a3
+/** 한글 · 한자 · 가나가 든 이름 — 성을 앞에 쓰는 이름으로 본다 */
+const EAST_ASIAN = /[ᄀ-ᇿ぀-ヿ㄰-㆏㐀-鿿가-힣豈-﫿]/
+
+function isHangulSyllable(char: string | undefined): boolean {
+  const code = char?.charCodeAt(0) ?? 0
+  return code >= HANGUL_SYLLABLE_START && code <= HANGUL_SYLLABLE_END
+}
+
+/** 한 줄 글로 — 제어 문자 · 줄바꿈은 띄어쓰기, 이어진 빈칸은 하나로, 앞뒤 공백을 뺀다. 빈 글은 null */
+export function cleanText(value: string | null | undefined): string | null {
+  if (value === null || value === undefined) return null
+  const text = singleLineText(value).replace(/\s+/g, ' ').trim()
+  return text === '' ? null : text
+}
+
+/** 성 · 중간 이름 · 이름 → 이름 하나. 모두 비면 null */
+export function composeName(family: string | null, given: string | null, middle: string | null = null): string | null {
+  const last = cleanText(family)
+  const first = cleanText(given)
+  const between = cleanText(middle)
+  if (!last && !first && !between) return null
+  if (last && EAST_ASIAN.test(last)) {
+    const rest = [between, first].filter((part): part is string => part !== null).join(' ')
+    if (!rest) return last
+    const joiner = isHangulSyllable(last.at(-1)) && isHangulSyllable(rest[0]) ? '' : ' '
+    return `${last}${joiner}${rest}`
+  }
+  return [first, between, last].filter((part): part is string => part !== null).join(' ')
+}
+
+// ── 여러 값이 든 칸 ───────────────────────────────────────
+
+// 구분자 둘레의 빈칸은 나눈 뒤 trim 으로 뺀다 — 정규식에 \s*:::\s* 로 넣으면 긴 빈칸에서 자리마다 다시 훑어 길이의 제곱이다 (2026-11-10 리뷰)
+
+/** Google 의 " ::: " · 우리 내보내기 · Outlook 의 ";" 로 나눈다 — 빈 조각은 뺀다 */
+export function splitMultiValue(value: string): string[] {
+  return value
+    .split(/:::|;/)
+    .map((part) => part.trim())
+    .filter((part) => part !== '')
+}
+
+/** 이메일 칸 — 위에 더해 쉼표 · 빈칸으로도 나눈다 (주소에는 들어가지 않는 글자) */
+export function splitEmails(value: string): string[] {
+  return value
+    .split(/:::|[;,\s]+/)
+    .map((part) => part.trim())
+    .filter((part) => part !== '')
+}
+
+// ── 전화 ──────────────────────────────────────────────
+
+/** 여러 가지 줄표 — 하이픈으로 */
+const DASHES = /[‐-―−﹘﹣－]/g
+/** 국내 휴대전화 앞자리 */
+const KOREAN_MOBILE = /^01[016789]/
+/** 지역 번호 셋자리 (031 ~ 064) */
+const KOREAN_AREA_CODE = /^0(?:3[1-3]|4[1-4]|5[1-5]|6[1-4])/
+/** 대표 번호 (1588 · 1577 · 1544 · 1600 · 1661 …) — 여덟 자리 */
+const KOREAN_REPRESENTATIVE = /^1[5-9]\d{2}/
+
+/** 번호 하나를 다듬는다 — tel: 을 떼고 전각 숫자 · 줄표를 보통 글자로. 빈 글은 '' */
+export function normalizePhone(value: string): string {
+  let text = value.normalize('NFKC').replace(DASHES, '-').trim()
+  if (/^tel:/i.test(text)) text = text.slice('tel:'.length).split(';')[0] ?? ''
+  return text.replace(/\s+/g, ' ').trim()
+}
+
+/** 숫자만 적힌 국내 번호에 하이픈을 넣는다 — 모르는 꼴이면 그대로 */
+export function formatKoreanPhone(value: string): string {
+  if (!/^\d+$/.test(value)) return value
+  const digits = value
+  const length = digits.length
+  const split = (...sizes: number[]) => {
+    const parts: string[] = []
+    let at = 0
+    for (const size of sizes) {
+      parts.push(digits.slice(at, at + size))
+      at += size
+    }
+    return parts.join('-')
+  }
+  if (KOREAN_MOBILE.test(digits) && (length === 10 || length === 11)) return split(3, length - 7, 4)
+  if (digits.startsWith('02') && (length === 9 || length === 10)) return split(2, length - 6, 4)
+  if ((KOREAN_AREA_CODE.test(digits) || /^0(?:70|80)/.test(digits)) && (length === 10 || length === 11)) {
+    return split(3, length - 7, 4)
+  }
+  if (KOREAN_REPRESENTATIVE.test(digits) && length === 8) return split(4, 4)
+  // 엑셀이 숫자로 바꿔 앞의 0 이 빠진 휴대전화 (1012345678 → 010-1234-5678)
+  if (/^1[016789]\d{8}$/.test(digits)) return formatKoreanPhone(`0${digits}`)
+  return value
+}
+
+/** 번호로 종류를 짐작한다 — 종류를 모르는 칸(전화번호 · 연락처)의 국내 휴대전화는 휴대전화, 그 밖은 기타 */
+export function guessPhoneLabel(number: string): ContactPhoneLabel {
+  return KOREAN_MOBILE.test(number.replace(/[^\d]/g, '')) ? 'mobile' : 'other'
+}
+
+/** 종류 글로 전화 종류를 정한다 — 팩스 · 호출기는 기타, 모르면 fallback */
+export function phoneLabelOfText(text: string, fallback: ContactPhoneLabel = 'other'): ContactPhoneLabel {
+  const words = text.toLowerCase()
+  if (/(fax|팩스|pager|호출)/.test(words)) return 'other'
+  if (/(mobile|cell|iphone|휴대|핸드폰|모바일)/.test(words)) return 'mobile'
+  if (/(work|business|company|office|회사|직장|업무)/.test(words)) return 'work'
+  if (/(home|집|자택)/.test(words)) return 'home'
+  if (/(other|기타|main|대표|voice)/.test(words)) return 'other'
+  return fallback
+}
+
+// ── 날짜 ──────────────────────────────────────────────
+
+const YEAR_UNKNOWN = new Set([0, 1604])
+const MONTHS = 12
+const DAYS = 31
+
+function dateParts(value: string): { year: number | null; month: number; day: number } | null {
+  const text = value.trim()
+  const iso = /^(\d{4})-?(\d{2})-?(\d{2})(?:$|T)/.exec(text)
+  const noYear = /^--(\d{2})-?(\d{2})$/.exec(text)
+  const slashed = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(text)
+  const dotted = /^(\d{4})\s*[./]\s*(\d{1,2})\s*[./]\s*(\d{1,2})\.?$/.exec(text)
+  let year: number | null = null
+  let month = 0
+  let day = 0
+  if (iso) [year, month, day] = [Number(iso[1]), Number(iso[2]), Number(iso[3])]
+  else if (noYear) [month, day] = [Number(noYear[1]), Number(noYear[2])]
+  else if (slashed) [month, day, year] = [Number(slashed[1]), Number(slashed[2]), Number(slashed[3])]
+  else if (dotted) [year, month, day] = [Number(dotted[1]), Number(dotted[2]), Number(dotted[3])]
+  else return null
+  if (month < 1 || month > MONTHS || day < 1 || day > DAYS) return null
+  return { year: year !== null && YEAR_UNKNOWN.has(year) ? null : year, month, day }
+}
+
+/** 날짜 글 → "1988년 3월 14일" — 읽지 못하면 적힌 그대로, 비었거나 0 뿐이면(Outlook 의 "0/0/00") null */
+export function formatImportedDate(value: string | null | undefined, lunar = false): string | null {
+  const text = cleanText(value)
+  if (!text || /^[0/.\-\s]+$/.test(text)) return null
+  const parts = dateParts(text)
+  const formatted = parts ? CONTACT_IMPORT_INFO_TEXT.date(parts.year, parts.month, parts.day) : text
+  return lunar ? CONTACT_IMPORT_INFO_TEXT.lunar(formatted) : formatted
+}
+
+/** 양력 · 음력 칸의 값이 음력인가 — "음력" · "L" · "lunar" */
+export function isLunarMarker(value: string | null | undefined): boolean {
+  const text = (value ?? '').trim().toLowerCase()
+  return text.includes('음') || text === 'l' || text.includes('lunar')
+}
+
+// ── 주소 ──────────────────────────────────────────────
+
+export interface AddressParts {
+  /** 이미 한 줄로 적힌 주소 (네이버 주소 · Google Formatted) */
+  full: string | null
+  street: string | null
+  extended: string | null
+  city: string | null
+  region: string | null
+  postal: string | null
+  country: string | null
+  pobox: string | null
+}
+
+export function emptyAddressParts(): AddressParts {
+  return { full: null, street: null, extended: null, city: null, region: null, postal: null, country: null, pobox: null }
+}
+
+/** 나라 이름이 우리나라면 쓰지 않는다 */
+const HOME_COUNTRY = /^(대한민국|한국|south korea|korea|republic of korea|kr|kor)$/i
+
+/** 주소 조각 → 한 줄. 한글 주소는 큰 곳부터(서울 중구 세종대로 110), 그 밖은 작은 곳부터 쉼표로. 우편번호는 뒤에 괄호로 */
+export function formatAddress(parts: AddressParts): string | null {
+  const postal = cleanText(parts.postal)
+  const country = cleanText(parts.country)
+  const foreignCountry = country && !HOME_COUNTRY.test(country) ? country : null
+  const full = cleanText(parts.full)
+  let body: string | null
+  if (full) {
+    body = full
+  } else {
+    const pieces = [parts.street, parts.extended, parts.city, parts.region, parts.pobox].map(cleanText)
+    const korean = pieces.some((piece) => piece !== null && EAST_ASIAN.test(piece))
+    const [street, extended, city, region, pobox] = pieces
+    const ordered = korean ? [region, city, street, extended, pobox] : [pobox, street, extended, city, region]
+    const present = ordered.filter((piece): piece is string => piece !== null)
+    body = present.length > 0 ? present.join(korean ? ' ' : ', ') : null
+    if (body && foreignCountry) body = korean ? `${foreignCountry} ${body}` : `${body}, ${foreignCountry}`
+  }
+  if (!body) return postal
+  return postal && !body.includes(postal) ? `${body} (${postal})` : body
+}
+
+// ── 그룹 ──────────────────────────────────────────────
+
+/** Google 의 시스템 라벨 — 가져오지 않는다 ("* myContacts" · "* starred" 처럼 별표로 시작하거나 그 이름) */
+const SYSTEM_GROUP_NAMES = new Set(['mycontacts', 'my contacts', 'starred', 'friends', 'family', 'coworkers'])
+
+/** 파일에 적힌 그룹 이름을 다듬는다 — 시스템 라벨 · 빈 이름은 null, 50자까지 */
+export function cleanGroupName(value: string, maxLength: number): string | null {
+  const text = cleanText(value)
+  if (!text) return null
+  if (text.startsWith('*')) return null
+  if (SYSTEM_GROUP_NAMES.has(text.toLowerCase())) return null
+  return text.slice(0, maxLength).trim() || null
+}
diff --git a/frontend/src/shared/utils/contact-import/vcard.spec.ts b/frontend/src/shared/utils/contact-import/vcard.spec.ts
new file mode 100644
index 0000000..2627729
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/vcard.spec.ts
@@ -0,0 +1,233 @@
+import { describe, expect, it } from 'vitest'
+
+import { looksLikeVCard, parseVCards, unfoldVCardLines } from './vcard'
+
+// vCard 읽기 — 2.1 · 3.0 · 4.0, 여러 명 (16단계 가져오기 · 바깥 조사: 안드로이드(삼성) 2.1 QP 는 한글이 줄을 넘어 갈린다)
+// 표본의 사람 · 주소는 지어낸 것이다
+
+/** "강민지" 를 UTF-8 QP 로 — 한 글자(=EB=AF=BC)를 두 줄에 걸쳐 나눈다 */
+const ANDROID_21 = [
+  'BEGIN:VCARD',
+  'VERSION:2.1',
+  'N;CHARSET=UTF-8;ENCODING=QUOTED-PRINTABLE:=EA=B0=95;=EB=AF=BC=EC=A7=80;;;',
+  'FN;CHARSET=UTF-8;ENCODING=QUOTED-PRINTABLE:=EA=B0=95=EB=',
+  '=AF=BC=EC=A7=80',
+  'TEL;CELL;PREF:010-4120-3387',
+  'TEL;WORK;FAX:02-555-0148',
+  'EMAIL;HOME:minji.kang@example.com',
+  'NOTE;CHARSET=UTF-8;ENCODING=QUOTED-PRINTABLE:=EA=B2=AC=EC=A0=81=20=EB=AC=B8=EC=9D=98=EB=8A=94=20=EC=9B=94=EB=A7=90=',
+  '=20=EC=A0=84=EC=97=90',
+  'PHOTO;ENCODING=BASE64;JPEG:/9j/4AAQSkZJRgABAQAAAQABAAD',
+  ' AAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  '',
+  'END:VCARD',
+].join('\r\n')
+
+const IPHONE_30 = [
+  'BEGIN:VCARD',
+  'VERSION:3.0',
+  'PRODID:-//Apple Inc.//iPhone OS 17.0//EN',
+  'N:박;지훈;;;',
+  'FN:박지훈',
+  'ORG:한빛상사;영업팀;',
+  'TITLE:팀장',
+  'item1.EMAIL;type=INTERNET;type=pref:jihoon.park@example.com',
+  'item1.X-ABLabel:_$!<Other>!$_',
+  'EMAIL;type=INTERNET;type=WORK:jihoon@hanbit.example',
+  'TEL;type=CELL;type=VOICE;type=pref:010-3192-5540',
+  'item2.TEL:02-555-0147',
+  'item2.X-ABLabel:회사 대표',
+  'item3.ADR;type=WORK;type=pref:;;세종대로 110;중구;서울;04524;대한민국',
+  'item4.URL;type=pref:www.example.com',
+  'item4.X-ABLabel:_$!<HomePage>!$_',
+  'BDAY;value=date:1988-03-14',
+  'NICKNAME:지훈이',
+  'NOTE:견적 문의는 박지훈 팀장 →\\n강서윤 과장 차례로\\, 월말 마감',
+  'CATEGORIES:거래처,VIP',
+  'X-SOCIALPROFILE;type=twitter:x-apple:jihoon',
+  'END:VCARD',
+  'BEGIN:VCARD',
+  'VERSION:3.0',
+  'FN:김도현',
+  'N:김;도현;;;',
+  'EMAIL;type=INTERNET:dohyun.kim@example.net',
+  'NOTE:아주 긴 메모가 접혀서 다음 줄로',
+  '  이어집니다',
+  'END:VCARD',
+].join('\n')
+
+const VCARD_40 = [
+  'BEGIN:VCARD',
+  'VERSION:4.0',
+  'FN:Jane Doe',
+  'N:Doe;Jane;;;',
+  'TEL;VALUE=uri;TYPE="voice,home":tel:+1-555-555-5555;ext=5555',
+  'TEL;TYPE="cell,voice";VALUE=uri:tel:+82-10-2222-3333',
+  'EMAIL;TYPE=work:jane@example.org',
+  'ANNIVERSARY:20150502',
+  'IMPP;PREF=1:xmpp:jane@example.org',
+  'END:VCARD',
+].join('\r\n')
+
+describe('unfoldVCardLines', () => {
+  it('빈칸 접기는 앞 칸 하나를 떼고 잇는다 (3.0 · 4.0)', () => {
+    expect(unfoldVCardLines('NOTE:ab\r\n cd\r\n\tef\r\nFN:x')).toEqual(['NOTE:abcdef', 'FN:x'])
+  })
+
+  it('QUOTED-PRINTABLE 의 = 접힘은 끝의 = 를 떼고 다음 줄을 잇는다 — QUOTED-PRINTABLE 이 아닌 줄의 끝 = 는 그대로', () => {
+    expect(unfoldVCardLines('NOTE;ENCODING=QUOTED-PRINTABLE:=EA=\n=B0=95\nFN:a=\nN:b')).toEqual([
+      'NOTE;ENCODING=QUOTED-PRINTABLE:=EA=B0=95',
+      'FN:a=',
+      'N:b',
+    ])
+  })
+
+  it('머리가 접혀 있어도 첫 ":" 앞을 다 모은 뒤 QUOTED-PRINTABLE 인지 본다', () => {
+    expect(unfoldVCardLines('NOTE;ENCODING=QUOTED-\r\n PRINTABLE:=EA=\r\n=B0=95\r\nFN:x')).toEqual([
+      'NOTE;ENCODING=QUOTED-PRINTABLE:=EA=B0=95',
+      'FN:x',
+    ])
+  })
+
+  it('쓰지 않는 속성(PHOTO · LOGO · SOUND · KEY)은 이어지는 줄째 빼고, 다음 속성은 그대로 읽는다', () => {
+    const text = [
+      'FN:a',
+      'PHOTO;ENCODING=b;TYPE=JPEG:/9j/4AAQ',
+      ' AAAA',
+      ' BBBB',
+      'item1.LOGO:x',
+      ' y',
+      'EMAIL:a@example.com',
+      'KEY;ENCODING=QUOTED-PRINTABLE:=41=',
+      '=42',
+      'sound:z',
+      'NOTE:b',
+    ].join('\r\n')
+    expect(unfoldVCardLines(text)).toEqual(['FN:a', 'EMAIL:a@example.com', 'NOTE:b'])
+  })
+
+  // 옛 방식(이어 붙인 글을 물리 줄마다 다시 봄)은 줄 수의 제곱이라 이 시험이 시간 한도 안에 끝나지 않는다 — 벽시계 대신 "끝나고 맞는가"로 본다
+  it('이어지는 줄이 20만 개여도 끝나고 결과가 맞다 — 빈칸 접기 · = 접기 모두 조각을 모아 한 번에 잇는다', () => {
+    const count = 200_000
+    const digits = Array.from({ length: count }, (_, index) => String(index % 10))
+    const folded = ['NOTE:시작', ...digits.map((digit) => ` ${digit}`), 'FN:끝'].join('\r\n')
+    expect(unfoldVCardLines(folded)).toEqual([`NOTE:시작${digits.join('')}`, 'FN:끝'])
+
+    const soft = ['NOTE;ENCODING=QUOTED-PRINTABLE:=41=', ...Array.from({ length: count }, () => '=42='), '=43', 'FN:끝'].join('\n')
+    expect(unfoldVCardLines(soft)).toEqual([`NOTE;ENCODING=QUOTED-PRINTABLE:=41${'=42'.repeat(count)}=43`, 'FN:끝'])
+  })
+})
+
+describe('parseVCards', () => {
+  it('2.1 QUOTED-PRINTABLE — 접힌 줄을 바이트로 이은 뒤 CHARSET 대로 푼다 (한 글자가 두 줄에 나뉘어도)', () => {
+    const [card] = parseVCards(ANDROID_21)
+    expect(card?.name).toBe('강민지')
+    expect(card?.note).toBe('견적 문의는 월말 전에')
+    expect(card?.phones).toEqual([
+      { number: '010-4120-3387', label: 'mobile' },
+      { number: '02-555-0148', label: 'other' },
+    ])
+    expect(card?.emails).toEqual([{ address: 'minji.kang@example.com', label: 'personal' }])
+  })
+
+  it('3.0 — 여러 명, 아이폰 묶음 라벨(item1.X-ABLabel), 이스케이프, 그룹, 칸 없는 정보', () => {
+    const cards = parseVCards(IPHONE_30)
+    expect(cards.map((card) => card.position)).toEqual([1, 2])
+    const [jihoon, dohyun] = cards
+    expect(jihoon).toMatchObject({
+      name: '박지훈',
+      company: '한빛상사',
+      department: '영업팀',
+      title: '팀장',
+      note: '견적 문의는 박지훈 팀장 →\n강서윤 과장 차례로, 월말 마감',
+      groups: ['거래처', 'VIP'],
+    })
+    expect(jihoon?.emails).toEqual([
+      { address: 'jihoon.park@example.com', label: 'other' },
+      { address: 'jihoon@hanbit.example', label: 'work' },
+    ])
+    // item2 의 라벨 "회사 대표" — 사용자가 지은 라벨도 낱말로 종류를 정한다
+    expect(jihoon?.phones).toEqual([
+      { number: '010-3192-5540', label: 'mobile' },
+      { number: '02-555-0147', label: 'work' },
+    ])
+    expect(jihoon?.info).toEqual([
+      { kind: 'workAddress', value: '서울 중구 세종대로 110 (04524)' },
+      { kind: 'homepage', value: 'www.example.com' },
+      { kind: 'birthday', value: '1988년 3월 14일' },
+      { kind: 'nickname', value: '지훈이' },
+    ])
+    expect(dohyun).toMatchObject({ name: '김도현', note: '아주 긴 메모가 접혀서 다음 줄로 이어집니다' })
+    expect(dohyun?.emails).toEqual([{ address: 'dohyun.kim@example.net', label: 'other' }])
+  })
+
+  it('4.0 — tel: 주소 · 따옴표로 감싼 TYPE · 기념일 · 메신저', () => {
+    const [card] = parseVCards(VCARD_40)
+    expect(card?.name).toBe('Jane Doe')
+    expect(card?.phones).toEqual([
+      { number: '+1-555-555-5555', label: 'home' },
+      { number: '+82-10-2222-3333', label: 'mobile' },
+    ])
+    expect(card?.emails).toEqual([{ address: 'jane@example.org', label: 'work' }])
+    expect(card?.info).toEqual([
+      { kind: 'anniversary', value: '2015년 5월 2일' },
+      { kind: 'messenger', value: 'xmpp:jane@example.org' },
+    ])
+  })
+
+  it('FN 이 없으면 N 으로 이름을 만든다 (한글은 붙여 쓴다)', () => {
+    const [card] = parseVCards('BEGIN:VCARD\nVERSION:3.0\nN:남궁;서연;;;\nEND:VCARD')
+    expect(card?.name).toBe('남궁서연')
+  })
+
+  it('안에 든 vCard(2.1 AGENT)는 건너뛰고, 꼴이 틀린 줄은 무시한다', () => {
+    const text = [
+      'BEGIN:VCARD',
+      'FN:바깥',
+      'AGENT:',
+      'BEGIN:VCARD',
+      'FN:안쪽',
+      'END:VCARD',
+      '잘못된 줄',
+      'EMAIL:out@example.com',
+      'END:VCARD',
+    ].join('\n')
+    const cards = parseVCards(text)
+    expect(cards).toHaveLength(1)
+    expect(cards[0]).toMatchObject({ name: '바깥', emails: [{ address: 'out@example.com', label: 'other' }] })
+  })
+
+  it('사진(PHOTO)의 이어지는 줄이 20만 개여도 끝나고, 사진 뒤의 칸까지 읽는다', () => {
+    const photo = Array.from({ length: 200_000 }, () => ` ${'A'.repeat(75)}`)
+    const text = [
+      'BEGIN:VCARD',
+      'VERSION:3.0',
+      'FN:강민지',
+      'PHOTO;ENCODING=b;TYPE=JPEG:/9j/4AAQ',
+      ...photo,
+      'TEL;TYPE=CELL:010-4120-3387',
+      'EMAIL;TYPE=WORK:minji.kang@example.com',
+      'END:VCARD',
+    ].join('\r\n')
+    const cards = parseVCards(text)
+    expect(cards).toHaveLength(1)
+    expect(cards[0]).toMatchObject({
+      name: '강민지',
+      phones: [{ number: '010-4120-3387', label: 'mobile' }],
+      emails: [{ address: 'minji.kang@example.com', label: 'work' }],
+    })
+  })
+
+  it('매개변수가 20만 개인 줄 · 그룹 이름이 20만 개인 CATEGORIES 도 끝나고 맞게 읽는다', () => {
+    const tel = `TEL${';TYPE=CELL'.repeat(200_000)}:010-4120-3387`
+    const names = Array.from({ length: 200_000 }, (_, index) => `g${index}`)
+    const [card] = parseVCards(['BEGIN:VCARD', 'FN:a', tel, `CATEGORIES:${names.join(',')}`, 'END:VCARD'].join('\n'))
+    expect(card?.phones).toEqual([{ number: '010-4120-3387', label: 'mobile' }])
+    expect(card?.groups).toEqual(names)
+  })
+
+  it('첫 줄이 BEGIN:VCARD 면 vCard 다', () => {
+    expect(looksLikeVCard('\n\nbegin:vcard\nFN:x')).toBe(true)
+    expect(looksLikeVCard('이름,이메일\n')).toBe(false)
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/vcard.ts b/frontend/src/shared/utils/contact-import/vcard.ts
new file mode 100644
index 0000000..be450b2
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/vcard.ts
@@ -0,0 +1,430 @@
+// vCard(.vcf) 읽기 — 2.1 · 3.0 · 4.0, 한 파일에 여러 명 (16단계 가져오기 · 디자인 원본 Contacts16 "6 받는 파일")
+// - 접힌 줄: 줄 머리의 빈칸 · 탭 하나를 떼고 앞 줄에 잇는다(3.0 · 4.0)
+// - 2.1 QUOTED-PRINTABLE: 줄 끝 "=" 로 접힌 줄을 먼저 바이트로 이은 뒤 CHARSET(없으면 UTF-8)대로 푼다 — 안드로이드(삼성)는 한글 한 글자를
+//   두 줄에 나눠 쓴다(=EA= / =B0=91). 줄마다 풀면 글자가 깨진다
+// - 값의 이스케이프(\n \, \; \\), 구조 값(N · ADR · ORG 의 ;), 목록 값(CATEGORIES · NICKNAME 의 ,)
+// - 아이폰의 묶음 이름(item1.EMAIL + item1.X-ABLabel:_$!<Other>!$_)으로 종류를 정한다
+// - 사진(PHOTO) · 로고 · 소리 · 열쇠는 읽지 않는다 (주소록에 칸이 없다) — 이어지는 줄도 모으지 않고 건너뛴다
+// - 줄 수 · 글 길이에 비례하게 읽는다 (사진 든 vCard 는 이어지는 줄이 수만 개다)
+
+import type { ContactEmailLabel, ContactPhoneLabel } from '@/shared/types/contacts'
+import { decodeWithCharset } from './text'
+import { emptyImportedRecord, type ImportedInfoKind, type ImportedRecord } from './types'
+import {
+  cleanText,
+  composeName,
+  emptyAddressParts,
+  formatAddress,
+  formatImportedDate,
+  normalizePhone,
+  phoneLabelOfText,
+} from './values'
+
+interface VCardProperty {
+  /** 묶음 이름 (item1) — 없으면 null */
+  group: string | null
+  /** 대문자 */
+  name: string
+  /** 대문자 이름 → 값들 (2.1 의 이름 없는 값 — WORK · CELL — 은 TYPE 으로) */
+  params: Map<string, string[]>
+  /** 풀어 둔 값 — 이스케이프는 아직 그대로 */
+  value: string
+}
+
+const BEGIN = /^BEGIN:VCARD$/i
+const END = /^END:VCARD$/i
+const QUOTED_PRINTABLE = /QUOTED-PRINTABLE/i
+/** 2.1 의 이름 없는 인코딩 값 */
+const BARE_ENCODINGS = new Set(['QUOTED-PRINTABLE', 'BASE64', '8BIT', '7BIT', 'B'])
+/** 메신저 칸 (아이폰 · 옛 프로그램) — 서비스 이름 */
+const MESSENGER_PROPERTIES: Readonly<Record<string, string>> = {
+  'X-AIM': 'AIM',
+  'X-ICQ': 'ICQ',
+  'X-JABBER': 'Jabber',
+  'X-MSN': 'MSN',
+  'X-YAHOO': 'Yahoo',
+  'X-SKYPE': 'Skype',
+  'X-SKYPE-USERNAME': 'Skype',
+  'X-GOOGLE-TALK': 'Google Talk',
+  'X-GTALK': 'Google Talk',
+  'X-QQ': 'QQ',
+  'X-WECHAT': 'WeChat',
+  'X-LINE': 'LINE',
+  'X-KAKAOTALK': '카카오톡',
+}
+/** 아이폰 라벨 "_$!<Mobile>!$_" 의 안쪽 */
+const APPLE_LABEL = /^_\$!<(.*)>!\$_$/
+const HEX_PAIR = /^[0-9A-Fa-f]{2}$/
+
+// ── 줄 ────────────────────────────────────────────────
+
+/** 쓰지 않는 속성 — 이어지는 줄(사진 · 소리의 base64 — 수만 줄)을 모으지 않고 통째로 건너뛴다 */
+const SKIPPED_PROPERTIES = new Set(['PHOTO', 'LOGO', 'SOUND', 'KEY'])
+/** 속성 이름의 끝 — 첫 ";" 또는 ":" */
+const NAME_END = /[;:]/
+
+/** 논리 줄 첫 물리 줄의 속성 이름(대문자 — 묶음 이름 item1. 은 뗀다). 이 줄에서 알 수 없으면 null */
+function propertyNameOf(line: string): string | null {
+  const end = line.search(NAME_END)
+  if (end < 0) return null
+  const head = line.slice(0, end)
+  return head.slice(head.lastIndexOf('.') + 1).trim().toUpperCase()
+}
+
+/**
+ * 물리 줄 → 논리 줄 — QUOTED-PRINTABLE 의 "=" 접힘과 빈칸 접힘을 잇는다
+ * - 조각은 배열에 모았다가 한 번에 잇는다 — 이어 붙인 글을 물리 줄마다 다시 보면 줄 수의 제곱이다(사진 든 vCard, 이어지는 줄 2만 개에 16.8초 — 2026-11-10 리뷰)
+ * - "=" 접힘은 마지막 물리 줄의 끝으로 가른다. QUOTED-PRINTABLE 인지는 논리 줄의 첫 ":" 앞(머리)을 다 모았을 때 한 번 본다
+ * - 쓰지 않는 속성(PHOTO · LOGO · SOUND · KEY)은 이어지는 줄을 모으지 않고 논리 줄째 뺀다
+ */
+export function unfoldVCardLines(text: string): string[] {
+  const lines: string[] = []
+  /** 지금 논리 줄의 조각 — null 이면 아직 줄이 없다 */
+  let pieces: string[] | null = null
+  /** 지금 논리 줄의 마지막 물리 조각 */
+  let last = ''
+  /** 첫 ":" 앞까지 모은 머리 — 다 모았으면 null */
+  let head: string | null = null
+  let quotedPrintable = false
+  let skipped = false
+
+  const add = (piece: string) => {
+    if (head !== null) {
+      const colon = piece.indexOf(':')
+      if (colon < 0) {
+        head += piece
+      } else {
+        const whole = head + piece.slice(0, colon)
+        quotedPrintable = whole !== '' && QUOTED_PRINTABLE.test(whole)
+        head = null
+      }
+    }
+    if (!skipped) pieces?.push(piece)
+    last = piece
+  }
+  const finish = () => {
+    if (pieces !== null && !skipped) lines.push(pieces.join(''))
+  }
+
+  for (const raw of text.split(/\r\n|\r|\n/)) {
+    if (pieces !== null && quotedPrintable && last.endsWith('=')) {
+      // "=" 접힘 — 앞 조각 끝의 "=" 를 떼고 이 줄을 그대로 잇는다(줄 머리의 빈칸도 값이다)
+      if (!skipped) pieces[pieces.length - 1] = last.slice(0, -1)
+      add(raw)
+      continue
+    }
+    if (pieces !== null && (raw.startsWith(' ') || raw.startsWith('\t'))) {
+      add(raw.slice(1))
+      continue
+    }
+    finish()
+    pieces = []
+    head = ''
+    quotedPrintable = false
+    skipped = SKIPPED_PROPERTIES.has(propertyNameOf(raw) ?? '')
+    add(raw)
+  }
+  finish()
+  return lines
+}
+
+/** 따옴표 밖의 첫 구분자 자리 */
+function indexOutsideQuotes(text: string, separator: string): number {
+  let quoted = false
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index]
+    if (char === '"') quoted = !quoted
+    else if (char === separator && !quoted) return index
+  }
+  return -1
+}
+
+/** 따옴표 밖의 구분자로 나눈다 */
+function splitOutsideQuotes(text: string, separator: string): string[] {
+  const parts: string[] = []
+  let rest = text
+  for (;;) {
+    const at = indexOutsideQuotes(rest, separator)
+    if (at < 0) {
+      parts.push(rest)
+      return parts
+    }
+    parts.push(rest.slice(0, at))
+    rest = rest.slice(at + 1)
+  }
+}
+
+function unquote(value: string): string {
+  return value.length >= 2 && value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value
+}
+
+/** QUOTED-PRINTABLE → 바이트 (이미 이은 줄) */
+function decodeQuotedPrintable(value: string): Uint8Array {
+  const bytes: number[] = []
+  const encoder = new TextEncoder()
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index] ?? ''
+    const hex = value.slice(index + 1, index + 3)
+    if (char === '=' && HEX_PAIR.test(hex)) {
+      bytes.push(Number.parseInt(hex, 16))
+      index += 2
+      continue
+    }
+    if (char === '=') continue
+    bytes.push(...encoder.encode(char))
+  }
+  return Uint8Array.from(bytes)
+}
+
+/** 논리 줄 하나 → 속성. 꼴이 틀리면 null */
+function parseProperty(line: string): VCardProperty | null {
+  const colon = indexOutsideQuotes(line, ':')
+  if (colon <= 0) return null
+  const [head = '', ...paramParts] = splitOutsideQuotes(line.slice(0, colon), ';')
+  const dot = head.lastIndexOf('.')
+  const group = dot > 0 ? head.slice(0, dot) : null
+  const name = (dot > 0 ? head.slice(dot + 1) : head).trim().toUpperCase()
+  if (name === '') return null
+  const params = new Map<string, string[]>()
+  // 있던 목록에 더한다 — 매번 새 배열로 베끼면 매개변수 수의 제곱이다
+  const add = (key: string, values: readonly string[]) => {
+    const list = params.get(key)
+    if (list) for (const value of values) list.push(value)
+    else params.set(key, [...values])
+  }
+  for (const part of paramParts) {
+    const equals = part.indexOf('=')
+    if (equals < 0) {
+      const bare = part.trim().toUpperCase()
+      if (BARE_ENCODINGS.has(bare)) add('ENCODING', [bare])
+      else if (bare !== '') add('TYPE', [bare])
+      continue
+    }
+    const key = part.slice(0, equals).trim().toUpperCase()
+    // TYPE=WORK,VOICE · TYPE="work,voice"(4.0) 모두 낱낱이
+    const values = splitOutsideQuotes(part.slice(equals + 1), ',')
+      .flatMap((value) => unquote(value.trim()).split(','))
+      .map((value) => value.trim())
+      .filter((value) => value !== '')
+    add(key, key === 'TYPE' ? values.map((value) => value.toUpperCase()) : values)
+  }
+  let value = line.slice(colon + 1)
+  const encoding = (params.get('ENCODING') ?? []).map((item) => item.toUpperCase())
+  if (encoding.includes('QUOTED-PRINTABLE')) {
+    value = decodeWithCharset(decodeQuotedPrintable(value), params.get('CHARSET')?.[0] ?? null)
+  }
+  return { group, name, params, value }
+}
+
+// ── 값 ────────────────────────────────────────────────
+
+/** 이스케이프 밖의 구분자로 나눈다 (이스케이프는 그대로 둔다 — unescapeValue 가 푼다) */
+function splitEscaped(value: string, separator: ';' | ','): string[] {
+  const parts: string[] = []
+  let current = ''
+  for (let index = 0; index < value.length; index += 1) {
+    const char = value[index] ?? ''
+    if (char === '\\' && index + 1 < value.length) {
+      current += char + (value[index + 1] ?? '')
+      index += 1
+      continue
+    }
+    if (char === separator) {
+      parts.push(current)
+      current = ''
+      continue
+    }
+    current += char
+  }
+  parts.push(current)
+  return parts
+}
+
+function unescapeValue(value: string): string {
+  return value.replace(/\\([nN,;:\\])/g, (_match, char: string) => (char === 'n' || char === 'N' ? '\n' : char))
+}
+
+function textOf(property: VCardProperty): string {
+  return unescapeValue(property.value)
+}
+
+function structured(property: VCardProperty): string[] {
+  return splitEscaped(property.value, ';').map(unescapeValue)
+}
+
+function listOf(property: VCardProperty): string[] {
+  return splitEscaped(property.value, ',')
+    .map((part) => unescapeValue(part).trim())
+    .filter((part) => part !== '')
+}
+
+function typesOf(property: VCardProperty): string[] {
+  return property.params.get('TYPE') ?? []
+}
+
+/** 묶음의 아이폰 라벨 — "_$!<Mobile>!$_" 는 "Mobile", 사용자가 지은 라벨은 그대로 */
+function appleLabel(labels: ReadonlyMap<string, string>, property: VCardProperty): string {
+  const label = property.group ? (labels.get(property.group.toUpperCase()) ?? '') : ''
+  return APPLE_LABEL.exec(label)?.[1] ?? label
+}
+
+function emailLabelOf(property: VCardProperty, labels: ReadonlyMap<string, string>): ContactEmailLabel {
+  const types = typesOf(property)
+  if (types.includes('WORK')) return 'work'
+  if (types.includes('HOME')) return 'personal'
+  const label = appleLabel(labels, property).toLowerCase()
+  if (/(work|회사|직장)/.test(label)) return 'work'
+  if (/(home|개인|집)/.test(label)) return 'personal'
+  return 'other'
+}
+
+function phoneLabelOf(property: VCardProperty, labels: ReadonlyMap<string, string>): ContactPhoneLabel {
+  const types = typesOf(property)
+  if (types.some((type) => type === 'FAX' || type === 'PAGER')) return 'other'
+  if (types.some((type) => type === 'CELL' || type === 'MOBILE' || type === 'IPHONE')) return 'mobile'
+  if (types.includes('WORK')) return 'work'
+  if (types.includes('HOME')) return 'home'
+  return phoneLabelOfText(appleLabel(labels, property))
+}
+
+function addressKindOf(property: VCardProperty, labels: ReadonlyMap<string, string>): ImportedInfoKind {
+  const types = typesOf(property)
+  if (types.includes('WORK')) return 'workAddress'
+  if (types.includes('HOME')) return 'homeAddress'
+  const label = appleLabel(labels, property).toLowerCase()
+  if (/(work|회사|직장)/.test(label)) return 'workAddress'
+  if (/(home|집)/.test(label)) return 'homeAddress'
+  if (/(other|기타)/.test(label)) return 'otherAddress'
+  return 'address'
+}
+
+/** 기념일 이름 — 아이폰 라벨이 "Anniversary" 가 아니면 그 이름을 앞에 */
+function anniversaryOf(property: VCardProperty, labels: ReadonlyMap<string, string>): string | null {
+  const date = formatImportedDate(textOf(property))
+  if (!date) return null
+  const label = cleanText(appleLabel(labels, property))
+  return label && !/anniversary/i.test(label) ? `${label} ${date}` : date
+}
+
+// ── 연락처 하나 ──────────────────────────────────────────
+
+function recordOf(position: number, properties: readonly VCardProperty[]): ImportedRecord {
+  const record = emptyImportedRecord(position)
+  const labels = new Map<string, string>()
+  for (const property of properties) {
+    if (property.name === 'X-ABLABEL' && property.group) labels.set(property.group.toUpperCase(), textOf(property).trim())
+  }
+  let formatted: string | null = null
+  let parts: string[] | null = null
+  const notes: string[] = []
+  for (const property of properties) {
+    switch (property.name) {
+      case 'FN':
+        formatted ??= cleanText(textOf(property))
+        break
+      case 'N':
+        parts ??= structured(property)
+        break
+      case 'NICKNAME':
+        for (const nickname of listOf(property)) record.info.push({ kind: 'nickname', value: nickname })
+        break
+      case 'EMAIL': {
+        const address = textOf(property).trim().replace(/^mailto:/i, '')
+        if (address) record.emails.push({ address, label: emailLabelOf(property, labels) })
+        break
+      }
+      case 'TEL': {
+        const number = normalizePhone(textOf(property))
+        if (number) record.phones.push({ number, label: phoneLabelOf(property, labels) })
+        break
+      }
+      case 'ORG': {
+        const [company = '', department = ''] = structured(property)
+        record.company ??= cleanText(company)
+        record.department ??= cleanText(department)
+        break
+      }
+      case 'TITLE':
+        record.title ??= cleanText(textOf(property))
+        break
+      case 'NOTE':
+        if (textOf(property).trim()) notes.push(textOf(property).trim())
+        break
+      case 'CATEGORIES':
+        // 펼쳐 넘기지 않는다(push(...) 는 인자 수 한도 — 이름이 수십만 개면 RangeError)
+        for (const name of listOf(property)) record.groups.push(name)
+        break
+      case 'ADR': {
+        const [pobox = '', extended = '', street = '', city = '', region = '', postal = '', country = ''] = structured(property)
+        const value = formatAddress({ ...emptyAddressParts(), pobox, extended, street, city, region, postal, country })
+        if (value) record.info.push({ kind: addressKindOf(property, labels), value })
+        break
+      }
+      case 'BDAY': {
+        const value = formatImportedDate(textOf(property))
+        if (value) record.info.push({ kind: 'birthday', value })
+        break
+      }
+      case 'ANNIVERSARY':
+      case 'X-ANNIVERSARY':
+      case 'X-ABDATE': {
+        const value = anniversaryOf(property, labels)
+        if (value) record.info.push({ kind: 'anniversary', value })
+        break
+      }
+      case 'URL': {
+        const value = cleanText(textOf(property))
+        if (value) record.info.push({ kind: 'homepage', value })
+        break
+      }
+      case 'IMPP': {
+        const value = cleanText(textOf(property))
+        if (value) record.info.push({ kind: 'messenger', value })
+        break
+      }
+      default: {
+        const service = MESSENGER_PROPERTIES[property.name]
+        const value = service ? cleanText(textOf(property)) : null
+        if (service && value) record.info.push({ kind: 'messenger', value: `${service} ${value}` })
+      }
+    }
+  }
+  const [family = '', given = '', middle = ''] = parts ?? []
+  record.name = formatted ?? composeName(family, given, middle)
+  record.note = notes.length > 0 ? notes.join('\n') : null
+  return record
+}
+
+/** vCard 글 → 연락처들 (BEGIN:VCARD 마다 하나 — 안에 든 vCard(2.1 AGENT)는 건너뛴다) */
+export function parseVCards(text: string): ImportedRecord[] {
+  const records: ImportedRecord[] = []
+  let depth = 0
+  let position = 0
+  let properties: VCardProperty[] = []
+  for (const line of unfoldVCardLines(text)) {
+    const trimmed = line.trim()
+    if (BEGIN.test(trimmed)) {
+      depth += 1
+      if (depth === 1) {
+        position += 1
+        properties = []
+      }
+      continue
+    }
+    if (END.test(trimmed)) {
+      if (depth === 1) records.push(recordOf(position, properties))
+      depth = Math.max(0, depth - 1)
+      continue
+    }
+    if (depth !== 1) continue
+    const property = parseProperty(line)
+    if (property) properties.push(property)
+  }
+  return records
+}
+
+/** 글이 vCard 인가 — 빈 줄을 빼고 첫 줄이 BEGIN:VCARD */
+export function looksLikeVCard(text: string): boolean {
+  const first = text.split(/\r\n|\r|\n/).find((line) => line.trim() !== '')
+  return first !== undefined && BEGIN.test(first.trim())
+}
diff --git a/frontend/src/shared/utils/contact-import/xlsx.spec.ts b/frontend/src/shared/utils/contact-import/xlsx.spec.ts
new file mode 100644
index 0000000..3fcd2fd
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/xlsx.spec.ts
@@ -0,0 +1,107 @@
+import { describe, expect, it } from 'vitest'
+
+import { CONTACT_IMPORT_XLSX_CELLS_MAX } from '@/shared/constants/contacts'
+import { buildXlsx, buildZip } from '@/test-utils/zip'
+import { NotSpreadsheetError, readXlsxRows } from './xlsx'
+import { readZipDirectory, readZipEntry, ZipFormatError, ZipLimitError } from './zip'
+
+// 엑셀(.xlsx) 읽기 — zip 가운데 목록 → DecompressionStream('deflate-raw') → DOMParser (16단계 가져오기 · 새 의존성 없음)
+// 표본은 시험 안에서 만든 작은 xlsx 다 (test-utils/zip.ts)
+
+describe('zip', () => {
+  it('가운데 목록으로 항목을 찾고 deflate · 그대로 둔 항목을 푼다', async () => {
+    const bytes = await buildZip([
+      { name: 'a.txt', data: '가나다'.repeat(100) },
+      { name: 'b.txt', data: 'stored', method: 'store' },
+    ])
+    const entries = readZipDirectory(bytes)
+    expect([...entries.keys()]).toEqual(['a.txt', 'b.txt'])
+    const decoder = new TextDecoder()
+    expect(decoder.decode(await readZipEntry(bytes, entries.get('a.txt')!, 10_000))).toBe('가나다'.repeat(100))
+    expect(decoder.decode(await readZipEntry(bytes, entries.get('b.txt')!, 10_000))).toBe('stored')
+  })
+
+  it('푼 크기가 상한을 넘으면 그 순간 멈춘다 — 목록에 적힌 크기를 믿지 않는다(압축 폭탄)', async () => {
+    const bytes = await buildZip([{ name: 'bomb.xml', data: '0'.repeat(200_000) }])
+    const entry = readZipDirectory(bytes).get('bomb.xml')!
+    await expect(readZipEntry(bytes, { ...entry, size: 10 }, 50_000)).rejects.toBeInstanceOf(ZipLimitError)
+  })
+
+  it('암호를 건 항목 · 꼴이 틀린 zip 은 읽지 않는다', async () => {
+    const encrypted = await buildZip([{ name: 'x.xml', data: '<a/>', encrypted: true }])
+    expect(() => readZipDirectory(encrypted)).toThrow(ZipFormatError)
+    expect(() => readZipDirectory(Uint8Array.from([0x50, 0x4b, 0x03, 0x04, 0, 0]))).toThrow(ZipFormatError)
+  })
+})
+
+describe('readXlsxRows', () => {
+  it('칸 안 문자열(네이버 내보내기) — 줄 번호 · 빈 칸 자리를 맞춘다', async () => {
+    const bytes = await buildXlsx([
+      ['성', '이름', '이메일', '메모'],
+      ['강', '민지', 'minji.kang@example.com', ''],
+      ['박', '', 'jihoon@example.com', '줄바꿈이\n있는 메모'],
+    ])
+    expect(await readXlsxRows(bytes)).toEqual([
+      { position: 1, cells: ['성', '이름', '이메일', '메모'] },
+      { position: 2, cells: ['강', '민지', 'minji.kang@example.com'] },
+      { position: 3, cells: ['박', '', 'jihoon@example.com', '줄바꿈이\n있는 메모'] },
+    ])
+  })
+
+  it('공유 문자열(엑셀이 저장한 파일)과 시트 파일 이름을 workbook 관계로 찾는다', async () => {
+    const bytes = await buildXlsx(
+      [
+        ['Name', 'E-mail'],
+        ['Kim & Lee <Co>', 'kim@example.com'],
+      ],
+      { strings: 'shared', sheetFile: 'contacts.xml' },
+    )
+    expect(await readXlsxRows(bytes)).toEqual([
+      { position: 1, cells: ['Name', 'E-mail'] },
+      { position: 2, cells: ['Kim & Lee <Co>', 'kim@example.com'] },
+    ])
+  })
+
+  it('xl/workbook.xml 이 없는 zip 은 엑셀이 아니다', async () => {
+    const bytes = await buildZip([{ name: 'word/document.xml', data: '<w:document/>' }])
+    await expect(readXlsxRows(bytes)).rejects.toBeInstanceOf(NotSpreadsheetError)
+  })
+
+  it('DOCTYPE 이 든 XML 은 읽지 않는다 (엔티티 부풀리기)', async () => {
+    const bytes = await buildZip([
+      { name: 'xl/workbook.xml', data: '<!DOCTYPE x [<!ENTITY a "aaaa">]><workbook/>' },
+    ])
+    await expect(readXlsxRows(bytes)).rejects.toBeInstanceOf(ZipFormatError)
+  })
+
+  /** 시트 XML 을 손으로 쓴 작은 xlsx — 관계 파일이 없으면 xl/worksheets 의 첫 시트를 읽는다 */
+  function sheetOnly(rowsXml: string): Promise<Uint8Array> {
+    return buildZip([
+      { name: 'xl/workbook.xml', data: '<workbook><sheets><sheet name="a" sheetId="1"/></sheets></workbook>' },
+      { name: 'xl/worksheets/sheet1.xml', data: `<worksheet><sheetData>${rowsXml}</sheetData></worksheet>` },
+    ])
+  }
+
+  const inline = (ref: string, text: string) => `<c r="${ref}" t="inlineStr"><is><t>${text}</t></is></c>`
+
+  it('열은 XFD(16,384번째)까지 — 넘는 칸(XFE · 글자가 긴 열)은 버리고, 끝에 붙는 빈 칸은 늘어놓지 않는다', async () => {
+    const bytes = await sheetOnly(
+      `<row r="1">${inline('A1', '이름')}${inline('XFD1', '끝')}${inline('XFE1', '넘침')}${inline(`${'Z'.repeat(40)}1`, '넘침')}</row>` +
+        `<row r="2">${inline('A2', '강민지')}<c r="B2" s="3"/><c r="Z2" s="3"/></row>` +
+        '<row r="3"><c r="A3" s="3"/><c r="XFD3" s="3"/></row>',
+    )
+    const [first, second, third] = await readXlsxRows(bytes)
+    expect(first?.cells).toHaveLength(16_384)
+    expect(first?.cells[0]).toBe('이름')
+    expect(first?.cells[16_383]).toBe('끝')
+    expect(second).toEqual({ position: 2, cells: ['강민지'] })
+    expect(third).toEqual({ position: 3, cells: [] })
+  })
+
+  it('늘어놓는 칸 수의 합에 상한 — 먼 열에 칸 하나씩 둔 줄이 많으면 열지 않는다', async () => {
+    // 줄마다 16,384칸 — 상한을 넘는 만큼의 줄
+    const count = Math.ceil(CONTACT_IMPORT_XLSX_CELLS_MAX / 16_384) + 1
+    const rows = Array.from({ length: count }, (_, index) => `<row r="${index + 1}">${inline(`XFD${index + 1}`, 'x')}</row>`)
+    await expect(readXlsxRows(await sheetOnly(rows.join('')))).rejects.toBeInstanceOf(ZipFormatError)
+  })
+})
diff --git a/frontend/src/shared/utils/contact-import/xlsx.ts b/frontend/src/shared/utils/contact-import/xlsx.ts
new file mode 100644
index 0000000..b649dc5
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/xlsx.ts
@@ -0,0 +1,185 @@
+// 엑셀(.xlsx) 읽기 — 첫 시트의 줄을 글로 꺼낸다 (16단계 가져오기 · 새 의존성 없음)
+// .xlsx 는 zip 안의 XML 이다: xl/workbook.xml 의 첫 <sheet>(탭 차례) → xl/_rels/workbook.xml.rels 로 그 시트 파일 →
+// 칸의 글은 공유 문자열(xl/sharedStrings.xml — t="s"), 칸 안 문자열(t="inlineStr" — 네이버 내보내기), 그 밖은 <v> 값 그대로.
+// XML 은 브라우저의 DOMParser 로 읽는다. DOCTYPE · ENTITY 가 든 XML 은 읽지 않는다(엔티티 부풀리기 — 엑셀은 쓰지 않는다)
+// 칸 자리는 칸의 r 속성(B2 — 빈 칸은 빠져 있다)으로 맞추고, 줄 번호는 줄의 r 속성(엑셀에서 보이는 행 번호)이다.
+// 열은 XFD(16,384번째)까지만 읽고, 늘어놓는 칸 수의 합에 상한을 둔다(CONTACT_IMPORT_XLSX_CELLS_MAX — 넘으면 열지 않는다)
+
+import {
+  CONTACT_IMPORT_XLSX_CELLS_MAX,
+  CONTACT_IMPORT_XLSX_ENTRY_MAX_BYTES,
+  CONTACT_IMPORT_XLSX_TOTAL_MAX_BYTES,
+} from '@/shared/constants/contacts'
+import type { TableRow } from './types'
+import { readZipDirectory, readZipEntry, ZipFormatError, type ZipEntry } from './zip'
+
+/** 엑셀 파일이 아니다 — zip 이지만 xl/workbook.xml 이 없다 (워드 · 그냥 zip 등) */
+export class NotSpreadsheetError extends Error {
+  constructor() {
+    super('엑셀 파일이 아닙니다')
+    this.name = 'NotSpreadsheetError'
+  }
+}
+
+const WORKBOOK_PATH = 'xl/workbook.xml'
+const WORKBOOK_RELS_PATH = 'xl/_rels/workbook.xml.rels'
+const SHARED_STRINGS_PATH = 'xl/sharedStrings.xml'
+const RELATIONSHIPS_NS = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships'
+const SHARED_STRINGS_TYPE = /\/sharedStrings$/
+const SHEET_PATH = /^xl\/worksheets\/[^/]+\.xml$/
+const UNSAFE_XML = /<!DOCTYPE|<!ENTITY/i
+/** 칸 자리 "AB12" — 열 글자 */
+const CELL_COLUMN = /^([A-Za-z]+)/
+const ALPHABET_SIZE = 26
+const CHAR_CODE_A = 64
+/** 엑셀의 열은 XFD(16,384번째)까지 — 넘는 칸은 버린다. 상한이 없으면 r="ZZZZZZZ1" 하나로 빈 칸 채우기가 끝나지 않는다 */
+const MAX_COLUMNS = 16_384
+/** 열 글자는 세 자(XFD)까지 */
+const MAX_COLUMN_LETTERS = 3
+
+/** 풀어 읽은 XML 의 크기 합 — 압축 폭탄을 막는다 */
+interface ReadBudget {
+  used: number
+}
+
+async function readXml(
+  bytes: Uint8Array,
+  entries: Map<string, ZipEntry>,
+  path: string,
+  budget: ReadBudget,
+): Promise<Document | null> {
+  const entry = entries.get(path)
+  if (!entry) return null
+  const limit = Math.min(CONTACT_IMPORT_XLSX_ENTRY_MAX_BYTES, CONTACT_IMPORT_XLSX_TOTAL_MAX_BYTES - budget.used)
+  const data = await readZipEntry(bytes, entry, limit)
+  budget.used += data.byteLength
+  const text = new TextDecoder('utf-8').decode(data)
+  if (UNSAFE_XML.test(text)) throw new ZipFormatError('DOCTYPE 이 든 XML')
+  const doc = new DOMParser().parseFromString(text, 'application/xml')
+  if (doc.getElementsByTagName('parsererror').length > 0) throw new ZipFormatError('XML 을 읽지 못했습니다')
+  return doc
+}
+
+/** 이름(localName)으로 찾는다 — 엑셀 · 다른 프로그램이 접두어(x:)를 붙여도 */
+function elementsNamed(root: Document | Element, localName: string): Element[] {
+  return Array.from(root.getElementsByTagNameNS('*', localName))
+}
+
+function childrenNamed(parent: Element, localName: string): Element[] {
+  return Array.from(parent.children).filter((child) => child.localName === localName)
+}
+
+/** <si> · <is> 안의 글 — 글 조각(<t>)을 잇는다. 읽는 법 조각(<rPh> — 일본어 후리가나)은 뺀다 */
+function richText(element: Element): string {
+  let text = ''
+  for (const t of elementsNamed(element, 't')) {
+    if (t.parentElement?.localName === 'rPh') continue
+    text += t.textContent ?? ''
+  }
+  return text
+}
+
+/** 상대 경로("worksheets/sheet1.xml") · 절대 경로("/xl/worksheets/sheet1.xml")를 zip 안 이름으로 */
+function resolveTarget(target: string): string {
+  if (target.startsWith('/')) return target.slice(1)
+  const parts = ['xl', ...target.split('/')]
+  const resolved: string[] = []
+  for (const part of parts) {
+    if (part === '' || part === '.') continue
+    if (part === '..') resolved.pop()
+    else resolved.push(part)
+  }
+  return resolved.join('/')
+}
+
+interface WorkbookParts {
+  sheetPath: string | null
+  sharedStringsPath: string | null
+}
+
+async function workbookParts(
+  bytes: Uint8Array,
+  entries: Map<string, ZipEntry>,
+  budget: ReadBudget,
+): Promise<WorkbookParts> {
+  const workbook = await readXml(bytes, entries, WORKBOOK_PATH, budget)
+  if (!workbook) throw new NotSpreadsheetError()
+  const rels = await readXml(bytes, entries, WORKBOOK_RELS_PATH, budget)
+  const targets = new Map<string, { type: string; target: string }>()
+  for (const relationship of rels ? elementsNamed(rels, 'Relationship') : []) {
+    const id = relationship.getAttribute('Id')
+    const target = relationship.getAttribute('Target')
+    if (id && target) targets.set(id, { type: relationship.getAttribute('Type') ?? '', target })
+  }
+  const firstSheet = elementsNamed(workbook, 'sheet')[0]
+  const relationId = firstSheet?.getAttributeNS(RELATIONSHIPS_NS, 'id') ?? firstSheet?.getAttribute('r:id') ?? null
+  const sheetTarget = relationId ? targets.get(relationId)?.target : undefined
+  const fallbackSheet = [...entries.keys()].filter((name) => SHEET_PATH.test(name)).sort()[0] ?? null
+  const sharedTarget = [...targets.values()].find((relation) => SHARED_STRINGS_TYPE.test(relation.type))?.target
+  return {
+    sheetPath: sheetTarget ? resolveTarget(sheetTarget) : fallbackSheet,
+    sharedStringsPath: sharedTarget ? resolveTarget(sharedTarget) : SHARED_STRINGS_PATH,
+  }
+}
+
+/** "AB" → 27 (0 부터). 세 자를 넘는 열(XFD 뒤)은 MAX_COLUMNS — 버릴 칸 */
+function columnIndexOf(reference: string | null): number | null {
+  const letters = reference ? CELL_COLUMN.exec(reference)?.[1] : undefined
+  if (!letters) return null
+  if (letters.length > MAX_COLUMN_LETTERS) return MAX_COLUMNS
+  let index = 0
+  for (const letter of letters.toUpperCase()) {
+    index = index * ALPHABET_SIZE + (letter.charCodeAt(0) - CHAR_CODE_A)
+  }
+  return index - 1
+}
+
+function cellText(cell: Element, sharedStrings: readonly string[]): string {
+  const type = cell.getAttribute('t')
+  if (type === 'inlineStr') {
+    const inline = childrenNamed(cell, 'is')[0]
+    return inline ? richText(inline) : ''
+  }
+  const value = childrenNamed(cell, 'v')[0]?.textContent ?? ''
+  if (type === 's') return sharedStrings[Number(value)] ?? ''
+  if (type === 'b') return value === '1' ? 'TRUE' : value === '0' ? 'FALSE' : value
+  if (type === 'e') return ''
+  return value
+}
+
+/** 첫 시트의 줄 — 줄마다 칸 글(빈 칸은 ''). 빈 줄은 빠진다(엑셀 XML 에 없다) */
+export async function readXlsxRows(bytes: Uint8Array): Promise<TableRow[]> {
+  const entries = readZipDirectory(bytes)
+  const budget: ReadBudget = { used: 0 }
+  const parts = await workbookParts(bytes, entries, budget)
+  if (!parts.sheetPath) return []
+  const shared = parts.sharedStringsPath ? await readXml(bytes, entries, parts.sharedStringsPath, budget) : null
+  const sharedStrings = shared ? elementsNamed(shared, 'si').map(richText) : []
+  const sheet = await readXml(bytes, entries, parts.sheetPath, budget)
+  if (!sheet) return []
+
+  const rows: TableRow[] = []
+  let previousRow = 0
+  let totalCells = 0
+  for (const row of elementsNamed(sheet, 'row')) {
+    const declared = Number(row.getAttribute('r'))
+    const position = Number.isInteger(declared) && declared > previousRow ? declared : previousRow + 1
+    previousRow = position
+    const cells: string[] = []
+    let nextColumn = 0
+    for (const cell of childrenNamed(row, 'c')) {
+      const column = columnIndexOf(cell.getAttribute('r')) ?? nextColumn
+      nextColumn = column + 1
+      if (column >= MAX_COLUMNS) continue
+      const text = cellText(cell, sharedStrings)
+      // 끝에 붙는 빈 칸은 늘어놓지 않는다 — 없는 칸도 빈 글로 읽으니 같은 값이다(서식만 건 빈 칸이 줄마다 있어도 부풀지 않게)
+      if (text === '' && column >= cells.length) continue
+      while (cells.length < column) cells.push('')
+      cells[column] = text
+    }
+    totalCells += cells.length
+    if (totalCells > CONTACT_IMPORT_XLSX_CELLS_MAX) throw new ZipFormatError('칸이 너무 많은 시트')
+    rows.push({ position, cells })
+  }
+  return rows
+}
diff --git a/frontend/src/shared/utils/contact-import/zip.ts b/frontend/src/shared/utils/contact-import/zip.ts
new file mode 100644
index 0000000..baec492
--- /dev/null
+++ b/frontend/src/shared/utils/contact-import/zip.ts
@@ -0,0 +1,167 @@
+// zip 읽기 — 엑셀(.xlsx) 안의 XML 을 꺼낸다 (16단계 가져오기 · 새 의존성 없음)
+// 끝의 가운데 목록(central directory)으로 파일 자리 · 크기 · 압축 방식을 읽고, deflate 는 브라우저의 DecompressionStream('deflate-raw')로 푼다.
+// 압축 폭탄을 막는다 — 푼 크기가 상한을 넘는 순간 읽기를 멈추고 ZipLimitError (목록의 크기는 꾸밀 수 있어 믿지 않는다).
+// 받지 않는 것: 암호를 건 항목 · ZIP64(4GB 넘는 파일 — 20MB 파일에는 없다) · deflate 밖의 압축 → ZipFormatError
+
+/** 꼴이 틀렸거나 읽지 않는 zip */
+export class ZipFormatError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'ZipFormatError'
+  }
+}
+
+/** 풀었더니 상한보다 크다 */
+export class ZipLimitError extends Error {
+  constructor() {
+    super('압축을 푼 크기가 상한을 넘었습니다')
+    this.name = 'ZipLimitError'
+  }
+}
+
+export interface ZipEntry {
+  name: string
+  /** 0 그대로 · 8 deflate */
+  method: number
+  compressedSize: number
+  /** 목록에 적힌 푼 크기 — 꾸밀 수 있어 상한 판단에는 쓰지 않는다 */
+  size: number
+  /** 이 항목의 머리(local file header) 자리 */
+  offset: number
+}
+
+const LOCAL_HEADER_SIGNATURE = 0x04034b50
+const CENTRAL_HEADER_SIGNATURE = 0x02014b50
+const END_SIGNATURE = 0x06054b50
+const END_RECORD_SIZE = 22
+/** 끝 기록 뒤의 설명 글 최대 길이 */
+const MAX_COMMENT_LENGTH = 0xffff
+const LOCAL_HEADER_SIZE = 30
+const CENTRAL_HEADER_SIZE = 46
+const ZIP64_MARKER = 0xffffffff
+const ENCRYPTED_FLAG = 0x1
+const METHOD_STORED = 0
+const METHOD_DEFLATE = 8
+
+/** zip 의 처음 네 바이트 "PK\x03\x04" — 빈 zip 은 "PK\x05\x06" */
+export function isZip(bytes: Uint8Array): boolean {
+  return (
+    bytes.length >= 4 &&
+    bytes[0] === 0x50 &&
+    bytes[1] === 0x4b &&
+    ((bytes[2] === 0x03 && bytes[3] === 0x04) || (bytes[2] === 0x05 && bytes[3] === 0x06))
+  )
+}
+
+function viewOf(bytes: Uint8Array): DataView {
+  return new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength)
+}
+
+function findEndRecord(view: DataView): number {
+  const last = view.byteLength - END_RECORD_SIZE
+  const first = Math.max(0, last - MAX_COMMENT_LENGTH)
+  for (let offset = last; offset >= first; offset -= 1) {
+    if (view.getUint32(offset, true) === END_SIGNATURE) return offset
+  }
+  throw new ZipFormatError('zip 끝 기록이 없습니다')
+}
+
+/** 가운데 목록 — 이름 → 항목 */
+export function readZipDirectory(bytes: Uint8Array): Map<string, ZipEntry> {
+  if (bytes.length < END_RECORD_SIZE) throw new ZipFormatError('zip 이 너무 짧습니다')
+  const view = viewOf(bytes)
+  const end = findEndRecord(view)
+  const count = view.getUint16(end + 10, true)
+  const directorySize = view.getUint32(end + 12, true)
+  const directoryOffset = view.getUint32(end + 16, true)
+  if (directorySize === ZIP64_MARKER || directoryOffset === ZIP64_MARKER) throw new ZipFormatError('ZIP64')
+  if (directoryOffset + directorySize > bytes.length) throw new ZipFormatError('가운데 목록이 파일 밖입니다')
+
+  const decoder = new TextDecoder('utf-8')
+  const entries = new Map<string, ZipEntry>()
+  let offset = directoryOffset
+  for (let index = 0; index < count; index += 1) {
+    if (offset + CENTRAL_HEADER_SIZE > bytes.length || view.getUint32(offset, true) !== CENTRAL_HEADER_SIGNATURE) {
+      throw new ZipFormatError('가운데 목록 항목이 틀렸습니다')
+    }
+    const flags = view.getUint16(offset + 8, true)
+    const method = view.getUint16(offset + 10, true)
+    const compressedSize = view.getUint32(offset + 20, true)
+    const size = view.getUint32(offset + 24, true)
+    const nameLength = view.getUint16(offset + 28, true)
+    const extraLength = view.getUint16(offset + 30, true)
+    const commentLength = view.getUint16(offset + 32, true)
+    const localOffset = view.getUint32(offset + 42, true)
+    const nameStart = offset + CENTRAL_HEADER_SIZE
+    const name = decoder.decode(bytes.subarray(nameStart, nameStart + nameLength))
+    if ((flags & ENCRYPTED_FLAG) !== 0) throw new ZipFormatError('암호를 건 항목')
+    if (compressedSize === ZIP64_MARKER || size === ZIP64_MARKER || localOffset === ZIP64_MARKER) {
+      throw new ZipFormatError('ZIP64')
+    }
+    entries.set(name, { name, method, compressedSize, size, offset: localOffset })
+    offset = nameStart + nameLength + extraLength + commentLength
+  }
+  return entries
+}
+
+function concatChunks(chunks: readonly Uint8Array[], total: number): Uint8Array {
+  const result = new Uint8Array(total)
+  let at = 0
+  for (const chunk of chunks) {
+    result.set(chunk, at)
+    at += chunk.byteLength
+  }
+  return result
+}
+
+/** deflate 를 푼다 — 상한을 넘는 순간 멈춘다 */
+async function inflateRaw(data: Uint8Array, maxBytes: number): Promise<Uint8Array> {
+  const stream = new DecompressionStream('deflate-raw')
+  const writer = stream.writable.getWriter()
+  // 쓰기와 읽기를 함께 한다 — 쓰기만 기다리면 읽지 않은 출력이 쌓여 멈춘다. 쓰기의 실패(읽기를 그만둠 · 꼴이 틀림)는 읽기 쪽이 알린다.
+  // 넘기는 바이트는 따로 떼어 낸 사본이다(slice) — 스트림이 파일 전체의 버퍼를 붙잡지 않게
+  const writing = writer
+    .write(data.slice())
+    .then(() => writer.close())
+    .catch(() => undefined)
+  const reader = stream.readable.getReader()
+  const chunks: Uint8Array[] = []
+  let total = 0
+  try {
+    for (;;) {
+      const { done, value } = await reader.read()
+      if (done) break
+      total += value.byteLength
+      if (total > maxBytes) {
+        await reader.cancel().catch(() => undefined)
+        throw new ZipLimitError()
+      }
+      chunks.push(value)
+    }
+  } catch (caught) {
+    if (caught instanceof ZipLimitError) throw caught
+    throw new ZipFormatError('압축을 풀지 못했습니다')
+  }
+  await writing
+  return concatChunks(chunks, total)
+}
+
+/** 항목 하나를 푼다 — maxBytes 를 넘으면 ZipLimitError */
+export async function readZipEntry(bytes: Uint8Array, entry: ZipEntry, maxBytes: number): Promise<Uint8Array> {
+  const view = viewOf(bytes)
+  if (entry.offset + LOCAL_HEADER_SIZE > bytes.length || view.getUint32(entry.offset, true) !== LOCAL_HEADER_SIGNATURE) {
+    throw new ZipFormatError('항목 머리가 틀렸습니다')
+  }
+  const nameLength = view.getUint16(entry.offset + 26, true)
+  const extraLength = view.getUint16(entry.offset + 28, true)
+  const start = entry.offset + LOCAL_HEADER_SIZE + nameLength + extraLength
+  const end = start + entry.compressedSize
+  if (end > bytes.length) throw new ZipFormatError('항목이 파일 밖입니다')
+  const data = bytes.subarray(start, end)
+  if (entry.method === METHOD_STORED) {
+    if (data.byteLength > maxBytes) throw new ZipLimitError()
+    return data
+  }
+  if (entry.method === METHOD_DEFLATE) return inflateRaw(data, maxBytes)
+  throw new ZipFormatError('읽지 않는 압축 방식')
+}
diff --git a/frontend/src/shared/utils/mail-forward.ts b/frontend/src/shared/utils/mail-forward.ts
index 9030ff4..cc84e0a 100644
--- a/frontend/src/shared/utils/mail-forward.ts
+++ b/frontend/src/shared/utils/mail-forward.ts
@@ -32,15 +32,15 @@ export function buildForwardSubject(subject: string): string {
   return `${MAIL_FORWARD_PREFIX}${trimmed}`.trimEnd()
 }
 
-/** 전달 초안 — 제목은 255자에 맞춘다. 서명(signatureHtml)이 있으면 인용 위에 넣는다 */
+/** 전달 초안 — 제목은 255자에 맞춘다. 서명 자리(signatureBlock — mail-signature.ts 의 signatureBlockHtml)가 있으면 인용 위에 넣는다 */
 export function buildForwardDraft(
   message: MessageDetail,
   timeZone?: string,
-  signatureHtml: string | null = null,
+  signatureBlock: string | null = null,
 ): ForwardDraft {
   return {
     subject: fitDraftSubject(buildForwardSubject(message.subject)),
-    html: buildQuoteHtml(forwardQuoteRows(message, timeZone), originalBodyHtml(message), signatureHtml),
+    html: buildQuoteHtml(forwardQuoteRows(message, timeZone), originalBodyHtml(message), signatureBlock),
     attachments: [...message.attachments],
   }
 }
diff --git a/frontend/src/shared/utils/mail-quote.ts b/frontend/src/shared/utils/mail-quote.ts
index cd074a2..6b09bfc 100644
--- a/frontend/src/shared/utils/mail-quote.ts
+++ b/frontend/src/shared/utils/mail-quote.ts
@@ -136,17 +136,18 @@ export function forwardQuoteRows(message: HeaderSource, timeZone?: string): Quot
 }
 
 /**
- * 내가 쓸 빈 문단 + (서명) + "원본 메일" 머리 + 원문을 담은 인용.
- * 서명이 있으면 인용 위에 둔다 — 쓸 줄 · 빈 줄 하나 · 서명 · 인용 (디자인 README "2단계 › 서명").
- * signatureHtml 은 서버가 정화해 준 서명 HTML 이다 (편집기가 자기 스키마로 다시 읽는다).
+ * 내가 쓸 빈 문단 + (서명 자리) + "원본 메일" 머리 + 원문을 담은 인용.
+ * 서명이 있으면 인용 위에 둔다 — 쓸 줄 · 빈 줄 하나 · 서명 자리 · 인용 (디자인 README "2단계 › 서명" · "16단계").
+ * signatureBlock 은 서명 자리로 감싼 서명이다 (mail-signature.ts 의 signatureBlockHtml — 안은 서버가 정화해 준 서명 HTML,
+ * 편집기가 자기 스키마로 다시 읽어 [서명 ▾] 가 바꿀 서명 자리로 둔다).
  */
-export function buildQuoteHtml(rows: readonly QuoteRow[], bodyHtml: string, signatureHtml: string | null = null): string {
+export function buildQuoteHtml(rows: readonly QuoteRow[], bodyHtml: string, signatureBlock: string | null = null): string {
   const header = rows
     .map((row) => `<tr><td>${escapeHtml(row.label)}</td><td>${escapeHtml(row.value)}</td></tr>`)
     .join('')
   return (
     '<p></p>' +
-    (signatureHtml ? `<p></p>${signatureHtml}` : '') +
+    (signatureBlock ? `<p></p>${signatureBlock}` : '') +
     '<blockquote data-mail-quote="">' +
     `<p data-quote-header=""><strong>${escapeHtml(MAIL_QUOTE_HEADING)}</strong></p>` +
     `<table data-quote-header=""><tbody>${header}</tbody></table>` +
diff --git a/frontend/src/shared/utils/mail-reply.ts b/frontend/src/shared/utils/mail-reply.ts
index bea15f6..b464bf3 100644
--- a/frontend/src/shared/utils/mail-reply.ts
+++ b/frontend/src/shared/utils/mail-reply.ts
@@ -83,20 +83,20 @@ export function buildReplyRecipients(
   return { to, cc }
 }
 
-/** 답장 초안 — 제목은 255자에 맞춘다. 서명(signatureHtml)이 있으면 인용 위에 넣는다 */
+/** 답장 초안 — 제목은 255자에 맞춘다. 서명 자리(signatureBlock — mail-signature.ts 의 signatureBlockHtml)가 있으면 인용 위에 넣는다 */
 export function buildReplyDraft(
   message: MessageDetail,
   myEmail: string,
   mode: ReplyMode,
   timeZone?: string,
-  signatureHtml: string | null = null,
+  signatureBlock: string | null = null,
 ): ReplyDraft {
   const { to, cc } = buildReplyRecipients(message, myEmail, mode)
   return {
     to,
     cc,
     subject: fitDraftSubject(buildReplySubject(message.subject)),
-    html: buildQuoteHtml(replyQuoteRows(message, timeZone), originalBodyHtml(message), signatureHtml),
+    html: buildQuoteHtml(replyQuoteRows(message, timeZone), originalBodyHtml(message), signatureBlock),
     inReplyTo: message.id,
   }
 }
diff --git a/frontend/src/shared/utils/mail-signature.spec.ts b/frontend/src/shared/utils/mail-signature.spec.ts
index 6790b6a..d93be33 100644
--- a/frontend/src/shared/utils/mail-signature.spec.ts
+++ b/frontend/src/shared/utils/mail-signature.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import type { MailSignature } from '@/shared/types/mail'
+import type { MailSignature } from '@/shared/types/mail-signature'
 import {
   imageSizeOf,
   imageWidthFor,
@@ -8,35 +8,91 @@ import {
   newMailHtmlWithSignature,
   originalImageWidth,
   precheckSignatureImage,
-  signatureHtmlFor,
+  sameSignatureDefaults,
+  signatureBlockHtml,
+  signatureDeleteMessage,
+  signatureHtmlOf,
   signatureImageUploadName,
+  signatureNameKey,
+  signatureNameProblem,
+  signatureUsesOf,
+  signatureUsesText,
+  withoutSignatureDefault,
 } from './mail-signature'
 
 const BASE: MailSignature = {
+  id: 's1',
+  name: '사내',
   bodyHtml: '<p>김아라</p>',
   body: '김아라',
-  isForNew: true,
-  isForReply: true,
   images: [],
   updatedAt: null,
 }
 
-describe('signatureHtmlFor — 쓰기 화면에 넣을 서명', () => {
-  it('넣기로 한 쓰기 종류에만, 서식 서명을 먼저', () => {
-    expect(signatureHtmlFor(BASE, 'new')).toBe('<p>김아라</p>')
-    expect(signatureHtmlFor({ ...BASE, isForNew: false }, 'new')).toBeNull()
-    expect(signatureHtmlFor({ ...BASE, isForReply: false }, 'reply')).toBeNull()
-    expect(signatureHtmlFor({ ...BASE, isForReply: false }, 'new')).toBe('<p>김아라</p>')
+describe('signatureHtmlOf — 쓰기 화면에 넣을 서명', () => {
+  it('서식 서명을 먼저, 없으면 텍스트 서명을 문단으로, 둘 다 비었거나 넣지 않음(null)이면 null', () => {
+    expect(signatureHtmlOf(BASE)).toBe('<p>김아라</p>')
+    expect(signatureHtmlOf({ ...BASE, bodyHtml: null, body: '김아라\n인프라팀\n' })).toBe('<p>김아라</p><p>인프라팀</p>')
+    expect(signatureHtmlOf({ ...BASE, bodyHtml: '  ', body: '  ' })).toBeNull()
+    expect(signatureHtmlOf(null)).toBeNull()
   })
 
-  it('서식 서명이 없으면 텍스트 서명을 문단으로, 둘 다 비었으면 넣지 않는다', () => {
-    expect(signatureHtmlFor({ ...BASE, bodyHtml: null, body: '김아라\n인프라팀\n' }, 'new')).toBe('<p>김아라</p><p>인프라팀</p>')
-    expect(signatureHtmlFor({ ...BASE, bodyHtml: '  ', body: '  ' }, 'new')).toBeNull()
-    expect(signatureHtmlFor(null, 'new')).toBeNull()
+  it('서명 자리 — 편집기가 알아보는 표시를 단 div, 새 메일은 쓸 줄 · 빈 줄 하나 뒤에', () => {
+    expect(signatureBlockHtml('<p>김아라</p>')).toBe('<div data-mail-signature=""><p>김아라</p></div>')
+    expect(newMailHtmlWithSignature('<p>김아라</p>')).toBe('<p></p><p></p><div data-mail-signature=""><p>김아라</p></div>')
+  })
+})
+
+describe('서명 이름 — 앞뒤 공백을 뺀 1~30자, 같은 이름은 영문 대소문자를 가리지 않는다', () => {
+  it('견줄 값은 앞뒤 공백을 빼고 영문만 작게 — 한글 · 다른 글자는 그대로', () => {
+    expect(signatureNameKey('  Sales Team ')).toBe('sales team')
+    expect(signatureNameKey('대외')).toBe('대외')
+    expect(signatureNameKey('ÄRA')).toBe('Ära')
   })
 
-  it('새 메일은 쓸 줄 · 빈 줄 하나 뒤에', () => {
-    expect(newMailHtmlWithSignature('<p>김아라</p>')).toBe('<p></p><p></p><p>김아라</p>')
+  it.each([
+    ['', 'empty'],
+    ['   ', 'empty'],
+    ['대외', 'duplicate'],
+    [' 대외 ', 'duplicate'],
+    ['ENGLISH', 'duplicate'],
+    ['영문', null],
+  ] as const)('%j → %s', (name, expected) => {
+    expect(signatureNameProblem(name, ['대외', 'English'])).toBe(expected)
+  })
+})
+
+describe('기본 둘 — 메일에 넣을 서명', () => {
+  const defaults = { newMessageId: 'out', replyId: 'in' }
+
+  it('그 서명을 기본으로 넣는 메일과 목록 줄의 회색 글', () => {
+    expect(signatureUsesOf('out', defaults)).toBe('new')
+    expect(signatureUsesOf('in', defaults)).toBe('reply')
+    expect(signatureUsesOf('en', defaults)).toBeNull()
+    expect(signatureUsesOf('in', { newMessageId: 'in', replyId: 'in' })).toBe('both')
+    expect(signatureUsesText('both')).toBe('새 메일, 답장과 전달')
+    expect(signatureUsesText('reply')).toBe('답장과 전달')
+    expect(signatureUsesText(null)).toBe('')
+  })
+
+  it('지운 서명을 기본으로 넣던 곳은 넣지 않음 — 다른 서명이 저절로 기본이 되지 않는다', () => {
+    expect(withoutSignatureDefault(defaults, 'out')).toEqual({ newMessageId: null, replyId: 'in' })
+    expect(withoutSignatureDefault({ newMessageId: 'in', replyId: 'in' }, 'in')).toEqual({ newMessageId: null, replyId: null })
+    expect(sameSignatureDefaults(defaults, { ...defaults })).toBe(true)
+    expect(sameSignatureDefaults(defaults, { ...defaults, replyId: null })).toBe(false)
+  })
+
+  it('지우기 확인 창의 글 — 기본으로 넣던 곳마다 (디자인 원본 Signature16 4)', () => {
+    expect(signatureDeleteMessage('new')).toBe(
+      '새 메일에 넣는 서명이라 지우면 앞으로 새 메일에는 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.',
+    )
+    expect(signatureDeleteMessage('reply')).toBe(
+      '답장과 전달에 넣는 서명이라 지우면 앞으로 답장과 전달에는 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.',
+    )
+    expect(signatureDeleteMessage('both')).toBe(
+      '새 메일에도, 답장과 전달에도 넣는 서명이라 지우면 앞으로 어느 메일에도 서명을 넣지 않습니다. 지운 서명은 되돌릴 수 없습니다.',
+    )
+    expect(signatureDeleteMessage(null)).toBe('지운 서명은 되돌릴 수 없습니다.')
   })
 })
 
diff --git a/frontend/src/shared/utils/mail-signature.ts b/frontend/src/shared/utils/mail-signature.ts
index 8342036..61cfdec 100644
--- a/frontend/src/shared/utils/mail-signature.ts
+++ b/frontend/src/shared/utils/mail-signature.ts
@@ -1,40 +1,97 @@
-// 메일 서명 — 순수 함수 (계약 2절 "서명" · 디자인 README "2단계 › 서명")
+// 메일 서명 — 순수 함수 (계약 2절 "서명" · 디자인 README "2단계 › 서명" · "16단계 — 여러 서명")
 
 import type { ErrorCode } from '@/shared/constants/error-codes.generated'
 import {
+  MAIL_SIGNATURE_MARK_ATTRIBUTE,
+  SIGNATURE_DELETE_TEXT,
   SIGNATURE_IMAGE_MAX_BYTES,
   SIGNATURE_IMAGE_MAX_COUNT,
   SIGNATURE_IMAGE_SIZES,
   SIGNATURE_IMAGE_TYPES_BY_EXTENSION,
+  SIGNATURE_USES_TEXT,
   type SignatureImageSize,
 } from '@/shared/constants/mail-signature'
-import type { MailSignature } from '@/shared/types/mail'
+import type { MailSignature, MailSignatureDefaults } from '@/shared/types/mail-signature'
 import { extensionOf } from '@/shared/utils/mail-attachment'
 import { textToParagraphHtml } from '@/shared/utils/mail-quote'
 import { IMAGE_MAX_WIDTH } from '@/shared/utils/outgoing-html-rules'
 
-export type SignatureUse = 'new' | 'reply'
-
 /** 받는 그림 MIME 형식 */
 const SIGNATURE_IMAGE_TYPES: readonly string[] = Object.values(SIGNATURE_IMAGE_TYPES_BY_EXTENSION)
 
 /**
- * 쓰기 화면에 넣을 서명 HTML — 그 쓰기 종류에 넣기로 했고(isForNew · isForReply) 내용이 있을 때만.
- * 서식 서명(bodyHtml)이 있으면 그것, 없으면 텍스트 서명(body)을 문단으로. 둘 다 비었으면 null.
+ * 쓰기 화면에 넣을 서명 HTML — 서식 서명(bodyHtml)이 있으면 그것, 없으면 텍스트 서명(body)을 문단으로.
+ * 서명이 없거나(넣지 않음) 둘 다 비었으면 null.
  */
-export function signatureHtmlFor(signature: MailSignature | null, use: SignatureUse): string | null {
+export function signatureHtmlOf(signature: MailSignature | null): string | null {
   if (!signature) return null
-  const enabled = use === 'new' ? signature.isForNew : signature.isForReply
-  if (!enabled) return null
   const html = signature.bodyHtml?.trim() ?? ''
   if (html !== '') return html
   const text = signature.body?.replace(/\s+$/, '') ?? ''
   return text.trim() === '' ? null : textToParagraphHtml(text)
 }
 
-/** 새 메일 본문 — 쓸 줄 · 빈 줄 하나 · 서명 (서명은 본문 끝, 빈 줄 하나 뒤) */
+/**
+ * 서명 자리 — 편집기가 서명 자리(서명 경계 노드)로 읽는 표시를 단 div 로 감싼다 (16단계).
+ * 보낼 때는 표시 없는 <div> 로 나간다 — 앱과 같은 경계(빈 문단 뒤 속성 없는 div — 계약 2절 "앱이 만드는 모양").
+ * 서명 앞의 빈 줄은 부르는 쪽이 둔다
+ */
+export function signatureBlockHtml(signatureHtml: string): string {
+  return `<div ${MAIL_SIGNATURE_MARK_ATTRIBUTE}="">${signatureHtml}</div>`
+}
+
+/** 새 메일 본문 — 쓸 줄 · 빈 줄 하나 · 서명 자리 (서명은 본문 끝, 빈 줄 하나 뒤) */
 export function newMailHtmlWithSignature(signatureHtml: string): string {
-  return `<p></p><p></p>${signatureHtml}`
+  return `<p></p><p></p>${signatureBlockHtml(signatureHtml)}`
+}
+
+/** 기본 둘이 같은가 */
+export function sameSignatureDefaults(a: MailSignatureDefaults, b: MailSignatureDefaults): boolean {
+  return a.newMessageId === b.newMessageId && a.replyId === b.replyId
+}
+
+/** 지운 서명을 기본으로 넣던 곳은 넣지 않음으로 — 다른 서명이 저절로 기본이 되지 않는다 */
+export function withoutSignatureDefault(defaults: MailSignatureDefaults, id: string): MailSignatureDefaults {
+  return {
+    newMessageId: defaults.newMessageId === id ? null : defaults.newMessageId,
+    replyId: defaults.replyId === id ? null : defaults.replyId,
+  }
+}
+
+/** 이 서명을 기본으로 넣는 메일 — 새 메일 · 답장과 전달 · 둘 다 · 없음 */
+export type SignatureUses = 'new' | 'reply' | 'both' | null
+
+export function signatureUsesOf(id: string, defaults: MailSignatureDefaults): SignatureUses {
+  const forNew = defaults.newMessageId === id
+  const forReply = defaults.replyId === id
+  if (forNew && forReply) return 'both'
+  if (forNew) return 'new'
+  return forReply ? 'reply' : null
+}
+
+/** 목록 줄의 이름 아래 회색 글 — 그 서명을 기본으로 넣는 메일 (없으면 빈 글) */
+export function signatureUsesText(uses: SignatureUses): string {
+  return uses ? SIGNATURE_USES_TEXT[uses] : ''
+}
+
+/** 지우기 확인 창의 글 — 기본으로 넣던 곳마다 다르다 */
+export function signatureDeleteMessage(uses: SignatureUses): string {
+  if (uses === 'both') return SIGNATURE_DELETE_TEXT.messageBoth
+  if (uses === 'new') return SIGNATURE_DELETE_TEXT.messageNew
+  if (uses === 'reply') return SIGNATURE_DELETE_TEXT.messageReply
+  return SIGNATURE_DELETE_TEXT.message
+}
+
+/** 이름을 견줄 값 — 앞뒤 공백을 빼고 영문(ASCII) 대소문자를 가리지 않는다 (서버와 같다 — 한글 · 다른 글자는 그대로) */
+export function signatureNameKey(name: string): string {
+  return name.trim().replace(/[A-Z]/g, (letter) => letter.toLowerCase())
+}
+
+/** 이름 검사 — 비었으면 empty, 다른 서명과 같으면 duplicate, 괜찮으면 null (30자는 칸이 막는다 — maxlength) */
+export function signatureNameProblem(name: string, otherNames: readonly string[]): 'empty' | 'duplicate' | null {
+  const key = signatureNameKey(name)
+  if (key === '') return 'empty'
+  return otherNames.some((other) => signatureNameKey(other) === key) ? 'duplicate' : null
 }
 
 /** 그림 파일 사전 검사에 쓰는 모양 — File 과 같은 이름 · 형식 · 크기 */
diff --git a/frontend/src/shared/utils/mail-vacation.spec.ts b/frontend/src/shared/utils/mail-vacation.spec.ts
index 4e27650..ecbe221 100644
--- a/frontend/src/shared/utils/mail-vacation.spec.ts
+++ b/frontend/src/shared/utils/mail-vacation.spec.ts
@@ -1,24 +1,38 @@
 import { describe, expect, it } from 'vitest'
 
-import type { MailVacation } from '@/shared/types/mail'
+import type { MailVacation, MailVacationExternal } from '@/shared/types/mail'
 import {
+  emailDomainOf,
   endOfDayIso,
+  firstVacationProblem,
   fromDayOf,
+  hasVacationFormatting,
   sameVacationForm,
   startOfDayIso,
   toDayOf,
+  vacationExternalOf,
   vacationFormOf,
   vacationNoticeText,
   vacationPayloadOf,
+  vacationPreviewNote,
+  vacationPreviewSendsNothing,
+  vacationPreviewUsesExternal,
   vacationProblems,
   vacationSavedText,
+  type VacationContent,
+  type VacationDocMark,
+  type VacationDocNode,
   type VacationForm,
 } from './mail-vacation'
 
 // 부재중 자동 응답 — 날짜 ↔ 시각 (계약 2절: 브라우저 시간대의 시작일 0시 · 끝나는 날 다음 날 0시를 UTC 로)
 // 시간대마다 결과가 달라지므로 기대값도 같은 브라우저 시간대(로컬 Date)로 만든다
+// 16단계: 내용은 편집기에서 꺼낸 것(VacationContent — 보이는 글 · 서식 본문)을 함께 받는다 · 회사 밖에서 온 메일에 보낼 응답
 
+const SAME: MailVacationExternal = { mode: 'same', subject: null, textBody: null, htmlBody: null }
 const OFF: MailVacation = { isEnabled: false, fromDate: null, toDate: null, subject: '', textBody: '' }
+const BODY: VacationContent = { text: '복귀 후 답장 드리겠습니다.', html: '<div><p>복귀 후 답장 드리겠습니다.</p></div>' }
+const EMPTY: VacationContent = { text: '', html: null }
 
 function form(partial: Partial<VacationForm> = {}): VacationForm {
   return {
@@ -27,11 +41,17 @@ function form(partial: Partial<VacationForm> = {}): VacationForm {
     fromDay: '',
     toDay: '',
     subject: '부재중 안내',
-    textBody: '복귀 후 답장 드리겠습니다.',
+    externalMode: 'same',
+    externalSubject: '',
     ...partial,
   }
 }
 
+/** 보이는 글만 바꾼 내용 */
+function text(value: string, html: string | null = null): VacationContent {
+  return { text: value, html }
+}
+
 describe('날짜 ↔ 시각', () => {
   it('시작일은 그날 0시, 끝나는 날은 다음 날 0시 — 브라우저 시간대 기준을 UTC ISO 로', () => {
     expect(startOfDayIso('2026-10-30')).toBe(new Date(2026, 9, 30).toISOString())
@@ -55,33 +75,36 @@ describe('날짜 ↔ 시각', () => {
 })
 
 describe('칸 ↔ 서버 값', () => {
-  it('설정한 적 없는 계정(꺼짐 · 빈 값)은 끌 때까지 · 빈 칸', () => {
+  it('설정한 적 없는 계정(꺼짐 · 빈 값)은 끌 때까지 · 빈 칸 · 사내와 같은 응답', () => {
     expect(vacationFormOf(OFF)).toEqual({
       isEnabled: false,
       period: 'untilOff',
       fromDay: '',
       toDay: '',
       subject: '',
-      textBody: '',
+      externalMode: 'same',
+      externalSubject: '',
     })
   })
 
-  it('날짜가 하나라도 있으면 기간 정하기 — 저장하면 같은 시각이 돌아간다', () => {
+  it('날짜가 하나라도 있으면 기간 정하기 — 저장하면 같은 시각이 돌아간다 (일곱 칸)', () => {
     const vacation: MailVacation = {
       isEnabled: true,
       fromDate: startOfDayIso('2026-10-30'),
       toDate: endOfDayIso('2026-11-03'),
       subject: '부재중 안내',
       textBody: '휴가입니다.',
+      htmlBody: '<div><p>휴가입니다.</p></div>',
+      external: SAME,
     }
     const filled = vacationFormOf(vacation)
 
     expect(filled).toMatchObject({ period: 'range', fromDay: '2026-10-30', toDay: '2026-11-03' })
-    expect(vacationPayloadOf(filled)).toEqual(vacation)
+    expect(vacationPayloadOf(filled, text('휴가입니다.', '<div><p>휴가입니다.</p></div>'), EMPTY)).toEqual(vacation)
   })
 
   it('끌 때까지 계속이면 숨은 날짜 칸이 남아 있어도 두 날짜 모두 null', () => {
-    expect(vacationPayloadOf(form({ fromDay: '2026-10-30', toDay: '2026-11-03' }))).toMatchObject({
+    expect(vacationPayloadOf(form({ fromDay: '2026-10-30', toDay: '2026-11-03' }), BODY, EMPTY)).toMatchObject({
       fromDate: null,
       toDate: null,
     })
@@ -89,45 +112,209 @@ describe('칸 ↔ 서버 값', () => {
 
   it('꺼 둔 채 저장하면 맞지 않는 기간은 비운다 — 끄기는 늘 저장된다 (빈 제목 · 내용도)', () => {
     const payload = vacationPayloadOf(
-      form({ isEnabled: false, period: 'range', fromDay: '2026-11-05', toDay: '2026-11-03', subject: '', textBody: '' }),
+      form({ isEnabled: false, period: 'range', fromDay: '2026-11-05', toDay: '2026-11-03', subject: '' }),
+      EMPTY,
+      EMPTY,
     )
 
-    expect(payload).toEqual({ isEnabled: false, fromDate: null, toDate: null, subject: '', textBody: '' })
+    expect(payload).toEqual({
+      isEnabled: false,
+      fromDate: null,
+      toDate: null,
+      subject: '',
+      textBody: '',
+      htmlBody: null,
+      external: SAME,
+    })
   })
 
-  it('저장하지 않은 것이 있는지 — 끌 때까지 계속이면 숨은 날짜는 보지 않는다', () => {
+  it('회사 밖 응답 — 고르기와 상관없이 따로 쓴 제목 · 내용을 함께 보낸다 (다른 고르기로 바꿔도 남긴다), 쓴 것이 없으면 null', () => {
+    const outside = text('부재중 안내드립니다.', '<div><p>부재중 안내드립니다.</p></div>')
+    const external: MailVacationExternal = {
+      mode: 'none',
+      subject: '부재중 안내',
+      textBody: '부재중 안내드립니다.',
+      htmlBody: '<div><p>부재중 안내드립니다.</p></div>',
+    }
+
+    expect(vacationPayloadOf(form({ externalMode: 'none', externalSubject: '부재중 안내' }), BODY, outside).external).toEqual(external)
+    // 다시 읽으면 칸도 그대로 — 따로 쓰기를 다시 고르면 그 글이 나온다
+    expect(vacationFormOf({ ...OFF, external })).toMatchObject({ externalMode: 'none', externalSubject: '부재중 안내' })
+    expect(vacationPayloadOf(form({ externalMode: 'separate' }), BODY, EMPTY).external).toEqual({ ...SAME, mode: 'separate' })
+  })
+
+  it('서버의 회사 밖 응답 읽기 — 없거나(16단계 전 서버) 모양이 틀리면 사내와 같은 응답 · 글 없음', () => {
+    expect(vacationExternalOf(undefined)).toEqual(SAME)
+    expect(vacationExternalOf(null)).toEqual(SAME)
+    expect(vacationExternalOf('separate')).toEqual(SAME)
+    expect(vacationExternalOf({ mode: 'later', subject: 1, textBody: '글', htmlBody: null })).toEqual({
+      ...SAME,
+      textBody: '글',
+    })
+    expect(vacationExternalOf({ mode: 'separate', subject: '제목', textBody: '글', htmlBody: '<p>글</p>' })).toEqual({
+      mode: 'separate',
+      subject: '제목',
+      textBody: '글',
+      htmlBody: '<p>글</p>',
+    })
+    // 새 객체 — 받은 값의 모르는 칸은 싣지 않는다
+    expect(Object.keys(vacationExternalOf({ ...SAME, extra: true }))).toEqual(['mode', 'subject', 'textBody', 'htmlBody'])
+  })
+
+  it('저장하지 않은 것이 있는지 — 끌 때까지 계속이면 숨은 날짜는 보지 않는다 · 회사 밖 고르기와 제목도 본다', () => {
     expect(sameVacationForm(form(), form({ fromDay: '2026-10-30' }))).toBe(true)
     expect(sameVacationForm(form({ period: 'range' }), form({ period: 'range', fromDay: '2026-10-30' }))).toBe(false)
     expect(sameVacationForm(form(), form({ subject: '다른 제목' }))).toBe(false)
+    expect(sameVacationForm(form(), form({ externalMode: 'none' }))).toBe(false)
+    expect(sameVacationForm(form(), form({ externalSubject: '회사 밖 제목' }))).toBe(false)
   })
 })
 
 describe('저장하기 전 검사 — 켜 둘 때만', () => {
   it('꺼 두면 아무것도 막지 않는다', () => {
-    expect(vacationProblems(form({ isEnabled: false, subject: '', textBody: '', period: 'range' }))).toEqual([])
+    expect(vacationProblems(form({ isEnabled: false, subject: '', period: 'range', externalMode: 'separate' }), EMPTY, EMPTY)).toEqual({})
   })
 
   it('켜 두면 제목 · 내용이 필요하다 (공백뿐이면 빈 것)', () => {
-    expect(vacationProblems(form({ subject: '  ', textBody: '\n' }))).toEqual(['subject', 'textBody'])
-    expect(vacationProblems(form())).toEqual([])
+    expect(vacationProblems(form({ subject: '  ' }), text('  '), EMPTY)).toEqual({ subject: 'invalid', textBody: 'invalid' })
+    expect(vacationProblems(form(), BODY, EMPTY)).toEqual({})
   })
 
-  it('제목은 150자 · 내용은 600자까지 — 한글로 채워도 엔진의 바이트 한도 안이다 (계약 2절 "길이 한도의 근거")', () => {
-    expect(vacationProblems(form({ subject: '가'.repeat(150), textBody: '가'.repeat(600) }))).toEqual([])
-    expect(vacationProblems(form({ subject: '가'.repeat(151), textBody: '가'.repeat(601) }))).toEqual([
-      'subject',
-      'textBody',
-    ])
-    // 길이는 JS 문자열 길이 — 이모지 하나는 2자다
-    expect(vacationProblems(form({ subject: '🌴'.repeat(75) }))).toEqual([])
-    expect(vacationProblems(form({ subject: `${'🌴'.repeat(75)}가` }))).toEqual(['subject'])
+  it('제목은 150자 · 내용은 보이는 글 600자까지 — 넘으면 내용은 전용 글(tooLong), 길이는 JS 문자열 길이 (이모지 하나는 2자)', () => {
+    expect(vacationProblems(form({ subject: '가'.repeat(150) }), text('가'.repeat(600)), EMPTY)).toEqual({})
+    expect(vacationProblems(form({ subject: '가'.repeat(151) }), text('가'.repeat(601)), EMPTY)).toEqual({
+      subject: 'invalid',
+      textBody: 'tooLong',
+    })
+    expect(vacationProblems(form({ subject: '🌴'.repeat(75) }), BODY, EMPTY)).toEqual({})
+    expect(vacationProblems(form({ subject: `${'🌴'.repeat(75)}가` }), BODY, EMPTY)).toEqual({ subject: 'invalid' })
+    expect(vacationProblems(form(), text('🌴'.repeat(301)), EMPTY)).toEqual({ textBody: 'tooLong' })
+  })
+
+  it('글은 600자 안인데 서식 본문이 10,000자를 넘으면 사전 문구(invalid) — 서명과 같은 한도', () => {
+    expect(vacationProblems(form(), text('짧은 글', 'x'.repeat(10_000)), EMPTY)).toEqual({})
+    expect(vacationProblems(form(), text('짧은 글', 'x'.repeat(10_001)), EMPTY)).toEqual({ textBody: 'invalid' })
   })
 
   it('기간 정하기 — 날짜가 하나도 없거나 시작이 끝보다 늦으면 막는다 (같은 날은 하루)', () => {
-    expect(vacationProblems(form({ period: 'range' }))).toEqual(['period'])
-    expect(vacationProblems(form({ period: 'range', fromDay: '2026-11-04', toDay: '2026-11-03' }))).toEqual(['period'])
-    expect(vacationProblems(form({ period: 'range', fromDay: '2026-11-03', toDay: '2026-11-03' }))).toEqual([])
-    expect(vacationProblems(form({ period: 'range', toDay: '2026-11-03' }))).toEqual([])
+    expect(vacationProblems(form({ period: 'range' }), BODY, EMPTY)).toEqual({ period: 'invalid' })
+    expect(vacationProblems(form({ period: 'range', fromDay: '2026-11-04', toDay: '2026-11-03' }), BODY, EMPTY)).toEqual({
+      period: 'invalid',
+    })
+    expect(vacationProblems(form({ period: 'range', fromDay: '2026-11-03', toDay: '2026-11-03' }), BODY, EMPTY)).toEqual({})
+    expect(vacationProblems(form({ period: 'range', toDay: '2026-11-03' }), BODY, EMPTY)).toEqual({})
+  })
+
+  it('회사 밖 두 칸은 따로 쓰기일 때만 — 같은 한도, 사내와 같은 응답 · 보내지 않기면 비어 있어도 저장한다', () => {
+    expect(vacationProblems(form({ externalMode: 'same' }), BODY, EMPTY)).toEqual({})
+    expect(vacationProblems(form({ externalMode: 'none' }), BODY, EMPTY)).toEqual({})
+    expect(vacationProblems(form({ externalMode: 'separate' }), BODY, EMPTY)).toEqual({
+      externalSubject: 'invalid',
+      externalTextBody: 'invalid',
+    })
+    expect(
+      vacationProblems(form({ externalMode: 'separate', externalSubject: '안내' }), BODY, text('가'.repeat(601))),
+    ).toEqual({ externalTextBody: 'tooLong' })
+    expect(vacationProblems(form({ externalMode: 'separate', externalSubject: '안내' }), BODY, BODY)).toEqual({})
+  })
+
+  it('보는 차례 — 기간 · 제목 · 내용 · 회사 밖에 보낼 제목 · 회사 밖에 보낼 내용의 첫 칸', () => {
+    expect(firstVacationProblem({})).toBeNull()
+    expect(firstVacationProblem({ externalTextBody: 'tooLong', subject: 'invalid' })).toBe('subject')
+    expect(firstVacationProblem({ externalTextBody: 'invalid', externalSubject: 'invalid' })).toBe('externalSubject')
+    expect(firstVacationProblem({ textBody: 'tooLong', period: 'invalid' })).toBe('period')
+  })
+})
+
+describe('서식이 있는가 (16단계 리뷰 — 없으면 서식 본문을 보내지 않는다)', () => {
+  /** 편집기 문서 흉내 — 글자 노드마다 표시(marks) */
+  function doc(...marks: VacationDocMark[][]): VacationDocNode {
+    const children: VacationDocNode[] = marks.map((list) => ({ marks: list, descendants: () => undefined }))
+    return {
+      marks: [],
+      descendants(callback) {
+        for (const child of children) {
+          if (callback(child) === false) return
+        }
+      },
+    }
+  }
+  const mark = (name: string, attrs: Record<string, unknown> = {}): VacationDocMark => ({ type: { name }, attrs })
+
+  it('글만이면 없음 — 굵게 · 기울임 · 밑줄 · 링크 · 글자 색이 하나라도 있으면 있음', () => {
+    expect(hasVacationFormatting(doc([], []))).toBe(false)
+    expect(hasVacationFormatting(doc([], [mark('bold')]))).toBe(true)
+    expect(hasVacationFormatting(doc([mark('italic')]))).toBe(true)
+    expect(hasVacationFormatting(doc([mark('underline')]))).toBe(true)
+    expect(hasVacationFormatting(doc([mark('link', { href: 'https://arasystem.it.kr' })]))).toBe(true)
+    expect(hasVacationFormatting(doc([mark('textStyle', { color: '#0E7C86' })]))).toBe(true)
+  })
+
+  it('색을 지운 뒤 남은 빈 글자 스타일은 서식이 아니다', () => {
+    expect(hasVacationFormatting(doc([mark('textStyle', { color: null })]))).toBe(false)
+    expect(hasVacationFormatting(doc([mark('textStyle', { color: '' })]))).toBe(false)
+    expect(hasVacationFormatting(doc([mark('textStyle')]))).toBe(false)
+  })
+
+  it('찾으면 더 훑지 않는다', () => {
+    const seen: number[] = []
+    const children = [[], [mark('bold')], []].map((list, index) => ({
+      marks: list,
+      descendants: () => undefined,
+      index,
+    }))
+    const root: VacationDocNode = {
+      marks: [],
+      descendants(callback) {
+        for (const child of children) {
+          seen.push(child.index)
+          if (callback(child) === false) return
+        }
+      },
+    }
+
+    expect(hasVacationFormatting(root)).toBe(true)
+    expect(seen).toEqual([0, 1])
+  })
+})
+
+describe('미리 보기 (16단계 — [사내 | 회사 밖])', () => {
+  it('아래 글 — 사내와 같은 응답 · 보내지 않기 · 따로 쓰기, 꺼져 있으면 두 쪽 모두 꺼짐 글', () => {
+    expect(vacationPreviewNote(true, 'same', 'inside')).toBe(
+      '받은 메일의 보낸 사람에게 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+    )
+    expect(vacationPreviewNote(true, 'same', 'outside')).toBe(
+      '회사 밖에서 온 메일에도 같은 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+    )
+    expect(vacationPreviewNote(true, 'separate', 'inside')).toBe(
+      '사내에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+    )
+    expect(vacationPreviewNote(true, 'none', 'inside')).toBe('사내에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.')
+    expect(vacationPreviewNote(true, 'separate', 'outside')).toBe(
+      '회사 밖에서 온 메일에 위 글로 답합니다. 같은 사람에게는 매번 보내지 않습니다.',
+    )
+    // 보내지 않기의 회사 밖 쪽은 회색 상자만 — 아래 글이 없다
+    expect(vacationPreviewNote(true, 'none', 'outside')).toBeNull()
+    for (const mode of ['same', 'none', 'separate'] as const) {
+      for (const side of ['inside', 'outside'] as const) {
+        expect(vacationPreviewNote(false, mode, side)).toBe('꺼져 있어 자동으로 답하지 않습니다.')
+      }
+    }
+  })
+
+  it('답장 대신 회색 상자는 보내지 않기의 회사 밖 쪽, 따로 쓴 글은 따로 쓰기의 회사 밖 쪽만', () => {
+    expect(vacationPreviewSendsNothing('none', 'outside')).toBe(true)
+    expect(vacationPreviewSendsNothing('none', 'inside')).toBe(false)
+    expect(vacationPreviewSendsNothing('separate', 'outside')).toBe(false)
+    expect(vacationPreviewUsesExternal('separate', 'outside')).toBe(true)
+    expect(vacationPreviewUsesExternal('separate', 'inside')).toBe(false)
+    expect(vacationPreviewUsesExternal('same', 'outside')).toBe(false)
+  })
+
+  it('회사 밖 설명의 도메인은 내 주소의 것 (마지막 @ 뒤)', () => {
+    expect(emailDomainOf('ara.kim@arasystem.it.kr')).toBe('arasystem.it.kr')
+    expect(emailDomainOf('"a@b"@arasystem.test')).toBe('arasystem.test')
+    expect(emailDomainOf('')).toBe('')
   })
 })
 
diff --git a/frontend/src/shared/utils/mail-vacation.ts b/frontend/src/shared/utils/mail-vacation.ts
index 6ba7bc4..5b4fa2d 100644
--- a/frontend/src/shared/utils/mail-vacation.ts
+++ b/frontend/src/shared/utils/mail-vacation.ts
@@ -1,26 +1,122 @@
 // 부재중 자동 응답 — 화면의 날짜 ↔ 서버의 시각, 폼 검사, 안내 문구 (계약 2절 "부재중 자동 응답" — 순수 함수만 둔다)
 // 화면은 날짜만 고른다. 서버에는 브라우저 시간대의 "시작일 0시"와 "끝나는 날 다음 날 0시"를 UTC(ISO 8601)로 보낸다 —
 // 끝 시각은 그 시각 직전까지 답한다는 뜻이라, 읽을 때는 1ms 앞의 날짜가 끝나는 날이다.
+// 16단계: 내용은 서식 편집기(서명 칸과 같은 것)에 있다 — 칸(VacationForm)에는 없고, 저장 · 검사 때 편집기에서 꺼낸 내용(VacationContent)을 함께 받는다.
+// 회사 밖에서 온 메일에 보낼 응답(사내와 같은 응답 · 보내지 않기 · 따로 쓰기)을 고르고, 다른 고르기로 바꿔도 따로 쓴 글은 남겨 함께 저장한다.
 
-import { VACATION_BODY_MAX_LENGTH, VACATION_SUBJECT_MAX_LENGTH, VACATION_TEXT } from '@/shared/constants/mail-vacation'
-import type { MailVacation } from '@/shared/types/mail'
+import {
+  VACATION_BODY_MAX_LENGTH,
+  VACATION_EXTERNAL_MODES,
+  VACATION_HTML_MAX_LENGTH,
+  VACATION_SUBJECT_MAX_LENGTH,
+  VACATION_TEXT,
+} from '@/shared/constants/mail-vacation'
+import type { MailVacation, MailVacationExternal, MailVacationExternalMode } from '@/shared/types/mail'
 import { formatDate } from '@/shared/utils/format'
 
 /** 화면의 기간 고르기 — 끌 때까지 계속 · 기간 정하기 */
 export type VacationPeriod = 'untilOff' | 'range'
 
-/** 화면의 칸 — 날짜는 <input type="date"> 값(YYYY-MM-DD, 비면 '') */
+/**
+ * 화면의 칸 — 날짜는 <input type="date"> 값(YYYY-MM-DD, 비면 ''). 내용(사내 · 회사 밖)은 편집기 안에 있다(16단계).
+ * 회사 밖 제목은 다른 고르기로 바꿔도 남긴다 — 다시 따로 쓰기를 고르면 그대로 나온다
+ */
 export interface VacationForm {
   isEnabled: boolean
   period: VacationPeriod
   fromDay: string
   toDay: string
   subject: string
-  textBody: string
+  externalMode: MailVacationExternalMode
+  externalSubject: string
 }
 
-/** 저장하기 전에 막는 문제 — 칸마다 하나 (켜 둘 때만 본다) */
-export type VacationProblem = 'period' | 'subject' | 'textBody'
+/** 편집기에서 꺼낸 내용 — 보이는 글(서버의 textBody · 글자 수) · 서식 본문(비었으면 null) */
+export interface VacationContent {
+  text: string
+  html: string | null
+}
+
+/** 저장하기 전에 막는 칸 (켜 둘 때만 본다) — 회사 밖 두 칸은 따로 쓰기일 때만 */
+export type VacationProblemField = 'period' | 'subject' | 'textBody' | 'externalSubject' | 'externalTextBody'
+
+/** 걸린 까닭 — invalid: 비었거나 맞지 않음 · 서식 본문이 너무 김(사전 문구 VAL_001) / tooLong: 내용이 600자를 넘음(전용 글 · 빨간 글자 수) */
+export type VacationProblemKind = 'invalid' | 'tooLong'
+
+export type VacationProblems = Partial<Record<VacationProblemField, VacationProblemKind>>
+
+/** 칸을 보는 차례 — 첫 칸으로 초점을 옮긴다 (기간 → 제목 → 내용 → 회사 밖에 보낼 제목 → 회사 밖에 보낼 내용) */
+export const VACATION_PROBLEM_ORDER: readonly VacationProblemField[] = [
+  'period',
+  'subject',
+  'textBody',
+  'externalSubject',
+  'externalTextBody',
+]
+
+/** 미리 보기의 쪽 — 사내에서 온 메일 · 회사 밖에서 온 메일에 가는 답장 */
+export type VacationPreviewSide = 'inside' | 'outside'
+
+/** 서식을 찾는 데 쓰는 편집기 문서의 모양 — ProseMirror 노드의 일부만 적는다 (편집기 청크를 불러오지 않게) */
+export interface VacationDocMark {
+  readonly type: { readonly name: string }
+  readonly attrs: Readonly<Record<string, unknown>>
+}
+
+export interface VacationDocNode {
+  readonly marks: readonly VacationDocMark[]
+  descendants(callback: (node: VacationDocNode) => boolean | void): void
+}
+
+/** 글자 스타일(글자 색이 붙는 표시) — 값이 있을 때만 서식이다 (색을 지운 뒤 남은 빈 스타일은 서식이 아니다) */
+const TEXT_STYLE_MARK = 'textStyle'
+
+function isFormattingMark(mark: VacationDocMark): boolean {
+  if (mark.type.name !== TEXT_STYLE_MARK) return true
+  return Object.values(mark.attrs).some((value) => value !== null && value !== undefined && value !== '')
+}
+
+/**
+ * 편집 중인 내용에 서식(굵게 · 기울임 · 밑줄 · 글자 색 · 링크 — 글자에 붙은 표시)이 있는가.
+ * 없으면 서식 본문을 보내지 않는다(htmlBody null — 사내 · 회사 밖 모두). 서버는 서식 본문 · 회사 밖 응답을 쓴 직원만 새 원본 판으로 저장한다 —
+ * 글만 쓴 응답에도 서식 본문을 실으면 거의 모든 직원이 새 판이 되어 되돌리기 계획의 전제가 깨진다 (16단계 리뷰).
+ * 문단 · 줄바꿈은 글자 본문에도 그대로 남아 서식으로 보지 않는다
+ */
+export function hasVacationFormatting(doc: VacationDocNode): boolean {
+  let found = false
+  doc.descendants((node) => {
+    if (found) return false
+    if (node.marks.some(isFormattingMark)) found = true
+    return !found
+  })
+  return found
+}
+
+/** 회사 밖 응답의 처음 값 — 사내와 같은 응답 · 쓴 글 없음 (16단계 전 서버 · 설정한 적 없는 계정) */
+const DEFAULT_EXTERNAL: MailVacationExternal = { mode: 'same', subject: null, textBody: null, htmlBody: null }
+
+function stringOrNull(value: unknown): string | null {
+  return typeof value === 'string' ? value : null
+}
+
+function isExternalMode(value: unknown): value is MailVacationExternalMode {
+  return VACATION_EXTERNAL_MODES.includes(value as MailVacationExternalMode)
+}
+
+/**
+ * 서버가 준 회사 밖 응답 → 화면의 값. 없거나 모양이 틀리면(16단계 전 서버 · 응답을 바꾼 게이트웨이) 사내와 같은 응답 —
+ * 옛 화면이 저장한 것과 같게 읽는다. 모르는 mode 도 사내와 같은 응답이다
+ */
+export function vacationExternalOf(value: unknown): MailVacationExternal {
+  if (typeof value !== 'object' || value === null) return { ...DEFAULT_EXTERNAL }
+  const external = value as Record<string, unknown>
+  return {
+    mode: isExternalMode(external.mode) ? external.mode : DEFAULT_EXTERNAL.mode,
+    subject: stringOrNull(external.subject),
+    textBody: stringOrNull(external.textBody),
+    htmlBody: stringOrNull(external.htmlBody),
+  }
+}
 
 const DAY_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/
 /** 끝 시각 바로 앞 — 끝나는 날을 구한다 */
@@ -65,17 +161,19 @@ export function toDayOf(toDate: string | null): string {
   return instant ? formatDate(new Date(instant.getTime() - END_OFFSET_MS)) : ''
 }
 
-/** 서버 값 → 화면의 칸. 날짜가 하나라도 있으면 "기간 정하기" */
+/** 서버 값 → 화면의 칸. 날짜가 하나라도 있으면 "기간 정하기". 내용은 편집기가 따로 연다(VacationForm 의 bodyHtmlOf) */
 export function vacationFormOf(vacation: MailVacation): VacationForm {
   const fromDay = fromDayOf(vacation.fromDate)
   const toDay = toDayOf(vacation.toDate)
+  const external = vacationExternalOf(vacation.external)
   return {
     isEnabled: vacation.isEnabled,
     period: fromDay || toDay ? 'range' : 'untilOff',
     fromDay,
     toDay,
     subject: vacation.subject ?? '',
-    textBody: vacation.textBody ?? '',
+    externalMode: external.mode,
+    externalSubject: external.subject ?? '',
   }
 }
 
@@ -89,35 +187,78 @@ function rangeOf(form: Pick<VacationForm, 'fromDay' | 'toDay'>): { fromDate: str
   return { fromDate, toDate }
 }
 
-/**
- * 저장하기 전에 막는 문제 — 켜 둘 때만 본다 (꺼 두면 빈 제목 · 내용도, 4단계에 저장한 긴 글도 저장된다 — 계약 2절).
- * 기간 정하기: 날짜가 하나도 없거나, 틀렸거나, 시작이 끝보다 늦다 · 제목 1~150자 · 내용 1~600자 (공백뿐이면 빈 것)
- */
-export function vacationProblems(form: VacationForm): VacationProblem[] {
-  if (!form.isEnabled) return []
-  const problems: VacationProblem[] = []
-  if (form.period === 'range' && !rangeOf(form)) problems.push('period')
-  if (form.subject.trim() === '' || form.subject.length > VACATION_SUBJECT_MAX_LENGTH) problems.push('subject')
-  if (form.textBody.trim() === '' || form.textBody.length > VACATION_BODY_MAX_LENGTH) problems.push('textBody')
-  return problems
+/** 제목 — 1~150자 (공백뿐이면 빈 것) */
+function subjectProblem(subject: string): VacationProblemKind | null {
+  return subject.trim() === '' || subject.length > VACATION_SUBJECT_MAX_LENGTH ? 'invalid' : null
 }
 
 /**
- * 화면의 칸 → PUT /mail-vacation 본문 (전체 교체). 끌 때까지 계속이면 두 날짜 모두 null.
- * 꺼 둔 채 저장할 때 기간이 맞지 않으면(흐린 칸이라 고칠 수 없다) 날짜를 비운다 — 끄기는 늘 저장되게
+ * 내용 — 보이는 글 1~600자(공백뿐이면 빈 것 — 넘으면 전용 글) · 서식 본문 10,000자(서명과 같은 한도 — 글은 600자 안인데 서식이 많을 때, 사전 문구).
+ * 길이는 JS 문자열 길이다 — 서버도 같은 값(textBody)을 같은 길이로 잰다
  */
-export function vacationPayloadOf(form: VacationForm): MailVacation {
+function bodyProblem(content: VacationContent): VacationProblemKind | null {
+  if (content.text.trim() === '') return 'invalid'
+  if (content.text.length > VACATION_BODY_MAX_LENGTH) return 'tooLong'
+  return (content.html?.length ?? 0) > VACATION_HTML_MAX_LENGTH ? 'invalid' : null
+}
+
+/**
+ * 저장하기 전에 막는 문제 — 켜 둘 때만 본다 (꺼 두면 빈 제목 · 내용도, 4단계에 저장한 긴 글도 저장된다 — 계약 2절).
+ * 기간 정하기: 날짜가 하나도 없거나, 틀렸거나, 시작이 끝보다 늦다 · 제목 1~150자 · 내용(위 bodyProblem).
+ * 회사 밖 두 칸은 따로 쓰기를 골랐을 때만 — 사내와 같은 응답 · 보내지 않기면 비어 있어도 저장한다
+ */
+export function vacationProblems(
+  form: VacationForm,
+  inside: VacationContent,
+  outside: VacationContent,
+): VacationProblems {
+  if (!form.isEnabled) return {}
+  const problems: VacationProblems = {}
+  if (form.period === 'range' && !rangeOf(form)) problems.period = 'invalid'
+  const subject = subjectProblem(form.subject)
+  if (subject) problems.subject = subject
+  const body = bodyProblem(inside)
+  if (body) problems.textBody = body
+  if (form.externalMode !== 'separate') return problems
+  const externalSubject = subjectProblem(form.externalSubject)
+  if (externalSubject) problems.externalSubject = externalSubject
+  const externalBody = bodyProblem(outside)
+  if (externalBody) problems.externalTextBody = externalBody
+  return problems
+}
+
+/** 걸린 칸 가운데 보는 차례로 첫 칸 — 없으면 null */
+export function firstVacationProblem(problems: VacationProblems): VacationProblemField | null {
+  return VACATION_PROBLEM_ORDER.find((field) => problems[field] !== undefined) ?? null
+}
+
+/**
+ * 화면의 칸 + 편집기의 내용 → PUT /mail-vacation 본문 (전체 교체 — 일곱 칸). 끌 때까지 계속이면 두 날짜 모두 null.
+ * 꺼 둔 채 저장할 때 기간이 맞지 않으면(흐린 칸이라 고칠 수 없다) 날짜를 비운다 — 끄기는 늘 저장되게.
+ * 회사 밖 제목 · 내용은 고르기와 상관없이 함께 보낸다(다른 고르기로 바꿔도 남긴다 — 보드 결정). 쓴 것이 없으면 null
+ */
+export function vacationPayloadOf(form: VacationForm, inside: VacationContent, outside: VacationContent): MailVacation {
   const range = form.period === 'range' ? rangeOf(form) : null
   return {
     isEnabled: form.isEnabled,
     fromDate: range?.fromDate ?? null,
     toDate: range?.toDate ?? null,
     subject: form.subject,
-    textBody: form.textBody,
+    textBody: inside.text,
+    htmlBody: inside.html,
+    external: {
+      mode: form.externalMode,
+      subject: form.externalSubject === '' ? null : form.externalSubject,
+      textBody: outside.text === '' ? null : outside.text,
+      htmlBody: outside.html,
+    },
   }
 }
 
-/** 두 폼이 같은 내용인가 — 저장하지 않은 것이 있는지 본다. 끌 때까지 계속이면 숨은 날짜 칸은 보지 않는다 */
+/**
+ * 두 폼의 칸이 같은 내용인가 — 저장하지 않은 것이 있는지 본다(내용은 편집기가 따로 잰다 — isChanged).
+ * 끌 때까지 계속이면 숨은 날짜 칸은 보지 않는다
+ */
 export function sameVacationForm(a: VacationForm, b: VacationForm): boolean {
   const sameRange = a.period === 'untilOff' || (a.fromDay === b.fromDay && a.toDay === b.toDay)
   return (
@@ -125,10 +266,43 @@ export function sameVacationForm(a: VacationForm, b: VacationForm): boolean {
     a.period === b.period &&
     sameRange &&
     a.subject === b.subject &&
-    a.textBody === b.textBody
+    a.externalMode === b.externalMode &&
+    a.externalSubject === b.externalSubject
   )
 }
 
+/**
+ * 미리 보기의 아래 글 (디자인 원본 Settings16 3) — 꺼져 있으면 두 쪽 모두 꺼짐 글.
+ * 사내와 같은 응답: 사내 쪽은 16단계 전의 글 · 회사 밖 쪽은 "…에도 같은 글로". 보내지 않기 · 따로 쓰기: 사내 쪽은 "사내에서 온 메일에",
+ * 따로 쓰기의 회사 밖 쪽은 "회사 밖에서 온 메일에", 보내지 않기의 회사 밖 쪽은 null(회색 상자만 — 아래 글 없음)
+ */
+export function vacationPreviewNote(
+  enabled: boolean,
+  mode: MailVacationExternalMode,
+  side: VacationPreviewSide,
+): string | null {
+  if (!enabled) return VACATION_TEXT.previewNoteOff
+  if (mode === 'same') return side === 'inside' ? VACATION_TEXT.previewNoteOn : VACATION_TEXT.previewNoteSameOutside
+  if (side === 'inside') return VACATION_TEXT.previewNoteInside
+  return mode === 'none' ? null : VACATION_TEXT.previewNoteOutside
+}
+
+/** 미리 보기가 답장 대신 "자동으로 답하지 않습니다" 회색 상자를 보이는가 — 보내지 않기의 회사 밖 쪽 */
+export function vacationPreviewSendsNothing(mode: MailVacationExternalMode, side: VacationPreviewSide): boolean {
+  return mode === 'none' && side === 'outside'
+}
+
+/** 미리 보기가 그 쪽에 보일 답장이 회사 밖에 따로 쓴 글인가 — 따로 쓰기의 회사 밖 쪽만 (그 밖은 위의 제목 · 내용) */
+export function vacationPreviewUsesExternal(mode: MailVacationExternalMode, side: VacationPreviewSide): boolean {
+  return mode === 'separate' && side === 'outside'
+}
+
+/** 내 주소의 도메인 — "보낸 사람 주소가 회사 메일 주소(@…)가 아닌 메일입니다." (마지막 @ 뒤) */
+export function emailDomainOf(email: string): string {
+  const at = email.lastIndexOf('@')
+  return at >= 0 ? email.slice(at + 1) : email
+}
+
 const WEEKDAY = new Intl.DateTimeFormat('ko-KR', { weekday: 'short' })
 
 /** "11월 3일" — 올해가 아니면 앞에 연도 ("2027년 1월 3일") */
diff --git a/frontend/src/stores/contact-import.store.spec.ts b/frontend/src/stores/contact-import.store.spec.ts
new file mode 100644
index 0000000..a4a953b
--- /dev/null
+++ b/frontend/src/stores/contact-import.store.spec.ts
@@ -0,0 +1,71 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+import { useAuthStore } from './auth.store'
+import { useContactImportStore } from './contact-import.store'
+
+// 가져오기 · 되돌리기의 차례 (16단계 — 이 탭에서 한 번에 하나, 도는 동안 누른 [되돌리기] · [다시 시도]는 끝난 뒤에)
+
+describe('contact-import.store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useAuthStore().startSession({ email: 'ara.kim@arasystem.test', name: '김아라' })
+  })
+
+  it('앞의 일이 끝난 뒤에 다음 일을 한다 — 도는 동안 busy 는 그 일의 종류', async () => {
+    const store = useContactImportStore()
+    const order: string[] = []
+    let finish: () => void = () => undefined
+    const first = store.enqueue(
+      'import',
+      () =>
+        new Promise<void>((resolve) => {
+          order.push('넣기 시작')
+          finish = () => {
+            order.push('넣기 끝')
+            resolve()
+          }
+        }),
+    )
+    const second = store.enqueue('undo', async () => {
+      order.push('되돌리기')
+    })
+    await Promise.resolve()
+    await Promise.resolve()
+    expect(store.busy).toBe('import')
+    expect(order).toEqual(['넣기 시작'])
+
+    finish()
+    await Promise.all([first, second])
+    expect(order).toEqual(['넣기 시작', '넣기 끝', '되돌리기'])
+    expect(store.busy).toBeNull()
+  })
+
+  it('넣은 뒤 세션이 바뀌었으면 건너뛴다 — 다른 직원의 주소록을 건드리지 않게, 앞의 실패는 차례를 막지 않는다', async () => {
+    const store = useContactImportStore()
+    const order: string[] = []
+    let finish: () => void = () => undefined
+    const first = store.enqueue(
+      'import',
+      () =>
+        new Promise<void>((_resolve, reject) => {
+          finish = () => reject(new Error('멈춤'))
+        }),
+    )
+    const stale = store.enqueue('undo', async () => {
+      order.push('옛 세션의 되돌리기')
+    })
+    await Promise.resolve()
+    useAuthStore().startSession({ email: 'doyun.lee@arasystem.test', name: '이도윤' })
+    const fresh = store.enqueue('import', async () => {
+      order.push('새 세션의 넣기')
+    })
+
+    finish()
+    await expect(first).rejects.toThrow('멈춤')
+    await stale
+    await fresh
+    expect(order).toEqual(['새 세션의 넣기'])
+    expect(store.busy).toBeNull()
+  })
+})
diff --git a/frontend/src/stores/contact-import.store.ts b/frontend/src/stores/contact-import.store.ts
new file mode 100644
index 0000000..9168a80
--- /dev/null
+++ b/frontend/src/stores/contact-import.store.ts
@@ -0,0 +1,38 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { useAuthStore } from '@/stores/auth.store'
+
+// 주소록 가져오기 · 되돌리기가 이 탭에서 도는 중인가 (16단계 — 디자인 원본 Contacts16 "1" · "4")
+// 한 번에 하나만 돈다 — 도는 동안 「전체 연락처」 머리의 [가져오기]는 바쁜 표시(aria-busy)이고 눌러도 아무 일이 없다.
+// 도는 동안 누른 [다시 시도] · [되돌리기]는 버리지 않고 차례를 기다린다(그 알림은 눌러 닫혔다) — 단, 누른 뒤 세션이 바뀌었으면 하지 않는다
+// (다른 직원의 주소록에 넣거나 지우지 않게). 도는 일 자체는 composables/useContactImport.ts 가 한다(다른 화면으로 가도 이어 한다)
+
+export type ContactImportBusy = 'import' | 'undo'
+
+export const useContactImportStore = defineStore('contact-import', () => {
+  const authStore = useAuthStore()
+  const busy = ref<ContactImportBusy | null>(null)
+  let tail: Promise<void> = Promise.resolve()
+
+  /**
+   * 차례에 넣는다 — 앞의 일이 끝나면 task 를 한다. 넣은 때의 세션이 그때도 그대로일 때만(아니면 건너뛴다).
+   * task 의 실패는 차례를 막지 않는다
+   */
+  function enqueue(kind: ContactImportBusy, task: () => Promise<void>): Promise<void> {
+    const session = authStore.generation
+    const next = tail.then(async () => {
+      if (authStore.generation !== session) return
+      busy.value = kind
+      try {
+        await task()
+      } finally {
+        busy.value = null
+      }
+    })
+    tail = next.catch(() => undefined)
+    return next
+  }
+
+  return { busy, enqueue }
+})
diff --git a/frontend/src/stores/contacts.store.ts b/frontend/src/stores/contacts.store.ts
index aa4b950..80e70d6 100644
--- a/frontend/src/stores/contacts.store.ts
+++ b/frontend/src/stores/contacts.store.ts
@@ -612,6 +612,18 @@ export const useContactsStore = defineStore('contacts', () => {
     return added
   }
 
+  /**
+   * 여러 연락처가 한꺼번에 바뀐 뒤(16단계 가져오기 · 그 [되돌리기]) — 응답으로 자리를 알 수 없어 연락처 수 · 그룹 · 보는 목록의 첫 쪽을 다시 받는다.
+   * removedIds 는 지운 연락처 — 고른 채 남은 주소가 다시 받지 않고 "찾을 수 없음"을 그리게
+   */
+  function afterBulkChange(removedIds: readonly string[] = []): void {
+    for (const id of removedIds) goneIds.add(id)
+    if (detail.value && goneIds.has(detail.value.id)) closeDetail()
+    void loadContactTotal()
+    void loadGroups()
+    void reloadFirstPage()
+  }
+
   function reset() {
     groupsSeq += 1
     totalSeq += 1
@@ -707,6 +719,7 @@ export const useContactsStore = defineStore('contacts', () => {
     forgetGroup,
     deleteGroup,
     addMembers,
+    afterBulkChange,
     reset,
   }
 })
diff --git a/frontend/src/stores/mail-signature.store.spec.ts b/frontend/src/stores/mail-signature.store.spec.ts
index e5bc111..88c89f0 100644
--- a/frontend/src/stores/mail-signature.store.spec.ts
+++ b/frontend/src/stores/mail-signature.store.spec.ts
@@ -2,23 +2,48 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 
-import type { MailSignature } from '@/shared/types/mail'
+import type { MailSignature, MailSignatureDefaults } from '@/shared/types/mail-signature'
 import { useAuthStore } from '@/stores/auth.store'
 import { useToastStore } from '@/stores/toast.store'
-import { fail, installMockApi, ok, restoreApiAdapter, type MockResult } from '@/test-utils/mock-api'
+import {
+  fail,
+  flushPromises,
+  installMockApi,
+  ok,
+  restoreApiAdapter,
+  type MockRequest,
+  type MockResult,
+} from '@/test-utils/mock-api'
 import { useMailSignatureStore } from './mail-signature.store'
 
+// 여러 서명 스토어 — 계약 2절 "서명" (16단계)
+
 const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
-const SIGNATURE: MailSignature = {
-  bodyHtml: '<p>김아라</p>',
-  body: '김아라',
-  isForNew: true,
-  isForReply: false,
-  images: [],
-  updatedAt: '2026-10-27T05:00:00Z',
+
+function signature(id: string, name: string): MailSignature {
+  return { id, name, bodyHtml: `<p>${name}</p>`, body: name, images: [], updatedAt: '2026-11-10T00:00:00Z' }
 }
 
-describe('mail-signature.store (계약 2절 "서명")', () => {
+const IN = signature('in', '사내')
+const OUT = signature('out', '대외')
+const DEFAULTS: MailSignatureDefaults = { newMessageId: 'out', replyId: 'in' }
+
+function page(items: MailSignature[]) {
+  return ok({ items, pageInfo: { hasNext: false, nextCursor: null, total: items.length } })
+}
+
+/** 목록 · 기본 둘을 주는 서버 — 다른 요청은 extra 가 먼저 본다 */
+function server(options: { list?: MailSignature[]; defaults?: MailSignatureDefaults; extra?: (request: MockRequest) => MockResult | Promise<MockResult> | undefined } = {}) {
+  return (request: MockRequest) => {
+    const extra = options.extra?.(request)
+    if (extra) return extra
+    if (request.method === 'GET' && request.url === '/mail-signatures') return page(options.list ?? [IN, OUT])
+    if (request.method === 'GET' && request.url === '/mail-signature-defaults') return ok(options.defaults ?? DEFAULTS)
+    return ok(null)
+  }
+}
+
+describe('mail-signature.store (계약 2절 "서명" — 여러 서명)', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     useAuthStore().markAuthenticated(USER)
@@ -29,44 +54,192 @@ describe('mail-signature.store (계약 2절 "서명")', () => {
     restoreApiAdapter()
   })
 
-  it('쓰기 화면은 받아 둔 서명을 쓴다 — 받는 중이면 그 결과를 기다리고, 다시 묻지 않는다', async () => {
-    const requests = installMockApi(() => ok(SIGNATURE))
+  it('목록과 기본 둘을 함께 받는다 — 받는 중이면 그 결과를 기다리고 다시 묻지 않는다, 기본 서명을 찾는다', async () => {
+    const requests = installMockApi(server())
     const store = useMailSignatureStore()
 
-    const [first, second] = await Promise.all([store.ensureSignature(), store.ensureSignature()])
-    await store.ensureSignature()
+    const [first, second] = await Promise.all([store.ensureLoaded(), store.ensureLoaded()])
+    await store.ensureLoaded()
 
-    expect(first).toEqual(SIGNATURE)
-    expect(second).toEqual(SIGNATURE)
-    expect(requests).toHaveLength(1)
+    expect([first, second]).toEqual([true, true])
+    expect(requests.map((request) => request.url).sort()).toEqual(['/mail-signature-defaults', '/mail-signatures'])
+    expect(store.signatures.map((item) => item.name)).toEqual(['사내', '대외'])
+    expect(store.defaultSignature('new')?.name).toBe('대외')
+    expect(store.defaultSignature('reply')?.name).toBe('사내')
   })
 
-  it('못 받으면 알리지 않고 null — 다음에 다시 받아 본다', async () => {
-    let result: MockResult = fail(503, 'MAIL_001')
-    const requests = installMockApi(() => result)
+  it('못 받으면 알리지 않고 false — 다음에 다시 받아 본다', async () => {
+    let failing = true
+    const requests = installMockApi(
+      server({ extra: (request) => (failing && request.url === '/mail-signatures' ? fail(503, 'MAIL_001') : undefined) }),
+    )
     const store = useMailSignatureStore()
 
-    await expect(store.ensureSignature()).resolves.toBeNull()
+    await expect(store.ensureLoaded()).resolves.toBe(false)
     expect(store.status).toBe('error')
     expect(store.error?.code).toBe('MAIL_001')
     expect(useToastStore().toasts).toEqual([])
 
-    result = ok(SIGNATURE)
-    await expect(store.ensureSignature()).resolves.toEqual(SIGNATURE)
-    expect(requests).toHaveLength(2)
+    failing = false
+    await expect(store.ensureLoaded()).resolves.toBe(true)
+    expect(requests.filter((request) => request.url === '/mail-signatures')).toHaveLength(2)
   })
 
-  it('저장한 값이 곧 다음 쓰기 화면의 서명이다 — 사용자가 바뀌면 비운다', async () => {
-    const requests = installMockApi((request) => (request.method === 'PUT' ? ok({ ...SIGNATURE, isForReply: true }) : ok(SIGNATURE)))
+  it('응답 모양이 틀린 줄은 빼고, 모르는 기본 값은 넣지 않음으로 본다', async () => {
+    installMockApi((request) =>
+      request.url === '/mail-signatures'
+        ? ok({ items: [IN, { id: 7, name: '숫자 id' }, null], pageInfo: { hasNext: false, nextCursor: null, total: 3 } })
+        : ok({ newMessageId: 3, replyId: 'in' }),
+    )
     const store = useMailSignatureStore()
+    await store.ensureLoaded()
 
-    await store.save({ bodyHtml: '<p>김아라</p>', body: '김아라', isForNew: true, isForReply: true })
-    await expect(store.ensureSignature()).resolves.toMatchObject({ isForReply: true })
-    expect(requests.map((request) => request.method)).toEqual(['PUT'])
+    expect(store.signatures.map((item) => item.id)).toEqual(['in'])
+    expect(store.defaults).toEqual({ newMessageId: null, replyId: 'in' })
+  })
+
+  it('첫 서명을 만들면 두 곳의 기본이 그 서명이다 — 그다음 서명은 기본을 바꾸지 않는다', async () => {
+    let created = 0
+    installMockApi(
+      server({
+        list: [],
+        defaults: { newMessageId: null, replyId: null },
+        extra: (request) => {
+          if (request.method !== 'POST') return undefined
+          created += 1
+          const body = request.data as { name: string }
+          return ok(signature(`s${created}`, body.name), 201)
+        },
+      }),
+    )
+    const store = useMailSignatureStore()
+    await store.ensureLoaded()
+
+    await store.create({ name: '기본 서명', bodyHtml: '<p>김아라</p>', body: '김아라' })
+    expect(store.defaults).toEqual({ newMessageId: 's1', replyId: 's1' })
+    await store.create({ name: '영문', bodyHtml: null, body: null })
+    expect(store.signatures.map((item) => item.name)).toEqual(['기본 서명', '영문'])
+    expect(store.defaults).toEqual({ newMessageId: 's1', replyId: 's1' })
+  })
+
+  it('지우면 목록에서 빼고 그 서명을 기본으로 넣던 곳은 넣지 않음 — 이미 없으면(RES_001) 알리지 않고 지운 것으로 본다', async () => {
+    installMockApi(
+      server({
+        defaults: { newMessageId: 'out', replyId: 'out' },
+        extra: (request) => {
+          if (request.method !== 'DELETE') return undefined
+          return request.url === '/mail-signatures/out' ? { status: 204 } : fail(404, 'RES_001')
+        },
+      }),
+    )
+    const store = useMailSignatureStore()
+    await store.ensureLoaded()
+
+    await store.remove('out')
+    expect(store.signatures.map((item) => item.id)).toEqual(['in'])
+    expect(store.defaults).toEqual({ newMessageId: null, replyId: null })
+
+    await store.remove('in')
+    expect(store.signatures).toEqual([])
+    expect(useToastStore().toasts).toEqual([])
+  })
+
+  describe('기본 둘 고르기 — 고르는 대로 저장, 한 번에 하나', () => {
+    it('화면을 먼저 바꾸고 PUT — 보내는 동안 다시 고르면 끝난 뒤 마지막 것만 보낸다', async () => {
+      const held: ((result: MockResult) => void)[] = []
+      const requests = installMockApi(
+        server({
+          extra: (request) =>
+            request.method === 'PUT'
+              ? new Promise<MockResult>((resolve) => {
+                  held.push(resolve)
+                })
+              : undefined,
+        }),
+      )
+      const store = useMailSignatureStore()
+      await store.ensureLoaded()
+      const puts = () => requests.filter((request) => request.method === 'PUT').map((request) => request.data)
+
+      const firstSave = store.chooseDefault('reply', 'out')
+      expect(store.defaults).toEqual({ newMessageId: 'out', replyId: 'out' })
+      const secondSave = store.chooseDefault('new', null)
+      const thirdSave = store.chooseDefault('new', 'in')
+      expect(store.defaults).toEqual({ newMessageId: 'in', replyId: 'out' })
+      await flushPromises()
+      expect(puts()).toEqual([{ newMessageId: 'out', replyId: 'out' }])
+
+      held.shift()?.(ok({ newMessageId: 'out', replyId: 'out' }))
+      await flushPromises()
+      // 앞 저장이 끝났다 — 마지막으로 고른 것만 이어 보낸다 (그사이 고른 null 은 보내지 않는다)
+      expect(puts()).toEqual([
+        { newMessageId: 'out', replyId: 'out' },
+        { newMessageId: 'in', replyId: 'out' },
+      ])
+      held.shift()?.(ok({ newMessageId: 'in', replyId: 'out' }))
+      await expect(Promise.all([firstSave, secondSave, thirdSave])).resolves.toEqual([true, true, true])
+      expect(store.defaults).toEqual({ newMessageId: 'in', replyId: 'out' })
+      expect(store.defaultsSaving).toBe(false)
+    })
+
+    it('저장하지 못하면 서버가 확인해 준 값으로 되돌린다 (알림은 인터셉터)', async () => {
+      installMockApi(server({ extra: (request) => (request.method === 'PUT' ? fail(503, 'MAIL_001') : undefined) }))
+      const store = useMailSignatureStore()
+      await store.ensureLoaded()
+
+      await expect(store.chooseDefault('new', 'in')).resolves.toBe(false)
+      expect(store.defaults).toEqual(DEFAULTS)
+      expect(useToastStore().toasts.map((toast) => toast.kind)).toEqual(['error'])
+    })
+
+    it('받기 전에는 고르지 않는다', async () => {
+      const requests = installMockApi(server())
+      const store = useMailSignatureStore()
+      await expect(store.chooseDefault('new', 'in')).resolves.toBe(false)
+      expect(requests).toEqual([])
+    })
+  })
+
+  it('조용히 다시 받기 — 받는 사이 이 탭에서 바꿨으면 받은 값을 버린다', async () => {
+    let list = [IN, OUT]
+    /** 목록 응답을 내기 전에 할 일 — 그 일이 끝난 뒤에 목록을 낸다 */
+    let beforeList: (() => Promise<unknown>) | null = null
+    installMockApi(async (request) => {
+      if (request.method === 'GET' && request.url === '/mail-signatures') {
+        const reply = page(list)
+        const before = beforeList
+        beforeList = null
+        if (before) await before()
+        return reply
+      }
+      if (request.method === 'GET') return ok(DEFAULTS)
+      if (request.method === 'PUT') return ok(signature('in', '사내 2'))
+      return ok(null)
+    })
+    const store = useMailSignatureStore()
+    await store.ensureLoaded()
+
+    // 다른 창에서 서명을 하나 더 만들었다 — 다시 받으면 보인다
+    list = [IN, OUT, signature('en', '영문')]
+    await expect(store.refresh()).resolves.toBe(true)
+    expect(store.signatures.map((item) => item.name)).toEqual(['사내', '대외', '영문'])
+
+    // 받는 사이 이 탭에서 고쳤다 — 늦게 온 옛 목록이 고친 것을 덮지 않는다
+    list = [IN, OUT]
+    beforeList = () => store.update('in', { name: '사내 2', bodyHtml: null, body: null })
+    await expect(store.refresh()).resolves.toBe(false)
+    expect(store.signatures.map((item) => item.name)).toEqual(['사내 2', '대외', '영문'])
+  })
+
+  it('사용자가 바뀌면 비운다 — 이전 사용자의 서명이 남지 않게', async () => {
+    installMockApi(server())
+    const store = useMailSignatureStore()
+    await store.ensureLoaded()
 
     useAuthStore().clearAuth()
     await nextTick()
-    expect(store.signature).toBeNull()
+    expect(store.signatures).toEqual([])
+    expect(store.defaults).toEqual({ newMessageId: null, replyId: null })
     expect(store.status).toBe('idle')
   })
 })
diff --git a/frontend/src/stores/mail-signature.store.ts b/frontend/src/stores/mail-signature.store.ts
index 8629c49..91d5d53 100644
--- a/frontend/src/stores/mail-signature.store.ts
+++ b/frontend/src/stores/mail-signature.store.ts
@@ -2,75 +2,256 @@ import { ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 
 import { toApiError, type ApiError } from '@/composables/useApi'
-import { useMail, type MailRequestOptions } from '@/composables/useMail'
-import type { MailSignature, SaveSignaturePayload } from '@/shared/types/mail'
+import { useMailSignatures, type MailSignatureRequestOptions } from '@/composables/useMailSignatures'
+import type {
+  MailSignature,
+  MailSignatureDefaults,
+  MailSignaturePayload,
+  SignatureUse,
+} from '@/shared/types/mail-signature'
+import { sameSignatureDefaults, withoutSignatureDefault } from '@/shared/utils/mail-signature'
 import { useAuthStore } from '@/stores/auth.store'
 import type { LoadStatus } from '@/stores/mail.store'
 
-// 메일 서명 스토어 — 계약 2절 "서명" (사용자마다 하나)
-// - 쓰기 화면은 열 때 서명을 넣는다 — 메일 화면에 들어올 때 미리 받아 두고(ensureSignature), 쓰기 화면은 그 값을 쓴다.
-//   못 받았으면 서명 없이 연다 (알리지 않는다 — 서명은 쓰기를 막을 일이 아니다)
-// - 설정 화면은 들어올 때마다 새로 받는다(load) — 다른 창에서 고쳤을 수 있다. 오류는 화면이 직접 그린다
-// - 저장(save)한 값이 곧 다음 쓰기 화면의 서명이다
+const NO_DEFAULTS: MailSignatureDefaults = { newMessageId: null, replyId: null }
+
+// 여러 서명 스토어 — 계약 2절 "서명" (16단계 — 직원마다 서명 10개 · 기본 둘, 디자인 원본 Signature16)
+// - 받기: 목록(GET /mail-signatures)과 기본 둘(GET /mail-signature-defaults)을 함께 받는다 — 둘 다 와야 ready, 하나라도 실패하면 error(알리지 않는다).
+//   메일 화면은 들어올 때 받아 두고(ensureLoaded — 쓰기 화면이 기다리지 않게), 쓰기 화면은 그 값을 쓴다. 못 받았으면 서명 없이 연다
+//   (서명은 쓰기를 막을 일이 아니다). 설정 화면은 들어올 때마다 새로 받는다(load) — 다른 창에서 고쳤을 수 있다. 오류는 화면이 그린다
+// - 만들기 · 고치기 · 지우기는 성공하면 받아 둔 목록을 그 자리에서 고친다(다시 받지 않는다). 서명이 하나도 없던 직원의 첫 서명은
+//   서버가 기본 둘로 정한다 — 같게 맞춘다. 지운 서명을 기본으로 넣던 곳은 넣지 않음(null)
+// - 기본 둘(chooseDefault): 고르는 대로 PUT — 화면을 먼저 바꾸고, **저장은 한 번에 하나**(보내기 · 읽기 설정과 같은 결):
+//   보내는 동안 다시 고르면 마지막으로 고른 것만 기억했다가 앞 저장이 끝난 뒤 서버의 답과 다르면 보낸다.
+//   마지막으로 고른 것의 저장이 실패하면 서버가 마지막으로 확인해 준 값으로 되돌린다(오류 알림은 인터셉터)
+// - 세션이 바뀐 뒤(로그아웃 · 다른 계정 — reset) · 다시 받은 뒤(load) 늦게 온 응답은 쓰지 않는다 (authStore.generation · 순번)
 export const useMailSignatureStore = defineStore('mail-signature', () => {
-  const mailApi = useMail()
+  const signatureApi = useMailSignatures()
   const authStore = useAuthStore()
 
-  const signature = ref<MailSignature | null>(null)
+  /** 내 서명 — 만든 차례 */
+  const signatures = ref<MailSignature[]>([])
+  /** 보이는 기본 둘 — 고르면 저장이 끝나기 전에 먼저 바뀐다 (마지막으로 고른 값) */
+  const defaults = ref<MailSignatureDefaults>({ ...NO_DEFAULTS })
   const status = ref<LoadStatus>('idle')
   const error = ref<ApiError | null>(null)
+  /** 기본 둘을 저장하는 중 */
+  const defaultsSaving = ref<boolean>(false)
 
-  let seq = 0
-  let pending: Promise<MailSignature | null> | null = null
+  let loadSeq = 0
+  let pending: Promise<boolean> | null = null
+  /** 받은 뒤 이 탭에서 바꾼 횟수 — 조용히 다시 받는 사이(refresh) 바꿨으면 받은 값을 버린다 */
+  let changeSeq = 0
+  /** 서버가 마지막으로 확인해 준 기본 둘 — 마지막으로 고른 것의 저장이 실패하면 이 값으로 되돌린다 */
+  let confirmedDefaults: MailSignatureDefaults = { ...NO_DEFAULTS }
+  /** 마지막으로 고른 기본 둘 — 도는 저장이 끝나면 이것을 본다 (보낼 것이 남았는지) */
+  let wantedDefaults: MailSignatureDefaults | null = null
+  /** 도는 기본 둘 저장 — 한 번에 하나 */
+  let defaultsChain: Promise<boolean> | null = null
 
-  /** 서명을 새로 받는다 — 실패하면 null (알림 없이 상태에 담는다) */
-  function load(): Promise<MailSignature | null> {
-    seq += 1
-    const current = seq
+  function apply(list: MailSignature[], chosen: MailSignatureDefaults) {
+    signatures.value = list
+    defaults.value = { ...chosen }
+    confirmedDefaults = { ...chosen }
+  }
+
+  /** 기다리던 기본 둘 저장을 잊는다 — 새로 받기 전(load) · 세션이 바뀔 때(reset). 늦게 끝나는 저장은 순번으로 버린다 */
+  function forgetDefaultsSave() {
+    wantedDefaults = null
+    defaultsChain = null
+    defaultsSaving.value = false
+  }
+
+  /** 서명 — 없으면 null */
+  function signatureById(id: string | null): MailSignature | null {
+    if (id === null) return null
+    return signatures.value.find((signature) => signature.id === id) ?? null
+  }
+
+  /** 그 쓰기 종류에 넣을 서명 — 넣지 않음이거나 그 서명이 없으면 null */
+  function defaultSignature(use: SignatureUse): MailSignature | null {
+    return signatureById(use === 'new' ? defaults.value.newMessageId : defaults.value.replyId)
+  }
+
+  /** 새로 받는다 — 목록과 기본 둘을 함께. 실패하면 false (알림 없이 상태에 담는다) */
+  function load(): Promise<boolean> {
+    loadSeq += 1
+    const current = loadSeq
+    const session = authStore.generation
     status.value = 'loading'
     error.value = null
+    forgetDefaultsSave()
+    const stale = () => current !== loadSeq || session !== authStore.generation
     const request = (async () => {
       try {
-        const result = await mailApi.getSignature({ silent: true })
-        if (current !== seq) return signature.value
-        signature.value = result
+        const [list, chosen] = await Promise.all([
+          signatureApi.listSignatures({ silent: true }),
+          signatureApi.getDefaults({ silent: true }),
+        ])
+        if (stale()) return status.value === 'ready'
+        apply(list, chosen)
         status.value = 'ready'
-        return result
+        return true
       } catch (caught) {
-        if (current !== seq) return signature.value
+        if (stale()) return status.value === 'ready'
         status.value = 'error'
         error.value = toApiError(caught)
-        return null
+        return false
       } finally {
-        if (current === seq) pending = null
+        if (current === loadSeq) pending = null
       }
     })()
     pending = request
     return request
   }
 
-  /** 받아 둔 서명 — 아직 없거나 실패했으면 받는다 (받는 중이면 그 결과를 기다린다) */
-  function ensureSignature(): Promise<MailSignature | null> {
-    if (status.value === 'ready') return Promise.resolve(signature.value)
+  /** 받아 둔 것을 쓴다 — 아직 없거나 실패했으면 받는다 (받는 중이면 그 결과를 기다린다). 받았으면 true */
+  function ensureLoaded(): Promise<boolean> {
+    if (status.value === 'ready') return Promise.resolve(true)
     if (pending) return pending
     return load()
   }
 
-  /** 서명 저장 — 실패하면 예외가 그대로 올라간다 (칸 안 안내는 화면이 한다) */
-  async function save(payload: SaveSignaturePayload, options?: MailRequestOptions): Promise<MailSignature> {
-    const result = await mailApi.saveSignature(payload, options)
-    seq += 1
-    pending = null
-    signature.value = result
-    status.value = 'ready'
-    error.value = null
-    return result
+  /**
+   * 조용히 다시 받는다 — 받는 동안에도 지금 값 그대로(loading 으로 바꾸지 않는다). 받는 사이 이 탭에서 바꿨거나(만들기 · 고치기 · 지우기 · 기본 고르기)
+   * 다시 받았거나 세션이 바뀌었으면 받은 값을 버린다. 서명 화면이 저장 거절(VAL_001)의 까닭을 가를 때 쓴다(다른 창에서 같은 이름을 만들었는지)
+   */
+  async function refresh(): Promise<boolean> {
+    if (status.value !== 'ready') return false
+    const session = authStore.generation
+    const sessionLoad = loadSeq
+    const changes = changeSeq
+    try {
+      const [list, chosen] = await Promise.all([
+        signatureApi.listSignatures({ silent: true }),
+        signatureApi.getDefaults({ silent: true }),
+      ])
+      const stale =
+        session !== authStore.generation || sessionLoad !== loadSeq || changes !== changeSeq || defaultsChain !== null
+      if (stale) return false
+      apply(list, chosen)
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  /**
+   * 새 서명 — 실패하면 예외가 그대로 올라간다(칸 안 안내는 화면이 한다). 목록 끝에 붙이고,
+   * 서명이 하나도 없던 직원이면 기본 둘을 이 서명으로 맞춘다 (서버가 그렇게 정한다)
+   */
+  async function create(payload: MailSignaturePayload, options?: MailSignatureRequestOptions): Promise<MailSignature> {
+    const session = authStore.generation
+    const wasEmpty = signatures.value.length === 0
+    const created = await signatureApi.createSignature(payload, options)
+    if (session !== authStore.generation) return created
+    changeSeq += 1
+    signatures.value = [...signatures.value.filter((signature) => signature.id !== created.id), created]
+    if (wasEmpty) {
+      const both = { newMessageId: created.id, replyId: created.id }
+      defaults.value = both
+      confirmedDefaults = { ...both }
+    }
+    return created
+  }
+
+  /** 서명 고치기 — 이름 · 본문 전체. 실패하면 예외가 그대로 올라간다 */
+  async function update(
+    id: string,
+    payload: MailSignaturePayload,
+    options?: MailSignatureRequestOptions,
+  ): Promise<MailSignature> {
+    const session = authStore.generation
+    const updated = await signatureApi.updateSignature(id, payload, options)
+    if (session !== authStore.generation) return updated
+    changeSeq += 1
+    signatures.value = signatures.value.map((signature) => (signature.id === id ? updated : signature))
+    return updated
+  }
+
+  /**
+   * 서명 지우기 — 그 서명을 기본으로 넣던 곳은 넣지 않음. 이미 없으면(RES_001 — 다른 창에서 지웠다) 지운 것으로 본다(알리지 않는다).
+   * 그 밖의 실패는 예외가 그대로 올라간다(알림은 인터셉터)
+   */
+  async function remove(id: string): Promise<void> {
+    const session = authStore.generation
+    try {
+      await signatureApi.deleteSignature(id, { silent: ['RES_001'] })
+    } catch (caught) {
+      if (toApiError(caught).code !== 'RES_001') throw caught
+    }
+    if (session !== authStore.generation) return
+    changeSeq += 1
+    signatures.value = signatures.value.filter((signature) => signature.id !== id)
+    defaults.value = withoutSignatureDefault(defaults.value, id)
+    confirmedDefaults = withoutSignatureDefault(confirmedDefaults, id)
+    if (wantedDefaults) wantedDefaults = withoutSignatureDefault(wantedDefaults, id)
+  }
+
+  /** 기본 둘 저장 — 끝나면 마지막으로 고른 값이 서버의 답과 다를 때만 그것을 이어 보낸다. 마지막 요청이 성공했으면 true */
+  async function flushDefaults(): Promise<boolean> {
+    const session = authStore.generation
+    const sessionLoad = loadSeq
+    const stillCurrent = () => session === authStore.generation && sessionLoad === loadSeq
+    defaultsSaving.value = true
+    let succeeded = false
+    try {
+      let sending = wantedDefaults ?? defaults.value
+      for (;;) {
+        let next: MailSignatureDefaults | null = null
+        try {
+          const result = await signatureApi.saveDefaults(sending)
+          if (!stillCurrent()) return false
+          succeeded = true
+          confirmedDefaults = { ...result }
+          const latest = wantedDefaults ?? sending
+          if (!sameSignatureDefaults(latest, sending) && !sameSignatureDefaults(latest, result)) next = latest
+          else defaults.value = { ...result }
+        } catch {
+          if (!stillCurrent()) return false
+          succeeded = false
+          const latest = wantedDefaults ?? sending
+          if (!sameSignatureDefaults(latest, sending) && !sameSignatureDefaults(latest, confirmedDefaults)) next = latest
+          else defaults.value = { ...confirmedDefaults }
+        }
+        if (!next) break
+        sending = next
+      }
+      return succeeded
+    } finally {
+      if (stillCurrent()) {
+        wantedDefaults = null
+        defaultsChain = null
+        defaultsSaving.value = false
+      }
+    }
+  }
+
+  /**
+   * 기본 하나를 고른다(서명 id · 넣지 않음 null) — 화면을 먼저 바꾸고 PUT. 저장이 이미 돌고 있으면 고른 값만 기억한다(앞 저장이 끝나면 이어 보낸다).
+   * 받기 전 · 받는 중이면 하지 않는다(false). 돌려주는 약속은 저장이 다 끝났을 때 — 마지막 요청이 성공했으면 true
+   */
+  function chooseDefault(use: SignatureUse, id: string | null): Promise<boolean> {
+    if (status.value !== 'ready') return Promise.resolve(false)
+    const next: MailSignatureDefaults =
+      use === 'new' ? { ...defaults.value, newMessageId: id } : { ...defaults.value, replyId: id }
+    defaults.value = next
+    wantedDefaults = next
+    changeSeq += 1
+    if (defaultsChain) return defaultsChain
+    const chain = flushDefaults()
+    defaultsChain = chain
+    return chain
   }
 
   function reset() {
-    seq += 1
+    loadSeq += 1
     pending = null
-    signature.value = null
+    changeSeq += 1
+    forgetDefaultsSave()
+    signatures.value = []
+    defaults.value = { ...NO_DEFAULTS }
+    confirmedDefaults = { ...NO_DEFAULTS }
     status.value = 'idle'
     error.value = null
   }
@@ -81,5 +262,21 @@ export const useMailSignatureStore = defineStore('mail-signature', () => {
     () => reset(),
   )
 
-  return { signature, status, error, load, ensureSignature, save, reset }
+  return {
+    signatures,
+    defaults,
+    status,
+    error,
+    defaultsSaving,
+    signatureById,
+    defaultSignature,
+    load,
+    ensureLoaded,
+    refresh,
+    create,
+    update,
+    remove,
+    chooseDefault,
+    reset,
+  }
 })
diff --git a/frontend/src/stores/mail-vacation.store.spec.ts b/frontend/src/stores/mail-vacation.store.spec.ts
index 523485c..bc6afe0 100644
--- a/frontend/src/stores/mail-vacation.store.spec.ts
+++ b/frontend/src/stores/mail-vacation.store.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 
-import type { MailVacation, MailVacationState } from '@/shared/types/mail'
+import type { MailVacation, MailVacationExternal, MailVacationState } from '@/shared/types/mail'
 import { useAuthStore } from '@/stores/auth.store'
 import { useToastStore } from '@/stores/toast.store'
 import { installMockApi, ok, restoreApiAdapter, type MockRequest, type MockResult } from '@/test-utils/mock-api'
@@ -13,7 +13,7 @@ import { useMailVacationStore } from './mail-vacation.store'
 const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
 const OTHER = { email: 'minsu.park@arasystem.it.kr', name: '박민수' }
 
-/** PUT 본문 — 다섯 칸 */
+/** 4단계 칸 다섯 */
 const BODY: MailVacation = {
   isEnabled: true,
   fromDate: null,
@@ -21,8 +21,12 @@ const BODY: MailVacation = {
   subject: '부재중입니다',
   textBody: '11월 3일까지 자리를 비웁니다.',
 }
+/** 16단계 칸 — 서식 본문 · 회사 밖 응답의 처음 값(글만 · 사내와 같은 응답) */
+const SAME: MailVacationExternal = { mode: 'same', subject: null, textBody: null, htmlBody: null }
+/** PUT 본문 — 일곱 칸 (16단계) */
+const FULL: MailVacation = { ...BODY, htmlBody: null, external: SAME }
 /** GET · PUT 응답 — 본문 + 엔진에서 동작하는지 (7단계) */
-const ON: MailVacationState = { ...BODY, isActive: true }
+const ON: MailVacationState = { ...FULL, isActive: true }
 
 /** 응답을 손으로 끝내는 요청 — 그 사이에 세션을 바꿔 본다 */
 function deferred() {
@@ -107,13 +111,13 @@ describe('mail-vacation.store — 늦게 온 응답', () => {
     await store.load()
     expect(store.vacation?.isActive).toBe(false)
 
-    // 7단계 앞의 서버 — isActive 가 없다
+    // 7단계 앞의 서버 — isActive 가 없다 (16단계 칸도 없다 — 글만 · 사내와 같은 응답으로 읽는다)
     reply = BODY
     await store.load()
-    expect(store.vacation).toEqual({ ...BODY, isActive: true })
+    expect(store.vacation).toEqual({ ...FULL, isActive: true })
   })
 
-  it('저장 본문에는 isActive 를 넣지 않는다 — 받은 값(isActive: false)을 그대로 넘겨도 다섯 칸만, 응답의 isActive 로 맞춘다', async () => {
+  it('저장 본문에는 isActive 를 넣지 않는다 — 받은 값(isActive: false)을 그대로 넘겨도 일곱 칸만, 응답의 isActive 로 맞춘다', async () => {
     requests = installMockApi((request) => (request.method === 'PUT' ? ok({ ...ON, isActive: true }) : ok({ ...ON, isActive: false })))
     const store = useMailVacationStore()
     const loaded = await store.load()
@@ -121,7 +125,28 @@ describe('mail-vacation.store — 늦게 온 응답', () => {
 
     await store.save(loaded as MailVacationState)
 
-    expect(requests[1]?.data).toEqual(BODY)
+    expect(requests[1]?.data).toEqual(FULL)
     expect(store.vacation?.isActive).toBe(true)
   })
+
+  it('16단계 칸 — 서식 본문 · 회사 밖 응답을 그대로 받고 보낸다, 모양이 틀린 칸은 글만 · 사내와 같은 응답으로', async () => {
+    const external: MailVacationExternal = {
+      mode: 'separate',
+      subject: '부재중 안내',
+      textBody: '11월 20일까지 자리를 비웁니다.',
+      htmlBody: '<div><p><strong>11월 20일</strong>까지 자리를 비웁니다.</p></div>',
+    }
+    const rich: MailVacationState = { ...ON, htmlBody: '<div><p>11월 3일까지 자리를 비웁니다.</p></div>', external }
+    let reply: unknown = rich
+    requests = installMockApi((request) => (request.method === 'PUT' ? ok(request.data) : ok(reply)))
+    const store = useMailVacationStore()
+
+    expect(await store.load()).toEqual(rich)
+    await store.save(rich)
+    // isActive 는 빼고 일곱 칸 — 회사 밖 응답의 모르는 칸도 싣지 않는다
+    expect(requests[1]?.data).toEqual({ ...BODY, htmlBody: rich.htmlBody, external })
+
+    reply = { ...BODY, isActive: true, htmlBody: 3, external: { mode: 'later' } }
+    expect(await store.load()).toEqual(ON)
+  })
 })
diff --git a/frontend/src/stores/mail-vacation.store.ts b/frontend/src/stores/mail-vacation.store.ts
index c19d8df..37e0c07 100644
--- a/frontend/src/stores/mail-vacation.store.ts
+++ b/frontend/src/stores/mail-vacation.store.ts
@@ -12,7 +12,7 @@ import type { LoadStatus } from '@/stores/mail.store'
 // - 설정 화면은 들어올 때마다 새로 받는다(load) — 다른 창 · 메일 프로그램에서 바꿨을 수 있다. 오류는 화면이 직접 그린다
 // - 저장(save)한 값이 곧 패널 안내의 값이다. 응답의 isActive(7단계 — 엔진에서 지금 동작하는지)도 함께 둔다 — 설정 화면의
 //   "켜 둔 자동 응답이 지금은 동작하지 않습니다" 줄은 저장한 값이 켜짐이고 isActive 가 false 일 때다(저장하면 응답의 값으로 내린다).
-//   PUT 본문에는 넣지 않는다 (useMail.saveVacation 이 다섯 칸만 보낸다)
+//   PUT 본문에는 넣지 않는다 (useMail.saveVacation 이 일곱 칸만 보낸다 — 16단계의 서식 본문 · 회사 밖 응답까지)
 // - 세션이 바뀐 뒤(로그아웃 · 다른 계정 — reset) 늦게 온 응답은 쓰지 않는다: 불러오기는 순번(seq — reset 이 올린다),
 //   저장은 세션 세대(authStore.generation — 그사이 불러오기가 있어도 저장한 값이 더 새롭다)로 가린다
 export const useMailVacationStore = defineStore('mail-vacation', () => {
diff --git a/frontend/src/stores/toast.store.spec.ts b/frontend/src/stores/toast.store.spec.ts
index 22c0257..1e28fbe 100644
--- a/frontend/src/stores/toast.store.spec.ts
+++ b/frontend/src/stores/toast.store.spec.ts
@@ -296,4 +296,67 @@ describe('toast.store', () => {
       wrapper.unmount()
     })
   })
+
+  describe('✕로 닫을 때까지 남는 알림 — 16단계 주소록 가져오기 결과 (디자인 원본 Contacts16 "4")', () => {
+    it('저절로 닫히지 않고, 넘쳐도 다른 알림부터 닫는다 — 지금 쓰는 알림의 시간은 그대로', () => {
+      const store = useToastStore()
+      store.show({ kind: 'success', message: '연락처 330명을 넣었습니다.', action: undo, sticky: true })
+      store.show({ kind: 'success', message: '하나' })
+      vi.advanceTimersByTime(10 * 60_000)
+      expect(messages()).toEqual(['연락처 330명을 넣었습니다.'])
+
+      store.show({ kind: 'success', message: '둘' })
+      store.show({ kind: 'success', message: '셋' })
+      store.show({ kind: 'success', message: '넷' })
+      expect(messages()).toEqual(['연락처 330명을 넣었습니다.', '셋', '넷'])
+      expect(store.toasts.map((toast) => toast.sticky)).toEqual([true, false, false])
+    })
+
+    it('진행 알림의 결과로 바꿀 수 있다 — succeed · fail 의 sticky (진행 알림 자체는 sticky 가 아니다)', () => {
+      const store = useToastStore()
+      const progress = useToast().progress('연락처를 넣는 중 · 0 / 330명')
+      expect(store.toasts[0]?.sticky).toBe(false)
+
+      progress.succeed('연락처 330명을 넣었습니다.', { label: '되돌리기', run: () => undefined }, { sticky: true })
+      vi.advanceTimersByTime(TOAST_ACTION_DURATION_MS * 10)
+      expect(messages()).toEqual(['연락처 330명을 넣었습니다.'])
+
+      const failing = useToast().progress('가져온 연락처를 지우는 중')
+      failing.fail('멈췄습니다.', { label: '다시 시도', run: () => undefined }, { sticky: true })
+      vi.advanceTimersByTime(TOAST_ACTION_DURATION_MS * 10)
+      expect(messages()).toEqual(['연락처 330명을 넣었습니다.', '멈췄습니다.'])
+
+      // sticky 를 주지 않은 결과는 지금처럼 10초
+      const plain = useToast().progress('필터 적용 중')
+      plain.succeed('적용했습니다.', { label: '보기', run: () => undefined })
+      vi.advanceTimersByTime(TOAST_ACTION_DURATION_MS)
+      expect(messages()).toEqual(['연락처 330명을 넣었습니다.', '멈췄습니다.'])
+    })
+
+    it('세션이 바뀌면 단추 알림처럼 닫는다', async () => {
+      useAuthStore().startSession({ email: 'ara.kim@arasystem.test', name: '김아라' })
+      useToast().success('연락처 330명을 넣었습니다.', undo, { sticky: true })
+      useAuthStore().clearAuth()
+      await nextTick()
+      expect(messages()).toEqual([])
+    })
+
+    it('ToastHost — 성공 알림에도 ✕(알림 닫기)를 단다, 누르면 닫힌다. sticky 가 아닌 성공 알림에는 ✕ 가 없다', async () => {
+      const router = createTestRouter()
+      const wrapper = mount(ToastHost, { attachTo: document.body, global: { plugins: [pinia, router] } })
+      useToast().success('연락처 330명을 넣었습니다.', undo, { sticky: true })
+      useToast().success('연락처를 저장했습니다.')
+      await nextTick()
+
+      const [sticky, plain] = wrapper.findAll('.toast')
+      expect(plain?.find('[data-toast-close]').exists()).toBe(false)
+      const close = sticky?.get('[data-toast-close]')
+      expect(close?.attributes('aria-label')).toBe('알림 닫기')
+      expect(close?.classes()).toContain('toast__close--on-brand')
+
+      await close?.trigger('click')
+      expect(messages()).toEqual(['연락처를 저장했습니다.'])
+      wrapper.unmount()
+    })
+  })
 })
diff --git a/frontend/src/stores/toast.store.ts b/frontend/src/stores/toast.store.ts
index fdd5a30..682bd21 100644
--- a/frontend/src/stores/toast.store.ts
+++ b/frontend/src/stores/toast.store.ts
@@ -15,6 +15,8 @@ import { useAuthStore } from '@/stores/auth.store'
 // (단추 자체도 만든 세션에서만 움직인다 — useToast).
 // 마감 시각이 있는 알림(expiresAt — 9단계 [보내기 취소]: 서버가 그 시각에 보낸다)은 그때 닫는다 — 마우스 · 초점이 있어도 멈추지 않는다
 // (그 시각이 지나면 단추가 할 수 있는 일이 없다 — WCAG 2.2.1 의 실시간 예외). ToastHost 가 남은 시간 막대를 그린다.
+// ✕로 닫을 때까지 남는 알림(sticky — 16단계 주소록 가져오기의 결과 [되돌리기] · 멈춤 [다시 시도])은 저절로 닫히지 않고 넘쳐도 다른 알림부터 닫는다.
+// ToastHost 가 성공 알림에도 ✕ 를 그린다. 세션이 바뀌면 다른 단추 알림처럼 닫는다 (지금 쓰는 곳의 알림은 sticky 가 아니라 그대로다)
 
 export type ToastKind = 'error' | 'success' | 'progress'
 /** 정해진 시간 뒤에 닫히는 알림 */
@@ -35,6 +37,8 @@ export interface Toast {
   shownAt: number
   /** 닫히는 시각(ms — Date.now) — 정해 두면 그때 닫고 붙잡아도 멈추지 않는다 (보내기 취소). 없으면 null */
   expiresAt: number | null
+  /** ✕로 닫을 때까지 남는다 — 저절로 닫히지 않는다 (16단계 가져오기 결과). 진행 알림에는 쓰지 않는다 */
+  sticky: boolean
 }
 
 export interface ToastInput {
@@ -44,6 +48,8 @@ export interface ToastInput {
   action?: ToastAction | null
   /** 닫히는 시각(ms — Date.now) — 진행 알림에는 쓰지 않는다 */
   expiresAt?: number | null
+  /** ✕로 닫을 때까지 남긴다 — 진행 알림에는 쓰지 않는다 */
+  sticky?: boolean
 }
 
 /** 동시에 보이는 최대 개수 — 넘치면 오래된 것부터 닫는다 (진행 알림은 뒤로 미룬다) */
@@ -61,9 +67,9 @@ export const TOAST_ACTION_DURATION_MS = 10_000
 /** 알림을 붙잡아 두는 까닭 — 마우스가 올라가 있다 · 초점이 안에 있다 */
 export type ToastHoldReason = 'pointer' | 'focus'
 
-/** 닫히기까지의 시간 — 진행 알림은 없다(null). 마감 시각이 있으면 그것이 앞선다(deadlineOf) */
-function durationOf(toast: Pick<Toast, 'kind' | 'action'>): number | null {
-  if (toast.kind === 'progress') return null
+/** 닫히기까지의 시간 — 진행 알림 · ✕까지 남는 알림은 없다(null). 마감 시각이 있으면 그것이 앞선다(deadlineOf) */
+function durationOf(toast: Pick<Toast, 'kind' | 'action' | 'sticky'>): number | null {
+  if (toast.kind === 'progress' || toast.sticky) return null
   return toast.action ? TOAST_ACTION_DURATION_MS : TOAST_DURATION_MS[toast.kind]
 }
 
@@ -72,9 +78,12 @@ function deadlineOf(toast: Pick<Toast, 'kind' | 'expiresAt'>): number | null {
   return toast.kind === 'progress' ? null : toast.expiresAt
 }
 
-/** 넘쳐도 뒤로 미루는 알림 — 진행 중인 알림 · 마감 시각이 있는 알림(보내기 취소 — 그 시각이 지나면 되돌릴 수 없다) */
+/**
+ * 넘쳐도 뒤로 미루는 알림 — 진행 중인 알림 · 마감 시각이 있는 알림(보내기 취소 — 그 시각이 지나면 되돌릴 수 없다) ·
+ * ✕까지 남는 알림(가져오기 결과 — 여러 명을 한꺼번에 되돌리는 길이 그 알림뿐이다)
+ */
 function isLingering(toast: Toast): boolean {
-  return toast.kind === 'progress' || toast.expiresAt !== null
+  return toast.kind === 'progress' || toast.expiresAt !== null || toast.sticky
 }
 
 /** 넘친 만큼 닫을 알림 — 오래된 것부터, 진행 중 · 마감이 있는 알림은 다른 알림이 모자랄 때만. 방금 띄운 것은 닫지 않는다 */
@@ -148,7 +157,7 @@ export const useToastStore = defineStore('toast', () => {
    * 닫히기까지의 시간을 정한다 — 붙잡혀 있지 않으면 바로 센다 (진행 알림은 시간이 없다).
    * 마감 시각이 있으면 붙잡혀 있어도 그 시각까지 센다
    */
-  function setDuration(id: number, toast: Pick<Toast, 'kind' | 'action' | 'expiresAt'>) {
+  function setDuration(id: number, toast: Pick<Toast, 'kind' | 'action' | 'expiresAt' | 'sticky'>) {
     const duration = durationOf(toast)
     const deadline = deadlineOf(toast)
     stopTimer(id)
@@ -198,6 +207,7 @@ export const useToastStore = defineStore('toast', () => {
       action: input.action ?? null,
       shownAt: Date.now(),
       expiresAt: input.kind === 'progress' ? null : (input.expiresAt ?? null),
+      sticky: input.kind !== 'progress' && input.sticky === true,
     }
     const all = [...toasts.value, next]
     const evicted = overflowOf(all, id)
@@ -210,7 +220,7 @@ export const useToastStore = defineStore('toast', () => {
 
   /**
    * 띄운 알림을 그 자리에서 바꾼다 — 진행 문구를 고치거나, 끝난 진행 알림을 결과(성공 · 오류)로 바꾼다.
-   * 종류 · 단추가 바뀌면 그에 맞는 시간을 처음부터 센다 (진행 알림이 되면 저절로 닫히지 않는다).
+   * 종류 · 단추 · ✕까지 남기기가 바뀌면 그에 맞는 시간을 처음부터 센다 (진행 알림이 되면 저절로 닫히지 않는다).
    * 이미 닫힌 알림이면 false — 부르는 쪽이 새로 띄울지 정한다
    */
   function update(id: number, patch: Partial<Omit<ToastInput, 'kind'>> & { kind?: ToastKind }): boolean {
@@ -224,9 +234,15 @@ export const useToastStore = defineStore('toast', () => {
       traceId: patch.traceId === undefined ? current.traceId : patch.traceId,
       action: patch.action === undefined ? current.action : patch.action,
       expiresAt: kind === 'progress' ? null : patch.expiresAt === undefined ? current.expiresAt : patch.expiresAt,
+      sticky: kind !== 'progress' && (patch.sticky === undefined ? current.sticky : patch.sticky),
     }
     toasts.value = toasts.value.map((toast) => (toast.id === id ? next : toast))
-    if (next.kind !== current.kind || next.action !== current.action || next.expiresAt !== current.expiresAt) {
+    if (
+      next.kind !== current.kind ||
+      next.action !== current.action ||
+      next.expiresAt !== current.expiresAt ||
+      next.sticky !== current.sticky
+    ) {
       setDuration(id, next)
     }
     return true
diff --git a/frontend/src/test-utils/euc-kr.ts b/frontend/src/test-utils/euc-kr.ts
new file mode 100644
index 0000000..0c59604
--- /dev/null
+++ b/frontend/src/test-utils/euc-kr.ts
@@ -0,0 +1,35 @@
+// 단위 테스트 전용 — 글을 EUC-KR(CP949) 바이트로 바꾼다 (16단계 주소록 가져오기 — 한국어 엑셀의 "CSV(쉼표로 분리)" 흉내).
+// 브라우저 · Node 의 TextEncoder 는 UTF-8 만 만든다 — TextDecoder('euc-kr')로 두 바이트 글자를 모두 풀어 거꾸로 찾는 표를 만든다.
+// 앱 코드에서 import 하지 않는다
+
+let table: Map<string, [number, number]> | null = null
+
+function reverseTable(): Map<string, [number, number]> {
+  if (table) return table
+  const decoder = new TextDecoder('euc-kr')
+  const map = new Map<string, [number, number]>()
+  for (let lead = 0x81; lead <= 0xfe; lead += 1) {
+    for (let trail = 0x41; trail <= 0xfe; trail += 1) {
+      const char = decoder.decode(Uint8Array.from([lead, trail]))
+      if (char.length === 1 && char !== '�' && !map.has(char)) map.set(char, [lead, trail])
+    }
+  }
+  table = map
+  return map
+}
+
+export function encodeEucKr(text: string): Uint8Array {
+  const map = reverseTable()
+  const bytes: number[] = []
+  for (const char of text) {
+    const code = char.charCodeAt(0)
+    if (code < 0x80) {
+      bytes.push(code)
+      continue
+    }
+    const pair = map.get(char)
+    if (!pair) throw new Error(`EUC-KR 로 쓸 수 없는 글자: ${char}`)
+    bytes.push(...pair)
+  }
+  return Uint8Array.from(bytes)
+}
diff --git a/frontend/src/test-utils/zip.ts b/frontend/src/test-utils/zip.ts
new file mode 100644
index 0000000..629d13f
--- /dev/null
+++ b/frontend/src/test-utils/zip.ts
@@ -0,0 +1,173 @@
+// 단위 테스트 전용 — 작은 zip(.xlsx)을 만든다 (16단계 주소록 가져오기 시험). 앱 코드에서 import 하지 않는다.
+// 항목마다 그대로(store) 또는 deflate(CompressionStream('deflate-raw')). CRC 는 0 — 읽는 쪽(zip.ts)은 CRC 를 보지 않는다
+
+export interface ZipInput {
+  name: string
+  data: string | Uint8Array
+  /** 처음 값 deflate */
+  method?: 'store' | 'deflate'
+  /** 암호를 건 항목 표시(일반 목적 비트 0) — 읽는 쪽이 거절하는지 본다 */
+  encrypted?: boolean
+}
+
+async function deflateRaw(data: Uint8Array): Promise<Uint8Array> {
+  const stream = new CompressionStream('deflate-raw')
+  const writer = stream.writable.getWriter()
+  void writer.write(data.slice()).then(() => writer.close())
+  const chunks: Uint8Array[] = []
+  const reader = stream.readable.getReader()
+  for (;;) {
+    const { done, value } = await reader.read()
+    if (done) break
+    chunks.push(value)
+  }
+  const total = chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0)
+  const result = new Uint8Array(total)
+  let at = 0
+  for (const chunk of chunks) {
+    result.set(chunk, at)
+    at += chunk.byteLength
+  }
+  return result
+}
+
+function u16(value: number): number[] {
+  return [value & 0xff, (value >>> 8) & 0xff]
+}
+
+function u32(value: number): number[] {
+  return [value & 0xff, (value >>> 8) & 0xff, (value >>> 16) & 0xff, (value >>> 24) & 0xff]
+}
+
+export async function buildZip(inputs: readonly ZipInput[]): Promise<Uint8Array> {
+  const encoder = new TextEncoder()
+  const local: number[] = []
+  const central: number[] = []
+  for (const input of inputs) {
+    const name = encoder.encode(input.name)
+    const raw = typeof input.data === 'string' ? encoder.encode(input.data) : input.data
+    const method = input.method === 'store' ? 0 : 8
+    const data = method === 8 ? await deflateRaw(raw) : raw
+    const flags = input.encrypted ? 1 : 0
+    const offset = local.length
+    local.push(
+      ...u32(0x04034b50),
+      ...u16(20),
+      ...u16(flags),
+      ...u16(method),
+      ...u16(0),
+      ...u16(0),
+      ...u32(0),
+      ...u32(data.length),
+      ...u32(raw.length),
+      ...u16(name.length),
+      ...u16(0),
+      ...name,
+      ...data,
+    )
+    central.push(
+      ...u32(0x02014b50),
+      ...u16(20),
+      ...u16(20),
+      ...u16(flags),
+      ...u16(method),
+      ...u16(0),
+      ...u16(0),
+      ...u32(0),
+      ...u32(data.length),
+      ...u32(raw.length),
+      ...u16(name.length),
+      ...u16(0),
+      ...u16(0),
+      ...u16(0),
+      ...u16(0),
+      ...u32(0),
+      ...u32(offset),
+      ...name,
+    )
+  }
+  const end = [
+    ...u32(0x06054b50),
+    ...u16(0),
+    ...u16(0),
+    ...u16(inputs.length),
+    ...u16(inputs.length),
+    ...u32(central.length),
+    ...u32(local.length),
+    ...u16(0),
+  ]
+  return Uint8Array.from([...local, ...central, ...end])
+}
+
+const SPREADSHEET_NS = 'http://schemas.openxmlformats.org/spreadsheetml/2006/main'
+const RELATIONSHIPS_NS = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships'
+const PACKAGE_RELS_NS = 'http://schemas.openxmlformats.org/package/2006/relationships'
+
+function escapeXml(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+function columnName(index: number): string {
+  let name = ''
+  let rest = index + 1
+  while (rest > 0) {
+    const remainder = (rest - 1) % 26
+    name = String.fromCharCode(65 + remainder) + name
+    rest = Math.floor((rest - 1) / 26)
+  }
+  return name
+}
+
+/**
+ * 시트 하나짜리 .xlsx — 칸은 칸 안 문자열(inlineStr — 네이버 내보내기) 또는 공유 문자열(sharedStrings — 엑셀이 저장한 파일).
+ * 빈 칸은 쓰지 않는다(엑셀처럼 — 칸 자리는 r 로 맞춘다). sheetFile 로 시트 파일 이름을 바꿀 수 있다(workbook.xml.rels 로 찾는지)
+ */
+export async function buildXlsx(
+  rows: readonly (readonly string[])[],
+  options: { strings?: 'inline' | 'shared'; sheetFile?: string; sheetName?: string } = {},
+): Promise<Uint8Array> {
+  const strings = options.strings ?? 'inline'
+  const sheetFile = options.sheetFile ?? 'sheet1.xml'
+  const shared: string[] = []
+  const sharedIndex = new Map<string, number>()
+  const rowXml = rows
+    .map((cells, rowIndex) => {
+      const cellXml = cells
+        .map((value, columnIndex) => {
+          if (value === '') return ''
+          const ref = `${columnName(columnIndex)}${rowIndex + 1}`
+          if (strings === 'inline') return `<c r="${ref}" t="inlineStr"><is><t>${escapeXml(value)}</t></is></c>`
+          let index = sharedIndex.get(value)
+          if (index === undefined) {
+            index = shared.length
+            shared.push(value)
+            sharedIndex.set(value, index)
+          }
+          return `<c r="${ref}" t="s"><v>${index}</v></c>`
+        })
+        .join('')
+      return `<row r="${rowIndex + 1}">${cellXml}</row>`
+    })
+    .join('')
+  const entries: { name: string; data: string }[] = [
+    {
+      name: 'xl/workbook.xml',
+      data: `<?xml version="1.0" encoding="UTF-8"?><workbook xmlns="${SPREADSHEET_NS}" xmlns:r="${RELATIONSHIPS_NS}"><sheets><sheet name="${options.sheetName ?? 'Sheet0'}" sheetId="1" r:id="rId1"/></sheets></workbook>`,
+    },
+    {
+      name: 'xl/_rels/workbook.xml.rels',
+      data: `<?xml version="1.0" encoding="UTF-8"?><Relationships xmlns="${PACKAGE_RELS_NS}"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/${sheetFile}"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings" Target="sharedStrings.xml"/></Relationships>`,
+    },
+    {
+      name: `xl/worksheets/${sheetFile}`,
+      data: `<?xml version="1.0" encoding="UTF-8"?><worksheet xmlns="${SPREADSHEET_NS}"><sheetData>${rowXml}</sheetData></worksheet>`,
+    },
+  ]
+  if (strings === 'shared') {
+    entries.push({
+      name: 'xl/sharedStrings.xml',
+      data: `<?xml version="1.0" encoding="UTF-8"?><sst xmlns="${SPREADSHEET_NS}" count="${shared.length}" uniqueCount="${shared.length}">${shared.map((value) => `<si><t>${escapeXml(value)}</t></si>`).join('')}</sst>`,
+    })
+  }
+  return buildZip([{ name: '[Content_Types].xml', data: '<Types/>' }, ...entries])
+}