@stn-uiux/pub-ui 0.1.81 → 0.1.84

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

@@ -15,6 +15,23 @@
   --calendar-range-dash: var(--stn-date-picker-accent);
   --calendar-disabled-font: var(--stn-date-picker-disabled-fg);
 
+  /* md — 기본 달력 스케일 */
+  --stn-date-picker-cell-w: var(--stn-size-32);
+  --stn-date-picker-cell-h: var(--stn-size-28);
+  --stn-date-picker-col-w: var(--stn-size-36);
+  --stn-date-picker-row-h: var(--stn-size-28);
+  --stn-date-picker-nav-size: var(--stn-size-24);
+  --stn-date-picker-panel-pad-y: var(--stn-space-8);
+  --stn-date-picker-panel-pad-x: var(--stn-space-12);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-4);
+  --stn-date-picker-cell-pad-y: var(--stn-space-2);
+  --stn-date-picker-section-pad-y: var(--stn-space-8);
+  --stn-date-picker-section-pad-x: var(--stn-space-12);
+  --stn-date-picker-footer-pad-y: var(--stn-space-12);
+  --stn-date-picker-title-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-day-size: var(--stn-text-body-small-size);
+  --stn-date-picker-weekday-size: var(--stn-text-caption-medium-size);
+
   position: fixed;
   z-index: var(--stn-elevation-z-dropdown);
   box-sizing: border-box;
@@ -25,9 +42,141 @@
   color: var(--stn-text-primary);
 }
 
