@stn-uiux/pub-ui 0.1.57 → 0.1.59

package/styles/components/stn-popup.css

@@ -40,9 +40,9 @@
   flex-direction: column;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: var(--stn-pop-surface, var(--box-bg));
-  border: 1px solid var(--stn-pop-border, var(--border));
-  border-radius: var(--stn-radius-pop-wrap, var(--stn-radius-10));
+  background-color: var(--stn-pop-surface);
+  border: 1px solid var(--stn-pop-border);
+  border-radius: var(--stn-radius-pop-wrap, var(--stn-radius-8));
   box-shadow: var(--stn-pop-shadow);
 }
 
@@ -52,31 +52,52 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: var(--stn-pop-header-height);
-  height: var(--stn-pop-header-height);
-  padding: 8px 44px 8px 16px;
+  min-height: var(--stn-pop-header-height, var(--stn-size-56));
+  height: auto;
+  padding: 12px 48px 12px 20px;
   margin: 0;
-  border-bottom: none;
+  border-bottom: 1px solid var(--stn-pop-divider);
+}
+
+.stn-pop__head-row {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-space-8, 8px);
+  flex-wrap: wrap;
 }
 
 .stn-pop__head h4 {
   margin: 0;
-  color: var(--stn-pop-title, var(--font));
+  color: var(--stn-pop-title);
   font-family: var(--stn-font-body);
   font-size: var(--stn-text-title-medium-size);
-  line-height: 1;
+  line-height: var(--stn-line-height-tight, 1.25);
   font-weight: var(--stn-font-weight-semibold);
   letter-spacing: 0;
 }
 
+.stn-pop__subtitle {
+  margin: 4px 0 0 0;
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-small-size);
+  color: var(--stn-text-subtle);
+  line-height: var(--stn-line-height-normal, 1.5);
+}
+
 /* Body */
 .stn-pop__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 0 8px;
+  padding: var(--stn-space-20, 20px);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   background: transparent;
+  color: var(--stn-text-primary);
+  box-sizing: border-box;
+}
+
+.stn-pop__body--no-padding {
+  padding: 0;
 }
 
 /* 본문 레이아웃 — 배경은 .stn-pop__panel 만 (내부 투명) */
@@ -88,11 +109,11 @@
   box-shadow: none !important;
 }
 
-/* Close button — Icon Button xsmall (16) · top 10 · right 8 */
+/* Close button — centered vertically in 56px header (top 14, right 16) */
 .stn-pop__close {
   position: absolute;
-  top: 10px;
-  right: 8px;
+  top: 14px;
+  right: 16px;
   box-sizing: border-box;
   width: var(--stn-pop-close-size) !important;
   height: var(--stn-pop-close-size) !important;
@@ -100,11 +121,11 @@
   min-height: var(--stn-pop-close-size);
   padding: 0;
   border: none;
-  border-radius: var(--stn-radius-4, 4px);
+  border-radius: var(--stn-radius-sm);
   background-color: transparent;
   background-image: none;
   opacity: 1;
-  color: var(--stn-pop-title, var(--colunm-font));
+  color: var(--stn-pop-title);
   transition: background-color 0.15s ease, color 0.15s ease;
 }
 
@@ -120,7 +141,7 @@
   background-image: none;
   -webkit-mask: none;
   mask: none;
-  color: var(--stn-pop-title, var(--colunm-font));
+  color: var(--stn-pop-title);
 }
 
 .stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph)::before {
@@ -178,28 +199,17 @@
   --stn-pop-active-width: var(--stn-pop-width-xl);
 }
 
-.stn-pop--xxl {
-  --stn-pop-active-width: var(--stn-pop-width-xxl);
-}
-
-.stn-pop--2xl {
-  --stn-pop-active-width: var(--stn-pop-width-2xl);
-}
-
 .stn-pop--xs .stn-pop__cont,
 .stn-pop--sm .stn-pop__cont,
 .stn-pop--md .stn-pop__cont,
 .stn-pop--lg .stn-pop__cont,
 .stn-pop--xl .stn-pop__cont,
