@olundot/ui 0.14.1 → 0.16.0

package/dist/index.js

@@ -595,12 +595,15 @@ var fileUploadZoneVariants = cva3(
     "group/file-upload relative flex w-full cursor-pointer flex-col items-center justify-center text-center",
     "border-2 border-dashed border-[var(--border)]",
     "transition-[background-color,border-color,color,box-shadow] motion-reduce:transition-none",
-    "hover:border-[var(--border-strong)] hover:bg-[var(--action-selected)]",
-    "focus-within:border-[var(--focus-ring)] focus-within:bg-[var(--action-selected)] focus-within:shadow-[0_0_0_1px_var(--focus-ring)]",
-    "data-[has-file=true]:border-[var(--border-strong)] data-[has-file=true]:bg-[var(--action-selected)]",
-    "data-[dragging=true]:border-[var(--border-strong)] data-[dragging=true]:bg-[var(--action-selected)]",
+    "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
+    "focus-within:border-[var(--focus-ring)] focus-within:shadow-[0_0_0_1px_var(--focus-ring)]",
+    "data-[has-file=true]:border-solid data-[has-file=true]:border-[var(--border-strong)] data-[has-file=true]:bg-[var(--bg-inset)]",
+    "data-[dragging=true]:border-[var(--border-strong)] data-[dragging=true]:bg-[var(--action-active)]",
     "data-[error=true]:border-[var(--error)]",
-    "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--bg-raised)]",
+    "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--action-disabled-bg)]",
+    "data-[error=true]:data-[has-file=true]:border-[var(--error)] data-[error=true]:data-[dragging=true]:border-[var(--error)]",
+    "data-[disabled=true]:data-[has-file=true]:border-dashed data-[disabled=true]:data-[has-file=true]:border-[var(--border-subtle)] data-[disabled=true]:data-[has-file=true]:bg-[var(--action-disabled-bg)]",
+    "data-[disabled=true]:data-[dragging=true]:border-[var(--border-subtle)] data-[disabled=true]:data-[dragging=true]:bg-[var(--action-disabled-bg)]",
     "data-[disabled=true]:text-text-disabled"
   ].join(" "),
   {
@@ -620,7 +623,7 @@ var fileUploadZoneVariants = cva3(
 var fileUploadIconVariants = cva3(
   [
     "inline-flex items-center justify-center rounded-[var(--radius-full)]",
-    "border border-[var(--border)] bg-[var(--bg-raised)] text-text-secondary",
+    "border border-[var(--border)] bg-[var(--bg-inset)] text-text-secondary",
     "transition-[border-color,color,background-color] motion-reduce:transition-none",
     "group-hover/file-upload:border-[var(--border-strong)] group-hover/file-upload:text-foreground",
     "group-data-[has-file=true]/file-upload:border-[var(--border-strong)] group-data-[has-file=true]/file-upload:text-foreground",
@@ -1373,7 +1376,7 @@ var selectVariants = cva5(
     variants: {
       size: {
         sm: "h-[30px] px-pad-compact-x text-body-sm",
-        md: "h-[32px] px-pad-default-x text-sm",
+        md: "h-[32px] px-pad-default-x text-body-sm",
         lg: "h-[36px] px-pad-default-x text-sm"
       },
       fullWidth: {
@@ -1528,13 +1531,13 @@ var Select = React7.forwardRef(
         "data-slot": "select-content",
         position: "popper",
         sideOffset: 4,
-        className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-raised)] text-foreground shadow-md",
+        className: "z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--bg-surface)] text-foreground shadow-[var(--shadow-4)]",
         children: [
           /* @__PURE__ */ jsx7(
             SelectPrimitive.ScrollUpButton,
             {
               "data-slot": "select-scroll-up",
-              className: "flex items-center justify-center border-b border-[var(--border)] bg-[var(--bg-raised)] py-[var(--space-1)] text-text-tertiary",
+              className: "flex items-center justify-center border-b border-[var(--border)] bg-[var(--bg-surface)] py-[var(--space-1)] text-text-tertiary",
               children: /* @__PURE__ */ jsx7(ChevronUp, { "aria-hidden": "true", className: "size-[16px]" })
             }
           ),
@@ -1558,7 +1561,7 @@ var Select = React7.forwardRef(
             SelectPrimitive.ScrollDownButton,
             {
               "data-slot": "select-scroll-down",
-              className: "flex items-center justify-center border-t border-[var(--border)] bg-[var(--bg-raised)] py-[var(--space-1)] text-text-tertiary",
+              className: "flex items-center justify-center border-t border-[var(--border)] bg-[var(--bg-surface)] py-[var(--space-1)] text-text-tertiary",
               children: /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-[16px]" })
             }
           )
@@ -3434,7 +3437,7 @@ var DialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__P
     className: cn(
       "fixed inset-0 z-[var(--z-modal)]",
       // 2026: 글래스모피즘 블러 제거 — 단정한 scrim 딤만(FE-skill anti-slop).
-      "bg-[var(--bg-base)]/65",
+      "bg-[var(--scrim)]",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
       "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       "motion-reduce:animate-none",
@@ -3454,9 +3457,10 @@ var DialogContent = React20.forwardRef(({ className, children, showCloseButton =
         "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
         "-translate-x-1/2 -translate-y-1/2",
         "grid w-full max-w-lg gap-4 p-[var(--space-8)]",
-        // modal은 dim overlay 위 — 가장 밝은 DS surface(--bg-base #F1F3F5·여전히 tinted·순백 아님)로 깨끗하게.
+        // modal은 dim overlay 위 — panel surface 토큰(--bg-surface)으로 깨끗하게.
+        // (page 배경 --bg-base가 아니라 카드/섹션과 같은 surface 층을 쓴다.)
         // arbitrary var 사용: 소비 site/app이 dist를 content-scan 안 해 `bg-base` 유틸이 purge될 수 있어 안전하게 var로.
-        "bg-[var(--bg-base)] text-foreground",
+        "bg-[var(--bg-surface)] text-foreground",
         // 2026: generic 무거운 그림자 대신 floating shadow-8 + 또렷한 중립 grey border(--border·16%) + radius-lg.
         // (border-subtle=8%는 너무 흐려 가장자리가 안 보였음 → border-border로 grey 또렷하게.)
         "border border-border rounded-[var(--radius-lg)] shadow-8",
@@ -3567,8 +3571,8 @@ var formModalContentClassName = cn(
   "w-[calc(100vw-2rem)]",
   "max-w-[560px]",
   "gap-0 p-[var(--space-6)]",
-  "bg-[var(--bg-raised)]",
-  "border-[var(--border-subtle)]",
+  "bg-[var(--bg-surface)]",
+  "border-[var(--border)]",
   "rounded-[var(--radius-lg)]",
   "shadow-[var(--shadow-4)]",
   "text-foreground"
@@ -3680,8 +3684,8 @@ var infoModalContentClassName = cn(
   "w-[calc(100vw-2rem)]",
   "max-w-[420px]",
   "gap-0 p-[var(--space-6)]",
-  "bg-[var(--bg-raised)]",
-  "border border-[var(--border-subtle)]",
+  "bg-[var(--bg-surface)]",
+  "border border-[var(--border)]",
   "rounded-[var(--radius-lg)]",
   "shadow-[var(--shadow-4)]",
   "text-foreground"
@@ -3753,426 +3757,192 @@ function InfoModal({
 }
 
 // src/components/ui/filter-toolbar.tsx
-import * as React22 from "react";
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
-var FilterToolbar = React22.forwardRef(
-  ({
-    className,
-    search,
-    filters,
-    resultSummary,
-    clearAction,
-    actions,
-    ...props
-  }, ref) => {
-    const hasMeta = Boolean(resultSummary || clearAction || actions);
-    const hasLeft = Boolean(search || filters);
-    return /* @__PURE__ */ jsx24(
-      "div",
-      {
-        ref,
-        "data-slot": "filter-toolbar",
-        className: cn(
-          "flex w-full flex-col gap-[var(--space-2)] text-foreground",
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsxs23(
-          "div",
-          {
-            "data-slot": "filter-toolbar-row",
-            className: cn(
-              "flex min-h-[34px] w-full flex-wrap items-center gap-x-[var(--space-2)] gap-y-[var(--space-2)]",
-              hasLeft ? "justify-start" : "justify-end"
-            ),
-            children: [
-              search ? /* @__PURE__ */ jsx24(
-                "div",
-                {
-                  "data-slot": "filter-toolbar-search",
-                  className: "min-w-0 flex-[1_1_280px] max-w-full",
-                  children: search
-                }
-              ) : null,
-              filters ? /* @__PURE__ */ jsx24(
-                "div",
-                {
-                  "data-slot": "filter-toolbar-filters",
-                  className: "flex min-w-0 flex-[2_1_auto] flex-wrap items-center gap-[var(--space-2)]",
-                  children: filters
-                }
-              ) : null,
-              hasMeta ? /* @__PURE__ */ jsxs23(
-                "div",
-                {
-                  "data-slot": "filter-toolbar-meta",
-                  className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-[var(--space-2)]",
-                  children: [
-                    resultSummary ? /* @__PURE__ */ jsx24(
-                      "div",
-                      {
-                        "data-slot": "filter-toolbar-summary",
-                        className: "shrink-0 whitespace-nowrap text-xs leading-snug text-text-tertiary",
-                        children: resultSummary
-                      }
-                    ) : null,
-                    clearAction ? /* @__PURE__ */ jsx24(
-                      "div",
-                      {
-                        "data-slot": "filter-toolbar-clear",
-                        className: "shrink-0",
-                        children: clearAction
-                      }
-                    ) : null,
-                    actions ? /* @__PURE__ */ jsx24(
-                      "div",
-                      {
-                        "data-slot": "filter-toolbar-actions",
-                        className: "flex shrink-0 flex-wrap items-center gap-[var(--space-2)]",
-                        children: actions
-                      }
-                    ) : null
-                  ]
-                }
-              ) : null
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-FilterToolbar.displayName = "FilterToolbar";
-
-// src/components/ui/data-table.tsx
-import * as React24 from "react";
-import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2, ChevronsUpDown } from "lucide-react";
-import { cva as cva10 } from "class-variance-authority";
+import * as React25 from "react";
+import { SlidersHorizontal } from "lucide-react";
 
-// src/components/ui/checkbox.tsx
-import * as React23 from "react";
+// src/components/ui/chip.tsx
+import * as React22 from "react";
 import { cva as cva9 } from "class-variance-authority";
-import { Check as Check3, Minus } from "lucide-react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
-var checkboxFieldVariants = cva9(
-  "flex flex-col gap-[var(--space-1)]",
-  {
-    variants: {
-      fullWidth: {
-        true: "w-full",
-        false: "w-fit"
-      }
-    },
-    defaultVariants: {
-      fullWidth: false
-    }
-  }
-);
-var checkboxVariants = checkboxFieldVariants;
-var checkboxRootVariants = cva9(
-  [
-    "group shrink-0 cursor-pointer rounded-[var(--radius-xs)]",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
-    "disabled:cursor-not-allowed"
-  ].join(" ")
-);
-var checkboxBoxVariants = cva9(
+import { X as X2 } from "lucide-react";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+var chipVariants = cva9(
   [
-    "flex shrink-0 items-center justify-center rounded-[var(--radius-xs)] border",
-    "border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
-    "transition-colors motion-reduce:transition-none",
-    "group-hover:bg-[var(--action-hover)]",
-    "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)]",
-    "group-data-[state=checked]:border-[var(--primary)] group-data-[state=checked]:bg-[var(--primary)] group-data-[state=checked]:text-[var(--primary-fg)]",
-    "group-data-[state=indeterminate]:border-[var(--primary)] group-data-[state=indeterminate]:bg-[var(--primary)] group-data-[state=indeterminate]:text-[var(--primary-fg)]",
-    "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-text-disabled",
-    "group-disabled:group-data-[state=indeterminate]:border-[var(--border-subtle)] group-disabled:group-data-[state=indeterminate]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=indeterminate]:text-text-disabled"
+    "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
+    "rounded-[var(--radius-full)] border leading-none",
+    "font-medium transition-colors motion-reduce:transition-none",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+    "disabled:pointer-events-none disabled:opacity-50"
   ].join(" "),
   {
     variants: {
+      variant: {
+        // interactive 3종 — 클릭 가능 (toggle / select / remove). cursor:pointer으로 affordance 명시.
+        // (Tailwind v4 preflight + site reset은 button cursor 보장 안 함 → variant level에서 강제.)
+        filter: "cursor-pointer",
+        choice: "cursor-pointer",
+        removable: "cursor-pointer",
+        // status-filter — 정적 표시 chip (display only, 클릭 affordance 없음).
+        "status-filter": "cursor-default"
+      },
+      tone: {
+        neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
+        accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--accent-bg-strong)]",
+        success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
+        warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
+        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]",
+        muted: "border-[var(--border-subtle)] bg-transparent text-text-tertiary hover:bg-[var(--action-hover)]"
+      },
       size: {
-        sm: "size-[calc(var(--space-4)+var(--space-1))]",
-        md: "size-[calc(var(--space-4)+var(--space-1))]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var checkboxGroupItemVariants = cva9(
-  [
-    "group w-full cursor-pointer text-left transition-colors motion-reduce:transition-none",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
-    "disabled:cursor-not-allowed disabled:text-text-disabled"
-  ].join(" "),
-  {
-    variants: {
-      appearance: {
-        plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
-        card: [
-          "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
-          "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)]",
-          "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
-          "data-[state=checked]:border-[var(--border-strong)] data-[state=checked]:bg-[var(--action-selected)]",
-          "disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)]",
-          "disabled:data-[state=checked]:border-[var(--border-subtle)] disabled:data-[state=checked]:bg-[var(--action-disabled-bg)]"
-        ].join(" ")
+        sm: "h-[30px] gap-[var(--space-1)] px-[var(--space-2)] text-xs",
+        md: "h-[32px] gap-[var(--space-2)] px-[var(--space-3)] text-body-sm",
+        lg: "h-[36px] gap-[var(--space-2)] px-[var(--space-4)] text-body-sm"
       },
-      density: {
-        comfortable: "",
-        compact: ""
+      pressed: {
+        true: "",
+        false: ""
       }
     },
     compoundVariants: [
       {
-        appearance: "card",
-        density: "comfortable",
-        className: "px-pad-default-x py-pad-roomy-y"
+        pressed: true,
+        tone: "neutral",
+        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
       },
       {
-        appearance: "card",
-        density: "compact",
-        className: "px-pad-compact-x py-pad-default-y"
+        // R10 — wash 패턴 정합 (--accent-bg-strong deep olive wash / --accent olive/lime text).
+        pressed: true,
+        tone: "accent",
+        className: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-[var(--accent)]"
+      },
+      {
+        pressed: true,
+        tone: "muted",
+        className: "border-[var(--border-strong)] bg-[var(--bg-raised)] text-text-secondary"
       }
     ],
     defaultVariants: {
-      appearance: "plain",
-      density: "comfortable"
+      variant: "filter",
+      tone: "neutral",
+      size: "md",
+      pressed: false
     }
   }
 );
-var checkboxGroupBoxVariants = cva9(
-  "mt-[2px]",
+var chipCountVariants = cva9(
+  [
+    "inline-flex min-w-[var(--space-4)] items-center justify-center",
+    "rounded-[var(--radius-full)] px-[var(--space-1)]",
+    "font-[family-name:var(--font-display)]"
+  ].join(" "),
   {
     variants: {
-      appearance: {
-        plain: "",
-        card: "mt-[var(--space-1)]"
+      tone: {
+        neutral: "bg-[var(--bg-raised)] text-text-tertiary",
+        accent: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
+        success: "bg-[var(--success)] text-[var(--success-contrast)]",
+        warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
+        danger: "bg-[var(--error)] text-[var(--error-contrast)]",
+        muted: "bg-[var(--bg-raised)] text-text-tertiary"
+      },
+      size: {
+        sm: "h-[var(--space-4)] text-xs",
+        md: "h-[var(--space-4)] text-xs",
+        lg: "h-[calc(var(--space-4)+var(--space-1))] text-xs"
       }
     },
     defaultVariants: {
-      appearance: "plain"
+      tone: "neutral",
+      size: "md"
     }
   }
 );
-var CheckboxGroupContext = React23.createContext(null);
-function getLabel(children, label) {
-  return children ?? label;
-}
-var Checkbox = React23.forwardRef(
+var Chip = React22.forwardRef(
   ({
     className,
+    variant = "filter",
+    tone = "neutral",
     size = "md",
-    fullWidth = false,
+    pressed = false,
+    count,
+    removeLabel = "Remove",
+    asChild = false,
     children,
-    label,
-    description,
-    required,
-    error,
-    id,
-    value,
-    name,
-    checked,
-    disabled,
-    onCheckedChange,
     ...props
   }, ref) => {
-    const group = React23.useContext(CheckboxGroupContext);
-    const generatedId = React23.useId();
-    const checkboxId = id ?? generatedId;
-    const labelContent = getLabel(children, label);
-    const isGrouped = Boolean(group && value != null);
-    const valueString = value == null ? void 0 : String(value);
-    const resolvedChecked = isGrouped && valueString ? group?.selectedValues.has(valueString) : checked;
-    const resolvedDisabled = disabled || group?.disabled;
-    const resolvedName = name ?? group?.name;
-    const labelId = `${checkboxId}-label`;
-    const descriptionId = description && !error ? `${checkboxId}-description` : void 0;
-    const errorId = error ? `${checkboxId}-error` : void 0;
-    const describedBy = errorId ?? descriptionId;
-    const handleCheckedChange = (nextChecked) => {
-      onCheckedChange?.(nextChecked);
-      if (isGrouped && valueString) {
-        group?.toggleValue(valueString, nextChecked === true);
-      }
-    };
-    if (isGrouped) {
-      const appearance = group?.appearance ?? "plain";
-      const density = group?.density ?? "comfortable";
-      return /* @__PURE__ */ jsxs24(
-        CheckboxPrimitive.Root,
+    const removable = variant === "removable";
+    if (removable) {
+      const {
+        onClick,
+        disabled,
+        type: _type,
+        autoFocus: _af,
+        form: _form,
+        name: _name,
+        value: _value,
+        ...spanProps
+      } = props;
+      return /* @__PURE__ */ jsxs23(
+        "span",
         {
-          ref,
-          id: checkboxId,
-          "data-slot": "checkbox",
-          "aria-labelledby": labelId,
-          "aria-describedby": describedBy,
-          "aria-required": required || void 0,
-          "aria-invalid": error ? true : void 0,
-          name: resolvedName,
-          value: valueString,
-          checked: resolvedChecked,
-          disabled: resolvedDisabled,
-          className: cn(
-            checkboxGroupItemVariants({ appearance, density }),
-            className
-          ),
-          onCheckedChange: handleCheckedChange,
-          ...props,
+          "data-slot": "chip",
+          "data-variant": variant,
+          "data-tone": tone,
+          className: cn(chipVariants({ variant, tone, size, pressed, className })),
+          ...spanProps,
           children: [
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx24("span", { children }),
+            count !== void 0 ? /* @__PURE__ */ jsx24(
               "span",
               {
                 "aria-hidden": "true",
-                "data-slot": "checkbox-box",
-                className: cn(
-                  checkboxBoxVariants({ size }),
-                  checkboxGroupBoxVariants({ appearance })
-                ),
-                children: /* @__PURE__ */ jsx25(
-                  CheckboxPrimitive.Indicator,
-                  {
-                    "data-slot": "checkbox-indicator",
-                    className: "flex items-center justify-center",
-                    children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx25(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx25(Check3, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
-                  }
-                )
+                "data-slot": "chip-count",
+                "data-count-tone": tone,
+                className: chipCountVariants({ tone, size }),
+                children: count
               }
-            ),
-            /* @__PURE__ */ jsxs24("span", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
-              /* @__PURE__ */ jsxs24(
-                "span",
-                {
-                  id: labelId,
-                  "data-slot": "checkbox-label",
-                  className: "text-sm font-medium leading-snug text-foreground group-disabled:text-text-disabled",
-                  children: [
-                    labelContent,
-                    required ? /* @__PURE__ */ jsx25(
-                      "span",
-                      {
-                        "aria-hidden": "true",
-                        "data-slot": "checkbox-required-marker",
-                        className: "ml-[var(--space-1)] font-bold text-[var(--semantic-error,var(--error))]",
-                        children: "*"
-                      }
-                    ) : null
-                  ]
-                }
-              ),
-              error ? /* @__PURE__ */ jsx25(
-                "span",
-                {
-                  id: errorId,
-                  role: "alert",
-                  "data-slot": "checkbox-error",
-                  className: "text-xs font-medium leading-normal text-[var(--error)]",
-                  children: error
-                }
-              ) : description ? /* @__PURE__ */ jsx25(
-                "span",
-                {
-                  id: descriptionId,
-                  "data-slot": "checkbox-description",
-                  className: "text-xs font-normal leading-normal text-text-tertiary group-disabled:text-text-disabled",
-                  children: description
-                }
-              ) : null
-            ] })
+            ) : null,
+            /* @__PURE__ */ jsx24(
+              "button",
+              {
+                ref,
+                type: "button",
+                "data-slot": "chip-remove",
+                "aria-label": removeLabel,
+                disabled,
+                onClick,
+                className: "inline-flex size-[var(--space-4)] items-center justify-center rounded-[var(--radius-full)] text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+                children: /* @__PURE__ */ jsx24(X2, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
+              }
+            )
           ]
         }
       );
     }
-    const labelClassName = cn(
-      "cursor-pointer select-none text-left font-medium text-foreground",
-      size === "sm" ? "text-xs" : "text-sm",
-      resolvedDisabled && "cursor-not-allowed text-text-disabled"
-    );
-    return /* @__PURE__ */ jsxs24(
-      "div",
+    const Comp = asChild ? Slot2.Root : "button";
+    return /* @__PURE__ */ jsxs23(
+      Comp,
       {
-        "data-slot": "checkbox-field",
-        "data-disabled": resolvedDisabled ? "" : void 0,
-        className: checkboxFieldVariants({ fullWidth }),
+        ref,
+        "data-slot": "chip",
+        "data-variant": variant,
+        "data-tone": tone,
+        "aria-pressed": pressed,
+        className: cn(
+          chipVariants({ variant, tone, size, pressed, className })
+        ),
+        type: asChild ? void 0 : props.type ?? "button",
+        ...props,
         children: [
-          /* @__PURE__ */ jsxs24("div", { className: "inline-flex items-center gap-[var(--space-3)]", children: [
-            /* @__PURE__ */ jsx25(
-              CheckboxPrimitive.Root,
-              {
-                ref,
-                id: checkboxId,
-                "data-slot": "checkbox",
-                "aria-describedby": describedBy,
-                "aria-required": required || void 0,
-                "aria-invalid": error ? true : void 0,
-                name: resolvedName,
-                value: valueString,
-                checked: resolvedChecked,
-                disabled: resolvedDisabled,
-                className: cn(checkboxRootVariants(), className),
-                onCheckedChange: handleCheckedChange,
-                ...props,
-                children: /* @__PURE__ */ jsx25(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    "data-slot": "checkbox-box",
-                    className: checkboxBoxVariants({ size }),
-                    children: /* @__PURE__ */ jsx25(
-                      CheckboxPrimitive.Indicator,
-                      {
-                        "data-slot": "checkbox-indicator",
-                        className: "flex items-center justify-center",
-                        children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx25(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx25(Check3, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            labelContent ? /* @__PURE__ */ jsxs24(
-              "label",
-              {
-                id: labelId,
-                htmlFor: checkboxId,
-                "data-slot": "checkbox-label",
-                className: labelClassName,
-                children: [
-                  labelContent,
-                  required ? /* @__PURE__ */ jsx25(
-                    "span",
-                    {
-                      "aria-hidden": "true",
-                      "data-slot": "checkbox-required-marker",
-                      className: "ml-[var(--space-1)] font-bold text-[var(--semantic-error,var(--error))]",
-                      children: "*"
-                    }
-                  ) : null
-                ]
-              }
-            ) : null
-          ] }),
-          error ? /* @__PURE__ */ jsx25(
-            "p",
-            {
-              id: errorId,
-              role: "alert",
-              "data-slot": "checkbox-error",
-              className: "ml-[32px] text-xs font-medium leading-normal text-[var(--error)]",
-              children: error
-            }
-          ) : description ? /* @__PURE__ */ jsx25(
-            "p",
+          children,
+          count !== void 0 ? /* @__PURE__ */ jsx24(
+            "span",
             {
-              id: descriptionId,
-              "data-slot": "checkbox-description",
-              className: cn(
-                "ml-[32px] text-xs font-normal leading-normal text-text-tertiary",
-                resolvedDisabled && "text-text-disabled"
-              ),
-              children: description
+              "aria-hidden": "true",
+              "data-slot": "chip-count",
+              "data-count-tone": tone,
+              className: chipCountVariants({ tone, size }),
+              children: count
             }
           ) : null
         ]
@@ -4180,59 +3950,1235 @@ var Checkbox = React23.forwardRef(
     );
   }
 );
-Checkbox.displayName = "Checkbox";
+Chip.displayName = "Chip";
 
-// src/components/ui/data-table.tsx
-import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
-var dataTableVariants = cva10(
+// src/components/ui/icon-button.tsx
+import * as React23 from "react";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+var iconButtonVariants = cva10(
   [
-    "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
-    "text-foreground"
+    "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center before:absolute before:content-['']",
+    "rounded-[var(--radius-sm)] border font-medium",
+    "transition-colors motion-reduce:transition-none",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+    "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ].join(" "),
   {
     variants: {
-      density: {
-        standard: "",
-        compact: ""
+      variant: {
+        ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+        outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)] hover:text-foreground",
+        subtle: "border-transparent bg-[var(--bg-raised)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
+        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
       },
-      surface: surfaceClassNames
+      size: {
+        sm: "size-[28px] before:-inset-[8px]",
+        md: "size-[32px] before:-inset-[6px]",
+        lg: "size-[40px] before:-inset-[2px]"
+      },
+      pressed: {
+        true: "",
+        false: ""
+      }
     },
+    compoundVariants: [
+      {
+        pressed: true,
+        variant: ["ghost", "outline", "subtle"],
+        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
+      },
+      {
+        pressed: true,
+        variant: "danger",
+        className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
+      }
+    ],
     defaultVariants: {
-      density: "standard",
-      surface: "surface"
+      variant: "ghost",
+      size: "md",
+      pressed: false
     }
   }
 );
-var dataTableRowVariants = cva10(
+var iconButtonBadgeVariants = cva10(
   [
-    "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
-    "text-body-sm leading-compact text-foreground",
-    "transition-colors motion-reduce:transition-none"
+    "pointer-events-none absolute right-0 top-0 inline-flex",
+    "olun-icon-button__badge",
+    "min-h-[var(--space-3)] min-w-[var(--space-3)] translate-x-1/3 -translate-y-1/3",
+    "items-center justify-center gap-[2px] rounded-[var(--radius-full)] px-[3px]",
+    "font-[family-name:var(--font-display)] text-[10px] font-semibold leading-none",
+    "[&:has(svg)]:size-[var(--space-3)] [&:has(svg)]:px-0 [&_svg]:size-[10px]"
   ].join(" "),
   {
     variants: {
-      interactive: {
-        true: "cursor-pointer hover:bg-[var(--action-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]",
-        false: ""
-      },
-      selected: {
-        true: "bg-[var(--action-selected)]",
-        false: ""
+      tone: {
+        info: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
+        error: "bg-[var(--error)] text-[var(--error-contrast)]"
       }
     },
     defaultVariants: {
-      interactive: false,
-      selected: false
+      tone: "info"
     }
   }
 );
-var alignmentClass = {
-  left: "justify-start text-left",
-  center: "justify-center text-center",
-  right: "justify-end text-right"
-};
-function getRowId(row, keyField) {
-  return String(row[keyField]);
+var iconSize2 = {
+  sm: 14,
+  md: 16,
+  lg: 18
+};
+var iconStrokeWidth = {
+  sm: 2.25,
+  md: 2.25,
+  lg: 1.75
+};
+var IconButton = React23.forwardRef(
+  ({
+    className,
+    variant = "ghost",
+    size = "md",
+    pressed = void 0,
+    icon: Icon,
+    badge,
+    badgeTone = "info",
+    type,
+    title,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) => {
+    const resolvedSize = size ?? "md";
+    const isToggle = pressed !== void 0;
+    const isPressed = pressed === true;
+    const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
+    return /* @__PURE__ */ jsxs24(
+      "button",
+      {
+        ref,
+        ...props,
+        "data-slot": "icon-button",
+        "data-variant": variant,
+        "data-size": resolvedSize,
+        "data-pressed": isToggle ? String(isPressed) : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-pressed": isToggle ? isPressed : void 0,
+        title: hoverTitle,
+        className: cn(
+          iconButtonVariants({ variant, size, pressed: isPressed, className })
+        ),
+        type: type ?? "button",
+        children: [
+          /* @__PURE__ */ jsx25(
+            Icon,
+            {
+              "aria-hidden": "true",
+              "data-slot": "icon-button-icon",
+              size: iconSize2[resolvedSize],
+              strokeWidth: iconStrokeWidth[resolvedSize]
+            }
+          ),
+          badge !== void 0 ? /* @__PURE__ */ jsx25(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "icon-button-badge",
+              "data-badge-tone": badgeTone,
+              className: iconButtonBadgeVariants({ tone: badgeTone }),
+              children: badge
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/ui/popover.tsx
+import * as React24 from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+function Popover({ modal = false, ...props }) {
+  return /* @__PURE__ */ jsx26(PopoverPrimitive.Root, { modal, ...props });
+}
+var popoverArrowClassName = "fill-[var(--bg-surface)] stroke-[var(--border)] [&>polygon]:[vector-effect:non-scaling-stroke]";
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverClose = PopoverPrimitive.Close;
+var PopoverContent = React24.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx26(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs25(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    collisionPadding,
+    "data-slot": "popover-content",
+    className: cn(
+      "z-[var(--z-popover)] w-[260px] outline-none",
+      "rounded-[var(--radius-md)] border border-[var(--border)]",
+      "bg-[var(--bg-surface)] p-[var(--space-4)] text-foreground",
+      "shadow-[var(--shadow-4)]",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "motion-reduce:animate-none",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      showArrow ? /* @__PURE__ */ jsx26(
+        PopoverPrimitive.Arrow,
+        {
+          "data-slot": "popover-arrow",
+          className: popoverArrowClassName,
+          width: 11,
+          height: 5
+        }
+      ) : null
+    ]
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var PopoverArrow = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+  PopoverPrimitive.Arrow,
+  {
+    ref,
+    "data-slot": "popover-arrow",
+    className: cn(popoverArrowClassName, className),
+    width: 11,
+    height: 5,
+    ...props
+  }
+));
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+
+// src/components/ui/sheet-drawer.tsx
+import { Maximize2Icon, Minimize2Icon, XIcon as XIcon3 } from "lucide-react";
+
+// src/components/ui/sheet.tsx
+import { XIcon as XIcon2 } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+var defaultSheetMotionConfig = {
+  type: "slide",
+  duration: 300,
+  easing: "decel"
+};
+var sheetMotionEasingValue = {
+  standard: "var(--ease-standard)",
+  // decel/sharp have no canonical --ease-* token; these compat beziers are frozen
+  // specifically to back this public `easing` prop (see tokens/compat.css).
+  decel: "var(--easing-decel)",
+  accel: "var(--ease-in)",
+  sharp: "var(--easing-sharp)",
+  bounce: "var(--ease-out)"
+};
+function resolveSheetMotionConfig(motion) {
+  if (motion === false) return false;
+  return {
+    ...defaultSheetMotionConfig,
+    ...motion
+  };
+}
+function formatSheetMotionDuration(duration) {
+  return typeof duration === "number" ? `${duration}ms` : duration;
+}
+function getSheetMotionStyle(motionConfig, style) {
+  if (!motionConfig) return style;
+  return {
+    ...style,
+    "--sheet-motion-duration": formatSheetMotionDuration(motionConfig.duration),
+    "--sheet-motion-easing": sheetMotionEasingValue[motionConfig.easing]
+  };
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx27(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  motion,
+  style,
+  ...props
+}) {
+  const motionConfig = resolveSheetMotionConfig(motion);
+  return /* @__PURE__ */ jsx27(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-[var(--z-overlay)] bg-[var(--scrim)]",
+        motionConfig && cn(
+          "transition-opacity motion-reduce:transition-none",
+          "duration-[var(--sheet-motion-duration)]",
+          "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+          "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
+          "data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
+          "motion-reduce:animate-none"
+        ),
+        className
+      ),
+      style: getSheetMotionStyle(motionConfig, style),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  mobileSide,
+  motion,
+  showCloseButton = false,
+  style,
+  ...props
+}) {
+  const motionConfig = resolveSheetMotionConfig(motion);
+  const hasSlideMotion = motionConfig && motionConfig.type === "slide";
+  return /* @__PURE__ */ jsxs26(SheetPortal, { children: [
+    /* @__PURE__ */ jsx27(SheetOverlay, { motion: motionConfig }),
+    /* @__PURE__ */ jsxs26(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(
+          "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-[var(--bg-surface)] shadow-[var(--shadow-4)]",
+          motionConfig && cn(
+            "motion-reduce:animate-none",
+            motionConfig.type === "fade" && "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "right" && cn(
+            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "left" && cn(
+            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "top" && cn(
+            "inset-x-0 top-0 h-auto border-b",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          side === "bottom" && cn(
+            "inset-x-0 bottom-0 h-auto border-t",
+            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "right" && cn(
+            "max-[899px]:inset-y-0 max-[899px]:right-0 max-[899px]:left-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-l max-[899px]:border-t-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "left" && cn(
+            "max-[899px]:inset-y-0 max-[899px]:left-0 max-[899px]:right-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-r max-[899px]:border-t-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "top" && cn(
+            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap (see mobileSide bottom).
+            "max-[899px]:inset-x-0 max-[899px]:top-0 max-[899px]:bottom-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-b max-[899px]:border-l-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          mobileSide === "bottom" && cn(
+            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap so the bottom sheet
+            // spans the full viewport width across the whole < 900px band (not capped to 24rem).
+            "max-[899px]:inset-x-0 max-[899px]:bottom-0 max-[899px]:top-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-t max-[899px]:border-l-0 max-[899px]:rounded-none",
+            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
+          ),
+          className
+        ),
+        style: getSheetMotionStyle(motionConfig, style),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs26(SheetPrimitive.Close, { className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx27(XIcon2, { className: "size-[16px]" }),
+            /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      className: cn("flex-1 overflow-y-auto p-4", className),
+      ...props
+    }
+  );
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/sheet-drawer.tsx
+import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+var sheetDrawerContentClassName = cn(
+  "gap-0 p-0",
+  "bg-[var(--bg-surface)] text-foreground",
+  "border-[var(--border)] shadow-[var(--shadow-4)]",
+  "min-[900px]:w-[480px] min-[900px]:max-w-[480px]",
+  "max-[899px]:h-[min(85dvh,720px)] max-[899px]:max-h-[85dvh] max-[899px]:w-full max-[899px]:max-w-none",
+  "max-[899px]:rounded-t-[var(--radius-lg)]"
+);
+var sheetDrawerWideContentClassName = "min-[900px]:w-[720px] min-[900px]:max-w-[720px]";
+var sheetDrawerFullContentClassName = cn(
+  "min-[900px]:w-[calc(100vw_-_var(--space-8))] min-[900px]:max-w-[calc(100vw_-_var(--space-8))]",
+  "max-[899px]:h-[100dvh] max-[899px]:max-h-[100dvh] max-[899px]:rounded-none"
+);
+var sheetDrawerHeaderClassName = cn(
+  "flex items-start justify-between gap-[var(--space-4)]",
+  "border-b border-[var(--border)] px-[var(--space-6)] py-[var(--space-6)]"
+);
+var sheetDrawerHeaderTextClassName = "flex min-w-0 flex-1 flex-col gap-[var(--space-2)]";
+var sheetDrawerCaptionClassName = "flex flex-wrap items-center gap-[var(--space-2)]";
+var sheetDrawerTitleClassName = "text-[18px] font-bold leading-snug text-foreground";
+var sheetDrawerDescriptionClassName = "break-keep text-[14px] leading-normal text-text-secondary";
+var sheetDrawerCloseButtonClassName = cn(
+  "flex size-[32px] shrink-0 cursor-pointer items-center justify-center",
+  "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
+  "hover:bg-[var(--action-hover)] hover:text-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2"
+);
+var sheetDrawerHeaderActionsClassName = cn(
+  "flex shrink-0 items-center gap-[var(--space-1)]"
+);
+var sheetDrawerExpandButtonClassName = cn(
+  "inline-flex cursor-pointer items-center justify-center gap-[var(--space-1)]",
+  "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
+  "hover:bg-[var(--action-hover)] hover:text-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2",
+  "h-[32px] px-[var(--space-2)]"
+);
+var sheetDrawerBodyClassName = cn(
+  "min-h-0 flex-1 overflow-y-auto",
+  "px-[var(--space-6)] py-[var(--space-6)]"
+);
+var sheetDrawerFooterClassName = cn(
+  "border-t border-[var(--border)] px-[var(--space-6)] py-[var(--space-4)]",
+  "flex justify-end gap-[var(--space-2)]"
+);
+function SheetDrawer({
+  open,
+  onOpenChange,
+  caption,
+  title,
+  description,
+  children,
+  expandHref,
+  onExpand,
+  expandLabel = "\uD06C\uAC8C \uBCF4\uAE30",
+  expanded = false,
+  onExpandedChange,
+  collapseLabel = "\uC791\uAC8C \uBCF4\uAE30",
+  footer,
+  width = "default",
+  motion,
+  closeLabel = "\uB2EB\uAE30"
+}) {
+  const hasExpandedToggle = typeof onExpandedChange === "function";
+  const showExpandAction = Boolean(hasExpandedToggle || expandHref || onExpand);
+  const resolvedWidth = expanded ? "full" : width;
+  const resolvedExpandLabel = hasExpandedToggle && expanded ? collapseLabel : expandLabel;
+  const ExpandActionIcon = hasExpandedToggle && expanded ? Minimize2Icon : Maximize2Icon;
+  return /* @__PURE__ */ jsx28(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs27(
+    SheetContent,
+    {
+      "data-slot": "sheet-drawer-content",
+      side: "right",
+      mobileSide: "bottom",
+      motion,
+      showCloseButton: false,
+      className: cn(
+        sheetDrawerContentClassName,
+        resolvedWidth === "wide" && sheetDrawerWideContentClassName,
+        resolvedWidth === "full" && sheetDrawerFullContentClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs27("div", { "data-slot": "sheet-drawer-header", className: sheetDrawerHeaderClassName, children: [
+          /* @__PURE__ */ jsxs27("div", { className: sheetDrawerHeaderTextClassName, children: [
+            caption ? /* @__PURE__ */ jsx28("div", { "data-slot": "sheet-drawer-caption", className: sheetDrawerCaptionClassName, children: caption }) : null,
+            /* @__PURE__ */ jsx28(SheetTitle, { "data-slot": "sheet-drawer-title", className: sheetDrawerTitleClassName, children: title }),
+            description ? /* @__PURE__ */ jsx28(
+              SheetDescription,
+              {
+                "data-slot": "sheet-drawer-description",
+                className: sheetDrawerDescriptionClassName,
+                children: description
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs27("div", { "data-slot": "sheet-drawer-header-actions", className: sheetDrawerHeaderActionsClassName, children: [
+            showExpandAction ? hasExpandedToggle ? /* @__PURE__ */ jsxs27(
+              "button",
+              {
+                type: "button",
+                "aria-label": resolvedExpandLabel,
+                "aria-pressed": expanded,
+                "data-slot": "sheet-drawer-expand",
+                "data-expanded": expanded ? "true" : "false",
+                className: sheetDrawerExpandButtonClassName,
+                onClick: () => onExpandedChange(!expanded),
+                children: [
+                  /* @__PURE__ */ jsx28(ExpandActionIcon, { className: "size-[16px]" }),
+                  /* @__PURE__ */ jsx28("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: resolvedExpandLabel })
+                ]
+              }
+            ) : expandHref ? /* @__PURE__ */ jsxs27(
+              "a",
+              {
+                href: expandHref,
+                "aria-label": expandLabel,
+                "data-slot": "sheet-drawer-expand",
+                className: sheetDrawerExpandButtonClassName,
+                children: [
+                  /* @__PURE__ */ jsx28(ExpandActionIcon, { className: "size-[16px]" }),
+                  /* @__PURE__ */ jsx28("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs27(
+              "button",
+              {
+                type: "button",
+                "aria-label": expandLabel,
+                "data-slot": "sheet-drawer-expand",
+                className: sheetDrawerExpandButtonClassName,
+                onClick: onExpand,
+                children: [
+                  /* @__PURE__ */ jsx28(ExpandActionIcon, { className: "size-[16px]" }),
+                  /* @__PURE__ */ jsx28("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsx28(
+              SheetClose,
+              {
+                "aria-label": closeLabel,
+                "data-slot": "sheet-drawer-close",
+                className: sheetDrawerCloseButtonClassName,
+                children: /* @__PURE__ */ jsx28(XIcon3, { className: "size-[16px]" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx28("div", { "data-slot": "sheet-drawer-body", className: sheetDrawerBodyClassName, children }),
+        footer ? /* @__PURE__ */ jsx28("div", { "data-slot": "sheet-drawer-footer", className: sheetDrawerFooterClassName, children: footer }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/filter-toolbar.tsx
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+var collapsibleClassNames = {
+  sm: {
+    inline: "hidden @[640px]:flex",
+    trigger: "@[640px]:hidden"
+  },
+  md: {
+    inline: "hidden @[768px]:flex",
+    trigger: "@[768px]:hidden"
+  },
+  lg: {
+    inline: "hidden @[1024px]:flex",
+    trigger: "@[1024px]:hidden"
+  },
+  never: {
+    inline: "flex",
+    trigger: "hidden"
+  }
+};
+var FilterToolbar = React25.forwardRef(
+  ({
+    className,
+    search,
+    filters,
+    collapsible,
+    collapseBelow = "lg",
+    activeFilterCount = 0,
+    onClearFilters,
+    collapsedLabel = "\uD544\uD130",
+    resultSummary,
+    clearAction,
+    actions,
+    ...props
+  }, ref) => {
+    const [rootElement, setRootElement] = React25.useState(
+      null
+    );
+    const [containerWidth, setContainerWidth] = React25.useState(
+      null
+    );
+    const [overlayOpen, setOverlayOpen] = React25.useState(false);
+    const triggerRef = React25.useRef(null);
+    const setRootRefs = React25.useCallback(
+      (element) => {
+        setRootElement(element);
+        if (typeof ref === "function") ref(element);
+        else if (ref) ref.current = element;
+      },
+      [ref]
+    );
+    React25.useEffect(() => {
+      if (!rootElement) return;
+      const updateWidth = () => {
+        setContainerWidth(rootElement.getBoundingClientRect().width);
+      };
+      updateWidth();
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(updateWidth);
+      observer.observe(rootElement);
+      return () => observer.disconnect();
+    }, [rootElement]);
+    const handleOverlayOpenChange = React25.useCallback((open) => {
+      setOverlayOpen(open);
+      if (!open) queueMicrotask(() => triggerRef.current?.focus());
+    }, []);
+    const hasMeta = Boolean(resultSummary || clearAction || actions);
+    const hasControls = Boolean(search || filters || collapsible);
+    const hasAppliedFilters = activeFilterCount > 0;
+    const usesSheet = containerWidth !== null && containerWidth < 640;
+    const collapseClasses = collapsibleClassNames[collapseBelow];
+    const collapseTriggerLabel = hasAppliedFilters ? `${collapsedLabel}, ${activeFilterCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
+    const clearFiltersButton = onClearFilters ? /* @__PURE__ */ jsx29(
+      "button",
+      {
+        type: "button",
+        "data-slot": "filter-toolbar-clear-filters",
+        className: "cursor-pointer border-0 bg-transparent p-0 text-body-sm font-medium text-text-secondary no-underline",
+        onClick: onClearFilters,
+        children: "\uD574\uC81C"
+      }
+    ) : null;
+    const collapsedContent = collapsible ? /* @__PURE__ */ jsx29(
+      "div",
+      {
+        "data-slot": "filter-toolbar-collapsed-content",
+        className: "flex flex-col gap-[var(--space-3)] [&>*]:w-full",
+        children: collapsible
+      }
+    ) : null;
+    const collapseTrigger = collapsible ? /* @__PURE__ */ jsxs28(
+      "span",
+      {
+        "data-slot": "filter-toolbar-collapse-trigger",
+        className: cn(
+          "relative order-2 shrink-0 @[640px]:order-4",
+          collapseClasses.trigger
+        ),
+        children: [
+          /* @__PURE__ */ jsx29(
+            IconButton,
+            {
+              ref: triggerRef,
+              "aria-label": collapseTriggerLabel,
+              icon: SlidersHorizontal,
+              size: "md",
+              variant: "outline",
+              onClick: () => handleOverlayOpenChange(true)
+            }
+          ),
+          hasAppliedFilters ? /* @__PURE__ */ jsx29(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "filter-toolbar-collapse-count",
+              className: cn(
+                chipCountVariants({ tone: "accent", size: "md" }),
+                "pointer-events-none absolute right-0 top-0 translate-x-1/3 -translate-y-1/3"
+              ),
+              children: activeFilterCount
+            }
+          ) : null
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs28(
+      "div",
+      {
+        ref: setRootRefs,
+        "data-slot": "filter-toolbar",
+        className: cn(
+          "@container flex w-full flex-col gap-[var(--space-2)] text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          hasControls ? /* @__PURE__ */ jsxs28(
+            "div",
+            {
+              "data-slot": "filter-toolbar-row",
+              className: "flex min-h-[32px] w-full flex-wrap items-center justify-start gap-x-[var(--space-2)] gap-y-[var(--space-2)]",
+              children: [
+                search ? /* @__PURE__ */ jsx29(
+                  "div",
+                  {
+                    "data-slot": "filter-toolbar-search",
+                    className: "order-1 min-w-0 max-w-full flex-[1_1_auto] @[640px]:flex-[1_1_280px]",
+                    children: search
+                  }
+                ) : null,
+                collapsible && usesSheet ? collapseTrigger : null,
+                collapsible && !usesSheet ? /* @__PURE__ */ jsxs28(Popover, { open: overlayOpen, onOpenChange: handleOverlayOpenChange, children: [
+                  /* @__PURE__ */ jsx29(PopoverAnchor, { asChild: true, children: collapseTrigger }),
+                  overlayOpen ? /* @__PURE__ */ jsxs28(
+                    PopoverContent,
+                    {
+                      role: "dialog",
+                      "aria-label": collapsedLabel,
+                      side: "bottom",
+                      align: "start",
+                      className: "w-[320px]",
+                      children: [
+                        /* @__PURE__ */ jsx29("div", { className: "mb-[var(--space-3)] text-sm font-semibold", children: "\uD544\uD130" }),
+                        collapsedContent,
+                        clearFiltersButton ? /* @__PURE__ */ jsx29("div", { className: "mt-[var(--space-4)] flex justify-end", children: clearFiltersButton }) : null
+                      ]
+                    }
+                  ) : null
+                ] }) : null,
+                filters ? /* @__PURE__ */ jsx29(
+                  "div",
+                  {
+                    "data-slot": "filter-toolbar-filters",
+                    className: "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:flex-[2_1_auto]",
+                    children: filters
+                  }
+                ) : null,
+                collapsible && !overlayOpen ? /* @__PURE__ */ jsx29(
+                  "div",
+                  {
+                    "data-slot": "filter-toolbar-collapsible",
+                    className: cn(
+                      "order-5 min-w-0 items-center gap-[var(--space-2)]",
+                      collapseClasses.inline
+                    ),
+                    children: collapsible
+                  }
+                ) : null
+              ]
+            }
+          ) : null,
+          collapsible && usesSheet && overlayOpen ? /* @__PURE__ */ jsx29(
+            SheetDrawer,
+            {
+              open: overlayOpen,
+              onOpenChange: handleOverlayOpenChange,
+              title: "\uD544\uD130",
+              footer: clearFiltersButton,
+              children: collapsedContent
+            }
+          ) : null,
+          hasAppliedFilters ? /* @__PURE__ */ jsxs28(
+            "div",
+            {
+              "data-slot": "filter-toolbar-applied",
+              className: "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
+              children: [
+                /* @__PURE__ */ jsxs28("span", { children: [
+                  "\uD544\uD130 ",
+                  activeFilterCount,
+                  "\uAC1C \uC801\uC6A9"
+                ] }),
+                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment7, { children: [
+                  /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", children: " \xB7 " }),
+                  /* @__PURE__ */ jsx29(
+                    "button",
+                    {
+                      type: "button",
+                      className: "cursor-pointer border-0 bg-transparent p-0 text-[11px] text-text-secondary no-underline",
+                      onClick: onClearFilters,
+                      children: "\uD574\uC81C"
+                    }
+                  )
+                ] }) : null
+              ]
+            }
+          ) : null,
+          hasMeta ? /* @__PURE__ */ jsxs28(
+            "div",
+            {
+              "data-slot": "filter-toolbar-meta",
+              className: "flex min-w-0 flex-wrap items-center justify-end gap-[var(--space-2)]",
+              children: [
+                resultSummary ? /* @__PURE__ */ jsx29(
+                  "div",
+                  {
+                    "data-slot": "filter-toolbar-summary",
+                    className: "shrink-0 whitespace-nowrap text-xs leading-snug text-text-tertiary",
+                    children: resultSummary
+                  }
+                ) : null,
+                clearAction ? /* @__PURE__ */ jsx29("div", { "data-slot": "filter-toolbar-clear", className: "shrink-0", children: clearAction }) : null,
+                actions ? /* @__PURE__ */ jsx29(
+                  "div",
+                  {
+                    "data-slot": "filter-toolbar-actions",
+                    className: "flex shrink-0 flex-wrap items-center gap-[var(--space-2)]",
+                    children: actions
+                  }
+                ) : null
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+FilterToolbar.displayName = "FilterToolbar";
+
+// src/components/ui/data-table.tsx
+import * as React27 from "react";
+import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2, ChevronsUpDown } from "lucide-react";
+import { cva as cva12 } from "class-variance-authority";
+
+// src/components/ui/checkbox.tsx
+import * as React26 from "react";
+import { cva as cva11 } from "class-variance-authority";
+import { Check as Check3, Minus } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+var checkboxFieldVariants = cva11(
+  "flex flex-col gap-[var(--space-1)]",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: "w-fit"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false
+    }
+  }
+);
+var checkboxVariants = checkboxFieldVariants;
+var checkboxRootVariants = cva11(
+  [
+    "group shrink-0 cursor-pointer rounded-[var(--radius-xs)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
+    "disabled:cursor-not-allowed"
+  ].join(" ")
+);
+var checkboxBoxVariants = cva11(
+  [
+    "flex shrink-0 items-center justify-center rounded-[var(--radius-xs)] border",
+    "border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
+    "transition-colors motion-reduce:transition-none",
+    "group-hover:bg-[var(--action-hover)]",
+    "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)]",
+    "group-data-[state=checked]:border-[var(--primary)] group-data-[state=checked]:bg-[var(--primary)] group-data-[state=checked]:text-[var(--primary-fg)]",
+    "group-data-[state=indeterminate]:border-[var(--primary)] group-data-[state=indeterminate]:bg-[var(--primary)] group-data-[state=indeterminate]:text-[var(--primary-fg)]",
+    "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-text-disabled",
+    "group-disabled:group-data-[state=indeterminate]:border-[var(--border-subtle)] group-disabled:group-data-[state=indeterminate]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=indeterminate]:text-text-disabled"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "size-[calc(var(--space-4)+var(--space-1))]",
+        md: "size-[calc(var(--space-4)+var(--space-1))]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var checkboxGroupItemVariants = cva11(
+  [
+    "group w-full cursor-pointer text-left transition-colors motion-reduce:transition-none",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
+    "disabled:cursor-not-allowed disabled:text-text-disabled"
+  ].join(" "),
+  {
+    variants: {
+      appearance: {
+        plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
+        card: [
+          "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
+          "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)]",
+          "hover:bg-[var(--action-hover)]",
+          "data-[state=checked]:border-[var(--border-strong)] data-[state=checked]:bg-[var(--action-selected)]",
+          "disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)]",
+          "disabled:data-[state=checked]:border-[var(--border-subtle)] disabled:data-[state=checked]:bg-[var(--action-disabled-bg)]"
+        ].join(" ")
+      },
+      density: {
+        comfortable: "",
+        compact: ""
+      }
+    },
+    compoundVariants: [
+      {
+        appearance: "card",
+        density: "comfortable",
+        className: "px-pad-default-x py-pad-roomy-y"
+      },
+      {
+        appearance: "card",
+        density: "compact",
+        className: "px-pad-compact-x py-pad-default-y"
+      }
+    ],
+    defaultVariants: {
+      appearance: "plain",
+      density: "comfortable"
+    }
+  }
+);
+var checkboxGroupBoxVariants = cva11(
+  "mt-[2px]",
+  {
+    variants: {
+      appearance: {
+        plain: "",
+        card: "mt-[var(--space-1)]"
+      }
+    },
+    defaultVariants: {
+      appearance: "plain"
+    }
+  }
+);
+var CheckboxGroupContext = React26.createContext(null);
+function getLabel(children, label) {
+  return children ?? label;
+}
+var Checkbox = React26.forwardRef(
+  ({
+    className,
+    size = "md",
+    fullWidth = false,
+    children,
+    label,
+    description,
+    required,
+    error,
+    id,
+    value,
+    name,
+    checked,
+    disabled,
+    onCheckedChange,
+    ...props
+  }, ref) => {
+    const group = React26.useContext(CheckboxGroupContext);
+    const generatedId = React26.useId();
+    const checkboxId = id ?? generatedId;
+    const labelContent = getLabel(children, label);
+    const isGrouped = Boolean(group && value != null);
+    const valueString = value == null ? void 0 : String(value);
+    const resolvedChecked = isGrouped && valueString ? group?.selectedValues.has(valueString) : checked;
+    const resolvedDisabled = disabled || group?.disabled;
+    const resolvedName = name ?? group?.name;
+    const labelId = `${checkboxId}-label`;
+    const descriptionId = description && !error ? `${checkboxId}-description` : void 0;
+    const errorId = error ? `${checkboxId}-error` : void 0;
+    const describedBy = errorId ?? descriptionId;
+    const handleCheckedChange = (nextChecked) => {
+      onCheckedChange?.(nextChecked);
+      if (isGrouped && valueString) {
+        group?.toggleValue(valueString, nextChecked === true);
+      }
+    };
+    if (isGrouped) {
+      const appearance = group?.appearance ?? "plain";
+      const density = group?.density ?? "comfortable";
+      return /* @__PURE__ */ jsxs29(
+        CheckboxPrimitive.Root,
+        {
+          ref,
+          id: checkboxId,
+          "data-slot": "checkbox",
+          "aria-labelledby": labelId,
+          "aria-describedby": describedBy,
+          "aria-required": required || void 0,
+          "aria-invalid": error ? true : void 0,
+          name: resolvedName,
+          value: valueString,
+          checked: resolvedChecked,
+          disabled: resolvedDisabled,
+          className: cn(
+            checkboxGroupItemVariants({ appearance, density }),
+            className
+          ),
+          onCheckedChange: handleCheckedChange,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx30(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-slot": "checkbox-box",
+                className: cn(
+                  checkboxBoxVariants({ size }),
+                  checkboxGroupBoxVariants({ appearance })
+                ),
+                children: /* @__PURE__ */ jsx30(
+                  CheckboxPrimitive.Indicator,
+                  {
+                    "data-slot": "checkbox-indicator",
+                    className: "flex items-center justify-center",
+                    children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx30(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx30(Check3, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+              /* @__PURE__ */ jsxs29(
+                "span",
+                {
+                  id: labelId,
+                  "data-slot": "checkbox-label",
+                  className: "text-sm font-medium leading-snug text-foreground group-disabled:text-text-disabled",
+                  children: [
+                    labelContent,
+                    required ? /* @__PURE__ */ jsx30(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "checkbox-required-marker",
+                        className: "ml-[var(--space-1)] font-bold text-[var(--semantic-error,var(--error))]",
+                        children: "*"
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              error ? /* @__PURE__ */ jsx30(
+                "span",
+                {
+                  id: errorId,
+                  role: "alert",
+                  "data-slot": "checkbox-error",
+                  className: "text-xs font-medium leading-normal text-[var(--error)]",
+                  children: error
+                }
+              ) : description ? /* @__PURE__ */ jsx30(
+                "span",
+                {
+                  id: descriptionId,
+                  "data-slot": "checkbox-description",
+                  className: "text-xs font-normal leading-normal text-text-tertiary group-disabled:text-text-disabled",
+                  children: description
+                }
+              ) : null
+            ] })
+          ]
+        }
+      );
+    }
+    const labelClassName = cn(
+      "cursor-pointer select-none text-left font-medium text-foreground",
+      size === "sm" ? "text-xs" : "text-sm",
+      resolvedDisabled && "cursor-not-allowed text-text-disabled"
+    );
+    return /* @__PURE__ */ jsxs29(
+      "div",
+      {
+        "data-slot": "checkbox-field",
+        "data-disabled": resolvedDisabled ? "" : void 0,
+        className: checkboxFieldVariants({ fullWidth }),
+        children: [
+          /* @__PURE__ */ jsxs29("div", { className: "inline-flex items-center gap-[var(--space-3)]", children: [
+            /* @__PURE__ */ jsx30(
+              CheckboxPrimitive.Root,
+              {
+                ref,
+                id: checkboxId,
+                "data-slot": "checkbox",
+                "aria-describedby": describedBy,
+                "aria-required": required || void 0,
+                "aria-invalid": error ? true : void 0,
+                name: resolvedName,
+                value: valueString,
+                checked: resolvedChecked,
+                disabled: resolvedDisabled,
+                className: cn(checkboxRootVariants(), className),
+                onCheckedChange: handleCheckedChange,
+                ...props,
+                children: /* @__PURE__ */ jsx30(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-slot": "checkbox-box",
+                    className: checkboxBoxVariants({ size }),
+                    children: /* @__PURE__ */ jsx30(
+                      CheckboxPrimitive.Indicator,
+                      {
+                        "data-slot": "checkbox-indicator",
+                        className: "flex items-center justify-center",
+                        children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx30(Minus, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx30(Check3, { "aria-hidden": "true", size: 14, strokeWidth: 2.5 })
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            labelContent ? /* @__PURE__ */ jsxs29(
+              "label",
+              {
+                id: labelId,
+                htmlFor: checkboxId,
+                "data-slot": "checkbox-label",
+                className: labelClassName,
+                children: [
+                  labelContent,
+                  required ? /* @__PURE__ */ jsx30(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      "data-slot": "checkbox-required-marker",
+                      className: "ml-[var(--space-1)] font-bold text-[var(--semantic-error,var(--error))]",
+                      children: "*"
+                    }
+                  ) : null
+                ]
+              }
+            ) : null
+          ] }),
+          error ? /* @__PURE__ */ jsx30(
+            "p",
+            {
+              id: errorId,
+              role: "alert",
+              "data-slot": "checkbox-error",
+              className: "ml-[32px] text-xs font-medium leading-normal text-[var(--error)]",
+              children: error
+            }
+          ) : description ? /* @__PURE__ */ jsx30(
+            "p",
+            {
+              id: descriptionId,
+              "data-slot": "checkbox-description",
+              className: cn(
+                "ml-[32px] text-xs font-normal leading-normal text-text-tertiary",
+                resolvedDisabled && "text-text-disabled"
+              ),
+              children: description
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/ui/data-table.tsx
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+var dataTableVariants = cva12(
+  [
+    "relative overflow-hidden rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
+    "text-foreground"
+  ].join(" "),
+  {
+    variants: {
+      density: {
+        standard: "",
+        compact: ""
+      },
+      surface: surfaceClassNames
+    },
+    defaultVariants: {
+      density: "standard",
+      surface: "surface"
+    }
+  }
+);
+var dataTableRowVariants = cva12(
+  [
+    "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
+    "text-body-sm leading-compact text-foreground",
+    "transition-colors motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      interactive: {
+        true: "cursor-pointer hover:bg-[var(--action-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]",
+        false: ""
+      },
+      selected: {
+        true: "bg-[var(--action-selected)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      interactive: false,
+      selected: false
+    }
+  }
+);
+var alignmentClass = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+};
+function getRowId(row, keyField) {
+  return String(row[keyField]);
 }
 function getGridTemplate(columns, selectable) {
   const columnWidths = columns.map((column) => column.width ?? "1fr");
@@ -4246,7 +5192,7 @@ function getRenderedCell(row, column) {
   if (value === null || value === void 0) {
     return null;
   }
-  if (React24.isValidElement(value)) {
+  if (React27.isValidElement(value)) {
     return value;
   }
   return String(value);
@@ -4286,7 +5232,7 @@ function isInteractiveTarget(target) {
 function SortIcon({ sort, columnKey }) {
   const isActive = sort?.key === columnKey;
   if (!isActive) {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx31(
       ChevronsUpDown,
       {
         "aria-hidden": "true",
@@ -4298,7 +5244,7 @@ function SortIcon({ sort, columnKey }) {
     );
   }
   const Icon = sort.dir === "asc" ? ChevronUp2 : ChevronDown3;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     Icon,
     {
       "aria-hidden": "true",
@@ -4321,7 +5267,7 @@ function MobileSortControls({
   if (sortableColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-slot": "data-table-mobile-sort-toolbar",
@@ -4332,11 +5278,11 @@ function MobileSortControls({
         surfaceClassNames[surface]
       ),
       children: [
-        /* @__PURE__ */ jsx26("span", { className: "text-[12px] font-medium text-text-tertiary", children: "\uC815\uB82C" }),
+        /* @__PURE__ */ jsx31("span", { className: "text-[12px] font-medium text-text-tertiary", children: "\uC815\uB82C" }),
         sortableColumns.map((column) => {
           const active = sortBy?.key === column.key;
           const nextSort = getNextSort(sortBy, column.key);
-          return /* @__PURE__ */ jsx26(
+          return /* @__PURE__ */ jsx31(
             Button,
             {
               type: "button",
@@ -4345,9 +5291,9 @@ function MobileSortControls({
               variant: active ? "secondary" : "outline",
               "aria-pressed": active,
               onClick: () => onSortChange?.(column.key, nextSort),
-              children: /* @__PURE__ */ jsxs25("span", { className: "inline-flex min-w-0 items-center gap-[var(--space-1)]", children: [
-                /* @__PURE__ */ jsx26("span", { className: "truncate", children: column.header }),
-                /* @__PURE__ */ jsx26(SortIcon, { sort: sortBy, columnKey: column.key })
+              children: /* @__PURE__ */ jsxs30("span", { className: "inline-flex min-w-0 items-center gap-[var(--space-1)]", children: [
+                /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }),
+                /* @__PURE__ */ jsx31(SortIcon, { sort: sortBy, columnKey: column.key })
               ] })
             },
             column.key
@@ -4367,17 +5313,17 @@ function SkeletonRows({
     // role="table"의 허용 자식은 row/rowgroup뿐이라 컨테이너는 rowgroup이어야 한다.
     // 로딩 알림은 그 안의 row/cell 안에 둔다 — 종전에는 컨테이너가 role="status"라
     // aria-required-children(Critical)이 났다.
-    /* @__PURE__ */ jsxs25("div", { role: "rowgroup", children: [
-      /* @__PURE__ */ jsx26("div", { role: "row", children: /* @__PURE__ */ jsx26("div", { role: "cell", "aria-colindex": 1, "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", children: /* @__PURE__ */ jsx26("span", { role: "status", className: "sr-only", children: "\uB370\uC774\uD130 \uB85C\uB4DC \uC911" }) }) }),
-      Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs30("div", { role: "rowgroup", children: [
+      /* @__PURE__ */ jsx31("div", { role: "row", children: /* @__PURE__ */ jsx31("div", { role: "cell", "aria-colindex": 1, "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911", children: /* @__PURE__ */ jsx31("span", { role: "status", className: "sr-only", children: "\uB370\uC774\uD130 \uB85C\uB4DC \uC911" }) }) }),
+      Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs30(
         "div",
         {
           "data-slot": "data-table-skeleton-row",
           className: "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
           style: { gridTemplateColumns },
           children: [
-            selectable ? /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
-            columns.map((column, columnIndex) => /* @__PURE__ */ jsx26("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx26(
+            selectable ? /* @__PURE__ */ jsx31("div", { "aria-hidden": "true", className: "px-[var(--space-4)]" }) : null,
+            columns.map((column, columnIndex) => /* @__PURE__ */ jsx31("div", { className: "px-[var(--space-4)] py-[var(--space-2)]", children: /* @__PURE__ */ jsx31(
               "div",
               {
                 className: cn(
@@ -4394,22 +5340,22 @@ function SkeletonRows({
   );
 }
 function MobileSkeletonCards({ count }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       "data-slot": "data-table-mobile-skeleton",
       "aria-label": "\uB370\uC774\uD130 \uB85C\uB4DC \uC911",
       role: "status",
       className: "md:hidden",
-      children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs25(
+      children: Array.from({ length: count }, (_, rowIndex) => /* @__PURE__ */ jsxs30(
         "div",
         {
           "data-slot": "data-table-mobile-skeleton-card",
           className: "flex flex-col gap-[var(--space-2)] border-t border-[var(--border-subtle)] px-[var(--space-4)] py-[var(--space-4)]",
           children: [
-            /* @__PURE__ */ jsx26("div", { className: "h-[14px] w-[72%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" }),
-            /* @__PURE__ */ jsx26("div", { className: "h-[12px] w-[56%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" }),
-            /* @__PURE__ */ jsx26("div", { className: "h-[12px] w-[64%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" })
+            /* @__PURE__ */ jsx31("div", { className: "h-[14px] w-[72%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" }),
+            /* @__PURE__ */ jsx31("div", { className: "h-[12px] w-[56%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" }),
+            /* @__PURE__ */ jsx31("div", { className: "h-[12px] w-[64%] animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]" })
           ]
         },
         rowIndex
@@ -4467,7 +5413,7 @@ function DataTableInner({
     }
     emitSelection(nextIds);
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       ref,
@@ -4475,7 +5421,7 @@ function DataTableInner({
       className: cn(dataTableVariants({ density, surface, className })),
       ...props,
       children: [
-        selectable ? /* @__PURE__ */ jsx26(
+        selectable ? /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-selection-status",
@@ -4484,17 +5430,17 @@ function DataTableInner({
             children: selectedCount > 0 ? `${selectedCount.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : ""
           }
         ) : null,
-        loading && data.length > 0 ? /* @__PURE__ */ jsx26(
+        loading && data.length > 0 ? /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-progress",
             "aria-hidden": "true",
             className: "absolute left-0 right-0 top-0 z-10 h-[2px] overflow-hidden bg-[var(--action-selected)]",
-            children: /* @__PURE__ */ jsx26("div", { className: "h-full w-1/3 animate-pulse bg-[var(--primary)]" })
+            children: /* @__PURE__ */ jsx31("div", { className: "h-full w-1/3 animate-pulse bg-[var(--primary)]" })
           }
         ) : null,
-        /* @__PURE__ */ jsx26("div", { "data-slot": "data-table-desktop", className: "max-md:hidden md:block", children: /* @__PURE__ */ jsxs25("div", { role: "table", "aria-label": ariaLabel, children: [
-          /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsx31("div", { "data-slot": "data-table-desktop", className: "max-md:hidden md:block", children: /* @__PURE__ */ jsxs30("div", { role: "table", "aria-label": ariaLabel, children: [
+          /* @__PURE__ */ jsxs30(
             "div",
             {
               "data-slot": "data-table-header",
@@ -4502,20 +5448,20 @@ function DataTableInner({
               className: "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold uppercase leading-snug text-text-tertiary",
               style: { gridTemplateColumns },
               children: [
-                selectable ? /* @__PURE__ */ jsx26("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx26(
+                selectable ? /* @__PURE__ */ jsx31("div", { role: "columnheader", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx31(
                   Checkbox,
                   {
                     "aria-label": "\uC804\uCCB4 \uD589 \uC120\uD0DD",
                     checked: partiallySelected ? "indeterminate" : allVisibleRowsSelected,
                     onCheckedChange: (nextChecked) => toggleAllRows(nextChecked === true),
-                    children: /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "\uC804\uCCB4 \uD589 \uC120\uD0DD" })
+                    children: /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "\uC804\uCCB4 \uD589 \uC120\uD0DD" })
                   }
                 ) }) : null,
                 columns.map((column) => {
                   const align = column.align ?? "left";
                   const nextSort = getNextSort(sortBy, column.key);
                   const ariaSort = sortBy?.key === column.key ? sortBy.dir === "asc" ? "ascending" : "descending" : void 0;
-                  return /* @__PURE__ */ jsx26(
+                  return /* @__PURE__ */ jsx31(
                     "div",
                     {
                       role: "columnheader",
@@ -4524,7 +5470,7 @@ function DataTableInner({
                         "flex min-w-0 items-center gap-[var(--space-1)] px-[var(--space-4)] py-[var(--space-2)]",
                         alignmentClass[align]
                       ),
-                      children: column.sortable ? /* @__PURE__ */ jsxs25(
+                      children: column.sortable ? /* @__PURE__ */ jsxs30(
                         "button",
                         {
                           type: "button",
@@ -4535,11 +5481,11 @@ function DataTableInner({
                           ),
                           onClick: () => onSortChange?.(column.key, nextSort),
                           children: [
-                            /* @__PURE__ */ jsx26("span", { className: "truncate", children: column.header }),
-                            /* @__PURE__ */ jsx26(SortIcon, { sort: sortBy, columnKey: column.key })
+                            /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }),
+                            /* @__PURE__ */ jsx31(SortIcon, { sort: sortBy, columnKey: column.key })
                           ]
                         }
-                      ) : /* @__PURE__ */ jsx26("span", { className: "truncate", children: column.header })
+                      ) : /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header })
                     },
                     column.key
                   );
@@ -4547,7 +5493,7 @@ function DataTableInner({
               ]
             }
           ),
-          loading && data.length === 0 ? /* @__PURE__ */ jsx26(
+          loading && data.length === 0 ? /* @__PURE__ */ jsx31(
             SkeletonRows,
             {
               columns,
@@ -4558,7 +5504,7 @@ function DataTableInner({
           ) : data.length === 0 ? (
             /* role="table" 직계 자식은 row/rowgroup이어야 한다. data-slot과 테두리는
                그대로 유지해 시각 계약을 깨지 않는다(빈 상태에서도 표가 테두리를 그린다). */
-            /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: /* @__PURE__ */ jsx26("div", { role: "row", children: /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx31("div", { role: "rowgroup", children: /* @__PURE__ */ jsx31("div", { role: "row", children: /* @__PURE__ */ jsx31(
               "div",
               {
                 role: "cell",
@@ -4568,12 +5514,12 @@ function DataTableInner({
                 children: emptyState
               }
             ) }) })
-          ) : /* @__PURE__ */ jsx26("div", { role: "rowgroup", children: data.map((row) => {
+          ) : /* @__PURE__ */ jsx31("div", { role: "rowgroup", children: data.map((row) => {
             const rowId = getRowId(row, keyField);
             const selected = resolvedSelectedIds.has(rowId);
             const visuallySelected = selected || rowId === activeRowId;
             const href = rowHref?.(row);
-            return /* @__PURE__ */ jsxs25(
+            return /* @__PURE__ */ jsxs30(
               "div",
               {
                 "data-slot": "data-table-row",
@@ -4600,13 +5546,13 @@ function DataTableInner({
                   }
                 },
                 children: [
-                  selectable ? /* @__PURE__ */ jsx26("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx26(
+                  selectable ? /* @__PURE__ */ jsx31("div", { role: "cell", className: "px-[var(--space-4)]", children: /* @__PURE__ */ jsx31(
                     Checkbox,
                     {
                       "aria-label": `${String(row[columns[0]?.key] ?? rowId)} \uD589 \uC120\uD0DD`,
                       checked: selected,
                       onCheckedChange: (nextChecked) => toggleRow(rowId, nextChecked === true),
-                      children: /* @__PURE__ */ jsxs25("span", { className: "sr-only", children: [
+                      children: /* @__PURE__ */ jsxs30("span", { className: "sr-only", children: [
                         rowId,
                         " \uD589 \uC120\uD0DD"
                       ] })
@@ -4614,7 +5560,7 @@ function DataTableInner({
                   ) }) : null,
                   columns.map((column) => {
                     const align = column.align ?? "left";
-                    return /* @__PURE__ */ jsx26(
+                    return /* @__PURE__ */ jsx31(
                       "div",
                       {
                         "data-slot": "data-table-cell",
@@ -4625,7 +5571,7 @@ function DataTableInner({
                           column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null,
                           align === "right" ? "text-text-tertiary" : null
                         ),
-                        children: /* @__PURE__ */ jsx26("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
+                        children: /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
                       },
                       column.key
                     );
@@ -4636,7 +5582,7 @@ function DataTableInner({
             );
           }) })
         ] }) }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx31(
           MobileSortControls,
           {
             columns,
@@ -4646,14 +5592,14 @@ function DataTableInner({
             surface
           }
         ),
-        loading && data.length === 0 ? /* @__PURE__ */ jsx26(MobileSkeletonCards, { count: skeletonRowCount }) : data.length === 0 ? /* @__PURE__ */ jsx26(
+        loading && data.length === 0 ? /* @__PURE__ */ jsx31(MobileSkeletonCards, { count: skeletonRowCount }) : data.length === 0 ? /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-mobile-empty",
             className: "border-t border-[var(--border-subtle)] p-[var(--space-4)] md:hidden",
             children: emptyState
           }
-        ) : /* @__PURE__ */ jsx26(
+        ) : /* @__PURE__ */ jsx31(
           "div",
           {
             "data-slot": "data-table-mobile-list",
@@ -4667,7 +5613,7 @@ function DataTableInner({
               const href = rowHref?.(row);
               const primaryText = getAccessibleCellText(row, primaryColumn, rowId);
               const primaryLabel = primaryColumn ? getHeaderLabel(primaryColumn) : "\uD589";
-              return /* @__PURE__ */ jsxs25(
+              return /* @__PURE__ */ jsxs30(
                 "div",
                 {
                   "data-slot": "data-table-mobile-card",
@@ -4699,20 +5645,20 @@ function DataTableInner({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs25("div", { className: "flex min-w-0 items-start gap-[var(--space-3)]", children: [
-                      selectable ? /* @__PURE__ */ jsx26("div", { "data-slot": "data-table-mobile-card-select", className: "shrink-0 pt-[2px]", children: /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsxs30("div", { className: "flex min-w-0 items-start gap-[var(--space-3)]", children: [
+                      selectable ? /* @__PURE__ */ jsx31("div", { "data-slot": "data-table-mobile-card-select", className: "shrink-0 pt-[2px]", children: /* @__PURE__ */ jsx31(
                         Checkbox,
                         {
                           "aria-label": `${primaryText} \uBAA8\uBC14\uC77C \uCE74\uB4DC \uC120\uD0DD`,
                           checked: selected,
                           onCheckedChange: (nextChecked) => toggleRow(rowId, nextChecked === true),
-                          children: /* @__PURE__ */ jsxs25("span", { className: "sr-only", children: [
+                          children: /* @__PURE__ */ jsxs30("span", { className: "sr-only", children: [
                             rowId,
                             " \uBAA8\uBC14\uC77C \uCE74\uB4DC \uC120\uD0DD"
                           ] })
                         }
                       ) }) : null,
-                      /* @__PURE__ */ jsx26(
+                      /* @__PURE__ */ jsx31(
                         "div",
                         {
                           "data-slot": "data-table-mobile-card-primary",
@@ -4721,16 +5667,16 @@ function DataTableInner({
                         }
                       )
                     ] }),
-                    secondaryColumns.length > 0 ? /* @__PURE__ */ jsx26("dl", { className: "grid min-w-0 gap-[var(--space-2)]", children: secondaryColumns.map((column) => {
+                    secondaryColumns.length > 0 ? /* @__PURE__ */ jsx31("dl", { className: "grid min-w-0 gap-[var(--space-2)]", children: secondaryColumns.map((column) => {
                       const align = column.align ?? "left";
-                      return /* @__PURE__ */ jsxs25(
+                      return /* @__PURE__ */ jsxs30(
                         "div",
                         {
                           "data-slot": "data-table-mobile-card-field",
                           className: "grid min-w-0 grid-cols-[minmax(0,0.42fr)_minmax(0,1fr)] gap-[var(--space-2)] text-[12px] leading-snug",
                           children: [
-                            /* @__PURE__ */ jsx26("dt", { className: "min-w-0 text-text-tertiary", children: /* @__PURE__ */ jsx26("span", { className: "truncate", children: column.header }) }),
-                            /* @__PURE__ */ jsx26(
+                            /* @__PURE__ */ jsx31("dt", { className: "min-w-0 text-text-tertiary", children: /* @__PURE__ */ jsx31("span", { className: "truncate", children: column.header }) }),
+                            /* @__PURE__ */ jsx31(
                               "dd",
                               {
                                 className: cn(
@@ -4738,7 +5684,7 @@ function DataTableInner({
                                   alignmentClass[align],
                                   column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null
                                 ),
-                                children: /* @__PURE__ */ jsx26("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
+                                children: /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
                               }
                             )
                           ]
@@ -4757,27 +5703,27 @@ function DataTableInner({
     }
   );
 }
-var DataTable = React24.forwardRef(DataTableInner);
+var DataTable = React27.forwardRef(DataTableInner);
 DataTable.displayName = "DataTable";
 
 // src/components/ui/dropdown-menu.tsx
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx32(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx32(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -4790,7 +5736,7 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.Content,
     {
       "data-slot": "dropdown-menu-content",
@@ -4798,7 +5744,7 @@ function DropdownMenuContent({
       className: cn(
         "z-[var(--z-popover)] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem]",
         "origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
-        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
+        "rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -4813,7 +5759,7 @@ function DropdownMenuContent({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+  return /* @__PURE__ */ jsx32(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
 }
 function DropdownMenuItem({
   className,
@@ -4821,7 +5767,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -4848,7 +5794,7 @@ function DropdownMenuCheckboxItem({
   checked,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs31(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -4864,7 +5810,7 @@ function DropdownMenuCheckboxItem({
       checked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx27("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx27(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx27(CheckIcon, { size: 16 }) }) }),
+        /* @__PURE__ */ jsx32("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx32(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx32(CheckIcon, { size: 16 }) }) }),
         children
       ]
     }
@@ -4873,7 +5819,7 @@ function DropdownMenuCheckboxItem({
 function DropdownMenuRadioGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -4886,7 +5832,7 @@ function DropdownMenuRadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs31(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
@@ -4901,7 +5847,7 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx27("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx27(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx27(CircleIcon, { size: 8, className: "fill-current" }) }) }),
+        /* @__PURE__ */ jsx32("span", { className: "pointer-events-none absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx32(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx32(CircleIcon, { size: 8, className: "fill-current" }) }) }),
         children
       ]
     }
@@ -4912,7 +5858,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.Label,
     {
       "data-slot": "dropdown-menu-label",
@@ -4929,7 +5875,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -4942,7 +5888,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -4957,7 +5903,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx32(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -4965,7 +5911,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs31(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -4982,7 +5928,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx27(ChevronRightIcon, { className: "ml-auto", size: 16 })
+        /* @__PURE__ */ jsx32(ChevronRightIcon, { className: "ml-auto", size: 16 })
       ]
     }
   );
@@ -4991,13 +5937,13 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuPrimitive.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
         "z-[var(--z-popover)] min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
-        "rounded-sm border border-[var(--border)] bg-canvas p-[var(--space-1)] text-text-primary shadow-2",
+        "rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] p-[var(--space-1)] text-text-primary shadow-2",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
         "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -5011,7 +5957,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/ui/context-menu.tsx
-import { jsx as jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 function ContextMenu({
   open,
   onOpenChange,
@@ -5022,8 +5968,8 @@ function ContextMenu({
   if (!position) {
     return null;
   }
-  return /* @__PURE__ */ jsxs27(DropdownMenu, { open, onOpenChange, modal: false, children: [
-    /* @__PURE__ */ jsx28(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs32(DropdownMenu, { open, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx33(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
       "span",
       {
         "aria-hidden": "true",
@@ -5037,18 +5983,18 @@ function ContextMenu({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx28(DropdownMenuContent, { ...contentProps, children })
+    /* @__PURE__ */ jsx33(DropdownMenuContent, { ...contentProps, children })
   ] });
 }
 
 // src/components/ui/bulk-action-bar.tsx
-import { X as X2 } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { X as X3 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function ActionButton({ action }) {
   const danger = action.variant === "destructive";
   const off = action.disabled;
   const Icon = action.icon;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs33(
     "button",
     {
       type: "button",
@@ -5075,7 +6021,7 @@ function ActionButton({ action }) {
         whiteSpace: "nowrap"
       },
       children: [
-        Icon ? /* @__PURE__ */ jsx29(
+        Icon ? /* @__PURE__ */ jsx34(
           Icon,
           {
             "aria-hidden": "true",
@@ -5090,7 +6036,7 @@ function ActionButton({ action }) {
   );
 }
 function Divider() {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       "aria-hidden": "true",
@@ -5105,7 +6051,7 @@ function Divider() {
   );
 }
 function ClearButton({ onClear }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx34(
     "button",
     {
       type: "button",
@@ -5127,7 +6073,7 @@ function ClearButton({ onClear }) {
         justifyContent: "center",
         borderRadius: "var(--radius-sm)"
       },
-      children: /* @__PURE__ */ jsx29(X2, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx34(X3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" })
     }
   );
 }
@@ -5143,7 +6089,7 @@ function BulkActionBar({
   if (count === 0 && emptyHint === void 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       role: "toolbar",
@@ -5175,7 +6121,7 @@ function BulkActionBar({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx34(
           "span",
           {
             "data-slot": "bulk-action-bar-count",
@@ -5192,8 +6138,8 @@ function BulkActionBar({
             children: count > 0 ? `${count.toLocaleString("ko-KR")}\uAC1C \uC120\uD0DD\uB428` : emptyHint
           }
         ),
-        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx29(Divider, {}) : null,
-        /* @__PURE__ */ jsx29(
+        count > 0 && actions.length > 0 ? /* @__PURE__ */ jsx34(Divider, {}) : null,
+        /* @__PURE__ */ jsx34(
           "div",
           {
             "data-slot": "bulk-action-bar-actions",
@@ -5205,25 +6151,25 @@ function BulkActionBar({
               justifyContent: "flex-end",
               gap: 2
             },
-            children: actions.map((action) => /* @__PURE__ */ jsx29(ActionButton, { action }, action.key))
+            children: actions.map((action) => /* @__PURE__ */ jsx34(ActionButton, { action }, action.key))
           }
         ),
-        /* @__PURE__ */ jsx29(Divider, {}),
-        /* @__PURE__ */ jsx29(ClearButton, { onClear })
+        /* @__PURE__ */ jsx34(Divider, {}),
+        /* @__PURE__ */ jsx34(ClearButton, { onClear })
       ]
     }
   );
 }
 
 // src/components/ui/confirm-dialog.tsx
-import * as React25 from "react";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
 var confirmDialogContentClassName = cn(
   "fixed left-1/2 top-1/2 z-[var(--z-modal)]",
   "-translate-x-1/2 -translate-y-1/2",
   "w-[calc(100vw-2rem)] max-w-[420px]",
   "flex flex-col gap-[var(--space-6)]",
-  "bg-[var(--bg-raised)] border border-[var(--border-subtle)]",
+  "bg-[var(--bg-surface)] border border-[var(--border)]",
   "rounded-[var(--radius-lg)] p-[var(--space-6)] shadow-[var(--shadow-4)]",
   "text-foreground"
 );
@@ -5245,10 +6191,10 @@ function ConfirmDialog({
   onConfirm,
   loading = false
 }) {
-  const [pending, setPending] = React25.useState(false);
-  const busyRef = React25.useRef(false);
+  const [pending, setPending] = React28.useState(false);
+  const busyRef = React28.useRef(false);
   const isBusy = loading || pending;
-  const handleOpenChange = React25.useCallback(
+  const handleOpenChange = React28.useCallback(
     (nextOpen) => {
       if (!nextOpen && isBusy) {
         return;
@@ -5257,7 +6203,7 @@ function ConfirmDialog({
     },
     [isBusy, onOpenChange]
   );
-  const handleConfirm = React25.useCallback(async () => {
+  const handleConfirm = React28.useCallback(async () => {
     if (busyRef.current || loading) {
       return;
     }
@@ -5271,9 +6217,9 @@ function ConfirmDialog({
       setPending(false);
     }
   }, [loading, onConfirm, onOpenChange]);
-  const dialogBody = /* @__PURE__ */ jsxs29(Fragment7, { children: [
-    /* @__PURE__ */ jsx30("div", { className: "flex items-start justify-between gap-[var(--space-4)]", children: /* @__PURE__ */ jsxs29("div", { className: "min-w-0 space-y-[var(--space-2)]", children: [
-      /* @__PURE__ */ jsx30(
+  const dialogBody = /* @__PURE__ */ jsxs34(Fragment8, { children: [
+    /* @__PURE__ */ jsx35("div", { className: "flex items-start justify-between gap-[var(--space-4)]", children: /* @__PURE__ */ jsxs34("div", { className: "min-w-0 space-y-[var(--space-2)]", children: [
+      /* @__PURE__ */ jsx35(
         DialogTitle,
         {
           "data-slot": "dialog-title",
@@ -5281,570 +6227,139 @@ function ConfirmDialog({
           children: title
         }
       ),
-      description ? /* @__PURE__ */ jsx30(
+      description ? /* @__PURE__ */ jsx35(
         DialogDescription,
         {
           "data-slot": "dialog-description",
           className: confirmDialogDescriptionClassName,
-          children: description
-        }
-      ) : null
-    ] }) }),
-    /* @__PURE__ */ jsxs29(
-      "div",
-      {
-        "data-slot": "dialog-footer",
-        className: confirmDialogFooterClassName,
-        children: [
-          /* @__PURE__ */ jsx30(Button, { variant: "secondary", disabled: isBusy, onClick: () => handleOpenChange(false), children: cancelLabel }),
-          /* @__PURE__ */ jsx30(
-            Button,
-            {
-              variant: tone === "destructive" ? "destructive" : "primary",
-              loading: isBusy,
-              onClick: handleConfirm,
-              children: confirmLabel
-            }
-          )
-        ]
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx30(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs29(DialogPortal, { children: [
-    /* @__PURE__ */ jsx30(DialogOverlay, {}),
-    /* @__PURE__ */ jsx30(DialogRawContent, { role: "alertdialog", "data-slot": "dialog-content", className: confirmDialogContentClassName, children: dialogBody })
-  ] }) });
-}
-
-// src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx31 } from "react/jsx-runtime";
-function Separator2({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx31(
-    SeparatorPrimitive.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/avatar.tsx
-import { Avatar as AvatarPrimitive } from "radix-ui";
-import { jsx as jsx32 } from "react/jsx-runtime";
-function Avatar({
-  className,
-  size = "md",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx32(
-    AvatarPrimitive.Root,
-    {
-      "data-slot": "avatar",
-      "data-size": size,
-      className: cn(
-        "group/avatar relative flex shrink-0 overflow-hidden rounded-full select-none",
-        "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-secondary",
-        "h-9 w-9",
-        "data-[size=sm]:h-8 data-[size=sm]:w-8",
-        "data-[size=lg]:h-11 data-[size=lg]:w-11",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx32(
-    AvatarPrimitive.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square h-full w-full object-cover", className),
-      ...props
-    }
-  );
-}
-function getAvatarFallbackText(name) {
-  const trimmedName = name.trim();
-  if (!trimmedName) return null;
-  const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter("ko", { granularity: "grapheme" }) : null;
-  if (segmenter) {
-    return segmenter.segment(trimmedName)[Symbol.iterator]().next().value?.segment ?? null;
-  }
-  return Array.from(trimmedName)[0] ?? null;
-}
-function AvatarFallback({
-  className,
-  children,
-  name,
-  ...props
-}) {
-  const fallbackText = children ?? (name ? getAvatarFallbackText(name) : null);
-  return /* @__PURE__ */ jsx32(
-    AvatarPrimitive.Fallback,
-    {
-      "data-slot": "avatar-fallback",
-      className: cn(
-        "flex h-full w-full items-center justify-center rounded-full",
-        "bg-[var(--bg-raised)] text-sm font-semibold text-text-secondary",
-        "font-[family-name:var(--font-display)]",
-        "group-data-[size=sm]/avatar:text-xs",
-        className
-      ),
-      ...props,
-      children: fallbackText
-    }
-  );
-}
-
-// src/components/ui/sheet.tsx
-import { XIcon as XIcon2 } from "lucide-react";
-import { Dialog as SheetPrimitive } from "radix-ui";
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
-var defaultSheetMotionConfig = {
-  type: "slide",
-  duration: 300,
-  easing: "decel"
-};
-var sheetMotionEasingValue = {
-  standard: "var(--ease-standard)",
-  // decel/sharp have no canonical --ease-* token; these compat beziers are frozen
-  // specifically to back this public `easing` prop (see tokens/compat.css).
-  decel: "var(--easing-decel)",
-  accel: "var(--ease-in)",
-  sharp: "var(--easing-sharp)",
-  bounce: "var(--ease-out)"
-};
-function resolveSheetMotionConfig(motion) {
-  if (motion === false) return false;
-  return {
-    ...defaultSheetMotionConfig,
-    ...motion
-  };
-}
-function formatSheetMotionDuration(duration) {
-  return typeof duration === "number" ? `${duration}ms` : duration;
-}
-function getSheetMotionStyle(motionConfig, style) {
-  if (!motionConfig) return style;
-  return {
-    ...style,
-    "--sheet-motion-duration": formatSheetMotionDuration(motionConfig.duration),
-    "--sheet-motion-easing": sheetMotionEasingValue[motionConfig.easing]
-  };
-}
-function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx33(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
-}
-function SheetTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx33(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
-}
-function SheetClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx33(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
-}
-function SheetPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx33(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
-}
-function SheetOverlay({
-  className,
-  motion,
-  style,
-  ...props
-}) {
-  const motionConfig = resolveSheetMotionConfig(motion);
-  return /* @__PURE__ */ jsx33(
-    SheetPrimitive.Overlay,
-    {
-      "data-slot": "sheet-overlay",
-      className: cn(
-        "fixed inset-0 z-[var(--z-overlay)] bg-black/50",
-        motionConfig && cn(
-          "transition-opacity motion-reduce:transition-none",
-          "duration-[var(--sheet-motion-duration)]",
-          "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
-          "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
-          "data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]",
-          "motion-reduce:animate-none"
-        ),
-        className
-      ),
-      style: getSheetMotionStyle(motionConfig, style),
-      ...props
-    }
-  );
-}
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  mobileSide,
-  motion,
-  showCloseButton = false,
-  style,
-  ...props
-}) {
-  const motionConfig = resolveSheetMotionConfig(motion);
-  const hasSlideMotion = motionConfig && motionConfig.type === "slide";
-  return /* @__PURE__ */ jsxs30(SheetPortal, { children: [
-    /* @__PURE__ */ jsx33(SheetOverlay, { motion: motionConfig }),
-    /* @__PURE__ */ jsxs30(
-      SheetPrimitive.Content,
+          children: description
+        }
+      ) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs34(
+      "div",
       {
-        "data-slot": "sheet-content",
-        className: cn(
-          "fixed z-[var(--z-modal)] flex flex-col gap-4 border-[var(--border)] bg-background shadow-lg",
-          motionConfig && cn(
-            "motion-reduce:animate-none",
-            motionConfig.type === "fade" && "data-[state=open]:animate-[olun-sheet-fade-in_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-fade-out_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "right" && cn(
-            "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "left" && cn(
-            "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "top" && cn(
-            "inset-x-0 top-0 h-auto border-b",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          side === "bottom" && cn(
-            "inset-x-0 bottom-0 h-auto border-t",
-            hasSlideMotion && "data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "right" && cn(
-            "max-[899px]:inset-y-0 max-[899px]:right-0 max-[899px]:left-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-l max-[899px]:border-t-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-right_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "left" && cn(
-            "max-[899px]:inset-y-0 max-[899px]:left-0 max-[899px]:right-auto max-[899px]:h-full max-[899px]:w-3/4 max-[899px]:border-r max-[899px]:border-t-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-left_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "top" && cn(
-            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap (see mobileSide bottom).
-            "max-[899px]:inset-x-0 max-[899px]:top-0 max-[899px]:bottom-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-b max-[899px]:border-l-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-top_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          mobileSide === "bottom" && cn(
-            // `max-w-none!` overrides the side variant's `sm:max-w-sm` cap so the bottom sheet
-            // spans the full viewport width across the whole < 900px band (not capped to 24rem).
-            "max-[899px]:inset-x-0 max-[899px]:bottom-0 max-[899px]:top-auto max-[899px]:h-auto max-[899px]:w-full max-[899px]:max-w-none! max-[899px]:border-t max-[899px]:border-l-0 max-[899px]:rounded-none",
-            hasSlideMotion && "max-[899px]:data-[state=open]:animate-[olun-sheet-in-from-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both] max-[899px]:data-[state=closed]:animate-[olun-sheet-out-to-bottom_var(--sheet-motion-duration)_var(--sheet-motion-easing)_both]"
-          ),
-          className
-        ),
-        style: getSheetMotionStyle(motionConfig, style),
-        ...props,
+        "data-slot": "dialog-footer",
+        className: confirmDialogFooterClassName,
         children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs30(SheetPrimitive.Close, { className: "absolute top-4 right-4 cursor-pointer rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ jsx33(XIcon2, { className: "size-[16px]" }),
-            /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Close" })
-          ] })
+          /* @__PURE__ */ jsx35(Button, { variant: "secondary", disabled: isBusy, onClick: () => handleOpenChange(false), children: cancelLabel }),
+          /* @__PURE__ */ jsx35(
+            Button,
+            {
+              variant: tone === "destructive" ? "destructive" : "primary",
+              loading: isBusy,
+              onClick: handleConfirm,
+              children: confirmLabel
+            }
+          )
         ]
       }
     )
   ] });
+  return /* @__PURE__ */ jsx35(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs34(DialogPortal, { children: [
+    /* @__PURE__ */ jsx35(DialogOverlay, {}),
+    /* @__PURE__ */ jsx35(DialogRawContent, { role: "alertdialog", "data-slot": "dialog-content", className: confirmDialogContentClassName, children: dialogBody })
+  ] }) });
 }
-function SheetBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx33(
-    "div",
-    {
-      "data-slot": "sheet-body",
-      className: cn("flex-1 overflow-y-auto p-4", className),
-      ...props
-    }
-  );
-}
-function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx33(
-    "div",
-    {
-      "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx33(
-    "div",
-    {
-      "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
-      ...props
-    }
-  );
-}
-function SheetTitle({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx33(
-    SheetPrimitive.Title,
-    {
-      "data-slot": "sheet-title",
-      className: cn("font-semibold text-foreground", className),
-      ...props
-    }
-  );
-}
-function SheetDescription({
+
+// src/components/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx as jsx36 } from "react/jsx-runtime";
+function Separator2({
   className,
+  orientation = "horizontal",
+  decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(
-    SheetPrimitive.Description,
+  return /* @__PURE__ */ jsx36(
+    SeparatorPrimitive.Root,
     {
-      "data-slot": "sheet-description",
-      className: cn("text-sm text-muted-foreground", className),
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
       ...props
     }
   );
 }
 
-// src/components/ui/sheet-drawer.tsx
-import { Maximize2Icon, Minimize2Icon, XIcon as XIcon3 } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
-var sheetDrawerContentClassName = cn(
-  "gap-0 p-0",
-  "bg-[var(--bg-surface)] text-foreground",
-  "border-[var(--border)] shadow-[var(--shadow-4)]",
-  "min-[900px]:w-[480px] min-[900px]:max-w-[480px]",
-  "max-[899px]:h-[min(85dvh,720px)] max-[899px]:max-h-[85dvh] max-[899px]:w-full max-[899px]:max-w-none",
-  "max-[899px]:rounded-t-[var(--radius-lg)]"
-);
-var sheetDrawerWideContentClassName = "min-[900px]:w-[720px] min-[900px]:max-w-[720px]";
-var sheetDrawerFullContentClassName = cn(
-  "min-[900px]:w-[calc(100vw_-_var(--space-8))] min-[900px]:max-w-[calc(100vw_-_var(--space-8))]",
-  "max-[899px]:h-[100dvh] max-[899px]:max-h-[100dvh] max-[899px]:rounded-none"
-);
-var sheetDrawerHeaderClassName = cn(
-  "flex items-start justify-between gap-[var(--space-4)]",
-  "border-b border-[var(--border)] px-[var(--space-6)] py-[var(--space-6)]"
-);
-var sheetDrawerHeaderTextClassName = "flex min-w-0 flex-1 flex-col gap-[var(--space-2)]";
-var sheetDrawerCaptionClassName = "flex flex-wrap items-center gap-[var(--space-2)]";
-var sheetDrawerTitleClassName = "text-[18px] font-bold leading-snug text-foreground";
-var sheetDrawerDescriptionClassName = "break-keep text-[14px] leading-normal text-text-secondary";
-var sheetDrawerCloseButtonClassName = cn(
-  "flex size-[32px] shrink-0 cursor-pointer items-center justify-center",
-  "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
-  "hover:bg-[var(--action-hover)] hover:text-foreground",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2"
-);
-var sheetDrawerHeaderActionsClassName = cn(
-  "flex shrink-0 items-center gap-[var(--space-1)]"
-);
-var sheetDrawerExpandButtonClassName = cn(
-  "inline-flex cursor-pointer items-center justify-center gap-[var(--space-1)]",
-  "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
-  "hover:bg-[var(--action-hover)] hover:text-foreground",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2",
-  "h-[32px] px-[var(--space-2)]"
-);
-var sheetDrawerBodyClassName = cn(
-  "min-h-0 flex-1 overflow-y-auto",
-  "px-[var(--space-6)] py-[var(--space-6)]"
-);
-var sheetDrawerFooterClassName = cn(
-  "border-t border-[var(--border)] px-[var(--space-6)] py-[var(--space-4)]",
-  "flex justify-end gap-[var(--space-2)]"
-);
-function SheetDrawer({
-  open,
-  onOpenChange,
-  caption,
-  title,
-  description,
-  children,
-  expandHref,
-  onExpand,
-  expandLabel = "\uD06C\uAC8C \uBCF4\uAE30",
-  expanded = false,
-  onExpandedChange,
-  collapseLabel = "\uC791\uAC8C \uBCF4\uAE30",
-  footer,
-  width = "default",
-  motion,
-  closeLabel = "\uB2EB\uAE30"
-}) {
-  const hasExpandedToggle = typeof onExpandedChange === "function";
-  const showExpandAction = Boolean(hasExpandedToggle || expandHref || onExpand);
-  const resolvedWidth = expanded ? "full" : width;
-  const resolvedExpandLabel = hasExpandedToggle && expanded ? collapseLabel : expandLabel;
-  const ExpandActionIcon = hasExpandedToggle && expanded ? Minimize2Icon : Maximize2Icon;
-  return /* @__PURE__ */ jsx34(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs31(
-    SheetContent,
-    {
-      "data-slot": "sheet-drawer-content",
-      side: "right",
-      mobileSide: "bottom",
-      motion,
-      showCloseButton: false,
-      className: cn(
-        sheetDrawerContentClassName,
-        resolvedWidth === "wide" && sheetDrawerWideContentClassName,
-        resolvedWidth === "full" && sheetDrawerFullContentClassName
-      ),
-      children: [
-        /* @__PURE__ */ jsxs31("div", { "data-slot": "sheet-drawer-header", className: sheetDrawerHeaderClassName, children: [
-          /* @__PURE__ */ jsxs31("div", { className: sheetDrawerHeaderTextClassName, children: [
-            caption ? /* @__PURE__ */ jsx34("div", { "data-slot": "sheet-drawer-caption", className: sheetDrawerCaptionClassName, children: caption }) : null,
-            /* @__PURE__ */ jsx34(SheetTitle, { "data-slot": "sheet-drawer-title", className: sheetDrawerTitleClassName, children: title }),
-            description ? /* @__PURE__ */ jsx34(
-              SheetDescription,
-              {
-                "data-slot": "sheet-drawer-description",
-                className: sheetDrawerDescriptionClassName,
-                children: description
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ jsxs31("div", { "data-slot": "sheet-drawer-header-actions", className: sheetDrawerHeaderActionsClassName, children: [
-            showExpandAction ? hasExpandedToggle ? /* @__PURE__ */ jsxs31(
-              "button",
-              {
-                type: "button",
-                "aria-label": resolvedExpandLabel,
-                "aria-pressed": expanded,
-                "data-slot": "sheet-drawer-expand",
-                "data-expanded": expanded ? "true" : "false",
-                className: sheetDrawerExpandButtonClassName,
-                onClick: () => onExpandedChange(!expanded),
-                children: [
-                  /* @__PURE__ */ jsx34(ExpandActionIcon, { className: "size-[16px]" }),
-                  /* @__PURE__ */ jsx34("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: resolvedExpandLabel })
-                ]
-              }
-            ) : expandHref ? /* @__PURE__ */ jsxs31(
-              "a",
-              {
-                href: expandHref,
-                "aria-label": expandLabel,
-                "data-slot": "sheet-drawer-expand",
-                className: sheetDrawerExpandButtonClassName,
-                children: [
-                  /* @__PURE__ */ jsx34(ExpandActionIcon, { className: "size-[16px]" }),
-                  /* @__PURE__ */ jsx34("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
-                ]
-              }
-            ) : /* @__PURE__ */ jsxs31(
-              "button",
-              {
-                type: "button",
-                "aria-label": expandLabel,
-                "data-slot": "sheet-drawer-expand",
-                className: sheetDrawerExpandButtonClassName,
-                onClick: onExpand,
-                children: [
-                  /* @__PURE__ */ jsx34(ExpandActionIcon, { className: "size-[16px]" }),
-                  /* @__PURE__ */ jsx34("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ jsx34(
-              SheetClose,
-              {
-                "aria-label": closeLabel,
-                "data-slot": "sheet-drawer-close",
-                className: sheetDrawerCloseButtonClassName,
-                children: /* @__PURE__ */ jsx34(XIcon3, { className: "size-[16px]" })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx34("div", { "data-slot": "sheet-drawer-body", className: sheetDrawerBodyClassName, children }),
-        footer ? /* @__PURE__ */ jsx34("div", { "data-slot": "sheet-drawer-footer", className: sheetDrawerFooterClassName, children: footer }) : null
-      ]
+// src/components/ui/avatar.tsx
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { jsx as jsx37 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx37(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex shrink-0 overflow-hidden rounded-full select-none",
+        "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-secondary",
+        "h-9 w-9",
+        "data-[size=sm]:h-8 data-[size=sm]:w-8",
+        "data-[size=lg]:h-11 data-[size=lg]:w-11",
+        className
+      ),
+      ...props
     }
-  ) });
+  );
 }
-
-// src/components/ui/popover.tsx
-import * as React26 from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
-function Popover({ modal = false, ...props }) {
-  return /* @__PURE__ */ jsx35(PopoverPrimitive.Root, { modal, ...props });
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx37(
+    AvatarPrimitive.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square h-full w-full object-cover", className),
+      ...props
+    }
+  );
 }
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React26.forwardRef(({ className, align = "center", sideOffset = 8, collisionPadding = 8, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx35(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs32(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    collisionPadding,
-    "data-slot": "popover-content",
-    className: cn(
-      "z-[var(--z-popover)] w-[260px] outline-none",
-      "rounded-[var(--radius-md)] border border-[var(--border)]",
-      "bg-[var(--bg-raised)] p-[var(--space-4)] text-foreground",
-      "shadow-[var(--shadow-4)]",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "motion-reduce:animate-none",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showArrow ? /* @__PURE__ */ jsx35(
-        PopoverPrimitive.Arrow,
-        {
-          "data-slot": "popover-arrow",
-          className: "fill-[var(--bg-raised)]",
-          width: 11,
-          height: 5
-        }
-      ) : null
-    ]
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var PopoverArrow = React26.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
-  PopoverPrimitive.Arrow,
-  {
-    ref,
-    "data-slot": "popover-arrow",
-    className: cn("fill-[var(--bg-raised)]", className),
-    width: 11,
-    height: 5,
-    ...props
+function getAvatarFallbackText(name) {
+  const trimmedName = name.trim();
+  if (!trimmedName) return null;
+  const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter("ko", { granularity: "grapheme" }) : null;
+  if (segmenter) {
+    return segmenter.segment(trimmedName)[Symbol.iterator]().next().value?.segment ?? null;
   }
-));
-PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+  return Array.from(trimmedName)[0] ?? null;
+}
+function AvatarFallback({
+  className,
+  children,
+  name,
+  ...props
+}) {
+  const fallbackText = children ?? (name ? getAvatarFallbackText(name) : null);
+  return /* @__PURE__ */ jsx37(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex h-full w-full items-center justify-center rounded-full",
+        "bg-[var(--bg-raised)] text-sm font-semibold text-text-secondary",
+        "font-[family-name:var(--font-display)]",
+        "group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props,
+      children: fallbackText
+    }
+  );
+}
 
 // src/components/ui/badge.tsx
-import * as React27 from "react";
-import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx38, jsxs as jsxs35 } from "react/jsx-runtime";
 var DOT = {
   error: "var(--semantic-error-fg)",
   warning: "var(--semantic-warning-fg)",
@@ -5853,8 +6368,8 @@ var DOT = {
   neutral: "var(--text-tertiary)",
   brand: "var(--accent-pop)"
 };
-var Badge = React27.forwardRef(
-  ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsxs33(
+var Badge = React29.forwardRef(
+  ({ tone = "neutral", className, children, ...props }, ref) => /* @__PURE__ */ jsxs35(
     "span",
     {
       ref,
@@ -5868,7 +6383,7 @@ var Badge = React27.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx38(
           "span",
           {
             "aria-hidden": "true",
@@ -5885,8 +6400,8 @@ var Badge = React27.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/ui/two-tier-badge.tsx
-import * as React28 from "react";
-import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
+import * as React30 from "react";
+import { jsx as jsx39, jsxs as jsxs36 } from "react/jsx-runtime";
 var FG = {
   neutral: "var(--text-secondary)",
   info: "var(--semantic-info-fg)",
@@ -5907,7 +6422,7 @@ var SEGMENT = {
   md: "gap-[7px] py-[var(--space-1)] px-[var(--space-3)] text-[14px]"
 };
 var DOT2 = { xs: 5, sm: 6, md: 7 };
-var TwoTierBadge = React28.forwardRef(
+var TwoTierBadge = React30.forwardRef(
   ({ primary, secondary, tone = "neutral", emphasis = "subtle", size = "sm", showDot = false, className, style, ...props }, ref) => {
     const strong = emphasis === "strong";
     const fg = FG[tone];
@@ -5916,7 +6431,7 @@ var TwoTierBadge = React28.forwardRef(
     const frame = strong ? tinted : "var(--border-subtle)";
     const divider = strong ? tinted : "var(--border)";
     const dotSize = DOT2[size];
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs36(
       "span",
       {
         ref,
@@ -5930,14 +6445,14 @@ var TwoTierBadge = React28.forwardRef(
         style: { fontFamily: "var(--font-sans)", borderColor: frame, background: "transparent", ...style },
         ...props,
         children: [
-          /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsxs36(
             "span",
             {
               "data-slot": "two-tier-badge-primary",
               className: cn("inline-flex items-center whitespace-nowrap font-semibold", SEGMENT[size]),
               style: { color: fg, background: strong ? BG[tone] : "transparent" },
               children: [
-                showDot ? /* @__PURE__ */ jsx37(
+                showDot ? /* @__PURE__ */ jsx39(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -5952,11 +6467,11 @@ var TwoTierBadge = React28.forwardRef(
                     }
                   }
                 ) : null,
-                /* @__PURE__ */ jsx37("span", { children: primary })
+                /* @__PURE__ */ jsx39("span", { children: primary })
               ]
             }
           ),
-          secondary != null ? /* @__PURE__ */ jsx37(
+          secondary != null ? /* @__PURE__ */ jsx39(
             "span",
             {
               "data-slot": "two-tier-badge-secondary",
@@ -5977,8 +6492,8 @@ var TwoTierBadge = React28.forwardRef(
 TwoTierBadge.displayName = "TwoTierBadge";
 
 // src/components/ui/status-badge.tsx
-import * as React29 from "react";
-import { jsx as jsx38, jsxs as jsxs35 } from "react/jsx-runtime";
+import * as React31 from "react";
+import { jsx as jsx40, jsxs as jsxs37 } from "react/jsx-runtime";
 var ROLE = {
   error: "error",
   warning: "warning",
@@ -6007,13 +6522,13 @@ var SIZE = {
   sm: { cls: "gap-[6px] py-[var(--space-1)] px-[var(--space-2)] text-[12px]", dot: 6 },
   md: { cls: "gap-[var(--space-2)] py-[var(--space-1)] px-[14px] text-[14px]", dot: 7 }
 };
-var StatusBadge = React29.forwardRef(
+var StatusBadge = React31.forwardRef(
   ({ status = "active", emphasis = "subtle", size = "sm", showDot = true, pulse = true, className, children, style, ...props }, ref) => {
     const role = ROLE[status];
     const fg = FG2[role];
     const strong = emphasis === "strong";
     const ringDot = role === "neutral";
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs37(
       "span",
       {
         ref,
@@ -6031,7 +6546,7 @@ var StatusBadge = React29.forwardRef(
         },
         ...props,
         children: [
-          showDot ? /* @__PURE__ */ jsx38(
+          showDot ? /* @__PURE__ */ jsx40(
             "span",
             {
               "aria-hidden": "true",
@@ -6049,7 +6564,7 @@ var StatusBadge = React29.forwardRef(
             }
           ) : null,
           children,
-          /* @__PURE__ */ jsx38("style", { children: "@keyframes olun-status-pulse{0%,100%{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){[data-slot=status-badge-dot]{animation:none!important}}" })
+          /* @__PURE__ */ jsx40("style", { children: "@keyframes olun-status-pulse{0%,100%{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){[data-slot=status-badge-dot]{animation:none!important}}" })
         ]
       }
     );
@@ -6058,10 +6573,10 @@ var StatusBadge = React29.forwardRef(
 StatusBadge.displayName = "StatusBadge";
 
 // src/components/ui/notification-badge.tsx
-import * as React30 from "react";
-import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var notificationBadgeVariants = cva11(
+import * as React32 from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var notificationBadgeVariants = cva13(
   [
     "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)]",
     "bg-[var(--semantic-error,var(--error))] text-[var(--error-contrast)]",
@@ -6071,255 +6586,63 @@ var notificationBadgeVariants = cva11(
     variants: {
       size: {
         sm: "h-[15px] min-w-[15px] px-[3px] text-[9px]",
-        md: "h-[18px] min-w-[18px] px-[3px] text-[10px]"
-      },
-      placement: {
-        corner: "absolute -right-[4px] -top-[4px]",
-        inline: "ml-auto",
-        none: ""
-      }
-    },
-    defaultVariants: {
-      size: "sm",
-      placement: "none"
-    }
-  }
-);
-function formatNotificationCount(count, max) {
-  if (count > max) {
-    return `${max}+`;
-  }
-  return String(count);
-}
-var NotificationBadge = React30.forwardRef(
-  ({
-    className,
-    count,
-    max = 99,
-    size = "sm",
-    placement = "none",
-    "aria-label": ariaLabel,
-    ...props
-  }, ref) => {
-    if (count <= 0) {
-      return null;
-    }
-    const normalizedMax = Math.max(1, Math.floor(max));
-    const label = ariaLabel ?? (count > normalizedMax ? `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${normalizedMax}\uAC1C \uC774\uC0C1` : `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${count}\uAC1C`);
-    return /* @__PURE__ */ jsx39(
-      "span",
-      {
-        ref,
-        "data-slot": "notification-badge",
-        "data-size": size,
-        "data-placement": placement,
-        "aria-label": label,
-        className: cn(notificationBadgeVariants({ size, placement, className })),
-        ...props,
-        children: formatNotificationCount(count, normalizedMax)
-      }
-    );
-  }
-);
-NotificationBadge.displayName = "NotificationBadge";
-
-// src/components/ui/chip.tsx
-import * as React31 from "react";
-import { cva as cva12 } from "class-variance-authority";
-import { X as X3 } from "lucide-react";
-import { Slot as Slot2 } from "radix-ui";
-import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
-var chipVariants = cva12(
-  [
-    "inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap",
-    "rounded-[var(--radius-full)] border leading-none",
-    "font-medium transition-colors motion-reduce:transition-none",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
-    "disabled:pointer-events-none disabled:opacity-50"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        // interactive 3종 — 클릭 가능 (toggle / select / remove). cursor:pointer으로 affordance 명시.
-        // (Tailwind v4 preflight + site reset은 button cursor 보장 안 함 → variant level에서 강제.)
-        filter: "cursor-pointer",
-        choice: "cursor-pointer",
-        removable: "cursor-pointer",
-        // status-filter — 정적 표시 chip (display only, 클릭 affordance 없음).
-        "status-filter": "cursor-default"
-      },
-      tone: {
-        neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
-        accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent)] hover:bg-[var(--action-accent-hover)]",
-        success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
-        warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
-        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]",
-        muted: "border-[var(--border-subtle)] bg-transparent text-text-tertiary hover:bg-[var(--action-hover)]"
-      },
-      size: {
-        sm: "h-[26px] gap-[var(--space-1)] px-[var(--space-2)] text-xs",
-        md: "h-[30px] gap-[var(--space-2)] px-[var(--space-3)] text-xs",
-        lg: "h-[34px] gap-[var(--space-2)] px-[var(--space-4)] text-sm"
-      },
-      pressed: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        pressed: true,
-        tone: "neutral",
-        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
-      },
-      {
-        // R10 — wash 패턴 정합 (--accent-bg-strong deep olive wash / --accent olive/lime text).
-        pressed: true,
-        tone: "accent",
-        className: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-[var(--accent)]"
-      },
-      {
-        pressed: true,
-        tone: "muted",
-        className: "border-[var(--border-strong)] bg-[var(--bg-raised)] text-text-secondary"
-      }
-    ],
-    defaultVariants: {
-      variant: "filter",
-      tone: "neutral",
-      size: "md",
-      pressed: false
-    }
-  }
-);
-var chipCountVariants = cva12(
-  [
-    "inline-flex min-w-[var(--space-4)] items-center justify-center",
-    "rounded-[var(--radius-full)] px-[var(--space-1)]",
-    "font-[family-name:var(--font-display)]"
-  ].join(" "),
-  {
-    variants: {
-      tone: {
-        neutral: "bg-[var(--bg-raised)] text-text-tertiary",
-        accent: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
-        success: "bg-[var(--success)] text-[var(--success-contrast)]",
-        warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
-        danger: "bg-[var(--error)] text-[var(--error-contrast)]",
-        muted: "bg-[var(--bg-raised)] text-text-tertiary"
-      },
-      size: {
-        sm: "h-[var(--space-4)] text-xs",
-        md: "h-[var(--space-4)] text-xs",
-        lg: "h-[calc(var(--space-4)+var(--space-1))] text-xs"
+        md: "h-[18px] min-w-[18px] px-[3px] text-[10px]"
+      },
+      placement: {
+        corner: "absolute -right-[4px] -top-[4px]",
+        inline: "ml-auto",
+        none: ""
       }
     },
     defaultVariants: {
-      tone: "neutral",
-      size: "md"
+      size: "sm",
+      placement: "none"
     }
   }
 );
-var Chip = React31.forwardRef(
+function formatNotificationCount(count, max) {
+  if (count > max) {
+    return `${max}+`;
+  }
+  return String(count);
+}
+var NotificationBadge = React32.forwardRef(
   ({
     className,
-    variant = "filter",
-    tone = "neutral",
-    size = "md",
-    pressed = false,
     count,
-    removeLabel = "Remove",
-    asChild = false,
-    children,
+    max = 99,
+    size = "sm",
+    placement = "none",
+    "aria-label": ariaLabel,
     ...props
   }, ref) => {
-    const removable = variant === "removable";
-    if (removable) {
-      const {
-        onClick,
-        disabled,
-        type: _type,
-        autoFocus: _af,
-        form: _form,
-        name: _name,
-        value: _value,
-        ...spanProps
-      } = props;
-      return /* @__PURE__ */ jsxs36(
-        "span",
-        {
-          "data-slot": "chip",
-          "data-variant": variant,
-          "data-tone": tone,
-          className: cn(chipVariants({ variant, tone, size, pressed, className })),
-          ...spanProps,
-          children: [
-            /* @__PURE__ */ jsx40("span", { children }),
-            count !== void 0 ? /* @__PURE__ */ jsx40(
-              "span",
-              {
-                "aria-hidden": "true",
-                "data-slot": "chip-count",
-                "data-count-tone": tone,
-                className: chipCountVariants({ tone, size }),
-                children: count
-              }
-            ) : null,
-            /* @__PURE__ */ jsx40(
-              "button",
-              {
-                ref,
-                type: "button",
-                "data-slot": "chip-remove",
-                "aria-label": removeLabel,
-                disabled,
-                onClick,
-                className: "inline-flex size-[var(--space-4)] items-center justify-center rounded-[var(--radius-full)] text-text-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
-                children: /* @__PURE__ */ jsx40(X3, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
-              }
-            )
-          ]
-        }
-      );
+    if (count <= 0) {
+      return null;
     }
-    const Comp = asChild ? Slot2.Root : "button";
-    return /* @__PURE__ */ jsxs36(
-      Comp,
+    const normalizedMax = Math.max(1, Math.floor(max));
+    const label = ariaLabel ?? (count > normalizedMax ? `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${normalizedMax}\uAC1C \uC774\uC0C1` : `\uC77D\uC9C0 \uC54A\uC740 \uC54C\uB9BC ${count}\uAC1C`);
+    return /* @__PURE__ */ jsx41(
+      "span",
       {
         ref,
-        "data-slot": "chip",
-        "data-variant": variant,
-        "data-tone": tone,
-        "aria-pressed": pressed,
-        className: cn(
-          chipVariants({ variant, tone, size, pressed, className })
-        ),
-        type: asChild ? void 0 : props.type ?? "button",
+        "data-slot": "notification-badge",
+        "data-size": size,
+        "data-placement": placement,
+        "aria-label": label,
+        className: cn(notificationBadgeVariants({ size, placement, className })),
         ...props,
-        children: [
-          children,
-          count !== void 0 ? /* @__PURE__ */ jsx40(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "chip-count",
-              "data-count-tone": tone,
-              className: chipCountVariants({ tone, size }),
-              children: count
-            }
-          ) : null
-        ]
+        children: formatNotificationCount(count, normalizedMax)
       }
     );
   }
 );
-Chip.displayName = "Chip";
+NotificationBadge.displayName = "NotificationBadge";
 
 // src/components/ui/empty-state.tsx
-import * as React32 from "react";
-import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
-var emptyStateBaseVariants = cva13(
+import * as React33 from "react";
+import { cva as cva14 } from "class-variance-authority";
+import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
+var emptyStateBaseVariants = cva14(
   [
     "flex flex-col items-center justify-center text-center",
     "text-foreground"
@@ -6338,7 +6661,7 @@ var emptyStateBaseVariants = cva13(
     },
     defaultVariants: {
       size: "md",
-      bordered: true
+      bordered: false
     }
   }
 );
@@ -6357,7 +6680,7 @@ function emptyStateVariants({
   size,
   tone = "neutral",
   surface,
-  bordered = true,
+  bordered = false,
   className
 } = {}) {
   const hasBorder = bordered !== false;
@@ -6367,10 +6690,10 @@ function emptyStateVariants({
     className
   );
 }
-var emptyStateIconVariants = cva13(
+var emptyStateIconVariants = cva14(
   [
     "inline-flex items-center justify-center rounded-[var(--radius-full)]",
-    "border border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-tertiary"
+    "border border-[var(--border-subtle)] bg-[var(--bg-inset)] text-text-tertiary"
   ].join(" "),
   {
     variants: {
@@ -6385,12 +6708,12 @@ var emptyStateIconVariants = cva13(
     }
   }
 );
-var iconSize2 = {
+var iconSize3 = {
   sm: 18,
   md: 20,
   lg: 24
 };
-var EmptyState = React32.forwardRef(
+var EmptyState = React33.forwardRef(
   ({
     className,
     size = "md",
@@ -6401,11 +6724,11 @@ var EmptyState = React32.forwardRef(
     description,
     hint,
     action,
-    bordered = true,
+    bordered = false,
     ...props
   }, ref) => {
     const resolvedSize = size ?? "md";
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs38(
       "div",
       {
         ref,
@@ -6414,17 +6737,17 @@ var EmptyState = React32.forwardRef(
         className: cn(emptyStateVariants({ size, tone, surface, bordered, className })),
         ...props,
         children: [
-          Icon ? /* @__PURE__ */ jsx41(
+          Icon ? /* @__PURE__ */ jsx42(
             "span",
             {
               "aria-hidden": "true",
               "data-slot": "empty-state-icon",
               className: emptyStateIconVariants({ size: resolvedSize }),
-              children: /* @__PURE__ */ jsx41(Icon, { size: iconSize2[resolvedSize], strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx42(Icon, { size: iconSize3[resolvedSize], strokeWidth: 1.75 })
             }
           ) : null,
-          /* @__PURE__ */ jsxs37("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
-            /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsxs38("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
+            /* @__PURE__ */ jsx42(
               "h2",
               {
                 "data-slot": "empty-state-title",
@@ -6432,7 +6755,7 @@ var EmptyState = React32.forwardRef(
                 children: title
               }
             ),
-            description ? /* @__PURE__ */ jsx41(
+            description ? /* @__PURE__ */ jsx42(
               "p",
               {
                 "data-slot": "empty-state-description",
@@ -6440,7 +6763,7 @@ var EmptyState = React32.forwardRef(
                 children: description
               }
             ) : null,
-            hint ? /* @__PURE__ */ jsx41(
+            hint ? /* @__PURE__ */ jsx42(
               "p",
               {
                 "data-slot": "empty-state-hint",
@@ -6449,7 +6772,7 @@ var EmptyState = React32.forwardRef(
               }
             ) : null
           ] }),
-          action ? /* @__PURE__ */ jsx41("div", { "data-slot": "empty-state-action", className: "mt-[var(--space-2)]", children: action }) : null
+          action ? /* @__PURE__ */ jsx42("div", { "data-slot": "empty-state-action", className: "mt-[var(--space-2)]", children: action }) : null
         ]
       }
     );
@@ -6458,11 +6781,11 @@ var EmptyState = React32.forwardRef(
 EmptyState.displayName = "EmptyState";
 
 // src/components/ui/error-state.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { AlertTriangle } from "lucide-react";
-import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
-var errorStateVariants = cva14(
+import { cva as cva15 } from "class-variance-authority";
+import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
+var errorStateVariants = cva15(
   [
     "flex flex-col items-center justify-center text-center",
     "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
@@ -6483,7 +6806,7 @@ var errorStateVariants = cva14(
     }
   }
 );
-var ErrorState = React33.forwardRef(
+var ErrorState = React34.forwardRef(
   ({
     className,
     size = "md",
@@ -6494,7 +6817,7 @@ var ErrorState = React33.forwardRef(
     onRetry,
     retryLabel = "\uB2E4\uC2DC \uC2DC\uB3C4",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs38(
+  }, ref) => /* @__PURE__ */ jsxs39(
     "div",
     {
       ref,
@@ -6503,17 +6826,17 @@ var ErrorState = React33.forwardRef(
       className: cn(errorStateVariants({ size, surface, className })),
       ...props,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "span",
           {
             "aria-hidden": "true",
             "data-slot": "error-state-icon",
             className: "inline-flex size-[48px] items-center justify-center rounded-[var(--radius-full)] bg-[var(--error-bg)] text-[var(--error)]",
-            children: /* @__PURE__ */ jsx42(AlertTriangle, { size: 24, strokeWidth: 1.75 })
+            children: /* @__PURE__ */ jsx43(AlertTriangle, { size: 24, strokeWidth: 1.75 })
           }
         ),
-        /* @__PURE__ */ jsxs38("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
-          /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsxs39("div", { className: "flex max-w-[420px] flex-col items-center gap-[var(--space-2)]", children: [
+          /* @__PURE__ */ jsx43(
             "h2",
             {
               "data-slot": "error-state-title",
@@ -6521,7 +6844,7 @@ var ErrorState = React33.forwardRef(
               children: title
             }
           ),
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43(
             "p",
             {
               "data-slot": "error-state-message",
@@ -6529,7 +6852,7 @@ var ErrorState = React33.forwardRef(
               children: message
             }
           ),
-          errorCode ? /* @__PURE__ */ jsx42(
+          errorCode ? /* @__PURE__ */ jsx43(
             "p",
             {
               "data-slot": "error-state-code",
@@ -6538,7 +6861,7 @@ var ErrorState = React33.forwardRef(
             }
           ) : null
         ] }),
-        onRetry ? /* @__PURE__ */ jsx42(Button, { size: "sm", variant: "outline", onClick: onRetry, children: retryLabel }) : null
+        onRetry ? /* @__PURE__ */ jsx43(Button, { size: "sm", variant: "outline", onClick: onRetry, children: retryLabel }) : null
       ]
     }
   )
@@ -6546,10 +6869,10 @@ var ErrorState = React33.forwardRef(
 ErrorState.displayName = "ErrorState";
 
 // src/components/ui/skeleton.tsx
-import * as React34 from "react";
-import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var skeletonVariants = cva15(
+import * as React35 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var skeletonVariants = cva16(
   [
     "animate-pulse rounded-[var(--radius-sm)] bg-[var(--bg-raised)]",
     "motion-reduce:animate-none motion-reduce:opacity-80"
@@ -6567,7 +6890,7 @@ var skeletonVariants = cva15(
     }
   }
 );
-var spinnerVariants = cva15(
+var spinnerVariants = cva16(
   [
     "inline-block shrink-0 animate-spin rounded-[var(--radius-full)] border-2",
     "border-[var(--border-subtle)] border-t-[var(--primary)]",
@@ -6590,8 +6913,8 @@ var spinnerVariants = cva15(
     }
   }
 );
-var Skeleton = React34.forwardRef(
-  ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx43(
+var Skeleton = React35.forwardRef(
+  ({ className, shape, style, ...props }, ref) => /* @__PURE__ */ jsx44(
     "div",
     {
       ref,
@@ -6604,15 +6927,15 @@ var Skeleton = React34.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 var defaultTextWidths = ["92%", "84%", "68%", "76%"];
-var SkeletonText = React34.forwardRef(
-  ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx43(
+var SkeletonText = React35.forwardRef(
+  ({ className, lines = 3, widths = defaultTextWidths, ...props }, ref) => /* @__PURE__ */ jsx44(
     "div",
     {
       ref,
       "data-slot": "skeleton-text",
       className: cn("flex flex-col gap-[var(--space-2)]", className),
       ...props,
-      children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx43(
+      children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx44(
         Skeleton,
         {
           shape: "text",
@@ -6624,7 +6947,7 @@ var SkeletonText = React34.forwardRef(
   )
 );
 SkeletonText.displayName = "SkeletonText";
-var SkeletonRow = React34.forwardRef(
+var SkeletonRow = React35.forwardRef(
   ({
     className,
     columns,
@@ -6635,7 +6958,7 @@ var SkeletonRow = React34.forwardRef(
   }, ref) => {
     const rowCount = Math.max(5, count);
     const gridTemplateColumns = columns.map((column) => column.width ?? "1fr").join(" ");
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx44(
       "div",
       {
         ref,
@@ -6649,7 +6972,7 @@ var SkeletonRow = React34.forwardRef(
           className
         ),
         ...props,
-        children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx43(
+        children: Array.from({ length: rowCount }, (_, rowIndex) => /* @__PURE__ */ jsx44(
           "div",
           {
             "data-slot": "skeleton-row",
@@ -6657,11 +6980,11 @@ var SkeletonRow = React34.forwardRef(
               "grid min-h-[48px] items-center border-t border-[var(--border-subtle)] first:border-t-0"
             ),
             style: { gridTemplateColumns },
-            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx43(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx44(
               "div",
               {
                 className: "px-[var(--space-4)] py-[var(--space-2)]",
-                children: /* @__PURE__ */ jsx43(
+                children: /* @__PURE__ */ jsx44(
                   Skeleton,
                   {
                     shape: "text",
@@ -6681,8 +7004,8 @@ var SkeletonRow = React34.forwardRef(
   }
 );
 SkeletonRow.displayName = "SkeletonRow";
-var Spinner = React34.forwardRef(
-  ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx43(
+var Spinner = React35.forwardRef(
+  ({ className, size, label = "\uB85C\uB529 \uC911", ...props }, ref) => /* @__PURE__ */ jsx44(
     "span",
     {
       ref,
@@ -6696,150 +7019,6 @@ var Spinner = React34.forwardRef(
 );
 Spinner.displayName = "Spinner";
 
-// src/components/ui/icon-button.tsx
-import * as React35 from "react";
-import { cva as cva16 } from "class-variance-authority";
-import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
-var iconButtonVariants = cva16(
-  [
-    "olun-icon-button relative inline-flex cursor-pointer shrink-0 items-center justify-center",
-    "rounded-[var(--radius-sm)] border font-medium",
-    "transition-colors motion-reduce:transition-none",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
-    "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
-        outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)] hover:text-foreground",
-        subtle: "border-transparent bg-[var(--bg-raised)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
-        danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
-      },
-      size: {
-        sm: "size-[28px]",
-        md: "size-[32px]",
-        lg: "size-[40px]"
-      },
-      pressed: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        pressed: true,
-        variant: ["ghost", "outline", "subtle"],
-        className: "border-[var(--border-strong)] bg-[var(--action-selected)] text-foreground"
-      },
-      {
-        pressed: true,
-        variant: "danger",
-        className: "border-[var(--error)] bg-[var(--error-bg)] text-[var(--error)]"
-      }
-    ],
-    defaultVariants: {
-      variant: "ghost",
-      size: "md",
-      pressed: false
-    }
-  }
-);
-var iconButtonBadgeVariants = cva16(
-  [
-    "pointer-events-none absolute right-0 top-0 inline-flex",
-    "olun-icon-button__badge",
-    "min-h-[var(--space-3)] min-w-[var(--space-3)] translate-x-1/3 -translate-y-1/3",
-    "items-center justify-center gap-[2px] rounded-[var(--radius-full)] px-[3px]",
-    "font-[family-name:var(--font-display)] text-[10px] font-semibold leading-none",
-    "[&:has(svg)]:size-[var(--space-3)] [&:has(svg)]:px-0 [&_svg]:size-[10px]"
-  ].join(" "),
-  {
-    variants: {
-      tone: {
-        info: "bg-[var(--accent-pop)] text-[var(--accent-on-fill)]",
-        error: "bg-[var(--error)] text-[var(--error-contrast)]"
-      }
-    },
-    defaultVariants: {
-      tone: "info"
-    }
-  }
-);
-var iconSize3 = {
-  sm: 14,
-  md: 16,
-  lg: 18
-};
-var iconStrokeWidth = {
-  sm: 2.25,
-  md: 2.25,
-  lg: 1.75
-};
-var IconButton = React35.forwardRef(
-  ({
-    className,
-    variant = "ghost",
-    size = "md",
-    pressed = void 0,
-    icon: Icon,
-    badge,
-    badgeTone = "info",
-    type,
-    title,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    ...props
-  }, ref) => {
-    const resolvedSize = size ?? "md";
-    const isToggle = pressed !== void 0;
-    const isPressed = pressed === true;
-    const hoverTitle = title ?? (typeof ariaLabel === "string" ? ariaLabel : void 0);
-    return /* @__PURE__ */ jsxs39(
-      "button",
-      {
-        ref,
-        ...props,
-        "data-slot": "icon-button",
-        "data-variant": variant,
-        "data-size": resolvedSize,
-        "data-pressed": isToggle ? String(isPressed) : void 0,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-pressed": isToggle ? isPressed : void 0,
-        title: hoverTitle,
-        className: cn(
-          iconButtonVariants({ variant, size, pressed: isPressed, className })
-        ),
-        type: type ?? "button",
-        children: [
-          /* @__PURE__ */ jsx44(
-            Icon,
-            {
-              "aria-hidden": "true",
-              "data-slot": "icon-button-icon",
-              size: iconSize3[resolvedSize],
-              strokeWidth: iconStrokeWidth[resolvedSize]
-            }
-          ),
-          badge !== void 0 ? /* @__PURE__ */ jsx44(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-slot": "icon-button-badge",
-              "data-badge-tone": badgeTone,
-              className: iconButtonBadgeVariants({ tone: badgeTone }),
-              children: badge
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-IconButton.displayName = "IconButton";
-
 // src/components/ui/pagination.tsx
 import * as React36 from "react";
 import { ChevronsLeft, ChevronLeft, ChevronRight as ChevronRight2, ChevronsRight } from "lucide-react";
@@ -7367,11 +7546,11 @@ var toastVariants = cva20(
   {
     variants: {
       variant: {
-        default: "bg-[var(--bg-raised)]",
-        success: "bg-[var(--bg-raised)]",
+        default: "bg-[var(--bg-surface)]",
+        success: "bg-[var(--bg-surface)]",
         error: "bg-[var(--error-bg)]",
-        warning: "bg-[var(--bg-raised)]",
-        info: "bg-[var(--bg-raised)]"
+        warning: "bg-[var(--bg-surface)]",
+        info: "bg-[var(--bg-surface)]"
       }
     },
     defaultVariants: { variant: "default" }
@@ -7610,7 +7789,7 @@ function ToastProvider({ children, maxToasts = 3, className, ...props }) {
 import * as React39 from "react";
 import { cva as cva21 } from "class-variance-authority";
 import { AlertCircle as AlertCircle4 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 var otpFieldVariants = cva21("flex w-full min-w-0 flex-col gap-[var(--space-3)]", {
   variants: {
     size: {
@@ -7932,7 +8111,7 @@ var OTPField = React39.forwardRef(
               "data-slot": "otp-field-message",
               "data-kind": errorText ? "error" : "helper",
               className: otpFieldMessageVariants({ state: resolvedState }),
-              children: errorText ? /* @__PURE__ */ jsxs45(Fragment8, { children: [
+              children: errorText ? /* @__PURE__ */ jsxs45(Fragment9, { children: [
                 /* @__PURE__ */ jsx50(
                   AlertCircle4,
                   {
@@ -8269,8 +8448,8 @@ var radioVariants = cva24(
         plain: "inline-flex items-start gap-[var(--space-3)] rounded-[var(--radius-sm)] px-pad-compact-x py-pad-compact-y",
         card: [
           "flex min-h-[calc(var(--space-12)+var(--space-2))] items-start gap-[var(--space-3)]",
-          "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)]",
-          "hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
+          "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-surface)]",
+          "hover:bg-[var(--action-hover)]",
           "data-[state=checked]:border-[var(--border-strong)] data-[state=checked]:bg-[var(--action-selected)]",
           "disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)]",
           "disabled:data-[state=checked]:border-[var(--border-subtle)] disabled:data-[state=checked]:bg-[var(--action-disabled-bg)]"