@stn-uiux/pub-ui 0.1.73 → 0.1.76

package/styles/components/stn-side-nav.css

@@ -142,6 +142,8 @@ width: auto;
   border-radius: var(--stn-radius-circle);
   background: var(--stn-side-nav-toggle-bg);
   border: var(--stn-side-nav-border-width, 1px) solid var(--stn-side-nav-toggle-border);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   box-shadow: var(--stn-side-nav-toggle-shadow);
   color: var(--stn-side-nav-toggle-fg);
 }
@@ -877,7 +879,7 @@ justify-content: center;
 
 /* 1. Mobile Floating / Header Hamburger Trigger */
 .stn-side-nav__mobile-trigger {
-box-sizing: border-box;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -885,52 +887,70 @@ box-sizing: border-box;
   height: var(--stn-side-nav-mobile-trigger-size);
   padding: 0;
   margin: 0;
-  border-radius: var(--stn-side-nav-mobile-trigger-radius);
-  background: var(--stn-side-nav-mobile-trigger-bg);
+  border-radius: var(--stn-side-nav-mobile-trigger-radius, var(--stn-radius-circle));
+  background: transparent;
   border: var(--stn-side-nav-border-width, 1px) solid var(--stn-side-nav-mobile-trigger-border);
-  color: var(--stn-side-nav-mobile-trigger-color);
+  color: var(--stn-side-nav-mobile-trigger-fg, var(--stn-text-primary));
   box-shadow: var(--stn-side-nav-trigger-shadow);
+  backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
   cursor: pointer;
   outline: none;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    background 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
   z-index: 990;
 }
 
 .stn-side-nav__mobile-trigger:hover {
-  transform: translateY(calc(-1 * var(--stn-side-nav-border-width, 1px)));
+  transform: scale(1.08);
+  background: var(--stn-nav-menu-hover-bg);
+  border-color: var(--stn-side-nav-mobile-trigger-border);
   box-shadow: var(--stn-side-nav-trigger-shadow-hover);
-  border-color: var(--stn-nav-menu-active-border);
 }
 
 .stn-side-nav__mobile-trigger:active {
-  transform: translateY(0);
+  transform: scale(0.95);
+}
+
+.stn-side-nav__mobile-trigger:focus-visible {
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, 1px);
 }
 
 /* Floating mode: screens bottom-left */
