@iyulab/components 1.18.0 → 1.21.0

package/dist/components/select/USelect.styles.js

@@ -24,7 +24,7 @@ var styles = css`
     border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 0.25em;
     background-color: var(--u-input-bg-color, #FFFFFF);
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    transition: border-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     overflow: hidden;
     user-select: none;
     cursor: pointer;
@@ -44,10 +44,10 @@ var styles = css`
     box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1976D2);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1565C0);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #D32F2F);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: filled ===== */
@@ -69,11 +69,11 @@ var styles = css`
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
+    border-bottom-color: var(--u-input-border-color-focus, #1565C0);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: underlined ===== */
@@ -96,12 +96,12 @@ var styles = css`
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
+    border-bottom-color: var(--u-input-border-color-focus, #1565C0);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: borderless ===== */
@@ -120,6 +120,8 @@ var styles = css`
   .count {
     color: var(--u-txt-color-weak, #757575);
     line-height: 1.25;
+    /* n / m 은 제자리에서 n 이 바뀐다 — 비례폭이면 선택할 때마다 라벨 줄이 흔들린다 */
+    font-variant-numeric: tabular-nums;
   }
 
   .text-content {
@@ -153,7 +155,7 @@ var styles = css`
     margin-left: 0.25em;
     font-size: 1em;
     color: var(--u-icon-color, #616161);
-    transition: color 0.2s ease;
+    transition: color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     cursor: pointer;
   }
   .suffix-item:hover {
@@ -173,7 +175,7 @@ var styles = css`
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-lg, 6px);
     background-color: var(--u-panel-bg-color, #FFFFFF);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--u-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.06));
     overflow-x: hidden;
     overflow-y: auto;
   }

package/dist/components/slider/USlider.styles.js

@@ -21,6 +21,14 @@ var styles = css`
     font-family: var(--u-font-base);
   }
 
+  /* 라이브러리가 **스스로 그리는 숫자**는 고정폭 자릿수로 낸다.
+     둘 다 제자리에서 값이 바뀌는 자리라 비례폭이면 드래그 중 글자가 흔들린다.
+     ★툴팁은 슬롯을 건너 상속으로 닿는다 — font-variant-numeric 은 상속 프로퍼티다. */
+  [slot="label-aside"],
+  u-tooltip[part="thumb-tooltip"] {
+    font-variant-numeric: tabular-nums;
+  }
+
   .container {
     position: relative;
     height: var(--slider-thumb-size);
@@ -67,14 +75,14 @@ var styles = css`
     border: 2px solid var(--slider-thumb-border-color);
     border-radius: var(--u-radius-circle, 50%);
     background: var(--slider-thumb-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04));
+    transition: transform var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     cursor: pointer;
   }
   .thumb:hover .thumb-content,
   .thumb:active .thumb-content {
     transform: scale(1.15);
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--u-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05));
   }
   .thumb:focus-visible .thumb-content {
     box-shadow: 0 0 0 1px var(--slider-fill-color);

package/dist/components/spinner/USpinner.d.ts

@@ -1,5 +1,6 @@
 import { UElement } from '../UElement.js';
-export type SpinnerColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/** 역할 축(`primary`…`danger`, 의미 · 리브랜딩을 따라옴)과 장식 축(`blue`…, 색 자체 · 면역)이 병존한다. */
+export type SpinnerColor = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
 /**
  * 로딩 상태를 나타내는 회전 스피너 컴포넌트입니다.
  *

package/dist/components/spinner/USpinner.styles.js

@@ -9,6 +9,14 @@ var styles = css`
   }
 
   /* Color variants */
+  /* 역할 축 — 스피너는 **바탕 위의 그래픽**이므로 면 단(-color)이 아니라 -strong 을
+     읽는다. 다크에서 -color 는 바탕 위 3.07 까지 떨어진다(Cycle 141 실측). */
+  :host([color="primary"]) { --spinner-indicator-color: var(--u-primary-color-strong, #1565C0); }
+  :host([color="info"])    { --spinner-indicator-color: var(--u-info-color-strong, #1565C0); }
+  :host([color="success"]) { --spinner-indicator-color: var(--u-success-color-strong, #1B5E20); }
+  :host([color="warning"]) { --spinner-indicator-color: var(--u-warning-color-strong, #8A4A00); }
+  :host([color="danger"])  { --spinner-indicator-color: var(--u-danger-color-strong, #C62828); }
+
   :host([color="blue"]) { --spinner-indicator-color: var(--u-blue-600, #1E88E5); }
   :host([color="green"]) { --spinner-indicator-color: var(--u-green-600, #43A047); }
   :host([color="yellow"]) { --spinner-indicator-color: var(--u-yellow-600, #FDD835); }

package/dist/components/split-panel/USplitPanel.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     --splitter-size: 4px;
     --splitter-color: var(--u-neutral-200, #EEEEEE);
     --splitter-color-hover: var(--u-primary-color-weaker, #64B5F6);
-    --splitter-color-active: var(--u-primary-color-weak, #2196F3);
+    --splitter-color-active: var(--u-primary-color-strong, #1565C0);
   }
 
   :host {
@@ -36,7 +36,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     background-color: var(--splitter-color);
-    transition: background-color 0.15s ease;
+    transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     touch-action: none;
   }
   .splitter:hover {

package/dist/components/switch/USwitch.styles.js

@@ -11,7 +11,10 @@ var styles = css`
     --switch-thumb-color: #fff;
     --switch-thumb-color-checked: #fff;
     --switch-radius: 9999px;
-    --switch-duration: 0.25s;
+    /* ★로컬 축이지만 **기본값은 공용 축에서 파생**한다 — 그러지 않으면
+       prefers-reduced-motion 이 이 컴포넌트만 비껴간다(축을 경유해야 함께 멈춘다).
+       소비자가 --switch-duration 을 덮으면 그 값이 이긴다(로컬 축의 존재 이유). */
+    --switch-duration: var(--u-duration-normal, 220ms);
     --switch-move-width: calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2);
   }
 
@@ -56,8 +59,8 @@ var styles = css`
   }
   input:focus-visible ~ .track {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1976D2),
-      0 0 0 3px rgba(59, 130, 246, 0.22);
+      0 0 0 1px var(--u-input-border-color-focus, #1565C0),
+      0 0 0 3px color-mix(in srgb, var(--u-primary-color-strong, #1565C0) 22%, transparent);
   }
 
   /* === 트랙 === */
@@ -70,7 +73,7 @@ var styles = css`
     height: var(--switch-track-height);
     border-radius: var(--switch-radius);
     background: var(--switch-track-color);
-    transition: background var(--switch-duration) ease;
+    transition: background var(--switch-duration) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([checked]) .track {
     background: var(--switch-track-color-checked);
@@ -92,7 +95,7 @@ var styles = css`
     line-height: 1;
     white-space: nowrap;
     pointer-events: none;
-    transition: opacity var(--switch-duration) ease;
+    transition: opacity var(--switch-duration) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   .track-checked {
     opacity: 0;
@@ -123,11 +126,11 @@ var styles = css`
     height: var(--switch-thumb-size);
     border-radius: var(--switch-radius);
     background: var(--switch-thumb-color);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04));
     overflow: hidden;
     transition:
-      transform var(--switch-duration) cubic-bezier(0.4, 0, 0.2, 1),
-      background var(--switch-duration) ease;
+      transform var(--switch-duration) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
+      background var(--switch-duration) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([checked]) .thumb {
     transform: translateX(var(--switch-move-width));
@@ -148,8 +151,8 @@ var styles = css`
     line-height: 1;
     pointer-events: none;
     transition:
-      opacity var(--switch-duration) ease,
-      transform var(--switch-duration) ease;
+      opacity var(--switch-duration) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
+      transform var(--switch-duration) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   .thumb-checked {
     opacity: 0;

package/dist/components/tab/UTab.styles.js

@@ -48,7 +48,7 @@ var styles = css`
     font-size: 0.75em;
     color: inherit;
     opacity: 0.5;
-    transition: opacity 0.15s ease;
+    transition: opacity var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   .remove-btn:hover {
     opacity: 1;

package/dist/components/tab-panel/UTabPanel.styles.js

@@ -188,7 +188,7 @@ var styles = css`
   :host([variant="pill"]) ::slotted(u-tab[active]) {
     border-color: var(--u-border-color, #E0E0E0);
     background-color: var(--u-neutral-0, #FFFFFF);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.04));
   }
 
   /* Variant: plain */

package/dist/components/tag/UTag.d.ts

@@ -1,6 +1,11 @@
 import { UElement } from '../UElement.js';
 export type TagVariant = "solid" | "surface" | "filled" | "outlined";
-export type TagColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/**
+ * 두 축이 병존한다 — **역할 축**(`primary`·`info`·`success`·`warning`·`danger`)은 *의미*를
+ * 말하고 리브랜딩을 따라오며 대비 계약을 물려받는다. **장식 축**(`blue`·`purple` …)은
+ * *색 자체*를 말하고 리브랜딩에 의도적으로 면역이다.
+ */
+export type TagColor = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
 /**
  * 레이블, 카테고리, 상태 등을 표시하는 태그 컴포넌트입니다.
  *

package/dist/components/tag/UTag.styles.js

@@ -8,6 +8,57 @@ var styles = css`
     --tag-border-color: transparent;
   }
 
+  /* ==========================================================================
+     역할 축 — 의미 슬롯 매핑
+     color="danger" 는 색이 아니라 *"위험"* 을 뜻한다. 장식 축(아래)과 달리 팔레트가 아니라
+     **역할 토큰**을 읽으므로 리브랜딩을 따라오고, 대비 계약이 지키는 짝을 물려받는다.
+
+     슬롯이 여섯인 이유는 자리마다 대비 요구가 다르기 때문이다(실측, 두 테마 전건 AA):
+       solid    면 --u-{role}-color        + 그 위 글자 --u-{role}-txt-color   (4.60~15.05)
+       surface  연한 면 --u-{role}-bg-color + 그 위 글자 --u-{role}-color-strong (4.58~7.00)
+       outlined 바탕 위 글자 --u-{role}-color-strong                            (계약 검사 대상)
+     ========================================================================== */
+  :host([color="primary"]) {
+    --tag-hue-solid: var(--u-primary-color, #1976D2);
+    --tag-hue-on-solid: var(--u-primary-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-primary-color-weak, #2196F3);
+    --tag-hue-surface: var(--u-primary-bg-color, #E3F2FD);
+    --tag-hue-text: var(--u-primary-color-strong, #1565C0);
+    --tag-hue-text-outlined: var(--u-primary-color-strong, #1565C0);
+  }
+  :host([color="info"]) {
+    --tag-hue-solid: var(--u-info-color, #1976D2);
+    --tag-hue-on-solid: var(--u-info-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-info-color-weak, #2196F3);
+    --tag-hue-surface: var(--u-info-bg-color, #E3F2FD);
+    --tag-hue-text: var(--u-info-color-strong, #1565C0);
+    --tag-hue-text-outlined: var(--u-info-color-strong, #1565C0);
+  }
+  :host([color="success"]) {
+    --tag-hue-solid: var(--u-success-color, #2E7D32);
+    --tag-hue-on-solid: var(--u-success-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-success-color-weak, #4CAF50);
+    --tag-hue-surface: var(--u-success-bg-color, #E8F5E9);
+    --tag-hue-text: var(--u-success-color-strong, #1B5E20);
+    --tag-hue-text-outlined: var(--u-success-color-strong, #1B5E20);
+  }
+  :host([color="warning"]) {
+    --tag-hue-solid: var(--u-warning-color, #FDD835);
+    --tag-hue-on-solid: var(--u-warning-txt-color, #000000);
+    --tag-hue-line: var(--u-warning-color-weak, #FFEB3B);
+    --tag-hue-surface: var(--u-warning-bg-color, #FFF59D);
+    --tag-hue-text: var(--u-warning-color-strong, #8A4A00);
+    --tag-hue-text-outlined: var(--u-warning-color-strong, #8A4A00);
+  }
+  :host([color="danger"]) {
+    --tag-hue-solid: var(--u-danger-color, #D32F2F);
+    --tag-hue-on-solid: var(--u-danger-txt-color, #FFFFFF);
+    --tag-hue-line: var(--u-danger-color-weak, #F44336);
+    --tag-hue-surface: var(--u-danger-bg-color, #FFEBEE);
+    --tag-hue-text: var(--u-danger-color-strong, #C62828);
+    --tag-hue-text-outlined: var(--u-danger-color-strong, #C62828);
+  }
+
   /* ==========================================================================
      장식 축 — 색 슬롯 매핑
      color="purple" 에는 역할 의미가 없다(장식이다). 그래서 역할 토큰이 아니라
@@ -82,7 +133,9 @@ var styles = css`
 
   /* Variant: solid (강한 채움, 색 미지정 시 --tag-fill-color = 브랜드) */
   :host([variant="solid"]) {
-    --tag-color: var(--u-neutral-0, #FFFFFF);
+    /* 면 위의 글자. 장식 축은 슬롯이 비어 흰색으로 떨어진다(현행 보존) — 역할 축에서만
+       갈린다. warning 이 그 이유다: 노란 면 위의 흰 글자는 읽히지 않는다. */
+    --tag-color: var(--tag-hue-on-solid, var(--u-neutral-0, #FFFFFF));
     --tag-bg-color: var(--tag-hue-solid, var(--tag-fill-color));
     --tag-border-color: var(--tag-hue-solid, var(--tag-fill-color));
   }
@@ -110,7 +163,7 @@ var styles = css`
 
   :host {
     display: inline-flex;
-    font-size: 12px;
+    font-size: var(--u-text-caption-size, 12px);
     font-weight: 500;
     border-radius: var(--u-radius-md, 4px);
 

package/dist/components/textarea/UTextarea.styles.js

@@ -15,7 +15,7 @@ var styles = css`
     border: 1px solid var(--u-input-border-color, #E0E0E0);
     border-radius: 0.25em;
     background-color: var(--u-input-bg-color, #FFFFFF);
-    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    transition: border-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), box-shadow var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), background-color var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
   }
   :host([readonly]) .container,
   :host([disabled]) .container {
@@ -26,10 +26,10 @@ var styles = css`
     box-shadow: 0 0 0 1px var(--u-input-border-color-hover, #BDBDBD);
   }
   :host(:not([readonly]):not([disabled])) .container:focus-within {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1976D2);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus, #1565C0);
   }
   :host([invalid]:not([readonly]):not([disabled])) .container {
-    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #D32F2F);
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: filled ===== */
@@ -51,11 +51,11 @@ var styles = css`
   }
   :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
+    border-bottom-color: var(--u-input-border-color-focus, #1565C0);
   }
   :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: underlined ===== */
@@ -78,12 +78,12 @@ var styles = css`
   }
   :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-focus, #1976D2);
+    border-bottom-color: var(--u-input-border-color-focus, #1565C0);
     border-bottom-width: 2px;
   }
   :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
     box-shadow: none;
-    border-bottom-color: var(--u-input-border-color-invalid, #D32F2F);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: borderless ===== */

package/dist/components/tooltip/UTooltip.styles.js

@@ -8,13 +8,13 @@ var styles = css`
   :host {
     color: var(--u-tooltip-txt-color, #FFFFFF);
     font-family: var(--u-font-display, inherit);
-    font-size: 12px;
+    font-size: var(--u-text-caption-size, 12px);
     line-height: 1.25;
     border-radius: var(--u-radius-md, 4px);
     background-color: var(--u-tooltip-bg-color, rgba(0, 0, 0, 0.75));
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--u-shadow-xl, 0 6px 18px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.08));
     transform: scale(0.9);
-    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
+    transition: opacity var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), transform var(--u-duration-normal, 220ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), visibility 0s var(--u-duration-normal, 220ms);
 
     --tooltip-padding-block: var(--u-space-xs, 6px);
     --tooltip-padding-inline: var(--u-space-sm, 8px);

package/dist/components/tree-item/UTreeItem.styles.js

@@ -27,7 +27,7 @@ var styles = css`
       var(--tree-indent-size) * var(--tree-item-depth)
       + var(--tree-indent-guide-offset)
     );
-    transition: background-color 0.15s ease, color 0.15s ease;
+    transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     user-select: none;
     cursor: pointer;
   }
@@ -89,7 +89,7 @@ var styles = css`
     border-radius: var(--u-radius-sm, 3px);
     border: 1.5px solid var(--u-input-border-color, #E0E0E0);
     background-color: transparent;
-    transition: background-color 0.15s ease, border-color 0.15s ease;
+    transition: background-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1)), border-color var(--u-duration-fast, 140ms) var(--u-ease-standard, cubic-bezier(0.2, 0, 0, 1));
     cursor: pointer;
   }
   .prefix-checkbox u-icon {

package/dist/styles/dark.css

@@ -194,6 +194,11 @@
   --u-radius-md:     4px;
   --u-radius-lg:     6px;
   --u-radius-xl:     8px;
+  /* ★상단 2단은 **면(surface)용**이다 — 카드·패널·대화상자처럼 큰 사각형은 컨트롤과
+     같은 반경을 쓰면 각져 보인다. 기존 5단은 **컨트롤용**이고 값을 바꾸지 않는다
+     (바꾸면 모든 소비자의 버튼·입력이 동시에 움직인다). */
+  --u-radius-2xl:   12px;
+  --u-radius-3xl:   16px;
   --u-radius-pill:   9999px;
   --u-radius-circle: 50%;
 
@@ -210,6 +215,16 @@
   --u-space-sm:   8px;
   --u-space-md:  12px;
   --u-space-lg:  16px;
+  /* ★상단 4단은 **화면 리듬**이다 — 카드 안쪽 여백(20~24)·섹션 간격(24~32)·페이지 여백
+     (32~40). 종전에는 이 구간이 통째로 비어 있어 소비자가 전부 리터럴로 적었고,
+     그래서 앱마다 화면 밀도가 달라졌다. `lg`(16px) 이하는 **요소 사이**, `xl` 이상은
+     **영역 사이**로 나눠 쓴다.
+     ⚠`xs: 6px` 는 4px 격자에서 벗어나 있으나 **바꾸지 않는다** — 이미 배선된 컨트롤
+     여백이 전부 움직인다. 신규 단은 전부 4의 배수로 둔다. */
+  --u-space-xl:  20px;
+  --u-space-2xl: 24px;
+  --u-space-3xl: 32px;
+  --u-space-4xl: 40px;
 
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
@@ -246,10 +261,12 @@
   --u-border-color-strong:   var(--u-neutral-500);
   --u-border-color-hover:    var(--u-neutral-500);
 
+  /* ★상태 테두리는 `-strong` 단이다 — light.css 의 같은 자리 주석 참조.
+     이 테마가 실제로 미달이었다: focus 2.74 · invalid 2.44 → 4.74 / 4.34. */
   --u-input-border-color:         var(--u-neutral-400);
   --u-input-border-color-hover:   var(--u-neutral-500);
-  --u-input-border-color-focus:   var(--u-primary-color);
-  --u-input-border-color-invalid: var(--u-danger-color);
+  --u-input-border-color-focus:   var(--u-primary-color-strong);
+  --u-input-border-color-invalid: var(--u-danger-color-strong);
 
   /* Background Colors */
   --u-bg-color:              var(--u-neutral-100);
@@ -285,13 +302,99 @@
   --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);
   --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);
 
+  /* Elevation Scale — 근거는 light.css 의 같은 자리 주석 참조.
+     ★다크는 알파가 3배 가까이 진하다 — 리터럴로 흩어져 있던 종전에는 이 차이가
+     적용되지 않아 다크에서 그림자가 사실상 보이지 않았다. */
+  --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.14);    /* = shadow-color-weak */
+  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.18);    /* = shadow-color-normal */
+  --u-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.22);   /* = shadow-color-strong */
+  --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);   /* = shadow-color-stronger */
+
+
+  /* ==========================================================================
+     Type Scale — 글자 크기·굵기·행간·자간의 **한 벌**
+     ★**크기만 주면 스케일이 되지 않는다.** 소비자가 크기만 받고 굵기·행간을 각자 정하면
+     결국 화면마다 다른 위계가 생긴다 — 그래서 네 값을 **단 단위로 묶어** 낸다.
+
+     단 이름은 크기가 아니라 **역할**이다(`lg`/`xl` 이 아니라 `title`/`label`). 역할로 두면
+     소비자가 *"어느 크기를 쓸까"* 가 아니라 *"이 글자는 무엇인가"* 를 묻게 된다.
+
+     ★**한글 기준으로 값을 골랐다**:
+       ⑴ 행간은 **1.4 이상**. 라틴 관례(1.2)는 한글에서 답답하다 — 받침 때문에 글자 상자가
+          세로로 꽉 차 있어 라틴과 같은 행간이면 줄이 붙어 보인다.
+       ⑵ 자간은 **0 이 기본**이고 큰 제목만 **음수**. 한글에 양수 자간(letter-spacing)을 주면
+          가독성이 떨어진다 — 라틴 소문자 조판 관례를 그대로 옮기면 안 되는 자리다.
+       ⑶ `overline` 에만 양수 자간을 둔다. 그 단은 **영문·숫자 라벨**을 전제한 자리이고,
+          한글을 넣을 소비자는 자간을 0 으로 덮어야 한다(문서에 명시).
+
+     ⚠**`text-transform` 은 토큰으로 내지 않는다.** 한글에는 대문자가 없어 `uppercase` 가
+       아무 효과가 없고, 영문이 섞이면 그것만 커져 오히려 어수선해진다.
+     ========================================================================== */
+  --u-text-display-size:     26px;
+  --u-text-display-weight:   700;
+  --u-text-display-leading:  1.4;
+  --u-text-display-tracking: -0.02em;
+
+  --u-text-title-size:       20px;
+  --u-text-title-weight:     700;
+  --u-text-title-leading:    1.45;
+  --u-text-title-tracking:   -0.01em;
+
+  --u-text-subtitle-size:    16px;
+  --u-text-subtitle-weight:  600;
+  --u-text-subtitle-leading: 1.5;
+  --u-text-subtitle-tracking: 0;
+
+  --u-text-body-size:        14px;
+  --u-text-body-weight:      400;
+  --u-text-body-leading:     1.6;
+  --u-text-body-tracking:    0;
+
+  --u-text-label-size:       13px;
+  --u-text-label-weight:     600;
+  --u-text-label-leading:    1.5;
+  --u-text-label-tracking:   0;
+
+  --u-text-caption-size:     12px;
+  --u-text-caption-weight:   400;
+  --u-text-caption-leading:  1.5;
+  --u-text-caption-tracking: 0;
+
+  --u-text-overline-size:    11px;
+  --u-text-overline-weight:  700;
+  --u-text-overline-leading: 1.45;
+  --u-text-overline-tracking: 0.06em;
+
+  /* ==========================================================================
+     Motion — 지속시간·이징
+     ★값이 없으면 앱마다 다른 속도가 생기고, `prefers-reduced-motion` 은 **반드시**
+     빠뜨리는 앱이 나온다. 축을 여기 두고 존중 규칙은 아래 미디어 쿼리가 진다.
+     ========================================================================== */
+  --u-duration-instant: 80ms;
+  --u-duration-fast:   140ms;
+  --u-duration-normal: 220ms;
+  --u-duration-slow:   320ms;
+  --u-ease-standard:   cubic-bezier(0.2, 0, 0, 1);
+  --u-ease-decelerate: cubic-bezier(0, 0, 0, 1);
+  --u-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+
   /* Scrollbar Colors */
   --u-scrollbar-color:       var(--u-neutral-500);
   --u-scrollbar-color-hover: var(--u-neutral-600);
   --u-scrollbar-track-color: transparent;
 
-  /* Font Styles */
-  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  /* ==========================================================================
+     Font Styles
+     ★**CJK 폴백을 스택에 포함한다 — 국제화이지 취향이 아니다.**
+     종전 스택(`-apple-system, Segoe UI, Noto Sans, Helvetica, Arial`)에는 **한중일 글립을
+     가진 폰트가 하나도 없었다.** Windows 에서 한글은 `Segoe UI` 에 없으므로 UA 가 임의로
+     맑은 고딕을 고르고, macOS 는 `-apple-system` 이 Apple SD Gothic Neo 를 준다 ⇒ **같은 앱이
+     OS 마다 다른 글꼴로 렌더**됐다. 폴백을 명시하면 그 선택이 결정적이 된다.
+     ⚠**웹폰트를 로드하지 않는다.** 라이브러리가 네트워크 요청을 만들면 소비자의 CSP·
+     오프라인 환경을 깬다. 스택 맨 앞의 `Pretendard` 는 **소비자가 로드했을 때만** 잡히는
+     선택적 이름이다(없으면 조용히 다음으로 넘어간다).
+     ========================================================================== */
+  --u-font-base:    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Hiragino Sans', 'Yu Gothic UI', 'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;
   --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;
   --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;