@iyulab/components 1.15.0 → 1.20.0

package/dist/components/radio/URadio.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/radio/URadio.styles.ts
 var styles = css`
   :host {
-    --radio-color: var(--u-primary-color, #1E88E5);
+    --radio-color: var(--u-primary-color, #1976D2);
     --radio-color-active: color-mix(in srgb, var(--radio-color) 85%, black);
   }
 
@@ -38,7 +38,7 @@ var styles = css`
     border-radius: 0.35em;
   }
   :host([invalid]) .container {
-    border-color: var(--u-danger-color, #E53935);
+    border-color: var(--u-danger-color, #D32F2F);
   }
 
   /* Type: default */

package/dist/components/rating/URating.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/rating/URating.styles.ts
 var styles = css`
   :host {
-    --rating-symbol-color: var(--u-warning-color-weak, #FFEB3B);
+    --rating-symbol-color: var(--u-warning-color-strong, #8A4A00);
     --rating-symbol-off-color: var(--u-neutral-300, #E0E0E0);
   }
 
@@ -32,7 +32,7 @@ var styles = css`
     transition: color 0.15s ease, transform 0.15s ease;
   }
   .symbol:focus-visible {
-    outline: 2px solid var(--u-primary-color-weak, #2196F3);
+    outline: 2px solid var(--u-primary-color-strong, #1565C0);
     outline-offset: 2px;
   }
   :host(:not([disabled]):not([readonly])) .symbol:hover {

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

@@ -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, #1E88E5);
+    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, #E53935);
+    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, #1E88E5);
+    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, #E53935);
+    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, #1E88E5);
+    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, #E53935);
+    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 {
@@ -157,10 +159,10 @@ var styles = css`
     cursor: pointer;
   }
   .suffix-item:hover {
-    color: var(--u-icon-color-hover, #1E88E5);
+    color: var(--u-icon-color-hover, #1565C0);
   }
   .suffix-item:active {
-    color: var(--u-icon-color-active, #1E88E5);
+    color: var(--u-icon-color-active, #1565C0);
   }
 
   /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로
@@ -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));
     overflow-x: hidden;
     overflow-y: auto;
   }

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/slider/USlider.styles.ts
 var styles = css`
   :host {
-    --slider-fill-color: var(--u-primary-color, #1E88E5);
+    --slider-fill-color: var(--u-primary-color, #1976D2);
     --slider-track-color: var(--u-neutral-300, #E0E0E0);
     --slider-track-height: 6px;
     --slider-thumb-size: 18px;
@@ -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);
+    box-shadow: var(--u-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
     transition: transform 0.15s ease, box-shadow 0.15s ease;
     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));
   }
   .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

@@ -4,11 +4,19 @@ var styles = css`
   :host {
     --spinner-track-width: 0.125em;
     --spinner-track-color: var(--u-neutral-200, #EEEEEE);
-    --spinner-indicator-color: var(--u-primary-color, #1E88E5);
+    --spinner-indicator-color: var(--u-primary-color, #1976D2);
     --spinner-indicator-speed: 2s;
   }
 
   /* 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 {

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

@@ -5,7 +5,7 @@ var styles = css`
     --switch-track-width: 2.4em;
     --switch-track-height: 1.4em;
     --switch-track-color: var(--u-neutral-300, #E0E0E0);
-    --switch-track-color-checked: var(--u-primary-color, #1E88E5);
+    --switch-track-color-checked: var(--u-primary-color, #1976D2);
     --switch-thumb-size: 1.1em;
     --switch-thumb-offset: 0.15em;
     --switch-thumb-color: #fff;
@@ -34,7 +34,7 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) .track {
-    outline: 2px solid var(--u-danger-color, #E53935);
+    outline: 2px solid var(--u-danger-color, #D32F2F);
     outline-offset: 1px;
   }
   :host(:not([disabled]):not([readonly]):hover) .track {
@@ -56,8 +56,8 @@ var styles = css`
   }
   input:focus-visible ~ .track {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
-      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);
   }
 
   /* === 트랙 === */
@@ -123,7 +123,7 @@ 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));
     overflow: hidden;
     transition:
       transform var(--switch-duration) cubic-bezier(0.4, 0, 0.2, 1),
@@ -176,7 +176,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
     font-weight: 500;
   }
 
@@ -188,7 +188,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
 `;
 //#endregion

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/tab-panel/UTabPanel.styles.ts
 var styles = css`
   :host {
-    --tab-panel-color: var(--u-primary-color, #1E88E5);
+    --tab-panel-color: var(--u-primary-color, #1976D2);
   }
 
   :host {
@@ -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));
   }
 
   /* 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

@@ -2,12 +2,63 @@ import { css } from "lit";
 //#region src/components/tag/UTag.styles.ts
 var styles = css`
   :host {
-    --tag-fill-color: var(--u-primary-color, #1E88E5);
+    --tag-fill-color: var(--u-primary-color, #1976D2);
     --tag-color: var(--u-neutral-800, #424242);
     --tag-bg-color: var(--u-neutral-100, #F5F5F5);
     --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));
   }

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

@@ -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, #1E88E5);
+    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, #E53935);
+    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, #1E88E5);
+    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, #E53935);
+    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, #1E88E5);
+    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, #E53935);
+    border-bottom-color: var(--u-input-border-color-invalid, #C62828);
   }
 
   /* ===== Variant: borderless ===== */

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

@@ -12,7 +12,7 @@ var styles = css`
     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));
     transform: scale(0.9);
     transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
 

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --tree-item-depth: 0;
-    --tree-item-color: var(--u-primary-color, #1E88E5);
+    --tree-item-color: var(--u-primary-color, #1976D2);
   }
 
   :host {

package/dist/styles/dark.css

@@ -140,21 +140,30 @@
      단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는
      소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느
      단인지 같은 모순이 생긴다.
+
+     ★**다만 두 단은 용도가 확정돼 있다** — 대비 요구가 서로 다르기 때문이다.
+        `-color`  = **면**. `--u-*-txt-color` 가 그 위에 얹히므로 on-color 기준 4.5.
+        `-strong` = **글자·아이콘**. `--u-bg-color` 위에 놓이므로 바탕 기준 4.5.
+     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 한 조건으로 합쳐지지만,
+     **다크에서는 정반대 방향**이다(바탕 #121212 · on-color #FFFFFF). 바탕에서 읽히는
+     밝은 단은 흰 글자를 못 받고, 흰 글자를 받는 어두운 단은 바탕에서 안 읽힌다.
+     ⇒ 다크에서 `-color` 와 `-strong` 이 두 단 벌어지는 것이 그 결과다.
+     `tests/build/token-contrast.test.ts` 가 값을 지킨다.
      ========================================================================== */
 
   /* primary — 브랜드 · 강조 · 포커스 · 링크 */
   --u-primary-color-weakest:     var(--u-blue-200);
   --u-primary-color-weaker:      var(--u-blue-300);
   --u-primary-color-weak:        var(--u-blue-500);
-  --u-primary-color:             var(--u-blue-600);
-  --u-primary-color-strong:      var(--u-blue-700);
+  --u-primary-color:             var(--u-blue-600);  /* 면: 흰 글자 6.09 ✓ */
+  --u-primary-color-strong:      var(--u-blue-800);  /* 글자: 바탕 5.32 ✓ (700 은 4.05 ✗) */
 
   /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */
   --u-info-color-weakest:        var(--u-blue-200);
   --u-info-color-weaker:         var(--u-blue-300);
   --u-info-color-weak:           var(--u-blue-500);
   --u-info-color:                var(--u-blue-600);
-  --u-info-color-strong:         var(--u-blue-700);
+  --u-info-color-strong:         var(--u-blue-800);
 
   /* success — 성공 · 완료 */
   --u-success-color-weakest:     var(--u-green-200);
@@ -174,8 +183,8 @@
   --u-danger-color-weakest:      var(--u-red-200);
   --u-danger-color-weaker:       var(--u-red-300);
   --u-danger-color-weak:         var(--u-red-500);
-  --u-danger-color:              var(--u-red-600);
-  --u-danger-color-strong:       var(--u-red-700);
+  --u-danger-color:              var(--u-red-600);  /* 면: 흰 글자 6.83 ✓ */
+  --u-danger-color-strong:       var(--u-red-800);  /* 글자: 바탕 4.87 ✓ (700 은 3.67 ✗) */
   /* ==========================================================================
      Radius Scale — 모서리 반경
      리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
@@ -206,14 +215,17 @@
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
 
-  /* 유채색 배경 위의 글자 — 두 테마 모두 흰색이다(light.css 참조). */
+  /* 유채색 배경 위의 글자 — warning 만 다르다(light.css 참조). */
   --u-primary-txt-color:     #FFFFFF;
   --u-info-txt-color:        #FFFFFF;
   --u-success-txt-color:     #FFFFFF;
   --u-danger-txt-color:      #FFFFFF;
-  --u-warning-txt-color:     #FFFFFF;
-  --u-txt-color-hover:       var(--u-primary-color);
-  --u-txt-color-active:      var(--u-primary-color);
+  /* ★라이트 시트와 같은 이유로 중립 최상단을 쓴다 — 다크에서는 그 값이 #FFFFFF 라
+     결과가 종전과 같다(4.65 ✓). 리터럴 대신 토큰을 쓰는 이유는 라이트에서 뒤집히기
+     때문이다(#000000). 두 시트가 같은 선언이 되어 어긋날 자리가 없어진다. */
+  --u-warning-txt-color:     var(--u-neutral-1000);
+  --u-txt-color-hover:       var(--u-primary-color-strong);
+  --u-txt-color-active:      var(--u-primary-color-strong);
   --u-txt-color-disabled:    var(--u-neutral-500);
   --u-txt-color-weak:        var(--u-neutral-700);
   --u-txt-color-strong:      var(--u-neutral-1000);
@@ -224,8 +236,8 @@
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-800);
   --u-icon-color-inverse:    var(--u-neutral-100);
-  --u-icon-color-hover:      var(--u-primary-color);
-  --u-icon-color-active:     var(--u-primary-color);
+  --u-icon-color-hover:      var(--u-primary-color-strong);
+  --u-icon-color-active:     var(--u-primary-color-strong);
   --u-icon-color-disabled:   var(--u-neutral-500);
 
   /* Border Colors */
@@ -234,10 +246,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);
@@ -245,6 +259,12 @@
   --u-bg-color-hover:        var(--u-neutral-300);
   --u-bg-color-active:       var(--u-neutral-400);
   --u-bg-color-disabled:     var(--u-neutral-100);
+
+  /* 면 높이 — 상세는 light.css 참조. 다크는 **바탕보다 밝은 쪽**이 위다.
+     neutral-300(#2A2A2A)은 바탕(#121212) 대비 1.42 로, 소비 측이 오버라이드로 쓰던
+     neutral-200(1.15)보다 실제로 더 잘 구분된다 — 그 오버라이드가 해결하려던 증상이
+     *"툴바·헤더가 배경에 묻힌다"* 였다. */
+  --u-bg-color-raised:       var(--u-neutral-300);
   
   /* 유채색 표면 — 라이트와 **같은 단이 아니라 같은 세기**로 짝지었다(light.css 참조).
      팔레트 유채색 틴트가 다크에서 짓눌리므로 한 단 위를 쓴다. green 은 대칭이라 그대로. */
@@ -252,6 +272,8 @@
   --u-info-bg-color:         var(--u-blue-100);
   --u-success-bg-color:      var(--u-green-0);
   --u-danger-bg-color:       var(--u-red-100);
+  /* warning 합류 — 라이트는 yellow-200 이다(단 이름이 다른 이유는 light.css 참조). */
+  --u-warning-bg-color:      var(--u-yellow-100);
 
   --u-input-bg-color:        var(--u-neutral-200);
   --u-panel-bg-color:        var(--u-neutral-200);
@@ -265,6 +287,14 @@
   --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);    /* = shadow-color-weak */
+  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);    /* = shadow-color-normal */
+  --u-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45);   /* = shadow-color-strong */
+  --u-shadow-xl: 0 6px 18px rgba(0, 0, 0, 0.60);   /* = shadow-color-stronger */
+
   /* Scrollbar Colors */
   --u-scrollbar-color:       var(--u-neutral-500);
   --u-scrollbar-color-hover: var(--u-neutral-600);