From c31442e639a7acbe7a29d062a690a5f85362afc3 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sat, 31 Oct 2026 17:25:53 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=2012=EB=8B=A8=EA=B3=84=20?=
 =?UTF-8?q?=EA=B3=84=EC=A0=95=20=EB=B3=B4=EC=95=88=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=E2=80=94=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EB=8B=A8=EA=B3=84=20=C2=B7=202=EB=8B=A8=EA=B3=84=20=EC=9D=B8?=
 =?UTF-8?q?=EC=A6=9D=20=C2=B7=20=EC=95=B1=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=C2=B7=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EA=B8=B0?=
 =?UTF-8?q?=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

로그인은 비밀번호가 맞고 2단계를 켠 직원만 코드 단계로 간다. 설정 › 계정에 2단계 인증 · 앱 비밀번호 · 로그인 기록을 더하고,
비밀번호 화면에 2단계를 켠 직원의 코드 칸을 둔다.
비밀(코드 단계의 비밀번호 · 2단계 키 · 앱 비밀번호 값)은 화면 메모리에만 두고, 세션이 바뀌면 그 창을 모두 닫는다 —
12단계부터 다른 기기의 로그아웃이 이 세션을 바로 끊는다. 비밀이 드는 요청은 Pinia 액션 밖에서 보낸다(devtools 기록).
QR 은 uqr 0.1.3(MIT · 의존성 없음 — 2단계 인증 화면 청크에만)으로 SVG 를 그린다(v-html 없음).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/package-lock.json                    |   7 +
 frontend/package.json                         |   1 +
 frontend/src/components/LinkedText.vue        |  31 +
 frontend/src/components/QrCodeImage.vue       |  68 ++
 .../src/components/auth/LoginCodeStep.vue     | 344 ++++++++++
 .../settings/AppPasswordCreateDialog.vue      | 184 ++++++
 .../settings/AppPasswordDeleteDialog.vue      |  66 ++
 .../settings/AppPasswordResultDialog.vue      | 200 ++++++
 .../components/settings/AppPasswordTable.vue  | 208 ++++++
 .../settings/EndOtherSessionsDialog.vue       |  77 +++
 .../components/settings/LoginEventTable.vue   | 435 +++++++++++++
 .../components/settings/LoginSessionList.vue  | 439 +++++++++++++
 .../settings/MailClientSettings.vue           | 117 ++++
 .../src/components/settings/OtpCodeField.vue  | 137 ++++
 .../settings/PasswordChangeForm.vue           |  74 ++-
 .../src/components/settings/PasswordField.vue |  10 +-
 .../components/settings/SettingsPageFrame.vue |   5 +-
 .../settings/TwoFactorDisableDialog.vue       | 229 +++++++
 .../settings/TwoFactorEnableDialog.vue        | 403 ++++++++++++
 .../settings/TwoFactorEnrollmentScan.vue      | 300 +++++++++
 .../src/composables/useAccountSecurity.ts     | 129 ++++
 frontend/src/composables/useApi.spec.ts       |   5 +
 frontend/src/composables/useAuth.spec.ts      |  36 +-
 frontend/src/composables/useAuth.ts           |  25 +-
 frontend/src/composables/useLoginChallenge.ts |  89 +++
 frontend/src/pages/LoginPage.spec.ts          | 303 ++++++++-
 frontend/src/pages/LoginPage.vue              | 298 ++++++---
 .../settings/AccountAppPasswordsPage.spec.ts  | 427 ++++++++++++
 .../settings/AccountAppPasswordsPage.vue      | 430 +++++++++++++
 .../settings/AccountLoginHistoryPage.spec.ts  | 506 +++++++++++++++
 .../settings/AccountLoginHistoryPage.vue      |  94 +++
 .../settings/AccountPasswordPage.spec.ts      | 116 +++-
 .../pages/settings/AccountPasswordPage.vue    |  23 +-
 .../settings/AccountTwoFactorPage.spec.ts     | 608 ++++++++++++++++++
 .../pages/settings/AccountTwoFactorPage.vue   | 459 +++++++++++++
 .../src/pages/settings/SettingsLayout.spec.ts |  46 +-
 frontend/src/router/routes.ts                 |  23 +-
 .../src/shared/constants/account-security.ts  | 294 +++++++++
 frontend/src/shared/constants/account.ts      |   8 +-
 frontend/src/shared/constants/icons.ts        |  16 +
 .../src/shared/constants/settings-menu.ts     |  16 +-
 frontend/src/shared/types/account-security.ts | 109 ++++
 frontend/src/shared/types/auth.ts             |  23 +-
 .../src/shared/utils/account-security.spec.ts | 219 +++++++
 frontend/src/shared/utils/account-security.ts | 172 +++++
 frontend/src/shared/utils/format.ts           |   7 +
 frontend/src/shared/utils/qr-code.spec.ts     |  80 +++
 frontend/src/shared/utils/qr-code.ts          |  40 ++
 .../src/stores/app-passwords.store.spec.ts    |  79 +++
 frontend/src/stores/app-passwords.store.ts    |  97 +++
 .../src/stores/login-history.store.spec.ts    |  84 +++
 frontend/src/stores/login-history.store.ts    | 213 ++++++
 frontend/src/stores/two-factor.store.spec.ts  |  73 +++
 frontend/src/stores/two-factor.store.ts       |  89 +++
 frontend/src/test-utils/router.ts             |  19 +
 55 files changed, 8475 insertions(+), 115 deletions(-)
 create mode 100644 frontend/src/components/LinkedText.vue
 create mode 100644 frontend/src/components/QrCodeImage.vue
 create mode 100644 frontend/src/components/auth/LoginCodeStep.vue
 create mode 100644 frontend/src/components/settings/AppPasswordCreateDialog.vue
 create mode 100644 frontend/src/components/settings/AppPasswordDeleteDialog.vue
 create mode 100644 frontend/src/components/settings/AppPasswordResultDialog.vue
 create mode 100644 frontend/src/components/settings/AppPasswordTable.vue
 create mode 100644 frontend/src/components/settings/EndOtherSessionsDialog.vue
 create mode 100644 frontend/src/components/settings/LoginEventTable.vue
 create mode 100644 frontend/src/components/settings/LoginSessionList.vue
 create mode 100644 frontend/src/components/settings/MailClientSettings.vue
 create mode 100644 frontend/src/components/settings/OtpCodeField.vue
 create mode 100644 frontend/src/components/settings/TwoFactorDisableDialog.vue
 create mode 100644 frontend/src/components/settings/TwoFactorEnableDialog.vue
 create mode 100644 frontend/src/components/settings/TwoFactorEnrollmentScan.vue
 create mode 100644 frontend/src/composables/useAccountSecurity.ts
 create mode 100644 frontend/src/composables/useLoginChallenge.ts
 create mode 100644 frontend/src/pages/settings/AccountAppPasswordsPage.spec.ts
 create mode 100644 frontend/src/pages/settings/AccountAppPasswordsPage.vue
 create mode 100644 frontend/src/pages/settings/AccountLoginHistoryPage.spec.ts
 create mode 100644 frontend/src/pages/settings/AccountLoginHistoryPage.vue
 create mode 100644 frontend/src/pages/settings/AccountTwoFactorPage.spec.ts
 create mode 100644 frontend/src/pages/settings/AccountTwoFactorPage.vue
 create mode 100644 frontend/src/shared/constants/account-security.ts
 create mode 100644 frontend/src/shared/types/account-security.ts
 create mode 100644 frontend/src/shared/utils/account-security.spec.ts
 create mode 100644 frontend/src/shared/utils/account-security.ts
 create mode 100644 frontend/src/shared/utils/qr-code.spec.ts
 create mode 100644 frontend/src/shared/utils/qr-code.ts
 create mode 100644 frontend/src/stores/app-passwords.store.spec.ts
 create mode 100644 frontend/src/stores/app-passwords.store.ts
 create mode 100644 frontend/src/stores/login-history.store.spec.ts
 create mode 100644 frontend/src/stores/login-history.store.ts
 create mode 100644 frontend/src/stores/two-factor.store.spec.ts
 create mode 100644 frontend/src/stores/two-factor.store.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5a4a8c6..51a3ef7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "dompurify": "^3.4.17",
         "pinia": "^3.0.4",
         "pretendard": "^1.3.9",
+        "uqr": "0.1.3",
         "vue": "^3.5.43",
         "vue-router": "^4.4.5"
       },
@@ -6811,6 +6812,12 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uqr": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
+      "integrity": "sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==",
+      "license": "MIT"
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index fab549e..51aa287 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
     "dompurify": "^3.4.17",
     "pinia": "^3.0.4",
     "pretendard": "^1.3.9",
+    "uqr": "0.1.3",
     "vue": "^3.5.43",
     "vue-router": "^4.4.5"
   },
diff --git a/frontend/src/components/LinkedText.vue b/frontend/src/components/LinkedText.vue
new file mode 100644
index 0000000..5c95e4c
--- /dev/null
+++ b/frontend/src/components/LinkedText.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// 글 가운데 앱 안 링크 하나 — "켜기 전에 [앱 비밀번호]를 만들어 두면 편합니다." 처럼 앞 · 링크 · 뒤 글을 빈칸 없이 잇는다
+// (RouterLink 를 글 사이에 바로 쓰면 템플릿의 줄바꿈이 링크 글 앞뒤의 빈칸이 된다 — 링크는 RouterLink 의 custom 슬롯으로 <a> 하나만 그린다)
+// 사용 예: <LinkedText :before="…" link="앱 비밀번호" :after="…" :to="{ name: SETTINGS_ROUTES.appPasswords }" />
+import type { RouteLocationRaw } from 'vue-router'
+
+interface Props {
+  before?: string
+  link: string
+  after?: string
+  to: RouteLocationRaw
+}
+
+withDefaults(defineProps<Props>(), {
+  before: '',
+  after: '',
+})
+</script>
+
+<template>
+  <span>{{ before }}<RouterLink
+    v-slot="{ href, navigate }"
+    :to="to"
+    custom
+  >
+    <a
+      :href="href"
+      @click="navigate"
+    >{{ link }}</a>
+  </RouterLink>{{ after }}</span>
+</template>
diff --git a/frontend/src/components/QrCodeImage.vue b/frontend/src/components/QrCodeImage.vue
new file mode 100644
index 0000000..314bacb
--- /dev/null
+++ b/frontend/src/components/QrCodeImage.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+// QR 코드 그림 — 2단계 인증 켜기 창 (디자인 원본 SettingsTwoFactor: 흰 바탕 · 테두리 상자 안의 QR)
+// 칸은 shared/utils/qr-code.ts 가 고르고 여기서는 SVG <rect> 를 v-for 로 그린다 — v-html 을 쓰지 않는다.
+// 바깥 여백(quiet zone)은 칸 2개 + 상자 안쪽 여백 — 읽는 앱이 그림의 끝을 알아보게 둔다.
+// 이름(label)은 role="img" 의 aria-label — 그림의 내용(비밀이 든 주소)은 읽어 주지 않는다
+import { computed } from 'vue'
+
+import { qrModuleRuns } from '@/shared/utils/qr-code'
+
+interface Props {
+  /** QR 에 담을 글 — otpauth 주소 */
+  value: string
+  /** 그림의 이름 (스크린리더) */
+  label: string
+}
+
+const props = defineProps<Props>()
+
+/** 바깥 여백 칸 수 */
+const QUIET_ZONE = 2
+
+const modules = computed(() => qrModuleRuns(props.value))
+const extent = computed(() => modules.value.size + QUIET_ZONE * 2)
+const viewBox = computed(() => `0 0 ${extent.value} ${extent.value}`)
+</script>
+
+<template>
+  <svg
+    class="qr-code"
+    role="img"
+    :aria-label="label"
+    :viewBox="viewBox"
+    shape-rendering="crispEdges"
+    data-qr-code
+  >
+    <rect
+      class="qr-code__background"
+      :width="extent"
+      :height="extent"
+    />
+    <rect
+      v-for="run in modules.runs"
+      :key="`${run.y}-${run.x}`"
+      class="qr-code__module"
+      :x="run.x + QUIET_ZONE"
+      :y="run.y + QUIET_ZONE"
+      :width="run.width"
+      height="1"
+    />
+  </svg>
+</template>
+
+<style scoped>
+/* 160 — 실제 otpauth 주소는 49칸 남짓이라 디자인 보드(128 — 25칸짜리 예시)보다 키워 칸 하나가 3px 를 넘게 한다 */
+.qr-code {
+  display: block;
+  width: 10rem;
+  height: 10rem;
+}
+
+.qr-code__background {
+  fill: var(--color-surface);
+}
+
+.qr-code__module {
+  fill: var(--color-text);
+}
+</style>
diff --git a/frontend/src/components/auth/LoginCodeStep.vue b/frontend/src/components/auth/LoginCodeStep.vue
new file mode 100644
index 0000000..2698faf
--- /dev/null
+++ b/frontend/src/components/auth/LoginCodeStep.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+// 로그인 — 코드 단계 (디자인 원본 LoginTwoFactor · README "12단계 › 로그인 — 코드 단계" · 계약 5절 "로그인")
+// 틀은 로그인 화면과 같다: 제목 "2단계 인증" + 설명 → 주소 + [다른 계정으로 로그인] → (위쪽 빨간 상자) → 코드 칸 + [확인] → 도움말 → 메일 프로그램 안내.
+// - 코드 칸: 숫자 6자리만 — 붙여 넣은 글의 띄어쓰기 · 하이픈은 지운다(normalizeOtpInput). inputmode="numeric" · autocomplete="one-time-code".
+//   maxlength 를 걸지 않는다 — 브라우저가 붙여 넣은 "123 456" 을 먼저 잘라 버린다
+// - 코드 틀림(AUTH_006)은 칸 아래 빨간 글(부모가 칸을 비우고 초점을 돌려준다), 시도 과다(REQ_001)는 위쪽 상자 — 로그인 오류와 같은 자리 · 같은 모양
+// - 확인 중: 「확인하는 중…」(로그인 단추와 같은 모양 · aria-busy), 칸은 읽기만, [다른 계정으로 로그인]도 누를 수 없다(aria-disabled).
+//   [확인]은 disabled 가 아니라 aria-disabled — 키보드 초점을 잃지 않게(시도 과다 · 장애 뒤에도 그 자리에 남는다). 바쁜 동안의 누름은 부모가 무시한다
+// 상태는 부모(LoginPage)가 가진다 — 비밀번호를 다시 실어 보내는 일이 부모 몫이라서. 고정 id: #login-code · #login-code-error · #login-code-alert
+import { ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import { LOGIN_TWO_FACTOR_TEXT, OTP_TEXT } from '@/shared/constants/account-security'
+import { normalizeOtpInput } from '@/shared/utils/account-security'
+
+interface Props {
+  /** 비밀번호를 확인한 주소 */
+  email: string
+  /** 코드 칸의 값 (v-model:code) */
+  code: string
+  submitting: boolean
+  /** 칸 아래 오류 — 사전 문구(AUTH_006 · AUTH_007) */
+  codeError: string | null
+  /** 위쪽 상자 — 사전 문구(REQ_001) */
+  alert: string | null
+}
+
+interface Emits {
+  (e: 'update:code', value: string): void
+  (e: 'submit'): void
+  (e: 'other-account'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const normalized = normalizeOtpInput(target.value)
+  // 값이 그대로면 다시 그리지 않으므로(숫자가 아닌 글자를 쳤을 때) 칸의 글도 직접 맞춘다
+  if (target.value !== normalized) target.value = normalized
+  emit('update:code', normalized)
+}
+
+function onOtherAccount() {
+  if (!props.submitting) emit('other-account')
+}
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+})
+</script>
+
+<template>
+  <div class="code-step">
+    <div class="code-step__heading">
+      <h1 class="code-step__title">
+        {{ LOGIN_TWO_FACTOR_TEXT.title }}
+      </h1>
+      <p class="code-step__subtitle">
+        {{ LOGIN_TWO_FACTOR_TEXT.subtitle }}
+      </p>
+    </div>
+
+    <div class="code-step__account">
+      <AppIcon
+        name="user"
+        class="code-step__account-icon"
+      />
+      <span
+        class="code-step__email"
+        data-code-step-email
+      >{{ email }}</span>
+      <button
+        type="button"
+        class="code-step__other"
+        :aria-disabled="submitting ? 'true' : undefined"
+        data-code-step-other
+        @click="onOtherAccount"
+      >
+        {{ LOGIN_TWO_FACTOR_TEXT.otherAccount }}
+      </button>
+    </div>
+
+    <p
+      v-if="alert"
+      id="login-code-alert"
+      class="code-step__alert"
+      role="alert"
+    >
+      <AppIcon
+        name="alert-circle"
+        class="code-step__alert-icon"
+      />
+      <span>{{ alert }}</span>
+    </p>
+
+    <form
+      class="code-step__form"
+      novalidate
+      @submit.prevent="emit('submit')"
+    >
+      <div class="code-step__field">
+        <label
+          for="login-code"
+          class="code-step__label"
+        >{{ LOGIN_TWO_FACTOR_TEXT.codeLabel }}</label>
+        <input
+          id="login-code"
+          ref="inputRef"
+          type="text"
+          name="one-time-code"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          spellcheck="false"
+          :placeholder="OTP_TEXT.placeholder"
+          :value="code"
+          :readonly="submitting"
+          :class="['code-step__input', { 'is-invalid': codeError }]"
+          :aria-invalid="codeError ? 'true' : undefined"
+          :aria-describedby="codeError ? 'login-code-error' : undefined"
+          @input="onInput"
+        >
+        <p
+          v-if="codeError"
+          id="login-code-error"
+          class="code-step__error"
+        >
+          <AppIcon
+            name="alert-circle"
+            :size="14"
+            :stroke-width="2"
+            class="code-step__error-icon"
+          />
+          <span>{{ codeError }}</span>
+        </p>
+      </div>
+      <button
+        type="submit"
+        class="code-step__submit"
+        :aria-disabled="submitting ? 'true' : undefined"
+        :aria-busy="submitting ? 'true' : 'false'"
+      >
+        {{ submitting ? LOGIN_TWO_FACTOR_TEXT.submitting : LOGIN_TWO_FACTOR_TEXT.submit }}
+      </button>
+    </form>
+
+    <p class="code-step__help">
+      {{ LOGIN_TWO_FACTOR_TEXT.help }}
+    </p>
+    <p class="code-step__note">
+      {{ LOGIN_TWO_FACTOR_TEXT.note }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+/* 로그인 화면의 패널과 같은 간격 — 묶음 사이 22 */
+.code-step {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-22);
+}
+
+.code-step__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.code-step__title {
+  margin: 0;
+  font-size: var(--font-size-heading-lg);
+  line-height: 1.35;
+  font-weight: 700;
+  letter-spacing: var(--letter-spacing-heading);
+}
+
+.code-step__subtitle {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+/* 주소 줄 48 — 바탕 #FBFBFC · 테두리, 오른쪽 끝에 [다른 계정으로 로그인](44) */
+.code-step__account {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-height: var(--space-48);
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-12);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+}
+
+.code-step__account-icon {
+  color: var(--color-text-muted);
+}
+
+.code-step__email {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.code-step__other {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--size-touch);
+  padding: 0 var(--space-10);
+  border: 0;
+  border-radius: var(--radius-item);
+  background: transparent;
+  color: var(--color-brand);
+  font-size: var(--font-size-label);
+  font-weight: 600;
+}
+
+.code-step__other:hover:not([aria-disabled='true']) {
+  color: var(--color-brand-strong);
+  background: var(--color-brand-subtle);
+}
+
+.code-step__other[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+/* 위쪽 빨간 상자 — 로그인 오류와 같은 모양 */
+.code-step__alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-8);
+  margin: 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);
+}
+
+.code-step__alert-icon {
+  margin-top: var(--space-1);
+}
+
+.code-step__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-14);
+}
+
+.code-step__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.code-step__label {
+  font-size: var(--font-size-label);
+  font-weight: 600;
+  color: var(--color-text-strong);
+}
+
+/* 18px · 글자 사이 0.3em · 고른 폭 숫자 (디자인 원본 LoginTwoFactor) */
+.code-step__input {
+  min-height: var(--size-touch);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-input);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--font-size-title-lg);
+  letter-spacing: 0.3em;
+  font-variant-numeric: tabular-nums;
+}
+
+.code-step__input.is-invalid {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 var(--border-width) var(--color-danger);
+}
+
+.code-step__input:read-only {
+  background: var(--color-surface-panel);
+  color: var(--color-text-secondary);
+}
+
+.code-step__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-6);
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-danger);
+}
+
+.code-step__error-icon {
+  margin-top: var(--space-2);
+}
+
+.code-step__submit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--size-touch);
+  margin-top: var(--space-6);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--color-brand);
+  color: var(--color-on-brand);
+  font-size: var(--font-size-body);
+  font-weight: 600;
+}
+
+.code-step__submit:hover:not([aria-disabled='true']) {
+  background: var(--color-brand-strong);
+}
+
+/* 확인하는 동안 — 흐리게 (disabled 가 아니라 aria-disabled — 초점을 잃지 않게, 누름은 부모가 무시한다) */
+.code-step__submit[aria-disabled='true'] {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+.code-step__help {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.code-step__note {
+  margin: 0;
+  padding-top: var(--space-16);
+  border-top: var(--border-width) solid var(--color-border-subtle);
+  font-size: var(--font-size-small);
+  line-height: 1.6;
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/settings/AppPasswordCreateDialog.vue b/frontend/src/components/settings/AppPasswordCreateDialog.vue
new file mode 100644
index 0000000..b8553e8
--- /dev/null
+++ b/frontend/src/components/settings/AppPasswordCreateDialog.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+// 앱 비밀번호 만들기 창 — 모달 400(medium) · 처음 초점은 이름 칸 (디자인 원본 SettingsAppPasswords "만들기 창" · 계약 5절 "앱 비밀번호")
+// 「이름」 + "어느 프로그램 · 기기에서 쓰는지 알아볼 이름입니다. 40자까지." → [만들기] [취소]
+// - 칸 아래(알림 없이): "이름을 넣어 주세요." · "같은 이름의 앱 비밀번호가 있습니다."(앞뒤 공백을 지운 값으로 화면이 먼저 본다) ·
+//   서버의 거절(그사이 다른 창에서 5개를 채움 AUTH_009 · 형식 VAL_001)은 부모가 사전 문구를 error 로 넘긴다
+// - Enter 는 [만들기]와 같다(한글 조합 중의 Enter 는 글자 확정이라 무시한다). 만드는 동안 [만들기]는 aria-disabled · aria-busy(초점을 지킨다)
+// - 요청은 부모(앱 비밀번호 화면)가 보낸다 — 값(password)이 든 응답이 이 창의 이벤트로 오가지 않게, 결과 창도 부모가 연다
+// 고정 id — #app-password-create-title · #app-password-name · #app-password-name-help
+import { computed, nextTick, ref, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import { getErrorMessage } from '@/composables/useApi'
+import {
+  APP_PASSWORD_CREATE_TEXT,
+  APP_PASSWORD_NAME_MAX_LENGTH,
+} from '@/shared/constants/account-security'
+import type { AppPassword } from '@/shared/types/account-security'
+import { appPasswordNameProblem, type AppPasswordNameProblem } from '@/shared/utils/account-security'
+import { isImeComposing } from '@/shared/utils/keyboard-shortcut'
+
+interface Props {
+  open: boolean
+  /** 지금 목록 — 같은 이름을 먼저 본다 */
+  existing: readonly AppPassword[]
+  /** 만드는 중 — [만들기]를 다시 누를 수 없다 */
+  pending?: boolean
+  /** 서버가 거절한 까닭(사전 문구) — 이름을 고치면 부모가 지운다(clear-error) */
+  error?: string | null
+}
+
+interface Emits {
+  /** 앞뒤 공백을 지운 이름 */
+  (e: 'submit', name: string): void
+  (e: 'close'): void
+  (e: 'clear-error'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pending: false,
+  error: null,
+})
+const emit = defineEmits<Emits>()
+
+const PROBLEM_TEXT: Readonly<Record<AppPasswordNameProblem, string>> = {
+  empty: APP_PASSWORD_CREATE_TEXT.empty,
+  duplicate: APP_PASSWORD_CREATE_TEXT.duplicate,
+  tooLong: getErrorMessage('VAL_001'),
+}
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const name = ref<string>('')
+/** 보내기 전에 막은 까닭 */
+const formatError = ref<string | null>(null)
+
+const shownError = computed(() => formatError.value ?? props.error)
+const message = computed(() => shownError.value ?? APP_PASSWORD_CREATE_TEXT.nameHelp)
+
+function onInput(event: Event) {
+  name.value = (event.target as HTMLInputElement).value
+  formatError.value = null
+  if (props.error) emit('clear-error')
+}
+
+function submit() {
+  if (props.pending) return
+  const problem = appPasswordNameProblem(name.value, props.existing)
+  if (problem) {
+    formatError.value = PROBLEM_TEXT[problem]
+    inputRef.value?.focus()
+    return
+  }
+  emit('submit', name.value.trim())
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' || isImeComposing(event)) return
+  event.preventDefault()
+  submit()
+}
+
+// 열 때마다 빈 칸으로
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) return
+    name.value = ''
+    formatError.value = null
+  },
+)
+
+// 서버가 거절하면 칸에 초점을 돌려준다 — 고쳐 쓰기 쉽게
+watch(
+  () => props.error,
+  (error) => {
+    if (error) void nextTick(() => inputRef.value?.focus())
+  },
+)
+</script>
+
+<template>
+  <ModalDialog
+    :open="open"
+    medium
+    :title="APP_PASSWORD_CREATE_TEXT.title"
+    title-id="app-password-create-title"
+    described-by="app-password-name-help"
+    @cancel="emit('close')"
+  >
+    <div class="create-name">
+      <label
+        for="app-password-name"
+        class="create-name__label"
+      >{{ APP_PASSWORD_CREATE_TEXT.nameLabel }}</label>
+      <input
+        id="app-password-name"
+        ref="inputRef"
+        class="form-input create-name__input"
+        type="text"
+        :value="name"
+        :maxlength="APP_PASSWORD_NAME_MAX_LENGTH"
+        :placeholder="APP_PASSWORD_CREATE_TEXT.namePlaceholder"
+        autocomplete="off"
+        :aria-invalid="shownError ? 'true' : 'false'"
+        aria-describedby="app-password-name-help"
+        autofocus
+        @input="onInput"
+        @keydown="onKeydown"
+      >
+      <p
+        id="app-password-name-help"
+        :class="['form-message', { 'form-message--error': shownError }]"
+        data-app-password-name-message
+      >
+        <AppIcon
+          v-if="shownError"
+          name="alert-circle"
+          :size="14"
+          :stroke-width="2"
+        />
+        <span>{{ message }}</span>
+      </p>
+    </div>
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action"
+        :aria-disabled="pending ? 'true' : undefined"
+        :aria-busy="pending ? 'true' : undefined"
+        data-app-password-create-submit
+        @click="submit"
+      >
+        {{ APP_PASSWORD_CREATE_TEXT.submit }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        data-app-password-create-cancel
+        @click="emit('close')"
+      >
+        {{ APP_PASSWORD_CREATE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+.create-name {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  margin-top: var(--space-4);
+}
+
+.create-name__label {
+  font-size: var(--font-size-label);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.create-name__input {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/components/settings/AppPasswordDeleteDialog.vue b/frontend/src/components/settings/AppPasswordDeleteDialog.vue
new file mode 100644
index 0000000..afbabf1
--- /dev/null
+++ b/frontend/src/components/settings/AppPasswordDeleteDialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+// 앱 비밀번호 지우기 확인 — alertdialog 400(medium) · 처음 초점 「취소」, Esc 도 취소 (디자인 원본 SettingsAppPasswords "지우기 확인 창")
+// "‘휴대폰 메일 앱’ 앱 비밀번호를 지울까요?" / "이 비밀번호로 연결한 메일 프로그램은 다음 연결부터 로그인하지 못합니다. 지운 비밀번호는 되돌릴 수 없습니다."
+// [지우기](빨강 채움) [취소]. 지우는 동안 [지우기]는 aria-disabled · aria-busy(초점을 지킨다)
+import { computed } from 'vue'
+
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import { APP_PASSWORD_DELETE_TEXT } from '@/shared/constants/account-security'
+
+interface Props {
+  /** 지울 앱 비밀번호의 이름 — 없으면 닫힌다 */
+  name: string | null
+  busy?: boolean
+}
+
+interface Emits {
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  busy: false,
+})
+const emit = defineEmits<Emits>()
+
+const title = computed(() => (props.name === null ? '' : APP_PASSWORD_DELETE_TEXT.title(props.name)))
+
+function onConfirm() {
+  if (!props.busy) emit('confirm')
+}
+</script>
+
+<template>
+  <ModalDialog
+    :open="name !== null"
+    role="alertdialog"
+    medium
+    :title="title"
+    :message="APP_PASSWORD_DELETE_TEXT.message"
+    title-id="app-password-delete-title"
+    message-id="app-password-delete-message"
+    @cancel="emit('cancel')"
+  >
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--danger"
+        :aria-disabled="busy ? 'true' : undefined"
+        :aria-busy="busy ? 'true' : undefined"
+        data-app-password-delete-confirm
+        @click="onConfirm"
+      >
+        {{ APP_PASSWORD_DELETE_TEXT.confirm }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        autofocus
+        data-app-password-delete-cancel
+        @click="emit('cancel')"
+      >
+        {{ APP_PASSWORD_DELETE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
diff --git a/frontend/src/components/settings/AppPasswordResultDialog.vue b/frontend/src/components/settings/AppPasswordResultDialog.vue
new file mode 100644
index 0000000..a4f7a14
--- /dev/null
+++ b/frontend/src/components/settings/AppPasswordResultDialog.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+// 앱 비밀번호를 만든 결과 창 — 모달 620(wide) · 처음 초점 [복사] (디자인 원본 SettingsAppPasswords "만든 결과 창" · 계약 5절 "앱 비밀번호")
+// "앱 비밀번호를 만들었습니다" / "‘회사 PC 아웃룩’ — 메일 프로그램의 비밀번호 칸에 아래 값을 넣어 주세요."
+// - 값은 고정폭으로 4자씩 떨어뜨려 보이지만 띄어쓰기는 없다(조각 사이를 여백으로 — 골라 복사해도 값 그대로) — [복사]는 값 그대로 복사한다.
+//   "40자입니다. 보기 좋게 4자씩 띄웠지만 띄어쓰기는 없습니다." — 글자 수는 받은 값의 길이로 쓴다.
+//   묶음은 줄바꿈 없는 inline-block 덩어리 — 넓으면 한 줄, 좁으면 묶음 사이에서만 줄이 바뀐다(묶음이 둘로 갈리지 않는다 — 2026-10-31 브라우저 점검)
+// - 경고 "이 창을 닫으면 다시 볼 수 없습니다. …" + 설정값 요약 + [닫기]
+// - 복사 「앱 비밀번호를 복사했습니다.」 / 못 하면 「앱 비밀번호를 복사하지 못했습니다. 값을 직접 골라 복사해 주세요.」
+// - [닫기] · Esc 로 닫으면 부모가 값을 화면 메모리에서도 지운다. 복사하지 않고 닫아도 다시 묻지 않는다
+// [복사]는 44 — 디자인 보드 크기(README 의 36 은 밀도 예외 줄의 단추와 묶어 적은 것 — 창의 주 동작이라 보통 크기로 둔다)
+// 고정 id — #app-password-result-title · #app-password-result-message
+import { computed } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import MailClientSettings from '@/components/settings/MailClientSettings.vue'
+import { useToast } from '@/composables/useToast'
+import { APP_PASSWORD_RESULT_TEXT } from '@/shared/constants/account-security'
+import { groupCharacters } from '@/shared/utils/account-security'
+import { copyText } from '@/shared/utils/clipboard'
+import { formatCount } from '@/shared/utils/format'
+
+interface Props {
+  /** 만든 앱 비밀번호의 이름 · 값 — 없으면 닫힌다 */
+  result: { name: string; password: string } | null
+  /** 직원 주소 — 설정값 요약의 사용자 이름 */
+  email: string
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const toast = useToast()
+
+const groups = computed(() => (props.result ? groupCharacters(props.result.password) : []))
+const message = computed(() => (props.result ? APP_PASSWORD_RESULT_TEXT.message(props.result.name) : ''))
+const lengthNote = computed(() =>
+  APP_PASSWORD_RESULT_TEXT.lengthNote(formatCount(props.result?.password.length ?? 0)),
+)
+
+async function copy() {
+  const value = props.result?.password
+  if (!value) return
+  if (await copyText(value)) toast.success(APP_PASSWORD_RESULT_TEXT.copied)
+  else toast.error(APP_PASSWORD_RESULT_TEXT.copyFailed)
+}
+</script>
+
+<template>
+  <ModalDialog
+    :open="result !== null"
+    wide
+    :title="APP_PASSWORD_RESULT_TEXT.title"
+    :message="message"
+    title-id="app-password-result-title"
+    message-id="app-password-result-message"
+    @cancel="emit('close')"
+  >
+    <div class="result__value-box">
+      <code
+        class="result__value"
+        data-app-password-value
+      ><span
+        v-for="(group, index) in groups"
+        :key="index"
+        class="result__group"
+      >{{ group }}</span></code>
+      <button
+        type="button"
+        class="result__copy"
+        :aria-label="APP_PASSWORD_RESULT_TEXT.copyLabel"
+        autofocus
+        data-app-password-copy
+        @click="copy"
+      >
+        <AppIcon
+          name="copy"
+          :size="15"
+        />
+        <span>{{ APP_PASSWORD_RESULT_TEXT.copy }}</span>
+      </button>
+    </div>
+    <p class="result__length">
+      {{ lengthNote }}
+    </p>
+    <div class="result__warning">
+      <AppIcon
+        name="alert-triangle"
+        :stroke-width="1.9"
+        class="result__warning-icon"
+      />
+      <span class="result__warning-text"><strong class="result__warning-strong">{{
+        APP_PASSWORD_RESULT_TEXT.warningStrong
+      }}</strong>{{ APP_PASSWORD_RESULT_TEXT.warningAfter }}</span>
+    </div>
+    <MailClientSettings
+      :email="email"
+      compact
+    />
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action"
+        data-app-password-result-close
+        @click="emit('close')"
+      >
+        {{ APP_PASSWORD_RESULT_TEXT.close }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+/* 값 상자 — 테두리 · 바탕 #F8F9FB · 안쪽 8 8 8 16 */
+.result__value-box {
+  display: flex;
+  align-items: center;
+  gap: var(--space-10);
+  margin-top: var(--space-4);
+  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-panel);
+}
+
+/* 값 — 고정폭 15px, 4자 조각 사이를 여백으로(띄어쓰기 없이). 누르면 한 번에 고른다 */
+.result__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
+  font-size: var(--font-size-title-sm);
+  line-height: 1.6;
+  color: var(--color-text);
+  user-select: all;
+}
+
+/*
+ * 4자 묶음 — 줄바꿈 없는 덩어리. inline-block 앞뒤가 줄이 바뀔 수 있는 자리라 좁으면 묶음 사이에서만 줄이 바뀐다.
+ * block · flex 로 나누지 않는다 — 골라 복사한 값에 줄바꿈이 끼면 메일 프로그램이 받지 않는다
+ */
+.result__group {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.result__group:not(:last-child) {
+  margin-right: var(--space-6);
+}
+
+.result__copy {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  min-height: var(--size-touch);
+  padding: 0 var(--space-14);
+  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;
+}
+
+.result__copy:hover {
+  background: var(--color-surface-muted);
+}
+
+.result__length {
+  margin: calc(var(--space-4) * -1) 0 0;
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+}
+
+/* 경고 — 노란 상자 · 경고 삼각형 */
+.result__warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-10);
+  padding: var(--space-10) var(--space-12);
+  border-radius: var(--radius-md);
+  background: var(--color-warning-surface);
+  color: var(--color-warning-text);
+}
+
+.result__warning-icon {
+  margin-top: var(--space-2);
+}
+
+.result__warning-text {
+  flex: 1 1 auto;
+}
+
+.result__warning-strong {
+  font-weight: 600;
+}
+</style>
diff --git a/frontend/src/components/settings/AppPasswordTable.vue b/frontend/src/components/settings/AppPasswordTable.vue
new file mode 100644
index 0000000..ee85d70
--- /dev/null
+++ b/frontend/src/components/settings/AppPasswordTable.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+// 앱 비밀번호 표 (디자인 원본 SettingsAppPasswords — 캔버스는 grid 로 그렸지만 구현은 실제 table)
+// 이름 · 만든 날 · 마지막 사용 · [지우기](36 — 밀도 예외, 빨간 글). 최근에 만든 것이 위, 긴 이름은 말줄임.
+// 마지막 사용은 "오늘 오전 9:12 · IMAP · 211.186.95.252" — 쓰지 않았으면 「아직 쓰지 않음」(회색 — 오래 쓰지 않은 줄은 지워도 된다는 신호)
+// 지우는 중인 줄의 단추는 aria-disabled · aria-busy (다시 누르는 것은 부모가 막는다)
+import { APP_PASSWORD_TEXT } from '@/shared/constants/account-security'
+import type { AppPassword } from '@/shared/types/account-security'
+import { appPasswordLastUsedText } from '@/shared/utils/account-security'
+import { formatBlockedDay } from '@/shared/utils/format'
+
+interface Props {
+  items: readonly AppPassword[]
+  /** 지금 시각(ms) — "오늘 · 어제" 와 연도 표기의 기준 */
+  now: number
+  /** 지우는 중인 줄 */
+  removingId?: string | null
+}
+
+interface Emits {
+  (e: 'delete', item: AppPassword): void
+}
+
+withDefaults(defineProps<Props>(), {
+  removingId: null,
+})
+const emit = defineEmits<Emits>()
+</script>
+
+<template>
+  <div class="app-password-table">
+    <table class="app-password-table__table">
+      <caption class="visually-hidden">
+        {{ APP_PASSWORD_TEXT.listLabel }}
+      </caption>
+      <colgroup>
+        <col>
+        <col class="app-password-table__col-created">
+        <col class="app-password-table__col-used">
+        <col class="app-password-table__col-actions">
+      </colgroup>
+      <thead>
+        <tr>
+          <th scope="col">
+            {{ APP_PASSWORD_TEXT.columnName }}
+          </th>
+          <th scope="col">
+            {{ APP_PASSWORD_TEXT.columnCreated }}
+          </th>
+          <th scope="col">
+            {{ APP_PASSWORD_TEXT.columnLastUsed }}
+          </th>
+          <th scope="col">
+            <span class="visually-hidden">{{ APP_PASSWORD_TEXT.columnActions }}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="item in items"
+          :key="item.id"
+          :data-app-password="item.id"
+        >
+          <td
+            class="app-password-table__name"
+            :title="item.name"
+          >
+            {{ item.name }}
+          </td>
+          <td class="app-password-table__created">
+            {{ formatBlockedDay(item.createdAt, new Date(now)) }}
+          </td>
+          <td
+            :class="['app-password-table__used', { 'app-password-table__used--never': !item.lastUsed }]"
+            data-app-password-used
+          >
+            {{ appPasswordLastUsedText(item.lastUsed, now) ?? APP_PASSWORD_TEXT.neverUsed }}
+          </td>
+          <td class="app-password-table__actions">
+            <button
+              type="button"
+              class="app-password-table__delete"
+              :aria-label="APP_PASSWORD_TEXT.deleteLabel(item.name)"
+              :aria-disabled="removingId ? 'true' : undefined"
+              :aria-busy="removingId === item.id ? 'true' : undefined"
+              data-app-password-delete
+              @click="emit('delete', item)"
+            >
+              {{ APP_PASSWORD_TEXT.delete }}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.app-password-table {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* 칸: 이름(나머지) · 만든 날 88 · 마지막 사용 264 · 지우기 72, 칸 사이 12 · 줄 앞 14 · 뒤 8 (디자인 원본 .ap-grid) */
+.app-password-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.app-password-table__col-created {
+  width: calc(5.5rem + var(--space-12));
+}
+
+.app-password-table__col-used {
+  width: calc(16.5rem + var(--space-12));
+}
+
+.app-password-table__col-actions {
+  width: calc(4.5rem + var(--space-12) + var(--space-8));
+}
+
+th,
+td {
+  padding: 0 0 0 var(--space-12);
+  text-align: left;
+  vertical-align: middle;
+}
+
+th:first-child,
+td:first-child {
+  padding-left: var(--space-14);
+}
+
+th:last-child,
+td:last-child {
+  padding-right: var(--space-8);
+}
+
+/* 머리 줄 32 — 바탕 #FBFBFC · 12px 굵게 회색 */
+thead th {
+  height: var(--size-table-head);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-sunken);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+/* 줄 44 */
+tbody td {
+  height: var(--size-touch);
+}
+
+tbody tr + tr td {
+  border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+.app-password-table__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.app-password-table__created {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-password-table__used {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-label);
+  color: var(--color-text-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-password-table__used--never {
+  color: var(--color-text-muted);
+}
+
+.app-password-table__actions {
+  text-align: right;
+}
+
+/* [지우기] 36 — 밀도 예외 (--size-notice-action), 빨간 글 테두리 단추 */
+.app-password-table__delete {
+  min-height: var(--size-notice-action);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-danger);
+  font-weight: 600;
+}
+
+.app-password-table__delete:hover:not([aria-disabled='true']) {
+  background: var(--color-danger-surface);
+}
+
+.app-password-table__delete[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: progress;
+}
+</style>
diff --git a/frontend/src/components/settings/EndOtherSessionsDialog.vue b/frontend/src/components/settings/EndOtherSessionsDialog.vue
new file mode 100644
index 0000000..46f457f
--- /dev/null
+++ b/frontend/src/components/settings/EndOtherSessionsDialog.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// [다른 곳 모두 로그아웃] 확인 — alertdialog 400(medium) · 처음 초점 「취소」, Esc 도 취소 (디자인 원본 SettingsLoginHistory "다른 곳 모두 로그아웃 — 확인 창")
+// "다른 곳의 로그인을 모두 끊을까요?" / "이 브라우저를 뺀 2곳(Edge · Windows, Safari · iOS)의 웹메일 로그인을 끊습니다. …" + 작은 글 "메일 프로그램은 끊기지 않습니다 — …"
+// [모두 로그아웃](청록 주 단추 — 데이터를 지우는 일이 아니다) [취소]. 끊는 동안 [모두 로그아웃]은 aria-disabled · aria-busy(초점을 지킨다)
+// 지금 이 브라우저 줄이 없으면(서버가 이 세션을 알아보지 못함) 제목 · 글이 "이 브라우저도 로그아웃된다"로 바뀐다 — 부모가 넘긴다
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import { END_OTHER_SESSIONS_TEXT } from '@/shared/constants/account-security'
+
+interface Props {
+  open: boolean
+  /** 창 제목 */
+  title: string
+  /** 창 글 — 끊을 곳의 수와 이름 (endOtherSessionsMessage) */
+  message: string
+  busy?: boolean
+}
+
+interface Emits {
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  busy: false,
+})
+const emit = defineEmits<Emits>()
+
+function onConfirm() {
+  if (!props.busy) emit('confirm')
+}
+</script>
+
+<template>
+  <ModalDialog
+    :open="open"
+    role="alertdialog"
+    medium
+    :title="title"
+    :message="message"
+    title-id="end-other-sessions-title"
+    message-id="end-other-sessions-message"
+    @cancel="emit('cancel')"
+  >
+    <p class="end-others__note">
+      {{ END_OTHER_SESSIONS_TEXT.note }}
+    </p>
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action"
+        :aria-disabled="busy ? 'true' : undefined"
+        :aria-busy="busy ? 'true' : undefined"
+        data-end-others-confirm
+        @click="onConfirm"
+      >
+        {{ END_OTHER_SESSIONS_TEXT.confirm }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        autofocus
+        data-end-others-cancel
+        @click="emit('cancel')"
+      >
+        {{ END_OTHER_SESSIONS_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+.end-others__note {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/settings/LoginEventTable.vue b/frontend/src/components/settings/LoginEventTable.vue
new file mode 100644
index 0000000..70a4a4b
--- /dev/null
+++ b/frontend/src/components/settings/LoginEventTable.vue
@@ -0,0 +1,435 @@
+<script setup lang="ts">
+// 설정 › 로그인 기록 › 최근 로그인 (디자인 원본 SettingsLoginHistory · 계약 5절 "로그인 기록")
+// 「최근 로그인」 + "최근 90일 · 웹메일과 메일 프로그램"(실패만이면 "최근 90일 · 실패 4번") · 오른쪽 전환 [전체 · 실패만](36 — .segmented 밀도 예외)
+// 표(구현은 실제 table): 시각 · 방식 · IP · 기기 · 결과 — 최근 순서 · 20개씩 [더 보기](44)
+// - 방식: "웹메일" / "메일 프로그램 · IMAP" · "메일 프로그램 · SMTP" + 앱 비밀번호로 들어왔으면 아래 줄 "앱 비밀번호 ‘회사 PC 아웃룩’"
+// - 기기: 웹메일은 "Chrome · Windows"(모르면 "알 수 없는 브라우저"), 메일 프로그램은 「—」. 나라 · 지역은 보이지 않는다
+// - 결과: 「성공」 · 「성공 · 2단계 인증」 · 「실패 — 비밀번호 틀림」 · 「실패 — 코드 틀림」 · 「실패 — 앱 비밀번호 필요」 — 실패는 빨간 굵은 글자만(뱃지 없음)
+// - 빈 상태(실패만): "최근 90일 동안 실패한 로그인이 없습니다" / "[전체]를 누르면 성공한 로그인도 봅니다."
+// - 보기를 바꾸면 그 보기로 처음부터 받는다 — 받는 동안 지난 목록은 그대로 두고 aria-busy (login-history.store)
+import { computed } from 'vue'
+
+import { LOGIN_HISTORY_TEXT } from '@/shared/constants/account-security'
+import type { LoginEvent } from '@/shared/types/account-security'
+import {
+  loginAppPasswordLabel,
+  loginDeviceLabel,
+  loginMethodLabel,
+  loginResultLabel,
+} from '@/shared/utils/account-security'
+import { formatCount, formatRelativeDayTime } from '@/shared/utils/format'
+import { useLoginHistoryStore, type LoginEventFilter } from '@/stores/login-history.store'
+
+interface Props {
+  /** 지금 시각(ms) — "오늘 오전 9:30" 의 기준 */
+  now: number
+}
+
+const props = defineProps<Props>()
+
+const loginHistoryStore = useLoginHistoryStore()
+
+const FILTERS: readonly { value: LoginEventFilter; label: string }[] = [
+  { value: 'all', label: LOGIN_HISTORY_TEXT.filterAll },
+  { value: 'failures', label: LOGIN_HISTORY_TEXT.filterFailures },
+]
+
+const events = computed(() => loginHistoryStore.events)
+const failuresShown = computed(() => loginHistoryStore.loadedFilter === 'failures')
+const hint = computed(() => {
+  if (!failuresShown.value) return LOGIN_HISTORY_TEXT.eventsHintAll
+  const total = loginHistoryStore.eventsPageInfo?.total
+  return typeof total === 'number'
+    ? LOGIN_HISTORY_TEXT.eventsHintFailures(formatCount(total))
+    : LOGIN_HISTORY_TEXT.eventsHintFailuresUnknown
+})
+const emptyTitle = computed(() =>
+  failuresShown.value ? LOGIN_HISTORY_TEXT.emptyFailuresTitle : LOGIN_HISTORY_TEXT.emptyAllTitle,
+)
+const emptyHint = computed(() =>
+  failuresShown.value ? LOGIN_HISTORY_TEXT.emptyFailuresHint : LOGIN_HISTORY_TEXT.emptyAllHint,
+)
+
+function timeText(event: LoginEvent): string {
+  return formatRelativeDayTime(event.occurredAt, new Date(props.now))
+}
+</script>
+
+<template>
+  <section
+    class="events"
+    aria-labelledby="login-events-title"
+  >
+    <div class="events__head">
+      <div class="events__heading">
+        <h2
+          id="login-events-title"
+          class="events__title"
+        >
+          {{ LOGIN_HISTORY_TEXT.eventsTitle }}
+        </h2>
+        <span
+          class="events__hint"
+          data-events-hint
+        >{{ hint }}</span>
+      </div>
+      <div
+        role="group"
+        class="segmented segmented--outline"
+        :aria-label="LOGIN_HISTORY_TEXT.filterLabel"
+      >
+        <button
+          v-for="filter in FILTERS"
+          :key="filter.value"
+          type="button"
+          class="segmented__item"
+          :aria-pressed="loginHistoryStore.eventsFilter === filter.value"
+          :data-events-filter="filter.value"
+          @click="loginHistoryStore.setFilter(filter.value)"
+        >
+          {{ filter.label }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="events.length > 0"
+      class="events__table-box"
+      :aria-busy="loginHistoryStore.eventsBusy ? 'true' : undefined"
+    >
+      <table class="events__table">
+        <caption class="visually-hidden">
+          {{ LOGIN_HISTORY_TEXT.eventsTitle }}
+        </caption>
+        <colgroup>
+          <col class="events__col-time">
+          <col>
+          <col class="events__col-ip">
+          <col class="events__col-device">
+          <col class="events__col-result">
+        </colgroup>
+        <thead>
+          <tr>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnTime }}
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnMethod }}
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnIp }}
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnKind }}
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnResult }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="event in events"
+            :key="event.id"
+            :data-login-event="event.id"
+          >
+            <td class="events__time">
+              {{ timeText(event) }}
+            </td>
+            <td class="events__method">
+              <span class="events__method-name">{{ loginMethodLabel(event.method) }}</span>
+              <span
+                v-if="loginAppPasswordLabel(event)"
+                class="events__app-password"
+                data-event-app-password
+              >{{ loginAppPasswordLabel(event) }}</span>
+            </td>
+            <td class="events__ip">
+              <template v-if="event.ip">
+                {{ event.ip }}
+              </template>
+              <template v-else>
+                <span aria-hidden="true">—</span>
+                <span class="visually-hidden">{{ LOGIN_HISTORY_TEXT.unknownValue }}</span>
+              </template>
+            </td>
+            <td
+              class="events__device"
+              data-event-device
+            >
+              <template v-if="loginDeviceLabel(event)">
+                {{ loginDeviceLabel(event) }}
+              </template>
+              <template v-else>
+                <span
+                  class="events__unknown"
+                  aria-hidden="true"
+                >—</span>
+                <span class="visually-hidden">{{ LOGIN_HISTORY_TEXT.unknownValue }}</span>
+              </template>
+            </td>
+            <td
+              :class="['events__result', { 'events__result--failure': loginResultLabel(event).isFailure }]"
+              data-event-result
+            >
+              {{ loginResultLabel(event).label }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div
+      v-else
+      class="events__empty"
+      :aria-busy="loginHistoryStore.eventsBusy ? 'true' : undefined"
+      data-events-empty
+    >
+      <p class="events__empty-title">
+        {{ emptyTitle }}
+      </p>
+      <p class="events__empty-hint">
+        {{ emptyHint }}
+      </p>
+    </div>
+
+    <div
+      v-if="loginHistoryStore.hasMoreEvents"
+      class="events__more"
+    >
+      <button
+        type="button"
+        class="events__more-button"
+        :aria-disabled="loginHistoryStore.loadingMore || loginHistoryStore.eventsBusy ? 'true' : undefined"
+        :aria-busy="loginHistoryStore.loadingMore ? 'true' : undefined"
+        data-events-more
+        @click="loginHistoryStore.loadMoreEvents()"
+      >
+        {{ LOGIN_HISTORY_TEXT.more }}
+      </button>
+      <span class="events__more-hint">{{ LOGIN_HISTORY_TEXT.moreHint }}</span>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.events {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.events__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-16);
+  min-height: var(--size-touch);
+}
+
+.events__heading {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2) var(--space-8);
+}
+
+.events__title {
+  margin: 0;
+  font-size: var(--font-size-body);
+  font-weight: 700;
+}
+
+.events__hint {
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.events__table-box {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* 다시 받는 동안 — 지난 목록을 흐리게 */
+.events__table-box[aria-busy='true'] {
+  opacity: 0.6;
+}
+
+/* 칸: 시각 124 · 방식(나머지) · IP 112 · 기기 120 · 결과 142, 칸 사이 12 · 줄 앞 14 · 뒤 8 (디자인 원본 .lh-grid) */
+.events__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.events__col-time {
+  width: calc(7.75rem + var(--space-14));
+}
+
+.events__col-ip {
+  width: calc(7rem + var(--space-12));
+}
+
+.events__col-device {
+  width: calc(7.5rem + var(--space-12));
+}
+
+.events__col-result {
+  width: calc(8.875rem + var(--space-12) + var(--space-8));
+}
+
+th,
+td {
+  padding: var(--space-4) 0 var(--space-4) var(--space-12);
+  text-align: left;
+  vertical-align: middle;
+}
+
+th:first-child,
+td:first-child {
+  padding-left: var(--space-14);
+}
+
+th:last-child,
+td:last-child {
+  padding-right: var(--space-8);
+}
+
+thead th {
+  height: var(--size-table-head);
+  padding-top: 0;
+  padding-bottom: 0;
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-sunken);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+tbody td {
+  height: var(--size-touch);
+}
+
+tbody tr + tr td {
+  border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+.events__time {
+  white-space: nowrap;
+  font-size: var(--font-size-label);
+  color: var(--color-text-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+.events__method {
+  overflow: hidden;
+}
+
+.events__method-name {
+  display: block;
+  line-height: 1.35;
+}
+
+.events__app-password {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-small);
+  line-height: 1.35;
+  color: var(--color-text-muted);
+}
+
+.events__ip {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.events__device {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+.events__unknown {
+  color: var(--color-icon-muted);
+}
+
+.events__result {
+  font-size: var(--font-size-label);
+  color: var(--color-text-strong);
+}
+
+/* 실패 — 빨간 굵은 글자만 (뱃지 없음) */
+.events__result--failure {
+  font-weight: 600;
+  color: var(--color-danger);
+}
+
+/* 빈 상태 — 가운데 정렬 상자 (디자인 원본 SettingsLoginHistory "빈 상태") */
+.events__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-28) var(--space-16);
+  border: var(--border-width) solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-sunken);
+  text-align: center;
+}
+
+.events__empty[aria-busy='true'] {
+  opacity: 0.6;
+}
+
+.events__empty-title {
+  margin: var(--space-4) 0 0;
+  font-weight: 600;
+}
+
+.events__empty-hint {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.events__more {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-14);
+  margin-top: var(--space-6);
+}
+
+/* [더 보기] 44 — 흰 바탕 · 테두리 */
+.events__more-button {
+  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;
+}
+
+.events__more-button:hover:not([aria-disabled='true']) {
+  background: var(--color-surface-muted);
+}
+
+.events__more-button[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.events__more-hint {
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/settings/LoginSessionList.vue b/frontend/src/components/settings/LoginSessionList.vue
new file mode 100644
index 0000000..d9bf48a
--- /dev/null
+++ b/frontend/src/components/settings/LoginSessionList.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+// 설정 › 로그인 기록 › 로그인된 브라우저 (디자인 원본 SettingsLoginHistory · 계약 5절 "로그인된 브라우저")
+// 「로그인된 브라우저」 + "웹메일 3곳" · 오른쪽 [다른 곳 모두 로그아웃](44 — 다른 곳이 없으면 그리지 않는다)
+// 표(구현은 실제 table): PC · 휴대폰 아이콘(16) · 브라우저 · 운영체제 / IP / 마지막 활동 / [로그아웃](36 — 밀도 예외).
+// 맨 위는 지금 이 브라우저 — 단추 대신 「지금 이 브라우저」 글자만. 모르는 브라우저는 "알 수 없는 브라우저", 모르는 IP 는 「—」.
+// 아래 "웹메일 로그인만 보입니다. 메일 프로그램은 앱 비밀번호를 지워 끊습니다."(링크 — 다른 곳이 없으면 앞에 "다른 곳에 로그인된 브라우저가 없습니다.")
+// - 줄의 [로그아웃]은 묻지 않고 바로 끊는다 → 「‘Edge · Windows’의 로그인을 끊었습니다.」(되돌리기 없음). 누른 줄이 사라지면 초점은 다음 줄(없으면 앞 줄 · 묶음 제목)
+// - [다른 곳 모두 로그아웃] → 확인 창(처음 초점 「취소」) → 「다른 곳의 로그인 2곳을 끊었습니다.」 — 지금 이 브라우저만 남고 초점은 묶음 제목으로
+//   지금 이 브라우저 줄이 없으면(서버가 이 세션을 알아보지 못함 — 서버는 모두 끊는다) 확인 창이 이 브라우저도 로그아웃된다고 알리고,
+//   끊은 뒤에는 목록을 다시 받는다(스토어 — 이 브라우저도 끊겼으면 세션 만료 창으로 이어진다)
+// - 세션이 바뀌면 확인 창을 닫는다
+import { computed, nextTick, ref, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import LinkedText from '@/components/LinkedText.vue'
+import EndOtherSessionsDialog from '@/components/settings/EndOtherSessionsDialog.vue'
+import { useToast } from '@/composables/useToast'
+import { END_OTHER_SESSIONS_TEXT, LOGIN_HISTORY_TEXT } from '@/shared/constants/account-security'
+import { SETTINGS_ROUTES } from '@/shared/constants/settings-menu'
+import type { AuthSession } from '@/shared/types/account-security'
+import { deviceLabel, endOtherSessionsMessage, isMobileDevice, otherSessions } from '@/shared/utils/account-security'
+import { formatCount, formatRelativeDayTime } from '@/shared/utils/format'
+import { useAuthStore } from '@/stores/auth.store'
+import { useLoginHistoryStore } from '@/stores/login-history.store'
+
+interface Props {
+  sessions: readonly AuthSession[]
+  /** 지금 시각(ms) — "오늘 오전 9:05" 의 기준 */
+  now: number
+}
+
+const props = defineProps<Props>()
+
+const loginHistoryStore = useLoginHistoryStore()
+const authStore = useAuthStore()
+const toast = useToast()
+
+const titleRef = ref<HTMLElement | null>(null)
+const tableRef = ref<HTMLElement | null>(null)
+/** 끊는 중인 줄 */
+const endingId = ref<string | null>(null)
+const confirmOpen = ref<boolean>(false)
+const endingOthers = ref<boolean>(false)
+
+const others = computed(() => otherSessions(props.sessions))
+/** 서버가 이 브라우저를 알아봤다(지금 이 브라우저 줄이 있다) — 없으면 [다른 곳 모두 로그아웃]이 이 브라우저까지 끊는다 */
+const hasCurrent = computed(() => props.sessions.some((session) => session.isCurrent))
+const confirmTitle = computed(() => (hasCurrent.value ? END_OTHER_SESSIONS_TEXT.title : END_OTHER_SESSIONS_TEXT.titleAll))
+const countText = computed(() => LOGIN_HISTORY_TEXT.sessionsCount(formatCount(props.sessions.length)))
+/** 아래 안내의 앞 글 — 다른 곳이 없으면 "다른 곳에 로그인된 브라우저가 없습니다." 를 앞에 */
+const noteBefore = computed(() =>
+  others.value.length === 0
+    ? `${LOGIN_HISTORY_TEXT.noOthers}${LOGIN_HISTORY_TEXT.sessionsNoteBefore}`
+    : LOGIN_HISTORY_TEXT.sessionsNoteBefore,
+)
+const confirmMessage = computed(() => endOtherSessionsMessage(others.value, !hasCurrent.value))
+const appPasswordsRoute = { name: SETTINGS_ROUTES.appPasswords }
+
+function lastActiveText(session: AuthSession): string {
+  return formatRelativeDayTime(session.lastActiveAt, new Date(props.now))
+}
+
+/** 사라진 줄 대신 초점을 둘 곳 — 그 자리의 다음 줄, 없으면 앞 줄, 그것도 없으면 묶음 제목 */
+async function focusAfterRemoval(index: number) {
+  await nextTick()
+  const active = document.activeElement
+  if (active !== null && active !== document.body) return
+  const buttons = Array.from(tableRef.value?.querySelectorAll<HTMLButtonElement>('[data-session-end]') ?? [])
+  const target = buttons[index] ?? buttons[index - 1]
+  if (target) target.focus()
+  else titleRef.value?.focus()
+}
+
+async function endSession(session: AuthSession) {
+  if (endingId.value || endingOthers.value) return
+  const index = others.value.findIndex((item) => item.id === session.id)
+  endingId.value = session.id
+  try {
+    await loginHistoryStore.endSession(session.id)
+    toast.success(LOGIN_HISTORY_TEXT.sessionEnded(deviceLabel(session.device)))
+    await focusAfterRemoval(index)
+  } catch {
+    // 인터셉터가 알렸다 — 줄은 그대로
+  } finally {
+    endingId.value = null
+  }
+}
+
+async function confirmEndOthers() {
+  if (endingOthers.value) return
+  const session = authStore.generation
+  endingOthers.value = true
+  try {
+    const { ended, includedThisBrowser } = await loginHistoryStore.endOtherSessions()
+    if (authStore.generation !== session) return
+    confirmOpen.value = false
+    const count = formatCount(ended)
+    toast.success(includedThisBrowser ? LOGIN_HISTORY_TEXT.allEnded(count) : LOGIN_HISTORY_TEXT.othersEnded(count))
+    // 누른 단추가 사라졌다 — 묶음 제목으로 (이 브라우저까지 끊었으면 목록을 다시 받는 중이라 제목이 없을 수 있다)
+    await nextTick()
+    titleRef.value?.focus()
+  } catch {
+    // 인터셉터가 알렸다 — 창은 그대로 두어 다시 누를 수 있게 한다
+  } finally {
+    endingOthers.value = false
+  }
+}
+
+// 세션이 바뀌면 확인 창을 닫는다 — 세션 만료 창과 겹치지 않게
+watch(
+  () => authStore.generation,
+  () => {
+    confirmOpen.value = false
+  },
+)
+</script>
+
+<template>
+  <section
+    class="sessions"
+    aria-labelledby="login-sessions-title"
+  >
+    <div class="sessions__head">
+      <div class="sessions__heading">
+        <h2
+          id="login-sessions-title"
+          ref="titleRef"
+          class="sessions__title"
+          tabindex="-1"
+        >
+          {{ LOGIN_HISTORY_TEXT.sessionsTitle }}
+        </h2>
+        <span
+          class="sessions__count"
+          data-sessions-count
+        >{{ countText }}</span>
+      </div>
+      <button
+        v-if="others.length > 0"
+        type="button"
+        class="sessions__end-others"
+        data-sessions-end-others
+        @click="confirmOpen = true"
+      >
+        {{ LOGIN_HISTORY_TEXT.endOthers }}
+      </button>
+    </div>
+
+    <div
+      ref="tableRef"
+      class="sessions__table-box"
+    >
+      <table class="sessions__table">
+        <caption class="visually-hidden">
+          {{ LOGIN_HISTORY_TEXT.sessionsTitle }}
+        </caption>
+        <colgroup>
+          <col class="sessions__col-icon">
+          <col>
+          <col class="sessions__col-ip">
+          <col class="sessions__col-active">
+          <col class="sessions__col-actions">
+        </colgroup>
+        <thead>
+          <tr>
+            <th scope="col">
+              <span class="visually-hidden">{{ LOGIN_HISTORY_TEXT.columnKind }}</span>
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnDevice }}
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnIp }}
+            </th>
+            <th scope="col">
+              {{ LOGIN_HISTORY_TEXT.columnLastActive }}
+            </th>
+            <th scope="col">
+              <span class="visually-hidden">{{ LOGIN_HISTORY_TEXT.columnActions }}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="session in sessions"
+            :key="session.id"
+            :data-session="session.id"
+          >
+            <td class="sessions__icon">
+              <AppIcon
+                :name="isMobileDevice(session.device) ? 'smartphone' : 'monitor'"
+                :label="isMobileDevice(session.device) ? LOGIN_HISTORY_TEXT.kindMobile : LOGIN_HISTORY_TEXT.kindPc"
+              />
+            </td>
+            <td
+              class="sessions__device"
+              data-session-device
+            >
+              {{ deviceLabel(session.device) }}
+            </td>
+            <td class="sessions__ip">
+              <template v-if="session.ip">
+                {{ session.ip }}
+              </template>
+              <template v-else>
+                <span aria-hidden="true">—</span>
+                <span class="visually-hidden">{{ LOGIN_HISTORY_TEXT.unknownValue }}</span>
+              </template>
+            </td>
+            <td
+              :class="['sessions__active', { 'sessions__active--current': session.isCurrent }]"
+              data-session-active
+            >
+              {{ session.isCurrent ? LOGIN_HISTORY_TEXT.current : lastActiveText(session) }}
+            </td>
+            <td class="sessions__actions">
+              <button
+                v-if="!session.isCurrent"
+                type="button"
+                class="sessions__end"
+                :aria-label="LOGIN_HISTORY_TEXT.endSessionLabel(deviceLabel(session.device))"
+                :aria-disabled="endingId || endingOthers ? 'true' : undefined"
+                :aria-busy="endingId === session.id ? 'true' : undefined"
+                data-session-end
+                @click="endSession(session)"
+              >
+                {{ LOGIN_HISTORY_TEXT.endSession }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <p
+      class="sessions__note"
+      data-sessions-note
+    >
+      <LinkedText
+        :before="noteBefore"
+        :link="LOGIN_HISTORY_TEXT.sessionsNoteLink"
+        :after="LOGIN_HISTORY_TEXT.sessionsNoteAfter"
+        :to="appPasswordsRoute"
+      />
+    </p>
+
+    <EndOtherSessionsDialog
+      :open="confirmOpen"
+      :title="confirmTitle"
+      :message="confirmMessage"
+      :busy="endingOthers"
+      @confirm="confirmEndOthers"
+      @cancel="confirmOpen = false"
+    />
+  </section>
+</template>
+
+<style scoped>
+.sessions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.sessions__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-16);
+  min-height: var(--size-touch);
+}
+
+.sessions__heading {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2) var(--space-8);
+}
+
+.sessions__title {
+  margin: 0;
+  font-size: var(--font-size-body);
+  font-weight: 700;
+  border-radius: var(--radius-sm);
+}
+
+.sessions__title:focus {
+  outline: none;
+}
+
+.sessions__title:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-brand);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.sessions__count {
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* [다른 곳 모두 로그아웃] 44 — 흰 바탕 · 테두리 */
+.sessions__end-others {
+  min-height: var(--size-touch);
+  padding: 0 var(--space-14);
+  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;
+}
+
+.sessions__end-others:hover {
+  background: var(--color-surface-muted);
+}
+
+.sessions__table-box {
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/* 칸: 아이콘 16 · 브라우저(나머지) · IP 112 · 마지막 활동 150 · 단추 84, 칸 사이 12 · 줄 앞 14 · 뒤 8 (디자인 원본 .ss-grid) */
+.sessions__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.sessions__col-icon {
+  width: calc(var(--space-14) + 1rem);
+}
+
+.sessions__col-ip {
+  width: calc(7rem + var(--space-12));
+}
+
+.sessions__col-active {
+  width: calc(9.375rem + var(--space-12));
+}
+
+.sessions__col-actions {
+  width: calc(5.25rem + var(--space-12) + var(--space-8));
+}
+
+th,
+td {
+  padding: 0 0 0 var(--space-12);
+  text-align: left;
+  vertical-align: middle;
+}
+
+th:first-child,
+td:first-child {
+  padding-left: var(--space-14);
+}
+
+th:last-child,
+td:last-child {
+  padding-right: var(--space-8);
+}
+
+thead th {
+  height: var(--size-table-head);
+  border-bottom: var(--border-width) solid var(--color-border);
+  background: var(--color-surface-sunken);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+tbody td {
+  height: var(--size-touch);
+}
+
+tbody tr + tr td {
+  border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+.sessions__icon {
+  color: var(--color-text-secondary);
+}
+
+.sessions__device {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.sessions__ip {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.sessions__active {
+  font-size: var(--font-size-label);
+  color: var(--color-text-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 지금 이 브라우저 — 청록 굵게, 단추 없음 */
+.sessions__active--current {
+  font-weight: 600;
+  color: var(--color-brand-strong);
+}
+
+.sessions__actions {
+  text-align: right;
+}
+
+/* [로그아웃] 36 — 밀도 예외 (--size-notice-action) */
+.sessions__end {
+  min-height: var(--size-notice-action);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-strong);
+  font-weight: 600;
+}
+
+.sessions__end:hover:not([aria-disabled='true']) {
+  background: var(--color-surface-muted);
+}
+
+.sessions__end[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.sessions__note {
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+</style>
diff --git a/frontend/src/components/settings/MailClientSettings.vue b/frontend/src/components/settings/MailClientSettings.vue
new file mode 100644
index 0000000..8f0ba55
--- /dev/null
+++ b/frontend/src/components/settings/MailClientSettings.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+// 메일 프로그램 설정값 (디자인 원본 SettingsAppPasswords — 화면의 설정값 상자 · 만든 결과 창 아래 요약)
+// 받는 메일(IMAP) 호스트 · 포트 993 · SSL/TLS / 보내는 메일(SMTP) 호스트 · 포트 465 · SSL/TLS / 사용자 이름 = 메일 주소 전체 / 비밀번호 = 여기서 만든 앱 비밀번호.
+// 호스트 · 포트는 상수 하나(MAIL_CLIENT_SETTINGS)에 둔다 — 전 직원 전환 때 다시 본다.
+// compact: 결과 창의 요약 — 비밀번호 줄 없이, 12.5px · 위 선 하나 (화면의 상자는 줄마다 선이 있는 테두리 상자)
+import { computed } from 'vue'
+
+import { APP_PASSWORD_TEXT, MAIL_CLIENT_SETTINGS } from '@/shared/constants/account-security'
+
+interface Props {
+  /** 직원 주소 — 사용자 이름 */
+  email: string
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compact: false,
+})
+
+const { host, imapPort, smtpPort, security } = MAIL_CLIENT_SETTINGS
+
+const serverLine = (port: number) =>
+  props.compact ? `${port} · ${security}` : `${APP_PASSWORD_TEXT.port(port)} · ${security}`
+
+const rows = computed(() => [
+  { term: APP_PASSWORD_TEXT.incoming, strong: host, rest: ` · ${serverLine(imapPort)}` },
+  { term: APP_PASSWORD_TEXT.outgoing, strong: host, rest: ` · ${serverLine(smtpPort)}` },
+  { term: APP_PASSWORD_TEXT.username, strong: props.email, rest: props.compact ? '' : APP_PASSWORD_TEXT.usernameNote },
+  ...(props.compact ? [] : [{ term: APP_PASSWORD_TEXT.password, strong: '', rest: APP_PASSWORD_TEXT.passwordNote }]),
+])
+</script>
+
+<template>
+  <dl
+    :class="['client-settings', { 'client-settings--compact': compact }]"
+    data-mail-client-settings
+  >
+    <template
+      v-for="row in rows"
+      :key="row.term"
+    >
+      <dt class="client-settings__term">
+        {{ row.term }}
+      </dt>
+      <dd class="client-settings__value">
+        <span
+          v-if="row.strong"
+          class="client-settings__strong"
+        >{{ row.strong }}</span>{{ row.rest }}
+      </dd>
+    </template>
+  </dl>
+</template>
+
+<style scoped>
+/* 화면의 상자 — 이름 칸 136 · 줄마다 선 · 안쪽 9 14 */
+.client-settings {
+  display: grid;
+  grid-template-columns: 8.5rem minmax(0, 1fr);
+  margin: 0;
+  border: var(--border-width) solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+}
+
+.client-settings__term,
+.client-settings__value {
+  margin: 0;
+  padding: var(--space-9) var(--space-14);
+  border-bottom: var(--border-width) solid var(--color-border-subtle);
+}
+
+.client-settings__term:nth-last-of-type(1),
+.client-settings__value:nth-last-of-type(1) {
+  border-bottom: 0;
+}
+
+.client-settings__term {
+  color: var(--color-text-secondary);
+}
+
+.client-settings__value {
+  overflow-wrap: anywhere;
+}
+
+.client-settings__strong {
+  font-weight: 600;
+}
+
+/* 결과 창의 요약 — 이름 칸 124 · 12.5px · 위 선 하나 */
+.client-settings--compact {
+  grid-template-columns: 7.75rem minmax(0, 1fr);
+  gap: var(--space-6) var(--space-12);
+  padding-top: var(--space-12);
+  border: 0;
+  border-top: var(--border-width) solid var(--color-border-subtle);
+  border-radius: 0;
+  font-size: var(--font-size-label);
+}
+
+.client-settings--compact .client-settings__term,
+.client-settings--compact .client-settings__value {
+  padding: 0;
+  border-bottom: 0;
+}
+
+.client-settings--compact .client-settings__term {
+  color: var(--color-text-muted);
+}
+
+.client-settings--compact .client-settings__value {
+  color: var(--color-text-strong);
+}
+
+.client-settings--compact .client-settings__strong {
+  font-weight: 400;
+}
+</style>
diff --git a/frontend/src/components/settings/OtpCodeField.vue b/frontend/src/components/settings/OtpCodeField.vue
new file mode 100644
index 0000000..89d8626
--- /dev/null
+++ b/frontend/src/components/settings/OtpCodeField.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+// 인증 앱 코드 칸 — 이름 · 칸(폭 200 · 44 · 16px · 글자 사이 0.24em · 고른 폭 숫자) · 안내 · 오류 (디자인 원본 SettingsTwoFactor)
+// 2단계 인증 켜기 · 끄기 창과 비밀번호 화면(2단계 인증을 켠 직원 — 양식 맨 아래)이 쓴다. 로그인 코드 단계는 로그인 화면 모양의 칸을 따로 둔다(LoginCodeStep).
+// - 숫자 6자리만 — 붙여 넣은 글의 띄어쓰기 · 하이픈은 지운다(normalizeOtpInput). inputmode="numeric" · autocomplete="one-time-code"
+//   maxlength 를 걸지 않는다 — 브라우저가 붙여 넣은 "123 456" 을 먼저 잘라 버린다
+// - 오류는 칸 아래 빨간 글(alert-circle) · 칸 테두리도 빨강. 칸의 설명(aria-describedby)은 안내 → 오류 차례 (PasswordField 와 같다)
+import { computed, ref } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import { OTP_TEXT } from '@/shared/constants/account-security'
+import { normalizeOtpInput } from '@/shared/utils/account-security'
+
+interface Props {
+  id: string
+  label: string
+  modelValue: string
+  hint?: string
+  /** 오류 문구 — 사전 문구 */
+  error?: string | null
+  /** 보내는 중 — 읽기만 */
+  readonly?: boolean
+  /** 이름을 작게(12.5px · 회색) — 끄기 창처럼 칸이 둘뿐인 확인 창 */
+  compactLabel?: boolean
+  /** 대화상자를 열면 이 칸에 초점 (켜기 창 — 처음 초점은 코드 칸) */
+  autofocus?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hint: '',
+  error: null,
+  readonly: false,
+  compactLabel: false,
+  autofocus: false,
+})
+const emit = defineEmits<Emits>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const hintId = computed(() => `${props.id}-hint`)
+const errorId = computed(() => `${props.id}-error`)
+const describedBy = computed(() => {
+  const ids = [props.hint ? hintId.value : '', props.error ? errorId.value : ''].filter(Boolean)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const normalized = normalizeOtpInput(target.value)
+  // 값이 그대로면 다시 그리지 않으므로(숫자가 아닌 글자를 쳤을 때) 칸의 글도 직접 맞춘다
+  if (target.value !== normalized) target.value = normalized
+  emit('update:modelValue', normalized)
+}
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+})
+</script>
+
+<template>
+  <div class="otp-field">
+    <label
+      :for="id"
+      :class="['otp-field__label', { 'otp-field__label--compact': compactLabel }]"
+    >{{ label }}</label>
+    <input
+      :id="id"
+      ref="inputRef"
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      spellcheck="false"
+      :placeholder="OTP_TEXT.placeholder"
+      :value="modelValue"
+      :readonly="readonly"
+      :autofocus="autofocus"
+      class="form-input otp-field__input"
+      :aria-invalid="error ? 'true' : 'false'"
+      :aria-describedby="describedBy"
+      @input="onInput"
+    >
+    <p
+      v-if="hint"
+      :id="hintId"
+      class="form-message"
+    >
+      {{ hint }}
+    </p>
+    <p
+      v-if="error"
+      :id="errorId"
+      class="form-message form-message--error"
+    >
+      <AppIcon
+        name="alert-circle"
+        :size="14"
+        :stroke-width="2"
+      />
+      <span>{{ error }}</span>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.otp-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.otp-field__label {
+  font-weight: 600;
+}
+
+/* 끄기 창 — 칸 이름 12.5px · 회색 (디자인 원본 SettingsTwoFactor "끄기 창") */
+.otp-field__label--compact {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+/* 폭 200 · 16px · 글자 사이 0.24em · 고른 폭 숫자 */
+.otp-field__input {
+  width: 12.5rem;
+  max-width: 100%;
+  font-size: var(--font-size-title);
+  letter-spacing: 0.24em;
+  font-variant-numeric: tabular-nums;
+}
+
+.otp-field__input:read-only {
+  background: var(--color-surface-panel);
+  color: var(--color-text-secondary);
+}
+</style>
diff --git a/frontend/src/components/settings/PasswordChangeForm.vue b/frontend/src/components/settings/PasswordChangeForm.vue
index 8c49795..b3e0ac3 100644
--- a/frontend/src/components/settings/PasswordChangeForm.vue
+++ b/frontend/src/components/settings/PasswordChangeForm.vue
@@ -7,46 +7,62 @@
 //   사전 문구로 (알림은 끈다). 그 밖(요청 과다 · 메일 서버 장애)은 인터셉터의 알림. 기다리는 사이 화면을 떠났으면 끈 거절도 알림으로 (notifyApiError).
 //   요청 한도는 30초다 (useAuth — 서버가 엔진을 두 번 부르고 다른 세션을 끊는다)
 // - 바꾸면 "비밀번호를 바꿨습니다. 다른 기기 · 브라우저의 로그인은 끊었습니다." — 세 칸을 비우고 보기를 끈다. 무엇이든 다시 치면 내린다
-// 고정 id — #password-current · #password-next · #password-confirm · #password-submit · #password-status
-import { computed, onBeforeUnmount, ref } from 'vue'
+// - 2단계 인증을 켠 직원(12단계 — 계약 5절 "비밀번호 바꾸기")은 맨 아래 「인증 앱 코드」 칸(코드가 30초마다 바뀌어 다른 칸을 다 쓴 뒤 넣는다).
+//   6자리가 아니면 보내지 않는다(사전 문구 AUTH_007). 코드 틀림(AUTH_006)은 그 칸 아래 · 칸을 비운다.
+//   다른 탭에서 켜서 코드 없이 보냈으면(AUTH_007) 2단계 상태를 다시 받고 칸을 보인다 — 못 받아도 칸은 보인다
+// 고정 id — #password-current · #password-next · #password-confirm · #password-code · #password-submit · #password-status
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 
 import AppIcon from '@/components/AppIcon.vue'
+import OtpCodeField from '@/components/settings/OtpCodeField.vue'
 import PasswordField from '@/components/settings/PasswordField.vue'
 import { getErrorMessage, notifyApiError, toApiError } from '@/composables/useApi'
 import { useAuth } from '@/composables/useAuth'
 import { PASSWORD_TEXT } from '@/shared/constants/account'
 import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import { isCompleteOtp } from '@/shared/utils/account-security'
 import {
   hasPasswordChangeProblem,
   passwordChangeProblems,
   type PasswordChangeProblems,
 } from '@/shared/utils/password-change'
 import { useAuthStore } from '@/stores/auth.store'
+import { useTwoFactorStore } from '@/stores/two-factor.store'
 
 /** 칸 아래에 보이는 서버 거절 — 알림은 끈다 */
-const INLINE_CODES: readonly ErrorCode[] = ['AUTH_005', 'VAL_001']
+const INLINE_CODES: readonly ErrorCode[] = ['AUTH_005', 'VAL_001', 'AUTH_006', 'AUTH_007']
 const NO_PROBLEMS: PasswordChangeProblems = { current: null, next: null, confirm: null }
 
 const { changePassword } = useAuth()
 const authStore = useAuthStore()
+const twoFactorStore = useTwoFactorStore()
 
 const currentRef = ref<InstanceType<typeof PasswordField> | null>(null)
 const nextRef = ref<InstanceType<typeof PasswordField> | null>(null)
 const confirmRef = ref<InstanceType<typeof PasswordField> | null>(null)
+const codeRef = ref<InstanceType<typeof OtpCodeField> | null>(null)
 
 const current = ref<string>('')
 const next = ref<string>('')
 const confirm = ref<string>('')
+const code = ref<string>('')
 const showCurrent = ref<boolean>(false)
 const showNext = ref<boolean>(false)
 const problems = ref<PasswordChangeProblems>(NO_PROBLEMS)
 /** 서버가 거절한 까닭 — 그 칸 아래에 (사전 문구) */
 const serverError = ref<{ field: 'current' | 'next'; message: string } | null>(null)
+/** 코드 칸 아래 — 6자리가 아님(AUTH_007 문구) · 서버의 AUTH_006 · AUTH_007 */
+const codeError = ref<string | null>(null)
+/** 서버가 코드를 요구했다(AUTH_007) — 상태를 다시 받지 못해도 칸을 보인다 */
+const codeRequired = ref<boolean>(false)
 const submitting = ref<boolean>(false)
 const done = ref<boolean>(false)
 /** 화면이 사라졌다 — 칸 아래 글을 볼 곳이 없다 */
 let unmounted = false
 
+/** 「인증 앱 코드」 칸을 보인다 — 2단계 인증을 켠 직원 */
+const showCode = computed(() => twoFactorStore.isEnabled || codeRequired.value)
+
 const currentError = computed(() => {
   if (problems.value.current === 'missing') return getErrorMessage('VAL_001')
   return serverError.value?.field === 'current' ? serverError.value.message : null
@@ -78,6 +94,12 @@ function setConfirm(value: string) {
   done.value = false
 }
 
+function setCode(value: string) {
+  code.value = value
+  codeError.value = null
+  done.value = false
+}
+
 function focusFirstProblem(found: PasswordChangeProblems) {
   if (found.current) currentRef.value?.focus()
   else if (found.next) nextRef.value?.focus()
@@ -88,23 +110,52 @@ function clearFields() {
   current.value = ''
   next.value = ''
   confirm.value = ''
+  code.value = ''
   showCurrent.value = false
   showNext.value = false
 }
 
+/** 코드 칸 아래에 알리고 칸을 비운 뒤 초점 — 다른 탭에서 켜 칸이 막 생겼으면 그린 뒤에 */
+async function showCodeError(message: string) {
+  codeError.value = message
+  code.value = ''
+  await nextTick()
+  codeRef.value?.focus()
+}
+
+/** 다른 탭에서 2단계 인증을 켰다(AUTH_007) — 상태를 다시 받고 칸을 보인다 */
+async function requireCode(message: string) {
+  codeRequired.value = true
+  await showCodeError(message)
+  void twoFactorStore.refresh()
+}
+
 async function submit() {
   if (submitting.value) return
   done.value = false
   serverError.value = null
   const found = passwordChangeProblems({ current: current.value, next: next.value, confirm: confirm.value })
   problems.value = found
+  const codeMissing = showCode.value && !isCompleteOtp(code.value)
+  codeError.value = codeMissing ? getErrorMessage('AUTH_007') : null
   if (hasPasswordChangeProblem(found)) {
     focusFirstProblem(found)
     return
   }
+  if (codeMissing) {
+    codeRef.value?.focus()
+    return
+  }
   submitting.value = true
   try {
-    await changePassword({ currentPassword: current.value, newPassword: next.value }, { silent: INLINE_CODES })
+    await changePassword(
+      {
+        currentPassword: current.value,
+        newPassword: next.value,
+        ...(showCode.value ? { otpCode: code.value } : {}),
+      },
+      { silent: INLINE_CODES },
+    )
     clearFields()
     problems.value = NO_PROBLEMS
     done.value = true
@@ -120,6 +171,10 @@ async function submit() {
     } else if (apiError.code === 'VAL_001') {
       serverError.value = { field: 'next', message: apiError.message }
       nextRef.value?.focus()
+    } else if (apiError.code === 'AUTH_006') {
+      await showCodeError(apiError.message)
+    } else if (apiError.code === 'AUTH_007') {
+      await requireCode(apiError.message)
     }
   } finally {
     submitting.value = false
@@ -182,6 +237,17 @@ onBeforeUnmount(() => {
       :error="confirmError"
       @update:model-value="setConfirm"
     />
+    <OtpCodeField
+      v-if="showCode"
+      id="password-code"
+      ref="codeRef"
+      :label="PASSWORD_TEXT.code"
+      :model-value="code"
+      :hint="PASSWORD_TEXT.codeHint"
+      :error="codeError"
+      :readonly="submitting"
+      @update:model-value="setCode"
+    />
     <div class="password-form__actions">
       <button
         id="password-submit"
diff --git a/frontend/src/components/settings/PasswordField.vue b/frontend/src/components/settings/PasswordField.vue
index b6dc1ad..86299d0 100644
--- a/frontend/src/components/settings/PasswordField.vue
+++ b/frontend/src/components/settings/PasswordField.vue
@@ -21,6 +21,8 @@ interface Props {
   hintIsError?: boolean
   /** 오류 문구 — 사전 문구 또는 디자인 문구 */
   error?: string | null
+  /** 이름을 작게(12.5px · 회색) — 2단계 인증 끄기 창처럼 칸이 둘뿐인 확인 창 (디자인 원본 SettingsTwoFactor) */
+  compactLabel?: boolean
 }
 
 interface Emits {
@@ -33,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   hint: '',
   hintIsError: false,
   error: null,
+  compactLabel: false,
 })
 const emit = defineEmits<Emits>()
 
@@ -59,7 +62,7 @@ defineExpose({
   <div class="password-field">
     <label
       :for="id"
-      class="password-field__label"
+      :class="['password-field__label', { 'password-field__label--compact': compactLabel }]"
     >{{ label }}</label>
     <div :class="['form-input', 'password-field__box', { 'is-invalid': invalid }]">
       <input
@@ -127,6 +130,11 @@ defineExpose({
   font-weight: 600;
 }
 
+.password-field__label--compact {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
 /* 상자 안에 칸과 단추 — 상자가 테두리 · 초점을 그린다 (base.css .form-input). 칸 · 단추가 상자 높이(44)를 채운다 */
 .password-field__box {
   display: flex;
diff --git a/frontend/src/components/settings/SettingsPageFrame.vue b/frontend/src/components/settings/SettingsPageFrame.vue
index 46f930f..9be2be8 100644
--- a/frontend/src/components/settings/SettingsPageFrame.vue
+++ b/frontend/src/components/settings/SettingsPageFrame.vue
@@ -3,6 +3,7 @@
 // 콘텐츠 열은 읽기 · 쓰기 화면과 같은 값이다 — 최대 800 · 좌우 32 · 위 20 · 아래 36 (tokens.css --content-*), 묶음 사이 22.
 // 머리 오른쪽에 단추를 둘 때는 actions 슬롯에 넣는다 — 좁으면 제목 아래로 내려간다 (디자인 원본 SettingsFilter 의 [새 필터])
 // 제목 바로 옆(같은 줄 · 글자 아래 선)에 작은 글을 둘 때는 title-aside 슬롯 (디자인 원본 SettingsSendRead 의 "3 / 500")
+// 설명 글 안에 링크를 넣을 때는 description 슬롯 — 주면 description 글 대신 그린다 (디자인 원본 SettingsLoginHistory 의 「비밀번호를 바꾸고」 · 「2단계 인증」)
 // 한국어 안내 글은 낱말 가운데에서 줄을 바꾸지 않는다(keep-all) — 긴 주소 · 영문은 넘치지 않게 어디서든 끊는다(anywhere) (2026-10-28 화면 점검)
 // 사용 예: <SettingsPageFrame title-id="password-page-title" :title="…" :description="…">…</SettingsPageFrame>
 interface Props {
@@ -33,7 +34,9 @@ defineProps<Props>()
             <slot name="title-aside" />
           </div>
           <p class="settings-page__description">
-            {{ description }}
+            <slot name="description">
+              {{ description }}
+            </slot>
           </p>
         </div>
         <div
diff --git a/frontend/src/components/settings/TwoFactorDisableDialog.vue b/frontend/src/components/settings/TwoFactorDisableDialog.vue
new file mode 100644
index 0000000..f8e699a
--- /dev/null
+++ b/frontend/src/components/settings/TwoFactorDisableDialog.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+// 2단계 인증 끄기 창 — alertdialog 400(medium) · 처음 초점 「취소」, Esc 도 같다 (디자인 원본 SettingsTwoFactor "끄기 창" · 계약 5절 "2단계 인증")
+// "2단계 인증을 끌까요?" / "끄면 비밀번호만으로 로그인합니다. 만들어 둔 앱 비밀번호는 그대로 남습니다." + 지금 비밀번호 · 인증 앱 코드 → [끄기](빨강) [취소].
+// 두 칸에서 Enter 도 [끄기]와 같다
+// - 틀리면 켜기 창과 같은 칸 아래 글(알림 없이): 지금 비밀번호 AUTH_005 · 코드 AUTH_006(칸을 비운다). 서버가 비밀번호를 먼저 본다 — 둘 다 비었으면 비밀번호부터
+// - 끄기 요청은 이 창이 보낸다 — 지금 비밀번호 · 코드가 스토어 액션의 인자로 개발 도구(Pinia 타임라인)에 남지 않게. 스토어에는 비밀 없는 결과만(apply)
+// - 끄는 동안 [끄기]는 aria-disabled · aria-busy(초점을 지킨다). 몇 번째로 연 창인가(openSeq)로 닫았다 다시 연 창에 앞 요청의 거절을 넣지 않는다
+// - 세션이 바뀌면(로그아웃 · 만료 · 다른 기기의 [다른 곳 모두 로그아웃]) 두 칸을 비우고 닫는다. 닫을 때도 두 칸을 비운다
+// 고정 id — #two-factor-disable-title · #two-factor-disable-message · #two-factor-disable-password · #two-factor-disable-code
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import ModalDialog from '@/components/feedback/ModalDialog.vue'
+import OtpCodeField from '@/components/settings/OtpCodeField.vue'
+import PasswordField from '@/components/settings/PasswordField.vue'
+import { useAccountSecurity } from '@/composables/useAccountSecurity'
+import { getErrorMessage, notifyApiError, toApiError } from '@/composables/useApi'
+import { TWO_FACTOR_DISABLE_TEXT } from '@/shared/constants/account-security'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import { isCompleteOtp } from '@/shared/utils/account-security'
+import { isImeComposing } from '@/shared/utils/keyboard-shortcut'
+import { useAuthStore } from '@/stores/auth.store'
+import { useTwoFactorStore } from '@/stores/two-factor.store'
+
+interface Props {
+  open: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+  /** 껐다 — 상태는 스토어에 넣었다 */
+  (e: 'disabled'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+/** 칸 아래에 보이는 서버 거절 — 알림을 끈다 */
+const INLINE_CODES: readonly ErrorCode[] = ['AUTH_005', 'AUTH_006']
+
+const api = useAccountSecurity()
+const authStore = useAuthStore()
+const twoFactorStore = useTwoFactorStore()
+
+const passwordRef = ref<InstanceType<typeof PasswordField> | null>(null)
+const codeRef = ref<InstanceType<typeof OtpCodeField> | null>(null)
+
+const password = ref<string>('')
+const code = ref<string>('')
+const showPassword = ref<boolean>(false)
+const passwordError = ref<string | null>(null)
+const codeError = ref<string | null>(null)
+const submitting = ref<boolean>(false)
+/** 창을 연 차례 — 열 때 · 세션이 바뀔 때 오른다. 보낼 때 잡아 두고 응답이 오면 견준다 */
+let openSeq = 0
+let unmounted = false
+
+function resetForm() {
+  password.value = ''
+  code.value = ''
+  showPassword.value = false
+  passwordError.value = null
+  codeError.value = null
+  submitting.value = false
+}
+
+function setPassword(value: string) {
+  password.value = value
+  passwordError.value = null
+}
+
+function setCode(value: string) {
+  code.value = value
+  codeError.value = null
+}
+
+async function submit() {
+  if (submitting.value) return
+  const passwordProblem = password.value === '' ? getErrorMessage('VAL_001') : null
+  const codeProblem = isCompleteOtp(code.value) ? null : getErrorMessage('AUTH_007')
+  passwordError.value = passwordProblem
+  codeError.value = codeProblem
+  if (passwordProblem) {
+    passwordRef.value?.focus()
+    return
+  }
+  if (codeProblem) {
+    codeRef.value?.focus()
+    return
+  }
+  const opened = openSeq
+  const session = authStore.generation
+  submitting.value = true
+  try {
+    const status = await api.deactivateTwoFactor(
+      { currentPassword: password.value, otpCode: code.value },
+      { silent: INLINE_CODES },
+    )
+    if (authStore.generation !== session) return
+    // 서버가 껐다 — 창을 닫았거나 다시 열었어도 화면의 상태는 바꾼다
+    twoFactorStore.apply(status)
+    if (unmounted) return
+    if (opened === openSeq) resetForm()
+    emit('disabled')
+  } catch (caught) {
+    const apiError = toApiError(caught)
+    if (authStore.generation !== session) return
+    if (unmounted || !props.open || opened !== openSeq) {
+      // 보낸 창이 없다 — 닫힌 채면 칸 아래 글 대신 알림으로, 다시 연 창에는 앞 요청의 거절을 넣지 않는다
+      if (opened === openSeq && INLINE_CODES.includes(apiError.code)) notifyApiError(apiError)
+      return
+    }
+    if (apiError.code === 'AUTH_005') {
+      passwordError.value = apiError.message
+      passwordRef.value?.focus()
+    } else if (apiError.code === 'AUTH_006') {
+      codeError.value = apiError.message
+      code.value = ''
+      codeRef.value?.focus()
+    }
+    // 그 밖의 실패(시도 과다 REQ_001 · 메일 서버 장애 등)는 인터셉터가 알렸다
+  } finally {
+    if (opened === openSeq) submitting.value = false
+  }
+}
+
+/** 비밀번호 · 코드 칸에서 Enter — [끄기]와 같다 (한글 조합 중의 Enter 는 글자 확정이라 무시한다) */
+function onFieldKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' || isImeComposing(event)) return
+  if (!(event.target instanceof HTMLInputElement)) return
+  event.preventDefault()
+  void submit()
+}
+
+// 열 때 · 닫을 때 두 칸을 비운다 — 열 때마다 차례를 올린다
+watch(
+  () => props.open,
+  (open) => {
+    if (open) openSeq += 1
+    resetForm()
+  },
+)
+
+// 세션이 바뀌면 두 칸을 비우고 닫는다 — 앞 요청의 결과도 버린다
+watch(
+  () => authStore.generation,
+  () => {
+    openSeq += 1
+    resetForm()
+    if (props.open) emit('close')
+  },
+)
+
+onBeforeUnmount(() => {
+  unmounted = true
+  resetForm()
+})
+</script>
+
+<template>
+  <ModalDialog
+    :open="open"
+    role="alertdialog"
+    medium
+    :title="TWO_FACTOR_DISABLE_TEXT.title"
+    :message="TWO_FACTOR_DISABLE_TEXT.message"
+    title-id="two-factor-disable-title"
+    message-id="two-factor-disable-message"
+    @cancel="emit('close')"
+  >
+    <div
+      class="disable__fields"
+      @keydown="onFieldKeydown"
+    >
+      <PasswordField
+        id="two-factor-disable-password"
+        ref="passwordRef"
+        :label="TWO_FACTOR_DISABLE_TEXT.passwordLabel"
+        :model-value="password"
+        autocomplete="current-password"
+        :shown="showPassword"
+        :toggle-label="TWO_FACTOR_DISABLE_TEXT.showPassword"
+        :error="passwordError"
+        compact-label
+        @update:model-value="setPassword"
+        @toggle="showPassword = !showPassword"
+      />
+      <OtpCodeField
+        id="two-factor-disable-code"
+        ref="codeRef"
+        :label="TWO_FACTOR_DISABLE_TEXT.codeLabel"
+        :model-value="code"
+        :error="codeError"
+        :readonly="submitting"
+        compact-label
+        @update:model-value="setCode"
+      />
+    </div>
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--danger"
+        :aria-disabled="submitting ? 'true' : undefined"
+        :aria-busy="submitting ? 'true' : undefined"
+        data-disable-submit
+        @click="submit"
+      >
+        {{ submitting ? TWO_FACTOR_DISABLE_TEXT.submitting : TWO_FACTOR_DISABLE_TEXT.submit }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        autofocus
+        data-disable-cancel
+        @click="emit('close')"
+      >
+        {{ TWO_FACTOR_DISABLE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+.disable__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+  margin-top: var(--space-4);
+}
+</style>
diff --git a/frontend/src/components/settings/TwoFactorEnableDialog.vue b/frontend/src/components/settings/TwoFactorEnableDialog.vue
new file mode 100644
index 0000000..25593ed
--- /dev/null
+++ b/frontend/src/components/settings/TwoFactorEnableDialog.vue
@@ -0,0 +1,403 @@
+<script setup lang="ts">
+// 2단계 인증 켜기 창 — 모달 620(wide · 필터 고치기 창과 같은 폭) · 처음 초점은 코드 칸 (디자인 원본 SettingsTwoFactor "켜기 창" · 계약 5절 "2단계 인증")
+// ① QR · 키 · [복사](TwoFactorEnrollmentScan) ② 앱에 표시된 6자리 코드 ③ 지금 비밀번호 → [켜기] [취소]. 두 칸에서 Enter 도 [켜기]와 같다
+// - 키는 창을 열 때마다 새로 만든다(POST /two-factor/enrollments — 10분 안에 켠다). 키 · 주소는 이 창의 화면 메모리에만 두고 닫으면 버린다
+// - 칸 아래 오류(알림 없이 · 첫 잘못된 칸에 초점): 코드 AUTH_006(칸을 비운다) · 지금 비밀번호 AUTH_005. 둘 다 틀렸으면 코드부터 — 서버가 코드를 먼저 본다.
+//   QR · 키는 그대로라 다시 찍지 않아도 된다
+// - AUTH_008(등록이 없음 · 10분 지남 · 더 새 등록 · 그사이 다른 곳에서 켜짐) — 처음부터 다시: 상태를 다시 받아 켜졌으면 창을 닫고 알리고,
+//   아니면 창 위에 사전 문구를 보이고 새 키로 다시 그린다(코드는 비운다)
+// - 켜기 요청은 이 창이 보낸다 — 지금 비밀번호 · 코드가 스토어 액션의 인자로 개발 도구(Pinia 타임라인)에 남지 않게. 스토어에는 비밀 없는 결과만(apply)
+// - 켜는 동안 「켜는 중…」 · [켜기]는 aria-disabled(초점을 지킨다) · [취소]는 누를 수 있다(그래도 서버가 켰으면 화면은 「켜짐」이 된다)
+// - 몇 번째로 연 창인가(openSeq)를 보낼 때 잡아 둔다 — 닫았다 다시 연 창에 앞 요청의 거절 · 처음부터 다시를 넣지 않고, 다시 열면 「켜는 중」도 처음으로
+// - 세션이 바뀌면(로그아웃 · 만료 · 다른 기기의 [다른 곳 모두 로그아웃]) 키 · 칸을 지우고 닫는다 — 세션 만료 창 뒤에 QR · 키 · 비밀번호가 남지 않게
+// 고정 id — #two-factor-enable-title · #two-factor-enable-code · #two-factor-enable-password
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.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 { useAccountSecurity } from '@/composables/useAccountSecurity'
+import { getErrorMessage, notifyApiError, toApiError, type ApiError } from '@/composables/useApi'
+import { TWO_FACTOR_ENABLE_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 { useTwoFactorStore } from '@/stores/two-factor.store'
+
+interface Props {
+  open: boolean
+  /** 직원 주소 — "앱에는 「ARA SYSTEM (주소)」로 저장됩니다." */
+  email: string
+}
+
+interface Emits {
+  (e: 'close'): void
+  /** 켰다 — 상태는 스토어에 넣었다 */
+  (e: 'enabled'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+/** 칸 아래 · 창 위에 보이는 서버 거절 — 알림을 끈다 */
+const INLINE_CODES: readonly ErrorCode[] = ['AUTH_005', 'AUTH_006', 'AUTH_008']
+
+const api = useAccountSecurity()
+const authStore = useAuthStore()
+const twoFactorStore = useTwoFactorStore()
+
+const codeRef = ref<InstanceType<typeof OtpCodeField> | null>(null)
+const passwordRef = ref<InstanceType<typeof PasswordField> | null>(null)
+
+/** 등록 — 비밀이 들어 있다. 반응형 깊이 없이 둔다 */
+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 code = ref<string>('')
+const password = ref<string>('')
+const showPassword = ref<boolean>(false)
+const codeError = ref<string | null>(null)
+const passwordError = ref<string | null>(null)
+const submitting = ref<boolean>(false)
+
+/** 창을 연 차례 — 열 때 · 세션이 바뀔 때 오른다. 보낼 때 잡아 두고 응답이 오면 견준다 */
+let openSeq = 0
+/** 등록을 받는 차례 — 창을 닫거나 다시 받으면 앞의 응답은 버린다 */
+let enrollSeq = 0
+let unmounted = false
+
+/** [켜기]를 누를 수 없다 — 키가 아직 없거나 켜는 중 */
+const unavailable = computed(() => enrollStatus.value !== 'ready' || submitting.value)
+
+function clearSecrets() {
+  enrollSeq += 1
+  enrollment.value = null
+  code.value = ''
+  password.value = ''
+  showPassword.value = false
+}
+
+function resetForm() {
+  clearSecrets()
+  enrollStatus.value = 'loading'
+  enrollError.value = null
+  notice.value = null
+  codeError.value = null
+  passwordError.value = null
+  submitting.value = false
+}
+
+/** 보낸 그 창이 아직 열려 있고 세션도 그대로인가 — 늦게 온 응답을 이 창에 쓸지 */
+function stillHere(session: number, opened: number): boolean {
+  return !unmounted && props.open && opened === openSeq && authStore.generation === session
+}
+
+/**
+ * 2단계 인증이 그사이 다른 곳에서 켜졌는지 상태를 다시 받아 본다 — 켜졌으면(true) 보낸 창이 아직 있을 때만 닫고 사전 문구로 알린다.
+ * 상태를 못 받았거나 아직 꺼져 있으면 false (부르는 쪽이 새 키로 다시 한다)
+ */
+async function closeIfEnabledElsewhere(error: ApiError, session: number, opened: number): Promise<boolean> {
+  const status = await twoFactorStore.refresh()
+  if (!status?.isEnabled) return false
+  if (stillHere(session, opened)) {
+    notifyApiError(error)
+    emit('close')
+  }
+  return true
+}
+
+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
+    const apiError = toApiError(caught)
+    // 이미 켜져 있다 — 그사이 다른 곳에서 켰다
+    if (apiError.code === 'AUTH_008' && (await closeIfEnabledElsewhere(apiError, session, opened))) return
+    if (current !== enrollSeq || !stillHere(session, opened)) return
+    enrollStatus.value = 'error'
+    enrollError.value = apiError
+  }
+}
+
+/** 처음부터 다시(AUTH_008) — 켜졌으면 닫고, 아니면 창 위에 알리고 새 키로 다시 그린다 */
+async function restart(error: ApiError, session: number, opened: number) {
+  if (await closeIfEnabledElsewhere(error, session, opened)) return
+  if (!stillHere(session, opened)) return
+  notice.value = error.message
+  code.value = ''
+  codeError.value = null
+  passwordError.value = null
+  await startEnrollment()
+  await nextTick()
+  if (stillHere(session, opened)) codeRef.value?.focus()
+}
+
+function setCode(value: string) {
+  code.value = value
+  codeError.value = null
+}
+
+function setPassword(value: string) {
+  password.value = value
+  passwordError.value = null
+}
+
+async function submit() {
+  const current = enrollment.value
+  if (unavailable.value || !current) return
+  const codeProblem = isCompleteOtp(code.value) ? null : getErrorMessage('AUTH_007')
+  const passwordProblem = password.value === '' ? getErrorMessage('VAL_001') : null
+  codeError.value = codeProblem
+  passwordError.value = passwordProblem
+  if (codeProblem) {
+    codeRef.value?.focus()
+    return
+  }
+  if (passwordProblem) {
+    passwordRef.value?.focus()
+    return
+  }
+  const opened = openSeq
+  const session = authStore.generation
+  submitting.value = true
+  try {
+    const status = await api.activateTwoFactor(
+      { enrollmentId: current.enrollmentId, otpCode: code.value, currentPassword: password.value },
+      { silent: INLINE_CODES },
+    )
+    if (authStore.generation !== session) return
+    // 서버가 켰다 — 창을 닫았거나 다시 열었어도 화면의 상태는 바꾼다
+    twoFactorStore.apply(status)
+    if (unmounted) return
+    if (opened === openSeq) clearSecrets()
+    emit('enabled')
+  } catch (caught) {
+    const apiError = toApiError(caught)
+    if (authStore.generation !== session) return
+    if (!stillHere(session, opened)) {
+      // 보낸 창이 없다 — 닫힌 채면 칸 아래 글 대신 알림으로(처음부터 다시는 다음에 열 때 새 키로 한다), 다시 연 창에는 넣지 않는다
+      if (opened === openSeq && apiError.code !== 'AUTH_008' && INLINE_CODES.includes(apiError.code)) notifyApiError(apiError)
+      return
+    }
+    if (apiError.code === 'AUTH_006') {
+      codeError.value = apiError.message
+      code.value = ''
+      codeRef.value?.focus()
+    } else if (apiError.code === 'AUTH_005') {
+      passwordError.value = apiError.message
+      passwordRef.value?.focus()
+    } else if (apiError.code === 'AUTH_008') {
+      await restart(apiError, session, opened)
+    }
+    // 그 밖의 실패(시도 과다 REQ_001 · 메일 서버 장애 등)는 인터셉터가 알렸다
+  } finally {
+    if (opened === openSeq) submitting.value = false
+  }
+}
+
+/** 코드 · 비밀번호 칸에서 Enter — [켜기]와 같다 (한글 조합 중의 Enter 는 글자 확정이라 무시한다) */
+function onFieldKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Enter' || isImeComposing(event)) return
+  if (!(event.target instanceof HTMLInputElement)) return
+  event.preventDefault()
+  void submit()
+}
+
+function cancel() {
+  emit('close')
+}
+
+// 열 때마다 새 키 — 닫으면 키 · 칸을 버린다
+watch(
+  () => props.open,
+  (open) => {
+    if (open) openSeq += 1
+    resetForm()
+    if (open) void startEnrollment()
+  },
+  { 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_ENABLE_TEXT.title"
+    title-id="two-factor-enable-title"
+    @cancel="cancel"
+  >
+    <p
+      v-if="notice"
+      class="enable__notice"
+      role="alert"
+      data-enable-notice
+    >
+      <AppIcon
+        name="alert-circle"
+        class="enable__notice-icon"
+      />
+      <span>{{ notice }}</span>
+    </p>
+    <ol
+      class="enable__steps"
+      @keydown="onFieldKeydown"
+    >
+      <li class="enable__step">
+        <span
+          class="enable__number"
+          aria-hidden="true"
+        >1</span>
+        <div class="enable__step-body">
+          <TwoFactorEnrollmentScan
+            :enrollment="enrollment"
+            :status="enrollStatus"
+            :error="enrollError"
+            :email="email"
+            @retry="startEnrollment"
+          />
+        </div>
+      </li>
+      <li class="enable__step">
+        <span
+          class="enable__number"
+          aria-hidden="true"
+        >2</span>
+        <div class="enable__step-body">
+          <OtpCodeField
+            id="two-factor-enable-code"
+            ref="codeRef"
+            :label="TWO_FACTOR_ENABLE_TEXT.codeLabel"
+            :model-value="code"
+            :error="codeError"
+            :readonly="submitting"
+            autofocus
+            @update:model-value="setCode"
+          />
+        </div>
+      </li>
+      <li class="enable__step">
+        <span
+          class="enable__number"
+          aria-hidden="true"
+        >3</span>
+        <div class="enable__step-body enable__step-body--password">
+          <PasswordField
+            id="two-factor-enable-password"
+            ref="passwordRef"
+            :label="TWO_FACTOR_ENABLE_TEXT.passwordLabel"
+            :model-value="password"
+            autocomplete="current-password"
+            :shown="showPassword"
+            :toggle-label="TWO_FACTOR_ENABLE_TEXT.showPassword"
+            :error="passwordError"
+            @update:model-value="setPassword"
+            @toggle="showPassword = !showPassword"
+          />
+        </div>
+      </li>
+    </ol>
+    <template #actions>
+      <button
+        type="button"
+        class="modal-dialog__action"
+        :aria-disabled="unavailable ? 'true' : undefined"
+        :aria-busy="submitting ? 'true' : undefined"
+        data-enable-submit
+        @click="submit"
+      >
+        {{ submitting ? TWO_FACTOR_ENABLE_TEXT.submitting : TWO_FACTOR_ENABLE_TEXT.submit }}
+      </button>
+      <button
+        type="button"
+        class="modal-dialog__action modal-dialog__action--secondary"
+        data-enable-cancel
+        @click="cancel"
+      >
+        {{ TWO_FACTOR_ENABLE_TEXT.cancel }}
+      </button>
+    </template>
+  </ModalDialog>
+</template>
+
+<style scoped>
+/* 창 위 안내 — 처음부터 다시 (로그인 오류와 같은 빨간 상자) */
+.enable__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);
+}
+
+.enable__notice-icon {
+  margin-top: var(--space-1);
+}
+
+/* 차례 1 · 2 · 3 — 청록 굵은 숫자(동그라미 없음) · 숫자 칸 22 · 사이 18 */
+.enable__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-18);
+  margin: var(--space-8) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.enable__step {
+  display: grid;
+  grid-template-columns: var(--space-22) minmax(0, 1fr);
+  gap: var(--space-6);
+}
+
+.enable__number {
+  font-weight: 700;
+  color: var(--color-brand-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+.enable__step-body {
+  min-width: 0;
+}
+
+/* 지금 비밀번호 칸 — 최대 320 */
+.enable__step-body--password {
+  max-width: 20rem;
+}
+</style>
diff --git a/frontend/src/components/settings/TwoFactorEnrollmentScan.vue b/frontend/src/components/settings/TwoFactorEnrollmentScan.vue
new file mode 100644
index 0000000..821a061
--- /dev/null
+++ b/frontend/src/components/settings/TwoFactorEnrollmentScan.vue
@@ -0,0 +1,300 @@
+<script setup lang="ts">
+// 2단계 인증 켜기 창의 ① — QR · 키 · [복사] (디자인 원본 SettingsTwoFactor "켜기 창" · 계약 5절 "2단계 인증")
+// "인증 앱으로 QR 코드를 찍어 주세요" + QR(화면이 otpauthUrl 로 그린다 — QrCodeImage) + "인증 앱에서 [+] → 「QR 코드 스캔」…" +
+// "찍을 수 없으면 이 키를 입력하세요" — 32자 키(4자씩 띄움 · 고정폭 · 띄어쓰기 없이 조각만 — 골라 복사해도 키 그대로) + [복사](36 — 밀도 예외) +
+// "앱에는 「ARA SYSTEM (주소)」로 저장됩니다." + 켜지 않고 닫으면 키를 버린다는 안내
+// - 키를 받는 동안은 QR 자리에 회색 상자(aria-busy), 못 받으면 사전 문구 + [다시 시도](부모가 다시 받는다)
+// - 키는 부모(켜기 창)의 화면 메모리에서만 받는다 — 여기서도 남기지 않는다. [복사]는 키를 띄어쓰기 없이
+// - 키는 일부러 두 줄(한 줄에 4묶음)로 그리고, 줄은 묶음 사이에서만 바뀐다 — 묶음 · 줄은 줄바꿈 없는 inline-block 덩어리다.
+//   block 으로 나누면 골라 복사할 때 줄바꿈이 끼므로 inline-block 으로 둔다(글자 사이에 띄어쓰기 · 줄바꿈 문자를 넣지 않는다 — 읽어 주는 글도 32자 그대로).
+//   좁은 폭에서는 줄 안에서도 묶음 사이에서만 줄이 바뀐다 (2026-10-31 브라우저 점검 — 620 창에서 마지막 묶음이 "EL / WN" 으로 갈렸다)
+// 고정 id — #two-factor-key-label
+import { computed } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import QrCodeImage from '@/components/QrCodeImage.vue'
+import type { ApiError } from '@/composables/useApi'
+import { useToast } from '@/composables/useToast'
+import { TWO_FACTOR_ENABLE_TEXT, TWO_FACTOR_KEY_GROUPS_PER_LINE } from '@/shared/constants/account-security'
+import type { TwoFactorEnrollment } from '@/shared/types/account-security'
+import { chunkItems, groupCharacters } from '@/shared/utils/account-security'
+import { copyText } from '@/shared/utils/clipboard'
+
+interface Props {
+  /** 등록 — 키 · otpauth 주소. 받는 중이거나 못 받았으면 null */
+  enrollment: TwoFactorEnrollment | null
+  status: 'loading' | 'ready' | 'error'
+  /** 못 받은 까닭 — 사전 문구 */
+  error: ApiError | null
+  /** 직원 주소 — "앱에는 「ARA SYSTEM (주소)」로 저장됩니다." */
+  email: string
+}
+
+interface Emits {
+  (e: 'retry'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const toast = useToast()
+
+/** 키의 줄 — 줄마다 4자 묶음 넷 */
+const keyLines = computed(() =>
+  props.enrollment ? chunkItems(groupCharacters(props.enrollment.secret), TWO_FACTOR_KEY_GROUPS_PER_LINE) : [],
+)
+
+async function copyKey() {
+  const secret = props.enrollment?.secret
+  if (!secret) return
+  if (await copyText(secret)) toast.success(TWO_FACTOR_ENABLE_TEXT.copied)
+  else toast.error(TWO_FACTOR_ENABLE_TEXT.copyFailed)
+}
+</script>
+
+<template>
+  <div class="scan">
+    <span class="scan__title">{{ TWO_FACTOR_ENABLE_TEXT.scanTitle }}</span>
+    <div
+      v-if="status === 'error' && error"
+      class="scan__load-error"
+      role="alert"
+      data-enable-error
+    >
+      <span>{{ error.message }}</span>
+      <button
+        type="button"
+        class="scan__retry"
+        @click="emit('retry')"
+      >
+        {{ TWO_FACTOR_ENABLE_TEXT.retry }}
+      </button>
+    </div>
+    <div
+      v-else
+      class="scan__body"
+    >
+      <div
+        class="scan__qr-frame"
+        :aria-busy="status === 'loading' ? 'true' : undefined"
+      >
+        <QrCodeImage
+          v-if="enrollment"
+          :value="enrollment.otpauthUrl"
+          :label="TWO_FACTOR_ENABLE_TEXT.qrLabel"
+        />
+        <span
+          v-else
+          class="scan__qr-placeholder"
+        >
+          <span class="visually-hidden">{{ TWO_FACTOR_ENABLE_TEXT.loading }}</span>
+        </span>
+      </div>
+      <div class="scan__text">
+        <p class="scan__hint">
+          {{ TWO_FACTOR_ENABLE_TEXT.scanHint }}
+        </p>
+        <div class="scan__key">
+          <span
+            id="two-factor-key-label"
+            class="scan__key-label"
+          >{{ TWO_FACTOR_ENABLE_TEXT.keyLabel }}</span>
+          <div class="scan__key-row">
+            <code
+              class="scan__key-value"
+              data-enable-key
+            >
+              <span
+                v-for="(line, lineIndex) in keyLines"
+                :key="lineIndex"
+                class="scan__key-line"
+              >
+                <span
+                  v-for="(group, index) in line"
+                  :key="index"
+                  class="scan__key-group"
+                >{{ group }}</span>
+              </span>
+            </code>
+            <button
+              type="button"
+              class="scan__copy"
+              :aria-label="TWO_FACTOR_ENABLE_TEXT.copyLabel"
+              aria-describedby="two-factor-key-label"
+              :aria-disabled="enrollment ? undefined : 'true'"
+              data-enable-copy
+              @click="copyKey"
+            >
+              <AppIcon
+                name="copy"
+                :size="14"
+              />
+              <span>{{ TWO_FACTOR_ENABLE_TEXT.copy }}</span>
+            </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scan {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-10);
+}
+
+.scan__title {
+  font-weight: 600;
+}
+
+.scan__body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--space-16);
+}
+
+/* QR 상자 — 흰 바탕 · 테두리 · 안쪽 6 */
+.scan__qr-frame {
+  flex: 0 0 auto;
+  padding: var(--space-6);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.scan__qr-placeholder {
+  display: block;
+  width: 10rem;
+  height: 10rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-skeleton);
+}
+
+.scan__text {
+  flex: 1 1 15rem;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.scan__hint {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+.scan__key {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding-top: var(--space-10);
+  border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+.scan__key-label {
+  font-size: var(--font-size-label);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.scan__key-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+/* 키 — 고정폭 13px, 4자 조각 사이를 여백으로(띄어쓰기 없이 — 골라 복사해도 키 그대로). 누르면 한 번에 고른다 */
+.scan__key-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--size-notice-action);
+  padding: var(--space-6) var(--space-10);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-panel);
+  font-family: Consolas, 'SFMono-Regular', Menlo, monospace;
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+  color: var(--color-text);
+  user-select: all;
+}
+
+/*
+ * 한 줄 — 상자 폭을 다 차지해 두 줄(4묶음 + 4묶음)로 쌓인다. block 이 아니라 inline-block 이다 —
+ * block 으로 나누면 골라 복사한 글에 줄바꿈이 낀다. 상자가 4묶음보다 좁으면 줄 안에서도 묶음 사이에서만 줄이 바뀐다
+ */
+.scan__key-line {
+  display: inline-block;
+  width: 100%;
+}
+
+/* 4자 묶음 — 줄바꿈 없는 덩어리 (inline-block 앞뒤가 줄이 바뀔 수 있는 자리다 — 묶음 가운데서는 바뀌지 않는다) */
+.scan__key-group {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.scan__key-group:not(:last-child) {
+  margin-right: 0.5em;
+}
+
+/* [복사] 36 — 밀도 예외 (--size-notice-action, 차단 풀기와 같다) */
+.scan__copy {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  min-height: var(--size-notice-action);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-strong);
+  font-weight: 600;
+}
+
+.scan__copy:hover:not([aria-disabled='true']) {
+  background: var(--color-surface-muted);
+}
+
+.scan__copy[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.scan__key-note {
+  font-size: var(--font-size-small);
+  color: var(--color-text-muted);
+}
+
+/* 키를 받지 못했을 때 — 사전 문구 + [다시 시도] */
+.scan__load-error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8) var(--space-12);
+  padding: var(--space-12) var(--space-14);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-surface);
+  color: var(--color-danger);
+}
+
+.scan__retry {
+  min-height: var(--size-notice-action);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-strong);
+  font-weight: 600;
+}
+
+.scan__retry:hover {
+  background: var(--color-surface-muted);
+}
+</style>
diff --git a/frontend/src/composables/useAccountSecurity.ts b/frontend/src/composables/useAccountSecurity.ts
new file mode 100644
index 0000000..4cbebe5
--- /dev/null
+++ b/frontend/src/composables/useAccountSecurity.ts
@@ -0,0 +1,129 @@
+import type { AxiosRequestConfig } from 'axios'
+
+import { useApi } from './useApi'
+import { AUTH_SESSION_LIST_LIMIT, TWO_FACTOR_CHANGE_TIMEOUT_MS } from '@/shared/constants/account-security'
+import type {
+  AppPassword,
+  AuthSession,
+  CreatedAppPassword,
+  EndedSessions,
+  LoginEvent,
+  LoginEventQuery,
+  TwoFactorActivationPayload,
+  TwoFactorDeactivationPayload,
+  TwoFactorEnrollment,
+  TwoFactorStatus,
+} from '@/shared/types/account-security'
+import type { PaginatedResult } from '@/shared/types/pagination'
+
+/** 호출부가 정할 수 있는 요청 옵션 — 화면이 오류를 직접 그릴 때 silent, 취소가 필요하면 signal */
+export type AccountSecurityRequestOptions = Pick<AxiosRequestConfig, 'silent' | 'signal'>
+
+/** 경로에 넣는 id 는 항상 인코딩한다 */
+const segment = (value: string) => encodeURIComponent(value)
+
+// 계정 보안 API Composable — docs/mail/api-contract.md 5절 "계정 보안 — 12단계" (모두 로그인 필요)
+// 인터셉터가 { success, data } 를 언래핑하므로 각 호출의 응답 타입(R)을 data 타입으로 지정한다.
+// 비밀(2단계 인증 키 · otpauth 주소 · 앱 비밀번호 값)이 든 응답은 부르는 쪽이 화면 메모리에만 두고 창을 닫으면 버린다 — 여기서는 남기지 않는다.
+// 로그인 · 비밀번호 바꾸기에 더한 칸(otpCode)은 useAuth 가 보낸다
+export function useAccountSecurity() {
+  const api = useApi()
+
+  /** 2단계 인증 상태 — 엔진이 기준이다 */
+  function getTwoFactor(options?: AccountSecurityRequestOptions): Promise<TwoFactorStatus> {
+    return api.get<TwoFactorStatus, TwoFactorStatus>('/two-factor', options)
+  }
+
+  /**
+   * 등록 시작 (꺼져 있을 때만) — 새 키 · otpauth 주소 · 이때까지 켜야 하는 시각(10분).
+   * 직원마다 기다리는 등록은 하나다 — 새로 시작하면 앞의 것은 버린다. 이미 켜져 있으면 409 AUTH_008
+   */
+  function startTwoFactorEnrollment(options?: AccountSecurityRequestOptions): Promise<TwoFactorEnrollment> {
+    return api.post<TwoFactorEnrollment, TwoFactorEnrollment>('/two-factor/enrollments', null, options)
+  }
+
+  /**
+   * 켜기 — 코드를 등록의 키로 먼저 확인한 뒤 엔진에 쓴다. 코드 틀림 400 AUTH_006 · 지금 비밀번호 틀림 400 AUTH_005 ·
+   * 등록이 없음 · 10분 지남 · 그사이 바뀜 409 AUTH_008. 서버가 엔진을 여러 번 부르므로 한도를 길게 둔다
+   */
+  function activateTwoFactor(
+    payload: TwoFactorActivationPayload,
+    options?: AccountSecurityRequestOptions,
+  ): Promise<TwoFactorStatus> {
+    return api.post<TwoFactorStatus, TwoFactorStatus>('/two-factor/activation', payload, {
+      timeout: TWO_FACTOR_CHANGE_TIMEOUT_MS,
+      ...options,
+    })
+  }
+
+  /** 끄기 — 비밀번호를 먼저 확인하고(AUTH_005) 코드를 본다(AUTH_006). 이미 꺼져 있으면 200 (같은 결과) */
+  function deactivateTwoFactor(
+    payload: TwoFactorDeactivationPayload,
+    options?: AccountSecurityRequestOptions,
+  ): Promise<TwoFactorStatus> {
+    return api.post<TwoFactorStatus, TwoFactorStatus>('/two-factor/deactivation', payload, {
+      timeout: TWO_FACTOR_CHANGE_TIMEOUT_MS,
+      ...options,
+    })
+  }
+
+  /** 앱 비밀번호 — 한 쪽(엔진 상한이 작다), 최근에 만든 것이 위 */
+  function listAppPasswords(options?: AccountSecurityRequestOptions): Promise<PaginatedResult<AppPassword>> {
+    return api.get<PaginatedResult<AppPassword>, PaginatedResult<AppPassword>>('/app-passwords', options)
+  }
+
+  /**
+   * 만들기 — 값(password)은 이 응답에만 온다. 상한 409 AUTH_009, 이름이 비었거나 40자를 넘거나 이미 있는 이름이면 400 VAL_001
+   */
+  function createAppPassword(name: string, options?: AccountSecurityRequestOptions): Promise<CreatedAppPassword> {
+    return api.post<CreatedAppPassword, CreatedAppPassword>('/app-passwords', { name }, options)
+  }
+
+  /** 지우기 — 이미 없어도 200 */
+  function deleteAppPassword(id: string, options?: AccountSecurityRequestOptions): Promise<null> {
+    return api.delete<null, null>(`/app-passwords/${segment(id)}`, options)
+  }
+
+  /** 로그인된 브라우저 — 지금 세션이 맨 앞, 그다음 최근 활동 차례 (서버 최대 100 을 한 번에) */
+  function listAuthSessions(options?: AccountSecurityRequestOptions): Promise<PaginatedResult<AuthSession>> {
+    return api.get<PaginatedResult<AuthSession>, PaginatedResult<AuthSession>>('/auth/sessions', {
+      params: { limit: AUTH_SESSION_LIST_LIMIT },
+      ...options,
+    })
+  }
+
+  /** 세션 하나 끊기 — 지금 세션은 400 VAL_001(로그아웃을 쓴다), 남의 것 · 없는 것 · 끝난 것은 404 RES_001 */
+  function endAuthSession(id: string, options?: AccountSecurityRequestOptions): Promise<null> {
+    return api.delete<null, null>(`/auth/sessions/${segment(id)}`, options)
+  }
+
+  /** 이 요청의 세션만 남기고 모두 끊는다 */
+  function endOtherAuthSessions(options?: AccountSecurityRequestOptions): Promise<EndedSessions> {
+    return api.delete<EndedSessions, EndedSessions>('/auth/sessions', options)
+  }
+
+  /** 로그인 기록 — 최근 차례 · 커서 페이지. isSuccess=false 면 실패만 */
+  function listLoginEvents(
+    query: LoginEventQuery,
+    options?: AccountSecurityRequestOptions,
+  ): Promise<PaginatedResult<LoginEvent>> {
+    return api.get<PaginatedResult<LoginEvent>, PaginatedResult<LoginEvent>>('/login-events', {
+      params: query,
+      ...options,
+    })
+  }
+
+  return {
+    getTwoFactor,
+    startTwoFactorEnrollment,
+    activateTwoFactor,
+    deactivateTwoFactor,
+    listAppPasswords,
+    createAppPassword,
+    deleteAppPassword,
+    listAuthSessions,
+    endAuthSession,
+    endOtherAuthSessions,
+    listLoginEvents,
+  }
+}
diff --git a/frontend/src/composables/useApi.spec.ts b/frontend/src/composables/useApi.spec.ts
index db7867a..939725d 100644
--- a/frontend/src/composables/useApi.spec.ts
+++ b/frontend/src/composables/useApi.spec.ts
@@ -82,6 +82,11 @@ describe('에러 코드 사전', () => {
       'FILE_005', // 보관 한도 — 그 파일 줄에 사전 문구 + [대용량 첨부 보기]
       'FILE_006', // 서버 저장 공간 — 그 파일 줄에 사전 문구, 멈추고 [다시 시도]
       'MAIL_016', // 대용량 파일을 쓸 수 없음 — 쓰기 화면이 파일마다 상태를 다시 묻는다
+      // 웹메일 12단계 (계정 보안) — 화면이 넷 모두로 분기한다 (계약 5절 "에러 코드")
+      'AUTH_006', // 2단계 인증 코드가 틀림 · 다시 씀 — 로그인 코드 단계 · 켜기 · 끄기 창 · 비밀번호 화면이 코드 칸 아래에 보이고 칸을 비운다
+      'AUTH_007', // 2단계 인증을 켠 직원의 요청에 코드가 없음 — 비밀번호 화면이 2단계 상태를 다시 받고 코드 칸을 보인다
+      'AUTH_008', // 등록이 없음 · 시간이 지남 · 그사이 바뀜 — 켜기 창이 처음부터 다시 한다
+      'AUTH_009', // 앱 비밀번호 상한 — 만들기 창이 칸 아래에 보이고 목록을 다시 받는다
     ]
 
     for (const code of usedByClient) {
diff --git a/frontend/src/composables/useAuth.spec.ts b/frontend/src/composables/useAuth.spec.ts
index 220a29d..0644b8d 100644
--- a/frontend/src/composables/useAuth.spec.ts
+++ b/frontend/src/composables/useAuth.spec.ts
@@ -96,12 +96,46 @@ describe('useAuth', () => {
 
       await expect(
         useAuth().login({ email: USER.email, password: 'secret' }),
-      ).resolves.toEqual(USER)
+      ).resolves.toEqual({ status: 'signedIn', user: USER })
 
       expect(requests[0]?.data).toEqual({ email: USER.email, password: 'secret' })
       expect(useAuthStore().user).toEqual(USER)
     })
 
+    it('응답의 status(12단계)는 스토어에 두지 않는다 — signedIn 이면 사용자 칸만', async () => {
+      installMockApi(() => ok({ status: 'signedIn', ...USER }))
+
+      await expect(useAuth().login({ email: USER.email, password: 'secret' })).resolves.toEqual({
+        status: 'signedIn',
+        user: USER,
+      })
+      expect(useAuthStore().user).toEqual(USER)
+    })
+
+    it('2단계 인증을 켠 직원(twoFactorRequired — 쿠키 없음)이면 세션을 열지 않고 그대로 돌려준다 (계약 5절)', async () => {
+      installMockApi(() => ok({ status: 'twoFactorRequired', email: null, name: null }))
+      const authStore = useAuthStore()
+      const generation = authStore.generation
+
+      await expect(useAuth().login({ email: USER.email, password: 'secret' })).resolves.toEqual({
+        status: 'twoFactorRequired',
+      })
+      expect(authStore.isLoggedIn).toBe(false)
+      expect(authStore.generation).toBe(generation)
+    })
+
+    it('코드 단계는 비밀번호와 코드를 함께 싣고, 부르는 쪽이 고른 코드의 알림을 끈다', async () => {
+      const requests = installMockApi(() => fail(429, 'REQ_001'))
+
+      const error: unknown = await useAuth()
+        .login({ email: USER.email, password: 'secret', otpCode: '123456' }, { silent: ['AUTH_004', 'AUTH_006', 'REQ_001'] })
+        .catch((reason: unknown) => reason)
+
+      expect(requests[0]?.data).toEqual({ email: USER.email, password: 'secret', otpCode: '123456' })
+      expect(isApiError(error) && error.code).toBe('REQ_001')
+      expect(useToastStore().toasts).toEqual([])
+    })
+
     it('AUTH_004 는 전역 알림 없이 던진다 — 로그인 폼이 안내한다', async () => {
       installMockApi(() => fail(401, 'AUTH_004'))
 
diff --git a/frontend/src/composables/useAuth.ts b/frontend/src/composables/useAuth.ts
index 43d8258..edc09b3 100644
--- a/frontend/src/composables/useAuth.ts
+++ b/frontend/src/composables/useAuth.ts
@@ -4,10 +4,13 @@ import { ref } from 'vue'
 import { isApiError, refreshSession, settleRefresh, useApi } from './useApi'
 import { announceLogout } from './useLogoutBroadcast'
 import { PASSWORD_CHANGE_TIMEOUT_MS } from '@/shared/constants/account'
-import type { AuthUser, ChangePasswordPayload, LoginPayload } from '@/shared/types/auth'
+import type { AuthUser, ChangePasswordPayload, LoginOutcome, LoginPayload, LoginResponse } from '@/shared/types/auth'
 import { useAuthStore } from '@/stores/auth.store'
 
-export type { LoginPayload } from '@/shared/types/auth'
+export type { LoginOutcome, LoginPayload } from '@/shared/types/auth'
+
+/** 로그인 요청의 알림 끄기 — 첫 단계는 AUTH_004 만(폼이 안내한다), 코드 단계는 코드 틀림 · 시도 과다도 화면이 직접 보인다 */
+export type LoginRequestOptions = Pick<AxiosRequestConfig, 'silent'>
 
 // 인증 API Composable — 쿠키 기반 (docs/mail/api-contract.md 1절)
 // 토큰은 HttpOnly 쿠키로만 오가므로 여기서는 응답의 사용자(email·name)만 다룬다.
@@ -18,21 +21,26 @@ export function useAuth() {
 
   /**
    * 로그인. 실패하면 ApiError 를 그대로 던진다 — 호출부가 code 로 분기한다.
-   * AUTH_004(자격 증명 불일치)는 로그인 폼이 직접 안내하므로 그 코드만 전역 알림을 끈다.
+   * AUTH_004(자격 증명 불일치)는 로그인 폼이 직접 안내하므로 기본으로 그 코드만 전역 알림을 끈다.
+   * 2단계 인증을 켠 직원이고 비밀번호가 맞으면 쿠키 없이 twoFactorRequired 가 온다(12단계 — 계약 5절) — 세션을 열지 않고 그대로 돌려준다.
+   * 화면은 코드를 받아 비밀번호와 함께 다시 부른다(payload.otpCode)
    */
-  async function login(payload: LoginPayload): Promise<AuthUser> {
+  async function login(payload: LoginPayload, options: LoginRequestOptions = {}): Promise<LoginOutcome> {
     loading.value = true
     try {
       // 이 탭에서 진행 중인 갱신이 있으면 끝난 뒤에 보낸다 (계약 1절) — 로그아웃 전에 시작한 갱신의 늦은 응답이
       // 새 로그인 쿠키를 덮거나, 그 뒤의 정리용 로그아웃이 새 세션을 끊지 않게 한다
       await settleRefresh()
       // 인터셉터가 { success, data } 를 언래핑하므로 응답 타입(R)을 data 타입으로 지정한다
-      const user = await api.post<AuthUser, AuthUser>('/auth/login', payload, {
+      const response = await api.post<LoginResponse, LoginResponse>('/auth/login', payload, {
         silent: ['AUTH_004'],
+        ...options,
       })
-      // 새 세션 — 세대가 바뀌어 그 전에 시작한 일의 늦은 결과는 쓰이지 않는다
+      if (response.status === 'twoFactorRequired') return { status: 'twoFactorRequired' }
+      // 새 세션 — 세대가 바뀌어 그 전에 시작한 일의 늦은 결과는 쓰이지 않는다. 스토어에는 사용자 칸만 둔다
+      const user: AuthUser = { email: response.email, name: response.name }
       authStore.startSession(user)
-      return user
+      return { status: 'signedIn', user }
     } finally {
       loading.value = false
     }
@@ -88,7 +96,8 @@ export function useAuth() {
   /**
    * 비밀번호 바꾸기 (계약 1절 "PUT /api/auth/password" — 4단계). 실패하면 ApiError 를 그대로 던진다 — 호출부가 code 로 분기한다.
    * 지금 비밀번호가 틀리면 400 AUTH_005(세션은 그대로). 401 이 아니므로 토큰이 만료됐을 때만 갱신 뒤 같은 요청을 다시 보낸다.
-   * 바뀌면 서버가 이 세션만 남기고 그 직원의 다른 로그인 세션을 모두 끊는다 — 이 탭의 세션은 이어진다.
+   * 바뀌면 서버가 이 세션만 남기고 그 직원의 다른 로그인 세션을 모두 끊고 앱 비밀번호도 모두 지운다 — 이 탭의 세션은 이어진다.
+   * 2단계 인증을 켠 직원은 otpCode 가 필수다(12단계 — 없으면 400 AUTH_007, 틀리면 400 AUTH_006).
    * 시간 한도는 30초다 (PASSWORD_CHANGE_TIMEOUT_MS — 서버가 엔진을 두 번 부르고 세션을 끊는 시간까지 기다린다)
    */
   async function changePassword(
diff --git a/frontend/src/composables/useLoginChallenge.ts b/frontend/src/composables/useLoginChallenge.ts
new file mode 100644
index 0000000..b535a04
--- /dev/null
+++ b/frontend/src/composables/useLoginChallenge.ts
@@ -0,0 +1,89 @@
+import { onBeforeUnmount, ref } from 'vue'
+
+import type { Clock, ClockTimer } from './useClock'
+import { TWO_FACTOR_LOGIN_WINDOW_MS } from '@/shared/constants/account-security'
+
+/** 코드 단계에서 다시 보낼 자격 — 서버는 비밀번호를 들고 있지 않아 코드와 함께 한 번 더 싣는다 */
+export interface LoginChallengeCredentials {
+  email: string
+  password: string
+}
+
+/**
+ * 로그인 코드 단계 (12단계 — 계약 5절 "로그인" 클라이언트 · 디자인 README "로그인 — 코드 단계").
+ * 확인한 비밀번호는 화면 메모리에만 둔다 — 반응형 상태에 넣지 않는다(개발 도구 · 화면에 드러나지 않게). 반응형은 단계 · 주소 · 시간 지남뿐이다.
+ * 지우는 때: 성공 · [다른 계정으로 로그인] · 비밀번호가 틀림(AUTH_004 — 첫 단계로) · 화면을 떠날 때(unmount) · 10분이 지났을 때.
+ * 10분이 지나면 비밀번호만 먼저 지우고 화면은 그대로 둔다 — [확인]을 누를 때 「다시 로그인해 주세요」와 함께 첫 단계로 간다(부르는 쪽).
+ * 10분은 타이머 하나에 기대지 않는다 — 절전 · 뒤에 깔린 탭에서는 타이머가 늦게 돈다. 꺼낼 때(credentials) 시계로 한 번 더 잰다.
+ * 화면이 사라진 뒤에는 시작하지 않는다(start 가 false) — 떠난 뒤 늦게 온 twoFactorRequired 가 비밀번호를 붙잡지 않게.
+ * 시계는 주입받는다(useClock) — 테스트는 손으로 돌리는 시계로 10분을 넘긴다
+ */
+export function useLoginChallenge(clock: Clock) {
+  /** 코드 단계를 보이는 중 */
+  const active = ref<boolean>(false)
+  /** 비밀번호를 확인한 주소 — 코드 단계에 보이고, 첫 단계로 돌아갈 때 주소 칸에 남긴다 */
+  const email = ref<string>('')
+  /** 10분이 지나 비밀번호를 지웠다 */
+  const expired = ref<boolean>(false)
+
+  let password: string | null = null
+  /** 코드 단계를 시작한 시각 (clock.now) */
+  let startedAt = 0
+  let timer: ClockTimer | null = null
+  /** 화면이 사라졌다 — 더는 시작하지 않는다 */
+  let disposed = false
+
+  function stopTimer() {
+    if (timer === null) return
+    clock.clearTimeout(timer)
+    timer = null
+  }
+
+  /** 10분이 지났다 — 비밀번호를 지운다 (화면은 그대로 — [확인] 때 첫 단계로) */
+  function expire() {
+    stopTimer()
+    password = null
+    expired.value = true
+  }
+
+  /** 비밀번호가 맞았고 코드가 필요하다 — 코드 단계로. 화면이 이미 사라졌으면 시작하지 않고 false */
+  function start(nextEmail: string, nextPassword: string): boolean {
+    if (disposed) return false
+    stopTimer()
+    email.value = nextEmail
+    password = nextPassword
+    startedAt = clock.now()
+    expired.value = false
+    active.value = true
+    timer = clock.setTimeout(() => {
+      timer = null
+      expire()
+    }, TWO_FACTOR_LOGIN_WINDOW_MS)
+    return true
+  }
+
+  /** 코드와 함께 다시 보낼 자격 — 시간이 지났거나(시계로 다시 잰다) 끝냈으면 null */
+  function credentials(): LoginChallengeCredentials | null {
+    if (!active.value || password === null) return null
+    if (clock.now() - startedAt >= TWO_FACTOR_LOGIN_WINDOW_MS) {
+      expire()
+      return null
+    }
+    return { email: email.value, password }
+  }
+
+  /** 코드 단계를 끝내고 비밀번호를 지운다 */
+  function clear() {
+    stopTimer()
+    password = null
+    active.value = false
+    expired.value = false
+  }
+
+  onBeforeUnmount(() => {
+    disposed = true
+    clear()
+  })
+
+  return { active, email, expired, start, credentials, clear }
+}
diff --git a/frontend/src/pages/LoginPage.spec.ts b/frontend/src/pages/LoginPage.spec.ts
index 397c7eb..388a324 100644
--- a/frontend/src/pages/LoginPage.spec.ts
+++ b/frontend/src/pages/LoginPage.spec.ts
@@ -1,16 +1,20 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, type VueWrapper } from '@vue/test-utils'
 import { createPinia, setActivePinia, type Pinia } from 'pinia'
 
+import { CLOCK } from '@/composables/useClock'
+import { TWO_FACTOR_LOGIN_WINDOW_MS } from '@/shared/constants/account-security'
 import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
 import { useAuthStore } from '@/stores/auth.store'
 import { useToastStore } from '@/stores/toast.store'
+import { createManualClock, type ManualClock } from '@/test-utils/manual-clock'
 import {
   fail,
   flushPromises,
   installMockApi,
   ok,
   restoreApiAdapter,
+  type MockRequest,
   type MockResult,
 } from '@/test-utils/mock-api'
 import { createTestRouter } from '@/test-utils/router'
@@ -123,3 +127,300 @@ describe('LoginPage', () => {
     expect(button.text()).toBe('로그인')
   })
 })
+
+// ── 코드 단계 (12단계 — 계약 5절 "로그인" · 디자인 원본 LoginTwoFactor) ─────────────
+
+const PASSWORD = 'Ara!2026-mail'
+const TWO_FACTOR_REQUIRED = ok({ status: 'twoFactorRequired', email: null, name: null })
+const SIGNED_IN = ok({ status: 'signedIn', ...USER })
+
+describe('LoginPage — 2단계 인증 코드 단계', () => {
+  let pinia: Pinia
+  let clock: ManualClock
+  let requests: MockRequest[]
+  const mounted: VueWrapper[] = []
+
+  beforeEach(() => {
+    pinia = createPinia()
+    setActivePinia(pinia)
+    clock = createManualClock(Date.UTC(2026, 9, 31, 1, 0, 0))
+  })
+
+  afterEach(() => {
+    for (const wrapper of mounted.splice(0)) {
+      if (!wrapper.vm.$.isUnmounted) wrapper.unmount()
+    }
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  /** 첫 요청(비밀번호만)은 twoFactorRequired, 코드가 실린 요청은 codeReply */
+  async function mountAtCodeStep(
+    codeReply: (request: MockRequest) => MockResult | Promise<MockResult> = () => SIGNED_IN,
+    path = '/login',
+  ) {
+    requests = installMockApi((request) => {
+      const body = request.data as { otpCode?: string }
+      return body.otpCode === undefined ? TWO_FACTOR_REQUIRED : codeReply(request)
+    })
+    const router = createTestRouter()
+    await router.push(path)
+    await router.isReady()
+    const wrapper = mount(LoginPage, {
+      attachTo: document.body,
+      global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: clock } },
+    })
+    mounted.push(wrapper)
+    await wrapper.get('#login-email').setValue(` ${USER.email} `)
+    await wrapper.get('#login-password').setValue(PASSWORD)
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+    return { wrapper, router }
+  }
+
+  const loginRequests = () => requests.filter((request) => request.url === '/auth/login')
+
+  async function submitCode(wrapper: VueWrapper, code: string) {
+    await wrapper.get('#login-code').setValue(code)
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+  }
+
+  it('비밀번호가 맞고 2단계 인증을 켰으면(twoFactorRequired) 코드 단계로 — 로그인하지 않고, 비밀번호 칸은 없어지고, 초점은 코드 칸', async () => {
+    const { wrapper } = await mountAtCodeStep()
+
+    expect(loginRequests().map((request) => request.data)).toEqual([{ email: USER.email, password: PASSWORD }])
+    expect(useAuthStore().isLoggedIn).toBe(false)
+    expect(wrapper.get('h1').text()).toBe('2단계 인증')
+    expect(wrapper.text()).toContain('비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.')
+    expect(wrapper.get('[data-code-step-email]').text()).toBe(USER.email)
+    expect(wrapper.find('#login-password').exists()).toBe(false)
+    expect(wrapper.get('label[for="login-code"]').text()).toBe('인증 앱에 표시된 6자리 코드')
+    const input = wrapper.get('#login-code')
+    expect(input.attributes()).toMatchObject({ inputmode: 'numeric', autocomplete: 'one-time-code', placeholder: '000000' })
+    // 붙여 넣은 "123 456" 을 브라우저가 먼저 자르지 않게 maxlength 를 걸지 않는다
+    expect(input.attributes('maxlength')).toBeUndefined()
+    expect(document.activeElement?.id).toBe('login-code')
+    expect(wrapper.text()).toContain('인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.')
+    expect(wrapper.text()).toContain('Outlook · 휴대폰 메일 앱은 이 코드를 묻지 않습니다.')
+  })
+
+  it('코드 칸은 숫자만 — 붙여 넣은 띄어쓰기 · 하이픈은 지운다', async () => {
+    const { wrapper } = await mountAtCodeStep()
+    const input = wrapper.get('#login-code')
+
+    await input.setValue('123 456')
+    expect((input.element as HTMLInputElement).value).toBe('123456')
+    await input.setValue('12-34ab')
+    expect((input.element as HTMLInputElement).value).toBe('1234')
+  })
+
+  it('6자리가 아니면 보내지 않고 칸 아래에 사전 문구(AUTH_007)', async () => {
+    const { wrapper } = await mountAtCodeStep()
+
+    await submitCode(wrapper, '1234')
+
+    expect(loginRequests()).toHaveLength(1)
+    expect(wrapper.get('#login-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_007)
+    expect(wrapper.get('#login-code').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('맞으면 비밀번호와 코드를 함께 싣고 로그인 — 로그인 전에 가려던 주소로', async () => {
+    const { wrapper, router } = await mountAtCodeStep(() => SIGNED_IN, '/login?redirect=/settings/account/two-factor')
+
+    await submitCode(wrapper, '482913')
+
+    expect(loginRequests().map((request) => request.data)).toEqual([
+      { email: USER.email, password: PASSWORD },
+      { email: USER.email, password: PASSWORD, otpCode: '482913' },
+    ])
+    expect(useAuthStore().user).toEqual(USER)
+    expect(router.currentRoute.value.fullPath).toBe('/settings/account/two-factor')
+  })
+
+  it('확인하는 동안 — 「확인하는 중…」(aria-disabled · aria-busy — 초점을 지킨다) · 칸은 읽기만 · 다시 눌러도 요청은 하나 · [다른 계정으로 로그인]도 누를 수 없다', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    const { wrapper } = await mountAtCodeStep(
+      () =>
+        new Promise<MockResult>((resolve) => {
+          release = resolve
+        }),
+    )
+    const button = wrapper.get('form button')
+    ;(button.element as HTMLButtonElement).focus()
+    await submitCode(wrapper, '482913')
+
+    expect(button.text()).toBe('확인하는 중…')
+    // disabled 가 아니다 — 꺼진 단추는 키보드 초점을 잃는다
+    expect(button.attributes('disabled')).toBeUndefined()
+    expect(button.attributes('aria-disabled')).toBe('true')
+    expect(button.attributes('aria-busy')).toBe('true')
+    expect(document.activeElement).toBe(button.element)
+    expect(wrapper.get('#login-code').attributes('readonly')).toBeDefined()
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+    expect(loginRequests()).toHaveLength(2)
+    expect(wrapper.get('[data-code-step-other]').attributes('aria-disabled')).toBe('true')
+    await wrapper.get('[data-code-step-other]').trigger('click')
+    expect(wrapper.find('#login-code').exists()).toBe(true)
+
+    // 시도 과다 — 위쪽 상자에 알리고, 초점은 [확인]에 그대로 남는다
+    release(fail(429, 'REQ_001'))
+    await flushPromises()
+    expect(button.text()).toBe('확인')
+    expect(button.attributes('aria-disabled')).toBeUndefined()
+    expect(button.attributes('aria-busy')).toBe('false')
+    expect(wrapper.get('#login-code-alert').text()).toBe(ERROR_CODE_MESSAGES.REQ_001)
+    expect(document.activeElement).toBe(button.element)
+  })
+
+  it('코드가 틀리면(400 AUTH_006) 칸 아래 빨간 글 · 칸을 비우고 초점 · 알림 없음', async () => {
+    const { wrapper } = await mountAtCodeStep(() => fail(400, 'AUTH_006'))
+
+    await submitCode(wrapper, '000111')
+
+    expect(wrapper.get('#login-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+    expect((wrapper.get('#login-code').element as HTMLInputElement).value).toBe('')
+    expect(document.activeElement?.id).toBe('login-code')
+    expect(useToastStore().toasts).toEqual([])
+    expect(useAuthStore().isLoggedIn).toBe(false)
+
+    // 다시 치면 내린다
+    await wrapper.get('#login-code').setValue('4')
+    expect(wrapper.find('#login-code-error').exists()).toBe(false)
+  })
+
+  it('시도가 너무 많으면(429 REQ_001) 위쪽 빨간 상자 — 알림 없이, 칸 · 단추는 그대로', async () => {
+    const { wrapper } = await mountAtCodeStep(() => fail(429, 'REQ_001'))
+
+    await submitCode(wrapper, '482913')
+
+    expect(wrapper.get('#login-code-alert').text()).toBe(ERROR_CODE_MESSAGES.REQ_001)
+    expect(wrapper.get('#login-code-alert').attributes('role')).toBe('alert')
+    expect((wrapper.get('#login-code').element as HTMLInputElement).value).toBe('482913')
+    expect(useToastStore().toasts).toEqual([])
+  })
+
+  it('그사이 비밀번호가 바뀌었으면(401 AUTH_004) 첫 단계로 — 주소는 남기고 비밀번호는 비우고 위쪽 상자에 사전 문구', async () => {
+    const { wrapper } = await mountAtCodeStep(() => fail(401, 'AUTH_004'))
+
+    await submitCode(wrapper, '482913')
+
+    expect(wrapper.find('#login-code').exists()).toBe(false)
+    expect(wrapper.get('h1').text()).toBe('로그인')
+    expect((wrapper.get('#login-email').element as HTMLInputElement).value).toBe(USER.email)
+    expect((wrapper.get('#login-password').element as HTMLInputElement).value).toBe('')
+    expect(wrapper.get('#login-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_004)
+    expect(wrapper.get('#login-password').attributes('aria-invalid')).toBe('true')
+    expect(document.activeElement?.id).toBe('login-password')
+    expect(useToastStore().toasts).toEqual([])
+  })
+
+  it('[다른 계정으로 로그인] — 처음 화면으로(주소 칸은 비움), 확인한 비밀번호는 버린다', async () => {
+    const { wrapper } = await mountAtCodeStep()
+
+    await wrapper.get('[data-code-step-other]').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.get('h1').text()).toBe('로그인')
+    expect((wrapper.get('#login-email').element as HTMLInputElement).value).toBe('')
+    expect((wrapper.get('#login-password').element as HTMLInputElement).value).toBe('')
+    expect(wrapper.find('#login-error').exists()).toBe(false)
+    expect(document.activeElement?.id).toBe('login-email')
+    expect(loginRequests()).toHaveLength(1)
+    // 10분 타이머도 거뒀다
+    expect(clock.pendingCount()).toBe(0)
+  })
+
+  it('10분 넘게 머물면 비밀번호를 지운다 — [확인]은 보내지 않고 「다시 로그인해 주세요」와 함께 첫 단계로(주소는 남긴다)', async () => {
+    const { wrapper } = await mountAtCodeStep()
+
+    clock.advance(TWO_FACTOR_LOGIN_WINDOW_MS - 1)
+    await wrapper.get('#login-code').setValue('482913')
+    clock.advance(1)
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+
+    expect(loginRequests()).toHaveLength(1)
+    expect(wrapper.get('h1').text()).toBe('로그인')
+    expect(wrapper.get('#login-error').text()).toBe('코드를 넣는 시간이 지났습니다. 다시 로그인해 주세요.')
+    // 안내일 뿐 — 칸을 빨갛게 하지 않는다
+    expect(wrapper.get('#login-password').attributes('aria-invalid')).toBeUndefined()
+    expect((wrapper.get('#login-email').element as HTMLInputElement).value).toBe(USER.email)
+    expect((wrapper.get('#login-password').element as HTMLInputElement).value).toBe('')
+    expect(document.activeElement?.id).toBe('login-password')
+  })
+
+  it('화면을 떠나면 코드 단계의 10분 타이머를 거둔다 (비밀번호도 함께 버린다)', async () => {
+    const { wrapper } = await mountAtCodeStep()
+    expect(clock.pendingCount()).toBe(1)
+
+    wrapper.unmount()
+
+    expect(clock.pendingCount()).toBe(0)
+  })
+
+  it('10분은 타이머 하나에 기대지 않는다 — 절전 · 뒤에 깔린 탭으로 타이머가 돌지 않았어도 [확인] 때 시계로 다시 재 첫 단계로', async () => {
+    // 타이머는 부르지 않고 시각만 10분 앞으로 간 시계 (절전에서 깨어난 PC · 타이머가 늦춰진 탭)
+    let slept = 0
+    const sleepy = {
+      now: () => clock.now() + slept,
+      setTimeout: clock.setTimeout,
+      clearTimeout: clock.clearTimeout,
+    }
+    requests = installMockApi((request) =>
+      (request.data as { otpCode?: string }).otpCode === undefined ? TWO_FACTOR_REQUIRED : SIGNED_IN,
+    )
+    const router = createTestRouter()
+    await router.push('/login')
+    await router.isReady()
+    const wrapper = mount(LoginPage, {
+      attachTo: document.body,
+      global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: sleepy } },
+    })
+    mounted.push(wrapper)
+    await wrapper.get('#login-email').setValue(USER.email)
+    await wrapper.get('#login-password').setValue(PASSWORD)
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+    expect(wrapper.find('#login-code').exists()).toBe(true)
+
+    slept = TWO_FACTOR_LOGIN_WINDOW_MS
+    await submitCode(wrapper, '482913')
+
+    expect(clock.pendingCount()).toBe(0)
+    expect(loginRequests()).toHaveLength(1)
+    expect(wrapper.get('#login-error').text()).toBe('코드를 넣는 시간이 지났습니다. 다시 로그인해 주세요.')
+    expect(useAuthStore().isLoggedIn).toBe(false)
+  })
+
+  it('기다리는 사이 화면을 떠났으면 늦게 온 twoFactorRequired 로 코드 단계를 시작하지 않는다 (비밀번호를 붙잡지 않는다)', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    requests = installMockApi(
+      () =>
+        new Promise<MockResult>((resolve) => {
+          release = resolve
+        }),
+    )
+    const router = createTestRouter()
+    await router.push('/login')
+    await router.isReady()
+    const wrapper = mount(LoginPage, {
+      attachTo: document.body,
+      global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: clock } },
+    })
+    mounted.push(wrapper)
+    await wrapper.get('#login-email').setValue(USER.email)
+    await wrapper.get('#login-password').setValue(PASSWORD)
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+
+    wrapper.unmount()
+    release(TWO_FACTOR_REQUIRED)
+    await flushPromises()
+
+    expect(clock.pendingCount()).toBe(0)
+    expect(useAuthStore().isLoggedIn).toBe(false)
+  })
+})
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index 2c6869f..f8fb9e8 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -1,34 +1,87 @@
 <script setup lang="ts">
-// 로그인 (디자인 원본 Login) — 직원 계정 = 메일 계정
+// 로그인 (디자인 원본 Login · LoginTwoFactor) — 직원 계정 = 메일 계정
 // 실패 문구는 에러 코드 사전(AUTH_004)에서만 온다. 계정 없음·비밀번호 틀림을 구분하지 않는다.
-import { ref } from 'vue'
+// 2단계 인증을 켠 직원은 비밀번호가 맞으면 코드 단계로 간다 (12단계 — 계약 5절 "로그인" · 디자인 README "로그인 — 코드 단계"):
+// - 확인한 비밀번호는 화면 메모리에만(useLoginChallenge) — 성공 · [다른 계정으로 로그인] · 떠날 때 · 10분 지나면 지운다. 새로고침도 첫 단계
+// - 코드 틀림(AUTH_006)은 칸 아래 · 칸을 비우고 초점, 시도 과다(REQ_001)는 위쪽 상자, 비밀번호 틀림(AUTH_004 — 그사이 바뀜)은 첫 단계로 돌아가 위쪽 상자
+// - 10분 넘게 머문 뒤 [확인]은 보내지 않고 「다시 로그인해 주세요」와 함께 첫 단계로(주소는 남긴다)
+import { nextTick, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import logoFull from '@/assets/brand/logo-arasystem-white.png'
 import AppIcon from '@/components/AppIcon.vue'
-import { isApiError } from '@/composables/useApi'
+import LoginCodeStep from '@/components/auth/LoginCodeStep.vue'
+import { getErrorMessage, isApiError, toApiError } from '@/composables/useApi'
 import { useAuth } from '@/composables/useAuth'
+import { useClock } from '@/composables/useClock'
+import { useLoginChallenge } from '@/composables/useLoginChallenge'
+import { LOGIN_TWO_FACTOR_TEXT } from '@/shared/constants/account-security'
 import { APP_NAME, COMPANY_MAIL_DOMAIN } from '@/shared/constants/brand'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import { isCompleteOtp } from '@/shared/utils/account-security'
 import { toSafeRedirect } from '@/shared/utils/redirect'
 
+/** 코드 단계가 직접 보이는 서버 거절 — 알림을 끈다 (그 밖의 장애는 인터셉터의 알림) */
+const CODE_STEP_SILENT: readonly ErrorCode[] = ['AUTH_004', 'AUTH_006', 'REQ_001']
+
 const route = useRoute()
 const router = useRouter()
 const { login } = useAuth()
+const clock = useClock()
+const {
+  active: codeStepActive,
+  email: challengedEmail,
+  start: startChallenge,
+  credentials: challengeCredentials,
+  clear: clearChallenge,
+} = useLoginChallenge(clock)
 
 const email = ref<string>('')
 const password = ref<string>('')
 const submitting = ref<boolean>(false)
-/** 자격 증명 불일치(AUTH_004) 안내 — 사전 문구 그대로 */
+/** 자격 증명 불일치(AUTH_004) 안내 — 사전 문구 그대로. 칸도 빨갛게 */
 const credentialError = ref<string | null>(null)
+/** 첫 단계 위쪽 상자의 안내 — 코드 단계 시간 지남 (칸은 빨갛게 하지 않는다) */
+const stepNotice = ref<string | null>(null)
+const emailRef = ref<HTMLInputElement | null>(null)
 const passwordRef = ref<HTMLInputElement | null>(null)
 
+// ── 코드 단계 ─────────────
+const codeStepRef = ref<InstanceType<typeof LoginCodeStep> | null>(null)
+const code = ref<string>('')
+const codeSubmitting = ref<boolean>(false)
+const codeError = ref<string | null>(null)
+const codeAlert = ref<string | null>(null)
+
+function goToRedirect() {
+  return router.replace(toSafeRedirect(route.query.redirect) ?? { name: 'mail' })
+}
+
+function resetCodeStep() {
+  code.value = ''
+  codeError.value = null
+  codeAlert.value = null
+}
+
 async function onSubmit() {
   if (submitting.value) return
   submitting.value = true
   credentialError.value = null
+  stepNotice.value = null
+  const address = email.value.trim()
   try {
-    await login({ email: email.value.trim(), password: password.value })
-    await router.replace(toSafeRedirect(route.query.redirect) ?? { name: 'mail' })
+    const outcome = await login({ email: address, password: password.value })
+    if (outcome.status === 'twoFactorRequired') {
+      // 확인한 비밀번호는 코드 단계의 메모리로만 옮기고 칸은 비운다 — 기다리는 사이 화면을 떠났으면 붙잡지 않는다(start 가 false)
+      const started = startChallenge(address, password.value)
+      password.value = ''
+      if (!started) return
+      resetCodeStep()
+      await nextTick()
+      codeStepRef.value?.focus()
+      return
+    }
+    await goToRedirect()
   } catch (error) {
     if (isApiError(error) && error.code === 'AUTH_004') {
       credentialError.value = error.message
@@ -40,6 +93,73 @@ async function onSubmit() {
     submitting.value = false
   }
 }
+
+/** 코드 단계를 끝내고 첫 단계로 — 비밀번호는 지운다. 주소가 남으면 비밀번호 칸, 없으면 주소 칸에 초점 */
+async function returnToPasswordStep(next: { email: string; error?: string; notice?: string }) {
+  clearChallenge()
+  resetCodeStep()
+  email.value = next.email
+  password.value = ''
+  credentialError.value = next.error ?? null
+  stepNotice.value = next.notice ?? null
+  await nextTick()
+  if (next.email) passwordRef.value?.focus()
+  else emailRef.value?.focus()
+}
+
+function focusCodeWithError(message: string) {
+  codeError.value = message
+  code.value = ''
+  codeStepRef.value?.focus()
+}
+
+/** 코드를 고치면 칸 아래 오류를 내린다 (다른 양식과 같다) */
+function setCode(value: string) {
+  code.value = value
+  codeError.value = null
+}
+
+async function onSubmitCode() {
+  if (codeSubmitting.value) return
+  const credentials = challengeCredentials()
+  if (!credentials) {
+    await returnToPasswordStep({ email: challengedEmail.value, notice: LOGIN_TWO_FACTOR_TEXT.expired })
+    return
+  }
+  codeAlert.value = null
+  if (!isCompleteOtp(code.value)) {
+    // 비었거나 6자리가 아니다 — 보내지 않는다 (서버도 400 VAL_001 로 거절한다)
+    codeError.value = getErrorMessage('AUTH_007')
+    codeStepRef.value?.focus()
+    return
+  }
+  codeSubmitting.value = true
+  codeError.value = null
+  try {
+    const outcome = await login({ ...credentials, otpCode: code.value }, { silent: CODE_STEP_SILENT })
+    if (outcome.status === 'twoFactorRequired') {
+      // 코드를 실었는데도 코드를 묻는다 — 받아들여지지 않은 코드로 본다
+      focusCodeWithError(getErrorMessage('AUTH_006'))
+      return
+    }
+    clearChallenge()
+    await goToRedirect()
+  } catch (error) {
+    const apiError = toApiError(error)
+    if (apiError.code === 'AUTH_006') focusCodeWithError(apiError.message)
+    else if (apiError.code === 'AUTH_004') await returnToPasswordStep({ email: credentials.email, error: apiError.message })
+    else if (apiError.code === 'REQ_001') codeAlert.value = apiError.message
+    // 그 밖의 실패(메일 엔진 장애 등)는 인터셉터가 알렸다 — 칸 · 단추는 그대로
+  } finally {
+    codeSubmitting.value = false
+  }
+}
+
+/** [다른 계정으로 로그인] — 처음 화면으로(주소 칸은 비움), 확인한 비밀번호는 버린다 */
+function onOtherAccount() {
+  if (codeSubmitting.value) return
+  void returnToPasswordStep({ email: '' })
+}
 </script>
 
 <template>
@@ -68,85 +188,101 @@ async function onSubmit() {
 
     <main class="login__main">
       <div class="login__panel">
-        <div class="login__heading">
-          <h1 class="login__title">
-            로그인
-          </h1>
-          <p class="login__subtitle">
-            회사 메일 계정(@{{ COMPANY_MAIL_DOMAIN }})으로 로그인하세요.
-          </p>
-        </div>
+        <LoginCodeStep
+          v-if="codeStepActive"
+          ref="codeStepRef"
+          :code="code"
+          :email="challengedEmail"
+          :submitting="codeSubmitting"
+          :code-error="codeError"
+          :alert="codeAlert"
+          @update:code="setCode"
+          @submit="onSubmitCode"
+          @other-account="onOtherAccount"
+        />
 
-        <p
-          v-if="credentialError"
-          id="login-error"
-          class="login__error"
-          role="alert"
-        >
-          <AppIcon
-            name="alert-circle"
-            class="login__error-icon"
-          />
-          <span>{{ credentialError }}</span>
-        </p>
+        <template v-else>
+          <div class="login__heading">
+            <h1 class="login__title">
+              로그인
+            </h1>
+            <p class="login__subtitle">
+              회사 메일 계정(@{{ COMPANY_MAIL_DOMAIN }})으로 로그인하세요.
+            </p>
+          </div>
 
-        <form
-          class="login__form"
-          @submit.prevent="onSubmit"
-        >
-          <div class="login__field">
-            <label
-              for="login-email"
-              class="login__label"
-            >메일 주소</label>
-            <input
-              id="login-email"
-              v-model="email"
-              type="email"
-              name="email"
-              autocomplete="username"
-              :placeholder="`name@${COMPANY_MAIL_DOMAIN}`"
-              required
-              :class="['login__input', { 'is-invalid': credentialError }]"
-              :aria-invalid="credentialError ? 'true' : undefined"
-              :aria-describedby="credentialError ? 'login-error' : undefined"
-            >
-          </div>
-          <div class="login__field">
-            <label
-              for="login-password"
-              class="login__label"
-            >비밀번호</label>
-            <input
-              id="login-password"
-              ref="passwordRef"
-              v-model="password"
-              type="password"
-              name="password"
-              autocomplete="current-password"
-              placeholder="비밀번호 입력"
-              required
-              :class="['login__input', { 'is-invalid': credentialError }]"
-              :aria-invalid="credentialError ? 'true' : undefined"
-              :aria-describedby="credentialError ? 'login-error' : undefined"
-            >
-          </div>
-          <button
-            type="submit"
-            class="login__submit"
-            :disabled="submitting"
-            :aria-busy="submitting"
+          <p
+            v-if="credentialError || stepNotice"
+            id="login-error"
+            class="login__error"
+            role="alert"
           >
-            {{ submitting ? '로그인하는 중…' : '로그인' }}
-          </button>
-        </form>
+            <AppIcon
+              name="alert-circle"
+              class="login__error-icon"
+            />
+            <span>{{ credentialError ?? stepNotice }}</span>
+          </p>
 
-        <p class="login__help">
-          비밀번호를 잊으셨다면 시스템 관리자에게 문의해 주세요.
-        </p>
-        <p class="login__note">
-          Outlook이나 휴대폰 기본 메일 앱에서도 같은 계정으로 메일을 쓸 수 있습니다. (IMAP · SMTP 설정)
-        </p>
+          <form
+            class="login__form"
+            @submit.prevent="onSubmit"
+          >
+            <div class="login__field">
+              <label
+                for="login-email"
+                class="login__label"
+              >메일 주소</label>
+              <input
+                id="login-email"
+                ref="emailRef"
+                v-model="email"
+                type="email"
+                name="email"
+                autocomplete="username"
+                :placeholder="`name@${COMPANY_MAIL_DOMAIN}`"
+                required
+                :class="['login__input', { 'is-invalid': credentialError }]"
+                :aria-invalid="credentialError ? 'true' : undefined"
+                :aria-describedby="credentialError || stepNotice ? 'login-error' : undefined"
+              >
+            </div>
+            <div class="login__field">
+              <label
+                for="login-password"
+                class="login__label"
+              >비밀번호</label>
+              <input
+                id="login-password"
+                ref="passwordRef"
+                v-model="password"
+                type="password"
+                name="password"
+                autocomplete="current-password"
+                placeholder="비밀번호 입력"
+                required
+                :class="['login__input', { 'is-invalid': credentialError }]"
+                :aria-invalid="credentialError ? 'true' : undefined"
+                :aria-describedby="credentialError || stepNotice ? 'login-error' : undefined"
+              >
+            </div>
+            <button
+              type="submit"
+              class="login__submit"
+              :disabled="submitting"
+              :aria-busy="submitting"
+            >
+              {{ submitting ? '로그인하는 중…' : '로그인' }}
+            </button>
+          </form>
+
+          <p class="login__help">
+            비밀번호를 잊으셨다면 시스템 관리자에게 문의해 주세요.
+          </p>
+          <p class="login__note">
+            Outlook이나 휴대폰 기본 메일 앱에서도 같은 계정으로 메일을 쓸 수 있습니다. (IMAP · SMTP 설정)
+          </p>
+        </template>
       </div>
     </main>
   </div>
diff --git a/frontend/src/pages/settings/AccountAppPasswordsPage.spec.ts b/frontend/src/pages/settings/AccountAppPasswordsPage.spec.ts
new file mode 100644
index 0000000..83caa4a
--- /dev/null
+++ b/frontend/src/pages/settings/AccountAppPasswordsPage.spec.ts
@@ -0,0 +1,427 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { CLOCK } from '@/composables/useClock'
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { AppPassword, CreatedAppPassword } from '@/shared/types/account-security'
+import { formatBlockedDay, formatRelativeDayTime } from '@/shared/utils/format'
+import { useAuthStore } from '@/stores/auth.store'
+import { useToastStore } from '@/stores/toast.store'
+import { createManualClock } from '@/test-utils/manual-clock'
+import { fail, flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest, type MockResult } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import resultSource from '@/components/settings/AppPasswordResultDialog.vue?raw'
+import AccountAppPasswordsPage from './AccountAppPasswordsPage.vue'
+
+// 설정 › 계정 › 앱 비밀번호 (12단계 — 디자인 원본 SettingsAppPasswords · 계약 5절 "앱 비밀번호")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+/** 한국 시간 2026-10-31 (토) 낮 12시 */
+const NOW = Date.parse('2026-10-31T03:00:00Z')
+const VALUE = 'app_7qm2xk9vtn3wpl1srb3hcy7djf2gaz1euk0n'
+
+const ITEMS: AppPassword[] = [
+  { id: 'c', name: '노트북 썬더버드', createdAt: '2026-10-31T00:20:00Z', lastUsed: null },
+  {
+    id: 'b',
+    name: '회사 PC 아웃룩',
+    createdAt: '2026-10-27T00:00:00Z',
+    lastUsed: { at: '2026-10-31T00:12:00Z', method: 'imap', ip: '211.186.95.252' },
+  },
+  {
+    id: 'a',
+    name: '휴대폰 메일 앱',
+    createdAt: '2026-10-20T00:00:00Z',
+    lastUsed: { at: '2026-10-30T09:40:00Z', method: 'smtp', ip: '223.38.120.77' },
+  },
+]
+
+const page = (items: AppPassword[]) => ({ items, pageInfo: { hasNext: false, nextCursor: null, total: items.length } })
+
+function created(name: string): CreatedAppPassword {
+  return { id: 'd', name, createdAt: '2026-10-31T02:59:00Z', lastUsed: null, password: VALUE }
+}
+
+interface Server {
+  list?: () => MockResult
+  create?: (request: MockRequest) => MockResult | Promise<MockResult>
+  remove?: (request: MockRequest) => MockResult | Promise<MockResult>
+}
+
+describe('AccountAppPasswordsPage', () => {
+  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()
+    }
+    Reflect.deleteProperty(navigator, 'clipboard')
+    useToastStore().clear()
+    restoreApiAdapter()
+    document.body.innerHTML = ''
+  })
+
+  async function mountPage(server: Server = {}) {
+    requests = installMockApi((request) => {
+      if (request.method === 'GET') return server.list ? server.list() : ok(page(ITEMS))
+      if (request.method === 'POST') {
+        if (server.create) return server.create(request)
+        return ok(created((request.data as { name: string }).name), 201)
+      }
+      return server.remove ? server.remove(request) : ok(null)
+    })
+    const router = createTestRouter()
+    await router.push('/settings/account/app-passwords')
+    await router.isReady()
+    const wrapper = mount(AccountAppPasswordsPage, {
+      attachTo: document.body,
+      global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: createManualClock(NOW) } },
+    })
+    mounted.push(wrapper)
+    await flushPromises()
+    return wrapper
+  }
+
+  const rows = (wrapper: VueWrapper) =>
+    wrapper.findAll('tbody tr').map((row) => row.findAll('td').slice(0, 3).map((cell) => cell.text()))
+  const toastMessages = () => useToastStore().toasts.map((toast) => toast.message)
+  const dialogOpen = (titleId: string) =>
+    document.querySelector(`dialog[aria-labelledby="${titleId}"]`)?.hasAttribute('open') === true
+
+  async function openCreate(wrapper: VueWrapper) {
+    await wrapper.get('[data-app-password-create]').trigger('click')
+    await flushPromises()
+  }
+
+  async function create(wrapper: VueWrapper, name: string) {
+    await wrapper.get('#app-password-name').setValue(name)
+    await wrapper.get('[data-app-password-create-submit]').trigger('click')
+    await flushPromises()
+  }
+
+  it('머리 "앱 비밀번호" · "3 / 5개" · [만들기] → 실제 표(이름 · 만든 날 · 마지막 사용 · [지우기]) → 설정값 상자 → 안내', async () => {
+    const wrapper = await mountPage()
+
+    expect(requests.map((request) => `${request.method} ${request.url}`)).toEqual(['GET /app-passwords'])
+    expect(wrapper.get('#app-passwords-page-title').text()).toBe('앱 비밀번호')
+    expect(wrapper.get('[data-app-password-count]').text()).toBe('3 / 5개')
+    expect(wrapper.get('[data-app-password-create]').attributes('aria-disabled')).toBeUndefined()
+    expect(wrapper.findAll('thead th').map((cell) => cell.text())).toEqual(['이름', '만든 날', '마지막 사용', '지우기'])
+    expect(wrapper.findAll('thead th').every((cell) => cell.attributes('scope') === 'col')).toBe(true)
+    const nowDate = new Date(NOW)
+    expect(rows(wrapper)).toEqual([
+      ['노트북 썬더버드', formatBlockedDay(ITEMS[0]?.createdAt ?? '', nowDate), '아직 쓰지 않음'],
+      [
+        '회사 PC 아웃룩',
+        formatBlockedDay(ITEMS[1]?.createdAt ?? '', nowDate),
+        `${formatRelativeDayTime('2026-10-31T00:12:00Z', nowDate)} · IMAP · 211.186.95.252`,
+      ],
+      [
+        '휴대폰 메일 앱',
+        formatBlockedDay(ITEMS[2]?.createdAt ?? '', nowDate),
+        `${formatRelativeDayTime('2026-10-30T09:40:00Z', nowDate)} · SMTP · 223.38.120.77`,
+      ],
+    ])
+    expect(rows(wrapper)[1]?.[2]).toBe('오늘 오전 9:12 · IMAP · 211.186.95.252')
+    expect(wrapper.findAll('[data-app-password-used]')[0]?.classes()).toContain('app-password-table__used--never')
+    expect(wrapper.findAll('[data-app-password-delete]').map((button) => button.attributes('aria-label'))).toEqual([
+      '‘노트북 썬더버드’ 앱 비밀번호 지우기',
+      '‘회사 PC 아웃룩’ 앱 비밀번호 지우기',
+      '‘휴대폰 메일 앱’ 앱 비밀번호 지우기',
+    ])
+    const settings = wrapper.get('[data-mail-client-settings]').text()
+    expect(settings).toContain('mx1.arasystem.it.kr · 포트 993 · SSL/TLS')
+    expect(settings).toContain('mx1.arasystem.it.kr · 포트 465 · SSL/TLS')
+    expect(settings).toContain('ara.kim@arasystem.it.kr — 메일 주소 전체')
+    expect(settings).toContain('여기서 만든 앱 비밀번호 — 웹메일 비밀번호가 아닙니다')
+    expect(wrapper.get('[data-app-password-notes]').text()).toContain(
+      '웹메일 비밀번호를 바꾸면 앱 비밀번호도 모두 지워집니다 — 메일 프로그램마다 새로 만들어 주세요.',
+    )
+  })
+
+  it('빈 상태 — "0 / 5개" + "만든 앱 비밀번호가 없습니다", 설정값 상자 · 안내는 그대로', async () => {
+    const wrapper = await mountPage({ list: () => ok(page([])) })
+
+    expect(wrapper.get('[data-app-password-count]').text()).toBe('0 / 5개')
+    expect(wrapper.find('table').exists()).toBe(false)
+    expect(wrapper.get('[data-app-password-empty]').text()).toContain('만든 앱 비밀번호가 없습니다')
+    expect(wrapper.find('[data-mail-client-settings]').exists()).toBe(true)
+  })
+
+  it('목록을 받지 못하면 사전 문구 + [다시 시도] — 그동안 [만들기]는 막는다(개수를 모르므로)', async () => {
+    let reply: MockResult = fail(503, 'MAIL_001')
+    const wrapper = await mountPage({ list: () => reply })
+
+    expect(wrapper.text()).toContain(ERROR_CODE_MESSAGES.MAIL_001)
+    expect(wrapper.find('[data-app-password-count]').exists()).toBe(false)
+    expect(wrapper.get('[data-app-password-create]').attributes('aria-disabled')).toBe('true')
+    await openCreate(wrapper)
+    expect(dialogOpen('app-password-create-title')).toBe(false)
+
+    reply = ok(page(ITEMS))
+    await wrapper.get('.mail-load-error__action').trigger('click')
+    await flushPromises()
+    expect(wrapper.get('[data-app-password-count]').text()).toBe('3 / 5개')
+  })
+
+  it('5개를 모두 만들었으면 [만들기]는 aria-disabled + 머리 아래 까닭 — 누르면 창을 열지 않고 까닭을 읽어 준다', async () => {
+    const five = [...ITEMS, { ...ITEMS[0], id: 'e', name: '집 PC 아웃룩' }, { ...ITEMS[0], id: 'f', name: '태블릿' }] as AppPassword[]
+    const wrapper = await mountPage({ list: () => ok(page(five)) })
+
+    const button = wrapper.get('[data-app-password-create]')
+    expect(wrapper.get('[data-app-password-count]').text()).toBe('5 / 5개')
+    expect(button.attributes('aria-disabled')).toBe('true')
+    expect(button.attributes('aria-describedby')).toBe('app-passwords-full')
+    expect(wrapper.get('#app-passwords-full').text()).toBe('5개까지 만들 수 있습니다. 쓰지 않는 앱 비밀번호를 지운 뒤 만들어 주세요.')
+
+    await openCreate(wrapper)
+    expect(dialogOpen('app-password-create-title')).toBe(false)
+    expect(wrapper.get('[data-app-password-status]').attributes('role')).toBe('status')
+    expect(wrapper.get('[data-app-password-status]').text()).toBe(
+      '5개까지 만들 수 있습니다. 쓰지 않는 앱 비밀번호를 지운 뒤 만들어 주세요.',
+    )
+  })
+
+  describe('만들기', () => {
+    it('이름 창 — 처음 초점은 이름 칸(40자) · 비었거나 같은 이름(앞뒤 공백을 지운 값)이면 보내지 않고 칸 아래', async () => {
+      const wrapper = await mountPage()
+      await openCreate(wrapper)
+
+      expect(dialogOpen('app-password-create-title')).toBe(true)
+      expect(document.activeElement?.id).toBe('app-password-name')
+      expect(wrapper.get('#app-password-name').attributes('maxlength')).toBe('40')
+      expect(wrapper.get('#app-password-name-help').text()).toBe('어느 프로그램 · 기기에서 쓰는지 알아볼 이름입니다. 40자까지.')
+
+      await create(wrapper, '   ')
+      expect(wrapper.get('#app-password-name-help').text()).toBe('이름을 넣어 주세요.')
+      await create(wrapper, ' 회사 PC 아웃룩 ')
+      expect(wrapper.get('#app-password-name-help').text()).toBe('같은 이름의 앱 비밀번호가 있습니다.')
+      expect(wrapper.get('#app-password-name').attributes('aria-invalid')).toBe('true')
+      expect(requests.filter((request) => request.method === 'POST')).toEqual([])
+    })
+
+    it('만들면 결과 창(620) — 값은 4자씩 떨어뜨려 보이지만 띄어쓰기는 없다, 처음 초점 [복사] · 닫으면 목록 맨 위에 새 줄 · 값은 화면에서 지운다', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true })
+      const wrapper = await mountPage()
+      await openCreate(wrapper)
+      await create(wrapper, '  집 노트북 메일  ')
+
+      expect(requests.filter((request) => request.method === 'POST').map((request) => request.data)).toEqual([
+        { name: '집 노트북 메일' },
+      ])
+      expect(dialogOpen('app-password-create-title')).toBe(false)
+      expect(dialogOpen('app-password-result-title')).toBe(true)
+      expect(document.querySelector('#app-password-result-message')?.textContent?.trim()).toBe(
+        '‘집 노트북 메일’ — 메일 프로그램의 비밀번호 칸에 아래 값을 넣어 주세요.',
+      )
+      expect(wrapper.findAll('.result__group').map((group) => group.text())).toEqual([
+        'app_',
+        '7qm2',
+        'xk9v',
+        'tn3w',
+        'pl1s',
+        'rb3h',
+        'cy7d',
+        'jf2g',
+        'az1e',
+        'uk0n',
+      ])
+      expect(wrapper.get('[data-app-password-value]').text()).toBe(VALUE)
+      expect(wrapper.get('.result__length').text()).toBe('40자입니다. 보기 좋게 4자씩 띄웠지만 띄어쓰기는 없습니다.')
+      expect(document.activeElement?.hasAttribute('data-app-password-copy')).toBe(true)
+      expect(wrapper.get('.result__warning').text()).toContain('이 창을 닫으면 다시 볼 수 없습니다.')
+
+      await wrapper.get('[data-app-password-copy]').trigger('click')
+      await flushPromises()
+      expect(writeText).toHaveBeenCalledWith(VALUE)
+      expect(toastMessages()).toEqual(['앱 비밀번호를 복사했습니다.'])
+
+      await wrapper.get('[data-app-password-result-close]').trigger('click')
+      await flushPromises()
+      expect(dialogOpen('app-password-result-title')).toBe(false)
+      expect(wrapper.find('[data-app-password-value]').text()).toBe('')
+      expect(document.body.textContent).not.toContain('7qm2')
+      expect(rows(wrapper)[0]?.[0]).toBe('집 노트북 메일')
+      expect(wrapper.get('[data-app-password-count]').text()).toBe('4 / 5개')
+    })
+
+    it('값의 묶음은 가운데서 줄이 바뀌지 않는다 — 넓으면 한 줄, 좁으면 묶음 사이에서만 (줄바꿈 없는 inline-block · 글자 사이에 아무것도 넣지 않는다)', async () => {
+      const css = resultSource.slice(resultSource.indexOf('<style'))
+      const rule = (selector: string) => new RegExp(`${selector.replace(/[.-]/g, '\\$&')}\\s*\\{([^}]*)\\}`).exec(css)?.[1] ?? ''
+      expect(rule('.result__group')).toMatch(/display:\s*inline-block/)
+      expect(rule('.result__group')).toMatch(/white-space:\s*nowrap/)
+      expect(rule('.result__value')).not.toMatch(/overflow-wrap|word-break/)
+
+      const wrapper = await mountPage()
+      await openCreate(wrapper)
+      await create(wrapper, '집 노트북 메일')
+      // 골라 복사해도 값 그대로 — 묶음 사이에 띄어쓰기 · 줄바꿈 글자가 없다
+      expect(wrapper.get('[data-app-password-value]').element.textContent).toBe(VALUE)
+    })
+
+    it('복사하지 못하면 「값을 직접 골라 복사해 주세요」 알림', async () => {
+      const wrapper = await mountPage()
+      await openCreate(wrapper)
+      await create(wrapper, '집 노트북 메일')
+
+      await wrapper.get('[data-app-password-copy]').trigger('click')
+      await flushPromises()
+      expect(useToastStore().toasts.at(-1)).toMatchObject({
+        kind: 'error',
+        message: '앱 비밀번호를 복사하지 못했습니다. 값을 직접 골라 복사해 주세요.',
+      })
+    })
+
+    it('세션이 바뀌면(다른 곳에서 이 세션을 끊음 → 세션 만료) 결과 창을 닫고 값을 화면에서 지운다', async () => {
+      const wrapper = await mountPage()
+      await openCreate(wrapper)
+      await create(wrapper, '집 노트북 메일')
+      expect(wrapper.get('[data-app-password-value]').text()).toBe(VALUE)
+
+      useAuthStore().expireSession()
+      await flushPromises()
+
+      expect(dialogOpen('app-password-result-title')).toBe(false)
+      expect(document.body.textContent).not.toContain('7qm2')
+    })
+
+    it('세션이 바뀌면 만들기 창도 닫는다', async () => {
+      const wrapper = await mountPage()
+      await openCreate(wrapper)
+      await wrapper.get('#app-password-name').setValue('집 노트북 메일')
+
+      useAuthStore().expireSession()
+      await flushPromises()
+      expect(dialogOpen('app-password-create-title')).toBe(false)
+    })
+
+    it('세션이 바뀌면 지우기 확인 창도 닫는다', async () => {
+      const wrapper = await mountPage()
+      await wrapper.findAll('[data-app-password-delete]')[0]?.trigger('click')
+      await flushPromises()
+      expect(dialogOpen('app-password-delete-title')).toBe(true)
+
+      useAuthStore().expireSession()
+      await flushPromises()
+      expect(dialogOpen('app-password-delete-title')).toBe(false)
+    })
+
+    it('만드는 사이 세션이 바뀌었으면 늦게 온 값을 그리지도 목록에 넣지도 않는다', async () => {
+      let release: (result: MockResult) => void = () => undefined
+      const wrapper = await mountPage({
+        create: () =>
+          new Promise<MockResult>((resolve) => {
+            release = resolve
+          }),
+      })
+      await openCreate(wrapper)
+      await create(wrapper, '집 노트북 메일')
+
+      useAuthStore().startSession(USER)
+      release(ok(created('집 노트북 메일'), 201))
+      await flushPromises()
+
+      expect(dialogOpen('app-password-result-title')).toBe(false)
+      expect(document.body.textContent).not.toContain('7qm2')
+      expect(rows(wrapper).map((row) => row[0])).not.toContain('집 노트북 메일')
+    })
+
+    it('닫았다 다시 연 만들기 창에는 앞 요청의 거절을 넣지 않는다 — [만들기]의 바쁨도 처음으로', async () => {
+      const replies: ((result: MockResult) => void)[] = []
+      const wrapper = await mountPage({
+        create: () =>
+          new Promise<MockResult>((resolve) => {
+            replies.push(resolve)
+          }),
+      })
+      await openCreate(wrapper)
+      await create(wrapper, '집 노트북 메일')
+      expect(wrapper.get('[data-app-password-create-submit]').attributes('aria-busy')).toBe('true')
+      await wrapper.get('[data-app-password-create-cancel]').trigger('click')
+      await flushPromises()
+
+      await openCreate(wrapper)
+      expect(wrapper.get('[data-app-password-create-submit]').attributes('aria-busy')).toBeUndefined()
+      replies[0]?.(fail(400, 'VAL_001'))
+      await flushPromises()
+
+      expect(wrapper.get('#app-password-name-help').text()).toBe('어느 프로그램 · 기기에서 쓰는지 알아볼 이름입니다. 40자까지.')
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('그사이 다른 창에서 5개를 채웠으면(409 AUTH_009) 칸 아래 사전 문구 · 목록을 다시 받아 개수를 맞춘다', async () => {
+      let list = ITEMS
+      const five = [...ITEMS, { ...ITEMS[0], id: 'e', name: '집 PC 아웃룩' }, { ...ITEMS[0], id: 'f', name: '태블릿' }] as AppPassword[]
+      const wrapper = await mountPage({
+        list: () => ok(page(list)),
+        create: () => {
+          list = five
+          return fail(409, 'AUTH_009')
+        },
+      })
+      await openCreate(wrapper)
+      await create(wrapper, '집 노트북 메일')
+      await flushPromises()
+
+      expect(wrapper.get('#app-password-name-help').text()).toBe(ERROR_CODE_MESSAGES.AUTH_009)
+      expect(toastMessages()).toEqual([])
+      expect(requests.filter((request) => request.method === 'GET')).toHaveLength(2)
+      expect(wrapper.get('[data-app-password-count]').text()).toBe('5 / 5개')
+      expect(dialogOpen('app-password-result-title')).toBe(false)
+    })
+  })
+
+  describe('지우기', () => {
+    it('확인 창(alertdialog · 처음 초점 「취소」) → DELETE · 「‘…’ 앱 비밀번호를 지웠습니다.」 — 줄이 빠지고 개수가 준다, 초점은 다음 줄', async () => {
+      const wrapper = await mountPage()
+      await wrapper.findAll('[data-app-password-delete]')[1]?.trigger('click')
+      await flushPromises()
+
+      const dialog = document.querySelector('dialog[aria-labelledby="app-password-delete-title"]')
+      expect(dialog?.hasAttribute('open')).toBe(true)
+      expect(dialog?.getAttribute('role')).toBe('alertdialog')
+      expect(document.querySelector('#app-password-delete-title')?.textContent?.trim()).toBe(
+        '‘회사 PC 아웃룩’ 앱 비밀번호를 지울까요?',
+      )
+      expect(document.activeElement?.hasAttribute('data-app-password-delete-cancel')).toBe(true)
+
+      await wrapper.get('[data-app-password-delete-confirm]').trigger('click')
+      await flushPromises()
+
+      expect(requests.filter((request) => request.method === 'DELETE').map((request) => request.url)).toEqual([
+        '/app-passwords/b',
+      ])
+      expect(toastMessages()).toEqual(['‘회사 PC 아웃룩’ 앱 비밀번호를 지웠습니다.'])
+      expect(rows(wrapper).map((row) => row[0])).toEqual(['노트북 썬더버드', '휴대폰 메일 앱'])
+      expect(wrapper.get('[data-app-password-count]').text()).toBe('2 / 5개')
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('‘휴대폰 메일 앱’ 앱 비밀번호 지우기')
+    })
+
+    it('취소하면 지우지 않는다 · 지우지 못하면(장애) 창을 그대로 두고 알림은 인터셉터', async () => {
+      const wrapper = await mountPage({ remove: () => fail(503, 'MAIL_001') })
+      await wrapper.findAll('[data-app-password-delete]')[0]?.trigger('click')
+      await flushPromises()
+      await wrapper.get('[data-app-password-delete-cancel]').trigger('click')
+      await flushPromises()
+      expect(requests.filter((request) => request.method === 'DELETE')).toEqual([])
+
+      await wrapper.findAll('[data-app-password-delete]')[0]?.trigger('click')
+      await flushPromises()
+      await wrapper.get('[data-app-password-delete-confirm]').trigger('click')
+      await flushPromises()
+      expect(toastMessages()).toEqual([ERROR_CODE_MESSAGES.MAIL_001])
+      expect(document.querySelector('dialog[aria-labelledby="app-password-delete-title"]')?.hasAttribute('open')).toBe(true)
+      expect(rows(wrapper)).toHaveLength(3)
+    })
+  })
+})
diff --git a/frontend/src/pages/settings/AccountAppPasswordsPage.vue b/frontend/src/pages/settings/AccountAppPasswordsPage.vue
new file mode 100644
index 0000000..3af4c9d
--- /dev/null
+++ b/frontend/src/pages/settings/AccountAppPasswordsPage.vue
@@ -0,0 +1,430 @@
+<script setup lang="ts">
+// 설정 › 계정 › 앱 비밀번호 (디자인 원본 SettingsAppPasswords · README "12단계 › 설정 › 계정 › 앱 비밀번호" · 계약 5절 "앱 비밀번호")
+// — /settings/account/app-passwords · 탭 제목 "앱 비밀번호"
+// 머리 + 설명 · 오른쪽 "3 / 5개" + [앱 비밀번호 만들기] → 표(AppPasswordTable) 또는 빈 상태 → 메일 프로그램 설정값 상자 → 아래 안내 상자
+// - 들어올 때마다 새로 받는다(app-passwords.store). 받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도" — 그동안 [만들기]는 막는다(개수를 모르므로)
+// - 5개를 모두 만들었으면 [만들기]는 aria-disabled + 머리 아래 한 줄(까닭) — 누르면 창을 열지 않고 까닭을 읽어 준다(role=status)
+// - [만들기] → 이름 창(AppPasswordCreateDialog) → 결과 창(AppPasswordResultDialog — 값은 이 화면 메모리에만, 닫으면 지운다) → 목록 맨 위에 새 줄.
+//   만들기 요청은 이 화면이 보낸다 — 값이 든 응답을 스토어(Pinia 타임라인) · 창의 이벤트로 넘기지 않는다(스토어에는 값을 뺀 줄만)
+// - [지우기] → 확인 창(처음 초점 「취소」) → 「‘…’ 앱 비밀번호를 지웠습니다.」 — 줄이 빠지고 개수가 준다(되돌리기 없음). 누른 줄이 사라지면 초점은 다음 줄(없으면 앞 줄 · [만들기])
+// - 세션이 바뀌면(다른 기기의 [다른 곳 모두 로그아웃] · 로그아웃 · 만료) 창을 모두 닫고 값을 지운다 — 세션 만료 창 뒤에 앱 비밀번호가 남지 않게
+// - 만들기 창을 닫았다 다시 열면 앞 요청의 거절은 새 창에 넣지 않는다(몇 번째로 연 창인가 — createOpenSeq). 앞 요청이 만들었으면 결과 창은 연다(값은 그때 한 번만 온다)
+// 고정 id — #app-passwords-page-title · #app-passwords-full
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import MailLoadError from '@/components/mail/MailLoadError.vue'
+import AppPasswordCreateDialog from '@/components/settings/AppPasswordCreateDialog.vue'
+import AppPasswordDeleteDialog from '@/components/settings/AppPasswordDeleteDialog.vue'
+import AppPasswordResultDialog from '@/components/settings/AppPasswordResultDialog.vue'
+import AppPasswordTable from '@/components/settings/AppPasswordTable.vue'
+import MailClientSettings from '@/components/settings/MailClientSettings.vue'
+import SettingsPageFrame from '@/components/settings/SettingsPageFrame.vue'
+import { useAccountSecurity } from '@/composables/useAccountSecurity'
+import { notifyApiError, toApiError } from '@/composables/useApi'
+import { useClock } from '@/composables/useClock'
+import { useToast } from '@/composables/useToast'
+import { APP_PASSWORD_MAX, APP_PASSWORD_TEXT } from '@/shared/constants/account-security'
+import type { ErrorCode } from '@/shared/constants/error-codes.generated'
+import type { AppPassword } from '@/shared/types/account-security'
+import { appPasswordCountText } from '@/shared/utils/account-security'
+import { formatCount } from '@/shared/utils/format'
+import { useAppPasswordsStore } from '@/stores/app-passwords.store'
+import { useAuthStore } from '@/stores/auth.store'
+
+const FULL_REASON_ID = 'app-passwords-full'
+/** 만들기 창의 칸 아래에 보이는 서버 거절 — 알림을 끈다 (그사이 5개를 채움 · 형식) */
+const CREATE_INLINE_CODES: readonly ErrorCode[] = ['VAL_001', 'AUTH_009']
+
+const api = useAccountSecurity()
+const appPasswordsStore = useAppPasswordsStore()
+const authStore = useAuthStore()
+const toast = useToast()
+const clock = useClock()
+
+/** 화면을 연 때 — "오늘 · 어제" 의 기준 */
+const now = clock.now()
+
+const createRef = ref<HTMLButtonElement | null>(null)
+const tableRef = ref<InstanceType<typeof AppPasswordTable> | null>(null)
+const createOpen = ref<boolean>(false)
+const creating = ref<boolean>(false)
+/** 만들기 창의 서버 거절 — 사전 문구 */
+const createError = ref<string | null>(null)
+/** 만든 결과 — 값이 들어 있다. 이 화면 메모리에만 두고 창을 닫으면 지운다 */
+const result = shallowRef<{ name: string; password: string } | null>(null)
+/** 지울지 묻는 줄 */
+const deleteTarget = ref<AppPassword | null>(null)
+const removing = ref<boolean>(false)
+/** 막힌 [만들기]를 눌렀을 때 읽어 줄 까닭 (role=status) */
+const announcement = ref<string>('')
+/** 만들기 창을 연 차례 — 닫았다 다시 연 창에 앞 요청의 결과를 넣지 않는다 */
+let createOpenSeq = 0
+let unmounted = false
+
+const ready = computed(() => appPasswordsStore.status === 'ready')
+const items = computed(() => appPasswordsStore.items)
+const isFull = computed(() => ready.value && appPasswordsStore.isFull)
+/** [만들기]를 누를 수 있다 — 목록을 받았고 상한 아래 */
+const canCreate = computed(() => ready.value && !appPasswordsStore.isFull)
+const countText = computed(() => appPasswordCountText(items.value.length, APP_PASSWORD_MAX))
+const fullReason = APP_PASSWORD_TEXT.full(formatCount(APP_PASSWORD_MAX))
+const email = computed(() => authStore.user?.email ?? '')
+
+async function onCreateClick() {
+  if (canCreate.value) {
+    createOpenSeq += 1
+    creating.value = false
+    createError.value = null
+    createOpen.value = true
+    return
+  }
+  if (!isFull.value) return
+  // 같은 글이어도 다시 읽게 비웠다가 넣는다
+  announcement.value = ''
+  await nextTick()
+  announcement.value = fullReason
+}
+
+/**
+ * 만들기 — 값(password)은 이 응답에만 온다. 스토어에는 값을 뺀 줄만 넣고 값은 결과 창(화면 메모리)으로.
+ * 기다리는 사이 세션이 바뀌었으면 아무것도 쓰지 않는다. 창을 닫았거나 다시 열었어도 만들어졌으면 결과 창은 연다(값을 다시 받을 길이 없다)
+ */
+async function submitCreate(name: string) {
+  if (creating.value) return
+  const opened = createOpenSeq
+  const session = authStore.generation
+  creating.value = true
+  createError.value = null
+  try {
+    const created = await api.createAppPassword(name, { silent: CREATE_INLINE_CODES })
+    if (authStore.generation !== session || unmounted) return
+    appPasswordsStore.add({ id: created.id, name: created.name, createdAt: created.createdAt, lastUsed: created.lastUsed })
+    createOpen.value = false
+    result.value = { name: created.name, password: created.password }
+  } catch (caught) {
+    const apiError = toApiError(caught)
+    if (authStore.generation !== session) return
+    // 그사이 다른 창에서 채웠다 — 개수를 맞춘다 (화면의 [만들기]도 막힌다)
+    if (apiError.code === 'AUTH_009' && !unmounted) void appPasswordsStore.refresh()
+    if (!CREATE_INLINE_CODES.includes(apiError.code)) return
+    if (unmounted || opened !== createOpenSeq || !createOpen.value) {
+      // 보낸 창이 없다 — 닫힌 채면 알림으로, 다시 연 창에는 앞 요청의 거절을 넣지 않는다
+      if (opened === createOpenSeq) notifyApiError(apiError)
+      return
+    }
+    createError.value = apiError.message
+  } finally {
+    if (opened === createOpenSeq) creating.value = false
+  }
+}
+
+function closeCreate() {
+  createOpen.value = false
+}
+
+function closeResult() {
+  result.value = null
+}
+
+/** 모든 창을 닫고 값을 지운다 — 세션이 바뀌었다 */
+function closeAll() {
+  createOpenSeq += 1
+  createOpen.value = false
+  creating.value = false
+  createError.value = null
+  result.value = null
+  deleteTarget.value = null
+}
+
+/**
+ * 사라진 줄 대신 초점을 둘 곳 — 그 자리의 다음 줄, 없으면 앞 줄, 그것도 없으면 [만들기].
+ * 초점이 갈 곳을 잃었을 때만 옮긴다 — 누른 줄의 단추가 사라졌거나, 닫힌 확인 창 안에 남았다(창을 연 단추가 이미 없어 돌려줄 곳이 없었다)
+ */
+async function focusAfterRemoval(index: number) {
+  await nextTick()
+  const active = document.activeElement
+  const lost = active === null || active === document.body || active.closest('dialog:not([open])') !== null
+  if (!lost) return
+  const root: unknown = tableRef.value?.$el
+  const buttons = root instanceof HTMLElement ? Array.from(root.querySelectorAll<HTMLButtonElement>('[data-app-password-delete]')) : []
+  const target = buttons[index] ?? buttons[index - 1]
+  if (target) target.focus()
+  else createRef.value?.focus()
+}
+
+async function confirmDelete() {
+  const target = deleteTarget.value
+  if (!target || removing.value) return
+  const index = items.value.findIndex((item) => item.id === target.id)
+  removing.value = true
+  try {
+    await appPasswordsStore.remove(target.id)
+    deleteTarget.value = null
+    toast.success(APP_PASSWORD_TEXT.deleted(target.name))
+    await focusAfterRemoval(index)
+  } catch {
+    // 인터셉터가 알렸다 — 창은 그대로 두어 다시 누를 수 있게 한다
+  } finally {
+    removing.value = false
+  }
+}
+
+onBeforeUnmount(() => {
+  unmounted = true
+  result.value = null
+})
+
+// 세션이 바뀌면(다른 기기의 [다른 곳 모두 로그아웃]으로 이 세션이 끊김 · 로그아웃 · 만료) 창을 모두 닫고 값을 지운다
+watch(
+  () => authStore.generation,
+  () => closeAll(),
+)
+
+// 처음 그리기 전에 — 다른 탭에서 만들었거나, 비밀번호를 바꿔 모두 지워졌을 수 있다
+void appPasswordsStore.load()
+</script>
+
+<template>
+  <SettingsPageFrame
+    title-id="app-passwords-page-title"
+    :title="APP_PASSWORD_TEXT.title"
+    :description="APP_PASSWORD_TEXT.description"
+  >
+    <template #actions>
+      <div class="app-passwords__head-actions">
+        <span
+          v-if="ready"
+          class="app-passwords__count"
+          data-app-password-count
+        >{{ countText }}</span>
+        <button
+          ref="createRef"
+          type="button"
+          class="app-passwords__create"
+          :aria-disabled="canCreate ? undefined : 'true'"
+          :aria-describedby="isFull ? FULL_REASON_ID : undefined"
+          data-app-password-create
+          @click="onCreateClick"
+        >
+          <AppIcon
+            name="plus"
+            :size="15"
+            :stroke-width="2"
+          />
+          <span>{{ APP_PASSWORD_TEXT.create }}</span>
+        </button>
+      </div>
+    </template>
+
+    <p
+      v-if="isFull"
+      :id="FULL_REASON_ID"
+      class="app-passwords__full"
+      data-app-password-full
+    >
+      {{ fullReason }}
+    </p>
+    <span
+      class="visually-hidden"
+      role="status"
+      data-app-password-status
+    >{{ announcement }}</span>
+
+    <MailLoadError
+      v-if="appPasswordsStore.status === 'error' && appPasswordsStore.error"
+      :error="appPasswordsStore.error"
+      leave-label=""
+      @retry="appPasswordsStore.load()"
+    />
+
+    <template v-else-if="ready">
+      <AppPasswordTable
+        v-if="items.length > 0"
+        ref="tableRef"
+        :items="items"
+        :now="now"
+        :removing-id="removing ? (deleteTarget?.id ?? null) : null"
+        @delete="deleteTarget = $event"
+      />
+      <div
+        v-else
+        class="app-passwords__empty"
+        data-app-password-empty
+      >
+        <AppIcon
+          name="key"
+          :size="28"
+          :stroke-width="1.5"
+          class="app-passwords__empty-icon"
+        />
+        <p class="app-passwords__empty-title">
+          {{ APP_PASSWORD_TEXT.emptyTitle }}
+        </p>
+        <p class="app-passwords__empty-hint">
+          {{ APP_PASSWORD_TEXT.emptyHint }}
+        </p>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="app-passwords__placeholder"
+      aria-busy="true"
+    />
+
+    <section
+      class="app-passwords__settings"
+      aria-labelledby="app-passwords-settings-title"
+    >
+      <h2
+        id="app-passwords-settings-title"
+        class="app-passwords__settings-title"
+      >
+        {{ APP_PASSWORD_TEXT.settingsTitle }}
+      </h2>
+      <MailClientSettings :email="email" />
+    </section>
+
+    <div
+      class="app-passwords__notes"
+      data-app-password-notes
+    >
+      <p
+        v-for="note in APP_PASSWORD_TEXT.notes"
+        :key="note"
+        class="app-passwords__note"
+      >
+        <span aria-hidden="true">·</span>
+        <span>{{ note }}</span>
+      </p>
+    </div>
+
+    <AppPasswordCreateDialog
+      :open="createOpen"
+      :existing="items"
+      :pending="creating"
+      :error="createError"
+      @submit="submitCreate"
+      @close="closeCreate"
+      @clear-error="createError = null"
+    />
+    <AppPasswordResultDialog
+      :result="result"
+      :email="email"
+      @close="closeResult"
+    />
+    <AppPasswordDeleteDialog
+      :name="deleteTarget?.name ?? null"
+      :busy="removing"
+      @confirm="confirmDelete"
+      @cancel="deleteTarget = null"
+    />
+  </SettingsPageFrame>
+</template>
+
+<style scoped>
+.app-passwords__head-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+}
+
+.app-passwords__count {
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-passwords__create {
+  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;
+}
+
+.app-passwords__create:hover:not([aria-disabled='true']) {
+  background: var(--color-brand-strong);
+}
+
+/* 막힌 [만들기] — 회색 바탕 (디자인 원본 SettingsAppPasswords "5개를 모두 만들었을 때") */
+.app-passwords__create[aria-disabled='true'] {
+  background: var(--color-border-strong);
+  cursor: not-allowed;
+}
+
+/* 머리 아래 한 줄 — 묶음 사이(22)보다 붙여 머리에 딸린 글로 보이게 (위로 10 당긴다) */
+.app-passwords__full {
+  margin: calc(var(--space-10) * -1) 0 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+/* 빈 상태 — 가운데 정렬 상자 (디자인 원본 SettingsAppPasswords "빈 상태") */
+.app-passwords__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-28) var(--space-16);
+  border: var(--border-width) solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-sunken);
+  text-align: center;
+}
+
+.app-passwords__empty-icon {
+  color: var(--color-icon-muted);
+}
+
+.app-passwords__empty-title {
+  margin: var(--space-4) 0 0;
+  font-weight: 600;
+}
+
+.app-passwords__empty-hint {
+  max-width: 30rem;
+  margin: 0;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.app-passwords__placeholder {
+  min-height: 10rem;
+}
+
+.app-passwords__settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.app-passwords__settings-title {
+  margin: 0;
+  font-size: var(--font-size-body);
+  font-weight: 700;
+}
+
+/* 아래 안내 — 바탕 #F3F8F8 */
+.app-passwords__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-14) var(--space-16);
+  border-radius: var(--radius-lg);
+  background: var(--color-brand-tint);
+  color: var(--color-text-strong);
+}
+
+.app-passwords__note {
+  display: flex;
+  gap: var(--space-8);
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/pages/settings/AccountLoginHistoryPage.spec.ts b/frontend/src/pages/settings/AccountLoginHistoryPage.spec.ts
new file mode 100644
index 0000000..8606bef
--- /dev/null
+++ b/frontend/src/pages/settings/AccountLoginHistoryPage.spec.ts
@@ -0,0 +1,506 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { CLOCK } from '@/composables/useClock'
+import { ERROR_CODE_MESSAGES } from '@/shared/constants/error-codes.generated'
+import type { AuthSession, LoginEvent } from '@/shared/types/account-security'
+import { formatRelativeDayTime } from '@/shared/utils/format'
+import { useAuthStore } from '@/stores/auth.store'
+import { useToastStore } from '@/stores/toast.store'
+import { createManualClock } from '@/test-utils/manual-clock'
+import { fail, flushPromises, installMockApi, ok, restoreApiAdapter, type MockRequest, type MockResult } from '@/test-utils/mock-api'
+import { createTestRouter } from '@/test-utils/router'
+import AccountLoginHistoryPage from './AccountLoginHistoryPage.vue'
+
+// 설정 › 계정 › 로그인 기록 (12단계 — 디자인 원본 SettingsLoginHistory · 계약 5절 "로그인된 브라우저" · "로그인 기록")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+/** 한국 시간 2026-10-31 (토) 낮 12시 */
+const NOW = Date.parse('2026-10-31T03:00:00Z')
+
+const SESSIONS: AuthSession[] = [
+  {
+    id: 'now',
+    createdAt: '2026-10-31T00:00:00Z',
+    lastActiveAt: '2026-10-31T02:50:00Z',
+    ip: '211.186.95.252',
+    device: { browser: 'Chrome', os: 'Windows' },
+    isCurrent: true,
+  },
+  {
+    id: 'edge',
+    createdAt: '2026-10-30T00:00:00Z',
+    lastActiveAt: '2026-10-31T00:05:00Z',
+    ip: '211.186.95.252',
+    device: { browser: 'Edge', os: 'Windows' },
+    isCurrent: false,
+  },
+  {
+    id: 'phone',
+    createdAt: '2026-10-29T00:00:00Z',
+    lastActiveAt: '2026-10-30T13:31:00Z',
+    ip: null,
+    device: { browser: 'Safari', os: 'iOS' },
+    isCurrent: false,
+  },
+]
+
+function loginEvent(id: string, changes: Partial<LoginEvent>): LoginEvent {
+  return {
+    id,
+    occurredAt: '2026-10-31T00:30:00Z',
+    method: 'webmail',
+    isSuccess: true,
+    isTwoFactor: false,
+    failureReason: null,
+    ip: '211.186.95.252',
+    device: { browser: 'Chrome', os: 'Windows' },
+    appPassword: null,
+    ...changes,
+  }
+}
+
+const EVENTS: LoginEvent[] = [
+  loginEvent('e1', { occurredAt: '2026-10-31T00:30:00Z', isTwoFactor: true }),
+  loginEvent('e2', { occurredAt: '2026-10-31T00:29:00Z', isSuccess: false, failureReason: 'wrongCode' }),
+  loginEvent('e3', {
+    occurredAt: '2026-10-31T00:12:00Z',
+    method: 'imap',
+    device: null,
+    appPassword: { id: 'b', name: '회사 PC 아웃룩' },
+  }),
+  loginEvent('e4', {
+    occurredAt: '2026-10-30T14:58:00Z',
+    method: 'smtp',
+    device: null,
+    isSuccess: false,
+    failureReason: 'appPasswordRequired',
+    ip: '45.133.10.21',
+  }),
+  loginEvent('e5', { occurredAt: '2026-10-29T06:21:00Z', device: null, isSuccess: false, failureReason: 'wrongPassword' }),
+]
+
+const pageOf = <T>(items: T[], next: string | null = null, total: number | null = items.length) => ({
+  items,
+  pageInfo: { hasNext: next !== null, nextCursor: next, total },
+})
+
+interface Server {
+  sessions?: () => MockResult | Promise<MockResult>
+  events?: (request: MockRequest) => MockResult | Promise<MockResult>
+  endSession?: (request: MockRequest) => MockResult
+  endOthers?: () => MockResult
+}
+
+describe('AccountLoginHistoryPage', () => {
+  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 = {}) {
+    requests = installMockApi((request) => {
+      if (request.url === '/auth/sessions' && request.method === 'GET') {
+        return server.sessions ? server.sessions() : ok(pageOf(SESSIONS))
+      }
+      if (request.url === '/auth/sessions') return server.endOthers ? server.endOthers() : ok({ ended: 2 })
+      if (request.url.startsWith('/auth/sessions/')) return server.endSession ? server.endSession(request) : ok(null)
+      if (request.url === '/login-events') return server.events ? server.events(request) : ok(pageOf(EVENTS))
+      return ok(null)
+    })
+    const router = createTestRouter()
+    await router.push('/settings/account/login-history')
+    await router.isReady()
+    const wrapper = mount(AccountLoginHistoryPage, {
+      attachTo: document.body,
+      global: { plugins: [pinia, router], provide: { [CLOCK as symbol]: createManualClock(NOW) } },
+    })
+    mounted.push(wrapper)
+    await flushPromises()
+    return wrapper
+  }
+
+  const sessionRows = (wrapper: VueWrapper) =>
+    wrapper.findAll('[data-session]').map((row) => row.findAll('td').slice(1, 4).map((cell) => cell.text()))
+  const eventRows = (wrapper: VueWrapper) =>
+    wrapper.findAll('[data-login-event]').map((row) => row.findAll('td').map((cell) => cell.text()))
+  const toastMessages = () => useToastStore().toasts.map((toast) => toast.message)
+  const eventRequests = () => requests.filter((request) => request.url === '/login-events')
+
+  it('머리 설명의 「비밀번호를 바꾸고」 · 「2단계 인증」은 링크 — 둘을 함께 받는다(세션 100 · 기록 20)', async () => {
+    const wrapper = await mountPage()
+
+    expect(requests.map((request) => [request.method, request.url, request.params])).toEqual([
+      ['GET', '/auth/sessions', { limit: 100 }],
+      ['GET', '/login-events', { limit: 20 }],
+    ])
+    expect(wrapper.get('#login-history-page-title').text()).toBe('로그인 기록')
+    const description = wrapper.get('.settings-page__description')
+    expect(description.text()).toBe(
+      '최근 90일 동안의 로그인입니다. 모르는 기록이 있으면 바로 비밀번호를 바꾸고, 2단계 인증이 꺼져 있으면 켜 주세요.',
+    )
+    expect(description.findAll('a').map((link) => [link.text(), link.attributes('href')])).toEqual([
+      ['비밀번호를 바꾸고', '/settings/account/password'],
+      ['2단계 인증', '/settings/account/two-factor'],
+    ])
+  })
+
+  describe('로그인된 브라우저', () => {
+    it('"웹메일 3곳" · 줄마다 PC · 휴대폰 아이콘 · 브라우저 · 운영체제 / IP / 마지막 활동 — 지금 이 브라우저는 단추 없이 글자만', async () => {
+      const wrapper = await mountPage()
+      const nowDate = new Date(NOW)
+
+      expect(wrapper.get('[data-sessions-count]').text()).toBe('웹메일 3곳')
+      expect(wrapper.findAll('thead').at(0)?.findAll('th').map((cell) => cell.text())).toEqual([
+        '기기',
+        '브라우저 · 운영체제',
+        'IP',
+        '마지막 활동',
+        '로그아웃',
+      ])
+      expect(sessionRows(wrapper)).toEqual([
+        ['Chrome · Windows', '211.186.95.252', '지금 이 브라우저'],
+        ['Edge · Windows', '211.186.95.252', formatRelativeDayTime('2026-10-31T00:05:00Z', nowDate)],
+        ['Safari · iOS', '—알 수 없음', formatRelativeDayTime('2026-10-30T13:31:00Z', nowDate)],
+      ])
+      expect(sessionRows(wrapper)[1]?.[2]).toBe('오늘 오전 9:05')
+      expect(wrapper.findAll('[data-session] svg').map((icon) => icon.attributes('aria-label'))).toEqual(['PC', 'PC', '휴대폰'])
+      expect(wrapper.get('[data-session="now"]').find('[data-session-end]').exists()).toBe(false)
+      expect(wrapper.findAll('[data-session-end]').map((button) => button.attributes('aria-label'))).toEqual([
+        '‘Edge · Windows’ 로그아웃',
+        '‘Safari · iOS’ 로그아웃',
+      ])
+      expect(wrapper.get('[data-sessions-end-others]').text()).toBe('다른 곳 모두 로그아웃')
+      const note = wrapper.get('[data-sessions-note]')
+      expect(note.text()).toBe('웹메일 로그인만 보입니다. 메일 프로그램은 앱 비밀번호를 지워 끊습니다.')
+      expect(note.get('a').attributes('href')).toBe('/settings/account/app-passwords')
+    })
+
+    it('모르는 브라우저는 "알 수 없는 브라우저"', async () => {
+      const unknown: AuthSession = { ...SESSIONS[1], id: 'old', ip: null, device: null } as AuthSession
+      const wrapper = await mountPage({ sessions: () => ok(pageOf([SESSIONS[0] as AuthSession, unknown])) })
+
+      expect(wrapper.get('[data-session="old"] [data-session-device]').text()).toBe('알 수 없는 브라우저')
+    })
+
+    it('줄의 [로그아웃]은 묻지 않고 바로 끊는다 — 「‘Edge · Windows’의 로그인을 끊었습니다.」 · 줄이 빠지고 초점은 다음 줄', async () => {
+      const wrapper = await mountPage()
+      const button = wrapper.findAll('[data-session-end]')[0]
+      ;(button?.element as HTMLButtonElement).focus()
+      await button?.trigger('click')
+      await flushPromises()
+
+      expect(requests.filter((request) => request.method === 'DELETE').map((request) => request.url)).toEqual([
+        '/auth/sessions/edge',
+      ])
+      expect(toastMessages()).toEqual(['‘Edge · Windows’의 로그인을 끊었습니다.'])
+      expect(sessionRows(wrapper).map((row) => row[0])).toEqual(['Chrome · Windows', 'Safari · iOS'])
+      expect(wrapper.get('[data-sessions-count]').text()).toBe('웹메일 2곳')
+      expect(document.activeElement?.getAttribute('aria-label')).toBe('‘Safari · iOS’ 로그아웃')
+    })
+
+    it('이미 끝난 세션(404 RES_001)도 끊긴 것과 같다 — 오류 알림 없이 줄을 뺀다', async () => {
+      const wrapper = await mountPage({ endSession: () => fail(404, 'RES_001') })
+      await wrapper.findAll('[data-session-end]')[1]?.trigger('click')
+      await flushPromises()
+
+      expect(toastMessages()).toEqual(['‘Safari · iOS’의 로그인을 끊었습니다.'])
+      expect(sessionRows(wrapper)).toHaveLength(2)
+    })
+
+    it('[다른 곳 모두 로그아웃] → 확인 창(처음 초점 「취소」 · 끊을 곳의 이름) → 「다른 곳의 로그인 2곳을 끊었습니다.」 — 지금 이 브라우저만 남는다', async () => {
+      const wrapper = await mountPage()
+      await wrapper.get('[data-sessions-end-others]').trigger('click')
+      await flushPromises()
+
+      const dialog = document.querySelector('dialog[aria-labelledby="end-other-sessions-title"]')
+      expect(dialog?.hasAttribute('open')).toBe(true)
+      expect(dialog?.getAttribute('role')).toBe('alertdialog')
+      expect(document.querySelector('#end-other-sessions-message')?.textContent?.trim()).toBe(
+        '이 브라우저를 뺀 2곳(Edge · Windows, Safari · iOS)의 웹메일 로그인을 끊습니다. 끊긴 곳은 다음 동작에서 바로 로그인 화면으로 돌아갑니다.',
+      )
+      expect(dialog?.textContent).toContain('메일 프로그램은 끊기지 않습니다 — 앱 비밀번호를 지워 끊어 주세요.')
+      expect(document.activeElement?.hasAttribute('data-end-others-cancel')).toBe(true)
+      // 데이터를 지우는 일이 아니다 — 청록 주 단추
+      expect(wrapper.get('[data-end-others-confirm]').classes()).not.toContain('modal-dialog__action--danger')
+
+      await wrapper.get('[data-end-others-confirm]').trigger('click')
+      await flushPromises()
+
+      expect(requests.filter((request) => request.method === 'DELETE').map((request) => request.url)).toEqual(['/auth/sessions'])
+      expect(toastMessages()).toEqual(['다른 곳의 로그인 2곳을 끊었습니다.'])
+      expect(dialog?.hasAttribute('open')).toBe(false)
+      expect(sessionRows(wrapper).map((row) => row[0])).toEqual(['Chrome · Windows'])
+      expect(wrapper.find('[data-sessions-end-others]').exists()).toBe(false)
+      expect(wrapper.get('[data-sessions-note]').text()).toBe(
+        '다른 곳에 로그인된 브라우저가 없습니다. 웹메일 로그인만 보입니다. 메일 프로그램은 앱 비밀번호를 지워 끊습니다.',
+      )
+      expect(document.activeElement?.id).toBe('login-sessions-title')
+    })
+
+    it('지금 이 브라우저 줄이 없으면(서버가 이 세션을 알아보지 못함) 확인 창이 이 브라우저도 로그아웃된다고 알리고, 끊은 뒤 다시 받아 세션 만료로 이어진다', async () => {
+      const unknown = SESSIONS.map((session) => ({ ...session, isCurrent: false }))
+      const wrapper = await mountPage({ sessions: () => ok(pageOf(unknown)) })
+      // 끊은 뒤 — 이 브라우저의 세션도 끝났다: 다시 받으면 401, 갱신도 401
+      restoreApiAdapter()
+      requests = installMockApi((request) => {
+        if (request.url === '/auth/sessions' && request.method === 'DELETE') return ok({ ended: 3 })
+        return fail(401, 'AUTH_001')
+      })
+
+      expect(wrapper.findAll('[data-session-end]')).toHaveLength(3)
+      await wrapper.get('[data-sessions-end-others]').trigger('click')
+      await flushPromises()
+      expect(document.querySelector('#end-other-sessions-title')?.textContent?.trim()).toBe(
+        '이 브라우저를 포함해 모든 곳의 로그인을 끊을까요?',
+      )
+      expect(document.querySelector('#end-other-sessions-message')?.textContent?.trim()).toBe(
+        '이 브라우저를 알아보지 못해 이 브라우저를 포함한 3곳(Chrome · Windows, Edge · Windows, Safari · iOS)의 웹메일 로그인을 끊습니다. 이 브라우저도 로그아웃되어 로그인 화면으로 돌아갑니다.',
+      )
+
+      await wrapper.get('[data-end-others-confirm]').trigger('click')
+      await flushPromises()
+      await flushPromises()
+
+      expect(requests.map((request) => `${request.method} ${request.url}`)).toEqual([
+        'DELETE /auth/sessions',
+        'GET /auth/sessions',
+        'POST /auth/refresh',
+      ])
+      expect(toastMessages()).toContain('이 브라우저를 포함한 3곳의 로그인을 끊었습니다.')
+      // 빈 목록을 그려 두지 않는다 — 다시 받은 요청이 세션 만료로 이어졌다
+      expect(wrapper.find('[data-session]').exists()).toBe(false)
+      expect(useAuthStore().sessionExpired).toBe(true)
+    })
+
+    it('세션이 바뀌면 [다른 곳 모두 로그아웃] 확인 창을 닫는다', async () => {
+      const wrapper = await mountPage()
+      await wrapper.get('[data-sessions-end-others]').trigger('click')
+      await flushPromises()
+      expect(document.querySelector('dialog[aria-labelledby="end-other-sessions-title"]')?.hasAttribute('open')).toBe(true)
+
+      useAuthStore().startSession(USER)
+      await flushPromises()
+
+      expect(document.querySelector('dialog[aria-labelledby="end-other-sessions-title"]')?.hasAttribute('open')).toBe(false)
+    })
+
+    it('목록을 받지 못하면 그 묶음만 사전 문구 + [다시 시도]', async () => {
+      let reply: MockResult = fail(503, 'SYS_001')
+      const wrapper = await mountPage({ sessions: () => reply })
+
+      expect(wrapper.get('[data-sessions-error]').text()).toContain(ERROR_CODE_MESSAGES.SYS_001)
+      expect(wrapper.find('[data-login-event]').exists()).toBe(true)
+      expect(toastMessages()).toEqual([])
+
+      reply = ok(pageOf(SESSIONS))
+      await wrapper.get('[data-sessions-error] .mail-load-error__action').trigger('click')
+      await flushPromises()
+      expect(sessionRows(wrapper)).toHaveLength(3)
+    })
+  })
+
+  describe('최근 로그인', () => {
+    it('시각 · 방식(앱 비밀번호 이름) · IP · 기기(메일 프로그램은 —) · 결과 — 실패는 빨간 굵은 글자만', async () => {
+      const wrapper = await mountPage()
+      const nowDate = new Date(NOW)
+      const time = (value: string) => formatRelativeDayTime(value, nowDate)
+
+      expect(wrapper.get('[data-events-hint]').text()).toBe('최근 90일 · 웹메일과 메일 프로그램')
+      expect(eventRows(wrapper)).toEqual([
+        [time('2026-10-31T00:30:00Z'), '웹메일', '211.186.95.252', 'Chrome · Windows', '성공 · 2단계 인증'],
+        [time('2026-10-31T00:29:00Z'), '웹메일', '211.186.95.252', 'Chrome · Windows', '실패 — 코드 틀림'],
+        [time('2026-10-31T00:12:00Z'), '메일 프로그램 · IMAP앱 비밀번호 ‘회사 PC 아웃룩’', '211.186.95.252', '—알 수 없음', '성공'],
+        [time('2026-10-30T14:58:00Z'), '메일 프로그램 · SMTP', '45.133.10.21', '—알 수 없음', '실패 — 앱 비밀번호 필요'],
+        [time('2026-10-29T06:21:00Z'), '웹메일', '211.186.95.252', '알 수 없는 브라우저', '실패 — 비밀번호 틀림'],
+      ])
+      expect(eventRows(wrapper)[0]?.[0]).toBe('오늘 오전 9:30')
+      expect(wrapper.findAll('[data-event-result]').map((cell) => cell.classes().includes('events__result--failure'))).toEqual([
+        false,
+        true,
+        false,
+        true,
+        true,
+      ])
+      expect(wrapper.find('[data-events-more]').exists()).toBe(false)
+    })
+
+    it('[실패만] — isSuccess=false 로 처음부터 받는다 · "최근 90일 · 실패 4번"(서버의 total) · 전환은 aria-pressed', async () => {
+      const failures = EVENTS.filter((event) => !event.isSuccess)
+      const wrapper = await mountPage({
+        events: (request) => (request.params.isSuccess === false ? ok(pageOf(failures, null, 4)) : ok(pageOf(EVENTS))),
+      })
+      const all = wrapper.get('[data-events-filter="all"]')
+      const onlyFailures = wrapper.get('[data-events-filter="failures"]')
+      expect(all.attributes('aria-pressed')).toBe('true')
+
+      await onlyFailures.trigger('click')
+      await flushPromises()
+
+      expect(eventRequests().map((request) => request.params)).toEqual([{ limit: 20 }, { limit: 20, isSuccess: false }])
+      expect(onlyFailures.attributes('aria-pressed')).toBe('true')
+      expect(all.attributes('aria-pressed')).toBe('false')
+      expect(wrapper.get('[data-events-hint]').text()).toBe('최근 90일 · 실패 4번')
+      expect(eventRows(wrapper).map((row) => row[4])).toEqual([
+        '실패 — 코드 틀림',
+        '실패 — 앱 비밀번호 필요',
+        '실패 — 비밀번호 틀림',
+      ])
+
+      // 같은 보기를 다시 누르면 받지 않는다
+      await onlyFailures.trigger('click')
+      await flushPromises()
+      expect(eventRequests()).toHaveLength(2)
+    })
+
+    it('빈 상태(실패만) — "최근 90일 동안 실패한 로그인이 없습니다" / "[전체]를 누르면 성공한 로그인도 봅니다."', async () => {
+      const wrapper = await mountPage({
+        events: (request) => (request.params.isSuccess === false ? ok(pageOf([], null, 0)) : ok(pageOf(EVENTS))),
+      })
+      await wrapper.get('[data-events-filter="failures"]').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.find('[data-login-event]').exists()).toBe(false)
+      expect(wrapper.get('[data-events-empty]').text()).toContain('최근 90일 동안 실패한 로그인이 없습니다')
+      expect(wrapper.get('[data-events-empty]').text()).toContain('[전체]를 누르면 성공한 로그인도 봅니다.')
+      expect(wrapper.get('[data-events-hint]').text()).toBe('최근 90일 · 실패 0번')
+    })
+
+    it('[더 보기] — 커서로 20개씩 이어 받는다(실패만이면 실패만) · 다 받으면 단추가 사라진다', async () => {
+      const failures = EVENTS.filter((event) => !event.isSuccess)
+      const more = [loginEvent('e9', { occurredAt: '2026-10-12T19:02:00Z', isSuccess: false, failureReason: 'wrongPassword' })]
+      const wrapper = await mountPage({
+        events: (request) => {
+          if (request.params.cursor === 'next-failures') return ok(pageOf(more, null, 4))
+          if (request.params.isSuccess === false) return ok(pageOf(failures, 'next-failures', 4))
+          return ok(pageOf(EVENTS, 'next-all', 143))
+        },
+      })
+      expect(wrapper.get('[data-events-more]').text()).toBe('더 보기')
+      expect(wrapper.text()).toContain('최근 순서 · 20개씩. 90일이 지난 기록은 지웁니다.')
+
+      await wrapper.get('[data-events-filter="failures"]').trigger('click')
+      await flushPromises()
+      await wrapper.get('[data-events-more]').trigger('click')
+      await flushPromises()
+
+      expect(eventRequests().map((request) => request.params)).toEqual([
+        { limit: 20 },
+        { limit: 20, isSuccess: false },
+        { limit: 20, cursor: 'next-failures', isSuccess: false },
+      ])
+      expect(wrapper.findAll('[data-login-event]').map((row) => row.attributes('data-login-event'))).toEqual([
+        'e2',
+        'e4',
+        'e5',
+        'e9',
+      ])
+      expect(wrapper.find('[data-events-more]').exists()).toBe(false)
+    })
+
+    it('보기를 거듭 바꾸면 마지막 보기의 응답만 쓴다 — 받는 동안 지난 목록은 그대로(aria-busy)', async () => {
+      const gates: ((result: MockResult) => void)[] = []
+      const wrapper = await mountPage()
+      restoreApiAdapter()
+      requests = installMockApi(
+        () =>
+          new Promise<MockResult>((resolve) => {
+            gates.push(resolve)
+          }),
+      )
+
+      await wrapper.get('[data-events-filter="failures"]').trigger('click')
+      await wrapper.get('[data-events-filter="all"]').trigger('click')
+      await flushPromises()
+      expect(gates).toHaveLength(2)
+      expect(wrapper.get('.events__table-box').attributes('aria-busy')).toBe('true')
+      expect(wrapper.findAll('[data-login-event]')).toHaveLength(5)
+
+      // 늦게 온 「실패만」 응답은 버린다
+      gates[1]?.(ok(pageOf([EVENTS[0] as LoginEvent])))
+      gates[0]?.(ok(pageOf([EVENTS[1] as LoginEvent], null, 1)))
+      await flushPromises()
+      expect(wrapper.findAll('[data-login-event]').map((row) => row.attributes('data-login-event'))).toEqual(['e1'])
+      expect(wrapper.get('[data-events-hint]').text()).toBe('최근 90일 · 웹메일과 메일 프로그램')
+      expect(wrapper.get('.events__table-box').attributes('aria-busy')).toBeUndefined()
+    })
+
+    it('다시 들어오면 지난번 목록을 그리지 않고 「전체」부터 새로 받는다', async () => {
+      const failures = EVENTS.filter((event) => !event.isSuccess)
+      const first = await mountPage({
+        events: (request) => (request.params.isSuccess === false ? ok(pageOf(failures, null, 3)) : ok(pageOf(EVENTS))),
+      })
+      await first.get('[data-events-filter="failures"]').trigger('click')
+      await flushPromises()
+      first.unmount()
+
+      let release: (result: MockResult) => void = () => undefined
+      const again = await mountPage({
+        events: () =>
+          new Promise<MockResult>((resolve) => {
+            release = resolve
+          }),
+      })
+      expect(again.find('[data-login-event]').exists()).toBe(false)
+      expect(again.findAll('.login-history__placeholder')).toHaveLength(1)
+      expect(eventRequests().at(-1)?.params).toEqual({ limit: 20 })
+
+      release(ok(pageOf(EVENTS)))
+      await flushPromises()
+      expect(again.get('[data-events-filter="all"]').attributes('aria-pressed')).toBe('true')
+      expect(again.findAll('[data-login-event]')).toHaveLength(5)
+    })
+
+    it('기록을 받지 못하면 그 묶음만 사전 문구 + [다시 시도]', async () => {
+      let reply: MockResult = fail(503, 'SYS_001')
+      const wrapper = await mountPage({ events: () => reply })
+
+      expect(wrapper.get('[data-events-error]').text()).toContain(ERROR_CODE_MESSAGES.SYS_001)
+      expect(sessionRows(wrapper)).toHaveLength(3)
+
+      reply = ok(pageOf(EVENTS))
+      await wrapper.get('[data-events-error] .mail-load-error__action').trigger('click')
+      await flushPromises()
+      expect(wrapper.findAll('[data-login-event]')).toHaveLength(5)
+    })
+  })
+
+  it('끊는 사이 세션이 바뀌었으면(로그아웃) 늦게 온 결과를 목록에 쓰지 않는다', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    const wrapper = await mountPage()
+    restoreApiAdapter()
+    installMockApi(
+      () =>
+        new Promise<MockResult>((resolve) => {
+          release = resolve
+        }),
+    )
+    await wrapper.get('[data-sessions-end-others]').trigger('click')
+    await flushPromises()
+    await wrapper.get('[data-end-others-confirm]').trigger('click')
+    await flushPromises()
+
+    useAuthStore().clearAuth()
+    useAuthStore().startSession({ email: 'seojun.park@arasystem.it.kr', name: '박서준' })
+    release(ok({ ended: 2 }))
+    await flushPromises()
+
+    // 다음 직원의 목록은 비어 있다(새로 받기 전) — 이전 직원의 끊기 결과가 들어오지 않는다
+    expect(wrapper.findAll('[data-session]')).toHaveLength(0)
+  })
+})
diff --git a/frontend/src/pages/settings/AccountLoginHistoryPage.vue b/frontend/src/pages/settings/AccountLoginHistoryPage.vue
new file mode 100644
index 0000000..e101b8e
--- /dev/null
+++ b/frontend/src/pages/settings/AccountLoginHistoryPage.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+// 설정 › 계정 › 로그인 기록 (디자인 원본 SettingsLoginHistory · README "12단계 › 설정 › 계정 › 로그인 기록" · 계약 5절 "로그인된 브라우저" · "로그인 기록")
+// — /settings/account/login-history · 탭 제목 "로그인 기록"
+// 머리 "로그인 기록" + 설명(「비밀번호를 바꾸고」 · 「2단계 인증」 링크) → 로그인된 브라우저(LoginSessionList) → 최근 로그인(LoginEventTable)
+// - 들어올 때마다 둘 다 새로 받는다(login-history.store). 묶음마다 받는 동안은 자리만, 못 받으면 지금의 목록 오류와 같은 모양(사전 문구 + [다시 시도])
+// - 끊긴 브라우저는 다음 요청에서 바로 로그인 화면으로 간다(서버가 끊은 세션 id 를 막는다 — 계약 5절)
+import { computed } from 'vue'
+
+import LinkedText from '@/components/LinkedText.vue'
+import MailLoadError from '@/components/mail/MailLoadError.vue'
+import LoginEventTable from '@/components/settings/LoginEventTable.vue'
+import LoginSessionList from '@/components/settings/LoginSessionList.vue'
+import SettingsPageFrame from '@/components/settings/SettingsPageFrame.vue'
+import { useClock } from '@/composables/useClock'
+import { LOGIN_HISTORY_TEXT } from '@/shared/constants/account-security'
+import { SETTINGS_ROUTES } from '@/shared/constants/settings-menu'
+import { useLoginHistoryStore } from '@/stores/login-history.store'
+
+const loginHistoryStore = useLoginHistoryStore()
+const clock = useClock()
+
+/** 화면을 연 때 — "오늘 · 어제" 의 기준 */
+const now = clock.now()
+
+const passwordRoute = { name: SETTINGS_ROUTES.password }
+const twoFactorRoute = { name: SETTINGS_ROUTES.twoFactor }
+const sessionsReady = computed(() => loginHistoryStore.sessionsStatus === 'ready')
+const eventsReady = computed(() => loginHistoryStore.eventsStatus === 'ready')
+
+// 처음 그리기 전에 — 지난번에 받아 둔 목록을 잠깐 그렸다 바꾸지 않게. 보기는 「전체」부터
+loginHistoryStore.loadPage()
+</script>
+
+<template>
+  <SettingsPageFrame
+    title-id="login-history-page-title"
+    :title="LOGIN_HISTORY_TEXT.title"
+    :description="LOGIN_HISTORY_TEXT.description"
+  >
+    <template #description>
+      <LinkedText
+        :before="LOGIN_HISTORY_TEXT.descriptionBefore"
+        :link="LOGIN_HISTORY_TEXT.descriptionPasswordLink"
+        :after="LOGIN_HISTORY_TEXT.descriptionMiddle"
+        :to="passwordRoute"
+      /><LinkedText
+        :link="LOGIN_HISTORY_TEXT.descriptionTwoFactorLink"
+        :after="LOGIN_HISTORY_TEXT.descriptionAfter"
+        :to="twoFactorRoute"
+      />
+    </template>
+
+    <MailLoadError
+      v-if="loginHistoryStore.sessionsStatus === 'error' && loginHistoryStore.sessionsError"
+      :error="loginHistoryStore.sessionsError"
+      leave-label=""
+      data-sessions-error
+      @retry="loginHistoryStore.loadSessions()"
+    />
+    <LoginSessionList
+      v-else-if="sessionsReady"
+      :sessions="loginHistoryStore.sessions"
+      :now="now"
+    />
+    <div
+      v-else
+      class="login-history__placeholder"
+      aria-busy="true"
+    />
+
+    <MailLoadError
+      v-if="loginHistoryStore.eventsStatus === 'error' && loginHistoryStore.eventsError"
+      :error="loginHistoryStore.eventsError"
+      leave-label=""
+      data-events-error
+      @retry="loginHistoryStore.loadEvents()"
+    />
+    <LoginEventTable
+      v-else-if="eventsReady"
+      :now="now"
+    />
+    <div
+      v-else
+      class="login-history__placeholder"
+      aria-busy="true"
+    />
+  </SettingsPageFrame>
+</template>
+
+<style scoped>
+.login-history__placeholder {
+  min-height: 10rem;
+}
+</style>
diff --git a/frontend/src/pages/settings/AccountPasswordPage.spec.ts b/frontend/src/pages/settings/AccountPasswordPage.spec.ts
index 9b8fc28..0646d50 100644
--- a/frontend/src/pages/settings/AccountPasswordPage.spec.ts
+++ b/frontend/src/pages/settings/AccountPasswordPage.spec.ts
@@ -40,8 +40,15 @@ describe('AccountPasswordPage', () => {
     document.body.innerHTML = ''
   })
 
-  async function mountPage(reply: (request: MockRequest) => MockResult | Promise<MockResult> = () => ok(null)) {
-    requests = installMockApi((request) => (request.url === '/auth/password' ? reply(request) : ok(null)))
+  async function mountPage(
+    reply: (request: MockRequest) => MockResult | Promise<MockResult> = () => ok(null),
+    twoFactor: () => MockResult = () => ok({ isEnabled: false, enabledAt: null }),
+  ) {
+    requests = installMockApi((request) => {
+      if (request.url === '/auth/password') return reply(request)
+      if (request.url === '/two-factor') return twoFactor()
+      return ok(null)
+    })
     const router = createTestRouter()
     await router.push('/settings/account/password')
     await router.isReady()
@@ -74,7 +81,18 @@ describe('AccountPasswordPage', () => {
     expect(wrapper.get('#password-next-hint').text()).toBe(
       '8자 이상 · 지금 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.',
     )
-    expect(wrapper.get('[data-password-note]').text()).toContain('메일 프로그램(IMAP)에는 새 비밀번호를 다시 넣어 주세요.')
+    // 모든 직원 — 다른 곳 로그인이 끊기고 앱 비밀번호도 모두 지워진다 (12단계)
+    expect(wrapper.get('[data-password-note]').text()).toContain(
+      '바꾸면 이 브라우저를 뺀 다른 기기 · 브라우저의 웹메일 로그인이 끊깁니다.',
+    )
+    expect(wrapper.get('[data-password-note]').text()).toContain(
+      '앱 비밀번호도 모두 지워집니다 — 메일 프로그램은 새 앱 비밀번호로 다시 연결해 주세요.',
+    )
+    // 2단계 인증이 꺼진 직원 — 머리 설명은 그대로, 코드 칸이 없다
+    expect(wrapper.get('.settings-page__description').text()).toBe(
+      '웹메일과 휴대폰 메일 앱(IMAP)이 함께 쓰는 메일 계정의 비밀번호입니다.',
+    )
+    expect(wrapper.find('#password-code').exists()).toBe(false)
 
     const toggles = wrapper.findAll('.password-field__toggle')
     expect(toggles.map((toggle) => toggle.attributes('aria-label'))).toEqual(['지금 비밀번호 보기', '새 비밀번호 보기'])
@@ -195,4 +213,96 @@ describe('AccountPasswordPage', () => {
     ])
     expect(useAuthStore().isLoggedIn).toBe(true)
   })
+
+  describe('2단계 인증을 켠 직원 (12단계 — 계약 5절 "비밀번호 바꾸기")', () => {
+    const ENABLED = () => ok({ isEnabled: true, enabledAt: '2026-10-31T00:12:00.000Z' })
+
+    it('머리 설명이 바뀌고 양식 맨 아래에 「인증 앱 코드」 칸(숫자 · one-time-code · 안내)이 생긴다', async () => {
+      const wrapper = await mountPage(undefined, ENABLED)
+
+      expect(wrapper.get('.settings-page__description').text()).toBe(
+        '웹메일에 로그인하는 비밀번호입니다. 2단계 인증이 켜져 있어 메일 프로그램은 앱 비밀번호로 연결합니다.',
+      )
+      expect(wrapper.findAll('label').map((label) => label.text())).toEqual([
+        '지금 비밀번호',
+        '새 비밀번호',
+        '새 비밀번호 확인',
+        '인증 앱 코드',
+      ])
+      expect(wrapper.get('#password-code').attributes()).toMatchObject({
+        inputmode: 'numeric',
+        autocomplete: 'one-time-code',
+        'aria-describedby': 'password-code-hint',
+      })
+      expect(wrapper.get('#password-code-hint').text()).toBe('코드는 30초마다 바뀝니다 — 다른 칸을 다 쓴 뒤 넣어 주세요.')
+    })
+
+    it('코드는 숫자만 받는다 — 붙여 넣은 "123 456" · "123-456" 은 다듬고, 6자리가 아니면 보내지 않는다(사전 문구 AUTH_007)', async () => {
+      const wrapper = await mountPage(undefined, ENABLED)
+      await fill(wrapper, { current: CURRENT, next: NEXT, confirm: NEXT })
+      await wrapper.get('#password-code').setValue('12 3')
+      await submit(wrapper)
+
+      expect(passwordRequests()).toEqual([])
+      expect((wrapper.get('#password-code').element as HTMLInputElement).value).toBe('123')
+      expect(errorOf(wrapper, 'password-code').text()).toBe(ERROR_CODE_MESSAGES.AUTH_007)
+      expect(document.activeElement?.id).toBe('password-code')
+
+      await wrapper.get('#password-code').setValue('123-456')
+      expect((wrapper.get('#password-code').element as HTMLInputElement).value).toBe('123456')
+      expect(errorOf(wrapper, 'password-code').exists()).toBe(false)
+      await submit(wrapper)
+
+      expect(passwordRequests().map((request) => request.data)).toEqual([
+        { currentPassword: CURRENT, newPassword: NEXT, otpCode: '123456' },
+      ])
+      // 바꾸면 코드 칸도 비운다
+      expect((wrapper.get('#password-code').element as HTMLInputElement).value).toBe('')
+    })
+
+    it('코드가 틀리면(400 AUTH_006) 알림 없이 코드 칸 아래에 사전 문구 · 칸을 비우고 초점', async () => {
+      const wrapper = await mountPage(() => fail(400, 'AUTH_006'), ENABLED)
+      await fill(wrapper, { current: CURRENT, next: NEXT, confirm: NEXT })
+      await wrapper.get('#password-code').setValue('654321')
+      await submit(wrapper)
+
+      expect(errorOf(wrapper, 'password-code').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+      expect((wrapper.get('#password-code').element as HTMLInputElement).value).toBe('')
+      expect(document.activeElement?.id).toBe('password-code')
+      expect(useToastStore().toasts).toEqual([])
+      // 다른 칸은 남긴다
+      expect((wrapper.get('#password-current').element as HTMLInputElement).value).toBe(CURRENT)
+    })
+
+    it('다른 탭에서 켜서 코드 없이 보냈으면(400 AUTH_007) 2단계 상태를 다시 받고 코드 칸을 보인다 — 알림 없음', async () => {
+      let enabled = false
+      const wrapper = await mountPage(
+        () => fail(400, 'AUTH_007'),
+        () => ok({ isEnabled: enabled, enabledAt: enabled ? '2026-10-31T00:12:00.000Z' : null }),
+      )
+      expect(wrapper.find('#password-code').exists()).toBe(false)
+      await fill(wrapper, { current: CURRENT, next: NEXT, confirm: NEXT })
+
+      enabled = true
+      await submit(wrapper)
+      await flushPromises()
+
+      expect(passwordRequests().map((request) => request.data)).toEqual([{ currentPassword: CURRENT, newPassword: NEXT }])
+      expect(requests.filter((request) => request.url === '/two-factor')).toHaveLength(2)
+      expect(wrapper.find('#password-code').exists()).toBe(true)
+      expect(errorOf(wrapper, 'password-code').text()).toBe(ERROR_CODE_MESSAGES.AUTH_007)
+      expect(document.activeElement?.id).toBe('password-code')
+      expect(useToastStore().toasts).toEqual([])
+      expect(wrapper.get('.settings-page__description').text()).toContain('2단계 인증이 켜져 있어')
+    })
+
+    it('2단계 상태를 받지 못해도 비밀번호는 바꿀 수 있다 — 코드 칸 없이 보낸다', async () => {
+      const wrapper = await mountPage(undefined, () => fail(503, 'MAIL_001'))
+      expect(useToastStore().toasts).toEqual([])
+      await fill(wrapper, { current: CURRENT, next: NEXT, confirm: NEXT })
+      await submit(wrapper)
+
+      expect(passwordRequests().map((request) => request.data)).toEqual([{ currentPassword: CURRENT, newPassword: NEXT }])
+    })
+  })
 })
diff --git a/frontend/src/pages/settings/AccountPasswordPage.vue b/frontend/src/pages/settings/AccountPasswordPage.vue
index 688b4ad..a44e044 100644
--- a/frontend/src/pages/settings/AccountPasswordPage.vue
+++ b/frontend/src/pages/settings/AccountPasswordPage.vue
@@ -1,17 +1,32 @@
 <script setup lang="ts">
-// 설정 › 계정 › 비밀번호 (디자인 원본 SettingsAccount · README "4단계 › 비밀번호") — /settings/account/password · 설정의 첫 화면
-// 바꾸는 폼(PasswordChangeForm) 아래에 안내 상자(바탕 #F3F8F8): 다른 기기의 웹메일 로그인이 끊기는 것 · 메일 프로그램(IMAP)에 새 비밀번호를 다시 넣는 것
+// 설정 › 계정 › 비밀번호 (디자인 원본 SettingsAccount · README "4단계 › 비밀번호" · 12단계 SettingsTwoFactor "비밀번호 — 2단계 인증을 켠 직원")
+// — /settings/account/password · 설정의 첫 화면
+// 바꾸는 폼(PasswordChangeForm) 아래에 안내 상자(바탕 #F3F8F8): 다른 기기의 웹메일 로그인이 끊기는 것 · 앱 비밀번호도 모두 지워지는 것(12단계 — 모든 직원)
+// 2단계 인증 상태는 들어올 때마다 새로 받는다(two-factor.store) — 켠 직원이면 머리 설명이 바뀌고 양식 맨 아래에 「인증 앱 코드」 칸이 생긴다.
+// 못 받아도 그대로 쓸 수 있다 — 켰는데 코드 없이 보내면 서버가 AUTH_007 로 알려 와 양식이 상태를 다시 받고 칸을 보인다
+import { computed } from 'vue'
+
 import AppIcon from '@/components/AppIcon.vue'
 import PasswordChangeForm from '@/components/settings/PasswordChangeForm.vue'
 import SettingsPageFrame from '@/components/settings/SettingsPageFrame.vue'
 import { PASSWORD_TEXT } from '@/shared/constants/account'
+import { useTwoFactorStore } from '@/stores/two-factor.store'
+
+const twoFactorStore = useTwoFactorStore()
+
+const description = computed(() =>
+  twoFactorStore.isEnabled ? PASSWORD_TEXT.descriptionTwoFactor : PASSWORD_TEXT.description,
+)
+
+// 처음 그리기 전에 — 다른 탭에서 켰거나 껐을 수 있다
+void twoFactorStore.load()
 </script>
 
 <template>
   <SettingsPageFrame
     title-id="password-page-title"
     :title="PASSWORD_TEXT.title"
-    :description="PASSWORD_TEXT.description"
+    :description="description"
   >
     <PasswordChangeForm />
     <div
@@ -24,7 +39,7 @@ import { PASSWORD_TEXT } from '@/shared/constants/account'
       />
       <div class="password-note__text">
         <span>{{ PASSWORD_TEXT.noteSessions }}</span>
-        <span>{{ PASSWORD_TEXT.noteImap }}</span>
+        <span>{{ PASSWORD_TEXT.noteAppPasswords }}</span>
       </div>
     </div>
   </SettingsPageFrame>
diff --git a/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts b/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts
new file mode 100644
index 0000000..935d7f9
--- /dev/null
+++ b/frontend/src/pages/settings/AccountTwoFactorPage.spec.ts
@@ -0,0 +1,608 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia, type Pinia } from 'pinia'
+
+import { 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 scanSource from '@/components/settings/TwoFactorEnrollmentScan.vue?raw'
+import AccountTwoFactorPage from './AccountTwoFactorPage.vue'
+
+// 설정 › 계정 › 2단계 인증 (12단계 — 디자인 원본 SettingsTwoFactor · 계약 5절 "2단계 인증")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const OFF: TwoFactorStatus = { isEnabled: false, enabledAt: null }
+const ON: TwoFactorStatus = { isEnabled: true, enabledAt: '2026-10-31T00:12:00.000Z' }
+const PASSWORD = 'old-pass-1234'
+
+function enrollment(seq: number): TwoFactorEnrollment {
+  const secret = seq === 1 ? 'K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS' : 'JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP'
+  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-10-31T00:22:00.000Z',
+  }
+}
+
+interface Server {
+  status?: () => MockResult
+  enroll?: (seq: number) => MockResult | Promise<MockResult>
+  activate?: (request: MockRequest) => MockResult | Promise<MockResult>
+  deactivate?: (request: MockRequest) => MockResult | Promise<MockResult>
+}
+
+describe('AccountTwoFactorPage', () => {
+  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()
+    }
+    Reflect.deleteProperty(navigator, 'clipboard')
+    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(OFF)
+      if (request.url === '/two-factor/enrollments') {
+        enrollSeq += 1
+        return server.enroll ? server.enroll(enrollSeq) : ok(enrollment(enrollSeq), 201)
+      }
+      if (request.url === '/two-factor/activation') return server.activate ? server.activate(request) : ok(ON)
+      if (request.url === '/two-factor/deactivation') return server.deactivate ? server.deactivate(request) : ok(OFF)
+      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 = (url: string) => requests.filter((request) => request.url === url)
+  const toastMessages = () => useToastStore().toasts.map((toast) => toast.message)
+  const enableDialog = () => document.querySelector<HTMLDialogElement>('dialog[aria-labelledby="two-factor-enable-title"]')
+  const disableDialog = () => document.querySelector<HTMLDialogElement>('dialog[aria-labelledby="two-factor-disable-title"]')
+
+  async function openEnable(wrapper: VueWrapper) {
+    await wrapper.get('[data-two-factor-enable]').trigger('click')
+    await flushPromises()
+  }
+
+  async function fillEnable(wrapper: VueWrapper, values: { code?: string; password?: string }) {
+    if (values.code !== undefined) await wrapper.get('#two-factor-enable-code').setValue(values.code)
+    if (values.password !== undefined) await wrapper.get('#two-factor-enable-password').setValue(values.password)
+  }
+
+  async function submitEnable(wrapper: VueWrapper) {
+    await wrapper.get('[data-enable-submit]').trigger('click')
+    await flushPromises()
+  }
+
+  it('꺼짐 — 「꺼짐」(글자로만) · [2단계 인증 켜기] · 갈색 경고(앱 비밀번호 링크) · 켜는 차례 1 · 2 · 3', async () => {
+    const wrapper = await mountPage()
+
+    expect(calls('/two-factor').map((request) => request.method)).toEqual(['GET'])
+    expect(wrapper.get('#two-factor-page-title').text()).toBe('2단계 인증')
+    expect(wrapper.get('[data-two-factor-label]').text()).toBe('꺼짐')
+    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)
+    const warning = wrapper.get('[data-two-factor-warning]')
+    expect(warning.text()).toContain('켜면 메일 프로그램은 앱 비밀번호로 다시 연결해야 합니다')
+    expect(warning.get('a').text()).toBe('앱 비밀번호')
+    expect(warning.get('a').attributes('href')).toBe('/settings/account/app-passwords')
+    // 링크 앞뒤 글과 빈칸 없이 잇는다
+    expect(warning.text()).toContain('켜기 전에 앱 비밀번호를 만들어 두면 편합니다.')
+    expect(wrapper.findAll('.two-factor__step').map((step) => step.text().slice(0, 1))).toEqual(['1', '2', '3'])
+    expect(wrapper.find('[data-two-factor-notes]').exists()).toBe(false)
+  })
+
+  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단계 인증 끄기')
+    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('메일 프로그램은 앱 비밀번호로 연결합니다.')
+
+    const fromEngine = await mountPage({ status: () => ok({ isEnabled: true, enabledAt: null }) })
+    expect(fromEngine.get('[data-two-factor-label]').text()).toBe('켜짐')
+  })
+
+  it('상태를 받지 못하면 사전 문구와 [다시 시도] — 누르면 다시 받는다', async () => {
+    let reply: MockResult = fail(503, 'MAIL_001')
+    const wrapper = await mountPage({ status: () => reply })
+
+    expect(wrapper.text()).toContain(ERROR_CODE_MESSAGES.MAIL_001)
+    expect(toastMessages()).toEqual([])
+    reply = ok(OFF)
+    await wrapper.get('.mail-load-error__action').trigger('click')
+    await flushPromises()
+    expect(wrapper.get('[data-two-factor-label]').text()).toBe('꺼짐')
+  })
+
+  describe('켜기 창', () => {
+    it('열 때마다 새 키 — QR(SVG) · 4자씩 띄운 키 · 저장될 이름, 처음 초점은 코드 칸', async () => {
+      const wrapper = await mountPage()
+      await openEnable(wrapper)
+
+      expect(enableDialog()?.hasAttribute('open')).toBe(true)
+      expect(calls('/two-factor/enrollments').map((request) => request.method)).toEqual(['POST'])
+      const qr = wrapper.get('[data-qr-code]')
+      expect(qr.attributes()).toMatchObject({ role: 'img', 'aria-label': '인증 앱에 등록할 QR 코드' })
+      expect(qr.findAll('.qr-code__module').length).toBeGreaterThan(100)
+      expect(wrapper.findAll('.scan__key-group').map((group) => group.text())).toEqual([
+        'K7QF',
+        '2M4X',
+        'HB6R',
+        'TZ3N',
+        'PW5C',
+        'YL7D',
+        'JQ2V',
+        'MGAS',
+      ])
+      // 띄어쓰기는 없다 — 골라 복사해도 · 읽어 줘도 키 그대로
+      expect(wrapper.get('[data-enable-key]').text()).toBe('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      expect(wrapper.get('[data-enable-key]').element.textContent).toBe('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      // 일부러 두 줄 — 한 줄에 4묶음
+      expect(
+        wrapper.findAll('.scan__key-line').map((line) => line.findAll('.scan__key-group').map((group) => group.text())),
+      ).toEqual([
+        ['K7QF', '2M4X', 'HB6R', 'TZ3N'],
+        ['PW5C', 'YL7D', 'JQ2V', 'MGAS'],
+      ])
+      expect(wrapper.text()).toContain('앱에는 「ARA SYSTEM (ara.kim@arasystem.it.kr)」로 저장됩니다.')
+      expect(document.activeElement?.id).toBe('two-factor-enable-code')
+      expect(wrapper.get('#two-factor-enable-code').attributes()).toMatchObject({
+        inputmode: 'numeric',
+        autocomplete: 'one-time-code',
+      })
+    })
+
+    it('키의 묶음은 가운데서 줄이 바뀌지 않는다 — 묶음 · 줄은 줄바꿈 없는 inline-block (block 이면 골라 복사한 키에 줄바꿈이 낀다)', () => {
+      const css = scanSource.slice(scanSource.indexOf('<style'))
+      const rule = (selector: string) => new RegExp(`${selector.replace(/[.-]/g, '\\$&')}\\s*\\{([^}]*)\\}`).exec(css)?.[1] ?? ''
+
+      expect(rule('.scan__key-group')).toMatch(/display:\s*inline-block/)
+      expect(rule('.scan__key-group')).toMatch(/white-space:\s*nowrap/)
+      expect(rule('.scan__key-line')).toMatch(/display:\s*inline-block/)
+      expect(rule('.scan__key-line')).toMatch(/width:\s*100%/)
+      // 글자 아무 데서나 끊는 규칙을 두지 않는다 (묶음 가운데서 "EL / WN" 으로 갈렸다)
+      expect(rule('.scan__key-value')).not.toMatch(/overflow-wrap|word-break/)
+    })
+
+    it('[복사]는 키를 띄어쓰기 없이 복사하고 「키를 복사했습니다.」 · 못 하면 직접 고르라고 알린다', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      Object.defineProperty(navigator, 'clipboard', { value: { writeText }, configurable: true })
+      const wrapper = await mountPage()
+      await openEnable(wrapper)
+
+      await wrapper.get('[data-enable-copy]').trigger('click')
+      await flushPromises()
+      expect(writeText).toHaveBeenCalledWith('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      expect(toastMessages()).toEqual(['키를 복사했습니다.'])
+
+      writeText.mockRejectedValueOnce(new Error('막힘'))
+      await wrapper.get('[data-enable-copy]').trigger('click')
+      await flushPromises()
+      expect(useToastStore().toasts.at(-1)).toMatchObject({ kind: 'error', message: '키를 복사하지 못했습니다. 키를 직접 골라 복사해 주세요.' })
+    })
+
+    it('보내기 전에 본다 — 코드가 6자리가 아니면 코드 칸(AUTH_007 문구), 지금 비밀번호를 비우면 그 칸(VAL_001 문구)', async () => {
+      const wrapper = await mountPage()
+      await openEnable(wrapper)
+
+      await fillEnable(wrapper, { code: '12' })
+      await submitEnable(wrapper)
+      expect(calls('/two-factor/activation')).toEqual([])
+      expect(wrapper.get('#two-factor-enable-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_007)
+      expect(document.activeElement?.id).toBe('two-factor-enable-code')
+
+      await fillEnable(wrapper, { code: '482 913' })
+      await submitEnable(wrapper)
+      expect(calls('/two-factor/activation')).toEqual([])
+      expect(wrapper.find('#two-factor-enable-code-error').exists()).toBe(false)
+      expect(wrapper.get('#two-factor-enable-password-error').text()).toBe(ERROR_CODE_MESSAGES.VAL_001)
+      expect(document.activeElement?.id).toBe('two-factor-enable-password')
+    })
+
+    it('켜면 POST /two-factor/activation { enrollmentId, otpCode, currentPassword } — 창을 닫고 「켜짐」, 머리 아래 "2단계 인증을 켰습니다" 로 초점', async () => {
+      const wrapper = await mountPage()
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+      await submitEnable(wrapper)
+
+      expect(calls('/two-factor/activation').map((request) => request.data)).toEqual([
+        { enrollmentId: 'enroll-1', otpCode: '482913', currentPassword: PASSWORD },
+      ])
+      // 서버가 엔진을 여러 번 부른다 — 한도는 보통(10초)보다 긴 30초
+      expect(calls('/two-factor/activation')[0]?.config.timeout).toBe(TWO_FACTOR_CHANGE_TIMEOUT_MS)
+      expect(enableDialog()?.hasAttribute('open')).toBe(false)
+      expect(wrapper.get('[data-two-factor-label]').text()).toBe('켜짐 — 2026년 10월 31일부터')
+      const done = wrapper.get('[data-two-factor-done]')
+      expect(done.attributes('role')).toBe('status')
+      expect(done.text()).toContain('2단계 인증을 켰습니다')
+      expect(done.text()).toContain('메일 프로그램(Outlook · 썬더버드 · 휴대폰 메일 앱)은 다시 연결할 때 앱 비밀번호가 필요합니다.')
+      expect(done.get('a').text()).toBe('앱 비밀번호 만들기')
+      expect(done.get('a').attributes('href')).toBe('/settings/account/app-passwords')
+      expect(document.activeElement).toBe(done.element)
+      // 키는 창에서 지웠다
+      expect(wrapper.find('[data-enable-key]').text()).toBe('')
+    })
+
+    it('켜는 동안 「켜는 중…」(aria-busy) · [켜기]는 aria-disabled — 다시 눌러도 요청은 하나', async () => {
+      let release: (result: MockResult) => void = () => undefined
+      const wrapper = await mountPage({
+        activate: () =>
+          new Promise<MockResult>((resolve) => {
+            release = resolve
+          }),
+      })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+      await submitEnable(wrapper)
+
+      const submit = wrapper.get('[data-enable-submit]')
+      expect(submit.text()).toBe('켜는 중…')
+      expect(submit.attributes()).toMatchObject({ 'aria-busy': 'true', 'aria-disabled': 'true' })
+      await submitEnable(wrapper)
+      expect(calls('/two-factor/activation')).toHaveLength(1)
+
+      release(ok(ON))
+      await flushPromises()
+      expect(wrapper.get('[data-two-factor-label]').text()).toContain('켜짐')
+    })
+
+    it('코드가 틀리면(AUTH_006) 코드 칸 아래 · 칸을 비우고 초점 — QR · 키는 그대로 (새 키를 받지 않는다)', async () => {
+      const wrapper = await mountPage({ activate: () => fail(400, 'AUTH_006') })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '000111', password: PASSWORD })
+      await submitEnable(wrapper)
+
+      expect(wrapper.get('#two-factor-enable-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+      expect((wrapper.get('#two-factor-enable-code').element as HTMLInputElement).value).toBe('')
+      expect(document.activeElement?.id).toBe('two-factor-enable-code')
+      expect(wrapper.get('[data-enable-key]').text()).toBe('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+      expect(calls('/two-factor/enrollments')).toHaveLength(1)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('지금 비밀번호가 틀리면(AUTH_005) 비밀번호 칸 아래 · 그 칸에 초점 — 코드는 남긴다', async () => {
+      const wrapper = await mountPage({ activate: () => fail(400, 'AUTH_005') })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: 'wrong-pass' })
+      await submitEnable(wrapper)
+
+      expect(wrapper.get('#two-factor-enable-password-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_005)
+      expect(document.activeElement?.id).toBe('two-factor-enable-password')
+      expect((wrapper.get('#two-factor-enable-code').element as HTMLInputElement).value).toBe('482913')
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('AUTH_008(10분 지남 · 더 새 등록) — 처음부터 다시: 창 위에 사전 문구, 새 키로 다시 그리고 코드는 비운다', async () => {
+      const wrapper = await mountPage({ activate: () => fail(409, 'AUTH_008') })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+      await submitEnable(wrapper)
+      await flushPromises()
+
+      expect(calls('/two-factor').length).toBe(2)
+      expect(calls('/two-factor/enrollments')).toHaveLength(2)
+      expect(wrapper.get('[data-enable-notice]').text()).toBe(ERROR_CODE_MESSAGES.AUTH_008)
+      expect(wrapper.get('[data-enable-key]').text()).toBe('JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP')
+      expect((wrapper.get('#two-factor-enable-code').element as HTMLInputElement).value).toBe('')
+      expect(enableDialog()?.hasAttribute('open')).toBe(true)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('AUTH_008 인데 그사이 다른 곳에서 켜졌으면 — 창을 닫고 사전 문구로 알린다, 화면은 「켜짐」', async () => {
+      let enabledElsewhere = false
+      const wrapper = await mountPage({
+        status: () => ok(enabledElsewhere ? ON : OFF),
+        activate: () => {
+          enabledElsewhere = true
+          return fail(409, 'AUTH_008')
+        },
+      })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+      await submitEnable(wrapper)
+      await flushPromises()
+
+      expect(enableDialog()?.hasAttribute('open')).toBe(false)
+      expect(toastMessages()).toEqual([ERROR_CODE_MESSAGES.AUTH_008])
+      expect(wrapper.get('[data-two-factor-label]').text()).toContain('켜짐')
+      expect(calls('/two-factor/enrollments')).toHaveLength(1)
+    })
+
+    it('키를 받지 못하면 창 안에 사전 문구와 [다시 시도] — [켜기]는 막는다', async () => {
+      let reply: MockResult = fail(503, 'MAIL_001')
+      const wrapper = await mountPage({ enroll: () => reply })
+      await openEnable(wrapper)
+
+      expect(wrapper.get('[data-enable-error]').text()).toContain(ERROR_CODE_MESSAGES.MAIL_001)
+      expect(wrapper.get('[data-enable-submit]').attributes('aria-disabled')).toBe('true')
+      expect(toastMessages()).toEqual([])
+
+      reply = ok(enrollment(1), 201)
+      await wrapper.get('.scan__retry').trigger('click')
+      await flushPromises()
+      expect(wrapper.find('[data-enable-error]').exists()).toBe(false)
+      expect(wrapper.find('[data-qr-code]').exists()).toBe(true)
+      expect(wrapper.get('[data-enable-submit]').attributes('aria-disabled')).toBeUndefined()
+    })
+
+    it('코드 · 비밀번호 칸에서 Enter 도 [켜기]와 같다', async () => {
+      const wrapper = await mountPage()
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+
+      await wrapper.get('#two-factor-enable-password').trigger('keydown', { key: 'Enter' })
+      await flushPromises()
+
+      expect(calls('/two-factor/activation')).toHaveLength(1)
+      expect(wrapper.get('[data-two-factor-label]').text()).toContain('켜짐')
+    })
+
+    it('닫았다 다시 연 창에는 앞 요청의 거절을 넣지 않는다 — 「켜는 중」도 처음으로, 처음부터 다시(AUTH_008)도 하지 않는다', async () => {
+      const replies: ((result: MockResult) => void)[] = []
+      const wrapper = await mountPage({
+        activate: () =>
+          new Promise<MockResult>((resolve) => {
+            replies.push(resolve)
+          }),
+      })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+      await submitEnable(wrapper)
+      await wrapper.get('[data-enable-cancel]').trigger('click')
+      await flushPromises()
+
+      await openEnable(wrapper)
+      expect(wrapper.get('[data-enable-submit]').text()).toBe('켜기')
+      expect(wrapper.get('[data-enable-submit]').attributes('aria-busy')).toBeUndefined()
+
+      replies[0]?.(fail(400, 'AUTH_006'))
+      await flushPromises()
+      expect(wrapper.find('#two-factor-enable-code-error').exists()).toBe(false)
+      expect(wrapper.get('[data-enable-submit]').text()).toBe('켜기')
+      expect(toastMessages()).toEqual([])
+
+      // 다시 연 창에서 보낸 요청이 AUTH_008 이어도 — 그 창의 요청이므로 처음부터 다시 한다(앞 요청과 섞이지 않는다)
+      await fillEnable(wrapper, { code: '135790', password: PASSWORD })
+      await submitEnable(wrapper)
+      expect(calls('/two-factor/activation').map((request) => (request.data as { enrollmentId: string }).enrollmentId)).toEqual([
+        'enroll-1',
+        'enroll-2',
+      ])
+      replies[1]?.(fail(409, 'AUTH_008'))
+      await flushPromises()
+      await flushPromises()
+      expect(calls('/two-factor/enrollments')).toHaveLength(3)
+      expect(wrapper.get('[data-enable-notice]').text()).toBe(ERROR_CODE_MESSAGES.AUTH_008)
+    })
+
+    it('닫힌 뒤(다시 열지 않음) 온 거절은 칸 대신 알림으로 · 서버가 켰으면 창을 닫았어도 화면은 「켜짐」', async () => {
+      const replies: ((result: MockResult) => void)[] = []
+      const wrapper = await mountPage({
+        activate: () =>
+          new Promise<MockResult>((resolve) => {
+            replies.push(resolve)
+          }),
+      })
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: 'wrong-pass' })
+      await submitEnable(wrapper)
+      await wrapper.get('[data-enable-cancel]').trigger('click')
+      await flushPromises()
+      replies[0]?.(fail(400, 'AUTH_005'))
+      await flushPromises()
+      expect(toastMessages()).toEqual([ERROR_CODE_MESSAGES.AUTH_005])
+
+      await openEnable(wrapper)
+      await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+      await submitEnable(wrapper)
+      await wrapper.get('[data-enable-cancel]').trigger('click')
+      await flushPromises()
+      replies[1]?.(ok(ON))
+      await flushPromises()
+      expect(wrapper.get('[data-two-factor-label]').text()).toContain('켜짐')
+      expect(wrapper.find('[data-two-factor-done]').exists()).toBe(true)
+    })
+
+    it('켜지 않고 닫으면 키를 버린다 — 다시 열면 새 키를 받고, 닫은 뒤 늦게 온 키는 그리지 않는다', async () => {
+      let releaseFirst: (result: MockResult) => void = () => undefined
+      const wrapper = await mountPage({
+        enroll: (seq) =>
+          seq === 1
+            ? new Promise<MockResult>((resolve) => {
+                releaseFirst = resolve
+              })
+            : ok(enrollment(seq), 201),
+      })
+      await openEnable(wrapper)
+      await wrapper.get('[data-enable-cancel]').trigger('click')
+      await flushPromises()
+      expect(enableDialog()?.hasAttribute('open')).toBe(false)
+
+      releaseFirst(ok(enrollment(1), 201))
+      await flushPromises()
+      expect(wrapper.find('[data-qr-code]').exists()).toBe(false)
+      expect(wrapper.get('[data-enable-key]').text()).toBe('')
+
+      await openEnable(wrapper)
+      expect(calls('/two-factor/enrollments')).toHaveLength(2)
+      expect(wrapper.get('[data-enable-key]').text()).toBe('JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP')
+    })
+  })
+
+  describe('끄기 창', () => {
+    async function openDisable(wrapper: VueWrapper) {
+      await wrapper.get('[data-two-factor-disable]').trigger('click')
+      await flushPromises()
+    }
+
+    it('alertdialog — "2단계 인증을 끌까요?" · 지금 비밀번호 · 인증 앱 코드, 처음 초점은 「취소」', async () => {
+      const wrapper = await mountPage({ status: () => ok(ON) })
+      await openDisable(wrapper)
+
+      const dialog = disableDialog()
+      expect(dialog?.hasAttribute('open')).toBe(true)
+      expect(dialog?.getAttribute('role')).toBe('alertdialog')
+      expect(dialog?.textContent).toContain('끄면 비밀번호만으로 로그인합니다. 만들어 둔 앱 비밀번호는 그대로 남습니다.')
+      expect(document.activeElement?.hasAttribute('data-disable-cancel')).toBe(true)
+      expect(wrapper.get('label[for="two-factor-disable-password"]').text()).toBe('지금 비밀번호')
+      expect(wrapper.get('label[for="two-factor-disable-code"]').text()).toBe('인증 앱 코드')
+    })
+
+    it('비밀번호부터 본다 — 둘 다 비었으면 비밀번호 칸에 초점 · 틀리면(AUTH_005) 그 칸 아래', async () => {
+      const wrapper = await mountPage({ status: () => ok(ON), deactivate: () => fail(400, 'AUTH_005') })
+      await openDisable(wrapper)
+
+      await wrapper.get('[data-disable-submit]').trigger('click')
+      await flushPromises()
+      expect(calls('/two-factor/deactivation')).toEqual([])
+      expect(document.activeElement?.id).toBe('two-factor-disable-password')
+
+      await wrapper.get('#two-factor-disable-password').setValue('wrong-pass')
+      await wrapper.get('#two-factor-disable-code').setValue('482913')
+      await wrapper.get('[data-disable-submit]').trigger('click')
+      await flushPromises()
+      expect(wrapper.get('#two-factor-disable-password-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_005)
+      expect(toastMessages()).toEqual([])
+    })
+
+    it('코드가 틀리면(AUTH_006) 코드 칸 아래 · 칸을 비운다', async () => {
+      const wrapper = await mountPage({ status: () => ok(ON), deactivate: () => fail(400, 'AUTH_006') })
+      await openDisable(wrapper)
+      await wrapper.get('#two-factor-disable-password').setValue(PASSWORD)
+      await wrapper.get('#two-factor-disable-code').setValue('000111')
+      await wrapper.get('[data-disable-submit]').trigger('click')
+      await flushPromises()
+
+      expect(wrapper.get('#two-factor-disable-code-error').text()).toBe(ERROR_CODE_MESSAGES.AUTH_006)
+      expect((wrapper.get('#two-factor-disable-code').element as HTMLInputElement).value).toBe('')
+      expect(document.activeElement?.id).toBe('two-factor-disable-code')
+    })
+
+    it('두 칸에서 Enter 도 [끄기]와 같다 · 닫았다 다시 연 창에는 앞 요청의 거절을 넣지 않는다', async () => {
+      const replies: ((result: MockResult) => void)[] = []
+      const wrapper = await mountPage({
+        status: () => ok(ON),
+        deactivate: () =>
+          new Promise<MockResult>((resolve) => {
+            replies.push(resolve)
+          }),
+      })
+      await openDisable(wrapper)
+      await wrapper.get('#two-factor-disable-password').setValue(PASSWORD)
+      await wrapper.get('#two-factor-disable-code').setValue('482913')
+      await wrapper.get('#two-factor-disable-code').trigger('keydown', { key: 'Enter' })
+      await flushPromises()
+      expect(calls('/two-factor/deactivation')).toHaveLength(1)
+
+      await wrapper.get('[data-disable-cancel]').trigger('click')
+      await flushPromises()
+      await openDisable(wrapper)
+      expect(wrapper.get('[data-disable-submit]').text()).toBe('끄기')
+
+      replies[0]?.(fail(400, 'AUTH_006'))
+      await flushPromises()
+      expect(wrapper.find('#two-factor-disable-code-error').exists()).toBe(false)
+      expect(toastMessages()).toEqual([])
+      expect(wrapper.get('[data-disable-submit]').text()).toBe('끄기')
+    })
+
+    it('끄면 「2단계 인증을 껐습니다.」 — 화면은 「꺼짐」, 초점은 [2단계 인증 켜기]', async () => {
+      const wrapper = await mountPage({ status: () => ok(ON) })
+      await openDisable(wrapper)
+      await wrapper.get('#two-factor-disable-password').setValue(PASSWORD)
+      await wrapper.get('#two-factor-disable-code').setValue('482913')
+      await wrapper.get('[data-disable-submit]').trigger('click')
+      await flushPromises()
+
+      expect(calls('/two-factor/deactivation').map((request) => request.data)).toEqual([
+        { currentPassword: PASSWORD, otpCode: '482913' },
+      ])
+      expect(disableDialog()?.hasAttribute('open')).toBe(false)
+      expect(toastMessages()).toEqual(['2단계 인증을 껐습니다.'])
+      expect(wrapper.get('[data-two-factor-label]').text()).toBe('꺼짐')
+      expect(document.activeElement?.hasAttribute('data-two-factor-enable')).toBe(true)
+    })
+  })
+
+  it('세션이 바뀌면(다른 곳에서 이 세션을 끊음 → 세션 만료) 켜기 창을 닫고 QR · 키 · 입력한 비밀번호를 지운다', async () => {
+    const wrapper = await mountPage()
+    await openEnable(wrapper)
+    await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+    expect(wrapper.find('[data-qr-code]').exists()).toBe(true)
+
+    useAuthStore().expireSession()
+    await flushPromises()
+
+    expect(enableDialog()?.hasAttribute('open')).toBe(false)
+    expect(wrapper.find('[data-qr-code]').exists()).toBe(false)
+    expect(wrapper.get('[data-enable-key]').text()).toBe('')
+    expect((wrapper.get('#two-factor-enable-password').element as HTMLInputElement).value).toBe('')
+    expect((wrapper.get('#two-factor-enable-code').element as HTMLInputElement).value).toBe('')
+  })
+
+  it('세션이 바뀌면 끄기 창도 닫고 입력한 비밀번호 · 코드를 지운다', async () => {
+    const wrapper = await mountPage({ status: () => ok(ON) })
+    await wrapper.get('[data-two-factor-disable]').trigger('click')
+    await flushPromises()
+    await wrapper.get('#two-factor-disable-password').setValue(PASSWORD)
+    await wrapper.get('#two-factor-disable-code').setValue('482913')
+
+    useAuthStore().expireSession()
+    await flushPromises()
+
+    expect(disableDialog()?.hasAttribute('open')).toBe(false)
+    expect((wrapper.get('#two-factor-disable-password').element as HTMLInputElement).value).toBe('')
+    expect((wrapper.get('#two-factor-disable-code').element as HTMLInputElement).value).toBe('')
+  })
+
+  it('켜는 사이 세션이 바뀌었으면(로그아웃) 늦게 온 결과를 쓰지 않는다', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    const wrapper = await mountPage({
+      activate: () =>
+        new Promise<MockResult>((resolve) => {
+          release = resolve
+        }),
+    })
+    await openEnable(wrapper)
+    await fillEnable(wrapper, { code: '482913', password: PASSWORD })
+    await submitEnable(wrapper)
+
+    useAuthStore().clearAuth()
+    release(ok(ON))
+    await flushPromises()
+
+    expect(wrapper.find('[data-two-factor-done]').exists()).toBe(false)
+    // 다음 사람의 상태가 되지 않게 스토어에도 쓰지 않는다
+    expect(useTwoFactorStore().twoFactor).toBeNull()
+  })
+})
diff --git a/frontend/src/pages/settings/AccountTwoFactorPage.vue b/frontend/src/pages/settings/AccountTwoFactorPage.vue
new file mode 100644
index 0000000..26d5108
--- /dev/null
+++ b/frontend/src/pages/settings/AccountTwoFactorPage.vue
@@ -0,0 +1,459 @@
+<script setup lang="ts">
+// 설정 › 계정 › 2단계 인증 (디자인 원본 SettingsTwoFactor · README "12단계 › 설정 › 계정 › 2단계 인증" · 계약 5절 "2단계 인증")
+// — /settings/account/two-factor · 탭 제목 "2단계 인증"
+// 머리 + 설명 → 상태 상자(글자로만 — 뱃지 · 스위치 없음): 「꺼짐」(회색 굵게) + [2단계 인증 켜기] / 「켜짐 — 2026년 10월 31일부터」(초록 굵게 — 켠 때를 모르면 「켜짐」) + [2단계 인증 끄기]
+// - 꺼져 있을 때: 갈색 경고(켜면 메일 프로그램은 앱 비밀번호로 — 앱 비밀번호 링크) + 「켜는 차례」 1 · 2 · 3(청록 굵은 숫자)
+// - 켜져 있을 때: 안내 상자(휴대폰 바꾸기 · 잃어버림 · 메일 프로그램은 앱 비밀번호로)
+// - 켜기 창(TwoFactorEnableDialog — 620) · 끄기 창(TwoFactorDisableDialog — 400, 처음 초점 「취소」)
+// - 켠 직후: 머리 아래 안내 상자 "2단계 인증을 켰습니다" + [앱 비밀번호 만들기](36) — 이 화면을 떠나면 사라진다(화면 상태). 초점은 그 상자로
+// - 끈 뒤: 알림 「2단계 인증을 껐습니다.」 — 화면은 「꺼짐」, 초점은 [2단계 인증 켜기]로
+// - 들어올 때마다 상태를 새로 받는다(two-factor.store). 받는 동안은 자리만, 못 받으면 사전 문구와 "다시 시도"
+// - 세션이 바뀌면(다른 기기의 [다른 곳 모두 로그아웃]으로 이 세션이 끊김 · 로그아웃 · 만료) 창을 모두 닫는다 — 세션 만료 창 뒤에 QR · 키 · 입력한 비밀번호가 남지 않게
+//   (창은 닫힐 때 키 · 칸을 지운다)
+import { computed, nextTick, ref, watch } from 'vue'
+
+import AppIcon from '@/components/AppIcon.vue'
+import LinkedText from '@/components/LinkedText.vue'
+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 { useToast } from '@/composables/useToast'
+import { TWO_FACTOR_TEXT } from '@/shared/constants/account-security'
+import { SETTINGS_ROUTES } from '@/shared/constants/settings-menu'
+import { twoFactorStateLabel } from '@/shared/utils/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import { useTwoFactorStore } from '@/stores/two-factor.store'
+
+const authStore = useAuthStore()
+const twoFactorStore = useTwoFactorStore()
+const toast = useToast()
+
+const enableRef = ref<HTMLButtonElement | null>(null)
+const noticeRef = ref<HTMLElement | null>(null)
+const enableOpen = ref<boolean>(false)
+const disableOpen = ref<boolean>(false)
+/** 이 화면에서 방금 켰다 — 머리 아래 안내 상자 (떠나면 사라진다) */
+const justEnabled = ref<boolean>(false)
+
+const appPasswordsRoute = { name: SETTINGS_ROUTES.appPasswords }
+const ready = computed(() => twoFactorStore.status === 'ready' && twoFactorStore.twoFactor !== null)
+const enabled = computed(() => twoFactorStore.isEnabled)
+const stateLabel = computed(() => (twoFactorStore.twoFactor ? twoFactorStateLabel(twoFactorStore.twoFactor) : ''))
+const email = computed(() => authStore.user?.email ?? '')
+
+async function onEnabled() {
+  enableOpen.value = false
+  justEnabled.value = true
+  await nextTick()
+  noticeRef.value?.focus()
+}
+
+async function onDisabled() {
+  disableOpen.value = false
+  justEnabled.value = false
+  toast.success(TWO_FACTOR_TEXT.disabled)
+  await nextTick()
+  enableRef.value?.focus()
+}
+
+// 세션이 바뀌면 창을 모두 닫는다 (켠 직후 안내도 내린다)
+watch(
+  () => authStore.generation,
+  () => {
+    enableOpen.value = false
+    disableOpen.value = false
+    justEnabled.value = false
+  },
+)
+
+// 처음 그리기 전에 — 다른 탭 · 엔진 관리 화면에서 바꿨을 수 있다
+void twoFactorStore.load()
+</script>
+
+<template>
+  <SettingsPageFrame
+    title-id="two-factor-page-title"
+    :title="TWO_FACTOR_TEXT.title"
+    :description="TWO_FACTOR_TEXT.description"
+  >
+    <MailLoadError
+      v-if="twoFactorStore.status === 'error' && twoFactorStore.error"
+      :error="twoFactorStore.error"
+      leave-label=""
+      @retry="twoFactorStore.load()"
+    />
+
+    <template v-else-if="ready">
+      <div
+        v-if="justEnabled && enabled"
+        ref="noticeRef"
+        class="two-factor__done"
+        role="status"
+        tabindex="-1"
+        data-two-factor-done
+      >
+        <AppIcon
+          name="check"
+          :stroke-width="2.2"
+          class="two-factor__done-icon"
+        />
+        <div class="two-factor__done-body">
+          <div class="two-factor__done-text">
+            <span class="two-factor__done-title">{{ TWO_FACTOR_TEXT.enabledTitle }}</span>
+            <span>{{ TWO_FACTOR_TEXT.enabledText }}</span>
+          </div>
+          <RouterLink
+            :to="appPasswordsRoute"
+            class="two-factor__done-action"
+          >
+            {{ TWO_FACTOR_TEXT.enabledAction }}
+          </RouterLink>
+        </div>
+      </div>
+
+      <div
+        class="two-factor__state"
+        data-two-factor-state
+      >
+        <div class="two-factor__state-text">
+          <span
+            :class="['two-factor__state-label', { 'two-factor__state-label--on': enabled }]"
+            data-two-factor-label
+          >{{ stateLabel }}</span>
+          <span class="two-factor__state-hint">{{ enabled ? TWO_FACTOR_TEXT.onHint : TWO_FACTOR_TEXT.offHint }}</span>
+        </div>
+        <button
+          v-if="!enabled"
+          ref="enableRef"
+          type="button"
+          class="two-factor__enable"
+          data-two-factor-enable
+          @click="enableOpen = true"
+        >
+          <AppIcon
+            name="shield-check"
+            :size="15"
+          />
+          <span>{{ TWO_FACTOR_TEXT.enable }}</span>
+        </button>
+        <button
+          v-else
+          type="button"
+          class="two-factor__disable"
+          data-two-factor-disable
+          @click="disableOpen = true"
+        >
+          {{ TWO_FACTOR_TEXT.disable }}
+        </button>
+      </div>
+
+      <template v-if="!enabled">
+        <div
+          class="two-factor__warning"
+          data-two-factor-warning
+        >
+          <AppIcon
+            name="alert-circle"
+            :stroke-width="1.9"
+            class="two-factor__warning-icon"
+          />
+          <div class="two-factor__warning-text">
+            <span class="two-factor__warning-title">{{ TWO_FACTOR_TEXT.warningTitle }}</span>
+            <LinkedText
+              :before="TWO_FACTOR_TEXT.warningBefore"
+              :link="TWO_FACTOR_TEXT.warningLink"
+              :after="TWO_FACTOR_TEXT.warningAfter"
+              :to="appPasswordsRoute"
+            />
+          </div>
+        </div>
+
+        <section
+          class="two-factor__steps"
+          aria-labelledby="two-factor-steps-title"
+        >
+          <h2
+            id="two-factor-steps-title"
+            class="two-factor__steps-title"
+          >
+            {{ TWO_FACTOR_TEXT.stepsTitle }}
+          </h2>
+          <ol class="two-factor__step-list">
+            <li
+              v-for="(step, index) in TWO_FACTOR_TEXT.steps"
+              :key="step"
+              class="two-factor__step"
+            >
+              <span
+                class="two-factor__step-number"
+                aria-hidden="true"
+              >{{ index + 1 }}</span>
+              <span>{{ step }}</span>
+            </li>
+          </ol>
+        </section>
+      </template>
+
+      <div
+        v-else
+        class="two-factor__notes"
+        data-two-factor-notes
+      >
+        <p class="two-factor__note">
+          <span aria-hidden="true">·</span>
+          <span>{{ TWO_FACTOR_TEXT.noteChangePhone }}</span>
+        </p>
+        <p class="two-factor__note">
+          <span aria-hidden="true">·</span>
+          <span>{{ TWO_FACTOR_TEXT.noteLostPhone }}</span>
+        </p>
+        <p class="two-factor__note">
+          <span aria-hidden="true">·</span>
+          <LinkedText
+            :before="TWO_FACTOR_TEXT.noteMailClientBefore"
+            :link="TWO_FACTOR_TEXT.noteMailClientLink"
+            :after="TWO_FACTOR_TEXT.noteMailClientAfter"
+            :to="appPasswordsRoute"
+          />
+        </p>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="two-factor__placeholder"
+      aria-busy="true"
+    />
+
+    <!-- 창은 상태 묶음 밖에 둔다 — 창 안에서 상태를 다시 받는 동안에도 사라지지 않게 -->
+    <TwoFactorEnableDialog
+      :open="enableOpen"
+      :email="email"
+      @close="enableOpen = false"
+      @enabled="onEnabled"
+    />
+    <TwoFactorDisableDialog
+      :open="disableOpen"
+      @close="disableOpen = false"
+      @disabled="onDisabled"
+    />
+  </SettingsPageFrame>
+</template>
+
+<style scoped>
+/* 켠 직후 안내 상자 — 바탕 #F3F8F8 · 초록 체크 · 제목 초록 굵게 · [앱 비밀번호 만들기] 36 (최대 700) */
+.two-factor__done {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-10);
+  max-width: 43.75rem;
+  padding: var(--space-12) var(--space-14);
+  border-radius: var(--radius-md);
+  background: var(--color-brand-tint);
+  color: var(--color-text-strong);
+}
+
+.two-factor__done:focus {
+  outline: none;
+}
+
+.two-factor__done:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-brand);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.two-factor__done-icon {
+  margin-top: var(--space-2);
+  color: var(--color-success-text);
+}
+
+.two-factor__done-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.two-factor__done-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.two-factor__done-title {
+  font-weight: 600;
+  color: var(--color-success-text);
+}
+
+/* 36 — 밀도 예외 (--size-notice-action, 차단 풀기와 같다) */
+.two-factor__done-action {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--size-notice-action);
+  padding: 0 var(--space-12);
+  border: var(--border-width) solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-strong);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.two-factor__done-action:hover {
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+}
+
+/* 상태 상자 — 테두리 · 안쪽 16 18 (최대 700) */
+.two-factor__state {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-12) var(--space-20);
+  max-width: 43.75rem;
+  padding: var(--space-16) var(--space-18);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-lg);
+}
+
+.two-factor__state-text {
+  flex: 1 1 18.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.two-factor__state-label {
+  font-size: var(--font-size-body);
+  font-weight: 700;
+  color: var(--color-text-secondary);
+}
+
+.two-factor__state-label--on {
+  color: var(--color-success-text);
+}
+
+.two-factor__state-hint {
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+.two-factor__enable {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-height: var(--size-touch);
+  padding: 0 var(--space-18);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--color-brand);
+  color: var(--color-on-brand);
+  font-size: var(--font-size-emphasis);
+  font-weight: 600;
+}
+
+.two-factor__enable:hover {
+  background: var(--color-brand-strong);
+}
+
+/* 끄기 — 흰 바탕 · 빨간 글 · 테두리 */
+.two-factor__disable {
+  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-danger);
+  font-weight: 600;
+}
+
+.two-factor__disable:hover {
+  background: var(--color-danger-surface);
+}
+
+/* 꺼져 있을 때의 갈색 경고 (최대 700) */
+.two-factor__warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-10);
+  max-width: 43.75rem;
+  padding: var(--space-12) var(--space-14);
+  border-radius: var(--radius-md);
+  background: var(--color-warning-surface);
+  color: var(--color-warning-text);
+}
+
+.two-factor__warning-icon {
+  margin-top: var(--space-2);
+}
+
+.two-factor__warning-text {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.two-factor__warning-title {
+  font-weight: 600;
+}
+
+.two-factor__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-10);
+}
+
+.two-factor__steps-title {
+  margin: 0;
+  font-size: var(--font-size-body);
+  font-weight: 700;
+}
+
+.two-factor__step-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  max-width: 43.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* 청록 굵은 숫자 — 동그라미 없음 (숫자 칸 20) */
+.two-factor__step {
+  display: grid;
+  grid-template-columns: var(--space-20) minmax(0, 1fr);
+  gap: var(--space-6);
+}
+
+.two-factor__step-number {
+  font-weight: 700;
+  color: var(--color-brand-strong);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 켜져 있을 때의 안내 상자 — 바탕 #F3F8F8 (최대 700) */
+.two-factor__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  max-width: 43.75rem;
+  padding: var(--space-14) var(--space-16);
+  border-radius: var(--radius-lg);
+  background: var(--color-brand-tint);
+  color: var(--color-text-strong);
+}
+
+.two-factor__note {
+  display: flex;
+  gap: var(--space-8);
+  margin: 0;
+}
+
+.two-factor__placeholder {
+  min-height: 16rem;
+}
+</style>
diff --git a/frontend/src/pages/settings/SettingsLayout.spec.ts b/frontend/src/pages/settings/SettingsLayout.spec.ts
index 6b2265e..eb1d5d8 100644
--- a/frontend/src/pages/settings/SettingsLayout.spec.ts
+++ b/frontend/src/pages/settings/SettingsLayout.spec.ts
@@ -9,8 +9,8 @@ import { useAuthStore } from '@/stores/auth.store'
 import { createTestRouter } from '@/test-utils/router'
 import SettingsLayout from './SettingsLayout.vue'
 
-// 설정 메뉴 — 계정 › 비밀번호 / 메일 › 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 · 차단한 주소 · 대용량 첨부 · 알림
-// (디자인 README "4단계 › 설정 메뉴" · "5단계" · "6단계" · "9단계 › 설정 · 보내기 · 읽기 · 차단한 주소" · "11단계 › 설정 › 메일 › 대용량 첨부")
+// 설정 메뉴 — 계정 › 비밀번호 · 2단계 인증 · 앱 비밀번호 · 로그인 기록 / 메일 › 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 · 차단한 주소 · 대용량 첨부 · 알림
+// (디자인 README "4단계 › 설정 메뉴" · "5단계" · "6단계" · "9단계 › 설정 · 보내기 · 읽기 · 차단한 주소" · "11단계 › 설정 › 메일 › 대용량 첨부" · "12단계 — 계정 보안")
 
 describe('SettingsLayout', () => {
   let pinia: Pinia
@@ -35,7 +35,7 @@ describe('SettingsLayout', () => {
     return { wrapper, router }
   }
 
-  it('묶음 둘 — 계정(비밀번호) · 메일(서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 · 차단한 주소 · 대용량 첨부 · 알림), 묶음 이름이 목록의 이름이다', async () => {
+  it('묶음 둘 — 계정(비밀번호 · 2단계 인증 · 앱 비밀번호 · 로그인 기록) · 메일(서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 · 차단한 주소 · 대용량 첨부 · 알림), 묶음 이름이 목록의 이름이다', async () => {
     const { wrapper } = await mountAt('/settings/account/password')
     const menu = wrapper.get('nav[aria-label="설정 메뉴"]')
 
@@ -43,7 +43,12 @@ describe('SettingsLayout', () => {
     const lists = menu.findAll('ul')
     expect(lists.map((list) => list.attributes('aria-labelledby'))).toEqual(['settings-menu-account', 'settings-menu-mail'])
     expect(lists.map((list) => list.findAll('a').map((link) => [link.text(), link.attributes('href')]))).toEqual([
-      [['비밀번호', '/settings/account/password']],
+      [
+        ['비밀번호', '/settings/account/password'],
+        ['2단계 인증', '/settings/account/two-factor'],
+        ['앱 비밀번호', '/settings/account/app-passwords'],
+        ['로그인 기록', '/settings/account/login-history'],
+      ],
       [
         ['서명', '/settings/mail/signature'],
         ['부재중 자동 응답', '/settings/mail/vacation'],
@@ -106,6 +111,39 @@ describe('SettingsLayout', () => {
     expect(router.currentRoute.value.meta).toMatchObject({ title: '대용량 첨부', requiresAuth: true })
   })
 
+  it('설정 › 계정 › 2단계 인증 · 앱 비밀번호 · 로그인 기록 (12단계) — 로그인이 필요하고 탭 제목은 메뉴 이름 (앱의 라우트 표 그대로)', async () => {
+    const router = createRouter({ history: createMemoryHistory(), routes })
+
+    await router.push('/settings/account/two-factor')
+    expect(router.currentRoute.value.name).toBe('settings-account-two-factor')
+    expect(router.currentRoute.value.meta).toMatchObject({ title: '2단계 인증', requiresAuth: true })
+
+    await router.push('/settings/account/app-passwords')
+    expect(router.currentRoute.value.name).toBe('settings-account-app-passwords')
+    expect(router.currentRoute.value.meta).toMatchObject({ title: '앱 비밀번호', requiresAuth: true })
+
+    await router.push('/settings/account/login-history')
+    expect(router.currentRoute.value.name).toBe('settings-account-login-history')
+    expect(router.currentRoute.value.meta).toMatchObject({ title: '로그인 기록', requiresAuth: true })
+  })
+
+  it('계정 보안 메뉴의 아이콘 — 방패(체크) · 열쇠 · 시계(되감기), 지금 화면이면 현재로 표시한다', async () => {
+    const twoFactor = await mountAt('/settings/account/two-factor')
+    const shield = twoFactor.wrapper.get('nav[aria-label="설정 메뉴"]').get('a[aria-current="page"]')
+    expect(shield.text()).toBe('2단계 인증')
+    expect(shield.find('polyline').attributes('points')).toBe('9 12 11 14 15 10')
+
+    const appPasswords = await mountAt('/settings/account/app-passwords')
+    const key = appPasswords.wrapper.get('nav[aria-label="설정 메뉴"]').get('a[aria-current="page"]')
+    expect(key.text()).toBe('앱 비밀번호')
+    expect(key.findAll('path')).toHaveLength(1)
+
+    const history = await mountAt('/settings/account/login-history')
+    const clock = history.wrapper.get('nav[aria-label="설정 메뉴"]').get('a[aria-current="page"]')
+    expect(clock.text()).toBe('로그인 기록')
+    expect(clock.findAll('path').map((shape) => shape.attributes('d'))).toContain('M3 3v5h5')
+  })
+
   it('대용량 첨부 메뉴는 링크 아이콘 · 지금 화면이면 현재로 표시한다', async () => {
     const { wrapper } = await mountAt('/settings/mail/large-files')
     const current = wrapper.get('nav[aria-label="설정 메뉴"]').get('a[aria-current="page"]')
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index 4cb51a4..2733830 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -96,8 +96,8 @@ export const routes: RouteRecordRaw[] = [
     ],
   },
   {
-    // 설정 — 왼쪽 메뉴(계정 › 비밀번호 / 메일 › 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 · 차단한 주소 · 대용량 첨부 · 알림) + 하위 화면.
-    // /settings 는 첫 메뉴(계정 › 비밀번호)로 바꿔 끼운다 (앱 레일의 "설정")
+    // 설정 — 왼쪽 메뉴(계정 › 비밀번호 · 2단계 인증 · 앱 비밀번호 · 로그인 기록 / 메일 › 서명 · 부재중 자동 응답 · 필터 · 보내기 · 읽기 ·
+    // 차단한 주소 · 대용량 첨부 · 알림) + 하위 화면. /settings 는 첫 메뉴(계정 › 비밀번호)로 바꿔 끼운다 (앱 레일의 "설정")
     path: '/settings',
     component: () => import('@/pages/settings/SettingsLayout.vue'),
     meta: { requiresAuth: true, title: '설정' },
@@ -109,6 +109,25 @@ export const routes: RouteRecordRaw[] = [
         component: () => import('@/pages/settings/AccountPasswordPage.vue'),
         meta: { title: '비밀번호' },
       },
+      {
+        // 2단계 인증 · 앱 비밀번호 · 로그인 기록 (12단계 — 디자인 README "12단계 — 계정 보안", 계약 5절)
+        path: 'account/two-factor',
+        name: SETTINGS_ROUTES.twoFactor,
+        component: () => import('@/pages/settings/AccountTwoFactorPage.vue'),
+        meta: { title: '2단계 인증' },
+      },
+      {
+        path: 'account/app-passwords',
+        name: SETTINGS_ROUTES.appPasswords,
+        component: () => import('@/pages/settings/AccountAppPasswordsPage.vue'),
+        meta: { title: '앱 비밀번호' },
+      },
+      {
+        path: 'account/login-history',
+        name: SETTINGS_ROUTES.loginHistory,
+        component: () => import('@/pages/settings/AccountLoginHistoryPage.vue'),
+        meta: { title: '로그인 기록' },
+      },
       {
         path: 'mail/signature',
         name: SETTINGS_ROUTES.signature,
diff --git a/frontend/src/shared/constants/account-security.ts b/frontend/src/shared/constants/account-security.ts
new file mode 100644
index 0000000..abe5bf5
--- /dev/null
+++ b/frontend/src/shared/constants/account-security.ts
@@ -0,0 +1,294 @@
+// 계정 보안 상수 — 계약 5절 "계정 보안 — 12단계" · 디자인 README "12단계 — 계정 보안"
+// (로그인 코드 단계 LoginTwoFactor · 설정 › 계정 › 2단계 인증 SettingsTwoFactor · 앱 비밀번호 SettingsAppPasswords · 로그인 기록 SettingsLoginHistory)
+// 한도는 서버와 같은 값이다 — 서버가 최종 검증한다. 서버가 거절한 까닭의 문구는 에러 코드 사전(AUTH_006 ~ AUTH_009)에서만 온다.
+
+/** 인증 앱 코드의 자릿수 — 숫자 6자리 · 30초 (계약 5절 "한도 · 규칙") */
+export const OTP_CODE_LENGTH = 6
+
+/**
+ * 로그인 코드 단계에 머물 수 있는 시간 — 넘으면 화면 메모리의 비밀번호를 지우고, [확인] 때 「다시 로그인해 주세요」와 함께 첫 단계로 간다
+ * (계약 5절 "로그인" 클라이언트 · 디자인 README "로그인 — 코드 단계")
+ */
+export const TWO_FACTOR_LOGIN_WINDOW_MS = 10 * 60 * 1000
+
+/**
+ * 2단계 인증 켜기 · 끄기 요청 하나의 시간 한도 — 서버는 비밀번호 확인 · 대리 접근 쓰기 · 결과를 모르면 다시 읽기까지 엔진을 여러 번 부른다.
+ * 기본 10초로 끊으면 화면은 실패로 보는데 서버는 이미 켰을 수 있다 (비밀번호 바꾸기의 PASSWORD_CHANGE_TIMEOUT_MS 와 같은 까닭)
+ */
+export const TWO_FACTOR_CHANGE_TIMEOUT_MS = 30 * 1000
+
+/**
+ * 앱 비밀번호 상한 — 엔진 기본값 5(x:Authentication.maxAppPasswords). 엔진 상한을 바꾸면 이 값과 AUTH_009 문구도 함께 바꾼다 (계약 5절)
+ */
+export const APP_PASSWORD_MAX = 5
+/** 앱 비밀번호 이름 — 앞뒤 공백을 지운 값으로 1~40자 (JS 문자열 길이) */
+export const APP_PASSWORD_NAME_MAX_LENGTH = 40
+
+/**
+ * 2단계 인증 키를 한 줄에 몇 묶음(4자씩)까지 그리는가 — 32자 키를 일부러 두 줄(4묶음 + 4묶음)로 그린다.
+ * 620 창에서 QR 옆 키 상자는 32자 + 묶음 사이 여백을 한 줄에 담지 못해 묶음 가운데서 줄이 바뀌었다(2026-10-31 브라우저 점검)
+ */
+export const TWO_FACTOR_KEY_GROUPS_PER_LINE = 4
+
+/** 로그인된 브라우저를 한 번에 받는 수 — 서버 최대(100). 직원 한 사람의 웹메일 세션은 이보다 적다 */
+export const AUTH_SESSION_LIST_LIMIT = 100
+
+/**
+ * 메일 프로그램 설정값 — 앱 비밀번호 화면의 설정값 상자 · 만든 결과 창 (디자인 README "앱 비밀번호 › 메일 프로그램 설정값 상자").
+ * 호스트 · 포트는 이 상수 하나에 둔다 — 전 직원 전환 때 다시 본다
+ */
+export const MAIL_CLIENT_SETTINGS = {
+  host: 'mx1.arasystem.it.kr',
+  imapPort: 993,
+  smtpPort: 465,
+  security: 'SSL/TLS',
+} as const
+
+/** 인증 앱 코드 칸 — 로그인 코드 단계 · 켜기 · 끄기 창 · 비밀번호 화면 */
+export const OTP_TEXT = {
+  placeholder: '000000',
+} as const
+
+/** 로그인 — 코드 단계 (디자인 원본 LoginTwoFactor) */
+export const LOGIN_TWO_FACTOR_TEXT = {
+  title: '2단계 인증',
+  subtitle: '비밀번호를 확인했습니다. 휴대폰 인증 앱에 표시된 코드를 넣어 주세요.',
+  otherAccount: '다른 계정으로 로그인',
+  codeLabel: '인증 앱에 표시된 6자리 코드',
+  submit: '확인',
+  submitting: '확인하는 중…',
+  help: '인증 앱을 쓸 수 없나요? 관리자에게 문의해 주세요.',
+  note: 'Outlook · 휴대폰 메일 앱은 이 코드를 묻지 않습니다. 설정 › 앱 비밀번호에서 만든 비밀번호로 연결합니다.',
+  /** 코드 단계에 10분 넘게 머문 뒤 [확인] — 첫 단계의 위쪽 상자 */
+  expired: '코드를 넣는 시간이 지났습니다. 다시 로그인해 주세요.',
+} as const
+
+/** 설정 › 계정 › 2단계 인증 (디자인 원본 SettingsTwoFactor) */
+export const TWO_FACTOR_TEXT = {
+  title: '2단계 인증',
+  description:
+    '로그인할 때 비밀번호와 함께 휴대폰 인증 앱의 코드를 확인합니다. 비밀번호가 새어 나가도 휴대폰이 없으면 로그인할 수 없습니다.',
+  off: '꺼짐',
+  offHint: '지금은 로그인할 때 비밀번호만 확인합니다.',
+  on: '켜짐',
+  onSince: (day: string) => `켜짐 — ${day}부터`,
+  onHint: '로그인할 때마다 비밀번호와 인증 앱의 코드를 확인합니다.',
+  enable: '2단계 인증 켜기',
+  disable: '2단계 인증 끄기',
+  warningTitle: '켜면 메일 프로그램은 앱 비밀번호로 다시 연결해야 합니다',
+  /** 경고 글 — 가운데 「앱 비밀번호」는 앱 비밀번호 화면 링크 */
+  warningBefore:
+    'Outlook · 썬더버드 · 휴대폰 메일 앱은 웹메일 비밀번호로 새로 연결할 수 없고, 이미 연결해 둔 프로그램도 다음에 다시 연결할 때 막힙니다. 켜기 전에 ',
+  warningLink: '앱 비밀번호',
+  warningAfter: '를 만들어 두면 편합니다.',
+  stepsTitle: '켜는 차례',
+  steps: [
+    '휴대폰에 인증 앱을 설치합니다 — Google Authenticator, Microsoft Authenticator 처럼 6자리 코드를 만드는(TOTP) 앱이면 됩니다.',
+    '[2단계 인증 켜기]를 누르고 화면의 QR 코드를 인증 앱으로 찍습니다.',
+    '앱에 표시된 6자리 코드와 지금 비밀번호를 넣으면 켜집니다. 그다음부터 로그인할 때마다 코드를 묻습니다.',
+  ],
+  noteChangePhone: '휴대폰을 바꿀 때는 2단계 인증을 끈 뒤 새 휴대폰으로 다시 켜 주세요 — 끌 때 지금 휴대폰의 코드가 필요합니다.',
+  noteLostPhone: '휴대폰을 잃어버렸거나 인증 앱을 지웠으면 관리자에게 문의해 주세요.',
+  noteMailClientBefore: '메일 프로그램은 ',
+  noteMailClientLink: '앱 비밀번호',
+  noteMailClientAfter: '로 연결합니다.',
+  /** 켠 직후 머리 아래 안내 상자 — 이 화면을 떠나면 사라진다 */
+  enabledTitle: '2단계 인증을 켰습니다',
+  enabledText: '메일 프로그램(Outlook · 썬더버드 · 휴대폰 메일 앱)은 다시 연결할 때 앱 비밀번호가 필요합니다.',
+  enabledAction: '앱 비밀번호 만들기',
+  disabled: '2단계 인증을 껐습니다.',
+} as const
+
+/** 2단계 인증 켜기 창 (모달 620) */
+export const TWO_FACTOR_ENABLE_TEXT = {
+  title: '2단계 인증 켜기',
+  scanTitle: '인증 앱으로 QR 코드를 찍어 주세요',
+  scanHint: '인증 앱에서 [+] → 「QR 코드 스캔」을 고르고 이 그림을 찍습니다.',
+  qrLabel: '인증 앱에 등록할 QR 코드',
+  keyLabel: '찍을 수 없으면 이 키를 입력하세요',
+  copy: '복사',
+  copyLabel: '키 복사',
+  copied: '키를 복사했습니다.',
+  copyFailed: '키를 복사하지 못했습니다. 키를 직접 골라 복사해 주세요.',
+  /** 앱에 저장될 이름 — 서버의 otpauthUrl 과 같은 이름(계약 5절 "정한 것" 1) */
+  savedAs: (email: string) => `앱에는 「ARA SYSTEM (${email})」로 저장됩니다.`,
+  /** 켜지 않고 닫으면 그 키는 버린다 — 앱에 먼저 저장한 항목은 지워 달라고 안내한다 (README "켜기 창") */
+  discardNote: '켜지 않고 닫으면 이 키는 버립니다 — 앱에 먼저 저장했다면 그 항목을 지워 주세요.',
+  loading: 'QR 코드를 만드는 중…',
+  codeLabel: '앱에 표시된 6자리 코드',
+  passwordLabel: '지금 비밀번호',
+  showPassword: '지금 비밀번호 보기',
+  submit: '켜기',
+  submitting: '켜는 중…',
+  cancel: '취소',
+  retry: '다시 시도',
+} as const
+
+/** 2단계 인증 끄기 창 (alertdialog 400 · 처음 초점 「취소」) */
+export const TWO_FACTOR_DISABLE_TEXT = {
+  title: '2단계 인증을 끌까요?',
+  message: '끄면 비밀번호만으로 로그인합니다. 만들어 둔 앱 비밀번호는 그대로 남습니다.',
+  passwordLabel: '지금 비밀번호',
+  showPassword: '지금 비밀번호 보기',
+  codeLabel: '인증 앱 코드',
+  submit: '끄기',
+  submitting: '끄는 중…',
+  cancel: '취소',
+} as const
+
+/** 설정 › 계정 › 앱 비밀번호 (디자인 원본 SettingsAppPasswords) */
+export const APP_PASSWORD_TEXT = {
+  title: '앱 비밀번호',
+  description:
+    'Outlook · 썬더버드 · 휴대폰 메일 앱 같은 메일 프로그램에 넣는 비밀번호입니다. 프로그램마다 따로 만들어 두면, 기기를 잃었을 때 그것만 지울 수 있습니다.',
+  count: (count: string, max: string) => `${count} / ${max}개`,
+  create: '앱 비밀번호 만들기',
+  /** 5개를 모두 만들었을 때 머리 아래 한 줄 — [만들기]를 눌러도 이 글을 읽어 준다 */
+  full: (max: string) => `${max}개까지 만들 수 있습니다. 쓰지 않는 앱 비밀번호를 지운 뒤 만들어 주세요.`,
+  listLabel: '앱 비밀번호 — 최근에 만든 차례',
+  columnName: '이름',
+  columnCreated: '만든 날',
+  columnLastUsed: '마지막 사용',
+  columnActions: '지우기',
+  neverUsed: '아직 쓰지 않음',
+  delete: '지우기',
+  deleteLabel: (name: string) => `‘${name}’ 앱 비밀번호 지우기`,
+  emptyTitle: '만든 앱 비밀번호가 없습니다',
+  emptyHint:
+    'Outlook · 휴대폰 메일 앱에서 메일을 보려면 앱 비밀번호를 만들어 주세요. 2단계 인증을 켰다면 메일 프로그램은 앱 비밀번호로만 연결합니다.',
+  settingsTitle: '메일 프로그램 설정값',
+  incoming: '받는 메일 (IMAP)',
+  outgoing: '보내는 메일 (SMTP)',
+  username: '사용자 이름',
+  usernameNote: ' — 메일 주소 전체',
+  password: '비밀번호',
+  passwordNote: '여기서 만든 앱 비밀번호 — 웹메일 비밀번호가 아닙니다',
+  port: (port: number) => `포트 ${port}`,
+  notes: [
+    '앱 비밀번호는 메일 읽기 · 보내기(IMAP · SMTP)에만 쓰입니다. 웹메일 로그인에는 쓸 수 없습니다.',
+    '2단계 인증을 켜면 메일 프로그램은 앱 비밀번호로만 연결합니다. 켜지 않아도 만들어 쓸 수 있습니다.',
+    '웹메일 비밀번호를 바꾸면 앱 비밀번호도 모두 지워집니다 — 메일 프로그램마다 새로 만들어 주세요.',
+    '휴대폰이나 PC 를 잃어버렸으면 그 기기의 앱 비밀번호를 바로 지워 주세요.',
+  ],
+  deleted: (name: string) => `‘${name}’ 앱 비밀번호를 지웠습니다.`,
+} as const
+
+/** 앱 비밀번호 만들기 창 (모달 400 · 처음 초점 이름 칸) */
+export const APP_PASSWORD_CREATE_TEXT = {
+  title: '앱 비밀번호 만들기',
+  nameLabel: '이름',
+  namePlaceholder: '예: 회사 PC 아웃룩',
+  nameHelp: '어느 프로그램 · 기기에서 쓰는지 알아볼 이름입니다. 40자까지.',
+  empty: '이름을 넣어 주세요.',
+  duplicate: '같은 이름의 앱 비밀번호가 있습니다.',
+  submit: '만들기',
+  cancel: '취소',
+} as const
+
+/** 만든 결과 창 (모달 620 · 처음 초점 [복사]) — 값은 이 창에서 한 번만 */
+export const APP_PASSWORD_RESULT_TEXT = {
+  title: '앱 비밀번호를 만들었습니다',
+  message: (name: string) => `‘${name}’ — 메일 프로그램의 비밀번호 칸에 아래 값을 넣어 주세요.`,
+  copy: '복사',
+  copyLabel: '앱 비밀번호 복사',
+  lengthNote: (length: string) => `${length}자입니다. 보기 좋게 4자씩 띄웠지만 띄어쓰기는 없습니다.`,
+  warningStrong: '이 창을 닫으면 다시 볼 수 없습니다.',
+  warningAfter: ' 잊어버리면 지우고 새로 만들어 주세요.',
+  copied: '앱 비밀번호를 복사했습니다.',
+  copyFailed: '앱 비밀번호를 복사하지 못했습니다. 값을 직접 골라 복사해 주세요.',
+  close: '닫기',
+} as const
+
+/** 앱 비밀번호 지우기 확인 (alertdialog 400 · 처음 초점 「취소」) */
+export const APP_PASSWORD_DELETE_TEXT = {
+  title: (name: string) => `‘${name}’ 앱 비밀번호를 지울까요?`,
+  message: '이 비밀번호로 연결한 메일 프로그램은 다음 연결부터 로그인하지 못합니다. 지운 비밀번호는 되돌릴 수 없습니다.',
+  confirm: '지우기',
+  cancel: '취소',
+} as const
+
+/** 설정 › 계정 › 로그인 기록 (디자인 원본 SettingsLoginHistory) */
+export const LOGIN_HISTORY_TEXT = {
+  title: '로그인 기록',
+  /** 머리 설명 — 「비밀번호를 바꾸고」 · 「2단계 인증」은 링크 */
+  descriptionBefore: '최근 90일 동안의 로그인입니다. 모르는 기록이 있으면 바로 ',
+  descriptionPasswordLink: '비밀번호를 바꾸고',
+  descriptionMiddle: ', ',
+  descriptionTwoFactorLink: '2단계 인증',
+  descriptionAfter: '이 꺼져 있으면 켜 주세요.',
+  /** 화면 틀의 description(글만) — 링크를 그릴 수 없는 곳에서 */
+  description:
+    '최근 90일 동안의 로그인입니다. 모르는 기록이 있으면 바로 비밀번호를 바꾸고, 2단계 인증이 꺼져 있으면 켜 주세요.',
+  sessionsTitle: '로그인된 브라우저',
+  sessionsCount: (count: string) => `웹메일 ${count}곳`,
+  endOthers: '다른 곳 모두 로그아웃',
+  columnDevice: '브라우저 · 운영체제',
+  columnIp: 'IP',
+  columnLastActive: '마지막 활동',
+  columnKind: '기기',
+  /** 줄 앞 아이콘의 이름 — PC · 휴대폰 */
+  kindPc: 'PC',
+  kindMobile: '휴대폰',
+  columnActions: '로그아웃',
+  current: '지금 이 브라우저',
+  endSession: '로그아웃',
+  endSessionLabel: (device: string) => `‘${device}’ 로그아웃`,
+  unknownBrowser: '알 수 없는 브라우저',
+  unknownValue: '알 수 없음',
+  noOthers: '다른 곳에 로그인된 브라우저가 없습니다. ',
+  sessionsNoteBefore: '웹메일 로그인만 보입니다. 메일 프로그램은 ',
+  sessionsNoteLink: '앱 비밀번호',
+  sessionsNoteAfter: '를 지워 끊습니다.',
+  sessionEnded: (device: string) => `‘${device}’의 로그인을 끊었습니다.`,
+  othersEnded: (count: string) => `다른 곳의 로그인 ${count}곳을 끊었습니다.`,
+  /** 서버가 이 브라우저를 알아보지 못했을 때(지금 이 브라우저 줄이 없음) — 이 브라우저까지 끊었다 */
+  allEnded: (count: string) => `이 브라우저를 포함한 ${count}곳의 로그인을 끊었습니다.`,
+  eventsTitle: '최근 로그인',
+  eventsHintAll: '최근 90일 · 웹메일과 메일 프로그램',
+  eventsHintFailures: (count: string) => `최근 90일 · 실패 ${count}번`,
+  eventsHintFailuresUnknown: '최근 90일 · 실패만',
+  filterLabel: '보일 기록',
+  filterAll: '전체',
+  filterFailures: '실패만',
+  columnTime: '시각',
+  columnMethod: '방식',
+  columnResult: '결과',
+  methodWebmail: '웹메일',
+  methodImap: '메일 프로그램 · IMAP',
+  methodSmtp: '메일 프로그램 · SMTP',
+  appPassword: (name: string) => `앱 비밀번호 ‘${name}’`,
+  success: '성공',
+  successTwoFactor: '성공 · 2단계 인증',
+  failure: '실패',
+  failureWrongPassword: '실패 — 비밀번호 틀림',
+  failureWrongCode: '실패 — 코드 틀림',
+  failureAppPasswordRequired: '실패 — 앱 비밀번호 필요',
+  more: '더 보기',
+  moreHint: '최근 순서 · 20개씩. 90일이 지난 기록은 지웁니다.',
+  emptyFailuresTitle: '최근 90일 동안 실패한 로그인이 없습니다',
+  emptyFailuresHint: '[전체]를 누르면 성공한 로그인도 봅니다.',
+  emptyAllTitle: '최근 90일 동안 로그인 기록이 없습니다',
+  emptyAllHint: '기록은 이 기능을 배포한 날부터 쌓입니다.',
+} as const
+
+/** [다른 곳 모두 로그아웃] 확인 (alertdialog 400 · 처음 초점 「취소」) */
+export const END_OTHER_SESSIONS_TEXT = {
+  title: '다른 곳의 로그인을 모두 끊을까요?',
+  /** "이 브라우저를 뺀 2곳(Edge · Windows, Safari · iOS)의 …" — 이름은 세 곳까지, 넘으면 "외 n곳" */
+  message: (count: string, names: string) =>
+    `이 브라우저를 뺀 ${count}곳(${names})의 웹메일 로그인을 끊습니다. 끊긴 곳은 다음 동작에서 바로 로그인 화면으로 돌아갑니다.`,
+  /**
+   * 서버가 이 브라우저를 알아보지 못했을 때(지금 이 브라우저 줄이 없음 — 서버는 이 요청의 세션을 몰라 모두 끊는다, 계약 5절) —
+   * 이 브라우저도 로그아웃된다고 알린다
+   */
+  titleAll: '이 브라우저를 포함해 모든 곳의 로그인을 끊을까요?',
+  messageAll: (count: string, names: string) =>
+    `이 브라우저를 알아보지 못해 이 브라우저를 포함한 ${count}곳(${names})의 웹메일 로그인을 끊습니다. 이 브라우저도 로그아웃되어 로그인 화면으로 돌아갑니다.`,
+  moreNames: (count: string) => `외 ${count}곳`,
+  note: '메일 프로그램은 끊기지 않습니다 — 앱 비밀번호를 지워 끊어 주세요.',
+  confirm: '모두 로그아웃',
+  cancel: '취소',
+} as const
+
+/** 확인 창 글에 이름을 몇 곳까지 늘어놓는가 */
+export const END_OTHER_SESSIONS_NAME_LIMIT = 3
diff --git a/frontend/src/shared/constants/account.ts b/frontend/src/shared/constants/account.ts
index 0e1b2c5..00b7948 100644
--- a/frontend/src/shared/constants/account.ts
+++ b/frontend/src/shared/constants/account.ts
@@ -15,6 +15,8 @@ export const PASSWORD_CHANGE_TIMEOUT_MS = 30 * 1000
 export const PASSWORD_TEXT = {
   title: '비밀번호',
   description: '웹메일과 휴대폰 메일 앱(IMAP)이 함께 쓰는 메일 계정의 비밀번호입니다.',
+  /** 2단계 인증을 켠 직원의 머리 설명 (12단계 — 디자인 원본 SettingsTwoFactor "비밀번호 — 2단계 인증을 켠 직원") */
+  descriptionTwoFactor: '웹메일에 로그인하는 비밀번호입니다. 2단계 인증이 켜져 있어 메일 프로그램은 앱 비밀번호로 연결합니다.',
   current: '지금 비밀번호',
   next: '새 비밀번호',
   confirm: '새 비밀번호 확인',
@@ -24,8 +26,12 @@ export const PASSWORD_TEXT = {
   /** 새 비밀번호 아래 안내 — 규칙에 맞지 않으면 이 글이 빨간 오류로 바뀐다 */
   hint: '8자 이상 · 지금 비밀번호와 달라야 합니다. 영문 · 숫자 · 기호를 섞으면 더 안전합니다.',
   mismatch: '새 비밀번호가 서로 다릅니다.',
+  /** 2단계 인증을 켠 직원만 — 양식 맨 아래 (코드가 30초마다 바뀌어 먼저 넣으면 다른 칸을 쓰는 동안 지날 수 있다) */
+  code: '인증 앱 코드',
+  codeHint: '코드는 30초마다 바뀝니다 — 다른 칸을 다 쓴 뒤 넣어 주세요.',
   submit: '비밀번호 바꾸기',
   done: '비밀번호를 바꿨습니다. 다른 기기 · 브라우저의 로그인은 끊었습니다.',
   noteSessions: '바꾸면 이 브라우저를 뺀 다른 기기 · 브라우저의 웹메일 로그인이 끊깁니다.',
-  noteImap: '휴대폰이나 PC 메일 프로그램(IMAP)에는 새 비밀번호를 다시 넣어 주세요.',
+  /** 모든 직원 (12단계) — 비밀번호를 바꾸면 서버가 그 직원의 앱 비밀번호를 모두 지운다 (계약 5절 "비밀번호 바꾸기") */
+  noteAppPasswords: '앱 비밀번호도 모두 지워집니다 — 메일 프로그램은 새 앱 비밀번호로 다시 연결해 주세요.',
 } as const
diff --git a/frontend/src/shared/constants/icons.ts b/frontend/src/shared/constants/icons.ts
index 819ab0a..edf202b 100644
--- a/frontend/src/shared/constants/icons.ts
+++ b/frontend/src/shared/constants/icons.ts
@@ -307,6 +307,22 @@ export const ICONS = {
     line(12, 9, 12, 13),
     line(12, 17, 12.01, 17),
   ],
+
+  // ── 12단계: 계정 보안 (디자인 원본 SettingsTwoFactor · SettingsAppPasswords · SettingsLoginHistory) ──
+  /** 설정 메뉴의 2단계 인증 · [2단계 인증 켜기] (방패 + 체크) */
+  'shield-check': [path('M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'), polyline('9 12 11 14 15 10')],
+  /** 설정 메뉴의 앱 비밀번호 · 앱 비밀번호가 없을 때 (열쇠) */
+  key: [
+    path(
+      'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4',
+    ),
+  ],
+  /** 설정 메뉴의 로그인 기록 (되감는 시계) */
+  history: [path('M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'), path('M3 3v5h5'), path('M12 7v5l4 2')],
+  /** 로그인된 브라우저 — PC */
+  monitor: [rect(2, 3, 20, 14, 2), line(8, 21, 16, 21), line(12, 17, 12, 21)],
+  /** 로그인된 브라우저 — 휴대폰 */
+  smartphone: [rect(5, 2, 14, 20, 2), line(12, 18, 12.01, 18)],
 } as const satisfies Record<string, readonly IconShape[]>
 
 export type IconName = keyof typeof ICONS
diff --git a/frontend/src/shared/constants/settings-menu.ts b/frontend/src/shared/constants/settings-menu.ts
index 6c4ae95..88fe9d8 100644
--- a/frontend/src/shared/constants/settings-menu.ts
+++ b/frontend/src/shared/constants/settings-menu.ts
@@ -1,13 +1,18 @@
 // 설정 모듈의 왼쪽 메뉴 — 묶음(계정 · 메일) 아래 항목 (디자인 README "4단계 › 설정 메뉴" · "5단계 › 설정 › 메일 › 알림" · "6단계 › 설정 › 메일 › 필터" ·
-// "9단계 › 설정 · 보내기 · 읽기 · 차단한 주소" · "11단계 › 설정 › 메일 › 대용량 첨부" — 차단한 주소 아래)
+// "9단계 › 설정 · 보내기 · 읽기 · 차단한 주소" · "11단계 › 설정 › 메일 › 대용량 첨부" — 차단한 주소 아래 ·
+// "12단계 — 계정 보안" — 계정 › 비밀번호 · 2단계 인증 · 앱 비밀번호 · 로그인 기록)
 // 라우트(router/routes.ts) · 메뉴(SettingsLayout.vue) · 다른 화면의 링크(메일함 패널의 부재중 안내 · 알림을 막아 둔 오류 알림의 [설정 열기] ·
-// 읽기 화면 ⋯ 「이런 메일로 필터 만들기」)가 이 이름을 함께 쓴다.
+// 읽기 화면 ⋯ 「이런 메일로 필터 만들기」 · 계정 보안 화면끼리의 링크)가 이 이름을 함께 쓴다.
 
 import type { IconName } from '@/shared/constants/icons'
 
 export const SETTINGS_ROUTES = {
   /** 설정의 첫 화면 — /settings 는 이 화면으로 바꿔 끼운다 (앱 레일의 "설정") */
   password: 'settings-account-password',
+  /** 2단계 인증 · 앱 비밀번호 · 로그인 기록 (12단계) */
+  twoFactor: 'settings-account-two-factor',
+  appPasswords: 'settings-account-app-passwords',
+  loginHistory: 'settings-account-login-history',
   signature: 'settings-mail-signature',
   vacation: 'settings-mail-vacation',
   filters: 'settings-mail-filters',
@@ -37,7 +42,12 @@ export const SETTINGS_MENU: readonly SettingsMenuGroup[] = [
   {
     id: 'account',
     label: '계정',
-    items: [{ routeName: SETTINGS_ROUTES.password, label: '비밀번호', icon: 'lock' }],
+    items: [
+      { routeName: SETTINGS_ROUTES.password, label: '비밀번호', icon: 'lock' },
+      { routeName: SETTINGS_ROUTES.twoFactor, label: '2단계 인증', icon: 'shield-check' },
+      { routeName: SETTINGS_ROUTES.appPasswords, label: '앱 비밀번호', icon: 'key' },
+      { routeName: SETTINGS_ROUTES.loginHistory, label: '로그인 기록', icon: 'history' },
+    ],
   },
   {
     id: 'mail',
diff --git a/frontend/src/shared/types/account-security.ts b/frontend/src/shared/types/account-security.ts
new file mode 100644
index 0000000..b2594ee
--- /dev/null
+++ b/frontend/src/shared/types/account-security.ts
@@ -0,0 +1,109 @@
+// 계정 보안 API 공유 타입 — docs/mail/api-contract.md 5절 "계정 보안 — 12단계" 와 같은 구조
+// (2단계 인증 · 앱 비밀번호 · 로그인된 브라우저 · 로그인 기록). 로그인 · 비밀번호 바꾸기에 더한 칸은 shared/types/auth.ts
+
+/** GET /two-factor · 켜기 · 끄기의 응답 — 엔진이 기준이다 */
+export interface TwoFactorStatus {
+  isEnabled: boolean
+  /** 웹메일에서 켠 때 — 엔진 관리 화면에서 켰으면 null */
+  enabledAt: string | null
+}
+
+/** POST /two-factor/enrollments (201 · no-store) — 비밀은 이 응답에만, 창을 닫으면 버린다 */
+export interface TwoFactorEnrollment {
+  enrollmentId: string
+  /** base32(채움 없음) 32자 */
+  secret: string
+  /** QR 로 그린다 (otpauth://totp/…) */
+  otpauthUrl: string
+  /** 이때까지 켜야 한다 (등록을 시작하고 10분) */
+  expiresAt: string
+}
+
+/** POST /two-factor/activation 본문 */
+export interface TwoFactorActivationPayload {
+  enrollmentId: string
+  otpCode: string
+  currentPassword: string
+}
+
+/** POST /two-factor/deactivation 본문 */
+export interface TwoFactorDeactivationPayload {
+  currentPassword: string
+  otpCode: string
+}
+
+/** 앱 비밀번호 · 로그인 기록의 메일 프로그램 방식 */
+export type MailClientProtocol = 'imap' | 'smtp'
+
+/** 앱 비밀번호의 마지막 사용 — 엔진 웹훅의 로그인 성공으로 서버가 만든다 */
+export interface AppPasswordLastUsed {
+  at: string
+  method: MailClientProtocol
+  ip: string | null
+}
+
+/** GET /app-passwords 의 한 줄 — 최근에 만든 것이 위 */
+export interface AppPassword {
+  id: string
+  name: string
+  createdAt: string
+  /** 쓰지 않았으면 null */
+  lastUsed: AppPasswordLastUsed | null
+}
+
+/** POST /app-passwords (201 · no-store) — 값(password)은 이 응답에만 온다. 화면 메모리에만 두고 창을 닫으면 지운다 */
+export interface CreatedAppPassword extends AppPassword {
+  password: string
+}
+
+/** 서버가 User-Agent 를 짧은 이름으로 바꾼 것 — 모르면 null */
+export interface LoginDevice {
+  browser: string | null
+  os: string | null
+}
+
+/** GET /auth/sessions 의 한 줄 — 지금 세션이 맨 앞, 그다음 최근 활동 차례 */
+export interface AuthSession {
+  id: string
+  createdAt: string
+  /** 마지막 갱신(회전) 때 — 없으면 로그인 때 */
+  lastActiveAt: string
+  /** 12단계 전에 연 세션은 null */
+  ip: string | null
+  device: LoginDevice | null
+  isCurrent: boolean
+}
+
+/** DELETE /auth/sessions — 이 요청의 세션만 남기고 끊은 수 */
+export interface EndedSessions {
+  ended: number
+}
+
+export type LoginMethod = 'webmail' | MailClientProtocol
+
+/** 실패한 까닭 — wrongPassword(웹메일에 넣은 앱 비밀번호 포함) · wrongCode(다시 쓴 코드 포함) · appPasswordRequired(2단계를 켠 계정에 메일 프로그램이 비밀번호로) */
+export type LoginFailureReason = 'wrongPassword' | 'wrongCode' | 'appPasswordRequired'
+
+/** GET /login-events 의 한 줄 — 최근 차례, 90일 보존 */
+export interface LoginEvent {
+  id: string
+  occurredAt: string
+  method: LoginMethod
+  isSuccess: boolean
+  /** 웹메일 성공이 코드까지 거쳤는지 */
+  isTwoFactor: boolean
+  failureReason: LoginFailureReason | null
+  ip: string | null
+  /** 웹메일만 — 메일 프로그램은 null */
+  device: LoginDevice | null
+  /** 메일 프로그램이 앱 비밀번호로 들어온 경우 — name 은 그때의 이름(지운 뒤에도 남는다) */
+  appPassword: { id: string; name: string } | null
+}
+
+/** GET /login-events 쿼리 */
+export interface LoginEventQuery {
+  cursor?: string
+  limit?: number
+  /** false 면 실패만 */
+  isSuccess?: false
+}
diff --git a/frontend/src/shared/types/auth.ts b/frontend/src/shared/types/auth.ts
index 8e8dc0c..4bae069 100644
--- a/frontend/src/shared/types/auth.ts
+++ b/frontend/src/shared/types/auth.ts
@@ -11,14 +11,35 @@ export interface AuthUser {
 export interface LoginPayload {
   email: string
   password: string
+  /**
+   * 2단계 인증 코드 (12단계 — 계약 5절) — 코드 단계에서만 싣는다. 서버는 비밀번호를 들고 있지 않아 코드 단계에서도 비밀번호를 한 번 더 싣는다.
+   * 숫자 6자리가 아니면 400 VAL_001, 틀리거나 2분 안에 다시 쓴 코드면 400 AUTH_006
+   */
+  otpCode?: string
 }
 
+/**
+ * POST /auth/login 응답 (12단계 — 계약 5절). 2단계 인증을 켠 직원이고 비밀번호가 맞으면 200 twoFactorRequired — 쿠키가 없고 email · name 은 null.
+ * status 가 없는 응답(12단계 전 서버)은 signedIn 으로 읽는다
+ */
+export type LoginResponse =
+  | { status?: 'signedIn'; email: string; name: string }
+  | { status: 'twoFactorRequired'; email: null; name: null }
+
+/** 로그인의 결과 — 로그인했거나, 코드 단계로 가야 한다 */
+export type LoginOutcome = { status: 'signedIn'; user: AuthUser } | { status: 'twoFactorRequired' }
+
 /**
  * PUT /auth/password 요청 본문 (4단계) — 성공은 200 data: null, 지금 비밀번호가 틀리면 400 AUTH_005.
- * 바뀌면 서버가 이 세션만 남기고 그 직원의 다른 로그인 세션을 모두 끊는다
+ * 바뀌면 서버가 이 세션만 남기고 그 직원의 다른 로그인 세션을 모두 끊고, 앱 비밀번호도 모두 지운다(12단계)
  */
 export interface ChangePasswordPayload {
   currentPassword: string
   /** 8~128자 · 지금 비밀번호와 달라야 한다 (넘으면 400 VAL_001) */
   newPassword: string
+  /**
+   * 2단계 인증 코드 (12단계) — 2단계 인증을 켠 직원만 필수. 없으면 400 AUTH_007(다른 탭에서 켠 경우 — 화면이 코드 칸을 보인다),
+   * 틀리거나 다시 쓴 코드면 400 AUTH_006
+   */
+  otpCode?: string
 }
diff --git a/frontend/src/shared/utils/account-security.spec.ts b/frontend/src/shared/utils/account-security.spec.ts
new file mode 100644
index 0000000..aa3b3d4
--- /dev/null
+++ b/frontend/src/shared/utils/account-security.spec.ts
@@ -0,0 +1,219 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AppPassword, AuthSession, LoginEvent } from '@/shared/types/account-security'
+import { formatRelativeDayTime } from '@/shared/utils/format'
+import {
+  appPasswordCountText,
+  appPasswordLastUsedText,
+  appPasswordNameProblem,
+  chunkItems,
+  deviceLabel,
+  endOtherSessionsMessage,
+  groupCharacters,
+  isCompleteOtp,
+  isMobileDevice,
+  loginAppPasswordLabel,
+  loginDeviceLabel,
+  loginMethodLabel,
+  loginResultLabel,
+  normalizeOtpInput,
+  otherSessions,
+  twoFactorStateLabel,
+} from './account-security'
+
+// 계정 보안 화면의 순수 함수 (계약 5절 · 디자인 README "12단계 — 계정 보안")
+
+const NOW = Date.parse('2026-10-31T03:00:00Z')
+
+function event(changes: Partial<LoginEvent>): LoginEvent {
+  return {
+    id: 'e1',
+    occurredAt: '2026-10-31T00:30:00Z',
+    method: 'webmail',
+    isSuccess: true,
+    isTwoFactor: false,
+    failureReason: null,
+    ip: '211.186.95.252',
+    device: { browser: 'Chrome', os: 'Windows' },
+    appPassword: null,
+    ...changes,
+  }
+}
+
+function session(changes: Partial<AuthSession>): AuthSession {
+  return {
+    id: 's1',
+    createdAt: '2026-10-30T00:00:00Z',
+    lastActiveAt: '2026-10-31T00:05:00Z',
+    ip: '211.186.95.252',
+    device: { browser: 'Edge', os: 'Windows' },
+    isCurrent: false,
+    ...changes,
+  }
+}
+
+describe('인증 앱 코드 칸', () => {
+  it('숫자만 남기고 6자리에서 자른다 — 붙여 넣은 띄어쓰기 · 하이픈 · 전각 숫자', () => {
+    expect(normalizeOtpInput('123 456')).toBe('123456')
+    expect(normalizeOtpInput('123-456')).toBe('123456')
+    expect(normalizeOtpInput(' 12a3 ')).toBe('123')
+    expect(normalizeOtpInput('１２３４５６')).toBe('123456')
+    expect(normalizeOtpInput('1234567890')).toBe('123456')
+    expect(normalizeOtpInput('코드')).toBe('')
+  })
+
+  it('숫자 6자리만 다 넣은 코드다', () => {
+    expect(isCompleteOtp('123456')).toBe(true)
+    expect(isCompleteOtp('12345')).toBe(false)
+    expect(isCompleteOtp('1234567')).toBe(false)
+    expect(isCompleteOtp('12345a')).toBe(false)
+    expect(isCompleteOtp('')).toBe(false)
+  })
+})
+
+describe('4자씩 끊어 보이기', () => {
+  it('띄어쓰기 없이 조각으로만 나눈다 — 이어 붙이면 원래 값이다', () => {
+    const secret = 'K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS'
+    const groups = groupCharacters(secret)
+    expect(groups).toEqual(['K7QF', '2M4X', 'HB6R', 'TZ3N', 'PW5C', 'YL7D', 'JQ2V', 'MGAS'])
+    expect(groups.join('')).toBe(secret)
+    expect(groupCharacters('app_7qm2xk')).toEqual(['app_', '7qm2', 'xk'])
+    expect(groupCharacters('')).toEqual([])
+  })
+
+  it('조각을 줄로 묶는다 — 32자 키는 한 줄에 4묶음씩 두 줄', () => {
+    const groups = groupCharacters('K7QF2M4XHB6RTZ3NPW5CYL7DJQ2VMGAS')
+    expect(chunkItems(groups, 4)).toEqual([
+      ['K7QF', '2M4X', 'HB6R', 'TZ3N'],
+      ['PW5C', 'YL7D', 'JQ2V', 'MGAS'],
+    ])
+    expect(chunkItems(['a', 'b', 'c'], 2)).toEqual([['a', 'b'], ['c']])
+    expect(chunkItems([], 4)).toEqual([])
+  })
+})
+
+describe('기기 이름', () => {
+  it('"브라우저 · 운영체제" — 모르면 "알 수 없는 브라우저"', () => {
+    expect(deviceLabel({ browser: 'Edge', os: 'Windows' })).toBe('Edge · Windows')
+    expect(deviceLabel({ browser: 'Safari', os: null })).toBe('Safari')
+    expect(deviceLabel({ browser: null, os: 'Android' })).toBe('알 수 없는 브라우저 · Android')
+    expect(deviceLabel(null)).toBe('알 수 없는 브라우저')
+  })
+
+  it('휴대폰 아이콘은 iOS · Android — 모르면 PC', () => {
+    expect(isMobileDevice({ browser: 'Safari', os: 'iOS' })).toBe(true)
+    expect(isMobileDevice({ browser: 'Samsung Internet', os: 'Android' })).toBe(true)
+    expect(isMobileDevice({ browser: 'Chrome', os: 'macOS' })).toBe(false)
+    expect(isMobileDevice(null)).toBe(false)
+  })
+})
+
+describe('2단계 인증 상태 글', () => {
+  it('꺼짐 · 켜짐 — 웹메일에서 켠 때가 있으면 "2026년 10월 31일부터"', () => {
+    expect(twoFactorStateLabel({ isEnabled: false, enabledAt: null })).toBe('꺼짐')
+    expect(twoFactorStateLabel({ isEnabled: true, enabledAt: null })).toBe('켜짐')
+    expect(twoFactorStateLabel({ isEnabled: true, enabledAt: '2026-10-31T03:00:00Z' })).toBe('켜짐 — 2026년 10월 31일부터')
+  })
+})
+
+describe('앱 비밀번호 이름', () => {
+  const existing: AppPassword[] = [
+    { id: 'a', name: '회사 PC 아웃룩', createdAt: '2026-10-27T00:00:00Z', lastUsed: null },
+  ]
+
+  it('앞뒤 공백을 지운 값으로 — 비었는지 · 40자를 넘는지 · 이미 있는 이름인지', () => {
+    expect(appPasswordNameProblem('   ', existing)).toBe('empty')
+    expect(appPasswordNameProblem('가'.repeat(41), existing)).toBe('tooLong')
+    expect(appPasswordNameProblem(` ${'가'.repeat(40)} `, existing)).toBeNull()
+    expect(appPasswordNameProblem('  회사 PC 아웃룩 ', existing)).toBe('duplicate')
+    expect(appPasswordNameProblem('휴대폰 메일 앱', existing)).toBeNull()
+  })
+
+  it('개수 글 "3 / 5개"', () => {
+    expect(appPasswordCountText(3, 5)).toBe('3 / 5개')
+  })
+
+  it('마지막 사용 — "오늘 오전 9:12 · IMAP · 211.186.95.252", 쓰지 않았으면 null', () => {
+    const at = '2026-10-31T00:12:00Z'
+    expect(appPasswordLastUsedText({ at, method: 'imap', ip: '211.186.95.252' }, NOW)).toBe(
+      `${formatRelativeDayTime(at, new Date(NOW))} · IMAP · 211.186.95.252`,
+    )
+    expect(appPasswordLastUsedText({ at, method: 'smtp', ip: null }, NOW)).toBe(
+      `${formatRelativeDayTime(at, new Date(NOW))} · SMTP`,
+    )
+    expect(appPasswordLastUsedText(null, NOW)).toBeNull()
+  })
+})
+
+describe('로그인 기록', () => {
+  it('방식 — 웹메일 · 메일 프로그램 · IMAP · 메일 프로그램 · SMTP', () => {
+    expect(loginMethodLabel('webmail')).toBe('웹메일')
+    expect(loginMethodLabel('imap')).toBe('메일 프로그램 · IMAP')
+    expect(loginMethodLabel('smtp')).toBe('메일 프로그램 · SMTP')
+  })
+
+  it('앱 비밀번호로 들어왔으면 방식 아래 줄에 그 이름 (지운 뒤에도 그 이름)', () => {
+    expect(loginAppPasswordLabel(event({ method: 'imap', appPassword: { id: 'b', name: '회사 PC 아웃룩' } }))).toBe(
+      '앱 비밀번호 ‘회사 PC 아웃룩’',
+    )
+    expect(loginAppPasswordLabel(event({ method: 'imap' }))).toBeNull()
+  })
+
+  it('기기 — 웹메일은 브라우저 · 운영체제, 메일 프로그램은 모른다(null)', () => {
+    expect(loginDeviceLabel(event({}))).toBe('Chrome · Windows')
+    expect(loginDeviceLabel(event({ device: null }))).toBe('알 수 없는 브라우저')
+    expect(loginDeviceLabel(event({ method: 'smtp', device: null }))).toBeNull()
+  })
+
+  it('결과 글 다섯 가지 — 실패는 isFailure', () => {
+    expect(loginResultLabel(event({}))).toEqual({ label: '성공', isFailure: false })
+    expect(loginResultLabel(event({ isTwoFactor: true }))).toEqual({ label: '성공 · 2단계 인증', isFailure: false })
+    expect(loginResultLabel(event({ isSuccess: false, failureReason: 'wrongPassword' }))).toEqual({
+      label: '실패 — 비밀번호 틀림',
+      isFailure: true,
+    })
+    expect(loginResultLabel(event({ isSuccess: false, failureReason: 'wrongCode' }))).toEqual({
+      label: '실패 — 코드 틀림',
+      isFailure: true,
+    })
+    expect(loginResultLabel(event({ isSuccess: false, failureReason: 'appPasswordRequired' }))).toEqual({
+      label: '실패 — 앱 비밀번호 필요',
+      isFailure: true,
+    })
+    // 모르는 까닭 — 「실패」만
+    expect(loginResultLabel(event({ isSuccess: false, failureReason: null }))).toEqual({ label: '실패', isFailure: true })
+  })
+})
+
+describe('다른 곳 모두 로그아웃', () => {
+  it('지금 이 브라우저를 뺀 세션 · 확인 창 글은 이름을 세 곳까지, 넘으면 "외 n곳"', () => {
+    const sessions = [
+      session({ id: 'now', isCurrent: true, device: { browser: 'Chrome', os: 'Windows' } }),
+      session({ id: 'a', device: { browser: 'Edge', os: 'Windows' } }),
+      session({ id: 'b', device: { browser: 'Safari', os: 'iOS' } }),
+    ]
+    const others = otherSessions(sessions)
+    expect(others.map((item) => item.id)).toEqual(['a', 'b'])
+    expect(endOtherSessionsMessage(others)).toBe(
+      '이 브라우저를 뺀 2곳(Edge · Windows, Safari · iOS)의 웹메일 로그인을 끊습니다. 끊긴 곳은 다음 동작에서 바로 로그인 화면으로 돌아갑니다.',
+    )
+
+    const many = [
+      ...others,
+      session({ id: 'c', device: { browser: 'Firefox', os: 'Linux' } }),
+      session({ id: 'd', device: null }),
+      session({ id: 'e', device: null }),
+    ]
+    expect(endOtherSessionsMessage(many)).toBe(
+      '이 브라우저를 뺀 5곳(Edge · Windows, Safari · iOS, Firefox · Linux 외 2곳)의 웹메일 로그인을 끊습니다. 끊긴 곳은 다음 동작에서 바로 로그인 화면으로 돌아갑니다.',
+    )
+  })
+
+  it('지금 이 브라우저 줄이 없으면(서버가 이 세션을 알아보지 못함) 이 브라우저도 로그아웃된다는 글', () => {
+    const unknown = [session({ id: 'a', device: { browser: 'Edge', os: 'Windows' } }), session({ id: 'b', device: null })]
+
+    expect(endOtherSessionsMessage(unknown, true)).toBe(
+      '이 브라우저를 알아보지 못해 이 브라우저를 포함한 2곳(Edge · Windows, 알 수 없는 브라우저)의 웹메일 로그인을 끊습니다. 이 브라우저도 로그아웃되어 로그인 화면으로 돌아갑니다.',
+    )
+  })
+})
diff --git a/frontend/src/shared/utils/account-security.ts b/frontend/src/shared/utils/account-security.ts
new file mode 100644
index 0000000..fba5fe5
--- /dev/null
+++ b/frontend/src/shared/utils/account-security.ts
@@ -0,0 +1,172 @@
+// 계정 보안 화면의 순수 함수 — 계약 5절 "계정 보안 — 12단계" · 디자인 README "12단계 — 계정 보안"
+// 인증 앱 코드 칸 다듬기 · 4자씩 끊어 보이기 · 기기 이름 · 앱 비밀번호 이름 검사 · 로그인 기록의 방식 · 결과 글
+
+import {
+  APP_PASSWORD_NAME_MAX_LENGTH,
+  APP_PASSWORD_TEXT,
+  END_OTHER_SESSIONS_NAME_LIMIT,
+  END_OTHER_SESSIONS_TEXT,
+  LOGIN_HISTORY_TEXT,
+  OTP_CODE_LENGTH,
+  TWO_FACTOR_TEXT,
+} from '@/shared/constants/account-security'
+import type {
+  AppPassword,
+  AppPasswordLastUsed,
+  AuthSession,
+  LoginDevice,
+  LoginEvent,
+  LoginMethod,
+  MailClientProtocol,
+  TwoFactorStatus,
+} from '@/shared/types/account-security'
+import { formatCount, formatLongDate, formatRelativeDayTime } from '@/shared/utils/format'
+
+const NON_DIGITS = /\D/g
+const COMPLETE_OTP = new RegExp(`^\\d{${OTP_CODE_LENGTH}}$`)
+
+/**
+ * 인증 앱 코드 칸에 들어온 글을 다듬는다 — 숫자만 남기고 6자리에서 자른다.
+ * 붙여 넣은 "123 456" · "123-456" 과 전각 숫자(NFKC 로 반각)도 받는다 (계약 5절 "로그인" 클라이언트).
+ * 칸에 maxlength 를 걸지 않는 까닭: 브라우저가 붙여 넣은 글을 먼저 잘라 "123 45" 만 들어온다
+ */
+export function normalizeOtpInput(raw: string): string {
+  return raw.normalize('NFKC').replace(NON_DIGITS, '').slice(0, OTP_CODE_LENGTH)
+}
+
+/** 숫자 6자리를 다 넣었는가 — 서버도 같은 모양만 받는다(아니면 400 VAL_001) */
+export function isCompleteOtp(code: string): boolean {
+  return COMPLETE_OTP.test(code)
+}
+
+/**
+ * 글을 size 글자씩 끊는다 — 2단계 인증 키 · 앱 비밀번호를 4자씩 떨어뜨려 보인다.
+ * 띄어쓰기를 넣지 않고 조각으로만 나눈다 — 화면은 조각 사이를 여백으로 벌리므로, 골라 복사해도 원래 값 그대로다
+ */
+export function groupCharacters(value: string, size = 4): string[] {
+  const groups: string[] = []
+  for (let start = 0; start < value.length; start += size) groups.push(value.slice(start, start + size))
+  return groups
+}
+
+/** 조각을 size 개씩 줄로 묶는다 — 2단계 인증 키를 일부러 두 줄(한 줄에 4묶음)로 그린다 */
+export function chunkItems<T>(items: readonly T[], size: number): T[][] {
+  const lines: T[][] = []
+  for (let start = 0; start < items.length; start += size) lines.push(items.slice(start, start + size))
+  return lines
+}
+
+/** 브라우저 · 운영체제 — "Edge · Windows". 서버가 모르면(null) "알 수 없는 브라우저" */
+export function deviceLabel(device: LoginDevice | null): string {
+  const browser = device?.browser?.trim() || LOGIN_HISTORY_TEXT.unknownBrowser
+  const os = device?.os?.trim()
+  return os ? `${browser} · ${os}` : browser
+}
+
+/** 휴대폰 아이콘을 쓸 운영체제 — 서버의 짧은 이름 (계약 5절 "로그인된 브라우저") */
+const MOBILE_OS = new Set(['iOS', 'Android'])
+
+/** 로그인된 브라우저 줄의 아이콘 — 휴대폰 · PC (모르면 PC) */
+export function isMobileDevice(device: LoginDevice | null): boolean {
+  return MOBILE_OS.has(device?.os ?? '')
+}
+
+/** 2단계 인증 상태 글 — 「꺼짐」 · 「켜짐 — 2026년 10월 31일부터」(켠 때를 모르면 「켜짐」) */
+export function twoFactorStateLabel(status: TwoFactorStatus): string {
+  if (!status.isEnabled) return TWO_FACTOR_TEXT.off
+  const day = status.enabledAt ? formatLongDate(status.enabledAt) : ''
+  return day ? TWO_FACTOR_TEXT.onSince(day) : TWO_FACTOR_TEXT.on
+}
+
+export type AppPasswordNameProblem = 'empty' | 'tooLong' | 'duplicate'
+
+/**
+ * 앱 비밀번호 이름 — 앞뒤 공백을 지운 값으로 1~40자(JS 문자열 길이), 이미 있는 이름이 아니어야 한다.
+ * 서버도 같은 규칙으로 400 VAL_001 — 화면이 먼저 보고 칸 아래에 알린다 (계약 5절 "앱 비밀번호")
+ */
+export function appPasswordNameProblem(name: string, existing: readonly AppPassword[]): AppPasswordNameProblem | null {
+  const trimmed = name.trim()
+  if (trimmed === '') return 'empty'
+  if (trimmed.length > APP_PASSWORD_NAME_MAX_LENGTH) return 'tooLong'
+  if (existing.some((item) => item.name.trim() === trimmed)) return 'duplicate'
+  return null
+}
+
+/** 메일 프로그램 방식 — "IMAP" · "SMTP" */
+export function protocolLabel(protocol: MailClientProtocol): string {
+  return protocol.toUpperCase()
+}
+
+/** 앱 비밀번호의 마지막 사용 — "오늘 오전 9:12 · IMAP · 211.186.95.252". 쓰지 않았으면 null(화면은 「아직 쓰지 않음」) */
+export function appPasswordLastUsedText(lastUsed: AppPasswordLastUsed | null, now: number): string | null {
+  if (!lastUsed) return null
+  const parts = [formatRelativeDayTime(lastUsed.at, new Date(now)), protocolLabel(lastUsed.method)]
+  if (lastUsed.ip) parts.push(lastUsed.ip)
+  return parts.filter(Boolean).join(' · ')
+}
+
+const METHOD_LABEL: Readonly<Record<LoginMethod, string>> = {
+  webmail: LOGIN_HISTORY_TEXT.methodWebmail,
+  imap: LOGIN_HISTORY_TEXT.methodImap,
+  smtp: LOGIN_HISTORY_TEXT.methodSmtp,
+}
+
+/** 로그인 기록의 방식 — "웹메일" · "메일 프로그램 · IMAP" · "메일 프로그램 · SMTP" */
+export function loginMethodLabel(method: LoginMethod): string {
+  return METHOD_LABEL[method] ?? method
+}
+
+/** 로그인 기록의 방식 아래 줄 — 앱 비밀번호로 들어왔으면 "앱 비밀번호 ‘회사 PC 아웃룩’" (지운 앱 비밀번호도 그 이름 그대로) */
+export function loginAppPasswordLabel(event: LoginEvent): string | null {
+  return event.appPassword ? LOGIN_HISTORY_TEXT.appPassword(event.appPassword.name) : null
+}
+
+/** 로그인 기록의 기기 — 웹메일은 "Chrome · Windows", 메일 프로그램은 기기를 몰라 null(화면은 「—」) */
+export function loginDeviceLabel(event: LoginEvent): string | null {
+  return event.method === 'webmail' ? deviceLabel(event.device) : null
+}
+
+/**
+ * 로그인 기록의 결과 글 — 「성공」 · 「성공 · 2단계 인증」 · 「실패 — 비밀번호 틀림」 · 「실패 — 코드 틀림」 · 「실패 — 앱 비밀번호 필요」.
+ * 실패는 화면이 빨간 굵은 글자로만 보인다 (뱃지 없음)
+ */
+export function loginResultLabel(event: LoginEvent): { label: string; isFailure: boolean } {
+  if (event.isSuccess) {
+    return { label: event.isTwoFactor ? LOGIN_HISTORY_TEXT.successTwoFactor : LOGIN_HISTORY_TEXT.success, isFailure: false }
+  }
+  switch (event.failureReason) {
+    case 'wrongPassword':
+      return { label: LOGIN_HISTORY_TEXT.failureWrongPassword, isFailure: true }
+    case 'wrongCode':
+      return { label: LOGIN_HISTORY_TEXT.failureWrongCode, isFailure: true }
+    case 'appPasswordRequired':
+      return { label: LOGIN_HISTORY_TEXT.failureAppPasswordRequired, isFailure: true }
+    default:
+      return { label: LOGIN_HISTORY_TEXT.failure, isFailure: true }
+  }
+}
+
+/** [다른 곳 모두 로그아웃]이 끊을 곳 — 지금 이 브라우저를 뺀 세션 */
+export function otherSessions(sessions: readonly AuthSession[]): AuthSession[] {
+  return sessions.filter((session) => !session.isCurrent)
+}
+
+/**
+ * [다른 곳 모두 로그아웃] 확인 창 글 — "이 브라우저를 뺀 2곳(Edge · Windows, Safari · iOS)의 …".
+ * 이름은 세 곳까지 늘어놓고 넘으면 "외 n곳".
+ * 지금 이 브라우저 줄이 없으면(includesThisBrowser — 서버가 이 세션을 알아보지 못해 모두 끊는다) 이 브라우저도 로그아웃된다는 글
+ */
+export function endOtherSessionsMessage(others: readonly AuthSession[], includesThisBrowser = false): string {
+  const count = others.length
+  const names = others.slice(0, END_OTHER_SESSIONS_NAME_LIMIT).map((session) => deviceLabel(session.device))
+  const rest = count - names.length
+  const listed = rest > 0 ? `${names.join(', ')} ${END_OTHER_SESSIONS_TEXT.moreNames(formatCount(rest))}` : names.join(', ')
+  return includesThisBrowser
+    ? END_OTHER_SESSIONS_TEXT.messageAll(formatCount(count), listed)
+    : END_OTHER_SESSIONS_TEXT.message(formatCount(count), listed)
+}
+
+/** 앱 비밀번호 개수 글 — "3 / 5개" */
+export function appPasswordCountText(count: number, max: number): string {
+  return APP_PASSWORD_TEXT.count(formatCount(count), formatCount(max))
+}
diff --git a/frontend/src/shared/utils/format.ts b/frontend/src/shared/utils/format.ts
index b29d835..6855e8b 100644
--- a/frontend/src/shared/utils/format.ts
+++ b/frontend/src/shared/utils/format.ts
@@ -313,6 +313,13 @@ export function formatBlockedDay(value: string, now: Date = new Date(), timeZone
   }).format(date)
 }
 
+/** 연도까지 쓴 날 (디자인 원본 SettingsTwoFactor: "켜짐 — 2026년 10월 31일부터") */
+export function formatLongDate(value: string, timeZone?: string): string {
+  const date = parseDate(value)
+  if (!date) return ''
+  return new Intl.DateTimeFormat('ko-KR', { timeZone, year: 'numeric', month: 'long', day: 'numeric' }).format(date)
+}
+
 /** 문의 코드로 보여 줄 traceId 앞자리 수 (디자인 원본 States: "문의 코드 3f1c0a2e") */
 export const TRACE_CODE_LENGTH = 8
 
diff --git a/frontend/src/shared/utils/qr-code.spec.ts b/frontend/src/shared/utils/qr-code.spec.ts
new file mode 100644
index 0000000..ee21e2c
--- /dev/null
+++ b/frontend/src/shared/utils/qr-code.spec.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from 'vitest'
+import { encode } from 'uqr'
+
+import { qrModuleRuns, type QrModules } from './qr-code'
+
+// QR 코드 칸 — 2단계 인증 켜기 창 (계약 5절 "2단계 인증" — QR 은 화면이 otpauthUrl 로 그린다)
+
+const OTPAUTH_URL =
+  'otpauth://totp/ARA%20SYSTEM:ara.kim%40arasystem.it.kr?secret=JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP&issuer=ARA%20SYSTEM&algorithm=SHA1&digits=6&period=30'
+
+/** 이어진 덩이를 다시 칸 표로 */
+function matrixOf({ size, runs }: QrModules): boolean[][] {
+  const matrix = Array.from({ length: size }, () => Array.from({ length: size }, () => false))
+  for (const run of runs) {
+    for (let x = run.x; x < run.x + run.width; x += 1) {
+      const row = matrix[run.y]
+      if (row) row[x] = true
+    }
+  }
+  return matrix
+}
+
+/** (left, top) 에서 시작하는 7×7 찾기 무늬 — 바깥 테 어둡고 · 그 안 한 줄 밝고 · 가운데 3×3 어둡다 */
+function hasFinderPattern(matrix: boolean[][], left: number, top: number): boolean {
+  for (let dy = 0; dy < 7; dy += 1) {
+    for (let dx = 0; dx < 7; dx += 1) {
+      const ring = Math.max(Math.abs(dx - 3), Math.abs(dy - 3))
+      const expected = ring !== 2
+      if (matrix[top + dy]?.[left + dx] !== expected) return false
+    }
+  }
+  return true
+}
+
+describe('qrModuleRuns', () => {
+  it('부호기(uqr)의 칸 표와 똑같다 — 어두운 칸을 줄마다 이어진 덩이로 옮겼을 뿐이다', () => {
+    const modules = qrModuleRuns(OTPAUTH_URL)
+    const reference = encode(OTPAUTH_URL, { ecc: 'M', border: 0 })
+
+    expect(modules.size).toBe(reference.size)
+    expect(matrixOf(modules)).toEqual(reference.data)
+  })
+
+  it('한 변은 17 + 4 × 판이고 세 귀퉁이에 찾기 무늬가 있다 (테두리 없이 — 여백은 그리는 쪽이 둔다)', () => {
+    const modules = qrModuleRuns(OTPAUTH_URL)
+    const matrix = matrixOf(modules)
+    const far = modules.size - 7
+
+    expect((modules.size - 17) % 4).toBe(0)
+    // otpauth 주소 150자 남짓 — 오류 정정 M 이면 8판(49칸)
+    expect(modules.size).toBe(49)
+    expect(hasFinderPattern(matrix, 0, 0)).toBe(true)
+    expect(hasFinderPattern(matrix, far, 0)).toBe(true)
+    expect(hasFinderPattern(matrix, 0, far)).toBe(true)
+    expect(hasFinderPattern(matrix, far, far)).toBe(false)
+  })
+
+  it('덩이는 칸 안에 있고 한 줄에서 서로 붙지 않는다 (붙을 수 있으면 한 덩이로 이었다)', () => {
+    const { size, runs } = qrModuleRuns(OTPAUTH_URL)
+    const byRow = new Map<number, { x: number; width: number }[]>()
+    for (const run of runs) {
+      expect(run.width).toBeGreaterThan(0)
+      expect(run.x).toBeGreaterThanOrEqual(0)
+      expect(run.x + run.width).toBeLessThanOrEqual(size)
+      byRow.set(run.y, [...(byRow.get(run.y) ?? []), run])
+    }
+    for (const row of byRow.values()) {
+      for (let index = 1; index < row.length; index += 1) {
+        const previous = row[index - 1]
+        const current = row[index]
+        if (previous && current) expect(current.x).toBeGreaterThan(previous.x + previous.width)
+      }
+    }
+  })
+
+  it('같은 글은 늘 같은 그림이다', () => {
+    expect(qrModuleRuns(OTPAUTH_URL)).toEqual(qrModuleRuns(OTPAUTH_URL))
+    expect(qrModuleRuns(OTPAUTH_URL)).not.toEqual(qrModuleRuns(OTPAUTH_URL.replace('JBSWY3DP', 'KRSXG5CT')))
+  })
+})
diff --git a/frontend/src/shared/utils/qr-code.ts b/frontend/src/shared/utils/qr-code.ts
new file mode 100644
index 0000000..76b7dcc
--- /dev/null
+++ b/frontend/src/shared/utils/qr-code.ts
@@ -0,0 +1,40 @@
+// QR 코드 칸 — 2단계 인증 켜기 창의 QR (계약 5절 "2단계 인증" — QR 은 화면이 otpauthUrl 로 그린다)
+// 부호화는 uqr(MIT · 의존성 없음 — Project Nayuki 의 QR 생성기를 옮긴 것)에 맡기고, 여기서는 그릴 칸만 고른다.
+// 화면(QrCodeImage.vue)은 이 칸을 SVG <rect> 로 v-for 해 그린다 — v-html · 남이 만든 SVG 글을 쓰지 않는다.
+// 비밀이 든 글(otpauthUrl)을 받으므로 로그 · 저장 없이 계산만 한다.
+import { encode } from 'uqr'
+
+/** 오류 정정 단계 — M(약 15% 복구). 화면에 비친 빛 · 모니터 줄무늬에도 읽히고, L 보다 한 판 커질 뿐이다 (otpauth 주소 150자 남짓 — 49칸) */
+const QR_ERROR_CORRECTION = 'M'
+
+/** 한 줄에서 이어진 어두운 칸 — 칸마다 <rect> 를 두지 않고 가로로 이어 그린다 (그릴 요소 수가 절반 아래로) */
+export interface QrRun {
+  x: number
+  y: number
+  width: number
+}
+
+export interface QrModules {
+  /** 한 변의 칸 수 (테두리 없이 — 17 + 4 × 판) */
+  size: number
+  runs: QrRun[]
+}
+
+/** 글을 QR 로 부호화해 어두운 칸을 줄마다 이어진 덩이로 돌려준다 — 바깥 여백(quiet zone)은 그리는 쪽이 둔다 */
+export function qrModuleRuns(text: string): QrModules {
+  const { size, data } = encode(text, { ecc: QR_ERROR_CORRECTION, border: 0 })
+  const runs: QrRun[] = []
+  data.forEach((row, y) => {
+    let x = 0
+    while (x < size) {
+      if (!row[x]) {
+        x += 1
+        continue
+      }
+      const start = x
+      while (x < size && row[x]) x += 1
+      runs.push({ x: start, y, width: x - start })
+    }
+  })
+  return { size, runs }
+}
diff --git a/frontend/src/stores/app-passwords.store.spec.ts b/frontend/src/stores/app-passwords.store.spec.ts
new file mode 100644
index 0000000..667341f
--- /dev/null
+++ b/frontend/src/stores/app-passwords.store.spec.ts
@@ -0,0 +1,79 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+import type { AppPassword } from '@/shared/types/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import { flushPromises, installMockApi, ok, restoreApiAdapter, type MockResult } from '@/test-utils/mock-api'
+import { useAppPasswordsStore } from './app-passwords.store'
+
+// 앱 비밀번호 스토어 — 값은 받지도 두지도 않는다 · 늦게 온 응답 · 세션 세대 (계약 5절 "앱 비밀번호")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const EXISTING: AppPassword = { id: 'a', name: '회사 PC 아웃룩', createdAt: '2026-10-27T00:00:00Z', lastUsed: null }
+const ADDED: AppPassword = { id: 'b', name: '휴대폰 메일 앱', createdAt: '2026-10-31T00:00:00Z', lastUsed: null }
+
+const pageOf = (items: AppPassword[]) => ({ items, pageInfo: { hasNext: false, nextCursor: null, total: items.length } })
+
+describe('app-passwords.store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useAuthStore().markAuthenticated(USER)
+  })
+
+  afterEach(() => {
+    restoreApiAdapter()
+  })
+
+  it('만들기 요청은 보내지 않는다 — 값을 뺀 줄만 add 로 받아 맨 위에 넣는다', async () => {
+    const requests = installMockApi(() => ok(pageOf([EXISTING])))
+    const store = useAppPasswordsStore()
+    await store.load()
+
+    store.add(ADDED)
+
+    expect(store.items.map((item) => item.id)).toEqual(['b', 'a'])
+    expect(requests.map((request) => request.method)).toEqual(['GET'])
+    expect('create' in store).toBe(false)
+  })
+
+  it('받는 중인 불러오기는 add 보다 옛것이라 버린다', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    installMockApi(
+      () =>
+        new Promise<MockResult>((resolve) => {
+          release = resolve
+        }),
+    )
+    const store = useAppPasswordsStore()
+    const loading = store.load()
+    await flushPromises()
+
+    store.add(ADDED)
+    release(ok(pageOf([EXISTING])))
+    await loading
+
+    expect(store.items.map((item) => item.id)).toEqual(['b'])
+    expect(store.status).toBe('ready')
+  })
+
+  it('지우는 사이 세션 세대가 바뀌었으면 목록에 쓰지 않는다', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    installMockApi((request) =>
+      request.method === 'GET'
+        ? ok(pageOf([EXISTING]))
+        : new Promise<MockResult>((resolve) => {
+            release = resolve
+          }),
+    )
+    const store = useAppPasswordsStore()
+    await store.load()
+
+    const removing = store.remove('a')
+    await flushPromises()
+    useAuthStore().startSession(USER)
+    release(ok(null))
+    await removing
+
+    expect(store.items.map((item) => item.id)).toEqual(['a'])
+  })
+})
diff --git a/frontend/src/stores/app-passwords.store.ts b/frontend/src/stores/app-passwords.store.ts
new file mode 100644
index 0000000..577f614
--- /dev/null
+++ b/frontend/src/stores/app-passwords.store.ts
@@ -0,0 +1,97 @@
+import { computed, ref, watch } from 'vue'
+import { defineStore } from 'pinia'
+
+import { toApiError, type ApiError } from '@/composables/useApi'
+import { useAccountSecurity } from '@/composables/useAccountSecurity'
+import { APP_PASSWORD_MAX } from '@/shared/constants/account-security'
+import type { AppPassword } from '@/shared/types/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import type { LoadStatus } from '@/stores/mail.store'
+
+// 앱 비밀번호 스토어 — 계약 5절 "앱 비밀번호" (12단계 — 엔진 상한 5개)
+// - 설정 › 앱 비밀번호에 들어올 때마다 새로 받는다(load) — 다른 탭에서 만들었거나, 비밀번호를 바꿔 모두 지워졌을 수 있다. 오류는 화면이 직접 그린다
+// - 만들기 요청은 여기서 보내지 않는다 — 값(password)이 든 응답이 개발 도구(Pinia 타임라인)에 남지 않게, 화면이 보내고 값을 뺀 줄만 add 로 넣는다
+//   (값은 결과 창의 화면 메모리에만 — 창을 닫으면 지운다)
+// - 지우기는 응답을 받은 뒤 줄을 뺀다(이미 없어도 200). 실패는 예외가 그대로 올라간다(알림은 인터셉터)
+// - 세션이 바뀐 뒤(로그아웃 · 다른 계정 — reset) 늦게 온 응답은 쓰지 않는다: 불러오기는 순번(seq), 지우기는 세션 세대(authStore.generation).
+//   add 는 부르는 쪽이 세션 세대를 본 뒤에 부른다
+export const useAppPasswordsStore = defineStore('app-passwords', () => {
+  const api = useAccountSecurity()
+  const authStore = useAuthStore()
+
+  const items = ref<AppPassword[]>([])
+  const status = ref<LoadStatus>('idle')
+  const error = ref<ApiError | null>(null)
+  /** 상한까지 만들었다 — [만들기]를 막는다 */
+  const isFull = computed<boolean>(() => items.value.length >= APP_PASSWORD_MAX)
+
+  let seq = 0
+
+  /** 새로 받는다 — 실패하면 알리지 않고 상태에 담는다 (화면이 사전 문구 + [다시 시도]) */
+  async function load(): Promise<void> {
+    seq += 1
+    const current = seq
+    status.value = 'loading'
+    error.value = null
+    try {
+      const page = await api.listAppPasswords({ silent: true })
+      if (current !== seq) return
+      items.value = page.items
+      status.value = 'ready'
+    } catch (caught) {
+      if (current !== seq) return
+      status.value = 'error'
+      error.value = toApiError(caught)
+    }
+  }
+
+  /**
+   * 화면을 그대로 둔 채 다시 받는다 — 만들기가 상한(409 AUTH_009 — 그사이 다른 창에서 채웠다)에 걸렸을 때 개수를 맞춘다.
+   * 실패하면 알리지 않고 받아 둔 목록을 둔다
+   */
+  async function refresh(): Promise<void> {
+    seq += 1
+    const current = seq
+    try {
+      const page = await api.listAppPasswords({ silent: true })
+      if (current !== seq) return
+      items.value = page.items
+      status.value = 'ready'
+      error.value = null
+    } catch {
+      // 받아 둔 목록을 둔다 — 다음에 들어올 때 새로 받는다
+    }
+  }
+
+  /** 만든 줄(값을 뺀 것)을 맨 위에 넣는다 — 받는 중인 불러오기는 이것보다 옛것일 수 있어 버린다 */
+  function add(item: AppPassword): void {
+    seq += 1
+    items.value = [item, ...items.value.filter((existing) => existing.id !== item.id)]
+    status.value = 'ready'
+    error.value = null
+  }
+
+  /** 지우기 — 응답을 받은 뒤 줄을 뺀다. 기다리는 사이 세션이 바뀌었으면 목록에는 쓰지 않는다 */
+  async function remove(id: string): Promise<void> {
+    const session = authStore.generation
+    await api.deleteAppPassword(id)
+    if (authStore.generation !== session) return
+    seq += 1
+    items.value = items.value.filter((item) => item.id !== id)
+  }
+
+  function reset() {
+    seq += 1
+    items.value = []
+    status.value = 'idle'
+    error.value = null
+  }
+
+  // 로그아웃 · 다른 계정 로그인 — 이전 사용자의 목록이 남지 않게
+  watch(
+    () => authStore.user?.email ?? null,
+    () => reset(),
+  )
+
+  return { items, status, error, isFull, load, refresh, add, remove, reset }
+})
diff --git a/frontend/src/stores/login-history.store.spec.ts b/frontend/src/stores/login-history.store.spec.ts
new file mode 100644
index 0000000..6eace7f
--- /dev/null
+++ b/frontend/src/stores/login-history.store.spec.ts
@@ -0,0 +1,84 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+import type { AuthSession } from '@/shared/types/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import { useToastStore } from '@/stores/toast.store'
+import { fail, flushPromises, installMockApi, ok, restoreApiAdapter, type MockResult } from '@/test-utils/mock-api'
+import { useLoginHistoryStore } from './login-history.store'
+
+// 로그인 기록 스토어 — 늦게 온 응답 · 세션 세대 (계약 5절 "로그인된 브라우저" · "로그인 기록")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+
+function session(id: string, isCurrent = false): AuthSession {
+  return { id, createdAt: '2026-10-31T00:00:00Z', lastActiveAt: '2026-10-31T00:00:00Z', ip: null, device: null, isCurrent }
+}
+
+const pageOf = <T>(items: T[]) => ({ items, pageInfo: { hasNext: false, nextCursor: null, total: items.length } })
+
+describe('login-history.store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useAuthStore().markAuthenticated(USER)
+  })
+
+  afterEach(() => {
+    useToastStore().clear()
+    restoreApiAdapter()
+  })
+
+  it('세션을 끊는 사이 세션 세대가 바뀌었으면(같은 직원이 다시 로그인) 목록에 쓰지 않는다', async () => {
+    let release: (result: MockResult) => void = () => undefined
+    installMockApi((request) =>
+      request.method === 'GET'
+        ? ok(pageOf([session('now', true), session('other')]))
+        : new Promise<MockResult>((resolve) => {
+            release = resolve
+          }),
+    )
+    const store = useLoginHistoryStore()
+    await store.loadSessions()
+
+    const ending = store.endSession('other')
+    await flushPromises()
+    useAuthStore().startSession(USER)
+    release(ok(null))
+    await ending
+
+    expect(store.sessions.map((item) => item.id)).toEqual(['now', 'other'])
+  })
+
+  it('끊기의 실패(장애)는 그대로 올라간다 — 이미 끝난 세션(404)만 끊긴 것으로 본다', async () => {
+    let reply: MockResult = fail(503, 'SYS_001')
+    installMockApi((request) => (request.method === 'GET' ? ok(pageOf([session('now', true), session('other')])) : reply))
+    const store = useLoginHistoryStore()
+    await store.loadSessions()
+
+    await expect(store.endSession('other')).rejects.toMatchObject({ code: 'SYS_001' })
+    expect(store.sessions).toHaveLength(2)
+
+    reply = fail(404, 'RES_001')
+    await store.endSession('other')
+    expect(store.sessions.map((item) => item.id)).toEqual(['now'])
+    // 404 는 알리지 않는다 (장애는 인터셉터가 한 번 알렸다)
+    expect(useToastStore().toasts.map((toast) => toast.message)).toHaveLength(1)
+  })
+
+  it('로그아웃 · 다른 직원이면 받아 둔 기록을 지운다', async () => {
+    installMockApi(() => ok(pageOf([session('now', true)])))
+    const store = useLoginHistoryStore()
+    await store.loadSessions()
+    await store.loadEvents()
+    store.setFilter('failures')
+    await flushPromises()
+
+    useAuthStore().clearAuth()
+    await flushPromises()
+
+    expect(store.sessions).toEqual([])
+    expect(store.sessionsStatus).toBe('idle')
+    expect(store.events).toEqual([])
+    expect(store.eventsFilter).toBe('all')
+  })
+})
diff --git a/frontend/src/stores/login-history.store.ts b/frontend/src/stores/login-history.store.ts
new file mode 100644
index 0000000..ed002ac
--- /dev/null
+++ b/frontend/src/stores/login-history.store.ts
@@ -0,0 +1,213 @@
+import { computed, ref, shallowRef, watch } from 'vue'
+import { defineStore } from 'pinia'
+
+import { toApiError, type ApiError } from '@/composables/useApi'
+import { useAccountSecurity } from '@/composables/useAccountSecurity'
+import type { AuthSession, LoginEvent, LoginEventQuery } from '@/shared/types/account-security'
+import { DEFAULT_PAGE_SIZE, type PageInfo } from '@/shared/types/pagination'
+import { useAuthStore } from '@/stores/auth.store'
+import type { LoadStatus } from '@/stores/mail.store'
+
+/** 최근 로그인의 보기 — 전체 · 실패만 */
+export type LoginEventFilter = 'all' | 'failures'
+
+// 로그인 기록 스토어 — 계약 5절 "로그인된 브라우저" · "로그인 기록" (12단계)
+// - 설정 › 로그인 기록에 들어올 때마다 둘 다 새로 받는다(loadSessions · loadEvents). 오류는 묶음마다 화면이 직접 그린다(사전 문구 + [다시 시도])
+// - 로그인된 브라우저: 줄의 [로그아웃]은 묻지 않고 바로 끊고(이미 끝난 세션 404 RES_001 도 끊긴 것과 같다) 줄을 뺀다.
+//   [다른 곳 모두 로그아웃]은 이 요청의 세션만 남긴다 — 지금 세션 줄만 남긴다
+// - 최근 로그인: 20개씩 [더 보기](커서). [전체 · 실패만]을 바꾸면 그 보기로 처음부터 다시 받는다 — 받는 동안은 지난 목록을 그대로 두고(busy)
+//   다 받으면 바꾼다. 보이는 목록의 보기는 loadedFilter(머리 글 "실패 n번" · 빈 상태가 이것을 본다)
+// - 세션이 바뀐 뒤(로그아웃 · 다른 계정 — reset) 늦게 온 응답은 쓰지 않는다: 불러오기는 순번(seq), 끊기는 세션 세대(authStore.generation)
+export const useLoginHistoryStore = defineStore('login-history', () => {
+  const api = useAccountSecurity()
+  const authStore = useAuthStore()
+
+  // ── 로그인된 브라우저 ─────────────
+  const sessions = ref<AuthSession[]>([])
+  const sessionsStatus = ref<LoadStatus>('idle')
+  const sessionsError = ref<ApiError | null>(null)
+  let sessionsSeq = 0
+
+  async function loadSessions(): Promise<void> {
+    sessionsSeq += 1
+    const current = sessionsSeq
+    sessionsStatus.value = 'loading'
+    sessionsError.value = null
+    try {
+      const page = await api.listAuthSessions({ silent: true })
+      if (current !== sessionsSeq) return
+      sessions.value = page.items
+      sessionsStatus.value = 'ready'
+    } catch (caught) {
+      if (current !== sessionsSeq) return
+      sessionsStatus.value = 'error'
+      sessionsError.value = toApiError(caught)
+    }
+  }
+
+  /**
+   * 세션 하나 끊기 — 이미 끝났거나 없는 세션(404 RES_001)도 끊긴 것과 같다(알리지 않는다).
+   * 그 밖의 실패는 예외가 그대로 올라간다(알림은 인터셉터). 기다리는 사이 세션이 바뀌었으면 목록에는 쓰지 않는다
+   */
+  async function endSession(id: string): Promise<void> {
+    const session = authStore.generation
+    try {
+      await api.endAuthSession(id, { silent: ['RES_001'] })
+    } catch (caught) {
+      if (toApiError(caught).code !== 'RES_001') throw caught
+    }
+    if (authStore.generation !== session) return
+    sessionsSeq += 1
+    sessions.value = sessions.value.filter((item) => item.id !== id)
+  }
+
+  /**
+   * 다른 곳 모두 로그아웃 — 끊은 수와, 이 브라우저까지 끊겼을 수 있는지를 돌려준다.
+   * - 지금 세션 줄이 있으면 그 줄만 남긴다.
+   * - 없으면(서버가 이 요청의 세션을 몰라 모두 끊는다 — 계약 5절) 빈 목록을 두지 않고 다시 받는다 — 이 브라우저도 끊겼으면
+   *   그 요청이 401 → 갱신 실패 → 세션 만료 창으로 이어지고, 끊기지 않았으면 남은 줄을 그린다
+   */
+  async function endOtherSessions(): Promise<{ ended: number; includedThisBrowser: boolean }> {
+    const session = authStore.generation
+    const hadCurrent = sessions.value.some((item) => item.isCurrent)
+    const result = await api.endOtherAuthSessions()
+    const outcome = { ended: result.ended, includedThisBrowser: !hadCurrent }
+    if (authStore.generation !== session) return outcome
+    if (hadCurrent) {
+      sessionsSeq += 1
+      sessions.value = sessions.value.filter((item) => item.isCurrent)
+    } else {
+      void loadSessions()
+    }
+    return outcome
+  }
+
+  // ── 최근 로그인 ─────────────
+  const events = ref<LoginEvent[]>([])
+  const eventsPageInfo = shallowRef<PageInfo | null>(null)
+  /** 고른 보기 — 전환 단추가 보인다 */
+  const eventsFilter = ref<LoginEventFilter>('all')
+  /** 지금 보이는 목록의 보기 — 받는 동안은 고른 보기와 다를 수 있다 */
+  const loadedFilter = ref<LoginEventFilter>('all')
+  const eventsStatus = ref<LoadStatus>('idle')
+  const eventsError = ref<ApiError | null>(null)
+  /** 보기를 바꿔 다시 받는 중 — 지난 목록은 그대로 둔다 */
+  const eventsBusy = ref<boolean>(false)
+  const loadingMore = ref<boolean>(false)
+  let eventsSeq = 0
+
+  function eventQuery(filter: LoginEventFilter, cursor?: string): LoginEventQuery {
+    return {
+      limit: DEFAULT_PAGE_SIZE,
+      ...(cursor ? { cursor } : {}),
+      ...(filter === 'failures' ? { isSuccess: false } : {}),
+    }
+  }
+
+  /** 고른 보기로 처음부터 받는다 — 목록이 있으면 그대로 둔 채(busy), 없으면 자리만 */
+  async function loadEvents(): Promise<void> {
+    eventsSeq += 1
+    const current = eventsSeq
+    const filter = eventsFilter.value
+    loadingMore.value = false
+    if (eventsStatus.value === 'ready') eventsBusy.value = true
+    else eventsStatus.value = 'loading'
+    eventsError.value = null
+    try {
+      const page = await api.listLoginEvents(eventQuery(filter), { silent: true })
+      if (current !== eventsSeq) return
+      events.value = page.items
+      eventsPageInfo.value = page.pageInfo
+      loadedFilter.value = filter
+      eventsStatus.value = 'ready'
+    } catch (caught) {
+      if (current !== eventsSeq) return
+      eventsStatus.value = 'error'
+      eventsError.value = toApiError(caught)
+    } finally {
+      if (current === eventsSeq) eventsBusy.value = false
+    }
+  }
+
+  /** [전체 · 실패만] — 바뀌었을 때만 다시 받는다 */
+  function setFilter(filter: LoginEventFilter): void {
+    if (eventsFilter.value === filter) return
+    eventsFilter.value = filter
+    void loadEvents()
+  }
+
+  /** [더 보기] — 보이는 목록의 보기로 이어 받는다. 실패는 인터셉터가 알린다(받아 둔 목록은 그대로) */
+  async function loadMoreEvents(): Promise<void> {
+    const cursor = eventsPageInfo.value?.nextCursor
+    if (loadingMore.value || eventsBusy.value || !cursor) return
+    const current = eventsSeq
+    loadingMore.value = true
+    try {
+      const page = await api.listLoginEvents(eventQuery(loadedFilter.value, cursor))
+      if (current !== eventsSeq) return
+      const known = new Set(events.value.map((event) => event.id))
+      events.value = [...events.value, ...page.items.filter((event) => !known.has(event.id))]
+      eventsPageInfo.value = page.pageInfo
+    } catch {
+      // 인터셉터가 알렸다
+    } finally {
+      if (current === eventsSeq) loadingMore.value = false
+    }
+  }
+
+  const hasMoreEvents = computed<boolean>(() => eventsPageInfo.value?.hasNext === true)
+
+  /** 화면에 들어올 때 — 지난번 목록을 그리지 않고 둘 다 새로 받는다. 보기는 「전체」부터 */
+  function loadPage(): void {
+    eventsFilter.value = 'all'
+    eventsStatus.value = 'idle'
+    eventsBusy.value = false
+    void loadSessions()
+    void loadEvents()
+  }
+
+  function reset() {
+    sessionsSeq += 1
+    eventsSeq += 1
+    sessions.value = []
+    sessionsStatus.value = 'idle'
+    sessionsError.value = null
+    events.value = []
+    eventsPageInfo.value = null
+    eventsFilter.value = 'all'
+    loadedFilter.value = 'all'
+    eventsStatus.value = 'idle'
+    eventsError.value = null
+    eventsBusy.value = false
+    loadingMore.value = false
+  }
+
+  // 로그아웃 · 다른 계정 로그인 — 이전 사용자의 기록이 남지 않게
+  watch(
+    () => authStore.user?.email ?? null,
+    () => reset(),
+  )
+
+  return {
+    sessions,
+    sessionsStatus,
+    sessionsError,
+    loadSessions,
+    endSession,
+    endOtherSessions,
+    events,
+    eventsPageInfo,
+    eventsFilter,
+    loadedFilter,
+    eventsStatus,
+    eventsError,
+    eventsBusy,
+    loadingMore,
+    hasMoreEvents,
+    loadEvents,
+    setFilter,
+    loadMoreEvents,
+    loadPage,
+    reset,
+  }
+})
diff --git a/frontend/src/stores/two-factor.store.spec.ts b/frontend/src/stores/two-factor.store.spec.ts
new file mode 100644
index 0000000..7249ca3
--- /dev/null
+++ b/frontend/src/stores/two-factor.store.spec.ts
@@ -0,0 +1,73 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+import type { TwoFactorStatus } from '@/shared/types/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import { fail, flushPromises, installMockApi, ok, restoreApiAdapter, type MockResult } from '@/test-utils/mock-api'
+import { useTwoFactorStore } from './two-factor.store'
+
+// 2단계 인증 상태 스토어 — 늦게 온 응답 · 화면을 그대로 둔 다시 받기 (계약 5절 "2단계 인증")
+
+const USER = { email: 'ara.kim@arasystem.it.kr', name: '김아라' }
+const OFF: TwoFactorStatus = { isEnabled: false, enabledAt: null }
+const ON: TwoFactorStatus = { isEnabled: true, enabledAt: '2026-10-31T00:12:00.000Z' }
+
+describe('two-factor.store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    useAuthStore().markAuthenticated(USER)
+  })
+
+  afterEach(() => {
+    restoreApiAdapter()
+  })
+
+  it('켠 결과(apply)가 먼저 오면 그 전에 시작한 불러오기(꺼짐)는 버린다', async () => {
+    let releaseLoad: (result: MockResult) => void = () => undefined
+    installMockApi(
+      () =>
+        new Promise<MockResult>((resolve) => {
+          releaseLoad = resolve
+        }),
+    )
+    const store = useTwoFactorStore()
+
+    const loading = store.load()
+    await flushPromises()
+    store.apply(ON)
+    releaseLoad(ok(OFF))
+    await loading
+
+    expect(store.twoFactor).toEqual(ON)
+    expect(store.isEnabled).toBe(true)
+  })
+
+  it('켜기 · 끄기 요청은 스토어가 보내지 않는다 — 지금 비밀번호 · 코드가 액션 인자로 남지 않게 (창이 보내고 결과만 apply)', () => {
+    const store = useTwoFactorStore()
+
+    expect('activate' in store).toBe(false)
+    expect('deactivate' in store).toBe(false)
+  })
+
+  it('refresh 는 화면을 그대로 둔다 — 받는 동안 status 를 바꾸지 않고, 실패하면 받아 둔 상태를 둔다', async () => {
+    let reply: MockResult | Promise<MockResult> = ok(OFF)
+    installMockApi(() => reply)
+    const store = useTwoFactorStore()
+    await store.load()
+
+    let release: (result: MockResult) => void = () => undefined
+    reply = new Promise<MockResult>((resolve) => {
+      release = resolve
+    })
+    const refreshing = store.refresh()
+    await flushPromises()
+    expect(store.status).toBe('ready')
+    release(fail(503, 'MAIL_001'))
+    await expect(refreshing).resolves.toBeNull()
+    expect(store.twoFactor).toEqual(OFF)
+
+    reply = ok(ON)
+    await expect(store.refresh()).resolves.toEqual(ON)
+    expect(store.isEnabled).toBe(true)
+  })
+})
diff --git a/frontend/src/stores/two-factor.store.ts b/frontend/src/stores/two-factor.store.ts
new file mode 100644
index 0000000..b515170
--- /dev/null
+++ b/frontend/src/stores/two-factor.store.ts
@@ -0,0 +1,89 @@
+import { computed, ref, shallowRef, watch } from 'vue'
+import { defineStore } from 'pinia'
+
+import { toApiError, type ApiError } from '@/composables/useApi'
+import { useAccountSecurity } from '@/composables/useAccountSecurity'
+import type { TwoFactorStatus } from '@/shared/types/account-security'
+import { useAuthStore } from '@/stores/auth.store'
+import type { LoadStatus } from '@/stores/mail.store'
+
+// 2단계 인증 상태 스토어 — 계약 5절 "2단계 인증" (12단계)
+// - 설정 › 2단계 인증 · 비밀번호 화면이 들어올 때마다 새로 받는다(load) — 다른 탭 · 엔진 관리 화면에서 바꿨을 수 있다. 오류는 화면이 직접 그린다
+//   (비밀번호 화면은 못 받아도 그대로 쓸 수 있다 — 2단계를 켰는데 코드 없이 보내면 서버가 AUTH_007 로 알려 와 다시 받는다)
+// - 켜기 · 끄기 요청은 여기서 보내지 않는다 — 지금 비밀번호 · 코드가 든 액션 인자가 개발 도구(Pinia 타임라인)에 남지 않게, 창이 보내고
+//   비밀 없는 결과(GET 과 같은 모양)만 apply 로 넘긴다. 등록(키 · otpauth 주소)도 여기 두지 않는다 — 켜기 창의 화면 메모리에만
+// - 세션이 바뀐 뒤(로그아웃 · 다른 계정 — reset) 늦게 온 응답은 쓰지 않는다: 불러오기는 순번(seq), 켜기 · 끄기 결과는 창이 세션 세대(authStore.generation)로 가린다
+export const useTwoFactorStore = defineStore('two-factor', () => {
+  const api = useAccountSecurity()
+  const authStore = useAuthStore()
+
+  const twoFactor = shallowRef<TwoFactorStatus | null>(null)
+  const status = ref<LoadStatus>('idle')
+  const error = ref<ApiError | null>(null)
+  /** 켜져 있다 — 모르면 false */
+  const isEnabled = computed<boolean>(() => twoFactor.value?.isEnabled === true)
+
+  let seq = 0
+
+  /** 새로 받는다 — 실패하면 null (알림 없이 상태에 담는다 — 지난 값은 둔다) */
+  async function load(): Promise<TwoFactorStatus | null> {
+    seq += 1
+    const current = seq
+    status.value = 'loading'
+    error.value = null
+    try {
+      const result = await api.getTwoFactor({ silent: true })
+      if (current !== seq) return twoFactor.value
+      twoFactor.value = result
+      status.value = 'ready'
+      return result
+    } catch (caught) {
+      if (current !== seq) return twoFactor.value
+      status.value = 'error'
+      error.value = toApiError(caught)
+      return null
+    }
+  }
+
+  /**
+   * 화면을 그대로 둔 채 다시 받는다 — 켜기 창의 처음부터 다시(AUTH_008 — 그사이 다른 곳에서 켰는지) · 비밀번호 화면의 AUTH_007.
+   * 실패하면 알리지 않고 null (받아 둔 상태는 그대로)
+   */
+  async function refresh(): Promise<TwoFactorStatus | null> {
+    seq += 1
+    const current = seq
+    try {
+      const result = await api.getTwoFactor({ silent: true })
+      if (current !== seq) return twoFactor.value
+      twoFactor.value = result
+      status.value = 'ready'
+      error.value = null
+      return result
+    } catch {
+      return null
+    }
+  }
+
+  /** 서버가 알려 준 상태(켜기 · 끄기의 응답)를 그대로 둔다 — 받는 중인 불러오기는 이것보다 옛것일 수 있어 버린다 */
+  function apply(result: TwoFactorStatus) {
+    seq += 1
+    twoFactor.value = result
+    status.value = 'ready'
+    error.value = null
+  }
+
+  function reset() {
+    seq += 1
+    twoFactor.value = null
+    status.value = 'idle'
+    error.value = null
+  }
+
+  // 로그아웃 · 다른 계정 로그인 — 이전 사용자의 상태가 남지 않게
+  watch(
+    () => authStore.user?.email ?? null,
+    () => reset(),
+  )
+
+  return { twoFactor, status, error, isEnabled, load, refresh, apply, reset }
+})
diff --git a/frontend/src/test-utils/router.ts b/frontend/src/test-utils/router.ts
index 0a68f6d..b56b9a9 100644
--- a/frontend/src/test-utils/router.ts
+++ b/frontend/src/test-utils/router.ts
@@ -51,6 +51,25 @@ export function createTestRouter(): Router {
         component: Empty,
         meta: { requiresAuth: true },
       },
+      // 12단계 — 계정 보안 (router/routes.ts 와 같은 이름 · 모양)
+      {
+        path: '/settings/account/two-factor',
+        name: 'settings-account-two-factor',
+        component: Empty,
+        meta: { requiresAuth: true },
+      },
+      {
+        path: '/settings/account/app-passwords',
+        name: 'settings-account-app-passwords',
+        component: Empty,
+        meta: { requiresAuth: true },
+      },
+      {
+        path: '/settings/account/login-history',
+        name: 'settings-account-login-history',
+        component: Empty,
+        meta: { requiresAuth: true },
+      },
       {
         path: '/settings/mail/signature',
         name: 'settings-mail-signature',