@stn-uiux/pub-ui 0.1.59 → 0.1.60

package/dist/{chunk-XEG4WDUD.js → chunk-Q4QXONXL.js}

@@ -1,6 +1,6 @@
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-EQTZA7I2.js";
+} from "./chunk-NHYZ7AWK.js";
 
 // src/data/stnSystemIcons.ts
 function styleFromSlug(slug) {
@@ -195,4 +195,4 @@ export {
   systemIconSrc,
   resolveSystemIconSrcFromName
 };
-//# sourceMappingURL=chunk-XEG4WDUD.js.map
+//# sourceMappingURL=chunk-Q4QXONXL.js.map

package/dist/{chunk-SKZOEF3H.js → chunk-XQ7UUG7Y.js}

@@ -1,6 +1,6 @@
 import {
   systemIconSrc
-} from "./chunk-XEG4WDUD.js";
+} from "./chunk-Q4QXONXL.js";
 
 // src/data/stnBreadcrumb.ts
 var STN_BREADCRUMB_FIGMA = "40002093:31845";
@@ -57,4 +57,4 @@ export {
   STN_BREADCRUMB_DEMO_ITEMS,
   STN_BREADCRUMB_PARTS
 };
-//# sourceMappingURL=chunk-SKZOEF3H.js.map
+//# sourceMappingURL=chunk-XQ7UUG7Y.js.map

package/dist/{chunk-H4ZJQ5YW.js → chunk-YMWHZNBT.js}

@@ -1,6 +1,6 @@
 import {
   systemIconSrc
-} from "./chunk-XEG4WDUD.js";
+} from "./chunk-Q4QXONXL.js";
 
 // src/data/stnSideNavItem.ts
 var STN_SIDE_NAV_ITEM_INTRO = '\uC0AC\uC774\uB4DC\uBC14 \uBA54\uB274 \uD589 \u2014 Figma `menu`(184:63009). `StnSideNavItem` + `.stn-side-nav-item`. \uD3BC\uCE68(Default) \xB7 \uC811\uD798(Collapsed) \xB7 2depth(`variant="sub"`).';
@@ -33,4 +33,4 @@ export {
   STN_SIDE_NAV_SUB_ICON,
   STN_SIDE_NAV_ITEM_STATES
 };
-//# sourceMappingURL=chunk-H4ZJQ5YW.js.map
+//# sourceMappingURL=chunk-YMWHZNBT.js.map

package/dist/cli.js

@@ -10,7 +10,7 @@ import {
 } from "./chunk-JBOXRPR7.js";
 import {
   STN_TABLE_REACT_EXAMPLE
-} from "./chunk-DNMZJS65.js";
+} from "./chunk-IOBNIUK3.js";
 import {
   STN_TEXT_FIELD_USAGE
 } from "./chunk-NB4NJQYE.js";
@@ -36,7 +36,7 @@ import {
 import "./chunk-XBFXX3D6.js";
 import {
   STN_LAYOUT_LIST_VIEW_USAGE
-} from "./chunk-36BAGMYT.js";
+} from "./chunk-2ZYBBVBT.js";
 import {
   STN_LOADING_SKELETON_USAGE
 } from "./chunk-5BGXBJXN.js";
@@ -45,7 +45,7 @@ import {
 } from "./chunk-LKVTW54X.js";
 import {
   STN_HEADER_USAGE
-} from "./chunk-JPILTFLI.js";
+} from "./chunk-3RYAWLME.js";
 import "./chunk-BYGKJSDN.js";
 import {
   STN_DATE_PICKER_USAGE
@@ -54,8 +54,8 @@ import "./chunk-5F63CMM7.js";
 import {
   STN_ALERT_CENTER_USAGE
 } from "./chunk-2WKT7X65.js";
-import "./chunk-XEG4WDUD.js";
-import "./chunk-EQTZA7I2.js";
+import "./chunk-Q4QXONXL.js";
+import "./chunk-NHYZ7AWK.js";
 
 // src/cli/index.ts
 import { createRequire } from "module";

package/dist/data/index.js

@@ -40,7 +40,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "../chunk-H4ZJQ5YW.js";
+} from "../chunk-YMWHZNBT.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -352,7 +352,7 @@ import {
   STN_TABLE_TH_CHECK_EXAMPLE,
   STN_TABLE_TH_CHECK_FIGMA,
   STN_TABLE_TH_LABEL_FIGMA
