sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.83

package/dist/theme.css

@@ -6,6 +6,12 @@
  * 소비 앱: (자체 @import "tailwindcss" 뒤에) @import "sellmate-design-system-react/theme.css";
  * ※ 이 파일은 tailwindcss 를 import 하지 않는다 — 소비자가 먼저 import 하는 것을 전제로 한다.
  */
+/* 글꼴(Pretendard Variable) — 패키지에 동봉한 다이내믹 서브셋을 여기서 함께 싣는다.
+   소비 앱이 폰트를 따로 받지 않아도 되고, CDN 이 없는 사내망·오프라인에서도 동작한다.
+   서브셋이라 브라우저는 화면에 실제 쓰인 글자 범위의 조각만 내려받는다.
+   ※ 다른 규칙보다 앞에 와야 한다 — CSS 의 @import 는 모든 규칙보다 먼저여야 한다. */
+@import './pretendard.css';
+
 /* static: 유틸 클래스로 쓰이지 않아도 전 토큰을 :root 에 출력한다.
    lib/color.ts 의 resolveColor 가 var(--color-*) 를 런타임에 조립하므로
    Tailwind 스캐너가 사용을 감지할 수 없어, 기본 트리셰이킹 시 변수가 누락된다. */
@@ -77,10 +83,10 @@
   --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-25: #D8F2E2;
+  --color-green-45: #AEEAC7;
+  --color-green-55: #84DEA8;
+  --color-green-65: #4CC77D;
   --color-green-70: #12B553;
   --color-green-75: #00973C;
   --color-green-80: #007B31;
@@ -126,6 +132,18 @@
   --color-brilliantblue-95: #001B39;
   --color-brilliantblue-99: #001226;
   --color-brilliantblue-05: #F5FAFF;
+  --color-purple-15: #F4EFFF;
+  --color-purple-25: #E6DDFF;
+  --color-purple-45: #D9C9FF;
+  --color-purple-55: #C3A7FF;
+  --color-purple-65: #AE85FF;
+  --color-purple-70: #8D57EE;
+  --color-purple-75: #7034D9;
+  --color-purple-80: #5717BC;
+  --color-purple-85: #3F0994;
+  --color-purple-90: #330774;
+  --color-purple-95: #1F0A45;
+  --color-purple-99: #15072F;
   --color-bg-screen: #EEEEEE;
   --color-bg-frame: #FFFFFF;
   --color-bg-brand: #025497;
@@ -160,6 +178,7 @@
   --color-fg-accentLight: #64ABFF;
   --color-fg-danger: #E30000;
   --color-fg-warning: #FF6B00;
+  --color-fg-warningLight: #FF7F22;
   --color-fg-inverse: #FFFFFF;
   --color-border-default: #E1E1E1;
   --color-border-strong: #AAAAAA;
@@ -176,23 +195,33 @@
   --color-link-accent: #006AC1;
   --color-divider-default: #E1E1E1;
   --color-red-strong: #FB4444;
+  --color-red-moderate: #FFB5B5;
   --color-red-subtle: #FCEFEF;
   --color-orange-strong: #FF6B00;
+  --color-orange-moderate: #FFD5AF;
   --color-orange-subtle: #FEF1EA;
   --color-yellow-strong: #916C0D;
   --color-yellow-moderate: #FFC700;
   --color-yellow-subtle: #FFF7DD;
   --color-green-strong: #00973C;
+  --color-green-moderate: #AEEAC7;
   --color-green-subtle: #E8F9EF;
   --color-lightblue-strong: #64ABFF;
   --color-lightblue-subtle: #EFF6FF;
   --color-blue-strong: #0075FF;
+  --color-blue-moderate: #93C4FF;
   --color-blue-subtle: #E6F1FF;
   --color-darkblue-strong: #006AC1;
+  --color-darkblue-moderate: #9CD1FC;
   --color-darkblue-subtle: #EAF5FE;
   --color-indigo-strong: #004290;
+  --color-indigo-moderate: #93C4FF;
   --color-indigo-subtle: #EFF6FF;
+  --color-purple-strong: #7034D9;
+  --color-purple-moderate: #D9C9FF;
+  --color-purple-subtle: #F4EFFF;
   --color-grey-strong: #737373;
+  --color-grey-moderate: #CCCCCC;
   --color-grey-subtle: #EEEEEE;
   --color-field-bg-default: #FFFFFF;
   --color-field-bg-hover: #0075FF;
@@ -208,6 +237,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;
@@ -235,12 +265,13 @@
   --color-danger-95: #440000;
   --color-danger-99: #220000;
   --color-danger-strong: #FB4444;
+  --color-danger-moderate: #FFB5B5;
   --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-25: #D8F2E2;
+  --color-success-45: #AEEAC7;
+  --color-success-55: #84DEA8;
+  --color-success-65: #4CC77D;
   --color-success-70: #12B553;
   --color-success-75: #00973C;
   --color-success-80: #007B31;
@@ -249,6 +280,7 @@
   --color-success-95: #003013;
   --color-success-99: #001D0B;
   --color-success-strong: #00973C;
+  --color-success-moderate: #AEEAC7;
   --color-success-subtle: #E8F9EF;
   --color-warning-10: #FEF1EA;
   --color-warning-20: #FFEAD7;
@@ -263,6 +295,7 @@
   --color-warning-95: #4D1B00;
   --color-warning-99: #2F1100;
   --color-warning-strong: #FF6B00;
+  --color-warning-moderate: #FFD5AF;
   --color-warning-subtle: #FEF1EA;
   --spacing-sd-2: 2px;
   --spacing-sd-4: 4px;