+.stn-date-picker-dropdown.sm {
+  --stn-date-picker-cell-w: var(--stn-size-28);
+  --stn-date-picker-cell-h: var(--stn-size-24);
+  --stn-date-picker-col-w: var(--stn-size-32);
+  --stn-date-picker-row-h: var(--stn-size-24);
+  --stn-date-picker-nav-size: var(--stn-size-20);
+  --stn-date-picker-panel-pad-y: var(--stn-space-4);
+  --stn-date-picker-panel-pad-x: var(--stn-space-8);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-2);
+  --stn-date-picker-cell-pad-y: var(--stn-space-0);
+  --stn-date-picker-section-pad-y: var(--stn-space-4);
+  --stn-date-picker-section-pad-x: var(--stn-space-8);
+  --stn-date-picker-footer-pad-y: var(--stn-space-8);
+  --stn-date-picker-title-size: var(--stn-text-body-small-size);
+  --stn-date-picker-day-size: var(--stn-text-caption-medium-size);
+  --stn-date-picker-weekday-size: var(--stn-text-caption-medium-size);
+}
+
+.stn-date-picker-dropdown.md {
+  --stn-date-picker-cell-w: var(--stn-size-32);
+  --stn-date-picker-cell-h: var(--stn-size-28);
+  --stn-date-picker-col-w: var(--stn-size-36);
+  --stn-date-picker-row-h: var(--stn-size-28);
+  --stn-date-picker-nav-size: var(--stn-size-24);
+  --stn-date-picker-panel-pad-y: var(--stn-space-8);
+  --stn-date-picker-panel-pad-x: var(--stn-space-12);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-4);
+  --stn-date-picker-cell-pad-y: var(--stn-space-2);
+  --stn-date-picker-section-pad-y: var(--stn-space-8);
+  --stn-date-picker-section-pad-x: var(--stn-space-12);
+  --stn-date-picker-footer-pad-y: var(--stn-space-12);
+  --stn-date-picker-title-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-day-size: var(--stn-text-body-small-size);
+  --stn-date-picker-weekday-size: var(--stn-text-caption-medium-size);
+}
+
+.stn-date-picker-dropdown.lg {
+  --stn-date-picker-cell-w: var(--stn-size-36);
+  --stn-date-picker-cell-h: var(--stn-size-32);
+  --stn-date-picker-col-w: var(--stn-size-40);
+  --stn-date-picker-row-h: var(--stn-size-32);
+  --stn-date-picker-nav-size: var(--stn-size-28);
+  --stn-date-picker-panel-pad-y: var(--stn-space-12);
+  --stn-date-picker-panel-pad-x: var(--stn-space-16);
+  --stn-date-picker-panel-pad-bottom: var(--stn-space-8);
+  --stn-date-picker-cell-pad-y: var(--stn-space-4);
+  --stn-date-picker-section-pad-y: var(--stn-space-12);
+  --stn-date-picker-section-pad-x: var(--stn-space-16);
+  --stn-date-picker-footer-pad-y: var(--stn-space-16);
+  --stn-date-picker-title-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-day-size: var(--stn-text-body-medium-size);
+  --stn-date-picker-weekday-size: var(--stn-text-body-small-size);
+}
+
 .stn-date-picker-dropdown__body {
   display: flex;
   flex-direction: column;
+  width: max-content;
+  max-width: 100%;
+}
+
+.stn-date-picker-dropdown__main {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-dropdown__main {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  align-items: stretch;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time {
+  height: 0;
+  min-height: 100%;
+  overflow: hidden;
+  border-top: none;
+  border-left: var(--stn-size-1) solid var(--calendar-border);
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__side--stack {
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: calc(var(--stn-date-picker-col-w) * 3 + var(--stn-space-8) * 2);
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: var(--stn-date-picker-panel-pad-y) var(--stn-date-picker-panel-pad-x) var(--stn-date-picker-panel-pad-bottom);
+  border-right: none;
+  gap: var(--stn-space-8);
+}
+
+.stn-date-picker-time__head {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: center;
+  min-height: var(--stn-date-picker-row-h);
+  margin: var(--stn-space-0);
+}
+
+.stn-date-picker-time__head > span {
+  font-size: var(--stn-date-picker-weekday-size);
+  font-weight: var(--stn-font-weight-medium);
+  line-height: var(--stn-date-picker-row-h);
+  text-align: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__columns {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--stn-space-4);
+  flex: 1 1 auto;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__scroll {
+  width: auto;
+  height: 100%;
+  min-height: 0;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--stn-date-picker-cell-h);
+  padding: var(--stn-space-0);
+  border-radius: var(--stn-radius-4);
+  line-height: var(--stn-date-picker-cell-h);
 }
 
 .stn-date-picker-dropdown__panels {
@@ -37,7 +186,7 @@
 
 .stn-date-picker-panel {
   box-sizing: border-box;
-  padding: var(--stn-space-8) var(--stn-space-12) var(--stn-space-4);
+  padding: var(--stn-date-picker-panel-pad-y) var(--stn-date-picker-panel-pad-x) var(--stn-date-picker-panel-pad-bottom);
   border-right: var(--stn-size-1) solid var(--calendar-border);
 }
 
@@ -50,14 +199,14 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--stn-space-8);
-  margin-bottom: var(--stn-space-8);
-  min-height: var(--stn-size-28);
+  margin-bottom: var(--stn-date-picker-panel-pad-y);
+  min-height: var(--stn-date-picker-row-h);
 }
 
 .stn-date-picker-panel__title {
   flex: 1;
   margin: var(--stn-space-0);
-  font-size: var(--stn-text-body-medium-size);
+  font-size: var(--stn-date-picker-title-size);
   font-weight: var(--stn-font-weight-semibold);
   line-height: var(--stn-line-height-1, 1);
   text-align: center;
@@ -68,8 +217,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--stn-size-24);
-  height: var(--stn-size-24);
+  width: var(--stn-date-picker-nav-size);
+  height: var(--stn-date-picker-nav-size);
   margin: var(--stn-space-0);
   padding: var(--stn-space-0);
   border: none;
@@ -89,14 +238,14 @@
 }
 
 .stn-date-picker-content {
-  width: calc(var(--stn-size-36) * 7);
+  width: calc(var(--stn-date-picker-col-w) * 7);
   border-collapse: collapse;
   table-layout: fixed;
 }
 
 .stn-date-picker-content th {
-  height: var(--stn-size-28);
-  font-size: var(--stn-text-caption-medium-size);
+  height: var(--stn-date-picker-row-h);
+  font-size: var(--stn-date-picker-weekday-size);
   font-weight: var(--stn-font-weight-medium);
   color: var(--stn-text-secondary);
   text-align: center;
@@ -104,7 +253,7 @@
 
 .stn-date-picker-cell {
   position: relative;
-  padding: var(--stn-space-2) var(--stn-space-0);
+  padding: var(--stn-date-picker-cell-pad-y) var(--stn-space-0);
   text-align: center;
 }
 
@@ -112,14 +261,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--stn-size-32);
-  height: var(--stn-size-28);
+  width: var(--stn-date-picker-cell-w);
+  height: var(--stn-date-picker-cell-h);
   margin: var(--stn-space-0);
   padding: var(--stn-space-0);
   border: none;
   border-radius: var(--stn-radius-4);
   background: transparent;
-  font-size: var(--stn-text-body-small-size);
+  font-size: var(--stn-date-picker-day-size);
   font-weight: var(--stn-font-weight-medium);
   line-height: var(--stn-line-height-1, 1);
   color: var(--stn-text-primary);
@@ -135,26 +284,39 @@
 .stn-date-picker-cell--in-range::before {
   content: '';
   position: absolute;
-  inset: var(--stn-space-2) var(--stn-space-0);
+  inset: var(--stn-date-picker-cell-pad-y) var(--stn-space-0);
   background: var(--calendar-range);
   z-index: 0;
+  border-radius: 0;
+}
+
+.stn-date-picker-cell--range-start::before {
+  left: calc((100% - var(--stn-date-picker-cell-w)) / 2);
+  background: var(--calendar-selected-row);
+  border-radius: var(--stn-radius-4) 0 0 var(--stn-radius-4);
 }
 
-.stn-date-picker-cell--range-start::before,
 .stn-date-picker-cell--range-end::before {
+  right: calc((100% - var(--stn-date-picker-cell-w)) / 2);
   background: var(--calendar-selected-row);
+  border-radius: 0 var(--stn-radius-4) var(--stn-radius-4) 0;
 }
 
-.stn-date-picker-cell--range-start .stn-date-picker-cell__btn,
-.stn-date-picker-cell--range-end .stn-date-picker-cell__btn {
+.stn-date-picker-cell--range-start.stn-date-picker-cell--range-end::before {
+  left: calc((100% - var(--stn-date-picker-cell-w)) / 2);
+  right: calc((100% - var(--stn-date-picker-cell-w)) / 2);
+  border-radius: var(--stn-radius-4);
+}
+
+.stn-date-picker-cell--range-start:not(.stn-date-picker-cell--in-range) .stn-date-picker-cell__btn,
+.stn-date-picker-cell--range-end:not(.stn-date-picker-cell--in-range) .stn-date-picker-cell__btn {
   background: var(--calendar-selected-row);
   color: var(--calendar-font);
 }
 
-.stn-date-picker-cell--in-range .stn-date-picker-cell__btn:hover,
-.stn-date-picker-cell--range-start .stn-date-picker-cell__btn:hover,
-.stn-date-picker-cell--range-end .stn-date-picker-cell__btn:hover {
-  background: var(--calendar-selected-row);
+.stn-date-picker-cell--in-range.stn-date-picker-cell--range-start .stn-date-picker-cell__btn,
+.stn-date-picker-cell--in-range.stn-date-picker-cell--range-end .stn-date-picker-cell__btn {
+  background: transparent;
   color: var(--calendar-font);
 }
 
@@ -162,6 +324,19 @@
   border: var(--stn-size-1) dashed var(--calendar-range-dash);
 }
 
+.stn-date-picker-cell--range-start .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--range-end .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--in-range .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--preview .stn-date-picker-cell__btn:hover {
+  border: none;
+}
+
+.stn-date-picker-cell--in-range .stn-date-picker-cell__btn:hover,
+.stn-date-picker-cell--preview .stn-date-picker-cell__btn:hover {
+  background: transparent;
+  color: var(--calendar-font);
+}
+
 .stn-date-picker-cell--disabled .stn-date-picker-cell__btn {
   color: var(--calendar-disabled-font);
   cursor: not-allowed;
@@ -172,25 +347,57 @@
   border-top: var(--stn-size-1) solid var(--calendar-border);
 }
 
+.stn-date-picker-dropdown--single .stn-date-picker-time {
+  flex-direction: column;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__side--stack + .stn-date-picker-time__side--stack {
+  border-left: var(--stn-size-1) solid var(--calendar-border);
+}
+
+.stn-date-picker-dropdown--side-time .stn-date-picker-time__side--stack {
+  border-bottom: none;
+}
+
+.stn-date-picker-time__caption {
+  font-size: var(--stn-date-picker-weekday-size);
+  font-weight: var(--stn-font-weight-semibold);
+  line-height: var(--stn-date-picker-row-h);
+  text-align: center;
+  color: var(--stn-text-secondary);
+}
+
 .stn-date-picker-time__side {
   flex: 1;
   display: flex;
   gap: var(--stn-space-0);
   min-width: 0;
-  padding: var(--stn-space-8) var(--stn-space-12);
+  padding: var(--stn-date-picker-section-pad-y) var(--stn-date-picker-section-pad-x);
   border-right: var(--stn-size-1) solid var(--calendar-border);
 }
 
-.stn-date-picker-time__side:last-child {
+.stn-date-picker-dropdown--single .stn-date-picker-time__side {
   border-right: none;
+  border-bottom: var(--stn-size-1) solid var(--calendar-border);
+}
+
+.stn-date-picker-time__side:last-child,
+.stn-date-picker-dropdown--single .stn-date-picker-time__side:last-child {
+  border-right: none;
+  border-bottom: none;
 }
 
 .stn-date-picker-time__label {
   flex-shrink: 0;
-  width: var(--stn-size-36);
-  font-size: var(--stn-text-caption-medium-size);
+  width: var(--stn-date-picker-col-w);
+  font-size: var(--stn-date-picker-weekday-size);
   font-weight: var(--stn-font-weight-semibold);
-  line-height: var(--stn-size-28);
+  line-height: var(--stn-date-picker-row-h);
   color: var(--stn-text-secondary);
 }
 
@@ -199,8 +406,8 @@
   flex: 1;
   min-width: 0;
   width: 100%;
-  height: calc(var(--stn-size-28) * 6);
-  max-height: calc(var(--stn-size-28) * 6);
+  height: calc(var(--stn-date-picker-cell-h) * 6);
+  max-height: calc(var(--stn-date-picker-cell-h) * 6);
   overflow: hidden;
 }
 
@@ -218,7 +425,7 @@
 
 .stn-date-picker-time__scroll {
   width: 100%;
-  height: calc(var(--stn-size-28) * 6);
+  height: calc(var(--stn-date-picker-cell-h) * 6);
 }
 
 .stn-date-picker-time__column {
@@ -233,10 +440,11 @@
   margin: var(--stn-space-0);
   padding: var(--stn-space-4) var(--stn-space-4); /* 좌우 패딩 추가 — 숫자 가독성 개선 */
   border: none;
+  border-radius: var(--stn-radius-4);
   background: transparent;
   font-size: var(--stn-text-body-small-size);
   font-weight: var(--stn-font-weight-medium);
-  line-height: 1.4;
+  line-height: var(--stn-text-body-small-line-height);
   text-align: center;
   color: var(--stn-text-primary);
   cursor: pointer;
@@ -251,12 +459,24 @@
   background: var(--calendar-range);
 }
 
+.stn-date-picker-presets {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--stn-space-8);
+  width: 0;
+  min-width: 100%;
+  box-sizing: border-box;
+  padding: var(--stn-date-picker-section-pad-y) var(--stn-date-picker-section-pad-x);
+  border-top: var(--stn-size-1) solid var(--calendar-border);
+}
+
 .stn-date-picker-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--stn-space-8);
-  padding: var(--stn-space-8) var(--stn-space-12);
+  padding: var(--stn-date-picker-footer-pad-y) var(--stn-date-picker-section-pad-x);
   border-top: var(--stn-size-1) solid var(--calendar-border);
 }
 
