refactor: 레이아웃 개선 — 30:70 비율, 사이드바 접힘, 정보 패널 drawer

- 사이드바: 데스크톱도 기본 접힘, ☰로 오버레이, localStorage 상태 기억
- 상단 30%: 문서 목록 + 검색 (문서 미선택 시 100%)
- 하단 70%: 뷰어 전체 너비 (우측 패널 제거)
- 정보 패널: ℹ 버튼 → 우측 전체 높이 drawer (ESC/외부 클릭 닫기)
- nav 높이 축소, 폰트 크기 최적화

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

frontend/src/routes/documents/+page.svelte

@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
   import { addToast } from '$lib/stores/ui';
+  import { Info } from 'lucide-svelte';
   import DocumentCard from '$lib/components/DocumentCard.svelte';
   import PreviewPanel from '$lib/components/PreviewPanel.svelte';
   import DocumentViewer from '$lib/components/DocumentViewer.svelte';
@@ -14,14 +15,14 @@
   let searchMode = $state('hybrid');
   let searchResults = $state(null);
   let selectedDoc = $state(null);
+  let infoPanelOpen = $state(false);
   let debounceTimer;
 
-  // URL params → filter (source of truth)
+  // URL params → filter
   let currentPage = $derived(parseInt($page.url.searchParams.get('page') || '1'));
   let filterDomain = $derived($page.url.searchParams.get('domain') || '');
   let filterSubGroup = $derived($page.url.searchParams.get('sub_group') || '');
 
