@iyulab/components 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,103 @@
 # Changelog
 
+## [1.14.0] - 2026-08-01
+
+### Added
+
+- **토큰 시트 없이도 렌더된다** — 시트 토큰 참조 **411곳**에 use-site 리터럴 폴백을
+  배선했다(`var(--u-txt-color)` → `var(--u-txt-color, #212121)`).
+
+  토큰 시트(`styles/tokens.css`)를 로드하지 않으면 `var(--u-*)` 는 무효가 되고 **그 선언이
+  통째로 버려진다** — 색이 빠지는 게 아니라 규칙이 사라지는 것이라, 텍스트가 안 보이거나
+  패널이 완전히 투명해진다. 이제 시트가 없어도 기본 테마 값으로 렌더된다.
+
+  **시트를 쓰는 경우 시각 변화는 없다** — 폴백은 시트가 없을 때만 평가된다. 리터럴이
+  시트 값과 어긋나지 않도록 대조 테스트가 강제하며, 폴백은 손으로 쓰지 않고 생성한다.
+
+- **`Theme.resolved()`** — 문서에 **실제로 적용된** 테마(`'light' | 'dark'`)를 돌려준다.
+
+  `Theme.get()` 은 사용자의 **선호**를 돌려주며 거기에는 `'system'` 이 있고, 그것이
+  기본값이다. 그래서 `get() === 'dark'` 로 분기하는 소비자는 **system + OS 다크에서
+  밝은 화면을 그리게 된다** — 가장 흔한 경로에서 틀린다. 실효 테마를 알 방법이 없어
+  소비자마다 다르게 추측하고 있었다.
+
+  ⚠**폰트 계열(`--u-font-*`)은 예외**다 — 폴백을 배선하지 않았다. 폰트 스택은 리터럴이
+  100자를 넘어 모든 사용처에 굽으면 얻는 것보다 잃는 것이 크고, 시트가 없으면 UA 기본
+  폰트로 대체되어 **화면이 깨지지 않는다**(색·테두리는 깨진다).
+
+### Fixed
+
+- ★**토큰 시트를 쓰지 않을 때 버튼만 다른 브랜드 색으로 렌더되던 문제 수정** —
+  `u-button` 의 폴백 3곳(`#3b82f6`·`#2563eb`·`#1d4ed8`)이 디자인 시트의 파랑
+  (`#2196F3`·`#1E88E5`·`#1976D2`)과 다른 계열이었다. 시트를 로드한 환경에서는 폴백이
+  평가되지 않아 드러나지 않았고, **시트 없이 쓰는 소비자에게만** 버튼이 다른 파랑으로
+  보였다. 시트 값으로 맞췄다.
+- **오버레이 배경 불투명도 불일치 수정** — 폴백이 `rgba(0,0,0,0.4)`, 시트가 `0.5` 였다.
+- **`u-badge` 의 폴백이 다른 명도 단을 가리키던 문제 수정** —
+  `var(--u-primary-color, var(--u-blue-500))` 이 시트 정의(`--u-blue-600`)와 어긋나 있었다.
+
+### Changed
+
+- **토큰 시트 부재 경고 문구를 실제 거동에 맞췄다.** 종전에는 *"테두리·배경·색이 무효가
+  됩니다"* 였으나 폴백 배선으로 더는 무효가 되지 않는다. 이제 남는 손실을 정확히 말한다 —
+  **다크 테마와 테마 변수 오버라이드가 적용되지 않는다.** 경고 자체는 유지한다: 폴백은
+  *"조용히 사라지지 않게"* 하는 안전망이지 *"시트 없이 써도 된다"* 가 아니다.
+- **`u-tree` 의 기본 글자 크기가 `rem` 에서 `em` 으로 바뀌었다.** 루트 기준이라 소비자가
+  컨테이너 타이포를 키워도 트리만 따라오지 않았다. **기본 상황에서는 두 단위가 같은 값
+  (14px)이므로 시각 변화가 없고**, 상속 컨텍스트에서만 동작이 달라진다 —
+  `<div style="font-size:24px"><u-tree>` 안에서 트리가 21px 로 함께 커진다.
+
+## [1.13.0] - 2026-08-01
+
+### Added
+
+- **여백 스케일 토큰** `--u-space-3xs|2xs|xs|sm|md|lg` (2·4·6·8·12·16px). 컨테이너·오버레이
+  (`u-card`·`u-dialog`·`u-drawer`·`u-alert`·`u-menu`·`u-tooltip`·`u-carousel`·`u-divider`·
+  `u-slider`·`u-button-group`)의 레이아웃 여백 **선언 28곳(토큰 참조 33건)**을 이 스케일로 배선했다.
+  반경 스케일과 마찬가지로 테마와 무관하며 두 시트가 같은 값을 갖는다.
+
+  **시각 변화는 없다** — 배선은 `var(--u-space-md, 12px)` 형태로 원래 리터럴을 폴백에
+  보존하며, 토큰 값이 그 리터럴과 같다(테스트로 강제한다). 토큰 시트를 넣지 않은 소비자도
+  종전과 동일하게 렌더된다.
+
+### ⚠ 이 스케일을 폼 여백에 쓰지 마세요
+
+**여백은 하나의 축이 아니다.** 폼·인라인 요소(`u-button`·`u-input`·`u-select`·`u-checkbox`·
+`u-radio`·`u-switch`·`u-badge`·`u-tab`·`u-field` 등)의 여백은 `em` 이라 **상속된 `font-size`
+에 비례**한다 — `body { font-size: 18px }` 를 지정하면 그 컴포넌트들의 여백도 함께 커진다.
+그 비례는 의도된 동작이므로 절대 스케일로 흡수하지 않았다.
+
+폼 여백을 조정할 때는 이 토큰이 아니라 해당 컴포넌트의 훅(`--btn-padding-block` 등)이나
+타이포를 쓰세요. 어떤 토큰이 어느 축에 속하는지는 `docs/design-tokens.md` 에 있다.
+
+### Fixed
+
+- ★**`u-divider` 의 간격이 소비 앱 CSS 리셋에 지워지던 문제 수정** — 마지막 남은 리셋 취약
+  컴포넌트였다. 간격을 `:host` 의 `margin` 에서 **내부 요소(`::part(base)`)의 `padding`** 으로
+  옮겼다. 기본 렌더는 동일하다.
+  ★종전에는 *"구분선 간격은 형제를 밀어내는 것이라 내부 요소로 옮기면 상쇄된다"* 는 이유로
+  해법이 없다고 봤는데, 그것은 **`margin` 을 옮길 때만** 참이다. `padding` 은 호스트 박스
+  자체를 키우므로 형제는 종전대로 밀려나고, 섀도 내부에 있어 문서 리셋이 닿지 못한다.
+  실제 렌더 측정(리셋 적용 전후의 형제 간 거리)으로 검증했다.
+  ⚠**호환성**: `u-divider { margin: … }` 처럼 호스트에 직접 간격을 주던 소비자는 이제 효과가
+  없다. `--divider-spacing` 을 쓴다(리셋 아래에서도 동작하는 것을 테스트로 확인했다).
+  `u-divider` 에 `part="base"` 가 추가됐다.
+
+### Changed
+
+- **`u-tag` 의 prefix/suffix 간격을 `--tag-gap` 하나로 일원화** — 종전에는 `gap`(4px)과 슬롯
+  margin(0.15em, 약 1.8px)이 **같은 자리에 겹쳐** 있어, 소비자가 `--tag-gap` 을 0 으로 줘도
+  1.8px 이 남았고 그 값에는 훅이 없었다. `--tag-gap` 기본값을 합계(약 6px)로 올려 흡수했다 —
+  렌더 간격 차이는 서브픽셀이다.
+
+### Documentation
+
+- **타이포에 반응하는 컴포넌트 / 그렇지 않은 컴포넌트**를 `docs/design-tokens.md` 에 명시했다.
+  대부분은 `font-size: inherit` 이라 소비자 타이포를 따르지만, `u-tag`·`u-tree-item`(12px)·
+  `u-copy-button`(18px)·`u-icon-button`(20px)은 **의도적으로 자기 크기를 고정**한다 —
+  주변 텍스트와 무관하게 일정해야 읽히는 것들이다. 이 넷의 `em` 여백은 고정 크기 위에
+  얹히므로 실질적으로 절대값이며, 크기 조정은 각 컴포넌트의 여백 훅으로 한다.
+
 ## [1.12.0] - 2026-08-01
 
 ### ⚠ 업그레이드 전 확인 (호스트 직접 오버라이드)
