@nurihaus/web-design-system 3.7.0 → 3.8.0

package/dist/components.css

@@ -170,6 +170,185 @@
   overflow-y: auto;
 }
 
+/* 공용 키프레임. 컴포넌트 CSS 보다 앞에 둔다 */
+
+/*
+ * 공용 키프레임. 컴포넌트 CSS 는 @keyframes 를 두지 않고 이 이름을 쓴다(빌드 R18).
+ * 시간·곡선은 쓰는 쪽 animation 에서 --motion-{토큰}-* 로 준다. 여기는 모양만 정한다.
+ * 쓰는 쪽이 두는 입력 변수: --motion-slide-offset(transform 값), --motion-swipe-from, --motion-swipe-to.
+ */
+
+@keyframes motion-enter-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes motion-exit-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes motion-enter-scale {
+  from {
+    opacity: 0;
+    transform: scale(var(--motion-enter-scale-from));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes motion-exit-scale {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--motion-enter-scale-from));
+  }
+}
+
+@keyframes motion-enter-slide {
+  from {
+    transform: var(--motion-slide-offset);
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes motion-exit-slide {
+  from {
+    transform: none;
+  }
+  to {
+    transform: var(--motion-slide-offset);
+  }
+}
+
+@keyframes motion-exit-swipe {
+  from {
+    transform: translateX(var(--motion-swipe-from));
+  }
+  to {
+    transform: translateX(var(--motion-swipe-to));
+  }
+}
+
+@keyframes motion-reject-wiggle {
+  0%,
+  100% {
+    transform: none;
+  }
+  25% {
+    transform: translateX(var(--motion-reject-distance));
+  }
+  50% {
+    transform: translateX(calc(var(--motion-reject-distance) * -1));
+  }
+  75% {
+    transform: translateX(calc(var(--motion-reject-distance) / 2));
+  }
+}
+
+@keyframes motion-reject-shake {
+  0%,
+  100% {
+    transform: none;
+  }
+  15%,
+  45%,
+  75% {
+    transform: translateX(calc(var(--motion-reject-distance) * -2));
+  }
+  30%,
+  60% {
+    transform: translateX(calc(var(--motion-reject-distance) * 2));
+  }
+  90% {
+    transform: translateX(var(--motion-reject-distance));
+  }
+}
+
+@keyframes motion-attention-shine {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes motion-attention-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes motion-busy-dots {
+  0%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes motion-busy-ring {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes motion-busy-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes motion-enter-pop {
+  from {
+    opacity: 0;
+    transform: var(--motion-slide-offset) scale(var(--motion-enter-pop-scale));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes motion-attention-float {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: translateY(calc(var(--motion-attention-float-distance) * -1));
+  }
+}
+
 /* Component */
 
 .base-avatar {
@@ -338,6 +517,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  /* width="fit-content" 일 때 글자가 테두리에 붙지 않게 양옆을 남긴다 */
+  padding: 0 var(--spacing-12);
+  box-sizing: border-box;
+  white-space: nowrap;
 
   border-width: var(--hairline);
   border-style: solid;
@@ -354,6 +537,9 @@
   align-items: center;
   justify-content: center;
   gap: var(--spacing-4);
+  padding: 0 var(--spacing-12);
+  box-sizing: border-box;
+  white-space: nowrap;
 
   border-width: var(--hairline);
   border-style: solid;
@@ -403,6 +589,20 @@
     border-color: transparent;
   }
 
+/* Toast 의 success·warning 과 같은 계열. 글자는 800 단계라 50 바탕에서 대비 6.8:1 */
+
+.variant-success:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-accent-green-800);
+    background-color: var(--color-accent-green-50);
+    border-color: transparent;
+  }
+
+.variant-warning:is(.option,.icon-text,.icon-text-option) {
+    color: var(--color-accent-orange-800);
+    background-color: var(--color-accent-orange-50);
+    border-color: transparent;
+  }
+
 /* icon-text-option 은 테두리가 없는 모양이라 두께·스타일까지 여기서 준다. */
 
 .variant-outlined:is(.option,.icon-text,.icon-text-option) {
@@ -411,6 +611,35 @@
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
 
+/* 스크롤하는 조상의 맨 아래에 붙는다. 모션은 없다 — 주 행동·입력을 담아 스크롤로 숨기지 않는다 */
+
+.base-bottom-bar {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--z-sticky);
+  display: flex;
+}
+
+.base-bottom-bar > * {
+    flex: 1;
+    min-width: 0;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * bottom-bar                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.bottom-bar {
+  gap: var(--spacing-8);
+  padding: var(--spacing-12) var(--spacing-16);
+  /* 기기 홈 막대만큼 아래를 더 비운다. env() 의 대체값 0 은 단위가 있어야 calc 가 성립한다 */
+  padding-bottom: calc(var(--spacing-12) + env(safe-area-inset-bottom, 0px)); /* raw-px */
+  border-top: var(--hairline) solid var(--color-grey-scale-200);
+  background-color: var(--color-white);
+}
+
 .base-bottom-nav:where(.root) {
     position: fixed;
     left: var(--spacing-16);
@@ -851,12 +1080,12 @@
   /* 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다 (ADR 0007). 계속 움직이면 거슬린다.
      둥실 지연 = 팝 지연 + 팝 시간. 팝 쪽을 바꾸면 둥실 지연도 같이 바꾼다 */
   --callout-origin: var(--spacing-16) 100%;
-  --callout-enter: translateY(var(--spacing-4));
+  --motion-slide-offset: translateY(var(--spacing-4));
 
   transform-origin: var(--callout-origin);
   animation:
-    callout-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both,
-    callout-float calc(var(--motion-base) * 8) var(--motion-ease)
+    motion-enter-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both,
+    motion-attention-float calc(var(--motion-base) * 8) var(--motion-ease)
       calc(var(--motion-fast) + var(--motion-slow)) 3;
 }
 
@@ -866,7 +1095,7 @@
 
 .base-callout:is(.tail-top-start,.tail-top-end) {
     --callout-origin: var(--spacing-16) 0;
-    --callout-enter: translateY(calc(var(--spacing-4) * -1));
+    --motion-slide-offset: translateY(calc(var(--spacing-4) * -1));
   }
 
 .base-callout.tail-top-end {
@@ -905,34 +1134,55 @@
     right: var(--spacing-12);
   }
 
-@keyframes callout-pop {
-  from {
-    opacity: 0;
-    transform: var(--callout-enter) scale(0.6);
+@media (prefers-reduced-motion: reduce) {
+  .base-callout {
+    animation: none;
   }
+}
 
-  to {
-    opacity: 1;
-    transform: none;
-  }
+.base-card {
+  display: flex;
+  flex-direction: column;
 }
 
-@keyframes callout-float {
-  0%,
-  100% {
-    transform: none;
-  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * card                                                                                            *
+ *                                                                                                 *
+ ***************************************************************************************************/
 
-  50% {
-    transform: translateY(calc(var(--spacing-6) / -2));
-  }
+.card {
+  gap: var(--spacing-12);
+  padding: var(--spacing-16);
+  border: var(--hairline) solid var(--color-grey-scale-200);
+  border-radius: var(--radius-16);
+  background-color: var(--color-white);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .base-callout {
-    animation: none;
+.card.variant-tinted {
+    border-color: var(--color-purple-100);
+    background-color: var(--color-purple-50);
   }
-}
+
+/* 누르는 카드(링크·버튼)만 눌림 모션을 받는다. 보기만 하는 카드는 움직이지 않는다 */
+
+.card:is(a[href],button) {
+    width: 100%;
+    color: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    transition: transform var(--motion-press-duration) var(--motion-press-ease);
+  }
+
+.card:is(a[href],button):active {
+      transform: scale(var(--motion-press-scale));
+    }
+
+.card:is(a[href],button):focus-visible {
+      outline: var(--hairline) solid var(--color-purple-600);
+      outline-offset: var(--spacing-2);
+    }
 
 .base-check-box.label {
     font-size: var(--font-size-sm);
@@ -1182,6 +1432,63 @@
   margin-bottom: var(--spacing-4);
 }
 
+.base-description-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * description-list                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.description-list {
+  gap: var(--spacing-8);
+}
+
+.description-list-item {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-12);
+}
+
+.description-list-item > dt {
+    color: var(--color-grey-scale-500);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+.description-list-item > dd {
+    margin: 0;
+    color: var(--color-grey-scale-900);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-medium);
+    text-align: end;
+  }
+
+/* 합계 줄. 구분선 아래 값이 한 단계 크고 굵다 */
+
+.description-list-item.total {
+    align-items: baseline;
+    margin-top: var(--spacing-4);
+    padding-top: var(--spacing-12);
+    border-top: var(--hairline) solid var(--color-grey-scale-200);
+  }
+
+.description-list-item.total > dt {
+      color: var(--color-grey-scale-900);
+      font-weight: var(--font-weight-semibold);
+    }
+
+.description-list-item.total > dd {
+      font-size: var(--font-size-base);
+      line-height: var(--line-height-base);
+      font-weight: var(--font-weight-bold);
+    }
+
 /* Title·Close 같은 조각도 base-drawer 를 달므로 상자 스타일은 overlay·content 에만 건다. */
 
 .base-drawer:where(.overlay) {
@@ -1195,11 +1502,11 @@
   }
 
 .base-drawer[data-state='open']:where(.overlay) {
-      animation: drawer-overlay-in var(--motion-base) var(--motion-ease);
+      animation: motion-enter-fade var(--motion-base) var(--motion-ease);
     }
 
 .base-drawer[data-state='closed']:where(.overlay) {
-      animation: drawer-overlay-out var(--motion-base) var(--motion-ease);
+      animation: motion-exit-fade var(--motion-base) var(--motion-ease);
     }
 
 .base-drawer:where(.content) {
@@ -1240,48 +1547,12 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* Radix 는 애니메이션이 끝나야 닫힌 패널을 지우므로 transition 이 아니라 keyframes 로 들어오고 나간다. */
+/* Radix 는 애니메이션이 끝나야 닫힌 패널을 지우므로 transition 이 아니라 keyframes 로 들어오고 나간다(styles/motion.css). */
 
-@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 {
+  gap: var(--spacing-8);
+  padding: var(--spacing-24);
+  box-sizing: border-box;
 }
 
 .drawer.size-s {
@@ -1305,7 +1576,7 @@
     bottom: 0;
     width: var(--drawer-width);
     max-width: 100%;
-    --drawer-offset: translateX(100%);
+    --motion-slide-offset: translateX(100%);
   }
 
 .drawer.side-left {
@@ -1314,7 +1585,7 @@
     bottom: 0;
     width: var(--drawer-width);
     max-width: 100%;
-    --drawer-offset: translateX(-100%);
+    --motion-slide-offset: translateX(-100%);
   }
 
 .drawer.side-bottom {
@@ -1325,15 +1596,15 @@
     max-height: 100%;
     border-top-left-radius: var(--radius-16);
     border-top-right-radius: var(--radius-16);
-    --drawer-offset: translateY(100%);
+    --motion-slide-offset: translateY(100%);
   }
 
 .drawer[data-state='open'] {
-    animation: drawer-slide-in var(--motion-base) var(--motion-ease);
+    animation: motion-enter-slide var(--motion-base) var(--motion-ease);
   }
 
 .drawer[data-state='closed'] {
-    animation: drawer-slide-out var(--motion-base) var(--motion-ease);
+    animation: motion-exit-slide var(--motion-base) var(--motion-ease);
   }
 
 .drawer-header {
@@ -2059,6 +2330,64 @@
       color: var(--color-accent-orange-900);
     }
 
+/* 빈 목록·오류·찾을 수 없음·준비 중 화면. 가운데 세로로 쌓는다 */
+
+.base-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * empty-state                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.empty-state {
+  gap: var(--spacing-8);
+  padding: var(--spacing-24) var(--spacing-16);
+
+  /* variant 는 아이콘 원 색만 바꾼다 */
+}
+
+.empty-state.variant-neutral .empty-state-icon {
+    background-color: var(--color-grey-scale-100);
+    color: var(--color-grey-scale-600);
+  }
+
+.empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--empty-state-icon-box);
+  height: var(--empty-state-icon-box);
+  margin-bottom: var(--spacing-8);
+  border-radius: var(--radius-full);
+  background-color: var(--color-purple-50);
+  color: var(--color-purple-900);
+}
+
+.empty-state-title {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-grey-scale-900);
+  word-break: break-word;
+}
+
+.empty-state-description {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--color-grey-scale-500);
+  word-break: break-word;
+}
+
+.empty-state-action {
+  margin-top: var(--spacing-8);
+}
+
 .base-icon {
   flex-shrink: 0;
   vertical-align: middle;
@@ -2089,6 +2418,136 @@
     height: var(--icon-size-xl);
   }
 
+.base-list:where(.group) {
+    display: flex;
+    flex-direction: column;
+  }
+
+/* 행은 div·button·링크 어느 것이든 같은 모양이다 */
+
+.base-list:where(.row) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    border: 0;
+    background-color: transparent;
+    color: inherit;
+    text-align: start;
+    text-decoration: none;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * list-group                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.list-group {
+  gap: var(--spacing-8);
+}
+
+.list-group-label {
+  padding: 0 var(--spacing-4);
+  color: var(--color-grey-scale-500);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.list-group-surface {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--hairline) solid var(--color-grey-scale-200);
+  border-radius: var(--radius-16);
+  background-color: var(--color-white);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * list-row                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.list-row {
+  min-height: var(--list-row-height);
+  gap: var(--spacing-12);
+  padding: var(--spacing-10) var(--spacing-16);
+
+  /* 누르는 행(링크·버튼)은 줄어들지 않고 배경이 어두워진다. 폭이 꽉 찬 면이라 scale 이 어색하다 */
+}
+
+.list-row:is(a[href],button) {
+    cursor: pointer;
+    transition: background-color var(--motion-press-duration) var(--motion-press-ease);
+  }
+
+.list-row:is(a[href],button):active {
+      background-color: var(--color-grey-scale-100);
+    }
+
+/* 면이 overflow: hidden 이라 테두리 안쪽에 그린다 */
+
+.list-row:is(a[href],button):focus-visible {
+      outline: var(--hairline) solid var(--color-purple-600);
+      outline-offset: calc(var(--spacing-2) * -1);
+    }
+
+/* 행 사이 구분선. 왼쪽은 안쪽 여백만큼 띄운다 */
+
+.list-row + .list-row::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: var(--spacing-16);
+  height: var(--hairline);
+  background-color: var(--color-grey-scale-100);
+}
+
+.list-row-leading {
+  display: flex;
+  flex: none;
+  color: var(--color-grey-scale-700);
+}
+
+.list-row-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.list-row-label {
+  color: var(--color-grey-scale-900);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-weight: var(--font-weight-medium);
+}
+
+.list-row-description {
+  color: var(--color-grey-scale-500);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
+.list-row-trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  color: var(--color-grey-scale-500);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
+.list-row-chevron {
+  flex: none;
+  color: var(--color-grey-scale-400);
+}
+
 .base-inline-loading {
   display: flex;
   width: 100%;
@@ -2123,76 +2582,497 @@
   gap: var(--spacing-16);
 }
 
-/* 스피너를 레이아웃 크기로 키운다. transform: scale 은 보이는 크기만 키워 아래 글자와 겹친다 */
+/* 스피너를 레이아웃 크기로 키운다. transform: scale 은 보이는 크기만 키워 아래 글자와 겹친다 */
+
+.page-loading-indicator {
+  --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;
+}
+
+.base-spinner {
+  display: flex;
+  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: var(--icon-size-m);
+  height: var(--icon-size-m);
+}
+
+.loading-indicator-single-ring {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: var(--spinner-stroke) solid;
+  border-radius: 50%;
+  animation: motion-busy-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;
+}
+
+/* Title·Close 같은 조각도 base-media 를 달므로 상자 스타일은 overlay·content 에만 건다. */
+
+.base-media:where(.overlay) {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background-color: color-mix(in srgb, var(--color-black) 90%, transparent);
+  }
+
+.base-media[data-state='open']:where(.overlay) {
+      animation: motion-enter-fade var(--motion-enter-duration) var(--motion-enter-ease);
+    }
+
+.base-media[data-state='closed']:where(.overlay) {
+      animation: motion-exit-fade var(--motion-exit-duration) var(--motion-exit-ease);
+    }
+
+.base-media:where(.content) {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+.base-media:where(.close) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: var(--cursor-button);
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * media-viewer                                                                                    *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* Radix 는 애니메이션이 끝나야 닫힌 Content 를 지우므로 keyframes 로 들어오고 나간다(styles/motion.css). */
+
+.media-viewer[data-state='open'] {
+    animation: motion-enter-scale var(--motion-enter-duration) var(--motion-enter-ease);
+  }
+
+.media-viewer[data-state='closed'] {
+    animation: motion-exit-scale var(--motion-exit-duration) var(--motion-exit-ease);
+  }
+
+.media-viewer-media {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+/* 노치 아래로 숨지 않게 안전 영역만큼 내린다 */
+
+.media-viewer-close {
+  position: absolute;
+  top: calc(env(safe-area-inset-top) + var(--spacing-8));
+  right: calc(env(safe-area-inset-right) + var(--spacing-8));
+  width: var(--touch-target);
+  height: var(--touch-target);
+  color: var(--color-white);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * media-thumbnail                                                                                 *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.media-thumbnail {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.media-thumbnail.size-s {
+    width: var(--media-thumbnail-size-s);
+    height: var(--media-thumbnail-size-s);
+  }
+
+.media-thumbnail.size-m {
+    width: var(--media-thumbnail-size-m);
+    height: var(--media-thumbnail-size-m);
+  }
+
+/* 말풍선 안. 폭을 채우되 넘지 않는다 */
+
+.media-thumbnail.size-l {
+    width: 100%;
+    max-width: var(--media-thumbnail-max-width);
+    aspect-ratio: 4 / 3;
+  }
+
+/* base-button(border·radius·focus 를 지운다)보다 우선해야 해서 .media-thumbnail 아래에 둔다 */
+
+.media-thumbnail .media-thumbnail-open {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    border-radius: var(--radius-6);
+    background-color: var(--color-grey-scale-200);
+    transition: transform var(--motion-press-duration) var(--motion-press-ease);
+  }
+
+:is(.media-thumbnail .media-thumbnail-open):active:not([data-disabled]) {
+      transform: scale(var(--motion-press-scale));
+    }
+
+[data-invalid]:is(.media-thumbnail .media-thumbnail-open) {
+      border: var(--media-invalid-border) solid var(--color-accent-red-500);
+    }
+
+:is(.media-thumbnail .media-thumbnail-open):focus-visible {
+      outline: var(--hairline) solid var(--color-purple-600);
+      outline-offset: var(--spacing-2);
+    }
+
+.media-thumbnail .media-thumbnail-remove {
+    position: absolute;
+    top: var(--spacing-4);
+    right: var(--spacing-4);
+    width: var(--media-remove-size);
+    height: var(--media-remove-size);
+    padding: 0;
+    border-radius: var(--radius-full);
+    background-color: color-mix(in srgb, var(--color-grey-scale-900) 80%, transparent);
+    color: var(--color-white);
+
+    /* 20 원을 터치 44 로 넓힌다 */
+  }
+
+:is(.media-thumbnail .media-thumbnail-remove)::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--touch-target);
+      height: var(--touch-target);
+      transform: translate(-50%, -50%);
+    }
+
+:is(.media-thumbnail .media-thumbnail-remove):focus-visible {
+      outline: var(--hairline) solid var(--color-purple-600);
+      outline-offset: var(--spacing-2);
+    }
+
+.media-thumbnail-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.media-thumbnail-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--media-overlay-button-size);
+  height: var(--media-overlay-button-size);
+  border-radius: var(--radius-full);
+  background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
+  color: var(--color-white);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.media-thumbnail-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: color-mix(in srgb, var(--color-white) 60%, transparent);
+}
+
+/* 흰 막 위라 기본 링 색(grey-200)은 안 보인다 */
+
+.media-thumbnail-spinner {
+  color: var(--color-grey-scale-600);
+}
+
+.base-message-composer:where(.root) {
+    display: flex;
+    flex-direction: column;
+  }
+
+.base-message-composer:where(.textarea) {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: inherit;
+    resize: none;
+  }
+
+.base-message-composer[data-disabled]:where(.textarea) {
+      cursor: var(--cursor-disabled);
+    }
+
+.base-message-composer:where(.send) {
+    display: grid;
+    place-items: center;
+    flex: none;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * message-composer                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.message-composer {
+  gap: var(--spacing-8);
+}
+
+.message-composer-attachments {
+  display: flex;
+  gap: var(--spacing-8);
+  overflow-x: auto;
+}
+
+/* 입력 칸이 늘어나도 아이콘·보내기 버튼은 아래 줄에 붙는다 */
+
+.message-composer-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-4);
+}
+
+/* 16px 글자 — iOS 가 입력 칸에 포커스할 때 화면을 확대하지 않는다. 높이는 글자만큼 늘고 max-height 에서 스크롤한다 */
+
+.message-composer-textarea {
+  flex: 1;
+  min-width: 0;
+  min-height: var(--touch-target);
+  max-height: var(--composer-max-height);
+  field-sizing: content;
+  padding: var(--spacing-10) var(--spacing-16);
+  border: var(--hairline) solid var(--color-grey-scale-300);
+  border-radius: var(--radius-20);
+  outline: none;
+  background-color: var(--color-white);
+  color: var(--color-grey-scale-900);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+}
+
+.message-composer-textarea::-moz-placeholder {
+    color: var(--color-grey-scale-400);
+  }
+
+.message-composer-textarea::placeholder {
+    color: var(--color-grey-scale-400);
+  }
+
+.message-composer-textarea:focus {
+    border-color: var(--color-purple-900);
+  }
+
+.message-composer-textarea[data-disabled] {
+    background-color: var(--color-grey-scale-100);
+  }
+
+/* 누르는 곳은 --touch-target, 보이는 원은 --composer-send-size */
+
+.message-composer-send {
+  width: var(--touch-target);
+  height: var(--touch-target);
+  transition: transform var(--motion-press-duration) var(--motion-press-ease);
+}
+
+.message-composer-send:not([aria-disabled='true'],[aria-busy='true']):active {
+    transform: scale(var(--motion-press-scale));
+  }
+
+.message-composer-send[aria-disabled='true'] .message-composer-send-circle {
+    background-color: var(--color-grey-scale-200);
+  }
+
+.message-composer-send[data-rejecting] .message-composer-send-circle {
+    animation: motion-reject-wiggle var(--motion-reject-duration) var(--motion-reject-ease);
+  }
+
+.message-composer-send-circle {
+  display: grid;
+  place-items: center;
+  width: var(--composer-send-size);
+  height: var(--composer-send-size);
+  border-radius: var(--radius-full);
+  background-color: var(--color-purple-900);
+  color: var(--color-white);
+}
+
+.message-composer-spinner {
+  color: var(--color-white);
+}
+
+.base-message:where(.root) {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+.base-message:where(.item) {
+    display: flex;
+    flex-direction: column;
+  }
+
+.base-message:where(.bubble) {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * message-thread · message · message-event                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.message-thread {
+  gap: var(--spacing-12);
+}
+
+.message {
+  gap: var(--spacing-4);
+  align-items: flex-start;
+}
+
+.message.side-end {
+    align-items: flex-end;
+  }
 
-.page-loading-indicator {
-  --spinner-stroke: var(--overlay-spinner-stroke);
-}
+.message.side-end .message-row {
+    flex-direction: row-reverse;
+  }
 
-.page-loading-indicator .base-spinner,.page-loading-indicator .loading-indicator-ring {
-    width: var(--overlay-spinner-size);
-    height: var(--overlay-spinner-size);
+.message.side-end .message-bubble {
+    border-radius: var(--radius-16) var(--radius-16) var(--radius-4) var(--radius-16);
+    background-color: var(--color-purple-900);
+    color: var(--color-white);
   }
 
-.page-loading-text {
-  position: relative;
-}
+/* 방금 보내거나 받은 메시지만 움직인다. 처음 그린 대화는 motion 이 없어 가만히 있다 */
 
-.base-spinner {
-  display: flex;
-  width: var(--icon-size-m);
-  height: var(--icon-size-m);
-  align-items: center;
-  justify-content: center;
-}
+.message:is(.motion-weak,.motion-strong) {
+    --motion-slide-offset: translateY(var(--motion-enter-offset));
+  }
 
-/* 우선순위 0 이라 넘겨받은 className 이나 style 의 color 가 늘 이긴다. */
+.message.motion-weak {
+    animation:
+      motion-enter-fade var(--motion-enter-duration) var(--motion-enter-ease),
+      motion-enter-slide var(--motion-enter-duration) var(--motion-enter-ease);
+  }
 
-:where(.base-spinner) {
-  color: var(--color-grey-scale-200);
-}
+.message.motion-strong {
+    animation:
+      motion-enter-fade var(--motion-enter-strong-duration) var(--motion-enter-strong-ease),
+      motion-enter-slide var(--motion-enter-strong-duration) var(--motion-enter-strong-ease);
+  }
 
-.loading-indicator-ring {
-  position: relative;
-  width: var(--icon-size-m);
-  height: var(--icon-size-m);
+.message-name {
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-grey-scale-700);
 }
 
-.loading-indicator-single-ring {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: var(--spinner-stroke) solid;
-  border-radius: 50%;
-  animation: lds-ring var(--spinner-duration) var(--spinner-ease) infinite;
-  border-color: currentColor transparent transparent transparent;
+.message-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-6);
+  max-width: 80%;
 }
 
-.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);
+.message-bubble {
+  gap: var(--spacing-6);
+  padding: var(--spacing-10) var(--spacing-14);
+  border-radius: var(--radius-16) var(--radius-16) var(--radius-16) var(--radius-4);
+  background-color: var(--color-grey-scale-100);
+  color: var(--color-grey-scale-900);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
-.loading-indicator-single-ring:nth-child(3) {
-  animation-delay: calc(var(--spinner-duration) * -0.125);
-}
+.message-bubble.media-only {
+    padding: var(--spacing-6);
+  }
 
-.loading-indicator-single-ring:nth-child(4) {
-  animation-delay: 0s;
+.message-time {
+  flex: none;
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  color: var(--color-grey-scale-500);
 }
 
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.message-event {
+  align-self: center;
+  padding: var(--spacing-2) var(--spacing-10);
+  border-radius: var(--radius-full);
+  background-color: var(--color-grey-scale-100);
+  color: var(--color-grey-scale-600);
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  font-weight: var(--font-weight-medium);
 }
 
 /* Title·Close 같은 조각도 base-modal 을 달므로 상자 스타일은 container·overlay 에만 건다. */
@@ -2246,6 +3126,12 @@ button.modal-with-double-button-close-button {
   color: var(--color-grey-scale-600);
 }
 
+.modal-with-double-button-container {
+  /* 폰 폭(390)에서 고정 폭이 화면을 넘지 않게 Modal 과 같이 양옆을 남긴다 */
+  max-width: calc(100% - var(--spacing-30) * 2);
+  box-sizing: border-box;
+}
+
 .modal-with-double-button-container.size-s {
     width: var(--modal-width-s);
   }
@@ -2383,6 +3269,87 @@ button.modal-with-double-button-close-button {
   gap: var(--spacing-10);
 }
 
+/* 카드·시트 안에 머무는 안내. 스스로 사라지는 알림은 Toast 다 */
+
+.base-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * notice                                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* variant 가 바탕색과 글자·아이콘 색을 정한다 */
+
+.notice {
+  padding: var(--spacing-12) var(--spacing-14);
+  border-radius: var(--radius-6);
+  background-color: var(--color-grey-scale-100);
+  color: var(--color-grey-scale-700);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
+.notice.variant-success {
+    background-color: var(--color-accent-green-50);
+    color: var(--color-accent-green-800);
+  }
+
+.notice.variant-warning {
+    background-color: var(--color-accent-orange-50);
+    color: var(--color-accent-orange-800);
+  }
+
+.notice.variant-danger {
+    background-color: var(--color-accent-red-50);
+    color: var(--color-accent-red-700);
+  }
+
+/* 조건부로 나타나는 안내만 motion 을 준다. 사라질 때는 움직이지 않는다 */
+
+.notice.motion-weak {
+    animation: motion-enter-fade var(--motion-enter-duration) var(--motion-enter-ease);
+  }
+
+.notice.motion-strong {
+    animation: motion-enter-fade var(--motion-enter-strong-duration) var(--motion-enter-strong-ease);
+  }
+
+/* 아이콘(18)을 첫 줄 글(18)에 맞춘다 */
+
+.notice-icon {
+  flex: none;
+}
+
+.notice-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-10);
+  min-width: 0;
+}
+
+.notice-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  word-break: break-word;
+}
+
+.notice-title {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* action 은 CTAButton(xs·neutral) 이라 모양은 버튼 CSS 가 정한다. 폭은 글자만큼 */
+
+.notice-action {
+  align-self: flex-start;
+}
+
 .base-pagination:where(.item) {
     display: inline-flex;
     align-items: center;
@@ -2485,6 +3452,20 @@ button.modal-with-double-button-close-button {
     padding: 0;
   }
 
+.base-radio:where(.chip) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    /* 36 높이를 터치 44 로 넓힌다 */
+  }
+
+.base-radio:where(.chip)::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--spacing-4)) 0;
+    }
+
 /***************************************************************************************************
  *                                                                                                 *
  * radio                                                                                           *
@@ -2542,6 +3523,54 @@ button.modal-with-double-button-close-button {
     background-color: var(--color-grey-scale-400);
   }
 
+/* chip: 줄을 바꿔 가로로 늘어놓는다 */
+
+.radio.radio-group.variant-chip {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--spacing-8);
+  }
+
+/* 모양은 ChipGroup 칩과 같다. .base-button 의 border·radius·focus 초기화를 이기려고 .radio.radio-chip 으로 건다 */
+
+.radio.radio-chip {
+    height: var(--control-height-s);
+    padding: 0 var(--spacing-14);
+    border: var(--hairline) solid var(--color-grey-scale-300);
+    border-radius: var(--radius-full);
+    background-color: var(--color-grey-scale-50);
+    color: var(--color-grey-scale-600);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    transition:
+      transform var(--motion-press-duration) var(--motion-press-ease),
+      background-color var(--motion-confirm-weak-duration) var(--motion-confirm-weak-ease),
+      color var(--motion-confirm-weak-duration) var(--motion-confirm-weak-ease),
+      border-color var(--motion-confirm-weak-duration) var(--motion-confirm-weak-ease);
+  }
+
+.radio.radio-chip:active:not([data-disabled]) {
+      transform: scale(var(--motion-press-scale));
+    }
+
+.radio.radio-chip[data-state='checked'] {
+      border-color: var(--color-purple-900);
+      background-color: var(--color-purple-900);
+      color: var(--color-grey-scale-50);
+      font-weight: var(--font-weight-semibold);
+    }
+
+.radio.radio-chip[data-disabled] {
+      border-color: var(--color-grey-scale-200);
+      color: var(--color-grey-scale-300);
+      cursor: var(--cursor-disabled);
+    }
+
+.radio.radio-chip:focus-visible {
+      outline: var(--hairline) solid var(--color-purple-600);
+      outline-offset: var(--spacing-2);
+    }
+
 .base-skeleton {
   display: block;
   box-sizing: border-box;
@@ -2604,7 +3633,7 @@ button.modal-with-double-button-close-button {
     transparent 100%
   );
   transform: translateX(-100%);
-  animation: skeleton-shimmer var(--skeleton-duration) var(--motion-ease) infinite;
+  animation: motion-busy-shimmer var(--skeleton-duration) var(--motion-ease) infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2614,15 +3643,6 @@ button.modal-with-double-button-close-button {
   }
 }
 
-@keyframes skeleton-shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
 .base-step-progress:where(.root) {
     display: grid;
     grid-template-columns: repeat(var(--step-count), minmax(0, 1fr));
@@ -2951,6 +3971,77 @@ button.modal-with-double-button-close-button {
     z-index: var(--z-base);
   }
 
+.base-tag {
+  display: inline-flex;
+  align-items: center;
+
+  /* 지우기 버튼. 글자 옆 작은 X 지만 누르는 자리는 터치 44 로 넓힌다 */
+}
+
+.base-tag:where(.remove) {
+    position: relative;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: var(--cursor-button);
+  }
+
+.base-tag:where(.remove)::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--touch-target);
+      height: var(--touch-target);
+      transform: translate(-50%, -50%);
+    }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * tag                                                                                             *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* CTAButton secondary·Callout 과 같은 연보라 */
+
+.tag {
+  height: var(--label-height-s);
+  padding: 0 var(--spacing-12);
+  border-radius: var(--radius-full);
+  background-color: var(--color-purple-50);
+  color: var(--color-purple-900);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+
+  /* X 버튼 안에 여백이 있어 오른쪽을 줄인다 */
+}
+
+.tag.removable {
+    padding-right: var(--spacing-4);
+  }
+
+.tag-remove {
+  width: var(--label-height-xs);
+  height: var(--label-height-xs);
+  border-radius: var(--radius-full);
+  color: var(--color-purple-600);
+  transition: transform var(--motion-press-duration) var(--motion-press-ease);
+}
+
+.tag-remove:active {
+    transform: scale(var(--motion-press-scale));
+  }
+
+.tag-remove:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+  }
+
 .base-text-area:where(.textarea) {
     display: block;
     width: 100%;
@@ -3156,11 +4247,13 @@ button.modal-with-double-button-close-button {
 }
 
 .base-toast[data-state='open']:where(:not(.viewport,.title,.description,.action,.close)) {
-    animation: toast-in var(--motion-base) var(--motion-ease);
+    animation:
+      motion-enter-slide var(--motion-base) var(--motion-ease),
+      motion-enter-fade 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;
+    animation: motion-exit-fade var(--motion-fast) var(--motion-ease) forwards;
   }
 
 .base-toast[data-swipe='move']:where(:not(.viewport,.title,.description,.action,.close)) {
@@ -3173,7 +4266,9 @@ button.modal-with-double-button-close-button {
   }
 
 .base-toast[data-swipe='end']:where(:not(.viewport,.title,.description,.action,.close)) {
-    animation: toast-swipe-out var(--motion-fast) var(--motion-ease) forwards;
+    --motion-swipe-from: var(--radix-toast-swipe-end-x);
+    --motion-swipe-to: calc(100% + var(--spacing-24));
+    animation: motion-exit-swipe var(--motion-fast) var(--motion-ease) forwards;
   }
 
 .base-toast:where(.viewport) {
@@ -3189,13 +4284,13 @@ button.modal-with-double-button-close-button {
     list-style: none;
     outline: none;
     /* 아래에서 올라오는 자리를 기본으로 두고 position 클래스가 덮는다 */
-    --toast-enter: translateY(var(--spacing-16));
+    --motion-slide-offset: translateY(var(--spacing-16));
   }
 
 .base-toast.position-top-right:where(.viewport) {
       top: 0;
       right: 0;
-      --toast-enter: translateY(calc(-1 * var(--spacing-16)));
+      --motion-slide-offset: translateY(calc(-1 * var(--spacing-16)));
     }
 
 .base-toast.position-bottom-right:where(.viewport) {
@@ -3221,38 +4316,6 @@ button.modal-with-double-button-close-button {
     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;