@yeongseoksong/framework 1.4.0 → 1.6.0

package/dist/ui/index.cjs

@@ -63,6 +63,7 @@ __export(ui_exports, {
   HeroCarousel: () => HeroCarousel,
   Logo: () => Logo,
   MainLayout: () => MainLayout,
+  NavProvider: () => NavProvider,
   PageLayout: () => PageLayout,
   PageLayoutBrand: () => PageLayoutBrand,
   PageLayoutImage: () => PageLayoutImage,
@@ -73,6 +74,7 @@ __export(ui_exports, {
   SdBadgePrimary: () => SdBadgePrimary,
   SdBadgeSuccess: () => SdBadgeSuccess,
   SdBadgeWarning: () => SdBadgeWarning,
+  SdBreadcrumb: () => SdBreadcrumb,
   SdButton: () => SdButton,
   SdButtonCancel: () => SdButtonCancel,
   SdButtonDelete: () => SdButtonDelete,
@@ -104,6 +106,7 @@ __export(ui_exports, {
   SdFooter: () => SdFooter,
   SdHeader: () => SdHeader,
   SdHeaderMega: () => SdHeaderMega,
+  SdHeaderPanel: () => SdHeaderPanel,
   SdHeaderSimple: () => SdHeaderSimple,
   SdInput: () => SdInput,
   SdInputAutocomplete: () => SdInputAutocomplete,
@@ -146,6 +149,7 @@ __export(ui_exports, {
   SdPricingCardDefault: () => SdPricingCardDefault,
   SdPricingCardFeatured: () => SdPricingCardFeatured,
   SdPricingCardGrid: () => SdPricingCardGrid,
+  SdProvider: () => SdProvider,
   SdQuote: () => SdQuote,
   SdQuoteCard: () => SdQuoteCard,
   SdQuotePlain: () => SdQuotePlain,
@@ -209,7 +213,8 @@ __export(ui_exports, {
   SdToastSuccess: () => SdToastSuccess,
   SdToastUpdate: () => SdToastUpdate,
   SdToastWarning: () => SdToastWarning,
-  theme: () => theme
+  theme: () => theme,
+  useNav: () => useNav
 });
 module.exports = __toCommonJS(ui_exports);
 
@@ -250,6 +255,7 @@ function Logo(_props) {
 }
 
 // ui/atom/Tabs.tsx
+var import_react = require("react");
 var import_core3 = require("@mantine/core");
 
 // ui/atom/Container.tsx
@@ -271,8 +277,30 @@ function SdScrollableList(_a4) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Box, { style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs.List, __spreadProps(__spreadValues({}, props), { children })) });
 }
 function createTabs(defaults, scrollable = false) {
-  function SdTabsRoot(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs, __spreadValues(__spreadValues({}, defaults), props));
+  function SdTabsRoot(_a4) {
+    var _b = _a4, { syncHash, value, onChange } = _b, props = __objRest(_b, ["syncHash", "value", "onChange"]);
+    const [hashValue, setHashValue] = (0, import_react.useState)(null);
+    (0, import_react.useEffect)(() => {
+      if (!syncHash) return;
+      const apply = () => {
+        const id = decodeURIComponent(window.location.hash.slice(1));
+        if (id) setHashValue(id);
+      };
+      apply();
+      window.addEventListener("hashchange", apply);
+      return () => window.removeEventListener("hashchange", apply);
+    }, [syncHash]);
+    if (!syncHash) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value, onChange }));
+    }
+    const handleChange = (next) => {
+      if (next) {
+        window.history.replaceState(null, "", `#${next}`);
+        setHashValue(next);
+      }
+      onChange == null ? void 0 : onChange(next);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value: value != null ? value : hashValue, onChange: handleChange }));
   }
   SdTabsRoot.List = scrollable ? SdScrollableList : import_core3.Tabs.List;
   SdTabsRoot.Tab = import_core3.Tabs.Tab;