@@ -114,7 +212,7 @@ u-tag { --tag-padding-block: 4px; --tag-padding-inline: 10px; }
 
 ### Fixed
 - **u-field 합성 폼 컨트롤이 접근성 트리에서 이름 없이 노출되던 문제 수정** (WCAG 1.3.1·4.1.2 — Playwright E2E 실측). 라벨은 `u-field` 의 별도 섀도 스코프에 렌더되어 `label[for]` 로 컨트롤과 연결될 수 없었고, 섀도 경계 탓에 cross-root `aria-labelledby` 도 현 브라우저에서 신뢰성 있게 배송되지 않는다. 이제 각 컴포넌트가 자신의 접근 이름 호스트에 라벨을 `aria-label`(설명은 `aria-description`)로 미러링한다 — `u-input`/`u-textarea`(네이티브 컨트롤), `u-rating`/`u-radio`(`role=radiogroup`), `u-select`(`role=combobox` + `aria-expanded`/`aria-haspopup`/`aria-controls`), `u-slider`(`role=slider` + `aria-valuenow`/`valuemin`/`valuemax`/`valuetext`). 아울러 `u-option` 이 사용 맥락에 맞는 자식 역할·상태를 노출한다 — radiogroup(`marker='radio'`) 안에서는 `role=radio` + `aria-checked`, listbox(`u-select`/`u-input` combobox) 에서는 `role=option` + `aria-selected`(+ `aria-disabled`) — 이름만 있고 비어 보이던 radiogroup/combobox 위젯이 자식까지 정합하게 읽힌다. `u-rating` 심볼(`role=radio`)도 커밋 값 기준 `aria-checked` 를 노출한다. `getByLabel`/`getByRole({name})` 로케이터와 스크린리더가 컨트롤을 이름으로 인식한다.
