@sellmate/design-system 1.20.1 → 1.22.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 +2 -2
- package/dist/cjs/{index-DXm0PH2A.js → index-C-F-JEv_.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- 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 +16 -7
- 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 +76 -18
- 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 +121 -13
- package/dist/cjs/sd-popover.cjs.entry.js +21 -5
- package/dist/cjs/sd-popup.cjs.entry.js +7 -3
- package/dist/cjs/sd-radio-button.cjs.entry.js +8 -2
- package/dist/cjs/sd-radio.cjs.entry.js +7 -2
- package/dist/cjs/sd-select-list-item_2.cjs.entry.js +18 -7
- package/dist/cjs/sd-select_3.cjs.entry.js +56 -9
- package/dist/cjs/sd-switch.cjs.entry.js +6 -2
- package/dist/cjs/sd-table.cjs.entry.js +42 -7
- package/dist/cjs/sd-tabs.cjs.entry.js +8 -2
- package/dist/cjs/sd-td.cjs.entry.js +11 -2
- package/dist/cjs/sd-text-link.cjs.entry.js +13 -4
- package/dist/cjs/sd-toast-container.cjs.entry.js +11 -2
- package/dist/cjs/sd-toast.cjs.entry.js +12 -3
- package/dist/cjs/sd-toggle.cjs.entry.js +6 -2
- package/dist/cjs/{tooltipArrow-D3P3JC08.js → tooltipArrow-26hYtSrD.js} +1 -1
- package/dist/collection/components/assets/CaretDown.js +1 -1
- package/dist/collection/components/assets/CaretLeft.js +1 -1
- package/dist/collection/components/assets/CaretRight.js +1 -1
- package/dist/collection/components/assets/CaretUp.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 +6 -0
- package/dist/collection/components/sd-chip-input/sd-chip-input.js +107 -49
- 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-table.stories.helpers.js +97 -0
- 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.css +21 -0
- package/dist/collection/components/sd-table/sd-thead/sd-thead.js +113 -20
- 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-CUR9smP5.js → p-58DLP3IW.js} +1 -1
- package/dist/components/{p-CQozoo2-.js → p-B-Igud6n.js} +1 -1
- package/dist/components/{p-BZfVV3gu.js → p-B0myARGe.js} +1 -1
- package/dist/components/{p-CTPImLDQ.js → p-B12iH3Zk.js} +1 -1
- package/dist/components/{p-CoqA9KgU.js → p-B2bF2KlS.js} +1 -1
- package/dist/components/{p-MJG6EZeP.js → p-BFlmHQm9.js} +1 -1
- package/dist/{design-system/p-L_He_WSA.js → components/p-BRmilX-4.js} +1 -1
- package/dist/components/{p-Dl89_4C3.js → p-BXRgi3NZ.js} +1 -1
- package/dist/components/{p-BjcGzaFR.js → p-Bm3NWPaP.js} +1 -1
- package/dist/components/p-BpQwjSB8.js +1 -0
- package/dist/components/{p-CRwvv7YM.js → p-BpjmheLG.js} +1 -1
- package/dist/components/{p-5imde6N9.js → p-Bric-SEs.js} +1 -1
- package/dist/components/{p-CB2A3pJ5.js → p-BwTsP0Ak.js} +1 -1
- package/dist/components/{p-9Z-q6kKD.js → p-C1QezE7u.js} +1 -1
- package/dist/components/p-CCCwPJ5p.js +1 -0
- package/dist/components/p-CCO1WtEj.js +1 -0
- package/dist/components/p-CEKu7cxA.js +1 -0
- package/dist/components/{p-CrT06Uwc.js → p-CHxVi6l1.js} +1 -1
- package/dist/components/{p-DNnI3Nru.js → p-Cdzn78dP.js} +1 -1
- package/dist/components/p-Cj_1bYZF.js +1 -0
- package/dist/components/{p-ZvI5A-_t.js → p-Cjf8PHEl.js} +1 -1
- package/dist/components/{p-CJ69QmR3.js → p-Co2ThnbG.js} +1 -1
- package/dist/components/{p-gOIeNT-Z.js → p-CwSlRPMm.js} +1 -1
- package/dist/components/p-D7StBSjK.js +1 -0
- package/dist/components/{p-Bz93hWXV.js → p-DFbj6d3L.js} +1 -1
- package/dist/components/{p-B5bya7Gp.js → p-DlXBFtBO.js} +1 -1
- package/dist/components/{p-Rwc_ltPn.js → p-Du_qPqW-.js} +1 -1
- package/dist/components/{p-DIlNesBH.js → p-DzAvlr8W.js} +1 -1
- package/dist/components/{p-D99vy8Ip.js → p-FrqOl9KZ.js} +1 -1
- package/dist/components/{p-uSEbiD29.js → p-JMuxVcTW.js} +1 -1
- package/dist/components/{p-DertIGhs.js → p-OjchKJGr.js} +1 -1
- package/dist/components/p-S2-XqY2R.js +1 -0
- package/dist/components/{p-DDAA-zcg.js → p-YCGkwgiM.js} +1 -1
- package/dist/components/{p-DZTxHJlP.js → p-ZvP2Ce6J.js} +1 -1
- package/dist/components/p-kRH2GOb0.js +1 -0
- package/dist/components/{p-FTvXz0-a.js → p-mcMbSkii.js} +1 -1
- package/dist/components/{p-BiBLp9_a.js → p-vPS2GNz3.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-14447dd5.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-4bbc894b.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-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-e7d4b78e.entry.js +1 -0
- package/dist/design-system/{p-bdb7492c.entry.js → p-fc65bbe2.entry.js} +1 -1
- package/dist/design-system/{p-a5a586da.entry.js → p-ff726fad.entry.js} +1 -1
- package/dist/esm/design-system.js +3 -3
- package/dist/esm/{index-CAxodB5I.js → index-C7HJ-NfO.js} +1 -1
- package/dist/esm/loader.js +3 -3
- 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 +16 -7
- 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 +76 -18
- 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 +121 -13
- 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/constants.d.ts +1 -0
- package/dist/types/components/sd-table/sd-table.d.ts +35 -0
- package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts +10 -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 +21 -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 +949 -146
- package/hydrate/index.mjs +949 -146
- package/package.json +1 -1
- package/dist/components/p-B7PHGGFH.js +0 -1
- package/dist/components/p-CLlAhEDc.js +0 -1
- package/dist/components/p-CXeOxSQ-.js +0 -1
- package/dist/components/p-CZfsknba.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-17dcf0e4.entry.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-9c38ee79.entry.js +0 -1
- package/dist/design-system/p-CAxodB5I.js +0 -2
- package/dist/design-system/p-c995e6c3.entry.js +0 -1
- package/dist/design-system/p-eef6d4a3.entry.js +0 -1
- package/dist/design-system/p-faf7b64c.entry.js +0 -1
- package/dist/design-system/p-fd7abbfa.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -134,7 +134,7 @@ var node_crypto = require('node:crypto');
|
|
|
134
134
|
const NAMESPACE = 'design-system';
|
|
135
135
|
const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
136
136
|
|
|
137
|
-
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-font-weight:400;--sd-checkbox-checkbox-typography-font-size:12px;--sd-checkbox-checkbox-typography-line-height:20px;--sd-checkbox-checkbox-typography-text-decoration:none;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:12px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#555555;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-bg:#001B39;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-top-border:#004177;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-bg-default:#001B39;--sd-gnb-belt-gnb-belt-item-bg-selected:#002B5E;--sd-gnb-belt-gnb-belt-item-color-default:#FFFFFF;--sd-gnb-belt-gnb-belt-item-color-active:#93C4FF;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-bg:#FFFFFF;--sd-gnb-box-gnb-box-border:#E1E1E1;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-bg-default:#FFFFFF;--sd-gnb-box-gnb-box-item-bg-hover:#F6F6F6;--sd-gnb-box-gnb-box-item-bg-selected:#EFF6FF;--sd-gnb-box-gnb-box-item-color-default:#222222;--sd-gnb-box-gnb-box-item-color-selected:#0075FF;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
|
|
137
|
+
const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-tight:2px;--sd-system-space-stack-gap-normal:4px;--sd-system-space-stack-gap-relaxed:8px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:12px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:12px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#555555;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-header-padding-x:24px;--sd-modal-modal-action-header-padding-y:20px;--sd-modal-modal-action-header-gap:12px;--sd-modal-modal-action-title-color:#033F59;--sd-modal-modal-action-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-action-title-typography-font-weight:700;--sd-modal-modal-action-title-typography-font-size:16px;--sd-modal-modal-action-title-typography-text-decoration:none;--sd-modal-modal-action-title-typography-line-height:26px;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-footer-bg:#FFFFFF;--sd-popup-popup-footer-padding-x:20px;--sd-popup-popup-footer-padding-y:8px;--sd-popup-popup-footer-gap:16px;--sd-popup-popup-bg:#EEEEEE;--sd-spinner-spinner-size:80px;--sd-spinner-spinner-color-track:#EEEEEE;--sd-spinner-spinner-color-arc:#2D8DFF;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-dense-padding-y:6px;--sd-table-table-body-padding-x:16px;--sd-table-table-body-frame-padding:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding:8px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-bg:#001B39;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-top-border:#004177;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-bg-default:#001B39;--sd-gnb-belt-gnb-belt-item-bg-selected:#002B5E;--sd-gnb-belt-gnb-belt-item-color-default:#FFFFFF;--sd-gnb-belt-gnb-belt-item-color-active:#93C4FF;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-bg:#FFFFFF;--sd-gnb-box-gnb-box-border:#E1E1E1;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-bg-default:#FFFFFF;--sd-gnb-box-gnb-box-item-bg-hover:#F6F6F6;--sd-gnb-box-gnb-box-item-bg-selected:#EFF6FF;--sd-gnb-box-gnb-box-item-color-default:#222222;--sd-gnb-box-gnb-box-item-color-selected:#0075FF;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
|
|
138
138
|
|
|
139
139
|
/*
|
|
140
140
|
Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -5302,11 +5302,17 @@ class SdActionModal {
|
|
|
5302
5302
|
this.close = createEvent(this, "sdClose", 7);
|
|
5303
5303
|
this.ok = createEvent(this, "sdOk", 7);
|
|
5304
5304
|
}
|
|
5305
|
+
/** 모달 헤더에 표시할 제목 */
|
|
5305
5306
|
modalTitle = '';
|
|
5307
|
+
/** 하단 확인 버튼의 props (없으면 footer 미표시) */
|
|
5306
5308
|
buttonProps;
|
|
5309
|
+
/** 모달 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5307
5310
|
width;
|
|
5311
|
+
/** 모달 높이 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5308
5312
|
height;
|
|
5313
|
+
/** 닫기 버튼 클릭 시 발생 */
|
|
5309
5314
|
close;
|
|
5315
|
+
/** 확인 버튼 클릭 시 발생 */
|
|
5310
5316
|
ok;
|
|
5311
5317
|
render() {
|
|
5312
5318
|
const cssVars = {
|
|
@@ -5336,7 +5342,7 @@ class SdActionModal {
|
|
|
5336
5342
|
if (this.height != null && this.height !== '') {
|
|
5337
5343
|
sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
|
5338
5344
|
}
|
|
5339
|
-
return (hAsync("div", { key: '
|
|
5345
|
+
return (hAsync("div", { key: '1bed831bf4534b5936d151d9cf085dda4657295f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '2e5855be8128695e85e397acc91432d573572a12', class: "sd-action-modal__header" }, hAsync("h2", { key: '1551d022b29288f38c1288c595d66acffb7cd81a', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '8d4ec549ebebc6b2d61ad3c9dc4808d0275d3c55', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: 'aac69288e31316de16c6cdd8a5b5641b5afc2f5a', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: 'd48d05b60cdc53e5d71e7694149b2e2e77c0cde8', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'abd5db2432dea9639bfa91fb3f3019105a47e409', class: "sd-action-modal__body" }, hAsync("slot", { key: 'debfb64dd617e6d027b9acdea2081141ad78ff5d', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '9cf1510e0ce5aea2e5b4e504e832073f533e166e', class: "sd-action-modal__footer" }, hAsync("div", { key: '677d0e26fe8d416419fd247c808206955df82b16', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '24e400c96a0fec93ea76d2a037432901e3050618', name: "bottom-sub-content" })), hAsync("sd-button", { key: 'b52c5c7837a06f25738533dc769f5daff1169696', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
|
|
5340
5346
|
}
|
|
5341
5347
|
static get style() { return sdActionModalCss(); }
|
|
5342
5348
|
static get cmpMeta() { return {
|
|
@@ -5385,10 +5391,11 @@ class SdBadge {
|
|
|
5385
5391
|
constructor(hostRef) {
|
|
5386
5392
|
registerInstance(this, hostRef);
|
|
5387
5393
|
}
|
|
5394
|
+
/** 뱃지 색상 */
|
|
5388
5395
|
color = 'blue';
|
|
5389
5396
|
render() {
|
|
5390
5397
|
const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
|
|
5391
|
-
return (hAsync("div", { key: '
|
|
5398
|
+
return (hAsync("div", { key: '72a1ff1775b431b12a0765416d50256a91e34180', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: '427bc1c523aff73dc52edf729a414b26f52faf68', class: "sd-badge__dot" })));
|
|
5392
5399
|
}
|
|
5393
5400
|
static get style() { return sdBadgeCss(); }
|
|
5394
5401
|
static get cmpMeta() { return {
|
|
@@ -5499,38 +5506,66 @@ class SdBarcodeInput {
|
|
|
5499
5506
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
5500
5507
|
}
|
|
5501
5508
|
get host() { return getElement(this); }
|
|
5509
|
+
/** 입력값 */
|
|
5502
5510
|
value = null;
|
|
5511
|
+
/** 입력 필드 크기 */
|
|
5503
5512
|
size = 'sm';
|
|
5513
|
+
/** 필드 우측 어드온 레이블 */
|
|
5504
5514
|
addonLabel = '';
|
|
5515
|
+
/** 어드온 정렬 방향 */
|
|
5505
5516
|
addonAlign = 'start';
|
|
5517
|
+
/** 입력 placeholder */
|
|
5506
5518
|
placeholder = '입력해 주세요.';
|
|
5519
|
+
/** 비활성 상태 여부 */
|
|
5507
5520
|
disabled = false;
|
|
5521
|
+
/** 입력값 지우기 버튼 표시 여부 */
|
|
5508
5522
|
clearable = false;
|
|
5523
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
5509
5524
|
width = '';
|
|
5525
|
+
/** 유효성 검사 규칙 목록 */
|
|
5510
5526
|
rules = [];
|
|
5527
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
5511
5528
|
autoFocus = false;
|
|
5529
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
5512
5530
|
status;
|
|
5531
|
+
/** 필드 하단 힌트 텍스트 */
|
|
5513
5532
|
hint = '';
|
|
5533
|
+
/** 에러 메시지 */
|
|
5514
5534
|
errorMessage = '';
|
|
5535
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
5515
5536
|
inputClass = '';
|
|
5537
|
+
/** 읽기 전용 여부 */
|
|
5516
5538
|
readonly = false;
|
|
5539
|
+
/** 에러 상태 여부 */
|
|
5517
5540
|
error = false;
|
|
5541
|
+
/** 포커스 상태 여부 */
|
|
5518
5542
|
focused = false;
|
|
5543
|
+
/** 호버 상태 여부 */
|
|
5519
5544
|
hovered = false;
|
|
5520
5545
|
// props - label
|
|
5546
|
+
/** 레이블 텍스트 */
|
|
5521
5547
|
label = '';
|
|
5548
|
+
/** 레이블 너비 */
|
|
5522
5549
|
labelWidth = '';
|
|
5550
|
+
/** 레이블 영역 아이콘 */
|
|
5523
5551
|
icon = undefined;
|
|
5552
|
+
/** 레이블 툴팁 텍스트 */
|
|
5524
5553
|
labelTooltip = '';
|
|
5554
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
5525
5555
|
labelTooltipProps = null;
|
|
5526
5556
|
// props - custom styles
|
|
5557
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
5527
5558
|
inputStyle = {};
|
|
5528
5559
|
internalValue = null;
|
|
5529
5560
|
nativeEl = undefined;
|
|
5530
5561
|
formField;
|
|
5562
|
+
/** 폼 연동용 name 속성 */
|
|
5531
5563
|
name = nanoid$1();
|
|
5564
|
+
/** 입력값 변경 시 발생합니다. */
|
|
5532
5565
|
input;
|
|
5566
|
+
/** 포커스 진입 시 발생합니다. */
|
|
5533
5567
|
focus;
|
|
5568
|
+
/** 포커스 이탈 시 발생합니다. */
|
|
5534
5569
|
blur;
|
|
5535
5570
|
valueChanged(newValue) {
|
|
5536
5571
|
this.internalValue = newValue;
|
|
@@ -5541,18 +5576,23 @@ class SdBarcodeInput {
|
|
|
5541
5576
|
this.input?.emit(this.value);
|
|
5542
5577
|
}
|
|
5543
5578
|
}
|
|
5579
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
5544
5580
|
async sdGetNativeElement() {
|
|
5545
5581
|
return this.nativeEl || null;
|
|
5546
5582
|
}
|
|
5583
|
+
/** 유효성 검사를 실행합니다. */
|
|
5547
5584
|
async sdValidate() {
|
|
5548
5585
|
this.formField?.sdValidate();
|
|
5549
5586
|
}
|
|
5587
|
+
/** 입력값과 유효성 상태를 초기화합니다. */
|
|
5550
5588
|
async sdReset() {
|
|
5551
5589
|
this.formField?.sdReset();
|
|
5552
5590
|
}
|
|
5591
|
+
/** 유효성 상태만 초기화합니다. */
|
|
5553
5592
|
async sdResetValidate() {
|
|
5554
5593
|
this.formField?.sdResetValidation();
|
|
5555
5594
|
}
|
|
5595
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
5556
5596
|
async sdFocus() {
|
|
5557
5597
|
this.formField?.sdFocus();
|
|
5558
5598
|
}
|
|
@@ -5598,7 +5638,7 @@ class SdBarcodeInput {
|
|
|
5598
5638
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
5599
5639
|
'--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
|
|
5600
5640
|
};
|
|
5601
|
-
return (hAsync("sd-field", { key: '
|
|
5641
|
+
return (hAsync("sd-field", { key: '9f9831c9f39e4723cad6567b22155ab89856c9be', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '1da8ce2ef66e48f269b79f22e6751ccf18ca9cc0', class: "sd-barcode-input__content" }, hAsync("slot", { key: '06850214ee5118ff3d13266c1ade37902c19f379', name: "prefix" }), hAsync("input", { key: '0384b010946b635cc6b19ddb1a83be593ba5806b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: '2bb5baed7b300014e52795d3a7665a580b7ff5a2', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'fc586fdb39a1dc25eeba32c76aa86a653416c38e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
|
|
5602
5642
|
if (this.disabled)
|
|
5603
5643
|
return;
|
|
5604
5644
|
this.internalValue = '';
|
|
@@ -5743,22 +5783,22 @@ const CancelOutline = (props) => {
|
|
|
5743
5783
|
|
|
5744
5784
|
const CaretDown = (props) => {
|
|
5745
5785
|
const { size = 24, ...rest } = props;
|
|
5746
|
-
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "
|
|
5786
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M19.2188 8.25C19.9555 8.25 20.2813 9.44246 19.7061 10.0342L12.4874 17.46C12.2028 17.7526 11.7974 17.7526 11.5127 17.46L4.294 10.0342C3.71879 9.44247 4.04461 8.25 4.7813 8.25H19.2188Z", fill: "currentColor" })));
|
|
5747
5787
|
};
|
|
5748
5788
|
|
|
5749
5789
|
const CaretLeft = (props) => {
|
|
5750
5790
|
const { size = 24, ...rest } = props;
|
|
5751
|
-
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "
|
|
5791
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M14.1423 4.29416C14.7698 3.71888 16.0358 4.04475 16.0358 4.78146V19.219C16.0358 19.9557 14.7698 20.2815 14.1423 19.7063L6.26827 12.4865C5.95813 12.2019 5.95791 11.7975 6.26827 11.5129L14.1423 4.29416Z", fill: "currentColor" })));
|
|
5752
5792
|
};
|
|
5753
5793
|
|
|
5754
5794
|
const CaretRight = (props) => {
|
|
5755
5795
|
const { size = 24, ...rest } = props;
|
|
5756
|
-
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "
|
|
5796
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M8.25 4.78127C8.25 4.04456 9.44248 3.71871 10.0342 4.29397L17.46 11.5127C17.7526 11.7973 17.7526 12.2027 17.46 12.4873L10.0342 19.7061C9.44249 20.2814 8.25 19.9555 8.25 19.2188V4.78127Z", fill: "currentColor" })));
|
|
5757
5797
|
};
|
|
5758
5798
|
|
|
5759
5799
|
const CaretUp = (props) => {
|
|
5760
5800
|
const { size = 24, ...rest } = props;
|
|
5761
|
-
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M11.
|
|
5801
|
+
return (hAsync("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, hAsync("path", { d: "M11.6252 6.44362C11.8583 6.27919 12.1422 6.27906 12.3752 6.44362L12.4865 6.5403L19.7063 13.9651C20.2815 14.5568 19.9557 15.7503 19.219 15.7503H4.78146C4.04475 15.7503 3.71888 14.5568 4.29416 13.9651L11.5129 6.5403L11.6252 6.44362Z", fill: "currentColor" })));
|
|
5762
5802
|
};
|
|
5763
5803
|
|
|
5764
5804
|
const Check = (props) => {
|
|
@@ -6470,13 +6510,21 @@ class SdButton {
|
|
|
6470
6510
|
registerInstance(this, hostRef);
|
|
6471
6511
|
this.click = createEvent(this, "sdClick", 7);
|
|
6472
6512
|
}
|
|
6513
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
6473
6514
|
name = 'primary_sm';
|
|
6515
|
+
/** 버튼 텍스트 레이블 */
|
|
6474
6516
|
label = '';
|
|
6517
|
+
/** 레이블 왼쪽에 표시할 아이콘 */
|
|
6475
6518
|
icon;
|
|
6519
|
+
/** 레이블 오른쪽에 표시할 아이콘 */
|
|
6476
6520
|
rightIcon;
|
|
6521
|
+
/** 아이콘 전용 버튼일 때 스크린리더용 레이블 */
|
|
6477
6522
|
ariaLabel = '';
|
|
6523
|
+
/** 비활성 상태 여부 */
|
|
6478
6524
|
disabled = false;
|
|
6525
|
+
/** 네이티브 button type 속성 */
|
|
6479
6526
|
type = 'button';
|
|
6527
|
+
/** 클릭 시 발생합니다. */
|
|
6480
6528
|
click;
|
|
6481
6529
|
hasWarnedMissingAriaLabel = false;
|
|
6482
6530
|
handleClick = (event) => {
|
|
@@ -6536,14 +6584,14 @@ class SdButton {
|
|
|
6536
6584
|
const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
|
|
6537
6585
|
const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
|
|
6538
6586
|
const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
|
|
6539
|
-
return (hAsync("button", { key: '
|
|
6587
|
+
return (hAsync("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
6540
6588
|
'--sd-button-bg': config.color,
|
|
6541
6589
|
'--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
|
|
6542
6590
|
'--sd-button-border': PRESET_BORDER_COLORS$1[preset],
|
|
6543
6591
|
'--sd-button-text': PRESET_TEXT_COLORS$1[preset],
|
|
6544
6592
|
'--sd-button-icon': PRESET_ICON_COLORS$1[preset],
|
|
6545
6593
|
'--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
|
|
6546
|
-
}, onClick: this.handleClick }, hAsync("span", { key: '
|
|
6594
|
+
}, onClick: this.handleClick }, hAsync("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
|
|
6547
6595
|
}
|
|
6548
6596
|
static get style() { return sdButtonCss(); }
|
|
6549
6597
|
static get cmpMeta() { return {
|
|
@@ -6796,13 +6844,19 @@ class SdCalendar {
|
|
|
6796
6844
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
6797
6845
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
6798
6846
|
}
|
|
6847
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
6799
6848
|
value = null;
|
|
6849
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] (YYYY-MM-DD, 빈 문자열이면 제한 없음) */
|
|
6800
6850
|
selectable;
|
|
6851
|
+
/** 캘린더에 표시할 이벤트 그룹 목록 */
|
|
6801
6852
|
events;
|
|
6853
|
+
/** 카드 형태의 그림자 여부 */
|
|
6802
6854
|
elevated = false;
|
|
6803
6855
|
currentYear;
|
|
6804
6856
|
currentMonth;
|
|
6857
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
6805
6858
|
update;
|
|
6859
|
+
/** 월/년 네비게이션 변경 시 현재 보여지는 연·월을 전달합니다. */
|
|
6806
6860
|
viewChange;
|
|
6807
6861
|
dateUtil = useDatePicker();
|
|
6808
6862
|
_eventMapCache;
|
|
@@ -6966,7 +7020,7 @@ class SdCalendar {
|
|
|
6966
7020
|
const eventMap = this.eventMap;
|
|
6967
7021
|
const legend = this.legendItems;
|
|
6968
7022
|
const hasEvents = (this.events?.length ?? 0) > 0;
|
|
6969
|
-
return (hAsync("div", { key: '
|
|
7023
|
+
return (hAsync("div", { key: '1ff9f894078f4b24d52c738509878ee504e02c6b', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: 'a4e894dbf3c808ba1a2a6711997c956c8b4525c0', class: "sd-calendar__header" }, hAsync("div", { key: 'd559c861937fd51cab7e4cc39cfece49bed20037', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '6b793f2a07cc9c26a8b517d7a4d0cc065305a19f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '324fa08a3583543a75cfd6a3cfeb8450586c9265', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: 'd0951fe7bf84f58348e0ad2ed9e89531daa68242', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '953a382082f5be65a1df7dab23faae8be1975bfa', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'aa751f69f3864875d4e6f16a816660cb8636281f', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '7fe05970e9385cf8b744b16abce6a536ba639d8d', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '0f528c7bde86f64f482a5a6b433beef2456e5832', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '3ddbb8f64f86fda85e5f8c6963cc4e11a95e8a37', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'de37bc97970b23c49757ff103f62a5ef8c3deb2a', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '218d4ff90b67bfcea0fb52984338b5bf486ec6b1', class: "sd-calendar__grid" }, this.cells.map(cell => {
|
|
6970
7024
|
const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
|
|
6971
7025
|
const isToday = cell.inCurrentMonth && today === cell.date;
|
|
6972
7026
|
const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
|
|
@@ -6979,8 +7033,8 @@ class SdCalendar {
|
|
|
6979
7033
|
'sd-calendar__day--disabled': isDisabled,
|
|
6980
7034
|
}, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
|
|
6981
7035
|
})), legend.length > 0 && [
|
|
6982
|
-
hAsync("span", { key: '
|
|
6983
|
-
hAsync("div", { key: '
|
|
7036
|
+
hAsync("span", { key: '713522194a9052e28b970f5eb6ad34941f7b6459', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
|
|
7037
|
+
hAsync("div", { key: 'fffe4cf9c14362c14e04be5cab0172c73490137f', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
|
|
6984
7038
|
]));
|
|
6985
7039
|
}
|
|
6986
7040
|
static get watchers() { return {
|
|
@@ -7188,7 +7242,9 @@ class SdCallout {
|
|
|
7188
7242
|
constructor(hostRef) {
|
|
7189
7243
|
registerInstance(this, hostRef);
|
|
7190
7244
|
}
|
|
7245
|
+
/** 콜아웃 타입 (색상·아이콘 조합 결정) */
|
|
7191
7246
|
type = 'default';
|
|
7247
|
+
/** 표시할 메시지 목록 (문자열 배열로 중첩 리스트 표현 가능) */
|
|
7192
7248
|
message = [];
|
|
7193
7249
|
get calloutStyle() {
|
|
7194
7250
|
const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
|
|
@@ -7235,7 +7291,7 @@ class SdCallout {
|
|
|
7235
7291
|
}
|
|
7236
7292
|
render() {
|
|
7237
7293
|
const showTitle = this.type === 'danger';
|
|
7238
|
-
return (hAsync("div", { key: '
|
|
7294
|
+
return (hAsync("div", { key: 'd608e8393a52dec8074ae6e8c4c80f59eb88891f', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '9950ae86dab1f76b7009b89b3dcb91ebfcff978b', class: "sd-callout__body" }, this.renderBody())));
|
|
7239
7295
|
}
|
|
7240
7296
|
static get style() { return sdCalloutCss(); }
|
|
7241
7297
|
static get cmpMeta() { return {
|
|
@@ -7257,10 +7313,12 @@ class SdCard {
|
|
|
7257
7313
|
constructor(hostRef) {
|
|
7258
7314
|
registerInstance(this, hostRef);
|
|
7259
7315
|
}
|
|
7316
|
+
/** 테두리 표시 여부 */
|
|
7260
7317
|
bordered = false;
|
|
7318
|
+
/** 카드 루트 엘리먼트에 추가할 클래스 */
|
|
7261
7319
|
sdClass = '';
|
|
7262
7320
|
render() {
|
|
7263
|
-
return (hAsync(Fragment, { key: '
|
|
7321
|
+
return (hAsync(Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, hAsync("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
|
|
7264
7322
|
}
|
|
7265
7323
|
static get style() { return sdCardCss(); }
|
|
7266
7324
|
static get cmpMeta() { return {
|
|
@@ -7283,9 +7341,13 @@ const checkbox = {
|
|
|
7283
7341
|
gap: "8",
|
|
7284
7342
|
icon: "12",
|
|
7285
7343
|
typography: {
|
|
7286
|
-
|
|
7287
|
-
|
|
7288
|
-
|
|
7344
|
+
"default": {
|
|
7345
|
+
fontWeight: "400",
|
|
7346
|
+
fontSize: "12",
|
|
7347
|
+
lineHeight: "20"},
|
|
7348
|
+
selected: {
|
|
7349
|
+
fontWeight: "500"}
|
|
7350
|
+
},
|
|
7289
7351
|
unchecked: {
|
|
7290
7352
|
bg: {
|
|
7291
7353
|
"default": "#FFFFFF",
|
|
@@ -7311,7 +7373,8 @@ const checkbox = {
|
|
|
7311
7373
|
},
|
|
7312
7374
|
label: {
|
|
7313
7375
|
"default": "#222222",
|
|
7314
|
-
inverse: "#FFFFFF"
|
|
7376
|
+
inverse: "#FFFFFF",
|
|
7377
|
+
disabled: "#888888"
|
|
7315
7378
|
},
|
|
7316
7379
|
bg: {
|
|
7317
7380
|
disabled: "#E1E1E1"
|
|
@@ -7332,9 +7395,10 @@ const CHECKBOX_LAYOUT = {
|
|
|
7332
7395
|
iconSize: checkboxTokens.checkbox.icon,
|
|
7333
7396
|
};
|
|
7334
7397
|
const CHECKBOX_TYPOGRAPHY = {
|
|
7335
|
-
fontSize: checkboxTokens.checkbox.typography.fontSize,
|
|
7336
|
-
lineHeight: checkboxTokens.checkbox.typography.lineHeight,
|
|
7337
|
-
fontWeight: checkboxTokens.checkbox.typography.fontWeight,
|
|
7398
|
+
fontSize: checkboxTokens.checkbox.typography.default.fontSize,
|
|
7399
|
+
lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
|
|
7400
|
+
fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
|
|
7401
|
+
selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
|
|
7338
7402
|
};
|
|
7339
7403
|
const CHECKBOX_COLORS = {
|
|
7340
7404
|
unchecked: {
|
|
@@ -7352,13 +7416,14 @@ const CHECKBOX_COLORS = {
|
|
|
7352
7416
|
},
|
|
7353
7417
|
label: checkboxTokens.checkbox.label.default,
|
|
7354
7418
|
labelInverse: checkboxTokens.checkbox.label.inverse,
|
|
7419
|
+
labelDisabled: checkboxTokens.checkbox.label.disabled,
|
|
7355
7420
|
disabled: {
|
|
7356
7421
|
bg: checkboxTokens.checkbox.bg.disabled,
|
|
7357
7422
|
border: checkboxTokens.checkbox.border.disabled,
|
|
7358
7423
|
},
|
|
7359
7424
|
};
|
|
7360
7425
|
|
|
7361
|
-
const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
|
|
7426
|
+
const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{display:inline-flex;flex-direction:column;font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox__label::after{content:attr(data-text);height:0;font-weight:var(--sd-checkbox-font-weight-selected);overflow:hidden;visibility:hidden;pointer-events:none}sd-checkbox .sd-checkbox--checked .sd-checkbox__label,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__label{font-weight:var(--sd-checkbox-font-weight-selected)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__label{color:var(--sd-checkbox-label-disabled)}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
|
|
7362
7427
|
|
|
7363
7428
|
class SdCheckbox {
|
|
7364
7429
|
constructor(hostRef) {
|
|
@@ -7457,25 +7522,27 @@ class SdCheckbox {
|
|
|
7457
7522
|
'--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
|
|
7458
7523
|
'--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
|
|
7459
7524
|
'--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
|
|
7525
|
+
'--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
|
|
7460
7526
|
'--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
|
|
7461
7527
|
'--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
|
|
7462
7528
|
'--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
|
|
7463
7529
|
'--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
|
|
7464
7530
|
'--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
|
|
7465
7531
|
'--sd-checkbox-label-color': CHECKBOX_COLORS.label,
|
|
7532
|
+
'--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
|
|
7466
7533
|
'--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
|
|
7467
7534
|
'--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
|
|
7468
7535
|
'--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
|
|
7469
7536
|
'--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
|
|
7470
7537
|
'--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
|
|
7471
7538
|
};
|
|
7472
|
-
return (hAsync("label", { key: '
|
|
7539
|
+
return (hAsync("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
|
|
7473
7540
|
this.inputEl = el;
|
|
7474
|
-
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '
|
|
7541
|
+
}, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
|
|
7475
7542
|
? CHECKBOX_COLORS.checked.iconDisabled
|
|
7476
7543
|
: this.inverse
|
|
7477
7544
|
? CHECKBOX_COLORS.checked.iconInverse
|
|
7478
|
-
: CHECKBOX_COLORS.checked.icon })) : null), this.label && hAsync("span", { key: '
|
|
7545
|
+
: CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
|
|
7479
7546
|
}
|
|
7480
7547
|
static get watchers() { return {
|
|
7481
7548
|
"value": [{
|
|
@@ -7577,18 +7644,29 @@ class SdChip {
|
|
|
7577
7644
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
7578
7645
|
}
|
|
7579
7646
|
get el() { return getElement(this); }
|
|
7647
|
+
/** 폼 연동용 name 속성 */
|
|
7580
7648
|
name = '';
|
|
7649
|
+
/** 칩 텍스트 값 */
|
|
7581
7650
|
value = '';
|
|
7651
|
+
/** 에러 상태 여부 */
|
|
7582
7652
|
error = false;
|
|
7653
|
+
/** 비활성 상태 여부 */
|
|
7583
7654
|
disabled = false;
|
|
7655
|
+
/** 인라인 편집 가능 여부 */
|
|
7584
7656
|
editable = true;
|
|
7657
|
+
/** 편집 중 표시할 placeholder */
|
|
7585
7658
|
placeholder = '';
|
|
7659
|
+
/** 유효성 검사 규칙 목록 */
|
|
7586
7660
|
rules = [];
|
|
7587
7661
|
internalValue = '';
|
|
7588
7662
|
isEditing = false;
|
|
7663
|
+
/** 편집 완료 시 새 값을 전달합니다. */
|
|
7589
7664
|
update;
|
|
7665
|
+
/** 삭제 버튼 클릭 시 발생합니다. */
|
|
7590
7666
|
delete;
|
|
7667
|
+
/** 편집 모드 진입 시 발생합니다. */
|
|
7591
7668
|
focus;
|
|
7669
|
+
/** 편집 모드 이탈 시 발생합니다. */
|
|
7592
7670
|
blur;
|
|
7593
7671
|
inputEl;
|
|
7594
7672
|
draftValue = '';
|
|
@@ -7614,6 +7692,7 @@ class SdChip {
|
|
|
7614
7692
|
disconnectedCallback() {
|
|
7615
7693
|
this.unregisterFromForm();
|
|
7616
7694
|
}
|
|
7695
|
+
/** 유효성 검사를 실행합니다. */
|
|
7617
7696
|
async sdValidate() {
|
|
7618
7697
|
if (!this.rules || this.rules.length === 0) {
|
|
7619
7698
|
this.error = false;
|
|
@@ -7629,6 +7708,7 @@ class SdChip {
|
|
|
7629
7708
|
this.error = false;
|
|
7630
7709
|
return true;
|
|
7631
7710
|
}
|
|
7711
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
7632
7712
|
async sdReset() {
|
|
7633
7713
|
this.internalValue = '';
|
|
7634
7714
|
this.value = '';
|
|
@@ -7637,17 +7717,21 @@ class SdChip {
|
|
|
7637
7717
|
this.isEditing = false;
|
|
7638
7718
|
this.shouldInitInput = false;
|
|
7639
7719
|
}
|
|
7720
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7640
7721
|
async sdResetValidate() {
|
|
7641
7722
|
this.error = false;
|
|
7642
7723
|
}
|
|
7724
|
+
/** 유효성 상태만 초기화합니다. */
|
|
7643
7725
|
async sdResetValidation() {
|
|
7644
7726
|
this.error = false;
|
|
7645
7727
|
}
|
|
7728
|
+
/** 편집 모드로 전환하여 포커스를 이동합니다. */
|
|
7646
7729
|
async sdFocus() {
|
|
7647
7730
|
if (this.disabled)
|
|
7648
7731
|
return;
|
|
7649
7732
|
this.enterEditMode();
|
|
7650
7733
|
}
|
|
7734
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
7651
7735
|
async sdGetNativeElement() {
|
|
7652
7736
|
return this.inputEl ?? null;
|
|
7653
7737
|
}
|
|
@@ -7790,7 +7874,7 @@ class SdChip {
|
|
|
7790
7874
|
'--sd-chip-font-weight': typography.fontWeight,
|
|
7791
7875
|
'--sd-chip-line-height': typography.lineHeight,
|
|
7792
7876
|
};
|
|
7793
|
-
return (hAsync("span", { key: '
|
|
7877
|
+
return (hAsync("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
|
|
7794
7878
|
'sd-chip': true,
|
|
7795
7879
|
[`sd-chip--${state}`]: true,
|
|
7796
7880
|
'sd-chip--disabled': this.disabled,
|
|
@@ -8023,7 +8107,7 @@ const CHIP_INPUT_SUGGESTIONS = {
|
|
|
8023
8107
|
emptyLineHeight: '20px',
|
|
8024
8108
|
};
|
|
8025
8109
|
|
|
8026
|
-
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8110
|
+
const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
|
|
8027
8111
|
|
|
8028
8112
|
class SdChipInput {
|
|
8029
8113
|
constructor(hostRef) {
|
|
@@ -8035,31 +8119,56 @@ class SdChipInput {
|
|
|
8035
8119
|
}
|
|
8036
8120
|
static SUGGESTIONS_VIEWPORT_PADDING = 8;
|
|
8037
8121
|
get host() { return getElement(this); }
|
|
8122
|
+
/** 칩 값 목록 */
|
|
8038
8123
|
values = [];
|
|
8124
|
+
/** 칩별 에러 상태 목록 또는 값으로 에러 여부를 반환하는 함수 */
|
|
8039
8125
|
errors = [];
|
|
8126
|
+
/** 칩별 비활성 상태 목록 또는 값으로 비활성 여부를 반환하는 함수 */
|
|
8040
8127
|
disabledChips = [];
|
|
8128
|
+
/** 입력 필드 크기 */
|
|
8041
8129
|
size = 'sm';
|
|
8130
|
+
/** 비활성 상태 여부 */
|
|
8042
8131
|
disabled = false;
|
|
8132
|
+
/** 입력 placeholder */
|
|
8043
8133
|
placeholder = '입력해 주세요.';
|
|
8134
|
+
/** 폼 연동용 name 속성 */
|
|
8044
8135
|
name = nanoid$1();
|
|
8136
|
+
/** 유효성 검사 규칙 목록 */
|
|
8045
8137
|
rules = [];
|
|
8138
|
+
/** 에러 상태 여부 */
|
|
8046
8139
|
error = false;
|
|
8140
|
+
/** 입력 초기화 버튼 표시 여부 */
|
|
8047
8141
|
useReset = false;
|
|
8142
|
+
/** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
|
|
8048
8143
|
maxCount;
|
|
8144
|
+
/** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
|
|
8049
8145
|
duplicateLabel;
|
|
8146
|
+
/** 자동완성 후보 목록 */
|
|
8050
8147
|
suggestions = [];
|
|
8148
|
+
/** 자동완성 목록 로딩 중 여부 */
|
|
8051
8149
|
loadingSuggestions = false;
|
|
8150
|
+
/** 추천 항목 목록 (입력값이 없을 때 표시) */
|
|
8052
8151
|
recommendedItems = [];
|
|
8152
|
+
/** 추천 항목 로딩 중 여부 */
|
|
8053
8153
|
loadingRecommendedItems = false;
|
|
8054
8154
|
// sd-field props
|
|
8155
|
+
/** 레이블 텍스트 */
|
|
8055
8156
|
label = '';
|
|
8157
|
+
/** 레이블 너비 */
|
|
8056
8158
|
labelWidth = '';
|
|
8159
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8057
8160
|
hint = '';
|
|
8161
|
+
/** 에러 메시지 */
|
|
8058
8162
|
errorMessage = '';
|
|
8163
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8059
8164
|
width = '';
|
|
8165
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
8060
8166
|
status;
|
|
8167
|
+
/** 레이블 영역 아이콘 */
|
|
8061
8168
|
icon = undefined;
|
|
8169
|
+
/** 레이블 툴팁 텍스트 */
|
|
8062
8170
|
labelTooltip = '';
|
|
8171
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8063
8172
|
labelTooltipProps = null;
|
|
8064
8173
|
internalValues = [];
|
|
8065
8174
|
internalErrors = [];
|
|
@@ -8126,19 +8235,27 @@ class SdChipInput {
|
|
|
8126
8235
|
}
|
|
8127
8236
|
return this.disabledChips?.[index] ?? false;
|
|
8128
8237
|
}
|
|
8238
|
+
/** 칩 목록 변경 시 전체 값 배열을 전달합니다. */
|
|
8129
8239
|
update;
|
|
8240
|
+
/** 입력 필드 포커스 진입 시 발생합니다. */
|
|
8130
8241
|
focusEvent;
|
|
8242
|
+
/** 입력 필드 포커스 이탈 시 발생합니다. */
|
|
8131
8243
|
blurEvent;
|
|
8244
|
+
/** 입력값 변경 시 현재 입력 중인 문자열을 전달합니다. */
|
|
8132
8245
|
inputEvent;
|
|
8246
|
+
/** 유효성 검사를 실행합니다. */
|
|
8133
8247
|
async sdValidate() {
|
|
8134
8248
|
return this.formField?.sdValidate();
|
|
8135
8249
|
}
|
|
8250
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8136
8251
|
async sdReset() {
|
|
8137
8252
|
return this.formField?.sdReset();
|
|
8138
8253
|
}
|
|
8254
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8139
8255
|
async sdResetValidate() {
|
|
8140
8256
|
return this.formField?.sdResetValidation();
|
|
8141
8257
|
}
|
|
8258
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
8142
8259
|
async sdFocus() {
|
|
8143
8260
|
return this.formField?.sdFocus();
|
|
8144
8261
|
}
|
|
@@ -8219,7 +8336,9 @@ class SdChipInput {
|
|
|
8219
8336
|
}
|
|
8220
8337
|
if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
|
|
8221
8338
|
event.preventDefault();
|
|
8222
|
-
|
|
8339
|
+
const selectedItem = activeItems[this.activeSuggestionIndex];
|
|
8340
|
+
if (!(this.internalValues ?? []).includes(selectedItem))
|
|
8341
|
+
this.addChip(selectedItem);
|
|
8223
8342
|
return;
|
|
8224
8343
|
}
|
|
8225
8344
|
}
|
|
@@ -8279,6 +8398,10 @@ class SdChipInput {
|
|
|
8279
8398
|
};
|
|
8280
8399
|
handleContainerClick = () => {
|
|
8281
8400
|
if (!this.disabled) {
|
|
8401
|
+
// 이미 포커스된 상태에서 재클릭 시 handleFocus가 다시 실행되지 않으므로
|
|
8402
|
+
// suppress 플래그를 여기서 직접 해제한다.
|
|
8403
|
+
this.suppressRecommendations = false;
|
|
8404
|
+
this.suppressSuggestions = false;
|
|
8282
8405
|
this.inputEl?.focus();
|
|
8283
8406
|
}
|
|
8284
8407
|
};
|
|
@@ -8399,6 +8522,7 @@ class SdChipInput {
|
|
|
8399
8522
|
};
|
|
8400
8523
|
const suggestionItemStyle = {
|
|
8401
8524
|
display: 'flex',
|
|
8525
|
+
flexShrink: '0',
|
|
8402
8526
|
alignItems: 'center',
|
|
8403
8527
|
gap: CHIP_INPUT_SUGGESTIONS.itemGap,
|
|
8404
8528
|
padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
|
|
@@ -8422,7 +8546,7 @@ class SdChipInput {
|
|
|
8422
8546
|
fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
|
|
8423
8547
|
color: CHIP_INPUT_SUGGESTIONS.emptyColor,
|
|
8424
8548
|
};
|
|
8425
|
-
return (hAsync("sd-field", { key: '
|
|
8549
|
+
return (hAsync("sd-field", { key: 'b72e33b6f204ebdf6791cc2f20d01bbb74a4203a', 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: '499114d06f4d375fed5575edd394c501f4d72691', 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: '5910a2d0e0e9cbc472baa1d9c9c3fa07e89fbdcb', class: {
|
|
8426
8550
|
'sd-chip-input__field': true,
|
|
8427
8551
|
'sd-chip-input__field--filled': this.inputValue !== '',
|
|
8428
8552
|
'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
|
|
@@ -8430,20 +8554,38 @@ class SdChipInput {
|
|
|
8430
8554
|
? this.inputValue
|
|
8431
8555
|
: this.internalValues.length === 0
|
|
8432
8556
|
? this.placeholder
|
|
8433
|
-
: '' }, hAsync("input", { key: '
|
|
8434
|
-
|
|
8435
|
-
|
|
8436
|
-
|
|
8437
|
-
|
|
8438
|
-
|
|
8439
|
-
|
|
8440
|
-
|
|
8441
|
-
|
|
8442
|
-
|
|
8443
|
-
|
|
8444
|
-
|
|
8445
|
-
|
|
8446
|
-
|
|
8557
|
+
: '' }, hAsync("input", { key: '3c1e75d691332b67a500a2d17030d5db191bdeb9', 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 && (
|
|
8558
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
8559
|
+
hAsync("div", { key: '4aa212280a928b88b85dffa3d453ea8f563e1fe0', class: "sd-chip-input__reset",
|
|
8560
|
+
// 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
|
|
8561
|
+
// 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
|
|
8562
|
+
onMouseDown: e => e.preventDefault() }, this.inputValue === '' && hAsync("span", { key: 'f7faa45b57d8e38dda8cc98119357f92d914fee4', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: 'dfde4ea82558414614fb2d817f7bfa1fb5d4bf5f', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '9b43c82c1a5d425e5b187e92b4259e7d919491e3', 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: 'aa205aacbbafcd8c3d9855268637e6da956d4a74', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '26814734f202da3a13e695ae1d0c913ea430b888', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (hAsync("div", { key: 'df80d11b79f67dc6cfe6503b258528efa3752265', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => {
|
|
8563
|
+
const isSelected = (this.internalValues ?? []).includes(item);
|
|
8564
|
+
const isActive = i === this.activeSuggestionIndex && !isSelected;
|
|
8565
|
+
return (hAsync("div", { key: item, class: {
|
|
8566
|
+
'sd-chip-input__suggestion-item': true,
|
|
8567
|
+
'sd-chip-input__suggestion-item--active': isActive,
|
|
8568
|
+
'sd-chip-input__suggestion-item--selected': isSelected,
|
|
8569
|
+
}, role: "option", tabIndex: -1, "aria-selected": isSelected || isActive, "aria-disabled": isSelected ? 'true' : undefined, style: isSelected
|
|
8570
|
+
? {
|
|
8571
|
+
...suggestionItemStyle,
|
|
8572
|
+
color: '#0075FF',
|
|
8573
|
+
fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
|
|
8574
|
+
cursor: 'default',
|
|
8575
|
+
}
|
|
8576
|
+
: isActive
|
|
8577
|
+
? {
|
|
8578
|
+
...suggestionItemStyle,
|
|
8579
|
+
background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
|
|
8580
|
+
color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
|
|
8581
|
+
fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
|
|
8582
|
+
}
|
|
8583
|
+
: suggestionItemStyle, onMouseDown: e => {
|
|
8584
|
+
e.preventDefault();
|
|
8585
|
+
if (!isSelected)
|
|
8586
|
+
this.addChip(item);
|
|
8587
|
+
} }, hAsync("span", { style: { flex: '1' } }, item), isSelected && (hAsync("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
|
|
8588
|
+
})))))));
|
|
8447
8589
|
}
|
|
8448
8590
|
static get watchers() { return {
|
|
8449
8591
|
"values": [{
|
|
@@ -8575,9 +8717,13 @@ class SdCircleProgress {
|
|
|
8575
8717
|
constructor(hostRef) {
|
|
8576
8718
|
registerInstance(this, hostRef);
|
|
8577
8719
|
}
|
|
8720
|
+
/** 불확정 상태 여부 (true면 value 무시하고 스피너처럼 애니메이션) */
|
|
8578
8721
|
indeterminate = false;
|
|
8722
|
+
/** 진행률 (0~100) */
|
|
8579
8723
|
value = 0;
|
|
8724
|
+
/** 색상 테마 */
|
|
8580
8725
|
type = 'primary';
|
|
8726
|
+
/** 원 하단에 표시할 레이블 텍스트 */
|
|
8581
8727
|
label;
|
|
8582
8728
|
get clampedValue() {
|
|
8583
8729
|
if (!Number.isFinite(this.value))
|
|
@@ -8601,7 +8747,7 @@ class SdCircleProgress {
|
|
|
8601
8747
|
}
|
|
8602
8748
|
const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
|
|
8603
8749
|
const showPercent = !this.indeterminate;
|
|
8604
|
-
return (hAsync(Host, { key: '
|
|
8750
|
+
return (hAsync(Host, { key: '1af8807d6ce19c4326e67ae55bd40620b83e9435', style: hostStyle }, hAsync("svg", { key: '21c2c5898ddf6f78b03964f3365e82382f90ce48', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '1d9b2e95f767008af2a5d836f16e6e47e751677a', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '1c8f4a5b1ae8f643debf68452317d0bcc0b4ab36', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '1b15cdd56b3ac0d254d4a5304f40d3c5b1710b8d', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'e830db48529d87ddf788834d8731a576582662af', class: "sd-circle-progress__label" }, this.label)));
|
|
8605
8751
|
}
|
|
8606
8752
|
static get style() { return sdCircleProgressCss(); }
|
|
8607
8753
|
static get cmpMeta() { return {
|
|
@@ -8650,20 +8796,35 @@ class SdConfirmModal {
|
|
|
8650
8796
|
hasSlottedContent = false;
|
|
8651
8797
|
customContentRef;
|
|
8652
8798
|
slotObserver;
|
|
8799
|
+
/** 모달 타입 (아이콘·버튼 색상 결정) */
|
|
8653
8800
|
type = 'positive';
|
|
8801
|
+
/** 모달 제목 */
|
|
8654
8802
|
modalTitle = '';
|
|
8803
|
+
/** 제목 엘리먼트에 추가할 클래스 */
|
|
8655
8804
|
titleClass = '';
|
|
8805
|
+
/** 콘텐츠 박스 상단 메시지 목록 */
|
|
8656
8806
|
topMessage = [];
|
|
8807
|
+
/** 콘텐츠 박스 하단 메시지 목록 */
|
|
8657
8808
|
bottomMessage = [];
|
|
8809
|
+
/** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
|
|
8658
8810
|
mainButtonName;
|
|
8811
|
+
/** 확인 버튼 레이블 */
|
|
8659
8812
|
mainButtonLabel = '확인';
|
|
8813
|
+
/** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
|
|
8660
8814
|
subButtonLabel = '';
|
|
8815
|
+
/** 콘텐츠 박스에 표시할 태그 프리셋 */
|
|
8661
8816
|
tagPreset = 'square_sm_grey';
|
|
8817
|
+
/** 콘텐츠 박스에 표시할 태그 레이블 */
|
|
8662
8818
|
tagLabel = '';
|
|
8819
|
+
/** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
|
|
8663
8820
|
slotLabel = '';
|
|
8821
|
+
/** 콘텐츠 박스에 직접 삽입할 HTMLElement */
|
|
8664
8822
|
tagContents;
|
|
8823
|
+
/** 닫기 버튼 클릭 시 발생합니다. */
|
|
8665
8824
|
close;
|
|
8825
|
+
/** 취소 버튼 클릭 시 발생합니다. */
|
|
8666
8826
|
cancel;
|
|
8827
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
8667
8828
|
ok;
|
|
8668
8829
|
componentWillLoad() {
|
|
8669
8830
|
this.syncHasSlottedContent();
|
|
@@ -8717,9 +8878,9 @@ class SdConfirmModal {
|
|
|
8717
8878
|
const type = this.resolvedType;
|
|
8718
8879
|
const iconName = CONFIRM_MODAL_ICON_MAP[type];
|
|
8719
8880
|
const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
|
|
8720
|
-
return (hAsync("div", { key: '
|
|
8881
|
+
return (hAsync("div", { key: '26270c4ca645f0e7e245b4bd40423bcf09029e22', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '672b73221f8638eff70c3074614fcc90b489702e', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '895dda6ba69d41f33f9465fb9db28739da28d2e6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'ace6b9da4421c28e2bb828c60cae1c1cc7547f9a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: '3370fe954c33f8ce6a643fcc9b19f299682b43e8', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a6bc182c638e909a821353c188d2ef558452e17', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (hAsync("div", { key: 'dba37f4ab114f3641a9f287d123fb7f94e49c00a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
|
|
8721
8882
|
this.customContentRef = el;
|
|
8722
|
-
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '
|
|
8883
|
+
} })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'ed29da73d968017c44cd61540139fac24592ea70', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '608287c021f4191dcea0a0b5798381cbc8742170', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a67c309617c6e1f30aa9167587e8cbb9fb961482', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '3c1a698a8276e2924f62cf1c7e472bd34ac581a1', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
|
|
8723
8884
|
}
|
|
8724
8885
|
static get style() { return sdConfirmModalCss(); }
|
|
8725
8886
|
static get cmpMeta() { return {
|
|
@@ -8754,15 +8915,25 @@ class SdDateBox {
|
|
|
8754
8915
|
this.click = createEvent(this, "sdClick", 7);
|
|
8755
8916
|
this.mouseOver = createEvent(this, "sdMouseOver", 7);
|
|
8756
8917
|
}
|
|
8918
|
+
/** 표시할 날짜 값 */
|
|
8757
8919
|
date = null;
|
|
8920
|
+
/** 비활성 상태 여부 */
|
|
8758
8921
|
disabled = false;
|
|
8922
|
+
/** 선택된 날짜 여부 */
|
|
8759
8923
|
selected = false;
|
|
8924
|
+
/** 범위 시작일 여부 */
|
|
8760
8925
|
isStartDate = false;
|
|
8926
|
+
/** 범위 종료일 여부 */
|
|
8761
8927
|
isEndDate = false;
|
|
8928
|
+
/** 오늘 날짜 여부 */
|
|
8762
8929
|
isToday = false;
|
|
8930
|
+
/** 선택 범위 내 날짜 여부 */
|
|
8763
8931
|
inRange = false;
|
|
8932
|
+
/** 범위 선택에서의 역할 (start | end | 없음) */
|
|
8764
8933
|
type = '';
|
|
8934
|
+
/** 날짜 클릭 시 해당 날짜 값을 전달합니다. */
|
|
8765
8935
|
click;
|
|
8936
|
+
/** 날짜 hover 시 해당 날짜 값을 전달합니다. */
|
|
8766
8937
|
mouseOver;
|
|
8767
8938
|
handleClickDate() {
|
|
8768
8939
|
if (this.disabled || this.date === undefined || this.date === '' || this.date === 0)
|
|
@@ -8777,7 +8948,7 @@ class SdDateBox {
|
|
|
8777
8948
|
this.mouseOver?.emit(this.date);
|
|
8778
8949
|
}
|
|
8779
8950
|
render() {
|
|
8780
|
-
return (hAsync("div", { key: '
|
|
8951
|
+
return (hAsync("div", { key: '8b8bc2facd0f4614a6022c48bbd026390d8599e4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
8781
8952
|
'sd-date-box': true,
|
|
8782
8953
|
'sd-hoverable': !this.disabled || !this.selected || this.type === '',
|
|
8783
8954
|
'sd-date-box--disabled': this.disabled,
|
|
@@ -8793,7 +8964,7 @@ class SdDateBox {
|
|
|
8793
8964
|
e.preventDefault();
|
|
8794
8965
|
this.handleClickDate();
|
|
8795
8966
|
}
|
|
8796
|
-
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: '
|
|
8967
|
+
}, onMouseOver: () => this.handleHoverDate(), onFocus: () => this.handleHoverDate() }, hAsync("div", { key: 'acbd57ac0300ca143f1e75780b59b5fc107d537f', class: "sd-date-box__content" }, hAsync("div", { key: 'aeff50640c285cfd75d5592e67c97e5ec55eb00c', class: "sd-date-box__label" }, this.date))));
|
|
8797
8968
|
}
|
|
8798
8969
|
static get style() { return sdDateBoxCss(); }
|
|
8799
8970
|
static get cmpMeta() { return {
|
|
@@ -8917,43 +9088,66 @@ class SdDatePicker {
|
|
|
8917
9088
|
}
|
|
8918
9089
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
8919
9090
|
get el() { return getElement(this); }
|
|
9091
|
+
/** 선택된 날짜 (YYYY-MM-DD) */
|
|
8920
9092
|
value = null;
|
|
9093
|
+
/** 입력 필드 크기 */
|
|
8921
9094
|
size = 'sm';
|
|
9095
|
+
/** 날짜 미선택 시 표시할 placeholder */
|
|
8922
9096
|
placeholder = 'YYYY-MM-DD';
|
|
9097
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
8923
9098
|
selectable;
|
|
9099
|
+
/** 비활성 상태 여부 */
|
|
8924
9100
|
disabled = false;
|
|
9101
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
8925
9102
|
width = '';
|
|
8926
9103
|
// sd-field 공통 props
|
|
9104
|
+
/** 레이블 텍스트 */
|
|
8927
9105
|
label = '';
|
|
9106
|
+
/** 레이블 너비 */
|
|
8928
9107
|
labelWidth = '';
|
|
9108
|
+
/** 필드 우측 어드온 레이블 */
|
|
8929
9109
|
addonLabel = '';
|
|
9110
|
+
/** 어드온 정렬 방향 */
|
|
8930
9111
|
addonAlign = 'start';
|
|
9112
|
+
/** 필드 하단 힌트 텍스트 */
|
|
8931
9113
|
hint = '';
|
|
9114
|
+
/** 에러 메시지 */
|
|
8932
9115
|
errorMessage = '';
|
|
9116
|
+
/** 유효성 검사 규칙 목록 */
|
|
8933
9117
|
rules = [];
|
|
9118
|
+
/** 에러 상태 여부 */
|
|
8934
9119
|
error = false;
|
|
9120
|
+
/** 레이블 영역 아이콘 */
|
|
8935
9121
|
icon = undefined;
|
|
9122
|
+
/** 레이블 툴팁 텍스트 */
|
|
8936
9123
|
labelTooltip = '';
|
|
9124
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
8937
9125
|
labelTooltipProps = null;
|
|
8938
9126
|
isOpen = false;
|
|
8939
9127
|
isAnimatingOut = false;
|
|
8940
9128
|
focused = false;
|
|
8941
9129
|
hovered = false;
|
|
9130
|
+
/** 날짜 선택 시 선택된 날짜(YYYY-MM-DD)를 전달합니다. */
|
|
8942
9131
|
update;
|
|
9132
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
8943
9133
|
viewChange;
|
|
8944
9134
|
triggerRef;
|
|
8945
9135
|
formField;
|
|
8946
9136
|
closeAnimationTimer;
|
|
9137
|
+
/** 폼 연동용 name 속성 */
|
|
8947
9138
|
name = nanoid$1();
|
|
8948
9139
|
watchIsOpen(newValue) {
|
|
8949
9140
|
this.focused = newValue;
|
|
8950
9141
|
}
|
|
9142
|
+
/** 유효성 검사를 실행합니다. */
|
|
8951
9143
|
async sdValidate() {
|
|
8952
9144
|
return this.formField?.sdValidate();
|
|
8953
9145
|
}
|
|
9146
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
8954
9147
|
async sdReset() {
|
|
8955
9148
|
return this.formField?.sdReset();
|
|
8956
9149
|
}
|
|
9150
|
+
/** 유효성 상태만 초기화합니다. */
|
|
8957
9151
|
async sdResetValidate() {
|
|
8958
9152
|
return this.formField?.sdResetValidation();
|
|
8959
9153
|
}
|
|
@@ -9006,9 +9200,9 @@ class SdDatePicker {
|
|
|
9006
9200
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9007
9201
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9008
9202
|
};
|
|
9009
|
-
return (hAsync("sd-field", { key: '
|
|
9203
|
+
return (hAsync("sd-field", { key: '2fc699a41a6646404e5cbd29688f14c61b466c56', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '33c690078e2511657bfe3747d81cc1333b021353', class: "sd-date-picker", ref: el => {
|
|
9010
9204
|
this.triggerRef = el;
|
|
9011
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9205
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'b5248eecbf1c4e8eca4e5b23206b7bebe7034280', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'f89b8688a43b9c702d75b8c5587b30626c7fd2db', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '4b293972c1b860f6d85be57fb72689c94699aeae', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9012
9206
|
}
|
|
9013
9207
|
static get watchers() { return {
|
|
9014
9208
|
"isOpen": [{
|
|
@@ -9059,10 +9253,15 @@ class SdDatePickerTrigger {
|
|
|
9059
9253
|
registerInstance(this, hostRef);
|
|
9060
9254
|
this.triggerClick = createEvent(this, "sdTriggerClick", 7);
|
|
9061
9255
|
}
|
|
9256
|
+
/** 표시할 날짜 텍스트 */
|
|
9062
9257
|
displayText = '';
|
|
9258
|
+
/** 입력 힌트 텍스트 */
|
|
9063
9259
|
placeholder = 'YYYY-MM-DD';
|
|
9260
|
+
/** 비활성 상태 여부 */
|
|
9064
9261
|
disabled = false;
|
|
9262
|
+
/** 트리거 크기 */
|
|
9065
9263
|
size = 'sm';
|
|
9264
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
9066
9265
|
triggerClick;
|
|
9067
9266
|
handleClick = () => {
|
|
9068
9267
|
if (this.disabled)
|
|
@@ -9091,7 +9290,7 @@ class SdDatePickerTrigger {
|
|
|
9091
9290
|
? DATEPICKER_COLORS.icon.disabled
|
|
9092
9291
|
: DATEPICKER_COLORS.icon.default,
|
|
9093
9292
|
};
|
|
9094
|
-
return (hAsync("div", { key: '
|
|
9293
|
+
return (hAsync("div", { key: 'a8484cc7ca6fd02ea48ab033fec3da69702f4f71', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
9095
9294
|
'sd-date-picker-trigger': true,
|
|
9096
9295
|
'sd-date-picker-trigger--disabled': this.disabled,
|
|
9097
9296
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -9099,7 +9298,7 @@ class SdDatePickerTrigger {
|
|
|
9099
9298
|
e.preventDefault();
|
|
9100
9299
|
this.handleClick();
|
|
9101
9300
|
}
|
|
9102
|
-
} }, hAsync("sd-icon", { key: '
|
|
9301
|
+
} }, hAsync("sd-icon", { key: 'e87c63032774389064c56f3212882727c1091b53', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '3876d7e9c08771de796ab04106190baf45625f0f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
|
|
9103
9302
|
}
|
|
9104
9303
|
static get style() { return sdDatePickerTriggerCss(); }
|
|
9105
9304
|
static get cmpMeta() { return {
|
|
@@ -9134,44 +9333,68 @@ class SdDateRangePicker {
|
|
|
9134
9333
|
}
|
|
9135
9334
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9136
9335
|
get el() { return getElement(this); }
|
|
9336
|
+
/** 선택된 날짜 범위 [시작일, 종료일] (YYYY-MM-DD) */
|
|
9137
9337
|
value = null;
|
|
9338
|
+
/** 입력 필드 크기 */
|
|
9138
9339
|
size = 'sm';
|
|
9340
|
+
/** 미선택 시 표시할 placeholder */
|
|
9139
9341
|
placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
|
|
9342
|
+
/** 선택 가능한 날짜 범위 [시작일, 종료일] */
|
|
9140
9343
|
selectable;
|
|
9344
|
+
/** 최대 선택 가능한 날짜 범위 (일 단위) */
|
|
9141
9345
|
maxRange;
|
|
9346
|
+
/** 비활성 상태 여부 */
|
|
9142
9347
|
disabled = false;
|
|
9348
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
9143
9349
|
width = '';
|
|
9144
9350
|
// sd-field 공통 props
|
|
9351
|
+
/** 레이블 텍스트 */
|
|
9145
9352
|
label = '';
|
|
9353
|
+
/** 레이블 너비 */
|
|
9146
9354
|
labelWidth = '';
|
|
9355
|
+
/** 필드 우측 어드온 레이블 */
|
|
9147
9356
|
addonLabel = '';
|
|
9357
|
+
/** 어드온 정렬 방향 */
|
|
9148
9358
|
addonAlign = 'start';
|
|
9359
|
+
/** 필드 하단 힌트 텍스트 */
|
|
9149
9360
|
hint = '';
|
|
9361
|
+
/** 에러 메시지 */
|
|
9150
9362
|
errorMessage = '';
|
|
9363
|
+
/** 유효성 검사 규칙 목록 */
|
|
9151
9364
|
rules = [];
|
|
9365
|
+
/** 에러 상태 여부 */
|
|
9152
9366
|
error = false;
|
|
9367
|
+
/** 레이블 영역 아이콘 */
|
|
9153
9368
|
icon = undefined;
|
|
9369
|
+
/** 레이블 툴팁 텍스트 */
|
|
9154
9370
|
labelTooltip = '';
|
|
9371
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
9155
9372
|
labelTooltipProps = null;
|
|
9156
9373
|
isOpen = false;
|
|
9157
9374
|
isAnimatingOut = false;
|
|
9158
9375
|
focused = false;
|
|
9159
9376
|
hovered = false;
|
|
9377
|
+
/** 날짜 범위 선택 완료 시 [시작일, 종료일]을 전달합니다. */
|
|
9160
9378
|
update;
|
|
9379
|
+
/** 달력 월/년 이동 시 현재 보여지는 연·월을 전달합니다. */
|
|
9161
9380
|
viewChange;
|
|
9162
9381
|
triggerRef;
|
|
9163
9382
|
formField;
|
|
9164
9383
|
closeAnimationTimer;
|
|
9384
|
+
/** 폼 연동용 name 속성 */
|
|
9165
9385
|
name = nanoid$1();
|
|
9166
9386
|
watchIsOpen(newValue) {
|
|
9167
9387
|
this.focused = newValue;
|
|
9168
9388
|
}
|
|
9389
|
+
/** 유효성 검사를 실행합니다. */
|
|
9169
9390
|
async sdValidate() {
|
|
9170
9391
|
return this.formField?.sdValidate();
|
|
9171
9392
|
}
|
|
9393
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
9172
9394
|
async sdReset() {
|
|
9173
9395
|
return this.formField?.sdReset();
|
|
9174
9396
|
}
|
|
9397
|
+
/** 유효성 상태만 초기화합니다. */
|
|
9175
9398
|
async sdResetValidate() {
|
|
9176
9399
|
return this.formField?.sdResetValidation();
|
|
9177
9400
|
}
|
|
@@ -9228,9 +9451,9 @@ class SdDateRangePicker {
|
|
|
9228
9451
|
'--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
|
|
9229
9452
|
'--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
|
|
9230
9453
|
};
|
|
9231
|
-
return (hAsync("sd-field", { key: '
|
|
9454
|
+
return (hAsync("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
|
|
9232
9455
|
this.triggerRef = el;
|
|
9233
|
-
} }, hAsync("sd-date-picker-trigger", { key: '
|
|
9456
|
+
} }, hAsync("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
|
|
9234
9457
|
}
|
|
9235
9458
|
static get watchers() { return {
|
|
9236
9459
|
"isOpen": [{
|
|
@@ -9283,15 +9506,20 @@ class SdDateRangePickerCalendar {
|
|
|
9283
9506
|
this.select = createEvent(this, "sdSelect", 7);
|
|
9284
9507
|
this.viewChange = createEvent(this, "sdViewChange", 7);
|
|
9285
9508
|
}
|
|
9509
|
+
/** 선택된 날짜 범위 [시작일, 종료일] */
|
|
9286
9510
|
value = null;
|
|
9511
|
+
/** 선택 가능한 날짜 범위 제한 */
|
|
9287
9512
|
selectable;
|
|
9513
|
+
/** 최대 선택 가능 일 수 */
|
|
9288
9514
|
maxRange;
|
|
9289
9515
|
currentYear;
|
|
9290
9516
|
currentMonth;
|
|
9291
9517
|
pendingStart = '';
|
|
9292
9518
|
hoverDate = '';
|
|
9293
9519
|
displayValue = null;
|
|
9520
|
+
/** 날짜 범위 선택 시 발생합니다. */
|
|
9294
9521
|
select;
|
|
9522
|
+
/** 달력 뷰가 변경될 때 발생합니다. */
|
|
9295
9523
|
viewChange;
|
|
9296
9524
|
dateUtil = useDatePicker();
|
|
9297
9525
|
componentWillLoad() {
|
|
@@ -9519,7 +9747,7 @@ class SdDateRangePickerCalendar {
|
|
|
9519
9747
|
'--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
|
|
9520
9748
|
'--range-divider': RANGE_LAYOUT.divider,
|
|
9521
9749
|
};
|
|
9522
|
-
return (hAsync(Fragment, { key: '
|
|
9750
|
+
return (hAsync(Fragment, { key: '351cf65dcf32acba409f32c5bfa0681989093f32' }, hAsync("div", { key: '99f29a4e401d2ebaea0ebb55c2a4e55d55f23a7f', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '251fe254a39d7093633be176c413608abd3c47c1', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'fb69fea401d17f3862b4a21162747161246c42e2', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
|
|
9523
9751
|
}
|
|
9524
9752
|
static get watchers() { return {
|
|
9525
9753
|
"value": [{
|
|
@@ -9740,10 +9968,15 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9740
9968
|
this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
|
|
9741
9969
|
}
|
|
9742
9970
|
get el() { return getElement(this); }
|
|
9971
|
+
/** 버튼 프리셋 이름 (크기와 색상 조합) */
|
|
9743
9972
|
name = 'primary_sm';
|
|
9973
|
+
/** 버튼 레이블 */
|
|
9744
9974
|
label = '';
|
|
9975
|
+
/** 드롭다운 메뉴 아이템 목록 */
|
|
9745
9976
|
items = [];
|
|
9977
|
+
/** 비활성 상태 여부 */
|
|
9746
9978
|
disabled = false;
|
|
9979
|
+
/** 레이블 버튼과 드롭다운 토글을 분리하는 split 모드 여부 */
|
|
9747
9980
|
split = false;
|
|
9748
9981
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
9749
9982
|
isOpen = false;
|
|
@@ -9753,8 +9986,11 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9753
9986
|
splitContainerRef;
|
|
9754
9987
|
menuRef;
|
|
9755
9988
|
closeAnimationTimer;
|
|
9989
|
+
/** 메뉴 아이템 선택 시 해당 아이템의 value를 전달합니다. */
|
|
9756
9990
|
click;
|
|
9991
|
+
/** split 모드에서 레이블 버튼 클릭 시 발생합니다. */
|
|
9757
9992
|
buttonClick;
|
|
9993
|
+
/** 드롭다운 열림/닫힘 상태 변경 시 발생합니다. */
|
|
9758
9994
|
dropDownShow;
|
|
9759
9995
|
handleOpenChange(isOpen) {
|
|
9760
9996
|
this.onDropdownToggle(isOpen);
|
|
@@ -9771,11 +10007,13 @@ class SdDropdownButton extends BaseDropdownEvent {
|
|
|
9771
10007
|
if (this.closeAnimationTimer)
|
|
9772
10008
|
clearTimeout(this.closeAnimationTimer);
|
|
9773
10009
|
}
|
|
10010
|
+
/** 드롭다운 메뉴를 엽니다. */
|
|
9774
10011
|
async sdOpen() {
|
|
9775
10012
|
if (this.disabled || this.items.length === 0)
|
|
9776
10013
|
return;
|
|
9777
10014
|
this.isOpen = true;
|
|
9778
10015
|
}
|
|
10016
|
+
/** 드롭다운 메뉴를 닫습니다. */
|
|
9779
10017
|
async sdClose() {
|
|
9780
10018
|
this.closeDropdown();
|
|
9781
10019
|
}
|
|
@@ -10036,25 +10274,44 @@ class SdField {
|
|
|
10036
10274
|
registerInstance(this, hostRef);
|
|
10037
10275
|
}
|
|
10038
10276
|
get el() { return getElement(this); }
|
|
10277
|
+
/** 폼 연동용 name 속성 */
|
|
10039
10278
|
name = '';
|
|
10279
|
+
/** 유효성 검사 규칙 목록 */
|
|
10040
10280
|
rules = [];
|
|
10281
|
+
/** 에러 상태 여부 */
|
|
10041
10282
|
error = false;
|
|
10283
|
+
/** 비활성 상태 여부 */
|
|
10042
10284
|
disabled = false;
|
|
10285
|
+
/** 읽기 전용 여부 */
|
|
10043
10286
|
readonly = false;
|
|
10287
|
+
/** 호버 상태 여부 */
|
|
10044
10288
|
hovered = false;
|
|
10289
|
+
/** 포커스 상태 여부 */
|
|
10045
10290
|
focused = false;
|
|
10291
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10046
10292
|
status;
|
|
10293
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10047
10294
|
hint = '';
|
|
10295
|
+
/** 에러 메시지 */
|
|
10048
10296
|
errorMessage = '';
|
|
10297
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10049
10298
|
width = '';
|
|
10299
|
+
/** 필드 크기 */
|
|
10050
10300
|
size = 'sm';
|
|
10051
10301
|
// props - label
|
|
10302
|
+
/** 레이블 텍스트 */
|
|
10052
10303
|
label = '';
|
|
10304
|
+
/** 레이블 너비 */
|
|
10053
10305
|
labelWidth = '';
|
|
10306
|
+
/** 필드 우측 어드온 레이블 */
|
|
10054
10307
|
addonLabel = '';
|
|
10308
|
+
/** 어드온 정렬 방향 */
|
|
10055
10309
|
addonAlign = 'start';
|
|
10310
|
+
/** 레이블 영역 아이콘 */
|
|
10056
10311
|
icon = undefined;
|
|
10312
|
+
/** 레이블 툴팁 텍스트 */
|
|
10057
10313
|
labelTooltip = '';
|
|
10314
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10058
10315
|
labelTooltipProps = null;
|
|
10059
10316
|
errorMsg = '';
|
|
10060
10317
|
hostElement = null;
|
|
@@ -10119,6 +10376,7 @@ class SdField {
|
|
|
10119
10376
|
form.sdUnregisterField(this);
|
|
10120
10377
|
});
|
|
10121
10378
|
}
|
|
10379
|
+
/** 유효성 검사를 실행합니다. */
|
|
10122
10380
|
async sdValidate() {
|
|
10123
10381
|
if (!this.rules || this.rules.length === 0)
|
|
10124
10382
|
return true;
|
|
@@ -10132,15 +10390,18 @@ class SdField {
|
|
|
10132
10390
|
this.setError(false, '');
|
|
10133
10391
|
return true;
|
|
10134
10392
|
}
|
|
10393
|
+
/** 필드 값과 유효성 상태를 초기화합니다. */
|
|
10135
10394
|
async sdReset() {
|
|
10136
10395
|
if (this.hostElement) {
|
|
10137
10396
|
this.hostElement.value = null;
|
|
10138
10397
|
}
|
|
10139
10398
|
this.setError(false, '');
|
|
10140
10399
|
}
|
|
10400
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10141
10401
|
async sdResetValidation() {
|
|
10142
10402
|
this.setError(false, '');
|
|
10143
10403
|
}
|
|
10404
|
+
/** 필드에 포커스를 이동하고 스크롤합니다. */
|
|
10144
10405
|
async sdFocus() {
|
|
10145
10406
|
this.hostElement?.focus?.();
|
|
10146
10407
|
this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
@@ -10204,21 +10465,21 @@ class SdField {
|
|
|
10204
10465
|
: {}),
|
|
10205
10466
|
}
|
|
10206
10467
|
: {};
|
|
10207
|
-
return (hAsync("div", { key: '
|
|
10468
|
+
return (hAsync("div", { key: 'baf943d77385c9c02e2fe1d938f9622bd858129c', class: {
|
|
10208
10469
|
'sd-field': true,
|
|
10209
10470
|
'sd-field--has-label': this.label !== '',
|
|
10210
10471
|
'sd-field--has-addon': addon !== '',
|
|
10211
10472
|
[this.fieldStatus]: this.fieldStatus !== '',
|
|
10212
|
-
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '
|
|
10473
|
+
}, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'f5f204929ef4a4e1a260d7609bc00d9a1fe998f4', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'eff02956e5aae08691b2850bb0d1978865a446f9', class: "sd-field__main", style: this.width !== '' && this.width !== 0
|
|
10213
10474
|
? {
|
|
10214
10475
|
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
10215
10476
|
flex: 'none',
|
|
10216
10477
|
}
|
|
10217
|
-
: {} }, hAsync("div", { key: '
|
|
10478
|
+
: {} }, hAsync("div", { key: 'bf00b81dbb3d36a8a8ddf4919c9ec3383a1f3f14', class: {
|
|
10218
10479
|
'sd-field__control': true,
|
|
10219
10480
|
'sd-field__control--has-addon': addon !== '',
|
|
10220
|
-
} }, addon && (hAsync("div", { key: '
|
|
10221
|
-
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '
|
|
10481
|
+
} }, addon && (hAsync("div", { key: '4cef1308de0b709d5924ff7a02ee5bd3b78c1502', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '7fdfca555d80f5409082c43967224fd8108a6f29', name: this.icon.name, size: this.icon.size ??
|
|
10482
|
+
Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: 'c523813390db6f6f4acce3ffb8377820ffb95fad' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
|
|
10222
10483
|
}
|
|
10223
10484
|
renderLabel(label) {
|
|
10224
10485
|
if (label == null || label === '')
|
|
@@ -10314,38 +10575,65 @@ class SdFilePicker {
|
|
|
10314
10575
|
this.reject = createEvent(this, "sdReject", 7);
|
|
10315
10576
|
}
|
|
10316
10577
|
get el() { return getElement(this); }
|
|
10578
|
+
/** 선택된 파일 값 */
|
|
10317
10579
|
value = null;
|
|
10580
|
+
/** 파일 미선택 시 표시할 placeholder */
|
|
10318
10581
|
placeholder = 'Click to upload';
|
|
10582
|
+
/** 비활성 상태 여부 */
|
|
10319
10583
|
disabled = false;
|
|
10584
|
+
/** sd-field 없이 인라인으로 표시하는 모드 여부 */
|
|
10320
10585
|
inline = false;
|
|
10586
|
+
/** 다중 파일 선택 여부 */
|
|
10321
10587
|
multiple = false;
|
|
10588
|
+
/** 허용할 파일 타입 (input accept 속성과 동일) */
|
|
10322
10589
|
accept;
|
|
10590
|
+
/** 파일 한 개의 최대 크기 (bytes) */
|
|
10323
10591
|
maxFileSize;
|
|
10592
|
+
/** 전체 파일의 최대 용량 합계 (bytes) */
|
|
10324
10593
|
maxTotalSize;
|
|
10594
|
+
/** 최대 파일 개수 */
|
|
10325
10595
|
maxFiles;
|
|
10326
10596
|
// sd-field 패스스루 props
|
|
10597
|
+
/** 폼 연동용 name 속성 */
|
|
10327
10598
|
name = nanoid$1();
|
|
10599
|
+
/** 레이블 텍스트 */
|
|
10328
10600
|
label = '';
|
|
10601
|
+
/** 레이블 너비 */
|
|
10329
10602
|
labelWidth = '';
|
|
10603
|
+
/** 필드 우측 어드온 레이블 */
|
|
10330
10604
|
addonLabel = '';
|
|
10605
|
+
/** 어드온 정렬 방향 */
|
|
10331
10606
|
addonAlign = 'start';
|
|
10607
|
+
/** 필드 하단 힌트 텍스트 */
|
|
10332
10608
|
hint = '';
|
|
10609
|
+
/** 에러 메시지 */
|
|
10333
10610
|
errorMessage = '';
|
|
10611
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
10334
10612
|
width = '';
|
|
10613
|
+
/** 유효성 검사 규칙 목록 */
|
|
10335
10614
|
rules;
|
|
10615
|
+
/** 에러 상태 여부 */
|
|
10336
10616
|
error = false;
|
|
10617
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
10337
10618
|
status;
|
|
10619
|
+
/** 레이블 영역 아이콘 */
|
|
10338
10620
|
icon = undefined;
|
|
10621
|
+
/** 레이블 툴팁 텍스트 */
|
|
10339
10622
|
labelTooltip = '';
|
|
10623
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
10340
10624
|
labelTooltipProps = null;
|
|
10625
|
+
/** 포커스 상태 여부 */
|
|
10341
10626
|
focused = false;
|
|
10627
|
+
/** 호버 상태 여부 */
|
|
10342
10628
|
hovered = false;
|
|
10343
10629
|
internalValue = null;
|
|
10344
10630
|
showTooltip = false;
|
|
10345
10631
|
fileInputRef;
|
|
10346
10632
|
fileNamesRef;
|
|
10347
10633
|
formField;
|
|
10634
|
+
/** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
|
|
10348
10635
|
update;
|
|
10636
|
+
/** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
|
|
10349
10637
|
reject;
|
|
10350
10638
|
valueChanged(newValue) {
|
|
10351
10639
|
this.internalValue = newValue;
|
|
@@ -10356,9 +10644,11 @@ class SdFilePicker {
|
|
|
10356
10644
|
componentDidUpdate() {
|
|
10357
10645
|
this.checkOverflow();
|
|
10358
10646
|
}
|
|
10647
|
+
/** 유효성 검사를 실행합니다. */
|
|
10359
10648
|
async sdValidate() {
|
|
10360
10649
|
return this.formField?.sdValidate() ?? Promise.resolve(true);
|
|
10361
10650
|
}
|
|
10651
|
+
/** 파일 값과 유효성 상태를 초기화합니다. */
|
|
10362
10652
|
async sdReset() {
|
|
10363
10653
|
const clearedValue = this.multiple ? [] : null;
|
|
10364
10654
|
this.value = clearedValue;
|
|
@@ -10368,6 +10658,7 @@ class SdFilePicker {
|
|
|
10368
10658
|
}
|
|
10369
10659
|
await this.formField?.sdResetValidation();
|
|
10370
10660
|
}
|
|
10661
|
+
/** 유효성 상태만 초기화합니다. */
|
|
10371
10662
|
async sdResetValidate() {
|
|
10372
10663
|
await this.formField?.sdResetValidation();
|
|
10373
10664
|
}
|
|
@@ -10580,12 +10871,19 @@ class SdFloatingPopover {
|
|
|
10580
10871
|
this.close = createEvent(this, "sdClose", 7);
|
|
10581
10872
|
}
|
|
10582
10873
|
get el() { return getElement(this); }
|
|
10874
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
10583
10875
|
to = 'body';
|
|
10876
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
10584
10877
|
parentRef = null;
|
|
10878
|
+
/** [x, y] 오프셋 (px) */
|
|
10585
10879
|
offset = [0, 0];
|
|
10586
|
-
|
|
10880
|
+
/** z-index */
|
|
10881
|
+
zIndex = 996;
|
|
10882
|
+
/** 콘텐츠를 표시할 방향 */
|
|
10587
10883
|
placement = 'bottom';
|
|
10884
|
+
/** 표시 여부 */
|
|
10588
10885
|
open = false;
|
|
10886
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
10589
10887
|
close;
|
|
10590
10888
|
container;
|
|
10591
10889
|
wrapper;
|
|
@@ -10640,11 +10938,25 @@ class SdFloatingPopover {
|
|
|
10640
10938
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
10641
10939
|
return el instanceof HTMLElement ? el : document.body;
|
|
10642
10940
|
}
|
|
10941
|
+
/**
|
|
10942
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
10943
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
10944
|
+
*/
|
|
10945
|
+
resolveZIndex() {
|
|
10946
|
+
const base = this.zIndex ?? 996;
|
|
10947
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
10948
|
+
if (!layer)
|
|
10949
|
+
return base;
|
|
10950
|
+
const container = layer.closest('.sd-modal-container');
|
|
10951
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
10952
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
10953
|
+
return Math.max(base, modalZIndex + 1);
|
|
10954
|
+
}
|
|
10643
10955
|
createWrapper() {
|
|
10644
10956
|
this.wrapper = document.createElement('div');
|
|
10645
10957
|
Object.assign(this.wrapper.style, {
|
|
10646
10958
|
position: 'fixed',
|
|
10647
|
-
zIndex:
|
|
10959
|
+
zIndex: this.resolveZIndex().toString(),
|
|
10648
10960
|
transition: 'opacity 0.4s',
|
|
10649
10961
|
top: '-9999px',
|
|
10650
10962
|
left: '-9999px',
|
|
@@ -10731,7 +11043,7 @@ class SdFloatingPopover {
|
|
|
10731
11043
|
}
|
|
10732
11044
|
}
|
|
10733
11045
|
render() {
|
|
10734
|
-
return hAsync("slot", { key: '
|
|
11046
|
+
return hAsync("slot", { key: 'ee2a502ac1c924abb9be9fae19b4450659515c15' });
|
|
10735
11047
|
}
|
|
10736
11048
|
static get style() { return sdFloatingPortalCss(); }
|
|
10737
11049
|
static get cmpMeta() { return {
|
|
@@ -10757,9 +11069,12 @@ class SdForm {
|
|
|
10757
11069
|
this.sdSubmit = createEvent(this, "sdSubmit", 7);
|
|
10758
11070
|
this.sdValidationError = createEvent(this, "sdValidationError", 7);
|
|
10759
11071
|
}
|
|
11072
|
+
/** form 엘리먼트에 추가할 클래스 */
|
|
10760
11073
|
formClass = '';
|
|
10761
11074
|
fields = [];
|
|
11075
|
+
/** 유효성 검사 통과 후 submit 시 발생합니다. */
|
|
10762
11076
|
sdSubmit;
|
|
11077
|
+
/** 유효성 검사 실패 시 실패한 필드 name 목록을 전달합니다. */
|
|
10763
11078
|
sdValidationError;
|
|
10764
11079
|
sortFieldsByDomOrder() {
|
|
10765
11080
|
this.fields.sort((a, b) => {
|
|
@@ -10777,6 +11092,7 @@ class SdForm {
|
|
|
10777
11092
|
return 0;
|
|
10778
11093
|
});
|
|
10779
11094
|
}
|
|
11095
|
+
/** 폼에 필드를 등록합니다. */
|
|
10780
11096
|
async sdRegisterField(field) {
|
|
10781
11097
|
if (field.name === '') {
|
|
10782
11098
|
console.warn('[sd-form] field.name is required');
|
|
@@ -10787,6 +11103,7 @@ class SdForm {
|
|
|
10787
11103
|
this.fields.push(field);
|
|
10788
11104
|
this.sortFieldsByDomOrder();
|
|
10789
11105
|
}
|
|
11106
|
+
/** 폼에서 필드를 제거합니다. */
|
|
10790
11107
|
async sdUnregisterField(fieldOrName) {
|
|
10791
11108
|
if (typeof fieldOrName === 'string') {
|
|
10792
11109
|
const index = this.fields.findIndex(field => field.name === fieldOrName);
|
|
@@ -10807,13 +11124,16 @@ class SdForm {
|
|
|
10807
11124
|
}
|
|
10808
11125
|
return { valid: invalidFields.length === 0, invalidFields };
|
|
10809
11126
|
}
|
|
11127
|
+
/** 모든 등록된 필드의 유효성 검사를 실행합니다. */
|
|
10810
11128
|
async sdValidate() {
|
|
10811
11129
|
const { valid } = await this.runValidation();
|
|
10812
11130
|
return valid;
|
|
10813
11131
|
}
|
|
11132
|
+
/** 모든 필드의 값과 유효성 상태를 초기화합니다. */
|
|
10814
11133
|
async sdReset() {
|
|
10815
11134
|
this.fields.forEach(f => f.sdReset());
|
|
10816
11135
|
}
|
|
11136
|
+
/** 모든 필드의 유효성 상태만 초기화합니다. */
|
|
10817
11137
|
async sdResetValidation() {
|
|
10818
11138
|
this.fields.forEach(f => f.sdResetValidation());
|
|
10819
11139
|
}
|
|
@@ -10827,7 +11147,7 @@ class SdForm {
|
|
|
10827
11147
|
this.sdSubmit.emit();
|
|
10828
11148
|
}
|
|
10829
11149
|
render() {
|
|
10830
|
-
return (hAsync("form", { key: '
|
|
11150
|
+
return (hAsync("form", { key: 'f533f9dcf3a13e66d37644baa5217b90a67350a2', onSubmit: e => this.onSubmit(e), class: this.formClass }, hAsync("slot", { key: '8a108703faeb2ed7d1e47a72b407b7a7fc88063d' })));
|
|
10831
11151
|
}
|
|
10832
11152
|
static get cmpMeta() { return {
|
|
10833
11153
|
"$flags$": 772,
|
|
@@ -10965,14 +11285,21 @@ class SdGhostButton {
|
|
|
10965
11285
|
registerInstance(this, hostRef);
|
|
10966
11286
|
this.click = createEvent(this, "sdClick", 7);
|
|
10967
11287
|
}
|
|
11288
|
+
/** 버튼에 표시할 아이콘명 */
|
|
10968
11289
|
icon;
|
|
11290
|
+
/** 버튼 크기 */
|
|
10969
11291
|
size = 'sm';
|
|
11292
|
+
/** 버튼 색상 의도 */
|
|
10970
11293
|
intent = 'default';
|
|
11294
|
+
/** 스크린리더용 접근성 레이블 */
|
|
10971
11295
|
ariaLabel = '';
|
|
11296
|
+
/** 호버 시 표시할 툴팁 텍스트 */
|
|
10972
11297
|
tooltipText;
|
|
11298
|
+
/** 비활성 상태 여부 */
|
|
10973
11299
|
disabled = false;
|
|
10974
11300
|
get hostEl() { return getElement(this); }
|
|
10975
11301
|
isTooltipOpen = false;
|
|
11302
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
10976
11303
|
click;
|
|
10977
11304
|
hasWarnedMissingAriaLabel = false;
|
|
10978
11305
|
componentWillLoad() {
|
|
@@ -10987,10 +11314,18 @@ class SdGhostButton {
|
|
|
10987
11314
|
}
|
|
10988
11315
|
this.click.emit(event);
|
|
10989
11316
|
};
|
|
10990
|
-
handleMouseEnter = () => {
|
|
10991
|
-
|
|
10992
|
-
|
|
10993
|
-
|
|
11317
|
+
handleMouseEnter = () => {
|
|
11318
|
+
this.isTooltipOpen = true;
|
|
11319
|
+
};
|
|
11320
|
+
handleMouseLeave = () => {
|
|
11321
|
+
this.isTooltipOpen = false;
|
|
11322
|
+
};
|
|
11323
|
+
handleFocus = () => {
|
|
11324
|
+
this.isTooltipOpen = true;
|
|
11325
|
+
};
|
|
11326
|
+
handleBlur = () => {
|
|
11327
|
+
this.isTooltipOpen = false;
|
|
11328
|
+
};
|
|
10994
11329
|
componentWillRender() {
|
|
10995
11330
|
this.warnIfMissingAriaLabel();
|
|
10996
11331
|
}
|
|
@@ -11015,7 +11350,7 @@ class SdGhostButton {
|
|
|
11015
11350
|
const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
|
|
11016
11351
|
const tooltipText = (this.tooltipText ?? '').trim();
|
|
11017
11352
|
const hasTooltip = tooltipText.length > 0;
|
|
11018
|
-
return (hAsync("button", { key: '
|
|
11353
|
+
return (hAsync("button", { key: 'a49c5b93f4dfcd434c20225acae4c7454e8f8e4f', class: {
|
|
11019
11354
|
'sd-ghost-button': true,
|
|
11020
11355
|
'sd-ghost-button--disabled': this.disabled,
|
|
11021
11356
|
}, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
|
|
@@ -11024,7 +11359,7 @@ class SdGhostButton {
|
|
|
11024
11359
|
'--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
|
|
11025
11360
|
'--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
|
|
11026
11361
|
'--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
|
|
11027
|
-
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '
|
|
11362
|
+
}, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (hAsync("sd-portal", { key: '36ef78d79a99da1fd26c282ef68293b9fb9f87b1', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, hAsync("div", { key: 'a0cf8b4e84a79841ab09e6a81ee6bcbfe57e6805', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: 'a263167142b891add0a32900504f541dcb3a4959', name: "square_xs_grey", label: tooltipText })))), hAsync("sd-icon", { key: 'ba90e9b489b4f43577313052635db598e3d30037', name: this.icon, size: sizeConfig.icon, color: contentColor })));
|
|
11028
11363
|
}
|
|
11029
11364
|
static get style() { return sdGhostButtonCss(); }
|
|
11030
11365
|
static get cmpMeta() { return {
|
|
@@ -11163,11 +11498,17 @@ class SdGuide {
|
|
|
11163
11498
|
registerInstance(this, hostRef);
|
|
11164
11499
|
}
|
|
11165
11500
|
get el() { return getElement(this); }
|
|
11501
|
+
/** 가이드 타입 (tip: 팝업, notion: 외부 링크) */
|
|
11166
11502
|
type = 'tip';
|
|
11503
|
+
/** 버튼에 표시할 레이블 (없으면 type에 따른 기본값 사용) */
|
|
11167
11504
|
label = '';
|
|
11505
|
+
/** 팝업에 표시할 메시지 (배열이면 리스트로 렌더링) */
|
|
11168
11506
|
message = '';
|
|
11507
|
+
/** notion 타입일 때 클릭 시 이동할 URL */
|
|
11169
11508
|
url = '';
|
|
11509
|
+
/** 팝업 제목 (없으면 type에 따른 기본값 사용) */
|
|
11170
11510
|
popupTitle = '';
|
|
11511
|
+
/** 팝업 너비 (px, 없으면 426px) */
|
|
11171
11512
|
popupWidth;
|
|
11172
11513
|
popupShow = false;
|
|
11173
11514
|
guideRef;
|
|
@@ -11229,10 +11570,10 @@ class SdGuide {
|
|
|
11229
11570
|
const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
|
|
11230
11571
|
if (isActive)
|
|
11231
11572
|
buttonClasses.push('sd-guide__button--active');
|
|
11232
|
-
return (hAsync("div", { key: '
|
|
11573
|
+
return (hAsync("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
|
|
11233
11574
|
...this.guideStyle,
|
|
11234
11575
|
width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
|
|
11235
|
-
} }, hAsync("sd-ghost-button", { key: '
|
|
11576
|
+
} }, hAsync("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
|
|
11236
11577
|
}
|
|
11237
11578
|
// 현재 2depth까지만 스타일 적용
|
|
11238
11579
|
renderListItem(message, depth = 0) {
|
|
@@ -11551,6 +11892,7 @@ class SdIcon {
|
|
|
11551
11892
|
rotate;
|
|
11552
11893
|
/** 접근성을 위한 라벨 */
|
|
11553
11894
|
label;
|
|
11895
|
+
/** 아이콘 i 엘리먼트에 적용할 인라인 스타일 */
|
|
11554
11896
|
iconStyle = {};
|
|
11555
11897
|
getIconClasses() {
|
|
11556
11898
|
const classes = ['sd-icon'];
|
|
@@ -11624,46 +11966,81 @@ class SdInput {
|
|
|
11624
11966
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
11625
11967
|
}
|
|
11626
11968
|
get host() { return getElement(this); }
|
|
11969
|
+
/** 입력 값 */
|
|
11627
11970
|
value = null;
|
|
11971
|
+
/** 입력 타입 */
|
|
11628
11972
|
type = 'text';
|
|
11973
|
+
/** 입력 크기 */
|
|
11629
11974
|
size = 'sm';
|
|
11975
|
+
/** 필드 우측 어드온 레이블 */
|
|
11630
11976
|
addonLabel = '';
|
|
11977
|
+
/** 어드온 정렬 방향 */
|
|
11631
11978
|
addonAlign = 'start';
|
|
11979
|
+
/** 플레이스홀더 텍스트 */
|
|
11632
11980
|
placeholder = '입력해 주세요.';
|
|
11981
|
+
/** 비활성 상태 여부 */
|
|
11633
11982
|
disabled = false;
|
|
11983
|
+
/** 값이 있을 때 지우기 버튼 표시 여부 */
|
|
11634
11984
|
clearable = false;
|
|
11985
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
11635
11986
|
width = '';
|
|
11987
|
+
/** 유효성 검사 규칙 목록 */
|
|
11636
11988
|
rules = [];
|
|
11989
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
11637
11990
|
autoFocus = false;
|
|
11991
|
+
/** autocomplete 속성 값 */
|
|
11638
11992
|
autocomplete = '';
|
|
11993
|
+
/** 최대 입력 글자 수 */
|
|
11639
11994
|
maxlength;
|
|
11995
|
+
/** 최소 입력 글자 수 */
|
|
11640
11996
|
minlength;
|
|
11997
|
+
/** 모바일 키보드 타입 */
|
|
11641
11998
|
inputmode;
|
|
11999
|
+
/** 모바일 Enter 키 힌트 */
|
|
11642
12000
|
enterkeyhint;
|
|
12001
|
+
/** 맞춤법 검사 여부 */
|
|
11643
12002
|
spellcheck = false;
|
|
12003
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
11644
12004
|
status;
|
|
12005
|
+
/** 필드 하단 힌트 텍스트 */
|
|
11645
12006
|
hint = '';
|
|
12007
|
+
/** 에러 메시지 */
|
|
11646
12008
|
errorMessage = '';
|
|
12009
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
11647
12010
|
inputClass = '';
|
|
12011
|
+
/** 읽기 전용 여부 */
|
|
11648
12012
|
readonly = false;
|
|
12013
|
+
/** 에러 상태 여부 */
|
|
11649
12014
|
error = false;
|
|
12015
|
+
/** 포커스 상태 여부 */
|
|
11650
12016
|
focused = false;
|
|
12017
|
+
/** 호버 상태 여부 */
|
|
11651
12018
|
hovered = false;
|
|
11652
12019
|
// props - label
|
|
12020
|
+
/** 레이블 텍스트 */
|
|
11653
12021
|
label = '';
|
|
12022
|
+
/** 레이블 너비 */
|
|
11654
12023
|
labelWidth = '';
|
|
12024
|
+
/** 레이블 영역 아이콘 */
|
|
11655
12025
|
icon = undefined;
|
|
12026
|
+
/** 레이블 툴팁 텍스트 */
|
|
11656
12027
|
labelTooltip = '';
|
|
12028
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
11657
12029
|
labelTooltipProps = null;
|
|
11658
12030
|
// props - custom styles
|
|
12031
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
11659
12032
|
inputStyle = {};
|
|
11660
12033
|
internalValue = null;
|
|
11661
12034
|
passwordVisible = false;
|
|
11662
12035
|
nativeEl = undefined;
|
|
11663
12036
|
formField;
|
|
12037
|
+
/** 폼 연동용 name 속성 */
|
|
11664
12038
|
name = nanoid$1();
|
|
12039
|
+
/** 값이 변경될 때 발생합니다. */
|
|
11665
12040
|
input;
|
|
12041
|
+
/** 포커스될 때 발생합니다. */
|
|
11666
12042
|
focus;
|
|
12043
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
11667
12044
|
blur;
|
|
11668
12045
|
valueChanged(newValue) {
|
|
11669
12046
|
this.internalValue = newValue;
|
|
@@ -11674,18 +12051,23 @@ class SdInput {
|
|
|
11674
12051
|
this.input?.emit(this.value);
|
|
11675
12052
|
}
|
|
11676
12053
|
}
|
|
12054
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
11677
12055
|
async sdGetNativeElement() {
|
|
11678
12056
|
return this.nativeEl || null;
|
|
11679
12057
|
}
|
|
12058
|
+
/** 유효성 검사를 실행합니다. */
|
|
11680
12059
|
async sdValidate() {
|
|
11681
12060
|
this.formField?.sdValidate();
|
|
11682
12061
|
}
|
|
12062
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
11683
12063
|
async sdReset() {
|
|
11684
12064
|
this.formField?.sdReset();
|
|
11685
12065
|
}
|
|
12066
|
+
/** 유효성 상태만 초기화합니다. */
|
|
11686
12067
|
async sdResetValidate() {
|
|
11687
12068
|
this.formField?.sdResetValidation();
|
|
11688
12069
|
}
|
|
12070
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
11689
12071
|
async sdFocus() {
|
|
11690
12072
|
this.formField?.sdFocus();
|
|
11691
12073
|
}
|
|
@@ -11733,12 +12115,12 @@ class SdInput {
|
|
|
11733
12115
|
'--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
|
|
11734
12116
|
'--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
|
|
11735
12117
|
};
|
|
11736
|
-
return (hAsync("sd-field", { key: '
|
|
12118
|
+
return (hAsync("sd-field", { key: '7444ee5ebb482fe9c4f837114456cab90de6b3aa', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '0dbb6bc35522fb2d0c6d6d147756954ed96d2467', class: "sd-input__content" }, hAsync("slot", { key: 'd5e8488bc3e29bd671bb337051d7b768c3c37c4b', name: "prefix" }), hAsync("input", { key: '9dff73dbc5af19b0e2f19e95a26ad32211761484', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'f1020b3ab68d5db6f83a2d6ba84722faa76c354e', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '547a309bb4434e558cf8b33fe8bcd51533d36cd5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
|
|
11737
12119
|
if (this.disabled || this.readonly)
|
|
11738
12120
|
return;
|
|
11739
12121
|
this.internalValue = '';
|
|
11740
12122
|
await this.formField?.sdValidate();
|
|
11741
|
-
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '
|
|
12123
|
+
} })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '39c77e164b08d4a0169f76c1b8dc519e0f39d993', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
|
|
11742
12124
|
if (this.disabled || this.readonly)
|
|
11743
12125
|
return;
|
|
11744
12126
|
this.passwordVisible = !this.passwordVisible;
|
|
@@ -11931,7 +12313,9 @@ class SdKeyValueTable {
|
|
|
11931
12313
|
* - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
|
|
11932
12314
|
*/
|
|
11933
12315
|
radius = 'default';
|
|
12316
|
+
/** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
|
|
11934
12317
|
change;
|
|
12318
|
+
/** search 패널의 검색 버튼 클릭 시 발생합니다. */
|
|
11935
12319
|
searchEvent;
|
|
11936
12320
|
emit = (name, value) => {
|
|
11937
12321
|
this.change.emit({ name, value });
|
|
@@ -12167,9 +12551,13 @@ class SdLinearProgress {
|
|
|
12167
12551
|
constructor(hostRef) {
|
|
12168
12552
|
registerInstance(this, hostRef);
|
|
12169
12553
|
}
|
|
12554
|
+
/** true이면 진행률 없이 무한 애니메이션 표시 */
|
|
12170
12555
|
indeterminate = false;
|
|
12556
|
+
/** 진행률 (0–100) */
|
|
12171
12557
|
value = 0;
|
|
12558
|
+
/** 색상 타입 */
|
|
12172
12559
|
type = 'primary';
|
|
12560
|
+
/** 하단에 표시할 레이블 텍스트 */
|
|
12173
12561
|
label;
|
|
12174
12562
|
get clampedValue() {
|
|
12175
12563
|
if (!Number.isFinite(this.value))
|
|
@@ -12177,8 +12565,7 @@ class SdLinearProgress {
|
|
|
12177
12565
|
return Math.max(0, Math.min(100, this.value));
|
|
12178
12566
|
}
|
|
12179
12567
|
render() {
|
|
12180
|
-
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ??
|
|
12181
|
-
LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12568
|
+
const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ?? LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
|
|
12182
12569
|
const valueColor = this.clampedValue === 0 ? LINEAR_PROGRESS_COLORS.valueZero : fillColor;
|
|
12183
12570
|
const hostStyle = {
|
|
12184
12571
|
'--sd-linear-progress-track-color': LINEAR_PROGRESS_COLORS.track,
|
|
@@ -12194,7 +12581,7 @@ class SdLinearProgress {
|
|
|
12194
12581
|
clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
|
|
12195
12582
|
};
|
|
12196
12583
|
const valueText = `${Math.round(this.clampedValue)}%`;
|
|
12197
|
-
return (hAsync(Host, { key: '
|
|
12584
|
+
return (hAsync(Host, { key: '232520f9e720d13e28bbac8f61864e943f03c12e', style: hostStyle }, hAsync("div", { key: '6c5659e65da3f6d01c1029d9441f8619c304935c', class: "sd-linear-progress__track" }, hAsync("div", { key: '81f1c5ca5e4422e33f5505eda07fd4a04b24465c', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'd3542eddf302448742a3564c6f48d4d3f71d3733', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: 'f9c650167b1d9653a6745399226e480f15c19f65', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'fa8759f871902a4c3ebf0d982fe9b63d956a2f24', class: "sd-linear-progress__label" }, this.label)));
|
|
12198
12585
|
}
|
|
12199
12586
|
static get style() { return sdLinearProgressCss(); }
|
|
12200
12587
|
static get cmpMeta() { return {
|
|
@@ -12220,18 +12607,20 @@ class SdLoadingContainer {
|
|
|
12220
12607
|
}
|
|
12221
12608
|
visible = false;
|
|
12222
12609
|
message = '';
|
|
12610
|
+
/** 로딩 오버레이를 표시합니다. */
|
|
12223
12611
|
async show(options = {}) {
|
|
12224
12612
|
this.message = options.message ?? '';
|
|
12225
12613
|
this.visible = true;
|
|
12226
12614
|
}
|
|
12615
|
+
/** 로딩 오버레이를 숨깁니다. */
|
|
12227
12616
|
async hide() {
|
|
12228
12617
|
this.visible = false;
|
|
12229
12618
|
}
|
|
12230
12619
|
render() {
|
|
12231
|
-
return (hAsync("div", { key: '
|
|
12620
|
+
return (hAsync("div", { key: 'b8efbc6422fded2472a6e575c9a7102375f90600', class: {
|
|
12232
12621
|
'sd-loading-container': true,
|
|
12233
12622
|
'sd-loading-container--visible': this.visible,
|
|
12234
|
-
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '
|
|
12623
|
+
}, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '1ff327157be008e278636d49069945e553c1ecbd', class: "sd-loading-container__backdrop" }), hAsync("div", { key: 'd55d2ab11528e35c04e8dd98f8c10d0f913a536e', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '29060ee18eb4e5a47bae25462abe11b8d5abfb0c', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'cf0478da282996ba4f7ecb920d8262181369af8a', class: "sd-loading-container__message" }, this.message))));
|
|
12235
12624
|
}
|
|
12236
12625
|
static get style() { return sdLoadingContainerCss(); }
|
|
12237
12626
|
static get cmpMeta() { return {
|
|
@@ -12283,13 +12672,21 @@ class SdLoadingModal {
|
|
|
12283
12672
|
registerInstance(this, hostRef);
|
|
12284
12673
|
this.click = createEvent(this, "sdClick", 7);
|
|
12285
12674
|
}
|
|
12675
|
+
/** 모달 상태 (loading: 로딩 중, error: 에러) */
|
|
12286
12676
|
state = 'loading';
|
|
12677
|
+
/** 표시할 메시지 (배열이면 여러 줄로 렌더링) */
|
|
12287
12678
|
message = '';
|
|
12679
|
+
/** 하단 버튼 표시 여부 */
|
|
12288
12680
|
useButton = false;
|
|
12681
|
+
/** 버튼 레이블 (없으면 state에 따른 기본값 사용) */
|
|
12289
12682
|
buttonLabel = '';
|
|
12683
|
+
/** 모달 너비 */
|
|
12290
12684
|
width;
|
|
12685
|
+
/** 모달 높이 */
|
|
12291
12686
|
height;
|
|
12687
|
+
/** sd-circle-progress에 전달할 진행률 (0–100) */
|
|
12292
12688
|
progress;
|
|
12689
|
+
/** 버튼 클릭 시 발생합니다. */
|
|
12293
12690
|
click;
|
|
12294
12691
|
get resolvedState() {
|
|
12295
12692
|
return this.state ?? 'loading';
|
|
@@ -12328,7 +12725,7 @@ class SdLoadingModal {
|
|
|
12328
12725
|
'--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
|
|
12329
12726
|
'--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
|
|
12330
12727
|
};
|
|
12331
|
-
return (hAsync(Host, { key: '
|
|
12728
|
+
return (hAsync(Host, { key: '0f3719ca22408ff2739f3997e693fe0e17cb32ab', style: hostStyle }, hAsync("div", { key: '25501b81a4514315bd3b408bf958f549b099c5a5', class: "sd-loading-modal" }, hAsync("div", { key: 'f5e6cf6334454a8455f95544a934fc245bddbbe6', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '7629809572661e28f9564db1d06e882cb64580e8', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (hAsync("div", { key: '36e1b978e1cc4ef56b8072d1d6dab83807eca951', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '218cb045df7b0dafc49024fc905bd88c7b12fcff', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
|
|
12332
12729
|
}
|
|
12333
12730
|
static get style() { return sdLoadingModalCss(); }
|
|
12334
12731
|
static get cmpMeta() { return {
|
|
@@ -12457,9 +12854,11 @@ class SdModalContainer {
|
|
|
12457
12854
|
registerInstance(this, hostRef);
|
|
12458
12855
|
}
|
|
12459
12856
|
get el() { return getElement(this); }
|
|
12857
|
+
/** 마지막 모달이 닫힐 때 자신을 DOM에서 제거할지 여부 */
|
|
12460
12858
|
autoRemove = false;
|
|
12461
12859
|
entries = [];
|
|
12462
12860
|
layerRefs = new Map();
|
|
12861
|
+
/** 확인 모달을 열고 모달 ID를 반환합니다. */
|
|
12463
12862
|
async open(options, modalRef) {
|
|
12464
12863
|
const id = `modal-${++modalIdCounter}`;
|
|
12465
12864
|
const modalEl = this.createConfirmModal(id, options);
|
|
@@ -12474,6 +12873,7 @@ class SdModalContainer {
|
|
|
12474
12873
|
});
|
|
12475
12874
|
return id;
|
|
12476
12875
|
}
|
|
12876
|
+
/** 로딩 모달을 열고 모달 ID를 반환합니다. */
|
|
12477
12877
|
async openLoading(options, modalRef) {
|
|
12478
12878
|
const id = `modal-${++modalIdCounter}`;
|
|
12479
12879
|
const modalEl = this.createLoadingModal(id, options);
|
|
@@ -12488,6 +12888,7 @@ class SdModalContainer {
|
|
|
12488
12888
|
});
|
|
12489
12889
|
return id;
|
|
12490
12890
|
}
|
|
12891
|
+
/** 커스텀 엘리먼트를 모달로 등록하고 모달 ID를 반환합니다. */
|
|
12491
12892
|
async createCustom(element, options, modalRef) {
|
|
12492
12893
|
const id = `modal-${++modalIdCounter}`;
|
|
12493
12894
|
element.setAttribute('data-modal-id', id);
|
|
@@ -12533,12 +12934,14 @@ class SdModalContainer {
|
|
|
12533
12934
|
unregisterModal(entry.id);
|
|
12534
12935
|
}
|
|
12535
12936
|
}
|
|
12937
|
+
/** 지정한 ID의 모달을 닫습니다. */
|
|
12536
12938
|
async dismissById(id, reason) {
|
|
12537
12939
|
const entry = this.entries.find(e => e.id === id);
|
|
12538
12940
|
if (!entry)
|
|
12539
12941
|
return;
|
|
12540
12942
|
this.requestDismiss(id, reason);
|
|
12541
12943
|
}
|
|
12944
|
+
/** 열려있는 모달의 props를 동적으로 업데이트합니다. */
|
|
12542
12945
|
async update(id, props) {
|
|
12543
12946
|
const entry = this.entries.find(e => e.id === id && !e.closing);
|
|
12544
12947
|
if (!entry)
|
|
@@ -12894,43 +13297,77 @@ class SdNumberInput {
|
|
|
12894
13297
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
12895
13298
|
}
|
|
12896
13299
|
get el() { return getElement(this); }
|
|
13300
|
+
/** 입력 크기 */
|
|
12897
13301
|
size = 'sm';
|
|
13302
|
+
/** 최솟값 */
|
|
12898
13303
|
min = Number.NEGATIVE_INFINITY;
|
|
13304
|
+
/** 최댓값 */
|
|
12899
13305
|
max = Number.POSITIVE_INFINITY;
|
|
13306
|
+
/** 스텝 단위 */
|
|
12900
13307
|
step = 1;
|
|
13308
|
+
/** 증감 버튼 표시 여부 */
|
|
12901
13309
|
useButton = false;
|
|
13310
|
+
/** 소수점 입력 허용 여부 */
|
|
12902
13311
|
useDecimal = false;
|
|
13312
|
+
/** 입력 값 */
|
|
12903
13313
|
value = null;
|
|
13314
|
+
/** 레이블 텍스트 */
|
|
12904
13315
|
label;
|
|
13316
|
+
/** 레이블 너비 */
|
|
12905
13317
|
labelWidth = '';
|
|
13318
|
+
/** 레이블 영역 아이콘 */
|
|
12906
13319
|
icon = undefined;
|
|
13320
|
+
/** 레이블 툴팁 텍스트 */
|
|
12907
13321
|
labelTooltip = '';
|
|
13322
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
12908
13323
|
labelTooltipProps = null;
|
|
13324
|
+
/** 필드 우측 어드온 레이블 */
|
|
12909
13325
|
addonLabel = '';
|
|
13326
|
+
/** 어드온 정렬 방향 */
|
|
12910
13327
|
addonAlign = 'start';
|
|
13328
|
+
/** 플레이스홀더 텍스트 */
|
|
12911
13329
|
placeholder = '입력해 주세요.';
|
|
13330
|
+
/** 비활성 상태 여부 */
|
|
12912
13331
|
disabled = false;
|
|
13332
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
12913
13333
|
width;
|
|
13334
|
+
/** 유효성 검사 규칙 목록 */
|
|
12914
13335
|
rules = [];
|
|
13336
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
12915
13337
|
autoFocus = false;
|
|
13338
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
12916
13339
|
status;
|
|
13340
|
+
/** 필드 하단 힌트 텍스트 */
|
|
12917
13341
|
hint = '';
|
|
13342
|
+
/** 에러 메시지 */
|
|
12918
13343
|
errorMessage = '';
|
|
13344
|
+
/** 입력 앞에 표시할 접두 텍스트 */
|
|
12919
13345
|
inputPrefix = '';
|
|
13346
|
+
/** 입력 뒤에 표시할 접미 텍스트 */
|
|
12920
13347
|
inputSuffix = '';
|
|
13348
|
+
/** 네이티브 input에 추가할 클래스 */
|
|
12921
13349
|
inputClass = '';
|
|
13350
|
+
/** 읽기 전용 여부 */
|
|
12922
13351
|
readonly = false;
|
|
13352
|
+
/** 네이티브 input에 적용할 인라인 스타일 */
|
|
12923
13353
|
inputStyle = {};
|
|
13354
|
+
/** 에러 상태 여부 */
|
|
12924
13355
|
error = false;
|
|
13356
|
+
/** 포커스 상태 여부 */
|
|
12925
13357
|
focused = false;
|
|
13358
|
+
/** 호버 상태 여부 */
|
|
12926
13359
|
hovered = false;
|
|
12927
13360
|
internalValue = null;
|
|
12928
13361
|
displayValue = '';
|
|
12929
13362
|
nativeEl = undefined;
|
|
12930
13363
|
formField;
|
|
13364
|
+
/** 폼 연동용 name 속성 */
|
|
12931
13365
|
name = nanoid$1();
|
|
13366
|
+
/** 값이 변경될 때 발생합니다. */
|
|
12932
13367
|
update;
|
|
13368
|
+
/** 포커스될 때 발생합니다. */
|
|
12933
13369
|
focus;
|
|
13370
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
12934
13371
|
blur;
|
|
12935
13372
|
toNumber(val) {
|
|
12936
13373
|
if (val === null || val === undefined || val === '')
|
|
@@ -13008,18 +13445,23 @@ class SdNumberInput {
|
|
|
13008
13445
|
this.update?.emit(newValue);
|
|
13009
13446
|
}
|
|
13010
13447
|
}
|
|
13448
|
+
/** 유효성 검사를 실행합니다. */
|
|
13011
13449
|
async sdValidate() {
|
|
13012
13450
|
this.formField?.sdValidate();
|
|
13013
13451
|
}
|
|
13452
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
13014
13453
|
async sdReset() {
|
|
13015
13454
|
this.formField?.sdReset();
|
|
13016
13455
|
}
|
|
13456
|
+
/** 유효성 상태만 초기화합니다. */
|
|
13017
13457
|
async sdResetValidate() {
|
|
13018
13458
|
this.formField?.sdResetValidation();
|
|
13019
13459
|
}
|
|
13460
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
13020
13461
|
async sdFocus() {
|
|
13021
13462
|
this.formField?.sdFocus();
|
|
13022
13463
|
}
|
|
13464
|
+
/** 네이티브 input 엘리먼트를 반환합니다. */
|
|
13023
13465
|
async sdGetNativeElement() {
|
|
13024
13466
|
return this.nativeEl || null;
|
|
13025
13467
|
}
|
|
@@ -13166,15 +13608,15 @@ class SdNumberInput {
|
|
|
13166
13608
|
'--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
|
|
13167
13609
|
'--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
|
|
13168
13610
|
};
|
|
13169
|
-
return (hAsync("sd-field", { key: '
|
|
13611
|
+
return (hAsync("sd-field", { key: 'f07710abbe74849369a3d0d6444750f71ed75e7b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ad70ff68bb24fe02c25a57dd3de0b5ef38ceef8a', class: {
|
|
13170
13612
|
'sd-number-input__content': true,
|
|
13171
13613
|
'sd-number-input__content--no-stepper': !this.useButton,
|
|
13172
|
-
} }, this.useButton && (hAsync("button", { key: '
|
|
13614
|
+
} }, this.useButton && (hAsync("button", { key: '90305a8863c6b6ba3d3afce695c5f61204424c46', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'e6440e5b63d4860d05f0573690a4064f7e6729ac', name: "minus", size: iconSize, color: this.isDecrementDisabled()
|
|
13173
13615
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13174
|
-
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '
|
|
13616
|
+
: NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: 'ae2e8d052471925a5c794dcf1041a7ddbfe66652', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: 'a19917bfbe10b6d121e61e374a134207c9eb7fd7', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
13175
13617
|
textAlign: this.useButton ? 'center' : 'right',
|
|
13176
13618
|
...this.inputStyle,
|
|
13177
|
-
} }), this.inputSuffix && hAsync("span", { key: '
|
|
13619
|
+
} }), this.inputSuffix && hAsync("span", { key: '352e2a645c8db62c8d887b1a1f490ade187d05f0', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '5c4f1153f6488cb95502bfa7f2bcad073bccb593', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'c9e0924126fb39492e8a696fa2628f367b8e2058', name: "add", size: iconSize, color: this.isIncrementDisabled()
|
|
13178
13620
|
? NUMBER_INPUT_STEPPER.icon.disabled
|
|
13179
13621
|
: NUMBER_INPUT_STEPPER.icon.default }))))));
|
|
13180
13622
|
}
|
|
@@ -13310,9 +13752,13 @@ class SdPagination {
|
|
|
13310
13752
|
registerInstance(this, hostRef);
|
|
13311
13753
|
this.pageChange = createEvent(this, "sdPageChange", 7);
|
|
13312
13754
|
}
|
|
13755
|
+
/** 현재 페이지 번호 */
|
|
13313
13756
|
currentPage = 1;
|
|
13757
|
+
/** 마지막 페이지 번호 */
|
|
13314
13758
|
lastPage = 1;
|
|
13759
|
+
/** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
|
|
13315
13760
|
simple = false;
|
|
13761
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
13316
13762
|
pageChange;
|
|
13317
13763
|
get pageNumbers() {
|
|
13318
13764
|
const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
|
|
@@ -13384,13 +13830,13 @@ class SdPagination {
|
|
|
13384
13830
|
'--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
|
|
13385
13831
|
'--sd-pagination-item-width': `${this.buttonWidth}px`,
|
|
13386
13832
|
};
|
|
13387
|
-
return (hAsync("div", { key: '
|
|
13833
|
+
return (hAsync("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
|
|
13388
13834
|
'sd-pagination': true,
|
|
13389
13835
|
'sd-pagination--simple': this.simple,
|
|
13390
|
-
}, style: cssVars }, hAsync("div", { key: '
|
|
13836
|
+
}, style: cssVars }, hAsync("div", { key: '4c23bdfb9a58950a04107fc4b4c921bbafa4e601', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
|
|
13391
13837
|
'sd-pagination__item': true,
|
|
13392
13838
|
'sd-pagination__item--selected': this.currentPage === n,
|
|
13393
|
-
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '
|
|
13839
|
+
}, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
|
|
13394
13840
|
}
|
|
13395
13841
|
static get style() { return sdPaginationCss(); }
|
|
13396
13842
|
static get cmpMeta() { return {
|
|
@@ -13424,22 +13870,38 @@ class SdPopover {
|
|
|
13424
13870
|
this.showChange = createEvent(this, "sdShowChange", 7);
|
|
13425
13871
|
}
|
|
13426
13872
|
get el() { return getElement(this); }
|
|
13873
|
+
/** 팝오버 표시 여부 */
|
|
13427
13874
|
show = false;
|
|
13875
|
+
/** 팝오버를 표시할 방향 */
|
|
13428
13876
|
placement = 'bottom';
|
|
13877
|
+
/** 아이콘 트리거 색상 */
|
|
13429
13878
|
color = '#01BB4B';
|
|
13879
|
+
/** 아이콘 트리거 아이콘명 */
|
|
13430
13880
|
icon = 'helpOutline';
|
|
13881
|
+
/** 아이콘 트리거 크기 */
|
|
13431
13882
|
iconSize = 12;
|
|
13883
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
13432
13884
|
label = '';
|
|
13885
|
+
/** 버튼 트리거 프리셋 */
|
|
13433
13886
|
name = 'primary_sm';
|
|
13887
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
13434
13888
|
rightIcon;
|
|
13889
|
+
/** 스크린리더용 접근성 레이블 */
|
|
13435
13890
|
ariaLabel = '';
|
|
13891
|
+
/** 비활성 상태 여부 */
|
|
13436
13892
|
disabled = false;
|
|
13893
|
+
/** 버튼 type 속성 */
|
|
13437
13894
|
type = 'button';
|
|
13895
|
+
/** 팝오버 메뉴 제목 */
|
|
13438
13896
|
menuTitle;
|
|
13897
|
+
/** 팝오버 하단 좌측 링크 옵션 */
|
|
13439
13898
|
leftLink;
|
|
13899
|
+
/** 팝오버 하단 버튼 옵션 */
|
|
13440
13900
|
button;
|
|
13901
|
+
/** 팝오버 메뉴에 추가할 클래스 */
|
|
13441
13902
|
menuClass = '';
|
|
13442
13903
|
slotContentHTML = '';
|
|
13904
|
+
/** 팝오버 표시 상태가 바뀔 때 발생합니다. */
|
|
13443
13905
|
showChange;
|
|
13444
13906
|
buttonEl;
|
|
13445
13907
|
setShow = (next) => {
|
|
@@ -13474,17 +13936,17 @@ class SdPopover {
|
|
|
13474
13936
|
const leftLink = this.leftLink;
|
|
13475
13937
|
const button = this.button;
|
|
13476
13938
|
const hasFooter = !!leftLink || !!button;
|
|
13477
|
-
return (hAsync(Fragment, { key: '
|
|
13939
|
+
return (hAsync(Fragment, { key: '94fcf54c8b20ffd1bcf2c7f540de31e1f41154fa' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '9f1585f2d268452f3d5c713e30ff865c3fc5fbac', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: '2cd2103f56c45364df5db9b73a2d89447b7c2bcc', class: {
|
|
13478
13940
|
'sd-floating-menu': true,
|
|
13479
13941
|
'sd-floating-menu--popover': true,
|
|
13480
13942
|
[`sd-floating-menu--${placement}`]: true,
|
|
13481
13943
|
[menuClass]: menuClass !== '',
|
|
13482
13944
|
}, style: {
|
|
13483
13945
|
'--sd-floating-bg': popoverTokens.popover.default.bg,
|
|
13484
|
-
} }, hAsync("i", { key: '
|
|
13946
|
+
} }, hAsync("i", { key: '5fd6c333790d3bb45bf4d43391ed1457d5eb54c3', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '062b11e3b6cee1e87f20064ab62a589a23f3eb26' })), hAsync("div", { key: 'b863abd8e31c8ce0dfddfdb25b6a49be69f34da1', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '1873c595d7ad91b3a7c71d979414820694c23ff5', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (hAsync("div", { key: '7a197b43d34a59ec298ed5e733cae0f3390c87a3', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (hAsync("div", { key: 'be9034b4150421be08c17978beba643e73c5568d', class: {
|
|
13485
13947
|
'sd-floating-menu__buttons': true,
|
|
13486
13948
|
'sd-floating-menu__buttons--with-link': !!leftLink,
|
|
13487
|
-
} }, leftLink && (hAsync("sd-text-link", { key: '
|
|
13949
|
+
} }, leftLink && (hAsync("sd-text-link", { key: '890a163609b8544450ad1b8c009648d73ef0d269', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: '128270add7ea99f7c9f61abe9f2a113f152465d8', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), hAsync("sd-ghost-button", { key: 'bc4c4d982da8fe72c85cd4ae7ba6cd2e09154164', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
|
|
13488
13950
|
}
|
|
13489
13951
|
static get style() { return sdPopoverCss(); }
|
|
13490
13952
|
static get cmpMeta() { return {
|
|
@@ -13585,12 +14047,16 @@ class SdPopup {
|
|
|
13585
14047
|
registerInstance(this, hostRef);
|
|
13586
14048
|
this.submit = createEvent(this, "sdSubmit", 7);
|
|
13587
14049
|
}
|
|
14050
|
+
/** 팝업 헤더에 표시할 제목 */
|
|
13588
14051
|
popupTitle = '';
|
|
14052
|
+
/** 팝업 타입 */
|
|
13589
14053
|
type = 'default';
|
|
13590
14054
|
// 기본 footer 표시가 자연스러운 UX. prop 이름 변경(hideFooter 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
13591
|
-
|
|
14055
|
+
/** 하단 footer 영역 표시 여부 */
|
|
13592
14056
|
useFooter = true;
|
|
14057
|
+
/** 확인 버튼 커스텀 props */
|
|
13593
14058
|
submitButtonProps;
|
|
14059
|
+
/** 확인 버튼 클릭 시 발생합니다. */
|
|
13594
14060
|
submit;
|
|
13595
14061
|
render() {
|
|
13596
14062
|
const cssVars = {
|
|
@@ -13616,7 +14082,7 @@ class SdPopup {
|
|
|
13616
14082
|
...DEFAULT_SUBMIT_BUTTON_PROPS,
|
|
13617
14083
|
...this.submitButtonProps,
|
|
13618
14084
|
};
|
|
13619
|
-
return (hAsync("div", { key: '
|
|
14085
|
+
return (hAsync("div", { key: '4455120f02fc1df1b1661062a22f3d82508627c4', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '96a5e7cdc21fa239e4275f4b57379f36246048f4', class: "sd-popup__header" }, hAsync("h2", { key: 'cdf8d05561f470fef31c46e6508e1e0c41aa7fa9', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'ddb32332f8822634f544f2fa5a246c5f37c7fcc2', class: "sd-popup__body" }, hAsync("slot", { key: '8f36daf8c918da6babcbb4383957e979930bfd73' })), this.useFooter && (hAsync("footer", { key: '2b84ed134a8d53633bb4feb7ab423e58955dfdae', class: "sd-popup__footer" }, hAsync("div", { key: '95e55875b38102ff809e752a3cc647dc830699a9', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: 'fbd86c77e1117018793279c9b90fd8e2f6db4934', name: "footer-left" })), hAsync("sd-button", { key: 'e8710c15d20e52d0476e7f656e800cda008187d8', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
|
|
13620
14086
|
}
|
|
13621
14087
|
static get style() { return sdPopupCss(); }
|
|
13622
14088
|
static get cmpMeta() { return {
|
|
@@ -13640,13 +14106,21 @@ class SdPortal {
|
|
|
13640
14106
|
this.close = createEvent(this, "sdClose", 3);
|
|
13641
14107
|
}
|
|
13642
14108
|
get hostEl() { return getElement(this); }
|
|
14109
|
+
/** 포탈 콘텐츠를 마운트할 대상 (CSS 선택자 또는 HTMLElement) */
|
|
13643
14110
|
to = 'body';
|
|
14111
|
+
/** 위치 기준이 되는 부모 엘리먼트 */
|
|
13644
14112
|
parentRef = null;
|
|
14113
|
+
/** [x, y] 오프셋 (px) */
|
|
13645
14114
|
offset = [0, 4];
|
|
14115
|
+
/** 뷰포트 경계 여백 (px) */
|
|
13646
14116
|
viewportPadding = 0;
|
|
13647
|
-
|
|
14117
|
+
/** z-index */
|
|
14118
|
+
zIndex = 996;
|
|
14119
|
+
/** 표시 여부 */
|
|
13648
14120
|
open = false;
|
|
14121
|
+
/** 콘텐츠를 표시할 방향 (공간이 부족하면 자동으로 반대 방향으로 전환) */
|
|
13649
14122
|
placement = 'bottom';
|
|
14123
|
+
/** 외부 클릭 등으로 닫힐 때 발생합니다. */
|
|
13650
14124
|
close;
|
|
13651
14125
|
container;
|
|
13652
14126
|
wrapper;
|
|
@@ -13685,13 +14159,27 @@ class SdPortal {
|
|
|
13685
14159
|
const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
|
|
13686
14160
|
return el instanceof HTMLElement ? el : document.body;
|
|
13687
14161
|
}
|
|
14162
|
+
/**
|
|
14163
|
+
* 트리거(parentRef)가 모달 내부에 있으면 해당 모달보다 위에, 아니면 페이지 기본값에 둔다.
|
|
14164
|
+
* 페이지 기본값(996)은 모달(997)보다 낮아, 모달 뒤의 페이지 포털이 모달 위로 떠오르지 않는다.
|
|
14165
|
+
*/
|
|
14166
|
+
resolveZIndex() {
|
|
14167
|
+
const base = this.zIndex ?? 996;
|
|
14168
|
+
const layer = this.parentRef?.closest('.sd-modal-container__layer');
|
|
14169
|
+
if (!layer)
|
|
14170
|
+
return base;
|
|
14171
|
+
const container = layer.closest('.sd-modal-container');
|
|
14172
|
+
const z = container instanceof HTMLElement ? parseInt(getComputedStyle(container).zIndex, 10) : NaN;
|
|
14173
|
+
const modalZIndex = Number.isFinite(z) ? z : 997;
|
|
14174
|
+
return Math.max(base, modalZIndex + 1);
|
|
14175
|
+
}
|
|
13688
14176
|
createWrapper() {
|
|
13689
14177
|
this.wrapper = document.createElement('div');
|
|
13690
14178
|
Object.assign(this.wrapper.style, {
|
|
13691
14179
|
position: 'fixed',
|
|
13692
14180
|
top: '0',
|
|
13693
14181
|
left: '0',
|
|
13694
|
-
zIndex:
|
|
14182
|
+
zIndex: this.resolveZIndex().toString(),
|
|
13695
14183
|
opacity: '0',
|
|
13696
14184
|
transition: 'opacity 0.15s ease-out',
|
|
13697
14185
|
boxSizing: 'border-box',
|
|
@@ -13857,8 +14345,7 @@ class SdPortal {
|
|
|
13857
14345
|
return scrollParents;
|
|
13858
14346
|
}
|
|
13859
14347
|
isInsideTarget(target) {
|
|
13860
|
-
return !!(
|
|
13861
|
-
(this.parentRef?.contains(target)));
|
|
14348
|
+
return !!(this.wrapper?.contains(target) || this.parentRef?.contains(target));
|
|
13862
14349
|
}
|
|
13863
14350
|
// 외부 클릭 감지
|
|
13864
14351
|
handleMouseDown(e) {
|
|
@@ -13874,7 +14361,7 @@ class SdPortal {
|
|
|
13874
14361
|
this.close.emit();
|
|
13875
14362
|
}
|
|
13876
14363
|
render() {
|
|
13877
|
-
return hAsync("slot", { key: '
|
|
14364
|
+
return hAsync("slot", { key: 'e4523bbb6fd56072c4f5a4dc241ab8a3ac0ea1bf' });
|
|
13878
14365
|
}
|
|
13879
14366
|
static get watchers() { return {
|
|
13880
14367
|
"open": [{
|
|
@@ -13981,10 +14468,15 @@ class SdRadio {
|
|
|
13981
14468
|
registerInstance(this, hostRef);
|
|
13982
14469
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
13983
14470
|
}
|
|
14471
|
+
/** 라디오 그룹의 현재 선택 값 */
|
|
13984
14472
|
value;
|
|
14473
|
+
/** 이 라디오 아이템의 값 */
|
|
13985
14474
|
val;
|
|
14475
|
+
/** 비활성 상태 여부 */
|
|
13986
14476
|
disabled = false;
|
|
14477
|
+
/** 표시할 라벨 텍스트 */
|
|
13987
14478
|
label;
|
|
14479
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
13988
14480
|
update;
|
|
13989
14481
|
valueChanged(newValue) {
|
|
13990
14482
|
this.value = newValue;
|
|
@@ -14027,7 +14519,7 @@ class SdRadio {
|
|
|
14027
14519
|
'--sd-radio-label-color': RADIO_COLORS.label.default,
|
|
14028
14520
|
'--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
|
|
14029
14521
|
};
|
|
14030
|
-
return (hAsync("label", { key: '
|
|
14522
|
+
return (hAsync("label", { key: 'f220a45add2be550bc696cd2442b8520ea0143f0', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '64692f5bf49783f166be9327877a474816a556ca', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: '3c30268adcbd735857b4163ecba444b5a57cba08', class: "sd-radio__circle" }), this.label && (hAsync("span", { key: 'b641086ab4ff9161ba4fb733b87c751b6863fe06', class: "sd-radio__label", "data-label": this.label }, this.label))));
|
|
14031
14523
|
}
|
|
14032
14524
|
static get watchers() { return {
|
|
14033
14525
|
"value": [{
|
|
@@ -14152,11 +14644,17 @@ class SdRadioButton {
|
|
|
14152
14644
|
registerInstance(this, hostRef);
|
|
14153
14645
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14154
14646
|
}
|
|
14647
|
+
/** 현재 선택된 값 */
|
|
14155
14648
|
value;
|
|
14649
|
+
/** 라디오 버튼 옵션 목록 */
|
|
14156
14650
|
options = [];
|
|
14651
|
+
/** 버튼 크기 */
|
|
14157
14652
|
size = 'sm';
|
|
14653
|
+
/** 비활성 상태 여부 */
|
|
14158
14654
|
disabled = false;
|
|
14655
|
+
/** input name 속성 (없으면 자동 생성) */
|
|
14159
14656
|
name;
|
|
14657
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14160
14658
|
change;
|
|
14161
14659
|
componentWillLoad() {
|
|
14162
14660
|
this.size ??= 'sm';
|
|
@@ -14226,7 +14724,7 @@ class SdRadioButton {
|
|
|
14226
14724
|
'--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
|
|
14227
14725
|
'--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
|
|
14228
14726
|
};
|
|
14229
|
-
return (hAsync("div", { key: '
|
|
14727
|
+
return (hAsync("div", { key: 'c0ed4c6927bd32a7335e003856de4b43ead97b1c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
|
|
14230
14728
|
const isSelected = this.isOptionSelected(option);
|
|
14231
14729
|
const isDisabled = this.isOptionDisabled(option);
|
|
14232
14730
|
return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
|
|
@@ -14256,11 +14754,17 @@ class SdRadioGroup {
|
|
|
14256
14754
|
registerInstance(this, hostRef);
|
|
14257
14755
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
14258
14756
|
}
|
|
14757
|
+
/** 현재 선택된 값 */
|
|
14259
14758
|
value;
|
|
14759
|
+
/** 라디오 옵션 목록 */
|
|
14260
14760
|
options = [];
|
|
14761
|
+
/** 옵션 배치 방향 */
|
|
14261
14762
|
direction = 'vertical';
|
|
14763
|
+
/** 비활성 상태 여부 */
|
|
14262
14764
|
disabled = false;
|
|
14765
|
+
/** input name 속성 */
|
|
14263
14766
|
groupName;
|
|
14767
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14264
14768
|
change;
|
|
14265
14769
|
valueChanged(newValue) {
|
|
14266
14770
|
this.value = newValue;
|
|
@@ -14278,7 +14782,7 @@ class SdRadioGroup {
|
|
|
14278
14782
|
return classes.join(' ');
|
|
14279
14783
|
}
|
|
14280
14784
|
render() {
|
|
14281
|
-
return (hAsync("div", { key: '
|
|
14785
|
+
return (hAsync("div", { key: '3a1694daddf5794a1598838c44bc965de2976770', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
|
|
14282
14786
|
return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
|
|
14283
14787
|
})));
|
|
14284
14788
|
}
|
|
@@ -14316,29 +14820,53 @@ class SdSelect {
|
|
|
14316
14820
|
static PORTAL_OFFSET_Y = 4;
|
|
14317
14821
|
static CLOSE_ANIMATION_DURATION = 150;
|
|
14318
14822
|
get el() { return getElement(this); }
|
|
14823
|
+
/** 셀렉트 타입 (단일/다중/계층) */
|
|
14319
14824
|
type = 'default';
|
|
14825
|
+
/** 현재 선택된 값 */
|
|
14320
14826
|
value = null;
|
|
14827
|
+
/** 선택 옵션 목록 */
|
|
14321
14828
|
options = [];
|
|
14829
|
+
/** 값이 없을 때 표시할 플레이스홀더 */
|
|
14322
14830
|
placeholder = '선택';
|
|
14831
|
+
/** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
|
|
14323
14832
|
dropdownWidth = '';
|
|
14833
|
+
/** 드롭다운 최대 너비 */
|
|
14324
14834
|
maxDropdownWidth = '640px';
|
|
14835
|
+
/** 드롭다운 최대 높이 */
|
|
14325
14836
|
dropdownHeight = '260px';
|
|
14837
|
+
/** 비활성 상태 여부 */
|
|
14326
14838
|
disabled = false;
|
|
14839
|
+
/** 레이블 텍스트 */
|
|
14327
14840
|
label = '';
|
|
14841
|
+
/** 레이블 너비 */
|
|
14328
14842
|
labelWidth = '';
|
|
14843
|
+
/** 필드 우측 어드온 레이블 */
|
|
14329
14844
|
addonLabel = '';
|
|
14845
|
+
/** 어드온 정렬 방향 */
|
|
14330
14846
|
addonAlign = 'start';
|
|
14847
|
+
/** 에러 상태 여부 */
|
|
14331
14848
|
error = false;
|
|
14849
|
+
/** 필드 하단 힌트 텍스트 */
|
|
14332
14850
|
hint = '';
|
|
14851
|
+
/** 에러 메시지 */
|
|
14333
14852
|
errorMessage = '';
|
|
14853
|
+
/** 유효성 검사 규칙 목록 */
|
|
14334
14854
|
rules = [];
|
|
14855
|
+
/** 레이블 영역 아이콘 */
|
|
14335
14856
|
icon = undefined;
|
|
14857
|
+
/** 레이블 툴팁 텍스트 */
|
|
14336
14858
|
labelTooltip = '';
|
|
14859
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
14337
14860
|
labelTooltipProps = null;
|
|
14861
|
+
/** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
|
|
14338
14862
|
emitValue = false;
|
|
14863
|
+
/** 필드 너비 */
|
|
14339
14864
|
width = '';
|
|
14865
|
+
/** 드롭다운 내 검색 입력 표시 여부 */
|
|
14340
14866
|
useSearch = false;
|
|
14867
|
+
/** 전체 선택 시 표시할 레이블 */
|
|
14341
14868
|
allSelectedLabel = '전체';
|
|
14869
|
+
/** 전체 선택 체크박스 표시 여부 */
|
|
14342
14870
|
useSelectAll = false;
|
|
14343
14871
|
isOpen = false;
|
|
14344
14872
|
isAnimatingOut = false;
|
|
@@ -14347,13 +14875,17 @@ class SdSelect {
|
|
|
14347
14875
|
resolvedMaxDropdownWidth = '640px';
|
|
14348
14876
|
focused = false;
|
|
14349
14877
|
hovered = false;
|
|
14878
|
+
/** 선택 값이 변경될 때 발생합니다. */
|
|
14350
14879
|
update;
|
|
14880
|
+
/** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
|
|
14351
14881
|
dropDownShow;
|
|
14882
|
+
/** 셀렉트 트리거에 포커스를 이동합니다. */
|
|
14352
14883
|
async sdFocus() {
|
|
14353
14884
|
if (this.disabled)
|
|
14354
14885
|
return;
|
|
14355
14886
|
await this.triggerComponentRef?.sdFocus();
|
|
14356
14887
|
}
|
|
14888
|
+
/** 드롭다운을 엽니다. */
|
|
14357
14889
|
async sdOpen() {
|
|
14358
14890
|
// sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
|
|
14359
14891
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
@@ -14368,6 +14900,7 @@ class SdSelect {
|
|
|
14368
14900
|
triggerRef;
|
|
14369
14901
|
triggerComponentRef;
|
|
14370
14902
|
closeAnimationTimer;
|
|
14903
|
+
/** 폼 연동용 name 속성 */
|
|
14371
14904
|
name = nanoid$1();
|
|
14372
14905
|
triggerHasFocus = false;
|
|
14373
14906
|
watchIsOpen(newValue) {
|
|
@@ -14565,15 +15098,15 @@ class SdSelect {
|
|
|
14565
15098
|
this.closeDropdown();
|
|
14566
15099
|
},
|
|
14567
15100
|
};
|
|
14568
|
-
return (hAsync("sd-field", { key: '
|
|
15101
|
+
return (hAsync("sd-field", { key: '3387dc16a6f54bfae652338c71c4c0e1553828c9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
|
|
14569
15102
|
this.hovered = true;
|
|
14570
15103
|
}, onMouseLeave: () => {
|
|
14571
15104
|
this.hovered = false;
|
|
14572
|
-
} }, hAsync("div", { key: '
|
|
15105
|
+
} }, hAsync("div", { key: '124325f8f6882a3c9ee1a1795ee969f13d67dfe2', class: "sd-select", ref: el => {
|
|
14573
15106
|
this.triggerRef = el;
|
|
14574
|
-
} }, hAsync("sd-select-trigger", { key: '
|
|
15107
|
+
} }, hAsync("sd-select-trigger", { key: '2e0e44ae666282d3931f9889650a7999929a312b', ref: el => {
|
|
14575
15108
|
this.triggerComponentRef = el;
|
|
14576
|
-
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '
|
|
15109
|
+
}, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'b6e97e43c5ea3a06fbb2976dab52d4f544822ae0', ...portalProps }, hAsync("sd-select-listbox", { key: '3d8a01c54667149507db2757d81813d2f285b32d', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
|
|
14577
15110
|
}
|
|
14578
15111
|
static get watchers() { return {
|
|
14579
15112
|
"isOpen": [{
|
|
@@ -14758,12 +15291,19 @@ class SdSelectListItem {
|
|
|
14758
15291
|
registerInstance(this, hostRef);
|
|
14759
15292
|
this.listItemClick = createEvent(this, "sdListItemClick", 7);
|
|
14760
15293
|
}
|
|
15294
|
+
/** 렌더링할 옵션 데이터 */
|
|
14761
15295
|
option;
|
|
15296
|
+
/** 계층 깊이 (1~3) */
|
|
14762
15297
|
depth = 1;
|
|
15298
|
+
/** 선택 상태 (null=중간) */
|
|
14763
15299
|
isSelected = false;
|
|
15300
|
+
/** 키보드 포커스 상태 여부 */
|
|
14764
15301
|
isFocused = false;
|
|
15302
|
+
/** 체크박스 표시 여부 */
|
|
14765
15303
|
useCheckbox = false;
|
|
15304
|
+
/** 다중 선택 시 (선택/전체) 카운트 */
|
|
14766
15305
|
countInfo;
|
|
15306
|
+
/** 항목 클릭 시 발생합니다. */
|
|
14767
15307
|
listItemClick;
|
|
14768
15308
|
get isGroup() {
|
|
14769
15309
|
return !!this.option.children;
|
|
@@ -14827,7 +15367,7 @@ class SdSelectListItem {
|
|
|
14827
15367
|
return (
|
|
14828
15368
|
// 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
|
|
14829
15369
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
14830
|
-
hAsync("div", { key: '
|
|
15370
|
+
hAsync("div", { key: '7717c82ea9f36bd44bf8a19d16ba7df6441f6715', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
|
|
14831
15371
|
'sd-select-list-item': true,
|
|
14832
15372
|
'sd-select-list-item--group': isGroup,
|
|
14833
15373
|
'sd-select-list-item--depth1-group': isDepth1Group,
|
|
@@ -14837,7 +15377,7 @@ class SdSelectListItem {
|
|
|
14837
15377
|
'sd-select-list-item--focused': this.isFocused,
|
|
14838
15378
|
'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
|
|
14839
15379
|
'sd-select-list-item--disabled': !!this.option.disabled,
|
|
14840
|
-
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '
|
|
15380
|
+
}, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '68d8c03d580fc2c411ee4fba917207705f3cf2d2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: '56ae08c55215a3970df99ecd74549ded5667265c', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
|
|
14841
15381
|
}
|
|
14842
15382
|
static get style() { return sdSelectListItemCss(); }
|
|
14843
15383
|
static get cmpMeta() { return {
|
|
@@ -14865,9 +15405,12 @@ class SdSelectListItemSearch {
|
|
|
14865
15405
|
this.searchFilter = createEvent(this, "sdSearchFilter", 7);
|
|
14866
15406
|
this.searchFocus = createEvent(this, "sdSearchFocus", 7);
|
|
14867
15407
|
}
|
|
15408
|
+
/** 리스트가 스크롤된 상태 여부 (그림자 효과용) */
|
|
14868
15409
|
isScrolled = false;
|
|
14869
15410
|
searchText = '';
|
|
15411
|
+
/** 검색어가 변경될 때 발생합니다. */
|
|
14870
15412
|
searchFilter;
|
|
15413
|
+
/** 검색 입력에 포커스될 때 발생합니다. */
|
|
14871
15414
|
searchFocus;
|
|
14872
15415
|
inputEl;
|
|
14873
15416
|
debounceTimer;
|
|
@@ -14879,6 +15422,7 @@ class SdSelectListItemSearch {
|
|
|
14879
15422
|
});
|
|
14880
15423
|
});
|
|
14881
15424
|
}
|
|
15425
|
+
/** 검색 입력에 포커스를 이동합니다. */
|
|
14882
15426
|
async sdFocus() {
|
|
14883
15427
|
this.inputEl?.focus();
|
|
14884
15428
|
}
|
|
@@ -14905,15 +15449,15 @@ class SdSelectListItemSearch {
|
|
|
14905
15449
|
clearTimeout(this.debounceTimer);
|
|
14906
15450
|
}
|
|
14907
15451
|
render() {
|
|
14908
|
-
return (hAsync("div", { key: '
|
|
15452
|
+
return (hAsync("div", { key: 'fed1a43f1901d23c7c007a4597b95970c0aad4ad', class: {
|
|
14909
15453
|
'sd-select-list-item-search': true,
|
|
14910
15454
|
'sd-select-list-item-search--scrolled': this.isScrolled,
|
|
14911
|
-
} }, hAsync("div", { key: '
|
|
15455
|
+
} }, hAsync("div", { key: '23b278a4b40b7b8506a13f284b3759b96b613b99', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '2150f73e1f20f05a28407b984977f7e91131217e', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '7dc4470ea57b54ebc5f3313f6e22d100f4cc4591', ref: el => {
|
|
14912
15456
|
this.inputEl = el;
|
|
14913
|
-
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '
|
|
15457
|
+
}, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: '60a363380da8689baa1e9e20b075df749846137a', type: "button", class: {
|
|
14914
15458
|
'sd-select-list-item-search__clear': true,
|
|
14915
15459
|
'sd-select-list-item-search__clear--hidden': this.searchText === '',
|
|
14916
|
-
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '
|
|
15460
|
+
}, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '7b27eb444864674578f97eaa374d1e9af486f97a', name: "close", size: 12, color: "#888888" })))));
|
|
14917
15461
|
}
|
|
14918
15462
|
static get style() { return sdSelectListItemSearchCss(); }
|
|
14919
15463
|
static get cmpMeta() { return {
|
|
@@ -14937,18 +15481,28 @@ class SdSelectListbox {
|
|
|
14937
15481
|
registerInstance(this, hostRef);
|
|
14938
15482
|
this.optionSelect = createEvent(this, "sdOptionSelect", 7);
|
|
14939
15483
|
}
|
|
15484
|
+
/** 셀렉트 타입 */
|
|
14940
15485
|
type = 'default';
|
|
15486
|
+
/** 옵션 목록 */
|
|
14941
15487
|
options = [];
|
|
15488
|
+
/** 현재 선택 값 */
|
|
14942
15489
|
value = null;
|
|
15490
|
+
/** 값만 emit할지 여부 */
|
|
14943
15491
|
emitValue = false;
|
|
15492
|
+
/** 검색 기능 사용 여부 */
|
|
14944
15493
|
useSearch = false;
|
|
15494
|
+
/** 전체 선택 기능 사용 여부 */
|
|
14945
15495
|
useSelectAll = false;
|
|
15496
|
+
/** 트리거 너비 (드롭다운 최소 너비) */
|
|
14946
15497
|
triggerWidth = '200px';
|
|
15498
|
+
/** 드롭다운 최대 너비 */
|
|
14947
15499
|
maxWidth = '640px';
|
|
15500
|
+
/** 드롭다운 최대 높이 */
|
|
14948
15501
|
maxHeight = '260px';
|
|
14949
15502
|
searchKeyword = '';
|
|
14950
15503
|
isScrolled = false;
|
|
14951
15504
|
focusedIndex = -1;
|
|
15505
|
+
/** 옵션 선택 시 발생합니다. */
|
|
14952
15506
|
optionSelect;
|
|
14953
15507
|
listEl;
|
|
14954
15508
|
lastScrolledIndex = -1;
|
|
@@ -15287,9 +15841,9 @@ class SdSelectListbox {
|
|
|
15287
15841
|
'--listbox-max-height': this.maxHeight ?? '260px',
|
|
15288
15842
|
'--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
|
|
15289
15843
|
};
|
|
15290
|
-
return (hAsync("div", { key: '
|
|
15844
|
+
return (hAsync("div", { key: '6ca1107a8aadc1fbae26f3d8d3385b355981b65e', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '8612b45a4e9b7d2701b8decd6865ebb50d6fcaa3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'c02c9c1d96176f94d2f83c66ad3e7cc0946c0270', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
|
|
15291
15845
|
this.listEl = el;
|
|
15292
|
-
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '
|
|
15846
|
+
} }, this.showSelectAll && (hAsync("sd-select-list-item", { key: 'f4fe1769d14812ba63fb73ff21ebfdaaf9d76409', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
|
|
15293
15847
|
}
|
|
15294
15848
|
static get watchers() { return {
|
|
15295
15849
|
"searchKeyword": [{
|
|
@@ -15329,14 +15883,22 @@ class SdSelectTrigger {
|
|
|
15329
15883
|
this.triggerFocus = createEvent(this, "sdTriggerFocus", 7);
|
|
15330
15884
|
this.triggerBlur = createEvent(this, "sdTriggerBlur", 7);
|
|
15331
15885
|
}
|
|
15886
|
+
/** 표시할 선택된 값 텍스트 */
|
|
15332
15887
|
displayText = '';
|
|
15888
|
+
/** 미선택 상태 플레이스홀더 */
|
|
15333
15889
|
placeholder = '선택';
|
|
15890
|
+
/** 비활성 상태 여부 */
|
|
15334
15891
|
disabled = false;
|
|
15892
|
+
/** 드롭다운 열림 상태 */
|
|
15335
15893
|
isOpen = false;
|
|
15894
|
+
/** 트리거 클릭 시 발생합니다. */
|
|
15336
15895
|
triggerClick;
|
|
15896
|
+
/** 트리거 포커스 시 발생합니다. */
|
|
15337
15897
|
triggerFocus;
|
|
15898
|
+
/** 트리거 블러 시 발생합니다. */
|
|
15338
15899
|
triggerBlur;
|
|
15339
15900
|
triggerEl;
|
|
15901
|
+
/** 트리거 엘리먼트에 포커스를 이동합니다. */
|
|
15340
15902
|
async sdFocus() {
|
|
15341
15903
|
if (this.disabled)
|
|
15342
15904
|
return;
|
|
@@ -15370,7 +15932,7 @@ class SdSelectTrigger {
|
|
|
15370
15932
|
? SELECT_COLORS.icon.disabled
|
|
15371
15933
|
: SELECT_COLORS.icon.default,
|
|
15372
15934
|
};
|
|
15373
|
-
return (hAsync("div", { key: '
|
|
15935
|
+
return (hAsync("div", { key: '7f5940ce19feb2d3ae9b2cbb6b5fdeb6d0151f61', ref: el => {
|
|
15374
15936
|
this.triggerEl = el;
|
|
15375
15937
|
}, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
|
|
15376
15938
|
'sd-select-trigger': true,
|
|
@@ -15381,7 +15943,7 @@ class SdSelectTrigger {
|
|
|
15381
15943
|
e.preventDefault();
|
|
15382
15944
|
this.handleClick();
|
|
15383
15945
|
}
|
|
15384
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '
|
|
15946
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'b50dea3450ee6fd2bf30811cc33facf00761f0d1', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: '778b3d1c738951f9a18950b668a34a1bc36006ca', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
|
|
15385
15947
|
'sd-select-trigger__icon': true,
|
|
15386
15948
|
'sd-select-trigger__icon--open': this.isOpen,
|
|
15387
15949
|
} }))));
|
|
@@ -15466,9 +16028,13 @@ class SdSwitch {
|
|
|
15466
16028
|
registerInstance(this, hostRef);
|
|
15467
16029
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
15468
16030
|
}
|
|
16031
|
+
/** 현재 on/off 상태 */
|
|
15469
16032
|
value = false;
|
|
16033
|
+
/** 표시할 라벨 텍스트 */
|
|
15470
16034
|
label = '';
|
|
16035
|
+
/** 비활성 상태 여부 */
|
|
15471
16036
|
disabled = false;
|
|
16037
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
15472
16038
|
change;
|
|
15473
16039
|
get switchClasses() {
|
|
15474
16040
|
const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
|
|
@@ -15506,7 +16072,7 @@ class SdSwitch {
|
|
|
15506
16072
|
'--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
|
|
15507
16073
|
'--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
|
|
15508
16074
|
};
|
|
15509
|
-
return (hAsync("label", { key: '
|
|
16075
|
+
return (hAsync("label", { key: '2cbee35194a8218f1526ecd26d0ff0cc660ed5fb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '8c9a330a7b69035ace0644f0a2cab8f6f8672bfd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '738a28fb9c26628d6b67f03d0b75f4155ad85966', class: "sd-switch__track" }, hAsync("div", { key: '91b7bac6c4e48d1b5b1331713620a132e9921906', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'a9cdfb08c240f3d6a15bef3e119c0c02f3fe3462', class: "sd-switch__label" }, this.label)));
|
|
15510
16076
|
}
|
|
15511
16077
|
static get style() { return sdSwitchCss(); }
|
|
15512
16078
|
static get cmpMeta() { return {
|
|
@@ -15629,28 +16195,48 @@ class SdTable {
|
|
|
15629
16195
|
}
|
|
15630
16196
|
static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
|
|
15631
16197
|
get el() { return getElement(this); }
|
|
16198
|
+
/** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
|
|
15632
16199
|
tableId = nanoid(8);
|
|
15633
16200
|
fallbackTableId = nanoid(8);
|
|
16201
|
+
/** 컬럼 정의 목록 */
|
|
15634
16202
|
columns = [];
|
|
16203
|
+
/** 행 데이터 배열 */
|
|
15635
16204
|
rows;
|
|
16205
|
+
/** 현재 선택된 행 목록 */
|
|
15636
16206
|
selected = [];
|
|
16207
|
+
/** 행 고유 식별 필드명 */
|
|
15637
16208
|
rowKey = 'id';
|
|
16209
|
+
/** 행 선택(체크박스) 기능 활성화 여부 */
|
|
15638
16210
|
selectable = false;
|
|
16211
|
+
/** 컬럼 너비 조절 기능 활성화 여부 */
|
|
15639
16212
|
resizable = false;
|
|
16213
|
+
/** 테이블 너비 */
|
|
15640
16214
|
width;
|
|
16215
|
+
/** 테이블 높이 */
|
|
15641
16216
|
height;
|
|
16217
|
+
/** 헤더 고정(sticky) 여부 */
|
|
15642
16218
|
stickyHeader = false;
|
|
16219
|
+
/** 고정할 좌우 컬럼 수 */
|
|
15643
16220
|
stickyColumn = { left: 0, right: 0 };
|
|
16221
|
+
/** border-radius 제어 */
|
|
15644
16222
|
radius = 'default';
|
|
16223
|
+
/** 데이터 없을 때 표시할 메시지 */
|
|
15645
16224
|
noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
15646
16225
|
resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
|
|
16226
|
+
/** 로딩 스피너 표시 여부 */
|
|
15647
16227
|
isLoading = false;
|
|
16228
|
+
/** 페이지네이션 옵션 */
|
|
15648
16229
|
pagination;
|
|
16230
|
+
/** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
|
|
15649
16231
|
useInternalPagination = false;
|
|
16232
|
+
/** 페이지당 행 수 선택 셀렉트 표시 여부 */
|
|
15650
16233
|
useRowsPerPageSelect = false;
|
|
16234
|
+
/** 행 높이를 줄인 조밀 모드 여부 */
|
|
15651
16235
|
dense = false;
|
|
15652
16236
|
// ─── Virtual Scroll ───────────────────────────────────────────────
|
|
16237
|
+
/** 가상 스크롤 사용 여부 */
|
|
15653
16238
|
useVirtualScroll = false;
|
|
16239
|
+
/** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
|
|
15654
16240
|
rowHeight;
|
|
15655
16241
|
get effectiveRowHeight() {
|
|
15656
16242
|
if (this.rowHeight != null)
|
|
@@ -15659,19 +16245,27 @@ class SdTable {
|
|
|
15659
16245
|
? Number(TABLE_BODY_LAYOUT.dense.height)
|
|
15660
16246
|
: Number(TABLE_BODY_LAYOUT.default.height);
|
|
15661
16247
|
}
|
|
16248
|
+
/** 가상 스크롤 상하 버퍼 행 수 */
|
|
15662
16249
|
virtualBuffer = 5;
|
|
16250
|
+
/** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
|
|
15663
16251
|
virtualEndThreshold = 10;
|
|
15664
16252
|
// ─────────────────────────────────────────────────────────────────
|
|
16253
|
+
/** 페이지당 행 수 선택 옵션 목록 */
|
|
15665
16254
|
rowsPerPageOption = [
|
|
15666
16255
|
{ label: '10개씩 보기', value: 10 },
|
|
15667
16256
|
{ label: '25개씩 보기', value: 25 },
|
|
15668
16257
|
{ label: '50개씩 보기', value: 50 },
|
|
15669
16258
|
{ label: '100개씩 보기', value: 100 },
|
|
15670
16259
|
];
|
|
16260
|
+
/** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
|
|
15671
16261
|
sdSelectChange;
|
|
16262
|
+
/** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
|
|
15672
16263
|
sdPageChange;
|
|
16264
|
+
/** 페이지당 행 수가 변경될 때 발생합니다. */
|
|
15673
16265
|
sdRowsPerPageChange;
|
|
16266
|
+
/** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
|
|
15674
16267
|
sdVirtualUpdate;
|
|
16268
|
+
/** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
|
|
15675
16269
|
sdVirtualReachEnd;
|
|
15676
16270
|
currentPage = 1;
|
|
15677
16271
|
innerRowsPerPage = 10;
|
|
@@ -16076,6 +16670,7 @@ class SdTable {
|
|
|
16076
16670
|
isRowSelectedSync(row) {
|
|
16077
16671
|
return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
|
|
16078
16672
|
}
|
|
16673
|
+
/** 행이 선택되어 있는지 확인합니다. */
|
|
16079
16674
|
async isRowSelected(row) {
|
|
16080
16675
|
return this.isRowSelectedSync(row);
|
|
16081
16676
|
}
|
|
@@ -16092,6 +16687,7 @@ class SdTable {
|
|
|
16092
16687
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16093
16688
|
this.refreshChildrenSelection();
|
|
16094
16689
|
}
|
|
16690
|
+
/** 행 선택 상태를 토글합니다. */
|
|
16095
16691
|
async updateRowSelect(row) {
|
|
16096
16692
|
this.updateRowSelectSync(row);
|
|
16097
16693
|
}
|
|
@@ -16108,6 +16704,7 @@ class SdTable {
|
|
|
16108
16704
|
this.sdSelectChange.emit(Array.from(this.innerSelected));
|
|
16109
16705
|
this.refreshChildrenSelection();
|
|
16110
16706
|
}
|
|
16707
|
+
/** 전체 행 선택/해제를 처리합니다. */
|
|
16111
16708
|
async toggleSelectAll(checked, rows) {
|
|
16112
16709
|
this.toggleSelectAllSync(checked, rows);
|
|
16113
16710
|
}
|
|
@@ -16120,6 +16717,7 @@ class SdTable {
|
|
|
16120
16717
|
return true;
|
|
16121
16718
|
return null; // indeterminate
|
|
16122
16719
|
}
|
|
16720
|
+
/** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
|
|
16123
16721
|
async getIsAllChecked(rows) {
|
|
16124
16722
|
return this.getIsAllCheckedSync(rows);
|
|
16125
16723
|
}
|
|
@@ -16210,6 +16808,7 @@ class SdTable {
|
|
|
16210
16808
|
}
|
|
16211
16809
|
return base;
|
|
16212
16810
|
}
|
|
16811
|
+
/** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
|
|
16213
16812
|
async getStickyStyle(colIdx) {
|
|
16214
16813
|
return this.getStickyStyleSync(colIdx);
|
|
16215
16814
|
}
|
|
@@ -16349,6 +16948,7 @@ class SdTable {
|
|
|
16349
16948
|
this.propagateVirtualUpdate(true);
|
|
16350
16949
|
}
|
|
16351
16950
|
}
|
|
16951
|
+
/** 가상 스크롤 총 행 수를 설정합니다. */
|
|
16352
16952
|
async setRowCount(count) {
|
|
16353
16953
|
this.setRowCountSync(count);
|
|
16354
16954
|
}
|
|
@@ -16376,6 +16976,7 @@ class SdTable {
|
|
|
16376
16976
|
rowsPerPage: this.innerRowsPerPage,
|
|
16377
16977
|
};
|
|
16378
16978
|
}
|
|
16979
|
+
/** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
|
|
16379
16980
|
async getPaginationInfo() {
|
|
16380
16981
|
return this.getPaginationInfoSync();
|
|
16381
16982
|
}
|
|
@@ -16439,25 +17040,25 @@ class SdTable {
|
|
|
16439
17040
|
'--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
|
|
16440
17041
|
'--table-host-height': hostHeight,
|
|
16441
17042
|
};
|
|
16442
|
-
return (hAsync(Host, { key: '
|
|
17043
|
+
return (hAsync(Host, { key: '2606b0d7fc3657a8021a6dfc64672996b756f762', style: hostStyle }, hAsync("div", { key: '4def416edfe630ead35b80cb2f04081a89740f62', class: "sd-table__container", style: {
|
|
16443
17044
|
'--table-width': this.width,
|
|
16444
17045
|
'--pagination-height': `${paginationHeight}px`,
|
|
16445
|
-
} }, hAsync("div", { key: '
|
|
17046
|
+
} }, hAsync("div", { key: '316a359f2be84895719f452e056dcd2f54cd5b56', class: {
|
|
16446
17047
|
'sd-table__wrapper': true,
|
|
16447
17048
|
'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
|
|
16448
17049
|
'sd-table__wrapper--radius-full': this.radius === 'full',
|
|
16449
|
-
} }, hAsync("div", { key: '
|
|
17050
|
+
} }, hAsync("div", { key: 'e798b58104f56b3250a7d74261a8c320a8049f28', class: {
|
|
16450
17051
|
'sd-table__scroll-container': true,
|
|
16451
17052
|
'sd-table__scroll-container--loading': this.isLoading,
|
|
16452
17053
|
'sd-table__scroll-container--no-data': isNoData,
|
|
16453
|
-
} }, this.isLoading && (hAsync("div", { key: '
|
|
17054
|
+
} }, this.isLoading && (hAsync("div", { key: 'af91877075c8d4ed8b608bdfdc7f04bd844f5574', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '2422c7020046fa468dbaaf34220230737cb6b02e', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'bd5c2237d8c3a34cc4bf12a187f471e22ce02efd', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: '1e0da67564879a175e89a3482195742b1b4451dc', class: "sd-table__no-data" }, hAsync("div", { key: '391bc76e748d64b84c39de669396b2f5f288e5a1', class: "sd-table__no-data-content", ref: el => {
|
|
16454
17055
|
this.noDataContentEl = el;
|
|
16455
17056
|
if (el)
|
|
16456
17057
|
this.syncNoDataContentObserver();
|
|
16457
|
-
} }, hAsync("slot", { key: '
|
|
17058
|
+
} }, hAsync("slot", { key: '3e2e26f4951d9b834ae811906c137a78067fecab', name: "no-data" }, hAsync("span", { key: '54ed0371d60f5312376d8ffab50efd9ec0947729' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '46cab11834ca3f5aa9010bd6f603d301b2a54c9c', class: this.tableClasses }, this.autoThead ? (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-thead", { rows: this.rows ?? [] }))) : (hAsync("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, hAsync("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (hAsync("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
|
|
16458
17059
|
this.pagination.rowsPerPage > 0 &&
|
|
16459
17060
|
this.rowCount > 0 &&
|
|
16460
|
-
!this.useVirtualScroll && (hAsync("div", { key: '
|
|
17061
|
+
!this.useVirtualScroll && (hAsync("div", { key: 'b9c738172d4e2993f15f6a7e051406d3b7e8d568', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: '62c199e61dd2010f2c19aabb3599d75a561ef83d', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '5f305858818e720bf5a53499777d2f5aac843487', value: this.useInternalPagination
|
|
16461
17062
|
? this.innerRowsPerPage
|
|
16462
17063
|
: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
|
|
16463
17064
|
if (!this.isRowsPerPageValue(e.detail))
|
|
@@ -16691,11 +17292,17 @@ class SdTabs {
|
|
|
16691
17292
|
registerInstance(this, hostRef);
|
|
16692
17293
|
this.update = createEvent(this, "sdUpdate", 7);
|
|
16693
17294
|
}
|
|
17295
|
+
/** 현재 선택된 탭 value */
|
|
16694
17296
|
value;
|
|
17297
|
+
/** 탭 옵션 목록 */
|
|
16695
17298
|
tabs = [];
|
|
17299
|
+
/** 탭 크기 */
|
|
16696
17300
|
size = 'md';
|
|
17301
|
+
/** true이면 서브 탭 스타일 적용 */
|
|
16697
17302
|
isSub = false;
|
|
17303
|
+
/** true이면 탭을 세로로 배치 */
|
|
16698
17304
|
vertical = false;
|
|
17305
|
+
/** 탭이 변경될 때 새 value를 전달합니다. */
|
|
16699
17306
|
update;
|
|
16700
17307
|
valueChanged(newValue) {
|
|
16701
17308
|
this.value = newValue;
|
|
@@ -16762,7 +17369,7 @@ class SdTabs {
|
|
|
16762
17369
|
};
|
|
16763
17370
|
}
|
|
16764
17371
|
render() {
|
|
16765
|
-
return (hAsync("div", { key: '
|
|
17372
|
+
return (hAsync("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
|
|
16766
17373
|
const badgeName = this.getBadgeName(tab);
|
|
16767
17374
|
return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
|
|
16768
17375
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -16975,11 +17582,14 @@ class SdTag {
|
|
|
16975
17582
|
constructor(hostRef) {
|
|
16976
17583
|
registerInstance(this, hostRef);
|
|
16977
17584
|
}
|
|
17585
|
+
/** 태그 프리셋 이름 */
|
|
16978
17586
|
name = 'square_sm_grey';
|
|
17587
|
+
/** 표시할 레이블 텍스트 */
|
|
16979
17588
|
label = '';
|
|
17589
|
+
/** 아이콘명 */
|
|
16980
17590
|
icon;
|
|
16981
17591
|
// 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
|
|
16982
|
-
|
|
17592
|
+
/** true이면 아이콘을 레이블 왼쪽에 배치 */
|
|
16983
17593
|
isLeft = true;
|
|
16984
17594
|
componentWillLoad() {
|
|
16985
17595
|
this.name = this.name ?? 'square_sm_grey';
|
|
@@ -17001,7 +17611,7 @@ class SdTag {
|
|
|
17001
17611
|
render() {
|
|
17002
17612
|
const config = this.resolvedConfig;
|
|
17003
17613
|
const iconNode = this.renderIcon(config.icon, config.iconSize);
|
|
17004
|
-
return (hAsync("span", { key: '
|
|
17614
|
+
return (hAsync("span", { key: '09cc181654983b64dec9860fdf656677ebcfcd15', class: "sd-tag", style: {
|
|
17005
17615
|
'--sd-tag-background': config.background,
|
|
17006
17616
|
'--sd-tag-content': config.content,
|
|
17007
17617
|
'--sd-tag-height': config.height,
|
|
@@ -17011,7 +17621,7 @@ class SdTag {
|
|
|
17011
17621
|
'--sd-tag-font-weight': config.fontWeight,
|
|
17012
17622
|
'--sd-tag-line-height': config.lineHeight,
|
|
17013
17623
|
'--sd-tag-radius': config.radius,
|
|
17014
|
-
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '
|
|
17624
|
+
}, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '044ab51afc474799b400c608fd5531bed9a7ad18', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
|
|
17015
17625
|
}
|
|
17016
17626
|
static get style() { return sdTagCss(); }
|
|
17017
17627
|
static get cmpMeta() { return {
|
|
@@ -17036,6 +17646,7 @@ class SdTbody {
|
|
|
17036
17646
|
registerInstance(this, hostRef);
|
|
17037
17647
|
}
|
|
17038
17648
|
get el() { return getElement(this); }
|
|
17649
|
+
/** 렌더링할 행 데이터 목록 */
|
|
17039
17650
|
rows = [];
|
|
17040
17651
|
tableId = '';
|
|
17041
17652
|
topSpacerHeight = 0;
|
|
@@ -17079,9 +17690,9 @@ class SdTbody {
|
|
|
17079
17690
|
}
|
|
17080
17691
|
}
|
|
17081
17692
|
render() {
|
|
17082
|
-
return (hAsync(Host, { key: '
|
|
17693
|
+
return (hAsync(Host, { key: '0f85168b22221551714f3c75bd12c366538cc5ec', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'f9a8528d40c51988cfbca2c349905dafdafce8d3', class: { tbody: true } }, [
|
|
17083
17694
|
this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
|
|
17084
|
-
hAsync("slot", { key: '
|
|
17695
|
+
hAsync("slot", { key: '7ecfe2f730b4c909d394fdee2d9aa015c5410cb4' }),
|
|
17085
17696
|
this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
|
|
17086
17697
|
])));
|
|
17087
17698
|
}
|
|
@@ -17113,18 +17724,27 @@ class SdTd {
|
|
|
17113
17724
|
registerInstance(this, hostRef);
|
|
17114
17725
|
}
|
|
17115
17726
|
get el() { return getElement(this); }
|
|
17727
|
+
/** 데이터 필드명 (슬롯 이름 생성에 사용) */
|
|
17116
17728
|
field;
|
|
17729
|
+
/** 행 식별 키 */
|
|
17117
17730
|
rowKey;
|
|
17731
|
+
/** 셀 내용 정렬 */
|
|
17118
17732
|
align;
|
|
17733
|
+
/** 행 병합 수 */
|
|
17119
17734
|
rowspan;
|
|
17735
|
+
/** 열 병합 수 */
|
|
17120
17736
|
colspan;
|
|
17121
17737
|
// sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
|
|
17122
17738
|
// <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
|
|
17123
17739
|
// 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
|
|
17740
|
+
/** td에 병합할 사용자 클래스 */
|
|
17124
17741
|
sdClass;
|
|
17742
|
+
/** 좌측 구분선 표시 여부 */
|
|
17125
17743
|
dividerLeft = false;
|
|
17744
|
+
/** 우측 구분선 표시 여부 */
|
|
17126
17745
|
dividerRight = false;
|
|
17127
17746
|
// true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
|
|
17747
|
+
/** frame 레이아웃 사용 여부 */
|
|
17128
17748
|
useFrame = false;
|
|
17129
17749
|
handleFieldChange(_newField, oldField) {
|
|
17130
17750
|
this.syncSlotName();
|
|
@@ -17256,7 +17876,7 @@ class SdTd {
|
|
|
17256
17876
|
}
|
|
17257
17877
|
}
|
|
17258
17878
|
render() {
|
|
17259
|
-
return (hAsync(Host, { key: '
|
|
17879
|
+
return (hAsync(Host, { key: 'd7cea28b006a4903fab00e7a709252e6009f911f', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '1d8695ff6c6890838e4b18ec4da1d7ff6a5c8858' })));
|
|
17260
17880
|
}
|
|
17261
17881
|
static get watchers() { return {
|
|
17262
17882
|
"field": [{
|
|
@@ -17421,14 +18041,23 @@ class SdTextLink {
|
|
|
17421
18041
|
registerInstance(this, hostRef);
|
|
17422
18042
|
this.click = createEvent(this, "sdClick", 7);
|
|
17423
18043
|
}
|
|
18044
|
+
/** 표시할 레이블 텍스트 */
|
|
17424
18045
|
label = '';
|
|
18046
|
+
/** 좌측 아이콘명 */
|
|
17425
18047
|
icon = '';
|
|
18048
|
+
/** 좌측 아이콘 색상 */
|
|
17426
18049
|
iconColor = '';
|
|
18050
|
+
/** 레이블 span에 추가할 클래스 */
|
|
17427
18051
|
labelClass = '';
|
|
18052
|
+
/** 우측 화살표 타입 */
|
|
17428
18053
|
rightArrow = 'none';
|
|
18054
|
+
/** 밑줄 스타일 여부 */
|
|
17429
18055
|
underline = false;
|
|
18056
|
+
/** 비활성 상태 여부 */
|
|
17430
18057
|
disabled = false;
|
|
18058
|
+
/** 텍스트 크기 */
|
|
17431
18059
|
size = 'sm';
|
|
18060
|
+
/** 클릭 시 발생합니다. */
|
|
17432
18061
|
click;
|
|
17433
18062
|
handleClick = () => {
|
|
17434
18063
|
if (this.disabled)
|
|
@@ -17450,7 +18079,7 @@ class SdTextLink {
|
|
|
17450
18079
|
'--sd-text-link-text-decoration': typo.textDecoration,
|
|
17451
18080
|
...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
|
|
17452
18081
|
};
|
|
17453
|
-
return (hAsync("span", { key: '
|
|
18082
|
+
return (hAsync("span", { key: '1b58c27c2754182b1fc6249e7e4bf52f42d1d11d', role: "button", tabindex: this.disabled ? -1 : 0, class: {
|
|
17454
18083
|
'sd-text-link': true,
|
|
17455
18084
|
'sd-text-link--disabled': this.disabled,
|
|
17456
18085
|
}, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
|
|
@@ -17458,13 +18087,13 @@ class SdTextLink {
|
|
|
17458
18087
|
e.preventDefault();
|
|
17459
18088
|
this.handleClick();
|
|
17460
18089
|
}
|
|
17461
|
-
} }, this.icon && (hAsync("sd-icon", { key: '
|
|
18090
|
+
} }, this.icon && (hAsync("sd-icon", { key: '85076e7cf4873b527606aa737c2899233dcc3d9f', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '75b16e64155770ccdb889497caea6b4240b2e8c0', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: '8dd32b1b640a8e81f306b0387f783a4c1435abd6', class: "sd-text-link__arrow", style: {
|
|
17462
18091
|
width: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17463
18092
|
height: `${TEXT_LINK_ARROW.arrowFrame}px`,
|
|
17464
18093
|
display: 'inline-flex',
|
|
17465
18094
|
alignItems: 'center',
|
|
17466
18095
|
justifyContent: 'center',
|
|
17467
|
-
} }, hAsync("sd-icon", { key: '
|
|
18096
|
+
} }, hAsync("sd-icon", { key: '605572568dd4c2b6dcde9c932d5593e5fdb916a4', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
|
|
17468
18097
|
}
|
|
17469
18098
|
static get style() { return sdTextLinkCss(); }
|
|
17470
18099
|
static get cmpMeta() { return {
|
|
@@ -17510,38 +18139,67 @@ class SdTextarea {
|
|
|
17510
18139
|
this.blur = createEvent(this, "sdBlur", 7);
|
|
17511
18140
|
}
|
|
17512
18141
|
get host() { return getElement(this); }
|
|
18142
|
+
/** 입력 값 */
|
|
17513
18143
|
value = null;
|
|
18144
|
+
/** 플레이스홀더 텍스트 */
|
|
17514
18145
|
placeholder = '입력해 주세요.';
|
|
18146
|
+
/** 비활성 상태 여부 */
|
|
17515
18147
|
disabled = false;
|
|
18148
|
+
/** 읽기 전용 여부 */
|
|
17516
18149
|
readonly = false;
|
|
18150
|
+
/** 마운트 시 자동 포커스 여부 */
|
|
17517
18151
|
autoFocus = false;
|
|
18152
|
+
/** 네이티브 textarea에 추가할 클래스 */
|
|
17518
18153
|
textareaClass = '';
|
|
18154
|
+
/** 네이티브 textarea에 적용할 인라인 스타일 */
|
|
17519
18155
|
textareaStyle = {};
|
|
18156
|
+
/** 최대 입력 글자 수 */
|
|
17520
18157
|
maxLength;
|
|
18158
|
+
/** textarea 기본 행 수 */
|
|
17521
18159
|
rows;
|
|
18160
|
+
/** 맞춤법 검사 여부 */
|
|
17522
18161
|
spellcheck = false;
|
|
18162
|
+
/** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
|
|
17523
18163
|
width = '';
|
|
17524
18164
|
// props - sd-field
|
|
18165
|
+
/** 레이블 텍스트 */
|
|
17525
18166
|
label = '';
|
|
18167
|
+
/** 레이블 너비 */
|
|
17526
18168
|
labelWidth = '';
|
|
18169
|
+
/** 필드 우측 어드온 레이블 */
|
|
17527
18170
|
addonLabel = '';
|
|
18171
|
+
/** 어드온 정렬 방향 */
|
|
17528
18172
|
addonAlign = 'start';
|
|
18173
|
+
/** 필드 하단 힌트 텍스트 */
|
|
17529
18174
|
hint = '';
|
|
18175
|
+
/** 에러 메시지 */
|
|
17530
18176
|
errorMessage = '';
|
|
18177
|
+
/** 레이블 영역 아이콘 */
|
|
17531
18178
|
icon = undefined;
|
|
18179
|
+
/** 레이블 툴팁 텍스트 */
|
|
17532
18180
|
labelTooltip = '';
|
|
18181
|
+
/** 레이블 툴팁 상세 옵션 */
|
|
17533
18182
|
labelTooltipProps = null;
|
|
18183
|
+
/** 유효성 검사 규칙 목록 */
|
|
17534
18184
|
rules = [];
|
|
18185
|
+
/** 에러 상태 여부 */
|
|
17535
18186
|
error = false;
|
|
18187
|
+
/** 필드 상태 (없으면 rules 결과로 자동 결정) */
|
|
17536
18188
|
status;
|
|
18189
|
+
/** 포커스 상태 여부 */
|
|
17537
18190
|
focused = false;
|
|
18191
|
+
/** 호버 상태 여부 */
|
|
17538
18192
|
hovered = false;
|
|
17539
18193
|
internalValue = null;
|
|
17540
18194
|
nativeEl = undefined;
|
|
17541
18195
|
formField;
|
|
18196
|
+
/** 폼 연동용 name 속성 */
|
|
17542
18197
|
name = nanoid$1();
|
|
18198
|
+
/** 값이 변경될 때 발생합니다. */
|
|
17543
18199
|
input;
|
|
18200
|
+
/** 포커스될 때 발생합니다. */
|
|
17544
18201
|
focus;
|
|
18202
|
+
/** 포커스를 잃을 때 발생합니다. */
|
|
17545
18203
|
blur;
|
|
17546
18204
|
valueChanged(newValue) {
|
|
17547
18205
|
this.internalValue = newValue;
|
|
@@ -17552,18 +18210,23 @@ class SdTextarea {
|
|
|
17552
18210
|
this.input?.emit(this.value);
|
|
17553
18211
|
}
|
|
17554
18212
|
}
|
|
18213
|
+
/** 네이티브 textarea 엘리먼트를 반환합니다. */
|
|
17555
18214
|
async sdGetNativeElement() {
|
|
17556
18215
|
return this.nativeEl || null;
|
|
17557
18216
|
}
|
|
18217
|
+
/** 유효성 검사를 실행합니다. */
|
|
17558
18218
|
async sdValidate() {
|
|
17559
18219
|
this.formField?.sdValidate();
|
|
17560
18220
|
}
|
|
18221
|
+
/** 값과 유효성 상태를 초기화합니다. */
|
|
17561
18222
|
async sdReset() {
|
|
17562
18223
|
this.formField?.sdReset();
|
|
17563
18224
|
}
|
|
18225
|
+
/** 유효성 상태만 초기화합니다. */
|
|
17564
18226
|
async sdResetValidate() {
|
|
17565
18227
|
this.formField?.sdResetValidation();
|
|
17566
18228
|
}
|
|
18229
|
+
/** 입력 필드에 포커스를 이동합니다. */
|
|
17567
18230
|
async sdFocus() {
|
|
17568
18231
|
this.formField?.sdFocus();
|
|
17569
18232
|
}
|
|
@@ -17612,7 +18275,7 @@ class SdTextarea {
|
|
|
17612
18275
|
'--sd-system-size-field-sm-height': 'auto',
|
|
17613
18276
|
'--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
|
|
17614
18277
|
};
|
|
17615
|
-
return (hAsync("sd-field", { key: '
|
|
18278
|
+
return (hAsync("sd-field", { key: 'f8fd8949824938bb79f101de2e5eca7980224b09', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '382441be15dd047888cf876006f1966256a503b7', class: "sd-textarea__content" }, hAsync("textarea", { key: '5f5985ccdcc401f4aff2f47fe40003abeb76e8b3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
|
|
17616
18279
|
}
|
|
17617
18280
|
static get watchers() { return {
|
|
17618
18281
|
"value": [{
|
|
@@ -17666,7 +18329,7 @@ class SdTextarea {
|
|
|
17666
18329
|
}; }
|
|
17667
18330
|
}
|
|
17668
18331
|
|
|
17669
|
-
const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
|
|
18332
|
+
const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
|
|
17670
18333
|
|
|
17671
18334
|
class SdThead {
|
|
17672
18335
|
constructor(hostRef) {
|
|
@@ -17674,15 +18337,25 @@ class SdThead {
|
|
|
17674
18337
|
this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
|
|
17675
18338
|
}
|
|
17676
18339
|
get el() { return getElement(this); }
|
|
18340
|
+
/** 테이블 컬럼 목록 */
|
|
17677
18341
|
columns;
|
|
18342
|
+
/** 행 선택 기능 사용 여부 */
|
|
17678
18343
|
selectable;
|
|
18344
|
+
/** 컬럼 너비 조절 가능 여부 */
|
|
17679
18345
|
resizable;
|
|
18346
|
+
/** 고정 컬럼 설정 */
|
|
17680
18347
|
stickyColumn;
|
|
18348
|
+
/** 헤더 고정 여부 */
|
|
17681
18349
|
stickyHeader;
|
|
18350
|
+
/** 좌측 스크롤 여부 */
|
|
17682
18351
|
scrolledLeft;
|
|
18352
|
+
/** 우측 스크롤 여부 */
|
|
17683
18353
|
scrolledRight;
|
|
18354
|
+
/** 전체 선택 체크박스용 행 데이터 */
|
|
17684
18355
|
rows = [];
|
|
18356
|
+
/** 컬럼 너비 목록 */
|
|
17685
18357
|
columnWidths = [];
|
|
18358
|
+
/** 컬럼 정렬 버튼 클릭 시 발생합니다. */
|
|
17686
18359
|
sdColumnSort;
|
|
17687
18360
|
tableId = '';
|
|
17688
18361
|
_columns = [];
|
|
@@ -17692,14 +18365,29 @@ class SdThead {
|
|
|
17692
18365
|
_stickyHeader = false;
|
|
17693
18366
|
_scrolledLeft = false;
|
|
17694
18367
|
_scrolledRight = false;
|
|
18368
|
+
dropdownOpenMap = {};
|
|
17695
18369
|
tableEl = null;
|
|
18370
|
+
dropdownRefs = {};
|
|
18371
|
+
dropdownThRefs = {};
|
|
18372
|
+
dropdownPortals = {};
|
|
17696
18373
|
handleColumnsChange(newCols) {
|
|
17697
18374
|
if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
|
|
17698
18375
|
this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
|
|
17699
18376
|
}
|
|
17700
18377
|
}
|
|
18378
|
+
disconnectedCallback() {
|
|
18379
|
+
const portals = this.dropdownPortals ?? {};
|
|
18380
|
+
Object.values(portals).forEach(portal => {
|
|
18381
|
+
if (portal?.parentNode != null)
|
|
18382
|
+
portal.parentNode.removeChild(portal);
|
|
18383
|
+
});
|
|
18384
|
+
}
|
|
17701
18385
|
componentWillLoad() {
|
|
17702
18386
|
this.syncTableContext();
|
|
18387
|
+
this.dropdownOpenMap = this.dropdownOpenMap ?? {};
|
|
18388
|
+
this.dropdownRefs = this.dropdownRefs ?? {};
|
|
18389
|
+
this.dropdownThRefs = this.dropdownThRefs ?? {};
|
|
18390
|
+
this.dropdownPortals = this.dropdownPortals ?? {};
|
|
17703
18391
|
this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
|
|
17704
18392
|
this.resolveConfig();
|
|
17705
18393
|
if ((this.columnWidths ?? []).length === 0) {
|
|
@@ -17709,6 +18397,36 @@ class SdThead {
|
|
|
17709
18397
|
componentDidLoad() {
|
|
17710
18398
|
this.syncTableContext();
|
|
17711
18399
|
this.resolveConfig();
|
|
18400
|
+
this.initDropdownPortals();
|
|
18401
|
+
}
|
|
18402
|
+
// sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
|
|
18403
|
+
// <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
|
|
18404
|
+
initDropdownPortals() {
|
|
18405
|
+
const cols = this._columns ?? [];
|
|
18406
|
+
const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
|
|
18407
|
+
if (hasDropdownCols.length === 0)
|
|
18408
|
+
return;
|
|
18409
|
+
for (const col of hasDropdownCols) {
|
|
18410
|
+
const colName = col.name;
|
|
18411
|
+
// 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
|
|
18412
|
+
if ((this.dropdownPortals ?? {})[colName] != null)
|
|
18413
|
+
continue;
|
|
18414
|
+
const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
|
|
18415
|
+
if (slotContent == null)
|
|
18416
|
+
continue;
|
|
18417
|
+
// slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
|
|
18418
|
+
slotContent.removeAttribute('slot');
|
|
18419
|
+
const portal = document.createElement('sd-portal');
|
|
18420
|
+
portal.parentRef = this.dropdownThRefs[colName] ?? null;
|
|
18421
|
+
portal.open = false;
|
|
18422
|
+
// 첫 open 전까지 포탈 호스트 자체를 숨긴다.
|
|
18423
|
+
// moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
|
|
18424
|
+
portal.style.display = 'none';
|
|
18425
|
+
portal.addEventListener('sdClose', () => this.closeDropdown(colName));
|
|
18426
|
+
portal.appendChild(slotContent);
|
|
18427
|
+
document.body.appendChild(portal);
|
|
18428
|
+
this.dropdownPortals[colName] = portal;
|
|
18429
|
+
}
|
|
17712
18430
|
}
|
|
17713
18431
|
syncTableContext() {
|
|
17714
18432
|
// sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
|
|
@@ -17748,12 +18466,16 @@ class SdThead {
|
|
|
17748
18466
|
this.columnWidths = [];
|
|
17749
18467
|
}
|
|
17750
18468
|
}
|
|
18469
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
17751
18470
|
async refreshConfig() {
|
|
17752
18471
|
this.resolveConfig();
|
|
18472
|
+
this.initDropdownPortals();
|
|
17753
18473
|
}
|
|
18474
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
17754
18475
|
async setColumnWidths(widths) {
|
|
17755
18476
|
this.columnWidths = Array.isArray(widths) ? widths : [];
|
|
17756
18477
|
}
|
|
18478
|
+
/** 전체 선택 체크박스 상태를 갱신합니다. */
|
|
17757
18479
|
async refreshSelection() {
|
|
17758
18480
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
17759
18481
|
if (checkbox) {
|
|
@@ -17792,6 +18514,28 @@ class SdThead {
|
|
|
17792
18514
|
handleColumnSort = (col) => {
|
|
17793
18515
|
this.sdColumnSort.emit({ column: col });
|
|
17794
18516
|
};
|
|
18517
|
+
toggleDropdown(name) {
|
|
18518
|
+
const isOpen = this.dropdownOpenMap[name] !== true;
|
|
18519
|
+
const portals = this.dropdownPortals ?? {};
|
|
18520
|
+
const newMap = { ...this.dropdownOpenMap };
|
|
18521
|
+
// _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
|
|
18522
|
+
for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
|
|
18523
|
+
const shouldBeOpen = col.name === name ? isOpen : false;
|
|
18524
|
+
newMap[col.name] = shouldBeOpen;
|
|
18525
|
+
const portal = portals[col.name];
|
|
18526
|
+
if (portal != null)
|
|
18527
|
+
portal.open = shouldBeOpen;
|
|
18528
|
+
}
|
|
18529
|
+
this.dropdownOpenMap = newMap;
|
|
18530
|
+
}
|
|
18531
|
+
closeDropdown(name) {
|
|
18532
|
+
if (this.dropdownOpenMap[name] !== true)
|
|
18533
|
+
return;
|
|
18534
|
+
this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
|
|
18535
|
+
const portal = (this.dropdownPortals ?? {})[name];
|
|
18536
|
+
if (portal != null)
|
|
18537
|
+
portal.open = false;
|
|
18538
|
+
}
|
|
17795
18539
|
handleSelectAll(checked) {
|
|
17796
18540
|
const nextChecked = !!checked;
|
|
17797
18541
|
const safeRows = Array.isArray(this.rows) ? this.rows : [];
|
|
@@ -17808,6 +18552,8 @@ class SdThead {
|
|
|
17808
18552
|
}
|
|
17809
18553
|
render() {
|
|
17810
18554
|
const safeRows = Array.isArray(this.rows) ? this.rows : [];
|
|
18555
|
+
const dropdownOpenMap = this.dropdownOpenMap ?? {};
|
|
18556
|
+
const dropdownRefs = this.dropdownRefs ?? {};
|
|
17811
18557
|
const stickyLeftCount = this._stickyColumn.left || 0;
|
|
17812
18558
|
const stickyRightCount = this._stickyColumn.right || 0;
|
|
17813
18559
|
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
@@ -17829,22 +18575,25 @@ class SdThead {
|
|
|
17829
18575
|
'--table-border-color': TABLE_BORDER.color,
|
|
17830
18576
|
'--table-border-width': `${TABLE_BORDER.width}px`,
|
|
17831
18577
|
};
|
|
17832
|
-
return (hAsync(Host, { key: '
|
|
18578
|
+
return (hAsync(Host, { key: '947f5e5b0e59e7e6f8a73e4fd44dbfa646cb630a', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '2e0ffbfe9d96528c6e0082d4883fa462a18831d6', class: {
|
|
17833
18579
|
'thead': true,
|
|
17834
18580
|
'thead--sticky': this._stickyHeader,
|
|
17835
|
-
} }, hAsync("tr", { key: '
|
|
18581
|
+
} }, hAsync("tr", { key: '5843a18e1548bc6546e447d4c9213375116af0e9', class: "tr" }, this._selectable && (hAsync("th", { key: '914024ca35874747e39f1819337cd4ad1cbe733d', class: {
|
|
17836
18582
|
'th': true,
|
|
17837
18583
|
'th--selected': true,
|
|
17838
18584
|
'sticky-left': true,
|
|
17839
18585
|
'sticky-left-edge': stickyLeftCount === 0,
|
|
17840
18586
|
'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
|
|
17841
|
-
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: '
|
|
18587
|
+
}, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'e07232f1f5fa02589573ddaae53ebdadbdb97674', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: '08b504cfd4f420e76e91d649eed28c7068517044', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
|
|
17842
18588
|
'th': true,
|
|
17843
18589
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
17844
18590
|
'sticky-left': true,
|
|
17845
18591
|
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
17846
18592
|
'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
|
|
17847
|
-
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))
|
|
18593
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text)))))), col.hasDropdown === true && (hAsync("button", { class: {
|
|
18594
|
+
'th__dropdown-trigger': true,
|
|
18595
|
+
'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
|
|
18596
|
+
}, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
|
|
17848
18597
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
17849
18598
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
17850
18599
|
hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
|
|
@@ -17852,7 +18601,10 @@ class SdThead {
|
|
|
17852
18601
|
return (hAsync("th", { key: col.name, class: {
|
|
17853
18602
|
th: true,
|
|
17854
18603
|
[`${col.thClass}`]: Boolean(col.thClass),
|
|
17855
|
-
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))
|
|
18604
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text)))))), col.hasDropdown === true && (hAsync("button", { class: {
|
|
18605
|
+
'th__dropdown-trigger': true,
|
|
18606
|
+
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
18607
|
+
}, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
|
|
17856
18608
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
17857
18609
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
17858
18610
|
hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
@@ -17864,7 +18616,10 @@ class SdThead {
|
|
|
17864
18616
|
'sticky-right': true,
|
|
17865
18617
|
'sticky-right-edge': relativeIdx === 0,
|
|
17866
18618
|
'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
|
|
17867
|
-
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))
|
|
18619
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, hAsync("div", { class: `th__content th__content--${col.align || 'left'}` }, hAsync("div", { class: "th__content--label" }, col.label), col.icon && (hAsync("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (hAsync("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text)))))), col.hasDropdown === true && (hAsync("button", { class: {
|
|
18620
|
+
'th__dropdown-trigger': true,
|
|
18621
|
+
'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
|
|
18622
|
+
}, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
|
|
17868
18623
|
// column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
|
|
17869
18624
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
17870
18625
|
hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
|
|
@@ -17897,6 +18652,7 @@ class SdThead {
|
|
|
17897
18652
|
"_stickyHeader": [32],
|
|
17898
18653
|
"_scrolledLeft": [32],
|
|
17899
18654
|
"_scrolledRight": [32],
|
|
18655
|
+
"dropdownOpenMap": [32],
|
|
17900
18656
|
"refreshConfig": [64],
|
|
17901
18657
|
"setColumnWidths": [64],
|
|
17902
18658
|
"refreshSelection": [64]
|
|
@@ -17973,14 +18729,23 @@ class SdToast {
|
|
|
17973
18729
|
this.close = createEvent(this, "sdClose", 7);
|
|
17974
18730
|
this.buttonClick = createEvent(this, "sdButtonClick", 7);
|
|
17975
18731
|
}
|
|
18732
|
+
/** 좌측 아이콘명 */
|
|
17976
18733
|
icon;
|
|
18734
|
+
/** 표시할 메시지 */
|
|
17977
18735
|
message;
|
|
18736
|
+
/** 우측 링크 URL */
|
|
17978
18737
|
link;
|
|
18738
|
+
/** 링크 표시 레이블 (없으면 URL 표시) */
|
|
17979
18739
|
linkLabel;
|
|
18740
|
+
/** 우측 버튼 레이블 */
|
|
17980
18741
|
buttonLabel;
|
|
18742
|
+
/** 닫기 버튼 표시 여부 */
|
|
17981
18743
|
useClose = false;
|
|
18744
|
+
/** 토스트 타입 (색상/아이콘 프리셋) */
|
|
17982
18745
|
type = 'default';
|
|
18746
|
+
/** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
|
|
17983
18747
|
close;
|
|
18748
|
+
/** 우측 버튼 클릭 시 발생합니다. */
|
|
17984
18749
|
buttonClick;
|
|
17985
18750
|
render() {
|
|
17986
18751
|
const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
|
|
@@ -17989,12 +18754,12 @@ class SdToast {
|
|
|
17989
18754
|
const linkColor = typeConfig.linkColor ?? typeConfig.content;
|
|
17990
18755
|
const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
|
|
17991
18756
|
const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
|
|
17992
|
-
return (hAsync("div", { key: '
|
|
18757
|
+
return (hAsync("div", { key: 'ee54d9d9821821e0c422725c94d465f1e2df7bc6', style: {
|
|
17993
18758
|
'--sd-toast-bg': typeConfig.bg,
|
|
17994
18759
|
'--sd-toast-text': typeConfig.content,
|
|
17995
18760
|
'--sd-toast-icon': iconColor,
|
|
17996
18761
|
'--sd-toast-link': linkColor,
|
|
17997
|
-
} }, hAsync("div", { key: '
|
|
18762
|
+
} }, hAsync("div", { key: 'b258e4b49fe530c778c0003516a2ad159805158a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '850a02dd996c7d1ca214b887e0d3d9899972e319', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '50d2817b160bd767a509956338347ee09a34a845', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '0200da1ef6cfa9fcafa4cacf08998a33847038dc', class: "sd-toast__content" }, hAsync("span", { key: 'af039afb2f457acded350ae2323e0bc59765a09e', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '98fdcf360ca632e9f919e01ab0dce8369a1ebe79', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '45202c0f969ab64e50265ee81f34fc14def26ce2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '48f30258527ae7a8a96db9609f096f5d216246ff', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
|
|
17998
18763
|
}
|
|
17999
18764
|
static get style() { return sdToastCss(); }
|
|
18000
18765
|
static get cmpMeta() { return {
|
|
@@ -18034,15 +18799,22 @@ class SdToastContainer {
|
|
|
18034
18799
|
this.toastDismiss = createEvent(this, "sdToastDismiss", 7);
|
|
18035
18800
|
}
|
|
18036
18801
|
get el() { return getElement(this); }
|
|
18802
|
+
/** 토스트 표시 위치 */
|
|
18037
18803
|
position = 'bottom-center';
|
|
18804
|
+
/** 동시에 표시할 최대 토스트 수 */
|
|
18038
18805
|
maxVisible = DEFAULT_MAX_VISIBLE;
|
|
18806
|
+
/** 자동 닫힘 지연 시간 (ms, 0이면 자동 닫힘 없음) */
|
|
18039
18807
|
defaultDuration = DEFAULT_DURATION;
|
|
18808
|
+
/** z-index */
|
|
18040
18809
|
zIndex = DEFAULT_Z_INDEX;
|
|
18041
18810
|
toasts = [];
|
|
18042
18811
|
expanded = false;
|
|
18043
18812
|
toastRefs = new Map();
|
|
18813
|
+
/** 토스트가 표시될 때 발생합니다. */
|
|
18044
18814
|
toastShow;
|
|
18815
|
+
/** 토스트가 제거될 때 발생합니다. */
|
|
18045
18816
|
toastDismiss;
|
|
18817
|
+
/** 토스트를 생성하고 ID를 반환합니다. */
|
|
18046
18818
|
async create(options) {
|
|
18047
18819
|
const id = `toast-${++toastIdCounter}`;
|
|
18048
18820
|
const entry = { id, options, state: 'entering' };
|
|
@@ -18067,9 +18839,11 @@ class SdToastContainer {
|
|
|
18067
18839
|
this.toastShow.emit({ id });
|
|
18068
18840
|
return id;
|
|
18069
18841
|
}
|
|
18842
|
+
/** 지정한 ID의 토스트를 닫습니다. */
|
|
18070
18843
|
async dismiss(id) {
|
|
18071
18844
|
this.startDismiss(id);
|
|
18072
18845
|
}
|
|
18846
|
+
/** 모든 토스트를 닫습니다. */
|
|
18073
18847
|
async dismissAll() {
|
|
18074
18848
|
(this.toasts || []).forEach(t => this.startDismiss(t.id));
|
|
18075
18849
|
}
|
|
@@ -18247,7 +19021,7 @@ class SdToastContainer {
|
|
|
18247
19021
|
const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
|
|
18248
19022
|
const indexMap = new Map();
|
|
18249
19023
|
activeToasts.forEach((t, i) => indexMap.set(t.id, i));
|
|
18250
|
-
return (hAsync("div", { key: '
|
|
19024
|
+
return (hAsync("div", { key: 'b75aeffdddcd16267169ae99305ef5f475f53950', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
|
|
18251
19025
|
this.expanded = true;
|
|
18252
19026
|
this.pauseTimers();
|
|
18253
19027
|
}, onMouseLeave: () => {
|
|
@@ -18361,9 +19135,13 @@ class SdToggle {
|
|
|
18361
19135
|
registerInstance(this, hostRef);
|
|
18362
19136
|
this.change = createEvent(this, "sdUpdate", 7);
|
|
18363
19137
|
}
|
|
19138
|
+
/** 현재 선택 상태 */
|
|
18364
19139
|
value = false;
|
|
19140
|
+
/** 표시할 레이블 텍스트 */
|
|
18365
19141
|
label = '';
|
|
19142
|
+
/** 비활성 상태 여부 */
|
|
18366
19143
|
disabled = false;
|
|
19144
|
+
/** 상태가 변경될 때 발생합니다. */
|
|
18367
19145
|
change;
|
|
18368
19146
|
get toggleClasses() {
|
|
18369
19147
|
const classes = ['sd-toggle'];
|
|
@@ -18405,7 +19183,7 @@ class SdToggle {
|
|
|
18405
19183
|
'--sd-toggle-content-select': TOGGLE_COLORS.content.select,
|
|
18406
19184
|
'--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
|
|
18407
19185
|
};
|
|
18408
|
-
return (hAsync("label", { key: '
|
|
19186
|
+
return (hAsync("label", { key: '1a03763c5cfcb5159b69e62a9db9893297082e2b', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '099cbbb02ebf283883ab7fe748f605491ae84808', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
|
|
18409
19187
|
}
|
|
18410
19188
|
static get style() { return sdToggleCss(); }
|
|
18411
19189
|
static get cmpMeta() { return {
|
|
@@ -18454,19 +19232,33 @@ class SdTooltip {
|
|
|
18454
19232
|
registerInstance(this, hostRef);
|
|
18455
19233
|
}
|
|
18456
19234
|
get el() { return getElement(this); }
|
|
19235
|
+
/** 툴팁 트리거 방식 */
|
|
18457
19236
|
trigger = 'hover';
|
|
19237
|
+
/** 툴팁 표시 방향 */
|
|
18458
19238
|
placement = 'top';
|
|
19239
|
+
/** 아이콘 트리거 색상 */
|
|
18459
19240
|
color = '#01BB4B';
|
|
19241
|
+
/** 툴팁 배경/텍스트 색상 타입 */
|
|
18460
19242
|
tooltipType = 'default';
|
|
19243
|
+
/** 아이콘 트리거 아이콘명 */
|
|
18461
19244
|
icon = 'helpOutline';
|
|
19245
|
+
/** 아이콘 트리거 크기 */
|
|
18462
19246
|
iconSize = 12;
|
|
19247
|
+
/** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
|
|
18463
19248
|
label = '';
|
|
19249
|
+
/** 버튼 트리거 프리셋 */
|
|
18464
19250
|
name = 'primary_sm';
|
|
19251
|
+
/** 버튼 트리거 우측 아이콘 */
|
|
18465
19252
|
rightIcon;
|
|
19253
|
+
/** 스크린리더용 접근성 레이블 */
|
|
18466
19254
|
ariaLabel = '';
|
|
19255
|
+
/** 비활성 상태 여부 */
|
|
18467
19256
|
disabled = false;
|
|
19257
|
+
/** 버튼 type 속성 */
|
|
18468
19258
|
type = 'button';
|
|
19259
|
+
/** 툴팁 우측 상단 닫기 버튼 표시 여부 */
|
|
18469
19260
|
useClose = false;
|
|
19261
|
+
/** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
|
|
18470
19262
|
sdClass = '';
|
|
18471
19263
|
/**
|
|
18472
19264
|
* 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
|
|
@@ -18579,7 +19371,7 @@ class SdTooltip {
|
|
|
18579
19371
|
const bodyHTML = this.message && this.message.length > 0
|
|
18580
19372
|
? this.message.map(line => `<div>${line}</div>`).join('')
|
|
18581
19373
|
: this.slotContentHTML;
|
|
18582
|
-
return (hAsync(Fragment, { key: '
|
|
19374
|
+
return (hAsync(Fragment, { key: 'c5a5c69267ac8a7d7f06324a63b6410092b84f04' }, hAsync("div", { key: 'f7323385e1b2e6ef4199c6318bdc55984182d3da', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '0ba07ee2a20862df43755264d9390b3229da57e6', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: 'f92217cb8cca4d1467cbeac7b36f9a00f28babd3', ref: el => (this.menuEl = el), class: {
|
|
18583
19375
|
'sd-floating-menu': true,
|
|
18584
19376
|
[`sd-floating-menu--${tooltipType}`]: true,
|
|
18585
19377
|
[`sd-floating-menu--${placement}`]: true,
|
|
@@ -18587,7 +19379,7 @@ class SdTooltip {
|
|
|
18587
19379
|
}, style: {
|
|
18588
19380
|
'--sd-floating-bg': typeConfig.bg,
|
|
18589
19381
|
'--sd-floating-content': typeConfig.content,
|
|
18590
|
-
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '
|
|
19382
|
+
}, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '6d7671dbac4fa026788f0804df4a97ca86c492c1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '31321fbfef392af0fa64111a32c3ecd6c6144d35' })), hAsync("div", { key: '67e54a935c9f684d713ab943e7049737d5a8596a', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '355101a4efed88fbb687e1f972f88b6dfb4be309', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
|
|
18591
19383
|
}
|
|
18592
19384
|
static get style() { return sdTooltipCss(); }
|
|
18593
19385
|
static get cmpMeta() { return {
|
|
@@ -18629,11 +19421,17 @@ class SdTr {
|
|
|
18629
19421
|
registerInstance(this, hostRef);
|
|
18630
19422
|
}
|
|
18631
19423
|
get el() { return getElement(this); }
|
|
19424
|
+
/** 테이블 컬럼 목록 */
|
|
18632
19425
|
columns;
|
|
19426
|
+
/** 행 선택 기능 사용 여부 */
|
|
18633
19427
|
selectable;
|
|
19428
|
+
/** 고정 컬럼 설정 */
|
|
18634
19429
|
stickyColumn;
|
|
19430
|
+
/** 행 식별 키 */
|
|
18635
19431
|
rowKey = '';
|
|
19432
|
+
/** 행 데이터 객체 */
|
|
18636
19433
|
row = {};
|
|
19434
|
+
/** 구분선 높이 (4 또는 6px, null이면 일반 행) */
|
|
18637
19435
|
separator = null;
|
|
18638
19436
|
tableId = '';
|
|
18639
19437
|
columnWidths = [];
|
|
@@ -18686,12 +19484,15 @@ class SdTr {
|
|
|
18686
19484
|
this.columnWidths = [...config.columnWidths];
|
|
18687
19485
|
}
|
|
18688
19486
|
}
|
|
19487
|
+
/** 테이블 설정을 다시 불러옵니다. */
|
|
18689
19488
|
async refreshConfig() {
|
|
18690
19489
|
this.resolveConfig();
|
|
18691
19490
|
}
|
|
19491
|
+
/** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
|
|
18692
19492
|
async bumpSpansVersion() {
|
|
18693
19493
|
this.spansVersion = this.spansVersion + 1;
|
|
18694
19494
|
}
|
|
19495
|
+
/** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
|
|
18695
19496
|
async updateVisibility() {
|
|
18696
19497
|
this.updateVisibilitySync();
|
|
18697
19498
|
}
|
|
@@ -18704,9 +19505,11 @@ class SdTr {
|
|
|
18704
19505
|
}
|
|
18705
19506
|
this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
|
|
18706
19507
|
}
|
|
19508
|
+
/** 컬럼 너비를 업데이트합니다. */
|
|
18707
19509
|
async setColumnWidths(widths) {
|
|
18708
19510
|
this.columnWidths = widths;
|
|
18709
19511
|
}
|
|
19512
|
+
/** 체크박스 선택 상태를 갱신합니다. */
|
|
18710
19513
|
async refreshSelection() {
|
|
18711
19514
|
const checkbox = this.el.querySelector('sd-checkbox');
|
|
18712
19515
|
if (checkbox) {
|