@stn-uiux/pub-ui 0.1.85 → 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-popup.css

@@ -270,6 +270,10 @@
   background-color: var(--stn-pop-surface);
 }
 
+.stn-pop__actions--left {
+  justify-content: flex-start;
+}
+
 .stn-pop__actions--right {
   justify-content: flex-end;
 }
@@ -282,6 +286,13 @@
   justify-content: space-between;
 }
 
+/* Actions Group — between 정렬 등에서 버튼들을 시멘틱 간격으로 묶는 표준 래퍼 */
+.stn-pop__actions-group {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-pop-actions-gap);
+}
+
 /* —— Master-Detail Split Layout (.stn-pop-split) —— */
 .stn-pop-split {
   display: flex;
@@ -313,3 +324,24 @@
   overflow-y: auto;
   box-sizing: border-box;
 }
+
+/* 1. 반반 분할 (50:50 대칭 비교형 — .half, .equal) */
+:is(.stn-pop-split.half, .stn-pop-split--half, .stn-pop-split.equal, .stn-pop-split--equal) > .stn-pop-split__aside {
+  flex: 1 1 0;
+  width: 50%;
+  min-width: 0;
+  max-width: none;
+}
+
+/* 2. 역방향 분할 (7:3 좌측 넓음 1fr · 우측 좁음 280px 속성창 — .reverse) */
+:is(.stn-pop-split.reverse, .stn-pop-split--reverse) {
+  flex-direction: row-reverse;
+}
+
+:is(.stn-pop-split.reverse, .stn-pop-split--reverse) > .stn-pop-split__aside,
+.stn-pop-split > .stn-pop-split__main + .stn-pop-split__aside {
+  border-right: none;
+  border-left: var(--stn-pop-border-width) solid var(--stn-pop-divider);
+  padding-right: 0;
+  padding-left: var(--stn-pop-split-aside-padding-right);
+}

package/styles/components/stn-topology.css

@@ -5,6 +5,36 @@
  * STN 표준 시멘틱 토큰 기반 스타일링
  */
 
+/* ==========================================================================
+   Topology Labels & Tooltips (STN 시멘틱 토큰 기반 회선/노드 라벨 표준 규격)
+   ========================================================================== */
+.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,
 .stn-topology-graph {
   box-sizing: border-box;
@@ -86,7 +116,7 @@
   color: var(--stn-static-white);
 }
 
-/* 4대 표준 크기 규격 (xs · sm · md · lg) */
+/* 5대 표준 크기 규격 (xs · sm · md · lg · xl) */
 .stn-topology-node-mark.xs .stn-topology-node__circle {
   width: var(--stn-topology-node-size-xs);
   height: var(--stn-topology-node-size-xs);
@@ -103,6 +133,10 @@
   width: var(--stn-topology-node-size-lg);
   height: var(--stn-topology-node-size-lg);
 }
+.stn-topology-node-mark.xl .stn-topology-node__circle {
+  width: var(--stn-topology-node-size-xl);
+  height: var(--stn-topology-node-size-xl);
+}
 
 /* Shapes: circle · square · diamond (3대 표준 도형) */
 .stn-topology-node-mark.shape-circle .stn-topology-node__circle {
@@ -134,6 +168,58 @@
   transform: rotate(45deg) scale(0.92);
 }
 
+/* ==========================================================================
+   Current Node Highlight (현재 선택 노드 — 다크: 흰색 반투명, 라이트: gray 반투명)
+   ========================================================================== */
+
+/* 2D 마크용 현재 노드 스타일 */
+:is(.stn-topology-node-mark.is-current, .stn-topology-node-mark.current) .stn-topology-node__circle {
+  outline: none;
+  box-shadow:
+    0 0 0 3px var(--stn-topology-node-selected-gap, var(--stn-elevation-surface-0)),
+    0 0 0 5.5px var(--stn-topology-node-current-ring),
+    0 0 16px var(--stn-topology-node-current-glow);
+  transform: scale(1.06);
+}
+
+:is(.stn-topology-node-mark.shape-diamond.is-current, .stn-topology-node-mark.shape-diamond.current) .stn-topology-node__circle {
+  transform: rotate(45deg) scale(0.92);
+}
+
+/* 3D SVG 노드용 선택/현재 하이라이트 배경 플레이트 (border 대신 background 채움 — 다크: 흰색, 라이트: 검은색) */
+.stn-topology-node__current-ring {
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.stn-topology-node__current-ring :is(circle, rect, polygon) {
+  fill: var(--stn-topology-node-current-bg);
+  stroke: none;
+}
+
+/* ==========================================================================
+   Topology Start/End Node Badge Tokens (시작 & 종료 노드 뱃지 — Primary Blue SSOT)
+   ========================================================================== */
+.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);
@@ -383,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/foundations/stn-typography.css

@@ -148,6 +148,7 @@
 .stn-text-color-success { color: var(--stn-feedback-success); }
 .stn-text-color-error { color: var(--stn-feedback-error); }
 .stn-text-color-info { color: var(--stn-feedback-info); }
+.stn-text-color-discovery { color: var(--stn-feedback-discovery); }
 .stn-text-color-critical { color: var(--stn-grade-critical); }
 .stn-text-color-major { color: var(--stn-grade-major); }
 .stn-text-color-minor { color: var(--stn-grade-minor); }