-} from "../chunk-DNMZJS65.js";
+} from "../chunk-IOBNIUK3.js";
 import {
   STN_TEXT_FIELD_FIGMA,
   STN_TEXT_FIELD_HTML,
@@ -450,7 +450,7 @@ import {
   applyLnbSideToModifiers,
   pubContentAreaClasses,
   pubLayoutRegionClass
-} from "../chunk-36BAGMYT.js";
+} from "../chunk-2ZYBBVBT.js";
 import {
   STN_LOADING_SKELETON_COLORS,
   STN_LOADING_SKELETON_INTRO,
@@ -476,7 +476,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "../chunk-JPILTFLI.js";
+} from "../chunk-3RYAWLME.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -526,17 +526,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "../chunk-SKZOEF3H.js";
+} from "../chunk-XQ7UUG7Y.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-XEG4WDUD.js";
+} from "../chunk-Q4QXONXL.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-EQTZA7I2.js";
+} from "../chunk-NHYZ7AWK.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,

package/dist/data/stnBreadcrumb.js

@@ -5,9 +5,9 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "../chunk-SKZOEF3H.js";
-import "../chunk-XEG4WDUD.js";
-import "../chunk-EQTZA7I2.js";
+} from "../chunk-XQ7UUG7Y.js";
+import "../chunk-Q4QXONXL.js";
+import "../chunk-NHYZ7AWK.js";
 export {
   STN_BREADCRUMB_DEMO_ITEMS,
   STN_BREADCRUMB_FIGMA,

package/dist/data/stnHeader.js

@@ -6,9 +6,9 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "../chunk-JPILTFLI.js";
-import "../chunk-XEG4WDUD.js";
-import "../chunk-EQTZA7I2.js";
+} from "../chunk-3RYAWLME.js";
+import "../chunk-Q4QXONXL.js";
+import "../chunk-NHYZ7AWK.js";
 export {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/dist/data/stnLayout.d.ts

@@ -11,8 +11,8 @@ declare const STN_LAYOUT_PLAYGROUND_TABS: readonly {
     shellProps: string;
     assemble: string;
 }[];
-declare const STN_LAYOUT_LIST_VIEW_INTRO = "List view\uB294 \uBC30\uACBD \u00B7 Side Navigation\u00B7\uD398\uC774\uC9C0 \uD5E4\uB354 \u00B7 \uD2B8\uB9AC LNB \u00B7 \uAC80\uC0C9 \u00B7 \uD45C\uB85C \uAD6C\uC131\uB429\uB2C8\uB2E4. `ListPageScaffold`\uC5D0 gnb \u00B7 header \u00B7 lnb \u00B7 search \u00B7 children(\uD45C) \uC2AC\uB86F\uB9CC \uB118\uAE30\uBA74 \uB429\uB2C8\uB2E4. Playground\uC5D0\uC11C \uC635\uC158\uC744 \uACE0\uB978 \uB4A4 \uC0DD\uC131\uB41C React/HTML \uCF54\uB4DC\uB97C \uBCF5\uC0AC\uD558\uC138\uC694.";
-/** 라이브러리 내부 조립 참고 — 제품 화면은 `STN_LAYOUT_LIST_VIEW_USAGE`(`ListPageScaffold`)만 사용 */
+declare const STN_LAYOUT_LIST_VIEW_INTRO = "List view\uB294 \uBC30\uACBD \u00B7 Side Navigation \u00B7 \uD398\uC774\uC9C0 \uD5E4\uB354 \u00B7 \uD2B8\uB9AC LNB \u00B7 \uAC80\uC0C9 \u00B7 \uD45C\uB85C \uAD6C\uC131\uB429\uB2C8\uB2E4. StnLayerShell \uC544\uB798 StnContainer + StnStack\uC73C\uB85C \uB808\uC774\uC544\uC6C3\uC744 \uD22C\uBA85\uD558\uAC8C \uC870\uB9BD\uD569\uB2C8\uB2E4. Playground\uC5D0\uC11C \uC635\uC158\uC744 \uACE0\uB978 \uB4A4 \uC0DD\uC131\uB41C React/HTML \uCF54\uB4DC\uB97C \uBCF5\uC0AC\uD558\uC138\uC694.";
+/** 라이브러리 내부 조립 참고 — 제품 화면은 `STN_LAYOUT_LIST_VIEW_USAGE` 참고 */
 declare const STN_LAYOUT_LIST_VIEW_BARE_USAGE = "import {\n  StnLayerShell,\n  StnListViewLayout,\n  StnSideNavigation,\n  StnHeader,\n  StnSearchRequirementBar,\n  StnSectionSide,\n  StnTable,\n} from '@stn-uiux/pub-ui-react'\n\n/** StnLayerShell \uC548 \u2014 L1 listview \uADF8\uB9AC\uB4DC\uB9CC (\uC774\uC911 L0/L2 \uC5C6\uC74C) */\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      lnbSide=\"left\"\n    >\n      <StnListViewLayout\n        bare\n        sidebar={<StnSectionSide>{/* StnTree */}</StnSectionSide>}\n        search={\n          <StnSearchRequirementBar>{/* Fields \u00B7 SearchButton */}</StnSearchRequirementBar>\n        }\n      >\n        <StnTable summary=\"\uBAA9\uB85D\" />\n      </StnListViewLayout>\n    </StnLayerShell>\n  )\n}";
 /** List view 문서 탭 */
 type StnLayoutListLayerTabId = 'live' | 'l0' | 'l1' | 'l2';
@@ -20,7 +20,7 @@ declare const STN_LAYOUT_LIST_LAYER_TABS: {
     id: StnLayoutListLayerTabId;
     label: string;
 }[];
-declare const STN_LAYOUT_LIST_VIEW_USAGE = "import {\n  ListPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <ListPageScaffold\n      shell=\"layer\"\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      search={\n        <StnSearchRequirementBar>{/* Fields \u00B7 SearchButton */}</StnSearchRequirementBar>\n      }\n    >\n      <StnTable\n        summary=\"\uCD1D 128\uAC1C (1 to 20)\"\n        footerCenter={<StnPagination page={1} count={8} />}\n        footerRight={\n          <>\n            <StnButton size=\"md\">\uB4F1\uB85D</StnButton>\n            <StnButton size=\"md\" variant=\"ghost\">\uC218\uC815</StnButton>\n          </>\n        }\n      >\n        <StnTable.Grid>{/* \u2026 */}</StnTable.Grid>\n      </StnTable>\n    </ListPageScaffold>\n  )\n}";
+declare const STN_LAYOUT_LIST_VIEW_USAGE = "import {\n  StnLayerShell,\n  StnContainer,\n  StnStack,\n  StnHeader,\n  StnSideNavigation,\n  StnSectionSide,\n  StnTree,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n    >\n      {/* 2\uB2E8\uACC4: \uCD5C\uC0C1\uC704 \uBCF8\uBB38 \uCEE8\uD14C\uC774\uB108 */}\n      <StnContainer maxWidth={false}>\n        {/* 3\uB2E8\uACC4: \uD0DC\uBE14\uB9BF/\uBAA8\uBC14\uC77C(<1280px)=\uC138\uB85C \uC313\uAE30 / \uB370\uC2A4\uD06C\uD1B1(lg \u2265 1280px)=\uAC00\uB85C 2\uBD84\uD560 */}\n        <StnStack direction={{ xs: 'column', lg: 'row' }} spacing={2}>\n          {/* [LNB] \uBAA8\uBC14\uC77C: \uC0C1\uB2E8 full-width / \uB370\uC2A4\uD06C\uD1B1: 264px \uACE0\uC815 (StnSectionSide CSS) */}\n          <aside style={{ display: 'flex', flexDirection: 'column' }}>\n            <StnSectionSide fill fullWidth>\n              <StnTree size=\"md\" nodes={treeNodes} />\n            </StnSectionSide>\n          </aside>\n\n          {/* [\uC6B0\uCE21 \uBCF8\uBB38] \uAC80\uC0C9\uBC14 + \uD45C \uB370\uC774\uD130 \uADF8\uB9AC\uB4DC \uC138\uB85C \uC2A4\uD0DD */}\n          <StnStack\n            direction=\"column\"\n            spacing={2}\n            style={{ flex: 1, minWidth: 0, minHeight: 0 }}\n          >\n            <StnSearchRequirementBar>\n              {/* Fields \u00B7 SearchButton \u00B7 Export */}\n            </StnSearchRequirementBar>\n\n            <StnTable\n              fill\n              trackVisited\n              summary=\"\uCD1D 128\uAC1C (1 to 20)\"\n              footerCenter={<StnPagination page={1} count={8} />}\n              footerRight={\n                <>\n                  <StnButton size=\"md\" variant=\"contained\">\uB4F1\uB85D</StnButton>\n                  <StnButton size=\"md\" variant=\"ghost\">\uC218\uC815</StnButton>\n                </>\n              }\n            >\n              <StnTable.Grid>{/* StnTable.Head + Body */}</StnTable.Grid>\n            </StnTable>\n          </StnStack>\n        </StnStack>\n      </StnContainer>\n    </StnLayerShell>\n  )\n}";
 declare const STN_LAYOUT_MAP_DASHBOARD_INTRO = "\uB300\uC2DC\uBCF4\uB4DC\uB294 L0 \uBC30\uACBD \u00B7 L1(header \uD06C\uB86C + content \uBCF8\uBB38 \uB2E8 \uD558\uB098) \u00B7 L2 \uBAA8\uB2EC\uC785\uB2C8\uB2E4. \uBCF8\uBB38\uC740 `layer1` \uC2AC\uB86F\uC774 \uC544\uB2C8\uB77C `left`/`right`/`children`\uC73C\uB85C \uC870\uB9BD\uD569\uB2C8\uB2E4. `DashboardPageScaffold` (type=\"map\" | \"topology\" | \"widget-grid\").";
 /** Map / Dashboard 문서 탭 — List view와 동일 층 모델 */
 type StnLayoutMapLayerTabId = StnLayoutListLayerTabId;

package/dist/data/stnLayout.js

@@ -27,7 +27,7 @@ import {
   applyLnbSideToModifiers,
   pubContentAreaClasses,
   pubLayoutRegionClass
-} from "../chunk-36BAGMYT.js";
+} from "../chunk-2ZYBBVBT.js";
 export {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,

package/dist/data/stnSideNavItem.js

@@ -3,9 +3,9 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "../chunk-H4ZJQ5YW.js";
-import "../chunk-XEG4WDUD.js";
-import "../chunk-EQTZA7I2.js";
+} from "../chunk-YMWHZNBT.js";
+import "../chunk-Q4QXONXL.js";
+import "../chunk-NHYZ7AWK.js";
 export {
   STN_NAV_MENU_SUB_ICON,
   STN_SIDE_NAV_ITEM_INTRO,

package/dist/data/stnSystemIcons.js

@@ -4,10 +4,10 @@ import {
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-XEG4WDUD.js";
+} from "../chunk-Q4QXONXL.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-EQTZA7I2.js";
+} from "../chunk-NHYZ7AWK.js";
 export {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,

package/dist/data/stnSystemIconsData.generated.js

@@ -1,6 +1,6 @@
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-EQTZA7I2.js";
+} from "../chunk-NHYZ7AWK.js";
 export {
   SYSTEM_ICON_DATA_URLS
 };

