@stn-uiux/pub-ui 0.1.68 → 0.1.70

package/styles/components/stn-dropdown.css

@@ -173,6 +173,26 @@
   border-bottom: var(--stn-size-1, 1px) solid var(--stn-feedback-error);
 }
 
+/* 3-5. Translucent (반투명 — 배경 비침 & 블러) */
+.stn-dropdown.translucent>.selected {
+  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
+  background-color: var(--stn-dropdown-bg-translucent, var(--stn-opacity-black-25));
+  color: var(--stn-input-fg, var(--stn-text-primary));
+  backdrop-filter: blur(var(--stn-dropdown-translucent-blur, 8px));
+  -webkit-backdrop-filter: blur(var(--stn-dropdown-translucent-blur, 8px));
+}
+
+.stn-dropdown.translucent:hover:not(.is-disabled)>.selected {
+  border-color: var(--stn-border-strong, var(--stn-gray-400));
+  background-color: color-mix(in srgb, var(--stn-dropdown-bg-translucent, var(--stn-opacity-black-25)) 75%, var(--stn-static-white) 25%);
+}
+
+.stn-dropdown.translucent.on>.selected,
+.stn-dropdown.translucent:focus-within>.selected {
+  border: var(--stn-input-focus);
+  background-color: color-mix(in srgb, var(--stn-dropdown-bg-translucent, var(--stn-opacity-black-25)) 80%, var(--stn-primary) 20%);
+}
+
 /* ==========================================================================
    4. Prop: state (Normal · Focus/Open · Disabled · Error · ReadOnly)
    ========================================================================== */

package/styles/components/stn-status.css

@@ -36,7 +36,7 @@
 }
 
 /* Size 스케일 — STN 표준 규격: xs · sm · md(기본) · lg · xl */
-/* xs — 18px */
+/* xs — 20px (bordered) */
 .stn-status-dot.xs {
   font-size: var(--stn-font-size-11, 11px);
   gap: var(--stn-space-4, 4px);
@@ -46,14 +46,14 @@
   height: var(--stn-size-6, 6px);
 }
 .stn-status-dot.xs.bordered {
-  height: var(--stn-size-18, 18px);
+  height: var(--stn-size-20, 20px);
   padding: 0 var(--stn-space-6, 6px);
 }
 .stn-status-dot.xs .stn-status-dot__count {
   font-size: var(--stn-font-size-10, 10px);
 }
 
-/* sm — 20px */
+/* sm — 24px (bordered: 버튼 sm과 1:1 일치) */
 .stn-status-dot.sm {
   font-size: var(--stn-font-size-12, 12px);
   gap: var(--stn-space-4, 4px);
@@ -63,14 +63,14 @@
   height: var(--stn-size-7, 7px);
 }
 .stn-status-dot.sm.bordered {
-  height: var(--stn-size-20, 20px);
-  padding: 0 var(--stn-space-6, 6px);
+  height: var(--stn-size-24, 24px);
+  padding: 0 var(--stn-space-8, 8px);
 }
 .stn-status-dot.sm .stn-status-dot__count {
   font-size: var(--stn-font-size-11, 11px);
 }
 
-/* md — 24px (기본) */
+/* md — 32px (기본 · bordered: 버튼 md와 1:1 일치) */
 .stn-status-dot.md {
   font-size: var(--stn-font-size-13, 13px);
   gap: var(--stn-space-6, 6px);
@@ -80,14 +80,14 @@
   height: var(--stn-size-8, 8px);
 }
 .stn-status-dot.md.bordered {
-  height: var(--stn-size-24, 24px);
-  padding: 0 var(--stn-space-8, 8px);
+  height: var(--stn-size-32, 32px);
+  padding: 0 var(--stn-space-10, 10px);
 }
 .stn-status-dot.md .stn-status-dot__count {
   font-size: var(--stn-font-size-12, 12px);
 }
 
-/* lg — 28px */
+/* lg — 40px (bordered: 버튼 lg와 1:1 일치) */
 .stn-status-dot.lg {
   font-size: var(--stn-font-size-14, 14px);
   gap: var(--stn-space-8, 8px);
@@ -97,14 +97,14 @@
   height: var(--stn-size-10, 10px);
 }
 .stn-status-dot.lg.bordered {
-  height: var(--stn-size-28, 28px);
-  padding: 0 var(--stn-space-10, 10px);
+  height: var(--stn-size-40, 40px);
+  padding: 0 var(--stn-space-12, 12px);
 }
 .stn-status-dot.lg .stn-status-dot__count {
   font-size: var(--stn-font-size-13, 13px);
 }
 
