@stn-uiux/pub-ui 0.1.73 → 0.1.76

package/styles/components/stn-breadcrumb.css

@@ -12,13 +12,13 @@
  */
 
 .stn-breadcrumb {
-  --stn-breadcrumb-gap: var(--stn-space-16, 16px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-8, 8px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-14, 14px);
-  --stn-breadcrumb-icon-size: var(--stn-size-16, 16px);
-  --stn-breadcrumb-sep-size: var(--stn-size-12, 12px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-md, var(--stn-space-16, 16px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-md, var(--stn-space-8, 8px));
+  --stn-breadcrumb-font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-md, var(--stn-size-16, 16px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-md, var(--stn-size-12, 12px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-md, var(--stn-size-24, 24px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-8, 8px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-md, var(--stn-space-8, 8px));
 
   box-sizing: border-box;
   color: var(--stn-breadcrumb-fg);
@@ -26,33 +26,33 @@
 }
 
 .stn-breadcrumb.sm {
-  --stn-breadcrumb-gap: var(--stn-space-8, 8px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-4, 4px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-12, 12px);
-  --stn-breadcrumb-icon-size: var(--stn-size-14, 14px);
-  --stn-breadcrumb-sep-size: var(--stn-size-10, 10px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-sm, var(--stn-space-8, 8px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-sm, var(--stn-space-4, 4px));
+  --stn-breadcrumb-font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-sm, var(--stn-size-14, 14px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-sm, var(--stn-size-10, 10px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-sm, var(--stn-size-20, 20px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-6, 6px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-sm, var(--stn-space-6, 6px));
 }
 
 .stn-breadcrumb.md {
-  --stn-breadcrumb-gap: var(--stn-space-16, 16px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-8, 8px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-14, 14px);
-  --stn-breadcrumb-icon-size: var(--stn-size-16, 16px);
-  --stn-breadcrumb-sep-size: var(--stn-size-12, 12px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-md, var(--stn-space-16, 16px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-md, var(--stn-space-8, 8px));
+  --stn-breadcrumb-font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-md, var(--stn-size-16, 16px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-md, var(--stn-size-12, 12px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-md, var(--stn-size-24, 24px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-8, 8px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-md, var(--stn-space-8, 8px));
 }
 
 .stn-breadcrumb.lg {
-  --stn-breadcrumb-gap: var(--stn-space-24, 24px);
-  --stn-breadcrumb-segment-gap: var(--stn-space-12, 12px);
-  --stn-breadcrumb-font-size: var(--stn-font-size-16, 16px);
-  --stn-breadcrumb-icon-size: var(--stn-size-18, 18px);
-  --stn-breadcrumb-sep-size: var(--stn-size-14, 14px);
+  --stn-breadcrumb-gap: var(--stn-breadcrumb-gap-lg, var(--stn-space-24, 24px));
+  --stn-breadcrumb-segment-gap: var(--stn-breadcrumb-segment-gap-lg, var(--stn-space-12, 12px));
+  --stn-breadcrumb-font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px));
+  --stn-breadcrumb-icon-size: var(--stn-breadcrumb-icon-size-lg, var(--stn-size-18, 18px));
+  --stn-breadcrumb-sep-size: var(--stn-breadcrumb-sep-size-lg, var(--stn-size-14, 14px));
   --stn-breadcrumb-chip-height: var(--stn-chip-height-lg, var(--stn-size-28, 28px));
-  --stn-breadcrumb-chip-pad-x: var(--stn-space-12, 12px);
+  --stn-breadcrumb-chip-pad-x: var(--stn-breadcrumb-chip-pad-x-lg, var(--stn-space-12, 12px));
 }
 
 .stn-breadcrumb__list {
@@ -89,7 +89,7 @@
   margin: 0;
   padding: 0;
   border: 0;
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm, var(--stn-radius-4, 4px));
   background: transparent;
   color: inherit;
   font: inherit;
@@ -131,8 +131,8 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 .stn-breadcrumb__segment:focus-visible,
 .stn-breadcrumb .collapsed:focus-visible,
 .stn-breadcrumb__back:focus-visible {
-  outline: 2px solid var(--stn-focus-ring);
-  outline-offset: 1px;
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, 1px);
 }
 
 .stn-breadcrumb__icon-glyph {
@@ -214,12 +214,12 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   z-index: var(--stn-dropdown-menu-z, 150);
   display: flex;
   flex-direction: column;
-  min-width: var(--stn-size-120, 120px);
+  min-width: var(--stn-input-w120, var(--stn-size-120, 120px));
   margin: 0;
   padding: var(--stn-space-4, 4px);
   list-style: none;
   border: 1px solid var(--stn-pop-border);
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm, var(--stn-radius-4, 4px));
   background: var(--stn-dropdown-menu-bg, var(--stn-pop-surface));
   box-shadow: var(--stn-pop-shadow);
 }
@@ -233,7 +233,7 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   margin: 0;
   padding: var(--stn-space-8, 8px);
   border: 0;
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm, var(--stn-radius-4, 4px));
   background: transparent;
   color: var(--stn-pop-title, inherit);
   font: inherit;
@@ -313,7 +313,7 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
   background: color-mix(in srgb, var(--stn-breadcrumb-fg) 16%, transparent);
 }
 
-/* Compact — 좁은 폭: 아이콘만 (라벨 숨김). 아이콘 없는 세그먼트는 라벨 유지 */
+/* Compact — STN Breakpoint md (1024px) 미만 좁은 화면: 아이콘만 (라벨 숨김). 아이콘 없는 세그먼트는 라벨 유지 */
 .stn-breadcrumb--icon-only .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph) .stn-breadcrumb__label,
 .stn-breadcrumb--icon-only .stn-breadcrumb__back .stn-breadcrumb__label {
   position: absolute;
@@ -334,9 +334,10 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 
 .stn-breadcrumb--icon-only.chip .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph),
 .stn-breadcrumb--icon-only.chip .stn-breadcrumb__back {
-  padding-inline: var(--stn-space-6, 6px);
+  padding-inline: var(--stn-space-6);
 }
 
+/* STN Viewport Breakpoint md (1024px) 미만 기준 - CSS media query는 var() 미지원이므로 1023px 리터럴 명시 */
 @media (max-width: 1023px) {
   .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph) .stn-breadcrumb__label,
   .stn-breadcrumb__back .stn-breadcrumb__label {
@@ -358,10 +359,11 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 
   .stn-breadcrumb.chip .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph),
   .stn-breadcrumb.chip .stn-breadcrumb__back {
-    padding-inline: var(--stn-space-6, 6px);
+    padding-inline: var(--stn-space-6);
   }
 }
 
+/* Container Query: stn-header 컨테이너 1024px(md) 미만 */
 @container stn-header (max-width: 1023px) {
   .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph) .stn-breadcrumb__label,
   .stn-breadcrumb__back .stn-breadcrumb__label {
@@ -383,6 +385,7 @@ a.stn-breadcrumb__segment:hover .stn-breadcrumb__label {
 
   .stn-breadcrumb.chip .stn-breadcrumb__segment:has(.stn-breadcrumb__icon-glyph),
   .stn-breadcrumb.chip .stn-breadcrumb__back {
-    padding-inline: var(--stn-space-6, 6px);
+    padding-inline: var(--stn-space-6);
   }
 }
+

package/styles/components/stn-card.css

@@ -31,6 +31,27 @@
   box-shadow: var(--stn-card-shadow);
 }
 
+/* Severity Tint Surfaces (critical · major · minor · warning) */
+.stn-card.severity-critical {
+  background-color: var(--stn-severity-critical-bg);
+  border: 1px solid var(--stn-severity-critical-border);
+}
+
+.stn-card.severity-major {
+  background-color: var(--stn-severity-major-bg);
+  border: 1px solid var(--stn-severity-major-border);
+}
+
+.stn-card.severity-minor {
+  background-color: var(--stn-severity-minor-bg);
+  border: 1px solid var(--stn-severity-minor-border);
+}
+
+.stn-card.severity-warning {
+  background-color: var(--stn-severity-warning-bg);
+  border: 1px solid var(--stn-severity-warning-border);
+}
+
 /* Radius */
 .stn-card.radius-sm { border-radius: var(--stn-radius-8, 8px); }
 .stn-card.radius-md { border-radius: var(--stn-radius-12, 12px); }
@@ -99,9 +120,9 @@
 }
 
 /* Card title size modifiers */
