sellmate-design-system-react 9.0.0-beta.3 → 9.0.0-beta.30

package/dist/styles.css

@@ -248,6 +248,7 @@
     --color-field-icon-default: #888888;
     --color-control-bg-inverseHover: #0075FF;
     --color-navigation-gnb-bg-dark: #001B39;
+    --color-navigation-gnb-bg-system: #004177;
     --color-primary-10: #EFF6FF;
     --color-primary-20: #E6F1FF;
     --color-primary-25: #D9EAFF;
@@ -363,15 +364,15 @@
     --opacity-040: 40%;
     --opacity-060: 60%;
     --z-raised: 1;
-    --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-    --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-    --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+    --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+    --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+    --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
     --shadow-spread-sm: 0px 0px 8px 0px rgba(34,34,34,0.1);
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
     --shadow-focus: 0px 0px 8px 0px rgba(0,117,255,0.25);
-    --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
-    --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
-    --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+    --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+    --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+    --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 8px 12px -4px rgba(34,34,34,0.16);
     --animate-linear-indeterminate: linear-indeterminate 1.2s linear infinite;
     --animate-circle-spin: circle-spin 2s linear infinite;
     --animate-circle-arc: circle-arc 1.5s ease-in-out infinite;
@@ -590,6 +591,9 @@
   .inset-y-0 {
     inset-block: 0;
   }
+  .-top-\[9999px\] {
+    top: calc(9999px * -1);
+  }
   .top-0 {
     top: 0;
   }
@@ -602,6 +606,9 @@
   .top-\[12px\] {
     top: 12px;
   }
+  .top-\[13px\] {
+    top: 13px;
+  }
   .top-\[15px\] {
     top: 15px;
   }
@@ -632,6 +639,9 @@
   .right-1\/2 {
     right: calc(1 / 2 * 100%);
   }
