sellmate-design-system-react 0.2.0 → 0.4.0

package/dist/styles.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-yellow-50: #EBB110;
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -31,6 +32,9 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
+    --tracking-wider: 0.05em;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -43,39 +47,376 @@
     --color-grey-20: #EEEEEE;
     --color-grey-25: #E5E5E5;
     --color-grey-30: #E1E1E1;
+    --color-grey-35: #D8D8D8;
     --color-grey-45: #CCCCCC;
+    --color-grey-50: #BBBBBB;
     --color-grey-55: #AAAAAA;
+    --color-grey-60: #999999;
     --color-grey-65: #888888;
     --color-grey-70: #737373;
     --color-grey-80: #555555;
+    --color-grey-85: #444444;
     --color-grey-90: #333333;
+    --color-grey-95: #222222;
     --color-grey-05: #F9F9F9;
+    --color-red-15: #FCEFEF;
+    --color-red-20: #FCE6E6;
+    --color-red-30: #FFD3D3;
+    --color-red-45: #FFB5B5;
+    --color-red-60: #FF7C7C;
+    --color-red-70: #FB4444;
     --color-red-75: #E30000;
+    --color-red-80: #AD0000;
+    --color-red-85: #820000;
+    --color-red-90: #5E0000;
+    --color-red-95: #440000;
+    --color-red-99: #220000;
+    --color-orange-10: #FEF1EA;
+    --color-orange-20: #FFEAD7;
+    --color-orange-35: #FFD5AF;
+    --color-orange-45: #FFBC81;
+    --color-orange-55: #FFA452;
+    --color-orange-60: #FF7F22;
+    --color-orange-65: #FF6B00;
+    --color-orange-75: #CE4900;
+    --color-orange-85: #9B3700;
+    --color-orange-90: #752A00;
+    --color-orange-95: #4D1B00;
+    --color-orange-99: #2F1100;
+    --color-yellow-10: #FFF7DD;
+    --color-yellow-20: #FEF1C4;
+    --color-yellow-25: #FFE99E;
+    --color-yellow-30: #FEE17C;
+    --color-yellow-40: #FFD643;
+    --color-yellow-45: #FFC700;
+    --color-yellow-60: #CA9612;
+    --color-yellow-70: #916C0D;
+    --color-yellow-80: #6C5002;
+    --color-yellow-90: #453602;
+    --color-yellow-95: #322700;
+    --color-olive-10: #FBFBBF;
+    --color-olive-15: #FAFAA1;
+    --color-olive-20: #F6F65F;
+    --color-olive-30: #EEEE37;
+    --color-olive-45: #DDDD12;
+    --color-olive-55: #C7C700;
+    --color-olive-65: #A5A500;
+    --color-olive-70: #838300;
+    --color-olive-80: #636300;
+    --color-olive-90: #454500;
+    --color-olive-95: #2C2C00;
+    --color-olive-05: #FEFED9;
+    --color-green-15: #E8F9EF;
+    --color-green-25: #D4FAE3;
+    --color-green-45: #ACF4C9;
+    --color-green-55: #6DE39C;
+    --color-green-65: #2BCE6C;
+    --color-green-70: #12B553;
+    --color-green-75: #00973C;
+    --color-green-80: #007B31;
+    --color-green-85: #006629;
+    --color-green-90: #00461C;
+    --color-green-95: #003013;
+    --color-green-99: #001D0B;
+    --color-steelblue-10: #ECF8FD;
+    --color-steelblue-25: #D9F2FD;
+    --color-steelblue-45: #A4E2FD;
+    --color-steelblue-60: #50BFF0;
+    --color-steelblue-65: #229FD7;
+    --color-steelblue-70: #128FC7;
+    --color-steelblue-75: #066D9B;
+    --color-steelblue-80: #06587D;
+    --color-steelblue-85: #033F59;
+    --color-steelblue-90: #032D40;
+    --color-steelblue-95: #02212F;
+    --color-steelblue-99: #021A25;
+    --color-oceanblue-15: #EAF5FE;
+    --color-oceanblue-25: #D5EBFE;
+    --color-oceanblue-50: #9CD1FC;
+    --color-oceanblue-60: #5CB0F3;
+    --color-oceanblue-65: #1F8AE1;
+    --color-oceanblue-70: #006AC1;
+    --color-oceanblue-75: #025497;
+    --color-oceanblue-80: #004177;
+    --color-oceanblue-85: #07284A;
+    --color-oceanblue-90: #051D36;
+    --color-oceanblue-95: #03172D;
+    --color-oceanblue-99: #011428;
+    --color-brilliantblue-10: #EFF6FF;
+    --color-brilliantblue-20: #E6F1FF;
+    --color-brilliantblue-25: #D9EAFF;
+    --color-brilliantblue-40: #BBDAFF;
+    --color-brilliantblue-50: #93C4FF;
+    --color-brilliantblue-60: #64ABFF;
+    --color-brilliantblue-70: #2D8DFF;
+    --color-brilliantblue-75: #0075FF;
+    --color-brilliantblue-80: #005CC9;
+    --color-brilliantblue-85: #004290;
+    --color-brilliantblue-90: #002B5E;
+    --color-brilliantblue-95: #001B39;
+    --color-brilliantblue-99: #001226;
+    --color-brilliantblue-05: #F5FAFF;
+    --color-bg-screen: #EEEEEE;
+    --color-bg-frame: #FFFFFF;
+    --color-bg-brand: #025497;
+    --color-bg-subtle: #1F8AE1;
+    --color-bg-accent: #0075FF;
+    --color-bg-accentLight: #2D8DFF;
+    --color-bg-accentBright: #D9EAFF;
+    --color-bg-deep: #07284A;
+    --color-bg-danger: #E30000;
+    --color-bg-dangerLight: #FB4444;
+    --color-bg-warning: #FF6B00;
+    --color-bg-caution: #FFC700;
+    --color-bg-progress: #0075FF;
+    --color-bg-success: #00973C;
+    --color-bg-successLight: #12B553;
+    --color-bg-neutralLight: #F6F6F6;
+    --color-bg-neutralBright: #F9F9F9;
+    --color-bg-tableHeader: #F5FAFF;
+    --color-fg-primary: #222222;
+    --color-fg-secondary: #555555;
+    --color-fg-tertiary: #888888;
+    --color-fg-quaternary: #AAAAAA;
+    --color-fg-brand: #005CC9;
+    --color-fg-subtleWarm: #066D9B;
+    --color-fg-subtleCool: #025497;
+    --color-fg-deep: #004290;
+    --color-fg-success: #00973C;
+    --color-fg-dangerLight: #FB4444;
+    --color-fg-accent: #0075FF;
+    --color-fg-danger: #E30000;
+    --color-fg-warning: #FF6B00;
+    --color-fg-inverse: #FFFFFF;
+    --color-disabled-bg: #E1E1E1;
+    --color-disabled-text: #888888;
+    --color-disabled-icon: #BBBBBB;
+    --color-disabled-border: #CCCCCC;
+    --color-link-accent: #006AC1;
+    --color-divider-default: #E1E1E1;
+    --color-border-default: #E1E1E1;
+    --color-border-accent: #0075FF;
     --color-border-accentLight: #93C4FF;