-.stn-card__header-title.sm { font-size: var(--stn-font-size-14, 14px); }
-.stn-card__header-title.md { font-size: var(--stn-font-size-16, 16px); }
-.stn-card__header-title.lg { font-size: var(--stn-font-size-18, 18px); }
+.stn-card__header-title.sm { font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px)); }
+.stn-card__header-title.md { font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px)); }
+.stn-card__header-title.lg { font-size: var(--stn-text-title-medium-size, var(--stn-font-size-18, 18px)); }
 
 /* Card title weight modifiers */
 .stn-card__header-title.regular { font-weight: var(--stn-font-weight-regular, 400); }

package/styles/components/stn-date-picker.css

@@ -16,7 +16,7 @@
   --calendar-disabled-font: var(--stn-date-picker-disabled-fg);
 
   position: fixed;
-  z-index: 1300;
+  z-index: var(--stn-elevation-z-dropdown);
   box-sizing: border-box;
   border: var(--stn-size-1) solid var(--calendar-border);
   border-radius: var(--stn-radius-8);

package/styles/components/stn-drawer.css

@@ -0,0 +1,182 @@
+/**
+ * STN Drawer Component (L2 Side Sheet)
+ * 
+ * - L1.8 Side Sheet 계층 (z-index: var(--stn-elevation-z-drawer))
+ * - non-dimming (dim={false}) 및 dimming (dim={true}) 두 가지 모드 완벽 지원
+ * - 표준 크기 스케일 (sm, md, lg, xl, full)
+ * - 방향 (right, left, bottom) 지원
+ */
+
+/* ── 1. Drawer Stack Root ── */
+.stn-drawer-stack {
+  position: fixed;
+  inset: 0;
+  z-index: var(--stn-elevation-z-drawer); /* L1.8 Side Sheet 계층 (z-180, Dropdown 150 초과 / Modal 200 미만) */
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+  transition: visibility var(--stn-motion-duration-fast, 0.25s) ease;
+}
+
+.stn-drawer-stack.is-open {
+  visibility: visible;
+}
+
+/* Dim (Backdrop) 모드 */
+.stn-drawer-stack--dim.is-open {
+  pointer-events: auto;
+}
+
+/* ── 2. Dim Scrim ── */
+.stn-drawer-stack__dim {
+  position: absolute;
+  inset: 0;
+  background: var(--stn-dim-bg);
+  backdrop-filter: blur(var(--stn-dim-blur));
+  opacity: 0;
+  pointer-events: auto;
+  transition: opacity var(--stn-motion-duration-fast, 0.25s) ease;
+}
+
+.stn-drawer-stack.is-open .stn-drawer-stack__dim {
+  opacity: 1;
+}
+
+/* ── 3. Drawer Panel ── */
+.stn-drawer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: var(--stn-drawer-bg);
+  border-color: var(--stn-border-subtle);
+  border-style: solid;
+  border-width: 0;
+  box-shadow: var(--stn-shadow-xl);
+  pointer-events: auto;
+  transition: transform var(--stn-motion-duration-fast, 0.25s) var(--stn-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
+  will-change: transform;
+}
+
+/* Drawer Panel Padding Scale (.padding-none, .padding-xs ~ .padding-xl) */
+.stn-drawer.padding-none { padding: var(--stn-drawer-padding-none); }
+.stn-drawer.padding-xs   { padding: var(--stn-drawer-padding-xs); }
+.stn-drawer.padding-sm   { padding: var(--stn-drawer-padding-sm); }
+.stn-drawer.padding-md   { padding: var(--stn-drawer-padding-md); }
+.stn-drawer.padding-lg   { padding: var(--stn-drawer-padding-lg); }
+.stn-drawer.padding-xl   { padding: var(--stn-drawer-padding-xl); }
+
+/* Drawer Panel Gap Scale (Header, Body, Footer 간격 조절) */
+.stn-drawer.gap-none { gap: var(--stn-drawer-gap-none); }
+.stn-drawer.gap-xs   { gap: var(--stn-drawer-gap-xs); }
+.stn-drawer.gap-sm   { gap: var(--stn-drawer-gap-sm); }
+.stn-drawer.gap-md   { gap: var(--stn-drawer-gap-md); }
+.stn-drawer.gap-lg   { gap: var(--stn-drawer-gap-lg); }
+.stn-drawer.gap-xl   { gap: var(--stn-drawer-gap-xl); }
+
+/* ── 4. Placement (방향) ── */
+/* Right (기본) */
+.stn-drawer--right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  width: min(var(--stn-drawer-active-width, 480px), 100vw);
+  border-left-width: 1px;
+  transform: translateX(100%);
+}
+
+.stn-drawer-stack.is-open .stn-drawer--right {
+  transform: translateX(0);
+}
+
+/* Left */
+.stn-drawer--left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: min(var(--stn-drawer-active-width, 480px), 100vw);
+  border-right-width: 1px;
+  transform: translateX(-100%);
+}
+
+.stn-drawer-stack.is-open .stn-drawer--left {
+  transform: translateX(0);
+}
+
+/* Bottom */
+.stn-drawer--bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: min(var(--stn-drawer-active-height, 480px), 100vh);
+  border-top-width: 1px;
+  transform: translateY(100%);
+}
+
+.stn-drawer-stack.is-open .stn-drawer--bottom {
+  transform: translateY(0);
+}
+
+/* ── 5. Size Variants (표준 스케일) ── */
+.stn-drawer--sm { --stn-drawer-active-width: var(--stn-drawer-width-sm, 360px); --stn-drawer-active-height: var(--stn-drawer-height-sm, 360px); }
+.stn-drawer--md { --stn-drawer-active-width: var(--stn-drawer-width-md, 480px); --stn-drawer-active-height: var(--stn-drawer-height-md, 480px); }
+.stn-drawer--lg { --stn-drawer-active-width: var(--stn-drawer-width-lg, 640px); --stn-drawer-active-height: var(--stn-drawer-height-lg, 640px); }
+.stn-drawer--xl { --stn-drawer-active-width: var(--stn-drawer-width-xl, 800px); --stn-drawer-active-height: var(--stn-drawer-height-xl, 800px); }
+
+/* ── 6. Header, Body, Footer Subcomponents ── */
+.stn-drawer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--stn-space-4) var(--stn-space-5);
+  background: var(--stn-drawer-bg);
+}
+
+.stn-drawer__head-title {
+  margin: 0;
+  font-size: var(--stn-text-h4-size);
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-primary);
+  line-height: var(--stn-text-h4-line-height);
+}
+
+.stn-drawer__subtitle {
+  margin: var(--stn-space-1) 0 0;
+  font-size: var(--stn-text-body-small-size);
+  color: var(--stn-text-secondary);
+}
+
+.stn-drawer__close {
+  flex-shrink: 0;
+}
+
+.stn-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--stn-space-5);
+  color: var(--stn-text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.stn-drawer__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-space-2);
+  padding: var(--stn-space-3) var(--stn-space-5);
+  background: var(--stn-elevation-surface-1);
+}
+
+.stn-drawer__footer--right {
+  justify-content: flex-end;
+}
+
+.stn-drawer__footer--center {
+  justify-content: center;
+}
+
+.stn-drawer__footer--between {
+  justify-content: space-between;
+}