@@ -289,6 +322,7 @@
   --radius-4: 4px;
   --radius-6: 6px;
   --radius-8: 8px;
+  --radius-12: 12px;
   --radius-full: 9999px;
   --radius-control-sm: 4px;
   --radius-control-md: 6px;
@@ -317,30 +351,50 @@
   --font-weight-extrabold: 800;
   --font-weight-black: 900;
   --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;
+  --font-sans: var(--font-base);
   --border-width-1: 1px;
+  --border-width-2: 2px;
   --border-width-4: 4px;
   --border-width-6: 6px;
   --border-width-control-default: 1px;
   --border-width-field-default: 1px;
   --border-width-navigation-default: 1px;
   --border-width-item-default: 1px;
+  --border-width-item-selected: 2px;
   --opacity-005: 5%;
+  --opacity-008: 8%;
+  --opacity-016: 16%;
+  --opacity-030: 30%;
   --opacity-040: 40%;
+  --opacity-050: 50%;
   --opacity-060: 60%;
+  --opacity-080: 80%;
   --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);
 }
 
 /* 시맨틱 토큰 (별칭 해석값) — var()로 참조 */
 :root {
+  --sys-color-purple-15: #F4EFFF;
+  --sys-color-purple-25: #E6DDFF;
+  --sys-color-purple-45: #D9C9FF;
+  --sys-color-purple-55: #C3A7FF;
+  --sys-color-purple-65: #AE85FF;
+  --sys-color-purple-70: #8D57EE;
+  --sys-color-purple-75: #7034D9;
+  --sys-color-purple-80: #5717BC;
+  --sys-color-purple-85: #3F0994;
+  --sys-color-purple-90: #330774;
+  --sys-color-purple-95: #1F0A45;
+  --sys-color-purple-99: #15072F;
   --sys-size-control-xs-height: 24px;
   --sys-size-control-sm-height: 28px;
   --sys-size-control-md-height: 36px;
@@ -391,6 +445,8 @@
   --sys-space-stack-gap-element-relaxed: 12px;
   --sys-space-stack-gap-element-wide: 16px;
   --sys-space-stack-gap-element-spacious: 24px;
+  --sys-space-stack-gap-block-normal: 12px;
+  --sys-space-stack-gap-overlap-default: -1px;
   --sys-space-field-sm-paddingX: 12px;
   --sys-space-field-sm-paddingY: 4px;
   --sys-space-field-sm-container-gap: 8px;
@@ -399,6 +455,7 @@
   --sys-space-field-md-paddingY: 8px;
   --sys-space-field-md-container-gap: 12px;
   --sys-space-field-md-gap: 16px;
+  --sys-space-field-vertical-gap: 8px;
   --sys-space-navigation-lg-paddingX: 32px;
   --sys-space-navigation-md-paddingX: 24px;
   --sys-space-table-padding-sm: 8px;
@@ -426,6 +483,7 @@
   --sys-border-width-field-default: 1px;
   --sys-border-width-navigation-default: 1px;
   --sys-border-width-item-default: 1px;
+  --sys-border-width-item-selected: 2px;
   --sys-color-bg-screen: #EEEEEE;
   --sys-color-bg-frame: #FFFFFF;
   --sys-color-bg-brand: #025497;
@@ -460,6 +518,7 @@
   --sys-color-fg-accentLight: #64ABFF;
   --sys-color-fg-danger: #E30000;
   --sys-color-fg-warning: #FF6B00;
+  --sys-color-fg-warningLight: #FF7F22;
   --sys-color-fg-inverse: #FFFFFF;
   --sys-color-border-default: #E1E1E1;
   --sys-color-border-strong: #AAAAAA;
@@ -478,11 +537,17 @@
   --sys-color-lightblue-strong: #64ABFF;
   --sys-color-lightblue-subtle: #EFF6FF;
   --sys-color-blue-strong: #0075FF;
+  --sys-color-blue-moderate: #93C4FF;
   --sys-color-blue-subtle: #E6F1FF;
   --sys-color-darkblue-strong: #006AC1;
+  --sys-color-darkblue-moderate: #9CD1FC;
   --sys-color-darkblue-subtle: #EAF5FE;
   --sys-color-indigo-strong: #004290;
+  --sys-color-indigo-moderate: #93C4FF;
   --sys-color-indigo-subtle: #EFF6FF;
+  --sys-color-purple-strong: #7034D9;
+  --sys-color-purple-moderate: #D9C9FF;
+  --sys-color-purple-subtle: #F4EFFF;
   --sys-color-field-bg-default: #FFFFFF;
   --sys-color-field-bg-hover: #0075FF;
   --sys-color-field-bg-readOnly: #EEEEEE;
@@ -497,6 +562,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;
@@ -671,7 +737,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;
@@ -685,6 +754,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;
@@ -703,6 +788,8 @@
   --cmp-listBoxItem-depth1-border-width: 1px;
   --cmp-listBoxItem-depth2-middle-bg: #F6F6F6;
   --cmp-listBoxItem-count-color: #888888;
+  --cmp-listBoxItem-search-paddingX: 12px;
+  --cmp-listBoxItem-search-paddingY: 8px;
   --cmp-listBox-radius: 4px;
   --cmp-listBox-bg: #FFFFFF;
   --cmp-listBox-chip-paddingXY: 8px;
@@ -926,6 +1013,33 @@
   --cmp-chip-content-disabled: #888888;
   --cmp-chip-border-focus: #E1E1E1;
   --cmp-chip-border-width: 1px;
+  --cmp-chip-chip-red-bg: #FCEFEF;
+  --cmp-chip-chip-red-content: #FB4444;
+  --cmp-chip-chip-red-border: #FFB5B5;
+  --cmp-chip-chip-orange-bg: #FEF1EA;
+  --cmp-chip-chip-orange-content: #FF6B00;
+  --cmp-chip-chip-orange-border: #FFD5AF;
+  --cmp-chip-chip-yellow-bg: #FFF7DD;
+  --cmp-chip-chip-yellow-content: #916C0D;
+  --cmp-chip-chip-yellow-border: #FFC700;
+  --cmp-chip-chip-green-bg: #E8F9EF;
+  --cmp-chip-chip-green-content: #00973C;
+  --cmp-chip-chip-green-border: #AEEAC7;
+  --cmp-chip-chip-blue-bg: #E6F1FF;
+  --cmp-chip-chip-blue-content: #0075FF;
+  --cmp-chip-chip-blue-border: #93C4FF;
+  --cmp-chip-chip-darkblue-bg: #EAF5FE;
+  --cmp-chip-chip-darkblue-content: #006AC1;
+  --cmp-chip-chip-darkblue-border: #9CD1FC;
+  --cmp-chip-chip-indigo-bg: #EFF6FF;
+  --cmp-chip-chip-indigo-content: #004290;
+  --cmp-chip-chip-indigo-border: #93C4FF;
+  --cmp-chip-chip-purple-bg: #F4EFFF;
+  --cmp-chip-chip-purple-content: #7034D9;
+  --cmp-chip-chip-purple-border: #D9C9FF;
+  --cmp-chip-chip-grey-bg: #EEEEEE;
+  --cmp-chip-chip-grey-content: #737373;
+  --cmp-chip-chip-grey-border: #CCCCCC;
   --cmp-timepicker-sm-height: 28px;
   --cmp-timepicker-sm-paddingX: 12px;
   --cmp-timepicker-sm-gap: 8px;
@@ -959,6 +1073,71 @@
   --cmp-timepicker-selector-range-heading-color: #555555;
   --cmp-timepicker-selector-range-heading-gap: 16px;
   --cmp-timepicker-selector-range-section-gap: 12px;
+  --cmp-calendarBoard-radius: 8px;
+  --cmp-calendarBoard-bg: #FFFFFF;
+  --cmp-calendarBoard-border: #E1E1E1;
+  --cmp-calendarBoard-header-content-color: #222222;
+  --cmp-calendarBoard-header-content-divider-height: 16px;
+  --cmp-calendarBoard-header-content-gap: 8px;
+  --cmp-calendarBoard-header-gap: 16px;
+  --cmp-calendarBoard-grid-bg: #F9F9F9;
+  --cmp-calendarBoard-grid-weekRow-color: #555555;
+  --cmp-calendarBoard-grid-gap: 8px;
+  --cmp-calendarBoard-grid-paddingTop: 6px;
+  --cmp-calendarBoard-grid-month-border: #E1E1E1;
+  --cmp-calendarBoard-daySequence-size: 24px;
+  --cmp-calendarBoard-daySequence-radius: 9999px;
+  --cmp-calendarBoard-daySequence-bg-today: #0075FF;
+  --cmp-calendarBoard-daySequence-border-selected: #0075FF;
+  --cmp-calendarBoard-daySequence-text-default: #222222;
+  --cmp-calendarBoard-daySequence-text-today: #FFFFFF;
+  --cmp-calendarBoard-daySequence-text-otherMonth: #AAAAAA;
+  --cmp-calendarBoard-dayCard-minWidth: 100px;
+  --cmp-calendarBoard-dayCard-minHeight: 100px;
+  --cmp-calendarBoard-dayCard-bg: #FFFFFF;
+  --cmp-calendarBoard-dayCard-paddingX: 8px;
+  --cmp-calendarBoard-dayCard-header-paddingTop: 8px;
+  --cmp-calendarBoard-dayCard-header-paddingBottom: 6px;
+  --cmp-calendarBoard-dayCard-grid-paddingBottom: 8px;
+  --cmp-calendarBoard-dayCard-grid-gap: 4px;
+  --cmp-calendarBoard-dayCard-focus-border-width: 2px;
+  --cmp-calendarBoard-dayCard-focus-border-color: #93C4FF;
+  --cmp-calendarBoard-dayCard-focus-border-radius: 2px;
+  --cmp-calendarBoard-item-height: 20px;
+  --cmp-calendarBoard-item-paddingX: 8px;
+  --cmp-calendarBoard-item-radius: 6px;
+  --cmp-calendarBoard-moreButton-gap: 4px;
+  --cmp-calendarBoard-moreButton-bg: #FFFFFF;
+  --cmp-calendarBoard-moreButton-count-color: #004290;
+  --cmp-calendarBoard-moreButton-label-color: #222222;
+  --cmp-calendarBoard-moreButton-hover-overlay-color: #555555;
+  --cmp-calendarBoard-moreButton-hover-overlay-opacity: 8%;
+  --cmp-calendarBoard-eventButton-inline-gap: 8px;
+  --cmp-calendarBoard-eventButton-label-gap: 4px;
+  --cmp-calendarBoard-eventButton-bg-default: #E6F1FF;
+  --cmp-calendarBoard-eventButton-bg-blue: #D9EAFF;
+  --cmp-calendarBoard-eventButton-bg-oceanBlue: #D9F2FD;
+  --cmp-calendarBoard-eventButton-bg-lightBlue: #EAF5FE;
+  --cmp-calendarBoard-eventButton-bg-green: #E8F9EF;
+  --cmp-calendarBoard-eventButton-bg-yellow: #FEF1C4;
+  --cmp-calendarBoard-eventButton-bg-orange: #FFEAD7;
+  --cmp-calendarBoard-eventButton-bg-red: #FCE6E6;
+  --cmp-calendarBoard-eventButton-bg-purple: #F4EFFF;
+  --cmp-calendarBoard-eventButton-bg-white: #FFFFFF;
+  --cmp-calendarBoard-eventButton-text-color-default: #222222;
+  --cmp-calendarBoard-eventButton-text-color-separator: #AAAAAA;
+  --cmp-calendarBoard-eventButton-hover-overlay-color: #555555;
+  --cmp-calendarBoard-eventButton-hover-overlay-opacity: 8%;
+  --cmp-calendarBoard-dayEvent-width: 280px;
+  --cmp-calendarBoard-dayEvent-minWidth: 280px;
+  --cmp-calendarBoard-dayEvent-minHeight: 200px;
+  --cmp-calendarBoard-dayEvent-maxHeight: 312px;
+  --cmp-calendarBoard-dayEvent-header-paddingX: 20px;
+  --cmp-calendarBoard-dayEvent-header-paddingY: 12px;
+  --cmp-calendarBoard-dayEvent-header-gap: 4px;
+  --cmp-calendarBoard-dayEvent-body-paddingX: 12px;
+  --cmp-calendarBoard-dayEvent-body-paddingBottom: 20px;
+  --cmp-calendarBoard-dayEvent-body-gap: 8px;
   --cmp-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;
@@ -976,20 +1155,33 @@
   --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-purple-content: #7034D9;
+  --cmp-tag-purple-bg: #F4EFFF;
+  --cmp-tag-purple-deep-bg: #7034D9;
   --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;
@@ -1001,6 +1193,7 @@
   --cmp-badge-blue: #0075FF;
   --cmp-badge-darkblue: #006AC1;
   --cmp-badge-indigo: #004290;
+  --cmp-badge-purple: #7034D9;
   --cmp-badge-grey: #737373;
   --cmp-tooltip-radius: 6px;
   --cmp-tooltip-paddingY: 12px;
@@ -1081,6 +1274,8 @@
   --cmp-overlay-footer-paddingX: 20px;
   --cmp-overlay-footer-paddingY: 8px;
   --cmp-overlay-footer-gap: 16px;
+  --cmp-overlay-footer-shadow: 0px 0px 24px 0px rgba(34,34,34,0.2);
+  --cmp-overlay-footer-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.2));
   --cmp-modal-radius: 8px;
   --cmp-modal-confirm-paddingX: 32px;
   --cmp-modal-confirm-paddingY: 40px;