@@ -1009,7 +1037,7 @@ function BubbleStep({ item, index, isLast }) {
       {
         style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SdNumberIcon, { value: String(index + 1).padStart(2, "0"), color: "primary" }),
           !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_core18.Box,
             {
@@ -1403,7 +1431,7 @@ var SdCtaSubtle = SdCta.Subtle;
 var SdCtaInline = SdCta.Inline;
 
 // ui/molecule/Solution.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_core24 = require("@mantine/core");
 var import_link3 = __toESM(require("next/link"));
 
@@ -1444,7 +1472,7 @@ var SdSolutionCardGrid = SdSolutionCard.Grid;
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function Filtered({ items, allLabel = "\uC804\uCCB4", cols, onSelect }) {
   const categories = ["all", ...Array.from(new Set(items.map((i) => i.category)))];
-  const [active, setActive] = (0, import_react.useState)("all");
+  const [active, setActive] = (0, import_react2.useState)("all");
   const filtered = active === "all" ? items : items.filter((i) => i.category === active);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "xl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
@@ -1516,7 +1544,13 @@ function LogoImage({ client, height }) {
     {
       src: client.logo,
       alt: client.name,
-      style: __spreadValues({ height, width: "auto", objectFit: "contain", display: "block" }, grayStyle),
+      style: __spreadValues({
+        height,
+        width: "auto",
+        maxWidth: "100%",
+        objectFit: "contain",
+        display: "block"
+      }, grayStyle),
       onMouseEnter: (e) => Object.assign(e.currentTarget.style, colorStyle),
       onMouseLeave: (e) => Object.assign(e.currentTarget.style, grayStyle)
     }
@@ -1534,7 +1568,10 @@ function Grid4({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "12px 8px"
+        padding: "12px 8px",
+        minWidth: 0,
+        // 그리드 트랙이 이미지 intrinsic width로 밀려 깨지는 것 방지
+        overflow: "hidden"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LogoImage, { client, height: logoHeight })
     },
@@ -1579,7 +1616,7 @@ var SdClientsGrid = Grid4;
 var SdClientsMarquee = Marquee;
 
 // ui/molecule/Map.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_core26 = require("@mantine/core");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function MapFrame({ address, height }) {
@@ -1613,7 +1650,7 @@ function Single(_a4) {
 function Tabs2({ addresses, height = 400 }) {
   var _a4, _b, _c;
   const mapped = addresses.filter((a) => a.embbedUrl);
-  const [active, setActive] = (0, import_react2.useState)((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
+  const [active, setActive] = (0, import_react3.useState)((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
   if (mapped.length === 0) return null;
   if (mapped.length === 1) return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MapFrame, { address: mapped[0], height });
   const current = (_c = mapped.find((a) => a.label === active)) != null ? _c : mapped[0];
@@ -1631,11 +1668,96 @@ var SdMap = {
 var SdMapSingle = Single;
 var SdMapTabs = Tabs2;
 
-// ui/organism/HeroCarousel.tsx
-var import_carousel = require("@mantine/carousel");
+// ui/molecule/Breadcrumb.tsx
 var import_core27 = require("@mantine/core");
+var import_navigation = require("next/navigation");
 var import_icons_react5 = require("@tabler/icons-react");
+
+// ui/template/NavProvider.tsx
+var import_react4 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var NavContext = (0, import_react4.createContext)([]);
+function NavProvider({
+  children,
+  navItems
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NavContext.Provider, { value: navItems, children });
+}
+function useNav() {
+  return (0, import_react4.useContext)(NavContext);
+}
+
+// ui/molecule/Breadcrumb.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function normalizePath(href) {
+  if (!href) return "";
+  const trimmed = href.replace(/\/+$/, "");
+  return trimmed === "" ? "/" : trimmed;
+}
+function buildTrail(navItems, currentHref) {
+  const target = normalizePath(currentHref);
+  const byId = new Map(navItems.map((item) => [item.id, item]));
+  let current = navItems.find((item) => normalizePath(item.href) === target);
+  if (!current) {
+    current = navItems.filter((item) => item.href && target.startsWith(normalizePath(item.href) + "/")).sort((a, b) => normalizePath(b.href).length - normalizePath(a.href).length)[0];
+  }
+  if (!current) return [];
+  const trail = [];
+  const seen = /* @__PURE__ */ new Set();
+  let node = current;
+  while (node && !seen.has(node.id)) {
+    seen.add(node.id);
+    trail.unshift(node);
+    node = node.parentId != null ? byId.get(node.parentId) : void 0;
+  }
+  return trail;
+}
+function SdBreadcrumb(_a4) {
+  var _b = _a4, {
+    navItems: navItemsProp,
+    currentHref,
+    homeHref = "/",
+    homeLabel = "\uD648"
+  } = _b, boxProps = __objRest(_b, [
+    "navItems",
+    "currentHref",
+    "homeHref",
+    "homeLabel"
+  ]);
+  var _a5;
+  const navFromContext = useNav();
+  const navItems = navItemsProp != null ? navItemsProp : navFromContext;
+  const pathname = (0, import_navigation.usePathname)();
+  const trail = buildTrail(navItems, (_a5 = currentHref != null ? currentHref : pathname) != null ? _a5 : "");
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core27.Box, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    import_core27.Breadcrumbs,
+    {
+      separator: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_react5.IconChevronRight, { size: 14, stroke: 2, color: "var(--mantine-color-slate-4)" }),
+      separatorMargin: "xs",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          SdLink.Sub,
+          {
+            href: homeHref,
+            "aria-label": homeLabel,
+            style: { display: "inline-flex", alignItems: "center" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_react5.IconHome, { size: 16, stroke: 2 })
+          }
+        ),
+        trail.map((item, i) => {
+          const isLast = i === trail.length - 1;
+          return isLast ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Body, { children: item.label }, item.id) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Sub, { href: item.href, children: item.label }, item.id);
+        })
+      ]
+    }
+  ) }));
+}
+
+// ui/organism/HeroCarousel.tsx
+var import_carousel = require("@mantine/carousel");
+var import_core28 = require("@mantine/core");
+var import_icons_react6 = require("@tabler/icons-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var variantMap = {
   primary: SdButton.Primary,
   secondary: SdButton.Secondary,
@@ -1645,13 +1767,13 @@ var variantMap = {
 function CtaButton({ cta }) {
   var _a4;
   const Button3 = variantMap[(_a4 = cta.variant) != null ? _a4 : "primary"];
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Anchor, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button3, { size: "md", rightSection: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons_react5.IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button3, { size: "md", children: cta.label }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core28.Anchor, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button3, { size: "md", rightSection: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react6.IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button3, { size: "md", children: cta.label }) });
 }
 function HeroCarousel({ slides, children }) {
-  if (children) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
+  if (children) return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children });
   const filterdSlides = filterAndSort(slides);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_carousel.Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_carousel.Carousel.Slide, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_core27.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_carousel.Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_carousel.Carousel.Slide, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_core28.Box,
     {
       style: {
         height: "100%",
@@ -1662,8 +1784,8 @@ function HeroCarousel({ slides, children }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core28.Stack, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           SdTextBox.Hero,
           {
             title: slide.title,
@@ -1672,18 +1794,27 @@ function HeroCarousel({ slides, children }) {
             align: "center"
           }
         ),
-        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Group, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CtaButton, { cta }, cta.href)) })
+        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core28.Group, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CtaButton, { cta }, cta.href)) })
       ] })
     }
   ) }, i)) });
 }
 
 // ui/organism/Header.tsx
