@bigtablet/design-system 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +10 -10
  2. package/dist/index.css +3904 -1104
  3. package/dist/index.d.ts +275 -65
  4. package/dist/index.js +505 -137
  5. package/dist/styles/a11y/_index.scss +3 -3
  6. package/dist/styles/colors/_index.scss +168 -61
  7. package/dist/styles/elevation/_index.scss +4 -4
  8. package/dist/styles/motion/_index.scss +2 -2
  9. package/dist/styles/skeleton/_index.scss +2 -2
  10. package/dist/styles/typography/_index.scss +3 -3
  11. package/dist/vanilla/bigtablet.min.css +1 -1
  12. package/package.json +9 -11
package/dist/styles/a11y/_index.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @use "../colors" as colors;
2
2
  @use "../breakpoints" as breakpoint;
3
3
 
4
- // Focus rings — CSS Custom Properties로 light/dark 자동 전환.
5
- // Dark 모드는 흰색 alpha 기반으로 navy bg 위에서도 가시성 확보.
4
+ // Focus rings - CSS Custom Properties로 light/dark 자동 전환.
5
+ // Dark 모드는 흰색 alpha 기반으로 neutral dark bg 위에서도 가시성 확보.
6
6
 
7
7
  :root {
8
8
  --bt-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);
@@ -24,7 +24,7 @@
24
24
  }
25
25
  }
26
26
 
27
- // SCSS aliases — 기존 사용처는 그대로 작동
27
+ // SCSS aliases - 기존 사용처는 그대로 작동
28
28
  $focus_ring: var(--bt-focus-ring);
29
29
  $focus_ring_error: var(--bt-focus-ring-error);
30
30
  $focus_ring_success: var(--bt-focus-ring-success);
package/dist/styles/colors/_index.scss CHANGED
@@ -1,13 +1,13 @@
1
1
  // ════════════════════════════════════════════════════════════════════════
2
- // Bigtablet 컬러 토큰 — Light/Dark 양쪽 지원
2
+ // Bigtablet 컬러 토큰 - Light/Dark 양쪽 지원
3
3
  //
4
4
  // 구조:
5
- // 1. Base colors (raw values) — SCSS 변수
6
- // 2. CSS custom properties (:root + [data-theme="dark"]) — 런타임 테마 전환
7
- // 3. Semantic SCSS 변수 — CSS var를 참조 → 기존 사용처(@use token; $color_*) 호환 유지
5
+ // 1. Base colors (raw values) - SCSS 변수
6
+ // 2. CSS custom properties (:root + [data-theme="dark"]) - 런타임 테마 전환
7
+ // 3. Semantic SCSS 변수 - CSS var를 참조 → 기존 사용처(@use token; $color_*) 호환 유지
8
8
  //
9
9
  // `brand_primary`, `accent.*`, `status.*` 는 light/dark 동일 (브랜드 일관성).
10
- // 나머지 표면/텍스트/border 는 dark에서 navy 계열로 자동 전환.
10
+ // 나머지 표면/텍스트/border 는 dark에서 neutral 계열로 자동 전환 (Vercel-style pure gray).
11
11
  // ════════════════════════════════════════════════════════════════════════
12
12
 
13
13
  // ── Base colors (raw, never theme-aware) ────────────────────────────────
@@ -25,22 +25,45 @@ $color_base_neutral_600: #777777;
25
25
  $color_base_neutral_700: #666666;
26
26
  $color_base_neutral_800: #333333;
27
27
  $color_base_neutral_900: #121212;
