feat: 디자인 시스템 기반 — 유틸 헬퍼 + CI rule + 첫 6개 프리미티브

UX/UI 개편 Phase A-3 / A-4 / A-5. 후속 phase가 곧바로 소비할 수 있도록
디자인 시스템의 코어 자산을 한꺼번에 도입한다.

A-3 — 유틸 헬퍼 (lib/utils/)
- pLimit.ts: 동시 실행 N개 제한 (5대 원칙 #4 — 일괄 PATCH/DELETE에서
  GPU 서버/SSE 부하 방지). 외부 의존성 없음.
- mergeDoc.ts: PATCH/SSE 응답을 로컬 cache에 머지할 때 updated_at으로
  stale 갱신 차단 (5대 원칙 #6 — optimistic update conflict resolution).
  dropDoc 헬퍼 포함.

A-4 — CI 토큰 차단 (5대 원칙 #1)
- scripts/check-tokens.sh: bg-[var(--*)] 등 임의값 토큰 우회 grep 차단.
- npm run lint:tokens 등록.
- 현재 baseline 421건 — A-8 토큰 swap에서 0으로 떨어진 후 pre-commit 강제화.

A-5 — 첫 6개 프리미티브 (lib/components/ui/)
- Button.svelte: variant(primary/secondary/ghost/danger) × size(sm/md),
  loading/disabled, icon 슬롯, href 자동 a 변환, focus-visible ring.
- IconButton.svelte: 정사각형, aria-label 필수, Button과 동일 variant 체계.
- Card.svelte: bg-surface + rounded-card + border-default 패턴 1군데화.
  padded/interactive 옵션, interactive면 button 시맨틱.
- Badge.svelte: 의미적 tone(neutral/success/warning/error/accent) 표시.
  TagPill과 별개 (TagPill은 도메인 prefix 코드 전용).
- Skeleton.svelte: ad-hoc animate-pulse div 통합. w/h/rounded prop.
- EmptyState.svelte: icon + title + description + action slot.

모든 프리미티브는 Svelte 5 runes mode strict (\$props/\$derived/\$bindable),
@theme 토큰만 사용 (bg-surface, text-dim, border-default 등 — bg-[var(--*)] 미사용),
focus-visible ring 통일, slot은 {@render children?.()}로 작성.

svelte-check: 0 errors, 8 warnings (모두 기존 latent 이슈, 새 코드 무관).
build: 1.95s 무경고.

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

frontend/src/lib/components/ui/Button.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  // 공용 Button 프리미티브.
+  // - variant: 시각적 강도 (primary/secondary/ghost/danger)
+  // - size: sm/md
+  // - href가 있으면 <a>로, 없으면 <button>으로 렌더
+  // - icon은 lucide 컴포넌트 참조 (예: import { Trash2 } 후 icon={Trash2})
+  // - loading이면 disabled + 회전 아이콘
+  import { Loader2 } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
+  import type { Component } from 'svelte';
+
+  type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+  type Size = 'sm' | 'md';
+
+  interface Props {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    icon?: Component;
+    iconPosition?: 'left' | 'right';
+    href?: string;
+    target?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    loading = false,
+    disabled = false,
+    type = 'button',
+    icon: Icon,
+    iconPosition = 'left',
+    href,
+    target,
+    onclick,
+    children,
+    class: className = '',
+    ...rest
+  }: Props = $props();
+
+  const variantClass: Record<Variant, string> = {
+    primary: 'bg-accent text-white hover:bg-accent-hover',
+    secondary: 'bg-surface border border-default text-text hover:bg-surface-hover',
+    ghost: 'text-dim hover:bg-surface hover:text-text',
+    danger: 'bg-error/10 text-error border border-error/30 hover:bg-error/20',
+  };
+
+  const sizeClass: Record<Size, string> = {
+    sm: 'h-7 px-2.5 text-xs gap-1.5',
+    md: 'h-9 px-3.5 text-sm gap-2',
+  };
+
+  let iconSize = $derived(size === 'sm' ? 14 : 16);
+
+  let baseClass = $derived(
+    [
+      'inline-flex items-center justify-center rounded-md font-medium',
+      'transition-colors',
+      'focus-visible:ring-2 focus-visible:ring-accent-ring focus-visible:outline-none',
+      'disabled:opacity-50 disabled:cursor-not-allowed',
+      sizeClass[size],
+      variantClass[variant],
+      className,
+    ].join(' ')
+  );
+
+  let isDisabled = $derived(disabled || loading);
+</script>
+
+{#if href}
+  <a
+    {href}
+    {target}
+    class={baseClass}
+    aria-disabled={isDisabled || undefined}
+    tabindex={isDisabled ? -1 : undefined}
+    {...rest}
+  >
+    {#if loading}
+      <Loader2 size={iconSize} class="animate-spin" />
+    {:else if Icon && iconPosition === 'left'}
+      <Icon size={iconSize} />
+    {/if}
+    {@render children?.()}
+    {#if !loading && Icon && iconPosition === 'right'}
+      <Icon size={iconSize} />
+    {/if}
+  </a>
+{:else}
+  <button
+    {type}
+    class={baseClass}
+    disabled={isDisabled}
+    aria-busy={loading || undefined}
+    {onclick}
+    {...rest}
+  >
+    {#if loading}
+      <Loader2 size={iconSize} class="animate-spin" />
+    {:else if Icon && iconPosition === 'left'}
+      <Icon size={iconSize} />
+    {/if}
+    {@render children?.()}
+    {#if !loading && Icon && iconPosition === 'right'}
+      <Icon size={iconSize} />
+    {/if}
+  </button>
+{/if}