@yeongseoksong/framework 1.3.1 → 1.5.0

package/dist/ui/index.mjs

@@ -68,6 +68,7 @@ function Logo(_props) {
 }
 
 // ui/atom/Tabs.tsx
+import { useEffect, useState } from "react";
 import { Box, Tabs } from "@mantine/core";
 
 // ui/atom/Container.tsx
@@ -89,8 +90,30 @@ function SdScrollableList(_a4) {
   return /* @__PURE__ */ jsx3(Box, { style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ jsx3(Tabs.List, __spreadProps(__spreadValues({}, props), { children })) });
 }
 function createTabs(defaults, scrollable = false) {
-  function SdTabsRoot(props) {
-    return /* @__PURE__ */ jsx3(Tabs, __spreadValues(__spreadValues({}, defaults), props));
+  function SdTabsRoot(_a4) {
+    var _b = _a4, { syncHash, value, onChange } = _b, props = __objRest(_b, ["syncHash", "value", "onChange"]);
+    const [hashValue, setHashValue] = useState(null);
+    useEffect(() => {
+      if (!syncHash) return;
+      const apply = () => {
+        const id = decodeURIComponent(window.location.hash.slice(1));
+        if (id) setHashValue(id);
+      };
+      apply();
+      window.addEventListener("hashchange", apply);
+      return () => window.removeEventListener("hashchange", apply);
+    }, [syncHash]);
+    if (!syncHash) {
+      return /* @__PURE__ */ jsx3(Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value, onChange }));
+    }
+    const handleChange = (next) => {
+      if (next) {
+        window.history.replaceState(null, "", `#${next}`);
+        setHashValue(next);
+      }
+      onChange == null ? void 0 : onChange(next);
+    };
+    return /* @__PURE__ */ jsx3(Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value: value != null ? value : hashValue, onChange: handleChange }));
   }
   SdTabsRoot.List = scrollable ? SdScrollableList : Tabs.List;
   SdTabsRoot.Tab = Tabs.Tab;
@@ -186,6 +209,36 @@ var SdTitleSub = SdTitle.Sub;
 
 // ui/atom/Text.tsx
 import { Text as MantineText } from "@mantine/core";
+
+// ui/typography.ts
+var textStyles = {
+  /** 최상위 강조 */
+  Strong: { fw: 700, c: "slate.9", fz: "md", style: { letterSpacing: "-0.04em" } },
+  /** 기본 본문 */
+  Body: { fw: 500, c: "slate.7", fz: "sm", lh: 1.7 },
+  /** 보조 정보 */
+  Sub: { fw: 400, c: "slate.5", fz: "xs", lh: 1.6 },
+  /** 최소 강조 — 밀도 높은 목록 */
+  Hint: { fw: 400, c: "slate.4", fz: "xs", lh: 1.5 },
+  /** 섹션 라벨 */
+  Eyebrow: {
+    fw: 700,
+    c: "primary.6",
+    fz: "xs",
+    style: { letterSpacing: "0.12em", textTransform: "uppercase" }
+  },
+  /** 오류 메시지 */
+  Error: { fw: 400, c: "red.6", fz: "sm" },
+  /** 숫자 — 자릿수 정렬 */
+  Numeric: {
+    fw: 700,
+    c: "slate.8",
+    fz: "md",
+    style: { fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }
+  }
+};
+
+// ui/atom/Text.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function createText(defaults) {
   return function SdText2(_a4) {
@@ -195,23 +248,13 @@ function createText(defaults) {
   };
 }
 var SdText = {
-  Strong: createText({ fw: 700, c: "slate.9", fz: "md", style: { letterSpacing: "-0.04em" } }),
-  Body: createText({ fw: 400, c: "slate.7", fz: "md", lh: 1.7 }),
-  Sub: createText({ fw: 400, c: "slate.5", fz: "xs", lh: 1.6 }),
-  Eyebrow: createText({
-    fw: 700,
-    c: "primary.6",
-    fz: "xs",
-    style: { letterSpacing: "0.12em", textTransform: "uppercase" }
-  }),
-  Error: createText({ fw: 400, c: "red.6", fz: "sm" }),
-  Hint: createText({ fw: 400, c: "slate.4", fz: "xs", lh: 1.5 }),
-  Numeric: createText({
-    fw: 700,
-    c: "slate.8",
-    fz: "md",
-    style: { fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }
-  })
+  Strong: createText(textStyles.Strong),
+  Body: createText(textStyles.Body),
+  Sub: createText(textStyles.Sub),
+  Eyebrow: createText(textStyles.Eyebrow),
+  Error: createText(textStyles.Error),
+  Hint: createText(textStyles.Hint),
+  Numeric: createText(textStyles.Numeric)
 };
 var SdTextStrong = SdText.Strong;
 var SdTextBody = SdText.Body;
@@ -405,7 +448,7 @@ var SdBadge = {
   /** 성공/완료 */
   Success: createBadge({ variant: "light", color: "green" }),
   /** 주의/경고 */
-  Warning: createBadge({ variant: "light", color: "orange" })
+  Warning: createBadge({ variant: "light", color: "amber" })
 };
 var SdBadgeDefault = SdBadge.Default;
 var SdBadgePrimary = SdBadge.Primary;
@@ -414,56 +457,157 @@ var SdBadgeWarning = SdBadge.Warning;
 
 // ui/atom/Input.tsx
 import {
+  Autocomplete,
+  Checkbox,
+  ColorInput,
+  FileInput,
+  Group as Group2,
+  Input,
+  JsonInput,
+  MultiSelect,
+  NativeSelect,
+  NumberInput,
   PasswordInput,
+  PinInput,
+  Radio,
+  Rating,
+  SegmentedControl,
   Select,
+  Slider,
+  Stack as Stack2,
+  Switch,
+  TagsInput,
   Textarea,
   TextInput
 } from "@mantine/core";
+import {
+  DateInput,
+  DatePickerInput,
+  TimeInput
+} from "@mantine/dates";
 import { jsx as jsx12 } from "react/jsx-runtime";
-function createTextInput(defaults) {
-  return function SdInput2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ jsx12(TextInput, __spreadValues(__spreadValues({}, defaults), props));
-  };
-}
-function createTextarea(defaults) {
-  return function SdInputTextarea2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ jsx12(Textarea, __spreadValues(__spreadValues({}, defaults), props));
+function createInput(Component, defaults) {
+  return function SdInput2(props) {
+    return /* @__PURE__ */ jsx12(Component, __spreadValues(__spreadValues({}, defaults), props));
   };
 }
-function createPasswordInput(defaults) {
-  return function SdInputPassword2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ jsx12(PasswordInput, __spreadValues(__spreadValues({}, defaults), props));
+function createWrappedInput(Component, defaults) {
+  return function SdWrappedInput(_a4) {
+    var _b = _a4, {
+      label,
+      description,
+      error,
+      required,
+      withAsterisk
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "description",
+      "error",
+      "required",
+      "withAsterisk"
+    ]);
+    return /* @__PURE__ */ jsx12(
+      Input.Wrapper,
+      {
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
+        children: /* @__PURE__ */ jsx12(Component, __spreadValues(__spreadValues({}, defaults), rest))
+      }
+    );
   };
 }
-function createSelect(defaults) {
-  return function SdInputSelect2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ jsx12(Select, __spreadValues(__spreadValues({}, defaults), props));
-  };
+function SdInputRadio(_a4) {
+  var _b = _a4, { data, orientation = "horizontal" } = _b, props = __objRest(_b, ["data", "orientation"]);
+  const Layout = orientation === "vertical" ? Stack2 : Group2;
+  return /* @__PURE__ */ jsx12(Radio.Group, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx12(Layout, { gap: "sm", mt: "xs", children: data.map((item) => /* @__PURE__ */ jsx12(Radio, { value: item.value, label: item.label, disabled: item.disabled }, item.value)) }) }));
 }
 var SdInput = {
+  // ── 텍스트 ──
   /** 일반 텍스트 — 이름, 회사명 등 */
-  Text: createTextInput({}),
+  Text: createInput(TextInput),
   /** 이메일 입력 */
-  Email: createTextInput({ type: "email" }),
+  Email: createInput(TextInput, { type: "email" }),
   /** 비밀번호 입력 — 마스킹 토글 포함 */
-  Password: createPasswordInput({}),
+  Password: createInput(PasswordInput),
   /** 멀티라인 텍스트 — 문의 메시지 등 */
-  Textarea: createTextarea({ autosize: true, minRows: 3 }),
+  Textarea: createInput(Textarea, { autosize: true, minRows: 3 }),
+  /** JSON 입력 — 포맷·검증 버튼 포함 */
+  Json: createInput(JsonInput, { autosize: true, minRows: 4, formatOnBlur: true }),
+  // ── 숫자 ──
+  /** 숫자 입력 — 증감 컨트롤 포함 */
+  Number: createInput(NumberInput),
+  /** 범위 선택 슬라이더 */
+  Slider: createWrappedInput(Slider),
+  /** 별점 */
+  Rating: createWrappedInput(Rating),
+  /** 인증번호 등 자리수가 고정된 코드 */
+  PinCode: createWrappedInput(PinInput),
+  // ── 선택 ──
   /** 드롭다운 선택 */
-  Select: createSelect({})
+  Select: createInput(Select),
+  /** 브라우저 기본 select — 모바일·간단한 목록 */
+  NativeSelect: createInput(NativeSelect),
+  /** 다중 선택 */
+  MultiSelect: createInput(MultiSelect),
+  /** 입력하며 후보를 좁히는 자동완성(자유 입력 허용) */
+  Autocomplete: createInput(Autocomplete),
+  /** 자유롭게 추가하는 태그 목록 */
+  Tags: createInput(TagsInput),
+  /** 라디오 그룹 — data로 항목을 넘긴다 */
+  Radio: SdInputRadio,
+  /** 두세 개 중 하나 — 탭처럼 보이는 선택 */
+  Segmented: createWrappedInput(SegmentedControl),
+  // ── 불리언 ──
+  /** 체크박스 — getInputProps(name, { type: 'checkbox' }) */
+  Checkbox: createInput(Checkbox),
+  /** 스위치 — 즉시 반영되는 on/off */
+  Switch: createInput(Switch),
+  // ── 기타 ──
+  /** 파일 선택 */
+  File: createInput(FileInput, { clearable: true }),
+  /** 색상 선택 */
+  Color: createInput(ColorInput),
+  // ── 날짜·시간 (@mantine/dates) ──
+  /** 날짜 — 직접 입력 + 달력 팝오버. 값은 'YYYY-MM-DD' 문자열 */
+  Date: createInput(DateInput, { valueFormat: "YYYY-MM-DD", clearable: true }),
+  /** 기간 — 시작·종료 두 날짜 */
+  DateRange: createInput(DatePickerInput, {
+    type: "range",
+    valueFormat: "YYYY-MM-DD",
+    clearable: true
+  }),
+  /** 시각 */
+  Time: createInput(TimeInput)
 };
 var SdInputText = SdInput.Text;
 var SdInputEmail = SdInput.Email;
 var SdInputPassword = SdInput.Password;
 var SdInputTextarea = SdInput.Textarea;
+var SdInputJson = SdInput.Json;
+var SdInputNumber = SdInput.Number;
+var SdInputSlider = SdInput.Slider;
+var SdInputRating = SdInput.Rating;
+var SdInputPinCode = SdInput.PinCode;
 var SdInputSelect = SdInput.Select;
+var SdInputNativeSelect = SdInput.NativeSelect;
+var SdInputMultiSelect = SdInput.MultiSelect;
+var SdInputAutocomplete = SdInput.Autocomplete;
+var SdInputTags = SdInput.Tags;
+var SdInputRadioGroup = SdInput.Radio;
+var SdInputSegmented = SdInput.Segmented;
+var SdInputCheckbox = SdInput.Checkbox;
+var SdInputSwitch = SdInput.Switch;
+var SdInputFile = SdInput.File;
+var SdInputColor = SdInput.Color;
+var SdInputDate = SdInput.Date;
+var SdInputDateRange = SdInput.DateRange;
+var SdInputTime = SdInput.Time;
 
 // ui/atom/Skeleton.tsx
-import { Box as Box3, Skeleton as MantineSkeleton, Stack as Stack2 } from "@mantine/core";
+import { Box as Box3, Skeleton as MantineSkeleton, Stack as Stack3 } from "@mantine/core";
 import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
 function SkeletonText(_a4) {
   var _b = _a4, { width = "100%" } = _b, props = __objRest(_b, ["width"]);
@@ -491,7 +635,7 @@ function SkeletonCard({ height, lines = 3 }) {
         border: "1px solid var(--mantine-color-gray-3)",
         height
       },
-      children: /* @__PURE__ */ jsxs2(Stack2, { gap: "sm", children: [
+      children: /* @__PURE__ */ jsxs2(Stack3, { gap: "sm", children: [
         /* @__PURE__ */ jsx13(MantineSkeleton, { height: 20, width: "50%", radius: "sm" }),
         Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx13(
           MantineSkeleton,
@@ -522,7 +666,7 @@ var SdSkeletonAvatar = SkeletonAvatar;
 // ui/atom/Link.tsx
 import { Anchor as MantineAnchor } from "@mantine/core";
 
-// util/style.util.ts
+// ui/style.util.ts
 function toCssColor(value) {
   if (typeof value !== "string") return "";
   return value.includes(".") ? `var(--mantine-color-${value.replace(".", "-")})` : value;
@@ -531,11 +675,16 @@ function toCssColor(value) {
 // ui/atom/Link.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var HOVER_COLOR = "var(--mantine-color-primary-6)";
-function createLink(defaults) {
+function createLink(defaults, Fallback) {
   return function SdLink2(_a4) {
     var _b = _a4, { children, onMouseEnter, onMouseLeave } = _b, props = __objRest(_b, ["children", "onMouseEnter", "onMouseLeave"]);
     var _a5;
     const baseColor = toCssColor((_a5 = props.c) != null ? _a5 : defaults.c);
+    const resolved = typeof children === "string" ? t(children) : children;
+    if (!props.href) {
+      const _b2 = props, { href: _href, target: _target, rel: _rel } = _b2, textProps = __objRest(_b2, ["href", "target", "rel"]);
+      return /* @__PURE__ */ jsx14(Fallback, __spreadProps(__spreadValues({}, textProps), { children }));
+    }
     const handleEnter = (e) => {
       e.currentTarget.style.color = HOVER_COLOR;
       onMouseEnter == null ? void 0 : onMouseEnter(e);
@@ -550,29 +699,88 @@ function createLink(defaults) {
         style: { transition: "color 0.15s" },
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
-        children
+        children: resolved
       })
     );
   };
 }
+function linkStyle(base2, extra) {
+  return Object.assign({ underline: "never" }, base2, extra);
+}
 var SdLink = {
   /** 최상위 강조 — 눈에 띄어야 하는 단일 링크 */
-  Strong: createLink({ fw: 700, c: "primary.6", fz: "xs", underline: "never" }),
+  Strong: createLink(linkStyle(textStyles.Strong), SdText.Strong),
   /** 기본 — 본문·네비게이션 수준의 일반 링크 */
-  Body: createLink({ fw: 500, c: "slate.7", fz: 15, underline: "never" }),
+  Body: createLink(linkStyle(textStyles.Body), SdText.Body),
   /** 보조 — 연락처·정책 등 부가 정보 */
-  Sub: createLink({ fw: 400, c: "slate.5", fz: "xs", underline: "never" }),
+  Sub: createLink(linkStyle(textStyles.Sub), SdText.Sub),
   /** 최소 강조 — 링크 목록처럼 밀도가 높고 톤을 낮춰야 하는 곳 */
-  Hint: createLink({ fw: 400, c: "slate.4", fz: "xs", underline: "never" })
+  Hint: createLink(linkStyle(textStyles.Hint), SdText.Hint)
 };
 var SdLinkStrong = SdLink.Strong;
 var SdLinkBody = SdLink.Body;
 var SdLinkSub = SdLink.Sub;
 var SdLinkHint = SdLink.Hint;
 
+// ui/atom/Toast.tsx
+import { Notifications, notifications } from "@mantine/notifications";
+import { IconAlertTriangle, IconCheck, IconInfoCircle, IconX as IconX2 } from "@tabler/icons-react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var toastStyles = {
+  /** 성공 — 저장·전송 완료 */
+  Success: { color: "green", icon: /* @__PURE__ */ jsx15(IconCheck, { size: 18 }), title: "\uC644\uB8CC" },
+  /** 실패 — 요청 오류·검증 실패 */
+  Error: { color: "red", icon: /* @__PURE__ */ jsx15(IconX2, { size: 18 }), title: "\uC624\uB958" },
+  /** 주의 — 되돌릴 수 없는 동작 안내 등 */
+  Warning: { color: "amber", icon: /* @__PURE__ */ jsx15(IconAlertTriangle, { size: 18 }), title: "\uC8FC\uC758" },
+  /** 안내 — 중립 정보 */
+  Info: { color: "primary", icon: /* @__PURE__ */ jsx15(IconInfoCircle, { size: 18 }), title: "\uC548\uB0B4" },
+  /** 진행 중 — 스피너 + 자동 닫힘 없음. Update로 결과 변형으로 바꾼다. */
+  Loading: { loading: true, autoClose: false, withCloseButton: false, title: "\uCC98\uB9AC \uC911" }
+};
+function createToast(defaults) {
+  return function SdToast2(message, options) {
+    return notifications.show(__spreadValues(__spreadProps(__spreadValues({}, defaults), { message }), options));
+  };
+}
+var SdToast = {
+  Success: createToast(toastStyles.Success),
+  Error: createToast(toastStyles.Error),
+  Warning: createToast(toastStyles.Warning),
+  Info: createToast(toastStyles.Info),
+  Loading: createToast(toastStyles.Loading),
+  /**
+   * 이미 떠 있는 알림을 다른 변형으로 교체한다 — `Loading` → `Success`/`Error` 전환용.
+   * `loading: false`·`autoClose`를 먼저 깔아 두므로 스피너가 그대로 남지 않는다.
+   */
+  Update: (id, variant, message, options) => notifications.update(__spreadValues(__spreadProps(__spreadValues({
+    id,
+    loading: false,
+    autoClose: 4e3,
+    withCloseButton: true
+  }, toastStyles[variant]), {
+    message
+  }), options)),
+  /** 특정 알림 닫기 */
+  Hide: (id) => notifications.hide(id),
+  /** 떠 있는 알림 전부 닫기 */
+  Clean: () => notifications.clean()
+};
+function SdToastProvider(props) {
+  return /* @__PURE__ */ jsx15(Notifications, __spreadValues({ position: "top-right", autoClose: 4e3, limit: 3 }, props));
+}
+var SdToastSuccess = SdToast.Success;
+var SdToastError = SdToast.Error;
+var SdToastWarning = SdToast.Warning;
+var SdToastInfo = SdToast.Info;
+var SdToastLoading = SdToast.Loading;
+var SdToastUpdate = SdToast.Update;
+var SdToastHide = SdToast.Hide;
+var SdToastClean = SdToast.Clean;
+
 // ui/molecule/TextBox.tsx
-import { Stack as Stack3 } from "@mantine/core";
-import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Stack as Stack4 } from "@mantine/core";
+import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
 function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", color_ = void 0) {
   return function SdTextBox2(_a4) {
     var _b = _a4, {
@@ -596,10 +804,10 @@ function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", co
     const variant = variantOverride != null ? variantOverride : titleVariant;
     const TitleComponent = SdTitle[variant];
     const DescComponent = SdText[descVariant];
-    return /* @__PURE__ */ jsxs3(Stack3, __spreadProps(__spreadValues({ gap: defaultGap }, stackProps), { children: [
-      label && /* @__PURE__ */ jsx15(SdText.Eyebrow, { children: label }),
-      /* @__PURE__ */ jsx15(TitleComponent, { c: colorRes, children: title }),
-      description && /* @__PURE__ */ jsx15(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
+    return /* @__PURE__ */ jsxs3(Stack4, __spreadProps(__spreadValues({ gap: defaultGap }, stackProps), { children: [
+      label && /* @__PURE__ */ jsx16(SdText.Eyebrow, { children: label }),
+      /* @__PURE__ */ jsx16(TitleComponent, { c: colorRes, children: title }),
+      description && /* @__PURE__ */ jsx16(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
       children
     ] }));
   };
@@ -616,26 +824,27 @@ var SdTextBoxCard = SdTextBox.Card;
 var SdTextBoxSub = SdTextBox.Sub;
 
 // ui/molecule/Features.tsx
-import { Card as Card2, SimpleGrid, Stack as Stack4 } from "@mantine/core";
+import { Card as Card2, SimpleGrid, Stack as Stack5 } from "@mantine/core";
 
 // util/sort.util.ts
-function filterAndSort(items) {
-  return (items != null ? items : []).filter((item) => item.isShow).sort((a, b) => a.order - b.order);
+function filterAndSort(items, direction = "asc") {
+  const sign = direction === "asc" ? 1 : -1;
+  return (items != null ? items : []).filter((item) => item.isShow).sort((a, b) => (a.order - b.order) * sign);
 }
 
 // ui/molecule/Features.tsx
-import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 function SdFeatures({ items, cols = { base: 1, sm: 2, md: 3 } }) {
   const visible = filterAndSort(items);
-  return /* @__PURE__ */ jsx16(SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ jsx16(Card2, { children: /* @__PURE__ */ jsxs4(Stack4, { gap: "sm", children: [
+  return /* @__PURE__ */ jsx17(SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ jsx17(Card2, { children: /* @__PURE__ */ jsxs4(Stack5, { gap: "sm", children: [
     item.icon,
-    /* @__PURE__ */ jsx16(SdTextBox.Card, { label: item.label, title: item.title, description: item.description })
+    /* @__PURE__ */ jsx17(SdTextBox.Card, { label: item.label, title: item.title, description: item.description })
   ] }, item.id) }, item.id)) });
 }
 
 // ui/molecule/Timeline.tsx
-import { Group as Group2, Stack as Stack5, Timeline as MantineTimeline } from "@mantine/core";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Group as Group3, Stack as Stack6, Timeline as MantineTimeline } from "@mantine/core";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 function SdTimeline({ items }) {
   const grouped = items.filter((item) => item.isShow).sort((a, b) => b.year - a.year || b.month - a.month).reduce((acc, item) => {
     var _a4, _b;
@@ -644,32 +853,32 @@ function SdTimeline({ items }) {
     return acc;
   }, {});
   const years = Object.keys(grouped).map(Number).sort((a, b) => b - a);
-  return /* @__PURE__ */ jsx17(MantineTimeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ jsx17(MantineTimeline.Item, { title: /* @__PURE__ */ jsxs5(SdTitle.Sub, { children: [
+  return /* @__PURE__ */ jsx18(MantineTimeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ jsx18(MantineTimeline.Item, { title: /* @__PURE__ */ jsxs5(SdTitle.Sub, { children: [
     year,
     "\uB144"
-  ] }), children: /* @__PURE__ */ jsx17(Stack5, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ jsxs5(Group2, { gap: "md", align: "center", wrap: "nowrap", children: [
+  ] }), children: /* @__PURE__ */ jsx18(Stack6, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ jsxs5(Group3, { gap: "md", align: "center", wrap: "nowrap", children: [
     /* @__PURE__ */ jsxs5(SdText.Eyebrow, { miw: 28, children: [
       event.month,
       "\uC6D4"
     ] }),
-    /* @__PURE__ */ jsx17(SdText.Sub, { style: { flex: 1 }, children: event.description })
+    /* @__PURE__ */ jsx18(SdText.Sub, { style: { flex: 1 }, children: event.description })
   ] }, event.id)) }) }, year)) });
 }
 
 // ui/molecule/Steps.tsx
-import { Box as Box4, Card as Card3, Group as Group3, Stack as Stack6, ThemeIcon as ThemeIcon2 } from "@mantine/core";
+import { Box as Box4, Card as Card3, Group as Group4, Stack as Stack7, ThemeIcon as ThemeIcon2 } from "@mantine/core";
 import { IconArrowDown, IconArrowRight } from "@tabler/icons-react";
 import { Fragment } from "react/jsx-runtime";
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
 function BubbleStep({ item, index, isLast }) {
-  return /* @__PURE__ */ jsxs6(Group3, { align: "flex-start", gap: "lg", wrap: "nowrap", children: [
+  return /* @__PURE__ */ jsxs6(Group4, { align: "flex-start", gap: "lg", wrap: "nowrap", children: [
     /* @__PURE__ */ jsxs6(
       Box4,
       {
         style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ jsx18(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
-          !isLast && /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(SdNumberIcon, { value: String(index + 1).padStart(2, "0"), color: "primary" }),
+          !isLast && /* @__PURE__ */ jsx19(
             Box4,
             {
               style: {
@@ -684,7 +893,7 @@ function BubbleStep({ item, index, isLast }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       SdTextBox.Card,
       {
         title: item.title,
@@ -696,11 +905,11 @@ function BubbleStep({ item, index, isLast }) {
   ] });
 }
 function Bubble({ items }) {
-  return /* @__PURE__ */ jsx18(Box4, { children: items.map((item, i) => /* @__PURE__ */ jsx18(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
+  return /* @__PURE__ */ jsx19(Box4, { children: items.map((item, i) => /* @__PURE__ */ jsx19(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
 }
 function CardStep({ item, index }) {
   return /* @__PURE__ */ jsxs6(Card3, { withBorder: true, radius: "md", p: 0, style: { height: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       Box4,
       {
         py: "lg",
@@ -715,35 +924,35 @@ function CardStep({ item, index }) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx18(Box4, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx18(SdTextBox.Card, { title: item.title, description: item.description }) })
+    /* @__PURE__ */ jsx19(Box4, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx19(SdTextBox.Card, { title: item.title, description: item.description }) })
   ] });
 }
 function CardArrow({ direction }) {
-  return /* @__PURE__ */ jsx18(ThemeIcon2, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ jsx18(IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ jsx18(IconArrowDown, { size: 20, stroke: 2.5 }) });
+  return /* @__PURE__ */ jsx19(ThemeIcon2, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ jsx19(IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ jsx19(IconArrowDown, { size: 20, stroke: 2.5 }) });
 }
 function CardVariant({ items }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx18(Stack6, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx18(CardStep, { item, index: i }),
-      i < items.length - 1 && /* @__PURE__ */ jsx18(Box4, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx18(CardArrow, { direction: "down" }) })
+    /* @__PURE__ */ jsx19(Stack7, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx19(CardStep, { item, index: i }),
+      i < items.length - 1 && /* @__PURE__ */ jsx19(Box4, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx19(CardArrow, { direction: "down" }) })
     ] }, i)) }),
-    /* @__PURE__ */ jsx18(Group3, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx18(Box4, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx18(CardStep, { item, index: i }) }),
-      i < items.length - 1 && /* @__PURE__ */ jsx18(Box4, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ jsx18(CardArrow, { direction: "right" }) })
+    /* @__PURE__ */ jsx19(Group4, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx19(Box4, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx19(CardStep, { item, index: i }) }),
+      i < items.length - 1 && /* @__PURE__ */ jsx19(Box4, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ jsx19(CardArrow, { direction: "right" }) })
     ] }, i)) })
   ] });
 }
 function StripStep({ item, index }) {
-  return /* @__PURE__ */ jsx18(Box4, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ jsxs6(Stack6, { gap: 4, children: [
+  return /* @__PURE__ */ jsx19(Box4, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ jsxs6(Stack7, { gap: 4, children: [
     /* @__PURE__ */ jsxs6(SdText.Eyebrow, { children: [
       "STEP ",
       String(index + 1).padStart(2, "0")
     ] }),
-    /* @__PURE__ */ jsx18(SdTextBox.Card, { title: item.title, description: item.description })
+    /* @__PURE__ */ jsx19(SdTextBox.Card, { title: item.title, description: item.description })
   ] }) });
 }
 function Strip({ items }) {
-  return /* @__PURE__ */ jsx18(Stack6, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx18(StripStep, { item, index: i }, i)) });
+  return /* @__PURE__ */ jsx19(Stack7, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx19(StripStep, { item, index: i }, i)) });
 }
 var SdSteps = { Bubble, Card: CardVariant, Strip };
 var SdStepsBubble = SdSteps.Bubble;
@@ -755,18 +964,18 @@ import {
   Avatar,
   Box as Box5,
   Card as Card4,
-  Group as Group4,
-  Rating,
+  Group as Group5,
+  Rating as Rating2,
   SimpleGrid as SimpleGrid2,
-  Stack as Stack7
+  Stack as Stack8
 } from "@mantine/core";
-import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
 function AuthorRow({ item }) {
-  return /* @__PURE__ */ jsxs7(Group4, { gap: "sm", wrap: "nowrap", children: [
-    item.avatar && /* @__PURE__ */ jsx19(Avatar, { src: item.avatar, size: "md", radius: "xl" }),
-    !item.avatar && /* @__PURE__ */ jsx19(Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
-    /* @__PURE__ */ jsxs7(Stack7, { gap: 0, children: [
-      /* @__PURE__ */ jsx19(SdText.Strong, { fz: "sm", children: item.name }),
+  return /* @__PURE__ */ jsxs7(Group5, { gap: "sm", wrap: "nowrap", children: [
+    item.avatar && /* @__PURE__ */ jsx20(Avatar, { src: item.avatar, size: "md", radius: "xl" }),
+    !item.avatar && /* @__PURE__ */ jsx20(Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
+    /* @__PURE__ */ jsxs7(Stack8, { gap: 0, children: [
+      /* @__PURE__ */ jsx20(SdText.Strong, { fz: "sm", children: item.name }),
       /* @__PURE__ */ jsxs7(SdText.Sub, { children: [
         item.role,
         item.company ? ` \xB7 ${item.company}` : ""
@@ -776,28 +985,28 @@ function AuthorRow({ item }) {
 }
 function CardTestimonial(_a4) {
   var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
-  return /* @__PURE__ */ jsx19(Card4, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", h: "100%", children: [
-    item.rating && /* @__PURE__ */ jsx19(Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
-    /* @__PURE__ */ jsxs7(Stack7, { gap: "xs", style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx19(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
-      item.lines.map((line, i) => /* @__PURE__ */ jsx19(SdText.Body, { children: line }, i))
+  return /* @__PURE__ */ jsx20(Card4, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ jsxs7(Stack8, { gap: "md", h: "100%", children: [
+    item.rating && /* @__PURE__ */ jsx20(Rating2, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
+    /* @__PURE__ */ jsxs7(Stack8, { gap: "xs", style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx20(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
+      item.lines.map((line, i) => /* @__PURE__ */ jsx20(SdText.Body, { children: line }, i))
     ] }),
-    /* @__PURE__ */ jsx19(AuthorRow, { item })
+    /* @__PURE__ */ jsx20(AuthorRow, { item })
   ] }) }));
 }
 function Strip2(_a4) {
   var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
-  return /* @__PURE__ */ jsx19(Box5, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", children: [
-    item.rating && /* @__PURE__ */ jsx19(Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
-    /* @__PURE__ */ jsxs7(Group4, { gap: 4, align: "flex-start", children: [
-      /* @__PURE__ */ jsx19(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
-      /* @__PURE__ */ jsx19(Stack7, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ jsx19(SdText.Body, { children: line }, i)) })
+  return /* @__PURE__ */ jsx20(Box5, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs7(Stack8, { gap: "md", children: [
+    item.rating && /* @__PURE__ */ jsx20(Rating2, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
+    /* @__PURE__ */ jsxs7(Group5, { gap: 4, align: "flex-start", children: [
+      /* @__PURE__ */ jsx20(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
+      /* @__PURE__ */ jsx20(Stack8, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ jsx20(SdText.Body, { children: line }, i)) })
     ] }),
-    /* @__PURE__ */ jsx19(AuthorRow, { item })
+    /* @__PURE__ */ jsx20(AuthorRow, { item })
   ] }) }));
 }
 function Grid({ items, cols = { base: 1, sm: 2, md: 3 } }) {
-  return /* @__PURE__ */ jsx19(SimpleGrid2, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ jsx19(CardTestimonial, { item }, i)) });
+  return /* @__PURE__ */ jsx20(SimpleGrid2, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ jsx20(CardTestimonial, { item }, i)) });
 }
 var SdTestimonial = {
   /** 카드형 — 그리드 배치용 */
@@ -815,86 +1024,86 @@ var SdTestimonialGrid = SdTestimonial.Grid;
 import {
   Card as Card5,
   Divider,
-  Group as Group5,
+  Group as Group6,
   SimpleGrid as SimpleGrid3,
-  Stack as Stack8,
+  Stack as Stack9,
   ThemeIcon as ThemeIcon3
 } from "@mantine/core";
-import { IconCheck, IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { IconCheck as IconCheck2, IconX as IconX3 } from "@tabler/icons-react";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 function Default(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5;
-  return /* @__PURE__ */ jsx20(Card5, __spreadProps(__spreadValues({ withBorder: true, style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack8, { gap: "xl", children: [
-    /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
-      /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsx20(SdTitle.Card, { children: item.name }),
-        item.isPopular && /* @__PURE__ */ jsx20(SdBadge.Primary, { children: "\uCD94\uCC9C" })
+  return /* @__PURE__ */ jsx21(Card5, __spreadProps(__spreadValues({ withBorder: true, style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack9, { gap: "xl", children: [
+    /* @__PURE__ */ jsxs8(Stack9, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs8(Group6, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsx21(SdTitle.Card, { children: item.name }),
+        item.isPopular && /* @__PURE__ */ jsx21(SdBadge.Primary, { children: "\uCD94\uCC9C" })
       ] }),
-      item.description && /* @__PURE__ */ jsx20(SdText.Sub, { children: item.description })
+      item.description && /* @__PURE__ */ jsx21(SdText.Sub, { children: item.description })
     ] }),
-    /* @__PURE__ */ jsxs8(Group5, { gap: 4, align: "baseline", children: [
-      /* @__PURE__ */ jsx20(SdTitle.Display, { children: item.price }),
+    /* @__PURE__ */ jsxs8(Group6, { gap: 4, align: "baseline", children: [
+      /* @__PURE__ */ jsx21(SdTitle.Display, { children: item.price }),
       item.period && /* @__PURE__ */ jsxs8(SdText.Sub, { children: [
         "/ ",
         item.period
       ] })
     ] }),
-    /* @__PURE__ */ jsx20(Divider, {}),
-    /* @__PURE__ */ jsx20(Stack8, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(Divider, {}),
+    /* @__PURE__ */ jsx21(Stack9, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group6, { gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx21(
         ThemeIcon3,
         {
           size: "xs",
           radius: "xl",
           color: f.included ? "primary" : "slate",
           variant: f.included ? "filled" : "subtle",
-          children: f.included ? /* @__PURE__ */ jsx20(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx20(IconX2, { size: 12 })
+          children: f.included ? /* @__PURE__ */ jsx21(IconCheck2, { size: 12 }) : /* @__PURE__ */ jsx21(IconX3, { size: 12 })
         }
       ),
-      /* @__PURE__ */ jsx20(SdText.Body, { fz: "sm", c: f.included ? "slate.7" : "slate.4", children: f.text })
+      /* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", c: f.included ? "slate.7" : "slate.4", children: f.text })
     ] }, i)) }),
-    /* @__PURE__ */ jsx20(SdButton.Outline, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+    /* @__PURE__ */ jsx21(SdButton.Outline, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
   ] }) }));
 }
 function Featured(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5;
-  return /* @__PURE__ */ jsx20(Card5, __spreadProps(__spreadValues({ bg: "primary.6", style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack8, { gap: "xl", children: [
-    /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
-      /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ jsx20(SdTitle.Card, { c: "white", children: item.name }),
-        item.isPopular && /* @__PURE__ */ jsx20(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
+  return /* @__PURE__ */ jsx21(Card5, __spreadProps(__spreadValues({ bg: "primary.6", style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack9, { gap: "xl", children: [
+    /* @__PURE__ */ jsxs8(Stack9, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs8(Group6, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsx21(SdTitle.Card, { c: "white", children: item.name }),
+        item.isPopular && /* @__PURE__ */ jsx21(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
       ] }),
-      item.description && /* @__PURE__ */ jsx20(SdText.Body, { c: "primary.1", children: item.description })
+      item.description && /* @__PURE__ */ jsx21(SdText.Body, { c: "primary.1", children: item.description })
     ] }),
-    /* @__PURE__ */ jsxs8(Group5, { gap: 4, align: "baseline", children: [
-      /* @__PURE__ */ jsx20(SdTitle.Display, { c: "white", children: item.price }),
+    /* @__PURE__ */ jsxs8(Group6, { gap: 4, align: "baseline", children: [
+      /* @__PURE__ */ jsx21(SdTitle.Display, { c: "white", children: item.price }),
       item.period && /* @__PURE__ */ jsxs8(SdText.Body, { c: "primary.2", children: [
         "/ ",
         item.period
       ] })
     ] }),
-    /* @__PURE__ */ jsx20(Divider, { color: "primary.4" }),
-    /* @__PURE__ */ jsx20(Stack8, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(Divider, { color: "primary.4" }),
+    /* @__PURE__ */ jsx21(Stack9, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group6, { gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx21(
         ThemeIcon3,
         {
           size: "xs",
           radius: "xl",
           color: "white",
           variant: f.included ? "filled" : "subtle",
-          children: f.included ? /* @__PURE__ */ jsx20(IconCheck, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ jsx20(IconX2, { size: 12, color: "rgba(255,255,255,0.4)" })
+          children: f.included ? /* @__PURE__ */ jsx21(IconCheck2, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ jsx21(IconX3, { size: 12, color: "rgba(255,255,255,0.4)" })
         }
       ),
-      /* @__PURE__ */ jsx20(SdText.Body, { fz: "sm", c: f.included ? "white" : "primary.3", children: f.text })
+      /* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", c: f.included ? "white" : "primary.3", children: f.text })
     ] }, i)) }),
-    /* @__PURE__ */ jsx20(SdButton.White, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+    /* @__PURE__ */ jsx21(SdButton.White, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
   ] }) }));
 }
 function Grid2({ items, cols = { base: 1, sm: 2, md: 3 }, onSelect }) {
-  return /* @__PURE__ */ jsx20(SimpleGrid3, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
-    (item, i) => item.isPopular ? /* @__PURE__ */ jsx20(Featured, { item, onSelect }, i) : /* @__PURE__ */ jsx20(Default, { item, onSelect }, i)
+  return /* @__PURE__ */ jsx21(SimpleGrid3, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
+    (item, i) => item.isPopular ? /* @__PURE__ */ jsx21(Featured, { item, onSelect }, i) : /* @__PURE__ */ jsx21(Default, { item, onSelect }, i)
   ) });
 }
 var SdPricingCard = {
@@ -910,31 +1119,31 @@ var SdPricingCardFeatured = SdPricingCard.Featured;
 var SdPricingCardGrid = SdPricingCard.Grid;
 
 // ui/molecule/Faq.tsx
-import { Accordion, Box as Box7, Stack as Stack9 } from "@mantine/core";
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Accordion, Box as Box7, Stack as Stack10 } from "@mantine/core";
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 function Default2(_a4) {
   var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
-  return /* @__PURE__ */ jsx21(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx21(Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
-    /* @__PURE__ */ jsx21(Accordion.Control, { children: /* @__PURE__ */ jsx21(SdText.Strong, { fz: "sm", children: item.question }) }),
-    /* @__PURE__ */ jsx21(Accordion.Panel, { children: /* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", children: item.answer }) })
+  return /* @__PURE__ */ jsx22(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx22(Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
+    /* @__PURE__ */ jsx22(Accordion.Control, { children: /* @__PURE__ */ jsx22(SdText.Strong, { fz: "sm", children: item.question }) }),
+    /* @__PURE__ */ jsx22(Accordion.Panel, { children: /* @__PURE__ */ jsx22(SdText.Body, { fz: "sm", children: item.answer }) })
   ] }, i)) }) }));
 }
 function Filled(_a4) {
   var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
-  return /* @__PURE__ */ jsx21(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx21(Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
-    /* @__PURE__ */ jsx21(Accordion.Control, { children: /* @__PURE__ */ jsx21(SdText.Strong, { fz: "sm", children: item.question }) }),
-    /* @__PURE__ */ jsx21(Accordion.Panel, { children: /* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", children: item.answer }) })
+  return /* @__PURE__ */ jsx22(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx22(Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
+    /* @__PURE__ */ jsx22(Accordion.Control, { children: /* @__PURE__ */ jsx22(SdText.Strong, { fz: "sm", children: item.question }) }),
+    /* @__PURE__ */ jsx22(Accordion.Panel, { children: /* @__PURE__ */ jsx22(SdText.Body, { fz: "sm", children: item.answer }) })
   ] }, i)) }) }));
 }
 function WithHeader(_a4) {
   var _b = _a4, { label, title, description, items } = _b, boxProps = __objRest(_b, ["label", "title", "description", "items"]);
-  return /* @__PURE__ */ jsxs9(Stack9, __spreadProps(__spreadValues({ gap: "xl" }, boxProps), { children: [
-    /* @__PURE__ */ jsxs9(Stack9, { gap: "xs", children: [
-      label && /* @__PURE__ */ jsx21(SdText.Eyebrow, { children: label }),
-      /* @__PURE__ */ jsx21(SdTitle.Section, { children: title }),
-      description && /* @__PURE__ */ jsx21(SdText.Body, { children: description })
+  return /* @__PURE__ */ jsxs9(Stack10, __spreadProps(__spreadValues({ gap: "xl" }, boxProps), { children: [
+    /* @__PURE__ */ jsxs9(Stack10, { gap: "xs", children: [
+      label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { children: label }),
+      /* @__PURE__ */ jsx22(SdTitle.Section, { children: title }),
+      description && /* @__PURE__ */ jsx22(SdText.Body, { children: description })
     ] }),
-    /* @__PURE__ */ jsx21(Default2, { items })
+    /* @__PURE__ */ jsx22(Default2, { items })
   ] }));
 }
 var SdFaq = {
@@ -950,8 +1159,8 @@ var SdFaqFilled = SdFaq.Filled;
 var SdFaqWithHeader = SdFaq.WithHeader;
 
 // ui/molecule/Cta.tsx
-import { Box as Box8, Center as Center2, Group as Group6, Stack as Stack10 } from "@mantine/core";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Box as Box8, Center as Center2, Group as Group7, Stack as Stack11 } from "@mantine/core";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 function Banner(_a4) {
   var _b = _a4, {
     label,
@@ -970,15 +1179,15 @@ function Banner(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ jsx22(Box8, __spreadProps(__spreadValues({ bg: "primary.7", py: { base: "xl", md: 80 }, px: { base: "md", md: "xl" } }, boxProps), { children: /* @__PURE__ */ jsx22(Center2, { children: /* @__PURE__ */ jsxs10(Stack10, { gap: "xl", align: "center", maw: 600, children: [
-    /* @__PURE__ */ jsxs10(Stack10, { gap: "sm", align: "center", children: [
-      label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { c: "primary.3", children: label }),
-      /* @__PURE__ */ jsx22(SdTitle.Section, { c: "white", ta: "center", children: title }),
-      description && /* @__PURE__ */ jsx22(SdText.Body, { c: "primary.2", ta: "center", children: description })
+  return /* @__PURE__ */ jsx23(Box8, __spreadProps(__spreadValues({ bg: "primary.7", py: { base: "xl", md: 80 }, px: { base: "md", md: "xl" } }, boxProps), { children: /* @__PURE__ */ jsx23(Center2, { children: /* @__PURE__ */ jsxs10(Stack11, { gap: "xl", align: "center", maw: 600, children: [
+    /* @__PURE__ */ jsxs10(Stack11, { gap: "sm", align: "center", children: [
+      label && /* @__PURE__ */ jsx23(SdText.Eyebrow, { c: "primary.3", children: label }),
+      /* @__PURE__ */ jsx23(SdTitle.Section, { c: "white", ta: "center", children: title }),
+      description && /* @__PURE__ */ jsx23(SdText.Body, { c: "primary.2", ta: "center", children: description })
     ] }),
-    /* @__PURE__ */ jsxs10(Group6, { gap: "sm", children: [
-      /* @__PURE__ */ jsx22(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
-      secondaryLabel && /* @__PURE__ */ jsx22(SdButton.Ghost, { size: "md", c: "primary.2", onClick: onSecondary, children: secondaryLabel })
+    /* @__PURE__ */ jsxs10(Group7, { gap: "sm", children: [
+      /* @__PURE__ */ jsx23(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
+      secondaryLabel && /* @__PURE__ */ jsx23(SdButton.Ghost, { size: "md", c: "primary.2", onClick: onSecondary, children: secondaryLabel })
     ] })
   ] }) }) }));
 }
@@ -1000,7 +1209,7 @@ function Subtle(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     Box8,
     __spreadProps(__spreadValues({
       bg: "primary.0",
@@ -1008,15 +1217,15 @@ function Subtle(_a4) {
       px: { base: "md", md: "xl" },
       style: { borderRadius: "var(--mantine-radius-lg)" }
     }, boxProps), {
-      children: /* @__PURE__ */ jsx22(Center2, { children: /* @__PURE__ */ jsxs10(Stack10, { gap: "lg", align: "center", maw: 560, children: [
-        /* @__PURE__ */ jsxs10(Stack10, { gap: "sm", align: "center", children: [
-          label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { children: label }),
-          /* @__PURE__ */ jsx22(SdTitle.Section, { ta: "center", children: title }),
-          description && /* @__PURE__ */ jsx22(SdText.Body, { ta: "center", children: description })
+      children: /* @__PURE__ */ jsx23(Center2, { children: /* @__PURE__ */ jsxs10(Stack11, { gap: "lg", align: "center", maw: 560, children: [
+        /* @__PURE__ */ jsxs10(Stack11, { gap: "sm", align: "center", children: [
+          label && /* @__PURE__ */ jsx23(SdText.Eyebrow, { children: label }),
+          /* @__PURE__ */ jsx23(SdTitle.Section, { ta: "center", children: title }),
+          description && /* @__PURE__ */ jsx23(SdText.Body, { ta: "center", children: description })
         ] }),
-        /* @__PURE__ */ jsxs10(Group6, { gap: "sm", children: [
-          /* @__PURE__ */ jsx22(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ jsx22(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
+        /* @__PURE__ */ jsxs10(Group7, { gap: "sm", children: [
+          /* @__PURE__ */ jsx23(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
+          secondaryLabel && /* @__PURE__ */ jsx23(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
         ] })
       ] }) })
     })
@@ -1040,7 +1249,7 @@ function Inline(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     Box8,
     __spreadProps(__spreadValues({
       py: { base: "xl", md: 48 },
@@ -1050,15 +1259,15 @@ function Inline(_a4) {
         borderBottom: "1px solid var(--mantine-color-slate-2)"
       }
     }, boxProps), {
-      children: /* @__PURE__ */ jsxs10(Group6, { justify: "space-between", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ jsxs10(Stack10, { gap: "xs", style: { flex: 1 }, children: [
-          label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { children: label }),
-          /* @__PURE__ */ jsx22(SdTitle.Card, { children: title }),
-          description && /* @__PURE__ */ jsx22(SdText.Sub, { children: description })
+      children: /* @__PURE__ */ jsxs10(Group7, { justify: "space-between", align: "center", gap: "xl", children: [
+        /* @__PURE__ */ jsxs10(Stack11, { gap: "xs", style: { flex: 1 }, children: [
+          label && /* @__PURE__ */ jsx23(SdText.Eyebrow, { children: label }),
+          /* @__PURE__ */ jsx23(SdTitle.Card, { children: title }),
+          description && /* @__PURE__ */ jsx23(SdText.Sub, { children: description })
         ] }),
-        /* @__PURE__ */ jsxs10(Group6, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx22(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ jsx22(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
+        /* @__PURE__ */ jsxs10(Group7, { gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx23(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
+          secondaryLabel && /* @__PURE__ */ jsx23(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
         ] })
       ] })
     })
@@ -1077,33 +1286,33 @@ var SdCtaSubtle = SdCta.Subtle;
 var SdCtaInline = SdCta.Inline;
 
 // ui/molecule/Solution.tsx
-import { useState } from "react";
-import { Button as Button2, Divider as Divider2, Group as Group7, Stack as Stack12, ThemeIcon as ThemeIcon4 } from "@mantine/core";
+import { useState as useState2 } from "react";
+import { Button as Button2, Divider as Divider2, Group as Group8, Stack as Stack13, ThemeIcon as ThemeIcon4 } from "@mantine/core";
 import Link3 from "next/link";
 
 // ui/molecule/SolutionCard.tsx
-import { Button, Card as Card6, SimpleGrid as SimpleGrid4, Stack as Stack11 } from "@mantine/core";
+import { Button, Card as Card6, SimpleGrid as SimpleGrid4, Stack as Stack12 } from "@mantine/core";
 import Link2 from "next/link";
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 function SolutionCardItem(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5, _b2;
-  return /* @__PURE__ */ jsx23(Card6, __spreadProps(__spreadValues({ withBorder: true }, cardProps), { children: /* @__PURE__ */ jsxs11(Stack11, { gap: "md", children: [
+  return /* @__PURE__ */ jsx24(Card6, __spreadProps(__spreadValues({ withBorder: true, h: "100%", style: { display: "flex", flexDirection: "column" } }, cardProps), { children: /* @__PURE__ */ jsxs11(Stack12, { gap: "md", style: { flex: 1 }, children: [
     item.icon,
-    /* @__PURE__ */ jsx23(SdBadge.Primary, { children: item.category }),
-    /* @__PURE__ */ jsx23(SdTitle.Card, { children: item.title }),
-    /* @__PURE__ */ jsx23(SdText.Body, { children: item.description }),
-    item.href ? /* @__PURE__ */ jsxs11(Button, { variant: "subtle", color: "slate", component: Link2, href: item.href, children: [
+    /* @__PURE__ */ jsx24(SdBadge.Primary, { children: item.category }),
+    /* @__PURE__ */ jsx24(SdTitle.Card, { children: item.title }),
+    /* @__PURE__ */ jsx24(SdText.Body, { children: item.description }),
+    item.href ? /* @__PURE__ */ jsxs11(Button, { variant: "subtle", color: "slate", component: Link2, href: item.href, mt: "auto", children: [
       (_a5 = item.ctaLabel) != null ? _a5 : "\uC790\uC138\uD788 \uBCF4\uAE30",
       " \u2192"
-    ] }) : /* @__PURE__ */ jsxs11(SdButton.Ghost, { onClick: () => onSelect == null ? void 0 : onSelect(item), children: [
+    ] }) : /* @__PURE__ */ jsxs11(SdButton.Ghost, { onClick: () => onSelect == null ? void 0 : onSelect(item), mt: "auto", children: [
       (_b2 = item.ctaLabel) != null ? _b2 : "\uC790\uC138\uD788 \uBCF4\uAE30",
       " \u2192"
     ] })
   ] }) }));
 }
 function Grid3({ items, cols = { base: 1, sm: 2, md: 3 }, onSelect }) {
-  return /* @__PURE__ */ jsx23(SimpleGrid4, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx23(SolutionCardItem, { item, onSelect }, i)) });
+  return /* @__PURE__ */ jsx24(SimpleGrid4, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx24(SolutionCardItem, { item, onSelect }, i)) });
 }
 var SdSolutionCard = {
   /** 단일 compact 카드 */
@@ -1115,27 +1324,27 @@ var SdSolutionCardItem = SdSolutionCard.Item;
 var SdSolutionCardGrid = SdSolutionCard.Grid;
 
 // ui/molecule/Solution.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function Filtered({ items, allLabel = "\uC804\uCCB4", cols, onSelect }) {
   const categories = ["all", ...Array.from(new Set(items.map((i) => i.category)))];
-  const [active, setActive] = useState("all");
+  const [active, setActive] = useState2("all");
   const filtered = active === "all" ? items : items.filter((i) => i.category === active);
-  return /* @__PURE__ */ jsxs12(Stack12, { gap: "xl", children: [
-    /* @__PURE__ */ jsx24(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ jsx24(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ jsx24(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
-    /* @__PURE__ */ jsx24(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
+  return /* @__PURE__ */ jsxs12(Stack13, { gap: "xl", children: [
+    /* @__PURE__ */ jsx25(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ jsx25(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ jsx25(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
+    /* @__PURE__ */ jsx25(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
   ] });
 }
 function List({ items, onSelect }) {
-  return /* @__PURE__ */ jsx24(Stack12, { gap: 0, children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx25(Stack13, { gap: 0, children: items.map((item, i) => {
     var _a4, _b;
     return /* @__PURE__ */ jsxs12("div", { children: [
-      i > 0 && /* @__PURE__ */ jsx24(Divider2, {}),
-      /* @__PURE__ */ jsxs12(Group7, { align: "flex-start", py: "lg", gap: "lg", children: [
-        item.icon && /* @__PURE__ */ jsx24(ThemeIcon4, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
-        /* @__PURE__ */ jsxs12(Stack12, { gap: "xs", style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx24(SdBadge.Primary, { children: item.category }),
-          /* @__PURE__ */ jsx24(SdTitle.Card, { children: item.title }),
-          /* @__PURE__ */ jsx24(SdText.Body, { children: item.description }),
+      i > 0 && /* @__PURE__ */ jsx25(Divider2, {}),
+      /* @__PURE__ */ jsxs12(Group8, { align: "flex-start", py: "lg", gap: "lg", children: [
+        item.icon && /* @__PURE__ */ jsx25(ThemeIcon4, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
+        /* @__PURE__ */ jsxs12(Stack13, { gap: "xs", style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx25(SdBadge.Primary, { children: item.category }),
+          /* @__PURE__ */ jsx25(SdTitle.Card, { children: item.title }),
+          /* @__PURE__ */ jsx25(SdText.Body, { children: item.description }),
           item.href ? /* @__PURE__ */ jsxs12(
             Button2,
             {
@@ -1176,7 +1385,7 @@ var SdSolutionList = SdSolution.List;
 
 // ui/molecule/Clients.tsx
 import { Anchor, Box as Box9, SimpleGrid as SimpleGrid5, Tooltip } from "@mantine/core";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var grayStyle = {
   filter: "grayscale(1) opacity(0.5)",
   transition: "filter 0.25s"
@@ -1185,12 +1394,18 @@ var colorStyle = {
   filter: "grayscale(0) opacity(1)"
 };
 function LogoImage({ client, height }) {
-  return /* @__PURE__ */ jsx25(Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ jsx25(Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ jsx26(Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx26(
     "img",
     {
       src: client.logo,
       alt: client.name,
-      style: __spreadValues({ height, width: "auto", objectFit: "contain", display: "block" }, grayStyle),
+      style: __spreadValues({
+        height,
+        width: "auto",
+        maxWidth: "100%",
+        objectFit: "contain",
+        display: "block"
+      }, grayStyle),
       onMouseEnter: (e) => Object.assign(e.currentTarget.style, colorStyle),
       onMouseLeave: (e) => Object.assign(e.currentTarget.style, grayStyle)
     }
@@ -1201,16 +1416,19 @@ function Grid4({
   cols = { base: 2, sm: 3, md: 4, lg: 6 },
   logoHeight = 40
 }) {
-  return /* @__PURE__ */ jsx25(SimpleGrid5, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(SimpleGrid5, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ jsx26(
     Box9,
     {
       style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "12px 8px"
+        padding: "12px 8px",
+        minWidth: 0,
+        // 그리드 트랙이 이미지 intrinsic width로 밀려 깨지는 것 방지
+        overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx25(LogoImage, { client, height: logoHeight })
+      children: /* @__PURE__ */ jsx26(LogoImage, { client, height: logoHeight })
     },
     i
   )) });
@@ -1219,8 +1437,8 @@ var KEYFRAME = `@keyframes sd-clients-marquee { from { transform: translateX(0)
 function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
   const doubled = [...items, ...items];
   return /* @__PURE__ */ jsxs13(Box9, { style: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx25("style", { children: KEYFRAME }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26("style", { children: KEYFRAME }),
+    /* @__PURE__ */ jsx26(
       Box9,
       {
         style: {
@@ -1238,7 +1456,7 @@ function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
           ;
           e.currentTarget.style.animationPlayState = "running";
         },
-        children: doubled.map((client, i) => /* @__PURE__ */ jsx25(LogoImage, { client, height: logoHeight }, i))
+        children: doubled.map((client, i) => /* @__PURE__ */ jsx26(LogoImage, { client, height: logoHeight }, i))
       }
     )
   ] });
@@ -1253,12 +1471,12 @@ var SdClientsGrid = Grid4;
 var SdClientsMarquee = Marquee;
 
 // ui/molecule/Map.tsx
-import { useState as useState2 } from "react";
-import { Box as Box10, Stack as Stack13 } from "@mantine/core";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { Box as Box10, Stack as Stack14 } from "@mantine/core";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function MapFrame({ address, height }) {
-  return /* @__PURE__ */ jsxs14(Stack13, { gap: "xs", children: [
-    /* @__PURE__ */ jsx26(Box10, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs14(Stack14, { gap: "xs", children: [
+    /* @__PURE__ */ jsx27(Box10, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ jsx27(
       "iframe",
       {
         src: address.embbedUrl,
@@ -1282,18 +1500,18 @@ function MapFrame({ address, height }) {
 function Single(_a4) {
   var _b = _a4, { address, height = 400 } = _b, boxProps = __objRest(_b, ["address", "height"]);
   if (!address.embbedUrl) return null;
-  return /* @__PURE__ */ jsx26(Box10, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx26(MapFrame, { address, height }) }));
+  return /* @__PURE__ */ jsx27(Box10, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx27(MapFrame, { address, height }) }));
 }
 function Tabs2({ addresses, height = 400 }) {
   var _a4, _b, _c;
   const mapped = addresses.filter((a) => a.embbedUrl);
-  const [active, setActive] = useState2((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
+  const [active, setActive] = useState3((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
   if (mapped.length === 0) return null;
-  if (mapped.length === 1) return /* @__PURE__ */ jsx26(MapFrame, { address: mapped[0], height });
+  if (mapped.length === 1) return /* @__PURE__ */ jsx27(MapFrame, { address: mapped[0], height });
   const current = (_c = mapped.find((a) => a.label === active)) != null ? _c : mapped[0];
-  return /* @__PURE__ */ jsxs14(Stack13, { gap: "md", children: [
-    /* @__PURE__ */ jsx26(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ jsx26(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ jsx26(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
-    /* @__PURE__ */ jsx26(MapFrame, { address: current, height })
+  return /* @__PURE__ */ jsxs14(Stack14, { gap: "md", children: [
+    /* @__PURE__ */ jsx27(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ jsx27(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ jsx27(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
+    /* @__PURE__ */ jsx27(MapFrame, { address: current, height })
   ] });
 }
 var SdMap = {
@@ -1305,11 +1523,78 @@ var SdMap = {
 var SdMapSingle = Single;
 var SdMapTabs = Tabs2;
 
+// ui/molecule/Breadcrumb.tsx
+import { Box as Box11, Breadcrumbs } from "@mantine/core";
+import { usePathname } from "next/navigation";
+import { IconChevronRight, IconHome } from "@tabler/icons-react";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+function normalizePath(href) {
+  if (!href) return "";
+  const trimmed = href.replace(/\/+$/, "");
+  return trimmed === "" ? "/" : trimmed;
+}
+function buildTrail(navItems, currentHref) {
+  const target = normalizePath(currentHref);
+  const byId = new Map(navItems.map((item) => [item.id, item]));
+  let current = navItems.find((item) => normalizePath(item.href) === target);
+  if (!current) {
+    current = navItems.filter((item) => item.href && target.startsWith(normalizePath(item.href) + "/")).sort((a, b) => normalizePath(b.href).length - normalizePath(a.href).length)[0];
+  }
+  if (!current) return [];
+  const trail = [];
+  const seen = /* @__PURE__ */ new Set();
+  let node = current;
+  while (node && !seen.has(node.id)) {
+    seen.add(node.id);
+    trail.unshift(node);
+    node = node.parentId != null ? byId.get(node.parentId) : void 0;
+  }
+  return trail;
+}
+function SdBreadcrumb(_a4) {
+  var _b = _a4, {
+    navItems,
+    currentHref,
+    homeHref = "/",
+    homeLabel = "\uD648"
+  } = _b, boxProps = __objRest(_b, [
+    "navItems",
+    "currentHref",
+    "homeHref",
+    "homeLabel"
+  ]);
+  var _a5;
+  const pathname = usePathname();
+  const trail = buildTrail(navItems, (_a5 = currentHref != null ? currentHref : pathname) != null ? _a5 : "");
+  return /* @__PURE__ */ jsx28(Box11, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs15(
+    Breadcrumbs,
+    {
+      separator: /* @__PURE__ */ jsx28(IconChevronRight, { size: 14, stroke: 2, color: "var(--mantine-color-slate-4)" }),
+      separatorMargin: "xs",
+      children: [
+        /* @__PURE__ */ jsx28(
+          SdLink.Sub,
+          {
+            href: homeHref,
+            "aria-label": homeLabel,
+            style: { display: "inline-flex", alignItems: "center" },
+            children: /* @__PURE__ */ jsx28(IconHome, { size: 16, stroke: 2 })
+          }
+        ),
+        trail.map((item, i) => {
+          const isLast = i === trail.length - 1;
+          return isLast ? /* @__PURE__ */ jsx28(SdLink.Body, { children: item.label }, item.id) : /* @__PURE__ */ jsx28(SdLink.Sub, { href: item.href, children: item.label }, item.id);
+        })
+      ]
+    }
+  ) }));
+}
+
 // ui/organism/HeroCarousel.tsx
 import { Carousel } from "@mantine/carousel";
-import { Anchor as Anchor2, Box as Box11, Group as Group8, Stack as Stack14 } from "@mantine/core";
+import { Anchor as Anchor2, Box as Box12, Group as Group9, Stack as Stack15 } from "@mantine/core";
 import { IconArrowNarrowRight } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var variantMap = {
   primary: SdButton.Primary,
   secondary: SdButton.Secondary,
@@ -1319,25 +1604,25 @@ var variantMap = {
 function CtaButton({ cta }) {
   var _a4;
   const Button3 = variantMap[(_a4 = cta.variant) != null ? _a4 : "primary"];
-  return /* @__PURE__ */ jsx27(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx27(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx27(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx27(Button3, { size: "md", children: cta.label }) });
+  return /* @__PURE__ */ jsx29(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx29(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx29(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx29(Button3, { size: "md", children: cta.label }) });
 }
 function HeroCarousel({ slides, children }) {
-  if (children) return /* @__PURE__ */ jsx27(Fragment3, { children });
+  if (children) return /* @__PURE__ */ jsx29(Fragment3, { children });
   const filterdSlides = filterAndSort(slides);
-  return /* @__PURE__ */ jsx27(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx27(Carousel.Slide, { children: /* @__PURE__ */ jsx27(
-    Box11,
+  return /* @__PURE__ */ jsx29(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx29(Carousel.Slide, { children: /* @__PURE__ */ jsx29(
+    Box12,
     {
       style: {
         height: "100%",
-        backgroundImage: `url(${slide.image})`,
+        backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(${slide.image})`,
         backgroundSize: "cover",
         backgroundPosition: "center",
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsxs15(Stack14, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
-        /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsxs16(Stack15, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
+        /* @__PURE__ */ jsx29(
           SdTextBox.Hero,
           {
             title: slide.title,
@@ -1346,30 +1631,77 @@ function HeroCarousel({ slides, children }) {
             align: "center"
           }
         ),
-        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx27(Group8, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx27(CtaButton, { cta }, cta.href)) })
+        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx29(Group9, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx29(CtaButton, { cta }, cta.href)) })
       ] })
     }
   ) }, i)) });
 }
 
 // ui/organism/Header.tsx
-import { Box as Box12, Burger, Drawer, Group as Group9, NavLink, Stack as Stack15 } from "@mantine/core";
+import { Box as Box13, Burger, Drawer, Group as Group10, Menu, NavLink, Stack as Stack16 } from "@mantine/core";
+import { IconChevronDown } from "@tabler/icons-react";
 import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var BAR_HEIGHT = 60;
-function SdHeader({ navItems, loginFlag }) {
-  const [opened, { toggle, close }] = useDisclosure();
+var MAX_DEPTH = 3;
+var NAV_LINK_STYLES = {
+  label: {
+    fontWeight: textStyles.Body.fw,
+    fontSize: `var(--mantine-font-size-${textStyles.Body.fz})`,
+    color: toCssColor(textStyles.Body.c),
+    lineHeight: textStyles.Body.lh
+  }
+};
+function useNavTree(navItems) {
   const visibleItems = filterAndSort(navItems);
-  const topItems = visibleItems.filter((item) => !item.parentId);
-  const childrenOf = (parentId) => visibleItems.filter((item) => item.parentId === parentId);
-  const hasAnyChildren = visibleItems.some((item) => item.parentId);
+  return {
+    topItems: visibleItems.filter((item) => !item.parentId),
+    childrenOf: (parentId) => visibleItems.filter((item) => item.parentId === parentId),
+    hasAnyChildren: visibleItems.some((item) => item.parentId)
+  };
+}
+function MobileNavNode({ item, depth, childrenOf, close }) {
+  const kids = depth < MAX_DEPTH ? childrenOf(item.id) : [];
+  if (kids.length === 0) {
+    return /* @__PURE__ */ jsx30(Box13, { px: "sm", py: 8, children: /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, onClick: close, children: item.label }) });
+  }
+  return /* @__PURE__ */ jsx30(
+    NavLink,
+    {
+      label: item.label,
+      styles: NAV_LINK_STYLES,
+      component: item.href ? "a" : "button",
+      href: item.href,
+      childrenOffset: 28,
+      children: kids.map((kid) => /* @__PURE__ */ jsx30(
+        MobileNavNode,
+        {
+          item: kid,
+          depth: depth + 1,
+          childrenOf,
+          close
+        },
+        kid.id
+      ))
+    }
+  );
+}
+function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
+  return /* @__PURE__ */ jsx30(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs17(Stack16, { gap: 0, children: [
+    topItems.map((item) => /* @__PURE__ */ jsx30(MobileNavNode, { item, depth: 1, childrenOf, close }, item.id)),
+    loginFlag && /* @__PURE__ */ jsx30(Stack16, { gap: "xs", mt: "md", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+  ] }) });
+}
+function MegaHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = useDisclosure();
+  const { topItems, childrenOf, hasAnyChildren } = useNavTree(navItems);
   const { hovered, ref: hoverRef } = useHover();
   const { focused, ref: focusRef } = useFocusWithin();
   const rootRef = useMergedRef(hoverRef, focusRef);
   const expanded = hasAnyChildren && (hovered || focused);
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx28(
-      Box12,
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(
+      Box13,
       {
         ref: rootRef,
         pos: "relative",
@@ -1379,12 +1711,12 @@ function SdHeader({ navItems, loginFlag }) {
           borderBottom: expanded ? "1px solid var(--mantine-color-slate-2)" : void 0,
           transition: "box-shadow 0.15s"
         },
-        children: /* @__PURE__ */ jsx28(SdContainer, { children: /* @__PURE__ */ jsxs16(Group9, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx28(Group9, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx28(Logo, {}) }),
-          /* @__PURE__ */ jsx28(Group9, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        children: /* @__PURE__ */ jsx30(SdContainer, { children: /* @__PURE__ */ jsxs17(Group10, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx30(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx30(Logo, {}) }),
+          /* @__PURE__ */ jsx30(Group10, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
             const kids = childrenOf(item.id);
-            return /* @__PURE__ */ jsxs16(Stack15, { gap: 0, align: "center", children: [
-              /* @__PURE__ */ jsx28(Group9, { h: BAR_HEIGHT, align: "center", children: item.href ? /* @__PURE__ */ jsx28(SdLink.Body, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx28(SdText.Strong, { children: item.label }) }),
+            return /* @__PURE__ */ jsxs17(Stack16, { gap: 0, align: "center", children: [
+              /* @__PURE__ */ jsx30(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }) }),
               kids.length > 0 && /*
                 Mantine Collapse를 쓰지 않는다 — 접힐 때 display:none이 되어
                 하위 링크가 폭 계산에서 빠졌다가 펼칠 때 다시 들어오면서
@@ -1392,8 +1724,8 @@ function SdHeader({ navItems, loginFlag }) {
                 height 0 + overflow hidden은 폭 기여를 유지하므로 간격이 고정된다.
                 visibility:hidden이 접힌 상태의 링크를 탭 순서에서도 빼준다.
               */
-              /* @__PURE__ */ jsx28(
-                Box12,
+              /* @__PURE__ */ jsx30(
+                Box13,
                 {
                   "aria-hidden": !expanded,
                   style: {
@@ -1403,43 +1735,178 @@ function SdHeader({ navItems, loginFlag }) {
                     visibility: expanded ? "visible" : "hidden",
                     transition: "opacity 0.15s ease"
                   },
-                  children: /* @__PURE__ */ jsx28(Stack15, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => /* @__PURE__ */ jsx28(SdLink.Sub, { href: kid.href, children: kid.label }, kid.id)) })
+                  children: /* @__PURE__ */ jsx30(Stack16, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => {
+                    const grandkids = childrenOf(kid.id);
+                    if (grandkids.length === 0) {
+                      return /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                    }
+                    return /* @__PURE__ */ jsxs17(Stack16, { gap: 2, align: "center", children: [
+                      /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }),
+                      grandkids.map((gk) => /* @__PURE__ */ jsx30(SdLink.Sub, { href: gk.href, children: gk.label }, gk.id))
+                    ] }, kid.id);
+                  }) })
                 }
               )
             ] }, item.id);
           }) }),
-          /* @__PURE__ */ jsxs16(Group9, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ jsx28(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-            loginFlag && /* @__PURE__ */ jsx28(Group9, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx28(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+          /* @__PURE__ */ jsxs17(Group10, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx30(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+            loginFlag && /* @__PURE__ */ jsx30(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
           ] })
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx28(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs16(Stack15, { gap: 0, children: [
-      topItems.map((item) => {
+    /* @__PURE__ */ jsx30(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
+  ] });
+}
+function renderMenuLeaf(item) {
+  return item.href ? /* @__PURE__ */ jsx30(Menu.Item, { component: "a", href: item.href, children: item.label }, item.id) : /* @__PURE__ */ jsx30(Menu.Label, { children: item.label }, item.id);
+}
+function SimpleHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = useDisclosure();
+  const { topItems, childrenOf } = useNavTree(navItems);
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(Box13, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ jsx30(SdContainer, { children: /* @__PURE__ */ jsxs17(Group10, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx30(Logo, {}),
+      /* @__PURE__ */ jsx30(Group10, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        const kids = childrenOf(item.id);
+        if (kids.length === 0) {
+          return /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }, item.id);
+        }
+        return (
+          /*
+            trigger="click-hover" — 마우스는 hover로, 키보드/터치는 click으로 연다.
+            Menu.Target은 ref를 받을 수 있는 단일 엘리먼트여야 하므로
+            SdLink/SdText가 아니라 Box를 타깃으로 두고 라벨을 그 안에 넣는다.
+          */
+          /* @__PURE__ */ jsxs17(
+            Menu,
+            {
+              trigger: "click-hover",
+              openDelay: 50,
+              closeDelay: 120,
+              position: "bottom",
+              offset: 12,
+              shadow: "md",
+              radius: "md",
+              withinPortal: true,
+              children: [
+                /* @__PURE__ */ jsx30(Menu.Target, { children: /* @__PURE__ */ jsx30(Box13, { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs17(Group10, { gap: 4, align: "center", wrap: "nowrap", children: [
+                  /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }),
+                  /* @__PURE__ */ jsx30(IconChevronDown, { size: 14, stroke: 2 })
+                ] }) }) }),
+                /* @__PURE__ */ jsx30(Menu.Dropdown, { children: kids.map((kid) => {
+                  const grandkids = childrenOf(kid.id);
+                  if (grandkids.length > 0) {
+                    return /* @__PURE__ */ jsxs17(Menu.Sub, { children: [
+                      /* @__PURE__ */ jsx30(Menu.Sub.Target, { children: /* @__PURE__ */ jsx30(Menu.Sub.Item, { children: kid.label }) }),
+                      /* @__PURE__ */ jsx30(Menu.Sub.Dropdown, { children: grandkids.map(renderMenuLeaf) })
+                    ] }, kid.id);
+                  }
+                  return renderMenuLeaf(kid);
+                }) })
+              ]
+            },
+            item.id
+          )
+        );
+      }) }),
+      /* @__PURE__ */ jsxs17(Group10, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx30(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ jsx30(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx30(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
+  ] });
+}
+function PanelHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = useDisclosure();
+  const { topItems, childrenOf } = useNavTree(navItems);
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(Box13, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ jsx30(SdContainer, { children: /* @__PURE__ */ jsxs17(Group10, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx30(Logo, {}),
+      /* @__PURE__ */ jsx30(Group10, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
         const kids = childrenOf(item.id);
         if (kids.length === 0) {
-          return /* @__PURE__ */ jsx28(Box12, { px: "sm", py: 8, children: /* @__PURE__ */ jsx28(SdLink.Body, { href: item.href, onClick: close, children: item.label }) }, item.id);
+          return /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }, item.id);
         }
-        return /* @__PURE__ */ jsx28(
-          NavLink,
+        return /* @__PURE__ */ jsxs17(
+          Menu,
           {
-            label: item.label,
-            href: item.href,
-            childrenOffset: 28,
-            onClick: kids.length > 0 ? void 0 : close,
-            children: kids.map((kid) => /* @__PURE__ */ jsx28(NavLink, { label: kid.label, href: kid.href, onClick: close }, kid.id))
+            trigger: "click-hover",
+            openDelay: 50,
+            closeDelay: 120,
+            position: "bottom",
+            offset: 12,
+            shadow: "md",
+            radius: "md",
+            withinPortal: true,
+            children: [
+              /* @__PURE__ */ jsx30(Menu.Target, { children: /* @__PURE__ */ jsx30(Box13, { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs17(Group10, { gap: 4, align: "center", wrap: "nowrap", children: [
+                /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }),
+                /* @__PURE__ */ jsx30(IconChevronDown, { size: 14, stroke: 2 })
+              ] }) }) }),
+              /* @__PURE__ */ jsx30(Menu.Dropdown, { children: /* @__PURE__ */ jsx30(Stack16, { gap: "xs", p: "xs", children: kids.map((kid) => {
+                const grandkids = childrenOf(kid.id);
+                if (grandkids.length === 0) {
+                  return /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                }
+                return /* @__PURE__ */ jsxs17(Stack16, { gap: 2, children: [
+                  /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }),
+                  grandkids.map((gk) => /* @__PURE__ */ jsx30(SdLink.Sub, { href: gk.href, pl: "sm", children: gk.label }, gk.id))
+                ] }, kid.id);
+              }) }) })
+            ]
           },
           item.id
         );
-      }),
-      loginFlag && /* @__PURE__ */ jsx28(Stack15, { gap: "xs", mt: "md", children: /* @__PURE__ */ jsx28(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
-    ] }) })
+      }) }),
+      /* @__PURE__ */ jsxs17(Group10, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx30(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ jsx30(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx30(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
   ] });
 }
+var SdHeader = Object.assign(MegaHeader, {
+  Mega: MegaHeader,
+  Simple: SimpleHeader,
+  Panel: PanelHeader
+});
+var SdHeaderMega = MegaHeader;
+var SdHeaderSimple = SimpleHeader;
+var SdHeaderPanel = PanelHeader;
 
 // ui/organism/Footer.tsx
-import { ActionIcon, Box as Box13, Divider as Divider3, Flex, Grid as Grid5, Group as Group10, SimpleGrid as SimpleGrid6, Stack as Stack16 } from "@mantine/core";
+import { ActionIcon, Box as Box14, Divider as Divider3, Flex, Grid as Grid5, Group as Group11, SimpleGrid as SimpleGrid6, Stack as Stack17 } from "@mantine/core";
 import {
   IconBrandFacebook,
   IconBrandGithub,
@@ -1449,16 +1916,16 @@ import {
   IconBrandYoutube,
   IconWorld
 } from "@tabler/icons-react";
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 function FooterNavColumns({ items }) {
   const topLevel = items.filter((item) => !item.parentId);
   const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
   const CHILD_THRESH = 4;
-  return /* @__PURE__ */ jsx29(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx29(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack16, { gap: "xs", children: [
-    /* @__PURE__ */ jsx29(SdText.Sub, { children: group.label }),
+  return /* @__PURE__ */ jsx31(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx31(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs18(Stack17, { gap: "xs", children: [
+    /* @__PURE__ */ jsx31(SdLink.Sub, { href: group.href, children: group.label }, group.id),
     getChildren(group.id).map((link, id) => {
       if (id >= CHILD_THRESH) return;
-      return /* @__PURE__ */ jsx29(SdLink.Hint, { href: link.href, children: link.label }, link.id);
+      return /* @__PURE__ */ jsx31(SdLink.Hint, { href: link.href, children: link.label }, link.id);
     })
   ] }) }, group.id)) });
 }
@@ -1472,10 +1939,10 @@ var SOCIAL_ICONS = {
   blog: IconWorld
 };
 function FooterSocials({ items }) {
-  return /* @__PURE__ */ jsx29(Group10, { gap: 0, wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ jsx31(Group11, { gap: 0, wrap: "nowrap", children: items.map((item) => {
     var _a4, _b;
     const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : IconWorld;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx31(
       ActionIcon,
       {
         component: "a",
@@ -1486,62 +1953,62 @@ function FooterSocials({ items }) {
         color: "gray",
         variant: "subtle",
         "aria-label": (_b = item.label) != null ? _b : item.platform,
-        children: /* @__PURE__ */ jsx29(Icon, { size: 18, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx31(Icon, { size: 18, stroke: 1.5 })
       },
       item.url
     );
   }) });
 }
 function InfoCell({ label, children }) {
-  return /* @__PURE__ */ jsxs17(Group10, { gap: 6, wrap: "nowrap", align: "baseline", children: [
-    /* @__PURE__ */ jsx29(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
-    typeof children === "string" ? /* @__PURE__ */ jsx29(SdText.Sub, { children }) : children
+  return /* @__PURE__ */ jsxs18(Group11, { gap: 6, wrap: "nowrap", align: "baseline", children: [
+    /* @__PURE__ */ jsx31(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
+    typeof children === "string" ? /* @__PURE__ */ jsx31(SdText.Sub, { children }) : children
   ] });
 }
 function FooterCompanyInfo({ company }) {
   const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
-  return /* @__PURE__ */ jsxs17(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
-    /* @__PURE__ */ jsx29(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
-    /* @__PURE__ */ jsx29(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
-    sortedAddresses.map((addr) => /* @__PURE__ */ jsx29(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
-    /* @__PURE__ */ jsx29(InfoCell, { label: "Tel", children: /* @__PURE__ */ jsx29(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
-    company.fax && /* @__PURE__ */ jsx29(InfoCell, { label: "Fax", children: company.fax }),
-    /* @__PURE__ */ jsx29(InfoCell, { label: "Email", children: /* @__PURE__ */ jsx29(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
+  return /* @__PURE__ */ jsxs18(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
+    /* @__PURE__ */ jsx31(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
+    /* @__PURE__ */ jsx31(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
+    sortedAddresses.map((addr) => /* @__PURE__ */ jsx31(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
+    /* @__PURE__ */ jsx31(InfoCell, { label: "Tel", children: /* @__PURE__ */ jsx31(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
+    company.fax && /* @__PURE__ */ jsx31(InfoCell, { label: "Fax", children: company.fax }),
+    /* @__PURE__ */ jsx31(InfoCell, { label: "Email", children: /* @__PURE__ */ jsx31(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
   ] });
 }
 function SdFooter({ company, navItems, policyLinks, description }) {
   const visibleNav = filterAndSort(navItems);
   const visiblePolicy = filterAndSort(policyLinks);
-  return /* @__PURE__ */ jsx29(Box13, { component: "footer", children: /* @__PURE__ */ jsx29(SdContainer, { children: /* @__PURE__ */ jsxs17(Stack16, { children: [
-    /* @__PURE__ */ jsx29(Logo, { size: "sm" }),
-    description && /* @__PURE__ */ jsx29(SdText.Sub, { children: description }),
-    /* @__PURE__ */ jsxs17(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
-      /* @__PURE__ */ jsx29(Box13, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx29(FooterCompanyInfo, { company }) }),
-      visibleNav.length > 0 && /* @__PURE__ */ jsx29(Box13, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx29(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx29(FooterNavColumns, { items: visibleNav }) }) })
+  return /* @__PURE__ */ jsx31(Box14, { component: "footer", children: /* @__PURE__ */ jsx31(SdContainer, { py: "lg", children: /* @__PURE__ */ jsxs18(Stack17, { children: [
+    /* @__PURE__ */ jsx31(Logo, { size: "sm" }),
+    description && /* @__PURE__ */ jsx31(SdText.Sub, { children: description }),
+    /* @__PURE__ */ jsxs18(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
+      /* @__PURE__ */ jsx31(Box14, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx31(FooterCompanyInfo, { company }) }),
+      visibleNav.length > 0 && /* @__PURE__ */ jsx31(Box14, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx31(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx31(FooterNavColumns, { items: visibleNav }) }) })
     ] }),
-    /* @__PURE__ */ jsx29(Divider3, {}),
-    /* @__PURE__ */ jsxs17(Group10, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
-      /* @__PURE__ */ jsxs17(SdText.Sub, { children: [
+    /* @__PURE__ */ jsx31(Divider3, {}),
+    /* @__PURE__ */ jsxs18(Group11, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ jsxs18(SdText.Sub, { children: [
         "\xA9 ",
         company.copyrightYear,
         " ",
-        company.name,
+        t(company.name),
         ". All rights reserved."
       ] }),
-      /* @__PURE__ */ jsxs17(Group10, { gap: "lg", wrap: "wrap", children: [
-        visiblePolicy.length > 0 && /* @__PURE__ */ jsx29(Group10, { gap: "lg", children: visiblePolicy.map((item) => {
-          const Link4 = item.highlight ? SdLink.Strong : SdLink.Sub;
-          return /* @__PURE__ */ jsx29(Link4, { href: item.href, children: item.label }, item.id);
+      /* @__PURE__ */ jsxs18(Group11, { gap: "lg", wrap: "wrap", children: [
+        visiblePolicy.length > 0 && /* @__PURE__ */ jsx31(Group11, { gap: "lg", children: visiblePolicy.map((item) => {
+          const Link4 = item.highlight ? SdLink.Body : SdLink.Sub;
+          return /* @__PURE__ */ jsx31(Link4, { href: item.href, children: item.label }, item.id);
         }) }),
-        company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx29(FooterSocials, { items: company.socials })
+        company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx31(FooterSocials, { items: company.socials })
       ] })
     ] })
   ] }) }) });
 }
 
 // ui/organism/FeatureSection.tsx
-import { Stack as Stack17 } from "@mantine/core";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Stack as Stack18 } from "@mantine/core";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function SdFeatureSection(_a4) {
   var _b = _a4, {
     label,
@@ -1558,8 +2025,8 @@ function SdFeatureSection(_a4) {
     "cols",
     "py"
   ]);
-  return /* @__PURE__ */ jsx30(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs18(Stack17, { gap: "xl", children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs19(Stack18, { gap: "xl", children: [
+    /* @__PURE__ */ jsx32(
       SdTextBox.Section,
       {
         label,
@@ -1570,13 +2037,13 @@ function SdFeatureSection(_a4) {
         align: "center"
       }
     ),
-    /* @__PURE__ */ jsx30(SdFeatures, { items, cols })
+    /* @__PURE__ */ jsx32(SdFeatures, { items, cols })
   ] }) }));
 }
 
 // ui/organism/TimelineSection.tsx
-import { Center as Center3, Stack as Stack18 } from "@mantine/core";
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Center as Center3, Stack as Stack19 } from "@mantine/core";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 function SdTimelineSection(_a4) {
   var _b = _a4, {
     label,
@@ -1591,15 +2058,15 @@ function SdTimelineSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ jsx31(Center3, { children: /* @__PURE__ */ jsxs19(Stack18, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
-    /* @__PURE__ */ jsx31(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ jsx31(Center3, { children: /* @__PURE__ */ jsx31(SdTimeline, { items }) })
+  return /* @__PURE__ */ jsx33(Center3, { children: /* @__PURE__ */ jsxs20(Stack19, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
+    /* @__PURE__ */ jsx33(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ jsx33(Center3, { children: /* @__PURE__ */ jsx33(SdTimeline, { items }) })
   ] })) });
 }
 
 // ui/organism/StepsSection.tsx
-import { Stack as Stack19 } from "@mantine/core";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Stack as Stack20 } from "@mantine/core";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 function SdStepsSection(_a4) {
   var _b = _a4, {
     label,
@@ -1614,17 +2081,17 @@ function SdStepsSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ jsx32(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs20(Stack19, { gap: "xl", children: [
-    (label || title || description) && /* @__PURE__ */ jsx32(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ jsx32(SdSteps.Bubble, { items })
+  return /* @__PURE__ */ jsx34(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs21(Stack20, { gap: "xl", children: [
+    (label || title || description) && /* @__PURE__ */ jsx34(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ jsx34(SdSteps.Bubble, { items })
   ] }) }));
 }
 
 // ui/organism/ErrorView.tsx
-import { Center as Center4, Group as Group11, Stack as Stack20, Text as Text2 } from "@mantine/core";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Center as Center4, Group as Group12, Stack as Stack21, Text as Text2 } from "@mantine/core";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function StatusCode({ code }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     Text2,
     {
       fz: 160,
@@ -1638,15 +2105,15 @@ function StatusCode({ code }) {
   );
 }
 function Page({ error, onReset, onHome }) {
-  return /* @__PURE__ */ jsx33(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx33(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack20, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ jsx33(StatusCode, { code: "500" }),
-    /* @__PURE__ */ jsxs21(Stack20, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ jsx33(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
-      /* @__PURE__ */ jsx33(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
+  return /* @__PURE__ */ jsx35(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx35(SdContainer, { children: /* @__PURE__ */ jsxs22(Stack21, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ jsx35(StatusCode, { code: "500" }),
+    /* @__PURE__ */ jsxs22(Stack21, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ jsx35(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
+      /* @__PURE__ */ jsx35(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
     ] }),
-    /* @__PURE__ */ jsxs21(Group11, { gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx33(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
-      onHome && /* @__PURE__ */ jsx33(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
+    /* @__PURE__ */ jsxs22(Group12, { gap: "sm", justify: "center", children: [
+      /* @__PURE__ */ jsx35(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+      onHome && /* @__PURE__ */ jsx35(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
     ] })
   ] }) }) });
 }
@@ -1658,15 +2125,15 @@ function NotFound({
   },
   onBack = () => window.history.back()
 }) {
-  return /* @__PURE__ */ jsx33(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx33(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack20, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ jsx33(StatusCode, { code: "404" }),
-    /* @__PURE__ */ jsxs21(Stack20, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ jsx33(SdTitle.Section, { children: title }),
-      /* @__PURE__ */ jsx33(SdText.Body, { maw: 480, children: description })
+  return /* @__PURE__ */ jsx35(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx35(SdContainer, { children: /* @__PURE__ */ jsxs22(Stack21, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ jsx35(StatusCode, { code: "404" }),
+    /* @__PURE__ */ jsxs22(Stack21, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ jsx35(SdTitle.Section, { children: title }),
+      /* @__PURE__ */ jsx35(SdText.Body, { maw: 480, children: description })
     ] }),
-    /* @__PURE__ */ jsxs21(Group11, { gap: "sm", justify: "center", children: [
-      onHome && /* @__PURE__ */ jsx33(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
-      onBack && /* @__PURE__ */ jsx33(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
+    /* @__PURE__ */ jsxs22(Group12, { gap: "sm", justify: "center", children: [
+      onHome && /* @__PURE__ */ jsx35(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
+      onBack && /* @__PURE__ */ jsx35(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
     ] })
   ] }) }) });
 }
@@ -1679,175 +2146,418 @@ var SdErrorView = {
 var SdErrorViewPage = SdErrorView.Page;
 var SdErrorViewNotFound = SdErrorView.NotFound;
 
+// ui/organism/LoginView.tsx
+import { Box as Box16, Center as Center5, Checkbox as Checkbox2, Divider as Divider4, Group as Group13, Paper, SimpleGrid as SimpleGrid7, Stack as Stack22 } from "@mantine/core";
+import {
+  IconBrandApple,
+  IconBrandGithub as IconBrandGithub2,
+  IconBrandGoogle,
+  IconBrandKakaoTalk,
+  IconCircleLetterN,
+  IconLogin2
+} from "@tabler/icons-react";
+
+// ui/surface.ts
+var brandSurface = {
+  background: `
+    radial-gradient(90% 120% at 12% 0%, var(--mantine-color-primary-7) 0%, transparent 58%),
+    radial-gradient(70% 100% at 100% 100%, var(--mantine-color-primary-9) 0%, transparent 55%),
+    var(--mantine-color-slate-9)`
+};
+var brandDotTexture = {
+  backgroundImage: "radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px)",
+  backgroundSize: "18px 18px",
+  maskImage: "linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 70%)",
+  WebkitMaskImage: "linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 70%)",
+  pointerEvents: "none"
+};
+
+// ui/organism/LoginView.tsx
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+var SOCIAL_META = {
+  google: { Icon: IconBrandGoogle, label: "\uAD6C\uAE00\uB85C \uB85C\uADF8\uC778" },
+  kakao: { Icon: IconBrandKakaoTalk, label: "\uCE74\uCE74\uC624\uB85C \uB85C\uADF8\uC778" },
+  naver: { Icon: IconCircleLetterN, label: "\uB124\uC774\uBC84\uB85C \uB85C\uADF8\uC778" },
+  apple: { Icon: IconBrandApple, label: "\uC560\uD50C\uB85C \uB85C\uADF8\uC778" },
+  github: { Icon: IconBrandGithub2, label: "\uAE43\uD5C8\uBE0C\uB85C \uB85C\uADF8\uC778" }
+};
+function LoginForm({
+  onSubmit,
+  loading,
+  error,
+  submitLabel = "\uB85C\uADF8\uC778",
+  withRemember = true,
+  findPasswordHref,
+  signUpHref,
+  socials,
+  children
+}) {
+  function handleSubmit(event) {
+    var _a4, _b;
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    onSubmit == null ? void 0 : onSubmit({
+      email: String((_a4 = data.get("email")) != null ? _a4 : ""),
+      password: String((_b = data.get("password")) != null ? _b : ""),
+      remember: data.get("remember") === "on"
+    });
+  }
+  return /* @__PURE__ */ jsx36("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ jsxs23(Stack22, { gap: "md", children: [
+    error && /* @__PURE__ */ jsx36(SdText.Error, { children: error }),
+    /* @__PURE__ */ jsx36(
+      SdInput.Email,
+      {
+        name: "email",
+        label: "\uC774\uBA54\uC77C",
+        placeholder: "name@example.com",
+        autoComplete: "email",
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsx36(
+      SdInput.Password,
+      {
+        name: "password",
+        label: "\uBE44\uBC00\uBC88\uD638",
+        placeholder: "\uBE44\uBC00\uBC88\uD638\uB97C \uC785\uB825\uD558\uC138\uC694",
+        autoComplete: "current-password",
+        required: true
+      }
+    ),
+    (withRemember || findPasswordHref) && /* @__PURE__ */ jsxs23(Group13, { justify: "space-between", align: "center", wrap: "nowrap", children: [
+      withRemember ? /* @__PURE__ */ jsx36(Checkbox2, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ jsx36("span", {}),
+      findPasswordHref && /* @__PURE__ */ jsx36(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
+    ] }),
+    /* @__PURE__ */ jsx36(
+      SdButton.Primary,
+      {
+        type: "submit",
+        fullWidth: true,
+        loading,
+        leftSection: /* @__PURE__ */ jsx36(IconLogin2, { size: 16 }),
+        children: submitLabel
+      }
+    ),
+    socials && socials.length > 0 && /* @__PURE__ */ jsxs23(Fragment6, { children: [
+      /* @__PURE__ */ jsx36(Divider4, { label: "\uB610\uB294", labelPosition: "center" }),
+      /* @__PURE__ */ jsx36(Stack22, { gap: "xs", children: socials.map((social) => {
+        var _a4;
+        const { Icon, label } = SOCIAL_META[social.provider];
+        return /* @__PURE__ */ jsx36(
+          SdButton.Outline,
+          {
+            color: "slate",
+            fullWidth: true,
+            type: "button",
+            onClick: social.onClick,
+            leftSection: /* @__PURE__ */ jsx36(Icon, { size: 16 }),
+            children: (_a4 = social.label) != null ? _a4 : label
+          },
+          social.provider
+        );
+      }) })
+    ] }),
+    signUpHref && /* @__PURE__ */ jsxs23(Group13, { gap: 6, justify: "center", children: [
+      /* @__PURE__ */ jsx36(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
+      /* @__PURE__ */ jsx36(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
+    ] }),
+    children
+  ] }) });
+}
+function FormHeader({ title, description }) {
+  return /* @__PURE__ */ jsxs23(Stack22, { gap: "lg", children: [
+    /* @__PURE__ */ jsx36(Logo, { size: "sm" }),
+    /* @__PURE__ */ jsx36(SdTextBox.Card, { title, description: description != null ? description : "" })
+  ] });
+}
+function Card7(_a4) {
+  var _b = _a4, {
+    title = "\uB85C\uADF8\uC778",
+    description = "%c \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uB824\uBA74 \uB85C\uADF8\uC778\uD574 \uC8FC\uC138\uC694.",
+    mih = "100svh"
+  } = _b, formProps = __objRest(_b, [
+    "title",
+    "description",
+    "mih"
+  ]);
+  return /* @__PURE__ */ jsx36(Center5, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ jsx36(Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ jsxs23(Stack22, { gap: "xl", children: [
+    /* @__PURE__ */ jsx36(FormHeader, { title, description }),
+    /* @__PURE__ */ jsx36(LoginForm, __spreadValues({}, formProps))
+  ] }) }) });
+}
+function Split(_a4) {
+  var _b = _a4, {
+    title = "\uB85C\uADF8\uC778",
+    description = "\uACC4\uC815 \uC815\uBCF4\uB97C \uC785\uB825\uD574 \uC8FC\uC138\uC694.",
+    brandTitle = "%c",
+    brandDescription = "\uD558\uB098\uC758 \uACC4\uC815\uC73C\uB85C \uBAA8\uB4E0 \uC11C\uBE44\uC2A4\uB97C \uC774\uC6A9\uD558\uC138\uC694.",
+    mih = "100svh"
+  } = _b, formProps = __objRest(_b, [
+    "title",
+    "description",
+    "brandTitle",
+    "brandDescription",
+    "mih"
+  ]);
+  return /* @__PURE__ */ jsxs23(SimpleGrid7, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
+    /* @__PURE__ */ jsxs23(
+      Box16,
+      {
+        visibleFrom: "md",
+        pos: "relative",
+        style: __spreadValues({ overflow: "hidden", display: "flex", alignItems: "flex-end" }, brandSurface),
+        children: [
+          /* @__PURE__ */ jsx36(Box16, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ jsx36(Box16, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx36(
+            SdTextBox.Hero,
+            {
+              title: brandTitle,
+              description: brandDescription,
+              gap: "sm",
+              maxDescWidth: 420,
+              ta: "left",
+              align: "flex-start"
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx36(Center5, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ jsxs23(Stack22, { gap: "xl", w: "100%", maw: 400, children: [
+      /* @__PURE__ */ jsx36(FormHeader, { title, description }),
+      /* @__PURE__ */ jsx36(LoginForm, __spreadValues({}, formProps))
+    ] }) })
+  ] });
+}
+var SdLoginView = {
+  /** 중앙 정렬 카드 — 기본 로그인 화면 */
+  Card: Card7,
+  /** 좌측 브랜드 패널 + 우측 폼 — 넓은 화면용 */
+  Split
+};
+var SdLoginViewCard = SdLoginView.Card;
+var SdLoginViewSplit = SdLoginView.Split;
+
+// ui/organism/Result.tsx
+import { Box as Box17, Center as Center6, Group as Group14, Stack as Stack23 } from "@mantine/core";
+import { IconCircleCheck, IconCircleX } from "@tabler/icons-react";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+function ResultIcon({ color, Icon }) {
+  return /* @__PURE__ */ jsx37(Center6, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ jsx37(Icon, { size: 48, stroke: 1.5, color: `var(--mantine-color-${color}-6)` }) });
+}
+function createResult(defaults) {
+  return function SdResult2({
+    title = defaults.title,
+    description,
+    primaryAction,
+    secondaryAction,
+    children,
+    mih = "60vh"
+  }) {
+    return /* @__PURE__ */ jsx37(Center6, { mih, children: /* @__PURE__ */ jsx37(SdContainer, { children: /* @__PURE__ */ jsxs24(Stack23, { align: "center", gap: "lg", ta: "center", children: [
+      /* @__PURE__ */ jsx37(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
+      /* @__PURE__ */ jsxs24(Stack23, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ jsx37(SdTitle.Section, { children: title }),
+        description && /* @__PURE__ */ jsx37(SdText.Body, { maw: 480, children: description })
+      ] }),
+      children && /* @__PURE__ */ jsx37(Box17, { children }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs24(Group14, { gap: "sm", justify: "center", children: [
+        primaryAction && /* @__PURE__ */ jsx37(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
+        secondaryAction && /* @__PURE__ */ jsx37(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
+      ] })
+    ] }) }) });
+  };
+}
+var SdResult = {
+  /** 성공 — 가입 완료·결제 완료 등 */
+  Success: createResult({
+    color: "green",
+    Icon: IconCircleCheck,
+    title: "\uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4"
+  }),
+  /** 실패 — 결제 실패·처리 중 오류 등. 서버 오류·404는 SdErrorView를 쓴다. */
+  Error: createResult({
+    color: "red",
+    Icon: IconCircleX,
+    title: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4"
+  })
+};
+var SdResultSuccess = SdResult.Success;
+var SdResultError = SdResult.Error;
+
 // ui/template/MainLayout.tsx
 import { AppShell } from "@mantine/core";
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+var headers = {
+  mega: SdHeader.Mega,
+  simple: SdHeader.Simple,
+  panel: SdHeader.Panel
+};
 function MainLayout({
   children,
   navItems,
   companyInfo,
-  loginFlag
+  loginFlag,
+  headerVariant = "mega"
 }) {
-  return /* @__PURE__ */ jsxs22(AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ jsx34(AppShell.Header, { children: /* @__PURE__ */ jsx34(SdHeader, { navItems, loginFlag }) }),
-    /* @__PURE__ */ jsx34(AppShell.Main, { children }),
-    /* @__PURE__ */ jsx34(SdFooter, { company: companyInfo, navItems })
+  const Header = headers[headerVariant];
+  return /* @__PURE__ */ jsxs25(AppShell, { header: { height: 60 }, children: [
+    /* @__PURE__ */ jsx38(AppShell.Header, { children: /* @__PURE__ */ jsx38(Header, { navItems, loginFlag }) }),
+    /* @__PURE__ */ jsx38(AppShell.Main, { children }),
+    /* @__PURE__ */ jsx38(SdFooter, { company: companyInfo, navItems })
   ] });
 }
 
 // ui/template/PageLayout.tsx
-import { Box as Box15, Divider as Divider4, Space, Stack as Stack21 } from "@mantine/core";
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
-function Content({ children }) {
-  return /* @__PURE__ */ jsx35(SdContainer, { py: "xl", children: /* @__PURE__ */ jsx35(Stack21, { gap: "xl", children }) });
+import { Box as Box18, Divider as Divider5, Group as Group15, Space, Stack as Stack24 } from "@mantine/core";
+import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+var HERO_MIN_H = "38svh";
+var HERO_PY = { base: 56, sm: 88 };
+var HERO_MAW = 680;
+function Content({
+  children,
+  navItems,
+  breadcrumb = true,
+  currentHref
+}) {
+  const showBreadcrumb = breadcrumb && !!navItems && navItems.length > 0;
+  return /* @__PURE__ */ jsxs26(SdContainer, { py: "xl", children: [
+    showBreadcrumb && /* @__PURE__ */ jsx39(SdBreadcrumb, { navItems, currentHref, mb: "lg" }),
+    /* @__PURE__ */ jsx39(Stack24, { gap: "xl", children })
+  ] });
 }
 function LayoutGap() {
-  return /* @__PURE__ */ jsx35(Space, { h: 48 });
+  return /* @__PURE__ */ jsx39(Space, {});
 }
-function Minimal({ label, title, description, children }) {
-  return /* @__PURE__ */ jsx35(Fragment6, { children: /* @__PURE__ */ jsxs23(Plain2, { children: [
-    /* @__PURE__ */ jsx35(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
-    /* @__PURE__ */ jsx35(Divider4, {}),
+function Minimal({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsxs26(Plain2, { navItems, breadcrumb, currentHref, children: [
+    /* @__PURE__ */ jsx39(LayoutGap, {}),
+    /* @__PURE__ */ jsx39(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
+    /* @__PURE__ */ jsx39(Divider5, {}),
     children
-  ] }) });
+  ] });
+}
+function Plain2({
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsx39(Fragment7, { children: /* @__PURE__ */ jsx39(Content, { navItems, breadcrumb, currentHref, children }) });
 }
-function Plain2({ children }) {
-  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsx35(LayoutGap, {}),
-    /* @__PURE__ */ jsx35(Content, { children })
+function HeroCopy({ label, title, description }) {
+  return /* @__PURE__ */ jsxs26(Stack24, { gap: "md", maw: HERO_MAW, children: [
+    label && /* @__PURE__ */ jsxs26(Group15, { gap: "sm", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx39(Box18, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
+      /* @__PURE__ */ jsx39(SdText.Eyebrow, { c: "primary.1", children: label })
+    ] }),
+    /* @__PURE__ */ jsx39(
+      SdTextBox.Hero,
+      {
+        title,
+        description,
+        gap: "sm",
+        maxDescWidth: 560,
+        ta: "left",
+        align: "flex-start"
+      }
+    )
   ] });
 }
-function Image2({ image, label, title, description, children }) {
-  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsxs23(
-      Box15,
+function Image2({
+  image,
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsxs26(
+      Box18,
       {
+        pos: "relative",
         style: {
-          position: "relative",
-          minHeight: "30svh",
+          minHeight: HERO_MIN_H,
           display: "flex",
-          alignItems: "center",
+          alignItems: "flex-end",
           backgroundImage: image ? `url(${image})` : void 0,
           backgroundSize: "cover",
           backgroundPosition: "center",
           backgroundColor: "var(--mantine-color-slate-9)"
         },
         children: [
-          /* @__PURE__ */ jsx35(
-            Box15,
+          /* @__PURE__ */ jsx39(
+            Box18,
             {
+              "aria-hidden": true,
+              pos: "absolute",
+              inset: 0,
               style: {
-                position: "absolute",
-                inset: 0,
-                background: "rgba(0, 0, 0, 0.55)"
+                background: "linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.72) 62%, rgba(15,23,42,0.94) 100%)"
               }
             }
           ),
-          /* @__PURE__ */ jsx35(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
-            Box15,
-            {
-              py: 48,
-              px: 40,
-              maw: 420,
-              style: {
-                backdropFilter: "blur(24px)",
-                WebkitBackdropFilter: "blur(24px)",
-                background: "rgba(255,255,255,0.10)",
-                borderRadius: "var(--mantine-radius-md)",
-                border: "1px solid rgba(255,255,255,0.18)"
-              },
-              children: /* @__PURE__ */ jsx35(
-                SdTextBox.Hero,
-                {
-                  label,
-                  title,
-                  description,
-                  ta: "left",
-                  align: "flex-start"
-                }
-              )
-            }
-          ) })
+          /* @__PURE__ */ jsx39(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx39(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(Content, { children })
+    /* @__PURE__ */ jsx39(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
-function Brand({ label, title, description, children }) {
-  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsxs23(
-      Box15,
+function Brand({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsxs26(
+      Box18,
       {
-        style: {
-          position: "relative",
-          minHeight: "40svh",
+        pos: "relative",
+        style: __spreadValues({
+          minHeight: HERO_MIN_H,
           display: "flex",
-          alignItems: "center",
+          alignItems: "flex-end",
           overflow: "hidden",
-          background: "linear-gradient(135deg, var(--mantine-color-primary-8) 0%, var(--mantine-color-primary-6) 50%, var(--mantine-color-primary-4) 100%)"
-        },
+          borderBottom: "1px solid var(--mantine-color-slate-8)"
+        }, brandSurface),
         children: [
-          /* @__PURE__ */ jsx35(
-            Box15,
-            {
-              style: {
-                position: "absolute",
-                top: -80,
-                right: -80,
-                width: 360,
-                height: 360,
-                borderRadius: "50%",
-                background: "rgba(255,255,255,0.06)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx35(
-            Box15,
-            {
-              style: {
-                position: "absolute",
-                bottom: -60,
-                left: -60,
-                width: 240,
-                height: 240,
-                borderRadius: "50%",
-                background: "rgba(255,255,255,0.04)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx35(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
-            SdTextBox.Hero,
-            {
-              label,
-              title,
-              description,
-              ta: "center",
-              align: "center",
-              maw: 640,
-              mx: "auto",
-              pt: 80,
-              pb: 64
-            }
-          ) })
+          /* @__PURE__ */ jsx39(Box18, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ jsx39(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx39(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(Content, { children })
+    /* @__PURE__ */ jsx39(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
 var PageLayout = {
-  /** 이미지 배경 + 대각선 그라디언트 + 좌하단 텍스트 */
+  /** 사진 배경 + 하단 스크림 + 좌측 정렬 텍스트 */
   Image: Image2,
   /** SdTextBox.Section 타이틀 + Plain 컨테이너 */
   Minimal,
-  /** primary 그라디언트 배경 + 중앙 텍스트 */
+  /** slate 바탕 + primary 라이트 + 도트 텍스처 */
   Brand,
   /** 히어로 없이 SdContainer + py="xl" 만 */
   Plain: Plain2
 };
+var PageLayoutImage = PageLayout.Image;
+var PageLayoutMinimal = PageLayout.Minimal;
+var PageLayoutBrand = PageLayout.Brand;
+var PageLayoutPlain = PageLayout.Plain;
 
 // ui/theme.ts
 import { createTheme, rem as rem2 } from "@mantine/core";
@@ -1944,9 +2654,31 @@ var green = [
   "#14532d"
   // 9  green-900
 ];
+var amber = [
+  "#fffbeb",
+  // 0  amber-50
+  "#fef3c7",
+  // 1  amber-100
+  "#fde68a",
+  // 2  amber-200
+  "#fcd34d",
+  // 3  amber-300
+  "#fbbf24",
+  // 4  amber-400
+  "#f59e0b",
+  // 5  amber-500
+  "#d97706",
+  // 6  amber-600
+  "#b45309",
+  // 7  amber-700
+  "#92400e",
+  // 8  amber-800
+  "#78350f"
+  // 9  amber-900
+];
 var theme = createTheme({
   /* ---- Color ---- */
-  colors: { primary, secondary, slate, red, green, dark: slate },
+  colors: { primary, secondary, slate, red, green, amber, dark: slate },
   primaryColor: "primary",
   primaryShade: { light: 6, dark: 5 },
   /* ---- Type ---- */
@@ -2071,7 +2803,6 @@ var theme = createTheme({
     Anchor: {
       defaultProps: { c: "slate.5", fz: "sm", underline: "never" }
     },
-    // SdHeader 모바일 드로어의 2단 아코디언 타이포를 SdLink와 맞춘다.
     NavLink: {
       defaultProps: { c: "slate.7", fz: "sm" }
     },
@@ -2090,11 +2821,16 @@ export {
   Logo,
   MainLayout,
   PageLayout,
+  PageLayoutBrand,
+  PageLayoutImage,
+  PageLayoutMinimal,
+  PageLayoutPlain,
   SdBadge,
   SdBadgeDefault,
   SdBadgePrimary,
   SdBadgeSuccess,
   SdBadgeWarning,
+  SdBreadcrumb,
   SdButton,
   SdButtonCancel,
   SdButtonDelete,
@@ -2125,17 +2861,41 @@ export {
   SdFeatures,
   SdFooter,
   SdHeader,
+  SdHeaderMega,
+  SdHeaderPanel,
+  SdHeaderSimple,
   SdInput,
+  SdInputAutocomplete,
+  SdInputCheckbox,
+  SdInputColor,
+  SdInputDate,
+  SdInputDateRange,
   SdInputEmail,
+  SdInputFile,
+  SdInputJson,
+  SdInputMultiSelect,
+  SdInputNativeSelect,
+  SdInputNumber,
   SdInputPassword,
+  SdInputPinCode,
+  SdInputRadioGroup,
+  SdInputRating,
+  SdInputSegmented,
   SdInputSelect,
+  SdInputSlider,
+  SdInputSwitch,
+  SdInputTags,
   SdInputText,
   SdInputTextarea,
+  SdInputTime,
   SdLink,
   SdLinkBody,
   SdLinkHint,
   SdLinkStrong,
   SdLinkSub,
+  SdLoginView,
+  SdLoginViewCard,
+  SdLoginViewSplit,
   SdMap,
   SdMapSingle,
   SdMapTabs,
@@ -2148,6 +2908,9 @@ export {
   SdQuote,
   SdQuoteCard,
   SdQuotePlain,
+  SdResult,
+  SdResultError,
+  SdResultSuccess,
   SdSkeleton,
   SdSkeletonAvatar,
   SdSkeletonCard,
@@ -2195,5 +2958,15 @@ export {
   SdTitleDisplay,
   SdTitleSection,
   SdTitleSub,
+  SdToast,
+  SdToastClean,
+  SdToastError,
+  SdToastHide,
+  SdToastInfo,
+  SdToastLoading,
+  SdToastProvider,
+  SdToastSuccess,
+  SdToastUpdate,
+  SdToastWarning,
   theme
 };