@stn-uiux/pub-ui 0.1.82 → 0.1.85

package/styles/components/stn-stepper.css

@@ -0,0 +1,570 @@
+@charset "utf-8";
+/**
+ * STN Component — Stepper (.stn-stepper)
+ * Responsive Multi-Step Progress Indicator & Wizard Navigation
+ */
+
+/* ==========================================================================
+   1. Root & Size Scale (Strict Rule 1: xs · sm · md · lg · xl)
+   ========================================================================== */
+
+.stn-stepper {
+  --stn-stepper-node-size: var(--stn-stepper-node-size-md);
+  --stn-stepper-icon-size: var(--stn-stepper-icon-size-md);
+  --stn-stepper-font-size: var(--stn-font-size-14);
+  --stn-stepper-caption-size: var(--stn-font-size-12);
+  --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-md);
+  --stn-stepper-gap: var(--stn-space-12);
+
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  position: relative;
+  font-family: inherit;
+}
+
+.stn-stepper.xs {
+  --stn-stepper-node-size: var(--stn-stepper-node-size-xs);
+  --stn-stepper-icon-size: var(--stn-stepper-icon-size-xs);
+  --stn-stepper-font-size: var(--stn-font-size-11);
+  --stn-stepper-caption-size: var(--stn-font-size-10);
+  --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-xs);
+  --stn-stepper-gap: var(--stn-space-8);
+}
+
+.stn-stepper.sm {
+  --stn-stepper-node-size: var(--stn-stepper-node-size-sm);
+  --stn-stepper-icon-size: var(--stn-stepper-icon-size-sm);
+  --stn-stepper-font-size: var(--stn-font-size-12);
+  --stn-stepper-caption-size: var(--stn-font-size-11);
+  --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-sm);
+  --stn-stepper-gap: var(--stn-space-10);
+}
+
+.stn-stepper.md {
+  --stn-stepper-node-size: var(--stn-stepper-node-size-md);
+  --stn-stepper-icon-size: var(--stn-stepper-icon-size-md);
+  --stn-stepper-font-size: var(--stn-font-size-14);
+  --stn-stepper-caption-size: var(--stn-font-size-12);
+  --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-md);
+  --stn-stepper-gap: var(--stn-space-12);
+}
+
+.stn-stepper.lg {
+  --stn-stepper-node-size: var(--stn-stepper-node-size-lg);
+  --stn-stepper-icon-size: var(--stn-stepper-icon-size-lg);
+  --stn-stepper-font-size: var(--stn-font-size-16);
+  --stn-stepper-caption-size: var(--stn-font-size-13);
+  --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-lg);
+  --stn-stepper-gap: var(--stn-space-16);
+}
+
+.stn-stepper.xl {
+  --stn-stepper-node-size: var(--stn-stepper-node-size-xl);
+  --stn-stepper-icon-size: var(--stn-stepper-icon-size-xl);
+  --stn-stepper-font-size: var(--stn-font-size-18);
+  --stn-stepper-caption-size: var(--stn-font-size-14);
+  --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-xl);
+  --stn-stepper-gap: var(--stn-space-20);
+}
+
+/* ==========================================================================
+   2. Horizontal Layout & Alternative Label
+   ========================================================================== */
+
+.stn-stepper--horizontal {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stn-stepper--horizontal:not(.stn-stepper--alternative-label) .stn-step {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0%;
+  position: relative;
+}
+
+.stn-stepper--horizontal:not(.stn-stepper--alternative-label) .stn-step:last-child {
+  flex: 0 0 auto;
+}
+
+/* Horizontal Alternative Label (아이콘 상단, 텍스트 하단 중앙 정렬) */
+.stn-stepper--horizontal.stn-stepper--alternative-label {
+  align-items: flex-start;
+}
+
+.stn-stepper--horizontal.stn-stepper--alternative-label .stn-step,
+.stn-stepper--horizontal.stn-stepper--alternative-label .stn-step:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex: 1 1 0%;
+  width: 100%;
+  position: relative;
+}
+
+.stn-stepper--horizontal.stn-stepper--alternative-label .stn-step__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.stn-stepper--horizontal.stn-stepper--alternative-label .stn-step__connector {
+  position: absolute;
+  top: calc(var(--stn-stepper-node-size) / 2);
+  left: calc(-50% + var(--stn-stepper-node-size) / 2 + var(--stn-space-6));
+  right: calc(50% + var(--stn-stepper-node-size) / 2 + var(--stn-space-6));
+  transform: translateY(-50%);
+  margin: 0;
+  z-index: 0;
+  height: var(--stn-stepper-line-thickness);
+  pointer-events: none;
+}
+
+.stn-stepper--horizontal.stn-stepper--alternative-label .stn-step:first-child .stn-step__connector {
+  display: none;
+}
+
+/* ==========================================================================
+   3. Vertical Layout (Left / Right Positioning — Image 1 & 2)
+   ========================================================================== */
+
+.stn-stepper--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.stn-stepper--vertical .stn-step {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: var(--stn-size-48);
+}
+
+/* Vertical Left (기본: 노드/선 왼쪽, 내용 오른쪽) */
+.stn-stepper--vertical-left .stn-step__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-start;
+}
+
+.stn-stepper--vertical-left .stn-step__content {
+  margin-left: calc(var(--stn-stepper-node-size) / 2 - var(--stn-stepper-line-thickness) / 2);
+  padding-left: calc(var(--stn-stepper-node-size) / 2 + var(--stn-space-12));
+  padding-top: var(--stn-space-8);
+  padding-bottom: var(--stn-space-20);
+  border-left: var(--stn-stepper-line-thickness) solid var(--stn-stepper-line-color);
+  text-align: left;
+}
+
+.stn-stepper--vertical-left .stn-step:last-child .stn-step__content {
+  border-left-color: transparent;
+}
+
+.stn-stepper--vertical-left .stn-step--line-success .stn-step__content {
+  border-left-color: var(--stn-stepper-line-success-color);
+}
+
+.stn-stepper--vertical-left .stn-step--line-active .stn-step__content {
+  border-left-color: var(--stn-stepper-line-active-color);
+}
+
+.stn-stepper--vertical-left .stn-step--line-error .stn-step__content {
+  border-left-color: var(--stn-stepper-line-error-color);
+}
+
+.stn-stepper--vertical-left .stn-step--line-warning .stn-step__content {
+  border-left-color: var(--stn-stepper-line-warning-color);
+}
+
+/* Vertical Right (Image 2: 노드/선 오른쪽, 내용/텍스트 왼쪽) */
+.stn-stepper--vertical-right {
+  text-align: right;
+}
+
+.stn-stepper--vertical-right .stn-step__header {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: flex-end;
+}
+
+.stn-stepper--vertical-right .stn-step__label-wrap {
+  text-align: right;
+  margin-right: var(--stn-stepper-gap);
+  margin-left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.stn-stepper--vertical-right .stn-step__content {
+  margin-right: calc(var(--stn-stepper-node-size) / 2 - var(--stn-stepper-line-thickness) / 2);
+  padding-right: calc(var(--stn-stepper-node-size) / 2 + var(--stn-space-12));
+  padding-top: var(--stn-space-8);
+  padding-bottom: var(--stn-space-20);
+  border-right: var(--stn-stepper-line-thickness) solid var(--stn-stepper-line-color);
+  text-align: right;
+}
+
+.stn-stepper--vertical-right .stn-step:last-child .stn-step__content {
+  border-right-color: transparent;
+}
+
+.stn-stepper--vertical-right .stn-step--line-success .stn-step__content {
+  border-right-color: var(--stn-stepper-line-success-color);
+}
+
+.stn-stepper--vertical-right .stn-step--line-active .stn-step__content {
+  border-right-color: var(--stn-stepper-line-active-color);
+}
+
+.stn-stepper--vertical-right .stn-step--line-error .stn-step__content {
+  border-right-color: var(--stn-stepper-line-error-color);
+}
+
+.stn-stepper--vertical-right .stn-step--line-warning .stn-step__content {
+  border-right-color: var(--stn-stepper-line-warning-color);
+}
+
+.stn-stepper--vertical-right .stn-step__actions {
+  justify-content: flex-end;
+}
+
+.stn-stepper--vertical-right .stn-step__error-msg {
+  justify-content: flex-end;
+}
+
+/* Vertical 모드 접힌 스텝 간 연결선 */
+.stn-step__connector--vertical {
+  width: var(--stn-stepper-node-size);
+  min-height: var(--stn-size-28);
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  margin: 0;
+  padding: var(--stn-space-2) 0;
+  box-sizing: border-box;
+}
+
+.stn-step__connector--vertical .stn-step__connector-line {
+  width: var(--stn-stepper-line-thickness);
+  height: 100%;
+  min-height: var(--stn-size-24);
+  background-color: var(--stn-stepper-line-color);
+  border-radius: var(--stn-radius-circle);
+}
+
+.stn-step__connector--vertical .stn-step__connector-line--active {
+  background-color: var(--stn-stepper-line-active-color);
+}
+
+.stn-step__connector--vertical .stn-step__connector-line--success {
+  background-color: var(--stn-stepper-line-success-color);
+}
+
+.stn-step__connector--vertical .stn-step__connector-line--error {
+  background-color: var(--stn-stepper-line-error-color);
+}
+
+.stn-step__connector--vertical .stn-step__connector-line--warning {
+  background-color: var(--stn-stepper-line-warning-color);
+}
+
+.stn-stepper--vertical-left .stn-step__connector--vertical {
+  margin-left: 0;
+  align-self: flex-start;
+}
+
+.stn-stepper--vertical-right .stn-step__connector--vertical {
+  margin-right: 0;
+  align-self: flex-end;
+}
+
+/* ==========================================================================
+   4. Step Header & Button (Non-linear Interactive Support)
+   ========================================================================== */
+
+.stn-step__header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  font: inherit;
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.stn-step__button {
+  cursor: pointer;
+  border-radius: var(--stn-radius-6);
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+  padding: var(--stn-space-4);
+  margin: calc(var(--stn-space-4) * -1);
+}
+
+.stn-step__button:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--stn-primary) 6%, transparent);
+}
+
+.stn-step__button:focus-visible {
+  outline: none;
+  box-shadow: var(--stn-focus-ring);
+}
+
+.stn-step__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* ==========================================================================
+   5. Step Node (Circle, Dot, Icon, Spinner)
+   ========================================================================== */
+
+.stn-step__node {
+  width: var(--stn-stepper-node-size);
+  height: var(--stn-stepper-node-size);
+  border-radius: var(--stn-radius-circle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: var(--stn-stepper-font-size);
+  font-weight: var(--stn-font-weight-bold, 700);
+  line-height: 1;
+  box-sizing: border-box;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+/* --- 5대 상태 (Status) 표현 --- */
+
+/* 1. Wait (대기) */
+.stn-step--wait .stn-step__node {
+  background-color: var(--stn-stepper-node-wait-bg);
+  border: var(--stn-stepper-node-border-width) solid var(--stn-stepper-node-wait-border);
+  color: var(--stn-stepper-node-wait-fg);
+}
+
+/* 2. Running (진행 중 / 활성) */
+.stn-step--running .stn-step__node,
+.stn-step--active:not(.stn-step--error):not(.stn-step--warning):not(.stn-step--completed) .stn-step__node {
+  background-color: var(--stn-stepper-node-running-bg);
+  border: var(--stn-stepper-node-border-width-active) solid var(--stn-stepper-node-running-border);
+  color: var(--stn-stepper-node-running-fg);
+  box-shadow: 0 0 0 var(--stn-stepper-node-ring-width) var(--stn-stepper-node-running-ring);
+}
+
+.stn-step__spinner {
+  animation: stn-stepper-spin 1s linear infinite;
+  display: inline-flex;
+}
+
+@keyframes stn-stepper-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 3. Success (완료) */
+.stn-step--success .stn-step__node,
+.stn-step--completed .stn-step__node {
+  background-color: var(--stn-stepper-node-success-bg);
+  border: var(--stn-stepper-node-border-width) solid var(--stn-stepper-node-success-border);
+  color: var(--stn-stepper-node-success-fg);
+}
+
+/* 4. Error (오류) */
+.stn-step--error .stn-step__node {
+  background-color: var(--stn-stepper-node-error-bg);
+  border: var(--stn-stepper-node-border-width) solid var(--stn-stepper-node-error-border);
+  color: var(--stn-stepper-node-error-fg);
+  box-shadow: 0 0 0 var(--stn-stepper-node-ring-width) var(--stn-stepper-node-error-ring);
+}
+
+/* 5. Warning (경고) */
+.stn-step--warning .stn-step__node {
+  background-color: var(--stn-stepper-node-warning-bg);
+  border: var(--stn-stepper-node-border-width) solid var(--stn-stepper-node-warning-border);
+  color: var(--stn-stepper-node-warning-fg);
+  box-shadow: 0 0 0 var(--stn-stepper-node-ring-width) var(--stn-stepper-node-warning-ring);
+}
+
+/* ==========================================================================
+   6. Connectors (스텝 간 연결선)
+   ========================================================================== */
+
+.stn-step__connector {
+  flex: 1 1 auto;
+  position: relative;
+  margin: 0 var(--stn-stepper-gap);
+  display: flex;
+  align-items: center;
+}
+
+.stn-step__connector-line {
+  display: block;
+  width: 100%;
+  height: var(--stn-stepper-line-thickness);
+  background-color: var(--stn-stepper-line-color);
+  transition: background-color 0.25s ease;
+  border-radius: var(--stn-radius-circle);
+}
+
+.stn-step__connector-line--active {
+  background-color: var(--stn-stepper-line-active-color);
+}
+
+.stn-step__connector-line--success {
+  background-color: var(--stn-stepper-line-success-color);
+}
+
+.stn-step__connector-line--error {
+  background-color: var(--stn-stepper-line-error-color);
+}
+
+.stn-step__connector-line--warning {
+  background-color: var(--stn-stepper-line-warning-color);
+}
+
+/* ==========================================================================
+   7. Labels, Captions & Error Messages
+   ========================================================================== */
+
+.stn-step__label-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--stn-stepper-gap);
+  text-align: left;
+}
+
+/* 라벨 숨김: 정적 HTML에서 문구 마크업이 남아 있어도 노드만 보이게 */
+.stn-stepper--hide-label .stn-step__label-wrap {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.stn-step__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.stn-stepper--alternative-label .stn-step__label-wrap {
+  margin-left: 0;
+  margin-top: var(--stn-space-8);
+  align-items: center;
+  text-align: center;
+}
+
+.stn-step__label {
+  font-size: var(--stn-stepper-font-size);
+  font-weight: var(--stn-font-weight-medium, 500);
+  color: var(--stn-text-secondary);
+  line-height: 1.35;
+  transition: color 0.2s ease;
+}
+
+.stn-step--active .stn-step__label {
+  font-weight: var(--stn-font-weight-bold, 700);
+  color: var(--stn-text-primary);
+}
+
+.stn-step--completed .stn-step__label {
+  color: var(--stn-text-primary);
+}
+
+.stn-step--error .stn-step__label {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold, 700);
+}
+
+.stn-step__caption {
+  font-size: var(--stn-stepper-caption-size);
+  color: var(--stn-text-tertiary);
+  margin-top: var(--stn-space-2);
+}
+
+.stn-step__error-msg {
+  font-size: var(--stn-stepper-caption-size);
+  color: var(--stn-feedback-error);
+  margin-top: var(--stn-space-2);
+  display: flex;
+  align-items: center;
+  gap: var(--stn-space-4);
+}
+
+.stn-step__optional {
+  font-size: var(--stn-stepper-caption-size);
+  color: var(--stn-text-tertiary);
+  margin-left: var(--stn-space-6);
+}
+
+/* ==========================================================================
+   8. Vertical Content & Actions (Image 1, 2)
+   ========================================================================== */
+
+.stn-step__content {
+  font-size: var(--stn-stepper-font-size);
+  color: var(--stn-text-primary);
+  line-height: 1.6;
+}
+
+.stn-step__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-space-8);
+  margin-top: var(--stn-space-16);
+}
+
+/* ==========================================================================
+   9. No Line Modifier (showLine={false})
+   ========================================================================== */
+
+.stn-stepper--no-line .stn-step__connector {
+  display: none !important;
+}
+
+.stn-stepper--no-line .stn-step__content {
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+}
+
+/* ==========================================================================
+   10. Line Thickness Modifiers (.stn-stepper--line-*)
+   ========================================================================== */
+
+.stn-stepper.stn-stepper--line-1 { --stn-stepper-line-thickness: var(--stn-size-1) !important; }
+.stn-stepper.stn-stepper--line-2 { --stn-stepper-line-thickness: var(--stn-size-2) !important; }
+.stn-stepper.stn-stepper--line-3 { --stn-stepper-line-thickness: var(--stn-size-3) !important; }
+.stn-stepper.stn-stepper--line-4 { --stn-stepper-line-thickness: var(--stn-size-4) !important; }
+
+.stn-stepper.stn-stepper--line-xs { --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-xs) !important; }
+.stn-stepper.stn-stepper--line-sm { --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-sm) !important; }
+.stn-stepper.stn-stepper--line-md { --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-md) !important; }
+.stn-stepper.stn-stepper--line-lg { --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-lg) !important; }
+.stn-stepper.stn-stepper--line-xl { --stn-stepper-line-thickness: var(--stn-stepper-line-thickness-xl) !important; }