package/dist/data/stnTable.d.ts

@@ -35,7 +35,7 @@ declare const STN_TABLE_PARTS: readonly [{
     readonly role: "데이터 테이블 (`StnTable.Grid`)";
 }, {
     readonly part: "thead / .stn-table__thead";
-    readonly role: "헤더 · Light gray-50 / Dark white/5 (`--stn-table-th-bg`) · th Light gray-700 / Dark gray-350 · 높이 36 · radius Light 4 / Dark 8";
+    readonly role: "헤더 · Light gray-50 / Dark gray-800 (`--stn-table-th-bg`) · th Light gray-700 / Dark gray-350 · 높이 36 · radius Light 4 / Dark 8";
 }, {
     readonly part: "tbody / .stn-table__tbody";
     readonly role: "본문 · 행 36 · border Light gray-100 / Dark gray-800 (`--stn-table-border`) · td Light gray-750 / Dark gray-50";

package/dist/data/stnTable.js

@@ -13,7 +13,7 @@ import {
   STN_TABLE_TH_CHECK_EXAMPLE,
   STN_TABLE_TH_CHECK_FIGMA,
   STN_TABLE_TH_LABEL_FIGMA
-} from "../chunk-DNMZJS65.js";
+} from "../chunk-IOBNIUK3.js";
 export {
   STN_TABLE_EXAMPLE,
   STN_TABLE_EXAMPLE_HTML,

package/dist/index.js

@@ -45,7 +45,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "./chunk-H4ZJQ5YW.js";
+} from "./chunk-YMWHZNBT.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -357,7 +357,7 @@ import {
   STN_TABLE_TH_CHECK_EXAMPLE,
   STN_TABLE_TH_CHECK_FIGMA,
   STN_TABLE_TH_LABEL_FIGMA
-} from "./chunk-DNMZJS65.js";
+} from "./chunk-IOBNIUK3.js";
 import {
   STN_TEXT_FIELD_FIGMA,
   STN_TEXT_FIELD_HTML,
@@ -455,7 +455,7 @@ import {
   applyLnbSideToModifiers,
   pubContentAreaClasses,
   pubLayoutRegionClass
-} from "./chunk-36BAGMYT.js";
+} from "./chunk-2ZYBBVBT.js";
 import {
   STN_LOADING_SKELETON_COLORS,
   STN_LOADING_SKELETON_INTRO,
@@ -481,7 +481,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "./chunk-JPILTFLI.js";
+} from "./chunk-3RYAWLME.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -531,17 +531,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "./chunk-SKZOEF3H.js";
+} from "./chunk-XQ7UUG7Y.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "./chunk-XEG4WDUD.js";
+} from "./chunk-Q4QXONXL.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-EQTZA7I2.js";
+} from "./chunk-NHYZ7AWK.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.59",
+  "version": "0.1.60",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [

package/styles/@assets/svg/system/line/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.55 5.4L8.45 12L15.55 18.6" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/styles/components/stn-label-prefix.css

@@ -134,6 +134,7 @@
   width: 100%;
 }
 