+    --color-border-danger: #FB4444;
+    --color-border-success: #12B553;
     --color-red-strong: #FB4444;
+    --color-red-subtle: #FCEFEF;
+    --color-orange-strong: #FF6B00;
+    --color-orange-subtle: #FEF1EA;
+    --color-yellow-strong: #916C0D;
+    --color-yellow-moderate: #FFC700;
+    --color-yellow-subtle: #FFF7DD;
     --color-green-strong: #00973C;
+    --color-green-subtle: #E8F9EF;
     --color-blue-strong: #0075FF;
+    --color-blue-subtle: #E6F1FF;
+    --color-darkblue-strong: #006AC1;
+    --color-darkblue-subtle: #EAF5FE;
+    --color-indigo-strong: #004290;
+    --color-indigo-subtle: #EFF6FF;
+    --color-grey-strong: #737373;
+    --color-grey-subtle: #EEEEEE;
+    --color-field-bg-default: #FFFFFF;
+    --color-field-bg-hover: #0075FF;
+    --color-field-bg-readOnly: #EEEEEE;
+    --color-field-border-default: #AAAAAA;
+    --color-field-border-focus: #0075FF;
+    --color-field-border-hover: #0075FF;
+    --color-field-border-danger: #FB4444;
+    --color-field-border-success: #12B553;
+    --color-field-text-default: #222222;
+    --color-field-text-placeholder: #AAAAAA;
+    --color-field-text-readOnly: #555555;
+    --color-field-icon-default: #888888;
+    --color-control-bg-inverseHover: #0075FF;
+    --color-navigation-gnb-bg-dark: #001B39;
+    --color-primary-10: #EFF6FF;
+    --color-primary-20: #E6F1FF;
+    --color-primary-25: #D9EAFF;
+    --color-primary-40: #BBDAFF;
+    --color-primary-50: #93C4FF;
+    --color-primary-60: #64ABFF;
+    --color-primary-70: #2D8DFF;
+    --color-primary-75: #0075FF;
+    --color-primary-80: #005CC9;
+    --color-primary-85: #004290;
+    --color-primary-90: #002B5E;
+    --color-primary-95: #001B39;
+    --color-primary-99: #001226;
+    --color-primary-05: #F5FAFF;
+    --color-danger-15: #FCEFEF;
+    --color-danger-20: #FCE6E6;
+    --color-danger-30: #FFD3D3;
+    --color-danger-45: #FFB5B5;
+    --color-danger-60: #FF7C7C;
+    --color-danger-70: #FB4444;
     --color-danger-75: #E30000;
