@yeongseoksong/framework 1.3.1 → 1.5.0

package/dist/ui/index.cjs

@@ -64,11 +64,16 @@ __export(ui_exports, {
   Logo: () => Logo,
   MainLayout: () => MainLayout,
   PageLayout: () => PageLayout,
+  PageLayoutBrand: () => PageLayoutBrand,
+  PageLayoutImage: () => PageLayoutImage,
+  PageLayoutMinimal: () => PageLayoutMinimal,
+  PageLayoutPlain: () => PageLayoutPlain,
   SdBadge: () => SdBadge,
   SdBadgeDefault: () => SdBadgeDefault,
   SdBadgePrimary: () => SdBadgePrimary,
   SdBadgeSuccess: () => SdBadgeSuccess,
   SdBadgeWarning: () => SdBadgeWarning,
+  SdBreadcrumb: () => SdBreadcrumb,
   SdButton: () => SdButton,
   SdButtonCancel: () => SdButtonCancel,
   SdButtonDelete: () => SdButtonDelete,
@@ -99,17 +104,41 @@ __export(ui_exports, {
   SdFeatures: () => SdFeatures,
   SdFooter: () => SdFooter,
   SdHeader: () => SdHeader,
+  SdHeaderMega: () => SdHeaderMega,
+  SdHeaderPanel: () => SdHeaderPanel,
+  SdHeaderSimple: () => SdHeaderSimple,
   SdInput: () => SdInput,
+  SdInputAutocomplete: () => SdInputAutocomplete,
+  SdInputCheckbox: () => SdInputCheckbox,
+  SdInputColor: () => SdInputColor,
+  SdInputDate: () => SdInputDate,
+  SdInputDateRange: () => SdInputDateRange,
   SdInputEmail: () => SdInputEmail,
+  SdInputFile: () => SdInputFile,
+  SdInputJson: () => SdInputJson,
+  SdInputMultiSelect: () => SdInputMultiSelect,
+  SdInputNativeSelect: () => SdInputNativeSelect,
+  SdInputNumber: () => SdInputNumber,
   SdInputPassword: () => SdInputPassword,
+  SdInputPinCode: () => SdInputPinCode,
+  SdInputRadioGroup: () => SdInputRadioGroup,
+  SdInputRating: () => SdInputRating,
+  SdInputSegmented: () => SdInputSegmented,
   SdInputSelect: () => SdInputSelect,
+  SdInputSlider: () => SdInputSlider,
+  SdInputSwitch: () => SdInputSwitch,
+  SdInputTags: () => SdInputTags,
   SdInputText: () => SdInputText,
   SdInputTextarea: () => SdInputTextarea,
+  SdInputTime: () => SdInputTime,
   SdLink: () => SdLink,
   SdLinkBody: () => SdLinkBody,
   SdLinkHint: () => SdLinkHint,
   SdLinkStrong: () => SdLinkStrong,
   SdLinkSub: () => SdLinkSub,
+  SdLoginView: () => SdLoginView,
+  SdLoginViewCard: () => SdLoginViewCard,
+  SdLoginViewSplit: () => SdLoginViewSplit,
   SdMap: () => SdMap,
   SdMapSingle: () => SdMapSingle,
   SdMapTabs: () => SdMapTabs,
@@ -122,6 +151,9 @@ __export(ui_exports, {
   SdQuote: () => SdQuote,
   SdQuoteCard: () => SdQuoteCard,
   SdQuotePlain: () => SdQuotePlain,
+  SdResult: () => SdResult,
+  SdResultError: () => SdResultError,
+  SdResultSuccess: () => SdResultSuccess,
   SdSkeleton: () => SdSkeleton,
   SdSkeletonAvatar: () => SdSkeletonAvatar,
   SdSkeletonCard: () => SdSkeletonCard,
@@ -169,6 +201,16 @@ __export(ui_exports, {
   SdTitleDisplay: () => SdTitleDisplay,
   SdTitleSection: () => SdTitleSection,
   SdTitleSub: () => SdTitleSub,
+  SdToast: () => SdToast,
+  SdToastClean: () => SdToastClean,
+  SdToastError: () => SdToastError,
+  SdToastHide: () => SdToastHide,
+  SdToastInfo: () => SdToastInfo,
+  SdToastLoading: () => SdToastLoading,
+  SdToastProvider: () => SdToastProvider,
+  SdToastSuccess: () => SdToastSuccess,
+  SdToastUpdate: () => SdToastUpdate,
+  SdToastWarning: () => SdToastWarning,
   theme: () => theme
 });
 module.exports = __toCommonJS(ui_exports);
@@ -210,6 +252,7 @@ function Logo(_props) {
 }
 
 // ui/atom/Tabs.tsx
+var import_react = require("react");
 var import_core3 = require("@mantine/core");
 
 // ui/atom/Container.tsx
@@ -231,8 +274,30 @@ function SdScrollableList(_a4) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Box, { style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs.List, __spreadProps(__spreadValues({}, props), { children })) });
 }
 function createTabs(defaults, scrollable = false) {
-  function SdTabsRoot(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs, __spreadValues(__spreadValues({}, defaults), props));
+  function SdTabsRoot(_a4) {
+    var _b = _a4, { syncHash, value, onChange } = _b, props = __objRest(_b, ["syncHash", "value", "onChange"]);
+    const [hashValue, setHashValue] = (0, import_react.useState)(null);
+    (0, import_react.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__ */ (0, import_jsx_runtime3.jsx)(import_core3.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__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value: value != null ? value : hashValue, onChange: handleChange }));
   }
   SdTabsRoot.List = scrollable ? SdScrollableList : import_core3.Tabs.List;
   SdTabsRoot.Tab = import_core3.Tabs.Tab;
@@ -328,6 +393,36 @@ var SdTitleSub = SdTitle.Sub;
 
 // ui/atom/Text.tsx
 var import_core5 = require("@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
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createText(defaults) {
   return function SdText2(_a4) {
@@ -337,23 +432,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;
@@ -547,7 +632,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;
@@ -556,48 +641,127 @@ var SdBadgeWarning = SdBadge.Warning;
 
 // ui/atom/Input.tsx
 var import_core12 = require("@mantine/core");
+var import_dates = require("@mantine/dates");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-function createTextInput(defaults) {
-  return function SdInput2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.TextInput, __spreadValues(__spreadValues({}, defaults), props));
-  };
-}
-function createTextarea(defaults) {
-  return function SdInputTextarea2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.Textarea, __spreadValues(__spreadValues({}, defaults), props));
+function createInput(Component, defaults) {
+  return function SdInput2(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadValues(__spreadValues({}, defaults), props));
   };
 }
-function createPasswordInput(defaults) {
-  return function SdInputPassword2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.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__ */ (0, import_jsx_runtime12.jsx)(
+      import_core12.Input.Wrapper,
+      {
+        label,
+        description,
+        error,
+        required,
+        withAsterisk,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Component, __spreadValues(__spreadValues({}, defaults), rest))
+      }
+    );
   };
 }
-function createSelect(defaults) {
-  return function SdInputSelect2(_a4) {
-    var props = __objRest(_a4, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.Select, __spreadValues(__spreadValues({}, defaults), props));
-  };
+function SdInputRadio(_a4) {
+  var _b = _a4, { data, orientation = "horizontal" } = _b, props = __objRest(_b, ["data", "orientation"]);
+  const Layout = orientation === "vertical" ? import_core12.Stack : import_core12.Group;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.Radio.Group, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Layout, { gap: "sm", mt: "xs", children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core12.Radio, { value: item.value, label: item.label, disabled: item.disabled }, item.value)) }) }));
 }
 var SdInput = {
+  // ── 텍스트 ──
   /** 일반 텍스트 — 이름, 회사명 등 */
-  Text: createTextInput({}),
+  Text: createInput(import_core12.TextInput),
   /** 이메일 입력 */
-  Email: createTextInput({ type: "email" }),
+  Email: createInput(import_core12.TextInput, { type: "email" }),
   /** 비밀번호 입력 — 마스킹 토글 포함 */
-  Password: createPasswordInput({}),
+  Password: createInput(import_core12.PasswordInput),
   /** 멀티라인 텍스트 — 문의 메시지 등 */
-  Textarea: createTextarea({ autosize: true, minRows: 3 }),
+  Textarea: createInput(import_core12.Textarea, { autosize: true, minRows: 3 }),
+  /** JSON 입력 — 포맷·검증 버튼 포함 */
+  Json: createInput(import_core12.JsonInput, { autosize: true, minRows: 4, formatOnBlur: true }),
+  // ── 숫자 ──
+  /** 숫자 입력 — 증감 컨트롤 포함 */
+  Number: createInput(import_core12.NumberInput),
+  /** 범위 선택 슬라이더 */
+  Slider: createWrappedInput(import_core12.Slider),
+  /** 별점 */
+  Rating: createWrappedInput(import_core12.Rating),
+  /** 인증번호 등 자리수가 고정된 코드 */
+  PinCode: createWrappedInput(import_core12.PinInput),
+  // ── 선택 ──
   /** 드롭다운 선택 */
-  Select: createSelect({})
+  Select: createInput(import_core12.Select),
+  /** 브라우저 기본 select — 모바일·간단한 목록 */
+  NativeSelect: createInput(import_core12.NativeSelect),
+  /** 다중 선택 */
+  MultiSelect: createInput(import_core12.MultiSelect),
+  /** 입력하며 후보를 좁히는 자동완성(자유 입력 허용) */
+  Autocomplete: createInput(import_core12.Autocomplete),
+  /** 자유롭게 추가하는 태그 목록 */
+  Tags: createInput(import_core12.TagsInput),
+  /** 라디오 그룹 — data로 항목을 넘긴다 */
+  Radio: SdInputRadio,
+  /** 두세 개 중 하나 — 탭처럼 보이는 선택 */
+  Segmented: createWrappedInput(import_core12.SegmentedControl),
+  // ── 불리언 ──
+  /** 체크박스 — getInputProps(name, { type: 'checkbox' }) */
+  Checkbox: createInput(import_core12.Checkbox),
+  /** 스위치 — 즉시 반영되는 on/off */
+  Switch: createInput(import_core12.Switch),
+  // ── 기타 ──
+  /** 파일 선택 */
+  File: createInput(import_core12.FileInput, { clearable: true }),
+  /** 색상 선택 */
+  Color: createInput(import_core12.ColorInput),
+  // ── 날짜·시간 (@mantine/dates) ──
+  /** 날짜 — 직접 입력 + 달력 팝오버. 값은 'YYYY-MM-DD' 문자열 */
+  Date: createInput(import_dates.DateInput, { valueFormat: "YYYY-MM-DD", clearable: true }),
+  /** 기간 — 시작·종료 두 날짜 */
+  DateRange: createInput(import_dates.DatePickerInput, {
+    type: "range",
+    valueFormat: "YYYY-MM-DD",
+    clearable: true
+  }),
+  /** 시각 */
+  Time: createInput(import_dates.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
 var import_core13 = require("@mantine/core");
@@ -659,7 +823,7 @@ var SdSkeletonAvatar = SkeletonAvatar;
 // ui/atom/Link.tsx
 var import_core14 = require("@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;
@@ -668,11 +832,16 @@ function toCssColor(value) {
 // ui/atom/Link.tsx
 var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsx)(Fallback, __spreadProps(__spreadValues({}, textProps), { children }));
+    }
     const handleEnter = (e) => {
       e.currentTarget.style.color = HOVER_COLOR;
       onMouseEnter == null ? void 0 : onMouseEnter(e);
@@ -687,29 +856,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
+var import_notifications = require("@mantine/notifications");
+var import_icons_react2 = require("@tabler/icons-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var toastStyles = {
+  /** 성공 — 저장·전송 완료 */
+  Success: { color: "green", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_react2.IconCheck, { size: 18 }), title: "\uC644\uB8CC" },
+  /** 실패 — 요청 오류·검증 실패 */
+  Error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_react2.IconX, { size: 18 }), title: "\uC624\uB958" },
+  /** 주의 — 되돌릴 수 없는 동작 안내 등 */
+  Warning: { color: "amber", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_react2.IconAlertTriangle, { size: 18 }), title: "\uC8FC\uC758" },
+  /** 안내 — 중립 정보 */
+  Info: { color: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_react2.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 import_notifications.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) => import_notifications.notifications.update(__spreadValues(__spreadProps(__spreadValues({
+    id,
+    loading: false,
+    autoClose: 4e3,
+    withCloseButton: true
+  }, toastStyles[variant]), {
+    message
+  }), options)),
+  /** 특정 알림 닫기 */
+  Hide: (id) => import_notifications.notifications.hide(id),
+  /** 떠 있는 알림 전부 닫기 */
+  Clean: () => import_notifications.notifications.clean()
+};
+function SdToastProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_notifications.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
 var import_core15 = require("@mantine/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", color_ = void 0) {
   return function SdTextBox2(_a4) {
     var _b = _a4, {
@@ -733,10 +961,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__ */ (0, import_jsx_runtime15.jsxs)(import_core15.Stack, __spreadProps(__spreadValues({ gap: defaultGap }, stackProps), { children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SdText.Eyebrow, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TitleComponent, { c: colorRes, children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core15.Stack, __spreadProps(__spreadValues({ gap: defaultGap }, stackProps), { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SdText.Eyebrow, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TitleComponent, { c: colorRes, children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
       children
     ] }));
   };
@@ -756,23 +984,24 @@ var SdTextBoxSub = SdTextBox.Sub;
 var import_core16 = require("@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
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function SdFeatures({ items, cols = { base: 1, sm: 2, md: 3 } }) {
   const visible = filterAndSort(items);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core16.SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core16.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core16.Stack, { gap: "sm", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "sm", children: [
     item.icon,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SdTextBox.Card, { label: item.label, title: item.title, description: item.description })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SdTextBox.Card, { label: item.label, title: item.title, description: item.description })
   ] }, item.id) }, item.id)) });
 }
 
 // ui/molecule/Timeline.tsx
 var import_core17 = require("@mantine/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("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;
@@ -781,32 +1010,32 @@ function SdTimeline({ items }) {
     return acc;
   }, {});
   const years = Object.keys(grouped).map(Number).sort((a, b) => b - a);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core17.Timeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core17.Timeline.Item, { title: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SdTitle.Sub, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Timeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Timeline.Item, { title: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SdTitle.Sub, { children: [
     year,
     "\uB144"
-  ] }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core17.Stack, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core17.Group, { gap: "md", align: "center", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SdText.Eyebrow, { miw: 28, children: [
+  ] }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Stack, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { gap: "md", align: "center", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SdText.Eyebrow, { miw: 28, children: [
       event.month,
       "\uC6D4"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SdText.Sub, { style: { flex: 1 }, children: event.description })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SdText.Sub, { style: { flex: 1 }, children: event.description })
   ] }, event.id)) }) }, year)) });
 }
 
 // ui/molecule/Steps.tsx
 var import_core18 = require("@mantine/core");