+  .right-\[2px\] {
+    right: 2px;
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -650,8 +660,8 @@
   .bottom-\[-1px\] {
     bottom: -1px;
   }
-  .bottom-sd-80 {
-    bottom: var(--spacing-sd-80);
+  .bottom-\[2px\] {
+    bottom: 2px;
   }
   .left-0 {
     left: 0;
@@ -704,6 +714,9 @@
   .z-\[60\] {
     z-index: 60;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .z-\[9000\] {
     z-index: 9000;
   }
@@ -743,12 +756,24 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .mx-\[4px\] {
+    margin-inline: 4px;
+  }
   .mx-\[calc\(12px-var\(--cmp-chipFilter-chip-group\)\)\] {
     margin-inline: calc(12px - var(--cmp-chipFilter-chip-group));
   }
+  .my-\[4px\] {
+    margin-block: 4px;
+  }
+  .my-\[6px\] {
+    margin-block: 6px;
+  }
   .my-auto {
     margin-block: auto;
   }
+  .my-sd-8 {
+    margin-block: var(--spacing-sd-8);
+  }
   .-mt-8 {
     margin-top: calc(var(--spacing) * -8);
   }
@@ -761,6 +786,12 @@
   .mt-\(--cmp-field-contents-gap\) {
     margin-top: var(--cmp-field-contents-gap);
   }
+  .mt-1 {
+    margin-top: var(--spacing);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -770,6 +801,9 @@
   .mt-\[2px\] {
     margin-top: 2px;
   }
+  .mt-\[6px\] {
+    margin-top: 6px;
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -779,9 +813,15 @@
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mt-sd-2 {
     margin-top: var(--spacing-sd-2);
   }
+  .mt-sd-4 {
+    margin-top: var(--spacing-sd-4);
+  }
   .mt-sd-8 {
     margin-top: var(--spacing-sd-8);
   }
@@ -800,6 +840,9 @@
   .-mr-px {
     margin-right: -1px;
   }
+  .mr-\[6px\] {
+    margin-right: 6px;
+  }
   .mr-\[8px\] {
     margin-right: 8px;
   }
@@ -809,6 +852,9 @@
   .mb-\[24px\] {
     margin-bottom: 24px;
   }
+  .mb-auto {
+    margin-bottom: auto;
+  }
   .mb-sd-8 {
     margin-bottom: var(--spacing-sd-8);
   }
@@ -876,6 +922,12 @@
   .h-\(--cmp-pageHeader-bar-height\) {
     height: var(--cmp-pageHeader-bar-height);
   }
+  .h-\(--cmp-radio-dot-size\) {
+    height: var(--cmp-radio-dot-size);
+  }
+  .h-\(--cmp-radio-size\) {
+    height: var(--cmp-radio-size);
+  }
   .h-\(--cmp-sectionHeaderCard-topBorder-thickness\) {
     height: var(--cmp-sectionHeaderCard-topBorder-thickness);
   }
@@ -888,15 +940,33 @@
   .h-11 {
     height: calc(var(--spacing) * 11);
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-\[1px\] {
+    height: 1px;
+  }
   .h-\[2px\] {
     height: 2px;
   }
+  .h-\[3px\] {
+    height: 3px;
+  }
+  .h-\[8px\] {
+    height: 8px;
+  }
   .h-\[10px\] {
     height: 10px;
   }
+  .h-\[12px\] {
+    height: 12px;
+  }
+  .h-\[15px\] {
+    height: 15px;
+  }
   .h-\[16px\] {
     height: 16px;
   }
@@ -915,9 +985,6 @@
   .h-\[32px\] {
     height: 32px;
   }
-  .h-\[40px\] {
-    height: 40px;
-  }
   .h-\[48px\] {
     height: 48px;
   }
@@ -927,6 +994,9 @@
   .h-\[56px\] {
     height: 56px;
   }
+  .h-\[72px\] {
+    height: 72px;
+  }
   .h-\[80vh\] {
     height: 80vh;
   }
@@ -954,9 +1024,15 @@
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[380px\] {
+    height: 380px;
+  }
   .h-\[420px\] {
     height: 420px;
   }
+  .h-\[520px\] {
+    height: 520px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -972,9 +1048,6 @@
   .h-\[var\(--cmp-datepicker-calendar-day-dot-size\)\] {
     height: var(--cmp-datepicker-calendar-day-dot-size);
   }
-  .h-\[var\(--cmp-datepicker-calendar-header-divider-height\)\] {
-    height: var(--cmp-datepicker-calendar-header-divider-height);
-  }
   .h-\[var\(--cmp-datepicker-calendar-range-height\)\] {
     height: var(--cmp-datepicker-calendar-range-height);
   }
@@ -1005,6 +1078,9 @@
   .h-\[var\(--sys-size-control-md-height\)\] {
     height: var(--sys-size-control-md-height);
   }
+  .h-\[var\(--x\)\] {
+    height: var(--x);
+  }
   .h-auto {
     height: auto;
   }
@@ -1023,14 +1099,17 @@
   .h-sd-8 {
     height: var(--spacing-sd-8);
   }
-  .h-sd-48 {
-    height: var(--spacing-sd-48);
+  .h-sd-16 {
+    height: var(--spacing-sd-16);
   }
-  .max-h-\[220px\] {
-    max-height: 220px;
+  .h-sd-20 {
+    height: var(--spacing-sd-20);
   }
-  .max-h-\[240px\] {
-    max-height: 240px;
+  .h-sd-32 {
+    height: var(--spacing-sd-32);
+  }
+  .h-sd-48 {
+    height: var(--spacing-sd-48);
   }
   .max-h-\[calc\(100dvh-48px\)\] {
     max-height: calc(100dvh - 48px);
@@ -1053,18 +1132,15 @@
   .min-h-\[28px\] {
     min-height: 28px;
   }
-  .min-h-\[32px\] {
-    min-height: 32px;
-  }
   .min-h-\[40px\] {
     min-height: 40px;
   }
-  .min-h-\[52px\] {
-    min-height: 52px;
-  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
   .min-h-\[328px\] {
     min-height: 328px;
   }
@@ -1089,24 +1165,45 @@
   .w-\(--cmp-listItem-accentStripe-width\) {
     width: var(--cmp-listItem-accentStripe-width);
   }
+  .w-\(--cmp-radio-dot-size\) {
+    width: var(--cmp-radio-dot-size);
+  }
+  .w-\(--cmp-radio-size\) {
+    width: var(--cmp-radio-size);
+  }
   .w-\(--cmp-splitter-border-width\) {
     width: var(--cmp-splitter-border-width);
   }
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
+  .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+  .w-\[1px\] {
+    width: 1px;
+  }
   .w-\[4px\] {
     width: 4px;
   }
+  .w-\[8px\] {
+    width: 8px;
+  }
   .w-\[9px\] {
     width: 9px;
   }
   .w-\[10px\] {
     width: 10px;
   }
+  .w-\[12px\] {
+    width: 12px;
+  }
   .w-\[14px\] {
     width: 14px;
   }
@@ -1128,15 +1225,24 @@
   .w-\[40px\] {
     width: 40px;
   }
+  .w-\[48px\] {
+    width: 48px;
+  }
   .w-\[61px\] {
     width: 61px;
   }
+  .w-\[176px\] {
+    width: 176px;
+  }
   .w-\[200px\] {
     width: 200px;
   }
   .w-\[220px\] {
     width: 220px;
   }
+  .w-\[240px\] {
+    width: 240px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
@@ -1236,6 +1342,9 @@
   .max-w-\[calc\(100dvw-48px\)\] {
     max-width: calc(100dvw - 48px);
   }
+  .max-w-\[calc\(100vw-32px\)\] {
+    max-width: calc(100vw - 32px);
+  }
   .max-w-\[var\(--radix-dropdown-menu-content-available-width\)\] {
     max-width: var(--radix-dropdown-menu-content-available-width);
   }
@@ -1260,6 +1369,9 @@
   .min-w-\[40px\] {
     min-width: 40px;
   }
+  .min-w-\[72px\] {
+    min-width: 72px;
+  }
   .min-w-\[160px\] {
     min-width: 160px;
   }
@@ -1302,6 +1414,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1416,6 +1531,9 @@
   .grid-cols-\[200px_1fr\] {
     grid-template-columns: 200px 1fr;
   }
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
+  }
   .grid-cols-\[repeat\(7\,var\(--cmp-datepicker-calendar-day-width\)\)\] {
     grid-template-columns: repeat(7,var(--cmp-datepicker-calendar-day-width));
   }
@@ -1443,6 +1561,9 @@
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .items-start {
     align-items: flex-start;
   }
@@ -1473,6 +1594,9 @@
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
+  .gap-\(--cmp-gnb-system-panel-gap\) {
+    gap: var(--cmp-gnb-system-panel-gap);
+  }
   .gap-\(--cmp-list-group-gap\) {
     gap: var(--cmp-list-group-gap);
   }
@@ -1491,6 +1615,12 @@
   .gap-\(--cmp-pageHeader-plain-title-gap\) {
     gap: var(--cmp-pageHeader-plain-title-gap);
   }
+  .gap-\(--cmp-radioCard-gap\) {
+    gap: var(--cmp-radioCard-gap);
+  }
+  .gap-\(--cmp-radioCard-group-gap\) {
+    gap: var(--cmp-radioCard-group-gap);
+  }
   .gap-\(--cmp-sectionHeaderCard-header-gap\) {
     gap: var(--cmp-sectionHeaderCard-header-gap);
   }
@@ -1509,6 +1639,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
@@ -1518,6 +1651,9 @@
   .gap-13 {
     gap: calc(var(--spacing) * 13);
   }
+  .gap-\[1px\] {
+    gap: 1px;
+  }
   .gap-\[2px\] {
     gap: 2px;
   }
@@ -1747,6 +1883,9 @@
   .overflow-auto {
     overflow: auto;
   }
+  .overflow-clip {
+    overflow: clip;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -1780,12 +1919,24 @@
   .rounded-\(--cmp-listItem-radius-bordered\) {
     border-radius: var(--cmp-listItem-radius-bordered);
   }
+  .rounded-\(--cmp-radio-radius\) {
+    border-radius: var(--cmp-radio-radius);
+  }
+  .rounded-\(--cmp-radioCard-radius\) {
+    border-radius: var(--cmp-radioCard-radius);
+  }
   .rounded-8 {
     border-radius: var(--radius-8);
   }
+  .rounded-\[1px\] {
+    border-radius: 1px;
+  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
+  .rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .rounded-\[4px\] {
     border-radius: 4px;
   }
@@ -1874,10 +2025,6 @@
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
   }
-  .rounded-l-\[var\(--cmp-radioButton-radius\)\] {
-    border-top-left-radius: var(--cmp-radioButton-radius);
-    border-bottom-left-radius: var(--cmp-radioButton-radius);
-  }
   .rounded-l-\[var\(--cmp-select-sm-radius\)\] {
     border-top-left-radius: var(--cmp-select-sm-radius);
     border-bottom-left-radius: var(--cmp-select-sm-radius);
@@ -1893,10 +2040,6 @@
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-  .rounded-r-\[var\(--cmp-radioButton-radius\)\] {
-    border-top-right-radius: var(--cmp-radioButton-radius);
-    border-bottom-right-radius: var(--cmp-radioButton-radius);
-  }
   .rounded-r-\[var\(--cmp-select-sm-radius\)\] {
     border-top-right-radius: var(--cmp-select-sm-radius);
     border-bottom-right-radius: var(--cmp-select-sm-radius);
@@ -1926,6 +2069,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-\(length\:--cmp-radio-borderWidth\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-radio-borderWidth);
+  }
+  .border-\(length\:--cmp-radioCard-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-radioCard-border-width);
+  }
   .border-0 {
     border-style: var(--tw-border-style);
     border-width: 0px;
@@ -1946,10 +2097,6 @@
     border-style: var(--tw-border-style);
     border-width: var(--cmp-guide-button-border-width);
   }
-  .border-\[length\:var\(--cmp-listDraggableItem-bordered-dragging-border-width\)\] {
-    border-style: var(--tw-border-style);
-    border-width: var(--cmp-listDraggableItem-bordered-dragging-border-width);
-  }
   .border-\[length\:var\(--cmp-table-border-width\)\] {
     border-style: var(--tw-border-style);
     border-width: var(--cmp-table-border-width);
@@ -1974,6 +2121,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1990,9 +2141,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .\!border-\[\#93C4FF\] {
-    border-color: #93C4FF !important;
-  }
   .\!border-border-accentLight {
     border-color: var(--color-border-accentLight) !important;
   }
@@ -2020,6 +2168,12 @@
   .border-\(--cmp-pageHeader-bar-border\) {
     border-color: var(--cmp-pageHeader-bar-border);
   }
+  .border-\(--cmp-radioCard-border-default\) {
+    border-color: var(--cmp-radioCard-border-default);
+  }
+  .border-\(--cmp-radioCard-border-selected\) {
+    border-color: var(--cmp-radioCard-border-selected);
+  }
   .border-\(--cmp-sectionHeaderCard-header-border\) {
     border-color: var(--cmp-sectionHeaderCard-header-border);
   }
@@ -2029,6 +2183,9 @@
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
   }
+  .border-\(--rc-dot-border\) {
+    border-color: var(--rc-dot-border);
+  }
   .border-\(--sys-color-border-default\) {
     border-color: var(--sys-color-border-default);
   }
@@ -2038,6 +2195,9 @@
   .border-\[\#E1E1E1\] {
     border-color: #E1E1E1;
   }
+  .border-\[\#e1e1e1\] {
+    border-color: #e1e1e1;
+  }
   .border-\[\#e5e7eb\] {
     border-color: #e5e7eb;
   }
@@ -2080,9 +2240,6 @@
   .border-\[color\:var\(--color-grey-30\)\] {
     border-color: var(--color-grey-30);
   }
-  .border-\[color\:var\(--color-grey-45\)\] {
-    border-color: var(--color-grey-45);
-  }
   .border-\[color\:var\(--dd-border\)\] {
     border-color: var(--dd-border);
   }
@@ -2134,6 +2291,21 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\(--cmp-gnb-dark-bg\) {
+    background-color: var(--cmp-gnb-dark-bg);
+  }
+  .bg-\(--cmp-gnb-light-bg\) {
+    background-color: var(--cmp-gnb-light-bg);
+  }
+  .bg-\(--cmp-gnb-system-item-dark-bg-default\) {
+    background-color: var(--cmp-gnb-system-item-dark-bg-default);
+  }
+  .bg-\(--cmp-gnb-system-item-darker-bg-default\) {
+    background-color: var(--cmp-gnb-system-item-darker-bg-default);
+  }
+  .bg-\(--cmp-gnb-system-item-light-bg-default\) {
+    background-color: var(--cmp-gnb-system-item-light-bg-default);
+  }
   .bg-\(--cmp-image-bg\) {
     background-color: var(--cmp-image-bg);
   }
@@ -2179,6 +2351,15 @@
   .bg-\(--cmp-pageHeader-bar-bg\) {
     background-color: var(--cmp-pageHeader-bar-bg);
   }
+  .bg-\(--cmp-radioCard-bg-default\) {
+    background-color: var(--cmp-radioCard-bg-default);
+  }
+  .bg-\(--cmp-radioCard-bg-disabled\) {
+    background-color: var(--cmp-radioCard-bg-disabled);
+  }
+  .bg-\(--cmp-radioCard-bg-selected\) {
+    background-color: var(--cmp-radioCard-bg-selected);
+  }
   .bg-\(--cmp-sectionHeaderCard-header-bg\) {
     background-color: var(--cmp-sectionHeaderCard-header-bg);
   }
@@ -2197,6 +2378,24 @@
   .bg-\(--cmp-tree-item-bg-default\) {
     background-color: var(--cmp-tree-item-bg-default);
   }
+  .bg-\(--gsb-bg\) {
+    background-color: var(--gsb-bg);
+  }
+  .bg-\(--gsb-icon-bg\) {
+    background-color: var(--gsb-icon-bg);
+  }
+  .bg-\(--rc-dot-bg\) {
+    background-color: var(--rc-dot-bg);
+  }
+  .bg-\(--rc-dot-fill\) {
+    background-color: var(--rc-dot-fill);
+  }
+  .bg-\(--sab-bg\) {
+    background-color: var(--sab-bg);
+  }
+  .bg-\(--sab-icon-bg\) {
+    background-color: var(--sab-icon-bg);
+  }
   .bg-\(--sys-color-bg-frame\) {
     background-color: var(--sys-color-bg-frame);
   }
@@ -2221,6 +2420,9 @@
   .bg-\[\#FFE3F7\] {
     background-color: #FFE3F7;
   }
+  .bg-\[\#FFF4F4\] {
+    background-color: #FFF4F4;
+  }
   .bg-\[\#eee\] {
     background-color: #eee;
   }
@@ -2290,6 +2492,9 @@
   .bg-\[var\(--cmp-listBoxItem-depth2-middle-bg\)\] {
     background-color: var(--cmp-listBoxItem-depth2-middle-bg);
   }
+  .bg-\[var\(--cmp-listItem-bg-selected\)\] {
+    background-color: var(--cmp-listItem-bg-selected);
+  }
   .bg-\[var\(--cmp-modal-bg\)\] {
     background-color: var(--cmp-modal-bg);
   }
@@ -2323,6 +2528,9 @@
   .bg-\[var\(--color-grey-15\)\] {
     background-color: var(--color-grey-15);
   }
+  .bg-\[var\(--color-grey-45\)\] {
+    background-color: var(--color-grey-45);
+  }
   .bg-\[var\(--color-white\)\] {
     background-color: var(--color-white);
   }
@@ -2341,6 +2549,9 @@
   .bg-\[var\(--sys-color-bg-screen\)\] {
     background-color: var(--sys-color-bg-screen);
   }
+  .bg-\[var\(--sys-color-border-default\)\] {
+    background-color: var(--sys-color-border-default);
+  }
   .bg-\[var\(--sys-color-divider-default\)\] {
     background-color: var(--sys-color-divider-default);
   }
@@ -2395,9 +2606,18 @@
   .bg-grey-20 {
     background-color: var(--color-grey-20);
   }
+  .bg-grey-30 {
+    background-color: var(--color-grey-30);
+  }
   .bg-grey-90 {
     background-color: var(--color-grey-90);
   }
+  .bg-inherit {
+    background-color: inherit;
+  }
+  .bg-primary-50 {
+    background-color: var(--color-primary-50);
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
@@ -2413,6 +2633,9 @@
       background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
     }
   }
+  .p-\(--cmp-gnb-system-panel-gap\) {
+    padding: var(--cmp-gnb-system-panel-gap);
+  }
   .p-\(--cmp-list-group-padding\) {
     padding: var(--cmp-list-group-padding);
   }
@@ -2443,6 +2666,9 @@
   .p-\[2px\] {
     padding: 2px;
   }
+  .p-\[4px\] {
+    padding: 4px;
+  }
   .p-\[8px\] {
     padding: 8px;
   }
@@ -2515,12 +2741,18 @@
   .px-\(--cmp-popup-header-paddingX\) {
     padding-inline: var(--cmp-popup-header-paddingX);
   }
+  .px-\(--cmp-radioCard-paddingX\) {
+    padding-inline: var(--cmp-radioCard-paddingX);
+  }
   .px-\(--cmp-sectionHeaderCard-header-paddingX\) {
     padding-inline: var(--cmp-sectionHeaderCard-header-paddingX);
   }
   .px-\(--cmp-tree-item-paddingX\) {
     padding-inline: var(--cmp-tree-item-paddingX);
   }
+  .px-\(--sys-space-panel-padding-default\) {
+    padding-inline: var(--sys-space-panel-padding-default);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -2608,6 +2840,9 @@
   .px-sd-8 {
     padding-inline: var(--spacing-sd-8);
   }
+  .px-sd-10 {
+    padding-inline: var(--spacing-sd-10);
+  }
   .px-sd-12 {
     padding-inline: var(--spacing-sd-12);
   }
@@ -2650,6 +2885,9 @@
   .py-\(--cmp-popup-header-paddingY\) {
     padding-block: var(--cmp-popup-header-paddingY);
   }
+  .py-\(--cmp-radioCard-paddingY\) {
+    padding-block: var(--cmp-radioCard-paddingY);
+  }
   .py-\(--cmp-sectionHeaderCard-header-paddingY\) {
     padding-block: var(--cmp-sectionHeaderCard-header-paddingY);
   }
@@ -2731,6 +2969,9 @@
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-\[24px\] {
+    padding-top: 24px;
+  }
   .pt-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
     padding-top: var(--cmp-chipFilter-listbox-list-paddingY);
   }
@@ -2773,12 +3014,18 @@
   .pb-sd-16 {
     padding-bottom: var(--spacing-sd-16);
   }
+  .pb-sd-48 {
+    padding-bottom: var(--spacing-sd-48);
+  }
   .pl-\(--cmp-guide-contents-depth-paddingLeft\) {
     padding-left: var(--cmp-guide-contents-depth-paddingLeft);
   }
   .pl-\(--cmp-pageHeader-title-paddingLeft\) {
     padding-left: var(--cmp-pageHeader-title-paddingLeft);
   }
+  .pl-\(--cmp-radioCard-subtitle-paddingLeft\) {
+    padding-left: var(--cmp-radioCard-subtitle-paddingLeft);
+  }
   .pl-\[16px\] {
     padding-left: 16px;
   }
@@ -2832,6 +3079,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-11 {
+    font-size: var(--text-11);
+  }
   .text-12 {
     font-size: var(--text-12);
   }
@@ -2882,6 +3132,10 @@
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
   }
+  .leading-\[0\] {
+    --tw-leading: 0;
+    line-height: 0;
+  }
   .leading-\[16px\] {
     --tw-leading: 16px;
     line-height: 16px;
@@ -3044,18 +3298,42 @@
   .text-\(--cmp-pageHeader-title-text\) {
     color: var(--cmp-pageHeader-title-text);
   }
+  .text-\(--cmp-radioCard-label-color\) {
+    color: var(--cmp-radioCard-label-color);
+  }
+  .text-\(--cmp-radioCard-subtitle-color\) {
+    color: var(--cmp-radioCard-subtitle-color);
+  }
   .text-\(--cmp-tree-item-text-default\) {
     color: var(--cmp-tree-item-text-default);
   }
-  .text-\(--cmp-tree-item-text-selected\) {
-    color: var(--cmp-tree-item-text-selected);
-  }
   .text-\(--color-grey-65\) {
     color: var(--color-grey-65);
   }
   .text-\(--color-var\) {
     color: var(--color-var);
   }
+  .text-\(--color-white\) {
+    color: var(--color-white);
+  }
+  .text-\(--gsb-icon\) {
+    color: var(--gsb-icon);
+  }
+  .text-\(--gsb-text\) {
+    color: var(--gsb-text);
+  }
+  .text-\(--sab-action-icon\) {
+    color: var(--sab-action-icon);
+  }
+  .text-\(--sab-action-text\) {
+    color: var(--sab-action-text);
+  }
+  .text-\(--sab-icon-glyph\) {
+    color: var(--sab-icon-glyph);
+  }
+  .text-\(--sab-text\) {
+    color: var(--sab-text);
+  }
   .text-\(--sys-color-disabled-text\) {
     color: var(--sys-color-disabled-text);
   }
@@ -3140,6 +3418,9 @@
   .text-\[color\:var\(--cmp-listBoxItem-content-selected\)\] {
     color: var(--cmp-listBoxItem-content-selected);
   }
+  .text-\[color\:var\(--cmp-listItem-text-selected\)\] {
+    color: var(--cmp-listItem-text-selected);
+  }
   .text-\[color\:var\(--cmp-modal-confirm-message-color\)\] {
     color: var(--cmp-modal-confirm-message-color);
   }
@@ -3167,9 +3448,6 @@
   .text-\[color\:var\(--cmp-progress-color-label\)\] {
     color: var(--cmp-progress-color-label);
   }
-  .text-\[color\:var\(--cmp-select-text-default\)\] {
-    color: var(--cmp-select-text-default);
-  }
   .text-\[color\:var\(--co-content\)\] {
     color: var(--co-content);
   }
@@ -3260,9 +3538,15 @@
   .text-grey-55 {
     color: var(--color-grey-55);
   }
+  .text-grey-60 {
+    color: var(--color-grey-60);
+  }
   .text-grey-65 {
     color: var(--color-grey-65);
   }
+  .text-grey-70 {
+    color: var(--color-grey-70);
+  }
   .text-grey-80 {
     color: var(--color-grey-80);
   }
@@ -3287,6 +3571,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .no-underline {
     text-decoration-line: none;
   }
@@ -3323,6 +3610,10 @@
     --tw-shadow: 0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.16));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_8px_16px_rgba\(15_23_42_\/_0\.12\)\] {
+    --tw-shadow: 0 8px 16px var(--tw-shadow-color, rgba(15 23 42 / 0.12));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[2px_2px_12px_2px_rgba\(0\,0\,0\,0\.1\)\] {
     --tw-shadow: 2px 2px 12px 2px var(--tw-shadow-color, rgba(0,0,0,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3344,7 +3635,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-floating {
-    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.1));
+    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 4px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-none {
@@ -3352,11 +3643,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-normal-md {
-    --tw-shadow: 0px 8px 36px -6px var(--tw-shadow-color, rgba(34,34,34,0.16)), 4px 12px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.12));
+    --tw-shadow: 0px 8px 36px -6px var(--tw-shadow-color, rgba(34,34,34,0.16)), 4px 8px 12px -4px var(--tw-shadow-color, rgba(34,34,34,0.16));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-normal-sm {
-    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 8px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.1));
+    --tw-shadow: 0px 0px 24px -6px var(--tw-shadow-color, rgba(34,34,34,0.12)), 4px 4px 16px -4px var(--tw-shadow-color, rgba(34,34,34,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .ring {
@@ -3367,6 +3658,13 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .outline-\[var\(--color-border-accent\)\] {
+    outline-color: var(--color-border-accent);
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -3479,6 +3777,20 @@
       }
     }
   }
+  .group-hover\:bg-\(--gsb-icon-bg-hover\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--gsb-icon-bg-hover);
+      }
+    }
+  }
+  .group-hover\:bg-\(--sab-icon-bg-hover\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--sab-icon-bg-hover);
+      }
+    }
+  }
   .group-hover\:font-bold {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3487,6 +3799,27 @@
       }
     }
   }
+  .group-hover\:text-\(--gsb-icon-hover\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--gsb-icon-hover);
+      }
+    }
+  }
+  .group-hover\:text-\(--sab-icon-glyph-hover\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--sab-icon-glyph-hover);
+      }
+    }
+  }
+  .group-hover\/editor-tool\:opacity-5 {
+    &:is(:where(.group\/editor-tool):hover *) {
+      @media (hover: hover) {
+        opacity: 5%;
+      }
+    }
+  }
   .group-hover\/filepicker\:text-\[color\:var\(--cmp-filepicker-text-default\)\] {
     &:is(:where(.group\/filepicker):hover *) {
       @media (hover: hover) {
@@ -3501,6 +3834,13 @@
       }
     }
   }