-var import_core28 = require("@mantine/core");
-var import_icons_react6 = require("@tabler/icons-react");
+var import_core29 = require("@mantine/core");
+var import_icons_react7 = require("@tabler/icons-react");
 var import_hooks = require("@mantine/hooks");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var BAR_HEIGHT = 60;
+var MAX_DEPTH = 3;
+var NAV_LINK_STYLES = {
+  label: {
+    fontWeight: textStyles.Body.fw,
+    fontSize: `var(--mantine-font-size-${textStyles.Body.fz})`,
+    color: toCssColor(textStyles.Body.c),
+    lineHeight: textStyles.Body.lh
+  }
+};
 function useNavTree(navItems) {
   const visibleItems = filterAndSort(navItems);
   return {
@@ -1692,27 +1823,36 @@ function useNavTree(navItems) {
     hasAnyChildren: visibleItems.some((item) => item.parentId)
   };
 }
-function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Stack, { gap: 0, children: [
-    topItems.map((item) => {
-      const kids = childrenOf(item.id);
-      if (kids.length === 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Box, { px: "sm", py: 8, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Body, { href: item.href, onClick: close, children: item.label }) }, item.id);
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_core28.NavLink,
+function MobileNavNode({ item, depth, childrenOf, close }) {
+  const kids = depth < MAX_DEPTH ? childrenOf(item.id) : [];
+  if (kids.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Box, { px: "sm", py: 8, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: item.href, onClick: close, children: item.label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_core29.NavLink,
+    {
+      label: item.label,
+      styles: NAV_LINK_STYLES,
+      component: item.href ? "a" : "button",
+      href: item.href,
+      childrenOffset: 28,
+      children: kids.map((kid) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        MobileNavNode,
         {
-          label: item.label,
-          component: item.href ? "a" : "button",
-          href: item.href,
-          childrenOffset: 28,
-          onClick: kids.length > 0 ? void 0 : close,
-          children: kids.map((kid) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.NavLink, { label: kid.label, href: kid.href, onClick: close }, kid.id))
+          item: kid,
+          depth: depth + 1,
+          childrenOf,
+          close
         },
-        item.id
-      );
-    }),
-    loginFlag && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Stack, { gap: "xs", mt: "md", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+        kid.id
+      ))
+    }
+  );
+}
+function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Stack, { gap: 0, children: [
+    topItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MobileNavNode, { item, depth: 1, childrenOf, close }, item.id)),
+    loginFlag && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Stack, { gap: "xs", mt: "md", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
   ] }) });
 }
 function MegaHeader({ navItems, loginFlag }) {
@@ -1722,9 +1862,9 @@ function MegaHeader({ navItems, loginFlag }) {
   const { focused, ref: focusRef } = (0, import_hooks.useFocusWithin)();
   const rootRef = (0, import_hooks.useMergedRef)(hoverRef, focusRef);
   const expanded = hasAnyChildren && (hovered || focused);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_core28.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_core29.Box,
       {
         ref: rootRef,
         pos: "relative",
@@ -1734,12 +1874,12 @@ function MegaHeader({ navItems, loginFlag }) {
           borderBottom: expanded ? "1px solid var(--mantine-color-slate-2)" : void 0,
           transition: "box-shadow 0.15s"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Logo, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Logo, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
             const kids = childrenOf(item.id);
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Stack, { gap: 0, align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Body, { href: item.href, children: item.label }) }),
+            return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Stack, { gap: 0, align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: item.href, children: item.label }) }),
               kids.length > 0 && /*
                 Mantine Collapse를 쓰지 않는다 — 접힐 때 display:none이 되어
                 하위 링크가 폭 계산에서 빠졌다가 펼칠 때 다시 들어오면서
@@ -1747,8 +1887,8 @@ function MegaHeader({ navItems, loginFlag }) {
                 height 0 + overflow hidden은 폭 기여를 유지하므로 간격이 고정된다.
                 visibility:hidden이 접힌 상태의 링크를 탭 순서에서도 빼준다.
               */
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                import_core28.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                import_core29.Box,
                 {
                   "aria-hidden": !expanded,
                   style: {
@@ -1758,19 +1898,28 @@ function MegaHeader({ navItems, loginFlag }) {
                     visibility: expanded ? "visible" : "hidden",
                     transition: "opacity 0.15s ease"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Stack, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Sub, { href: kid.href, children: kid.label }, kid.id)) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Stack, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => {
+                    const grandkids = childrenOf(kid.id);
+                    if (grandkids.length === 0) {
+                      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Stack, { gap: 2, align: "center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: kid.href, children: kid.label }),
+                      grandkids.map((gk) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Sub, { href: gk.href, children: gk.label }, gk.id))
+                    ] }, kid.id);
+                  }) })
                 }
               )
             ] }, item.id);
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-            loginFlag && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+            loginFlag && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
           ] })
         ] }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       MobileNav,
       {
         opened,
@@ -1782,16 +1931,19 @@ function MegaHeader({ navItems, loginFlag }) {
     )
   ] });
 }
