@nurihaus/web-design-system 3.0.1 → 3.0.3

package/dist/styles.css

@@ -1,8 +1,5 @@
-
-@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');
-/* 토큰 + 글꼴 + 리셋 + 유틸리티 + 컴포넌트. 디자인 시스템 컴포넌트를 쓸 때 가져온다. */
+/* 토큰 + 글꼴 스택(.nuri-theme) + 리셋 + 유틸리티 + 컴포넌트. 디자인 시스템 컴포넌트를 쓸 때 가져온다.
+   글꼴 파일은 불러오지 않는다. 앱이 불러온다. */
 /* 변수만. 이것만 가져와도 화면이 바뀌지 않는다. CSS Modules 에서 var() 로 쓴다. */
 /* tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens` */
 :root {
@@ -155,6 +152,74 @@
   --line-height-4xl: 43px;
   --line-height-5xl: 66px;
   --line-height-6xl: 82px;
+  /* 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field */
+  --control-height-xs: 30px;
+  --control-height-s: 40px;
+  --control-height-m: 50px;
+  --control-height-l: 54px;
+  --control-height-xl: 60px;
+
+  /* 라벨: badge */
+  --label-height-xs: 28px;
+  --label-height-s: 32px;
+  --label-height-m: 36px;
+  --label-height-l: 40px;
+  --label-height-xl: 48px;
+
+  /* 메뉴 행: collapsible-menu, drop-down 항목 */
+  --menu-row-height-s: 40px;
+  --menu-row-height-m: 48px;
+  --drop-down-item-height: 46px;
+
+  /* 정사각 */
+  --checkbox-size-s: 18px;
+  --checkbox-size-m: 20px;
+  --checkbox-size-l: 24px;
+  --radio-size: 18px;
+  --radio-dot-size: 8px;
+  --avatar-size-s: 40px;
+  --avatar-size-m: 58px;
+  --avatar-size-l: 74px;
+  --avatar-size-xl: 124px;
+  --avatar-badge-size-s: 18px;
+  --avatar-badge-size-m: 24px;
+  --avatar-badge-size-l: 30px;
+  --avatar-badge-size-xl: 48px;
+
+  /* 폭 */
+  --modal-width-s: 400px;
+  --modal-width-m: 450px;
+  --modal-width-l: 500px;
+
+  /* 그 밖의 치수 */
+  --icon-size-s: 18px;
+  --icon-size-m: 20px;
+  --icon-size-l: 24px;
+  --tooltip-arrow: 8px;
+  --spinner-stroke: 3px;
+  --tab-indicator-thickness: 3px;
+  --checkbox-border: 1.5px;
+  --hairline: 1px;
+
+  /* 그림자 */
+  --shadow-popover: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 */
+  --z-base: 0;
+  --z-raised: 1;
+  --z-sticky: 2;
+  --z-sticky-header: 3;
+  --z-tooltip: 3;
+  --z-popover: 5;
+  --z-overlay: 9998;
+  --z-modal: 9999;
+
+  /* 모션 */
+  --motion-fast: 160ms;
+  --motion-base: 300ms;
+  --motion-ease: ease;
+  --spinner-duration: 1.2s;
+  --spinner-ease: cubic-bezier(0.5, 0, 0.5, 1);
 }
 /* semantic: app */
 :root, :root[data-ds-theme='app'] {
@@ -233,6 +298,11 @@
   --button-size-l: 54;
   --button-size-xl: 60;
 }
+/*
+ * 크기·두께·레이어·모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
+ * 디자이너가 숫자를 바꾸는 곳은 여기다. 컴포넌트 CSS 는 숫자를 쓰지 않고 이 변수를 쓴다(빌드가 검사).
+ * 크기 이름은 xs · s · m · l · xl 다섯 개다. 컴포넌트는 그중 지원하는 것만 고른다.
+ */
 .nuri-theme {
   --cursor-button: pointer;
   --cursor-disabled: not-allowed;
@@ -256,15 +326,11 @@
     'Noto Color Emoji',
     sans-serif;
 }