@@ -1131,6 +1326,25 @@
   --cmp-callout-danger-title-gap: 2px;
   --cmp-callout-danger-title-color: #FFFFFF;
   --cmp-callout-danger-title-icon: 24px;
+  --cmp-contextAlert-radius: 8px;
+  --cmp-contextAlert-border-width: 1px;
+  --cmp-contextAlert-paddingX: 12px;
+  --cmp-contextAlert-paddingY: 8px;
+  --cmp-contextAlert-gap: 8px;
+  --cmp-contextAlert-icon: 16px;
+  --cmp-contextAlert-content: #555555;
+  --cmp-contextAlert-default-bg: #F9F9F9;
+  --cmp-contextAlert-default-border: #E1E1E1;
+  --cmp-contextAlert-danger-bg: #FCEFEF;
+  --cmp-contextAlert-danger-border: #FFB5B5;
+  --cmp-contextAlert-warning-bg: #FEF1EA;
+  --cmp-contextAlert-warning-border: #FFD5AF;
+  --cmp-contextAlert-success-bg: #E8F9EF;
+  --cmp-contextAlert-success-border: #AEEAC7;
+  --cmp-contextAlert-accent-bg: #E6F1FF;
+  --cmp-contextAlert-accent-border: #93C4FF;
+  --cmp-contextAlert-discovery-bg: #F4EFFF;
+  --cmp-contextAlert-discovery-border: #D9C9FF;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -1154,8 +1368,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;
@@ -1165,10 +1381,22 @@
   --cmp-progress-color-active: #2D8DFF;
   --cmp-progress-color-success: #12B553;
   --cmp-progress-color-error: #FB4444;