+function renderMenuLeaf(item) {
+  return item.href ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Item, { component: "a", href: item.href, children: item.label }, item.id) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Label, { children: item.label }, item.id);
+}
 function SimpleHeader({ navItems, loginFlag }) {
   const [opened, { toggle, close }] = (0, import_hooks.useDisclosure)();
   const { topItems, childrenOf } = useNavTree(navItems);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Box, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Logo, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Box, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Logo, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
         const kids = childrenOf(item.id);
         if (kids.length === 0) {
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Body, { href: item.href, children: item.label }, item.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: item.href, children: item.label }, item.id);
         }
         return (
           /*
@@ -1799,8 +1951,8 @@ function SimpleHeader({ navItems, loginFlag }) {
             Menu.Target은 ref를 받을 수 있는 단일 엘리먼트여야 하므로
             SdLink/SdText가 아니라 Box를 타깃으로 두고 라벨을 그 안에 넣는다.
           */
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-            import_core28.Menu,
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            import_core29.Menu,
             {
               trigger: "click-hover",
               openDelay: 50,
@@ -1811,25 +1963,91 @@ function SimpleHeader({ navItems, loginFlag }) {
               radius: "md",
               withinPortal: true,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Box, { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { gap: 4, align: "center", wrap: "nowrap", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdLink.Body, { href: item.href, children: item.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons_react6.IconChevronDown, { size: 14, stroke: 2 })
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Box, { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: item.href, children: item.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react7.IconChevronDown, { size: 14, stroke: 2 })
                 ] }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Menu.Dropdown, { children: kids.map(
-                  (kid) => kid.href ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Menu.Item, { component: "a", href: kid.href, children: kid.label }, kid.id) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Menu.Label, { children: kid.label }, kid.id)
-                ) })
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Dropdown, { children: kids.map((kid) => {
+                  const grandkids = childrenOf(kid.id);
+                  if (grandkids.length > 0) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Menu.Sub, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Sub.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Sub.Item, { children: kid.label }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Sub.Dropdown, { children: grandkids.map(renderMenuLeaf) })
+                    ] }, kid.id);
+                  }
+                  return renderMenuLeaf(kid);
+                }) })
               ]
             },
             item.id
           )
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_core28.Group, { align: "center", gap: "sm", wrap: "nowrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-        loginFlag && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
+  ] });
+}
+function PanelHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = (0, import_hooks.useDisclosure)();
+  const { topItems, childrenOf } = useNavTree(navItems);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Box, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Logo, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        const kids = childrenOf(item.id);
+        if (kids.length === 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: item.href, children: item.label }, item.id);
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          import_core29.Menu,
+          {
+            trigger: "click-hover",
+            openDelay: 50,
+            closeDelay: 120,
+            position: "bottom",
+            offset: 12,
+            shadow: "md",
+            radius: "md",
+            withinPortal: true,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Box, { style: { cursor: "pointer" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: item.href, children: item.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react7.IconChevronDown, { size: 14, stroke: 2 })
+              ] }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Menu.Dropdown, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Stack, { gap: "xs", p: "xs", children: kids.map((kid) => {
+                const grandkids = childrenOf(kid.id);
+                if (grandkids.length === 0) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Stack, { gap: 2, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Body, { href: kid.href, children: kid.label }),
+                  grandkids.map((gk) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdLink.Sub, { href: gk.href, pl: "sm", children: gk.label }, gk.id))
+                ] }, kid.id);
+              }) }) })
+            ]
+          },
+          item.id
+        );
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core29.Group, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core29.Group, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       MobileNav,
       {
         opened,
@@ -1841,41 +2059,46 @@ function SimpleHeader({ navItems, loginFlag }) {
     )
   ] });
 }
-var SdHeader = Object.assign(MegaHeader, { Mega: MegaHeader, Simple: SimpleHeader });
+var SdHeader = Object.assign(MegaHeader, {
+  Mega: MegaHeader,
+  Simple: SimpleHeader,
+  Panel: PanelHeader
+});
 var SdHeaderMega = MegaHeader;
 var SdHeaderSimple = SimpleHeader;
+var SdHeaderPanel = PanelHeader;
 
 // ui/organism/Footer.tsx
