@bigtablet/design-system 3.12.0 → 3.13.0

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