-.stn-side-nav__mobile-trigger.floating,
 .stn-side-nav__mobile-trigger.floating {
   position: fixed;
   bottom: var(--stn-side-nav-mobile-trigger-floating-bottom);
   left: var(--stn-side-nav-mobile-trigger-floating-left);
+  background: var(--stn-side-nav-mobile-trigger-bg);
+  border-color: var(--stn-side-nav-mobile-trigger-border);
+  box-shadow: var(--stn-side-nav-trigger-shadow);
+  backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
+  -webkit-backdrop-filter: blur(var(--stn-side-nav-glass-blur, 12px));
   z-index: 995;
 }
 
 /* 데스크톱(> 1024px)에서는 햄버거 버튼 숨김 (사이드바 레일이 직접 표시됨) */
 @media (min-width: 1025px) {
-  .stn-side-nav__mobile-trigger.floating {
-    display: none;
+  .stn-side-nav__mobile-trigger:not(.doc-force-visible) {
+    display: none !important;
   }
 }
 
-/* 모바일 & 태블릿 화면(<= 1024px): stn-wrap 내부에서 헤더 좌상단 햄버거 트리거로 배치 */
-@media (max-width: 1024px) {
-  .stn-wrap .stn-side-nav__mobile-trigger.floating {
-    position: fixed;
-    top: var(--stn-side-nav-mobile-trigger-offset);
-    left: var(--stn-side-nav-mobile-trigger-offset);
-    bottom: auto;
-    z-index: 995;
-  }
+/* 문서 플레이그라운드 및 .doc-force-visible 지정 시 데스크톱에서도 햄버거 버튼 표시 */
+.stn-side-nav__mobile-trigger.doc-force-visible,
+.doc-example .stn-side-nav__mobile-trigger {
+  display: inline-flex !important;
+}
+
+/* StnHeader 내부 통합용 햄버거 버튼 (floating=false 일 때 StnHeader.Left 또는 Right에 자동 정렬) */
+.stn-header .stn-side-nav__mobile-trigger {
+  position: static;
+  flex-shrink: 0;
+  width: var(--stn-btn-height, 36px);
+  height: var(--stn-btn-height, 36px);
 }
 
 /* Hamburger 3-line Icon */
@@ -938,28 +958,32 @@ box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  width: var(--stn-side-nav-hamburger-width);
-  height: var(--stn-side-nav-hamburger-height);
+  width: var(--stn-side-nav-hamburger-width, 16px);
+  height: var(--stn-side-nav-hamburger-height, 12px);
 }
 
 .stn-side-nav__hamburger-bars span {
   display: block;
   width: 100%;
-  height: var(--stn-side-nav-hamburger-bar);
+  height: var(--stn-side-nav-hamburger-bar, 2px);
   background-color: currentColor;
-  border-radius: var(--stn-side-nav-hamburger-bar);
-  transition: transform 0.2s ease,
-    opacity 0.2s ease;
+  border-radius: var(--stn-radius-circle, 9999px);
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.22s ease,
+    background-color 0.2s ease;
 }
 
 .stn-side-nav__mobile-trigger.is-open .stn-side-nav__hamburger-bars span:nth-child(1) {
-  transform: translateY(var(--stn-side-nav-hamburger-bar-spacing)) rotate(45deg);
+  transform: translateY(calc(var(--stn-side-nav-hamburger-bar-spacing, 6px) - 1px)) rotate(45deg);
 }
+
 .stn-side-nav__mobile-trigger.is-open .stn-side-nav__hamburger-bars span:nth-child(2) {
   opacity: 0;
+  transform: scaleX(0);
 }
+
 .stn-side-nav__mobile-trigger.is-open .stn-side-nav__hamburger-bars span:nth-child(3) {
-  transform: translateY(calc(var(--stn-side-nav-hamburger-bar-spacing) * -1)) rotate(-45deg);
+  transform: translateY(calc((var(--stn-side-nav-hamburger-bar-spacing, 6px) - 1px) * -1)) rotate(-45deg);
 }
 /* 2. Mobile Drawer Backdrop Overlay */
 .stn-side-nav__backdrop {
@@ -1037,8 +1061,8 @@ color 0.15s ease;
   color: var(--stn-text-primary);
 }
 
-/* 5. Responsive Mobile Query: <= 768px */
-@media (max-width: 768px) {
+/* 5. Responsive Mobile Query: <= 1024px */
+@media (max-width: 1024px) {
   /* 모바일: PC용 원형 접기 버튼 숨김 — open 시 닫기 버튼은 아래 규칙이 이김 */
   .stn-side-nav__collapse-btn,
   .stn-side-nav__toggle {
@@ -1088,7 +1112,7 @@ color 0.15s ease;
   }
 }
 
-@container stn-list-demo (max-width: 768px) {
+@container stn-list-demo (max-width: 1024px) {
   .stn-side-nav__collapse-btn,
   .stn-side-nav__toggle {
     display: none;

package/styles/components/stn-status.css

@@ -19,7 +19,7 @@
   align-items: center;
   gap: var(--stn-space-6, 6px);
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium, 500);
   line-height: 1;
   color: var(--stn-text-primary);
@@ -50,12 +50,12 @@
   padding: 0 var(--stn-space-6, 6px);
 }
 .stn-status-dot.xs .stn-status-dot__count {
-  font-size: var(--stn-font-size-10, 10px);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
 }
 
 /* sm — 24px (bordered: 버튼 sm과 1:1 일치) */
 .stn-status-dot.sm {
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   gap: var(--stn-space-4, 4px);
 }
 .stn-status-dot.sm .stn-status-dot__point {
@@ -72,7 +72,7 @@
 
 /* md — 32px (기본 · bordered: 버튼 md와 1:1 일치) */
 .stn-status-dot.md {
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   gap: var(--stn-space-6, 6px);
 }
 .stn-status-dot.md .stn-status-dot__point {
@@ -84,12 +84,12 @@
   padding: 0 var(--stn-space-10, 10px);
 }
 .stn-status-dot.md .stn-status-dot__count {
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
 }
 
 /* lg — 40px (bordered: 버튼 lg와 1:1 일치) */
 .stn-status-dot.lg {
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-dot.lg .stn-status-dot__point {
@@ -101,12 +101,12 @@
   padding: 0 var(--stn-space-12, 12px);
 }
 .stn-status-dot.lg .stn-status-dot__count {
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
 }
 
 /* xl — 48px (bordered) */
 .stn-status-dot.xl {
-  font-size: var(--stn-font-size-15, 15px);
+  font-size: var(--stn-text-label-medium-size, var(--stn-font-size-15, 15px));
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-dot.xl .stn-status-dot__point {
@@ -118,7 +118,7 @@
   padding: 0 var(--stn-space-14, 14px);
 }
 .stn-status-dot.xl .stn-status-dot__count {
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
 }
 
 /* 여백(Gap) 조절 */
@@ -153,7 +153,7 @@
   display: inline-flex;
   align-items: center;
   font-family: var(--stn-font-number, var(--stn-font-body));
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-bold, 700);
   line-height: 1;
   color: var(--stn-text-primary);
@@ -259,7 +259,7 @@
   height: 100%;
   box-sizing: border-box;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium, 500);
   color: var(--stn-text-primary);
   user-select: none;
@@ -302,7 +302,7 @@
   background-color: var(--_switch-bg);
   color: var(--_switch-color);
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium, 500);
   cursor: pointer;
   user-select: none;
@@ -475,7 +475,7 @@
 .stn-status-flow.sm .stn-status-flow__badge {
   width: var(--stn-size-16, 16px);
   height: var(--stn-size-16, 16px);
-  font-size: var(--stn-font-size-10, 10px);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
   border-radius: var(--stn-radius-3, 3px);
 }
 .stn-status-flow.sm .stn-status-flow__badge .stn-icon {
@@ -486,7 +486,7 @@
 /* md — 26px (기본) */
 .stn-status-flow.md .stn-status-flow__step {
   height: var(--stn-size-26, 26px);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   padding: 0 var(--stn-space-10, 10px) 0 var(--stn-space-4, 4px);
   gap: var(--stn-space-6, 6px);
 }
@@ -500,14 +500,14 @@
 /* lg — 32px */
 .stn-status-flow.lg .stn-status-flow__step {
   height: var(--stn-size-32, 32px);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   padding: 0 var(--stn-space-12, 12px) 0 var(--stn-space-5, 5px);
   gap: var(--stn-space-8, 8px);
 }
 .stn-status-flow.lg .stn-status-flow__badge {
   width: var(--stn-size-22, 22px);
   height: var(--stn-size-22, 22px);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   border-radius: var(--stn-radius-4, 4px);
 }
 .stn-status-flow.lg .stn-status-flow__badge .stn-icon {
@@ -518,14 +518,14 @@
 /* xl — 36px */
 .stn-status-flow.xl .stn-status-flow__step {
   height: var(--stn-size-36, 36px);
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   padding: 0 var(--stn-space-14, 14px) 0 var(--stn-space-6, 6px);
   gap: var(--stn-space-10, 10px);
 }
 .stn-status-flow.xl .stn-status-flow__badge {
   width: var(--stn-size-26, 26px);
   height: var(--stn-size-26, 26px);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   border-radius: var(--stn-radius-6, 6px);
 }
 .stn-status-flow.xl .stn-status-flow__badge .stn-icon {
@@ -550,7 +550,7 @@
   align-items: center;
   color: var(--stn-status-flow-connector-color);
   opacity: var(--stn-status-flow-connector-opacity);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   user-select: none;
 }
 
@@ -617,7 +617,7 @@
 .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-4, 4px));
-  font-size: var(--stn-font-size-10, 10px);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
   gap: var(--stn-severity-badge-gap-sm, var(--stn-space-2, 2px));
 }
 
@@ -643,7 +643,7 @@
 .stn-status-severity.lg {
   height: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
   padding: var(--stn-severity-badge-padding-lg, var(--stn-space-4, 4px) var(--stn-space-10, 10px));
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   gap: var(--stn-severity-badge-gap-lg, var(--stn-space-4, 4px));
 }
 
@@ -688,7 +688,7 @@
   width: var(--stn-severity-filter-width, var(--stn-size-52, 52px));
   height: var(--stn-severity-filter-height, var(--stn-size-26, 26px));
   padding: var(--stn-space-4, 4px);
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   font-weight: var(--stn-font-weight-bold, 700);
   cursor: pointer;
   background: transparent;

package/styles/components/stn-table.css

@@ -354,6 +354,48 @@ td.stn-table__col-check .stn-checkbox {
   white-space: nowrap;
 }
 
+/* Density Modifiers — 인라인 padding 지정 없이 토큰 기반 조절 */
+.stn-table.stn-table--compact,
+.stn-table--compact .stn-table__grid {
+  --stn-table-cell-padding: var(--stn-space-1) var(--stn-space-2);
+  --stn-table-row-height: var(--stn-size-32);
+}
+
+.stn-table.stn-table--comfortable,
+.stn-table--comfortable .stn-table__grid {
+  --stn-table-cell-padding: var(--stn-space-3) var(--stn-space-4);
+  --stn-table-row-height: var(--stn-size-44);
+}
+
+/* Cell Helper Classes */
+.stn-table__font-number,
+.stn-table td.stn-table__font-number {
+  font-family: var(--stn-font-number);
+}
+
+.stn-table__cell-sub {
+  color: var(--stn-text-secondary);
+}
+
+.stn-table__cell-muted {
+  color: var(--stn-text-tertiary);
+  font-size: var(--stn-text-caption-size);
+}
+
+.stn-table__cell-primary {
+  color: var(--stn-text-primary);
+}
+
+.stn-table__cell-critical {
+  color: var(--stn-critical);
+  font-weight: var(--stn-font-weight-bold);
+}
+
+.stn-table__divider {
+  color: var(--stn-text-tertiary);
+  margin-inline: var(--stn-space-1);
+}
+
 /* align variant — Th/Td `align="left" | "center" | "right"` (기본 center) */
 .stn-table th.stn-table__th--align-left,
 .stn-table td.stn-table__td--align-left {

package/styles/components/stn-tabs.css

@@ -118,7 +118,7 @@
 .stn-tabs.sm .stn-tab {
   height: var(--stn-size-32, 32px);
   padding: 0 var(--stn-space-12, 12px);
-  font-size: var(--stn-font-size-12, 12px);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   border-radius: var(--stn-radius-sm, 6px);
 }
 
@@ -127,7 +127,7 @@
 .stn-tabs:not(.sm):not(.lg) .stn-tab {
   height: var(--stn-size-38, 38px);
   padding: 0 var(--stn-space-16, 16px);
-  font-size: var(--stn-font-size-13, 13px);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   border-radius: var(--stn-radius-md, 8px);
 }
 
@@ -135,7 +135,7 @@
 .stn-tabs.lg .stn-tab {
   height: var(--stn-size-44, 44px);
   padding: 0 var(--stn-space-20, 20px);
-  font-size: var(--stn-font-size-14, 14px);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   border-radius: var(--stn-radius-md, 8px);
 }
 

package/styles/components/stn-tooltip.css

@@ -203,7 +203,7 @@
 
 /* SM: 소형 (높이 20px, 폰트 11px) */
 .stn-tooltip.sm {
-  --stn-tooltip-font-size: var(--stn-font-size-11);
+  --stn-tooltip-font-size: var(--stn-text-caption-small-size, var(--stn-font-size-11, 11px));
   --stn-tooltip-pad-y: var(--stn-space-2);
   --stn-tooltip-pad-x: var(--stn-space-6);
   --stn-tooltip-min-height: var(--stn-size-20);

package/styles/components/stn-widget.css

@@ -268,9 +268,9 @@
 }
 
 /* Widget title size modifiers */
-.stn-widget .stn-widget__title.sm { font-size: var(--stn-font-size-14, 14px); }
-.stn-widget .stn-widget__title.md { font-size: var(--stn-font-size-16, 16px); }
-.stn-widget .stn-widget__title.lg { font-size: var(--stn-font-size-18, 18px); }
+.stn-widget .stn-widget__title.sm { font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px)); }
+.stn-widget .stn-widget__title.md { font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px)); }
+.stn-widget .stn-widget__title.lg { font-size: var(--stn-text-title-medium-size, var(--stn-font-size-18, 18px)); }
 
 /* Widget title weight modifiers */
 .stn-widget .stn-widget__title.regular { font-weight: var(--stn-font-weight-regular, 400); }