-var import_core29 = require("@mantine/core");
-var import_icons_react7 = require("@tabler/icons-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_core30 = require("@mantine/core");
+var import_icons_react8 = require("@tabler/icons-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function FooterNavColumns({ items }) {
   const topLevel = items.filter((item) => !item.parentId);
   const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
   const CHILD_THRESH = 4;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: topLevel.map((group) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Grid.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { gap: "xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Sub, { href: group.href, children: group.label }, group.id),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: topLevel.map((group) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Grid.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.Stack, { gap: "xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdLink.Sub, { href: group.href, children: group.label }, group.id),
     getChildren(group.id).map((link, id) => {
       if (id >= CHILD_THRESH) return;
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Hint, { href: link.href, children: link.label }, link.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdLink.Hint, { href: link.href, children: link.label }, link.id);
     })
   ] }) }, group.id)) });
 }
 var SOCIAL_ICONS = {
-  x: import_icons_react7.IconBrandX,
-  youtube: import_icons_react7.IconBrandYoutube,
-  instagram: import_icons_react7.IconBrandInstagram,
-  facebook: import_icons_react7.IconBrandFacebook,
-  linkedin: import_icons_react7.IconBrandLinkedin,
-  github: import_icons_react7.IconBrandGithub,
-  blog: import_icons_react7.IconWorld
+  x: import_icons_react8.IconBrandX,
+  youtube: import_icons_react8.IconBrandYoutube,
+  instagram: import_icons_react8.IconBrandInstagram,
+  facebook: import_icons_react8.IconBrandFacebook,
+  linkedin: import_icons_react8.IconBrandLinkedin,
+  github: import_icons_react8.IconBrandGithub,
+  blog: import_icons_react8.IconWorld
 };
 function FooterSocials({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: 0, wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Group, { gap: 0, wrap: "nowrap", children: items.map((item) => {
     var _a4, _b;
-    const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : import_icons_react7.IconWorld;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_core29.ActionIcon,
+    const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : import_icons_react8.IconWorld;
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_core30.ActionIcon,
       {
         component: "a",
         href: item.url,
@@ -1885,62 +2108,62 @@ function FooterSocials({ items }) {
         color: "gray",
         variant: "subtle",
         "aria-label": (_b = item.label) != null ? _b : item.platform,
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { size: 18, stroke: 1.5 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { size: 18, stroke: 1.5 })
       },
       item.url
     );
   }) });
 }
 function InfoCell({ label, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { gap: 6, wrap: "nowrap", align: "baseline", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
-    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdText.Sub, { children }) : children
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.Group, { gap: 6, wrap: "nowrap", align: "baseline", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
+    typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdText.Sub, { children }) : children
   ] });
 }
 function FooterCompanyInfo({ company }) {
   const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.SimpleGrid, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
-    sortedAddresses.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoCell, { label: "Tel", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
-    company.fax && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoCell, { label: "Fax", children: company.fax }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(InfoCell, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.SimpleGrid, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
+    sortedAddresses.map((addr) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoCell, { label: "Tel", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
+    company.fax && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoCell, { label: "Fax", children: company.fax }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InfoCell, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
   ] });
 }
 function SdFooter({ company, navItems, policyLinks, description }) {
   const visibleNav = filterAndSort(navItems);
   const visiblePolicy = filterAndSort(policyLinks);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { component: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdContainer, { py: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Stack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Logo, { size: "sm" }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SdText.Sub, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FooterCompanyInfo, { company }) }),
-      visibleNav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Grid, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FooterNavColumns, { items: visibleNav }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Box, { component: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdContainer, { py: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.Stack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Logo, { size: "sm" }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdText.Sub, { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Box, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FooterCompanyInfo, { company }) }),
+      visibleNav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Box, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Grid, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FooterNavColumns, { items: visibleNav }) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SdText.Sub, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.Group, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SdText.Sub, { children: [
         "\xA9 ",
         company.copyrightYear,
         " ",
         t(company.name),
         ". All rights reserved."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { gap: "lg", wrap: "wrap", children: [
-        visiblePolicy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "lg", children: visiblePolicy.map((item) => {
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core30.Group, { gap: "lg", wrap: "wrap", children: [
+        visiblePolicy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core30.Group, { gap: "lg", children: visiblePolicy.map((item) => {
           const Link4 = item.highlight ? SdLink.Body : SdLink.Sub;
-          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Link4, { href: item.href, children: item.label }, item.id);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Link4, { href: item.href, children: item.label }, item.id);
         }) }),
-        company.socials && company.socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FooterSocials, { items: company.socials })
+        company.socials && company.socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FooterSocials, { items: company.socials })
       ] })
     ] })
   ] }) }) });
 }
 
 // ui/organism/FeatureSection.tsx
-var import_core30 = require("@mantine/core");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_core31 = require("@mantine/core");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function SdFeatureSection(_a4) {
   var _b = _a4, {
     label,
@@ -1957,8 +2180,8 @@ function SdFeatureSection(_a4) {
     "cols",
     "py"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Stack, { gap: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core31.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       SdTextBox.Section,
       {
         label,
@@ -1969,13 +2192,13 @@ function SdFeatureSection(_a4) {
         align: "center"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SdFeatures, { items, cols })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdFeatures, { items, cols })
   ] }) }));
 }
 
 // ui/organism/TimelineSection.tsx
-var import_core31 = require("@mantine/core");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_core32 = require("@mantine/core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function SdTimelineSection(_a4) {
   var _b = _a4, {
     label,
@@ -1990,15 +2213,15 @@ function SdTimelineSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SdTimeline, { items }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core32.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core32.Stack, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core32.Center, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdTimeline, { items }) })
   ] })) });
 }
 
 // ui/organism/StepsSection.tsx
-var import_core32 = require("@mantine/core");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_core33 = require("@mantine/core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function SdStepsSection(_a4) {
   var _b = _a4, {
     label,
@@ -2013,18 +2236,18 @@ function SdStepsSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { gap: "xl", children: [
-    (label || title || description) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SdSteps.Bubble, { items })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core33.Stack, { gap: "xl", children: [
+    (label || title || description) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdSteps.Bubble, { items })
   ] }) }));
 }
 
 // ui/organism/ErrorView.tsx
-var import_core33 = require("@mantine/core");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_core34 = require("@mantine/core");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function StatusCode({ code }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_core33.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_core34.Text,
     {
       fz: 160,
       fw: 900,
@@ -2037,15 +2260,15 @@ function StatusCode({ code }) {
   );
 }
 function Page({ error, onReset, onHome }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StatusCode, { code: "500" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core34.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core34.Stack, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatusCode, { code: "500" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core34.Stack, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Group, { gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
-      onHome && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core34.Group, { gap: "sm", justify: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+      onHome && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
     ] })
   ] }) }) });
 }
@@ -2057,15 +2280,15 @@ function NotFound({
   },
   onBack = () => window.history.back()
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StatusCode, { code: "404" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdTitle.Section, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdText.Body, { maw: 480, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core34.Center, { mih: "60vh", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core34.Stack, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatusCode, { code: "404" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core34.Stack, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdTitle.Section, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdText.Body, { maw: 480, children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Group, { gap: "sm", justify: "center", children: [
-      onHome && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
-      onBack && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core34.Group, { gap: "sm", justify: "center", children: [
+      onHome && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
     ] })
   ] }) }) });
 }
@@ -2079,8 +2302,8 @@ var SdErrorViewPage = SdErrorView.Page;
 var SdErrorViewNotFound = SdErrorView.NotFound;
 
 // ui/organism/LoginView.tsx