-  // URL 변경 시 데이터 재로딩
   $effect(() => {
     const _p = currentPage;
     const _d = filterDomain;
@@ -32,6 +33,7 @@
     searchQuery = urlQ;
     searchMode = urlMode;
     selectedDoc = null;
+    infoPanelOpen = false;
 
     if (urlQ) {
       doSearch(urlQ, urlMode);
@@ -117,43 +119,62 @@
     selectedDoc = selectedDoc?.id === doc.id ? null : doc;
   }
 
+  function handleKeydown(e) {
+    if (e.key === 'Escape' && infoPanelOpen) {
+      infoPanelOpen = false;
+    }
+  }
+
   let totalPages = $derived(Math.ceil(total / 20));
   let items = $derived(searchResults || documents);
   let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery);
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <div class="flex flex-col h-full">
-  <!-- 상단: 문서 목록 -->
-  <div class="overflow-y-auto p-4 lg:p-6 {selectedDoc ? 'h-[45%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}">
-    <!-- 검색바 -->
-    <div class="flex gap-2 mb-4">
+  <!-- 상단: 문서 목록 (30% when viewer active, 100% otherwise) -->
+  <div class="overflow-y-auto px-4 py-3 {selectedDoc ? 'h-[30%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}">
+    <!-- 검색바 + 정보 버튼 -->
+    <div class="flex gap-2 mb-3">
       <input
         data-search-input
         type="text"
         bind:value={searchQuery}
         oninput={handleSearchInput}
         placeholder="검색어 입력... (/ 키로 포커스)"
-        class="flex-1 px-4 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm focus:border-[var(--accent)] outline-none"
+        class="flex-1 px-3 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm focus:border-[var(--accent)] outline-none"
       />
       <select
         bind:value={searchMode}
         onchange={() => { if (searchQuery) handleSearchInput(); }}
-        class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
+        class="px-2 py-1.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-xs"
       >
         <option value="hybrid">하이브리드</option>
         <option value="fts">전문검색</option>
         <option value="trgm">부분매칭</option>
         <option value="vector">의미검색</option>
       </select>
+      {#if selectedDoc}
+        <button
+          onclick={() => infoPanelOpen = !infoPanelOpen}
+          class="p-1.5 rounded-lg border border-[var(--border)] hover:border-[var(--accent)] text-[var(--text-dim)] hover:text-[var(--accent)] transition-colors
+            {infoPanelOpen ? 'bg-[var(--accent)]/10 border-[var(--accent)] text-[var(--accent)]' : ''}"
+          aria-label="문서 정보"
+          title="문서 정보"
+        >
+          <Info size={16} />
+        </button>
+      {/if}
     </div>
 
     <!-- 결과 헤더 -->
     {#if !loading}
-      <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center justify-between mb-2">
         <div class="flex items-center gap-2">
-          <span class="text-xs text-[var(--text-dim)]">{total}건</span>
+          <span class="text-[10px] text-[var(--text-dim)]">{total}건</span>
           {#if filterDomain}
-            <span class="text-xs text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded">
+            <span class="text-[10px] text-[var(--accent)] bg-[var(--accent)]/10 px-1.5 py-0.5 rounded">
               {filterDomain.replace('Knowledge/', '')}{filterSubGroup ? ` / ${filterSubGroup}` : ''}
             </span>
           {/if}
@@ -161,9 +182,9 @@
         {#if hasActiveFilters}
           <button
             onclick={clearAllFilters}
-            class="text-xs text-[var(--text-dim)] hover:text-[var(--text)] px-2 py-1 rounded border border-[var(--border)]"
+            class="text-[10px] text-[var(--text-dim)] hover:text-[var(--text)] px-1.5 py-0.5 rounded border border-[var(--border)]"
           >
-            필터 초기화
+            초기화
           </button>
         {/if}
       </div>
@@ -171,27 +192,25 @@
 
     <!-- 결과 -->
     {#if loading}
-      <div class="space-y-2">
-        {#each Array(6) as _}
-          <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-16"></div>
+      <div class="space-y-1.5">
+        {#each Array(5) as _}
+          <div class="bg-[var(--surface)] rounded-lg p-3 border border-[var(--border)] animate-pulse h-14"></div>
         {/each}
       </div>
     {:else if items.length === 0}
-      <div class="text-center py-16 text-[var(--text-dim)]">
+      <div class="text-center py-12 text-[var(--text-dim)]">
         {#if searchQuery}
-          <p class="text-base mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
-          <p class="text-sm mb-4">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
-          <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+          <p class="text-sm mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
+          <button onclick={clearAllFilters} class="text-xs text-[var(--accent)] hover:underline">필터 초기화</button>
         {:else if hasActiveFilters}
-          <p class="text-base mb-2">이 분류에 문서가 없습니다</p>
-          <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+          <p class="text-sm mb-2">이 분류에 문서가 없습니다</p>
+          <button onclick={clearAllFilters} class="text-xs text-[var(--accent)] hover:underline">필터 초기화</button>
         {:else}
-          <p class="text-base mb-2">등록된 문서가 없습니다</p>
-          <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
+          <p class="text-sm">등록된 문서가 없습니다</p>
         {/if}
       </div>
     {:else}
-      <div class="space-y-1.5">
+      <div class="space-y-1">
         {#each items as doc}
           <DocumentCard
             {doc}
@@ -202,13 +221,12 @@
         {/each}
       </div>
 
-      <!-- 페이지네이션 -->
       {#if !searchResults && totalPages > 1}
-        <div class="flex justify-center gap-1.5 mt-6">
+        <div class="flex justify-center gap-1 mt-4">
           {#each Array(totalPages) as _, i}
             <button
               onclick={() => changePage(i + 1)}
-              class="px-3 py-1 rounded text-sm transition-colors
+              class="px-2.5 py-0.5 rounded text-xs transition-colors
                 {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
             >
               {i + 1}
@@ -219,17 +237,24 @@
     {/if}
   </div>
 
-  <!-- 하단: 뷰어 + 정보 패널 (문서 선택 시) -->
+  <!-- 하단: 뷰어 (70%, 전체 너비) -->
   {#if selectedDoc}
-    <div class="flex flex-1 min-h-0">
-      <!-- 문서 뷰어 (좌측, 넓게) -->
-      <div class="flex-1 min-w-0">
-        <DocumentViewer doc={selectedDoc} />
-      </div>
-      <!-- 정보 패널 (우측) -->
-      <div class="hidden lg:block shrink-0" style="width: 300px">
-        <PreviewPanel doc={selectedDoc} onclose={() => selectedDoc = null} />
-      </div>
+    <div class="flex-1 min-h-0">
+      <DocumentViewer doc={selectedDoc} />
     </div>
   {/if}
 </div>
+
+<!-- 정보 패널: 우측 전체 높이 drawer -->
+{#if infoPanelOpen && selectedDoc}
+  <div class="fixed inset-0 z-40">
+    <button
+      onclick={() => infoPanelOpen = false}
+      class="absolute inset-0 bg-black/40"
+      aria-label="정보 패널 닫기"
+    ></button>
+    <div class="absolute right-0 top-0 bottom-0 z-50 w-[320px] shadow-xl">
+      <PreviewPanel doc={selectedDoc} onclose={() => infoPanelOpen = false} />
+    </div>
+  </div>
+{/if}