@nurihaus/web-design-system 3.7.0 → 3.9.0

package/dist/styles.css

@@ -152,6 +152,74 @@
   --line-height-4xl: 43px;
   --line-height-5xl: 66px;
   --line-height-6xl: 82px;
+  --duration-xs: 120ms;
+  --duration-s: 160ms;
+  --duration-m: 240ms;
+  --duration-l: 350ms;
+  --duration-xl: 500ms;
+  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.1, 1);
+  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-symmetric: cubic-bezier(0.5, 0, 0.5, 1);
+  --ease-linear: linear;
+  --ease-spring-rapid: linear(0, 0.0273, 0.0945, 0.184, 0.2834, 0.384, 0.4804, 0.5691, 0.6483, 0.7174, 0.7764, 0.8259, 0.8667, 0.8999, 0.9264, 0.9473, 0.9634, 0.9757, 0.9849, 0.9916, 0.9964, 0.9996, 1.0017, 1.003, 1.0037, 1.0039, 1.0039, 1.0037, 1.0033, 1.003, 1.0026, 1.0022, 1.0018, 1.0015, 1.0012, 1.001, 1.0007, 1.0006, 1.0004, 1.0003, 1);
+  --duration-spring-rapid: 318ms;
+  --ease-spring-quick: linear(0, 0.024, 0.0825, 0.1604, 0.247, 0.3352, 0.4205, 0.5002, 0.5728, 0.6377, 0.6948, 0.7445, 0.7872, 0.8237, 0.8546, 0.8806, 0.9023, 0.9204, 0.9354, 0.9477, 0.9578, 0.9661, 0.9728, 0.9783, 0.9827, 0.9863, 0.9891, 0.9914, 0.9933, 0.9947, 0.9959, 0.9968, 0.9975, 0.9981, 0.9985, 0.9989, 0.9991, 0.9993, 0.9995, 0.9996, 1);
+  --duration-spring-quick: 334ms;
+  --ease-spring-small: linear(0, 0.0202, 0.069, 0.1334, 0.2049, 0.278, 0.3493, 0.417, 0.4799, 0.5375, 0.5898, 0.6369, 0.6791, 0.7167, 0.7501, 0.7798, 0.806, 0.8292, 0.8497, 0.8677, 0.8836, 0.8976, 0.91, 0.9208, 0.9304, 0.9388, 0.9462, 0.9527, 0.9584, 0.9634, 0.9679, 0.9717, 0.9752, 0.9782, 0.9808, 0.9831, 0.9852, 0.987, 0.9885, 0.9899, 0.9911, 0.9922, 0.9932, 0.994, 0.9947, 0.9954, 0.9959, 0.9964, 0.9968, 0.9972, 0.9976, 0.9979, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.999, 0.9991, 1);
+  --duration-spring-small: 587ms;
+  --ease-spring-medium: linear(0, 0.0121, 0.0444, 0.0919, 0.1501, 0.2152, 0.2844, 0.355, 0.4252, 0.4934, 0.5585, 0.6195, 0.6761, 0.7278, 0.7746, 0.8164, 0.8533, 0.8855, 0.9134, 0.9372, 0.9572, 0.9739, 0.9875, 0.9984, 1.007, 1.0136, 1.0184, 1.0217, 1.0238, 1.0249, 1.0252, 1.0248, 1.0239, 1.0227, 1.0212, 1.0196, 1.0178, 1.016, 1.0143, 1.0126, 1.0109, 1.0094, 1.008, 1.0067, 1.0055, 1.0045, 1.0036, 1.0028, 1.0021, 1.0015, 1.001, 1.0006, 1.0003, 1, 0.9998, 0.9996, 1);
+  --duration-spring-medium: 552ms;
+  --ease-spring-basic: linear(0, 0.0089, 0.0322, 0.0658, 0.1066, 0.152, 0.2001, 0.2493, 0.2986, 0.3471, 0.3941, 0.4393, 0.4824, 0.5232, 0.5615, 0.5974, 0.6309, 0.662, 0.6909, 0.7175, 0.7421, 0.7648, 0.7855, 0.8046, 0.8221, 0.8381, 0.8527, 0.8661, 0.8783, 0.8894, 0.8995, 0.9088, 0.9172, 0.9248, 0.9318, 0.9381, 0.9438, 0.949, 0.9538, 0.9581, 0.962, 0.9655, 0.9687, 0.9717, 0.9743, 0.9767, 0.9789, 0.9809, 0.9827, 0.9843, 0.9858, 0.9871, 0.9883, 0.9894, 0.9904, 0.9913, 0.9921, 0.9929, 0.9935, 0.9941, 0.9947, 0.9952, 0.9956, 0.9961, 0.9964, 0.9968, 0.9971, 0.9973, 0.9976, 0.9978, 0.998, 0.9982, 0.9984, 0.9985, 0.9987, 0.9988, 0.9989, 1);
+  --duration-spring-basic: 761ms;
+  --ease-spring-large: linear(0, 0.0047, 0.0179, 0.0383, 0.0648, 0.0961, 0.1315, 0.1699, 0.2106, 0.2529, 0.2963, 0.3401, 0.3838, 0.4272, 0.4699, 0.5115, 0.5518, 0.5906, 0.6278, 0.6633, 0.697, 0.7288, 0.7586, 0.7866, 0.8126, 0.8368, 0.859, 0.8795, 0.8983, 0.9154, 0.9309, 0.9449, 0.9575, 0.9687, 0.9786, 0.9874, 0.995, 1.0017, 1.0074, 1.0122, 1.0163, 1.0196, 1.0223, 1.0244, 1.0261, 1.0272, 1.0279, 1.0283, 1.0284, 1.0282, 1.0277, 1.0271, 1.0263, 1.0254, 1.0243, 1.0232, 1.0221, 1.0208, 1.0196, 1.0184, 1.0171, 1.0159, 1.0147, 1.0135, 1.0124, 1.0113, 1.0103, 1.0093, 1.0083, 1.0074, 1.0066, 1.0058, 1.0051, 1.0044, 1.0038, 1.0033, 1.0027, 1.0023, 1.0018, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1.0001, 0.9999, 0.9997, 0.9996, 1);
+  --duration-spring-large: 876ms;
+  --ease-spring-bounce: linear(0, 0.0142, 0.0537, 0.1139, 0.1902, 0.2784, 0.3743, 0.4741, 0.5747, 0.673, 0.7667, 0.8538, 0.9329, 1.0028, 1.063, 1.113, 1.153, 1.1831, 1.204, 1.2164, 1.221, 1.2189, 1.211, 1.1984, 1.182, 1.1629, 1.1419, 1.1199, 1.0977, 1.0758, 1.0549, 1.0354, 1.0176, 1.0018, 0.9881, 0.9767, 0.9675, 0.9605, 0.9555, 0.9525, 0.9512, 0.9514, 0.953, 0.9556, 0.9591, 0.9633, 0.9678, 0.9727, 0.9776, 0.9825, 0.9871, 0.9915, 0.9955, 0.9991, 1.0022, 1.0048, 1.0069, 1.0085, 1.0097, 1.0104, 1.0108, 1.0108, 1.0105, 1.0099, 1.0092, 1.0083, 1.0073, 1.0062, 1.0051, 1.0041, 1.003, 1.002, 1.0011, 1.0003, 0.9996, 0.999, 0.9985, 0.9982, 0.9979, 0.9977, 0.9976, 0.9976, 0.9977, 0.9978, 0.9979, 0.9981, 0.9984, 0.9986, 0.9988, 0.9991, 0.9993, 0.9995, 0.9997, 0.9999, 1.0001, 1.0002, 1);
+  --duration-spring-bounce: 958ms;
+  --ease-spring-slow: linear(0, 0.0033, 0.0122, 0.0257, 0.043, 0.0631, 0.0855, 0.1096, 0.135, 0.1612, 0.188, 0.215, 0.2421, 0.2691, 0.2958, 0.3221, 0.348, 0.3732, 0.3979, 0.4219, 0.4452, 0.4677, 0.4896, 0.5107, 0.5311, 0.5507, 0.5697, 0.5879, 0.6054, 0.6222, 0.6384, 0.654, 0.6689, 0.6832, 0.6969, 0.71, 0.7226, 0.7347, 0.7462, 0.7573, 0.7679, 0.778, 0.7877, 0.797, 0.8059, 0.8144, 0.8225, 0.8303, 0.8378, 0.8449, 0.8517, 0.8582, 0.8645, 0.8704, 0.8761, 0.8816, 0.8868, 0.8918, 0.8965, 0.9011, 0.9054, 0.9096, 0.9136, 0.9174, 0.921, 0.9245, 0.9278, 0.931, 0.934, 0.9369, 0.9397, 0.9424, 0.9449, 0.9473, 0.9497, 0.9519, 0.954, 0.956, 0.958, 0.9598, 0.9616, 0.9633, 0.9649, 0.9664, 0.9679, 0.9693, 0.9707, 0.972, 0.9732, 0.9744, 0.9755, 0.9766, 0.9776, 0.9786, 0.9796, 0.9805, 0.9813, 0.9821, 0.9829, 0.9837, 0.9844, 0.9851, 0.9857, 0.9864, 0.987, 0.9875, 0.9881, 0.9886, 0.9891, 0.9896, 0.9901, 0.9905, 0.9909, 0.9913, 0.9917, 0.9921, 0.9924, 0.9927, 0.9931, 0.9934, 0.9937, 0.9939, 0.9942, 0.9945, 0.9947, 0.9949, 0.9952, 0.9954, 0.9956, 0.9958, 0.996, 0.9961, 0.9963, 0.9965, 0.9966, 0.9968, 0.9969, 0.9971, 0.9972, 0.9973, 0.9974, 0.9975, 0.9976, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9982, 0.9983, 0.9984, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9988, 0.9989, 0.9989, 0.999, 1);
+  --duration-spring-slow: 1604ms;
+  --motion-press-duration: var(--duration-xs);
+  --motion-press-ease: var(--ease-out);
+  --motion-press-scale: 0.98;
+  --motion-press-dim: 0.12;
+  --motion-confirm-weak-ease: var(--ease-spring-small);
+  --motion-confirm-weak-duration: var(--duration-spring-small);
+  --motion-confirm-strong-ease: var(--ease-spring-bounce);
+  --motion-confirm-strong-duration: var(--duration-spring-bounce);
+  --motion-reject-duration: var(--duration-l);
+  --motion-reject-ease: var(--ease-linear);
+  --motion-reject-distance: 2px;
+  --motion-enter-duration: var(--duration-m);
+  --motion-enter-ease: var(--ease-out);
+  --motion-enter-strong-ease: var(--ease-spring-bounce);
+  --motion-enter-strong-duration: var(--duration-spring-bounce);
+  --motion-enter-scale-from: 0.96;
+  --motion-enter-offset: 16px;
+  --motion-enter-pop-scale: 0.6;
+  --motion-exit-duration: var(--duration-s);
+  --motion-exit-ease: var(--ease-in);
+  --motion-appear-duration: var(--duration-m);
+  --motion-appear-ease: var(--ease-out);
+  --motion-reveal-duration: var(--duration-m);
+  --motion-reveal-ease: var(--ease-out);
+  --motion-reveal-gap: 80ms;
+  --motion-progress-duration: var(--duration-m);
+  --motion-progress-spring-ease: var(--ease-spring-basic);
+  --motion-progress-spring-duration: var(--duration-spring-basic);
+  --motion-expand-duration: var(--duration-m);
+  --motion-expand-ease: var(--ease-out);
+  --motion-expand-rotate: 180deg;
+  --motion-dismiss-on-scroll-duration: var(--duration-m);
+  --motion-dismiss-on-scroll-ease: var(--ease-out);
+  --motion-dismiss-on-scroll-threshold: 1px;
+  --motion-attention-shine: 2500ms;
+  --motion-attention-blink: 300ms;
+  --motion-attention-float-distance: 3px;
+  --motion-busy-ring: 1200ms;
+  --motion-busy-ring-ease: var(--ease-symmetric);
+  --motion-busy-shimmer: 1500ms;
+  --motion-busy-dots: 600ms;
   /* 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field */
   --control-height-xs: 28px;
   --control-height-s: 36px;