package/styles/components/stn-event-banner.css

@@ -80,14 +80,14 @@
   padding: var(--stn-space-12, 12px) var(--stn-space-16, 16px);
   border-radius: var(--stn-radius-8, 8px);
   background: var(--stn-event-banner-bg);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(var(--stn-dim-blur, 8px));
+  -webkit-backdrop-filter: blur(var(--stn-dim-blur, 8px));
   isolation: isolate;
   transform: translateZ(0);
   overflow: hidden;
-  z-index: 1000;
-  font-family: var(--stn-font-family-pretendard, var(--Typography-font-family-pretendard, sans-serif));
-  gap: var(--stn-space-12, 12px);
+  z-index: var(--stn-elevation-z-banner);
+  font-family: var(--stn-font-body);
+  gap: var(--stn-space-12);
   border: 1px solid var(--stn-event-banner-cr-border);
   border-left: 2px solid var(--stn-event-banner-cr-accent);
   box-shadow: var(--stn-event-banner-cr-shadow);
@@ -286,8 +286,8 @@
 
 /* Alert Icon */
 .stn-event-banner__icon-wrap {
-  width: 24px;
-  height: 24px;
+  width: var(--stn-event-banner-icon-size, var(--stn-size-24, 24px));
+  height: var(--stn-event-banner-icon-size, var(--stn-size-24, 24px));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -298,7 +298,7 @@
 .stn-event-banner__text {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: var(--stn-event-banner-text-gap, var(--stn-space-4, 4px));
   align-items: stretch;
   min-width: 0;
   flex: 1 1 auto;
@@ -317,24 +317,24 @@
 }
 
 .stn-event-banner__title {
-  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-semibold, 600);
   color: var(--stn-event-banner-title);
-  line-height: 1.2;
+  line-height: var(--stn-line-height-tight, 1.2);
 }
 
 .stn-event-banner__time {
-  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-regular, 400);
   color: var(--stn-event-banner-time);
