refactor: 사이드바를 전역 레이아웃으로 이동

- +layout.svelte: 사이드바 + 상단 nav 통합 (로그인/셋업 제외)
- 각 페이지 중복 nav 제거 (dashboard, documents, detail, inbox, settings)
- 모바일 drawer + ESC 닫기 전역 처리

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/routes/+layout.svelte

@@ -3,12 +3,15 @@
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
-  import { isAuthenticated, tryRefresh, logout } from '$lib/stores/auth';
+  import { isAuthenticated, user, tryRefresh, logout } from '$lib/stores/auth';
   import { toasts, removeToast } from '$lib/stores/ui';
+  import Sidebar from '$lib/components/Sidebar.svelte';
   import '../app.css';
 
   const PUBLIC_PATHS = ['/login', '/setup'];
+  const NO_SIDEBAR_PATHS = ['/login', '/setup'];
   let authChecked = false;
+  let sidebarOpen = $state(false);
 
   onMount(async () => {
     if (!$isAuthenticated) {
@@ -23,12 +26,18 @@
     }
   }
 
+  // 사이드바 표시 여부
+  $: showSidebar = $isAuthenticated && !NO_SIDEBAR_PATHS.some(p => $page.url.pathname.startsWith(p));
+
   // 키보드 단축키
   function handleKeydown(e) {
     if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
       e.preventDefault();
       document.querySelector('[data-search-input]')?.focus();
     }
+    if (e.key === 'Escape' && sidebarOpen) {
+      sidebarOpen = false;
+    }
   }
 </script>
 
@@ -39,14 +48,71 @@
     <p class="text-[var(--text-dim)]">로딩 중...</p>
   </div>
 {:else if $isAuthenticated || PUBLIC_PATHS.some(p => $page.url.pathname.startsWith(p))}
-  <slot />
+  {#if showSidebar}
+    <div class="h-screen flex flex-col">
+      <!-- 상단 nav -->
+      <nav class="flex items-center justify-between px-4 py-2.5 border-b border-[var(--border)] bg-[var(--surface)] shrink-0">
+        <div class="flex items-center gap-3">
+          <button
+            onclick={() => sidebarOpen = !sidebarOpen}
+            class="p-1.5 rounded-md hover:bg-[var(--border)] text-[var(--text-dim)] lg:hidden"
+            aria-label="사이드바 토글"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 12h18M3 6h18M3 18h18"/>
+            </svg>
+          </button>
+          <a href="/" class="text-lg font-semibold hover:text-[var(--accent)]">PKM</a>
+          <span class="text-[var(--text-dim)]">/</span>
+          <a href="/documents" class="text-sm hover:text-[var(--accent)]">문서</a>
+        </div>
+        <div class="flex items-center gap-3">
+          <a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
+          <a href="/settings" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">설정</a>
+          <button
+            onclick={() => logout()}
+            class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]"
+          >로그아웃</button>
+        </div>
+      </nav>
+
+      <!-- 메인: sidebar + content -->
+      <div class="flex flex-1 min-h-0">
+        <!-- 데스크톱 사이드바 -->
+        <div class="shrink-0 hidden lg:block" style="width: var(--sidebar-w)">
+          <Sidebar />
+        </div>
+
+        <!-- 모바일 drawer -->
+        {#if sidebarOpen}
+          <div class="fixed inset-0 z-40 lg:hidden">
+            <button
+              onclick={() => sidebarOpen = false}
+              class="absolute inset-0 bg-black/50"
+              aria-label="사이드바 닫기"
+            ></button>
+            <div class="absolute left-0 top-0 bottom-0 w-[280px] z-50">
+              <Sidebar />
+            </div>
+          </div>
+        {/if}
+
+        <!-- 콘텐츠 영역 -->
+        <main class="flex-1 overflow-y-auto">
+          <slot />
+        </main>
+      </div>
+    </div>
+  {:else}
+    <slot />
+  {/if}
 {/if}
 
 <!-- Toast 컨테이너 -->
 <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
   {#each $toasts as toast (toast.id)}
-    <div
-      class="px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 cursor-pointer"
+    <button
+      class="px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 cursor-pointer text-left"
       class:bg-green-900={toast.type === 'success'}
       class:bg-red-900={toast.type === 'error'}
       class:bg-yellow-900={toast.type === 'warning'}
@@ -55,10 +121,9 @@
       class:text-red-200={toast.type === 'error'}
       class:text-yellow-200={toast.type === 'warning'}
       class:text-blue-200={toast.type === 'info'}
-      role="alert"
       onclick={() => removeToast(toast.id)}
     >
       {toast.message}
-    </div>
+    </button>
   {/each}
 </div>