+
 /* ==========================================================================
    5. Size (sm · md · lg)
    ========================================================================== */

package/styles/components/stn-popup.css

@@ -180,7 +180,7 @@
 }
 
 .stn-pop--xs {
-  --stn-pop-active-width: var(--stn-pop-width-xs, 400px);
+  --stn-pop-active-width: var(--stn-pop-width-xs);
 }
 
 .stn-pop--sm {

package/styles/components/stn-status.css

@@ -611,16 +611,14 @@
 }
 
 /* 4-1. 기본 뱃지 모드 (Badge - Display: sm / md / lg) */
-.stn-status-severity.badge,
 .stn-status-severity:not(.filter) {
   height: var(--stn-severity-badge-height-md, var(--stn-severity-badge-height, var(--stn-size-20, 20px)));
-  padding: var(--stn-severity-badge-padding-md, var(--stn-severity-badge-padding, var(--stn-space-2, 2px) var(--stn-space-8, 8px)));
+  padding: var(--stn-severity-badge-padding-md, var(--stn-severity-badge-padding, var(--stn-space-4, 4px) var(--stn-space-8, 8px)));
   font-size: var(--stn-font-size-11, 11px);
   font-weight: var(--stn-font-weight-bold, 700);
   letter-spacing: -0.1px;
 }
 
