@ncds/ui-admin 1.8.3 → 1.8.5

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

@@ -113,8 +113,35 @@
   --font-size-display-md: 36px;
   --font-size-display-lg: 48px;
   --font-size-display-xl: 60px;
-  /* z-index (고도몰 기준) */
+  /* z-index 위계 (고도몰 기준)
+     사용자 인지 우선순위가 높을수록 큰 값. z-index를 직접 숫자로 박지 않고 모두 토큰을 경유한다.
+     필요 시 새 레이어가 추가되면 충분한 간격을 두고 끼워 넣는다.
+
+     ── 컴포넌트 내부 stacking ────────────────────────────────
+     base       (0)   — 외부 라이브러리 reset 보정 (예: shopby span z-index: -1 override)
+     1, 2, 5          — 컴포넌트 내부 stacking 단계. 의미가 컴포넌트마다 달라 수치 토큰 사용
+     sticky     (10)  — 컴포넌트 내 sticky/fixed (table fixed-header, image overlay)
+
+     ── 글로벌 오버레이 ───────────────────────────────────────
+     spinner       (200)   — 부분 로딩 표시
+     popover       (500)   — dropdown · select-dropdown 등 부유 popover
+                             (Portal 미사용, 부모 stacking context 안에서 동작)
+     modal         (1000)  — 작업 차단 다이얼로그. backdrop이 stacking context를 만들고
+                             자식인 본체는 자연 stacking으로 따라가므로 단일 토큰으로 충분
+     tooltip       (2000)  — 정보 보조. tag 자체 tooltip도 동일 토큰 사용
+                             (hover 시에만 노출되어 stacking 충돌 가능성이 낮음)
+     notification  (2100)  — 시스템 알림(toast)
+  */
+  --z-index-base: 0;
+  --z-index-1: 1;
+  --z-index-2: 2;
+  --z-index-5: 5;
+  --z-index-sticky: 10;
+  --z-index-spinner: 200;
+  --z-index-popover: 500;
+  --z-index-modal: 1000;
   --z-index-tooltip: 2000;
