@yeongseoksong/framework 1.1.0 → 1.2.0

package/dist/ui/index.mjs

@@ -114,7 +114,11 @@ var SdTabs = {
         flexWrap: "wrap",
         justifyContent: "center"
       },
-      tab: { fontWeight: "500", fontSize: "var(--mantine-h5-font-size)", paddingInline: "var(--mantine-spacing-lg)" }
+      tab: {
+        fontWeight: "500",
+        fontSize: "var(--mantine-h5-font-size)",
+        paddingInline: "var(--mantine-spacing-lg)"
+      }
     }
   }),
   Underline: createTabs({
@@ -122,7 +126,11 @@ var SdTabs = {
     color: "primary",
     styles: {
       list: { width: "fit-content", margin: "0 auto", gap: "var(--mantine-spacing-sm)" },
-      tab: { fontWeight: "500", fontSize: "var(--mantine-h5-font-size)", paddingInline: "var(--mantine-spacing-lg)" }
+      tab: {
+        fontWeight: "500",
+        fontSize: "var(--mantine-h5-font-size)",
+        paddingInline: "var(--mantine-spacing-lg)"
+      }
     }
   }),
   Outline: createTabs({
@@ -131,7 +139,11 @@ var SdTabs = {
     radius: "md",
     styles: {
       list: { width: "fit-content", margin: "0 auto", gap: "var(--mantine-spacing-sm)" },
-      tab: { fontWeight: "500", fontSize: "var(--mantine-h5-font-size)", paddingInline: "var(--mantine-spacing-lg)" }
+      tab: {
+        fontWeight: "500",
+        fontSize: "var(--mantine-h5-font-size)",
+        paddingInline: "var(--mantine-spacing-lg)"
+      }
     }
   })
 };
@@ -167,6 +179,10 @@ var SdTitle = {
   /** 소제목  */
   Sub: createTitle({ order: 5 })
 };
+var SdTitleDisplay = SdTitle.Display;
+var SdTitleSection = SdTitle.Section;
+var SdTitleCard = SdTitle.Card;
+var SdTitleSub = SdTitle.Sub;
 
 // ui/atom/Text.tsx
 import { Text as MantineText } from "@mantine/core";
@@ -182,20 +198,37 @@ 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" } }),
+  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" } })
+  Numeric: createText({
+    fw: 700,
+    c: "slate.8",
+    fz: "md",
+    style: { fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }
+  })
 };
+var SdTextStrong = SdText.Strong;
+var SdTextBody = SdText.Body;
+var SdTextSub = SdText.Sub;
+var SdTextEyebrow = SdText.Eyebrow;
+var SdTextError = SdText.Error;
+var SdTextHint = SdText.Hint;
+var SdTextNumeric = SdText.Numeric;
 
 // ui/atom/Button.tsx
 import { Button as MantineButton } from "@mantine/core";