-var import_core34 = require("@mantine/core");
-var import_icons_react8 = require("@tabler/icons-react");
+var import_core35 = require("@mantine/core");
+var import_icons_react9 = require("@tabler/icons-react");
 
 // ui/surface.ts
 var brandSurface = {
@@ -2098,13 +2321,13 @@ var brandDotTexture = {
 };
 
 // ui/organism/LoginView.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var SOCIAL_META = {
-  google: { Icon: import_icons_react8.IconBrandGoogle, label: "\uAD6C\uAE00\uB85C \uB85C\uADF8\uC778" },
-  kakao: { Icon: import_icons_react8.IconBrandKakaoTalk, label: "\uCE74\uCE74\uC624\uB85C \uB85C\uADF8\uC778" },
-  naver: { Icon: import_icons_react8.IconCircleLetterN, label: "\uB124\uC774\uBC84\uB85C \uB85C\uADF8\uC778" },
-  apple: { Icon: import_icons_react8.IconBrandApple, label: "\uC560\uD50C\uB85C \uB85C\uADF8\uC778" },
-  github: { Icon: import_icons_react8.IconBrandGithub, label: "\uAE43\uD5C8\uBE0C\uB85C \uB85C\uADF8\uC778" }
+  google: { Icon: import_icons_react9.IconBrandGoogle, label: "\uAD6C\uAE00\uB85C \uB85C\uADF8\uC778" },
+  kakao: { Icon: import_icons_react9.IconBrandKakaoTalk, label: "\uCE74\uCE74\uC624\uB85C \uB85C\uADF8\uC778" },
+  naver: { Icon: import_icons_react9.IconCircleLetterN, label: "\uB124\uC774\uBC84\uB85C \uB85C\uADF8\uC778" },
+  apple: { Icon: import_icons_react9.IconBrandApple, label: "\uC560\uD50C\uB85C \uB85C\uADF8\uC778" },
+  github: { Icon: import_icons_react9.IconBrandGithub, label: "\uAE43\uD5C8\uBE0C\uB85C \uB85C\uADF8\uC778" }
 };
 function LoginForm({
   onSubmit,
@@ -2127,9 +2350,9 @@ function LoginForm({
       remember: data.get("remember") === "on"
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "md", children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdText.Error, { children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.Stack, { gap: "md", children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdText.Error, { children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       SdInput.Email,
       {
         name: "email",
@@ -2139,7 +2362,7 @@ function LoginForm({
         required: true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       SdInput.Password,
       {
         name: "password",
@@ -2149,50 +2372,50 @@ function LoginForm({
         required: true
       }
     ),
-    (withRemember || findPasswordHref) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { justify: "space-between", align: "center", wrap: "nowrap", children: [
-      withRemember ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Checkbox, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", {}),
-      findPasswordHref && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
+    (withRemember || findPasswordHref) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.Group, { justify: "space-between", align: "center", wrap: "nowrap", children: [
+      withRemember ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Checkbox, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", {}),
+      findPasswordHref && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       SdButton.Primary,
       {
         type: "submit",
         fullWidth: true,
         loading,
-        leftSection: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons_react8.IconLogin2, { size: 16 }),
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react9.IconLogin2, { size: 16 }),
         children: submitLabel
       }
     ),
-    socials && socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Divider, { label: "\uB610\uB294", labelPosition: "center" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Stack, { gap: "xs", children: socials.map((social) => {
+    socials && socials.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Divider, { label: "\uB610\uB294", labelPosition: "center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Stack, { gap: "xs", children: socials.map((social) => {
         var _a4;
         const { Icon, label } = SOCIAL_META[social.provider];
-        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           SdButton.Outline,
           {
             color: "slate",
             fullWidth: true,
             type: "button",
             onClick: social.onClick,
-            leftSection: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { size: 16 }),
+            leftSection: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { size: 16 }),
             children: (_a4 = social.label) != null ? _a4 : label
           },
           social.provider
         );
       }) })
     ] }),
-    signUpHref && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { gap: 6, justify: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
+    signUpHref && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.Group, { gap: 6, justify: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
     ] }),
     children
   ] }) });
 }
 function FormHeader({ title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "lg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Logo, { size: "sm" }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SdTextBox.Card, { title, description: description != null ? description : "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.Stack, { gap: "lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Logo, { size: "sm" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdTextBox.Card, { title, description: description != null ? description : "" })
   ] });
 }
 function Card7(_a4) {
@@ -2205,9 +2428,9 @@ function Card7(_a4) {
     "description",
     "mih"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Center, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FormHeader, { title, description }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LoginForm, __spreadValues({}, formProps))
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Center, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.Stack, { gap: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FormHeader, { title, description }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoginForm, __spreadValues({}, formProps))
   ] }) }) });
 }
 function Split(_a4) {
@@ -2224,16 +2447,16 @@ function Split(_a4) {
     "brandDescription",
     "mih"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.SimpleGrid, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      import_core34.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.SimpleGrid, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      import_core35.Box,
       {
         visibleFrom: "md",
         pos: "relative",
         style: __spreadValues({ overflow: "hidden", display: "flex", alignItems: "flex-end" }, brandSurface),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Box, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Box, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             SdTextBox.Hero,
             {
               title: brandTitle,
@@ -2247,9 +2470,9 @@ function Split(_a4) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Center, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xl", w: "100%", maw: 400, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FormHeader, { title, description }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LoginForm, __spreadValues({}, formProps))
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core35.Center, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core35.Stack, { gap: "xl", w: "100%", maw: 400, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FormHeader, { title, description }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(LoginForm, __spreadValues({}, formProps))
     ] }) })
   ] });
 }
@@ -2263,11 +2486,11 @@ var SdLoginViewCard = SdLoginView.Card;
 var SdLoginViewSplit = SdLoginView.Split;
 
 // ui/organism/Result.tsx
