@stn-uiux/pub-ui 0.1.86 → 0.1.87

package/styles/components/stn-menu.css

@@ -0,0 +1,467 @@
+/**
+ * ==========================================================================
+ * STN Design System — StnMenu CSS
+ * 
+ * 4대 표준 규격(Size, Width, Semantic Tokens) 엄격 준수
+ * ==========================================================================
+ */
+
+/* ==========================================================================
+   1. CSS Custom Properties (Menu Semantic Tokens)
+   ========================================================================== */
+:root {
+  --stn-menu-bg: var(--stn-dropdown-menu-bg, var(--stn-elevation-surface-0));
+  --stn-menu-border: var(--stn-dropdown-menu-border, var(--stn-border-subtle));
+  --stn-menu-shadow: var(--stn-dropdown-menu-shadow, var(--stn-shadow-md));
+  --stn-menu-radius: var(--stn-radius-8, 8px);
+
+  /* 호버 상태: 드롭다운 옵션 hover 스타일과 100% 동일하게 일원화 */
+  --stn-menu-item-hover: var(--stn-dropdown-menu-hover-bg);
+  --stn-menu-item-hover-fg: var(--stn-text-primary);
+
+  /* 클릭/누름(Active) 상태: 드롭다운 옵션 active 스타일과 일치 */
+  --stn-menu-item-active: var(--stn-dropdown-menu-hover-bg);
+
+  /* 선택(Selected) 상태: 드롭다운 옵션 selected 스타일과 일치 */
+  --stn-menu-item-selected: var(--stn-dropdown-menu-selected-bg);
+  --stn-menu-item-selected-hover: var(--stn-dropdown-menu-hover-bg);
+  --stn-menu-item-selected-active: var(--stn-dropdown-menu-hover-bg);
+  --stn-menu-item-selected-fg: var(--stn-primary);
+
+  /* 위험/파괴적(Destructive) 상태 */
+  --stn-menu-item-destructive-fg: var(--stn-grade-critical);
+  --stn-menu-item-destructive-hover: color-mix(in srgb, var(--stn-grade-critical) 12%, var(--stn-dropdown-menu-hover-bg));
+  --stn-menu-item-destructive-active: color-mix(in srgb, var(--stn-grade-critical) 20%, var(--stn-dropdown-menu-hover-bg));
+}
+
+/* ==========================================================================
+   2. StnMenu Root & Paper Box (드롭다운 .select_option과 100% 일치)
+   ========================================================================== */
+.stn-menu-paper {
+  box-sizing: border-box;
+  background: var(--stn-menu-bg);
+  border: var(--stn-size-1, 1px) solid var(--stn-menu-border);
+  border-radius: var(--stn-menu-radius, var(--stn-radius-8, 8px));
+  box-shadow: var(--stn-menu-shadow);
+  color: var(--stn-text-primary);
+  outline: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: max-content;
+  min-width: var(--stn-menu-min-width, var(--stn-size-140, 140px));
+  max-width: calc(100vw - var(--stn-space-32, 32px));
+  z-index: var(--stn-menu-z, var(--stn-elevation-z-popover, 250));
+  padding: var(--stn-space-4, 4px); /* StnDropdown .select_option과 100% 동일한 상하좌우 4px 패딩 */
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
+}
+
+/* Elevation Shadow Levels */
+.stn-menu-paper--elev-0 { box-shadow: none; }
+.stn-menu-paper--elev-1 { box-shadow: var(--stn-shadow-sm); }
+.stn-menu-paper--elev-2 { box-shadow: var(--stn-shadow-md); }
+.stn-menu-paper--elev-3 { box-shadow: var(--stn-shadow-lg); }
+
+/* ==========================================================================
+   3. StnMenuList (메뉴 아이템 리스트 컨테이너)
+   ========================================================================== */
+.stn-menu-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-2, 2px);
+  width: 100%;
+}
+
+.stn-menu-list > li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ==========================================================================
+   4. 5대 표준 Size 규격 (xs · sm · md · lg · xl)
+   ========================================================================== */
+.stn-menu--xs,
+.stn-menu-list--xs,
+.stn-menu-item--xs {
+  --stn-menu-item-height: var(--stn-menu-item-height-xs, var(--stn-size-24, 24px));
+  --stn-menu-item-padding-y: var(--stn-space-2, 2px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+  --stn-menu-item-font-size: var(--stn-font-size-caption, 11px);
+  --stn-menu-item-icon-size: var(--stn-size-14, 14px);
+  --stn-menu-item-gap: var(--stn-space-4, 4px);
+}
+
+.stn-menu--sm,
+.stn-menu-list--sm,
+.stn-menu-item--sm,
+.stn-menu-list--dense,
+.stn-menu-item--dense {
+  --stn-menu-item-height: var(--stn-menu-item-height-sm, var(--stn-size-28, 28px));
+  --stn-menu-item-padding-y: var(--stn-space-4, 4px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+  --stn-menu-item-font-size: var(--stn-font-size-caption, 12px);
+  --stn-menu-item-icon-size: var(--stn-size-16, 16px);
+  --stn-menu-item-gap: var(--stn-space-4, 4px);
+}
+
+/* StnDropdown .select_option > li 와 100% 동일한 md 기본 규격 (SSOT) */
+.stn-menu--md,
+.stn-menu-list--md,
+.stn-menu-item--md {
+  --stn-menu-item-height: var(--stn-menu-item-height-md, var(--stn-size-32, 32px));
+  --stn-menu-item-padding-y: var(--stn-space-6, 6px);
+  --stn-menu-item-padding-x: var(--stn-space-8, 8px);
+  --stn-menu-item-font-size: var(--stn-text-body-small-size, 13px);
+  --stn-menu-item-icon-size: var(--stn-size-16, 16px);
+  --stn-menu-item-gap: var(--stn-space-6, 6px);
+}
+
+.stn-menu--lg,
+.stn-menu-list--lg,
+.stn-menu-item--lg {
+  --stn-menu-item-height: var(--stn-menu-item-height-lg, var(--stn-size-38, 38px));
+  --stn-menu-item-padding-y: var(--stn-space-8, 8px);
+  --stn-menu-item-padding-x: var(--stn-space-10, 10px);
+  --stn-menu-item-font-size: var(--stn-font-size-body-2, 14px);
+  --stn-menu-item-icon-size: var(--stn-size-18, 18px);
+  --stn-menu-item-gap: var(--stn-space-8, 8px);
+}
+
+.stn-menu--xl,
+.stn-menu-list--xl,
+.stn-menu-item--xl {
+  --stn-menu-item-height: var(--stn-menu-item-height-xl, var(--stn-size-44, 44px));
+  --stn-menu-item-padding-y: var(--stn-space-10, 10px);
+  --stn-menu-item-padding-x: var(--stn-space-12, 12px);
+  --stn-menu-item-font-size: var(--stn-font-size-body-1, 16px);
+  --stn-menu-item-icon-size: var(--stn-size-20, 20px);
+  --stn-menu-item-gap: var(--stn-space-10, 10px);
+}
+
+/* ==========================================================================
+   5. 패딩 규격 프리셋 (Padding Presets)
+   ========================================================================== */
+.stn-menu-list--pad-none,
+.stn-menu-item--pad-none,
+.stn-menu-list--pad-none .stn-menu-item {
+  --stn-menu-item-padding-y: 0;
+  --stn-menu-item-padding-x: 0;
+}
+
+.stn-menu-list--pad-xs,
+.stn-menu-item--pad-xs,
+.stn-menu-list--pad-xs .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-2, 2px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+}
+
+.stn-menu-list--pad-sm,
+.stn-menu-item--pad-sm,
+.stn-menu-list--pad-sm .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-4, 4px);
+  --stn-menu-item-padding-x: var(--stn-space-6, 6px);
+}
+
+.stn-menu-list--pad-md,
+.stn-menu-item--pad-md,
+.stn-menu-list--pad-md .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-6, 6px);
+  --stn-menu-item-padding-x: var(--stn-space-8, 8px);
+}
+
+.stn-menu-list--pad-lg,
+.stn-menu-item--pad-lg,
+.stn-menu-list--pad-lg .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-8, 8px);
+  --stn-menu-item-padding-x: var(--stn-space-10, 10px);
+}
+
+.stn-menu-list--pad-xl,
+.stn-menu-item--pad-xl,
+.stn-menu-list--pad-xl .stn-menu-item {
+  --stn-menu-item-padding-y: var(--stn-space-10, 10px);
+  --stn-menu-item-padding-x: var(--stn-space-12, 12px);
+}
+
+/* ==========================================================================
+   6. 4대 표준 너비 규격 (Width Presets — STN 4대 표준 규격: .w80 ~ .w200, .full)
+   ========================================================================== */
+.stn-menu.w80  { width: var(--stn-size-80); min-width: var(--stn-size-80); }
+.stn-menu.w100 { width: var(--stn-size-100); min-width: var(--stn-size-100); }
+.stn-menu.w120 { width: var(--stn-size-120); min-width: var(--stn-size-120); }
+.stn-menu.w140 { width: var(--stn-size-140); min-width: var(--stn-size-140); }
+.stn-menu.w160 { width: var(--stn-size-160); min-width: var(--stn-size-160); }
+.stn-menu.w180 { width: var(--stn-size-180); min-width: var(--stn-size-180); }
+.stn-menu.w200 { width: var(--stn-size-200); min-width: var(--stn-size-200); }
+.stn-menu.full { width: 100%; max-width: 100%; }
+
+/* 페이퍼 내부 리스트는 페이퍼 안쪽 패딩 영역(100%)을 채우도록 하여 우측 짤림 방지 */
+.stn-menu-paper .stn-menu-list {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* ==========================================================================
+   7. StnMenuItem (개별 메뉴 버튼 행) — StnDropdown li와 100% 동일 규격
+   ========================================================================== */
+.stn-menu-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  border-radius: var(--stn-radius-4, 4px);
+  min-height: var(--stn-menu-item-height, 32px);
+  padding: var(--stn-menu-item-padding-y, var(--stn-space-6, 6px)) var(--stn-menu-item-padding-x, var(--stn-space-8, 8px));
+  gap: var(--stn-menu-item-gap, var(--stn-space-6, 6px));
+  background: transparent;
+  border: none;
+  color: var(--stn-text-primary);
+  font-size: var(--stn-menu-item-font-size, var(--stn-text-body-small-size, 13px));
+  line-height: var(--stn-line-height-tight, 1.4);
+  font-weight: var(--stn-font-weight-medium, 500);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color var(--stn-motion-duration-fast, 150ms) ease,
+    color var(--stn-motion-duration-fast, 150ms) ease;
+  -webkit-appearance: none;
+}
+
+/* 호버 상태 (Hover) — 드롭다운 li:hover와 100% 동일한 hover 스타일 */
+.stn-menu-item:hover:not(.is-disabled),
+.stn-menu-item.is-active:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  color: var(--stn-text-primary);
+}
+
+.stn-menu-item:hover:not(.is-disabled) .stn-menu-item-icon:not(:has(.stn-menu-radio)):not(:has(.stn-menu-checkbox)) {
+  color: var(--stn-text-primary);
+}
+
+/* 클릭/누름 상태 (Active / Clicked) */
+.stn-menu-item:active:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+}
+
+/* 포커스 링 (Focus Visible — 키보드 탐색) */
+.stn-menu-item:focus-visible {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring);
+  outline-offset: calc(var(--stn-focus-ring-width, 2px) * -1);
+}
+
+/* 선택(Selected) 상태 — 드롭다운 li.selected와 100% 동일한 스타일 */
+.stn-menu-item.is-selected {
+  background-color: var(--stn-dropdown-menu-selected-bg);
+  color: var(--stn-primary);
+  font-weight: var(--stn-font-weight-medium, 500);
+}
+
+.stn-menu-item.is-selected .stn-menu-item-icon {
+  color: var(--stn-primary);
+}
+
+/* 선택 항목 호버 */
+.stn-menu-item.is-selected:hover:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+  color: var(--stn-primary);
+}
+
+/* 선택 항목 클릭 (Active) */
+.stn-menu-item.is-selected:active:not(.is-disabled) {
+  background-color: var(--stn-dropdown-menu-hover-bg);
+}
+
+/* 비활성화(Disabled) 상태 */
+.stn-menu-item.is-disabled,
+.stn-menu-item[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* 위험/삭제 액션(Destructive) 상태 */
+.stn-menu-item.is-destructive {
+  color: var(--stn-menu-item-destructive-fg);
+}
+
+.stn-menu-item.is-destructive .stn-menu-item-icon {
+  color: var(--stn-menu-item-destructive-fg);
+}
+
+.stn-menu-item.is-destructive:hover:not(.is-disabled) {
+  background-color: var(--stn-menu-item-destructive-hover);
+  color: var(--stn-menu-item-destructive-fg);
+}
+
+.stn-menu-item.is-destructive:active:not(.is-disabled) {
+  background-color: var(--stn-menu-item-destructive-active);
+  transform: scale(0.985);
+}
+
+/* 패딩 규격이 none 일 때는 여백 없이 edge-to-edge 채움 */
+.stn-menu-list--pad-none .stn-menu-item,
+.stn-menu-item--pad-none {
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+}
+
+/* ==========================================================================
+   8. StnMenuItemIcon (좌측 시각 슬롯)
+   ========================================================================== */
+.stn-menu-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  height: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  min-width: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  color: var(--stn-text-secondary);
+  transition: color 0.15s ease;
+}
+
+.stn-menu-item-icon .stn-icon,
+.stn-menu-item-icon svg {
+  width: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+  height: var(--stn-menu-item-icon-size, var(--stn-size-18, 18px));
+}
+
+/* ==========================================================================
+   9. StnMenuItemText (본문 텍스트 슬롯)
+   ========================================================================== */
+.stn-menu-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stn-menu-item-text__primary {
+  display: block;
+  font-size: var(--stn-menu-item-font-size, var(--stn-font-size-body-2));
+  font-weight: inherit;
+  color: inherit;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stn-menu-item-text__secondary {
+  display: block;
+  font-size: calc(var(--stn-menu-item-font-size, var(--stn-font-size-body-2)) - 2px);
+  color: var(--stn-text-tertiary);
+  line-height: 1.35;
+  margin-top: var(--stn-space-2, 2px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 말줄임표 해제 (noWrap=false) */
+.stn-menu-item-text--wrap,
+.stn-menu-item-text--wrap .stn-menu-item-text__primary,
+.stn-menu-item-text--wrap .stn-menu-item-text__secondary {
+  white-space: normal;
+}
+
+/* 단독 HTML 클래스 지원 (.stn-menu-item-text--nowrap) */
+.stn-menu-item-text--nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 아이콘 없는 항목 정렬 정합성 (Inset Indentation) */
+.stn-menu-item-text--inset {
+  padding-left: calc(var(--stn-menu-item-icon-size, var(--stn-size-16, 16px)) + var(--stn-menu-item-gap, var(--stn-space-6, 6px)));
+}
+
+/* ==========================================================================
+   10. StnMenuShortcut (우측 단축키 힌트)
+   ========================================================================== */
+.stn-menu-item-shortcut {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: var(--stn-font-size-caption);
+  color: var(--stn-text-tertiary);
+  font-family: inherit;
+  letter-spacing: 0.04em;
+  padding-left: var(--stn-space-16);
+  user-select: none;
+}
+
+/* ==========================================================================
+   11. StnMenuDivider (공식 StnDivider as="li" SSOT — 메뉴 팝오버 풀블리드 배치)
+   ========================================================================== */
+.stn-menu-divider {
+  display: block;
+  height: 0;
+  width: calc(100% + (var(--stn-space-4, 4px) * 2));
+  margin: var(--stn-space-4, 4px) calc(-1 * var(--stn-space-4, 4px));
+  border-top: var(--stn-size-1, 1px) solid var(--stn-dropdown-menu-border, var(--stn-border-subtle));
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  list-style: none;
+}
+
+/* ==========================================================================
+   12. StnMenuSubheader (그룹 카테고리 헤더)
+   ========================================================================== */
+.stn-menu-subheader {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: var(--stn-space-6, 6px) var(--stn-space-8, 8px) var(--stn-space-2, 2px);
+  font-size: var(--stn-font-size-caption, 11px);
+  font-weight: var(--stn-font-weight-semibold, 600);
+  color: var(--stn-text-tertiary);
+  line-height: 1.3;
+  letter-spacing: 0.02em;
+  user-select: none;
+  list-style: none;
+}
+
+/* ==========================================================================
+   13. StnMenuRadio & StnMenuCheckbox (선택 인디케이터)
+   ========================================================================== */
+.stn-menu-radio,
+.stn-menu-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.stn-menu-checkbox.is-checked {
+  color: var(--stn-primary);
+}
+
+.stn-menu-radio svg circle:first-child {
+  transition: stroke 0.15s ease;
+}
+
+.stn-menu-radio svg circle:last-child {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}

package/styles/components/stn-topology.css

@@ -6,34 +6,33 @@
  */
 
 /* ==========================================================================
-   Topology Tokens (현재 노드 하이라이트 링 & 시작/종료 노드 뱃지 토큰)
-   - STN 4대 표준 규격: 원시 Hex/RGB 절대 금지, 순수 --stn-* 시멘틱 토큰으로만 구성
-   - 다크 모드(기본): 흰색 반투명 테두리 링, 흰색 뱃지 배경, 검은색 뱃지 텍스트
-   - 라이트 모드: Gray 반투명 테두리 링, 검은색 뱃지 배경, 흰색 뱃지 텍스트
+   Topology Labels & Tooltips (STN 시멘틱 토큰 기반 회선/노드 라벨 표준 규격)
    ========================================================================== */
-:root,
-[data-mode='dark'],
-[data-theme='dark'] {
-  --stn-topology-node-current-bg: color-mix(in srgb, var(--stn-static-white) 22%, transparent);
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-static-white) 40%, transparent);
-  --stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-static-white) 15%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-static-white) 20%, transparent);
-  --stn-topology-node-point: var(--stn-primary);
-  --stn-topology-badge-bg: var(--stn-static-white);
-  --stn-topology-badge-text: var(--stn-gray-900);
-  --stn-topology-badge-border: color-mix(in srgb, var(--stn-gray-900) 20%, transparent);
-}
-
-[data-mode='light'],
-[data-theme='light'] {
-  --stn-topology-node-current-bg: color-mix(in srgb, var(--stn-gray-900) 15%, transparent);
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-gray-900) 30%, transparent);
-  --stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-gray-900) 12%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-gray-700) 15%, transparent);
-  --stn-topology-node-point: var(--stn-primary);
-  --stn-topology-badge-bg: var(--stn-gray-900);
-  --stn-topology-badge-text: var(--stn-static-white);
-  --stn-topology-badge-border: color-mix(in srgb, var(--stn-static-white) 20%, transparent);
+.stn-topology-link__label text {
+  fill: var(--stn-topology-link-label-fg, var(--stn-text-secondary));
+  stroke: var(--stn-topology-link-label-halo, var(--stn-elevation-surface-0));
+  stroke-width: 2.4px;
+  paint-order: stroke;
+  stroke-linejoin: round;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+}
+
+.stn-topology-node__bottom-label--plain text {
+  fill: var(--stn-topology-node-label-fg, var(--stn-text-primary));
+  stroke: var(--stn-topology-node-label-halo, var(--stn-elevation-surface-0));
+  stroke-width: 2.4px;
+  paint-order: stroke;
+  stroke-linejoin: round;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+}
+
+.stn-topology-node__label-badge.neutral.subtle {
+  background-color: var(--stn-elevation-surface-0);
+  border: none;
+  color: var(--stn-text-primary);
+  font-weight: var(--stn-font-weight-regular, 400);
 }
 
 .stn-topology-ring,