+    --color-danger-80: #AD0000;
+    --color-danger-85: #820000;
+    --color-danger-90: #5E0000;
+    --color-danger-95: #440000;
+    --color-danger-99: #220000;
+    --color-danger-strong: #FB4444;
+    --color-danger-subtle: #FCEFEF;
+    --color-success-15: #E8F9EF;
+    --color-success-25: #D4FAE3;
+    --color-success-45: #ACF4C9;
+    --color-success-55: #6DE39C;
+    --color-success-65: #2BCE6C;
+    --color-success-70: #12B553;
+    --color-success-75: #00973C;
+    --color-success-80: #007B31;
+    --color-success-85: #006629;
+    --color-success-90: #00461C;
+    --color-success-95: #003013;
+    --color-success-99: #001D0B;
+    --color-success-strong: #00973C;
+    --color-success-subtle: #E8F9EF;
+    --color-warning-10: #FEF1EA;
+    --color-warning-20: #FFEAD7;
+    --color-warning-35: #FFD5AF;
+    --color-warning-45: #FFBC81;
+    --color-warning-55: #FFA452;
+    --color-warning-60: #FF7F22;
+    --color-warning-65: #FF6B00;
+    --color-warning-75: #CE4900;
+    --color-warning-85: #9B3700;
+    --color-warning-90: #752A00;
+    --color-warning-95: #4D1B00;
+    --color-warning-99: #2F1100;
+    --color-warning-strong: #FF6B00;
+    --color-warning-subtle: #FEF1EA;
     --spacing-2: 2px;
     --spacing-4: 4px;
     --spacing-6: 6px;
     --spacing-8: 8px;
+    --spacing-10: 10px;
     --spacing-12: 12px;
     --spacing-16: 16px;
+    --spacing-19: 19px;
     --spacing-20: 20px;
+    --spacing-22: 22px;
     --spacing-24: 24px;
+    --spacing-28: 28px;
     --spacing-32: 32px;
+    --spacing-36: 36px;
+    --spacing-40: 40px;
     --spacing-48: 48px;