package/styles/patterns/stn-alert-center.css

@@ -148,7 +148,7 @@
   border: var(--stn-size-1) solid transparent;
   background: transparent;
   color: var(--stn-text-secondary);
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium);
   cursor: pointer;
   transition: color 0.15s ease;
@@ -294,7 +294,7 @@
 .stn-alert-card__title {
   flex: 1;
   min-width: 0;
-  font-size: var(--stn-font-size-15);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-15, 15px));
   font-weight: var(--stn-font-weight-bold);
   color: var(--stn-text-primary);
   letter-spacing: -0.01em;
@@ -302,7 +302,7 @@
 
 /* 작업/공사 타입 라벨 공통 */
 .stn-alert-card__type-label {
-  font-size: var(--stn-font-size-14);
+  font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   font-weight: var(--stn-font-weight-bold);
   color: var(--stn-text-primary);
 }
@@ -329,7 +329,7 @@
 .stn-alert-card__desc {
   flex: 1;
   min-width: 0;
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   color: var(--stn-text-secondary);
   line-height: var(--stn-line-height-reading);
 }
@@ -429,7 +429,7 @@
 
 /* 시간 텍스트 */
 .stn-alert-card__time {
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-13, 13px));
   color: var(--stn-text-secondary);
   white-space: nowrap;
 }