-- **React 래퍼 `.d.ts` 타이핑 2건 수정** (React 19 + TS strict 컴파일 차단 — U-CMMS 실측). (1) `React.HTMLAttributes` 의 이벤트 핸들러(`onChange` 등)와 래퍼의 CustomEvent 시그니처가 교집합되어 어떤 핸들러도 대입 불가였던 것을, HTMLAttributes 쪽 동명 이벤트 키를 `Omit` 해 CustomEvent 시그니처만 남기도록 교정. (2) `Partial<Element>` 의 DOM `children: HTMLCollection` 이 JSX children 을 가려 `<UButton>text</UButton>` 이 TS2747 로 실패하던 것을, `Omit<Partial<Element>, keyof HTMLAttributes>` 로 DOM 전용 키를 제거하고 React 친화 타입(`children: ReactNode`)이 HTMLAttributes 에서 공급되도록 교정. 소비자의 `as unknown as ComponentType` 우회 제거 가능.
+- **React 래퍼 `.d.ts` 타이핑 2건 수정** (React 19 + TS strict 컴파일 차단 — 실사용에서 관측). (1) `React.HTMLAttributes` 의 이벤트 핸들러(`onChange` 등)와 래퍼의 CustomEvent 시그니처가 교집합되어 어떤 핸들러도 대입 불가였던 것을, HTMLAttributes 쪽 동명 이벤트 키를 `Omit` 해 CustomEvent 시그니처만 남기도록 교정. (2) `Partial<Element>` 의 DOM `children: HTMLCollection` 이 JSX children 을 가려 `<UButton>text</UButton>` 이 TS2747 로 실패하던 것을, `Omit<Partial<Element>, keyof HTMLAttributes>` 로 DOM 전용 키를 제거하고 React 친화 타입(`children: ReactNode`)이 HTMLAttributes 에서 공급되도록 교정. 소비자의 `as unknown as ComponentType` 우회 제거 가능.
 
 ## [1.8.0] - 2026-07-22
 