-import { IconTrash, IconX } from "@tabler/icons-react";
+import { IconDownload, IconFileSpreadsheet, IconSend, IconTrash, IconX } from "@tabler/icons-react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-function createButton(defaults) {
+function createButton(defaults, defaultLabel) {
   return function SdButton2(_a4) {
     var _b = _a4, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ jsx6(MantineButton, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { children }));
+    return /* @__PURE__ */ jsx6(MantineButton, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { children: children != null ? children : defaultLabel }));
   };
 }
 var SdButton = {
@@ -209,18 +242,37 @@ var SdButton = {
   Ghost: createButton({ variant: "subtle", color: "slate" }),
   /** 다크 배경 위 — white */
   White: createButton({ variant: "white" }),
-  /** 삭제 — filled red + 휴지통 아이콘 */
-  Delete: createButton({ color: "red", leftSection: /* @__PURE__ */ jsx6(IconTrash, { size: 16 }) }),
-  /** 취소 — outline slate + X 아이콘 */
-  Cancel: createButton({ variant: "outline", color: "slate", leftSection: /* @__PURE__ */ jsx6(IconX, { size: 16 }) })
+  // ── 표준 액션 버튼: 라벨·색·아이콘이 고정 (children으로 라벨 덮어쓰기 가능) ──
+  /** 전송 — filled primary + 종이비행기 아이콘, 기본 라벨 "전송" */
+  Submit: createButton({ color: "primary", leftSection: /* @__PURE__ */ jsx6(IconSend, { size: 16 }) }, "\uC804\uC1A1"),
+  /** 삭제 — filled red + 휴지통 아이콘, 기본 라벨 "삭제" */
+  Delete: createButton({ color: "red", leftSection: /* @__PURE__ */ jsx6(IconTrash, { size: 16 }) }, "\uC0AD\uC81C"),
+  /** 취소 — outline slate + X 아이콘, 기본 라벨 "취소" */
+  Cancel: createButton(
+    { variant: "outline", color: "slate", leftSection: /* @__PURE__ */ jsx6(IconX, { size: 16 }) },
+    "\uCDE8\uC18C"
+  ),
+  /** 엑셀 — outline green + 스프레드시트 아이콘, 기본 라벨 "엑셀" */
+  Excel: createButton(
+    { variant: "outline", color: "green", leftSection: /* @__PURE__ */ jsx6(IconFileSpreadsheet, { size: 16 }) },
+    "\uC5D1\uC140"
+  ),
+  /** 다운로드 — light primary + 다운로드 아이콘, 기본 라벨 "다운로드" */
+  Download: createButton(
+    { variant: "light", color: "primary", leftSection: /* @__PURE__ */ jsx6(IconDownload, { size: 16 }) },
+    "\uB2E4\uC6B4\uB85C\uB4DC"
+  )
 };
 var SdButtonPrimary = SdButton.Primary;
 var SdButtonSecondary = SdButton.Secondary;
 var SdButtonOutline = SdButton.Outline;
 var SdButtonGhost = SdButton.Ghost;
 var SdButtonWhite = SdButton.White;
+var SdButtonSubmit = SdButton.Submit;
 var SdButtonDelete = SdButton.Delete;
 var SdButtonCancel = SdButton.Cancel;
+var SdButtonExcel = SdButton.Excel;
+var SdButtonDownload = SdButton.Download;
 
 // ui/atom/Quote.tsx
 import { Box as Box2, Card, Center, Group, Stack } from "@mantine/core";
@@ -249,6 +301,8 @@ var SdQuote = {
   Plain,
   Card: CardQuote
 };
+var SdQuotePlain = SdQuote.Plain;
+var SdQuoteCard = SdQuote.Card;
 
 // ui/atom/Table.tsx
 import { Table } from "@mantine/core";
@@ -296,6 +350,7 @@ var Spec = createTable(__spreadProps(__spreadValues({}, base), {
 Spec.Th = SpecTh;
 Spec.Td = SpecTd;
 var SdTable = Object.assign(createTable(base), { Spec });
+var SdTableSpec = Spec;
 
 // ui/atom/Modal.tsx
 import { Modal } from "@mantine/core";
@@ -319,7 +374,17 @@ var SdModal = createModal({
 import { ThemeIcon } from "@mantine/core";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function SdNumberIcon(_a4) {
-  var _b = _a4, { value, size = 48, radius = "xl", color = "primary" } = _b, props = __objRest(_b, ["value", "size", "radius", "color"]);
+  var _b = _a4, {
+    value,
+    size = 48,
+    radius = "xl",
+    color = "primary"
+  } = _b, props = __objRest(_b, [
+    "value",
+    "size",
+    "radius",
+    "color"
+  ]);
   return /* @__PURE__ */ jsx10(ThemeIcon, __spreadProps(__spreadValues({ size, radius, color }, props), { children: /* @__PURE__ */ jsx10(SdText.Strong, { c: "white", children: value }) }));
 }
 
@@ -342,6 +407,10 @@ var SdBadge = {
   /** 주의/경고 */
   Warning: createBadge({ variant: "light", color: "orange" })
 };
+var SdBadgeDefault = SdBadge.Default;
+var SdBadgePrimary = SdBadge.Primary;
+var SdBadgeSuccess = SdBadge.Success;
+var SdBadgeWarning = SdBadge.Warning;
 
 // ui/atom/Input.tsx
 import {
@@ -358,19 +427,19 @@ function createTextInput(defaults) {
   };
 }
 function createTextarea(defaults) {
-  return function SdInputTextarea(_a4) {
+  return function SdInputTextarea2(_a4) {
     var props = __objRest(_a4, []);
     return /* @__PURE__ */ jsx12(Textarea, __spreadValues(__spreadValues({}, defaults), props));
   };
 }
 function createPasswordInput(defaults) {
-  return function SdInputPassword(_a4) {
+  return function SdInputPassword2(_a4) {
     var props = __objRest(_a4, []);
     return /* @__PURE__ */ jsx12(PasswordInput, __spreadValues(__spreadValues({}, defaults), props));
   };
 }
 function createSelect(defaults) {
-  return function SdInputSelect(_a4) {
+  return function SdInputSelect2(_a4) {
     var props = __objRest(_a4, []);
     return /* @__PURE__ */ jsx12(Select, __spreadValues(__spreadValues({}, defaults), props));
   };
@@ -387,6 +456,11 @@ var SdInput = {
   /** 드롭다운 선택 */
   Select: createSelect({})
 };
+var SdInputText = SdInput.Text;
+var SdInputEmail = SdInput.Email;
+var SdInputPassword = SdInput.Password;
+var SdInputTextarea = SdInput.Textarea;
+var SdInputSelect = SdInput.Select;
 
 // ui/atom/Skeleton.tsx
 import { Box as Box3, Skeleton as MantineSkeleton, Stack as Stack2 } from "@mantine/core";
@@ -412,7 +486,11 @@ function SkeletonCard({ height, lines = 3 }) {
     Box3,
     {
       p: "md",
-      style: { borderRadius: "var(--mantine-radius-md)", border: "1px solid var(--mantine-color-gray-3)", height },
+      style: {
+        borderRadius: "var(--mantine-radius-md)",
+        border: "1px solid var(--mantine-color-gray-3)",
+        height
+      },
       children: /* @__PURE__ */ jsxs2(Stack2, { gap: "sm", children: [
         /* @__PURE__ */ jsx13(MantineSkeleton, { height: 20, width: "50%", radius: "sm" }),
         Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx13(
@@ -441,9 +519,60 @@ var SdSkeletonTitle = SkeletonTitle;
 var SdSkeletonImage = SkeletonImage;
 var SdSkeletonAvatar = SkeletonAvatar;
 
+// ui/atom/Link.tsx
+import { Anchor as MantineAnchor } from "@mantine/core";
+
+// util/style.util.ts
+function toCssColor(value) {
+  if (typeof value !== "string") return "";
+  return value.includes(".") ? `var(--mantine-color-${value.replace(".", "-")})` : value;
+}
+
+// ui/atom/Link.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var HOVER_COLOR = "var(--mantine-color-primary-6)";
+function createLink(defaults) {
+  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 handleEnter = (e) => {
+      e.currentTarget.style.color = HOVER_COLOR;
+      onMouseEnter == null ? void 0 : onMouseEnter(e);
+    };
+    const handleLeave = (e) => {
+      e.currentTarget.style.color = baseColor;
+      onMouseLeave == null ? void 0 : onMouseLeave(e);
+    };
+    return /* @__PURE__ */ jsx14(
+      MantineAnchor,
+      __spreadProps(__spreadValues(__spreadValues({}, defaults), props), {
+        style: { transition: "color 0.15s" },
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        children
+      })
+    );
+  };
+}
+var SdLink = {
+  /** 최상위 강조 — 눈에 띄어야 하는 단일 링크 */
+  Strong: createLink({ fw: 700, c: "primary.6", fz: "xs", underline: "never" }),
+  /** 기본 — 본문·네비게이션 수준의 일반 링크 */
+  Body: createLink({ fw: 500, c: "slate.7", fz: 15, underline: "never" }),
+  /** 보조 — 연락처·정책 등 부가 정보 */
+  Sub: createLink({ fw: 400, c: "slate.5", fz: "xs", underline: "never" }),
+  /** 최소 강조 — 링크 목록처럼 밀도가 높고 톤을 낮춰야 하는 곳 */
+  Hint: createLink({ fw: 400, c: "slate.4", fz: "xs", underline: "never" })
+};
+var SdLinkStrong = SdLink.Strong;
+var SdLinkBody = SdLink.Body;
+var SdLinkSub = SdLink.Sub;
+var SdLinkHint = SdLink.Hint;
+
 // ui/molecule/TextBox.tsx
 import { Stack as Stack3 } from "@mantine/core";
-import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
 function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", color_ = void 0) {
   return function SdTextBox2(_a4) {
     var _b = _a4, {
@@ -468,9 +597,9 @@ function createTextBox(titleVariant, defaultGap = "xs", descVariant = "Body", co
     const TitleComponent = SdTitle[variant];
     const DescComponent = SdText[descVariant];
     return /* @__PURE__ */ jsxs3(Stack3, __spreadProps(__spreadValues({ gap: defaultGap }, stackProps), { children: [
-      label && /* @__PURE__ */ jsx14(SdText.Eyebrow, { children: label }),
-      /* @__PURE__ */ jsx14(TitleComponent, { c: colorRes, children: title }),
-      description && /* @__PURE__ */ jsx14(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
+      label && /* @__PURE__ */ jsx15(SdText.Eyebrow, { children: label }),
+      /* @__PURE__ */ jsx15(TitleComponent, { c: colorRes, children: title }),
+      description && /* @__PURE__ */ jsx15(DescComponent, { c: colorRes, maw: maxDescWidth, mt: 4, children: description }),
       children
     ] }));
   };
@@ -495,77 +624,83 @@ function filterAndSort(items) {
 }
 
 // ui/molecule/Features.tsx
-import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function SdFeatures({ items, cols = { base: 1, sm: 2, md: 3 } }) {
   const visible = filterAndSort(items);
-  return /* @__PURE__ */ jsx15(SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ jsx15(
-    Card2,
-    {
-      children: /* @__PURE__ */ jsxs4(Stack4, { gap: "sm", children: [
-        item.icon,
-        /* @__PURE__ */ jsx15(
-          SdTextBox.Card,
-          {
-            label: item.label,
-            title: item.title,
-            description: item.description
-          }
-        )
-      ] }, item.id)
-    },
-    item.id
-  )) });
+  return /* @__PURE__ */ jsx16(SimpleGrid, { cols, spacing: "xl", children: visible.map((item) => /* @__PURE__ */ jsx16(Card2, { children: /* @__PURE__ */ jsxs4(Stack4, { gap: "sm", children: [
+    item.icon,
+    /* @__PURE__ */ jsx16(SdTextBox.Card, { label: item.label, title: item.title, description: item.description })
+  ] }, item.id) }, item.id)) });
 }
 
 // ui/molecule/Timeline.tsx
 import { Group as Group2, Stack as Stack5, Timeline as MantineTimeline } from "@mantine/core";
-import { jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
 function SdTimeline({ items }) {
   const grouped = items.filter((item) => item.isShow).sort((a, b) => b.year - a.year || b.month - a.month).reduce((acc, item) => {
     var _a4, _b;
+    ;
     ((_b = acc[_a4 = item.year]) != null ? _b : acc[_a4] = []).push(item);
     return acc;
   }, {});
   const years = Object.keys(grouped).map(Number).sort((a, b) => b - a);
-  return /* @__PURE__ */ jsx16(MantineTimeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ jsx16(
-    MantineTimeline.Item,
-    {
-      title: /* @__PURE__ */ jsxs5(SdTitle.Sub, { children: [
-        year,
-        "\uB144"
-      ] }),
-      children: /* @__PURE__ */ jsx16(Stack5, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ jsxs5(Group2, { gap: "md", align: "center", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsxs5(SdText.Eyebrow, { miw: 28, children: [
-          event.month,
-          "\uC6D4"
-        ] }),
-        /* @__PURE__ */ jsx16(SdText.Sub, { style: { flex: 1 }, children: event.description })
-      ] }, event.id)) })
-    },
-    year
-  )) });
+  return /* @__PURE__ */ jsx17(MantineTimeline, { active: items.length, bulletSize: 24, lineWidth: 2, children: years.map((year) => /* @__PURE__ */ jsx17(MantineTimeline.Item, { title: /* @__PURE__ */ jsxs5(SdTitle.Sub, { children: [
+    year,
+    "\uB144"
+  ] }), children: /* @__PURE__ */ jsx17(Stack5, { gap: 6, mt: "xs", children: grouped[year].map((event) => /* @__PURE__ */ jsxs5(Group2, { gap: "md", align: "center", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsxs5(SdText.Eyebrow, { miw: 28, children: [
+      event.month,
+      "\uC6D4"
+    ] }),
+    /* @__PURE__ */ jsx17(SdText.Sub, { style: { flex: 1 }, children: event.description })
+  ] }, event.id)) }) }, year)) });
 }
 
 // ui/molecule/Steps.tsx
 import { Box as Box4, Card as Card3, Group as Group3, Stack as Stack6, ThemeIcon as ThemeIcon2 } from "@mantine/core";
 import { IconArrowDown, IconArrowRight } from "@tabler/icons-react";
 import { Fragment } from "react/jsx-runtime";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
 function BubbleStep({ item, index, isLast }) {
   return /* @__PURE__ */ jsxs6(Group3, { align: "flex-start", gap: "lg", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsxs6(Box4, { style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }, children: [
-      /* @__PURE__ */ jsx17(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
-      !isLast && /* @__PURE__ */ jsx17(Box4, { style: { width: 2, flex: 1, minHeight: 32, marginTop: 8, background: "var(--mantine-color-primary-2)" } })
-    ] }),
-    /* @__PURE__ */ jsx17(SdTextBox.Card, { title: item.title, description: item.description, pb: !isLast ? "xl" : 0, pt: 4 })
+    /* @__PURE__ */ jsxs6(
+      Box4,
+      {
+        style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
+        children: [
+          /* @__PURE__ */ jsx18(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
+          !isLast && /* @__PURE__ */ jsx18(
+            Box4,
+            {
+              style: {
+                width: 2,
+                flex: 1,
+                minHeight: 32,
+                marginTop: 8,
+                background: "var(--mantine-color-primary-2)"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      SdTextBox.Card,
+      {
+        title: item.title,
+        description: item.description,
+        pb: !isLast ? "xl" : 0,
+        pt: 4
+      }
+    )
   ] });
 }
 function Bubble({ items }) {
-  return /* @__PURE__ */ jsx17(Box4, { children: items.map((item, i) => /* @__PURE__ */ jsx17(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
+  return /* @__PURE__ */ jsx18(Box4, { children: items.map((item, i) => /* @__PURE__ */ jsx18(BubbleStep, { item, index: i, isLast: i === items.length - 1 }, i)) });
 }
 function CardStep({ item, index }) {
   return /* @__PURE__ */ jsxs6(Card3, { withBorder: true, radius: "md", p: 0, style: { height: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       Box4,
       {
         py: "lg",
@@ -580,37 +715,40 @@ function CardStep({ item, index }) {
         ] })
       }
     ),
-    /* @__PURE__ */ jsx17(Box4, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx17(SdTextBox.Card, { title: item.title, description: item.description }) })
+    /* @__PURE__ */ jsx18(Box4, { p: "lg", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx18(SdTextBox.Card, { title: item.title, description: item.description }) })
   ] });
 }
 function CardArrow({ direction }) {
-  return /* @__PURE__ */ jsx17(ThemeIcon2, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ jsx17(IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ jsx17(IconArrowDown, { size: 20, stroke: 2.5 }) });
+  return /* @__PURE__ */ jsx18(ThemeIcon2, { size: 36, radius: "xl", variant: "light", color: "primary", children: direction === "right" ? /* @__PURE__ */ jsx18(IconArrowRight, { size: 20, stroke: 2.5 }) : /* @__PURE__ */ jsx18(IconArrowDown, { size: 20, stroke: 2.5 }) });
 }
 function CardVariant({ items }) {
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx17(Stack6, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx17(CardStep, { item, index: i }),
-      i < items.length - 1 && /* @__PURE__ */ jsx17(Box4, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx17(CardArrow, { direction: "down" }) })
+    /* @__PURE__ */ jsx18(Stack6, { gap: "sm", hiddenFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx18(CardStep, { item, index: i }),
+      i < items.length - 1 && /* @__PURE__ */ jsx18(Box4, { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx18(CardArrow, { direction: "down" }) })
     ] }, i)) }),
-    /* @__PURE__ */ jsx17(Group3, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx17(Box4, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx17(CardStep, { item, index: i }) }),
-      i < items.length - 1 && /* @__PURE__ */ jsx17(Box4, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ jsx17(CardArrow, { direction: "right" }) })
+    /* @__PURE__ */ jsx18(Group3, { wrap: "nowrap", align: "stretch", gap: 0, visibleFrom: "sm", children: items.map((item, i) => /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx18(Box4, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx18(CardStep, { item, index: i }) }),
+      i < items.length - 1 && /* @__PURE__ */ jsx18(Box4, { style: { display: "flex", alignItems: "center", padding: "0 8px" }, children: /* @__PURE__ */ jsx18(CardArrow, { direction: "right" }) })
     ] }, i)) })
   ] });
 }
 function StripStep({ item, index }) {
-  return /* @__PURE__ */ jsx17(Box4, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ jsxs6(Stack6, { gap: 4, children: [
+  return /* @__PURE__ */ jsx18(Box4, { pl: "md", style: { borderLeft: "3px solid var(--mantine-color-primary-6)" }, children: /* @__PURE__ */ jsxs6(Stack6, { gap: 4, children: [
     /* @__PURE__ */ jsxs6(SdText.Eyebrow, { children: [
       "STEP ",
       String(index + 1).padStart(2, "0")
     ] }),
-    /* @__PURE__ */ jsx17(SdTextBox.Card, { title: item.title, description: item.description })
+    /* @__PURE__ */ jsx18(SdTextBox.Card, { title: item.title, description: item.description })
   ] }) });
 }
 function Strip({ items }) {
-  return /* @__PURE__ */ jsx17(Stack6, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx17(StripStep, { item, index: i }, i)) });
+  return /* @__PURE__ */ jsx18(Stack6, { gap: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx18(StripStep, { item, index: i }, i)) });
 }
 var SdSteps = { Bubble, Card: CardVariant, Strip };
+var SdStepsBubble = SdSteps.Bubble;
+var SdStepsCard = SdSteps.Card;
+var SdStepsStrip = SdSteps.Strip;
 
 // ui/molecule/Testimonial.tsx
 import {
@@ -622,13 +760,13 @@ import {
   SimpleGrid as SimpleGrid2,
   Stack as Stack7
 } from "@mantine/core";
-import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 function AuthorRow({ item }) {
   return /* @__PURE__ */ jsxs7(Group4, { gap: "sm", wrap: "nowrap", children: [
-    item.avatar && /* @__PURE__ */ jsx18(Avatar, { src: item.avatar, size: "md", radius: "xl" }),
-    !item.avatar && /* @__PURE__ */ jsx18(Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
+    item.avatar && /* @__PURE__ */ jsx19(Avatar, { src: item.avatar, size: "md", radius: "xl" }),
+    !item.avatar && /* @__PURE__ */ jsx19(Avatar, { size: "md", radius: "xl", color: "primary", children: item.name.charAt(0) }),
     /* @__PURE__ */ jsxs7(Stack7, { gap: 0, children: [
-      /* @__PURE__ */ jsx18(SdText.Strong, { fz: "sm", children: item.name }),
+      /* @__PURE__ */ jsx19(SdText.Strong, { fz: "sm", children: item.name }),
       /* @__PURE__ */ jsxs7(SdText.Sub, { children: [
         item.role,
         item.company ? ` \xB7 ${item.company}` : ""
@@ -638,28 +776,28 @@ function AuthorRow({ item }) {
 }
 function CardTestimonial(_a4) {
   var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
-  return /* @__PURE__ */ jsx18(Card4, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", h: "100%", children: [
-    item.rating && /* @__PURE__ */ jsx18(Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
+  return /* @__PURE__ */ jsx19(Card4, __spreadProps(__spreadValues({ h: "100%" }, boxProps), { children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", h: "100%", children: [
+    item.rating && /* @__PURE__ */ jsx19(Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
     /* @__PURE__ */ jsxs7(Stack7, { gap: "xs", style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx18(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
-      item.lines.map((line, i) => /* @__PURE__ */ jsx18(SdText.Body, { children: line }, i))
+      /* @__PURE__ */ jsx19(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
+      item.lines.map((line, i) => /* @__PURE__ */ jsx19(SdText.Body, { children: line }, i))
     ] }),
-    /* @__PURE__ */ jsx18(AuthorRow, { item })
+    /* @__PURE__ */ jsx19(AuthorRow, { item })
   ] }) }));
 }
 function Strip2(_a4) {
   var _b = _a4, { item } = _b, boxProps = __objRest(_b, ["item"]);
-  return /* @__PURE__ */ jsx18(Box5, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", children: [
-    item.rating && /* @__PURE__ */ jsx18(Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
+  return /* @__PURE__ */ jsx19(Box5, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs7(Stack7, { gap: "md", children: [
+    item.rating && /* @__PURE__ */ jsx19(Rating, { value: item.rating, readOnly: true, size: "sm", color: "primary" }),
     /* @__PURE__ */ jsxs7(Group4, { gap: 4, align: "flex-start", children: [
-      /* @__PURE__ */ jsx18(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
-      /* @__PURE__ */ jsx18(Stack7, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ jsx18(SdText.Body, { children: line }, i)) })
+      /* @__PURE__ */ jsx19(SdTitle.Display, { c: "primary.6", lh: 0.8, "aria-hidden": true, children: "\u201C" }),
+      /* @__PURE__ */ jsx19(Stack7, { gap: "xs", style: { flex: 1 }, children: item.lines.map((line, i) => /* @__PURE__ */ jsx19(SdText.Body, { children: line }, i)) })
     ] }),
-    /* @__PURE__ */ jsx18(AuthorRow, { item })
+    /* @__PURE__ */ jsx19(AuthorRow, { item })
   ] }) }));
 }
 function Grid({ items, cols = { base: 1, sm: 2, md: 3 } }) {
-  return /* @__PURE__ */ jsx18(SimpleGrid2, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ jsx18(CardTestimonial, { item }, i)) });
+  return /* @__PURE__ */ jsx19(SimpleGrid2, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map((item, i) => /* @__PURE__ */ jsx19(CardTestimonial, { item }, i)) });
 }
 var SdTestimonial = {
   /** 카드형 — 그리드 배치용 */
@@ -669,6 +807,9 @@ var SdTestimonial = {
   /** 카드 그리드 — 여러 후기 목록 */
   Grid
 };
+var SdTestimonialCard = SdTestimonial.Card;
+var SdTestimonialStrip = SdTestimonial.Strip;
+var SdTestimonialGrid = SdTestimonial.Grid;
 
 // ui/molecule/PricingCard.tsx
 import {
@@ -680,110 +821,80 @@ import {
   ThemeIcon as ThemeIcon3
 } from "@mantine/core";
 import { IconCheck, IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 function Default(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5;
-  return /* @__PURE__ */ jsx19(
-    Card5,
-    __spreadProps(__spreadValues({
-      withBorder: true,
-      style: { position: "relative" }
-    }, cardProps), {
-      children: /* @__PURE__ */ jsxs8(Stack8, { gap: "xl", children: [
-        /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
-          /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", align: "flex-start", children: [
-            /* @__PURE__ */ jsx19(SdTitle.Card, { children: item.name }),
-            item.isPopular && /* @__PURE__ */ jsx19(SdBadge.Primary, { children: "\uCD94\uCC9C" })
-          ] }),
-          item.description && /* @__PURE__ */ jsx19(SdText.Sub, { children: item.description })
-        ] }),
-        /* @__PURE__ */ jsxs8(Group5, { gap: 4, align: "baseline", children: [
-          /* @__PURE__ */ jsx19(SdTitle.Display, { children: item.price }),
-          item.period && /* @__PURE__ */ jsxs8(SdText.Sub, { children: [
-            "/ ",
-            item.period
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx19(Divider, {}),
-        /* @__PURE__ */ jsx19(Stack8, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx19(
-            ThemeIcon3,
-            {
-              size: "xs",
-              radius: "xl",
-              color: f.included ? "primary" : "slate",
-              variant: f.included ? "filled" : "subtle",
-              children: f.included ? /* @__PURE__ */ jsx19(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx19(IconX2, { size: 12 })
-            }
-          ),
-          /* @__PURE__ */ jsx19(
-            SdText.Body,
-            {
-              fz: "sm",
-              c: f.included ? "slate.7" : "slate.4",
-              children: f.text
-            }
-          )
-        ] }, i)) }),
-        /* @__PURE__ */ jsx19(SdButton.Outline, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+  return /* @__PURE__ */ jsx20(Card5, __spreadProps(__spreadValues({ withBorder: true, style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack8, { gap: "xl", children: [
+    /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsx20(SdTitle.Card, { children: item.name }),
+        item.isPopular && /* @__PURE__ */ jsx20(SdBadge.Primary, { children: "\uCD94\uCC9C" })
+      ] }),
+      item.description && /* @__PURE__ */ jsx20(SdText.Sub, { children: item.description })
+    ] }),
+    /* @__PURE__ */ jsxs8(Group5, { gap: 4, align: "baseline", children: [
+      /* @__PURE__ */ jsx20(SdTitle.Display, { children: item.price }),
+      item.period && /* @__PURE__ */ jsxs8(SdText.Sub, { children: [
+        "/ ",
+        item.period
       ] })
-    })
-  );
+    ] }),
+    /* @__PURE__ */ jsx20(Divider, {}),
+    /* @__PURE__ */ jsx20(Stack8, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx20(
+        ThemeIcon3,
+        {
+          size: "xs",
+          radius: "xl",
+          color: f.included ? "primary" : "slate",
+          variant: f.included ? "filled" : "subtle",
+          children: f.included ? /* @__PURE__ */ jsx20(IconCheck, { size: 12 }) : /* @__PURE__ */ jsx20(IconX2, { size: 12 })
+        }
+      ),
+      /* @__PURE__ */ jsx20(SdText.Body, { fz: "sm", c: f.included ? "slate.7" : "slate.4", children: f.text })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx20(SdButton.Outline, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+  ] }) }));
 }
 function Featured(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5;
-  return /* @__PURE__ */ jsx19(
-    Card5,
-    __spreadProps(__spreadValues({
-      bg: "primary.6",
-      style: { position: "relative" }
-    }, cardProps), {
-      children: /* @__PURE__ */ jsxs8(Stack8, { gap: "xl", children: [
-        /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
-          /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", align: "flex-start", children: [
-            /* @__PURE__ */ jsx19(SdTitle.Card, { c: "white", children: item.name }),
-            item.isPopular && /* @__PURE__ */ jsx19(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
-          ] }),
-          item.description && /* @__PURE__ */ jsx19(SdText.Body, { c: "primary.1", children: item.description })
-        ] }),
-        /* @__PURE__ */ jsxs8(Group5, { gap: 4, align: "baseline", children: [
-          /* @__PURE__ */ jsx19(SdTitle.Display, { c: "white", children: item.price }),
-          item.period && /* @__PURE__ */ jsxs8(SdText.Body, { c: "primary.2", children: [
-            "/ ",
-            item.period
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx19(Divider, { color: "primary.4" }),
-        /* @__PURE__ */ jsx19(Stack8, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx19(
-            ThemeIcon3,
-            {
-              size: "xs",
-              radius: "xl",
-              color: "white",
-              variant: f.included ? "filled" : "subtle",
-              children: f.included ? /* @__PURE__ */ jsx19(IconCheck, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ jsx19(IconX2, { size: 12, color: "rgba(255,255,255,0.4)" })
-            }
-          ),
-          /* @__PURE__ */ jsx19(
-            SdText.Body,
-            {
-              fz: "sm",
-              c: f.included ? "white" : "primary.3",
-              children: f.text
-            }
-          )
-        ] }, i)) }),
-        /* @__PURE__ */ jsx19(SdButton.White, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+  return /* @__PURE__ */ jsx20(Card5, __spreadProps(__spreadValues({ bg: "primary.6", style: { position: "relative" } }, cardProps), { children: /* @__PURE__ */ jsxs8(Stack8, { gap: "xl", children: [
+    /* @__PURE__ */ jsxs8(Stack8, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsx20(SdTitle.Card, { c: "white", children: item.name }),
+        item.isPopular && /* @__PURE__ */ jsx20(SdBadge.Default, { c: "white", style: { borderColor: "rgba(255,255,255,0.5)" }, children: "\uCD94\uCC9C" })
+      ] }),
+      item.description && /* @__PURE__ */ jsx20(SdText.Body, { c: "primary.1", children: item.description })
+    ] }),
+    /* @__PURE__ */ jsxs8(Group5, { gap: 4, align: "baseline", children: [
+      /* @__PURE__ */ jsx20(SdTitle.Display, { c: "white", children: item.price }),
+      item.period && /* @__PURE__ */ jsxs8(SdText.Body, { c: "primary.2", children: [
+        "/ ",
+        item.period
       ] })
-    })
-  );
+    ] }),
+    /* @__PURE__ */ jsx20(Divider, { color: "primary.4" }),
+    /* @__PURE__ */ jsx20(Stack8, { gap: "sm", children: item.features.map((f, i) => /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx20(
+        ThemeIcon3,
+        {
+          size: "xs",
+          radius: "xl",
+          color: "white",
+          variant: f.included ? "filled" : "subtle",
+          children: f.included ? /* @__PURE__ */ jsx20(IconCheck, { size: 12, color: "var(--mantine-color-primary-6)" }) : /* @__PURE__ */ jsx20(IconX2, { size: 12, color: "rgba(255,255,255,0.4)" })
+        }
+      ),
+      /* @__PURE__ */ jsx20(SdText.Body, { fz: "sm", c: f.included ? "white" : "primary.3", children: f.text })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx20(SdButton.White, { fullWidth: true, onClick: () => onSelect == null ? void 0 : onSelect(item), children: (_a5 = item.ctaLabel) != null ? _a5 : "\uC2DC\uC791\uD558\uAE30" })
+  ] }) }));
 }
 function Grid2({ items, cols = { base: 1, sm: 2, md: 3 }, onSelect }) {
-  return /* @__PURE__ */ jsx19(SimpleGrid3, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
-    (item, i) => item.isPopular ? /* @__PURE__ */ jsx19(Featured, { item, onSelect }, i) : /* @__PURE__ */ jsx19(Default, { item, onSelect }, i)
+  return /* @__PURE__ */ jsx20(SimpleGrid3, { cols, spacing: "xl", style: { alignItems: "stretch" }, children: items.map(
+    (item, i) => item.isPopular ? /* @__PURE__ */ jsx20(Featured, { item, onSelect }, i) : /* @__PURE__ */ jsx20(Default, { item, onSelect }, i)
   ) });
 }
 var SdPricingCard = {
@@ -794,33 +905,36 @@ var SdPricingCard = {
   /** 가격 그리드 (isPopular 항목은 자동으로 Featured 처리) */
   Grid: Grid2
 };
+var SdPricingCardDefault = SdPricingCard.Default;
+var SdPricingCardFeatured = SdPricingCard.Featured;
+var SdPricingCardGrid = SdPricingCard.Grid;
 
 // ui/molecule/Faq.tsx
 import { Accordion, Box as Box7, Stack as Stack9 } from "@mantine/core";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function Default2(_a4) {
   var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
-  return /* @__PURE__ */ jsx20(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx20(Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
-    /* @__PURE__ */ jsx20(Accordion.Control, { children: /* @__PURE__ */ jsx20(SdText.Strong, { fz: "sm", children: item.question }) }),
-    /* @__PURE__ */ jsx20(Accordion.Panel, { children: /* @__PURE__ */ jsx20(SdText.Body, { fz: "sm", children: item.answer }) })
+  return /* @__PURE__ */ jsx21(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx21(Accordion, { variant: "separated", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
+    /* @__PURE__ */ jsx21(Accordion.Control, { children: /* @__PURE__ */ jsx21(SdText.Strong, { fz: "sm", children: item.question }) }),
+    /* @__PURE__ */ jsx21(Accordion.Panel, { children: /* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", children: item.answer }) })
   ] }, i)) }) }));
 }
 function Filled(_a4) {
   var _b = _a4, { items } = _b, boxProps = __objRest(_b, ["items"]);
-  return /* @__PURE__ */ jsx20(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx20(Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
-    /* @__PURE__ */ jsx20(Accordion.Control, { children: /* @__PURE__ */ jsx20(SdText.Strong, { fz: "sm", children: item.question }) }),
-    /* @__PURE__ */ jsx20(Accordion.Panel, { children: /* @__PURE__ */ jsx20(SdText.Body, { fz: "sm", children: item.answer }) })
+  return /* @__PURE__ */ jsx21(Box7, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx21(Accordion, { variant: "filled", radius: "md", children: items.map((item, i) => /* @__PURE__ */ jsxs9(Accordion.Item, { value: String(i), children: [
+    /* @__PURE__ */ jsx21(Accordion.Control, { children: /* @__PURE__ */ jsx21(SdText.Strong, { fz: "sm", children: item.question }) }),
+    /* @__PURE__ */ jsx21(Accordion.Panel, { children: /* @__PURE__ */ jsx21(SdText.Body, { fz: "sm", children: item.answer }) })
   ] }, i)) }) }));
 }
 function WithHeader(_a4) {
   var _b = _a4, { label, title, description, items } = _b, boxProps = __objRest(_b, ["label", "title", "description", "items"]);
   return /* @__PURE__ */ jsxs9(Stack9, __spreadProps(__spreadValues({ gap: "xl" }, boxProps), { children: [
     /* @__PURE__ */ jsxs9(Stack9, { gap: "xs", children: [
-      label && /* @__PURE__ */ jsx20(SdText.Eyebrow, { children: label }),
-      /* @__PURE__ */ jsx20(SdTitle.Section, { children: title }),
-      description && /* @__PURE__ */ jsx20(SdText.Body, { children: description })
+      label && /* @__PURE__ */ jsx21(SdText.Eyebrow, { children: label }),
+      /* @__PURE__ */ jsx21(SdTitle.Section, { children: title }),
+      description && /* @__PURE__ */ jsx21(SdText.Body, { children: description })
     ] }),
-    /* @__PURE__ */ jsx20(Default2, { items })
+    /* @__PURE__ */ jsx21(Default2, { items })
   ] }));
 }
 var SdFaq = {
@@ -831,10 +945,13 @@ var SdFaq = {
   /** 헤더 + 아코디언 조합 */
   WithHeader
 };
+var SdFaqDefault = SdFaq.Default;
+var SdFaqFilled = SdFaq.Filled;
+var SdFaqWithHeader = SdFaq.WithHeader;
 
 // ui/molecule/Cta.tsx
 import { Box as Box8, Center as Center2, Group as Group6, Stack as Stack10 } from "@mantine/core";
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 function Banner(_a4) {
   var _b = _a4, {
     label,
@@ -853,34 +970,17 @@ function Banner(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ jsx21(
-    Box8,
-    __spreadProps(__spreadValues({
-      bg: "primary.7",
-      py: { base: "xl", md: 80 },
-      px: { base: "md", md: "xl" }
-    }, boxProps), {
-      children: /* @__PURE__ */ jsx21(Center2, { children: /* @__PURE__ */ jsxs10(Stack10, { gap: "xl", align: "center", maw: 600, children: [
-        /* @__PURE__ */ jsxs10(Stack10, { gap: "sm", align: "center", children: [
-          label && /* @__PURE__ */ jsx21(SdText.Eyebrow, { c: "primary.3", children: label }),
-          /* @__PURE__ */ jsx21(SdTitle.Section, { c: "white", ta: "center", children: title }),
-          description && /* @__PURE__ */ jsx21(SdText.Body, { c: "primary.2", ta: "center", children: description })
-        ] }),
-        /* @__PURE__ */ jsxs10(Group6, { gap: "sm", children: [
-          /* @__PURE__ */ jsx21(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ jsx21(
-            SdButton.Ghost,
-            {
-              size: "md",
-              c: "primary.2",
-              onClick: onSecondary,
-              children: secondaryLabel
-            }
-          )
-        ] })
-      ] }) })
-    })
-  );
+  return /* @__PURE__ */ jsx22(Box8, __spreadProps(__spreadValues({ bg: "primary.7", py: { base: "xl", md: 80 }, px: { base: "md", md: "xl" } }, boxProps), { children: /* @__PURE__ */ jsx22(Center2, { children: /* @__PURE__ */ jsxs10(Stack10, { gap: "xl", align: "center", maw: 600, children: [
+    /* @__PURE__ */ jsxs10(Stack10, { gap: "sm", align: "center", children: [
+      label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { c: "primary.3", children: label }),
+      /* @__PURE__ */ jsx22(SdTitle.Section, { c: "white", ta: "center", children: title }),
+      description && /* @__PURE__ */ jsx22(SdText.Body, { c: "primary.2", ta: "center", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs10(Group6, { gap: "sm", children: [
+      /* @__PURE__ */ jsx22(SdButton.White, { size: "md", onClick: onPrimary, children: primaryLabel }),
+      secondaryLabel && /* @__PURE__ */ jsx22(SdButton.Ghost, { size: "md", c: "primary.2", onClick: onSecondary, children: secondaryLabel })
+    ] })
+  ] }) }) }));
 }
 function Subtle(_a4) {
   var _b = _a4, {
@@ -900,7 +1000,7 @@ function Subtle(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Box8,
     __spreadProps(__spreadValues({
       bg: "primary.0",
@@ -908,15 +1008,15 @@ function Subtle(_a4) {
       px: { base: "md", md: "xl" },
       style: { borderRadius: "var(--mantine-radius-lg)" }
     }, boxProps), {
-      children: /* @__PURE__ */ jsx21(Center2, { children: /* @__PURE__ */ jsxs10(Stack10, { gap: "lg", align: "center", maw: 560, children: [
+      children: /* @__PURE__ */ jsx22(Center2, { children: /* @__PURE__ */ jsxs10(Stack10, { gap: "lg", align: "center", maw: 560, children: [
         /* @__PURE__ */ jsxs10(Stack10, { gap: "sm", align: "center", children: [
-          label && /* @__PURE__ */ jsx21(SdText.Eyebrow, { children: label }),
-          /* @__PURE__ */ jsx21(SdTitle.Section, { ta: "center", children: title }),
-          description && /* @__PURE__ */ jsx21(SdText.Body, { ta: "center", children: description })
+          label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { children: label }),
+          /* @__PURE__ */ jsx22(SdTitle.Section, { ta: "center", children: title }),
+          description && /* @__PURE__ */ jsx22(SdText.Body, { ta: "center", children: description })
         ] }),
         /* @__PURE__ */ jsxs10(Group6, { gap: "sm", children: [
-          /* @__PURE__ */ jsx21(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ jsx21(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
+          /* @__PURE__ */ jsx22(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
+          secondaryLabel && /* @__PURE__ */ jsx22(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
         ] })
       ] }) })
     })
@@ -940,7 +1040,7 @@ function Inline(_a4) {
     "onPrimary",
     "onSecondary"
   ]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Box8,
     __spreadProps(__spreadValues({
       py: { base: "xl", md: 48 },
@@ -952,13 +1052,13 @@ function Inline(_a4) {
     }, boxProps), {
       children: /* @__PURE__ */ jsxs10(Group6, { justify: "space-between", align: "center", gap: "xl", children: [
         /* @__PURE__ */ jsxs10(Stack10, { gap: "xs", style: { flex: 1 }, children: [
-          label && /* @__PURE__ */ jsx21(SdText.Eyebrow, { children: label }),
-          /* @__PURE__ */ jsx21(SdTitle.Card, { children: title }),
-          description && /* @__PURE__ */ jsx21(SdText.Sub, { children: description })
+          label && /* @__PURE__ */ jsx22(SdText.Eyebrow, { children: label }),
+          /* @__PURE__ */ jsx22(SdTitle.Card, { children: title }),
+          description && /* @__PURE__ */ jsx22(SdText.Sub, { children: description })
         ] }),
         /* @__PURE__ */ jsxs10(Group6, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx21(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
-          secondaryLabel && /* @__PURE__ */ jsx21(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
+          /* @__PURE__ */ jsx22(SdButton.Primary, { size: "md", onClick: onPrimary, children: primaryLabel }),
+          secondaryLabel && /* @__PURE__ */ jsx22(SdButton.Outline, { size: "md", onClick: onSecondary, children: secondaryLabel })
         ] })
       ] })
     })
@@ -972,35 +1072,27 @@ var SdCta = {
   /** 좌우 분할 인라인 CTA */
   Inline
 };
+var SdCtaBanner = SdCta.Banner;
+var SdCtaSubtle = SdCta.Subtle;
+var SdCtaInline = SdCta.Inline;
 
 // ui/molecule/Solution.tsx
 import { useState } from "react";
-import {
-  Button as Button2,
-  Divider as Divider2,
-  Group as Group7,
-  Stack as Stack12,
-  ThemeIcon as ThemeIcon4
-} from "@mantine/core";
+import { Button as Button2, Divider as Divider2, Group as Group7, Stack as Stack12, ThemeIcon as ThemeIcon4 } from "@mantine/core";
 import Link3 from "next/link";
 
 // ui/molecule/SolutionCard.tsx
-import {
-  Button,
-  Card as Card6,
-  SimpleGrid as SimpleGrid4,
-  Stack as Stack11
-} from "@mantine/core";
+import { Button, Card as Card6, SimpleGrid as SimpleGrid4, Stack as Stack11 } from "@mantine/core";
 import Link2 from "next/link";
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function SolutionCardItem(_a4) {
   var _b = _a4, { item, onSelect } = _b, cardProps = __objRest(_b, ["item", "onSelect"]);
   var _a5, _b2;
-  return /* @__PURE__ */ jsx22(Card6, __spreadProps(__spreadValues({ withBorder: true }, cardProps), { children: /* @__PURE__ */ jsxs11(Stack11, { gap: "md", children: [
+  return /* @__PURE__ */ jsx23(Card6, __spreadProps(__spreadValues({ withBorder: true }, cardProps), { children: /* @__PURE__ */ jsxs11(Stack11, { gap: "md", children: [
     item.icon,
-    /* @__PURE__ */ jsx22(SdBadge.Primary, { children: item.category }),
-    /* @__PURE__ */ jsx22(SdTitle.Card, { children: item.title }),
-    /* @__PURE__ */ jsx22(SdText.Body, { children: item.description }),
+    /* @__PURE__ */ jsx23(SdBadge.Primary, { children: item.category }),
+    /* @__PURE__ */ jsx23(SdTitle.Card, { children: item.title }),
+    /* @__PURE__ */ jsx23(SdText.Body, { children: item.description }),
     item.href ? /* @__PURE__ */ jsxs11(Button, { variant: "subtle", color: "slate", component: Link2, href: item.href, children: [
       (_a5 = item.ctaLabel) != null ? _a5 : "\uC790\uC138\uD788 \uBCF4\uAE30",
       " \u2192"
@@ -1011,7 +1103,7 @@ function SolutionCardItem(_a4) {
   ] }) }));
 }
 function Grid3({ items, cols = { base: 1, sm: 2, md: 3 }, onSelect }) {
-  return /* @__PURE__ */ jsx22(SimpleGrid4, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx22(SolutionCardItem, { item, onSelect }, i)) });
+  return /* @__PURE__ */ jsx23(SimpleGrid4, { cols, spacing: "xl", children: items.map((item, i) => /* @__PURE__ */ jsx23(SolutionCardItem, { item, onSelect }, i)) });
 }
 var SdSolutionCard = {
   /** 단일 compact 카드 */
@@ -1019,29 +1111,31 @@ var SdSolutionCard = {
   /** 카드 그리드 */
   Grid: Grid3
 };
+var SdSolutionCardItem = SdSolutionCard.Item;
+var SdSolutionCardGrid = SdSolutionCard.Grid;
 
 // ui/molecule/Solution.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function Filtered({ items, allLabel = "\uC804\uCCB4", cols, onSelect }) {
   const categories = ["all", ...Array.from(new Set(items.map((i) => i.category)))];
   const [active, setActive] = useState("all");
   const filtered = active === "all" ? items : items.filter((i) => i.category === active);
   return /* @__PURE__ */ jsxs12(Stack12, { gap: "xl", children: [
-    /* @__PURE__ */ jsx23(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ jsx23(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ jsx23(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
-    /* @__PURE__ */ jsx23(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
+    /* @__PURE__ */ jsx24(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ jsx24(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ jsx24(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
+    /* @__PURE__ */ jsx24(SdSolutionCard.Grid, { items: filtered, cols, onSelect })
   ] });
 }
 function List({ items, onSelect }) {
-  return /* @__PURE__ */ jsx23(Stack12, { gap: 0, children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx24(Stack12, { gap: 0, children: items.map((item, i) => {
     var _a4, _b;
     return /* @__PURE__ */ jsxs12("div", { children: [
-      i > 0 && /* @__PURE__ */ jsx23(Divider2, {}),
+      i > 0 && /* @__PURE__ */ jsx24(Divider2, {}),
       /* @__PURE__ */ jsxs12(Group7, { align: "flex-start", py: "lg", gap: "lg", children: [
-        item.icon && /* @__PURE__ */ jsx23(ThemeIcon4, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
+        item.icon && /* @__PURE__ */ jsx24(ThemeIcon4, { variant: "light", color: "primary", size: "xl", radius: "md", children: item.icon }),
         /* @__PURE__ */ jsxs12(Stack12, { gap: "xs", style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx23(SdBadge.Primary, { children: item.category }),
-          /* @__PURE__ */ jsx23(SdTitle.Card, { children: item.title }),
-          /* @__PURE__ */ jsx23(SdText.Body, { children: item.description }),
+          /* @__PURE__ */ jsx24(SdBadge.Primary, { children: item.category }),
+          /* @__PURE__ */ jsx24(SdTitle.Card, { children: item.title }),
+          /* @__PURE__ */ jsx24(SdText.Body, { children: item.description }),
           item.href ? /* @__PURE__ */ jsxs12(
             Button2,
             {
@@ -1077,10 +1171,12 @@ var SdSolution = {
   /** 수평 리스트 레이아웃 (상세 탐색용) */
   List
 };
+var SdSolutionFiltered = SdSolution.Filtered;
+var SdSolutionList = SdSolution.List;
 
 // ui/molecule/Clients.tsx
 import { Anchor, Box as Box9, SimpleGrid as SimpleGrid5, Tooltip } from "@mantine/core";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var grayStyle = {
   filter: "grayscale(1) opacity(0.5)",
   transition: "filter 0.25s"
@@ -1089,7 +1185,7 @@ var colorStyle = {
   filter: "grayscale(0) opacity(1)"
 };
 function LogoImage({ client, height }) {
-  return /* @__PURE__ */ jsx24(Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ jsx24(Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(Tooltip, { label: client.name, withArrow: true, children: /* @__PURE__ */ jsx25(Anchor, { href: client.url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx25(
     "img",
     {
       src: client.logo,
@@ -1105,14 +1201,26 @@ function Grid4({
   cols = { base: 2, sm: 3, md: 4, lg: 6 },
   logoHeight = 40
 }) {
-  return /* @__PURE__ */ jsx24(SimpleGrid5, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ jsx24(Box9, { style: { display: "flex", alignItems: "center", justifyContent: "center", padding: "12px 8px" }, children: /* @__PURE__ */ jsx24(LogoImage, { client, height: logoHeight }) }, i)) });
+  return /* @__PURE__ */ jsx25(SimpleGrid5, { cols, spacing: "xl", children: items.map((client, i) => /* @__PURE__ */ jsx25(
+    Box9,
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "12px 8px"
+      },
+      children: /* @__PURE__ */ jsx25(LogoImage, { client, height: logoHeight })
+    },
+    i
+  )) });
 }
 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__ */ jsxs13(Box9, { style: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx24("style", { children: KEYFRAME }),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25("style", { children: KEYFRAME }),
+    /* @__PURE__ */ jsx25(
       Box9,
       {
         style: {
@@ -1123,12 +1231,14 @@ function Marquee({ items, speed = 40, logoHeight = 36, gap = 64 }) {
           animation: `sd-clients-marquee ${speed}s linear infinite`
         },
         onMouseEnter: (e) => {
+          ;
           e.currentTarget.style.animationPlayState = "paused";
         },
         onMouseLeave: (e) => {
+          ;
           e.currentTarget.style.animationPlayState = "running";
         },
-        children: doubled.map((client, i) => /* @__PURE__ */ jsx24(LogoImage, { client, height: logoHeight }, i))
+        children: doubled.map((client, i) => /* @__PURE__ */ jsx25(LogoImage, { client, height: logoHeight }, i))
       }
     )
   ] });
@@ -1145,10 +1255,10 @@ var SdClientsMarquee = Marquee;
 // ui/molecule/Map.tsx
 import { useState as useState2 } from "react";
 import { Box as Box10, Stack as Stack13 } from "@mantine/core";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function MapFrame({ address, height }) {
   return /* @__PURE__ */ jsxs14(Stack13, { gap: "xs", children: [
-    /* @__PURE__ */ jsx25(Box10, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(Box10, { style: { borderRadius: "var(--mantine-radius-md)", overflow: "hidden", height }, children: /* @__PURE__ */ jsx26(
       "iframe",
       {
         src: address.embbedUrl,
@@ -1172,18 +1282,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__ */ jsx25(Box10, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx25(MapFrame, { address, height }) }));
+  return /* @__PURE__ */ jsx26(Box10, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsx26(MapFrame, { address, height }) }));
 }
 function Tabs2({ addresses, height = 400 }) {
   var _a4, _b, _c;
   const mapped = addresses.filter((a) => a.embbedUrl);
   const [active, setActive] = useState2((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
   if (mapped.length === 0) return null;
-  if (mapped.length === 1) return /* @__PURE__ */ jsx25(MapFrame, { address: mapped[0], height });
+  if (mapped.length === 1) return /* @__PURE__ */ jsx26(MapFrame, { address: mapped[0], height });
   const current = (_c = mapped.find((a) => a.label === active)) != null ? _c : mapped[0];
   return /* @__PURE__ */ jsxs14(Stack13, { gap: "md", children: [
-    /* @__PURE__ */ jsx25(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ jsx25(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ jsx25(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
-    /* @__PURE__ */ jsx25(MapFrame, { address: current, height })
+    /* @__PURE__ */ jsx26(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : mapped[0].label), children: /* @__PURE__ */ jsx26(SdTabs.Pills.List, { children: mapped.map((addr) => /* @__PURE__ */ jsx26(SdTabs.Pills.Tab, { value: addr.label, children: addr.label }, addr.label)) }) }),
+    /* @__PURE__ */ jsx26(MapFrame, { address: current, height })
   ] });
 }
 var SdMap = {
@@ -1199,7 +1309,7 @@ var SdMapTabs = Tabs2;
 import { Carousel } from "@mantine/carousel";
 import { Anchor as Anchor2, Box as Box11, Group as Group8, Stack as Stack14 } from "@mantine/core";
 import { IconArrowNarrowRight } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var variantMap = {
   primary: SdButton.Primary,
   secondary: SdButton.Secondary,
@@ -1209,12 +1319,12 @@ var variantMap = {
 function CtaButton({ cta }) {
   var _a4;
   const Button3 = variantMap[(_a4 = cta.variant) != null ? _a4 : "primary"];
-  return /* @__PURE__ */ jsx26(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx26(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx26(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx26(Button3, { size: "md", children: cta.label }) });
+  return /* @__PURE__ */ jsx27(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx27(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx27(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx27(Button3, { size: "md", children: cta.label }) });
 }
 function HeroCarousel({ slides, children }) {
-  if (children) return /* @__PURE__ */ jsx26(Fragment3, { children });
+  if (children) return /* @__PURE__ */ jsx27(Fragment3, { children });
   const filterdSlides = filterAndSort(slides);
-  return /* @__PURE__ */ jsx26(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx26(Carousel.Slide, { children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx27(Carousel.Slide, { children: /* @__PURE__ */ jsx27(
     Box11,
     {
       style: {
@@ -1227,7 +1337,7 @@ function HeroCarousel({ slides, children }) {
         justifyContent: "center"
       },
       children: /* @__PURE__ */ jsxs15(Stack14, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           SdTextBox.Hero,
           {
             title: slide.title,
@@ -1236,137 +1346,199 @@ function HeroCarousel({ slides, children }) {
             align: "center"
           }
         ),
-        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx26(Group8, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx26(CtaButton, { cta }, cta.href)) })
+        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx27(Group8, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx27(CtaButton, { cta }, cta.href)) })
       ] })
     }
   ) }, i)) });
 }
 
 // ui/organism/Header.tsx
-import { Anchor as Anchor3, Drawer, Group as Group9, Burger, Stack as Stack15 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Box as Box12, Burger, Drawer, Group as Group9, NavLink, Stack as Stack15 } from "@mantine/core";
+import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var BAR_HEIGHT = 60;
 function SdHeader({ navItems, loginFlag, children }) {
   const [opened, { toggle, close }] = useDisclosure();
-  const visibleTopItems = navItems.filter((item) => item.isShow && !item.parentId).sort((a, b) => a.order - b.order);
+  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);
+  const { hovered, ref: hoverRef } = useHover();
+  const { focused, ref: focusRef } = useFocusWithin();
+  const rootRef = useMergedRef(hoverRef, focusRef);
+  const expanded = hasAnyChildren && (hovered || focused);
   return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx27(SdContainer, { h: "100%", children: /* @__PURE__ */ jsxs16(Group9, { justify: "space-between", h: "100%", children: [
-      /* @__PURE__ */ jsx27(Logo, {}),
-      /* @__PURE__ */ jsx27(Group9, { gap: "xl", visibleFrom: "sm", children: visibleTopItems.map((item) => /* @__PURE__ */ jsx27(Anchor3, { href: item.href, c: "slate.7", fw: 500, underline: "never", fz: 15, children: item.label }, item.id)) }),
-      /* @__PURE__ */ jsx27(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-      loginFlag && /* @__PURE__ */ jsxs16(Group9, { gap: "sm", visibleFrom: "sm", children: [
-        /* @__PURE__ */ jsx27(SdButton.Ghost, { size: "sm", children: "\uB85C\uADF8\uC778" }),
-        /* @__PURE__ */ jsx27(SdButton.Primary, { size: "sm", children: "\uBB34\uB8CC \uC2DC\uC791" })
-      ] }),
-      children
-    ] }) }),
-    /* @__PURE__ */ jsx27(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs16(Stack15, { children: [
-      visibleTopItems.map((item) => /* @__PURE__ */ jsx27(Anchor3, { href: item.href, c: "slate.7", fw: 500, underline: "never", fz: 16, onClick: close, children: item.label }, item.id)),
-      loginFlag && /* @__PURE__ */ jsxs16(Stack15, { gap: "xs", mt: "md", children: [
-        /* @__PURE__ */ jsx27(SdButton.Ghost, { size: "sm", children: "\uB85C\uADF8\uC778" }),
-        /* @__PURE__ */ jsx27(SdButton.Primary, { size: "sm", children: "\uBB34\uB8CC \uC2DC\uC791" })
-      ] })
+    /* @__PURE__ */ jsx28(
+      Box12,
+      {
+        ref: rootRef,
+        pos: "relative",
+        bg: "var(--mantine-color-body)",
+        style: {
+          boxShadow: expanded ? "var(--mantine-shadow-md)" : void 0,
+          borderBottom: expanded ? "1px solid var(--mantine-color-slate-2)" : void 0,
+          transition: "box-shadow 0.15s"
+        },
+        children: /* @__PURE__ */ jsx28(SdContainer, { children: /* @__PURE__ */ jsxs16(Group9, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx28(Group9, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx28(Logo, {}) }),
+          /* @__PURE__ */ jsx28(Group9, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+            const kids = childrenOf(item.id);
+            return /* @__PURE__ */ jsxs16(Stack15, { gap: 0, align: "center", children: [
+              /* @__PURE__ */ jsx28(Group9, { h: BAR_HEIGHT, align: "center", children: item.href ? /* @__PURE__ */ jsx28(SdLink.Body, { href: item.href, children: item.label }) : /* @__PURE__ */ jsx28(SdText.Strong, { children: item.label }) }),
+              kids.length > 0 && /*
+                Mantine Collapse를 쓰지 않는다 — 접힐 때 display:none이 되어
+                하위 링크가 폭 계산에서 빠졌다가 펼칠 때 다시 들어오면서
+                컬럼 폭(=상단 nav 간격)이 튄다.
+                height 0 + overflow hidden은 폭 기여를 유지하므로 간격이 고정된다.
+                visibility:hidden이 접힌 상태의 링크를 탭 순서에서도 빼준다.
+              */
+              /* @__PURE__ */ jsx28(
+                Box12,
+                {
+                  "aria-hidden": !expanded,
+                  style: {
+                    height: expanded ? "auto" : 0,
+                    overflow: "hidden",
+                    opacity: expanded ? 1 : 0,
+                    visibility: expanded ? "visible" : "hidden",
+                    transition: "opacity 0.15s ease"
+                  },
+                  children: /* @__PURE__ */ jsx28(Stack15, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => /* @__PURE__ */ jsx28(SdLink.Sub, { href: kid.href, children: kid.label }, kid.id)) })
+                }
+              )
+            ] }, item.id);
+          }) }),
+          /* @__PURE__ */ jsxs16(Group9, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx28(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+            loginFlag && /* @__PURE__ */ jsx28(Group9, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx28(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) }),
+            children
+          ] })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx28(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs16(Stack15, { gap: 0, children: [
+      topItems.map((item) => {
+        const kids = childrenOf(item.id);
+        if (kids.length === 0) {
+          return /* @__PURE__ */ jsx28(Box12, { px: "sm", py: 8, children: /* @__PURE__ */ jsx28(SdLink.Body, { href: item.href, onClick: close, children: item.label }) }, item.id);
+        }
+        return /* @__PURE__ */ jsx28(
+          NavLink,
+          {
+            label: item.label,
+            href: item.href,
+            childrenOffset: 28,
+            onClick: kids.length > 0 ? void 0 : close,
+            children: kids.map((kid) => /* @__PURE__ */ jsx28(NavLink, { label: kid.label, href: kid.href, onClick: close }, kid.id))
+          },
+          item.id
+        );
+      }),
+      loginFlag && /* @__PURE__ */ jsx28(Stack15, { gap: "xs", mt: "md", children: /* @__PURE__ */ jsx28(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
     ] }) })
   ] });
 }
 
 // ui/organism/Footer.tsx
-import { Anchor as Anchor4, Box as Box12, Divider as Divider3, Grid as Grid5, Group as Group10, Stack as Stack16 } from "@mantine/core";
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { ActionIcon, Box as Box13, Divider as Divider3, Flex, Grid as Grid5, Group as Group10, SimpleGrid as SimpleGrid6, Stack as Stack16 } from "@mantine/core";
+import {
+  IconBrandFacebook,
+  IconBrandGithub,
+  IconBrandInstagram,
+  IconBrandLinkedin,
+  IconBrandX,
+  IconBrandYoutube,
+  IconWorld
+} from "@tabler/icons-react";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function FooterNavColumns({ items }) {
   const topLevel = items.filter((item) => !item.parentId);
   const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
-  return /* @__PURE__ */ jsx28(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx28(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack16, { gap: "sm", children: [
-    /* @__PURE__ */ jsx28(SdText.Strong, { fz: "sm", children: group.label }),
-    getChildren(group.id).map((link) => /* @__PURE__ */ jsx28(
-      Anchor4,
+  return /* @__PURE__ */ jsx29(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx29(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack16, { gap: "sm", children: [
+    /* @__PURE__ */ jsx29(SdText.Sub, { children: group.label }),
+    getChildren(group.id).map((link) => /* @__PURE__ */ jsx29(SdLink.Hint, { href: link.href, children: link.label }, link.id))
+  ] }) }, group.id)) });
+}
+var SOCIAL_ICONS = {
+  x: IconBrandX,
+  youtube: IconBrandYoutube,
+  instagram: IconBrandInstagram,
+  facebook: IconBrandFacebook,
+  linkedin: IconBrandLinkedin,
+  github: IconBrandGithub,
+  blog: IconWorld
+};
+function FooterSocials({ items }) {
+  return /* @__PURE__ */ jsx29(Group10, { gap: 0, wrap: "nowrap", children: items.map((item) => {
+    var _a4, _b;
+    const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : IconWorld;
+    return /* @__PURE__ */ jsx29(
+      ActionIcon,
       {
-        href: link.href,
-        fz: "sm",
-        c: "slate.6",
-        underline: "never",
-        style: { transition: "color 0.15s" },
-        onMouseEnter: (e) => {
-          e.currentTarget.style.color = "var(--mantine-color-primary-6)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.color = "";
-        },
-        children: link.label
+        component: "a",
+        href: item.url,
+        target: "_blank",
+        rel: "noreferrer",
+        size: "lg",
+        color: "gray",
+        variant: "subtle",
+        "aria-label": (_b = item.label) != null ? _b : item.platform,
+        children: /* @__PURE__ */ jsx29(Icon, { size: 18, stroke: 1.5 })
       },
-      link.id
-    ))
-  ] }) }, group.id)) });
+      item.url
+    );
+  }) });
+}
+function InfoCell({ label, children }) {
+  return /* @__PURE__ */ jsxs17(Group10, { gap: 6, wrap: "nowrap", align: "baseline", children: [
+    /* @__PURE__ */ jsx29(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
+    typeof children === "string" ? /* @__PURE__ */ jsx29(SdText.Sub, { children }) : children
+  ] });
 }
 function FooterCompanyInfo({ company }) {
   const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
-  return /* @__PURE__ */ jsxs17(Group10, { gap: "xs", wrap: "wrap", children: [
-    /* @__PURE__ */ jsx28(SdText.Sub, { children: company.name }),
-    /* @__PURE__ */ jsx28(SdText.Sub, { c: "slate.4", children: "|" }),
-    /* @__PURE__ */ jsxs17(SdText.Sub, { children: [
-      "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638 ",
-      company.registrationNumber
-    ] }),
-    sortedAddresses.map((addr) => /* @__PURE__ */ jsxs17(Group10, { gap: "xs", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx28(SdText.Sub, { c: "slate.4", children: "|" }),
-      /* @__PURE__ */ jsx28(SdText.Sub, { children: addr.address })
-    ] }, addr.label)),
-    /* @__PURE__ */ jsx28(SdText.Sub, { c: "slate.4", children: "|" }),
-    /* @__PURE__ */ jsxs17(Anchor4, { href: `tel:${company.tel}`, fz: "xs", c: "slate.5", underline: "never", children: [
-      "Tel ",
-      company.tel
-    ] }),
-    company.fax && /* @__PURE__ */ jsxs17(Fragment5, { children: [
-      /* @__PURE__ */ jsx28(SdText.Sub, { c: "slate.4", children: "|" }),
-      /* @__PURE__ */ jsxs17(SdText.Sub, { children: [
-        "Fax ",
-        company.fax
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx28(SdText.Sub, { c: "slate.4", children: "|" }),
-    /* @__PURE__ */ jsx28(Anchor4, { href: `mailto:${company.email}`, fz: "xs", c: "slate.5", underline: "never", children: company.email })
+  return /* @__PURE__ */ jsxs17(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
+    /* @__PURE__ */ jsx29(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
+    /* @__PURE__ */ jsx29(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
+    sortedAddresses.map((addr) => /* @__PURE__ */ jsx29(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
+    /* @__PURE__ */ jsx29(InfoCell, { label: "Tel", children: /* @__PURE__ */ jsx29(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
+    company.fax && /* @__PURE__ */ jsx29(InfoCell, { label: "Fax", children: company.fax }),
+    /* @__PURE__ */ jsx29(InfoCell, { label: "Email", children: /* @__PURE__ */ jsx29(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
   ] });
 }
 function SdFooter({ company, navItems, policyLinks, description }) {
   const visibleNav = filterAndSort(navItems);
   const visiblePolicy = filterAndSort(policyLinks);
-  return /* @__PURE__ */ jsx28(Box12, { component: "footer", py: "xl", children: /* @__PURE__ */ jsxs17(SdContainer, { children: [
-    /* @__PURE__ */ jsxs17(Grid5, { style: { "--grid-gutter": "48px" }, children: [
-      /* @__PURE__ */ jsx28(Grid5.Col, { span: { base: 12, md: 4 }, children: /* @__PURE__ */ jsxs17(Stack16, { gap: "md", children: [
-        /* @__PURE__ */ jsx28(Logo, { size: "sm" }),
-        description && /* @__PURE__ */ jsx28(SdText.Body, { c: "slate.4", fz: "sm", children: description })
-      ] }) }),
-      visibleNav.length > 0 && /* @__PURE__ */ jsx28(Grid5.Col, { span: { base: 12, md: 8 }, children: /* @__PURE__ */ jsx28(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx28(FooterNavColumns, { items: visibleNav }) }) })
+  return /* @__PURE__ */ jsx29(Box13, { component: "footer", children: /* @__PURE__ */ jsx29(SdContainer, { children: /* @__PURE__ */ jsxs17(Stack16, { children: [
+    /* @__PURE__ */ jsx29(Logo, { size: "sm" }),
+    description && /* @__PURE__ */ jsx29(SdText.Sub, { children: description }),
+    /* @__PURE__ */ jsxs17(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
+      /* @__PURE__ */ jsx29(Box13, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx29(FooterCompanyInfo, { company }) }),
+      visibleNav.length > 0 && /* @__PURE__ */ jsx29(Box13, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx29(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx29(FooterNavColumns, { items: visibleNav }) }) })
     ] }),
-    /* @__PURE__ */ jsx28(Divider3, {}),
-    /* @__PURE__ */ jsx28(FooterCompanyInfo, { company }),
-    /* @__PURE__ */ jsxs17(Group10, { justify: "space-between", wrap: "wrap", gap: "xs", mt: "md", children: [
-      /* @__PURE__ */ jsxs17(SdText.Sub, { c: "slate.5", children: [
+    /* @__PURE__ */ jsx29(Divider3, {}),
+    /* @__PURE__ */ jsxs17(Group10, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ jsxs17(SdText.Sub, { children: [
         "\xA9 ",
         company.copyrightYear,
         " ",
         company.name,
         ". All rights reserved."
       ] }),
-      visiblePolicy.length > 0 && /* @__PURE__ */ jsx28(Group10, { gap: "lg", children: visiblePolicy.map((item) => /* @__PURE__ */ jsx28(
-        Anchor4,
-        {
-          href: item.href,
-          fz: "xs",
-          fw: item.highlight ? 700 : 400,
-          c: item.highlight ? "white" : "slate.5",
-          underline: "never",
-          children: item.label
-        },
-        item.id
-      )) })
+      /* @__PURE__ */ jsxs17(Group10, { gap: "lg", wrap: "wrap", children: [
+        visiblePolicy.length > 0 && /* @__PURE__ */ jsx29(Group10, { gap: "lg", children: visiblePolicy.map((item) => {
+          const Link4 = item.highlight ? SdLink.Strong : SdLink.Sub;
+          return /* @__PURE__ */ jsx29(Link4, { href: item.href, children: item.label }, item.id);
+        }) }),
+        company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx29(FooterSocials, { items: company.socials })
+      ] })
     ] })
-  ] }) });
+  ] }) }) });
 }
 
 // ui/organism/FeatureSection.tsx
 import { Stack as Stack17 } from "@mantine/core";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function SdFeatureSection(_a4) {
   var _b = _a4, {
     label,
@@ -1383,8 +1555,8 @@ function SdFeatureSection(_a4) {
     "cols",
     "py"
   ]);
-  return /* @__PURE__ */ jsx29(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs18(Stack17, { gap: "xl", children: [
-    /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs18(Stack17, { gap: "xl", children: [
+    /* @__PURE__ */ jsx30(
       SdTextBox.Section,
       {
         label,
@@ -1395,13 +1567,13 @@ function SdFeatureSection(_a4) {
         align: "center"
       }
     ),
-    /* @__PURE__ */ jsx29(SdFeatures, { items, cols })
+    /* @__PURE__ */ jsx30(SdFeatures, { items, cols })
   ] }) }));
 }
 
 // ui/organism/TimelineSection.tsx
 import { Center as Center3, Stack as Stack18 } from "@mantine/core";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function SdTimelineSection(_a4) {
   var _b = _a4, {
     label,
@@ -1416,22 +1588,15 @@ function SdTimelineSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ jsx30(Center3, { children: /* @__PURE__ */ jsxs19(Stack18, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
-    /* @__PURE__ */ jsx30(
-      SdTextBox.Section,
-      {
-        label,
-        title,
-        description
-      }
-    ),
-    /* @__PURE__ */ jsx30(Center3, { children: /* @__PURE__ */ jsx30(SdTimeline, { items }) })
+  return /* @__PURE__ */ jsx31(Center3, { children: /* @__PURE__ */ jsxs19(Stack18, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
+    /* @__PURE__ */ jsx31(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ jsx31(Center3, { children: /* @__PURE__ */ jsx31(SdTimeline, { items }) })
   ] })) });
 }
 
 // ui/organism/StepsSection.tsx
 import { Stack as Stack19 } from "@mantine/core";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 function SdStepsSection(_a4) {
   var _b = _a4, {
     label,
@@ -1446,17 +1611,17 @@ function SdStepsSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ jsx31(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs20(Stack19, { gap: "xl", children: [
-    (label || title || description) && /* @__PURE__ */ jsx31(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ jsx31(SdSteps.Bubble, { items })
+  return /* @__PURE__ */ jsx32(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs20(Stack19, { gap: "xl", children: [
+    (label || title || description) && /* @__PURE__ */ jsx32(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ jsx32(SdSteps.Bubble, { items })
   ] }) }));
 }
 
 // ui/organism/ErrorView.tsx
 import { Center as Center4, Group as Group11, Stack as Stack20, Text as Text2 } from "@mantine/core";
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 function StatusCode({ code }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     Text2,
     {
       fz: 160,
@@ -1470,15 +1635,15 @@ function StatusCode({ code }) {
   );
 }
 function Page({ error, onReset, onHome }) {
-  return /* @__PURE__ */ jsx32(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx32(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack20, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ jsx32(StatusCode, { code: "500" }),
+  return /* @__PURE__ */ jsx33(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx33(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack20, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ jsx33(StatusCode, { code: "500" }),
     /* @__PURE__ */ jsxs21(Stack20, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ jsx32(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
-      /* @__PURE__ */ jsx32(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__ */ jsx33(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
+      /* @__PURE__ */ jsx33(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
     ] }),
     /* @__PURE__ */ jsxs21(Group11, { gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx32(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
-      onHome && /* @__PURE__ */ jsx32(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
+      /* @__PURE__ */ jsx33(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+      onHome && /* @__PURE__ */ jsx33(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
     ] })
   ] }) }) });
 }
@@ -1490,15 +1655,15 @@ function NotFound({
   },
   onBack = () => window.history.back()
 }) {
-  return /* @__PURE__ */ jsx32(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx32(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack20, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ jsx32(StatusCode, { code: "404" }),
+  return /* @__PURE__ */ jsx33(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx33(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack20, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ jsx33(StatusCode, { code: "404" }),
     /* @__PURE__ */ jsxs21(Stack20, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ jsx32(SdTitle.Section, { children: title }),
-      /* @__PURE__ */ jsx32(SdText.Body, { maw: 480, children: description })
+      /* @__PURE__ */ jsx33(SdTitle.Section, { children: title }),
+      /* @__PURE__ */ jsx33(SdText.Body, { maw: 480, children: description })
     ] }),
     /* @__PURE__ */ jsxs21(Group11, { gap: "sm", justify: "center", children: [
-      onHome && /* @__PURE__ */ jsx32(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
-      onBack && /* @__PURE__ */ jsx32(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
+      onHome && /* @__PURE__ */ jsx33(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
+      onBack && /* @__PURE__ */ jsx33(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
     ] })
   ] }) }) });
 }
@@ -1508,127 +1673,165 @@ var SdErrorView = {
   /** app/not-found.tsx — 404 Not Found */
   NotFound
 };
+var SdErrorViewPage = SdErrorView.Page;
+var SdErrorViewNotFound = SdErrorView.NotFound;
 
 // ui/template/MainLayout.tsx
 import { AppShell } from "@mantine/core";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
-function MainLayout({ children, navItems, companyInfo }) {
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+function MainLayout({
+  children,
+  navItems,
+  companyInfo
+}) {
   return /* @__PURE__ */ jsxs22(AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ jsx33(AppShell.Header, { children: /* @__PURE__ */ jsx33(SdHeader, { navItems }) }),
-    /* @__PURE__ */ jsx33(AppShell.Main, { children }),
-    /* @__PURE__ */ jsx33(SdFooter, { company: companyInfo })
+    /* @__PURE__ */ jsx34(AppShell.Header, { children: /* @__PURE__ */ jsx34(SdHeader, { navItems, loginFlag: true }) }),
+    /* @__PURE__ */ jsx34(AppShell.Main, { children }),
+    /* @__PURE__ */ jsx34(SdFooter, { company: companyInfo, navItems })
   ] });
 }
 
 // ui/template/PageLayout.tsx
-import { Box as Box14, Divider as Divider4, Space } from "@mantine/core";
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Box as Box15, Divider as Divider4, Space, Stack as Stack21 } from "@mantine/core";
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 function Content({ children }) {
-  return /* @__PURE__ */ jsx34(SdContainer, { py: "xl", children });
+  return /* @__PURE__ */ jsx35(SdContainer, { py: "xl", children: /* @__PURE__ */ jsx35(Stack21, { gap: "xl", children }) });
 }
 function LayoutGap() {
-  return /* @__PURE__ */ jsx34(Space, { h: 48 });
+  return /* @__PURE__ */ jsx35(Space, { h: 48 });
 }
 function Minimal({ label, title, description, children }) {
-  return /* @__PURE__ */ jsx34(Fragment6, { children: /* @__PURE__ */ jsxs23(Plain2, { children: [
-    /* @__PURE__ */ jsx34(
-      SdTextBox.Section,
-      {
-        label,
-        title,
-        description: description != null ? description : "",
-        mb: "xl"
-      }
-    ),
-    /* @__PURE__ */ jsx34(Divider4, {}),
+  return /* @__PURE__ */ jsx35(Fragment6, { children: /* @__PURE__ */ jsxs23(Plain2, { children: [
+    /* @__PURE__ */ jsx35(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
+    /* @__PURE__ */ jsx35(Divider4, {}),
     children
   ] }) });
 }
 function Plain2({ children }) {
   return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsx34(LayoutGap, {}),
-    /* @__PURE__ */ jsx34(Content, { children })
+    /* @__PURE__ */ jsx35(LayoutGap, {}),
+    /* @__PURE__ */ jsx35(Content, { children })
   ] });
 }
 function Image2({ image, label, title, description, children }) {
   return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsxs23(Box14, { style: {
-      position: "relative",
-      minHeight: "30svh",
-      display: "flex",
-      alignItems: "center",
-      backgroundImage: image ? `url(${image})` : void 0,
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      backgroundColor: "var(--mantine-color-slate-9)"
-    }, children: [
-      /* @__PURE__ */ jsx34(Box14, { style: {
-        position: "absolute",
-        inset: 0,
-        background: "rgba(0, 0, 0, 0.55)"
-      } }),
-      /* @__PURE__ */ jsx34(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx34(
-        Box14,
-        {
-          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__ */ jsx34(
-            SdTextBox.Hero,
+    /* @__PURE__ */ jsxs23(
+      Box15,
+      {
+        style: {
+          position: "relative",
+          minHeight: "30svh",
+          display: "flex",
+          alignItems: "center",
+          backgroundImage: image ? `url(${image})` : void 0,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundColor: "var(--mantine-color-slate-9)"
+        },
+        children: [
+          /* @__PURE__ */ jsx35(
+            Box15,
             {
-              label,
-              title,
-              description,
-              ta: "left",
-              align: "flex-start"
+              style: {
+                position: "absolute",
+                inset: 0,
+                background: "rgba(0, 0, 0, 0.55)"
+              }
             }
-          )
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx34(Content, { children })
+          ),
+          /* @__PURE__ */ jsx35(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
+            Box15,
+            {
+              py: 48,
+              px: 40,
+              maw: 420,
+              style: {
+                backdropFilter: "blur(24px)",
+                WebkitBackdropFilter: "blur(24px)",
+                background: "rgba(255,255,255,0.10)",
+                borderRadius: "var(--mantine-radius-md)",
+                border: "1px solid rgba(255,255,255,0.18)"
+              },
+              children: /* @__PURE__ */ jsx35(
+                SdTextBox.Hero,
+                {
+                  label,
+                  title,
+                  description,
+                  ta: "left",
+                  align: "flex-start"
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx35(Content, { children })
   ] });
 }
 function Brand({ label, title, description, children }) {
   return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsxs23(Box14, { style: {
-      position: "relative",
-      minHeight: "40svh",
-      display: "flex",
-      alignItems: "center",
-      overflow: "hidden",
-      background: "linear-gradient(135deg, var(--mantine-color-primary-8) 0%, var(--mantine-color-primary-6) 50%, var(--mantine-color-primary-4) 100%)"
-    }, children: [
-      /* @__PURE__ */ jsx34(Box14, { style: {
-        position: "absolute",
-        top: -80,
-        right: -80,
-        width: 360,
-        height: 360,
-        borderRadius: "50%",
-        background: "rgba(255,255,255,0.06)",
-        pointerEvents: "none"
-      } }),
-      /* @__PURE__ */ jsx34(Box14, { style: {
-        position: "absolute",
-        bottom: -60,
-        left: -60,
-        width: 240,
-        height: 240,
-        borderRadius: "50%",
-        background: "rgba(255,255,255,0.04)",
-        pointerEvents: "none"
-      } }),
-      /* @__PURE__ */ jsx34(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx34(SdTextBox.Hero, { label, title, description, ta: "center", align: "center", maw: 640, mx: "auto", pt: 80, pb: 64 }) })
-    ] }),
-    /* @__PURE__ */ jsx34(Content, { children })
+    /* @__PURE__ */ jsxs23(
+      Box15,
+      {
+        style: {
+          position: "relative",
+          minHeight: "40svh",
+          display: "flex",
+          alignItems: "center",
+          overflow: "hidden",
+          background: "linear-gradient(135deg, var(--mantine-color-primary-8) 0%, var(--mantine-color-primary-6) 50%, var(--mantine-color-primary-4) 100%)"
+        },
+        children: [
+          /* @__PURE__ */ jsx35(
+            Box15,
+            {
+              style: {
+                position: "absolute",
+                top: -80,
+                right: -80,
+                width: 360,
+                height: 360,
+                borderRadius: "50%",
+                background: "rgba(255,255,255,0.06)",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx35(
+            Box15,
+            {
+              style: {
+                position: "absolute",
+                bottom: -60,
+                left: -60,
+                width: 240,
+                height: 240,
+                borderRadius: "50%",
+                background: "rgba(255,255,255,0.04)",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx35(SdContainer, { style: { position: "relative", zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
+            SdTextBox.Hero,
+            {
+              label,
+              title,
+              description,
+              ta: "center",
+              align: "center",
+              maw: 640,
+              mx: "auto",
+              pt: 80,
+              pb: 64
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx35(Content, { children })
   ] });
 }
 var PageLayout = {
@@ -1839,11 +2042,15 @@ var theme = createTheme({
       defaultProps: { radius: "sm" }
     },
     Divider: {
-      defaultProps: { c: "slate.5", pb: "xl" }
+      defaultProps: { c: "slate.5" }
     },
     Anchor: {
       defaultProps: { c: "slate.5", fz: "sm", underline: "never" }
     },
+    // SdHeader 모바일 드로어의 2단 아코디언 타이포를 SdLink와 맞춘다.
+    NavLink: {
+      defaultProps: { c: "slate.7", fz: "sm" }
+    },
     Table: {
       defaultProps: {
         captionSide: "bottom"
@@ -1860,33 +2067,63 @@ export {
   MainLayout,
   PageLayout,
   SdBadge,
+  SdBadgeDefault,
+  SdBadgePrimary,
+  SdBadgeSuccess,
+  SdBadgeWarning,
   SdButton,
   SdButtonCancel,
   SdButtonDelete,
+  SdButtonDownload,
+  SdButtonExcel,
   SdButtonGhost,
   SdButtonOutline,
   SdButtonPrimary,
   SdButtonSecondary,
+  SdButtonSubmit,
   SdButtonWhite,
   SdClients,
   SdClientsGrid,
   SdClientsMarquee,
   SdContainer,
   SdCta,
+  SdCtaBanner,
+  SdCtaInline,
+  SdCtaSubtle,
   SdErrorView,
+  SdErrorViewNotFound,
+  SdErrorViewPage,
   SdFaq,
+  SdFaqDefault,
+  SdFaqFilled,
+  SdFaqWithHeader,
   SdFeatureSection,
   SdFeatures,
   SdFooter,
   SdHeader,
   SdInput,
+  SdInputEmail,
+  SdInputPassword,
+  SdInputSelect,
+  SdInputText,
+  SdInputTextarea,
+  SdLink,
+  SdLinkBody,
+  SdLinkHint,
+  SdLinkStrong,
+  SdLinkSub,
   SdMap,
   SdMapSingle,
   SdMapTabs,
   SdModal,
   SdNumberIcon,
   SdPricingCard,
+  SdPricingCardDefault,
+  SdPricingCardFeatured,
+  SdPricingCardGrid,
   SdQuote,
+  SdQuoteCard,
+  SdQuotePlain,
   SdSkeleton,
   SdSkeletonAvatar,
   SdSkeletonCard,
@@ -1895,22 +2132,44 @@ export {
   SdSkeletonTitle,
   SdSolution,
   SdSolutionCard,
+  SdSolutionCardGrid,
+  SdSolutionCardItem,
+  SdSolutionFiltered,
+  SdSolutionList,
   SdSteps,
+  SdStepsBubble,
+  SdStepsCard,
   SdStepsSection,
+  SdStepsStrip,
   SdTable,
+  SdTableSpec,
   SdTabs,
   SdTabsOutline,
   SdTabsPills,
   SdTabsUnderline,
   SdTestimonial,
+  SdTestimonialCard,
+  SdTestimonialGrid,
+  SdTestimonialStrip,
   SdText,
+  SdTextBody,
   SdTextBox,
   SdTextBoxCard,
   SdTextBoxHero,
   SdTextBoxSection,
   SdTextBoxSub,
+  SdTextError,
+  SdTextEyebrow,
+  SdTextHint,
+  SdTextNumeric,
+  SdTextStrong,
+  SdTextSub,
   SdTimeline,
   SdTimelineSection,
   SdTitle,
+  SdTitleCard,
+  SdTitleDisplay,
+  SdTitleSection,
+  SdTitleSub,
   theme
 };