feat(docs): 관련 문서(유사도 KNN) 엔드포인트+패널 + 법령/지침 splitter

frontend/src/lib/components/RelatedDocs.svelte

@@ -0,0 +1,45 @@
+<script>
+  // 관련 문서 (유사도) — 문서 레벨 임베딩 KNN. 자기완결: docId 받아 /related 조회.
+  import { onMount } from 'svelte';
+  import { api } from '$lib/api';
+
+  let { documentId } = $props();
+  let items = $state([]);
+  let loaded = $state(false);
+
+  const KIND = { law: '법령', guide: '지침', paper: '논문', standard: '표준', incident: '사례' };
+
+  onMount(async () => {
+    try {
+      const r = await api(`/documents/${documentId}/related?limit=6`);
+      items = r?.related ?? [];
+    } catch (e) { /* silent */ }
+    finally { loaded = true; }
+  });
+</script>
+
+{#if items.length}
+  <div class="rel">
+    <div class="lab">관련 문서</div>
+    {#each items as it (it.id)}
+      <a class="ri" href={`/documents/${it.id}`}>
+        <span class="rt">{it.title}</span>
+        <span class="rm">
+          {#if it.material_type && KIND[it.material_type]}<span class="kind">{KIND[it.material_type]}</span>{/if}
+          <span class="rs">{Math.round((it.sim ?? 0) * 100)}</span>
+        </span>
+      </a>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .rel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px; }
+  .lab { font-size: 10.5px; font-weight: 700; color: var(--text-dim); letter-spacing: .4px; margin-bottom: 8px; }
+  .ri { display: flex; align-items: baseline; gap: 8px; padding: 5px 6px; border-radius: 7px; text-decoration: none; }
+  .ri:hover { background: var(--surface-hover, #ecf0e8); }
+  .rt { flex: 1; font-size: 12px; line-height: 1.4; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  .rm { flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
+  .kind { font-size: 9px; font-weight: 700; color: var(--accent-hover, #3d7256); background: #e3efe2; border: 1px solid #cfe3cd; border-radius: 4px; padding: 0 4px; }
+  .rs { font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; color: var(--faint, #9aa090); }
+</style>

frontend/src/routes/documents/[id]/+page.svelte

@@ -16,6 +16,7 @@
   import Skeleton from '$lib/components/ui/Skeleton.svelte';
   import HandwriteCanvas from '$lib/components/HandwriteCanvas.svelte';
   import MarkdownDoc from '$lib/components/MarkdownDoc.svelte';
+  import RelatedDocs from '$lib/components/RelatedDocs.svelte';
   import { renderDocMarkdown } from '$lib/utils/docMarkdown';
   import MarkdownStatusBadge from '$lib/components/MarkdownStatusBadge.svelte';
   import NoteEditor from '$lib/components/editors/NoteEditor.svelte';
@@ -321,6 +322,7 @@
 <!-- ════ 우 슬림 레일 (시안 카드 스타일) ════ -->
 {#snippet rail()}
   <div style="display:flex;flex-direction:column;gap:11px;font-size:14px;">
+    <RelatedDocs documentId={doc.id} />
     {#if doc.ai_tldr || doc.ai_summary}
       <div style="background:#f4f7f1;border:1px solid #dde3d6;border-radius:14px;padding:13px;">
         <div style="font-size:10.5px;font-weight:700;color:#697061;letter-spacing:.4px;margin-bottom:7px;">TL;DR</div>