-.stn-status-severity.badge .stn-status-severity__icon,
 .stn-status-severity:not(.filter) .stn-status-severity__icon {
   width: var(--stn-severity-badge-icon-size-md, var(--stn-severity-badge-icon-size, var(--stn-size-14, 14px)));
   height: var(--stn-severity-badge-icon-size-md, var(--stn-severity-badge-icon-size, var(--stn-size-14, 14px)));
@@ -629,7 +627,7 @@
 /* Sizes: sm (18px) */
 .stn-status-severity.sm {
   height: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
-  padding: var(--stn-severity-badge-padding-sm, var(--stn-space-2, 2px) var(--stn-space-6, 6px));
+  padding: var(--stn-severity-badge-padding-sm, var(--stn-space-2, 2px) var(--stn-space-4, 4px));
   font-size: var(--stn-font-size-10, 10px);
   gap: var(--stn-space-2, 2px);
 }
@@ -642,7 +640,7 @@
 /* Sizes: md (20px - 기본) */
 .stn-status-severity.md {
   height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
-  padding: var(--stn-severity-badge-padding-md, var(--stn-space-2, 2px) var(--stn-space-8, 8px));
+  padding: var(--stn-severity-badge-padding-md, var(--stn-space-4, 4px) var(--stn-space-8, 8px));
   font-size: var(--stn-font-size-11, 11px);
   gap: var(--stn-space-2, 2px);
 }

package/styles/components/stn-table.css

@@ -11,11 +11,44 @@
   height: 100%;
   background: transparent;
   box-shadow: none;
+  container-type: inline-size;
+  container-name: stn-table-container;
 }
 
 .stn-table__scroll {
   overflow-x: auto;
   position: relative;
+  /* STN 표준 슬림 스크롤 (thin 4px) 규격 연동 */
+  --stn-scroll-width: var(--stn-scroll-width-thin);
+  --stn-scroll-radius: var(--stn-scroll-radius-thin);
+  scrollbar-width: thin;
+  scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
+}
+
+.stn-table__scroll::-webkit-scrollbar {
+  width: var(--stn-scroll-width-thin);
+  height: var(--stn-scroll-width-thin);
+  background: var(--stn-scroll-track);
+}
+
+.stn-table__scroll::-webkit-scrollbar-track {
+  background: var(--stn-scroll-track);
+  border-radius: var(--stn-radius-circle);
+}
+
+.stn-table__scroll::-webkit-scrollbar-thumb {
+  background: var(--stn-scroll-thumb);
+  border-radius: var(--stn-scroll-radius-thin);
+}
+
+.stn-table__scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--stn-scroll-thumb-hover);
+}
+
+.stn-table__scroll::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
 }
 
 /* List view — StnTable `fill` · content_box 남은 높이에 스크롤 영역 채움 */
