@bigtablet/design-system 3.12.0 → 3.14.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 +34 -8
- package/dist/index.d.ts +55 -19
- package/dist/index.js +65 -33
- package/dist/styles/a11y/_index.scss +45 -0
- package/dist/styles/z-index/_index.scss +18 -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`, `--bt-z-*`. 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,17 @@
|
|
|
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
|
+
--bt-z-content: 10;
|
|
71
|
+
--bt-z-chrome: 100;
|
|
72
|
+
--bt-z-app-chrome: 150;
|
|
73
|
+
--bt-z-notification: 200;
|
|
74
|
+
--bt-z-loading: 500;
|
|
75
|
+
--bt-z-popup: 1000;
|
|
76
|
+
}
|
|
77
|
+
body {
|
|
78
|
+
--bt-bottom-inset: calc( var(--bt-bottom-nav-inset, 0px) + var(--bt-bottom-inset-app, 0px) );
|
|
69
79
|
}
|
|
70
80
|
:root {
|
|
71
81
|
--bt-scrollbar-width: 0px;
|
|
@@ -640,7 +650,7 @@ select:-webkit-autofill:disabled {
|
|
|
640
650
|
--bt-bottom-nav-total-height: calc( var(--bt-bottom-nav-height) + var(--bt-bottom-nav-safe-area) );
|
|
641
651
|
}
|
|
642
652
|
body:has(.bottom_nav) {
|
|
643
|
-
--bt-bottom-inset: var(--bt-bottom-nav-total-height);
|
|
653
|
+
--bt-bottom-nav-inset: var(--bt-bottom-nav-total-height);
|
|
644
654
|
}
|
|
645
655
|
.bottom_nav {
|
|
646
656
|
position: fixed;
|
|
@@ -1346,7 +1356,8 @@ body:has(.bottom_nav) {
|
|
|
1346
1356
|
padding: 0;
|
|
1347
1357
|
margin: -1px;
|
|
1348
1358
|
overflow: hidden;
|
|
1349
|
-
clip: rect(0
|
|
1359
|
+
clip: rect(0 0 0 0);
|
|
1360
|
+
clip-path: inset(50%);
|
|
1350
1361
|
white-space: nowrap;
|
|
1351
1362
|
border: 0;
|
|
1352
1363
|
}
|
|
@@ -1452,6 +1463,8 @@ body:has(.bottom_nav) {
|
|
|
1452
1463
|
margin: 0;
|
|
1453
1464
|
overflow: visible;
|
|
1454
1465
|
clip: auto;
|
|
1466
|
+
clip-path: none;
|
|
1467
|
+
white-space: normal;
|
|
1455
1468
|
}
|
|
1456
1469
|
}
|
|
1457
1470
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -3007,6 +3020,10 @@ body:has(.bottom_nav) {
|
|
|
3007
3020
|
background: var(--bt-color-bg-solid-dim);
|
|
3008
3021
|
font-weight: 600;
|
|
3009
3022
|
}
|
|
3023
|
+
.prose_size_lg {
|
|
3024
|
+
font-size: 16px;
|
|
3025
|
+
line-height: 28px;
|
|
3026
|
+
}
|
|
3010
3027
|
.prose_size_lg h1,
|
|
3011
3028
|
.prose_size_lg h2,
|
|
3012
3029
|
.prose_size_lg h3,
|
|
@@ -3030,8 +3047,8 @@ body:has(.bottom_nav) {
|
|
|
3030
3047
|
.prose_size_lg h4,
|
|
3031
3048
|
.prose_size_lg h5,
|
|
3032
3049
|
.prose_size_lg h6 {
|
|
3033
|
-
font-size:
|
|
3034
|
-
line-height:
|
|
3050
|
+
font-size: 18px;
|
|
3051
|
+
line-height: 28px;
|
|
3035
3052
|
}
|
|
3036
3053
|
.prose_size_lg li {
|
|
3037
3054
|
margin-bottom: 8px;
|
|
@@ -3122,10 +3139,13 @@ body:has(.bottom_nav) {
|
|
|
3122
3139
|
position: absolute;
|
|
3123
3140
|
width: 1px;
|
|
3124
3141
|
height: 1px;
|
|
3142
|
+
padding: 0;
|
|
3143
|
+
margin: -1px;
|
|
3125
3144
|
overflow: hidden;
|
|
3126
3145
|
clip: rect(0 0 0 0);
|
|
3127
3146
|
clip-path: inset(50%);
|
|
3128
3147
|
white-space: nowrap;
|
|
3148
|
+
border: 0;
|
|
3129
3149
|
}
|
|
3130
3150
|
.checkbox_state_layer {
|
|
3131
3151
|
display: inline-flex;
|
|
@@ -3262,7 +3282,8 @@ body:has(.bottom_nav) {
|
|
|
3262
3282
|
padding: 0;
|
|
3263
3283
|
margin: -1px;
|
|
3264
3284
|
overflow: hidden;
|
|
3265
|
-
clip: rect(0
|
|
3285
|
+
clip: rect(0 0 0 0);
|
|
3286
|
+
clip-path: inset(50%);
|
|
3266
3287
|
white-space: nowrap;
|
|
3267
3288
|
border: 0;
|
|
3268
3289
|
}
|
|
@@ -4323,7 +4344,8 @@ body:has(.bottom_nav) {
|
|
|
4323
4344
|
padding: 0;
|
|
4324
4345
|
margin: -1px;
|
|
4325
4346
|
overflow: hidden;
|
|
4326
|
-
clip: rect(0
|
|
4347
|
+
clip: rect(0 0 0 0);
|
|
4348
|
+
clip-path: inset(50%);
|
|
4327
4349
|
white-space: nowrap;
|
|
4328
4350
|
border: 0;
|
|
4329
4351
|
}
|
|
@@ -4627,7 +4649,8 @@ body:has(.bottom_nav) {
|
|
|
4627
4649
|
padding: 0;
|
|
4628
4650
|
margin: -1px;
|
|
4629
4651
|
overflow: hidden;
|
|
4630
|
-
clip: rect(0
|
|
4652
|
+
clip: rect(0 0 0 0);
|
|
4653
|
+
clip-path: inset(50%);
|
|
4631
4654
|
white-space: nowrap;
|
|
4632
4655
|
border: 0;
|
|
4633
4656
|
}
|
|
@@ -4775,10 +4798,13 @@ body:has(.bottom_nav) {
|
|
|
4775
4798
|
position: absolute;
|
|
4776
4799
|
width: 1px;
|
|
4777
4800
|
height: 1px;
|
|
4801
|
+
padding: 0;
|
|
4802
|
+
margin: -1px;
|
|
4778
4803
|
overflow: hidden;
|
|
4779
4804
|
clip: rect(0 0 0 0);
|
|
4780
4805
|
clip-path: inset(50%);
|
|
4781
4806
|
white-space: nowrap;
|
|
4807
|
+
border: 0;
|
|
4782
4808
|
}
|
|
4783
4809
|
.radio_state_layer {
|
|
4784
4810
|
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;
|
|
@@ -1123,6 +1125,18 @@ declare const zIndex: {
|
|
|
1123
1125
|
readonly level3: 200;
|
|
1124
1126
|
readonly level4: 500;
|
|
1125
1127
|
readonly level5: 1000;
|
|
1128
|
+
/** 컨텐츠 내부 겹침 - sticky 표 헤더, Hero 오버레이 */
|
|
1129
|
+
readonly content: 10;
|
|
1130
|
+
/** Modal · Drawer · Sidebar · BottomNav */
|
|
1131
|
+
readonly chrome: 100;
|
|
1132
|
+
/** Toast · NavBar */
|
|
1133
|
+
readonly notification: 200;
|
|
1134
|
+
/** TopLoading */
|
|
1135
|
+
readonly loading: 500;
|
|
1136
|
+
/** Tooltip · Popover · Menu · Dropdown 목록 · Alert */
|
|
1137
|
+
readonly popup: 1000;
|
|
1138
|
+
/** 앱이 소유한 크롬용 대역 - DS chrome(100) 위, notification(200) 아래 */
|
|
1139
|
+
readonly appChrome: 150;
|
|
1126
1140
|
};
|
|
1127
1141
|
|
|
1128
1142
|
type CardVariant = "default" | "accent" | "glass" | "outlined";
|
|
@@ -1541,7 +1555,7 @@ declare const Skeleton: ({ variant, width, height, radius, className, style, ...
|
|
|
1541
1555
|
interface SpinnerProps {
|
|
1542
1556
|
/** 스피너 크기(px) (기본값: 24) */
|
|
1543
1557
|
size?: number;
|
|
1544
|
-
/** 스피너 접근성 레이블 (기본값: "
|
|
1558
|
+
/** 스피너 접근성 레이블 (기본값: "로딩 중") */
|
|
1545
1559
|
ariaLabel?: string;
|
|
1546
1560
|
}
|
|
1547
1561
|
/**
|
|
@@ -1558,8 +1572,10 @@ interface ToastProviderProps {
|
|
|
1558
1572
|
children: React$1.ReactNode;
|
|
1559
1573
|
/** 최대 동시 표시 토스트 수 (기본값: 5) */
|
|
1560
1574
|
maxCount?: number;
|
|
1561
|
-
/** 토스트 닫기 버튼의 aria-label (기본값: "
|
|
1575
|
+
/** 토스트 닫기 버튼의 aria-label (기본값: "닫기") */
|
|
1562
1576
|
closeAriaLabel?: string;
|
|
1577
|
+
/** 토스트 리전(`role="region"`)의 접근성 이름 (기본값: "알림"). 스크린리더의 리전 목록에 뜬다 */
|
|
1578
|
+
regionLabel?: string;
|
|
1563
1579
|
}
|
|
1564
1580
|
/**
|
|
1565
1581
|
* 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
|
|
@@ -1567,7 +1583,7 @@ interface ToastProviderProps {
|
|
|
1567
1583
|
* @param props Provider 속성
|
|
1568
1584
|
* @returns 렌더링된 Provider와 토스트 컨테이너
|
|
1569
1585
|
*/
|
|
1570
|
-
declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => React$1.JSX.Element;
|
|
1586
|
+
declare const ToastProvider: ({ children, maxCount, closeAriaLabel, regionLabel, }: ToastProviderProps) => React$1.JSX.Element;
|
|
1571
1587
|
|
|
1572
1588
|
/**
|
|
1573
1589
|
* 토스트 메시지를 표시하는 훅.
|
|
@@ -1596,7 +1612,7 @@ interface TopLoadingProps {
|
|
|
1596
1612
|
height?: number;
|
|
1597
1613
|
/** 표시 여부 */
|
|
1598
1614
|
isLoading?: boolean;
|
|
1599
|
-
/** 프로그레스 바의 접근성 레이블 (기본값: "
|
|
1615
|
+
/** 프로그레스 바의 접근성 레이블 (기본값: "페이지 로딩 중") */
|
|
1600
1616
|
ariaLabel?: string;
|
|
1601
1617
|
}
|
|
1602
1618
|
/**
|
|
@@ -1654,20 +1670,20 @@ interface DatePickerBaseProps {
|
|
|
1654
1670
|
* @deprecated `fullWidth` 사용 또는 CSS로 처리
|
|
1655
1671
|
*/
|
|
1656
1672
|
width?: number | string;
|
|
1657
|
-
/** 연도 select의 라벨/플레이스홀더 (기본값: "
|
|
1673
|
+
/** 연도 select의 라벨/플레이스홀더 (기본값: "년") */
|
|
1658
1674
|
yearLabel?: string;
|
|
1659
|
-
/** 월 select의 라벨/플레이스홀더 (기본값: "
|
|
1675
|
+
/** 월 select의 라벨/플레이스홀더 (기본값: "월") */
|
|
1660
1676
|
monthLabel?: string;
|
|
1661
|
-
/** 일 select의 라벨/플레이스홀더 (기본값: "
|
|
1677
|
+
/** 일 select의 라벨/플레이스홀더 (기본값: "일") */
|
|
1662
1678
|
dayLabel?: string;
|
|
1663
1679
|
/**
|
|
1664
1680
|
* minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
|
|
1665
|
-
* `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "
|
|
1681
|
+
* `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "최소 날짜: {date}")
|
|
1666
1682
|
*/
|
|
1667
1683
|
minDateSrFormat?: string;
|
|
1668
1684
|
/**
|
|
1669
1685
|
* selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
|
|
1670
|
-
* (기본값: "
|
|
1686
|
+
* (기본값: "오늘까지 선택 가능")
|
|
1671
1687
|
*/
|
|
1672
1688
|
selectableRangeUntilTodaySrText?: string;
|
|
1673
1689
|
}
|
|
@@ -1711,7 +1727,7 @@ interface DropdownCommonProps {
|
|
|
1711
1727
|
id?: string;
|
|
1712
1728
|
/** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
|
|
1713
1729
|
label?: string;
|
|
1714
|
-
/** 선택 전 표시할 플레이스홀더 (기본값: "
|
|
1730
|
+
/** 선택 전 표시할 플레이스홀더 (기본값: "선택…") */
|
|
1715
1731
|
placeholder?: string;
|
|
1716
1732
|
/** 표시할 옵션 목록 */
|
|
1717
1733
|
options: DropdownOption[];
|
|
@@ -1786,7 +1802,7 @@ declare const Dropdown: (props: DropdownProps) => React$1.JSX.Element;
|
|
|
1786
1802
|
|
|
1787
1803
|
type FileInputVariant = "button" | "preview";
|
|
1788
1804
|
interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
1789
|
-
/** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "
|
|
1805
|
+
/** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "파일 선택") */
|
|
1790
1806
|
label?: string;
|
|
1791
1807
|
/** 파일 선택 시 호출되는 콜백 */
|
|
1792
1808
|
onFiles?: (files: FileList | null) => void;
|
|
@@ -2073,13 +2089,15 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
2073
2089
|
* 켜면 `type` 을 토글이 직접 관리한다 - 숨김 상태는 넘긴 `type`(보통 `"password"`), 표시 상태는 `"text"`.
|
|
2074
2090
|
*/
|
|
2075
2091
|
showPasswordToggle?: boolean;
|
|
2076
|
-
/** 토글 버튼의 `aria-label
|
|
2092
|
+
/** 토글 버튼의 `aria-label` (기본값: "비밀번호 표시" / "비밀번호 숨기기"). 다국어 앱은 주입할 것 */
|
|
2077
2093
|
passwordToggleLabels?: {
|
|
2078
2094
|
show: string;
|
|
2079
2095
|
hide: string;
|
|
2080
2096
|
};
|
|
2081
2097
|
/** 값이 있을 때 오른쪽에 지우기(X) 버튼 표시 여부 */
|
|
2082
2098
|
clearable?: boolean;
|
|
2099
|
+
/** 지우기(X) 버튼의 `aria-label` (기본값: "지우기") */
|
|
2100
|
+
clearLabel?: string;
|
|
2083
2101
|
/** 컨테이너 전체 너비 차지 여부 */
|
|
2084
2102
|
fullWidth?: boolean;
|
|
2085
2103
|
/** 값 변경 콜백 (canonical). 호출 시점은 `imeStrategy` 에 따름 (기본: 조합 완료 후) */
|
|
@@ -2108,7 +2126,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
2108
2126
|
* @returns 렌더링된 텍스트 필드 UI
|
|
2109
2127
|
*/
|
|
2110
2128
|
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;
|
|
2129
|
+
({ 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
2130
|
displayName: string;
|
|
2113
2131
|
};
|
|
2114
2132
|
|
|
@@ -2318,10 +2336,12 @@ interface PaginationBaseProps {
|
|
|
2318
2336
|
page: number;
|
|
2319
2337
|
/** 전체 페이지 수 */
|
|
2320
2338
|
totalPages: number;
|
|
2321
|
-
/** 이전 페이지 버튼 aria-label (기본값: "
|
|
2339
|
+
/** 이전 페이지 버튼 aria-label (기본값: "이전 페이지") */
|
|
2322
2340
|
prevLabel?: string;
|
|
2323
|
-
/** 다음 페이지 버튼 aria-label (기본값: "
|
|
2341
|
+
/** 다음 페이지 버튼 aria-label (기본값: "다음 페이지") */
|
|
2324
2342
|
nextLabel?: string;
|
|
2343
|
+
/** `<nav>` 랜드마크 이름 (기본값: "페이지 이동"). 스크린리더의 리전 목록에 그대로 뜬다 */
|
|
2344
|
+
navLabel?: string;
|
|
2325
2345
|
}
|
|
2326
2346
|
type PaginationCallbacks = {
|
|
2327
2347
|
onPageChange: (page: number) => void;
|
|
@@ -2337,7 +2357,7 @@ type PaginationProps = PaginationBaseProps & PaginationCallbacks;
|
|
|
2337
2357
|
* @param props 페이지네이션 속성
|
|
2338
2358
|
* @returns 렌더링된 페이지네이션 UI
|
|
2339
2359
|
*/
|
|
2340
|
-
declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, }: PaginationProps) => React$1.JSX.Element;
|
|
2360
|
+
declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, navLabel, }: PaginationProps) => React$1.JSX.Element;
|
|
2341
2361
|
|
|
2342
2362
|
/** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
|
|
2343
2363
|
type DrawerPlacement = "left" | "right" | "bottom";
|
|
@@ -2356,6 +2376,14 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
|
|
|
2356
2376
|
footer?: React$1.ReactNode;
|
|
2357
2377
|
/** 오버레이 클릭 시 닫기 여부 (기본값: true) */
|
|
2358
2378
|
closeOnOverlay?: boolean;
|
|
2379
|
+
/**
|
|
2380
|
+
* Escape 와 오버레이 클릭을 한 축으로 묶는다. 사용자에게는 둘 다 "실수로 닫기" 축이라
|
|
2381
|
+
* 따로 다루면 한쪽만 막는 실수가 나온다. `false` 면 두 경로 모두 닫지 않는다.
|
|
2382
|
+
*
|
|
2383
|
+
* 주면 `closeOnOverlay` 를 이긴다. 안 주면 기존 동작 그대로다 - 오버레이는
|
|
2384
|
+
* `closeOnOverlay`(기본 `true`), Escape 는 항상 켜짐.
|
|
2385
|
+
*/
|
|
2386
|
+
dismissible?: boolean;
|
|
2359
2387
|
/** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
|
|
2360
2388
|
showCloseIcon?: boolean;
|
|
2361
2389
|
/** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
|
|
@@ -2379,7 +2407,7 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
|
|
|
2379
2407
|
* @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
|
|
2380
2408
|
*/
|
|
2381
2409
|
declare const Drawer: {
|
|
2382
|
-
({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
|
|
2410
|
+
({ open, onClose, placement, size, title, footer, closeOnOverlay, dismissible, showCloseIcon, closeLabel, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
|
|
2383
2411
|
displayName: string;
|
|
2384
2412
|
};
|
|
2385
2413
|
|
|
@@ -2391,6 +2419,14 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
|
|
|
2391
2419
|
onClose?: () => void;
|
|
2392
2420
|
/** 오버레이 클릭 시 닫기 여부 (기본값: true) */
|
|
2393
2421
|
closeOnOverlay?: boolean;
|
|
2422
|
+
/**
|
|
2423
|
+
* Escape 와 오버레이 클릭을 한 축으로 묶는다. 사용자에게는 둘 다 "실수로 닫기" 축이라
|
|
2424
|
+
* 따로 다루면 한쪽만 막는 실수가 나온다. `false` 면 두 경로 모두 닫지 않는다.
|
|
2425
|
+
*
|
|
2426
|
+
* 주면 `closeOnOverlay` 를 이긴다. 안 주면 기존 동작 그대로다 - 오버레이는
|
|
2427
|
+
* `closeOnOverlay`(기본 `true`), Escape 는 항상 켜짐.
|
|
2428
|
+
*/
|
|
2429
|
+
dismissible?: boolean;
|
|
2394
2430
|
/** 모달 패널 너비 (기본값: 480) */
|
|
2395
2431
|
width?: number | string;
|
|
2396
2432
|
/** 모달 제목 (h2, heading_large_bold) */
|
|
@@ -2422,7 +2458,7 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
|
|
|
2422
2458
|
* @param props 모달 속성
|
|
2423
2459
|
* @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
|
|
2424
2460
|
*/
|
|
2425
|
-
declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, onExited, ...props }: ModalProps) => React$1.ReactPortal | null;
|
|
2461
|
+
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
2462
|
|
|
2427
2463
|
type ThemeMode = "light" | "dark" | "system";
|
|
2428
2464
|
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
|
|
@@ -2036,7 +2037,19 @@ var zIndex = {
|
|
|
2036
2037
|
level2: 100,
|
|
2037
2038
|
level3: 200,
|
|
2038
2039
|
level4: 500,
|
|
2039
|
-
level5: 1e3
|
|
2040
|
+
level5: 1e3,
|
|
2041
|
+
/** 컨텐츠 내부 겹침 - sticky 표 헤더, Hero 오버레이 */
|
|
2042
|
+
content: 10,
|
|
2043
|
+
/** Modal · Drawer · Sidebar · BottomNav */
|
|
2044
|
+
chrome: 100,
|
|
2045
|
+
/** Toast · NavBar */
|
|
2046
|
+
notification: 200,
|
|
2047
|
+
/** TopLoading */
|
|
2048
|
+
loading: 500,
|
|
2049
|
+
/** Tooltip · Popover · Menu · Dropdown 목록 · Alert */
|
|
2050
|
+
popup: 1e3,
|
|
2051
|
+
/** 앱이 소유한 크롬용 대역 - DS chrome(100) 위, notification(200) 아래 */
|
|
2052
|
+
appChrome: 150
|
|
2040
2053
|
};
|
|
2041
2054
|
var Card = ({
|
|
2042
2055
|
heading,
|
|
@@ -2911,7 +2924,7 @@ var LinearProgress = ({
|
|
|
2911
2924
|
}
|
|
2912
2925
|
);
|
|
2913
2926
|
};
|
|
2914
|
-
var Spinner = ({ size = 24, ariaLabel = "
|
|
2927
|
+
var Spinner = ({ size = 24, ariaLabel = "\uB85C\uB529 \uC911" }) => {
|
|
2915
2928
|
return /* @__PURE__ */ jsx(
|
|
2916
2929
|
"span",
|
|
2917
2930
|
{
|
|
@@ -2989,7 +3002,8 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
|
|
|
2989
3002
|
var ToastProvider = ({
|
|
2990
3003
|
children,
|
|
2991
3004
|
maxCount = 5,
|
|
2992
|
-
closeAriaLabel = "
|
|
3005
|
+
closeAriaLabel = "\uB2EB\uAE30",
|
|
3006
|
+
regionLabel = "\uC54C\uB9BC"
|
|
2993
3007
|
}) => {
|
|
2994
3008
|
const [toasts, setToasts] = React16.useState([]);
|
|
2995
3009
|
const isMounted = useIsMounted();
|
|
@@ -3015,7 +3029,7 @@ var ToastProvider = ({
|
|
|
3015
3029
|
role: "region",
|
|
3016
3030
|
"aria-live": "polite",
|
|
3017
3031
|
"aria-atomic": "false",
|
|
3018
|
-
"aria-label":
|
|
3032
|
+
"aria-label": regionLabel,
|
|
3019
3033
|
children: toasts.map((item) => /* @__PURE__ */ jsx(
|
|
3020
3034
|
ToastItemComponent,
|
|
3021
3035
|
{
|
|
@@ -3056,7 +3070,7 @@ var TopLoading = ({
|
|
|
3056
3070
|
color,
|
|
3057
3071
|
height = 3,
|
|
3058
3072
|
isLoading = true,
|
|
3059
|
-
ariaLabel = "
|
|
3073
|
+
ariaLabel = "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911"
|
|
3060
3074
|
}) => {
|
|
3061
3075
|
if (!isLoading) return null;
|
|
3062
3076
|
const isIndeterminate = progress === void 0;
|
|
@@ -3088,7 +3102,7 @@ var Dropdown = (props) => {
|
|
|
3088
3102
|
const {
|
|
3089
3103
|
id,
|
|
3090
3104
|
label,
|
|
3091
|
-
placeholder = "
|
|
3105
|
+
placeholder = "\uC120\uD0DD\u2026",
|
|
3092
3106
|
options,
|
|
3093
3107
|
disabled,
|
|
3094
3108
|
size = "md",
|
|
@@ -3437,11 +3451,11 @@ var DatePicker = ({
|
|
|
3437
3451
|
disabled,
|
|
3438
3452
|
fullWidth = true,
|
|
3439
3453
|
width,
|
|
3440
|
-
yearLabel = "
|
|
3441
|
-
monthLabel = "
|
|
3442
|
-
dayLabel = "
|
|
3443
|
-
minDateSrFormat = "
|
|
3444
|
-
selectableRangeUntilTodaySrText = "
|
|
3454
|
+
yearLabel = "\uB144",
|
|
3455
|
+
monthLabel = "\uC6D4",
|
|
3456
|
+
dayLabel = "\uC77C",
|
|
3457
|
+
minDateSrFormat = "\uCD5C\uC18C \uB0A0\uC9DC: {date}",
|
|
3458
|
+
selectableRangeUntilTodaySrText = "\uC624\uB298\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5"
|
|
3445
3459
|
}) => {
|
|
3446
3460
|
const groupId = React16.useId();
|
|
3447
3461
|
const constraintId = React16.useId();
|
|
@@ -3620,7 +3634,7 @@ var DatePicker = ({
|
|
|
3620
3634
|
] });
|
|
3621
3635
|
};
|
|
3622
3636
|
var FileInput = ({
|
|
3623
|
-
label = "
|
|
3637
|
+
label = "\uD30C\uC77C \uC120\uD0DD",
|
|
3624
3638
|
onFiles,
|
|
3625
3639
|
supportingText,
|
|
3626
3640
|
preview = false,
|
|
@@ -4451,7 +4465,7 @@ var Textarea = ({
|
|
|
4451
4465
|
};
|
|
4452
4466
|
Textarea.displayName = "Textarea";
|
|
4453
4467
|
var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
|
|
4454
|
-
var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "
|
|
4468
|
+
var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "\uBE44\uBC00\uBC88\uD638 \uD45C\uC2DC", hide: "\uBE44\uBC00\uBC88\uD638 \uC228\uAE30\uAE30" };
|
|
4455
4469
|
var TextField = ({
|
|
4456
4470
|
id,
|
|
4457
4471
|
label,
|
|
@@ -4467,6 +4481,7 @@ var TextField = ({
|
|
|
4467
4481
|
showPasswordToggle,
|
|
4468
4482
|
passwordToggleLabels,
|
|
4469
4483
|
clearable,
|
|
4484
|
+
clearLabel = "\uC9C0\uC6B0\uAE30",
|
|
4470
4485
|
type,
|
|
4471
4486
|
fullWidth,
|
|
4472
4487
|
size = "md",
|
|
@@ -4546,7 +4561,7 @@ var TextField = ({
|
|
|
4546
4561
|
type: "button",
|
|
4547
4562
|
className: "text_field_clear",
|
|
4548
4563
|
onClick: handleClear,
|
|
4549
|
-
"aria-label":
|
|
4564
|
+
"aria-label": clearLabel,
|
|
4550
4565
|
disabled: props.disabled,
|
|
4551
4566
|
children: /* @__PURE__ */ jsx(ClearIcon, {})
|
|
4552
4567
|
}
|
|
@@ -4700,14 +4715,15 @@ var Pagination = ({
|
|
|
4700
4715
|
totalPages,
|
|
4701
4716
|
onPageChange,
|
|
4702
4717
|
onChange,
|
|
4703
|
-
prevLabel = "
|
|
4704
|
-
nextLabel = "
|
|
4718
|
+
prevLabel = "\uC774\uC804 \uD398\uC774\uC9C0",
|
|
4719
|
+
nextLabel = "\uB2E4\uC74C \uD398\uC774\uC9C0",
|
|
4720
|
+
navLabel = "\uD398\uC774\uC9C0 \uC774\uB3D9"
|
|
4705
4721
|
}) => {
|
|
4706
4722
|
const emit = onPageChange ?? onChange;
|
|
4707
4723
|
const prevDisabled = page <= 1;
|
|
4708
4724
|
const nextDisabled = page >= totalPages;
|
|
4709
4725
|
const items = React16.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
|
|
4710
|
-
return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label":
|
|
4726
|
+
return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": navLabel, children: [
|
|
4711
4727
|
/* @__PURE__ */ jsx(
|
|
4712
4728
|
"button",
|
|
4713
4729
|
{
|
|
@@ -4764,6 +4780,7 @@ var Drawer = ({
|
|
|
4764
4780
|
title,
|
|
4765
4781
|
footer,
|
|
4766
4782
|
closeOnOverlay = true,
|
|
4783
|
+
dismissible,
|
|
4767
4784
|
showCloseIcon = true,
|
|
4768
4785
|
closeLabel = "\uB2EB\uAE30",
|
|
4769
4786
|
ariaLabel,
|
|
@@ -4772,6 +4789,11 @@ var Drawer = ({
|
|
|
4772
4789
|
className,
|
|
4773
4790
|
...props
|
|
4774
4791
|
}) => {
|
|
4792
|
+
const lastContentRef = React16.useRef({ children, title, footer });
|
|
4793
|
+
if (open) lastContentRef.current = { children, title, footer };
|
|
4794
|
+
const content = open ? { children, title, footer } : lastContentRef.current;
|
|
4795
|
+
const overlayDismissible = dismissible ?? closeOnOverlay;
|
|
4796
|
+
const escapeDismissible = dismissible ?? true;
|
|
4775
4797
|
const panelRef = React16.useRef(null);
|
|
4776
4798
|
const pressedOverlayRef = React16.useRef(false);
|
|
4777
4799
|
const titleId = React16.useId();
|
|
@@ -4779,7 +4801,9 @@ var Drawer = ({
|
|
|
4779
4801
|
const reduced = useReducedMotion();
|
|
4780
4802
|
const isMounted = useIsMounted();
|
|
4781
4803
|
useFocusTrap(panelRef, open && isMounted);
|
|
4782
|
-
useOverlayEscape(open && isMounted, () =>
|
|
4804
|
+
useOverlayEscape(open && isMounted, () => {
|
|
4805
|
+
if (escapeDismissible) onClose?.();
|
|
4806
|
+
});
|
|
4783
4807
|
if (open && !shouldRender) setShouldRender(true);
|
|
4784
4808
|
const overlayStyle = useSpringPresence({
|
|
4785
4809
|
visible: open,
|
|
@@ -4804,7 +4828,7 @@ var Drawer = ({
|
|
|
4804
4828
|
}, [open]);
|
|
4805
4829
|
if (!open && !shouldRender) return null;
|
|
4806
4830
|
if (typeof document === "undefined" || !isMounted) return null;
|
|
4807
|
-
const hasTitle = !!title;
|
|
4831
|
+
const hasTitle = !!content.title;
|
|
4808
4832
|
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
4809
4833
|
const panelSizeStyle = placement === "bottom" ? { height: sizeValue } : { width: sizeValue };
|
|
4810
4834
|
return createPortal(
|
|
@@ -4821,7 +4845,7 @@ var Drawer = ({
|
|
|
4821
4845
|
pressedOverlayRef.current = e.target === e.currentTarget;
|
|
4822
4846
|
},
|
|
4823
4847
|
onClick: (e) => {
|
|
4824
|
-
if (!
|
|
4848
|
+
if (!overlayDismissible) return;
|
|
4825
4849
|
if (e.target !== e.currentTarget) return;
|
|
4826
4850
|
if (!pressedOverlayRef.current) return;
|
|
4827
4851
|
onClose?.();
|
|
@@ -4847,12 +4871,12 @@ var Drawer = ({
|
|
|
4847
4871
|
children: /* @__PURE__ */ jsx(X, { size: iconSize.md, "aria-hidden": "true" })
|
|
4848
4872
|
}
|
|
4849
4873
|
),
|
|
4850
|
-
title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: title }) }),
|
|
4851
|
-
children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4874
|
+
content.title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: content.title }) }),
|
|
4875
|
+
content.children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4852
4876
|
// `scrollable-region-focusable`). 다만 초기 포커스 대상에서는 제외한다 - 안쪽에
|
|
4853
4877
|
// 첫 입력이 있는데 빈 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 })
|
|
4878
|
+
/* @__PURE__ */ jsx("div", { className: "drawer_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children: content.children }),
|
|
4879
|
+
content.footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: content.footer })
|
|
4856
4880
|
]
|
|
4857
4881
|
}
|
|
4858
4882
|
)
|
|
@@ -4866,6 +4890,7 @@ var Modal = ({
|
|
|
4866
4890
|
open,
|
|
4867
4891
|
onClose,
|
|
4868
4892
|
closeOnOverlay = true,
|
|
4893
|
+
dismissible,
|
|
4869
4894
|
width = 480,
|
|
4870
4895
|
title,
|
|
4871
4896
|
description,
|
|
@@ -4879,13 +4904,20 @@ var Modal = ({
|
|
|
4879
4904
|
onExited,
|
|
4880
4905
|
...props
|
|
4881
4906
|
}) => {
|
|
4907
|
+
const lastContentRef = React16.useRef({ children, title, description, footer });
|
|
4908
|
+
if (open) lastContentRef.current = { children, title, description, footer };
|
|
4909
|
+
const content = open ? { children, title, description, footer } : lastContentRef.current;
|
|
4910
|
+
const overlayDismissible = dismissible ?? closeOnOverlay;
|
|
4911
|
+
const escapeDismissible = dismissible ?? true;
|
|
4882
4912
|
const panelRef = React16.useRef(null);
|
|
4883
4913
|
const pressedOverlayRef = React16.useRef(false);
|
|
4884
4914
|
const titleId = React16.useId();
|
|
4885
4915
|
const [shouldRender, setShouldRender] = React16.useState(open);
|
|
4886
4916
|
const isMounted = useIsMounted();
|
|
4887
4917
|
useFocusTrap(panelRef, open && isMounted);
|
|
4888
|
-
useOverlayEscape(open && isMounted, () =>
|
|
4918
|
+
useOverlayEscape(open && isMounted, () => {
|
|
4919
|
+
if (escapeDismissible) onClose?.();
|
|
4920
|
+
});
|
|
4889
4921
|
if (open && !shouldRender) setShouldRender(true);
|
|
4890
4922
|
const reduced = useReducedMotion();
|
|
4891
4923
|
const overlayStyle = useSpring({
|
|
@@ -4911,7 +4943,7 @@ var Modal = ({
|
|
|
4911
4943
|
}, [open]);
|
|
4912
4944
|
if (!open && !shouldRender) return null;
|
|
4913
4945
|
if (typeof document === "undefined" || !isMounted) return null;
|
|
4914
|
-
const hasTitle = !!title;
|
|
4946
|
+
const hasTitle = !!content.title;
|
|
4915
4947
|
return createPortal(
|
|
4916
4948
|
/* @__PURE__ */ jsx(
|
|
4917
4949
|
animated.div,
|
|
@@ -4926,7 +4958,7 @@ var Modal = ({
|
|
|
4926
4958
|
pressedOverlayRef.current = e.target === e.currentTarget;
|
|
4927
4959
|
},
|
|
4928
4960
|
onClick: (e) => {
|
|
4929
|
-
if (!
|
|
4961
|
+
if (!overlayDismissible) return;
|
|
4930
4962
|
if (e.target !== e.currentTarget) return;
|
|
4931
4963
|
if (!pressedOverlayRef.current) return;
|
|
4932
4964
|
onClose?.();
|
|
@@ -4943,16 +4975,16 @@ var Modal = ({
|
|
|
4943
4975
|
},
|
|
4944
4976
|
children: [
|
|
4945
4977
|
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
|
|
4978
|
+
content.title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: content.title }),
|
|
4979
|
+
content.description && /* @__PURE__ */ jsx("div", { className: "modal_description", children: content.description }),
|
|
4980
|
+
content.children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
|
|
4949
4981
|
// `scrollable-region-focusable`). 넘치는지 여부를 측정해 조건부로 주는 방법도 있지만
|
|
4950
4982
|
// ResizeObserver 를 들일 만큼의 이득이 없고, 포커스 트랩 안에서 탭 정지 하나가
|
|
4951
4983
|
// 늘어나는 정도의 비용이다.
|
|
4952
4984
|
// 다만 초기 포커스 대상에서는 제외한다 - 안쪽에 첫 입력이 있는데 빈 wrapper 에
|
|
4953
4985
|
// 포커스가 놓이면 열자마자 어디에 있는지 알 수 없다.
|
|
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 })
|
|
4986
|
+
/* @__PURE__ */ jsx("div", { className: "modal_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children: content.children }),
|
|
4987
|
+
content.footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: content.footer })
|
|
4956
4988
|
]
|
|
4957
4989
|
}
|
|
4958
4990
|
)
|
|
@@ -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
|
+
}
|
|
@@ -1,6 +1,24 @@
|
|
|
1
|
+
// 레벨 스케일 - 값의 원천. 제거하면 하위 호환이 깨지므로 유지한다.
|
|
1
2
|
$z_level0: 0;
|
|
2
3
|
$z_level1: 10;
|
|
3
4
|
$z_level2: 100;
|
|
4
5
|
$z_level3: 200;
|
|
5
6
|
$z_level4: 500;
|
|
6
7
|
$z_level5: 1000;
|
|
8
|
+
|
|
9
|
+
// ── 역할 별칭 ─────────────────────────────────────────────────────────────
|
|
10
|
+
// 레벨 이름만으로는 "무엇이 어디 있는지" 를 알 수 없다. $z_level2 를 보고 모달을 떠올릴 방법이
|
|
11
|
+
// 없어서, 소비자가 배포 CSS 를 grep 해 레이어를 알아내고 있었다. 값은 위와 같고 이름만 붙인다.
|
|
12
|
+
//
|
|
13
|
+
// 앱 레이어를 DS 레이어 사이에 놓을 때는 값을 베끼지 말고 이 이름을 기준으로 계산한다.
|
|
14
|
+
// .floating_bar { z-index: calc(#{$z_notification} - 1); } // 토스트 아래, 모달 위
|
|
15
|
+
$z_content: $z_level1; // 10 - 컨텐츠 내부 겹침 (sticky 표 헤더, Hero 오버레이)
|
|
16
|
+
$z_chrome: $z_level2; // 100 - Modal · Drawer · Sidebar · BottomNav
|
|
17
|
+
$z_notification: $z_level3; // 200 - Toast · NavBar
|
|
18
|
+
$z_loading: $z_level4; // 500 - TopLoading
|
|
19
|
+
$z_popup: $z_level5; // 1000 - Tooltip · Popover · Menu · Dropdown 목록 · Alert
|
|
20
|
+
|
|
21
|
+
// 앱이 소유한 하단·상단 크롬을 위한 자리. DS 크롬(100)보다 위, 알림(200)보다 아래.
|
|
22
|
+
// 소비처의 플로팅 액션 바가 정확히 이 대역을 필요로 한다 - 앱 스케일에서 900 을 골랐다가
|
|
23
|
+
// DS 토스트(200)를 덮어 토스트에 z-index 를 덧씌우는 규칙이 남아 있었다.
|
|
24
|
+
$z_app_chrome: 150;
|
|
@@ -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;--bt-z-content: 10;--bt-z-chrome: 100;--bt-z-app-chrome: 150;--bt-z-notification: 200;--bt-z-loading: 500;--bt-z-popup: 1000}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: var(--bt-z-chrome);--bt-z-toast: var(--bt-z-notification)}.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-popup);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-popup);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 rgba(255,255,255,.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:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.12)}@media(prefers-color-scheme: dark){:root:not([data-theme]) .bt-card--glass{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.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{z-index:var(--bt-z-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}}
|