package/styles/components/stn-switch.css

@@ -52,7 +52,7 @@
   --stn-switch-track-h: var(--stn-switch-track-h-lg, 24px);
   --stn-switch-thumb: var(--stn-switch-thumb-size-lg, 16px);
   --stn-switch-pad: var(--stn-space-4, 4px);
-  font-size: var(--stn-text-body-size, 15px);
+  font-size: var(--stn-text-body-medium-large-size);
 }
 
 /* Colors / Semantic Tones */

package/styles/components/stn-table.css

@@ -437,6 +437,36 @@ td.stn-table__col-check .stn-checkbox {
   background: var(--stn-table-row-hover);
 }
 
+/* Table Empty State (StnEmptyState 연동 — important 제거 & 시멘틱 토큰 적용) */
+.stn-table tbody td.stn-table__empty-cell,
+.stn-table__tbody td.stn-table__empty-cell,
+.stn-table tbody td[colspan]:has(> .stn-empty-state),
+.stn-table__tbody td[colspan]:has(> .stn-empty-state) {
+  height: auto;
+  min-height: var(--stn-table-empty-min-height);
+  padding: var(--stn-table-empty-cell-padding-y) var(--stn-table-empty-cell-padding-x);
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  text-align: center;
+  vertical-align: middle;
+  background: transparent;
+}
+
+.stn-table__empty-cell .stn-empty-state,
+.stn-table__grid td[colspan] > .stn-empty-state {
+  margin: 0 auto;
+}
+
+.stn-table__tbody tr.is-empty:hover,
+.stn-table__tbody tr.is-empty:hover > td,
+.stn-table__tbody tr:has(> td.stn-table__empty-cell):hover,
+.stn-table__tbody tr:has(> td.stn-table__empty-cell):hover > td,
+.stn-table__tbody tr:has(> td[colspan] > .stn-empty-state):hover,
+.stn-table__tbody tr:has(> td[colspan] > .stn-empty-state):hover > td {
+  background: transparent;
+}
+
 /* Row Actions (호버 시 우측 버튼 노출) */
 .stn-table__grid td:has(> .stn-table__row-actions),
 .stn-table__grid th[aria-hidden]:last-child,