@@ -446,7 +446,7 @@
   align-items: center;
   gap: var(--stn-space-4);
   color: var(--stn-text-secondary);
-  font-size: var(--stn-font-size-13);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-medium);
   text-decoration: none;
   cursor: pointer;

package/styles/patterns/stn-header.css

@@ -83,7 +83,7 @@
   justify-self: start;
   width: max-content;
   max-width: 100%;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .stn-header__right {
@@ -287,8 +287,8 @@
     flex-shrink: 0;
   }
 
-  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 (단, Page Header는 페이지 타이틀이 핵심이므로 제외) */
-  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left {
+  /* Center(시계/타이틀)가 있는 경우 햄버거 버튼을 제외한 Left 서브 텍스트만 숨겨 중앙 공간 확보 */
+  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left > *:not(.stn-side-nav__mobile-trigger) {
     display: none;
   }
 
@@ -303,7 +303,7 @@
     width: auto;
     min-width: 0;
     max-width: 100%;
-    overflow: hidden;
+    overflow: visible;
     flex: 1 1 auto;
   }
 
@@ -381,8 +381,8 @@
     flex-shrink: 0;
   }
 
-  /* Center(시계/타이틀)가 있는 경우 Left(Breadcrumb/칩 등)를 숨겨 중앙 및 우측 툴바 공간 확보 (단, Page Header는 페이지 타이틀이 핵심이므로 제외) */
-  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left {
+  /* Center(시계/타이틀)가 있는 경우 햄버거 버튼을 제외한 Left 서브 텍스트만 숨겨 중앙 공간 확보 */
+  .stn-header:not(.stn-header--page):has(> .stn-header__center) > .stn-header__left > *:not(.stn-side-nav__mobile-trigger) {
     display: none !important;
   }
 
@@ -397,7 +397,7 @@
     width: auto !important;
     min-width: 0 !important;
     max-width: 100% !important;
-    overflow: hidden !important;
+    overflow: visible !important;
     flex: 1 1 auto !important;
   }
 