28
- $color_base_status_error: #EF4444;
29
- $color_base_status_success: #10B981;
30
- $color_base_status_warning: #F59E0B;
31
- $color_base_status_info: #3B82F6;
32
-
33
- // Bigtablet navy (초기 홈페이지에서 추출) — slate-gray-blue + sky blue
34
- $color_base_navy_50: #F2F5F8;
35
- $color_base_navy_100: #DDE3E9;
36
- $color_base_navy_200: #B4C2CD;
37
- $color_base_navy_300: #7AA5D2;
38
- $color_base_navy_400: #5A8DCB;
39
- $color_base_navy_500: #4C7CB6;
40
- $color_base_navy_600: #47555E;
41
- $color_base_navy_700: #3D4852;
42
- $color_base_navy_800: #303841;
43
- $color_base_navy_900: #1F2630;
28
+ $color_base_neutral_925: #141414; // dark panel/card bg (Vercel-style)
29
+ $color_base_neutral_950: #0A0A0A; // darkest page bg (Vercel-style)
30
+ // Status - light mode default (darkened for AA on #fff text, 5+:1)
31
+ // 이전 값 (#EF4444 등) 은 #fff 텍스트 조합 시 AA 미달 (2.0~3.7:1) - Tailwind 700 계열로 교체.
32
+ $color_base_status_error: #B91C1C; // red-700, with #fff = 6.4:1
33
+ $color_base_status_success: #047857; // green-700, with #fff = 5.5:1
34
+ $color_base_status_warning: #B45309; // amber-700, with #fff = 5.1:1
35
+ $color_base_status_info: #1D4ED8; // blue-700, with #fff = 6.5:1
36
+
37
+ // Status - dark mode 텍스트 / surface 위 직접 사용용 (brightened)
38
+ // dark canvas (neutral_950 #0A0A0A lum ~0.001) 위에서 6+:1 이상 보장.
39
+ $color_base_status_error_dark_text: #F87171; // red-400, on neutral_950 ~8.2:1
40
+ $color_base_status_success_dark_text: #4ADE80; // green-400, on neutral_950 ~12.6:1
41
+ $color_base_status_warning_dark_text: #FBBF24; // amber-400, on neutral_950 ~15.7:1
42
+ $color_base_status_info_dark_text: #60A5FA; // blue-400, on neutral_950 ~9.4:1
43
+
44
+ // Status container - light mode (연한 tint 배경)
45
+ $color_base_status_error_container_light: #FEE2E2; // red-100
46
+ $color_base_status_success_container_light: #DCFCE7; // green-100
47
+ $color_base_status_warning_container_light: #FEF3C7; // amber-100
48
+ $color_base_status_info_container_light: #DBEAFE; // blue-100
49
+
50
+ // Status container - dark mode (deep alpha tint, dark neutral bg 위 식별 가능)
51
+ // Sass rgba(hex, alpha) - 다른 토큰 정의와 hex 일관성 유지.
52
+ $color_base_status_error_container_dark: rgba(#7f1d1d, 0.35); // red-900 @ 35%
53
+ $color_base_status_success_container_dark: rgba(#064e3b, 0.35); // green-900 @ 35%
54
+ $color_base_status_warning_container_dark: rgba(#78350f, 0.35); // amber-900 @ 35%
55
+ $color_base_status_info_container_dark: rgba(#1e3a8a, 0.35); // blue-900 @ 35%
56
+
57
+ // Status on-container - dark mode (tint 위에서 보일 만한 밝은 색)
58
+ $color_base_status_error_on_container_dark: #FCA5A5; // red-300
59
+ $color_base_status_success_on_container_dark: #86EFAC; // green-300
60
+ $color_base_status_warning_on_container_dark: #FCD34D; // amber-300
61
+ $color_base_status_info_on_container_dark: #93C5FD; // blue-300
62
+
63
+ // Skeleton - light mode (off-white grays, not in neutral scale)
64
+ $color_base_skeleton_base: #F3F3F3;
65
+ $color_base_skeleton_wave: #F0F0F0;
66
+ $color_base_skeleton_highlight: #FAFAFA;
44
67
 
45
68
  // Alpha
46
69
  $color_base_alpha_black_5: rgba(0, 0, 0, 0.05);
@@ -55,7 +78,7 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
55
78
 
56
79
  // ── CSS custom properties (런타임 테마 전환) ────────────────────────────
57
80
  // `:root` = light mode 기본. `[data-theme="dark"]` = dark overrides.
58
- // 컴포넌트는 SCSS `$color_*` 변수로 접근 — 아래 변수들이 var()로 컴파일됨.
81
+ // 컴포넌트는 SCSS `$color_*` 변수로 접근 - 아래 변수들이 var()로 컴파일됨.
59
82
 
60
83
  :root {
61
84
  // Brand (light/dark 동일)
@@ -94,15 +117,40 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
94
117
  --bt-color-border-focus: #{$color_base_neutral_900};
95
118
  --bt-color-border-disabled: #{$color_base_neutral_100};
96
119
 
97
- // Status (light/dark 동일)
120
+ // Status - base (solid bg 용, light = darkened - #fff text 5+:1)
98
121
  --bt-color-status-error: #{$color_base_status_error};
99
122
  --bt-color-status-success: #{$color_base_status_success};
100
123
  --bt-color-status-warning: #{$color_base_status_warning};
101
124
  --bt-color-status-info: #{$color_base_status_info};
102
125
 
103
- // Accent (검정 brand 기반 — light에서 검정, dark에서 흰색 반전)
126
+ // Status - on-default (solid bg 위 텍스트)
127
+ --bt-color-status-error-on-default: #{$color_base_neutral_0};
128
+ --bt-color-status-success-on-default: #{$color_base_neutral_0};
129
+ --bt-color-status-warning-on-default: #{$color_base_neutral_0};
130
+ --bt-color-status-info-on-default: #{$color_base_neutral_0};
131
+
132
+ // Status - container (tint 배경 - soft variant 용)
133
+ --bt-color-status-error-container: #{$color_base_status_error_container_light};
134
+ --bt-color-status-success-container: #{$color_base_status_success_container_light};
135
+ --bt-color-status-warning-container: #{$color_base_status_warning_container_light};
136
+ --bt-color-status-info-container: #{$color_base_status_info_container_light};
137
+
138
+ // Status - on-container (tint 위 텍스트)
139
+ --bt-color-status-error-on-container: #{$color_base_status_error};
140
+ --bt-color-status-success-on-container: #{$color_base_status_success};
141
+ --bt-color-status-warning-on-container: #{$color_base_status_warning};
142
+ --bt-color-status-info-on-container: #{$color_base_status_info};
143
+
144
+ // Status - on-surface (앱 surface 위 직접 텍스트, e.g. TextField error helper)
145
+ // light: darkened (= status-* 와 동일), dark 에서만 분기 됨.
146
+ --bt-color-status-error-on-surface: #{$color_base_status_error};
147
+ --bt-color-status-success-on-surface: #{$color_base_status_success};
148
+ --bt-color-status-warning-on-surface: #{$color_base_status_warning};
149
+ --bt-color-status-info-on-surface: #{$color_base_status_info};
150
+
151
+ // Accent (검정 brand 기반 - light에서 검정, dark에서 흰색 반전)
104
152
  // 컴포넌트 active/selected/indicator 강조에 사용.
105
- // navy 색상은 `color_base_navy_*`로 별도 보존 (legacy/optional usage).
153
+ // Accent: brand 검정 기반 (light=검정, dark=흰색 반전)
106
154
  --bt-color-accent-subtle: #{$color_base_alpha_black_5};
107
155
  --bt-color-accent-muted: #{$color_base_alpha_black_12};
108
156
  --bt-color-accent-light: #{$color_base_neutral_400};
@@ -110,39 +158,40 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
110
158
  --bt-color-accent-strong: #{$color_base_neutral_900};
111
159
  --bt-color-accent-on-surface: #{$color_base_neutral_0}; // 검정 위 흰색
112
160
 
113
- // Skeleton (light gray gradient — dark 에서 navy gray 로 전환)
114
- --bt-color-skeleton-base: #F3F3F3;
115
- --bt-color-skeleton-wave: #f0f0f0;
116
- --bt-color-skeleton-highlight: #fafafa;
161
+ // Skeleton (light gray gradient - dark 에서 neutral gray 로 전환)
162
+ --bt-color-skeleton-base: #{$color_base_skeleton_base};
163
+ --bt-color-skeleton-wave: #{$color_base_skeleton_wave};
164
+ --bt-color-skeleton-highlight: #{$color_base_skeleton_highlight};
117
165
  }
118
166
 
119
167
  [data-theme="dark"] {
120
168
  // 브라우저 기본 UI (스크롤바, form control 등) 다크 적응
121
169
  color-scheme: dark;
122
- // Font rendering — dark bg 위 흰 글씨의 halation/노이즈 보정
170
+ // Font rendering - dark bg 위 흰 글씨의 halation/노이즈 보정
123
171
  -webkit-font-smoothing: antialiased;
124
172
  -moz-osx-font-smoothing: grayscale;
125
173
 
126
- // Brand (dark 모드에서도 black 유지 — bg가 navy라 black 버튼 구분됨.
127
- // 단 텍스트로 쓰일 땐 inverse 사용 권장)
174
+ // Brand (dark 모드에서도 black 유지.
175
+ // neutral_950 (#0A0A0A) bg와 대비가 낮아 버튼 등에서 border/elevation 보조 필요.
176
+ // 텍스트로 쓰일 땐 inverse 사용 권장)
128
177
 
129
178
  // Text (light → inverted)
130
179
  // heading: 100% 흰색 → 95%로 살짝 부드럽게 (눈 피로 완화, halation 보정)
131
180
  --bt-color-text-heading: rgba(255, 255, 255, 0.95);
132
- --bt-color-text-body: #{$color_base_navy_200};
133
- --bt-color-text-caption: #{$color_base_neutral_400};
181
+ --bt-color-text-body: #{$color_base_neutral_400};
182
+ --bt-color-text-caption: #{$color_base_neutral_600};
134
183
  --bt-color-text-inverse: #{$color_base_neutral_900};
135
184
  --bt-color-text-disabled: #{$color_base_alpha_white_38};
136
185
 
137
- // Background (light → navy)
138
- --bt-color-bg-solid: #{$color_base_navy_900};
139
- --bt-color-bg-solid-dim: #{$color_base_navy_800};
186
+ // Background (light → neutral dark)
187
+ --bt-color-bg-solid: #{$color_base_neutral_950};
188
+ --bt-color-bg-solid-dim: #{$color_base_neutral_925};
140
189
  --bt-color-bg-additive: #{$color_base_alpha_white_5};
141
190
  --bt-color-bg-disabled: #{$color_base_alpha_white_12};
142
191
  --bt-color-bg-overlay: rgba(0, 0, 0, 0.7);
143
192
  --bt-color-bg-inverse-surface: #{$color_base_neutral_50};
144
193
 
145
- // State (검정 alpha → 흰색 alpha — dark bg 위에서 작동)
194
+ // State (검정 alpha → 흰색 alpha - dark bg 위에서 작동)
146
195
  --bt-color-state-hover-on-light: #{$color_base_alpha_white_8};
147
196
  --bt-color-state-pressed-on-light: #{$color_base_alpha_white_12};
148
197
  --bt-color-state-focus-on-light: #{$color_base_alpha_white_12};
@@ -150,17 +199,17 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
150
199
  --bt-color-state-pressed-on-dark: #{$color_base_alpha_black_12};
151
200
  --bt-color-state-focus-on-dark: #{$color_base_alpha_black_12};
152
201
 
153
- // Border (light gray → navy mid)
154
- --bt-color-border-default: #{$color_base_navy_700};
155
- --bt-color-border-hover: #{$color_base_navy_400};
202
+ // Border (light gray → neutral dark)
203
+ --bt-color-border-default: #{$color_base_neutral_800};
204
+ --bt-color-border-hover: #{$color_base_neutral_600};
156
205
  --bt-color-border-subtle: #{$color_base_alpha_white_12};
157
206
  --bt-color-border-focus: #{$color_base_neutral_0};
158
- --bt-color-border-disabled: #{$color_base_navy_800};
207
+ --bt-color-border-disabled: #{$color_base_neutral_925};
159
208
 
160
- // Brand container — dark 모드에선 white alpha로
209
+ // Brand container - dark 모드에선 white alpha로
161
210
  --bt-color-brand-primary-container: #{$color_base_alpha_white_8};
162
211
 
163
- // Accent (dark — 흰색 반전. active/selected가 dark navy bg 위에서 잘 보임)
212
+ // Accent (dark - 흰색 반전. active/selected가 dark neutral bg 위에서 잘 보임)
164
213
  --bt-color-accent-subtle: #{$color_base_alpha_white_8};
165
214
  --bt-color-accent-muted: #{$color_base_alpha_white_12};
166
215
  --bt-color-accent-light: #{$color_base_neutral_300};
@@ -168,10 +217,28 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
168
217
  --bt-color-accent-strong: #{$color_base_neutral_0};
169
218
  --bt-color-accent-on-surface: #{$color_base_neutral_900}; // 흰 위 검정 텍스트
170
219
 
171
- // Skeleton — navy_700 (bg-solid-dim navy_800 보다 살짝 밝음 → 시각 대비)
172
- --bt-color-skeleton-base: #{$color_base_navy_700};
173
- --bt-color-skeleton-wave: #{$color_base_navy_700};
174
- --bt-color-skeleton-highlight: #{$color_base_navy_600};
220
+ // Status - dark mode 분기
221
+ // base solid 는 light 와 동일 (darkened) 유지 - Badge solid 의 #fff 텍스트 대비 보존.
222
+ // container / on-container / on-surface 만 dark variant 적용.
223
+ --bt-color-status-error-container: #{$color_base_status_error_container_dark};
224
+ --bt-color-status-success-container: #{$color_base_status_success_container_dark};
225
+ --bt-color-status-warning-container: #{$color_base_status_warning_container_dark};
226
+ --bt-color-status-info-container: #{$color_base_status_info_container_dark};
227
+
228
+ --bt-color-status-error-on-container: #{$color_base_status_error_on_container_dark};
229
+ --bt-color-status-success-on-container: #{$color_base_status_success_on_container_dark};
230
+ --bt-color-status-warning-on-container: #{$color_base_status_warning_on_container_dark};
231
+ --bt-color-status-info-on-container: #{$color_base_status_info_on_container_dark};
232
+
233
+ --bt-color-status-error-on-surface: #{$color_base_status_error_dark_text};
234
+ --bt-color-status-success-on-surface: #{$color_base_status_success_dark_text};
235
+ --bt-color-status-warning-on-surface: #{$color_base_status_warning_dark_text};
236
+ --bt-color-status-info-on-surface: #{$color_base_status_info_dark_text};
237
+
238
+ // Skeleton - neutral_800 (bg-solid-dim neutral_925 보다 밝음 → 시각 대비)
239
+ --bt-color-skeleton-base: #{$color_base_neutral_800};
240
+ --bt-color-skeleton-wave: #{$color_base_neutral_800};
241
+ --bt-color-skeleton-highlight: #{$color_base_neutral_700};
175
242
  }
176
243
 
177
244
  // `prefers-color-scheme: dark` 자동 응답 (ThemeProvider 없이도 작동)
@@ -182,13 +249,13 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
182
249
  -moz-osx-font-smoothing: grayscale;
183
250
 
184
251
  --bt-color-text-heading: rgba(255, 255, 255, 0.95);
185
- --bt-color-text-body: #{$color_base_navy_200};
186
- --bt-color-text-caption: #{$color_base_neutral_400};
252
+ --bt-color-text-body: #{$color_base_neutral_400};
253
+ --bt-color-text-caption: #{$color_base_neutral_600};
187
254
  --bt-color-text-inverse: #{$color_base_neutral_900};
188
255
  --bt-color-text-disabled: #{$color_base_alpha_white_38};
189
256
 
190
- --bt-color-bg-solid: #{$color_base_navy_900};
191
- --bt-color-bg-solid-dim: #{$color_base_navy_800};
257
+ --bt-color-bg-solid: #{$color_base_neutral_950};
258
+ --bt-color-bg-solid-dim: #{$color_base_neutral_925};
192
259
  --bt-color-bg-additive: #{$color_base_alpha_white_5};
193
260
  --bt-color-bg-disabled: #{$color_base_alpha_white_12};
194
261
  --bt-color-bg-overlay: rgba(0, 0, 0, 0.7);
@@ -201,15 +268,15 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
201
268
  --bt-color-state-pressed-on-dark: #{$color_base_alpha_black_12};
202
269
  --bt-color-state-focus-on-dark: #{$color_base_alpha_black_12};
203
270
 
204
- --bt-color-border-default: #{$color_base_navy_700};
205
- --bt-color-border-hover: #{$color_base_navy_400};
271
+ --bt-color-border-default: #{$color_base_neutral_800};
272
+ --bt-color-border-hover: #{$color_base_neutral_600};
206
273
  --bt-color-border-subtle: #{$color_base_alpha_white_12};
207
274
  --bt-color-border-focus: #{$color_base_neutral_0};
208
- --bt-color-border-disabled: #{$color_base_navy_800};
275
+ --bt-color-border-disabled: #{$color_base_neutral_925};
209
276
 
210
277
  --bt-color-brand-primary-container: #{$color_base_alpha_white_8};
211
278
 
212
- // Accent dark — 흰색 반전
279
+ // Accent dark - 흰색 반전
213
280
  --bt-color-accent-subtle: #{$color_base_alpha_white_8};
214
281
  --bt-color-accent-muted: #{$color_base_alpha_white_12};
215
282
  --bt-color-accent-light: #{$color_base_neutral_300};
@@ -217,14 +284,30 @@ $color_base_alpha_white_38: rgba(255, 255, 255, 0.38);
217
284
  --bt-color-accent-strong: #{$color_base_neutral_0};
218
285
  --bt-color-accent-on-surface: #{$color_base_neutral_900};
219
286
 
220
- --bt-color-skeleton-base: #{$color_base_navy_700};
221
- --bt-color-skeleton-wave: #{$color_base_navy_700};
222
- --bt-color-skeleton-highlight: #{$color_base_navy_600};
287
+ // Status - dark variant (container / on-container / on-surface 만 분기)
288
+ --bt-color-status-error-container: #{$color_base_status_error_container_dark};
289
+ --bt-color-status-success-container: #{$color_base_status_success_container_dark};
290
+ --bt-color-status-warning-container: #{$color_base_status_warning_container_dark};
291
+ --bt-color-status-info-container: #{$color_base_status_info_container_dark};
292
+
293
+ --bt-color-status-error-on-container: #{$color_base_status_error_on_container_dark};
294
+ --bt-color-status-success-on-container: #{$color_base_status_success_on_container_dark};
295
+ --bt-color-status-warning-on-container: #{$color_base_status_warning_on_container_dark};
296
+ --bt-color-status-info-on-container: #{$color_base_status_info_on_container_dark};
297
+
298
+ --bt-color-status-error-on-surface: #{$color_base_status_error_dark_text};
299
+ --bt-color-status-success-on-surface: #{$color_base_status_success_dark_text};
300
+ --bt-color-status-warning-on-surface: #{$color_base_status_warning_dark_text};
301
+ --bt-color-status-info-on-surface: #{$color_base_status_info_dark_text};
302
+
303
+ --bt-color-skeleton-base: #{$color_base_neutral_800};
304
+ --bt-color-skeleton-wave: #{$color_base_neutral_800};
305
+ --bt-color-skeleton-highlight: #{$color_base_neutral_700};
223
306
  }
224
307
  }
225
308
 
226
309
  // ── Semantic SCSS variables (CSS var 참조) ─────────────────────────────
227
- // 기존 사용처 호환 — `@use "..." as token; background: token.$color_bg_solid;`
310
+ // 기존 사용처 호환 - `@use "..." as token; background: token.$color_bg_solid;`
228
311
 
229
312
  // Brand
230
313
  $color_brand_primary: var(--bt-color-brand-primary);
@@ -262,12 +345,36 @@ $color_border_subtle: var(--bt-color-border-subtle);
262
345
  $color_border_focus: var(--bt-color-border-focus);
263
346
  $color_border_disabled: var(--bt-color-border-disabled);
264
347
 
265
- // Status
348
+ // Status - solid (light=darkened for AA, dark=동일)
266
349
  $color_status_error: var(--bt-color-status-error);
267
350
  $color_status_success: var(--bt-color-status-success);
268
351
  $color_status_warning: var(--bt-color-status-warning);
269
352
  $color_status_info: var(--bt-color-status-info);
270
353
 
354
+ // Status - on-default (solid bg 위 텍스트)
355
+ $color_status_error_on_default: var(--bt-color-status-error-on-default);
356
+ $color_status_success_on_default: var(--bt-color-status-success-on-default);
357
+ $color_status_warning_on_default: var(--bt-color-status-warning-on-default);
358
+ $color_status_info_on_default: var(--bt-color-status-info-on-default);
359
+
360
+ // Status - container (tint 배경, soft variant 용)
361
+ $color_status_error_container: var(--bt-color-status-error-container);
362
+ $color_status_success_container: var(--bt-color-status-success-container);
363
+ $color_status_warning_container: var(--bt-color-status-warning-container);
364
+ $color_status_info_container: var(--bt-color-status-info-container);
365
+
366
+ // Status - on-container (tint 위 텍스트)
367
+ $color_status_error_on_container: var(--bt-color-status-error-on-container);
368
+ $color_status_success_on_container: var(--bt-color-status-success-on-container);
369
+ $color_status_warning_on_container: var(--bt-color-status-warning-on-container);
370
+ $color_status_info_on_container: var(--bt-color-status-info-on-container);
371
+
372
+ // Status - on-surface (앱 surface 위 직접 텍스트, light/dark 자동 swap)
373
+ $color_status_error_on_surface: var(--bt-color-status-error-on-surface);
374
+ $color_status_success_on_surface: var(--bt-color-status-success-on-surface);
375
+ $color_status_warning_on_surface: var(--bt-color-status-warning-on-surface);
376
+ $color_status_info_on_surface: var(--bt-color-status-info-on-surface);
377
+
271
378
  // Accent
272
379
  $color_accent_subtle: var(--bt-color-accent-subtle);
273
380
  $color_accent_muted: var(--bt-color-accent-muted);
package/dist/styles/elevation/_index.scss CHANGED
@@ -1,5 +1,5 @@
1
- // Elevation shadows — CSS Custom Properties로 light/dark 자동 전환.
2
- // Dark 모드는 navy bg 위에서 그림자가 보이도록 더 강한 검정 + 살짝 spread 증가.
1
+ // Elevation shadows - CSS Custom Properties로 light/dark 자동 전환.
2
+ // Dark 모드는 neutral dark bg 위에서 그림자가 보이도록 더 강한 검정 + 살짝 spread 증가.
3
3
 
4
4
  :root {
5
5
  --bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  [data-theme="dark"] {
13
- // navy bg 위에서 그림자 가시성 — 검정 더 진하게 + 약간 더 큰 spread
13
+ // neutral dark bg 위에서 그림자 가시성 - 검정 더 진하게 + 약간 더 큰 spread
14
14
  --bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);
15
15
  --bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);
16
16
  --bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);
@@ -28,7 +28,7 @@
28
28
  }