-  line-height: 1.2;
+  line-height: var(--stn-line-height-tight, 1.2);
 }
 
 /* Action Group */
 .stn-event-banner__actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--stn-event-banner-actions-gap, var(--stn-space-8, 8px));
   flex-shrink: 0;
 }
 
@@ -344,11 +344,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 30px;
-  padding: 4px 14px;
-  border-radius: var(--stn-radius-circle, 9999px);
-  font-family: var(--stn-font-family-pretendard, var(--Typography-font-family-pretendard, sans-serif));
-  font-size: 13px;
+  height: var(--stn-event-banner-btn-height, var(--stn-size-28, 28px));
+  padding: var(--stn-event-banner-btn-padding-block, var(--stn-space-4, 4px)) var(--stn-event-banner-btn-padding-inline, var(--stn-space-14, 14px));
+  border-radius: var(--stn-radius-chip-pill, var(--stn-radius-circle, 9999px));
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   font-weight: var(--stn-font-weight-semibold, 600);
   line-height: 1;
   white-space: nowrap;

package/styles/components/stn-pagination.css

@@ -68,7 +68,7 @@
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
-  box-shadow: none !important;
+  box-shadow: none;
   vertical-align: middle;
   transition: all 0.15s ease;
 }
@@ -118,21 +118,21 @@
 /* Size variations (STN 규격: sm · md · lg) */
 .stn-pagination--sm {
   --stn-pagination-size: var(--stn-size-28, 28px);
-  --stn-pagination-font-size: var(--stn-font-size-12, 12px);
+  --stn-pagination-font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   --stn-pagination-gap: var(--stn-space-4, 4px);
   --stn-pagination-arrow-gap: var(--stn-space-8, 8px);
 }
 
 .stn-pagination--md {
   --stn-pagination-size: var(--stn-size-32, 32px);
-  --stn-pagination-font-size: var(--stn-font-size-13, 13px);
+  --stn-pagination-font-size: var(--stn-text-body-small-size, var(--stn-font-size-13, 13px));
   --stn-pagination-gap: var(--stn-space-8, 8px);
   --stn-pagination-arrow-gap: var(--stn-space-12, 12px);
 }
 
 .stn-pagination--lg {
   --stn-pagination-size: var(--stn-size-36, 36px);
-  --stn-pagination-font-size: var(--stn-font-size-14, 14px);
+  --stn-pagination-font-size: var(--stn-text-body-medium-size, var(--stn-font-size-14, 14px));
   --stn-pagination-gap: var(--stn-space-8, 8px);
   --stn-pagination-arrow-gap: var(--stn-space-16, 16px);
 }