@@ -147,6 +180,32 @@ td.stn-table__col-check .stn-checkbox {
   }
 }
 
+@media (max-width: 768px) {
+  .stn-table__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    row-gap: var(--stn-spacing-table-footer-gap, var(--stn-space-12));
+    column-gap: var(--stn-spacing-table-footer-actions-gap, var(--stn-space-8));
+  }
+  .stn-table__footer-leading {
+    order: 1;
+    flex: 0 1 auto;
+  }
+  .stn-table__footer-right {
+    order: 2;
+    flex: 0 1 auto;
+    margin-left: auto;
+  }
+  .stn-table__footer-center {
+    order: 3;
+    width: 100%;
+    flex: 1 0 100%;
+    justify-content: center;
+  }
+}
+
 
 /* rowspan · colspan · expand-row (중첩 Path 테이블) */
 .stn-table__grid th[rowspan],
@@ -246,18 +305,20 @@ td.stn-table__col-check .stn-checkbox {
 
 .stn-table thead,
 .stn-table__thead {
-  background: transparent !important;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
 .stn-table thead th,
 .stn-table__thead th {
   position: relative;
   box-sizing: border-box;
-  height: 36px;
-  min-height: 36px;
-  padding: 4px 8px;
-  background: var(--stn-table-th-bg) !important;
-  color: var(--stn-table-th-fg) !important;
+  height: var(--stn-table-th-height);
+  min-height: var(--stn-table-th-height);
+  padding: var(--stn-table-th-padding);
+  background: var(--stn-table-th-bg);
+  color: var(--stn-table-th-fg);
   font-family: var(--stn-font-body);
   font-size: var(--stn-text-body-small-size);
   font-weight: var(--stn-font-weight-regular);
@@ -267,12 +328,17 @@ td.stn-table__col-check .stn-checkbox {
   border: none;
 }
 
+.stn-table thead th[rowspan],
+.stn-table__thead th[rowspan] {
+  height: auto;
+}
+
 .stn-table thead tr th:not(:last-of-type)::after,
 .stn-table__thead th:not(:last-of-type)::after {
   content: '';
   position: absolute;
-  top: 8px;
-  bottom: 8px;
+  top: var(--stn-table-th-divider-inset);
+  bottom: var(--stn-table-th-divider-inset);
   right: 0;
   border-right: 1px solid var(--stn-table-th-border);
 }
@@ -298,10 +364,10 @@ td.stn-table__col-check .stn-checkbox {
 .stn-table tbody td,
 .stn-table__tbody td {
   box-sizing: border-box;
-  height: 36px;
-  min-height: 36px;
+  height: var(--stn-table-row-height);
+  min-height: var(--stn-table-row-height);
   min-width: 0;
-  padding: 4px 8px;
+  padding: var(--stn-table-cell-padding);
   border-bottom: 1px solid var(--stn-table-border);
   background: transparent;
   color: var(--stn-table-td-fg);

package/styles/components/stn-widget.css

@@ -331,18 +331,23 @@
   color: var(--stn-text-primary);
 }
 
+.stn-widget .stn-widget__body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--stn-scroll-thumb) transparent;
+}
 .stn-widget .stn-widget__body::-webkit-scrollbar {
-  width: var(--stn-widget-scrollbar-width, var(--stn-size-4, 4px));
+  width: var(--stn-scroll-width-thin);
+  height: var(--stn-scroll-width-thin);
 }
 .stn-widget .stn-widget__body::-webkit-scrollbar-track {
   background: transparent;
 }
 .stn-widget .stn-widget__body::-webkit-scrollbar-thumb {
-  background: var(--stn-widget-scrollbar);
-  border-radius: var(--stn-widget-scrollbar-radius, var(--stn-radius-4, 4px));
+  background: var(--stn-scroll-thumb);
+  border-radius: var(--stn-scroll-radius-thin);
 }
 .stn-widget .stn-widget__body::-webkit-scrollbar-thumb:hover {
-  background: var(--stn-widget-scrollbar-hover);
+  background: var(--stn-scroll-thumb-hover);
 }
 
 /* dashboard_right widget panel */
@@ -359,6 +364,8 @@
   overflow-x: hidden;
   box-sizing: border-box;
   padding-right: var(--stn-widget-panel-padding-end, var(--stn-space-2, 2px));
+  scrollbar-width: thin;
+  scrollbar-color: var(--stn-scroll-thumb) transparent;
 }
 
 .dashboard_right > .stn-stack {
@@ -373,17 +380,18 @@
 }
 
 .dashboard_right::-webkit-scrollbar {
-  width: var(--stn-widget-panel-scrollbar-width, var(--stn-size-6, 6px));
+  width: var(--stn-scroll-width-thin);
+  height: var(--stn-scroll-width-thin);
 }
 .dashboard_right::-webkit-scrollbar-track {
   background: transparent;
 }
 .dashboard_right::-webkit-scrollbar-thumb {
-  background: var(--stn-widget-panel-scrollbar);
-  border-radius: var(--stn-widget-scrollbar-radius, var(--stn-radius-4, 4px));
+  background: var(--stn-scroll-thumb);
+  border-radius: var(--stn-scroll-radius-thin);
 }
 .dashboard_right::-webkit-scrollbar-thumb:hover {
-  background: var(--stn-widget-panel-scrollbar-hover);
+  background: var(--stn-scroll-thumb-hover);
 }
 
 /* Interactive Hover State */

package/styles/layouts/stn-container.css

@@ -19,33 +19,28 @@
   display: block;
 }
 