+  .group-hover\/select-clear\:opacity-5 {
+    &:is(:where(.group\/select-clear):hover *) {
+      @media (hover: hover) {
+        opacity: 5%;
+      }
+    }
+  }
   .group-hover\/table-row\:bg-\[var\(--color-grey-05\)\] {
     &:is(:where(.group\/table-row):hover *) {
       @media (hover: hover) {
@@ -3533,14 +3873,14 @@
       color: var(--cmp-textinput-text-placeholder);
     }
   }
-  .placeholder\:text-\[color\:var\(--color-grey-55\)\] {
+  .placeholder\:text-\[color\:var\(--sys-color-field-text-placeholder\)\] {
     &::placeholder {
-      color: var(--color-grey-55);
+      color: var(--sys-color-field-text-placeholder);
     }
   }
-  .placeholder\:text-\[color\:var\(--sys-color-field-text-placeholder\)\] {
+  .placeholder\:text-gray-400 {
     &::placeholder {
-      color: var(--sys-color-field-text-placeholder);
+      color: var(--color-gray-400);
     }
   }
   .before\:absolute {
@@ -3555,12 +3895,6 @@
       top: 0;
     }
   }
-  .before\:top-\[-5px\] {
-    &::before {
-      content: var(--tw-content);
-      top: -5px;
-    }
-  }
   .before\:right-0 {
     &::before {
       content: var(--tw-content);
@@ -3615,10 +3949,10 @@
       flex-shrink: 0;
     }
   }
-  .before\:bg-\(--sys-color-border-accent\) {
+  .before\:bg-\(--sys-color-fg-accentLight\) {
     &::before {
       content: var(--tw-content);
-      background-color: var(--sys-color-border-accent);
+      background-color: var(--sys-color-fg-accentLight);
     }
   }
   .before\:content-\[\'\'\] {
@@ -3639,58 +3973,10 @@
       content: var(--tw-content);
     }
   }
-  .after\:absolute {
-    &::after {
-      content: var(--tw-content);
-      position: absolute;
-    }
-  }
-  .after\:right-0 {
-    &::after {
-      content: var(--tw-content);
-      right: 0;
-    }
-  }
-  .after\:bottom-\[-1px\] {
-    &::after {
-      content: var(--tw-content);
-      bottom: -1px;
-    }
-  }
-  .after\:bottom-\[-5px\] {
-    &::after {
-      content: var(--tw-content);
-      bottom: -5px;
-    }
-  }
-  .after\:left-0 {
-    &::after {
-      content: var(--tw-content);
-      left: 0;
-    }
-  }
-  .after\:z-10 {
-    &::after {
-      content: var(--tw-content);
-      z-index: 10;
-    }
-  }
-  .after\:h-\[2px\] {
-    &::after {
-      content: var(--tw-content);
-      height: 2px;
-    }
-  }
-  .after\:bg-\(--sys-color-border-accent\) {
-    &::after {
-      content: var(--tw-content);
-      background-color: var(--sys-color-border-accent);
-    }
-  }
-  .after\:content-\[\'\'\] {
-    &::after {
-      --tw-content: '';
-      content: var(--tw-content);
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
     }
   }
   .autofill\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
@@ -3795,6 +4081,13 @@
       }
     }
   }