+  --cmp-progress-color-warning: #FF7F22;
   --cmp-progress-color-neutral: #D8D8D8;
   --cmp-progress-bar-text: #FFFFFF;
   --cmp-progress-inverse-color: #FFFFFF;
   --cmp-progress-inverse-opacity: 40%;
+  --cmp-timeline-heading-color: #222222;
+  --cmp-timeline-heading-paddingY: 8px;
+  --cmp-timeline-time-color: #555555;
+  --cmp-timeline-rail-dot-size: 8px;
+  --cmp-timeline-rail-dot-radius: 9999px;
+  --cmp-timeline-rail-dot-bg: #CCCCCC;
+  --cmp-timeline-rail-line-width: 1px;
+  --cmp-timeline-rail-line-color: #D8D8D8;
+  --cmp-timeline-entry-horizontalGap: 16px;
+  --cmp-timeline-entry-gap: 16px;
+  --cmp-timeline-empty-color: #AAAAAA;
   --cmp-table-header-height: 36px;
   --cmp-table-header-paddingX: 16px;
   --cmp-table-header-gap: 4px;
@@ -1181,6 +1409,8 @@
   --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingX-default: 8px;
   --cmp-table-body-paddingX-wide: 16px;
+  --cmp-table-body-disabled-bg: #F6F6F6;
+  --cmp-table-body-disabled-content: #888888;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -1199,6 +1429,9 @@
   --cmp-table-separator-color: #EEEEEE;
   --cmp-table-separator-width-default: 6px;
   --cmp-table-separator-width-dense: 4px;
