@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.js
CHANGED
|
@@ -136,7 +136,7 @@ var node_crypto = require('node:crypto');
|
|
|
136
136
|
const NAMESPACE = 'design-system';
|
|
137
137
|
const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
138
138
|
|
|
139
|
-
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:12px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#555555;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-bg:#001B39;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-top-border:#004177;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-bg-default:#001B39;--sd-gnb-belt-gnb-belt-item-bg-selected:#002B5E;--sd-gnb-belt-gnb-belt-item-color-default:#FFFFFF;--sd-gnb-belt-gnb-belt-item-color-active:#93C4FF;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-bg:#FFFFFF;--sd-gnb-box-gnb-box-border:#E1E1E1;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-bg-default:#FFFFFF;--sd-gnb-box-gnb-box-item-bg-hover:#F6F6F6;--sd-gnb-box-gnb-box-item-bg-selected:#EFF6FF;--sd-gnb-box-gnb-box-item-color-default:#222222;--sd-gnb-box-gnb-box-item-color-selected:#0075FF;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
|
|
139
|
+
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:12px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#555555;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-bg:#001B39;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-top-border:#004177;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-bg-default:#001B39;--sd-gnb-belt-gnb-belt-item-bg-selected:#002B5E;--sd-gnb-belt-gnb-belt-item-color-default:#FFFFFF;--sd-gnb-belt-gnb-belt-item-color-active:#93C4FF;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-bg:#FFFFFF;--sd-gnb-box-gnb-box-border:#E1E1E1;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-bg-default:#FFFFFF;--sd-gnb-box-gnb-box-item-bg-hover:#F6F6F6;--sd-gnb-box-gnb-box-item-bg-selected:#EFF6FF;--sd-gnb-box-gnb-box-item-color-default:#222222;--sd-gnb-box-gnb-box-item-color-selected:#0075FF;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
|
|
140
140
|
|
|
141
141
|
/*
|
|
142
142
|
Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -5304,11 +5304,17 @@ class SdActionModal {
|
|
|
5304
5304
|
this.close = createEvent(this, "sdClose", 7);
|
|
5305
5305
|
this.ok = createEvent(this, "sdOk", 7);
|
|
5306
5306
|
}
|
|
5307
|
+
/** 모달 헤더에 표시할 제목 */
|
|
5307
5308
|
modalTitle = '';
|
|
5309
|
+
/** 하단 확인 버튼의 props (없으면 footer 미표시) */
|
|
5308
5310
|
buttonProps;
|
|
5311
|
+
/** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5309
5312
|
width;
|
|
5313
|
+
/** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5310
5314
|
height;
|
|
5315
|
+
/** 닫기 버튼 클릭 시 발생 */
|
|
5311
5316
|
close;
|
|
5317
|
+
/** 확인 버튼 클릭 시 발생 */
|
|
5312
5318
|
ok;
|
|
5313
5319
|
render() {
|
|
5314
5320
|
const cssVars = {
|
|
@@ -5338,7 +5344,7 @@ class SdActionModal {
|
|
|
5338
5344
|
if (this.height != null && this.height !== '') {
|
|
5339
5345
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5340
5346
|
}
|
|
5341
|
-
return (hAsync("div", { key: '
|
|
5347
|
+
return (hAsync("div", { key: '1bed831bf4534b5936d151d9cf085dda4657295f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '2e5855be8128695e85e397acc91432d573572a12', class: "sd-action-modal__header" }, hAsync("h2", { key: '1551d022b29288f38c1288c595d66acffb7cd81a', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '8d4ec549ebebc6b2d61ad3c9dc4808d0275d3c55', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'aac69288e31316de16c6cdd8a5b5641b5afc2f5a', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'd48d05b60cdc53e5d71e7694149b2e2e77c0cde8', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'abd5db2432dea9639bfa91fb3f3019105a47e409', class: "sd-action-modal__body" }, hAsync("slot", { key: 'debfb64dd617e6d027b9acdea2081141ad78ff5d', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '9cf1510e0ce5aea2e5b4e504e832073f533e166e', class: "sd-action-modal__footer" }, hAsync("div", { key: '677d0e26fe8d416419fd247c808206955df82b16', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '24e400c96a0fec93ea76d2a037432901e3050618', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'b52c5c7837a06f25738533dc769f5daff1169696', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
|
|
5342
5348
|
}
|
|
5343
5349
|
static get style() { return sdActionModalCss(); }
|
|
5344
5350
|
static get cmpMeta() { return {
|
|
@@ -5387,10 +5393,11 @@ class SdBadge {
|
|
|
5387
5393
|
constructor(hostRef) {
|
|
5388
5394
|
registerInstance(this, hostRef);
|
|
5389
5395
|
}
|
|
5396
|
+
/** 뱃지 색상 */
|
|
5390
5397
|
color = 'blue';
|
|
5391
5398
|
render() {
|
|
5392
5399
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5393
|
-
return (hAsync("div", { key: '
|
|
5400
|
+
return (hAsync("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
|
|
5394
5401
|
}
|
|
5395
5402
|
static get style() { return sdBadgeCss(); }
|
|
5396
5403
|
static get cmpMeta() { return {
|
|
@@ -5501,38 +5508,66 @@ class SdBarcodeInput {
|
|
|
5501
5508
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
5502
5509
|
}
|
|
5503
5510
|
get host() { return getElement(this); }
|
|
5511
|
+
/** 입력값 */
|
|
5504
5512
|
value = null;
|
|
5513
|
+
/** 입력 필드 크기 */
|
|
5505
5514
|
size = 'sm';
|
|
5515
|
+
/** 필드 우측 어드온 레이블 */
|
|
5506
5516
|
addonLabel = '';
|
|
5517
|
+
/** 어드온 정렬 방향 */
|
|
5507
5518
|
addonAlign = 'start';
|
|
5519
|
+
/** 입력 placeholder */
|
|
5508
5520
|
placeholder = '입력해 주세요.';
|
|
5521
|
+
/** 비활성 상태 여부 */
|
|
5509
5522
|
disabled = false;
|
|
5523
|
+
/** 입력값 지우기 버튼 표시 여부 */
|
|
5510
5524
|
clearable = false;
|
|
5525
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5511
5526
|
width = '';
|
|
5527
|
+
/** 유효성 검사 규칙 목록 */
|
|
5512
5528
|
rules = [];
|
|
5529
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
5513
5530
|
autoFocus = false;
|
|
5531
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
5514
5532
|
status;
|
|
5533
|
+
/** 필드 하단 힌트 텍스트 */
|
|
5515
5534
|
hint = '';
|
|
5535
|
+
/** 에러 메시지 */
|
|
5516
5536
|
errorMessage = '';
|
|
5537
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
5517
5538
|
inputClass = '';
|
|
5539
|
+
/** 읽기 전용 여부 */
|
|
5518
5540
|
readonly = false;
|
|
5541
|
+
/** 에러 상태 여부 */
|
|
5519
5542
|
error = false;
|
|
5543
|
+
/** 포커스 상태 여부 */
|
|
5520
5544
|
focused = false;
|
|
5545
|
+
/** 호버 상태 여부 */
|
|
5521
5546
|
hovered = false;
|
|
5522
5547
|
// props - label
|
|
5548
|
+
/** 레이블 텍스트 */
|
|
5523
5549
|
label = '';
|
|
5550
|
+
/** 레이블 너비 */
|
|
5524
5551
|
labelWidth = '';
|
|
5552
|
+
/** 레이블 영역 아이콘 */
|
|
5525
5553
|
icon = undefined;
|
|
5554
|
+
/** 레이블 툴팁 텍스트 */
|
|
5526
5555
|
labelTooltip = '';
|
|
5556
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
5527
5557
|
labelTooltipProps = null;
|
|
5528
5558
|
// props - custom styles
|
|
5559
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
5529
5560
|
inputStyle = {};
|
|
5530
5561
|
internalValue = null;
|
|
5531
5562
|
nativeEl = undefined;
|
|
5532
5563
|
formField;
|
|
5564
|
+
/** 폼 연동용 name 속성 */
|
|
5533
5565
|
name = nanoid$1();
|
|
5566
|
+
/** 입력값 변경 시 발생합니다. */
|
|
5534
5567
|
input;
|
|
5568
|
+
/** 포커스 진입 시 발생합니다. */
|
|
5535
5569
|
focus;
|
|
5570
|
+
/** 포커스 이탈 시 발생합니다. */
|
|
5536
5571
|
blur;
|
|
5537
5572
|
valueChanged(newValue) {
|
|
5538
5573
|
this.internalValue = newValue;
|
|
@@ -5543,18 +5578,23 @@ class SdBarcodeInput {
|
|
|
5543
5578
|
this.input?.emit(this.value);
|
|
5544
5579
|
}
|
|
5545
5580
|
}
|
|
5581
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
5546
5582
|
async sdGetNativeElement() {
|
|
5547
5583
|
return this.nativeEl || null;
|
|
5548
5584
|
}
|
|
5585
|
+
/** 유효성 검사를 실행합니다. */
|
|
5549
5586
|
async sdValidate() {
|
|
5550
5587
|
this.formField?.sdValidate();
|
|
5551
5588
|
}
|
|
5589
|
+
/** 입력값과 유효성 상태를 초기화합니다. */
|
|
5552
5590
|
async sdReset() {
|
|
5553
5591
|
this.formField?.sdReset();
|
|
5554
5592
|
}
|
|
5593
|
+
/** 유효성 상태만 초기화합니다. */
|
|
5555
5594
|
async sdResetValidate() {
|
|
5556
5595
|
this.formField?.sdResetValidation();
|
|
5557
5596
|
}
|
|
5597
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
5558
5598
|
async sdFocus() {
|
|
5559
5599
|
this.formField?.sdFocus();
|
|
5560
5600
|
}
|
|
@@ -5600,7 +5640,7 @@ class SdBarcodeInput {
|
|
|
5600
5640
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5601
5641
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5602
5642
|
};
|
|
5603
|
-
return (hAsync("sd-field", { key: '
|
|
5643
|
+
return (hAsync("sd-field", { key: '9f9831c9f39e4723cad6567b22155ab89856c9be', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '1da8ce2ef66e48f269b79f22e6751ccf18ca9cc0', class: "sd-barcode-input__content" }, hAsync("slot", { key: '06850214ee5118ff3d13266c1ade37902c19f379', name: "prefix" }), hAsync("input", { key: '0384b010946b635cc6b19ddb1a83be593ba5806b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '2bb5baed7b300014e52795d3a7665a580b7ff5a2', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'fc586fdb39a1dc25eeba32c76aa86a653416c38e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5604
5644
|
if (this.disabled)
|
|
5605
5645
|
return;
|
|
5606
5646
|
this.internalValue = '';
|
|
@@ -6472,13 +6512,21 @@ class SdButton {
|
|
|
6472
6512
|
registerInstance(this, hostRef);
|
|
6473
6513
|
this.click = createEvent(this, "sdClick", 7);
|
|
6474
6514
|
}
|
|
6515
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
6475
6516
|
name = 'primary_sm';
|
|
6517
|
+
/** 버튼 텍스트 레이블 */
|
|
6476
6518
|
label = '';
|
|
6519
|
+
/** 레이블 왼쪽에 표시할 아이콘 */
|
|
6477
6520
|
icon;
|
|
6521
|
+
/** 레이블 오른쪽에 표시할 아이콘 */
|
|
6478
6522
|
rightIcon;
|
|
6523
|
+
/** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
|
|
6479
6524
|
ariaLabel = '';
|
|
6525
|
+
/** 비활성 상태 여부 */
|
|
6480
6526
|
disabled = false;
|
|
6527
|
+
/** 네이티브 button type 속성 */
|
|
6481
6528
|
type = 'button';
|
|
6529
|
+
/** 클릭 시 발생합니다. */
|
|
6482
6530
|
click;
|
|
6483
6531
|
hasWarnedMissingAriaLabel = false;
|
|
6484
6532
|
handleClick = (event) => {
|
|
@@ -6538,14 +6586,14 @@ class SdButton {
|
|
|
6538
6586
|
const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
|
|
6539
6587
|
const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
|
|
6540
6588
|
const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
|
|
6541
|
-
return (hAsync("button", { key: '
|
|
6589
|
+
return (hAsync("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6542
6590
|
'--sd-button-bg': config.color,
|
|
6543
6591
|
'--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6544
6592
|
'--sd-button-border': PRESET_BORDER_COLORS$1[preset],
|
|
6545
6593
|
'--sd-button-text': PRESET_TEXT_COLORS$1[preset],
|
|
6546
6594
|
'--sd-button-icon': PRESET_ICON_COLORS$1[preset],
|
|
6547
6595
|
'--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6548
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6596
|
+
}, onClick: this.handleClick }, hAsync("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
|
|
6549
6597
|
}
|
|
6550
6598
|
static get style() { return sdButtonCss(); }
|
|
6551
6599
|
static get cmpMeta() { return {
|
|
@@ -6798,13 +6846,19 @@ class SdCalendar {
|
|
|
6798
6846
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
6799
6847
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
6800
6848
|
}
|
|
6849
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
6801
6850
|
value = null;
|
|
6851
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
|
|
6802
6852
|
selectable;
|
|
6853
|
+
/** 캘린더에 표시할 이벤트 그룹 목록 */
|
|
6803
6854
|
events;
|
|
6855
|
+
/** 카드 형태의 그림자 여부 */
|
|
6804
6856
|
elevated = false;
|
|
6805
6857
|
currentYear;
|
|
6806
6858
|
currentMonth;
|
|
6859
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
6807
6860
|
update;
|
|
6861
|
+
/** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
|
|
6808
6862
|
viewChange;
|
|
6809
6863
|
dateUtil = useDatePicker();
|
|
6810
6864
|
_eventMapCache;
|
|
@@ -6968,7 +7022,7 @@ class SdCalendar {
|
|
|
6968
7022
|
const eventMap = this.eventMap;
|
|
6969
7023
|
const legend = this.legendItems;
|
|
6970
7024
|
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
6971
|
-
return (hAsync("div", { key: '
|
|
7025
|
+
return (hAsync("div", { key: '1ff9f894078f4b24d52c738509878ee504e02c6b', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: 'a4e894dbf3c808ba1a2a6711997c956c8b4525c0', class: "sd-calendar__header" }, hAsync("div", { key: 'd559c861937fd51cab7e4cc39cfece49bed20037', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '6b793f2a07cc9c26a8b517d7a4d0cc065305a19f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '324fa08a3583543a75cfd6a3cfeb8450586c9265', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'd0951fe7bf84f58348e0ad2ed9e89531daa68242', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '953a382082f5be65a1df7dab23faae8be1975bfa', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'aa751f69f3864875d4e6f16a816660cb8636281f', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '7fe05970e9385cf8b744b16abce6a536ba639d8d', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '0f528c7bde86f64f482a5a6b433beef2456e5832', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '3ddbb8f64f86fda85e5f8c6963cc4e11a95e8a37', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'de37bc97970b23c49757ff103f62a5ef8c3deb2a', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '218d4ff90b67bfcea0fb52984338b5bf486ec6b1', class: "sd-calendar__grid" }, this.cells.map(cell => {
|
|
6972
7026
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
6973
7027
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
6974
7028
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -6981,8 +7035,8 @@ class SdCalendar {
|
|
|
6981
7035
|
'sd-calendar__day--disabled': isDisabled,
|
|
6982
7036
|
}, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
|
|
6983
7037
|
})), legend.length > 0 && [
|
|
6984
|
-
hAsync("span", { key: '
|
|
6985
|
-
hAsync("div", { key: '
|
|
7038
|
+
hAsync("span", { key: '713522194a9052e28b970f5eb6ad34941f7b6459', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
7039
|
+
hAsync("div", { key: 'fffe4cf9c14362c14e04be5cab0172c73490137f', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
|
|
6986
7040
|
]));
|
|
6987
7041
|
}
|
|
6988
7042
|
static get watchers() { return {
|
|
@@ -7190,7 +7244,9 @@ class SdCallout {
|
|
|
7190
7244
|
constructor(hostRef) {
|
|
7191
7245
|
registerInstance(this, hostRef);
|
|
7192
7246
|
}
|
|
7247
|
+
/** 콜아웃 타입 (색상·아이콘 조합 결정) */
|
|
7193
7248
|
type = 'default';
|
|
7249
|
+
/** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
|
|
7194
7250
|
message = [];
|
|
7195
7251
|
get calloutStyle() {
|
|
7196
7252
|
const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
|
|
@@ -7237,7 +7293,7 @@ class SdCallout {
|
|
|
7237
7293
|
}
|
|
7238
7294
|
render() {
|
|
7239
7295
|
const showTitle = this.type === 'danger';
|
|
7240
|
-
return (hAsync("div", { key: '
|
|
7296
|
+
return (hAsync("div", { key: 'd608e8393a52dec8074ae6e8c4c80f59eb88891f', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '9950ae86dab1f76b7009b89b3dcb91ebfcff978b', class: "sd-callout__body" }, this.renderBody())));
|
|
7241
7297
|
}
|
|
7242
7298
|
static get style() { return sdCalloutCss(); }
|
|
7243
7299
|
static get cmpMeta() { return {
|
|
@@ -7259,10 +7315,12 @@ class SdCard {
|
|
|
7259
7315
|
constructor(hostRef) {
|
|
7260
7316
|
registerInstance(this, hostRef);
|
|
7261
7317
|
}
|
|
7318
|
+
/** 테두리 표시 여부 */
|
|
7262
7319
|
bordered = false;
|
|
7320
|
+
/** 카드 루트 엘리먼트에 추가할 클래스 */
|
|
7263
7321
|
sdClass = '';
|
|
7264
7322
|
render() {
|
|
7265
|
-
return (hAsync(Fragment, { key: '
|
|
7323
|
+
return (hAsync(Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, hAsync("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
|
|
7266
7324
|
}
|
|
7267
7325
|
static get style() { return sdCardCss(); }
|
|
7268
7326
|
static get cmpMeta() { return {
|
|
@@ -7285,9 +7343,13 @@ const checkbox = {
|
|
|
7285
7343
|
gap: "8",
|
|
7286
7344
|
icon: "12",
|
|
7287
7345
|
typography: {
|
|
7288
|
-
|
|
7289
|
-
|
|
7290
|
-
|
|
7346
|
+
"default": {
|
|
7347
|
+
fontWeight: "400",
|
|
7348
|
+
fontSize: "12",
|
|
7349
|
+
lineHeight: "20"},
|
|
7350
|
+
selected: {
|
|
7351
|
+
fontWeight: "500"}
|
|
7352
|
+
},
|
|
7291
7353
|
unchecked: {
|
|
7292
7354
|
bg: {
|
|
7293
7355
|
"default": "#FFFFFF",
|
|
@@ -7313,7 +7375,8 @@ const checkbox = {
|
|
|
7313
7375
|
},
|
|
7314
7376
|
label: {
|
|
7315
7377
|
"default": "#222222",
|
|
7316
|
-
inverse: "#FFFFFF"
|
|
7378
|
+
inverse: "#FFFFFF",
|
|
7379
|
+
disabled: "#888888"
|
|
7317
7380
|
},
|
|
7318
7381
|
bg: {
|
|
7319
7382
|
disabled: "#E1E1E1"
|
|
@@ -7334,9 +7397,10 @@ const CHECKBOX_LAYOUT = {
|
|
|
7334
7397
|
iconSize: checkboxTokens.checkbox.icon,
|
|
7335
7398
|
};
|
|
7336
7399
|
const CHECKBOX_TYPOGRAPHY = {
|
|
7337
|
-
fontSize: checkboxTokens.checkbox.typography.fontSize,
|
|
7338
|
-
lineHeight: checkboxTokens.checkbox.typography.lineHeight,
|
|
7339
|
-
fontWeight: checkboxTokens.checkbox.typography.fontWeight,
|
|
7400
|
+
fontSize: checkboxTokens.checkbox.typography.default.fontSize,
|
|
7401
|
+
lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
|
|
7402
|
+
fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
|
|
7403
|
+
selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
|
|
7340
7404
|
};
|
|
7341
7405
|
const CHECKBOX_COLORS = {
|
|
7342
7406
|
unchecked: {
|
|
@@ -7354,13 +7418,14 @@ const CHECKBOX_COLORS = {
|
|
|
7354
7418
|
},
|
|
7355
7419
|
label: checkboxTokens.checkbox.label.default,
|
|
7356
7420
|
labelInverse: checkboxTokens.checkbox.label.inverse,
|
|
7421
|
+
labelDisabled: checkboxTokens.checkbox.label.disabled,
|
|
7357
7422
|
disabled: {
|
|
7358
7423
|
bg: checkboxTokens.checkbox.bg.disabled,
|
|
7359
7424
|
border: checkboxTokens.checkbox.border.disabled,
|
|
7360
7425
|
},
|
|
7361
7426
|
};
|
|
7362
7427
|
|
|
7363
|
-
const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
|
|
7428
|
+
const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{display:inline-flex;flex-direction:column;font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox__label::after{content:attr(data-text);height:0;font-weight:var(--sd-checkbox-font-weight-selected);overflow:hidden;visibility:hidden;pointer-events:none}sd-checkbox .sd-checkbox--checked .sd-checkbox__label,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__label{font-weight:var(--sd-checkbox-font-weight-selected)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__label{color:var(--sd-checkbox-label-disabled)}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
|
|
7364
7429
|
|
|
7365
7430
|
class SdCheckbox {
|
|
7366
7431
|
constructor(hostRef) {
|
|
@@ -7459,25 +7524,27 @@ class SdCheckbox {
|
|
|
7459
7524
|
'--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
|
|
7460
7525
|
'--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
|
|
7461
7526
|
'--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
|
|
7527
|
+
'--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
|
|
7462
7528
|
'--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
|
|
7463
7529
|
'--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
|
|
7464
7530
|
'--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
|
|
7465
7531
|
'--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
|
|
7466
7532
|
'--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
|
|
7467
7533
|
'--sd-checkbox-label-color': CHECKBOX_COLORS.label,
|
|
7534
|
+
'--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
|
|
7468
7535
|
'--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
|
|
7469
7536
|
'--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
|
|
7470
7537
|
'--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
|
|
7471
7538
|
'--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
|
|
7472
7539
|
'--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
|
|
7473
7540
|
};
|
|
7474
|
-
return (hAsync("label", { key: '
|
|
7541
|
+
return (hAsync("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
|
|
7475
7542
|
this.inputEl = el;
|
|
7476
|
-
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '
|
|
7543
|
+
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
|
|
7477
7544
|
? CHECKBOX_COLORS.checked.iconDisabled
|
|
7478
7545
|
: this.inverse
|
|
7479
7546
|
? CHECKBOX_COLORS.checked.iconInverse
|
|
7480
|
-
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '
|
|
7547
|
+
: CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
|
|
7481
7548
|
}
|
|
7482
7549
|
static get watchers() { return {
|
|
7483
7550
|
"value": [{
|
|
@@ -7579,18 +7646,29 @@ class SdChip {
|
|
|
7579
7646
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
7580
7647
|
}
|
|
7581
7648
|
get el() { return getElement(this); }
|
|
7649
|
+
/** 폼 연동용 name 속성 */
|
|
7582
7650
|
name = '';
|
|
7651
|
+
/** 칩 텍스트 값 */
|
|
7583
7652
|
value = '';
|
|
7653
|
+
/** 에러 상태 여부 */
|
|
7584
7654
|
error = false;
|
|
7655
|
+
/** 비활성 상태 여부 */
|
|
7585
7656
|
disabled = false;
|
|
7657
|
+
/** 인라인 편집 가능 여부 */
|
|
7586
7658
|
editable = true;
|
|
7659
|
+
/** 편집 중 표시할 placeholder */
|
|
7587
7660
|
placeholder = '';
|
|
7661
|
+
/** 유효성 검사 규칙 목록 */
|
|
7588
7662
|
rules = [];
|
|
7589
7663
|
internalValue = '';
|
|
7590
7664
|
isEditing = false;
|
|
7665
|
+
/** 편집 완료 시 새 값을 전달합니다. */
|
|
7591
7666
|
update;
|
|
7667
|
+
/** 삭제 버튼 클릭 시 발생합니다. */
|
|
7592
7668
|
delete;
|
|
7669
|
+
/** 편집 모드 진입 시 발생합니다. */
|
|
7593
7670
|
focus;
|
|
7671
|
+
/** 편집 모드 이탈 시 발생합니다. */
|
|
7594
7672
|
blur;
|
|
7595
7673
|
inputEl;
|
|
7596
7674
|
draftValue = '';
|
|
@@ -7616,6 +7694,7 @@ class SdChip {
|
|
|
7616
7694
|
disconnectedCallback() {
|
|
7617
7695
|
this.unregisterFromForm();
|
|
7618
7696
|
}
|
|
7697
|
+
/** 유효성 검사를 실행합니다. */
|
|
7619
7698
|
async sdValidate() {
|
|
7620
7699
|
if (!this.rules || this.rules.length === 0) {
|
|
7621
7700
|
this.error = false;
|
|
@@ -7631,6 +7710,7 @@ class SdChip {
|
|
|
7631
7710
|
this.error = false;
|
|
7632
7711
|
return true;
|
|
7633
7712
|
}
|
|
7713
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
7634
7714
|
async sdReset() {
|
|
7635
7715
|
this.internalValue = '';
|
|
7636
7716
|
this.value = '';
|
|
@@ -7639,17 +7719,21 @@ class SdChip {
|
|
|
7639
7719
|
this.isEditing = false;
|
|
7640
7720
|
this.shouldInitInput = false;
|
|
7641
7721
|
}
|
|
7722
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7642
7723
|
async sdResetValidate() {
|
|
7643
7724
|
this.error = false;
|
|
7644
7725
|
}
|
|
7726
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7645
7727
|
async sdResetValidation() {
|
|
7646
7728
|
this.error = false;
|
|
7647
7729
|
}
|
|
7730
|
+
/** 편집 모드로 전환하여 포커스를 이동합니다. */
|
|
7648
7731
|
async sdFocus() {
|
|
7649
7732
|
if (this.disabled)
|
|
7650
7733
|
return;
|
|
7651
7734
|
this.enterEditMode();
|
|
7652
7735
|
}
|
|
7736
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
7653
7737
|
async sdGetNativeElement() {
|
|
7654
7738
|
return this.inputEl ?? null;
|
|
7655
7739
|
}
|
|
@@ -7792,7 +7876,7 @@ class SdChip {
|
|
|
7792
7876
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7793
7877
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7794
7878
|
};
|
|
7795
|
-
return (hAsync("span", { key: '
|
|
7879
|
+
return (hAsync("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
|
|
7796
7880
|
'sd-chip': true,
|
|
7797
7881
|
[`sd-chip--${state}`]: true,
|
|
7798
7882
|
'sd-chip--disabled': this.disabled,
|
|
@@ -8025,7 +8109,7 @@ const CHIP_INPUT_SUGGESTIONS = {
|
|
|
8025
8109
|
emptyLineHeight: '20px',
|
|
8026
8110
|
};
|
|
8027
8111
|
|
|
8028
|
-
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8112
|
+
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8029
8113
|
|
|
8030
8114
|
class SdChipInput {
|
|
8031
8115
|
constructor(hostRef) {
|
|
@@ -8037,31 +8121,56 @@ class SdChipInput {
|
|
|
8037
8121
|
}
|
|
8038
8122
|
static SUGGESTIONS_VIEWPORT_PADDING = 8;
|
|
8039
8123
|
get host() { return getElement(this); }
|
|
8124
|
+
/** 칩 값 목록 */
|
|
8040
8125
|
values = [];
|
|
8126
|
+
/** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
|
|
8041
8127
|
errors = [];
|
|
8128
|
+
/** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
|
|
8042
8129
|
disabledChips = [];
|
|
8130
|
+
/** 입력 필드 크기 */
|
|
8043
8131
|
size = 'sm';
|
|
8132
|
+
/** 비활성 상태 여부 */
|
|
8044
8133
|
disabled = false;
|
|
8134
|
+
/** 입력 placeholder */
|
|
8045
8135
|
placeholder = '입력해 주세요.';
|
|
8136
|
+
/** 폼 연동용 name 속성 */
|
|
8046
8137
|
name = nanoid$1();
|
|
8138
|
+
/** 유효성 검사 규칙 목록 */
|
|
8047
8139
|
rules = [];
|
|
8140
|
+
/** 에러 상태 여부 */
|
|
8048
8141
|
error = false;
|
|
8142
|
+
/** 입력 초기화 버튼 표시 여부 */
|
|
8049
8143
|
useReset = false;
|
|
8144
|
+
/** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
|
|
8050
8145
|
maxCount;
|
|
8146
|
+
/** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
|
|
8051
8147
|
duplicateLabel;
|
|
8148
|
+
/** 자동완성 후보 목록 */
|
|
8052
8149
|
suggestions = [];
|
|
8150
|
+
/** 자동완성 목록 로딩 중 여부 */
|
|
8053
8151
|
loadingSuggestions = false;
|
|
8152
|
+
/** 추천 항목 목록 (입력값이 없을 때 표시) */
|
|
8054
8153
|
recommendedItems = [];
|
|
8154
|
+
/** 추천 항목 로딩 중 여부 */
|
|
8055
8155
|
loadingRecommendedItems = false;
|
|
8056
8156
|
// sd-field props
|
|
8157
|
+
/** 레이블 텍스트 */
|
|
8057
8158
|
label = '';
|
|
8159
|
+
/** 레이블 너비 */
|
|
8058
8160
|
labelWidth = '';
|
|
8161
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8059
8162
|
hint = '';
|
|
8163
|
+
/** 에러 메시지 */
|
|
8060
8164
|
errorMessage = '';
|
|
8165
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8061
8166
|
width = '';
|
|
8167
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
8062
8168
|
status;
|
|
8169
|
+
/** 레이블 영역 아이콘 */
|
|
8063
8170
|
icon = undefined;
|
|
8171
|
+
/** 레이블 툴팁 텍스트 */
|
|
8064
8172
|
labelTooltip = '';
|
|
8173
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8065
8174
|
labelTooltipProps = null;
|
|
8066
8175
|
internalValues = [];
|
|
8067
8176
|
internalErrors = [];
|
|
@@ -8128,19 +8237,27 @@ class SdChipInput {
|
|
|
8128
8237
|
}
|
|
8129
8238
|
return this.disabledChips?.[index] ?? false;
|
|
8130
8239
|
}
|
|
8240
|
+
/** 칩 목록 변경 시 전체 값 배열을 전달합니다. */
|
|
8131
8241
|
update;
|
|
8242
|
+
/** 입력 필드 포커스 진입 시 발생합니다. */
|
|
8132
8243
|
focusEvent;
|
|
8244
|
+
/** 입력 필드 포커스 이탈 시 발생합니다. */
|
|
8133
8245
|
blurEvent;
|
|
8246
|
+
/** 입력값 변경 시 현재 입력 중인 문자열을 전달합니다. */
|
|
8134
8247
|
inputEvent;
|
|
8248
|
+
/** 유효성 검사를 실행합니다. */
|
|
8135
8249
|
async sdValidate() {
|
|
8136
8250
|
return this.formField?.sdValidate();
|
|
8137
8251
|
}
|
|
8252
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8138
8253
|
async sdReset() {
|
|
8139
8254
|
return this.formField?.sdReset();
|
|
8140
8255
|
}
|
|
8256
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8141
8257
|
async sdResetValidate() {
|
|
8142
8258
|
return this.formField?.sdResetValidation();
|
|
8143
8259
|
}
|
|
8260
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
8144
8261
|
async sdFocus() {
|
|
8145
8262
|
return this.formField?.sdFocus();
|
|
8146
8263
|
}
|
|
@@ -8401,6 +8518,7 @@ class SdChipInput {
|
|
|
8401
8518
|
};
|
|
8402
8519
|
const suggestionItemStyle = {
|
|
8403
8520
|
display: 'flex',
|
|
8521
|
+
flexShrink: '0',
|
|
8404
8522
|
alignItems: 'center',
|
|
8405
8523
|
gap: CHIP_INPUT_SUGGESTIONS.itemGap,
|
|
8406
8524
|
padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
|
|
@@ -8424,7 +8542,7 @@ class SdChipInput {
|
|
|
8424
8542
|
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8425
8543
|
color: CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8426
8544
|
};
|
|
8427
|
-
return (hAsync("sd-field", { key: '
|
|
8545
|
+
return (hAsync("sd-field", { key: '7135f3f1fe7c76276bcd780ba2cfdf391925a57b', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '8566ae7bc3bedaf6be95f29267587c49c090e73f', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: '00d9946c93d2e961466fa8baf617fc4ddc12d701', class: {
|
|
8428
8546
|
'sd-chip-input__field': true,
|
|
8429
8547
|
'sd-chip-input__field--filled': this.inputValue !== '',
|
|
8430
8548
|
'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
|
|
@@ -8432,7 +8550,7 @@ class SdChipInput {
|
|
|
8432
8550
|
? this.inputValue
|
|
8433
8551
|
: this.internalValues.length === 0
|
|
8434
8552
|
? this.placeholder
|
|
8435
|
-
: '' }, hAsync("input", { key: '
|
|
8553
|
+
: '' }, hAsync("input", { key: '2845394a5eaec2d5f37876a0e8938fa9d3f38263', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (hAsync("div", { key: '7cec3884a4cace3d688e80006d6240d321ac60f3', class: "sd-chip-input__reset" }, this.inputValue === '' && hAsync("span", { key: '761539e242437841a2703d95903f9d6b5fe3d69f', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '1b448973ba3573c94ae09b74cd24720c8ea011d3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '90d7582f35b8e7a8ee3c1dba717fa87c13c1de19', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (hAsync("sd-portal", { key: '9495c87a4916829fe955f054a8c97d2b3fa04914', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: 'ac4afd8511316f0b4b957c312a051b02fc72f20e', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: '3b6855a7ad2ef48415160544a19014d59ca38ec1', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (hAsync("div", { key: item, class: {
|
|
8436
8554
|
'sd-chip-input__suggestion-item': true,
|
|
8437
8555
|
'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
|
|
8438
8556
|
}, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
|
|
@@ -8577,9 +8695,13 @@ class SdCircleProgress {
|
|
|
8577
8695
|
constructor(hostRef) {
|
|
8578
8696
|
registerInstance(this, hostRef);
|
|
8579
8697
|
}
|
|
8698
|
+
/** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
|
|
8580
8699
|
indeterminate = false;
|
|
8700
|
+
/** 진행률 (0~100) */
|
|
8581
8701
|
value = 0;
|
|
8702
|
+
/** 색상 테마 */
|
|
8582
8703
|
type = 'primary';
|
|
8704
|
+
/** 원 하단에 표시할 레이블 텍스트 */
|
|
8583
8705
|
label;
|
|
8584
8706
|
get clampedValue() {
|
|
8585
8707
|
if (!Number.isFinite(this.value))
|
|
@@ -8603,7 +8725,7 @@ class SdCircleProgress {
|
|
|
8603
8725
|
}
|
|
8604
8726
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
8605
8727
|
const showPercent = !this.indeterminate;
|
|
8606
|
-
return (hAsync(Host, { key: '
|
|
8728
|
+
return (hAsync(Host, { key: '1af8807d6ce19c4326e67ae55bd40620b83e9435', style: hostStyle }, hAsync("svg", { key: '21c2c5898ddf6f78b03964f3365e82382f90ce48', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '1d9b2e95f767008af2a5d836f16e6e47e751677a', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '1c8f4a5b1ae8f643debf68452317d0bcc0b4ab36', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '1b15cdd56b3ac0d254d4a5304f40d3c5b1710b8d', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'e830db48529d87ddf788834d8731a576582662af', class: "sd-circle-progress__label" }, this.label)));
|
|
8607
8729
|
}
|
|
8608
8730
|
static get style() { return sdCircleProgressCss(); }
|
|
8609
8731
|
static get cmpMeta() { return {
|
|
@@ -8652,20 +8774,35 @@ class SdConfirmModal {
|
|
|
8652
8774
|
hasSlottedContent = false;
|
|
8653
8775
|
customContentRef;
|
|
8654
8776
|
slotObserver;
|
|
8777
|
+
/** 모달 타입 (아이콘·버튼 색상 결정) */
|
|
8655
8778
|
type = 'positive';
|
|
8779
|
+
/** 모달 제목 */
|
|
8656
8780
|
modalTitle = '';
|
|
8781
|
+
/** 제목 엘리먼트에 추가할 클래스 */
|
|
8657
8782
|
titleClass = '';
|
|
8783
|
+
/** 콘텐츠 박스 상단 메시지 목록 */
|
|
8658
8784
|
topMessage = [];
|
|
8785
|
+
/** 콘텐츠 박스 하단 메시지 목록 */
|
|
8659
8786
|
bottomMessage = [];
|
|
8787
|
+
/** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
|
|
8660
8788
|
mainButtonName;
|
|
8789
|
+
/** 확인 버튼 레이블 */
|
|
8661
8790
|
mainButtonLabel = '확인';
|
|
8791
|
+
/** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
|
|
8662
8792
|
subButtonLabel = '';
|
|
8793
|
+
/** 콘텐츠 박스에 표시할 태그 프리셋 */
|
|
8663
8794
|
tagPreset = 'square_sm_grey';
|
|
8795
|
+
/** 콘텐츠 박스에 표시할 태그 레이블 */
|
|
8664
8796
|
tagLabel = '';
|
|
8797
|
+
/** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
|
|
8665
8798
|
slotLabel = '';
|
|
8799
|
+
/** 콘텐츠 박스에 직접 삽입할 HTMLElement */
|
|
8666
8800
|
tagContents;
|
|
8801
|
+
/** 닫기 버튼 클릭 시 발생합니다. */
|
|
8667
8802
|
close;
|
|
8803
|
+
/** 취소 버튼 클릭 시 발생합니다. */
|
|
8668
8804
|
cancel;
|
|
8805
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
8669
8806
|
ok;
|
|
8670
8807
|
componentWillLoad() {
|
|
8671
8808
|
this.syncHasSlottedContent();
|
|
@@ -8719,9 +8856,9 @@ class SdConfirmModal {
|
|
|
8719
8856
|
const type = this.resolvedType;
|
|
8720
8857
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
8721
8858
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
8722
|
-
return (hAsync("div", { key: '
|
|
8859
|
+
return (hAsync("div", { key: '26270c4ca645f0e7e245b4bd40423bcf09029e22', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '672b73221f8638eff70c3074614fcc90b489702e', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '895dda6ba69d41f33f9465fb9db28739da28d2e6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'ace6b9da4421c28e2bb828c60cae1c1cc7547f9a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: '3370fe954c33f8ce6a643fcc9b19f299682b43e8', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a6bc182c638e909a821353c188d2ef558452e17', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: 'dba37f4ab114f3641a9f287d123fb7f94e49c00a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
8723
8860
|
this.customContentRef = el;
|
|
8724
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '
|
|
8861
|
+
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'ed29da73d968017c44cd61540139fac24592ea70', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '608287c021f4191dcea0a0b5798381cbc8742170', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a67c309617c6e1f30aa9167587e8cbb9fb961482', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '3c1a698a8276e2924f62cf1c7e472bd34ac581a1', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
|
|
8725
8862
|
}
|
|
8726
8863
|
static get style() { return sdConfirmModalCss(); }
|
|
8727
8864
|
static get cmpMeta() { return {
|
|
@@ -8756,15 +8893,25 @@ class SdDateBox {
|
|
|
8756
8893
|
this.click = createEvent(this, "sdClick", 7);
|
|
8757
8894
|
this.mouseOver = createEvent(this, "sdMouseOver", 7);
|
|
8758
8895
|
}
|
|
8896
|
+
/** 표시할 날짜 값 */
|
|
8759
8897
|
date = null;
|
|
8898
|
+
/** 비활성 상태 여부 */
|
|
8760
8899
|
disabled = false;
|
|
8900
|
+
/** 선택된 날짜 여부 */
|
|
8761
8901
|
selected = false;
|
|
8902
|
+
/** 범위 시작일 여부 */
|
|
8762
8903
|
isStartDate = false;
|
|
8904
|
+
/** 범위 종료일 여부 */
|
|
8763
8905
|
isEndDate = false;
|
|
8906
|
+
/** 오늘 날짜 여부 */
|
|
8764
8907
|
isToday = false;
|
|
8908
|
+
/** 선택 범위 내 날짜 여부 */
|
|
8765
8909
|
inRange = false;
|
|
8910
|
+
/** 범위 선택에서의 역할 (start | end | 없음) */
|
|
8766
8911
|
type = '';
|
|
8912
|
+
/** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
|
|
8767
8913
|
click;
|
|
8914
|
+
/** 날짜 hover 시 해당 날짜 값을 전달합니다. */
|
|
8768
8915
|
mouseOver;
|
|
8769
8916
|
handleClickDate() {
|
|
8770
8917
|
if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
|
|
@@ -8779,7 +8926,7 @@ class SdDateBox {
|
|
|
8779
8926
|
this.mouseOver?.emit(this.date);
|
|
8780
8927
|
}
|
|
8781
8928
|
render() {
|
|
8782
|
-
return (hAsync("div", { key: '
|
|
8929
|
+
return (hAsync("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8783
8930
|
'sd-date-box': true,
|
|
8784
8931
|
'sd-hoverable': !this.disabled || !this.selected || this.type === '',
|
|
8785
8932
|
'sd-date-box--disabled': this.disabled,
|
|
@@ -8795,7 +8942,7 @@ class SdDateBox {
|
|
|
8795
8942
|
e.preventDefault();
|
|
8796
8943
|
this.handleClickDate();
|
|
8797
8944
|
}
|
|
8798
|
-
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: '
|
|
8945
|
+
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: 'acbd57ac0300ca143f1e75780b59b5fc107d537f', class: "sd-date-box__content" }, hAsync("div", { key: 'aeff50640c285cfd75d5592e67c97e5ec55eb00c', class: "sd-date-box__label" }, this.date))));
|
|
8799
8946
|
}
|
|
8800
8947
|
static get style() { return sdDateBoxCss(); }
|
|
8801
8948
|
static get cmpMeta() { return {
|
|
@@ -8919,43 +9066,66 @@ class SdDatePicker {
|
|
|
8919
9066
|
}
|
|
8920
9067
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
8921
9068
|
get el() { return getElement(this); }
|
|
9069
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
8922
9070
|
value = null;
|
|
9071
|
+
/** 입력 필드 크기 */
|
|
8923
9072
|
size = 'sm';
|
|
9073
|
+
/** 날짜 미선택 시 표시할 placeholder */
|
|
8924
9074
|
placeholder = 'YYYY-MM-DD';
|
|
9075
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
8925
9076
|
selectable;
|
|
9077
|
+
/** 비활성 상태 여부 */
|
|
8926
9078
|
disabled = false;
|
|
9079
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8927
9080
|
width = '';
|
|
8928
9081
|
// sd-field 공통 props
|
|
9082
|
+
/** 레이블 텍스트 */
|
|
8929
9083
|
label = '';
|
|
9084
|
+
/** 레이블 너비 */
|
|
8930
9085
|
labelWidth = '';
|
|
9086
|
+
/** 필드 우측 어드온 레이블 */
|
|
8931
9087
|
addonLabel = '';
|
|
9088
|
+
/** 어드온 정렬 방향 */
|
|
8932
9089
|
addonAlign = 'start';
|
|
9090
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8933
9091
|
hint = '';
|
|
9092
|
+
/** 에러 메시지 */
|
|
8934
9093
|
errorMessage = '';
|
|
9094
|
+
/** 유효성 검사 규칙 목록 */
|
|
8935
9095
|
rules = [];
|
|
9096
|
+
/** 에러 상태 여부 */
|
|
8936
9097
|
error = false;
|
|
9098
|
+
/** 레이블 영역 아이콘 */
|
|
8937
9099
|
icon = undefined;
|
|
9100
|
+
/** 레이블 툴팁 텍스트 */
|
|
8938
9101
|
labelTooltip = '';
|
|
9102
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8939
9103
|
labelTooltipProps = null;
|
|
8940
9104
|
isOpen = false;
|
|
8941
9105
|
isAnimatingOut = false;
|
|
8942
9106
|
focused = false;
|
|
8943
9107
|
hovered = false;
|
|
9108
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
8944
9109
|
update;
|
|
9110
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
8945
9111
|
viewChange;
|
|
8946
9112
|
triggerRef;
|
|
8947
9113
|
formField;
|
|
8948
9114
|
closeAnimationTimer;
|
|
9115
|
+
/** 폼 연동용 name 속성 */
|
|
8949
9116
|
name = nanoid$1();
|
|
8950
9117
|
watchIsOpen(newValue) {
|
|
8951
9118
|
this.focused = newValue;
|
|
8952
9119
|
}
|
|
9120
|
+
/** 유효성 검사를 실행합니다. */
|
|
8953
9121
|
async sdValidate() {
|
|
8954
9122
|
return this.formField?.sdValidate();
|
|
8955
9123
|
}
|
|
9124
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8956
9125
|
async sdReset() {
|
|
8957
9126
|
return this.formField?.sdReset();
|
|
8958
9127
|
}
|
|
9128
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8959
9129
|
async sdResetValidate() {
|
|
8960
9130
|
return this.formField?.sdResetValidation();
|
|
8961
9131
|
}
|
|
@@ -9008,9 +9178,9 @@ class SdDatePicker {
|
|
|
9008
9178
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9009
9179
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9010
9180
|
};
|
|
9011
|
-
return (hAsync("sd-field", { key: '
|
|
9181
|
+
return (hAsync("sd-field", { key: '2fc699a41a6646404e5cbd29688f14c61b466c56', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '33c690078e2511657bfe3747d81cc1333b021353', class: "sd-date-picker", ref: el => {
|
|
9012
9182
|
this.triggerRef = el;
|
|
9013
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9183
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'b5248eecbf1c4e8eca4e5b23206b7bebe7034280', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'f89b8688a43b9c702d75b8c5587b30626c7fd2db', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '4b293972c1b860f6d85be57fb72689c94699aeae', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9014
9184
|
}
|
|
9015
9185
|
static get watchers() { return {
|
|
9016
9186
|
"isOpen": [{
|
|
@@ -9061,10 +9231,15 @@ class SdDatePickerTrigger {
|
|
|
9061
9231
|
registerInstance(this, hostRef);
|
|
9062
9232
|
this.triggerClick = createEvent(this, "sdTriggerClick", 7);
|
|
9063
9233
|
}
|
|
9234
|
+
/** 표시할 날짜 텍스트 */
|
|
9064
9235
|
displayText = '';
|
|
9236
|
+
/** 입력 힌트 텍스트 */
|
|
9065
9237
|
placeholder = 'YYYY-MM-DD';
|
|
9238
|
+
/** 비활성 상태 여부 */
|
|
9066
9239
|
disabled = false;
|
|
9240
|
+
/** 트리거 크기 */
|
|
9067
9241
|
size = 'sm';
|
|
9242
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
9068
9243
|
triggerClick;
|
|
9069
9244
|
handleClick = () => {
|
|
9070
9245
|
if (this.disabled)
|
|
@@ -9093,7 +9268,7 @@ class SdDatePickerTrigger {
|
|
|
9093
9268
|
? DATEPICKER_COLORS.icon.disabled
|
|
9094
9269
|
: DATEPICKER_COLORS.icon.default,
|
|
9095
9270
|
};
|
|
9096
|
-
return (hAsync("div", { key: '
|
|
9271
|
+
return (hAsync("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
9097
9272
|
'sd-date-picker-trigger': true,
|
|
9098
9273
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
9099
9274
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -9101,7 +9276,7 @@ class SdDatePickerTrigger {
|
|
|
9101
9276
|
e.preventDefault();
|
|
9102
9277
|
this.handleClick();
|
|
9103
9278
|
}
|
|
9104
|
-
} }, hAsync("sd-icon", { key: '
|
|
9279
|
+
} }, hAsync("sd-icon", { key: 'e87c63032774389064c56f3212882727c1091b53', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '3876d7e9c08771de796ab04106190baf45625f0f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
9105
9280
|
}
|
|
9106
9281
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
9107
9282
|
static get cmpMeta() { return {
|
|
@@ -9136,44 +9311,68 @@ class SdDateRangePicker {
|
|
|
9136
9311
|
}
|
|
9137
9312
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9138
9313
|
get el() { return getElement(this); }
|
|
9314
|
+
/** 선택된 날짜 범위 [시작일, 종료일] (YYYY-MM-DD) */
|
|
9139
9315
|
value = null;
|
|
9316
|
+
/** 입력 필드 크기 */
|
|
9140
9317
|
size = 'sm';
|
|
9318
|
+
/** 미선택 시 표시할 placeholder */
|
|
9141
9319
|
placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
|
|
9320
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
9142
9321
|
selectable;
|
|
9322
|
+
/** 최대 선택 가능한 날짜 범위 (일 단위) */
|
|
9143
9323
|
maxRange;
|
|
9324
|
+
/** 비활성 상태 여부 */
|
|
9144
9325
|
disabled = false;
|
|
9326
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
9145
9327
|
width = '';
|
|
9146
9328
|
// sd-field 공통 props
|
|
9329
|
+
/** 레이블 텍스트 */
|
|
9147
9330
|
label = '';
|
|
9331
|
+
/** 레이블 너비 */
|
|
9148
9332
|
labelWidth = '';
|
|
9333
|
+
/** 필드 우측 어드온 레이블 */
|
|
9149
9334
|
addonLabel = '';
|
|
9335
|
+
/** 어드온 정렬 방향 */
|
|
9150
9336
|
addonAlign = 'start';
|
|
9337
|
+
/** 필드 하단 힌트 텍스트 */
|
|
9151
9338
|
hint = '';
|
|
9339
|
+
/** 에러 메시지 */
|
|
9152
9340
|
errorMessage = '';
|
|
9341
|
+
/** 유효성 검사 규칙 목록 */
|
|
9153
9342
|
rules = [];
|
|
9343
|
+
/** 에러 상태 여부 */
|
|
9154
9344
|
error = false;
|
|
9345
|
+
/** 레이블 영역 아이콘 */
|
|
9155
9346
|
icon = undefined;
|
|
9347
|
+
/** 레이블 툴팁 텍스트 */
|
|
9156
9348
|
labelTooltip = '';
|
|
9349
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
9157
9350
|
labelTooltipProps = null;
|
|
9158
9351
|
isOpen = false;
|
|
9159
9352
|
isAnimatingOut = false;
|
|
9160
9353
|
focused = false;
|
|
9161
9354
|
hovered = false;
|
|
9355
|
+
/** 날짜 범위 선택 완료 시 [시작일, 종료일]을 전달합니다. */
|
|
9162
9356
|
update;
|
|
9357
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
9163
9358
|
viewChange;
|
|
9164
9359
|
triggerRef;
|
|
9165
9360
|
formField;
|
|
9166
9361
|
closeAnimationTimer;
|
|
9362
|
+
/** 폼 연동용 name 속성 */
|
|
9167
9363
|
name = nanoid$1();
|
|
9168
9364
|
watchIsOpen(newValue) {
|
|
9169
9365
|
this.focused = newValue;
|
|
9170
9366
|
}
|
|
9367
|
+
/** 유효성 검사를 실행합니다. */
|
|
9171
9368
|
async sdValidate() {
|
|
9172
9369
|
return this.formField?.sdValidate();
|
|
9173
9370
|
}
|
|
9371
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
9174
9372
|
async sdReset() {
|
|
9175
9373
|
return this.formField?.sdReset();
|
|
9176
9374
|
}
|
|
9375
|
+
/** 유효성 상태만 초기화합니다. */
|
|
9177
9376
|
async sdResetValidate() {
|
|
9178
9377
|
return this.formField?.sdResetValidation();
|
|
9179
9378
|
}
|
|
@@ -9230,9 +9429,9 @@ class SdDateRangePicker {
|
|
|
9230
9429
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9231
9430
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9232
9431
|
};
|
|
9233
|
-
return (hAsync("sd-field", { key: '
|
|
9432
|
+
return (hAsync("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
|
|
9234
9433
|
this.triggerRef = el;
|
|
9235
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9434
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9236
9435
|
}
|
|
9237
9436
|
static get watchers() { return {
|
|
9238
9437
|
"isOpen": [{
|
|
@@ -9285,15 +9484,20 @@ class SdDateRangePickerCalendar {
|
|
|
9285
9484
|
this.select = createEvent(this, "sdSelect", 7);
|
|
9286
9485
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
9287
9486
|
}
|
|
9487
|
+
/** 선택된 날짜 범위 [시작일, 종료일] */
|
|
9288
9488
|
value = null;
|
|
9489
|
+
/** 선택 가능한 날짜 범위 제한 */
|
|
9289
9490
|
selectable;
|
|
9491
|
+
/** 최대 선택 가능 일 수 */
|
|
9290
9492
|
maxRange;
|
|
9291
9493
|
currentYear;
|
|
9292
9494
|
currentMonth;
|
|
9293
9495
|
pendingStart = '';
|
|
9294
9496
|
hoverDate = '';
|
|
9295
9497
|
displayValue = null;
|
|
9498
|
+
/** 날짜 범위 선택 시 발생합니다. */
|
|
9296
9499
|
select;
|
|
9500
|
+
/** 달력 뷰가 변경될 때 발생합니다. */
|
|
9297
9501
|
viewChange;
|
|
9298
9502
|
dateUtil = useDatePicker();
|
|
9299
9503
|
componentWillLoad() {
|
|
@@ -9521,7 +9725,7 @@ class SdDateRangePickerCalendar {
|
|
|
9521
9725
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
9522
9726
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
9523
9727
|
};
|
|
9524
|
-
return (hAsync(Fragment, { key: '
|
|
9728
|
+
return (hAsync(Fragment, { key: '351cf65dcf32acba409f32c5bfa0681989093f32' }, hAsync("div", { key: '99f29a4e401d2ebaea0ebb55c2a4e55d55f23a7f', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '251fe254a39d7093633be176c413608abd3c47c1', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'fb69fea401d17f3862b4a21162747161246c42e2', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
9525
9729
|
}
|
|
9526
9730
|
static get watchers() { return {
|
|
9527
9731
|
"value": [{
|
|
@@ -9742,10 +9946,15 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9742
9946
|
this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
|
|
9743
9947
|
}
|
|
9744
9948
|
get el() { return getElement(this); }
|
|
9949
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
9745
9950
|
name = 'primary_sm';
|
|
9951
|
+
/** 버튼 레이블 */
|
|
9746
9952
|
label = '';
|
|
9953
|
+
/** 드롭다운 메뉴 아이템 목록 */
|
|
9747
9954
|
items = [];
|
|
9955
|
+
/** 비활성 상태 여부 */
|
|
9748
9956
|
disabled = false;
|
|
9957
|
+
/** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
|
|
9749
9958
|
split = false;
|
|
9750
9959
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9751
9960
|
isOpen = false;
|
|
@@ -9755,8 +9964,11 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9755
9964
|
splitContainerRef;
|
|
9756
9965
|
menuRef;
|
|
9757
9966
|
closeAnimationTimer;
|
|
9967
|
+
/** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
|
|
9758
9968
|
click;
|
|
9969
|
+
/** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
|
|
9759
9970
|
buttonClick;
|
|
9971
|
+
/** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
|
|
9760
9972
|
dropDownShow;
|
|
9761
9973
|
handleOpenChange(isOpen) {
|
|
9762
9974
|
this.onDropdownToggle(isOpen);
|
|
@@ -9773,11 +9985,13 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9773
9985
|
if (this.closeAnimationTimer)
|
|
9774
9986
|
clearTimeout(this.closeAnimationTimer);
|
|
9775
9987
|
}
|
|
9988
|
+
/** 드롭다운 메뉴를 엽니다. */
|
|
9776
9989
|
async sdOpen() {
|
|
9777
9990
|
if (this.disabled || this.items.length === 0)
|
|
9778
9991
|
return;
|
|
9779
9992
|
this.isOpen = true;
|
|
9780
9993
|
}
|
|
9994
|
+
/** 드롭다운 메뉴를 닫습니다. */
|
|
9781
9995
|
async sdClose() {
|
|
9782
9996
|
this.closeDropdown();
|
|
9783
9997
|
}
|
|
@@ -10038,25 +10252,44 @@ class SdField {
|
|
|
10038
10252
|
registerInstance(this, hostRef);
|
|
10039
10253
|
}
|
|
10040
10254
|
get el() { return getElement(this); }
|
|
10255
|
+
/** 폼 연동용 name 속성 */
|
|
10041
10256
|
name = '';
|
|
10257
|
+
/** 유효성 검사 규칙 목록 */
|
|
10042
10258
|
rules = [];
|
|
10259
|
+
/** 에러 상태 여부 */
|
|
10043
10260
|
error = false;
|
|
10261
|
+
/** 비활성 상태 여부 */
|
|
10044
10262
|
disabled = false;
|
|
10263
|
+
/** 읽기 전용 여부 */
|
|
10045
10264
|
readonly = false;
|
|
10265
|
+
/** 호버 상태 여부 */
|
|
10046
10266
|
hovered = false;
|
|
10267
|
+
/** 포커스 상태 여부 */
|
|
10047
10268
|
focused = false;
|
|
10269
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10048
10270
|
status;
|
|
10271
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10049
10272
|
hint = '';
|
|
10273
|
+
/** 에러 메시지 */
|
|
10050
10274
|
errorMessage = '';
|
|
10275
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10051
10276
|
width = '';
|
|
10277
|
+
/** 필드 크기 */
|
|
10052
10278
|
size = 'sm';
|
|
10053
10279
|
// props - label
|
|
10280
|
+
/** 레이블 텍스트 */
|
|
10054
10281
|
label = '';
|
|
10282
|
+
/** 레이블 너비 */
|
|
10055
10283
|
labelWidth = '';
|
|
10284
|
+
/** 필드 우측 어드온 레이블 */
|
|
10056
10285
|
addonLabel = '';
|
|
10286
|
+
/** 어드온 정렬 방향 */
|
|
10057
10287
|
addonAlign = 'start';
|
|
10288
|
+
/** 레이블 영역 아이콘 */
|
|
10058
10289
|
icon = undefined;
|
|
10290
|
+
/** 레이블 툴팁 텍스트 */
|
|
10059
10291
|
labelTooltip = '';
|
|
10292
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10060
10293
|
labelTooltipProps = null;
|
|
10061
10294
|
errorMsg = '';
|
|
10062
10295
|
hostElement = null;
|
|
@@ -10121,6 +10354,7 @@ class SdField {
|
|
|
10121
10354
|
form.sdUnregisterField(this);
|
|
10122
10355
|
});
|
|
10123
10356
|
}
|
|
10357
|
+
/** 유효성 검사를 실행합니다. */
|
|
10124
10358
|
async sdValidate() {
|
|
10125
10359
|
if (!this.rules || this.rules.length === 0)
|
|
10126
10360
|
return true;
|
|
@@ -10134,15 +10368,18 @@ class SdField {
|
|
|
10134
10368
|
this.setError(false, '');
|
|
10135
10369
|
return true;
|
|
10136
10370
|
}
|
|
10371
|
+
/** 필드 값과 유효성 상태를 초기화합니다. */
|
|
10137
10372
|
async sdReset() {
|
|
10138
10373
|
if (this.hostElement) {
|
|
10139
10374
|
this.hostElement.value = null;
|
|
10140
10375
|
}
|
|
10141
10376
|
this.setError(false, '');
|
|
10142
10377
|
}
|
|
10378
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10143
10379
|
async sdResetValidation() {
|
|
10144
10380
|
this.setError(false, '');
|
|
10145
10381
|
}
|
|
10382
|
+
/** 필드에 포커스를 이동하고 스크롤합니다. */
|
|
10146
10383
|
async sdFocus() {
|
|
10147
10384
|
this.hostElement?.focus?.();
|
|
10148
10385
|
this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
@@ -10206,21 +10443,21 @@ class SdField {
|
|
|
10206
10443
|
: {}),
|
|
10207
10444
|
}
|
|
10208
10445
|
: {};
|
|
10209
|
-
return (hAsync("div", { key: '
|
|
10446
|
+
return (hAsync("div", { key: 'baf943d77385c9c02e2fe1d938f9622bd858129c', class: {
|
|
10210
10447
|
'sd-field': true,
|
|
10211
10448
|
'sd-field--has-label': this.label !== '',
|
|
10212
10449
|
'sd-field--has-addon': addon !== '',
|
|
10213
10450
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
10214
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '
|
|
10451
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'f5f204929ef4a4e1a260d7609bc00d9a1fe998f4', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'eff02956e5aae08691b2850bb0d1978865a446f9', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
10215
10452
|
? {
|
|
10216
10453
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
10217
10454
|
flex: 'none',
|
|
10218
10455
|
}
|
|
10219
|
-
: {} }, hAsync("div", { key: '
|
|
10456
|
+
: {} }, hAsync("div", { key: 'bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14', class: {
|
|
10220
10457
|
'sd-field__control': true,
|
|
10221
10458
|
'sd-field__control--has-addon': addon !== '',
|
|
10222
|
-
} }, addon && (hAsync("div", { key: '
|
|
10223
|
-
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '
|
|
10459
|
+
} }, addon && (hAsync("div", { key: '4cef1308de0b709d5924ff7a02ee5bd3b78c1502', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '7fdfca555d80f5409082c43967224fd8108a6f29', name: this.icon.name, size: this.icon.size ??
|
|
10460
|
+
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: 'c523813390db6f6f4acce3ffb8377820ffb95fad' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
10224
10461
|
}
|
|
10225
10462
|
renderLabel(label) {
|
|
10226
10463
|
if (label == null || label === '')
|
|
@@ -10316,38 +10553,65 @@ class SdFilePicker {
|
|
|
10316
10553
|
this.reject = createEvent(this, "sdReject", 7);
|
|
10317
10554
|
}
|
|
10318
10555
|
get el() { return getElement(this); }
|
|
10556
|
+
/** 선택된 파일 값 */
|
|
10319
10557
|
value = null;
|
|
10558
|
+
/** 파일 미선택 시 표시할 placeholder */
|
|
10320
10559
|
placeholder = 'Click to upload';
|
|
10560
|
+
/** 비활성 상태 여부 */
|
|
10321
10561
|
disabled = false;
|
|
10562
|
+
/** sd-field 없이 인라인으로 표시하는 모드 여부 */
|
|
10322
10563
|
inline = false;
|
|
10564
|
+
/** 다중 파일 선택 여부 */
|
|
10323
10565
|
multiple = false;
|
|
10566
|
+
/** 허용할 파일 타입 (input accept 속성과 동일) */
|
|
10324
10567
|
accept;
|
|
10568
|
+
/** 파일 한 개의 최대 크기 (bytes) */
|
|
10325
10569
|
maxFileSize;
|
|
10570
|
+
/** 전체 파일의 최대 용량 합계 (bytes) */
|
|
10326
10571
|
maxTotalSize;
|
|
10572
|
+
/** 최대 파일 개수 */
|
|
10327
10573
|
maxFiles;
|
|
10328
10574
|
// sd-field 패스스루 props
|
|
10575
|
+
/** 폼 연동용 name 속성 */
|
|
10329
10576
|
name = nanoid$1();
|
|
10577
|
+
/** 레이블 텍스트 */
|
|
10330
10578
|
label = '';
|
|
10579
|
+
/** 레이블 너비 */
|
|
10331
10580
|
labelWidth = '';
|
|
10581
|
+
/** 필드 우측 어드온 레이블 */
|
|
10332
10582
|
addonLabel = '';
|
|
10583
|
+
/** 어드온 정렬 방향 */
|
|
10333
10584
|
addonAlign = 'start';
|
|
10585
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10334
10586
|
hint = '';
|
|
10587
|
+
/** 에러 메시지 */
|
|
10335
10588
|
errorMessage = '';
|
|
10589
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10336
10590
|
width = '';
|
|
10591
|
+
/** 유효성 검사 규칙 목록 */
|
|
10337
10592
|
rules;
|
|
10593
|
+
/** 에러 상태 여부 */
|
|
10338
10594
|
error = false;
|
|
10595
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10339
10596
|
status;
|
|
10597
|
+
/** 레이블 영역 아이콘 */
|
|
10340
10598
|
icon = undefined;
|
|
10599
|
+
/** 레이블 툴팁 텍스트 */
|
|
10341
10600
|
labelTooltip = '';
|
|
10601
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10342
10602
|
labelTooltipProps = null;
|
|
10603
|
+
/** 포커스 상태 여부 */
|
|
10343
10604
|
focused = false;
|
|
10605
|
+
/** 호버 상태 여부 */
|
|
10344
10606
|
hovered = false;
|
|
10345
10607
|
internalValue = null;
|
|
10346
10608
|
showTooltip = false;
|
|
10347
10609
|
fileInputRef;
|
|
10348
10610
|
fileNamesRef;
|
|
10349
10611
|
formField;
|
|
10612
|
+
/** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
|
|
10350
10613
|
update;
|
|
10614
|
+
/** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
|
|
10351
10615
|
reject;
|
|
10352
10616
|
valueChanged(newValue) {
|
|
10353
10617
|
this.internalValue = newValue;
|
|
@@ -10358,9 +10622,11 @@ class SdFilePicker {
|
|
|
10358
10622
|
componentDidUpdate() {
|
|
10359
10623
|
this.checkOverflow();
|
|
10360
10624
|
}
|
|
10625
|
+
/** 유효성 검사를 실행합니다. */
|
|
10361
10626
|
async sdValidate() {
|
|
10362
10627
|
return this.formField?.sdValidate() ?? Promise.resolve(true);
|
|
10363
10628
|
}
|
|
10629
|
+
/** 파일 값과 유효성 상태를 초기화합니다. */
|
|
10364
10630
|
async sdReset() {
|
|
10365
10631
|
const clearedValue = this.multiple ? [] : null;
|
|
10366
10632
|
this.value = clearedValue;
|
|
@@ -10370,6 +10636,7 @@ class SdFilePicker {
|
|
|
10370
10636
|
}
|
|
10371
10637
|
await this.formField?.sdResetValidation();
|
|
10372
10638
|
}
|
|
10639
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10373
10640
|
async sdResetValidate() {
|
|
10374
10641
|
await this.formField?.sdResetValidation();
|
|
10375
10642
|
}
|
|
@@ -10582,12 +10849,19 @@ class SdFloatingPopover {
|
|
|
10582
10849
|
this.close = createEvent(this, "sdClose", 7);
|
|
10583
10850
|
}
|
|
10584
10851
|
get el() { return getElement(this); }
|
|
10852
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
10585
10853
|
to = 'body';
|
|
10854
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
10586
10855
|
parentRef = null;
|
|
10856
|
+
/** [x, y] 오프셋 (px) */
|
|
10587
10857
|
offset = [0, 0];
|
|
10588
|
-
|
|
10858
|
+
/** z-index */
|
|
10859
|
+
zIndex = 996;
|
|
10860
|
+
/** 콘텐츠를 표시할 방향 */
|
|
10589
10861
|
placement = 'bottom';
|
|
10862
|
+
/** 표시 여부 */
|
|
10590
10863
|
open = false;
|
|
10864
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
10591
10865
|
close;
|
|
10592
10866
|
container;
|
|
10593
10867
|
wrapper;
|
|
@@ -10642,11 +10916,25 @@ class SdFloatingPopover {
|
|
|
10642
10916
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
10643
10917
|
return el instanceof HTMLElement ? el : document.body;
|
|
10644
10918
|
}
|
|
10919
|
+
/**
|
|
10920
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
10921
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
10922
|
+
*/
|
|
10923
|
+
resolveZIndex() {
|
|
10924
|
+
const base = this.zIndex ?? 996;
|
|
10925
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
10926
|
+
if (!layer)
|
|
10927
|
+
return base;
|
|
10928
|
+
const container = layer.closest('.sd-modal-container');
|
|
10929
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
10930
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
10931
|
+
return Math.max(base, modalZIndex + 1);
|
|
10932
|
+
}
|
|
10645
10933
|
createWrapper() {
|
|
10646
10934
|
this.wrapper = document.createElement('div');
|
|
10647
10935
|
Object.assign(this.wrapper.style, {
|
|
10648
10936
|
position: 'fixed',
|
|
10649
|
-
zIndex:
|
|
10937
|
+
zIndex: this.resolveZIndex().toString(),
|
|
10650
10938
|
transition: 'opacity 0.4s',
|
|
10651
10939
|
top: '-9999px',
|
|
10652
10940
|
left: '-9999px',
|
|
@@ -10733,7 +11021,7 @@ class SdFloatingPopover {
|
|
|
10733
11021
|
}
|
|
10734
11022
|
}
|
|
10735
11023
|
render() {
|
|
10736
|
-
return hAsync("slot", { key: '
|
|
11024
|
+
return hAsync("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
|
|
10737
11025
|
}
|
|
10738
11026
|
static get style() { return sdFloatingPortalCss(); }
|
|
10739
11027
|
static get cmpMeta() { return {
|
|
@@ -10759,9 +11047,12 @@ class SdForm {
|
|
|
10759
11047
|
this.sdSubmit = createEvent(this, "sdSubmit", 7);
|
|
10760
11048
|
this.sdValidationError = createEvent(this, "sdValidationError", 7);
|
|
10761
11049
|
}
|
|
11050
|
+
/** form 엘리먼트에 추가할 클래스 */
|
|
10762
11051
|
formClass = '';
|
|
10763
11052
|
fields = [];
|
|
11053
|
+
/** 유효성 검사 통과 후 submit 시 발생합니다. */
|
|
10764
11054
|
sdSubmit;
|
|
11055
|
+
/** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
|
|
10765
11056
|
sdValidationError;
|
|
10766
11057
|
sortFieldsByDomOrder() {
|
|
10767
11058
|
this.fields.sort((a, b) => {
|
|
@@ -10779,6 +11070,7 @@ class SdForm {
|
|
|
10779
11070
|
return 0;
|
|
10780
11071
|
});
|
|
10781
11072
|
}
|
|
11073
|
+
/** 폼에 필드를 등록합니다. */
|
|
10782
11074
|
async sdRegisterField(field) {
|
|
10783
11075
|
if (field.name === '') {
|
|
10784
11076
|
console.warn('[sd-form] field.name is required');
|
|
@@ -10789,6 +11081,7 @@ class SdForm {
|
|
|
10789
11081
|
this.fields.push(field);
|
|
10790
11082
|
this.sortFieldsByDomOrder();
|
|
10791
11083
|
}
|
|
11084
|
+
/** 폼에서 필드를 제거합니다. */
|
|
10792
11085
|
async sdUnregisterField(fieldOrName) {
|
|
10793
11086
|
if (typeof fieldOrName === 'string') {
|
|
10794
11087
|
const index = this.fields.findIndex(field => field.name === fieldOrName);
|
|
@@ -10809,13 +11102,16 @@ class SdForm {
|
|
|
10809
11102
|
}
|
|
10810
11103
|
return { valid: invalidFields.length === 0, invalidFields };
|
|
10811
11104
|
}
|
|
11105
|
+
/** 모든 등록된 필드의 유효성 검사를 실행합니다. */
|
|
10812
11106
|
async sdValidate() {
|
|
10813
11107
|
const { valid } = await this.runValidation();
|
|
10814
11108
|
return valid;
|
|
10815
11109
|
}
|
|
11110
|
+
/** 모든 필드의 값과 유효성 상태를 초기화합니다. */
|
|
10816
11111
|
async sdReset() {
|
|
10817
11112
|
this.fields.forEach(f => f.sdReset());
|
|
10818
11113
|
}
|
|
11114
|
+
/** 모든 필드의 유효성 상태만 초기화합니다. */
|
|
10819
11115
|
async sdResetValidation() {
|
|
10820
11116
|
this.fields.forEach(f => f.sdResetValidation());
|
|
10821
11117
|
}
|
|
@@ -10829,7 +11125,7 @@ class SdForm {
|
|
|
10829
11125
|
this.sdSubmit.emit();
|
|
10830
11126
|
}
|
|
10831
11127
|
render() {
|
|
10832
|
-
return (hAsync("form", { key: '
|
|
11128
|
+
return (hAsync("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
|
|
10833
11129
|
}
|
|
10834
11130
|
static get cmpMeta() { return {
|
|
10835
11131
|
"$flags$": 772,
|
|
@@ -10967,14 +11263,21 @@ class SdGhostButton {
|
|
|
10967
11263
|
registerInstance(this, hostRef);
|
|
10968
11264
|
this.click = createEvent(this, "sdClick", 7);
|
|
10969
11265
|
}
|
|
11266
|
+
/** 버튼에 표시할 아이콘명 */
|
|
10970
11267
|
icon;
|
|
11268
|
+
/** 버튼 크기 */
|
|
10971
11269
|
size = 'sm';
|
|
11270
|
+
/** 버튼 색상 의도 */
|
|
10972
11271
|
intent = 'default';
|
|
11272
|
+
/** 스크린리더용 접근성 레이블 */
|
|
10973
11273
|
ariaLabel = '';
|
|
11274
|
+
/** 호버 시 표시할 툴팁 텍스트 */
|
|
10974
11275
|
tooltipText;
|
|
11276
|
+
/** 비활성 상태 여부 */
|
|
10975
11277
|
disabled = false;
|
|
10976
11278
|
get hostEl() { return getElement(this); }
|
|
10977
11279
|
isTooltipOpen = false;
|
|
11280
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
10978
11281
|
click;
|
|
10979
11282
|
hasWarnedMissingAriaLabel = false;
|
|
10980
11283
|
componentWillLoad() {
|
|
@@ -10989,10 +11292,18 @@ class SdGhostButton {
|
|
|
10989
11292
|
}
|
|
10990
11293
|
this.click.emit(event);
|
|
10991
11294
|
};
|
|
10992
|
-
handleMouseEnter = () => {
|
|
10993
|
-
|
|
10994
|
-
|
|
10995
|
-
|
|
11295
|
+
handleMouseEnter = () => {
|
|
11296
|
+
this.isTooltipOpen = true;
|
|
11297
|
+
};
|
|
11298
|
+
handleMouseLeave = () => {
|
|
11299
|
+
this.isTooltipOpen = false;
|
|
11300
|
+
};
|
|
11301
|
+
handleFocus = () => {
|
|
11302
|
+
this.isTooltipOpen = true;
|
|
11303
|
+
};
|
|
11304
|
+
handleBlur = () => {
|
|
11305
|
+
this.isTooltipOpen = false;
|
|
11306
|
+
};
|
|
10996
11307
|
componentWillRender() {
|
|
10997
11308
|
this.warnIfMissingAriaLabel();
|
|
10998
11309
|
}
|
|
@@ -11017,7 +11328,7 @@ class SdGhostButton {
|
|
|
11017
11328
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
11018
11329
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
11019
11330
|
const hasTooltip = tooltipText.length > 0;
|
|
11020
|
-
return (hAsync("button", { key: '
|
|
11331
|
+
return (hAsync("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
|
|
11021
11332
|
'sd-ghost-button': true,
|
|
11022
11333
|
'sd-ghost-button--disabled': this.disabled,
|
|
11023
11334
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -11026,7 +11337,7 @@ class SdGhostButton {
|
|
|
11026
11337
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
11027
11338
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
11028
11339
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
11029
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '
|
|
11340
|
+
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '36ef78d79a99da1fd26c282ef68293b9fb9f87b1', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, hAsync("div", { key: 'a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: 'a263167142b891add0a32900504f541dcb3a4959', name: "square_xs_grey", label: tooltipText })))), hAsync("sd-icon", { key: 'ba90e9b489b4f43577313052635db598e3d30037', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
11030
11341
|
}
|
|
11031
11342
|
static get style() { return sdGhostButtonCss(); }
|
|
11032
11343
|
static get cmpMeta() { return {
|
|
@@ -11165,11 +11476,17 @@ class SdGuide {
|
|
|
11165
11476
|
registerInstance(this, hostRef);
|
|
11166
11477
|
}
|
|
11167
11478
|
get el() { return getElement(this); }
|
|
11479
|
+
/** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
|
|
11168
11480
|
type = 'tip';
|
|
11481
|
+
/** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
|
|
11169
11482
|
label = '';
|
|
11483
|
+
/** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
|
|
11170
11484
|
message = '';
|
|
11485
|
+
/** notion 타입일 때 클릭 시 이동할 URL */
|
|
11171
11486
|
url = '';
|
|
11487
|
+
/** 팝업 제목 (없으면 type에 따른 기본값 사용) */
|
|
11172
11488
|
popupTitle = '';
|
|
11489
|
+
/** 팝업 너비 (px, 없으면 426px) */
|
|
11173
11490
|
popupWidth;
|
|
11174
11491
|
popupShow = false;
|
|
11175
11492
|
guideRef;
|
|
@@ -11231,10 +11548,10 @@ class SdGuide {
|
|
|
11231
11548
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
11232
11549
|
if (isActive)
|
|
11233
11550
|
buttonClasses.push('sd-guide__button--active');
|
|
11234
|
-
return (hAsync("div", { key: '
|
|
11551
|
+
return (hAsync("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
|
|
11235
11552
|
...this.guideStyle,
|
|
11236
11553
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
11237
|
-
} }, hAsync("sd-ghost-button", { key: '
|
|
11554
|
+
} }, hAsync("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
11238
11555
|
}
|
|
11239
11556
|
// 현재 2depth까지만 스타일 적용
|
|
11240
11557
|
renderListItem(message, depth = 0) {
|
|
@@ -11553,6 +11870,7 @@ class SdIcon {
|
|
|
11553
11870
|
rotate;
|
|
11554
11871
|
/** 접근성을 위한 라벨 */
|
|
11555
11872
|
label;
|
|
11873
|
+
/** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
|
|
11556
11874
|
iconStyle = {};
|
|
11557
11875
|
getIconClasses() {
|
|
11558
11876
|
const classes = ['sd-icon'];
|
|
@@ -11626,46 +11944,81 @@ class SdInput {
|
|
|
11626
11944
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
11627
11945
|
}
|
|
11628
11946
|
get host() { return getElement(this); }
|
|
11947
|
+
/** 입력 값 */
|
|
11629
11948
|
value = null;
|
|
11949
|
+
/** 입력 타입 */
|
|
11630
11950
|
type = 'text';
|
|
11951
|
+
/** 입력 크기 */
|
|
11631
11952
|
size = 'sm';
|
|
11953
|
+
/** 필드 우측 어드온 레이블 */
|
|
11632
11954
|
addonLabel = '';
|
|
11955
|
+
/** 어드온 정렬 방향 */
|
|
11633
11956
|
addonAlign = 'start';
|
|
11957
|
+
/** 플레이스홀더 텍스트 */
|
|
11634
11958
|
placeholder = '입력해 주세요.';
|
|
11959
|
+
/** 비활성 상태 여부 */
|
|
11635
11960
|
disabled = false;
|
|
11961
|
+
/** 값이 있을 때 지우기 버튼 표시 여부 */
|
|
11636
11962
|
clearable = false;
|
|
11963
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
11637
11964
|
width = '';
|
|
11965
|
+
/** 유효성 검사 규칙 목록 */
|
|
11638
11966
|
rules = [];
|
|
11967
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
11639
11968
|
autoFocus = false;
|
|
11969
|
+
/** autocomplete 속성 값 */
|
|
11640
11970
|
autocomplete = '';
|
|
11971
|
+
/** 최대 입력 글자 수 */
|
|
11641
11972
|
maxlength;
|
|
11973
|
+
/** 최소 입력 글자 수 */
|
|
11642
11974
|
minlength;
|
|
11975
|
+
/** 모바일 키보드 타입 */
|
|
11643
11976
|
inputmode;
|
|
11977
|
+
/** 모바일 Enter 키 힌트 */
|
|
11644
11978
|
enterkeyhint;
|
|
11979
|
+
/** 맞춤법 검사 여부 */
|
|
11645
11980
|
spellcheck = false;
|
|
11981
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
11646
11982
|
status;
|
|
11983
|
+
/** 필드 하단 힌트 텍스트 */
|
|
11647
11984
|
hint = '';
|
|
11985
|
+
/** 에러 메시지 */
|
|
11648
11986
|
errorMessage = '';
|
|
11987
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
11649
11988
|
inputClass = '';
|
|
11989
|
+
/** 읽기 전용 여부 */
|
|
11650
11990
|
readonly = false;
|
|
11991
|
+
/** 에러 상태 여부 */
|
|
11651
11992
|
error = false;
|
|
11993
|
+
/** 포커스 상태 여부 */
|
|
11652
11994
|
focused = false;
|
|
11995
|
+
/** 호버 상태 여부 */
|
|
11653
11996
|
hovered = false;
|
|
11654
11997
|
// props - label
|
|
11998
|
+
/** 레이블 텍스트 */
|
|
11655
11999
|
label = '';
|
|
12000
|
+
/** 레이블 너비 */
|
|
11656
12001
|
labelWidth = '';
|
|
12002
|
+
/** 레이블 영역 아이콘 */
|
|
11657
12003
|
icon = undefined;
|
|
12004
|
+
/** 레이블 툴팁 텍스트 */
|
|
11658
12005
|
labelTooltip = '';
|
|
12006
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
11659
12007
|
labelTooltipProps = null;
|
|
11660
12008
|
// props - custom styles
|
|
12009
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
11661
12010
|
inputStyle = {};
|
|
11662
12011
|
internalValue = null;
|
|
11663
12012
|
passwordVisible = false;
|
|
11664
12013
|
nativeEl = undefined;
|
|
11665
12014
|
formField;
|
|
12015
|
+
/** 폼 연동용 name 속성 */
|
|
11666
12016
|
name = nanoid$1();
|
|
12017
|
+
/** 값이 변경될 때 발생합니다. */
|
|
11667
12018
|
input;
|
|
12019
|
+
/** 포커스될 때 발생합니다. */
|
|
11668
12020
|
focus;
|
|
12021
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
11669
12022
|
blur;
|
|
11670
12023
|
valueChanged(newValue) {
|
|
11671
12024
|
this.internalValue = newValue;
|
|
@@ -11676,18 +12029,23 @@ class SdInput {
|
|
|
11676
12029
|
this.input?.emit(this.value);
|
|
11677
12030
|
}
|
|
11678
12031
|
}
|
|
12032
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
11679
12033
|
async sdGetNativeElement() {
|
|
11680
12034
|
return this.nativeEl || null;
|
|
11681
12035
|
}
|
|
12036
|
+
/** 유효성 검사를 실행합니다. */
|
|
11682
12037
|
async sdValidate() {
|
|
11683
12038
|
this.formField?.sdValidate();
|
|
11684
12039
|
}
|
|
12040
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
11685
12041
|
async sdReset() {
|
|
11686
12042
|
this.formField?.sdReset();
|
|
11687
12043
|
}
|
|
12044
|
+
/** 유효성 상태만 초기화합니다. */
|
|
11688
12045
|
async sdResetValidate() {
|
|
11689
12046
|
this.formField?.sdResetValidation();
|
|
11690
12047
|
}
|
|
12048
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
11691
12049
|
async sdFocus() {
|
|
11692
12050
|
this.formField?.sdFocus();
|
|
11693
12051
|
}
|
|
@@ -11735,12 +12093,12 @@ class SdInput {
|
|
|
11735
12093
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
11736
12094
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
11737
12095
|
};
|
|
11738
|
-
return (hAsync("sd-field", { key: '
|
|
12096
|
+
return (hAsync("sd-field", { key: '7444ee5ebb482fe9c4f837114456cab90de6b3aa', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0dbb6bc35522fb2d0c6d6d147756954ed96d2467', class: "sd-input__content" }, hAsync("slot", { key: 'd5e8488bc3e29bd671bb337051d7b768c3c37c4b', name: "prefix" }), hAsync("input", { key: '9dff73dbc5af19b0e2f19e95a26ad32211761484', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'f1020b3ab68d5db6f83a2d6ba84722faa76c354e', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '547a309bb4434e558cf8b33fe8bcd51533d36cd5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
11739
12097
|
if (this.disabled || this.readonly)
|
|
11740
12098
|
return;
|
|
11741
12099
|
this.internalValue = '';
|
|
11742
12100
|
await this.formField?.sdValidate();
|
|
11743
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
12101
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '39c77e164b08d4a0169f76c1b8dc519e0f39d993', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
11744
12102
|
if (this.disabled || this.readonly)
|
|
11745
12103
|
return;
|
|
11746
12104
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -11933,7 +12291,9 @@ class SdKeyValueTable {
|
|
|
11933
12291
|
* - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
11934
12292
|
*/
|
|
11935
12293
|
radius = 'default';
|
|
12294
|
+
/** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
|
|
11936
12295
|
change;
|
|
12296
|
+
/** search 패널의 검색 버튼 클릭 시 발생합니다. */
|
|
11937
12297
|
searchEvent;
|
|
11938
12298
|
emit = (name, value) => {
|
|
11939
12299
|
this.change.emit({ name, value });
|
|
@@ -12169,9 +12529,13 @@ class SdLinearProgress {
|
|
|
12169
12529
|
constructor(hostRef) {
|
|
12170
12530
|
registerInstance(this, hostRef);
|
|
12171
12531
|
}
|
|
12532
|
+
/** true이면 진행률 없이 무한 애니메이션 표시 */
|
|
12172
12533
|
indeterminate = false;
|
|
12534
|
+
/** 진행률 (0–100) */
|
|
12173
12535
|
value = 0;
|
|
12536
|
+
/** 색상 타입 */
|
|
12174
12537
|
type = 'primary';
|
|
12538
|
+
/** 하단에 표시할 레이블 텍스트 */
|
|
12175
12539
|
label;
|
|
12176
12540
|
get clampedValue() {
|
|
12177
12541
|
if (!Number.isFinite(this.value))
|
|
@@ -12179,8 +12543,7 @@ class SdLinearProgress {
|
|
|
12179
12543
|
return Math.max(0, Math.min(100, this.value));
|
|
12180
12544
|
}
|
|
12181
12545
|
render() {
|
|
12182
|
-
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ??
|
|
12183
|
-
LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12546
|
+
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ?? LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12184
12547
|
const valueColor = this.clampedValue === 0 ? LINEAR_PROGRESS_COLORS.valueZero : fillColor;
|
|
12185
12548
|
const hostStyle = {
|
|
12186
12549
|
'--sd-linear-progress-track-color': LINEAR_PROGRESS_COLORS.track,
|
|
@@ -12196,7 +12559,7 @@ class SdLinearProgress {
|
|
|
12196
12559
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
12197
12560
|
};
|
|
12198
12561
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
12199
|
-
return (hAsync(Host, { key: '
|
|
12562
|
+
return (hAsync(Host, { key: '232520f9e720d13e28bbac8f61864e943f03c12e', style: hostStyle }, hAsync("div", { key: '6c5659e65da3f6d01c1029d9441f8619c304935c', class: "sd-linear-progress__track" }, hAsync("div", { key: '81f1c5ca5e4422e33f5505eda07fd4a04b24465c', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'd3542eddf302448742a3564c6f48d4d3f71d3733', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: 'f9c650167b1d9653a6745399226e480f15c19f65', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'fa8759f871902a4c3ebf0d982fe9b63d956a2f24', class: "sd-linear-progress__label" }, this.label)));
|
|
12200
12563
|
}
|
|
12201
12564
|
static get style() { return sdLinearProgressCss(); }
|
|
12202
12565
|
static get cmpMeta() { return {
|
|
@@ -12222,18 +12585,20 @@ class SdLoadingContainer {
|
|
|
12222
12585
|
}
|
|
12223
12586
|
visible = false;
|
|
12224
12587
|
message = '';
|
|
12588
|
+
/** 로딩 오버레이를 표시합니다. */
|
|
12225
12589
|
async show(options = {}) {
|
|
12226
12590
|
this.message = options.message ?? '';
|
|
12227
12591
|
this.visible = true;
|
|
12228
12592
|
}
|
|
12593
|
+
/** 로딩 오버레이를 숨깁니다. */
|
|
12229
12594
|
async hide() {
|
|
12230
12595
|
this.visible = false;
|
|
12231
12596
|
}
|
|
12232
12597
|
render() {
|
|
12233
|
-
return (hAsync("div", { key: '
|
|
12598
|
+
return (hAsync("div", { key: 'b8efbc6422fded2472a6e575c9a7102375f90600', class: {
|
|
12234
12599
|
'sd-loading-container': true,
|
|
12235
12600
|
'sd-loading-container--visible': this.visible,
|
|
12236
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
12601
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '1ff327157be008e278636d49069945e553c1ecbd', class: "sd-loading-container__backdrop" }), hAsync("div", { key: 'd55d2ab11528e35c04e8dd98f8c10d0f913a536e', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '29060ee18eb4e5a47bae25462abe11b8d5abfb0c', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'cf0478da282996ba4f7ecb920d8262181369af8a', class: "sd-loading-container__message" }, this.message))));
|
|
12237
12602
|
}
|
|
12238
12603
|
static get style() { return sdLoadingContainerCss(); }
|
|
12239
12604
|
static get cmpMeta() { return {
|
|
@@ -12285,13 +12650,21 @@ class SdLoadingModal {
|
|
|
12285
12650
|
registerInstance(this, hostRef);
|
|
12286
12651
|
this.click = createEvent(this, "sdClick", 7);
|
|
12287
12652
|
}
|
|
12653
|
+
/** 모달 상태 (loading: 로딩 중, error: 에러) */
|
|
12288
12654
|
state = 'loading';
|
|
12655
|
+
/** 표시할 메시지 (배열이면 여러 줄로 렌더링) */
|
|
12289
12656
|
message = '';
|
|
12657
|
+
/** 하단 버튼 표시 여부 */
|
|
12290
12658
|
useButton = false;
|
|
12659
|
+
/** 버튼 레이블 (없으면 state에 따른 기본값 사용) */
|
|
12291
12660
|
buttonLabel = '';
|
|
12661
|
+
/** 모달 너비 */
|
|
12292
12662
|
width;
|
|
12663
|
+
/** 모달 높이 */
|
|
12293
12664
|
height;
|
|
12665
|
+
/** sd-circle-progress에 전달할 진행률 (0–100) */
|
|
12294
12666
|
progress;
|
|
12667
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
12295
12668
|
click;
|
|
12296
12669
|
get resolvedState() {
|
|
12297
12670
|
return this.state ?? 'loading';
|
|
@@ -12330,7 +12703,7 @@ class SdLoadingModal {
|
|
|
12330
12703
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
12331
12704
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
12332
12705
|
};
|
|
12333
|
-
return (hAsync(Host, { key: '
|
|
12706
|
+
return (hAsync(Host, { key: '0f3719ca22408ff2739f3997e693fe0e17cb32ab', style: hostStyle }, hAsync("div", { key: '25501b81a4514315bd3b408bf958f549b099c5a5', class: "sd-loading-modal" }, hAsync("div", { key: 'f5e6cf6334454a8455f95544a934fc245bddbbe6', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '7629809572661e28f9564db1d06e882cb64580e8', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '36e1b978e1cc4ef56b8072d1d6dab83807eca951', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '218cb045df7b0dafc49024fc905bd88c7b12fcff', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
12334
12707
|
}
|
|
12335
12708
|
static get style() { return sdLoadingModalCss(); }
|
|
12336
12709
|
static get cmpMeta() { return {
|
|
@@ -12459,9 +12832,11 @@ class SdModalContainer {
|
|
|
12459
12832
|
registerInstance(this, hostRef);
|
|
12460
12833
|
}
|
|
12461
12834
|
get el() { return getElement(this); }
|
|
12835
|
+
/** 마지막 모달이 닫힐 때 자신을 DOM에서 제거할지 여부 */
|
|
12462
12836
|
autoRemove = false;
|
|
12463
12837
|
entries = [];
|
|
12464
12838
|
layerRefs = new Map();
|
|
12839
|
+
/** 확인 모달을 열고 모달 ID를 반환합니다. */
|
|
12465
12840
|
async open(options, modalRef) {
|
|
12466
12841
|
const id = `modal-${++modalIdCounter}`;
|
|
12467
12842
|
const modalEl = this.createConfirmModal(id, options);
|
|
@@ -12476,6 +12851,7 @@ class SdModalContainer {
|
|
|
12476
12851
|
});
|
|
12477
12852
|
return id;
|
|
12478
12853
|
}
|
|
12854
|
+
/** 로딩 모달을 열고 모달 ID를 반환합니다. */
|
|
12479
12855
|
async openLoading(options, modalRef) {
|
|
12480
12856
|
const id = `modal-${++modalIdCounter}`;
|
|
12481
12857
|
const modalEl = this.createLoadingModal(id, options);
|
|
@@ -12490,6 +12866,7 @@ class SdModalContainer {
|
|
|
12490
12866
|
});
|
|
12491
12867
|
return id;
|
|
12492
12868
|
}
|
|
12869
|
+
/** 커스텀 엘리먼트를 모달로 등록하고 모달 ID를 반환합니다. */
|
|
12493
12870
|
async createCustom(element, options, modalRef) {
|
|
12494
12871
|
const id = `modal-${++modalIdCounter}`;
|
|
12495
12872
|
element.setAttribute('data-modal-id', id);
|
|
@@ -12535,12 +12912,14 @@ class SdModalContainer {
|
|
|
12535
12912
|
unregisterModal(entry.id);
|
|
12536
12913
|
}
|
|
12537
12914
|
}
|
|
12915
|
+
/** 지정한 ID의 모달을 닫습니다. */
|
|
12538
12916
|
async dismissById(id, reason) {
|
|
12539
12917
|
const entry = this.entries.find(e => e.id === id);
|
|
12540
12918
|
if (!entry)
|
|
12541
12919
|
return;
|
|
12542
12920
|
this.requestDismiss(id, reason);
|
|
12543
12921
|
}
|
|
12922
|
+
/** 열려있는 모달의 props를 동적으로 업데이트합니다. */
|
|
12544
12923
|
async update(id, props) {
|
|
12545
12924
|
const entry = this.entries.find(e => e.id === id && !e.closing);
|
|
12546
12925
|
if (!entry)
|
|
@@ -12896,43 +13275,77 @@ class SdNumberInput {
|
|
|
12896
13275
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
12897
13276
|
}
|
|
12898
13277
|
get el() { return getElement(this); }
|
|
13278
|
+
/** 입력 크기 */
|
|
12899
13279
|
size = 'sm';
|
|
13280
|
+
/** 최솟값 */
|
|
12900
13281
|
min = Number.NEGATIVE_INFINITY;
|
|
13282
|
+
/** 최댓값 */
|
|
12901
13283
|
max = Number.POSITIVE_INFINITY;
|
|
13284
|
+
/** 스텝 단위 */
|
|
12902
13285
|
step = 1;
|
|
13286
|
+
/** 증감 버튼 표시 여부 */
|
|
12903
13287
|
useButton = false;
|
|
13288
|
+
/** 소수점 입력 허용 여부 */
|
|
12904
13289
|
useDecimal = false;
|
|
13290
|
+
/** 입력 값 */
|
|
12905
13291
|
value = null;
|
|
13292
|
+
/** 레이블 텍스트 */
|
|
12906
13293
|
label;
|
|
13294
|
+
/** 레이블 너비 */
|
|
12907
13295
|
labelWidth = '';
|
|
13296
|
+
/** 레이블 영역 아이콘 */
|
|
12908
13297
|
icon = undefined;
|
|
13298
|
+
/** 레이블 툴팁 텍스트 */
|
|
12909
13299
|
labelTooltip = '';
|
|
13300
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
12910
13301
|
labelTooltipProps = null;
|
|
13302
|
+
/** 필드 우측 어드온 레이블 */
|
|
12911
13303
|
addonLabel = '';
|
|
13304
|
+
/** 어드온 정렬 방향 */
|
|
12912
13305
|
addonAlign = 'start';
|
|
13306
|
+
/** 플레이스홀더 텍스트 */
|
|
12913
13307
|
placeholder = '입력해 주세요.';
|
|
13308
|
+
/** 비활성 상태 여부 */
|
|
12914
13309
|
disabled = false;
|
|
13310
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
12915
13311
|
width;
|
|
13312
|
+
/** 유효성 검사 규칙 목록 */
|
|
12916
13313
|
rules = [];
|
|
13314
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
12917
13315
|
autoFocus = false;
|
|
13316
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
12918
13317
|
status;
|
|
13318
|
+
/** 필드 하단 힌트 텍스트 */
|
|
12919
13319
|
hint = '';
|
|
13320
|
+
/** 에러 메시지 */
|
|
12920
13321
|
errorMessage = '';
|
|
13322
|
+
/** 입력 앞에 표시할 접두 텍스트 */
|
|
12921
13323
|
inputPrefix = '';
|
|
13324
|
+
/** 입력 뒤에 표시할 접미 텍스트 */
|
|
12922
13325
|
inputSuffix = '';
|
|
13326
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
12923
13327
|
inputClass = '';
|
|
13328
|
+
/** 읽기 전용 여부 */
|
|
12924
13329
|
readonly = false;
|
|
13330
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
12925
13331
|
inputStyle = {};
|
|
13332
|
+
/** 에러 상태 여부 */
|
|
12926
13333
|
error = false;
|
|
13334
|
+
/** 포커스 상태 여부 */
|
|
12927
13335
|
focused = false;
|
|
13336
|
+
/** 호버 상태 여부 */
|
|
12928
13337
|
hovered = false;
|
|
12929
13338
|
internalValue = null;
|
|
12930
13339
|
displayValue = '';
|
|
12931
13340
|
nativeEl = undefined;
|
|
12932
13341
|
formField;
|
|
13342
|
+
/** 폼 연동용 name 속성 */
|
|
12933
13343
|
name = nanoid$1();
|
|
13344
|
+
/** 값이 변경될 때 발생합니다. */
|
|
12934
13345
|
update;
|
|
13346
|
+
/** 포커스될 때 발생합니다. */
|
|
12935
13347
|
focus;
|
|
13348
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
12936
13349
|
blur;
|
|
12937
13350
|
toNumber(val) {
|
|
12938
13351
|
if (val === null || val === undefined || val === '')
|
|
@@ -13010,18 +13423,23 @@ class SdNumberInput {
|
|
|
13010
13423
|
this.update?.emit(newValue);
|
|
13011
13424
|
}
|
|
13012
13425
|
}
|
|
13426
|
+
/** 유효성 검사를 실행합니다. */
|
|
13013
13427
|
async sdValidate() {
|
|
13014
13428
|
this.formField?.sdValidate();
|
|
13015
13429
|
}
|
|
13430
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
13016
13431
|
async sdReset() {
|
|
13017
13432
|
this.formField?.sdReset();
|
|
13018
13433
|
}
|
|
13434
|
+
/** 유효성 상태만 초기화합니다. */
|
|
13019
13435
|
async sdResetValidate() {
|
|
13020
13436
|
this.formField?.sdResetValidation();
|
|
13021
13437
|
}
|
|
13438
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
13022
13439
|
async sdFocus() {
|
|
13023
13440
|
this.formField?.sdFocus();
|
|
13024
13441
|
}
|
|
13442
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
13025
13443
|
async sdGetNativeElement() {
|
|
13026
13444
|
return this.nativeEl || null;
|
|
13027
13445
|
}
|
|
@@ -13168,15 +13586,15 @@ class SdNumberInput {
|
|
|
13168
13586
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
13169
13587
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
13170
13588
|
};
|
|
13171
|
-
return (hAsync("sd-field", { key: '
|
|
13589
|
+
return (hAsync("sd-field", { key: 'f07710abbe74849369a3d0d6444750f71ed75e7b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ad70ff68bb24fe02c25a57dd3de0b5ef38ceef8a', class: {
|
|
13172
13590
|
'sd-number-input__content': true,
|
|
13173
13591
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
13174
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
13592
|
+
} }, this.useButton && (hAsync("button", { key: '90305a8863c6b6ba3d3afce695c5f61204424c46', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'e6440e5b63d4860d05f0573690a4064f7e6729ac', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
13175
13593
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13176
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
13594
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: 'ae2e8d052471925a5c794dcf1041a7ddbfe66652', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: 'a19917bfbe10b6d121e61e374a134207c9eb7fd7', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
13177
13595
|
textAlign: this.useButton ? 'center' : 'right',
|
|
13178
13596
|
...this.inputStyle,
|
|
13179
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
13597
|
+
} }), this.inputSuffix && hAsync("span", { key: '352e2a645c8db62c8d887b1a1f490ade187d05f0', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '5c4f1153f6488cb95502bfa7f2bcad073bccb593', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'c9e0924126fb39492e8a696fa2628f367b8e2058', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
13180
13598
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13181
13599
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
13182
13600
|
}
|
|
@@ -13312,9 +13730,13 @@ class SdPagination {
|
|
|
13312
13730
|
registerInstance(this, hostRef);
|
|
13313
13731
|
this.pageChange = createEvent(this, "sdPageChange", 7);
|
|
13314
13732
|
}
|
|
13733
|
+
/** 현재 페이지 번호 */
|
|
13315
13734
|
currentPage = 1;
|
|
13735
|
+
/** 마지막 페이지 번호 */
|
|
13316
13736
|
lastPage = 1;
|
|
13737
|
+
/** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
|
|
13317
13738
|
simple = false;
|
|
13739
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
13318
13740
|
pageChange;
|
|
13319
13741
|
get pageNumbers() {
|
|
13320
13742
|
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
@@ -13386,13 +13808,13 @@ class SdPagination {
|
|
|
13386
13808
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
13387
13809
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
13388
13810
|
};
|
|
13389
|
-
return (hAsync("div", { key: '
|
|
13811
|
+
return (hAsync("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
|
|
13390
13812
|
'sd-pagination': true,
|
|
13391
13813
|
'sd-pagination--simple': this.simple,
|
|
13392
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
13814
|
+
}, style: cssVars }, hAsync("div", { key: '4c23bdfb9a58950a04107fc4b4c921bbafa4e601', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
13393
13815
|
'sd-pagination__item': true,
|
|
13394
13816
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
13395
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
13817
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
13396
13818
|
}
|
|
13397
13819
|
static get style() { return sdPaginationCss(); }
|
|
13398
13820
|
static get cmpMeta() { return {
|
|
@@ -13426,22 +13848,38 @@ class SdPopover {
|
|
|
13426
13848
|
this.showChange = createEvent(this, "sdShowChange", 7);
|
|
13427
13849
|
}
|
|
13428
13850
|
get el() { return getElement(this); }
|
|
13851
|
+
/** 팝오버 표시 여부 */
|
|
13429
13852
|
show = false;
|
|
13853
|
+
/** 팝오버를 표시할 방향 */
|
|
13430
13854
|
placement = 'bottom';
|
|
13855
|
+
/** 아이콘 트리거 색상 */
|
|
13431
13856
|
color = '#01BB4B';
|
|
13857
|
+
/** 아이콘 트리거 아이콘명 */
|
|
13432
13858
|
icon = 'helpOutline';
|
|
13859
|
+
/** 아이콘 트리거 크기 */
|
|
13433
13860
|
iconSize = 12;
|
|
13861
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
13434
13862
|
label = '';
|
|
13863
|
+
/** 버튼 트리거 프리셋 */
|
|
13435
13864
|
name = 'primary_sm';
|
|
13865
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
13436
13866
|
rightIcon;
|
|
13867
|
+
/** 스크린리더용 접근성 레이블 */
|
|
13437
13868
|
ariaLabel = '';
|
|
13869
|
+
/** 비활성 상태 여부 */
|
|
13438
13870
|
disabled = false;
|
|
13871
|
+
/** 버튼 type 속성 */
|
|
13439
13872
|
type = 'button';
|
|
13873
|
+
/** 팝오버 메뉴 제목 */
|
|
13440
13874
|
menuTitle;
|
|
13875
|
+
/** 팝오버 하단 좌측 링크 옵션 */
|
|
13441
13876
|
leftLink;
|
|
13877
|
+
/** 팝오버 하단 버튼 옵션 */
|
|
13442
13878
|
button;
|
|
13879
|
+
/** 팝오버 메뉴에 추가할 클래스 */
|
|
13443
13880
|
menuClass = '';
|
|
13444
13881
|
slotContentHTML = '';
|
|
13882
|
+
/** 팝오버 표시 상태가 바뀔 때 발생합니다. */
|
|
13445
13883
|
showChange;
|
|
13446
13884
|
buttonEl;
|
|
13447
13885
|
setShow = (next) => {
|
|
@@ -13476,17 +13914,17 @@ class SdPopover {
|
|
|
13476
13914
|
const leftLink = this.leftLink;
|
|
13477
13915
|
const button = this.button;
|
|
13478
13916
|
const hasFooter = !!leftLink || !!button;
|
|
13479
|
-
return (hAsync(Fragment, { key: '
|
|
13917
|
+
return (hAsync(Fragment, { key: '94fcf54c8b20ffd1bcf2c7f540de31e1f41154fa' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '9f1585f2d268452f3d5c713e30ff865c3fc5fbac', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: '2cd2103f56c45364df5db9b73a2d89447b7c2bcc', class: {
|
|
13480
13918
|
'sd-floating-menu': true,
|
|
13481
13919
|
'sd-floating-menu--popover': true,
|
|
13482
13920
|
[`sd-floating-menu--${placement}`]: true,
|
|
13483
13921
|
[menuClass]: menuClass !== '',
|
|
13484
13922
|
}, style: {
|
|
13485
13923
|
'--sd-floating-bg': popoverTokens.popover.default.bg,
|
|
13486
|
-
} }, hAsync("i", { key: '
|
|
13924
|
+
} }, hAsync("i", { key: '5fd6c333790d3bb45bf4d43391ed1457d5eb54c3', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '062b11e3b6cee1e87f20064ab62a589a23f3eb26' })), hAsync("div", { key: 'b863abd8e31c8ce0dfddfdb25b6a49be69f34da1', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '1873c595d7ad91b3a7c71d979414820694c23ff5', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (hAsync("div", { key: '7a197b43d34a59ec298ed5e733cae0f3390c87a3', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (hAsync("div", { key: 'be9034b4150421be08c17978beba643e73c5568d', class: {
|
|
13487
13925
|
'sd-floating-menu__buttons': true,
|
|
13488
13926
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
13489
|
-
} }, leftLink && (hAsync("sd-text-link", { key: '
|
|
13927
|
+
} }, leftLink && (hAsync("sd-text-link", { key: '890a163609b8544450ad1b8c009648d73ef0d269', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: '128270add7ea99f7c9f61abe9f2a113f152465d8', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), hAsync("sd-ghost-button", { key: 'bc4c4d982da8fe72c85cd4ae7ba6cd2e09154164', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
13490
13928
|
}
|
|
13491
13929
|
static get style() { return sdPopoverCss(); }
|
|
13492
13930
|
static get cmpMeta() { return {
|
|
@@ -13587,12 +14025,16 @@ class SdPopup {
|
|
|
13587
14025
|
registerInstance(this, hostRef);
|
|
13588
14026
|
this.submit = createEvent(this, "sdSubmit", 7);
|
|
13589
14027
|
}
|
|
14028
|
+
/** 팝업 헤더에 표시할 제목 */
|
|
13590
14029
|
popupTitle = '';
|
|
14030
|
+
/** 팝업 타입 */
|
|
13591
14031
|
type = 'default';
|
|
13592
14032
|
// 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
13593
|
-
|
|
14033
|
+
/** 하단 footer 영역 표시 여부 */
|
|
13594
14034
|
useFooter = true;
|
|
14035
|
+
/** 확인 버튼 커스텀 props */
|
|
13595
14036
|
submitButtonProps;
|
|
14037
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
13596
14038
|
submit;
|
|
13597
14039
|
render() {
|
|
13598
14040
|
const cssVars = {
|
|
@@ -13618,7 +14060,7 @@ class SdPopup {
|
|
|
13618
14060
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
13619
14061
|
...this.submitButtonProps,
|
|
13620
14062
|
};
|
|
13621
|
-
return (hAsync("div", { key: '
|
|
14063
|
+
return (hAsync("div", { key: '4455120f02fc1df1b1661062a22f3d82508627c4', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '96a5e7cdc21fa239e4275f4b57379f36246048f4', class: "sd-popup__header" }, hAsync("h2", { key: 'cdf8d05561f470fef31c46e6508e1e0c41aa7fa9', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'ddb32332f8822634f544f2fa5a246c5f37c7fcc2', class: "sd-popup__body" }, hAsync("slot", { key: '8f36daf8c918da6babcbb4383957e979930bfd73' })), this.useFooter && (hAsync("footer", { key: '2b84ed134a8d53633bb4feb7ab423e58955dfdae', class: "sd-popup__footer" }, hAsync("div", { key: '95e55875b38102ff809e752a3cc647dc830699a9', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: 'fbd86c77e1117018793279c9b90fd8e2f6db4934', name: "footer-left" })), hAsync("sd-button", { key: 'e8710c15d20e52d0476e7f656e800cda008187d8', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
13622
14064
|
}
|
|
13623
14065
|
static get style() { return sdPopupCss(); }
|
|
13624
14066
|
static get cmpMeta() { return {
|
|
@@ -13642,13 +14084,21 @@ class SdPortal {
|
|
|
13642
14084
|
this.close = createEvent(this, "sdClose", 3);
|
|
13643
14085
|
}
|
|
13644
14086
|
get hostEl() { return getElement(this); }
|
|
14087
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
13645
14088
|
to = 'body';
|
|
14089
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
13646
14090
|
parentRef = null;
|
|
14091
|
+
/** [x, y] 오프셋 (px) */
|
|
13647
14092
|
offset = [0, 4];
|
|
14093
|
+
/** 뷰포트 경계 여백 (px) */
|
|
13648
14094
|
viewportPadding = 0;
|
|
13649
|
-
|
|
14095
|
+
/** z-index */
|
|
14096
|
+
zIndex = 996;
|
|
14097
|
+
/** 표시 여부 */
|
|
13650
14098
|
open = false;
|
|
14099
|
+
/** 콘텐츠를 표시할 방향 (공간이 부족하면 자동으로 반대 방향으로 전환) */
|
|
13651
14100
|
placement = 'bottom';
|
|
14101
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
13652
14102
|
close;
|
|
13653
14103
|
container;
|
|
13654
14104
|
wrapper;
|
|
@@ -13687,13 +14137,27 @@ class SdPortal {
|
|
|
13687
14137
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
13688
14138
|
return el instanceof HTMLElement ? el : document.body;
|
|
13689
14139
|
}
|
|
14140
|
+
/**
|
|
14141
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
14142
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
14143
|
+
*/
|
|
14144
|
+
resolveZIndex() {
|
|
14145
|
+
const base = this.zIndex ?? 996;
|
|
14146
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
14147
|
+
if (!layer)
|
|
14148
|
+
return base;
|
|
14149
|
+
const container = layer.closest('.sd-modal-container');
|
|
14150
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
14151
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
14152
|
+
return Math.max(base, modalZIndex + 1);
|
|
14153
|
+
}
|
|
13690
14154
|
createWrapper() {
|
|
13691
14155
|
this.wrapper = document.createElement('div');
|
|
13692
14156
|
Object.assign(this.wrapper.style, {
|
|
13693
14157
|
position: 'fixed',
|
|
13694
14158
|
top: '0',
|
|
13695
14159
|
left: '0',
|
|
13696
|
-
zIndex:
|
|
14160
|
+
zIndex: this.resolveZIndex().toString(),
|
|
13697
14161
|
opacity: '0',
|
|
13698
14162
|
transition: 'opacity 0.15s ease-out',
|
|
13699
14163
|
boxSizing: 'border-box',
|
|
@@ -13859,8 +14323,7 @@ class SdPortal {
|
|
|
13859
14323
|
return scrollParents;
|
|
13860
14324
|
}
|
|
13861
14325
|
isInsideTarget(target) {
|
|
13862
|
-
return !!(
|
|
13863
|
-
(this.parentRef?.contains(target)));
|
|
14326
|
+
return !!(this.wrapper?.contains(target) || this.parentRef?.contains(target));
|
|
13864
14327
|
}
|
|
13865
14328
|
// 외부 클릭 감지
|
|
13866
14329
|
handleMouseDown(e) {
|
|
@@ -13876,7 +14339,7 @@ class SdPortal {
|
|
|
13876
14339
|
this.close.emit();
|
|
13877
14340
|
}
|
|
13878
14341
|
render() {
|
|
13879
|
-
return hAsync("slot", { key: '
|
|
14342
|
+
return hAsync("slot", { key: 'e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf' });
|
|
13880
14343
|
}
|
|
13881
14344
|
static get watchers() { return {
|
|
13882
14345
|
"open": [{
|
|
@@ -13983,10 +14446,15 @@ class SdRadio {
|
|
|
13983
14446
|
registerInstance(this, hostRef);
|
|
13984
14447
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
13985
14448
|
}
|
|
14449
|
+
/** 라디오 그룹의 현재 선택 값 */
|
|
13986
14450
|
value;
|
|
14451
|
+
/** 이 라디오 아이템의 값 */
|
|
13987
14452
|
val;
|
|
14453
|
+
/** 비활성 상태 여부 */
|
|
13988
14454
|
disabled = false;
|
|
14455
|
+
/** 표시할 라벨 텍스트 */
|
|
13989
14456
|
label;
|
|
14457
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
13990
14458
|
update;
|
|
13991
14459
|
valueChanged(newValue) {
|
|
13992
14460
|
this.value = newValue;
|
|
@@ -14029,7 +14497,7 @@ class SdRadio {
|
|
|
14029
14497
|
'--sd-radio-label-color': RADIO_COLORS.label.default,
|
|
14030
14498
|
'--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
|
|
14031
14499
|
};
|
|
14032
|
-
return (hAsync("label", { key: '
|
|
14500
|
+
return (hAsync("label", { key: 'f220a45add2be550bc696cd2442b8520ea0143f0', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '64692f5bf49783f166be9327877a474816a556ca', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: '3c30268adcbd735857b4163ecba444b5a57cba08', class: "sd-radio__circle" }), this.label && (hAsync("span", { key: 'b641086ab4ff9161ba4fb733b87c751b6863fe06', class: "sd-radio__label", "data-label": this.label }, this.label))));
|
|
14033
14501
|
}
|
|
14034
14502
|
static get watchers() { return {
|
|
14035
14503
|
"value": [{
|
|
@@ -14154,11 +14622,17 @@ class SdRadioButton {
|
|
|
14154
14622
|
registerInstance(this, hostRef);
|
|
14155
14623
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14156
14624
|
}
|
|
14625
|
+
/** 현재 선택된 값 */
|
|
14157
14626
|
value;
|
|
14627
|
+
/** 라디오 버튼 옵션 목록 */
|
|
14158
14628
|
options = [];
|
|
14629
|
+
/** 버튼 크기 */
|
|
14159
14630
|
size = 'sm';
|
|
14631
|
+
/** 비활성 상태 여부 */
|
|
14160
14632
|
disabled = false;
|
|
14633
|
+
/** input name 속성 (없으면 자동 생성) */
|
|
14161
14634
|
name;
|
|
14635
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14162
14636
|
change;
|
|
14163
14637
|
componentWillLoad() {
|
|
14164
14638
|
this.size ??= 'sm';
|
|
@@ -14228,7 +14702,7 @@ class SdRadioButton {
|
|
|
14228
14702
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
14229
14703
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
14230
14704
|
};
|
|
14231
|
-
return (hAsync("div", { key: '
|
|
14705
|
+
return (hAsync("div", { key: 'c0ed4c6927bd32a7335e003856de4b43ead97b1c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
14232
14706
|
const isSelected = this.isOptionSelected(option);
|
|
14233
14707
|
const isDisabled = this.isOptionDisabled(option);
|
|
14234
14708
|
return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -14258,11 +14732,17 @@ class SdRadioGroup {
|
|
|
14258
14732
|
registerInstance(this, hostRef);
|
|
14259
14733
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14260
14734
|
}
|
|
14735
|
+
/** 현재 선택된 값 */
|
|
14261
14736
|
value;
|
|
14737
|
+
/** 라디오 옵션 목록 */
|
|
14262
14738
|
options = [];
|
|
14739
|
+
/** 옵션 배치 방향 */
|
|
14263
14740
|
direction = 'vertical';
|
|
14741
|
+
/** 비활성 상태 여부 */
|
|
14264
14742
|
disabled = false;
|
|
14743
|
+
/** input name 속성 */
|
|
14265
14744
|
groupName;
|
|
14745
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14266
14746
|
change;
|
|
14267
14747
|
valueChanged(newValue) {
|
|
14268
14748
|
this.value = newValue;
|
|
@@ -14280,7 +14760,7 @@ class SdRadioGroup {
|
|
|
14280
14760
|
return classes.join(' ');
|
|
14281
14761
|
}
|
|
14282
14762
|
render() {
|
|
14283
|
-
return (hAsync("div", { key: '
|
|
14763
|
+
return (hAsync("div", { key: '3a1694daddf5794a1598838c44bc965de2976770', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
14284
14764
|
return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
14285
14765
|
})));
|
|
14286
14766
|
}
|
|
@@ -14318,29 +14798,53 @@ class SdSelect {
|
|
|
14318
14798
|
static PORTAL_OFFSET_Y = 4;
|
|
14319
14799
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
14320
14800
|
get el() { return getElement(this); }
|
|
14801
|
+
/** 셀렉트 타입 (단일/다중/계층) */
|
|
14321
14802
|
type = 'default';
|
|
14803
|
+
/** 현재 선택된 값 */
|
|
14322
14804
|
value = null;
|
|
14805
|
+
/** 선택 옵션 목록 */
|
|
14323
14806
|
options = [];
|
|
14807
|
+
/** 값이 없을 때 표시할 플레이스홀더 */
|
|
14324
14808
|
placeholder = '선택';
|
|
14809
|
+
/** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
|
|
14325
14810
|
dropdownWidth = '';
|
|
14811
|
+
/** 드롭다운 최대 너비 */
|
|
14326
14812
|
maxDropdownWidth = '640px';
|
|
14813
|
+
/** 드롭다운 최대 높이 */
|
|
14327
14814
|
dropdownHeight = '260px';
|
|
14815
|
+
/** 비활성 상태 여부 */
|
|
14328
14816
|
disabled = false;
|
|
14817
|
+
/** 레이블 텍스트 */
|
|
14329
14818
|
label = '';
|
|
14819
|
+
/** 레이블 너비 */
|
|
14330
14820
|
labelWidth = '';
|
|
14821
|
+
/** 필드 우측 어드온 레이블 */
|
|
14331
14822
|
addonLabel = '';
|
|
14823
|
+
/** 어드온 정렬 방향 */
|
|
14332
14824
|
addonAlign = 'start';
|
|
14825
|
+
/** 에러 상태 여부 */
|
|
14333
14826
|
error = false;
|
|
14827
|
+
/** 필드 하단 힌트 텍스트 */
|
|
14334
14828
|
hint = '';
|
|
14829
|
+
/** 에러 메시지 */
|
|
14335
14830
|
errorMessage = '';
|
|
14831
|
+
/** 유효성 검사 규칙 목록 */
|
|
14336
14832
|
rules = [];
|
|
14833
|
+
/** 레이블 영역 아이콘 */
|
|
14337
14834
|
icon = undefined;
|
|
14835
|
+
/** 레이블 툴팁 텍스트 */
|
|
14338
14836
|
labelTooltip = '';
|
|
14837
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
14339
14838
|
labelTooltipProps = null;
|
|
14839
|
+
/** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
|
|
14340
14840
|
emitValue = false;
|
|
14841
|
+
/** 필드 너비 */
|
|
14341
14842
|
width = '';
|
|
14843
|
+
/** 드롭다운 내 검색 입력 표시 여부 */
|
|
14342
14844
|
useSearch = false;
|
|
14845
|
+
/** 전체 선택 시 표시할 레이블 */
|
|
14343
14846
|
allSelectedLabel = '전체';
|
|
14847
|
+
/** 전체 선택 체크박스 표시 여부 */
|
|
14344
14848
|
useSelectAll = false;
|
|
14345
14849
|
isOpen = false;
|
|
14346
14850
|
isAnimatingOut = false;
|
|
@@ -14349,13 +14853,17 @@ class SdSelect {
|
|
|
14349
14853
|
resolvedMaxDropdownWidth = '640px';
|
|
14350
14854
|
focused = false;
|
|
14351
14855
|
hovered = false;
|
|
14856
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14352
14857
|
update;
|
|
14858
|
+
/** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
|
|
14353
14859
|
dropDownShow;
|
|
14860
|
+
/** 셀렉트 트리거에 포커스를 이동합니다. */
|
|
14354
14861
|
async sdFocus() {
|
|
14355
14862
|
if (this.disabled)
|
|
14356
14863
|
return;
|
|
14357
14864
|
await this.triggerComponentRef?.sdFocus();
|
|
14358
14865
|
}
|
|
14866
|
+
/** 드롭다운을 엽니다. */
|
|
14359
14867
|
async sdOpen() {
|
|
14360
14868
|
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
14361
14869
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
@@ -14370,6 +14878,7 @@ class SdSelect {
|
|
|
14370
14878
|
triggerRef;
|
|
14371
14879
|
triggerComponentRef;
|
|
14372
14880
|
closeAnimationTimer;
|
|
14881
|
+
/** 폼 연동용 name 속성 */
|
|
14373
14882
|
name = nanoid$1();
|
|
14374
14883
|
triggerHasFocus = false;
|
|
14375
14884
|
watchIsOpen(newValue) {
|
|
@@ -14567,15 +15076,15 @@ class SdSelect {
|
|
|
14567
15076
|
this.closeDropdown();
|
|
14568
15077
|
},
|
|
14569
15078
|
};
|
|
14570
|
-
return (hAsync("sd-field", { key: '
|
|
15079
|
+
return (hAsync("sd-field", { key: '3387dc16a6f54bfae652338c71c4c0e1553828c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
14571
15080
|
this.hovered = true;
|
|
14572
15081
|
}, onMouseLeave: () => {
|
|
14573
15082
|
this.hovered = false;
|
|
14574
|
-
} }, hAsync("div", { key: '
|
|
15083
|
+
} }, hAsync("div", { key: '124325f8f6882a3c9ee1a1795ee969f13d67dfe2', class: "sd-select", ref: el => {
|
|
14575
15084
|
this.triggerRef = el;
|
|
14576
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
15085
|
+
} }, hAsync("sd-select-trigger", { key: '2e0e44ae666282d3931f9889650a7999929a312b', ref: el => {
|
|
14577
15086
|
this.triggerComponentRef = el;
|
|
14578
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '
|
|
15087
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'b6e97e43c5ea3a06fbb2976dab52d4f544822ae0', ...portalProps }, hAsync("sd-select-listbox", { key: '3d8a01c54667149507db2757d81813d2f285b32d', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
14579
15088
|
}
|
|
14580
15089
|
static get watchers() { return {
|
|
14581
15090
|
"isOpen": [{
|
|
@@ -14760,12 +15269,19 @@ class SdSelectListItem {
|
|
|
14760
15269
|
registerInstance(this, hostRef);
|
|
14761
15270
|
this.listItemClick = createEvent(this, "sdListItemClick", 7);
|
|
14762
15271
|
}
|
|
15272
|
+
/** 렌더링할 옵션 데이터 */
|
|
14763
15273
|
option;
|
|
15274
|
+
/** 계층 깊이 (1~3) */
|
|
14764
15275
|
depth = 1;
|
|
15276
|
+
/** 선택 상태 (null=중간) */
|
|
14765
15277
|
isSelected = false;
|
|
15278
|
+
/** 키보드 포커스 상태 여부 */
|
|
14766
15279
|
isFocused = false;
|
|
15280
|
+
/** 체크박스 표시 여부 */
|
|
14767
15281
|
useCheckbox = false;
|
|
15282
|
+
/** 다중 선택 시 (선택/전체) 카운트 */
|
|
14768
15283
|
countInfo;
|
|
15284
|
+
/** 항목 클릭 시 발생합니다. */
|
|
14769
15285
|
listItemClick;
|
|
14770
15286
|
get isGroup() {
|
|
14771
15287
|
return !!this.option.children;
|
|
@@ -14829,7 +15345,7 @@ class SdSelectListItem {
|
|
|
14829
15345
|
return (
|
|
14830
15346
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
14831
15347
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
14832
|
-
hAsync("div", { key: '
|
|
15348
|
+
hAsync("div", { key: '7717c82ea9f36bd44bf8a19d16ba7df6441f6715', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
14833
15349
|
'sd-select-list-item': true,
|
|
14834
15350
|
'sd-select-list-item--group': isGroup,
|
|
14835
15351
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -14839,7 +15355,7 @@ class SdSelectListItem {
|
|
|
14839
15355
|
'sd-select-list-item--focused': this.isFocused,
|
|
14840
15356
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14841
15357
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
14842
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
15358
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '68d8c03d580fc2c411ee4fba917207705f3cf2d2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: '56ae08c55215a3970df99ecd74549ded5667265c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
14843
15359
|
}
|
|
14844
15360
|
static get style() { return sdSelectListItemCss(); }
|
|
14845
15361
|
static get cmpMeta() { return {
|
|
@@ -14867,9 +15383,12 @@ class SdSelectListItemSearch {
|
|
|
14867
15383
|
this.searchFilter = createEvent(this, "sdSearchFilter", 7);
|
|
14868
15384
|
this.searchFocus = createEvent(this, "sdSearchFocus", 7);
|
|
14869
15385
|
}
|
|
15386
|
+
/** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
|
|
14870
15387
|
isScrolled = false;
|
|
14871
15388
|
searchText = '';
|
|
15389
|
+
/** 검색어가 변경될 때 발생합니다. */
|
|
14872
15390
|
searchFilter;
|
|
15391
|
+
/** 검색 입력에 포커스될 때 발생합니다. */
|
|
14873
15392
|
searchFocus;
|
|
14874
15393
|
inputEl;
|
|
14875
15394
|
debounceTimer;
|
|
@@ -14881,6 +15400,7 @@ class SdSelectListItemSearch {
|
|
|
14881
15400
|
});
|
|
14882
15401
|
});
|
|
14883
15402
|
}
|
|
15403
|
+
/** 검색 입력에 포커스를 이동합니다. */
|
|
14884
15404
|
async sdFocus() {
|
|
14885
15405
|
this.inputEl?.focus();
|
|
14886
15406
|
}
|
|
@@ -14907,15 +15427,15 @@ class SdSelectListItemSearch {
|
|
|
14907
15427
|
clearTimeout(this.debounceTimer);
|
|
14908
15428
|
}
|
|
14909
15429
|
render() {
|
|
14910
|
-
return (hAsync("div", { key: '
|
|
15430
|
+
return (hAsync("div", { key: 'fed1a43f1901d23c7c007a4597b95970c0aad4ad', class: {
|
|
14911
15431
|
'sd-select-list-item-search': true,
|
|
14912
15432
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
14913
|
-
} }, hAsync("div", { key: '
|
|
15433
|
+
} }, hAsync("div", { key: '23b278a4b40b7b8506a13f284b3759b96b613b99', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '2150f73e1f20f05a28407b984977f7e91131217e', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '7dc4470ea57b54ebc5f3313f6e22d100f4cc4591', ref: el => {
|
|
14914
15434
|
this.inputEl = el;
|
|
14915
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '
|
|
15435
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '60a363380da8689baa1e9e20b075df749846137a', type: "button", class: {
|
|
14916
15436
|
'sd-select-list-item-search__clear': true,
|
|
14917
15437
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
14918
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15438
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '7b27eb444864674578f97eaa374d1e9af486f97a', name: "close", size: 12, color: "#888888" })))));
|
|
14919
15439
|
}
|
|
14920
15440
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
14921
15441
|
static get cmpMeta() { return {
|
|
@@ -14939,18 +15459,28 @@ class SdSelectListbox {
|
|
|
14939
15459
|
registerInstance(this, hostRef);
|
|
14940
15460
|
this.optionSelect = createEvent(this, "sdOptionSelect", 7);
|
|
14941
15461
|
}
|
|
15462
|
+
/** 셀렉트 타입 */
|
|
14942
15463
|
type = 'default';
|
|
15464
|
+
/** 옵션 목록 */
|
|
14943
15465
|
options = [];
|
|
15466
|
+
/** 현재 선택 값 */
|
|
14944
15467
|
value = null;
|
|
15468
|
+
/** 값만 emit할지 여부 */
|
|
14945
15469
|
emitValue = false;
|
|
15470
|
+
/** 검색 기능 사용 여부 */
|
|
14946
15471
|
useSearch = false;
|
|
15472
|
+
/** 전체 선택 기능 사용 여부 */
|
|
14947
15473
|
useSelectAll = false;
|
|
15474
|
+
/** 트리거 너비 (드롭다운 최소 너비) */
|
|
14948
15475
|
triggerWidth = '200px';
|
|
15476
|
+
/** 드롭다운 최대 너비 */
|
|
14949
15477
|
maxWidth = '640px';
|
|
15478
|
+
/** 드롭다운 최대 높이 */
|
|
14950
15479
|
maxHeight = '260px';
|
|
14951
15480
|
searchKeyword = '';
|
|
14952
15481
|
isScrolled = false;
|
|
14953
15482
|
focusedIndex = -1;
|
|
15483
|
+
/** 옵션 선택 시 발생합니다. */
|
|
14954
15484
|
optionSelect;
|
|
14955
15485
|
listEl;
|
|
14956
15486
|
lastScrolledIndex = -1;
|
|
@@ -15289,9 +15819,9 @@ class SdSelectListbox {
|
|
|
15289
15819
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
15290
15820
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
15291
15821
|
};
|
|
15292
|
-
return (hAsync("div", { key: '
|
|
15822
|
+
return (hAsync("div", { key: '6ca1107a8aadc1fbae26f3d8d3385b355981b65e', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '8612b45a4e9b7d2701b8decd6865ebb50d6fcaa3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'c02c9c1d96176f94d2f83c66ad3e7cc0946c0270', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
15293
15823
|
this.listEl = el;
|
|
15294
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
15824
|
+
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: 'f4fe1769d14812ba63fb73ff21ebfdaaf9d76409', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
15295
15825
|
}
|
|
15296
15826
|
static get watchers() { return {
|
|
15297
15827
|
"searchKeyword": [{
|
|
@@ -15331,14 +15861,22 @@ class SdSelectTrigger {
|
|
|
15331
15861
|
this.triggerFocus = createEvent(this, "sdTriggerFocus", 7);
|
|
15332
15862
|
this.triggerBlur = createEvent(this, "sdTriggerBlur", 7);
|
|
15333
15863
|
}
|
|
15864
|
+
/** 표시할 선택된 값 텍스트 */
|
|
15334
15865
|
displayText = '';
|
|
15866
|
+
/** 미선택 상태 플레이스홀더 */
|
|
15335
15867
|
placeholder = '선택';
|
|
15868
|
+
/** 비활성 상태 여부 */
|
|
15336
15869
|
disabled = false;
|
|
15870
|
+
/** 드롭다운 열림 상태 */
|
|
15337
15871
|
isOpen = false;
|
|
15872
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
15338
15873
|
triggerClick;
|
|
15874
|
+
/** 트리거 포커스 시 발생합니다. */
|
|
15339
15875
|
triggerFocus;
|
|
15876
|
+
/** 트리거 블러 시 발생합니다. */
|
|
15340
15877
|
triggerBlur;
|
|
15341
15878
|
triggerEl;
|
|
15879
|
+
/** 트리거 엘리먼트에 포커스를 이동합니다. */
|
|
15342
15880
|
async sdFocus() {
|
|
15343
15881
|
if (this.disabled)
|
|
15344
15882
|
return;
|
|
@@ -15372,7 +15910,7 @@ class SdSelectTrigger {
|
|
|
15372
15910
|
? SELECT_COLORS.icon.disabled
|
|
15373
15911
|
: SELECT_COLORS.icon.default,
|
|
15374
15912
|
};
|
|
15375
|
-
return (hAsync("div", { key: '
|
|
15913
|
+
return (hAsync("div", { key: '7f5940ce19feb2d3ae9b2cbb6b5fdeb6d0151f61', ref: el => {
|
|
15376
15914
|
this.triggerEl = el;
|
|
15377
15915
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
15378
15916
|
'sd-select-trigger': true,
|
|
@@ -15383,7 +15921,7 @@ class SdSelectTrigger {
|
|
|
15383
15921
|
e.preventDefault();
|
|
15384
15922
|
this.handleClick();
|
|
15385
15923
|
}
|
|
15386
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
15924
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'b50dea3450ee6fd2bf30811cc33facf00761f0d1', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: '778b3d1c738951f9a18950b668a34a1bc36006ca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
15387
15925
|
'sd-select-trigger__icon': true,
|
|
15388
15926
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
15389
15927
|
} }))));
|
|
@@ -15468,9 +16006,13 @@ class SdSwitch {
|
|
|
15468
16006
|
registerInstance(this, hostRef);
|
|
15469
16007
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
15470
16008
|
}
|
|
16009
|
+
/** 현재 on/off 상태 */
|
|
15471
16010
|
value = false;
|
|
16011
|
+
/** 표시할 라벨 텍스트 */
|
|
15472
16012
|
label = '';
|
|
16013
|
+
/** 비활성 상태 여부 */
|
|
15473
16014
|
disabled = false;
|
|
16015
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
15474
16016
|
change;
|
|
15475
16017
|
get switchClasses() {
|
|
15476
16018
|
const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
|
|
@@ -15508,7 +16050,7 @@ class SdSwitch {
|
|
|
15508
16050
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
15509
16051
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
15510
16052
|
};
|
|
15511
|
-
return (hAsync("label", { key: '
|
|
16053
|
+
return (hAsync("label", { key: '2cbee35194a8218f1526ecd26d0ff0cc660ed5fb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '8c9a330a7b69035ace0644f0a2cab8f6f8672bfd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '738a28fb9c26628d6b67f03d0b75f4155ad85966', class: "sd-switch__track" }, hAsync("div", { key: '91b7bac6c4e48d1b5b1331713620a132e9921906', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'a9cdfb08c240f3d6a15bef3e119c0c02f3fe3462', class: "sd-switch__label" }, this.label)));
|
|
15512
16054
|
}
|
|
15513
16055
|
static get style() { return sdSwitchCss(); }
|
|
15514
16056
|
static get cmpMeta() { return {
|
|
@@ -15631,28 +16173,48 @@ class SdTable {
|
|
|
15631
16173
|
}
|
|
15632
16174
|
static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
|
|
15633
16175
|
get el() { return getElement(this); }
|
|
16176
|
+
/** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
|
|
15634
16177
|
tableId = nanoid(8);
|
|
15635
16178
|
fallbackTableId = nanoid(8);
|
|
16179
|
+
/** 컬럼 정의 목록 */
|
|
15636
16180
|
columns = [];
|
|
16181
|
+
/** 행 데이터 배열 */
|
|
15637
16182
|
rows;
|
|
16183
|
+
/** 현재 선택된 행 목록 */
|
|
15638
16184
|
selected = [];
|
|
16185
|
+
/** 행 고유 식별 필드명 */
|
|
15639
16186
|
rowKey = 'id';
|
|
16187
|
+
/** 행 선택(체크박스) 기능 활성화 여부 */
|
|
15640
16188
|
selectable = false;
|
|
16189
|
+
/** 컬럼 너비 조절 기능 활성화 여부 */
|
|
15641
16190
|
resizable = false;
|
|
16191
|
+
/** 테이블 너비 */
|
|
15642
16192
|
width;
|
|
16193
|
+
/** 테이블 높이 */
|
|
15643
16194
|
height;
|
|
16195
|
+
/** 헤더 고정(sticky) 여부 */
|
|
15644
16196
|
stickyHeader = false;
|
|
16197
|
+
/** 고정할 좌우 컬럼 수 */
|
|
15645
16198
|
stickyColumn = { left: 0, right: 0 };
|
|
16199
|
+
/** border-radius 제어 */
|
|
15646
16200
|
radius = 'default';
|
|
16201
|
+
/** 데이터 없을 때 표시할 메시지 */
|
|
15647
16202
|
noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
15648
16203
|
resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
16204
|
+
/** 로딩 스피너 표시 여부 */
|
|
15649
16205
|
isLoading = false;
|
|
16206
|
+
/** 페이지네이션 옵션 */
|
|
15650
16207
|
pagination;
|
|
16208
|
+
/** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
|
|
15651
16209
|
useInternalPagination = false;
|
|
16210
|
+
/** 페이지당 행 수 선택 셀렉트 표시 여부 */
|
|
15652
16211
|
useRowsPerPageSelect = false;
|
|
16212
|
+
/** 행 높이를 줄인 조밀 모드 여부 */
|
|
15653
16213
|
dense = false;
|
|
15654
16214
|
// ─── Virtual Scroll ───────────────────────────────────────────────
|
|
16215
|
+
/** 가상 스크롤 사용 여부 */
|
|
15655
16216
|
useVirtualScroll = false;
|
|
16217
|
+
/** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
|
|
15656
16218
|
rowHeight;
|
|
15657
16219
|
get effectiveRowHeight() {
|
|
15658
16220
|
if (this.rowHeight != null)
|
|
@@ -15661,19 +16223,27 @@ class SdTable {
|
|
|
15661
16223
|
? Number(TABLE_BODY_LAYOUT.dense.height)
|
|
15662
16224
|
: Number(TABLE_BODY_LAYOUT.default.height);
|
|
15663
16225
|
}
|
|
16226
|
+
/** 가상 스크롤 상하 버퍼 행 수 */
|
|
15664
16227
|
virtualBuffer = 5;
|
|
16228
|
+
/** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
|
|
15665
16229
|
virtualEndThreshold = 10;
|
|
15666
16230
|
// ─────────────────────────────────────────────────────────────────
|
|
16231
|
+
/** 페이지당 행 수 선택 옵션 목록 */
|
|
15667
16232
|
rowsPerPageOption = [
|
|
15668
16233
|
{ label: '10개씩 보기', value: 10 },
|
|
15669
16234
|
{ label: '25개씩 보기', value: 25 },
|
|
15670
16235
|
{ label: '50개씩 보기', value: 50 },
|
|
15671
16236
|
{ label: '100개씩 보기', value: 100 },
|
|
15672
16237
|
];
|
|
16238
|
+
/** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
|
|
15673
16239
|
sdSelectChange;
|
|
16240
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
15674
16241
|
sdPageChange;
|
|
16242
|
+
/** 페이지당 행 수가 변경될 때 발생합니다. */
|
|
15675
16243
|
sdRowsPerPageChange;
|
|
16244
|
+
/** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
|
|
15676
16245
|
sdVirtualUpdate;
|
|
16246
|
+
/** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
|
|
15677
16247
|
sdVirtualReachEnd;
|
|
15678
16248
|
currentPage = 1;
|
|
15679
16249
|
innerRowsPerPage = 10;
|
|
@@ -16078,6 +16648,7 @@ class SdTable {
|
|
|
16078
16648
|
isRowSelectedSync(row) {
|
|
16079
16649
|
return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
|
|
16080
16650
|
}
|
|
16651
|
+
/** 행이 선택되어 있는지 확인합니다. */
|
|
16081
16652
|
async isRowSelected(row) {
|
|
16082
16653
|
return this.isRowSelectedSync(row);
|
|
16083
16654
|
}
|
|
@@ -16094,6 +16665,7 @@ class SdTable {
|
|
|
16094
16665
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16095
16666
|
this.refreshChildrenSelection();
|
|
16096
16667
|
}
|
|
16668
|
+
/** 행 선택 상태를 토글합니다. */
|
|
16097
16669
|
async updateRowSelect(row) {
|
|
16098
16670
|
this.updateRowSelectSync(row);
|
|
16099
16671
|
}
|
|
@@ -16110,6 +16682,7 @@ class SdTable {
|
|
|
16110
16682
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16111
16683
|
this.refreshChildrenSelection();
|
|
16112
16684
|
}
|
|
16685
|
+
/** 전체 행 선택/해제를 처리합니다. */
|
|
16113
16686
|
async toggleSelectAll(checked, rows) {
|
|
16114
16687
|
this.toggleSelectAllSync(checked, rows);
|
|
16115
16688
|
}
|
|
@@ -16122,6 +16695,7 @@ class SdTable {
|
|
|
16122
16695
|
return true;
|
|
16123
16696
|
return null; // indeterminate
|
|
16124
16697
|
}
|
|
16698
|
+
/** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
|
|
16125
16699
|
async getIsAllChecked(rows) {
|
|
16126
16700
|
return this.getIsAllCheckedSync(rows);
|
|
16127
16701
|
}
|
|
@@ -16212,6 +16786,7 @@ class SdTable {
|
|
|
16212
16786
|
}
|
|
16213
16787
|
return base;
|
|
16214
16788
|
}
|
|
16789
|
+
/** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
|
|
16215
16790
|
async getStickyStyle(colIdx) {
|
|
16216
16791
|
return this.getStickyStyleSync(colIdx);
|
|
16217
16792
|
}
|
|
@@ -16351,6 +16926,7 @@ class SdTable {
|
|
|
16351
16926
|
this.propagateVirtualUpdate(true);
|
|
16352
16927
|
}
|
|
16353
16928
|
}
|
|
16929
|
+
/** 가상 스크롤 총 행 수를 설정합니다. */
|
|
16354
16930
|
async setRowCount(count) {
|
|
16355
16931
|
this.setRowCountSync(count);
|
|
16356
16932
|
}
|
|
@@ -16378,6 +16954,7 @@ class SdTable {
|
|
|
16378
16954
|
rowsPerPage: this.innerRowsPerPage,
|
|
16379
16955
|
};
|
|
16380
16956
|
}
|
|
16957
|
+
/** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
|
|
16381
16958
|
async getPaginationInfo() {
|
|
16382
16959
|
return this.getPaginationInfoSync();
|
|
16383
16960
|
}
|
|
@@ -16441,25 +17018,25 @@ class SdTable {
|
|
|
16441
17018
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
16442
17019
|
'--table-host-height': hostHeight,
|
|
16443
17020
|
};
|
|
16444
|
-
return (hAsync(Host, { key: '
|
|
17021
|
+
return (hAsync(Host, { key: '2606b0d7fc3657a8021a6dfc64672996b756f762', style: hostStyle }, hAsync("div", { key: '4def416edfe630ead35b80cb2f04081a89740f62', class: "sd-table__container", style: {
|
|
16445
17022
|
'--table-width': this.width,
|
|
16446
17023
|
'--pagination-height': `${paginationHeight}px`,
|
|
16447
|
-
} }, hAsync("div", { key: '
|
|
17024
|
+
} }, hAsync("div", { key: '316a359f2be84895719f452e056dcd2f54cd5b56', class: {
|
|
16448
17025
|
'sd-table__wrapper': true,
|
|
16449
17026
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
16450
17027
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
16451
|
-
} }, hAsync("div", { key: '
|
|
17028
|
+
} }, hAsync("div", { key: 'e798b58104f56b3250a7d74261a8c320a8049f28', class: {
|
|
16452
17029
|
'sd-table__scroll-container': true,
|
|
16453
17030
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
16454
17031
|
'sd-table__scroll-container--no-data': isNoData,
|
|
16455
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
17032
|
+
} }, this.isLoading && (hAsync("div", { key: 'af91877075c8d4ed8b608bdfdc7f04bd844f5574', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '2422c7020046fa468dbaaf34220230737cb6b02e', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'bd5c2237d8c3a34cc4bf12a187f471e22ce02efd', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '1e0da67564879a175e89a3482195742b1b4451dc', class: "sd-table__no-data" }, hAsync("div", { key: '391bc76e748d64b84c39de669396b2f5f288e5a1', class: "sd-table__no-data-content", ref: el => {
|
|
16456
17033
|
this.noDataContentEl = el;
|
|
16457
17034
|
if (el)
|
|
16458
17035
|
this.syncNoDataContentObserver();
|
|
16459
|
-
} }, hAsync("slot", { key: '
|
|
17036
|
+
} }, hAsync("slot", { key: '3e2e26f4951d9b834ae811906c137a78067fecab', name: "no-data" }, hAsync("span", { key: '54ed0371d60f5312376d8ffab50efd9ec0947729' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '46cab11834ca3f5aa9010bd6f603d301b2a54c9c', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
16460
17037
|
this.pagination.rowsPerPage > 0 &&
|
|
16461
17038
|
this.rowCount > 0 &&
|
|
16462
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
17039
|
+
!this.useVirtualScroll && (hAsync("div", { key: 'b9c738172d4e2993f15f6a7e051406d3b7e8d568', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '62c199e61dd2010f2c19aabb3599d75a561ef83d', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '5f305858818e720bf5a53499777d2f5aac843487', value: this.useInternalPagination
|
|
16463
17040
|
? this.innerRowsPerPage
|
|
16464
17041
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
16465
17042
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -16693,11 +17270,17 @@ class SdTabs {
|
|
|
16693
17270
|
registerInstance(this, hostRef);
|
|
16694
17271
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
16695
17272
|
}
|
|
17273
|
+
/** 현재 선택된 탭 value */
|
|
16696
17274
|
value;
|
|
17275
|
+
/** 탭 옵션 목록 */
|
|
16697
17276
|
tabs = [];
|
|
17277
|
+
/** 탭 크기 */
|
|
16698
17278
|
size = 'md';
|
|
17279
|
+
/** true이면 서브 탭 스타일 적용 */
|
|
16699
17280
|
isSub = false;
|
|
17281
|
+
/** true이면 탭을 세로로 배치 */
|
|
16700
17282
|
vertical = false;
|
|
17283
|
+
/** 탭이 변경될 때 새 value를 전달합니다. */
|
|
16701
17284
|
update;
|
|
16702
17285
|
valueChanged(newValue) {
|
|
16703
17286
|
this.value = newValue;
|
|
@@ -16764,7 +17347,7 @@ class SdTabs {
|
|
|
16764
17347
|
};
|
|
16765
17348
|
}
|
|
16766
17349
|
render() {
|
|
16767
|
-
return (hAsync("div", { key: '
|
|
17350
|
+
return (hAsync("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
16768
17351
|
const badgeName = this.getBadgeName(tab);
|
|
16769
17352
|
return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
|
|
16770
17353
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -16977,11 +17560,14 @@ class SdTag {
|
|
|
16977
17560
|
constructor(hostRef) {
|
|
16978
17561
|
registerInstance(this, hostRef);
|
|
16979
17562
|
}
|
|
17563
|
+
/** 태그 프리셋 이름 */
|
|
16980
17564
|
name = 'square_sm_grey';
|
|
17565
|
+
/** 표시할 레이블 텍스트 */
|
|
16981
17566
|
label = '';
|
|
17567
|
+
/** 아이콘명 */
|
|
16982
17568
|
icon;
|
|
16983
17569
|
// 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
16984
|
-
|
|
17570
|
+
/** true이면 아이콘을 레이블 왼쪽에 배치 */
|
|
16985
17571
|
isLeft = true;
|
|
16986
17572
|
componentWillLoad() {
|
|
16987
17573
|
this.name = this.name ?? 'square_sm_grey';
|
|
@@ -17003,7 +17589,7 @@ class SdTag {
|
|
|
17003
17589
|
render() {
|
|
17004
17590
|
const config = this.resolvedConfig;
|
|
17005
17591
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
17006
|
-
return (hAsync("span", { key: '
|
|
17592
|
+
return (hAsync("span", { key: '09cc181654983b64dec9860fdf656677ebcfcd15', class: "sd-tag", style: {
|
|
17007
17593
|
'--sd-tag-background': config.background,
|
|
17008
17594
|
'--sd-tag-content': config.content,
|
|
17009
17595
|
'--sd-tag-height': config.height,
|
|
@@ -17013,7 +17599,7 @@ class SdTag {
|
|
|
17013
17599
|
'--sd-tag-font-weight': config.fontWeight,
|
|
17014
17600
|
'--sd-tag-line-height': config.lineHeight,
|
|
17015
17601
|
'--sd-tag-radius': config.radius,
|
|
17016
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
17602
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '044ab51afc474799b400c608fd5531bed9a7ad18', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
17017
17603
|
}
|
|
17018
17604
|
static get style() { return sdTagCss(); }
|
|
17019
17605
|
static get cmpMeta() { return {
|
|
@@ -17038,6 +17624,7 @@ class SdTbody {
|
|
|
17038
17624
|
registerInstance(this, hostRef);
|
|
17039
17625
|
}
|
|
17040
17626
|
get el() { return getElement(this); }
|
|
17627
|
+
/** 렌더링할 행 데이터 목록 */
|
|
17041
17628
|
rows = [];
|
|
17042
17629
|
tableId = '';
|
|
17043
17630
|
topSpacerHeight = 0;
|
|
@@ -17081,9 +17668,9 @@ class SdTbody {
|
|
|
17081
17668
|
}
|
|
17082
17669
|
}
|
|
17083
17670
|
render() {
|
|
17084
|
-
return (hAsync(Host, { key: '
|
|
17671
|
+
return (hAsync(Host, { key: '0f85168b22221551714f3c75bd12c366538cc5ec', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'f9a8528d40c51988cfbca2c349905dafdafce8d3', class: { tbody: true } }, [
|
|
17085
17672
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
17086
|
-
hAsync("slot", { key: '
|
|
17673
|
+
hAsync("slot", { key: '7ecfe2f730b4c909d394fdee2d9aa015c5410cb4' }),
|
|
17087
17674
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
17088
17675
|
])));
|
|
17089
17676
|
}
|
|
@@ -17115,18 +17702,27 @@ class SdTd {
|
|
|
17115
17702
|
registerInstance(this, hostRef);
|
|
17116
17703
|
}
|
|
17117
17704
|
get el() { return getElement(this); }
|
|
17705
|
+
/** 데이터 필드명 (슬롯 이름 생성에 사용) */
|
|
17118
17706
|
field;
|
|
17707
|
+
/** 행 식별 키 */
|
|
17119
17708
|
rowKey;
|
|
17709
|
+
/** 셀 내용 정렬 */
|
|
17120
17710
|
align;
|
|
17711
|
+
/** 행 병합 수 */
|
|
17121
17712
|
rowspan;
|
|
17713
|
+
/** 열 병합 수 */
|
|
17122
17714
|
colspan;
|
|
17123
17715
|
// sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
|
|
17124
17716
|
// <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
|
|
17125
17717
|
// 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
|
|
17718
|
+
/** td에 병합할 사용자 클래스 */
|
|
17126
17719
|
sdClass;
|
|
17720
|
+
/** 좌측 구분선 표시 여부 */
|
|
17127
17721
|
dividerLeft = false;
|
|
17722
|
+
/** 우측 구분선 표시 여부 */
|
|
17128
17723
|
dividerRight = false;
|
|
17129
17724
|
// true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
|
|
17725
|
+
/** frame 레이아웃 사용 여부 */
|
|
17130
17726
|
useFrame = false;
|
|
17131
17727
|
handleFieldChange(_newField, oldField) {
|
|
17132
17728
|
this.syncSlotName();
|
|
@@ -17258,7 +17854,7 @@ class SdTd {
|
|
|
17258
17854
|
}
|
|
17259
17855
|
}
|
|
17260
17856
|
render() {
|
|
17261
|
-
return (hAsync(Host, { key: '
|
|
17857
|
+
return (hAsync(Host, { key: 'd7cea28b006a4903fab00e7a709252e6009f911f', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '1d8695ff6c6890838e4b18ec4da1d7ff6a5c8858' })));
|
|
17262
17858
|
}
|
|
17263
17859
|
static get watchers() { return {
|
|
17264
17860
|
"field": [{
|
|
@@ -17423,14 +18019,23 @@ class SdTextLink {
|
|
|
17423
18019
|
registerInstance(this, hostRef);
|
|
17424
18020
|
this.click = createEvent(this, "sdClick", 7);
|
|
17425
18021
|
}
|
|
18022
|
+
/** 표시할 레이블 텍스트 */
|
|
17426
18023
|
label = '';
|
|
18024
|
+
/** 좌측 아이콘명 */
|
|
17427
18025
|
icon = '';
|
|
18026
|
+
/** 좌측 아이콘 색상 */
|
|
17428
18027
|
iconColor = '';
|
|
18028
|
+
/** 레이블 span에 추가할 클래스 */
|
|
17429
18029
|
labelClass = '';
|
|
18030
|
+
/** 우측 화살표 타입 */
|
|
17430
18031
|
rightArrow = 'none';
|
|
18032
|
+
/** 밑줄 스타일 여부 */
|
|
17431
18033
|
underline = false;
|
|
18034
|
+
/** 비활성 상태 여부 */
|
|
17432
18035
|
disabled = false;
|
|
18036
|
+
/** 텍스트 크기 */
|
|
17433
18037
|
size = 'sm';
|
|
18038
|
+
/** 클릭 시 발생합니다. */
|
|
17434
18039
|
click;
|
|
17435
18040
|
handleClick = () => {
|
|
17436
18041
|
if (this.disabled)
|
|
@@ -17452,7 +18057,7 @@ class SdTextLink {
|
|
|
17452
18057
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
17453
18058
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
17454
18059
|
};
|
|
17455
|
-
return (hAsync("span", { key: '
|
|
18060
|
+
return (hAsync("span", { key: '1b58c27c2754182b1fc6249e7e4bf52f42d1d11d', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
17456
18061
|
'sd-text-link': true,
|
|
17457
18062
|
'sd-text-link--disabled': this.disabled,
|
|
17458
18063
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -17460,13 +18065,13 @@ class SdTextLink {
|
|
|
17460
18065
|
e.preventDefault();
|
|
17461
18066
|
this.handleClick();
|
|
17462
18067
|
}
|
|
17463
|
-
} }, this.icon && (hAsync("sd-icon", { key: '
|
|
18068
|
+
} }, this.icon && (hAsync("sd-icon", { key: '85076e7cf4873b527606aa737c2899233dcc3d9f', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '75b16e64155770ccdb889497caea6b4240b2e8c0', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: '8dd32b1b640a8e81f306b0387f783a4c1435abd6', class: "sd-text-link__arrow", style: {
|
|
17464
18069
|
width: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17465
18070
|
height: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17466
18071
|
display: 'inline-flex',
|
|
17467
18072
|
alignItems: 'center',
|
|
17468
18073
|
justifyContent: 'center',
|
|
17469
|
-
} }, hAsync("sd-icon", { key: '
|
|
18074
|
+
} }, hAsync("sd-icon", { key: '605572568dd4c2b6dcde9c932d5593e5fdb916a4', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
|
|
17470
18075
|
}
|
|
17471
18076
|
static get style() { return sdTextLinkCss(); }
|
|
17472
18077
|
static get cmpMeta() { return {
|
|
@@ -17512,38 +18117,67 @@ class SdTextarea {
|
|
|
17512
18117
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
17513
18118
|
}
|
|
17514
18119
|
get host() { return getElement(this); }
|
|
18120
|
+
/** 입력 값 */
|
|
17515
18121
|
value = null;
|
|
18122
|
+
/** 플레이스홀더 텍스트 */
|
|
17516
18123
|
placeholder = '입력해 주세요.';
|
|
18124
|
+
/** 비활성 상태 여부 */
|
|
17517
18125
|
disabled = false;
|
|
18126
|
+
/** 읽기 전용 여부 */
|
|
17518
18127
|
readonly = false;
|
|
18128
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
17519
18129
|
autoFocus = false;
|
|
18130
|
+
/** 네이티브 textarea에 추가할 클래스 */
|
|
17520
18131
|
textareaClass = '';
|
|
18132
|
+
/** 네이티브 textarea에 적용할 인라인 스타일 */
|
|
17521
18133
|
textareaStyle = {};
|
|
18134
|
+
/** 최대 입력 글자 수 */
|
|
17522
18135
|
maxLength;
|
|
18136
|
+
/** textarea 기본 행 수 */
|
|
17523
18137
|
rows;
|
|
18138
|
+
/** 맞춤법 검사 여부 */
|
|
17524
18139
|
spellcheck = false;
|
|
18140
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
17525
18141
|
width = '';
|
|
17526
18142
|
// props - sd-field
|
|
18143
|
+
/** 레이블 텍스트 */
|
|
17527
18144
|
label = '';
|
|
18145
|
+
/** 레이블 너비 */
|
|
17528
18146
|
labelWidth = '';
|
|
18147
|
+
/** 필드 우측 어드온 레이블 */
|
|
17529
18148
|
addonLabel = '';
|
|
18149
|
+
/** 어드온 정렬 방향 */
|
|
17530
18150
|
addonAlign = 'start';
|
|
18151
|
+
/** 필드 하단 힌트 텍스트 */
|
|
17531
18152
|
hint = '';
|
|
18153
|
+
/** 에러 메시지 */
|
|
17532
18154
|
errorMessage = '';
|
|
18155
|
+
/** 레이블 영역 아이콘 */
|
|
17533
18156
|
icon = undefined;
|
|
18157
|
+
/** 레이블 툴팁 텍스트 */
|
|
17534
18158
|
labelTooltip = '';
|
|
18159
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
17535
18160
|
labelTooltipProps = null;
|
|
18161
|
+
/** 유효성 검사 규칙 목록 */
|
|
17536
18162
|
rules = [];
|
|
18163
|
+
/** 에러 상태 여부 */
|
|
17537
18164
|
error = false;
|
|
18165
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
17538
18166
|
status;
|
|
18167
|
+
/** 포커스 상태 여부 */
|
|
17539
18168
|
focused = false;
|
|
18169
|
+
/** 호버 상태 여부 */
|
|
17540
18170
|
hovered = false;
|
|
17541
18171
|
internalValue = null;
|
|
17542
18172
|
nativeEl = undefined;
|
|
17543
18173
|
formField;
|
|
18174
|
+
/** 폼 연동용 name 속성 */
|
|
17544
18175
|
name = nanoid$1();
|
|
18176
|
+
/** 값이 변경될 때 발생합니다. */
|
|
17545
18177
|
input;
|
|
18178
|
+
/** 포커스될 때 발생합니다. */
|
|
17546
18179
|
focus;
|
|
18180
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
17547
18181
|
blur;
|
|
17548
18182
|
valueChanged(newValue) {
|
|
17549
18183
|
this.internalValue = newValue;
|
|
@@ -17554,18 +18188,23 @@ class SdTextarea {
|
|
|
17554
18188
|
this.input?.emit(this.value);
|
|
17555
18189
|
}
|
|
17556
18190
|
}
|
|
18191
|
+
/** 네이티브 textarea 엘리먼트를 반환합니다. */
|
|
17557
18192
|
async sdGetNativeElement() {
|
|
17558
18193
|
return this.nativeEl || null;
|
|
17559
18194
|
}
|
|
18195
|
+
/** 유효성 검사를 실행합니다. */
|
|
17560
18196
|
async sdValidate() {
|
|
17561
18197
|
this.formField?.sdValidate();
|
|
17562
18198
|
}
|
|
18199
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
17563
18200
|
async sdReset() {
|
|
17564
18201
|
this.formField?.sdReset();
|
|
17565
18202
|
}
|
|
18203
|
+
/** 유효성 상태만 초기화합니다. */
|
|
17566
18204
|
async sdResetValidate() {
|
|
17567
18205
|
this.formField?.sdResetValidation();
|
|
17568
18206
|
}
|
|
18207
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
17569
18208
|
async sdFocus() {
|
|
17570
18209
|
this.formField?.sdFocus();
|
|
17571
18210
|
}
|
|
@@ -17614,7 +18253,7 @@ class SdTextarea {
|
|
|
17614
18253
|
'--sd-system-size-field-sm-height': 'auto',
|
|
17615
18254
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
17616
18255
|
};
|
|
17617
|
-
return (hAsync("sd-field", { key: '
|
|
18256
|
+
return (hAsync("sd-field", { key: 'f8fd8949824938bb79f101de2e5eca7980224b09', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '382441be15dd047888cf876006f1966256a503b7', class: "sd-textarea__content" }, hAsync("textarea", { key: '5f5985ccdcc401f4aff2f47fe40003abeb76e8b3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
17618
18257
|
}
|
|
17619
18258
|
static get watchers() { return {
|
|
17620
18259
|
"value": [{
|
|
@@ -17676,15 +18315,25 @@ class SdThead {
|
|
|
17676
18315
|
this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
|
|
17677
18316
|
}
|
|
17678
18317
|
get el() { return getElement(this); }
|
|
18318
|
+
/** 테이블 컬럼 목록 */
|
|
17679
18319
|
columns;
|
|
18320
|
+
/** 행 선택 기능 사용 여부 */
|
|
17680
18321
|
selectable;
|
|
18322
|
+
/** 컬럼 너비 조절 가능 여부 */
|
|
17681
18323
|
resizable;
|
|
18324
|
+
/** 고정 컬럼 설정 */
|
|
17682
18325
|
stickyColumn;
|
|
18326
|
+
/** 헤더 고정 여부 */
|
|
17683
18327
|
stickyHeader;
|
|
18328
|
+
/** 좌측 스크롤 여부 */
|
|
17684
18329
|
scrolledLeft;
|
|
18330
|
+
/** 우측 스크롤 여부 */
|
|
17685
18331
|
scrolledRight;
|
|
18332
|
+
/** 전체 선택 체크박스용 행 데이터 */
|
|
17686
18333
|
rows = [];
|
|
18334
|
+
/** 컬럼 너비 목록 */
|
|
17687
18335
|
columnWidths = [];
|
|
18336
|
+
/** 컬럼 정렬 버튼 클릭 시 발생합니다. */
|
|
17688
18337
|
sdColumnSort;
|
|
17689
18338
|
tableId = '';
|
|
17690
18339
|
_columns = [];
|
|
@@ -17750,12 +18399,15 @@ class SdThead {
|
|
|
17750
18399
|
this.columnWidths = [];
|
|
17751
18400
|
}
|
|
17752
18401
|
}
|
|
18402
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
17753
18403
|
async refreshConfig() {
|
|
17754
18404
|
this.resolveConfig();
|
|
17755
18405
|
}
|
|
18406
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
17756
18407
|
async setColumnWidths(widths) {
|
|
17757
18408
|
this.columnWidths = Array.isArray(widths) ? widths : [];
|
|
17758
18409
|
}
|
|
18410
|
+
/** 전체 선택 체크박스 상태를 갱신합니다. */
|
|
17759
18411
|
async refreshSelection() {
|
|
17760
18412
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
17761
18413
|
if (checkbox) {
|
|
@@ -17831,16 +18483,16 @@ class SdThead {
|
|
|
17831
18483
|
'--table-border-color': TABLE_BORDER.color,
|
|
17832
18484
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
17833
18485
|
};
|
|
17834
|
-
return (hAsync(Host, { key: '
|
|
18486
|
+
return (hAsync(Host, { key: '26981191de95775401cad61e80fbf1e22cb0250b', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: 'a53d430f1b71a45b98de2912b563d3f17cd20b24', class: {
|
|
17835
18487
|
'thead': true,
|
|
17836
18488
|
'thead--sticky': this._stickyHeader,
|
|
17837
|
-
} }, hAsync("tr", { key: '
|
|
18489
|
+
} }, hAsync("tr", { key: '27ce13b70bfda4b210b36eb746fb60d369d9f5be', class: "tr" }, this._selectable && (hAsync("th", { key: 'e353b00c7a02b82781e5107b1fd73dc556427edf', class: {
|
|
17838
18490
|
'th': true,
|
|
17839
18491
|
'th--selected': true,
|
|
17840
18492
|
'sticky-left': true,
|
|
17841
18493
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17842
18494
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17843
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
18495
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '18eeabbcc4fc10196d6448bd9d0493b55778f9f1', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: '1a5a0561fc94be53a8244827ac9ae4f98fa766c2', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
17844
18496
|
'th': true,
|
|
17845
18497
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
17846
18498
|
'sticky-left': true,
|
|
@@ -17975,14 +18627,23 @@ class SdToast {
|
|
|
17975
18627
|
this.close = createEvent(this, "sdClose", 7);
|
|
17976
18628
|
this.buttonClick = createEvent(this, "sdButtonClick", 7);
|
|
17977
18629
|
}
|
|
18630
|
+
/** 좌측 아이콘명 */
|
|
17978
18631
|
icon;
|
|
18632
|
+
/** 표시할 메시지 */
|
|
17979
18633
|
message;
|
|
18634
|
+
/** 우측 링크 URL */
|
|
17980
18635
|
link;
|
|
18636
|
+
/** 링크 표시 레이블 (없으면 URL 표시) */
|
|
17981
18637
|
linkLabel;
|
|
18638
|
+
/** 우측 버튼 레이블 */
|
|
17982
18639
|
buttonLabel;
|
|
18640
|
+
/** 닫기 버튼 표시 여부 */
|
|
17983
18641
|
useClose = false;
|
|
18642
|
+
/** 토스트 타입 (색상/아이콘 프리셋) */
|
|
17984
18643
|
type = 'default';
|
|
18644
|
+
/** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
|
|
17985
18645
|
close;
|
|
18646
|
+
/** 우측 버튼 클릭 시 발생합니다. */
|
|
17986
18647
|
buttonClick;
|
|
17987
18648
|
render() {
|
|
17988
18649
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
@@ -17991,12 +18652,12 @@ class SdToast {
|
|
|
17991
18652
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
17992
18653
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
17993
18654
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
17994
|
-
return (hAsync("div", { key: '
|
|
18655
|
+
return (hAsync("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
|
|
17995
18656
|
'--sd-toast-bg': typeConfig.bg,
|
|
17996
18657
|
'--sd-toast-text': typeConfig.content,
|
|
17997
18658
|
'--sd-toast-icon': iconColor,
|
|
17998
18659
|
'--sd-toast-link': linkColor,
|
|
17999
|
-
} }, hAsync("div", { key: '
|
|
18660
|
+
} }, hAsync("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, hAsync("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
18000
18661
|
}
|
|
18001
18662
|
static get style() { return sdToastCss(); }
|
|
18002
18663
|
static get cmpMeta() { return {
|
|
@@ -18036,15 +18697,22 @@ class SdToastContainer {
|
|
|
18036
18697
|
this.toastDismiss = createEvent(this, "sdToastDismiss", 7);
|
|
18037
18698
|
}
|
|
18038
18699
|
get el() { return getElement(this); }
|
|
18700
|
+
/** 토스트 표시 위치 */
|
|
18039
18701
|
position = 'bottom-center';
|
|
18702
|
+
/** 동시에 표시할 최대 토스트 수 */
|
|
18040
18703
|
maxVisible = DEFAULT_MAX_VISIBLE;
|
|
18704
|
+
/** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
|
|
18041
18705
|
defaultDuration = DEFAULT_DURATION;
|
|
18706
|
+
/** z-index */
|
|
18042
18707
|
zIndex = DEFAULT_Z_INDEX;
|
|
18043
18708
|
toasts = [];
|
|
18044
18709
|
expanded = false;
|
|
18045
18710
|
toastRefs = new Map();
|
|
18711
|
+
/** 토스트가 표시될 때 발생합니다. */
|
|
18046
18712
|
toastShow;
|
|
18713
|
+
/** 토스트가 제거될 때 발생합니다. */
|
|
18047
18714
|
toastDismiss;
|
|
18715
|
+
/** 토스트를 생성하고 ID를 반환합니다. */
|
|
18048
18716
|
async create(options) {
|
|
18049
18717
|
const id = `toast-${++toastIdCounter}`;
|
|
18050
18718
|
const entry = { id, options, state: 'entering' };
|
|
@@ -18069,9 +18737,11 @@ class SdToastContainer {
|
|
|
18069
18737
|
this.toastShow.emit({ id });
|
|
18070
18738
|
return id;
|
|
18071
18739
|
}
|
|
18740
|
+
/** 지정한 ID의 토스트를 닫습니다. */
|
|
18072
18741
|
async dismiss(id) {
|
|
18073
18742
|
this.startDismiss(id);
|
|
18074
18743
|
}
|
|
18744
|
+
/** 모든 토스트를 닫습니다. */
|
|
18075
18745
|
async dismissAll() {
|
|
18076
18746
|
(this.toasts || []).forEach(t => this.startDismiss(t.id));
|
|
18077
18747
|
}
|
|
@@ -18249,7 +18919,7 @@ class SdToastContainer {
|
|
|
18249
18919
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
18250
18920
|
const indexMap = new Map();
|
|
18251
18921
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
18252
|
-
return (hAsync("div", { key: '
|
|
18922
|
+
return (hAsync("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
18253
18923
|
this.expanded = true;
|
|
18254
18924
|
this.pauseTimers();
|
|
18255
18925
|
}, onMouseLeave: () => {
|
|
@@ -18363,9 +19033,13 @@ class SdToggle {
|
|
|
18363
19033
|
registerInstance(this, hostRef);
|
|
18364
19034
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
18365
19035
|
}
|
|
19036
|
+
/** 현재 선택 상태 */
|
|
18366
19037
|
value = false;
|
|
19038
|
+
/** 표시할 레이블 텍스트 */
|
|
18367
19039
|
label = '';
|
|
19040
|
+
/** 비활성 상태 여부 */
|
|
18368
19041
|
disabled = false;
|
|
19042
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
18369
19043
|
change;
|
|
18370
19044
|
get toggleClasses() {
|
|
18371
19045
|
const classes = ['sd-toggle'];
|
|
@@ -18407,7 +19081,7 @@ class SdToggle {
|
|
|
18407
19081
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
18408
19082
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
18409
19083
|
};
|
|
18410
|
-
return (hAsync("label", { key: '
|
|
19084
|
+
return (hAsync("label", { key: '1a03763c5cfcb5159b69e62a9db9893297082e2b', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '099cbbb02ebf283883ab7fe748f605491ae84808', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
18411
19085
|
}
|
|
18412
19086
|
static get style() { return sdToggleCss(); }
|
|
18413
19087
|
static get cmpMeta() { return {
|
|
@@ -18456,19 +19130,33 @@ class SdTooltip {
|
|
|
18456
19130
|
registerInstance(this, hostRef);
|
|
18457
19131
|
}
|
|
18458
19132
|
get el() { return getElement(this); }
|
|
19133
|
+
/** 툴팁 트리거 방식 */
|
|
18459
19134
|
trigger = 'hover';
|
|
19135
|
+
/** 툴팁 표시 방향 */
|
|
18460
19136
|
placement = 'top';
|
|
19137
|
+
/** 아이콘 트리거 색상 */
|
|
18461
19138
|
color = '#01BB4B';
|
|
19139
|
+
/** 툴팁 배경/텍스트 색상 타입 */
|
|
18462
19140
|
tooltipType = 'default';
|
|
19141
|
+
/** 아이콘 트리거 아이콘명 */
|
|
18463
19142
|
icon = 'helpOutline';
|
|
19143
|
+
/** 아이콘 트리거 크기 */
|
|
18464
19144
|
iconSize = 12;
|
|
19145
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
18465
19146
|
label = '';
|
|
19147
|
+
/** 버튼 트리거 프리셋 */
|
|
18466
19148
|
name = 'primary_sm';
|
|
19149
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
18467
19150
|
rightIcon;
|
|
19151
|
+
/** 스크린리더용 접근성 레이블 */
|
|
18468
19152
|
ariaLabel = '';
|
|
19153
|
+
/** 비활성 상태 여부 */
|
|
18469
19154
|
disabled = false;
|
|
19155
|
+
/** 버튼 type 속성 */
|
|
18470
19156
|
type = 'button';
|
|
19157
|
+
/** 툴팁 우측 상단 닫기 버튼 표시 여부 */
|
|
18471
19158
|
useClose = false;
|
|
19159
|
+
/** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
|
|
18472
19160
|
sdClass = '';
|
|
18473
19161
|
/**
|
|
18474
19162
|
* 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
|
|
@@ -18581,7 +19269,7 @@ class SdTooltip {
|
|
|
18581
19269
|
const bodyHTML = this.message && this.message.length > 0
|
|
18582
19270
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
18583
19271
|
: this.slotContentHTML;
|
|
18584
|
-
return (hAsync(Fragment, { key: '
|
|
19272
|
+
return (hAsync(Fragment, { key: 'c5a5c69267ac8a7d7f06324a63b6410092b84f04' }, hAsync("div", { key: 'f7323385e1b2e6ef4199c6318bdc55984182d3da', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '0ba07ee2a20862df43755264d9390b3229da57e6', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'f92217cb8cca4d1467cbeac7b36f9a00f28babd3', ref: el => (this.menuEl = el), class: {
|
|
18585
19273
|
'sd-floating-menu': true,
|
|
18586
19274
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
18587
19275
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -18589,7 +19277,7 @@ class SdTooltip {
|
|
|
18589
19277
|
}, style: {
|
|
18590
19278
|
'--sd-floating-bg': typeConfig.bg,
|
|
18591
19279
|
'--sd-floating-content': typeConfig.content,
|
|
18592
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '
|
|
19280
|
+
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '6d7671dbac4fa026788f0804df4a97ca86c492c1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '31321fbfef392af0fa64111a32c3ecd6c6144d35' })), hAsync("div", { key: '67e54a935c9f684d713ab943e7049737d5a8596a', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '355101a4efed88fbb687e1f972f88b6dfb4be309', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
|
|
18593
19281
|
}
|
|
18594
19282
|
static get style() { return sdTooltipCss(); }
|
|
18595
19283
|
static get cmpMeta() { return {
|
|
@@ -18631,11 +19319,17 @@ class SdTr {
|
|
|
18631
19319
|
registerInstance(this, hostRef);
|
|
18632
19320
|
}
|
|
18633
19321
|
get el() { return getElement(this); }
|
|
19322
|
+
/** 테이블 컬럼 목록 */
|
|
18634
19323
|
columns;
|
|
19324
|
+
/** 행 선택 기능 사용 여부 */
|
|
18635
19325
|
selectable;
|
|
19326
|
+
/** 고정 컬럼 설정 */
|
|
18636
19327
|
stickyColumn;
|
|
19328
|
+
/** 행 식별 키 */
|
|
18637
19329
|
rowKey = '';
|
|
19330
|
+
/** 행 데이터 객체 */
|
|
18638
19331
|
row = {};
|
|
19332
|
+
/** 구분선 높이 (4 또는 6px, null이면 일반 행) */
|
|
18639
19333
|
separator = null;
|
|
18640
19334
|
tableId = '';
|
|
18641
19335
|
columnWidths = [];
|
|
@@ -18688,12 +19382,15 @@ class SdTr {
|
|
|
18688
19382
|
this.columnWidths = [...config.columnWidths];
|
|
18689
19383
|
}
|
|
18690
19384
|
}
|
|
19385
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
18691
19386
|
async refreshConfig() {
|
|
18692
19387
|
this.resolveConfig();
|
|
18693
19388
|
}
|
|
19389
|
+
/** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
|
|
18694
19390
|
async bumpSpansVersion() {
|
|
18695
19391
|
this.spansVersion = this.spansVersion + 1;
|
|
18696
19392
|
}
|
|
19393
|
+
/** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
|
|
18697
19394
|
async updateVisibility() {
|
|
18698
19395
|
this.updateVisibilitySync();
|
|
18699
19396
|
}
|
|
@@ -18706,9 +19403,11 @@ class SdTr {
|
|
|
18706
19403
|
}
|
|
18707
19404
|
this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
|
|
18708
19405
|
}
|
|
19406
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
18709
19407
|
async setColumnWidths(widths) {
|
|
18710
19408
|
this.columnWidths = widths;
|
|
18711
19409
|
}
|
|
19410
|
+
/** 체크박스 선택 상태를 갱신합니다. */
|
|
18712
19411
|
async refreshSelection() {
|
|
18713
19412
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
18714
19413
|
if (checkbox) {
|