@ncds/ui-admin 1.8.2 → 1.8.4

package/dist/ui-admin/assets/styles/style.css

@@ -1219,6 +1219,7 @@ button {
 }
 
 .ncua-dropdown {
+  --ncua-dropdown-item-height: 36px;
   position: relative;
   display: inline-block;
 }
@@ -1333,6 +1334,9 @@ button {
   display: flex;
   flex-direction: column;
   width: 100%;
+  /* 36px × 7.5 = 270px + padding 4px = 274px */
+  max-height: calc(var(--ncua-dropdown-item-height) * 7.5 + 4px);
+  overflow-y: auto;
 }
 .ncua-dropdown__group {
   padding: 4px 0;
@@ -1346,18 +1350,17 @@ button {
   padding: 2px 6px;
   width: 100%;
   position: relative;
-}
-.ncua-dropdown__item-clickable-layer {
-  position: absolute;
-  top: 2px;
-  left: 6px;
-  right: 6px;
-  bottom: 2px;
-  border-radius: 6px;
-  background: transparent;
-  z-index: 1;
+  /* button reset (action variant uses native button) */
+  background: none;
+  border: none;
+  text-align: inherit;
+  font: inherit;
+  color: inherit;
+  display: flex;
+  align-items: center;
 }
 .ncua-dropdown__item-content {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1365,14 +1368,35 @@ button {
   padding: 7px 10px;
   border-radius: 6px;
 }
-.ncua-dropdown__item:hover .ncua-dropdown__item-content {
+.ncua-dropdown__item {
+  /* action variant: hover 시 안쪽 content가 회색 pill (기본 동작) */
+}
+.ncua-dropdown__item:not(.ncua-dropdown__item--config):hover .ncua-dropdown__item-content {
+  background-color: var(--gray-50);
+}
+.ncua-dropdown__item {
+  /* config variant: 외부 2px/6px를 margin으로 두어 hover 배경이 안쪽 pill에만 그려짐 */
+}
+.ncua-dropdown__item--config {
+  padding: 0;
+  margin: 2px 6px;
+  width: auto;
+  border-radius: 6px;
+}
+.ncua-dropdown__item--config:hover {
   background-color: var(--gray-50);
 }
+.ncua-dropdown__item {
+  /* config variant: drag handle 우측 패딩 제거에 맞춰 content 좌측 패딩을 4px로 축소 */
+}
+.ncua-dropdown__item--config .ncua-dropdown__item-content {
+  padding: 7px 10px 7px 4px;
+}
 .ncua-dropdown__item-text-group {
   flex: 1;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   color: var(--gray-500);
 }
 .ncua-dropdown__item-icon {
@@ -1390,6 +1414,48 @@ button {
   color: var(--gray-400);
   line-height: var(--line-heights-xs);
 }
+.ncua-dropdown__item-drag-handle {
+  background: none;
+  border: none;
+  padding: 0 0 0 4px;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-300);
+}
+.ncua-dropdown__item-drag-handle svg {
+  width: 16px;
+  height: 16px;
+}
+.ncua-dropdown__item-drag-handle:active {
+  cursor: grabbing;
+}
+.ncua-dropdown__item-drag-handle:hover {
+  color: var(--gray-600);
+}
+.ncua-dropdown__item-visibility {
+  background: none;
+  border: none;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin-right: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-500);
+  border-radius: 4px;
+}
+.ncua-dropdown__item-visibility svg {
+  width: 16px;
+  height: 16px;
+}
+.ncua-dropdown__item-visibility:hover {
+  color: var(--gray-700);
+  background-color: var(--gray-100);
+}
 .ncua-dropdown__item.is-disabled {
   pointer-events: none;
   cursor: default;
@@ -1407,6 +1473,54 @@ button {
 .ncua-dropdown__item.is-danger svg {
   color: var(--primary-red-700);
 }
+.ncua-dropdown__item {
+  /* hidden state: draft.visibility[id] === false (사용자가 EyeOff로 토글한 row) */
+}
+.ncua-dropdown__item.is-hidden .ncua-dropdown__item-text,
+.ncua-dropdown__item.is-hidden .ncua-dropdown__item-visibility {
+  color: var(--gray-300);
+}
+.ncua-dropdown__item {
+  /* 드래그 중 원본 항목: 비어보이도록 흐리게 */
+}
+.ncua-dropdown__item.is-dragging {
+  opacity: 0.4;
+}
+.ncua-dropdown__item {
+  /* 커스텀 drag preview: 들어올린 듯한 그림자 + 둥근 모서리 + 흰 배경 */
+}
+.ncua-dropdown__item--drag-preview {
+  background-color: var(--base-white);
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+  pointer-events: none;
+}
+.ncua-dropdown__item {
+  /* 드롭 위치 indicator 라인 — boundary에 정확히 센터링하여 top/bottom edge 전환 시 점프 방지 */
+}
+.ncua-dropdown__item-drop-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--gray-600);
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 2;
+  /* 정수 픽셀 위치로 인접 item 간 line이 동일한 픽셀 행에 그려짐 (점프 + sub-pixel blur 방지) */
+}
+.ncua-dropdown__item-drop-indicator--top {
+  top: 0;
+}
+.ncua-dropdown__item-drop-indicator--bottom {
+  bottom: -1px;
+}
+.ncua-dropdown__footer {
+  padding: 8px 12px;
+  border-top: 1px solid var(--gray-100);
+  display: flex;
+  justify-content: flex-end;
+}
 
 .ncua-hint-text {
   color: var(--gray-400);
@@ -3065,7 +3179,7 @@ button {
   padding-right: 36px;
 }
 .ncua-tooltip--short .ncua-tooltip__bg {
-  white-space: nowrap;
+  white-space: normal;
 }
 
 .ncua-tooltip-global-layer {
@@ -6104,6 +6218,298 @@ button {
   padding: var(--spacing-lg) 0;
 }
 
+.ncua-block-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.ncua-block-container__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+}
+
+.ncua-block-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--base-white);
+}
+.ncua-block-header__row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 10px 24px;
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header--column .ncua-block-header__row {
+  padding: 12px 24px;
+  box-shadow: none;
+}
+.ncua-block-header--no-divider .ncua-block-header__row {
+  box-shadow: none;
+}
+.ncua-block-header__title-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.ncua-block-header__title-area .ncua-tooltip {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-block-header__title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-md);
+  color: var(--gray-700);
+}
+.ncua-block-header__action-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-block-header__collapsible-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.ncua-block-header__required-notice {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xs);
+  white-space: nowrap;
+}
+.ncua-block-header__required-notice--red {
+  color: var(--primary-red-500);
+}
+.ncua-block-header__required-notice--gray {
+  color: var(--gray-700);
+}
+.ncua-block-header__badge {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-block-header--column .ncua-block-header__description {
+  padding: 0 24px 12px;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: var(--line-heights-xs);
+  color: var(--gray-400);
+  margin: 0;
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header--column.ncua-block-header--no-divider .ncua-block-header__description {
+  box-shadow: none;
+}
+.ncua-block-header--has-tab {
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header__control-strip {
+  padding: 10px 24px;
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header--no-divider .ncua-block-header__control-strip {
+  box-shadow: none;
+}
+.ncua-block-header__tabs {
+  padding: 0 24px;
+}
+.ncua-block-header__tabs .ncua-horizontal-tab--underline::after,
+.ncua-block-header__tabs .ncua-horizontal-tab--underline-fill::after {
+  display: none;
+}
+
+.ncua-sub-title {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ncua-sub-title__title-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.ncua-sub-title__title-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.ncua-sub-title__title-area .ncua-tooltip {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-sub-title__required-marker {
+  color: var(--primary-red-500);
+  font-weight: 700;
+}
+.ncua-sub-title__title {
+  color: var(--gray-700);
+  font-weight: 700;
+}
+.ncua-sub-title__action {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+.ncua-sub-title__description {
+  margin: 0;
+  color: var(--gray-400);
+  font-weight: 400;
+}
+.ncua-sub-title__error {
+  margin: 0;
+  color: var(--primary-red-600);
+  font-weight: 400;
+}
+.ncua-sub-title--middle .ncua-sub-title__title {
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  line-height: var(--line-heights-md);
+}
+.ncua-sub-title--sm .ncua-sub-title__title-area {
+  gap: 6px;
+}
+.ncua-sub-title--sm .ncua-sub-title__title {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-sub-title--sm .ncua-sub-title__description {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-sub-title--xs .ncua-sub-title__title-area {
+  gap: 4px;
+}
+.ncua-sub-title--xs .ncua-sub-title__title {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-sub-title--xs .ncua-sub-title__description {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-sub-title--xs .ncua-sub-title__error {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-page-title {
+  width: 100%;
+  background: var(--base-white);
+  box-shadow: var(--shadow-sm);
+}
+.ncua-page-title--fixed {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-300);
+}
+.ncua-page-title__page-header {
+  padding: 24px 40px;
+}
+.ncua-page-title--fixed .ncua-page-title__page-header {
+  padding: 12px 40px;
+}
+.ncua-page-title__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-page-title__header--has-breadcrumb {
+  align-items: flex-end;
+}
+.ncua-page-title__container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+.ncua-page-title--fixed .ncua-page-title__container {
+  gap: 8px;
+}
+.ncua-page-title__title-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+.ncua-page-title__title-row .ncua-page-title__title {
+  font-size: var(--font-size-display-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-display-xs);
+  color: var(--gray-700);
+  margin: 0;
+}
+.ncua-page-title__title-row .ncua-page-title__title:first-child {
+  margin: 0;
+}
+.ncua-page-title__breadcrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-page-title__breadcrumb-item {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.333;
+  color: var(--gray-400);
+}
+.ncua-page-title__breadcrumb-item a {
+  color: inherit;
+  text-decoration: none;
+}
+.ncua-page-title__breadcrumb-item a:hover {
+  text-decoration: underline;
+}
+.ncua-page-title__breadcrumb-separator {
+  width: 16px;
+  height: 16px;
+  color: var(--gray-200);
+  flex-shrink: 0;
+}
+.ncua-page-title__breadcrumb-current {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.333;
+  color: var(--gray-600);
+}
+.ncua-page-title__back-btn {
+  flex-shrink: 0;
+}
+.ncua-page-title__guide-btn {
+  display: flex;
+  align-items: center;
+}
+.ncua-page-title__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;
@@ -7011,24 +7417,16 @@ span.flatpickr-weekday {
   }
 }
 /**
- * Swiper 11.2.10
+ * Swiper 12.1.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2025 Vladimir Kharlampidi
+ * Copyright 2014-2026 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 28, 2025
+ * Released on: March 24, 2026
  */
-/* FONT_START */
-@font-face {
-  font-family: "swiper-icons";
-  src: url("data:application/font-woff;charset=utf-8;base64, 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");
-  font-weight: 400;
-  font-style: normal;
-}
-/* FONT_END */
 :root {
   --swiper-theme-color: #007aff;
   /*
@@ -7112,7 +7510,6 @@ span.flatpickr-weekday {
 
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 
@@ -7127,116 +7524,126 @@ span.flatpickr-weekday {
 
 .swiper-3d {
   perspective: 1200px;
-}
-
-.swiper-3d .swiper-slide,
-.swiper-3d .swiper-cube-shadow {
-  transform-style: preserve-3d;
+  .swiper-slide,
+  .swiper-cube-shadow {
+    transform-style: preserve-3d;
+  }
 }
 
 /* CSS Mode */
-.swiper-css-mode > .swiper-wrapper {
-  overflow: auto;
-  scrollbar-width: none;
-  /* For Firefox */
-  -ms-overflow-style: none;
-  /* For Internet Explorer and Edge */
-}
-
-.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
-  display: none;
-}
-
-.swiper-css-mode > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: start start;
-}
-
-.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
-  scroll-snap-type: x mandatory;
-}
-
-.swiper-css-mode.swiper-vertical > .swiper-wrapper {
-  scroll-snap-type: y mandatory;
-}
-
-.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
-  scroll-snap-type: none;
-}
-
-.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: none;
-}
-
-.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
-  content: "";
-  flex-shrink: 0;
-  order: 9999;
-}
-
-.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
-  scroll-snap-align: center center;
-  scroll-snap-stop: always;
-}
-
-.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
-  margin-inline-start: var(--swiper-centered-offset-before);
-}
-
-.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
-  height: 100%;
-  min-height: 1px;
-  width: var(--swiper-centered-offset-after);
-}
-
-.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
-  margin-block-start: var(--swiper-centered-offset-before);
-}
-
-.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
-  width: 100%;
-  min-width: 1px;
-  height: var(--swiper-centered-offset-after);
+.swiper-css-mode {
+  > .swiper-wrapper {
+    overflow: auto;
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none; /* For Internet Explorer and Edge */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: start start;
+  }
+  &.swiper-horizontal {
+    > .swiper-wrapper {
+      scroll-snap-type: x mandatory;
+    }
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-slides-offset-before);
+      scroll-margin-inline-start: var(--swiper-slides-offset-before);
+    }
+    > .swiper-wrapper > .swiper-slide:last-child {
+      margin-inline-end: var(--swiper-slides-offset-after);
+    }
+  }
+  &.swiper-vertical {
+    > .swiper-wrapper {
+      scroll-snap-type: y mandatory;
+    }
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-slides-offset-before);
+      scroll-margin-block-start: var(--swiper-slides-offset-before);
+    }
+    > .swiper-wrapper > .swiper-slide:last-child {
+      margin-block-end: var(--swiper-slides-offset-after);
+    }
+  }
+  &.swiper-free-mode {
+    > .swiper-wrapper {
+      scroll-snap-type: none;
+    }
+    > .swiper-wrapper > .swiper-slide {
+      scroll-snap-align: none;
+    }
+  }
+  &.swiper-centered {
+    > .swiper-wrapper::before {
+      content: "";
+      flex-shrink: 0;
+      order: 9999;
+    }
+    > .swiper-wrapper > .swiper-slide {
+      scroll-snap-align: center center;
+      scroll-snap-stop: always;
+    }
+  }
+  &.swiper-centered.swiper-horizontal {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      height: 100%;
+      min-height: 1px;
+      width: var(--swiper-centered-offset-after);
+    }
+  }
+  &.swiper-centered.swiper-vertical {
+    > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-centered-offset-before);
+    }
+    > .swiper-wrapper::before {
+      width: 100%;
+      min-width: 1px;
+      height: var(--swiper-centered-offset-after);
+    }
+  }
 }
 
 /* Slide styles start */
 /* 3D Shadows */
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom,
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.swiper-3d .swiper-slide-shadow {
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.swiper-3d .swiper-slide-shadow-left {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-right {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-top {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-bottom {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+.swiper-3d {
+  .swiper-slide-shadow,
+  .swiper-slide-shadow-left,
+  .swiper-slide-shadow-right,
+  .swiper-slide-shadow-top,
+  .swiper-slide-shadow-bottom,
+  .swiper-slide-shadow,
+  .swiper-slide-shadow-left,
+  .swiper-slide-shadow-right,
+  .swiper-slide-shadow-top,
+  .swiper-slide-shadow-bottom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+  }
+  .swiper-slide-shadow {
+    background: rgba(0, 0, 0, 0.15);
+  }
+  .swiper-slide-shadow-left {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+  .swiper-slide-shadow-right {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+  .swiper-slide-shadow-top {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+  .swiper-slide-shadow-bottom {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
 }
 
 .swiper-lazy-preloader {
@@ -7255,9 +7662,11 @@ span.flatpickr-weekday {
   border-top-color: transparent;
 }
 
-.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
-.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
-  animation: swiper-preloader-spin 1s infinite linear;
+.swiper:not(.swiper-watch-progress),
+.swiper-watch-progress .swiper-slide-visible {
+  .swiper-lazy-preloader {
+    animation: swiper-preloader-spin 1s infinite linear;
+  }
 }
 
 .swiper-lazy-preloader-white {