@@ -216,6 +284,32 @@
   --bottom-nav-badge-count: 18px;
   --glass-blur: 18px;
 
+  /* 목록 행: list-row. 한 줄 이름에 보조 글이 붙어도 이 높이부터 */
+  --list-row-height: 56px;
+
+  /* 손가락 터치 영역. 보이는 크기가 작은 버튼(아이콘 버튼·빼기·보내기)이 이만큼 눌린다 */
+  --touch-target: 44px;
+
+  /* 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 */
+  --media-thumbnail-size-s: 64px;
+  --media-thumbnail-size-m: 96px;
+  --media-thumbnail-max-width: 240px;
+  --media-overlay-button-size: 36px;
+  --media-remove-size: 20px;
+  --media-invalid-border: 2px;
+
+  /* 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) */
+  --composer-send-size: 36px;
+  --composer-max-height: 132px;
+
+  /* 아이콘 버튼: icon-button. 보이는 원의 지름. 누르는 자리는 --touch-target 이상 */
+  --icon-button-size-s: 36px;
+  --icon-button-size-m: 44px;
+  --icon-button-size-l: 56px;
+
+  /* 빈 화면: empty-state 아이콘 원 */
+  --empty-state-icon-box: 64px;
+
   /* 진행 단계 바 */
   --step-bar-height: 4px;
 