+    --spacing-60: 60px;
+    --spacing-control-xs-paddingX: 8px;
+    --spacing-control-xs-gap: 4px;
+    --spacing-control-sm-paddingX: 12px;
+    --spacing-control-sm-gap: 6px;
+    --spacing-control-md-paddingX: 20px;
+    --spacing-control-md-gap: 8px;
+    --spacing-control-lg-paddingX: 28px;
+    --spacing-control-lg-gap: 12px;
+    --spacing-feedback-xs-paddingX: 6px;
+    --spacing-feedback-xs-gap: 4px;
+    --spacing-feedback-sm-paddingX: 8px;
+    --spacing-feedback-sm-gap: 6px;
+    --spacing-feedback-md-paddingX: 12px;
+    --spacing-feedback-md-gap: 8px;
+    --spacing-feedback-lg-paddingX: 16px;
+    --spacing-feedback-lg-gap: 12px;
+    --spacing-stack-gap-text-tight: 2px;
+    --spacing-stack-gap-text-normal: 4px;
+    --spacing-stack-gap-text-relaxed: 8px;
+    --spacing-stack-gap-element-tight: 4px;
+    --spacing-stack-gap-element-normal: 8px;
+    --spacing-stack-gap-element-relaxed: 12px;
+    --spacing-stack-gap-element-wide: 16px;
+    --spacing-stack-gap-element-spacious: 24px;
+    --spacing-field-sm-paddingX: 12px;
+    --spacing-field-sm-paddingY: 4px;
+    --spacing-field-sm-container-gap: 8px;
+    --spacing-field-sm-gap: 12px;
+    --spacing-field-md-paddingX: 16px;
+    --spacing-field-md-paddingY: 8px;
+    --spacing-field-md-container-gap: 12px;
+    --spacing-field-md-gap: 16px;
+    --spacing-navigation-lg-paddingX: 32px;
+    --spacing-navigation-md-paddingX: 24px;
+    --spacing-table-padding-sm: 8px;
+    --spacing-table-padding-md: 16px;
+    --spacing-action-gap: 16px;
+    --spacing-overlay-paddingX-sm: 20px;
+    --spacing-overlay-paddingX-md: 24px;
+    --spacing-overlay-paddingY-sm: 8px;
+    --spacing-panel-gap: 12px;
+    --spacing-44: 44px;
+    --spacing-56: 56px;
+    --spacing-62: 62px;
     --spacing-80: 80px;
+    --spacing-control-xs-height: 24px;
+    --spacing-control-sm-height: 28px;
+    --spacing-control-md-height: 36px;
+    --spacing-control-lg-height: 62px;
+    --spacing-icon-xxxs: 8px;
+    --spacing-icon-xxs: 10px;
+    --spacing-icon-xs: 12px;
+    --spacing-icon-sm: 16px;
+    --spacing-icon-md: 20px;
+    --spacing-icon-lg: 24px;
+    --spacing-icon-xl: 32px;
+    --spacing-feedback-arrow-width: 16px;
+    --spacing-feedback-arrow-height: 12px;
+    --spacing-feedback-xs-height: 20px;
+    --spacing-feedback-sm-height: 24px;
+    --spacing-feedback-md-height: 28px;
+    --spacing-field-control: 16px;
+    --spacing-field-icon: 12px;
+    --spacing-field-sm-height: 28px;
+    --spacing-field-md-height: 36px;
+    --spacing-navigation-lg-height: 44px;
+    --spacing-navigation-md-height: 36px;
+    --spacing-table-height-xs: 32px;
+    --spacing-table-height-sm: 36px;
+    --spacing-table-height-md: 44px;
+    --radius-2: 2px;
+    --radius-4: 4px;
+    --radius-6: 6px;
+    --radius-8: 8px;
     --radius-full: 9999px;
+    --radius-control-sm: 4px;
+    --radius-control-md: 6px;
+    --radius-feedback-xs-square: 6px;
+    --radius-feedback-sm-square: 8px;
+    --radius-feedback-pill: 9999px;
+    --radius-field-sm: 4px;
+    --radius-field-md: 6px;
+    --radius-navigation: 6px;
+    --text-10: 10px;
+    --text-11: 11px;
     --text-12: 12px;
     --text-13: 13px;
     --text-14: 14px;
     --text-16: 16px;
+    --text-18: 18px;
     --text-20: 20px;
     --text-24: 24px;
+    --text-28: 28px;
+    --text-32: 32px;
+    --font-weight-regular: 400;
     --font-base: 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;
+    --border-width-1: 1px;
+    --border-width-4: 4px;
+    --border-width-6: 6px;
+    --border-width-control-default: 1px;
+    --border-width-field-default: 1px;
+    --border-width-navigation-default: 1px;
+    --opacity-005: 5%;
+    --opacity-040: 40%;
+    --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-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);
     --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;