-var import_icons_react2 = require("@tabler/icons-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_icons_react3 = require("@tabler/icons-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function BubbleStep({ item, index, isLast }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { align: "flex-start", gap: "lg", wrap: "nowrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Group, { align: "flex-start", gap: "lg", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       import_core18.Box,
       {
         style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdNumberIcon, { value: String(index + 1).padStart(2, "0"), color: "primary" }),
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_core18.Box,
             {
               style: {
@@ -821,7 +1050,7 @@ function BubbleStep({ item, index, isLast }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       SdTextBox.Card,
       {
         title: item.title,
@@ -833,11 +1062,11 @@ function BubbleStep({ item, index, isLast }) {
   ] });
 }
 function Bubble({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
 }
 function CardStep({ item, index }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Card, { withBorder: true, radius: "md", p: 0, style: { height: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Card, { withBorder: true, radius: "md", p: 0, style: { height: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_core18.Box,
       {
         py: "lg",
@@ -846,41 +1075,41 @@ function CardStep({ item, index }) {
           justifyContent: "center",
           background: "var(--mantine-color-primary-0)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(SdText.Eyebrow, { children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SdText.Eyebrow, { children: [
           "STEP ",
           String(index + 1).padStart(2, "0")
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SdTextBox.Card, { title: item.title, description: item.description }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdTextBox.Card, { title: item.title, description: item.description }) })
   ] });
 }
 function CardArrow({ direction }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.ThemeIcon, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react2.IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react2.IconArrowDown, { size: 20, stroke: 2.5 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.ThemeIcon, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react3.IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons_react3.IconArrowDown, { size: 20, stroke: 2.5 }) });
 }
 function CardVariant({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Stack, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime18.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardStep, { item, index: i }),
-      i < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardArrow, { direction: "down" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Stack, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardStep, { item, index: i }),
+      i < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardArrow, { direction: "down" }) })
     ] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Group, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime18.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardStep, { item, index: i }) }),