-/* xl — 32px */
+/* xl — 48px (bordered) */
 .stn-status-dot.xl {
   font-size: var(--stn-font-size-15, 15px);
   gap: var(--stn-space-8, 8px);
@@ -114,8 +114,8 @@
   height: var(--stn-size-10, 10px);
 }
 .stn-status-dot.xl.bordered {
-  height: var(--stn-size-32, 32px);
-  padding: 0 var(--stn-space-12, 12px);
+  height: var(--stn-size-48, 48px);
+  padding: 0 var(--stn-space-14, 14px);
 }
 .stn-status-dot.xl .stn-status-dot__count {
   font-size: var(--stn-font-size-14, 14px);
@@ -128,13 +128,13 @@
 .stn-status-dot.gap-md { gap: var(--stn-space-6, 6px); }
 .stn-status-dot.gap-lg { gap: var(--stn-space-10, 10px); }
 
-/* 단독 테두리 캡슐 모드 (Bordered Dot) */
+/* 단독 테두리 캡슐 모드 (Bordered Dot: 기본 md 32px) */
 .stn-status-dot.bordered {
-  height: var(--stn-size-24, 24px);
-  padding: 0 var(--stn-space-8, 8px);
+  height: var(--stn-size-32, 32px);
+  padding: 0 var(--stn-space-10, 10px);
   border-radius: var(--stn-radius-chip-pill, 9999px);
-  border: 1px solid var(--stn-status-dot-bordered-border);
-  background-color: var(--stn-layer-bg-card);
+  border: 1px solid var(--stn-status-dot-bordered-border, var(--stn-border-subtle));
+  background-color: var(--stn-status-dot-bordered-bg, var(--stn-layer-bg-card, transparent));
   box-sizing: border-box;
 }
 
@@ -254,8 +254,8 @@
 .stn-status-dot-group.bordered {
   height: var(--stn-size-26, 26px);
   border-radius: var(--stn-radius-chip-pill, 9999px);
-  border: 1px solid var(--stn-status-dot-bordered-border);
-  background-color: var(--stn-layer-bg-card);
+  border: 1px solid var(--stn-status-dot-bordered-border, var(--stn-border-subtle));
+  background-color: var(--stn-status-dot-bordered-bg, var(--stn-layer-bg-card, transparent));
   box-shadow: none;
   overflow: hidden;
 }
@@ -272,7 +272,7 @@
   font-weight: var(--stn-font-weight-medium, 500);
   color: var(--stn-text-primary);
   user-select: none;
-  border-right: 1px solid var(--stn-status-dot-bordered-border);
+  border-right: 1px solid var(--stn-status-dot-bordered-border, var(--stn-border-subtle));
   transition: opacity 0.2s ease, background-color 0.15s ease;
 }
 
@@ -596,7 +596,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--stn-space-2, 2px);
+  gap: var(--stn-severity-badge-gap, var(--stn-space-4, 4px));
   border-radius: var(--stn-radius-4, 4px);
   font-family: var(--stn-font-body, Pretendard, sans-serif);
   line-height: 1.2;
@@ -631,7 +631,7 @@
   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);
-  gap: var(--stn-space-2, 2px);
+  gap: var(--stn-severity-badge-gap-sm, var(--stn-space-2, 2px));
 }
 
 .stn-status-severity.sm .stn-status-severity__icon {
@@ -644,7 +644,7 @@
   height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
   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);
+  gap: var(--stn-severity-badge-gap-md, var(--stn-space-4, 4px));
 }
 
 .stn-status-severity.md .stn-status-severity__icon {
@@ -657,7 +657,7 @@
   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);
