@stn-uiux/pub-ui 0.1.58 → 0.1.59

package/styles/components/stn-status.css

@@ -0,0 +1,853 @@
+@charset "utf-8";
+/**
+ * STN Design System — Status Component (.stn-status)
+ *
+ * 상태 표출 및 제어 통합 컴포넌트:
+ * 1. Dot & DotGroup: 상태 점 인디케이터 (.stn-status-dot) 및 헤더 상태 요약 바 (.stn-status-dot-group)
+ * 2. Switch: 감시/미감시 인라인 토글 (.stn-status-switch) — 방패 아이콘 + 상태 텍스트 + 발광 노브 (표준 min-width 프리셋)
+ * 3. Flow: 워크플로우 진행 단계 파이프라인 (.stn-status-flow) — 다각형 배지 + 연결선
+ * 4. Severity: 알람 위험도 뱃지 및 필터 (.stn-status-severity) — critical · major · minor · warning
+ *
+ * 다크 모드 & 라이트 모드 완전 대응
+ */
+
+/* ==========================================================================
+   1. Status Dot (.stn-status-dot)
+   ========================================================================== */
+.stn-status-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-6, 6px);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-13, 13px);
+  font-weight: var(--stn-font-weight-medium, 500);
+  line-height: 1;
+  color: var(--stn-text-primary);
+  user-select: none;
+  vertical-align: middle;
+}
+
+/* Dot 위치 (Dot Position) */
+.stn-status-dot.dot-right {
+  flex-direction: row-reverse;
+}
+.stn-status-dot.dot-none .stn-status-dot__point {
+  display: none !important;
+}
+
+/* Size 스케일 — STN 표준 규격: xs · sm · md(기본) · lg · xl */
+/* xs — 18px */
+.stn-status-dot.xs {
+  font-size: var(--stn-font-size-11, 11px);
+  gap: var(--stn-space-4, 4px);
+}
+.stn-status-dot.xs .stn-status-dot__point {
+  width: var(--stn-size-6, 6px);
+  height: var(--stn-size-6, 6px);
+}
+.stn-status-dot.xs.bordered {
+  height: var(--stn-size-18, 18px);
+  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 */
+.stn-status-dot.sm {
+  font-size: var(--stn-font-size-12, 12px);
+  gap: var(--stn-space-4, 4px);
+}
+.stn-status-dot.sm .stn-status-dot__point {
+  width: var(--stn-size-7, 7px);
+  height: var(--stn-size-7, 7px);
+}
+.stn-status-dot.sm.bordered {
+  height: var(--stn-size-20, 20px);
+  padding: 0 var(--stn-space-6, 6px);
+}
+.stn-status-dot.sm .stn-status-dot__count {
+  font-size: var(--stn-font-size-11, 11px);
+}
+
+/* md — 24px (기본) */
+.stn-status-dot.md {
+  font-size: var(--stn-font-size-13, 13px);
+  gap: var(--stn-space-6, 6px);
+}
+.stn-status-dot.md .stn-status-dot__point {
+  width: var(--stn-size-8, 8px);
+  height: var(--stn-size-8, 8px);
+}
+.stn-status-dot.md.bordered {
+  height: var(--stn-size-24, 24px);
+  padding: 0 var(--stn-space-8, 8px);
+}
+.stn-status-dot.md .stn-status-dot__count {
+  font-size: var(--stn-font-size-12, 12px);
+}
+
+/* lg — 28px */
+.stn-status-dot.lg {
+  font-size: var(--stn-font-size-14, 14px);
+  gap: var(--stn-space-8, 8px);
+}
+.stn-status-dot.lg .stn-status-dot__point {
+  width: var(--stn-size-9, 9px);
+  height: var(--stn-size-9, 9px);
+}
+.stn-status-dot.lg.bordered {
+  height: var(--stn-size-28, 28px);
+  padding: 0 var(--stn-space-10, 10px);
+}
+.stn-status-dot.lg .stn-status-dot__count {
+  font-size: var(--stn-font-size-13, 13px);
+}
+
+/* xl — 32px */
+.stn-status-dot.xl {
+  font-size: var(--stn-font-size-15, 15px);
+  gap: var(--stn-space-8, 8px);
+}
+.stn-status-dot.xl .stn-status-dot__point {
+  width: var(--stn-size-10, 10px);
+  height: var(--stn-size-10, 10px);
+}
+.stn-status-dot.xl.bordered {
+  height: var(--stn-size-32, 32px);
+  padding: 0 var(--stn-space-12, 12px);
+}
+.stn-status-dot.xl .stn-status-dot__count {
+  font-size: var(--stn-font-size-14, 14px);
+}
+
+/* 여백(Gap) 조절 */
+.stn-status-dot.gap-none { gap: 0; }
+.stn-status-dot.gap-xs { gap: var(--stn-space-2, 2px); }
+.stn-status-dot.gap-sm { gap: var(--stn-space-4, 4px); }
+.stn-status-dot.gap-md { gap: var(--stn-space-6, 6px); }
+.stn-status-dot.gap-lg { gap: var(--stn-space-10, 10px); }
+
+/* 단독 테두리 캡슐 모드 (Bordered Dot) */
+.stn-status-dot.bordered {
+  height: var(--stn-size-24, 24px);
+  padding: 0 var(--stn-space-8, 8px);
+  border-radius: var(--stn-radius-chip-pill, 9999px);
+  border: 1px solid var(--stn-status-dot-bordered-border);
+  background-color: var(--stn-layer-bg-card);
+  box-sizing: border-box;
+}
+
+.stn-status-dot__point {
+  display: inline-block;
+  width: var(--stn-size-8, 8px);
+  height: var(--stn-size-8, 8px);
+  border-radius: var(--stn-radius-circle, 50%);
+  flex-shrink: 0;
+  background-color: var(--stn-text-secondary);
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* 수치 및 카운트 */
+.stn-status-dot__count {
+  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-weight: var(--stn-font-weight-bold, 700);
+  line-height: 1;
+  color: var(--stn-text-primary);
+  margin-left: var(--stn-space-2, 2px);
+}
+
+/* 상태별 스타일 (다크 기본) */
+.stn-status-dot.up .stn-status-dot__point {
+  background-color: var(--stn-primary);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--stn-primary) 80%, transparent);
+}
+
+.stn-status-dot.down .stn-status-dot__point {
+  background-color: var(--stn-gray-550);
+}
+
+.stn-status-dot.critical .stn-status-dot__point {
+  background-color: var(--stn-grade-critical);
+  box-shadow: 0 0 6px var(--stn-grade-critical);
+}
+
+.stn-status-dot.major .stn-status-dot__point {
+  background-color: var(--stn-grade-major);
+  box-shadow: 0 0 6px var(--stn-grade-major);
+}
+
+.stn-status-dot.minor .stn-status-dot__point {
+  background-color: var(--stn-grade-minor);
+  box-shadow: 0 0 6px var(--stn-grade-minor);
+}
+
+.stn-status-dot.warning .stn-status-dot__point {
+  background-color: var(--stn-grade-warning);
+  box-shadow: 0 0 6px var(--stn-grade-warning);
+}
+
+.stn-status-dot.success .stn-status-dot__point {
+  background-color: var(--stn-feedback-success);
+  box-shadow: 0 0 6px var(--stn-feedback-success);
+}
+
+.stn-status-dot.info .stn-status-dot__point {
+  background-color: var(--stn-feedback-info);
+  box-shadow: 0 0 6px var(--stn-feedback-info);
+}
+
+.stn-status-dot.secondary .stn-status-dot__point {
+  background-color: var(--stn-purple-400);
+  box-shadow: 0 0 6px var(--stn-purple-400);
+}
+
+.stn-status-dot.neutral .stn-status-dot__point {
+  background-color: var(--stn-gray-400);
+}
+
+.stn-status-dot.primary .stn-status-dot__point {
+  background-color: var(--stn-primary);
+  box-shadow: 0 0 6px var(--stn-primary);
+}
+
+.stn-status-dot.error .stn-status-dot__point {
+  background-color: var(--stn-feedback-error);
+  box-shadow: 0 0 6px var(--stn-feedback-error);
+}
+
+/* 펄스 애니메이션 */
+.stn-status-dot.pulse .stn-status-dot__point {
+  animation: stn-status-pulse 1.8s infinite;
+}
+
+@keyframes stn-status-pulse {
+  0% { transform: scale(0.95); opacity: 0.8; }
+  50% { transform: scale(1.15); opacity: 1; }
+  100% { transform: scale(0.95); opacity: 0.8; }
+}
+
+/* Dot — 라이트 모드 보정 (토큰이 자동 전환되지 않는 box-shadow 강도 조정) */
+[data-theme='light'] .stn-status-dot.up .stn-status-dot__point {
+  background-color: var(--stn-primary);
+  box-shadow: 0 0 5px color-mix(in srgb, var(--stn-primary) 50%, transparent);
+}
+
+[data-theme='light'] .stn-status-dot.down .stn-status-dot__point {
+  background-color: var(--stn-gray-400);
+}
+
+/* ==========================================================================
+   1-2. Status Dot Group (.stn-status-dot-group)
+   헤더 및 대시보드 상태 요약 바 (구 System Chip 기능 완전 통합)
+   ========================================================================== */
+.stn-status-dot-group {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.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);
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.stn-status-dot-group__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-6, 6px);
+  padding: 0 var(--stn-space-10, 10px);
+  height: 100%;
+  box-sizing: border-box;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-12, 12px);
+  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);
+  transition: opacity 0.2s ease, background-color 0.15s ease;
+}
+
+.stn-status-dot-group__item:last-child {
+  border-right: none;
+}
+
+.stn-status-dot-group.no-border .stn-status-dot-group__item {
+  border-right: none;
+  padding: 0 var(--stn-space-6, 6px);
+}
+
+
+/* ==========================================================================
+   2. Status Switch (.stn-status-switch)
+   ========================================================================== */
+.stn-status-switch {
+  --_switch-bg: var(--stn-status-switch-bg);
+  --_switch-border: var(--stn-status-switch-border);
+  --_switch-color: var(--stn-status-switch-color);
+  --_badge-bg: var(--stn-status-switch-badge-bg);
+  --_badge-color: var(--stn-status-switch-badge-color);
+  --_thumb-bg: var(--stn-status-switch-thumb-bg);
+  --_thumb-shadow: none;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--stn-space-4, 4px);
+  height: var(--stn-size-24, 24px);
+  min-width: var(--stn-size-80, 80px);
+  box-sizing: border-box;
+  padding: 0 var(--stn-space-6, 6px);
+  border-radius: var(--stn-radius-chip-pill, 9999px);
+  border: 1px solid var(--_switch-border);
+  background-color: var(--_switch-bg);
+  color: var(--_switch-color);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-12, 12px);
+  font-weight: var(--stn-font-weight-medium, 500);
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stn-status-switch:hover {
+  filter: brightness(1.08);
+}
+
+/* Checked (감시 On - 다크) */
+.stn-status-switch.is-checked {
+  --_switch-border: var(--stn-status-switch-checked-border);
+  --_switch-bg: var(--stn-status-switch-checked-bg);
+  --_switch-color: var(--stn-status-switch-checked-color);
+  --_badge-bg: var(--stn-status-switch-checked-badge-bg);
+  --_badge-color: var(--stn-status-switch-checked-badge-color);
+  --_thumb-bg: var(--stn-status-switch-checked-thumb-bg);
+  --_thumb-shadow: var(--stn-status-switch-checked-thumb-shadow);
+}
+
+/* Switch — 라이트 모드 (토큰이 data-theme='light'에서 자동 전환됨) */
+[data-theme='light'] .stn-status-switch:hover {
+  filter: brightness(0.97);
+}
+
+.stn-status-switch__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stn-size-12, 12px);
+  height: var(--stn-size-12, 12px);
+  border-radius: var(--stn-radius-circle, 50%);
+  background: var(--_badge-bg);
+  color: var(--_badge-color);
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+}
+
+.stn-status-switch__badge .stn-icon {
+  width: var(--stn-size-8, 8px);
+  height: var(--stn-size-8, 8px);
+}
+
+.stn-status-switch__label {
+  flex: 1 1 auto;
+  text-align: center;
+  padding: 0 var(--stn-space-2, 2px);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.stn-status-switch__thumb {
+  width: var(--stn-size-8, 8px);
+  height: var(--stn-size-8, 8px);
+  border-radius: var(--stn-radius-circle, 50%);
+  background-color: var(--_thumb-bg);
+  box-shadow: var(--_thumb-shadow);
+  flex-shrink: 0;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ==========================================================================
+   Width Presets (.w80 ~ .w200 / .full)
+   스위치는 min-width 기반으로 작동하여 짧은 텍스트는 고정 너비를 유지하고
+   긴 텍스트는 자연스럽게 늘어남(Hug)을 지원합니다.
+   ========================================================================== */
+.stn-status-switch.w80 {
+  min-width: var(--stn-size-80, 80px);
+}
+.stn-status-switch.w100 {
+  min-width: var(--stn-size-100, 100px);
+}
+.stn-status-switch.w120 {
+  min-width: var(--stn-size-120, 120px);
+}
+.stn-status-switch.w140 {
+  min-width: var(--stn-size-140, 140px);
+}
+.stn-status-switch.w160 {
+  min-width: var(--stn-size-160, 160px);
+}
+.stn-status-switch.w180 {
+  min-width: var(--stn-size-180, 180px);
+}
+.stn-status-switch.w200 {
+  min-width: var(--stn-size-200, 200px);
+}
+.stn-status-switch.full {
+  width: 100%;
+  min-width: 100%;
+}
+
+
+/* ==========================================================================
+   3. Status Flow (.stn-status-flow)
+   ========================================================================== */
+.stn-status-flow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-8, 8px);
+  white-space: nowrap;
+}
+
+.stn-status-flow__step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-6, 6px);
+  height: var(--stn-size-26, 26px);
+  padding: 0 var(--stn-space-10, 10px) 0 var(--stn-space-4, 4px);
+  border-radius: var(--stn-radius-6, 6px);
+  background-color: var(--stn-status-flow-step-bg);
+  border: 1px solid var(--stn-status-flow-step-border);
+  color: var(--stn-status-flow-step-color);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-12, 12px);
+  font-weight: var(--stn-font-weight-medium, 500);
+  transition: all 0.2s ease;
+}
+
+.stn-status-flow__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stn-size-18, 18px);
+  height: var(--stn-size-18, 18px);
+  border-radius: var(--stn-radius-4, 4px);
+  color: var(--stn-static-white);
+  font-size: var(--stn-font-size-11, 11px);
+  flex-shrink: 0;
+}
+
+/* 테두리 있는 거(Bordered, 기본) vs 테두리 없는 거(No-border / Flat) */
+.stn-status-flow.no-border .stn-status-flow__step {
+  background-color: transparent;
+  border-color: transparent;
+  padding: 0 var(--stn-space-4, 4px);
+}
+
+.stn-status-flow.no-border .stn-status-flow__step.is-current {
+  box-shadow: none;
+  font-weight: var(--stn-font-weight-bold, 700);
+}
+
+/* Size 스케일 — STN 표준 규격: xs · sm · md(기본) · lg · xl */
+/* xs — 20px */
+.stn-status-flow.xs .stn-status-flow__step {
+  height: var(--stn-size-20, 20px);
+  font-size: var(--stn-font-size-11, 11px);
+  padding: 0 var(--stn-space-6, 6px) 0 var(--stn-space-2, 2px);
+  gap: var(--stn-space-4, 4px);
+}
+.stn-status-flow.xs .stn-status-flow__badge {
+  width: var(--stn-size-14, 14px);
+  height: var(--stn-size-14, 14px);
+  font-size: var(--stn-font-size-9, 9px);
+  border-radius: var(--stn-radius-2, 2px);
+}
+.stn-status-flow.xs .stn-status-flow__badge .stn-icon {
+  width: var(--stn-size-9, 9px);
+  height: var(--stn-size-9, 9px);
+}
+
+/* sm — 22px */
+.stn-status-flow.sm .stn-status-flow__step {
+  height: var(--stn-size-22, 22px);
+  font-size: var(--stn-font-size-11, 11px);
+  padding: 0 var(--stn-space-8, 8px) 0 var(--stn-space-3, 3px);
+  gap: var(--stn-space-5, 5px);
+}
+.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);
+  border-radius: var(--stn-radius-3, 3px);
+}
+.stn-status-flow.sm .stn-status-flow__badge .stn-icon {
+  width: var(--stn-size-10, 10px);
+  height: var(--stn-size-10, 10px);
+}
+
+/* md — 26px (기본) */
+.stn-status-flow.md .stn-status-flow__step {
+  height: var(--stn-size-26, 26px);
+  font-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);
+}
+.stn-status-flow.md .stn-status-flow__badge {
+  width: var(--stn-size-18, 18px);
+  height: var(--stn-size-18, 18px);
+  font-size: var(--stn-font-size-11, 11px);
+  border-radius: var(--stn-radius-4, 4px);
+}
+
+/* lg — 32px */
+.stn-status-flow.lg .stn-status-flow__step {
+  height: var(--stn-size-32, 32px);
+  font-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);
+  border-radius: var(--stn-radius-4, 4px);
+}
+.stn-status-flow.lg .stn-status-flow__badge .stn-icon {
+  width: var(--stn-size-13, 13px);
+  height: var(--stn-size-13, 13px);
+}
+
+/* xl — 38px */
+.stn-status-flow.xl .stn-status-flow__step {
+  height: var(--stn-size-38, 38px);
+  font-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);
+  border-radius: var(--stn-radius-6, 6px);
+}
+.stn-status-flow.xl .stn-status-flow__badge .stn-icon {
+  width: var(--stn-size-15, 15px);
+  height: var(--stn-size-15, 15px);
+}
+
+/* Flow 단계별 배지 색상 */
+.stn-status-flow__badge--critical { background-color: var(--stn-grade-critical); }
+.stn-status-flow__badge--warning  { background-color: var(--stn-grade-warning); }
+.stn-status-flow__badge--major    { background-color: var(--stn-grade-major); }
+.stn-status-flow__badge--minor    { background-color: var(--stn-grade-minor); color: var(--stn-gray-950); }
+.stn-status-flow__badge--primary  { background-color: var(--stn-primary); }
+.stn-status-flow__badge--secondary { background-color: var(--stn-purple-400); }
+.stn-status-flow__badge--success  { background-color: var(--stn-feedback-success); }
+.stn-status-flow__badge--error    { background-color: var(--stn-feedback-error); }
+.stn-status-flow__badge--info     { background-color: var(--stn-feedback-info); }
+.stn-status-flow__badge--neutral  { background-color: var(--stn-gray-500); }
+
+.stn-status-flow__connector {
+  display: inline-flex;
+  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);
+  user-select: none;
+}
+
+.stn-status-flow__step.is-current {
+  border-color: var(--stn-primary);
+  box-shadow: var(--stn-status-flow-current-shadow);
+}
+
+.stn-status-flow__step.is-dimmed {
+  opacity: 0.45;
+}
+
+/* ==========================================================================
+   4. Status Severity (.stn-status-severity)
+   알람 위험도 뱃지 및 필터 (StnStatus.Severity)
+   위험도: critical · major · minor · warning
+   크기: sm (18px) · md (20px, 기본) · lg (24px)
+   변형: contained (기본 채움형) · outlined (외곽선형) · none (아이콘+텍스트만) · filter (필터 버튼) · glow (발광 효과)
+   모양: 기본 (4px 반경) · round / rounded-full (알약/원형 9999px) · icon-only (아이콘 전용)
+   ========================================================================== */
+
+.stn-status-severity-filter-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-space-8, 8px);
+  flex-wrap: wrap;
+}
+
+.stn-status-severity {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-space-2, 2px);
+  border-radius: var(--stn-radius-4, 4px);
+  font-family: var(--stn-font-body, Pretendard, sans-serif);
+  line-height: 1.2;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  transition: opacity 0.15s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+}
+
+/* Shape: round / rounded-full (9999px 알약형) */
+.stn-status-severity.round,
+.stn-status-severity.rounded-full {
+  border-radius: var(--stn-radius-circle, 9999px);
+}
+
+/* 4-1. 기본 뱃지 모드 (Badge - Display: sm / md / lg) */
+.stn-status-severity.badge,
+.stn-status-severity:not(.filter) {
+  height: var(--stn-severity-badge-height-md, var(--stn-severity-badge-height, var(--stn-size-20, 20px)));
+  padding: var(--stn-severity-badge-padding-md, var(--stn-severity-badge-padding, var(--stn-space-2, 2px) var(--stn-space-8, 8px)));
+  font-size: var(--stn-font-size-11, 11px);
+  font-weight: var(--stn-font-weight-bold, 700);
+  letter-spacing: -0.1px;
+}
+
+.stn-status-severity.badge .stn-status-severity__icon,
+.stn-status-severity:not(.filter) .stn-status-severity__icon {
+  width: var(--stn-severity-badge-icon-size-md, var(--stn-severity-badge-icon-size, var(--stn-size-14, 14px)));
+  height: var(--stn-severity-badge-icon-size-md, var(--stn-severity-badge-icon-size, var(--stn-size-14, 14px)));
+}
+
+/* Sizes: sm (18px) */
+.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-6, 6px));
+  font-size: var(--stn-font-size-10, 10px);
+  gap: var(--stn-space-2, 2px);
+}
+
+.stn-status-severity.sm .stn-status-severity__icon {
+  width: var(--stn-severity-badge-icon-size-sm, var(--stn-size-12, 12px));
+  height: var(--stn-severity-badge-icon-size-sm, var(--stn-size-12, 12px));
+}
+
+/* Sizes: md (20px - 기본) */
+.stn-status-severity.md {
+  height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
+  padding: var(--stn-severity-badge-padding-md, var(--stn-space-2, 2px) var(--stn-space-8, 8px));
+  font-size: var(--stn-font-size-11, 11px);
+  gap: var(--stn-space-2, 2px);
+}
+
+.stn-status-severity.md .stn-status-severity__icon {
+  width: var(--stn-severity-badge-icon-size-md, var(--stn-size-14, 14px));
+  height: var(--stn-severity-badge-icon-size-md, var(--stn-size-14, 14px));
+}
+
+/* Sizes: lg (24px) */
+.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);
+  gap: var(--stn-space-4, 4px);
+}
+
+.stn-status-severity.lg .stn-status-severity__icon {
+  width: var(--stn-severity-badge-icon-size-lg, var(--stn-size-16, 16px));
+  height: var(--stn-severity-badge-icon-size-lg, var(--stn-size-16, 16px));
+}
+
+/* 4-2. 아이콘 전용 모드 (Icon-Only - 정사각 4px / 원형 9999px) */
+.stn-status-severity.icon-only {
+  width: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
+  height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
+  padding: 0;
+  gap: 0;
+  flex-shrink: 0;
+}
+
+.stn-status-severity.icon-only.sm {
+  width: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
+  height: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
+  padding: 0;
+}
+
+.stn-status-severity.icon-only.md {
+  width: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
+  height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
+  padding: 0;
+}
+
+.stn-status-severity.icon-only.lg {
+  width: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
+  height: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
+  padding: 0;
+}
+
+.stn-status-severity.icon-only .stn-status-severity__label {
+  display: none;
+}
+
+/* 4-3. 필터 모드 (Filter Toggle - 52px x 26px) */
+.stn-status-severity.filter {
+  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-weight: var(--stn-font-weight-bold, 700);
+  cursor: pointer;
+  background: transparent;
+}
+
+.stn-status-severity.filter .stn-status-severity__icon {
+  width: var(--stn-severity-icon-size, var(--stn-size-16, 16px));
+  height: var(--stn-severity-icon-size, var(--stn-size-16, 16px));
+}
+
+.stn-status-severity.filter:hover {
+  filter: brightness(1.15);
+}
+
+.stn-status-severity.filter:active {
+  filter: brightness(0.92);
+}
+
+/* 필터 비활성 상태 */
+.stn-status-severity.filter.is-inactive,
+.stn-status-severity.filter:not(.is-active) {
+  opacity: 0.35;
+  filter: grayscale(0.5);
+  box-shadow: none !important;
+}
+
+.stn-status-severity.filter.is-inactive:hover,
+.stn-status-severity.filter:not(.is-active):hover {
+  opacity: 0.65;
+  filter: grayscale(0.2);
+}
+
+/* 아이콘 래퍼 */
+.stn-status-severity__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.stn-status-severity__icon img,
+.stn-status-severity__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.stn-status-severity__label {
+  display: inline-block;
+  line-height: 1;
+}
+
+/* 4-4. 심각도 등급 및 Variant 스타일 (contained, outlined, none) */
+
+/* Contained (기본 채움형 — .contained 또는 기본 badge) */
+.stn-status-severity.critical,
+.stn-status-severity.contained.critical {
+  --stn-badge-glow-color: var(--stn-severity-glow);
+  background: var(--stn-severity-critical-bg);
+  border: 1px solid var(--stn-severity-critical-border);
+  color: var(--stn-severity-fg);
+}
+
+.stn-status-severity.major,
+.stn-status-severity.contained.major {
+  --stn-badge-glow-color: var(--stn-severity-glow-major);
+  background: var(--stn-severity-major-bg);
+  border: 1px solid var(--stn-severity-major-border);
+  color: var(--stn-severity-fg);
+}
+
+.stn-status-severity.minor,
+.stn-status-severity.contained.minor {
+  --stn-badge-glow-color: var(--stn-severity-glow-minor);
+  background: var(--stn-severity-minor-bg);
+  border: 1px solid var(--stn-severity-minor-border);
+  color: var(--stn-severity-fg);
+}
+
+.stn-status-severity.warning,
+.stn-status-severity.contained.warning {
+  --stn-badge-glow-color: var(--stn-severity-glow-warning);
+  background: var(--stn-severity-warning-bg);
+  border: 1px solid var(--stn-severity-warning-border);
+  color: var(--stn-severity-fg);
+}
+
+/* Outlined (외곽선형 — 배경 없이 투명 외곽선과 텍스트로만 표시) */
+.stn-status-severity.outlined {
+  background: transparent;
+}
+
+.stn-status-severity.outlined.critical {
+  --stn-badge-glow-color: var(--stn-severity-glow);
+  background: transparent;
+  border: 1px solid var(--stn-severity-critical-border);
+  color: var(--stn-grade-critical);
+}
+
+.stn-status-severity.outlined.major {
+  --stn-badge-glow-color: var(--stn-severity-glow-major);
+  background: transparent;
+  border: 1px solid var(--stn-severity-major-border);
+  color: var(--stn-grade-major);
+}
+
+.stn-status-severity.outlined.minor {
+  --stn-badge-glow-color: var(--stn-severity-glow-minor);
+  background: transparent;
+  border: 1px solid var(--stn-severity-minor-border);
+  color: var(--stn-grade-minor);
+}
+
+.stn-status-severity.outlined.warning {
+  --stn-badge-glow-color: var(--stn-severity-glow-warning);
+  background: transparent;
+  border: 1px solid var(--stn-severity-warning-border);
+  color: var(--stn-grade-warning);
+}
+
+/* None (배경 및 테두리 없음 — 아이콘과 글자만 표시) */
+.stn-status-severity.none {
+  background: transparent !important;
+  border: none !important;
+  padding-left: 0;
+  padding-right: 0;
+  box-shadow: none !important;
+}
+
+.stn-status-severity.none.critical {
+  color: var(--stn-grade-critical);
+}
+
+.stn-status-severity.none.major {
+  color: var(--stn-grade-major);
+}
+
+.stn-status-severity.none.minor {
+  color: var(--stn-grade-minor);
+}
+
+.stn-status-severity.none.warning {
+  color: var(--stn-grade-warning);
+}
+
+/* 4-5. Glow 발광 변형 (.glow) */
+.stn-status-severity.glow {
+  box-shadow: 0 0 var(--stn-space-8) var(--stn-badge-glow-color);
+}