+  .hover\:border-\(--cmp-radioCard-border-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--cmp-radioCard-border-hover);
+      }
+    }
+  }
   .hover\:border-\(--sys-color-field-border-focus\) {
     &:hover {
       @media (hover: hover) {
@@ -3872,6 +4165,13 @@
       }
     }
   }
+  .hover\:bg-\(--cmp-radioCard-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cmp-radioCard-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\(--cmp-tree-item-bg-hover\) {
     &:hover {
       @media (hover: hover) {
@@ -3879,6 +4179,20 @@
       }
     }
   }
+  .hover\:bg-\(--gsb-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--gsb-bg-hover);
+      }
+    }
+  }
+  .hover\:bg-\(--sab-bg-hover\) {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--sab-bg-hover);
+      }
+    }
+  }
   .hover\:bg-\(--sys-color-bg-neutralBright\) {
     &:hover {
       @media (hover: hover) {
@@ -3928,6 +4242,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--color-bg-neutralLight\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-bg-neutralLight);
+      }
+    }
+  }
   .hover\:bg-\[var\(--color-grey-05\)\] {
     &:hover {
       @media (hover: hover) {
@@ -4050,6 +4371,11 @@
       border-color: var(--cmp-datepicker-border-focus);
     }
   }
+  .focus\:border-gray-400 {
+    &:focus {
+      border-color: var(--color-gray-400);
+    }
+  }
   .focus-visible\:bg-\[var\(--cmp-listBoxItem-bg-hover\)\] {
     &:focus-visible {
       background-color: var(--cmp-listBoxItem-bg-hover);
@@ -4072,6 +4398,12 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:shadow-\[0_0_0_2px_var\(--cmp-toggle-border-select\)\] {
+    &:focus-visible {
+      --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--cmp-toggle-border-select));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:outline {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -4125,11 +4457,26 @@
       cursor: not-allowed;
     }
   }
+  .data-\[disabled\]\:bg-transparent {
+    &[data-disabled] {
+      background-color: transparent;
+    }
+  }
   .data-\[disabled\]\:text-\[color\:var\(--cmp-button-text-disabled\)\] {
     &[data-disabled] {
       color: var(--cmp-button-text-disabled);
     }
   }
+  .data-\[disabled\]\:text-\[color\:var\(--cmp-ghostButton-icon-disabled\)\] {
+    &[data-disabled] {
+      color: var(--cmp-ghostButton-icon-disabled);
+    }
+  }
+  .data-\[highlighted\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    &[data-highlighted] {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
   .data-\[highlighted\]\:bg-\[var\(--sys-color-bg-accent\)\] {
     &[data-highlighted] {
       background-color: var(--sys-color-bg-accent);
@@ -4315,6 +4662,11 @@
       transition-property: none;
     }
   }
+  .md\:h-sd-20 {
+    @media (width >= 48rem) {
+      height: var(--spacing-sd-20);
+    }
+  }
   .md\:p-4 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 4);
@@ -4339,6 +4691,607 @@
       }
     }
   }
