@bigtablet/design-system 1.22.2 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +345 -285
- package/dist/index.d.ts +374 -88
- package/dist/index.js +416 -308
- package/dist/next.css +28 -28
- package/dist/styles/scss/_a11y.scss +4 -4
- package/dist/styles/scss/_breakpoints.scss +19 -13
- package/dist/styles/scss/_colors.scss +67 -55
- package/dist/styles/scss/_radius.scss +6 -5
- package/dist/styles/scss/_shadows.scss +5 -20
- package/dist/styles/scss/_spacing.scss +14 -12
- package/dist/styles/scss/_typography.scss +61 -64
- package/dist/styles/scss/_z-index.scss +6 -3
- package/dist/vanilla/bigtablet.min.css +1 -1
- package/dist/vanilla/bigtablet.min.js +12 -12
- package/package.json +12 -11
package/dist/next.css
CHANGED
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
height: 100%;
|
|
14
14
|
width: 240px;
|
|
15
|
-
background: #
|
|
16
|
-
border-right: 1px solid #
|
|
17
|
-
padding:
|
|
18
|
-
gap:
|
|
15
|
+
background: #FFFFFF;
|
|
16
|
+
border-right: 1px solid #E5E5E5;
|
|
17
|
+
padding: 8px;
|
|
18
|
+
gap: 8px;
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
transition: width 0.3s ease-in-out;
|
|
21
21
|
}
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
width: 56px;
|
|
24
24
|
}
|
|
25
25
|
.sidebar_brand {
|
|
26
|
-
padding:
|
|
27
|
-
margin-bottom:
|
|
28
|
-
border-bottom: 1px solid #
|
|
26
|
+
padding: 8px;
|
|
27
|
+
margin-bottom: 8px;
|
|
28
|
+
border-bottom: 1px solid #E5E5E5;
|
|
29
29
|
}
|
|
30
30
|
.sidebar_brand_link {
|
|
31
31
|
display: flex;
|
|
@@ -35,37 +35,37 @@
|
|
|
35
35
|
}
|
|
36
36
|
.sidebar_nav {
|
|
37
37
|
display: grid;
|
|
38
|
-
gap:
|
|
38
|
+
gap: 4px;
|
|
39
39
|
}
|
|
40
40
|
.sidebar_group {
|
|
41
41
|
display: grid;
|
|
42
|
-
gap:
|
|
42
|
+
gap: 4px;
|
|
43
43
|
}
|
|
44
44
|
.sidebar_item {
|
|
45
45
|
border: none;
|
|
46
46
|
display: flex;
|
|
47
47
|
align-items: center;
|
|
48
48
|
justify-content: space-between;
|
|
49
|
-
padding:
|
|
49
|
+
padding: 8px 12px;
|
|
50
50
|
border-radius: 8px;
|
|
51
|
-
color: #
|
|
51
|
+
color: #121212;
|
|
52
52
|
cursor: pointer;
|
|
53
53
|
background: transparent;
|
|
54
54
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
55
55
|
}
|
|
56
56
|
.sidebar_item:hover {
|
|
57
|
-
background: #
|
|
58
|
-
color: #
|
|
57
|
+
background: #F4F4F4;
|
|
58
|
+
color: #121212;
|
|
59
59
|
}
|
|
60
60
|
.sidebar_item_active {
|
|
61
|
-
background: #
|
|
62
|
-
color: #
|
|
63
|
-
box-shadow: inset 0 0 0 1px #
|
|
61
|
+
background: #FFFFFF;
|
|
62
|
+
color: #121212;
|
|
63
|
+
box-shadow: inset 0 0 0 1px #E5E5E5;
|
|
64
64
|
}
|
|
65
65
|
.sidebar_item_left {
|
|
66
66
|
display: flex;
|
|
67
67
|
align-items: center;
|
|
68
|
-
gap:
|
|
68
|
+
gap: 8px;
|
|
69
69
|
}
|
|
70
70
|
.sidebar_item_right {
|
|
71
71
|
display: flex;
|
|
@@ -82,13 +82,13 @@
|
|
|
82
82
|
transform: rotate(180deg);
|
|
83
83
|
}
|
|
84
84
|
.sidebar_label {
|
|
85
|
-
font-size:
|
|
85
|
+
font-size: 16px;
|
|
86
86
|
white-space: nowrap;
|
|
87
87
|
}
|
|
88
88
|
.sidebar_sub {
|
|
89
89
|
display: grid;
|
|
90
|
-
gap:
|
|
91
|
-
padding-left:
|
|
90
|
+
gap: 4px;
|
|
91
|
+
padding-left: 12px;
|
|
92
92
|
max-height: 0;
|
|
93
93
|
opacity: 0;
|
|
94
94
|
overflow: hidden;
|
|
@@ -106,28 +106,28 @@
|
|
|
106
106
|
.sidebar_sub_item {
|
|
107
107
|
display: flex;
|
|
108
108
|
align-items: center;
|
|
109
|
-
gap:
|
|
110
|
-
padding:
|
|
109
|
+
gap: 12px;
|
|
110
|
+
padding: 4px 12px;
|
|
111
111
|
border-radius: 8px;
|
|
112
|
-
color: #
|
|
112
|
+
color: #121212;
|
|
113
113
|
cursor: pointer;
|
|
114
114
|
background: transparent;
|
|
115
115
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
116
116
|
}
|
|
117
117
|
.sidebar_sub_item:hover {
|
|
118
|
-
background: #
|
|
119
|
-
color: #
|
|
118
|
+
background: #F4F4F4;
|
|
119
|
+
color: #121212;
|
|
120
120
|
}
|
|
121
121
|
.sidebar_sub_item_active {
|
|
122
|
-
color: #
|
|
122
|
+
color: #121212;
|
|
123
123
|
font-weight: 500;
|
|
124
124
|
}
|
|
125
125
|
.sidebar_sub_icon {
|
|
126
126
|
display: grid;
|
|
127
127
|
place-items: center;
|
|
128
|
-
color: #
|
|
128
|
+
color: #121212;
|
|
129
129
|
}
|
|
130
130
|
.sidebar_sub_label {
|
|
131
|
-
font-size:
|
|
131
|
+
font-size: 14px;
|
|
132
132
|
white-space: nowrap;
|
|
133
133
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use "colors" as colors;
|
|
2
2
|
|
|
3
|
-
$focus_ring:
|
|
4
|
-
$focus_ring_error:
|
|
5
|
-
$focus_ring_success: 0 0 0 3px rgba(colors.$
|
|
3
|
+
$focus_ring: 0 0 0 3px rgba(colors.$color_base_brand_primary, 0.15);
|
|
4
|
+
$focus_ring_error: 0 0 0 3px rgba(colors.$color_base_status_error, 0.15);
|
|
5
|
+
$focus_ring_success: 0 0 0 3px rgba(colors.$color_base_status_success, 0.15);
|
|
6
6
|
|
|
7
|
-
$tap_min_size: 44px;
|
|
7
|
+
$tap_min_size: 44px;
|
|
@@ -1,28 +1,34 @@
|
|
|
1
|
-
$
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
1
|
+
$breakpoint_compact: 0px;
|
|
2
|
+
$breakpoint_medium: 600px;
|
|
3
|
+
$breakpoint_expanded: 840px;
|
|
4
|
+
$breakpoint_large: 1200px;
|
|
5
5
|
|
|
6
|
-
@mixin
|
|
7
|
-
@media (max-width: #{$
|
|
6
|
+
@mixin compact {
|
|
7
|
+
@media (max-width: #{$breakpoint_medium - 1}) {
|
|
8
8
|
@content;
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
@mixin
|
|
13
|
-
@media (min-width: $
|
|
12
|
+
@mixin medium {
|
|
13
|
+
@media (min-width: $breakpoint_medium) and (max-width: #{$breakpoint_expanded - 1}) {
|
|
14
14
|
@content;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
@mixin
|
|
19
|
-
@media (min-width: $
|
|
18
|
+
@mixin expanded {
|
|
19
|
+
@media (min-width: $breakpoint_expanded) and (max-width: #{$breakpoint_large - 1}) {
|
|
20
20
|
@content;
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
@mixin
|
|
25
|
-
@media (min-width: $
|
|
24
|
+
@mixin large {
|
|
25
|
+
@media (min-width: $breakpoint_large) {
|
|
26
26
|
@content;
|
|
27
27
|
}
|
|
28
|
-
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// ── Convenience: min-width shortcuts ─────────────────────────────────────────
|
|
31
|
+
|
|
32
|
+
@mixin from_medium { @media (min-width: $breakpoint_medium) { @content; } }
|
|
33
|
+
@mixin from_expanded { @media (min-width: $breakpoint_expanded) { @content; } }
|
|
34
|
+
@mixin from_large { @media (min-width: $breakpoint_large) { @content; } }
|
|
@@ -1,55 +1,67 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
$
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$
|
|
14
|
-
$
|
|
15
|
-
$
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
$
|
|
19
|
-
$
|
|
20
|
-
$
|
|
21
|
-
|
|
22
|
-
$
|
|
23
|
-
$
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
$
|
|
34
|
-
$
|
|
35
|
-
$
|
|
36
|
-
$
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
$
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
$
|
|
45
|
-
$
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
$
|
|
50
|
-
$
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
1
|
+
// ── Base colors ───────────────────────────────────────────────────────────────
|
|
2
|
+
|
|
3
|
+
$color_base_brand_primary: #121212;
|
|
4
|
+
$color_base_neutral_0: #FFFFFF;
|
|
5
|
+
$color_base_neutral_50: #F4F4F4;
|
|
6
|
+
$color_base_neutral_200: #E5E5E5;
|
|
7
|
+
$color_base_neutral_300: #999999;
|
|
8
|
+
$color_base_neutral_400: #B3B3B3;
|
|
9
|
+
$color_base_neutral_500: #888888;
|
|
10
|
+
$color_base_neutral_700: #666666;
|
|
11
|
+
$color_base_neutral_900: #121212;
|
|
12
|
+
$color_base_status_error: #EF4444;
|
|
13
|
+
$color_base_status_success: #10B981;
|
|
14
|
+
$color_base_status_warning: #F59E0B;
|
|
15
|
+
$color_base_status_info: #3B82F6;
|
|
16
|
+
$color_base_alpha_black_5: rgba(0, 0, 0, 0.05);
|
|
17
|
+
$color_base_alpha_black_8: rgba(0, 0, 0, 0.08);
|
|
18
|
+
$color_base_alpha_black_12: rgba(26, 26, 26, 0.12);
|
|
19
|
+
$color_base_alpha_black_38: rgba(26, 26, 26, 0.38);
|
|
20
|
+
$color_base_alpha_black_50: rgba(0, 0, 0, 0.50);
|
|
21
|
+
$color_base_alpha_white_5: rgba(255, 255, 255, 0.05);
|
|
22
|
+
$color_base_alpha_white_8: rgba(255, 255, 255, 0.08);
|
|
23
|
+
$color_base_alpha_white_12: rgba(255, 255, 255, 0.12);
|
|
24
|
+
|
|
25
|
+
// ── Semantic: Brand ───────────────────────────────────────────────────────────
|
|
26
|
+
|
|
27
|
+
$color_brand_primary: $color_base_brand_primary;
|
|
28
|
+
$color_brand_on_primary: $color_base_neutral_0;
|
|
29
|
+
|
|
30
|
+
// ── Semantic: Text ────────────────────────────────────────────────────────────
|
|
31
|
+
|
|
32
|
+
$color_text_heading: $color_base_neutral_900;
|
|
33
|
+
$color_text_body: $color_base_neutral_700;
|
|
34
|
+
$color_text_caption: $color_base_neutral_500;
|
|
35
|
+
$color_text_brand: $color_base_brand_primary;
|
|
36
|
+
$color_text_inverse: $color_base_neutral_0;
|
|
37
|
+
$color_text_disabled: $color_base_alpha_black_38;
|
|
38
|
+
|
|
39
|
+
// ── Semantic: Background ──────────────────────────────────────────────────────
|
|
40
|
+
|
|
41
|
+
$color_bg_solid: $color_base_neutral_0;
|
|
42
|
+
$color_bg_solid_dim: $color_base_neutral_50;
|
|
43
|
+
$color_bg_additive: $color_base_alpha_black_5;
|
|
44
|
+
$color_bg_disabled: $color_base_alpha_black_12;
|
|
45
|
+
$color_bg_overlay: $color_base_alpha_black_50;
|
|
46
|
+
|
|
47
|
+
// ── Semantic: State ───────────────────────────────────────────────────────────
|
|
48
|
+
|
|
49
|
+
$color_state_hover_on_light: $color_base_alpha_black_5;
|
|
50
|
+
$color_state_pressed_on_light: $color_base_alpha_black_12;
|
|
51
|
+
$color_state_hover_on_dark: $color_base_alpha_white_5;
|
|
52
|
+
$color_state_pressed_on_dark: $color_base_alpha_white_12;
|
|
53
|
+
|
|
54
|
+
// ── Semantic: Border ──────────────────────────────────────────────────────────
|
|
55
|
+
|
|
56
|
+
$color_border_default: $color_base_neutral_200;
|
|
57
|
+
$color_border_hover: $color_base_neutral_400;
|
|
58
|
+
$color_border_subtle: $color_base_alpha_black_8;
|
|
59
|
+
$color_border_focus: $color_base_neutral_900;
|
|
60
|
+
$color_border_disabled: #F2F2F2;
|
|
61
|
+
|
|
62
|
+
// ── Semantic: Status ──────────────────────────────────────────────────────────
|
|
63
|
+
|
|
64
|
+
$color_status_error: $color_base_status_error;
|
|
65
|
+
$color_status_success: $color_base_status_success;
|
|
66
|
+
$color_status_warning: $color_base_status_warning;
|
|
67
|
+
$color_status_info: $color_base_status_info;
|
|
@@ -1,20 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
$shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
7
|
-
|
|
8
|
-
/* Elevated Shadows (for floating elements) */
|
|
9
|
-
$shadow_elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
|
|
10
|
-
$shadow_float: 0 20px 60px -15px rgba(0, 0, 0, 0.3);
|
|
11
|
-
|
|
12
|
-
/* Glow Effects (for tech/accent elements) */
|
|
13
|
-
$glow_accent: 0 0 20px rgba(59, 130, 246, 0.35);
|
|
14
|
-
$glow_accent_strong: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25);
|
|
15
|
-
$glow_white: 0 0 20px rgba(255, 255, 255, 0.15);
|
|
16
|
-
$glow_white_strong: 0 0 40px rgba(255, 255, 255, 0.25);
|
|
17
|
-
|
|
18
|
-
/* Inner Shadows */
|
|
19
|
-
$shadow_inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
20
|
-
$shadow_inner_lg: inset 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
1
|
+
$shadow_level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
|
|
2
|
+
$shadow_level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
|
|
3
|
+
$shadow_level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
|
|
4
|
+
$shadow_level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
|
|
5
|
+
$shadow_level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
$
|
|
2
|
-
$
|
|
3
|
-
$
|
|
4
|
-
$
|
|
5
|
-
$
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
12
|
-
$
|
|
1
|
+
$spacing_0: 0px;
|
|
2
|
+
$spacing_1: 1px;
|
|
3
|
+
$spacing_2: 2px;
|
|
4
|
+
$spacing_3: 3px;
|
|
5
|
+
$spacing_4: 4px;
|
|
6
|
+
$spacing_6: 6px;
|
|
7
|
+
$spacing_8: 8px;
|
|
8
|
+
$spacing_12: 12px;
|
|
9
|
+
$spacing_16: 16px;
|
|
10
|
+
$spacing_20: 20px;
|
|
11
|
+
$spacing_24: 24px;
|
|
12
|
+
$spacing_32: 32px;
|
|
13
|
+
$spacing_40: 40px;
|
|
14
|
+
$spacing_48: 48px;
|
|
@@ -1,77 +1,74 @@
|
|
|
1
1
|
$font_family_primary: "Pretendard", sans-serif;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
3
|
+
// ── Base: Font size ───────────────────────────────────────────────────────────
|
|
4
|
+
|
|
5
|
+
$font_size_12: 12px;
|
|
6
|
+
$font_size_13: 13px;
|
|
7
|
+
$font_size_14: 14px;
|
|
8
|
+
$font_size_15: 15px;
|
|
9
|
+
$font_size_16: 16px;
|
|
10
|
+
$font_size_18: 18px;
|
|
11
|
+
$font_size_20: 20px;
|
|
12
|
+
$font_size_24: 24px;
|
|
13
|
+
$font_size_28: 28px;
|
|
14
|
+
$font_size_32: 32px;
|
|
15
|
+
$font_size_40: 40px;
|
|
16
|
+
$font_size_48: 48px;
|
|
17
|
+
|
|
18
|
+
// ── Base: Font weight ─────────────────────────────────────────────────────────
|
|
12
19
|
|
|
13
|
-
$font_weight_thin: 100;
|
|
14
|
-
$font_weight_extralight: 200;
|
|
15
|
-
$font_weight_light: 300;
|
|
16
20
|
$font_weight_regular: 400;
|
|
17
|
-
$font_weight_medium:
|
|
18
|
-
$font_weight_semibold: 600;
|
|
19
|
-
$font_weight_bold: 700;
|
|
20
|
-
$font_weight_extrabold: 800;
|
|
21
|
-
$font_weight_black: 900;
|
|
21
|
+
$font_weight_medium: 500;
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
$line_height_snug: 1.3;
|
|
25
|
-
$line_height_normal: 1.5;
|
|
26
|
-
$line_height_relaxed: 1.75;
|
|
23
|
+
// ── Base: Line height ─────────────────────────────────────────────────────────
|
|
27
24
|
|
|
28
|
-
$
|
|
29
|
-
$
|
|
30
|
-
$
|
|
25
|
+
$line_height_16: 16px;
|
|
26
|
+
$line_height_18: 18px;
|
|
27
|
+
$line_height_20: 20px;
|
|
28
|
+
$line_height_22_5: 22.5px;
|
|
29
|
+
$line_height_24: 24px;
|
|
30
|
+
$line_height_28: 28px;
|
|
31
|
+
$line_height_32: 32px;
|
|
32
|
+
$line_height_36: 36px;
|
|
33
|
+
$line_height_40: 40px;
|
|
34
|
+
$line_height_50: 50px;
|
|
35
|
+
$line_height_60: 60px;
|
|
31
36
|
|
|
32
|
-
|
|
33
|
-
@mixin text_sm { font-size: $font_size_sm; line-height: $line_height_normal; }
|
|
34
|
-
@mixin text_base { font-size: $font_size_base; line-height: $line_height_normal; }
|
|
35
|
-
@mixin text_md { font-size: $font_size_md; line-height: $line_height_normal; }
|
|
36
|
-
@mixin text_lg { font-size: $font_size_lg; line-height: $line_height_normal; }
|
|
37
|
-
@mixin text_xl { font-size: $font_size_xl; line-height: $line_height_snug; }
|
|
38
|
-
@mixin text_2xl { font-size: $font_size_2xl; line-height: $line_height_snug; }
|
|
39
|
-
@mixin text_3xl { font-size: $font_size_3xl; line-height: $line_height_tight; }
|
|
37
|
+
$letter_spacing_normal: 0px;
|
|
40
38
|
|
|
41
|
-
|
|
42
|
-
font-size: $font_size_3xl;
|
|
43
|
-
font-weight: $font_weight_bold;
|
|
44
|
-
line-height: $line_height_tight;
|
|
45
|
-
letter-spacing: $letter_spacing_tight;
|
|
46
|
-
}
|
|
39
|
+
// ── Semantic mixins ───────────────────────────────────────────────────────────
|
|
47
40
|
|
|
48
|
-
@mixin
|
|
49
|
-
font-size: $
|
|
50
|
-
|
|
51
|
-
line-height: $
|
|
52
|
-
|
|
53
|
-
}
|
|
41
|
+
@mixin display_large { font-size: $font_size_48; font-weight: $font_weight_regular; line-height: $line_height_60; letter-spacing: $letter_spacing_normal; }
|
|
42
|
+
@mixin display_large_medium { font-size: $font_size_48; font-weight: $font_weight_medium; line-height: $line_height_60; letter-spacing: $letter_spacing_normal; }
|
|
43
|
+
@mixin display_medium { font-size: $font_size_40; font-weight: $font_weight_regular; line-height: $line_height_50; letter-spacing: $letter_spacing_normal; }
|
|
44
|
+
@mixin display_medium_medium { font-size: $font_size_40; font-weight: $font_weight_medium; line-height: $line_height_50; letter-spacing: $letter_spacing_normal; }
|
|
45
|
+
@mixin display_small { font-size: $font_size_32; font-weight: $font_weight_regular; line-height: $line_height_40; letter-spacing: $letter_spacing_normal; }
|
|
46
|
+
@mixin display_small_medium { font-size: $font_size_32; font-weight: $font_weight_medium; line-height: $line_height_40; letter-spacing: $letter_spacing_normal; }
|
|
54
47
|
|
|
55
|
-
@mixin
|
|
56
|
-
font-size: $
|
|
57
|
-
|
|
58
|
-
line-height: $
|
|
59
|
-
}
|
|
48
|
+
@mixin heading_large { font-size: $font_size_28; font-weight: $font_weight_regular; line-height: $line_height_36; letter-spacing: $letter_spacing_normal; }
|
|
49
|
+
@mixin heading_large_medium { font-size: $font_size_28; font-weight: $font_weight_medium; line-height: $line_height_36; letter-spacing: $letter_spacing_normal; }
|
|
50
|
+
@mixin heading_medium { font-size: $font_size_24; font-weight: $font_weight_regular; line-height: $line_height_32; letter-spacing: $letter_spacing_normal; }
|
|
51
|
+
@mixin heading_medium_medium { font-size: $font_size_24; font-weight: $font_weight_medium; line-height: $line_height_32; letter-spacing: $letter_spacing_normal; }
|
|
52
|
+
@mixin heading_small { font-size: $font_size_20; font-weight: $font_weight_regular; line-height: $line_height_28; letter-spacing: $letter_spacing_normal; }
|
|
53
|
+
@mixin heading_small_medium { font-size: $font_size_20; font-weight: $font_weight_medium; line-height: $line_height_28; letter-spacing: $letter_spacing_normal; }
|
|
60
54
|
|
|
61
|
-
@mixin
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
line-height: $
|
|
65
|
-
}
|
|
55
|
+
@mixin title_large { font-size: $font_size_18; font-weight: $font_weight_regular; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
|
|
56
|
+
@mixin title_large_medium { font-size: $font_size_18; font-weight: $font_weight_medium; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
|
|
57
|
+
@mixin title_medium { font-size: $font_size_16; font-weight: $font_weight_regular; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
|
|
58
|
+
@mixin title_medium_medium { font-size: $font_size_16; font-weight: $font_weight_medium; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
|
|
59
|
+
@mixin title_small { font-size: $font_size_14; font-weight: $font_weight_regular; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
|
|
60
|
+
@mixin title_small_medium { font-size: $font_size_14; font-weight: $font_weight_medium; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
|
|
66
61
|
|
|
67
|
-
@mixin
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
line-height: $
|
|
71
|
-
}
|
|
62
|
+
@mixin body_large { font-size: $font_size_16; font-weight: $font_weight_regular; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
|
|
63
|
+
@mixin body_large_medium { font-size: $font_size_16; font-weight: $font_weight_medium; line-height: $line_height_24; letter-spacing: $letter_spacing_normal; }
|
|
64
|
+
@mixin body_medium { font-size: $font_size_15; font-weight: $font_weight_regular; line-height: $line_height_22_5; letter-spacing: $letter_spacing_normal; }
|
|
65
|
+
@mixin body_medium_medium { font-size: $font_size_15; font-weight: $font_weight_medium; line-height: $line_height_22_5; letter-spacing: $letter_spacing_normal; }
|
|
66
|
+
@mixin body_small { font-size: $font_size_14; font-weight: $font_weight_regular; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
|
|
67
|
+
@mixin body_small_medium { font-size: $font_size_14; font-weight: $font_weight_medium; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
|
|
72
68
|
|
|
73
|
-
@mixin
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
line-height: $
|
|
77
|
-
}
|
|
69
|
+
@mixin label_large { font-size: $font_size_14; font-weight: $font_weight_regular; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
|
|
70
|
+
@mixin label_large_medium { font-size: $font_size_14; font-weight: $font_weight_medium; line-height: $line_height_20; letter-spacing: $letter_spacing_normal; }
|
|
71
|
+
@mixin label_medium { font-size: $font_size_13; font-weight: $font_weight_regular; line-height: $line_height_18; letter-spacing: $letter_spacing_normal; }
|
|
72
|
+
@mixin label_medium_medium { font-size: $font_size_13; font-weight: $font_weight_medium; line-height: $line_height_18; letter-spacing: $letter_spacing_normal; }
|
|
73
|
+
@mixin label_small { font-size: $font_size_12; font-weight: $font_weight_regular; line-height: $line_height_16; letter-spacing: $letter_spacing_normal; }
|
|
74
|
+
@mixin label_small_medium { font-size: $font_size_12; font-weight: $font_weight_medium; line-height: $line_height_16; letter-spacing: $letter_spacing_normal; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: #000000;--bt-color-primary-hover: #333333;--bt-color-background: #ffffff;--bt-color-background-secondary: #fafafa;--bt-color-background-neutral: #F3F3F3;--bt-color-background-muted: #f0f0f0;--bt-color-text-primary: #1a1a1a;--bt-color-text-secondary: #666666;--bt-color-text-tertiary: #999999;--bt-text-inverse: #ffffff;--bt-text-disabled: #9ca3af;--bt-color-border: #e5e5e5;--bt-color-border-light: rgba(0, 0, 0, 0.08);--bt-color-success: #10b981;--bt-color-error: #ef4444;--bt-color-warning: #f59e0b;--bt-color-info: #3b82f6;--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-spacing-xs: 0.25rem;--bt-spacing-sm: 0.5rem;--bt-spacing-md: 0.75rem;--bt-spacing-lg: 1rem;--bt-spacing-xl: 1.25rem;--bt-spacing-2xl: 1.5rem;--bt-spacing-3xl: 1.75rem;--bt-font-family: Pretendard, sans-serif;--bt-font-size-xs: 0.75rem;--bt-font-size-sm: 0.875rem;--bt-font-size-base: 0.9375rem;--bt-font-size-md: 1rem;--bt-font-size-lg: 1.125rem;--bt-font-size-xl: 1.25rem;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-font-weight-bold: 700;--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);--bt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--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: 10000;--bt-z-toast: 10001}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.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-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.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-primary)}.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-primary);border-color:var(--bt-color-primary)}.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-background);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;inset: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-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.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-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-switch__thumb{width:18px;height:18px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base);transform:translateX(0)}.bt-switch--on{background:var(--bt-color-primary)}.bt-switch--on .bt-switch__thumb{transform:translateX(18px)}.bt-switch--sm{width:34px;height:18px}.bt-switch--sm .bt-switch__thumb{width:14px;height:14px}.bt-switch--sm.bt-switch--on .bt-switch__thumb{transform:translateX(16px)}.bt-switch--lg{width:48px;height:26px}.bt-switch--lg .bt-switch__thumb{width:22px;height:22px}.bt-switch--lg.bt-switch--on .bt-switch__thumb{transform:translateX(22px)}.bt-switch--disabled{opacity:.6;cursor:not-allowed}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-md);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;inset: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{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-shadow-lg);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);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__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;inset: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-shadow-xl);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-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;inset: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-primary)}.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-shadow-lg)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}
|
|
1
|
+
@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: #121212;--bt-color-on-primary: #FFFFFF;--bt-color-background: #FFFFFF;--bt-color-background-dim: #F4F4F4;--bt-color-background-overlay: rgba(0, 0, 0, 0.5);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-border: #E5E5E5;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-hover: rgba(0, 0, 0, 0.05);--bt-color-pressed: rgba(26, 26, 26, 0.12);--bt-color-success: #10B981;--bt-color-error: #EF4444;--bt-color-warning: #F59E0B;--bt-color-info: #3B82F6;--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-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-line-height-20: 20px;--bt-line-height-24: 24px;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-shadow-md: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-shadow-lg: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-shadow-xl: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.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-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.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-primary)}.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-primary);border-color:var(--bt-color-primary)}.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-background);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;inset: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-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.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-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-switch__thumb{width:18px;height:18px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base);transform:translateX(0)}.bt-switch--on{background:var(--bt-color-primary)}.bt-switch--on .bt-switch__thumb{transform:translateX(18px)}.bt-switch--sm{width:34px;height:18px}.bt-switch--sm .bt-switch__thumb{width:14px;height:14px}.bt-switch--sm.bt-switch--on .bt-switch__thumb{transform:translateX(16px)}.bt-switch--lg{width:48px;height:26px}.bt-switch--lg .bt-switch__thumb{width:22px;height:22px}.bt-switch--lg.bt-switch--on .bt-switch__thumb{transform:translateX(22px)}.bt-switch--disabled{opacity:.6;cursor:not-allowed}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-shadow-md);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;inset: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{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-shadow-lg);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);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__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;inset: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-shadow-xl);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-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;inset: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-primary)}.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-shadow-lg)}.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}
|