package/styles/style-pub.css

@@ -45,6 +45,7 @@
 @import './components/stn-side-nav.css';
 @import './components/stn-header-title.css';
 @import './components/stn-popup.css';
+@import './components/stn-drawer.css';
 @import './components/stn-table.css';
 @import './components/stn-pagination.css';
 @import './components/stn-slider.css';

package/styles/tokens/stn-breakpoint.css

@@ -15,16 +15,4 @@
   --stn-bp-md: 1024px;
   --stn-bp-lg: 1280px;
   --stn-bp-xl: 1440px;
-
-  /* Semantic Layout & Responsive Aliases */
-  --stn-layout-list-split-breakpoint: var(--stn-bp-md);
-  --stn-layout-list-tree-top-max-height: 240px;
-  --stn-table-footer-collapse-breakpoint: var(--stn-bp-sm);
-
-  /* Pagination — 좁은 화면 컴팩트 모드 (@media 480px 기준; CSS @media에서는 리터럴 사용) */
-  --stn-pagination-compact-breakpoint: 480px;
-  --stn-pagination-compact-size: var(--stn-size-28, 28px);
-  --stn-pagination-compact-padding: var(--stn-space-6, 6px);
-  --stn-pagination-compact-font-size: var(--stn-font-size-12, 12px);
-  --stn-pagination-compact-gap: var(--stn-space-4, 4px);
 }

