diff --git a/frontend/src/lib/components/DocumentViewer.svelte b/frontend/src/lib/components/DocumentViewer.svelte
index 457cac9..a0387d1 100644
--- a/frontend/src/lib/components/DocumentViewer.svelte
+++ b/frontend/src/lib/components/DocumentViewer.svelte
@@ -1,6 +1,6 @@
 <script>
   import { api, getAccessToken } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
   import { ExternalLink, Save, RefreshCw } from 'lucide-svelte';
diff --git a/frontend/src/lib/components/PreviewPanel.svelte b/frontend/src/lib/components/PreviewPanel.svelte
index 5b085d1..2739fb3 100644
--- a/frontend/src/lib/components/PreviewPanel.svelte
+++ b/frontend/src/lib/components/PreviewPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import { X, ExternalLink, Plus, Save, Trash2 } from 'lucide-svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import FormatIcon from './FormatIcon.svelte';
   import TagPill from './TagPill.svelte';
 
diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
index 9234736..7229380 100644
--- a/frontend/src/lib/components/UploadDropzone.svelte
+++ b/frontend/src/lib/components/UploadDropzone.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { Upload } from 'lucide-svelte';
 
   let { onupload = () => {} } = $props();
diff --git a/frontend/src/lib/stores/ui.ts b/frontend/src/lib/stores/toast.ts
similarity index 63%
rename from frontend/src/lib/stores/ui.ts
rename to frontend/src/lib/stores/toast.ts
index 0261fcd..dfdc267 100644
--- a/frontend/src/lib/stores/ui.ts
+++ b/frontend/src/lib/stores/toast.ts
@@ -1,10 +1,7 @@
 import { writable } from 'svelte/store';
 
-export const sidebarOpen = writable(true);
-export const selectedDocId = writable<number | null>(null);
-
-// Toast 시스템
-interface Toast {
+// Toast 시스템 — UI state(drawer/modal)와 분리된 알림 전용 store
+export interface Toast {
   id: number;
   type: 'success' | 'error' | 'warning' | 'info';
   message: string;
@@ -15,7 +12,7 @@ export const toasts = writable<Toast[]>([]);
 
 export function addToast(type: Toast['type'], message: string, duration = 5000) {
   const id = ++toastId;
-  toasts.update(t => [...t, { id, type, message }]);
+  toasts.update((t) => [...t, { id, type, message }]);
   if (duration > 0) {
     setTimeout(() => removeToast(id), duration);
   }
@@ -23,5 +20,5 @@ export function addToast(type: Toast['type'], message: string, duration = 5000)
 }
 
 export function removeToast(id: number) {
-  toasts.update(t => t.filter(toast => toast.id !== id));
+  toasts.update((t) => t.filter((toast) => toast.id !== id));
 }
diff --git a/frontend/src/lib/stores/uiState.svelte.ts b/frontend/src/lib/stores/uiState.svelte.ts
new file mode 100644
index 0000000..2cdc75d
--- /dev/null
+++ b/frontend/src/lib/stores/uiState.svelte.ts
@@ -0,0 +1,57 @@
+// 중앙 UI layer 상태 — drawer는 단일 slot, modal은 stack.
+// drawer/modal/toast 동시 오픈 시 focus/scroll/Esc 충돌을 차단하기 위한 single source.
+// (toast는 별도 store. drawer가 persistent inline panel(예: xl+ meta rail)일 때는
+//  여기 시스템 밖이다 — 그저 레이아웃의 일부.)
+
+type Drawer = { id: 'sidebar' | 'meta' } | null;
+type Modal = { id: string };
+
+class UIState {
+  drawer = $state<Drawer>(null);
+  modalStack = $state<Modal[]>([]);
+
+  // ── Drawer (단일 slot) ──────────────────────────────
+  openDrawer(id: 'sidebar' | 'meta') {
+    // 새 drawer 열면 이전 drawer는 자동으로 사라진다 (단일 slot)
+    this.drawer = { id };
+  }
+  closeDrawer() {
+    this.drawer = null;
+  }
+  isDrawerOpen(id: 'sidebar' | 'meta') {
+    return this.drawer?.id === id;
+  }
+
+  // ── Modal (stack — confirm 위에 nested 가능) ─────────
+  openModal(id: string) {
+    this.modalStack = [...this.modalStack, { id }];
+  }
+  closeTopModal() {
+    this.modalStack = this.modalStack.slice(0, -1);
+  }
+  closeModal(id: string) {
+    this.modalStack = this.modalStack.filter((m) => m.id !== id);
+  }
+  isModalOpen(id: string) {
+    return this.modalStack.some((m) => m.id === id);
+  }
+  // 특정 modal의 stack 인덱스 (z-index 계산용; 없으면 -1)
+  modalIndex(id: string) {
+    return this.modalStack.findIndex((m) => m.id === id);
+  }
+  get topModal() {
+    return this.modalStack[this.modalStack.length - 1] ?? null;
+  }
+
+  // ── 글로벌 Esc 핸들러 ────────────────────────────────
+  // 우선순위: 가장 위 modal → drawer
+  handleEscape() {
+    if (this.modalStack.length > 0) {
+      this.closeTopModal();
+    } else if (this.drawer) {
+      this.closeDrawer();
+    }
+  }
+}
+
+export const ui = new UIState();
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 05862c2..271db07 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { isAuthenticated, user, tryRefresh, logout } from '$lib/stores/auth';
-  import { toasts, removeToast } from '$lib/stores/ui';
+  import { toasts, removeToast } from '$lib/stores/toast';
   import Sidebar from '$lib/components/Sidebar.svelte';
   import '../app.css';
 
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ea2f3a6..752d522 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
 
   let dashboard = null;
   let loading = true;
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index 4c95469..ee0e7f2 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { Info } from 'lucide-svelte';
   import { List, LayoutGrid } from 'lucide-svelte';
   import DocumentCard from '$lib/components/DocumentCard.svelte';
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 13704d3..c362af3 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { api, getAccessToken } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
   import TagPill from '$lib/components/TagPill.svelte';
diff --git a/frontend/src/routes/inbox/+page.svelte b/frontend/src/routes/inbox/+page.svelte
index ebf9d8f..0c74b1c 100644
--- a/frontend/src/routes/inbox/+page.svelte
+++ b/frontend/src/routes/inbox/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
 
   let documents = [];
   let loading = true;
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index be295d4..ada0cc9 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto } from '$app/navigation';
   import { login } from '$lib/stores/auth';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
 
   let username = '';
   let password = '';
diff --git a/frontend/src/routes/news/+page.svelte b/frontend/src/routes/news/+page.svelte
index f05f79b..2289e77 100644
--- a/frontend/src/routes/news/+page.svelte
+++ b/frontend/src/routes/news/+page.svelte
@@ -3,7 +3,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
 
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 000ba48..dd61600 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import { api } from '$lib/api';
-  import { addToast } from '$lib/stores/ui';
+  import { addToast } from '$lib/stores/toast';
   import { user } from '$lib/stores/auth';
 
   let currentPassword = '';