@@ -255,7 +349,8 @@
   --z-modal: 9999;
   --z-toast: 10000;
 
-  /* 모션 */
+  /* 옛 모션 변수 */
+  /* 컴포넌트 작업(KAN-9516~9528)이 --motion-{토큰}-* 로 바꾸면 지운다. 새 코드는 쓰지 않는다. 새 토큰은 tokens/motion.json */
   --motion-fast: 160ms;
   --motion-base: 300ms;
   --motion-ease: ease;
@@ -379,8 +474,33 @@
   --button-size-l: 54;
   --button-size-xl: 60;
 }
+/* tokens/motion.json 에서 생성됨 — 손으로 고치지 않는다. `yarn tokens` */
+/* 시간을 0 으로 만들면 의미 토큰이 var() 로 따라온다. 끝 상태는 그대로 보인다 */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-xs: 0ms;
+    --duration-s: 0ms;
+    --duration-m: 0ms;
+    --duration-l: 0ms;
+    --duration-xl: 0ms;
+    --duration-spring-rapid: 0ms;
+    --duration-spring-quick: 0ms;
+    --duration-spring-small: 0ms;
+    --duration-spring-medium: 0ms;
+    --duration-spring-basic: 0ms;
+    --duration-spring-large: 0ms;
+    --duration-spring-bounce: 0ms;
+    --duration-spring-slow: 0ms;
+    --motion-reveal-gap: 0ms;
+    --motion-attention-shine: 0ms;
+    --motion-attention-blink: 0ms;
+    --motion-busy-ring: 0ms;
+    --motion-busy-shimmer: 0ms;
+    --motion-busy-dots: 0ms;
+  }
+}
 /*
- * 크기·두께·레이어·모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
+ * 크기·두께·레이어·옛 모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
  * 디자이너가 숫자를 바꾸는 곳은 여기다. 컴포넌트 CSS 는 숫자를 쓰지 않고 이 변수를 쓴다(빌드가 검사).
  * 크기 이름은 xs · s · m · l · xl 다섯 개다. 컴포넌트는 그중 지원하는 것만 고른다.
  */