package/styles/tokens/stn-colors-semantic.css

@@ -51,6 +51,7 @@
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-gray-800);
   --stn-elevation-surface-widget: var(--stn-gray-850);
+  --stn-drawer-bg: var(--stn-gray-750);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-950) 50%, transparent);
   --stn-dim-blur: 4px;
   --stn-input-bg: var(--stn-gray-900);
@@ -146,7 +147,7 @@
   --stn-table-row-hover: var(--stn-gray-900);
   --stn-table-td-fg: var(--stn-gray-50);
   --stn-table-th-bg: var(--stn-gray-800);
-  --stn-table-th-fg: var(--stn-gray-350);
+  --stn-table-th-fg: var(--stn-gray-250);
   --stn-table-th-radius: 8px;
   --stn-pagination-active-bg: var(--stn-opacity-white-10);
   --stn-pagination-active-color: var(--stn-gray-50);
@@ -187,7 +188,7 @@
   --stn-header-toolbar-icon: var(--stn-blue-250);
   --stn-header-toolbar-outline-border: var(--stn-blue-600);
   --stn-header-toolbar-outline-fg: var(--stn-gray-50);
-  --stn-nav-menu-active-bg: color-mix(in srgb, var(--stn-static-black) 85%, transparent);
+  --stn-nav-menu-active-bg: var(--stn-opacity-black-10);
   --stn-nav-menu-active-border: var(--stn-blue-350);
   --stn-nav-menu-active-shadow-depth: color-mix(in srgb, var(--stn-static-black) 95%, transparent);
   --stn-nav-menu-active-shadow-highlight: color-mix(in srgb, var(--stn-static-white) 25%, transparent);
@@ -201,7 +202,7 @@
   --stn-side-nav-border: var(--stn-gray-800);
   --stn-side-nav-divider: var(--stn-gray-800);
   --stn-side-nav-shadow: 1px 1px 10px 0 var(--stn-gray-850);
-  --stn-side-nav-toggle-bg: var(--stn-gray-950);
+  --stn-side-nav-toggle-bg: var(--stn-opacity-black-50);
   --stn-side-nav-toggle-border: var(--stn-gray-800);
   --stn-side-nav-toggle-fg: var(--stn-static-white);
   --stn-side-nav-toggle-shadow: -1px -1px 3px 0 color-mix(in srgb, var(--stn-static-white) 12%, transparent), 1px 1px 4px 0 color-mix(in srgb, var(--stn-static-black) 70%, transparent);