-/* 웹폰트와 기본 글꼴. 토큰이 아니라 손으로 유지한다. */
 /*
- * 글꼴은 `:root` 에 걸지 않는다. 토큰만 가져다 쓰는 앱의 글꼴을 뺏지 않기 위해서다.
- * 디자인 시스템의 글꼴을 원하면 이 클래스를 붙인다.
+ * 글꼴 스택. 토큰이 아니라 손으로 유지한다.
+ * 웹폰트 파일은 불러오지 않는다. 앱이 Pretendard 를 불러왔으면 그것을, 아니면 시스템 글꼴을 쓴다.
+ * `:root` 에 걸지 않는다. 토큰만 가져다 쓰는 앱의 글꼴을 뺏지 않기 위해서다.
  */
-.nuri-placeholder {
-  color: var(--color-grey-scale-400);
-}
-/* Reset */
 /* 모든 요소의 마진과 패딩 제거 */
 * {
   margin: 0;
@@ -310,6 +376,13 @@ p {
   margin-top: 0;
   margin-bottom: 0;
 }
+/* 유틸리티 + 컴포넌트 스타일. 토큰·글꼴·리셋은 없다.
+   글꼴을 앱이 직접 관리할 때 tokens.css 와 함께 가져온다. 컴포넌트 글자는 앱의 글꼴을 물려받는다. */
+/* 컴포넌트 글자는 앱의 글꼴을 물려받는다. <button> 처럼 브라우저가 글꼴을 따로 주는 요소도 포함한다.
+   :where 로 우선순위를 0 으로 둔다. styles.css 에서는 token/font-face.css 의 .nuri-theme 글꼴이 이긴다. */
+:where(.nuri-theme) {
+  font-family: inherit;
+}
 /* Utility */
 .nuri-display-flex {
   display: flex;
@@ -460,88 +533,99 @@ p {
 * avatar                                                                                          *
 *                                                                                                 *
 ***************************************************************************************************/
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+}
 .avatar {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .avatar.size-xl {
-    width: 124px;
-    height: 124px;
-    border: 1px solid #e4e4e7;
+    width: var(--avatar-size-xl);
+    height: var(--avatar-size-xl);
+    border: var(--hairline) solid var(--color-grey-scale-200);
   }
-.avatar.size-xl.badge-option {
-      width: 48px;
-      height: 48px;
-    }
 .avatar.size-l {
-    width: 74px;
-    height: 74px;
-    border: 1px solid #e4e4e7;
+    width: var(--avatar-size-l);
+    height: var(--avatar-size-l);
+    border: var(--hairline) solid var(--color-grey-scale-200);
   }
-.avatar.size-l.badge-option {
-      width: 30px;
-      height: 30px;
-    }
 .avatar.size-m {
-    width: 58px;
-    height: 58px;
-    border: 1px solid #e4e4e7;
+    width: var(--avatar-size-m);
+    height: var(--avatar-size-m);
+    border: var(--hairline) solid var(--color-grey-scale-200);
   }
-.avatar.size-m.badge-option {
-      width: 24px;
-      height: 24px;
-    }
 .avatar.size-s {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #e4e4e7;
+    width: var(--avatar-size-s);
+    height: var(--avatar-size-s);
+    border: var(--hairline) solid var(--color-grey-scale-200);
+  }
+.avatar-badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-4);
+  border-radius: var(--radius-full);
+  border: var(--hairline) solid var(--color-grey-scale-200);
+}
+.avatar-badge.size-xl {
+    width: var(--avatar-badge-size-xl);
+    height: var(--avatar-badge-size-xl);
+  }
+.avatar-badge.size-l {
+    width: var(--avatar-badge-size-l);
+    height: var(--avatar-badge-size-l);
+  }
+.avatar-badge.size-m {
+    width: var(--avatar-badge-size-m);
+    height: var(--avatar-badge-size-m);
+  }
+.avatar-badge.size-s {
+    width: var(--avatar-badge-size-s);
+    height: var(--avatar-badge-size-s);
   }
-.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);
+  gap: var(--spacing-4);
+  border-radius: var(--radius-full);
 }