+  --cmp-table-dragSelectable-border-color: #229FD7;
+  --cmp-table-dragSelectable-border-width: 2px;
+  --cmp-table-dragSelectable-bg-color: #ECF8FD;
   --cmp-pagination-height: 24px;
   --cmp-pagination-paddingX: 6px;
   --cmp-pagination-radius: 6px;
@@ -1313,6 +1546,104 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-gnb-launcher-button-paddingLeft: 16px;
+  --cmp-gnb-launcher-button-paddingRight: 12px;
+  --cmp-gnb-launcher-button-paddingY: 8px;
+  --cmp-gnb-launcher-button-gap: 8px;
+  --cmp-gnb-launcher-button-radius: 8px;
+  --cmp-gnb-launcher-button-bg-default: #FFFFFF;
+  --cmp-gnb-launcher-button-bg-hover: #EFF6FF;
+  --cmp-gnb-launcher-button-content-default: #555555;
+  --cmp-gnb-launcher-button-content-hover: #222222;
+  --cmp-gnb-launcher-button-logo-paddingY: 4px;
+  --cmp-gnb-launcher-button-logo-gap: 8px;
+  --cmp-gnb-launcher-button-icon-size: 16px;
+  --cmp-gnb-launcher-button-icon-color: #64ABFF;
+  --cmp-gnb-launcher-listBox-bg: #FFFFFF;
+  --cmp-gnb-launcher-listBox-radius: 8px;
+  --cmp-gnb-launcher-listBox-paddingAll: 12px;
+  --cmp-gnb-launcher-listBox-shadow: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-gnb-launcher-listBox-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
+  --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;
@@ -1365,7 +1696,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;
@@ -1373,8 +1703,6 @@
   --cmp-listDraggableItem-accentStripe-width: 2px;
   --cmp-listDraggableItem-accentStripe-color: #64ABFF;
   --cmp-listDraggableItem-dragging-content-opacity: 60%;
-  --cmp-pageBody-padding-default: 16px;
-  --cmp-pageBody-padding-scrollEnd: 80px;
   --cmp-sectionHeaderCard-radius: 8px;
   --cmp-sectionHeaderCard-border: #E1E1E1;
   --cmp-sectionHeaderCard-topBorder-thickness: 2px;
@@ -1400,8 +1728,9 @@
   --cmp-tree-item-rowGap: 8px;
   --cmp-tree-item-contentGap: 12px;
   --cmp-tree-item-text-default: #222222;
-  --cmp-tree-item-arrow-icon: 16px;
   --cmp-tree-connector-line-color: #E1E1E1;
+  --cmp-pageBody-padding-default: 16px;
+  --cmp-pageBody-padding-scrollEnd: 80px;
   --cmp-pageHeader-paddingX: 16px;
   --cmp-pageHeader-gap: 12px;
   --cmp-pageHeader-title-paddingLeft: 4px;
@@ -1411,9 +1740,8 @@
   --cmp-pageHeader-bar-paddingY: 12px;
   --cmp-pageHeader-bar-bg: #FFFFFF;
   --cmp-pageHeader-bar-border: #E1E1E1;
-  --cmp-pageHeader-plain-paddingTop: 20px;
-  --cmp-pageHeader-plain-paddingBottom: 16px;
-  --cmp-pageHeader-plain-title-gap: 4px;
+  --cmp-pageHeader-plain-paddingY: 16px;
+  --cmp-pageHeader-plain-title-gap: 2px;
   --cmp-chipFilter-bar-bg: #FFFFFF;
   --cmp-chipFilter-bar-border: #E1E1E1;
   --cmp-chipFilter-bar-paddingX: 16px;
@@ -1453,6 +1781,8 @@
   --cmp-chipFilter-listbox-bg: #FFFFFF;
   --cmp-chipFilter-listbox-border-color: #E1E1E1;
   --cmp-chipFilter-listbox-radius: 8px;
+  --cmp-chipFilter-listbox-shadow: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 2px 6px -2px rgba(34,34,34,0.16);
+  --cmp-chipFilter-listbox-shadow-filter: drop-shadow(0px 0px 16px rgba(34,34,34,0.12)) drop-shadow(2px 2px 6px rgba(34,34,34,0.16));
   --cmp-chipFilter-listbox-top-paddingX: 12px;
   --cmp-chipFilter-listbox-top-paddingY: 8px;
   --cmp-chipFilter-listbox-top-gap: 8px;
@@ -1473,6 +1803,193 @@
   --cmp-splitter-border-color: #64ABFF;
   --cmp-image-bg: #F9F9F9;
   --cmp-image-icon: #D8D8D8;
