@likelion-design/ui 0.1.7 → 1.0.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.
Files changed (53) hide show
  1. package/README.md +29 -11
  2. package/dist/chunk-H3TEQK57.mjs +2 -0
  3. package/dist/colors.css.css +2 -0
  4. package/dist/colors.css.css.map +1 -0
  5. package/dist/colors.css.d.mts +2 -0
  6. package/dist/colors.css.d.ts +2 -0
  7. package/dist/index.css +1 -1215
  8. package/dist/index.css.map +1 -1
  9. package/dist/index.d.mts +245 -5
  10. package/dist/index.d.ts +245 -5
  11. package/dist/index.js +1 -406
  12. package/dist/index.js.map +1 -1
  13. package/dist/index.mjs +1 -19
  14. package/dist/index.mjs.map +1 -1
  15. package/dist/tailwind-preset.d.mts +320 -4
  16. package/dist/tailwind-preset.d.ts +320 -4
  17. package/dist/tailwind-preset.js +1 -57
  18. package/dist/tailwind-preset.js.map +1 -1
  19. package/dist/tailwind-preset.mjs +1 -64
  20. package/dist/tailwind-preset.mjs.map +1 -1
  21. package/package.json +20 -25
  22. package/dist/Button.css +0 -415
  23. package/dist/Button.css.map +0 -1
  24. package/dist/Button.d.mts +0 -63
  25. package/dist/Button.d.ts +0 -63
  26. package/dist/Button.js +0 -232
  27. package/dist/Button.js.map +0 -1
  28. package/dist/Button.mjs +0 -12
  29. package/dist/Header.css +0 -450
  30. package/dist/Header.css.map +0 -1
  31. package/dist/Header.d.mts +0 -14
  32. package/dist/Header.d.ts +0 -14
  33. package/dist/Header.js +0 -160
  34. package/dist/Header.js.map +0 -1
  35. package/dist/Header.mjs +0 -9
  36. package/dist/Header.mjs.map +0 -1
  37. package/dist/Page.css +0 -516
  38. package/dist/Page.css.map +0 -1
  39. package/dist/Page.d.mts +0 -5
  40. package/dist/Page.d.ts +0 -5
  41. package/dist/Page.js +0 -262
  42. package/dist/Page.js.map +0 -1
  43. package/dist/Page.mjs +0 -10
  44. package/dist/Page.mjs.map +0 -1
  45. package/dist/chunk-22Q3FVTV.mjs +0 -43
  46. package/dist/chunk-22Q3FVTV.mjs.map +0 -1
  47. package/dist/chunk-4T4Z32IO.mjs +0 -102
  48. package/dist/chunk-4T4Z32IO.mjs.map +0 -1
  49. package/dist/chunk-6BR7YIWI.mjs +0 -181
  50. package/dist/chunk-6BR7YIWI.mjs.map +0 -1
  51. package/dist/chunk-DDHQ5ZFF.mjs +0 -75
  52. package/dist/chunk-DDHQ5ZFF.mjs.map +0 -1
  53. /package/dist/{Button.mjs.map → chunk-H3TEQK57.mjs.map} +0 -0
