@stn-uiux/pub-ui-react 0.1.89 → 0.1.90

package/dist/index.js

@@ -8439,18 +8439,19 @@ var StnStack = forwardRef38(function StnStack2({
 });
 
 // src/components/topology/stnTopologyShared.ts
-var TOPOLOGY_NODE_SIZE_MAP = {
+var TOPOLOGY_GRAPH_NODE_SIZE = {
   xs: 6,
-  // var(--stn-topology-node-radius-xs) = 6px (직경 12px, --stn-topology-node-size-xs)
+  // var(--stn-topology-graph-node-radius-xs) = 6px (직경 12px, --stn-topology-graph-node-size-xs)
   sm: 8,
-  // var(--stn-topology-node-radius-sm) = 8px (직경 16px, --stn-topology-node-size-sm)
+  // var(--stn-topology-graph-node-radius-sm) = 8px (직경 16px, --stn-topology-graph-node-size-sm)
   md: 10,
-  // var(--stn-topology-node-radius-md) = 10px (직경 20px, --stn-topology-node-size-md)
+  // var(--stn-topology-graph-node-radius-md) = 10px (직경 20px, --stn-topology-graph-node-size-md)
   lg: 12,
-  // var(--stn-topology-node-radius-lg) = 12px (직경 24px, --stn-topology-node-size-lg)
+  // var(--stn-topology-graph-node-radius-lg) = 12px (직경 24px, --stn-topology-graph-node-size-lg)
   xl: 14
-  // var(--stn-topology-node-radius-xl) = 14px (직경 28px, --stn-topology-node-size-xl)
+  // var(--stn-topology-graph-node-radius-xl) = 14px (직경 28px, --stn-topology-graph-node-size-xl)
 };
+var TOPOLOGY_NODE_SIZE_MAP = TOPOLOGY_GRAPH_NODE_SIZE;
 var STN_TOPOLOGY_NODE_SHAPES = [
   "circle",
   "square",
@@ -8562,13 +8563,14 @@ var STN_TOPOLOGY_STATUS_COLORS = {
   }
 };
 var TOPOLOGY_NODE_STROKE = 1.2;
-var STN_TOPOLOGY_NODE_SIZE = {
-  xs: { r: 6, icon: 8, countFont: 8, labelFont: 10, statusFont: 9, stroke: TOPOLOGY_NODE_STROKE },
-  sm: { r: 8, icon: 10, countFont: 8, labelFont: 10, statusFont: 9, stroke: TOPOLOGY_NODE_STROKE },
-  md: { r: 10, icon: 12, countFont: 9, labelFont: 11, statusFont: 10, stroke: TOPOLOGY_NODE_STROKE },
-  lg: { r: 12, icon: 14, countFont: 10, labelFont: 11, statusFont: 10, stroke: TOPOLOGY_NODE_STROKE },
-  xl: { r: 14, icon: 16, countFont: 11, labelFont: 12, statusFont: 11, stroke: TOPOLOGY_NODE_STROKE }
+var TOPOLOGY_RING_NODE_SIZE = {
+  xs: { r: 12, size: 24, icon: 14, countFont: 9, labelFont: 11, statusFont: 10, stroke: TOPOLOGY_NODE_STROKE },
+  sm: { r: 16, size: 32, icon: 16, countFont: 10, labelFont: 11, statusFont: 10, stroke: TOPOLOGY_NODE_STROKE },
+  md: { r: 20, size: 40, icon: 18, countFont: 11, labelFont: 12, statusFont: 11, stroke: TOPOLOGY_NODE_STROKE },
+  lg: { r: 24, size: 48, icon: 22, countFont: 12, labelFont: 13, statusFont: 12, stroke: TOPOLOGY_NODE_STROKE },
+  xl: { r: 28, size: 56, icon: 26, countFont: 13, labelFont: 14, statusFont: 13, stroke: TOPOLOGY_NODE_STROKE }
 };
+var STN_TOPOLOGY_NODE_SIZE = TOPOLOGY_RING_NODE_SIZE;
 function formatTopologyCount(count) {
   if (count == null || count === "") return "0";
   if (typeof count === "string") return count;
@@ -8682,7 +8684,7 @@ function StnTopologyNodeItem({
         fontSize: metrics.countFont,
         fontWeight: 800,
         lineHeight: 1,
-        color: color || "var(--stn-static-white)"
+        color: color || "var(--stn-text-primary)"
       },
       children: countText
     }
@@ -9248,17 +9250,17 @@ function renderTopologyNodeShapeGeometry({
   const strokeW = strokeWidth ?? 1.4;
   const strokeStyle = { strokeWidth: strokeW };
   if (shape === "square") {
-    const s = r * 1.6;
+    const s = r * 2;
     const half = s / 2;
-    const rx = Math.max(1.5, 2 * (r / 10));
+    const rx = Math.max(1.5, 2.5 * (r / 10));
     const sSmall = s * innerRatio;
     const halfSmall = sSmall / 2;
     const rxSmall = rx * 0.75;
-    const sSolid = s * solidRatio;
-    const halfSolid = sSolid / 2;
-    const rxSolid = rx * 0.85;
+    const sEqual = r * 1.7;
+    const halfEqual = sEqual / 2;
+    const rxEqual = rx * 0.85;
     if (variant === "solid") {
-      return /* @__PURE__ */ jsx62("rect", { x: -halfSolid, y: -halfSolid, width: sSolid, height: sSolid, rx: rxSolid, fill: statusColor });
+      return /* @__PURE__ */ jsx62("rect", { x: -halfEqual, y: -halfEqual, width: sEqual, height: sEqual, rx: rxEqual, fill: statusColor });
     }
     if (variant === "combined") {
       return /* @__PURE__ */ jsxs49("g", { children: [
@@ -9266,7 +9268,7 @@ function renderTopologyNodeShapeGeometry({
         /* @__PURE__ */ jsx62("rect", { x: -halfSmall, y: -halfSmall, width: sSmall, height: sSmall, rx: rxSmall, fill: statusColor })
       ] });
     }
-    return /* @__PURE__ */ jsx62("rect", { x: -halfSolid, y: -halfSolid, width: sSolid, height: sSolid, rx: rxSolid, fill: surfaceBg, stroke: statusColor, strokeWidth: strokeW, style: strokeStyle });
+    return /* @__PURE__ */ jsx62("rect", { x: -halfEqual, y: -halfEqual, width: sEqual, height: sEqual, rx: rxEqual, fill: surfaceBg, stroke: statusColor, strokeWidth: strokeW, style: strokeStyle });
   }
   if (shape === "triangle") {
     const R2 = r * 1.25;
@@ -9769,6 +9771,43 @@ function StnTopologyGraphMinimap({ className, style }) {
     }
   );
 }
+function StnTopologyGraphZoomLevel({
+  resetOnClick = true,
+  targetZoom = 1,
+  className,
+  style
+}) {
+  const { zoom, setZoom, isMinimapOpen, showMinimap } = useStnTopologyGraph();
+  const percent = Math.round(zoom * 100);
+  const minimapModifier = showMinimap ? isMinimapOpen ? "stn-topology-zoom-badge--with-minimap" : "stn-topology-zoom-badge--with-minimap-collapsed" : void 0;
+  return /* @__PURE__ */ jsx63(
+    "div",
+    {
+      className: cn("stn-topology-zoom-badge", minimapModifier, resetOnClick && "is-clickable", className),
+      style,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (resetOnClick) {
+          setZoom(targetZoom);
+        }
+      },
+      title: `\uD604\uC7AC \uC90C \uBC30\uC728: ${percent}%${resetOnClick ? " (\uD074\uB9AD \uC2DC 100% \uB9AC\uC14B)" : ""}`,
+      "aria-label": `\uD604\uC7AC \uC90C \uBC30\uC728: ${percent}%`,
+      role: resetOnClick ? "button" : void 0,
+      tabIndex: resetOnClick ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (resetOnClick && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          setZoom(targetZoom);
+        }
+      },
+      children: /* @__PURE__ */ jsxs50("span", { className: "stn-topology-zoom-badge__text", children: [
+        percent,
+        "%"
+      ] })
+    }
+  );
+}
 function render3DNodeGlyph({
   shape,
   variant,
@@ -9855,13 +9894,17 @@ function renderCurrentNodeRing({
     }
   ) });
 }
-function StnTopologyGraphViewport({ className, style }) {
+function StnTopologyGraphViewport({ className, style, viewBox: customViewBox }) {
   const {
     viewMode,
     renderGridLines,
     projectedLinks,
     sortedNodes,
     zoom,
+    fixedNodeSize,
+    calibrateScreenPixels,
+    screenPixelsRatio = 1,
+    dynamicViewBox,
     selectedId,
     onNodeClick,
     onNodeContextMenu,
@@ -9880,6 +9923,8 @@ function StnTopologyGraphViewport({ className, style }) {
     setHoveredNodeId,
     hasDraggedRef
   } = useStnTopologyGraph();
+  const calibration = calibrateScreenPixels && screenPixelsRatio > 0 ? 1 / screenPixelsRatio : 1;
+  const activeViewBox = customViewBox ?? dynamicViewBox ?? "-250 -250 500 500";
   const [hoveredLinkKey, setHoveredLinkKey] = useState17(null);
   const isAnyLinkHovered = hoveredLinkKey !== null;
   return /* @__PURE__ */ jsxs50(
@@ -9888,7 +9933,7 @@ function StnTopologyGraphViewport({ className, style }) {
       className: cn("stn-topology-graph__svg", className),
       width: "100%",
       height: "100%",
-      viewBox: "-250 -250 500 500",
+      viewBox: activeViewBox,
       style: { display: "block", pointerEvents: "auto", ...style },
       onClick: (e) => {
         onCanvasClick?.(e);
@@ -9925,7 +9970,8 @@ function StnTopologyGraphViewport({ className, style }) {
               if (isDot) {
                 const midSX = (n1.sx + n2.sx) / 2;
                 const midSY = (n1.sy + n2.sy) / 2;
-                const dotRadius = Math.max(2, 3 * depthScale * Math.min(1.2, Math.max(0.6, zoom)));
+                const avgScale = n1 && n2 ? (n1.scale + n2.scale) / 2 : 1;
+                const dotRadius = fixedNodeSize ? 3 * calibration : Math.max(1.5, 3 * avgScale * calibration);
                 const dotFill = link.color ?? statusColor ?? "var(--stn-topology-node-normal)";
                 dotElement = /* @__PURE__ */ jsx63("circle", { cx: midSX, cy: midSY, r: dotRadius, fill: dotFill, opacity: effectiveLineOpacity });
               }
@@ -10044,7 +10090,7 @@ function StnTopologyGraphViewport({ className, style }) {
         ),
         /* @__PURE__ */ jsx63("g", { className: "stn-topology-nodes-group", children: sortedNodes.map((n) => {
           const depthScale = 550 / (550 + n.depth);
-          const scale = Math.max(0.4, n.scale);
+          const scale = fixedNodeSize ? calibration : Math.max(0.3, n.scale * calibration);
           const baseOpacity = Math.max(0.75, Math.min(1, depthScale));
           const opacity = resolveTopologyOpacity(n.opacity, baseOpacity);
           const isSelected = (Array.isArray(selectedId) ? selectedId.some((sid) => String(sid) === String(n.id)) : selectedId !== void 0 && selectedId !== null && String(selectedId) === String(n.id)) || Boolean(n.isCurrent) || Boolean(n.isSelected);
@@ -10062,7 +10108,7 @@ function StnTopologyGraphViewport({ className, style }) {
           const statusColor = n.color ? n.color : isCritical ? "var(--stn-grade-critical)" : isMajor ? "var(--stn-grade-major)" : isMinor ? "var(--stn-grade-minor)" : isWarning ? "var(--stn-grade-warning)" : isPrimary || isCore ? "var(--stn-primary)" : isNormal || isNeutral ? "var(--stn-topology-node-normal)" : "var(--stn-topology-node-normal)";
           const baseRadius = typeof n.size === "number" ? n.size : n.size && TOPOLOGY_NODE_SIZE_MAP[n.size] ? TOPOLOGY_NODE_SIZE_MAP[n.size] : isCore ? TOPOLOGY_NODE_SIZE_MAP.lg : TOPOLOGY_NODE_SIZE_MAP.md;
           const r = baseRadius * scale;
-          const strokeWidth = "var(--stn-topology-node-stroke, 1.2px)";
+          const strokeWidth = calibrateScreenPixels ? Number((1.2 * calibration).toFixed(2)) : "var(--stn-topology-node-stroke, 1.2px)";
           const rOuter = Math.max(baseRadius, (baseRadius + 2) * scale);
           const pulseRing = hasPulse && /* @__PURE__ */ jsxs50("g", { children: [
             /* @__PURE__ */ jsx63(
@@ -10103,9 +10149,10 @@ function StnTopologyGraphViewport({ className, style }) {
             if (renderBadge) {
               topBadgeElement = renderBadge(n, { r, position: "top", badgeText });
             } else {
-              const bW = 140;
-              const bH = 30;
-              const badgeScale = 0.62 * Math.max(0.75, Math.min(1.25, scale));
+              const badgeText2 = String(n.badge);
+              const bW = Math.max(140, badgeText2.length * 14 + 36);
+              const badgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
+              const bH = Math.max(30, Math.round(26 * badgeScale));
               const badgeHalfHeight = 18 * badgeScale / 2;
               const posY = -r - 2.5 - badgeHalfHeight - bH / 2;
               topBadgeElement = /* @__PURE__ */ jsx63(
@@ -10126,7 +10173,7 @@ function StnTopologyGraphViewport({ className, style }) {
                         {
                           color: n.badgeColor ?? "primary",
                           appearance: n.badgeAppearance ?? "solid",
-                          badgeContent: badgeText,
+                          badgeContent: badgeText2,
                           ...n.badgeProps
                         }
                       )
@@ -10147,9 +10194,9 @@ function StnTopologyGraphViewport({ className, style }) {
             } else if (renderBadge && n.badgePlacement === "bottom") {
               bottomLabelElement = renderBadge(n, { r, position: "bottom", badgeText: labelText });
             } else if (mode === "badge") {
-              const bW = 140;
-              const bH = 30;
-              const badgeScale = 0.62 * Math.max(0.75, Math.min(1.25, scale));
+              const bW = Math.max(160, Math.min(360, labelText.length * 12 + 40));
+              const badgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
+              const bH = Math.max(30, Math.round(24 * badgeScale));
               const badgeHalfHeight = 16 * badgeScale / 2;
               const posY = r + 2.5 + badgeHalfHeight - bH / 2;
               bottomLabelElement = /* @__PURE__ */ jsx63(
@@ -10180,6 +10227,7 @@ function StnTopologyGraphViewport({ className, style }) {
                 }
               );
             } else {
+              const plainFontSize = calibrateScreenPixels ? Number((9.5 * calibration).toFixed(1)) : fixedNodeSize ? TOPOLOGY_LINK_LABEL_SPEC.baseFontSize : Number((TOPOLOGY_LINK_LABEL_SPEC.baseFontSize * Math.max(0.65, Math.min(1.4, depthScale))).toFixed(1));
               bottomLabelElement = /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__bottom-label stn-topology-node__bottom-label--plain", transform: `translate(0, ${bottomY})`, children: /* @__PURE__ */ jsx63(
                 "text",
                 {
@@ -10189,11 +10237,11 @@ function StnTopologyGraphViewport({ className, style }) {
                   dominantBaseline: "middle",
                   fill: "var(--stn-topology-node-label-fg, var(--stn-text-primary))",
                   stroke: "var(--stn-topology-node-label-halo, var(--stn-elevation-surface-0))",
-                  strokeWidth: 2.4,
+                  strokeWidth: TOPOLOGY_LINK_LABEL_SPEC.haloStrokeWidth,
                   paintOrder: "stroke",
                   strokeLinejoin: "round",
-                  fontSize: 5.8,
-                  fontWeight: 700,
+                  fontSize: plainFontSize,
+                  fontWeight: 600,
                   letterSpacing: "-0.2px",
                   children: labelText
                 }
@@ -10220,7 +10268,7 @@ function StnTopologyGraphViewport({ className, style }) {
                 if (hasDraggedRef.current) {
                   return;
                 }
-                onNodeClick?.(n);
+                onNodeClick?.(n, e);
               },
               onContextMenu: (e) => {
                 if (onNodeContextMenu) {
@@ -10244,7 +10292,7 @@ function StnTopologyGraphViewport({ className, style }) {
           const isTooltipVisible = Boolean(showTooltips) || hoveredNodeId === n.id;
           if (!isTooltipVisible || !n.label) return null;
           const depthScale = 550 / (550 + n.depth);
-          const scale = Math.max(0.4, n.scale);
+          const scale = fixedNodeSize ? calibration : Math.max(0.4, n.scale * calibration);
           const baseRadius = typeof n.size === "number" ? n.size : n.size && TOPOLOGY_NODE_SIZE_MAP[n.size] ? TOPOLOGY_NODE_SIZE_MAP[n.size] : Boolean(n.isCore) ? TOPOLOGY_NODE_SIZE_MAP.lg : TOPOLOGY_NODE_SIZE_MAP.md;
           const r = baseRadius * scale;
           const isCritical = n.status === "critical";
@@ -10256,14 +10304,18 @@ function StnTopologyGraphViewport({ className, style }) {
           const tooltipBg = tone === "primary" ? "var(--stn-primary)" : tone === "critical" ? "var(--stn-grade-critical)" : tone === "warning" ? "var(--stn-grade-warning)" : tone === "major" ? "var(--stn-grade-major)" : tone === "minor" ? "var(--stn-grade-minor)" : "var(--stn-tooltip-bg-neutral)";
           const tooltipFg = "var(--stn-tooltip-fg-neutral)";
           const hasBadge = Boolean(n.badge) && (n.badgePlacement ?? "top") === "top";
-          const badgeHeight = hasBadge ? 14 : 0;
-          const tooltipH = 11;
-          const arrowH = 2.5;
-          const arrowW = 5;
-          const gap = 2.5;
+          const topBadgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
+          const badgeHeight = hasBadge ? 18 * topBadgeScale : 0;
+          const tooltipScale = calibrateScreenPixels ? calibration : fixedNodeSize ? 1 : Math.max(0.65, Math.min(1.4, depthScale));
+          const tooltipH = 18 * tooltipScale;
+          const arrowH = 3.5 * tooltipScale;
+          const arrowW = 7 * tooltipScale;
+          const gap = 3.5 * tooltipScale;
           const tooltipBoxY = -r - badgeHeight - gap - arrowH - tooltipH;
           const charCount = n.label.length;
-          const tooltipW = Math.max(22, Math.min(160, charCount * 4.4 + 9));
+          const tooltipFontSize = Number((10 * tooltipScale).toFixed(1));
+          const tooltipW = Math.max(32 * tooltipScale, charCount * 6.8 * tooltipScale + 16 * tooltipScale);
+          const rx = 3 * tooltipScale;
           const nodeOpacity = resolveTopologyOpacity(n.opacity, Math.max(0.75, Math.min(1, depthScale)));
           return /* @__PURE__ */ jsx63(
             "g",
@@ -10284,7 +10336,7 @@ function StnTopologyGraphViewport({ className, style }) {
                         y: 0,
                         width: tooltipW,
                         height: tooltipH,
-                        rx: 2.5,
+                        rx,
                         fill: tooltipBg
                       }
                     ),
@@ -10303,7 +10355,7 @@ function StnTopologyGraphViewport({ className, style }) {
                         textAnchor: "middle",
                         dominantBaseline: "central",
                         fill: tooltipFg,
-                        fontSize: 6.8,
+                        fontSize: tooltipFontSize,
                         fontWeight: 600,
                         letterSpacing: "-0.1px",
                         children: n.label
@@ -10336,6 +10388,9 @@ var StnTopologyGraphInternal = forwardRef39(
     showModeToggle = true,
     showToolbar = true,
     showMinimap = false,
+    showZoomLevel = false,
+    fixedNodeSize = false,
+    calibrateScreenPixels = false,
     showTooltips = false,
     showNodeLabels = true,
     nodeLabelMode = "badge",
@@ -10417,6 +10472,58 @@ var StnTopologyGraphInternal = forwardRef39(
     yawRef.current = yaw;
     const zoomRef = useRef11(zoom);
     zoomRef.current = zoom;
+    const [containerDimensions, setContainerDimensions] = useState17({
+      width: 500,
+      height: 500
+    });
+    const [screenPixelsRatio, setScreenPixelsRatio] = useState17(1);
+    useEffect14(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const updateDimensionsAndScale = () => {
+        const rect = container.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          setContainerDimensions({ width: rect.width, height: rect.height });
+        }
+        if (calibrateScreenPixels) {
+          const svg = container.querySelector("svg.stn-topology-graph__svg");
+          const ctm = svg?.getScreenCTM();
+          if (ctm && ctm.a > 0) {
+            setScreenPixelsRatio(ctm.a);
+          } else if (rect.width > 0 && rect.height > 0) {
+            const minDim = Math.min(rect.width, rect.height);
+            setScreenPixelsRatio(minDim / 500);
+          }
+        }
+      };
+      updateDimensionsAndScale();
+      const ro = new ResizeObserver(() => {
+        updateDimensionsAndScale();
+      });
+      ro.observe(container);
+      window.addEventListener("resize", updateDimensionsAndScale);
+      return () => {
+        ro.disconnect();
+        window.removeEventListener("resize", updateDimensionsAndScale);
+      };
+    }, [calibrateScreenPixels]);
+    const dynamicViewBox = useMemo4(() => {
+      const { width, height: height2 } = containerDimensions;
+      if (width <= 0 || height2 <= 0) return "-250 -250 500 500";
+      const aspect = width / height2;
+      let vWidth = 500;
+      let vHeight = 500;
+      if (aspect >= 1) {
+        vWidth = 500 * aspect;
+        vHeight = 500;
+      } else {
+        vWidth = 500;
+        vHeight = 500 / aspect;
+      }
+      const minX = -vWidth / 2;
+      const minY = -vHeight / 2;
+      return `${minX.toFixed(1)} ${minY.toFixed(1)} ${vWidth.toFixed(1)} ${vHeight.toFixed(1)}`;
+    }, [containerDimensions]);
     useEffect14(() => {
       setNodeList((prev) => {
         if (prev === effectiveNodes) return prev;
@@ -10704,6 +10811,12 @@ var StnTopologyGraphInternal = forwardRef39(
       setProjectionType,
       isMinimapOpen,
       setIsMinimapOpen,
+      showMinimap,
+      showZoomLevel,
+      fixedNodeSize,
+      calibrateScreenPixels,
+      screenPixelsRatio,
+      dynamicViewBox,
       handleResetWorld,
       handleZoom,
       handleToggleFullscreen,
@@ -10751,7 +10864,8 @@ var StnTopologyGraphInternal = forwardRef39(
             showModeToggle && /* @__PURE__ */ jsx63(StnTopologyGraphModeToggle, {}),
             /* @__PURE__ */ jsx63(StnTopologyGraphViewport, {}),
             showToolbar && /* @__PURE__ */ jsx63(StnTopologyGraphToolbar, {}),
-            showMinimap && /* @__PURE__ */ jsx63(StnTopologyGraphMinimap, {})
+            showMinimap && /* @__PURE__ */ jsx63(StnTopologyGraphMinimap, {}),
+            showZoomLevel && /* @__PURE__ */ jsx63(StnTopologyGraphZoomLevel, {})
           ] }),
           tooltip.visible && /* @__PURE__ */ jsx63(
             "div",
@@ -10790,6 +10904,7 @@ StnTopologyGraph2.LinkGlyph = StnTopologyLinkGlyph;
 StnTopologyGraph2.ModeToggle = StnTopologyGraphModeToggle;
 StnTopologyGraph2.Toolbar = StnTopologyGraphToolbar;
 StnTopologyGraph2.Minimap = StnTopologyGraphMinimap;
+StnTopologyGraph2.ZoomLevel = StnTopologyGraphZoomLevel;
 StnTopologyGraph2.Viewport = StnTopologyGraphViewport;
 StnTopologyGraph2.displayName = "StnTopologyGraph";
 
@@ -11009,9 +11124,595 @@ var StnTopologyNodeContextMenu = forwardRef40(
 );
 StnTopologyNodeContextMenu.displayName = "StnTopologyNodeContextMenu";
 
+// src/components/topology/StnTopologyNodeDetailPopover.tsx
+import { forwardRef as forwardRef41 } from "react";
+import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
+var DEFAULT_TUNNELS = [
+  { id: "t1", source: "NODE-4", target: "NODE-3", count: 6, bandwidthText: "200M / 1G", utilization: 20 },
+  { id: "t2", source: "NODE-2", target: "NODE-3", count: 0, bandwidthText: "200M / 1G", utilization: 20 },
+  { id: "t3", source: "NODE-6", target: "NODE-3", count: 2, bandwidthText: "100M / 1G", utilization: 10 },
+  { id: "t4", source: "NODE-7", target: "NODE-3", count: 3, bandwidthText: "100M / 1G", utilization: 10 }
+];
+var StnTopologyNodeDetailPopover = forwardRef41(function StnTopologyNodeDetailPopover2({ target, onClose, onConnectDevice, data: propData, className, ...rest }, ref) {
+  if (!target) return null;
+  const { node, mouseX, mouseY, data: targetData } = target;
+  const data = propData ?? targetData;
+  const nodeLabel = node.label ?? String(node.id);
+  const nodeIp = data?.ip ?? "1.1.1.2";
+  const tunnels = data?.tunnels ?? DEFAULT_TUNNELS.map((t) => ({
+    ...t,
+    target: nodeLabel,
+    source: t.source === nodeLabel ? "NODE-1" : t.source
+  }));
+  const syncStatus = data?.syncStatus ?? "failure";
+  const syncStatusLabel = data?.syncStatusLabel ?? (syncStatus === "failure" ? "\uC2E4\uD328" : "\uC815\uC0C1");
+  const syncLastTime = data?.syncLastTime ?? "2026-11-02 15:20";
+  const syncMethod = data?.syncMethod ?? "\xB7 \uC790\uB3D9(\uC8FC\uAE30 \uC218\uC9D1)";
+  const syncFailureReason = data?.syncFailureReason ?? "\uC7A5\uBE44\uAC00 SNMP \uC5D0 \uC751\uB2F5\uD558\uC9C0 \uC54A\uC74C";
+  return /* @__PURE__ */ jsx65(
+    StnPopover,
+    {
+      ref,
+      open: Boolean(target),
+      anchorReference: "anchorPosition",
+      anchorPosition: { top: mouseY, left: mouseX },
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose,
+      hideBackdrop: false,
+      paperClassName: "stn-topology-popover__paper",
+      ...rest,
+      children: /* @__PURE__ */ jsx65("div", { className: "stn-topology-popover__wrapper", children: /* @__PURE__ */ jsx65(StnCard, { variant: "floating", radius: "md", padding: "md", children: /* @__PURE__ */ jsxs52(StnStack, { direction: "column", spacing: 1.25, children: [
+        /* @__PURE__ */ jsxs52(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx65(StnText, { variant: "body-2", weight: "bold", children: "\uB178\uB4DC \uC815\uBCF4" }),
+          /* @__PURE__ */ jsx65(
+            StnButton,
+            {
+              variant: "ghost",
+              size: "sm",
+              shape: "square",
+              title: "\uB2EB\uAE30",
+              "aria-label": "\uB178\uB4DC \uC815\uBCF4 \uB2EB\uAE30",
+              icon: /* @__PURE__ */ jsx65(StnIcon, { name: "line/x", size: 14 }),
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs52(StnStack, { direction: "column", spacing: 0.25, children: [
+          /* @__PURE__ */ jsx65(StnText, { variant: "heading-3", weight: "bold", children: nodeLabel }),
+          /* @__PURE__ */ jsx65(StnText, { variant: "caption", color: "secondary", children: nodeIp })
+        ] }),
+        /* @__PURE__ */ jsx65("div", { children: /* @__PURE__ */ jsx65(
+          StnButton,
+          {
+            variant: "contained",
+            color: "primary",
+            size: "sm",
+            onClick: () => onConnectDevice?.(node),
+            children: "\uC7A5\uBE44 \uC811\uC18D"
+          }
+        ) }),
+        /* @__PURE__ */ jsx65(StnCard, { variant: "flat", radius: "sm", padding: "sm", children: /* @__PURE__ */ jsxs52(StnStack, { direction: "column", spacing: 0.75, children: [
+          /* @__PURE__ */ jsx65(StnText, { variant: "caption", color: "secondary", children: "\uC7A5\uBE44 \uB3D9\uAE30\uD654" }),
+          /* @__PURE__ */ jsxs52(StnStack, { direction: "row", spacing: 0.75, alignItems: "center", children: [
+            /* @__PURE__ */ jsx65(
+              StnBadge,
+              {
+                color: syncStatus === "failure" ? "critical" : "success",
+                appearance: "subtle",
+                badgeContent: syncStatusLabel
+              }
+            ),
+            /* @__PURE__ */ jsxs52(StnText, { variant: "caption", color: "secondary", children: [
+              "\uB9C8\uC9C0\uB9C9 \uB3D9\uAE30\uD654 ",
+              syncLastTime
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx65(StnText, { variant: "caption", color: "secondary", children: syncMethod }),
+          /* @__PURE__ */ jsx65(StnText, { variant: "caption", weight: "medium", children: syncFailureReason })
+        ] }) }),
+        /* @__PURE__ */ jsx65(StnDivider, {}),
+        /* @__PURE__ */ jsxs52(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx65(StnText, { variant: "body-3", weight: "bold", children: data?.tunnelSectionTitle ?? "\uC5F0\uACB0 \uAD6C\uAC04 \uD130\uB110 \uD604\uD669" }),
+          /* @__PURE__ */ jsx65(StnText, { variant: "caption", color: "secondary", children: data?.tunnelSectionCountText ?? `${tunnels.length}\uAC1C \uAD6C\uAC04` })
+        ] }),
+        /* @__PURE__ */ jsx65(StnStack, { direction: "column", spacing: 0.75, children: tunnels.map((tunnel) => /* @__PURE__ */ jsx65(StnCard, { variant: "flat", radius: "sm", padding: "sm", children: /* @__PURE__ */ jsxs52(StnStack, { direction: "column", spacing: 0.5, children: [
+          /* @__PURE__ */ jsxs52(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs52(StnText, { variant: "body-3", weight: "bold", children: [
+              tunnel.source,
+              " \u2192 ",
+              tunnel.target
+            ] }),
+            /* @__PURE__ */ jsx65(
+              StnBadge,
+              {
+                color: "primary",
+                appearance: "subtle",
+                showZero: true,
+                badgeContent: `${tunnel.count}\uAC1C`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs52(StnStack, { direction: "row", spacing: 0.75, alignItems: "center", children: [
+            /* @__PURE__ */ jsx65(
+              StnText,
+              {
+                variant: "caption",
+                color: "secondary",
+                className: "stn-topology-popover__nowrap",
+                children: tunnel.bandwidthText ?? "0M / 0M"
+              }
+            ),
+            /* @__PURE__ */ jsx65("div", { className: "stn-topology-popover__progress-wrap", children: /* @__PURE__ */ jsx65(
+              StnProgressBar,
+              {
+                value: tunnel.utilization ?? 0,
+                max: 100,
+                size: "sm",
+                tone: "success"
+              }
+            ) }),
+            /* @__PURE__ */ jsx65(
+              StnText,
+              {
+                variant: "caption",
+                weight: "bold",
+                className: "stn-topology-popover__nowrap",
+                children: tunnel.utilization != null ? `${tunnel.utilization}%` : "-"
+              }
+            )
+          ] })
+        ] }) }, tunnel.id)) })
+      ] }) }) })
+    }
+  );
+});
+
+// src/components/topology/StnTopologyLinkDetailPopover.tsx
+import { forwardRef as forwardRef42 } from "react";
+import { jsx as jsx66, jsxs as jsxs53 } from "react/jsx-runtime";
+var DEFAULT_LSP_LIST = [
+  { id: "1", name: "test1_NODE-1_TO_NODE-6", bandwidth: "100M" },
+  { id: "2", name: "test1_NODE-5_TO_NODE-8", bandwidth: "100M" },
+  { id: "3", name: "test1_NODE-6_TO_NODE-1", bandwidth: "0M" }
+];
+var StnTopologyLinkDetailPopover = forwardRef42(function StnTopologyLinkDetailPopover2({ target, onClose, onOpenDetail, data: propData, className, ...rest }, ref) {
+  if (!target) return null;
+  const { link, mouseX, mouseY, data: targetData } = target;
+  const data = propData ?? targetData;
+  const sourceName = String(link.source);
+  const targetName = String(link.target);
+  const startTid = data?.startTid ?? sourceName;
+  const endTid = data?.endTid ?? targetName;
+  const lspCount = data?.lspCount ?? 6;
+  const serviceCount = data?.serviceCount ?? 2;
+  const forwardDirection = data?.forwardDirection ?? {
+    from: sourceName,
+    to: targetName,
+    utilization: 20,
+    bandwidthText: "200M / 1G"
+  };
+  const reverseDirection = data?.reverseDirection ?? {
+    from: targetName,
+    to: sourceName,
+    utilization: 20,
+    bandwidthText: "200M / 1G"
+  };
+  const startInterface = data?.startInterface ?? {
+    port: "p1/3/1",
+    ip: "10.1.1.9"
+  };
+  const endInterface = data?.endInterface ?? {
+    port: "p1/1/1",
+    ip: "10.1.1.10"
+  };
+  const lspList = data?.lspList ?? DEFAULT_LSP_LIST;
+  return /* @__PURE__ */ jsx66(
+    StnPopover,
+    {
+      ref,
+      open: Boolean(target),
+      anchorReference: "anchorPosition",
+      anchorPosition: { top: mouseY, left: mouseX },
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      onClose,
+      hideBackdrop: false,
+      paperClassName: "stn-topology-popover__paper",
+      ...rest,
+      children: /* @__PURE__ */ jsx66("div", { className: "stn-topology-popover__wrapper", children: /* @__PURE__ */ jsx66(StnCard, { variant: "floating", radius: "md", padding: "md", children: /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 1.25, children: [
+        /* @__PURE__ */ jsxs53(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx66(StnText, { variant: "body-2", weight: "bold", children: "\uAD6C\uAC04 \uC815\uBCF4" }),
+          /* @__PURE__ */ jsx66(
+            StnButton,
+            {
+              variant: "ghost",
+              size: "sm",
+              shape: "square",
+              title: "\uB2EB\uAE30",
+              "aria-label": "\uAD6C\uAC04 \uC815\uBCF4 \uB2EB\uAE30",
+              icon: /* @__PURE__ */ jsx66(StnIcon, { name: "line/x", size: 14 }),
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx66(StnCard, { variant: "flat", radius: "sm", padding: "sm", className: "stn-topology-popover__route-card", children: /* @__PURE__ */ jsxs53(StnStack, { direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", children: "START_TID" }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "body-3", weight: "bold", children: startTid }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", children: startTid })
+          ] }),
+          /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", children: "END_TID" }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "body-3", weight: "bold", children: endTid }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", children: endTid })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.75, children: [
+          /* @__PURE__ */ jsxs53("div", { className: "stn-topology-popover__stat-grid", children: [
+            /* @__PURE__ */ jsx66(StnCard, { variant: "flat", radius: "sm", padding: "sm", children: /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+              /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", children: "LSP \uC218" }),
+              /* @__PURE__ */ jsxs53(StnText, { variant: "body-2", weight: "bold", className: "stn-text-numeric", children: [
+                lspCount,
+                "\uAC1C"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx66(StnCard, { variant: "flat", radius: "sm", padding: "sm", children: /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+              /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", children: "\uC11C\uBE44\uC2A4 \uC218" }),
+              /* @__PURE__ */ jsxs53(StnText, { variant: "body-2", weight: "bold", className: "stn-text-numeric", children: [
+                serviceCount,
+                "\uAC1C"
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs53("div", { className: "stn-topology-popover__stat-grid", children: [
+            /* @__PURE__ */ jsx66(StnCard, { variant: "flat", radius: "sm", padding: "sm", children: /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+              /* @__PURE__ */ jsxs53(StnText, { variant: "caption", color: "secondary", className: "stn-topology-popover__nowrap", children: [
+                forwardDirection.from,
+                " \u2192 ",
+                forwardDirection.to
+              ] }),
+              /* @__PURE__ */ jsxs53(StnText, { variant: "body-2", weight: "bold", className: "stn-text-numeric", children: [
+                forwardDirection.utilization,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: forwardDirection.bandwidthText })
+            ] }) }),
+            /* @__PURE__ */ jsx66(StnCard, { variant: "flat", radius: "sm", padding: "sm", children: /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+              /* @__PURE__ */ jsxs53(StnText, { variant: "caption", color: "secondary", className: "stn-topology-popover__nowrap", children: [
+                reverseDirection.from,
+                " \u2192 ",
+                reverseDirection.to
+              ] }),
+              /* @__PURE__ */ jsxs53(StnText, { variant: "body-2", weight: "bold", className: "stn-text-numeric", children: [
+                reverseDirection.utilization,
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: reverseDirection.bandwidthText })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.75, children: [
+          /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+            /* @__PURE__ */ jsxs53(StnText, { variant: "caption", color: "secondary", children: [
+              sourceName,
+              " \uC778\uD130\uD398\uC774\uC2A4"
+            ] }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", weight: "medium", className: "stn-text-numeric", children: startInterface.port }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: startInterface.ip })
+          ] }),
+          /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+            /* @__PURE__ */ jsxs53(StnText, { variant: "caption", color: "secondary", children: [
+              targetName,
+              " \uC778\uD130\uD398\uC774\uC2A4"
+            ] }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", weight: "medium", className: "stn-text-numeric", children: endInterface.port }),
+            /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: endInterface.ip })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx66(StnDivider, {}),
+        /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx66(StnText, { variant: "body-3", weight: "bold", children: data?.totalLspCountText ?? `LSP \uBAA9\uB85D (${lspCount}\uAC1C)` }),
+          /* @__PURE__ */ jsxs53(StnStack, { direction: "column", spacing: 0.25, children: [
+            lspList.map((item) => /* @__PURE__ */ jsxs53(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+              /* @__PURE__ */ jsx66(StnText, { variant: "caption", className: "stn-topology-popover__ellipsis-text", children: item.name }),
+              /* @__PURE__ */ jsx66(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: item.bandwidth })
+            ] }, item.id)),
+            /* @__PURE__ */ jsxs53(StnText, { variant: "caption", color: "secondary", children: [
+              "\uC678 ",
+              Math.max(0, lspCount - lspList.length),
+              "\uAC74\u2026"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx66(
+          StnButton,
+          {
+            variant: "contained",
+            color: "primary",
+            size: "sm",
+            onClick: () => {
+              onClose();
+              onOpenDetail?.(link);
+            },
+            children: "\uC0C1\uC138\uBCF4\uAE30"
+          }
+        )
+      ] }) }) })
+    }
+  );
+});
+
+// src/components/topology/StnTopologyLinkDetailModal.tsx
+import { useState as useState19, useMemo as useMemo5, forwardRef as forwardRef43 } from "react";
+import { jsx as jsx67, jsxs as jsxs54 } from "react/jsx-runtime";
+var DEFAULT_FORWARD_LSPS = [
+  {
+    id: "f1",
+    lspName: "test1_NODE-5_TO_NODE-8",
+    aDevice: "NODE-5",
+    zDevice: "NODE-8",
+    bandwidth: "100M",
+    utilization: "10%",
+    status: "Up"
+  },
+  {
+    id: "f2",
+    lspName: "test1_NODE-6_TO_NODE-1",
+    aDevice: "NODE-6",
+    zDevice: "NODE-1",
+    bandwidth: "0M",
+    utilization: "0%",
+    status: "Up"
+  },
+  {
+    id: "f3",
+    lspName: "test1_NODE-7_TO_NODE-8",
+    aDevice: "NODE-7",
+    zDevice: "NODE-8",
+    bandwidth: "0M",
+    utilization: "0%",
+    status: "Up"
+  },
+  {
+    id: "f4",
+    lspName: "test5_NODE-3_TO_NODE-1",
+    aDevice: "NODE-3",
+    zDevice: "NODE-1",
+    bandwidth: "0M",
+    utilization: "0%",
+    status: "Up"
+  }
+];
+var DEFAULT_REVERSE_LSPS = [
+  {
+    id: "r1",
+    lspName: "test1_NODE-1_TO_NODE-6",
+    aDevice: "NODE-1",
+    zDevice: "NODE-6",
+    bandwidth: "100M",
+    utilization: "10%",
+    status: "Up"
+  },
+  {
+    id: "r2",
+    lspName: "test1_NODE-8_TO_NODE-7",
+    aDevice: "NODE-8",
+    zDevice: "NODE-7",
+    bandwidth: "100M",
+    utilization: "10%",
+    status: "Up"
+  }
+];
+var INITIAL_COLUMNS = [
+  { key: "lspName", label: "LSP\uBA85", width: 260 },
+  { key: "aDevice", label: "A \uC7A5\uBE44", width: 120 },
+  { key: "zDevice", label: "Z \uC7A5\uBE44", width: 120 },
+  { key: "bandwidth", label: "\uB300\uC5ED\uD3ED", width: 100 },
+  { key: "utilization", label: "\uAD6C\uAC04 \uC810\uC720\uC728", width: 110 },
+  { key: "status", label: "\uC0C1\uD0DC", width: 80 }
+];
+var StnTopologyLinkDetailModal = forwardRef43(function StnTopologyLinkDetailModal2({ open, link, onClose, onExportExcel, exportExcelIcon = "download", ...rest }, ref) {
+  const [tab, setTab] = useState19("lsp");
+  const [cols1] = useState19(INITIAL_COLUMNS);
+  const [cols2] = useState19(INITIAL_COLUMNS);
+  const [sortKey1, setSortKey1] = useState19("lspName");
+  const [sortOrder1, setSortOrder1] = useState19("none");
+  const [sortKey2, setSortKey2] = useState19("lspName");
+  const [sortOrder2, setSortOrder2] = useState19("none");
+  const sourceName = link ? String(link.source) : "NODE-3";
+  const targetName = link ? String(link.target) : "NODE-4";
+  const handleToggleSort1 = (key) => {
+    if (sortKey1 !== key) {
+      setSortKey1(key);
+      setSortOrder1("ascending");
+    } else if (sortOrder1 === "ascending") {
+      setSortOrder1("descending");
+    } else {
+      setSortOrder1("none");
+    }
+  };
+  const handleToggleSort2 = (key) => {
+    if (sortKey2 !== key) {
+      setSortKey2(key);
+      setSortOrder2("ascending");
+    } else if (sortOrder2 === "ascending") {
+      setSortOrder2("descending");
+    } else {
+      setSortOrder2("none");
+    }
+  };
+  const sortedForwardLsps = useMemo5(() => {
+    if (sortOrder1 === "none") return DEFAULT_FORWARD_LSPS;
+    return [...DEFAULT_FORWARD_LSPS].sort((a, b) => {
+      const factor = sortOrder1 === "ascending" ? 1 : -1;
+      return String(a[sortKey1]) > String(b[sortKey1]) ? factor : -factor;
+    });
+  }, [sortKey1, sortOrder1]);
+  const sortedReverseLsps = useMemo5(() => {
+    if (sortOrder2 === "none") return DEFAULT_REVERSE_LSPS;
+    return [...DEFAULT_REVERSE_LSPS].sort((a, b) => {
+      const factor = sortOrder2 === "ascending" ? 1 : -1;
+      return String(a[sortKey2]) > String(b[sortKey2]) ? factor : -factor;
+    });
+  }, [sortKey2, sortOrder2]);
+  return /* @__PURE__ */ jsx67(
+    StnModal,
+    {
+      ref,
+      open,
+      onClose,
+      title: "\uAD6C\uAC04 \uC0C1\uC138",
+      size: "lg",
+      actionAlign: "center",
+      actions: /* @__PURE__ */ jsxs54(StnStack, { direction: "row", spacing: 1, justifyContent: "center", alignItems: "center", children: [
+        /* @__PURE__ */ jsx67(
+          StnButton,
+          {
+            variant: "contained",
+            color: "primary",
+            size: "md",
+            icon: /* @__PURE__ */ jsx67(
+              StnIcon,
+              {
+                name: exportExcelIcon === "file-excel" ? "line/file-excel" : "line/download",
+                size: 16
+              }
+            ),
+            onClick: () => onExportExcel?.(),
+            children: "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC"
+          }
+        ),
+        /* @__PURE__ */ jsx67(
+          StnButton,
+          {
+            variant: "outlined",
+            size: "md",
+            onClick: onClose,
+            children: "\uB2EB\uAE30"
+          }
+        )
+      ] }),
+      ...rest,
+      children: /* @__PURE__ */ jsxs54(StnStack, { direction: "column", spacing: 1.5, children: [
+        /* @__PURE__ */ jsx67(StnCard, { variant: "flat", radius: "md", padding: "md", children: /* @__PURE__ */ jsxs54(StnStack, { direction: "column", spacing: 0.75, children: [
+          /* @__PURE__ */ jsxs54(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs54(StnText, { variant: "body-2", weight: "bold", children: [
+              sourceName,
+              " \u2192 ",
+              targetName
+            ] }),
+            /* @__PURE__ */ jsxs54(StnStack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx67(StnText, { variant: "caption", color: "secondary", children: "\uD604\uC7AC" }),
+              /* @__PURE__ */ jsx67(StnText, { variant: "body-2", weight: "bold", className: "stn-text-numeric", children: "20%" }),
+              /* @__PURE__ */ jsx67(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: "200M / 1G" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs54(StnStack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs54(StnText, { variant: "body-2", weight: "bold", children: [
+              targetName,
+              " \u2192 ",
+              sourceName
+            ] }),
+            /* @__PURE__ */ jsxs54(StnStack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx67(StnText, { variant: "caption", color: "secondary", children: "\uD604\uC7AC" }),
+              /* @__PURE__ */ jsx67(StnText, { variant: "body-2", weight: "bold", className: "stn-text-numeric", children: "20%" }),
+              /* @__PURE__ */ jsx67(StnText, { variant: "caption", color: "secondary", className: "stn-text-numeric", children: "200M / 1G" })
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx67("div", { children: /* @__PURE__ */ jsx67(
+          StnSegmented,
+          {
+            size: "sm",
+            value: tab,
+            onChange: (val) => setTab(val),
+            options: [
+              { value: "lsp", label: "LSP (6\uAC74)" },
+              { value: "service", label: "\uC11C\uBE44\uC2A4 (2\uAC74)" }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs54(StnStack, { direction: "column", spacing: 0.75, children: [
+          /* @__PURE__ */ jsxs54(StnText, { variant: "body-2", weight: "bold", children: [
+            sourceName,
+            " \u2192 ",
+            targetName,
+            " (",
+            sortedForwardLsps.length,
+            "\uAC74)"
+          ] }),
+          /* @__PURE__ */ jsx67(StnTable, { resizable: true, children: /* @__PURE__ */ jsxs54(StnTable.Grid, { children: [
+            /* @__PURE__ */ jsx67("colgroup", { children: cols1.map((c) => /* @__PURE__ */ jsx67("col", { style: { width: c.width } }, c.key)) }),
+            /* @__PURE__ */ jsx67(StnTable.Head, { children: /* @__PURE__ */ jsx67(StnTable.Row, { children: cols1.map((col) => /* @__PURE__ */ jsx67(StnTable.Th, { name: col.key, children: /* @__PURE__ */ jsx67(
+              StnTable.Sort,
+              {
+                label: col.label,
+                sort: sortKey1 === col.key ? sortOrder1 : "none",
+                onClick: () => handleToggleSort1(col.key)
+              }
+            ) }, col.key)) }) }),
+            /* @__PURE__ */ jsx67(StnTable.Body, { children: sortedForwardLsps.map((row) => /* @__PURE__ */ jsxs54(StnTable.Row, { children: [
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: /* @__PURE__ */ jsx67(StnText, { variant: "body-3", weight: "medium", children: row.lspName }) }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: row.aDevice }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: row.zDevice }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { className: "stn-text-numeric", children: row.bandwidth }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { className: "stn-text-numeric", children: row.utilization }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: /* @__PURE__ */ jsx67(
+                StnBadge,
+                {
+                  color: row.status === "Up" ? "success" : "critical",
+                  appearance: "subtle",
+                  badgeContent: row.status
+                }
+              ) })
+            ] }, row.id)) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs54(StnStack, { direction: "column", spacing: 0.75, children: [
+          /* @__PURE__ */ jsxs54(StnText, { variant: "body-2", weight: "bold", children: [
+            targetName,
+            " \u2192 ",
+            sourceName,
+            " (",
+            sortedReverseLsps.length,
+            "\uAC74)"
+          ] }),
+          /* @__PURE__ */ jsx67(StnTable, { resizable: true, children: /* @__PURE__ */ jsxs54(StnTable.Grid, { children: [
+            /* @__PURE__ */ jsx67("colgroup", { children: cols2.map((c) => /* @__PURE__ */ jsx67("col", { style: { width: c.width } }, c.key)) }),
+            /* @__PURE__ */ jsx67(StnTable.Head, { children: /* @__PURE__ */ jsx67(StnTable.Row, { children: cols2.map((col) => /* @__PURE__ */ jsx67(StnTable.Th, { name: col.key, children: /* @__PURE__ */ jsx67(
+              StnTable.Sort,
+              {
+                label: col.label,
+                sort: sortKey2 === col.key ? sortOrder2 : "none",
+                onClick: () => handleToggleSort2(col.key)
+              }
+            ) }, col.key)) }) }),
+            /* @__PURE__ */ jsx67(StnTable.Body, { children: sortedReverseLsps.map((row) => /* @__PURE__ */ jsxs54(StnTable.Row, { children: [
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: /* @__PURE__ */ jsx67(StnText, { variant: "body-3", weight: "medium", children: row.lspName }) }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: row.aDevice }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: row.zDevice }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { className: "stn-text-numeric", children: row.bandwidth }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { className: "stn-text-numeric", children: row.utilization }),
+              /* @__PURE__ */ jsx67(StnTable.Td, { children: /* @__PURE__ */ jsx67(
+                StnBadge,
+                {
+                  color: row.status === "Up" ? "success" : "critical",
+                  appearance: "subtle",
+                  badgeContent: row.status
+                }
+              ) })
+            ] }, row.id)) })
+          ] }) })
+        ] })
+      ] })
+    }
+  );
+});
+
 // src/patterns/widget/StnGradeRow.tsx
 import "react";
-import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs55 } from "react/jsx-runtime";
 var GRADE_ROW_ICON = {
   critical: "fill/alert4",
   major: "fill/alert3",
@@ -11037,7 +11738,7 @@ function StnGradeRow({
 }) {
   const clamped = Math.max(0, Math.min(100, percent));
   const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped, decimals);
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs55(
     "div",
     {
       className: cn(
@@ -11047,41 +11748,41 @@ function StnGradeRow({
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs52("div", { className: "stn-grade-row__left", children: [
-          /* @__PURE__ */ jsxs52("span", { className: "stn-grade-row__label", children: [
-            /* @__PURE__ */ jsx65(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-grade-row__icon", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs55("div", { className: "stn-grade-row__left", children: [
+          /* @__PURE__ */ jsxs55("span", { className: "stn-grade-row__label", children: [
+            /* @__PURE__ */ jsx68(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-grade-row__icon", "aria-hidden": true }),
             label
           ] }),
-          /* @__PURE__ */ jsx65("div", { className: "stn-grade-row__track", "aria-hidden": true, children: /* @__PURE__ */ jsx65("span", { className: "stn-grade-row__fill", style: { width: `${clamped}%` } }) })
+          /* @__PURE__ */ jsx68("div", { className: "stn-grade-row__track", "aria-hidden": true, children: /* @__PURE__ */ jsx68("span", { className: "stn-grade-row__fill", style: { width: `${clamped}%` } }) })
         ] }),
-        /* @__PURE__ */ jsxs52("div", { className: "stn-grade-row__right", children: [
-          /* @__PURE__ */ jsx65("span", { className: "stn-grade-row__value", children: value }),
-          /* @__PURE__ */ jsx65("span", { className: "stn-grade-row__percent", children: resolvedPercentLabel })
+        /* @__PURE__ */ jsxs55("div", { className: "stn-grade-row__right", children: [
+          /* @__PURE__ */ jsx68("span", { className: "stn-grade-row__value", children: value }),
+          /* @__PURE__ */ jsx68("span", { className: "stn-grade-row__percent", children: resolvedPercentLabel })
         ] })
       ]
     }
   );
 }
 function StnGradeRowList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx65("div", { className: cn("stn-grade-row-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx68("div", { className: cn("stn-grade-row-list", className), ...rest, children });
 }
 
 // src/patterns/widget/StnStatCard.tsx
 import "react";
-import { jsx as jsx66, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs56 } from "react/jsx-runtime";
 function StnStatCard({ label, count, className, ...rest }) {
-  return /* @__PURE__ */ jsxs53("div", { className: cn("stn-stat-card", className), ...rest, children: [
-    /* @__PURE__ */ jsx66("span", { className: "stn-stat-label", children: label }),
-    /* @__PURE__ */ jsx66("span", { className: "stn-stat-count", children: count })
+  return /* @__PURE__ */ jsxs56("div", { className: cn("stn-stat-card", className), ...rest, children: [
+    /* @__PURE__ */ jsx69("span", { className: "stn-stat-label", children: label }),
+    /* @__PURE__ */ jsx69("span", { className: "stn-stat-count", children: count })
   ] });
 }
 function StnStatGroup({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx66("div", { className: cn("stn-stat-group", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("div", { className: cn("stn-stat-group", className), ...rest, children });
 }
 
 // src/patterns/widget/StnStatusList.tsx
 import "react";
-import { jsx as jsx67, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs57 } from "react/jsx-runtime";
 function StnStatusItem({
   label,
   value,
@@ -11092,9 +11793,9 @@ function StnStatusItem({
   ...rest
 }) {
   const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
-  return /* @__PURE__ */ jsxs54("div", { className: cn("stn-status-item", className), ...rest, children: [
-    /* @__PURE__ */ jsxs54("span", { className: "stn-status-item__label", children: [
-      showDot ? /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs57("div", { className: cn("stn-status-item", className), ...rest, children: [
+    /* @__PURE__ */ jsxs57("span", { className: "stn-status-item__label", children: [
+      showDot ? /* @__PURE__ */ jsx70(
         "span",
         {
           className: cn("stn-status-item__dot", `stn-status-item__dot--${grade}`),
@@ -11103,15 +11804,15 @@ function StnStatusItem({
       ) : null,
       label
     ] }),
-    /* @__PURE__ */ jsx67("span", { className: "stn-status-item__val", children: value })
+    /* @__PURE__ */ jsx70("span", { className: "stn-status-item__val", children: value })
   ] });
 }
 function StnStatusList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx67("div", { className: cn("stn-status-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx70("div", { className: cn("stn-status-list", className), ...rest, children });
 }
 
 // src/components/StnWidget.tsx
-import { Fragment as Fragment11, jsx as jsx68, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs58 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -11194,20 +11895,20 @@ function StnWidgetPeriodText({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-widget__period-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx71("span", { className: cn("stn-widget__period-text", className), ...rest, children });
 }
 function StnWidgetPeriodSelect({
   label,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx71(
     StnButton,
     {
       variant: "ghost",
       size: "sm",
       shape: "square",
-      icon: /* @__PURE__ */ jsx68(StnIcon, { name: "line/chevron-down" }),
+      icon: /* @__PURE__ */ jsx71(StnIcon, { name: "line/chevron-down" }),
       iconPosition: "right",
       className,
       ...rest,
@@ -11224,26 +11925,26 @@ function StnWidgetPeriodPager({
   nextLabel = "\uB2E4\uC74C",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs55("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
-    /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs58("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
+    /* @__PURE__ */ jsx71(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx68(StnIcon, { name: "line/arrow-narrow-left" }),
+        icon: /* @__PURE__ */ jsx71(StnIcon, { name: "line/arrow-narrow-left" }),
         onClick: onPrev,
         "aria-label": prevLabel
       }
     ),
-    /* @__PURE__ */ jsx68("span", { className: "stn-widget__period-pager-label", children: label }),
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx71("span", { className: "stn-widget__period-pager-label", children: label }),
+    /* @__PURE__ */ jsx71(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx68(StnIcon, { name: "line/arrow-narrow-right" }),
+        icon: /* @__PURE__ */ jsx71(StnIcon, { name: "line/arrow-narrow-right" }),
         onClick: onNext,
         "aria-label": nextLabel
       }
@@ -11270,18 +11971,18 @@ function StnWidgetHeaderInner({
     return null;
   }
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
-  return /* @__PURE__ */ jsxs55("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs55("div", { className: "stn-widget__head-start", children: [
-      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx68(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx68(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
-      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs55("div", { className: "stn-widget__title-wrap", children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx68("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
+  return /* @__PURE__ */ jsxs58("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs58("div", { className: "stn-widget__head-start", children: [
+      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx71(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx71(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
+      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs58("div", { className: "stn-widget__title-wrap", children: [
+        typeof title === "string" ? /* @__PURE__ */ jsx71("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs55(Fragment11, { children: [
+      ] }) : /* @__PURE__ */ jsxs58(Fragment11, { children: [
         title,
         badge
       ] }) : null
     ] }),
-    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx68("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx68(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
+    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx71("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx71(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
   ] });
 }
 function StnWidgetRoot({
@@ -11364,10 +12065,10 @@ function StnWidgetRoot({
     ...rest
   };
   const slots = partitionWidgetChildren(children);
-  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs55("div", { className: "app_bar", children: [
-    /* @__PURE__ */ jsx68("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx68("span", { children: title }) : title }),
+  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs58("div", { className: "app_bar", children: [
+    /* @__PURE__ */ jsx71("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx71("span", { children: title }) : title }),
     titleActions
-  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx68("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx68("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx68(
+  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx71("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx71("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx71(
     StnWidgetHeaderInner,
     {
       appearance,
@@ -11383,40 +12084,40 @@ function StnWidgetRoot({
       headerIcon,
       wrapActions
     }
-  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs55("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs55("div", { className: "stn-widget__head-start", children: [
-      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx68("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
+  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs58("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs58("div", { className: "stn-widget__head-start", children: [
+      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx71("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
       badge
     ] }),
-    titleActions ? /* @__PURE__ */ jsx68("div", { className: "stn-widget__head-end", children: titleActions }) : null
+    titleActions ? /* @__PURE__ */ jsx71("div", { className: "stn-widget__head-end", children: titleActions }) : null
   ] }) : null;
   const head = slots.headers.length > 0 ? slots.headers : propHead;
   const autoBodyClass = shell === "fault-panel" && !isFigmaShell ? "table_area" : void 0;
   let body;
   if (loading) {
-    body = /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx68(StnWidgetLoading, {}) });
+    body = /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx71(StnWidgetLoading, {}) });
   } else if (slots.bodies.length > 0) {
     body = slots.bodies.map(
       (slot, index) => mergeBodySlot(slot, index === 0 ? slots.rest : [], contentClassName, isEmptyState, emptyStyle)
     );
   } else {
-    body = /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
+    body = /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
   }
-  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx68("div", { className: "stn-widget__footer", children: footer }) : null;
-  const card = /* @__PURE__ */ jsxs55("div", { ...rootProps, children: [
-    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx68("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
+  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx71("div", { className: "stn-widget__footer", children: footer }) : null;
+  const card = /* @__PURE__ */ jsxs58("div", { ...rootProps, children: [
+    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx71("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
     head,
     body,
     footerNode
   ] });
   if (banner == null || banner === false) return card;
-  return /* @__PURE__ */ jsxs55("div", { className: "stn-widget-anchor", children: [
+  return /* @__PURE__ */ jsxs58("div", { className: "stn-widget-anchor", children: [
     withBannerSeverity(banner, bannerSeverityFromStatus(status, isCritical)),
     card
   ] });
 }
 function StnWidgetHeader({ className, wrap = false, children, ...rest }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetHeader, "header");
 function StnWidgetTitle({
@@ -11428,10 +12129,10 @@ function StnWidgetTitle({
   ...rest
 }) {
   const titleAttr = title ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx68("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
+  return /* @__PURE__ */ jsx71("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
 }
 function StnWidgetActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__head-end", className), ...rest, children });
+  return /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__head-end", className), ...rest, children });
 }
 function StnWidgetBody({
   padding,
@@ -11445,7 +12146,7 @@ function StnWidgetBody({
 }) {
   const emptyText = typeof empty === "string" ? empty : void 0;
   const mergedStyle = emptyText ? { ["--stn-widget-empty-text"]: `"${emptyText}"`, ...style } : style;
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       className: cn(
@@ -11467,10 +12168,10 @@ function StnWidgetBody({
 }
 markWidgetSlot(StnWidgetBody, "body");
 function StnWidgetChartSlot({ label = "select chart", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx68("span", { className: "stn-widget__chart-slot-label", children: label }) });
+  return /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx71("span", { className: "stn-widget__chart-slot-label", children: label }) });
 }
 function StnWidgetPlaceholder({ label = "\uCF58\uD150\uCE20 \uC601\uC5ED" }) {
-  return /* @__PURE__ */ jsx68("div", { className: "stn-widget__placeholder", children: label });
+  return /* @__PURE__ */ jsx71("div", { className: "stn-widget__placeholder", children: label });
 }
 var StnWidgetStatusItem = StnStatusItem;
 var StnWidgetStatusList = StnStatusList;
@@ -11479,24 +12180,24 @@ var StnWidgetStatCard = StnStatCard;
 var StnWidgetGradeRow = StnGradeRow;
 var StnWidgetGradeRowList = StnGradeRowList;
 function StnWidgetFooter({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__footer", className), ...rest, children });
+  return /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__footer", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetFooter, "footer");
 function StnWidgetEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs55("div", { className: cn("stn-widget__empty", className), ...rest, children: [
-    /* @__PURE__ */ jsxs55("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
-      /* @__PURE__ */ jsx68("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx68("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx68("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  return /* @__PURE__ */ jsxs58("div", { className: cn("stn-widget__empty", className), ...rest, children: [
+    /* @__PURE__ */ jsxs58("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
+      /* @__PURE__ */ jsx71("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx71("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx71("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
     ] }),
-    /* @__PURE__ */ jsx68("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsx71("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] });
 }
 function StnWidgetLoading({ lines = 3, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx68(StnLoadingSkeleton.Widget, { lines }) });
+  return /* @__PURE__ */ jsx71("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx71(StnLoadingSkeleton.Widget, { lines }) });
 }
 function StnWidgetInsetIcon({ className, size = "sm", ...rest }) {
-  return /* @__PURE__ */ jsx68(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
+  return /* @__PURE__ */ jsx71(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
 }
 var StnWidget = Object.assign(StnWidgetRoot, {
   Header: StnWidgetHeader,
@@ -11541,7 +12242,7 @@ import {
 } from "@stn-uiux/pub-ui/data/stnWidget";
 
 // src/patterns/dashboard/AlertCenterDashboard.tsx
-import { jsx as jsx69, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs59 } from "react/jsx-runtime";
 var TOP5_ROWS = [
   { label: "\uADF8\uB791\uC2DC\uC544", percent: 80, value: "80\uAC74", grade: "critical" },
   { label: "\uC5F0\uB9BD\uC8FC\uD0DD 15\uC138\uB300", percent: 74, value: "74\uAC74", grade: "major" },
@@ -11550,7 +12251,7 @@ var TOP5_ROWS = [
   { label: "PRADA", percent: 68, value: "68\uAC74", grade: "default" }
 ];
 function AlertCenterDashboard({ className, appearance = "translucent", loading = false }) {
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs59(
     StnStack,
     {
       direction: "column",
@@ -11559,17 +12260,17 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
       style: { flex: "1 1 0%", minHeight: 0, height: "100%", width: "100%" },
       "data-stn-dashboard": "alert-widgets",
       children: [
-        /* @__PURE__ */ jsx69(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx69(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs56(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx69(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
-          /* @__PURE__ */ jsx69(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
-          /* @__PURE__ */ jsx69(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
+        /* @__PURE__ */ jsx72(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx72(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs59(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx72(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
+          /* @__PURE__ */ jsx72(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
+          /* @__PURE__ */ jsx72(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
         ] }) }),
-        /* @__PURE__ */ jsx69(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx69(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs56(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx69(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
-          /* @__PURE__ */ jsx69(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
-          /* @__PURE__ */ jsx69(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
+        /* @__PURE__ */ jsx72(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx72(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs59(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx72(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
+          /* @__PURE__ */ jsx72(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
+          /* @__PURE__ */ jsx72(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
         ] }) }),
-        /* @__PURE__ */ jsx69(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx69(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx69(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx69(
+        /* @__PURE__ */ jsx72(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx72(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx72(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx72(
           StnWidget.GradeRow,
           {
             grade: row.grade,
@@ -11579,50 +12280,50 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
           },
           row.label
         )) }) }),
-        /* @__PURE__ */ jsx69(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx69(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx69(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
+        /* @__PURE__ */ jsx72(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx72(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx72(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
       ]
     }
   );
 }
 
 // src/patterns/dashboard/PubDashboardWidgetBodies.tsx
-import { jsx as jsx70, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs60 } from "react/jsx-runtime";
 function PubDisabilityStatusList({ items, summary }) {
-  return /* @__PURE__ */ jsxs57("div", { className: "ds-disability-status", children: [
-    /* @__PURE__ */ jsx70("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs60("div", { className: "ds-disability-status", children: [
+    /* @__PURE__ */ jsx73("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs60(
       "li",
       {
         className: ["ds-disability-status__item", item.grade].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs57("span", { children: [
-            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx70("span", { className: "dot", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsxs60("span", { children: [
+            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx73("span", { className: "dot", "aria-hidden": true }) : null,
             item.label
           ] }),
-          /* @__PURE__ */ jsx70("p", { children: item.value })
+          /* @__PURE__ */ jsx73("p", { children: item.value })
         ]
       },
       i
     )) }),
-    summary && summary.length > 0 ? /* @__PURE__ */ jsx70("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs57("p", { className: "ds-disability-status__value", children: [
+    summary && summary.length > 0 ? /* @__PURE__ */ jsx73("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs60("p", { className: "ds-disability-status__value", children: [
       row.label,
-      /* @__PURE__ */ jsx70("span", { children: row.value })
+      /* @__PURE__ */ jsx73("span", { children: row.value })
     ] }, i)) }) : null
   ] });
 }
 function PubTrafficTop5Bars({ rows }) {
   const maxPercent = Math.max(...rows.map((row) => row.percent), 0);
-  return /* @__PURE__ */ jsx70("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs57("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx70("p", { className: "ds-bar-name", title: row.label, children: row.label }),
-    /* @__PURE__ */ jsx70("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx70("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
-    /* @__PURE__ */ jsx70("p", { className: "ds-bar-value", title: row.value, children: row.value })
+  return /* @__PURE__ */ jsx73("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs60("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx73("p", { className: "ds-bar-name", title: row.label, children: row.label }),
+    /* @__PURE__ */ jsx73("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx73("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
+    /* @__PURE__ */ jsx73("p", { className: "ds-bar-value", title: row.value, children: row.value })
   ] }, row.label)) });
 }
 function PubTop5EquipmentBars({ rows }) {
-  return /* @__PURE__ */ jsxs57("div", { className: "ds-group", children: [
-    /* @__PURE__ */ jsx70("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx70("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx70("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
-    /* @__PURE__ */ jsx70("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx70("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx70("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs57("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
-      /* @__PURE__ */ jsx70("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
-      /* @__PURE__ */ jsx70("div", { className: "ds-bar-status", children: row.status })
+  return /* @__PURE__ */ jsxs60("div", { className: "ds-group", children: [
+    /* @__PURE__ */ jsx73("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx73("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx73("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
+    /* @__PURE__ */ jsx73("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx73("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx73("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs60("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
+      /* @__PURE__ */ jsx73("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
+      /* @__PURE__ */ jsx73("div", { className: "ds-bar-status", children: row.status })
     ] }) }, row.label)) }) })
   ] });
 }
@@ -11631,15 +12332,15 @@ function PubChartSample({
   alt = "\uCC28\uD2B8",
   onError
 }) {
-  return /* @__PURE__ */ jsx70("div", { className: "ds-chart", children: /* @__PURE__ */ jsx70("img", { src, alt, className: "chart_sample", onError }) });
+  return /* @__PURE__ */ jsx73("div", { className: "ds-chart", children: /* @__PURE__ */ jsx73("img", { src, alt, className: "chart_sample", onError }) });
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
-import { jsx as jsx71, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs61 } from "react/jsx-runtime";
 function resolveAlertIcon(item) {
   if (item.icon) {
     if (item.icon === "line/arrow-down") return "line/arrow-narrow-down";
@@ -11666,7 +12367,7 @@ function StnAlertCard({
 }) {
   const iconNode = resolveAlertIcon(item);
   const gradeLabel = resolveGradeLabel(item.grade);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx74(
     StnCard,
     {
       variant: "elevated",
@@ -11675,8 +12376,8 @@ function StnAlertCard({
       interactive: true,
       className: cn("stn-alert-card", className),
       onClick,
-      children: /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__row", children: [
-        /* @__PURE__ */ jsx71(
+      children: /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__row", children: [
+        /* @__PURE__ */ jsx74(
           StnIcon,
           {
             name: iconNode,
@@ -11685,9 +12386,9 @@ function StnAlertCard({
             className: "stn-alert-card__icon"
           }
         ),
-        /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsxs58(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
-            /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__body", children: [
+          /* @__PURE__ */ jsxs61(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
+            /* @__PURE__ */ jsx74(
               StnChip,
               {
                 shape: "pill",
@@ -11697,25 +12398,25 @@ function StnAlertCard({
                 children: gradeLabel
               }
             ),
-            /* @__PURE__ */ jsx71(
+            /* @__PURE__ */ jsx74(
               "span",
               {
                 className: cn("stn-alert-card__title", titleOverflow),
                 title: item.title,
-                children: /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__text-inner", children: item.title })
+                children: /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__text-inner", children: item.title })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs58(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
-            /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsxs61(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
+            /* @__PURE__ */ jsx74(
               "span",
               {
                 className: cn("stn-alert-card__desc", descOverflow),
                 title: item.description,
-                children: /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__text-inner", children: item.description })
+                children: /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__text-inner", children: item.description })
               }
             ),
-            item.occurredAt && /* @__PURE__ */ jsxs58(
+            item.occurredAt && /* @__PURE__ */ jsxs61(
               StnChip,
               {
                 shape: "pill",
@@ -11731,9 +12432,9 @@ function StnAlertCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__meta", children: [
-          /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__time", children: item.time }),
-          item.unread !== false && /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__meta", children: [
+          /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__time", children: item.time }),
+          item.unread !== false && /* @__PURE__ */ jsx74(
             "span",
             {
               className: cn(
@@ -11767,11 +12468,11 @@ function StnAlertCenterPanel({
   closeLabel = "\uB2EB\uAE30",
   className
 }) {
-  const [activeTab, setActiveTab] = useState19(defaultTab);
+  const [activeTab, setActiveTab] = useState20(defaultTab);
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
-  return /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       className: cn(
@@ -11783,13 +12484,13 @@ function StnAlertCenterPanel({
       ),
       "data-stn-alert-center": true,
       children: [
-        /* @__PURE__ */ jsxs58("div", { className: "stn-alert-center__header", children: [
-          /* @__PURE__ */ jsxs58("div", { className: "stn-alert-center__header-left", children: [
-            /* @__PURE__ */ jsx71(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
-            /* @__PURE__ */ jsx71("span", { className: "stn-alert-center__title", children: title }),
-            alertCount > 0 && /* @__PURE__ */ jsx71(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
+        /* @__PURE__ */ jsxs61("div", { className: "stn-alert-center__header", children: [
+          /* @__PURE__ */ jsxs61("div", { className: "stn-alert-center__header-left", children: [
+            /* @__PURE__ */ jsx74(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
+            /* @__PURE__ */ jsx74("span", { className: "stn-alert-center__title", children: title }),
+            alertCount > 0 && /* @__PURE__ */ jsx74(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
           ] }),
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx74(
             StnSegmented,
             {
               size: "md",
@@ -11802,8 +12503,8 @@ function StnAlertCenterPanel({
               }))
             }
           ),
-          /* @__PURE__ */ jsxs58("div", { className: "stn-alert-center__header-right", children: [
-            /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsxs61("div", { className: "stn-alert-center__header-right", children: [
+            /* @__PURE__ */ jsx74(
               StnButton,
               {
                 variant: "text",
@@ -11813,8 +12514,8 @@ function StnAlertCenterPanel({
                 children: "\uBAA8\uB450 \uC77D\uC74C"
               }
             ),
-            /* @__PURE__ */ jsx71("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx71(
+            /* @__PURE__ */ jsx74("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx74(
               StnButton,
               {
                 icon: "line/x",
@@ -11826,14 +12527,14 @@ function StnAlertCenterPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs58(
+        /* @__PURE__ */ jsxs61(
           StnScroll,
           {
             orientation: "vertical",
             size: "thin",
             className: "stn-alert-center__list-wrap",
             children: [
-              activeTab === "error" && /* @__PURE__ */ jsx71("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx71("li", { children: /* @__PURE__ */ jsx71(
+              activeTab === "error" && /* @__PURE__ */ jsx74("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx74("li", { children: /* @__PURE__ */ jsx74(
                 StnAlertCard,
                 {
                   item,
@@ -11842,35 +12543,35 @@ function StnAlertCenterPanel({
                   onClick: () => onItemClick?.(item)
                 }
               ) }, item.id ?? item.title)) }),
-              activeTab === "work" && /* @__PURE__ */ jsx71("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx71("li", { children: /* @__PURE__ */ jsx71(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__row", children: [
-                /* @__PURE__ */ jsx71(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
-                /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__body", children: [
-                  /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
-                  /* @__PURE__ */ jsx71("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__text-inner", children: row.text }) })
+              activeTab === "work" && /* @__PURE__ */ jsx74("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx74("li", { children: /* @__PURE__ */ jsx74(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__row", children: [
+                /* @__PURE__ */ jsx74(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
+                /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__body", children: [
+                  /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
+                  /* @__PURE__ */ jsx74("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__text-inner", children: row.text }) })
                 ] }),
-                /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__time", children: row.time })
+                /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__time", children: row.time })
               ] }) }) }, row.id ?? row.text)) }),
-              activeTab === "deploy" && /* @__PURE__ */ jsx71("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx71("li", { children: /* @__PURE__ */ jsx71(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__row", children: [
-                /* @__PURE__ */ jsx71(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
-                /* @__PURE__ */ jsxs58("div", { className: "stn-alert-card__body", children: [
-                  /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
-                  /* @__PURE__ */ jsx71("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__text-inner", children: row.text }) })
+              activeTab === "deploy" && /* @__PURE__ */ jsx74("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx74("li", { children: /* @__PURE__ */ jsx74(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__row", children: [
+                /* @__PURE__ */ jsx74(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
+                /* @__PURE__ */ jsxs61("div", { className: "stn-alert-card__body", children: [
+                  /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
+                  /* @__PURE__ */ jsx74("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__text-inner", children: row.text }) })
                 ] }),
-                /* @__PURE__ */ jsx71("span", { className: "stn-alert-card__time", children: row.time })
+                /* @__PURE__ */ jsx74("span", { className: "stn-alert-card__time", children: row.time })
               ] }) }) }, row.id ?? row.text)) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx71("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs58(
+        /* @__PURE__ */ jsx74("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs61(
           "button",
           {
             type: "button",
             className: "stn-alert-center__footer-link",
             onClick: onManageSettings,
             children: [
-              /* @__PURE__ */ jsx71("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
-              /* @__PURE__ */ jsx71(StnIcon, { name: "line/settings", size: 14 }),
-              /* @__PURE__ */ jsx71(StnIcon, { name: "line/chevron-right", size: 14 })
+              /* @__PURE__ */ jsx74("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
+              /* @__PURE__ */ jsx74(StnIcon, { name: "line/settings", size: 14 }),
+              /* @__PURE__ */ jsx74(StnIcon, { name: "line/chevron-right", size: 14 })
             ]
           }
         ) })
@@ -11880,7 +12581,7 @@ function StnAlertCenterPanel({
 }
 
 // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 function StnAlertCenterDocPreview({
   mode = "light",
   theme,
@@ -11888,11 +12589,11 @@ function StnAlertCenterDocPreview({
   children,
   ...panelProps
 }) {
-  const panel = children ?? /* @__PURE__ */ jsx72(StnAlertCenterPanel, { ...panelProps });
+  const panel = children ?? /* @__PURE__ */ jsx75(StnAlertCenterPanel, { ...panelProps });
   if (!withDocChrome) {
-    return /* @__PURE__ */ jsx72(StnProvider, { mode, theme, applyModeToDocument: false, children: panel });
+    return /* @__PURE__ */ jsx75(StnProvider, { mode, theme, applyModeToDocument: false, children: panel });
   }
-  return /* @__PURE__ */ jsx72("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx72("div", { className: "stn-alert-center-preview-shell", children: panel }) });
+  return /* @__PURE__ */ jsx75("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx75("div", { className: "stn-alert-center-preview-shell", children: panel }) });
 }
 
 // src/index.ts
@@ -11917,13 +12618,13 @@ var SideNavContext = createContext7({
 var useSideNav = () => useContext7(SideNavContext);
 
 // src/components/sideNav/StnSideNavItem.tsx
-import { forwardRef as forwardRef41 } from "react";
+import { forwardRef as forwardRef44 } from "react";
 import { STN_NAV_MENU_SUB_ICON } from "@stn-uiux/pub-ui/data/stnSideNavItem";
-import { jsx as jsx73, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs62 } from "react/jsx-runtime";
 function maskStyle2(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
-var StnSideNavItem = forwardRef41(function StnSideNavItem2({
+var StnSideNavItem = forwardRef44(function StnSideNavItem2({
   label,
   id,
   iconSrc,
@@ -11966,13 +12667,13 @@ var StnSideNavItem = forwardRef41(function StnSideNavItem2({
       sideNav.onSelect(id);
     }
   };
-  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs59("span", { className: "stn-side-nav-item__icon-wrap", children: [
-    /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
-    showDot ? /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(StnBadge, { variant: "dot", color: "error" }) }) : null
+  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs62("span", { className: "stn-side-nav-item__icon-wrap", children: [
+    /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
+    showDot ? /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx76(StnBadge, { variant: "dot", color: "error" }) }) : null
   ] }) : null;
-  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
+  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
   const activeIconElement = isSub ? subIconElement : iconElement;
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx76(
     "button",
     {
       ref,
@@ -11991,10 +12692,10 @@ var StnSideNavItem = forwardRef41(function StnSideNavItem2({
       title: collapsed ? label : void 0,
       onClick: handleClick,
       ...rest,
-      children: /* @__PURE__ */ jsxs59("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
-        /* @__PURE__ */ jsxs59("span", { className: "stn-side-nav-item__lead", children: [
-          isSub && showSubIndent ? /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
-          shouldShowSubDot ? /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsxs62("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
+        /* @__PURE__ */ jsxs62("span", { className: "stn-side-nav-item__lead", children: [
+          isSub && showSubIndent ? /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
+          shouldShowSubDot ? /* @__PURE__ */ jsx76(
             "span",
             {
               className: cn(
@@ -12002,14 +12703,14 @@ var StnSideNavItem = forwardRef41(function StnSideNavItem2({
                 hasIcon && iconPosition === "left" && "compact"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
+              children: /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
             }
           ) : null,
           iconPosition === "left" ? activeIconElement : null,
-          /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__label", children: label })
+          /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__label", children: label })
         ] }),
         iconPosition === "right" ? activeIconElement : null,
-        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx73(
+        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx76(
           StnBadge,
           {
             badgeContent: badge,
@@ -12017,7 +12718,7 @@ var StnSideNavItem = forwardRef41(function StnSideNavItem2({
             appearance: "subtle",
             className: "stn-side-nav-item__badge"
           }
-        ) : badge ? /* @__PURE__ */ jsx73("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx73(
+        ) : badge ? /* @__PURE__ */ jsx76("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx76(
           StnBadge,
           {
             variant: "dot",
@@ -12025,7 +12726,7 @@ var StnSideNavItem = forwardRef41(function StnSideNavItem2({
             className: "stn-side-nav-item__badge"
           }
         ) : null : null,
-        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx73(
+        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx76(
           "span",
           {
             className: cn(
@@ -12042,15 +12743,15 @@ var StnSideNavItem = forwardRef41(function StnSideNavItem2({
 });
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { forwardRef as forwardRef43 } from "react";
+import { forwardRef as forwardRef46 } from "react";
 
 // src/components/sideNav/StnSideNavLogo.tsx
-import { forwardRef as forwardRef42 } from "react";
-import { jsx as jsx74 } from "react/jsx-runtime";
-var StnSideNavLogo = forwardRef42(
+import { forwardRef as forwardRef45 } from "react";
+import { jsx as jsx77 } from "react/jsx-runtime";
+var StnSideNavLogo = forwardRef45(
   function StnSideNavLogo2({ className, logoProps, ...rest }, ref) {
     const { collapsed } = useSideNav();
-    return /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsx77(
       "div",
       {
         ref,
@@ -12061,7 +12762,7 @@ var StnSideNavLogo = forwardRef42(
         ),
         title: "InfoMap",
         ...rest,
-        children: /* @__PURE__ */ jsx74(
+        children: /* @__PURE__ */ jsx77(
           StnLogo,
           {
             variant: collapsed ? "onlyimg" : "horizontal",
@@ -12075,8 +12776,8 @@ var StnSideNavLogo = forwardRef42(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment12, jsx as jsx75, jsxs as jsxs60 } from "react/jsx-runtime";
-var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
+import { Fragment as Fragment12, jsx as jsx78, jsxs as jsxs63 } from "react/jsx-runtime";
+var StnSideNavHeader = forwardRef46(function StnSideNavHeader2({
   children,
   border = false,
   hasBorder = false,
@@ -12088,7 +12789,7 @@ var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
   const { collapsed, onToggleCollapse, isDrawer, setMobileOpen } = useSideNav();
   const withBorder = Boolean(border || hasBorder);
   const shouldShowClose = showClose ?? Boolean(isDrawer);
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       ref,
@@ -12099,9 +12800,9 @@ var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs60(Fragment12, { children: [
-        /* @__PURE__ */ jsx75(StnSideNavLogo, {}),
-        shouldShowClose ? /* @__PURE__ */ jsx75(
+      children: children ?? /* @__PURE__ */ jsxs63(Fragment12, { children: [
+        /* @__PURE__ */ jsx78(StnSideNavLogo, {}),
+        shouldShowClose ? /* @__PURE__ */ jsx78(
           StnButton,
           {
             size: "sm",
@@ -12113,7 +12814,7 @@ var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
             className: "stn-side-nav__collapse-btn",
             onClick: () => setMobileOpen?.(false)
           }
-        ) : showToggle ? /* @__PURE__ */ jsx75(
+        ) : showToggle ? /* @__PURE__ */ jsx78(
           StnButton,
           {
             size: "sm",
@@ -12132,16 +12833,16 @@ var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
 });
 
 // src/components/sideNav/StnSideNavMenu.tsx
-import { forwardRef as forwardRef44 } from "react";
-import { jsx as jsx76 } from "react/jsx-runtime";
-var StnSideNavMenu = forwardRef44(function StnSideNavMenu2({
+import { forwardRef as forwardRef47 } from "react";
+import { jsx as jsx79 } from "react/jsx-runtime";
+var StnSideNavMenu = forwardRef47(function StnSideNavMenu2({
   children,
   className,
   scrollSize = "thin",
   scrollColor = "fade",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx79(
     "nav",
     {
       ref,
@@ -12162,13 +12863,13 @@ var StnSideNavMenu = forwardRef44(function StnSideNavMenu2({
 
 // src/components/sideNav/StnSideNavGroup.tsx
 import {
-  forwardRef as forwardRef45,
+  forwardRef as forwardRef48,
   useEffect as useEffect16,
   useRef as useRef13,
-  useState as useState20
+  useState as useState21
 } from "react";
-import { jsx as jsx77, jsxs as jsxs61 } from "react/jsx-runtime";
-var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
+import { jsx as jsx80, jsxs as jsxs64 } from "react/jsx-runtime";
+var StnSideNavGroup = forwardRef48(function StnSideNavGroup2({
   label,
   parent,
   direction = "down",
@@ -12184,7 +12885,7 @@ var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
   ...rest
 }, ref) {
   const { collapsed } = useSideNav();
-  const [internalOpen, setInternalOpen] = useState20(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState21(defaultOpen);
   const isOpen = openProp ?? internalOpen;
   const isDropdown = Boolean(dropdown || variant === "dropdown");
   const isTransparent = dropdownVariant === "transparent" || dropdownBackground === false;
@@ -12212,7 +12913,7 @@ var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
     }
     onOpenChange?.(next);
   };
-  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx77(
+  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx80(
     "div",
     {
       className: cn(
@@ -12227,7 +12928,7 @@ var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
       children
     }
   ) : null;
-  return /* @__PURE__ */ jsxs61(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
       ref: (node) => {
@@ -12248,7 +12949,7 @@ var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
       "aria-label": typeof label === "string" ? label : void 0,
       ...rest,
       children: [
-        label && !collapsed ? /* @__PURE__ */ jsx77("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
+        label && !collapsed ? /* @__PURE__ */ jsx80("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
         isUp ? subnavNode : null,
         parent,
         !isUp ? subnavNode : null
@@ -12258,10 +12959,10 @@ var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
 });
 
 // src/components/sideNav/StnSideNavSpacer.tsx
-import { forwardRef as forwardRef46 } from "react";
-import { jsx as jsx78 } from "react/jsx-runtime";
-var StnSideNavSpacer = forwardRef46(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx78(
+import { forwardRef as forwardRef49 } from "react";
+import { jsx as jsx81 } from "react/jsx-runtime";
+var StnSideNavSpacer = forwardRef49(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx81(
     "div",
     {
       ref,
@@ -12274,10 +12975,10 @@ var StnSideNavSpacer = forwardRef46(function StnSideNavSpacer2({ className, styl
 });
 
 // src/components/sideNav/StnSideNavFooter.tsx
-import { forwardRef as forwardRef47 } from "react";
-import { jsx as jsx79 } from "react/jsx-runtime";
-var StnSideNavFooter = forwardRef47(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx79(
+import { forwardRef as forwardRef50 } from "react";
+import { jsx as jsx82 } from "react/jsx-runtime";
+var StnSideNavFooter = forwardRef50(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx82(
     "nav",
     {
       ref,
@@ -12290,12 +12991,12 @@ var StnSideNavFooter = forwardRef47(function StnSideNavFooter2({ curved = false,
 });
 
 // src/components/sideNav/StnSideNavToggle.tsx
-import { forwardRef as forwardRef48 } from "react";
-import { jsx as jsx80 } from "react/jsx-runtime";
-var StnSideNavToggle = forwardRef48(
+import { forwardRef as forwardRef51 } from "react";
+import { jsx as jsx83 } from "react/jsx-runtime";
+var StnSideNavToggle = forwardRef51(
   function StnSideNavToggle2({ className, onClick, ...rest }, ref) {
     const { collapsed, onToggleCollapse } = useSideNav();
-    return /* @__PURE__ */ jsx80(
+    return /* @__PURE__ */ jsx83(
       "button",
       {
         ref,
@@ -12308,7 +13009,7 @@ var StnSideNavToggle = forwardRef48(
         "aria-label": collapsed ? "\uC0AC\uC774\uB4DC\uBC14 \uD3BC\uCE58\uAE30" : "\uC0AC\uC774\uB4DC\uBC14 \uC811\uAE30",
         title: collapsed ? "\uC0AC\uC774\uB4DC\uBC14 \uD3BC\uCE58\uAE30" : "\uC0AC\uC774\uB4DC\uBC14 \uC811\uAE30",
         ...rest,
-        children: /* @__PURE__ */ jsx80(
+        children: /* @__PURE__ */ jsx83(
           "svg",
           {
             width: "12",
@@ -12319,7 +13020,7 @@ var StnSideNavToggle = forwardRef48(
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx80("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx83("path", { d: "M9 18l6-6-6-6" })
           }
         )
       }
@@ -12328,30 +13029,30 @@ var StnSideNavToggle = forwardRef48(
 );
 
 // src/components/sideNav/StnSideNavWatermark.tsx
-import { forwardRef as forwardRef49 } from "react";
-import { jsx as jsx81 } from "react/jsx-runtime";
-var StnSideNavWatermark = forwardRef49(
+import { forwardRef as forwardRef52 } from "react";
+import { jsx as jsx84 } from "react/jsx-runtime";
+var StnSideNavWatermark = forwardRef52(
   function StnSideNavWatermark2({ size = "xl", mode, theme, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx81(
+    return /* @__PURE__ */ jsx84(
       "div",
       {
         ref,
         className: cn("stn-side-nav__watermark", className),
         "aria-hidden": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx81(StnLogo, { variant: "watermark", size, mode: mode ?? theme })
+        children: /* @__PURE__ */ jsx84(StnLogo, { variant: "watermark", size, mode: mode ?? theme })
       }
     );
   }
 );
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
-import { forwardRef as forwardRef50, useEffect as useEffect17, useState as useState21 } from "react";
-import { jsx as jsx82, jsxs as jsxs62 } from "react/jsx-runtime";
-var StnSideNavMobileTrigger = forwardRef50(
+import { forwardRef as forwardRef53, useEffect as useEffect17, useState as useState22 } from "react";
+import { jsx as jsx85, jsxs as jsxs65 } from "react/jsx-runtime";
+var StnSideNavMobileTrigger = forwardRef53(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen: contextMobileOpen } = useSideNav();
-    const [fallbackMobileOpen, setFallbackMobileOpen] = useState21(false);
+    const [fallbackMobileOpen, setFallbackMobileOpen] = useState22(false);
     useEffect17(() => {
       if (onToggleMobileOpen) return;
       const handleStateChange = (e) => {
@@ -12366,7 +13067,7 @@ var StnSideNavMobileTrigger = forwardRef50(
       };
     }, [onToggleMobileOpen]);
     const isMobileOpen = onToggleMobileOpen ? contextMobileOpen : fallbackMobileOpen;
-    return /* @__PURE__ */ jsx82(
+    return /* @__PURE__ */ jsx85(
       "button",
       {
         ref,
@@ -12388,10 +13089,10 @@ var StnSideNavMobileTrigger = forwardRef50(
           }
         },
         ...rest,
-        children: children ?? /* @__PURE__ */ jsxs62("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx82("span", {}),
-          /* @__PURE__ */ jsx82("span", {}),
-          /* @__PURE__ */ jsx82("span", {})
+        children: children ?? /* @__PURE__ */ jsxs65("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx85("span", {}),
+          /* @__PURE__ */ jsx85("span", {}),
+          /* @__PURE__ */ jsx85("span", {})
         ] })
       }
     );
@@ -12400,12 +13101,12 @@ var StnSideNavMobileTrigger = forwardRef50(
 
 // src/components/sideNav/StnSideNavSub.tsx
 import {
-  forwardRef as forwardRef51
+  forwardRef as forwardRef54
 } from "react";
-import { jsx as jsx83 } from "react/jsx-runtime";
-var StnSideNavSub = forwardRef51(
+import { jsx as jsx86 } from "react/jsx-runtime";
+var StnSideNavSub = forwardRef54(
   function StnSideNavSub2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx83(
+    return /* @__PURE__ */ jsx86(
       "div",
       {
         ref,
@@ -12418,7 +13119,7 @@ var StnSideNavSub = forwardRef51(
     );
   }
 );
-var StnSideNavSubItem = forwardRef51(
+var StnSideNavSubItem = forwardRef54(
   function StnSideNavSubItem2({
     variant = "ghost",
     size = "md",
@@ -12434,14 +13135,14 @@ var StnSideNavSubItem = forwardRef51(
     const { collapsed } = useSideNav();
     const content = children ?? label;
     const computedTitle = title ?? (typeof content === "string" ? content : void 0);
-    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx83("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx83(
+    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx86("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx86(
       "span",
       {
         className: "stn-side-nav__sub-glyph",
         style: { maskImage: `url('${iconSrc}')`, WebkitMaskImage: `url('${iconSrc}')` }
       }
     ) }) : null);
-    return /* @__PURE__ */ jsx83(
+    return /* @__PURE__ */ jsx86(
       StnButton,
       {
         ref,
@@ -12460,9 +13161,9 @@ var StnSideNavSubItem = forwardRef51(
 );
 
 // src/components/sideNav/StnSideNavSubNav.tsx
-import { forwardRef as forwardRef52 } from "react";
-import { jsx as jsx84 } from "react/jsx-runtime";
-var StnSideNavSubNav = forwardRef52(
+import { forwardRef as forwardRef55 } from "react";
+import { jsx as jsx87 } from "react/jsx-runtime";
+var StnSideNavSubNav = forwardRef55(
   function StnSideNavSubNav2({
     dropdown = false,
     direction = "down",
@@ -12474,7 +13175,7 @@ var StnSideNavSubNav = forwardRef52(
   }, ref) {
     const isUp = direction === "up";
     const isTransparent = variant === "transparent" || background === false;
-    return /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsx87(
       "div",
       {
         ref,
@@ -12497,15 +13198,15 @@ var StnSideNavSubNav = forwardRef52(
 
 // src/patterns/sideNav/StnSideNavigation.tsx
 import {
-  forwardRef as forwardRef53,
+  forwardRef as forwardRef56,
   useCallback as useCallback11,
   useEffect as useEffect18,
-  useMemo as useMemo5,
-  useState as useState22
+  useMemo as useMemo6,
+  useState as useState23
 } from "react";
-import { jsx as jsx85, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs66 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
-  const [internalState, setInternalState] = useState22(defaultValue);
+  const [internalState, setInternalState] = useState23(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalState;
   const setValue = useCallback11(
@@ -12519,7 +13220,7 @@ function useControllableState(controlledValue, defaultValue, onChange) {
   );
   return [value, setValue];
 }
-var StnSideNavigationRoot = forwardRef53(function StnSideNavigationRoot2({
+var StnSideNavigationRoot = forwardRef56(function StnSideNavigationRoot2({
   variant: variantProp,
   appearance,
   drawerVariant: drawerVariantProp,
@@ -12583,7 +13284,7 @@ var StnSideNavigationRoot = forwardRef53(function StnSideNavigationRoot2({
   const isEffectiveCollapsed = isDrawerMode && mobileOpen ? false : collapsed;
   const activeVariant = isDrawerMode && mobileOpen ? drawerVariant : variant;
   const isGlassmorphism = activeVariant === "glassmorphism";
-  const contextValue = useMemo5(
+  const contextValue = useMemo6(
     () => ({
       collapsed: isEffectiveCollapsed,
       activeId,
@@ -12596,9 +13297,9 @@ var StnSideNavigationRoot = forwardRef53(function StnSideNavigationRoot2({
     }),
     [isEffectiveCollapsed, activeId, setActiveId, handleToggleCollapse, mobileOpen, handleToggleMobileOpen, setMobileOpen, isDrawerMode]
   );
-  return /* @__PURE__ */ jsxs63(SideNavContext.Provider, { value: contextValue, children: [
-    showMobileTrigger && /* @__PURE__ */ jsx85(StnSideNavMobileTrigger, { floating: true }),
-    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsxs66(SideNavContext.Provider, { value: contextValue, children: [
+    showMobileTrigger && /* @__PURE__ */ jsx88(StnSideNavMobileTrigger, { floating: true }),
+    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx88(
       "div",
       {
         className: cn("stn-side-nav__backdrop", mobileOpen && "is-open"),
@@ -12606,7 +13307,7 @@ var StnSideNavigationRoot = forwardRef53(function StnSideNavigationRoot2({
         "aria-hidden": !mobileOpen
       }
     ),
-    /* @__PURE__ */ jsx85(
+    /* @__PURE__ */ jsx88(
       "aside",
       {
         ref,
@@ -12650,12 +13351,12 @@ import {
   useEffect as useEffect19,
   useId as useId17,
   useRef as useRef14,
-  useState as useState23
+  useState as useState24
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx89, jsxs as jsxs67 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -12668,13 +13369,13 @@ function hasSegmentMenu(item) {
   return Boolean(item.menu || item.menuItems && item.menuItems.length > 0);
 }
 function BreadcrumbSeparator() {
-  return /* @__PURE__ */ jsx86("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx86("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
+  return /* @__PURE__ */ jsx89("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx89("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
 }
 function BreadcrumbIcon({ src }) {
-  return /* @__PURE__ */ jsx86("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx89("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
 }
 function BreadcrumbCaret() {
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx89(
     "span",
     {
       className: "stn-breadcrumb__caret",
@@ -12688,10 +13389,10 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs64(Fragment14, { children: [
-    iconSrc ? /* @__PURE__ */ jsx86(BreadcrumbIcon, { src: iconSrc }) : null,
-    /* @__PURE__ */ jsx86("span", { className: "stn-breadcrumb__label", children: label }),
-    menu ? /* @__PURE__ */ jsx86(BreadcrumbCaret, {}) : null
+  return /* @__PURE__ */ jsxs67(Fragment14, { children: [
+    iconSrc ? /* @__PURE__ */ jsx89(BreadcrumbIcon, { src: iconSrc }) : null,
+    /* @__PURE__ */ jsx89("span", { className: "stn-breadcrumb__label", children: label }),
+    menu ? /* @__PURE__ */ jsx89(BreadcrumbCaret, {}) : null
   ] });
 }
 function BreadcrumbMenuList({
@@ -12699,7 +13400,7 @@ function BreadcrumbMenuList({
   items,
   onPick
 }) {
-  return /* @__PURE__ */ jsx86("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx86("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx89("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx89("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx89(
     "a",
     {
       role: "menuitem",
@@ -12711,7 +13412,7 @@ function BreadcrumbMenuList({
       },
       children: option.label
     }
-  ) : /* @__PURE__ */ jsx86(
+  ) : /* @__PURE__ */ jsx89(
     "button",
     {
       type: "button",
@@ -12749,19 +13450,19 @@ function BreadcrumbSegment({
   isCurrent
 }) {
   const menuId = useId17();
-  const [open, setOpen] = useState23(false);
+  const [open, setOpen] = useState24(false);
   const menuItems = item.menuItems ?? [];
   const showMenu = hasSegmentMenu(item) && !isCurrent;
   const canOpenMenu = showMenu && menuItems.length > 0;
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const iconSrc = resolveIconSrc(item);
-  const content = /* @__PURE__ */ jsx86(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
+  const content = /* @__PURE__ */ jsx89(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
   if (isCurrent) {
-    return /* @__PURE__ */ jsx86("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
+    return /* @__PURE__ */ jsx89("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
   }
   if (canOpenMenu) {
-    return /* @__PURE__ */ jsxs64("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
-      /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsxs67("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
+      /* @__PURE__ */ jsx89(
         "button",
         {
           type: "button",
@@ -12777,7 +13478,7 @@ function BreadcrumbSegment({
           children: content
         }
       ),
-      open ? /* @__PURE__ */ jsx86(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+      open ? /* @__PURE__ */ jsx89(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
     ] });
   }
   if (item.menu || item.onClick) {
@@ -12789,7 +13490,7 @@ function BreadcrumbSegment({
       "aria-haspopup": item.menu ? "menu" : void 0,
       "aria-expanded": item.menu ? false : void 0
     };
-    return /* @__PURE__ */ jsx86("button", { ...buttonProps, children: content });
+    return /* @__PURE__ */ jsx89("button", { ...buttonProps, children: content });
   }
   if (item.href) {
     const linkProps = {
@@ -12798,17 +13499,17 @@ function BreadcrumbSegment({
       onClick: item.onClick,
       "aria-label": item.label
     };
-    return /* @__PURE__ */ jsx86("a", { ...linkProps, children: content });
+    return /* @__PURE__ */ jsx89("a", { ...linkProps, children: content });
   }
-  return /* @__PURE__ */ jsx86("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
+  return /* @__PURE__ */ jsx89("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
 }
 function BreadcrumbBack({
   label,
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs64(Fragment14, { children: [
-    /* @__PURE__ */ jsx86(
+  const content = /* @__PURE__ */ jsxs67(Fragment14, { children: [
+    /* @__PURE__ */ jsx89(
       "span",
       {
         className: "stn-breadcrumb__back-glyph",
@@ -12816,12 +13517,12 @@ function BreadcrumbBack({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx86("span", { className: "stn-breadcrumb__label", children: label })
+    /* @__PURE__ */ jsx89("span", { className: "stn-breadcrumb__label", children: label })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx86("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+    return /* @__PURE__ */ jsx89("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
   }
-  return /* @__PURE__ */ jsx86("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+  return /* @__PURE__ */ jsx89("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
 }
 function splitCollapsedItems(items, maxItems, itemsBeforeCollapse, itemsAfterCollapse) {
   if (!maxItems || items.length <= maxItems) {
@@ -12843,7 +13544,7 @@ function BreadcrumbCollapsed({
   items,
   menuId
 }) {
-  const [open, setOpen] = useState23(false);
+  const [open, setOpen] = useState24(false);
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const menuItems = items.map((item) => ({
     id: item.id,
@@ -12852,8 +13553,8 @@ function BreadcrumbCollapsed({
     onClick: item.onClick,
     current: item.current
   }));
-  return /* @__PURE__ */ jsxs64("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
-    /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsxs67("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
+    /* @__PURE__ */ jsx89(
       "button",
       {
         type: "button",
@@ -12866,7 +13567,7 @@ function BreadcrumbCollapsed({
         children: "\u22EF"
       }
     ),
-    open ? /* @__PURE__ */ jsx86(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+    open ? /* @__PURE__ */ jsx89(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
   ] });
 }
 function StnBreadcrumb({
@@ -12902,8 +13603,8 @@ function StnBreadcrumb({
   );
   const renderTrailItem = (item) => {
     const isCurrent = Boolean(item.current) || item.id === targetCurrentId;
-    const segment = /* @__PURE__ */ jsx86(BreadcrumbSegment, { item, isCurrent });
-    return /* @__PURE__ */ jsx86(
+    const segment = /* @__PURE__ */ jsx89(BreadcrumbSegment, { item, isCurrent });
+    return /* @__PURE__ */ jsx89(
       "li",
       {
         className: cn(
@@ -12914,7 +13615,7 @@ function StnBreadcrumb({
       }
     );
   };
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx89(
     "nav",
     {
       className: cn(
@@ -12925,29 +13626,29 @@ function StnBreadcrumb({
         className
       ),
       "aria-label": "Breadcrumb",
-      children: /* @__PURE__ */ jsxs64("ol", { className: "stn-breadcrumb__list", children: [
-        currentItem ? /* @__PURE__ */ jsx86("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx86(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
-        !reverse && showHome ? /* @__PURE__ */ jsx86("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs64("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
-          /* @__PURE__ */ jsx86(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
-          /* @__PURE__ */ jsx86("span", { className: "blind", children: homeLabel })
+      children: /* @__PURE__ */ jsxs67("ol", { className: "stn-breadcrumb__list", children: [
+        currentItem ? /* @__PURE__ */ jsx89("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx89(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
+        !reverse && showHome ? /* @__PURE__ */ jsx89("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs67("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+          /* @__PURE__ */ jsx89(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
+          /* @__PURE__ */ jsx89("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs64(Fragment13, { children: [
-          !reverse && (showHome || index > 0 || leadSeparator) || reverse && (index > 0 || leadSeparator) ? /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}) : null,
+        head.map((item, index) => /* @__PURE__ */ jsxs67(Fragment13, { children: [
+          !reverse && (showHome || index > 0 || leadSeparator) || reverse && (index > 0 || leadSeparator) ? /* @__PURE__ */ jsx89(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs64(Fragment14, { children: [
-          /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}),
-          /* @__PURE__ */ jsx86(BreadcrumbCollapsed, { items: hidden, menuId })
+        hidden.length > 0 ? /* @__PURE__ */ jsxs67(Fragment14, { children: [
+          /* @__PURE__ */ jsx89(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx89(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs64(Fragment13, { children: [
-          /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}),
+        tail.map((item) => /* @__PURE__ */ jsxs67(Fragment13, { children: [
+          /* @__PURE__ */ jsx89(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id)),
-        reverse && showHome ? /* @__PURE__ */ jsxs64(Fragment14, { children: [
-          /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}),
-          /* @__PURE__ */ jsx86("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs64("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
-            /* @__PURE__ */ jsx86(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
-            /* @__PURE__ */ jsx86("span", { className: "blind", children: homeLabel })
+        reverse && showHome ? /* @__PURE__ */ jsxs67(Fragment14, { children: [
+          /* @__PURE__ */ jsx89(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx89("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs67("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+            /* @__PURE__ */ jsx89(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
+            /* @__PURE__ */ jsx89("span", { className: "blind", children: homeLabel })
           ] }) })
         ] }) : null
       ] })
@@ -12956,9 +13657,9 @@ function StnBreadcrumb({
 }
 
 // src/components/StnHeaderTitle.tsx
-import { useEffect as useEffect20, useState as useState24 } from "react";
+import { useEffect as useEffect20, useState as useState25 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
-import { jsx as jsx87, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs68 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var KO_WEEKDAY_LONG = [
   "\uC77C\uC694\uC77C",
@@ -12997,8 +13698,8 @@ function formatStnHeaderTitleTime(date, options) {
 }
 function HeaderTitleFrame({ preview = false }) {
   const frameClass = preview ? "stn-header-title__frame-preview" : "stn-header-title__frame";
-  return /* @__PURE__ */ jsxs65("div", { className: frameClass, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx87("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsxs68("div", { className: frameClass, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx90("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx90(
       "img",
       {
         className: "stn-header-title__frame-img",
@@ -13007,8 +13708,8 @@ function HeaderTitleFrame({ preview = false }) {
         draggable: false
       }
     ) }),
-    /* @__PURE__ */ jsxs65("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
-      /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsxs68("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
+      /* @__PURE__ */ jsx90(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--dark",
@@ -13017,7 +13718,7 @@ function HeaderTitleFrame({ preview = false }) {
           draggable: false
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx90(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--light",
@@ -13030,10 +13731,10 @@ function HeaderTitleFrame({ preview = false }) {
   ] });
 }
 function StnHeaderTitleFramePreview({ className }) {
-  return /* @__PURE__ */ jsx87("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx87(HeaderTitleFrame, { preview: true }) });
+  return /* @__PURE__ */ jsx90("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx90(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
-  const [now, setNow] = useState24(() => /* @__PURE__ */ new Date());
+  const [now, setNow] = useState25(() => /* @__PURE__ */ new Date());
   useEffect20(() => {
     if (!enabled) return;
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
@@ -13046,35 +13747,35 @@ function StnHeaderTitleMainText({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx87("h1", { className: cn("stn-header-title__text", className), ...rest, children });
+  return /* @__PURE__ */ jsx90("h1", { className: cn("stn-header-title__text", className), ...rest, children });
 }
 function StnHeaderTitleSubText({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx87("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx90("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
 }
 function StnHeaderTitleDate({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx87("time", { className: cn("stn-header-title__date", className), ...rest, children });
+  return /* @__PURE__ */ jsx90("time", { className: cn("stn-header-title__date", className), ...rest, children });
 }
 function StnHeaderTitleWeekday({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx87("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
+  return /* @__PURE__ */ jsx90("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
 }
 function StnHeaderTitleTime({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx87("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
+  return /* @__PURE__ */ jsx90("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
 }
 function StnHeaderTitleClock({
   className,
@@ -13097,7 +13798,7 @@ function StnHeaderTitleClock({
 }) {
   const now = useLiveClock(live);
   if (children != null) {
-    return /* @__PURE__ */ jsxs65(
+    return /* @__PURE__ */ jsxs68(
       "header",
       {
         className: cn(
@@ -13109,8 +13810,8 @@ function StnHeaderTitleClock({
         ),
         ...rest,
         children: [
-          framed ? /* @__PURE__ */ jsx87(HeaderTitleFrame, {}) : null,
-          /* @__PURE__ */ jsx87("div", { className: "stn-header-title__content", children })
+          framed ? /* @__PURE__ */ jsx90(HeaderTitleFrame, {}) : null,
+          /* @__PURE__ */ jsx90("div", { className: "stn-header-title__content", children })
         ]
       }
     );
@@ -13140,7 +13841,7 @@ function StnHeaderTitleClock({
       resolvedTime = formatStnHeaderTitleTime(now, { showSeconds });
     }
   }
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs68(
     "header",
     {
       className: cn(
@@ -13152,11 +13853,11 @@ function StnHeaderTitleClock({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx87(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs65("div", { className: "stn-header-title__content", children: [
-          resolvedDate ? /* @__PURE__ */ jsx87("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
-          showWeekdayOnly ? /* @__PURE__ */ jsx87("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
-          resolvedTime ? /* @__PURE__ */ jsx87("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
+        framed ? /* @__PURE__ */ jsx90(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs68("div", { className: "stn-header-title__content", children: [
+          resolvedDate ? /* @__PURE__ */ jsx90("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
+          showWeekdayOnly ? /* @__PURE__ */ jsx90("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
+          resolvedTime ? /* @__PURE__ */ jsx90("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
         ] })
       ]
     }
@@ -13173,7 +13874,7 @@ function StnHeaderTitleDual({
   ...rest
 }) {
   const resolvedMain = mainText ?? title ?? children;
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs68(
     "header",
     {
       className: cn(
@@ -13185,10 +13886,10 @@ function StnHeaderTitleDual({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx87(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs65("div", { className: "stn-header-title__content", children: [
-          subText != null ? /* @__PURE__ */ jsx87("span", { className: "stn-header-title__sub-text", children: subText }) : null,
-          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx87("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
+        framed ? /* @__PURE__ */ jsx90(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs68("div", { className: "stn-header-title__content", children: [
+          subText != null ? /* @__PURE__ */ jsx90("span", { className: "stn-header-title__sub-text", children: subText }) : null,
+          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx90("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
         ] })
       ]
     }
@@ -13203,7 +13904,7 @@ function StnHeaderTitleText({
   ...rest
 }) {
   const resolved = title ?? children;
-  return /* @__PURE__ */ jsxs65(
+  return /* @__PURE__ */ jsxs68(
     "header",
     {
       className: cn(
@@ -13215,20 +13916,20 @@ function StnHeaderTitleText({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx87(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsx87("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx87("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
+        framed ? /* @__PURE__ */ jsx90(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsx90("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx90("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
       ]
     }
   );
 }
 function StnHeaderTitleRoot(props) {
   if (props.variant === "clock") {
-    return /* @__PURE__ */ jsx87(StnHeaderTitleClock, { ...props });
+    return /* @__PURE__ */ jsx90(StnHeaderTitleClock, { ...props });
   }
   if (props.variant === "dual" || "subText" in props && props.subText != null) {
-    return /* @__PURE__ */ jsx87(StnHeaderTitleDual, { ...props });
+    return /* @__PURE__ */ jsx90(StnHeaderTitleDual, { ...props });
   }
-  return /* @__PURE__ */ jsx87(StnHeaderTitleText, { ...props });
+  return /* @__PURE__ */ jsx90(StnHeaderTitleText, { ...props });
 }
 var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
   Text: StnHeaderTitleMainText,
@@ -13241,10 +13942,10 @@ var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
 
 // src/layouts/StnContainer.tsx
 import {
-  forwardRef as forwardRef54
+  forwardRef as forwardRef57
 } from "react";
-import { jsx as jsx88 } from "react/jsx-runtime";
-var StnContainer = forwardRef54(function StnContainer2({
+import { jsx as jsx91 } from "react/jsx-runtime";
+var StnContainer = forwardRef57(function StnContainer2({
   component,
   as,
   maxWidth = "lg",
@@ -13277,7 +13978,7 @@ var StnContainer = forwardRef54(function StnContainer2({
   const noBottom = noAll || disablePaddingBottom || disablePaddingY || paddingBottom === 0 || paddingBottom === "none" || paddingBottom === false || isPaddingObj && (padding.bottom === 0 || padding.bottom === "none" || padding.bottom === false || padding.y === 0 || padding.y === "none" || padding.y === false);
   const noLeft = noAll || disableGutters || disablePaddingLeft || disablePaddingX || paddingLeft === 0 || paddingLeft === "none" || paddingLeft === false || isPaddingObj && (padding.left === 0 || padding.left === "none" || padding.left === false || padding.x === 0 || padding.x === "none" || padding.x === false);
   const noRight = noAll || disableGutters || disablePaddingRight || disablePaddingX || paddingRight === 0 || paddingRight === "none" || paddingRight === false || isPaddingObj && (padding.right === 0 || padding.right === "none" || padding.right === false || padding.x === 0 || padding.x === "none" || padding.x === false);
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx91(
     Component,
     {
       ref,
@@ -13310,8 +14011,8 @@ var StnContainer = forwardRef54(function StnContainer2({
 });
 
 // src/layouts/StnGrid.tsx
-import { forwardRef as forwardRef55 } from "react";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { forwardRef as forwardRef58 } from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var BREAKPOINTS2 = ["xs", "sm", "md", "lg", "xl"];
 var SPACING_CLASS = {
   "0": "0",
@@ -13377,7 +14078,7 @@ function sizeClasses(size) {
   }
   return classes;
 }
-var StnGrid = forwardRef55(function StnGrid2({
+var StnGrid = forwardRef58(function StnGrid2({
   component,
   as,
   container = false,
@@ -13397,7 +14098,7 @@ var StnGrid = forwardRef55(function StnGrid2({
   const Component = component ?? as ?? "div";
   const justify = typeof justifyContent === "string" && JUSTIFY_CLASS2.has(justifyContent) ? justifyContent : void 0;
   const align = typeof alignItems === "string" && ALIGN_CLASS2.has(alignItems) ? alignItems : void 0;
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx92(
     Component,
     {
       ref,
@@ -13421,7 +14122,7 @@ var StnGrid = forwardRef55(function StnGrid2({
 });
 
 // src/layouts/StnLayerShell.tsx
-import { jsx as jsx90, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs69 } from "react/jsx-runtime";
 function StnLayerShell({
   gnb,
   gnbSide = "left",
@@ -13442,7 +14143,7 @@ function StnLayerShell({
   const resolvedMainContent = layer1 ?? children;
   const resolvedModal = layer2;
   const isGnbRight = gnbSide === "right";
-  return /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs69(
     "div",
     {
       id: wrapId,
@@ -13450,8 +14151,8 @@ function StnLayerShell({
       className: cn("stn-wrap", isGnbRight && "stn-wrap--gnb-right", wrapClassName),
       children: [
         layer0,
-        utilities ? /* @__PURE__ */ jsx90("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
-        /* @__PURE__ */ jsxs66(
+        utilities ? /* @__PURE__ */ jsx93("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
+        /* @__PURE__ */ jsxs69(
           "main",
           {
             id: containerId,
@@ -13460,9 +14161,9 @@ function StnLayerShell({
             className: cn("stn-layer-1", scrollable && "scroll", containerClassName),
             children: [
               !isGnbRight && gnb,
-              /* @__PURE__ */ jsxs66("div", { className: "stn-layer-1__main", children: [
-                header ? /* @__PURE__ */ jsx90("header", { className: "stn-layer-1__header", children: header }) : null,
-                /* @__PURE__ */ jsx90("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
+              /* @__PURE__ */ jsxs69("div", { className: "stn-layer-1__main", children: [
+                header ? /* @__PURE__ */ jsx93("header", { className: "stn-layer-1__header", children: header }) : null,
+                /* @__PURE__ */ jsx93("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
               ] }),
               isGnbRight && gnb
             ]
@@ -13475,7 +14176,7 @@ function StnLayerShell({
 }
 
 // src/layouts/StnListViewLayout.tsx
-import { jsx as jsx91, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs70 } from "react/jsx-runtime";
 function StnListViewLayoutBody({
   search,
   sidebar,
@@ -13486,13 +14187,13 @@ function StnListViewLayoutBody({
   className
 }) {
   const lnbClass = lnbSide === "right" ? "stn-page-scaffold__lnb lnb_box lnb_box_right" : "stn-page-scaffold__lnb lnb_box";
-  const sidebarAside = sidebar ? /* @__PURE__ */ jsx91("aside", { className: lnbClass, children: sidebar }) : null;
-  return /* @__PURE__ */ jsx91(
+  const sidebarAside = sidebar ? /* @__PURE__ */ jsx94("aside", { className: lnbClass, children: sidebar }) : null;
+  return /* @__PURE__ */ jsx94(
     StnContainer,
     {
       maxWidth: false,
       className: cn("stn-list-view-layout__body", className),
-      children: /* @__PURE__ */ jsxs67(
+      children: /* @__PURE__ */ jsxs70(
         StnStack,
         {
           direction: "row",
@@ -13500,19 +14201,19 @@ function StnListViewLayoutBody({
           className: "stn-list-view__main",
           children: [
             lnbSide === "left" ? sidebarAside : null,
-            /* @__PURE__ */ jsxs67(
+            /* @__PURE__ */ jsxs70(
               StnStack,
               {
                 direction: "column",
                 spacing: 2,
                 className: "stn-list-view__content-stack",
                 children: [
-                  search ? /* @__PURE__ */ jsx91("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
-                  /* @__PURE__ */ jsx91(
+                  search ? /* @__PURE__ */ jsx94("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
+                  /* @__PURE__ */ jsx94(
                     "div",
                     {
                       className: "stn-page-scaffold__content content_box",
-                      children: children ?? /* @__PURE__ */ jsxs67("div", { className: "stn-table stn-table--fill", children: [
+                      children: children ?? /* @__PURE__ */ jsxs70("div", { className: "stn-table stn-table--fill", children: [
                         table,
                         pagination
                       ] })
@@ -13544,7 +14245,7 @@ function StnListViewLayoutRoot({
 }) {
   const bare = bareProp ?? noShell ?? false;
   const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
-  const body = /* @__PURE__ */ jsx91(
+  const body = /* @__PURE__ */ jsx94(
     StnListViewLayoutBody,
     {
       search,
@@ -13559,10 +14260,10 @@ function StnListViewLayoutRoot({
   if (bare) {
     return body;
   }
-  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx91("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx91(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx91(StnHeader.Left, { children: /* @__PURE__ */ jsx91(StnHeaderPageTitle, { children: title }) }) }) });
-  return /* @__PURE__ */ jsxs67("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
+  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx94("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx94(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx94(StnHeader.Left, { children: /* @__PURE__ */ jsx94(StnHeaderPageTitle, { children: title }) }) }) });
+  return /* @__PURE__ */ jsxs70("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
     renderedHeader,
-    /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx94(
       "div",
       {
         className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
@@ -13572,10 +14273,10 @@ function StnListViewLayoutRoot({
   ] });
 }
 function StnListViewLayoutHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx91("div", { className: cn("stn-layer-1__header", className), ...rest, children });
+  return /* @__PURE__ */ jsx94("div", { className: cn("stn-layer-1__header", className), ...rest, children });
 }
 function StnListViewLayoutSearch({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx91("div", { className: cn("search_area", className), ...rest, children });
+  return /* @__PURE__ */ jsx94("div", { className: cn("search_area", className), ...rest, children });
 }
 function StnListViewLayoutSidebar({
   side = "left",
@@ -13584,16 +14285,16 @@ function StnListViewLayoutSidebar({
   ...rest
 }) {
   const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
-  return /* @__PURE__ */ jsx91("aside", { className: cn(lnbClass, className), ...rest, children });
+  return /* @__PURE__ */ jsx94("aside", { className: cn(lnbClass, className), ...rest, children });
 }
 function StnListViewLayoutContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx91("div", { className: cn("content_box", className), ...rest, children });
+  return /* @__PURE__ */ jsx94("div", { className: cn("content_box", className), ...rest, children });
 }
 function StnListViewLayoutTable({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx91("div", { className: cn("stn-table", className), ...rest, children });
+  return /* @__PURE__ */ jsx94("div", { className: cn("stn-table", className), ...rest, children });
 }
 function StnListViewLayoutPagination({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx91("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx94("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
 }
 var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
   Body: StnListViewLayoutBody,
@@ -13627,13 +14328,13 @@ import {
 } from "@stn-uiux/pub-ui/data/stnLayout";
 
 // src/patterns/dashboard/StnMapCanvas.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function StnMapCanvas({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx95(
     "div",
     {
       className: cn("stn-map-canvas", className),
@@ -13645,7 +14346,7 @@ function StnMapCanvas({
 }
 
 // src/patterns/dashboard/StnDashboard.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var fillStyle = {
   flex: "1 1 0%",
   minHeight: 0,
@@ -13664,7 +14365,7 @@ function StnDashboardRoot({
 }) {
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       className: cn(
@@ -13693,7 +14394,7 @@ function StnDashboardLeft({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       className: cn("stn-dashboard__left", className),
@@ -13719,7 +14420,7 @@ function StnDashboardRight({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       className: cn("stn-dashboard__right", className),
@@ -13747,7 +14448,7 @@ function StnDashboardTopRight({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx96(
     "div",
     {
       className: cn("stn-dashboard__top-right", className),
@@ -13766,9 +14467,9 @@ var StnDashboard = Object.assign(StnDashboardRoot, {
 });
 
 // src/patterns/scaffold/StnPageScaffold.tsx
-import { jsx as jsx94, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs71 } from "react/jsx-runtime";
 function StnPageScaffoldRoot({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx97(
     "div",
     {
       className: cn("stn-page-scaffold", className),
@@ -13785,9 +14486,9 @@ function StnPageScaffoldRegion({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs68("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
-    /* @__PURE__ */ jsx94("span", { className: "stn-page-scaffold__region-label", children: label }),
-    hint ? /* @__PURE__ */ jsx94("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
+  return /* @__PURE__ */ jsxs71("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
+    /* @__PURE__ */ jsx97("span", { className: "stn-page-scaffold__region-label", children: label }),
+    hint ? /* @__PURE__ */ jsx97("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
     children
   ] });
 }
@@ -13798,7 +14499,7 @@ function StnPageScaffoldMapPlaceholder({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx94("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsx97("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs71(
     "div",
     {
       className: cn("stn-page-scaffold__canvas-placeholder", className),
@@ -13806,8 +14507,8 @@ function StnPageScaffoldMapPlaceholder({
       role: "status",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx94("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
-        note ? /* @__PURE__ */ jsx94("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
+        /* @__PURE__ */ jsx97("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
+        note ? /* @__PURE__ */ jsx97("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
         children
       ]
     }
@@ -13818,7 +14519,7 @@ function StnPageScaffoldMapCanvas({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx97(
     "div",
     {
       className: cn("stn-widget", "shell-canvas", "stn-map-canvas", "stn-page-scaffold__canvas", className),
@@ -13831,7 +14532,7 @@ function StnPageScaffoldMapCanvas({
 }
 function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }) {
   const labelText = label ? hint ? `${label} \xB7 ${hint}` : label : void 0;
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx97(
     StnLayer2,
     {
       className: cn(
@@ -13878,25 +14579,25 @@ function DashboardPageScaffold({
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
   const isNone = widgetPosition === "none" || !showRightRegion;
-  const mapColumn = /* @__PURE__ */ jsxs68(StnDashboard.Left, { children: [
-    /* @__PURE__ */ jsx94(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
+  const mapColumn = /* @__PURE__ */ jsxs71(StnDashboard.Left, { children: [
+    /* @__PURE__ */ jsx97(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
     faultPanel
   ] });
-  const rightWidgets = right ?? /* @__PURE__ */ jsx94(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx94(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx94(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs68(StnDashboard, { widgetPosition: "both", children: [
-    /* @__PURE__ */ jsx94(StnDashboard.Right, { children: leftWidgets }),
+  const rightWidgets = right ?? /* @__PURE__ */ jsx97(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx97(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx97(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs71(StnDashboard, { widgetPosition: "both", children: [
+    /* @__PURE__ */ jsx97(StnDashboard.Right, { children: leftWidgets }),
     mapColumn,
-    /* @__PURE__ */ jsx94(StnDashboard.Right, { children: rightWidgets })
-  ] }) : isLeft ? /* @__PURE__ */ jsxs68(StnDashboard, { widgetPosition: "left", children: [
-    /* @__PURE__ */ jsx94(StnDashboard.Right, { children: leftWidgets }),
+    /* @__PURE__ */ jsx97(StnDashboard.Right, { children: rightWidgets })
+  ] }) : isLeft ? /* @__PURE__ */ jsxs71(StnDashboard, { widgetPosition: "left", children: [
+    /* @__PURE__ */ jsx97(StnDashboard.Right, { children: leftWidgets }),
     mapColumn
-  ] }) : /* @__PURE__ */ jsxs68(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
+  ] }) : /* @__PURE__ */ jsxs71(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
     mapColumn,
-    !isNone ? /* @__PURE__ */ jsx94(StnDashboard.Right, { children: rightWidgets }) : null
+    !isNone ? /* @__PURE__ */ jsx97(StnDashboard.Right, { children: rightWidgets }) : null
   ] });
   const contentNode = children ?? dashboardGrid;
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx97(
     StnLayerShell,
     {
       gnb,
@@ -13905,7 +14606,7 @@ function DashboardPageScaffold({
       layer0,
       layer2,
       ...shellProps,
-      children: /* @__PURE__ */ jsx94(
+      children: /* @__PURE__ */ jsx97(
         StnContainer,
         {
           maxWidth: false,
@@ -13919,16 +14620,16 @@ function DashboardPageScaffold({
 }
 
 // src/patterns/scaffold/AlertCenterPageScaffold.tsx
-import { useMemo as useMemo6, useState as useState25 } from "react";
+import { useMemo as useMemo7, useState as useState26 } from "react";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
   STN_ALERT_CENTER_DEMO_WORK
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 import { systemIconSrc } from "@stn-uiux/pub-ui/data/stnSystemIcons";
-import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx98, jsxs as jsxs72 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
-  return /* @__PURE__ */ jsx95(StnHeader, { variant: "widget" });
+  return /* @__PURE__ */ jsx98(StnHeader, { variant: "widget" });
 }
 function AlertCenterPageScaffold({
   gnbAlertPanel,
@@ -13945,9 +14646,9 @@ function AlertCenterPageScaffold({
   defaultGnbOpen = true,
   ...shellProps
 }) {
-  const [gnbOpen, setGnbOpen] = useState25(defaultGnbOpen);
-  const panel = useMemo6(
-    () => gnbAlertPanel ?? /* @__PURE__ */ jsx95(
+  const [gnbOpen, setGnbOpen] = useState26(defaultGnbOpen);
+  const panel = useMemo7(
+    () => gnbAlertPanel ?? /* @__PURE__ */ jsx98(
       StnAlertCenterPanel,
       {
         alerts: STN_ALERT_CENTER_DEMO_ALERTS,
@@ -13957,27 +14658,27 @@ function AlertCenterPageScaffold({
     ),
     [gnbAlertPanel]
   );
-  const sideNav = useMemo6(
-    () => gnbProp ?? /* @__PURE__ */ jsxs69(Fragment15, { children: [
-      /* @__PURE__ */ jsxs69(
+  const sideNav = useMemo7(
+    () => gnbProp ?? /* @__PURE__ */ jsxs72(Fragment15, { children: [
+      /* @__PURE__ */ jsxs72(
         StnSideNavigation,
         {
           collapsed: !gnbOpen,
           onCollapseChange: (col) => setGnbOpen(!col),
           children: [
-            /* @__PURE__ */ jsxs69(StnSideNavigation.Header, { children: [
-              /* @__PURE__ */ jsx95(StnSideNavigation.Logo, {}),
-              /* @__PURE__ */ jsx95(StnSideNavigation.Toggle, {})
+            /* @__PURE__ */ jsxs72(StnSideNavigation.Header, { children: [
+              /* @__PURE__ */ jsx98(StnSideNavigation.Logo, {}),
+              /* @__PURE__ */ jsx98(StnSideNavigation.Toggle, {})
             ] }),
-            /* @__PURE__ */ jsxs69(StnSideNavigation.Menu, { children: [
-              /* @__PURE__ */ jsx95(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
-              /* @__PURE__ */ jsx95(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
-              /* @__PURE__ */ jsx95(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
+            /* @__PURE__ */ jsxs72(StnSideNavigation.Menu, { children: [
+              /* @__PURE__ */ jsx98(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
+              /* @__PURE__ */ jsx98(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
+              /* @__PURE__ */ jsx98(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
             ] }),
-            /* @__PURE__ */ jsx95(StnSideNavigation.Spacer, {}),
-            /* @__PURE__ */ jsxs69(StnSideNavigation.Footer, { curved: true, children: [
-              /* @__PURE__ */ jsx95(StnSideNavigation.Watermark, {}),
-              /* @__PURE__ */ jsx95(
+            /* @__PURE__ */ jsx98(StnSideNavigation.Spacer, {}),
+            /* @__PURE__ */ jsxs72(StnSideNavigation.Footer, { curved: true, children: [
+              /* @__PURE__ */ jsx98(StnSideNavigation.Watermark, {}),
+              /* @__PURE__ */ jsx98(
                 StnSideNavigation.Item,
                 {
                   iconSrc: systemIconSrc("line/bell"),
@@ -13986,7 +14687,7 @@ function AlertCenterPageScaffold({
                   onClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx95(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
+              /* @__PURE__ */ jsx98(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
             ] })
           ]
         }
@@ -13995,8 +14696,8 @@ function AlertCenterPageScaffold({
     ] }),
     [gnbProp, gnbOpen, panel]
   );
-  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx95("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx95(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
-  return /* @__PURE__ */ jsx95(
+  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx98("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx98(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
+  return /* @__PURE__ */ jsx98(
     DashboardPageScaffold,
     {
       gnb: sideNav,
@@ -14004,7 +14705,7 @@ function AlertCenterPageScaffold({
       mapMessage,
       mapNote,
       faultPanel: faultSlot,
-      right: right ?? /* @__PURE__ */ jsx95(AlertCenterDashboard, {}),
+      right: right ?? /* @__PURE__ */ jsx98(AlertCenterDashboard, {}),
       wrapId,
       wrapClassName: "stn-page--map-bg",
       ...shellProps
@@ -14013,8 +14714,8 @@ function AlertCenterPageScaffold({
 }
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
-import { useState as useState26 } from "react";
-import { jsx as jsx96, jsxs as jsxs70 } from "react/jsx-runtime";
+import { useState as useState27 } from "react";
+import { jsx as jsx99, jsxs as jsxs73 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
   { value: "social", label: "\uC18C\uC15C \uB85C\uADF8\uC778" }
@@ -14025,15 +14726,15 @@ function DefaultLoginForm({
   signUpHref = "#",
   recoverHref = "#"
 }) {
-  const [mode, setMode] = useState26("normal");
-  const [userId, setUserId] = useState26("");
-  const [password, setPassword] = useState26("");
+  const [mode, setMode] = useState27("normal");
+  const [userId, setUserId] = useState27("");
+  const [password, setPassword] = useState27("");
   function handleSubmit(e) {
     e.preventDefault();
     onLogin?.(userId, password);
   }
-  return /* @__PURE__ */ jsxs70(StnLoginFormStack, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsxs73(StnLoginFormStack, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx99(
       StnSegmented,
       {
         "aria-label": "\uB85C\uADF8\uC778 \uBC29\uC2DD",
@@ -14042,8 +14743,8 @@ function DefaultLoginForm({
         options: LOGIN_TABS
       }
     ),
-    mode === "normal" ? /* @__PURE__ */ jsxs70(StnLoginFormFields, { children: [
-      /* @__PURE__ */ jsx96(
+    mode === "normal" ? /* @__PURE__ */ jsxs73(StnLoginFormFields, { children: [
+      /* @__PURE__ */ jsx99(
         StnLoginTextField,
         {
           icon: "line/user",
@@ -14055,7 +14756,7 @@ function DefaultLoginForm({
           "aria-label": "\uC544\uC774\uB514"
         }
       ),
-      /* @__PURE__ */ jsx96(
+      /* @__PURE__ */ jsx99(
         StnLoginTextField,
         {
           icon: "line/lock",
@@ -14068,11 +14769,11 @@ function DefaultLoginForm({
           "aria-label": "\uBE44\uBC00\uBC88\uD638"
         }
       )
-    ] }) : socialContent ?? /* @__PURE__ */ jsx96(StnLoginPlaceholder, {}),
-    /* @__PURE__ */ jsx96(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
-    /* @__PURE__ */ jsxs70(StnLoginFormLinks, { children: [
-      /* @__PURE__ */ jsx96("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
-      /* @__PURE__ */ jsx96("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
+    ] }) : socialContent ?? /* @__PURE__ */ jsx99(StnLoginPlaceholder, {}),
+    /* @__PURE__ */ jsx99(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
+    /* @__PURE__ */ jsxs73(StnLoginFormLinks, { children: [
+      /* @__PURE__ */ jsx99("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
+      /* @__PURE__ */ jsx99("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
     ] })
   ] });
 }
@@ -14086,16 +14787,16 @@ function DefaultLoginCard({
   signUpHref,
   recoverHref
 }) {
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx99(
     StnLoginCard,
     {
       glow,
       variant,
-      brand: /* @__PURE__ */ jsxs70(StnLoginBrandStack, { children: [
-        logo ?? /* @__PURE__ */ jsx96(StnLogo, { variant: "vertical", size: "xl" }),
-        /* @__PURE__ */ jsx96("p", { className: "stn-login-card__caption", children: productCaption })
+      brand: /* @__PURE__ */ jsxs73(StnLoginBrandStack, { children: [
+        logo ?? /* @__PURE__ */ jsx99(StnLogo, { variant: "vertical", size: "xl" }),
+        /* @__PURE__ */ jsx99("p", { className: "stn-login-card__caption", children: productCaption })
       ] }),
-      children: /* @__PURE__ */ jsx96(
+      children: /* @__PURE__ */ jsx99(
         DefaultLoginForm,
         {
           onLogin,
@@ -14121,8 +14822,8 @@ function LoginPageScaffold({
   recoverHref,
   ...shellProps
 }) {
-  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx96(StnLayer0Background, { variant: "login" });
-  const resolvedCard = children ?? /* @__PURE__ */ jsx96(
+  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx99(StnLayer0Background, { variant: "login" });
+  const resolvedCard = children ?? /* @__PURE__ */ jsx99(
     DefaultLoginCard,
     {
       logo,
@@ -14135,14 +14836,14 @@ function LoginPageScaffold({
       recoverHref
     }
   );
-  return /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsxs73(
     "div",
     {
       className: cn("stn-wrap stn-page--login", wrapClassName),
       ...shellProps,
       children: [
         resolvedLayer0,
-        /* @__PURE__ */ jsx96("div", { className: "stn-login", children: resolvedCard })
+        /* @__PURE__ */ jsx99("div", { className: "stn-login", children: resolvedCard })
       ]
     }
   );
@@ -14174,7 +14875,7 @@ import React4 from "react";
 import {
   STN_EMPTY_STATE_PRESETS
 } from "@stn-uiux/pub-ui/data/stnEmptyState";
-import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx100, jsxs as jsxs74 } from "react/jsx-runtime";
 var ICON_PX2 = {
   sm: 40,
   md: 56,
@@ -14183,11 +14884,11 @@ var ICON_PX2 = {
 function resolveIconNode3(icon, presetIcon, size) {
   if (icon === null || icon === false) return null;
   if (typeof icon === "string") {
-    return /* @__PURE__ */ jsx97(StnIcon, { name: icon, size: ICON_PX2[size], color: "currentColor" });
+    return /* @__PURE__ */ jsx100(StnIcon, { name: icon, size: ICON_PX2[size], color: "currentColor" });
   }
   if (icon != null) return icon;
   if (presetIcon) {
-    return /* @__PURE__ */ jsx97(StnIcon, { name: presetIcon, size: ICON_PX2[size], color: "currentColor" });
+    return /* @__PURE__ */ jsx100(StnIcon, { name: presetIcon, size: ICON_PX2[size], color: "currentColor" });
   }
   return null;
 }
@@ -14221,8 +14922,8 @@ var StnEmptyState = React4.forwardRef(
     const showGraphic = !hideIcon && visual !== "icon" && Boolean(resolvedGraphic);
     const iconNode = hideIcon || showGraphic ? null : resolveIconNode3(icon, preset?.icon, size);
     const resolvedCode = hideCode ? void 0 : code ?? (showGraphic ? void 0 : preset?.code);
-    const actionNodes = actions ?? ((primaryAction || secondaryAction) && /* @__PURE__ */ jsxs71(Fragment16, { children: [
-      primaryAction && /* @__PURE__ */ jsx97(
+    const actionNodes = actions ?? ((primaryAction || secondaryAction) && /* @__PURE__ */ jsxs74(Fragment16, { children: [
+      primaryAction && /* @__PURE__ */ jsx100(
         StnButton,
         {
           variant: primaryAction.variant ?? "contained",
@@ -14232,7 +14933,7 @@ var StnEmptyState = React4.forwardRef(
           children: primaryAction.label
         }
       ),
-      secondaryAction && /* @__PURE__ */ jsx97(
+      secondaryAction && /* @__PURE__ */ jsx100(
         StnButton,
         {
           variant: secondaryAction.variant ?? "outlined",
@@ -14244,7 +14945,7 @@ var StnEmptyState = React4.forwardRef(
       )
     ] }));
     const hasActions = actionNodes != null && actionNodes !== false;
-    return /* @__PURE__ */ jsxs71(
+    return /* @__PURE__ */ jsxs74(
       "div",
       {
         ref,
@@ -14258,7 +14959,7 @@ var StnEmptyState = React4.forwardRef(
         ),
         ...rest,
         children: [
-          showGraphic && /* @__PURE__ */ jsx97("div", { className: "stn-empty-state__graphic", "aria-hidden": "true", children: /* @__PURE__ */ jsx97(
+          showGraphic && /* @__PURE__ */ jsx100("div", { className: "stn-empty-state__graphic", "aria-hidden": "true", children: /* @__PURE__ */ jsx100(
             "img",
             {
               src: resolvedGraphic,
@@ -14268,13 +14969,13 @@ var StnEmptyState = React4.forwardRef(
               decoding: "async"
             }
           ) }),
-          !showGraphic && iconNode != null && /* @__PURE__ */ jsx97("div", { className: "stn-empty-state__icon", children: iconNode }),
-          /* @__PURE__ */ jsxs71("div", { className: "stn-empty-state__body", children: [
-            resolvedCode != null && resolvedCode !== false && /* @__PURE__ */ jsx97("p", { className: "stn-empty-state__code", children: resolvedCode }),
-            resolvedTitle != null && resolvedTitle !== false && /* @__PURE__ */ jsx97("p", { className: "stn-empty-state__title", children: resolvedTitle }),
-            resolvedDescription != null && resolvedDescription !== false && /* @__PURE__ */ jsx97("p", { className: "stn-empty-state__description", children: resolvedDescription })
+          !showGraphic && iconNode != null && /* @__PURE__ */ jsx100("div", { className: "stn-empty-state__icon", children: iconNode }),
+          /* @__PURE__ */ jsxs74("div", { className: "stn-empty-state__body", children: [
+            resolvedCode != null && resolvedCode !== false && /* @__PURE__ */ jsx100("p", { className: "stn-empty-state__code", children: resolvedCode }),
+            resolvedTitle != null && resolvedTitle !== false && /* @__PURE__ */ jsx100("p", { className: "stn-empty-state__title", children: resolvedTitle }),
+            resolvedDescription != null && resolvedDescription !== false && /* @__PURE__ */ jsx100("p", { className: "stn-empty-state__description", children: resolvedDescription })
           ] }),
-          hasActions && /* @__PURE__ */ jsx97("div", { className: "stn-empty-state__actions", children: actionNodes })
+          hasActions && /* @__PURE__ */ jsx100("div", { className: "stn-empty-state__actions", children: actionNodes })
         ]
       }
     );
@@ -14283,7 +14984,7 @@ var StnEmptyState = React4.forwardRef(
 StnEmptyState.displayName = "StnEmptyState";
 
 // src/components/chartTypes.tsx
-import { jsx as jsx98, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs75 } from "react/jsx-runtime";
 var SEVERITY_COLOR_TOKENS = {
   critical: "var(--stn-chart-status-critical)",
   major: "var(--stn-chart-status-major)",
@@ -14392,20 +15093,20 @@ function formatChartValue(value, decimals) {
 }
 function renderChartState(loading, hasData, emptyText = "\uC870\uD68C\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4") {
   if (loading) {
-    return /* @__PURE__ */ jsxs72("div", { className: "stn-chart-skeleton", "aria-busy": "true", "aria-label": "\uCC28\uD2B8 \uB85C\uB529 \uC911", children: [
-      /* @__PURE__ */ jsxs72("div", { className: "stn-chart-skeleton__bars", children: [
-        /* @__PURE__ */ jsx98("div", { className: "stn-chart-skeleton__bar", style: { height: "45%" } }),
-        /* @__PURE__ */ jsx98("div", { className: "stn-chart-skeleton__bar", style: { height: "75%" } }),
-        /* @__PURE__ */ jsx98("div", { className: "stn-chart-skeleton__bar", style: { height: "30%" } }),
-        /* @__PURE__ */ jsx98("div", { className: "stn-chart-skeleton__bar", style: { height: "90%" } }),
-        /* @__PURE__ */ jsx98("div", { className: "stn-chart-skeleton__bar", style: { height: "60%" } })
+    return /* @__PURE__ */ jsxs75("div", { className: "stn-chart-skeleton", "aria-busy": "true", "aria-label": "\uCC28\uD2B8 \uB85C\uB529 \uC911", children: [
+      /* @__PURE__ */ jsxs75("div", { className: "stn-chart-skeleton__bars", children: [
+        /* @__PURE__ */ jsx101("div", { className: "stn-chart-skeleton__bar", style: { height: "45%" } }),
+        /* @__PURE__ */ jsx101("div", { className: "stn-chart-skeleton__bar", style: { height: "75%" } }),
+        /* @__PURE__ */ jsx101("div", { className: "stn-chart-skeleton__bar", style: { height: "30%" } }),
+        /* @__PURE__ */ jsx101("div", { className: "stn-chart-skeleton__bar", style: { height: "90%" } }),
+        /* @__PURE__ */ jsx101("div", { className: "stn-chart-skeleton__bar", style: { height: "60%" } })
       ] }),
-      /* @__PURE__ */ jsx98("div", { className: "stn-chart-skeleton__axis" })
+      /* @__PURE__ */ jsx101("div", { className: "stn-chart-skeleton__axis" })
     ] });
   }
   if (!hasData) {
-    return /* @__PURE__ */ jsxs72("div", { className: "stn-chart-empty", role: "status", "aria-label": "\uB370\uC774\uD130 \uC5C6\uC74C", children: [
-      /* @__PURE__ */ jsxs72(
+    return /* @__PURE__ */ jsxs75("div", { className: "stn-chart-empty", role: "status", "aria-label": "\uB370\uC774\uD130 \uC5C6\uC74C", children: [
+      /* @__PURE__ */ jsxs75(
         "svg",
         {
           className: "stn-chart-empty__icon",
@@ -14417,12 +15118,12 @@ function renderChartState(loading, hasData, emptyText = "\uC870\uD68C\uB41C \uB3
           strokeLinejoin: "round",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx98("path", { d: "M3 3v18h18" }),
-            /* @__PURE__ */ jsx98("path", { d: "M18 9l-5 5-4-4-3 3" })
+            /* @__PURE__ */ jsx101("path", { d: "M3 3v18h18" }),
+            /* @__PURE__ */ jsx101("path", { d: "M18 9l-5 5-4-4-3 3" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx98("span", { children: emptyText })
+      /* @__PURE__ */ jsx101("span", { children: emptyText })
     ] });
   }
   return null;
@@ -14430,9 +15131,9 @@ function renderChartState(loading, hasData, emptyText = "\uC870\uD68C\uB41C \uB3
 
 // src/components/StnBarChart.tsx
 import {
-  useState as useState27
+  useState as useState28
 } from "react";
-import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs76 } from "react/jsx-runtime";
 var DEFAULT_BAR_COLORS = STN_CHART_COLORS;
 var SIZE_WIDTH_MAP = {
   sm: "var(--stn-chart-bar-width-sm)",
@@ -14463,15 +15164,15 @@ function StnBarChart({
   style,
   ...rest
 }) {
-  const [internalHighlight, setInternalHighlight] = useState27(null);
-  const [hoveredIndex, setHoveredIndex] = useState27(null);
+  const [internalHighlight, setInternalHighlight] = useState28(null);
+  const [hoveredIndex, setHoveredIndex] = useState28(null);
   const isHorizontal = direction === "horizontal" || orientation === "horizontal";
   if (loading || !data || data.length === 0) {
     const emptyContainerStyle = {
       ...style,
       ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
     };
-    return /* @__PURE__ */ jsx99(
+    return /* @__PURE__ */ jsx102(
       "div",
       {
         className: cn(
@@ -14528,7 +15229,7 @@ function StnBarChart({
     ...height ? { height } : {},
     ["--stn-chart-bar-width"]: resolvedBarWidth
   };
-  return /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       className: cn(
@@ -14543,11 +15244,11 @@ function StnBarChart({
       style: containerStyle,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__body", children: isHorizontal ? (
+        /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__body", children: isHorizontal ? (
           /* ==================== 가로 막대 (Horizontal) ==================== */
-          /* @__PURE__ */ jsxs73(Fragment17, { children: [
-            showXAxis && /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__grid-v", "aria-hidden": "true", children: gridCols.map((col, cIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-bar__grid-v-col", children: [
-              /* @__PURE__ */ jsx99(
+          /* @__PURE__ */ jsxs76(Fragment17, { children: [
+            showXAxis && /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__grid-v", "aria-hidden": "true", children: gridCols.map((col, cIdx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-bar__grid-v-col", children: [
+              /* @__PURE__ */ jsx102(
                 "div",
                 {
                   className: cn(
@@ -14556,9 +15257,9 @@ function StnBarChart({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx99("span", { className: "stn-chart-bar__grid-v-label", children: col.label })
+              /* @__PURE__ */ jsx102("span", { className: "stn-chart-bar__grid-v-label", children: col.label })
             ] }, cIdx)) }),
-            /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__rows", role: "list", children: data.map((item, idx) => {
+            /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__rows", role: "list", children: data.map((item, idx) => {
               const active = isHighlighted(idx, item);
               const isHovered = hoveredIndex === idx;
               const rawVals = item.values.map((v, vIdx) => {
@@ -14578,7 +15279,7 @@ function StnBarChart({
               });
               const summaryValues = rawVals.map((v) => v.value).join(", ");
               const isFirstRow = idx === 0;
-              return /* @__PURE__ */ jsxs73(
+              return /* @__PURE__ */ jsxs76(
                 "button",
                 {
                   type: "button",
@@ -14595,10 +15296,10 @@ function StnBarChart({
                   "aria-label": `${item.label} (${summaryValues})`,
                   role: "listitem",
                   children: [
-                    showYAxis && /* @__PURE__ */ jsx99("span", { className: "stn-chart-bar__row-label", title: item.label, children: item.label }),
-                    /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__row-track", children: rawVals.map((bar, bIdx) => {
+                    showYAxis && /* @__PURE__ */ jsx102("span", { className: "stn-chart-bar__row-label", title: item.label, children: item.label }),
+                    /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__row-track", children: rawVals.map((bar, bIdx) => {
                       const pct = Math.max(0, Math.min(100, bar.value / max * 100));
-                      return /* @__PURE__ */ jsx99(
+                      return /* @__PURE__ */ jsx102(
                         "div",
                         {
                           className: "stn-chart-bar__item",
@@ -14610,8 +15311,8 @@ function StnBarChart({
                         bIdx
                       );
                     }) }),
-                    showValue && rawVals.length === 1 && /* @__PURE__ */ jsx99("span", { className: "stn-chart-bar__row-val", children: formatter(rawVals[0].value) }),
-                    showTooltip && isHovered && /* @__PURE__ */ jsxs73(
+                    showValue && rawVals.length === 1 && /* @__PURE__ */ jsx102("span", { className: "stn-chart-bar__row-val", children: formatter(rawVals[0].value) }),
+                    showTooltip && isHovered && /* @__PURE__ */ jsxs76(
                       "div",
                       {
                         className: "stn-chart-tooltip",
@@ -14623,19 +15324,19 @@ function StnBarChart({
                         },
                         role: "tooltip",
                         children: [
-                          /* @__PURE__ */ jsx99("div", { className: "stn-chart-tooltip__header", children: item.label }),
-                          rawVals.map((bar, bIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-tooltip__row", children: [
-                            /* @__PURE__ */ jsxs73("div", { className: "stn-chart-tooltip__group", children: [
-                              /* @__PURE__ */ jsx99(
+                          /* @__PURE__ */ jsx102("div", { className: "stn-chart-tooltip__header", children: item.label }),
+                          rawVals.map((bar, bIdx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__row", children: [
+                            /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__group", children: [
+                              /* @__PURE__ */ jsx102(
                                 "span",
                                 {
                                   className: "stn-chart-tooltip__dot",
                                   style: { backgroundColor: bar.color }
                                 }
                               ),
-                              /* @__PURE__ */ jsx99("span", { className: "stn-chart-tooltip__label", children: bar.label })
+                              /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__label", children: bar.label })
                             ] }),
-                            /* @__PURE__ */ jsx99("span", { className: "stn-chart-tooltip__value", children: formatter(bar.value) })
+                            /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__value", children: formatter(bar.value) })
                           ] }, bIdx))
                         ]
                       }
@@ -14648,10 +15349,10 @@ function StnBarChart({
           ] })
         ) : (
           /* ==================== 세로 막대 (Vertical) ==================== */
-          /* @__PURE__ */ jsxs73(Fragment17, { children: [
-            showYAxis && /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__grid", "aria-hidden": "true", children: gridRows.map((row, rIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-bar__grid-row", children: [
-              /* @__PURE__ */ jsx99("span", { className: "stn-chart-bar__axis-label", children: row.label }),
-              /* @__PURE__ */ jsx99(
+          /* @__PURE__ */ jsxs76(Fragment17, { children: [
+            showYAxis && /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__grid", "aria-hidden": "true", children: gridRows.map((row, rIdx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-bar__grid-row", children: [
+              /* @__PURE__ */ jsx102("span", { className: "stn-chart-bar__axis-label", children: row.label }),
+              /* @__PURE__ */ jsx102(
                 "div",
                 {
                   className: cn(
@@ -14661,7 +15362,7 @@ function StnBarChart({
                 }
               )
             ] }, rIdx)) }),
-            /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__columns", role: "list", children: data.map((item, idx) => {
+            /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__columns", role: "list", children: data.map((item, idx) => {
               const active = isHighlighted(idx, item);
               const isHovered = hoveredIndex === idx;
               const rawVals = item.values.map((v, vIdx) => {
@@ -14680,7 +15381,7 @@ function StnBarChart({
                 };
               });
               const summaryValues = rawVals.map((v) => v.value).join(", ");
-              return /* @__PURE__ */ jsxs73(
+              return /* @__PURE__ */ jsxs76(
                 "button",
                 {
                   type: "button",
@@ -14697,10 +15398,10 @@ function StnBarChart({
                   "aria-label": `${item.label} (${summaryValues})`,
                   role: "listitem",
                   children: [
-                    /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__highlight" }),
-                    /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__bars-wrap", children: rawVals.map((bar, bIdx) => {
+                    /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__highlight" }),
+                    /* @__PURE__ */ jsx102("div", { className: "stn-chart-bar__bars-wrap", children: rawVals.map((bar, bIdx) => {
                       const pct = Math.max(0, Math.min(100, bar.value / max * 100));
-                      return /* @__PURE__ */ jsx99(
+                      return /* @__PURE__ */ jsx102(
                         "div",
                         {
                           className: "stn-chart-bar__item",
@@ -14712,8 +15413,8 @@ function StnBarChart({
                         bIdx
                       );
                     }) }),
-                    showXAxis && /* @__PURE__ */ jsx99("span", { className: "stn-chart-bar__label", children: item.label }),
-                    showTooltip && isHovered && /* @__PURE__ */ jsxs73(
+                    showXAxis && /* @__PURE__ */ jsx102("span", { className: "stn-chart-bar__label", children: item.label }),
+                    showTooltip && isHovered && /* @__PURE__ */ jsxs76(
                       "div",
                       {
                         className: cn(
@@ -14727,19 +15428,19 @@ function StnBarChart({
                         },
                         role: "tooltip",
                         children: [
-                          /* @__PURE__ */ jsx99("div", { className: "stn-chart-tooltip__header", children: item.label }),
-                          rawVals.map((bar, bIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-tooltip__row", children: [
-                            /* @__PURE__ */ jsxs73("div", { className: "stn-chart-tooltip__group", children: [
-                              /* @__PURE__ */ jsx99(
+                          /* @__PURE__ */ jsx102("div", { className: "stn-chart-tooltip__header", children: item.label }),
+                          rawVals.map((bar, bIdx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__row", children: [
+                            /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__group", children: [
+                              /* @__PURE__ */ jsx102(
                                 "span",
                                 {
                                   className: "stn-chart-tooltip__dot",
                                   style: { backgroundColor: bar.color }
                                 }
                               ),
-                              /* @__PURE__ */ jsx99("span", { className: "stn-chart-tooltip__label", children: bar.label })
+                              /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__label", children: bar.label })
                             ] }),
-                            /* @__PURE__ */ jsx99("span", { className: "stn-chart-tooltip__value", children: formatter(bar.value) })
+                            /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__value", children: formatter(bar.value) })
                           ] }, bIdx))
                         ]
                       }
@@ -14751,15 +15452,15 @@ function StnBarChart({
             }) })
           ] })
         ) }),
-        legend && legend.length > 0 && /* @__PURE__ */ jsx99("div", { className: "stn-chart-legend-pill", "aria-label": "\uCC28\uD2B8 \uBC94\uB840", children: legend.map((leg, lIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-legend-pill__item", children: [
-          /* @__PURE__ */ jsx99(
+        legend && legend.length > 0 && /* @__PURE__ */ jsx102("div", { className: "stn-chart-legend-pill", "aria-label": "\uCC28\uD2B8 \uBC94\uB840", children: legend.map((leg, lIdx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-legend-pill__item", children: [
+          /* @__PURE__ */ jsx102(
             "span",
             {
               className: "stn-chart-legend-pill__bar",
               style: { backgroundColor: resolveChartColor(leg.color, lIdx) }
             }
           ),
-          /* @__PURE__ */ jsx99("span", { className: "stn-chart-legend-pill__label", children: leg.label })
+          /* @__PURE__ */ jsx102("span", { className: "stn-chart-legend-pill__label", children: leg.label })
         ] }, lIdx)) })
       ]
     }
@@ -14769,9 +15470,9 @@ function StnBarChart({
 // src/components/StnPieChart.tsx
 import {
   useId as useId18,
-  useState as useState28
+  useState as useState29
 } from "react";
-import { Fragment as Fragment18, jsx as jsx100, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs77 } from "react/jsx-runtime";
 var DEFAULT_PIE_COLORS = STN_CHART_COLORS;
 var R = 38;
 var CIRCUMFERENCE = 2 * Math.PI * R;
@@ -14799,10 +15500,10 @@ function StnPieChart({
   ...rest
 }) {
   const filterId = useId18().replace(/:/g, "");
-  const [hoveredIndex, setHoveredIndex] = useState28(null);
+  const [hoveredIndex, setHoveredIndex] = useState29(null);
   const hasData = Boolean(data && data.length > 0);
   if (loading || !hasData) {
-    return /* @__PURE__ */ jsx100(
+    return /* @__PURE__ */ jsx103(
       "div",
       {
         className: cn("stn-chart-gauge", className),
@@ -14838,7 +15539,7 @@ function StnPieChart({
     position: "relative"
   };
   const activeSeg = hoveredIndex !== null ? segments[hoveredIndex] : null;
-  return /* @__PURE__ */ jsxs74(
+  return /* @__PURE__ */ jsxs77(
     "div",
     {
       className: cn(
@@ -14850,7 +15551,7 @@ function StnPieChart({
       style: containerStyle,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs74(
+        /* @__PURE__ */ jsxs77(
           "svg",
           {
             className: "stn-chart-gauge__svg",
@@ -14858,8 +15559,8 @@ function StnPieChart({
             style: { width: size, height: size },
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx100("defs", { children: /* @__PURE__ */ jsx100("filter", { id: `gauge_shadow_${filterId}`, x: "-30%", y: "-30%", width: "160%", height: "160%", children: /* @__PURE__ */ jsx100("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "var(--stn-opacity-black-30)" }) }) }),
-              /* @__PURE__ */ jsx100(
+              /* @__PURE__ */ jsx103("defs", { children: /* @__PURE__ */ jsx103("filter", { id: `gauge_shadow_${filterId}`, x: "-30%", y: "-30%", width: "160%", height: "160%", children: /* @__PURE__ */ jsx103("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "var(--stn-opacity-black-30)" }) }) }),
+              /* @__PURE__ */ jsx103(
                 "circle",
                 {
                   className: "stn-chart-gauge__track",
@@ -14871,7 +15572,7 @@ function StnPieChart({
               ),
               segments.map((seg, sIdx) => {
                 const isHovered = hoveredIndex === sIdx;
-                return /* @__PURE__ */ jsx100(
+                return /* @__PURE__ */ jsx103(
                   "circle",
                   {
                     className: "stn-chart-gauge__seg",
@@ -14898,9 +15599,9 @@ function StnPieChart({
                   seg.id ?? sIdx
                 );
               }),
-              variant === "gauge" ? /* @__PURE__ */ jsxs74(Fragment18, { children: [
-                /* @__PURE__ */ jsx100("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "31" }),
-                /* @__PURE__ */ jsx100(
+              variant === "gauge" ? /* @__PURE__ */ jsxs77(Fragment18, { children: [
+                /* @__PURE__ */ jsx103("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "31" }),
+                /* @__PURE__ */ jsx103(
                   "circle",
                   {
                     className: "stn-chart-gauge__center-inner",
@@ -14910,11 +15611,11 @@ function StnPieChart({
                     filter: `url(#gauge_shadow_${filterId})`
                   }
                 ),
-                centerLabel && /* @__PURE__ */ jsx100("text", { className: "stn-chart-gauge__center-text", x: "45", y: "49", children: centerLabel })
-              ] }) : /* @__PURE__ */ jsxs74(Fragment18, { children: [
-                /* @__PURE__ */ jsx100("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "30" }),
-                centerLabel && /* @__PURE__ */ jsx100("text", { className: "stn-chart-gauge__center-text", x: "45", y: centerSubLabel ? "46" : "49", children: centerLabel }),
-                centerSubLabel && /* @__PURE__ */ jsx100(
+                centerLabel && /* @__PURE__ */ jsx103("text", { className: "stn-chart-gauge__center-text", x: "45", y: "49", children: centerLabel })
+              ] }) : /* @__PURE__ */ jsxs77(Fragment18, { children: [
+                /* @__PURE__ */ jsx103("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "30" }),
+                centerLabel && /* @__PURE__ */ jsx103("text", { className: "stn-chart-gauge__center-text", x: "45", y: centerSubLabel ? "46" : "49", children: centerLabel }),
+                centerSubLabel && /* @__PURE__ */ jsx103(
                   "text",
                   {
                     x: "45",
@@ -14930,7 +15631,7 @@ function StnPieChart({
             ]
           }
         ),
-        showTooltip && activeSeg && /* @__PURE__ */ jsxs74(
+        showTooltip && activeSeg && /* @__PURE__ */ jsxs77(
           "div",
           {
             className: "stn-chart-tooltip",
@@ -14940,18 +15641,18 @@ function StnPieChart({
             },
             role: "tooltip",
             children: [
-              /* @__PURE__ */ jsx100("div", { className: "stn-chart-tooltip__header", children: activeSeg.label }),
-              /* @__PURE__ */ jsxs74("div", { className: "stn-chart-tooltip__row", children: [
-                /* @__PURE__ */ jsxs74("div", { className: "stn-chart-tooltip__group", children: [
-                  /* @__PURE__ */ jsx100("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: activeSeg.color } }),
-                  /* @__PURE__ */ jsx100("span", { className: "stn-chart-tooltip__label", children: "\uC218\uCE58" })
+              /* @__PURE__ */ jsx103("div", { className: "stn-chart-tooltip__header", children: activeSeg.label }),
+              /* @__PURE__ */ jsxs77("div", { className: "stn-chart-tooltip__row", children: [
+                /* @__PURE__ */ jsxs77("div", { className: "stn-chart-tooltip__group", children: [
+                  /* @__PURE__ */ jsx103("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: activeSeg.color } }),
+                  /* @__PURE__ */ jsx103("span", { className: "stn-chart-tooltip__label", children: "\uC218\uCE58" })
                 ] }),
-                /* @__PURE__ */ jsx100("span", { className: "stn-chart-tooltip__value", children: format ? format(activeSeg.value, activeSeg.ratio) : `${activeSeg.value.toLocaleString()} (${(activeSeg.ratio * 100).toFixed(decimals !== void 0 ? decimals : 1)}%)` })
+                /* @__PURE__ */ jsx103("span", { className: "stn-chart-tooltip__value", children: format ? format(activeSeg.value, activeSeg.ratio) : `${activeSeg.value.toLocaleString()} (${(activeSeg.ratio * 100).toFixed(decimals !== void 0 ? decimals : 1)}%)` })
               ] })
             ]
           }
         ),
-        showLegend && segments.length > 0 && /* @__PURE__ */ jsx100("div", { className: "stn-chart-gauge-legend", role: "list", children: segments.map((seg, lIdx) => /* @__PURE__ */ jsxs74(
+        showLegend && segments.length > 0 && /* @__PURE__ */ jsx103("div", { className: "stn-chart-gauge-legend", role: "list", children: segments.map((seg, lIdx) => /* @__PURE__ */ jsxs77(
           "div",
           {
             className: "stn-chart-gauge-legend__item",
@@ -14963,14 +15664,14 @@ function StnPieChart({
             style: { cursor: "pointer", outline: "none" },
             role: "listitem",
             children: [
-              /* @__PURE__ */ jsx100(
+              /* @__PURE__ */ jsx103(
                 "span",
                 {
                   className: "stn-chart-gauge-legend__dot",
                   style: { backgroundColor: seg.color }
                 }
               ),
-              /* @__PURE__ */ jsx100("span", { className: "stn-chart-gauge-legend__label", children: seg.label })
+              /* @__PURE__ */ jsx103("span", { className: "stn-chart-gauge-legend__label", children: seg.label })
             ]
           },
           seg.id ?? lIdx
@@ -14985,9 +15686,9 @@ var StnGaugeChart = StnPieChart;
 import {
   useId as useId19,
   useRef as useRef15,
-  useState as useState29
+  useState as useState30
 } from "react";
-import { jsx as jsx101, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs78 } from "react/jsx-runtime";
 var DEFAULT_LINE_COLORS = STN_CHART_COLORS;
 var VIEW_W = 300;
 var VIEW_H = 84;
@@ -15027,7 +15728,7 @@ function StnLineChart({
 }) {
   const chartId = useId19().replace(/:/g, "");
   const svgRef = useRef15(null);
-  const [hoverIndex, setHoverIndex] = useState29(null);
+  const [hoverIndex, setHoverIndex] = useState30(null);
   const valueFormatter = format ?? ((v) => formatChartValue(v, decimals));
   const hasDots = Boolean(showDots ?? showPoints ?? dots ?? false);
   const dotRadius = DOT_RADIUS_MAP[size] || 3;
@@ -15038,7 +15739,7 @@ function StnLineChart({
   }));
   const hasData = seriesList.length > 0 && seriesList.some((s) => Array.isArray(s.data) && s.data.length > 0);
   if (loading || !hasData) {
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx104(
       "div",
       {
         className: cn("stn-chart-line", `stn-chart-line--${size}`, className),
@@ -15112,13 +15813,13 @@ function StnLineChart({
     const lastPoint = points[points.length - 1] ?? 0;
     const lastX = sW - 2;
     const lastY = sH - 4 - (lastPoint - min) / range * (sH - 8);
-    return /* @__PURE__ */ jsx101(
+    return /* @__PURE__ */ jsx104(
       "div",
       {
         className: cn("stn-chart-sparkline", `stn-chart-line--${size}`, className),
         style: { ...containerStyle, position: "relative", overflow: "hidden" },
         ...rest,
-        children: /* @__PURE__ */ jsxs75(
+        children: /* @__PURE__ */ jsxs78(
           "svg",
           {
             width: "100%",
@@ -15127,12 +15828,12 @@ function StnLineChart({
             style: { display: "block" },
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx101("defs", { children: /* @__PURE__ */ jsxs75("linearGradient", { id: `spark_grad_${chartId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                /* @__PURE__ */ jsx101("stop", { offset: "0%", stopColor: strokeColor, stopOpacity: "0.45" }),
-                /* @__PURE__ */ jsx101("stop", { offset: "100%", stopColor: strokeColor, stopOpacity: "0" })
+              /* @__PURE__ */ jsx104("defs", { children: /* @__PURE__ */ jsxs78("linearGradient", { id: `spark_grad_${chartId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx104("stop", { offset: "0%", stopColor: strokeColor, stopOpacity: "0.45" }),
+                /* @__PURE__ */ jsx104("stop", { offset: "100%", stopColor: strokeColor, stopOpacity: "0" })
               ] }) }),
-              /* @__PURE__ */ jsx101("polygon", { points: areaPoints, fill: `url(#spark_grad_${chartId})` }),
-              /* @__PURE__ */ jsx101(
+              /* @__PURE__ */ jsx104("polygon", { points: areaPoints, fill: `url(#spark_grad_${chartId})` }),
+              /* @__PURE__ */ jsx104(
                 "polyline",
                 {
                   points: polyPoints,
@@ -15144,7 +15845,7 @@ function StnLineChart({
                   vectorEffect: "non-scaling-stroke"
                 }
               ),
-              /* @__PURE__ */ jsx101("circle", { cx: lastX, cy: lastY, r: "3", fill: strokeColor })
+              /* @__PURE__ */ jsx104("circle", { cx: lastX, cy: lastY, r: "3", fill: strokeColor })
             ]
           }
         )
@@ -15155,7 +15856,7 @@ function StnLineChart({
   const hoverPct = hoverSvgX !== null ? hoverSvgX / VIEW_W * 100 : 0;
   const isNearRight = hoverPct > 68;
   const isNearLeft = hoverPct < 15;
-  return /* @__PURE__ */ jsxs75(
+  return /* @__PURE__ */ jsxs78(
     "div",
     {
       className: cn(
@@ -15170,10 +15871,10 @@ function StnLineChart({
       style: containerStyle,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs75("div", { className: "stn-chart-line__body", children: [
-          showYAxis && /* @__PURE__ */ jsx101("div", { className: "stn-chart-line__axis-y", "aria-hidden": "true", children: (yAxis.labels && yAxis.labels.length > 0 ? yAxis.labels : [max, min + (max - min) * 0.66, min + (max - min) * 0.33, min].map((v) => valueFormatter(v))).map((lbl, idx) => /* @__PURE__ */ jsx101("span", { children: lbl }, idx)) }),
-          /* @__PURE__ */ jsxs75("div", { className: "stn-chart-line__plot-area", style: { position: "relative", width: "100%", flex: "1 1 0%", minHeight: 0 }, children: [
-            /* @__PURE__ */ jsxs75(
+        /* @__PURE__ */ jsxs78("div", { className: "stn-chart-line__body", children: [
+          showYAxis && /* @__PURE__ */ jsx104("div", { className: "stn-chart-line__axis-y", "aria-hidden": "true", children: (yAxis.labels && yAxis.labels.length > 0 ? yAxis.labels : [max, min + (max - min) * 0.66, min + (max - min) * 0.33, min].map((v) => valueFormatter(v))).map((lbl, idx) => /* @__PURE__ */ jsx104("span", { children: lbl }, idx)) }),
+          /* @__PURE__ */ jsxs78("div", { className: "stn-chart-line__plot-area", style: { position: "relative", width: "100%", flex: "1 1 0%", minHeight: 0 }, children: [
+            /* @__PURE__ */ jsxs78(
               "svg",
               {
                 ref: svgRef,
@@ -15184,9 +15885,9 @@ function StnLineChart({
                 onMouseLeave: handleMouseLeave,
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx101("defs", { children: variant === "area" && seriesList.map((series, sIdx) => {
+                  /* @__PURE__ */ jsx104("defs", { children: variant === "area" && seriesList.map((series, sIdx) => {
                     const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
-                    return /* @__PURE__ */ jsxs75(
+                    return /* @__PURE__ */ jsxs78(
                       "linearGradient",
                       {
                         id: `line_area_grad_${chartId}_${sIdx}`,
@@ -15195,8 +15896,8 @@ function StnLineChart({
                         x2: "0",
                         y2: "1",
                         children: [
-                          /* @__PURE__ */ jsx101("stop", { offset: "0%", stopColor: color, stopOpacity: "0.35" }),
-                          /* @__PURE__ */ jsx101("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+                          /* @__PURE__ */ jsx104("stop", { offset: "0%", stopColor: color, stopOpacity: "0.35" }),
+                          /* @__PURE__ */ jsx104("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
                         ]
                       },
                       `grad-${sIdx}`
@@ -15204,7 +15905,7 @@ function StnLineChart({
                   }) }),
                   gridYPositions.map((yPos, idx) => {
                     const isZero = yPos === Y_BOTTOM || idx === 1;
-                    return /* @__PURE__ */ jsx101(
+                    return /* @__PURE__ */ jsx104(
                       "line",
                       {
                         x1: xStart,
@@ -15217,7 +15918,7 @@ function StnLineChart({
                       idx
                     );
                   }),
-                  variant === "area" && seriesList.map((series, sIdx) => /* @__PURE__ */ jsx101(
+                  variant === "area" && seriesList.map((series, sIdx) => /* @__PURE__ */ jsx104(
                     "path",
                     {
                       d: buildAreaPathString(series.data),
@@ -15227,7 +15928,7 @@ function StnLineChart({
                   )),
                   seriesList.map((series, sIdx) => {
                     const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
-                    return /* @__PURE__ */ jsx101(
+                    return /* @__PURE__ */ jsx104(
                       "path",
                       {
                         className: "stn-chart-line__path",
@@ -15238,7 +15939,7 @@ function StnLineChart({
                       `line-${series.id ?? sIdx}`
                     );
                   }),
-                  showTooltip && hoverSvgX !== null && hoverIndex !== null && /* @__PURE__ */ jsx101("g", { className: "stn-chart-line__hover-group", children: /* @__PURE__ */ jsx101(
+                  showTooltip && hoverSvgX !== null && hoverIndex !== null && /* @__PURE__ */ jsx104("g", { className: "stn-chart-line__hover-group", children: /* @__PURE__ */ jsx104(
                     "line",
                     {
                       x1: hoverSvgX,
@@ -15251,7 +15952,7 @@ function StnLineChart({
                       vectorEffect: "non-scaling-stroke"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx101(
+                  /* @__PURE__ */ jsx104(
                     "rect",
                     {
                       x: "0",
@@ -15265,7 +15966,7 @@ function StnLineChart({
                 ]
               }
             ),
-            hasDots && /* @__PURE__ */ jsx101("div", { className: "stn-chart-line__dots", "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: seriesList.map((series, sIdx) => {
+            hasDots && /* @__PURE__ */ jsx104("div", { className: "stn-chart-line__dots", "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: seriesList.map((series, sIdx) => {
               const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
               const count = series.data.length;
               return series.data.map((val, pIdx) => {
@@ -15273,7 +15974,7 @@ function StnLineChart({
                 const yPct = (Y_BOTTOM - (val - min) / range * yDist) / VIEW_H * 100;
                 const isHoveredPoint = hoverIndex === pIdx;
                 const r = isHoveredPoint ? dotRadius + 1.2 : dotRadius;
-                return /* @__PURE__ */ jsx101(
+                return /* @__PURE__ */ jsx104(
                   "span",
                   {
                     className: cn("stn-chart-line__dot", isHoveredPoint && "is-active"),
@@ -15295,8 +15996,8 @@ function StnLineChart({
               });
             }) })
           ] }),
-          showXAxis && xAxisLabels.length > 0 && /* @__PURE__ */ jsx101("div", { className: "stn-chart-line__axis-x", "aria-hidden": "true", children: xAxisLabels.map((lbl, idx) => /* @__PURE__ */ jsx101("span", { children: lbl }, idx)) }),
-          showTooltip && hoverIndex !== null && hoverSvgX !== null && /* @__PURE__ */ jsxs75(
+          showXAxis && xAxisLabels.length > 0 && /* @__PURE__ */ jsx104("div", { className: "stn-chart-line__axis-x", "aria-hidden": "true", children: xAxisLabels.map((lbl, idx) => /* @__PURE__ */ jsx104("span", { children: lbl }, idx)) }),
+          showTooltip && hoverIndex !== null && hoverSvgX !== null && /* @__PURE__ */ jsxs78(
             "div",
             {
               className: cn(
@@ -15310,32 +16011,32 @@ function StnLineChart({
               },
               role: "tooltip",
               children: [
-                xAxisLabels[hoverIndex] && /* @__PURE__ */ jsx101("div", { className: "stn-chart-tooltip__header", children: xAxisLabels[hoverIndex] }),
+                xAxisLabels[hoverIndex] && /* @__PURE__ */ jsx104("div", { className: "stn-chart-tooltip__header", children: xAxisLabels[hoverIndex] }),
                 seriesList.map((series, sIdx) => {
                   const val = series.data[hoverIndex];
                   if (val === void 0) return null;
                   const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
-                  return /* @__PURE__ */ jsxs75("div", { className: "stn-chart-tooltip__row", children: [
-                    /* @__PURE__ */ jsxs75("div", { className: "stn-chart-tooltip__group", children: [
-                      /* @__PURE__ */ jsx101("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: color } }),
-                      /* @__PURE__ */ jsx101("span", { className: "stn-chart-tooltip__label", children: series.label || `Series ${sIdx + 1}` })
+                  return /* @__PURE__ */ jsxs78("div", { className: "stn-chart-tooltip__row", children: [
+                    /* @__PURE__ */ jsxs78("div", { className: "stn-chart-tooltip__group", children: [
+                      /* @__PURE__ */ jsx104("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: color } }),
+                      /* @__PURE__ */ jsx104("span", { className: "stn-chart-tooltip__label", children: series.label || `Series ${sIdx + 1}` })
                     ] }),
-                    /* @__PURE__ */ jsx101("span", { className: "stn-chart-tooltip__value", children: valueFormatter(val) })
+                    /* @__PURE__ */ jsx104("span", { className: "stn-chart-tooltip__value", children: valueFormatter(val) })
                   ] }, sIdx);
                 })
               ]
             }
           )
         ] }),
-        resolvedLegend.length > 0 && /* @__PURE__ */ jsx101("div", { className: "stn-chart-legend-pill", "aria-label": "\uB77C\uC778 \uCC28\uD2B8 \uBC94\uB840", children: resolvedLegend.map((item, idx) => /* @__PURE__ */ jsxs75("div", { className: "stn-chart-legend-pill__item", children: [
-          /* @__PURE__ */ jsx101(
+        resolvedLegend.length > 0 && /* @__PURE__ */ jsx104("div", { className: "stn-chart-legend-pill", "aria-label": "\uB77C\uC778 \uCC28\uD2B8 \uBC94\uB840", children: resolvedLegend.map((item, idx) => /* @__PURE__ */ jsxs78("div", { className: "stn-chart-legend-pill__item", children: [
+          /* @__PURE__ */ jsx104(
             "span",
             {
               className: "stn-chart-legend-pill__bar",
               style: { backgroundColor: item.color }
             }
           ),
-          /* @__PURE__ */ jsx101("span", { className: "stn-chart-legend-pill__label", children: item.label })
+          /* @__PURE__ */ jsx104("span", { className: "stn-chart-legend-pill__label", children: item.label })
         ] }, idx)) })
       ]
     }
@@ -15345,9 +16046,9 @@ function StnLineChart({
 // src/components/StnComboChart.tsx
 import {
   useId as useId20,
-  useState as useState30
+  useState as useState31
 } from "react";
-import { jsx as jsx102, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs79 } from "react/jsx-runtime";
 var BAR_WIDTH_MAP = {
   sm: "var(--stn-chart-combo-bar-width-sm)",
   md: "var(--stn-chart-combo-bar-width-md)",
@@ -15386,11 +16087,11 @@ function StnComboChart({
   ...rest
 }) {
   const chartId = useId20().replace(/:/g, "");
-  const [internalHighlight, setInternalHighlight] = useState30(null);
-  const [hoverIndex, setHoverIndex] = useState30(null);
+  const [internalHighlight, setInternalHighlight] = useState31(null);
+  const [hoverIndex, setHoverIndex] = useState31(null);
   const hasData = Boolean(data && data.length > 0);
   if (loading || !hasData) {
-    return /* @__PURE__ */ jsx102(
+    return /* @__PURE__ */ jsx105(
       "div",
       {
         className: cn("stn-chart-combo", `stn-chart-combo--${size}`, className),
@@ -15530,7 +16231,7 @@ function StnComboChart({
     ["--stn-chart-combo-bar-width"]: resolvedBarWidth
   };
   const hoverGuideX = hoverIndex !== null ? getLineX(hoverIndex) : null;
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs79(
     "div",
     {
       className: cn(
@@ -15545,10 +16246,10 @@ function StnComboChart({
       style: containerStyle,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs76("div", { className: "stn-chart-combo__body", children: [
-          showLeftYAxis && /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__axis-y-left", "aria-hidden": "true", children: leftGridRows.map((row, rIdx) => /* @__PURE__ */ jsx102("span", { children: row.label }, rIdx)) }),
-          showRightYAxis && hasRightAxis && /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__axis-y-right", "aria-hidden": "true", children: rightGridRows.map((lbl, rIdx) => /* @__PURE__ */ jsx102("span", { children: lbl }, rIdx)) }),
-          /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__grid", "aria-hidden": "true", children: leftGridRows.map((row, rIdx) => /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__grid-row", children: /* @__PURE__ */ jsx102(
+        /* @__PURE__ */ jsxs79("div", { className: "stn-chart-combo__body", children: [
+          showLeftYAxis && /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__axis-y-left", "aria-hidden": "true", children: leftGridRows.map((row, rIdx) => /* @__PURE__ */ jsx105("span", { children: row.label }, rIdx)) }),
+          showRightYAxis && hasRightAxis && /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__axis-y-right", "aria-hidden": "true", children: rightGridRows.map((lbl, rIdx) => /* @__PURE__ */ jsx105("span", { children: lbl }, rIdx)) }),
+          /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__grid", "aria-hidden": "true", children: leftGridRows.map((row, rIdx) => /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__grid-row", children: /* @__PURE__ */ jsx105(
             "div",
             {
               className: cn(
@@ -15557,10 +16258,10 @@ function StnComboChart({
               )
             }
           ) }, rIdx)) }),
-          /* @__PURE__ */ jsxs76("div", { className: "stn-chart-combo__content", children: [
-            /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__columns", role: "list", children: parsedData.map((item, idx) => {
+          /* @__PURE__ */ jsxs79("div", { className: "stn-chart-combo__content", children: [
+            /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__columns", role: "list", children: parsedData.map((item, idx) => {
               const active = isHighlighted(idx, item);
-              return /* @__PURE__ */ jsxs76(
+              return /* @__PURE__ */ jsxs79(
                 "button",
                 {
                   type: "button",
@@ -15571,10 +16272,10 @@ function StnComboChart({
                   "aria-label": item.label,
                   role: "listitem",
                   children: [
-                    /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__highlight" }),
-                    /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__bars-wrap", children: item.bars.map((b, bIdx) => {
+                    /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__highlight" }),
+                    /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__bars-wrap", children: item.bars.map((b, bIdx) => {
                       const pct = Math.max(0, Math.min(100, (b.value - leftMin) / leftRange * 100));
-                      return /* @__PURE__ */ jsx102(
+                      return /* @__PURE__ */ jsx105(
                         "div",
                         {
                           className: "stn-chart-combo__bar",
@@ -15591,7 +16292,7 @@ function StnComboChart({
                 item.id ?? idx
               );
             }) }),
-            /* @__PURE__ */ jsxs76(
+            /* @__PURE__ */ jsxs79(
               "svg",
               {
                 className: "stn-chart-combo__svg-overlay",
@@ -15599,10 +16300,10 @@ function StnComboChart({
                 preserveAspectRatio: "none",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx102("defs", { children: safeLines.map((series, sIdx) => {
+                  /* @__PURE__ */ jsx105("defs", { children: safeLines.map((series, sIdx) => {
                     if (!series.area) return null;
                     const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
-                    return /* @__PURE__ */ jsxs76(
+                    return /* @__PURE__ */ jsxs79(
                       "linearGradient",
                       {
                         id: `combo_area_grad_${chartId}_${sIdx}`,
@@ -15611,8 +16312,8 @@ function StnComboChart({
                         x2: "0",
                         y2: "1",
                         children: [
-                          /* @__PURE__ */ jsx102("stop", { offset: "0%", stopColor: color, stopOpacity: "0.32" }),
-                          /* @__PURE__ */ jsx102("stop", { offset: "100%", stopColor: color, stopOpacity: "0.0" })
+                          /* @__PURE__ */ jsx105("stop", { offset: "0%", stopColor: color, stopOpacity: "0.32" }),
+                          /* @__PURE__ */ jsx105("stop", { offset: "100%", stopColor: color, stopOpacity: "0.0" })
                         ]
                       },
                       `grad-${sIdx}`
@@ -15621,7 +16322,7 @@ function StnComboChart({
                   safeLines.map((series, sIdx) => {
                     if (!series.area) return null;
                     const isRight = series.yAxis === "right";
-                    return /* @__PURE__ */ jsx102(
+                    return /* @__PURE__ */ jsx105(
                       "path",
                       {
                         d: buildAreaPathString(series.data, isRight),
@@ -15633,7 +16334,7 @@ function StnComboChart({
                   safeLines.map((series, sIdx) => {
                     const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
                     const isRight = series.yAxis === "right";
-                    return /* @__PURE__ */ jsx102(
+                    return /* @__PURE__ */ jsx105(
                       "path",
                       {
                         className: "stn-chart-combo__path",
@@ -15644,7 +16345,7 @@ function StnComboChart({
                       `line-${series.id ?? sIdx}`
                     );
                   }),
-                  showTooltip && hoverGuideX !== null && /* @__PURE__ */ jsx102("g", { className: "stn-chart-line__hover-group", children: /* @__PURE__ */ jsx102(
+                  showTooltip && hoverGuideX !== null && /* @__PURE__ */ jsx105("g", { className: "stn-chart-line__hover-group", children: /* @__PURE__ */ jsx105(
                     "line",
                     {
                       x1: hoverGuideX,
@@ -15660,7 +16361,7 @@ function StnComboChart({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__dots-layer", "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 3 }, children: safeLines.map((series, sIdx) => {
+            /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__dots-layer", "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 3 }, children: safeLines.map((series, sIdx) => {
               const shouldShowDots = series.showDots ?? showDots;
               if (!shouldShowDots) return null;
               const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
@@ -15670,7 +16371,7 @@ function StnComboChart({
                 const yPct = getLineY(val, isRight) / VIEW_H2 * 100;
                 const isHovered = hoverIndex === pIdx;
                 const r = isHovered ? dotRadius + 1.2 : dotRadius;
-                return /* @__PURE__ */ jsx102(
+                return /* @__PURE__ */ jsx105(
                   "span",
                   {
                     className: cn("stn-chart-line__dot", isHovered && "is-active"),
@@ -15695,7 +16396,7 @@ function StnComboChart({
               const colPct = (hoverIndex + 0.5) / colCount * 100;
               const isNearRight = colPct > 68;
               const isNearLeft = colPct < 15;
-              return /* @__PURE__ */ jsxs76(
+              return /* @__PURE__ */ jsxs79(
                 "div",
                 {
                   className: cn(
@@ -15709,10 +16410,10 @@ function StnComboChart({
                   },
                   role: "tooltip",
                   children: [
-                    /* @__PURE__ */ jsx102("div", { className: "stn-chart-tooltip__header", children: parsedData[hoverIndex].label }),
-                    parsedData[hoverIndex].bars.map((b, bIdx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__row", children: [
-                      /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__group", children: [
-                        /* @__PURE__ */ jsx102(
+                    /* @__PURE__ */ jsx105("div", { className: "stn-chart-tooltip__header", children: parsedData[hoverIndex].label }),
+                    parsedData[hoverIndex].bars.map((b, bIdx) => /* @__PURE__ */ jsxs79("div", { className: "stn-chart-tooltip__row", children: [
+                      /* @__PURE__ */ jsxs79("div", { className: "stn-chart-tooltip__group", children: [
+                        /* @__PURE__ */ jsx105(
                           "span",
                           {
                             className: "stn-chart-tooltip__bar-mark",
@@ -15721,9 +16422,9 @@ function StnComboChart({
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__label", children: b.label })
+                        /* @__PURE__ */ jsx105("span", { className: "stn-chart-tooltip__label", children: b.label })
                       ] }),
-                      /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__value", children: leftFormatter(b.value) })
+                      /* @__PURE__ */ jsx105("span", { className: "stn-chart-tooltip__value", children: leftFormatter(b.value) })
                     ] }, `tip-bar-${bIdx}`)),
                     safeLines.map((series, sIdx) => {
                       const val = series.data[hoverIndex];
@@ -15731,12 +16432,12 @@ function StnComboChart({
                       const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
                       const isRight = series.yAxis === "right";
                       const formatter = isRight ? rightFormatter : leftFormatter;
-                      return /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__row", children: [
-                        /* @__PURE__ */ jsxs76("div", { className: "stn-chart-tooltip__group", children: [
-                          /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: color } }),
-                          /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__label", children: series.label || `\uC120 ${sIdx + 1}` })
+                      return /* @__PURE__ */ jsxs79("div", { className: "stn-chart-tooltip__row", children: [
+                        /* @__PURE__ */ jsxs79("div", { className: "stn-chart-tooltip__group", children: [
+                          /* @__PURE__ */ jsx105("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: color } }),
+                          /* @__PURE__ */ jsx105("span", { className: "stn-chart-tooltip__label", children: series.label || `\uC120 ${sIdx + 1}` })
                         ] }),
-                        /* @__PURE__ */ jsx102("span", { className: "stn-chart-tooltip__value", children: formatter(val) })
+                        /* @__PURE__ */ jsx105("span", { className: "stn-chart-tooltip__value", children: formatter(val) })
                       ] }, `tip-line-${sIdx}`);
                     })
                   ]
@@ -15744,15 +16445,15 @@ function StnComboChart({
               );
             })()
           ] }),
-          showXAxis && /* @__PURE__ */ jsx102("div", { className: "stn-chart-combo__axis-x", "aria-hidden": "true", children: parsedData.map((item, idx) => /* @__PURE__ */ jsx102("span", { className: "stn-chart-combo__axis-x-item", title: item.label, children: item.label }, item.id ?? idx)) })
+          showXAxis && /* @__PURE__ */ jsx105("div", { className: "stn-chart-combo__axis-x", "aria-hidden": "true", children: parsedData.map((item, idx) => /* @__PURE__ */ jsx105("span", { className: "stn-chart-combo__axis-x-item", title: item.label, children: item.label }, item.id ?? idx)) })
         ] }),
-        resolvedLegend.length > 0 && /* @__PURE__ */ jsx102("div", { className: "stn-chart-legend-pill", "aria-label": "\uBCF5\uD569 \uCC28\uD2B8 \uBC94\uB840", children: resolvedLegend.map((item, idx) => /* @__PURE__ */ jsxs76("div", { className: "stn-chart-legend-pill__item", children: [
-          item.type === "line" ? /* @__PURE__ */ jsx102(
+        resolvedLegend.length > 0 && /* @__PURE__ */ jsx105("div", { className: "stn-chart-legend-pill", "aria-label": "\uBCF5\uD569 \uCC28\uD2B8 \uBC94\uB840", children: resolvedLegend.map((item, idx) => /* @__PURE__ */ jsxs79("div", { className: "stn-chart-legend-pill__item", children: [
+          item.type === "line" ? /* @__PURE__ */ jsx105(
             "span",
             {
               className: "stn-chart-legend-pill__line-marker",
               style: { backgroundColor: item.color },
-              children: /* @__PURE__ */ jsx102(
+              children: /* @__PURE__ */ jsx105(
                 "span",
                 {
                   className: "stn-chart-legend-pill__line-dot",
@@ -15760,14 +16461,14 @@ function StnComboChart({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx102(
+          ) : /* @__PURE__ */ jsx105(
             "span",
             {
               className: "stn-chart-legend-pill__bar",
               style: { backgroundColor: item.color }
             }
           ),
-          /* @__PURE__ */ jsx102("span", { className: "stn-chart-legend-pill__label", children: item.label })
+          /* @__PURE__ */ jsx105("span", { className: "stn-chart-legend-pill__label", children: item.label })
         ] }, idx)) })
       ]
     }
@@ -16101,9 +16802,13 @@ export {
   StnTopologyGraphNodeComponent,
   StnTopologyGraphToolbar,
   StnTopologyGraphViewport,
+  StnTopologyGraphZoomLevel,
+  StnTopologyLinkDetailModal,
+  StnTopologyLinkDetailPopover,
   StnTopologyLinkGlyph,
   StnTopologyNodeCard,
   StnTopologyNodeContextMenu,
+  StnTopologyNodeDetailPopover,
   StnTopologyNodeGlyph,
   StnTopologyNodeItem,
   StnTopologyNodeMark,
@@ -16131,7 +16836,10 @@ export {
   StnWidgetStatusItem,
   StnWidgetStatusList,
   StnWidgetTitle,
+  TOPOLOGY_GRAPH_NODE_SIZE,
+  TOPOLOGY_NODE_SIZE_MAP,
   TOPOLOGY_OPACITY_MAP,
+  TOPOLOGY_RING_NODE_SIZE,
   TOPOLOGY_STROKE_WIDTH_MAP,
   applyLnbSideToModifiers,
   buildPaginationItems,