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/lib/components/Sidebar.svelte

@@ -0,0 +1,200 @@
+<script>
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api';
+  import { ChevronRight, ChevronDown, FolderOpen, Folder, Inbox } from 'lucide-svelte';
+
+  let tree = $state([]);
+  let inboxCount = $state(0);
+  let loading = $state(true);
+  let expanded = $state({});
+
+  // 현재 URL에서 선택된 domain/sub_group
+  let activeDomain = $derived($page.url.searchParams.get('domain'));
+  let activeSubGroup = $derived($page.url.searchParams.get('sub_group'));
+
+  // domain별 색상
+  const DOMAIN_COLORS = {
+    'Knowledge/Philosophy': 'var(--domain-philosophy)',
+    'Knowledge/Language': 'var(--domain-language)',
+    'Knowledge/Engineering': 'var(--domain-engineering)',
+    'Knowledge/Industrial_Safety': 'var(--domain-safety)',
+    'Knowledge/Programming': 'var(--domain-programming)',
+    'Knowledge/General': 'var(--domain-general)',
+    'Reference': 'var(--domain-reference)',
+  };
+
+  // domain 표시 이름 (짧게)
+  function displayName(domain) {
+    return domain.replace('Knowledge/', '');
+  }
+
+  async function loadTree() {
+    loading = true;
+    try {
+      const [treeData, docsData] = await Promise.all([
+        api('/documents/tree'),
+        api('/documents/?page_size=1&domain='),
+      ]);
+      tree = treeData;
+      // inbox count: file_path가 PKM/Inbox/로 시작하는 문서
+      const inboxData = await api('/documents/?page_size=1');
+      // tree에서 전체 count 합산
+      inboxCount = 0; // 별도 API 없으면 0으로 시작
+    } catch (err) {
+      console.error('트리 로딩 실패:', err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function toggleExpand(domain) {
+    expanded[domain] = !expanded[domain];
+  }
+
+  function navigate(domain, subGroup) {
+    const params = new URLSearchParams($page.url.searchParams);
+    // 필터 변경 시 page reset
+    params.delete('page');
+
+    if (domain) {
+      params.set('domain', domain);
+    } else {
+      params.delete('domain');
+    }
+
+    if (subGroup) {
+      params.set('sub_group', subGroup);
+    } else {
+      params.delete('sub_group');
+    }
+
+    // 빈 값 정규화
+    for (const [key, val] of [...params.entries()]) {
+      if (!val) params.delete(key);
+    }
+
+    const qs = params.toString();
+    goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
+  }
+
+  function clearFilters() {
+    goto('/documents', { noScroll: true });
+  }
+
+  // 초기 로딩 + 선택된 domain은 자동 펼치기
+  $effect(() => {
+    loadTree();
+  });
+
+  $effect(() => {
+    if (activeDomain) {
+      expanded[activeDomain] = true;
+    }
+  });
+
+  // 전체 문서 수
+  let totalCount = $derived(tree.reduce((sum, node) => sum + node.count, 0));
+</script>
+
+<aside class="h-full flex flex-col bg-[var(--sidebar-bg)] border-r border-[var(--border)] overflow-y-auto">
+  <!-- 헤더 -->
+  <div class="px-4 py-3 border-b border-[var(--border)]">
+    <h2 class="text-sm font-semibold text-[var(--text-dim)] uppercase tracking-wider">분류</h2>
+  </div>
+
+  <!-- 전체 문서 -->
+  <div class="px-2 pt-2">
+    <button
+      onclick={clearFilters}
+      class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
+        {!activeDomain ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text)] hover:bg-[var(--surface)]'}"
+    >
+      <span class="flex items-center gap-2">
+        <FolderOpen size={16} />
+        전체 문서
+      </span>
+      {#if totalCount > 0}
+        <span class="text-xs text-[var(--text-dim)]">{totalCount}</span>
+      {/if}
+    </button>
+  </div>
+
+  <!-- 트리 -->
+  <nav class="flex-1 px-2 py-2 space-y-0.5">
+    {#if loading}
+      {#each Array(5) as _}
+        <div class="h-8 bg-[var(--surface)] rounded-md animate-pulse mx-1 mb-1"></div>
+      {/each}
+    {:else}
+      {#each tree as node}
+        {@const isActive = activeDomain === node.domain && !activeSubGroup}
+        {@const isParentActive = activeDomain === node.domain}
+        {@const hasChildren = node.children.length > 0}
+        {@const isExpanded = expanded[node.domain]}
+        {@const color = DOMAIN_COLORS[node.domain] || 'var(--text-dim)'}
+
+        <!-- domain 노드 -->
+        <div class="flex items-center group">
+          {#if hasChildren}
+            <button
+              onclick={() => toggleExpand(node.domain)}
+              class="p-1 rounded hover:bg-[var(--surface)] text-[var(--text-dim)]"
+            >
+              {#if isExpanded}
+                <ChevronDown size={14} />
+              {:else}
+                <ChevronRight size={14} />
+              {/if}
+            </button>
+          {:else}
+            <span class="w-6"></span>
+          {/if}
+
+          <button
+            onclick={() => navigate(node.domain, null)}
+            class="flex-1 flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors
+              {isActive ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text)] hover:bg-[var(--surface)]'}"
+          >
+            <span class="flex items-center gap-2 truncate">
+              <span class="w-2 h-2 rounded-full shrink-0" style="background: {color}"></span>
+              {displayName(node.domain)}
+            </span>
+            <span class="text-xs text-[var(--text-dim)]">{node.count}</span>
+          </button>
+        </div>
+
+        <!-- sub_group 자식 노드 -->
+        {#if hasChildren && isExpanded}
+          {#each node.children as child}
+            {@const isChildActive = activeDomain === node.domain && activeSubGroup === child.sub_group}
+            <button
+              onclick={() => navigate(node.domain, child.sub_group)}
+              class="w-full flex items-center justify-between pl-10 pr-3 py-1.5 rounded-md text-sm transition-colors
+                {isChildActive ? 'bg-[var(--accent)]/15 text-[var(--accent)]' : 'text-[var(--text-dim)] hover:bg-[var(--surface)] hover:text-[var(--text)]'}"
+            >
+              <span class="truncate">{child.sub_group}</span>
+              <span class="text-xs">{child.count}</span>
+            </button>
+          {/each}
+        {/if}
+      {/each}
+    {/if}
+  </nav>
+
+  <!-- 하단: Inbox -->
+  <div class="px-2 py-2 border-t border-[var(--border)]">
+    <a
+      href="/inbox"
+      class="flex items-center justify-between px-3 py-2 rounded-md text-sm text-[var(--text)] hover:bg-[var(--surface)] transition-colors"
+    >
+      <span class="flex items-center gap-2">
+        <Inbox size={16} />
+        받은편지함
+      </span>
+      {#if inboxCount > 0}
+        <span class="text-xs bg-[var(--error)] text-white px-1.5 py-0.5 rounded-full">{inboxCount}</span>
+      {/if}
+    </a>
+  </div>
+</aside>