@@ -268,16 +488,3 @@
 .stn-date-picker-field .stn-date-range-field[aria-expanded='true'] {
   border: var(--stn-input-focus);
 }
-
-/* StnDateRangePicker dialog title — screen reader only */
-.stn-sf__visually-hidden {
-  position: absolute;
-  width: var(--stn-size-1);
-  height: var(--stn-size-1);
-  padding: var(--stn-space-0);
-  margin: calc(var(--stn-size-1) * -1);
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/styles/components/stn-drawer.css

@@ -136,10 +136,10 @@
 
 .stn-drawer__head-title {
   margin: 0;
-  font-size: var(--stn-text-h4-size);
+  font-size: var(--stn-text-title-medium-size);
   font-weight: var(--stn-font-weight-semibold);
   color: var(--stn-text-primary);
-  line-height: var(--stn-text-h4-line-height);
+  line-height: var(--stn-text-title-medium-line-height);
 }
 
 .stn-drawer__subtitle {

package/styles/components/stn-empty-state.css

@@ -0,0 +1,238 @@
+@charset "utf-8";
+/**
+ * StnEmptyState
+ * 공통 빈·오류 상태 표면. 아이콘 · 제목 · 설명 · 액션.
+ * 색·타이포·버튼은 기존 Pub 토큰 / StnIcon · StnText · StnButton에 위임.
+ */
+
+:root {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-md);
+  --stn-empty-state-body-gap: var(--stn-empty-state-body-gap);
+  --stn-empty-state-actions-gap: var(--stn-empty-state-actions-gap);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-md);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-md);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-md);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-md);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-md);
+  --stn-empty-state-icon-color: var(--stn-text-tertiary);
+  --stn-empty-state-title-color: var(--stn-text-primary);
+  --stn-empty-state-description-color: var(--stn-text-secondary);
+  --stn-empty-state-code-color: var(--stn-text-tertiary);
+  --stn-empty-state-code-font-size: var(--stn-text-caption-size);
+  --stn-empty-state-code-font-weight: var(--stn-font-weight-semibold);
+  --stn-empty-state-page-padding-y: var(--stn-empty-state-page-padding-y);
+}
+
+.stn-empty-state {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-empty-state-gap);
+  width: 100%;
+  max-width: var(--stn-empty-state-max-width);
+  margin-inline: auto;
+  padding: var(--stn-empty-state-padding);
+  text-align: center;
+  color: var(--stn-empty-state-title-color);
+}
+
+/* 전체 페이지 / 레이아웃 본문 중앙 */
+.stn-empty-state.page {
+  max-width: none;
+  min-height: min(100%, 60vh);
+  flex: 1 1 auto;
+  padding-block: var(--stn-empty-state-page-padding-y);
+}
+
+.stn-empty-state.page > .stn-empty-state__body,
+.stn-empty-state.page > .stn-empty-state__actions {
+  max-width: var(--stn-empty-state-max-width);
+}
+
+/* Size 규격 (xs · sm · md · lg · xl) */
+.stn-empty-state.sm {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-sm);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-sm);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-sm);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-sm);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-sm);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-sm);
+}
+
+.stn-empty-state.md {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-md);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-md);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-md);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-md);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-md);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-md);
+}
+
+.stn-empty-state.lg {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-lg);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-lg);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-lg);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-lg);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-lg);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-lg);
+}
+
+/* Tone → 아이콘 색 (feedback / text 시맨틱) */
+.stn-empty-state.tone-neutral {
+  --stn-empty-state-icon-color: var(--stn-text-tertiary);
+}
+
+.stn-empty-state.tone-info {
+  --stn-empty-state-icon-color: var(--stn-feedback-info);
+}
+
+.stn-empty-state.tone-warning {
+  --stn-empty-state-icon-color: var(--stn-feedback-warning);
+}
+
+.stn-empty-state.tone-error {
+  --stn-empty-state-icon-color: var(--stn-feedback-error);
+}
+
+.stn-empty-state.tone-success {
+  --stn-empty-state-icon-color: var(--stn-feedback-success);
+}
+
+/* 3D Graphic (Illustration) */
+.stn-empty-state__graphic {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+  max-width: 100%;
+}
+
+.stn-empty-state__img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: var(--stn-empty-state-graphic-width);
+  max-height: var(--stn-empty-state-graphic-height);
+  object-fit: contain;
+  filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--stn-static-black) 16%, transparent));
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Graphic sizes (~75% compact scale: sm, md, lg) */
+.stn-empty-state.sm .stn-empty-state__img {
+  max-width: var(--stn-empty-state-graphic-width-sm);
+  max-height: var(--stn-empty-state-graphic-height-sm);
+}
+
+.stn-empty-state.md .stn-empty-state__img {
+  max-width: var(--stn-empty-state-graphic-width-md);
+  max-height: var(--stn-empty-state-graphic-height-md);
+}
+
+.stn-empty-state.lg .stn-empty-state__img {
+  max-width: var(--stn-empty-state-graphic-width-lg);
+  max-height: var(--stn-empty-state-graphic-height-lg);
+}
+
+.stn-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stn-empty-state-icon-size);
+  height: var(--stn-empty-state-icon-size);
+  color: var(--stn-empty-state-icon-color);
+}
+
+.stn-empty-state__icon > .stn-icon,
+.stn-empty-state__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* masked 아이콘이 currentColor를 쓰도록 */
+.stn-empty-state__icon > .stn-icon.stn-icon--masked {
+  background-color: var(--stn-empty-state-icon-color);
+}
+
+.stn-empty-state__code {
+  margin: 0;
+  color: var(--stn-empty-state-code-color);
+  font-size: var(--stn-empty-state-code-font-size);
+  font-weight: var(--stn-empty-state-code-font-weight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.stn-empty-state__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--stn-empty-state-body-gap);
+  width: 100%;
+  min-width: 0;
+}
+
+.stn-empty-state__title {
+  margin: 0;
+  color: var(--stn-empty-state-title-color);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-title-medium-size);
+  font-weight: var(--stn-font-weight-semibold);
+  line-height: var(--stn-text-title-medium-line-height);
+  word-break: keep-all;
+}
+
+.stn-empty-state__description {
+  margin: 0;
+  color: var(--stn-empty-state-description-color);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-medium-size);
+  font-weight: var(--stn-font-weight-regular);
+  line-height: var(--stn-text-body-medium-line-height);
+  word-break: keep-all;
+}
+
+/* Typography scale per size */
+.stn-empty-state.sm .stn-empty-state__title {
+  font-size: var(--stn-text-title-small-size);
+  line-height: var(--stn-text-title-small-line-height);
+}
+
+.stn-empty-state.sm .stn-empty-state__description {
+  font-size: var(--stn-text-caption-size);
+  line-height: var(--stn-text-caption-line-height);
+}
+
+.stn-empty-state.md .stn-empty-state__title {
+  font-size: var(--stn-text-title-medium-size);
+  line-height: var(--stn-text-title-medium-line-height);
+}
+
+.stn-empty-state.md .stn-empty-state__description {
+  font-size: var(--stn-text-body-medium-size);
+  line-height: var(--stn-text-body-medium-line-height);
+}
+
+.stn-empty-state.lg .stn-empty-state__title {
+  font-size: var(--stn-text-title-large-size);
+  line-height: var(--stn-text-title-large-line-height);
+}
+
+.stn-empty-state.lg .stn-empty-state__description {
+  font-size: var(--stn-text-body-medium-large-size);
+  line-height: var(--stn-text-body-medium-large-line-height);
+}
+
+.stn-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-empty-state-actions-gap);
+  width: 100%;
+}