package/dist/index.css CHANGED
@@ -1,1216 +1,2 @@
1
- /* src/stories/button.module.css */
2
- .storybook-button {
3
- display: inline-block;
4
- cursor: pointer;
5
- border: 0;
6
- border-radius: 3em;
7
- font-weight: 700;
8
- line-height: 1;
9
- font-family:
10
- "Nunito Sans",
11
- "Helvetica Neue",
12
- Helvetica,
13
- Arial,
14
- sans-serif;
15
- }
16
- .storybook-button--primary {
17
- background-color: #555ab9;
18
- color: white;
19
- }
20
- .storybook-button--secondary {
21
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
22
- background-color: transparent;
23
- color: #333;
24
- }
25
- .storybook-button--small {
26
- padding: 10px 16px;
27
- font-size: 12px;
28
- }
29
- .storybook-button--medium {
30
- padding: 11px 20px;
31
- font-size: 14px;
32
- }
33
- .storybook-button--large {
34
- padding: 12px 24px;
35
- font-size: 16px;
36
- }
37
- .action-button {
38
- display: inline-flex;
39
- align-items: center;
40
- justify-content: center;
41
- gap: 8px;
42
- font-family:
43
- "Pretendard",
44
- -apple-system,
45
- BlinkMacSystemFont,
46
- system-ui,
47
- sans-serif;
48
- font-weight: 600;
49
- border-radius: 8px;
50
- border: none;
51
- cursor: pointer;
52
- transition: all 0.2s ease;
53
- min-width: fit-content;
54
- white-space: nowrap;
55
- }
56
- .action-button--xlarge {
57
- height: 56px;
58
- padding: 0 24px;
59
- font-size: 17px;
60
- min-width: 34px;
61
- }
62
- .action-button--large {
63
- height: 48px;
64
- padding: 0 24px;
65
- font-size: 17px;
66
- min-width: 34px;
67
- }
68
- .action-button--medium {
69
- height: 36px;
70
- padding: 0 20px;
71
- font-size: 15px;
72
- min-width: 34px;
73
- }
74
- .action-button--small {
75
- height: 28px;
76
- padding: 0 16px;
77
- font-size: 13px;
78
- min-width: 30px;
79
- }
80
- .action-button--primary.action-button--solid {
81
- background-color: var(--color-semantic-bg-primary);
82
- color: var(--color-semantic-fg-inverted);
83
- }
84
- .action-button--primary.action-button--solid:hover:not(:disabled),
85
- .action-button--primary.action-button--solid.action-button--hovered:not(:disabled) {
86
- background-color: var(--color-semantic-bg-primary-hovered);
87
- }
88
- .action-button--primary.action-button--solid:disabled,
89
- .action-button--primary.action-button--solid.action-button--disabled {
90
- background-color: var(--color-semantic-bg-normal-disabled);
91
- color: var(--color-semantic-fg-disabled);
92
- cursor: not-allowed;
93
- }
94
- .action-button--primary.action-button--outline {
95
- background-color: transparent;
96
- color: var(--color-semantic-fg-primary);
97
- border: 1px solid var(--color-semantic-border-normal);
98
- }
99
- .action-button--primary.action-button--outline:hover:not(:disabled),
100
- .action-button--primary.action-button--outline.action-button--hovered:not(:disabled) {
101
- background-color: var(--color-semantic-bg-normal-hovered);
102
- }
103
- .action-button--primary.action-button--outline:disabled,
104
- .action-button--primary.action-button--outline.action-button--disabled {
105
- color: var(--color-semantic-fg-disabled);
106
- border-color: var(--color-semantic-border-weak);
107
- background-color: var(--color-semantic-bg-white);
108
- cursor: not-allowed;
109
- }
110
- .action-button--primary.action-button--ghost {
111
- background-color: transparent;
112
- color: var(--color-semantic-fg-primary);
113
- }
114
- .action-button--primary.action-button--ghost:hover:not(:disabled),
115
- .action-button--primary.action-button--ghost.action-button--hovered:not(:disabled) {
116
- background-color: var(--color-semantic-bg-primary-weak);
117
- }
118
- .action-button--primary.action-button--ghost:disabled,
119
- .action-button--primary.action-button--ghost.action-button--disabled {
120
- color: var(--color-semantic-fg-disabled);
121
- background-color: var(--color-semantic-bg-white);
122
- cursor: not-allowed;
123
- }
124
- .action-button--neutral.action-button--solid {
125
- background-color: var(--color-semantic-bg-inverted);
126
- color: var(--color-semantic-fg-white);
127
- }
128
- .action-button--neutral.action-button--solid:hover:not(:disabled),
129
- .action-button--neutral.action-button--solid.action-button--hovered:not(:disabled) {
130
- background-color: var(--color-semantic-bg-inverted);
131
- }
132
- .action-button--neutral.action-button--solid:disabled,
133
- .action-button--neutral.action-button--solid.action-button--disabled {
134
- background-color: var(--color-semantic-bg-normal-disabled);
135
- color: var(--color-semantic-fg-disabled);
136
- cursor: not-allowed;
137
- }
138
- .action-button--neutral.action-button--outline {
139
- background-color: transparent;
140
- color: var(--color-semantic-fg-normal);
141
- border: 1px solid var(--color-semantic-border-normal);
142
- }
143
- .action-button--neutral.action-button--outline:hover:not(:disabled),
144
- .action-button--neutral.action-button--outline.action-button--hovered:not(:disabled) {
145
- background-color: var(--color-semantic-bg-normal-hovered);
146
- }
147
- .action-button--neutral.action-button--outline:disabled,
148
- .action-button--neutral.action-button--outline.action-button--disabled {
149
- color: var(--color-semantic-fg-disabled);
150
- border-color: var(--color-semantic-border-weak);
151
- background-color: var(--color-semantic-bg-white);
152
- cursor: not-allowed;
153
- }
154
- .action-button--neutral.action-button--ghost {
155
- background-color: transparent;
156
- color: var(--color-semantic-fg-normal);
157
- }
158
- .action-button--neutral.action-button--ghost:hover:not(:disabled),
159
- .action-button--neutral.action-button--ghost.action-button--hovered:not(:disabled) {
160
- background-color: var(--color-semantic-bg-normal-hovered);
161
- }
162
- .action-button--neutral.action-button--ghost:disabled,
163
- .action-button--neutral.action-button--ghost.action-button--disabled {
164
- color: var(--color-semantic-fg-disabled);
165
- cursor: not-allowed;
166
- }
167
- .action-button--secondary.action-button--solid {
168
- background-color: var(--color-semantic-bg-normal);
169
- color: var(--color-semantic-fg-normal);
170
- }
171
- .action-button--secondary.action-button--solid:hover:not(:disabled),
172
- .action-button--secondary.action-button--solid.action-button--hovered:not(:disabled) {
173
- background-color: var(--color-semantic-bg-normal-hovered);
174
- }
175
- .action-button--secondary.action-button--solid:disabled,
176
- .action-button--secondary.action-button--solid.action-button--disabled {
177
- background-color: var(--color-semantic-bg-normal-disabled);
178
- color: var(--color-semantic-fg-disabled);
179
- cursor: not-allowed;
180
- }
181
- .action-button--loading {
182
- position: relative;
183
- pointer-events: none;
184
- }
185
- .action-button--loading .action-button__content {
186
- opacity: 0;
187
- }
188
- .action-button__content {
189
- display: inline-flex;
190
- align-items: center;
191
- gap: 8px;
192
- }
193
- .action-button__spinner {
194
- position: absolute;
195
- top: 50%;
196
- left: 50%;
197
- transform: translate(-50%, -50%);
198
- display: inline-flex;
199
- align-items: center;
200
- justify-content: center;
201
- }
202
- .action-button__spinner-svg {
203
- width: 20px;
204
- height: 20px;
205
- animation: spin 1s linear infinite;
206
- }
207
- @keyframes spin {
208
- from {
209
- transform: rotate(0deg);
210
- }
211
- to {
212
- transform: rotate(360deg);
213
- }
214
- }
215
- .action-button__spinner-circle {
216
- opacity: 1;
217
- }
218
- .action-button--primary.action-button--solid.action-button--loading {
219
- background-color: var(--color-semantic-bg-primary-hovered);
220
- color: var(--color-semantic-fg-inverted);
221
- }
222
- .action-button--primary.action-button--outline.action-button--loading {
223
- background-color: var(--color-semantic-bg-normal-hovered);
224
- color: var(--color-semantic-fg-primary);
225
- }
226
- .action-button--primary.action-button--ghost.action-button--loading {
227
- background-color: var(--color-semantic-bg-primary-weak);
228
- color: var(--color-semantic-fg-primary);
229
- }
230
- .action-button--neutral.action-button--solid.action-button--loading {
231
- background-color: var(--color-semantic-bg-inverted);
232
- color: var(--color-semantic-fg-white);
233
- }
234
- .action-button--neutral.action-button--outline.action-button--loading {
235
- background-color: var(--color-semantic-bg-normal-hovered);
236
- color: var(--color-semantic-fg-normal);
237
- }
238
- .action-button--neutral.action-button--ghost.action-button--loading {
239
- background-color: var(--color-semantic-bg-normal-hovered);
240
- color: var(--color-semantic-fg-normal);
241
- }
242
- .action-button--secondary.action-button--solid.action-button--loading {
243
- background-color: var(--color-semantic-bg-normal-hovered);
244
- color: var(--color-semantic-fg-normal);
245
- }
246
- .action-button__prefix-icon,
247
- .action-button__suffix-icon {
248
- display: inline-flex;
249
- align-items: center;
250
- flex-shrink: 0;
251
- }
252
- .action-button--small .action-button__prefix-icon,
253
- .action-button--small .action-button__suffix-icon {
254
- width: 16px;
255
- height: 16px;
256
- }
257
- .action-button--medium .action-button__prefix-icon,
258
- .action-button--medium .action-button__suffix-icon {
259
- width: 18px;
260
- height: 18px;
261
- }
262
- .action-button--large .action-button__prefix-icon,
263
- .action-button--large .action-button__suffix-icon {
264
- width: 20px;
265
- height: 20px;
266
- }
267
- .action-button--xlarge .action-button__prefix-icon,
268
- .action-button--xlarge .action-button__suffix-icon {
269
- width: 24px;
270
- height: 24px;
271
- }
272
- .action-button__label {
273
- display: inline-flex;
274
- align-items: center;
275
- }
276
- .icon-button {
277
- display: inline-flex;
278
- align-items: center;
279
- justify-content: center;
280
- font-family:
281
- "Pretendard",
282
- -apple-system,
283
- BlinkMacSystemFont,
284
- system-ui,
285
- sans-serif;
286
- border: none;
287
- cursor: pointer;
288
- transition: all 0.2s ease;
289
- padding: 0;
290
- flex-shrink: 0;
291
- }
292
- .icon-button--xlarge {
293
- width: 56px;
294
- height: 56px;
295
- border-radius: 8px;
296
- }
297
- .icon-button--large {
298
- width: 48px;
299
- height: 48px;
300
- border-radius: 6px;
301
- }
302
- .icon-button--medium {
303
- width: 36px;
304
- height: 36px;
305
- border-radius: 4px;
306
- }
307
- .icon-button--small {
308
- width: 28px;
309
- height: 28px;
310
- border-radius: 4px;
311
- }
312
- .icon-button__icon {
313
- display: inline-flex;
314
- align-items: center;
315
- justify-content: center;
316
- width: 100%;
317
- height: 100%;
318
- }
319
- .icon-button--xlarge .icon-button__icon,
320
- .icon-button--large .icon-button__icon {
321
- width: 24px;
322
- height: 24px;
323
- }
324
- .icon-button--medium .icon-button__icon {
325
- width: 20px;
326
- height: 20px;
327
- }
328
- .icon-button--small .icon-button__icon {
329
- width: 16px;
330
- height: 16px;
331
- }
332
- .icon-button--primary.icon-button--solid {
333
- background-color: var(--color-semantic-bg-primary);
334
- color: var(--color-semantic-fg-inverted);
335
- }
336
- .icon-button--primary.icon-button--solid:hover:not(:disabled),
337
- .icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {
338
- background-color: var(--color-semantic-bg-primary-hovered);
339
- }
340
- .icon-button--primary.icon-button--solid:disabled,
341
- .icon-button--primary.icon-button--solid.icon-button--disabled {
342
- background-color: var(--color-semantic-bg-normal-disabled);
343
- color: var(--color-semantic-fg-disabled);
344
- cursor: not-allowed;
345
- }
346
- .icon-button--primary.icon-button--outline {
347
- background-color: transparent;
348
- color: var(--color-semantic-fg-primary);
349
- border: 1px solid var(--color-semantic-border-normal);
350
- }
351
- .icon-button--primary.icon-button--outline:hover:not(:disabled),
352
- .icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {
353
- background-color: var(--color-semantic-bg-normal-hovered);
354
- }
355
- .icon-button--primary.icon-button--outline:disabled,
356
- .icon-button--primary.icon-button--outline.icon-button--disabled {
357
- color: var(--color-semantic-fg-disabled);
358
- border-color: var(--color-semantic-border-weak);
359
- background-color: var(--color-semantic-bg-white);
360
- cursor: not-allowed;
361
- }
362
- .icon-button--primary.icon-button--weak {
363
- background-color: var(--color-semantic-bg-week-primary);
364
- color: var(--color-semantic-fg-primary);
365
- }
366
- .icon-button--primary.icon-button--weak:hover:not(:disabled),
367
- .icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {
368
- background-color: var(--color-semantic-bg-week-primary-hovered);
369
- }
370
- .icon-button--neutral.icon-button--solid {
371
- background-color: var(--color-semantic-bg-inverted);
372
- color: var(--color-semantic-fg-white);
373
- }
374
- .icon-button--neutral.icon-button--solid:hover:not(:disabled),
375
- .icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {
376
- background-color: var(--color-semantic-bg-inverted);
377
- }
378
- .icon-button--neutral.icon-button--solid:disabled,
379
- .icon-button--neutral.icon-button--solid.icon-button--disabled {
380
- background-color: var(--color-semantic-bg-normal-disabled);
381
- color: var(--color-semantic-fg-disabled);
382
- cursor: not-allowed;
383
- }
384
- .icon-button--neutral.icon-button--outline {
385
- background-color: transparent;
386
- color: var(--color-semantic-fg-normal);
387
- border: 1px solid var(--color-semantic-border-normal);
388
- }
389
- .icon-button--neutral.icon-button--outline:hover:not(:disabled),
390
- .icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {
391
- background-color: var(--color-semantic-bg-normal-hovered);
392
- }
393
- .icon-button--neutral.icon-button--outline:disabled,
394
- .icon-button--neutral.icon-button--outline.icon-button--disabled {
395
- color: var(--color-semantic-fg-disabled);
396
- border-color: var(--color-semantic-border-weak);
397
- background-color: var(--color-semantic-bg-white);
398
- cursor: not-allowed;
399
- }
400
- .icon-button--neutral.icon-button--weak {
401
- background-color: var(--color-semantic-bg-week-neutral-dark);
402
- color: var(--color-semantic-fg-normal);
403
- }
404
- .icon-button--neutral.icon-button--weak:hover:not(:disabled),
405
- .icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {
406
- background-color: var(--color-semantic-bg-week-neutral-dark-hovered);
407
- }
408
- .icon-button--neutral.icon-button--weak.dark {
409
- color: var(--color-semantic-fg-white);
410
- }
411
- .icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),
412
- .icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled) {
413
- background-color: rgba(255, 255, 255, 0.1);
414
- }
415
-
416
- /* src/stories/header.module.css */
417
- .storybook-header {
418
- display: flex;
419
- justify-content: space-between;
420
- align-items: center;
421
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
422
- padding: 15px 20px;
423
- font-family:
424
- "Nunito Sans",
425
- "Helvetica Neue",
426
- Helvetica,
427
- Arial,
428
- sans-serif;
429
- }
430
- .storybook-header svg {
431
- display: inline-block;
432
- vertical-align: top;
433
- }
434
- .storybook-header h1 {
435
- display: inline-block;
436
- vertical-align: top;
437
- margin: 6px 0 6px 10px;
438
- font-weight: 700;
439
- font-size: 20px;
440
- line-height: 1;
441
- }
442
- .storybook-header button + button {
443
- margin-left: 10px;
444
- }
445
- .storybook-header .welcome {
446
- margin-right: 10px;
447
- color: #333;
448
- font-size: 14px;
449
- }
450
-
451
- /* src/stories/page.module.css */
452
- .storybook-page {
453
- margin: 0 auto;
454
- padding: 48px 20px;
455
- max-width: 600px;
456
- color: #333;
457
- font-size: 14px;
458
- line-height: 24px;
459
- font-family:
460
- "Nunito Sans",
461
- "Helvetica Neue",
462
- Helvetica,
463
- Arial,
464
- sans-serif;
465
- }
466
- .storybook-page h2 {
467
- display: inline-block;
468
- vertical-align: top;
469
- margin: 0 0 4px;
470
- font-weight: 700;
471
- font-size: 32px;
472
- line-height: 1;
473
- }
474
- .storybook-page p {
475
- margin: 1em 0;
476
- }
477
- .storybook-page a {
478
- color: inherit;
479
- }
480
- .storybook-page ul {
481
- margin: 1em 0;
482
- padding-left: 30px;
483
- }
484
- .storybook-page li {
485
- margin-bottom: 8px;
486
- }
487
- .storybook-page .tip {
488
- display: inline-block;
489
- vertical-align: top;
490
- margin-right: 10px;
491
- border-radius: 1em;
492
- background: #e7fdd8;
493
- padding: 4px 12px;
494
- color: #357a14;
495
- font-weight: 700;
496
- font-size: 11px;
497
- line-height: 12px;
498
- }
499
- .storybook-page .tip-wrapper {
500
- margin-top: 40px;
501
- margin-bottom: 40px;
502
- font-size: 13px;
503
- line-height: 20px;
504
- }
505
- .storybook-page .tip-wrapper svg {
506
- display: inline-block;
507
- vertical-align: top;
508
- margin-top: 3px;
509
- margin-right: 4px;
510
- width: 12px;
511
- height: 12px;
512
- }
513
- .storybook-page .tip-wrapper svg path {
514
- fill: #1ea7fd;
515
- }
516
-
517
- /* src/styles.css */
518
- :root {
519
- --background: #ffffff;
520
- --foreground: #171717;
521
- --color-background: var(--background);
522
- --color-foreground: var(--foreground);
523
- --font-sans: var(--font-geist-sans);
524
- --font-mono: var(--font-geist-mono);
525
- --color-static-white: #ffffff;
526
- --color-static-black: #000000;
527
- --color-static-gradation-primary:
528
- linear-gradient(
529
-
530
- 180deg,
531
- #ffc74e 0%,
532
- var(--color-primary-500) 100% );
533
- --color-static-gradation-dark:
534
- radial-gradient(
535
-
536
- circle,
537
- #191f28 0%,
538
- #993a00 100% );
539
- --color-static-gradation-black:
540
- linear-gradient(
541
-
542
- 180deg,
543
- var(--color-static-black) 0%,
544
- var(--color-static-black) 100% );
545
- --color-static-gradation-white:
546
- linear-gradient(
547
-
548
- 180deg,
549
- var(--color-static-white) 0%,
550
- var(--color-static-white) 100% );
551
- --color-static-dim: rgba(0, 0, 0, 0.5);
552
- --color-primary-50: #ffefe5;
553
- --color-primary-100: #ffdfcc;
554
- --color-primary-200: #ffbf99;
555
- --color-primary-300: #ffa066;
556
- --color-primary-400: #ff8033;
557
- --color-primary-500: #ff6000;
558
- --color-primary-600: #cc4d00;
559
- --color-primary-700: #993a00;
560
- --color-primary-800: #662600;
561
- --color-primary-900: #4d1d00;
562
- --color-gray-50: #f9fafb;
563
- --color-gray-100: #f3f4f6;
564
- --color-gray-200: #e5e7ea;
565
- --color-gray-300: #d1d6dc;
566
- --color-gray-400: #b1b8c0;
567
- --color-gray-500: #8a95a0;
568
- --color-gray-600: #6b7583;
569
- --color-gray-700: #4e5967;
570
- --color-gray-800: #333d4b;
571
- --color-gray-850: #262f3c;
572
- --color-gray-900: #191f28;
573
- --color-yellow-50: #fef7cd;
574
- --color-yellow-100: #feee9a;
575
- --color-yellow-200: #fde876;
576
- --color-yellow-300: #fdd600;
577
- --color-yellow-400: #efc100;
578
- --color-yellow-500: #be9b00;
579
- --color-yellow-600: #8c7300;
580
- --color-yellow-700: #735f00;
581
- --color-yellow-800: #574a00;
582
- --color-yellow-900: #3c3200;
583
- --color-lightgreen-50: #e9f7d4;
584
- --color-lightgreen-100: #d7f2b1;
585
- --color-lightgreen-200: #c7ec93;
586
- --color-lightgreen-300: #b0d55c;
587
- --color-lightgreen-400: #89c81b;
588
- --color-lightgreen-500: #79b116;
589
- --color-lightgreen-600: #4a7f05;
590
- --color-lightgreen-700: #2d660a;
591
- --color-lightgreen-800: #144d14;
592
- --color-lightgreen-900: #0a3c02;
593
- --color-green-50: #d3f8ef;
594
- --color-green-100: #c4f8eb;
595
- --color-green-200: #b4edde;
596
- --color-green-300: #7eddcd;
597
- --color-green-400: #4fc8b8;
598
- --color-green-500: #0da796;
599
- --color-green-600: #05806d;
600
- --color-green-700: #006d5d;
601
- --color-green-800: #005448;
602
- --color-green-900: #003c32;
603
- --color-blue-50: #dbf1ff;
604
- --color-blue-100: #ccebff;
605
- --color-blue-200: #c0e6ff;
606
- --color-blue-300: #80c6fb;
607
- --color-blue-400: #6daae7;
608
- --color-blue-500: #3d94ff;
609
- --color-blue-600: #2077e5;
610
- --color-blue-700: #045ca9;
611
- --color-blue-800: #004875;
612
- --color-blue-900: #1d3649;
613
- --color-purple-50: #f5e5ff;
614
- --color-purple-100: #f0d6ff;
615
- --color-purple-200: #eac7ff;
616
- --color-purple-300: #d7aaff;
617
- --color-purple-400: #ba8ff7;
618
- --color-purple-500: #af79dd;
619
- --color-purple-600: #9855d4;
620
- --color-purple-700: #734098;
621
- --color-purple-800: #5d327b;
622
- --color-purple-900: #412356;
623
- --color-pink-50: #ffe5ff;
624
- --color-pink-100: #ffd2ff;
625
- --color-pink-200: #ffc2ff;
626
- --color-pink-300: #ff9eee;
627
- --color-pink-400: #ef81ce;
628
- --color-pink-500: #d3689f;
629
- --color-pink-600: #c14180;
630
- --color-pink-700: #a02c6d;
631
- --color-pink-800: #7c1c58;
632
- --color-pink-900: #601146;
633
- --color-red-50: #ffe5ec;
634
- --color-red-100: #ffccd8;
635
- --color-red-200: #ffb8c9;
636
- --color-red-300: #ffa5b4;
637
- --color-red-400: #f7858e;
638
- --color-red-500: #ea6565;
639
- --color-red-600: #e12337;
640
- --color-red-700: #ad1625;
641
- --color-red-800: #8c101c;
642
- --color-red-900: #6e0a1e;
643
- --color-semantic-fg-primary: var(--color-primary-500);
644
- --color-semantic-fg-pressed: var(--color-primary-600);
645
- --color-semantic-fg-inverted: var(--color-static-white);
646
- --color-semantic-fg-strong: var(--color-static-black);
647
- --color-semantic-fg-normal: var(--color-gray-800);
648
- --color-semantic-fg-neutral: var(--color-gray-700);
649
- --color-semantic-fg-alternative: var(--color-gray-600);
650
- --color-semantic-fg-assistive: var(--color-gray-500);
651
- --color-semantic-fg-disabled: var(--color-gray-400);
652
- --color-semantic-fg-yellow: var(--color-yellow-500);
653
- --color-semantic-fg-lightgreen: var(--color-lightgreen-500);
654
- --color-semantic-fg-green: var(--color-green-500);
655
- --color-semantic-fg-blue: var(--color-blue-500);
656
- --color-semantic-fg-purple: var(--color-purple-500);
657
- --color-semantic-fg-pink: var(--color-pink-500);
658
- --color-semantic-fg-red: var(--color-red-500);
659
- --color-semantic-fg-black: var(--color-static-black);
660
- --color-semantic-fg-white: var(--color-static-white);
661
- --color-semantic-bg-normal: var(--color-gray-100);
662
- --color-semantic-bg-normal-hovered: var(--color-gray-50);
663
- --color-semantic-bg-normal-alternative: var(--color-gray-200);
664
- --color-semantic-bg-normal-assistive: var(--color-gray-50);
665
- --color-semantic-bg-normal-disabled: var(--color-gray-100);
666
- --color-semantic-bg-inverted: var(--color-gray-900);
667
- --color-semantic-bg-hovered: var(--color-gray-850);
668
- --color-semantic-bg-primary: var(--color-primary-500);
669
- --color-semantic-bg-primary-hovered: var(--color-primary-600);
670
- --color-semantic-bg-primary-weak: var(--color-primary-50);
671
- --color-semantic-bg-lightgreen: var(--color-lightgreen-50);
672
- --color-semantic-bg-yellow: var(--color-yellow-50);
673
- --color-semantic-bg-green: var(--color-green-50);
674
- --color-semantic-bg-blue: var(--color-blue-50);
675
- --color-semantic-bg-purple: var(--color-purple-50);
676
- --color-semantic-bg-pink: var(--color-pink-50);
677
- --color-semantic-bg-red: var(--color-red-50);
678
- --color-semantic-bg-black: var(--color-static-black);
679
- --color-semantic-bg-white: var(--color-static-white);
680
- --color-semantic-bg-week-primary: rgba(255, 96, 0, 0.08);
681
- --color-semantic-bg-week-primary-hovered: rgba(255, 96, 0, 0.16);
682
- --color-semantic-bg-week-neutral-dark: rgba(0, 0, 0, 0.08);
683
- --color-semantic-bg-week-neutral-dark-hovered: rgba(0, 0, 0, 0.16);
684
- --color-semantic-bg-week-neutral-light: rgba(255, 255, 255, 0.08);
685
- --color-semantic-bg-week-neutral-light-hovered: rgba(255, 255, 255, 0.16);
686
- --color-semantic-border-primary: var(--color-primary-500);
687
- --color-semantic-border-strong: var(--color-gray-800);
688
- --color-semantic-border-normal: var(--color-gray-300);
689
- --color-semantic-border-weak: var(--color-gray-200);
690
- --color-semantic-border-white: var(--color-static-white);
691
- --color-semantic-border-black: var(--color-static-black);
692
- --color-semantic-border-inverted: var(--color-gray-700);
693
- --color-semantic-border-inverted-strong: var(--color-gray-600);
694
- --color-semantic-info-negative: var(--color-red-600);
695
- --color-semantic-info-positive: var(--color-green-500);
696
- --color-semantic-info-black: var(--color-static-black);
697
- --color-semantic-info-white: var(--color-static-white);
698
- }
699
- @media (prefers-color-scheme: dark) {
700
- :root {
701
- --background: #0a0a0a;
702
- --foreground: #ededed;
703
- }
704
- }
705
- .storybook-button {
706
- display: inline-block;
707
- cursor: pointer;
708
- border: 0;
709
- border-radius: 3em;
710
- font-weight: 700;
711
- line-height: 1;
712
- font-family:
713
- "Nunito Sans",
714
- "Helvetica Neue",
715
- Helvetica,
716
- Arial,
717
- sans-serif;
718
- }
719
- .storybook-button--primary {
720
- background-color: #555ab9;
721
- color: white;
722
- }
723
- .storybook-button--secondary {
724
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
725
- background-color: transparent;
726
- color: #333;
727
- }
728
- .storybook-button--small {
729
- padding: 10px 16px;
730
- font-size: 12px;
731
- }
732
- .storybook-button--medium {
733
- padding: 11px 20px;
734
- font-size: 14px;
735
- }
736
- .storybook-button--large {
737
- padding: 12px 24px;
738
- font-size: 16px;
739
- }
740
- .action-button {
741
- display: inline-flex;
742
- align-items: center;
743
- justify-content: center;
744
- gap: 8px;
745
- font-family:
746
- "Pretendard",
747
- -apple-system,
748
- BlinkMacSystemFont,
749
- system-ui,
750
- sans-serif;
751
- font-weight: 600;
752
- border-radius: 8px;
753
- border: none;
754
- cursor: pointer;
755
- transition: all 0.2s ease;
756
- min-width: fit-content;
757
- white-space: nowrap;
758
- }
759
- .action-button--xlarge {
760
- height: 56px;
761
- padding: 0 24px;
762
- font-size: 17px;
763
- min-width: 34px;
764
- }
765
- .action-button--large {
766
- height: 48px;
767
- padding: 0 24px;
768
- font-size: 17px;
769
- min-width: 34px;
770
- }
771
- .action-button--medium {
772
- height: 36px;
773
- padding: 0 20px;
774
- font-size: 15px;
775
- min-width: 34px;
776
- }
777
- .action-button--small {
778
- height: 28px;
779
- padding: 0 16px;
780
- font-size: 13px;
781
- min-width: 30px;
782
- }
783
- .action-button--primary.action-button--solid {
784
- background-color: var(--color-semantic-bg-primary);
785
- color: var(--color-semantic-fg-inverted);
786
- }
787
- .action-button--primary.action-button--solid:hover:not(:disabled),
788
- .action-button--primary.action-button--solid.action-button--hovered:not(:disabled) {
789
- background-color: var(--color-semantic-bg-primary-hovered);
790
- }
791
- .action-button--primary.action-button--solid:disabled,
792
- .action-button--primary.action-button--solid.action-button--disabled {
793
- background-color: var(--color-semantic-bg-normal-disabled);
794
- color: var(--color-semantic-fg-disabled);
795
- cursor: not-allowed;
796
- }
797
- .action-button--primary.action-button--outline {
798
- background-color: transparent;
799
- color: var(--color-semantic-fg-primary);
800
- border: 1px solid var(--color-semantic-border-normal);
801
- }
802
- .action-button--primary.action-button--outline:hover:not(:disabled),
803
- .action-button--primary.action-button--outline.action-button--hovered:not(:disabled) {
804
- background-color: var(--color-semantic-bg-normal-hovered);
805
- }
806
- .action-button--primary.action-button--outline:disabled,
807
- .action-button--primary.action-button--outline.action-button--disabled {
808
- color: var(--color-semantic-fg-disabled);
809
- border-color: var(--color-semantic-border-weak);
810
- background-color: var(--color-semantic-bg-white);
811
- cursor: not-allowed;
812
- }
813
- .action-button--primary.action-button--ghost {
814
- background-color: transparent;
815
- color: var(--color-semantic-fg-primary);
816
- }
817
- .action-button--primary.action-button--ghost:hover:not(:disabled),
818
- .action-button--primary.action-button--ghost.action-button--hovered:not(:disabled) {
819
- background-color: var(--color-semantic-bg-primary-weak);
820
- }
821
- .action-button--primary.action-button--ghost:disabled,
822
- .action-button--primary.action-button--ghost.action-button--disabled {
823
- color: var(--color-semantic-fg-disabled);
824
- background-color: var(--color-semantic-bg-white);
825
- cursor: not-allowed;
826
- }
827
- .action-button--neutral.action-button--solid {
828
- background-color: var(--color-semantic-bg-inverted);
829
- color: var(--color-semantic-fg-white);
830
- }
831
- .action-button--neutral.action-button--solid:hover:not(:disabled),
832
- .action-button--neutral.action-button--solid.action-button--hovered:not(:disabled) {
833
- background-color: var(--color-semantic-bg-inverted);
834
- }
835
- .action-button--neutral.action-button--solid:disabled,
836
- .action-button--neutral.action-button--solid.action-button--disabled {
837
- background-color: var(--color-semantic-bg-normal-disabled);
838
- color: var(--color-semantic-fg-disabled);
839
- cursor: not-allowed;
840
- }
841
- .action-button--neutral.action-button--outline {
842
- background-color: transparent;
843
- color: var(--color-semantic-fg-normal);
844
- border: 1px solid var(--color-semantic-border-normal);
845
- }
846
- .action-button--neutral.action-button--outline:hover:not(:disabled),
847
- .action-button--neutral.action-button--outline.action-button--hovered:not(:disabled) {
848
- background-color: var(--color-semantic-bg-normal-hovered);
849
- }
850
- .action-button--neutral.action-button--outline:disabled,
851
- .action-button--neutral.action-button--outline.action-button--disabled {
852
- color: var(--color-semantic-fg-disabled);
853
- border-color: var(--color-semantic-border-weak);
854
- background-color: var(--color-semantic-bg-white);
855
- cursor: not-allowed;
856
- }
857
- .action-button--neutral.action-button--ghost {
858
- background-color: transparent;
859
- color: var(--color-semantic-fg-normal);
860
- }
861
- .action-button--neutral.action-button--ghost:hover:not(:disabled),
862
- .action-button--neutral.action-button--ghost.action-button--hovered:not(:disabled) {
863
- background-color: var(--color-semantic-bg-normal-hovered);
864
- }
865
- .action-button--neutral.action-button--ghost:disabled,
866
- .action-button--neutral.action-button--ghost.action-button--disabled {
867
- color: var(--color-semantic-fg-disabled);
868
- cursor: not-allowed;
869
- }
870
- .action-button--secondary.action-button--solid {
871
- background-color: var(--color-semantic-bg-normal);
872
- color: var(--color-semantic-fg-normal);
873
- }
874
- .action-button--secondary.action-button--solid:hover:not(:disabled),
875
- .action-button--secondary.action-button--solid.action-button--hovered:not(:disabled) {
876
- background-color: var(--color-semantic-bg-normal-hovered);
877
- }
878
- .action-button--secondary.action-button--solid:disabled,
879
- .action-button--secondary.action-button--solid.action-button--disabled {
880
- background-color: var(--color-semantic-bg-normal-disabled);
881
- color: var(--color-semantic-fg-disabled);
882
- cursor: not-allowed;
883
- }
884
- .action-button--loading {
885
- position: relative;
886
- pointer-events: none;
887
- }
888
- .action-button--loading .action-button__content {
889
- opacity: 0;
890
- }
891
- .action-button__content {
892
- display: inline-flex;
893
- align-items: center;
894
- gap: 8px;
895
- }
896
- .action-button__spinner {
897
- position: absolute;
898
- top: 50%;
899
- left: 50%;
900
- transform: translate(-50%, -50%);
901
- display: inline-flex;
902
- align-items: center;
903
- justify-content: center;
904
- }
905
- .action-button__spinner-svg {
906
- width: 20px;
907
- height: 20px;
908
- animation: spin 1s linear infinite;
909
- }
910
- @keyframes spin {
911
- from {
912
- transform: rotate(0deg);
913
- }
914
- to {
915
- transform: rotate(360deg);
916
- }
917
- }
918
- .action-button__spinner-circle {
919
- opacity: 1;
920
- }
921
- .action-button--primary.action-button--solid.action-button--loading {
922
- background-color: var(--color-semantic-bg-primary-hovered);
923
- color: var(--color-semantic-fg-inverted);
924
- }
925
- .action-button--primary.action-button--outline.action-button--loading {
926
- background-color: var(--color-semantic-bg-normal-hovered);
927
- color: var(--color-semantic-fg-primary);
928
- }
929
- .action-button--primary.action-button--ghost.action-button--loading {
930
- background-color: var(--color-semantic-bg-primary-weak);
931
- color: var(--color-semantic-fg-primary);
932
- }
933
- .action-button--neutral.action-button--solid.action-button--loading {
934
- background-color: var(--color-semantic-bg-inverted);
935
- color: var(--color-semantic-fg-white);
936
- }
937
- .action-button--neutral.action-button--outline.action-button--loading {
938
- background-color: var(--color-semantic-bg-normal-hovered);
939
- color: var(--color-semantic-fg-normal);
940
- }
941
- .action-button--neutral.action-button--ghost.action-button--loading {
942
- background-color: var(--color-semantic-bg-normal-hovered);
943
- color: var(--color-semantic-fg-normal);
944
- }
945
- .action-button--secondary.action-button--solid.action-button--loading {
946
- background-color: var(--color-semantic-bg-normal-hovered);
947
- color: var(--color-semantic-fg-normal);
948
- }
949
- .action-button__prefix-icon,
950
- .action-button__suffix-icon {
951
- display: inline-flex;
952
- align-items: center;
953
- flex-shrink: 0;
954
- }
955
- .action-button--small .action-button__prefix-icon,
956
- .action-button--small .action-button__suffix-icon {
957
- width: 16px;
958
- height: 16px;
959
- }
960
- .action-button--medium .action-button__prefix-icon,
961
- .action-button--medium .action-button__suffix-icon {
962
- width: 18px;
963
- height: 18px;
964
- }
965
- .action-button--large .action-button__prefix-icon,
966
- .action-button--large .action-button__suffix-icon {
967
- width: 20px;
968
- height: 20px;
969
- }
970
- .action-button--xlarge .action-button__prefix-icon,
971
- .action-button--xlarge .action-button__suffix-icon {
972
- width: 24px;
973
- height: 24px;
974
- }
975
- .action-button__label {
976
- display: inline-flex;
977
- align-items: center;
978
- }
979
- .icon-button {
980
- display: inline-flex;
981
- align-items: center;
982
- justify-content: center;
983
- font-family:
984
- "Pretendard",
985
- -apple-system,
986
- BlinkMacSystemFont,
987
- system-ui,
988
- sans-serif;
989
- border: none;
990
- cursor: pointer;
991
- transition: all 0.2s ease;
992
- padding: 0;
993
- flex-shrink: 0;
994
- }
995
- .icon-button--xlarge {
996
- width: 56px;
997
- height: 56px;
998
- border-radius: 8px;
999
- }
1000
- .icon-button--large {
1001
- width: 48px;
1002
- height: 48px;
1003
- border-radius: 6px;
1004
- }
1005
- .icon-button--medium {
1006
- width: 36px;
1007
- height: 36px;
1008
- border-radius: 4px;
1009
- }
1010
- .icon-button--small {
1011
- width: 28px;
1012
- height: 28px;
1013
- border-radius: 4px;
1014
- }
1015
- .icon-button__icon {
1016
- display: inline-flex;
1017
- align-items: center;
1018
- justify-content: center;
1019
- width: 100%;
1020
- height: 100%;
1021
- }
1022
- .icon-button--xlarge .icon-button__icon,
1023
- .icon-button--large .icon-button__icon {
1024
- width: 24px;
1025
- height: 24px;
1026
- }
1027
- .icon-button--medium .icon-button__icon {
1028
- width: 20px;
1029
- height: 20px;
1030
- }
1031
- .icon-button--small .icon-button__icon {
1032
- width: 16px;
1033
- height: 16px;
1034
- }
1035
- .icon-button--primary.icon-button--solid {
1036
- background-color: var(--color-semantic-bg-primary);
1037
- color: var(--color-semantic-fg-inverted);
1038
- }
1039
- .icon-button--primary.icon-button--solid:hover:not(:disabled),
1040
- .icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {
1041
- background-color: var(--color-semantic-bg-primary-hovered);
1042
- }
1043
- .icon-button--primary.icon-button--solid:disabled,
1044
- .icon-button--primary.icon-button--solid.icon-button--disabled {
1045
- background-color: var(--color-semantic-bg-normal-disabled);
1046
- color: var(--color-semantic-fg-disabled);
1047
- cursor: not-allowed;
1048
- }
1049
- .icon-button--primary.icon-button--outline {
1050
- background-color: transparent;
1051
- color: var(--color-semantic-fg-primary);
1052
- border: 1px solid var(--color-semantic-border-normal);
1053
- }
1054
- .icon-button--primary.icon-button--outline:hover:not(:disabled),
1055
- .icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {
1056
- background-color: var(--color-semantic-bg-normal-hovered);
1057
- }
1058
- .icon-button--primary.icon-button--outline:disabled,
1059
- .icon-button--primary.icon-button--outline.icon-button--disabled {
1060
- color: var(--color-semantic-fg-disabled);
1061
- border-color: var(--color-semantic-border-weak);
1062
- background-color: var(--color-semantic-bg-white);
1063
- cursor: not-allowed;
1064
- }
1065
- .icon-button--primary.icon-button--weak {
1066
- background-color: var(--color-semantic-bg-week-primary);
1067
- color: var(--color-semantic-fg-primary);
1068
- }
1069
- .icon-button--primary.icon-button--weak:hover:not(:disabled),
1070
- .icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {
1071
- background-color: var(--color-semantic-bg-week-primary-hovered);
1072
- }
1073
- .icon-button--neutral.icon-button--solid {
1074
- background-color: var(--color-semantic-bg-inverted);
1075
- color: var(--color-semantic-fg-white);
1076
- }
1077
- .icon-button--neutral.icon-button--solid:hover:not(:disabled),
1078
- .icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {
1079
- background-color: var(--color-semantic-bg-inverted);
1080
- }
1081
- .icon-button--neutral.icon-button--solid:disabled,
1082
- .icon-button--neutral.icon-button--solid.icon-button--disabled {
1083
- background-color: var(--color-semantic-bg-normal-disabled);
1084
- color: var(--color-semantic-fg-disabled);
1085
- cursor: not-allowed;
1086
- }
1087
- .icon-button--neutral.icon-button--outline {
1088
- background-color: transparent;
1089
- color: var(--color-semantic-fg-normal);
1090
- border: 1px solid var(--color-semantic-border-normal);
1091
- }
1092
- .icon-button--neutral.icon-button--outline:hover:not(:disabled),
1093
- .icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {
1094
- background-color: var(--color-semantic-bg-normal-hovered);
1095
- }
1096
- .icon-button--neutral.icon-button--outline:disabled,
1097
- .icon-button--neutral.icon-button--outline.icon-button--disabled {
1098
- color: var(--color-semantic-fg-disabled);
1099
- border-color: var(--color-semantic-border-weak);
1100
- background-color: var(--color-semantic-bg-white);
1101
- cursor: not-allowed;
1102
- }
1103
- .icon-button--neutral.icon-button--weak {
1104
- background-color: var(--color-semantic-bg-week-neutral-dark);
1105
- color: var(--color-semantic-fg-normal);
1106
- }
1107
- .icon-button--neutral.icon-button--weak:hover:not(:disabled),
1108
- .icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {
1109
- background-color: var(--color-semantic-bg-week-neutral-dark-hovered);
1110
- }
1111
- .icon-button--neutral.icon-button--weak.dark {
1112
- color: var(--color-semantic-fg-white);
1113
- }
1114
- .icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),
1115
- .icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled) {
1116
- background-color: rgba(255, 255, 255, 0.1);
1117
- }
1118
- .storybook-header {
1119
- display: flex;
1120
- justify-content: space-between;
1121
- align-items: center;
1122
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1123
- padding: 15px 20px;
1124
- font-family:
1125
- "Nunito Sans",
1126
- "Helvetica Neue",
1127
- Helvetica,
1128
- Arial,
1129
- sans-serif;
1130
- }
1131
- .storybook-header svg {
1132
- display: inline-block;
1133
- vertical-align: top;
1134
- }
1135
- .storybook-header h1 {
1136
- display: inline-block;
1137
- vertical-align: top;
1138
- margin: 6px 0 6px 10px;
1139
- font-weight: 700;
1140
- font-size: 20px;
1141
- line-height: 1;
1142
- }
1143
- .storybook-header button + button {
1144
- margin-left: 10px;
1145
- }
1146
- .storybook-header .welcome {
1147
- margin-right: 10px;
1148
- color: #333;
1149
- font-size: 14px;
1150
- }
1151
- .storybook-page {
1152
- margin: 0 auto;
1153
- padding: 48px 20px;
1154
- max-width: 600px;
1155
- color: #333;
1156
- font-size: 14px;
1157
- line-height: 24px;
1158
- font-family:
1159
- "Nunito Sans",
1160
- "Helvetica Neue",
1161
- Helvetica,
1162
- Arial,
1163
- sans-serif;
1164
- }
1165
- .storybook-page h2 {
1166
- display: inline-block;
1167
- vertical-align: top;
1168
- margin: 0 0 4px;
1169
- font-weight: 700;
1170
- font-size: 32px;
1171
- line-height: 1;
1172
- }
1173
- .storybook-page p {
1174
- margin: 1em 0;
1175
- }
1176
- .storybook-page a {
1177
- color: inherit;
1178
- }
1179
- .storybook-page ul {
1180
- margin: 1em 0;
1181
- padding-left: 30px;
1182
- }
1183
- .storybook-page li {
1184
- margin-bottom: 8px;
1185
- }
1186
- .storybook-page .tip {
1187
- display: inline-block;
1188
- vertical-align: top;
1189
- margin-right: 10px;
1190
- border-radius: 1em;
1191
- background: #e7fdd8;
1192
- padding: 4px 12px;
1193
- color: #357a14;
1194
- font-weight: 700;
1195
- font-size: 11px;
1196
- line-height: 12px;
1197
- }
1198
- .storybook-page .tip-wrapper {
1199
- margin-top: 40px;
1200
- margin-bottom: 40px;
1201
- font-size: 13px;
1202
- line-height: 20px;
1203
- }
1204
- .storybook-page .tip-wrapper svg {
1205
- display: inline-block;
1206
- vertical-align: top;
1207
- margin-top: 3px;
1208
- margin-right: 4px;
1209
- width: 12px;
1210
- height: 12px;
1211
- }
1212
- .storybook-page .tip-wrapper svg path {
1213
- fill: #1ea7fd;
1214
- }
1215
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1
+ .tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;border:none;outline:none;cursor:pointer!important;transition:all .2s ease;white-space:nowrap;position:relative;z-index:1}.tab:has(.tab__badge){gap:0}.tab:focus{outline:none}.tab:focus-visible{outline:none;box-shadow:none}.tab__label{display:inline-flex;align-items:center;line-height:1.6;cursor:pointer;pointer-events:none}.tab__badge{position:static;align-self:flex-start;margin-top:0;margin-left:0;pointer-events:none}.tab--round.tab--large .tab__badge{margin-top:8px;margin-left:2px}.tab--round.tab--medium .tab__badge{margin-top:6px;margin-left:2px}.tab--text:has(.tab__badge){gap:0}.tab--text.tab--large .tab__badge{margin-top:1px}.tab--text.tab--medium .tab__badge{margin-top:-3px}.tab--round{border-radius:999px;min-width:28px}.tab--round.tab--large{height:40px;padding:0 16px;font-size:15px}.tab--round.tab--medium{height:32px;padding:0 12px;font-size:15px}.tab--round.tab--pressed{background-color:var(--color-semantic-fg-strong);color:var(--color-semantic-fg-white);font-weight:400;border:1px solid transparent}.tab--round.tab--enabled{background-color:var(--color-semantic-bg-white);color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal);font-weight:400}.tab--round.tab--enabled:hover:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.tab--text{border-radius:0;background-color:transparent;border-bottom:none;margin:0;border-left:none;border-right:none;border-top:none}.tab--text.tab--large{padding:16px;font-size:15px}.tab--text.tab--medium{padding:8px 2px;font-size:15px}.tab--text.tab--pressed{color:var(--color-semantic-fg-normal);font-weight:600;z-index:2}.tab--text.tab--pressed:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:var(--color-semantic-fg-normal);z-index:3;pointer-events:none}.tab--text.tab--enabled{color:var(--color-semantic-fg-normal);font-weight:400}.tab--text.tab--medium.tab--enabled{color:var(--color-semantic-fg-alternative);font-weight:600}.tab--text.tab--hovered{color:var(--color-semantic-fg-normal);font-weight:600}.tab--text.tab--enabled:hover:not(:disabled){color:var(--color-semantic-fg-normal);font-weight:600}.tab--dark.tab--text.tab--enabled,.tab--dark.tab--text.tab--hovered{color:var(--color-semantic-fg-white)}.tab--dark.tab--text.tab--pressed{color:var(--color-semantic-fg-primary)}.tab--dark.tab--text.tab--pressed:after{background-color:var(--color-semantic-fg-normal)}.tab--round.tab--disabled{background-color:var(--color-semantic-bg-disabled, #F3F4F6);color:var(--color-semantic-fg-disabled, #B1B8C0);border:1px solid transparent;font-weight:400;cursor:not-allowed!important}.tab--text.tab--disabled{color:var(--color-semantic-fg-disabled, #B1B8C0);font-weight:400;cursor:not-allowed!important}.tab--dark.tab--text.tab--disabled{color:var(--color-semantic-fg-alternative, #6B7583)}.tab--disabled:hover{background-color:inherit;color:inherit;border-color:inherit;box-shadow:none;font-weight:inherit}.tab-group{display:flex;flex-direction:row;align-items:center;width:-moz-fit-content;width:fit-content}.tab-group--round{gap:12px}.tab-group--text{border-bottom:1px solid var(--color-semantic-border-normal)}.tab-group--text.tab-group--large{gap:0}.tab-group--text.tab-group--medium{gap:24px}.tab-group--dark.tab-group--text{border-bottom-color:var(--color-semantic-fg-assistive, rgba(255, 255, 255, .24))}.tab-group--disabled .tab{cursor:not-allowed!important}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;white-space:nowrap;position:relative;flex-shrink:0}.badge--number{min-width:var(--spacing-primitive-5, 20px);height:var(--spacing-primitive-5, 20px);border-radius:var(--radius-primitive-2_5, 10px);padding:0 var(--spacing-primitive-3_25, 6.5px)}.badge--number .badge__value{font-size:var(--font-primitive-size-body-p3)}.badge--number:has(.badge__value:only-child){min-width:var(--spacing-primitive-5, 20px)}.badge--dot{width:var(--spacing-primitive-1_5, 6px);height:var(--spacing-primitive-1_5, 6px);min-width:var(--spacing-primitive-1_5, 6px);max-width:var(--spacing-primitive-1_5, 6px);min-height:var(--spacing-primitive-1_5, 6px);max-height:var(--spacing-primitive-1_5, 6px);border-radius:var(--radius-primitive-2_5, 10px);padding:0}.badge--primary{background-color:var(--color-semantic-fg-primary);color:var(--color-semantic-fg-white)}.badge--secondary{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.badge--progressing{background-color:var(--color-blue-500);color:var(--color-semantic-fg-white)}.badge--success{background-color:var(--color-light-green-400);color:var(--color-semantic-fg-white)}.badge--warning{background-color:var(--color-yellow-400);color:var(--color-semantic-fg-normal)}.badge--error{background-color:var(--color-red-500);color:var(--color-semantic-fg-white)}.badge--disabled{background-color:var(--color-semantic-bg-normal-alternative);color:var(--color-semantic-fg-disabled)}.chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;border-radius:var(--radius-primitive-full);white-space:nowrap;position:relative;border:none;outline:none;cursor:pointer;transition:all .2s ease;font-weight:400;letter-spacing:-.3px}.chip:focus{outline:none}.chip:focus-visible{outline:none;box-shadow:none}.chip:disabled{cursor:not-allowed}.chip__prefix-icon,.chip__suffix-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.chip__close-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;outline:none;padding:0;margin:0;cursor:pointer;color:inherit;transition:opacity .2s ease}.chip__close-button:focus{outline:none}.chip__close-button:focus-visible{outline:none;box-shadow:none}.chip__close-button:hover:not(:disabled){opacity:.7}.chip__close-button:disabled{cursor:not-allowed;opacity:.5}.chip--medium{height:30px;font-size:15px;line-height:1.6;min-width:32px}.chip--medium.chip--no-icon{padding:0 12px}.chip--medium.chip--has-prefix:not(.chip--has-suffix){padding-left:8px;padding-right:12px}.chip--medium.chip--has-suffix:not(.chip--has-prefix){padding-left:12px;padding-right:8px}.chip--medium.chip--has-prefix-suffix{padding-left:8px;padding-right:8px}.chip--medium .chip__prefix-icon,.chip--medium .chip__suffix-icon{width:16px;height:16px}.chip--medium .chip__close-button{width:16px;height:16px;margin-left:0}.chip--small{height:24px;font-size:13px;line-height:1.6;min-width:25px}.chip--small.chip--no-icon{padding:0 8px}.chip--small.chip--has-prefix:not(.chip--has-suffix){padding-left:4px;padding-right:8px}.chip--small.chip--has-suffix:not(.chip--has-prefix){padding-left:8px;padding-right:4px}.chip--small.chip--has-prefix-suffix{padding-left:4px;padding-right:4px}.chip--small .chip__prefix-icon,.chip--small .chip__suffix-icon{width:14px;height:14px}.chip--small .chip__close-button{width:14px;height:14px;margin-left:0}.chip--solid.chip--primary:not(.chip--checked):not(.chip--disabled),.chip--solid.chip--neutral:not(.chip--checked):not(.chip--disabled){background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-normal)}.chip--solid.chip--primary.chip--checked:not(.chip--disabled){background-color:var(--color-semantic-bg-primary);color:var(--color-semantic-fg-white)}.chip--solid.chip--primary.chip--checked:not(.chip--disabled):hover,.chip--solid.chip--primary.chip--checked:not(.chip--disabled):active{background-color:var(--color-semantic-bg-primary)}.chip--solid.chip--primary.chip--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled)}.chip--outline.chip--primary:not(.chip--checked):not(.chip--disabled),.chip--outline.chip--neutral:not(.chip--checked):not(.chip--disabled){color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal)}.chip--outline.chip--primary.chip--checked:not(.chip--disabled){background-color:var(--color-semantic-bg-weak-primary);color:var(--color-semantic-fg-primary);border:1px solid var(--color-semantic-border-primary)}.chip--outline.chip--primary.chip--checked:not(.chip--disabled) .chip__prefix-icon,.chip--outline.chip--primary.chip--checked:not(.chip--disabled) .chip__check-icon{color:var(--color-semantic-fg-primary)}.chip--outline.chip--primary.chip--checked:not(.chip--disabled) .chip__prefix-icon svg,.chip--outline.chip--primary.chip--checked:not(.chip--disabled) .chip__check-icon svg{stroke:var(--color-semantic-fg-primary);color:var(--color-semantic-fg-primary)}.chip--outline.chip--primary.chip--checked:not(.chip--disabled) .chip__prefix-icon path,.chip--outline.chip--primary.chip--checked:not(.chip--disabled) .chip__check-icon path{stroke:var(--color-semantic-fg-primary)}.chip--outline.chip--primary.chip--checked:not(.chip--disabled):hover,.chip--outline.chip--primary.chip--checked:not(.chip--disabled):active{background-color:var(--color-semantic-bg-weak-primary);border-color:var(--color-semantic-border-primary)}.chip--outline.chip--primary.chip--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);border:1px solid var(--color-semantic-border-weak)}.chip--solid.chip--neutral.chip--checked:not(.chip--disabled){background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.chip--solid.chip--neutral.chip--checked:not(.chip--disabled):hover,.chip--solid.chip--neutral.chip--checked:not(.chip--disabled):active{background-color:var(--color-semantic-bg-inverted)}.chip--solid.chip--neutral.chip--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled)}.chip--outline.chip--neutral.chip--checked:not(.chip--disabled){background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-inverted)}.chip--outline.chip--neutral.chip--checked:not(.chip--disabled) .chip__prefix-icon,.chip--outline.chip--neutral.chip--checked:not(.chip--disabled) .chip__check-icon{color:var(--color-semantic-fg-normal)}.chip--outline.chip--neutral.chip--checked:not(.chip--disabled) .chip__prefix-icon svg,.chip--outline.chip--neutral.chip--checked:not(.chip--disabled) .chip__check-icon svg{stroke:var(--color-semantic-fg-normal);color:var(--color-semantic-fg-normal)}.chip--outline.chip--neutral.chip--checked:not(.chip--disabled) .chip__prefix-icon path,.chip--outline.chip--neutral.chip--checked:not(.chip--disabled) .chip__check-icon path{stroke:var(--color-semantic-fg-normal)}.chip--outline.chip--neutral.chip--checked:not(.chip--disabled):hover,.chip--outline.chip--neutral.chip--checked:not(.chip--disabled):active{background-color:var(--color-semantic-bg-normal);border-color:var(--color-semantic-border-inverted)}.chip--outline.chip--neutral.chip--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);border:1px solid var(--color-semantic-border-weak)}.chip--weak.chip--primary:not(.chip--checked):not(.chip--disabled),.chip--weak.chip--neutral:not(.chip--checked):not(.chip--disabled){background-color:var(--color-semantic-bg-white);color:var(--color-semantic-fg-normal);border:none}.chip--weak.chip--primary.chip--checked:not(.chip--disabled){background-color:var(--color-semantic-bg-primary-weak);color:var(--color-semantic-fg-primary);border:none}.chip--weak.chip--primary.chip--checked:not(.chip--disabled) .chip__prefix-icon,.chip--weak.chip--primary.chip--checked:not(.chip--disabled) .chip__check-icon{color:var(--color-semantic-fg-primary)}.chip--weak.chip--primary.chip--checked:not(.chip--disabled) .chip__prefix-icon svg,.chip--weak.chip--primary.chip--checked:not(.chip--disabled) .chip__check-icon svg{stroke:var(--color-semantic-fg-primary);color:var(--color-semantic-fg-primary)}.chip--weak.chip--primary.chip--checked:not(.chip--disabled) .chip__prefix-icon path,.chip--weak.chip--primary.chip--checked:not(.chip--disabled) .chip__check-icon path{stroke:var(--color-semantic-fg-primary)}.chip--weak.chip--primary.chip--checked:not(.chip--disabled):hover,.chip--weak.chip--primary.chip--checked:not(.chip--disabled):active{background-color:var(--color-semantic-bg-primary-weak)}.chip--weak.chip--primary.chip--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);border:none}.chip--weak.chip--neutral.chip--checked:not(.chip--disabled){background-color:var(--color-semantic-bg-white);color:var(--color-semantic-fg-normal);border:none}.chip--weak.chip--neutral.chip--checked:not(.chip--disabled) .chip__prefix-icon,.chip--weak.chip--neutral.chip--checked:not(.chip--disabled) .chip__check-icon{color:var(--color-semantic-fg-normal)}.chip--weak.chip--neutral.chip--checked:not(.chip--disabled) .chip__prefix-icon svg,.chip--weak.chip--neutral.chip--checked:not(.chip--disabled) .chip__check-icon svg{stroke:var(--color-semantic-fg-normal);color:var(--color-semantic-fg-normal)}.chip--weak.chip--neutral.chip--checked:not(.chip--disabled) .chip__prefix-icon path,.chip--weak.chip--neutral.chip--checked:not(.chip--disabled) .chip__check-icon path{stroke:var(--color-semantic-fg-normal)}.chip--weak.chip--neutral.chip--checked:not(.chip--disabled):hover,.chip--weak.chip--neutral.chip--checked:not(.chip--disabled):active{background-color:var(--color-semantic-bg-white)}.chip--weak.chip--neutral.chip--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);border:none}.chip-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog-overlay__backdrop{position:absolute;inset:0;border:0;padding:0;background-color:#00000059;cursor:default}.dialog-overlay__content{position:relative;z-index:1}.dialog{width:300px;background-color:var(--color-semantic-bg-white, #ffffff);border-radius:16px;color:var(--color-semantic-fg-normal, #333d4b)}@media(min-width:744px){.dialog:not(.is-mobile).dialog{width:400px}}.dialog--left .dialog__header,.dialog--left .dialog__body{text-align:left}.dialog--center .dialog__header,.dialog--center .dialog__body{text-align:center}.dialog__header{display:flex;flex-direction:column;align-items:center;gap:var(--gap-semantic-2, 8px);padding:var(--padding-semantic-6, 24px) var(--padding-semantic-4, 16px) var(--padding-semantic-3, 8px)}.dialog--alert .dialog__header{flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--spacing-primitive-2_5, 10px);padding:var(--padding-semantic-5, 20px) var(--padding-semantic-5, 20px) var(--padding-semantic-3, 12px)}@media(min-width:744px){.dialog:not(.is-mobile) .dialog__header{padding:var(--padding-semantic-8, 32px) var(--padding-semantic-5, 20px) var(--padding-semantic-4, 16px)}.dialog:not(.is-mobile).dialog--alert .dialog__header{padding:var(--padding-semantic-6, 24px) var(--padding-semantic-6, 24px) var(--padding-semantic-4, 16px)}}.dialog__icon{width:32px;height:32px;padding:3px;display:inline-flex;align-items:center;justify-content:center}.dialog__icon svg,.dialog__icon .icon{width:100%;height:100%}.dialog__body{display:flex;justify-content:center;padding:0 var(--padding-semantic-4, 16px);word-break:keep-all;white-space:pre-line}.dialog--alert .dialog__body{justify-content:flex-start;padding:0 var(--padding-semantic-5, 20px)}@media(min-width:744px){.dialog__body{padding:0 var(--padding-semantic-5, 20px)}.dialog:not(.is-mobile).dialog--alert .dialog__body{padding:0 var(--padding-semantic-6, 24px)}}.dialog__footer{display:flex;align-items:center;gap:var(--gap-semantic-3, 12px);padding:var(--padding-semantic-5, 20px) var(--padding-semantic-4, 16px) var(--padding-semantic-4, 16px)}.dialog--alert .dialog__footer{width:100%;display:flex;justify-content:flex-end;gap:var(--spacing-primitive-2_5, 10px);padding:var(--padding-semantic-5, 20px)}@media(min-width:744px){.dialog:not(.is-mobile) .dialog__footer{padding:var(--padding-semantic-6, 24px) var(--padding-semantic-5, 20px) var(--padding-semantic-5, 20px)}.dialog:not(.is-mobile).dialog--alert .dialog__footer{padding:var(--padding-semantic-6, 24px)}}.dialog__footer--horizontal{justify-content:center}.dialog__footer--vertical{flex-direction:column}.dialog__actions{display:flex;width:100%;gap:var(--gap-semantic-3, 12px)}.dialog--alert .dialog__actions{width:100%;gap:var(--spacing-primitive-2_5, 10px);justify-content:flex-end}.dialog__actions--horizontal{width:100%;flex-direction:row}.dialog__actions--vertical{flex-direction:column;gap:var(--spacing-primitive-2_5, 10px)}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--color-gray-200)}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:var(--color-gray-400)}input::placeholder,textarea::placeholder{opacity:1;color:var(--color-gray-400)}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.right-\[1rem\]{right:1rem}.top-\[6rem\]{top:6rem}.z-10{z-index:10}.z-\[100\]{z-index:100}.z-\[101\]{z-index:101}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:var(--spacing-primitive-2)}.mb-3{margin-bottom:var(--spacing-primitive-3)}.mb-5{margin-bottom:var(--spacing-primitive-5)}.mb-6{margin-bottom:var(--spacing-primitive-6)}.mb-8{margin-bottom:var(--spacing-primitive-8)}.ml-4{margin-left:var(--spacing-primitive-4)}.mt-1{margin-top:var(--spacing-primitive-1)}.mt-2{margin-top:var(--spacing-primitive-2)}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-12{height:var(--spacing-primitive-12)}.h-4{height:var(--spacing-primitive-4)}.h-6{height:var(--spacing-primitive-6)}.h-9{height:2.25rem}.h-\[106px\]{height:106px}.h-\[36px\]{height:36px}.min-h-\[180px\]{min-height:180px}.min-h-screen{min-height:100vh}.w-4{width:var(--spacing-primitive-4)}.w-52{width:13rem}.w-9{width:2.25rem}.w-\[106px\]{width:106px}.w-\[283px\]{width:283px}.w-\[400px\]{width:400px}.w-\[442px\]{width:442px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0px}.max-w-3xl{max-width:48rem}.max-w-\[11rem\]{max-width:11rem}.max-w-\[1400px\]{max-width:1400px}.max-w-\[600px\]{max-width:600px}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[minmax\(80px\,auto\)_repeat\(2\,1fr\)\]{grid-template-columns:minmax(80px,auto) repeat(2,1fr)}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-1{gap:var(--spacing-primitive-1)}.gap-10{gap:var(--spacing-primitive-10)}.gap-12{gap:var(--spacing-primitive-12)}.gap-2{gap:var(--spacing-primitive-2)}.gap-2\.5{gap:var(--spacing-primitive-2_5)}.gap-25{gap:var(--spacing-primitive-25)}.gap-3{gap:var(--spacing-primitive-3)}.gap-4{gap:var(--spacing-primitive-4)}.gap-6{gap:var(--spacing-primitive-6)}.gap-8{gap:var(--spacing-primitive-8)}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:var(--radius-primitive-full)}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-\[\#E5E7EA\]{--tw-border-opacity: 1;border-color:rgb(229 231 234 / var(--tw-border-opacity, 1))}.border-\[rgba\(255\,255\,255\,0\.1\)\]{border-color:#ffffff1a}.border-black\/\[\.08\]{border-color:#00000014}.border-gray-200{border-color:var(--color-gray-200)}.border-primary-500{border-color:var(--color-primary-500)}.bg-\[\#F0F0F0\]{--tw-bg-opacity: 1;background-color:rgb(240 240 240 / var(--tw-bg-opacity, 1))}.bg-\[\#e5e7ea\]{--tw-bg-opacity: 1;background-color:rgb(229 231 234 / var(--tw-bg-opacity, 1))}.bg-\[rgba\(255\,255\,255\,0\.2\)\]{background-color:#fff3}.bg-bg-normal{background-color:var(--color-semantic-bg-normal)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-900{background-color:var(--color-blue-900)}.bg-fg-primary{background-color:var(--color-semantic-fg-primary)}.bg-fg-white{background-color:var(--color-semantic-fg-white)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-850{background-color:var(--color-gray-850)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-900{background-color:var(--color-green-900)}.bg-primary-50{background-color:var(--color-primary-50)}.bg-primary-500{background-color:var(--color-primary-500)}.bg-primary-900{background-color:var(--color-primary-900)}.bg-purple-500{background-color:var(--color-purple-500)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/20{background-color:#fff3}.bg-zinc-50{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-0{padding:0}.p-3{padding:var(--spacing-primitive-3)}.p-4{padding:var(--spacing-primitive-4)}.p-5{padding:var(--spacing-primitive-5)}.p-6{padding:var(--spacing-primitive-6)}.p-8{padding:var(--spacing-primitive-8)}.px-16{padding-left:var(--spacing-primitive-16);padding-right:var(--spacing-primitive-16)}.px-2{padding-left:var(--spacing-primitive-2);padding-right:var(--spacing-primitive-2)}.px-2\.5{padding-left:var(--spacing-primitive-2_5);padding-right:var(--spacing-primitive-2_5)}.px-3{padding-left:var(--spacing-primitive-3);padding-right:var(--spacing-primitive-3)}.px-4{padding-left:var(--spacing-primitive-4);padding-right:var(--spacing-primitive-4)}.px-5{padding-left:var(--spacing-primitive-5);padding-right:var(--spacing-primitive-5)}.py-1{padding-top:var(--spacing-primitive-1);padding-bottom:var(--spacing-primitive-1)}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:var(--spacing-primitive-2);padding-bottom:var(--spacing-primitive-2)}.py-32{padding-top:8rem;padding-bottom:8rem}.py-4{padding-top:var(--spacing-primitive-4);padding-bottom:var(--spacing-primitive-4)}.pb-3{padding-bottom:var(--spacing-primitive-3)}.pl-4{padding-left:var(--spacing-primitive-4)}.pr-2{padding-right:var(--spacing-primitive-2)}.pr-9{padding-right:2.25rem}.pt-0{padding-top:0}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:var(--font-primitive-weight-bold)}.font-medium{font-weight:500}.font-semibold{font-weight:var(--font-primitive-weight-semibold)}.leading-10{line-height:2.5rem}.leading-8{line-height:2rem}.leading-\[1\.4\]{line-height:1.4}.leading-\[1\.6\]{line-height:1.6}.tracking-tight{letter-spacing:var(--font-primitive-letter-spacing-tight)}.\!text-gray-600{color:var(--color-gray-600)!important}.text-\[\#1a1a1a\]{--tw-text-opacity: 1;color:rgb(26 26 26 / var(--tw-text-opacity, 1))}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-fg-blue{color:var(--color-semantic-fg-blue)}.text-fg-disabled{color:var(--color-semantic-fg-disabled)}.text-fg-neutral{color:var(--color-semantic-fg-neutral)}.text-fg-normal{color:var(--color-semantic-fg-normal)}.text-fg-primary{color:var(--color-semantic-fg-primary)}.text-fg-white{color:var(--color-semantic-fg-white)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-info-negative{color:var(--color-semantic-info-negative)}.text-neutral-400{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.text-primary-50{color:var(--color-primary-50)}.text-primary-500{color:var(--color-primary-500)}.text-primary-900{color:var(--color-primary-900)}.text-purple-500{color:var(--color-purple-500)}.text-transparent{color:transparent}.text-zinc-600{--tw-text-opacity: 1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.text-zinc-950{--tw-text-opacity: 1;color:rgb(9 9 11 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[0_2px_20px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow: 0 2px 20px rgba(0,0,0,.06);--tw-shadow-colored: 0 2px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-\[13\.3px\]{--tw-backdrop-blur: blur(13.3px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[opacity\]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[list-style\:none\]{list-style:none}:root{--background: #ffffff;--foreground: #171717;--color-background: var(--background);--color-foreground: var(--foreground);--font-sans: var(--font-geist-sans);--font-mono: var(--font-geist-mono);--Boolean-primitive: 1;--color-basic-white: #FFFFFF;--color-basic-black: #000000;--color-basic-opacity-neutral-light-0: rgba(255, 255, 255, 0);--color-basic-opacity-neutral-light-2: rgba(255, 255, 255, .02);--color-basic-opacity-neutral-light-4: rgba(255, 255, 255, .04);--color-basic-opacity-neutral-light-6: rgba(255, 255, 255, .06);--color-basic-opacity-neutral-light-8: rgba(255, 255, 255, .08);--color-basic-opacity-neutral-light-16: rgba(255, 255, 255, .16);--color-basic-opacity-neutral-light-24: rgba(255, 255, 255, .24);--color-basic-opacity-neutral-light-48: rgba(255, 255, 255, .48);--color-basic-opacity-neutral-light-56: rgba(255, 255, 255, .56);--color-basic-opacity-neutral-light-72: rgba(255, 255, 255, .72);--color-basic-opacity-neutral-light-80: rgba(255, 255, 255, .8);--color-basic-opacity-neutral-light-90: rgba(255, 255, 255, .9);--color-basic-opacity-neutral-dark-0: rgba(0, 0, 0, 0);--color-basic-opacity-neutral-dark-2: rgba(0, 0, 0, .02);--color-basic-opacity-neutral-dark-4: rgba(0, 0, 0, .04);--color-basic-opacity-neutral-dark-6: rgba(0, 0, 0, .06);--color-basic-opacity-neutral-dark-8: rgba(0, 0, 0, .08);--color-basic-opacity-neutral-dark-16: rgba(0, 0, 0, .16);--color-basic-opacity-neutral-dark-24: rgba(0, 0, 0, .24);--color-basic-opacity-neutral-dark-48: rgba(0, 0, 0, .48);--color-basic-opacity-neutral-dark-56: rgba(0, 0, 0, .56);--color-basic-opacity-neutral-dark-72: rgba(0, 0, 0, .72);--color-basic-opacity-neutral-dark-80: rgba(0, 0, 0, .8);--color-basic-opacity-neutral-dark-90: rgba(0, 0, 0, .9);--color-basic-opacity-primary-0: rgba(255, 96, 0, 0);--color-basic-opacity-primary-2: rgba(255, 96, 0, .02);--color-basic-opacity-primary-4: rgba(255, 96, 0, .04);--color-basic-opacity-primary-6: rgba(255, 96, 0, .06);--color-basic-opacity-primary-8: rgba(255, 96, 0, .08);--color-basic-opacity-primary-16: rgba(255, 96, 0, .16);--color-basic-opacity-primary-24: rgba(255, 96, 0, .24);--color-basic-opacity-primary-48: rgba(255, 96, 0, .48);--color-basic-opacity-primary-56: rgba(255, 96, 0, .56);--color-basic-opacity-primary-72: rgba(255, 96, 0, .72);--color-basic-opacity-primary-80: rgba(255, 96, 0, .8);--color-basic-opacity-primary-90: rgba(255, 96, 0, .9);--color-blue-50: #E5F5FF;--color-blue-100: #CCEBFF;--color-blue-200: #C0E6FF;--color-blue-300: #80C6FB;--color-blue-400: #6DAAE7;--color-blue-500: #3D94FF;--color-blue-600: #2077E5;--color-blue-700: #045CA9;--color-blue-800: #004875;--color-blue-900: #1D3649;--color-gray-50: #F9FAFB;--color-gray-100: #F3F4F6;--color-gray-200: #E5E7EA;--color-gray-300: #D1D6DC;--color-gray-400: #B1B8C0;--color-gray-500: #8A95A0;--color-gray-600: #6B7583;--color-gray-700: #4E5967;--color-gray-800: #333D4B;--color-gray-850: #262F3C;--color-gray-900: #191F28;--color-gray-950: #191C1F;--color-green-50: #E4FAF5;--color-green-100: #C4F8EB;--color-green-200: #B4EDDE;--color-green-300: #7EDDCD;--color-green-400: #4FC8B8;--color-green-500: #0DA796;--color-green-600: #05806D;--color-green-700: #006D5D;--color-green-800: #005448;--color-green-900: #003C32;--color-light-green-50: #F2FDE3;--color-light-green-100: #D7F2B1;--color-light-green-200: #C7EC93;--color-light-green-300: #B0D55C;--color-light-green-400: #89C81B;--color-light-green-500: #79B116;--color-light-green-600: #4A7F05;--color-light-green-700: #2D660A;--color-light-green-800: #144D14;--color-light-green-900: #0A3C02;--color-pink-50: #FFF3FF;--color-pink-100: #FFD2FF;--color-pink-200: #FFC2FF;--color-pink-300: #FF9EEE;--color-pink-400: #EF81CE;--color-pink-500: #D3689F;--color-pink-600: #C14180;--color-pink-700: #A02C6D;--color-pink-800: #7C1C58;--color-pink-900: #601146;--color-primary-50: #FFEFE5;--color-primary-100: #FFDFCC;--color-primary-200: #FFBF99;--color-primary-300: #FFA066;--color-primary-400: #FF8033;--color-primary-500: #FF6000;--color-primary-600: #CC4D00;--color-primary-700: #993A00;--color-primary-800: #662600;--color-primary-900: #4D1D00;--color-purple-50: #F9EFFF;--color-purple-100: #F0D6FF;--color-purple-200: #EAC7FF;--color-purple-300: #D7AAFF;--color-purple-400: #BA8FF7;--color-purple-500: #AF79DD;--color-purple-600: #9855D4;--color-purple-700: #734098;--color-purple-800: #5D327B;--color-purple-900: #412356;--color-red-50: #FDF0F3;--color-red-100: #FFCCD8;--color-red-200: #FFB8C9;--color-red-300: #FFA5B4;--color-red-400: #FF6D6D;--color-red-500: #F64C4C;--color-red-600: #E12337;--color-red-700: #AD1625;--color-red-800: #8C101C;--color-red-900: #6E0A1E;--color-static-black: var(--color-basic-black, #000);--color-static-white: var(--color-basic-white, #FFF);--color-yellow-50: #FFF8E4;--color-yellow-100: #FFEEBF;--color-yellow-200: #FFE28E;--color-yellow-300: #FFD456;--color-yellow-400: #FFCA30;--color-yellow-500: #FFB700;--color-yellow-600: #CB9100;--color-yellow-700: #AA7900;--color-yellow-800: #745300;--color-yellow-900: #3C3200;--color-semantic-bg-normal: var(--color-gray-100);--color-semantic-bg-normal-hovered: var(--color-gray-50);--color-semantic-bg-normal-alternative: var(--color-gray-200);--color-semantic-bg-normal-assistive: var(--color-gray-50);--color-semantic-bg-disabled: var(--color-gray-100);--color-semantic-bg-disabled-dark: var(--color-gray-200);--color-semantic-bg-inverted: var(--color-gray-950);--color-semantic-bg-inverted-hovered: var(--color-gray-900);--color-semantic-bg-primary: var(--color-primary-500);--color-semantic-bg-primary-hovered: var(--color-primary-600);--color-semantic-bg-primary-disabled: var(--color-basic-opacity-primary-24);--color-semantic-bg-primary-weak: var(--color-primary-50);--color-semantic-bg-lightgreen: var(--color-light-green-50);--color-semantic-bg-yellow: var(--color-yellow-50);--color-semantic-bg-green: var(--color-green-50);--color-semantic-bg-blue: var(--color-blue-50);--color-semantic-bg-purple: var(--color-purple-50);--color-semantic-bg-pink: var(--color-pink-50);--color-semantic-bg-red: var(--color-red-50);--color-semantic-bg-white: var(--color-basic-white);--color-semantic-bg-black: var(--color-basic-black);--color-semantic-bg-weak-primary: var(--color-basic-opacity-primary-8);--color-semantic-bg-weak-primary-hovered: var(--color-basic-opacity-primary-16);--color-semantic-bg-weak-neutral-light: var(--color-basic-opacity-neutral-light-8);--color-semantic-bg-weak-neutral-light-hovered: var(--color-basic-opacity-neutral-light-16);--color-semantic-bg-weak-neutral-dark: var(--color-basic-opacity-neutral-dark-8);--color-semantic-bg-weak-neutral-dark-hovered: var(--color-basic-opacity-neutral-dark-16);--color-semantic-border-primary: var(--color-primary-500);--color-semantic-border-strong: var(--color-gray-800);--color-semantic-border-normal: var(--color-gray-300);--color-semantic-border-weak: var(--color-gray-200);--color-semantic-border-white: var(--color-basic-white);--color-semantic-border-black: var(--color-basic-black);--color-semantic-border-inverted: var(--color-gray-700);--color-semantic-border-inverted-strong: var(--color-gray-600);--color-semantic-fg-primary: var(--color-primary-500);--color-semantic-fg-pressed: var(--color-primary-600);--color-semantic-fg-primary-inverted: var(--color-primary-300);--color-semantic-fg-strong: var(--color-gray-900);--color-semantic-fg-normal: var(--color-gray-800);--color-semantic-fg-neutral: var(--color-gray-700);--color-semantic-fg-alternative: var(--color-gray-600);--color-semantic-fg-assistive: var(--color-gray-500);--color-semantic-fg-disabled: var(--color-gray-400);--color-semantic-fg-yellow: var(--color-yellow-500);--color-semantic-fg-lightgreen: var(--color-light-green-500);--color-semantic-fg-green: var(--color-green-500);--color-semantic-fg-blue: var(--color-blue-500);--color-semantic-fg-purple: var(--color-purple-500);--color-semantic-fg-pink: var(--color-pink-500);--color-semantic-fg-red: var(--color-red-500);--color-semantic-fg-white: var(--color-basic-white);--color-semantic-fg-black: var(--color-basic-black);--color-semantic-info-negative: var(--color-red-600);--color-semantic-info-positive: var(--color-light-green-500);--color-semantic-info-white: var(--color-basic-white);--color-semantic-info-black: var(--color-basic-black);--color-semantic-style-gradation-primary: linear-gradient(90deg, var(--color-primary-300, #FFA066) 0%, var(--color-primary-500, #FF6000) 97.86%);--color-semantic-style-gradation-dark: radial-gradient(50% 50% at 50% 50%, #191F28 0%, #993A00 100%);--color-semantic-style-gradation-black: linear-gradient(90deg, var(--color-basic-opacity-neutral-dark-0, rgba(0, 0, 0, 0)) 0%, var(--color-basic-black, #000) 100%);--color-semantic-style-gradation-white: var(--color-static-gradation-white, linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-basic-white, #FFF) 100%));--color-semantic-style-dim: rgba(0, 0, 0, .5);--font-primitive-familly-font-familly: pretendard;--font-primitive-letter-spacing-tight: -.30000001192092896px;--font-primitive-letter-spacing-normal: 0px;--font-primitive-letter-spacing-loose: 1px;--font-primitive-size-display-d1: 52px;--font-primitive-size-display-d2: 44px;--font-primitive-size-display-d3: 32px;--font-primitive-size-display-d4: 27px;--font-primitive-size-heading-h1: 35px;--font-primitive-size-heading-h2: 31px;--font-primitive-size-heading-h3: 27px;--font-primitive-size-heading-h4: 23px;--font-primitive-size-heading-h5: 21px;--font-primitive-size-heading-h6: 19px;--font-primitive-size-body-p1: 17px;--font-primitive-size-body-p2: 15px;--font-primitive-size-body-p3: 13px;--font-primitive-size-body-p4: 12px;--font-primitive-size-body-p5: 11px;--font-primitive-weight-extrabold: 800px;--font-primitive-weight-bold: 700px;--font-primitive-weight-semibold: 600px;--font-primitive-weight-regular: 400px;--gap-semantic-0_5: var(--spacing-primitive-0_5);--gap-semantic-1: var(--spacing-primitive-1);--gap-semantic-10: var(--spacing-primitive-10);--gap-semantic-12: var(--spacing-primitive-12);--gap-semantic-16: var(--spacing-primitive-16);--gap-semantic-2: var(--spacing-primitive-2);--gap-semantic-20: var(--spacing-primitive-20);--gap-semantic-25: var(--spacing-primitive-25);--gap-semantic-3: var(--spacing-primitive-3);--gap-semantic-4: var(--spacing-primitive-4);--gap-semantic-5: var(--spacing-primitive-5);--gap-semantic-6: var(--spacing-primitive-6);--gap-semantic-8: var(--spacing-primitive-8);--padding-semantic-0_5: var(--spacing-primitive-0_5);--padding-semantic-1: var(--spacing-primitive-1);--padding-semantic-10: var(--spacing-primitive-10);--padding-semantic-12: var(--spacing-primitive-12);--padding-semantic-2: var(--spacing-primitive-2);--padding-semantic-2_5: var(--spacing-primitive-2_5);--padding-semantic-3: var(--spacing-primitive-3);--padding-semantic-4: var(--spacing-primitive-4);--padding-semantic-5: var(--spacing-primitive-5);--padding-semantic-6: var(--spacing-primitive-6);--padding-semantic-8: var(--spacing-primitive-8);--radius-primitive-0_5: 2px;--radius-primitive-1: 4px;--radius-primitive-1_5: 6px;--radius-primitive-2: 8px;--radius-primitive-2_5: 10px;--radius-primitive-3: 12px;--radius-primitive-3_5: 14px;--radius-primitive-4: 16px;--radius-primitive-5: 20px;--radius-primitive-6: 24px;--radius-primitive-full: 999px;--spacing-primitive-0_5: 2px;--spacing-primitive-1: 4px;--spacing-primitive-10: 40px;--spacing-primitive-12: 48px;--spacing-primitive-16: 64px;--spacing-primitive-2: 8px;--spacing-primitive-20: 80px;--spacing-primitive-25: 100px;--spacing-primitive-2_5: 10px;--spacing-primitive-3: 12px;--spacing-primitive-4: 16px;--spacing-primitive-5: 20px;--spacing-primitive-6: 24px;--spacing-primitive-8: 32px}@media(prefers-color-scheme:dark){:root{--background: #0a0a0a;--foreground: #ededed}}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-\[\#383838\]:hover{--tw-bg-opacity: 1;background-color:rgb(56 56 56 / var(--tw-bg-opacity, 1))}.hover\:bg-black\/\[\.04\]:hover{background-color:#0000000a}.hover\:\!text-gray-900:hover{color:var(--color-gray-900)!important}.hover\:underline:hover{text-decoration-line:underline}.focus\:underline:focus{text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}@media(min-width:640px){.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:text-left{text-align:left}}@media(min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:w-\[158px\]{width:158px}.md\:text-base{font-size:1rem;line-height:1.5rem}}@media(min-width:1024px){.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media(prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}.dark\:bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.dark\:\!text-gray-400{color:var(--color-gray-400)!important}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-zinc-400{--tw-text-opacity: 1;color:rgb(161 161 170 / var(--tw-text-opacity, 1))}.dark\:text-zinc-50{--tw-text-opacity: 1;color:rgb(250 250 250 / var(--tw-text-opacity, 1))}.dark\:invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.dark\:hover\:bg-\[\#1a1a1a\]:hover{--tw-bg-opacity: 1;background-color:rgb(26 26 26 / var(--tw-bg-opacity, 1))}.dark\:hover\:bg-\[\#ccc\]:hover{--tw-bg-opacity: 1;background-color:rgb(204 204 204 / var(--tw-bg-opacity, 1))}.dark\:hover\:\!text-gray-200:hover{color:var(--color-gray-200)!important}}.\[\&_li\]\:\[list-style\:none\] li{list-style:none}.action-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-primitive-familly-font-familly),-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:600;border:none;cursor:pointer;transition:all .2s ease;white-space:nowrap;outline:none}.action-button:focus-visible{outline:2px solid var(--color-semantic-border-primary);outline-offset:var(--spacing-primitive-0_5, 2px)}.action-button--xlarge{height:56px;padding:0 var(--padding-semantic-4);border-radius:var(--radius-primitive-2);gap:0}.action-button--large{height:var(--spacing-primitive-12, 48px);padding:0 var(--padding-semantic-4);border-radius:var(--radius-primitive-1_5);gap:0}.action-button--medium{height:36px;padding:0 var(--padding-semantic-3);border-radius:var(--radius-primitive-1);gap:0}.action-button--small{height:28px;padding:0 var(--padding-semantic-2_5);border-radius:var(--radius-primitive-1);gap:0}.action-button--xlarge:has(.action-button__prefix-icon),.action-button--xlarge:has(.action-button__suffix-icon){padding-left:var(--padding-semantic-4);padding-right:var(--padding-semantic-4);gap:var(--gap-semantic-3)}.action-button--large:has(.action-button__prefix-icon),.action-button--large:has(.action-button__suffix-icon){padding-left:var(--padding-semantic-4);padding-right:var(--padding-semantic-4);gap:var(--gap-semantic-2)}.action-button--medium:has(.action-button__prefix-icon),.action-button--medium:has(.action-button__suffix-icon){padding-left:var(--padding-semantic-3);padding-right:var(--padding-semantic-3);gap:var(--gap-semantic-2)}.action-button--small:has(.action-button__prefix-icon),.action-button--small:has(.action-button__suffix-icon){padding-left:var(--padding-semantic-2_5);padding-right:var(--padding-semantic-2_5);gap:var(--gap-semantic-1)}.action-button--primary.action-button--solid{background-color:var(--color-semantic-bg-primary);color:var(--color-semantic-fg-white)}.action-button--primary.action-button--solid:hover:not(:disabled),.action-button--primary.action-button--solid.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-primary-hovered)}.action-button--primary.action-button--solid:disabled,.action-button--primary.action-button--solid.action-button--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--primary.action-button--outline{background-color:transparent;color:var(--color-semantic-fg-primary);border:1px solid var(--color-semantic-border-normal)}.action-button--primary.action-button--outline:hover:not(:disabled),.action-button--primary.action-button--outline.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered);border-color:var(--color-semantic-border-normal)}.action-button--primary.action-button--outline:disabled,.action-button--primary.action-button--outline.action-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.action-button--primary.action-button--ghost{background-color:transparent;color:var(--color-semantic-fg-primary)}.action-button--primary.action-button--ghost:disabled,.action-button--primary.action-button--ghost.action-button--disabled{color:var(--color-semantic-fg-disabled);background-color:transparent;cursor:not-allowed}.action-button--neutral.action-button--solid{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.action-button--neutral.action-button--solid:hover:not(:disabled),.action-button--neutral.action-button--solid.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-inverted-hovered)}.action-button--neutral.action-button--solid:disabled,.action-button--neutral.action-button--solid.action-button--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--neutral.action-button--outline{background-color:transparent;color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal)}.action-button--neutral.action-button--outline:hover:not(:disabled),.action-button--neutral.action-button--outline.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--neutral.action-button--outline:disabled,.action-button--neutral.action-button--outline.action-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.action-button--neutral.action-button--ghost{background-color:transparent;color:var(--color-semantic-fg-normal)}.action-button--neutral.action-button--ghost:disabled,.action-button--neutral.action-button--ghost.action-button--disabled{color:var(--color-semantic-fg-disabled);background-color:transparent;cursor:not-allowed}.action-button--secondary.action-button--solid{background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-normal)}.action-button--secondary.action-button--solid:hover:not(:disabled),.action-button--secondary.action-button--solid.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--secondary.action-button--solid:disabled,.action-button--secondary.action-button--solid.action-button--disabled{background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--neutral.action-button--weak{background-color:var(--color-semantic-bg-normal-alternative);color:var(--color-semantic-fg-normal)}.action-button--neutral.action-button--weak:hover:not(:disabled),.action-button--neutral.action-button--weak.action-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.action-button--neutral.action-button--weak:disabled,.action-button--neutral.action-button--weak.action-button--disabled{background-color:var(--color-semantic-bg-normal-alternative);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--secondary.action-button--weak{background-color:var(--color-semantic-bg-inverted-hovered);color:var(--color-semantic-fg-white)}.action-button--secondary.action-button--weak:hover:not(:disabled),.action-button--secondary.action-button--weak.action-button--hovered:not(:disabled){background-color:var(--color-basic-opacity-neutral-light-8)}.action-button--secondary.action-button--weak:disabled,.action-button--secondary.action-button--weak.action-button--disabled{background-color:var(--color-semantic-bg-inverted-hovered);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.action-button--loading{position:relative;pointer-events:none}.action-button--loading .action-button__content{opacity:0}.action-button__content{display:inline-flex;align-items:center;gap:inherit}.action-button__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center}.action-button__spinner-svg{width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.action-button__spinner-circle{opacity:1}.action-button--primary.action-button--solid.action-button--loading{background-color:var(--color-semantic-bg-primary-hovered);color:var(--color-semantic-fg-white)}.action-button--primary.action-button--outline.action-button--loading{background-color:var(--color-semantic-bg-normal-hovered);border-color:var(--color-semantic-border-normal);color:var(--color-semantic-fg-primary)}.action-button--neutral.action-button--solid.action-button--loading{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.action-button--neutral.action-button--outline.action-button--loading,.action-button--secondary.action-button--solid.action-button--loading,.action-button--neutral.action-button--weak.action-button--loading{background-color:var(--color-semantic-bg-normal-hovered);color:var(--color-semantic-fg-normal)}.action-button--secondary.action-button--weak.action-button--loading{background-color:var(--color-basic-opacity-neutral-light-8);color:var(--color-semantic-fg-white)}.action-button__prefix-icon,.action-button__suffix-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-button__prefix-icon>*,.action-button__suffix-icon>*{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.action-button--small .action-button__prefix-icon,.action-button--small .action-button__suffix-icon{width:16px;height:16px}.action-button--medium .action-button__prefix-icon,.action-button--medium .action-button__suffix-icon{width:20px;height:20px}.action-button--large .action-button__prefix-icon,.action-button--large .action-button__suffix-icon,.action-button--xlarge .action-button__prefix-icon,.action-button--xlarge .action-button__suffix-icon{width:24px;height:24px}.action-button__label{display:inline-flex;align-items:center;justify-content:center}.action-button--xlarge .action-button__label,.action-button--large .action-button__label,.action-button--medium .action-button__label{min-width:34px}.action-button--small .action-button__label{min-width:30px}.icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;border:none;cursor:pointer;transition:all .2s ease;padding:0;flex-shrink:0;outline:none}.icon-button:focus-visible{outline:2px solid var(--color-semantic-border-focus);outline-offset:2px}.icon-button--xlarge{width:56px;height:56px;border-radius:8px}.icon-button--large{width:48px;height:48px;border-radius:6px}.icon-button--medium{width:36px;height:36px;border-radius:4px}.icon-button--small{width:28px;height:28px;border-radius:4px}.icon-button__icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.icon-button--xlarge .icon-button__icon,.icon-button--large .icon-button__icon{width:24px;height:24px}.icon-button--medium .icon-button__icon{width:20px;height:20px}.icon-button--small .icon-button__icon{width:16px;height:16px}.icon-button--primary.icon-button--solid{background-color:var(--color-semantic-bg-primary);color:var(--color-semantic-fg-white)}.icon-button--primary.icon-button--solid:hover:not(:disabled),.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-primary-hovered)}.icon-button--primary.icon-button--solid:disabled,.icon-button--primary.icon-button--solid.icon-button--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.icon-button--primary.icon-button--outline{background-color:transparent;color:var(--color-semantic-fg-primary);border:1px solid var(--color-semantic-border-primary)}.icon-button--primary.icon-button--outline:hover:not(:disabled),.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.icon-button--primary.icon-button--outline:disabled,.icon-button--primary.icon-button--outline.icon-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);cursor:not-allowed}.icon-button--primary.icon-button--weak,.icon-button--weak-primary{background-color:var(--color-semantic-bg-weak-primary);color:var(--color-semantic-fg-primary)}.icon-button--primary.icon-button--weak:hover:not(:disabled),.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled),.icon-button--weak-primary:hover:not(:disabled),.icon-button--weak-primary.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-weak-primary-hovered)}.icon-button--neutral.icon-button--solid{background-color:var(--color-semantic-bg-inverted);color:var(--color-semantic-fg-white)}.icon-button--neutral.icon-button--solid:hover:not(:disabled),.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-inverted)}.icon-button--neutral.icon-button--solid:disabled,.icon-button--neutral.icon-button--solid.icon-button--disabled{background-color:var(--color-semantic-bg-disabled);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.icon-button--neutral.icon-button--outline{background-color:transparent;color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal)}.icon-button--neutral.icon-button--outline:hover:not(:disabled),.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.icon-button--neutral.icon-button--outline:disabled,.icon-button--neutral.icon-button--outline.icon-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);cursor:not-allowed}.icon-button--neutral.icon-button--weak:not(.icon-button--weak-neutral-light),.icon-button--weak-neutral-dark{background-color:var(--color-semantic-bg-weak-neutral-dark);color:var(--color-semantic-fg-normal)}.icon-button--neutral.icon-button--weak:not(.icon-button--weak-neutral-light):hover:not(:disabled),.icon-button--neutral.icon-button--weak:not(.icon-button--weak-neutral-light).icon-button--hovered:not(:disabled),.icon-button--weak-neutral-dark:hover:not(:disabled),.icon-button--weak-neutral-dark.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-weak-neutral-dark-hovered)}.icon-button--neutral.icon-button--weak.icon-button--weak-neutral-light,.icon-button--weak-neutral-light{background-color:var(--color-semantic-bg-weak-neutral-light);color:var(--color-semantic-fg-white)}.icon-button--neutral.icon-button--weak.icon-button--weak-neutral-light:hover:not(:disabled),.icon-button--neutral.icon-button--weak.icon-button--weak-neutral-light.icon-button--hovered:not(:disabled),.icon-button--weak-neutral-light:hover:not(:disabled),.icon-button--weak-neutral-light.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-weak-neutral-light-hovered)}.icon-button--secondary.icon-button--solid{background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-normal)}.icon-button--secondary.icon-button--solid:hover:not(:disabled),.icon-button--secondary.icon-button--solid.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.icon-button--secondary.icon-button--solid:disabled,.icon-button--secondary.icon-button--solid.icon-button--disabled{background-color:var(--color-semantic-bg-normal);color:var(--color-semantic-fg-disabled);cursor:not-allowed}.icon-button--secondary.icon-button--outline{background-color:transparent;color:var(--color-semantic-fg-normal);border:1px solid var(--color-semantic-border-normal)}.icon-button--secondary.icon-button--outline:hover:not(:disabled),.icon-button--secondary.icon-button--outline.icon-button--hovered:not(:disabled){background-color:var(--color-semantic-bg-normal-hovered)}.icon-button--secondary.icon-button--outline:disabled,.icon-button--secondary.icon-button--outline.icon-button--disabled{color:var(--color-semantic-fg-disabled);border-color:var(--color-semantic-border-weak);background-color:var(--color-semantic-bg-white);cursor:not-allowed}.icon-button--weak.icon-button--disabled{opacity:0;pointer-events:none}.typography{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;margin:0;padding:0}.typography--display-d1{font-size:var(--font-primitive-size-display-d1);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--display-d2{font-size:var(--font-primitive-size-display-d2);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--display-d3{font-size:var(--font-primitive-size-display-d3);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--display-d4{font-size:var(--font-primitive-size-display-d4);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--heading-h1{font-size:var(--font-primitive-size-heading-h1);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--heading-h2{font-size:var(--font-primitive-size-heading-h2);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--heading-h3{font-size:var(--font-primitive-size-heading-h3);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--heading-h4{font-size:var(--font-primitive-size-heading-h4);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--heading-h5{font-size:var(--font-primitive-size-heading-h5);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--heading-h6{font-size:var(--font-primitive-size-heading-h6);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal)}.typography--subtitle-p1{font-size:var(--font-primitive-size-body-p1);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--subtitle-p2{font-size:var(--font-primitive-size-body-p2);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--subtitle-p3{font-size:var(--font-primitive-size-body-p3);font-weight:600;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--body-p1{font-size:var(--font-primitive-size-body-p1);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--body-p2{font-size:var(--font-primitive-size-body-p2);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--body-p3{font-size:var(--font-primitive-size-body-p3);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--body-p4{font-size:var(--font-primitive-size-body-p4);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--body-p5{font-size:var(--font-primitive-size-body-p5);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight)}.typography--decoration-underline{text-decoration:underline;text-decoration-style:solid}.typography--decoration-underline.typography--heading-h1,.typography--decoration-underline.typography--heading-h2,.typography--decoration-underline.typography--heading-h3,.typography--decoration-underline.typography--heading-h4,.typography--decoration-underline.typography--heading-h5,.typography--decoration-underline.typography--heading-h6,.typography--decoration-underline.typography--subtitle-p1,.typography--decoration-underline.typography--subtitle-p2,.typography--decoration-underline.typography--subtitle-p3{text-decoration-thickness:8%;text-underline-offset:30%}.typography--decoration-underline.typography--body-p1,.typography--decoration-underline.typography--body-p2,.typography--decoration-underline.typography--body-p3,.typography--decoration-underline.typography--body-p4,.typography--decoration-underline.typography--body-p5{text-decoration-thickness:5%;text-underline-offset:30%}.display-d1,.text-display-d1{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-display-d1);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.display-d2,.text-display-d2{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-display-d2);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.display-d3,.text-display-d3{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-display-d3);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.display-d4,.text-display-d4{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-display-d4);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.heading-h1,.text-heading-h1{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-heading-h1);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.heading-h2,.text-heading-h2{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-heading-h2);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.heading-h3,.text-heading-h3{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-heading-h3);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.heading-h4,.text-heading-h4{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-heading-h4);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.heading-h5,.text-heading-h5{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-heading-h5);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.heading-h6,.text-heading-h6{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-heading-h6);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-normal);margin:0;padding:0}.subtitle-p1,.text-subtitle-p1{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p1);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.subtitle-p2,.text-subtitle-p2{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p2);font-weight:600;line-height:1.3;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.subtitle-p3,.text-subtitle-p3{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p3);font-weight:600;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.body-p1,.text-body-p1{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p1);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.body-p2,.text-body-p2{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p2);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.body-p3,.text-body-p3{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p3);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.body-p4,.text-body-p4{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p4);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.body-p5,.text-body-p5{font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-primitive-size-body-p5);font-weight:400;line-height:1.6;letter-spacing:var(--font-primitive-letter-spacing-tight);margin:0;padding:0}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px 20px;font-family:var(--font-primitive-familly-font-familly),"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}
1216
2
  /*# sourceMappingURL=index.css.map */