-.stn-pop--xxl .stn-pop__cont,
-.stn-pop--2xl .stn-pop__cont,
-.stn-pop:not(.stn-pop--full):not(.stn-pop--full-bleed) .stn-pop__cont {
+.stn-pop:not(.stn-pop--full) .stn-pop__cont {
   width: min(var(--stn-pop-active-width), 100%, calc(100vw - var(--stn-pop-gutter) * 2));
 }
 
-/* Full bleed — 좌우 gutter만 남기고 가로 전체 */
-.stn-pop--full .stn-pop__cont,
-.stn-pop--full-bleed .stn-pop__cont {
+/* Full — 좌우 gutter만 남기고 가로 전체 */
+.stn-pop--full .stn-pop__cont {
   width: calc(100vw - var(--stn-pop-gutter) * 2);
   max-width: none;
 }
@@ -303,127 +313,63 @@
   pointer-events: auto;
 }
 
-/* Footer — 64px · center · gap 8 */
+/* Footer — 56px · gap 8 · border-top */
 .stn-pop__actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
+  justify-content: flex-end;
+  gap: var(--stn-space-8, 8px);
   box-sizing: border-box;
-  min-height: var(--stn-pop-footer-height);
+  min-height: var(--stn-pop-footer-height, var(--stn-size-56));
   margin-top: 0;
-  padding: 8px;
-  border-top: none;
-}
-
-/* —— Map node dialog (dashboard floating panel, not fullscreen dim) —— */
-.stn-pop.node_dialog {
-  display: block !important;
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  right: auto !important;
-  bottom: auto !important;
-  transform: translate(-50%, -50%) !important;
-  width: auto;
-  height: auto;
-  margin: 0;
-  padding: 0;
-  background: transparent !important;
-  -webkit-backdrop-filter: none !important;
-  backdrop-filter: none !important;
-  overflow: visible;
-  z-index: var(--stn-elevation-z-2, 200);
-  pointer-events: none;
-}
-
-.stn-pop.node_dialog .stn-pop__panel,
-.stn-pop.node_dialog .stn-pop__close,
-.stn-pop.node_dialog .stn-pop__actions,
-.stn-pop.node_dialog .stn-pop__actions button {
-  pointer-events: auto;
-}
-
-.stn-pop.node_dialog .stn-pop__cont {
-  width: 260px;
-  margin: 0;
-  max-height: none;
+  padding: 12px 20px;
+  border-top: 1px solid var(--stn-pop-divider);
+  background-color: var(--stn-pop-surface);
 }
 