-.base-badge.size-l {
-    height: 48px;
+.base-badge.size-xl {
+    height: var(--label-height-xl);
 
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     font-weight: var(--font-weight-semibold);
   }
-.base-badge.size-m {
-    height: 40px;
+.base-badge.size-l {
+    height: var(--label-height-l);
 
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     font-weight: var(--font-weight-semibold);
   }
-.base-badge.size-r {
-    height: 36px;
+.base-badge.size-m {
+    height: var(--label-height-m);
 
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     font-weight: var(--font-weight-semibold);
   }
 .base-badge.size-s {
-    height: 32px;
+    height: var(--label-height-s);
 
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     font-weight: var(--font-weight-bold);
   }
-.base-badge.size-sm {
-    height: 28px;
+.base-badge.size-xs {
+    height: var(--label-height-xs);
 
     font-size: var(--font-size-xsm);
     line-height: var(--line-height-xsm);
@@ -552,7 +636,7 @@ p {
     align-items: center;
     justify-content: space-between;
 
-    padding: 0 20px;
+    padding: 0 var(--spacing-20);
   }
 /***************************************************************************************************
 *                                                                                                 *
@@ -564,7 +648,7 @@ p {
   align-items: center;
   justify-content: center;
 
-  border-width: 1px;
+  border-width: var(--hairline);
   border-style: solid;
 }
 /***************************************************************************************************
@@ -576,9 +660,9 @@ p {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--spacing-4);
 
-  border-width: 1px;
+  border-width: var(--hairline);
   border-style: solid;
 }
 /***************************************************************************************************
@@ -591,19 +675,45 @@ p {
   align-items: center;
   justify-content: space-between;
 
-  padding: 0 20px;
+  padding: 0 var(--spacing-20);
 }
 .icon-text-option  > span {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--spacing-4);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * variant                                                                                         *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.variant-neutral:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border-color: transparent;
+  }
+.variant-primary:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-purple-900);
+    background-color: var(--color-purple-50);
+    border-color: transparent;
+  }
+.variant-danger:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-accent-red-700);
+    background-color: var(--color-accent-red-50);
+    border-color: transparent;
+  }
+/* icon-text-option 은 테두리가 없는 모양이라 두께·스타일까지 여기서 준다. */
+.variant-outlined:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-black);
+    background-color: var(--color-white);
+    border: var(--hairline) solid var(--color-grey-scale-300);
   }
 .base-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
-  border-radius: 6px;
+  gap: var(--spacing-10);
+  border-radius: var(--radius-6);
   border: none;
   cursor: pointer;
 }
@@ -617,11 +727,11 @@ p {
  *                                                                                                 *
  ***************************************************************************************************/
 .cta-button {
-  border-radius: 6px;
+  border-radius: var(--radius-6);
 }
 .cta-button.variant-primary {
     background-color: var(--color-purple-900);
-    border: 1px solid var(--color-purple-900);
+    border: var(--hairline) solid var(--color-purple-900);
     color: var(--color-white);
   }
 .cta-button.variant-primary:not(:disabled):hover {
@@ -640,7 +750,7 @@ p {
     }
 .cta-button.variant-ghost {
     background-color: var(--color-white);
-    border: 1px solid var(--color-grey-scale-300);
+    border: var(--hairline) solid var(--color-grey-scale-300);
     color: var(--color-purple-900);
   }
 .cta-button.variant-ghost:not(:disabled):hover {
@@ -654,12 +764,12 @@ p {
   }
 .cta-button.variant-neutral:not(:disabled):hover {
       background-color: var(--color-grey-scale-100);
-      border: 1px solid var(--color-grey-scale-100);
+      border: var(--hairline) 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);
+    border: var(--hairline) solid var(--color-accent-red-500);
     color: var(--color-white);
   }
 .cta-button.variant-confirm:not(:disabled):hover {
@@ -669,46 +779,39 @@ p {
     }
 .cta-button.variant-outlined {
     background-color: var(--color-white);
-    border: 1px solid var(--color-accent-red-700);
+    border: var(--hairline) solid var(--color-accent-red-700);
     color: var(--color-accent-red-700);
   }
 .cta-button.size-xl {
-    height: 60px;
+    height: var(--control-height-xl);
 
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
     font-weight: var(--font-weight-bold);
   }
 .cta-button.size-l {
-    height: 54px;
+    height: var(--control-height-l);
 
     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;
+    height: var(--control-height-m);
 
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     font-weight: var(--font-weight-semibold);
   }
 .cta-button.size-s {
-    height: 40px;
+    height: var(--control-height-s);
 
     font-size: var(--font-size-xsm);
     line-height: var(--line-height-xsm);
     font-weight: var(--font-weight-semibold);
   }
 .cta-button.size-xs {
-    height: 30px;
+    height: var(--control-height-xs);
 
     font-size: var(--font-size-xsm);
     line-height: var(--line-height-xsm);
@@ -733,7 +836,7 @@ p {
 .check-box {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-10);
 
   background-color: transparent;
   border: none;
@@ -742,8 +845,8 @@ p {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
-    border: 1.5px solid var(--color-purple-900);
+    border-radius: var(--radius-4);
+    border: var(--checkbox-border) solid var(--color-purple-900);
   }
 .check-box-indicator {
 
@@ -751,33 +854,33 @@ p {
   height: 100%;
 }
 .check-box-indicator.size-l {
-    width: 24px;
-    height: 24px;
+    width: var(--checkbox-size-l);
+    height: var(--checkbox-size-l);
   }
 .check-box-indicator.size-m {
-    width: 20px;
-    height: 20px;
+    width: var(--checkbox-size-m);
+    height: var(--checkbox-size-m);
   }
 .check-box-indicator.size-s {
-    width: 18px;
-    height: 18px;
+    width: var(--checkbox-size-s);
+    height: var(--checkbox-size-s);
   }
 .check-box-indicator[data-state='unchecked'] {
-    background-color: #fff;
+    background-color: var(--color-white);
   }
 .check-box-indicator[data-state='checked'] {
     background-color: var(--color-purple-900);
   }
 .check-box-indicator[data-disabled='true'] {
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-4);
     background-color: var(--color-grey-scale-300);
   }
 .base-collapsible-menu.trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 10px;
+    gap: var(--spacing-10);
     width: 100%;
   }
 /***************************************************************************************************
@@ -788,13 +891,13 @@ p {
 .collapsible-menu {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--spacing-4);
 }
-.collapsible-menu.size-m .collapsible-menu-row {
-    height: 40px;
+.collapsible-menu.size-s .collapsible-menu-row {
+    height: var(--menu-row-height-s);
   }
-.collapsible-menu.size-l .collapsible-menu-row {
-    height: 48px;
+.collapsible-menu.size-m .collapsible-menu-row {
+    height: var(--menu-row-height-m);
   }
 .collapsible-menu-row {
   all: unset;
@@ -802,11 +905,12 @@ p {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: var(--spacing-10);
 
   width: 100%;
-  padding: 0 12px;
-  border-radius: 8px;
+  padding: 0 var(--spacing-12);
+  /* figma 토큰에 --radius-8 없음. 디자이너 확인 전까지 숫자 유지 */
+  border-radius: 8px; /* raw-px */
   cursor: pointer;
 
   font-size: var(--font-size-sm);
@@ -829,17 +933,17 @@ p {
 .collapsible-menu-left {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-10);
   min-width: 0;
 }
 .collapsible-menu-left > * {
   min-width: 0;
 }
 .collapsible-menu-chevron {
-  width: 18px;
-  height: 18px;
+  width: var(--icon-size-s);
+  height: var(--icon-size-s);
   color: var(--color-grey-scale-500);
-  transition: transform 160ms ease;
+  transition: transform var(--motion-fast) var(--motion-ease);
 }
 .base-collapsible-menu.trigger[data-state='open'] .collapsible-menu-chevron {
   transform: rotate(180deg);
@@ -847,34 +951,38 @@ p {
 .collapsible-menu-content {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  margin-top: 2px;
-  margin-bottom: 4px;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-4);
+}
+/* placeholder 로 넘기는 span 의 색. base-drop-down 이 기본 placeholder 에 붙인다. */
+.nuri-placeholder {
+  color: var(--color-grey-scale-400);
 }
 .base-drop-down.trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 10px;
+    gap: var(--spacing-10);
   }
 /***************************************************************************************************
  *                                                                                                 *
  * drop-down-single                                                                                *
  *                                                                                                 *
  ***************************************************************************************************/
-.drop-down-single-trigger.size-m {
-    height: 40px;
+.drop-down-single-trigger.size-s {
+    height: var(--control-height-s);
   }
-.drop-down-single-trigger.size-l {
-    height: 50px;
+.drop-down-single-trigger.size-m {
+    height: var(--control-height-m);
   }
 .drop-down-single-trigger {
 
-  border: 1px solid var(--color-grey-scale-300);
-  border-radius: 4px;
+  border: var(--hairline) solid var(--color-grey-scale-300);
+  border-radius: var(--radius-4);
   width: -moz-fit-content;
   width: fit-content;
-  padding: 0 14px;
+  padding: 0 var(--spacing-14);
   background-color: var(--color-white);
 }
 .drop-down-single-trigger:focus {
@@ -895,9 +1003,12 @@ p {
 .drop-down-single-trigger[data-state='open'] .rotate {
       transform: rotate(180deg);
       transform-origin: 50% 50%;
-      transition: transform 160ms ease;
+      transition: transform var(--motion-fast) var(--motion-ease);
       will-change: transform;
     }
+.drop-down-single-label {
+  gap: var(--spacing-10);
+}
 .drop-down-single-value {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
@@ -912,19 +1023,17 @@ p {
     color: var(--color-grey-scale-400);
   }
 .drop-down-single-content {
-  z-index: 5;
+  z-index: var(--z-popover);
   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;
+  box-shadow: var(--shadow-popover);
+  border-radius: var(--radius-6);
 }
 .drop-down-single-item {
-  padding: 14px;
+  padding: var(--spacing-14);
   background-color: var(--color-white);
   outline: none;
-  height: 46px;
+  height: var(--drop-down-item-height);
 
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
@@ -1359,42 +1468,57 @@ p {
 .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 {
+.base-inline-loading {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+/* 링은 currentColor 다. 우선순위 0 이라 넘겨받은 className 이나 style 의 color 가 늘 이긴다. */
+:where(.base-inline-loading) {
+  color: var(--color-grey-scale-200);
+}
+.base-overlay-loading {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.page-loading-backdrop { position: absolute; inset: 0; }
+.page-loading-backdrop {
+  position: absolute;
+  inset: 0;
+}
 .page-loading-content {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  gap: var(--spacing-16);
 }
 /* 기본 스피너(20px)를 확대 */
-.page-loading-indicator { transform: scale(3.2); transform-origin: center; }
-.page-loading-text { position: relative; }
-.component-loading-container {
+.page-loading-indicator {
+  transform: scale(3.2);
+  transform-origin: center;
+}
+.page-loading-text {
+  position: relative;
+}
+.base-spinner {
   display: flex;
-  width: 20px;
-  height: 20px;
+  width: var(--icon-size-m);
+  height: var(--icon-size-m);
   align-items: center;
   justify-content: center;
 }
+/* 우선순위 0 이라 넘겨받은 className 이나 style 의 color 가 늘 이긴다. */
+:where(.base-spinner) {
+  color: var(--color-grey-scale-200);
+}
 .loading-indicator-ring {
   position: relative;
-  width: 20px;
-  height: 20px;
+  width: var(--icon-size-m);
+  height: var(--icon-size-m);
 }
 .loading-indicator-single-ring {
   box-sizing: border-box;
@@ -1402,37 +1526,46 @@ p {
   position: absolute;
   width: 100%;
   height: 100%;
-  border: 3px solid;
+  border: var(--spinner-stroke) 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;
+  animation: lds-ring var(--spinner-duration) var(--spinner-ease) infinite;
+  border-color: currentColor transparent transparent transparent;
+}
+.loading-indicator-single-ring:nth-child(1) {
+  animation-delay: calc(var(--spinner-duration) * -0.375);
+}
+.loading-indicator-single-ring:nth-child(2) {
+  animation-delay: calc(var(--spinner-duration) * -0.25);
+}
+.loading-indicator-single-ring:nth-child(3) {
+  animation-delay: calc(var(--spinner-duration) * -0.125);
+}
+.loading-indicator-single-ring:nth-child(4) {
+  animation-delay: 0s;
 }
-/* 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); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
-.base-modal {
+/* Title·Close 같은 조각도 base-modal 을 달므로 상자 스타일은 container·overlay 에만 건다. */
+.base-modal:where(.modal-container, .modal-overlay) {
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  padding: 30px;
-  border-radius: 6px;
+  padding: var(--spacing-30);
+  border-radius: var(--radius-6);
 }
 .base-modal.modal-container {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 9999;
+    z-index: var(--z-modal);
     background-color: var(--color-white);
   }
 .base-modal.modal-overlay {
@@ -1442,7 +1575,7 @@ p {
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
+    z-index: var(--z-overlay);
   }
 /***************************************************************************************************
  *                                                                                                 *
@@ -1456,36 +1589,36 @@ p {
   width: 100%;
 }
 .modal-with-double-button-container.size-s {
-    width: 400px;
+    width: var(--modal-width-s);
   }
 .modal-with-double-button-container.size-m {
-    width: 450px;
+    width: var(--modal-width-m);
   }
 .modal-with-double-button-container.size-l {
-    width: 500px;
+    width: var(--modal-width-l);
   }
 .modal-with-double-button-title-icon {
-  margin-bottom: 20px;
+  margin-bottom: var(--spacing-20);
 }
 .modal-with-double-button-title {
-  margin-bottom: 4px;
+  margin-bottom: var(--spacing-4);
 }
 .modal-with-double-button-content {
-  margin-top: 20px;
+  margin-top: var(--spacing-20);
 }
 .modal-with-double-button-close {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 16px;
+  gap: var(--spacing-16);
   width: 100%;
-  margin-top: 30px;
+  margin-top: var(--spacing-30);
 }
 .modal-with-double-button-close.row {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 16px;
+    gap: var(--spacing-16);
   }
 .modal-with-double-button-close.row  > * {
       flex: 1;
@@ -1495,28 +1628,41 @@ p {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+    gap: var(--spacing-10);
   }
 .modal-with-double-button-close.column  > * {
       width: 100%;
     }
+.base-radio:where(.button) {
+    padding: 0;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * radio                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
 .radio:where(.radio-group) {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--spacing-16);
+  }
+.radio:where(.radio-option) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-6);
   }
 .radio:where(.radio-button) {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 18px;
-    height: 18px;
+    width: var(--radio-size);
+    height: var(--radio-size);
     border-radius: 50%;
     background-color: var(--color-grey-scale-200);
   }
 .radio:where(.radio-indicator) {
-    width: 8px;
-    height: 8px;
+    width: var(--radio-dot-size);
+    height: var(--radio-dot-size);
     border-radius: 50%;
     background-color: var(--color-purple-900);
   }
@@ -1560,33 +1706,127 @@ p {
 .data-table-header {
   position: sticky;
   top: 0;
-  background-color: #fff;
-  z-index: 3;
-  border-bottom: 1px solid #e4e4e7;
+  background-color: var(--color-white);
+  z-index: var(--z-sticky-header);
+  border-bottom: var(--hairline) solid var(--color-grey-scale-200);
 }
 .data-table-row {
   position: relative;
-  border-bottom: 1px solid var(--color-grey-scale-200);
+  border-bottom: var(--hairline) solid var(--color-grey-scale-200);
 }
 .data-table-row .fixed {
     position: sticky;
-    background-color: #fff;
-    z-index: 2;
+    background-color: var(--color-white);
+    z-index: var(--z-sticky);
   }
 :is(.data-table-row .fixed) > * {
       position: relative;
-      z-index: 1;
+      z-index: var(--z-raised);
     }
 .body .data-table-row:hover {
-  background-color: #f5f5f5;
+  background-color: var(--color-grey-scale-100);
 }
 :is(.body .data-table-row:hover) .fixed {
-    background-color: #f5f5f5;
+    background-color: var(--color-grey-scale-100);
   }
 .fixed-cell {
   position: sticky;
   left: 0;
 }
+.base-tabs:where(.root) {
+    width: 100%;
+    display: block;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * tabs                                                                                            *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.tabs-list {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.tabs-list.variant-underline {
+    border-bottom: var(--hairline) solid var(--color-grey-scale-200);
+
+    /* Scrollable logic */
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+.tabs-list.variant-underline::-webkit-scrollbar {
+      display: none;
+    }
+.tabs-trigger {
+  /* 1. 구조적 스타일 (Layout) */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  flex-shrink: 0;
+
+  /* 2. 테마 스타일 (Theme) */
+  /* figma 토큰에 11px 없음. 디자이너 확인 전까지 숫자 유지 */
+  padding: 10px 30px 11px 30px; /* raw-px */
+  color: var(--color-grey-scale-400);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  border-bottom: var(--hairline) solid var(--color-grey-scale-200);
+  transition: color var(--motion-base) var(--motion-ease);
+}
+.tabs-trigger:hover {
+    color: var(--color-purple-700);
+  }
+.tabs-trigger[data-state='active'] {
+    color: var(--color-purple-700);
+    font-weight: var(--font-weight-bold);
+  }
+.tabs-trigger.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+/* 3. 변이 스타일 (Variants) */
+.tabs-trigger.variant-underline {
+    border-bottom: 0;
+  }
+.tabs-trigger.variant-underline[data-state='active'] {
+      border-bottom-color: transparent;
+    }
+.tabs-trigger.variant-filled {
+    flex: 1; /* full-width logic integrated */
+    text-align: center;
+    /* figma 토큰에 11px 없음. 디자이너 확인 전까지 숫자 유지 */
+    padding: 11px 30px; /* raw-px */
+    border-bottom: 0;
+    z-index: var(--z-raised);
+  }
+.tabs-trigger.variant-filled:hover,.tabs-trigger.variant-filled[data-state='active'] {
+      background-color: transparent;
+    }
+.tabs-indicator {
+  /* 1. 구조적 스타일 (Layout) */
+  position: absolute;
+  pointer-events: none;
+  z-index: var(--z-raised);
+  transition:
+    left var(--motion-base) var(--motion-ease),
+    width var(--motion-base) var(--motion-ease);
+
+  /* 2. 변이 스타일 (Variants) */
+}
+.tabs-indicator.variant-underline {
+    bottom: 0;
+    height: var(--tab-indicator-thickness);
+    background-color: var(--color-purple-800);
+  }
+.tabs-indicator.variant-filled {
+    top: 0;
+    bottom: 0;
+    background-color: var(--color-purple-50);
+    z-index: var(--z-base);
+  }
 .base-text-field.input {
     border: none;
     outline: none;
@@ -1603,76 +1843,82 @@ p {
       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;
+      /* 브라우저 자동완성 배경을 덮는 관용 해킹. 토큰이 아니라 고정값이다 */ /* raw-value */
+      box-shadow: 0 0 0px 1000px transparent inset; /* raw-value */
       -webkit-transition: background-color 5000s ease-in-out 0s;
-      transition: background-color 5000s ease-in-out 0s;
+      transition: background-color 5000s ease-in-out 0s; /* raw-value */
     }
 /***************************************************************************************************
  *                                                                                                 *
  * base-text-field                                                                                 *
  *                                                                                                 *
  ***************************************************************************************************/
+.text-field {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .text-field-title {
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-8);
 }
 .text-field-input-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: var(--spacing-10);
 
-  padding: 0 14px;
+  padding: 0 var(--spacing-14);
 
-  border-radius: 4px;
-  border: 1px solid var(--color-grey-scale-300);
+  border-radius: var(--radius-4);
+  border: var(--hairline) solid var(--color-grey-scale-300);
 }
-.text-field-input-wrapper.size-m {
-    height: 40px;
+.text-field-input-wrapper.size-s {
+    height: var(--control-height-s);
   }
-.text-field-input-wrapper.size-l {
-    height: 50px;
+.text-field-input-wrapper.size-m {
+    height: var(--control-height-m);
   }
-.text-field-input-wrapper:has([data-disabled='true']) {
+.text-field-input-wrapper:has( > input[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);
+    border: var(--hairline) solid var(--color-purple-900);
   }
 .text-field-input-wrapper  > input {
     width: 100%;
   }
 .text-field-helper-text {
-  margin-top: 4px;
+  margin-top: var(--spacing-4);
 }
 .text-field-helper-text.error {
     color: var(--color-accent-red-500);
   }
-.base-tooltip {
-  z-index: 3;
-}
+/* Trigger 도 base-tooltip 을 달므로 z-index 는 Content 에만 건다. */
+.base-tooltip:where(.content) {
+    z-index: var(--z-tooltip);
+  }
 .base-tooltip.content {
     text-align: center;
   }
+.base-tooltip:where(.trigger) {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
 /***************************************************************************************************
  *                                                                                                 *
  * tooltip                                                                                         *
  *                                                                                                 *
  ***************************************************************************************************/
-.tooltip-trigger {
-  width: -moz-fit-content;
-  width: fit-content;
-}
 .tooltip-content {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  gap: 10px;
+  gap: var(--spacing-10);
 
   background-color: var(--color-purple-900);
   color: var(--color-white);
-  border-radius: 6px;
-  padding: 12px;
+  border-radius: var(--radius-6);
+  padding: var(--spacing-12);
 
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
@@ -1688,42 +1934,42 @@ p {
     border-style: solid;
   }
 .tooltip-content.direction-top {
-    transform: translateY(-10px);
+    transform: translateY(calc(-1 * var(--spacing-10)));
   }
 .tooltip-content.direction-top::before {
-      bottom: -8px;
+      bottom: calc(-1 * var(--tooltip-arrow));
       left: 50%;
       transform: translateX(-50%);
-      border-width: 8px 8px 0 8px;
+      border-width: var(--tooltip-arrow) var(--tooltip-arrow) 0 var(--tooltip-arrow);
       border-color: var(--color-purple-900) transparent transparent transparent;
     }
 .tooltip-content.direction-bottom {
-    transform: translateY(10px);
+    transform: translateY(var(--spacing-10));
   }
 .tooltip-content.direction-bottom::before {
-      top: -8px;
+      top: calc(-1 * var(--tooltip-arrow));
       left: 50%;
       transform: translateX(-50%);
-      border-width: 0 8px 8px 8px;
+      border-width: 0 var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow);
       border-color: transparent transparent var(--color-purple-900) transparent;
     }
 .tooltip-content.direction-left {
-    transform: translateX(-10px);
+    transform: translateX(calc(-1 * var(--spacing-10)));
   }
 .tooltip-content.direction-left::before {
-      right: -8px;
+      right: calc(-1 * var(--tooltip-arrow));
       top: 50%;
       transform: translateY(-50%);
-      border-width: 8px 0 8px 8px;
+      border-width: var(--tooltip-arrow) 0 var(--tooltip-arrow) var(--tooltip-arrow);
       border-color: transparent transparent transparent var(--color-purple-900);
     }
 .tooltip-content.direction-right {
-    transform: translateX(10px);
+    transform: translateX(var(--spacing-10));
   }
 .tooltip-content.direction-right::before {
-      left: -8px;
+      left: calc(-1 * var(--tooltip-arrow));
       top: 50%;
       transform: translateY(-50%);
-      border-width: 8px 8px 8px 0;
+      border-width: var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow) 0;
       border-color: transparent var(--color-purple-900) transparent transparent;
     }