29
29
  }
30
30
 
31
- // SCSS aliases — 기존 사용처는 그대로 작동
31
+ // SCSS aliases - 기존 사용처는 그대로 작동
32
32
  $elevation_level1: var(--bt-elevation-level1);
33
33
  $elevation_level2: var(--bt-elevation-level2);
34
34
  $elevation_level3: var(--bt-elevation-level3);
package/dist/styles/motion/_index.scss CHANGED
@@ -1,9 +1,9 @@
1
- /* Duration only — easing 따로 조합할 때 사용 */
1
+ /* Duration only - easing 따로 조합할 때 사용 */
2
2
  $duration_fast: 0.1s;
3
3
  $duration_base: 0.2s;
4
4
  $duration_slow: 0.3s;
5
5
 
6
- /* Base Transitions (composite shorthand — easing 이미 포함) */
6
+ /* Base Transitions (composite shorthand - easing 이미 포함) */
7
7
  $transition_fast: $duration_fast ease-in-out; // hover, icon
8
8
  $transition_base: $duration_base ease-in-out; // 메뉴 열림
9
9
  $transition_slow: $duration_slow ease-in-out; // 레이아웃 변화
package/dist/styles/skeleton/_index.scss CHANGED
@@ -1,7 +1,7 @@
1
- // Standalone skeleton tokens — no external @use so consumers can import
1
+ // Standalone skeleton tokens - no external @use so consumers can import
2
2
  // this file directly without needing the design system's src/ in their loadPaths.