-var import_core35 = require("@mantine/core");
-var import_icons_react9 = require("@tabler/icons-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_core36 = require("@mantine/core");
+var import_icons_react10 = require("@tabler/icons-react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function ResultIcon({ color, Icon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Center, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { size: 48, stroke: 1.5, color: `var(--mantine-color-${color}-6)` }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core36.Center, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { size: 48, stroke: 1.5, color: `var(--mantine-color-${color}-6)` }) });
 }
 function createResult(defaults) {
   return function SdResult2({
@@ -2278,16 +2501,16 @@ function createResult(defaults) {
     children,
     mih = "60vh"
   }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Center, { mih, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { align: "center", gap: "lg", ta: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "sm", align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdTitle.Section, { children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdText.Body, { maw: 480, children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core36.Center, { mih, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core36.Stack, { align: "center", gap: "lg", ta: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core36.Stack, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdTitle.Section, { children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdText.Body, { maw: 480, children: description })
       ] }),
-      children && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Box, { children }),
-      (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { gap: "sm", justify: "center", children: [
-        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
-        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
+      children && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core36.Box, { children }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core36.Group, { gap: "sm", justify: "center", children: [
+        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
+        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
       ] })
     ] }) }) });
   };
@@ -2296,13 +2519,13 @@ var SdResult = {
   /** 성공 — 가입 완료·결제 완료 등 */
   Success: createResult({
     color: "green",
-    Icon: import_icons_react9.IconCircleCheck,
+    Icon: import_icons_react10.IconCircleCheck,
     title: "\uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4"
   }),
   /** 실패 — 결제 실패·처리 중 오류 등. 서버 오류·404는 SdErrorView를 쓴다. */
   Error: createResult({
     color: "red",
-    Icon: import_icons_react9.IconCircleX,
+    Icon: import_icons_react10.IconCircleX,
     title: "\uBB38\uC81C\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4"
   })
 };
@@ -2310,11 +2533,12 @@ var SdResultSuccess = SdResult.Success;
 var SdResultError = SdResult.Error;
 
 // ui/template/MainLayout.tsx
-var import_core36 = require("@mantine/core");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_core37 = require("@mantine/core");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var headers = {
   mega: SdHeader.Mega,
-  simple: SdHeader.Simple
+  simple: SdHeader.Simple,
+  panel: SdHeader.Panel
 };
 function MainLayout({
   children,
@@ -2324,45 +2548,65 @@ function MainLayout({
   headerVariant = "mega"
 }) {
   const Header = headers[headerVariant];
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Header, { navItems, loginFlag }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.AppShell.Main, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SdFooter, { company: companyInfo, navItems })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core37.AppShell, { header: { height: 60 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core37.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Header, { navItems, loginFlag }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core37.AppShell.Main, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SdFooter, { company: companyInfo, navItems })
   ] });
 }
 
 // ui/template/PageLayout.tsx
-var import_core37 = require("@mantine/core");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_core38 = require("@mantine/core");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var HERO_MIN_H = "38svh";
 var HERO_PY = { base: 56, sm: 88 };
 var HERO_MAW = 680;
-function Content({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdContainer, { py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Stack, { gap: "xl", children }) });
+function Content({
+  children,
+  navItems,
+  breadcrumb = true,
+  currentHref
+}) {
+  const showBreadcrumb = breadcrumb && !!navItems && navItems.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(SdContainer, { py: "xl", children: [
+    showBreadcrumb && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SdBreadcrumb, { navItems, currentHref, mb: "lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core38.Stack, { gap: "xl", children })
+  ] });
 }
 function LayoutGap() {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Space, { h: 48 });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core38.Space, {});
 }
-function Minimal({ label, title, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Plain2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Divider, {}),
+function Minimal({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Plain2, { navItems, breadcrumb, currentHref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LayoutGap, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core38.Divider, {}),
     children
   ] });
 }
