@sellmate/design-system 1.20.0 → 1.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/{index-DXm0PH2A.js → index-C-F-JEv_.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-action-modal.cjs.entry.js +8 -2
- package/dist/cjs/sd-badge.cjs.entry.js +3 -2
- package/dist/cjs/sd-barcode-input.cjs.entry.js +35 -2
- package/dist/cjs/sd-button_2.cjs.entry.js +13 -4
- package/dist/cjs/sd-calendar_2.cjs.entry.js +17 -6
- package/dist/cjs/sd-callout.cjs.entry.js +4 -2
- package/dist/cjs/sd-card.cjs.entry.js +4 -2
- package/dist/cjs/sd-checkbox.cjs.entry.js +21 -12
- package/dist/cjs/sd-chip-input.cjs.entry.js +38 -4
- package/dist/cjs/sd-chip.cjs.entry.js +19 -2
- package/dist/cjs/sd-circle-progress.cjs.entry.js +6 -2
- package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +27 -4
- package/dist/cjs/sd-date-box.cjs.entry.js +13 -3
- package/dist/cjs/sd-date-picker_7.cjs.entry.js +209 -13
- package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +7 -2
- package/dist/cjs/sd-divider.cjs.entry.js +1 -1
- package/dist/cjs/sd-dropdown-button.cjs.entry.js +11 -1
- package/dist/cjs/sd-field_3.cjs.entry.js +70 -12
- package/dist/cjs/sd-form.cjs.entry.js +10 -2
- package/dist/cjs/sd-ghost-button_3.cjs.entry.js +54 -15
- package/dist/cjs/sd-guide.cjs.entry.js +9 -3
- package/dist/cjs/sd-key-value-table.cjs.entry.js +3 -1
- package/dist/cjs/sd-linear-progress.cjs.entry.js +7 -4
- package/dist/cjs/sd-loading-container.cjs.entry.js +5 -3
- package/dist/cjs/sd-modal-container.cjs.entry.js +56 -2
- package/dist/cjs/sd-pagination_4.cjs.entry.js +38 -9
- package/dist/cjs/sd-popover.cjs.entry.js +21 -5
- package/dist/cjs/sd-popup.cjs.entry.js +7 -3
- package/dist/cjs/sd-radio-button.cjs.entry.js +8 -2
- package/dist/cjs/sd-radio.cjs.entry.js +7 -2
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +18 -7
- package/dist/cjs/sd-select_3.cjs.entry.js +56 -9
- package/dist/cjs/sd-switch.cjs.entry.js +6 -2
- package/dist/cjs/sd-table.cjs.entry.js +42 -7
- package/dist/cjs/sd-tabs.cjs.entry.js +8 -2
- package/dist/cjs/sd-td.cjs.entry.js +11 -2
- package/dist/cjs/sd-text-link.cjs.entry.js +13 -4
- package/dist/cjs/sd-toast-container.cjs.entry.js +11 -2
- package/dist/cjs/sd-toast.cjs.entry.js +12 -3
- package/dist/cjs/sd-toggle.cjs.entry.js +6 -2
- package/dist/cjs/{tooltipArrow-D3P3JC08.js → tooltipArrow-26hYtSrD.js} +1 -1
- package/dist/collection/components/assets/Close.js +1 -1
- package/dist/collection/components/sd-action-modal/sd-action-modal.js +13 -7
- package/dist/collection/components/sd-badge/sd-badge.js +3 -2
- package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +67 -34
- package/dist/collection/components/sd-button/sd-button.js +18 -10
- package/dist/collection/components/sd-calendar/sd-calendar.js +15 -9
- package/dist/collection/components/sd-callout/sd-callout.js +5 -3
- package/dist/collection/components/sd-card/sd-card.js +5 -3
- package/dist/collection/components/sd-checkbox/sd-checkbox.config.js +5 -3
- package/dist/collection/components/sd-checkbox/sd-checkbox.css +16 -0
- package/dist/collection/components/sd-checkbox/sd-checkbox.js +5 -3
- package/dist/collection/components/sd-chip/sd-chip.js +35 -18
- package/dist/collection/components/sd-chip-input/sd-chip-input.css +1 -0
- package/dist/collection/components/sd-chip-input/sd-chip-input.js +69 -35
- package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +9 -5
- package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +32 -17
- package/dist/collection/components/sd-date-box/sd-date-box.js +22 -12
- package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +12 -7
- package/dist/collection/components/sd-date-picker/sd-date-picker.js +48 -25
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +11 -6
- package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +50 -26
- package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js +20 -10
- package/dist/collection/components/sd-field/sd-field.js +51 -28
- package/dist/collection/components/sd-file-picker/sd-file-picker.js +60 -30
- package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +32 -11
- package/dist/collection/components/sd-form/sd-form.js +17 -9
- package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +28 -13
- package/dist/collection/components/sd-guide/sd-guide.js +14 -8
- package/dist/collection/components/sd-icon/sd-icon.js +2 -1
- package/dist/collection/components/sd-input/sd-input.js +82 -42
- package/dist/collection/components/sd-key-value-table/sd-key-value-table.js +4 -2
- package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +10 -7
- package/dist/collection/components/sd-loading-container/sd-loading-container.js +6 -4
- package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +17 -9
- package/dist/collection/components/sd-modal-container/sd-modal-container.js +61 -7
- package/dist/collection/components/sd-number-input/sd-number-input.js +82 -43
- package/dist/collection/components/sd-pagination/sd-pagination.js +11 -7
- package/dist/collection/components/sd-popover/sd-popover.js +35 -19
- package/dist/collection/components/sd-popup/sd-popup.js +11 -7
- package/dist/collection/components/sd-portal/sd-portal.js +35 -14
- package/dist/collection/components/sd-radio/sd-radio.js +11 -6
- package/dist/collection/components/sd-radio-button/sd-radio-button.js +13 -7
- package/dist/collection/components/sd-radio-group/sd-radio-group.js +13 -7
- package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +16 -9
- package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +12 -8
- package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +22 -12
- package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +18 -10
- package/dist/collection/components/sd-select/sd-select.js +62 -33
- package/dist/collection/components/sd-switch/sd-switch.js +9 -5
- package/dist/collection/components/sd-table/sd-table.js +76 -41
- package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +4 -3
- package/dist/collection/components/sd-table/sd-td/sd-td.js +19 -10
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +29 -16
- package/dist/collection/components/sd-table/sd-tr/sd-tr.js +22 -11
- package/dist/collection/components/sd-tabs/sd-tabs.js +13 -7
- package/dist/collection/components/sd-tag/sd-tag.js +10 -7
- package/dist/collection/components/sd-text-link/sd-text-link.js +21 -12
- package/dist/collection/components/sd-textarea/sd-textarea.js +69 -35
- package/dist/collection/components/sd-toast/sd-toast.js +20 -11
- package/dist/collection/components/sd-toast-container/sd-toast-container.js +19 -10
- package/dist/collection/components/sd-toggle/sd-toggle.js +9 -5
- package/dist/collection/components/sd-tooltip/sd-tooltip.js +30 -16
- package/dist/components/index.js +1 -1
- package/dist/components/{p-pSthmtsz.js → p-4MIzxb0h.js} +1 -1
- package/dist/components/{p-CQozoo2-.js → p-B-Igud6n.js} +1 -1
- package/dist/components/{p-CtWfOIxb.js → p-B5VNSTAf.js} +1 -1
- package/dist/components/{p-5GcM22aW.js → p-B76pFg6k.js} +1 -1
- package/dist/components/{p-MJG6EZeP.js → p-BFlmHQm9.js} +1 -1
- package/dist/components/{p-DrSHJYop.js → p-BIHVGo10.js} +1 -1
- package/dist/components/{p-De7UsPPk.js → p-BQQC-6k4.js} +1 -1
- package/dist/{design-system/p-L_He_WSA.js → components/p-BRmilX-4.js} +1 -1
- package/dist/components/p-BVlg0BoC.js +1 -0
- package/dist/components/{p-Df1g_kVH.js → p-BjSMh85k.js} +1 -1
- package/dist/components/{p-BuFzlA0M.js → p-BrHnpCXR.js} +1 -1
- package/dist/components/{p-DaMzYzXI.js → p-Btj50AUe.js} +1 -1
- package/dist/components/p-BzsHwLh6.js +1 -0
- package/dist/components/{p-9Z-q6kKD.js → p-C1QezE7u.js} +1 -1
- package/dist/components/{p-Bd-fDbVE.js → p-C3mTIE8H.js} +1 -1
- package/dist/components/{p-CEhI4kUA.js → p-CBDBmMmw.js} +1 -1
- package/dist/components/p-CCCwPJ5p.js +1 -0
- package/dist/components/p-CEKu7cxA.js +1 -0
- package/dist/components/{p-Cfko62rU.js → p-CTw1Deo8.js} +1 -1
- package/dist/components/p-CTxZT3Je.js +1 -0
- package/dist/components/{p-CiEAVQT4.js → p-CZYTZeMe.js} +1 -1
- package/dist/components/{p-DAJIg-VD.js → p-CcwzTAJC.js} +1 -1
- package/dist/components/p-Cj_1bYZF.js +1 -0
- package/dist/components/{p-DpfXh55-.js → p-Cugxp5lo.js} +1 -1
- package/dist/components/{p-BzUU-npj.js → p-D4zy1T3V.js} +1 -1
- package/dist/components/{p-BHW1fnDC.js → p-DC5W8Uy1.js} +1 -1
- package/dist/components/{p-BZjIn1hr.js → p-DIc8C633.js} +1 -1
- package/dist/components/{p-BeYMZ1fR.js → p-DJY7lCe4.js} +1 -1
- package/dist/components/{p-ChncPmp-.js → p-DPXOBYhf.js} +1 -1
- package/dist/components/{p-nruUh8p1.js → p-DU0IkIvI.js} +1 -1
- package/dist/components/{p-DRgPF0Fp.js → p-DZikCqcw.js} +1 -1
- package/dist/components/{p-vTnMooAF.js → p-Dz7VXmIA.js} +1 -1
- package/dist/components/p-FA9fGvbL.js +1 -0
- package/dist/components/p-S2-XqY2R.js +1 -0
- package/dist/components/{p-CjYYBlrZ.js → p-YpyfqzoP.js} +1 -1
- package/dist/components/{p-E5buAge1.js → p-l7TaS8q9.js} +1 -1
- package/dist/components/{p-lmVlfugh.js → p-s_75vJTu.js} +1 -1
- package/dist/components/sd-action-modal.js +1 -1
- package/dist/components/sd-badge.js +1 -1
- package/dist/components/sd-barcode-input.js +1 -1
- package/dist/components/sd-button.js +1 -1
- package/dist/components/sd-calendar.js +1 -1
- package/dist/components/sd-callout.js +1 -1
- package/dist/components/sd-card.js +1 -1
- package/dist/components/sd-checkbox.js +1 -1
- package/dist/components/sd-chip-input.js +1 -1
- package/dist/components/sd-chip.js +1 -1
- package/dist/components/sd-circle-progress.js +1 -1
- package/dist/components/sd-confirm-modal.js +1 -1
- package/dist/components/sd-date-box.js +1 -1
- package/dist/components/sd-date-picker-trigger.js +1 -1
- package/dist/components/sd-date-picker.js +1 -1
- package/dist/components/sd-date-range-picker-calendar.js +1 -1
- package/dist/components/sd-date-range-picker.js +1 -1
- package/dist/components/sd-divider.js +1 -1
- package/dist/components/sd-dropdown-button.js +1 -1
- package/dist/components/sd-field.js +1 -1
- package/dist/components/sd-file-picker.js +1 -1
- package/dist/components/sd-floating-portal.js +1 -1
- package/dist/components/sd-form.js +1 -1
- package/dist/components/sd-ghost-button.js +1 -1
- package/dist/components/sd-guide.js +1 -1
- package/dist/components/sd-icon.js +1 -1
- package/dist/components/sd-input.js +1 -1
- package/dist/components/sd-key-value-table.js +1 -1
- package/dist/components/sd-linear-progress.js +1 -1
- package/dist/components/sd-loading-container.js +1 -1
- package/dist/components/sd-loading-modal.js +1 -1
- package/dist/components/sd-modal-container.js +1 -1
- package/dist/components/sd-number-input.js +1 -1
- package/dist/components/sd-pagination.js +1 -1
- package/dist/components/sd-popover.js +1 -1
- package/dist/components/sd-popup.js +1 -1
- package/dist/components/sd-portal.js +1 -1
- package/dist/components/sd-radio-button.js +1 -1
- package/dist/components/sd-radio-group.js +1 -1
- package/dist/components/sd-radio.js +1 -1
- package/dist/components/sd-select-list-item-search.js +1 -1
- package/dist/components/sd-select-list-item.js +1 -1
- package/dist/components/sd-select-listbox.js +1 -1
- package/dist/components/sd-select-trigger.js +1 -1
- package/dist/components/sd-select.js +1 -1
- package/dist/components/sd-switch.js +1 -1
- package/dist/components/sd-table.js +1 -1
- package/dist/components/sd-tabs.js +1 -1
- package/dist/components/sd-tag.js +1 -1
- package/dist/components/sd-tbody.js +1 -1
- package/dist/components/sd-td.js +1 -1
- package/dist/components/sd-text-link.js +1 -1
- package/dist/components/sd-textarea.js +1 -1
- package/dist/components/sd-thead.js +1 -1
- package/dist/components/sd-toast-container.js +1 -1
- package/dist/components/sd-toast.js +1 -1
- package/dist/components/sd-toggle.js +1 -1
- package/dist/components/sd-tooltip.js +1 -1
- package/dist/components/sd-tr.js +1 -1
- package/dist/design-system/design-system.css +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-0f35cd21.entry.js +1 -0
- package/dist/design-system/{p-e9d1dbb5.entry.js → p-274dbc65.entry.js} +1 -1
- package/dist/design-system/{p-b291baab.entry.js → p-2ba0b35a.entry.js} +1 -1
- package/dist/design-system/{p-52f551a1.entry.js → p-2ca4902b.entry.js} +1 -1
- package/dist/design-system/p-2df32f8c.entry.js +1 -0
- package/dist/design-system/{p-cb80327c.entry.js → p-35da166a.entry.js} +1 -1
- package/dist/design-system/p-35e1e2fa.entry.js +1 -0
- package/dist/design-system/{p-6ce68bf2.entry.js → p-4bc0ce52.entry.js} +1 -1
- package/dist/design-system/p-4c1559c8.entry.js +1 -0
- package/dist/design-system/{p-9c38ee79.entry.js → p-4e44b45b.entry.js} +1 -1
- package/dist/design-system/{p-da4e2674.entry.js → p-4eeca0cb.entry.js} +1 -1
- package/dist/design-system/{p-646a7830.entry.js → p-4f69fde0.entry.js} +1 -1
- package/dist/design-system/{p-ccf1a3fc.entry.js → p-50b5cf37.entry.js} +1 -1
- package/dist/design-system/p-52e88677.entry.js +1 -0
- package/dist/design-system/{p-4acfc5f9.entry.js → p-552acf98.entry.js} +1 -1
- package/dist/design-system/{p-23006577.entry.js → p-563a8242.entry.js} +1 -1
- package/dist/design-system/{p-e3990243.entry.js → p-68687503.entry.js} +1 -1
- package/dist/design-system/{p-1f3c1cca.entry.js → p-6d8a4a23.entry.js} +1 -1
- package/dist/design-system/{p-d5032f31.entry.js → p-7c507d39.entry.js} +1 -1
- package/dist/design-system/{p-717eba5f.entry.js → p-88926a42.entry.js} +1 -1
- package/dist/design-system/{p-35d390f1.entry.js → p-90436be8.entry.js} +1 -1
- package/dist/design-system/{p-9289eb14.entry.js → p-99f33027.entry.js} +1 -1
- package/dist/design-system/{p-c47198fc.entry.js → p-9a010c12.entry.js} +1 -1
- package/dist/design-system/{p-54853a2b.entry.js → p-9dc0c2f9.entry.js} +1 -1
- package/dist/{components/p-Bg9XySrz.js → design-system/p-C7HJ-NfO.js} +2 -1
- package/dist/{components/p-0VCXAYrh.js → design-system/p-DUyBmuH_.js} +1 -1
- package/dist/design-system/{p-d5c3bac9.entry.js → p-a71a8b31.entry.js} +1 -1
- package/dist/design-system/{p-a4331364.entry.js → p-a80cc067.entry.js} +1 -1
- package/dist/design-system/{p-ae344950.entry.js → p-abcc9367.entry.js} +1 -1
- package/dist/design-system/p-ac81b46e.entry.js +1 -0
- package/dist/design-system/{p-08343698.entry.js → p-b881bbb6.entry.js} +1 -1
- package/dist/design-system/{p-2151e081.entry.js → p-bfba449b.entry.js} +1 -1
- package/dist/design-system/p-c684cd96.entry.js +1 -0
- package/dist/design-system/{p-b63b8df9.entry.js → p-c93c623f.entry.js} +1 -1
- package/dist/design-system/{p-98e0b332.entry.js → p-ccc85130.entry.js} +1 -1
- package/dist/design-system/{p-aa1c6202.entry.js → p-ce5df7ef.entry.js} +1 -1
- package/dist/design-system/{p-adfddf3b.entry.js → p-ce83eca1.entry.js} +1 -1
- package/dist/design-system/p-d5b535ad.entry.js +1 -0
- package/dist/design-system/{p-df7c721d.entry.js → p-e310f188.entry.js} +1 -1
- package/dist/design-system/{p-bdb7492c.entry.js → p-fc65bbe2.entry.js} +1 -1
- package/dist/design-system/p-fe5b8eaa.entry.js +1 -0
- package/dist/design-system/{p-a5a586da.entry.js → p-ff726fad.entry.js} +1 -1
- package/dist/esm/design-system.js +2 -2
- package/dist/esm/{index-CAxodB5I.js → index-C7HJ-NfO.js} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/sd-action-modal.entry.js +8 -2
- package/dist/esm/sd-badge.entry.js +3 -2
- package/dist/esm/sd-barcode-input.entry.js +35 -2
- package/dist/esm/sd-button_2.entry.js +13 -4
- package/dist/esm/sd-calendar_2.entry.js +17 -6
- package/dist/esm/sd-callout.entry.js +4 -2
- package/dist/esm/sd-card.entry.js +4 -2
- package/dist/esm/sd-checkbox.entry.js +21 -12
- package/dist/esm/sd-chip-input.entry.js +38 -4
- package/dist/esm/sd-chip.entry.js +19 -2
- package/dist/esm/sd-circle-progress.entry.js +6 -2
- package/dist/esm/sd-confirm-modal_2.entry.js +27 -4
- package/dist/esm/sd-date-box.entry.js +13 -3
- package/dist/esm/sd-date-picker_7.entry.js +209 -13
- package/dist/esm/sd-date-range-picker-calendar.entry.js +7 -2
- package/dist/esm/sd-divider.entry.js +1 -1
- package/dist/esm/sd-dropdown-button.entry.js +11 -1
- package/dist/esm/sd-field_3.entry.js +70 -12
- package/dist/esm/sd-form.entry.js +10 -2
- package/dist/esm/sd-ghost-button_3.entry.js +54 -15
- package/dist/esm/sd-guide.entry.js +9 -3
- package/dist/esm/sd-key-value-table.entry.js +3 -1
- package/dist/esm/sd-linear-progress.entry.js +7 -4
- package/dist/esm/sd-loading-container.entry.js +5 -3
- package/dist/esm/sd-modal-container.entry.js +56 -2
- package/dist/esm/sd-pagination_4.entry.js +38 -9
- package/dist/esm/sd-popover.entry.js +21 -5
- package/dist/esm/sd-popup.entry.js +7 -3
- package/dist/esm/sd-radio-button.entry.js +8 -2
- package/dist/esm/sd-radio.entry.js +7 -2
- package/dist/esm/sd-select-list-item_2.entry.js +18 -7
- package/dist/esm/sd-select_3.entry.js +56 -9
- package/dist/esm/sd-switch.entry.js +6 -2
- package/dist/esm/sd-table.entry.js +42 -7
- package/dist/esm/sd-tabs.entry.js +8 -2
- package/dist/esm/sd-td.entry.js +11 -2
- package/dist/esm/sd-text-link.entry.js +13 -4
- package/dist/esm/sd-toast-container.entry.js +11 -2
- package/dist/esm/sd-toast.entry.js +12 -3
- package/dist/esm/sd-toggle.entry.js +6 -2
- package/dist/esm/{tooltipArrow-DLr6VvUK.js → tooltipArrow-Bgf3crs7.js} +1 -1
- package/dist/types/components/sd-action-modal/sd-action-modal.d.ts +6 -0
- package/dist/types/components/sd-badge/sd-badge.d.ts +1 -0
- package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts +33 -0
- package/dist/types/components/sd-button/sd-button.d.ts +8 -0
- package/dist/types/components/sd-calendar/sd-calendar.d.ts +6 -0
- package/dist/types/components/sd-callout/sd-callout.d.ts +2 -0
- package/dist/types/components/sd-card/sd-card.d.ts +2 -0
- package/dist/types/components/sd-checkbox/sd-checkbox.config.d.ts +2 -0
- package/dist/types/components/sd-chip/sd-chip.d.ts +17 -0
- package/dist/types/components/sd-chip-input/sd-chip-input.d.ts +33 -0
- package/dist/types/components/sd-circle-progress/sd-circle-progress.d.ts +4 -0
- package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts +15 -0
- package/dist/types/components/sd-date-box/sd-date-box.d.ts +10 -0
- package/dist/types/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.d.ts +5 -0
- package/dist/types/components/sd-date-picker/sd-date-picker.d.ts +23 -0
- package/dist/types/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.d.ts +5 -0
- package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts +24 -0
- package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts +10 -0
- package/dist/types/components/sd-field/sd-field.d.ts +23 -0
- package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +30 -0
- package/dist/types/components/sd-floating-portal/sd-floating-portal.d.ts +12 -0
- package/dist/types/components/sd-form/sd-form.d.ts +8 -0
- package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts +7 -0
- package/dist/types/components/sd-guide/sd-guide.d.ts +6 -0
- package/dist/types/components/sd-icon/sd-icon.d.ts +1 -0
- package/dist/types/components/sd-input/sd-input.d.ts +40 -0
- package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts +2 -0
- package/dist/types/components/sd-linear-progress/sd-linear-progress.d.ts +4 -0
- package/dist/types/components/sd-loading-container/sd-loading-container.d.ts +2 -0
- package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts +8 -0
- package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +15 -0
- package/dist/types/components/sd-number-input/sd-number-input.d.ts +39 -0
- package/dist/types/components/sd-pagination/sd-pagination.d.ts +4 -0
- package/dist/types/components/sd-popover/sd-popover.d.ts +16 -0
- package/dist/types/components/sd-popup/sd-popup.d.ts +5 -0
- package/dist/types/components/sd-portal/sd-portal.d.ts +13 -0
- package/dist/types/components/sd-radio/sd-radio.d.ts +5 -0
- package/dist/types/components/sd-radio-button/sd-radio-button.d.ts +6 -0
- package/dist/types/components/sd-radio-group/sd-radio-group.d.ts +6 -0
- package/dist/types/components/sd-select/sd-select-list-item/sd-select-list-item.d.ts +7 -0
- package/dist/types/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.d.ts +4 -0
- package/dist/types/components/sd-select/sd-select-listbox/sd-select-listbox.d.ts +10 -0
- package/dist/types/components/sd-select/sd-select-trigger/sd-select-trigger.d.ts +8 -0
- package/dist/types/components/sd-select/sd-select.d.ts +29 -0
- package/dist/types/components/sd-switch/sd-switch.d.ts +4 -0
- package/dist/types/components/sd-table/sd-table.d.ts +35 -0
- package/dist/types/components/sd-table/sd-tbody/sd-tbody.d.ts +1 -0
- package/dist/types/components/sd-table/sd-td/sd-td.d.ts +9 -0
- package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +13 -0
- package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +11 -0
- package/dist/types/components/sd-tabs/sd-tabs.d.ts +6 -0
- package/dist/types/components/sd-tag/sd-tag.d.ts +4 -0
- package/dist/types/components/sd-text-link/sd-text-link.d.ts +9 -0
- package/dist/types/components/sd-textarea/sd-textarea.d.ts +34 -0
- package/dist/types/components/sd-toast/sd-toast.d.ts +9 -0
- package/dist/types/components/sd-toast-container/sd-toast-container.d.ts +9 -0
- package/dist/types/components/sd-toggle/sd-toggle.d.ts +4 -0
- package/dist/types/components/sd-tooltip/sd-tooltip.d.ts +14 -0
- package/dist/types/components.d.ts +1827 -7
- package/hydrate/index.js +873 -126
- package/hydrate/index.mjs +873 -126
- package/package.json +1 -1
- package/dist/components/p-B7PHGGFH.js +0 -1
- package/dist/components/p-ClKABgST.js +0 -1
- package/dist/components/p-CvSqieCH.js +0 -1
- package/dist/components/p-DDR0VcRU.js +0 -1
- package/dist/components/p-DYOyb7rq.js +0 -1
- package/dist/components/p-DbLQoVx6.js +0 -1
- package/dist/components/p-P2jWtk8J.js +0 -1
- package/dist/design-system/p-316b8a08.entry.js +0 -1
- package/dist/design-system/p-3f7349ae.entry.js +0 -1
- package/dist/design-system/p-5039241c.entry.js +0 -1
- package/dist/design-system/p-5eaa12af.entry.js +0 -1
- package/dist/design-system/p-CAxodB5I.js +0 -2
- package/dist/design-system/p-aa312937.entry.js +0 -1
- package/dist/design-system/p-c995e6c3.entry.js +0 -1
- package/dist/design-system/p-eef6d4a3.entry.js +0 -1
- package/dist/design-system/p-faf7b64c.entry.js +0 -1
- package/dist/design-system/p-fd7abbfa.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -136,7 +136,7 @@ var node_crypto = require('node:crypto');
|
|
|
136
136
|
const NAMESPACE = 'design-system';
|
|
137
137
|
const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
138
138
|
|
|
139
|
-
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:12px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#555555;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-bg:#001B39;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-top-border:#004177;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-bg-default:#001B39;--sd-gnb-belt-gnb-belt-item-bg-selected:#002B5E;--sd-gnb-belt-gnb-belt-item-color-default:#FFFFFF;--sd-gnb-belt-gnb-belt-item-color-active:#93C4FF;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-bg:#FFFFFF;--sd-gnb-box-gnb-box-border:#E1E1E1;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-bg-default:#FFFFFF;--sd-gnb-box-gnb-box-item-bg-hover:#F6F6F6;--sd-gnb-box-gnb-box-item-bg-selected:#EFF6FF;--sd-gnb-box-gnb-box-item-color-default:#222222;--sd-gnb-box-gnb-box-item-color-selected:#0075FF;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
|
|
139
|
+
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:12px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#555555;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-bg:#001B39;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-top-border:#004177;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-bg-default:#001B39;--sd-gnb-belt-gnb-belt-item-bg-selected:#002B5E;--sd-gnb-belt-gnb-belt-item-color-default:#FFFFFF;--sd-gnb-belt-gnb-belt-item-color-active:#93C4FF;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-bg:#FFFFFF;--sd-gnb-box-gnb-box-border:#E1E1E1;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-bg-default:#FFFFFF;--sd-gnb-box-gnb-box-item-bg-hover:#F6F6F6;--sd-gnb-box-gnb-box-item-bg-selected:#EFF6FF;--sd-gnb-box-gnb-box-item-color-default:#222222;--sd-gnb-box-gnb-box-item-color-selected:#0075FF;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
|
|
140
140
|
|
|
141
141
|
/*
|
|
142
142
|
Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -5304,11 +5304,17 @@ class SdActionModal {
|
|
|
5304
5304
|
this.close = createEvent(this, "sdClose", 7);
|
|
5305
5305
|
this.ok = createEvent(this, "sdOk", 7);
|
|
5306
5306
|
}
|
|
5307
|
+
/** 모달 헤더에 표시할 제목 */
|
|
5307
5308
|
modalTitle = '';
|
|
5309
|
+
/** 하단 확인 버튼의 props (없으면 footer 미표시) */
|
|
5308
5310
|
buttonProps;
|
|
5311
|
+
/** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5309
5312
|
width;
|
|
5313
|
+
/** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5310
5314
|
height;
|
|
5315
|
+
/** 닫기 버튼 클릭 시 발생 */
|
|
5311
5316
|
close;
|
|
5317
|
+
/** 확인 버튼 클릭 시 발생 */
|
|
5312
5318
|
ok;
|
|
5313
5319
|
render() {
|
|
5314
5320
|
const cssVars = {
|
|
@@ -5338,7 +5344,7 @@ class SdActionModal {
|
|
|
5338
5344
|
if (this.height != null && this.height !== '') {
|
|
5339
5345
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5340
5346
|
}
|
|
5341
|
-
return (hAsync("div", { key: '
|
|
5347
|
+
return (hAsync("div", { key: '1bed831bf4534b5936d151d9cf085dda4657295f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '2e5855be8128695e85e397acc91432d573572a12', class: "sd-action-modal__header" }, hAsync("h2", { key: '1551d022b29288f38c1288c595d66acffb7cd81a', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '8d4ec549ebebc6b2d61ad3c9dc4808d0275d3c55', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'aac69288e31316de16c6cdd8a5b5641b5afc2f5a', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'd48d05b60cdc53e5d71e7694149b2e2e77c0cde8', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'abd5db2432dea9639bfa91fb3f3019105a47e409', class: "sd-action-modal__body" }, hAsync("slot", { key: 'debfb64dd617e6d027b9acdea2081141ad78ff5d', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '9cf1510e0ce5aea2e5b4e504e832073f533e166e', class: "sd-action-modal__footer" }, hAsync("div", { key: '677d0e26fe8d416419fd247c808206955df82b16', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '24e400c96a0fec93ea76d2a037432901e3050618', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'b52c5c7837a06f25738533dc769f5daff1169696', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
|
|
5342
5348
|
}
|
|
5343
5349
|
static get style() { return sdActionModalCss(); }
|
|
5344
5350
|
static get cmpMeta() { return {
|
|
@@ -5387,10 +5393,11 @@ class SdBadge {
|
|
|
5387
5393
|
constructor(hostRef) {
|
|
5388
5394
|
registerInstance(this, hostRef);
|
|
5389
5395
|
}
|
|
5396
|
+
/** 뱃지 색상 */
|
|
5390
5397
|
color = 'blue';
|
|
5391
5398
|
render() {
|
|
5392
5399
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5393
|
-
return (hAsync("div", { key: '
|
|
5400
|
+
return (hAsync("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
|
|
5394
5401
|
}
|
|
5395
5402
|
static get style() { return sdBadgeCss(); }
|
|
5396
5403
|
static get cmpMeta() { return {
|
|
@@ -5501,38 +5508,66 @@ class SdBarcodeInput {
|
|
|
5501
5508
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
5502
5509
|
}
|
|
5503
5510
|
get host() { return getElement(this); }
|
|
5511
|
+
/** 입력값 */
|
|
5504
5512
|
value = null;
|
|
5513
|
+
/** 입력 필드 크기 */
|
|
5505
5514
|
size = 'sm';
|
|
5515
|
+
/** 필드 우측 어드온 레이블 */
|
|
5506
5516
|
addonLabel = '';
|
|
5517
|
+
/** 어드온 정렬 방향 */
|
|
5507
5518
|
addonAlign = 'start';
|
|
5519
|
+
/** 입력 placeholder */
|
|
5508
5520
|
placeholder = '입력해 주세요.';
|
|
5521
|
+
/** 비활성 상태 여부 */
|
|
5509
5522
|
disabled = false;
|
|
5523
|
+
/** 입력값 지우기 버튼 표시 여부 */
|
|
5510
5524
|
clearable = false;
|
|
5525
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5511
5526
|
width = '';
|
|
5527
|
+
/** 유효성 검사 규칙 목록 */
|
|
5512
5528
|
rules = [];
|
|
5529
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
5513
5530
|
autoFocus = false;
|
|
5531
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
5514
5532
|
status;
|
|
5533
|
+
/** 필드 하단 힌트 텍스트 */
|
|
5515
5534
|
hint = '';
|
|
5535
|
+
/** 에러 메시지 */
|
|
5516
5536
|
errorMessage = '';
|
|
5537
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
5517
5538
|
inputClass = '';
|
|
5539
|
+
/** 읽기 전용 여부 */
|
|
5518
5540
|
readonly = false;
|
|
5541
|
+
/** 에러 상태 여부 */
|
|
5519
5542
|
error = false;
|
|
5543
|
+
/** 포커스 상태 여부 */
|
|
5520
5544
|
focused = false;
|
|
5545
|
+
/** 호버 상태 여부 */
|
|
5521
5546
|
hovered = false;
|
|
5522
5547
|
// props - label
|
|
5548
|
+
/** 레이블 텍스트 */
|
|
5523
5549
|
label = '';
|
|
5550
|
+
/** 레이블 너비 */
|
|
5524
5551
|
labelWidth = '';
|
|
5552
|
+
/** 레이블 영역 아이콘 */
|
|
5525
5553
|
icon = undefined;
|
|
5554
|
+
/** 레이블 툴팁 텍스트 */
|
|
5526
5555
|
labelTooltip = '';
|
|
5556
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
5527
5557
|
labelTooltipProps = null;
|
|
5528
5558
|
// props - custom styles
|
|
5559
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
5529
5560
|
inputStyle = {};
|
|
5530
5561
|
internalValue = null;
|
|
5531
5562
|
nativeEl = undefined;
|
|
5532
5563
|
formField;
|
|
5564
|
+
/** 폼 연동용 name 속성 */
|
|
5533
5565
|
name = nanoid$1();
|
|
5566
|
+
/** 입력값 변경 시 발생합니다. */
|
|
5534
5567
|
input;
|
|
5568
|
+
/** 포커스 진입 시 발생합니다. */
|
|
5535
5569
|
focus;
|
|
5570
|
+
/** 포커스 이탈 시 발생합니다. */
|
|
5536
5571
|
blur;
|
|
5537
5572
|
valueChanged(newValue) {
|
|
5538
5573
|
this.internalValue = newValue;
|
|
@@ -5543,18 +5578,23 @@ class SdBarcodeInput {
|
|
|
5543
5578
|
this.input?.emit(this.value);
|
|
5544
5579
|
}
|
|
5545
5580
|
}
|
|
5581
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
5546
5582
|
async sdGetNativeElement() {
|
|
5547
5583
|
return this.nativeEl || null;
|
|
5548
5584
|
}
|
|
5585
|
+
/** 유효성 검사를 실행합니다. */
|
|
5549
5586
|
async sdValidate() {
|
|
5550
5587
|
this.formField?.sdValidate();
|
|
5551
5588
|
}
|
|
5589
|
+
/** 입력값과 유효성 상태를 초기화합니다. */
|
|
5552
5590
|
async sdReset() {
|
|
5553
5591
|
this.formField?.sdReset();
|
|
5554
5592
|
}
|
|
5593
|
+
/** 유효성 상태만 초기화합니다. */
|
|
5555
5594
|
async sdResetValidate() {
|
|
5556
5595
|
this.formField?.sdResetValidation();
|
|
5557
5596
|
}
|
|
5597
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
5558
5598
|
async sdFocus() {
|
|
5559
5599
|
this.formField?.sdFocus();
|
|
5560
5600
|
}
|
|
@@ -5600,7 +5640,7 @@ class SdBarcodeInput {
|
|
|
5600
5640
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5601
5641
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5602
5642
|
};
|
|
5603
|
-
return (hAsync("sd-field", { key: '
|
|
5643
|
+
return (hAsync("sd-field", { key: '9f9831c9f39e4723cad6567b22155ab89856c9be', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '1da8ce2ef66e48f269b79f22e6751ccf18ca9cc0', class: "sd-barcode-input__content" }, hAsync("slot", { key: '06850214ee5118ff3d13266c1ade37902c19f379', name: "prefix" }), hAsync("input", { key: '0384b010946b635cc6b19ddb1a83be593ba5806b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '2bb5baed7b300014e52795d3a7665a580b7ff5a2', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'fc586fdb39a1dc25eeba32c76aa86a653416c38e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5604
5644
|
if (this.disabled)
|
|
5605
5645
|
return;
|
|
5606
5646
|
this.internalValue = '';
|
|
@@ -5830,7 +5870,7 @@ const ClockOutline = (props) => {
|
|
|
5830
5870
|
|
|
5831
5871
|
const Close = (props) => {
|
|
5832
5872
|
const { size = 24, ...rest } = props;
|
|
5833
|
-
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "
|
|
5873
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M18.8281 4.11135C19.121 3.81849 19.5958 3.81854 19.8887 4.11135C20.1816 4.40424 20.1816 4.879 19.8887 5.1719L13.0596 12L19.8887 18.8291C20.1815 19.122 20.1815 19.5968 19.8887 19.8897C19.5958 20.1822 19.1209 20.1824 18.8281 19.8897L12 13.0606L5.17188 19.8897C4.87911 20.1823 4.40422 20.1821 4.11133 19.8897C3.81844 19.5968 3.81844 19.121 4.11133 18.8281L10.9385 12L4.11133 5.1719C3.81844 4.879 3.81844 4.40424 4.11133 4.11135C4.40424 3.8186 4.87903 3.81851 5.17188 4.11135L11.999 10.9395L18.8281 4.11135Z", fill: "currentColor" })));
|
|
5834
5874
|
};
|
|
5835
5875
|
|
|
5836
5876
|
const Copy = (props) => {
|
|
@@ -6472,13 +6512,21 @@ class SdButton {
|
|
|
6472
6512
|
registerInstance(this, hostRef);
|
|
6473
6513
|
this.click = createEvent(this, "sdClick", 7);
|
|
6474
6514
|
}
|
|
6515
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
6475
6516
|
name = 'primary_sm';
|
|
6517
|
+
/** 버튼 텍스트 레이블 */
|
|
6476
6518
|
label = '';
|
|
6519
|
+
/** 레이블 왼쪽에 표시할 아이콘 */
|
|
6477
6520
|
icon;
|
|
6521
|
+
/** 레이블 오른쪽에 표시할 아이콘 */
|
|
6478
6522
|
rightIcon;
|
|
6523
|
+
/** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
|
|
6479
6524
|
ariaLabel = '';
|
|
6525
|
+
/** 비활성 상태 여부 */
|
|
6480
6526
|
disabled = false;
|
|
6527
|
+
/** 네이티브 button type 속성 */
|
|
6481
6528
|
type = 'button';
|
|
6529
|
+
/** 클릭 시 발생합니다. */
|
|
6482
6530
|
click;
|
|
6483
6531
|
hasWarnedMissingAriaLabel = false;
|
|
6484
6532
|
handleClick = (event) => {
|
|
@@ -6538,14 +6586,14 @@ class SdButton {
|
|
|
6538
6586
|
const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
|
|
6539
6587
|
const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
|
|
6540
6588
|
const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
|
|
6541
|
-
return (hAsync("button", { key: '
|
|
6589
|
+
return (hAsync("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6542
6590
|
'--sd-button-bg': config.color,
|
|
6543
6591
|
'--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6544
6592
|
'--sd-button-border': PRESET_BORDER_COLORS$1[preset],
|
|
6545
6593
|
'--sd-button-text': PRESET_TEXT_COLORS$1[preset],
|
|
6546
6594
|
'--sd-button-icon': PRESET_ICON_COLORS$1[preset],
|
|
6547
6595
|
'--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6548
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6596
|
+
}, onClick: this.handleClick }, hAsync("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
|
|
6549
6597
|
}
|
|
6550
6598
|
static get style() { return sdButtonCss(); }
|
|
6551
6599
|
static get cmpMeta() { return {
|
|
@@ -6798,13 +6846,19 @@ class SdCalendar {
|
|
|
6798
6846
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
6799
6847
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
6800
6848
|
}
|
|
6849
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
6801
6850
|
value = null;
|
|
6851
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
|
|
6802
6852
|
selectable;
|
|
6853
|
+
/** 캘린더에 표시할 이벤트 그룹 목록 */
|
|
6803
6854
|
events;
|
|
6855
|
+
/** 카드 형태의 그림자 여부 */
|
|
6804
6856
|
elevated = false;
|
|
6805
6857
|
currentYear;
|
|
6806
6858
|
currentMonth;
|
|
6859
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
6807
6860
|
update;
|
|
6861
|
+
/** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
|
|
6808
6862
|
viewChange;
|
|
6809
6863
|
dateUtil = useDatePicker();
|
|
6810
6864
|
_eventMapCache;
|
|
@@ -6968,7 +7022,7 @@ class SdCalendar {
|
|
|
6968
7022
|
const eventMap = this.eventMap;
|
|
6969
7023
|
const legend = this.legendItems;
|
|
6970
7024
|
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
6971
|
-
return (hAsync("div", { key: '
|
|
7025
|
+
return (hAsync("div", { key: '1ff9f894078f4b24d52c738509878ee504e02c6b', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: 'a4e894dbf3c808ba1a2a6711997c956c8b4525c0', class: "sd-calendar__header" }, hAsync("div", { key: 'd559c861937fd51cab7e4cc39cfece49bed20037', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '6b793f2a07cc9c26a8b517d7a4d0cc065305a19f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '324fa08a3583543a75cfd6a3cfeb8450586c9265', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'd0951fe7bf84f58348e0ad2ed9e89531daa68242', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '953a382082f5be65a1df7dab23faae8be1975bfa', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'aa751f69f3864875d4e6f16a816660cb8636281f', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '7fe05970e9385cf8b744b16abce6a536ba639d8d', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '0f528c7bde86f64f482a5a6b433beef2456e5832', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '3ddbb8f64f86fda85e5f8c6963cc4e11a95e8a37', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'de37bc97970b23c49757ff103f62a5ef8c3deb2a', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '218d4ff90b67bfcea0fb52984338b5bf486ec6b1', class: "sd-calendar__grid" }, this.cells.map(cell => {
|
|
6972
7026
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
6973
7027
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
6974
7028
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -6981,8 +7035,8 @@ class SdCalendar {
|
|
|
6981
7035
|
'sd-calendar__day--disabled': isDisabled,
|
|
6982
7036
|
}, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
|
|
6983
7037
|
})), legend.length > 0 && [
|
|
6984
|
-
hAsync("span", { key: '
|
|
6985
|
-
hAsync("div", { key: '
|
|
7038
|
+
hAsync("span", { key: '713522194a9052e28b970f5eb6ad34941f7b6459', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
7039
|
+
hAsync("div", { key: 'fffe4cf9c14362c14e04be5cab0172c73490137f', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
|
|
6986
7040
|
]));
|
|
6987
7041
|
}
|
|
6988
7042
|
static get watchers() { return {
|
|
@@ -7190,7 +7244,9 @@ class SdCallout {
|
|
|
7190
7244
|
constructor(hostRef) {
|
|
7191
7245
|
registerInstance(this, hostRef);
|
|
7192
7246
|
}
|
|
7247
|
+
/** 콜아웃 타입 (색상·아이콘 조합 결정) */
|
|
7193
7248
|
type = 'default';
|
|
7249
|
+
/** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
|
|
7194
7250
|
message = [];
|
|
7195
7251
|
get calloutStyle() {
|
|
7196
7252
|
const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
|
|
@@ -7237,7 +7293,7 @@ class SdCallout {
|
|
|
7237
7293
|
}
|
|
7238
7294
|
render() {
|
|
7239
7295
|
const showTitle = this.type === 'danger';
|
|
7240
|
-
return (hAsync("div", { key: '
|
|
7296
|
+
return (hAsync("div", { key: 'd608e8393a52dec8074ae6e8c4c80f59eb88891f', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '9950ae86dab1f76b7009b89b3dcb91ebfcff978b', class: "sd-callout__body" }, this.renderBody())));
|
|
7241
7297
|
}
|
|
7242
7298
|
static get style() { return sdCalloutCss(); }
|
|
7243
7299
|
static get cmpMeta() { return {
|
|
@@ -7259,10 +7315,12 @@ class SdCard {
|
|
|
7259
7315
|
constructor(hostRef) {
|
|
7260
7316
|
registerInstance(this, hostRef);
|
|
7261
7317
|
}
|
|
7318
|
+
/** 테두리 표시 여부 */
|
|
7262
7319
|
bordered = false;
|
|
7320
|
+
/** 카드 루트 엘리먼트에 추가할 클래스 */
|
|
7263
7321
|
sdClass = '';
|
|
7264
7322
|
render() {
|
|
7265
|
-
return (hAsync(Fragment, { key: '
|
|
7323
|
+
return (hAsync(Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, hAsync("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
|
|
7266
7324
|
}
|
|
7267
7325
|
static get style() { return sdCardCss(); }
|
|
7268
7326
|
static get cmpMeta() { return {
|
|
@@ -7285,9 +7343,13 @@ const checkbox = {
|
|
|
7285
7343
|
gap: "8",
|
|
7286
7344
|
icon: "12",
|
|
7287
7345
|
typography: {
|
|
7288
|
-
|
|
7289
|
-
|
|
7290
|
-
|
|
7346
|
+
"default": {
|
|
7347
|
+
fontWeight: "400",
|
|
7348
|
+
fontSize: "12",
|
|
7349
|
+
lineHeight: "20"},
|
|
7350
|
+
selected: {
|
|
7351
|
+
fontWeight: "500"}
|
|
7352
|
+
},
|
|
7291
7353
|
unchecked: {
|
|
7292
7354
|
bg: {
|
|
7293
7355
|
"default": "#FFFFFF",
|
|
@@ -7313,7 +7375,8 @@ const checkbox = {
|
|
|
7313
7375
|
},
|
|
7314
7376
|
label: {
|
|
7315
7377
|
"default": "#222222",
|
|
7316
|
-
inverse: "#FFFFFF"
|
|
7378
|
+
inverse: "#FFFFFF",
|
|
7379
|
+
disabled: "#888888"
|
|
7317
7380
|
},
|
|
7318
7381
|
bg: {
|
|
7319
7382
|
disabled: "#E1E1E1"
|
|
@@ -7334,9 +7397,10 @@ const CHECKBOX_LAYOUT = {
|
|
|
7334
7397
|
iconSize: checkboxTokens.checkbox.icon,
|
|
7335
7398
|
};
|
|
7336
7399
|
const CHECKBOX_TYPOGRAPHY = {
|
|
7337
|
-
fontSize: checkboxTokens.checkbox.typography.fontSize,
|
|
7338
|
-
lineHeight: checkboxTokens.checkbox.typography.lineHeight,
|
|
7339
|
-
fontWeight: checkboxTokens.checkbox.typography.fontWeight,
|
|
7400
|
+
fontSize: checkboxTokens.checkbox.typography.default.fontSize,
|
|
7401
|
+
lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
|
|
7402
|
+
fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
|
|
7403
|
+
selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
|
|
7340
7404
|
};
|
|
7341
7405
|
const CHECKBOX_COLORS = {
|
|
7342
7406
|
unchecked: {
|
|
@@ -7354,13 +7418,14 @@ const CHECKBOX_COLORS = {
|
|
|
7354
7418
|
},
|
|
7355
7419
|
label: checkboxTokens.checkbox.label.default,
|
|
7356
7420
|
labelInverse: checkboxTokens.checkbox.label.inverse,
|
|
7421
|
+
labelDisabled: checkboxTokens.checkbox.label.disabled,
|
|
7357
7422
|
disabled: {
|
|
7358
7423
|
bg: checkboxTokens.checkbox.bg.disabled,
|
|
7359
7424
|
border: checkboxTokens.checkbox.border.disabled,
|
|
7360
7425
|
},
|
|
7361
7426
|
};
|
|
7362
7427
|
|
|
7363
|
-
const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
|
|
7428
|
+
const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{display:inline-flex;flex-direction:column;font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox__label::after{content:attr(data-text);height:0;font-weight:var(--sd-checkbox-font-weight-selected);overflow:hidden;visibility:hidden;pointer-events:none}sd-checkbox .sd-checkbox--checked .sd-checkbox__label,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__label{font-weight:var(--sd-checkbox-font-weight-selected)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__label{color:var(--sd-checkbox-label-disabled)}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
|
|
7364
7429
|
|
|
7365
7430
|
class SdCheckbox {
|
|
7366
7431
|
constructor(hostRef) {
|
|
@@ -7459,25 +7524,27 @@ class SdCheckbox {
|
|
|
7459
7524
|
'--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
|
|
7460
7525
|
'--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
|
|
7461
7526
|
'--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
|
|
7527
|
+
'--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
|
|
7462
7528
|
'--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
|
|
7463
7529
|
'--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
|
|
7464
7530
|
'--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
|
|
7465
7531
|
'--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
|
|
7466
7532
|
'--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
|
|
7467
7533
|
'--sd-checkbox-label-color': CHECKBOX_COLORS.label,
|
|
7534
|
+
'--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
|
|
7468
7535
|
'--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
|
|
7469
7536
|
'--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
|
|
7470
7537
|
'--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
|
|
7471
7538
|
'--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
|
|
7472
7539
|
'--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
|
|
7473
7540
|
};
|
|
7474
|
-
return (hAsync("label", { key: '
|
|
7541
|
+
return (hAsync("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
|
|
7475
7542
|
this.inputEl = el;
|
|
7476
|
-
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '
|
|
7543
|
+
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
|
|
7477
7544
|
? CHECKBOX_COLORS.checked.iconDisabled
|
|
7478
7545
|
: this.inverse
|
|
7479
7546
|
? CHECKBOX_COLORS.checked.iconInverse
|
|
7480
|
-
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '
|
|
7547
|
+
: CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
|
|
7481
7548
|
}
|
|
7482
7549
|
static get watchers() { return {
|
|
7483
7550
|
"value": [{
|
|
@@ -7579,18 +7646,29 @@ class SdChip {
|
|
|
7579
7646
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
7580
7647
|
}
|
|
7581
7648
|
get el() { return getElement(this); }
|
|
7649
|
+
/** 폼 연동용 name 속성 */
|
|
7582
7650
|
name = '';
|
|
7651
|
+
/** 칩 텍스트 값 */
|
|
7583
7652
|
value = '';
|
|
7653
|
+
/** 에러 상태 여부 */
|
|
7584
7654
|
error = false;
|
|
7655
|
+
/** 비활성 상태 여부 */
|
|
7585
7656
|
disabled = false;
|
|
7657
|
+
/** 인라인 편집 가능 여부 */
|
|
7586
7658
|
editable = true;
|
|
7659
|
+
/** 편집 중 표시할 placeholder */
|
|
7587
7660
|
placeholder = '';
|
|
7661
|
+
/** 유효성 검사 규칙 목록 */
|
|
7588
7662
|
rules = [];
|
|
7589
7663
|
internalValue = '';
|
|
7590
7664
|
isEditing = false;
|
|
7665
|
+
/** 편집 완료 시 새 값을 전달합니다. */
|
|
7591
7666
|
update;
|
|
7667
|
+
/** 삭제 버튼 클릭 시 발생합니다. */
|
|
7592
7668
|
delete;
|
|
7669
|
+
/** 편집 모드 진입 시 발생합니다. */
|
|
7593
7670
|
focus;
|
|
7671
|
+
/** 편집 모드 이탈 시 발생합니다. */
|
|
7594
7672
|
blur;
|
|
7595
7673
|
inputEl;
|
|
7596
7674
|
draftValue = '';
|
|
@@ -7616,6 +7694,7 @@ class SdChip {
|
|
|
7616
7694
|
disconnectedCallback() {
|
|
7617
7695
|
this.unregisterFromForm();
|
|
7618
7696
|
}
|
|
7697
|
+
/** 유효성 검사를 실행합니다. */
|
|
7619
7698
|
async sdValidate() {
|
|
7620
7699
|
if (!this.rules || this.rules.length === 0) {
|
|
7621
7700
|
this.error = false;
|
|
@@ -7631,6 +7710,7 @@ class SdChip {
|
|
|
7631
7710
|
this.error = false;
|
|
7632
7711
|
return true;
|
|
7633
7712
|
}
|
|
7713
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
7634
7714
|
async sdReset() {
|
|
7635
7715
|
this.internalValue = '';
|
|
7636
7716
|
this.value = '';
|
|
@@ -7639,17 +7719,21 @@ class SdChip {
|
|
|
7639
7719
|
this.isEditing = false;
|
|
7640
7720
|
this.shouldInitInput = false;
|
|
7641
7721
|
}
|
|
7722
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7642
7723
|
async sdResetValidate() {
|
|
7643
7724
|
this.error = false;
|
|
7644
7725
|
}
|
|
7726
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7645
7727
|
async sdResetValidation() {
|
|
7646
7728
|
this.error = false;
|
|
7647
7729
|
}
|
|
7730
|
+
/** 편집 모드로 전환하여 포커스를 이동합니다. */
|
|
7648
7731
|
async sdFocus() {
|
|
7649
7732
|
if (this.disabled)
|
|
7650
7733
|
return;
|
|
7651
7734
|
this.enterEditMode();
|
|
7652
7735
|
}
|
|
7736
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
7653
7737
|
async sdGetNativeElement() {
|
|
7654
7738
|
return this.inputEl ?? null;
|
|
7655
7739
|
}
|
|
@@ -7792,7 +7876,7 @@ class SdChip {
|
|
|
7792
7876
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7793
7877
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7794
7878
|
};
|
|
7795
|
-
return (hAsync("span", { key: '
|
|
7879
|
+
return (hAsync("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
|
|
7796
7880
|
'sd-chip': true,
|
|
7797
7881
|
[`sd-chip--${state}`]: true,
|
|
7798
7882
|
'sd-chip--disabled': this.disabled,
|
|
@@ -8025,7 +8109,7 @@ const CHIP_INPUT_SUGGESTIONS = {
|
|
|
8025
8109
|
emptyLineHeight: '20px',
|
|
8026
8110
|
};
|
|
8027
8111
|
|
|
8028
|
-
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8112
|
+
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8029
8113
|
|
|
8030
8114
|
class SdChipInput {
|
|
8031
8115
|
constructor(hostRef) {
|
|
@@ -8037,31 +8121,56 @@ class SdChipInput {
|
|
|
8037
8121
|
}
|
|
8038
8122
|
static SUGGESTIONS_VIEWPORT_PADDING = 8;
|
|
8039
8123
|
get host() { return getElement(this); }
|
|
8124
|
+
/** 칩 값 목록 */
|
|
8040
8125
|
values = [];
|
|
8126
|
+
/** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
|
|
8041
8127
|
errors = [];
|
|
8128
|
+
/** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
|
|
8042
8129
|
disabledChips = [];
|
|
8130
|
+
/** 입력 필드 크기 */
|
|
8043
8131
|
size = 'sm';
|
|
8132
|
+
/** 비활성 상태 여부 */
|
|
8044
8133
|
disabled = false;
|
|
8134
|
+
/** 입력 placeholder */
|
|
8045
8135
|
placeholder = '입력해 주세요.';
|
|
8136
|
+
/** 폼 연동용 name 속성 */
|
|
8046
8137
|
name = nanoid$1();
|
|
8138
|
+
/** 유효성 검사 규칙 목록 */
|
|
8047
8139
|
rules = [];
|
|
8140
|
+
/** 에러 상태 여부 */
|
|
8048
8141
|
error = false;
|
|
8142
|
+
/** 입력 초기화 버튼 표시 여부 */
|
|
8049
8143
|
useReset = false;
|
|
8144
|
+
/** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
|
|
8050
8145
|
maxCount;
|
|
8146
|
+
/** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
|
|
8051
8147
|
duplicateLabel;
|
|
8148
|
+
/** 자동완성 후보 목록 */
|
|
8052
8149
|
suggestions = [];
|
|
8150
|
+
/** 자동완성 목록 로딩 중 여부 */
|
|
8053
8151
|
loadingSuggestions = false;
|
|
8152
|
+
/** 추천 항목 목록 (입력값이 없을 때 표시) */
|
|
8054
8153
|
recommendedItems = [];
|
|
8154
|
+
/** 추천 항목 로딩 중 여부 */
|
|
8055
8155
|
loadingRecommendedItems = false;
|
|
8056
8156
|
// sd-field props
|
|
8157
|
+
/** 레이블 텍스트 */
|
|
8057
8158
|
label = '';
|
|
8159
|
+
/** 레이블 너비 */
|
|
8058
8160
|
labelWidth = '';
|
|
8161
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8059
8162
|
hint = '';
|
|
8163
|
+
/** 에러 메시지 */
|
|
8060
8164
|
errorMessage = '';
|
|
8165
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8061
8166
|
width = '';
|
|
8167
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
8062
8168
|
status;
|
|
8169
|
+
/** 레이블 영역 아이콘 */
|
|
8063
8170
|
icon = undefined;
|
|
8171
|
+
/** 레이블 툴팁 텍스트 */
|
|
8064
8172
|
labelTooltip = '';
|
|
8173
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8065
8174
|
labelTooltipProps = null;
|
|
8066
8175
|
internalValues = [];
|
|
8067
8176
|
internalErrors = [];
|
|
@@ -8128,19 +8237,27 @@ class SdChipInput {
|
|
|
8128
8237
|
}
|
|
8129
8238
|
return this.disabledChips?.[index] ?? false;
|
|
8130
8239
|
}
|
|
8240
|
+
/** 칩 목록 변경 시 전체 값 배열을 전달합니다. */
|
|
8131
8241
|
update;
|
|
8242
|
+
/** 입력 필드 포커스 진입 시 발생합니다. */
|
|
8132
8243
|
focusEvent;
|
|
8244
|
+
/** 입력 필드 포커스 이탈 시 발생합니다. */
|
|
8133
8245
|
blurEvent;
|
|
8246
|
+
/** 입력값 변경 시 현재 입력 중인 문자열을 전달합니다. */
|
|
8134
8247
|
inputEvent;
|
|
8248
|
+
/** 유효성 검사를 실행합니다. */
|
|
8135
8249
|
async sdValidate() {
|
|
8136
8250
|
return this.formField?.sdValidate();
|
|
8137
8251
|
}
|
|
8252
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8138
8253
|
async sdReset() {
|
|
8139
8254
|
return this.formField?.sdReset();
|
|
8140
8255
|
}
|
|
8256
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8141
8257
|
async sdResetValidate() {
|
|
8142
8258
|
return this.formField?.sdResetValidation();
|
|
8143
8259
|
}
|
|
8260
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
8144
8261
|
async sdFocus() {
|
|
8145
8262
|
return this.formField?.sdFocus();
|
|
8146
8263
|
}
|
|
@@ -8401,6 +8518,7 @@ class SdChipInput {
|
|
|
8401
8518
|
};
|
|
8402
8519
|
const suggestionItemStyle = {
|
|
8403
8520
|
display: 'flex',
|
|
8521
|
+
flexShrink: '0',
|
|
8404
8522
|
alignItems: 'center',
|
|
8405
8523
|
gap: CHIP_INPUT_SUGGESTIONS.itemGap,
|
|
8406
8524
|
padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
|
|
@@ -8424,7 +8542,7 @@ class SdChipInput {
|
|
|
8424
8542
|
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8425
8543
|
color: CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8426
8544
|
};
|
|
8427
|
-
return (hAsync("sd-field", { key: '
|
|
8545
|
+
return (hAsync("sd-field", { key: '7135f3f1fe7c76276bcd780ba2cfdf391925a57b', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '8566ae7bc3bedaf6be95f29267587c49c090e73f', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: '00d9946c93d2e961466fa8baf617fc4ddc12d701', class: {
|
|
8428
8546
|
'sd-chip-input__field': true,
|
|
8429
8547
|
'sd-chip-input__field--filled': this.inputValue !== '',
|
|
8430
8548
|
'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
|
|
@@ -8432,7 +8550,7 @@ class SdChipInput {
|
|
|
8432
8550
|
? this.inputValue
|
|
8433
8551
|
: this.internalValues.length === 0
|
|
8434
8552
|
? this.placeholder
|
|
8435
|
-
: '' }, hAsync("input", { key: '
|
|
8553
|
+
: '' }, hAsync("input", { key: '2845394a5eaec2d5f37876a0e8938fa9d3f38263', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: '7cec3884a4cace3d688e80006d6240d321ac60f3', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '761539e242437841a2703d95903f9d6b5fe3d69f', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '1b448973ba3573c94ae09b74cd24720c8ea011d3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '90d7582f35b8e7a8ee3c1dba717fa87c13c1de19', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: '9495c87a4916829fe955f054a8c97d2b3fa04914', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: 'ac4afd8511316f0b4b957c312a051b02fc72f20e', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: '3b6855a7ad2ef48415160544a19014d59ca38ec1', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
|
|
8436
8554
|
'sd-chip-input__suggestion-item': true,
|
|
8437
8555
|
'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
|
|
8438
8556
|
}, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
|
|
@@ -8577,9 +8695,13 @@ class SdCircleProgress {
|
|
|
8577
8695
|
constructor(hostRef) {
|
|
8578
8696
|
registerInstance(this, hostRef);
|
|
8579
8697
|
}
|
|
8698
|
+
/** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
|
|
8580
8699
|
indeterminate = false;
|
|
8700
|
+
/** 진행률 (0~100) */
|
|
8581
8701
|
value = 0;
|
|
8702
|
+
/** 색상 테마 */
|
|
8582
8703
|
type = 'primary';
|
|
8704
|
+
/** 원 하단에 표시할 레이블 텍스트 */
|
|
8583
8705
|
label;
|
|
8584
8706
|
get clampedValue() {
|
|
8585
8707
|
if (!Number.isFinite(this.value))
|
|
@@ -8603,7 +8725,7 @@ class SdCircleProgress {
|
|
|
8603
8725
|
}
|
|
8604
8726
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
8605
8727
|
const showPercent = !this.indeterminate;
|
|
8606
|
-
return (hAsync(Host, { key: '
|
|
8728
|
+
return (hAsync(Host, { key: '1af8807d6ce19c4326e67ae55bd40620b83e9435', style: hostStyle }, hAsync("svg", { key: '21c2c5898ddf6f78b03964f3365e82382f90ce48', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '1d9b2e95f767008af2a5d836f16e6e47e751677a', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '1c8f4a5b1ae8f643debf68452317d0bcc0b4ab36', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '1b15cdd56b3ac0d254d4a5304f40d3c5b1710b8d', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'e830db48529d87ddf788834d8731a576582662af', class: "sd-circle-progress__label" }, this.label)));
|
|
8607
8729
|
}
|
|
8608
8730
|
static get style() { return sdCircleProgressCss(); }
|
|
8609
8731
|
static get cmpMeta() { return {
|
|
@@ -8652,20 +8774,35 @@ class SdConfirmModal {
|
|
|
8652
8774
|
hasSlottedContent = false;
|
|
8653
8775
|
customContentRef;
|
|
8654
8776
|
slotObserver;
|
|
8777
|
+
/** 모달 타입 (아이콘·버튼 색상 결정) */
|
|
8655
8778
|
type = 'positive';
|
|
8779
|
+
/** 모달 제목 */
|
|
8656
8780
|
modalTitle = '';
|
|
8781
|
+
/** 제목 엘리먼트에 추가할 클래스 */
|
|
8657
8782
|
titleClass = '';
|
|
8783
|
+
/** 콘텐츠 박스 상단 메시지 목록 */
|
|
8658
8784
|
topMessage = [];
|
|
8785
|
+
/** 콘텐츠 박스 하단 메시지 목록 */
|
|
8659
8786
|
bottomMessage = [];
|
|
8787
|
+
/** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
|
|
8660
8788
|
mainButtonName;
|
|
8789
|
+
/** 확인 버튼 레이블 */
|
|
8661
8790
|
mainButtonLabel = '확인';
|
|
8791
|
+
/** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
|
|
8662
8792
|
subButtonLabel = '';
|
|
8793
|
+
/** 콘텐츠 박스에 표시할 태그 프리셋 */
|
|
8663
8794
|
tagPreset = 'square_sm_grey';
|
|
8795
|
+
/** 콘텐츠 박스에 표시할 태그 레이블 */
|
|
8664
8796
|
tagLabel = '';
|
|
8797
|
+
/** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
|
|
8665
8798
|
slotLabel = '';
|
|
8799
|
+
/** 콘텐츠 박스에 직접 삽입할 HTMLElement */
|
|
8666
8800
|
tagContents;
|
|
8801
|
+
/** 닫기 버튼 클릭 시 발생합니다. */
|
|
8667
8802
|
close;
|
|
8803
|
+
/** 취소 버튼 클릭 시 발생합니다. */
|
|
8668
8804
|
cancel;
|
|
8805
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
8669
8806
|
ok;
|
|
8670
8807
|
componentWillLoad() {
|
|
8671
8808
|
this.syncHasSlottedContent();
|
|
@@ -8719,9 +8856,9 @@ class SdConfirmModal {
|
|
|
8719
8856
|
const type = this.resolvedType;
|
|
8720
8857
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
8721
8858
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
8722
|
-
return (hAsync("div", { key: '
|
|
8859
|
+
return (hAsync("div", { key: '26270c4ca645f0e7e245b4bd40423bcf09029e22', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '672b73221f8638eff70c3074614fcc90b489702e', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '895dda6ba69d41f33f9465fb9db28739da28d2e6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'ace6b9da4421c28e2bb828c60cae1c1cc7547f9a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: '3370fe954c33f8ce6a643fcc9b19f299682b43e8', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a6bc182c638e909a821353c188d2ef558452e17', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: 'dba37f4ab114f3641a9f287d123fb7f94e49c00a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
8723
8860
|
this.customContentRef = el;
|
|
8724
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '
|
|
8861
|
+
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'ed29da73d968017c44cd61540139fac24592ea70', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '608287c021f4191dcea0a0b5798381cbc8742170', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a67c309617c6e1f30aa9167587e8cbb9fb961482', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '3c1a698a8276e2924f62cf1c7e472bd34ac581a1', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
|
|
8725
8862
|
}
|
|
8726
8863
|
static get style() { return sdConfirmModalCss(); }
|
|
8727
8864
|
static get cmpMeta() { return {
|
|
@@ -8756,15 +8893,25 @@ class SdDateBox {
|
|
|
8756
8893
|
this.click = createEvent(this, "sdClick", 7);
|
|
8757
8894
|
this.mouseOver = createEvent(this, "sdMouseOver", 7);
|
|
8758
8895
|
}
|
|
8896
|
+
/** 표시할 날짜 값 */
|
|
8759
8897
|
date = null;
|
|
8898
|
+
/** 비활성 상태 여부 */
|
|
8760
8899
|
disabled = false;
|
|
8900
|
+
/** 선택된 날짜 여부 */
|
|
8761
8901
|
selected = false;
|
|
8902
|
+
/** 범위 시작일 여부 */
|
|
8762
8903
|
isStartDate = false;
|
|
8904
|
+
/** 범위 종료일 여부 */
|
|
8763
8905
|
isEndDate = false;
|
|
8906
|
+
/** 오늘 날짜 여부 */
|
|
8764
8907
|
isToday = false;
|
|
8908
|
+
/** 선택 범위 내 날짜 여부 */
|
|
8765
8909
|
inRange = false;
|
|
8910
|
+
/** 범위 선택에서의 역할 (start | end | 없음) */
|
|
8766
8911
|
type = '';
|
|
8912
|
+
/** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
|
|
8767
8913
|
click;
|
|
8914
|
+
/** 날짜 hover 시 해당 날짜 값을 전달합니다. */
|
|
8768
8915
|
mouseOver;
|
|
8769
8916
|
handleClickDate() {
|
|
8770
8917
|
if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
|
|
@@ -8779,7 +8926,7 @@ class SdDateBox {
|
|
|
8779
8926
|
this.mouseOver?.emit(this.date);
|
|
8780
8927
|
}
|
|
8781
8928
|
render() {
|
|
8782
|
-
return (hAsync("div", { key: '
|
|
8929
|
+
return (hAsync("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8783
8930
|
'sd-date-box': true,
|
|
8784
8931
|
'sd-hoverable': !this.disabled || !this.selected || this.type === '',
|
|
8785
8932
|
'sd-date-box--disabled': this.disabled,
|
|
@@ -8795,7 +8942,7 @@ class SdDateBox {
|
|
|
8795
8942
|
e.preventDefault();
|
|
8796
8943
|
this.handleClickDate();
|
|
8797
8944
|
}
|
|
8798
|
-
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: '
|
|
8945
|
+
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: 'acbd57ac0300ca143f1e75780b59b5fc107d537f', class: "sd-date-box__content" }, hAsync("div", { key: 'aeff50640c285cfd75d5592e67c97e5ec55eb00c', class: "sd-date-box__label" }, this.date))));
|
|
8799
8946
|
}
|
|
8800
8947
|
static get style() { return sdDateBoxCss(); }
|
|
8801
8948
|
static get cmpMeta() { return {
|
|
@@ -8919,43 +9066,66 @@ class SdDatePicker {
|
|
|
8919
9066
|
}
|
|
8920
9067
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
8921
9068
|
get el() { return getElement(this); }
|
|
9069
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
8922
9070
|
value = null;
|
|
9071
|
+
/** 입력 필드 크기 */
|
|
8923
9072
|
size = 'sm';
|
|
9073
|
+
/** 날짜 미선택 시 표시할 placeholder */
|
|
8924
9074
|
placeholder = 'YYYY-MM-DD';
|
|
9075
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
8925
9076
|
selectable;
|
|
9077
|
+
/** 비활성 상태 여부 */
|
|
8926
9078
|
disabled = false;
|
|
9079
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8927
9080
|
width = '';
|
|
8928
9081
|
// sd-field 공통 props
|
|
9082
|
+
/** 레이블 텍스트 */
|
|
8929
9083
|
label = '';
|
|
9084
|
+
/** 레이블 너비 */
|
|
8930
9085
|
labelWidth = '';
|
|
9086
|
+
/** 필드 우측 어드온 레이블 */
|
|
8931
9087
|
addonLabel = '';
|
|
9088
|
+
/** 어드온 정렬 방향 */
|
|
8932
9089
|
addonAlign = 'start';
|
|
9090
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8933
9091
|
hint = '';
|
|
9092
|
+
/** 에러 메시지 */
|
|
8934
9093
|
errorMessage = '';
|
|
9094
|
+
/** 유효성 검사 규칙 목록 */
|
|
8935
9095
|
rules = [];
|
|
9096
|
+
/** 에러 상태 여부 */
|
|
8936
9097
|
error = false;
|
|
9098
|
+
/** 레이블 영역 아이콘 */
|
|
8937
9099
|
icon = undefined;
|
|
9100
|
+
/** 레이블 툴팁 텍스트 */
|
|
8938
9101
|
labelTooltip = '';
|
|
9102
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8939
9103
|
labelTooltipProps = null;
|
|
8940
9104
|
isOpen = false;
|
|
8941
9105
|
isAnimatingOut = false;
|
|
8942
9106
|
focused = false;
|
|
8943
9107
|
hovered = false;
|
|
9108
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
8944
9109
|
update;
|
|
9110
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
8945
9111
|
viewChange;
|
|
8946
9112
|
triggerRef;
|
|
8947
9113
|
formField;
|
|
8948
9114
|
closeAnimationTimer;
|
|
9115
|
+
/** 폼 연동용 name 속성 */
|
|
8949
9116
|
name = nanoid$1();
|
|
8950
9117
|
watchIsOpen(newValue) {
|
|
8951
9118
|
this.focused = newValue;
|
|
8952
9119
|
}
|
|
9120
|
+
/** 유효성 검사를 실행합니다. */
|
|
8953
9121
|
async sdValidate() {
|
|
8954
9122
|
return this.formField?.sdValidate();
|
|
8955
9123
|
}
|
|
9124
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8956
9125
|
async sdReset() {
|
|
8957
9126
|
return this.formField?.sdReset();
|
|
8958
9127
|
}
|
|
9128
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8959
9129
|
async sdResetValidate() {
|
|
8960
9130
|
return this.formField?.sdResetValidation();
|
|
8961
9131
|
}
|
|
@@ -9008,9 +9178,9 @@ class SdDatePicker {
|
|
|
9008
9178
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9009
9179
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9010
9180
|
};
|
|
9011
|
-
return (hAsync("sd-field", { key: '
|
|
9181
|
+
return (hAsync("sd-field", { key: '2fc699a41a6646404e5cbd29688f14c61b466c56', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '33c690078e2511657bfe3747d81cc1333b021353', class: "sd-date-picker", ref: el => {
|
|
9012
9182
|
this.triggerRef = el;
|
|
9013
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9183
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'b5248eecbf1c4e8eca4e5b23206b7bebe7034280', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'f89b8688a43b9c702d75b8c5587b30626c7fd2db', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '4b293972c1b860f6d85be57fb72689c94699aeae', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9014
9184
|
}
|
|
9015
9185
|
static get watchers() { return {
|
|
9016
9186
|
"isOpen": [{
|
|
@@ -9061,10 +9231,15 @@ class SdDatePickerTrigger {
|
|
|
9061
9231
|
registerInstance(this, hostRef);
|
|
9062
9232
|
this.triggerClick = createEvent(this, "sdTriggerClick", 7);
|
|
9063
9233
|
}
|
|
9234
|
+
/** 표시할 날짜 텍스트 */
|
|
9064
9235
|
displayText = '';
|
|
9236
|
+
/** 입력 힌트 텍스트 */
|
|
9065
9237
|
placeholder = 'YYYY-MM-DD';
|
|
9238
|
+
/** 비활성 상태 여부 */
|
|
9066
9239
|
disabled = false;
|
|
9240
|
+
/** 트리거 크기 */
|
|
9067
9241
|
size = 'sm';
|
|
9242
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
9068
9243
|
triggerClick;
|
|
9069
9244
|
handleClick = () => {
|
|
9070
9245
|
if (this.disabled)
|
|
@@ -9093,7 +9268,7 @@ class SdDatePickerTrigger {
|
|
|
9093
9268
|
? DATEPICKER_COLORS.icon.disabled
|
|
9094
9269
|
: DATEPICKER_COLORS.icon.default,
|
|
9095
9270
|
};
|
|
9096
|
-
return (hAsync("div", { key: '
|
|
9271
|
+
return (hAsync("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
9097
9272
|
'sd-date-picker-trigger': true,
|
|
9098
9273
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
9099
9274
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -9101,7 +9276,7 @@ class SdDatePickerTrigger {
|
|
|
9101
9276
|
e.preventDefault();
|
|
9102
9277
|
this.handleClick();
|
|
9103
9278
|
}
|
|
9104
|
-
} }, hAsync("sd-icon", { key: '
|
|
9279
|
+
} }, hAsync("sd-icon", { key: 'e87c63032774389064c56f3212882727c1091b53', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '3876d7e9c08771de796ab04106190baf45625f0f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
9105
9280
|
}
|
|
9106
9281
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
9107
9282
|
static get cmpMeta() { return {
|
|
@@ -9136,44 +9311,68 @@ class SdDateRangePicker {
|
|
|
9136
9311
|
}
|
|
9137
9312
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9138
9313
|
get el() { return getElement(this); }
|
|
9314
|
+
/** 선택된 날짜 범위 [시작일, 종료일] (YYYY-MM-DD) */
|
|
9139
9315
|
value = null;
|
|
9316
|
+
/** 입력 필드 크기 */
|
|
9140
9317
|
size = 'sm';
|
|
9318
|
+
/** 미선택 시 표시할 placeholder */
|
|
9141
9319
|
placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
|
|
9320
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
9142
9321
|
selectable;
|
|
9322
|
+
/** 최대 선택 가능한 날짜 범위 (일 단위) */
|
|
9143
9323
|
maxRange;
|
|
9324
|
+
/** 비활성 상태 여부 */
|
|
9144
9325
|
disabled = false;
|
|
9326
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
9145
9327
|
width = '';
|
|
9146
9328
|
// sd-field 공통 props
|
|
9329
|
+
/** 레이블 텍스트 */
|
|
9147
9330
|
label = '';
|
|
9331
|
+
/** 레이블 너비 */
|
|
9148
9332
|
labelWidth = '';
|
|
9333
|
+
/** 필드 우측 어드온 레이블 */
|
|
9149
9334
|
addonLabel = '';
|
|
9335
|
+
/** 어드온 정렬 방향 */
|
|
9150
9336
|
addonAlign = 'start';
|
|
9337
|
+
/** 필드 하단 힌트 텍스트 */
|
|
9151
9338
|
hint = '';
|
|
9339
|
+
/** 에러 메시지 */
|
|
9152
9340
|
errorMessage = '';
|
|
9341
|
+
/** 유효성 검사 규칙 목록 */
|
|
9153
9342
|
rules = [];
|
|
9343
|
+
/** 에러 상태 여부 */
|
|
9154
9344
|
error = false;
|
|
9345
|
+
/** 레이블 영역 아이콘 */
|
|
9155
9346
|
icon = undefined;
|
|
9347
|
+
/** 레이블 툴팁 텍스트 */
|
|
9156
9348
|
labelTooltip = '';
|
|
9349
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
9157
9350
|
labelTooltipProps = null;
|
|
9158
9351
|
isOpen = false;
|
|
9159
9352
|
isAnimatingOut = false;
|
|
9160
9353
|
focused = false;
|
|
9161
9354
|
hovered = false;
|
|
9355
|
+
/** 날짜 범위 선택 완료 시 [시작일, 종료일]을 전달합니다. */
|
|
9162
9356
|
update;
|
|
9357
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
9163
9358
|
viewChange;
|
|
9164
9359
|
triggerRef;
|
|
9165
9360
|
formField;
|
|
9166
9361
|
closeAnimationTimer;
|
|
9362
|
+
/** 폼 연동용 name 속성 */
|
|
9167
9363
|
name = nanoid$1();
|
|
9168
9364
|
watchIsOpen(newValue) {
|
|
9169
9365
|
this.focused = newValue;
|
|
9170
9366
|
}
|
|
9367
|
+
/** 유효성 검사를 실행합니다. */
|
|
9171
9368
|
async sdValidate() {
|
|
9172
9369
|
return this.formField?.sdValidate();
|
|
9173
9370
|
}
|
|
9371
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
9174
9372
|
async sdReset() {
|
|
9175
9373
|
return this.formField?.sdReset();
|
|
9176
9374
|
}
|
|
9375
|
+
/** 유효성 상태만 초기화합니다. */
|
|
9177
9376
|
async sdResetValidate() {
|
|
9178
9377
|
return this.formField?.sdResetValidation();
|
|
9179
9378
|
}
|
|
@@ -9230,9 +9429,9 @@ class SdDateRangePicker {
|
|
|
9230
9429
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9231
9430
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9232
9431
|
};
|
|
9233
|
-
return (hAsync("sd-field", { key: '
|
|
9432
|
+
return (hAsync("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
|
|
9234
9433
|
this.triggerRef = el;
|
|
9235
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9434
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9236
9435
|
}
|
|
9237
9436
|
static get watchers() { return {
|
|
9238
9437
|
"isOpen": [{
|
|
@@ -9285,15 +9484,20 @@ class SdDateRangePickerCalendar {
|
|
|
9285
9484
|
this.select = createEvent(this, "sdSelect", 7);
|
|
9286
9485
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
9287
9486
|
}
|
|
9487
|
+
/** 선택된 날짜 범위 [시작일, 종료일] */
|
|
9288
9488
|
value = null;
|
|
9489
|
+
/** 선택 가능한 날짜 범위 제한 */
|
|
9289
9490
|
selectable;
|
|
9491
|
+
/** 최대 선택 가능 일 수 */
|
|
9290
9492
|
maxRange;
|
|
9291
9493
|
currentYear;
|
|
9292
9494
|
currentMonth;
|
|
9293
9495
|
pendingStart = '';
|
|
9294
9496
|
hoverDate = '';
|
|
9295
9497
|
displayValue = null;
|
|
9498
|
+
/** 날짜 범위 선택 시 발생합니다. */
|
|
9296
9499
|
select;
|
|
9500
|
+
/** 달력 뷰가 변경될 때 발생합니다. */
|
|
9297
9501
|
viewChange;
|
|
9298
9502
|
dateUtil = useDatePicker();
|
|
9299
9503
|
componentWillLoad() {
|
|
@@ -9521,7 +9725,7 @@ class SdDateRangePickerCalendar {
|
|
|
9521
9725
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
9522
9726
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
9523
9727
|
};
|
|
9524
|
-
return (hAsync(Fragment, { key: '
|
|
9728
|
+
return (hAsync(Fragment, { key: '351cf65dcf32acba409f32c5bfa0681989093f32' }, hAsync("div", { key: '99f29a4e401d2ebaea0ebb55c2a4e55d55f23a7f', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '251fe254a39d7093633be176c413608abd3c47c1', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'fb69fea401d17f3862b4a21162747161246c42e2', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
9525
9729
|
}
|
|
9526
9730
|
static get watchers() { return {
|
|
9527
9731
|
"value": [{
|
|
@@ -9742,10 +9946,15 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9742
9946
|
this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
|
|
9743
9947
|
}
|
|
9744
9948
|
get el() { return getElement(this); }
|
|
9949
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
9745
9950
|
name = 'primary_sm';
|
|
9951
|
+
/** 버튼 레이블 */
|
|
9746
9952
|
label = '';
|
|
9953
|
+
/** 드롭다운 메뉴 아이템 목록 */
|
|
9747
9954
|
items = [];
|
|
9955
|
+
/** 비활성 상태 여부 */
|
|
9748
9956
|
disabled = false;
|
|
9957
|
+
/** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
|
|
9749
9958
|
split = false;
|
|
9750
9959
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9751
9960
|
isOpen = false;
|
|
@@ -9755,8 +9964,11 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9755
9964
|
splitContainerRef;
|
|
9756
9965
|
menuRef;
|
|
9757
9966
|
closeAnimationTimer;
|
|
9967
|
+
/** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
|
|
9758
9968
|
click;
|
|
9969
|
+
/** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
|
|
9759
9970
|
buttonClick;
|
|
9971
|
+
/** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
|
|
9760
9972
|
dropDownShow;
|
|
9761
9973
|
handleOpenChange(isOpen) {
|
|
9762
9974
|
this.onDropdownToggle(isOpen);
|
|
@@ -9773,11 +9985,13 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9773
9985
|
if (this.closeAnimationTimer)
|
|
9774
9986
|
clearTimeout(this.closeAnimationTimer);
|
|
9775
9987
|
}
|
|
9988
|
+
/** 드롭다운 메뉴를 엽니다. */
|
|
9776
9989
|
async sdOpen() {
|
|
9777
9990
|
if (this.disabled || this.items.length === 0)
|
|
9778
9991
|
return;
|
|
9779
9992
|
this.isOpen = true;
|
|
9780
9993
|
}
|
|
9994
|
+
/** 드롭다운 메뉴를 닫습니다. */
|
|
9781
9995
|
async sdClose() {
|
|
9782
9996
|
this.closeDropdown();
|
|
9783
9997
|
}
|
|
@@ -10038,25 +10252,44 @@ class SdField {
|
|
|
10038
10252
|
registerInstance(this, hostRef);
|
|
10039
10253
|
}
|
|
10040
10254
|
get el() { return getElement(this); }
|
|
10255
|
+
/** 폼 연동용 name 속성 */
|
|
10041
10256
|
name = '';
|
|
10257
|
+
/** 유효성 검사 규칙 목록 */
|
|
10042
10258
|
rules = [];
|
|
10259
|
+
/** 에러 상태 여부 */
|
|
10043
10260
|
error = false;
|
|
10261
|
+
/** 비활성 상태 여부 */
|
|
10044
10262
|
disabled = false;
|
|
10263
|
+
/** 읽기 전용 여부 */
|
|
10045
10264
|
readonly = false;
|
|
10265
|
+
/** 호버 상태 여부 */
|
|
10046
10266
|
hovered = false;
|
|
10267
|
+
/** 포커스 상태 여부 */
|
|
10047
10268
|
focused = false;
|
|
10269
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10048
10270
|
status;
|
|
10271
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10049
10272
|
hint = '';
|
|
10273
|
+
/** 에러 메시지 */
|
|
10050
10274
|
errorMessage = '';
|
|
10275
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10051
10276
|
width = '';
|
|
10277
|
+
/** 필드 크기 */
|
|
10052
10278
|
size = 'sm';
|
|
10053
10279
|
// props - label
|
|
10280
|
+
/** 레이블 텍스트 */
|
|
10054
10281
|
label = '';
|
|
10282
|
+
/** 레이블 너비 */
|
|
10055
10283
|
labelWidth = '';
|
|
10284
|
+
/** 필드 우측 어드온 레이블 */
|
|
10056
10285
|
addonLabel = '';
|
|
10286
|
+
/** 어드온 정렬 방향 */
|
|
10057
10287
|
addonAlign = 'start';
|
|
10288
|
+
/** 레이블 영역 아이콘 */
|
|
10058
10289
|
icon = undefined;
|
|
10290
|
+
/** 레이블 툴팁 텍스트 */
|
|
10059
10291
|
labelTooltip = '';
|
|
10292
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10060
10293
|
labelTooltipProps = null;
|
|
10061
10294
|
errorMsg = '';
|
|
10062
10295
|
hostElement = null;
|
|
@@ -10121,6 +10354,7 @@ class SdField {
|
|
|
10121
10354
|
form.sdUnregisterField(this);
|
|
10122
10355
|
});
|
|
10123
10356
|
}
|
|
10357
|
+
/** 유효성 검사를 실행합니다. */
|
|
10124
10358
|
async sdValidate() {
|
|
10125
10359
|
if (!this.rules || this.rules.length === 0)
|
|
10126
10360
|
return true;
|
|
@@ -10134,15 +10368,18 @@ class SdField {
|
|
|
10134
10368
|
this.setError(false, '');
|
|
10135
10369
|
return true;
|
|
10136
10370
|
}
|
|
10371
|
+
/** 필드 값과 유효성 상태를 초기화합니다. */
|
|
10137
10372
|
async sdReset() {
|
|
10138
10373
|
if (this.hostElement) {
|
|
10139
10374
|
this.hostElement.value = null;
|
|
10140
10375
|
}
|
|
10141
10376
|
this.setError(false, '');
|
|
10142
10377
|
}
|
|
10378
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10143
10379
|
async sdResetValidation() {
|
|
10144
10380
|
this.setError(false, '');
|
|
10145
10381
|
}
|
|
10382
|
+
/** 필드에 포커스를 이동하고 스크롤합니다. */
|
|
10146
10383
|
async sdFocus() {
|
|
10147
10384
|
this.hostElement?.focus?.();
|
|
10148
10385
|
this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
@@ -10206,21 +10443,21 @@ class SdField {
|
|
|
10206
10443
|
: {}),
|
|
10207
10444
|
}
|
|
10208
10445
|
: {};
|
|
10209
|
-
return (hAsync("div", { key: '
|
|
10446
|
+
return (hAsync("div", { key: 'baf943d77385c9c02e2fe1d938f9622bd858129c', class: {
|
|
10210
10447
|
'sd-field': true,
|
|
10211
10448
|
'sd-field--has-label': this.label !== '',
|
|
10212
10449
|
'sd-field--has-addon': addon !== '',
|
|
10213
10450
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
10214
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '
|
|
10451
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'f5f204929ef4a4e1a260d7609bc00d9a1fe998f4', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'eff02956e5aae08691b2850bb0d1978865a446f9', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
10215
10452
|
? {
|
|
10216
10453
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
10217
10454
|
flex: 'none',
|
|
10218
10455
|
}
|
|
10219
|
-
: {} }, hAsync("div", { key: '
|
|
10456
|
+
: {} }, hAsync("div", { key: 'bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14', class: {
|
|
10220
10457
|
'sd-field__control': true,
|
|
10221
10458
|
'sd-field__control--has-addon': addon !== '',
|
|
10222
|
-
} }, addon && (hAsync("div", { key: '
|
|
10223
|
-
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '
|
|
10459
|
+
} }, addon && (hAsync("div", { key: '4cef1308de0b709d5924ff7a02ee5bd3b78c1502', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '7fdfca555d80f5409082c43967224fd8108a6f29', name: this.icon.name, size: this.icon.size ??
|
|
10460
|
+
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: 'c523813390db6f6f4acce3ffb8377820ffb95fad' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
10224
10461
|
}
|
|
10225
10462
|
renderLabel(label) {
|
|
10226
10463
|
if (label == null || label === '')
|
|
@@ -10316,38 +10553,65 @@ class SdFilePicker {
|
|
|
10316
10553
|
this.reject = createEvent(this, "sdReject", 7);
|
|
10317
10554
|
}
|
|
10318
10555
|
get el() { return getElement(this); }
|
|
10556
|
+
/** 선택된 파일 값 */
|
|
10319
10557
|
value = null;
|
|
10558
|
+
/** 파일 미선택 시 표시할 placeholder */
|
|
10320
10559
|
placeholder = 'Click to upload';
|
|
10560
|
+
/** 비활성 상태 여부 */
|
|
10321
10561
|
disabled = false;
|
|
10562
|
+
/** sd-field 없이 인라인으로 표시하는 모드 여부 */
|
|
10322
10563
|
inline = false;
|
|
10564
|
+
/** 다중 파일 선택 여부 */
|
|
10323
10565
|
multiple = false;
|
|
10566
|
+
/** 허용할 파일 타입 (input accept 속성과 동일) */
|
|
10324
10567
|
accept;
|
|
10568
|
+
/** 파일 한 개의 최대 크기 (bytes) */
|
|
10325
10569
|
maxFileSize;
|
|
10570
|
+
/** 전체 파일의 최대 용량 합계 (bytes) */
|
|
10326
10571
|
maxTotalSize;
|
|
10572
|
+
/** 최대 파일 개수 */
|
|
10327
10573
|
maxFiles;
|
|
10328
10574
|
// sd-field 패스스루 props
|
|
10575
|
+
/** 폼 연동용 name 속성 */
|
|
10329
10576
|
name = nanoid$1();
|
|
10577
|
+
/** 레이블 텍스트 */
|
|
10330
10578
|
label = '';
|
|
10579
|
+
/** 레이블 너비 */
|
|
10331
10580
|
labelWidth = '';
|
|
10581
|
+
/** 필드 우측 어드온 레이블 */
|
|
10332
10582
|
addonLabel = '';
|
|
10583
|
+
/** 어드온 정렬 방향 */
|
|
10333
10584
|
addonAlign = 'start';
|
|
10585
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10334
10586
|
hint = '';
|
|
10587
|
+
/** 에러 메시지 */
|
|
10335
10588
|
errorMessage = '';
|
|
10589
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10336
10590
|
width = '';
|
|
10591
|
+
/** 유효성 검사 규칙 목록 */
|
|
10337
10592
|
rules;
|
|
10593
|
+
/** 에러 상태 여부 */
|
|
10338
10594
|
error = false;
|
|
10595
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10339
10596
|
status;
|
|
10597
|
+
/** 레이블 영역 아이콘 */
|
|
10340
10598
|
icon = undefined;
|
|
10599
|
+
/** 레이블 툴팁 텍스트 */
|
|
10341
10600
|
labelTooltip = '';
|
|
10601
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10342
10602
|
labelTooltipProps = null;
|
|
10603
|
+
/** 포커스 상태 여부 */
|
|
10343
10604
|
focused = false;
|
|
10605
|
+
/** 호버 상태 여부 */
|
|
10344
10606
|
hovered = false;
|
|
10345
10607
|
internalValue = null;
|
|
10346
10608
|
showTooltip = false;
|
|
10347
10609
|
fileInputRef;
|
|
10348
10610
|
fileNamesRef;
|
|
10349
10611
|
formField;
|
|
10612
|
+
/** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
|
|
10350
10613
|
update;
|
|
10614
|
+
/** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
|
|
10351
10615
|
reject;
|
|
10352
10616
|
valueChanged(newValue) {
|
|
10353
10617
|
this.internalValue = newValue;
|
|
@@ -10358,9 +10622,11 @@ class SdFilePicker {
|
|
|
10358
10622
|
componentDidUpdate() {
|
|
10359
10623
|
this.checkOverflow();
|
|
10360
10624
|
}
|
|
10625
|
+
/** 유효성 검사를 실행합니다. */
|
|
10361
10626
|
async sdValidate() {
|
|
10362
10627
|
return this.formField?.sdValidate() ?? Promise.resolve(true);
|
|
10363
10628
|
}
|
|
10629
|
+
/** 파일 값과 유효성 상태를 초기화합니다. */
|
|
10364
10630
|
async sdReset() {
|
|
10365
10631
|
const clearedValue = this.multiple ? [] : null;
|
|
10366
10632
|
this.value = clearedValue;
|
|
@@ -10370,6 +10636,7 @@ class SdFilePicker {
|
|
|
10370
10636
|
}
|
|
10371
10637
|
await this.formField?.sdResetValidation();
|
|
10372
10638
|
}
|
|
10639
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10373
10640
|
async sdResetValidate() {
|
|
10374
10641
|
await this.formField?.sdResetValidation();
|
|
10375
10642
|
}
|
|
@@ -10582,12 +10849,19 @@ class SdFloatingPopover {
|
|
|
10582
10849
|
this.close = createEvent(this, "sdClose", 7);
|
|
10583
10850
|
}
|
|
10584
10851
|
get el() { return getElement(this); }
|
|
10852
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
10585
10853
|
to = 'body';
|
|
10854
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
10586
10855
|
parentRef = null;
|
|
10856
|
+
/** [x, y] 오프셋 (px) */
|
|
10587
10857
|
offset = [0, 0];
|
|
10588
|
-
|
|
10858
|
+
/** z-index */
|
|
10859
|
+
zIndex = 996;
|
|
10860
|
+
/** 콘텐츠를 표시할 방향 */
|
|
10589
10861
|
placement = 'bottom';
|
|
10862
|
+
/** 표시 여부 */
|
|
10590
10863
|
open = false;
|
|
10864
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
10591
10865
|
close;
|
|
10592
10866
|
container;
|
|
10593
10867
|
wrapper;
|
|
@@ -10642,11 +10916,25 @@ class SdFloatingPopover {
|
|
|
10642
10916
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
10643
10917
|
return el instanceof HTMLElement ? el : document.body;
|
|
10644
10918
|
}
|
|
10919
|
+
/**
|
|
10920
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
10921
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
10922
|
+
*/
|
|
10923
|
+
resolveZIndex() {
|
|
10924
|
+
const base = this.zIndex ?? 996;
|
|
10925
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
10926
|
+
if (!layer)
|
|
10927
|
+
return base;
|
|
10928
|
+
const container = layer.closest('.sd-modal-container');
|
|
10929
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
10930
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
10931
|
+
return Math.max(base, modalZIndex + 1);
|
|
10932
|
+
}
|
|
10645
10933
|
createWrapper() {
|
|
10646
10934
|
this.wrapper = document.createElement('div');
|
|
10647
10935
|
Object.assign(this.wrapper.style, {
|
|
10648
10936
|
position: 'fixed',
|
|
10649
|
-
zIndex:
|
|
10937
|
+
zIndex: this.resolveZIndex().toString(),
|
|
10650
10938
|
transition: 'opacity 0.4s',
|
|
10651
10939
|
top: '-9999px',
|
|
10652
10940
|
left: '-9999px',
|
|
@@ -10733,7 +11021,7 @@ class SdFloatingPopover {
|
|
|
10733
11021
|
}
|
|
10734
11022
|
}
|
|
10735
11023
|
render() {
|
|
10736
|
-
return hAsync("slot", { key: '
|
|
11024
|
+
return hAsync("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
|
|
10737
11025
|
}
|
|
10738
11026
|
static get style() { return sdFloatingPortalCss(); }
|
|
10739
11027
|
static get cmpMeta() { return {
|
|
@@ -10759,9 +11047,12 @@ class SdForm {
|
|
|
10759
11047
|
this.sdSubmit = createEvent(this, "sdSubmit", 7);
|
|
10760
11048
|
this.sdValidationError = createEvent(this, "sdValidationError", 7);
|
|
10761
11049
|
}
|
|
11050
|
+
/** form 엘리먼트에 추가할 클래스 */
|
|
10762
11051
|
formClass = '';
|
|
10763
11052
|
fields = [];
|
|
11053
|
+
/** 유효성 검사 통과 후 submit 시 발생합니다. */
|
|
10764
11054
|
sdSubmit;
|
|
11055
|
+
/** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
|
|
10765
11056
|
sdValidationError;
|
|
10766
11057
|
sortFieldsByDomOrder() {
|
|
10767
11058
|
this.fields.sort((a, b) => {
|
|
@@ -10779,6 +11070,7 @@ class SdForm {
|
|
|
10779
11070
|
return 0;
|
|
10780
11071
|
});
|
|
10781
11072
|
}
|
|
11073
|
+
/** 폼에 필드를 등록합니다. */
|
|
10782
11074
|
async sdRegisterField(field) {
|
|
10783
11075
|
if (field.name === '') {
|
|
10784
11076
|
console.warn('[sd-form] field.name is required');
|
|
@@ -10789,6 +11081,7 @@ class SdForm {
|
|
|
10789
11081
|
this.fields.push(field);
|
|
10790
11082
|
this.sortFieldsByDomOrder();
|
|
10791
11083
|
}
|
|
11084
|
+
/** 폼에서 필드를 제거합니다. */
|
|
10792
11085
|
async sdUnregisterField(fieldOrName) {
|
|
10793
11086
|
if (typeof fieldOrName === 'string') {
|
|
10794
11087
|
const index = this.fields.findIndex(field => field.name === fieldOrName);
|
|
@@ -10809,13 +11102,16 @@ class SdForm {
|
|
|
10809
11102
|
}
|
|
10810
11103
|
return { valid: invalidFields.length === 0, invalidFields };
|
|
10811
11104
|
}
|
|
11105
|
+
/** 모든 등록된 필드의 유효성 검사를 실행합니다. */
|
|
10812
11106
|
async sdValidate() {
|
|
10813
11107
|
const { valid } = await this.runValidation();
|
|
10814
11108
|
return valid;
|
|
10815
11109
|
}
|
|
11110
|
+
/** 모든 필드의 값과 유효성 상태를 초기화합니다. */
|
|
10816
11111
|
async sdReset() {
|
|
10817
11112
|
this.fields.forEach(f => f.sdReset());
|
|
10818
11113
|
}
|
|
11114
|
+
/** 모든 필드의 유효성 상태만 초기화합니다. */
|
|
10819
11115
|
async sdResetValidation() {
|
|
10820
11116
|
this.fields.forEach(f => f.sdResetValidation());
|
|
10821
11117
|
}
|
|
@@ -10829,7 +11125,7 @@ class SdForm {
|
|
|
10829
11125
|
this.sdSubmit.emit();
|
|
10830
11126
|
}
|
|
10831
11127
|
render() {
|
|
10832
|
-
return (hAsync("form", { key: '
|
|
11128
|
+
return (hAsync("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
|
|
10833
11129
|
}
|
|
10834
11130
|
static get cmpMeta() { return {
|
|
10835
11131
|
"$flags$": 772,
|
|
@@ -10967,14 +11263,21 @@ class SdGhostButton {
|
|
|
10967
11263
|
registerInstance(this, hostRef);
|
|
10968
11264
|
this.click = createEvent(this, "sdClick", 7);
|
|
10969
11265
|
}
|
|
11266
|
+
/** 버튼에 표시할 아이콘명 */
|
|
10970
11267
|
icon;
|
|
11268
|
+
/** 버튼 크기 */
|
|
10971
11269
|
size = 'sm';
|
|
11270
|
+
/** 버튼 색상 의도 */
|
|
10972
11271
|
intent = 'default';
|
|
11272
|
+
/** 스크린리더용 접근성 레이블 */
|
|
10973
11273
|
ariaLabel = '';
|
|
11274
|
+
/** 호버 시 표시할 툴팁 텍스트 */
|
|
10974
11275
|
tooltipText;
|
|
11276
|
+
/** 비활성 상태 여부 */
|
|
10975
11277
|
disabled = false;
|
|
10976
11278
|
get hostEl() { return getElement(this); }
|
|
10977
11279
|
isTooltipOpen = false;
|
|
11280
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
10978
11281
|
click;
|
|
10979
11282
|
hasWarnedMissingAriaLabel = false;
|
|
10980
11283
|
componentWillLoad() {
|
|
@@ -10989,10 +11292,18 @@ class SdGhostButton {
|
|
|
10989
11292
|
}
|
|
10990
11293
|
this.click.emit(event);
|
|
10991
11294
|
};
|
|
10992
|
-
handleMouseEnter = () => {
|
|
10993
|
-
|
|
10994
|
-
|
|
10995
|
-
|
|
11295
|
+
handleMouseEnter = () => {
|
|
11296
|
+
this.isTooltipOpen = true;
|
|
11297
|
+
};
|
|
11298
|
+
handleMouseLeave = () => {
|
|
11299
|
+
this.isTooltipOpen = false;
|
|
11300
|
+
};
|
|
11301
|
+
handleFocus = () => {
|
|
11302
|
+
this.isTooltipOpen = true;
|
|
11303
|
+
};
|
|
11304
|
+
handleBlur = () => {
|
|
11305
|
+
this.isTooltipOpen = false;
|
|
11306
|
+
};
|
|
10996
11307
|
componentWillRender() {
|
|
10997
11308
|
this.warnIfMissingAriaLabel();
|
|
10998
11309
|
}
|
|
@@ -11017,7 +11328,7 @@ class SdGhostButton {
|
|
|
11017
11328
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
11018
11329
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
11019
11330
|
const hasTooltip = tooltipText.length > 0;
|
|
11020
|
-
return (hAsync("button", { key: '
|
|
11331
|
+
return (hAsync("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
|
|
11021
11332
|
'sd-ghost-button': true,
|
|
11022
11333
|
'sd-ghost-button--disabled': this.disabled,
|
|
11023
11334
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -11026,7 +11337,7 @@ class SdGhostButton {
|
|
|
11026
11337
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
11027
11338
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
11028
11339
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
11029
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '
|
|
11340
|
+
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '36ef78d79a99da1fd26c282ef68293b9fb9f87b1', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, hAsync("div", { key: 'a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: 'a263167142b891add0a32900504f541dcb3a4959', name: "square_xs_grey", label: tooltipText })))), hAsync("sd-icon", { key: 'ba90e9b489b4f43577313052635db598e3d30037', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
11030
11341
|
}
|
|
11031
11342
|
static get style() { return sdGhostButtonCss(); }
|
|
11032
11343
|
static get cmpMeta() { return {
|
|
@@ -11165,11 +11476,17 @@ class SdGuide {
|
|
|
11165
11476
|
registerInstance(this, hostRef);
|
|
11166
11477
|
}
|
|
11167
11478
|
get el() { return getElement(this); }
|
|
11479
|
+
/** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
|
|
11168
11480
|
type = 'tip';
|
|
11481
|
+
/** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
|
|
11169
11482
|
label = '';
|
|
11483
|
+
/** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
|
|
11170
11484
|
message = '';
|
|
11485
|
+
/** notion 타입일 때 클릭 시 이동할 URL */
|
|
11171
11486
|
url = '';
|
|
11487
|
+
/** 팝업 제목 (없으면 type에 따른 기본값 사용) */
|
|
11172
11488
|
popupTitle = '';
|
|
11489
|
+
/** 팝업 너비 (px, 없으면 426px) */
|
|
11173
11490
|
popupWidth;
|
|
11174
11491
|
popupShow = false;
|
|
11175
11492
|
guideRef;
|
|
@@ -11231,10 +11548,10 @@ class SdGuide {
|
|
|
11231
11548
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
11232
11549
|
if (isActive)
|
|
11233
11550
|
buttonClasses.push('sd-guide__button--active');
|
|
11234
|
-
return (hAsync("div", { key: '
|
|
11551
|
+
return (hAsync("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
|
|
11235
11552
|
...this.guideStyle,
|
|
11236
11553
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
11237
|
-
} }, hAsync("sd-ghost-button", { key: '
|
|
11554
|
+
} }, hAsync("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
11238
11555
|
}
|
|
11239
11556
|
// 현재 2depth까지만 스타일 적용
|
|
11240
11557
|
renderListItem(message, depth = 0) {
|
|
@@ -11553,6 +11870,7 @@ class SdIcon {
|
|
|
11553
11870
|
rotate;
|
|
11554
11871
|
/** 접근성을 위한 라벨 */
|
|
11555
11872
|
label;
|
|
11873
|
+
/** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
|
|
11556
11874
|
iconStyle = {};
|
|
11557
11875
|
getIconClasses() {
|
|
11558
11876
|
const classes = ['sd-icon'];
|
|
@@ -11626,46 +11944,81 @@ class SdInput {
|
|
|
11626
11944
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
11627
11945
|
}
|
|
11628
11946
|
get host() { return getElement(this); }
|
|
11947
|
+
/** 입력 값 */
|
|
11629
11948
|
value = null;
|
|
11949
|
+
/** 입력 타입 */
|
|
11630
11950
|
type = 'text';
|
|
11951
|
+
/** 입력 크기 */
|
|
11631
11952
|
size = 'sm';
|
|
11953
|
+
/** 필드 우측 어드온 레이블 */
|
|
11632
11954
|
addonLabel = '';
|
|
11955
|
+
/** 어드온 정렬 방향 */
|
|
11633
11956
|
addonAlign = 'start';
|
|
11957
|
+
/** 플레이스홀더 텍스트 */
|
|
11634
11958
|
placeholder = '입력해 주세요.';
|
|
11959
|
+
/** 비활성 상태 여부 */
|
|
11635
11960
|
disabled = false;
|
|
11961
|
+
/** 값이 있을 때 지우기 버튼 표시 여부 */
|
|
11636
11962
|
clearable = false;
|
|
11963
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
11637
11964
|
width = '';
|
|
11965
|
+
/** 유효성 검사 규칙 목록 */
|
|
11638
11966
|
rules = [];
|
|
11967
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
11639
11968
|
autoFocus = false;
|
|
11969
|
+
/** autocomplete 속성 값 */
|
|
11640
11970
|
autocomplete = '';
|
|
11971
|
+
/** 최대 입력 글자 수 */
|
|
11641
11972
|
maxlength;
|
|
11973
|
+
/** 최소 입력 글자 수 */
|
|
11642
11974
|
minlength;
|
|
11975
|
+
/** 모바일 키보드 타입 */
|
|
11643
11976
|
inputmode;
|
|
11977
|
+
/** 모바일 Enter 키 힌트 */
|
|
11644
11978
|
enterkeyhint;
|
|
11979
|
+
/** 맞춤법 검사 여부 */
|
|
11645
11980
|
spellcheck = false;
|
|
11981
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
11646
11982
|
status;
|
|
11983
|
+
/** 필드 하단 힌트 텍스트 */
|
|
11647
11984
|
hint = '';
|
|
11985
|
+
/** 에러 메시지 */
|
|
11648
11986
|
errorMessage = '';
|
|
11987
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
11649
11988
|
inputClass = '';
|
|
11989
|
+
/** 읽기 전용 여부 */
|
|
11650
11990
|
readonly = false;
|
|
11991
|
+
/** 에러 상태 여부 */
|
|
11651
11992
|
error = false;
|
|
11993
|
+
/** 포커스 상태 여부 */
|
|
11652
11994
|
focused = false;
|
|
11995
|
+
/** 호버 상태 여부 */
|
|
11653
11996
|
hovered = false;
|
|
11654
11997
|
// props - label
|
|
11998
|
+
/** 레이블 텍스트 */
|
|
11655
11999
|
label = '';
|
|
12000
|
+
/** 레이블 너비 */
|
|
11656
12001
|
labelWidth = '';
|
|
12002
|
+
/** 레이블 영역 아이콘 */
|
|
11657
12003
|
icon = undefined;
|
|
12004
|
+
/** 레이블 툴팁 텍스트 */
|
|
11658
12005
|
labelTooltip = '';
|
|
12006
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
11659
12007
|
labelTooltipProps = null;
|
|
11660
12008
|
// props - custom styles
|
|
12009
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
11661
12010
|
inputStyle = {};
|
|
11662
12011
|
internalValue = null;
|
|
11663
12012
|
passwordVisible = false;
|
|
11664
12013
|
nativeEl = undefined;
|
|
11665
12014
|
formField;
|
|
12015
|
+
/** 폼 연동용 name 속성 */
|
|
11666
12016
|
name = nanoid$1();
|
|
12017
|
+
/** 값이 변경될 때 발생합니다. */
|
|
11667
12018
|
input;
|
|
12019
|
+
/** 포커스될 때 발생합니다. */
|
|
11668
12020
|
focus;
|
|
12021
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
11669
12022
|
blur;
|
|
11670
12023
|
valueChanged(newValue) {
|
|
11671
12024
|
this.internalValue = newValue;
|
|
@@ -11676,18 +12029,23 @@ class SdInput {
|
|
|
11676
12029
|
this.input?.emit(this.value);
|
|
11677
12030
|
}
|
|
11678
12031
|
}
|
|
12032
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
11679
12033
|
async sdGetNativeElement() {
|
|
11680
12034
|
return this.nativeEl || null;
|
|
11681
12035
|
}
|
|
12036
|
+
/** 유효성 검사를 실행합니다. */
|
|
11682
12037
|
async sdValidate() {
|
|
11683
12038
|
this.formField?.sdValidate();
|
|
11684
12039
|
}
|
|
12040
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
11685
12041
|
async sdReset() {
|
|
11686
12042
|
this.formField?.sdReset();
|
|
11687
12043
|
}
|
|
12044
|
+
/** 유효성 상태만 초기화합니다. */
|
|
11688
12045
|
async sdResetValidate() {
|
|
11689
12046
|
this.formField?.sdResetValidation();
|
|
11690
12047
|
}
|
|
12048
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
11691
12049
|
async sdFocus() {
|
|
11692
12050
|
this.formField?.sdFocus();
|
|
11693
12051
|
}
|
|
@@ -11735,12 +12093,12 @@ class SdInput {
|
|
|
11735
12093
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
11736
12094
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
11737
12095
|
};
|
|
11738
|
-
return (hAsync("sd-field", { key: '
|
|
12096
|
+
return (hAsync("sd-field", { key: '7444ee5ebb482fe9c4f837114456cab90de6b3aa', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0dbb6bc35522fb2d0c6d6d147756954ed96d2467', class: "sd-input__content" }, hAsync("slot", { key: 'd5e8488bc3e29bd671bb337051d7b768c3c37c4b', name: "prefix" }), hAsync("input", { key: '9dff73dbc5af19b0e2f19e95a26ad32211761484', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'f1020b3ab68d5db6f83a2d6ba84722faa76c354e', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '547a309bb4434e558cf8b33fe8bcd51533d36cd5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
11739
12097
|
if (this.disabled || this.readonly)
|
|
11740
12098
|
return;
|
|
11741
12099
|
this.internalValue = '';
|
|
11742
12100
|
await this.formField?.sdValidate();
|
|
11743
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
12101
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '39c77e164b08d4a0169f76c1b8dc519e0f39d993', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
11744
12102
|
if (this.disabled || this.readonly)
|
|
11745
12103
|
return;
|
|
11746
12104
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -11933,7 +12291,9 @@ class SdKeyValueTable {
|
|
|
11933
12291
|
* - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
11934
12292
|
*/
|
|
11935
12293
|
radius = 'default';
|
|
12294
|
+
/** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
|
|
11936
12295
|
change;
|
|
12296
|
+
/** search 패널의 검색 버튼 클릭 시 발생합니다. */
|
|
11937
12297
|
searchEvent;
|
|
11938
12298
|
emit = (name, value) => {
|
|
11939
12299
|
this.change.emit({ name, value });
|
|
@@ -12169,9 +12529,13 @@ class SdLinearProgress {
|
|
|
12169
12529
|
constructor(hostRef) {
|
|
12170
12530
|
registerInstance(this, hostRef);
|
|
12171
12531
|
}
|
|
12532
|
+
/** true이면 진행률 없이 무한 애니메이션 표시 */
|
|
12172
12533
|
indeterminate = false;
|
|
12534
|
+
/** 진행률 (0–100) */
|
|
12173
12535
|
value = 0;
|
|
12536
|
+
/** 색상 타입 */
|
|
12174
12537
|
type = 'primary';
|
|
12538
|
+
/** 하단에 표시할 레이블 텍스트 */
|
|
12175
12539
|
label;
|
|
12176
12540
|
get clampedValue() {
|
|
12177
12541
|
if (!Number.isFinite(this.value))
|
|
@@ -12179,8 +12543,7 @@ class SdLinearProgress {
|
|
|
12179
12543
|
return Math.max(0, Math.min(100, this.value));
|
|
12180
12544
|
}
|
|
12181
12545
|
render() {
|
|
12182
|
-
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ??
|
|
12183
|
-
LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12546
|
+
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ?? LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12184
12547
|
const valueColor = this.clampedValue === 0 ? LINEAR_PROGRESS_COLORS.valueZero : fillColor;
|
|
12185
12548
|
const hostStyle = {
|
|
12186
12549
|
'--sd-linear-progress-track-color': LINEAR_PROGRESS_COLORS.track,
|
|
@@ -12196,7 +12559,7 @@ class SdLinearProgress {
|
|
|
12196
12559
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
12197
12560
|
};
|
|
12198
12561
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
12199
|
-
return (hAsync(Host, { key: '
|
|
12562
|
+
return (hAsync(Host, { key: '232520f9e720d13e28bbac8f61864e943f03c12e', style: hostStyle }, hAsync("div", { key: '6c5659e65da3f6d01c1029d9441f8619c304935c', class: "sd-linear-progress__track" }, hAsync("div", { key: '81f1c5ca5e4422e33f5505eda07fd4a04b24465c', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'd3542eddf302448742a3564c6f48d4d3f71d3733', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: 'f9c650167b1d9653a6745399226e480f15c19f65', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'fa8759f871902a4c3ebf0d982fe9b63d956a2f24', class: "sd-linear-progress__label" }, this.label)));
|
|
12200
12563
|
}
|
|
12201
12564
|
static get style() { return sdLinearProgressCss(); }
|
|
12202
12565
|
static get cmpMeta() { return {
|
|
@@ -12222,18 +12585,20 @@ class SdLoadingContainer {
|
|
|
12222
12585
|
}
|
|
12223
12586
|
visible = false;
|
|
12224
12587
|
message = '';
|
|
12588
|
+
/** 로딩 오버레이를 표시합니다. */
|
|
12225
12589
|
async show(options = {}) {
|
|
12226
12590
|
this.message = options.message ?? '';
|
|
12227
12591
|
this.visible = true;
|
|
12228
12592
|
}
|
|
12593
|
+
/** 로딩 오버레이를 숨깁니다. */
|
|
12229
12594
|
async hide() {
|
|
12230
12595
|
this.visible = false;
|
|
12231
12596
|
}
|
|
12232
12597
|
render() {
|
|
12233
|
-
return (hAsync("div", { key: '
|
|
12598
|
+
return (hAsync("div", { key: 'b8efbc6422fded2472a6e575c9a7102375f90600', class: {
|
|
12234
12599
|
'sd-loading-container': true,
|
|
12235
12600
|
'sd-loading-container--visible': this.visible,
|
|
12236
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
12601
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '1ff327157be008e278636d49069945e553c1ecbd', class: "sd-loading-container__backdrop" }), hAsync("div", { key: 'd55d2ab11528e35c04e8dd98f8c10d0f913a536e', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '29060ee18eb4e5a47bae25462abe11b8d5abfb0c', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'cf0478da282996ba4f7ecb920d8262181369af8a', class: "sd-loading-container__message" }, this.message))));
|
|
12237
12602
|
}
|
|
12238
12603
|
static get style() { return sdLoadingContainerCss(); }
|
|
12239
12604
|
static get cmpMeta() { return {
|
|
@@ -12285,13 +12650,21 @@ class SdLoadingModal {
|
|
|
12285
12650
|
registerInstance(this, hostRef);
|
|
12286
12651
|
this.click = createEvent(this, "sdClick", 7);
|
|
12287
12652
|
}
|
|
12653
|
+
/** 모달 상태 (loading: 로딩 중, error: 에러) */
|
|
12288
12654
|
state = 'loading';
|
|
12655
|
+
/** 표시할 메시지 (배열이면 여러 줄로 렌더링) */
|
|
12289
12656
|
message = '';
|
|
12657
|
+
/** 하단 버튼 표시 여부 */
|
|
12290
12658
|
useButton = false;
|
|
12659
|
+
/** 버튼 레이블 (없으면 state에 따른 기본값 사용) */
|
|
12291
12660
|
buttonLabel = '';
|
|
12661
|
+
/** 모달 너비 */
|
|
12292
12662
|
width;
|
|
12663
|
+
/** 모달 높이 */
|
|
12293
12664
|
height;
|
|
12665
|
+
/** sd-circle-progress에 전달할 진행률 (0–100) */
|
|
12294
12666
|
progress;
|
|
12667
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
12295
12668
|
click;
|
|
12296
12669
|
get resolvedState() {
|
|
12297
12670
|
return this.state ?? 'loading';
|
|
@@ -12330,7 +12703,7 @@ class SdLoadingModal {
|
|
|
12330
12703
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
12331
12704
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
12332
12705
|
};
|
|
12333
|
-
return (hAsync(Host, { key: '
|
|
12706
|
+
return (hAsync(Host, { key: '0f3719ca22408ff2739f3997e693fe0e17cb32ab', style: hostStyle }, hAsync("div", { key: '25501b81a4514315bd3b408bf958f549b099c5a5', class: "sd-loading-modal" }, hAsync("div", { key: 'f5e6cf6334454a8455f95544a934fc245bddbbe6', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '7629809572661e28f9564db1d06e882cb64580e8', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '36e1b978e1cc4ef56b8072d1d6dab83807eca951', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '218cb045df7b0dafc49024fc905bd88c7b12fcff', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
12334
12707
|
}
|
|
12335
12708
|
static get style() { return sdLoadingModalCss(); }
|
|
12336
12709
|
static get cmpMeta() { return {
|
|
@@ -12453,14 +12826,17 @@ const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-con
|
|
|
12453
12826
|
|
|
12454
12827
|
let modalIdCounter = 0;
|
|
12455
12828
|
const ANIMATION_DURATION = 350;
|
|
12829
|
+
const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
|
|
12456
12830
|
class SdModalContainer {
|
|
12457
12831
|
constructor(hostRef) {
|
|
12458
12832
|
registerInstance(this, hostRef);
|
|
12459
12833
|
}
|
|
12460
12834
|
get el() { return getElement(this); }
|
|
12835
|
+
/** 마지막 모달이 닫힐 때 자신을 DOM에서 제거할지 여부 */
|
|
12461
12836
|
autoRemove = false;
|
|
12462
12837
|
entries = [];
|
|
12463
12838
|
layerRefs = new Map();
|
|
12839
|
+
/** 확인 모달을 열고 모달 ID를 반환합니다. */
|
|
12464
12840
|
async open(options, modalRef) {
|
|
12465
12841
|
const id = `modal-${++modalIdCounter}`;
|
|
12466
12842
|
const modalEl = this.createConfirmModal(id, options);
|
|
@@ -12475,6 +12851,7 @@ class SdModalContainer {
|
|
|
12475
12851
|
});
|
|
12476
12852
|
return id;
|
|
12477
12853
|
}
|
|
12854
|
+
/** 로딩 모달을 열고 모달 ID를 반환합니다. */
|
|
12478
12855
|
async openLoading(options, modalRef) {
|
|
12479
12856
|
const id = `modal-${++modalIdCounter}`;
|
|
12480
12857
|
const modalEl = this.createLoadingModal(id, options);
|
|
@@ -12489,6 +12866,7 @@ class SdModalContainer {
|
|
|
12489
12866
|
});
|
|
12490
12867
|
return id;
|
|
12491
12868
|
}
|
|
12869
|
+
/** 커스텀 엘리먼트를 모달로 등록하고 모달 ID를 반환합니다. */
|
|
12492
12870
|
async createCustom(element, options, modalRef) {
|
|
12493
12871
|
const id = `modal-${++modalIdCounter}`;
|
|
12494
12872
|
element.setAttribute('data-modal-id', id);
|
|
@@ -12522,6 +12900,7 @@ class SdModalContainer {
|
|
|
12522
12900
|
return;
|
|
12523
12901
|
this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
|
|
12524
12902
|
modalEl.classList.add('sd-modal-container__modal--visible');
|
|
12903
|
+
this.focusInitialElement(modalEl);
|
|
12525
12904
|
});
|
|
12526
12905
|
});
|
|
12527
12906
|
}
|
|
@@ -12533,12 +12912,14 @@ class SdModalContainer {
|
|
|
12533
12912
|
unregisterModal(entry.id);
|
|
12534
12913
|
}
|
|
12535
12914
|
}
|
|
12915
|
+
/** 지정한 ID의 모달을 닫습니다. */
|
|
12536
12916
|
async dismissById(id, reason) {
|
|
12537
12917
|
const entry = this.entries.find(e => e.id === id);
|
|
12538
12918
|
if (!entry)
|
|
12539
12919
|
return;
|
|
12540
12920
|
this.requestDismiss(id, reason);
|
|
12541
12921
|
}
|
|
12922
|
+
/** 열려있는 모달의 props를 동적으로 업데이트합니다. */
|
|
12542
12923
|
async update(id, props) {
|
|
12543
12924
|
const entry = this.entries.find(e => e.id === id && !e.closing);
|
|
12544
12925
|
if (!entry)
|
|
@@ -12551,7 +12932,14 @@ class SdModalContainer {
|
|
|
12551
12932
|
this.applyProps(entry.modalEl, props);
|
|
12552
12933
|
}
|
|
12553
12934
|
mountEntry(entry) {
|
|
12554
|
-
|
|
12935
|
+
const activeElement = typeof document !== 'undefined' ? document.activeElement : null;
|
|
12936
|
+
this.entries = [
|
|
12937
|
+
...(this.entries ?? []),
|
|
12938
|
+
{
|
|
12939
|
+
...entry,
|
|
12940
|
+
previousActiveElement: activeElement,
|
|
12941
|
+
},
|
|
12942
|
+
];
|
|
12555
12943
|
registerModal({
|
|
12556
12944
|
id: entry.id,
|
|
12557
12945
|
persistent: entry.persistent,
|
|
@@ -12609,6 +12997,7 @@ class SdModalContainer {
|
|
|
12609
12997
|
clearTimeout(currentEntry.dismissTimerId);
|
|
12610
12998
|
currentEntry.modalEl.remove();
|
|
12611
12999
|
unregisterModal(id);
|
|
13000
|
+
this.restoreFocus(currentEntry.previousActiveElement);
|
|
12612
13001
|
currentEntry.modalRef._triggerDismissed();
|
|
12613
13002
|
this.layerRefs.delete(id);
|
|
12614
13003
|
this.entries = (this.entries ?? []).filter(e => e.id !== id);
|
|
@@ -12694,6 +13083,44 @@ class SdModalContainer {
|
|
|
12694
13083
|
return;
|
|
12695
13084
|
requestCloseForModal(id);
|
|
12696
13085
|
}
|
|
13086
|
+
/**
|
|
13087
|
+
* 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로
|
|
13088
|
+
* 이동시킨다. 이를 하지 않으면 모달을 연 버튼이 계속 포커스를 가져,
|
|
13089
|
+
* Enter 키를 누를 때마다 트리거가 재실행되어 모달이 중첩으로 쌓인다.
|
|
13090
|
+
*/
|
|
13091
|
+
focusInitialElement(modalEl) {
|
|
13092
|
+
const target = this.getInitialFocusTarget(modalEl);
|
|
13093
|
+
target?.focus();
|
|
13094
|
+
}
|
|
13095
|
+
getInitialFocusTarget(modalEl) {
|
|
13096
|
+
const explicit = modalEl.querySelector('[autofocus]');
|
|
13097
|
+
if (explicit)
|
|
13098
|
+
return explicit;
|
|
13099
|
+
// 각 모달 타입의 메인(주요 액션) 버튼에 우선 포커스해 Enter 로 확정 가능하게 한다.
|
|
13100
|
+
// confirm/action/loading 모두 대응한다.
|
|
13101
|
+
const mainButton = modalEl.querySelector([
|
|
13102
|
+
'.sd-confirm-modal__button sd-button:last-of-type button',
|
|
13103
|
+
'.sd-action-modal__footer > sd-button button',
|
|
13104
|
+
'.sd-loading-modal__button sd-button button',
|
|
13105
|
+
].join(','));
|
|
13106
|
+
if (mainButton)
|
|
13107
|
+
return mainButton;
|
|
13108
|
+
// 그 외(커스텀 모달 등): 헤더의 닫기(X) 버튼을 제외한 첫 포커스 가능 요소.
|
|
13109
|
+
const focusables = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
13110
|
+
const preferred = focusables.find(el => !el.closest('.sd-action-modal__close, .sd-confirm-modal__close-button'));
|
|
13111
|
+
if (focusables.length > 0)
|
|
13112
|
+
return preferred ?? focusables[0];
|
|
13113
|
+
if (!modalEl.hasAttribute('tabindex'))
|
|
13114
|
+
modalEl.setAttribute('tabindex', '-1');
|
|
13115
|
+
return modalEl;
|
|
13116
|
+
}
|
|
13117
|
+
restoreFocus(previousActiveElement) {
|
|
13118
|
+
if (previousActiveElement &&
|
|
13119
|
+
typeof previousActiveElement.focus === 'function' &&
|
|
13120
|
+
previousActiveElement.isConnected) {
|
|
13121
|
+
previousActiveElement.focus();
|
|
13122
|
+
}
|
|
13123
|
+
}
|
|
12697
13124
|
shakeModal(modalEl) {
|
|
12698
13125
|
const cls = 'sd-modal-container__modal--shake';
|
|
12699
13126
|
modalEl.classList.remove(cls);
|
|
@@ -12848,43 +13275,77 @@ class SdNumberInput {
|
|
|
12848
13275
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
12849
13276
|
}
|
|
12850
13277
|
get el() { return getElement(this); }
|
|
13278
|
+
/** 입력 크기 */
|
|
12851
13279
|
size = 'sm';
|
|
13280
|
+
/** 최솟값 */
|
|
12852
13281
|
min = Number.NEGATIVE_INFINITY;
|
|
13282
|
+
/** 최댓값 */
|
|
12853
13283
|
max = Number.POSITIVE_INFINITY;
|
|
13284
|
+
/** 스텝 단위 */
|
|
12854
13285
|
step = 1;
|
|
13286
|
+
/** 증감 버튼 표시 여부 */
|
|
12855
13287
|
useButton = false;
|
|
13288
|
+
/** 소수점 입력 허용 여부 */
|
|
12856
13289
|
useDecimal = false;
|
|
13290
|
+
/** 입력 값 */
|
|
12857
13291
|
value = null;
|
|
13292
|
+
/** 레이블 텍스트 */
|
|
12858
13293
|
label;
|
|
13294
|
+
/** 레이블 너비 */
|
|
12859
13295
|
labelWidth = '';
|
|
13296
|
+
/** 레이블 영역 아이콘 */
|
|
12860
13297
|
icon = undefined;
|
|
13298
|
+
/** 레이블 툴팁 텍스트 */
|
|
12861
13299
|
labelTooltip = '';
|
|
13300
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
12862
13301
|
labelTooltipProps = null;
|
|
13302
|
+
/** 필드 우측 어드온 레이블 */
|
|
12863
13303
|
addonLabel = '';
|
|
13304
|
+
/** 어드온 정렬 방향 */
|
|
12864
13305
|
addonAlign = 'start';
|
|
13306
|
+
/** 플레이스홀더 텍스트 */
|
|
12865
13307
|
placeholder = '입력해 주세요.';
|
|
13308
|
+
/** 비활성 상태 여부 */
|
|
12866
13309
|
disabled = false;
|
|
13310
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
12867
13311
|
width;
|
|
13312
|
+
/** 유효성 검사 규칙 목록 */
|
|
12868
13313
|
rules = [];
|
|
13314
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
12869
13315
|
autoFocus = false;
|
|
13316
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
12870
13317
|
status;
|
|
13318
|
+
/** 필드 하단 힌트 텍스트 */
|
|
12871
13319
|
hint = '';
|
|
13320
|
+
/** 에러 메시지 */
|
|
12872
13321
|
errorMessage = '';
|
|
13322
|
+
/** 입력 앞에 표시할 접두 텍스트 */
|
|
12873
13323
|
inputPrefix = '';
|
|
13324
|
+
/** 입력 뒤에 표시할 접미 텍스트 */
|
|
12874
13325
|
inputSuffix = '';
|
|
13326
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
12875
13327
|
inputClass = '';
|
|
13328
|
+
/** 읽기 전용 여부 */
|
|
12876
13329
|
readonly = false;
|
|
13330
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
12877
13331
|
inputStyle = {};
|
|
13332
|
+
/** 에러 상태 여부 */
|
|
12878
13333
|
error = false;
|
|
13334
|
+
/** 포커스 상태 여부 */
|
|
12879
13335
|
focused = false;
|
|
13336
|
+
/** 호버 상태 여부 */
|
|
12880
13337
|
hovered = false;
|
|
12881
13338
|
internalValue = null;
|
|
12882
13339
|
displayValue = '';
|
|
12883
13340
|
nativeEl = undefined;
|
|
12884
13341
|
formField;
|
|
13342
|
+
/** 폼 연동용 name 속성 */
|
|
12885
13343
|
name = nanoid$1();
|
|
13344
|
+
/** 값이 변경될 때 발생합니다. */
|
|
12886
13345
|
update;
|
|
13346
|
+
/** 포커스될 때 발생합니다. */
|
|
12887
13347
|
focus;
|
|
13348
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
12888
13349
|
blur;
|
|
12889
13350
|
toNumber(val) {
|
|
12890
13351
|
if (val === null || val === undefined || val === '')
|
|
@@ -12962,18 +13423,23 @@ class SdNumberInput {
|
|
|
12962
13423
|
this.update?.emit(newValue);
|
|
12963
13424
|
}
|
|
12964
13425
|
}
|
|
13426
|
+
/** 유효성 검사를 실행합니다. */
|
|
12965
13427
|
async sdValidate() {
|
|
12966
13428
|
this.formField?.sdValidate();
|
|
12967
13429
|
}
|
|
13430
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
12968
13431
|
async sdReset() {
|
|
12969
13432
|
this.formField?.sdReset();
|
|
12970
13433
|
}
|
|
13434
|
+
/** 유효성 상태만 초기화합니다. */
|
|
12971
13435
|
async sdResetValidate() {
|
|
12972
13436
|
this.formField?.sdResetValidation();
|
|
12973
13437
|
}
|
|
13438
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
12974
13439
|
async sdFocus() {
|
|
12975
13440
|
this.formField?.sdFocus();
|
|
12976
13441
|
}
|
|
13442
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
12977
13443
|
async sdGetNativeElement() {
|
|
12978
13444
|
return this.nativeEl || null;
|
|
12979
13445
|
}
|
|
@@ -13120,15 +13586,15 @@ class SdNumberInput {
|
|
|
13120
13586
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
13121
13587
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
13122
13588
|
};
|
|
13123
|
-
return (hAsync("sd-field", { key: '
|
|
13589
|
+
return (hAsync("sd-field", { key: 'f07710abbe74849369a3d0d6444750f71ed75e7b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ad70ff68bb24fe02c25a57dd3de0b5ef38ceef8a', class: {
|
|
13124
13590
|
'sd-number-input__content': true,
|
|
13125
13591
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
13126
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
13592
|
+
} }, this.useButton && (hAsync("button", { key: '90305a8863c6b6ba3d3afce695c5f61204424c46', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'e6440e5b63d4860d05f0573690a4064f7e6729ac', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
13127
13593
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13128
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
13594
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: 'ae2e8d052471925a5c794dcf1041a7ddbfe66652', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: 'a19917bfbe10b6d121e61e374a134207c9eb7fd7', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
13129
13595
|
textAlign: this.useButton ? 'center' : 'right',
|
|
13130
13596
|
...this.inputStyle,
|
|
13131
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
13597
|
+
} }), this.inputSuffix && hAsync("span", { key: '352e2a645c8db62c8d887b1a1f490ade187d05f0', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '5c4f1153f6488cb95502bfa7f2bcad073bccb593', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'c9e0924126fb39492e8a696fa2628f367b8e2058', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
13132
13598
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13133
13599
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
13134
13600
|
}
|
|
@@ -13264,9 +13730,13 @@ class SdPagination {
|
|
|
13264
13730
|
registerInstance(this, hostRef);
|
|
13265
13731
|
this.pageChange = createEvent(this, "sdPageChange", 7);
|
|
13266
13732
|
}
|
|
13733
|
+
/** 현재 페이지 번호 */
|
|
13267
13734
|
currentPage = 1;
|
|
13735
|
+
/** 마지막 페이지 번호 */
|
|
13268
13736
|
lastPage = 1;
|
|
13737
|
+
/** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
|
|
13269
13738
|
simple = false;
|
|
13739
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
13270
13740
|
pageChange;
|
|
13271
13741
|
get pageNumbers() {
|
|
13272
13742
|
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
@@ -13338,13 +13808,13 @@ class SdPagination {
|
|
|
13338
13808
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
13339
13809
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
13340
13810
|
};
|
|
13341
|
-
return (hAsync("div", { key: '
|
|
13811
|
+
return (hAsync("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
|
|
13342
13812
|
'sd-pagination': true,
|
|
13343
13813
|
'sd-pagination--simple': this.simple,
|
|
13344
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
13814
|
+
}, style: cssVars }, hAsync("div", { key: '4c23bdfb9a58950a04107fc4b4c921bbafa4e601', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
13345
13815
|
'sd-pagination__item': true,
|
|
13346
13816
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
13347
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
13817
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
13348
13818
|
}
|
|
13349
13819
|
static get style() { return sdPaginationCss(); }
|
|
13350
13820
|
static get cmpMeta() { return {
|
|
@@ -13378,22 +13848,38 @@ class SdPopover {
|
|
|
13378
13848
|
this.showChange = createEvent(this, "sdShowChange", 7);
|
|
13379
13849
|
}
|
|
13380
13850
|
get el() { return getElement(this); }
|
|
13851
|
+
/** 팝오버 표시 여부 */
|
|
13381
13852
|
show = false;
|
|
13853
|
+
/** 팝오버를 표시할 방향 */
|
|
13382
13854
|
placement = 'bottom';
|
|
13855
|
+
/** 아이콘 트리거 색상 */
|
|
13383
13856
|
color = '#01BB4B';
|
|
13857
|
+
/** 아이콘 트리거 아이콘명 */
|
|
13384
13858
|
icon = 'helpOutline';
|
|
13859
|
+
/** 아이콘 트리거 크기 */
|
|
13385
13860
|
iconSize = 12;
|
|
13861
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
13386
13862
|
label = '';
|
|
13863
|
+
/** 버튼 트리거 프리셋 */
|
|
13387
13864
|
name = 'primary_sm';
|
|
13865
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
13388
13866
|
rightIcon;
|
|
13867
|
+
/** 스크린리더용 접근성 레이블 */
|
|
13389
13868
|
ariaLabel = '';
|
|
13869
|
+
/** 비활성 상태 여부 */
|
|
13390
13870
|
disabled = false;
|
|
13871
|
+
/** 버튼 type 속성 */
|
|
13391
13872
|
type = 'button';
|
|
13873
|
+
/** 팝오버 메뉴 제목 */
|
|
13392
13874
|
menuTitle;
|
|
13875
|
+
/** 팝오버 하단 좌측 링크 옵션 */
|
|
13393
13876
|
leftLink;
|
|
13877
|
+
/** 팝오버 하단 버튼 옵션 */
|
|
13394
13878
|
button;
|
|
13879
|
+
/** 팝오버 메뉴에 추가할 클래스 */
|
|
13395
13880
|
menuClass = '';
|
|
13396
13881
|
slotContentHTML = '';
|
|
13882
|
+
/** 팝오버 표시 상태가 바뀔 때 발생합니다. */
|
|
13397
13883
|
showChange;
|
|
13398
13884
|
buttonEl;
|
|
13399
13885
|
setShow = (next) => {
|
|
@@ -13428,17 +13914,17 @@ class SdPopover {
|
|
|
13428
13914
|
const leftLink = this.leftLink;
|
|
13429
13915
|
const button = this.button;
|
|
13430
13916
|
const hasFooter = !!leftLink || !!button;
|
|
13431
|
-
return (hAsync(Fragment, { key: '
|
|
13917
|
+
return (hAsync(Fragment, { key: '94fcf54c8b20ffd1bcf2c7f540de31e1f41154fa' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '9f1585f2d268452f3d5c713e30ff865c3fc5fbac', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: '2cd2103f56c45364df5db9b73a2d89447b7c2bcc', class: {
|
|
13432
13918
|
'sd-floating-menu': true,
|
|
13433
13919
|
'sd-floating-menu--popover': true,
|
|
13434
13920
|
[`sd-floating-menu--${placement}`]: true,
|
|
13435
13921
|
[menuClass]: menuClass !== '',
|
|
13436
13922
|
}, style: {
|
|
13437
13923
|
'--sd-floating-bg': popoverTokens.popover.default.bg,
|
|
13438
|
-
} }, hAsync("i", { key: '
|
|
13924
|
+
} }, hAsync("i", { key: '5fd6c333790d3bb45bf4d43391ed1457d5eb54c3', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '062b11e3b6cee1e87f20064ab62a589a23f3eb26' })), hAsync("div", { key: 'b863abd8e31c8ce0dfddfdb25b6a49be69f34da1', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '1873c595d7ad91b3a7c71d979414820694c23ff5', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (hAsync("div", { key: '7a197b43d34a59ec298ed5e733cae0f3390c87a3', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (hAsync("div", { key: 'be9034b4150421be08c17978beba643e73c5568d', class: {
|
|
13439
13925
|
'sd-floating-menu__buttons': true,
|
|
13440
13926
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
13441
|
-
} }, leftLink && (hAsync("sd-text-link", { key: '
|
|
13927
|
+
} }, leftLink && (hAsync("sd-text-link", { key: '890a163609b8544450ad1b8c009648d73ef0d269', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: '128270add7ea99f7c9f61abe9f2a113f152465d8', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), hAsync("sd-ghost-button", { key: 'bc4c4d982da8fe72c85cd4ae7ba6cd2e09154164', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
13442
13928
|
}
|
|
13443
13929
|
static get style() { return sdPopoverCss(); }
|
|
13444
13930
|
static get cmpMeta() { return {
|
|
@@ -13539,12 +14025,16 @@ class SdPopup {
|
|
|
13539
14025
|
registerInstance(this, hostRef);
|
|
13540
14026
|
this.submit = createEvent(this, "sdSubmit", 7);
|
|
13541
14027
|
}
|
|
14028
|
+
/** 팝업 헤더에 표시할 제목 */
|
|
13542
14029
|
popupTitle = '';
|
|
14030
|
+
/** 팝업 타입 */
|
|
13543
14031
|
type = 'default';
|
|
13544
14032
|
// 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
13545
|
-
|
|
14033
|
+
/** 하단 footer 영역 표시 여부 */
|
|
13546
14034
|
useFooter = true;
|
|
14035
|
+
/** 확인 버튼 커스텀 props */
|
|
13547
14036
|
submitButtonProps;
|
|
14037
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
13548
14038
|
submit;
|
|
13549
14039
|
render() {
|
|
13550
14040
|
const cssVars = {
|
|
@@ -13570,7 +14060,7 @@ class SdPopup {
|
|
|
13570
14060
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
13571
14061
|
...this.submitButtonProps,
|
|
13572
14062
|
};
|
|
13573
|
-
return (hAsync("div", { key: '
|
|
14063
|
+
return (hAsync("div", { key: '4455120f02fc1df1b1661062a22f3d82508627c4', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '96a5e7cdc21fa239e4275f4b57379f36246048f4', class: "sd-popup__header" }, hAsync("h2", { key: 'cdf8d05561f470fef31c46e6508e1e0c41aa7fa9', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'ddb32332f8822634f544f2fa5a246c5f37c7fcc2', class: "sd-popup__body" }, hAsync("slot", { key: '8f36daf8c918da6babcbb4383957e979930bfd73' })), this.useFooter && (hAsync("footer", { key: '2b84ed134a8d53633bb4feb7ab423e58955dfdae', class: "sd-popup__footer" }, hAsync("div", { key: '95e55875b38102ff809e752a3cc647dc830699a9', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: 'fbd86c77e1117018793279c9b90fd8e2f6db4934', name: "footer-left" })), hAsync("sd-button", { key: 'e8710c15d20e52d0476e7f656e800cda008187d8', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
13574
14064
|
}
|
|
13575
14065
|
static get style() { return sdPopupCss(); }
|
|
13576
14066
|
static get cmpMeta() { return {
|
|
@@ -13594,13 +14084,21 @@ class SdPortal {
|
|
|
13594
14084
|
this.close = createEvent(this, "sdClose", 3);
|
|
13595
14085
|
}
|
|
13596
14086
|
get hostEl() { return getElement(this); }
|
|
14087
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
13597
14088
|
to = 'body';
|
|
14089
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
13598
14090
|
parentRef = null;
|
|
14091
|
+
/** [x, y] 오프셋 (px) */
|
|
13599
14092
|
offset = [0, 4];
|
|
14093
|
+
/** 뷰포트 경계 여백 (px) */
|
|
13600
14094
|
viewportPadding = 0;
|
|
13601
|
-
|
|
14095
|
+
/** z-index */
|
|
14096
|
+
zIndex = 996;
|
|
14097
|
+
/** 표시 여부 */
|
|
13602
14098
|
open = false;
|
|
14099
|
+
/** 콘텐츠를 표시할 방향 (공간이 부족하면 자동으로 반대 방향으로 전환) */
|
|
13603
14100
|
placement = 'bottom';
|
|
14101
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
13604
14102
|
close;
|
|
13605
14103
|
container;
|
|
13606
14104
|
wrapper;
|
|
@@ -13639,13 +14137,27 @@ class SdPortal {
|
|
|
13639
14137
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
13640
14138
|
return el instanceof HTMLElement ? el : document.body;
|
|
13641
14139
|
}
|
|
14140
|
+
/**
|
|
14141
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
14142
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
14143
|
+
*/
|
|
14144
|
+
resolveZIndex() {
|
|
14145
|
+
const base = this.zIndex ?? 996;
|
|
14146
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
14147
|
+
if (!layer)
|
|
14148
|
+
return base;
|
|
14149
|
+
const container = layer.closest('.sd-modal-container');
|
|
14150
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
14151
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
14152
|
+
return Math.max(base, modalZIndex + 1);
|
|
14153
|
+
}
|
|
13642
14154
|
createWrapper() {
|
|
13643
14155
|
this.wrapper = document.createElement('div');
|
|
13644
14156
|
Object.assign(this.wrapper.style, {
|
|
13645
14157
|
position: 'fixed',
|
|
13646
14158
|
top: '0',
|
|
13647
14159
|
left: '0',
|
|
13648
|
-
zIndex:
|
|
14160
|
+
zIndex: this.resolveZIndex().toString(),
|
|
13649
14161
|
opacity: '0',
|
|
13650
14162
|
transition: 'opacity 0.15s ease-out',
|
|
13651
14163
|
boxSizing: 'border-box',
|
|
@@ -13811,8 +14323,7 @@ class SdPortal {
|
|
|
13811
14323
|
return scrollParents;
|
|
13812
14324
|
}
|
|
13813
14325
|
isInsideTarget(target) {
|
|
13814
|
-
return !!(
|
|
13815
|
-
(this.parentRef?.contains(target)));
|
|
14326
|
+
return !!(this.wrapper?.contains(target) || this.parentRef?.contains(target));
|
|
13816
14327
|
}
|
|
13817
14328
|
// 외부 클릭 감지
|
|
13818
14329
|
handleMouseDown(e) {
|
|
@@ -13828,7 +14339,7 @@ class SdPortal {
|
|
|
13828
14339
|
this.close.emit();
|
|
13829
14340
|
}
|
|
13830
14341
|
render() {
|
|
13831
|
-
return hAsync("slot", { key: '
|
|
14342
|
+
return hAsync("slot", { key: 'e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf' });
|
|
13832
14343
|
}
|
|
13833
14344
|
static get watchers() { return {
|
|
13834
14345
|
"open": [{
|
|
@@ -13935,10 +14446,15 @@ class SdRadio {
|
|
|
13935
14446
|
registerInstance(this, hostRef);
|
|
13936
14447
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
13937
14448
|
}
|
|
14449
|
+
/** 라디오 그룹의 현재 선택 값 */
|
|
13938
14450
|
value;
|
|
14451
|
+
/** 이 라디오 아이템의 값 */
|
|
13939
14452
|
val;
|
|
14453
|
+
/** 비활성 상태 여부 */
|
|
13940
14454
|
disabled = false;
|
|
14455
|
+
/** 표시할 라벨 텍스트 */
|
|
13941
14456
|
label;
|
|
14457
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
13942
14458
|
update;
|
|
13943
14459
|
valueChanged(newValue) {
|
|
13944
14460
|
this.value = newValue;
|
|
@@ -13981,7 +14497,7 @@ class SdRadio {
|
|
|
13981
14497
|
'--sd-radio-label-color': RADIO_COLORS.label.default,
|
|
13982
14498
|
'--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
|
|
13983
14499
|
};
|
|
13984
|
-
return (hAsync("label", { key: '
|
|
14500
|
+
return (hAsync("label", { key: 'f220a45add2be550bc696cd2442b8520ea0143f0', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '64692f5bf49783f166be9327877a474816a556ca', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: '3c30268adcbd735857b4163ecba444b5a57cba08', class: "sd-radio__circle" }), this.label && (hAsync("span", { key: 'b641086ab4ff9161ba4fb733b87c751b6863fe06', class: "sd-radio__label", "data-label": this.label }, this.label))));
|
|
13985
14501
|
}
|
|
13986
14502
|
static get watchers() { return {
|
|
13987
14503
|
"value": [{
|
|
@@ -14106,11 +14622,17 @@ class SdRadioButton {
|
|
|
14106
14622
|
registerInstance(this, hostRef);
|
|
14107
14623
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14108
14624
|
}
|
|
14625
|
+
/** 현재 선택된 값 */
|
|
14109
14626
|
value;
|
|
14627
|
+
/** 라디오 버튼 옵션 목록 */
|
|
14110
14628
|
options = [];
|
|
14629
|
+
/** 버튼 크기 */
|
|
14111
14630
|
size = 'sm';
|
|
14631
|
+
/** 비활성 상태 여부 */
|
|
14112
14632
|
disabled = false;
|
|
14633
|
+
/** input name 속성 (없으면 자동 생성) */
|
|
14113
14634
|
name;
|
|
14635
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14114
14636
|
change;
|
|
14115
14637
|
componentWillLoad() {
|
|
14116
14638
|
this.size ??= 'sm';
|
|
@@ -14180,7 +14702,7 @@ class SdRadioButton {
|
|
|
14180
14702
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
14181
14703
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
14182
14704
|
};
|
|
14183
|
-
return (hAsync("div", { key: '
|
|
14705
|
+
return (hAsync("div", { key: 'c0ed4c6927bd32a7335e003856de4b43ead97b1c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
14184
14706
|
const isSelected = this.isOptionSelected(option);
|
|
14185
14707
|
const isDisabled = this.isOptionDisabled(option);
|
|
14186
14708
|
return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -14210,11 +14732,17 @@ class SdRadioGroup {
|
|
|
14210
14732
|
registerInstance(this, hostRef);
|
|
14211
14733
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14212
14734
|
}
|
|
14735
|
+
/** 현재 선택된 값 */
|
|
14213
14736
|
value;
|
|
14737
|
+
/** 라디오 옵션 목록 */
|
|
14214
14738
|
options = [];
|
|
14739
|
+
/** 옵션 배치 방향 */
|
|
14215
14740
|
direction = 'vertical';
|
|
14741
|
+
/** 비활성 상태 여부 */
|
|
14216
14742
|
disabled = false;
|
|
14743
|
+
/** input name 속성 */
|
|
14217
14744
|
groupName;
|
|
14745
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14218
14746
|
change;
|
|
14219
14747
|
valueChanged(newValue) {
|
|
14220
14748
|
this.value = newValue;
|
|
@@ -14232,7 +14760,7 @@ class SdRadioGroup {
|
|
|
14232
14760
|
return classes.join(' ');
|
|
14233
14761
|
}
|
|
14234
14762
|
render() {
|
|
14235
|
-
return (hAsync("div", { key: '
|
|
14763
|
+
return (hAsync("div", { key: '3a1694daddf5794a1598838c44bc965de2976770', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
14236
14764
|
return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
14237
14765
|
})));
|
|
14238
14766
|
}
|
|
@@ -14270,29 +14798,53 @@ class SdSelect {
|
|
|
14270
14798
|
static PORTAL_OFFSET_Y = 4;
|
|
14271
14799
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
14272
14800
|
get el() { return getElement(this); }
|
|
14801
|
+
/** 셀렉트 타입 (단일/다중/계층) */
|
|
14273
14802
|
type = 'default';
|
|
14803
|
+
/** 현재 선택된 값 */
|
|
14274
14804
|
value = null;
|
|
14805
|
+
/** 선택 옵션 목록 */
|
|
14275
14806
|
options = [];
|
|
14807
|
+
/** 값이 없을 때 표시할 플레이스홀더 */
|
|
14276
14808
|
placeholder = '선택';
|
|
14809
|
+
/** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
|
|
14277
14810
|
dropdownWidth = '';
|
|
14811
|
+
/** 드롭다운 최대 너비 */
|
|
14278
14812
|
maxDropdownWidth = '640px';
|
|
14813
|
+
/** 드롭다운 최대 높이 */
|
|
14279
14814
|
dropdownHeight = '260px';
|
|
14815
|
+
/** 비활성 상태 여부 */
|
|
14280
14816
|
disabled = false;
|
|
14817
|
+
/** 레이블 텍스트 */
|
|
14281
14818
|
label = '';
|
|
14819
|
+
/** 레이블 너비 */
|
|
14282
14820
|
labelWidth = '';
|
|
14821
|
+
/** 필드 우측 어드온 레이블 */
|
|
14283
14822
|
addonLabel = '';
|
|
14823
|
+
/** 어드온 정렬 방향 */
|
|
14284
14824
|
addonAlign = 'start';
|
|
14825
|
+
/** 에러 상태 여부 */
|
|
14285
14826
|
error = false;
|
|
14827
|
+
/** 필드 하단 힌트 텍스트 */
|
|
14286
14828
|
hint = '';
|
|
14829
|
+
/** 에러 메시지 */
|
|
14287
14830
|
errorMessage = '';
|
|
14831
|
+
/** 유효성 검사 규칙 목록 */
|
|
14288
14832
|
rules = [];
|
|
14833
|
+
/** 레이블 영역 아이콘 */
|
|
14289
14834
|
icon = undefined;
|
|
14835
|
+
/** 레이블 툴팁 텍스트 */
|
|
14290
14836
|
labelTooltip = '';
|
|
14837
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
14291
14838
|
labelTooltipProps = null;
|
|
14839
|
+
/** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
|
|
14292
14840
|
emitValue = false;
|
|
14841
|
+
/** 필드 너비 */
|
|
14293
14842
|
width = '';
|
|
14843
|
+
/** 드롭다운 내 검색 입력 표시 여부 */
|
|
14294
14844
|
useSearch = false;
|
|
14845
|
+
/** 전체 선택 시 표시할 레이블 */
|
|
14295
14846
|
allSelectedLabel = '전체';
|
|
14847
|
+
/** 전체 선택 체크박스 표시 여부 */
|
|
14296
14848
|
useSelectAll = false;
|
|
14297
14849
|
isOpen = false;
|
|
14298
14850
|
isAnimatingOut = false;
|
|
@@ -14301,13 +14853,17 @@ class SdSelect {
|
|
|
14301
14853
|
resolvedMaxDropdownWidth = '640px';
|
|
14302
14854
|
focused = false;
|
|
14303
14855
|
hovered = false;
|
|
14856
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14304
14857
|
update;
|
|
14858
|
+
/** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
|
|
14305
14859
|
dropDownShow;
|
|
14860
|
+
/** 셀렉트 트리거에 포커스를 이동합니다. */
|
|
14306
14861
|
async sdFocus() {
|
|
14307
14862
|
if (this.disabled)
|
|
14308
14863
|
return;
|
|
14309
14864
|
await this.triggerComponentRef?.sdFocus();
|
|
14310
14865
|
}
|
|
14866
|
+
/** 드롭다운을 엽니다. */
|
|
14311
14867
|
async sdOpen() {
|
|
14312
14868
|
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
14313
14869
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
@@ -14322,6 +14878,7 @@ class SdSelect {
|
|
|
14322
14878
|
triggerRef;
|
|
14323
14879
|
triggerComponentRef;
|
|
14324
14880
|
closeAnimationTimer;
|
|
14881
|
+
/** 폼 연동용 name 속성 */
|
|
14325
14882
|
name = nanoid$1();
|
|
14326
14883
|
triggerHasFocus = false;
|
|
14327
14884
|
watchIsOpen(newValue) {
|
|
@@ -14519,15 +15076,15 @@ class SdSelect {
|
|
|
14519
15076
|
this.closeDropdown();
|
|
14520
15077
|
},
|
|
14521
15078
|
};
|
|
14522
|
-
return (hAsync("sd-field", { key: '
|
|
15079
|
+
return (hAsync("sd-field", { key: '3387dc16a6f54bfae652338c71c4c0e1553828c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
14523
15080
|
this.hovered = true;
|
|
14524
15081
|
}, onMouseLeave: () => {
|
|
14525
15082
|
this.hovered = false;
|
|
14526
|
-
} }, hAsync("div", { key: '
|
|
15083
|
+
} }, hAsync("div", { key: '124325f8f6882a3c9ee1a1795ee969f13d67dfe2', class: "sd-select", ref: el => {
|
|
14527
15084
|
this.triggerRef = el;
|
|
14528
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
15085
|
+
} }, hAsync("sd-select-trigger", { key: '2e0e44ae666282d3931f9889650a7999929a312b', ref: el => {
|
|
14529
15086
|
this.triggerComponentRef = el;
|
|
14530
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '
|
|
15087
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'b6e97e43c5ea3a06fbb2976dab52d4f544822ae0', ...portalProps }, hAsync("sd-select-listbox", { key: '3d8a01c54667149507db2757d81813d2f285b32d', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
14531
15088
|
}
|
|
14532
15089
|
static get watchers() { return {
|
|
14533
15090
|
"isOpen": [{
|
|
@@ -14712,12 +15269,19 @@ class SdSelectListItem {
|
|
|
14712
15269
|
registerInstance(this, hostRef);
|
|
14713
15270
|
this.listItemClick = createEvent(this, "sdListItemClick", 7);
|
|
14714
15271
|
}
|
|
15272
|
+
/** 렌더링할 옵션 데이터 */
|
|
14715
15273
|
option;
|
|
15274
|
+
/** 계층 깊이 (1~3) */
|
|
14716
15275
|
depth = 1;
|
|
15276
|
+
/** 선택 상태 (null=중간) */
|
|
14717
15277
|
isSelected = false;
|
|
15278
|
+
/** 키보드 포커스 상태 여부 */
|
|
14718
15279
|
isFocused = false;
|
|
15280
|
+
/** 체크박스 표시 여부 */
|
|
14719
15281
|
useCheckbox = false;
|
|
15282
|
+
/** 다중 선택 시 (선택/전체) 카운트 */
|
|
14720
15283
|
countInfo;
|
|
15284
|
+
/** 항목 클릭 시 발생합니다. */
|
|
14721
15285
|
listItemClick;
|
|
14722
15286
|
get isGroup() {
|
|
14723
15287
|
return !!this.option.children;
|
|
@@ -14781,7 +15345,7 @@ class SdSelectListItem {
|
|
|
14781
15345
|
return (
|
|
14782
15346
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
14783
15347
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
14784
|
-
hAsync("div", { key: '
|
|
15348
|
+
hAsync("div", { key: '7717c82ea9f36bd44bf8a19d16ba7df6441f6715', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
14785
15349
|
'sd-select-list-item': true,
|
|
14786
15350
|
'sd-select-list-item--group': isGroup,
|
|
14787
15351
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -14791,7 +15355,7 @@ class SdSelectListItem {
|
|
|
14791
15355
|
'sd-select-list-item--focused': this.isFocused,
|
|
14792
15356
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14793
15357
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
14794
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
15358
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '68d8c03d580fc2c411ee4fba917207705f3cf2d2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: '56ae08c55215a3970df99ecd74549ded5667265c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
14795
15359
|
}
|
|
14796
15360
|
static get style() { return sdSelectListItemCss(); }
|
|
14797
15361
|
static get cmpMeta() { return {
|
|
@@ -14819,9 +15383,12 @@ class SdSelectListItemSearch {
|
|
|
14819
15383
|
this.searchFilter = createEvent(this, "sdSearchFilter", 7);
|
|
14820
15384
|
this.searchFocus = createEvent(this, "sdSearchFocus", 7);
|
|
14821
15385
|
}
|
|
15386
|
+
/** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
|
|
14822
15387
|
isScrolled = false;
|
|
14823
15388
|
searchText = '';
|
|
15389
|
+
/** 검색어가 변경될 때 발생합니다. */
|
|
14824
15390
|
searchFilter;
|
|
15391
|
+
/** 검색 입력에 포커스될 때 발생합니다. */
|
|
14825
15392
|
searchFocus;
|
|
14826
15393
|
inputEl;
|
|
14827
15394
|
debounceTimer;
|
|
@@ -14833,6 +15400,7 @@ class SdSelectListItemSearch {
|
|
|
14833
15400
|
});
|
|
14834
15401
|
});
|
|
14835
15402
|
}
|
|
15403
|
+
/** 검색 입력에 포커스를 이동합니다. */
|
|
14836
15404
|
async sdFocus() {
|
|
14837
15405
|
this.inputEl?.focus();
|
|
14838
15406
|
}
|
|
@@ -14859,15 +15427,15 @@ class SdSelectListItemSearch {
|
|
|
14859
15427
|
clearTimeout(this.debounceTimer);
|
|
14860
15428
|
}
|
|
14861
15429
|
render() {
|
|
14862
|
-
return (hAsync("div", { key: '
|
|
15430
|
+
return (hAsync("div", { key: 'fed1a43f1901d23c7c007a4597b95970c0aad4ad', class: {
|
|
14863
15431
|
'sd-select-list-item-search': true,
|
|
14864
15432
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
14865
|
-
} }, hAsync("div", { key: '
|
|
15433
|
+
} }, hAsync("div", { key: '23b278a4b40b7b8506a13f284b3759b96b613b99', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '2150f73e1f20f05a28407b984977f7e91131217e', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '7dc4470ea57b54ebc5f3313f6e22d100f4cc4591', ref: el => {
|
|
14866
15434
|
this.inputEl = el;
|
|
14867
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '
|
|
15435
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '60a363380da8689baa1e9e20b075df749846137a', type: "button", class: {
|
|
14868
15436
|
'sd-select-list-item-search__clear': true,
|
|
14869
15437
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
14870
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15438
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '7b27eb444864674578f97eaa374d1e9af486f97a', name: "close", size: 12, color: "#888888" })))));
|
|
14871
15439
|
}
|
|
14872
15440
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
14873
15441
|
static get cmpMeta() { return {
|
|
@@ -14891,18 +15459,28 @@ class SdSelectListbox {
|
|
|
14891
15459
|
registerInstance(this, hostRef);
|
|
14892
15460
|
this.optionSelect = createEvent(this, "sdOptionSelect", 7);
|
|
14893
15461
|
}
|
|
15462
|
+
/** 셀렉트 타입 */
|
|
14894
15463
|
type = 'default';
|
|
15464
|
+
/** 옵션 목록 */
|
|
14895
15465
|
options = [];
|
|
15466
|
+
/** 현재 선택 값 */
|
|
14896
15467
|
value = null;
|
|
15468
|
+
/** 값만 emit할지 여부 */
|
|
14897
15469
|
emitValue = false;
|
|
15470
|
+
/** 검색 기능 사용 여부 */
|
|
14898
15471
|
useSearch = false;
|
|
15472
|
+
/** 전체 선택 기능 사용 여부 */
|
|
14899
15473
|
useSelectAll = false;
|
|
15474
|
+
/** 트리거 너비 (드롭다운 최소 너비) */
|
|
14900
15475
|
triggerWidth = '200px';
|
|
15476
|
+
/** 드롭다운 최대 너비 */
|
|
14901
15477
|
maxWidth = '640px';
|
|
15478
|
+
/** 드롭다운 최대 높이 */
|
|
14902
15479
|
maxHeight = '260px';
|
|
14903
15480
|
searchKeyword = '';
|
|
14904
15481
|
isScrolled = false;
|
|
14905
15482
|
focusedIndex = -1;
|
|
15483
|
+
/** 옵션 선택 시 발생합니다. */
|
|
14906
15484
|
optionSelect;
|
|
14907
15485
|
listEl;
|
|
14908
15486
|
lastScrolledIndex = -1;
|
|
@@ -15241,9 +15819,9 @@ class SdSelectListbox {
|
|
|
15241
15819
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
15242
15820
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
15243
15821
|
};
|
|
15244
|
-
return (hAsync("div", { key: '
|
|
15822
|
+
return (hAsync("div", { key: '6ca1107a8aadc1fbae26f3d8d3385b355981b65e', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '8612b45a4e9b7d2701b8decd6865ebb50d6fcaa3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'c02c9c1d96176f94d2f83c66ad3e7cc0946c0270', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
15245
15823
|
this.listEl = el;
|
|
15246
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
15824
|
+
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: 'f4fe1769d14812ba63fb73ff21ebfdaaf9d76409', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
15247
15825
|
}
|
|
15248
15826
|
static get watchers() { return {
|
|
15249
15827
|
"searchKeyword": [{
|
|
@@ -15283,14 +15861,22 @@ class SdSelectTrigger {
|
|
|
15283
15861
|
this.triggerFocus = createEvent(this, "sdTriggerFocus", 7);
|
|
15284
15862
|
this.triggerBlur = createEvent(this, "sdTriggerBlur", 7);
|
|
15285
15863
|
}
|
|
15864
|
+
/** 표시할 선택된 값 텍스트 */
|
|
15286
15865
|
displayText = '';
|
|
15866
|
+
/** 미선택 상태 플레이스홀더 */
|
|
15287
15867
|
placeholder = '선택';
|
|
15868
|
+
/** 비활성 상태 여부 */
|
|
15288
15869
|
disabled = false;
|
|
15870
|
+
/** 드롭다운 열림 상태 */
|
|
15289
15871
|
isOpen = false;
|
|
15872
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
15290
15873
|
triggerClick;
|
|
15874
|
+
/** 트리거 포커스 시 발생합니다. */
|
|
15291
15875
|
triggerFocus;
|
|
15876
|
+
/** 트리거 블러 시 발생합니다. */
|
|
15292
15877
|
triggerBlur;
|
|
15293
15878
|
triggerEl;
|
|
15879
|
+
/** 트리거 엘리먼트에 포커스를 이동합니다. */
|
|
15294
15880
|
async sdFocus() {
|
|
15295
15881
|
if (this.disabled)
|
|
15296
15882
|
return;
|
|
@@ -15324,7 +15910,7 @@ class SdSelectTrigger {
|
|
|
15324
15910
|
? SELECT_COLORS.icon.disabled
|
|
15325
15911
|
: SELECT_COLORS.icon.default,
|
|
15326
15912
|
};
|
|
15327
|
-
return (hAsync("div", { key: '
|
|
15913
|
+
return (hAsync("div", { key: '7f5940ce19feb2d3ae9b2cbb6b5fdeb6d0151f61', ref: el => {
|
|
15328
15914
|
this.triggerEl = el;
|
|
15329
15915
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
15330
15916
|
'sd-select-trigger': true,
|
|
@@ -15335,7 +15921,7 @@ class SdSelectTrigger {
|
|
|
15335
15921
|
e.preventDefault();
|
|
15336
15922
|
this.handleClick();
|
|
15337
15923
|
}
|
|
15338
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
15924
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'b50dea3450ee6fd2bf30811cc33facf00761f0d1', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: '778b3d1c738951f9a18950b668a34a1bc36006ca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
15339
15925
|
'sd-select-trigger__icon': true,
|
|
15340
15926
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
15341
15927
|
} }))));
|
|
@@ -15420,9 +16006,13 @@ class SdSwitch {
|
|
|
15420
16006
|
registerInstance(this, hostRef);
|
|
15421
16007
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
15422
16008
|
}
|
|
16009
|
+
/** 현재 on/off 상태 */
|
|
15423
16010
|
value = false;
|
|
16011
|
+
/** 표시할 라벨 텍스트 */
|
|
15424
16012
|
label = '';
|
|
16013
|
+
/** 비활성 상태 여부 */
|
|
15425
16014
|
disabled = false;
|
|
16015
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
15426
16016
|
change;
|
|
15427
16017
|
get switchClasses() {
|
|
15428
16018
|
const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
|
|
@@ -15460,7 +16050,7 @@ class SdSwitch {
|
|
|
15460
16050
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
15461
16051
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
15462
16052
|
};
|
|
15463
|
-
return (hAsync("label", { key: '
|
|
16053
|
+
return (hAsync("label", { key: '2cbee35194a8218f1526ecd26d0ff0cc660ed5fb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '8c9a330a7b69035ace0644f0a2cab8f6f8672bfd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '738a28fb9c26628d6b67f03d0b75f4155ad85966', class: "sd-switch__track" }, hAsync("div", { key: '91b7bac6c4e48d1b5b1331713620a132e9921906', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'a9cdfb08c240f3d6a15bef3e119c0c02f3fe3462', class: "sd-switch__label" }, this.label)));
|
|
15464
16054
|
}
|
|
15465
16055
|
static get style() { return sdSwitchCss(); }
|
|
15466
16056
|
static get cmpMeta() { return {
|
|
@@ -15583,28 +16173,48 @@ class SdTable {
|
|
|
15583
16173
|
}
|
|
15584
16174
|
static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
|
|
15585
16175
|
get el() { return getElement(this); }
|
|
16176
|
+
/** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
|
|
15586
16177
|
tableId = nanoid(8);
|
|
15587
16178
|
fallbackTableId = nanoid(8);
|
|
16179
|
+
/** 컬럼 정의 목록 */
|
|
15588
16180
|
columns = [];
|
|
16181
|
+
/** 행 데이터 배열 */
|
|
15589
16182
|
rows;
|
|
16183
|
+
/** 현재 선택된 행 목록 */
|
|
15590
16184
|
selected = [];
|
|
16185
|
+
/** 행 고유 식별 필드명 */
|
|
15591
16186
|
rowKey = 'id';
|
|
16187
|
+
/** 행 선택(체크박스) 기능 활성화 여부 */
|
|
15592
16188
|
selectable = false;
|
|
16189
|
+
/** 컬럼 너비 조절 기능 활성화 여부 */
|
|
15593
16190
|
resizable = false;
|
|
16191
|
+
/** 테이블 너비 */
|
|
15594
16192
|
width;
|
|
16193
|
+
/** 테이블 높이 */
|
|
15595
16194
|
height;
|
|
16195
|
+
/** 헤더 고정(sticky) 여부 */
|
|
15596
16196
|
stickyHeader = false;
|
|
16197
|
+
/** 고정할 좌우 컬럼 수 */
|
|
15597
16198
|
stickyColumn = { left: 0, right: 0 };
|
|
16199
|
+
/** border-radius 제어 */
|
|
15598
16200
|
radius = 'default';
|
|
16201
|
+
/** 데이터 없을 때 표시할 메시지 */
|
|
15599
16202
|
noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
15600
16203
|
resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
16204
|
+
/** 로딩 스피너 표시 여부 */
|
|
15601
16205
|
isLoading = false;
|
|
16206
|
+
/** 페이지네이션 옵션 */
|
|
15602
16207
|
pagination;
|
|
16208
|
+
/** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
|
|
15603
16209
|
useInternalPagination = false;
|
|
16210
|
+
/** 페이지당 행 수 선택 셀렉트 표시 여부 */
|
|
15604
16211
|
useRowsPerPageSelect = false;
|
|
16212
|
+
/** 행 높이를 줄인 조밀 모드 여부 */
|
|
15605
16213
|
dense = false;
|
|
15606
16214
|
// ─── Virtual Scroll ───────────────────────────────────────────────
|
|
16215
|
+
/** 가상 스크롤 사용 여부 */
|
|
15607
16216
|
useVirtualScroll = false;
|
|
16217
|
+
/** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
|
|
15608
16218
|
rowHeight;
|
|
15609
16219
|
get effectiveRowHeight() {
|
|
15610
16220
|
if (this.rowHeight != null)
|
|
@@ -15613,19 +16223,27 @@ class SdTable {
|
|
|
15613
16223
|
? Number(TABLE_BODY_LAYOUT.dense.height)
|
|
15614
16224
|
: Number(TABLE_BODY_LAYOUT.default.height);
|
|
15615
16225
|
}
|
|
16226
|
+
/** 가상 스크롤 상하 버퍼 행 수 */
|
|
15616
16227
|
virtualBuffer = 5;
|
|
16228
|
+
/** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
|
|
15617
16229
|
virtualEndThreshold = 10;
|
|
15618
16230
|
// ─────────────────────────────────────────────────────────────────
|
|
16231
|
+
/** 페이지당 행 수 선택 옵션 목록 */
|
|
15619
16232
|
rowsPerPageOption = [
|
|
15620
16233
|
{ label: '10개씩 보기', value: 10 },
|
|
15621
16234
|
{ label: '25개씩 보기', value: 25 },
|
|
15622
16235
|
{ label: '50개씩 보기', value: 50 },
|
|
15623
16236
|
{ label: '100개씩 보기', value: 100 },
|
|
15624
16237
|
];
|
|
16238
|
+
/** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
|
|
15625
16239
|
sdSelectChange;
|
|
16240
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
15626
16241
|
sdPageChange;
|
|
16242
|
+
/** 페이지당 행 수가 변경될 때 발생합니다. */
|
|
15627
16243
|
sdRowsPerPageChange;
|
|
16244
|
+
/** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
|
|
15628
16245
|
sdVirtualUpdate;
|
|
16246
|
+
/** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
|
|
15629
16247
|
sdVirtualReachEnd;
|
|
15630
16248
|
currentPage = 1;
|
|
15631
16249
|
innerRowsPerPage = 10;
|
|
@@ -16030,6 +16648,7 @@ class SdTable {
|
|
|
16030
16648
|
isRowSelectedSync(row) {
|
|
16031
16649
|
return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
|
|
16032
16650
|
}
|
|
16651
|
+
/** 행이 선택되어 있는지 확인합니다. */
|
|
16033
16652
|
async isRowSelected(row) {
|
|
16034
16653
|
return this.isRowSelectedSync(row);
|
|
16035
16654
|
}
|
|
@@ -16046,6 +16665,7 @@ class SdTable {
|
|
|
16046
16665
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16047
16666
|
this.refreshChildrenSelection();
|
|
16048
16667
|
}
|
|
16668
|
+
/** 행 선택 상태를 토글합니다. */
|
|
16049
16669
|
async updateRowSelect(row) {
|
|
16050
16670
|
this.updateRowSelectSync(row);
|
|
16051
16671
|
}
|
|
@@ -16062,6 +16682,7 @@ class SdTable {
|
|
|
16062
16682
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16063
16683
|
this.refreshChildrenSelection();
|
|
16064
16684
|
}
|
|
16685
|
+
/** 전체 행 선택/해제를 처리합니다. */
|
|
16065
16686
|
async toggleSelectAll(checked, rows) {
|
|
16066
16687
|
this.toggleSelectAllSync(checked, rows);
|
|
16067
16688
|
}
|
|
@@ -16074,6 +16695,7 @@ class SdTable {
|
|
|
16074
16695
|
return true;
|
|
16075
16696
|
return null; // indeterminate
|
|
16076
16697
|
}
|
|
16698
|
+
/** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
|
|
16077
16699
|
async getIsAllChecked(rows) {
|
|
16078
16700
|
return this.getIsAllCheckedSync(rows);
|
|
16079
16701
|
}
|
|
@@ -16164,6 +16786,7 @@ class SdTable {
|
|
|
16164
16786
|
}
|
|
16165
16787
|
return base;
|
|
16166
16788
|
}
|
|
16789
|
+
/** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
|
|
16167
16790
|
async getStickyStyle(colIdx) {
|
|
16168
16791
|
return this.getStickyStyleSync(colIdx);
|
|
16169
16792
|
}
|
|
@@ -16303,6 +16926,7 @@ class SdTable {
|
|
|
16303
16926
|
this.propagateVirtualUpdate(true);
|
|
16304
16927
|
}
|
|
16305
16928
|
}
|
|
16929
|
+
/** 가상 스크롤 총 행 수를 설정합니다. */
|
|
16306
16930
|
async setRowCount(count) {
|
|
16307
16931
|
this.setRowCountSync(count);
|
|
16308
16932
|
}
|
|
@@ -16330,6 +16954,7 @@ class SdTable {
|
|
|
16330
16954
|
rowsPerPage: this.innerRowsPerPage,
|
|
16331
16955
|
};
|
|
16332
16956
|
}
|
|
16957
|
+
/** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
|
|
16333
16958
|
async getPaginationInfo() {
|
|
16334
16959
|
return this.getPaginationInfoSync();
|
|
16335
16960
|
}
|
|
@@ -16393,25 +17018,25 @@ class SdTable {
|
|
|
16393
17018
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
16394
17019
|
'--table-host-height': hostHeight,
|
|
16395
17020
|
};
|
|
16396
|
-
return (hAsync(Host, { key: '
|
|
17021
|
+
return (hAsync(Host, { key: '2606b0d7fc3657a8021a6dfc64672996b756f762', style: hostStyle }, hAsync("div", { key: '4def416edfe630ead35b80cb2f04081a89740f62', class: "sd-table__container", style: {
|
|
16397
17022
|
'--table-width': this.width,
|
|
16398
17023
|
'--pagination-height': `${paginationHeight}px`,
|
|
16399
|
-
} }, hAsync("div", { key: '
|
|
17024
|
+
} }, hAsync("div", { key: '316a359f2be84895719f452e056dcd2f54cd5b56', class: {
|
|
16400
17025
|
'sd-table__wrapper': true,
|
|
16401
17026
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
16402
17027
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
16403
|
-
} }, hAsync("div", { key: '
|
|
17028
|
+
} }, hAsync("div", { key: 'e798b58104f56b3250a7d74261a8c320a8049f28', class: {
|
|
16404
17029
|
'sd-table__scroll-container': true,
|
|
16405
17030
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
16406
17031
|
'sd-table__scroll-container--no-data': isNoData,
|
|
16407
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
17032
|
+
} }, this.isLoading && (hAsync("div", { key: 'af91877075c8d4ed8b608bdfdc7f04bd844f5574', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '2422c7020046fa468dbaaf34220230737cb6b02e', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'bd5c2237d8c3a34cc4bf12a187f471e22ce02efd', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '1e0da67564879a175e89a3482195742b1b4451dc', class: "sd-table__no-data" }, hAsync("div", { key: '391bc76e748d64b84c39de669396b2f5f288e5a1', class: "sd-table__no-data-content", ref: el => {
|
|
16408
17033
|
this.noDataContentEl = el;
|
|
16409
17034
|
if (el)
|
|
16410
17035
|
this.syncNoDataContentObserver();
|
|
16411
|
-
} }, hAsync("slot", { key: '
|
|
17036
|
+
} }, hAsync("slot", { key: '3e2e26f4951d9b834ae811906c137a78067fecab', name: "no-data" }, hAsync("span", { key: '54ed0371d60f5312376d8ffab50efd9ec0947729' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '46cab11834ca3f5aa9010bd6f603d301b2a54c9c', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
16412
17037
|
this.pagination.rowsPerPage > 0 &&
|
|
16413
17038
|
this.rowCount > 0 &&
|
|
16414
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
17039
|
+
!this.useVirtualScroll && (hAsync("div", { key: 'b9c738172d4e2993f15f6a7e051406d3b7e8d568', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '62c199e61dd2010f2c19aabb3599d75a561ef83d', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '5f305858818e720bf5a53499777d2f5aac843487', value: this.useInternalPagination
|
|
16415
17040
|
? this.innerRowsPerPage
|
|
16416
17041
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
16417
17042
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -16645,11 +17270,17 @@ class SdTabs {
|
|
|
16645
17270
|
registerInstance(this, hostRef);
|
|
16646
17271
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
16647
17272
|
}
|
|
17273
|
+
/** 현재 선택된 탭 value */
|
|
16648
17274
|
value;
|
|
17275
|
+
/** 탭 옵션 목록 */
|
|
16649
17276
|
tabs = [];
|
|
17277
|
+
/** 탭 크기 */
|
|
16650
17278
|
size = 'md';
|
|
17279
|
+
/** true이면 서브 탭 스타일 적용 */
|
|
16651
17280
|
isSub = false;
|
|
17281
|
+
/** true이면 탭을 세로로 배치 */
|
|
16652
17282
|
vertical = false;
|
|
17283
|
+
/** 탭이 변경될 때 새 value를 전달합니다. */
|
|
16653
17284
|
update;
|
|
16654
17285
|
valueChanged(newValue) {
|
|
16655
17286
|
this.value = newValue;
|
|
@@ -16716,7 +17347,7 @@ class SdTabs {
|
|
|
16716
17347
|
};
|
|
16717
17348
|
}
|
|
16718
17349
|
render() {
|
|
16719
|
-
return (hAsync("div", { key: '
|
|
17350
|
+
return (hAsync("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
16720
17351
|
const badgeName = this.getBadgeName(tab);
|
|
16721
17352
|
return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
|
|
16722
17353
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -16929,11 +17560,14 @@ class SdTag {
|
|
|
16929
17560
|
constructor(hostRef) {
|
|
16930
17561
|
registerInstance(this, hostRef);
|
|
16931
17562
|
}
|
|
17563
|
+
/** 태그 프리셋 이름 */
|
|
16932
17564
|
name = 'square_sm_grey';
|
|
17565
|
+
/** 표시할 레이블 텍스트 */
|
|
16933
17566
|
label = '';
|
|
17567
|
+
/** 아이콘명 */
|
|
16934
17568
|
icon;
|
|
16935
17569
|
// 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
16936
|
-
|
|
17570
|
+
/** true이면 아이콘을 레이블 왼쪽에 배치 */
|
|
16937
17571
|
isLeft = true;
|
|
16938
17572
|
componentWillLoad() {
|
|
16939
17573
|
this.name = this.name ?? 'square_sm_grey';
|
|
@@ -16955,7 +17589,7 @@ class SdTag {
|
|
|
16955
17589
|
render() {
|
|
16956
17590
|
const config = this.resolvedConfig;
|
|
16957
17591
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
16958
|
-
return (hAsync("span", { key: '
|
|
17592
|
+
return (hAsync("span", { key: '09cc181654983b64dec9860fdf656677ebcfcd15', class: "sd-tag", style: {
|
|
16959
17593
|
'--sd-tag-background': config.background,
|
|
16960
17594
|
'--sd-tag-content': config.content,
|
|
16961
17595
|
'--sd-tag-height': config.height,
|
|
@@ -16965,7 +17599,7 @@ class SdTag {
|
|
|
16965
17599
|
'--sd-tag-font-weight': config.fontWeight,
|
|
16966
17600
|
'--sd-tag-line-height': config.lineHeight,
|
|
16967
17601
|
'--sd-tag-radius': config.radius,
|
|
16968
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
17602
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '044ab51afc474799b400c608fd5531bed9a7ad18', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
16969
17603
|
}
|
|
16970
17604
|
static get style() { return sdTagCss(); }
|
|
16971
17605
|
static get cmpMeta() { return {
|
|
@@ -16990,6 +17624,7 @@ class SdTbody {
|
|
|
16990
17624
|
registerInstance(this, hostRef);
|
|
16991
17625
|
}
|
|
16992
17626
|
get el() { return getElement(this); }
|
|
17627
|
+
/** 렌더링할 행 데이터 목록 */
|
|
16993
17628
|
rows = [];
|
|
16994
17629
|
tableId = '';
|
|
16995
17630
|
topSpacerHeight = 0;
|
|
@@ -17033,9 +17668,9 @@ class SdTbody {
|
|
|
17033
17668
|
}
|
|
17034
17669
|
}
|
|
17035
17670
|
render() {
|
|
17036
|
-
return (hAsync(Host, { key: '
|
|
17671
|
+
return (hAsync(Host, { key: '0f85168b22221551714f3c75bd12c366538cc5ec', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'f9a8528d40c51988cfbca2c349905dafdafce8d3', class: { tbody: true } }, [
|
|
17037
17672
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
17038
|
-
hAsync("slot", { key: '
|
|
17673
|
+
hAsync("slot", { key: '7ecfe2f730b4c909d394fdee2d9aa015c5410cb4' }),
|
|
17039
17674
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
17040
17675
|
])));
|
|
17041
17676
|
}
|
|
@@ -17067,18 +17702,27 @@ class SdTd {
|
|
|
17067
17702
|
registerInstance(this, hostRef);
|
|
17068
17703
|
}
|
|
17069
17704
|
get el() { return getElement(this); }
|
|
17705
|
+
/** 데이터 필드명 (슬롯 이름 생성에 사용) */
|
|
17070
17706
|
field;
|
|
17707
|
+
/** 행 식별 키 */
|
|
17071
17708
|
rowKey;
|
|
17709
|
+
/** 셀 내용 정렬 */
|
|
17072
17710
|
align;
|
|
17711
|
+
/** 행 병합 수 */
|
|
17073
17712
|
rowspan;
|
|
17713
|
+
/** 열 병합 수 */
|
|
17074
17714
|
colspan;
|
|
17075
17715
|
// sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
|
|
17076
17716
|
// <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
|
|
17077
17717
|
// 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
|
|
17718
|
+
/** td에 병합할 사용자 클래스 */
|
|
17078
17719
|
sdClass;
|
|
17720
|
+
/** 좌측 구분선 표시 여부 */
|
|
17079
17721
|
dividerLeft = false;
|
|
17722
|
+
/** 우측 구분선 표시 여부 */
|
|
17080
17723
|
dividerRight = false;
|
|
17081
17724
|
// true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
|
|
17725
|
+
/** frame 레이아웃 사용 여부 */
|
|
17082
17726
|
useFrame = false;
|
|
17083
17727
|
handleFieldChange(_newField, oldField) {
|
|
17084
17728
|
this.syncSlotName();
|
|
@@ -17210,7 +17854,7 @@ class SdTd {
|
|
|
17210
17854
|
}
|
|
17211
17855
|
}
|
|
17212
17856
|
render() {
|
|
17213
|
-
return (hAsync(Host, { key: '
|
|
17857
|
+
return (hAsync(Host, { key: 'd7cea28b006a4903fab00e7a709252e6009f911f', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '1d8695ff6c6890838e4b18ec4da1d7ff6a5c8858' })));
|
|
17214
17858
|
}
|
|
17215
17859
|
static get watchers() { return {
|
|
17216
17860
|
"field": [{
|
|
@@ -17375,14 +18019,23 @@ class SdTextLink {
|
|
|
17375
18019
|
registerInstance(this, hostRef);
|
|
17376
18020
|
this.click = createEvent(this, "sdClick", 7);
|
|
17377
18021
|
}
|
|
18022
|
+
/** 표시할 레이블 텍스트 */
|
|
17378
18023
|
label = '';
|
|
18024
|
+
/** 좌측 아이콘명 */
|
|
17379
18025
|
icon = '';
|
|
18026
|
+
/** 좌측 아이콘 색상 */
|
|
17380
18027
|
iconColor = '';
|
|
18028
|
+
/** 레이블 span에 추가할 클래스 */
|
|
17381
18029
|
labelClass = '';
|
|
18030
|
+
/** 우측 화살표 타입 */
|
|
17382
18031
|
rightArrow = 'none';
|
|
18032
|
+
/** 밑줄 스타일 여부 */
|
|
17383
18033
|
underline = false;
|
|
18034
|
+
/** 비활성 상태 여부 */
|
|
17384
18035
|
disabled = false;
|
|
18036
|
+
/** 텍스트 크기 */
|
|
17385
18037
|
size = 'sm';
|
|
18038
|
+
/** 클릭 시 발생합니다. */
|
|
17386
18039
|
click;
|
|
17387
18040
|
handleClick = () => {
|
|
17388
18041
|
if (this.disabled)
|
|
@@ -17404,7 +18057,7 @@ class SdTextLink {
|
|
|
17404
18057
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
17405
18058
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
17406
18059
|
};
|
|
17407
|
-
return (hAsync("span", { key: '
|
|
18060
|
+
return (hAsync("span", { key: '1b58c27c2754182b1fc6249e7e4bf52f42d1d11d', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
17408
18061
|
'sd-text-link': true,
|
|
17409
18062
|
'sd-text-link--disabled': this.disabled,
|
|
17410
18063
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -17412,13 +18065,13 @@ class SdTextLink {
|
|
|
17412
18065
|
e.preventDefault();
|
|
17413
18066
|
this.handleClick();
|
|
17414
18067
|
}
|
|
17415
|
-
} }, this.icon && (hAsync("sd-icon", { key: '
|
|
18068
|
+
} }, this.icon && (hAsync("sd-icon", { key: '85076e7cf4873b527606aa737c2899233dcc3d9f', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '75b16e64155770ccdb889497caea6b4240b2e8c0', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: '8dd32b1b640a8e81f306b0387f783a4c1435abd6', class: "sd-text-link__arrow", style: {
|
|
17416
18069
|
width: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17417
18070
|
height: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17418
18071
|
display: 'inline-flex',
|
|
17419
18072
|
alignItems: 'center',
|
|
17420
18073
|
justifyContent: 'center',
|
|
17421
|
-
} }, hAsync("sd-icon", { key: '
|
|
18074
|
+
} }, hAsync("sd-icon", { key: '605572568dd4c2b6dcde9c932d5593e5fdb916a4', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
|
|
17422
18075
|
}
|
|
17423
18076
|
static get style() { return sdTextLinkCss(); }
|
|
17424
18077
|
static get cmpMeta() { return {
|
|
@@ -17464,38 +18117,67 @@ class SdTextarea {
|
|
|
17464
18117
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
17465
18118
|
}
|
|
17466
18119
|
get host() { return getElement(this); }
|
|
18120
|
+
/** 입력 값 */
|
|
17467
18121
|
value = null;
|
|
18122
|
+
/** 플레이스홀더 텍스트 */
|
|
17468
18123
|
placeholder = '입력해 주세요.';
|
|
18124
|
+
/** 비활성 상태 여부 */
|
|
17469
18125
|
disabled = false;
|
|
18126
|
+
/** 읽기 전용 여부 */
|
|
17470
18127
|
readonly = false;
|
|
18128
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
17471
18129
|
autoFocus = false;
|
|
18130
|
+
/** 네이티브 textarea에 추가할 클래스 */
|
|
17472
18131
|
textareaClass = '';
|
|
18132
|
+
/** 네이티브 textarea에 적용할 인라인 스타일 */
|
|
17473
18133
|
textareaStyle = {};
|
|
18134
|
+
/** 최대 입력 글자 수 */
|
|
17474
18135
|
maxLength;
|
|
18136
|
+
/** textarea 기본 행 수 */
|
|
17475
18137
|
rows;
|
|
18138
|
+
/** 맞춤법 검사 여부 */
|
|
17476
18139
|
spellcheck = false;
|
|
18140
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
17477
18141
|
width = '';
|
|
17478
18142
|
// props - sd-field
|
|
18143
|
+
/** 레이블 텍스트 */
|
|
17479
18144
|
label = '';
|
|
18145
|
+
/** 레이블 너비 */
|
|
17480
18146
|
labelWidth = '';
|
|
18147
|
+
/** 필드 우측 어드온 레이블 */
|
|
17481
18148
|
addonLabel = '';
|
|
18149
|
+
/** 어드온 정렬 방향 */
|
|
17482
18150
|
addonAlign = 'start';
|
|
18151
|
+
/** 필드 하단 힌트 텍스트 */
|
|
17483
18152
|
hint = '';
|
|
18153
|
+
/** 에러 메시지 */
|
|
17484
18154
|
errorMessage = '';
|
|
18155
|
+
/** 레이블 영역 아이콘 */
|
|
17485
18156
|
icon = undefined;
|
|
18157
|
+
/** 레이블 툴팁 텍스트 */
|
|
17486
18158
|
labelTooltip = '';
|
|
18159
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
17487
18160
|
labelTooltipProps = null;
|
|
18161
|
+
/** 유효성 검사 규칙 목록 */
|
|
17488
18162
|
rules = [];
|
|
18163
|
+
/** 에러 상태 여부 */
|
|
17489
18164
|
error = false;
|
|
18165
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
17490
18166
|
status;
|
|
18167
|
+
/** 포커스 상태 여부 */
|
|
17491
18168
|
focused = false;
|
|
18169
|
+
/** 호버 상태 여부 */
|
|
17492
18170
|
hovered = false;
|
|
17493
18171
|
internalValue = null;
|
|
17494
18172
|
nativeEl = undefined;
|
|
17495
18173
|
formField;
|
|
18174
|
+
/** 폼 연동용 name 속성 */
|
|
17496
18175
|
name = nanoid$1();
|
|
18176
|
+
/** 값이 변경될 때 발생합니다. */
|
|
17497
18177
|
input;
|
|
18178
|
+
/** 포커스될 때 발생합니다. */
|
|
17498
18179
|
focus;
|
|
18180
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
17499
18181
|
blur;
|
|
17500
18182
|
valueChanged(newValue) {
|
|
17501
18183
|
this.internalValue = newValue;
|
|
@@ -17506,18 +18188,23 @@ class SdTextarea {
|
|
|
17506
18188
|
this.input?.emit(this.value);
|
|
17507
18189
|
}
|
|
17508
18190
|
}
|
|
18191
|
+
/** 네이티브 textarea 엘리먼트를 반환합니다. */
|
|
17509
18192
|
async sdGetNativeElement() {
|
|
17510
18193
|
return this.nativeEl || null;
|
|
17511
18194
|
}
|
|
18195
|
+
/** 유효성 검사를 실행합니다. */
|
|
17512
18196
|
async sdValidate() {
|
|
17513
18197
|
this.formField?.sdValidate();
|
|
17514
18198
|
}
|
|
18199
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
17515
18200
|
async sdReset() {
|
|
17516
18201
|
this.formField?.sdReset();
|
|
17517
18202
|
}
|
|
18203
|
+
/** 유효성 상태만 초기화합니다. */
|
|
17518
18204
|
async sdResetValidate() {
|
|
17519
18205
|
this.formField?.sdResetValidation();
|
|
17520
18206
|
}
|
|
18207
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
17521
18208
|
async sdFocus() {
|
|
17522
18209
|
this.formField?.sdFocus();
|
|
17523
18210
|
}
|
|
@@ -17566,7 +18253,7 @@ class SdTextarea {
|
|
|
17566
18253
|
'--sd-system-size-field-sm-height': 'auto',
|
|
17567
18254
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
17568
18255
|
};
|
|
17569
|
-
return (hAsync("sd-field", { key: '
|
|
18256
|
+
return (hAsync("sd-field", { key: 'f8fd8949824938bb79f101de2e5eca7980224b09', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '382441be15dd047888cf876006f1966256a503b7', class: "sd-textarea__content" }, hAsync("textarea", { key: '5f5985ccdcc401f4aff2f47fe40003abeb76e8b3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
17570
18257
|
}
|
|
17571
18258
|
static get watchers() { return {
|
|
17572
18259
|
"value": [{
|
|
@@ -17628,15 +18315,25 @@ class SdThead {
|
|
|
17628
18315
|
this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
|
|
17629
18316
|
}
|
|
17630
18317
|
get el() { return getElement(this); }
|
|
18318
|
+
/** 테이블 컬럼 목록 */
|
|
17631
18319
|
columns;
|
|
18320
|
+
/** 행 선택 기능 사용 여부 */
|
|
17632
18321
|
selectable;
|
|
18322
|
+
/** 컬럼 너비 조절 가능 여부 */
|
|
17633
18323
|
resizable;
|
|
18324
|
+
/** 고정 컬럼 설정 */
|
|
17634
18325
|
stickyColumn;
|
|
18326
|
+
/** 헤더 고정 여부 */
|
|
17635
18327
|
stickyHeader;
|
|
18328
|
+
/** 좌측 스크롤 여부 */
|
|
17636
18329
|
scrolledLeft;
|
|
18330
|
+
/** 우측 스크롤 여부 */
|
|
17637
18331
|
scrolledRight;
|
|
18332
|
+
/** 전체 선택 체크박스용 행 데이터 */
|
|
17638
18333
|
rows = [];
|
|
18334
|
+
/** 컬럼 너비 목록 */
|
|
17639
18335
|
columnWidths = [];
|
|
18336
|
+
/** 컬럼 정렬 버튼 클릭 시 발생합니다. */
|
|
17640
18337
|
sdColumnSort;
|
|
17641
18338
|
tableId = '';
|
|
17642
18339
|
_columns = [];
|
|
@@ -17702,12 +18399,15 @@ class SdThead {
|
|
|
17702
18399
|
this.columnWidths = [];
|
|
17703
18400
|
}
|
|
17704
18401
|
}
|
|
18402
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
17705
18403
|
async refreshConfig() {
|
|
17706
18404
|
this.resolveConfig();
|
|
17707
18405
|
}
|
|
18406
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
17708
18407
|
async setColumnWidths(widths) {
|
|
17709
18408
|
this.columnWidths = Array.isArray(widths) ? widths : [];
|
|
17710
18409
|
}
|
|
18410
|
+
/** 전체 선택 체크박스 상태를 갱신합니다. */
|
|
17711
18411
|
async refreshSelection() {
|
|
17712
18412
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
17713
18413
|
if (checkbox) {
|
|
@@ -17783,16 +18483,16 @@ class SdThead {
|
|
|
17783
18483
|
'--table-border-color': TABLE_BORDER.color,
|
|
17784
18484
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
17785
18485
|
};
|
|
17786
|
-
return (hAsync(Host, { key: '
|
|
18486
|
+
return (hAsync(Host, { key: '26981191de95775401cad61e80fbf1e22cb0250b', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a53d430f1b71a45b98de2912b563d3f17cd20b24', class: {
|
|
17787
18487
|
'thead': true,
|
|
17788
18488
|
'thead--sticky': this._stickyHeader,
|
|
17789
|
-
} }, hAsync("tr", { key: '
|
|
18489
|
+
} }, hAsync("tr", { key: '27ce13b70bfda4b210b36eb746fb60d369d9f5be', class: "tr" }, this._selectable && (hAsync("th", { key: 'e353b00c7a02b82781e5107b1fd73dc556427edf', class: {
|
|
17790
18490
|
'th': true,
|
|
17791
18491
|
'th--selected': true,
|
|
17792
18492
|
'sticky-left': true,
|
|
17793
18493
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17794
18494
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17795
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
18495
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '18eeabbcc4fc10196d6448bd9d0493b55778f9f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: '1a5a0561fc94be53a8244827ac9ae4f98fa766c2', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
17796
18496
|
'th': true,
|
|
17797
18497
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
17798
18498
|
'sticky-left': true,
|
|
@@ -17927,14 +18627,23 @@ class SdToast {
|
|
|
17927
18627
|
this.close = createEvent(this, "sdClose", 7);
|
|
17928
18628
|
this.buttonClick = createEvent(this, "sdButtonClick", 7);
|
|
17929
18629
|
}
|
|
18630
|
+
/** 좌측 아이콘명 */
|
|
17930
18631
|
icon;
|
|
18632
|
+
/** 표시할 메시지 */
|
|
17931
18633
|
message;
|
|
18634
|
+
/** 우측 링크 URL */
|
|
17932
18635
|
link;
|
|
18636
|
+
/** 링크 표시 레이블 (없으면 URL 표시) */
|
|
17933
18637
|
linkLabel;
|
|
18638
|
+
/** 우측 버튼 레이블 */
|
|
17934
18639
|
buttonLabel;
|
|
18640
|
+
/** 닫기 버튼 표시 여부 */
|
|
17935
18641
|
useClose = false;
|
|
18642
|
+
/** 토스트 타입 (색상/아이콘 프리셋) */
|
|
17936
18643
|
type = 'default';
|
|
18644
|
+
/** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
|
|
17937
18645
|
close;
|
|
18646
|
+
/** 우측 버튼 클릭 시 발생합니다. */
|
|
17938
18647
|
buttonClick;
|
|
17939
18648
|
render() {
|
|
17940
18649
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
@@ -17943,12 +18652,12 @@ class SdToast {
|
|
|
17943
18652
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
17944
18653
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
17945
18654
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
17946
|
-
return (hAsync("div", { key: '
|
|
18655
|
+
return (hAsync("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
|
|
17947
18656
|
'--sd-toast-bg': typeConfig.bg,
|
|
17948
18657
|
'--sd-toast-text': typeConfig.content,
|
|
17949
18658
|
'--sd-toast-icon': iconColor,
|
|
17950
18659
|
'--sd-toast-link': linkColor,
|
|
17951
|
-
} }, hAsync("div", { key: '
|
|
18660
|
+
} }, hAsync("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, hAsync("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
17952
18661
|
}
|
|
17953
18662
|
static get style() { return sdToastCss(); }
|
|
17954
18663
|
static get cmpMeta() { return {
|
|
@@ -17988,15 +18697,22 @@ class SdToastContainer {
|
|
|
17988
18697
|
this.toastDismiss = createEvent(this, "sdToastDismiss", 7);
|
|
17989
18698
|
}
|
|
17990
18699
|
get el() { return getElement(this); }
|
|
18700
|
+
/** 토스트 표시 위치 */
|
|
17991
18701
|
position = 'bottom-center';
|
|
18702
|
+
/** 동시에 표시할 최대 토스트 수 */
|
|
17992
18703
|
maxVisible = DEFAULT_MAX_VISIBLE;
|
|
18704
|
+
/** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
|
|
17993
18705
|
defaultDuration = DEFAULT_DURATION;
|
|
18706
|
+
/** z-index */
|
|
17994
18707
|
zIndex = DEFAULT_Z_INDEX;
|
|
17995
18708
|
toasts = [];
|
|
17996
18709
|
expanded = false;
|
|
17997
18710
|
toastRefs = new Map();
|
|
18711
|
+
/** 토스트가 표시될 때 발생합니다. */
|
|
17998
18712
|
toastShow;
|
|
18713
|
+
/** 토스트가 제거될 때 발생합니다. */
|
|
17999
18714
|
toastDismiss;
|
|
18715
|
+
/** 토스트를 생성하고 ID를 반환합니다. */
|
|
18000
18716
|
async create(options) {
|
|
18001
18717
|
const id = `toast-${++toastIdCounter}`;
|
|
18002
18718
|
const entry = { id, options, state: 'entering' };
|
|
@@ -18021,9 +18737,11 @@ class SdToastContainer {
|
|
|
18021
18737
|
this.toastShow.emit({ id });
|
|
18022
18738
|
return id;
|
|
18023
18739
|
}
|
|
18740
|
+
/** 지정한 ID의 토스트를 닫습니다. */
|
|
18024
18741
|
async dismiss(id) {
|
|
18025
18742
|
this.startDismiss(id);
|
|
18026
18743
|
}
|
|
18744
|
+
/** 모든 토스트를 닫습니다. */
|
|
18027
18745
|
async dismissAll() {
|
|
18028
18746
|
(this.toasts || []).forEach(t => this.startDismiss(t.id));
|
|
18029
18747
|
}
|
|
@@ -18201,7 +18919,7 @@ class SdToastContainer {
|
|
|
18201
18919
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
18202
18920
|
const indexMap = new Map();
|
|
18203
18921
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
18204
|
-
return (hAsync("div", { key: '
|
|
18922
|
+
return (hAsync("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
18205
18923
|
this.expanded = true;
|
|
18206
18924
|
this.pauseTimers();
|
|
18207
18925
|
}, onMouseLeave: () => {
|
|
@@ -18315,9 +19033,13 @@ class SdToggle {
|
|
|
18315
19033
|
registerInstance(this, hostRef);
|
|
18316
19034
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
18317
19035
|
}
|
|
19036
|
+
/** 현재 선택 상태 */
|
|
18318
19037
|
value = false;
|
|
19038
|
+
/** 표시할 레이블 텍스트 */
|
|
18319
19039
|
label = '';
|
|
19040
|
+
/** 비활성 상태 여부 */
|
|
18320
19041
|
disabled = false;
|
|
19042
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
18321
19043
|
change;
|
|
18322
19044
|
get toggleClasses() {
|
|
18323
19045
|
const classes = ['sd-toggle'];
|
|
@@ -18359,7 +19081,7 @@ class SdToggle {
|
|
|
18359
19081
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
18360
19082
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
18361
19083
|
};
|
|
18362
|
-
return (hAsync("label", { key: '
|
|
19084
|
+
return (hAsync("label", { key: '1a03763c5cfcb5159b69e62a9db9893297082e2b', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '099cbbb02ebf283883ab7fe748f605491ae84808', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
18363
19085
|
}
|
|
18364
19086
|
static get style() { return sdToggleCss(); }
|
|
18365
19087
|
static get cmpMeta() { return {
|
|
@@ -18408,19 +19130,33 @@ class SdTooltip {
|
|
|
18408
19130
|
registerInstance(this, hostRef);
|
|
18409
19131
|
}
|
|
18410
19132
|
get el() { return getElement(this); }
|
|
19133
|
+
/** 툴팁 트리거 방식 */
|
|
18411
19134
|
trigger = 'hover';
|
|
19135
|
+
/** 툴팁 표시 방향 */
|
|
18412
19136
|
placement = 'top';
|
|
19137
|
+
/** 아이콘 트리거 색상 */
|
|
18413
19138
|
color = '#01BB4B';
|
|
19139
|
+
/** 툴팁 배경/텍스트 색상 타입 */
|
|
18414
19140
|
tooltipType = 'default';
|
|
19141
|
+
/** 아이콘 트리거 아이콘명 */
|
|
18415
19142
|
icon = 'helpOutline';
|
|
19143
|
+
/** 아이콘 트리거 크기 */
|
|
18416
19144
|
iconSize = 12;
|
|
19145
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
18417
19146
|
label = '';
|
|
19147
|
+
/** 버튼 트리거 프리셋 */
|
|
18418
19148
|
name = 'primary_sm';
|
|
19149
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
18419
19150
|
rightIcon;
|
|
19151
|
+
/** 스크린리더용 접근성 레이블 */
|
|
18420
19152
|
ariaLabel = '';
|
|
19153
|
+
/** 비활성 상태 여부 */
|
|
18421
19154
|
disabled = false;
|
|
19155
|
+
/** 버튼 type 속성 */
|
|
18422
19156
|
type = 'button';
|
|
19157
|
+
/** 툴팁 우측 상단 닫기 버튼 표시 여부 */
|
|
18423
19158
|
useClose = false;
|
|
19159
|
+
/** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
|
|
18424
19160
|
sdClass = '';
|
|
18425
19161
|
/**
|
|
18426
19162
|
* 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
|
|
@@ -18533,7 +19269,7 @@ class SdTooltip {
|
|
|
18533
19269
|
const bodyHTML = this.message && this.message.length > 0
|
|
18534
19270
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
18535
19271
|
: this.slotContentHTML;
|
|
18536
|
-
return (hAsync(Fragment, { key: '
|
|
19272
|
+
return (hAsync(Fragment, { key: 'c5a5c69267ac8a7d7f06324a63b6410092b84f04' }, hAsync("div", { key: 'f7323385e1b2e6ef4199c6318bdc55984182d3da', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '0ba07ee2a20862df43755264d9390b3229da57e6', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'f92217cb8cca4d1467cbeac7b36f9a00f28babd3', ref: el => (this.menuEl = el), class: {
|
|
18537
19273
|
'sd-floating-menu': true,
|
|
18538
19274
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
18539
19275
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -18541,7 +19277,7 @@ class SdTooltip {
|
|
|
18541
19277
|
}, style: {
|
|
18542
19278
|
'--sd-floating-bg': typeConfig.bg,
|
|
18543
19279
|
'--sd-floating-content': typeConfig.content,
|
|
18544
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '
|
|
19280
|
+
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '6d7671dbac4fa026788f0804df4a97ca86c492c1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '31321fbfef392af0fa64111a32c3ecd6c6144d35' })), hAsync("div", { key: '67e54a935c9f684d713ab943e7049737d5a8596a', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '355101a4efed88fbb687e1f972f88b6dfb4be309', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
|
|
18545
19281
|
}
|
|
18546
19282
|
static get style() { return sdTooltipCss(); }
|
|
18547
19283
|
static get cmpMeta() { return {
|
|
@@ -18583,11 +19319,17 @@ class SdTr {
|
|
|
18583
19319
|
registerInstance(this, hostRef);
|
|
18584
19320
|
}
|
|
18585
19321
|
get el() { return getElement(this); }
|
|
19322
|
+
/** 테이블 컬럼 목록 */
|
|
18586
19323
|
columns;
|
|
19324
|
+
/** 행 선택 기능 사용 여부 */
|
|
18587
19325
|
selectable;
|
|
19326
|
+
/** 고정 컬럼 설정 */
|
|
18588
19327
|
stickyColumn;
|
|
19328
|
+
/** 행 식별 키 */
|
|
18589
19329
|
rowKey = '';
|
|
19330
|
+
/** 행 데이터 객체 */
|
|
18590
19331
|
row = {};
|
|
19332
|
+
/** 구분선 높이 (4 또는 6px, null이면 일반 행) */
|
|
18591
19333
|
separator = null;
|
|
18592
19334
|
tableId = '';
|
|
18593
19335
|
columnWidths = [];
|
|
@@ -18640,12 +19382,15 @@ class SdTr {
|
|
|
18640
19382
|
this.columnWidths = [...config.columnWidths];
|
|
18641
19383
|
}
|
|
18642
19384
|
}
|
|
19385
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
18643
19386
|
async refreshConfig() {
|
|
18644
19387
|
this.resolveConfig();
|
|
18645
19388
|
}
|
|
19389
|
+
/** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
|
|
18646
19390
|
async bumpSpansVersion() {
|
|
18647
19391
|
this.spansVersion = this.spansVersion + 1;
|
|
18648
19392
|
}
|
|
19393
|
+
/** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
|
|
18649
19394
|
async updateVisibility() {
|
|
18650
19395
|
this.updateVisibilitySync();
|
|
18651
19396
|
}
|
|
@@ -18658,9 +19403,11 @@ class SdTr {
|
|
|
18658
19403
|
}
|
|
18659
19404
|
this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
|
|
18660
19405
|
}
|
|
19406
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
18661
19407
|
async setColumnWidths(widths) {
|
|
18662
19408
|
this.columnWidths = widths;
|
|
18663
19409
|
}
|
|
19410
|
+
/** 체크박스 선택 상태를 갱신합니다. */
|
|
18664
19411
|
async refreshSelection() {
|
|
18665
19412
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
18666
19413
|
if (checkbox) {
|