@@ -219,9 +220,9 @@
   --stn-side-nav-sub-btn-hover-border: var(--stn-opacity-white-20);
   --stn-btn-disabled-bg: var(--stn-gray-750);
   --stn-btn-disabled-fg: var(--stn-gray-400);
-  --stn-btn-ghost-bg: color-mix(in srgb, var(--stn-static-white) 5%, transparent);
-  --stn-btn-ghost-bg-hover: color-mix(in srgb, var(--stn-static-white) 10%, transparent);
-  --stn-btn-ghost-bg-pressed: color-mix(in srgb, var(--stn-static-white) 15%, transparent);
+  --stn-btn-ghost-bg: var(--stn-opacity-white-5);
+  --stn-btn-ghost-bg-hover: var(--stn-opacity-white-10);
+  --stn-btn-ghost-bg-pressed: var(--stn-opacity-white-15);
   --stn-btn-ghost-fg: var(--stn-gray-100);
   --stn-btn-outlined-border: var(--stn-blue-250);
   --stn-btn-outlined-border-hover: var(--stn-blue-350);
@@ -390,7 +391,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-400);
-  --stn-chip-neutral: var(--stn-gray-400);
+  --stn-chip-neutral: var(--stn-gray-200);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -443,9 +444,9 @@
   --stn-side-nav-glass-bg: var(--stn-opacity-black-25);
   --stn-side-nav-glass-shadow: 1px 1px 10px 0 var(--stn-gray-850);
   --stn-side-nav-glass-border: color-mix(in srgb, var(--stn-static-white) 6%, transparent);
-  --stn-side-nav-mobile-trigger-bg: var(--stn-gray-900);
-  --stn-side-nav-mobile-trigger-border: var(--stn-gray-700);
-  --stn-side-nav-mobile-trigger-fg: var(--stn-static-white);
+  --stn-side-nav-mobile-trigger-bg: color-mix(in srgb, var(--stn-gray-900) 65%, transparent);
+  --stn-side-nav-mobile-trigger-border: color-mix(in srgb, var(--stn-static-white) 14%, transparent);
+  --stn-side-nav-mobile-trigger-fg: var(--stn-gray-100);
   --stn-side-nav-mobile-backdrop: var(--stn-opacity-black-65);
   --stn-side-nav-drawer-shadow: 8px 0 32px var(--stn-opacity-black-45);
   --stn-side-nav-trigger-shadow: 0 4px 16px var(--stn-opacity-black-30);
@@ -659,6 +660,7 @@
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-static-white);
   --stn-elevation-surface-widget: var(--stn-static-white);
+  --stn-drawer-bg: var(--stn-static-white);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-900) 20%, transparent);
   --stn-dim-blur: 2px;
   --stn-input-bg: var(--stn-static-white);
@@ -1000,7 +1002,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-500);
-  --stn-chip-neutral: var(--stn-gray-400);
+  --stn-chip-neutral: var(--stn-gray-500);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -1053,8 +1055,8 @@
   --stn-side-nav-glass-bg: var(--stn-opacity-white-40);
   --stn-side-nav-glass-shadow: 1px 1px 10px 0 var(--stn-gray-150);
   --stn-side-nav-glass-border: var(--stn-gray-150);
-  --stn-side-nav-mobile-trigger-bg: var(--stn-static-white);
-  --stn-side-nav-mobile-trigger-border: var(--stn-gray-200);
+  --stn-side-nav-mobile-trigger-bg: color-mix(in srgb, var(--stn-static-white) 75%, transparent);
+  --stn-side-nav-mobile-trigger-border: color-mix(in srgb, var(--stn-gray-900) 12%, transparent);
   --stn-side-nav-mobile-trigger-fg: var(--stn-gray-900);
   --stn-side-nav-mobile-backdrop: var(--stn-opacity-white-65);
   --stn-side-nav-drawer-shadow: 8px 0 32px var(--stn-opacity-black-20);