-      i < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardArrow, { direction: "right" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Group, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardStep, { item, index: i }) }),
+      i < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardArrow, { direction: "right" }) })
     ] }, i)) })
   ] });
 }
 function StripStep({ item, index }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Box, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: 4, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(SdText.Eyebrow, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Stack, { gap: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SdText.Eyebrow, { children: [
       "STEP ",
       String(index + 1).padStart(2, "0")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SdTextBox.Card, { title: item.title, description: item.description })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdTextBox.Card, { title: item.title, description: item.description })
   ] }) });
 }
 function Strip({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Stack, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StripStep, { item, index: i }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Stack, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StripStep, { item, index: i }, i)) });
 }
 var SdSteps = { Bubble, Card: CardVariant, Strip };
 var SdStepsBubble = SdSteps.Bubble;
@@ -889,14 +1118,14 @@ var SdStepsStrip = SdSteps.Strip;
 
 // ui/molecule/Testimonial.tsx
 var import_core19 = require("@mantine/core");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function AuthorRow({ item }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { gap: "sm", wrap: "nowrap", children: [
-    item.avatar && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Avatar, { src: item.avatar, size: "md", radius: "xl" }),
-    !item.avatar && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdText.Strong, { fz: "sm", children: item.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SdText.Sub, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Group, { gap: "sm", wrap: "nowrap", children: [
+    item.avatar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Avatar, { src: item.avatar, size: "md", radius: "xl" }),
+    !item.avatar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Stack, { gap: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Strong, { fz: "sm", children: item.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SdText.Sub, { children: [
         item.role,
         item.company ? ` \xB7 ${item.company}` : ""
       ] })
@@ -905,28 +1134,28 @@ function AuthorRow({ item }) {
 }
 function CardTestimonial(_a4) {
   var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Card, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "md", h: "100%", children: [
-    item.rating && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "xs", style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
-      item.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdText.Body, { children: line }, i))
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Card, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Stack, { gap: "md", h: "100%", children: [
+    item.rating && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Stack, { gap: "xs", style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
+      item.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Body, { children: line }, i))
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AuthorRow, { item })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AuthorRow, { item })
   ] }) }));
 }
 function Strip2(_a4) {
   var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Stack, { gap: "md", children: [
-    item.rating && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core19.Group, { gap: 4, align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.Stack, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdText.Body, { children: line }, i)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Stack, { gap: "md", children: [
+    item.rating && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core19.Group, { gap: 4, align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Stack, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Body, { children: line }, i)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AuthorRow, { item })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AuthorRow, { item })
   ] }) }));
 }
 function Grid({ items, cols = { base: 1, sm: 2, md: 3 } }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core19.SimpleGrid, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTestimonial, { item }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.SimpleGrid, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardTestimonial, { item }, i)) });
 }
 var SdTestimonial = {
   /** 카드형 — 그리드 배치용 */
@@ -942,81 +1171,81 @@ var SdTestimonialGrid = SdTestimonial.Grid;
 
 // ui/molecule/PricingCard.tsx
 var import_core20 = require("@mantine/core");
-var import_icons_react3 = require("@tabler/icons-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_icons_react4 = require("@tabler/icons-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Default(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Card, __spreadProps(__spreadValues({ withBorder: true, style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdTitle.Card, { children: item.name }),
-        item.isPopular && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdBadge.Primary, { children: "\uCD94\uCC9C" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Card, __spreadProps(__spreadValues({ withBorder: true, style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdTitle.Card, { children: item.name }),
+        item.isPopular && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdBadge.Primary, { children: "\uCD94\uCC9C" })
       ] }),
-      item.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Sub, { children: item.description })
+      item.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Sub, { children: item.description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { gap: 4, align: "baseline", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdTitle.Display, { children: item.price }),
-      item.period && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SdText.Sub, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { gap: 4, align: "baseline", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdTitle.Display, { children: item.price }),
+      item.period && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SdText.Sub, { children: [
         "/ ",
         item.period
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Stack, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_core20.ThemeIcon,
         {
           size: "xs",
           radius: "xl",
           color: f.included ? "primary" : "slate",
           variant: f.included ? "filled" : "subtle",
-          children: f.included ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons_react3.IconCheck, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons_react3.IconX, { size: 12 })
+          children: f.included ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_react4.IconCheck, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_react4.IconX, { size: 12 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Body, { fz: "sm", c: f.included ? "slate.7" : "slate.4", children: f.text })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Body, { fz: "sm", c: f.included ? "slate.7" : "slate.4", children: f.text })
     ] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdButton.Outline, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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__ */ (0, import_jsx_runtime21.jsx)(import_core20.Card, __spreadProps(__spreadValues({ bg: "primary.6", style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { justify: "space-between", align: "flex-start", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdTitle.Card, { c: "white", children: item.name }),
-        item.isPopular && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Card, __spreadProps(__spreadValues({ bg: "primary.6", style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdTitle.Card, { c: "white", children: item.name }),
+        item.isPopular && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
       ] }),
-      item.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Body, { c: "primary.1", children: item.description })
+      item.description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Body, { c: "primary.1", children: item.description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { gap: 4, align: "baseline", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdTitle.Display, { c: "white", children: item.price }),
-      item.period && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SdText.Body, { c: "primary.2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { gap: 4, align: "baseline", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdTitle.Display, { c: "white", children: item.price }),
+      item.period && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SdText.Body, { c: "primary.2", children: [
         "/ ",
         item.period
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Divider, { color: "primary.4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Stack, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Group, { gap: "sm", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Divider, { color: "primary.4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Stack, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_core20.ThemeIcon,
         {
           size: "xs",
           radius: "xl",
           color: "white",
           variant: f.included ? "filled" : "subtle",
-          children: f.included ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons_react3.IconCheck, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons_react3.IconX, { size: 12, color: "rgba(255,255,255,0.4)" })
+          children: f.included ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_react4.IconCheck, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons_react4.IconX, { size: 12, color: "rgba(255,255,255,0.4)" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdText.Body, { fz: "sm", c: f.included ? "white" : "primary.3", children: f.text })
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Body, { fz: "sm", c: f.included ? "white" : "primary.3", children: f.text })
     ] }, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SdButton.White, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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__ */ (0, import_jsx_runtime21.jsx)(import_core20.SimpleGrid, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
-    (item, i) => item.isPopular ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Featured, { item, onSelect }, i) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Default, { item, onSelect }, i)
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.SimpleGrid, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
+    (item, i) => item.isPopular ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Featured, { item, onSelect }, i) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Default, { item, onSelect }, i)
   ) });
 }
 var SdPricingCard = {
@@ -1033,30 +1262,30 @@ var SdPricingCardGrid = SdPricingCard.Grid;
 
 // ui/molecule/Faq.tsx
 var import_core21 = require("@mantine/core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Default2(_a4) {
   var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Accordion.Item, { value: String(i), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Strong, { fz: "sm", children: item.question }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Body, { fz: "sm", children: item.answer }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Accordion.Item, { value: String(i), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Strong, { fz: "sm", children: item.question }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Body, { fz: "sm", children: item.answer }) })
   ] }, i)) }) }));
 }
 function Filled(_a4) {
   var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Accordion.Item, { value: String(i), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Strong, { fz: "sm", children: item.question }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core21.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Body, { fz: "sm", children: item.answer }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Accordion.Item, { value: String(i), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Accordion.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Strong, { fz: "sm", children: item.question }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Accordion.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(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__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, __spreadProps(__spreadValues({ gap: "xl" }, boxProps), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core21.Stack, { gap: "xs", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Eyebrow, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdTitle.Section, { children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SdText.Body, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, __spreadProps(__spreadValues({ gap: "xl" }, boxProps), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: "xs", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Eyebrow, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdTitle.Section, { children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Body, { children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Default2, { items })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Default2, { items })
   ] }));
 }
 var SdFaq = {
@@ -1073,7 +1302,7 @@ var SdFaqWithHeader = SdFaq.WithHeader;
 
 // ui/molecule/Cta.tsx
 var import_core22 = require("@mantine/core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Banner(_a4) {
   var _b = _a4, {
     label,
@@ -1092,15 +1321,15 @@ function Banner(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, __spreadProps(__spreadValues({ bg: "primary.7", py: { base: "xl", md: 80 }, px: { base: "md", md: "xl" } }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "xl", align: "center", maw: 600, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "sm", align: "center", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Eyebrow, { c: "primary.3", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdTitle.Section, { c: "white", ta: "center", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Body, { c: "primary.2", ta: "center", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Box, __spreadProps(__spreadValues({ bg: "primary.7", py: { base: "xl", md: 80 }, px: { base: "md", md: "xl" } }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "xl", align: "center", maw: 600, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "sm", align: "center", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Eyebrow, { c: "primary.3", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdTitle.Section, { c: "white", ta: "center", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Body, { c: "primary.2", ta: "center", children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
-      secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdButton.Ghost, { size: "md", c: "primary.2", onClick: onSecondary, children: secondaryLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { gap: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
+      secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdButton.Ghost, { size: "md", c: "primary.2", onClick: onSecondary, children: secondaryLabel })
     ] })
   ] }) }) }));
 }
@@ -1122,7 +1351,7 @@ function Subtle(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_core22.Box,
     __spreadProps(__spreadValues({
       bg: "primary.0",
@@ -1130,15 +1359,15 @@ function Subtle(_a4) {
       px: { base: "md", md: "xl" },
       style: { borderRadius: "var(--mantine-radius-lg)" }
     }, boxProps), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "lg", align: "center", maw: 560, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "sm", align: "center", children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Eyebrow, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdTitle.Section, { ta: "center", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Body, { ta: "center", children: description })
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "lg", align: "center", maw: 560, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "sm", align: "center", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Eyebrow, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdTitle.Section, { ta: "center", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Body, { ta: "center", children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
+          secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
         ] })
       ] }) })
     })
@@ -1162,7 +1391,7 @@ function Inline(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_core22.Box,
     __spreadProps(__spreadValues({
       py: { base: "xl", md: 48 },
@@ -1172,15 +1401,15 @@ function Inline(_a4) {
         borderBottom: "1px solid var(--mantine-color-slate-2)"
       }
     }, boxProps), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { justify: "space-between", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "xs", style: { flex: 1 }, children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Eyebrow, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdTitle.Card, { children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdText.Sub, { children: description })
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "center", gap: "xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "xs", style: { flex: 1 }, children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Eyebrow, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdTitle.Card, { children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Sub, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
+          secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
         ] })
       ] })
     })
