@iyulab/components 1.12.0 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## [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 +165,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 +221,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/alert/UAlert.styles.js

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

package/dist/components/button-group/UButtonGroup.styles.js

@@ -27,7 +27,7 @@ var styles = css`
 
   :host([variant="ghost"]),
   :host([variant="link"]) {
-    gap: 2px;
+    gap: var(--u-space-3xs, 2px);
   }
 `;
 //#endregion

package/dist/components/card/UCard.styles.js

@@ -62,7 +62,7 @@ var styles = css`
 
   .header {
     display: none;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     border-bottom: 1px solid var(--u-border-color);
   }
   .header.has-content {
@@ -72,7 +72,7 @@ var styles = css`
   .body {
     display: none;
     flex: 1;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
   }
   .body.has-content {
     display: block;
@@ -80,7 +80,7 @@ var styles = css`
 
   .footer {
     display: none;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     border-top: 1px solid var(--u-border-color);
   }
   .footer.has-content {

package/dist/components/carousel/UCarousel.styles.js

@@ -56,7 +56,7 @@ var styles = css`
     z-index: 10;
     top: 50%;
     transform: translateY(-50%);
-    padding: 8px;
+    padding: var(--u-space-sm, 8px);
     font-size: 20px;
     color: var(--u-neutral-900);
     background-color: var(--u-neutral-100);
@@ -85,7 +85,7 @@ var styles = css`
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: 8px;
+    gap: var(--u-space-sm, 8px);
     transform: translateX(-50%);
   }
 

package/dist/components/dialog/UDialog.styles.js

@@ -87,8 +87,8 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    padding: 12px 16px;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
@@ -96,7 +96,7 @@ 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);
   }
@@ -105,7 +105,7 @@ var styles = css`
     flex: 1 1 auto;
     min-height: 0;
     display: block;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     overflow: auto;
   }
 
@@ -114,8 +114,8 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 16px;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     border-top: 1px solid var(--u-border-color);
   }
 `;

package/dist/components/divider/UDivider.js

@@ -17,11 +17,13 @@ var UDivider = class UDivider extends UElement {
 	}
 	render() {
 		return html`
-      <span class="line" part="line-start"></span>
-      <span class="label" part="label">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </span>
-      <span class="line" part="line-end"></span>
+      <div class="base" part="base">
+        <span class="line" part="line-start"></span>
+        <span class="label" part="label">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </span>
+        <span class="line" part="line-end"></span>
+      </div>
     `;
 	}
 	handleSlotChange(e) {

package/dist/components/divider/UDivider.styles.js

@@ -7,10 +7,24 @@ var styles = css`
     --divider-spacing: 8px;
   }
 
+  /*
+   * 간격은 **내부 요소의 padding** 이 진다 — :host 에 margin 으로 두면 소비 앱의
+   * CSS 리셋(전역 셀렉터로 margin 을 0 으로 두는 관행)에 에러 없이 지워진다.
+   *
+   * ★ 여기만 다른 8개 컴포넌트와 방식이 갈린다. 구분선의 간격은 *형제를 밀어내는* 것이라
+   *   내부 요소의 margin 으로 옮기면 호스트 박스 안에서 상쇄되어 아무것도 밀지 못한다.
+   *   그러나 **padding** 은 호스트 박스 자체를 키우므로 형제는 종전대로 밀려나고,
+   *   padding 은 섀도 내부에 있어 문서 리셋이 닿지 못한다.
+   */
   :host {
+    display: block;
+  }
+
+  .base {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
-    margin: var(--divider-spacing) 0;
+    padding: var(--divider-spacing) 0;
   }
 
   /* variant */
@@ -43,7 +57,7 @@ var styles = css`
   /* 슬롯 콘텐츠 */
   .label {
     display: none;
-    padding: 0 12px;
+    padding: 0 var(--u-space-md, 12px);
     color: var(--u-txt-color-weak);
     font-size: 0.85em;
     white-space: nowrap;
@@ -52,10 +66,16 @@ var styles = css`
 
   /* vertical */
   :host([vertical]) {
-    flex-direction: column;
-    margin: 0 var(--divider-spacing);
+    display: inline-block;
     height: auto;
     min-height: 1em;
+    align-self: stretch;
+  }
+
+  :host([vertical]) .base {
+    flex-direction: column;
+    padding: 0 var(--divider-spacing);
+    height: 100%;
   }
 
   :host([vertical]) .line {
@@ -86,7 +106,7 @@ var styles = css`
   }
 
   :host([vertical]) .label {
-    padding: 12px 0;
+    padding: var(--u-space-md, 12px) 0;
   }
 `;
 //#endregion

package/dist/components/drawer/UDrawer.styles.js

@@ -75,8 +75,8 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
-    padding: 12px 16px;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     font-size: 18px;
     font-weight: 600;
     line-height: 1.3;
@@ -84,7 +84,7 @@ 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);
   }