3
3
 
4
- // CSS custom property 기반 — `[data-theme="dark"]` 에서 자동 전환.
4
+ // CSS custom property 기반 - `[data-theme="dark"]` 에서 자동 전환.
5
5
  // fallback 값은 standalone import (colors 미포함) 시 light 동작 보장.
6
6
  $color_skeleton_base: var(--bt-color-skeleton-base, #F3F3F3);
7
7
  $color_skeleton_wave: var(--bt-color-skeleton-wave, #f0f0f0);
package/dist/styles/typography/_index.scss CHANGED
@@ -84,7 +84,7 @@ $letter_spacing_tight: 0.32px;
84
84
  @mixin label_small_medium { font-size: $font_size_12; font-weight: $font_weight_medium; line-height: $line_height_16; letter-spacing: $letter_spacing_normal; }
85
85
 
86
86
  // ── Bold weight variants (v3.1) ───────────────────────────────────────────
87
- // 강조용 — 매번 font-weight 명시 안 해도 되도록.
87
+ // 강조용 - 매번 font-weight 명시 안 해도 되도록.
88
88
 
89
89
  @mixin display_large_bold { font-size: $font_size_48; font-weight: $font_weight_bold; line-height: $line_height_60; letter-spacing: -0.02em; }
90
90
  @mixin display_medium_bold { font-size: $font_size_40; font-weight: $font_weight_bold; line-height: $line_height_50; letter-spacing: -0.02em; }
@@ -116,7 +116,7 @@ $letter_spacing_tight: 0.32px;
116
116
  @mixin code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: $font_size_13; line-height: $line_height_18; }
117
117
 
118
118
  // ── Responsive display (v3.1) ─────────────────────────────────────────────
119
- // Hero/marketing title — 데스크탑 큰 사이즈, 모바일에서 자동 한 단계 축소.
119
+ // Hero/marketing title - 데스크탑 큰 사이즈, 모바일에서 자동 한 단계 축소.
120
120
 
121
121
  @mixin display_large_responsive {
122
122
  @include display_large_bold;
@@ -134,7 +134,7 @@ $letter_spacing_tight: 0.32px;
134
134
  }
135
135
 
136
136
  // ── Text wrap helpers (v3.1) ──────────────────────────────────────────────
137
- // CSS text-wrap 신기능 활용 — heading은 균형, body는 pretty.
137
+ // CSS text-wrap 신기능 활용 - heading은 균형, body는 pretty.
138
138
 
139
139
  @mixin text_balance { text-wrap: balance; }
140
140
  @mixin text_pretty { text-wrap: pretty; }
package/dist/vanilla/bigtablet.min.css CHANGED
@@ -1 +1 @@
1
- :root{--bt-color-brand-primary: #121212;--bt-color-brand-on-primary: #FFFFFF;--bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-brand: #121212;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-bg-solid: #FFFFFF;--bt-color-bg-solid-dim: #F4F4F4;--bt-color-bg-additive: rgba(0, 0, 0, 0.05);--bt-color-bg-disabled: rgba(26, 26, 26, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.5);--bt-color-bg-inverse-surface: #333333;--bt-color-state-hover-on-light: rgba(0, 0, 0, 0.05);--bt-color-state-pressed-on-light: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-light: rgba(0, 0, 0, 0.08);--bt-color-state-hover-on-dark: rgba(255, 255, 255, 0.05);--bt-color-state-pressed-on-dark: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-dark: rgba(255, 255, 255, 0.08);--bt-color-border-default: #E5E5E5;--bt-color-border-hover: #B3B3B3;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-border-disabled: #F2F2F2;--bt-color-status-error: #EF4444;--bt-color-status-success: #10B981;--bt-color-status-warning: #F59E0B;--bt-color-status-info: #3B82F6;--bt-color-accent-subtle: rgba(0, 0, 0, 0.05);--bt-color-accent-muted: rgba(26, 26, 26, 0.12);--bt-color-accent-light: #B3B3B3;--bt-color-accent-default: #121212;--bt-color-accent-strong: #121212;--bt-color-accent-on-surface: #FFFFFF;--bt-color-skeleton-base: #F3F3F3;--bt-color-skeleton-wave: #f0f0f0;--bt-color-skeleton-highlight: #fafafa}[data-theme=dark]{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B4C2CD;--bt-color-text-caption: #B3B3B3;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #1F2630;--bt-color-bg-solid-dim: #303841;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #3D4852;--bt-color-border-hover: #5A8DCB;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #303841;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-skeleton-base: #3D4852;--bt-color-skeleton-wave: #3D4852;--bt-color-skeleton-highlight: #47555E}@media(prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B4C2CD;--bt-color-text-caption: #B3B3B3;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #1F2630;--bt-color-bg-solid-dim: #303841;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #3D4852;--bt-color-border-hover: #5A8DCB;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #303841;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-skeleton-base: #3D4852;--bt-color-skeleton-wave: #3D4852;--bt-color-skeleton-highlight: #47555E}}:root{--bt-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.30);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.30)}[data-theme=dark]{--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45)}}:root{--bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)}[data-theme=dark]{--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}}@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: var(--bt-color-brand-primary);--bt-color-on-primary: var(--bt-color-brand-on-primary);--bt-color-accent: var(--bt-color-accent-default);--bt-color-accent-on-surface: var(--bt-color-accent-on-surface);--bt-color-background: var(--bt-color-bg-solid);--bt-color-background-dim: var(--bt-color-bg-solid-dim);--bt-color-background-overlay: var(--bt-color-bg-overlay);--bt-color-text-heading: var(--bt-color-text-heading);--bt-color-text-body: var(--bt-color-text-body);--bt-color-text-caption: var(--bt-color-text-caption);--bt-color-text-inverse: var(--bt-color-text-inverse);--bt-color-text-disabled: var(--bt-color-text-disabled);--bt-color-border: var(--bt-color-border-default);--bt-color-border-subtle: var(--bt-color-border-subtle);--bt-color-border-focus: var(--bt-color-border-focus);--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: var(--bt-color-border-hover);--bt-color-hover: var(--bt-color-state-hover-on-light);--bt-color-pressed: var(--bt-color-state-pressed-on-light);--bt-color-primary-hover: #333333;--bt-color-overlay: var(--bt-color-bg-overlay);--bt-color-success: var(--bt-color-status-success);--bt-color-error: var(--bt-color-status-error);--bt-color-warning: var(--bt-color-status-warning);--bt-color-info: var(--bt-color-status-info);--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-elevation-1: var(--bt-elevation-level1);--bt-elevation-2: var(--bt-elevation-level2);--bt-elevation-3: var(--bt-elevation-level3);--bt-elevation-4: var(--bt-elevation-level4);--bt-elevation-5: var(--bt-elevation-level5);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:var(--bt-color-hover)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 92%, #000)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-accent);background:var(--bt-color-background);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-accent);border-color:var(--bt-color-accent)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-accent-on-surface);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-accent);border-width:2px}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-accent);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border-light);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-toggle__thumb{width:12px;height:12px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base),width var(--bt-transition-base),height var(--bt-transition-base);transform:translateX(0)}.bt-toggle--on{background:var(--bt-color-accent)}.bt-toggle--on .bt-toggle__thumb{width:20px;height:20px;background:var(--bt-color-accent-on-surface);transform:translateX(16px)}.bt-toggle--md{width:48px;height:28px}.bt-toggle--md .bt-toggle__thumb{width:16px;height:16px}.bt-toggle--md.bt-toggle--on .bt-toggle__thumb{width:24px;height:24px;transform:translateX(20px)}.bt-toggle--disabled{cursor:not-allowed;background:var(--bt-color-border-light)}.bt-toggle--disabled .bt-toggle__thumb{background:#fff}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-2);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{position:relative;background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-3);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);padding-right:calc(var(--bt-spacing-lg) + 32px);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__close{position:absolute;top:var(--bt-spacing-md);right:var(--bt-spacing-md);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:rgba(0,0,0,0);color:var(--bt-color-text-tertiary);border-radius:var(--bt-radius-md);cursor:pointer;transition:background var(--bt-transition-fast),color var(--bt-transition-fast)}.bt-modal__close:hover{background:var(--bt-color-hover);color:var(--bt-color-text-primary)}.bt-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-elevation-4);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--elevation-1{box-shadow:var(--bt-elevation-1)}.bt-card--elevation-2{box-shadow:var(--bt-elevation-2)}.bt-card--elevation-3{box-shadow:var(--bt-elevation-3)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-accent);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-accent);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-3)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}
1
+ :root{--bt-color-brand-primary: #121212;--bt-color-brand-on-primary: #FFFFFF;--bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-brand: #121212;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-bg-solid: #FFFFFF;--bt-color-bg-solid-dim: #F4F4F4;--bt-color-bg-additive: rgba(0, 0, 0, 0.05);--bt-color-bg-disabled: rgba(26, 26, 26, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.5);--bt-color-bg-inverse-surface: #333333;--bt-color-state-hover-on-light: rgba(0, 0, 0, 0.05);--bt-color-state-pressed-on-light: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-light: rgba(0, 0, 0, 0.08);--bt-color-state-hover-on-dark: rgba(255, 255, 255, 0.05);--bt-color-state-pressed-on-dark: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-dark: rgba(255, 255, 255, 0.08);--bt-color-border-default: #E5E5E5;--bt-color-border-hover: #B3B3B3;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-border-disabled: #F2F2F2;--bt-color-status-error: #B91C1C;--bt-color-status-success: #047857;--bt-color-status-warning: #B45309;--bt-color-status-info: #1D4ED8;--bt-color-status-error-on-default: #FFFFFF;--bt-color-status-success-on-default: #FFFFFF;--bt-color-status-warning-on-default: #FFFFFF;--bt-color-status-info-on-default: #FFFFFF;--bt-color-status-error-container: #FEE2E2;--bt-color-status-success-container: #DCFCE7;--bt-color-status-warning-container: #FEF3C7;--bt-color-status-info-container: #DBEAFE;--bt-color-status-error-on-container: #B91C1C;--bt-color-status-success-on-container: #047857;--bt-color-status-warning-on-container: #B45309;--bt-color-status-info-on-container: #1D4ED8;--bt-color-status-error-on-surface: #B91C1C;--bt-color-status-success-on-surface: #047857;--bt-color-status-warning-on-surface: #B45309;--bt-color-status-info-on-surface: #1D4ED8;--bt-color-accent-subtle: rgba(0, 0, 0, 0.05);--bt-color-accent-muted: rgba(26, 26, 26, 0.12);--bt-color-accent-light: #B3B3B3;--bt-color-accent-default: #121212;--bt-color-accent-strong: #121212;--bt-color-accent-on-surface: #FFFFFF;--bt-color-skeleton-base: #F3F3F3;--bt-color-skeleton-wave: #F0F0F0;--bt-color-skeleton-highlight: #FAFAFA}[data-theme=dark]{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B3B3B3;--bt-color-text-caption: #777777;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #0A0A0A;--bt-color-bg-solid-dim: #141414;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #333333;--bt-color-border-hover: #777777;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #141414;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-status-error-container: rgba(127, 29, 29, 0.35);--bt-color-status-success-container: rgba(6, 78, 59, 0.35);--bt-color-status-warning-container: rgba(120, 53, 15, 0.35);--bt-color-status-info-container: rgba(30, 58, 138, 0.35);--bt-color-status-error-on-container: #FCA5A5;--bt-color-status-success-on-container: #86EFAC;--bt-color-status-warning-on-container: #FCD34D;--bt-color-status-info-on-container: #93C5FD;--bt-color-status-error-on-surface: #F87171;--bt-color-status-success-on-surface: #4ADE80;--bt-color-status-warning-on-surface: #FBBF24;--bt-color-status-info-on-surface: #60A5FA;--bt-color-skeleton-base: #333333;--bt-color-skeleton-wave: #333333;--bt-color-skeleton-highlight: #666666}@media(prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bt-color-text-heading: rgba(255, 255, 255, 0.95);--bt-color-text-body: #B3B3B3;--bt-color-text-caption: #777777;--bt-color-text-inverse: #121212;--bt-color-text-disabled: rgba(255, 255, 255, 0.38);--bt-color-bg-solid: #0A0A0A;--bt-color-bg-solid-dim: #141414;--bt-color-bg-additive: rgba(255, 255, 255, 0.05);--bt-color-bg-disabled: rgba(255, 255, 255, 0.12);--bt-color-bg-overlay: rgba(0, 0, 0, 0.7);--bt-color-bg-inverse-surface: #F4F4F4;--bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);--bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);--bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);--bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);--bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);--bt-color-border-default: #333333;--bt-color-border-hover: #777777;--bt-color-border-subtle: rgba(255, 255, 255, 0.12);--bt-color-border-focus: #FFFFFF;--bt-color-border-disabled: #141414;--bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);--bt-color-accent-subtle: rgba(255, 255, 255, 0.08);--bt-color-accent-muted: rgba(255, 255, 255, 0.12);--bt-color-accent-light: #999999;--bt-color-accent-default: #FFFFFF;--bt-color-accent-strong: #FFFFFF;--bt-color-accent-on-surface: #121212;--bt-color-status-error-container: rgba(127, 29, 29, 0.35);--bt-color-status-success-container: rgba(6, 78, 59, 0.35);--bt-color-status-warning-container: rgba(120, 53, 15, 0.35);--bt-color-status-info-container: rgba(30, 58, 138, 0.35);--bt-color-status-error-on-container: #FCA5A5;--bt-color-status-success-on-container: #86EFAC;--bt-color-status-warning-on-container: #FCD34D;--bt-color-status-info-on-container: #93C5FD;--bt-color-status-error-on-surface: #F87171;--bt-color-status-success-on-surface: #4ADE80;--bt-color-status-warning-on-surface: #FBBF24;--bt-color-status-info-on-surface: #60A5FA;--bt-color-skeleton-base: #333333;--bt-color-skeleton-wave: #333333;--bt-color-skeleton-highlight: #666666}}:root{--bt-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.30);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.30)}[data-theme=dark]{--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);--bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);--bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45)}}:root{--bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)}[data-theme=dark]{--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);--bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);--bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);--bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45)}}@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: var(--bt-color-brand-primary);--bt-color-on-primary: var(--bt-color-brand-on-primary);--bt-color-accent: var(--bt-color-accent-default);--bt-color-accent-on-surface: var(--bt-color-accent-on-surface);--bt-color-background: var(--bt-color-bg-solid);--bt-color-background-dim: var(--bt-color-bg-solid-dim);--bt-color-background-overlay: var(--bt-color-bg-overlay);--bt-color-text-heading: var(--bt-color-text-heading);--bt-color-text-body: var(--bt-color-text-body);--bt-color-text-caption: var(--bt-color-text-caption);--bt-color-text-inverse: var(--bt-color-text-inverse);--bt-color-text-disabled: var(--bt-color-text-disabled);--bt-color-border: var(--bt-color-border-default);--bt-color-border-subtle: var(--bt-color-border-subtle);--bt-color-border-focus: var(--bt-color-border-focus);--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: var(--bt-color-border-hover);--bt-color-hover: var(--bt-color-state-hover-on-light);--bt-color-pressed: var(--bt-color-state-pressed-on-light);--bt-color-primary-hover: #333333;--bt-color-overlay: var(--bt-color-bg-overlay);--bt-color-success: var(--bt-color-status-success);--bt-color-error: var(--bt-color-status-error);--bt-color-warning: var(--bt-color-status-warning);--bt-color-info: var(--bt-color-status-info);--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-elevation-1: var(--bt-elevation-level1);--bt-elevation-2: var(--bt-elevation-level2);--bt-elevation-3: var(--bt-elevation-level3);--bt-elevation-4: var(--bt-elevation-level4);--bt-elevation-5: var(--bt-elevation-level5);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:var(--bt-color-hover)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 92%, #000)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-accent);background:var(--bt-color-background);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-accent);border-color:var(--bt-color-accent)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-accent-on-surface);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-accent);border-width:2px}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-accent);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border-light);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-toggle__thumb{width:12px;height:12px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base),width var(--bt-transition-base),height var(--bt-transition-base);transform:translateX(0)}.bt-toggle--on{background:var(--bt-color-accent)}.bt-toggle--on .bt-toggle__thumb{width:20px;height:20px;background:var(--bt-color-accent-on-surface);transform:translateX(16px)}.bt-toggle--md{width:48px;height:28px}.bt-toggle--md .bt-toggle__thumb{width:16px;height:16px}.bt-toggle--md.bt-toggle--on .bt-toggle__thumb{width:24px;height:24px;transform:translateX(20px)}.bt-toggle--disabled{cursor:not-allowed;background:var(--bt-color-border-light)}.bt-toggle--disabled .bt-toggle__thumb{background:#fff}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-2);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{position:relative;background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-3);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);padding-right:calc(var(--bt-spacing-lg) + 32px);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__close{position:absolute;top:var(--bt-spacing-md);right:var(--bt-spacing-md);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:rgba(0,0,0,0);color:var(--bt-color-text-tertiary);border-radius:var(--bt-radius-md);cursor:pointer;transition:background var(--bt-transition-fast),color var(--bt-transition-fast)}.bt-modal__close:hover{background:var(--bt-color-hover);color:var(--bt-color-text-primary)}.bt-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-elevation-4);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--elevation-1{box-shadow:var(--bt-elevation-1)}.bt-card--elevation-2{box-shadow:var(--bt-elevation-2)}.bt-card--elevation-3{box-shadow:var(--bt-elevation-3)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-accent);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-accent);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-3)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}