+  .\[\&_\.ProseMirror\]\:min-h-full {
+    & .ProseMirror {
+      min-height: 100%;
+    }
+  }
+  .\[\&_\.ProseMirror\]\:break-words {
+    & .ProseMirror {
+      overflow-wrap: break-word;
+    }
+  }
+  .\[\&_\.ProseMirror\]\:whitespace-pre-wrap {
+    & .ProseMirror {
+      white-space: pre-wrap;
+    }
+  }
+  .\[\&_\.ProseMirror\]\:outline-none {
+    & .ProseMirror {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .\[\&_\.ProseMirror-selectednode\]\:outline {
+    & .ProseMirror-selectednode {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .\[\&_\.ProseMirror-selectednode\]\:outline-2 {
+    & .ProseMirror-selectednode {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .\[\&_\.ProseMirror-selectednode\]\:outline-\[var\(--color-border-accent\)\] {
+    & .ProseMirror-selectednode {
+      outline-color: var(--color-border-accent);
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:my-\[8px\] {
+    & .sd-editor-image {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:h-auto {
+    & .sd-editor-image {
+      height: auto;
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:max-w-full {
+    & .sd-editor-image {
+      max-width: 100%;
+    }
+  }
+  .\[\&_\.sd-editor-image\]\:rounded-\[4px\] {
+    & .sd-editor-image {
+      border-radius: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:my-\[8px\] {
+    & .sd-editor-table {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:w-full {
+    & .sd-editor-table {
+      width: 100%;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:table-fixed {
+    & .sd-editor-table {
+      table-layout: fixed;
+    }
+  }
+  .\[\&_\.sd-editor-table\]\:border-collapse {
+    & .sd-editor-table {
+      border-collapse: collapse;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:border {
+    & .sd-editor-table-cell {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:border-solid {
+    & .sd-editor-table-cell {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:border-\[color\:var\(--color-border-default\)\] {
+    & .sd-editor-table-cell {
+      border-color: var(--color-border-default);
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:px-\[8px\] {
+    & .sd-editor-table-cell {
+      padding-inline: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:py-\[4px\] {
+    & .sd-editor-table-cell {
+      padding-block: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\]\:align-top {
+    & .sd-editor-table-cell {
+      vertical-align: top;
+    }
+  }
+  .\[\&_\.sd-editor-table-cell\>p\]\:my-0 {
+    & .sd-editor-table-cell>p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:border {
+    & .sd-editor-table-header {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:border-solid {
+    & .sd-editor-table-header {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:border-\[color\:var\(--color-border-default\)\] {
+    & .sd-editor-table-header {
+      border-color: var(--color-border-default);
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    & .sd-editor-table-header {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:px-\[8px\] {
+    & .sd-editor-table-header {
+      padding-inline: 8px;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:py-\[4px\] {
+    & .sd-editor-table-header {
+      padding-block: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:text-left {
+    & .sd-editor-table-header {
+      text-align: left;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:align-top {
+    & .sd-editor-table-header {
+      vertical-align: top;
+    }
+  }
+  .\[\&_\.sd-editor-table-header\]\:font-bold {
+    & .sd-editor-table-header {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_\.sd-editor-table-header\>p\]\:my-0 {
+    & .sd-editor-table-header>p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\]\:flex {
+    & .sd-editor-task-item {
+      display: flex;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\]\:items-start {
+    & .sd-editor-task-item {
+      align-items: flex-start;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\]\:gap-\[6px\] {
+    & .sd-editor-task-item {
+      gap: 6px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:m-0 {
+    & .sd-editor-task-item input {
+      margin: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:h-\[13px\] {
+    & .sd-editor-task-item input {
+      height: 13px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:w-\[13px\] {
+    & .sd-editor-task-item input {
+      width: 13px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:cursor-pointer {
+    & .sd-editor-task-item input {
+      cursor: pointer;
+    }
+  }
+  .\[\&_\.sd-editor-task-item_input\]\:accent-\[var\(--color-fg-accent\)\] {
+    & .sd-editor-task-item input {
+      accent-color: var(--color-fg-accent);
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>div\]\:min-w-0 {
+    & .sd-editor-task-item>div {
+      min-width: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>div\]\:flex-1 {
+    & .sd-editor-task-item>div {
+      flex: 1;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>label\]\:mt-\[3px\] {
+    & .sd-editor-task-item>label {
+      margin-top: 3px;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>label\]\:shrink-0 {
+    & .sd-editor-task-item>label {
+      flex-shrink: 0;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\>label\]\:leading-none {
+    & .sd-editor-task-item>label {
+      --tw-leading: 1;
+      line-height: 1;
+    }
+  }
+  .\[\&_\.sd-editor-task-item\[data-checked\=true\]\>div\]\:text-\[color\:var\(--color-fg-tertiary\)\] {
+    & .sd-editor-task-item[data-checked=true]>div {
+      color: var(--color-fg-tertiary);
+    }
+  }
+  .\[\&_\.sd-editor-task-item\[data-checked\=true\]\>div\]\:line-through {
+    & .sd-editor-task-item[data-checked=true]>div {
+      text-decoration-line: line-through;
+    }
+  }
+  .\[\&_\.sd-editor-task-list\]\:my-\[4px\] {
+    & .sd-editor-task-list {
+      margin-block: 4px;
+    }
+  }
+  .\[\&_\.sd-editor-task-list\]\:list-none {
+    & .sd-editor-task-list {
+      list-style-type: none;
+    }
+  }
+  .\[\&_\.sd-editor-task-list\]\:pl-0 {
+    & .sd-editor-task-list {
+      padding-left: 0;
+    }
+  }
+  .\[\&_\.selectedCell\]\:relative {
+    & .selectedCell {
+      position: relative;
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:pointer-events-none {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:absolute {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        position: absolute;
+      }
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:inset-0 {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        inset: 0;
+      }
+    }
+  }
+  .\[\&_\.selectedCell\]\:after\:bg-\[var\(--color-bg-accentFaint\)\] {
+    & .selectedCell {
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--color-bg-accentFaint);
+      }
+    }
+  }
+  .\[\&_a\]\:cursor-pointer {
+    & a {
+      cursor: pointer;
+    }
+  }
+  .\[\&_a\]\:text-\[color\:var\(--color-fg-accent\)\] {
+    & a {
+      color: var(--color-fg-accent);
+    }
+  }
+  .\[\&_a\]\:underline {
+    & a {
+      text-decoration-line: underline;
+    }
+  }
+  .\[\&_blockquote\]\:my-\[8px\] {
+    & blockquote {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_blockquote\]\:border-l-\[3px\] {
+    & blockquote {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 3px;
+    }
+  }
+  .\[\&_blockquote\]\:border-solid {
+    & blockquote {
+      --tw-border-style: solid;
+      border-style: solid;
+    }
+  }
+  .\[\&_blockquote\]\:border-l-\[color\:var\(--color-border-default\)\] {
+    & blockquote {
+      border-left-color: var(--color-border-default);
+    }
+  }
+  .\[\&_blockquote\]\:pl-\[12px\] {
+    & blockquote {
+      padding-left: 12px;
+    }
+  }
+  .\[\&_blockquote\]\:text-\[color\:var\(--color-fg-tertiary\)\] {
+    & blockquote {
+      color: var(--color-fg-tertiary);
+    }
+  }
+  .\[\&_code\]\:rounded-\[3px\] {
+    & code {
+      border-radius: 3px;
+    }
+  }
+  .\[\&_code\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    & code {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
+  .\[\&_code\]\:px-\[4px\] {
+    & code {
+      padding-inline: 4px;
+    }
+  }
+  .\[\&_code\]\:py-\[1px\] {
+    & code {
+      padding-block: 1px;
+    }
+  }
+  .\[\&_em\]\:italic {
+    & em {
+      font-style: italic;
+    }
+  }
+  .\[\&_h1\]\:mt-\[12px\] {
+    & h1 {
+      margin-top: 12px;
+    }
+  }
+  .\[\&_h1\]\:mb-\[4px\] {
+    & h1 {
+      margin-bottom: 4px;
+    }
+  }
+  .\[\&_h1\]\:text-\[18px\] {
+    & h1 {
+      font-size: 18px;
+    }
+  }
+  .\[\&_h1\]\:leading-\[28px\] {
+    & h1 {
+      --tw-leading: 28px;
+      line-height: 28px;
+    }
+  }
+  .\[\&_h1\]\:font-bold {
+    & h1 {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_h2\]\:mt-\[12px\] {
+    & h2 {
+      margin-top: 12px;
+    }
+  }
+  .\[\&_h2\]\:mb-\[4px\] {
+    & h2 {
+      margin-bottom: 4px;
+    }
+  }
+  .\[\&_h2\]\:text-\[16px\] {
+    & h2 {
+      font-size: 16px;
+    }
+  }
+  .\[\&_h2\]\:leading-\[24px\] {
+    & h2 {
+      --tw-leading: 24px;
+      line-height: 24px;
+    }
+  }
+  .\[\&_h2\]\:font-bold {
+    & h2 {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_h3\]\:mt-\[8px\] {
+    & h3 {
+      margin-top: 8px;
+    }
+  }
+  .\[\&_h3\]\:mb-\[4px\] {
+    & h3 {
+      margin-bottom: 4px;
+    }
+  }
+  .\[\&_h3\]\:text-\[14px\] {
+    & h3 {
+      font-size: 14px;
+    }
+  }
+  .\[\&_h3\]\:leading-\[22px\] {
+    & h3 {
+      --tw-leading: 22px;
+      line-height: 22px;
+    }
+  }
+  .\[\&_h3\]\:font-bold {
+    & h3 {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_hr\]\:my-\[12px\] {
+    & hr {
+      margin-block: 12px;
+    }
+  }
+  .\[\&_hr\]\:border-t {
+    & hr {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 1px;
+    }
+  }
+  .\[\&_hr\]\:border-\[color\:var\(--color-border-default\)\] {
+    & hr {
+      border-color: var(--color-border-default);
+    }
+  }
+  .\[\&_li\]\:my-0 {
+    & li {
+      margin-block: 0;
+    }
+  }
+  .\[\&_li\>p\]\:my-0 {
+    & li>p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_ol\]\:my-\[4px\] {
+    & ol {
+      margin-block: 4px;
+    }
+  }
+  .\[\&_ol\]\:list-decimal {
+    & ol {
+      list-style-type: decimal;
+    }
+  }
+  .\[\&_ol\]\:pl-\[20px\] {
+    & ol {
+      padding-left: 20px;
+    }
+  }
+  .\[\&_p\]\:my-0 {
+    & p {
+      margin-block: 0;
+    }
+  }
+  .\[\&_p\+p\]\:mt-\[4px\] {
+    & p+p {
+      margin-top: 4px;
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:pointer-events-none {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        pointer-events: none;
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:float-left {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        float: left;
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:h-0 {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        height: 0;
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:text-\[color\:var\(--sys-color-field-text-placeholder\)\] {
+    & p.is-editor-empty:first-child {
+      &::before {
+        content: var(--tw-content);
+        color: var(--sys-color-field-text-placeholder);
+      }
+    }
+  }
+  .\[\&_p\.is-editor-empty\:first-child\]\:before\:content-\[attr\(data-placeholder\)\] {
+    & p.is-editor-empty:first-child {
+      &::before {
+        --tw-content: attr(data-placeholder);
+        content: var(--tw-content);
+      }
+    }
+  }
+  .\[\&_pre\]\:my-\[8px\] {
+    & pre {
+      margin-block: 8px;
+    }
+  }
+  .\[\&_pre\]\:rounded-\[4px\] {
+    & pre {
+      border-radius: 4px;
+    }
+  }
+  .\[\&_pre\]\:bg-\[var\(--color-bg-neutralLight\)\] {
+    & pre {
+      background-color: var(--color-bg-neutralLight);
+    }
+  }
+  .\[\&_pre\]\:p-\[12px\] {
+    & pre {
+      padding: 12px;
+    }
+  }
+  .\[\&_pre_code\]\:bg-transparent {
+    & pre code {
+      background-color: transparent;
+    }
+  }
+  .\[\&_pre_code\]\:p-0 {
+    & pre code {
+      padding: 0;
+    }
+  }
+  .\[\&_s\]\:line-through {
+    & s {
+      text-decoration-line: line-through;
+    }
+  }
+  .\[\&_strong\]\:font-bold {
+    & strong {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+  }
+  .\[\&_u\]\:underline {
+    & u {
+      text-decoration-line: underline;
+    }
+  }
+  .\[\&_ul\]\:my-\[4px\] {
+    & ul {
+      margin-block: 4px;
+    }
+  }
+  .\[\&_ul\]\:list-disc {
+    & ul {
+      list-style-type: disc;
+    }
+  }
+  .\[\&_ul\]\:pl-\[20px\] {
+    & ul {
+      padding-left: 20px;
+    }
+  }
   .\[\&\:-webkit-autofill\]\:\[box-shadow\:0_0_0_1000px_var\(--sys-color-field-bg-default\)_inset\] {
     &:-webkit-autofill {
       box-shadow: 0 0 0 1000px var(--sys-color-field-bg-default) inset;
@@ -4471,20 +5424,19 @@
       border-left: 1px solid var(--sys-color-border-default);
     }
   }
+  .\[\&\:\:-webkit-search-cancel-button\]\:hidden {
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
   .\[\&\:has\(\>button\:hover\)\]\:border-border-strong {
     &:has(>button:hover) {
       border-color: var(--color-border-strong);
     }
   }
-  .\[\&\>\*\]\:border-b {
+  .\[\&\>\*\]\:w-full {
     &>* {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
-  .\[\&\>\*\]\:border-\(--cmp-listItem-border-default\) {
-    &>* {
-      border-color: var(--cmp-listItem-border-default);
+      width: 100%;
     }
   }
   .\[\&\>\*\:not\(\:last-child\)\]\:border-b {
@@ -4503,6 +5455,43 @@
       background-color: var(--cmp-listExpansionItem-title-bg-hover);
     }
   }
+  .\[\&\>div\:last-child\]\:min-h-0 {
+    &>div:last-child {
+      min-height: 0;
+    }
+  }
+  .\[\&\>div\:last-child\]\:flex-1 {
+    &>div:last-child {
+      flex: 1;
+    }
+  }
+  .\[\[data-drag-active\]_\&\]\:hover\:border-\(--cmp-listDraggableItem-border-default\) {
+    [data-drag-active] & {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--cmp-listDraggableItem-border-default);
+        }
+      }
+    }
+  }
+  .\[\[data-drag-active\]_\&\]\:hover\:bg-\(--cmp-listDraggableItem-bg-default\) {
+    [data-drag-active] & {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--cmp-listDraggableItem-bg-default);
+        }
+      }
+    }
+  }
+  .\[\[data-drag-active\]_\&\]\:hover\:bg-transparent {
+    [data-drag-active] & {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
 }
 :root {
   --sys-size-control-xs-height: 24px;
@@ -4661,6 +5650,7 @@
   --sys-color-field-icon-default: #888888;
   --sys-color-control-bg-inverseHover: #0075FF;
   --sys-color-navigation-gnb-bg-dark: #001B39;
+  --sys-color-navigation-gnb-bg-system: #004177;
   --cmp-button-xs-height: 24px;
   --cmp-button-xs-paddingX: 8px;
   --cmp-button-xs-gap: 4px;
@@ -4833,7 +5823,10 @@
   --cmp-radioButton-xs-paddingX: 8px;
   --cmp-radioButton-sm-height: 28px;
   --cmp-radioButton-sm-paddingX: 12px;
-  --cmp-radioButton-radius: 4px;
+  --cmp-radioButton-md-height: 36px;
+  --cmp-radioButton-md-paddingX: 20px;
+  --cmp-radioButton-radius-sm: 4px;
+  --cmp-radioButton-radius-md: 6px;
   --cmp-radioButton-border-width: 1px;
   --cmp-radioButton-border-default: #CCCCCC;
   --cmp-radioButton-border-select: #0075FF;
@@ -4847,6 +5840,22 @@
   --cmp-radioButton-content-select: #0075FF;
   --cmp-radioButton-content-disabled: #888888;
   --cmp-radioButton-group-gap: -1px;
+  --cmp-radioCard-radius: 8px;
+  --cmp-radioCard-paddingX: 16px;
+  --cmp-radioCard-paddingY: 8px;
+  --cmp-radioCard-border-width: 1px;
+  --cmp-radioCard-border-default: #E1E1E1;
+  --cmp-radioCard-border-selected: #93C4FF;
+  --cmp-radioCard-border-hover: #AAAAAA;
+  --cmp-radioCard-bg-default: #FFFFFF;
+  --cmp-radioCard-bg-selected: #EFF6FF;
+  --cmp-radioCard-bg-hover: #F9F9F9;
+  --cmp-radioCard-bg-disabled: #EEEEEE;
+  --cmp-radioCard-gap: 8px;
+  --cmp-radioCard-label-color: #222222;
+  --cmp-radioCard-subtitle-paddingLeft: 24px;
+  --cmp-radioCard-subtitle-color: #555555;
+  --cmp-radioCard-group-gap: 8px;
   --cmp-listBoxItem-paddingY: 4px;
   --cmp-listBoxItem-paddingRight: 12px;
   --cmp-listBoxItem-gap: 8px;
@@ -4908,6 +5917,11 @@
   --cmp-field-errorMessage-color: #E30000;
   --cmp-field-contents-gap: 4px;
   --cmp-field-message-paddingX: 8px;
+  --cmp-field-width-xs: 80px;
+  --cmp-field-width-sm: 120px;
+  --cmp-field-width-md: 160px;
+  --cmp-field-width-lg: 240px;
+  --cmp-field-width-xl: 480px;
   --cmp-textinput-sm-height: 28px;
   --cmp-textinput-sm-paddingX: 12px;
   --cmp-textinput-sm-paddingY: 4px;
@@ -5133,20 +6147,30 @@
   --cmp-tag-md-radius: 8px;
   --cmp-tag-red-content: #FB4444;
   --cmp-tag-red-bg: #FCEFEF;
+  --cmp-tag-red-deep-bg: #FB4444;
   --cmp-tag-orange-content: #FF6B00;
   --cmp-tag-orange-bg: #FEF1EA;
+  --cmp-tag-orange-deep-bg: #FF6B00;
   --cmp-tag-yellow-content: #916C0D;
   --cmp-tag-yellow-bg: #FFF7DD;
+  --cmp-tag-yellow-deep-bg: #FFC700;
+  --cmp-tag-yellow-deep-content: #222222;
   --cmp-tag-green-content: #00973C;
   --cmp-tag-green-bg: #E8F9EF;
+  --cmp-tag-green-deep-bg: #00973C;
   --cmp-tag-blue-content: #0075FF;
   --cmp-tag-blue-bg: #E6F1FF;
+  --cmp-tag-blue-deep-bg: #0075FF;
   --cmp-tag-darkblue-content: #006AC1;
   --cmp-tag-darkblue-bg: #EAF5FE;
+  --cmp-tag-darkblue-deep-bg: #006AC1;
   --cmp-tag-indigo-content: #004290;
   --cmp-tag-indigo-bg: #EFF6FF;
+  --cmp-tag-indigo-deep-bg: #004290;
   --cmp-tag-grey-content: #737373;
   --cmp-tag-grey-bg: #EEEEEE;
+  --cmp-tag-grey-deep-bg: #737373;
+  --cmp-tag-deep-content: #FFFFFF;
   --cmp-tag-group-gap: 8px;
   --cmp-badge-size: 6px;
   --cmp-badge-radius: 9999px;
@@ -5311,8 +6335,10 @@
   --cmp-guide-contents-typography-color: #222222;
   --cmp-guide-contents-icon: #00973C;
   --cmp-guide-contents-radius: 8px;
-  --cmp-guide-contents-depth-paddingLeft: 32px;
-  --cmp-progress-linear-height: 20px;
+  --cmp-guide-contents-depth-paddingLeft: 24px;
+  --cmp-progress-linear-height-xs: 12px;
+  --cmp-progress-linear-height-sm: 20px;
+  --cmp-progress-linear-height-md: 24px;
   --cmp-progress-linear-radius: 9999px;
   --cmp-progress-linear-gap: 12px;
   --cmp-progress-circular-size: 80px;
@@ -5400,10 +6426,8 @@
   --cmp-stepper-vertical-title-paddingTop: 12px;
   --cmp-stepper-vertical-title-paddingBottom: 6px;
   --cmp-stepper-vertical-title-text: #004290;
-  --cmp-tab-main-lg-height: 44px;
-  --cmp-tab-main-lg-paddingX: 32px;
-  --cmp-tab-main-md-height: 36px;
-  --cmp-tab-main-md-paddingX: 24px;
+  --cmp-tab-main-height: 36px;
+  --cmp-tab-main-paddingX: 24px;
   --cmp-tab-main-gap: 8px;
   --cmp-tab-main-container-gap: 4px;
   --cmp-tab-main-radius: 6px;
@@ -5472,6 +6496,86 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-gnb-system-panel-light-bg: #FFFFFF;
+  --cmp-gnb-system-panel-light-border: #E1E1E1;
+  --cmp-gnb-system-panel-dark-bg: #004177;
+  --cmp-gnb-system-panel-dark-border: #006AC1;
+  --cmp-gnb-system-panel-gap: 8px;
+  --cmp-gnb-system-panel-divider-color-light: #E1E1E1;
+  --cmp-gnb-system-panel-divider-color-dark: #006AC1;
+  --cmp-gnb-system-panel-divider-color-darker: #004290;
+  --cmp-gnb-system-domainTag-paddingX: 12px;
+  --cmp-gnb-system-domainTag-paddingY: 2px;
+  --cmp-gnb-system-domainTag-radius: 6px;
+  --cmp-gnb-system-domainTag-light-bg: #F6F6F6;
+  --cmp-gnb-system-domainTag-light-text: #555555;
+  --cmp-gnb-system-domainTag-dark-bg: #07284A;
+  --cmp-gnb-system-domainTag-dark-text: #FFFFFF;
+  --cmp-gnb-system-domainTag-darker-bg: #004177;
+  --cmp-gnb-system-domainTag-darker-text: #FFFFFF;
+  --cmp-gnb-system-item-height: 32px;
+  --cmp-gnb-system-item-radius: 8px;
+  --cmp-gnb-system-item-icon-frame: 24px;
+  --cmp-gnb-system-item-icon-glyph: 20px;
+  --cmp-gnb-system-item-icon-radius: 4px;
+  --cmp-gnb-system-item-iconLabelGap: 8px;
+  --cmp-gnb-system-item-light-bg-default: #FFFFFF;
+  --cmp-gnb-system-item-light-bg-hover: #F6F6F6;
+  --cmp-gnb-system-item-light-icon-bg: #FFFFFF;
+  --cmp-gnb-system-item-light-icon-default: #888888;
+  --cmp-gnb-system-item-light-text: #222222;
+  --cmp-gnb-system-item-dark-bg-default: #004177;
+  --cmp-gnb-system-item-dark-bg-hover: #025497;
+  --cmp-gnb-system-item-dark-icon-bg-default: #004177;
+  --cmp-gnb-system-item-dark-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-dark-text: #FFFFFF;
+  --cmp-gnb-system-item-darker-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-bg-hover: #002B5E;
+  --cmp-gnb-system-item-darker-icon-bg-default: #001B39;
+  --cmp-gnb-system-item-darker-icon-bg-hover: #FFFFFF;
+  --cmp-gnb-system-item-darker-text: #FFFFFF;
+  --cmp-gnb-system-actionButton-paddingLeft: 4px;
+  --cmp-gnb-system-actionButton-paddingRight: 6px;
+  --cmp-gnb-system-actionButton-selectData-gap: 4px;
+  --cmp-gnb-system-actionButton-selectData-icon: 16px;
+  --cmp-gnb-system-actionButton-selectData-text-light: #005CC9;
+  --cmp-gnb-system-actionButton-selectData-text-dark: #BBDAFF;
+  --cmp-gnb-system-actionButton-switch-icon: 16px;
+  --cmp-gnb-system-actionButton-switch-text-light: #555555;
+  --cmp-gnb-system-actionButton-switch-text-dark: #FFFFFF;
+  --cmp-gnb-system-actionButton-select-icon: 16px;
+  --cmp-gnb-system-accountButton-paddingY: 4px;
+  --cmp-gnb-system-accountButton-paddingX: 12px;
+  --cmp-gnb-system-accountButton-gap: 8px;
+  --cmp-gnb-system-accountButton-icon: 16px;
+  --cmp-gnb-system-accountButton-bg-default: #FFFFFF;
+  --cmp-gnb-system-accountButton-bg-hover: #F6F6F6;
+  --cmp-gnb-system-accountButton-bg-negativeHover: #FCEFEF;
+  --cmp-gnb-system-accountButton-content-default: #222222;
+  --cmp-gnb-system-accountButton-content-negative: #E30000;
+  --cmp-gnb-system-accountButton-selectData-gap: 4px;
+  --cmp-gnb-system-accountButton-selectData-icon: 16px;
+  --cmp-gnb-system-accountButton-selectData-text: #005CC9;
+  --cmp-gnb-system-accountListBox-width: 240px;
+  --cmp-gnb-system-accountListBox-bg: #FFFFFF;
+  --cmp-gnb-system-accountListBox-radius: 4px;
+  --cmp-gnb-system-accountListBox-userdata-bg: #F9F9F9;
+  --cmp-gnb-system-accountListBox-userdata-paddingX: 12px;
+  --cmp-gnb-system-accountListBox-userdata-paddingY: 8px;
+  --cmp-gnb-system-accountListBox-userdata-email-color: #888888;
+  --cmp-gnb-system-accountListBox-userdata-name-color: #555555;
+  --cmp-gnb-system-accountListBox-userdata-role-color: #888888;
+  --cmp-gnb-system-accountListBox-list-paddingY: 4px;
+  --cmp-gnb-system-alertButton-paddingX: 4px;
+  --cmp-gnb-system-alertButton-count-color-light: #0075FF;
+  --cmp-gnb-system-alertButton-count-color-dark: #FFD643;
+  --cmp-gnb-system-alertButton-bg-notificationHover-light: #EFF6FF;
+  --cmp-gnb-system-alertButton-icon-color-notification-light: #64ABFF;
+  --cmp-gnb-system-alertButton-icon-color-notification-dark: #FEE17C;
+  --cmp-gnb-system-setting-paddingX: 4px;
+  --cmp-gnb-system-min-padding: 8px;
+  --cmp-gnb-system-project-gap: 8px;
+  --cmp-gnb-system-project-padding: 8px;
   --cmp-list-group-gap: 8px;
   --cmp-list-group-padding: 16px;
   --cmp-listItem-paddingX: 16px;
@@ -5524,7 +6628,6 @@
   --cmp-listDraggableItem-bordered-border-hover: #AAAAAA;
   --cmp-listDraggableItem-bordered-dragging-bg: #EFF6FF;
   --cmp-listDraggableItem-bordered-dragging-border-color: #2D8DFF;
-  --cmp-listDraggableItem-bordered-dragging-border-width: 2px;
   --cmp-listDraggableItem-border-default: #E1E1E1;
   --cmp-listDraggableItem-border-width-default: 1px;
   --cmp-listDraggableItem-text-default: #222222;
@@ -5559,9 +6662,8 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-text-selected: #0075FF;
   --cmp-tree-item-arrow-icon: 16px;
-  --cmp-tree-connector-line-color: #AAAAAA;
+  --cmp-tree-connector-line-color: #E1E1E1;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;
@@ -5708,6 +6810,12 @@
     font-weight: 500;
     line-height: 20px;
   }
+  .typo-body-sm-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+  }
   .typo-body-sm-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 12px;
@@ -5726,6 +6834,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-body-md-semibold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+  }
   .typo-body-md-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 14px;