@@ -585,6 +705,167 @@ p {
 .nuri-overflow-y-auto {
   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 {
   border-radius: 50%;
@@ -728,6 +1009,10 @@ p {
   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;
@@ -742,6 +1027,9 @@ p {
   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;
@@ -783,12 +1071,47 @@ p {
     background-color: var(--color-accent-red-50);
     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) {
     color: var(--color-black);
     background-color: var(--color-white);
     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);
@@ -1164,12 +1487,12 @@ p {
   /* 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다 (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;
 }
 .base-callout.tail-bottom-end {
@@ -1177,7 +1500,7 @@ p {
   }
 .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 {
     --callout-origin: calc(100% - var(--spacing-16)) 0;
@@ -1208,32 +1531,47 @@ p {
 .base-callout:is(.tail-bottom-end,.tail-top-end)::after {
     right: var(--spacing-12);
   }
-@keyframes callout-pop {
-  from {
-    opacity: 0;
-    transform: var(--callout-enter) scale(0.6);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes callout-float {
-  0%,
-  100% {
-    transform: none;
-  }
-
-  50% {
-    transform: translateY(calc(var(--spacing-6) / -2));
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .base-callout {
     animation: none;
   }
 }
+.base-card {
+  display: flex;
+  flex-direction: column;
+}
+/***************************************************************************************************
+ *                                                                                                 *
+ * card                                                                                            *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.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);
+}
+.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);
     font-weight: var(--font-weight-medium);
@@ -1444,6 +1782,53 @@ p {
   margin-top: var(--spacing-2);
   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) {
     position: fixed;
@@ -1455,10 +1840,10 @@ p {
     z-index: var(--z-overlay);
   }
 .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) {
     position: fixed;
@@ -1493,39 +1878,7 @@ p {
  * 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);
-  }
-}
+/* Radix 는 애니메이션이 끝나야 닫힌 패널을 지우므로 transition 이 아니라 keyframes 로 들어오고 나간다(styles/motion.css). */
 .drawer {
   gap: var(--spacing-8);
   padding: var(--spacing-24);
@@ -1549,7 +1902,7 @@ p {
     bottom: 0;
     width: var(--drawer-width);
     max-width: 100%;
-    --drawer-offset: translateX(100%);
+    --motion-slide-offset: translateX(100%);
   }
 .drawer.side-left {
     top: 0;
@@ -1557,7 +1910,7 @@ p {
     bottom: 0;
     width: var(--drawer-width);
     max-width: 100%;
-    --drawer-offset: translateX(-100%);
+    --motion-slide-offset: translateX(-100%);
   }
 .drawer.side-bottom {
     left: 0;
@@ -1567,13 +1920,13 @@ p {
     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 {
   display: flex;
@@ -2133,21 +2486,70 @@ p {
 .base-text.color-accent-orange-900[class*='color-'] {
       color: var(--color-accent-orange-900);
     }
-.base-icon {
-  flex-shrink: 0;
-  vertical-align: middle;
+/* 빈 목록·오류·찾을 수 없음·준비 중 화면. 가운데 세로로 쌓는다 */
+.base-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
-.icon.size-xs {
-    width: var(--icon-size-xs);
-    height: var(--icon-size-xs);
-  }
-.icon.size-s {
-    width: var(--icon-size-s);
-    height: var(--icon-size-s);
-  }
-.icon.size-m {
-    width: var(--icon-size-m);
-    height: var(--icon-size-m);
+/***************************************************************************************************
+ *                                                                                                 *
+ * 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;
+}
+.icon.size-xs {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+  }
+.icon.size-s {
+    width: var(--icon-size-s);
+    height: var(--icon-size-s);
+  }
+.icon.size-m {
+    width: var(--icon-size-m);
+    height: var(--icon-size-m);
   }
 .icon.size-l {
     width: var(--icon-size-l);
@@ -2157,6 +2559,193 @@ p {
     width: var(--icon-size-xl);
     height: var(--icon-size-xl);
   }
+.base-icon-button {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  cursor: var(--cursor-button);
+
+  /* 보이는 크기가 작아도(s 36) 누르는 자리는 터치 44 */
+}
+.base-icon-button::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--touch-target);
+    height: var(--touch-target);
+    transform: translate(-50%, -50%);
+  }
+.base-icon-button[data-disabled] {
+    cursor: var(--cursor-disabled);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * icon-button                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.icon-button {
+  border-radius: var(--radius-full);
+  transition:
+    transform var(--motion-press-duration) var(--motion-press-ease),
+    background-color var(--motion-press-duration) var(--motion-press-ease);
+}
+.icon-button:active:not([data-disabled]) {
+    transform: scale(var(--motion-press-scale));
+  }
+.icon-button:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: var(--spacing-2);
+  }
+.icon-button.size-s {
+    width: var(--icon-button-size-s);
+    height: var(--icon-button-size-s);
+  }
+.icon-button.size-m {
+    width: var(--icon-button-size-m);
+    height: var(--icon-button-size-m);
+  }
+.icon-button.size-l {
+    width: var(--icon-button-size-l);
+    height: var(--icon-button-size-l);
+  }
+/* 바탕 없이 아이콘만. 누르는 동안 회색 원이 보인다 */
+.icon-button.variant-ghost {
+    background-color: transparent;
+    color: var(--color-grey-scale-700);
+  }
+.icon-button.variant-ghost:active:not([data-disabled]) {
+      background-color: var(--color-grey-scale-100);
+    }
+/* CTAButton secondary 와 같은 연보라 */
+.icon-button.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+  }
+.icon-button.variant-primary {
+    background-color: var(--color-purple-900);
+    color: var(--color-white);
+  }
+.icon-button[data-disabled] {
+    color: var(--color-grey-scale-300);
+  }
+.icon-button[data-disabled]:is(.variant-secondary,.variant-primary) {
+      background-color: var(--color-grey-scale-200);
+      color: var(--color-white);
+    }
+.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%;
@@ -2220,7 +2809,7 @@ p {
   height: 100%;
   border: var(--spinner-stroke) solid;
   border-radius: 50%;
-  animation: lds-ring var(--spinner-duration) var(--spinner-ease) infinite;
+  animation: motion-busy-ring var(--spinner-duration) var(--spinner-ease) infinite;
   border-color: currentColor transparent transparent transparent;
 }
 .loading-indicator-single-ring:nth-child(1) {
@@ -2235,13 +2824,361 @@ p {
 .loading-indicator-single-ring:nth-child(4) {
   animation-delay: 0s;
 }
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
+/* 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);
   }
-  100% {
-    transform: rotate(360deg);
+.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;
+  }
+.message.side-end .message-row {
+    flex-direction: row-reverse;
+  }
+.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);
+  }
+/* 방금 보내거나 받은 메시지만 움직인다. 처음 그린 대화는 motion 이 없어 가만히 있다 */
+.message:is(.motion-weak,.motion-strong) {
+    --motion-slide-offset: translateY(var(--motion-enter-offset));
+  }
+.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);
+  }
+.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);
+  }
+.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);
+}
+.message-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-6);
+  max-width: 80%;
+}
+/* 보낸 쪽 아래 모서리만 덜 둥글다 */
+.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;
+}
+.message-bubble.media-only {
+    padding: var(--spacing-6);
+  }
+.message-time {
+  flex: none;
+  font-size: var(--font-size-xsm);
+  line-height: var(--line-height-xsm);
+  color: var(--color-grey-scale-500);
+}
+.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 에만 건다. */
 .base-modal:where(.modal-container, .modal-overlay) {
@@ -2286,6 +3223,11 @@ button.modal-with-double-button-close-button {
   background-color: transparent;
   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);
   }
@@ -2400,6 +3342,69 @@ button.modal-with-double-button-close-button {
   align-items: center;
   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;
@@ -2486,6 +3491,18 @@ button.modal-with-double-button-close-button {
 .base-radio:where(.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                                                                                           *
@@ -2533,6 +3550,46 @@ button.modal-with-double-button-close-button {
 .radio.radio-button[data-disabled] .radio-indicator {
     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;
@@ -2587,7 +3644,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) {
   .skeleton.animated:not(.multiline)::after,
@@ -2595,14 +3652,6 @@ button.modal-with-double-button-close-button {
     animation: none;
   }
 }
-@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));
@@ -2877,6 +3926,67 @@ button.modal-with-double-button-close-button {
     background-color: var(--color-purple-50);
     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%;
@@ -3045,10 +4155,12 @@ button.modal-with-double-button-close-button {
   list-style: none;
 }
 .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)) {
     transform: translateX(var(--radix-toast-swipe-move-x));
@@ -3058,7 +4170,9 @@ button.modal-with-double-button-close-button {
     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;
+    --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) {
     position: fixed;
@@ -3073,12 +4187,12 @@ 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) {
       right: 0;
@@ -3099,35 +4213,6 @@ button.modal-with-double-button-close-button {
     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;