@@ -172,16 +171,6 @@
 /* ==========================================================================
    Current Node Highlight (현재 선택 노드 — 다크: 흰색 반투명, 라이트: gray 반투명)
    ========================================================================== */
-:root {
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-neutral-90, #1f242f) 28%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-neutral-90, #1f242f) 12%, transparent);
-}
-
-[data-theme="dark"],
-.theme-dark {
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-static-white, #ffffff) 45%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-static-white, #ffffff) 20%, transparent);
-}
 
 /* 2D 마크용 현재 노드 스타일 */
 :is(.stn-topology-node-mark.is-current, .stn-topology-node-mark.current) .stn-topology-node__circle {
@@ -208,28 +197,29 @@
 }
 
 /* ==========================================================================
-   Topology Start/End Node Badge Tokens (시작 & 종료 노드 뱃지 — 다크: 흰색, 라이트: 검은색)
+   Topology Start/End Node Badge Tokens (시작 & 종료 노드 뱃지 — Primary Blue SSOT)
    ========================================================================== */
-:root {
-  --stn-topology-badge-bg: var(--stn-neutral-90, #1f242f);
-  --stn-topology-badge-text: var(--stn-static-white, #ffffff);
-  --stn-topology-badge-border: var(--stn-elevation-surface-0);
-}
-
-[data-theme="dark"],
-.theme-dark {
-  --stn-topology-badge-bg: var(--stn-static-white, #ffffff);
-  --stn-topology-badge-text: var(--stn-neutral-90, #1f242f);
-  --stn-topology-badge-border: var(--stn-elevation-surface-0);
-}
-
 .stn-topology-node__badge rect {
+  fill: var(--stn-topology-badge-bg, var(--stn-primary));
   transition: fill 0.2s ease, stroke 0.2s ease;
 }
 .stn-topology-node__badge text {
+  fill: var(--stn-topology-badge-text, var(--stn-static-white));
   transition: fill 0.2s ease;
 }
 
+/* STN 토폴로지 노드 벡터 외곽선 stroke-width 표준 시멘틱 토큰 강제 규격 */
+.stn-topology-node > g > rect,
+.stn-topology-node > g > circle:not([class*='stn-topology-pulse-ring']),
+.stn-topology-node > g > polygon,
+.stn-topology-node > g > path,
+.stn-topology-node > circle:not([class*='stn-topology-pulse-ring']),
+.stn-topology-node > rect,
+.stn-topology-node > polygon,
+.stn-topology-node > path {
+  stroke-width: var(--stn-topology-node-stroke, 1.2px);
+}
+
 /* Severity / Status Themes on Circle (통일된 단일 룰) */
 .stn-topology-node-mark.normal .stn-topology-node__circle {
   background: var(--stn-opacity-white-5);
@@ -479,4 +469,10 @@
   animation: stnTopologyPulseRing 2s infinite ease-out 0.8s;
 }
 
+/* Node Tooltip in SVG Overlay */
+.stn-topology-node-tooltip {
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+
 

package/styles/layouts/stn-container.css

@@ -42,11 +42,55 @@
   }
 }
 
-/* 컨테이너 자신의 좌우 패딩만 끈다.
-   !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);
+/* ==========================================================================
+   Padding 0 Modifiers (상·하·좌·우 개별 및 전체 패딩 0 제거 유틸리티)
+   - !important 없이 CSS 변수 및 특정성 체이닝으로 부모 레이어 여백도 자연스럽게 무력화
+   ========================================================================== */
+.stn-container--disable-gutters,
+.stn-container.stn-container--disable-gutters,
+.stn-layer-1__body > .stn-container.stn-container--disable-gutters {
+  --stn-container-padding-left: var(--stn-container-gutter-none, 0px);
+  --stn-container-padding-right: var(--stn-container-gutter-none, 0px);
+  padding-left: var(--stn-container-gutter-none, 0px);
+  padding-right: var(--stn-container-gutter-none, 0px);
+}
+
+.stn-container--disable-padding-top,
+.stn-container.stn-container--disable-padding-top,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-top {
+  --stn-container-padding-top: var(--stn-space-0, 0px);
+  padding-top: var(--stn-space-0, 0px);
+}
+
+.stn-container--disable-padding-bottom,
+.stn-container.stn-container--disable-padding-bottom,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-bottom {
+  --stn-container-padding-bottom: var(--stn-space-0, 0px);
+  padding-bottom: var(--stn-space-0, 0px);
+}
+
+.stn-container--disable-padding-left,
+.stn-container.stn-container--disable-padding-left,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-left {
+  --stn-container-padding-left: var(--stn-container-gutter-none, 0px);
+  padding-left: var(--stn-container-gutter-none, 0px);
+}
+
+.stn-container--disable-padding-right,
+.stn-container.stn-container--disable-padding-right,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-right {
+  --stn-container-padding-right: var(--stn-container-gutter-none, 0px);
+  padding-right: var(--stn-container-gutter-none, 0px);
+}
+
+.stn-container--disable-padding,
+.stn-container.stn-container--disable-padding,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding {
+  --stn-container-padding-top: var(--stn-space-0, 0px);
+  --stn-container-padding-bottom: var(--stn-space-0, 0px);
+  --stn-container-padding-left: var(--stn-space-0, 0px);
+  --stn-container-padding-right: var(--stn-space-0, 0px);
+  padding: var(--stn-space-0, 0px);
 }
 
 /* Fluid max-width. width 100%라서 캡에 닿기 전까지 화면과 같이 늘어난다.

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

@@ -177,7 +177,10 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: var(--stn-space-16);
+  padding-top: var(--stn-container-padding-top, var(--stn-space-16));
+  padding-bottom: var(--stn-container-padding-bottom, var(--stn-space-16));
+  padding-left: var(--stn-container-padding-left, var(--stn-space-16));
+  padding-right: var(--stn-container-padding-right, var(--stn-space-16));
   overflow: hidden;
 }