+  --cmp-chatMessage-row-paddingInset: 40px;
+  --cmp-chatMessage-avatarGap: 12px;
+  --cmp-chatMessage-contents-gap: 4px;
+  --cmp-chatMessage-name-color: #555555;
+  --cmp-chatMessage-name-paddingX: 8px;
+  --cmp-chatMessage-message-gap: 4px;
+  --cmp-chatMessage-subData-gap: 8px;
+  --cmp-chatMessage-subData-paddingX: 8px;
+  --cmp-chatMessage-bottomButtons-paddingX: 8px;
+  --cmp-chatMessage-group-bubble-gap: 8px;
+  --cmp-chatMessage-group-message-gap: 12px;
+  --cmp-chatMessage-group-system-gap: 24px;
+  --cmp-chatBubble-paddingX: 16px;
+  --cmp-chatBubble-paddingY: 8px;
+  --cmp-chatBubble-gap: 8px;
+  --cmp-chatBubble-radius: 12px;
+  --cmp-chatBubble-incoming-bg: #EEEEEE;
+  --cmp-chatBubble-incoming-content: #222222;
+  --cmp-chatBubble-outgoing-general-bg: #025497;
+  --cmp-chatBubble-outgoing-general-content: #FFFFFF;
+  --cmp-chatBubble-outgoing-default-bg: #EFF6FF;
+  --cmp-chatBubble-outgoing-default-content: #222222;
+  --cmp-chatBubble-templete-bg: #E8F9EF;
+  --cmp-chatBubble-templete-content: #222222;
+  --cmp-chatBubble-button-gap: 8px;
+  --cmp-chatTimeStamp-color: #888888;
+  --cmp-chatReadMark-color: #FF6B00;
+  --cmp-chatFile-bg-default: #FFFFFF;
+  --cmp-chatFile-bg-hover: #F6F6F6;
+  --cmp-chatFile-border-color: #AAAAAA;
+  --cmp-chatFile-border-width: 1px;
+  --cmp-chatFile-radius: 8px;
+  --cmp-chatFile-paddingLeft: 12px;
+  --cmp-chatFile-paddingRight: 24px;
+  --cmp-chatFile-paddingY: 6px;
+  --cmp-chatFile-gap: 8px;
+  --cmp-chatFile-icon-wrapper-bg: #EFF6FF;
+  --cmp-chatFile-icon-wrapper-padding: 4px;
+  --cmp-chatFile-icon-wrapper-radius: 4px;
+  --cmp-chatFile-icon-size: 20px;
+  --cmp-chatFile-text-color: #555555;
+  --cmp-chatSystemMessage-paddingX: 16px;
+  --cmp-chatSystemMessage-paddingY: 4px;
+  --cmp-chatSystemMessage-radius: 9999px;
+  --cmp-chatSystemMessage-bg: #F9F9F9;
+  --cmp-chatSystemMessage-border-color: #E1E1E1;
+  --cmp-chatSystemMessage-color: #555555;
+  --cmp-chatAvatar-size: 32px;
+  --cmp-chatAvatar-radius: 9999px;
+  --cmp-chatAvatar-bg: #EEEEEE;
+  --cmp-chatAvatar-icon: #AAAAAA;
+  --cmp-chatInput-padding: 12px;
+  --cmp-chatInput-gap: 8px;
+  --cmp-chatInput-bg: #FFFFFF;
+  --cmp-chatInput-buttonFrame-height: 48px;
+  --cmp-chatAttachedFile-bg: #F6F6F6;
+  --cmp-chatAttachedFile-border-color: #E1E1E1;
+  --cmp-chatAttachedFile-border-width: 1px;
+  --cmp-chatAttachedFile-radius: 8px;
+  --cmp-chatAttachedFile-paddingX: 4px;
+  --cmp-chatAttachedFile-paddingY: 2px;
+  --cmp-chatAttachedFile-gap: 4px;
+  --cmp-chatAttachedFile-content-gap: 8px;
+  --cmp-chatAttachedFile-icon-wrapper-bg: #FFFFFF;
+  --cmp-chatAttachedFile-icon-wrapper-padding: 2px;
+  --cmp-chatAttachedFile-icon-wrapper-radius: 4px;
+  --cmp-chatAttachedFile-icon-size: 16px;
+  --cmp-chatAttachedFile-filename-color: #555555;
+  --cmp-chart-paddingAll: 36px;
+  --cmp-chart-gap: 12px;
+  --cmp-chart-bg: #FFFFFF;
+  --cmp-chart-title-color: #222222;
+  --cmp-chart-unit-color: #AAAAAA;
+  --cmp-chart-dataLabel-gap: 4px;
+  --cmp-chart-dataLabel-color-default: #555555;
+  --cmp-chart-opacity-default: 80%;
+  --cmp-chart-axis-color: #222222;
+  --cmp-chart-gridline-color: #E1E1E1;
+  --cmp-chart-baseline-color: #AAAAAA;
+  --cmp-chart-line-width: 4px;
+  --cmp-chart-line-opacity: 50%;
+  --cmp-chart-line-point-radius: 9999px;
+  --cmp-chart-line-point-size-default: 10px;
+  --cmp-chart-line-point-size-hover: 12px;
+  --cmp-chart-line-point-size-bg: 24px;
+  --cmp-chart-line-point-opacity-bg: 30%;
+  --cmp-chart-line-point-gap: 4px;
+  --cmp-chart-line-point-dimmed-palette-gradation-1: #5CB0F3;
+  --cmp-chart-line-point-dimmed-palette-gradation-2: #9CD1FC;
+  --cmp-chart-line-point-dimmed-palette-gradation-3: #D5EBFE;
+  --cmp-chart-line-point-dimmed-palette-gradation-4: #D5EBFE;
+  --cmp-chart-line-point-dimmed-palette-gradation-5: #EAF5FE;
+  --cmp-chart-line-point-dimmed-palette-gradation-6: #EAF5FE;
+  --cmp-chart-line-point-dimmed-palette-variation-positivePrimary: #BBDAFF;
+  --cmp-chart-line-point-dimmed-palette-variation-positiveSecondary: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-variation-negativePrimary: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-variation-negativeSecondary: #FFD5AF;
+  --cmp-chart-line-point-dimmed-palette-variation-neutralPrimary: #D8D8D8;
+  --cmp-chart-line-point-dimmed-palette-variation-neutralSecondary: #EEEEEE;
+  --cmp-chart-line-point-dimmed-palette-multi-blue: #BBDAFF;
+  --cmp-chart-line-point-dimmed-palette-multi-skyblue: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-multi-yellow: #FFE99E;
+  --cmp-chart-line-point-dimmed-palette-multi-olive: #FAFAA1;
+  --cmp-chart-line-point-dimmed-palette-multi-lightRed: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-multi-warmBlue: #A4E2FD;
+  --cmp-chart-line-point-dimmed-palette-multi-orange: #FFD5AF;
+  --cmp-chart-line-point-dimmed-palette-multi-green: #AEEAC7;
+  --cmp-chart-line-point-dimmed-palette-multi-navy: #9CD1FC;
+  --cmp-chart-line-point-dimmed-palette-multi-grey: #D8D8D8;
+  --cmp-chart-line-point-dimmed-palette-multi-red: #FFD3D3;
+  --cmp-chart-line-point-dimmed-palette-single: #BBDAFF;
+  --cmp-chart-line-area-gradation-start: 30%;
+  --cmp-chart-line-area-gradation-end: 5%;
+  --cmp-chart-bar-radius: 8px;
+  --cmp-chart-bar-opacity-dimmed: 60%;
+  --cmp-chart-barContainer-hover-bg: #888888;
+  --cmp-chart-barContainer-hover-opacity: 8%;
+  --cmp-chart-doughnut-hover-grow: 4px;
+  --cmp-chart-doughnut-hover-radius: 2px;
+  --cmp-chart-doughnut-opacity-dimmed: 40%;
+  --cmp-chart-doughnut-shadow-hover: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-chart-doughnut-shadow-hover-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
+  --cmp-chart-doughnut-legend-data-default-gap: 4px;
+  --cmp-chart-doughnut-legend-data-simple-gapY: 24px;
+  --cmp-chart-doughnut-innerRatio: 0.4;
+  --cmp-chart-legend-group-gap: 24px;
+  --cmp-chart-legendItem-gap: 8px;
+  --cmp-chart-legendItem-paddingY: 4px;
+  --cmp-chart-legendItem-color: #555555;
+  --cmp-chart-chartTooltip-paddingX: 12px;
+  --cmp-chart-chartTooltip-paddingY: 8px;
+  --cmp-chart-chartTooltip-gap: 4px;
+  --cmp-chart-chartTooltip-radius: 8px;
+  --cmp-chart-chartTooltip-shadow: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 4px 16px -4px rgba(34,34,34,0.2);
+  --cmp-chart-chartTooltip-shadow-filter: drop-shadow(0px 0px 24px rgba(34,34,34,0.12)) drop-shadow(4px 4px 16px rgba(34,34,34,0.2));
+  --cmp-chart-chartTooltip-bg: #FFFFFF;
+  --cmp-chart-chartTooltip-title-color: #555555;
+  --cmp-chart-chartTooltipItem-gap: 8px;
+  --cmp-chart-chartTooltipItem-label-color: #222222;
+  --cmp-chart-chartTooltipItem-dataValue-color: #222222;
+  --cmp-chart-dataValue-palette-gradation-6: #5CB0F3;
+  --cmp-chart-dataValue-palette-variation-positivePrimary: #005CC9;
+  --cmp-chart-dataValue-palette-variation-positiveSecondary: #128FC7;
+  --cmp-chart-dataValue-palette-variation-negativePrimary: #FB4444;
+  --cmp-chart-dataValue-palette-variation-negativeSecondary: #FF6B00;
+  --cmp-chart-dataValue-palette-variation-neutralPrimary: #444444;
+  --cmp-chart-dataValue-palette-variation-neutralSecondary: #737373;
+  --cmp-chart-dataValue-palette-multi-blue: #005CC9;
+  --cmp-chart-dataValue-palette-multi-skyblue: #128FC7;
+  --cmp-chart-dataValue-palette-multi-yellow: #CA9612;
+  --cmp-chart-dataValue-palette-multi-olive: #838300;
+  --cmp-chart-dataValue-palette-multi-lightRed: #FB4444;
+  --cmp-chart-dataValue-palette-multi-warmBlue: #128FC7;
+  --cmp-chart-dataValue-palette-multi-orange: #FF6B00;
+  --cmp-chart-dataValue-palette-multi-green: #00973C;
+  --cmp-chart-dataValue-palette-multi-navy: #025497;
+  --cmp-chart-dataValue-palette-multi-grey: #444444;
+  --cmp-chart-dataValue-palette-multi-red: #FB4444;
+  --cmp-chart-palette-gradation-1: #025497;
+  --cmp-chart-palette-gradation-2: #006AC1;
+  --cmp-chart-palette-gradation-3: #1F8AE1;
+  --cmp-chart-palette-gradation-4: #5CB0F3;
+  --cmp-chart-palette-gradation-5: #9CD1FC;
+  --cmp-chart-palette-gradation-6: #D5EBFE;
+  --cmp-chart-palette-variation-positivePrimary: #2D8DFF;
+  --cmp-chart-palette-variation-positiveSecondary: #50BFF0;
+  --cmp-chart-palette-variation-negativePrimary: #FF7C7C;
+  --cmp-chart-palette-variation-negativeSecondary: #FFA452;
+  --cmp-chart-palette-variation-neutralPrimary: #737373;
+  --cmp-chart-palette-variation-neutralSecondary: #BBBBBB;
+  --cmp-chart-palette-multi-blue: #2D8DFF;
+  --cmp-chart-palette-multi-skyblue: #50BFF0;
+  --cmp-chart-palette-multi-yellow: #EBB110;
+  --cmp-chart-palette-multi-olive: #A5A500;
+  --cmp-chart-palette-multi-lightRed: #FF7C7C;
+  --cmp-chart-palette-multi-warmBlue: #128FC7;
+  --cmp-chart-palette-multi-orange: #FF7F22;
+  --cmp-chart-palette-multi-green: #12B553;
+  --cmp-chart-palette-multi-navy: #025497;
+  --cmp-chart-palette-multi-grey: #737373;
+  --cmp-chart-palette-multi-red: #FB4444;
+  --cmp-chart-palette-single: #2D8DFF;
+  --cmp-skeleton-bg-light: #EEEEEE;
+  --cmp-skeleton-bg-dark: #222222;
+  --cmp-skeleton-highlight: #FFFFFF;
+  --cmp-skeleton-opacity: 16%;
+  --cmp-skeleton-radius: 6px;
 }
 
 /* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.
@@ -1481,6 +1998,15 @@
    Chrome 121+/WebKit 는 scrollbar-width·scrollbar-color 계산값이 auto 가 아니면 ::-webkit-scrollbar-* 를 통째로
    무시하므로, 표준 속성은 webkit 유사요소가 없는 브라우저(Firefox)에서만 켠다. */
 @layer base {
+  /* 전역 기본 글꼴 — 문서 전체가 디자인 시스템 글꼴(--font-base)로 렌더된다.
+     @theme 의 --font-sans 만으로도 preflight 를 통해 같은 결과가 나오지만,
+     preflight 를 끈 소비 앱에서도 동작하도록 명시한다.
+     base 레이어라 소비 앱의 font-* 유틸리티(utilities)가 언제든 덮어쓴다.
+     ※ 글꼴 파일(Pretendard) 로딩은 소비 앱 몫이다 — README '글꼴' 절 참조. */
+  html {
+    font-family: var(--font-base);
+  }
+
   /* 전역 기본 텍스트 색 — 본문은 grey_95(= fg.primary). 요소마다 색을 지정하지 않아도
      브라우저 기본 검정(#000)이 아니라 디자인 시스템 색으로 렌더된다.
      보조·비활성 텍스트만 text-fg-tertiary(grey_65)로 내려 쓴다.
@@ -1543,12 +2069,36 @@
     font-weight: 700;
     line-height: 30px;
   }
+  .typo-heading-xl {
+    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: 24px;
+    font-weight: 700;
+    line-height: 38px;
+  }
   .typo-body-xs-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: 11px;
     font-weight: 400;
     line-height: 18px;
   }
+  .typo-body-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-body-xs-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: 11px;
+    font-weight: 600;
+    line-height: 18px;
+  }
+  .typo-body-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-body-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;
@@ -1561,6 +2111,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;
@@ -1579,6 +2135,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;
@@ -1597,6 +2159,12 @@
     font-weight: 500;
     line-height: 26px;
   }
+  .typo-body-lg-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: 16px;
+    font-weight: 600;
+    line-height: 26px;
+  }
   .typo-body-lg-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: 16px;
@@ -1678,6 +2246,12 @@
     font-weight: 500;
     line-height: 20px;
   }
+  .typo-feedback-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-feedback-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;
@@ -1691,10 +2265,10 @@
     line-height: 20px;
     text-decoration: underline;
   }
-  .typo-feedback-md-bold {
+  .typo-feedback-md-regular {
     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: 700;
+    font-weight: 400;
     line-height: 24px;
   }
   .typo-feedback-md-medium {
@@ -1703,6 +2277,12 @@
     font-weight: 500;
     line-height: 24px;
   }
+  .typo-feedback-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;
+    font-weight: 700;
+    line-height: 24px;
+  }
   .typo-feedback-md-underline {
     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;
@@ -1885,6 +2465,11 @@
   --animate-floating-out-bottom: floating-out-bottom 0.15s ease-in forwards;
   --animate-floating-out-left: floating-out-left 0.15s ease-in forwards;
   --animate-floating-out-right: floating-out-right 0.15s ease-in forwards;
+
+  /* 스켈레톤 (Quasar QSkeleton 포팅). 속도는 SSkeleton 이 animation-duration 으로 덮어쓴다 */
+  --animate-skeleton-wave: skeleton-wave 1.5s linear 0.5s infinite;
+  --animate-skeleton-pulse: skeleton-pulse 1.5s ease-in-out 0.5s infinite;
+  --animate-skeleton-fade: skeleton-fade 1.5s linear 0.5s infinite;
 }
 @keyframes linear-indeterminate {
   0% { transform: translateX(-100%) scaleX(0.2); }
@@ -1930,3 +2515,7 @@
 @keyframes floating-out-bottom { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }
 @keyframes floating-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(4px); } }
 @keyframes floating-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-4px); } }
+/* 스켈레톤: wave 는 하이라이트 띠가 왼→오로 지나가고, pulse 는 크기, fade 는 투명도가 숨쉬듯 바뀐다 */
+@keyframes skeleton-wave { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
+@keyframes skeleton-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.85); } }
+@keyframes skeleton-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }