@iyulab/components 1.15.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,182 @@
 # Changelog
 
+## [1.18.0] - 2026-08-02
+
+### Added
+
+- **`--u-bg-color-raised`** — 바탕에 인접해 있으면서 한 단 구분되는 **크롬 면**
+  (툴바 · 표 헤더 · 푸터 · 페이지네이션).
+
+  ```
+  라이트  neutral-50  (#FAFAFA)   다크  neutral-300 (#2A2A2A)
+  ```
+
+  종전에는 배경 역할 토큰이 **상호작용 상태 이름뿐**이었다(`-hover`·`-active`·
+  `-disabled`). *"바탕보다 한 단 올라온 면"* 을 뜻할 수단이 없어, 소비 패키지가
+  `:host-context([theme="dark"])` 로 다크만 손으로 보정했다 — 그리고 그 선택자는
+  **Firefox·Safari 에서 미지원**이라 그 브라우저에서는 다크가 적용된 적이 없었다.
+
+  ⚠**`--u-panel-bg-color` 와 다르다.** 그쪽은 *떠 있는* 패널(카드·대화상자·메뉴)이라
+  라이트에서 페이지와 같은 흰색이고 그림자가 높이를 나른다. 크롬 면은 그림자가 없어
+  라이트에서도 틴트가 필요하다.
+
+  ⚠**한 단만 정의한다.** 두 단째의 실측 수요는 라이트 한쪽뿐이었고, 다크에서는 소비 측
+  오버라이드가 두 값을 이미 같은 단으로 합치고 있었다. 상호작용 상태 축에 높이를 얹지도
+  않는다 — 의미가 어긋난다.
+
+## [1.17.0] - 2026-08-02
+
+### Fixed
+
+- ★**알림(`u-alert`) 아이콘이 알림 배경 위에서 보이지 않던 문제 — 라이트 4/4 미달.**
+
+  ```
+  라이트 (기준 3.0)   error 2.31 ✗   warning 1.48 ✗   info 2.63 ✗   success 2.50 ✗
+  다크                 3.18 ✓         3.80 ✓          3.48 ✓        3.95 ✓
+  ```
+
+  원인은 **전경이 아니라 배경**이었다. 알림 배경이 `--u-*-color-weakest`(라이트
+  shade-200)였는데, 그 단은 **진행바 버퍼 같은 그래픽**에도 쓰인다 — 그래픽으로 보이려면
+  진해야 하고 면으로 쓰이려면 옅어야 한다. 두 요구를 한 단에 겹쳐 둔 것이 결함의 뿌리다.
+
+  ⇒ 알림 배경을 **면 토큰 `--u-*-bg-color`** 로 옮겼다. 두 테마 **4/4 통과**(4.58~7.00).
+  `-weakest` 는 그래픽 단으로 남는다.
+
+  **라이트 알림 배경이 옅어진다** — error `#EF9A9A` → `#FFEBEE` · info `#90CAF9` →
+  `#E3F2FD` · success `#A5D6A7` → `#E8F5E9` (warning 은 `#FFF59D` 유지).
+
+- **라이트 `--u-warning-color-strong` 이 어떤 배경에서도 읽히지 않던 문제.**
+  yellow-700(`#FBC02D`)은 흰 바탕 1.66 · 노란 면 위 1.61 이다. 노랑 램프는 900 까지도
+  2.65 로 미달이고 **1000(`#8A4A00`)에서 처음 6.86** 이 된다.
+
+  ⇒ 라이트만 `yellow-1000` 으로 옮겼다(다크는 yellow-700 = 5.30 으로 이미 정상).
+  경고 아이콘·문구가 **밝은 노랑에서 어두운 호박색으로** 바뀐다 — 이 단의 용도는 면이
+  아니라 글자·아이콘이므로 색상보다 가독성이 앞선다.
+
+  ⇒ 1.16.0 이 대비 검사에서 **제외해 두었던 라이트 warning 이 제외 없이 통과**한다.
+
+### Added
+
+- **`--u-warning-bg-color`** — 1.16.0 에서 유일하게 빠져 있던 유채색 면 토큰.
+
+  당시 판정은 *"라이트 황색 틴트가 Δ0.071 로 거의 보이지 않아 세기를 맞출 단 짝이 없다"*
+  였는데, 그 측정은 **shade-0 짝만** 재고 있었다. 노랑만 한 단 내려 잡으면 라이트 쪽
+  세기가 맞는다 — 바탕 대비 휘도 델타 실측:
+
+  ```
+  blue-0 0.131 · red-0 0.132 · green-0 0.117 · yellow-200 0.110   (yellow-0 은 0.027)
+  ```
+
+  라이트 `yellow-200` / 다크 `yellow-100`. ⚠단 이름이 계열마다 다른 것은 이 층의 정상
+  상태다 — 라이트 팔레트는 휘도 순이 아니라 같은 단 번호가 같은 세기를 뜻하지 않는다.
+
+- **대비 계약 단언 2종** — `상태 아이콘이 그 상태의 면 위에서 보인다`(비텍스트 3.0)와
+  면 토큰 위의 본문(5역할 전부). 1.16.0 이 측정값으로만 기록해 둔 항목이 단언으로 승격됐다.
+
+### Known issues
+
+1.16.0 의 다음 둘은 그대로다 — **다크 `-weak` 의 구조적 충돌**(바탕 위 그래픽과 흰 글자를
+받는 면이 팔레트의 반대쪽을 요구한다)과 **`--u-border-color-strong` 3.0 미달**.
+알림 테두리(`-weaker`)도 면 위에서 3.0 에 못 미치지만(1.13~2.61), 알림은 상호작용
+컴포넌트가 아니라 WCAG 1.4.11 적용 여부 자체가 판단을 요구하므로 이번에 손대지 않았다.
+
+## [1.16.0] - 2026-08-02
+
+### Fixed
+
+- ★**역할 토큰의 유채색 단이 WCAG AA 를 받치지 못하던 문제 — 두 테마 모두.**
+
+  1.15.0 은 *"라이트 shade-600 위의 흰 글자가 8색 중 6색 미달, 다크는 8/8 통과"* 로
+  기록했다. 그 측정은 **한 방향만** 재고 있었다 — 같은 토큰이 **바탕 위의 글자**로도
+  쓰이는데, 그쪽은 다크가 미달이었다:
+
+  ```
+  바탕 위의 글자 (기준 4.5)          면 위의 흰 글자 (기준 4.5)
+  라이트  --u-primary-color  3.68 ✗   라이트  3.68 ✗
+  다크    --u-primary-color  3.07 ✗   다크    6.09 ✓
+  다크    --u-danger-color   2.74 ✗   다크    6.83 ✓
+  ```
+
+  실제로 깨져 있던 자리: **입력 오류 문구**(`u-field`·`u-checkbox`·`u-switch`),
+  **링크 버튼**(`variant="link"` 쉬는 상태 3.12), **복사 완료 표시**, hover/active
+  텍스트·아이콘.
+
+  ⇒ **단을 대비로 다시 골랐다.** 단 번호가 아니라 측정이 기준이다:
+
+  | 토큰 | 라이트 | 다크 |
+  |---|---|---|
+  | `--u-primary-color` · `--u-info-color` | blue-600 → **blue-700** (4.60) | 변경 없음 (면, 6.09) |
+  | `--u-primary-color-strong` · `--u-info-color-strong` | blue-700 → **blue-800** (5.75) | blue-700 → **blue-800** (5.32) |
+  | `--u-danger-color` | red-600 → **red-700** (4.98) | 변경 없음 (면, 6.83) |
+  | `--u-danger-color-strong` | red-700 → **red-800** (5.62) | red-700 → **red-800** (4.87) |
+  | `--u-success-color` | green-600 → **green-800** (5.13) | 변경 없음 (면, 4.93) |
+  | `--u-success-color-strong` | green-700 → **green-900** (7.87) | 변경 없음 (5.15) |
+
+  ⚠**계열마다 단이 다르고 테마마다 다르다.** Material 램프는 휘도가 아니라 색상 기준으로
+  만들어져 있어 같은 단 번호가 같은 세기를 뜻하지 않는다(green 은 700 도 4.12 로 미달이라
+  두 단을 건너뛴다). 종전에는 두 시트가 **같은 단**을 쓰도록 테스트가 강제하고 있었고,
+  그 규칙이 라이트만 미달인 결함을 세 번 반복해서 만들었다.
+
+  ⚠**라이트와 다크에서 요구가 갈리는 이유**: 라이트는 바탕도 on-color 도 흰색이라 두
+  요구가 한 조건으로 합쳐지지만, 다크는 바탕 `#121212` · on-color `#FFFFFF` 로 **정반대
+  방향**이다. 한 단이 둘을 맡을 수 없다. 그래서 `-color` 는 **면**, `-strong` 은
+  **글자·아이콘**으로 용도를 확정했고, 다크에서 두 단이 벌어진다.
+
+- **`--u-warning-txt-color` 가 노란 면 위에서 읽히지 않던 문제** — `#FFFFFF` 는 라이트
+  노랑 위에서 1.40 이다. 노랑은 **어떤 단으로 옮겨도** 흰 글자로 AA 를 못 받치므로
+  (라이트 최대 2.65 @900, 그마저 갈색) 전경을 뒤집었다: `var(--u-neutral-1000)` —
+  라이트 `#000000`(15.05 ✓) · 다크 `#FFFFFF`(4.65 ✓). 한 줄로 양 테마를 만족한다.
+
+- **`u-badge[color="blue"]` 가 장식 축에서 역할 토큰을 읽던 문제.** 이 한 색만
+  `--u-primary-color` 를 참조해, 브랜드 색을 바꾸면 `color="blue"` 배지가 함께 움직였다
+  (`color="green"` 등 나머지 8색은 팔레트 직참조라 움직이지 않는다). `--u-blue-500` 로
+  되돌렸다 — 이 컴포넌트의 다른 장식 색과 같은 단이다. **배지 파랑이 `#1E88E5` →
+  `#2196F3` 로 바뀐다.**
+
+- **`u-button[variant="link"]` 이 `--u-link-txt-color` 를 무시하던 문제.** 링크 색을
+  정의해 둔 토큰이 **어디에서도 쓰이지 않았고**, 링크는 대신 `--u-primary-color-weak`
+  (흰 바탕 3.12 ✗)를 썼다. 쉬는 상태를 그 토큰으로 되돌리고, hover/active 는 밑줄 +
+  `-strong` 한 단으로 합쳤다.
+
+### Added
+
+- **`tests/build/token-contrast.test.ts`** — 역할 토큰의 **조합 대비**를 단언하는 회귀망.
+  값 하나를 재는 것으로는 토큰이 안전한지 알 수 없다는 것이 위 결함의 교훈이므로,
+  `(전경, 배경, 기준)` 표를 두 테마에 대해 검사한다. 소비자가 `--u-primary-color` 를
+  덮어써도 살아남는 형태의 계약이다.
+
+- **`node scripts/token-fallbacks.mjs --refresh`** — 시트 값이 바뀐 뒤 **이미 배선된**
+  폴백 리터럴을 다시 굽는다. 종전 생성기는 배선만 하고 갱신을 못 해서, 매핑을 바꿀 때마다
+  수십 곳을 손으로 고쳐야 했다(*"폴백은 손으로 쓰지 말고 생성한다"* 는 원칙에 갱신 경로가
+  없었다). 이번 변경의 49곳이 이 명령으로 처리됐다.
+
+### Changed
+
+- **시각 변화 요약** — 전부 *진해지는* 방향이며 레이아웃에 영향이 없다.
+  주 강조색 `#1E88E5` → `#1976D2` · 오류색 `#E53935` → `#D32F2F` ·
+  성공색 `#43A047` → `#2E7D32` · 링크/hover 텍스트가 한 단 더 · 경고 면 위 글자가
+  흰색 → 검정 · 배지 파랑 `#1E88E5` → `#2196F3`.
+  다크에서는 **글자로 쓰이는 자리만** 밝아진다(면 색은 그대로).
+
+### Known issues
+
+- **알림(`u-alert`) 아이콘이 알림 배경 위에서 3.0 에 미달** — 라이트 danger 2.61 ·
+  warning 1.48 (info 3.28 ✓ · success 4.79 ✓ 는 이번 재매핑으로 해소됐다). 원인은
+  전경이 아니라 **배경(`-weakest` = shade-200)이 너무 진한 것**이라 면 토큰 쪽을
+  손봐야 한다. 다크는 4/4 통과한다.
+
+- **다크에서 `-weak`(진행바 채움·별점·포커스 링)가 바탕 위 3.0 미달** (2.31).
+  이 자리는 재매핑으로 못 고친다 — 다크에서 `-weak`(바탕 위 그래픽, 밝아야 함)와
+  `-color`(흰 글자를 받는 면, 어두워야 함)가 팔레트의 **반대쪽**을 요구하므로 강도 축
+  하나로 표현되지 않는다. 새 축 신설 여부는 설계 결정이다.
+
+- **`--u-border-color-strong` 이 양 테마 모두 3.0 미달** (라이트 1.88 · 다크 2.40).
+  무엇이 "UI 컴포넌트 경계"인지의 판단이 선행돼야 한다.
+
+- **장식 축(`[color=X]`)의 shade-600 위 흰 글자는 여전히 8색 중 6색 미달** — 아래
+  1.15.0 항목 참조. 역할 층과 달리 장식 축은 소비자가 고른 색이라 라이브러리가 단을
+  대신 고를 수 없다.
+
 ## [1.15.0] - 2026-08-02
 
 ### Fixed

package/dist/_virtual/_glob-assets_raw/dark.css.e8ac080d.js

@@ -1,4 +1,4 @@
 //#region \0glob-assets_raw/dark.css.e8ac080d
-var dark_css_default = ":root[theme=\"dark\"] {\n  color-scheme: dark;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #000000;\n  --u-neutral-50:    #0A0A0A;\n  --u-neutral-100:   #121212;\n  --u-neutral-200:   #1E1E1E;\n  --u-neutral-300:   #2A2A2A;\n  --u-neutral-400:   #3D3D3D;\n  --u-neutral-500:   #525252;\n  --u-neutral-600:   #6E6E6E;\n  --u-neutral-700:   #8A8A8A;\n  --u-neutral-800:   #B0B0B0;\n  --u-neutral-900:   #D4D4D4;\n  --u-neutral-1000:  #FFFFFF;\n\n  /* Blue Colors */\n  --u-blue-0:        #030D1A;\n  --u-blue-100:      #061629;\n  --u-blue-200:      #0A223B;\n  --u-blue-300:      #103150;\n  --u-blue-400:      #174167;\n  --u-blue-500:      #205281;\n  --u-blue-600:      #2A659D;\n  --u-blue-700:      #3678B8;\n  --u-blue-800:      #478DCE;\n  --u-blue-900:      #5DA2DF;\n  --u-blue-1000:     #79BBEA;\n\n  /* Green Colors */\n  --u-green-0:       #06140C;\n  --u-green-100:     #0A2114;\n  --u-green-200:     #10301D;\n  --u-green-300:     #164228;\n  --u-green-400:     #1F5535;\n  --u-green-500:     #2A6942;\n  --u-green-600:     #367E50;\n  --u-green-700:     #4A9563;\n  --u-green-800:     #63AB7A;\n  --u-green-900:     #80BE97;\n  --u-green-1000:    #9BCFB1;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #1C1300;\n  --u-yellow-100:    #2D1E00;\n  --u-yellow-200:    #402B00;\n  --u-yellow-300:    #553900;\n  --u-yellow-400:    #6B4900;\n  --u-yellow-500:    #825A00;\n  --u-yellow-600:    #9A6C00;\n  --u-yellow-700:    #B08012;\n  --u-yellow-800:    #C69635;\n  --u-yellow-900:    #D9AD5A;\n  --u-yellow-1000:   #E8C57F;\n\n  /* Red Colors */\n  --u-red-0:         #1C0707;\n  --u-red-100:       #2C0B0B;\n  --u-red-200:       #3E1111;\n  --u-red-300:       #541818;\n  --u-red-400:       #6C2020;\n  --u-red-500:       #852A2A;\n  --u-red-600:       #A13535;\n  --u-red-700:       #B94949;\n  --u-red-800:       #CB6262;\n  --u-red-900:       #D98383;\n  --u-red-1000:      #E7A2A2;\n\n  /* Orange Colors */\n  --u-orange-0:      #1D0E00;\n  --u-orange-100:    #2F1700;\n  --u-orange-200:    #421F00;\n  --u-orange-300:    #582A00;\n  --u-orange-400:    #703600;\n  --u-orange-500:    #8A4500;\n  --u-orange-600:    #A55600;\n  --u-orange-700:    #BD6A18;\n  --u-orange-800:    #D1823C;\n  --u-orange-900:    #E19D67;\n  --u-orange-1000:   #EDB992;\n\n  /* Teal Colors */\n  --u-teal-0:        #041411;\n  --u-teal-100:      #07201B;\n  --u-teal-200:      #0B2E28;\n  --u-teal-300:      #10403A;\n  --u-teal-400:      #16544D;\n  --u-teal-500:      #1E6860;\n  --u-teal-600:      #297D74;\n  --u-teal-700:      #3A9389;\n  --u-teal-800:      #54A89F;\n  --u-teal-900:      #73BBB3;\n  --u-teal-1000:     #93CBC5;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #041318;\n  --u-cyan-100:      #071F29;\n  --u-cyan-200:      #0B2D3A;\n  --u-cyan-300:      #104050;\n  --u-cyan-400:      #165469;\n  --u-cyan-500:      #1E6A82;\n  --u-cyan-600:      #287F9C;\n  --u-cyan-700:      #3995B5;\n  --u-cyan-800:      #53AACC;\n  --u-cyan-900:      #73BEDD;\n  --u-cyan-1000:     #95CFE8;\n\n  /* Purple Colors */\n  --u-purple-0:      #150A22;\n  --u-purple-100:    #220F36;\n  --u-purple-200:    #31164B;\n  --u-purple-300:    #432064;\n  --u-purple-400:    #572B80;\n  --u-purple-500:    #6C379C;\n  --u-purple-600:    #8245B7;\n  --u-purple-700:    #975BCB;\n  --u-purple-800:    #AB79D9;\n  --u-purple-900:    #BD99E2;\n  --u-purple-1000:   #CEB8EA;\n\n  /* Pink Colors */\n  --u-pink-0:        #1F0A14;\n  --u-pink-100:      #310F20;\n  --u-pink-200:      #451532;\n  --u-pink-300:      #5C1D45;\n  --u-pink-400:      #74285A;\n  --u-pink-500:      #8F336F;\n  --u-pink-600:      #AB4187;\n  --u-pink-700:      #C0569D;\n  --u-pink-800:      #D174B3;\n  --u-pink-900:      #E095C7;\n  --u-pink-1000:     #EBB5D9;\n\n  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n     ========================================================================== */\n\n  /* primary — 브랜드 · 강조 · 포커스 · 링크 */\n  --u-primary-color-weakest:     var(--u-blue-200);\n  --u-primary-color-weaker:      var(--u-blue-300);\n  --u-primary-color-weak:        var(--u-blue-500);\n  --u-primary-color:             var(--u-blue-600);\n  --u-primary-color-strong:      var(--u-blue-700);\n\n  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */\n  --u-info-color-weakest:        var(--u-blue-200);\n  --u-info-color-weaker:         var(--u-blue-300);\n  --u-info-color-weak:           var(--u-blue-500);\n  --u-info-color:                var(--u-blue-600);\n  --u-info-color-strong:         var(--u-blue-700);\n\n  /* success — 성공 · 완료 */\n  --u-success-color-weakest:     var(--u-green-200);\n  --u-success-color-weaker:      var(--u-green-300);\n  --u-success-color-weak:        var(--u-green-500);\n  --u-success-color:             var(--u-green-600);\n  --u-success-color-strong:      var(--u-green-700);\n\n  /* warning — 주의 */\n  --u-warning-color-weakest:     var(--u-yellow-200);\n  --u-warning-color-weaker:      var(--u-yellow-300);\n  --u-warning-color-weak:        var(--u-yellow-500);\n  --u-warning-color:             var(--u-yellow-600);\n  --u-warning-color-strong:      var(--u-yellow-700);\n\n  /* danger — 오류 · 위험 · 유효성 실패 */\n  --u-danger-color-weakest:      var(--u-red-200);\n  --u-danger-color-weaker:       var(--u-red-300);\n  --u-danger-color-weak:         var(--u-red-500);\n  --u-danger-color:              var(--u-red-600);\n  --u-danger-color-strong:       var(--u-red-700);\n  /* ==========================================================================\n     Radius Scale — 모서리 반경\n     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).\n     ========================================================================== */\n  --u-radius-none:   0;\n  --u-radius-sm:     3px;\n  --u-radius-md:     4px;\n  --u-radius-lg:     6px;\n  --u-radius-xl:     8px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* ==========================================================================\n     Space Scale — 컨테이너·오버레이의 절대 여백\n     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만\n     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로\n     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.\n     축 구분과 근거는 docs/design-tokens.md 참조.\n     ========================================================================== */\n  --u-space-3xs:  2px;\n  --u-space-2xs:  4px;\n  --u-space-xs:   6px;\n  --u-space-sm:   8px;\n  --u-space-md:  12px;\n  --u-space-lg:  16px;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n\n  /* 유채색 배경 위의 글자 — 두 테마 모두 흰색이다(light.css 참조). */\n  --u-primary-txt-color:     #FFFFFF;\n  --u-info-txt-color:        #FFFFFF;\n  --u-success-txt-color:     #FFFFFF;\n  --u-danger-txt-color:      #FFFFFF;\n  --u-warning-txt-color:     #FFFFFF;\n  --u-txt-color-hover:       var(--u-primary-color);\n  --u-txt-color-active:      var(--u-primary-color);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-primary-color-strong);\n  --u-tooltip-txt-color:     var(--u-neutral-100);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-800);\n  --u-icon-color-inverse:    var(--u-neutral-100);\n  --u-icon-color-hover:      var(--u-primary-color);\n  --u-icon-color-active:     var(--u-primary-color);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-300);\n  --u-border-color-strong:   var(--u-neutral-500);\n  --u-border-color-hover:    var(--u-neutral-500);\n\n  --u-input-border-color:         var(--u-neutral-400);\n  --u-input-border-color-hover:   var(--u-neutral-500);\n  --u-input-border-color-focus:   var(--u-primary-color);\n  --u-input-border-color-invalid: var(--u-danger-color);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-100);\n  --u-bg-color-inverse:      var(--u-neutral-0);\n  --u-bg-color-hover:        var(--u-neutral-300);\n  --u-bg-color-active:       var(--u-neutral-400);\n  --u-bg-color-disabled:     var(--u-neutral-100);\n  \n  /* 유채색 표면 — 라이트와 **같은 단이 아니라 같은 세기**로 짝지었다(light.css 참조).\n     팔레트 유채색 틴트가 다크에서 짓눌리므로 한 단 위를 쓴다. green 은 대칭이라 그대로. */\n  --u-primary-bg-color:      var(--u-blue-100);\n  --u-info-bg-color:         var(--u-blue-100);\n  --u-success-bg-color:      var(--u-green-0);\n  --u-danger-bg-color:       var(--u-red-100);\n\n  --u-input-bg-color:        var(--u-neutral-200);\n  --u-panel-bg-color:        var(--u-neutral-200);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-500);\n  --u-scrollbar-color-hover: var(--u-neutral-600);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
+var dark_css_default = ":root[theme=\"dark\"] {\n  color-scheme: dark;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #000000;\n  --u-neutral-50:    #0A0A0A;\n  --u-neutral-100:   #121212;\n  --u-neutral-200:   #1E1E1E;\n  --u-neutral-300:   #2A2A2A;\n  --u-neutral-400:   #3D3D3D;\n  --u-neutral-500:   #525252;\n  --u-neutral-600:   #6E6E6E;\n  --u-neutral-700:   #8A8A8A;\n  --u-neutral-800:   #B0B0B0;\n  --u-neutral-900:   #D4D4D4;\n  --u-neutral-1000:  #FFFFFF;\n\n  /* Blue Colors */\n  --u-blue-0:        #030D1A;\n  --u-blue-100:      #061629;\n  --u-blue-200:      #0A223B;\n  --u-blue-300:      #103150;\n  --u-blue-400:      #174167;\n  --u-blue-500:      #205281;\n  --u-blue-600:      #2A659D;\n  --u-blue-700:      #3678B8;\n  --u-blue-800:      #478DCE;\n  --u-blue-900:      #5DA2DF;\n  --u-blue-1000:     #79BBEA;\n\n  /* Green Colors */\n  --u-green-0:       #06140C;\n  --u-green-100:     #0A2114;\n  --u-green-200:     #10301D;\n  --u-green-300:     #164228;\n  --u-green-400:     #1F5535;\n  --u-green-500:     #2A6942;\n  --u-green-600:     #367E50;\n  --u-green-700:     #4A9563;\n  --u-green-800:     #63AB7A;\n  --u-green-900:     #80BE97;\n  --u-green-1000:    #9BCFB1;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #1C1300;\n  --u-yellow-100:    #2D1E00;\n  --u-yellow-200:    #402B00;\n  --u-yellow-300:    #553900;\n  --u-yellow-400:    #6B4900;\n  --u-yellow-500:    #825A00;\n  --u-yellow-600:    #9A6C00;\n  --u-yellow-700:    #B08012;\n  --u-yellow-800:    #C69635;\n  --u-yellow-900:    #D9AD5A;\n  --u-yellow-1000:   #E8C57F;\n\n  /* Red Colors */\n  --u-red-0:         #1C0707;\n  --u-red-100:       #2C0B0B;\n  --u-red-200:       #3E1111;\n  --u-red-300:       #541818;\n  --u-red-400:       #6C2020;\n  --u-red-500:       #852A2A;\n  --u-red-600:       #A13535;\n  --u-red-700:       #B94949;\n  --u-red-800:       #CB6262;\n  --u-red-900:       #D98383;\n  --u-red-1000:      #E7A2A2;\n\n  /* Orange Colors */\n  --u-orange-0:      #1D0E00;\n  --u-orange-100:    #2F1700;\n  --u-orange-200:    #421F00;\n  --u-orange-300:    #582A00;\n  --u-orange-400:    #703600;\n  --u-orange-500:    #8A4500;\n  --u-orange-600:    #A55600;\n  --u-orange-700:    #BD6A18;\n  --u-orange-800:    #D1823C;\n  --u-orange-900:    #E19D67;\n  --u-orange-1000:   #EDB992;\n\n  /* Teal Colors */\n  --u-teal-0:        #041411;\n  --u-teal-100:      #07201B;\n  --u-teal-200:      #0B2E28;\n  --u-teal-300:      #10403A;\n  --u-teal-400:      #16544D;\n  --u-teal-500:      #1E6860;\n  --u-teal-600:      #297D74;\n  --u-teal-700:      #3A9389;\n  --u-teal-800:      #54A89F;\n  --u-teal-900:      #73BBB3;\n  --u-teal-1000:     #93CBC5;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #041318;\n  --u-cyan-100:      #071F29;\n  --u-cyan-200:      #0B2D3A;\n  --u-cyan-300:      #104050;\n  --u-cyan-400:      #165469;\n  --u-cyan-500:      #1E6A82;\n  --u-cyan-600:      #287F9C;\n  --u-cyan-700:      #3995B5;\n  --u-cyan-800:      #53AACC;\n  --u-cyan-900:      #73BEDD;\n  --u-cyan-1000:     #95CFE8;\n\n  /* Purple Colors */\n  --u-purple-0:      #150A22;\n  --u-purple-100:    #220F36;\n  --u-purple-200:    #31164B;\n  --u-purple-300:    #432064;\n  --u-purple-400:    #572B80;\n  --u-purple-500:    #6C379C;\n  --u-purple-600:    #8245B7;\n  --u-purple-700:    #975BCB;\n  --u-purple-800:    #AB79D9;\n  --u-purple-900:    #BD99E2;\n  --u-purple-1000:   #CEB8EA;\n\n  /* Pink Colors */\n  --u-pink-0:        #1F0A14;\n  --u-pink-100:      #310F20;\n  --u-pink-200:      #451532;\n  --u-pink-300:      #5C1D45;\n  --u-pink-400:      #74285A;\n  --u-pink-500:      #8F336F;\n  --u-pink-600:      #AB4187;\n  --u-pink-700:      #C0569D;\n  --u-pink-800:      #D174B3;\n  --u-pink-900:      #E095C7;\n  --u-pink-1000:     #EBB5D9;\n\n  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n\n     ★**다만 두 단은 용도가 확정돼 있다** — 대비 요구가 서로 다르기 때문이다.\n        `-color`  = **면**. `--u-*-txt-color` 가 그 위에 얹히므로 on-color 기준 4.5.\n        `-strong` = **글자·아이콘**. `--u-bg-color` 위에 놓이므로 바탕 기준 4.5.\n     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 한 조건으로 합쳐지지만,\n     **다크에서는 정반대 방향**이다(바탕 #121212 · on-color #FFFFFF). 바탕에서 읽히는\n     밝은 단은 흰 글자를 못 받고, 흰 글자를 받는 어두운 단은 바탕에서 안 읽힌다.\n     ⇒ 다크에서 `-color` 와 `-strong` 이 두 단 벌어지는 것이 그 결과다.\n     `tests/build/token-contrast.test.ts` 가 값을 지킨다.\n     ========================================================================== */\n\n  /* primary — 브랜드 · 강조 · 포커스 · 링크 */\n  --u-primary-color-weakest:     var(--u-blue-200);\n  --u-primary-color-weaker:      var(--u-blue-300);\n  --u-primary-color-weak:        var(--u-blue-500);\n  --u-primary-color:             var(--u-blue-600);  /* 면: 흰 글자 6.09 ✓ */\n  --u-primary-color-strong:      var(--u-blue-800);  /* 글자: 바탕 5.32 ✓ (700 은 4.05 ✗) */\n\n  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */\n  --u-info-color-weakest:        var(--u-blue-200);\n  --u-info-color-weaker:         var(--u-blue-300);\n  --u-info-color-weak:           var(--u-blue-500);\n  --u-info-color:                var(--u-blue-600);\n  --u-info-color-strong:         var(--u-blue-800);\n\n  /* success — 성공 · 완료 */\n  --u-success-color-weakest:     var(--u-green-200);\n  --u-success-color-weaker:      var(--u-green-300);\n  --u-success-color-weak:        var(--u-green-500);\n  --u-success-color:             var(--u-green-600);\n  --u-success-color-strong:      var(--u-green-700);\n\n  /* warning — 주의 */\n  --u-warning-color-weakest:     var(--u-yellow-200);\n  --u-warning-color-weaker:      var(--u-yellow-300);\n  --u-warning-color-weak:        var(--u-yellow-500);\n  --u-warning-color:             var(--u-yellow-600);\n  --u-warning-color-strong:      var(--u-yellow-700);\n\n  /* danger — 오류 · 위험 · 유효성 실패 */\n  --u-danger-color-weakest:      var(--u-red-200);\n  --u-danger-color-weaker:       var(--u-red-300);\n  --u-danger-color-weak:         var(--u-red-500);\n  --u-danger-color:              var(--u-red-600);  /* 면: 흰 글자 6.83 ✓ */\n  --u-danger-color-strong:       var(--u-red-800);  /* 글자: 바탕 4.87 ✓ (700 은 3.67 ✗) */\n  /* ==========================================================================\n     Radius Scale — 모서리 반경\n     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).\n     ========================================================================== */\n  --u-radius-none:   0;\n  --u-radius-sm:     3px;\n  --u-radius-md:     4px;\n  --u-radius-lg:     6px;\n  --u-radius-xl:     8px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* ==========================================================================\n     Space Scale — 컨테이너·오버레이의 절대 여백\n     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만\n     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로\n     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.\n     축 구분과 근거는 docs/design-tokens.md 참조.\n     ========================================================================== */\n  --u-space-3xs:  2px;\n  --u-space-2xs:  4px;\n  --u-space-xs:   6px;\n  --u-space-sm:   8px;\n  --u-space-md:  12px;\n  --u-space-lg:  16px;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\n\n  /* 유채색 배경 위의 글자 — warning 만 다르다(light.css 참조). */\n  --u-primary-txt-color:     #FFFFFF;\n  --u-info-txt-color:        #FFFFFF;\n  --u-success-txt-color:     #FFFFFF;\n  --u-danger-txt-color:      #FFFFFF;\n  /* ★라이트 시트와 같은 이유로 중립 최상단을 쓴다 — 다크에서는 그 값이 #FFFFFF 라\n     결과가 종전과 같다(4.65 ✓). 리터럴 대신 토큰을 쓰는 이유는 라이트에서 뒤집히기\n     때문이다(#000000). 두 시트가 같은 선언이 되어 어긋날 자리가 없어진다. */\n  --u-warning-txt-color:     var(--u-neutral-1000);\n  --u-txt-color-hover:       var(--u-primary-color-strong);\n  --u-txt-color-active:      var(--u-primary-color-strong);\n  --u-txt-color-disabled:    var(--u-neutral-500);\n  --u-txt-color-weak:        var(--u-neutral-700);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-primary-color-strong);\n  --u-tooltip-txt-color:     var(--u-neutral-100);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-800);\n  --u-icon-color-inverse:    var(--u-neutral-100);\n  --u-icon-color-hover:      var(--u-primary-color-strong);\n  --u-icon-color-active:     var(--u-primary-color-strong);\n  --u-icon-color-disabled:   var(--u-neutral-500);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-400);\n  --u-border-color-weak:     var(--u-neutral-300);\n  --u-border-color-strong:   var(--u-neutral-500);\n  --u-border-color-hover:    var(--u-neutral-500);\n\n  --u-input-border-color:         var(--u-neutral-400);\n  --u-input-border-color-hover:   var(--u-neutral-500);\n  --u-input-border-color-focus:   var(--u-primary-color);\n  --u-input-border-color-invalid: var(--u-danger-color);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-100);\n  --u-bg-color-inverse:      var(--u-neutral-0);\n  --u-bg-color-hover:        var(--u-neutral-300);\n  --u-bg-color-active:       var(--u-neutral-400);\n  --u-bg-color-disabled:     var(--u-neutral-100);\n\n  /* 면 높이 — 상세는 light.css 참조. 다크는 **바탕보다 밝은 쪽**이 위다.\n     neutral-300(#2A2A2A)은 바탕(#121212) 대비 1.42 로, 소비 측이 오버라이드로 쓰던\n     neutral-200(1.15)보다 실제로 더 잘 구분된다 — 그 오버라이드가 해결하려던 증상이\n     *\"툴바·헤더가 배경에 묻힌다\"* 였다. */\n  --u-bg-color-raised:       var(--u-neutral-300);\n  \n  /* 유채색 표면 — 라이트와 **같은 단이 아니라 같은 세기**로 짝지었다(light.css 참조).\n     팔레트 유채색 틴트가 다크에서 짓눌리므로 한 단 위를 쓴다. green 은 대칭이라 그대로. */\n  --u-primary-bg-color:      var(--u-blue-100);\n  --u-info-bg-color:         var(--u-blue-100);\n  --u-success-bg-color:      var(--u-green-0);\n  --u-danger-bg-color:       var(--u-red-100);\n  /* warning 합류 — 라이트는 yellow-200 이다(단 이름이 다른 이유는 light.css 참조). */\n  --u-warning-bg-color:      var(--u-yellow-100);\n\n  --u-input-bg-color:        var(--u-neutral-200);\n  --u-panel-bg-color:        var(--u-neutral-200);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.7);\n  --u-tooltip-bg-color:      rgba(255, 255, 255, 0.85);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.15);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.25);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.35);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.45);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-500);\n  --u-scrollbar-color-hover: var(--u-neutral-600);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
 //#endregion
 export { dark_css_default as default };

package/dist/_virtual/_glob-assets_raw/light.css.637cb2f8.js

@@ -1,4 +1,4 @@
 //#region \0glob-assets_raw/light.css.637cb2f8
-var light_css_default = ":root {\n  color-scheme: light;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #FFFFFF;\n  --u-neutral-50:    #FAFAFA;\n  --u-neutral-100:   #F5F5F5;\n  --u-neutral-200:   #EEEEEE;\n  --u-neutral-300:   #E0E0E0;\n  --u-neutral-400:   #BDBDBD;\n  --u-neutral-500:   #9E9E9E;\n  --u-neutral-600:   #757575;\n  --u-neutral-700:   #616161;\n  --u-neutral-800:   #424242;\n  --u-neutral-900:   #212121;\n  --u-neutral-1000:  #000000;\n\n  /* Blue Colors */\n  --u-blue-0:        #E3F2FD;\n  --u-blue-100:      #BBDEFB;\n  --u-blue-200:      #90CAF9;\n  --u-blue-300:      #64B5F6;\n  --u-blue-400:      #42A5F5;\n  --u-blue-500:      #2196F3;\n  --u-blue-600:      #1E88E5;\n  --u-blue-700:      #1976D2;\n  --u-blue-800:      #1565C0;\n  --u-blue-900:      #0D47A1;\n  --u-blue-1000:     #062A5E;\n\n  /* Green Colors */\n  --u-green-0:       #E8F5E9;\n  --u-green-100:     #C8E6C9;\n  --u-green-200:     #A5D6A7;\n  --u-green-300:     #81C784;\n  --u-green-400:     #66BB6A;\n  --u-green-500:     #4CAF50;\n  --u-green-600:     #43A047;\n  --u-green-700:     #388E3C;\n  --u-green-800:     #2E7D32;\n  --u-green-900:     #1B5E20;\n  --u-green-1000:    #0F3A12;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #FFFDE7;\n  --u-yellow-100:    #FFF9C4;\n  --u-yellow-200:    #FFF59D;\n  --u-yellow-300:    #FFF176;\n  --u-yellow-400:    #FFEE58;\n  --u-yellow-500:    #FFEB3B;\n  --u-yellow-600:    #FDD835;\n  --u-yellow-700:    #FBC02D;\n  --u-yellow-800:    #F9A825;\n  --u-yellow-900:    #F57F17;\n  --u-yellow-1000:   #8A4A00;\n\n  /* Red Colors */\n  --u-red-0:         #FFEBEE;\n  --u-red-100:       #FFCDD2;\n  --u-red-200:       #EF9A9A;\n  --u-red-300:       #E57373;\n  --u-red-400:       #EF5350;\n  --u-red-500:       #F44336;\n  --u-red-600:       #E53935;\n  --u-red-700:       #D32F2F;\n  --u-red-800:       #C62828;\n  --u-red-900:       #B71C1C;\n  --u-red-1000:      #6B0F0F;\n\n  /* Orange Colors */\n  --u-orange-0:      #FFF3E0;\n  --u-orange-100:    #FFE0B2;\n  --u-orange-200:    #FFCC80;\n  --u-orange-300:    #FFB74D;\n  --u-orange-400:    #FFA726;\n  --u-orange-500:    #FF9800;\n  --u-orange-600:    #FB8C00;\n  --u-orange-700:    #F57C00;\n  --u-orange-800:    #EF6C00;\n  --u-orange-900:    #E65100;\n  --u-orange-1000:   #8C3100;\n\n  /* Teal Colors */\n  --u-teal-0:        #E0F2F1;\n  --u-teal-100:      #B2DFDB;\n  --u-teal-200:      #80CBC4;\n  --u-teal-300:      #4DB6AC;\n  --u-teal-400:      #26A69A;\n  --u-teal-500:      #009688;\n  --u-teal-600:      #00897B;\n  --u-teal-700:      #00796B;\n  --u-teal-800:      #00695C;\n  --u-teal-900:      #004D40;\n  --u-teal-1000:     #002E26;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #E0F7FA;\n  --u-cyan-100:      #B2EBF2;\n  --u-cyan-200:      #80DEEA;\n  --u-cyan-300:      #4DD0E1;\n  --u-cyan-400:      #26C6DA;\n  --u-cyan-500:      #00BCD4;\n  --u-cyan-600:      #00ACC1;\n  --u-cyan-700:      #0097A7;\n  --u-cyan-800:      #00838F;\n  --u-cyan-900:      #006064;\n  --u-cyan-1000:     #003A3D;\n\n  /* Purple Colors */\n  --u-purple-0:      #F3E5F5;\n  --u-purple-100:    #E1BEE7;\n  --u-purple-200:    #CE93D8;\n  --u-purple-300:    #BA68C8;\n  --u-purple-400:    #AB47BC;\n  --u-purple-500:    #9C27B0;\n  --u-purple-600:    #8E24AA;\n  --u-purple-700:    #7B1FA2;\n  --u-purple-800:    #6A1B9A;\n  --u-purple-900:    #4A148C;\n  --u-purple-1000:   #2C0B54;\n\n  /* Pink Colors */\n  --u-pink-0:        #FCE4EC;\n  --u-pink-100:      #F8BBD0;\n  --u-pink-200:      #F48FB1;\n  --u-pink-300:      #F06292;\n  --u-pink-400:      #EC407A;\n  --u-pink-500:      #E91E63;\n  --u-pink-600:      #D81B60;\n  --u-pink-700:      #C2185B;\n  --u-pink-800:      #AD1457;\n  --u-pink-900:      #880E4F;\n  --u-pink-1000:     #520830;\n\n  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n     ========================================================================== */\n\n  /* primary — 브랜드 · 강조 · 포커스 · 링크 */\n  --u-primary-color-weakest:     var(--u-blue-200);\n  --u-primary-color-weaker:      var(--u-blue-300);\n  --u-primary-color-weak:        var(--u-blue-500);\n  --u-primary-color:             var(--u-blue-600);\n  --u-primary-color-strong:      var(--u-blue-700);\n\n  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */\n  --u-info-color-weakest:        var(--u-blue-200);\n  --u-info-color-weaker:         var(--u-blue-300);\n  --u-info-color-weak:           var(--u-blue-500);\n  --u-info-color:                var(--u-blue-600);\n  --u-info-color-strong:         var(--u-blue-700);\n\n  /* success — 성공 · 완료 */\n  --u-success-color-weakest:     var(--u-green-200);\n  --u-success-color-weaker:      var(--u-green-300);\n  --u-success-color-weak:        var(--u-green-500);\n  --u-success-color:             var(--u-green-600);\n  --u-success-color-strong:      var(--u-green-700);\n\n  /* warning — 주의 */\n  --u-warning-color-weakest:     var(--u-yellow-200);\n  --u-warning-color-weaker:      var(--u-yellow-300);\n  --u-warning-color-weak:        var(--u-yellow-500);\n  --u-warning-color:             var(--u-yellow-600);\n  --u-warning-color-strong:      var(--u-yellow-700);\n\n  /* danger — 오류 · 위험 · 유효성 실패 */\n  --u-danger-color-weakest:      var(--u-red-200);\n  --u-danger-color-weaker:       var(--u-red-300);\n  --u-danger-color-weak:         var(--u-red-500);\n  --u-danger-color:              var(--u-red-600);\n  --u-danger-color-strong:       var(--u-red-700);\n  /* ==========================================================================\n     Radius Scale — 모서리 반경\n     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).\n     ========================================================================== */\n  --u-radius-none:   0;\n  --u-radius-sm:     3px;\n  --u-radius-md:     4px;\n  --u-radius-lg:     6px;\n  --u-radius-xl:     8px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* ==========================================================================\n     Space Scale — 컨테이너·오버레이의 절대 여백\n     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이(카드·대화상자·드로어·\n     알림·메뉴·툴팁 등)의 **레이아웃 여백**만 담당한다. 폼·인라인 요소의 `em` 여백은\n     상속된 `font-size` 에 비례하는 것이 의도이므로 **여기로 흡수하지 않는다** —\n     흡수하면 타이포를 키운 소비자의 여백이 따라 커지지 않는다.\n     축 구분과 근거는 docs/design-tokens.md 참조.\n     ========================================================================== */\n  --u-space-3xs:  2px;\n  --u-space-2xs:  4px;\n  --u-space-xs:   6px;\n  --u-space-sm:   8px;\n  --u-space-md:  12px;\n  --u-space-lg:  16px;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\n  /* 유채색 배경 위의 글자. --u-txt-color-inverse 는 다크에서 neutral-100(#121212)이라\n     유채색 버튼 위에서 읽히지 않는다. 브랜드 색을 바꾸는 소비자가 전경색도 함께\n     조절할 수 있도록 별도 이름을 준다.\n     ⚠이 토큰이 흰색이라는 것과 그 위의 배경이 AA 를 받친다는 것은 별개다 —\n     라이트 팔레트의 shade-600 은 8색 중 6색이 흰 글자로 AA 에 미달한다(미해결). */\n  --u-primary-txt-color:     #FFFFFF;\n  --u-info-txt-color:        #FFFFFF;\n  --u-success-txt-color:     #FFFFFF;\n  --u-danger-txt-color:      #FFFFFF;\n  --u-warning-txt-color:     #FFFFFF;\n\n  --u-txt-color-hover:       var(--u-primary-color);\n  --u-txt-color-active:      var(--u-primary-color);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  /* neutral-500(#9E9E9E)은 흰 배경 대비 2.68 로 WCAG AA(4.5) 미달이었다.\n     neutral-600(#757575) = 4.61 로 통과한다. 다크 매핑(neutral-700 = 5.43)은\n     원래 정상이라 손대지 않는다 — 라이트 한쪽만의 결함이었다. */\n  --u-txt-color-weak:        var(--u-neutral-600);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-primary-color-strong);\n  --u-tooltip-txt-color:     var(--u-neutral-0);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-700);\n  --u-icon-color-inverse:    var(--u-neutral-0);\n  --u-icon-color-hover:      var(--u-primary-color);\n  --u-icon-color-active:     var(--u-primary-color);\n  --u-icon-color-disabled:   var(--u-neutral-400);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-300);\n  --u-border-color-weak:     var(--u-neutral-200);\n  --u-border-color-strong:   var(--u-neutral-400);\n  --u-border-color-hover:    var(--u-neutral-400);\n\n  --u-input-border-color:         var(--u-neutral-300);\n  --u-input-border-color-hover:   var(--u-neutral-400);\n  --u-input-border-color-focus:   var(--u-primary-color);\n  --u-input-border-color-invalid: var(--u-danger-color);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-0);\n  --u-bg-color-inverse:      var(--u-neutral-900);\n  --u-bg-color-hover:        var(--u-neutral-100);\n  --u-bg-color-active:       var(--u-neutral-200);\n  --u-bg-color-disabled:     var(--u-neutral-50);\n \n  /* 유채색 표면 — 정보/성공/위험 상태의 '면'.\n     역할 층의 유채색은 전경 5단뿐이라, 상태 배경이 필요한 컴포넌트는 팔레트를 직접\n     읽고 다크를 손으로 보정해야 했다. 팔레트의 유채색 틴트는 다크에서 짓눌리므로\n     (바탕 대비 델타의 다크/라이트 비 — 청색 0.38~0.54) 두 테마가 **같은 단이 아니라\n     같은 세기**가 되도록 짝지었다. 실측 비: blue 1.09 · red 1.12 · green 0.91.\n     ⚠yellow(경고)는 빠져 있다 — 라이트 황색 틴트가 Δ0.071 로 거의 보이지 않아\n     어떤 짝을 골라도 비가 2배 밑으로 내려가지 않는다. 리터럴 재설계가 선행돼야 한다. */\n  --u-primary-bg-color:      var(--u-blue-0);\n  --u-info-bg-color:         var(--u-blue-0);\n  --u-success-bg-color:      var(--u-green-0);\n  --u-danger-bg-color:       var(--u-red-0);\n\n  --u-input-bg-color:        var(--u-neutral-0);\n  --u-panel-bg-color:        var(--u-neutral-0);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-400);\n  --u-scrollbar-color-hover: var(--u-neutral-500);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
+var light_css_default = ":root {\n  color-scheme: light;\n\n  /* Neutral Colors */\n  --u-neutral-0:     #FFFFFF;\n  --u-neutral-50:    #FAFAFA;\n  --u-neutral-100:   #F5F5F5;\n  --u-neutral-200:   #EEEEEE;\n  --u-neutral-300:   #E0E0E0;\n  --u-neutral-400:   #BDBDBD;\n  --u-neutral-500:   #9E9E9E;\n  --u-neutral-600:   #757575;\n  --u-neutral-700:   #616161;\n  --u-neutral-800:   #424242;\n  --u-neutral-900:   #212121;\n  --u-neutral-1000:  #000000;\n\n  /* Blue Colors */\n  --u-blue-0:        #E3F2FD;\n  --u-blue-100:      #BBDEFB;\n  --u-blue-200:      #90CAF9;\n  --u-blue-300:      #64B5F6;\n  --u-blue-400:      #42A5F5;\n  --u-blue-500:      #2196F3;\n  --u-blue-600:      #1E88E5;\n  --u-blue-700:      #1976D2;\n  --u-blue-800:      #1565C0;\n  --u-blue-900:      #0D47A1;\n  --u-blue-1000:     #062A5E;\n\n  /* Green Colors */\n  --u-green-0:       #E8F5E9;\n  --u-green-100:     #C8E6C9;\n  --u-green-200:     #A5D6A7;\n  --u-green-300:     #81C784;\n  --u-green-400:     #66BB6A;\n  --u-green-500:     #4CAF50;\n  --u-green-600:     #43A047;\n  --u-green-700:     #388E3C;\n  --u-green-800:     #2E7D32;\n  --u-green-900:     #1B5E20;\n  --u-green-1000:    #0F3A12;\n\n  /* Yellow Colors */\n  --u-yellow-0:      #FFFDE7;\n  --u-yellow-100:    #FFF9C4;\n  --u-yellow-200:    #FFF59D;\n  --u-yellow-300:    #FFF176;\n  --u-yellow-400:    #FFEE58;\n  --u-yellow-500:    #FFEB3B;\n  --u-yellow-600:    #FDD835;\n  --u-yellow-700:    #FBC02D;\n  --u-yellow-800:    #F9A825;\n  --u-yellow-900:    #F57F17;\n  --u-yellow-1000:   #8A4A00;\n\n  /* Red Colors */\n  --u-red-0:         #FFEBEE;\n  --u-red-100:       #FFCDD2;\n  --u-red-200:       #EF9A9A;\n  --u-red-300:       #E57373;\n  --u-red-400:       #EF5350;\n  --u-red-500:       #F44336;\n  --u-red-600:       #E53935;\n  --u-red-700:       #D32F2F;\n  --u-red-800:       #C62828;\n  --u-red-900:       #B71C1C;\n  --u-red-1000:      #6B0F0F;\n\n  /* Orange Colors */\n  --u-orange-0:      #FFF3E0;\n  --u-orange-100:    #FFE0B2;\n  --u-orange-200:    #FFCC80;\n  --u-orange-300:    #FFB74D;\n  --u-orange-400:    #FFA726;\n  --u-orange-500:    #FF9800;\n  --u-orange-600:    #FB8C00;\n  --u-orange-700:    #F57C00;\n  --u-orange-800:    #EF6C00;\n  --u-orange-900:    #E65100;\n  --u-orange-1000:   #8C3100;\n\n  /* Teal Colors */\n  --u-teal-0:        #E0F2F1;\n  --u-teal-100:      #B2DFDB;\n  --u-teal-200:      #80CBC4;\n  --u-teal-300:      #4DB6AC;\n  --u-teal-400:      #26A69A;\n  --u-teal-500:      #009688;\n  --u-teal-600:      #00897B;\n  --u-teal-700:      #00796B;\n  --u-teal-800:      #00695C;\n  --u-teal-900:      #004D40;\n  --u-teal-1000:     #002E26;\n\n  /* Cyan Colors */\n  --u-cyan-0:        #E0F7FA;\n  --u-cyan-100:      #B2EBF2;\n  --u-cyan-200:      #80DEEA;\n  --u-cyan-300:      #4DD0E1;\n  --u-cyan-400:      #26C6DA;\n  --u-cyan-500:      #00BCD4;\n  --u-cyan-600:      #00ACC1;\n  --u-cyan-700:      #0097A7;\n  --u-cyan-800:      #00838F;\n  --u-cyan-900:      #006064;\n  --u-cyan-1000:     #003A3D;\n\n  /* Purple Colors */\n  --u-purple-0:      #F3E5F5;\n  --u-purple-100:    #E1BEE7;\n  --u-purple-200:    #CE93D8;\n  --u-purple-300:    #BA68C8;\n  --u-purple-400:    #AB47BC;\n  --u-purple-500:    #9C27B0;\n  --u-purple-600:    #8E24AA;\n  --u-purple-700:    #7B1FA2;\n  --u-purple-800:    #6A1B9A;\n  --u-purple-900:    #4A148C;\n  --u-purple-1000:   #2C0B54;\n\n  /* Pink Colors */\n  --u-pink-0:        #FCE4EC;\n  --u-pink-100:      #F8BBD0;\n  --u-pink-200:      #F48FB1;\n  --u-pink-300:      #F06292;\n  --u-pink-400:      #EC407A;\n  --u-pink-500:      #E91E63;\n  --u-pink-600:      #D81B60;\n  --u-pink-700:      #C2185B;\n  --u-pink-800:      #AD1457;\n  --u-pink-900:      #880E4F;\n  --u-pink-1000:     #520830;\n\n  /* ==========================================================================\n     Role Colors — 의미 역할 층\n     컴포넌트는 팔레트 프리미티브가 아니라 이 층을 참조한다.\n     브랜드 색 교체는 아래 25개만 재정의하면 시맨틱 층까지 따라온다.\n\n     단은 '강도' 축이다 (weakest -> strong). 용도(배경/테두리/텍스트)는\n     소비처가 정한다 -- 단을 속성에 묶으면 primary 버튼의 배경이 어느\n     단인지 같은 모순이 생긴다.\n     ========================================================================== */\n\n  /* ★단이 팔레트 shade 와 1:1 이 아니다 — **대비로 고른다.**\n     `-color` 는 `--u-*-txt-color` 를 받는 면이고 `-strong` 은 바탕 위의 글자다.\n     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 `contrast(shade, #FFF) ≥ 4.5`\n     하나로 합쳐지고, 그 단이 계열마다 다르다(blue 700 · red 700 · green 800).\n     Material 램프는 휘도가 아니라 색상 기준으로 만들어져 있어서 단 번호가 세기를\n     보장하지 않는다 — 값은 `tests/build/token-contrast.test.ts` 가 지킨다. */\n\n  /* primary — 브랜드 · 강조 · 포커스 · 링크 */\n  --u-primary-color-weakest:     var(--u-blue-200);\n  --u-primary-color-weaker:      var(--u-blue-300);\n  --u-primary-color-weak:        var(--u-blue-500);\n  --u-primary-color:             var(--u-blue-700);  /* 4.60 ✓ (600 은 3.68 ✗) */\n  --u-primary-color-strong:      var(--u-blue-800);  /* 5.75 ✓ */\n\n  /* info — 정보 안내 (primary 와 기본값은 같으나 역할이 다르다 — 브랜딩은 primary 만 바꾼다) */\n  --u-info-color-weakest:        var(--u-blue-200);\n  --u-info-color-weaker:         var(--u-blue-300);\n  --u-info-color-weak:           var(--u-blue-500);\n  --u-info-color:                var(--u-blue-700);\n  --u-info-color-strong:         var(--u-blue-800);\n\n  /* success — 성공 · 완료\n     ⚠green 은 700 도 4.12 로 미달이라 두 단을 건너뛴다. 계열마다 통과 단이 다른 것이\n     이 층의 정상 상태다(단 번호를 맞추면 대비가 어긋난다). */\n  --u-success-color-weakest:     var(--u-green-200);\n  --u-success-color-weaker:      var(--u-green-300);\n  --u-success-color-weak:        var(--u-green-500);\n  --u-success-color:             var(--u-green-800);  /* 5.13 ✓ (600=3.30 · 700=4.12 ✗) */\n  --u-success-color-strong:      var(--u-green-900);  /* 7.87 ✓ */\n\n  /* warning — 주의 */\n  --u-warning-color-weakest:     var(--u-yellow-200);\n  --u-warning-color-weaker:      var(--u-yellow-300);\n  --u-warning-color-weak:        var(--u-yellow-500);\n  --u-warning-color:             var(--u-yellow-600);\n  /* ★다른 계열은 -strong 이 shade-800~900 인데 warning 만 1000 이다 — 노랑 램프는\n     900 까지도 흰 바탕 2.65 로 미달이고, 1000(#8A4A00)에서 처음 6.86 이 된다.\n     그 값은 갈색에 가깝지만, 이 단의 용도는 **면이 아니라 글자·아이콘**이므로 색상보다\n     가독성이 먼저다(경고 문구를 어두운 호박색으로 쓰는 것은 보편 관행이다). */\n  --u-warning-color-strong:      var(--u-yellow-1000);\n\n  /* danger — 오류 · 위험 · 유효성 실패 */\n  --u-danger-color-weakest:      var(--u-red-200);\n  --u-danger-color-weaker:       var(--u-red-300);\n  --u-danger-color-weak:         var(--u-red-500);\n  --u-danger-color:              var(--u-red-700);  /* 4.98 ✓ (600 은 4.23 ✗ — 오류 문구가 이 단이었다) */\n  --u-danger-color-strong:       var(--u-red-800);  /* 5.62 ✓ */\n  /* ==========================================================================\n     Radius Scale — 모서리 반경\n     리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).\n     ========================================================================== */\n  --u-radius-none:   0;\n  --u-radius-sm:     3px;\n  --u-radius-md:     4px;\n  --u-radius-lg:     6px;\n  --u-radius-xl:     8px;\n  --u-radius-pill:   9999px;\n  --u-radius-circle: 50%;\n\n  /* ==========================================================================\n     Space Scale — 컨테이너·오버레이의 절대 여백\n     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이(카드·대화상자·드로어·\n     알림·메뉴·툴팁 등)의 **레이아웃 여백**만 담당한다. 폼·인라인 요소의 `em` 여백은\n     상속된 `font-size` 에 비례하는 것이 의도이므로 **여기로 흡수하지 않는다** —\n     흡수하면 타이포를 키운 소비자의 여백이 따라 커지지 않는다.\n     축 구분과 근거는 docs/design-tokens.md 참조.\n     ========================================================================== */\n  --u-space-3xs:  2px;\n  --u-space-2xs:  4px;\n  --u-space-xs:   6px;\n  --u-space-sm:   8px;\n  --u-space-md:  12px;\n  --u-space-lg:  16px;\n\n  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\n  /* 유채색 배경 위의 글자. --u-txt-color-inverse 는 다크에서 neutral-100(#121212)이라\n     유채색 버튼 위에서 읽히지 않는다. 브랜드 색을 바꾸는 소비자가 전경색도 함께\n     조절할 수 있도록 별도 이름을 준다.\n     ⚠이 토큰이 흰색이라는 것과 그 위의 배경이 AA 를 받친다는 것은 별개다 —\n     라이트 팔레트의 shade-600 은 8색 중 6색이 흰 글자로 AA 에 미달한다(미해결). */\n  --u-primary-txt-color:     #FFFFFF;\n  --u-info-txt-color:        #FFFFFF;\n  --u-success-txt-color:     #FFFFFF;\n  --u-danger-txt-color:      #FFFFFF;\n  /* ★warning 만 어둡다 — 취향이 아니라 측정이다. 노랑은 **어떤 단도** 흰 글자로 AA 를\n     받치지 못한다(라이트 최대 2.65 @900, 그마저 갈색). 다른 넷처럼 단을 옮기는 수단이\n     없으므로 전경을 뒤집는다. `--u-neutral-1000` 은 라이트 #000000 / 다크 #FFFFFF 이라\n     한 줄로 양 테마를 만족한다(라이트 15.05 · 다크 4.65). */\n  --u-warning-txt-color:     var(--u-neutral-1000);\n\n  --u-txt-color-hover:       var(--u-primary-color-strong);\n  --u-txt-color-active:      var(--u-primary-color-strong);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  /* neutral-500(#9E9E9E)은 흰 배경 대비 2.68 로 WCAG AA(4.5) 미달이었다.\n     neutral-600(#757575) = 4.61 로 통과한다. 다크 매핑(neutral-700 = 5.43)은\n     원래 정상이라 손대지 않는다 — 라이트 한쪽만의 결함이었다. */\n  --u-txt-color-weak:        var(--u-neutral-600);\n  --u-txt-color-strong:      var(--u-neutral-1000);\n\n  --u-link-txt-color:        var(--u-primary-color-strong);\n  --u-tooltip-txt-color:     var(--u-neutral-0);\n\n  /* Icon Colors */\n  --u-icon-color:            var(--u-neutral-700);\n  --u-icon-color-inverse:    var(--u-neutral-0);\n  --u-icon-color-hover:      var(--u-primary-color-strong);\n  --u-icon-color-active:     var(--u-primary-color-strong);\n  --u-icon-color-disabled:   var(--u-neutral-400);\n\n  /* Border Colors */\n  --u-border-color:          var(--u-neutral-300);\n  --u-border-color-weak:     var(--u-neutral-200);\n  --u-border-color-strong:   var(--u-neutral-400);\n  --u-border-color-hover:    var(--u-neutral-400);\n\n  --u-input-border-color:         var(--u-neutral-300);\n  --u-input-border-color-hover:   var(--u-neutral-400);\n  --u-input-border-color-focus:   var(--u-primary-color);\n  --u-input-border-color-invalid: var(--u-danger-color);\n\n  /* Background Colors */\n  --u-bg-color:              var(--u-neutral-0);\n  --u-bg-color-inverse:      var(--u-neutral-900);\n  --u-bg-color-hover:        var(--u-neutral-100);\n  --u-bg-color-active:       var(--u-neutral-200);\n  --u-bg-color-disabled:     var(--u-neutral-50);\n\n  /* ★면 높이 — 바탕에 인접해 있으면서 한 단 구분되는 크롬 면(툴바·표 헤더·푸터).\n     상호작용 상태(-hover/-active/-disabled)와 **다른 축**이다. 상태 이름에 높이를\n     얹으면 의미가 어긋난다(`DL-131-1`).\n     `--u-panel-bg-color` 와도 다르다 — 그쪽은 **떠 있는 패널**(카드·대화상자·메뉴)이라\n     라이트에서 페이지와 같은 흰색이고 그림자가 높이를 나른다. 크롬 면은 그림자가 없어\n     라이트에서도 틴트가 필요하다.\n     ⚠한 단만 정의한다. 두 단째의 실측 수요는 라이트 한쪽뿐이었다(다크에서는 소비 측\n     오버라이드가 두 값을 같은 단으로 합치고 있었다). */\n  --u-bg-color-raised:       var(--u-neutral-50);\n \n  /* 유채색 표면 — 정보/성공/위험 상태의 '면'.\n     역할 층의 유채색은 전경 5단뿐이라, 상태 배경이 필요한 컴포넌트는 팔레트를 직접\n     읽고 다크를 손으로 보정해야 했다. 팔레트의 유채색 틴트는 다크에서 짓눌리므로\n     (바탕 대비 델타의 다크/라이트 비 — 청색 0.38~0.54) 두 테마가 **같은 단이 아니라\n     같은 세기**가 되도록 짝지었다. 실측 비: blue 1.09 · red 1.12 · green 0.91.\n\n     ★**warning 이 합류했다(1.16.0 → 1.17.0).** 종전에는 *\"세기를 맞출 단 짝이 없다\"* 며\n     빠져 있었는데, 그 판정은 **shade-0 짝만** 재고 있었다. 노랑만 한 단 내려 잡으면\n     라이트 쪽 세기가 맞는다 — 바탕 대비 휘도 델타 실측:\n       blue-0 0.131 · red-0 0.132 · green-0 0.117 · **yellow-200 0.110**  (yellow-0 은 0.027)\n     ⚠단 이름이 계열마다 다른 것(yellow 만 200)은 이 층의 정상 상태다. 라이트 팔레트는\n     휘도 순이 아니므로 같은 단 번호가 같은 세기를 뜻하지 않는다. */\n  --u-primary-bg-color:      var(--u-blue-0);\n  --u-info-bg-color:         var(--u-blue-0);\n  --u-success-bg-color:      var(--u-green-0);\n  --u-danger-bg-color:       var(--u-red-0);\n  --u-warning-bg-color:      var(--u-yellow-200);\n\n  --u-input-bg-color:        var(--u-neutral-0);\n  --u-panel-bg-color:        var(--u-neutral-0);\n  --u-overlay-bg-color:      rgba(0, 0, 0, 0.5);\n  --u-tooltip-bg-color:      rgba(0, 0, 0, 0.75);\n\n  /* Shadow Colors */\n  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.04);\n  --u-shadow-color-weak:     rgba(0, 0, 0, 0.08);\n  --u-shadow-color-normal:   rgba(0, 0, 0, 0.12);\n  --u-shadow-color-strong:   rgba(0, 0, 0, 0.16);\n  --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n  /* Scrollbar Colors */\n  --u-scrollbar-color:       var(--u-neutral-400);\n  --u-scrollbar-color-hover: var(--u-neutral-500);\n  --u-scrollbar-track-color: transparent;\n\n  /* Font Styles */\n  --u-font-base:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n  --u-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n  --u-font-serif:   'Georgia', 'Times New Roman', Times, serif;\n  --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n  --u-font-modern:  'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
 //#endregion
 export { light_css_default as default };