+  --z-index-notification: 2100;
 }
 
 :root {
@@ -504,7 +531,7 @@ button {
   flex: none;
 }
 .ncua-btn span {
-  z-index: 0;
+  z-index: var(--z-index-base);
 }
 
 [class*=ncua-btn--text] {
@@ -908,7 +935,7 @@ button {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: var(--z-index-1);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -950,7 +977,7 @@ button {
   left: 50%;
   transform: translate(-50%, -50%);
   content: "";
-  z-index: 5;
+  z-index: var(--z-index-5);
   width: 12px;
   height: 12px;
   background-repeat: no-repeat;
@@ -1291,6 +1318,12 @@ button {
   left: auto;
   right: 0;
 }
+.ncua-dropdown__menu--portal {
+  position: fixed;
+  top: auto;
+  left: auto;
+  right: auto;
+}
 .ncua-dropdown__header {
   padding: 8px 16px;
   border-bottom: 1px solid var(--gray-100);
@@ -1594,7 +1627,7 @@ button {
 .ncua-input:focus-within :where(.ncua-input__field) {
   border-color: var(--gray-400);
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 .ncua-input input,
 .ncua-input textarea {
@@ -1976,7 +2009,7 @@ button {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: var(--z-index-modal);
 }
 
 .ncua-modal {
@@ -2183,6 +2216,90 @@ button {
   }
 }
 
+/* ------------------------------------------------------------------
+ * Floating Notification Host
+ *
+ * NCDS DES-SPEC-027 §5.1 — Toast Alert 레이아웃 토큰
+ *   · 위치: 우측 상단
+ *   · 상단 여백: PageTitle 하단 경계로부터 16px
+ *   · 우측 여백: 브라우저 우측에서 40px
+ *
+ * NCDS DES-SPEC-027 §5.4 — 다중 토스트 스택 토큰
+ *   · 최신 토스트가 시각적 상단에 노출 (LIFO, 스펙 표 §5.4 "최신 상단" 준수).
+ *   · 이전 토스트들은 그 아래로 12px씩 겹쳐 쌓인다 (godomall5 wrapper 와 동일한 값).
+ *   · 겹침 너비는 --ncua-floating-notification-stack-overlap 변수로 오버라이드 가능.
+ *   · spec 본문이 다른 값을 명시할 경우 변수 기본값만 조정하면 모든 consumer 가 일괄 반영됨.
+ *
+ * Vanilla(CDN) 사용자는 NcuaNotification.show()가 이 호스트를 자동 생성하고
+ * positionSync 모듈이 --ncua-page-title-bottom 변수를 실시간 갱신한다.
+ * React 사용자는 <div className="ncua-floating-notification-host" /> 안에
+ * <Notification type="floating" />을 portal/render하면 동일 정책이 적용된다.
+ *
+ * A11y trade-off (column-reverse + DOM append):
+ *   · vanilla show() 와 React createPortal 모두 호스트에 append 하므로 DOM 순서 = 발생 순서 (오래된 것 먼저).
+ *   · column-reverse 로 시각 순서를 뒤집어 최신이 상단에 오게 한다 — 그러나 Tab 순서·스크린리더 sequential
+ *     navigation 은 여전히 DOM 순서를 따르므로 시각적으로 "위에서 아래" 가 아닌 "아래에서 위" 로 진행된다.
+ *   · aria-live(role=alert/status)는 새 토스트가 DOM 에 추가되는 시점에 즉시 발화하므로 이 trade-off 와 무관.
+ *   · 키보드 사용자가 다중 토스트를 순회하는 경우는 드물고, 토스트는 close 버튼/autoClose 로 dismiss 되는
+ *     설계이므로 현재는 이 비대칭을 수용한다. 필요해지면 prepend 기반 중앙 toast manager 로 리팩토링.
+ * ------------------------------------------------------------------ */
+.ncua-floating-notification-host {
+  /*
+   * 호스트 좌표는 CSS 변수로 노출되어 있어 consumer가 스코프별로 오버라이드할 수 있다.
+   *
+   *   --ncua-floating-notification-top            (기본: PageTitle.bottom + 16px)
+   *   --ncua-floating-notification-right          (기본: 40px)
+   *   --ncua-floating-notification-z-index        (기본: var(--z-index-notification) = 2100)
+   *   --ncua-floating-notification-stack-overlap  (기본: 12px — LIFO 스택의 겹침 너비)
+   *
+   * 사용 예 (모달 위로 띄우거나 우측 패널 회피, 겹침 강화):
+   *   .my-modal-overlay .ncua-floating-notification-host {
+   *     --ncua-floating-notification-z-index: 100000;
+   *     --ncua-floating-notification-right: 80px;
+   *     --ncua-floating-notification-stack-overlap: 20px;
+   *   }
+   */
+  position: fixed;
+  top: var(--ncua-floating-notification-top, calc(var(--ncua-page-title-bottom, 0px) + 16px));
+  right: var(--ncua-floating-notification-right, 40px);
+  z-index: var(--ncua-floating-notification-z-index, var(--z-index-notification));
+  display: flex;
+  /* §5.4 — LIFO 스택을 위해 column-reverse.
+   * show()/portal 은 항상 append 하므로 DOM 마지막 = 최신 = 시각적 최상단.
+   * Paint stacking 도 자연스럽게 DOM 후순위가 위에 그려져 최신이 이전을 덮는다. */
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  /* host 자체는 hit-test를 막지 않음 (자식만 클릭 가능). */
+  pointer-events: none;
+}
+.ncua-floating-notification-host > .ncua-floating-notification {
+  pointer-events: auto;
+}
+.ncua-floating-notification-host {
+  /* §5.4 — 최상단(=DOM 마지막)을 제외한 모든 토스트의 top 을 overlap 만큼 끌어올려
+   * 바로 위에 그려질 다음(=DOM 후순위) 토스트가 겹쳐 덮도록 한다.
+   * 마지막 DOM 자식은 컨테이너 top 과 flush 되어야 하므로 margin-top 미적용. */
+}
+.ncua-floating-notification-host > .ncua-floating-notification:not(:last-child) {
+  margin-top: calc(-1 * var(--ncua-floating-notification-stack-overlap, 12px));
+}
+.ncua-floating-notification-host {
+  /* 모바일에서는 좌우 가장자리에 붙도록 (스펙 §5.1 모바일 동작은 미정 — 합리적 fallback).
+   * 모바일 기본값도 변수로 재정의하므로 consumer가 데스크탑 오버라이드 후에도 모바일은 자동으로 적용된다. */
+}
+@media (max-width: 768px) {
+  .ncua-floating-notification-host {
+    --ncua-floating-notification-right: 16px;
+    left: 16px;
+    align-items: stretch;
+  }
+}
+
+/* ------------------------------------------------------------------
+ * Floating Notification (개별 카드)
+ * §5.2.1 Toast Alert Floating 시각 토큰을 따른다.
+ * 위치/스택 책임은 .ncua-floating-notification-host에 위임.
+ * ------------------------------------------------------------------ */
 .ncua-floating-notification {
   position: relative;
   width: 100%;
@@ -2698,6 +2815,44 @@ button {
   font-weight: var(--font-weights-commerce-sans-1);
 }
 
+.ncua-callout-notification {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid;
+  border-radius: var(--border-radius-sm);
+  padding: var(--spacing-s) var(--spacing-lg);
+  gap: var(--spacing-s);
+  font-size: var(--font-size-md);
+  line-height: var(--line-heights-md);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-callout-notification--info {
+  background-color: var(--blue-50);
+  border-color: var(--blue-200);
+  color: var(--blue-600);
+}
+.ncua-callout-notification--neutral {
+  background-color: var(--gray-50);
+  border-color: var(--gray-200);
+  color: var(--gray-600);
+}
+.ncua-callout-notification--error {
+  background-color: var(--primary-red-50);
+  border-color: var(--primary-red-200);
+  color: var(--primary-red-600);
+}
+.ncua-callout-notification--warning {
+  background-color: var(--orange-50);
+  border-color: var(--orange-200);
+  color: var(--orange-600);
+}
+.ncua-callout-notification--success {
+  background-color: var(--green-50);
+  border-color: var(--green-200);
+  color: var(--green-600);
+}
+
 .ncua-radio-input {
   position: relative;
   flex: none;
@@ -2712,7 +2867,7 @@ button {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1;
+  z-index: var(--z-index-1);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2866,7 +3021,7 @@ button {
 }
 .ncua-tag__tooltip {
   position: absolute;
-  z-index: 1000;
+  z-index: var(--z-index-tooltip);
   pointer-events: none;
 }
 .ncua-tag__tooltip--top-left {
@@ -2926,6 +3081,8 @@ button {
   flex-direction: column;
   gap: 4px;
   max-width: 320px;
+  overflow-wrap: anywhere;
+  font-family: var(--font-families-commerce-sans);
   font-size: var(--font-size-xxs);
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
@@ -2935,16 +3092,23 @@ button {
   content: "";
 }
 .ncua-tooltip__content {
-  line-height: 14px;
-  width: max-content;
+  line-height: var(--line-heights-xxs);
+  width: fit-content;
   max-width: 296px;
-  font-weight: 100;
+  min-width: 0;
+  font-weight: var(--font-weights-commerce-sans-0);
   word-break: keep-all;
+  overflow-wrap: anywhere;
+  word-wrap: anywhere;
+}
+.ncua-tooltip__title {
+  min-width: 0;
+  line-height: var(--line-heights-xxs);
 }
 .ncua-tooltip__close-button {
   position: absolute;
-  top: 4px;
-  right: 8px;
+  top: 2px;
+  right: 2px;
   background: none;
   border: none;
   cursor: pointer;
@@ -2987,7 +3151,7 @@ button {
   border-left-color: transparent;
 }
 .ncua-tooltip__bg--black .ncua-tooltip__title {
-  font-weight: 500;
+  font-weight: var(--font-weights-commerce-sans-2);
   color: var(--base-white);
 }
 .ncua-tooltip__bg--black .ncua-tooltip__content {
@@ -3015,11 +3179,11 @@ button {
   border-left-color: transparent;
 }
 .ncua-tooltip__bg--white .ncua-tooltip__title {
-  font-weight: 500;
+  font-weight: var(--font-weights-commerce-sans-2);
   color: var(--gray-500);
 }
 .ncua-tooltip__bg--white .ncua-tooltip__content {
-  color: var(--gray-400);
+  color: var(--gray-500);
 }
 .ncua-tooltip__bg--top {
   top: auto;
@@ -3172,11 +3336,8 @@ button {
   padding: 12px;
 }
 .ncua-tooltip__bg:has(.ncua-tooltip__close-button) {
-  padding-right: 35px;
-}
-.ncua-tooltip--long .ncua-tooltip__bg {
-  padding: 12px;
-  padding-right: 36px;
+  padding: 8px 12px;
+  padding-right: 28px;
 }
 .ncua-tooltip--short .ncua-tooltip__bg {
   white-space: normal;
@@ -3336,7 +3497,7 @@ button {
 .ncua-select-dropdown {
   position: absolute;
   left: 0;
-  z-index: 1;
+  z-index: var(--z-index-popover);
   overflow: hidden;
   min-width: 100%;
   width: max-content;
@@ -3355,6 +3516,20 @@ button {
   left: initial;
   right: 0;
 }
+.ncua-select-dropdown--portal {
+  position: fixed;
+  left: auto;
+  right: auto;
+  min-width: 0;
+}
+.ncua-select-dropdown--portal.ncua-select-dropdown--up, .ncua-select-dropdown--portal.ncua-select-dropdown--down {
+  top: auto;
+  bottom: auto;
+}
+.ncua-select-dropdown--portal.ncua-select-dropdown--align-right {
+  left: auto;
+  right: auto;
+}
 .ncua-select-dropdown__content {
   padding: 8px 6px;
 }
@@ -3862,7 +4037,7 @@ button {
   background-color: var(--base-white);
   color: var(--gray-600);
   box-shadow: var(--shadow-sm);
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 .ncua-switch__option--inactive {
   background-color: var(--gray-100);
@@ -4083,7 +4258,7 @@ button {
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 200;
+  z-index: var(--z-index-spinner);
 }
 
 :root {
@@ -5557,7 +5732,7 @@ button {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 10;
+  z-index: var(--z-index-sticky);
 }
 .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip svg {
   opacity: 0;
@@ -5618,7 +5793,7 @@ button {
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: opacity 0.2s ease;
-  z-index: 1;
+  z-index: var(--z-index-1);
   padding: 0;
   min-width: auto;
   background: transparent;
@@ -5711,7 +5886,69 @@ button {
   width: 100%;
 }
 
+.ncua-table__h-scroll-container {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.ncua-table__h-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+.ncua-table:hover .ncua-table__h-scrollbar,
+.ncua-table__h-scroll-container[data-dragging] .ncua-table__h-scrollbar {
+  opacity: 1;
+}
+
+.ncua-table__h-scrollbar {
+  position: absolute;
+  left: var(--spacing-s);
+  right: var(--spacing-s);
+  bottom: var(--spacing-xs);
+  height: 6px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  border-radius: var(--border-radius-md);
+}
+
+.ncua-table__h-scrollbar-thumb {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 40px;
+  background: var(--gray-100);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  pointer-events: auto;
+}
+.ncua-table__h-scrollbar-thumb:hover {
+  background: var(--gray-200);
+}
+.ncua-table__h-scrollbar-thumb:active {
+  background: var(--gray-300);
+  cursor: grabbing;
+}
+
+.ncua-table__h-scroll-inner {
+  display: block;
+  width: max-content;
+  min-width: max(100%, var(--ncua-table-min-width, var(--ncua-table-default-min-width)));
+}
+.ncua-table__h-scroll-inner .ncua-table-wrapper,
+.ncua-table__h-scroll-inner .ncua-table {
+  width: max-content;
+  min-width: 100%;
+}
+.ncua-table__h-scroll-inner .ncua-table__table {
+  width: auto;
+  min-width: 100%;
+}
+
 .ncua-table {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -5725,9 +5962,6 @@ button {
 .ncua-table__scroll-area {
   position: relative;
 }
-.ncua-table__scroll-area:hover .ncua-table__scrollbar, .ncua-table__scroll-area[data-dragging] .ncua-table__scrollbar {
-  opacity: 1;
-}
 .ncua-table__scroll-container {
   width: 100%;
   overflow-y: auto;
@@ -5736,6 +5970,9 @@ button {
 .ncua-table__scroll-container::-webkit-scrollbar {
   display: none;
 }
+.ncua-table:has(.ncua-table__scroll-area:hover) .ncua-table__scrollbar, .ncua-table:has(.ncua-table__scroll-area[data-dragging]) .ncua-table__scrollbar {
+  opacity: 1;
+}
 .ncua-table__scrollbar {
   position: absolute;
   top: 2px;
@@ -5745,7 +5982,7 @@ button {
   opacity: 0;
   transition: opacity 0.2s ease;
   pointer-events: none;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
 }
 .ncua-table__scrollbar-thumb {
   position: absolute;
@@ -5754,7 +5991,7 @@ button {
   right: 0;
   height: 40px;
   background: var(--gray-100);
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
   cursor: pointer;
   pointer-events: auto;
 }
@@ -5779,15 +6016,15 @@ button {
 }
 .ncua-table__header tr {
   border-bottom: none;
-  height: 40px;
+  height: var(--ncua-table-header-height);
 }
 .ncua-table__header-cell {
-  padding: 0 16px;
-  min-height: 40px;
-  height: 40px;
+  padding: 0 var(--spacing-m);
+  min-height: var(--ncua-table-header-height);
+  height: var(--ncua-table-header-height);
   background: var(--gray-100);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weights-commerce-sans-5);
+  font-weight: var(--font-weights-commerce-sans-1);
   line-height: var(--line-heights-xs);
   color: var(--gray-500);
   text-align: center;
@@ -5808,7 +6045,7 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--spacing-xs);
   width: 100%;
 }
 .ncua-table__header-cell-text {
@@ -5911,9 +6148,9 @@ button {
   background: transparent;
 }
 .ncua-table__cell {
-  padding: 10px 8px;
+  padding: 10px var(--spacing-s);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weights-commerce-sans-4);
+  font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
   color: var(--gray-700);
   text-align: center;
@@ -5934,13 +6171,13 @@ button {
   border-right: 1px solid var(--gray-100);
 }
 .ncua-table__checkbox-cell--header, .ncua-table__radio-cell--header {
-  padding: 0 16px;
+  padding: 0 var(--spacing-m);
   background: var(--gray-100);
   border-right-color: var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
 }
 .ncua-table__checkbox-cell--body, .ncua-table__radio-cell--body {
-  padding: 12px 16px;
+  padding: 12px var(--spacing-m);
   height: 48px;
 }
 .ncua-table__footer {
@@ -5950,8 +6187,8 @@ button {
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   box-shadow: var(--shadow-xs);
-  padding: 8px 24px;
-  gap: 8px;
+  padding: var(--spacing-s) var(--spacing-l);
+  gap: var(--spacing-s);
   border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
 }
 .ncua-table__footer-row {
@@ -5967,11 +6204,11 @@ button {
   align-items: center;
   width: 100%;
   padding: 12px 0;
-  gap: 16px;
+  gap: var(--spacing-m);
 }
 .ncua-table__empty {
   text-align: center;
-  padding: 40px 16px;
+  padding: var(--spacing-xxl) var(--spacing-m);
   color: var(--gray-500);
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
@@ -5985,7 +6222,7 @@ button {
 }
 .ncua-table--selectable {
   background: var(--gray-50);
-  padding-bottom: 8px;
+  padding-bottom: var(--spacing-s);
 }
 .ncua-table--selectable .ncua-table__table {
   background: var(--base-white);
@@ -6020,17 +6257,17 @@ button {
   position: sticky;
   top: 0;
   z-index: 10;
-  padding: 0 16px;
-  height: 40px;
+  padding: 0 var(--spacing-m);
+  height: var(--ncua-table-header-height);
 }
 .ncua-table--fixed-header .ncua-table__scrollbar {
-  top: calc(40px + 8px);
-  right: 4px;
-  bottom: 8px;
+  top: calc(var(--ncua-table-header-height) + var(--spacing-s));
+  right: var(--spacing-xs);
+  bottom: var(--spacing-s);
 }
 .ncua-table--horizontal .ncua-table__header-cell {
-  height: 40px;
-  min-height: 40px;
+  height: var(--ncua-table-header-height);
+  min-height: var(--ncua-table-header-height);
 }
 .ncua-table--vertical {
   overflow: visible;
@@ -6071,9 +6308,9 @@ button {
   width: 240px;
   min-width: 240px;
   max-width: 240px;
-  padding: 10px 16px;
+  padding: 10px var(--spacing-m);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weights-commerce-sans-5);
+  font-weight: var(--font-weights-commerce-sans-1);
   line-height: var(--line-heights-sm);
   color: var(--gray-700);
   text-align: left;
@@ -6082,18 +6319,18 @@ button {
 }
 .ncua-table--vertical .ncua-table__body > .ncua-table__row td:last-child,
 .ncua-table--vertical .ncua-table__body > .ncua-table__row th:last-child {
-  padding: 10px 16px;
+  padding: 10px var(--spacing-m);
   text-align: left;
-  font-weight: var(--font-weights-commerce-sans-4);
+  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:first-child,
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:first-child {
   width: auto;
   min-width: 0;
   max-width: none;
-  padding: 10px 8px;
+  padding: 10px var(--spacing-s);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weights-commerce-sans-4);
+  font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
   text-align: center;
   background: var(--base-white);
@@ -6101,14 +6338,14 @@ button {
 }
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row td:last-child,
 .ncua-table--vertical .ncua-table .ncua-table__body > .ncua-table__row th:last-child {
-  padding: 10px 8px;
+  padding: 10px var(--spacing-s);
   text-align: center;
-  font-weight: var(--font-weights-commerce-sans-4);
+  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-table--vertical .ncua-table__required {
   color: var(--primary-red-500, #ec1d31);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weights-commerce-sans-5);
+  font-weight: var(--font-weights-commerce-sans-1);
   margin-right: 2px;
 }
 
@@ -6153,7 +6390,7 @@ button {
   padding: var(--spacing-s) 24px;
   background-color: var(--gray-50);
   position: relative;
-  z-index: 2;
+  z-index: var(--z-index-2);
 }
 .ncua-data-grid__action-bar:empty {
   padding: var(--spacing-xs) 0;
@@ -6182,9 +6419,12 @@ button {
 .ncua-data-grid__table {
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: var(--z-index-1);
   overflow: hidden;
 }
+.ncua-data-grid__table:has(.ncua-table__h-scroll-container) {
+  overflow: visible;
+}
 .ncua-data-grid__table:first-child {
   border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
 }
@@ -6218,6 +6458,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;