@@ -170,10 +268,10 @@ u-tag { --tag-padding-block: 4px; --tag-padding-inline: 10px; }
 ## [1.6.0] - 2026-07-16
 
 ### Added
-- `UCopyButton`(`u-copy-button`): **인라인 텍스트 라벨** 지원 — `label` prop을 지정하면 아이콘 옆에 보이는 텍스트 라벨을 렌더한다(예: `label="결과 복사"`). 지금까지 u-copy-button은 아이콘 전용(기본 슬롯은 툴팁으로 소비)이라 "📋 결과 복사"처럼 라벨이 붙은 복사 버튼을 표현할 수 없어, 소비자가 검증된 클립보드 로직(취소 가능 `copy` ClipboardEvent + copied 상태 + 아이콘 토글)을 재사용하지 못하고 자체 재구현하던 역량 갭을 해소. 비파괴 — `label` 미지정 시 기존 아이콘 전용 형태(및 기본 슬롯=툴팁 의미)를 그대로 유지한다. 라벨 지정 시 내부적으로 `u-button`(아이콘 prefix + 텍스트)으로 렌더하고, 클립보드 로직은 두 형태에서 동일하다. online-tools(NT-U4)
+- `UCopyButton`(`u-copy-button`): **인라인 텍스트 라벨** 지원 — `label` prop을 지정하면 아이콘 옆에 보이는 텍스트 라벨을 렌더한다(예: `label="결과 복사"`). 지금까지 u-copy-button은 아이콘 전용(기본 슬롯은 툴팁으로 소비)이라 "📋 결과 복사"처럼 라벨이 붙은 복사 버튼을 표현할 수 없어, 소비자가 검증된 클립보드 로직(취소 가능 `copy` ClipboardEvent + copied 상태 + 아이콘 토글)을 재사용하지 못하고 자체 재구현하던 역량 갭을 해소. 비파괴 — `label` 미지정 시 기존 아이콘 전용 형태(및 기본 슬롯=툴팁 의미)를 그대로 유지한다. 라벨 지정 시 내부적으로 `u-button`(아이콘 prefix + 텍스트)으로 렌더하고, 클립보드 로직은 두 형태에서 동일하다.
 
 ### Fixed
