@nurihaus/web-design-system 2.0.9 → 3.0.0

package/dist/styles.css

@@ -0,0 +1,1749 @@
+
+@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;
+
+  &.avatar-image {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+  & .avatar-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    & svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+/***************************************************************************************************
+*                                                                                                 *
+* avatar                                                                                          *
+*                                                                                                 *
+***************************************************************************************************/
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.size-xl {
+    width: 124px;
+    height: 124px;
+    border: 1px solid #e4e4e7;
+
+    &.badge-option {
+      width: 48px;
+      height: 48px;
+      width: 30px;
+      height: 30px;
+      width: 24px;
+      height: 24px;
+      width: 18px;
+      height: 18px;
+    }
+    height: 60px;
+
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+    font-weight: var(--font-weight-bold)
+  }
+
+  &.size-l {
+    width: 74px;
+    height: 74px;
+    border: 1px solid #e4e4e7;
+    height: 48px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+    height: 54px;
+
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    font-weight: var(--font-weight-bold);
+    width: 24px;
+    height: 24px;
+    height: 50px;
+    width: 500px;
+    height: 50px
+  }
+
+  &.size-m {
+    width: 58px;
+    height: 58px;
+    border: 1px solid #e4e4e7;
+    height: 40px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+    height: 50px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+    width: 20px;
+    height: 20px;
+    height: 40px;
+    width: 450px;
+    height: 40px
+  }
+
+  &.size-s {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #e4e4e7;
+    height: 32px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-bold);
+    height: 40px;
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-semibold);
+    width: 18px;
+    height: 18px;
+    width: 400px
+  }
+}
+.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);
+
+  &.size-r {
+    height: 36px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+    height: 48px;
+
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  &.size-sm {
+    height: 28px;
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-bold);
+  }
+
+  &.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;
+
+  > 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;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+}
+/***************************************************************************************************
+ *                                                                                                 *
+ * cta-button                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.cta-button {
+  border-radius: 6px;
+
+  &.variant-primary {
+    background-color: var(--color-purple-900);
+    border: 1px solid var(--color-purple-900);
+    color: var(--color-white);
+
+    &:not(:disabled):hover {
+      background-color: var(--color-purple-900);
+      border-color: var(--color-purple-900);
+      color: var(--color-white);
+      background-color: var(--color-purple-100);
+      border-color: var(--color-purple-100);
+      color: var(--color-purple-900);
+      background-color: var(--color-white);
+      border-color: var(--color-purple-900);
+      color: var(--color-purple-900);
+      background-color: var(--color-grey-scale-100);
+      border: 1px solid var(--color-grey-scale-100);
+      color: var(--color-purple-900);
+      background-color: var(--color-accent-red-700);
+      border-color: var(--color-accent-red-700);
+      color: var(--color-white);
+    }
+  }
+
+  &.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900)
+  }
+
+  &.variant-ghost {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-grey-scale-300);
+    color: var(--color-purple-900)
+  }
+
+  &.variant-neutral {
+    background-color: var(--color-white);
+    color: var(--color-purple-900)
+  }
+
+  &.variant-confirm {
+    background-color: var(--color-accent-red-500);
+    border: 1px solid var(--color-accent-red-500);
+    color: var(--color-white)
+  }
+
+  &.variant-outlined {
+    background-color: var(--color-white);
+    border: 1px solid var(--color-accent-red-700);
+    color: var(--color-accent-red-700);
+  }
+
+  &.size-xs {
+    height: 30px;
+
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  &:disabled {
+    background-color: var(--color-grey-scale-200);
+    color: var(--color-white);
+    cursor: not-allowed;
+    border: none;
+    background-color: var(--color-grey-scale-100);
+    color: var(--color-grey-scale-400);
+    cursor: not-allowed;
+  }
+}
+.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);
+  }
+
+  width: 100%;
+  height: 100%;
+
+  &[data-state='unchecked'] {
+    background-color: #fff;
+  }
+
+  &[data-state='checked'] {
+    background-color: var(--color-purple-900);
+  }
+
+  &[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%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+}
+/***************************************************************************************************
+ *                                                                                                 *
+ * collapsible-menu                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.collapsible-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.collapsible-menu.size-m {
+  .collapsible-menu-row {
+    height: 40px;
+    height: 48px;
+  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));
+
+  &:hover {
+    background-color: var(--collapsible-menu-hover-bg-color, var(--color-grey-scale-100));
+  }
+
+  &.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);
+  }
+
+  &:disabled,
+  &[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;
+}
+/***************************************************************************************************
+ *                                                                                                 *
+ * drop-down-single                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.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);
+
+  &:focus {
+    border-color: var(--color-purple-900);
+  }
+
+  &[data-placeholder] {
+    .drop-down-single-icon {
+      color: var(--color-grey-scale-400);
+      color: var(--color-black);
+    }
+
+    svg {
+      color: var(--color-grey-scale-400);
+      color: var(--color-black);
+    }
+  }
+
+  &[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;
+
+  ::-moz-placeholder {
+    color: var(--color-grey-scale-400);
+  }
+
+  ::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;
+
+  &[data-highlighted] {
+    background-color: var(--color-purple-50);
+    outline: none;
+  }
+}
+.base-text {
+  &:where(.xsm) {
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+  }
+  &:where(.sm) {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+  &:where(.base) {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+  &:where(.lg) {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+  &:where(.xl) {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+  }
+  &:where(.t-2xl) {
+    font-size: var(--font-size-2xl);
+    line-height: var(--line-height-2xl);
+  }
+  &:where(.t-3xl) {
+    font-size: var(--font-size-3xl);
+    line-height: var(--line-height-3xl);
+  }
+  &:where(.t-4xl) {
+    font-size: var(--font-size-4xl);
+    line-height: var(--line-height-4xl);
+  }
+  &:where(.t-5xl) {
+    font-size: var(--font-size-5xl);
+    line-height: var(--line-height-5xl);
+  }
+  &:where(.t-6xl) {
+    font-size: var(--font-size-6xl);
+    line-height: var(--line-height-6xl);
+  }
+
+  &:where(.regular) {
+    font-weight: var(--font-weight-regular);
+  }
+  &:where(.medium) {
+    font-weight: var(--font-weight-medium);
+  }
+  &:where(.semibold) {
+    font-weight: var(--font-weight-semibold);
+  }
+  &:where(.bold) {
+    font-weight: var(--font-weight-bold);
+  }
+  &:where(.extrabold) {
+    font-weight: var(--font-weight-extrabold);
+  }
+
+  &[class*='textAlign-'] {
+    &.textAlign-left {
+      text-align: left;
+    }
+    &.textAlign-center {
+      text-align: center;
+    }
+  }
+
+  &[class*='textDecoration-'] {
+    &.textDecoration-underline {
+      text-decoration: underline;
+    }
+    &.textDecoration-none {
+      text-decoration: none;
+    }
+    &.textDecoration-lineThrough {
+      text-decoration: line-through;
+    }
+    &.textDecoration-overline {
+      text-decoration: overline;
+    }
+    &.textDecoration-blink {
+      text-decoration: blink;
+    }
+  }
+
+  &[class*='wordBreak-'] {
+    &.wordBreak-normal {
+      word-break: normal;
+    }
+    &.wordBreak-breakAll {
+      word-break: break-all;
+    }
+    &.wordBreak-breakWord {
+      word-break: break-word;
+    }
+    &.wordBreak-keepAll {
+      word-break: keep-all;
+    }
+    &.wordBreak-keepWord {
+      word-break: keep-word;
+    }
+    &.wordBreak-breakSpaces {
+      word-break: break-spaces;
+    }
+    &.wordBreak-all {
+      word-break: all;
+    }
+  }
+
+  &[class*='whiteSpace-'] {
+    &.whiteSpace-normal {
+      white-space: normal;
+    }
+    &.whiteSpace-nowrap {
+      white-space: nowrap;
+    }
+    &.whiteSpace-pre {
+      white-space: pre;
+    }
+    &.whiteSpace-preLine {
+      white-space: pre-line;
+    }
+    &.whiteSpace-preWrap {
+      white-space: pre-wrap;
+    }
+  }
+
+  &[class*='color-'] {
+    &.color-black {
+      color: var(--color-black);
+    }
+    &.color-white {
+      color: var(--color-white);
+    }
+    &.color-grey-scale-50 {
+      color: var(--color-grey-scale-50);
+    }
+    &.color-grey-scale-100 {
+      color: var(--color-grey-scale-100);
+    }
+    &.color-grey-scale-200 {
+      color: var(--color-grey-scale-200);
+    }
+    &.color-grey-scale-300 {
+      color: var(--color-grey-scale-300);
+    }
+    &.color-grey-scale-400 {
+      color: var(--color-grey-scale-400);
+    }
+    &.color-grey-scale-500 {
+      color: var(--color-grey-scale-500);
+    }
+    &.color-grey-scale-600 {
+      color: var(--color-grey-scale-600);
+    }
+    &.color-grey-scale-700 {
+      color: var(--color-grey-scale-700);
+    }
+    &.color-grey-scale-800 {
+      color: var(--color-grey-scale-800);
+    }
+    &.color-grey-scale-900 {
+      color: var(--color-grey-scale-900);
+    }
+    &.color-purple-50 {
+      color: var(--color-purple-50);
+    }
+    &.color-purple-100 {
+      color: var(--color-purple-100);
+    }
+    &.color-purple-200 {
+      color: var(--color-purple-200);
+    }
+    &.color-purple-300 {
+      color: var(--color-purple-300);
+    }
+    &.color-purple-400 {
+      color: var(--color-purple-400);
+    }
+    &.color-purple-500 {
+      color: var(--color-purple-500);
+    }
+    &.color-purple-600 {
+      color: var(--color-purple-600);
+    }
+    &.color-purple-700 {
+      color: var(--color-purple-700);
+    }
+    &.color-purple-800 {
+      color: var(--color-purple-800);
+    }
+    &.color-purple-900 {
+      color: var(--color-purple-900);
+    }
+    &.color-accent-red-50 {
+      color: var(--color-accent-red-50);
+    }
+    &.color-accent-red-100 {
+      color: var(--color-accent-red-100);
+    }
+    &.color-accent-red-200 {
+      color: var(--color-accent-red-200);
+    }
+    &.color-accent-red-300 {
+      color: var(--color-accent-red-300);
+    }
+    &.color-accent-red-400 {
+      color: var(--color-accent-red-400);
+    }
+    &.color-accent-red-500 {
+      color: var(--color-accent-red-500);
+    }
+    &.color-accent-red-600 {
+      color: var(--color-accent-red-600);
+    }
+    &.color-accent-red-700 {
+      color: var(--color-accent-red-700);
+    }
+    &.color-accent-red-800 {
+      color: var(--color-accent-red-800);
+    }
+    &.color-accent-red-900 {
+      color: var(--color-accent-red-900);
+    }
+    &.color-accent-pink-50 {
+      color: var(--color-accent-pink-50);
+    }
+    &.color-accent-pink-100 {
+      color: var(--color-accent-pink-100);
+    }
+    &.color-accent-pink-200 {
+      color: var(--color-accent-pink-200);
+    }
+    &.color-accent-pink-300 {
+      color: var(--color-accent-pink-300);
+    }
+    &.color-accent-pink-400 {
+      color: var(--color-accent-pink-400);
+    }
+    &.color-accent-pink-500 {
+      color: var(--color-accent-pink-500);
+    }
+    &.color-accent-pink-600 {
+      color: var(--color-accent-pink-600);
+    }
+    &.color-accent-pink-700 {
+      color: var(--color-accent-pink-700);
+    }
+    &.color-accent-pink-800 {
+      color: var(--color-accent-pink-800);
+    }
+    &.color-accent-pink-900 {
+      color: var(--color-accent-pink-900);
+    }
+    &.color-accent-magenta-50 {
+      color: var(--color-accent-magenta-50);
+    }
+    &.color-accent-magenta-100 {
+      color: var(--color-accent-magenta-100);
+    }
+    &.color-accent-magenta-200 {
+      color: var(--color-accent-magenta-200);
+    }
+    &.color-accent-magenta-300 {
+      color: var(--color-accent-magenta-300);
+    }
+    &.color-accent-magenta-400 {
+      color: var(--color-accent-magenta-400);
+    }
+    &.color-accent-magenta-500 {
+      color: var(--color-accent-magenta-500);
+    }
+    &.color-accent-magenta-600 {
+      color: var(--color-accent-magenta-600);
+    }
+    &.color-accent-magenta-700 {
+      color: var(--color-accent-magenta-700);
+    }
+    &.color-accent-magenta-800 {
+      color: var(--color-accent-magenta-800);
+    }
+    &.color-accent-magenta-900 {
+      color: var(--color-accent-magenta-900);
+    }
+    &.color-accent-blue-50 {
+      color: var(--color-accent-blue-50);
+    }
+    &.color-accent-blue-100 {
+      color: var(--color-accent-blue-100);
+    }
+    &.color-accent-blue-200 {
+      color: var(--color-accent-blue-200);
+    }
+    &.color-accent-blue-300 {
+      color: var(--color-accent-blue-300);
+    }
+    &.color-accent-blue-400 {
+      color: var(--color-accent-blue-400);
+    }
+    &.color-accent-blue-500 {
+      color: var(--color-accent-blue-500);
+    }
+    &.color-accent-blue-600 {
+      color: var(--color-accent-blue-600);
+    }
+    &.color-accent-blue-700 {
+      color: var(--color-accent-blue-700);
+    }
+    &.color-accent-blue-800 {
+      color: var(--color-accent-blue-800);
+    }
+    &.color-accent-blue-900 {
+      color: var(--color-accent-blue-900);
+    }
+    &.color-accent-mint-50 {
+      color: var(--color-accent-mint-50);
+    }
+    &.color-accent-mint-100 {
+      color: var(--color-accent-mint-100);
+    }
+    &.color-accent-mint-200 {
+      color: var(--color-accent-mint-200);
+    }
+    &.color-accent-mint-300 {
+      color: var(--color-accent-mint-300);
+    }
+    &.color-accent-mint-400 {
+      color: var(--color-accent-mint-400);
+    }
+    &.color-accent-mint-500 {
+      color: var(--color-accent-mint-500);
+    }
+    &.color-accent-mint-600 {
+      color: var(--color-accent-mint-600);
+    }
+    &.color-accent-mint-700 {
+      color: var(--color-accent-mint-700);
+    }
+    &.color-accent-mint-800 {
+      color: var(--color-accent-mint-800);
+    }
+    &.color-accent-mint-900 {
+      color: var(--color-accent-mint-900);
+    }
+    &.color-accent-green-50 {
+      color: var(--color-accent-green-50);
+    }
+    &.color-accent-green-100 {
+      color: var(--color-accent-green-100);
+    }
+    &.color-accent-green-200 {
+      color: var(--color-accent-green-200);
+    }
+    &.color-accent-green-300 {
+      color: var(--color-accent-green-300);
+    }
+    &.color-accent-green-400 {
+      color: var(--color-accent-green-400);
+    }
+    &.color-accent-green-500 {
+      color: var(--color-accent-green-500);
+    }
+    &.color-accent-green-600 {
+      color: var(--color-accent-green-600);
+    }
+    &.color-accent-green-700 {
+      color: var(--color-accent-green-700);
+    }
+    &.color-accent-green-800 {
+      color: var(--color-accent-green-800);
+    }
+    &.color-accent-green-900 {
+      color: var(--color-accent-green-900);
+    }
+    &.color-accent-yellow-50 {
+      color: var(--color-accent-yellow-50);
+    }
+    &.color-accent-yellow-100 {
+      color: var(--color-accent-yellow-100);
+    }
+    &.color-accent-yellow-200 {
+      color: var(--color-accent-yellow-200);
+    }
+    &.color-accent-yellow-300 {
+      color: var(--color-accent-yellow-300);
+    }
+    &.color-accent-yellow-400 {
+      color: var(--color-accent-yellow-400);
+    }
+    &.color-accent-yellow-500 {
+      color: var(--color-accent-yellow-500);
+    }
+    &.color-accent-yellow-600 {
+      color: var(--color-accent-yellow-600);
+    }
+    &.color-accent-yellow-700 {
+      color: var(--color-accent-yellow-700);
+    }
+    &.color-accent-yellow-800 {
+      color: var(--color-accent-yellow-800);
+    }
+    &.color-accent-yellow-900 {
+      color: var(--color-accent-yellow-900);
+    }
+    &.color-accent-orange-50 {
+      color: var(--color-accent-orange-50);
+    }
+    &.color-accent-orange-100 {
+      color: var(--color-accent-orange-100);
+    }
+    &.color-accent-orange-200 {
+      color: var(--color-accent-orange-200);
+    }
+    &.color-accent-orange-300 {
+      color: var(--color-accent-orange-300);
+    }
+    &.color-accent-orange-400 {
+      color: var(--color-accent-orange-400);
+    }
+    &.color-accent-orange-500 {
+      color: var(--color-accent-orange-500);
+    }
+    &.color-accent-orange-600 {
+      color: var(--color-accent-orange-600);
+    }
+    &.color-accent-orange-700 {
+      color: var(--color-accent-orange-700);
+    }
+    &.color-accent-orange-800 {
+      color: var(--color-accent-orange-800);
+    }
+    &.color-accent-orange-900 {
+      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;
+
+  &.modal-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    background-color: var(--color-white);
+  }
+
+  &.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-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;
+
+  &.row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+
+    > * {
+      flex: 1;
+      width: 100%;
+    }
+  }
+
+  &.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px
+  }
+}
+.radio {
+  &:where(.radio-group) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  &: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);
+  }
+  &:where(.radio-indicator) {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--color-purple-900);
+  }
+  &: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;
+
+  .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .body {
+    width: 100%;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .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);
+
+  .fixed {
+    position: sticky;
+    background-color: #fff;
+    z-index: 2;
+
+    & > * {
+      position: relative;
+      z-index: 1;
+    }
+    background-color: #f5f5f5
+  }
+}
+.body .data-table-row:hover {
+  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);
+
+    &::-moz-placeholder {
+      color: var(--color-grey-scale-400);
+    }
+
+    &::placeholder {
+      color: var(--color-grey-scale-400);
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-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);
+
+  &:has([data-disabled='true']) {
+    border-color: var(--color-grey-scale-300);
+    background-color: var(--color-grey-scale-100);
+  }
+
+  &:focus-within {
+    border: 1px solid var(--color-purple-900);
+  }
+
+  > input {
+    width: 100%;
+  }
+}
+.text-field-helper-text {
+  margin-top: 4px;
+
+  &.error {
+    color: var(--color-accent-red-500);
+  }
+}
+.base-tooltip {
+  z-index: 3;
+  &.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;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 8px 8px 0 8px;
+      border-color: var(--color-purple-900) transparent transparent transparent;
+      top: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 0 8px 8px 8px;
+      border-color: transparent transparent var(--color-purple-900) transparent;
+      right: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 8px 0 8px 8px;
+      border-color: transparent transparent transparent var(--color-purple-900);
+      left: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 8px 8px 8px 0;
+      border-color: transparent var(--color-purple-900) transparent transparent;
+  }
+
+  &.direction-top {
+    transform: translateY(-10px)
+  }
+
+  &.direction-bottom {
+    transform: translateY(10px)
+  }
+
+  &.direction-left {
+    transform: translateX(-10px)
+  }
+
+  &.direction-right {
+    transform: translateX(10px)
+  }
+}