@@ -508,7 +538,10 @@ td.stn-table__col-check .stn-checkbox {
 .stn-table__thead th:active:has(.stn-table__sort),
 .stn-table__thead th:has(.stn-table__sort:active),
 .stn-table__thead th.is-pressed {
-  background: var(--stn-table-th-pressed-bg, var(--stn-table-th-group-bg)) !important;
+  background:
+    linear-gradient(var(--stn-table-th-pressed-bg, var(--stn-table-th-group-bg)),
+                    var(--stn-table-th-pressed-bg, var(--stn-table-th-group-bg))),
+    var(--stn-table-th-bg) !important;
 }
 
 /* Row Clickable Cursor */
@@ -794,6 +827,11 @@ th[colspan].stn-table__thead tr:not(:last-child) th::before {
   justify-content: center;
 }
 
+.stn-table__grid thead tr > th:last-child .stn-table__resizer,
+.stn-table__grid thead tr > th:nth-last-child(2):has(+ th[aria-hidden]:last-child) .stn-table__resizer {
+  right: 0;
+}
+
 .stn-table__resizer::after {
   content: '';
   display: block;

package/styles/components/stn-text-field.css

@@ -32,6 +32,10 @@
   -webkit-appearance: none;
 }
 
+.stn-text-field[list] {
+  line-height: normal;
+}
+
 .stn-text-field::placeholder {
   color: var(--stn-input-placeholder);
   font-weight: var(--stn-font-weight-medium);
@@ -344,7 +348,7 @@
   font-size: var(--stn-text-field-label-size, var(--stn-text-field-font-size, var(--stn-text-body-small-size)));
   font-weight: var(--stn-text-field-label-weight, var(--stn-font-weight-medium));
   color: var(--stn-text-primary);
-  line-height: var(--stn-text-field-label-line-height, var(--stn-line-height-default));
+  line-height: var(--stn-text-field-label-line-height, var(--stn-input-label-line-height, var(--stn-line-height-default)));
   white-space: nowrap;
   user-select: none;
   cursor: pointer;

package/styles/components/stn-tooltip.css

@@ -203,7 +203,7 @@
 
 /* SM: 소형 (높이 20px, 폰트 11px) */
 .stn-tooltip.sm {
-  --stn-tooltip-font-size: var(--stn-text-caption-small-size, var(--stn-font-size-11, 11px));
+  --stn-tooltip-font-size: var(--stn-text-caption-small-size);
   --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/layouts/stn-container.css

@@ -9,6 +9,7 @@
   --stn-container-gutter-mobile: var(--stn-space-16, 16px);
   --stn-container-gutter-tablet: var(--stn-space-16, 16px);
   --stn-container-gutter-desktop: var(--stn-space-24, 24px);
+  --stn-container-gutter-none: var(--stn-space-0);
 }
 
 .stn-container {
@@ -41,6 +42,13 @@
   }
 }
 
+/* 컨테이너 자신의 좌우 패딩만 끈다.
+   !important를 쓰지 않아, .stn-layer-1__body > .stn-container 의 16px은 그대로 남는다. */
+.stn-container--disable-gutters {
+  padding-left: var(--stn-container-gutter-none);
+  padding-right: var(--stn-container-gutter-none);
+}
+
 /* Fluid max-width. width 100%라서 캡에 닿기 전까지 화면과 같이 늘어난다.
    xs는 breakpoint가 없어서 444px. sm–xl은 STN breakpoint 폭. */
 .stn-container--xs,