@nurihaus/web-design-system 3.0.3 → 3.1.0

package/dist/styles.css

@@ -153,11 +153,11 @@
   --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;
+  --control-height-xs: 28px;
+  --control-height-s: 36px;
+  --control-height-m: 40px;
+  --control-height-l: 44px;
+  --control-height-xl: 48px;
 
   /* 라벨: badge */
   --label-height-xs: 28px;
@@ -177,6 +177,15 @@
   --checkbox-size-l: 24px;
   --radio-size: 18px;
   --radio-dot-size: 8px;
+
+  /* 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 */
+  --switch-width-s: 32px;
+  --switch-width-m: 40px;
+  --switch-width-l: 48px;
+  --switch-height-s: 18px;
+  --switch-height-m: 22px;
+  --switch-height-l: 26px;
+  --switch-thumb-inset: 2px;
   --avatar-size-s: 40px;
   --avatar-size-m: 58px;
   --avatar-size-l: 74px;
@@ -187,6 +196,13 @@
   --avatar-badge-size-xl: 48px;
 
   /* 폭 */
+  --drawer-width-s: 320px;
+  --drawer-width-m: 400px;
+  --drawer-width-l: 520px;
+  --drawer-height-s: 320px;
+  --drawer-height-m: 400px;
+  --drawer-height-l: 520px;
+  --toast-width: 360px;
   --modal-width-s: 400px;
   --modal-width-m: 450px;
   --modal-width-l: 500px;
@@ -197,8 +213,17 @@
   --icon-size-l: 24px;
   --tooltip-arrow: 8px;
   --spinner-stroke: 3px;
+  --overlay-spinner-size: 64px;
+  --overlay-spinner-stroke: 8px;
   --tab-indicator-thickness: 3px;
   --checkbox-border: 1.5px;
+  --breadcrumb-chevron-xs: 12px;
+  --breadcrumb-chevron-s: 14px;
+  --breadcrumb-chevron-m: 16px;
+  --breadcrumb-chevron-l: 18px;
+  --breadcrumb-chevron-xl: 20px;
+  --skeleton-text-height: 16px;
+  --skeleton-last-line-width: 60%;
   --hairline: 1px;
 
   /* 그림자 */
@@ -213,12 +238,14 @@
   --z-popover: 5;
   --z-overlay: 9998;
   --z-modal: 9999;
+  --z-toast: 10000;
 
   /* 모션 */
   --motion-fast: 160ms;
   --motion-base: 300ms;
   --motion-ease: ease;
   --spinner-duration: 1.2s;
+  --skeleton-duration: 1.5s;
   --spinner-ease: cubic-bezier(0.5, 0, 0.5, 1);
 }
 /* semantic: app */
