@bigtablet/design-system 3.10.1 → 3.12.0

package/dist/index.css

@@ -65,6 +65,7 @@
   --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;
@@ -502,6 +503,10 @@ select:-webkit-autofill:disabled {
   width: 100%;
   gap: 12px;
 }
+.empty_state_fill_height {
+  flex: 1;
+  justify-content: center;
+}
 .empty_state_illustration {
   color: var(--bt-color-text-caption);
   display: inline-flex;
@@ -634,6 +639,9 @@ select:-webkit-autofill:disabled {
   --bt-bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
   --bt-bottom-nav-total-height: calc( var(--bt-bottom-nav-height) + var(--bt-bottom-nav-safe-area) );
 }
+body:has(.bottom_nav) {
+  --bt-bottom-inset: var(--bt-bottom-nav-total-height);
+}
 .bottom_nav {
   position: fixed;
   left: 0;
@@ -643,6 +651,7 @@ select:-webkit-autofill:disabled {
   display: flex;
   align-items: stretch;
   justify-content: space-around;
+  box-sizing: border-box;
   height: var(--bt-bottom-nav-total-height);
   padding-bottom: var(--bt-bottom-nav-safe-area);
   background: var(--bt-color-bg-solid);
@@ -1666,7 +1675,7 @@ select:-webkit-autofill:disabled {
   line-height: 1.4;
   font-weight: 500;
   white-space: normal;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   word-break: keep-all;
   text-align: center;
   box-shadow: var(--bt-elevation-level2);
@@ -2266,7 +2275,8 @@ select:-webkit-autofill:disabled {
 .button_label {
   position: relative;
   white-space: normal;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: keep-all;
   text-align: center;
 }
 .button_full_width {
@@ -2789,6 +2799,244 @@ select:-webkit-autofill:disabled {
   }
 }
 
+/* src/ui/display/prose/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.prose {
+  font-family: "Pretendard", sans-serif;
+  color: var(--bt-color-text-heading);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.prose p,
+.prose ul,
+.prose ol,
+.prose blockquote,
+.prose table,
+.prose pre {
+  margin: 0 0 16px;
+}
+.prose > :last-child {
+  margin-bottom: 0;
+}
+.prose,
+.prose p,
+.prose li,
+.prose blockquote,
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6,
+.prose dl,
+.prose dd,
+.prose ul,
+.prose ol {
+  white-space: normal;
+}
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  color: var(--bt-color-text-heading);
+  margin: 20px 0 8px;
+}
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child,
+.prose h4:first-child,
+.prose h5:first-child,
+.prose h6:first-child {
+  margin-top: 0;
+}
+.prose h1 {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--bt-color-border-default);
+}
+.prose h2 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.prose h3 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+.prose ul,
+.prose ol {
+  padding-left: 24px;
+}
+.prose ul {
+  list-style: disc;
+}
+.prose ol {
+  list-style: decimal;
+}
+.prose li {
+  margin-bottom: 4px;
+}
+.prose li > p {
+  margin-bottom: 0;
+}
+.prose li ul,
+.prose li ol {
+  margin: 4px 0 0;
+}
+.prose code {
+  font-family:
+    ui-monospace,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    monospace;
+  font-size: 13px;
+  line-height: 18px;
+  background: var(--bt-color-bg-solid-dim);
+  color: var(--bt-color-text-heading);
+  border-radius: 4px;
+  padding: 0.2em 0.45em;
+}
+.prose pre {
+  background: var(--bt-color-bg-inverse-surface);
+  border-radius: 8px;
+  padding: 20px;
+  overflow-x: auto;
+}
+.prose pre code {
+  background: transparent;
+  color: var(--bt-color-text-inverse);
+  padding: 0;
+  border-radius: 0;
+}
+.prose blockquote {
+  border-left: 4px solid var(--bt-color-accent-default);
+  background: color-mix(in srgb, var(--bt-color-accent-default) 5%, transparent);
+  border-radius: 0 6px 6px 0;
+  padding: 8px 12px;
+  color: var(--bt-color-text-body);
+}
+.prose blockquote > :last-child {
+  margin-bottom: 0;
+}
+.prose blockquote blockquote {
+  border-left: none;
+  padding-left: 0;
+  background: transparent;
+  margin-bottom: 0;
+}
+.prose a {
+  color: var(--bt-color-accent-default);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.prose a:hover {
+  text-decoration-thickness: 2px;
+}
+.prose a:focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: var(--bt-focus-ring);
+}
+.prose strong {
+  font-weight: 600;
+}
+.prose em {
+  font-style: italic;
+}
+.prose del {
+  text-decoration: line-through;
+  color: var(--bt-color-text-caption);
+}
+.prose hr {
+  border: none;
+  border-top: 2px solid var(--bt-color-border-default);
+  margin: 24px 0;
+}
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  display: block;
+  margin: 16px auto;
+}
+.prose table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+.prose pre[tabindex]:focus-visible,
+.prose table[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.prose th,
+.prose td {
+  padding: 4px 12px;
+  border: 1px solid var(--bt-color-border-default);
+  text-align: left;
+  white-space: nowrap;
+}
+.prose th {
+  background: var(--bt-color-bg-solid-dim);
+  font-weight: 600;
+}
+.prose_size_lg h1,
+.prose_size_lg h2,
+.prose_size_lg h3,
+.prose_size_lg h4,
+.prose_size_lg h5,
+.prose_size_lg h6 {
+  margin-top: 32px;
+}
+.prose_size_lg h1 {
+  font-size: 28px;
+  line-height: 36px;
+}
+.prose_size_lg h2 {
+  font-size: 24px;
+  line-height: 32px;
+}
+.prose_size_lg h3 {
+  font-size: 20px;
+  line-height: 28px;
+}
+.prose_size_lg h4,
+.prose_size_lg h5,
+.prose_size_lg h6 {
+  font-size: 16px;
+  line-height: 24px;
+}
+.prose_size_lg li {
+  margin-bottom: 8px;
+}
+
 /* src/ui/feedback/skeleton/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -3496,7 +3744,7 @@ select:-webkit-autofill:disabled {
 @media (max-width: 599px) {
   .toast_container {
     top: auto;
-    bottom: 16px;
+    bottom: calc(16px + var(--bt-bottom-inset, 0px));
     left: 16px;
     right: 16px;
     width: auto;
@@ -3561,7 +3809,8 @@ select:-webkit-autofill:disabled {
 }
 .toast_message {
   flex: 1;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: keep-all;
 }
 .toast_close {
   flex-shrink: 0;
@@ -4894,6 +5143,10 @@ select:-webkit-autofill:disabled {
   cursor: not-allowed;
   color: var(--bt-color-text-disabled);
 }
+.text_field_input_identifier {
+  font-feature-settings: "cv05" 1, "cv08" 1;
+  font-variant-numeric: slashed-zero;
+}
 .text_field_icon {
   display: inline-flex;
   align-items: center;
@@ -4908,7 +5161,8 @@ select:-webkit-autofill:disabled {
   width: 20px;
   height: 20px;
 }
-.text_field_clear {
+.text_field_clear,
+.text_field_action > * {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4923,11 +5177,13 @@ select:-webkit-autofill:disabled {
   transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
   padding: 0;
 }
-.text_field_clear:hover {
+.text_field_clear:hover,
+.text_field_action > *:hover {
   color: var(--bt-color-text-heading);
   background: var(--bt-color-state-hover-on-light);
 }
-.text_field_clear:focus-visible {
+.text_field_clear:focus-visible,
+.text_field_action > *:focus-visible {
   outline: none;
   box-shadow: var(--bt-focus-ring);
 }
@@ -5001,6 +5257,7 @@ select:-webkit-autofill:disabled {
   .text_field_label,
   .text_field_container,
   .text_field_clear,
+  .text_field_action > *,
   .text_field_helper {
     transition: none;
   }
@@ -5029,6 +5286,20 @@ select:-webkit-autofill:disabled {
   transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
   cursor: pointer;
 }
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  min-height: 32px;
+}
+@media (max-width: 599px) {
+  .toggle::after {
+    min-height: 40px;
+  }
+}
 .toggle_thumb {
   position: relative;
   width: 12px;
@@ -5451,6 +5722,10 @@ select:-webkit-autofill:disabled {
   line-height: 22.5px;
   letter-spacing: 0px;
 }
+.drawer_body:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
 .drawer_footer {
   flex: 0 0 auto;
   display: flex;
@@ -5498,6 +5773,8 @@ select:-webkit-autofill:disabled {
   border-radius: 12px;
   box-shadow: var(--bt-elevation-level3);
   max-width: calc(100% - 64px);
+  max-height: calc(100vh - 64px);
+  max-height: calc(100dvh - 64px);
   padding: 24px;
   overflow: visible;
   will-change: transform, opacity;
@@ -5540,6 +5817,14 @@ select:-webkit-autofill:disabled {
   line-height: 36px;
   letter-spacing: -0.01em;
 }
+@media (max-width: 599px) {
+  .modal_title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 32px;
+    letter-spacing: -0.01em;
+  }
+}
 .modal_description {
   margin: 0;
   color: var(--bt-color-text-body);
@@ -5555,12 +5840,19 @@ select:-webkit-autofill:disabled {
   margin-bottom: 0;
 }
 .modal_body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
   color: var(--bt-color-text-body);
   font-size: 15px;
   font-weight: 400;
   line-height: 22.5px;
   letter-spacing: 0px;
 }
+.modal_body:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
 .modal_footer {
   display: flex;
   gap: 8px;

package/dist/index.d.ts

@@ -197,16 +197,27 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 declare const Badge: ({ variant, shape, size, appearance, count, max, className, children, ...props }: BadgeProps) => React$1.JSX.Element;
 
 interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** 일러스트 영역 (아이콘/이미지 등) */
+    /**
+     * 일러스트 영역 (아이콘/이미지 등). **장식 전용** - `aria-hidden="true"` 래퍼로 접근성 트리에서
+     * 제외된다. 포커스 가능한 요소(버튼/링크 등)를 넣으면 포커스는 가는데 보조기기엔 없는 요소가
+     * 되므로(WCAG 4.1.2) `action` 을 쓸 것.
+     */
     illustration?: React$1.ReactNode;
     /** 제목 */
     title?: React$1.ReactNode;
     /** 보조 설명 */
     description?: React$1.ReactNode;
-    /** 액션 영역 (Button 등) */
+    /** 액션 영역 (Button 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다. */
     action?: React$1.ReactNode;
     /** 크기 (기본 "md") */
     size?: "sm" | "md" | "lg";
+    /**
+     * 부모 높이를 채우고 내용을 세로 중앙에 둔다 (`flex: 1` + `justify-content: center`).
+     * 404 · 검색 결과 없음 · 빈 목록처럼 영역 한가운데 놓여야 하는 경우에 쓴다.
+     * **부모가 세로 flex 컨테이너여야 `flex: 1` 이 먹는다** - 아닌 경우 `height: 100%` 를 준 부모
+     * 안에 두거나 부모를 `display: flex; flex-direction: column` 으로 만들 것.
+     */
+    fillHeight?: boolean;
 }
 /**
  * 빈 상태 표시 - 데이터 없음, 검색 결과 없음, 시작 가이드 등.
@@ -221,7 +232,7 @@ interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
  * />
  * ```
  */
-declare const EmptyState: ({ illustration, title, description, action, size, className, ...props }: EmptyStateProps) => React$1.JSX.Element;
+declare const EmptyState: ({ illustration, title, description, action, size, fillHeight, className, ...props }: EmptyStateProps) => React$1.JSX.Element;
 
 type ErrorStateVariant = "page" | "widget";
 interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
@@ -229,9 +240,14 @@ interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
     title?: React$1.ReactNode;
     /** 보조 설명 */
     description?: React$1.ReactNode;
-    /** 아이콘/일러스트 (미지정 시 기본 경고 아이콘. `null` 로 숨김) */
+    /**
+     * 아이콘/일러스트 (미지정 시 기본 경고 아이콘. `null` 로 숨김). **장식 전용** -
+     * `aria-hidden="true"` 래퍼로 접근성 트리에서 제외된다. 래퍼는 필수다: 기본 아이콘이
+     * 이름 없는 bare lucide svg 라서, 빼면 `role="alert"` 이 이름 없는 그래픽까지 읽는다.
+     * 포커스 가능한 요소는 `action` 을 쓸 것 (WCAG 4.1.2).
+     */
     icon?: React$1.ReactNode;
-    /** 액션 영역 (재시도 버튼 등) */
+    /** 액션 영역 (재시도 버튼 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다. */
     action?: React$1.ReactNode;
     /**
      * 레이아웃 모드 (기본 "page").
@@ -580,7 +596,11 @@ interface PopoverProps {
     defaultOpen?: boolean;
     /** 열림 상태 변경 콜백 */
     onOpenChange?: (open: boolean) => void;
-    /** 팝오버 접근성 레이블(기본값: "Dialog") - content 에 제목이 없을 때 권장 */
+    /**
+     * 팝오버 접근성 레이블. `content` 에 제목이 없으면 이 값이 접근성 이름이 된다.
+     * 폴백이 없으므로 `aria-labelledby` 와 함께 비우면 이름 없는 대화상자가 되고
+     * axe `aria-dialog-name` 이 잡는다.
+     */
     "aria-label"?: string;
     /** dialog 의 접근성 라벨 요소 id */
     "aria-labelledby"?: string;
@@ -1324,6 +1344,35 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
  */
 declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) => React$1.JSX.Element;
 
+type ProseSize = "md" | "lg";
+interface ProseProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 본문 스케일 (기본값: "md").
+     * - `md`: 공지·FAQ·이메일 프리뷰처럼 좁은 폭에 들어가는 본문 (h1 24 / h2 20 / h3 18)
+     * - `lg`: 약관·정책처럼 페이지를 채우는 긴 본문 (h1 28 / h2 24 / h3 20, 제목 위 여백도 넓다)
+     */
+    size?: ProseSize;
+    /** 루트 div 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLDivElement>;
+}
+/**
+ * 마크다운 등으로 렌더된 본문에 조판을 입힌다.
+ *
+ * **파서를 포함하지 않는다.** 앱이 `react-markdown` 등으로 만든 결과를 감싸면
+ * 자손 셀렉터로 토큰 기반 타이포·간격·색이 적용된다(다크 모드 자동).
+ *
+ * @example
+ * ```tsx
+ * <Prose size="lg">
+ *   <ReactMarkdown>{policy}</ReactMarkdown>
+ * </Prose>
+ * ```
+ */
+declare const Prose: {
+    ({ size, className, children, ref, ...props }: ProseProps): React$1.JSX.Element;
+    displayName: string;
+};
+
 type TableSize = "sm" | "md" | "lg";
 type TableSortDirection = "asc" | "desc";
 interface TableSort {
@@ -1994,10 +2043,41 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
     error?: boolean;
     /** 성공(검증 통과) 상태 여부. `error` 가 true 면 무시된다. */
     success?: boolean;
-    /** 입력 필드 왼쪽에 표시할 아이콘 */
+    /**
+     * 식별자(아이디·인증코드·시리얼·사업자번호)를 담는 칸인지. 켜면 `l`/`I`/`1` 과 `0`/`O` 를
+     * 구분되게 렌더한다 — 사용자가 한 글자씩 옮겨 적는 값의 오탈자를 줄인다.
+     */
+    identifier?: boolean;
+    /**
+     * 입력 필드 왼쪽에 표시할 **장식** 아이콘. `aria-hidden` 으로 접근성 트리에서 제외된다.
+     * 포커스 가능한 요소(버튼 등)를 넣어야 하면 `leadingAction` 을 쓸 것.
+     */
     leadingIcon?: React$1.ReactNode;
-    /** 입력 필드 오른쪽에 표시할 아이콘 */
+    /**
+     * 입력 필드 오른쪽에 표시할 **장식** 아이콘. `aria-hidden` 으로 접근성 트리에서 제외된다.
+     * 포커스 가능한 요소(버튼 등)를 넣어야 하면 `trailingAction` 을 쓸 것.
+     */
     trailingIcon?: React$1.ReactNode;
+    /**
+     * 입력 필드 왼쪽 조작 요소(버튼 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다.
+     * 아이콘 칸의 위치·크기 CSS 를 재사용하고, 넘긴 요소가 40x40 히트 영역을 채운다(WCAG 2.5.8).
+     */
+    leadingAction?: React$1.ReactNode;
+    /**
+     * 입력 필드 오른쪽 조작 요소(버튼 등). `aria-hidden` 을 붙이지 않아 보조기기에 그대로 노출된다.
+     * 아이콘 칸의 위치·크기 CSS 를 재사용하고, 넘긴 요소가 40x40 히트 영역을 채운다(WCAG 2.5.8).
+     */
+    trailingAction?: React$1.ReactNode;
+    /**
+     * 비밀번호 표시/숨기기 토글 버튼을 오른쪽에 내장한다.
+     * 켜면 `type` 을 토글이 직접 관리한다 - 숨김 상태는 넘긴 `type`(보통 `"password"`), 표시 상태는 `"text"`.
+     */
+    showPasswordToggle?: boolean;
+    /** 토글 버튼의 `aria-label`. i18n 은 앱이 주입한다 (기본값: 영문). */
+    passwordToggleLabels?: {
+        show: string;
+        hide: string;
+    };
     /** 값이 있을 때 오른쪽에 지우기(X) 버튼 표시 여부 */
     clearable?: boolean;
     /** 컨테이너 전체 너비 차지 여부 */
@@ -2028,7 +2108,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, showLabel, supportingText, error, success, leadingIcon, trailingIcon, clearable, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
+    ({ 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;
     displayName: string;
 };
 
@@ -2261,7 +2341,7 @@ declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel
 
 /** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
 type DrawerPlacement = "left" | "right" | "bottom";
-interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
+interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "onPointerDown"> {
     /** 드로어 열림 여부 */
     open: boolean;
     /** 드로어 닫기 콜백 */
@@ -2280,8 +2360,16 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
     showCloseIcon?: boolean;
     /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
     closeLabel?: string;
-    /** 드로어 접근성 레이블 (title 없을 때 사용, 기본값: "Dialog") */
+    /**
+     * 드로어 접근성 레이블. `title` 이 없을 때 이 값이 접근성 이름이 된다.
+     * 둘 다 비우면 이름 없는 대화상자가 되고 axe `aria-dialog-name` 이 잡는다.
+     */
     ariaLabel?: string;
+    /**
+     * 퇴출 애니메이션이 끝나 패널이 실제로 언마운트된 뒤 호출된다.
+     * `open` 을 끈 직후가 아니라 이 시점에 상세 데이터를 비워야 본문만 먼저 사라지지 않는다.
+     */
+    onExited?: () => void;
 }
 /**
  * 화면 가장자리에서 미끄러져 들어오는 패널(Drawer)을 렌더링한다.
@@ -2291,12 +2379,12 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
  * @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
  */
 declare const Drawer: {
-    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
+    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
     displayName: string;
 };
 
 type ModalFooterAlign = "end" | "between" | "start";
-interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
+interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "onPointerDown"> {
     /** 모달 열림 여부 */
     open: boolean;
     /** 모달 닫기 콜백 */
@@ -2317,8 +2405,16 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
     showCloseIcon?: boolean;
     /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
     closeLabel?: string;
-    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
+    /**
+     * 모달 접근성 레이블. `title` 이 없으면 이 값이 유일한 접근성 이름이다 - 폴백이 없으므로
+     * 둘 다 비우면 이름 없는 대화상자가 되고 axe `aria-dialog-name` 이 잡는다.
+     */
     ariaLabel?: string;
+    /**
+     * 퇴출 애니메이션이 끝나 패널이 실제로 언마운트된 뒤 호출된다.
+     * `open` 을 끈 직후가 아니라 이 시점에 상세 데이터를 비워야 본문만 먼저 사라지지 않는다.
+     */
+    onExited?: () => void;
 }
 /**
  * 모달을 렌더링한다.
@@ -2326,7 +2422,7 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
  * @param props 모달 속성
  * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
  */
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => React$1.ReactPortal | null;
+declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, onExited, ...props }: ModalProps) => React$1.ReactPortal | null;
 
 type ThemeMode = "light" | "dark" | "system";
 type ResolvedTheme = "light" | "dark";
@@ -2523,4 +2619,4 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, ref, className, children, style, ...props }: StackProps) => React$1.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AlertActionsAlign, type AlertOptions, AlertProvider, type AlertVariant, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchor, type ButtonAsButton, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, type CropImageSize, type CropOffset, type CropRect, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownMultipleProps, type DropdownOption, type DropdownProps, type DropdownSingleProps, type DropdownSize, type DropdownVariant, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, type FileInputVariant, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, ImageCropper, type ImageCropperHandle, type ImageCropperProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalFooterAlign, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupContextValue, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, type AccordionItem, type AccordionProps, type AlertActionsAlign, type AlertOptions, AlertProvider, type AlertVariant, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchor, type ButtonAsButton, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, type CropImageSize, type CropOffset, type CropRect, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownMultipleProps, type DropdownOption, type DropdownProps, type DropdownSingleProps, type DropdownSize, type DropdownVariant, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, type FileInputVariant, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, ImageCropper, type ImageCropperHandle, type ImageCropperProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalFooterAlign, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Prose, type ProseProps, type ProseSize, Radio, RadioGroup, type RadioGroupContextValue, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };

package/dist/index.js

@@ -3,7 +3,7 @@ import './index.css';
 import * as React16 from 'react';
 import { createContext, useRef, useState, useId, useEffect, useContext, useCallback, useMemo, Fragment, useImperativeHandle, useLayoutEffect } from 'react';
 import { useSpring, animated } from '@react-spring/web';
-import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, TriangleAlert } from 'lucide-react';
+import { ChevronDown, ChevronRight, Globe, ChevronLeft, ArrowUp, ArrowDown, ArrowUpDown, XCircle, AlertTriangle, CheckCircle2, Info, Bell, Search, Check, Image, X, EyeOff, Eye, TriangleAlert } from 'lucide-react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -243,6 +243,7 @@ function useAnchoredPosition({
   }, [open, placement, gap, padding, anchorRef, floatingRef]);
   return state;
 }
+var SKIP_AUTOFOCUS_ATTR = "data-focus-trap-skip-autofocus";
 var FOCUSABLE_SELECTORS = [
   "a[href]",
   "button:not([disabled])",
@@ -263,8 +264,9 @@ function useFocusTrap(containerRef, isActive) {
     };
     let wasTabIndexAdded = false;
     const focusableElements = getFocusableElements();
-    if (focusableElements.length > 0) {
-      focusableElements[0].focus();
+    const initialTarget = Array.from(focusableElements).find((el) => !el.hasAttribute(SKIP_AUTOFOCUS_ATTR)) ?? focusableElements[0];
+    if (initialTarget) {
+      initialTarget.focus();
     } else {
       container.setAttribute("tabindex", "-1");
       wasTabIndexAdded = true;
@@ -542,15 +544,28 @@ var EmptyState = ({
   description,
   action,
   size = "md",
+  fillHeight,
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: cn("empty_state", `empty_state_size_${size}`, className), ...props, children: [
-    illustration && /* @__PURE__ */ jsx("div", { className: "empty_state_illustration", "aria-hidden": "true", children: illustration }),
-    title && /* @__PURE__ */ jsx("h3", { className: "empty_state_title", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "empty_state_description", children: description }),
-    action && /* @__PURE__ */ jsx("div", { className: "empty_state_action", children: action })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "empty_state",
+        `empty_state_size_${size}`,
+        fillHeight && "empty_state_fill_height",
+        className
+      ),
+      ...props,
+      children: [
+        illustration && /* @__PURE__ */ jsx("div", { className: "empty_state_illustration", "aria-hidden": "true", children: illustration }),
+        title && /* @__PURE__ */ jsx("h3", { className: "empty_state_title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "empty_state_description", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "empty_state_action", children: action })
+      ]
+    }
+  );
 };
 var DEFAULT_ICON_SIZE = {
   page: 48,
@@ -1419,7 +1434,7 @@ var Popover = ({
               ref: popoverRef,
               role: "dialog",
               tabIndex: -1,
-              "aria-label": ariaLabelledby ? ariaLabel : ariaLabel ?? "Dialog",
+              "aria-label": ariaLabel,
               "aria-labelledby": ariaLabelledby,
               style,
               className: cn("popover", className),
@@ -2433,6 +2448,29 @@ var MediaCard = ({
     ] })
   ] });
 };
+var Prose = ({ size = "md", className, children, ref, ...props }) => {
+  const rootRef = React16.useRef(null);
+  React16.useImperativeHandle(ref, () => rootRef.current, []);
+  useSafeLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const targets = Array.from(root.querySelectorAll("pre, table"));
+    const sync = () => {
+      for (const el of targets) {
+        if (el.scrollWidth > el.clientWidth) el.setAttribute("tabindex", "0");
+        else el.removeAttribute("tabindex");
+      }
+    };
+    sync();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(root);
+    for (const el of targets) observer.observe(el);
+    return () => observer.disconnect();
+  }, [children]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("prose", `prose_size_${size}`, className), ...props, children });
+};
+Prose.displayName = "Prose";
 var Skeleton = ({
   variant = "text",
   width,
@@ -4413,6 +4451,7 @@ var Textarea = ({
 };
 Textarea.displayName = "Textarea";
 var ClearIcon = () => /* @__PURE__ */ jsx(X, { size: iconSize.lg, "aria-hidden": "true" });
+var DEFAULT_PASSWORD_TOGGLE_LABELS = { show: "Show password", hide: "Hide password" };
 var TextField = ({
   id,
   label,
@@ -4420,9 +4459,15 @@ var TextField = ({
   supportingText,
   error,
   success,
+  identifier,
   leadingIcon,
   trailingIcon,
+  leadingAction,
+  trailingAction,
+  showPasswordToggle,
+  passwordToggleLabels,
   clearable,
+  type,
   fullWidth,
   size = "md",
   variant = "outline",
@@ -4441,9 +4486,7 @@ var TextField = ({
   const helperId = supportingText ? `${inputId}-help` : void 0;
   const isControlled = value !== void 0;
   const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = useState(
-    () => applyTransform(value ?? defaultValue ?? "")
-  );
+  const [innerValue, setInnerValue] = useState(() => applyTransform(value ?? defaultValue ?? ""));
   const isComposingRef = useRef(false);
   const lastEmittedValueRef = useRef(innerValue);
   const [prevValue, setPrevValue] = useState(value);
@@ -4466,6 +4509,14 @@ var TextField = ({
   const handleClear = useCallback(() => {
     emit("");
   }, [emit]);
+  const [passwordRevealed, setPasswordRevealed] = useState(false);
+  const togglePassword = useCallback(() => {
+    setPasswordRevealed((revealed) => !revealed);
+  }, []);
+  let resolvedType = type;
+  if (showPasswordToggle) {
+    resolvedType = passwordRevealed ? "text" : type ?? "password";
+  }
   const isError = !!error;
   const isSuccess = !!success && !isError;
   const rootClassName = cn(
@@ -4479,11 +4530,32 @@ var TextField = ({
     props.disabled && "text_field_disabled",
     className
   );
-  const resolvedTrailing = clearable && innerValue ? /* @__PURE__ */ jsx("button", { type: "button", className: "text_field_clear", onClick: handleClear, "aria-label": "Clear", children: /* @__PURE__ */ jsx(ClearIcon, {}) }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
+  const passwordToggleLabel = passwordRevealed ? passwordToggleLabels?.hide ?? DEFAULT_PASSWORD_TOGGLE_LABELS.hide : passwordToggleLabels?.show ?? DEFAULT_PASSWORD_TOGGLE_LABELS.show;
+  const resolvedTrailing = showPasswordToggle ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: togglePassword,
+      "aria-label": passwordToggleLabel,
+      disabled: props.disabled,
+      children: passwordRevealed ? /* @__PURE__ */ jsx(EyeOff, { size: iconSize.lg, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { size: iconSize.lg, "aria-hidden": "true" })
+    }
+  ) }) : clearable && innerValue ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "text_field_clear",
+      onClick: handleClear,
+      "aria-label": "Clear",
+      disabled: props.disabled,
+      children: /* @__PURE__ */ jsx(ClearIcon, {})
+    }
+  ) : trailingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: trailingAction }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
+  const resolvedLeading = leadingAction ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_action", children: leadingAction }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }) : null;
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text_field_label", children: label }),
     /* @__PURE__ */ jsx("div", { className: "text_field_container", children: /* @__PURE__ */ jsxs("div", { className: "text_field_inner", children: [
-      leadingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }),
+      resolvedLeading,
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -4496,11 +4568,12 @@ var TextField = ({
             {
               id: inputId,
               ref,
-              className: "text_field_input",
+              className: cn("text_field_input", identifier && "text_field_input_identifier"),
               "aria-invalid": isError,
               "aria-describedby": helperId,
               "aria-label": !showLabel ? label : void 0,
               ...props,
+              type: resolvedType,
               value: innerValue,
               onCompositionStart: () => {
                 isComposingRef.current = true;
@@ -4694,11 +4767,13 @@ var Drawer = ({
   showCloseIcon = true,
   closeLabel = "\uB2EB\uAE30",
   ariaLabel,
+  onExited,
   children,
   className,
   ...props
 }) => {
   const panelRef = React16.useRef(null);
+  const pressedOverlayRef = React16.useRef(false);
   const titleId = React16.useId();
   const [shouldRender, setShouldRender] = React16.useState(open);
   const reduced = useReducedMotion();
@@ -4709,7 +4784,10 @@ var Drawer = ({
   const overlayStyle = useSpringPresence({
     visible: open,
     from: "translateY(0px)",
-    onExitComplete: () => setShouldRender(false)
+    onExitComplete: () => {
+      setShouldRender(false);
+      onExited?.();
+    }
   });
   const slideFrom = SLIDE_FROM[placement];
   const slideRest = placement === "bottom" ? "translateY(0%)" : "translateX(0%)";
@@ -4738,8 +4816,16 @@ var Drawer = ({
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
-        "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
-        onClick: () => closeOnOverlay && onClose?.(),
+        "aria-label": ariaLabel,
+        onPointerDown: (e) => {
+          pressedOverlayRef.current = e.target === e.currentTarget;
+        },
+        onClick: (e) => {
+          if (!closeOnOverlay) return;
+          if (e.target !== e.currentTarget) return;
+          if (!pressedOverlayRef.current) return;
+          onClose?.();
+        },
         children: /* @__PURE__ */ jsxs(
           animated.div,
           {
@@ -4747,8 +4833,6 @@ var Drawer = ({
             ...props,
             className: cn("drawer_panel", className),
             style: { ...props.style, ...panelStyle, ...panelSizeStyle },
-            role: "document",
-            onClick: (e) => e.stopPropagation(),
             onKeyDown: (e) => {
               if (e.key !== "Escape") e.stopPropagation();
             },
@@ -4764,7 +4848,10 @@ var Drawer = ({
                 }
               ),
               title && /* @__PURE__ */ jsx("div", { className: "drawer_header", children: /* @__PURE__ */ jsx("h2", { id: titleId, className: "drawer_title", children: title }) }),
-              children && /* @__PURE__ */ jsx("div", { className: "drawer_body", children }),
+              children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
+              // `scrollable-region-focusable`). 다만 초기 포커스 대상에서는 제외한다 - 안쪽에
+              // 첫 입력이 있는데 빈 wrapper 에 포커스가 놓이면 열자마자 어디에 있는지 알 수 없다.
+              /* @__PURE__ */ jsx("div", { className: "drawer_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children }),
               footer && /* @__PURE__ */ jsx("div", { className: "drawer_footer", children: footer })
             ]
           }
@@ -4789,9 +4876,11 @@ var Modal = ({
   children,
   className,
   ariaLabel,
+  onExited,
   ...props
 }) => {
   const panelRef = React16.useRef(null);
+  const pressedOverlayRef = React16.useRef(false);
   const titleId = React16.useId();
   const [shouldRender, setShouldRender] = React16.useState(open);
   const isMounted = useIsMounted();
@@ -4804,7 +4893,9 @@ var Modal = ({
     immediate: reduced,
     config: { tension: 280, friction: 28, clamp: !open },
     onRest: (result) => {
-      if (!open && result.finished) setShouldRender(false);
+      if (open || !result.finished) return;
+      setShouldRender(false);
+      onExited?.();
     }
   });
   const panelStyle = useSpring({
@@ -4830,8 +4921,16 @@ var Modal = ({
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
-        "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
-        onClick: () => closeOnOverlay && onClose?.(),
+        "aria-label": ariaLabel,
+        onPointerDown: (e) => {
+          pressedOverlayRef.current = e.target === e.currentTarget;
+        },
+        onClick: (e) => {
+          if (!closeOnOverlay) return;
+          if (e.target !== e.currentTarget) return;
+          if (!pressedOverlayRef.current) return;
+          onClose?.();
+        },
         children: /* @__PURE__ */ jsxs(
           animated.div,
           {
@@ -4839,25 +4938,20 @@ var Modal = ({
             ...props,
             className: cn("modal_panel", className),
             style: { ...props.style, ...panelStyle, width },
-            role: "document",
-            onClick: (e) => e.stopPropagation(),
             onKeyDown: (e) => {
               if (e.key !== "Escape") e.stopPropagation();
             },
             children: [
-              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" })
-                }
-              ),
+              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" }) }),
               title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "modal_title", children: title }),
               description && /* @__PURE__ */ jsx("div", { className: "modal_description", children: description }),
-              children && /* @__PURE__ */ jsx("div", { className: "modal_body", children }),
+              children && // 본문이 스크롤 컨테이너라 키보드로도 스크롤할 수 있어야 한다(axe
+              // `scrollable-region-focusable`). 넘치는지 여부를 측정해 조건부로 주는 방법도 있지만
+              // ResizeObserver 를 들일 만큼의 이득이 없고, 포커스 트랩 안에서 탭 정지 하나가
+              // 늘어나는 정도의 비용이다.
+              // 다만 초기 포커스 대상에서는 제외한다 - 안쪽에 첫 입력이 있는데 빈 wrapper 에
+              // 포커스가 놓이면 열자마자 어디에 있는지 알 수 없다.
+              /* @__PURE__ */ jsx("div", { className: "modal_body", tabIndex: 0, "data-focus-trap-skip-autofocus": "", children }),
               footer && /* @__PURE__ */ jsx("div", { className: cn("modal_footer", `modal_footer_${footerAlign}`), children: footer })
             ]
           }
@@ -5044,4 +5138,4 @@ var Stack = ({
   );
 };
 
-export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Drawer, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, ImageCropper, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Drawer, Dropdown, EmptyState, ErrorState, FileInput, Grid, Hero, Icon, IconButton, ImageCropper, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Popover, Prose, Radio, RadioGroup, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, Textarea, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };

package/dist/styles/a11y/_index.scss

@@ -12,7 +12,9 @@ $focus_ring_success: var(--bt-focus-ring-success);
 // WCAG 2.1 SC 2.5.5 권장 최소: 44×44
 
 $tap_min_size:           44px;  // a11y 최소 권장
-$tap_target_dense:       32px;  // 데스크탑 인라인 폼, 컴팩트 UI
+$tap_target_dense:       32px;  // 데스크탑 인라인 폼, 컴팩트 UI. 인터랙티브 컨트롤의 하한이다
+                                //   - 터치 입력이 있는 화면에서는 responsive_height 로 승급할 것
+                                //   - 예외: 마우스 전용 내부 도구(admin 등)는 28px 까지 허용
 $tap_target_compact:     40px;  // 데스크탑 기본
 $tap_target_comfortable: 48px;  // 모바일/터치 기본 (44 초과)
 $tap_target_spacious:    56px;  // 강조 CTA, 풀스크린 액션

package/dist/styles/border-width/_index.scss

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "../colors" as colors;
+
 // ── Base border-width ────────────────────────────────────────────────────────
 
 $border_width_0: 0px;
@@ -10,3 +13,29 @@ $border_width_none:      $border_width_0;
 $border_width_standard:  $border_width_1;
 $border_width_thick:     $border_width_2;
 $border_width_indicator: $border_width_2;
+
+// ── Hairline mixin ───────────────────────────────────────────────────────────
+//
+// 1px 경계선용 단축. `border: $border_width_standard solid $color_border_default` 는
+// `border: 1px solid #E5E5E5` 보다 길어서, 실측상 소비 앱 SCSS 에 `1px` 하드코딩이
+// 232 건 남아 있었다. 짧게 쓸 수 있어야 실제로 토큰을 쓴다.
+//
+// @example
+// ```scss
+// .card   { @include token.hairline; }              // 사방
+// .header { @include token.hairline(bottom); }      // 한 면
+// .active { @include token.hairline(left, token.$color_border_hover); }
+// ```
+
+
+@mixin hairline($side: all, $color: colors.$color_border_default) {
+  @if $side == all {
+    border: $border_width_standard solid $color;
+  } @else if list.index(top right bottom left, $side) {
+    border-#{$side}: $border_width_standard solid $color;
+  } @else {
+    // 검증이 없으면 `hairline(letf)` 같은 오타가 컴파일을 통과해 `border-letf` 라는
+    // 무효 속성을 조용히 만든다. 소비 앱에 권장하는 공개 API 라 여기서 끊는다.
+    @error "token.hairline: $side 는 all · top · right · bottom · left 중 하나여야 합니다 (받은 값: #{$side})";
+  }
+}

package/dist/styles/typography/_index.scss

@@ -145,8 +145,37 @@ $letter_spacing_tight:  0.32px;
   white-space: nowrap;
 }
 
+// 한글 줄바꿈. `word-break: break-word` 는 어절 중간에서 끊어 "안녕하세 / 요" 를 만든다.
+// 표준값이 아니고, 명세상 `word-break: normal` + `overflow-wrap: anywhere` 와 같게 동작한다.
+// keep-all 이 어절을 지키고, 끊을 수 없는 긴 영문·URL 만 overflow-wrap 이 처리한다.
+// 텍스트를 줄바꿈하는 모든 컴포넌트는 이 믹스인을 쓴다 (Button·Toast·Tooltip).
+//
+// `break-word` 가 아니라 `anywhere` 를 쓴다. 눈에 보이는 줄바꿈 지점은 둘이 완전히 같지만
+// (120·60px 폭에서 한글·혼합 문자열 실측 결과 동일), min-content 폭이 다르다 —
+// break-word 는 최장 단어(122px), anywhere 는 한 글자(13px). flex item 의 기본
+// min-width: auto 는 min-content 아래로 줄지 못하므로 break-word 면 좁은 컨테이너를 넘친다
+// (실측: 120px 컨테이너에서 98px 초과). anywhere 는 min-width: 0 없이도 넘치지 않고,
+// 텍스트가 inline-flex 의 직접 자식인 vanilla `.bt-button` 처럼 익명 flex item 이라
+// min-width 를 줄 선택자조차 없는 경우까지 함께 해결한다.
+@mixin wrap_keep_all {
+  overflow-wrap: anywhere;
+  word-break: keep-all;
+}
+
 // ── Numeric (v3.1) ────────────────────────────────────────────────────────
 // 매출/지표 표시할 때 숫자 자릿수 정렬.
 
 @mixin tabular_nums  { font-variant-numeric: tabular-nums; }
 @mixin slashed_zero  { font-variant-numeric: slashed-zero; }
+
+// ── Legibility ────────────────────────────────────────────────────────────
+// Pretendard 기본 글자꼴은 l · I · 1 이 거의 같고 0 과 O 도 헷갈린다. 사용자가 한 글자씩
+// 옮겨 적는 값(아이디·인증코드·시리얼·사업자번호)에서 오탈자를 만든다.
+// cv05 = l 에 꼬리, cv08 = I 에 세리프. Pretendard 가 아닌 폴백 폰트는 두 feature 를
+// 그냥 무시하므로 안전하다.
+// 주의: slashed-zero 를 포함하므로 tabular_nums / slashed_zero 와 같은 선택자에서
+// 겹쳐 쓰면 안 된다 - 셋 다 font-variant-numeric 이라 뒤에 온 것만 남는다.
+@mixin legible_identifiers {
+  font-feature-settings: "cv05" 1, "cv08" 1;
+  font-variant-numeric: slashed-zero;
+}

package/dist/vanilla/bigtablet.min.css

@@ -4,4 +4,4 @@
  *
  * @license Bigtablet Inc. Open Source License - see LICENSE at the repo root
  *          (https://github.com/Bigtablet/.github/blob/main/BIGTABLET_LICENSE.md)
- */@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)}: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;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__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-accent);border-color:var(--bt-color-accent)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-accent-on-surface);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-accent)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-accent);border-width:2px}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-accent);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border-light);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-toggle__thumb{width:12px;height:12px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base),width var(--bt-transition-base),height var(--bt-transition-base);transform:translateX(0)}.bt-toggle--on{background:var(--bt-color-accent)}.bt-toggle--on .bt-toggle__thumb{width:20px;height:20px;background:var(--bt-color-accent-on-surface);transform:translateX(16px)}.bt-toggle--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);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}}
+ */@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}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.10.1",
+	"version": "3.12.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -106,9 +106,9 @@
 		"storybook": "^10.4.6",
 		"stylelint": "^17.14.0",
 		"tsup": "^8.5.1",
-		"tsx": "^4.22.4",
+		"tsx": "^4.23.12",
 		"typescript": "^6.0.3",
-		"vite": "^8.1.0",
+		"vite": "^8.2.1",
 		"vitest": "^4.1.10"
 	},
 	"publishConfig": {