-  gap: var(--stn-space-4, 4px);
+  gap: var(--stn-severity-badge-gap-lg, var(--stn-space-4, 4px));
 }
 
 .stn-status-severity.lg .stn-status-severity__icon {

package/styles/components/stn-tabs.css

@@ -0,0 +1,412 @@
+@charset "utf-8";
+/**
+ * StnTabs — 탭 내비게이션 (Tabs, Tab, TabPanel)
+ *
+ * Classes:
+ *   - Container: `.stn-tabs`
+ *   - Scroll area: `.stn-tabs__scroller`
+ *   - Tab List: `.stn-tabs__list`
+ *   - Tab item: `.stn-tab`
+ *   - Floating indicator: `.stn-tabs__indicator`
+ *   - Scroll buttons: `.stn-tabs__scroll-button`
+ *   - Panel: `.stn-tab-panel`
+ *
+ * Variants:
+ *   - `line` (기본): 하단 2px 밑줄 인디케이터가 부드럽게 이동
+ *
+ * Sizes:
+ *   - `sm`: height 32px, font 12px
+ *   - `md` (기본): height 38px, font 13px
+ *   - `lg`: height 44px, font 14px
+ */
+
+/* ==========================================================================
+   1. StnTabs Container
+   ========================================================================== */
+.stn-tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  user-select: none;
+  background-color: transparent;
+  border-bottom: 1px solid var(--stn-border-subtle);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.stn-tabs.line {
+  border-bottom: 1px solid var(--stn-border-subtle);
+}
+
+/* Full Width (stretch tabs) */
+.stn-tabs.full .stn-tabs__list {
+  width: 100%;
+}
+.stn-tabs.full .stn-tab {
+  flex: 1 1 0%;
+  text-align: center;
+  justify-content: center;
+}
+
+/* Centered Tabs */
+.stn-tabs.centered .stn-tabs__list {
+  justify-content: center;
+}
+
+/* ==========================================================================
+   2. Scroller & Tab List
+   ========================================================================== */
+.stn-tabs__scroller {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch; /* iOS Safari 관성 스크롤 */
+  touch-action: pan-x; /* 모바일 가로 제스처 최적화 */
+  overscroll-behavior-x: contain;
+  scrollbar-width: none; /* Hide scrollbar Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.stn-tabs__scroller::-webkit-scrollbar {
+  display: none; /* Hide scrollbar Chrome/Safari */
+}
+
+.stn-tabs__list {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: fit-content;
+}
+
+/* ==========================================================================
+   3. Tab Item (.stn-tab)
+   ========================================================================== */
+.stn-tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-space-6, 6px);
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--stn-text-tertiary);
+  font-family: var(--stn-font-body, Pretendard, sans-serif);
+  font-weight: var(--stn-font-weight-medium, 500);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Size: sm */
+.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);
+  border-radius: var(--stn-radius-sm, 6px);
+}
+
+/* Size: md (기본) */
+.stn-tabs.md .stn-tab,
+.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);
+  border-radius: var(--stn-radius-md, 8px);
+}
+
+/* Size: lg */
+.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);
+  border-radius: var(--stn-radius-md, 8px);
+}
+
+/* Wrapped Labels (긴 텍스트 2줄 자동 줄바꿈) */
+.stn-tab.is-wrapped {
+  white-space: normal;
+  line-height: var(--stn-line-height-tight, 1.35);
+  text-align: center;
+  max-width: 260px;
+  min-height: var(--stn-size-48, 48px);
+  height: auto;
+  padding-top: var(--stn-space-6, 6px);
+  padding-bottom: var(--stn-space-6, 6px);
+}
+
+.stn-tab.is-wrapped .stn-tab__label {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+}
+
+/* Hover State */
+.stn-tab:hover:not(.is-disabled) {
+  color: var(--stn-text-primary);
+}
+
+/* Focus Visible */
+.stn-tab:focus-visible {
+  outline: var(--stn-focus-ring-width, var(--stn-size-2, 2px)) solid var(--stn-focus-ring);
+  outline-offset: -2px;
+}
+
+/* Active / Selected State */
+.stn-tab.is-active {
+  color: var(--stn-primary, var(--stn-blue-400));
+  font-weight: var(--stn-font-weight-semibold, 600);
+}
+
+/* Disabled State */
+.stn-tab.is-disabled {
+  cursor: not-allowed;
+  opacity: var(--stn-disabled-opacity, 0.45);
+  pointer-events: none;
+}
+
+
+/* Icon in Tab */
+.stn-tab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.stn-tab__icon > svg,
+.stn-tab__icon > img,
+.stn-tab__icon > .stn-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Icon Sizes */
+.stn-tab__icon.icon-sm {
+  width: var(--stn-size-14, 14px);
+  height: var(--stn-size-14, 14px);
+}
+
+.stn-tab__icon.icon-md {
+  width: var(--stn-size-18, 18px);
+  height: var(--stn-size-18, 18px);
+}
+
+.stn-tab__icon.icon-lg {
+  width: var(--stn-size-22, 22px);
+  height: var(--stn-size-22, 22px);
+}
+
+/* Icon Positions: start (기본), end, top, bottom */
+.stn-tab.icon-top {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--stn-space-4, 4px);
+  min-height: var(--stn-size-48, 48px);
+  height: auto;
+  padding-top: var(--stn-space-8, 8px);
+  padding-bottom: var(--stn-space-8, 8px);
+}
+
+.stn-tab.icon-bottom {
+  flex-direction: column-reverse;
+  justify-content: center;
+  gap: var(--stn-space-4, 4px);
+  min-height: var(--stn-size-48, 48px);
+  height: auto;
+  padding-top: var(--stn-space-8, 8px);
+  padding-bottom: var(--stn-space-8, 8px);
+}
+
+.stn-tab.icon-end {
+  flex-direction: row-reverse;
+}
+
+/* Icon-only Tab (정방형 비율 & 툴팁 호환) */
+.stn-tab.icon-only {
+  padding: 0;
+  aspect-ratio: 1 / 1;
+}
+
+.stn-tabs.sm .stn-tab.icon-only {
+  width: var(--stn-size-32, 32px);
+  min-width: var(--stn-size-32, 32px);
+}
+
+.stn-tabs.md .stn-tab.icon-only,
+.stn-tabs:not(.sm):not(.lg) .stn-tab.icon-only {
+  width: var(--stn-size-38, 38px);
+  min-width: var(--stn-size-38, 38px);
+}
+
+.stn-tabs.lg .stn-tab.icon-only {
+  width: var(--stn-size-44, 44px);
+  min-width: var(--stn-size-44, 44px);
+}
+
+/* Badge / Count in Tab — StnChip 'sm' 표준 규격 1:1 연동 */
+.stn-tab__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--stn-chip-height-sm, 20px);
+  height: var(--stn-chip-height-sm, 20px);
+  padding: 0 var(--stn-chip-padding-x-sm, 6px);
+  border-radius: var(--stn-radius-chip-pill, 9999px);
+  font-size: var(--stn-chip-font-size-sm, 11px);
+  font-family: var(--stn-font-number, Pretendard, sans-serif);
+  font-weight: var(--stn-font-weight-bold, 700);
+  line-height: 1;
+  background-color: var(--stn-tab-badge-bg);
+  color: var(--stn-tab-badge-fg);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.stn-tab.is-active .stn-tab__badge {
+  background-color: color-mix(in srgb, var(--stn-primary) 18%, transparent);
+  color: var(--stn-primary);
+}
+
+.stn-tab__extra {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+/* ==========================================================================
+   4. Floating Animated Indicator (.stn-tabs__indicator)
+   ========================================================================== */
+.stn-tabs__indicator {
+  position: absolute;
+  pointer-events: none;
+  z-index: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: var(--stn-primary);
+  border-radius: var(--stn-radius-pill, 2px);
+  transition:
+    left 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
+    width 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
+    transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
+    opacity 0.2s ease;
+}
+
+/* ==========================================================================
+   5. Scroll Buttons (.stn-tabs__scroll-button)
+   ========================================================================== */
+.stn-tabs__scroll-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stn-size-32, 32px);
+  height: 100%;
+  min-height: var(--stn-size-32, 32px);
+  background: transparent;
+  border: none;
+  color: var(--stn-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  outline: none;
+  z-index: 2;
+  transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
+  border-radius: var(--stn-radius-sm, 6px);
+}
+
+.stn-tabs__scroll-button:hover:not(:disabled) {
+  color: var(--stn-text-primary);
+  background-color: color-mix(in srgb, var(--stn-text-primary) 8%, transparent);
+}
+
+.stn-tabs__scroll-button:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.stn-tabs__scroll-button.start {
+  margin-right: var(--stn-space-2, 2px);
+}
+
+.stn-tabs__scroll-button.end {
+  margin-left: var(--stn-space-2, 2px);
+}
+
+/* Fade Edges when scrollable */
+.stn-tabs.is-scrollable.has-scroll-start .stn-tabs__scroller {
+  mask-image: linear-gradient(to right, transparent, black 28px, black 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black 100%);
+}
+
+.stn-tabs.is-scrollable.has-scroll-end .stn-tabs__scroller {
+  mask-image: linear-gradient(to left, transparent, black 28px, black 100%);
+  -webkit-mask-image: linear-gradient(to left, transparent, black 28px, black 100%);
+}
+
+.stn-tabs.is-scrollable.has-scroll-start.has-scroll-end .stn-tabs__scroller {
+  mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent 100%);
+}
+
+/* ==========================================================================
+   6. Tab Panel (.stn-tab-panel)
+   ========================================================================== */
+.stn-tab-panel {
+  box-sizing: border-box;
+  width: 100%;
+  outline: none;
+  animation: stn-tab-panel-fade-in 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.stn-tab-panel[hidden] {
+  display: none !important;
+}
+
+/* Padding Presets */
+.stn-tab-panel.padding-none {
+  padding: 0;
+}
+
+.stn-tab-panel.padding-sm {
+  padding: var(--stn-space-8, 8px);
+}
+
+.stn-tab-panel.padding-md {
+  padding: var(--stn-space-16, 16px);
+}
+
+.stn-tab-panel.padding-lg {
+  padding: var(--stn-space-24, 24px);
+}
+
+@keyframes stn-tab-panel-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/styles/components/stn-widget.css

@@ -267,6 +267,17 @@
   text-overflow: ellipsis;
 }
 
