@yeongseoksong/framework 1.4.0 → 1.5.0

package/dist/ui/index.mjs

@@ -68,6 +68,7 @@ function Logo(_props) {
 }
 
 // ui/atom/Tabs.tsx
+import { useEffect, useState } from "react";
 import { Box, Tabs } from "@mantine/core";
 
 // ui/atom/Container.tsx
@@ -89,8 +90,30 @@ function SdScrollableList(_a4) {
   return /* @__PURE__ */ jsx3(Box, { style: { overflowX: "auto", width: "100%" }, children: /* @__PURE__ */ jsx3(Tabs.List, __spreadProps(__spreadValues({}, props), { children })) });
 }
 function createTabs(defaults, scrollable = false) {
-  function SdTabsRoot(props) {
-    return /* @__PURE__ */ jsx3(Tabs, __spreadValues(__spreadValues({}, defaults), props));
+  function SdTabsRoot(_a4) {
+    var _b = _a4, { syncHash, value, onChange } = _b, props = __objRest(_b, ["syncHash", "value", "onChange"]);
+    const [hashValue, setHashValue] = useState(null);
+    useEffect(() => {
+      if (!syncHash) return;
+      const apply = () => {
+        const id = decodeURIComponent(window.location.hash.slice(1));
+        if (id) setHashValue(id);
+      };
+      apply();
+      window.addEventListener("hashchange", apply);
+      return () => window.removeEventListener("hashchange", apply);
+    }, [syncHash]);
+    if (!syncHash) {
+      return /* @__PURE__ */ jsx3(Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value, onChange }));
+    }
+    const handleChange = (next) => {
+      if (next) {
+        window.history.replaceState(null, "", `#${next}`);
+        setHashValue(next);
+      }
+      onChange == null ? void 0 : onChange(next);
+    };
+    return /* @__PURE__ */ jsx3(Tabs, __spreadProps(__spreadValues(__spreadValues({}, defaults), props), { value: value != null ? value : hashValue, onChange: handleChange }));
   }
   SdTabsRoot.List = scrollable ? SdScrollableList : Tabs.List;
   SdTabsRoot.Tab = Tabs.Tab;
