@nurihaus/web-design-system 2.0.10 → 3.0.1

package/dist/styles.css

@@ -0,0 +1,1729 @@
+
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css');
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+/* 토큰 + 글꼴 + 리셋 + 유틸리티 + 컴포넌트. 디자인 시스템 컴포넌트를 쓸 때 가져온다. */
+/* 변수만. 이것만 가져와도 화면이 바뀌지 않는다. CSS Modules 에서 var() 로 쓴다. */
+/* tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens` */
+:root {
+  --color-purple-50: #F4EFFA;
+  --color-purple-100: #E9E0F5;
+  --color-purple-200: #DDD1F0;
+  --color-purple-300: #C3B4DD;
+  --color-purple-400: #A894C7;
+  --color-purple-500: #957EB4;
+  --color-purple-600: #6F56A3;
+  --color-purple-700: #4C277C;
+  --color-purple-800: #4C1D88;
+  --color-purple-900: #391D5D;
+  --color-grey-scale-50: #FAFAFA;
+  --color-grey-scale-100: #F4F4F5;
+  --color-grey-scale-200: #E4E4E7;
+  --color-grey-scale-300: #D4D4D8;
+  --color-grey-scale-400: #A1A1AA;
+  --color-grey-scale-500: #71717A;
+  --color-grey-scale-600: #52525B;
+  --color-grey-scale-700: #3F3F46;
+  --color-grey-scale-800: #27272A;
+  --color-grey-scale-900: #18181B;
+  --color-accent-red-50: #FFF5F6;
+  --color-accent-red-100: #FFE8E9;
+  --color-accent-red-200: #FBCFD2;
+  --color-accent-red-300: #F39AA0;
+  --color-accent-red-400: #E86F77;
+  --color-accent-red-500: #DF535C;
+  --color-accent-red-600: #C94751;
+  --color-accent-red-700: #B02E4C;
+  --color-accent-red-800: #8F243A;
+  --color-accent-red-900: #6E1A2C;
+  --color-accent-pink-50: #FFF1F6;
+  --color-accent-pink-100: #FFE4EE;
+  --color-accent-pink-200: #FECFE3;
+  --color-accent-pink-300: #FDA4CC;
+  --color-accent-pink-400: #F472B6;
+  --color-accent-pink-500: #EC6FAE;
+  --color-accent-pink-600: #D95D9A;
+  --color-accent-pink-700: #B94A7E;
+  --color-accent-pink-800: #93385F;
+  --color-accent-pink-900: #6E2644;
+  --color-accent-magenta-50: #FEF0FF;
+  --color-accent-magenta-100: #FEF0FF;
+  --color-accent-magenta-200: #F8C6FF;
+  --color-accent-magenta-300: #F29BFF;
+  --color-accent-magenta-400: #EC5CEF;
+  --color-accent-magenta-500: #E13BE7;
+  --color-accent-magenta-600: #C82FCC;
+  --color-accent-magenta-700: #A923A8;
+  --color-accent-magenta-800: #831C83;
+  --color-accent-magenta-900: #5E145E;
+  --color-accent-blue-50: #F1F4FF;
+  --color-accent-blue-100: #E3E8FF;
+  --color-accent-blue-200: #C7D2FE;
+  --color-accent-blue-300: #A5B4FC;
+  --color-accent-blue-400: #818CF8;
+  --color-accent-blue-500: #2563EB;
+  --color-accent-blue-600: #1F52C9;
+  --color-accent-blue-700: #1E40AF;
+  --color-accent-blue-800: #1C348A;
+  --color-accent-blue-900: #162763;
+  --color-accent-mint-50: #ECFEFD;
+  --color-accent-mint-100: #D1FAF7;
+  --color-accent-mint-200: #A7F3EE;
+  --color-accent-mint-300: #6EE7E0;
+  --color-accent-mint-400: #2DD4CB;
+  --color-accent-mint-500: #01ECE1;
+  --color-accent-mint-600: #0BC5BC;
+  --color-accent-mint-700: #0F9F99;
+  --color-accent-mint-800: #117D78;
+  --color-accent-mint-900: #135C58;
+  --color-accent-green-50: #ECFDF3;
+  --color-accent-green-100: #D1FAE1;
+  --color-accent-green-200: #A7F3C8;
+  --color-accent-green-300: #6EE7A3;
+  --color-accent-green-400: #41E176;
+  --color-accent-green-500: #22C55E;
+  --color-accent-green-600: #16A34A;
+  --color-accent-green-700: #289A3A;
+  --color-accent-green-800: #166534;
+  --color-accent-green-900: #14532D;
+  --color-accent-yellow-50: #FFFBEB;
+  --color-accent-yellow-100: #FEF3C7;
+  --color-accent-yellow-200: #FDE68A;
+  --color-accent-yellow-300: #FCD34D;
+  --color-accent-yellow-400: #FBBF24;
+  --color-accent-yellow-500: #FFB800;
+  --color-accent-yellow-600: #E0A106;
+  --color-accent-yellow-700: #B58105;
+  --color-accent-yellow-800: #8A6404;
+  --color-accent-yellow-900: #5F4703;
+  --color-accent-orange-50: #FFF7ED;
+  --color-accent-orange-100: #FFEDD5;
+  --color-accent-orange-200: #FED7AA;
+  --color-accent-orange-300: #FDBA74;
+  --color-accent-orange-400: #FB923C;
+  --color-accent-orange-500: #F97316;
+  --color-accent-orange-600: #EA580C;
+  --color-accent-orange-700: #C2410C;
+  --color-accent-orange-800: #9A3412;
+  --color-accent-orange-900: #7C2D12;
+  --font-family-primary: Pretendard;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-size-xsm: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 36px;
+  --font-size-5xl: 48px;
+  --font-size-6xl: 60px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-14: 14px;
+  --spacing-16: 16px;
+  --spacing-18: 18px;
+  --spacing-20: 20px;
+  --spacing-22: 22px;
+  --spacing-24: 24px;
+  --spacing-26: 26px;
+  --spacing-28: 28px;
+  --spacing-30: 30px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-full: 9999px;
+  --color-black: #000000;
+  --color-white: #FFFFFF;
+
+  --line-height-xsm: 18px;
+  --line-height-sm: 18px;
+  --line-height-base: 22px;
+  --line-height-lg: 24px;
+  --line-height-xl: 28px;
+  --line-height-2xl: 32px;
+  --line-height-3xl: 36px;
+  --line-height-4xl: 43px;
+  --line-height-5xl: 66px;
+  --line-height-6xl: 82px;
+}
+/* semantic: app */
+:root, :root[data-ds-theme='app'] {
+  --button-variant-primary-background: var(--color-purple-900);
+  --button-variant-primary-border: var(--color-purple-900);
+  --button-variant-primary-text: var(--color-white);
+  --button-variant-ghost-background: var(--color-white);
+  --button-variant-ghost-border: var(--color-grey-scale-300);
+  --button-variant-ghost-text: var(--color-purple-900);
+  --button-variant-secondary-background: var(--color-purple-50);
+  --button-variant-secondary-border: var(--color-purple-50);
+  --button-variant-secondary-text: var(--color-purple-900);
+  --button-variant-neutral-background: var(--color-white);
+  --button-variant-neutral-border: var(--color-white);
+  --button-variant-neutral-text: var(--color-purple-900);
+  --button-variant-disabled-background: var(--color-grey-scale-200);
+  --button-variant-disabled-border: var(--color-grey-scale-200);
+  --button-variant-disabled-text: var(--color-white);
+  --button-variant-outlined-background: var(--color-white);
+  --button-variant-outlined-border: var(--color-accent-red-700);
+  --button-variant-outlined-text: var(--color-accent-red-700);
+  --button-size-xl: [object Object];
+  --button-size-lg: [object Object];
+  --button-size-md: [object Object];
+  --button-size-rg: [object Object];
+  --button-size-sm: [object Object];
+  --button-size-xs: [object Object];
+}
+/* semantic: admin */
+:root[data-ds-theme='admin'] {
+  --button-variant-primary-border: var(--color-purple-900);
+  --button-variant-primary-text: var(--color-white);
+  --button-variant-primary-hover-background: var(--color-purple-900);
+  --button-variant-primary-hover-border: var(--color-purple-900);
+  --button-variant-primary-hover-text: var(--color-white);
+  --button-variant-ghost-background: var(--color-white);
+  --button-variant-ghost-border: var(--color-grey-scale-300);
+  --button-variant-ghost-text: var(--color-purple-900);
+  --button-variant-ghost-hover-background: var(--color-white);
+  --button-variant-ghost-hover-border: var(--color-purple-900);
+  --button-variant-ghost-hover-text: var(--color-purple-900);
+  --button-variant-secondary-background: var(--color-purple-50);
+  --button-variant-secondary-border: var(--color-purple-50);
+  --button-variant-secondary-text: var(--color-purple-900);
+  --button-variant-secondary-hover-background: var(--color-purple-100);
+  --button-variant-secondary-hover-border: var(--color-purple-100);
+  --button-variant-secondary-hover-text: var(--color-purple-900);
+  --button-variant-disabled-background: var(--color-grey-scale-200);
+  --button-variant-disabled-border: var(--color-grey-scale-200);
+  --button-variant-disabled-text: var(--color-white);
+  --button-variant-outlined-background: var(--color-white);
+  --button-variant-outlined-border: var(--color-accent-red-700);
+  --button-variant-outlined-text: var(--color-accent-red-700);
+  --button-variant-neutral-background: var(--color-white);
+  --button-variant-neutral-border: var(--color-white);
+  --button-variant-neutral-text: var(--color-purple-900);
+  --button-variant-neutral-hover-background: var(--color-grey-scale-100);
+  --button-variant-neutral-hover-border: var(--color-grey-scale-100);
+  --button-variant-neutral-hover-text: var(--color-purple-900);
+  --button-variant-confirm-background: var(--color-accent-red-500);
+  --button-variant-confirm-border: var(--color-accent-red-500);
+  --button-variant-confirm-text: var(--color-white);
+  --button-variant-confirm-hover-background: var(--color-accent-red-700);
+  --button-variant-confirm-hover-border: var(--color-accent-red-700);
+  --button-variant-confirm-hover-text: var(--color-white);
+  --button-xl: [object Object];
+  --button-l: [object Object];
+  --button-sb: [object Object];
+  --button-r: [object Object];
+  --button-s: [object Object];
+  --button-xs: [object Object];
+  --button-size-xs: 30;
+  --button-size-s: 40;
+  --button-size-r: 48;
+  --button-size-m: 50;
+  --button-size-l: 54;
+  --button-size-xl: 60;
+}
+.nuri-theme {
+  --cursor-button: pointer;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  font-family:
+    'Twemoji Country Flags',
+    'Pretendard',
+    Pretendard,
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    Roboto,
+    'Helvetica Neue',
+    'Segoe UI',
+    'Apple SD Gothic Neo',
+    'Noto Sans KR',
+    'Malgun Gothic',
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji',
+    sans-serif;
+}
+/* 웹폰트와 기본 글꼴. 토큰이 아니라 손으로 유지한다. */
+/*
+ * 글꼴은 `:root` 에 걸지 않는다. 토큰만 가져다 쓰는 앱의 글꼴을 뺏지 않기 위해서다.
+ * 디자인 시스템의 글꼴을 원하면 이 클래스를 붙인다.
+ */
+.nuri-placeholder {
+  color: var(--color-grey-scale-400);
+}
+/* Reset */
+/* 모든 요소의 마진과 패딩 제거 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+/* 기본 폰트 설정 및 텍스트 렌더링 최적화 */
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* 리스트 스타일 제거 */
+ul,
+ol {
+  list-style: none;
+}
+/* 링크 스타일 초기화 */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+/* 버튼 스타일 초기화 */
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+/* 이미지 관련 설정 */
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+/* 폼 요소 스타일 초기화 */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+/* Utility */
+.nuri-display-flex {
+  display: flex;
+}
+.nuri-display-inline-flex {
+  display: inline-flex;
+}
+.nuri-display-block {
+  display: block;
+}
+.nuri-display-inline-block {
+  display: inline-block;
+}
+.nuri-display-grid {
+  display: grid;
+}
+.nuri-display-inline-grid {
+  display: inline-grid;
+}
+.nuri-display-contents {
+  display: contents;
+}
+.nuri-display-none {
+  display: none;
+}
+.nuri-position-static {
+  position: static;
+}
+.nuri-position-relative {
+  position: relative;
+}
+.nuri-position-absolute {
+  position: absolute;
+}
+.nuri-position-fixed {
+  position: fixed;
+}
+.nuri-position-sticky {
+  position: sticky;
+}
+.nuri-flex-row {
+  flex-direction: row;
+}
+.nuri-flex-row-reverse {
+  flex-direction: row-reverse;
+}
+.nuri-flex-column {
+  flex-direction: column;
+}
+.nuri-flex-column-reverse {
+  flex-direction: column-reverse;
+}
+.nuri-ai-start {
+  align-items: flex-start;
+}
+.nuri-ai-center {
+  align-items: center;
+}
+.nuri-ai-end {
+  align-items: flex-end;
+}
+.nuri-ai-stretch {
+  align-items: stretch;
+}
+.nuri-ai-baseline {
+  align-items: baseline;
+}
+.nuri-justify-content-start {
+  justify-content: flex-start;
+}
+.nuri-justify-content-center {
+  justify-content: center;
+}
+.nuri-justify-content-end {
+  justify-content: flex-end;
+}
+.nuri-justify-content-between {
+  justify-content: space-between;
+}
+.nuri-justify-content-around {
+  justify-content: space-around;
+}
+.nuri-justify-content-evenly {
+  justify-content: space-evenly;
+}
+.nuri-overflow-visible {
+  overflow: visible;
+}
+.nuri-overflow-hidden {
+  overflow: hidden;
+}
+.nuri-overflow-scroll {
+  overflow: scroll;
+}
+.nuri-overflow-auto {
+  overflow: auto;
+}
+.nuri-overflow-x-visible {
+  overflow-x: visible;
+}
+.nuri-overflow-x-hidden {
+  overflow-x: hidden;
+}
+.nuri-overflow-x-scroll {
+  overflow-x: scroll;
+}
+.nuri-overflow-x-auto {
+  overflow-x: auto;
+}
+.nuri-overflow-y-visible {
+  overflow-y: visible;
+}
+.nuri-overflow-y-hidden {
+  overflow-y: hidden;
+}
+.nuri-overflow-y-scroll {
+  overflow-y: scroll;
+}
+.nuri-overflow-y-auto {
+  overflow-y: auto;
+}
+/* Component */
+.base-avatar {
+  border-radius: 50%;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  overflow: hidden;
+}
+.base-avatar.avatar-image {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+.base-avatar .avatar-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+:is(.base-avatar .avatar-fallback) svg {
+      width: 100%;
+      height: 100%;
+    }
+/***************************************************************************************************
+*                                                                                                 *
+* avatar                                                                                          *
+*                                                                                                 *
+***************************************************************************************************/
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.avatar.size-xl {
+    width: 124px;
+    height: 124px;
+    border: 1px solid #e4e4e7;
+  }
+.avatar.size-xl.badge-option {
+      width: 48px;
+      height: 48px;
+    }
+.avatar.size-l {
+    width: 74px;
+    height: 74px;
+    border: 1px solid #e4e4e7;
+  }
+.avatar.size-l.badge-option {
+      width: 30px;
+      height: 30px;
+    }
+.avatar.size-m {
+    width: 58px;
+    height: 58px;
+    border: 1px solid #e4e4e7;
+  }
+.avatar.size-m.badge-option {
+      width: 24px;
+      height: 24px;
+    }
+.avatar.size-s {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #e4e4e7;
+  }
+.avatar.size-s.badge-option {
+      width: 18px;
+      height: 18px;
+    }
+.base-badge {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 40px;
+
+  background-color: attr(data-backgroundColor color, transparent);
+  color: attr(data-textColor color, transparent);
+  border: attr(data-borderColor color, transparent);
+}
+.base-badge.size-l {
+    height: 48px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+.base-badge.size-m {
+    height: 40px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+.base-badge.size-r {
+    height: 36px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+.base-badge.size-s {
+    height: 32px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-bold);
+  }
+.base-badge.size-sm {
+    height: 28px;
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-bold);
+  }
+.base-badge.icon-text-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0 20px;
+  }
+/***************************************************************************************************
+*                                                                                                 *
+* option-badge                                                                                    *
+*                                                                                                 *
+***************************************************************************************************/
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-width: 1px;
+  border-style: solid;
+}
+/***************************************************************************************************
+*                                                                                                 *
+* option-badge                                                                                    *
+*                                                                                                 *
+***************************************************************************************************/
+.icon-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  border-width: 1px;
+  border-style: solid;
+}
+/***************************************************************************************************
+ *                                                                                                 *
+ * icon-text-option-badge                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.icon-text-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 20px;
+}
+.icon-text-option  > span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+.base-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+}
+.base-button:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * cta-button                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.cta-button {
+  border-radius: 6px;
+}
+.cta-button.variant-primary {
+    background-color: var(--color-purple-900);
+    border: 1px solid var(--color-purple-900);
+    color: var(--color-white);
+  }
+.cta-button.variant-primary:not(:disabled):hover {
+      background-color: var(--color-purple-900);
+      border-color: var(--color-purple-900);
+      color: var(--color-white);
+    }
+.cta-button.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+  }
+.cta-button.variant-secondary:not(:disabled):hover {
+      background-color: var(--color-purple-100);
+      border-color: var(--color-purple-100);
+      color: var(--color-purple-900);
+    }
+.cta-button.variant-ghost {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-grey-scale-300);
+    color: var(--color-purple-900);
+  }
+.cta-button.variant-ghost:not(:disabled):hover {
+      background-color: var(--color-white);
+      border-color: var(--color-purple-900);
+      color: var(--color-purple-900);
+    }
+.cta-button.variant-neutral {
+    background-color: var(--color-white);
+    color: var(--color-purple-900);
+  }
+.cta-button.variant-neutral:not(:disabled):hover {
+      background-color: var(--color-grey-scale-100);
+      border: 1px solid var(--color-grey-scale-100);
+      color: var(--color-purple-900);
+    }
+.cta-button.variant-confirm {
+    background-color: var(--color-accent-red-500);
+    border: 1px solid var(--color-accent-red-500);
+    color: var(--color-white);
+  }
+.cta-button.variant-confirm:not(:disabled):hover {
+      background-color: var(--color-accent-red-700);
+      border-color: var(--color-accent-red-700);
+      color: var(--color-white);
+    }
+.cta-button.variant-outlined {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-accent-red-700);
+    color: var(--color-accent-red-700);
+  }
+.cta-button.size-xl {
+    height: 60px;
+
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+    font-weight: var(--font-weight-bold);
+  }
+.cta-button.size-l {
+    height: 54px;
+
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    font-weight: var(--font-weight-bold);
+  }
+.cta-button.size-r {
+    height: 48px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+.cta-button.size-m {
+    height: 50px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+.cta-button.size-s {
+    height: 40px;
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-semibold);
+  }
+.cta-button.size-xs {
+    height: 30px;
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-semibold);
+  }
+.cta-button:disabled {
+    background-color: var(--color-grey-scale-200);
+    color: var(--color-white);
+    cursor: not-allowed;
+    border: none;
+  }
+.base-check-box.label {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * check-box                                                                                       *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.check-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  background-color: transparent;
+  border: none;
+}
+.check-box-indicator.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    border: 1.5px solid var(--color-purple-900);
+  }
+.check-box-indicator {
+
+  width: 100%;
+  height: 100%;
+}
+.check-box-indicator.size-l {
+    width: 24px;
+    height: 24px;
+  }
+.check-box-indicator.size-m {
+    width: 20px;
+    height: 20px;
+  }
+.check-box-indicator.size-s {
+    width: 18px;
+    height: 18px;
+  }
+.check-box-indicator[data-state='unchecked'] {
+    background-color: #fff;
+  }
+.check-box-indicator[data-state='checked'] {
+    background-color: var(--color-purple-900);
+  }
+.check-box-indicator[data-disabled='true'] {
+    border: none;
+    border-radius: 4px;
+    background-color: var(--color-grey-scale-300);
+  }
+.base-collapsible-menu.trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * collapsible-menu                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.collapsible-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.collapsible-menu.size-m .collapsible-menu-row {
+    height: 40px;
+  }
+.collapsible-menu.size-l .collapsible-menu-row {
+    height: 48px;
+  }
+.collapsible-menu-row {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  width: 100%;
+  padding: 0 12px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--collapsible-menu-text-color, var(--color-grey-scale-700));
+}
+.collapsible-menu-row:hover {
+    background-color: var(--collapsible-menu-hover-bg-color, var(--color-grey-scale-100));
+  }
+.collapsible-menu-row.is-active {
+    background-color: var(--collapsible-menu-active-bg-color, var(--color-grey-scale-100));
+    color: var(--collapsible-menu-active-text-color, var(--color-purple-800));
+    font-weight: var(--collapsible-menu-active-font-weight, 600);
+  }
+.collapsible-menu-row:disabled,.collapsible-menu-row[aria-disabled='true'] {
+    cursor: not-allowed;
+    color: var(--collapsible-menu-disabled-text-color, var(--color-grey-scale-400));
+  }
+.collapsible-menu-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.collapsible-menu-left > * {
+  min-width: 0;
+}
+.collapsible-menu-chevron {
+  width: 18px;
+  height: 18px;
+  color: var(--color-grey-scale-500);
+  transition: transform 160ms ease;
+}
+.base-collapsible-menu.trigger[data-state='open'] .collapsible-menu-chevron {
+  transform: rotate(180deg);
+}
+.collapsible-menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
+  margin-bottom: 4px;
+}
+.base-drop-down.trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * drop-down-single                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.drop-down-single-trigger.size-m {
+    height: 40px;
+  }
+.drop-down-single-trigger.size-l {
+    height: 50px;
+  }
+.drop-down-single-trigger {
+
+  border: 1px solid var(--color-grey-scale-300);
+  border-radius: 4px;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 0 14px;
+  background-color: var(--color-white);
+}
+.drop-down-single-trigger:focus {
+    border-color: var(--color-purple-900);
+  }
+.drop-down-single-trigger[data-placeholder] .drop-down-single-icon {
+      color: var(--color-grey-scale-400);
+    }
+.drop-down-single-trigger[data-placeholder] svg {
+      color: var(--color-grey-scale-400);
+    }
+.drop-down-single-trigger:not([data-placeholder]) .drop-down-single-icon {
+      color: var(--color-black);
+    }
+.drop-down-single-trigger:not([data-placeholder]) svg {
+      color: var(--color-black);
+    }
+.drop-down-single-trigger[data-state='open'] .rotate {
+      transform: rotate(180deg);
+      transform-origin: 50% 50%;
+      transition: transform 160ms ease;
+      will-change: transform;
+    }
+.drop-down-single-value {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+
+  text-align: left;
+}
+.drop-down-single-value ::-moz-placeholder {
+    color: var(--color-grey-scale-400);
+  }
+.drop-down-single-value ::placeholder {
+    color: var(--color-grey-scale-400);
+  }
+.drop-down-single-content {
+  z-index: 5;
+  min-width: var(--radix-select-trigger-width);
+  overflow: hidden;
+  box-shadow:
+    0px 4px 6px -2px rgba(0, 0, 0, 0.06),
+    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+}
+.drop-down-single-item {
+  padding: 14px;
+  background-color: var(--color-white);
+  outline: none;
+  height: 46px;
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+
+  cursor: pointer;
+}
+.drop-down-single-item[data-highlighted] {
+    background-color: var(--color-purple-50);
+    outline: none;
+  }
+.drop-down-single-item:disabled {
+    background-color: var(--color-grey-scale-100);
+    color: var(--color-grey-scale-400);
+    cursor: not-allowed;
+  }
+.base-text:where(.xsm) {
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+  }
+.base-text:where(.sm) {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+.base-text:where(.base) {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+.base-text:where(.lg) {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+.base-text:where(.xl) {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+  }
+.base-text:where(.t-2xl) {
+    font-size: var(--font-size-2xl);
+    line-height: var(--line-height-2xl);
+  }
+.base-text:where(.t-3xl) {
+    font-size: var(--font-size-3xl);
+    line-height: var(--line-height-3xl);
+  }
+.base-text:where(.t-4xl) {
+    font-size: var(--font-size-4xl);
+    line-height: var(--line-height-4xl);
+  }
+.base-text:where(.t-5xl) {
+    font-size: var(--font-size-5xl);
+    line-height: var(--line-height-5xl);
+  }
+.base-text:where(.t-6xl) {
+    font-size: var(--font-size-6xl);
+    line-height: var(--line-height-6xl);
+  }
+.base-text:where(.regular) {
+    font-weight: var(--font-weight-regular);
+  }
+.base-text:where(.medium) {
+    font-weight: var(--font-weight-medium);
+  }
+.base-text:where(.semibold) {
+    font-weight: var(--font-weight-semibold);
+  }
+.base-text:where(.bold) {
+    font-weight: var(--font-weight-bold);
+  }
+.base-text:where(.extrabold) {
+    font-weight: var(--font-weight-extrabold);
+  }
+.base-text.textAlign-left[class*='textAlign-'] {
+      text-align: left;
+    }
+.base-text.textAlign-center[class*='textAlign-'] {
+      text-align: center;
+    }
+.base-text.textDecoration-underline[class*='textDecoration-'] {
+      text-decoration: underline;
+    }
+.base-text.textDecoration-none[class*='textDecoration-'] {
+      text-decoration: none;
+    }
+.base-text.textDecoration-lineThrough[class*='textDecoration-'] {
+      text-decoration: line-through;
+    }
+.base-text.textDecoration-overline[class*='textDecoration-'] {
+      text-decoration: overline;
+    }
+.base-text.textDecoration-blink[class*='textDecoration-'] {
+      text-decoration: blink;
+    }
+.base-text.wordBreak-normal[class*='wordBreak-'] {
+      word-break: normal;
+    }
+.base-text.wordBreak-breakAll[class*='wordBreak-'] {
+      word-break: break-all;
+    }
+.base-text.wordBreak-breakWord[class*='wordBreak-'] {
+      word-break: break-word;
+    }
+.base-text.wordBreak-keepAll[class*='wordBreak-'] {
+      word-break: keep-all;
+    }
+.base-text.wordBreak-keepWord[class*='wordBreak-'] {
+      word-break: keep-word;
+    }
+.base-text.wordBreak-breakSpaces[class*='wordBreak-'] {
+      word-break: break-spaces;
+    }
+.base-text.wordBreak-all[class*='wordBreak-'] {
+      word-break: all;
+    }
+.base-text.whiteSpace-normal[class*='whiteSpace-'] {
+      white-space: normal;
+    }
+.base-text.whiteSpace-nowrap[class*='whiteSpace-'] {
+      white-space: nowrap;
+    }
+.base-text.whiteSpace-pre[class*='whiteSpace-'] {
+      white-space: pre;
+    }
+.base-text.whiteSpace-preLine[class*='whiteSpace-'] {
+      white-space: pre-line;
+    }
+.base-text.whiteSpace-preWrap[class*='whiteSpace-'] {
+      white-space: pre-wrap;
+    }
+.base-text.color-black[class*='color-'] {
+      color: var(--color-black);
+    }
+.base-text.color-white[class*='color-'] {
+      color: var(--color-white);
+    }
+.base-text.color-grey-scale-50[class*='color-'] {
+      color: var(--color-grey-scale-50);
+    }
+.base-text.color-grey-scale-100[class*='color-'] {
+      color: var(--color-grey-scale-100);
+    }
+.base-text.color-grey-scale-200[class*='color-'] {
+      color: var(--color-grey-scale-200);
+    }
+.base-text.color-grey-scale-300[class*='color-'] {
+      color: var(--color-grey-scale-300);
+    }
+.base-text.color-grey-scale-400[class*='color-'] {
+      color: var(--color-grey-scale-400);
+    }
+.base-text.color-grey-scale-500[class*='color-'] {
+      color: var(--color-grey-scale-500);
+    }
+.base-text.color-grey-scale-600[class*='color-'] {
+      color: var(--color-grey-scale-600);
+    }
+.base-text.color-grey-scale-700[class*='color-'] {
+      color: var(--color-grey-scale-700);
+    }
+.base-text.color-grey-scale-800[class*='color-'] {
+      color: var(--color-grey-scale-800);
+    }
+.base-text.color-grey-scale-900[class*='color-'] {
+      color: var(--color-grey-scale-900);
+    }
+.base-text.color-purple-50[class*='color-'] {
+      color: var(--color-purple-50);
+    }
+.base-text.color-purple-100[class*='color-'] {
+      color: var(--color-purple-100);
+    }
+.base-text.color-purple-200[class*='color-'] {
+      color: var(--color-purple-200);
+    }
+.base-text.color-purple-300[class*='color-'] {
+      color: var(--color-purple-300);
+    }
+.base-text.color-purple-400[class*='color-'] {
+      color: var(--color-purple-400);
+    }
+.base-text.color-purple-500[class*='color-'] {
+      color: var(--color-purple-500);
+    }
+.base-text.color-purple-600[class*='color-'] {
+      color: var(--color-purple-600);
+    }
+.base-text.color-purple-700[class*='color-'] {
+      color: var(--color-purple-700);
+    }
+.base-text.color-purple-800[class*='color-'] {
+      color: var(--color-purple-800);
+    }
+.base-text.color-purple-900[class*='color-'] {
+      color: var(--color-purple-900);
+    }
+.base-text.color-accent-red-50[class*='color-'] {
+      color: var(--color-accent-red-50);
+    }
+.base-text.color-accent-red-100[class*='color-'] {
+      color: var(--color-accent-red-100);
+    }
+.base-text.color-accent-red-200[class*='color-'] {
+      color: var(--color-accent-red-200);
+    }
+.base-text.color-accent-red-300[class*='color-'] {
+      color: var(--color-accent-red-300);
+    }
+.base-text.color-accent-red-400[class*='color-'] {
+      color: var(--color-accent-red-400);
+    }
+.base-text.color-accent-red-500[class*='color-'] {
+      color: var(--color-accent-red-500);
+    }
+.base-text.color-accent-red-600[class*='color-'] {
+      color: var(--color-accent-red-600);
+    }
+.base-text.color-accent-red-700[class*='color-'] {
+      color: var(--color-accent-red-700);
+    }
+.base-text.color-accent-red-800[class*='color-'] {
+      color: var(--color-accent-red-800);
+    }
+.base-text.color-accent-red-900[class*='color-'] {
+      color: var(--color-accent-red-900);
+    }
+.base-text.color-accent-pink-50[class*='color-'] {
+      color: var(--color-accent-pink-50);
+    }
+.base-text.color-accent-pink-100[class*='color-'] {
+      color: var(--color-accent-pink-100);
+    }
+.base-text.color-accent-pink-200[class*='color-'] {
+      color: var(--color-accent-pink-200);
+    }
+.base-text.color-accent-pink-300[class*='color-'] {
+      color: var(--color-accent-pink-300);
+    }
+.base-text.color-accent-pink-400[class*='color-'] {
+      color: var(--color-accent-pink-400);
+    }
+.base-text.color-accent-pink-500[class*='color-'] {
+      color: var(--color-accent-pink-500);
+    }
+.base-text.color-accent-pink-600[class*='color-'] {
+      color: var(--color-accent-pink-600);
+    }
+.base-text.color-accent-pink-700[class*='color-'] {
+      color: var(--color-accent-pink-700);
+    }
+.base-text.color-accent-pink-800[class*='color-'] {
+      color: var(--color-accent-pink-800);
+    }
+.base-text.color-accent-pink-900[class*='color-'] {
+      color: var(--color-accent-pink-900);
+    }
+.base-text.color-accent-magenta-50[class*='color-'] {
+      color: var(--color-accent-magenta-50);
+    }
+.base-text.color-accent-magenta-100[class*='color-'] {
+      color: var(--color-accent-magenta-100);
+    }
+.base-text.color-accent-magenta-200[class*='color-'] {
+      color: var(--color-accent-magenta-200);
+    }
+.base-text.color-accent-magenta-300[class*='color-'] {
+      color: var(--color-accent-magenta-300);
+    }
+.base-text.color-accent-magenta-400[class*='color-'] {
+      color: var(--color-accent-magenta-400);
+    }
+.base-text.color-accent-magenta-500[class*='color-'] {
+      color: var(--color-accent-magenta-500);
+    }
+.base-text.color-accent-magenta-600[class*='color-'] {
+      color: var(--color-accent-magenta-600);
+    }
+.base-text.color-accent-magenta-700[class*='color-'] {
+      color: var(--color-accent-magenta-700);
+    }
+.base-text.color-accent-magenta-800[class*='color-'] {
+      color: var(--color-accent-magenta-800);
+    }
+.base-text.color-accent-magenta-900[class*='color-'] {
+      color: var(--color-accent-magenta-900);
+    }
+.base-text.color-accent-blue-50[class*='color-'] {
+      color: var(--color-accent-blue-50);
+    }
+.base-text.color-accent-blue-100[class*='color-'] {
+      color: var(--color-accent-blue-100);
+    }
+.base-text.color-accent-blue-200[class*='color-'] {
+      color: var(--color-accent-blue-200);
+    }
+.base-text.color-accent-blue-300[class*='color-'] {
+      color: var(--color-accent-blue-300);
+    }
+.base-text.color-accent-blue-400[class*='color-'] {
+      color: var(--color-accent-blue-400);
+    }
+.base-text.color-accent-blue-500[class*='color-'] {
+      color: var(--color-accent-blue-500);
+    }
+.base-text.color-accent-blue-600[class*='color-'] {
+      color: var(--color-accent-blue-600);
+    }
+.base-text.color-accent-blue-700[class*='color-'] {
+      color: var(--color-accent-blue-700);
+    }
+.base-text.color-accent-blue-800[class*='color-'] {
+      color: var(--color-accent-blue-800);
+    }
+.base-text.color-accent-blue-900[class*='color-'] {
+      color: var(--color-accent-blue-900);
+    }
+.base-text.color-accent-mint-50[class*='color-'] {
+      color: var(--color-accent-mint-50);
+    }
+.base-text.color-accent-mint-100[class*='color-'] {
+      color: var(--color-accent-mint-100);
+    }
+.base-text.color-accent-mint-200[class*='color-'] {
+      color: var(--color-accent-mint-200);
+    }
+.base-text.color-accent-mint-300[class*='color-'] {
+      color: var(--color-accent-mint-300);
+    }
+.base-text.color-accent-mint-400[class*='color-'] {
+      color: var(--color-accent-mint-400);
+    }
+.base-text.color-accent-mint-500[class*='color-'] {
+      color: var(--color-accent-mint-500);
+    }
+.base-text.color-accent-mint-600[class*='color-'] {
+      color: var(--color-accent-mint-600);
+    }
+.base-text.color-accent-mint-700[class*='color-'] {
+      color: var(--color-accent-mint-700);
+    }
+.base-text.color-accent-mint-800[class*='color-'] {
+      color: var(--color-accent-mint-800);
+    }
+.base-text.color-accent-mint-900[class*='color-'] {
+      color: var(--color-accent-mint-900);
+    }
+.base-text.color-accent-green-50[class*='color-'] {
+      color: var(--color-accent-green-50);
+    }
+.base-text.color-accent-green-100[class*='color-'] {
+      color: var(--color-accent-green-100);
+    }
+.base-text.color-accent-green-200[class*='color-'] {
+      color: var(--color-accent-green-200);
+    }
+.base-text.color-accent-green-300[class*='color-'] {
+      color: var(--color-accent-green-300);
+    }
+.base-text.color-accent-green-400[class*='color-'] {
+      color: var(--color-accent-green-400);
+    }
+.base-text.color-accent-green-500[class*='color-'] {
+      color: var(--color-accent-green-500);
+    }
+.base-text.color-accent-green-600[class*='color-'] {
+      color: var(--color-accent-green-600);
+    }
+.base-text.color-accent-green-700[class*='color-'] {
+      color: var(--color-accent-green-700);
+    }
+.base-text.color-accent-green-800[class*='color-'] {
+      color: var(--color-accent-green-800);
+    }
+.base-text.color-accent-green-900[class*='color-'] {
+      color: var(--color-accent-green-900);
+    }
+.base-text.color-accent-yellow-50[class*='color-'] {
+      color: var(--color-accent-yellow-50);
+    }
+.base-text.color-accent-yellow-100[class*='color-'] {
+      color: var(--color-accent-yellow-100);
+    }
+.base-text.color-accent-yellow-200[class*='color-'] {
+      color: var(--color-accent-yellow-200);
+    }
+.base-text.color-accent-yellow-300[class*='color-'] {
+      color: var(--color-accent-yellow-300);
+    }
+.base-text.color-accent-yellow-400[class*='color-'] {
+      color: var(--color-accent-yellow-400);
+    }
+.base-text.color-accent-yellow-500[class*='color-'] {
+      color: var(--color-accent-yellow-500);
+    }
+.base-text.color-accent-yellow-600[class*='color-'] {
+      color: var(--color-accent-yellow-600);
+    }
+.base-text.color-accent-yellow-700[class*='color-'] {
+      color: var(--color-accent-yellow-700);
+    }
+.base-text.color-accent-yellow-800[class*='color-'] {
+      color: var(--color-accent-yellow-800);
+    }
+.base-text.color-accent-yellow-900[class*='color-'] {
+      color: var(--color-accent-yellow-900);
+    }
+.base-text.color-accent-orange-50[class*='color-'] {
+      color: var(--color-accent-orange-50);
+    }
+.base-text.color-accent-orange-100[class*='color-'] {
+      color: var(--color-accent-orange-100);
+    }
+.base-text.color-accent-orange-200[class*='color-'] {
+      color: var(--color-accent-orange-200);
+    }
+.base-text.color-accent-orange-300[class*='color-'] {
+      color: var(--color-accent-orange-300);
+    }
+.base-text.color-accent-orange-400[class*='color-'] {
+      color: var(--color-accent-orange-400);
+    }
+.base-text.color-accent-orange-500[class*='color-'] {
+      color: var(--color-accent-orange-500);
+    }
+.base-text.color-accent-orange-600[class*='color-'] {
+      color: var(--color-accent-orange-600);
+    }
+.base-text.color-accent-orange-700[class*='color-'] {
+      color: var(--color-accent-orange-700);
+    }
+.base-text.color-accent-orange-800[class*='color-'] {
+      color: var(--color-accent-orange-800);
+    }
+.base-text.color-accent-orange-900[class*='color-'] {
+      color: var(--color-accent-orange-900);
+    }
+.component-loading-inline {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+  }
+/* components/loading/overlay-loading/overlay-loading-style.css */
+.page-loading-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.page-loading-backdrop { position: absolute; inset: 0; }
+.page-loading-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+/* 기본 스피너(20px)를 확대 */
+.page-loading-indicator { transform: scale(3.2); transform-origin: center; }
+.page-loading-text { position: relative; }
+.component-loading-container {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+}
+.loading-indicator-ring {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.loading-indicator-single-ring {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  /* 기본값은 white, 상위에서 --spinner-border-color 주입 */
+  border-color: var(--spinner-border-color, var(--color-white)) transparent transparent transparent;
+}
+/* nth-child 지연은 그대로 CSS or 인라인 중 하나만 사용한다면, 아래는 제거 가능 (지금은 인라인 사용 중) */
+/*
+.loading-indicator-single-ring:nth-child(1) { animation-delay: -0.45s; }
+.loading-indicator-single-ring:nth-child(2) { animation-delay: -0.3s; }
+.loading-indicator-single-ring:nth-child(3) { animation-delay: -0.15s; }
+.loading-indicator-single-ring:nth-child(4) { animation-delay: 0s; }
+*/
+@keyframes lds-ring {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.base-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 30px;
+  border-radius: 6px;
+}
+.base-modal.modal-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    background-color: var(--color-white);
+  }
+.base-modal.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9998;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * modal-with-double-button                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.modal-with-double-button-close-button {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+}
+.modal-with-double-button-container.size-s {
+    width: 400px;
+  }
+.modal-with-double-button-container.size-m {
+    width: 450px;
+  }
+.modal-with-double-button-container.size-l {
+    width: 500px;
+  }
+.modal-with-double-button-title-icon {
+  margin-bottom: 20px;
+}
+.modal-with-double-button-title {
+  margin-bottom: 4px;
+}
+.modal-with-double-button-content {
+  margin-top: 20px;
+}
+.modal-with-double-button-close {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  margin-top: 30px;
+}
+.modal-with-double-button-close.row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+.modal-with-double-button-close.row  > * {
+      flex: 1;
+    }
+.modal-with-double-button-close.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+.modal-with-double-button-close.column  > * {
+      width: 100%;
+    }
+.radio:where(.radio-group) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+.radio:where(.radio-button) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--color-grey-scale-200);
+  }
+.radio:where(.radio-indicator) {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--color-purple-900);
+  }
+.radio:where(.radio-label) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+  }
+.base-table {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.base-table .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+.base-table .body {
+    width: 100%;
+  }
+.base-table .row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+.base-table .cell {
+    text-align: start;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * data-table                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.data-table {
+  position: relative;
+  width: 100%;
+}
+.data-table-header {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  z-index: 3;
+  border-bottom: 1px solid #e4e4e7;
+}
+.data-table-row {
+  position: relative;
+  border-bottom: 1px solid var(--color-grey-scale-200);
+}
+.data-table-row .fixed {
+    position: sticky;
+    background-color: #fff;
+    z-index: 2;
+  }
+:is(.data-table-row .fixed) > * {
+      position: relative;
+      z-index: 1;
+    }
+.body .data-table-row:hover {
+  background-color: #f5f5f5;
+}
+:is(.body .data-table-row:hover) .fixed {
+    background-color: #f5f5f5;
+  }
+.fixed-cell {
+  position: sticky;
+  left: 0;
+}
+.base-text-field.input {
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-medium);
+  }
+.base-text-field.input::-moz-placeholder {
+      color: var(--color-grey-scale-400);
+    }
+.base-text-field.input::placeholder {
+      color: var(--color-grey-scale-400);
+    }
+.base-text-field.input:-webkit-autofill,.base-text-field.input:-webkit-autofill:hover,.base-text-field.input:-webkit-autofill:focus,.base-text-field.input:-webkit-autofill:active {
+      box-shadow: 0 0 0px 1000px transparent inset;
+      -webkit-transition: background-color 5000s ease-in-out 0s;
+      transition: background-color 5000s ease-in-out 0s;
+    }
+/***************************************************************************************************
+ *                                                                                                 *
+ * base-text-field                                                                                 *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.text-field-title {
+  margin-bottom: 8px;
+}
+.text-field-input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+
+  padding: 0 14px;
+
+  border-radius: 4px;
+  border: 1px solid var(--color-grey-scale-300);
+}
+.text-field-input-wrapper.size-m {
+    height: 40px;
+  }
+.text-field-input-wrapper.size-l {
+    height: 50px;
+  }
+.text-field-input-wrapper:has([data-disabled='true']) {
+    border-color: var(--color-grey-scale-300);
+    background-color: var(--color-grey-scale-100);
+  }
+.text-field-input-wrapper:focus-within {
+    border: 1px solid var(--color-purple-900);
+  }
+.text-field-input-wrapper  > input {
+    width: 100%;
+  }
+.text-field-helper-text {
+  margin-top: 4px;
+}
+.text-field-helper-text.error {
+    color: var(--color-accent-red-500);
+  }
+.base-tooltip {
+  z-index: 3;
+}
+.base-tooltip.content {
+    text-align: center;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * tooltip                                                                                         *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.tooltip-trigger {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.tooltip-content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 10px;
+
+  background-color: var(--color-purple-900);
+  color: var(--color-white);
+  border-radius: 6px;
+  padding: 12px;
+
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-regular);
+
+  position: relative;
+}
+.tooltip-content::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+.tooltip-content.direction-top {
+    transform: translateY(-10px);
+  }
+.tooltip-content.direction-top::before {
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 8px 8px 0 8px;
+      border-color: var(--color-purple-900) transparent transparent transparent;
+    }
+.tooltip-content.direction-bottom {
+    transform: translateY(10px);
+  }
+.tooltip-content.direction-bottom::before {
+      top: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 0 8px 8px 8px;
+      border-color: transparent transparent var(--color-purple-900) transparent;
+    }
+.tooltip-content.direction-left {
+    transform: translateX(-10px);
+  }
+.tooltip-content.direction-left::before {
+      right: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 8px 0 8px 8px;
+      border-color: transparent transparent transparent var(--color-purple-900);
+    }
+.tooltip-content.direction-right {
+    transform: translateX(10px);
+  }
+.tooltip-content.direction-right::before {
+      left: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 8px 8px 8px 0;
+      border-color: transparent var(--color-purple-900) transparent transparent;
+    }