@@ -1199,33 +1428,33 @@ var SdCtaSubtle = SdCta.Subtle;
 var SdCtaInline = SdCta.Inline;
 
 // ui/molecule/Solution.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_core24 = require("@mantine/core");
 var import_link3 = __toESM(require("next/link"));
 
 // ui/molecule/SolutionCard.tsx
 var import_core23 = require("@mantine/core");
 var import_link2 = __toESM(require("next/link"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function SolutionCardItem(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5, _b2;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core23.Card, __spreadProps(__spreadValues({ withBorder: true }, cardProps), { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Stack, { gap: "md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Card, __spreadProps(__spreadValues({ withBorder: true, h: "100%", style: { display: "flex", flexDirection: "column" } }, cardProps), { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "md", style: { flex: 1 }, children: [
     item.icon,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdBadge.Primary, { children: item.category }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdTitle.Card, { children: item.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SdText.Body, { children: item.description }),
-    item.href ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core23.Button, { variant: "subtle", color: "slate", component: import_link2.default, href: item.href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdBadge.Primary, { children: item.category }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdTitle.Card, { children: item.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdText.Body, { children: item.description }),
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Button, { variant: "subtle", color: "slate", component: import_link2.default, href: item.href, mt: "auto", children: [
       (_a5 = item.ctaLabel) != null ? _a5 : "\uC790\uC138\uD788 \uBCF4\uAE30",
       " \u2192"
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(SdButton.Ghost, { onClick: () => onSelect == null ? void 0 : onSelect(item), children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(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__ */ (0, import_jsx_runtime24.jsx)(import_core23.SimpleGrid, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SolutionCardItem, { item, onSelect }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.SimpleGrid, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SolutionCardItem, { item, onSelect }, i)) });
 }
 var SdSolutionCard = {
   /** 단일 compact 카드 */
@@ -1237,28 +1466,28 @@ var SdSolutionCardItem = SdSolutionCard.Item;
 var SdSolutionCardGrid = SdSolutionCard.Grid;
 
 // ui/molecule/Solution.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("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] = (0, import_react.useState)("all");
+  const [active, setActive] = (0, import_react2.useState)("all");
   const filtered = active === "all" ? items : items.filter((i) => i.category === active);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
   ] });
 }
 function List({ items, onSelect }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Stack, { gap: 0, children: items.map((item, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Stack, { gap: 0, children: items.map((item, i) => {
     var _a4, _b;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.Divider, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Group, { align: "flex-start", py: "lg", gap: "lg", children: [
-        item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core24.ThemeIcon, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core24.Stack, { gap: "xs", style: { flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdBadge.Primary, { children: item.category }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdTitle.Card, { children: item.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SdText.Body, { children: item.description }),
-          item.href ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+      i > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Divider, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Group, { align: "flex-start", py: "lg", gap: "lg", children: [
+        item.icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.ThemeIcon, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "xs", style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdBadge.Primary, { children: item.category }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTitle.Card, { children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdText.Body, { children: item.description }),
+          item.href ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             import_core24.Button,
             {
               variant: "subtle",
@@ -1271,7 +1500,7 @@ function List({ items, onSelect }) {
                 " \u2192"
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             SdButton.Ghost,
             {
               onClick: () => onSelect == null ? void 0 : onSelect(item),
@@ -1298,7 +1527,7 @@ var SdSolutionList = SdSolution.List;
 
 // ui/molecule/Clients.tsx
 var import_core25 = require("@mantine/core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var grayStyle = {
   filter: "grayscale(1) opacity(0.5)",
   transition: "filter 0.25s"
@@ -1307,12 +1536,18 @@ var colorStyle = {
   filter: "grayscale(0) opacity(1)"
 };
 function LogoImage({ client, height }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "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)
     }
@@ -1323,16 +1558,19 @@ function Grid4({
   cols = { base: 2, sm: 3, md: 4, lg: 6 },
   logoHeight = 40
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core25.SimpleGrid, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.SimpleGrid, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_core25.Box,
     {
       style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "12px 8px"
+        padding: "12px 8px",
+        minWidth: 0,
+        // 그리드 트랙이 이미지 intrinsic width로 밀려 깨지는 것 방지
+        overflow: "hidden"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LogoImage, { client, height: logoHeight })
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LogoImage, { client, height: logoHeight })
     },
     i
   )) });
@@ -1340,9 +1578,9 @@ function Grid4({
 var KEYFRAME = `@keyframes sd-clients-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }`;
 function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
   const doubled = [...items, ...items];
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core25.Box, { style: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: KEYFRAME }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Box, { style: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("style", { children: KEYFRAME }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_core25.Box,
       {
         style: {
@@ -1360,7 +1598,7 @@ function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
           ;
           e.currentTarget.style.animationPlayState = "running";
         },
-        children: doubled.map((client, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LogoImage, { client, height: logoHeight }, i))
+        children: doubled.map((client, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LogoImage, { client, height: logoHeight }, i))
       }
     )
   ] });
@@ -1375,12 +1613,12 @@ var SdClientsGrid = Grid4;
 var SdClientsMarquee = Marquee;
 
 // ui/molecule/Map.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_core26 = require("@mantine/core");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function MapFrame({ address, height }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core26.Box, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Box, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "iframe",
       {
         src: address.embbedUrl,
@@ -1393,7 +1631,7 @@ function MapFrame({ address, height }) {
         title: address.label
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(SdText.Sub, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(SdText.Sub, { children: [
       "[",
       address.label,
       "] ",
@@ -1404,18 +1642,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__ */ (0, import_jsx_runtime27.jsx)(import_core26.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MapFrame, { address, height }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MapFrame, { address, height }) }));
 }
 function Tabs2({ addresses, height = 400 }) {
   var _a4, _b, _c;
   const mapped = addresses.filter((a) => a.embbedUrl);
-  const [active, setActive] = (0, import_react2.useState)((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
+  const [active, setActive] = (0, import_react3.useState)((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
   if (mapped.length === 0) return null;
-  if (mapped.length === 1) return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MapFrame, { address: mapped[0], height });
+  if (mapped.length === 1) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MapFrame, { address: mapped[0], height });
   const current = (_c = mapped.find((a) => a.label === active)) != null ? _c : mapped[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core26.Stack, { gap: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MapFrame, { address: current, height })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MapFrame, { address: current, height })
   ] });
 }
 var SdMap = {
@@ -1427,11 +1665,78 @@ var SdMap = {
 var SdMapSingle = Single;
 var SdMapTabs = Tabs2;
 
+// ui/molecule/Breadcrumb.tsx
+var import_core27 = require("@mantine/core");
+var import_navigation = require("next/navigation");
+var import_icons_react5 = require("@tabler/icons-react");
+var import_jsx_runtime29 = require("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 = (0, import_navigation.usePathname)();
+  const trail = buildTrail(navItems, (_a5 = currentHref != null ? currentHref : pathname) != null ? _a5 : "");
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_core27.Breadcrumbs,
+    {
+      separator: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons_react5.IconChevronRight, { size: 14, stroke: 2, color: "var(--mantine-color-slate-4)" }),
+      separatorMargin: "xs",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          SdLink.Sub,
+          {
+            href: homeHref,
+            "aria-label": homeLabel,
+            style: { display: "inline-flex", alignItems: "center" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons_react5.IconHome, { size: 16, stroke: 2 })
+          }
+        ),
+        trail.map((item, i) => {
+          const isLast = i === trail.length - 1;
+          return isLast ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdLink.Body, { children: item.label }, item.id) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdLink.Sub, { href: item.href, children: item.label }, item.id);
+        })
+      ]
+    }
+  ) }));
+}
+
 // ui/organism/HeroCarousel.tsx
 var import_carousel = require("@mantine/carousel");
-var import_core27 = require("@mantine/core");
-var import_icons_react4 = require("@tabler/icons-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_core28 = require("@mantine/core");
+var import_icons_react6 = require("@tabler/icons-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var variantMap = {
   primary: SdButton.Primary,
   secondary: SdButton.Secondary,
@@ -1441,25 +1746,25 @@ var variantMap = {
 function CtaButton({ cta }) {
   var _a4;
   const Button3 = variantMap[(_a4 = cta.variant) != null ? _a4 : "primary"];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Anchor, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button3, { size: "md", rightSection: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons_react4.IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button3, { size: "md", children: cta.label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Anchor, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button3, { size: "md", rightSection: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_react6.IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button3, { size: "md", children: cta.label }) });
 }
 function HeroCarousel({ slides, children }) {
-  if (children) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+  if (children) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
   const filterdSlides = filterAndSort(slides);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_carousel.Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_carousel.Carousel.Slide, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_core27.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_carousel.Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_carousel.Carousel.Slide, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_core28.Box,
     {
       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__ */ (0, import_jsx_runtime28.jsxs)(import_core27.Stack, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Stack, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           SdTextBox.Hero,
           {
             title: slide.title,
@@ -1468,30 +1773,77 @@ function HeroCarousel({ slides, children }) {
             align: "center"
           }
         ),
-        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core27.Group, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CtaButton, { cta }, cta.href)) })
+        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CtaButton, { cta }, cta.href)) })
       ] })
     }
   ) }, i)) });
 }
 
 // ui/organism/Header.tsx
-var import_core28 = require("@mantine/core");
+var import_core29 = require("@mantine/core");
+var import_icons_react7 = require("@tabler/icons-react");
 var import_hooks = require("@mantine/hooks");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var BAR_HEIGHT = 60;
-function SdHeader({ navItems, loginFlag }) {
-  const [opened, { toggle, close }] = (0, import_hooks.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__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { px: "sm", py: 8, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: item.href, onClick: close, children: item.label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_core29.NavLink,
+    {
+      label: item.label,
+      styles: NAV_LINK_STYLES,
+      component: item.href ? "a" : "button",
+      href: item.href,
+      childrenOffset: 28,
+      children: kids.map((kid) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        MobileNavNode,
+        {
+          item: kid,
+          depth: depth + 1,
+          childrenOf,
+          close
+        },
+        kid.id
+      ))
+    }
+  );
+}
+function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: 0, children: [
+    topItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MobileNavNode, { item, depth: 1, childrenOf, close }, item.id)),
+    loginFlag && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "xs", mt: "md", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+  ] }) });
+}
+function MegaHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = (0, import_hooks.useDisclosure)();
+  const { topItems, childrenOf, hasAnyChildren } = useNavTree(navItems);
   const { hovered, ref: hoverRef } = (0, import_hooks.useHover)();
   const { focused, ref: focusRef } = (0, import_hooks.useFocusWithin)();
   const rootRef = (0, import_hooks.useMergedRef)(hoverRef, focusRef);
   const expanded = hasAnyChildren && (hovered || focused);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_core28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_core29.Box,
       {
         ref: rootRef,
         pos: "relative",
@@ -1501,12 +1853,12 @@ function SdHeader({ navItems, loginFlag }) {
           borderBottom: expanded ? "1px solid var(--mantine-color-slate-2)" : void 0,
           transition: "box-shadow 0.15s"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Logo, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Logo, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
             const kids = childrenOf(item.id);
-            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: 0, align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { h: BAR_HEIGHT, align: "center", children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdLink.Body, { href: item.href, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdText.Strong, { children: item.label }) }),
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: 0, align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: item.href, children: item.label }) }),
               kids.length > 0 && /*
                 Mantine Collapse를 쓰지 않는다 — 접힐 때 display:none이 되어
                 하위 링크가 폭 계산에서 빠졌다가 펼칠 때 다시 들어오면서
@@ -1514,8 +1866,8 @@ function SdHeader({ navItems, loginFlag }) {
                 height 0 + overflow hidden은 폭 기여를 유지하므로 간격이 고정된다.
                 visibility:hidden이 접힌 상태의 링크를 탭 순서에서도 빼준다.
               */
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                import_core28.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                import_core29.Box,
                 {
                   "aria-hidden": !expanded,
                   style: {
@@ -1525,72 +1877,207 @@ function SdHeader({ navItems, loginFlag }) {
                     visibility: expanded ? "visible" : "hidden",
                     transition: "opacity 0.15s ease"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Stack, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdLink.Sub, { href: kid.href, children: kid.label }, kid.id)) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => {
+                    const grandkids = childrenOf(kid.id);
+                    if (grandkids.length === 0) {
+                      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: 2, align: "center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: kid.href, children: kid.label }),
+                      grandkids.map((gk) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Sub, { href: gk.href, children: gk.label }, gk.id))
+                    ] }, kid.id);
+                  }) })
                 }
               )
             ] }, item.id);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Group, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-            loginFlag && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+            loginFlag && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
           ] })
         ] }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core28.Stack, { gap: 0, children: [
-      topItems.map((item) => {
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
+  ] });
+}
+function renderMenuLeaf(item) {
+  return item.href ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Item, { component: "a", href: item.href, children: item.label }, item.id) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Label, { children: item.label }, item.id);
+}
+function SimpleHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = (0, import_hooks.useDisclosure)();
+  const { topItems, childrenOf } = useNavTree(navItems);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Logo, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
         const kids = childrenOf(item.id);
         if (kids.length === 0) {
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Box, { px: "sm", py: 8, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdLink.Body, { href: item.href, onClick: close, children: item.label }) }, item.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: item.href, children: item.label }, item.id);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_core28.NavLink,
+        return (
+          /*
+            trigger="click-hover" — 마우스는 hover로, 키보드/터치는 click으로 연다.
+            Menu.Target은 ref를 받을 수 있는 단일 엘리먼트여야 하므로
+            SdLink/SdText가 아니라 Box를 타깃으로 두고 라벨을 그 안에 넣는다.
+          */
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+            import_core29.Menu,
+            {
+              trigger: "click-hover",
+              openDelay: 50,
+              closeDelay: 120,
+              position: "bottom",
+              offset: 12,
+              shadow: "md",
+              radius: "md",
+              withinPortal: true,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: item.href, children: item.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react7.IconChevronDown, { size: 14, stroke: 2 })
+                ] }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Dropdown, { children: kids.map((kid) => {
+                  const grandkids = childrenOf(kid.id);
+                  if (grandkids.length > 0) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Menu.Sub, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Sub.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Sub.Item, { children: kid.label }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Sub.Dropdown, { children: grandkids.map(renderMenuLeaf) })
+                    ] }, kid.id);
+                  }
+                  return renderMenuLeaf(kid);
+                }) })
+              ]
+            },
+            item.id
+          )
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
+  ] });
+}
+function PanelHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = (0, import_hooks.useDisclosure)();
+  const { topItems, childrenOf } = useNavTree(navItems);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Logo, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        const kids = childrenOf(item.id);
+        if (kids.length === 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: item.href, children: item.label }, item.id);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          import_core29.Menu,
           {
-            label: item.label,
-            href: item.href,
-            childrenOffset: 28,
-            onClick: kids.length > 0 ? void 0 : close,
-            children: kids.map((kid) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.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__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: item.href, children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react7.IconChevronDown, { size: 14, stroke: 2 })
+              ] }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Menu.Dropdown, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "xs", p: "xs", children: kids.map((kid) => {
+                const grandkids = childrenOf(kid.id);
+                if (grandkids.length === 0) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: 2, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Body, { href: kid.href, children: kid.label }),
+                  grandkids.map((gk) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Sub, { href: gk.href, pl: "sm", children: gk.label }, gk.id))
+                ] }, kid.id);
+              }) }) })
+            ]
           },
           item.id
         );
-      }),
-      loginFlag && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core28.Stack, { gap: "xs", mt: "md", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
-    ] }) })
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      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
-var import_core29 = require("@mantine/core");
-var import_icons_react5 = require("@tabler/icons-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_core30 = require("@mantine/core");
+var import_icons_react8 = require("@tabler/icons-react");
+var import_jsx_runtime32 = require("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__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: topLevel.map((group) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { gap: "xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdText.Sub, { children: group.label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: topLevel.map((group) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Grid.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { gap: "xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Sub, { href: group.href, children: group.label }, group.id),
     getChildren(group.id).map((link, id) => {
       if (id >= CHILD_THRESH) return;
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Hint, { href: link.href, children: link.label }, link.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Hint, { href: link.href, children: link.label }, link.id);
     })
   ] }) }, group.id)) });
 }
 var SOCIAL_ICONS = {
-  x: import_icons_react5.IconBrandX,
-  youtube: import_icons_react5.IconBrandYoutube,
-  instagram: import_icons_react5.IconBrandInstagram,
-  facebook: import_icons_react5.IconBrandFacebook,
-  linkedin: import_icons_react5.IconBrandLinkedin,
-  github: import_icons_react5.IconBrandGithub,
-  blog: import_icons_react5.IconWorld
+  x: import_icons_react8.IconBrandX,
+  youtube: import_icons_react8.IconBrandYoutube,
+  instagram: import_icons_react8.IconBrandInstagram,
+  facebook: import_icons_react8.IconBrandFacebook,
+  linkedin: import_icons_react8.IconBrandLinkedin,
+  github: import_icons_react8.IconBrandGithub,
+  blog: import_icons_react8.IconWorld
 };
 function FooterSocials({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { gap: 0, wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { gap: 0, wrap: "nowrap", children: items.map((item) => {
     var _a4, _b;
-    const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : import_icons_react5.IconWorld;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_core29.ActionIcon,
+    const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : import_icons_react8.IconWorld;
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_core30.ActionIcon,
       {
         component: "a",
         href: item.url,
@@ -1600,62 +2087,62 @@ function FooterSocials({ items }) {
         color: "gray",
         variant: "subtle",
         "aria-label": (_b = item.label) != null ? _b : item.platform,
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { size: 18, stroke: 1.5 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { size: 18, stroke: 1.5 })
       },
       item.url
     );
   }) });
 }
 function InfoCell({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Group, { gap: 6, wrap: "nowrap", align: "baseline", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
-    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdText.Sub, { children }) : children
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { gap: 6, wrap: "nowrap", align: "baseline", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
+    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdText.Sub, { children }) : children
   ] });
 }
 function FooterCompanyInfo({ company }) {
   const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.SimpleGrid, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
-    sortedAddresses.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoCell, { label: "Tel", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
-    company.fax && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoCell, { label: "Fax", children: company.fax }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InfoCell, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.SimpleGrid, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
+    sortedAddresses.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoCell, { label: "Tel", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
+    company.fax && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoCell, { label: "Fax", children: company.fax }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InfoCell, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(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__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { component: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Stack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Logo, { size: "sm" }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdText.Sub, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FooterCompanyInfo, { company }) }),
-      visibleNav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Box, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Grid, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FooterNavColumns, { items: visibleNav }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { component: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdContainer, { py: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Logo, { size: "sm" }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdText.Sub, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FooterCompanyInfo, { company }) }),
+      visibleNav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Grid, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FooterNavColumns, { items: visibleNav }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Group, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(SdText.Sub, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SdText.Sub, { children: [
         "\xA9 ",
         company.copyrightYear,
         " ",
-        company.name,
+        t(company.name),
         ". All rights reserved."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core29.Group, { gap: "lg", wrap: "wrap", children: [
-        visiblePolicy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core29.Group, { gap: "lg", children: visiblePolicy.map((item) => {
-          const Link4 = item.highlight ? SdLink.Strong : SdLink.Sub;
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Link4, { href: item.href, children: item.label }, item.id);
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { gap: "lg", wrap: "wrap", children: [
+        visiblePolicy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { gap: "lg", children: visiblePolicy.map((item) => {
+          const Link4 = item.highlight ? SdLink.Body : SdLink.Sub;
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Link4, { href: item.href, children: item.label }, item.id);
         }) }),
-        company.socials && company.socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FooterSocials, { items: company.socials })
+        company.socials && company.socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FooterSocials, { items: company.socials })
       ] })
     ] })
   ] }) }) });
 }
 
 // ui/organism/FeatureSection.tsx
-var import_core30 = require("@mantine/core");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_core31 = require("@mantine/core");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SdFeatureSection(_a4) {
   var _b = _a4, {
     label,
@@ -1672,8 +2159,8 @@ function SdFeatureSection(_a4) {
     "cols",
     "py"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core30.Stack, { gap: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       SdTextBox.Section,
       {
         label,
@@ -1684,13 +2171,13 @@ function SdFeatureSection(_a4) {
         align: "center"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdFeatures, { items, cols })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdFeatures, { items, cols })
   ] }) }));
 }
 
 // ui/organism/TimelineSection.tsx
-var import_core31 = require("@mantine/core");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function SdTimelineSection(_a4) {
   var _b = _a4, {
     label,
@@ -1705,15 +2192,15 @@ function SdTimelineSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core31.Stack, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core31.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdTimeline, { items }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdTimeline, { items }) })
   ] })) });
 }
 
 // ui/organism/StepsSection.tsx
-var import_core32 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_core33 = require("@mantine/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function SdStepsSection(_a4) {
   var _b = _a4, {
     label,
@@ -1728,18 +2215,18 @@ function SdStepsSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core32.Stack, { gap: "xl", children: [
-    (label || title || description) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdSteps.Bubble, { items })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "xl", children: [
+    (label || title || description) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdSteps.Bubble, { items })
   ] }) }));
 }
 
 // ui/organism/ErrorView.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function StatusCode({ code }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_core33.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_core34.Text,
     {
       fz: 160,
       fw: 900,
@@ -1752,15 +2239,15 @@ function StatusCode({ code }) {
   );
 }
 function Page({ error, onReset, onHome }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusCode, { code: "500" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(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__ */ (0, import_jsx_runtime36.jsx)(import_core34.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StatusCode, { code: "500" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(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__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
-      onHome && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { gap: "sm", justify: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+      onHome && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
     ] })
   ] }) }) });
 }
@@ -1772,15 +2259,15 @@ function NotFound({
   },
   onBack = () => window.history.back()
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core33.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StatusCode, { code: "404" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Stack, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdTitle.Section, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdText.Body, { maw: 480, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(StatusCode, { code: "404" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdTitle.Section, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdText.Body, { maw: 480, children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core33.Group, { gap: "sm", justify: "center", children: [
-      onHome && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
-      onBack && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { gap: "sm", justify: "center", children: [
+      onHome && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
     ] })
   ] }) }) });
 }
@@ -1793,178 +2280,414 @@ var SdErrorView = {
 var SdErrorViewPage = SdErrorView.Page;
 var SdErrorViewNotFound = SdErrorView.NotFound;
 
+// ui/organism/LoginView.tsx
+var import_core35 = require("@mantine/core");
+var import_icons_react9 = require("@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
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SOCIAL_META = {
+  google: { Icon: import_icons_react9.IconBrandGoogle, label: "\uAD6C\uAE00\uB85C \uB85C\uADF8\uC778" },
+  kakao: { Icon: import_icons_react9.IconBrandKakaoTalk, label: "\uCE74\uCE74\uC624\uB85C \uB85C\uADF8\uC778" },
+  naver: { Icon: import_icons_react9.IconCircleLetterN, label: "\uB124\uC774\uBC84\uB85C \uB85C\uADF8\uC778" },
+  apple: { Icon: import_icons_react9.IconBrandApple, label: "\uC560\uD50C\uB85C \uB85C\uADF8\uC778" },
+  github: { Icon: import_icons_react9.IconBrandGithub, 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__ */ (0, import_jsx_runtime37.jsx)("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "md", children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdText.Error, { children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      SdInput.Email,
+      {
+        name: "email",
+        label: "\uC774\uBA54\uC77C",
+        placeholder: "name@example.com",
+        autoComplete: "email",
+        required: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      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__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "space-between", align: "center", wrap: "nowrap", children: [
+      withRemember ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Checkbox, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", {}),
+      findPasswordHref && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      SdButton.Primary,
+      {
+        type: "submit",
+        fullWidth: true,
+        loading,
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react9.IconLogin2, { size: 16 }),
+        children: submitLabel
+      }
+    ),
+    socials && socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Divider, { label: "\uB610\uB294", labelPosition: "center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Stack, { gap: "xs", children: socials.map((social) => {
+        var _a4;
+        const { Icon, label } = SOCIAL_META[social.provider];
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          SdButton.Outline,
+          {
+            color: "slate",
+            fullWidth: true,
+            type: "button",
+            onClick: social.onClick,
+            leftSection: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: 16 }),
+            children: (_a4 = social.label) != null ? _a4 : label
+          },
+          social.provider
+        );
+      }) })
+    ] }),
+    signUpHref && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { gap: 6, justify: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
+    ] }),
+    children
+  ] }) });
+}
+function FormHeader({ title, description }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logo, { size: "sm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(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__ */ (0, import_jsx_runtime37.jsx)(import_core35.Center, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FormHeader, { title, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(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__ */ (0, import_jsx_runtime37.jsxs)(import_core35.SimpleGrid, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      import_core35.Box,
+      {
+        visibleFrom: "md",
+        pos: "relative",
+        style: __spreadValues({ overflow: "hidden", display: "flex", alignItems: "flex-end" }, brandSurface),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            SdTextBox.Hero,
+            {
+              title: brandTitle,
+              description: brandDescription,
+              gap: "sm",
+              maxDescWidth: 420,
+              ta: "left",
+              align: "flex-start"
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Center, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "xl", w: "100%", maw: 400, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FormHeader, { title, description }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LoginForm, __spreadValues({}, formProps))
+    ] }) })
+  ] });
+}
+var SdLoginView = {
+  /** 중앙 정렬 카드 — 기본 로그인 화면 */
+  Card: Card7,
+  /** 좌측 브랜드 패널 + 우측 폼 — 넓은 화면용 */
+  Split
+};
+var SdLoginViewCard = SdLoginView.Card;
+var SdLoginViewSplit = SdLoginView.Split;
+
+// ui/organism/Result.tsx
+var import_core36 = require("@mantine/core");
+var import_icons_react10 = require("@tabler/icons-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function ResultIcon({ color, Icon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Center, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(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__ */ (0, import_jsx_runtime38.jsx)(import_core36.Center, { mih, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { align: "center", gap: "lg", ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdTitle.Section, { children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdText.Body, { maw: 480, children: description })
+      ] }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Box, { children }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Group, { gap: "sm", justify: "center", children: [
+        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
+        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
+      ] })
+    ] }) }) });
+  };
+}
+var SdResult = {
+  /** 성공 — 가입 완료·결제 완료 등 */
+  Success: createResult({
+    color: "green",
+    Icon: import_icons_react10.IconCircleCheck,
+    title: "\uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4"
+  }),
+  /** 실패 — 결제 실패·처리 중 오류 등. 서버 오류·404는 SdErrorView를 쓴다. */
+  Error: createResult({
+    color: "red",
+    Icon: import_icons_react10.IconCircleX,
+    title: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4"
+  })
+};
+var SdResultSuccess = SdResult.Success;
+var SdResultError = SdResult.Error;
+
 // ui/template/MainLayout.tsx
-var import_core34 = require("@mantine/core");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime39 = require("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__ */ (0, import_jsx_runtime35.jsxs)(import_core34.AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdHeader, { navItems, loginFlag }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core34.AppShell.Main, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdFooter, { company: companyInfo, navItems })
+  const Header = headers[headerVariant];
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.AppShell, { header: { height: 60 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Header, { navItems, loginFlag }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.AppShell.Main, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdFooter, { company: companyInfo, navItems })
   ] });
 }
 
 // ui/template/PageLayout.tsx
-var import_core35 = require("@mantine/core");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-function Content({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdContainer, { py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Stack, { gap: "xl", children }) });
+var import_core38 = require("@mantine/core");
+var import_jsx_runtime40 = require("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__ */ (0, import_jsx_runtime40.jsxs)(SdContainer, { py: "xl", children: [
+    showBreadcrumb && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SdBreadcrumb, { navItems, currentHref, mb: "lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Stack, { gap: "xl", children })
+  ] });
 }
 function LayoutGap() {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Space, { h: 48 });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Space, {});
 }
-function Minimal({ label, title, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Plain2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core35.Divider, {}),
+function Minimal({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Plain2, { navItems, breadcrumb, currentHref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LayoutGap, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Divider, {}),
     children
-  ] }) });
+  ] });
 }
-function Plain2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LayoutGap, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Content, { children })
+function Plain2({
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Content, { navItems, breadcrumb, currentHref, children }) });
+}
+function HeroCopy({ label, title, description }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "md", maw: HERO_MAW, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "sm", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Box, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SdText.Eyebrow, { c: "primary.1", children: label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      SdTextBox.Hero,
+      {
+        title,
+        description,
+        gap: "sm",
+        maxDescWidth: 560,
+        ta: "left",
+        align: "flex-start"
+      }
+    )
   ] });
 }
-function Image2({ image, label, title, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      import_core35.Box,
+function Image2({
+  image,
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      import_core38.Box,
       {
+        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__ */ (0, import_jsx_runtime36.jsx)(
-            import_core35.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_core38.Box,
             {
+              "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__ */ (0, import_jsx_runtime36.jsx)(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_core35.Box,
-            {
-              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__ */ (0, import_jsx_runtime36.jsx)(
-                SdTextBox.Hero,
-                {
-                  label,
-                  title,
-                  description,
-                  ta: "left",
-                  align: "flex-start"
-                }
-              )
-            }
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Content, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
-function Brand({ label, title, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      import_core35.Box,
+function Brand({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      import_core38.Box,
       {
-        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__ */ (0, import_jsx_runtime36.jsx)(
-            import_core35.Box,
-            {
-              style: {
-                position: "absolute",
-                top: -80,
-                right: -80,
-                width: 360,
-                height: 360,
-                borderRadius: "50%",
-                background: "rgba(255,255,255,0.06)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_core35.Box,
-            {
-              style: {
-                position: "absolute",
-                bottom: -60,
-                left: -60,
-                width: 240,
-                height: 240,
-                borderRadius: "50%",
-                background: "rgba(255,255,255,0.04)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            SdTextBox.Hero,
-            {
-              label,
-              title,
-              description,
-              ta: "center",
-              align: "center",
-              maw: 640,
-              mx: "auto",
-              pt: 80,
-              pb: 64
-            }
-          ) })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core38.Box, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Content, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(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
-var import_core36 = require("@mantine/core");
+var import_core39 = require("@mantine/core");
 var primary = [
   "#e7f0fb",
   "#c8dcf4",
@@ -2058,9 +2781,31 @@ var green = [
   "#14532d"
   // 9  green-900
 ];
-var theme = (0, import_core36.createTheme)({
+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 = (0, import_core39.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 ---- */
@@ -2070,20 +2815,20 @@ var theme = (0, import_core36.createTheme)({
     fontFamily: "'Noto Sans KR', ui-sans-serif, system-ui, sans-serif",
     fontWeight: "700",
     sizes: {
-      h1: { fontSize: (0, import_core36.rem)(48), lineHeight: "1.1", fontWeight: "900" },
-      h2: { fontSize: (0, import_core36.rem)(36), lineHeight: "1.1", fontWeight: "900" },
-      h3: { fontSize: (0, import_core36.rem)(28), lineHeight: "1.15", fontWeight: "700" },
-      h4: { fontSize: (0, import_core36.rem)(20), lineHeight: "1.3", fontWeight: "700" },
-      h5: { fontSize: (0, import_core36.rem)(16), lineHeight: "1.4", fontWeight: "700" },
-      h6: { fontSize: (0, import_core36.rem)(14), lineHeight: "1.4", fontWeight: "700" }
+      h1: { fontSize: (0, import_core39.rem)(48), lineHeight: "1.1", fontWeight: "900" },
+      h2: { fontSize: (0, import_core39.rem)(36), lineHeight: "1.1", fontWeight: "900" },
+      h3: { fontSize: (0, import_core39.rem)(28), lineHeight: "1.15", fontWeight: "700" },
+      h4: { fontSize: (0, import_core39.rem)(20), lineHeight: "1.3", fontWeight: "700" },
+      h5: { fontSize: (0, import_core39.rem)(16), lineHeight: "1.4", fontWeight: "700" },
+      h6: { fontSize: (0, import_core39.rem)(14), lineHeight: "1.4", fontWeight: "700" }
     }
   },
   fontSizes: {
-    xs: (0, import_core36.rem)(14),
-    sm: (0, import_core36.rem)(16),
-    md: (0, import_core36.rem)(18),
-    lg: (0, import_core36.rem)(20),
-    xl: (0, import_core36.rem)(22)
+    xs: (0, import_core39.rem)(14),
+    sm: (0, import_core39.rem)(16),
+    md: (0, import_core39.rem)(18),
+    lg: (0, import_core39.rem)(20),
+    xl: (0, import_core39.rem)(22)
   },
   lineHeights: {
     xs: "1.4",
@@ -2094,18 +2839,18 @@ var theme = (0, import_core36.createTheme)({
   },
   defaultRadius: "md",
   radius: {
-    xs: (0, import_core36.rem)(6),
-    sm: (0, import_core36.rem)(8),
-    md: (0, import_core36.rem)(10),
-    lg: (0, import_core36.rem)(14),
-    xl: (0, import_core36.rem)(18)
+    xs: (0, import_core39.rem)(6),
+    sm: (0, import_core39.rem)(8),
+    md: (0, import_core39.rem)(10),
+    lg: (0, import_core39.rem)(14),
+    xl: (0, import_core39.rem)(18)
   },
   spacing: {
-    xs: (0, import_core36.rem)(8),
-    sm: (0, import_core36.rem)(12),
-    md: (0, import_core36.rem)(16),
-    lg: (0, import_core36.rem)(24),
-    xl: (0, import_core36.rem)(32)
+    xs: (0, import_core39.rem)(8),
+    sm: (0, import_core39.rem)(12),
+    md: (0, import_core39.rem)(16),
+    lg: (0, import_core39.rem)(24),
+    xl: (0, import_core39.rem)(32)
   },
   shadows: {
     xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -2185,7 +2930,6 @@ var theme = (0, import_core36.createTheme)({
     Anchor: {
       defaultProps: { c: "slate.5", fz: "sm", underline: "never" }
     },
-    // SdHeader 모바일 드로어의 2단 아코디언 타이포를 SdLink와 맞춘다.
     NavLink: {
       defaultProps: { c: "slate.7", fz: "sm" }
     },
@@ -2205,11 +2949,16 @@ var theme = (0, import_core36.createTheme)({
   Logo,
   MainLayout,
   PageLayout,
+  PageLayoutBrand,
+  PageLayoutImage,
+  PageLayoutMinimal,
+  PageLayoutPlain,
   SdBadge,
   SdBadgeDefault,
   SdBadgePrimary,
   SdBadgeSuccess,
   SdBadgeWarning,
+  SdBreadcrumb,
   SdButton,
   SdButtonCancel,
   SdButtonDelete,
@@ -2240,17 +2989,41 @@ var theme = (0, import_core36.createTheme)({
   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,
@@ -2263,6 +3036,9 @@ var theme = (0, import_core36.createTheme)({
   SdQuote,
   SdQuoteCard,
   SdQuotePlain,
+  SdResult,
+  SdResultError,
+  SdResultSuccess,
   SdSkeleton,
   SdSkeletonAvatar,
   SdSkeletonCard,
@@ -2310,5 +3086,15 @@ var theme = (0, import_core36.createTheme)({
   SdTitleDisplay,
   SdTitleSection,
   SdTitleSub,
+  SdToast,
+  SdToastClean,
+  SdToastError,
+  SdToastHide,
+  SdToastInfo,
+  SdToastLoading,
+  SdToastProvider,
+  SdToastSuccess,
+  SdToastUpdate,
+  SdToastWarning,
   theme
 });