@@ -215,12 +215,13 @@
   flex: 0 0 auto;
 }
 
-/* 모바일 좁은 화면 컴팩트 최적화
- * 브레이크포인트: --stn-pagination-compact-breakpoint (480px)
- * CSS @media에서 var() 사용 불가이므로 리터럴 유지; 치수는 시멘틱 토큰 참조.
- */
+/* 모바일 좁은 화면 컴팩트 최적화 (max-width: 480px) */
 @media (max-width: 480px) {
   .stn-pagination {
+    --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-text-caption-medium-size, var(--stn-font-size-12, 12px));
+    --stn-pagination-compact-gap: var(--stn-space-4, 4px);
     gap: var(--stn-pagination-compact-gap);
   }
 

package/styles/components/stn-progress-bar.css

@@ -198,7 +198,7 @@
   flex-shrink: 0;
   white-space: nowrap;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-progress-title-color);
 }
@@ -207,7 +207,7 @@
   flex-shrink: 0;
   white-space: nowrap;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-progress-value-color);
 }
@@ -217,7 +217,7 @@
   justify-content: space-between;
   align-items: center;
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-12);
+  font-size: var(--stn-text-caption-medium-size, var(--stn-font-size-12, 12px));
   color: var(--stn-progress-label-color);
   font-weight: var(--stn-font-weight-medium);
 }
@@ -253,7 +253,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   font-family: var(--stn-font-body);
-  font-size: var(--stn-font-size-10);
+  font-size: var(--stn-text-label-xsmall-size, var(--stn-font-size-10, 10px));
   font-weight: var(--stn-font-weight-bold);
   color: var(--stn-progress-inside-color);
   line-height: 1;
@@ -415,7 +415,7 @@
 
 .stn-progress-circle-wrap__label {
   font-family: var(--stn-font-body);
-  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);
   color: var(--stn-progress-circle-label-color);
   line-height: 1.3;