@@ -93,7 +93,7 @@ var styles = css`
     flex: 1 1 auto;
     min-height: 0;
     display: block;
-    padding: 16px;
+    padding: var(--u-space-lg, 16px);
     overflow: auto;
   }
 
@@ -102,8 +102,8 @@ var styles = css`
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 8px;
-    padding: 12px 16px;
+    gap: var(--u-space-sm, 8px);
+    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
     border-top: 1px solid var(--u-border-color);
   }
 `;

package/dist/components/menu/UMenu.styles.js

@@ -12,7 +12,7 @@ var styles = css`
     border-radius: var(--u-radius-lg);
     background-color: var(--u-panel-bg-color);
 
-    --menu-padding: 4px;
+    --menu-padding: var(--u-space-2xs, 4px);
     --menu-border-width: 1px;
     --menu-border-color: var(--u-border-color);
   }

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

@@ -110,7 +110,7 @@ var styles = css`
 
   .mark-labels {
     position: relative;
-    margin-top: 12px;
+    margin-top: var(--u-space-md, 12px);
   }
 
   .mark-label {

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

@@ -116,7 +116,7 @@ var styles = css`
 
     --tag-padding-block: 0.25em;
     --tag-padding-inline: 0.5em;
-    --tag-gap: 4px;
+    --tag-gap: var(--u-space-xs, 6px);
     color: var(--tag-color);
     background-color: var(--tag-bg-color);
     line-height: 1.5em;
@@ -140,13 +140,13 @@ var styles = css`
     border-radius: var(--u-radius-pill);
   }
 
-  /* === Slots === */
-  ::slotted([slot="prefix"]) {
-    margin-right: 0.15em;
-  }
-  ::slotted([slot="suffix"]) {
-    margin-left: 0.15em;
-  }
+  /*
+   * === Slots ===
+   * 간격은 .base 의 gap 하나가 진다.
+   * 종전에는 gap 과 슬롯 margin(0.15em, 약 1.8px)이 **같은 자리에 겹쳐** 있어,
+   * 소비자가 --tag-gap 을 0 으로 줘도 1.8px 이 남았고 그 값에는 훅이 없었다.
+   * --tag-gap 기본값을 합계(4 + 1.8 = 약 6px)로 올려 흡수했다 — 렌더 간격은 사실상 그대로다.
+   */
 
   /* === Content === */
   .content {

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

@@ -16,8 +16,8 @@ var styles = css`
     transform: scale(0.9);
     transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
 
-    --tooltip-padding-block: 6px;
-    --tooltip-padding-inline: 8px;
+    --tooltip-padding-block: var(--u-space-xs, 6px);
+    --tooltip-padding-inline: var(--u-space-sm, 8px);
   }
 
   /* 여백은 내부 요소가 진다 — :host 에 두면 소비 앱 CSS 리셋에 지워진다. */

package/dist/styles/dark.css

@@ -188,6 +188,20 @@
   --u-radius-pill:   9999px;
   --u-radius-circle: 50%;
 
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이의 **레이아웃 여백**만
+     담당한다. 폼·인라인 요소의 `em` 여백은 상속된 `font-size` 에 비례하는 것이 의도이므로
+     **여기로 흡수하지 않는다.** 반경과 마찬가지로 테마와 무관하므로 두 시트가 같다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);

package/dist/styles/light.css

@@ -188,6 +188,21 @@
   --u-radius-pill:   9999px;
   --u-radius-circle: 50%;
 
+  /* ==========================================================================
+     Space Scale — 컨테이너·오버레이의 절대 여백
+     ⚠**여백은 하나의 축이 아니다.** 이 스케일은 컨테이너/오버레이(카드·대화상자·드로어·
+     알림·메뉴·툴팁 등)의 **레이아웃 여백**만 담당한다. 폼·인라인 요소의 `em` 여백은
+     상속된 `font-size` 에 비례하는 것이 의도이므로 **여기로 흡수하지 않는다** —
+     흡수하면 타이포를 키운 소비자의 여백이 따라 커지지 않는다.
+     축 구분과 근거는 docs/design-tokens.md 참조.
+     ========================================================================== */
+  --u-space-3xs:  2px;
+  --u-space-2xs:  4px;
+  --u-space-xs:   6px;
+  --u-space-sm:   8px;
+  --u-space-md:  12px;
+  --u-space-lg:  16px;
+
   /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     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.12.0",
+  "version": "1.13.0",
   "keywords": [
     "iyulab",
     "components",