feat: 2단계 — DEVONthink 스타일 테이블 뷰 + 카드/테이블 토글

- DocumentTable.svelte: 컬럼 정렬(stable sort), domain 색상 바, 포맷 아이콘
- 뷰 모드 토글 버튼 (카드 ↔ 테이블)
- localStorage로 뷰 모드 + 정렬 상태 기억

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

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

@@ -4,11 +4,20 @@
   import { api } from '$lib/api';
   import { addToast } from '$lib/stores/ui';
   import { Info } from 'lucide-svelte';
+  import { List, LayoutGrid } from 'lucide-svelte';
   import DocumentCard from '$lib/components/DocumentCard.svelte';
+  import DocumentTable from '$lib/components/DocumentTable.svelte';
   import PreviewPanel from '$lib/components/PreviewPanel.svelte';
   import DocumentViewer from '$lib/components/DocumentViewer.svelte';
   import UploadDropzone from '$lib/components/UploadDropzone.svelte';
 
+  // 뷰 모드 (localStorage 기억)
+  let viewMode = $state(typeof localStorage !== 'undefined' ? (localStorage.getItem('viewMode') || 'card') : 'card');
+  function toggleViewMode() {
+    viewMode = viewMode === 'card' ? 'table' : 'card';
+    if (typeof localStorage !== 'undefined') localStorage.setItem('viewMode', viewMode);
+  }
+
   let documents = $state([]);
   let total = $state(0);
   let loading = $state(true);
@@ -168,6 +177,18 @@
         <option value="trgm">부분매칭</option>
         <option value="vector">의미검색</option>
       </select>
+      <button
+        onclick={toggleViewMode}
+        class="p-1.5 rounded-lg border border-[var(--border)] hover:border-[var(--accent)] text-[var(--text-dim)] hover:text-[var(--accent)] transition-colors"
+        aria-label="뷰 모드 전환"
+        title={viewMode === 'card' ? '테이블 뷰' : '카드 뷰'}
+      >
+        {#if viewMode === 'card'}
+          <List size={16} />
+        {:else}
+          <LayoutGrid size={16} />
+        {/if}
+      </button>
       {#if selectedDoc}
         <button
           onclick={() => infoPanelOpen = !infoPanelOpen}
@@ -225,16 +246,24 @@
         {/if}
       </div>
     {:else}
-      <div class="space-y-1">
-        {#each items as doc}
-          <DocumentCard
-            {doc}
-            showDomain={!filterDomain}
-            selected={selectedDoc?.id === doc.id}
-            onselect={selectDoc}
-          />
-        {/each}
-      </div>
+      {#if viewMode === 'table'}
+        <DocumentTable
+          {items}
+          selectedId={selectedDoc?.id}
+          onselect={selectDoc}
+        />
+      {:else}
+        <div class="space-y-1">
+          {#each items as doc}
+            <DocumentCard
+              {doc}
+              showDomain={!filterDomain}
+              selected={selectedDoc?.id === doc.id}
+              onselect={selectDoc}
+            />
+          {/each}
+        </div>
+      {/if}
 
       {#if !searchResults && totalPages > 1}
         <div class="flex justify-center gap-1 mt-4">