@stn-uiux/pub-ui 0.1.57 → 0.1.58

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-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;