-/* 맵 노드 패널 — glass 면은 stn-pub-elevation-apply(맵 스코프) */
-.stn-pop.node_dialog .stn-pop__panel {
-  padding: 16px 16px 12px;
-  color: var(--font);
-  border-radius: var(--stn-radius-pop-wrap, 10px);
-  border: none;
-  box-shadow: none;
-  overflow: visible;
-}
-
-.stn-pop.node_dialog .stn-pop__head {
-  min-height: 0;
-  height: auto;
-  padding: 0 44px 12px 0;
-  margin: 0;
-  border-bottom: 1px solid var(--stn-pop-divider);
-}
-
-.stn-pop.node_dialog .stn-pop__head h4 {
-  margin: 0;
-  font-size: var(--stn-text-title-medium-size);
-  font-weight: var(--stn-font-weight-semibold);
-  line-height: var(--stn-line-height-tight);
-  color: var(--font);
-  letter-spacing: -0.02em;
+.stn-pop__actions--right {
+  justify-content: flex-end;
 }
 
-.stn-pop.node_dialog .stn-pop__body {
-  padding: 12px 0 0;
+.stn-pop__actions--center {
+  justify-content: center;
 }
 
-.stn-pop.node_dialog .stn-pop__close {
-  top: 12px;
-  right: 12px;
+.stn-pop__actions--between {
+  justify-content: space-between;
 }
 
-.stn-pop.node_dialog .stn-pop__actions {
-  min-height: 0;
-  margin-top: 16px;
-  padding: 12px 0 0;
-  border-top: 1px solid var(--stn-pop-border, var(--border));
-  justify-content: center;
+/* —— Master-Detail Split Layout (.stn-pop-split) —— */
+.stn-pop-split {
+  display: flex;
+  gap: var(--stn-space-20, 20px);
+  min-height: 400px;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-/* 노드 목록 등급 태그 */
-.stn-pop.node_dialog .equip-search-table .tag {
-  width: 28px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.stn-pop-split__aside {
+  width: var(--stn-pop-split-aside-width, 280px);
+  min-width: var(--stn-pop-split-aside-width, 280px);
+  max-width: 320px;
   flex-shrink: 0;
-  font-family: var(--stn-font-body);
-  font-size: var(--stn-text-gnb-alert-tag-size);
-  font-weight: var(--stn-text-gnb-alert-tag-weight);
-  border-radius: 4px;
-  color: var(--stn-static-white);
-  text-align: center;
-  line-height: 1;
-}
-
-.stn-pop.node_dialog .equip-search-table .tag.critic {
-  background: var(--stn-grade-critical);
+  border-right: 1px solid var(--stn-pop-divider);
+  padding-right: var(--stn-space-16, 16px);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
-.stn-pop.node_dialog .equip-search-table .tag.major {
-  background: var(--stn-grade-major);
+.stn-pop-split__main {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-16, 16px);
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
-.stn-pop.node_dialog .equip-search-table .tag.minor {
-  background: var(--stn-grade-minor);
-}
 
-.stn-pop.node_dialog .equip-search-table .tag.warning {
-  background: var(--stn-grade-warning);
-}

package/styles/components/stn-scroll.css

@@ -12,6 +12,13 @@
 :root {
   --stn-scroll-width: 8px;
   --stn-scroll-radius: 4px;
+  /* 두께 프리셋 (thin · default · thick) */
+  --stn-scroll-width-thin: 4px;
+  --stn-scroll-radius-thin: 2px;
+  --stn-scroll-width-default: 8px;
+  --stn-scroll-radius-default: 4px;
+  --stn-scroll-width-thick: 12px;
+  --stn-scroll-radius-thick: 6px;
 }
 
 /* ===== 2. Unified Scrollbar Base (.stn-scroll 단일화) ===== */
@@ -22,23 +29,19 @@
     scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
   }
 
-  .stn-scroll.thick,
-  .stn-scroll--thick {
+  .stn-scroll.thick {
     scrollbar-width: auto;
   }
 
-  .stn-scroll.primary,
-  .stn-scroll--primary {
+  .stn-scroll.primary {
     scrollbar-color: var(--stn-scroll-thumb-primary) var(--stn-scroll-track);
   }
 
-  .stn-scroll.secondary,
-  .stn-scroll--secondary {
+  .stn-scroll.secondary {
     scrollbar-color: var(--stn-scroll-thumb-secondary) var(--stn-scroll-track);
   }
 
-  .stn-scroll.muted,
-  .stn-scroll--muted {
+  .stn-scroll.muted {
     scrollbar-color: var(--stn-scroll-thumb-muted) var(--stn-scroll-track);
   }
 }
@@ -77,65 +80,55 @@
   overflow: hidden;
 }
 
-.stn-scroll.vertical,
-.stn-scroll--vertical {
+.stn-scroll.vertical {
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.stn-scroll.horizontal,
-.stn-scroll--horizontal {
+.stn-scroll.horizontal {
   overflow-x: auto;
   overflow-y: hidden;
 }
 
-.stn-scroll.both,
-.stn-scroll--both {
+.stn-scroll.both {
   overflow: auto;
 }
 
 /* ===== 4. Width Variants (너비) ===== */
 /* Thin (4px) */
-.stn-scroll.thin,
-.stn-scroll--thin {
+.stn-scroll.thin {
   --stn-scroll-width: 4px;
   --stn-scroll-radius: 2px;
 }
 
-.stn-scroll.thin::-webkit-scrollbar,
-.stn-scroll--thin::-webkit-scrollbar {
+.stn-scroll.thin::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
 
-.stn-scroll.thin::-webkit-scrollbar-thumb,
-.stn-scroll--thin::-webkit-scrollbar-thumb {
+.stn-scroll.thin::-webkit-scrollbar-thumb {
   border-radius: 2px;
 }
 
 /* Default (8px) */
-.stn-scroll.default,
-.stn-scroll--default {
+.stn-scroll.default {
   --stn-scroll-width: 8px;
   --stn-scroll-radius: 4px;
 }
 
 /* Thick (12px) */
-.stn-scroll.thick,
-.stn-scroll--thick {
+.stn-scroll.thick {
   scrollbar-width: auto;
   --stn-scroll-width: 12px;
   --stn-scroll-radius: 6px;
 }
 
-.stn-scroll.thick::-webkit-scrollbar,
-.stn-scroll--thick::-webkit-scrollbar {
+.stn-scroll.thick::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
 
-.stn-scroll.thick::-webkit-scrollbar-thumb,
-.stn-scroll--thick::-webkit-scrollbar-thumb {
+.stn-scroll.thick::-webkit-scrollbar-thumb {
   border-radius: 6px;
 }
 
@@ -147,19 +140,19 @@
 
 /* 화살표가 있는 스크롤 셸 내부 트랙:
    스크롤 썸(thumb)이 화살표 버튼을 덮지 않고, 화살표 바로 아래/사이에서만 움직이도록 트랙 상하/좌우에 margin 지정 */
-.stn-scroll-shell--vertical .stn-scroll::-webkit-scrollbar-track,
-.stn-scroll-shell:has(.stn-scroll__arrow--up) .stn-scroll::-webkit-scrollbar-track {
+.stn-scroll-shell.vertical .stn-scroll::-webkit-scrollbar-track,
+.stn-scroll-shell:has(.stn-scroll__arrow.up) .stn-scroll::-webkit-scrollbar-track {
   margin-top: 17px;
   margin-bottom: 17px;
 }
 
-.stn-scroll-shell--horizontal .stn-scroll::-webkit-scrollbar-track,
-.stn-scroll-shell:has(.stn-scroll__arrow--left) .stn-scroll::-webkit-scrollbar-track {
+.stn-scroll-shell.horizontal .stn-scroll::-webkit-scrollbar-track,
+.stn-scroll-shell:has(.stn-scroll__arrow.left) .stn-scroll::-webkit-scrollbar-track {
   margin-left: 17px;
   margin-right: 17px;
 }
 
-.stn-scroll-shell--both .stn-scroll::-webkit-scrollbar-track {
+.stn-scroll-shell.both .stn-scroll::-webkit-scrollbar-track {
   margin: 17px;
 }
 
@@ -204,83 +197,75 @@
 }
 
 /* 수직 스크롤 화살표 (위/아래) */
-.stn-scroll-shell--vertical .stn-scroll__arrow--up,
-.stn-scroll-shell--vertical .stn-scroll__arrow--down,
-.stn-scroll-shell--both .stn-scroll__arrow--up,
-.stn-scroll-shell--both .stn-scroll__arrow--down {
+.stn-scroll-shell.vertical .stn-scroll__arrow.up,
+.stn-scroll-shell.vertical .stn-scroll__arrow.down,
+.stn-scroll-shell.both .stn-scroll__arrow.up,
+.stn-scroll-shell.both .stn-scroll__arrow.down {
   right: 0;
   width: var(--stn-scroll-width, 8px);
   height: 14px;
 }
 
-.stn-scroll-shell--vertical .stn-scroll__arrow--up,
-.stn-scroll-shell--both .stn-scroll__arrow--up {
+.stn-scroll-shell.vertical .stn-scroll__arrow.up,
+.stn-scroll-shell.both .stn-scroll__arrow.up {
   top: 1px;
 }
 
-.stn-scroll-shell--vertical .stn-scroll__arrow--down,
-.stn-scroll-shell--both .stn-scroll__arrow--down {
+.stn-scroll-shell.vertical .stn-scroll__arrow.down,
+.stn-scroll-shell.both .stn-scroll__arrow.down {
   bottom: 1px;
 }
 
 /* 가로 스크롤 화살표 (좌/우) */
-.stn-scroll-shell--horizontal .stn-scroll__arrow--left,
-.stn-scroll-shell--horizontal .stn-scroll__arrow--right,
-.stn-scroll-shell--both .stn-scroll__arrow--left,
-.stn-scroll-shell--both .stn-scroll__arrow--right {
+.stn-scroll-shell.horizontal .stn-scroll__arrow.left,
+.stn-scroll-shell.horizontal .stn-scroll__arrow.right,
+.stn-scroll-shell.both .stn-scroll__arrow.left,
+.stn-scroll-shell.both .stn-scroll__arrow.right {
   bottom: 0;
   width: 14px;
   height: var(--stn-scroll-width, 8px);
 }
 
-.stn-scroll-shell--horizontal .stn-scroll__arrow--left,
-.stn-scroll-shell--both .stn-scroll__arrow--left {
+.stn-scroll-shell.horizontal .stn-scroll__arrow.left,
+.stn-scroll-shell.both .stn-scroll__arrow.left {
   left: 1px;
 }
 
-.stn-scroll-shell--horizontal .stn-scroll__arrow--right,
-.stn-scroll-shell--both .stn-scroll__arrow--right {
+.stn-scroll-shell.horizontal .stn-scroll__arrow.right,
+.stn-scroll-shell.both .stn-scroll__arrow.right {
   right: 1px;
 }
 
-/* ===== 5. Color Variants (색상) ===== */
+/* ===== 6. Color Variants (색상) ===== */
 /* Primary */
-.stn-scroll.primary::-webkit-scrollbar-thumb,
-.stn-scroll--primary::-webkit-scrollbar-thumb {
+.stn-scroll.primary::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb-primary);
 }
-.stn-scroll.primary::-webkit-scrollbar-thumb:hover,
-.stn-scroll--primary::-webkit-scrollbar-thumb:hover {
+.stn-scroll.primary::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-primary-hover);
 }
 
 /* Secondary */
-.stn-scroll.secondary::-webkit-scrollbar-thumb,
-.stn-scroll--secondary::-webkit-scrollbar-thumb {
+.stn-scroll.secondary::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb-secondary);
 }
-.stn-scroll.secondary::-webkit-scrollbar-thumb:hover,
-.stn-scroll--secondary::-webkit-scrollbar-thumb:hover {
+.stn-scroll.secondary::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-secondary-hover);
 }
 
 /* Muted */
-.stn-scroll.muted::-webkit-scrollbar-thumb,
-.stn-scroll--muted::-webkit-scrollbar-thumb {
+.stn-scroll.muted::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb-muted);
 }
-.stn-scroll.muted::-webkit-scrollbar-thumb:hover,
-.stn-scroll--muted::-webkit-scrollbar-thumb:hover {
+.stn-scroll.muted::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-muted-hover);
 }
 
 /* Fade on Hover */
-.stn-scroll.fade::-webkit-scrollbar-thumb,
-.stn-scroll--fade::-webkit-scrollbar-thumb {
+.stn-scroll.fade::-webkit-scrollbar-thumb {
   background: transparent;
   transition: background 0.2s ease;
 }
-.stn-scroll.fade:hover::-webkit-scrollbar-thumb,
-.stn-scroll--fade:hover::-webkit-scrollbar-thumb {
+.stn-scroll.fade:hover::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb);
 }

package/styles/components/stn-search-requirement.css

@@ -11,37 +11,43 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 20px 16px;
+  row-gap: var(--stn-search-requirement-gap-row);
+  column-gap: var(--stn-search-requirement-gap-col);
   box-sizing: border-box;
   width: 100%;
-  padding: 8px 16px;
-  border: 1px solid var(--stn-search-requirement-border);
-  border-radius: var(--stn-radius-8, 8px);
-  background: var(--stn-search-requirement-bg, transparent);
-  box-shadow: var(--stn-search-requirement-shadow, var(--stn-shadow-1));
+  padding: var(--stn-search-requirement-padding);
+  border: var(--stn-search-requirement-border-width) solid var(--stn-search-requirement-border);
+  border-radius: var(--stn-search-requirement-radius);
+  background: var(--stn-search-requirement-bg);
+  box-shadow: var(--stn-search-requirement-shadow);
 }
 
 .stn-search-requirement__fields {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 16px;
+  gap: var(--stn-search-requirement-fields-gap);
   min-width: 0;
+  max-width: 100%;
+}
+
+.stn-search-requirement__fields > * {
+  max-width: 100%;
 }
 
 .stn-search-requirement__field {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--stn-search-requirement-field-gap);
   min-width: 0;
 }
 
 .stn-search-requirement__label {
   flex-shrink: 0;
-  margin: 0;
+  margin: var(--stn-space-0);
   font-size: var(--stn-text-body-medium-size);
-  font-weight: var(--stn-font-weight-semibold, 600);
-  line-height: 1;
+  font-weight: var(--stn-font-weight-semibold);
+  line-height: var(--stn-line-height-none, 1);
   color: var(--stn-search-requirement-label);
   white-space: nowrap;
 }
@@ -50,22 +56,23 @@
   min-width: 0;
 }
 
-/* Compact variant (8px 12px) */
-.stn-search-requirement--compact {
-  padding: 6px 12px;
-  gap: 12px 12px;
+/* Compact variant (.compact / .stn-search-requirement--compact) */
+.stn-search-requirement:is(.compact, .stn-search-requirement--compact) {
+  padding: var(--stn-search-requirement-compact-padding);
+  gap: var(--stn-search-requirement-compact-gap);
 }
 
-.stn-search-requirement--compact .stn-search-requirement__fields {
-  gap: 12px;
+.stn-search-requirement:is(.compact, .stn-search-requirement--compact) .stn-search-requirement__fields {
+  gap: var(--stn-search-requirement-compact-gap);
 }
 
 /* Vertical Divider between Field Groups */
 .stn-search-requirement__divider {
   display: inline-block;
-  width: 1px;
-  height: 18px;
-  margin: 0 4px;
+  width: var(--stn-search-requirement-divider-width);
+  height: var(--stn-search-requirement-divider-height);
+  margin-inline: var(--stn-search-requirement-divider-margin-x);
+  margin-block: var(--stn-space-0);
   background-color: var(--stn-border-subtle);
   flex-shrink: 0;
   align-self: center;

package/styles/components/stn-segmented.css

@@ -56,13 +56,15 @@
   justify-content: center;
 }
 
-/* Block / Full width */
+/* Block / Full width (.full 및 레거시 .block) */
+.stn-segmented.full,
 .stn-segmented.block {
   display: flex;
   width: 100%;
   align-self: stretch;
 }
 
+.stn-segmented.full .stn-segmented__item,
 .stn-segmented.block .stn-segmented__item {
   flex: 1 1 0%;
 }