-function Plain2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LayoutGap, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Content, { children })
-  ] });
+function Plain2({
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Content, { navItems, breadcrumb, currentHref, children }) });
 }
 function HeroCopy({ label, title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "md", maw: HERO_MAW, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { gap: "sm", align: "center", wrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Box, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdText.Eyebrow, { c: "primary.1", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core38.Stack, { gap: "md", maw: HERO_MAW, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core38.Group, { gap: "sm", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core38.Box, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SdText.Eyebrow, { c: "primary.1", children: label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       SdTextBox.Hero,
       {
         title,
@@ -2375,10 +2619,19 @@ function HeroCopy({ label, title, description }) {
     )
   ] });
 }
-function Image2({ image, label, title, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-      import_core37.Box,
+function Image2({
+  image,
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      import_core38.Box,
       {
         pos: "relative",
         style: {
@@ -2391,8 +2644,8 @@ function Image2({ image, label, title, description, children }) {
           backgroundColor: "var(--mantine-color-slate-9)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_core37.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_core38.Box,
             {
               "aria-hidden": true,
               pos: "absolute",
@@ -2402,17 +2655,25 @@ function Image2({ image, label, title, description, children }) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HeroCopy, { label, title, description }) })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Content, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
-function Brand({ label, title, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-      import_core37.Box,
+function Brand({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      import_core38.Box,
       {
         pos: "relative",
         style: __spreadValues({
@@ -2423,12 +2684,12 @@ function Brand({ label, title, description, children }) {
           borderBottom: "1px solid var(--mantine-color-slate-8)"
         }, brandSurface),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Box, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(HeroCopy, { label, title, description }) })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core38.Box, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Content, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
 var PageLayout = {
@@ -2446,8 +2707,11 @@ var PageLayoutMinimal = PageLayout.Minimal;
 var PageLayoutBrand = PageLayout.Brand;
 var PageLayoutPlain = PageLayout.Plain;
 
+// ui/template/SdProvider.tsx
+var import_core40 = require("@mantine/core");
+
 // ui/theme.ts
-var import_core38 = require("@mantine/core");
+var import_core39 = require("@mantine/core");
 var primary = [
   "#e7f0fb",
   "#c8dcf4",
@@ -2563,7 +2827,7 @@ var amber = [
   "#78350f"
   // 9  amber-900
 ];
-var theme = (0, import_core38.createTheme)({
+var theme = (0, import_core39.createTheme)({
   /* ---- Color ---- */
   colors: { primary, secondary, slate, red, green, amber, dark: slate },
   primaryColor: "primary",
@@ -2575,20 +2839,20 @@ var theme = (0, import_core38.createTheme)({
     fontFamily: "'Noto Sans KR', ui-sans-serif, system-ui, sans-serif",
     fontWeight: "700",
     sizes: {
-      h1: { fontSize: (0, import_core38.rem)(48), lineHeight: "1.1", fontWeight: "900" },
-      h2: { fontSize: (0, import_core38.rem)(36), lineHeight: "1.1", fontWeight: "900" },
-      h3: { fontSize: (0, import_core38.rem)(28), lineHeight: "1.15", fontWeight: "700" },
-      h4: { fontSize: (0, import_core38.rem)(20), lineHeight: "1.3", fontWeight: "700" },
-      h5: { fontSize: (0, import_core38.rem)(16), lineHeight: "1.4", fontWeight: "700" },
-      h6: { fontSize: (0, import_core38.rem)(14), lineHeight: "1.4", fontWeight: "700" }
+      h1: { fontSize: (0, import_core39.rem)(48), lineHeight: "1.1", fontWeight: "900" },
+      h2: { fontSize: (0, import_core39.rem)(36), lineHeight: "1.1", fontWeight: "900" },
+      h3: { fontSize: (0, import_core39.rem)(28), lineHeight: "1.15", fontWeight: "700" },
+      h4: { fontSize: (0, import_core39.rem)(20), lineHeight: "1.3", fontWeight: "700" },
+      h5: { fontSize: (0, import_core39.rem)(16), lineHeight: "1.4", fontWeight: "700" },
+      h6: { fontSize: (0, import_core39.rem)(14), lineHeight: "1.4", fontWeight: "700" }
     }
   },
   fontSizes: {
-    xs: (0, import_core38.rem)(14),
-    sm: (0, import_core38.rem)(16),
-    md: (0, import_core38.rem)(18),
-    lg: (0, import_core38.rem)(20),
-    xl: (0, import_core38.rem)(22)
+    xs: (0, import_core39.rem)(14),
+    sm: (0, import_core39.rem)(16),
+    md: (0, import_core39.rem)(18),
+    lg: (0, import_core39.rem)(20),
+    xl: (0, import_core39.rem)(22)
   },
   lineHeights: {
     xs: "1.4",
@@ -2599,18 +2863,18 @@ var theme = (0, import_core38.createTheme)({
   },
   defaultRadius: "md",
   radius: {
-    xs: (0, import_core38.rem)(6),
-    sm: (0, import_core38.rem)(8),
-    md: (0, import_core38.rem)(10),
-    lg: (0, import_core38.rem)(14),
-    xl: (0, import_core38.rem)(18)
+    xs: (0, import_core39.rem)(6),
+    sm: (0, import_core39.rem)(8),
+    md: (0, import_core39.rem)(10),
+    lg: (0, import_core39.rem)(14),
+    xl: (0, import_core39.rem)(18)
   },
   spacing: {
-    xs: (0, import_core38.rem)(8),
-    sm: (0, import_core38.rem)(12),
-    md: (0, import_core38.rem)(16),
-    lg: (0, import_core38.rem)(24),
-    xl: (0, import_core38.rem)(32)
+    xs: (0, import_core39.rem)(8),
+    sm: (0, import_core39.rem)(12),
+    md: (0, import_core39.rem)(16),
+    lg: (0, import_core39.rem)(24),
+    xl: (0, import_core39.rem)(32)
   },
   shadows: {
     xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -2690,7 +2954,6 @@ var theme = (0, import_core38.createTheme)({
     Anchor: {
       defaultProps: { c: "slate.5", fz: "sm", underline: "never" }
     },
-    // SdHeader 모바일 드로어의 2단 아코디언 타이포를 SdLink와 맞춘다.
     NavLink: {
       defaultProps: { c: "slate.7", fz: "sm" }
     },
@@ -2704,11 +2967,26 @@ var theme = (0, import_core38.createTheme)({
     }
   }
 });
+
+// ui/template/SdProvider.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function SdProvider({
+  children,
+  theme: theme2 = theme,
+  navItems,
+  defaultColorScheme = "light"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.MantineProvider, { theme: theme2, defaultColorScheme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SdToastProvider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NavProvider, { navItems, children })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   HeroCarousel,
   Logo,
   MainLayout,
+  NavProvider,
   PageLayout,
   PageLayoutBrand,
   PageLayoutImage,
@@ -2719,6 +2997,7 @@ var theme = (0, import_core38.createTheme)({
   SdBadgePrimary,
   SdBadgeSuccess,
   SdBadgeWarning,
+  SdBreadcrumb,
   SdButton,
   SdButtonCancel,
   SdButtonDelete,
@@ -2750,6 +3029,7 @@ var theme = (0, import_core38.createTheme)({
   SdFooter,
   SdHeader,
   SdHeaderMega,
+  SdHeaderPanel,
   SdHeaderSimple,
   SdInput,
   SdInputAutocomplete,
@@ -2792,6 +3072,7 @@ var theme = (0, import_core38.createTheme)({
   SdPricingCardDefault,
   SdPricingCardFeatured,
   SdPricingCardGrid,
+  SdProvider,
   SdQuote,
   SdQuoteCard,
   SdQuotePlain,
@@ -2855,5 +3136,6 @@ var theme = (0, import_core38.createTheme)({
   SdToastSuccess,
   SdToastUpdate,
   SdToastWarning,
-  theme
+  theme,
+  useNav
 });