@@ -275,6 +616,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -338,6 +682,9 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -425,12 +772,18 @@
   .mt-16 {
     margin-top: var(--spacing-16);
   }
+  .mt-32 {
+    margin-top: var(--spacing-32);
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
+  .-mr-px {
+    margin-right: -1px;
+  }
   .mb-8 {
     margin-bottom: var(--spacing-8);
   }
@@ -536,6 +889,9 @@
   .h-\[var\(--cmp-table-header-height\)\] {
     height: var(--cmp-table-header-height);
   }
+  .h-\[var\(--cmp-textinput-sm-height\)\] {
+    height: var(--cmp-textinput-sm-height);
+  }
   .h-auto {
     height: auto;
   }
@@ -599,6 +955,9 @@
   .w-\[32px\] {
     width: 32px;
   }
+  .w-\[61px\] {
+    width: 61px;
+  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -1056,6 +1415,10 @@
     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);
+  }
   .rounded-r-\[4px\] {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -1064,6 +1427,10 @@
     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);
+  }
   .rounded-b-\[8px\] {
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
@@ -1173,6 +1540,12 @@
   .border-\[color\:var\(--rd-border\)\] {
     border-color: var(--rd-border);
   }
+  .border-\[var\(--cmp-timepicker-border-default\)\] {
+    border-color: var(--cmp-timepicker-border-default);
+  }
+  .border-\[var\(--cmp-timepicker-border-focus\)\] {
+    border-color: var(--cmp-timepicker-border-focus);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1266,6 +1639,9 @@
   .bg-\[var\(--sys-color-bg-frame\)\] {
     background-color: var(--sys-color-bg-frame);
   }
+  .bg-\[var\(--sys-color-divider-default\)\] {
+    background-color: var(--sys-color-divider-default);
+  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1302,9 +1678,6 @@
   .p-0 {
     padding: 0;
   }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
   .p-8 {
     padding: var(--spacing-8);
   }
@@ -1341,9 +1714,6 @@
   .px-\(--cmp-field-addonLabel-paddingX\) {
     padding-inline: var(--cmp-field-addonLabel-paddingX);
   }
-  .px-2 {
-    padding-inline: var(--spacing-2);
-  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1609,6 +1979,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .text-nowrap {
     text-wrap: nowrap;
   }
@@ -1747,6 +2121,15 @@
   .text-\[color\:var\(--sys-color-fg-secondary\)\] {
     color: var(--sys-color-fg-secondary);
   }
+  .text-\[var\(--cmp-field-hint-color\)\] {
+    color: var(--cmp-field-hint-color);
+  }
+  .text-\[var\(--cmp-timepicker-border-focus\)\] {
+    color: var(--cmp-timepicker-border-focus);
+  }
+  .text-\[var\(--cmp-timepicker-selector-range-heading-color\)\] {
+    color: var(--cmp-timepicker-selector-range-heading-color);
+  }
   .text-blue-strong {
     color: var(--color-blue-strong);
   }
@@ -2488,7 +2871,6 @@
   --sys-size-field-md-height: 36px;
   --sys-size-navigation-lg-height: 44px;
   --sys-size-navigation-md-height: 36px;
-  --sys-size-navigation-gnb-topbar-height: 56px;
   --sys-size-table-height-xs: 32px;
   --sys-size-table-height-sm: 36px;
   --sys-size-table-height-md: 44px;
@@ -3279,6 +3661,25 @@
   --cmp-pagination-item-content-hover: #004290;
   --cmp-pagination-item-content-selected: #004290;
   --cmp-pagination-simple-gap: 8px;
+  --cmp-stepper-sm-sequence-size: 20px;
+  --cmp-stepper-dash-width: 20px;
+  --cmp-stepper-dash-color: #888888;
+  --cmp-stepper-lg-sequence-size: 24px;
+  --cmp-stepper-container-gap: 12px;
+  --cmp-stepper-item-gap: 8px;
+  --cmp-stepper-sequence-radius: 9999px;
+  --cmp-stepper-sequence-border-active: #93C4FF;
+  --cmp-stepper-sequence-border-default: #E1E1E1;
+  --cmp-stepper-sequence-border-completed: #CCCCCC;
+  --cmp-stepper-sequence-border-witdh: 1px;
+  --cmp-stepper-sequence-icon: 12px;
+  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-default: #FFFFFF;
+  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-text-active: #0075FF;
+  --cmp-stepper-sequence-text-default: #AAAAAA;
+  --cmp-stepper-text-active: #0075FF;
+  --cmp-stepper-text-default: #888888;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -3301,73 +3702,56 @@
   --cmp-tab-sub-gap-vertical: 16px;
   --cmp-tab-sub-content-gap: 4px;
   --cmp-tab-sub-item-height: 20px;
-  --cmp-gnbBelt-top-height: 56px;
-  --cmp-gnbBelt-top-paddingX: 12px;
-  --cmp-gnbBelt-top-gap: 8px;
-  --cmp-gnbBelt-logo-height: 32px;
-  --cmp-gnbBelt-body-paddingY: 12px;
-  --cmp-gnbBelt-item-paddingY: 6px;
-  --cmp-gnbBelt-item-paddingRight: 20px;
-  --cmp-gnbBelt-item-gap: 12px;
-  --cmp-gnbBelt-item-icon: 12px;
-  --cmp-gnbBelt-item-depth1-paddingLeft: 20px;
-  --cmp-gnbBelt-item-depth2-paddingLeft: 32px;
-  --cmp-gnbBelt-item-depth3-paddingLeft: 44px;
-  --cmp-gnbBelt-fold-width: 48px;
-  --cmp-gnbBox-top-height: 56px;
-  --cmp-gnbBox-paddingX: 16px;
-  --cmp-gnbBox-gap: 16px;
-  --cmp-gnbBox-button-gap: 8px;
-  --cmp-gnbBox-logo-height: 32px;
-  --cmp-gnbBox-menu-body-padding: 12px;
-  --cmp-gnbBox-item-paddingY: 6px;
-  --cmp-gnbBox-item-paddingRight: 12px;
-  --cmp-gnbBox-item-gap: 8px;
-  --cmp-gnbBox-item-radius: 8px;
-  --cmp-gnbBox-item-arrow: 12px;
-  --cmp-gnbBox-item-depth1-paddingLeft: 12px;
-  --cmp-gnbBox-item-depth1-icon: 20px;
-  --cmp-gnbBox-item-depth2-paddingLeft: 24px;
-  --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --cmp-stepper-sm-sequence-size: 20px;
-  --cmp-stepper-dash-width: 20px;
-  --cmp-stepper-dash-color: #888888;
-  --cmp-stepper-lg-sequence-size: 24px;
-  --cmp-stepper-container-gap: 12px;
-  --cmp-stepper-item-gap: 8px;
-  --cmp-stepper-sequence-radius: 9999px;
-  --cmp-stepper-sequence-border-active: #93C4FF;
-  --cmp-stepper-sequence-border-default: #E1E1E1;
-  --cmp-stepper-sequence-border-completed: #CCCCCC;
-  --cmp-stepper-sequence-border-witdh: 1px;
-  --cmp-stepper-sequence-icon: 12px;
-  --cmp-stepper-sequence-bg-active: #D9EAFF;
-  --cmp-stepper-sequence-bg-default: #FFFFFF;
-  --cmp-stepper-sequence-bg-completed: #E1E1E1;
-  --cmp-stepper-sequence-text-active: #0075FF;
-  --cmp-stepper-sequence-text-default: #AAAAAA;
-  --cmp-stepper-text-active: #0075FF;
-  --cmp-stepper-text-default: #888888;
-  --cmp-light-bg: #FFFFFF;
-  --cmp-light-divider: #E1E1E1;
-  --cmp-light-item-bg-default: #FFFFFF;
-  --cmp-light-item-bg-hover: #F6F6F6;
-  --cmp-light-item-bg-selected: #EFF6FF;
-  --cmp-light-item-fg-default: #222222;
-  --cmp-light-item-fg-hover: #222222;
-  --cmp-light-item-fg-selected: #0075FF;
-  --cmp-light-item-chevron: #555555;
-  --cmp-light-top-icon: #888888;
-  --cmp-dark-bg: #001B39;
-  --cmp-dark-divider: #004177;
-  --cmp-dark-item-bg-default: #001B39;
-  --cmp-dark-item-bg-hover: #07284A;
-  --cmp-dark-item-bg-selected: #002B5E;
-  --cmp-dark-item-fg-default: #FFFFFF;
-  --cmp-dark-item-fg-hover: #FFFFFF;
-  --cmp-dark-item-fg-selected: #93C4FF;
-  --cmp-dark-item-chevron: #AAAAAA;
-  --cmp-dark-top-icon: #FFFFFF;
+  --cmp-gnb-light-bg: #FFFFFF;
+  --cmp-gnb-light-divider: #E1E1E1;
+  --cmp-gnb-light-item-bg-default: #FFFFFF;
+  --cmp-gnb-light-item-bg-hover: #F6F6F6;
+  --cmp-gnb-light-item-bg-selected: #EFF6FF;
+  --cmp-gnb-light-item-fg-default: #222222;
+  --cmp-gnb-light-item-fg-hover: #222222;
+  --cmp-gnb-light-item-fg-selected: #0075FF;
+  --cmp-gnb-light-item-chevron: #555555;
+  --cmp-gnb-light-top-icon: #888888;
+  --cmp-gnb-light-rail-fg-default: #888888;
+  --cmp-gnb-dark-bg: #001B39;
+  --cmp-gnb-dark-divider: #004177;
+  --cmp-gnb-dark-item-bg-default: #001B39;
+  --cmp-gnb-dark-item-bg-hover: #07284A;
+  --cmp-gnb-dark-item-bg-selected: #002B5E;
+  --cmp-gnb-dark-item-fg-default: #FFFFFF;
+  --cmp-gnb-dark-item-fg-hover: #FFFFFF;
+  --cmp-gnb-dark-item-fg-selected: #93C4FF;
+  --cmp-gnb-dark-item-chevron: #AAAAAA;
+  --cmp-gnb-dark-top-icon: #FFFFFF;
+  --cmp-gnb-dark-rail-fg-default: #AAAAAA;
+  --cmp-gnb-top-height: 56px;
+  --cmp-gnb-top-paddingX: 16px;
+  --cmp-gnb-top-gap: 16px;
+  --cmp-gnb-logo-height: 32px;
+  --cmp-gnb-fold-width: 48px;
+  --cmp-gnb-body-padding: 12px;
+  --cmp-gnb-item-paddingY: 6px;
+  --cmp-gnb-item-chevron-size: 12px;
+  --cmp-gnb-box-item-paddingRight: 12px;
+  --cmp-gnb-box-item-gap: 8px;
+  --cmp-gnb-box-item-radius: 8px;
+  --cmp-gnb-box-item-depth1-paddingLeft: 12px;
+  --cmp-gnb-box-item-depth1-icon: 20px;
+  --cmp-gnb-box-item-depth2-paddingLeft: 24px;
+  --cmp-gnb-box-item-depth3-paddingLeft: 36px;
+  --cmp-gnb-belt-item-paddingRight: 20px;
+  --cmp-gnb-belt-item-gap: 8px;
+  --cmp-gnb-belt-item-depth1-paddingLeft: 20px;
+  --cmp-gnb-belt-item-depth1-icon: 16px;
+  --cmp-gnb-belt-item-depth2-paddingLeft: 32px;
+  --cmp-gnb-belt-item-depth3-paddingLeft: 44px;
+  --cmp-gnb-rail-width: 68px;
+  --cmp-gnb-rail-padding: 12px;
+  --cmp-gnb-rail-gap: 16px;
+  --cmp-gnb-rail-item-paddingTop: 4px;
+  --cmp-gnb-rail-item-paddingBottom: 2px;
+  --cmp-gnb-rail-item-radius: 8px;
+  --cmp-gnb-rail-item-icon: 24px;
 }
 @layer components {
   .typo-control-xs-default {
@@ -3555,6 +3939,18 @@
     font-weight: 700;
     line-height: 26px;
   }
+  .typo-navigation-xs-medium {
+    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: 11px;
+    font-weight: 500;
+    line-height: 18px;
+  }
+  .typo-navigation-xs-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: 11px;
+    font-weight: 700;
+    line-height: 18px;
+  }
   .typo-navigation-sm-default {
     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;
@@ -3833,6 +4229,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -3986,6 +4386,7 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;