+/* 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); }
+
+/* Widget title weight modifiers */
+.stn-widget .stn-widget__title.regular { font-weight: var(--stn-font-weight-regular, 400); }
+.stn-widget .stn-widget__title.medium { font-weight: var(--stn-font-weight-medium, 500); }
+.stn-widget .stn-widget__title.semibold { font-weight: var(--stn-font-weight-semibold, 600); }
+.stn-widget .stn-widget__title.bold { font-weight: var(--stn-font-weight-bold, 700); }
+
 /* 다중 액션 또는 좁은 카드에서 개행을 허용한 경우 (BEM 표준: wrapActions / .stn-widget__head--wrap) */
 .stn-widget--wrap-actions .stn-widget__head,
 .stn-widget .stn-widget__head--wrap {
@@ -648,10 +659,31 @@
   background-color: var(--stn-widget-footer-well-bg);
 }
 
+.stn-widget .stn-widget__body.stn-widget__body--no-scroll,
 .stn-widget__body--no-scroll {
   overflow: hidden;
 }
 
+/* ==========================================================================
+   StnWidget Fit Dimensions (fullHeight=false / fullWidth=false)
+   ========================================================================== */
+.stn-widget.stn-widget--fit-height {
+  height: auto;
+  flex-grow: 0;
+}
+
+.stn-widget.stn-widget--fit-height > .stn-widget__body {
+  height: auto;
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
+.stn-widget.stn-widget--fit-width {
+  width: auto;
+  max-width: fit-content;
+  flex-grow: 0;
+}
+
 /* ==========================================================================
    StnWidget Header Period Helpers
    ========================================================================== */

package/styles/layouts/stn-layer1-content.css

@@ -385,8 +385,8 @@
     justify-content: space-between !important;
   }
 
-  /* 테이블 영역 모바일 최소 높이 보장 */
-  .stn-layer-1__body .stn-container > .stn-stack > .stn-stack {
+  /* 테이블 영역 모바일 최소 높이 보장 (LNB 목록 레이아웃 전용) */
+  :is(.stn-layer-1:has(.stn-list-lnb), .stn-layer-1__body:has(.stn-list-lnb)) .stn-container > .stn-stack > .stn-stack {
     height: auto !important;
     min-height: var(--stn-layout-list-mobile-table-min-height);
   }

package/styles/style-pub.css

@@ -70,6 +70,7 @@
 @import './components/stn-card.css';
 @import './components/stn-topology.css';
 @import './components/stn-status.css';
+@import './components/stn-tabs.css';
 
 /* --- 5. Patterns (Composite UI Recipes) --- */
 @import './patterns/stn-section-side.css';