feat: Phase 1A — 사이드바 트리 네비게이션 + domain/sub_group 필터

- Sidebar.svelte: /api/documents/tree 기반 domain→sub_group 트리,
  접기/펼치기, active highlight, 모바일 drawer
- documents/+page.svelte: 2-pane 레이아웃, URL params 기반 필터,
  빈 상태 개선, 카드 정보 밀도 향상 (domain 경로, 태그, origin 배지)
- documents.py: sub_group 필터 파라미터 추가
- app.css: domain 7색 + sidebar CSS 변수

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

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

@@ -1,33 +1,54 @@
 <script>
-  import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import { api } from '$lib/api';
   import { addToast } from '$lib/stores/ui';
+  import Sidebar from '$lib/components/Sidebar.svelte';
 
-  let documents = [];
-  let total = 0;
-  let loading = true;
-  let searchQuery = '';
-  let searchMode = 'hybrid';
-  let currentPage = 1;
-  let searchResults = null;
+  let documents = $state([]);
+  let total = $state(0);
+  let loading = $state(true);
+  let searchQuery = $state('');
+  let searchMode = $state('hybrid');
+  let searchResults = $state(null);
   let debounceTimer;
+  let sidebarOpen = $state(true);
 
-  // URL에서 초기 상태 복원
-  onMount(() => {
-    const params = $page.url.searchParams;
-    searchQuery = params.get('q') || '';
-    searchMode = params.get('mode') || 'hybrid';
-    currentPage = parseInt(params.get('page') || '1');
-    if (searchQuery) doSearch(); else loadDocuments();
+  // URL params → filter (source of truth)
+  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(() => {
+    // derived 값을 읽어서 반응성 트리거
+    const _p = currentPage;
+    const _d = filterDomain;
+    const _s = filterSubGroup;
+    const urlQ = $page.url.searchParams.get('q') || '';
+    const urlMode = $page.url.searchParams.get('mode') || 'hybrid';
+
+    searchQuery = urlQ;
+    searchMode = urlMode;
+
+    if (urlQ) {
+      doSearch(urlQ, urlMode);
+    } else {
+      loadDocuments();
+    }
   });
 
   async function loadDocuments() {
     loading = true;
     searchResults = null;
     try {
-      const data = await api(`/documents/?page=${currentPage}&page_size=20`);
+      const params = new URLSearchParams();
+      params.set('page', String(currentPage));
+      params.set('page_size', '20');
+      if (filterDomain) params.set('domain', filterDomain);
+      if (filterSubGroup) params.set('sub_group', filterSubGroup);
+
+      const data = await api(`/documents/?${params}`);
       documents = data.items;
       total = data.total;
     } catch (err) {
@@ -40,21 +61,31 @@
   function handleSearchInput() {
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => {
+      const params = new URLSearchParams($page.url.searchParams);
+      params.delete('page');
       if (searchQuery.trim()) {
-        currentPage = 1;
-        doSearch();
+        params.set('q', searchQuery.trim());
       } else {
-        loadDocuments();
-        updateUrl();
+        params.delete('q');
       }
+      if (searchMode !== 'hybrid') {
+        params.set('mode', searchMode);
+      } else {
+        params.delete('mode');
+      }
+      // 빈 값 정규화
+      for (const [key, val] of [...params.entries()]) {
+        if (!val) params.delete(key);
+      }
+      const qs = params.toString();
+      goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
     }, 300);
   }
 
-  async function doSearch() {
+  async function doSearch(q, mode) {
     loading = true;
-    updateUrl();
     try {
-      const data = await api(`/search/?q=${encodeURIComponent(searchQuery)}&mode=${searchMode}&limit=50`);
+      const data = await api(`/search/?q=${encodeURIComponent(q)}&mode=${mode}&limit=50`);
       searchResults = data.results;
       total = data.total;
     } catch (err) {
@@ -65,117 +96,197 @@
     }
   }
 
-  function updateUrl() {
-    const params = new URLSearchParams();
-    if (searchQuery) params.set('q', searchQuery);
-    if (searchMode !== 'hybrid') params.set('mode', searchMode);
-    if (currentPage > 1) params.set('page', String(currentPage));
-    const qs = params.toString();
-    goto(`/documents${qs ? '?' + qs : ''}`, { replaceState: true, noScroll: true });
-  }
-
   function changePage(p) {
-    currentPage = p;
-    if (searchQuery) doSearch(); else loadDocuments();
-    updateUrl();
+    const params = new URLSearchParams($page.url.searchParams);
+    if (p > 1) {
+      params.set('page', String(p));
+    } else {
+      params.delete('page');
+    }
+    const qs = params.toString();
+    goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
   }
 
-  $: totalPages = Math.ceil(total / 20);
-  $: items = searchResults || documents;
+  function clearAllFilters() {
+    goto('/documents', { noScroll: true });
+    searchQuery = '';
+  }
+
+  let totalPages = $derived(Math.ceil(total / 20));
+  let items = $derived(searchResults || documents);
+  let hasActiveFilters = $derived(!!filterDomain || !!filterSubGroup || !!searchQuery);
+
+  // 활성 필터 라벨
+  let filterLabel = $derived(() => {
+    const parts = [];
+    if (filterDomain) parts.push(filterDomain.replace('Knowledge/', ''));
+    if (filterSubGroup) parts.push(filterSubGroup);
+    return parts.join(' / ');
+  });
 </script>
 
-<div class="min-h-screen">
-  <nav class="flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--surface)]">
-    <div class="flex items-center gap-4">
+<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"
+      >
+        <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>
-      <span>문서</span>
+      <span class="text-sm">문서</span>
+      {#if filterLabel()}
+        <span class="text-[var(--text-dim)]">/</span>
+        <span class="text-sm text-[var(--accent)]">{filterLabel()}</span>
+      {/if}
+    </div>
+    <div class="flex items-center gap-3">
+      {#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)]"
+        >
+          필터 초기화
+        </button>
+      {/if}
+      <a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
     </div>
-    <a href="/inbox" class="text-sm text-[var(--text-dim)] hover:text-[var(--text)]">Inbox</a>
   </nav>
 
-  <div class="max-w-6xl mx-auto p-6">
-    <!-- 검색바 -->
-    <div class="flex gap-2 mb-6">
-      <input
-        data-search-input
-        type="text"
-        bind:value={searchQuery}
-        oninput={handleSearchInput}
-        placeholder="검색어 입력... (/ 키로 포커스)"
-        class="flex-1 px-4 py-2.5 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] focus:border-[var(--accent)] outline-none"
-      />
-      <select
-        bind:value={searchMode}
-        onchange={() => { if (searchQuery) doSearch(); }}
-        class="px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded-lg text-[var(--text)] text-sm"
-      >
-        <option value="hybrid">하이브리드</option>
-        <option value="fts">전문검색</option>
-        <option value="trgm">부분매칭</option>
-        <option value="vector">의미검색</option>
-      </select>
+  <!-- 메인 영역: sidebar + content -->
+  <div class="flex flex-1 min-h-0">
+    <!-- 사이드바 (데스크톱: 항상 표시, 모바일: drawer) -->
+    <div
+      class="shrink-0 hidden lg:block"
+      style="width: var(--sidebar-w)"
+    >
+      <Sidebar />
     </div>
 
-    <!-- 결과 -->
-    {#if loading}
-      <div class="space-y-3">
-        {#each Array(5) as _}
-          <div class="bg-[var(--surface)] rounded-lg p-4 border border-[var(--border)] animate-pulse h-20"></div>
-        {/each}
+    <!-- 모바일 drawer -->
+    {#if sidebarOpen}
+      <div class="fixed inset-0 z-40 lg:hidden">
+        <!-- overlay -->
+        <button
+          onclick={() => sidebarOpen = false}
+          class="absolute inset-0 bg-black/50"
+          onkeydown={(e) => e.key === 'Escape' && (sidebarOpen = false)}
+        ></button>
+        <!-- drawer -->
+        <div class="absolute left-0 top-0 bottom-0 w-[280px] z-50">
+          <Sidebar />
+        </div>
       </div>
-    {:else if items.length === 0}
-      <div class="text-center py-20 text-[var(--text-dim)]">
-        {#if searchQuery}
-          <p class="text-lg mb-2">'{searchQuery}'에 대한 결과가 없습니다</p>
-          <p class="text-sm">다른 검색어를 시도하거나 검색 모드를 변경해보세요</p>
-        {:else}
-          <p class="text-lg">등록된 문서가 없습니다</p>
-        {/if}
-      </div>
-    {:else}
-      <div class="space-y-2">
-        {#each items as doc}
-          <a
-            href="/documents/{doc.id}"
-            class="flex items-center justify-between p-4 bg-[var(--surface)] border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition-colors"
-          >
-            <div class="flex items-center gap-3 min-w-0">
-              <span class="text-xs px-2 py-0.5 rounded bg-[var(--border)] text-[var(--text-dim)] uppercase shrink-0">{doc.file_format}</span>
-              <div class="min-w-0">
-                <p class="text-sm font-medium truncate">{doc.title || '제목 없음'}</p>
-                {#if doc.ai_summary}
-                  <p class="text-xs text-[var(--text-dim)] truncate mt-0.5">{doc.ai_summary?.slice(0, 100)}</p>
-                {/if}
-              </div>
-            </div>
-            <div class="flex items-center gap-3 shrink-0 ml-4">
-              {#if doc.score !== undefined}
-                <span class="text-xs text-[var(--accent)]">{(doc.score * 100).toFixed(0)}%</span>
-              {/if}
-              <span class="text-xs text-[var(--text-dim)]">{doc.ai_domain || ''}</span>
-            </div>
-          </a>
-        {/each}
+    {/if}
+
+    <!-- 문서 목록 -->
+    <main class="flex-1 overflow-y-auto p-4 lg:p-6">
+      <!-- 검색바 -->
+      <div class="flex gap-2 mb-4">
+        <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"
+        />
+        <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"
+        >
+          <option value="hybrid">하이브리드</option>
+          <option value="fts">전문검색</option>
+          <option value="trgm">부분매칭</option>
+          <option value="vector">의미검색</option>
+        </select>
       </div>
 
-      <!-- 페이지네이션 -->
-      {#if !searchResults && totalPages > 1}
-        <div class="flex justify-center gap-2 mt-6">
-          {#each Array(totalPages) as _, i}
-            <button
-              onclick={() => changePage(i + 1)}
-              class="px-3 py-1 rounded text-sm"
-              class:bg-[var(--accent)]={currentPage === i + 1}
-              class:text-white={currentPage === i + 1}
-              class:bg-[var(--surface)]={currentPage !== i + 1}
-              class:text-[var(--text-dim)]={currentPage !== i + 1}
-            >
-              {i + 1}
-            </button>
-          {/each}
+      <!-- 결과 헤더 -->
+      {#if !loading}
+        <div class="flex items-center justify-between mb-3">
+          <span class="text-xs text-[var(--text-dim)]">{total}건</span>
         </div>
       {/if}
-    {/if}
+
+      <!-- 결과 -->
+      {#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>
+          {/each}
+        </div>
+      {:else if items.length === 0}
+        <div class="text-center py-16 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>
+          {:else if hasActiveFilters}
+            <p class="text-base mb-2">이 분류에 문서가 없습니다</p>
+            <button onclick={clearAllFilters} class="text-sm text-[var(--accent)] hover:underline">필터 초기화</button>
+          {:else}
+            <p class="text-base mb-2">등록된 문서가 없습니다</p>
+            <p class="text-sm">문서를 업로드하거나 Inbox에 추가하세요</p>
+          {/if}
+        </div>
+      {:else}
+        <div class="space-y-1.5">
+          {#each items as doc}
+            <a
+              href="/documents/{doc.id}"
+              class="flex items-center justify-between p-3 bg-[var(--surface)] border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition-colors group"
+            >
+              <div class="flex items-center gap-3 min-w-0">
+                <span class="text-[10px] px-1.5 py-0.5 rounded bg-[var(--border)] text-[var(--text-dim)] uppercase shrink-0 font-mono">{doc.file_format}</span>
+                <div class="min-w-0">
+                  <p class="text-sm font-medium truncate group-hover:text-[var(--accent)]">{doc.title || '제목 없음'}</p>
+                  <div class="flex items-center gap-2 mt-0.5">
+                    {#if doc.ai_domain}
+                      <span class="text-[10px] text-[var(--text-dim)]">{doc.ai_domain.replace('Knowledge/', '')}{doc.ai_sub_group ? ` / ${doc.ai_sub_group}` : ''}</span>
+                    {/if}
+                    {#if doc.ai_summary}
+                      <span class="text-[10px] text-[var(--text-dim)] truncate max-w-xs hidden sm:inline">· {doc.ai_summary?.slice(0, 80)}</span>
+                    {/if}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2 shrink-0 ml-3">
+                {#if doc.ai_tags?.length}
+                  <span class="text-[10px] text-[var(--accent)] hidden md:inline">{doc.ai_tags[0]}</span>
+                {/if}
+                {#if doc.score !== undefined}
+                  <span class="text-[10px] text-[var(--accent)]">{(doc.score * 100).toFixed(0)}%</span>
+                {/if}
+                {#if doc.data_origin}
+                  <span class="text-[10px] px-1.5 py-0.5 rounded {doc.data_origin === 'work' ? 'bg-blue-900/30 text-blue-400' : 'bg-gray-800 text-gray-400'}">{doc.data_origin}</span>
+                {/if}
+              </div>
+            </a>
+          {/each}
+        </div>
+
+        <!-- 페이지네이션 -->
+        {#if !searchResults && totalPages > 1}
+          <div class="flex justify-center gap-1.5 mt-6">
+            {#each Array(totalPages) as _, i}
+              <button
+                onclick={() => changePage(i + 1)}
+                class="px-3 py-1 rounded text-sm transition-colors
+                  {currentPage === i + 1 ? 'bg-[var(--accent)] text-white' : 'bg-[var(--surface)] text-[var(--text-dim)] hover:text-[var(--text)]'}"
+              >
+                {i + 1}
+              </button>
+            {/each}
+          </div>
+        {/if}
+      {/if}
+    </main>
   </div>
 </div>