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/scripts/check-tokens.sh

@@ -0,0 +1,66 @@
+#!/usr/bin/env bash
+# Tailwind 임의값 토큰 우회 차단 — plan 5대 원칙 #1.
+#
+# 새 코드에서 bg-[var(--*)] / text-[var(--*)] / border-[var(--*)] 등을 grep으로 차단.
+# @theme 토큰을 우회해 임의값을 작성하면 이 스크립트가 fail.
+#
+# 예외:
+# - frontend/src/lib/components/ui/  (프리미티브 정의 자체는 토큰 매핑이 필요할 수 있음)
+# - frontend/src/app.css              (@theme/:root 선언이므로 grep 대상 아님)
+#
+# 사용:
+#   npm run -C frontend lint:tokens
+#
+# 향후 pre-commit hook에 포함:
+#   .git/hooks/pre-commit → npm run -C frontend lint:tokens
+
+set -e
+
+# 스크립트 위치 기준으로 frontend 루트로 이동
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+FRONTEND_DIR="$(dirname "$SCRIPT_DIR")"
+cd "$FRONTEND_DIR"
+
+PATTERNS=(
+  'bg-\[var\(--'
+  'text-\[var\(--'
+  'border-\[var\(--'
+  'ring-\[var\(--'
+  'fill-\[var\(--'
+  'stroke-\[var\(--'
+)
+
+EXIT=0
+TOTAL=0
+
+for p in "${PATTERNS[@]}"; do
+  HITS=$(grep -rEn \
+    --include='*.svelte' \
+    --include='*.ts' \
+    --include='*.js' \
+    --exclude-dir=node_modules \
+    --exclude-dir=.svelte-kit \
+    --exclude-dir=ui \
+    "$p" src 2>/dev/null || true)
+  if [ -n "$HITS" ]; then
+    COUNT=$(echo "$HITS" | wc -l | tr -d ' ')
+    TOTAL=$((TOTAL + COUNT))
+    echo ""
+    echo "❌ 금지 패턴 발견: $p  ($COUNT 건)"
+    echo "$HITS" | head -20
+    if [ "$COUNT" -gt 20 ]; then
+      echo "... (이하 $((COUNT - 20)) 건 생략)"
+    fi
+    EXIT=1
+  fi
+done
+
+if [ $EXIT -eq 0 ]; then
+  echo "✅ 토큰 우회 패턴 없음."
+else
+  echo ""
+  echo "총 $TOTAL 건의 토큰 우회 패턴이 발견되었습니다."
+  echo "→ @theme 유틸리티 (bg-surface, text-dim, border-default 등)로 교체하세요."
+fi
+
+exit $EXIT