@@ -708,6 +735,91 @@ p {
     background-color: var(--color-white);
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
+.base-breadcrumb:where(.list) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+.base-breadcrumb:where(.item,.separator) {
+    display: inline-flex;
+    align-items: center;
+  }
+.base-breadcrumb:where(.link) {
+    color: inherit;
+    text-decoration: none;
+    cursor: var(--cursor-button);
+  }
+.base-breadcrumb:where(.separator) {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * breadcrumb                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.breadcrumb {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-grey-scale-500);
+
+  /* 글자와 화살표가 같이 커진다. 화살표 치수는 size.css 의 --breadcrumb-chevron-* */
+}
+.breadcrumb.size-xs {
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+    --breadcrumb-chevron: var(--breadcrumb-chevron-xs);
+  }
+.breadcrumb.size-s {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    --breadcrumb-chevron: var(--breadcrumb-chevron-s);
+  }
+.breadcrumb.size-m {
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    --breadcrumb-chevron: var(--breadcrumb-chevron-m);
+  }
+.breadcrumb.size-l {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+    --breadcrumb-chevron: var(--breadcrumb-chevron-l);
+  }
+.breadcrumb.size-xl {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+    --breadcrumb-chevron: var(--breadcrumb-chevron-xl);
+  }
+.breadcrumb-list {
+  gap: var(--spacing-4);
+}
+.breadcrumb-link {
+  border-radius: var(--radius-4);
+  transition: color var(--motion-fast) var(--motion-ease);
+}
+.breadcrumb-link:hover {
+    color: var(--color-grey-scale-800);
+    text-decoration: underline;
+  }
+.breadcrumb-link:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-900);
+    outline-offset: var(--spacing-2);
+  }
+.breadcrumb-page {
+  color: var(--color-grey-scale-900);
+  font-weight: var(--font-weight-semibold);
+}
+.breadcrumb-separator {
+  color: var(--color-grey-scale-400);
+}
+.breadcrumb-chevron {
+  width: var(--breadcrumb-chevron);
+  height: var(--breadcrumb-chevron);
+  transform: rotate(-90deg);
+}
 .base-button {
   display: flex;
   justify-content: center;
@@ -728,6 +840,7 @@ p {
  ***************************************************************************************************/
 .cta-button {
   border-radius: var(--radius-6);
+  /* 좌우 여백은 size 가 정한다. 글자 길이와 상관없이 양쪽에 같은 여백이 남는다 */
 }
 .cta-button.variant-primary {
     background-color: var(--color-purple-900);
@@ -784,6 +897,7 @@ p {
   }
 .cta-button.size-xl {
     height: var(--control-height-xl);
+    padding: 0 var(--spacing-24);
 
     font-size: var(--font-size-lg);
     line-height: var(--line-height-lg);
@@ -791,6 +905,7 @@ p {
   }
 .cta-button.size-l {
     height: var(--control-height-l);
+    padding: 0 var(--spacing-20);
 
     font-size: var(--font-size-base);
     line-height: var(--line-height-base);
@@ -798,6 +913,7 @@ p {
   }
 .cta-button.size-m {
     height: var(--control-height-m);
+    padding: 0 var(--spacing-16);
 
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
@@ -805,6 +921,7 @@ p {
   }
 .cta-button.size-s {
     height: var(--control-height-s);
+    padding: 0 var(--spacing-14);
 
     font-size: var(--font-size-xsm);
     line-height: var(--line-height-xsm);
@@ -812,6 +929,7 @@ p {
   }
 .cta-button.size-xs {
     height: var(--control-height-xs);
+    padding: 0 var(--spacing-12);
 
     font-size: var(--font-size-xsm);
     line-height: var(--line-height-xsm);
@@ -852,7 +970,18 @@ p {
 
   width: 100%;
   height: 100%;
+
+  /* 체크 아이콘(16px 고정)을 칸 정가운데에 둔다. 빌드된 SVG 에 viewBox 가 없어 늘리면 그림이 왼쪽 위에 남는다 */
 }
+.check-box-indicator:not(.wrapper) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+.check-box-indicator:not(.wrapper)  > svg {
+      display: block;
+      flex-shrink: 0;
+    }
 .check-box-indicator.size-l {
     width: var(--checkbox-size-l);
     height: var(--checkbox-size-l);
@@ -955,6 +1084,158 @@ p {
   margin-top: var(--spacing-2);
   margin-bottom: var(--spacing-4);
 }
+/* Title·Close 같은 조각도 base-drawer 를 달므로 상자 스타일은 overlay·content 에만 건다. */
+.base-drawer:where(.overlay) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: var(--z-overlay);
+  }
+.base-drawer[data-state='open']:where(.overlay) {
+      animation: drawer-overlay-in var(--motion-base) var(--motion-ease);
+    }
+.base-drawer[data-state='closed']:where(.overlay) {
+      animation: drawer-overlay-out var(--motion-base) var(--motion-ease);
+    }
+.base-drawer:where(.content) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    z-index: var(--z-modal);
+    background-color: var(--color-white);
+  }
+.base-drawer:where(.title) {
+    margin: 0;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-black);
+  }
+.base-drawer:where(.description) {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-grey-scale-600);
+  }
+.base-drawer:where(.close) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    cursor: var(--cursor-button);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * drawer                                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+/* Radix 는 애니메이션이 끝나야 닫힌 패널을 지우므로 transition 이 아니라 keyframes 로 들어오고 나간다. */
+@keyframes drawer-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes drawer-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes drawer-slide-in {
+  from {
+    transform: var(--drawer-offset);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes drawer-slide-out {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: var(--drawer-offset);
+  }
+}
+.drawer {
+  gap: var(--spacing-8);
+  padding: var(--spacing-24);
+  box-sizing: border-box;
+}
+.drawer.size-s {
+    --drawer-width: var(--drawer-width-s);
+    --drawer-height: var(--drawer-height-s);
+  }
+.drawer.size-m {
+    --drawer-width: var(--drawer-width-m);
+    --drawer-height: var(--drawer-height-m);
+  }
+.drawer.size-l {
+    --drawer-width: var(--drawer-width-l);
+    --drawer-height: var(--drawer-height-l);
+  }
+.drawer.side-right {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--drawer-width);
+    max-width: 100%;
+    --drawer-offset: translateX(100%);
+  }
+.drawer.side-left {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--drawer-width);
+    max-width: 100%;
+    --drawer-offset: translateX(-100%);
+  }
+.drawer.side-bottom {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: var(--drawer-height);
+    max-height: 100%;
+    border-top-left-radius: var(--radius-16);
+    border-top-right-radius: var(--radius-16);
+    --drawer-offset: translateY(100%);
+  }
+.drawer[data-state='open'] {
+    animation: drawer-slide-in var(--motion-base) var(--motion-ease);
+  }
+.drawer[data-state='closed'] {
+    animation: drawer-slide-out var(--motion-base) var(--motion-ease);
+  }
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-12);
+}
+.drawer-close {
+  flex-shrink: 0;
+}
+.drawer-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin-top: var(--spacing-8);
+}
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
 /* placeholder 로 넘기는 span 의 색. base-drop-down 이 기본 placeholder 에 붙인다. */
 .nuri-placeholder {
   color: var(--color-grey-scale-400);
@@ -970,11 +1251,36 @@ p {
  * drop-down-single                                                                                *
  *                                                                                                 *
  ***************************************************************************************************/
+/* 높이·좌우 여백·글자는 버튼·텍스트필드와 같은 단계 */
+.drop-down-single-trigger.size-xs {
+    height: var(--control-height-xs);
+    padding: 0 var(--spacing-12);
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+  }
 .drop-down-single-trigger.size-s {
     height: var(--control-height-s);
+    padding: 0 var(--spacing-14);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
   }
 .drop-down-single-trigger.size-m {
     height: var(--control-height-m);
+    padding: 0 var(--spacing-16);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+.drop-down-single-trigger.size-l {
+    height: var(--control-height-l);
+    padding: 0 var(--spacing-20);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+.drop-down-single-trigger.size-xl {
+    height: var(--control-height-xl);
+    padding: 0 var(--spacing-24);
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
   }
 .drop-down-single-trigger {
 
@@ -982,7 +1288,6 @@ p {
   border-radius: var(--radius-4);
   width: -moz-fit-content;
   width: fit-content;
-  padding: 0 var(--spacing-14);
   background-color: var(--color-white);
 }
 .drop-down-single-trigger:focus {
@@ -1010,8 +1315,8 @@ p {
   gap: var(--spacing-10);
 }
 .drop-down-single-value {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-size: inherit;
+  line-height: inherit;
   font-weight: var(--font-weight-medium);
 
   text-align: left;
@@ -1496,11 +1801,14 @@ p {
   align-items: center;
   gap: var(--spacing-16);
 }
-/* 기본 스피너(20px)를 확대 */
+/* 스피너를 레이아웃 크기로 키운다. transform: scale 은 보이는 크기만 키워 아래 글자와 겹친다 */
 .page-loading-indicator {
-  transform: scale(3.2);
-  transform-origin: center;
+  --spinner-stroke: var(--overlay-spinner-stroke);
 }
+.page-loading-indicator .base-spinner,.page-loading-indicator .loading-indicator-ring {
+    width: var(--overlay-spinner-size);
+    height: var(--overlay-spinner-size);
+  }
 .page-loading-text {
   position: relative;
 }
@@ -1601,7 +1909,18 @@ p {
   margin-bottom: var(--spacing-20);
 }
 .modal-with-double-button-title {
-  margin-bottom: var(--spacing-4);
+  margin: 0 0 var(--spacing-4);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  text-align: center;
+  color: var(--color-black);
+}
+.modal-with-double-button-sub-title {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+  color: var(--color-grey-scale-600);
 }
 .modal-with-double-button-content {
   margin-top: var(--spacing-20);
@@ -1633,6 +1952,147 @@ p {
 .modal-with-double-button-close.column  > * {
       width: 100%;
     }
+/***************************************************************************************************
+ *                                                                                                 *
+ * modal                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.modal {
+  align-items: stretch;
+  gap: var(--spacing-20);
+  max-width: calc(100% - var(--spacing-30) * 2);
+  max-height: calc(100% - var(--spacing-30) * 2);
+  overflow: auto;
+}
+.modal.size-s {
+    width: var(--modal-width-s);
+  }
+.modal.size-m {
+    width: var(--modal-width-m);
+  }
+.modal.size-l {
+    width: var(--modal-width-l);
+  }
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-10);
+}
+.modal-title {
+  flex: 1;
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-black);
+}
+.modal-close-icon {
+  flex-shrink: 0;
+  width: var(--icon-size-m);
+  height: var(--icon-size-m);
+  padding: 0;
+  background-color: transparent;
+  color: var(--color-grey-scale-600);
+}
+.modal-description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-grey-scale-600);
+}
+.modal-body {
+  font-size: var(--font-size-sm);
+  color: var(--color-black);
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-10);
+}
+.base-pagination:where(.item) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    cursor: var(--cursor-button);
+  }
+.base-pagination[data-disabled]:where(.item) {
+      cursor: var(--cursor-disabled);
+    }
+.base-pagination:where(.ellipsis) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * pagination                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+.pagination.size-s {
+    --pagination-item-size: var(--control-height-s);
+    --pagination-icon-size: var(--icon-size-s);
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+  }
+.pagination.size-m {
+    --pagination-item-size: var(--control-height-m);
+    --pagination-icon-size: var(--icon-size-m);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+.pagination-item {
+  min-width: var(--pagination-item-size);
+  height: var(--pagination-item-size);
+  padding: 0 var(--spacing-4);
+  border-radius: var(--radius-6);
+  color: var(--color-grey-scale-600);
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: var(--font-weight-medium);
+  transition:
+    background-color var(--motion-fast) var(--motion-ease),
+    color var(--motion-fast) var(--motion-ease);
+}
+.pagination-item:not(:disabled):hover {
+    background-color: var(--color-grey-scale-100);
+    color: var(--color-purple-900);
+  }
+.pagination-item[data-state='active'] {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+    font-weight: var(--font-weight-bold);
+  }
+.pagination-item:disabled {
+    background-color: transparent;
+    color: var(--color-grey-scale-300);
+  }
+.pagination-ellipsis {
+  min-width: var(--pagination-item-size);
+  height: var(--pagination-item-size);
+  color: var(--color-grey-scale-400);
+}
+.pagination-icon {
+  width: var(--pagination-icon-size);
+  height: var(--pagination-icon-size);
+}
+.pagination-icon-prev {
+  transform: rotate(90deg);
+}
+.pagination-icon-next {
+  transform: rotate(-90deg);
+}
 .base-radio:where(.button) {
     padding: 0;
   }
@@ -1671,28 +2131,170 @@ p {
     font-weight: var(--font-weight-medium);
     color: var(--color-black);
   }
-.base-table {
-  width: -moz-fit-content;
-  width: fit-content;
+/* disabled: 글자·점은 회색, 커서는 비활성. 버튼은 BaseButton 이, 라벨은 RadioLabel 이 data-disabled 를 단다 */
+.radio.radio-label[data-disabled] {
+    color: var(--color-grey-scale-400);
+    cursor: var(--cursor-disabled);
+  }
+.radio.radio-button[data-disabled] {
+    cursor: var(--cursor-disabled);
+    background-color: var(--color-grey-scale-100);
+  }
+.radio.radio-button[data-disabled] .radio-indicator {
+    background-color: var(--color-grey-scale-400);
+  }
+.base-skeleton {
+  display: block;
+  box-sizing: border-box;
 }
-.base-table .header {
+/***************************************************************************************************
+ *                                                                                                 *
+ * skeleton                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+/* 단일 뼈대(text 한 줄·rect·circle)는 루트가, 여러 줄 text 는 각 .skeleton-line 이 뼈대다. */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  height: var(--skeleton-text-height);
+  border-radius: var(--radius-4);
+  background-color: var(--color-grey-scale-200);
+}
+.skeleton.shape-circle {
+    border-radius: var(--radius-full);
+    aspect-ratio: 1;
+    flex-shrink: 0;
+  }
+.skeleton.multiline {
     display: flex;
-    align-items: center;
-    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    height: auto;
+    overflow: visible;
+    background-color: transparent;
   }
-.base-table .body {
-    width: 100%;
+.skeleton-line {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  height: var(--skeleton-text-height);
+  border-radius: var(--radius-4);
+  background-color: var(--color-grey-scale-200);
+}
+.skeleton-line:last-child:not(:only-child) {
+    width: var(--skeleton-last-line-width);
   }
-.base-table .row {
-    display: flex;
-    align-items: center;
-    width: 100%;
+.skeleton.animated:not(.multiline)::after,
+.skeleton.animated .skeleton-line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--color-grey-scale-100) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  animation: skeleton-shimmer var(--skeleton-duration) var(--motion-ease) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .skeleton.animated:not(.multiline)::after,
+  .skeleton.animated .skeleton-line::after {
+    animation: none;
+  }
+}
+@keyframes skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
   }
+}
+.base-switch:where(.thumb) {
+    display: block;
+  }
+.base-switch:where(.label) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * switch                                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-10);
+
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  cursor: var(--cursor-button);
+}
+.switch[data-disabled] {
+    cursor: var(--cursor-disabled);
+  }
+.switch-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: var(--switch-thumb-inset);
+  border-radius: var(--radius-full);
+  background-color: var(--color-grey-scale-300);
+  transition: background-color var(--motion-fast) var(--motion-ease);
+}
+.switch-track.size-s {
+    width: var(--switch-width-s);
+    height: var(--switch-height-s);
+    --switch-travel: calc(var(--switch-width-s) - var(--switch-height-s));
+  }
+.switch-track.size-m {
+    width: var(--switch-width-m);
+    height: var(--switch-height-m);
+    --switch-travel: calc(var(--switch-width-m) - var(--switch-height-m));
+  }
+.switch-track.size-l {
+    width: var(--switch-width-l);
+    height: var(--switch-height-l);
+    --switch-travel: calc(var(--switch-width-l) - var(--switch-height-l));
+  }
+.switch-track[data-disabled] {
+    background-color: var(--color-grey-scale-200);
+  }
+.switch[data-state='checked'] .switch-track {
+  background-color: var(--color-purple-900);
+}
+.switch-thumb {
+  aspect-ratio: 1;
+  height: 100%;
+  border-radius: var(--radius-full);
+  background-color: var(--color-white);
+  transition: transform var(--motion-fast) var(--motion-ease);
+}
+.switch-thumb[data-state='checked'] {
+    transform: translateX(var(--switch-travel));
+  }
+.switch-thumb[data-disabled] {
+    background-color: var(--color-grey-scale-100);
+  }
+.base-table {
+  /* 진짜 테이블 레이아웃을 쓴다. 행을 flex 로 두면 헤더와 본문의 열 폭이 따로 놀아 고정열 경계가 어긋난다 */
+  width: -moz-fit-content;
+  width: fit-content;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: auto;
+}
 .base-table .cell {
+    padding: 0;
     text-align: start;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    vertical-align: middle;
   }
 /***************************************************************************************************
  *                                                                                                 *
@@ -1827,13 +2429,82 @@ p {
     background-color: var(--color-purple-50);
     z-index: var(--z-base);
   }
-.base-text-field.input {
+.base-text-area:where(.textarea) {
+    display: block;
+    width: 100%;
+    margin: 0;
     border: none;
     outline: none;
     background-color: transparent;
+    font-family: inherit;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-black);
+  }
+.base-text-area:where(.textarea)::-moz-placeholder {
+      color: var(--color-grey-scale-400);
+    }
+.base-text-area:where(.textarea)::placeholder {
+      color: var(--color-grey-scale-400);
+    }
+.base-text-area[data-disabled]:where(.textarea) {
+      cursor: var(--cursor-disabled);
+    }
+/***************************************************************************************************
+ *                                                                                                 *
+ * text-area                                                                                       *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.text-area {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+.text-area-title {
+  margin-bottom: var(--spacing-8);
+}
+/* 높이는 rows 가 정한다. size 는 글자 크기와 안쪽 여백만 바꾼다 */
+.text-area-input-wrapper {
+  display: flex;
+  box-sizing: border-box;
 
+  border-radius: var(--radius-4);
+  border: var(--hairline) solid var(--color-grey-scale-300);
+}
+.text-area-input-wrapper.size-s > textarea {
+    padding: var(--spacing-10) var(--spacing-14);
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
+  }
+.text-area-input-wrapper.size-m > textarea {
+    padding: var(--spacing-14) var(--spacing-14);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+.text-area-input-wrapper.resize-none > textarea {
+    resize: none;
+  }
+.text-area-input-wrapper.resize-vertical > textarea {
+    resize: vertical;
+  }
+.text-area-input-wrapper:has( > textarea[data-disabled]) {
+    border-color: var(--color-grey-scale-300);
+    background-color: var(--color-grey-scale-100);
+  }
+.text-area-input-wrapper:focus-within {
+    border: var(--hairline) solid var(--color-purple-900);
+  }
+.text-area-helper-text {
+  margin-top: var(--spacing-4);
+}
+.text-area-helper-text.error {
+    color: var(--color-accent-red-500);
+  }
+.base-text-field.input {
+    border: none;
+    outline: none;
+    background-color: transparent;
+
+    font-size: inherit;
+    line-height: inherit;
     font-weight: var(--font-weight-medium);
   }
 .base-text-field.input::-moz-placeholder {
@@ -1866,16 +2537,40 @@ p {
   justify-content: space-between;
   gap: var(--spacing-10);
 
-  padding: 0 var(--spacing-14);
+  /* 높이는 버튼과 같은 --control-height-* 축, 좌우 여백·글자는 size 마다 버튼과 같은 단계 */
 
   border-radius: var(--radius-4);
   border: var(--hairline) solid var(--color-grey-scale-300);
 }
+.text-field-input-wrapper.size-xs {
+    height: var(--control-height-xs);
+    padding: 0 var(--spacing-12);
+    font-size: var(--font-size-xsm);
+    line-height: var(--line-height-xsm);
+  }
 .text-field-input-wrapper.size-s {
     height: var(--control-height-s);
+    padding: 0 var(--spacing-14);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
   }
 .text-field-input-wrapper.size-m {
     height: var(--control-height-m);
+    padding: 0 var(--spacing-16);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+.text-field-input-wrapper.size-l {
+    height: var(--control-height-l);
+    padding: 0 var(--spacing-20);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+  }
+.text-field-input-wrapper.size-xl {
+    height: var(--control-height-xl);
+    padding: 0 var(--spacing-24);
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
   }
 .text-field-input-wrapper:has( > input[data-disabled='true']) {
     border-color: var(--color-grey-scale-300);
@@ -1893,6 +2588,203 @@ p {
 .text-field-helper-text.error {
     color: var(--color-accent-red-500);
   }
+/* 조각(title·close 등)도 base-toast 를 달므로 상자 스타일은 루트와 viewport 에만 건다. */
+.base-toast:where(:not(.viewport, .title, .description, .action, .close)) {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+  list-style: none;
+}
+.base-toast[data-state='open']:where(:not(.viewport,.title,.description,.action,.close)) {
+    animation: toast-in var(--motion-base) var(--motion-ease);
+  }
+.base-toast[data-state='closed']:where(:not(.viewport,.title,.description,.action,.close)) {
+    animation: toast-out var(--motion-fast) var(--motion-ease) forwards;
+  }
+.base-toast[data-swipe='move']:where(:not(.viewport,.title,.description,.action,.close)) {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+.base-toast[data-swipe='cancel']:where(:not(.viewport,.title,.description,.action,.close)) {
+    transform: translateX(0);
+    transition: transform var(--motion-fast) var(--motion-ease);
+  }
+.base-toast[data-swipe='end']:where(:not(.viewport,.title,.description,.action,.close)) {
+    animation: toast-swipe-out var(--motion-fast) var(--motion-ease) forwards;
+  }
+.base-toast:where(.viewport) {
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-10);
+    width: var(--toast-width);
+    max-width: 100vw;
+    margin: 0;
+    padding: var(--spacing-24);
+    list-style: none;
+    outline: none;
+    /* 아래에서 올라오는 자리를 기본으로 두고 position 클래스가 덮는다 */
+    --toast-enter: translateY(var(--spacing-16));
+  }
+.base-toast.position-top-right:where(.viewport) {
+      top: 0;
+      right: 0;
+      --toast-enter: translateY(calc(-1 * var(--spacing-16)));
+    }
+.base-toast.position-bottom-right:where(.viewport) {
+      right: 0;
+      bottom: 0;
+    }
+.base-toast.position-bottom-center:where(.viewport) {
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+.base-toast:where(.title),.base-toast:where(.description) {
+    margin: 0;
+  }
+.base-toast:where(.action),.base-toast:where(.close) {
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: var(--cursor-button);
+  }
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: var(--toast-enter);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes toast-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+@keyframes toast-swipe-out {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+
+  to {
+    transform: translateX(calc(100% + var(--spacing-24)));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .base-toast:where(:not(.viewport, .title, .description, .action, .close)) {
+    animation: none;
+  }
+}
+/***************************************************************************************************
+ *                                                                                                 *
+ * toast                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+/* Tooltip 과 같은 표면: 진한 바탕에 흰 글자, radius-6. variant 가 바탕색을 정한다(기본 purple-900, success green, warning orange, error red-500 = confirm 버튼) */
+.toast {
+  align-items: center;
+  padding: var(--spacing-12) var(--spacing-14);
+  border-radius: var(--radius-6);
+  background-color: var(--color-purple-900);
+  color: var(--color-white);
+
+  /* CTAButton secondary 와 같은 연보라. 이 variant 만 글자가 어둡다 */
+}
+.toast.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+  }
+.toast.variant-secondary .toast-title,.toast.variant-secondary .toast-close {
+      color: var(--color-purple-900);
+    }
+.toast.variant-secondary .toast-description {
+      color: var(--color-purple-700);
+    }
+.toast.variant-success {
+    background-color: var(--color-accent-green-600);
+  }
+.toast.variant-success .toast-description {
+      color: var(--color-accent-green-100);
+    }
+.toast.variant-warning {
+    background-color: var(--color-accent-orange-500);
+  }
+.toast.variant-warning .toast-description {
+      color: var(--color-accent-orange-100);
+    }
+.toast.variant-error {
+    background-color: var(--color-accent-red-500);
+  }
+.toast.variant-error .toast-description {
+      color: var(--color-accent-red-100);
+    }
+/* success·warning·error 는 앞에 상태 아이콘을 둔다. SVG 에 박힌 색을 글자색으로 맞춘다 */
+.toast-icon {
+  flex-shrink: 0;
+  width: var(--icon-size-s);
+  height: var(--icon-size-s);
+}
+.toast-icon path[stroke] {
+    stroke: currentColor;
+  }
+.toast-icon path[fill]:not([fill='none']) {
+    fill: currentColor;
+  }
+.toast-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+.toast-title {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-white);
+  word-break: break-word;
+}
+.toast-description {
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-purple-200);
+  word-break: break-word;
+}
+/* action 은 CTAButton(xs·neutral: 흰 바탕, 보라 글자) 이라 모양은 버튼 CSS 가 정한다 */
+.toast-action {
+  white-space: nowrap;
+}
+.toast-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size-s);
+  height: var(--icon-size-s);
+  color: var(--color-white);
+  opacity: 0.7;
+}
+.toast-close:hover {
+    opacity: 1;
+  }
+/* multifly.svg 의 fill 이 회색으로 박혀 있어 글자색을 따르게 한다 */
+.toast-close svg {
+    width: 100%;
+    height: 100%;
+  }
+:is(.toast-close svg) path {
+      fill: currentColor;
+    }
 /* Trigger 도 base-tooltip 을 달므로 z-index 는 Content 에만 건다. */
 .base-tooltip:where(.content) {
     z-index: var(--z-tooltip);