package/dist/components/alert/UAlert.styles.js

@@ -7,25 +7,32 @@ var styles = css`
     --alert-border-color: var(--u-neutral-300, #E0E0E0);
     --alert-background-color: var(--u-neutral-200, #EEEEEE);
   }
+  /* ★배경은 -weakest 가 아니라 면 토큰(--u-*-bg-color)이다.
+     -weakest 는 라이트에서 shade-200 이라 **면으로 쓰기에 너무 진했다** — 그 위의
+     아이콘(-strong)이 라이트 4/4 미달이었다(1.48~2.63, 기준 3.0). 다크는 통과했으므로
+     라이트 한쪽만의 결함이었고, 원인은 전경이 아니라 배경이다.
+     면 토큰으로 옮기면 두 테마 4/4 통과한다(4.58~7.00).
+     -weakest 는 진행바 버퍼 같은 **그래픽** 단으로 남는다 — 같은 단에 면과 그래픽을
+     겹쳐 두었던 것이 애초의 문제다. */
   :host([status="error"]) {
-    --alert-icon-color: var(--u-danger-color-strong, #D32F2F);
+    --alert-icon-color: var(--u-danger-color-strong, #C62828);
     --alert-border-color: var(--u-danger-color-weaker, #E57373);
-    --alert-background-color: var(--u-danger-color-weakest, #EF9A9A);
+    --alert-background-color: var(--u-danger-bg-color, #FFEBEE);
   }
   :host([status="warning"]) {
-    --alert-icon-color: var(--u-warning-color-strong, #FBC02D);
+    --alert-icon-color: var(--u-warning-color-strong, #8A4A00);
     --alert-border-color: var(--u-warning-color-weaker, #FFF176);
-    --alert-background-color: var(--u-warning-color-weakest, #FFF59D);
+    --alert-background-color: var(--u-warning-bg-color, #FFF59D);
   }
   :host([status="info"]) {
-    --alert-icon-color: var(--u-info-color-strong, #1976D2);
+    --alert-icon-color: var(--u-info-color-strong, #1565C0);
     --alert-border-color: var(--u-info-color-weaker, #64B5F6);
-    --alert-background-color: var(--u-info-color-weakest, #90CAF9);
+    --alert-background-color: var(--u-info-bg-color, #E3F2FD);
   }
   :host([status="success"]) {
-    --alert-icon-color: var(--u-success-color-strong, #388E3C);
+    --alert-icon-color: var(--u-success-color-strong, #1B5E20);
     --alert-border-color: var(--u-success-color-weaker, #81C784);
-    --alert-background-color: var(--u-success-color-weakest, #A5D6A7);
+    --alert-background-color: var(--u-success-bg-color, #E8F5E9);
   }
   :host([status="notice"]) {
     --alert-icon-color: var(--u-neutral-700, #616161);

package/dist/components/badge/UBadge.styles.js

@@ -51,7 +51,11 @@ var styles = css`
   }
   :host([color="blue"]) {
     color: var(--u-neutral-0, #FFFFFF);
-    background-color: var(--u-primary-color, #1E88E5);
+    /* ★장식 축이므로 팔레트를 직접 읽는다 — 여기만 역할 토큰(--u-primary-color)이었다.
+       그 탓에 브랜드를 바꾸면 color="blue" 배지만 함께 움직였다(color="green" 등 8색은
+       안 움직인다). u-tag 에는 이 오염을 막는 네거티브 컨트롤이 있는데 u-badge 에는
+       없어서 드러나지 않았다. 단은 이 컴포넌트의 다른 장식 색과 같은 500 으로 맞춘다. */
+    background-color: var(--u-blue-500, #2196F3);
   }
   :host([color="green"]) {
     color: var(--u-neutral-0, #FFFFFF);

package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js

@@ -12,7 +12,7 @@ var styles = css`
     cursor: pointer;
   }
   :host:hover {
-    color: var(--u-primary-color-strong, #1976D2);
+    color: var(--u-primary-color-strong, #1565C0);
   }
   :host([disabled]) {
     opacity: 0.5;

package/dist/components/button/UButton.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     /* --btn-color 하나만 정해지면 hover/active/surface/outline 톤이 전부 자동 파생 */
-    --btn-color: var(--u-primary-color, #1E88E5);
+    --btn-color: var(--u-primary-color, #1976D2);
     --btn-color-hover: color-mix(in srgb, var(--btn-color) 85%, black);
     --btn-color-active: color-mix(in srgb, var(--btn-color) 70%, black);
     --btn-color-surface: color-mix(in srgb, var(--btn-color) 12%, var(--u-bg-color, #FFFFFF));
@@ -148,19 +148,21 @@ var styles = css`
     background-color: var(--u-bg-color-active, #EEEEEE);
   }
 
-  /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존) */
+  /* link: blue 링크 스타일 (기본값, color="neutral"일 때도 유지 — 기존 동작 보존)
+     ★종전 3단(weak → color → strong)은 쉬는 상태가 --u-primary-color-weak (흰 바탕 3.12)라
+     링크 글자가 AA 미달이었고, 그 사이 토큰 층의 --u-link-txt-color 는 어디에서도 쓰이지
+     않았다. 링크 색을 정의해 둔 토큰을 링크가 무시하고 있었던 셈이다.
+     쉬는 상태를 그 토큰으로 되돌리고, 강조는 밑줄과 -strong 한 단으로 표현한다. */
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak, #2196F3);
+    color: var(--u-link-txt-color, #1565C0);
     --btn-border-color: transparent;
     background-color: transparent;
     --btn-padding-inline: 0;
   }
-  :host([variant="link"]:hover) {
-    color: var(--u-primary-color, #1E88E5);
-    text-decoration: underline;
-  }
+  :host([variant="link"]:hover),
   :host([variant="link"]:active) {
-    color: var(--u-primary-color-strong, #1976D2);
+    color: var(--u-primary-color-strong, #1565C0);
+    text-decoration: underline;
   }
   /* link + 명시적 non-neutral color: 링크 자체 색상을 재정의 (예: 파괴적 액션 링크) */
   :host([variant="link"][color]:not([color="neutral"])) {

package/dist/components/checkbox/UCheckbox.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/checkbox/UCheckbox.styles.ts
 var styles = css`
   :host {
-    --checkbox-fill-color: var(--u-primary-color, #1E88E5);
+    --checkbox-fill-color: var(--u-primary-color, #1976D2);
     --checkbox-color: inherit;
     --checkbox-border-color: var(--u-input-border-color, #E0E0E0);
     --checkbox-background-color: var(--u-input-bg-color, #FFFFFF);
@@ -27,10 +27,10 @@ var styles = css`
     cursor: default;
   }
   :host([invalid]) {
-    --checkbox-border-color: var(--u-danger-color, #E53935);
+    --checkbox-border-color: var(--u-danger-color, #D32F2F);
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
   :host([checked]) .checkbox u-icon,
   :host([indeterminate]) .checkbox u-icon {
@@ -104,7 +104,7 @@ var styles = css`
   }
   input:focus-visible ~ .checkbox {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
+      0 0 0 1px var(--u-input-border-color-focus, #1976D2),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
 
@@ -137,7 +137,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
     font-weight: 500;
   }
 
@@ -149,7 +149,7 @@ var styles = css`
   }
 
   :host([invalid]) .description {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
 `;
 //#endregion

package/dist/components/copy-button/UCopyButton.styles.js

@@ -14,12 +14,12 @@ var styles = css`
   }
 
   :host([copied]) u-icon-button {
-    color: var(--u-success-color-weak, #4CAF50);
+    color: var(--u-success-color-strong, #1B5E20);
   }
 
   /* 라벨 형태(아이콘+텍스트): 복사 완료 시 아이콘/텍스트를 성공색으로 강조 */
   :host([copied]) u-button {
-    color: var(--u-success-color-weak, #4CAF50);
+    color: var(--u-success-color-strong, #1B5E20);
   }
 `;
 //#endregion

package/dist/components/field/UField.styles.js

@@ -12,7 +12,7 @@ var styles = css`
     cursor: not-allowed;
   }
   :host([invalid]) .footer {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
   }
 
   .header {
@@ -32,7 +32,7 @@ var styles = css`
   }
 
   .required {
-    color: var(--u-danger-color, #E53935);
+    color: var(--u-danger-color-strong, #C62828);
     margin-right: 0.2em;
   }
   

package/dist/components/icon-button/UIconButton.styles.js

@@ -11,7 +11,7 @@ var styles = css`
     color: #fff;
   }
   :host([variant="link"]) {
-    color: var(--u-primary-color-weak, #2196F3);
+    color: var(--u-link-txt-color, #1565C0);
   }
 
   u-button {

package/dist/components/input/UInput.styles.js

@@ -38,10 +38,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, #1976D2);
   }
   :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, #D32F2F);
   }
 
   /* ===== Variant: filled ===== */
@@ -63,11 +63,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, #1976D2);
   }
   :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, #D32F2F);
   }
 
   /* ===== Variant: underlined ===== */
@@ -90,12 +90,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, #1976D2);
     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, #D32F2F);
   }
 
   /* ===== Variant: borderless ===== */
@@ -161,10 +161,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);
   }
 
   u-popover {

package/dist/components/menu-item/UMenuItem.styles.js

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

package/dist/components/option/UOption.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 //#region src/components/option/UOption.styles.ts
 var styles = css`
   :host {
-    --option-color: var(--u-primary-color, #1E88E5);
+    --option-color: var(--u-primary-color, #1976D2);
     --option-color-interactive: inherit;
     --option-border-color-interactive: var(--u-border-color-hover, #BDBDBD);
     --option-background-color-interactive: var(--u-bg-color-hover, #F5F5F5);

package/dist/components/progress-bar/UProgressBar.styles.js

@@ -3,14 +3,14 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-bar-height: 0.5em;
-    --progress-bar-color: var(--u-primary-color, #1E88E5);
+    --progress-bar-color: var(--u-primary-color, #1976D2);
     --progress-bar-buffer-color: color-mix(in srgb, var(--progress-bar-color) 35%, var(--u-bg-color, #FFFFFF));
     --progress-bar-track-color: var(--u-neutral-200, #EEEEEE);
   }
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-bar-color: var(--u-success-color, #43A047); 
+    --progress-bar-color: var(--u-success-color, #2E7D32); 
     --progress-bar-buffer-color: var(--u-success-color-weakest, #A5D6A7); 
   }
   :host([status="warning"]) { 
@@ -18,7 +18,7 @@ var styles = css`
     --progress-bar-buffer-color: var(--u-warning-color-weakest, #FFF59D); 
   }
   :host([status="error"]) { 
-    --progress-bar-color: var(--u-danger-color, #E53935); 
+    --progress-bar-color: var(--u-danger-color, #D32F2F); 
     --progress-bar-buffer-color: var(--u-danger-color-weakest, #EF9A9A); 
   }
   :host([status="info"]) { 

package/dist/components/progress-ring/UProgressRing.styles.js

@@ -3,7 +3,7 @@ import { css } from "lit";
 var styles = css`
   :host {
     --progress-ring-size: 6em;
-    --progress-ring-color: var(--u-primary-color, #1E88E5);
+    --progress-ring-color: var(--u-primary-color, #1976D2);
     --progress-ring-track-width: 6;
     --progress-ring-track-color: var(--u-neutral-200, #EEEEEE);
     --progress-ring-buffer-color: color-mix(in srgb, var(--progress-ring-color) 35%, var(--u-bg-color, #FFFFFF));
@@ -11,7 +11,7 @@ var styles = css`
 
   /* === Status Colors === */
   :host([status="success"]) { 
-    --progress-ring-color: var(--u-success-color, #43A047);
+    --progress-ring-color: var(--u-success-color, #2E7D32);
     --progress-ring-buffer-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="warning"]) { 
@@ -19,7 +19,7 @@ var styles = css`
     --progress-ring-buffer-color: var(--u-warning-color-weakest, #FFF59D);
   }
   :host([status="error"]) { 
-    --progress-ring-color: var(--u-danger-color, #E53935);
+    --progress-ring-color: var(--u-danger-color, #D32F2F);
     --progress-ring-buffer-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="info"]) { 

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/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, #1976D2);
   }
   :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, #D32F2F);
   }
 
   /* ===== 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, #1976D2);
   }
   :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, #D32F2F);
   }
 
   /* ===== 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, #1976D2);
     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, #D32F2F);
   }
 
   /* ===== Variant: borderless ===== */
@@ -157,10 +157,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);
   }
 
   /* 드롭다운 패널 — 옵션 텍스트가 길어도 팝오버가 앵커보다 넓어지지 않도록 고정 너비로

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;

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

@@ -4,7 +4,7 @@ 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;
   }
 

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,7 +56,7 @@ var styles = css`
   }
   input:focus-visible ~ .track {
     box-shadow:
-      0 0 0 1px var(--u-input-border-color-focus, #1E88E5),
+      0 0 0 1px var(--u-input-border-color-focus, #1976D2),
       0 0 0 3px rgba(59, 130, 246, 0.22);
   }
 
@@ -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 {

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

@@ -2,7 +2,7 @@ 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;

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, #1976D2);
   }
   :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, #D32F2F);
   }
 
   /* ===== 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, #1976D2);
   }
   :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, #D32F2F);
   }
 
   /* ===== 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, #1976D2);
     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, #D32F2F);
   }
 
   /* ===== Variant: borderless ===== */

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 */
@@ -245,6 +257,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 +270,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);

package/dist/styles/light.css

@@ -142,40 +142,53 @@
      단인지 같은 모순이 생긴다.
      ========================================================================== */
 
+  /* ★단이 팔레트 shade 와 1:1 이 아니다 — **대비로 고른다.**
+     `-color` 는 `--u-*-txt-color` 를 받는 면이고 `-strong` 은 바탕 위의 글자다.
+     라이트에서는 바탕도 on-color 도 흰색이라 두 요구가 `contrast(shade, #FFF) ≥ 4.5`
+     하나로 합쳐지고, 그 단이 계열마다 다르다(blue 700 · red 700 · green 800).
+     Material 램프는 휘도가 아니라 색상 기준으로 만들어져 있어서 단 번호가 세기를
+     보장하지 않는다 — 값은 `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-700);  /* 4.60 ✓ (600 은 3.68 ✗) */
+  --u-primary-color-strong:      var(--u-blue-800);  /* 5.75 ✓ */
 
   /* 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:                var(--u-blue-700);
+  --u-info-color-strong:         var(--u-blue-800);
 
-  /* success — 성공 · 완료 */
+  /* success — 성공 · 완료
+     ⚠green 은 700 도 4.12 로 미달이라 두 단을 건너뛴다. 계열마다 통과 단이 다른 것이
+     이 층의 정상 상태다(단 번호를 맞추면 대비가 어긋난다). */
   --u-success-color-weakest:     var(--u-green-200);
   --u-success-color-weaker:      var(--u-green-300);
   --u-success-color-weak:        var(--u-green-500);
-  --u-success-color:             var(--u-green-600);
-  --u-success-color-strong:      var(--u-green-700);
+  --u-success-color:             var(--u-green-800);  /* 5.13 ✓ (600=3.30 · 700=4.12 ✗) */
+  --u-success-color-strong:      var(--u-green-900);  /* 7.87 ✓ */
 
   /* warning — 주의 */
   --u-warning-color-weakest:     var(--u-yellow-200);
   --u-warning-color-weaker:      var(--u-yellow-300);
   --u-warning-color-weak:        var(--u-yellow-500);
   --u-warning-color:             var(--u-yellow-600);
-  --u-warning-color-strong:      var(--u-yellow-700);
+  /* ★다른 계열은 -strong 이 shade-800~900 인데 warning 만 1000 이다 — 노랑 램프는
+     900 까지도 흰 바탕 2.65 로 미달이고, 1000(#8A4A00)에서 처음 6.86 이 된다.
+     그 값은 갈색에 가깝지만, 이 단의 용도는 **면이 아니라 글자·아이콘**이므로 색상보다
+     가독성이 먼저다(경고 문구를 어두운 호박색으로 쓰는 것은 보편 관행이다). */
+  --u-warning-color-strong:      var(--u-yellow-1000);
 
   /* danger — 오류 · 위험 · 유효성 실패 */
   --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-700);  /* 4.98 ✓ (600 은 4.23 ✗ — 오류 문구가 이 단이었다) */
+  --u-danger-color-strong:       var(--u-red-800);  /* 5.62 ✓ */
   /* ==========================================================================
      Radius Scale — 모서리 반경
      리터럴을 흩뿌리면 값이 갈린다(실제로 pill 이 999px/9999px 두 표기로 나뉘어 있었다).
@@ -215,10 +228,14 @@
   --u-info-txt-color:        #FFFFFF;
   --u-success-txt-color:     #FFFFFF;
   --u-danger-txt-color:      #FFFFFF;
-  --u-warning-txt-color:     #FFFFFF;
+  /* ★warning 만 어둡다 — 취향이 아니라 측정이다. 노랑은 **어떤 단도** 흰 글자로 AA 를
+     받치지 못한다(라이트 최대 2.65 @900, 그마저 갈색). 다른 넷처럼 단을 옮기는 수단이
+     없으므로 전경을 뒤집는다. `--u-neutral-1000` 은 라이트 #000000 / 다크 #FFFFFF 이라
+     한 줄로 양 테마를 만족한다(라이트 15.05 · 다크 4.65). */
+  --u-warning-txt-color:     var(--u-neutral-1000);
 
-  --u-txt-color-hover:       var(--u-primary-color);
-  --u-txt-color-active:      var(--u-primary-color);
+  --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-400);
   /* neutral-500(#9E9E9E)은 흰 배경 대비 2.68 로 WCAG AA(4.5) 미달이었다.
      neutral-600(#757575) = 4.61 로 통과한다. 다크 매핑(neutral-700 = 5.43)은
@@ -232,8 +249,8 @@
   /* Icon Colors */
   --u-icon-color:            var(--u-neutral-700);
   --u-icon-color-inverse:    var(--u-neutral-0);
-  --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-400);
 
   /* Border Colors */
@@ -253,18 +270,34 @@
   --u-bg-color-hover:        var(--u-neutral-100);
   --u-bg-color-active:       var(--u-neutral-200);
   --u-bg-color-disabled:     var(--u-neutral-50);
+
+  /* ★면 높이 — 바탕에 인접해 있으면서 한 단 구분되는 크롬 면(툴바·표 헤더·푸터).
+     상호작용 상태(-hover/-active/-disabled)와 **다른 축**이다. 상태 이름에 높이를
+     얹으면 의미가 어긋난다(`DL-131-1`).
+     `--u-panel-bg-color` 와도 다르다 — 그쪽은 **떠 있는 패널**(카드·대화상자·메뉴)이라
+     라이트에서 페이지와 같은 흰색이고 그림자가 높이를 나른다. 크롬 면은 그림자가 없어
+     라이트에서도 틴트가 필요하다.
+     ⚠한 단만 정의한다. 두 단째의 실측 수요는 라이트 한쪽뿐이었다(다크에서는 소비 측
+     오버라이드가 두 값을 같은 단으로 합치고 있었다). */
+  --u-bg-color-raised:       var(--u-neutral-50);
  
   /* 유채색 표면 — 정보/성공/위험 상태의 '면'.
      역할 층의 유채색은 전경 5단뿐이라, 상태 배경이 필요한 컴포넌트는 팔레트를 직접
      읽고 다크를 손으로 보정해야 했다. 팔레트의 유채색 틴트는 다크에서 짓눌리므로
      (바탕 대비 델타의 다크/라이트 비 — 청색 0.38~0.54) 두 테마가 **같은 단이 아니라
      같은 세기**가 되도록 짝지었다. 실측 비: blue 1.09 · red 1.12 · green 0.91.
-     ⚠yellow(경고)는 빠져 있다 — 라이트 황색 틴트가 Δ0.071 로 거의 보이지 않아
-     어떤 짝을 골라도 비가 2배 밑으로 내려가지 않는다. 리터럴 재설계가 선행돼야 한다. */
+
+     ★**warning 이 합류했다(1.16.0 → 1.17.0).** 종전에는 *"세기를 맞출 단 짝이 없다"* 며
+     빠져 있었는데, 그 판정은 **shade-0 짝만** 재고 있었다. 노랑만 한 단 내려 잡으면
+     라이트 쪽 세기가 맞는다 — 바탕 대비 휘도 델타 실측:
+       blue-0 0.131 · red-0 0.132 · green-0 0.117 · **yellow-200 0.110**  (yellow-0 은 0.027)
+     ⚠단 이름이 계열마다 다른 것(yellow 만 200)은 이 층의 정상 상태다. 라이트 팔레트는
+     휘도 순이 아니므로 같은 단 번호가 같은 세기를 뜻하지 않는다. */
   --u-primary-bg-color:      var(--u-blue-0);
   --u-info-bg-color:         var(--u-blue-0);
   --u-success-bg-color:      var(--u-green-0);
   --u-danger-bg-color:       var(--u-red-0);
+  --u-warning-bg-color:      var(--u-yellow-200);
 
   --u-input-bg-color:        var(--u-neutral-0);
   --u-panel-bg-color:        var(--u-neutral-0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.15.0",
+  "version": "1.18.0",
   "keywords": [
     "iyulab",
     "components",