@sellmate/design-system 1.20.1 → 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 +12 -3
- 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 +7 -1
- 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/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 +12 -6
- 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-D99vy8Ip.js → p-4MIzxb0h.js} +1 -1
- package/dist/components/{p-CQozoo2-.js → p-B-Igud6n.js} +1 -1
- package/dist/components/{p-CoqA9KgU.js → p-B5VNSTAf.js} +1 -1
- package/dist/components/{p-DertIGhs.js → p-B76pFg6k.js} +1 -1
- package/dist/components/{p-MJG6EZeP.js → p-BFlmHQm9.js} +1 -1
- package/dist/components/{p-Rwc_ltPn.js → p-BIHVGo10.js} +1 -1
- package/dist/components/{p-uSEbiD29.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-CZfsknba.js → p-BVlg0BoC.js} +1 -1
- package/dist/components/{p-CRwvv7YM.js → p-BjSMh85k.js} +1 -1
- package/dist/components/{p-gOIeNT-Z.js → p-BrHnpCXR.js} +1 -1
- package/dist/components/{p-Bz93hWXV.js → p-Btj50AUe.js} +1 -1
- package/dist/components/{p-CLlAhEDc.js → p-BzsHwLh6.js} +1 -1
- package/dist/components/{p-9Z-q6kKD.js → p-C1QezE7u.js} +1 -1
- package/dist/components/{p-Dl89_4C3.js → p-C3mTIE8H.js} +1 -1
- package/dist/components/{p-CTPImLDQ.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-5imde6N9.js → p-CTw1Deo8.js} +1 -1
- package/dist/components/p-CTxZT3Je.js +1 -0
- package/dist/components/{p-CB2A3pJ5.js → p-CZYTZeMe.js} +1 -1
- package/dist/components/{p-BZfVV3gu.js → p-CcwzTAJC.js} +1 -1
- package/dist/components/p-Cj_1bYZF.js +1 -0
- package/dist/components/{p-B5bya7Gp.js → p-Cugxp5lo.js} +1 -1
- package/dist/components/{p-CUR9smP5.js → p-D4zy1T3V.js} +1 -1
- package/dist/components/{p-BjcGzaFR.js → p-DC5W8Uy1.js} +1 -1
- package/dist/components/{p-DDAA-zcg.js → p-DIc8C633.js} +1 -1
- package/dist/components/{p-DIlNesBH.js → p-DJY7lCe4.js} +1 -1
- package/dist/components/{p-CrT06Uwc.js → p-DPXOBYhf.js} +1 -1
- package/dist/components/{p-BiBLp9_a.js → p-DU0IkIvI.js} +1 -1
- package/dist/components/{p-DZTxHJlP.js → p-DZikCqcw.js} +1 -1
- package/dist/components/{p-DNnI3Nru.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-ZvI5A-_t.js → p-YpyfqzoP.js} +1 -1
- package/dist/components/{p-CJ69QmR3.js → p-l7TaS8q9.js} +1 -1
- package/dist/components/{p-FTvXz0-a.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-7ed8c8f1.entry.js → p-d5b535ad.entry.js} +1 -1
- 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-17dcf0e4.entry.js → p-fe5b8eaa.entry.js} +1 -1
- 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 +12 -3
- 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 +7 -1
- 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 +6 -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 +823 -124
- package/hydrate/index.mjs +823 -124
- package/package.json +1 -1
- package/dist/components/p-B7PHGGFH.js +0 -1
- package/dist/components/p-CXeOxSQ-.js +0 -1
- package/dist/components/p-CvSqieCH.js +0 -1
- package/dist/components/p-P2jWtk8J.js +0 -1
- package/dist/components/p-xkRWGISE.js +0 -1
- package/dist/design-system/p-316b8a08.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-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.mjs
CHANGED
|
@@ -134,7 +134,7 @@ var node_crypto = require('node:crypto');
|
|
|
134
134
|
const NAMESPACE = 'design-system';
|
|
135
135
|
const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
136
136
|
|
|
137
|
-
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}";
|
|
137
|
+
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}";
|
|
138
138
|
|
|
139
139
|
/*
|
|
140
140
|
Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -5302,11 +5302,17 @@ class SdActionModal {
|
|
|
5302
5302
|
this.close = createEvent(this, "sdClose", 7);
|
|
5303
5303
|
this.ok = createEvent(this, "sdOk", 7);
|
|
5304
5304
|
}
|
|
5305
|
+
/** 모달 헤더에 표시할 제목 */
|
|
5305
5306
|
modalTitle = '';
|
|
5307
|
+
/** 하단 확인 버튼의 props (없으면 footer 미표시) */
|
|
5306
5308
|
buttonProps;
|
|
5309
|
+
/** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5307
5310
|
width;
|
|
5311
|
+
/** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5308
5312
|
height;
|
|
5313
|
+
/** 닫기 버튼 클릭 시 발생 */
|
|
5309
5314
|
close;
|
|
5315
|
+
/** 확인 버튼 클릭 시 발생 */
|
|
5310
5316
|
ok;
|
|
5311
5317
|
render() {
|
|
5312
5318
|
const cssVars = {
|
|
@@ -5336,7 +5342,7 @@ class SdActionModal {
|
|
|
5336
5342
|
if (this.height != null && this.height !== '') {
|
|
5337
5343
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5338
5344
|
}
|
|
5339
|
-
return (hAsync("div", { key: '
|
|
5345
|
+
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() })))));
|
|
5340
5346
|
}
|
|
5341
5347
|
static get style() { return sdActionModalCss(); }
|
|
5342
5348
|
static get cmpMeta() { return {
|
|
@@ -5385,10 +5391,11 @@ class SdBadge {
|
|
|
5385
5391
|
constructor(hostRef) {
|
|
5386
5392
|
registerInstance(this, hostRef);
|
|
5387
5393
|
}
|
|
5394
|
+
/** 뱃지 색상 */
|
|
5388
5395
|
color = 'blue';
|
|
5389
5396
|
render() {
|
|
5390
5397
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5391
|
-
return (hAsync("div", { key: '
|
|
5398
|
+
return (hAsync("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
|
|
5392
5399
|
}
|
|
5393
5400
|
static get style() { return sdBadgeCss(); }
|
|
5394
5401
|
static get cmpMeta() { return {
|
|
@@ -5499,38 +5506,66 @@ class SdBarcodeInput {
|
|
|
5499
5506
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
5500
5507
|
}
|
|
5501
5508
|
get host() { return getElement(this); }
|
|
5509
|
+
/** 입력값 */
|
|
5502
5510
|
value = null;
|
|
5511
|
+
/** 입력 필드 크기 */
|
|
5503
5512
|
size = 'sm';
|
|
5513
|
+
/** 필드 우측 어드온 레이블 */
|
|
5504
5514
|
addonLabel = '';
|
|
5515
|
+
/** 어드온 정렬 방향 */
|
|
5505
5516
|
addonAlign = 'start';
|
|
5517
|
+
/** 입력 placeholder */
|
|
5506
5518
|
placeholder = '입력해 주세요.';
|
|
5519
|
+
/** 비활성 상태 여부 */
|
|
5507
5520
|
disabled = false;
|
|
5521
|
+
/** 입력값 지우기 버튼 표시 여부 */
|
|
5508
5522
|
clearable = false;
|
|
5523
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5509
5524
|
width = '';
|
|
5525
|
+
/** 유효성 검사 규칙 목록 */
|
|
5510
5526
|
rules = [];
|
|
5527
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
5511
5528
|
autoFocus = false;
|
|
5529
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
5512
5530
|
status;
|
|
5531
|
+
/** 필드 하단 힌트 텍스트 */
|
|
5513
5532
|
hint = '';
|
|
5533
|
+
/** 에러 메시지 */
|
|
5514
5534
|
errorMessage = '';
|
|
5535
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
5515
5536
|
inputClass = '';
|
|
5537
|
+
/** 읽기 전용 여부 */
|
|
5516
5538
|
readonly = false;
|
|
5539
|
+
/** 에러 상태 여부 */
|
|
5517
5540
|
error = false;
|
|
5541
|
+
/** 포커스 상태 여부 */
|
|
5518
5542
|
focused = false;
|
|
5543
|
+
/** 호버 상태 여부 */
|
|
5519
5544
|
hovered = false;
|
|
5520
5545
|
// props - label
|
|
5546
|
+
/** 레이블 텍스트 */
|
|
5521
5547
|
label = '';
|
|
5548
|
+
/** 레이블 너비 */
|
|
5522
5549
|
labelWidth = '';
|
|
5550
|
+
/** 레이블 영역 아이콘 */
|
|
5523
5551
|
icon = undefined;
|
|
5552
|
+
/** 레이블 툴팁 텍스트 */
|
|
5524
5553
|
labelTooltip = '';
|
|
5554
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
5525
5555
|
labelTooltipProps = null;
|
|
5526
5556
|
// props - custom styles
|
|
5557
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
5527
5558
|
inputStyle = {};
|
|
5528
5559
|
internalValue = null;
|
|
5529
5560
|
nativeEl = undefined;
|
|
5530
5561
|
formField;
|
|
5562
|
+
/** 폼 연동용 name 속성 */
|
|
5531
5563
|
name = nanoid$1();
|
|
5564
|
+
/** 입력값 변경 시 발생합니다. */
|
|
5532
5565
|
input;
|
|
5566
|
+
/** 포커스 진입 시 발생합니다. */
|
|
5533
5567
|
focus;
|
|
5568
|
+
/** 포커스 이탈 시 발생합니다. */
|
|
5534
5569
|
blur;
|
|
5535
5570
|
valueChanged(newValue) {
|
|
5536
5571
|
this.internalValue = newValue;
|
|
@@ -5541,18 +5576,23 @@ class SdBarcodeInput {
|
|
|
5541
5576
|
this.input?.emit(this.value);
|
|
5542
5577
|
}
|
|
5543
5578
|
}
|
|
5579
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
5544
5580
|
async sdGetNativeElement() {
|
|
5545
5581
|
return this.nativeEl || null;
|
|
5546
5582
|
}
|
|
5583
|
+
/** 유효성 검사를 실행합니다. */
|
|
5547
5584
|
async sdValidate() {
|
|
5548
5585
|
this.formField?.sdValidate();
|
|
5549
5586
|
}
|
|
5587
|
+
/** 입력값과 유효성 상태를 초기화합니다. */
|
|
5550
5588
|
async sdReset() {
|
|
5551
5589
|
this.formField?.sdReset();
|
|
5552
5590
|
}
|
|
5591
|
+
/** 유효성 상태만 초기화합니다. */
|
|
5553
5592
|
async sdResetValidate() {
|
|
5554
5593
|
this.formField?.sdResetValidation();
|
|
5555
5594
|
}
|
|
5595
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
5556
5596
|
async sdFocus() {
|
|
5557
5597
|
this.formField?.sdFocus();
|
|
5558
5598
|
}
|
|
@@ -5598,7 +5638,7 @@ class SdBarcodeInput {
|
|
|
5598
5638
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5599
5639
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5600
5640
|
};
|
|
5601
|
-
return (hAsync("sd-field", { key: '
|
|
5641
|
+
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 () => {
|
|
5602
5642
|
if (this.disabled)
|
|
5603
5643
|
return;
|
|
5604
5644
|
this.internalValue = '';
|
|
@@ -6470,13 +6510,21 @@ class SdButton {
|
|
|
6470
6510
|
registerInstance(this, hostRef);
|
|
6471
6511
|
this.click = createEvent(this, "sdClick", 7);
|
|
6472
6512
|
}
|
|
6513
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
6473
6514
|
name = 'primary_sm';
|
|
6515
|
+
/** 버튼 텍스트 레이블 */
|
|
6474
6516
|
label = '';
|
|
6517
|
+
/** 레이블 왼쪽에 표시할 아이콘 */
|
|
6475
6518
|
icon;
|
|
6519
|
+
/** 레이블 오른쪽에 표시할 아이콘 */
|
|
6476
6520
|
rightIcon;
|
|
6521
|
+
/** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
|
|
6477
6522
|
ariaLabel = '';
|
|
6523
|
+
/** 비활성 상태 여부 */
|
|
6478
6524
|
disabled = false;
|
|
6525
|
+
/** 네이티브 button type 속성 */
|
|
6479
6526
|
type = 'button';
|
|
6527
|
+
/** 클릭 시 발생합니다. */
|
|
6480
6528
|
click;
|
|
6481
6529
|
hasWarnedMissingAriaLabel = false;
|
|
6482
6530
|
handleClick = (event) => {
|
|
@@ -6536,14 +6584,14 @@ class SdButton {
|
|
|
6536
6584
|
const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
|
|
6537
6585
|
const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
|
|
6538
6586
|
const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
|
|
6539
|
-
return (hAsync("button", { key: '
|
|
6587
|
+
return (hAsync("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6540
6588
|
'--sd-button-bg': config.color,
|
|
6541
6589
|
'--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6542
6590
|
'--sd-button-border': PRESET_BORDER_COLORS$1[preset],
|
|
6543
6591
|
'--sd-button-text': PRESET_TEXT_COLORS$1[preset],
|
|
6544
6592
|
'--sd-button-icon': PRESET_ICON_COLORS$1[preset],
|
|
6545
6593
|
'--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6546
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6594
|
+
}, 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)" })))));
|
|
6547
6595
|
}
|
|
6548
6596
|
static get style() { return sdButtonCss(); }
|
|
6549
6597
|
static get cmpMeta() { return {
|
|
@@ -6796,13 +6844,19 @@ class SdCalendar {
|
|
|
6796
6844
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
6797
6845
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
6798
6846
|
}
|
|
6847
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
6799
6848
|
value = null;
|
|
6849
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
|
|
6800
6850
|
selectable;
|
|
6851
|
+
/** 캘린더에 표시할 이벤트 그룹 목록 */
|
|
6801
6852
|
events;
|
|
6853
|
+
/** 카드 형태의 그림자 여부 */
|
|
6802
6854
|
elevated = false;
|
|
6803
6855
|
currentYear;
|
|
6804
6856
|
currentMonth;
|
|
6857
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
6805
6858
|
update;
|
|
6859
|
+
/** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
|
|
6806
6860
|
viewChange;
|
|
6807
6861
|
dateUtil = useDatePicker();
|
|
6808
6862
|
_eventMapCache;
|
|
@@ -6966,7 +7020,7 @@ class SdCalendar {
|
|
|
6966
7020
|
const eventMap = this.eventMap;
|
|
6967
7021
|
const legend = this.legendItems;
|
|
6968
7022
|
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
6969
|
-
return (hAsync("div", { key: '
|
|
7023
|
+
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 => {
|
|
6970
7024
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
6971
7025
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
6972
7026
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -6979,8 +7033,8 @@ class SdCalendar {
|
|
|
6979
7033
|
'sd-calendar__day--disabled': isDisabled,
|
|
6980
7034
|
}, 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 } })))))));
|
|
6981
7035
|
})), legend.length > 0 && [
|
|
6982
|
-
hAsync("span", { key: '
|
|
6983
|
-
hAsync("div", { key: '
|
|
7036
|
+
hAsync("span", { key: '713522194a9052e28b970f5eb6ad34941f7b6459', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
7037
|
+
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))))),
|
|
6984
7038
|
]));
|
|
6985
7039
|
}
|
|
6986
7040
|
static get watchers() { return {
|
|
@@ -7188,7 +7242,9 @@ class SdCallout {
|
|
|
7188
7242
|
constructor(hostRef) {
|
|
7189
7243
|
registerInstance(this, hostRef);
|
|
7190
7244
|
}
|
|
7245
|
+
/** 콜아웃 타입 (색상·아이콘 조합 결정) */
|
|
7191
7246
|
type = 'default';
|
|
7247
|
+
/** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
|
|
7192
7248
|
message = [];
|
|
7193
7249
|
get calloutStyle() {
|
|
7194
7250
|
const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
|
|
@@ -7235,7 +7291,7 @@ class SdCallout {
|
|
|
7235
7291
|
}
|
|
7236
7292
|
render() {
|
|
7237
7293
|
const showTitle = this.type === 'danger';
|
|
7238
|
-
return (hAsync("div", { key: '
|
|
7294
|
+
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())));
|
|
7239
7295
|
}
|
|
7240
7296
|
static get style() { return sdCalloutCss(); }
|
|
7241
7297
|
static get cmpMeta() { return {
|
|
@@ -7257,10 +7313,12 @@ class SdCard {
|
|
|
7257
7313
|
constructor(hostRef) {
|
|
7258
7314
|
registerInstance(this, hostRef);
|
|
7259
7315
|
}
|
|
7316
|
+
/** 테두리 표시 여부 */
|
|
7260
7317
|
bordered = false;
|
|
7318
|
+
/** 카드 루트 엘리먼트에 추가할 클래스 */
|
|
7261
7319
|
sdClass = '';
|
|
7262
7320
|
render() {
|
|
7263
|
-
return (hAsync(Fragment, { key: '
|
|
7321
|
+
return (hAsync(Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, hAsync("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
|
|
7264
7322
|
}
|
|
7265
7323
|
static get style() { return sdCardCss(); }
|
|
7266
7324
|
static get cmpMeta() { return {
|
|
@@ -7283,9 +7341,13 @@ const checkbox = {
|
|
|
7283
7341
|
gap: "8",
|
|
7284
7342
|
icon: "12",
|
|
7285
7343
|
typography: {
|
|
7286
|
-
|
|
7287
|
-
|
|
7288
|
-
|
|
7344
|
+
"default": {
|
|
7345
|
+
fontWeight: "400",
|
|
7346
|
+
fontSize: "12",
|
|
7347
|
+
lineHeight: "20"},
|
|
7348
|
+
selected: {
|
|
7349
|
+
fontWeight: "500"}
|
|
7350
|
+
},
|
|
7289
7351
|
unchecked: {
|
|
7290
7352
|
bg: {
|
|
7291
7353
|
"default": "#FFFFFF",
|
|
@@ -7311,7 +7373,8 @@ const checkbox = {
|
|
|
7311
7373
|
},
|
|
7312
7374
|
label: {
|
|
7313
7375
|
"default": "#222222",
|
|
7314
|
-
inverse: "#FFFFFF"
|
|
7376
|
+
inverse: "#FFFFFF",
|
|
7377
|
+
disabled: "#888888"
|
|
7315
7378
|
},
|
|
7316
7379
|
bg: {
|
|
7317
7380
|
disabled: "#E1E1E1"
|
|
@@ -7332,9 +7395,10 @@ const CHECKBOX_LAYOUT = {
|
|
|
7332
7395
|
iconSize: checkboxTokens.checkbox.icon,
|
|
7333
7396
|
};
|
|
7334
7397
|
const CHECKBOX_TYPOGRAPHY = {
|
|
7335
|
-
fontSize: checkboxTokens.checkbox.typography.fontSize,
|
|
7336
|
-
lineHeight: checkboxTokens.checkbox.typography.lineHeight,
|
|
7337
|
-
fontWeight: checkboxTokens.checkbox.typography.fontWeight,
|
|
7398
|
+
fontSize: checkboxTokens.checkbox.typography.default.fontSize,
|
|
7399
|
+
lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
|
|
7400
|
+
fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
|
|
7401
|
+
selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
|
|
7338
7402
|
};
|
|
7339
7403
|
const CHECKBOX_COLORS = {
|
|
7340
7404
|
unchecked: {
|
|
@@ -7352,13 +7416,14 @@ const CHECKBOX_COLORS = {
|
|
|
7352
7416
|
},
|
|
7353
7417
|
label: checkboxTokens.checkbox.label.default,
|
|
7354
7418
|
labelInverse: checkboxTokens.checkbox.label.inverse,
|
|
7419
|
+
labelDisabled: checkboxTokens.checkbox.label.disabled,
|
|
7355
7420
|
disabled: {
|
|
7356
7421
|
bg: checkboxTokens.checkbox.bg.disabled,
|
|
7357
7422
|
border: checkboxTokens.checkbox.border.disabled,
|
|
7358
7423
|
},
|
|
7359
7424
|
};
|
|
7360
7425
|
|
|
7361
|
-
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)}`;
|
|
7426
|
+
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)}`;
|
|
7362
7427
|
|
|
7363
7428
|
class SdCheckbox {
|
|
7364
7429
|
constructor(hostRef) {
|
|
@@ -7457,25 +7522,27 @@ class SdCheckbox {
|
|
|
7457
7522
|
'--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
|
|
7458
7523
|
'--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
|
|
7459
7524
|
'--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
|
|
7525
|
+
'--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
|
|
7460
7526
|
'--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
|
|
7461
7527
|
'--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
|
|
7462
7528
|
'--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
|
|
7463
7529
|
'--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
|
|
7464
7530
|
'--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
|
|
7465
7531
|
'--sd-checkbox-label-color': CHECKBOX_COLORS.label,
|
|
7532
|
+
'--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
|
|
7466
7533
|
'--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
|
|
7467
7534
|
'--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
|
|
7468
7535
|
'--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
|
|
7469
7536
|
'--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
|
|
7470
7537
|
'--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
|
|
7471
7538
|
};
|
|
7472
|
-
return (hAsync("label", { key: '
|
|
7539
|
+
return (hAsync("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
|
|
7473
7540
|
this.inputEl = el;
|
|
7474
|
-
}, 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: '
|
|
7541
|
+
}, 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
|
|
7475
7542
|
? CHECKBOX_COLORS.checked.iconDisabled
|
|
7476
7543
|
: this.inverse
|
|
7477
7544
|
? CHECKBOX_COLORS.checked.iconInverse
|
|
7478
|
-
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '
|
|
7545
|
+
: CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
|
|
7479
7546
|
}
|
|
7480
7547
|
static get watchers() { return {
|
|
7481
7548
|
"value": [{
|
|
@@ -7577,18 +7644,29 @@ class SdChip {
|
|
|
7577
7644
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
7578
7645
|
}
|
|
7579
7646
|
get el() { return getElement(this); }
|
|
7647
|
+
/** 폼 연동용 name 속성 */
|
|
7580
7648
|
name = '';
|
|
7649
|
+
/** 칩 텍스트 값 */
|
|
7581
7650
|
value = '';
|
|
7651
|
+
/** 에러 상태 여부 */
|
|
7582
7652
|
error = false;
|
|
7653
|
+
/** 비활성 상태 여부 */
|
|
7583
7654
|
disabled = false;
|
|
7655
|
+
/** 인라인 편집 가능 여부 */
|
|
7584
7656
|
editable = true;
|
|
7657
|
+
/** 편집 중 표시할 placeholder */
|
|
7585
7658
|
placeholder = '';
|
|
7659
|
+
/** 유효성 검사 규칙 목록 */
|
|
7586
7660
|
rules = [];
|
|
7587
7661
|
internalValue = '';
|
|
7588
7662
|
isEditing = false;
|
|
7663
|
+
/** 편집 완료 시 새 값을 전달합니다. */
|
|
7589
7664
|
update;
|
|
7665
|
+
/** 삭제 버튼 클릭 시 발생합니다. */
|
|
7590
7666
|
delete;
|
|
7667
|
+
/** 편집 모드 진입 시 발생합니다. */
|
|
7591
7668
|
focus;
|
|
7669
|
+
/** 편집 모드 이탈 시 발생합니다. */
|
|
7592
7670
|
blur;
|
|
7593
7671
|
inputEl;
|
|
7594
7672
|
draftValue = '';
|
|
@@ -7614,6 +7692,7 @@ class SdChip {
|
|
|
7614
7692
|
disconnectedCallback() {
|
|
7615
7693
|
this.unregisterFromForm();
|
|
7616
7694
|
}
|
|
7695
|
+
/** 유효성 검사를 실행합니다. */
|
|
7617
7696
|
async sdValidate() {
|
|
7618
7697
|
if (!this.rules || this.rules.length === 0) {
|
|
7619
7698
|
this.error = false;
|
|
@@ -7629,6 +7708,7 @@ class SdChip {
|
|
|
7629
7708
|
this.error = false;
|
|
7630
7709
|
return true;
|
|
7631
7710
|
}
|
|
7711
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
7632
7712
|
async sdReset() {
|
|
7633
7713
|
this.internalValue = '';
|
|
7634
7714
|
this.value = '';
|
|
@@ -7637,17 +7717,21 @@ class SdChip {
|
|
|
7637
7717
|
this.isEditing = false;
|
|
7638
7718
|
this.shouldInitInput = false;
|
|
7639
7719
|
}
|
|
7720
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7640
7721
|
async sdResetValidate() {
|
|
7641
7722
|
this.error = false;
|
|
7642
7723
|
}
|
|
7724
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7643
7725
|
async sdResetValidation() {
|
|
7644
7726
|
this.error = false;
|
|
7645
7727
|
}
|
|
7728
|
+
/** 편집 모드로 전환하여 포커스를 이동합니다. */
|
|
7646
7729
|
async sdFocus() {
|
|
7647
7730
|
if (this.disabled)
|
|
7648
7731
|
return;
|
|
7649
7732
|
this.enterEditMode();
|
|
7650
7733
|
}
|
|
7734
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
7651
7735
|
async sdGetNativeElement() {
|
|
7652
7736
|
return this.inputEl ?? null;
|
|
7653
7737
|
}
|
|
@@ -7790,7 +7874,7 @@ class SdChip {
|
|
|
7790
7874
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7791
7875
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7792
7876
|
};
|
|
7793
|
-
return (hAsync("span", { key: '
|
|
7877
|
+
return (hAsync("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
|
|
7794
7878
|
'sd-chip': true,
|
|
7795
7879
|
[`sd-chip--${state}`]: true,
|
|
7796
7880
|
'sd-chip--disabled': this.disabled,
|
|
@@ -8023,7 +8107,7 @@ const CHIP_INPUT_SUGGESTIONS = {
|
|
|
8023
8107
|
emptyLineHeight: '20px',
|
|
8024
8108
|
};
|
|
8025
8109
|
|
|
8026
|
-
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)}`;
|
|
8110
|
+
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)}`;
|
|
8027
8111
|
|
|
8028
8112
|
class SdChipInput {
|
|
8029
8113
|
constructor(hostRef) {
|
|
@@ -8035,31 +8119,56 @@ class SdChipInput {
|
|
|
8035
8119
|
}
|
|
8036
8120
|
static SUGGESTIONS_VIEWPORT_PADDING = 8;
|
|
8037
8121
|
get host() { return getElement(this); }
|
|
8122
|
+
/** 칩 값 목록 */
|
|
8038
8123
|
values = [];
|
|
8124
|
+
/** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
|
|
8039
8125
|
errors = [];
|
|
8126
|
+
/** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
|
|
8040
8127
|
disabledChips = [];
|
|
8128
|
+
/** 입력 필드 크기 */
|
|
8041
8129
|
size = 'sm';
|
|
8130
|
+
/** 비활성 상태 여부 */
|
|
8042
8131
|
disabled = false;
|
|
8132
|
+
/** 입력 placeholder */
|
|
8043
8133
|
placeholder = '입력해 주세요.';
|
|
8134
|
+
/** 폼 연동용 name 속성 */
|
|
8044
8135
|
name = nanoid$1();
|
|
8136
|
+
/** 유효성 검사 규칙 목록 */
|
|
8045
8137
|
rules = [];
|
|
8138
|
+
/** 에러 상태 여부 */
|
|
8046
8139
|
error = false;
|
|
8140
|
+
/** 입력 초기화 버튼 표시 여부 */
|
|
8047
8141
|
useReset = false;
|
|
8142
|
+
/** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
|
|
8048
8143
|
maxCount;
|
|
8144
|
+
/** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
|
|
8049
8145
|
duplicateLabel;
|
|
8146
|
+
/** 자동완성 후보 목록 */
|
|
8050
8147
|
suggestions = [];
|
|
8148
|
+
/** 자동완성 목록 로딩 중 여부 */
|
|
8051
8149
|
loadingSuggestions = false;
|
|
8150
|
+
/** 추천 항목 목록 (입력값이 없을 때 표시) */
|
|
8052
8151
|
recommendedItems = [];
|
|
8152
|
+
/** 추천 항목 로딩 중 여부 */
|
|
8053
8153
|
loadingRecommendedItems = false;
|
|
8054
8154
|
// sd-field props
|
|
8155
|
+
/** 레이블 텍스트 */
|
|
8055
8156
|
label = '';
|
|
8157
|
+
/** 레이블 너비 */
|
|
8056
8158
|
labelWidth = '';
|
|
8159
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8057
8160
|
hint = '';
|
|
8161
|
+
/** 에러 메시지 */
|
|
8058
8162
|
errorMessage = '';
|
|
8163
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8059
8164
|
width = '';
|
|
8165
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
8060
8166
|
status;
|
|
8167
|
+
/** 레이블 영역 아이콘 */
|
|
8061
8168
|
icon = undefined;
|
|
8169
|
+
/** 레이블 툴팁 텍스트 */
|
|
8062
8170
|
labelTooltip = '';
|
|
8171
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8063
8172
|
labelTooltipProps = null;
|
|
8064
8173
|
internalValues = [];
|
|
8065
8174
|
internalErrors = [];
|
|
@@ -8126,19 +8235,27 @@ class SdChipInput {
|
|
|
8126
8235
|
}
|
|
8127
8236
|
return this.disabledChips?.[index] ?? false;
|
|
8128
8237
|
}
|
|
8238
|
+
/** 칩 목록 변경 시 전체 값 배열을 전달합니다. */
|
|
8129
8239
|
update;
|
|
8240
|
+
/** 입력 필드 포커스 진입 시 발생합니다. */
|
|
8130
8241
|
focusEvent;
|
|
8242
|
+
/** 입력 필드 포커스 이탈 시 발생합니다. */
|
|
8131
8243
|
blurEvent;
|
|
8244
|
+
/** 입력값 변경 시 현재 입력 중인 문자열을 전달합니다. */
|
|
8132
8245
|
inputEvent;
|
|
8246
|
+
/** 유효성 검사를 실행합니다. */
|
|
8133
8247
|
async sdValidate() {
|
|
8134
8248
|
return this.formField?.sdValidate();
|
|
8135
8249
|
}
|
|
8250
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8136
8251
|
async sdReset() {
|
|
8137
8252
|
return this.formField?.sdReset();
|
|
8138
8253
|
}
|
|
8254
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8139
8255
|
async sdResetValidate() {
|
|
8140
8256
|
return this.formField?.sdResetValidation();
|
|
8141
8257
|
}
|
|
8258
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
8142
8259
|
async sdFocus() {
|
|
8143
8260
|
return this.formField?.sdFocus();
|
|
8144
8261
|
}
|
|
@@ -8399,6 +8516,7 @@ class SdChipInput {
|
|
|
8399
8516
|
};
|
|
8400
8517
|
const suggestionItemStyle = {
|
|
8401
8518
|
display: 'flex',
|
|
8519
|
+
flexShrink: '0',
|
|
8402
8520
|
alignItems: 'center',
|
|
8403
8521
|
gap: CHIP_INPUT_SUGGESTIONS.itemGap,
|
|
8404
8522
|
padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
|
|
@@ -8422,7 +8540,7 @@ class SdChipInput {
|
|
|
8422
8540
|
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8423
8541
|
color: CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8424
8542
|
};
|
|
8425
|
-
return (hAsync("sd-field", { key: '
|
|
8543
|
+
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: {
|
|
8426
8544
|
'sd-chip-input__field': true,
|
|
8427
8545
|
'sd-chip-input__field--filled': this.inputValue !== '',
|
|
8428
8546
|
'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
|
|
@@ -8430,7 +8548,7 @@ class SdChipInput {
|
|
|
8430
8548
|
? this.inputValue
|
|
8431
8549
|
: this.internalValues.length === 0
|
|
8432
8550
|
? this.placeholder
|
|
8433
|
-
: '' }, hAsync("input", { key: '
|
|
8551
|
+
: '' }, 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: {
|
|
8434
8552
|
'sd-chip-input__suggestion-item': true,
|
|
8435
8553
|
'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
|
|
8436
8554
|
}, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
|
|
@@ -8575,9 +8693,13 @@ class SdCircleProgress {
|
|
|
8575
8693
|
constructor(hostRef) {
|
|
8576
8694
|
registerInstance(this, hostRef);
|
|
8577
8695
|
}
|
|
8696
|
+
/** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
|
|
8578
8697
|
indeterminate = false;
|
|
8698
|
+
/** 진행률 (0~100) */
|
|
8579
8699
|
value = 0;
|
|
8700
|
+
/** 색상 테마 */
|
|
8580
8701
|
type = 'primary';
|
|
8702
|
+
/** 원 하단에 표시할 레이블 텍스트 */
|
|
8581
8703
|
label;
|
|
8582
8704
|
get clampedValue() {
|
|
8583
8705
|
if (!Number.isFinite(this.value))
|
|
@@ -8601,7 +8723,7 @@ class SdCircleProgress {
|
|
|
8601
8723
|
}
|
|
8602
8724
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
8603
8725
|
const showPercent = !this.indeterminate;
|
|
8604
|
-
return (hAsync(Host, { key: '
|
|
8726
|
+
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)));
|
|
8605
8727
|
}
|
|
8606
8728
|
static get style() { return sdCircleProgressCss(); }
|
|
8607
8729
|
static get cmpMeta() { return {
|
|
@@ -8650,20 +8772,35 @@ class SdConfirmModal {
|
|
|
8650
8772
|
hasSlottedContent = false;
|
|
8651
8773
|
customContentRef;
|
|
8652
8774
|
slotObserver;
|
|
8775
|
+
/** 모달 타입 (아이콘·버튼 색상 결정) */
|
|
8653
8776
|
type = 'positive';
|
|
8777
|
+
/** 모달 제목 */
|
|
8654
8778
|
modalTitle = '';
|
|
8779
|
+
/** 제목 엘리먼트에 추가할 클래스 */
|
|
8655
8780
|
titleClass = '';
|
|
8781
|
+
/** 콘텐츠 박스 상단 메시지 목록 */
|
|
8656
8782
|
topMessage = [];
|
|
8783
|
+
/** 콘텐츠 박스 하단 메시지 목록 */
|
|
8657
8784
|
bottomMessage = [];
|
|
8785
|
+
/** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
|
|
8658
8786
|
mainButtonName;
|
|
8787
|
+
/** 확인 버튼 레이블 */
|
|
8659
8788
|
mainButtonLabel = '확인';
|
|
8789
|
+
/** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
|
|
8660
8790
|
subButtonLabel = '';
|
|
8791
|
+
/** 콘텐츠 박스에 표시할 태그 프리셋 */
|
|
8661
8792
|
tagPreset = 'square_sm_grey';
|
|
8793
|
+
/** 콘텐츠 박스에 표시할 태그 레이블 */
|
|
8662
8794
|
tagLabel = '';
|
|
8795
|
+
/** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
|
|
8663
8796
|
slotLabel = '';
|
|
8797
|
+
/** 콘텐츠 박스에 직접 삽입할 HTMLElement */
|
|
8664
8798
|
tagContents;
|
|
8799
|
+
/** 닫기 버튼 클릭 시 발생합니다. */
|
|
8665
8800
|
close;
|
|
8801
|
+
/** 취소 버튼 클릭 시 발생합니다. */
|
|
8666
8802
|
cancel;
|
|
8803
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
8667
8804
|
ok;
|
|
8668
8805
|
componentWillLoad() {
|
|
8669
8806
|
this.syncHasSlottedContent();
|
|
@@ -8717,9 +8854,9 @@ class SdConfirmModal {
|
|
|
8717
8854
|
const type = this.resolvedType;
|
|
8718
8855
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
8719
8856
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
8720
|
-
return (hAsync("div", { key: '
|
|
8857
|
+
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 => {
|
|
8721
8858
|
this.customContentRef = el;
|
|
8722
|
-
} })) : (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: '
|
|
8859
|
+
} })) : (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() }))));
|
|
8723
8860
|
}
|
|
8724
8861
|
static get style() { return sdConfirmModalCss(); }
|
|
8725
8862
|
static get cmpMeta() { return {
|
|
@@ -8754,15 +8891,25 @@ class SdDateBox {
|
|
|
8754
8891
|
this.click = createEvent(this, "sdClick", 7);
|
|
8755
8892
|
this.mouseOver = createEvent(this, "sdMouseOver", 7);
|
|
8756
8893
|
}
|
|
8894
|
+
/** 표시할 날짜 값 */
|
|
8757
8895
|
date = null;
|
|
8896
|
+
/** 비활성 상태 여부 */
|
|
8758
8897
|
disabled = false;
|
|
8898
|
+
/** 선택된 날짜 여부 */
|
|
8759
8899
|
selected = false;
|
|
8900
|
+
/** 범위 시작일 여부 */
|
|
8760
8901
|
isStartDate = false;
|
|
8902
|
+
/** 범위 종료일 여부 */
|
|
8761
8903
|
isEndDate = false;
|
|
8904
|
+
/** 오늘 날짜 여부 */
|
|
8762
8905
|
isToday = false;
|
|
8906
|
+
/** 선택 범위 내 날짜 여부 */
|
|
8763
8907
|
inRange = false;
|
|
8908
|
+
/** 범위 선택에서의 역할 (start | end | 없음) */
|
|
8764
8909
|
type = '';
|
|
8910
|
+
/** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
|
|
8765
8911
|
click;
|
|
8912
|
+
/** 날짜 hover 시 해당 날짜 값을 전달합니다. */
|
|
8766
8913
|
mouseOver;
|
|
8767
8914
|
handleClickDate() {
|
|
8768
8915
|
if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
|
|
@@ -8777,7 +8924,7 @@ class SdDateBox {
|
|
|
8777
8924
|
this.mouseOver?.emit(this.date);
|
|
8778
8925
|
}
|
|
8779
8926
|
render() {
|
|
8780
|
-
return (hAsync("div", { key: '
|
|
8927
|
+
return (hAsync("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8781
8928
|
'sd-date-box': true,
|
|
8782
8929
|
'sd-hoverable': !this.disabled || !this.selected || this.type === '',
|
|
8783
8930
|
'sd-date-box--disabled': this.disabled,
|
|
@@ -8793,7 +8940,7 @@ class SdDateBox {
|
|
|
8793
8940
|
e.preventDefault();
|
|
8794
8941
|
this.handleClickDate();
|
|
8795
8942
|
}
|
|
8796
|
-
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: '
|
|
8943
|
+
}, 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))));
|
|
8797
8944
|
}
|
|
8798
8945
|
static get style() { return sdDateBoxCss(); }
|
|
8799
8946
|
static get cmpMeta() { return {
|
|
@@ -8917,43 +9064,66 @@ class SdDatePicker {
|
|
|
8917
9064
|
}
|
|
8918
9065
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
8919
9066
|
get el() { return getElement(this); }
|
|
9067
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
8920
9068
|
value = null;
|
|
9069
|
+
/** 입력 필드 크기 */
|
|
8921
9070
|
size = 'sm';
|
|
9071
|
+
/** 날짜 미선택 시 표시할 placeholder */
|
|
8922
9072
|
placeholder = 'YYYY-MM-DD';
|
|
9073
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
8923
9074
|
selectable;
|
|
9075
|
+
/** 비활성 상태 여부 */
|
|
8924
9076
|
disabled = false;
|
|
9077
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8925
9078
|
width = '';
|
|
8926
9079
|
// sd-field 공통 props
|
|
9080
|
+
/** 레이블 텍스트 */
|
|
8927
9081
|
label = '';
|
|
9082
|
+
/** 레이블 너비 */
|
|
8928
9083
|
labelWidth = '';
|
|
9084
|
+
/** 필드 우측 어드온 레이블 */
|
|
8929
9085
|
addonLabel = '';
|
|
9086
|
+
/** 어드온 정렬 방향 */
|
|
8930
9087
|
addonAlign = 'start';
|
|
9088
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8931
9089
|
hint = '';
|
|
9090
|
+
/** 에러 메시지 */
|
|
8932
9091
|
errorMessage = '';
|
|
9092
|
+
/** 유효성 검사 규칙 목록 */
|
|
8933
9093
|
rules = [];
|
|
9094
|
+
/** 에러 상태 여부 */
|
|
8934
9095
|
error = false;
|
|
9096
|
+
/** 레이블 영역 아이콘 */
|
|
8935
9097
|
icon = undefined;
|
|
9098
|
+
/** 레이블 툴팁 텍스트 */
|
|
8936
9099
|
labelTooltip = '';
|
|
9100
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8937
9101
|
labelTooltipProps = null;
|
|
8938
9102
|
isOpen = false;
|
|
8939
9103
|
isAnimatingOut = false;
|
|
8940
9104
|
focused = false;
|
|
8941
9105
|
hovered = false;
|
|
9106
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
8942
9107
|
update;
|
|
9108
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
8943
9109
|
viewChange;
|
|
8944
9110
|
triggerRef;
|
|
8945
9111
|
formField;
|
|
8946
9112
|
closeAnimationTimer;
|
|
9113
|
+
/** 폼 연동용 name 속성 */
|
|
8947
9114
|
name = nanoid$1();
|
|
8948
9115
|
watchIsOpen(newValue) {
|
|
8949
9116
|
this.focused = newValue;
|
|
8950
9117
|
}
|
|
9118
|
+
/** 유효성 검사를 실행합니다. */
|
|
8951
9119
|
async sdValidate() {
|
|
8952
9120
|
return this.formField?.sdValidate();
|
|
8953
9121
|
}
|
|
9122
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8954
9123
|
async sdReset() {
|
|
8955
9124
|
return this.formField?.sdReset();
|
|
8956
9125
|
}
|
|
9126
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8957
9127
|
async sdResetValidate() {
|
|
8958
9128
|
return this.formField?.sdResetValidation();
|
|
8959
9129
|
}
|
|
@@ -9006,9 +9176,9 @@ class SdDatePicker {
|
|
|
9006
9176
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9007
9177
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9008
9178
|
};
|
|
9009
|
-
return (hAsync("sd-field", { key: '
|
|
9179
|
+
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 => {
|
|
9010
9180
|
this.triggerRef = el;
|
|
9011
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9181
|
+
} }, 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 })))));
|
|
9012
9182
|
}
|
|
9013
9183
|
static get watchers() { return {
|
|
9014
9184
|
"isOpen": [{
|
|
@@ -9059,10 +9229,15 @@ class SdDatePickerTrigger {
|
|
|
9059
9229
|
registerInstance(this, hostRef);
|
|
9060
9230
|
this.triggerClick = createEvent(this, "sdTriggerClick", 7);
|
|
9061
9231
|
}
|
|
9232
|
+
/** 표시할 날짜 텍스트 */
|
|
9062
9233
|
displayText = '';
|
|
9234
|
+
/** 입력 힌트 텍스트 */
|
|
9063
9235
|
placeholder = 'YYYY-MM-DD';
|
|
9236
|
+
/** 비활성 상태 여부 */
|
|
9064
9237
|
disabled = false;
|
|
9238
|
+
/** 트리거 크기 */
|
|
9065
9239
|
size = 'sm';
|
|
9240
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
9066
9241
|
triggerClick;
|
|
9067
9242
|
handleClick = () => {
|
|
9068
9243
|
if (this.disabled)
|
|
@@ -9091,7 +9266,7 @@ class SdDatePickerTrigger {
|
|
|
9091
9266
|
? DATEPICKER_COLORS.icon.disabled
|
|
9092
9267
|
: DATEPICKER_COLORS.icon.default,
|
|
9093
9268
|
};
|
|
9094
|
-
return (hAsync("div", { key: '
|
|
9269
|
+
return (hAsync("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
9095
9270
|
'sd-date-picker-trigger': true,
|
|
9096
9271
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
9097
9272
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -9099,7 +9274,7 @@ class SdDatePickerTrigger {
|
|
|
9099
9274
|
e.preventDefault();
|
|
9100
9275
|
this.handleClick();
|
|
9101
9276
|
}
|
|
9102
|
-
} }, hAsync("sd-icon", { key: '
|
|
9277
|
+
} }, 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)));
|
|
9103
9278
|
}
|
|
9104
9279
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
9105
9280
|
static get cmpMeta() { return {
|
|
@@ -9134,44 +9309,68 @@ class SdDateRangePicker {
|
|
|
9134
9309
|
}
|
|
9135
9310
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9136
9311
|
get el() { return getElement(this); }
|
|
9312
|
+
/** 선택된 날짜 범위 [시작일, 종료일] (YYYY-MM-DD) */
|
|
9137
9313
|
value = null;
|
|
9314
|
+
/** 입력 필드 크기 */
|
|
9138
9315
|
size = 'sm';
|
|
9316
|
+
/** 미선택 시 표시할 placeholder */
|
|
9139
9317
|
placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
|
|
9318
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
9140
9319
|
selectable;
|
|
9320
|
+
/** 최대 선택 가능한 날짜 범위 (일 단위) */
|
|
9141
9321
|
maxRange;
|
|
9322
|
+
/** 비활성 상태 여부 */
|
|
9142
9323
|
disabled = false;
|
|
9324
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
9143
9325
|
width = '';
|
|
9144
9326
|
// sd-field 공통 props
|
|
9327
|
+
/** 레이블 텍스트 */
|
|
9145
9328
|
label = '';
|
|
9329
|
+
/** 레이블 너비 */
|
|
9146
9330
|
labelWidth = '';
|
|
9331
|
+
/** 필드 우측 어드온 레이블 */
|
|
9147
9332
|
addonLabel = '';
|
|
9333
|
+
/** 어드온 정렬 방향 */
|
|
9148
9334
|
addonAlign = 'start';
|
|
9335
|
+
/** 필드 하단 힌트 텍스트 */
|
|
9149
9336
|
hint = '';
|
|
9337
|
+
/** 에러 메시지 */
|
|
9150
9338
|
errorMessage = '';
|
|
9339
|
+
/** 유효성 검사 규칙 목록 */
|
|
9151
9340
|
rules = [];
|
|
9341
|
+
/** 에러 상태 여부 */
|
|
9152
9342
|
error = false;
|
|
9343
|
+
/** 레이블 영역 아이콘 */
|
|
9153
9344
|
icon = undefined;
|
|
9345
|
+
/** 레이블 툴팁 텍스트 */
|
|
9154
9346
|
labelTooltip = '';
|
|
9347
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
9155
9348
|
labelTooltipProps = null;
|
|
9156
9349
|
isOpen = false;
|
|
9157
9350
|
isAnimatingOut = false;
|
|
9158
9351
|
focused = false;
|
|
9159
9352
|
hovered = false;
|
|
9353
|
+
/** 날짜 범위 선택 완료 시 [시작일, 종료일]을 전달합니다. */
|
|
9160
9354
|
update;
|
|
9355
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
9161
9356
|
viewChange;
|
|
9162
9357
|
triggerRef;
|
|
9163
9358
|
formField;
|
|
9164
9359
|
closeAnimationTimer;
|
|
9360
|
+
/** 폼 연동용 name 속성 */
|
|
9165
9361
|
name = nanoid$1();
|
|
9166
9362
|
watchIsOpen(newValue) {
|
|
9167
9363
|
this.focused = newValue;
|
|
9168
9364
|
}
|
|
9365
|
+
/** 유효성 검사를 실행합니다. */
|
|
9169
9366
|
async sdValidate() {
|
|
9170
9367
|
return this.formField?.sdValidate();
|
|
9171
9368
|
}
|
|
9369
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
9172
9370
|
async sdReset() {
|
|
9173
9371
|
return this.formField?.sdReset();
|
|
9174
9372
|
}
|
|
9373
|
+
/** 유효성 상태만 초기화합니다. */
|
|
9175
9374
|
async sdResetValidate() {
|
|
9176
9375
|
return this.formField?.sdResetValidation();
|
|
9177
9376
|
}
|
|
@@ -9228,9 +9427,9 @@ class SdDateRangePicker {
|
|
|
9228
9427
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9229
9428
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9230
9429
|
};
|
|
9231
|
-
return (hAsync("sd-field", { key: '
|
|
9430
|
+
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 => {
|
|
9232
9431
|
this.triggerRef = el;
|
|
9233
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9432
|
+
} }, 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 })))));
|
|
9234
9433
|
}
|
|
9235
9434
|
static get watchers() { return {
|
|
9236
9435
|
"isOpen": [{
|
|
@@ -9283,15 +9482,20 @@ class SdDateRangePickerCalendar {
|
|
|
9283
9482
|
this.select = createEvent(this, "sdSelect", 7);
|
|
9284
9483
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
9285
9484
|
}
|
|
9485
|
+
/** 선택된 날짜 범위 [시작일, 종료일] */
|
|
9286
9486
|
value = null;
|
|
9487
|
+
/** 선택 가능한 날짜 범위 제한 */
|
|
9287
9488
|
selectable;
|
|
9489
|
+
/** 최대 선택 가능 일 수 */
|
|
9288
9490
|
maxRange;
|
|
9289
9491
|
currentYear;
|
|
9290
9492
|
currentMonth;
|
|
9291
9493
|
pendingStart = '';
|
|
9292
9494
|
hoverDate = '';
|
|
9293
9495
|
displayValue = null;
|
|
9496
|
+
/** 날짜 범위 선택 시 발생합니다. */
|
|
9294
9497
|
select;
|
|
9498
|
+
/** 달력 뷰가 변경될 때 발생합니다. */
|
|
9295
9499
|
viewChange;
|
|
9296
9500
|
dateUtil = useDatePicker();
|
|
9297
9501
|
componentWillLoad() {
|
|
@@ -9519,7 +9723,7 @@ class SdDateRangePickerCalendar {
|
|
|
9519
9723
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
9520
9724
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
9521
9725
|
};
|
|
9522
|
-
return (hAsync(Fragment, { key: '
|
|
9726
|
+
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)))));
|
|
9523
9727
|
}
|
|
9524
9728
|
static get watchers() { return {
|
|
9525
9729
|
"value": [{
|
|
@@ -9740,10 +9944,15 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9740
9944
|
this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
|
|
9741
9945
|
}
|
|
9742
9946
|
get el() { return getElement(this); }
|
|
9947
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
9743
9948
|
name = 'primary_sm';
|
|
9949
|
+
/** 버튼 레이블 */
|
|
9744
9950
|
label = '';
|
|
9951
|
+
/** 드롭다운 메뉴 아이템 목록 */
|
|
9745
9952
|
items = [];
|
|
9953
|
+
/** 비활성 상태 여부 */
|
|
9746
9954
|
disabled = false;
|
|
9955
|
+
/** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
|
|
9747
9956
|
split = false;
|
|
9748
9957
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9749
9958
|
isOpen = false;
|
|
@@ -9753,8 +9962,11 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9753
9962
|
splitContainerRef;
|
|
9754
9963
|
menuRef;
|
|
9755
9964
|
closeAnimationTimer;
|
|
9965
|
+
/** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
|
|
9756
9966
|
click;
|
|
9967
|
+
/** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
|
|
9757
9968
|
buttonClick;
|
|
9969
|
+
/** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
|
|
9758
9970
|
dropDownShow;
|
|
9759
9971
|
handleOpenChange(isOpen) {
|
|
9760
9972
|
this.onDropdownToggle(isOpen);
|
|
@@ -9771,11 +9983,13 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9771
9983
|
if (this.closeAnimationTimer)
|
|
9772
9984
|
clearTimeout(this.closeAnimationTimer);
|
|
9773
9985
|
}
|
|
9986
|
+
/** 드롭다운 메뉴를 엽니다. */
|
|
9774
9987
|
async sdOpen() {
|
|
9775
9988
|
if (this.disabled || this.items.length === 0)
|
|
9776
9989
|
return;
|
|
9777
9990
|
this.isOpen = true;
|
|
9778
9991
|
}
|
|
9992
|
+
/** 드롭다운 메뉴를 닫습니다. */
|
|
9779
9993
|
async sdClose() {
|
|
9780
9994
|
this.closeDropdown();
|
|
9781
9995
|
}
|
|
@@ -10036,25 +10250,44 @@ class SdField {
|
|
|
10036
10250
|
registerInstance(this, hostRef);
|
|
10037
10251
|
}
|
|
10038
10252
|
get el() { return getElement(this); }
|
|
10253
|
+
/** 폼 연동용 name 속성 */
|
|
10039
10254
|
name = '';
|
|
10255
|
+
/** 유효성 검사 규칙 목록 */
|
|
10040
10256
|
rules = [];
|
|
10257
|
+
/** 에러 상태 여부 */
|
|
10041
10258
|
error = false;
|
|
10259
|
+
/** 비활성 상태 여부 */
|
|
10042
10260
|
disabled = false;
|
|
10261
|
+
/** 읽기 전용 여부 */
|
|
10043
10262
|
readonly = false;
|
|
10263
|
+
/** 호버 상태 여부 */
|
|
10044
10264
|
hovered = false;
|
|
10265
|
+
/** 포커스 상태 여부 */
|
|
10045
10266
|
focused = false;
|
|
10267
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10046
10268
|
status;
|
|
10269
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10047
10270
|
hint = '';
|
|
10271
|
+
/** 에러 메시지 */
|
|
10048
10272
|
errorMessage = '';
|
|
10273
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10049
10274
|
width = '';
|
|
10275
|
+
/** 필드 크기 */
|
|
10050
10276
|
size = 'sm';
|
|
10051
10277
|
// props - label
|
|
10278
|
+
/** 레이블 텍스트 */
|
|
10052
10279
|
label = '';
|
|
10280
|
+
/** 레이블 너비 */
|
|
10053
10281
|
labelWidth = '';
|
|
10282
|
+
/** 필드 우측 어드온 레이블 */
|
|
10054
10283
|
addonLabel = '';
|
|
10284
|
+
/** 어드온 정렬 방향 */
|
|
10055
10285
|
addonAlign = 'start';
|
|
10286
|
+
/** 레이블 영역 아이콘 */
|
|
10056
10287
|
icon = undefined;
|
|
10288
|
+
/** 레이블 툴팁 텍스트 */
|
|
10057
10289
|
labelTooltip = '';
|
|
10290
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10058
10291
|
labelTooltipProps = null;
|
|
10059
10292
|
errorMsg = '';
|
|
10060
10293
|
hostElement = null;
|
|
@@ -10119,6 +10352,7 @@ class SdField {
|
|
|
10119
10352
|
form.sdUnregisterField(this);
|
|
10120
10353
|
});
|
|
10121
10354
|
}
|
|
10355
|
+
/** 유효성 검사를 실행합니다. */
|
|
10122
10356
|
async sdValidate() {
|
|
10123
10357
|
if (!this.rules || this.rules.length === 0)
|
|
10124
10358
|
return true;
|
|
@@ -10132,15 +10366,18 @@ class SdField {
|
|
|
10132
10366
|
this.setError(false, '');
|
|
10133
10367
|
return true;
|
|
10134
10368
|
}
|
|
10369
|
+
/** 필드 값과 유효성 상태를 초기화합니다. */
|
|
10135
10370
|
async sdReset() {
|
|
10136
10371
|
if (this.hostElement) {
|
|
10137
10372
|
this.hostElement.value = null;
|
|
10138
10373
|
}
|
|
10139
10374
|
this.setError(false, '');
|
|
10140
10375
|
}
|
|
10376
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10141
10377
|
async sdResetValidation() {
|
|
10142
10378
|
this.setError(false, '');
|
|
10143
10379
|
}
|
|
10380
|
+
/** 필드에 포커스를 이동하고 스크롤합니다. */
|
|
10144
10381
|
async sdFocus() {
|
|
10145
10382
|
this.hostElement?.focus?.();
|
|
10146
10383
|
this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
@@ -10204,21 +10441,21 @@ class SdField {
|
|
|
10204
10441
|
: {}),
|
|
10205
10442
|
}
|
|
10206
10443
|
: {};
|
|
10207
|
-
return (hAsync("div", { key: '
|
|
10444
|
+
return (hAsync("div", { key: 'baf943d77385c9c02e2fe1d938f9622bd858129c', class: {
|
|
10208
10445
|
'sd-field': true,
|
|
10209
10446
|
'sd-field--has-label': this.label !== '',
|
|
10210
10447
|
'sd-field--has-addon': addon !== '',
|
|
10211
10448
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
10212
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '
|
|
10449
|
+
}, 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
|
|
10213
10450
|
? {
|
|
10214
10451
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
10215
10452
|
flex: 'none',
|
|
10216
10453
|
}
|
|
10217
|
-
: {} }, hAsync("div", { key: '
|
|
10454
|
+
: {} }, hAsync("div", { key: 'bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14', class: {
|
|
10218
10455
|
'sd-field__control': true,
|
|
10219
10456
|
'sd-field__control--has-addon': addon !== '',
|
|
10220
|
-
} }, addon && (hAsync("div", { key: '
|
|
10221
|
-
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: '
|
|
10457
|
+
} }, addon && (hAsync("div", { key: '4cef1308de0b709d5924ff7a02ee5bd3b78c1502', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '7fdfca555d80f5409082c43967224fd8108a6f29', name: this.icon.name, size: this.icon.size ??
|
|
10458
|
+
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))))));
|
|
10222
10459
|
}
|
|
10223
10460
|
renderLabel(label) {
|
|
10224
10461
|
if (label == null || label === '')
|
|
@@ -10314,38 +10551,65 @@ class SdFilePicker {
|
|
|
10314
10551
|
this.reject = createEvent(this, "sdReject", 7);
|
|
10315
10552
|
}
|
|
10316
10553
|
get el() { return getElement(this); }
|
|
10554
|
+
/** 선택된 파일 값 */
|
|
10317
10555
|
value = null;
|
|
10556
|
+
/** 파일 미선택 시 표시할 placeholder */
|
|
10318
10557
|
placeholder = 'Click to upload';
|
|
10558
|
+
/** 비활성 상태 여부 */
|
|
10319
10559
|
disabled = false;
|
|
10560
|
+
/** sd-field 없이 인라인으로 표시하는 모드 여부 */
|
|
10320
10561
|
inline = false;
|
|
10562
|
+
/** 다중 파일 선택 여부 */
|
|
10321
10563
|
multiple = false;
|
|
10564
|
+
/** 허용할 파일 타입 (input accept 속성과 동일) */
|
|
10322
10565
|
accept;
|
|
10566
|
+
/** 파일 한 개의 최대 크기 (bytes) */
|
|
10323
10567
|
maxFileSize;
|
|
10568
|
+
/** 전체 파일의 최대 용량 합계 (bytes) */
|
|
10324
10569
|
maxTotalSize;
|
|
10570
|
+
/** 최대 파일 개수 */
|
|
10325
10571
|
maxFiles;
|
|
10326
10572
|
// sd-field 패스스루 props
|
|
10573
|
+
/** 폼 연동용 name 속성 */
|
|
10327
10574
|
name = nanoid$1();
|
|
10575
|
+
/** 레이블 텍스트 */
|
|
10328
10576
|
label = '';
|
|
10577
|
+
/** 레이블 너비 */
|
|
10329
10578
|
labelWidth = '';
|
|
10579
|
+
/** 필드 우측 어드온 레이블 */
|
|
10330
10580
|
addonLabel = '';
|
|
10581
|
+
/** 어드온 정렬 방향 */
|
|
10331
10582
|
addonAlign = 'start';
|
|
10583
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10332
10584
|
hint = '';
|
|
10585
|
+
/** 에러 메시지 */
|
|
10333
10586
|
errorMessage = '';
|
|
10587
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10334
10588
|
width = '';
|
|
10589
|
+
/** 유효성 검사 규칙 목록 */
|
|
10335
10590
|
rules;
|
|
10591
|
+
/** 에러 상태 여부 */
|
|
10336
10592
|
error = false;
|
|
10593
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10337
10594
|
status;
|
|
10595
|
+
/** 레이블 영역 아이콘 */
|
|
10338
10596
|
icon = undefined;
|
|
10597
|
+
/** 레이블 툴팁 텍스트 */
|
|
10339
10598
|
labelTooltip = '';
|
|
10599
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10340
10600
|
labelTooltipProps = null;
|
|
10601
|
+
/** 포커스 상태 여부 */
|
|
10341
10602
|
focused = false;
|
|
10603
|
+
/** 호버 상태 여부 */
|
|
10342
10604
|
hovered = false;
|
|
10343
10605
|
internalValue = null;
|
|
10344
10606
|
showTooltip = false;
|
|
10345
10607
|
fileInputRef;
|
|
10346
10608
|
fileNamesRef;
|
|
10347
10609
|
formField;
|
|
10610
|
+
/** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
|
|
10348
10611
|
update;
|
|
10612
|
+
/** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
|
|
10349
10613
|
reject;
|
|
10350
10614
|
valueChanged(newValue) {
|
|
10351
10615
|
this.internalValue = newValue;
|
|
@@ -10356,9 +10620,11 @@ class SdFilePicker {
|
|
|
10356
10620
|
componentDidUpdate() {
|
|
10357
10621
|
this.checkOverflow();
|
|
10358
10622
|
}
|
|
10623
|
+
/** 유효성 검사를 실행합니다. */
|
|
10359
10624
|
async sdValidate() {
|
|
10360
10625
|
return this.formField?.sdValidate() ?? Promise.resolve(true);
|
|
10361
10626
|
}
|
|
10627
|
+
/** 파일 값과 유효성 상태를 초기화합니다. */
|
|
10362
10628
|
async sdReset() {
|
|
10363
10629
|
const clearedValue = this.multiple ? [] : null;
|
|
10364
10630
|
this.value = clearedValue;
|
|
@@ -10368,6 +10634,7 @@ class SdFilePicker {
|
|
|
10368
10634
|
}
|
|
10369
10635
|
await this.formField?.sdResetValidation();
|
|
10370
10636
|
}
|
|
10637
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10371
10638
|
async sdResetValidate() {
|
|
10372
10639
|
await this.formField?.sdResetValidation();
|
|
10373
10640
|
}
|
|
@@ -10580,12 +10847,19 @@ class SdFloatingPopover {
|
|
|
10580
10847
|
this.close = createEvent(this, "sdClose", 7);
|
|
10581
10848
|
}
|
|
10582
10849
|
get el() { return getElement(this); }
|
|
10850
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
10583
10851
|
to = 'body';
|
|
10852
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
10584
10853
|
parentRef = null;
|
|
10854
|
+
/** [x, y] 오프셋 (px) */
|
|
10585
10855
|
offset = [0, 0];
|
|
10586
|
-
|
|
10856
|
+
/** z-index */
|
|
10857
|
+
zIndex = 996;
|
|
10858
|
+
/** 콘텐츠를 표시할 방향 */
|
|
10587
10859
|
placement = 'bottom';
|
|
10860
|
+
/** 표시 여부 */
|
|
10588
10861
|
open = false;
|
|
10862
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
10589
10863
|
close;
|
|
10590
10864
|
container;
|
|
10591
10865
|
wrapper;
|
|
@@ -10640,11 +10914,25 @@ class SdFloatingPopover {
|
|
|
10640
10914
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
10641
10915
|
return el instanceof HTMLElement ? el : document.body;
|
|
10642
10916
|
}
|
|
10917
|
+
/**
|
|
10918
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
10919
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
10920
|
+
*/
|
|
10921
|
+
resolveZIndex() {
|
|
10922
|
+
const base = this.zIndex ?? 996;
|
|
10923
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
10924
|
+
if (!layer)
|
|
10925
|
+
return base;
|
|
10926
|
+
const container = layer.closest('.sd-modal-container');
|
|
10927
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
10928
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
10929
|
+
return Math.max(base, modalZIndex + 1);
|
|
10930
|
+
}
|
|
10643
10931
|
createWrapper() {
|
|
10644
10932
|
this.wrapper = document.createElement('div');
|
|
10645
10933
|
Object.assign(this.wrapper.style, {
|
|
10646
10934
|
position: 'fixed',
|
|
10647
|
-
zIndex:
|
|
10935
|
+
zIndex: this.resolveZIndex().toString(),
|
|
10648
10936
|
transition: 'opacity 0.4s',
|
|
10649
10937
|
top: '-9999px',
|
|
10650
10938
|
left: '-9999px',
|
|
@@ -10731,7 +11019,7 @@ class SdFloatingPopover {
|
|
|
10731
11019
|
}
|
|
10732
11020
|
}
|
|
10733
11021
|
render() {
|
|
10734
|
-
return hAsync("slot", { key: '
|
|
11022
|
+
return hAsync("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
|
|
10735
11023
|
}
|
|
10736
11024
|
static get style() { return sdFloatingPortalCss(); }
|
|
10737
11025
|
static get cmpMeta() { return {
|
|
@@ -10757,9 +11045,12 @@ class SdForm {
|
|
|
10757
11045
|
this.sdSubmit = createEvent(this, "sdSubmit", 7);
|
|
10758
11046
|
this.sdValidationError = createEvent(this, "sdValidationError", 7);
|
|
10759
11047
|
}
|
|
11048
|
+
/** form 엘리먼트에 추가할 클래스 */
|
|
10760
11049
|
formClass = '';
|
|
10761
11050
|
fields = [];
|
|
11051
|
+
/** 유효성 검사 통과 후 submit 시 발생합니다. */
|
|
10762
11052
|
sdSubmit;
|
|
11053
|
+
/** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
|
|
10763
11054
|
sdValidationError;
|
|
10764
11055
|
sortFieldsByDomOrder() {
|
|
10765
11056
|
this.fields.sort((a, b) => {
|
|
@@ -10777,6 +11068,7 @@ class SdForm {
|
|
|
10777
11068
|
return 0;
|
|
10778
11069
|
});
|
|
10779
11070
|
}
|
|
11071
|
+
/** 폼에 필드를 등록합니다. */
|
|
10780
11072
|
async sdRegisterField(field) {
|
|
10781
11073
|
if (field.name === '') {
|
|
10782
11074
|
console.warn('[sd-form] field.name is required');
|
|
@@ -10787,6 +11079,7 @@ class SdForm {
|
|
|
10787
11079
|
this.fields.push(field);
|
|
10788
11080
|
this.sortFieldsByDomOrder();
|
|
10789
11081
|
}
|
|
11082
|
+
/** 폼에서 필드를 제거합니다. */
|
|
10790
11083
|
async sdUnregisterField(fieldOrName) {
|
|
10791
11084
|
if (typeof fieldOrName === 'string') {
|
|
10792
11085
|
const index = this.fields.findIndex(field => field.name === fieldOrName);
|
|
@@ -10807,13 +11100,16 @@ class SdForm {
|
|
|
10807
11100
|
}
|
|
10808
11101
|
return { valid: invalidFields.length === 0, invalidFields };
|
|
10809
11102
|
}
|
|
11103
|
+
/** 모든 등록된 필드의 유효성 검사를 실행합니다. */
|
|
10810
11104
|
async sdValidate() {
|
|
10811
11105
|
const { valid } = await this.runValidation();
|
|
10812
11106
|
return valid;
|
|
10813
11107
|
}
|
|
11108
|
+
/** 모든 필드의 값과 유효성 상태를 초기화합니다. */
|
|
10814
11109
|
async sdReset() {
|
|
10815
11110
|
this.fields.forEach(f => f.sdReset());
|
|
10816
11111
|
}
|
|
11112
|
+
/** 모든 필드의 유효성 상태만 초기화합니다. */
|
|
10817
11113
|
async sdResetValidation() {
|
|
10818
11114
|
this.fields.forEach(f => f.sdResetValidation());
|
|
10819
11115
|
}
|
|
@@ -10827,7 +11123,7 @@ class SdForm {
|
|
|
10827
11123
|
this.sdSubmit.emit();
|
|
10828
11124
|
}
|
|
10829
11125
|
render() {
|
|
10830
|
-
return (hAsync("form", { key: '
|
|
11126
|
+
return (hAsync("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
|
|
10831
11127
|
}
|
|
10832
11128
|
static get cmpMeta() { return {
|
|
10833
11129
|
"$flags$": 772,
|
|
@@ -10965,14 +11261,21 @@ class SdGhostButton {
|
|
|
10965
11261
|
registerInstance(this, hostRef);
|
|
10966
11262
|
this.click = createEvent(this, "sdClick", 7);
|
|
10967
11263
|
}
|
|
11264
|
+
/** 버튼에 표시할 아이콘명 */
|
|
10968
11265
|
icon;
|
|
11266
|
+
/** 버튼 크기 */
|
|
10969
11267
|
size = 'sm';
|
|
11268
|
+
/** 버튼 색상 의도 */
|
|
10970
11269
|
intent = 'default';
|
|
11270
|
+
/** 스크린리더용 접근성 레이블 */
|
|
10971
11271
|
ariaLabel = '';
|
|
11272
|
+
/** 호버 시 표시할 툴팁 텍스트 */
|
|
10972
11273
|
tooltipText;
|
|
11274
|
+
/** 비활성 상태 여부 */
|
|
10973
11275
|
disabled = false;
|
|
10974
11276
|
get hostEl() { return getElement(this); }
|
|
10975
11277
|
isTooltipOpen = false;
|
|
11278
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
10976
11279
|
click;
|
|
10977
11280
|
hasWarnedMissingAriaLabel = false;
|
|
10978
11281
|
componentWillLoad() {
|
|
@@ -10987,10 +11290,18 @@ class SdGhostButton {
|
|
|
10987
11290
|
}
|
|
10988
11291
|
this.click.emit(event);
|
|
10989
11292
|
};
|
|
10990
|
-
handleMouseEnter = () => {
|
|
10991
|
-
|
|
10992
|
-
|
|
10993
|
-
|
|
11293
|
+
handleMouseEnter = () => {
|
|
11294
|
+
this.isTooltipOpen = true;
|
|
11295
|
+
};
|
|
11296
|
+
handleMouseLeave = () => {
|
|
11297
|
+
this.isTooltipOpen = false;
|
|
11298
|
+
};
|
|
11299
|
+
handleFocus = () => {
|
|
11300
|
+
this.isTooltipOpen = true;
|
|
11301
|
+
};
|
|
11302
|
+
handleBlur = () => {
|
|
11303
|
+
this.isTooltipOpen = false;
|
|
11304
|
+
};
|
|
10994
11305
|
componentWillRender() {
|
|
10995
11306
|
this.warnIfMissingAriaLabel();
|
|
10996
11307
|
}
|
|
@@ -11015,7 +11326,7 @@ class SdGhostButton {
|
|
|
11015
11326
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
11016
11327
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
11017
11328
|
const hasTooltip = tooltipText.length > 0;
|
|
11018
|
-
return (hAsync("button", { key: '
|
|
11329
|
+
return (hAsync("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
|
|
11019
11330
|
'sd-ghost-button': true,
|
|
11020
11331
|
'sd-ghost-button--disabled': this.disabled,
|
|
11021
11332
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -11024,7 +11335,7 @@ class SdGhostButton {
|
|
|
11024
11335
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
11025
11336
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
11026
11337
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
11027
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '
|
|
11338
|
+
}, 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 })));
|
|
11028
11339
|
}
|
|
11029
11340
|
static get style() { return sdGhostButtonCss(); }
|
|
11030
11341
|
static get cmpMeta() { return {
|
|
@@ -11163,11 +11474,17 @@ class SdGuide {
|
|
|
11163
11474
|
registerInstance(this, hostRef);
|
|
11164
11475
|
}
|
|
11165
11476
|
get el() { return getElement(this); }
|
|
11477
|
+
/** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
|
|
11166
11478
|
type = 'tip';
|
|
11479
|
+
/** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
|
|
11167
11480
|
label = '';
|
|
11481
|
+
/** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
|
|
11168
11482
|
message = '';
|
|
11483
|
+
/** notion 타입일 때 클릭 시 이동할 URL */
|
|
11169
11484
|
url = '';
|
|
11485
|
+
/** 팝업 제목 (없으면 type에 따른 기본값 사용) */
|
|
11170
11486
|
popupTitle = '';
|
|
11487
|
+
/** 팝업 너비 (px, 없으면 426px) */
|
|
11171
11488
|
popupWidth;
|
|
11172
11489
|
popupShow = false;
|
|
11173
11490
|
guideRef;
|
|
@@ -11229,10 +11546,10 @@ class SdGuide {
|
|
|
11229
11546
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
11230
11547
|
if (isActive)
|
|
11231
11548
|
buttonClasses.push('sd-guide__button--active');
|
|
11232
|
-
return (hAsync("div", { key: '
|
|
11549
|
+
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: {
|
|
11233
11550
|
...this.guideStyle,
|
|
11234
11551
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
11235
|
-
} }, hAsync("sd-ghost-button", { key: '
|
|
11552
|
+
} }, 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)))))));
|
|
11236
11553
|
}
|
|
11237
11554
|
// 현재 2depth까지만 스타일 적용
|
|
11238
11555
|
renderListItem(message, depth = 0) {
|
|
@@ -11551,6 +11868,7 @@ class SdIcon {
|
|
|
11551
11868
|
rotate;
|
|
11552
11869
|
/** 접근성을 위한 라벨 */
|
|
11553
11870
|
label;
|
|
11871
|
+
/** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
|
|
11554
11872
|
iconStyle = {};
|
|
11555
11873
|
getIconClasses() {
|
|
11556
11874
|
const classes = ['sd-icon'];
|
|
@@ -11624,46 +11942,81 @@ class SdInput {
|
|
|
11624
11942
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
11625
11943
|
}
|
|
11626
11944
|
get host() { return getElement(this); }
|
|
11945
|
+
/** 입력 값 */
|
|
11627
11946
|
value = null;
|
|
11947
|
+
/** 입력 타입 */
|
|
11628
11948
|
type = 'text';
|
|
11949
|
+
/** 입력 크기 */
|
|
11629
11950
|
size = 'sm';
|
|
11951
|
+
/** 필드 우측 어드온 레이블 */
|
|
11630
11952
|
addonLabel = '';
|
|
11953
|
+
/** 어드온 정렬 방향 */
|
|
11631
11954
|
addonAlign = 'start';
|
|
11955
|
+
/** 플레이스홀더 텍스트 */
|
|
11632
11956
|
placeholder = '입력해 주세요.';
|
|
11957
|
+
/** 비활성 상태 여부 */
|
|
11633
11958
|
disabled = false;
|
|
11959
|
+
/** 값이 있을 때 지우기 버튼 표시 여부 */
|
|
11634
11960
|
clearable = false;
|
|
11961
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
11635
11962
|
width = '';
|
|
11963
|
+
/** 유효성 검사 규칙 목록 */
|
|
11636
11964
|
rules = [];
|
|
11965
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
11637
11966
|
autoFocus = false;
|
|
11967
|
+
/** autocomplete 속성 값 */
|
|
11638
11968
|
autocomplete = '';
|
|
11969
|
+
/** 최대 입력 글자 수 */
|
|
11639
11970
|
maxlength;
|
|
11971
|
+
/** 최소 입력 글자 수 */
|
|
11640
11972
|
minlength;
|
|
11973
|
+
/** 모바일 키보드 타입 */
|
|
11641
11974
|
inputmode;
|
|
11975
|
+
/** 모바일 Enter 키 힌트 */
|
|
11642
11976
|
enterkeyhint;
|
|
11977
|
+
/** 맞춤법 검사 여부 */
|
|
11643
11978
|
spellcheck = false;
|
|
11979
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
11644
11980
|
status;
|
|
11981
|
+
/** 필드 하단 힌트 텍스트 */
|
|
11645
11982
|
hint = '';
|
|
11983
|
+
/** 에러 메시지 */
|
|
11646
11984
|
errorMessage = '';
|
|
11985
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
11647
11986
|
inputClass = '';
|
|
11987
|
+
/** 읽기 전용 여부 */
|
|
11648
11988
|
readonly = false;
|
|
11989
|
+
/** 에러 상태 여부 */
|
|
11649
11990
|
error = false;
|
|
11991
|
+
/** 포커스 상태 여부 */
|
|
11650
11992
|
focused = false;
|
|
11993
|
+
/** 호버 상태 여부 */
|
|
11651
11994
|
hovered = false;
|
|
11652
11995
|
// props - label
|
|
11996
|
+
/** 레이블 텍스트 */
|
|
11653
11997
|
label = '';
|
|
11998
|
+
/** 레이블 너비 */
|
|
11654
11999
|
labelWidth = '';
|
|
12000
|
+
/** 레이블 영역 아이콘 */
|
|
11655
12001
|
icon = undefined;
|
|
12002
|
+
/** 레이블 툴팁 텍스트 */
|
|
11656
12003
|
labelTooltip = '';
|
|
12004
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
11657
12005
|
labelTooltipProps = null;
|
|
11658
12006
|
// props - custom styles
|
|
12007
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
11659
12008
|
inputStyle = {};
|
|
11660
12009
|
internalValue = null;
|
|
11661
12010
|
passwordVisible = false;
|
|
11662
12011
|
nativeEl = undefined;
|
|
11663
12012
|
formField;
|
|
12013
|
+
/** 폼 연동용 name 속성 */
|
|
11664
12014
|
name = nanoid$1();
|
|
12015
|
+
/** 값이 변경될 때 발생합니다. */
|
|
11665
12016
|
input;
|
|
12017
|
+
/** 포커스될 때 발생합니다. */
|
|
11666
12018
|
focus;
|
|
12019
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
11667
12020
|
blur;
|
|
11668
12021
|
valueChanged(newValue) {
|
|
11669
12022
|
this.internalValue = newValue;
|
|
@@ -11674,18 +12027,23 @@ class SdInput {
|
|
|
11674
12027
|
this.input?.emit(this.value);
|
|
11675
12028
|
}
|
|
11676
12029
|
}
|
|
12030
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
11677
12031
|
async sdGetNativeElement() {
|
|
11678
12032
|
return this.nativeEl || null;
|
|
11679
12033
|
}
|
|
12034
|
+
/** 유효성 검사를 실행합니다. */
|
|
11680
12035
|
async sdValidate() {
|
|
11681
12036
|
this.formField?.sdValidate();
|
|
11682
12037
|
}
|
|
12038
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
11683
12039
|
async sdReset() {
|
|
11684
12040
|
this.formField?.sdReset();
|
|
11685
12041
|
}
|
|
12042
|
+
/** 유효성 상태만 초기화합니다. */
|
|
11686
12043
|
async sdResetValidate() {
|
|
11687
12044
|
this.formField?.sdResetValidation();
|
|
11688
12045
|
}
|
|
12046
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
11689
12047
|
async sdFocus() {
|
|
11690
12048
|
this.formField?.sdFocus();
|
|
11691
12049
|
}
|
|
@@ -11733,12 +12091,12 @@ class SdInput {
|
|
|
11733
12091
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
11734
12092
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
11735
12093
|
};
|
|
11736
|
-
return (hAsync("sd-field", { key: '
|
|
12094
|
+
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 () => {
|
|
11737
12095
|
if (this.disabled || this.readonly)
|
|
11738
12096
|
return;
|
|
11739
12097
|
this.internalValue = '';
|
|
11740
12098
|
await this.formField?.sdValidate();
|
|
11741
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
12099
|
+
} })), 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: () => {
|
|
11742
12100
|
if (this.disabled || this.readonly)
|
|
11743
12101
|
return;
|
|
11744
12102
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -11931,7 +12289,9 @@ class SdKeyValueTable {
|
|
|
11931
12289
|
* - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
11932
12290
|
*/
|
|
11933
12291
|
radius = 'default';
|
|
12292
|
+
/** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
|
|
11934
12293
|
change;
|
|
12294
|
+
/** search 패널의 검색 버튼 클릭 시 발생합니다. */
|
|
11935
12295
|
searchEvent;
|
|
11936
12296
|
emit = (name, value) => {
|
|
11937
12297
|
this.change.emit({ name, value });
|
|
@@ -12167,9 +12527,13 @@ class SdLinearProgress {
|
|
|
12167
12527
|
constructor(hostRef) {
|
|
12168
12528
|
registerInstance(this, hostRef);
|
|
12169
12529
|
}
|
|
12530
|
+
/** true이면 진행률 없이 무한 애니메이션 표시 */
|
|
12170
12531
|
indeterminate = false;
|
|
12532
|
+
/** 진행률 (0–100) */
|
|
12171
12533
|
value = 0;
|
|
12534
|
+
/** 색상 타입 */
|
|
12172
12535
|
type = 'primary';
|
|
12536
|
+
/** 하단에 표시할 레이블 텍스트 */
|
|
12173
12537
|
label;
|
|
12174
12538
|
get clampedValue() {
|
|
12175
12539
|
if (!Number.isFinite(this.value))
|
|
@@ -12177,8 +12541,7 @@ class SdLinearProgress {
|
|
|
12177
12541
|
return Math.max(0, Math.min(100, this.value));
|
|
12178
12542
|
}
|
|
12179
12543
|
render() {
|
|
12180
|
-
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ??
|
|
12181
|
-
LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12544
|
+
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ?? LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12182
12545
|
const valueColor = this.clampedValue === 0 ? LINEAR_PROGRESS_COLORS.valueZero : fillColor;
|
|
12183
12546
|
const hostStyle = {
|
|
12184
12547
|
'--sd-linear-progress-track-color': LINEAR_PROGRESS_COLORS.track,
|
|
@@ -12194,7 +12557,7 @@ class SdLinearProgress {
|
|
|
12194
12557
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
12195
12558
|
};
|
|
12196
12559
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
12197
|
-
return (hAsync(Host, { key: '
|
|
12560
|
+
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)));
|
|
12198
12561
|
}
|
|
12199
12562
|
static get style() { return sdLinearProgressCss(); }
|
|
12200
12563
|
static get cmpMeta() { return {
|
|
@@ -12220,18 +12583,20 @@ class SdLoadingContainer {
|
|
|
12220
12583
|
}
|
|
12221
12584
|
visible = false;
|
|
12222
12585
|
message = '';
|
|
12586
|
+
/** 로딩 오버레이를 표시합니다. */
|
|
12223
12587
|
async show(options = {}) {
|
|
12224
12588
|
this.message = options.message ?? '';
|
|
12225
12589
|
this.visible = true;
|
|
12226
12590
|
}
|
|
12591
|
+
/** 로딩 오버레이를 숨깁니다. */
|
|
12227
12592
|
async hide() {
|
|
12228
12593
|
this.visible = false;
|
|
12229
12594
|
}
|
|
12230
12595
|
render() {
|
|
12231
|
-
return (hAsync("div", { key: '
|
|
12596
|
+
return (hAsync("div", { key: 'b8efbc6422fded2472a6e575c9a7102375f90600', class: {
|
|
12232
12597
|
'sd-loading-container': true,
|
|
12233
12598
|
'sd-loading-container--visible': this.visible,
|
|
12234
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
12599
|
+
}, "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))));
|
|
12235
12600
|
}
|
|
12236
12601
|
static get style() { return sdLoadingContainerCss(); }
|
|
12237
12602
|
static get cmpMeta() { return {
|
|
@@ -12283,13 +12648,21 @@ class SdLoadingModal {
|
|
|
12283
12648
|
registerInstance(this, hostRef);
|
|
12284
12649
|
this.click = createEvent(this, "sdClick", 7);
|
|
12285
12650
|
}
|
|
12651
|
+
/** 모달 상태 (loading: 로딩 중, error: 에러) */
|
|
12286
12652
|
state = 'loading';
|
|
12653
|
+
/** 표시할 메시지 (배열이면 여러 줄로 렌더링) */
|
|
12287
12654
|
message = '';
|
|
12655
|
+
/** 하단 버튼 표시 여부 */
|
|
12288
12656
|
useButton = false;
|
|
12657
|
+
/** 버튼 레이블 (없으면 state에 따른 기본값 사용) */
|
|
12289
12658
|
buttonLabel = '';
|
|
12659
|
+
/** 모달 너비 */
|
|
12290
12660
|
width;
|
|
12661
|
+
/** 모달 높이 */
|
|
12291
12662
|
height;
|
|
12663
|
+
/** sd-circle-progress에 전달할 진행률 (0–100) */
|
|
12292
12664
|
progress;
|
|
12665
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
12293
12666
|
click;
|
|
12294
12667
|
get resolvedState() {
|
|
12295
12668
|
return this.state ?? 'loading';
|
|
@@ -12328,7 +12701,7 @@ class SdLoadingModal {
|
|
|
12328
12701
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
12329
12702
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
12330
12703
|
};
|
|
12331
|
-
return (hAsync(Host, { key: '
|
|
12704
|
+
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 }))))));
|
|
12332
12705
|
}
|
|
12333
12706
|
static get style() { return sdLoadingModalCss(); }
|
|
12334
12707
|
static get cmpMeta() { return {
|
|
@@ -12457,9 +12830,11 @@ class SdModalContainer {
|
|
|
12457
12830
|
registerInstance(this, hostRef);
|
|
12458
12831
|
}
|
|
12459
12832
|
get el() { return getElement(this); }
|
|
12833
|
+
/** 마지막 모달이 닫힐 때 자신을 DOM에서 제거할지 여부 */
|
|
12460
12834
|
autoRemove = false;
|
|
12461
12835
|
entries = [];
|
|
12462
12836
|
layerRefs = new Map();
|
|
12837
|
+
/** 확인 모달을 열고 모달 ID를 반환합니다. */
|
|
12463
12838
|
async open(options, modalRef) {
|
|
12464
12839
|
const id = `modal-${++modalIdCounter}`;
|
|
12465
12840
|
const modalEl = this.createConfirmModal(id, options);
|
|
@@ -12474,6 +12849,7 @@ class SdModalContainer {
|
|
|
12474
12849
|
});
|
|
12475
12850
|
return id;
|
|
12476
12851
|
}
|
|
12852
|
+
/** 로딩 모달을 열고 모달 ID를 반환합니다. */
|
|
12477
12853
|
async openLoading(options, modalRef) {
|
|
12478
12854
|
const id = `modal-${++modalIdCounter}`;
|
|
12479
12855
|
const modalEl = this.createLoadingModal(id, options);
|
|
@@ -12488,6 +12864,7 @@ class SdModalContainer {
|
|
|
12488
12864
|
});
|
|
12489
12865
|
return id;
|
|
12490
12866
|
}
|
|
12867
|
+
/** 커스텀 엘리먼트를 모달로 등록하고 모달 ID를 반환합니다. */
|
|
12491
12868
|
async createCustom(element, options, modalRef) {
|
|
12492
12869
|
const id = `modal-${++modalIdCounter}`;
|
|
12493
12870
|
element.setAttribute('data-modal-id', id);
|
|
@@ -12533,12 +12910,14 @@ class SdModalContainer {
|
|
|
12533
12910
|
unregisterModal(entry.id);
|
|
12534
12911
|
}
|
|
12535
12912
|
}
|
|
12913
|
+
/** 지정한 ID의 모달을 닫습니다. */
|
|
12536
12914
|
async dismissById(id, reason) {
|
|
12537
12915
|
const entry = this.entries.find(e => e.id === id);
|
|
12538
12916
|
if (!entry)
|
|
12539
12917
|
return;
|
|
12540
12918
|
this.requestDismiss(id, reason);
|
|
12541
12919
|
}
|
|
12920
|
+
/** 열려있는 모달의 props를 동적으로 업데이트합니다. */
|
|
12542
12921
|
async update(id, props) {
|
|
12543
12922
|
const entry = this.entries.find(e => e.id === id && !e.closing);
|
|
12544
12923
|
if (!entry)
|
|
@@ -12894,43 +13273,77 @@ class SdNumberInput {
|
|
|
12894
13273
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
12895
13274
|
}
|
|
12896
13275
|
get el() { return getElement(this); }
|
|
13276
|
+
/** 입력 크기 */
|
|
12897
13277
|
size = 'sm';
|
|
13278
|
+
/** 최솟값 */
|
|
12898
13279
|
min = Number.NEGATIVE_INFINITY;
|
|
13280
|
+
/** 최댓값 */
|
|
12899
13281
|
max = Number.POSITIVE_INFINITY;
|
|
13282
|
+
/** 스텝 단위 */
|
|
12900
13283
|
step = 1;
|
|
13284
|
+
/** 증감 버튼 표시 여부 */
|
|
12901
13285
|
useButton = false;
|
|
13286
|
+
/** 소수점 입력 허용 여부 */
|
|
12902
13287
|
useDecimal = false;
|
|
13288
|
+
/** 입력 값 */
|
|
12903
13289
|
value = null;
|
|
13290
|
+
/** 레이블 텍스트 */
|
|
12904
13291
|
label;
|
|
13292
|
+
/** 레이블 너비 */
|
|
12905
13293
|
labelWidth = '';
|
|
13294
|
+
/** 레이블 영역 아이콘 */
|
|
12906
13295
|
icon = undefined;
|
|
13296
|
+
/** 레이블 툴팁 텍스트 */
|
|
12907
13297
|
labelTooltip = '';
|
|
13298
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
12908
13299
|
labelTooltipProps = null;
|
|
13300
|
+
/** 필드 우측 어드온 레이블 */
|
|
12909
13301
|
addonLabel = '';
|
|
13302
|
+
/** 어드온 정렬 방향 */
|
|
12910
13303
|
addonAlign = 'start';
|
|
13304
|
+
/** 플레이스홀더 텍스트 */
|
|
12911
13305
|
placeholder = '입력해 주세요.';
|
|
13306
|
+
/** 비활성 상태 여부 */
|
|
12912
13307
|
disabled = false;
|
|
13308
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
12913
13309
|
width;
|
|
13310
|
+
/** 유효성 검사 규칙 목록 */
|
|
12914
13311
|
rules = [];
|
|
13312
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
12915
13313
|
autoFocus = false;
|
|
13314
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
12916
13315
|
status;
|
|
13316
|
+
/** 필드 하단 힌트 텍스트 */
|
|
12917
13317
|
hint = '';
|
|
13318
|
+
/** 에러 메시지 */
|
|
12918
13319
|
errorMessage = '';
|
|
13320
|
+
/** 입력 앞에 표시할 접두 텍스트 */
|
|
12919
13321
|
inputPrefix = '';
|
|
13322
|
+
/** 입력 뒤에 표시할 접미 텍스트 */
|
|
12920
13323
|
inputSuffix = '';
|
|
13324
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
12921
13325
|
inputClass = '';
|
|
13326
|
+
/** 읽기 전용 여부 */
|
|
12922
13327
|
readonly = false;
|
|
13328
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
12923
13329
|
inputStyle = {};
|
|
13330
|
+
/** 에러 상태 여부 */
|
|
12924
13331
|
error = false;
|
|
13332
|
+
/** 포커스 상태 여부 */
|
|
12925
13333
|
focused = false;
|
|
13334
|
+
/** 호버 상태 여부 */
|
|
12926
13335
|
hovered = false;
|
|
12927
13336
|
internalValue = null;
|
|
12928
13337
|
displayValue = '';
|
|
12929
13338
|
nativeEl = undefined;
|
|
12930
13339
|
formField;
|
|
13340
|
+
/** 폼 연동용 name 속성 */
|
|
12931
13341
|
name = nanoid$1();
|
|
13342
|
+
/** 값이 변경될 때 발생합니다. */
|
|
12932
13343
|
update;
|
|
13344
|
+
/** 포커스될 때 발생합니다. */
|
|
12933
13345
|
focus;
|
|
13346
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
12934
13347
|
blur;
|
|
12935
13348
|
toNumber(val) {
|
|
12936
13349
|
if (val === null || val === undefined || val === '')
|
|
@@ -13008,18 +13421,23 @@ class SdNumberInput {
|
|
|
13008
13421
|
this.update?.emit(newValue);
|
|
13009
13422
|
}
|
|
13010
13423
|
}
|
|
13424
|
+
/** 유효성 검사를 실행합니다. */
|
|
13011
13425
|
async sdValidate() {
|
|
13012
13426
|
this.formField?.sdValidate();
|
|
13013
13427
|
}
|
|
13428
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
13014
13429
|
async sdReset() {
|
|
13015
13430
|
this.formField?.sdReset();
|
|
13016
13431
|
}
|
|
13432
|
+
/** 유효성 상태만 초기화합니다. */
|
|
13017
13433
|
async sdResetValidate() {
|
|
13018
13434
|
this.formField?.sdResetValidation();
|
|
13019
13435
|
}
|
|
13436
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
13020
13437
|
async sdFocus() {
|
|
13021
13438
|
this.formField?.sdFocus();
|
|
13022
13439
|
}
|
|
13440
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
13023
13441
|
async sdGetNativeElement() {
|
|
13024
13442
|
return this.nativeEl || null;
|
|
13025
13443
|
}
|
|
@@ -13166,15 +13584,15 @@ class SdNumberInput {
|
|
|
13166
13584
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
13167
13585
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
13168
13586
|
};
|
|
13169
|
-
return (hAsync("sd-field", { key: '
|
|
13587
|
+
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: {
|
|
13170
13588
|
'sd-number-input__content': true,
|
|
13171
13589
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
13172
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
13590
|
+
} }, 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()
|
|
13173
13591
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13174
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
13592
|
+
: 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: {
|
|
13175
13593
|
textAlign: this.useButton ? 'center' : 'right',
|
|
13176
13594
|
...this.inputStyle,
|
|
13177
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
13595
|
+
} }), 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()
|
|
13178
13596
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13179
13597
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
13180
13598
|
}
|
|
@@ -13310,9 +13728,13 @@ class SdPagination {
|
|
|
13310
13728
|
registerInstance(this, hostRef);
|
|
13311
13729
|
this.pageChange = createEvent(this, "sdPageChange", 7);
|
|
13312
13730
|
}
|
|
13731
|
+
/** 현재 페이지 번호 */
|
|
13313
13732
|
currentPage = 1;
|
|
13733
|
+
/** 마지막 페이지 번호 */
|
|
13314
13734
|
lastPage = 1;
|
|
13735
|
+
/** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
|
|
13315
13736
|
simple = false;
|
|
13737
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
13316
13738
|
pageChange;
|
|
13317
13739
|
get pageNumbers() {
|
|
13318
13740
|
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
@@ -13384,13 +13806,13 @@ class SdPagination {
|
|
|
13384
13806
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
13385
13807
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
13386
13808
|
};
|
|
13387
|
-
return (hAsync("div", { key: '
|
|
13809
|
+
return (hAsync("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
|
|
13388
13810
|
'sd-pagination': true,
|
|
13389
13811
|
'sd-pagination--simple': this.simple,
|
|
13390
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
13812
|
+
}, 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: {
|
|
13391
13813
|
'sd-pagination__item': true,
|
|
13392
13814
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
13393
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
13815
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
13394
13816
|
}
|
|
13395
13817
|
static get style() { return sdPaginationCss(); }
|
|
13396
13818
|
static get cmpMeta() { return {
|
|
@@ -13424,22 +13846,38 @@ class SdPopover {
|
|
|
13424
13846
|
this.showChange = createEvent(this, "sdShowChange", 7);
|
|
13425
13847
|
}
|
|
13426
13848
|
get el() { return getElement(this); }
|
|
13849
|
+
/** 팝오버 표시 여부 */
|
|
13427
13850
|
show = false;
|
|
13851
|
+
/** 팝오버를 표시할 방향 */
|
|
13428
13852
|
placement = 'bottom';
|
|
13853
|
+
/** 아이콘 트리거 색상 */
|
|
13429
13854
|
color = '#01BB4B';
|
|
13855
|
+
/** 아이콘 트리거 아이콘명 */
|
|
13430
13856
|
icon = 'helpOutline';
|
|
13857
|
+
/** 아이콘 트리거 크기 */
|
|
13431
13858
|
iconSize = 12;
|
|
13859
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
13432
13860
|
label = '';
|
|
13861
|
+
/** 버튼 트리거 프리셋 */
|
|
13433
13862
|
name = 'primary_sm';
|
|
13863
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
13434
13864
|
rightIcon;
|
|
13865
|
+
/** 스크린리더용 접근성 레이블 */
|
|
13435
13866
|
ariaLabel = '';
|
|
13867
|
+
/** 비활성 상태 여부 */
|
|
13436
13868
|
disabled = false;
|
|
13869
|
+
/** 버튼 type 속성 */
|
|
13437
13870
|
type = 'button';
|
|
13871
|
+
/** 팝오버 메뉴 제목 */
|
|
13438
13872
|
menuTitle;
|
|
13873
|
+
/** 팝오버 하단 좌측 링크 옵션 */
|
|
13439
13874
|
leftLink;
|
|
13875
|
+
/** 팝오버 하단 버튼 옵션 */
|
|
13440
13876
|
button;
|
|
13877
|
+
/** 팝오버 메뉴에 추가할 클래스 */
|
|
13441
13878
|
menuClass = '';
|
|
13442
13879
|
slotContentHTML = '';
|
|
13880
|
+
/** 팝오버 표시 상태가 바뀔 때 발생합니다. */
|
|
13443
13881
|
showChange;
|
|
13444
13882
|
buttonEl;
|
|
13445
13883
|
setShow = (next) => {
|
|
@@ -13474,17 +13912,17 @@ class SdPopover {
|
|
|
13474
13912
|
const leftLink = this.leftLink;
|
|
13475
13913
|
const button = this.button;
|
|
13476
13914
|
const hasFooter = !!leftLink || !!button;
|
|
13477
|
-
return (hAsync(Fragment, { key: '
|
|
13915
|
+
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: {
|
|
13478
13916
|
'sd-floating-menu': true,
|
|
13479
13917
|
'sd-floating-menu--popover': true,
|
|
13480
13918
|
[`sd-floating-menu--${placement}`]: true,
|
|
13481
13919
|
[menuClass]: menuClass !== '',
|
|
13482
13920
|
}, style: {
|
|
13483
13921
|
'--sd-floating-bg': popoverTokens.popover.default.bg,
|
|
13484
|
-
} }, hAsync("i", { key: '
|
|
13922
|
+
} }, 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: {
|
|
13485
13923
|
'sd-floating-menu__buttons': true,
|
|
13486
13924
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
13487
|
-
} }, leftLink && (hAsync("sd-text-link", { key: '
|
|
13925
|
+
} }, 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 }))))));
|
|
13488
13926
|
}
|
|
13489
13927
|
static get style() { return sdPopoverCss(); }
|
|
13490
13928
|
static get cmpMeta() { return {
|
|
@@ -13585,12 +14023,16 @@ class SdPopup {
|
|
|
13585
14023
|
registerInstance(this, hostRef);
|
|
13586
14024
|
this.submit = createEvent(this, "sdSubmit", 7);
|
|
13587
14025
|
}
|
|
14026
|
+
/** 팝업 헤더에 표시할 제목 */
|
|
13588
14027
|
popupTitle = '';
|
|
14028
|
+
/** 팝업 타입 */
|
|
13589
14029
|
type = 'default';
|
|
13590
14030
|
// 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
13591
|
-
|
|
14031
|
+
/** 하단 footer 영역 표시 여부 */
|
|
13592
14032
|
useFooter = true;
|
|
14033
|
+
/** 확인 버튼 커스텀 props */
|
|
13593
14034
|
submitButtonProps;
|
|
14035
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
13594
14036
|
submit;
|
|
13595
14037
|
render() {
|
|
13596
14038
|
const cssVars = {
|
|
@@ -13616,7 +14058,7 @@ class SdPopup {
|
|
|
13616
14058
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
13617
14059
|
...this.submitButtonProps,
|
|
13618
14060
|
};
|
|
13619
|
-
return (hAsync("div", { key: '
|
|
14061
|
+
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() })))));
|
|
13620
14062
|
}
|
|
13621
14063
|
static get style() { return sdPopupCss(); }
|
|
13622
14064
|
static get cmpMeta() { return {
|
|
@@ -13640,13 +14082,21 @@ class SdPortal {
|
|
|
13640
14082
|
this.close = createEvent(this, "sdClose", 3);
|
|
13641
14083
|
}
|
|
13642
14084
|
get hostEl() { return getElement(this); }
|
|
14085
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
13643
14086
|
to = 'body';
|
|
14087
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
13644
14088
|
parentRef = null;
|
|
14089
|
+
/** [x, y] 오프셋 (px) */
|
|
13645
14090
|
offset = [0, 4];
|
|
14091
|
+
/** 뷰포트 경계 여백 (px) */
|
|
13646
14092
|
viewportPadding = 0;
|
|
13647
|
-
|
|
14093
|
+
/** z-index */
|
|
14094
|
+
zIndex = 996;
|
|
14095
|
+
/** 표시 여부 */
|
|
13648
14096
|
open = false;
|
|
14097
|
+
/** 콘텐츠를 표시할 방향 (공간이 부족하면 자동으로 반대 방향으로 전환) */
|
|
13649
14098
|
placement = 'bottom';
|
|
14099
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
13650
14100
|
close;
|
|
13651
14101
|
container;
|
|
13652
14102
|
wrapper;
|
|
@@ -13685,13 +14135,27 @@ class SdPortal {
|
|
|
13685
14135
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
13686
14136
|
return el instanceof HTMLElement ? el : document.body;
|
|
13687
14137
|
}
|
|
14138
|
+
/**
|
|
14139
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
14140
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
14141
|
+
*/
|
|
14142
|
+
resolveZIndex() {
|
|
14143
|
+
const base = this.zIndex ?? 996;
|
|
14144
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
14145
|
+
if (!layer)
|
|
14146
|
+
return base;
|
|
14147
|
+
const container = layer.closest('.sd-modal-container');
|
|
14148
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
14149
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
14150
|
+
return Math.max(base, modalZIndex + 1);
|
|
14151
|
+
}
|
|
13688
14152
|
createWrapper() {
|
|
13689
14153
|
this.wrapper = document.createElement('div');
|
|
13690
14154
|
Object.assign(this.wrapper.style, {
|
|
13691
14155
|
position: 'fixed',
|
|
13692
14156
|
top: '0',
|
|
13693
14157
|
left: '0',
|
|
13694
|
-
zIndex:
|
|
14158
|
+
zIndex: this.resolveZIndex().toString(),
|
|
13695
14159
|
opacity: '0',
|
|
13696
14160
|
transition: 'opacity 0.15s ease-out',
|
|
13697
14161
|
boxSizing: 'border-box',
|
|
@@ -13857,8 +14321,7 @@ class SdPortal {
|
|
|
13857
14321
|
return scrollParents;
|
|
13858
14322
|
}
|
|
13859
14323
|
isInsideTarget(target) {
|
|
13860
|
-
return !!(
|
|
13861
|
-
(this.parentRef?.contains(target)));
|
|
14324
|
+
return !!(this.wrapper?.contains(target) || this.parentRef?.contains(target));
|
|
13862
14325
|
}
|
|
13863
14326
|
// 외부 클릭 감지
|
|
13864
14327
|
handleMouseDown(e) {
|
|
@@ -13874,7 +14337,7 @@ class SdPortal {
|
|
|
13874
14337
|
this.close.emit();
|
|
13875
14338
|
}
|
|
13876
14339
|
render() {
|
|
13877
|
-
return hAsync("slot", { key: '
|
|
14340
|
+
return hAsync("slot", { key: 'e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf' });
|
|
13878
14341
|
}
|
|
13879
14342
|
static get watchers() { return {
|
|
13880
14343
|
"open": [{
|
|
@@ -13981,10 +14444,15 @@ class SdRadio {
|
|
|
13981
14444
|
registerInstance(this, hostRef);
|
|
13982
14445
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
13983
14446
|
}
|
|
14447
|
+
/** 라디오 그룹의 현재 선택 값 */
|
|
13984
14448
|
value;
|
|
14449
|
+
/** 이 라디오 아이템의 값 */
|
|
13985
14450
|
val;
|
|
14451
|
+
/** 비활성 상태 여부 */
|
|
13986
14452
|
disabled = false;
|
|
14453
|
+
/** 표시할 라벨 텍스트 */
|
|
13987
14454
|
label;
|
|
14455
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
13988
14456
|
update;
|
|
13989
14457
|
valueChanged(newValue) {
|
|
13990
14458
|
this.value = newValue;
|
|
@@ -14027,7 +14495,7 @@ class SdRadio {
|
|
|
14027
14495
|
'--sd-radio-label-color': RADIO_COLORS.label.default,
|
|
14028
14496
|
'--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
|
|
14029
14497
|
};
|
|
14030
|
-
return (hAsync("label", { key: '
|
|
14498
|
+
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))));
|
|
14031
14499
|
}
|
|
14032
14500
|
static get watchers() { return {
|
|
14033
14501
|
"value": [{
|
|
@@ -14152,11 +14620,17 @@ class SdRadioButton {
|
|
|
14152
14620
|
registerInstance(this, hostRef);
|
|
14153
14621
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14154
14622
|
}
|
|
14623
|
+
/** 현재 선택된 값 */
|
|
14155
14624
|
value;
|
|
14625
|
+
/** 라디오 버튼 옵션 목록 */
|
|
14156
14626
|
options = [];
|
|
14627
|
+
/** 버튼 크기 */
|
|
14157
14628
|
size = 'sm';
|
|
14629
|
+
/** 비활성 상태 여부 */
|
|
14158
14630
|
disabled = false;
|
|
14631
|
+
/** input name 속성 (없으면 자동 생성) */
|
|
14159
14632
|
name;
|
|
14633
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14160
14634
|
change;
|
|
14161
14635
|
componentWillLoad() {
|
|
14162
14636
|
this.size ??= 'sm';
|
|
@@ -14226,7 +14700,7 @@ class SdRadioButton {
|
|
|
14226
14700
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
14227
14701
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
14228
14702
|
};
|
|
14229
|
-
return (hAsync("div", { key: '
|
|
14703
|
+
return (hAsync("div", { key: 'c0ed4c6927bd32a7335e003856de4b43ead97b1c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
14230
14704
|
const isSelected = this.isOptionSelected(option);
|
|
14231
14705
|
const isDisabled = this.isOptionDisabled(option);
|
|
14232
14706
|
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)));
|
|
@@ -14256,11 +14730,17 @@ class SdRadioGroup {
|
|
|
14256
14730
|
registerInstance(this, hostRef);
|
|
14257
14731
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14258
14732
|
}
|
|
14733
|
+
/** 현재 선택된 값 */
|
|
14259
14734
|
value;
|
|
14735
|
+
/** 라디오 옵션 목록 */
|
|
14260
14736
|
options = [];
|
|
14737
|
+
/** 옵션 배치 방향 */
|
|
14261
14738
|
direction = 'vertical';
|
|
14739
|
+
/** 비활성 상태 여부 */
|
|
14262
14740
|
disabled = false;
|
|
14741
|
+
/** input name 속성 */
|
|
14263
14742
|
groupName;
|
|
14743
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14264
14744
|
change;
|
|
14265
14745
|
valueChanged(newValue) {
|
|
14266
14746
|
this.value = newValue;
|
|
@@ -14278,7 +14758,7 @@ class SdRadioGroup {
|
|
|
14278
14758
|
return classes.join(' ');
|
|
14279
14759
|
}
|
|
14280
14760
|
render() {
|
|
14281
|
-
return (hAsync("div", { key: '
|
|
14761
|
+
return (hAsync("div", { key: '3a1694daddf5794a1598838c44bc965de2976770', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
14282
14762
|
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) }));
|
|
14283
14763
|
})));
|
|
14284
14764
|
}
|
|
@@ -14316,29 +14796,53 @@ class SdSelect {
|
|
|
14316
14796
|
static PORTAL_OFFSET_Y = 4;
|
|
14317
14797
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
14318
14798
|
get el() { return getElement(this); }
|
|
14799
|
+
/** 셀렉트 타입 (단일/다중/계층) */
|
|
14319
14800
|
type = 'default';
|
|
14801
|
+
/** 현재 선택된 값 */
|
|
14320
14802
|
value = null;
|
|
14803
|
+
/** 선택 옵션 목록 */
|
|
14321
14804
|
options = [];
|
|
14805
|
+
/** 값이 없을 때 표시할 플레이스홀더 */
|
|
14322
14806
|
placeholder = '선택';
|
|
14807
|
+
/** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
|
|
14323
14808
|
dropdownWidth = '';
|
|
14809
|
+
/** 드롭다운 최대 너비 */
|
|
14324
14810
|
maxDropdownWidth = '640px';
|
|
14811
|
+
/** 드롭다운 최대 높이 */
|
|
14325
14812
|
dropdownHeight = '260px';
|
|
14813
|
+
/** 비활성 상태 여부 */
|
|
14326
14814
|
disabled = false;
|
|
14815
|
+
/** 레이블 텍스트 */
|
|
14327
14816
|
label = '';
|
|
14817
|
+
/** 레이블 너비 */
|
|
14328
14818
|
labelWidth = '';
|
|
14819
|
+
/** 필드 우측 어드온 레이블 */
|
|
14329
14820
|
addonLabel = '';
|
|
14821
|
+
/** 어드온 정렬 방향 */
|
|
14330
14822
|
addonAlign = 'start';
|
|
14823
|
+
/** 에러 상태 여부 */
|
|
14331
14824
|
error = false;
|
|
14825
|
+
/** 필드 하단 힌트 텍스트 */
|
|
14332
14826
|
hint = '';
|
|
14827
|
+
/** 에러 메시지 */
|
|
14333
14828
|
errorMessage = '';
|
|
14829
|
+
/** 유효성 검사 규칙 목록 */
|
|
14334
14830
|
rules = [];
|
|
14831
|
+
/** 레이블 영역 아이콘 */
|
|
14335
14832
|
icon = undefined;
|
|
14833
|
+
/** 레이블 툴팁 텍스트 */
|
|
14336
14834
|
labelTooltip = '';
|
|
14835
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
14337
14836
|
labelTooltipProps = null;
|
|
14837
|
+
/** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
|
|
14338
14838
|
emitValue = false;
|
|
14839
|
+
/** 필드 너비 */
|
|
14339
14840
|
width = '';
|
|
14841
|
+
/** 드롭다운 내 검색 입력 표시 여부 */
|
|
14340
14842
|
useSearch = false;
|
|
14843
|
+
/** 전체 선택 시 표시할 레이블 */
|
|
14341
14844
|
allSelectedLabel = '전체';
|
|
14845
|
+
/** 전체 선택 체크박스 표시 여부 */
|
|
14342
14846
|
useSelectAll = false;
|
|
14343
14847
|
isOpen = false;
|
|
14344
14848
|
isAnimatingOut = false;
|
|
@@ -14347,13 +14851,17 @@ class SdSelect {
|
|
|
14347
14851
|
resolvedMaxDropdownWidth = '640px';
|
|
14348
14852
|
focused = false;
|
|
14349
14853
|
hovered = false;
|
|
14854
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14350
14855
|
update;
|
|
14856
|
+
/** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
|
|
14351
14857
|
dropDownShow;
|
|
14858
|
+
/** 셀렉트 트리거에 포커스를 이동합니다. */
|
|
14352
14859
|
async sdFocus() {
|
|
14353
14860
|
if (this.disabled)
|
|
14354
14861
|
return;
|
|
14355
14862
|
await this.triggerComponentRef?.sdFocus();
|
|
14356
14863
|
}
|
|
14864
|
+
/** 드롭다운을 엽니다. */
|
|
14357
14865
|
async sdOpen() {
|
|
14358
14866
|
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
14359
14867
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
@@ -14368,6 +14876,7 @@ class SdSelect {
|
|
|
14368
14876
|
triggerRef;
|
|
14369
14877
|
triggerComponentRef;
|
|
14370
14878
|
closeAnimationTimer;
|
|
14879
|
+
/** 폼 연동용 name 속성 */
|
|
14371
14880
|
name = nanoid$1();
|
|
14372
14881
|
triggerHasFocus = false;
|
|
14373
14882
|
watchIsOpen(newValue) {
|
|
@@ -14565,15 +15074,15 @@ class SdSelect {
|
|
|
14565
15074
|
this.closeDropdown();
|
|
14566
15075
|
},
|
|
14567
15076
|
};
|
|
14568
|
-
return (hAsync("sd-field", { key: '
|
|
15077
|
+
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: () => {
|
|
14569
15078
|
this.hovered = true;
|
|
14570
15079
|
}, onMouseLeave: () => {
|
|
14571
15080
|
this.hovered = false;
|
|
14572
|
-
} }, hAsync("div", { key: '
|
|
15081
|
+
} }, hAsync("div", { key: '124325f8f6882a3c9ee1a1795ee969f13d67dfe2', class: "sd-select", ref: el => {
|
|
14573
15082
|
this.triggerRef = el;
|
|
14574
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
15083
|
+
} }, hAsync("sd-select-trigger", { key: '2e0e44ae666282d3931f9889650a7999929a312b', ref: el => {
|
|
14575
15084
|
this.triggerComponentRef = el;
|
|
14576
|
-
}, 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: '
|
|
15085
|
+
}, 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) })))));
|
|
14577
15086
|
}
|
|
14578
15087
|
static get watchers() { return {
|
|
14579
15088
|
"isOpen": [{
|
|
@@ -14758,12 +15267,19 @@ class SdSelectListItem {
|
|
|
14758
15267
|
registerInstance(this, hostRef);
|
|
14759
15268
|
this.listItemClick = createEvent(this, "sdListItemClick", 7);
|
|
14760
15269
|
}
|
|
15270
|
+
/** 렌더링할 옵션 데이터 */
|
|
14761
15271
|
option;
|
|
15272
|
+
/** 계층 깊이 (1~3) */
|
|
14762
15273
|
depth = 1;
|
|
15274
|
+
/** 선택 상태 (null=중간) */
|
|
14763
15275
|
isSelected = false;
|
|
15276
|
+
/** 키보드 포커스 상태 여부 */
|
|
14764
15277
|
isFocused = false;
|
|
15278
|
+
/** 체크박스 표시 여부 */
|
|
14765
15279
|
useCheckbox = false;
|
|
15280
|
+
/** 다중 선택 시 (선택/전체) 카운트 */
|
|
14766
15281
|
countInfo;
|
|
15282
|
+
/** 항목 클릭 시 발생합니다. */
|
|
14767
15283
|
listItemClick;
|
|
14768
15284
|
get isGroup() {
|
|
14769
15285
|
return !!this.option.children;
|
|
@@ -14827,7 +15343,7 @@ class SdSelectListItem {
|
|
|
14827
15343
|
return (
|
|
14828
15344
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
14829
15345
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
14830
|
-
hAsync("div", { key: '
|
|
15346
|
+
hAsync("div", { key: '7717c82ea9f36bd44bf8a19d16ba7df6441f6715', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
14831
15347
|
'sd-select-list-item': true,
|
|
14832
15348
|
'sd-select-list-item--group': isGroup,
|
|
14833
15349
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -14837,7 +15353,7 @@ class SdSelectListItem {
|
|
|
14837
15353
|
'sd-select-list-item--focused': this.isFocused,
|
|
14838
15354
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14839
15355
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
14840
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
15356
|
+
}, 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, ")"))));
|
|
14841
15357
|
}
|
|
14842
15358
|
static get style() { return sdSelectListItemCss(); }
|
|
14843
15359
|
static get cmpMeta() { return {
|
|
@@ -14865,9 +15381,12 @@ class SdSelectListItemSearch {
|
|
|
14865
15381
|
this.searchFilter = createEvent(this, "sdSearchFilter", 7);
|
|
14866
15382
|
this.searchFocus = createEvent(this, "sdSearchFocus", 7);
|
|
14867
15383
|
}
|
|
15384
|
+
/** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
|
|
14868
15385
|
isScrolled = false;
|
|
14869
15386
|
searchText = '';
|
|
15387
|
+
/** 검색어가 변경될 때 발생합니다. */
|
|
14870
15388
|
searchFilter;
|
|
15389
|
+
/** 검색 입력에 포커스될 때 발생합니다. */
|
|
14871
15390
|
searchFocus;
|
|
14872
15391
|
inputEl;
|
|
14873
15392
|
debounceTimer;
|
|
@@ -14879,6 +15398,7 @@ class SdSelectListItemSearch {
|
|
|
14879
15398
|
});
|
|
14880
15399
|
});
|
|
14881
15400
|
}
|
|
15401
|
+
/** 검색 입력에 포커스를 이동합니다. */
|
|
14882
15402
|
async sdFocus() {
|
|
14883
15403
|
this.inputEl?.focus();
|
|
14884
15404
|
}
|
|
@@ -14905,15 +15425,15 @@ class SdSelectListItemSearch {
|
|
|
14905
15425
|
clearTimeout(this.debounceTimer);
|
|
14906
15426
|
}
|
|
14907
15427
|
render() {
|
|
14908
|
-
return (hAsync("div", { key: '
|
|
15428
|
+
return (hAsync("div", { key: 'fed1a43f1901d23c7c007a4597b95970c0aad4ad', class: {
|
|
14909
15429
|
'sd-select-list-item-search': true,
|
|
14910
15430
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
14911
|
-
} }, hAsync("div", { key: '
|
|
15431
|
+
} }, 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 => {
|
|
14912
15432
|
this.inputEl = el;
|
|
14913
|
-
}, 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: '
|
|
15433
|
+
}, 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: {
|
|
14914
15434
|
'sd-select-list-item-search__clear': true,
|
|
14915
15435
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
14916
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15436
|
+
}, 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" })))));
|
|
14917
15437
|
}
|
|
14918
15438
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
14919
15439
|
static get cmpMeta() { return {
|
|
@@ -14937,18 +15457,28 @@ class SdSelectListbox {
|
|
|
14937
15457
|
registerInstance(this, hostRef);
|
|
14938
15458
|
this.optionSelect = createEvent(this, "sdOptionSelect", 7);
|
|
14939
15459
|
}
|
|
15460
|
+
/** 셀렉트 타입 */
|
|
14940
15461
|
type = 'default';
|
|
15462
|
+
/** 옵션 목록 */
|
|
14941
15463
|
options = [];
|
|
15464
|
+
/** 현재 선택 값 */
|
|
14942
15465
|
value = null;
|
|
15466
|
+
/** 값만 emit할지 여부 */
|
|
14943
15467
|
emitValue = false;
|
|
15468
|
+
/** 검색 기능 사용 여부 */
|
|
14944
15469
|
useSearch = false;
|
|
15470
|
+
/** 전체 선택 기능 사용 여부 */
|
|
14945
15471
|
useSelectAll = false;
|
|
15472
|
+
/** 트리거 너비 (드롭다운 최소 너비) */
|
|
14946
15473
|
triggerWidth = '200px';
|
|
15474
|
+
/** 드롭다운 최대 너비 */
|
|
14947
15475
|
maxWidth = '640px';
|
|
15476
|
+
/** 드롭다운 최대 높이 */
|
|
14948
15477
|
maxHeight = '260px';
|
|
14949
15478
|
searchKeyword = '';
|
|
14950
15479
|
isScrolled = false;
|
|
14951
15480
|
focusedIndex = -1;
|
|
15481
|
+
/** 옵션 선택 시 발생합니다. */
|
|
14952
15482
|
optionSelect;
|
|
14953
15483
|
listEl;
|
|
14954
15484
|
lastScrolledIndex = -1;
|
|
@@ -15287,9 +15817,9 @@ class SdSelectListbox {
|
|
|
15287
15817
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
15288
15818
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
15289
15819
|
};
|
|
15290
|
-
return (hAsync("div", { key: '
|
|
15820
|
+
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 => {
|
|
15291
15821
|
this.listEl = el;
|
|
15292
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
15822
|
+
} }, 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) })))))));
|
|
15293
15823
|
}
|
|
15294
15824
|
static get watchers() { return {
|
|
15295
15825
|
"searchKeyword": [{
|
|
@@ -15329,14 +15859,22 @@ class SdSelectTrigger {
|
|
|
15329
15859
|
this.triggerFocus = createEvent(this, "sdTriggerFocus", 7);
|
|
15330
15860
|
this.triggerBlur = createEvent(this, "sdTriggerBlur", 7);
|
|
15331
15861
|
}
|
|
15862
|
+
/** 표시할 선택된 값 텍스트 */
|
|
15332
15863
|
displayText = '';
|
|
15864
|
+
/** 미선택 상태 플레이스홀더 */
|
|
15333
15865
|
placeholder = '선택';
|
|
15866
|
+
/** 비활성 상태 여부 */
|
|
15334
15867
|
disabled = false;
|
|
15868
|
+
/** 드롭다운 열림 상태 */
|
|
15335
15869
|
isOpen = false;
|
|
15870
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
15336
15871
|
triggerClick;
|
|
15872
|
+
/** 트리거 포커스 시 발생합니다. */
|
|
15337
15873
|
triggerFocus;
|
|
15874
|
+
/** 트리거 블러 시 발생합니다. */
|
|
15338
15875
|
triggerBlur;
|
|
15339
15876
|
triggerEl;
|
|
15877
|
+
/** 트리거 엘리먼트에 포커스를 이동합니다. */
|
|
15340
15878
|
async sdFocus() {
|
|
15341
15879
|
if (this.disabled)
|
|
15342
15880
|
return;
|
|
@@ -15370,7 +15908,7 @@ class SdSelectTrigger {
|
|
|
15370
15908
|
? SELECT_COLORS.icon.disabled
|
|
15371
15909
|
: SELECT_COLORS.icon.default,
|
|
15372
15910
|
};
|
|
15373
|
-
return (hAsync("div", { key: '
|
|
15911
|
+
return (hAsync("div", { key: '7f5940ce19feb2d3ae9b2cbb6b5fdeb6d0151f61', ref: el => {
|
|
15374
15912
|
this.triggerEl = el;
|
|
15375
15913
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
15376
15914
|
'sd-select-trigger': true,
|
|
@@ -15381,7 +15919,7 @@ class SdSelectTrigger {
|
|
|
15381
15919
|
e.preventDefault();
|
|
15382
15920
|
this.handleClick();
|
|
15383
15921
|
}
|
|
15384
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
15922
|
+
}, 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: {
|
|
15385
15923
|
'sd-select-trigger__icon': true,
|
|
15386
15924
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
15387
15925
|
} }))));
|
|
@@ -15466,9 +16004,13 @@ class SdSwitch {
|
|
|
15466
16004
|
registerInstance(this, hostRef);
|
|
15467
16005
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
15468
16006
|
}
|
|
16007
|
+
/** 현재 on/off 상태 */
|
|
15469
16008
|
value = false;
|
|
16009
|
+
/** 표시할 라벨 텍스트 */
|
|
15470
16010
|
label = '';
|
|
16011
|
+
/** 비활성 상태 여부 */
|
|
15471
16012
|
disabled = false;
|
|
16013
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
15472
16014
|
change;
|
|
15473
16015
|
get switchClasses() {
|
|
15474
16016
|
const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
|
|
@@ -15506,7 +16048,7 @@ class SdSwitch {
|
|
|
15506
16048
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
15507
16049
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
15508
16050
|
};
|
|
15509
|
-
return (hAsync("label", { key: '
|
|
16051
|
+
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)));
|
|
15510
16052
|
}
|
|
15511
16053
|
static get style() { return sdSwitchCss(); }
|
|
15512
16054
|
static get cmpMeta() { return {
|
|
@@ -15629,28 +16171,48 @@ class SdTable {
|
|
|
15629
16171
|
}
|
|
15630
16172
|
static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
|
|
15631
16173
|
get el() { return getElement(this); }
|
|
16174
|
+
/** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
|
|
15632
16175
|
tableId = nanoid(8);
|
|
15633
16176
|
fallbackTableId = nanoid(8);
|
|
16177
|
+
/** 컬럼 정의 목록 */
|
|
15634
16178
|
columns = [];
|
|
16179
|
+
/** 행 데이터 배열 */
|
|
15635
16180
|
rows;
|
|
16181
|
+
/** 현재 선택된 행 목록 */
|
|
15636
16182
|
selected = [];
|
|
16183
|
+
/** 행 고유 식별 필드명 */
|
|
15637
16184
|
rowKey = 'id';
|
|
16185
|
+
/** 행 선택(체크박스) 기능 활성화 여부 */
|
|
15638
16186
|
selectable = false;
|
|
16187
|
+
/** 컬럼 너비 조절 기능 활성화 여부 */
|
|
15639
16188
|
resizable = false;
|
|
16189
|
+
/** 테이블 너비 */
|
|
15640
16190
|
width;
|
|
16191
|
+
/** 테이블 높이 */
|
|
15641
16192
|
height;
|
|
16193
|
+
/** 헤더 고정(sticky) 여부 */
|
|
15642
16194
|
stickyHeader = false;
|
|
16195
|
+
/** 고정할 좌우 컬럼 수 */
|
|
15643
16196
|
stickyColumn = { left: 0, right: 0 };
|
|
16197
|
+
/** border-radius 제어 */
|
|
15644
16198
|
radius = 'default';
|
|
16199
|
+
/** 데이터 없을 때 표시할 메시지 */
|
|
15645
16200
|
noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
15646
16201
|
resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
16202
|
+
/** 로딩 스피너 표시 여부 */
|
|
15647
16203
|
isLoading = false;
|
|
16204
|
+
/** 페이지네이션 옵션 */
|
|
15648
16205
|
pagination;
|
|
16206
|
+
/** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
|
|
15649
16207
|
useInternalPagination = false;
|
|
16208
|
+
/** 페이지당 행 수 선택 셀렉트 표시 여부 */
|
|
15650
16209
|
useRowsPerPageSelect = false;
|
|
16210
|
+
/** 행 높이를 줄인 조밀 모드 여부 */
|
|
15651
16211
|
dense = false;
|
|
15652
16212
|
// ─── Virtual Scroll ───────────────────────────────────────────────
|
|
16213
|
+
/** 가상 스크롤 사용 여부 */
|
|
15653
16214
|
useVirtualScroll = false;
|
|
16215
|
+
/** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
|
|
15654
16216
|
rowHeight;
|
|
15655
16217
|
get effectiveRowHeight() {
|
|
15656
16218
|
if (this.rowHeight != null)
|
|
@@ -15659,19 +16221,27 @@ class SdTable {
|
|
|
15659
16221
|
? Number(TABLE_BODY_LAYOUT.dense.height)
|
|
15660
16222
|
: Number(TABLE_BODY_LAYOUT.default.height);
|
|
15661
16223
|
}
|
|
16224
|
+
/** 가상 스크롤 상하 버퍼 행 수 */
|
|
15662
16225
|
virtualBuffer = 5;
|
|
16226
|
+
/** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
|
|
15663
16227
|
virtualEndThreshold = 10;
|
|
15664
16228
|
// ─────────────────────────────────────────────────────────────────
|
|
16229
|
+
/** 페이지당 행 수 선택 옵션 목록 */
|
|
15665
16230
|
rowsPerPageOption = [
|
|
15666
16231
|
{ label: '10개씩 보기', value: 10 },
|
|
15667
16232
|
{ label: '25개씩 보기', value: 25 },
|
|
15668
16233
|
{ label: '50개씩 보기', value: 50 },
|
|
15669
16234
|
{ label: '100개씩 보기', value: 100 },
|
|
15670
16235
|
];
|
|
16236
|
+
/** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
|
|
15671
16237
|
sdSelectChange;
|
|
16238
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
15672
16239
|
sdPageChange;
|
|
16240
|
+
/** 페이지당 행 수가 변경될 때 발생합니다. */
|
|
15673
16241
|
sdRowsPerPageChange;
|
|
16242
|
+
/** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
|
|
15674
16243
|
sdVirtualUpdate;
|
|
16244
|
+
/** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
|
|
15675
16245
|
sdVirtualReachEnd;
|
|
15676
16246
|
currentPage = 1;
|
|
15677
16247
|
innerRowsPerPage = 10;
|
|
@@ -16076,6 +16646,7 @@ class SdTable {
|
|
|
16076
16646
|
isRowSelectedSync(row) {
|
|
16077
16647
|
return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
|
|
16078
16648
|
}
|
|
16649
|
+
/** 행이 선택되어 있는지 확인합니다. */
|
|
16079
16650
|
async isRowSelected(row) {
|
|
16080
16651
|
return this.isRowSelectedSync(row);
|
|
16081
16652
|
}
|
|
@@ -16092,6 +16663,7 @@ class SdTable {
|
|
|
16092
16663
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16093
16664
|
this.refreshChildrenSelection();
|
|
16094
16665
|
}
|
|
16666
|
+
/** 행 선택 상태를 토글합니다. */
|
|
16095
16667
|
async updateRowSelect(row) {
|
|
16096
16668
|
this.updateRowSelectSync(row);
|
|
16097
16669
|
}
|
|
@@ -16108,6 +16680,7 @@ class SdTable {
|
|
|
16108
16680
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16109
16681
|
this.refreshChildrenSelection();
|
|
16110
16682
|
}
|
|
16683
|
+
/** 전체 행 선택/해제를 처리합니다. */
|
|
16111
16684
|
async toggleSelectAll(checked, rows) {
|
|
16112
16685
|
this.toggleSelectAllSync(checked, rows);
|
|
16113
16686
|
}
|
|
@@ -16120,6 +16693,7 @@ class SdTable {
|
|
|
16120
16693
|
return true;
|
|
16121
16694
|
return null; // indeterminate
|
|
16122
16695
|
}
|
|
16696
|
+
/** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
|
|
16123
16697
|
async getIsAllChecked(rows) {
|
|
16124
16698
|
return this.getIsAllCheckedSync(rows);
|
|
16125
16699
|
}
|
|
@@ -16210,6 +16784,7 @@ class SdTable {
|
|
|
16210
16784
|
}
|
|
16211
16785
|
return base;
|
|
16212
16786
|
}
|
|
16787
|
+
/** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
|
|
16213
16788
|
async getStickyStyle(colIdx) {
|
|
16214
16789
|
return this.getStickyStyleSync(colIdx);
|
|
16215
16790
|
}
|
|
@@ -16349,6 +16924,7 @@ class SdTable {
|
|
|
16349
16924
|
this.propagateVirtualUpdate(true);
|
|
16350
16925
|
}
|
|
16351
16926
|
}
|
|
16927
|
+
/** 가상 스크롤 총 행 수를 설정합니다. */
|
|
16352
16928
|
async setRowCount(count) {
|
|
16353
16929
|
this.setRowCountSync(count);
|
|
16354
16930
|
}
|
|
@@ -16376,6 +16952,7 @@ class SdTable {
|
|
|
16376
16952
|
rowsPerPage: this.innerRowsPerPage,
|
|
16377
16953
|
};
|
|
16378
16954
|
}
|
|
16955
|
+
/** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
|
|
16379
16956
|
async getPaginationInfo() {
|
|
16380
16957
|
return this.getPaginationInfoSync();
|
|
16381
16958
|
}
|
|
@@ -16439,25 +17016,25 @@ class SdTable {
|
|
|
16439
17016
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
16440
17017
|
'--table-host-height': hostHeight,
|
|
16441
17018
|
};
|
|
16442
|
-
return (hAsync(Host, { key: '
|
|
17019
|
+
return (hAsync(Host, { key: '2606b0d7fc3657a8021a6dfc64672996b756f762', style: hostStyle }, hAsync("div", { key: '4def416edfe630ead35b80cb2f04081a89740f62', class: "sd-table__container", style: {
|
|
16443
17020
|
'--table-width': this.width,
|
|
16444
17021
|
'--pagination-height': `${paginationHeight}px`,
|
|
16445
|
-
} }, hAsync("div", { key: '
|
|
17022
|
+
} }, hAsync("div", { key: '316a359f2be84895719f452e056dcd2f54cd5b56', class: {
|
|
16446
17023
|
'sd-table__wrapper': true,
|
|
16447
17024
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
16448
17025
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
16449
|
-
} }, hAsync("div", { key: '
|
|
17026
|
+
} }, hAsync("div", { key: 'e798b58104f56b3250a7d74261a8c320a8049f28', class: {
|
|
16450
17027
|
'sd-table__scroll-container': true,
|
|
16451
17028
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
16452
17029
|
'sd-table__scroll-container--no-data': isNoData,
|
|
16453
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
17030
|
+
} }, 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 => {
|
|
16454
17031
|
this.noDataContentEl = el;
|
|
16455
17032
|
if (el)
|
|
16456
17033
|
this.syncNoDataContentObserver();
|
|
16457
|
-
} }, hAsync("slot", { key: '
|
|
17034
|
+
} }, 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 &&
|
|
16458
17035
|
this.pagination.rowsPerPage > 0 &&
|
|
16459
17036
|
this.rowCount > 0 &&
|
|
16460
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
17037
|
+
!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
|
|
16461
17038
|
? this.innerRowsPerPage
|
|
16462
17039
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
16463
17040
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -16691,11 +17268,17 @@ class SdTabs {
|
|
|
16691
17268
|
registerInstance(this, hostRef);
|
|
16692
17269
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
16693
17270
|
}
|
|
17271
|
+
/** 현재 선택된 탭 value */
|
|
16694
17272
|
value;
|
|
17273
|
+
/** 탭 옵션 목록 */
|
|
16695
17274
|
tabs = [];
|
|
17275
|
+
/** 탭 크기 */
|
|
16696
17276
|
size = 'md';
|
|
17277
|
+
/** true이면 서브 탭 스타일 적용 */
|
|
16697
17278
|
isSub = false;
|
|
17279
|
+
/** true이면 탭을 세로로 배치 */
|
|
16698
17280
|
vertical = false;
|
|
17281
|
+
/** 탭이 변경될 때 새 value를 전달합니다. */
|
|
16699
17282
|
update;
|
|
16700
17283
|
valueChanged(newValue) {
|
|
16701
17284
|
this.value = newValue;
|
|
@@ -16762,7 +17345,7 @@ class SdTabs {
|
|
|
16762
17345
|
};
|
|
16763
17346
|
}
|
|
16764
17347
|
render() {
|
|
16765
|
-
return (hAsync("div", { key: '
|
|
17348
|
+
return (hAsync("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
16766
17349
|
const badgeName = this.getBadgeName(tab);
|
|
16767
17350
|
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 => {
|
|
16768
17351
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -16975,11 +17558,14 @@ class SdTag {
|
|
|
16975
17558
|
constructor(hostRef) {
|
|
16976
17559
|
registerInstance(this, hostRef);
|
|
16977
17560
|
}
|
|
17561
|
+
/** 태그 프리셋 이름 */
|
|
16978
17562
|
name = 'square_sm_grey';
|
|
17563
|
+
/** 표시할 레이블 텍스트 */
|
|
16979
17564
|
label = '';
|
|
17565
|
+
/** 아이콘명 */
|
|
16980
17566
|
icon;
|
|
16981
17567
|
// 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
16982
|
-
|
|
17568
|
+
/** true이면 아이콘을 레이블 왼쪽에 배치 */
|
|
16983
17569
|
isLeft = true;
|
|
16984
17570
|
componentWillLoad() {
|
|
16985
17571
|
this.name = this.name ?? 'square_sm_grey';
|
|
@@ -17001,7 +17587,7 @@ class SdTag {
|
|
|
17001
17587
|
render() {
|
|
17002
17588
|
const config = this.resolvedConfig;
|
|
17003
17589
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
17004
|
-
return (hAsync("span", { key: '
|
|
17590
|
+
return (hAsync("span", { key: '09cc181654983b64dec9860fdf656677ebcfcd15', class: "sd-tag", style: {
|
|
17005
17591
|
'--sd-tag-background': config.background,
|
|
17006
17592
|
'--sd-tag-content': config.content,
|
|
17007
17593
|
'--sd-tag-height': config.height,
|
|
@@ -17011,7 +17597,7 @@ class SdTag {
|
|
|
17011
17597
|
'--sd-tag-font-weight': config.fontWeight,
|
|
17012
17598
|
'--sd-tag-line-height': config.lineHeight,
|
|
17013
17599
|
'--sd-tag-radius': config.radius,
|
|
17014
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
17600
|
+
}, "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));
|
|
17015
17601
|
}
|
|
17016
17602
|
static get style() { return sdTagCss(); }
|
|
17017
17603
|
static get cmpMeta() { return {
|
|
@@ -17036,6 +17622,7 @@ class SdTbody {
|
|
|
17036
17622
|
registerInstance(this, hostRef);
|
|
17037
17623
|
}
|
|
17038
17624
|
get el() { return getElement(this); }
|
|
17625
|
+
/** 렌더링할 행 데이터 목록 */
|
|
17039
17626
|
rows = [];
|
|
17040
17627
|
tableId = '';
|
|
17041
17628
|
topSpacerHeight = 0;
|
|
@@ -17079,9 +17666,9 @@ class SdTbody {
|
|
|
17079
17666
|
}
|
|
17080
17667
|
}
|
|
17081
17668
|
render() {
|
|
17082
|
-
return (hAsync(Host, { key: '
|
|
17669
|
+
return (hAsync(Host, { key: '0f85168b22221551714f3c75bd12c366538cc5ec', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'f9a8528d40c51988cfbca2c349905dafdafce8d3', class: { tbody: true } }, [
|
|
17083
17670
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
17084
|
-
hAsync("slot", { key: '
|
|
17671
|
+
hAsync("slot", { key: '7ecfe2f730b4c909d394fdee2d9aa015c5410cb4' }),
|
|
17085
17672
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
17086
17673
|
])));
|
|
17087
17674
|
}
|
|
@@ -17113,18 +17700,27 @@ class SdTd {
|
|
|
17113
17700
|
registerInstance(this, hostRef);
|
|
17114
17701
|
}
|
|
17115
17702
|
get el() { return getElement(this); }
|
|
17703
|
+
/** 데이터 필드명 (슬롯 이름 생성에 사용) */
|
|
17116
17704
|
field;
|
|
17705
|
+
/** 행 식별 키 */
|
|
17117
17706
|
rowKey;
|
|
17707
|
+
/** 셀 내용 정렬 */
|
|
17118
17708
|
align;
|
|
17709
|
+
/** 행 병합 수 */
|
|
17119
17710
|
rowspan;
|
|
17711
|
+
/** 열 병합 수 */
|
|
17120
17712
|
colspan;
|
|
17121
17713
|
// sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
|
|
17122
17714
|
// <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
|
|
17123
17715
|
// 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
|
|
17716
|
+
/** td에 병합할 사용자 클래스 */
|
|
17124
17717
|
sdClass;
|
|
17718
|
+
/** 좌측 구분선 표시 여부 */
|
|
17125
17719
|
dividerLeft = false;
|
|
17720
|
+
/** 우측 구분선 표시 여부 */
|
|
17126
17721
|
dividerRight = false;
|
|
17127
17722
|
// true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
|
|
17723
|
+
/** frame 레이아웃 사용 여부 */
|
|
17128
17724
|
useFrame = false;
|
|
17129
17725
|
handleFieldChange(_newField, oldField) {
|
|
17130
17726
|
this.syncSlotName();
|
|
@@ -17256,7 +17852,7 @@ class SdTd {
|
|
|
17256
17852
|
}
|
|
17257
17853
|
}
|
|
17258
17854
|
render() {
|
|
17259
|
-
return (hAsync(Host, { key: '
|
|
17855
|
+
return (hAsync(Host, { key: 'd7cea28b006a4903fab00e7a709252e6009f911f', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '1d8695ff6c6890838e4b18ec4da1d7ff6a5c8858' })));
|
|
17260
17856
|
}
|
|
17261
17857
|
static get watchers() { return {
|
|
17262
17858
|
"field": [{
|
|
@@ -17421,14 +18017,23 @@ class SdTextLink {
|
|
|
17421
18017
|
registerInstance(this, hostRef);
|
|
17422
18018
|
this.click = createEvent(this, "sdClick", 7);
|
|
17423
18019
|
}
|
|
18020
|
+
/** 표시할 레이블 텍스트 */
|
|
17424
18021
|
label = '';
|
|
18022
|
+
/** 좌측 아이콘명 */
|
|
17425
18023
|
icon = '';
|
|
18024
|
+
/** 좌측 아이콘 색상 */
|
|
17426
18025
|
iconColor = '';
|
|
18026
|
+
/** 레이블 span에 추가할 클래스 */
|
|
17427
18027
|
labelClass = '';
|
|
18028
|
+
/** 우측 화살표 타입 */
|
|
17428
18029
|
rightArrow = 'none';
|
|
18030
|
+
/** 밑줄 스타일 여부 */
|
|
17429
18031
|
underline = false;
|
|
18032
|
+
/** 비활성 상태 여부 */
|
|
17430
18033
|
disabled = false;
|
|
18034
|
+
/** 텍스트 크기 */
|
|
17431
18035
|
size = 'sm';
|
|
18036
|
+
/** 클릭 시 발생합니다. */
|
|
17432
18037
|
click;
|
|
17433
18038
|
handleClick = () => {
|
|
17434
18039
|
if (this.disabled)
|
|
@@ -17450,7 +18055,7 @@ class SdTextLink {
|
|
|
17450
18055
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
17451
18056
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
17452
18057
|
};
|
|
17453
|
-
return (hAsync("span", { key: '
|
|
18058
|
+
return (hAsync("span", { key: '1b58c27c2754182b1fc6249e7e4bf52f42d1d11d', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
17454
18059
|
'sd-text-link': true,
|
|
17455
18060
|
'sd-text-link--disabled': this.disabled,
|
|
17456
18061
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -17458,13 +18063,13 @@ class SdTextLink {
|
|
|
17458
18063
|
e.preventDefault();
|
|
17459
18064
|
this.handleClick();
|
|
17460
18065
|
}
|
|
17461
|
-
} }, this.icon && (hAsync("sd-icon", { key: '
|
|
18066
|
+
} }, 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: {
|
|
17462
18067
|
width: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17463
18068
|
height: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17464
18069
|
display: 'inline-flex',
|
|
17465
18070
|
alignItems: 'center',
|
|
17466
18071
|
justifyContent: 'center',
|
|
17467
|
-
} }, hAsync("sd-icon", { key: '
|
|
18072
|
+
} }, hAsync("sd-icon", { key: '605572568dd4c2b6dcde9c932d5593e5fdb916a4', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
|
|
17468
18073
|
}
|
|
17469
18074
|
static get style() { return sdTextLinkCss(); }
|
|
17470
18075
|
static get cmpMeta() { return {
|
|
@@ -17510,38 +18115,67 @@ class SdTextarea {
|
|
|
17510
18115
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
17511
18116
|
}
|
|
17512
18117
|
get host() { return getElement(this); }
|
|
18118
|
+
/** 입력 값 */
|
|
17513
18119
|
value = null;
|
|
18120
|
+
/** 플레이스홀더 텍스트 */
|
|
17514
18121
|
placeholder = '입력해 주세요.';
|
|
18122
|
+
/** 비활성 상태 여부 */
|
|
17515
18123
|
disabled = false;
|
|
18124
|
+
/** 읽기 전용 여부 */
|
|
17516
18125
|
readonly = false;
|
|
18126
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
17517
18127
|
autoFocus = false;
|
|
18128
|
+
/** 네이티브 textarea에 추가할 클래스 */
|
|
17518
18129
|
textareaClass = '';
|
|
18130
|
+
/** 네이티브 textarea에 적용할 인라인 스타일 */
|
|
17519
18131
|
textareaStyle = {};
|
|
18132
|
+
/** 최대 입력 글자 수 */
|
|
17520
18133
|
maxLength;
|
|
18134
|
+
/** textarea 기본 행 수 */
|
|
17521
18135
|
rows;
|
|
18136
|
+
/** 맞춤법 검사 여부 */
|
|
17522
18137
|
spellcheck = false;
|
|
18138
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
17523
18139
|
width = '';
|
|
17524
18140
|
// props - sd-field
|
|
18141
|
+
/** 레이블 텍스트 */
|
|
17525
18142
|
label = '';
|
|
18143
|
+
/** 레이블 너비 */
|
|
17526
18144
|
labelWidth = '';
|
|
18145
|
+
/** 필드 우측 어드온 레이블 */
|
|
17527
18146
|
addonLabel = '';
|
|
18147
|
+
/** 어드온 정렬 방향 */
|
|
17528
18148
|
addonAlign = 'start';
|
|
18149
|
+
/** 필드 하단 힌트 텍스트 */
|
|
17529
18150
|
hint = '';
|
|
18151
|
+
/** 에러 메시지 */
|
|
17530
18152
|
errorMessage = '';
|
|
18153
|
+
/** 레이블 영역 아이콘 */
|
|
17531
18154
|
icon = undefined;
|
|
18155
|
+
/** 레이블 툴팁 텍스트 */
|
|
17532
18156
|
labelTooltip = '';
|
|
18157
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
17533
18158
|
labelTooltipProps = null;
|
|
18159
|
+
/** 유효성 검사 규칙 목록 */
|
|
17534
18160
|
rules = [];
|
|
18161
|
+
/** 에러 상태 여부 */
|
|
17535
18162
|
error = false;
|
|
18163
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
17536
18164
|
status;
|
|
18165
|
+
/** 포커스 상태 여부 */
|
|
17537
18166
|
focused = false;
|
|
18167
|
+
/** 호버 상태 여부 */
|
|
17538
18168
|
hovered = false;
|
|
17539
18169
|
internalValue = null;
|
|
17540
18170
|
nativeEl = undefined;
|
|
17541
18171
|
formField;
|
|
18172
|
+
/** 폼 연동용 name 속성 */
|
|
17542
18173
|
name = nanoid$1();
|
|
18174
|
+
/** 값이 변경될 때 발생합니다. */
|
|
17543
18175
|
input;
|
|
18176
|
+
/** 포커스될 때 발생합니다. */
|
|
17544
18177
|
focus;
|
|
18178
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
17545
18179
|
blur;
|
|
17546
18180
|
valueChanged(newValue) {
|
|
17547
18181
|
this.internalValue = newValue;
|
|
@@ -17552,18 +18186,23 @@ class SdTextarea {
|
|
|
17552
18186
|
this.input?.emit(this.value);
|
|
17553
18187
|
}
|
|
17554
18188
|
}
|
|
18189
|
+
/** 네이티브 textarea 엘리먼트를 반환합니다. */
|
|
17555
18190
|
async sdGetNativeElement() {
|
|
17556
18191
|
return this.nativeEl || null;
|
|
17557
18192
|
}
|
|
18193
|
+
/** 유효성 검사를 실행합니다. */
|
|
17558
18194
|
async sdValidate() {
|
|
17559
18195
|
this.formField?.sdValidate();
|
|
17560
18196
|
}
|
|
18197
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
17561
18198
|
async sdReset() {
|
|
17562
18199
|
this.formField?.sdReset();
|
|
17563
18200
|
}
|
|
18201
|
+
/** 유효성 상태만 초기화합니다. */
|
|
17564
18202
|
async sdResetValidate() {
|
|
17565
18203
|
this.formField?.sdResetValidation();
|
|
17566
18204
|
}
|
|
18205
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
17567
18206
|
async sdFocus() {
|
|
17568
18207
|
this.formField?.sdFocus();
|
|
17569
18208
|
}
|
|
@@ -17612,7 +18251,7 @@ class SdTextarea {
|
|
|
17612
18251
|
'--sd-system-size-field-sm-height': 'auto',
|
|
17613
18252
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
17614
18253
|
};
|
|
17615
|
-
return (hAsync("sd-field", { key: '
|
|
18254
|
+
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 }))));
|
|
17616
18255
|
}
|
|
17617
18256
|
static get watchers() { return {
|
|
17618
18257
|
"value": [{
|
|
@@ -17674,15 +18313,25 @@ class SdThead {
|
|
|
17674
18313
|
this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
|
|
17675
18314
|
}
|
|
17676
18315
|
get el() { return getElement(this); }
|
|
18316
|
+
/** 테이블 컬럼 목록 */
|
|
17677
18317
|
columns;
|
|
18318
|
+
/** 행 선택 기능 사용 여부 */
|
|
17678
18319
|
selectable;
|
|
18320
|
+
/** 컬럼 너비 조절 가능 여부 */
|
|
17679
18321
|
resizable;
|
|
18322
|
+
/** 고정 컬럼 설정 */
|
|
17680
18323
|
stickyColumn;
|
|
18324
|
+
/** 헤더 고정 여부 */
|
|
17681
18325
|
stickyHeader;
|
|
18326
|
+
/** 좌측 스크롤 여부 */
|
|
17682
18327
|
scrolledLeft;
|
|
18328
|
+
/** 우측 스크롤 여부 */
|
|
17683
18329
|
scrolledRight;
|
|
18330
|
+
/** 전체 선택 체크박스용 행 데이터 */
|
|
17684
18331
|
rows = [];
|
|
18332
|
+
/** 컬럼 너비 목록 */
|
|
17685
18333
|
columnWidths = [];
|
|
18334
|
+
/** 컬럼 정렬 버튼 클릭 시 발생합니다. */
|
|
17686
18335
|
sdColumnSort;
|
|
17687
18336
|
tableId = '';
|
|
17688
18337
|
_columns = [];
|
|
@@ -17748,12 +18397,15 @@ class SdThead {
|
|
|
17748
18397
|
this.columnWidths = [];
|
|
17749
18398
|
}
|
|
17750
18399
|
}
|
|
18400
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
17751
18401
|
async refreshConfig() {
|
|
17752
18402
|
this.resolveConfig();
|
|
17753
18403
|
}
|
|
18404
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
17754
18405
|
async setColumnWidths(widths) {
|
|
17755
18406
|
this.columnWidths = Array.isArray(widths) ? widths : [];
|
|
17756
18407
|
}
|
|
18408
|
+
/** 전체 선택 체크박스 상태를 갱신합니다. */
|
|
17757
18409
|
async refreshSelection() {
|
|
17758
18410
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
17759
18411
|
if (checkbox) {
|
|
@@ -17829,16 +18481,16 @@ class SdThead {
|
|
|
17829
18481
|
'--table-border-color': TABLE_BORDER.color,
|
|
17830
18482
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
17831
18483
|
};
|
|
17832
|
-
return (hAsync(Host, { key: '
|
|
18484
|
+
return (hAsync(Host, { key: '26981191de95775401cad61e80fbf1e22cb0250b', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a53d430f1b71a45b98de2912b563d3f17cd20b24', class: {
|
|
17833
18485
|
'thead': true,
|
|
17834
18486
|
'thead--sticky': this._stickyHeader,
|
|
17835
|
-
} }, hAsync("tr", { key: '
|
|
18487
|
+
} }, hAsync("tr", { key: '27ce13b70bfda4b210b36eb746fb60d369d9f5be', class: "tr" }, this._selectable && (hAsync("th", { key: 'e353b00c7a02b82781e5107b1fd73dc556427edf', class: {
|
|
17836
18488
|
'th': true,
|
|
17837
18489
|
'th--selected': true,
|
|
17838
18490
|
'sticky-left': true,
|
|
17839
18491
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17840
18492
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17841
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
18493
|
+
}, 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: {
|
|
17842
18494
|
'th': true,
|
|
17843
18495
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
17844
18496
|
'sticky-left': true,
|
|
@@ -17973,14 +18625,23 @@ class SdToast {
|
|
|
17973
18625
|
this.close = createEvent(this, "sdClose", 7);
|
|
17974
18626
|
this.buttonClick = createEvent(this, "sdButtonClick", 7);
|
|
17975
18627
|
}
|
|
18628
|
+
/** 좌측 아이콘명 */
|
|
17976
18629
|
icon;
|
|
18630
|
+
/** 표시할 메시지 */
|
|
17977
18631
|
message;
|
|
18632
|
+
/** 우측 링크 URL */
|
|
17978
18633
|
link;
|
|
18634
|
+
/** 링크 표시 레이블 (없으면 URL 표시) */
|
|
17979
18635
|
linkLabel;
|
|
18636
|
+
/** 우측 버튼 레이블 */
|
|
17980
18637
|
buttonLabel;
|
|
18638
|
+
/** 닫기 버튼 표시 여부 */
|
|
17981
18639
|
useClose = false;
|
|
18640
|
+
/** 토스트 타입 (색상/아이콘 프리셋) */
|
|
17982
18641
|
type = 'default';
|
|
18642
|
+
/** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
|
|
17983
18643
|
close;
|
|
18644
|
+
/** 우측 버튼 클릭 시 발생합니다. */
|
|
17984
18645
|
buttonClick;
|
|
17985
18646
|
render() {
|
|
17986
18647
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
@@ -17989,12 +18650,12 @@ class SdToast {
|
|
|
17989
18650
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
17990
18651
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
17991
18652
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
17992
|
-
return (hAsync("div", { key: '
|
|
18653
|
+
return (hAsync("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
|
|
17993
18654
|
'--sd-toast-bg': typeConfig.bg,
|
|
17994
18655
|
'--sd-toast-text': typeConfig.content,
|
|
17995
18656
|
'--sd-toast-icon': iconColor,
|
|
17996
18657
|
'--sd-toast-link': linkColor,
|
|
17997
|
-
} }, hAsync("div", { key: '
|
|
18658
|
+
} }, 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() })))));
|
|
17998
18659
|
}
|
|
17999
18660
|
static get style() { return sdToastCss(); }
|
|
18000
18661
|
static get cmpMeta() { return {
|
|
@@ -18034,15 +18695,22 @@ class SdToastContainer {
|
|
|
18034
18695
|
this.toastDismiss = createEvent(this, "sdToastDismiss", 7);
|
|
18035
18696
|
}
|
|
18036
18697
|
get el() { return getElement(this); }
|
|
18698
|
+
/** 토스트 표시 위치 */
|
|
18037
18699
|
position = 'bottom-center';
|
|
18700
|
+
/** 동시에 표시할 최대 토스트 수 */
|
|
18038
18701
|
maxVisible = DEFAULT_MAX_VISIBLE;
|
|
18702
|
+
/** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
|
|
18039
18703
|
defaultDuration = DEFAULT_DURATION;
|
|
18704
|
+
/** z-index */
|
|
18040
18705
|
zIndex = DEFAULT_Z_INDEX;
|
|
18041
18706
|
toasts = [];
|
|
18042
18707
|
expanded = false;
|
|
18043
18708
|
toastRefs = new Map();
|
|
18709
|
+
/** 토스트가 표시될 때 발생합니다. */
|
|
18044
18710
|
toastShow;
|
|
18711
|
+
/** 토스트가 제거될 때 발생합니다. */
|
|
18045
18712
|
toastDismiss;
|
|
18713
|
+
/** 토스트를 생성하고 ID를 반환합니다. */
|
|
18046
18714
|
async create(options) {
|
|
18047
18715
|
const id = `toast-${++toastIdCounter}`;
|
|
18048
18716
|
const entry = { id, options, state: 'entering' };
|
|
@@ -18067,9 +18735,11 @@ class SdToastContainer {
|
|
|
18067
18735
|
this.toastShow.emit({ id });
|
|
18068
18736
|
return id;
|
|
18069
18737
|
}
|
|
18738
|
+
/** 지정한 ID의 토스트를 닫습니다. */
|
|
18070
18739
|
async dismiss(id) {
|
|
18071
18740
|
this.startDismiss(id);
|
|
18072
18741
|
}
|
|
18742
|
+
/** 모든 토스트를 닫습니다. */
|
|
18073
18743
|
async dismissAll() {
|
|
18074
18744
|
(this.toasts || []).forEach(t => this.startDismiss(t.id));
|
|
18075
18745
|
}
|
|
@@ -18247,7 +18917,7 @@ class SdToastContainer {
|
|
|
18247
18917
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
18248
18918
|
const indexMap = new Map();
|
|
18249
18919
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
18250
|
-
return (hAsync("div", { key: '
|
|
18920
|
+
return (hAsync("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
18251
18921
|
this.expanded = true;
|
|
18252
18922
|
this.pauseTimers();
|
|
18253
18923
|
}, onMouseLeave: () => {
|
|
@@ -18361,9 +19031,13 @@ class SdToggle {
|
|
|
18361
19031
|
registerInstance(this, hostRef);
|
|
18362
19032
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
18363
19033
|
}
|
|
19034
|
+
/** 현재 선택 상태 */
|
|
18364
19035
|
value = false;
|
|
19036
|
+
/** 표시할 레이블 텍스트 */
|
|
18365
19037
|
label = '';
|
|
19038
|
+
/** 비활성 상태 여부 */
|
|
18366
19039
|
disabled = false;
|
|
19040
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
18367
19041
|
change;
|
|
18368
19042
|
get toggleClasses() {
|
|
18369
19043
|
const classes = ['sd-toggle'];
|
|
@@ -18405,7 +19079,7 @@ class SdToggle {
|
|
|
18405
19079
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
18406
19080
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
18407
19081
|
};
|
|
18408
|
-
return (hAsync("label", { key: '
|
|
19082
|
+
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 })));
|
|
18409
19083
|
}
|
|
18410
19084
|
static get style() { return sdToggleCss(); }
|
|
18411
19085
|
static get cmpMeta() { return {
|
|
@@ -18454,19 +19128,33 @@ class SdTooltip {
|
|
|
18454
19128
|
registerInstance(this, hostRef);
|
|
18455
19129
|
}
|
|
18456
19130
|
get el() { return getElement(this); }
|
|
19131
|
+
/** 툴팁 트리거 방식 */
|
|
18457
19132
|
trigger = 'hover';
|
|
19133
|
+
/** 툴팁 표시 방향 */
|
|
18458
19134
|
placement = 'top';
|
|
19135
|
+
/** 아이콘 트리거 색상 */
|
|
18459
19136
|
color = '#01BB4B';
|
|
19137
|
+
/** 툴팁 배경/텍스트 색상 타입 */
|
|
18460
19138
|
tooltipType = 'default';
|
|
19139
|
+
/** 아이콘 트리거 아이콘명 */
|
|
18461
19140
|
icon = 'helpOutline';
|
|
19141
|
+
/** 아이콘 트리거 크기 */
|
|
18462
19142
|
iconSize = 12;
|
|
19143
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
18463
19144
|
label = '';
|
|
19145
|
+
/** 버튼 트리거 프리셋 */
|
|
18464
19146
|
name = 'primary_sm';
|
|
19147
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
18465
19148
|
rightIcon;
|
|
19149
|
+
/** 스크린리더용 접근성 레이블 */
|
|
18466
19150
|
ariaLabel = '';
|
|
19151
|
+
/** 비활성 상태 여부 */
|
|
18467
19152
|
disabled = false;
|
|
19153
|
+
/** 버튼 type 속성 */
|
|
18468
19154
|
type = 'button';
|
|
19155
|
+
/** 툴팁 우측 상단 닫기 버튼 표시 여부 */
|
|
18469
19156
|
useClose = false;
|
|
19157
|
+
/** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
|
|
18470
19158
|
sdClass = '';
|
|
18471
19159
|
/**
|
|
18472
19160
|
* 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
|
|
@@ -18579,7 +19267,7 @@ class SdTooltip {
|
|
|
18579
19267
|
const bodyHTML = this.message && this.message.length > 0
|
|
18580
19268
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
18581
19269
|
: this.slotContentHTML;
|
|
18582
|
-
return (hAsync(Fragment, { key: '
|
|
19270
|
+
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: {
|
|
18583
19271
|
'sd-floating-menu': true,
|
|
18584
19272
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
18585
19273
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -18587,7 +19275,7 @@ class SdTooltip {
|
|
|
18587
19275
|
}, style: {
|
|
18588
19276
|
'--sd-floating-bg': typeConfig.bg,
|
|
18589
19277
|
'--sd-floating-content': typeConfig.content,
|
|
18590
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '
|
|
19278
|
+
}, 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() })))))));
|
|
18591
19279
|
}
|
|
18592
19280
|
static get style() { return sdTooltipCss(); }
|
|
18593
19281
|
static get cmpMeta() { return {
|
|
@@ -18629,11 +19317,17 @@ class SdTr {
|
|
|
18629
19317
|
registerInstance(this, hostRef);
|
|
18630
19318
|
}
|
|
18631
19319
|
get el() { return getElement(this); }
|
|
19320
|
+
/** 테이블 컬럼 목록 */
|
|
18632
19321
|
columns;
|
|
19322
|
+
/** 행 선택 기능 사용 여부 */
|
|
18633
19323
|
selectable;
|
|
19324
|
+
/** 고정 컬럼 설정 */
|
|
18634
19325
|
stickyColumn;
|
|
19326
|
+
/** 행 식별 키 */
|
|
18635
19327
|
rowKey = '';
|
|
19328
|
+
/** 행 데이터 객체 */
|
|
18636
19329
|
row = {};
|
|
19330
|
+
/** 구분선 높이 (4 또는 6px, null이면 일반 행) */
|
|
18637
19331
|
separator = null;
|
|
18638
19332
|
tableId = '';
|
|
18639
19333
|
columnWidths = [];
|
|
@@ -18686,12 +19380,15 @@ class SdTr {
|
|
|
18686
19380
|
this.columnWidths = [...config.columnWidths];
|
|
18687
19381
|
}
|
|
18688
19382
|
}
|
|
19383
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
18689
19384
|
async refreshConfig() {
|
|
18690
19385
|
this.resolveConfig();
|
|
18691
19386
|
}
|
|
19387
|
+
/** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
|
|
18692
19388
|
async bumpSpansVersion() {
|
|
18693
19389
|
this.spansVersion = this.spansVersion + 1;
|
|
18694
19390
|
}
|
|
19391
|
+
/** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
|
|
18695
19392
|
async updateVisibility() {
|
|
18696
19393
|
this.updateVisibilitySync();
|
|
18697
19394
|
}
|
|
@@ -18704,9 +19401,11 @@ class SdTr {
|
|
|
18704
19401
|
}
|
|
18705
19402
|
this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
|
|
18706
19403
|
}
|
|
19404
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
18707
19405
|
async setColumnWidths(widths) {
|
|
18708
19406
|
this.columnWidths = widths;
|
|
18709
19407
|
}
|
|
19408
|
+
/** 체크박스 선택 상태를 갱신합니다. */
|
|
18710
19409
|
async refreshSelection() {
|
|
18711
19410
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
18712
19411
|
if (checkbox) {
|