refactor(design): migrate to Tailwind v4 @theme tokens + accessible focus rings

Surgical design upgrade from Gemini 3.1 Pro audit. No feature changes.

- globals.css: add @theme OKLCH tokens (light + .dark), radius scale,
  Pretendard-first --font-sans stack. KaTeX dark override preserved.
- Button variants: semantic tokens (primary/secondary/destructive/accent)
  replace slate-* + dark: pairs; focus ring ring-1 -> ring-2 with offset.
- DashboardShell: main bg-slate-50/dark:bg-slate-950 -> bg-muted/40.
- ItemCard: rounded-lg -> rounded-xl, semantic bg-card, unified focus ring.
- SkillItemsPanel ItemCard: one-off blue hover -> theme accent + focus-visible.
- SearchBar ClearButton: 44x44 min tap target (WCAG AA).
- SearchResults EmptyResults: dashed border boundary + muted icon.

Audit proposal tracked in plan/gemini-design-upgrade-{prompt,output}.md.

Author: cskwork

apps/web/src/app/globals.css

@@ -2,8 +2,81 @@
 
 @custom-variant dark (&:where(.dark *));
 
-/* Dark mode: ensure KaTeX formulas are visible */
+@theme {
+  --color-background: oklch(0.99 0.01 255);
+  --color-foreground: oklch(0.15 0.02 255);
+
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.15 0.02 255);
+
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.15 0.02 255);
+
+  --color-primary: oklch(0.2 0.05 255);
+  --color-primary-foreground: oklch(0.98 0 0);
+
+  --color-secondary: oklch(0.96 0.01 255);
+  --color-secondary-foreground: oklch(0.2 0.05 255);
+
+  --color-muted: oklch(0.96 0.01 255);
+  --color-muted-foreground: oklch(0.55 0.02 255);
+
+  --color-accent: oklch(0.96 0.01 255);
+  --color-accent-foreground: oklch(0.2 0.05 255);
+
+  --color-destructive: oklch(0.6 0.15 20);
+  --color-destructive-foreground: oklch(0.98 0 0);
+
+  --color-border: oklch(0.92 0.01 255);
+  --color-input: oklch(0.92 0.01 255);
+  --color-ring: oklch(0.2 0.05 255);
+
+  --radius-lg: 0.5rem;
+  --radius-md: calc(var(--radius-lg) - 2px);
+  --radius-sm: calc(var(--radius-md) - 2px);
+
+  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+}
+
+.dark {
+  --color-background: oklch(0.15 0.02 255);
+  --color-foreground: oklch(0.98 0.01 255);
+
+  --color-card: oklch(0.15 0.02 255);
+  --color-card-foreground: oklch(0.98 0.01 255);
+
+  --color-popover: oklch(0.15 0.02 255);
+  --color-popover-foreground: oklch(0.98 0.01 255);
+
+  --color-primary: oklch(0.98 0.01 255);
+  --color-primary-foreground: oklch(0.2 0.05 255);
+
+  --color-secondary: oklch(0.22 0.03 255);
+  --color-secondary-foreground: oklch(0.98 0.01 255);
+
+  --color-muted: oklch(0.22 0.03 255);
+  --color-muted-foreground: oklch(0.65 0.02 255);
+
+  --color-accent: oklch(0.22 0.03 255);
+  --color-accent-foreground: oklch(0.98 0.01 255);
+
+  --color-destructive: oklch(0.4 0.15 20);
+  --color-destructive-foreground: oklch(0.98 0 0);
+
+  --color-border: oklch(0.22 0.03 255);
+  --color-input: oklch(0.22 0.03 255);
+  --color-ring: oklch(0.8 0.05 255);
+}
+
 @layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Dark mode: ensure KaTeX formulas are visible */
   .dark .katex,
   .dark .katex .base,
   .dark .katex .strut,

apps/web/src/components/dashboard/shell.tsx

@@ -21,7 +21,7 @@ export function DashboardShell({ children }: { children: React.ReactNode }) {
       {/* 메인 콘텐츠 영역 */}
       <div className="flex flex-1 flex-col overflow-hidden">
         <Header />
-        <main id="main-content" className="flex-1 overflow-y-auto bg-slate-50 p-6 dark:bg-slate-950">
+        <main id="main-content" className="flex-1 overflow-y-auto bg-muted/40 p-6">
           {children}
         </main>
         <HelpFab />

apps/web/src/components/items/item-card.tsx

@@ -156,10 +156,10 @@ const ItemCard = memo(function ItemCard({
       onClick={onClick ? handleClick : undefined}
       onKeyDown={onClick ? handleKeyDown : undefined}
       className={cn(
-        "flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
+        "flex flex-col gap-3 rounded-xl border bg-card text-card-foreground p-4",
         "transition-shadow duration-150",
-        onClick && "cursor-pointer hover:border-slate-300 hover:shadow-md dark:hover:border-slate-600",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
+        onClick && "cursor-pointer hover:shadow-md hover:border-accent",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         className,
       )}
     >

apps/web/src/components/search/search-bar.tsx

@@ -32,7 +32,7 @@ function ClearButton({ onClick }: Readonly<{ onClick: () => void }>) {
     <button
       type="button"
       onClick={onClick}
-      className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full p-0.5 text-slate-400 hover:text-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-400"
+      className="absolute right-3 top-1/2 -translate-y-1/2 flex min-h-[44px] min-w-[44px] items-center justify-center rounded-full text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       aria-label="검색어 지우기"
     >
       <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

apps/web/src/components/search/search-results.tsx

@@ -163,8 +163,8 @@ function ResultsSkeleton() {
 // --- 빈 결과 ---
 function EmptyResults() {
   return (
-    <div className="flex flex-col items-center justify-center py-16 text-slate-400">
-      <svg className="mb-3 h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed py-16 text-muted-foreground">
+      <svg className="mb-4 h-10 w-10 text-muted-foreground/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
         <circle cx="11" cy="11" r="8" />
         <line x1="21" y1="21" x2="16.65" y2="16.65" />
       </svg>

apps/web/src/components/skills/skill-items-panel.tsx

@@ -167,8 +167,8 @@ const ItemCard = memo(function ItemCard({
       onClick={handleClick}
       disabled={!onItemClick}
       className={cn(
-        "w-full rounded-lg border border-slate-200 p-3 text-left transition-colors",
-        onItemClick ? "cursor-pointer hover:border-blue-300 hover:bg-blue-50/50" : "cursor-default",
+        "w-full rounded-lg border bg-card p-3 text-left transition-colors",
+        onItemClick ? "cursor-pointer hover:border-primary/50 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : "cursor-default",
       )}
     >
       <div className="line-clamp-2 min-h-[2.5rem] overflow-hidden">

apps/web/src/components/ui/button.tsx

@@ -3,19 +3,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-slate-300",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
-        destructive:
-          "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-600 dark:hover:bg-red-600/90",
-        outline:
-          "border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100",
-        secondary:
-          "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-800/80",
-        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100",
-        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-100",
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2",