@@ -854,7 +877,7 @@ function BubbleStep({ item, index, isLast }) {
       {
         style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
         children: [
-          /* @__PURE__ */ jsx19(SdNumberIcon, { value: String(index + 1).padStart(2, "0") }),
+          /* @__PURE__ */ jsx19(SdNumberIcon, { value: String(index + 1).padStart(2, "0"), color: "primary" }),
           !isLast && /* @__PURE__ */ jsx19(
             Box4,
             {
@@ -1263,7 +1286,7 @@ var SdCtaSubtle = SdCta.Subtle;
 var SdCtaInline = SdCta.Inline;
 
 // ui/molecule/Solution.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { Button as Button2, Divider as Divider2, Group as Group8, Stack as Stack13, ThemeIcon as ThemeIcon4 } from "@mantine/core";
 import Link3 from "next/link";
 
@@ -1304,7 +1327,7 @@ var SdSolutionCardGrid = SdSolutionCard.Grid;
 import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 function Filtered({ items, allLabel = "\uC804\uCCB4", cols, onSelect }) {
   const categories = ["all", ...Array.from(new Set(items.map((i) => i.category)))];
-  const [active, setActive] = useState("all");
+  const [active, setActive] = useState2("all");
   const filtered = active === "all" ? items : items.filter((i) => i.category === active);
   return /* @__PURE__ */ jsxs12(Stack13, { gap: "xl", children: [
     /* @__PURE__ */ jsx25(SdTabs.Pills, { value: active, onChange: (v) => setActive(v != null ? v : "all"), children: /* @__PURE__ */ jsx25(SdTabs.Pills.List, { children: categories.map((cat) => /* @__PURE__ */ jsx25(SdTabs.Pills.Tab, { value: cat, children: cat === "all" ? allLabel : cat }, cat)) }) }),
@@ -1376,7 +1399,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)
     }
@@ -1394,7 +1423,10 @@ function Grid4({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        padding: "12px 8px"
+        padding: "12px 8px",
+        minWidth: 0,
+        // 그리드 트랙이 이미지 intrinsic width로 밀려 깨지는 것 방지
+        overflow: "hidden"
       },
       children: /* @__PURE__ */ jsx26(LogoImage, { client, height: logoHeight })
     },
@@ -1439,7 +1471,7 @@ var SdClientsGrid = Grid4;
 var SdClientsMarquee = Marquee;
 
 // ui/molecule/Map.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { Box as Box10, Stack as Stack14 } from "@mantine/core";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function MapFrame({ address, height }) {
@@ -1473,7 +1505,7 @@ function Single(_a4) {
 function Tabs2({ addresses, height = 400 }) {
   var _a4, _b, _c;
   const mapped = addresses.filter((a) => a.embbedUrl);
-  const [active, setActive] = useState2((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
+  const [active, setActive] = useState3((_b = (_a4 = mapped[0]) == null ? void 0 : _a4.label) != null ? _b : "");
   if (mapped.length === 0) return null;
   if (mapped.length === 1) return /* @__PURE__ */ jsx27(MapFrame, { address: mapped[0], height });
   const current = (_c = mapped.find((a) => a.label === active)) != null ? _c : mapped[0];
@@ -1491,11 +1523,78 @@ var SdMap = {
 var SdMapSingle = Single;
 var SdMapTabs = Tabs2;
 
+// ui/molecule/Breadcrumb.tsx
+import { Box as Box11, Breadcrumbs } from "@mantine/core";
+import { usePathname } from "next/navigation";
+import { IconChevronRight, IconHome } from "@tabler/icons-react";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+function normalizePath(href) {
+  if (!href) return "";
+  const trimmed = href.replace(/\/+$/, "");
+  return trimmed === "" ? "/" : trimmed;
+}
+function buildTrail(navItems, currentHref) {
+  const target = normalizePath(currentHref);
+  const byId = new Map(navItems.map((item) => [item.id, item]));
+  let current = navItems.find((item) => normalizePath(item.href) === target);
+  if (!current) {
+    current = navItems.filter((item) => item.href && target.startsWith(normalizePath(item.href) + "/")).sort((a, b) => normalizePath(b.href).length - normalizePath(a.href).length)[0];
+  }
+  if (!current) return [];
+  const trail = [];
+  const seen = /* @__PURE__ */ new Set();
+  let node = current;
+  while (node && !seen.has(node.id)) {
+    seen.add(node.id);
+    trail.unshift(node);
+    node = node.parentId != null ? byId.get(node.parentId) : void 0;
+  }
+  return trail;
+}
+function SdBreadcrumb(_a4) {
+  var _b = _a4, {
+    navItems,
+    currentHref,
+    homeHref = "/",
+    homeLabel = "\uD648"
+  } = _b, boxProps = __objRest(_b, [
+    "navItems",
+    "currentHref",
+    "homeHref",
+    "homeLabel"
+  ]);
+  var _a5;
+  const pathname = usePathname();
+  const trail = buildTrail(navItems, (_a5 = currentHref != null ? currentHref : pathname) != null ? _a5 : "");
+  return /* @__PURE__ */ jsx28(Box11, __spreadProps(__spreadValues({}, boxProps), { children: /* @__PURE__ */ jsxs15(
+    Breadcrumbs,
+    {
+      separator: /* @__PURE__ */ jsx28(IconChevronRight, { size: 14, stroke: 2, color: "var(--mantine-color-slate-4)" }),
+      separatorMargin: "xs",
+      children: [
+        /* @__PURE__ */ jsx28(
+          SdLink.Sub,
+          {
+            href: homeHref,
+            "aria-label": homeLabel,
+            style: { display: "inline-flex", alignItems: "center" },
+            children: /* @__PURE__ */ jsx28(IconHome, { size: 16, stroke: 2 })
+          }
+        ),
+        trail.map((item, i) => {
+          const isLast = i === trail.length - 1;
+          return isLast ? /* @__PURE__ */ jsx28(SdLink.Body, { children: item.label }, item.id) : /* @__PURE__ */ jsx28(SdLink.Sub, { href: item.href, children: item.label }, item.id);
+        })
+      ]
+    }
+  ) }));
+}
+
 // ui/organism/HeroCarousel.tsx
 import { Carousel } from "@mantine/carousel";
-import { Anchor as Anchor2, Box as Box11, Group as Group9, Stack as Stack15 } from "@mantine/core";
+import { Anchor as Anchor2, Box as Box12, Group as Group9, Stack as Stack15 } from "@mantine/core";
 import { IconArrowNarrowRight } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var variantMap = {
   primary: SdButton.Primary,
   secondary: SdButton.Secondary,
@@ -1505,13 +1604,13 @@ var variantMap = {
 function CtaButton({ cta }) {
   var _a4;
   const Button3 = variantMap[(_a4 = cta.variant) != null ? _a4 : "primary"];
-  return /* @__PURE__ */ jsx28(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx28(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx28(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx28(Button3, { size: "md", children: cta.label }) });
+  return /* @__PURE__ */ jsx29(Anchor2, { href: cta.href, underline: "never", children: cta.icon ? /* @__PURE__ */ jsx29(Button3, { size: "md", rightSection: /* @__PURE__ */ jsx29(IconArrowNarrowRight, {}), children: cta.label }) : /* @__PURE__ */ jsx29(Button3, { size: "md", children: cta.label }) });
 }
 function HeroCarousel({ slides, children }) {
-  if (children) return /* @__PURE__ */ jsx28(Fragment3, { children });
+  if (children) return /* @__PURE__ */ jsx29(Fragment3, { children });
   const filterdSlides = filterAndSort(slides);
-  return /* @__PURE__ */ jsx28(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx28(Carousel.Slide, { children: /* @__PURE__ */ jsx28(
-    Box11,
+  return /* @__PURE__ */ jsx29(Carousel, { withIndicators: true, height: "60svh", children: filterdSlides.map((slide, i) => /* @__PURE__ */ jsx29(Carousel.Slide, { children: /* @__PURE__ */ jsx29(
+    Box12,
     {
       style: {
         height: "100%",
@@ -1522,8 +1621,8 @@ function HeroCarousel({ slides, children }) {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsxs15(Stack15, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
-        /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsxs16(Stack15, { align: "center", style: { textAlign: "center", maxWidth: 780 }, px: "xl", children: [
+        /* @__PURE__ */ jsx29(
           SdTextBox.Hero,
           {
             title: slide.title,
@@ -1532,18 +1631,27 @@ function HeroCarousel({ slides, children }) {
             align: "center"
           }
         ),
-        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx28(Group9, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx28(CtaButton, { cta }, cta.href)) })
+        slide.ctas && slide.ctas.length > 0 && /* @__PURE__ */ jsx29(Group9, { gap: "sm", mt: "md", children: slide.ctas.map((cta, i2) => /* @__PURE__ */ jsx29(CtaButton, { cta }, cta.href)) })
       ] })
     }
   ) }, i)) });
 }
 
 // ui/organism/Header.tsx
-import { Box as Box12, Burger, Drawer, Group as Group10, Menu, NavLink, Stack as Stack16 } from "@mantine/core";
+import { Box as Box13, Burger, Drawer, Group as Group10, Menu, NavLink, Stack as Stack16 } from "@mantine/core";
 import { IconChevronDown } from "@tabler/icons-react";
 import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var BAR_HEIGHT = 60;
+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 {
@@ -1552,27 +1660,36 @@ function useNavTree(navItems) {
     hasAnyChildren: visibleItems.some((item) => item.parentId)
   };
 }
-function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
-  return /* @__PURE__ */ jsx29(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs16(Stack16, { gap: 0, children: [
-    topItems.map((item) => {
-      const kids = childrenOf(item.id);
-      if (kids.length === 0) {
-        return /* @__PURE__ */ jsx29(Box12, { px: "sm", py: 8, children: /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, onClick: close, children: item.label }) }, item.id);
-      }
-      return /* @__PURE__ */ jsx29(
-        NavLink,
+function MobileNavNode({ item, depth, childrenOf, close }) {
+  const kids = depth < MAX_DEPTH ? childrenOf(item.id) : [];
+  if (kids.length === 0) {
+    return /* @__PURE__ */ jsx30(Box13, { px: "sm", py: 8, children: /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, onClick: close, children: item.label }) });
+  }
+  return /* @__PURE__ */ jsx30(
+    NavLink,
+    {
+      label: item.label,
+      styles: NAV_LINK_STYLES,
+      component: item.href ? "a" : "button",
+      href: item.href,
+      childrenOffset: 28,
+      children: kids.map((kid) => /* @__PURE__ */ jsx30(
+        MobileNavNode,
         {
-          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__ */ jsx29(NavLink, { label: kid.label, href: kid.href, onClick: close }, kid.id))
+          item: kid,
+          depth: depth + 1,
+          childrenOf,
+          close
         },
-        item.id
-      );
-    }),
-    loginFlag && /* @__PURE__ */ jsx29(Stack16, { gap: "xs", mt: "md", children: /* @__PURE__ */ jsx29(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+        kid.id
+      ))
+    }
+  );
+}
+function MobileNav({ opened, close, topItems, childrenOf, loginFlag }) {
+  return /* @__PURE__ */ jsx30(Drawer, { opened, onClose: close, hiddenFrom: "sm", size: "xs", children: /* @__PURE__ */ jsxs17(Stack16, { gap: 0, children: [
+    topItems.map((item) => /* @__PURE__ */ jsx30(MobileNavNode, { item, depth: 1, childrenOf, close }, item.id)),
+    loginFlag && /* @__PURE__ */ jsx30(Stack16, { gap: "xs", mt: "md", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
   ] }) });
 }
 function MegaHeader({ navItems, loginFlag }) {
@@ -1582,9 +1699,9 @@ function MegaHeader({ navItems, loginFlag }) {
   const { focused, ref: focusRef } = useFocusWithin();
   const rootRef = useMergedRef(hoverRef, focusRef);
   const expanded = hasAnyChildren && (hovered || focused);
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx29(
-      Box12,
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(
+      Box13,
       {
         ref: rootRef,
         pos: "relative",
@@ -1594,12 +1711,12 @@ function MegaHeader({ navItems, loginFlag }) {
           borderBottom: expanded ? "1px solid var(--mantine-color-slate-2)" : void 0,
           transition: "box-shadow 0.15s"
         },
-        children: /* @__PURE__ */ jsx29(SdContainer, { children: /* @__PURE__ */ jsxs16(Group10, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx29(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx29(Logo, {}) }),
-          /* @__PURE__ */ jsx29(Group10, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        children: /* @__PURE__ */ jsx30(SdContainer, { children: /* @__PURE__ */ jsxs17(Group10, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx30(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx30(Logo, {}) }),
+          /* @__PURE__ */ jsx30(Group10, { gap: "xl", align: "flex-start", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
             const kids = childrenOf(item.id);
-            return /* @__PURE__ */ jsxs16(Stack16, { gap: 0, align: "center", children: [
-              /* @__PURE__ */ jsx29(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }) }),
+            return /* @__PURE__ */ jsxs17(Stack16, { gap: 0, align: "center", children: [
+              /* @__PURE__ */ jsx30(Group10, { h: BAR_HEIGHT, align: "center", children: /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }) }),
               kids.length > 0 && /*
                 Mantine Collapse를 쓰지 않는다 — 접힐 때 display:none이 되어
                 하위 링크가 폭 계산에서 빠졌다가 펼칠 때 다시 들어오면서
@@ -1607,8 +1724,8 @@ function MegaHeader({ navItems, loginFlag }) {
                 height 0 + overflow hidden은 폭 기여를 유지하므로 간격이 고정된다.
                 visibility:hidden이 접힌 상태의 링크를 탭 순서에서도 빼준다.
               */
-              /* @__PURE__ */ jsx29(
-                Box12,
+              /* @__PURE__ */ jsx30(
+                Box13,
                 {
                   "aria-hidden": !expanded,
                   style: {
@@ -1618,19 +1735,28 @@ function MegaHeader({ navItems, loginFlag }) {
                     visibility: expanded ? "visible" : "hidden",
                     transition: "opacity 0.15s ease"
                   },
-                  children: /* @__PURE__ */ jsx29(Stack16, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => /* @__PURE__ */ jsx29(SdLink.Sub, { href: kid.href, children: kid.label }, kid.id)) })
+                  children: /* @__PURE__ */ jsx30(Stack16, { gap: "xs", pt: 4, pb: "lg", align: "center", children: kids.map((kid) => {
+                    const grandkids = childrenOf(kid.id);
+                    if (grandkids.length === 0) {
+                      return /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                    }
+                    return /* @__PURE__ */ jsxs17(Stack16, { gap: 2, align: "center", children: [
+                      /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }),
+                      grandkids.map((gk) => /* @__PURE__ */ jsx30(SdLink.Sub, { href: gk.href, children: gk.label }, gk.id))
+                    ] }, kid.id);
+                  }) })
                 }
               )
             ] }, item.id);
           }) }),
-          /* @__PURE__ */ jsxs16(Group10, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
-            /* @__PURE__ */ jsx29(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-            loginFlag && /* @__PURE__ */ jsx29(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx29(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+          /* @__PURE__ */ jsxs17(Group10, { h: BAR_HEIGHT, align: "center", gap: "sm", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsx30(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+            loginFlag && /* @__PURE__ */ jsx30(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
           ] })
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       MobileNav,
       {
         opened,
@@ -1642,16 +1768,19 @@ function MegaHeader({ navItems, loginFlag }) {
     )
   ] });
 }
+function renderMenuLeaf(item) {
+  return item.href ? /* @__PURE__ */ jsx30(Menu.Item, { component: "a", href: item.href, children: item.label }, item.id) : /* @__PURE__ */ jsx30(Menu.Label, { children: item.label }, item.id);
+}
 function SimpleHeader({ navItems, loginFlag }) {
   const [opened, { toggle, close }] = useDisclosure();
   const { topItems, childrenOf } = useNavTree(navItems);
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx29(Box12, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ jsx29(SdContainer, { children: /* @__PURE__ */ jsxs16(Group10, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx29(Logo, {}),
-      /* @__PURE__ */ jsx29(Group10, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(Box13, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ jsx30(SdContainer, { children: /* @__PURE__ */ jsxs17(Group10, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx30(Logo, {}),
+      /* @__PURE__ */ jsx30(Group10, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
         const kids = childrenOf(item.id);
         if (kids.length === 0) {
-          return /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }, item.id);
+          return /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }, item.id);
         }
         return (
           /*
@@ -1659,7 +1788,7 @@ function SimpleHeader({ navItems, loginFlag }) {
             Menu.Target은 ref를 받을 수 있는 단일 엘리먼트여야 하므로
             SdLink/SdText가 아니라 Box를 타깃으로 두고 라벨을 그 안에 넣는다.
           */
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs17(
             Menu,
             {
               trigger: "click-hover",
@@ -1671,25 +1800,91 @@ function SimpleHeader({ navItems, loginFlag }) {
               radius: "md",
               withinPortal: true,
               children: [
-                /* @__PURE__ */ jsx29(Menu.Target, { children: /* @__PURE__ */ jsx29(Box12, { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs16(Group10, { gap: 4, align: "center", wrap: "nowrap", children: [
-                  /* @__PURE__ */ jsx29(SdLink.Body, { href: item.href, children: item.label }),
-                  /* @__PURE__ */ jsx29(IconChevronDown, { size: 14, stroke: 2 })
+                /* @__PURE__ */ jsx30(Menu.Target, { children: /* @__PURE__ */ jsx30(Box13, { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs17(Group10, { gap: 4, align: "center", wrap: "nowrap", children: [
+                  /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }),
+                  /* @__PURE__ */ jsx30(IconChevronDown, { size: 14, stroke: 2 })
                 ] }) }) }),
-                /* @__PURE__ */ jsx29(Menu.Dropdown, { children: kids.map(
-                  (kid) => kid.href ? /* @__PURE__ */ jsx29(Menu.Item, { component: "a", href: kid.href, children: kid.label }, kid.id) : /* @__PURE__ */ jsx29(Menu.Label, { children: kid.label }, kid.id)
-                ) })
+                /* @__PURE__ */ jsx30(Menu.Dropdown, { children: kids.map((kid) => {
+                  const grandkids = childrenOf(kid.id);
+                  if (grandkids.length > 0) {
+                    return /* @__PURE__ */ jsxs17(Menu.Sub, { children: [
+                      /* @__PURE__ */ jsx30(Menu.Sub.Target, { children: /* @__PURE__ */ jsx30(Menu.Sub.Item, { children: kid.label }) }),
+                      /* @__PURE__ */ jsx30(Menu.Sub.Dropdown, { children: grandkids.map(renderMenuLeaf) })
+                    ] }, kid.id);
+                  }
+                  return renderMenuLeaf(kid);
+                }) })
               ]
             },
             item.id
           )
         );
       }) }),
-      /* @__PURE__ */ jsxs16(Group10, { align: "center", gap: "sm", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx29(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
-        loginFlag && /* @__PURE__ */ jsx29(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx29(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      /* @__PURE__ */ jsxs17(Group10, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx30(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ jsx30(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx30(
+      MobileNav,
+      {
+        opened,
+        close,
+        topItems,
+        childrenOf,
+        loginFlag
+      }
+    )
+  ] });
+}
+function PanelHeader({ navItems, loginFlag }) {
+  const [opened, { toggle, close }] = useDisclosure();
+  const { topItems, childrenOf } = useNavTree(navItems);
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx30(Box13, { bg: "var(--mantine-color-body)", children: /* @__PURE__ */ jsx30(SdContainer, { children: /* @__PURE__ */ jsxs17(Group10, { h: BAR_HEIGHT, justify: "space-between", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx30(Logo, {}),
+      /* @__PURE__ */ jsx30(Group10, { gap: "xl", align: "center", wrap: "nowrap", visibleFrom: "sm", children: topItems.map((item) => {
+        const kids = childrenOf(item.id);
+        if (kids.length === 0) {
+          return /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }, item.id);
+        }
+        return /* @__PURE__ */ jsxs17(
+          Menu,
+          {
+            trigger: "click-hover",
+            openDelay: 50,
+            closeDelay: 120,
+            position: "bottom",
+            offset: 12,
+            shadow: "md",
+            radius: "md",
+            withinPortal: true,
+            children: [
+              /* @__PURE__ */ jsx30(Menu.Target, { children: /* @__PURE__ */ jsx30(Box13, { style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs17(Group10, { gap: 4, align: "center", wrap: "nowrap", children: [
+                /* @__PURE__ */ jsx30(SdLink.Body, { href: item.href, children: item.label }),
+                /* @__PURE__ */ jsx30(IconChevronDown, { size: 14, stroke: 2 })
+              ] }) }) }),
+              /* @__PURE__ */ jsx30(Menu.Dropdown, { children: /* @__PURE__ */ jsx30(Stack16, { gap: "xs", p: "xs", children: kids.map((kid) => {
+                const grandkids = childrenOf(kid.id);
+                if (grandkids.length === 0) {
+                  return /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }, kid.id);
+                }
+                return /* @__PURE__ */ jsxs17(Stack16, { gap: 2, children: [
+                  /* @__PURE__ */ jsx30(SdLink.Body, { href: kid.href, children: kid.label }),
+                  grandkids.map((gk) => /* @__PURE__ */ jsx30(SdLink.Sub, { href: gk.href, pl: "sm", children: gk.label }, gk.id))
+                ] }, kid.id);
+              }) }) })
+            ]
+          },
+          item.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs17(Group10, { align: "center", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx30(Burger, { hiddenFrom: "sm", opened, onClick: toggle }),
+        loginFlag && /* @__PURE__ */ jsx30(Group10, { gap: "sm", visibleFrom: "sm", children: /* @__PURE__ */ jsx30(SdButton.Primary, { size: "xs", children: "\uB85C\uADF8\uC778" }) })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       MobileNav,
       {
         opened,
@@ -1701,12 +1896,17 @@ 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
-import { ActionIcon, Box as Box13, Divider as Divider3, Flex, Grid as Grid5, Group as Group11, SimpleGrid as SimpleGrid6, Stack as Stack17 } from "@mantine/core";
+import { ActionIcon, Box as Box14, Divider as Divider3, Flex, Grid as Grid5, Group as Group11, SimpleGrid as SimpleGrid6, Stack as Stack17 } from "@mantine/core";
 import {
   IconBrandFacebook,
   IconBrandGithub,
@@ -1716,16 +1916,16 @@ import {
   IconBrandYoutube,
   IconWorld
 } from "@tabler/icons-react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 function FooterNavColumns({ items }) {
   const topLevel = items.filter((item) => !item.parentId);
   const getChildren = (parentId) => items.filter((item) => item.parentId === parentId);
   const CHILD_THRESH = 4;
-  return /* @__PURE__ */ jsx30(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx30(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs17(Stack17, { gap: "xs", children: [
-    /* @__PURE__ */ jsx30(SdLink.Sub, { href: group.href, children: group.label }, group.id),
+  return /* @__PURE__ */ jsx31(Fragment5, { children: topLevel.map((group) => /* @__PURE__ */ jsx31(Grid5.Col, { span: { base: 6, sm: 4, md: "auto" }, children: /* @__PURE__ */ jsxs18(Stack17, { gap: "xs", children: [
+    /* @__PURE__ */ jsx31(SdLink.Sub, { href: group.href, children: group.label }, group.id),
     getChildren(group.id).map((link, id) => {
       if (id >= CHILD_THRESH) return;
-      return /* @__PURE__ */ jsx30(SdLink.Hint, { href: link.href, children: link.label }, link.id);
+      return /* @__PURE__ */ jsx31(SdLink.Hint, { href: link.href, children: link.label }, link.id);
     })
   ] }) }, group.id)) });
 }
@@ -1739,10 +1939,10 @@ var SOCIAL_ICONS = {
   blog: IconWorld
 };
 function FooterSocials({ items }) {
-  return /* @__PURE__ */ jsx30(Group11, { gap: 0, wrap: "nowrap", children: items.map((item) => {
+  return /* @__PURE__ */ jsx31(Group11, { gap: 0, wrap: "nowrap", children: items.map((item) => {
     var _a4, _b;
     const Icon = (_a4 = SOCIAL_ICONS[item.platform]) != null ? _a4 : IconWorld;
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       ActionIcon,
       {
         component: "a",
@@ -1753,54 +1953,54 @@ function FooterSocials({ items }) {
         color: "gray",
         variant: "subtle",
         "aria-label": (_b = item.label) != null ? _b : item.platform,
-        children: /* @__PURE__ */ jsx30(Icon, { size: 18, stroke: 1.5 })
+        children: /* @__PURE__ */ jsx31(Icon, { size: 18, stroke: 1.5 })
       },
       item.url
     );
   }) });
 }
 function InfoCell({ label, children }) {
-  return /* @__PURE__ */ jsxs17(Group11, { gap: 6, wrap: "nowrap", align: "baseline", children: [
-    /* @__PURE__ */ jsx30(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
-    typeof children === "string" ? /* @__PURE__ */ jsx30(SdText.Sub, { children }) : children
+  return /* @__PURE__ */ jsxs18(Group11, { gap: 6, wrap: "nowrap", align: "baseline", children: [
+    /* @__PURE__ */ jsx31(SdText.Sub, { c: "slate.4", style: { whiteSpace: "nowrap" }, children: label }),
+    typeof children === "string" ? /* @__PURE__ */ jsx31(SdText.Sub, { children }) : children
   ] });
 }
 function FooterCompanyInfo({ company }) {
   const sortedAddresses = [...company.addresses].sort((a, b) => a.order - b.order);
-  return /* @__PURE__ */ jsxs17(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
-    /* @__PURE__ */ jsx30(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
-    /* @__PURE__ */ jsx30(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
-    sortedAddresses.map((addr) => /* @__PURE__ */ jsx30(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
-    /* @__PURE__ */ jsx30(InfoCell, { label: "Tel", children: /* @__PURE__ */ jsx30(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
-    company.fax && /* @__PURE__ */ jsx30(InfoCell, { label: "Fax", children: company.fax }),
-    /* @__PURE__ */ jsx30(InfoCell, { label: "Email", children: /* @__PURE__ */ jsx30(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
+  return /* @__PURE__ */ jsxs18(SimpleGrid6, { cols: { base: 2, sm: 2, md: 1 }, spacing: "md", verticalSpacing: 0, children: [
+    /* @__PURE__ */ jsx31(InfoCell, { label: "\uC0C1\uD638", children: company.name }),
+    /* @__PURE__ */ jsx31(InfoCell, { label: "\uC0AC\uC5C5\uC790\uB4F1\uB85D\uBC88\uD638", children: company.registrationNumber }),
+    sortedAddresses.map((addr) => /* @__PURE__ */ jsx31(InfoCell, { label: addr.label, children: addr.address }, addr.label)),
+    /* @__PURE__ */ jsx31(InfoCell, { label: "Tel", children: /* @__PURE__ */ jsx31(SdLink.Sub, { href: `tel:${company.tel}`, children: company.tel }) }),
+    company.fax && /* @__PURE__ */ jsx31(InfoCell, { label: "Fax", children: company.fax }),
+    /* @__PURE__ */ jsx31(InfoCell, { label: "Email", children: /* @__PURE__ */ jsx31(SdLink.Sub, { href: `mailto:${company.email}`, children: company.email }) })
   ] });
 }
 function SdFooter({ company, navItems, policyLinks, description }) {
   const visibleNav = filterAndSort(navItems);
   const visiblePolicy = filterAndSort(policyLinks);
-  return /* @__PURE__ */ jsx30(Box13, { component: "footer", children: /* @__PURE__ */ jsx30(SdContainer, { py: "lg", children: /* @__PURE__ */ jsxs17(Stack17, { children: [
-    /* @__PURE__ */ jsx30(Logo, { size: "sm" }),
-    description && /* @__PURE__ */ jsx30(SdText.Sub, { children: description }),
-    /* @__PURE__ */ jsxs17(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
-      /* @__PURE__ */ jsx30(Box13, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx30(FooterCompanyInfo, { company }) }),
-      visibleNav.length > 0 && /* @__PURE__ */ jsx30(Box13, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx30(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx30(FooterNavColumns, { items: visibleNav }) }) })
+  return /* @__PURE__ */ jsx31(Box14, { component: "footer", children: /* @__PURE__ */ jsx31(SdContainer, { py: "lg", children: /* @__PURE__ */ jsxs18(Stack17, { children: [
+    /* @__PURE__ */ jsx31(Logo, { size: "sm" }),
+    description && /* @__PURE__ */ jsx31(SdText.Sub, { children: description }),
+    /* @__PURE__ */ jsxs18(Flex, { direction: { base: "column", md: "row" }, gap: 48, align: "flex-start", children: [
+      /* @__PURE__ */ jsx31(Box14, { flex: { base: "0 0 auto", md: "1 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx31(FooterCompanyInfo, { company }) }),
+      visibleNav.length > 0 && /* @__PURE__ */ jsx31(Box14, { flex: { base: "0 0 auto", md: "2 1 0" }, w: { base: "100%", md: "auto" }, children: /* @__PURE__ */ jsx31(Grid5, { style: { "--grid-gutter": "24px" }, children: /* @__PURE__ */ jsx31(FooterNavColumns, { items: visibleNav }) }) })
     ] }),
-    /* @__PURE__ */ jsx30(Divider3, {}),
-    /* @__PURE__ */ jsxs17(Group11, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
-      /* @__PURE__ */ jsxs17(SdText.Sub, { children: [
+    /* @__PURE__ */ jsx31(Divider3, {}),
+    /* @__PURE__ */ jsxs18(Group11, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ jsxs18(SdText.Sub, { children: [
         "\xA9 ",
         company.copyrightYear,
         " ",
         t(company.name),
         ". All rights reserved."
       ] }),
-      /* @__PURE__ */ jsxs17(Group11, { gap: "lg", wrap: "wrap", children: [
-        visiblePolicy.length > 0 && /* @__PURE__ */ jsx30(Group11, { gap: "lg", children: visiblePolicy.map((item) => {
+      /* @__PURE__ */ jsxs18(Group11, { gap: "lg", wrap: "wrap", children: [
+        visiblePolicy.length > 0 && /* @__PURE__ */ jsx31(Group11, { gap: "lg", children: visiblePolicy.map((item) => {
           const Link4 = item.highlight ? SdLink.Body : SdLink.Sub;
-          return /* @__PURE__ */ jsx30(Link4, { href: item.href, children: item.label }, item.id);
+          return /* @__PURE__ */ jsx31(Link4, { href: item.href, children: item.label }, item.id);
         }) }),
-        company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx30(FooterSocials, { items: company.socials })
+        company.socials && company.socials.length > 0 && /* @__PURE__ */ jsx31(FooterSocials, { items: company.socials })
       ] })
     ] })
   ] }) }) });
@@ -1808,7 +2008,7 @@ function SdFooter({ company, navItems, policyLinks, description }) {
 
 // ui/organism/FeatureSection.tsx
 import { Stack as Stack18 } from "@mantine/core";
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function SdFeatureSection(_a4) {
   var _b = _a4, {
     label,
@@ -1825,8 +2025,8 @@ function SdFeatureSection(_a4) {
     "cols",
     "py"
   ]);
-  return /* @__PURE__ */ jsx31(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs18(Stack18, { gap: "xl", children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs19(Stack18, { gap: "xl", children: [
+    /* @__PURE__ */ jsx32(
       SdTextBox.Section,
       {
         label,
@@ -1837,13 +2037,13 @@ function SdFeatureSection(_a4) {
         align: "center"
       }
     ),
-    /* @__PURE__ */ jsx31(SdFeatures, { items, cols })
+    /* @__PURE__ */ jsx32(SdFeatures, { items, cols })
   ] }) }));
 }
 
 // ui/organism/TimelineSection.tsx
 import { Center as Center3, Stack as Stack19 } from "@mantine/core";
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 function SdTimelineSection(_a4) {
   var _b = _a4, {
     label,
@@ -1858,15 +2058,15 @@ function SdTimelineSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ jsx32(Center3, { children: /* @__PURE__ */ jsxs19(Stack19, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
-    /* @__PURE__ */ jsx32(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ jsx32(Center3, { children: /* @__PURE__ */ jsx32(SdTimeline, { items }) })
+  return /* @__PURE__ */ jsx33(Center3, { children: /* @__PURE__ */ jsxs20(Stack19, __spreadProps(__spreadValues({ py, gap: "md" }, boxProps), { children: [
+    /* @__PURE__ */ jsx33(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ jsx33(Center3, { children: /* @__PURE__ */ jsx33(SdTimeline, { items }) })
   ] })) });
 }
 
 // ui/organism/StepsSection.tsx
 import { Stack as Stack20 } from "@mantine/core";
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 function SdStepsSection(_a4) {
   var _b = _a4, {
     label,
@@ -1881,17 +2081,17 @@ function SdStepsSection(_a4) {
     "items",
     "py"
   ]);
-  return /* @__PURE__ */ jsx33(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs20(Stack20, { gap: "xl", children: [
-    (label || title || description) && /* @__PURE__ */ jsx33(SdTextBox.Section, { label, title, description }),
-    /* @__PURE__ */ jsx33(SdSteps.Bubble, { items })
+  return /* @__PURE__ */ jsx34(SdContainer, __spreadProps(__spreadValues({ py }, boxProps), { children: /* @__PURE__ */ jsxs21(Stack20, { gap: "xl", children: [
+    (label || title || description) && /* @__PURE__ */ jsx34(SdTextBox.Section, { label, title, description }),
+    /* @__PURE__ */ jsx34(SdSteps.Bubble, { items })
   ] }) }));
 }
 
 // ui/organism/ErrorView.tsx
 import { Center as Center4, Group as Group12, Stack as Stack21, Text as Text2 } from "@mantine/core";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 function StatusCode({ code }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Text2,
     {
       fz: 160,
@@ -1905,15 +2105,15 @@ function StatusCode({ code }) {
   );
 }
 function Page({ error, onReset, onHome }) {
-  return /* @__PURE__ */ jsx34(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx34(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack21, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ jsx34(StatusCode, { code: "500" }),
-    /* @__PURE__ */ jsxs21(Stack21, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ jsx34(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
-      /* @__PURE__ */ jsx34(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
+  return /* @__PURE__ */ jsx35(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx35(SdContainer, { children: /* @__PURE__ */ jsxs22(Stack21, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ jsx35(StatusCode, { code: "500" }),
+    /* @__PURE__ */ jsxs22(Stack21, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ jsx35(SdTitle.Section, { children: "\uC11C\uBC84\uC5D0\uC11C \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4" }),
+      /* @__PURE__ */ jsx35(SdText.Body, { maw: 480, children: "\uC608\uAE30\uCE58 \uC54A\uC740 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694." })
     ] }),
-    /* @__PURE__ */ jsxs21(Group12, { gap: "sm", justify: "center", children: [
-      /* @__PURE__ */ jsx34(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
-      onHome && /* @__PURE__ */ jsx34(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
+    /* @__PURE__ */ jsxs22(Group12, { gap: "sm", justify: "center", children: [
+      /* @__PURE__ */ jsx35(SdButton.Primary, { onClick: onReset, children: "\uB2E4\uC2DC \uC2DC\uB3C4" }),
+      onHome && /* @__PURE__ */ jsx35(SdButton.Ghost, { onClick: onHome, children: "\uD648\uC73C\uB85C" })
     ] })
   ] }) }) });
 }
@@ -1925,15 +2125,15 @@ function NotFound({
   },
   onBack = () => window.history.back()
 }) {
-  return /* @__PURE__ */ jsx34(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx34(SdContainer, { children: /* @__PURE__ */ jsxs21(Stack21, { align: "center", gap: "lg", ta: "center", children: [
-    /* @__PURE__ */ jsx34(StatusCode, { code: "404" }),
-    /* @__PURE__ */ jsxs21(Stack21, { gap: "sm", align: "center", children: [
-      /* @__PURE__ */ jsx34(SdTitle.Section, { children: title }),
-      /* @__PURE__ */ jsx34(SdText.Body, { maw: 480, children: description })
+  return /* @__PURE__ */ jsx35(Center4, { mih: "60vh", children: /* @__PURE__ */ jsx35(SdContainer, { children: /* @__PURE__ */ jsxs22(Stack21, { align: "center", gap: "lg", ta: "center", children: [
+    /* @__PURE__ */ jsx35(StatusCode, { code: "404" }),
+    /* @__PURE__ */ jsxs22(Stack21, { gap: "sm", align: "center", children: [
+      /* @__PURE__ */ jsx35(SdTitle.Section, { children: title }),
+      /* @__PURE__ */ jsx35(SdText.Body, { maw: 480, children: description })
     ] }),
-    /* @__PURE__ */ jsxs21(Group12, { gap: "sm", justify: "center", children: [
-      onHome && /* @__PURE__ */ jsx34(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
-      onBack && /* @__PURE__ */ jsx34(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
+    /* @__PURE__ */ jsxs22(Group12, { gap: "sm", justify: "center", children: [
+      onHome && /* @__PURE__ */ jsx35(SdButton.Primary, { onClick: onHome, children: "\uD648\uC73C\uB85C" }),
+      onBack && /* @__PURE__ */ jsx35(SdButton.Ghost, { onClick: onBack, children: "\uB4A4\uB85C \uAC00\uAE30" })
     ] })
   ] }) }) });
 }
@@ -1947,7 +2147,7 @@ var SdErrorViewPage = SdErrorView.Page;
 var SdErrorViewNotFound = SdErrorView.NotFound;
 
 // ui/organism/LoginView.tsx
-import { Box as Box15, Center as Center5, Checkbox as Checkbox2, Divider as Divider4, Group as Group13, Paper, SimpleGrid as SimpleGrid7, Stack as Stack22 } from "@mantine/core";
+import { Box as Box16, Center as Center5, Checkbox as Checkbox2, Divider as Divider4, Group as Group13, Paper, SimpleGrid as SimpleGrid7, Stack as Stack22 } from "@mantine/core";
 import {
   IconBrandApple,
   IconBrandGithub as IconBrandGithub2,
@@ -1973,7 +2173,7 @@ var brandDotTexture = {
 };
 
 // ui/organism/LoginView.tsx
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var SOCIAL_META = {
   google: { Icon: IconBrandGoogle, label: "\uAD6C\uAE00\uB85C \uB85C\uADF8\uC778" },
   kakao: { Icon: IconBrandKakaoTalk, label: "\uCE74\uCE74\uC624\uB85C \uB85C\uADF8\uC778" },
@@ -2002,9 +2202,9 @@ function LoginForm({
       remember: data.get("remember") === "on"
     });
   }
-  return /* @__PURE__ */ jsx35("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ jsxs22(Stack22, { gap: "md", children: [
-    error && /* @__PURE__ */ jsx35(SdText.Error, { children: error }),
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36("form", { onSubmit: handleSubmit, noValidate: true, children: /* @__PURE__ */ jsxs23(Stack22, { gap: "md", children: [
+    error && /* @__PURE__ */ jsx36(SdText.Error, { children: error }),
+    /* @__PURE__ */ jsx36(
       SdInput.Email,
       {
         name: "email",
@@ -2014,7 +2214,7 @@ function LoginForm({
         required: true
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       SdInput.Password,
       {
         name: "password",
@@ -2024,50 +2224,50 @@ function LoginForm({
         required: true
       }
     ),
-    (withRemember || findPasswordHref) && /* @__PURE__ */ jsxs22(Group13, { justify: "space-between", align: "center", wrap: "nowrap", children: [
-      withRemember ? /* @__PURE__ */ jsx35(Checkbox2, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ jsx35("span", {}),
-      findPasswordHref && /* @__PURE__ */ jsx35(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
+    (withRemember || findPasswordHref) && /* @__PURE__ */ jsxs23(Group13, { justify: "space-between", align: "center", wrap: "nowrap", children: [
+      withRemember ? /* @__PURE__ */ jsx36(Checkbox2, { name: "remember", size: "xs", label: "\uC790\uB3D9 \uB85C\uADF8\uC778" }) : /* @__PURE__ */ jsx36("span", {}),
+      findPasswordHref && /* @__PURE__ */ jsx36(SdLink.Sub, { href: findPasswordHref, children: "\uBE44\uBC00\uBC88\uD638\uB97C \uC78A\uC73C\uC168\uB098\uC694?" })
     ] }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       SdButton.Primary,
       {
         type: "submit",
         fullWidth: true,
         loading,
-        leftSection: /* @__PURE__ */ jsx35(IconLogin2, { size: 16 }),
+        leftSection: /* @__PURE__ */ jsx36(IconLogin2, { size: 16 }),
         children: submitLabel
       }
     ),
-    socials && socials.length > 0 && /* @__PURE__ */ jsxs22(Fragment6, { children: [
-      /* @__PURE__ */ jsx35(Divider4, { label: "\uB610\uB294", labelPosition: "center" }),
-      /* @__PURE__ */ jsx35(Stack22, { gap: "xs", children: socials.map((social) => {
+    socials && socials.length > 0 && /* @__PURE__ */ jsxs23(Fragment6, { children: [
+      /* @__PURE__ */ jsx36(Divider4, { label: "\uB610\uB294", labelPosition: "center" }),
+      /* @__PURE__ */ jsx36(Stack22, { gap: "xs", children: socials.map((social) => {
         var _a4;
         const { Icon, label } = SOCIAL_META[social.provider];
-        return /* @__PURE__ */ jsx35(
+        return /* @__PURE__ */ jsx36(
           SdButton.Outline,
           {
             color: "slate",
             fullWidth: true,
             type: "button",
             onClick: social.onClick,
-            leftSection: /* @__PURE__ */ jsx35(Icon, { size: 16 }),
+            leftSection: /* @__PURE__ */ jsx36(Icon, { size: 16 }),
             children: (_a4 = social.label) != null ? _a4 : label
           },
           social.provider
         );
       }) })
     ] }),
-    signUpHref && /* @__PURE__ */ jsxs22(Group13, { gap: 6, justify: "center", children: [
-      /* @__PURE__ */ jsx35(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
-      /* @__PURE__ */ jsx35(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
+    signUpHref && /* @__PURE__ */ jsxs23(Group13, { gap: 6, justify: "center", children: [
+      /* @__PURE__ */ jsx36(SdText.Sub, { children: "\uC544\uC9C1 \uACC4\uC815\uC774 \uC5C6\uC73C\uC2E0\uAC00\uC694?" }),
+      /* @__PURE__ */ jsx36(SdLink.Sub, { href: signUpHref, c: "primary.6", children: "\uD68C\uC6D0\uAC00\uC785" })
     ] }),
     children
   ] }) });
 }
 function FormHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs22(Stack22, { gap: "lg", children: [
-    /* @__PURE__ */ jsx35(Logo, { size: "sm" }),
-    /* @__PURE__ */ jsx35(SdTextBox.Card, { title, description: description != null ? description : "" })
+  return /* @__PURE__ */ jsxs23(Stack22, { gap: "lg", children: [
+    /* @__PURE__ */ jsx36(Logo, { size: "sm" }),
+    /* @__PURE__ */ jsx36(SdTextBox.Card, { title, description: description != null ? description : "" })
   ] });
 }
 function Card7(_a4) {
@@ -2080,9 +2280,9 @@ function Card7(_a4) {
     "description",
     "mih"
   ]);
-  return /* @__PURE__ */ jsx35(Center5, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ jsx35(Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ jsxs22(Stack22, { gap: "xl", children: [
-    /* @__PURE__ */ jsx35(FormHeader, { title, description }),
-    /* @__PURE__ */ jsx35(LoginForm, __spreadValues({}, formProps))
+  return /* @__PURE__ */ jsx36(Center5, { mih, bg: "slate.0", p: "md", children: /* @__PURE__ */ jsx36(Paper, { w: "100%", maw: 420, p: { base: "lg", sm: "xl" }, radius: "lg", withBorder: true, shadow: "sm", children: /* @__PURE__ */ jsxs23(Stack22, { gap: "xl", children: [
+    /* @__PURE__ */ jsx36(FormHeader, { title, description }),
+    /* @__PURE__ */ jsx36(LoginForm, __spreadValues({}, formProps))
   ] }) }) });
 }
 function Split(_a4) {
@@ -2099,16 +2299,16 @@ function Split(_a4) {
     "brandDescription",
     "mih"
   ]);
-  return /* @__PURE__ */ jsxs22(SimpleGrid7, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
-    /* @__PURE__ */ jsxs22(
-      Box15,
+  return /* @__PURE__ */ jsxs23(SimpleGrid7, { cols: { base: 1, md: 2 }, spacing: 0, mih, children: [
+    /* @__PURE__ */ jsxs23(
+      Box16,
       {
         visibleFrom: "md",
         pos: "relative",
         style: __spreadValues({ overflow: "hidden", display: "flex", alignItems: "flex-end" }, brandSurface),
         children: [
-          /* @__PURE__ */ jsx35(Box15, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
-          /* @__PURE__ */ jsx35(Box15, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(Box16, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ jsx36(Box16, { pos: "relative", p: 48, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx36(
             SdTextBox.Hero,
             {
               title: brandTitle,
@@ -2122,9 +2322,9 @@ function Split(_a4) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx35(Center5, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ jsxs22(Stack22, { gap: "xl", w: "100%", maw: 400, children: [
-      /* @__PURE__ */ jsx35(FormHeader, { title, description }),
-      /* @__PURE__ */ jsx35(LoginForm, __spreadValues({}, formProps))
+    /* @__PURE__ */ jsx36(Center5, { p: { base: "md", sm: "xl" }, bg: "white", children: /* @__PURE__ */ jsxs23(Stack22, { gap: "xl", w: "100%", maw: 400, children: [
+      /* @__PURE__ */ jsx36(FormHeader, { title, description }),
+      /* @__PURE__ */ jsx36(LoginForm, __spreadValues({}, formProps))
     ] }) })
   ] });
 }
@@ -2138,11 +2338,11 @@ var SdLoginViewCard = SdLoginView.Card;
 var SdLoginViewSplit = SdLoginView.Split;
 
 // ui/organism/Result.tsx
-import { Box as Box16, Center as Center6, Group as Group14, Stack as Stack23 } from "@mantine/core";
+import { Box as Box17, Center as Center6, Group as Group14, Stack as Stack23 } from "@mantine/core";
 import { IconCircleCheck, IconCircleX } from "@tabler/icons-react";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function ResultIcon({ color, Icon }) {
-  return /* @__PURE__ */ jsx36(Center6, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ jsx36(Icon, { size: 48, stroke: 1.5, color: `var(--mantine-color-${color}-6)` }) });
+  return /* @__PURE__ */ jsx37(Center6, { w: 88, h: 88, bg: `${color}.0`, style: { borderRadius: "50%" }, "aria-hidden": true, children: /* @__PURE__ */ jsx37(Icon, { size: 48, stroke: 1.5, color: `var(--mantine-color-${color}-6)` }) });
 }
 function createResult(defaults) {
   return function SdResult2({
@@ -2153,16 +2353,16 @@ function createResult(defaults) {
     children,
     mih = "60vh"
   }) {
-    return /* @__PURE__ */ jsx36(Center6, { mih, children: /* @__PURE__ */ jsx36(SdContainer, { children: /* @__PURE__ */ jsxs23(Stack23, { align: "center", gap: "lg", ta: "center", children: [
-      /* @__PURE__ */ jsx36(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
-      /* @__PURE__ */ jsxs23(Stack23, { gap: "sm", align: "center", children: [
-        /* @__PURE__ */ jsx36(SdTitle.Section, { children: title }),
-        description && /* @__PURE__ */ jsx36(SdText.Body, { maw: 480, children: description })
+    return /* @__PURE__ */ jsx37(Center6, { mih, children: /* @__PURE__ */ jsx37(SdContainer, { children: /* @__PURE__ */ jsxs24(Stack23, { align: "center", gap: "lg", ta: "center", children: [
+      /* @__PURE__ */ jsx37(ResultIcon, { color: defaults.color, Icon: defaults.Icon }),
+      /* @__PURE__ */ jsxs24(Stack23, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ jsx37(SdTitle.Section, { children: title }),
+        description && /* @__PURE__ */ jsx37(SdText.Body, { maw: 480, children: description })
       ] }),
-      children && /* @__PURE__ */ jsx36(Box16, { children }),
-      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs23(Group14, { gap: "sm", justify: "center", children: [
-        primaryAction && /* @__PURE__ */ jsx36(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
-        secondaryAction && /* @__PURE__ */ jsx36(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
+      children && /* @__PURE__ */ jsx37(Box17, { children }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs24(Group14, { gap: "sm", justify: "center", children: [
+        primaryAction && /* @__PURE__ */ jsx37(SdButton.Primary, { onClick: primaryAction.onClick, children: primaryAction.label }),
+        secondaryAction && /* @__PURE__ */ jsx37(SdButton.Ghost, { onClick: secondaryAction.onClick, children: secondaryAction.label })
       ] })
     ] }) }) });
   };
@@ -2186,10 +2386,11 @@ var SdResultError = SdResult.Error;
 
 // ui/template/MainLayout.tsx
 import { AppShell } from "@mantine/core";
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 var headers = {
   mega: SdHeader.Mega,
-  simple: SdHeader.Simple
+  simple: SdHeader.Simple,
+  panel: SdHeader.Panel
 };
 function MainLayout({
   children,
@@ -2199,45 +2400,65 @@ function MainLayout({
   headerVariant = "mega"
 }) {
   const Header = headers[headerVariant];
-  return /* @__PURE__ */ jsxs24(AppShell, { header: { height: 60 }, children: [
-    /* @__PURE__ */ jsx37(AppShell.Header, { children: /* @__PURE__ */ jsx37(Header, { navItems, loginFlag }) }),
-    /* @__PURE__ */ jsx37(AppShell.Main, { children }),
-    /* @__PURE__ */ jsx37(SdFooter, { company: companyInfo, navItems })
+  return /* @__PURE__ */ jsxs25(AppShell, { header: { height: 60 }, children: [
+    /* @__PURE__ */ jsx38(AppShell.Header, { children: /* @__PURE__ */ jsx38(Header, { navItems, loginFlag }) }),
+    /* @__PURE__ */ jsx38(AppShell.Main, { children }),
+    /* @__PURE__ */ jsx38(SdFooter, { company: companyInfo, navItems })
   ] });
 }
 
 // ui/template/PageLayout.tsx
-import { Box as Box17, Divider as Divider5, Group as Group15, Space, Stack as Stack24 } from "@mantine/core";
-import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Box as Box18, Divider as Divider5, Group as Group15, Space, Stack as Stack24 } from "@mantine/core";
+import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 var HERO_MIN_H = "38svh";
 var HERO_PY = { base: 56, sm: 88 };
 var HERO_MAW = 680;
-function Content({ children }) {
-  return /* @__PURE__ */ jsx38(SdContainer, { py: "xl", children: /* @__PURE__ */ jsx38(Stack24, { gap: "xl", children }) });
+function Content({
+  children,
+  navItems,
+  breadcrumb = true,
+  currentHref
+}) {
+  const showBreadcrumb = breadcrumb && !!navItems && navItems.length > 0;
+  return /* @__PURE__ */ jsxs26(SdContainer, { py: "xl", children: [
+    showBreadcrumb && /* @__PURE__ */ jsx39(SdBreadcrumb, { navItems, currentHref, mb: "lg" }),
+    /* @__PURE__ */ jsx39(Stack24, { gap: "xl", children })
+  ] });
 }
 function LayoutGap() {
-  return /* @__PURE__ */ jsx38(Space, { h: 48 });
+  return /* @__PURE__ */ jsx39(Space, {});
 }
-function Minimal({ label, title, description, children }) {
-  return /* @__PURE__ */ jsxs25(Plain2, { children: [
-    /* @__PURE__ */ jsx38(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
-    /* @__PURE__ */ jsx38(Divider5, {}),
+function Minimal({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsxs26(Plain2, { navItems, breadcrumb, currentHref, children: [
+    /* @__PURE__ */ jsx39(LayoutGap, {}),
+    /* @__PURE__ */ jsx39(SdTextBox.Section, { label, title, description: description != null ? description : "" }),
+    /* @__PURE__ */ jsx39(Divider5, {}),
     children
   ] });
 }
-function Plain2({ children }) {
-  return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    /* @__PURE__ */ jsx38(LayoutGap, {}),
-    /* @__PURE__ */ jsx38(Content, { children })
-  ] });
+function Plain2({
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsx39(Fragment7, { children: /* @__PURE__ */ jsx39(Content, { navItems, breadcrumb, currentHref, children }) });
 }
 function HeroCopy({ label, title, description }) {
-  return /* @__PURE__ */ jsxs25(Stack24, { gap: "md", maw: HERO_MAW, children: [
-    label && /* @__PURE__ */ jsxs25(Group15, { gap: "sm", align: "center", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx38(Box17, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
-      /* @__PURE__ */ jsx38(SdText.Eyebrow, { c: "primary.1", children: label })
+  return /* @__PURE__ */ jsxs26(Stack24, { gap: "md", maw: HERO_MAW, children: [
+    label && /* @__PURE__ */ jsxs26(Group15, { gap: "sm", align: "center", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx39(Box18, { w: 28, h: 2, bg: "primary.3", style: { borderRadius: 2 } }),
+      /* @__PURE__ */ jsx39(SdText.Eyebrow, { c: "primary.1", children: label })
     ] }),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       SdTextBox.Hero,
       {
         title,
@@ -2250,10 +2471,19 @@ function HeroCopy({ label, title, description }) {
     )
   ] });
 }
-function Image2({ image, label, title, description, children }) {
-  return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    /* @__PURE__ */ jsxs25(
-      Box17,
+function Image2({
+  image,
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsxs26(
+      Box18,
       {
         pos: "relative",
         style: {
@@ -2266,8 +2496,8 @@ function Image2({ image, label, title, description, children }) {
           backgroundColor: "var(--mantine-color-slate-9)"
         },
         children: [
-          /* @__PURE__ */ jsx38(
-            Box17,
+          /* @__PURE__ */ jsx39(
+            Box18,
             {
               "aria-hidden": true,
               pos: "absolute",
@@ -2277,17 +2507,25 @@ function Image2({ image, label, title, description, children }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx38(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx38(HeroCopy, { label, title, description }) })
+          /* @__PURE__ */ jsx39(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx39(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx38(Content, { children })
+    /* @__PURE__ */ jsx39(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
-function Brand({ label, title, description, children }) {
-  return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    /* @__PURE__ */ jsxs25(
-      Box17,
+function Brand({
+  label,
+  title,
+  description,
+  children,
+  navItems,
+  breadcrumb,
+  currentHref
+}) {
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsxs26(
+      Box18,
       {
         pos: "relative",
         style: __spreadValues({
@@ -2298,12 +2536,12 @@ function Brand({ label, title, description, children }) {
           borderBottom: "1px solid var(--mantine-color-slate-8)"
         }, brandSurface),
         children: [
-          /* @__PURE__ */ jsx38(Box17, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
-          /* @__PURE__ */ jsx38(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx38(HeroCopy, { label, title, description }) })
+          /* @__PURE__ */ jsx39(Box18, { "aria-hidden": true, pos: "absolute", inset: 0, style: brandDotTexture }),
+          /* @__PURE__ */ jsx39(SdContainer, { pos: "relative", py: HERO_PY, style: { zIndex: 1, width: "100%" }, children: /* @__PURE__ */ jsx39(HeroCopy, { label, title, description }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx38(Content, { children })
+    /* @__PURE__ */ jsx39(Content, { navItems, breadcrumb, currentHref, children })
   ] });
 }
 var PageLayout = {
@@ -2565,7 +2803,6 @@ var theme = createTheme({
     Anchor: {
       defaultProps: { c: "slate.5", fz: "sm", underline: "never" }
     },
-    // SdHeader 모바일 드로어의 2단 아코디언 타이포를 SdLink와 맞춘다.
     NavLink: {
       defaultProps: { c: "slate.7", fz: "sm" }
     },
@@ -2593,6 +2830,7 @@ export {
   SdBadgePrimary,
   SdBadgeSuccess,
   SdBadgeWarning,
+  SdBreadcrumb,
   SdButton,
   SdButtonCancel,
   SdButtonDelete,
@@ -2624,6 +2862,7 @@ export {
   SdFooter,
   SdHeader,
   SdHeaderMega,
+  SdHeaderPanel,
   SdHeaderSimple,
   SdInput,
   SdInputAutocomplete,