@bigtablet/design-system 3.12.0 → 3.13.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.
- package/README.md +2 -1
- package/dist/index.css +22 -6
- package/dist/index.d.ts +43 -19
- package/dist/index.js +52 -32
- package/dist/styles/a11y/_index.scss +45 -0
- package/dist/vanilla/bigtablet.min.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -139,7 +139,8 @@ showAlert({ title: "Delete?", showCancel: true, onConfirm: ... });
|
|
|
139
139
|
}
|
|
140
140
|
```
|
|
141
141
|
|
|
142
|
-
|
|
142
|
+
<!-- css-var-claim: 아래 한 줄이 React entry 의 변수 계열 전부를 주장한다. scripts/check-css-vars.sh 가 이 줄만 검사한다. -->
|
|
143
|
+
> The React entry's `style.css` only emits `--bt-color-*`, `--bt-elevation-*`, `--bt-focus-*`, `--bt-sidebar-*`, `--bt-bottom-nav-*`, `--bt-bottom-inset*`, `--bt-scrollbar-width`. Spacing, radius, and typography are **SCSS-only** on this entry - use `scss/token` for them (`--bt-spacing-*` / `--bt-radius-*` exist only in the [Vanilla bundle](./docs/VANILLA.md)).
|
|
143
144
|
|
|
144
145
|
`colors` · `spacing` · `typography` · `radius` · `elevation` · `motion` · `z-index` · `breakpoints` · `border-width` · `opacity` · `skeleton` · `icon` · `a11y` · `layout`<sup>SCSS only</sup>
|
|
145
146
|
|
package/dist/index.css
CHANGED
|
@@ -65,7 +65,11 @@
|
|
|
65
65
|
--bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
|
|
66
66
|
--bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
|
|
67
67
|
--bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
|
|
68
|
-
--bt-bottom-inset: 0px;
|
|
68
|
+
--bt-bottom-nav-inset: 0px;
|
|
69
|
+
--bt-bottom-inset-app: 0px;
|
|
70
|
+
}
|
|
71
|
+
body {
|
|
72
|
+
--bt-bottom-inset: calc( var(--bt-bottom-nav-inset, 0px) + var(--bt-bottom-inset-app, 0px) );
|
|
69
73
|
}
|
|
70
74
|
:root {
|
|
71
75
|
--bt-scrollbar-width: 0px;
|
|
@@ -640,7 +644,7 @@ select:-webkit-autofill:disabled {
|
|
|
640
644
|
--bt-bottom-nav-total-height: calc( var(--bt-bottom-nav-height) + var(--bt-bottom-nav-safe-area) );
|
|
641
645
|
}
|
|
642
646
|
body:has(.bottom_nav) {
|
|
643
|
-
--bt-bottom-inset: var(--bt-bottom-nav-total-height);
|
|
647
|
+
--bt-bottom-nav-inset: var(--bt-bottom-nav-total-height);
|
|
644
648
|
}
|
|
645
649
|
.bottom_nav {
|
|
646
650
|
position: fixed;
|
|
@@ -1346,7 +1350,8 @@ body:has(.bottom_nav) {
|
|
|
1346
1350
|
padding: 0;
|
|
1347
1351
|
margin: -1px;
|
|
1348
1352
|
overflow: hidden;
|
|
1349
|
-
clip: rect(0
|
|
1353
|
+
clip: rect(0 0 0 0);
|
|
1354
|
+
clip-path: inset(50%);
|
|
1350
1355
|
white-space: nowrap;
|
|
1351
1356
|
border: 0;
|
|
1352
1357
|
}
|
|
@@ -1452,6 +1457,8 @@ body:has(.bottom_nav) {
|
|
|
1452
1457
|
margin: 0;
|
|
1453
1458
|
overflow: visible;
|
|
1454
1459
|
clip: auto;
|
|
1460
|
+
clip-path: none;
|
|
1461
|
+
white-space: normal;
|
|
1455
1462
|
}
|
|
1456
1463
|
}
|
|
1457
1464
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -3122,10 +3129,13 @@ body:has(.bottom_nav) {
|
|
|
3122
3129
|
position: absolute;
|
|
3123
3130
|
width: 1px;
|
|
3124
3131
|
height: 1px;
|
|
3132
|
+
padding: 0;
|
|
3133
|
+
margin: -1px;
|
|
3125
3134
|
overflow: hidden;
|
|
3126
3135
|
clip: rect(0 0 0 0);
|
|
3127
3136
|
clip-path: inset(50%);
|
|
3128
3137
|
white-space: nowrap;
|
|
3138
|
+
border: 0;
|
|
3129
3139
|
}
|
|
3130
3140
|
.checkbox_state_layer {
|
|
3131
3141
|
display: inline-flex;
|
|
@@ -3262,7 +3272,8 @@ body:has(.bottom_nav) {
|
|
|
3262
3272
|
padding: 0;
|
|
3263
3273
|
margin: -1px;
|
|
3264
3274
|
overflow: hidden;
|
|
3265
|
-
clip: rect(0
|
|
3275
|
+
clip: rect(0 0 0 0);
|
|
3276
|
+
clip-path: inset(50%);
|
|
3266
3277
|
white-space: nowrap;
|
|
3267
3278
|
border: 0;
|
|
3268
3279
|
}
|
|
@@ -4323,7 +4334,8 @@ body:has(.bottom_nav) {
|
|
|
4323
4334
|
padding: 0;
|
|
4324
4335
|
margin: -1px;
|
|
4325
4336
|
overflow: hidden;
|
|
4326
|
-
clip: rect(0
|
|
4337
|
+
clip: rect(0 0 0 0);
|
|
4338
|
+
clip-path: inset(50%);
|
|
4327
4339
|
white-space: nowrap;
|
|
4328
4340
|
border: 0;
|
|
4329
4341
|
}
|
|
@@ -4627,7 +4639,8 @@ body:has(.bottom_nav) {
|
|
|
4627
4639
|
padding: 0;
|
|
4628
4640
|
margin: -1px;
|
|
4629
4641
|
overflow: hidden;
|
|
4630
|
-
clip: rect(0
|
|
4642
|
+
clip: rect(0 0 0 0);
|
|
4643
|
+
clip-path: inset(50%);
|
|
4631
4644
|
white-space: nowrap;
|
|
4632
4645
|
border: 0;
|
|
4633
4646
|
}
|
|
@@ -4775,10 +4788,13 @@ body:has(.bottom_nav) {
|
|
|
4775
4788
|
position: absolute;
|
|
4776
4789
|
width: 1px;
|
|
4777
4790
|
height: 1px;
|
|
4791
|
+
padding: 0;
|
|
4792
|
+
margin: -1px;
|
|
4778
4793
|
overflow: hidden;
|
|
4779
4794
|
clip: rect(0 0 0 0);
|
|
4780
4795
|
clip-path: inset(50%);
|
|
4781
4796
|
white-space: nowrap;
|
|
4797
|
+
border: 0;
|
|
4782
4798
|
}
|
|
4783
4799
|
.radio_state_layer {
|
|
4784
4800
|
display: inline-flex;
|
package/dist/index.d.ts
CHANGED
|
@@ -344,6 +344,8 @@ interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
344
344
|
items: BreadcrumbItem[];
|
|
345
345
|
/** 구분자 (기본값: ChevronRight 아이콘) */
|
|
346
346
|
separator?: React$1.ReactNode;
|
|
347
|
+
/** `<nav>` 랜드마크 이름 (기본값: "현재 위치"). 스크린리더의 리전 목록에 그대로 뜬다 */
|
|
348
|
+
navLabel?: string;
|
|
347
349
|
}
|
|
348
350
|
/**
|
|
349
351
|
* 페이지 위계 네비게이션. 마지막 아이템은 현재 페이지로 표시.
|
|
@@ -357,7 +359,7 @@ interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
357
359
|
* ]} />
|
|
358
360
|
* ```
|
|
359
361
|
*/
|
|
360
|
-
declare const Breadcrumb: ({ items, separator, className, ...props }: BreadcrumbProps) => React$1.JSX.Element;
|
|
362
|
+
declare const Breadcrumb: ({ items, separator, navLabel, className, ...props }: BreadcrumbProps) => React$1.JSX.Element;
|
|
361
363
|
|
|
362
364
|
interface MenuItem {
|
|
363
365
|
key: string;
|
|
@@ -1541,7 +1543,7 @@ declare const Skeleton: ({ variant, width, height, radius, className, style, ...
|
|
|
1541
1543
|
interface SpinnerProps {
|
|
1542
1544
|
/** 스피너 크기(px) (기본값: 24) */
|
|
1543
1545
|
size?: number;
|
|
1544
|
-
/** 스피너 접근성 레이블 (기본값: "
|
|
1546
|
+
/** 스피너 접근성 레이블 (기본값: "로딩 중") */
|
|
1545
1547
|
ariaLabel?: string;
|
|
1546
1548
|
}
|
|
1547
1549
|
/**
|
|
@@ -1558,8 +1560,10 @@ interface ToastProviderProps {
|
|
|
1558
1560
|
children: React$1.ReactNode;
|
|
1559
1561
|
/** 최대 동시 표시 토스트 수 (기본값: 5) */
|
|
1560
1562
|
maxCount?: number;
|
|
1561
|
-
/** 토스트 닫기 버튼의 aria-label (기본값: "
|
|
1563
|
+
/** 토스트 닫기 버튼의 aria-label (기본값: "닫기") */
|
|
1562
1564
|
closeAriaLabel?: string;
|
|
1565
|
+
/** 토스트 리전(`role="region"`)의 접근성 이름 (기본값: "알림"). 스크린리더의 리전 목록에 뜬다 */
|
|
1566
|
+
regionLabel?: string;
|
|
1563
1567
|
}
|
|
1564
1568
|
/**
|
|
1565
1569
|
* 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
|
|
@@ -1567,7 +1571,7 @@ interface ToastProviderProps {
|
|
|
1567
1571
|
* @param props Provider 속성
|
|
1568
1572
|
* @returns 렌더링된 Provider와 토스트 컨테이너
|
|
1569
1573
|
*/
|
|
1570
|
-
declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => React$1.JSX.Element;
|
|
1574
|
+
declare const ToastProvider: ({ children, maxCount, closeAriaLabel, regionLabel, }: ToastProviderProps) => React$1.JSX.Element;
|
|
1571
1575
|
|
|
1572
1576
|
/**
|
|
1573
1577
|
* 토스트 메시지를 표시하는 훅.
|
|
@@ -1596,7 +1600,7 @@ interface TopLoadingProps {
|
|
|
1596
1600
|
height?: number;
|
|
1597
1601
|
/** 표시 여부 */
|
|
1598
1602
|
isLoading?: boolean;
|
|
1599
|
-
/** 프로그레스 바의 접근성 레이블 (기본값: "
|
|
1603
|
+
/** 프로그레스 바의 접근성 레이블 (기본값: "페이지 로딩 중") */
|
|
1600
1604
|
ariaLabel?: string;
|
|
1601
1605
|
}
|
|
1602
1606
|
/**
|
|
@@ -1654,20 +1658,20 @@ interface DatePickerBaseProps {
|
|
|
1654
1658
|
* @deprecated `fullWidth` 사용 또는 CSS로 처리
|
|
1655
1659
|
*/
|
|
1656
1660
|
width?: number | string;
|
|
1657
|
-
/** 연도 select의 라벨/플레이스홀더 (기본값: "
|
|
1661
|
+
/** 연도 select의 라벨/플레이스홀더 (기본값: "년") */
|
|
1658
1662
|
yearLabel?: string;
|
|
1659
|
-
/** 월 select의 라벨/플레이스홀더 (기본값: "
|
|
1663
|
+
/** 월 select의 라벨/플레이스홀더 (기본값: "월") */
|
|
1660
1664
|
monthLabel?: string;
|
|
1661
|
-
/** 일 select의 라벨/플레이스홀더 (기본값: "
|
|
1665
|
+
/** 일 select의 라벨/플레이스홀더 (기본값: "일") */
|
|
1662
1666
|
dayLabel?: string;
|
|
1663
1667
|
/**
|
|
1664
1668
|
* minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
|
|
1665
|
-
* `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "
|
|
1669
|
+
* `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "최소 날짜: {date}")
|
|
1666
1670
|
*/
|
|
1667
1671
|
minDateSrFormat?: string;
|
|
1668
1672
|
/**
|
|
1669
1673
|
* selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
|
|
1670
|
-
* (기본값: "
|
|
1674
|
+
* (기본값: "오늘까지 선택 가능")
|
|
1671
1675
|
*/
|
|
1672
1676
|
selectableRangeUntilTodaySrText?: string;
|
|
1673
1677
|
}
|
|
@@ -1711,7 +1715,7 @@ interface DropdownCommonProps {
|
|
|
1711
1715
|
id?: string;
|
|
1712
1716
|
/** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
|
|
1713
1717
|
label?: string;
|
|
1714
|
-
/** 선택 전 표시할 플레이스홀더 (기본값: "
|
|
1718
|
+
/** 선택 전 표시할 플레이스홀더 (기본값: "선택…") */
|
|
1715
1719
|
placeholder?: string;
|
|
1716
1720
|
/** 표시할 옵션 목록 */
|
|
1717
1721
|
options: DropdownOption[];
|
|
@@ -1786,7 +1790,7 @@ declare const Dropdown: (props: DropdownProps) => React$1.JSX.Element;
|
|
|
1786
1790
|
|
|
1787
1791
|
type FileInputVariant = "button" | "preview";
|
|
1788
1792
|
interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
1789
|
-
/** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "
|
|
1793
|
+
/** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "파일 선택") */
|
|
1790
1794
|
label?: string;
|
|
1791
1795
|
/** 파일 선택 시 호출되는 콜백 */
|
|
1792
1796
|
onFiles?: (files: FileList | null) => void;
|
|
@@ -2073,13 +2077,15 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
2073
2077
|
* 켜면 `type` 을 토글이 직접 관리한다 - 숨김 상태는 넘긴 `type`(보통 `"password"`), 표시 상태는 `"text"`.
|
|
2074
2078
|
*/
|
|
2075
2079
|
showPasswordToggle?: boolean;
|
|
2076
|
-
/** 토글 버튼의 `aria-label
|
|
2080
|
+
/** 토글 버튼의 `aria-label` (기본값: "비밀번호 표시" / "비밀번호 숨기기"). 다국어 앱은 주입할 것 */
|
|
2077
2081
|
passwordToggleLabels?: {
|
|
2078
2082
|
show: string;
|
|
2079
2083
|
hide: string;
|
|
2080
2084
|
};
|
|
2081
2085
|
/** 값이 있을 때 오른쪽에 지우기(X) 버튼 표시 여부 */
|
|
2082
2086
|
clearable?: boolean;
|
|
2087
|
+
/** 지우기(X) 버튼의 `aria-label` (기본값: "지우기") */
|
|
2088
|
+
clearLabel?: string;
|
|
2083
2089
|
/** 컨테이너 전체 너비 차지 여부 */
|
|
2084
2090
|
fullWidth?: boolean;
|
|
2085
2091
|
/** 값 변경 콜백 (canonical). 호출 시점은 `imeStrategy` 에 따름 (기본: 조합 완료 후) */
|
|
@@ -2108,7 +2114,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
2108
2114
|
* @returns 렌더링된 텍스트 필드 UI
|
|
2109
2115
|
*/
|
|
2110
2116
|
declare const TextField: {
|
|
2111
|
-
({ id, label, showLabel, supportingText, error, success, identifier, leadingIcon, trailingIcon, leadingAction, trailingAction, showPasswordToggle, passwordToggleLabels, clearable, type, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
|
|
2117
|
+
({ id, label, showLabel, supportingText, error, success, identifier, leadingIcon, trailingIcon, leadingAction, trailingAction, showPasswordToggle, passwordToggleLabels, clearable, clearLabel, type, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
|
|
2112
2118
|
displayName: string;
|
|
2113
2119
|
};
|
|
2114
2120
|
|
|
@@ -2318,10 +2324,12 @@ interface PaginationBaseProps {
|
|
|
2318
2324
|
page: number;
|
|
2319
2325
|
/** 전체 페이지 수 */
|
|
2320
2326
|
totalPages: number;
|
|
2321
|
-
/** 이전 페이지 버튼 aria-label (기본값: "
|
|
2327
|
+
/** 이전 페이지 버튼 aria-label (기본값: "이전 페이지") */
|
|
2322
2328
|
prevLabel?: string;
|
|
2323
|
-
/** 다음 페이지 버튼 aria-label (기본값: "
|
|
2329
|
+
/** 다음 페이지 버튼 aria-label (기본값: "다음 페이지") */
|
|
2324
2330
|
nextLabel?: string;
|
|
2331
|
+
/** `<nav>` 랜드마크 이름 (기본값: "페이지 이동"). 스크린리더의 리전 목록에 그대로 뜬다 */
|
|
2332
|
+
navLabel?: string;
|
|
2325
2333
|
}
|
|
2326
2334
|
type PaginationCallbacks = {
|
|
2327
2335
|
onPageChange: (page: number) => void;
|
|
@@ -2337,7 +2345,7 @@ type PaginationProps = PaginationBaseProps & PaginationCallbacks;
|
|
|
2337
2345
|
* @param props 페이지네이션 속성
|
|
2338
2346
|
* @returns 렌더링된 페이지네이션 UI
|
|
2339
2347
|
*/
|
|
2340
|
-
declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, }: PaginationProps) => React$1.JSX.Element;
|
|
2348
|
+
declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, navLabel, }: PaginationProps) => React$1.JSX.Element;
|
|
2341
2349
|
|
|
2342
2350
|
/** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
|
|
2343
2351
|
type DrawerPlacement = "left" | "right" | "bottom";
|
|
@@ -2356,6 +2364,14 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
|
|
|
2356
2364
|
footer?: React$1.ReactNode;
|
|
2357
2365
|
/** 오버레이 클릭 시 닫기 여부 (기본값: true) */
|
|
2358
2366
|
closeOnOverlay?: boolean;
|
|
2367
|
+
/**
|
|
2368
|
+
* Escape 와 오버레이 클릭을 한 축으로 묶는다. 사용자에게는 둘 다 "실수로 닫기" 축이라
|
|
2369
|
+
* 따로 다루면 한쪽만 막는 실수가 나온다. `false` 면 두 경로 모두 닫지 않는다.
|
|
2370
|
+
*
|
|
2371
|
+
* 주면 `closeOnOverlay` 를 이긴다. 안 주면 기존 동작 그대로다 - 오버레이는
|
|
2372
|
+
* `closeOnOverlay`(기본 `true`), Escape 는 항상 켜짐.
|
|
2373
|
+
*/
|
|
2374
|
+
dismissible?: boolean;
|
|
2359
2375
|
/** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
|
|
2360
2376
|
showCloseIcon?: boolean;
|
|
2361
2377
|
/** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
|
|
@@ -2379,7 +2395,7 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
|
|
|
2379
2395
|
* @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
|
|
2380
2396
|
*/
|
|
2381
2397
|
declare const Drawer: {
|
|
2382
|
-
({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
|
|
2398
|
+
({ open, onClose, placement, size, title, footer, closeOnOverlay, dismissible, showCloseIcon, closeLabel, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
|
|
2383
2399
|
displayName: string;
|
|
2384
2400
|
};
|
|
2385
2401
|
|
|
@@ -2391,6 +2407,14 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
|
|
|
2391
2407
|
onClose?: () => void;
|
|
2392
2408
|
/** 오버레이 클릭 시 닫기 여부 (기본값: true) */
|
|
2393
2409
|
closeOnOverlay?: boolean;
|
|
2410
|
+
/**
|
|
2411
|
+
* Escape 와 오버레이 클릭을 한 축으로 묶는다. 사용자에게는 둘 다 "실수로 닫기" 축이라
|
|
2412
|
+
* 따로 다루면 한쪽만 막는 실수가 나온다. `false` 면 두 경로 모두 닫지 않는다.
|
|
2413
|
+
*
|
|
2414
|
+
* 주면 `closeOnOverlay` 를 이긴다. 안 주면 기존 동작 그대로다 - 오버레이는
|
|
2415
|
+
* `closeOnOverlay`(기본 `true`), Escape 는 항상 켜짐.
|
|
2416
|
+
*/
|
|
2417
|
+
dismissible?: boolean;
|
|
2394
2418
|
/** 모달 패널 너비 (기본값: 480) */
|
|
2395
2419
|
width?: number | string;
|
|
2396
2420
|
/** 모달 제목 (h2, heading_large_bold) */
|
|
@@ -2422,7 +2446,7 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
|
|
|
2422
2446
|
* @param props 모달 속성
|
|
2423
2447
|
* @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
|
|
2424
2448
|
*/
|
|
2425
|
-
declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, onExited, ...props }: ModalProps) => React$1.ReactPortal | null;
|
|
2449
|
+
declare const Modal: ({ open, onClose, closeOnOverlay, dismissible, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, onExited, ...props }: ModalProps) => React$1.ReactPortal | null;
|
|
2426
2450
|
|
|
2427
2451
|
type ThemeMode = "light" | "dark" | "system";
|
|
2428
2452
|
type ResolvedTheme = "light" | "dark";
|
package/dist/index.js
CHANGED
|
@@ -682,11 +682,12 @@ var BottomNavSpacer = ({ className, ...props }) => {
|
|
|
682
682
|
var Breadcrumb = ({
|
|
683
683
|
items,
|
|
684
684
|
separator,
|
|
685
|
+
navLabel = "\uD604\uC7AC \uC704\uCE58",
|
|
685
686
|
className,
|
|
686
687
|
...props
|
|
687
688
|
}) => {
|
|
688
689
|
const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs, "aria-hidden": "true" });
|
|
689
|
-
return /* @__PURE__ */ jsx("nav", { "aria-label":
|
|
690
|
+
return /* @__PURE__ */ jsx("nav", { "aria-label": navLabel, className: cn("breadcrumb", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb_list", children: items.map((item, idx) => {
|
|
690
691
|
const isLast = idx === items.length - 1;
|
|
691
692
|
return (
|
|
692
693
|
// biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items have stable order
|
|
@@ -2911,7 +2912,7 @@ var LinearProgress = ({
|
|
|
2911
2912
|
}
|
|
2912
2913
|
);
|
|
2913
2914
|
};
|
|
2914
|
-
var Spinner = ({ size = 24, ariaLabel = "
|
|
2915
|
+
var Spinner = ({ size = 24, ariaLabel = "\uB85C\uB529 \uC911" }) => {
|
|
2915
2916
|
return /* @__PURE__ */ jsx(
|
|
2916
2917
|
"span",
|
|
2917
2918
|
{
|
|
@@ -2989,7 +2990,8 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
|
|
|
2989
2990
|
var ToastProvider = ({
|
|
2990
2991
|
children,
|
|
2991
2992
|
maxCount = 5,
|
|
2992
|
-
closeAriaLabel = "
|
|
2993
|
+
closeAriaLabel = "\uB2EB\uAE30",
|
|
2994
|
+
regionLabel = "\uC54C\uB9BC"
|
|
2993
2995
|
}) => {
|
|
2994
2996
|
const [toasts, setToasts] = React16.useState([]);
|
|
2995
2997
|
const isMounted = useIsMounted();
|
|
@@ -3015,7 +3017,7 @@ var ToastProvider = ({
|
|
|
3015
3017
|
role: "region",
|
|
3016
3018
|
"aria-live": "polite",
|
|
3017
3019
|
"aria-atomic": "false",
|
|
3018
|
-
"aria-label":
|
|
3020
|
+
"aria-label": regionLabel,
|
|
3019
3021
|
children: toasts.map((item) => /* @__PURE__ */ jsx(
|
|
3020
3022
|
ToastItemComponent,
|
|
3021
3023
|
{
|
|
@@ -3056,7 +3058,7 @@ var TopLoading = ({
|
|
|
3056
3058
|
color,
|
|
3057
3059
|
height = 3,
|
|
3058
3060
|
isLoading = true,
|
|
3059
|
-
ariaLabel = "
|
|
3061
|
+
ariaLabel = "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911"
|
|
3060
3062
|
}) => {
|
|
3061
3063
|
if (!isLoading) return null;
|
|
3062
3064
|
const isIndeterminate = progress === void 0;
|
|
@@ -3088,7 +3090,7 @@ var Dropdown = (props) => {
|
|
|
3088
3090
|
const {
|
|
3089
3091
|
id,
|
|
3090
3092
|
label,
|
|
3091
|
-
placeholder = "
|
|
3093
|
+
placeholder = "\uC120\uD0DD\u2026",
|
|
3092
3094
|
options,
|
|
3093
3095
|
disabled,
|
|
3094
3096
|
size = "md",
|
|
@@ -3437,11 +3439,11 @@ var DatePicker = ({
|
|
|
3437
3439
|
disabled,
|
|
3438
3440
|
fullWidth = true,
|
|
3439
3441
|
width,
|
|
3440
|
-
yearLabel = "
|
|
3441
|
-
monthLabel = "
|
|
3442
|
-
dayLabel = "
|
|
3443
|
-
minDateSrFormat = "
|
|
3444
|
-
selectableRangeUntilTodaySrText = "
|
|
3442
|
+
yearLabel = "\uB144",
|
|
3443
|
+
monthLabel = "\uC6D4",
|
|
3444
|
+
dayLabel = "\uC77C",
|
|
3445
|
+
minDateSrFormat = "\uCD5C\uC18C \uB0A0\uC9DC: {date}",
|
|
3446
|
+
selectableRangeUntilTodaySrText = "\uC624\uB298\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5"
|
|
3445
3447
|
}) => {
|
|
3446
3448
|
const groupId = React16.useId();
|
|
3447
3449
|
const constraintId = React16.useId();
|
|
@@ -3620,7 +3622,7 @@ var DatePicker = ({
|
|
|
3620
3622
|
] });
|
|
3621
3623
|
};
|
|
3622
3624
|
var FileInput = ({
|
|
3623
|
-
label = "
|
|
3625
|
+
label = "\uD30C\uC77C \uC120\uD0DD",
|
|
3624
3626
|
onFiles,
|
|
3625
3627
|
supportingText,
|
|
3626
3628
|
preview = false,
|
|
@@ -4451,7 +4453,7 @@ var Textarea = ({
|
|
|
4451
4453
|
};
|
|
4452
4454
|
Textarea.displayName = "Textarea";
|
|
4453
4455
|
var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
|
|
4454
|
-
var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "
|
|
4456
|
+
var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "\uBE44\uBC00\uBC88\uD638 \uD45C\uC2DC", hide: "\uBE44\uBC00\uBC88\uD638 \uC228\uAE30\uAE30" };
|
|
4455
4457
|
var TextField = ({
|
|
4456
4458
|
id,
|
|
4457
4459
|
label,
|
|
@@ -4467,6 +4469,7 @@ var TextField = ({
|
|
|
4467
4469
|
showPasswordToggle,
|
|
4468
4470
|
passwordToggleLabels,
|
|
4469
4471
|
clearable,
|
|
4472
|
+
clearLabel = "\uC9C0\uC6B0\uAE30",
|
|
4470
4473
|
type,
|
|
4471
4474
|
fullWidth,
|
|
4472
4475
|
size = "md",
|
|
@@ -4546,7 +4549,7 @@ var TextField = ({
|
|
|
4546
4549
|
type: "button",
|
|
4547
4550
|
className: "text_field_clear",
|
|
4548
4551
|
onClick: handleClear,
|
|
4549
|
-
"aria-label":
|
|
4552
|
+
"aria-label": clearLabel,
|
|
4550
4553
|
disabled: props.disabled,
|
|
4551
4554
|
children: /* @__PURE__ */ jsx(ClearIcon, {})
|
|
4552
4555
|
}
|
|
@@ -4700,14 +4703,15 @@ var Pagination = ({
|
|
|
4700
4703
|
totalPages,
|
|
4701
4704
|
onPageChange,
|
|
4702
4705
|
onChange,
|
|
4703
|
-
prevLabel = "
|
|
4704
|
-
nextLabel = "
|
|
4706
|
+
prevLabel = "\uC774\uC804 \uD398\uC774\uC9C0",
|
|
4707
|
+
nextLabel = "\uB2E4\uC74C \uD398\uC774\uC9C0",
|
|
4708
|
+
navLabel = "\uD398\uC774\uC9C0 \uC774\uB3D9"
|
|
4705
4709
|
}) => {
|
|
4706
4710
|
const emit = onPageChange ?? onChange;
|
|
4707
4711
|
const prevDisabled = page <= 1;
|
|
4708
4712
|
const nextDisabled = page >= totalPages;
|
|
4709
4713
|
const items = React16.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
|
|
4710
|
-
return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label":
|
|
4714
|
+
return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": navLabel, children: [
|
|
4711
4715
|
/* @__PURE__ */ jsx(
|
|
4712
4716
|
"button",
|
|
4713
4717
|
{
|
|
@@ -4764,6 +4768,7 @@ var Drawer = ({
|
|
|
4764
4768
|
title,
|
|
4765
4769
|
footer,
|
|
4766
4770
|
closeOnOverlay = true,
|
|
4771
|
+
dismissible,
|
|
4767
4772
|
showCloseIcon = true,
|
|
4768
4773
|
closeLabel = "\uB2EB\uAE30",
|
|
4769
4774
|
ariaLabel,
|
|
@@ -4772,6 +4777,11 @@ var Drawer = ({
|
|
|
4772
4777
|
className,
|
|
4773
4778
|
...props
|
|
4774
4779
|
}) => {
|
|
4780
|
+
const lastContentRef = React16.useRef({ children, title, footer });
|
|
4781
|
+
if (open) lastContentRef.current = { children, title, footer };
|
|
4782
|
+
const content = open ? { children, title, footer } : lastContentRef.current;
|
|
4783
|
+
const overlayDismissible = dismissible ?? closeOnOverlay;
|
|
4784
|
+
const escapeDismissible = dismissible ?? true;
|
|
4775
4785
|
const panelRef = React16.useRef(null);
|
|
4776
4786
|
const pressedOverlayRef = React16.useRef(false);
|
|
4777
4787
|
const titleId = React16.useId();
|
|
@@ -4779,7 +4789,9 @@ var Drawer = ({
|
|
|
4779
4789
|
const reduced = useReducedMotion();
|
|
4780
4790
|
const isMounted = useIsMounted();
|
|
4781
4791
|
useFocusTrap(panelRef, open && isMounted);
|
|
4782
|
-
useOverlayEscape(open && isMounted, () =>
|
|
4792
|
+
useOverlayEscape(open && isMounted, () => {
|
|
4793
|
+
if (escapeDismissible) onClose?.();
|
|
4794
|
+
});
|
|
4783
4795
|
if (open && !shouldRender) setShouldRender(true);
|
|
4784
4796
|
const overlayStyle = useSpringPresence({
|
|
4785
4797
|
visible: open,
|
|
@@ -4804,7 +4816,7 @@ var Drawer = ({
|
|
|
4804
4816
|
}, [open]);
|
|
4805
4817
|
if (!open && !shouldRender) return null;
|
|
4806
4818
|
if (typeof document === "undefined" || !isMounted) return null;
|
|
4807
|
-
const hasTitle = !!title;
|
|
4819
|
+
const hasTitle = !!content.title;
|
|
4808
4820
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
4809
4821
|
const panelSizeStyle = placement === "bottom" ? { height: sizeValue } : { width: sizeValue };
|
|
4810
4822
|
return createPortal(
|
|
@@ -4821,7 +4833,7 @@ var Drawer = ({
|
|
|
4821
4833
|
pressedOverlayRef.current = e.target === e.currentTarget;
|
|
4822
4834
|
},
|
|
4823
4835
|
onClick: (e) => {
|
|
4824
|
-
if (!
|
|
4836
|
+
if (!overlayDismissible) return;
|
|
4825
4837
|
if (e.target !== e.currentTarget) return;
|
|
4826
4838
|
if (!pressedOverlayRef.current) return;
|
|
4827
4839
|
onClose?.();
|
|
@@ -4847,12 +4859,12 @@ var Drawer = ({
|
|
|
4847
4859
|
children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
|
|
4848
4860
|
}
|
|
4849
4861
|
),
|
|
4850
|
-
title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: title }) }),
|
|
4851
|
-
children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4862
|
+
content.title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: content.title }) }),
|
|
4863
|
+
content.children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4852
4864
|
// `scrollable-region-focusable`). 다만 초기 포커스 대상에서는 제외한다 - 안쪽에
|
|
4853
4865
|
// 첫 입력이 있는데 빈 wrapper 에 포커스가 놓이면 열자마자 어디에 있는지 알 수 없다.
|
|
4854
|
-
/* @__PURE__ */ jsx("div", { className: "drawer_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children }),
|
|
4855
|
-
footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: footer })
|
|
4866
|
+
/* @__PURE__ */ jsx("div", { className: "drawer_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children: content.children }),
|
|
4867
|
+
content.footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: content.footer })
|
|
4856
4868
|
]
|
|
4857
4869
|
}
|
|
4858
4870
|
)
|
|
@@ -4866,6 +4878,7 @@ var Modal = ({
|
|
|
4866
4878
|
open,
|
|
4867
4879
|
onClose,
|
|
4868
4880
|
closeOnOverlay = true,
|
|
4881
|
+
dismissible,
|
|
4869
4882
|
width = 480,
|
|
4870
4883
|
title,
|
|
4871
4884
|
description,
|
|
@@ -4879,13 +4892,20 @@ var Modal = ({
|
|
|
4879
4892
|
onExited,
|
|
4880
4893
|
...props
|
|
4881
4894
|
}) => {
|
|
4895
|
+
const lastContentRef = React16.useRef({ children, title, description, footer });
|
|
4896
|
+
if (open) lastContentRef.current = { children, title, description, footer };
|
|
4897
|
+
const content = open ? { children, title, description, footer } : lastContentRef.current;
|
|
4898
|
+
const overlayDismissible = dismissible ?? closeOnOverlay;
|
|
4899
|
+
const escapeDismissible = dismissible ?? true;
|
|
4882
4900
|
const panelRef = React16.useRef(null);
|
|
4883
4901
|
const pressedOverlayRef = React16.useRef(false);
|
|
4884
4902
|
const titleId = React16.useId();
|
|
4885
4903
|
const [shouldRender, setShouldRender] = React16.useState(open);
|
|
4886
4904
|
const isMounted = useIsMounted();
|
|
4887
4905
|
useFocusTrap(panelRef, open && isMounted);
|
|
4888
|
-
useOverlayEscape(open && isMounted, () =>
|
|
4906
|
+
useOverlayEscape(open && isMounted, () => {
|
|
4907
|
+
if (escapeDismissible) onClose?.();
|
|
4908
|
+
});
|
|
4889
4909
|
if (open && !shouldRender) setShouldRender(true);
|
|
4890
4910
|
const reduced = useReducedMotion();
|
|
4891
4911
|
const overlayStyle = useSpring({
|
|
@@ -4911,7 +4931,7 @@ var Modal = ({
|
|
|
4911
4931
|
}, [open]);
|
|
4912
4932
|
if (!open && !shouldRender) return null;
|
|
4913
4933
|
if (typeof document === "undefined" || !isMounted) return null;
|
|
4914
|
-
const hasTitle = !!title;
|
|
4934
|
+
const hasTitle = !!content.title;
|
|
4915
4935
|
return createPortal(
|
|
4916
4936
|
/* @__PURE__ */ jsx(
|
|
4917
4937
|
animated.div,
|
|
@@ -4926,7 +4946,7 @@ var Modal = ({
|
|
|
4926
4946
|
pressedOverlayRef.current = e.target === e.currentTarget;
|
|
4927
4947
|
},
|
|
4928
4948
|
onClick: (e) => {
|
|
4929
|
-
if (!
|
|
4949
|
+
if (!overlayDismissible) return;
|
|
4930
4950
|
if (e.target !== e.currentTarget) return;
|
|
4931
4951
|
if (!pressedOverlayRef.current) return;
|
|
4932
4952
|
onClose?.();
|
|
@@ -4943,16 +4963,16 @@ var Modal = ({
|
|
|
4943
4963
|
},
|
|
4944
4964
|
children: [
|
|
4945
4965
|
showCloseIcon && onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "modal_close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" }) }),
|
|
4946
|
-
title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: title }),
|
|
4947
|
-
description && /* @__PURE__ */ jsx("div", { className: "modal_description", children: description }),
|
|
4948
|
-
children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4966
|
+
content.title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: content.title }),
|
|
4967
|
+
content.description && /* @__PURE__ */ jsx("div", { className: "modal_description", children: content.description }),
|
|
4968
|
+
content.children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4949
4969
|
// `scrollable-region-focusable`). 넘치는지 여부를 측정해 조건부로 주는 방법도 있지만
|
|
4950
4970
|
// ResizeObserver 를 들일 만큼의 이득이 없고, 포커스 트랩 안에서 탭 정지 하나가
|
|
4951
4971
|
// 늘어나는 정도의 비용이다.
|
|
4952
4972
|
// 다만 초기 포커스 대상에서는 제외한다 - 안쪽에 첫 입력이 있는데 빈 wrapper 에
|
|
4953
4973
|
// 포커스가 놓이면 열자마자 어디에 있는지 알 수 없다.
|
|
4954
|
-
/* @__PURE__ */ jsx("div", { className: "modal_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children }),
|
|
4955
|
-
footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: footer })
|
|
4974
|
+
/* @__PURE__ */ jsx("div", { className: "modal_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children: content.children }),
|
|
4975
|
+
content.footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: content.footer })
|
|
4956
4976
|
]
|
|
4957
4977
|
}
|
|
4958
4978
|
)
|
|
@@ -46,3 +46,48 @@ $tap_target_spacious: 56px; // 강조 CTA, 풀스크린 액션
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
// ── Visually hidden ───────────────────────────────────────────────────────
|
|
51
|
+
// 시각적으로 숨기되 보조기기에는 남긴다. 라이브 리전, 아이콘 버튼의 텍스트 라벨,
|
|
52
|
+
// 스크린리더 전용 표 헤더 등. `display: none` · `visibility: hidden` 은 접근성 트리에서도
|
|
53
|
+
// 빠지므로 대신 쓸 수 없다.
|
|
54
|
+
//
|
|
55
|
+
// `clip: rect()` 는 CSS Masking 에서 deprecated 지만 구형 폴백으로 함께 둔다. `clip-path`
|
|
56
|
+
// 단독은 일부 조합에서 요소가 잘리지 않는다.
|
|
57
|
+
@mixin visually_hidden {
|
|
58
|
+
position: absolute;
|
|
59
|
+
width: 1px;
|
|
60
|
+
height: 1px;
|
|
61
|
+
padding: 0;
|
|
62
|
+
margin: -1px;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
clip: rect(0 0 0 0);
|
|
65
|
+
clip-path: inset(50%);
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
border: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// 조건부로 숨기는 자리(브레이크포인트·상태에 따라 다시 보여야 하는 라벨 등)에서 위를 되돌린다.
|
|
71
|
+
// 짝을 손으로 쓰면 한쪽에 속성을 추가할 때 다른 쪽을 빠뜨린다 - `clip-path` 를 되돌리지 않아
|
|
72
|
+
// 라벨이 계속 잘려 있던 것이 실제로 있었던 실수다.
|
|
73
|
+
@mixin visually_hidden_reset {
|
|
74
|
+
position: static;
|
|
75
|
+
width: auto;
|
|
76
|
+
height: auto;
|
|
77
|
+
padding: 0;
|
|
78
|
+
margin: 0;
|
|
79
|
+
overflow: visible;
|
|
80
|
+
clip: auto;
|
|
81
|
+
clip-path: none;
|
|
82
|
+
white-space: normal;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// 포커스를 받으면 드러난다. 스킵 링크("본문으로 건너뛰기") 패턴 - 평소엔 안 보이지만
|
|
86
|
+
// 키보드 사용자가 Tab 을 누르면 나타나야 한다.
|
|
87
|
+
@mixin visually_hidden_focusable {
|
|
88
|
+
@include visually_hidden;
|
|
89
|
+
|
|
90
|
+
&:focus-visible {
|
|
91
|
+
@include visually_hidden_reset;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
*
|
|
5
5
|
* @license Bigtablet Inc. Open Source License - see LICENSE at the repo root
|
|
6
6
|
* (https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)
|
|
7
|
-
*/@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}: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: #6F6F6F;--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;--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);--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);--bt-bottom-inset: 0px}:root{--bt-scrollbar-width: 0px}[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: #808080;--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;--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);--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]){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: #808080;--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;--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);--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)}}: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-primary-container: var(--bt-color-brand-primary-container);--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-border: var(--bt-color-border-default);--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-hover-on-dark: var(--bt-color-state-hover-on-dark);--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-none: 0px;--bt-radius-xs: 4px;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-xl: 16px;--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;overflow-wrap:anywhere;word-break:keep-all;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-full);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--xl{padding:var(--bt-spacing-xl) var(--bt-spacing-3xl);font-size:var(--bt-font-size-lg)}.bt-button--filled{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-button--filled:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-accent) 88%, var(--bt-color-accent-on-surface))}.bt-button--filled:active:not(:disabled){transform:scale(0.98)}.bt-button--tonal{background:var(--bt-color-primary-container);color:var(--bt-color-text-primary)}.bt-button--tonal:hover:not(:disabled){background-image:linear-gradient(var(--bt-color-hover), var(--bt-color-hover))}.bt-button--tonal:active:not(:disabled){background-image:linear-gradient(var(--bt-color-pressed), var(--bt-color-pressed));transform:scale(0.98)}.bt-button--outline{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--outline:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--outline:active:not(:disabled){transform:scale(0.98)}.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--text:hover:not(:disabled){background:var(--bt-color-hover)}.bt-button--text:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-on-primary)}.bt-button--danger:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 88%, #000)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--radius-none{border-radius:var(--bt-radius-none)}.bt-button--radius-xs{border-radius:var(--bt-radius-xs)}.bt-button--radius-sm{border-radius:var(--bt-radius-sm)}.bt-button--radius-md{border-radius:var(--bt-radius-md)}.bt-button--radius-lg{border-radius:var(--bt-radius-lg)}.bt-button--radius-xl{border-radius:var(--bt-radius-xl)}.bt-button--radius-full{border-radius:var(--bt-radius-full)}.bt-button--full-width{width:100%}.bt-button--danger.bt-button--outline{background:rgba(0,0,0,0);border-color:var(--bt-color-error);color:var(--bt-color-error)}.bt-button--danger.bt-button--outline:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.bt-button--danger.bt-button--tonal{background:color-mix(in srgb, var(--bt-color-error) 12%, transparent);color:var(--bt-color-error)}.bt-button--danger.bt-button--tonal:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 18%, transparent)}.bt-button--danger.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-error)}.bt-button--danger.bt-button--text:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.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__input--identifier{font-feature-settings:"cv05" 1,"cv08" 1;font-variant-numeric:slashed-zero}.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::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:32px}@media(max-width: 599px){.bt-toggle::after{height:40px}}.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--sm{width:40px;height:24px}.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-dropdown{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-dropdown__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-dropdown__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-dropdown__control:disabled,.bt-dropdown__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-dropdown__control--outline{border:1px solid var(--bt-color-border)}.bt-dropdown__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-dropdown__control--outline.is-open{border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-dropdown__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-dropdown__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-dropdown__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-dropdown__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-dropdown__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-dropdown__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-dropdown__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-dropdown__icon.is-open{transform:rotate(180deg)}.bt-dropdown__list{display:none;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-dropdown__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-dropdown__list:has(>.bt-dropdown__options){max-height:none;overflow:hidden;padding:0}.bt-dropdown__search{display:flex;align-items:center;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-md);border-bottom:1px solid var(--bt-color-border)}.bt-dropdown__search-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bt-color-text-secondary)}.bt-dropdown__search-input{flex:1 1 auto;min-width:0;border:none;outline:none;background:rgba(0,0,0,0);color:var(--bt-color-text-primary);border-radius:var(--bt-radius-sm);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal);transition:box-shadow var(--bt-transition-fast)}.bt-dropdown__search-input::placeholder{color:var(--bt-color-text-tertiary)}.bt-dropdown__search-input:focus-visible{box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__options{max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;margin:0;list-style:none}.bt-dropdown__empty{padding:var(--bt-spacing-md) var(--bt-spacing-lg);color:var(--bt-color-text-tertiary);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal);text-align:center;list-style:none}.bt-dropdown__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;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-dropdown__option[hidden]{display:none}.bt-dropdown__option:hover,.bt-dropdown__option.is-active{background:var(--bt-color-background-secondary)}.bt-dropdown__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-dropdown__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-dropdown__option-content{flex:1 1 auto;min-width:0}.bt-dropdown__option-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bt-spacing-lg);color:var(--bt-color-accent)}.bt-dropdown__option-check svg{opacity:0;transition:opacity var(--bt-transition-fast)}.bt-dropdown__option.is-selected .bt-dropdown__option-check svg{opacity:1}.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);box-shadow:var(--bt-elevation-1);padding:var(--bt-spacing-lg);transition:transform var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-none{box-shadow:none}.bt-card--shadow-sm{box-shadow:var(--bt-elevation-1)}.bt-card--shadow-md{box-shadow:var(--bt-elevation-2)}.bt-card--shadow-lg{box-shadow:var(--bt-elevation-3)}.bt-card--p-none{padding:0}.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--accent{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__title{color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__footer{border-top-color:var(--bt-color-hover-on-dark)}.bt-card--outlined{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);box-shadow:none}.bt-card--glass{background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,.08);color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__title{color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__footer{border-top-color:var(--bt-color-hover-on-dark)}[data-theme=dark] .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}@media(prefers-color-scheme: dark){:root:not([data-theme]) .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}}.bt-card--interactive{cursor:pointer}.bt-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--bt-elevation-2)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-top:0;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}.bt-card__body{width:100%}.bt-card__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-lg);padding-top:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border)}.bt-card__footer--start{justify-content:flex-start}.bt-card__footer--between{justify-content:space-between}.bt-card__footer--end{justify-content:flex-end}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;width:var(--bt-spinner-size, 24px);height:var(--bt-spinner-size, 24px);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-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);overflow-wrap:anywhere;word-break:keep-all;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}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background) inset;box-shadow:0 0 0 1000px var(--bt-color-background) inset;-webkit-text-fill-color:var(--bt-color-text-primary);caret-color:var(--bt-color-text-primary)}.bt-text-field__input--filled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset}.bt-text-field__input--filled:-webkit-autofill:focus-visible{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background) inset;box-shadow:0 0 0 1000px var(--bt-color-background) inset}input:-webkit-autofill:disabled,textarea:-webkit-autofill:disabled,select:-webkit-autofill:disabled{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;-webkit-text-fill-color:var(--bt-color-text-tertiary)}@media(prefers-reduced-motion: reduce){:root{--bt-transition-fast: 0s;--bt-transition-base: 0s;--bt-transition-slow: 0s}.bt-alert__overlay,.bt-alert__modal{animation:none}.bt-card--interactive:hover{transform:none}.bt-spinner{animation-duration:2.4s}}
|
|
7
|
+
*/@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}: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: #6F6F6F;--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;--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);--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);--bt-bottom-nav-inset: 0px;--bt-bottom-inset-app: 0px}body{--bt-bottom-inset: calc( var(--bt-bottom-nav-inset, 0px) + var(--bt-bottom-inset-app, 0px) )}:root{--bt-scrollbar-width: 0px}[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: #808080;--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;--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);--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]){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: #808080;--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;--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);--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)}}: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-primary-container: var(--bt-color-brand-primary-container);--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-border: var(--bt-color-border-default);--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-hover-on-dark: var(--bt-color-state-hover-on-dark);--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-none: 0px;--bt-radius-xs: 4px;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-xl: 16px;--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;overflow-wrap:anywhere;word-break:keep-all;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-full);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--xl{padding:var(--bt-spacing-xl) var(--bt-spacing-3xl);font-size:var(--bt-font-size-lg)}.bt-button--filled{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-button--filled:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-accent) 88%, var(--bt-color-accent-on-surface))}.bt-button--filled:active:not(:disabled){transform:scale(0.98)}.bt-button--tonal{background:var(--bt-color-primary-container);color:var(--bt-color-text-primary)}.bt-button--tonal:hover:not(:disabled){background-image:linear-gradient(var(--bt-color-hover), var(--bt-color-hover))}.bt-button--tonal:active:not(:disabled){background-image:linear-gradient(var(--bt-color-pressed), var(--bt-color-pressed));transform:scale(0.98)}.bt-button--outline{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--outline:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--outline:active:not(:disabled){transform:scale(0.98)}.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--text:hover:not(:disabled){background:var(--bt-color-hover)}.bt-button--text:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-on-primary)}.bt-button--danger:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 88%, #000)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--radius-none{border-radius:var(--bt-radius-none)}.bt-button--radius-xs{border-radius:var(--bt-radius-xs)}.bt-button--radius-sm{border-radius:var(--bt-radius-sm)}.bt-button--radius-md{border-radius:var(--bt-radius-md)}.bt-button--radius-lg{border-radius:var(--bt-radius-lg)}.bt-button--radius-xl{border-radius:var(--bt-radius-xl)}.bt-button--radius-full{border-radius:var(--bt-radius-full)}.bt-button--full-width{width:100%}.bt-button--danger.bt-button--outline{background:rgba(0,0,0,0);border-color:var(--bt-color-error);color:var(--bt-color-error)}.bt-button--danger.bt-button--outline:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.bt-button--danger.bt-button--tonal{background:color-mix(in srgb, var(--bt-color-error) 12%, transparent);color:var(--bt-color-error)}.bt-button--danger.bt-button--tonal:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 18%, transparent)}.bt-button--danger.bt-button--text{background:rgba(0,0,0,0);color:var(--bt-color-error)}.bt-button--danger.bt-button--text:hover:not(:disabled){background:color-mix(in srgb, var(--bt-color-error) 8%, transparent)}.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__input--identifier{font-feature-settings:"cv05" 1,"cv08" 1;font-variant-numeric:slashed-zero}.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;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.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::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:32px}@media(max-width: 599px){.bt-toggle::after{height:40px}}.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--sm{width:40px;height:24px}.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-dropdown{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-dropdown__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-dropdown__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-dropdown__control:disabled,.bt-dropdown__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-dropdown__control--outline{border:1px solid var(--bt-color-border)}.bt-dropdown__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-dropdown__control--outline.is-open{border-color:var(--bt-color-accent);box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-dropdown__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-dropdown__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-dropdown__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-dropdown__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-dropdown__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-dropdown__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-dropdown__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-dropdown__icon.is-open{transform:rotate(180deg)}.bt-dropdown__list{display:none;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-dropdown__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-dropdown__list:has(>.bt-dropdown__options){max-height:none;overflow:hidden;padding:0}.bt-dropdown__search{display:flex;align-items:center;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-md);border-bottom:1px solid var(--bt-color-border)}.bt-dropdown__search-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bt-color-text-secondary)}.bt-dropdown__search-input{flex:1 1 auto;min-width:0;border:none;outline:none;background:rgba(0,0,0,0);color:var(--bt-color-text-primary);border-radius:var(--bt-radius-sm);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal);transition:box-shadow var(--bt-transition-fast)}.bt-dropdown__search-input::placeholder{color:var(--bt-color-text-tertiary)}.bt-dropdown__search-input:focus-visible{box-shadow:0 0 0 3px var(--bt-color-border-light)}.bt-dropdown__options{max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;margin:0;list-style:none}.bt-dropdown__empty{padding:var(--bt-spacing-md) var(--bt-spacing-lg);color:var(--bt-color-text-tertiary);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal);text-align:center;list-style:none}.bt-dropdown__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;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-dropdown__option[hidden]{display:none}.bt-dropdown__option:hover,.bt-dropdown__option.is-active{background:var(--bt-color-background-secondary)}.bt-dropdown__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-dropdown__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-dropdown__option-content{flex:1 1 auto;min-width:0}.bt-dropdown__option-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--bt-spacing-lg);color:var(--bt-color-accent)}.bt-dropdown__option-check svg{opacity:0;transition:opacity var(--bt-transition-fast)}.bt-dropdown__option.is-selected .bt-dropdown__option-check svg{opacity:1}.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);box-shadow:var(--bt-elevation-1);padding:var(--bt-spacing-lg);transition:transform var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-none{box-shadow:none}.bt-card--shadow-sm{box-shadow:var(--bt-elevation-1)}.bt-card--shadow-md{box-shadow:var(--bt-elevation-2)}.bt-card--shadow-lg{box-shadow:var(--bt-elevation-3)}.bt-card--p-none{padding:0}.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--accent{background:var(--bt-color-accent);color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__title{color:var(--bt-color-accent-on-surface)}.bt-card--accent .bt-card__footer{border-top-color:var(--bt-color-hover-on-dark)}.bt-card--outlined{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);box-shadow:none}.bt-card--glass{background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,.08);color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__title{color:var(--bt-color-on-primary)}.bt-card--glass .bt-card__footer{border-top-color:var(--bt-color-hover-on-dark)}[data-theme=dark] .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}@media(prefers-color-scheme: dark){:root:not([data-theme]) .bt-card--glass{background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}}.bt-card--interactive{cursor:pointer}.bt-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--bt-elevation-2)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-top:0;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}.bt-card__body{width:100%}.bt-card__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-lg);padding-top:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border)}.bt-card__footer--start{justify-content:flex-start}.bt-card__footer--between{justify-content:space-between}.bt-card__footer--end{justify-content:flex-end}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;width:var(--bt-spinner-size, 24px);height:var(--bt-spinner-size, 24px);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-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);overflow-wrap:anywhere;word-break:keep-all;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);clip-path:inset(50%);white-space:nowrap;border:0}.bt-sr-only-focusable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.bt-sr-only-focusable:focus-visible{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background) inset;box-shadow:0 0 0 1000px var(--bt-color-background) inset;-webkit-text-fill-color:var(--bt-color-text-primary);caret-color:var(--bt-color-text-primary)}.bt-text-field__input--filled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset}.bt-text-field__input--filled:-webkit-autofill:focus-visible{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background) inset;box-shadow:0 0 0 1000px var(--bt-color-background) inset}input:-webkit-autofill:disabled,textarea:-webkit-autofill:disabled,select:-webkit-autofill:disabled{-webkit-box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;box-shadow:0 0 0 1000px var(--bt-color-background-secondary) inset;-webkit-text-fill-color:var(--bt-color-text-tertiary)}@media(prefers-reduced-motion: reduce){:root{--bt-transition-fast: 0s;--bt-transition-base: 0s;--bt-transition-slow: 0s}.bt-alert__overlay,.bt-alert__modal{animation:none}.bt-card--interactive:hover{transform:none}.bt-spinner{animation-duration:2.4s}}
|