-- `u-drawer`/`u-dialog`: **테마 토큰 미정의 시 패널이 투명하게 렌더**되어 모달이 "안 뜬 것처럼" 보이던 결함 수정. backdrop(`--u-overlay-bg-color`)에는 폴백이 있는데 패널 배경/테두리(`--u-panel-bg-color`/`--u-border-color`)에는 폴백이 없어, `Theme.init()`로 토큰을 주입하지 않은 소비자에게 backdrop만 흐려지고 패널은 투명하게 떠 슬롯 콘텐츠가 뒤 페이지와 겹쳐 읽히던 footgun. backdrop과 동일 정책으로 패널 배경에 `Canvas`, 테두리에 `color-mix(in srgb, CanvasText 20%, Canvas)` CSS 시스템 컬러 폴백을 부여 — 토큰 미정의 소비자도 라이트·다크 자동 적응되는 가시 패널을 얻고, 토큰 정의 소비자는 기존과 동일(폴백 미사용). 실 브라우저 렌더 회귀 가드 추가. online-tools(NT-U2)
+- `u-drawer`/`u-dialog`: **테마 토큰 미정의 시 패널이 투명하게 렌더**되어 모달이 "안 뜬 것처럼" 보이던 결함 수정. backdrop(`--u-overlay-bg-color`)에는 폴백이 있는데 패널 배경/테두리(`--u-panel-bg-color`/`--u-border-color`)에는 폴백이 없어, `Theme.init()`로 토큰을 주입하지 않은 소비자에게 backdrop만 흐려지고 패널은 투명하게 떠 슬롯 콘텐츠가 뒤 페이지와 겹쳐 읽히던 footgun. backdrop과 동일 정책으로 패널 배경에 `Canvas`, 테두리에 `color-mix(in srgb, CanvasText 20%, Canvas)` CSS 시스템 컬러 폴백을 부여 — 토큰 미정의 소비자도 라이트·다크 자동 적응되는 가시 패널을 얻고, 토큰 정의 소비자는 기존과 동일(폴백 미사용). 실 브라우저 렌더 회귀 가드 추가.
 
 ## [1.5.1] - 2026-07-07
 

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  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-100);\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  --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  /* 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  --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  --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  /* Text Colors */\n  --u-txt-color:             var(--u-neutral-900);\n  --u-txt-color-inverse:     var(--u-neutral-0);\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  --u-txt-color-weak:        var(--u-neutral-500);\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  --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  /* 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-hover:       var(--u-primary-color);\n  --u-txt-color-active:      var(--u-primary-color);\n  --u-txt-color-disabled:    var(--u-neutral-400);\n  --u-txt-color-weak:        var(--u-neutral-500);\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  --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/UElement.styles.js

@@ -17,11 +17,11 @@ var styles = css`
 
   /* Focus Styles */
   :host(:focus-visible) {
-    outline: 2px solid var(--u-primary-color-weak);
+    outline: 2px solid var(--u-primary-color-weak, #2196F3);
     outline-offset: 2px;
   }
   :focus-visible {
-    outline: 2px solid var(--u-primary-color-weak);
+    outline: 2px solid var(--u-primary-color-weak, #2196F3);
     outline-offset: 2px;
   }
 
@@ -36,31 +36,31 @@ var styles = css`
   /* Scrollbar Styles */
   :host([scrollable]) {
     scrollbar-width: thin;
-    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+    scrollbar-color: var(--u-scrollbar-color, #BDBDBD) var(--u-scrollbar-track-color, transparent);
   }
   :host([scrollable])::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
   :host([scrollable])::-webkit-scrollbar-thumb {
-    background: var(--u-scrollbar-color);
+    background: var(--u-scrollbar-color, #BDBDBD);
   }
   :host([scrollable])::-webkit-scrollbar-track {
-    background: var(--u-scrollbar-track-color);
+    background: var(--u-scrollbar-track-color, transparent);
   }
   [scrollable] {
     scrollbar-width: thin;
-    scrollbar-color: var(--u-scrollbar-color) var(--u-scrollbar-track-color);
+    scrollbar-color: var(--u-scrollbar-color, #BDBDBD) var(--u-scrollbar-track-color, transparent);
   }
   [scrollable]::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
   [scrollable]::-webkit-scrollbar-thumb {
-    background: var(--u-scrollbar-color);
+    background: var(--u-scrollbar-color, #BDBDBD);
   }
   [scrollable]::-webkit-scrollbar-track {
-    background: var(--u-scrollbar-track-color);
+    background: var(--u-scrollbar-track-color, transparent);
   }
 `;
 //#endregion

package/dist/components/UOverlayElement.styles.js

@@ -6,7 +6,7 @@ var styles = css`
     z-index: 9999;
     inset: 0;
     display: flex;
-    background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.4));
+    background: var(--u-overlay-bg-color, rgba(0, 0, 0, 0.5));
 
     opacity: 0;
     visibility: hidden;

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

@@ -3,34 +3,34 @@ import { css } from "lit";
 var styles = css`
   /* === Status Colors === */
   :host {
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-border-color: var(--u-neutral-300);
-    --alert-background-color: var(--u-neutral-200);
+    --alert-icon-color: var(--u-neutral-700, #616161);
+    --alert-border-color: var(--u-neutral-300, #E0E0E0);
+    --alert-background-color: var(--u-neutral-200, #EEEEEE);
   }
   :host([status="error"]) {
-    --alert-icon-color: var(--u-danger-color-strong);
-    --alert-border-color: var(--u-danger-color-weaker);
-    --alert-background-color: var(--u-danger-color-weakest);
+    --alert-icon-color: var(--u-danger-color-strong, #D32F2F);
+    --alert-border-color: var(--u-danger-color-weaker, #E57373);
+    --alert-background-color: var(--u-danger-color-weakest, #EF9A9A);
   }
   :host([status="warning"]) {
-    --alert-icon-color: var(--u-warning-color-strong);
-    --alert-border-color: var(--u-warning-color-weaker);
-    --alert-background-color: var(--u-warning-color-weakest);
+    --alert-icon-color: var(--u-warning-color-strong, #FBC02D);
+    --alert-border-color: var(--u-warning-color-weaker, #FFF176);
+    --alert-background-color: var(--u-warning-color-weakest, #FFF59D);
   }
   :host([status="info"]) {
-    --alert-icon-color: var(--u-info-color-strong);
-    --alert-border-color: var(--u-info-color-weaker);
-    --alert-background-color: var(--u-info-color-weakest);
+    --alert-icon-color: var(--u-info-color-strong, #1976D2);
+    --alert-border-color: var(--u-info-color-weaker, #64B5F6);
+    --alert-background-color: var(--u-info-color-weakest, #90CAF9);
   }
   :host([status="success"]) {
-    --alert-icon-color: var(--u-success-color-strong);
-    --alert-border-color: var(--u-success-color-weaker);
-    --alert-background-color: var(--u-success-color-weakest);
+    --alert-icon-color: var(--u-success-color-strong, #388E3C);
+    --alert-border-color: var(--u-success-color-weaker, #81C784);
+    --alert-background-color: var(--u-success-color-weakest, #A5D6A7);
   }
   :host([status="notice"]) {
-    --alert-icon-color: var(--u-neutral-700);
-    --alert-border-color: var(--u-neutral-300);
-    --alert-background-color: var(--u-neutral-200);
+    --alert-icon-color: var(--u-neutral-700, #616161);
+    --alert-border-color: var(--u-neutral-300, #E0E0E0);
+    --alert-background-color: var(--u-neutral-200, #EEEEEE);
   }
 
   :host {
@@ -39,8 +39,8 @@ var styles = css`
     min-width: 200px;
     max-width: 100%;
     max-height: 50vh;
-    border-radius: var(--u-radius-xl);
-    box-shadow: 0 4px 12px var(--u-shadow-color-normal);
+    border-radius: var(--u-radius-xl, 8px);
+    box-shadow: 0 4px 12px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
     
     opacity: 0;
     transform: scale(0.8);
@@ -94,7 +94,7 @@ var styles = css`
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    padding: var(--alert-padding-block, 12px) var(--alert-padding-inline, 16px);
+    padding: var(--alert-padding-block, var(--u-space-md, 12px)) var(--alert-padding-inline, var(--u-space-lg, 16px));
     border: var(--alert-border-width, 0) solid var(--alert-border-color);
     border-radius: inherit;
   }
@@ -104,8 +104,8 @@ var styles = css`
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 12px;
-    margin-bottom: 4px;
+    gap: var(--u-space-md, 12px);
+    margin-bottom: var(--u-space-2xs, 4px);
     font-size: 16px;
     user-select: none;
   }
@@ -120,9 +120,9 @@ var styles = css`
   }
   .header .close-btn {
     flex-shrink: 0;
-    padding: 4px;
+    padding: var(--u-space-2xs, 4px);
     font-size: inherit;
-    border-radius: var(--u-radius-md);
+    border-radius: var(--u-radius-md, 4px);
   }
 
   .content {

package/dist/components/avatar/UAvatar.styles.js

@@ -9,24 +9,24 @@ var styles = css`
     height: 2.5em;
     font-family: var(--u-font-base);
     font-weight: 600;
-    color: var(--u-neutral-0);
-    background-color: var(--u-neutral-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-neutral-500, #9E9E9E);
     vertical-align: middle;
     overflow: hidden;
     user-select: none;
   }
 
   :host([shape="circle"]) {
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
   }
   :host([shape="square"]) {
-    border-radius: var(--u-radius-none);
+    border-radius: var(--u-radius-none, 0);
   }
   :host([shape="rounded"]) {
     border-radius: 0.375em;
   }
   :host([outline]) {
-    box-shadow: 0 0 0 0.125em var(--u-border-color);
+    box-shadow: 0 0 0 0.125em var(--u-border-color, #E0E0E0);
   }
 
   img {

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

@@ -34,56 +34,56 @@ var styles = css`
     border-radius: 0.2em;
   }
   :host([variant="pill"]) {
-    border-radius: var(--u-radius-pill);
+    border-radius: var(--u-radius-pill, 9999px);
   }
   :host([variant="dot"]) {
     width: 0.6em;
     height: 0.6em;
     min-width: 0.6em;
     min-height: 0.6em;
-    border-radius: var(--u-radius-circle);
+    border-radius: var(--u-radius-circle, 50%);
   }
 
   /* === Color (색상) === */
   :host([color="neutral"]) {
-    color: var(--u-neutral-800);
-    background-color: var(--u-neutral-200);
+    color: var(--u-neutral-800, #424242);
+    background-color: var(--u-neutral-200, #EEEEEE);
   }
   :host([color="blue"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-primary-color, var(--u-blue-500));
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-primary-color, #1E88E5);
   }
   :host([color="green"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-green-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-green-500, #4CAF50);
   }
   :host([color="yellow"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-yellow-600);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-yellow-600, #FDD835);
   }
   :host([color="red"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-red-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-red-500, #F44336);
   }
   :host([color="orange"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-orange-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-orange-500, #FF9800);
   }
   :host([color="teal"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-teal-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-teal-500, #009688);
   }
   :host([color="cyan"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-cyan-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-cyan-500, #00BCD4);
   }
   :host([color="purple"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-purple-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-purple-500, #9C27B0);
   }
   :host([color="pink"]) {
-    color: var(--u-neutral-0);
-    background-color: var(--u-pink-500);
+    color: var(--u-neutral-0, #FFFFFF);
+    background-color: var(--u-pink-500, #E91E63);
   }
 
   /* === Anchor (위치 고정) === */

package/dist/components/breadcrumb/UBreadcrumb.styles.js

@@ -5,7 +5,7 @@ var styles = css`
     display: block;
     font-size: inherit;
     font-family: var(--u-font-base);
-    color: var(--u-txt-color);
+    color: var(--u-txt-color, #212121);
     user-select: none;
   }
 
@@ -28,7 +28,7 @@ var styles = css`
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: 0.75em;
     user-select: none;
   }

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

@@ -6,13 +6,13 @@ var styles = css`
     align-items: center;
     gap: 0.2em;
     flex-shrink: 0;
-    color: var(--u-txt-color-weak);
+    color: var(--u-txt-color-weak, #9E9E9E);
     font-size: inherit;
     line-height: 1.5em;
     cursor: pointer;
   }
   :host:hover {
-    color: var(--u-primary-color-strong);
+    color: var(--u-primary-color-strong, #1976D2);
   }
   :host([disabled]) {
     opacity: 0.5;