-.stn-container--gutters,
-.stn-container:not(.stn-container--disable-gutters) {
+.stn-container,
+.stn-container--gutters {
   padding-left: var(--stn-container-gutter-mobile);
   padding-right: var(--stn-container-gutter-mobile);
 }
 
 @media (min-width: 768px) {
-  .stn-container--gutters,
-  .stn-container:not(.stn-container--disable-gutters) {
+  .stn-container,
+  .stn-container--gutters {
     padding-left: var(--stn-container-gutter-tablet);
     padding-right: var(--stn-container-gutter-tablet);
   }
 }
 
 @media (min-width: 1024px) {
-  .stn-container--gutters,
-  .stn-container:not(.stn-container--disable-gutters) {
+  .stn-container,
+  .stn-container--gutters {
     padding-left: var(--stn-container-gutter-desktop);
     padding-right: var(--stn-container-gutter-desktop);
   }
 }
 
-.stn-container--disable-gutters {
-  padding-left: var(--stn-space-0, 0px) !important;
-  padding-right: var(--stn-space-0, 0px) !important;
-}
-
 /* Fluid max-width. width 100%라서 캡에 닿기 전까지 화면과 같이 늘어난다.
    xs는 breakpoint가 없어서 444px. sm–xl은 STN breakpoint 폭. */
 .stn-container--xs,