@sellmate/design-system 1.28.0 → 1.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (348) hide show
  1. package/dist/cjs/{component.datepicker-CUQbDSku.js → component.datepicker-zFTQQKMH.js} +1 -2
  2. package/dist/cjs/design-system.cjs.js +2 -2
  3. package/dist/cjs/{index-D12oddge.js → index-iiJZMzVM.js} +1 -15
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/sd-action-modal.cjs.entry.js +1 -1
  6. package/dist/cjs/sd-badge.cjs.entry.js +1 -1
  7. package/dist/cjs/sd-barcode-input.cjs.entry.js +1 -1
  8. package/dist/cjs/sd-button_2.cjs.entry.js +1 -1
  9. package/dist/cjs/sd-calendar_2.cjs.entry.js +6 -6
  10. package/dist/cjs/sd-callout.cjs.entry.js +1 -1
  11. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  12. package/dist/cjs/sd-checkbox.cjs.entry.js +1 -1
  13. package/dist/cjs/sd-chip-input.cjs.entry.js +2 -2
  14. package/dist/cjs/sd-chip.cjs.entry.js +1 -1
  15. package/dist/cjs/sd-circle-progress.cjs.entry.js +3 -3
  16. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +33 -36
  17. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  18. package/dist/cjs/{sd-date-picker.config-De7ahWIs.js → sd-date-picker.config-Chrd8c4v.js} +1 -1
  19. package/dist/cjs/{sd-date-picker_7.cjs.entry.js → sd-date-picker_8.cjs.entry.js} +327 -18
  20. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +4 -4
  21. package/dist/cjs/sd-divider.cjs.entry.js +3 -3
  22. package/dist/cjs/sd-dropdown-button.cjs.entry.js +2 -2
  23. package/dist/cjs/sd-field_3.cjs.entry.js +9 -9
  24. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  25. package/dist/cjs/sd-ghost-button_3.cjs.entry.js +3 -3
  26. package/dist/cjs/sd-guide.cjs.entry.js +2 -2
  27. package/dist/cjs/sd-key-value-table.cjs.entry.js +88 -18
  28. package/dist/cjs/sd-linear-progress.cjs.entry.js +3 -3
  29. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  30. package/dist/cjs/sd-modal-container.cjs.entry.js +16 -2
  31. package/dist/cjs/sd-pagination.cjs.entry.js +173 -0
  32. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  33. package/dist/cjs/sd-popup.cjs.entry.js +3 -3
  34. package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
  35. package/dist/cjs/sd-radio.cjs.entry.js +1 -1
  36. package/dist/cjs/{sd-select_3.cjs.entry.js → sd-select-list-item_4.cjs.entry.js} +294 -315
  37. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  38. package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
  39. package/dist/cjs/sd-text-link.cjs.entry.js +1 -1
  40. package/dist/cjs/sd-toast-container.cjs.entry.js +2 -2
  41. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  42. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  43. package/dist/cjs/{system-MjrAugX-.js → system-B4KkVpu2.js} +1 -7
  44. package/dist/cjs/{tooltipArrow-Dda4ik0V.js → tooltipArrow-DOOcBlLp.js} +1 -1
  45. package/dist/cjs/{useDatePicker-iMd6WToc.js → useDatePicker-CgpIfwLA.js} +1 -1
  46. package/dist/collection/collection-manifest.json +0 -5
  47. package/dist/collection/components/sd-circle-progress/sd-circle-progress.css +1 -0
  48. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.css +3 -0
  49. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +35 -59
  50. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  51. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  52. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  53. package/dist/collection/components/sd-divider/sd-divider.js +1 -1
  54. package/dist/collection/components/sd-field/sd-field.js +4 -4
  55. package/dist/collection/components/sd-file-picker/sd-file-picker.js +6 -6
  56. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  57. package/dist/collection/components/sd-input/sd-input.js +2 -2
  58. package/dist/collection/components/sd-key-value-table/sd-key-value-table.config.js +2 -0
  59. package/dist/collection/components/sd-key-value-table/sd-key-value-table.css +5 -1
  60. package/dist/collection/components/sd-key-value-table/sd-key-value-table.js +65 -15
  61. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  62. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  63. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  64. package/dist/collection/components/sd-modal-container/sd-modal-container.js +15 -1
  65. package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
  66. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  67. package/dist/collection/components/sd-popup/sd-popup.js +1 -1
  68. package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
  69. package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
  70. package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
  71. package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
  72. package/dist/collection/components/sd-select/sd-select.js +4 -4
  73. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  74. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  75. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  76. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  77. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  78. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  79. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  80. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  81. package/dist/components/index.js +1 -1
  82. package/dist/components/{p-pwGA4sDj.js → p-9Ap2W-Mi.js} +1 -1
  83. package/dist/components/p-BFVfSW9t.js +1 -0
  84. package/dist/components/{p-BuADVB78.js → p-BHjezpAC.js} +1 -1
  85. package/dist/components/{p-CHHlQceE.js → p-BIEPMPWA.js} +1 -1
  86. package/dist/components/{p-CMvHDxR5.js → p-BKu0I6Io.js} +1 -1
  87. package/dist/components/{p-B3HYnTGx.js → p-B_Zwr4Et.js} +1 -1
  88. package/dist/components/{p-BysikR_g.js → p-Bpv90tfa.js} +1 -1
  89. package/dist/components/p-Bth2l1cy.js +1 -0
  90. package/dist/components/{p-DNbbdJIc.js → p-C7mC7a1z.js} +1 -1
  91. package/dist/components/{p-B2pYDEK7.js → p-CBoDoYDO.js} +1 -1
  92. package/dist/components/p-CErFctrV.js +1 -0
  93. package/dist/components/{p-ClD0nx1l.js → p-CFTyEfB9.js} +1 -1
  94. package/dist/components/{p-1i6Q61TF.js → p-CSr33M9s.js} +1 -1
  95. package/dist/components/{p-C0tnN4yn.js → p-CYMMLsGt.js} +1 -1
  96. package/dist/components/{p-l9RiSWRc.js → p-C_SG4M4z.js} +1 -1
  97. package/dist/components/{p-BE6ymp9E.js → p-C_in6AVN.js} +1 -1
  98. package/dist/components/{p-BAVsc1Ml.js → p-CbS69IvC.js} +1 -1
  99. package/dist/components/{p-BWHQn4fD.js → p-CgSXYw_0.js} +1 -1
  100. package/dist/components/{p-BQ4Okfcm.js → p-CmRF12Fy.js} +1 -1
  101. package/dist/components/{p-DbPS61bp.js → p-CnRfET5y.js} +1 -1
  102. package/dist/components/{p-Bxb7TcZh.js → p-Cvsrc0be.js} +1 -1
  103. package/dist/components/{p-BCxePXvg.js → p-DJ8z7_EG.js} +1 -1
  104. package/dist/components/{p-paSLRXAR.js → p-DJmxpVkK.js} +1 -1
  105. package/dist/components/{p-IDlLs_KA.js → p-DMoFncVl.js} +1 -1
  106. package/dist/components/{p-B-pJW3nY.js → p-DN7MAx-q.js} +1 -1
  107. package/dist/components/{p-E8OA_psS.js → p-DS6NVBvu.js} +1 -1
  108. package/dist/components/{p-BNHhtZUf.js → p-D_56BjcD.js} +1 -1
  109. package/dist/components/{p-CTDPl65u.js → p-Dg1UrMqI.js} +1 -1
  110. package/dist/components/{p-BKV1WAFb.js → p-Di1q4f5E.js} +1 -1
  111. package/dist/components/{p-Bgxca9o5.js → p-OO7xxhkC.js} +1 -1
  112. package/dist/components/{p-vtuEYpc6.js → p-R-Sdglj0.js} +1 -1
  113. package/dist/components/p-Uh9emYrV.js +1 -0
  114. package/dist/components/{p-CSh-DcM7.js → p-f0aBxUBG.js} +1 -1
  115. package/dist/components/{p-BnI9HUOv.js → p-idG6CMO0.js} +1 -1
  116. package/dist/components/p-oYbVr-z0.js +1 -0
  117. package/dist/components/sd-action-modal.js +1 -1
  118. package/dist/components/sd-badge.js +1 -1
  119. package/dist/components/sd-barcode-input.js +1 -1
  120. package/dist/components/sd-button.js +1 -1
  121. package/dist/components/sd-calendar.js +1 -1
  122. package/dist/components/sd-callout.js +1 -1
  123. package/dist/components/sd-card.js +1 -1
  124. package/dist/components/sd-checkbox.js +1 -1
  125. package/dist/components/sd-chip-input.js +1 -1
  126. package/dist/components/sd-chip.js +1 -1
  127. package/dist/components/sd-circle-progress.js +1 -1
  128. package/dist/components/sd-confirm-modal.js +1 -1
  129. package/dist/components/sd-date-box.js +1 -1
  130. package/dist/components/sd-date-picker-trigger.js +1 -1
  131. package/dist/components/sd-date-picker.js +1 -1
  132. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  133. package/dist/components/sd-date-range-picker.js +1 -1
  134. package/dist/components/sd-divider.js +1 -1
  135. package/dist/components/sd-dropdown-button.js +1 -1
  136. package/dist/components/sd-field.js +1 -1
  137. package/dist/components/sd-file-picker.js +1 -1
  138. package/dist/components/sd-floating-portal.js +1 -1
  139. package/dist/components/sd-form.js +1 -1
  140. package/dist/components/sd-ghost-button.js +1 -1
  141. package/dist/components/sd-guide.js +1 -1
  142. package/dist/components/sd-icon.js +1 -1
  143. package/dist/components/sd-input.js +1 -1
  144. package/dist/components/sd-key-value-table.js +1 -1
  145. package/dist/components/sd-linear-progress.js +1 -1
  146. package/dist/components/sd-loading-container.js +1 -1
  147. package/dist/components/sd-loading-modal.js +1 -1
  148. package/dist/components/sd-modal-container.js +1 -1
  149. package/dist/components/sd-number-input.js +1 -1
  150. package/dist/components/sd-pagination.js +1 -1
  151. package/dist/components/sd-popover.js +1 -1
  152. package/dist/components/sd-popup.js +1 -1
  153. package/dist/components/sd-portal.js +1 -1
  154. package/dist/components/sd-radio-button.js +1 -1
  155. package/dist/components/sd-radio-group.js +1 -1
  156. package/dist/components/sd-radio.js +1 -1
  157. package/dist/components/sd-select-list-item-search.js +1 -1
  158. package/dist/components/sd-select-list-item.js +1 -1
  159. package/dist/components/sd-select-listbox.js +1 -1
  160. package/dist/components/sd-select-trigger.js +1 -1
  161. package/dist/components/sd-select.js +1 -1
  162. package/dist/components/sd-switch.js +1 -1
  163. package/dist/components/sd-tabs.js +1 -1
  164. package/dist/components/sd-tag.js +1 -1
  165. package/dist/components/sd-text-link.js +1 -1
  166. package/dist/components/sd-textarea.js +1 -1
  167. package/dist/components/sd-toast-container.js +1 -1
  168. package/dist/components/sd-toast.js +1 -1
  169. package/dist/components/sd-toggle.js +1 -1
  170. package/dist/components/sd-tooltip.js +1 -1
  171. package/dist/design-system/design-system.css +1 -1
  172. package/dist/design-system/design-system.esm.js +1 -1
  173. package/dist/design-system/{p-fbeed0e4.entry.js → p-02f0b906.entry.js} +1 -1
  174. package/dist/design-system/{p-4970f1ff.entry.js → p-0c1d1a15.entry.js} +1 -1
  175. package/dist/design-system/{p-75726e20.entry.js → p-0e014b76.entry.js} +1 -1
  176. package/dist/design-system/{p-91f7be74.entry.js → p-1b5fcf7b.entry.js} +1 -1
  177. package/dist/design-system/{p-5687ed0c.entry.js → p-1ed1bfa1.entry.js} +1 -1
  178. package/dist/design-system/{p-bbd24816.entry.js → p-246aafb9.entry.js} +1 -1
  179. package/dist/design-system/p-26a27312.entry.js +1 -0
  180. package/dist/design-system/{p-5c8f4d9c.entry.js → p-2a4d2ee0.entry.js} +1 -1
  181. package/dist/design-system/{p-b831eded.entry.js → p-2d6a7d7b.entry.js} +1 -1
  182. package/dist/design-system/{p-2553bb1f.entry.js → p-3595cafb.entry.js} +1 -1
  183. package/dist/design-system/p-3cd2751a.entry.js +1 -0
  184. package/dist/design-system/p-4b474538.entry.js +1 -0
  185. package/dist/design-system/{p-bab692c6.entry.js → p-4c85f6f6.entry.js} +1 -1
  186. package/dist/design-system/{p-67f19734.entry.js → p-53fe2741.entry.js} +1 -1
  187. package/dist/design-system/{p-58ec51db.entry.js → p-55c0be7d.entry.js} +1 -1
  188. package/dist/design-system/p-5a257ed9.entry.js +1 -0
  189. package/dist/design-system/{p-a938ffee.entry.js → p-840006b1.entry.js} +1 -1
  190. package/dist/design-system/{p-9c0bca09.entry.js → p-86329ae3.entry.js} +1 -1
  191. package/dist/design-system/{p-287d8016.entry.js → p-8de3b502.entry.js} +1 -1
  192. package/dist/design-system/{p-071e73e0.entry.js → p-8ed1d470.entry.js} +1 -1
  193. package/dist/design-system/{p-D2S9Zafz.js → p-B91K50wC.js} +1 -1
  194. package/dist/design-system/{p-BqWuC4-J.js → p-BPKiBSGr.js} +1 -1
  195. package/dist/design-system/p-BhcvMs8c.js +1 -0
  196. package/dist/design-system/p-Bth2l1cy.js +1 -0
  197. package/dist/design-system/p-Dz490Ukt.js +2 -0
  198. package/dist/design-system/{p-d7e302af.entry.js → p-a631cd78.entry.js} +1 -1
  199. package/dist/design-system/p-adf2f398.entry.js +1 -0
  200. package/dist/design-system/{p-750a9112.entry.js → p-b585f94b.entry.js} +1 -1
  201. package/dist/design-system/p-be54fd3a.entry.js +1 -0
  202. package/dist/design-system/{p-0b8c86c3.entry.js → p-c1066f40.entry.js} +1 -1
  203. package/dist/design-system/{p-26f2f4c2.entry.js → p-c5cffcc6.entry.js} +1 -1
  204. package/dist/design-system/{p-3b3a46cd.entry.js → p-c7d2c195.entry.js} +1 -1
  205. package/dist/design-system/{p-d6b3d78b.entry.js → p-cb6ab65c.entry.js} +1 -1
  206. package/dist/design-system/{p-1230b51b.entry.js → p-d204cac5.entry.js} +1 -1
  207. package/dist/design-system/p-d2ce01ac.entry.js +1 -0
  208. package/dist/design-system/{p-84d0181b.entry.js → p-d51f4170.entry.js} +1 -1
  209. package/dist/design-system/{p-61f5d5ea.entry.js → p-d9f33192.entry.js} +1 -1
  210. package/dist/design-system/{p-c5502585.entry.js → p-e7740a5f.entry.js} +1 -1
  211. package/dist/design-system/p-e85bf462.entry.js +1 -0
  212. package/dist/design-system/{p-d4e2f412.entry.js → p-ea008087.entry.js} +1 -1
  213. package/dist/design-system/{p-70608fec.entry.js → p-ec4ad48c.entry.js} +1 -1
  214. package/dist/design-system/{p-fa967329.entry.js → p-f962e5d2.entry.js} +1 -1
  215. package/dist/esm/{component.datepicker-laVsm9VM.js → component.datepicker-BOxGhKKP.js} +1 -2
  216. package/dist/esm/design-system.js +3 -3
  217. package/dist/esm/{index-DDNBPrZh.js → index-Dz490Ukt.js} +2 -14
  218. package/dist/esm/loader.js +3 -3
  219. package/dist/esm/sd-action-modal.entry.js +1 -1
  220. package/dist/esm/sd-badge.entry.js +1 -1
  221. package/dist/esm/sd-barcode-input.entry.js +1 -1
  222. package/dist/esm/sd-button_2.entry.js +1 -1
  223. package/dist/esm/sd-calendar_2.entry.js +6 -6
  224. package/dist/esm/sd-callout.entry.js +1 -1
  225. package/dist/esm/sd-card.entry.js +1 -1
  226. package/dist/esm/sd-checkbox.entry.js +1 -1
  227. package/dist/esm/sd-chip-input.entry.js +2 -2
  228. package/dist/esm/sd-chip.entry.js +1 -1
  229. package/dist/esm/sd-circle-progress.entry.js +3 -3
  230. package/dist/esm/sd-confirm-modal_2.entry.js +33 -36
  231. package/dist/esm/sd-date-box.entry.js +1 -1
  232. package/dist/esm/{sd-date-picker.config-D-ks6qNf.js → sd-date-picker.config-krRuSUsA.js} +1 -1
  233. package/dist/esm/{sd-date-picker_7.entry.js → sd-date-picker_8.entry.js} +327 -19
  234. package/dist/esm/sd-date-range-picker-calendar.entry.js +4 -4
  235. package/dist/esm/sd-divider.entry.js +3 -3
  236. package/dist/esm/sd-dropdown-button.entry.js +2 -2
  237. package/dist/esm/sd-field_3.entry.js +9 -9
  238. package/dist/esm/sd-form.entry.js +1 -1
  239. package/dist/esm/sd-ghost-button_3.entry.js +3 -3
  240. package/dist/esm/sd-guide.entry.js +2 -2
  241. package/dist/esm/sd-key-value-table.entry.js +87 -17
  242. package/dist/esm/sd-linear-progress.entry.js +3 -3
  243. package/dist/esm/sd-loading-container.entry.js +3 -3
  244. package/dist/esm/sd-modal-container.entry.js +16 -2
  245. package/dist/esm/sd-pagination.entry.js +171 -0
  246. package/dist/esm/sd-popover.entry.js +2 -2
  247. package/dist/esm/sd-popup.entry.js +3 -3
  248. package/dist/esm/sd-radio-button.entry.js +1 -1
  249. package/dist/esm/sd-radio.entry.js +1 -1
  250. package/dist/esm/{sd-select_3.entry.js → sd-select-list-item_4.entry.js} +277 -299
  251. package/dist/esm/sd-switch.entry.js +2 -2
  252. package/dist/esm/sd-tabs.entry.js +2 -2
  253. package/dist/esm/sd-text-link.entry.js +1 -1
  254. package/dist/esm/sd-toast-container.entry.js +2 -2
  255. package/dist/esm/sd-toast.entry.js +3 -3
  256. package/dist/esm/sd-toggle.entry.js +2 -2
  257. package/dist/esm/{system-BJfiMC9H.js → system-Bth2l1cy.js} +1 -7
  258. package/dist/esm/{tooltipArrow-blL0aWPE.js → tooltipArrow-CEHVt90h.js} +1 -1
  259. package/dist/esm/{useDatePicker-DoUg--aq.js → useDatePicker-BG0lUGJG.js} +1 -1
  260. package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts +10 -10
  261. package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts +22 -3
  262. package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts +9 -1
  263. package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +3 -0
  264. package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +2 -0
  265. package/dist/types/components.d.ts +17 -696
  266. package/dist/types/index.d.ts +0 -1
  267. package/hydrate/index.js +173 -2217
  268. package/hydrate/index.mjs +173 -2217
  269. package/package.json +1 -1
  270. package/dist/cjs/component.table-POXY492T.js +0 -72
  271. package/dist/cjs/constants-DJRV1upE.js +0 -5
  272. package/dist/cjs/sd-pagination_4.cjs.entry.js +0 -858
  273. package/dist/cjs/sd-select-list-item_2.cjs.entry.js +0 -173
  274. package/dist/cjs/sd-select.config-omyxekRa.js +0 -144
  275. package/dist/cjs/sd-table.cjs.entry.js +0 -956
  276. package/dist/cjs/sd-table.config-DFy_S4bc.js +0 -83
  277. package/dist/cjs/sd-td.cjs.entry.js +0 -201
  278. package/dist/collection/components/sd-table/constants.js +0 -1
  279. package/dist/collection/components/sd-table/sd-table.config.js +0 -88
  280. package/dist/collection/components/sd-table/sd-table.css +0 -180
  281. package/dist/collection/components/sd-table/sd-table.js +0 -1709
  282. package/dist/collection/components/sd-table/sd-table.stories.helpers.js +0 -242
  283. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +0 -10
  284. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +0 -110
  285. package/dist/collection/components/sd-table/sd-td/sd-td.css +0 -15
  286. package/dist/collection/components/sd-table/sd-td/sd-td.js +0 -381
  287. package/dist/collection/components/sd-table/sd-thead/sd-thead.css +0 -186
  288. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +0 -629
  289. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +0 -145
  290. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +0 -530
  291. package/dist/components/p-5pkzwl5N.js +0 -1
  292. package/dist/components/p-B6ezDhRg.js +0 -1
  293. package/dist/components/p-BJfiMC9H.js +0 -1
  294. package/dist/components/p-BSxleKw8.js +0 -1
  295. package/dist/components/p-BUgGuigd.js +0 -1
  296. package/dist/components/p-BZXgIBUG.js +0 -1
  297. package/dist/components/p-Cf62Nvrx.js +0 -1
  298. package/dist/components/p-DckXBMgo.js +0 -1
  299. package/dist/components/p-DmAnTwUx.js +0 -1
  300. package/dist/components/p-PFLrdhQj.js +0 -1
  301. package/dist/components/p-sZMi_32I.js +0 -1
  302. package/dist/components/p-yxZBh03f.js +0 -1
  303. package/dist/components/sd-table.d.ts +0 -11
  304. package/dist/components/sd-table.js +0 -1
  305. package/dist/components/sd-tbody.d.ts +0 -11
  306. package/dist/components/sd-tbody.js +0 -1
  307. package/dist/components/sd-td.d.ts +0 -11
  308. package/dist/components/sd-td.js +0 -1
  309. package/dist/components/sd-thead.d.ts +0 -11
  310. package/dist/components/sd-thead.js +0 -1
  311. package/dist/components/sd-tr.d.ts +0 -11
  312. package/dist/components/sd-tr.js +0 -1
  313. package/dist/design-system/p-0048de73.entry.js +0 -1
  314. package/dist/design-system/p-20f69606.entry.js +0 -1
  315. package/dist/design-system/p-27197194.entry.js +0 -1
  316. package/dist/design-system/p-5pkzwl5N.js +0 -1
  317. package/dist/design-system/p-7abf62f3.entry.js +0 -1
  318. package/dist/design-system/p-7ae27a26.entry.js +0 -1
  319. package/dist/design-system/p-94d6b7b4.entry.js +0 -1
  320. package/dist/design-system/p-9b21773a.entry.js +0 -1
  321. package/dist/design-system/p-BJfiMC9H.js +0 -1
  322. package/dist/design-system/p-CRWmn35N.js +0 -1
  323. package/dist/design-system/p-Cf62Nvrx.js +0 -1
  324. package/dist/design-system/p-CuAh9n2o.js +0 -1
  325. package/dist/design-system/p-DDNBPrZh.js +0 -2
  326. package/dist/design-system/p-a12d7362.entry.js +0 -1
  327. package/dist/design-system/p-c81898a0.entry.js +0 -1
  328. package/dist/design-system/p-dbfa3931.entry.js +0 -1
  329. package/dist/design-system/p-f16985c9.entry.js +0 -1
  330. package/dist/design-system/p-sZMi_32I.js +0 -1
  331. package/dist/esm/component.table-5pkzwl5N.js +0 -70
  332. package/dist/esm/constants-sZMi_32I.js +0 -3
  333. package/dist/esm/sd-pagination_4.entry.js +0 -853
  334. package/dist/esm/sd-select-list-item_2.entry.js +0 -170
  335. package/dist/esm/sd-select.config-CeHGlqOT.js +0 -129
  336. package/dist/esm/sd-table.config-DmOBlnsM.js +0 -70
  337. package/dist/esm/sd-table.entry.js +0 -954
  338. package/dist/esm/sd-td.entry.js +0 -199
  339. package/dist/types/components/sd-table/constants.d.ts +0 -50
  340. package/dist/types/components/sd-table/sd-table.config.d.ts +0 -71
  341. package/dist/types/components/sd-table/sd-table.d.ts +0 -199
  342. package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts +0 -39
  343. package/dist/types/components/sd-table/sd-tbody/sd-tbody.d.ts +0 -15
  344. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +0 -38
  345. package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +0 -62
  346. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +0 -54
  347. /package/dist/components/{p-laVsm9VM.js → p-BOxGhKKP.js} +0 -0
  348. /package/dist/design-system/{p-laVsm9VM.js → p-BOxGhKKP.js} +0 -0
package/hydrate/index.mjs CHANGED
@@ -129,12 +129,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
129
129
  /*hydrateAppClosure start*/
130
130
 
131
131
 
132
- var node_crypto = require('node:crypto');
133
-
134
132
  const NAMESPACE = 'design-system';
135
133
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
136
134
 
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-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--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-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--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-ghost-button-ghost-button-group-gap:8px;--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-text-link-text-link-group-horizontal-normal:16px;--sd-text-link-text-link-group-horizontal-wide:24px;--sd-text-link-text-link-group-vertical-normal:4px;--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-toggle-toggle-group-gap:8px;--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-checkbox-checkbox-group-gap-horizontal:24px;--sd-checkbox-checkbox-group-gap-vertical:8px;--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-radio-group-gap-horizontal:24px;--sd-radio-radio-group-gap-vertical:8px;--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:16px;--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:16px;--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-number-input-number-input-stepper-border-default:#93C4FF;--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:#222222;--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-tag-tag-group-gap:8px;--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-overlay-overlay-header-bg:#FFFFFF;--sd-overlay-overlay-header-padding-x:24px;--sd-overlay-overlay-header-padding-y:20px;--sd-overlay-overlay-header-gap:12px;--sd-overlay-overlay-header-title-color:#033F59;--sd-overlay-overlay-header-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-overlay-overlay-header-title-typography-font-weight:700;--sd-overlay-overlay-header-title-typography-font-size:16px;--sd-overlay-overlay-header-title-typography-text-decoration:none;--sd-overlay-overlay-header-title-typography-line-height:26px;--sd-overlay-overlay-footer-bg-default:#FFFFFF;--sd-overlay-overlay-footer-bg-neutral:#F6F6F6;--sd-overlay-overlay-footer-padding-x:20px;--sd-overlay-overlay-footer-padding-y:8px;--sd-overlay-overlay-footer-gap:16px;--sd-overlay-overlay-footer-shadow-x:0px;--sd-overlay-overlay-footer-shadow-y:0px;--sd-overlay-overlay-footer-shadow-blur:24px;--sd-overlay-overlay-footer-shadow-spread:0px;--sd-overlay-overlay-footer-shadow-color:rgba(34,34,34,0.2);--sd-overlay-overlay-footer-shadow-type:dropShadow;--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-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-header-padding-x:16px;--sd-popup-popup-header-padding-y:12px;--sd-popup-popup-bg:#EEEEEE;--sd-drawer-drawer-bg:#F6F6F6;--sd-drawer-drawer-body-border:#E1E1E1;--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;--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-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-progress-progress-inverse-color:#FFFFFF;--sd-progress-progress-inverse-opacity:40%;--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-padding-y-dense:6px;--sd-table-table-body-padding-y-default:8px;--sd-table-table-body-padding-x-default:8px;--sd-table-table-body-padding-x-wide:16px;--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-y:8px;--sd-table-table-key-value-body-padding-x-default:8px;--sd-table-table-key-value-body-padding-x-wide:16px;--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-pagination-pagination-simple-gap:8px;--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-stepper-stepper-sm-sequence-size:20px;--sd-stepper-stepper-sm-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-active-font-weight:700;--sd-stepper-stepper-sm-typography-active-font-size:12px;--sd-stepper-stepper-sm-typography-active-line-height:20px;--sd-stepper-stepper-sm-typography-active-text-decoration:none;--sd-stepper-stepper-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-stepper-stepper-sm-typography-default-font-weight:500;--sd-stepper-stepper-sm-typography-default-font-size:12px;--sd-stepper-stepper-sm-typography-default-line-height:20px;--sd-stepper-stepper-sm-typography-default-text-decoration:none;--sd-stepper-stepper-dash-width:20px;--sd-stepper-stepper-dash-color:#888888;--sd-stepper-stepper-lg-sequence-size:24px;--sd-stepper-stepper-lg-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-active-font-weight:700;--sd-stepper-stepper-lg-typography-active-font-size:14px;--sd-stepper-stepper-lg-typography-active-line-height:24px;--sd-stepper-stepper-lg-typography-active-text-decoration:none;--sd-stepper-stepper-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-stepper-stepper-lg-typography-default-font-weight:500;--sd-stepper-stepper-lg-typography-default-font-size:14px;--sd-stepper-stepper-lg-typography-default-line-height:24px;--sd-stepper-stepper-lg-typography-default-text-decoration:none;--sd-stepper-stepper-container-gap:12px;--sd-stepper-stepper-item-gap:8px;--sd-stepper-stepper-sequence-radius:9999px;--sd-stepper-stepper-sequence-border-active:#93C4FF;--sd-stepper-stepper-sequence-border-default:#E1E1E1;--sd-stepper-stepper-sequence-border-completed:#CCCCCC;--sd-stepper-stepper-sequence-border-witdh:1px;--sd-stepper-stepper-sequence-icon:12px;--sd-stepper-stepper-sequence-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sequence-typography-font-weight:700;--sd-stepper-stepper-sequence-typography-font-size:12px;--sd-stepper-stepper-sequence-typography-line-height:20px;--sd-stepper-stepper-sequence-typography-text-decoration:none;--sd-stepper-stepper-sequence-bg-active:#D9EAFF;--sd-stepper-stepper-sequence-bg-default:#FFFFFF;--sd-stepper-stepper-sequence-bg-completed:#E1E1E1;--sd-stepper-stepper-sequence-text-active:#0075FF;--sd-stepper-stepper-sequence-text-default:#AAAAAA;--sd-stepper-stepper-text-active:#0075FF;--sd-stepper-stepper-text-default:#888888}.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}";
135
+ 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-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--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-neutral-bright:#F9F9F9;--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-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--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-ghost-button-ghost-button-group-gap:8px;--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-text-link-text-link-group-horizontal-normal:16px;--sd-text-link-text-link-group-horizontal-wide:24px;--sd-text-link-text-link-group-vertical-normal:4px;--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-toggle-toggle-group-gap:8px;--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-checkbox-checkbox-group-gap-horizontal:24px;--sd-checkbox-checkbox-group-gap-vertical:8px;--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-radio-group-gap-horizontal:24px;--sd-radio-radio-group-gap-vertical:8px;--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:16px;--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:16px;--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-number-input-number-input-stepper-border-default:#93C4FF;--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-datepicker-datepicker-calendar-time-bg-default:#F9F9F9;--sd-datepicker-datepicker-calendar-time-bg-selected:#F5FAFF;--sd-datepicker-datepicker-calendar-time-date-label:#222222;--sd-datepicker-datepicker-calendar-time-date-unit:#888888;--sd-datepicker-datepicker-calendar-time-date-gap:6px;--sd-datepicker-datepicker-calendar-time-radius:8px;--sd-datepicker-datepicker-calendar-time-padding-x:16px;--sd-datepicker-datepicker-calendar-time-padding-y:12px;--sd-datepicker-datepicker-calendar-time-gap:12px;--sd-datepicker-datepicker-calendar-time-section-gap:12px;--sd-datepicker-datepicker-calendar-time-unit-gap:2px;--sd-datepicker-datepicker-calendar-time-typography-font-family:Pretendard Variable, Pretendard, -apple-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-time-typography-font-weight:500;--sd-datepicker-datepicker-calendar-time-typography-font-size:12px;--sd-datepicker-datepicker-calendar-time-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-time-typography-line-height:20px;--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:#222222;--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-timepicker-timepicker-border-default:#AAAAAA;--sd-timepicker-timepicker-border-focus:#0075FF;--sd-timepicker-timepicker-border-disabled:#CCCCCC;--sd-timepicker-timepicker-border-width:1px;--sd-timepicker-timepicker-bg-default:#FFFFFF;--sd-timepicker-timepicker-bg-disabled:#E1E1E1;--sd-timepicker-timepicker-icon-default:#888888;--sd-timepicker-timepicker-icon-disabled:#BBBBBB;--sd-timepicker-timepicker-text-default:#222222;--sd-timepicker-timepicker-text-disabled:#888888;--sd-timepicker-timepicker-selector-bg:#FFFFFF;--sd-timepicker-timepicker-selector-range-heading-color:#555555;--sd-timepicker-timepicker-selector-range-heading-gap:16px;--sd-timepicker-timepicker-selector-range-padding-x-y:24px;--sd-timepicker-timepicker-selector-range-panel-gap:24px;--sd-timepicker-timepicker-selector-range-section-gap:12px;--sd-timepicker-timepicker-selector-radius:8px;--sd-timepicker-timepicker-selector-section-padding-x:16px;--sd-timepicker-timepicker-selector-section-padding-y:12px;--sd-timepicker-timepicker-selector-time-gap:4px;--sd-timepicker-timepicker-selector-time-column-gap:8px;--sd-timepicker-timepicker-selector-input-width:40px;--sd-timepicker-timepicker-selector-colon-size:16px;--sd-timepicker-timepicker-sm-height:28px;--sd-timepicker-timepicker-sm-padding-x:12px;--sd-timepicker-timepicker-sm-gap:8px;--sd-timepicker-timepicker-sm-icon:16px;--sd-timepicker-timepicker-sm-radius:4px;--sd-timepicker-timepicker-md-height:36px;--sd-timepicker-timepicker-md-padding-x:16px;--sd-timepicker-timepicker-md-gap:12px;--sd-timepicker-timepicker-md-icon:20px;--sd-timepicker-timepicker-md-radius:6px;--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-tag-tag-group-gap:8px;--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-overlay-overlay-header-bg:#FFFFFF;--sd-overlay-overlay-header-padding-x:24px;--sd-overlay-overlay-header-padding-y:20px;--sd-overlay-overlay-header-gap:12px;--sd-overlay-overlay-header-title-color:#033F59;--sd-overlay-overlay-header-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-overlay-overlay-header-title-typography-font-weight:700;--sd-overlay-overlay-header-title-typography-font-size:16px;--sd-overlay-overlay-header-title-typography-text-decoration:none;--sd-overlay-overlay-header-title-typography-line-height:26px;--sd-overlay-overlay-footer-bg-default:#FFFFFF;--sd-overlay-overlay-footer-bg-neutral:#F6F6F6;--sd-overlay-overlay-footer-padding-x:20px;--sd-overlay-overlay-footer-padding-y:8px;--sd-overlay-overlay-footer-gap:16px;--sd-overlay-overlay-footer-shadow-x:0px;--sd-overlay-overlay-footer-shadow-y:0px;--sd-overlay-overlay-footer-shadow-blur:24px;--sd-overlay-overlay-footer-shadow-spread:0px;--sd-overlay-overlay-footer-shadow-color:rgba(34,34,34,0.2);--sd-overlay-overlay-footer-shadow-type:dropShadow;--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-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-header-padding-x:16px;--sd-popup-popup-header-padding-y:12px;--sd-popup-popup-bg:#EEEEEE;--sd-drawer-drawer-bg:#F6F6F6;--sd-drawer-drawer-body-border:#E1E1E1;--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;--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-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-progress-progress-inverse-color:#FFFFFF;--sd-progress-progress-inverse-opacity:40%;--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-padding-y-dense:6px;--sd-table-table-body-padding-y-default:8px;--sd-table-table-body-padding-x-default:8px;--sd-table-table-body-padding-x-wide:16px;--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-y:8px;--sd-table-table-key-value-body-padding-x-default:8px;--sd-table-table-key-value-body-padding-x-wide:16px;--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-pagination-pagination-simple-gap:8px;--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-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-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-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-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-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-stepper-stepper-sm-sequence-size:20px;--sd-stepper-stepper-sm-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-active-font-weight:700;--sd-stepper-stepper-sm-typography-active-font-size:12px;--sd-stepper-stepper-sm-typography-active-line-height:20px;--sd-stepper-stepper-sm-typography-active-text-decoration:none;--sd-stepper-stepper-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-stepper-stepper-sm-typography-default-font-weight:500;--sd-stepper-stepper-sm-typography-default-font-size:12px;--sd-stepper-stepper-sm-typography-default-line-height:20px;--sd-stepper-stepper-sm-typography-default-text-decoration:none;--sd-stepper-stepper-dash-width:20px;--sd-stepper-stepper-dash-color:#888888;--sd-stepper-stepper-lg-sequence-size:24px;--sd-stepper-stepper-lg-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-active-font-weight:700;--sd-stepper-stepper-lg-typography-active-font-size:14px;--sd-stepper-stepper-lg-typography-active-line-height:24px;--sd-stepper-stepper-lg-typography-active-text-decoration:none;--sd-stepper-stepper-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-stepper-stepper-lg-typography-default-font-weight:500;--sd-stepper-stepper-lg-typography-default-font-size:14px;--sd-stepper-stepper-lg-typography-default-line-height:24px;--sd-stepper-stepper-lg-typography-default-text-decoration:none;--sd-stepper-stepper-container-gap:12px;--sd-stepper-stepper-item-gap:8px;--sd-stepper-stepper-sequence-radius:9999px;--sd-stepper-stepper-sequence-border-active:#93C4FF;--sd-stepper-stepper-sequence-border-default:#E1E1E1;--sd-stepper-stepper-sequence-border-completed:#CCCCCC;--sd-stepper-stepper-sequence-border-witdh:1px;--sd-stepper-stepper-sequence-icon:12px;--sd-stepper-stepper-sequence-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sequence-typography-font-weight:700;--sd-stepper-stepper-sequence-typography-font-size:12px;--sd-stepper-stepper-sequence-typography-line-height:20px;--sd-stepper-stepper-sequence-typography-text-decoration:none;--sd-stepper-stepper-sequence-bg-active:#D9EAFF;--sd-stepper-stepper-sequence-bg-default:#FFFFFF;--sd-stepper-stepper-sequence-bg-completed:#E1E1E1;--sd-stepper-stepper-sequence-text-active:#0075FF;--sd-stepper-stepper-sequence-text-default:#AAAAAA;--sd-stepper-stepper-text-active:#0075FF;--sd-stepper-stepper-text-default:#888888;--sd-gnb-light-bg:#FFFFFF;--sd-gnb-light-divider:#E1E1E1;--sd-gnb-light-item-bg-default:#FFFFFF;--sd-gnb-light-item-bg-hover:#F6F6F6;--sd-gnb-light-item-bg-selected:#EFF6FF;--sd-gnb-light-item-fg-default:#222222;--sd-gnb-light-item-fg-hover:#222222;--sd-gnb-light-item-fg-selected:#0075FF;--sd-gnb-light-item-chevron:#555555;--sd-gnb-light-top-icon:#888888;--sd-gnb-dark-bg:#001B39;--sd-gnb-dark-divider:#004177;--sd-gnb-dark-item-bg-default:#001B39;--sd-gnb-dark-item-bg-hover:#07284A;--sd-gnb-dark-item-bg-selected:#002B5E;--sd-gnb-dark-item-fg-default:#FFFFFF;--sd-gnb-dark-item-fg-hover:#FFFFFF;--sd-gnb-dark-item-fg-selected:#93C4FF;--sd-gnb-dark-item-chevron:#AAAAAA;--sd-gnb-dark-top-icon:#FFFFFF}.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
136
 
139
137
  /*
140
138
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5133,15 +5131,6 @@ var registerComponents = (Cstrs) => {
5133
5131
  }
5134
5132
  };
5135
5133
  var win = window;
5136
- var readTask = (cb) => {
5137
- nextTick(() => {
5138
- try {
5139
- cb();
5140
- } catch (e) {
5141
- consoleError(e);
5142
- }
5143
- });
5144
- };
5145
5134
  var writeTask = (cb) => {
5146
5135
  nextTick(() => {
5147
5136
  try {
@@ -5424,13 +5413,13 @@ class SdBadge {
5424
5413
  }
5425
5414
 
5426
5415
  /* @ts-self-types="./index.d.ts" */
5427
- let urlAlphabet$1 =
5416
+ let urlAlphabet =
5428
5417
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
5429
- let nanoid$1 = (size = 21) => {
5418
+ let nanoid = (size = 21) => {
5430
5419
  let id = '';
5431
5420
  let i = size | 0;
5432
5421
  while (i--) {
5433
- id += urlAlphabet$1[(Math.random() * 64) | 0];
5422
+ id += urlAlphabet[(Math.random() * 64) | 0];
5434
5423
  }
5435
5424
  return id
5436
5425
  };
@@ -5573,7 +5562,7 @@ class SdBarcodeInput {
5573
5562
  nativeEl = undefined;
5574
5563
  formField;
5575
5564
  /** 폼 연동용 name 속성 */
5576
- name = nanoid$1();
5565
+ name = nanoid();
5577
5566
  /** 입력값 변경 시 발생합니다. */
5578
5567
  input;
5579
5568
  /** 포커스 진입 시 발생합니다. */
@@ -6790,8 +6779,7 @@ const datepicker = {
6790
6779
  group: {
6791
6780
  gap: "12"
6792
6781
  }
6793
- }
6794
- }
6782
+ }}
6795
6783
  };
6796
6784
  var datepickerTokens = {
6797
6785
  datepicker: datepicker
@@ -7986,13 +7974,7 @@ const color = {
7986
7974
  },
7987
7975
  divider: {
7988
7976
  "default": "#E1E1E1"
7989
- },
7990
- blue: {
7991
- strong: "#0075FF"},
7992
- darkblue: {
7993
- strong: "#006AC1"},
7994
- grey: {
7995
- strong: "#737373"}};
7977
+ }};
7996
7978
  const shadow = {
7997
7979
  spread: {
7998
7980
  md: {
@@ -8152,7 +8134,7 @@ class SdChipInput {
8152
8134
  /** 입력 placeholder */
8153
8135
  placeholder = '입력해 주세요.';
8154
8136
  /** 폼 연동용 name 속성 */
8155
- name = nanoid$1();
8137
+ name = nanoid();
8156
8138
  /** 유효성 검사 규칙 목록 */
8157
8139
  rules = [];
8158
8140
  /** 에러 상태 여부 */
@@ -8755,7 +8737,7 @@ const CIRCLE_PROGRESS_RADIUS = 34;
8755
8737
  const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
8756
8738
  const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;
8757
8739
 
8758
- const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:8px}sd-circle-progress .sd-circle-progress{width:80px;height:80px}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear}sd-circle-progress .sd-circle-progress__percent{text-align:center;color:var(--sd-circle-progress-percent-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:16px;font-weight:700;line-height:26px}sd-circle-progress .sd-circle-progress__label{text-align:center;color:var(--sd-circle-progress-label-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:12px;font-weight:400;line-height:20px}sd-circle-progress{}sd-circle-progress[inner-value]{position:relative}sd-circle-progress[inner-value] .sd-circle-progress__percent{position:absolute;top:40px;left:50%;transform:translate(-50%, -50%)}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
8740
+ const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:8px}sd-circle-progress .sd-circle-progress{width:80px;height:80px}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear}sd-circle-progress .sd-circle-progress__percent{text-align:center;color:var(--sd-circle-progress-percent-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:16px;font-weight:700;line-height:26px}sd-circle-progress .sd-circle-progress__label{text-align:center;color:var(--sd-circle-progress-label-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:12px;font-weight:400;line-height:20px}sd-circle-progress{}sd-circle-progress[inner-value]{position:relative}sd-circle-progress[inner-value] .sd-circle-progress__percent{position:absolute;top:40px;left:50%;transform:translate(-50%, -50%);line-height:normal}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
8759
8741
 
8760
8742
  class SdCircleProgress {
8761
8743
  constructor(hostRef) {
@@ -8830,7 +8812,7 @@ const CONFIRM_MODAL_ICON_COLOR = {
8830
8812
  const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
8831
8813
  const SUB_BUTTON_PRESET = 'neutral_outline_md';
8832
8814
 
8833
- const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
8815
+ const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__option{text-align:center}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
8834
8816
 
8835
8817
  class SdConfirmModal {
8836
8818
  constructor(hostRef) {
@@ -8840,8 +8822,8 @@ class SdConfirmModal {
8840
8822
  this.ok = createEvent(this, "sdOk", 7);
8841
8823
  }
8842
8824
  get el() { return getElement(this); }
8843
- hasSlottedContent = false;
8844
- customContentRef;
8825
+ hasTagSlot = false;
8826
+ hasOptionSlot = false;
8845
8827
  slotObserver;
8846
8828
  /** 모달 타입 (아이콘·버튼 색상 결정) */
8847
8829
  type = 'positive';
@@ -8859,14 +8841,12 @@ class SdConfirmModal {
8859
8841
  mainButtonLabel = '확인';
8860
8842
  /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
8861
8843
  subButtonLabel = '';
8862
- /** 콘텐츠 박스에 표시할 태그 프리셋 */
8844
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
8863
8845
  tagPreset = 'square_sm_grey';
8864
- /** 콘텐츠 박스에 표시할 태그 레이블 */
8846
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
8865
8847
  tagLabel = '';
8866
- /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
8848
+ /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
8867
8849
  slotLabel = '';
8868
- /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
8869
- tagContents;
8870
8850
  /** 닫기 버튼 클릭 시 발생합니다. */
8871
8851
  close;
8872
8852
  /** 취소 버튼 클릭 시 발생합니다. */
@@ -8885,17 +8865,6 @@ class SdConfirmModal {
8885
8865
  characterData: true,
8886
8866
  });
8887
8867
  }
8888
- componentDidRender() {
8889
- if (this.customContentRef && this.tagContents instanceof HTMLElement) {
8890
- if (typeof this.customContentRef.replaceChildren === 'function') {
8891
- this.customContentRef.replaceChildren(this.tagContents);
8892
- }
8893
- else {
8894
- this.customContentRef.innerHTML = '';
8895
- this.customContentRef.appendChild(this.tagContents);
8896
- }
8897
- }
8898
- }
8899
8868
  disconnectedCallback() {
8900
8869
  this.slotObserver?.disconnect();
8901
8870
  }
@@ -8905,29 +8874,39 @@ class SdConfirmModal {
8905
8874
  get resolvedMainButton() {
8906
8875
  return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
8907
8876
  }
8908
- get hasTagContent() {
8909
- return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
8910
- (this.slotLabel !== undefined && this.slotLabel !== ''));
8877
+ /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
8878
+ get showTagBox() {
8879
+ return this.tagLabel !== '' || this.hasTagSlot;
8911
8880
  }
8912
- get showContentBox() {
8913
- return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
8881
+ /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
8882
+ get showOption() {
8883
+ return this.slotLabel !== '' || this.hasOptionSlot;
8914
8884
  }
8885
+ /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
8915
8886
  syncHasSlottedContent() {
8916
- const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
8917
- node.classList.contains('sd-confirm-modal')) &&
8918
- (node.nodeType === Node.ELEMENT_NODE ||
8919
- (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
8920
- if (hasSlottedContent !== this.hasSlottedContent) {
8921
- this.hasSlottedContent = hasSlottedContent;
8922
- }
8887
+ let hasTagSlot = false;
8888
+ let hasOptionSlot = false;
8889
+ Array.from(this.el.children).forEach(node => {
8890
+ if (!(node instanceof HTMLElement))
8891
+ return;
8892
+ if (node.classList.contains('sd-confirm-modal'))
8893
+ return;
8894
+ const slot = node.getAttribute('slot');
8895
+ if (slot === 'tag')
8896
+ hasTagSlot = true;
8897
+ else if (slot === 'option')
8898
+ hasOptionSlot = true;
8899
+ });
8900
+ if (hasTagSlot !== this.hasTagSlot)
8901
+ this.hasTagSlot = hasTagSlot;
8902
+ if (hasOptionSlot !== this.hasOptionSlot)
8903
+ this.hasOptionSlot = hasOptionSlot;
8923
8904
  }
8924
8905
  render() {
8925
8906
  const type = this.resolvedType;
8926
8907
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
8927
8908
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
8928
- return (hAsync("div", { key: '396bef971efaab6638586fa1a067eae54c1897f4', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '4716168808371f4515bf763e77198386fc9fe7cf', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '1ab7ca2c5262374a0823a8e5c501758433c25051', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'a190f975d27153e4d928c95395f13ecd8ba0667a', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'da7821097377b7a9781df87ae40b2439a103ff9b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'ced23315888ad43b3d91b8bb5388b77e517dd52a', 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: '5bdbe145bdb6639ebe582e7295f413a4b1990c15', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
8929
- this.customContentRef = el;
8930
- } })) : (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: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8909
+ return (hAsync("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (hAsync("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, hAsync("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (hAsync("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, hAsync("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (hAsync("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), hAsync("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8931
8910
  }
8932
8911
  static get style() { return sdConfirmModalCss(); }
8933
8912
  static get cmpMeta() { return {
@@ -8945,8 +8924,8 @@ class SdConfirmModal {
8945
8924
  "tagPreset": [1, "tag-preset"],
8946
8925
  "tagLabel": [1, "tag-label"],
8947
8926
  "slotLabel": [1, "slot-label"],
8948
- "tagContents": [16],
8949
- "hasSlottedContent": [32]
8927
+ "hasTagSlot": [32],
8928
+ "hasOptionSlot": [32]
8950
8929
  },
8951
8930
  "$listeners$": undefined,
8952
8931
  "$lazyBundleId$": "-",
@@ -9182,7 +9161,7 @@ class SdDatePicker {
9182
9161
  formField;
9183
9162
  closeAnimationTimer;
9184
9163
  /** 폼 연동용 name 속성 */
9185
- name = nanoid$1();
9164
+ name = nanoid();
9186
9165
  watchIsOpen(newValue) {
9187
9166
  this.focused = newValue;
9188
9167
  }
@@ -9247,9 +9226,9 @@ class SdDatePicker {
9247
9226
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9248
9227
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9249
9228
  };
9250
- return (hAsync("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', 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: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
9229
+ return (hAsync("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', 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: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
9251
9230
  this.triggerRef = el;
9252
- } }, hAsync("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9231
+ } }, hAsync("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9253
9232
  }
9254
9233
  static get watchers() { return {
9255
9234
  "isOpen": [{
@@ -9337,7 +9316,7 @@ class SdDatePickerTrigger {
9337
9316
  ? DATEPICKER_COLORS.icon.disabled
9338
9317
  : DATEPICKER_COLORS.icon.default,
9339
9318
  };
9340
- return (hAsync("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9319
+ return (hAsync("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9341
9320
  'sd-date-picker-trigger': true,
9342
9321
  'sd-date-picker-trigger--disabled': this.disabled,
9343
9322
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -9345,7 +9324,7 @@ class SdDatePickerTrigger {
9345
9324
  e.preventDefault();
9346
9325
  this.handleClick();
9347
9326
  }
9348
- } }, hAsync("sd-icon", { key: '60e23369acd45ae6a74b076c08309644a10aceb3', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '5db37f4d71914215e4ae4236791dd3e0eda10c96', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9327
+ } }, hAsync("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9349
9328
  }
9350
9329
  static get style() { return sdDatePickerTriggerCss(); }
9351
9330
  static get cmpMeta() { return {
@@ -9429,7 +9408,7 @@ class SdDateRangePicker {
9429
9408
  formField;
9430
9409
  closeAnimationTimer;
9431
9410
  /** 폼 연동용 name 속성 */
9432
- name = nanoid$1();
9411
+ name = nanoid();
9433
9412
  watchIsOpen(newValue) {
9434
9413
  this.focused = newValue;
9435
9414
  }
@@ -9794,7 +9773,7 @@ class SdDateRangePickerCalendar {
9794
9773
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
9795
9774
  '--range-divider': RANGE_LAYOUT.divider,
9796
9775
  };
9797
- return (hAsync(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, hAsync("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9776
+ return (hAsync(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, hAsync("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9798
9777
  }
9799
9778
  static get watchers() { return {
9800
9779
  "value": [{
@@ -9837,7 +9816,7 @@ class SdDivider {
9837
9816
  const hostStyle = {
9838
9817
  '--sd-divider-color': DIVIDER_COLORS.default,
9839
9818
  };
9840
- return (hAsync(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, hAsync("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9819
+ return (hAsync(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, hAsync("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9841
9820
  }
9842
9821
  static get style() { return sdDividerCss(); }
9843
9822
  static get cmpMeta() { return {
@@ -10517,19 +10496,19 @@ class SdField {
10517
10496
  : {}),
10518
10497
  }
10519
10498
  : {};
10520
- return (hAsync("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
10499
+ return (hAsync("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
10521
10500
  'sd-field': true,
10522
10501
  'sd-field--has-label': this.label !== '',
10523
10502
  'sd-field--has-addon': addon !== '',
10524
10503
  'sd-field--borderless': this.borderless,
10525
10504
  [this.fieldStatus]: this.fieldStatus !== '',
10526
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, hAsync("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
10505
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, hAsync("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
10527
10506
  'sd-field__control': true,
10528
10507
  'sd-field__control--has-addon': addon !== '',
10529
10508
  }, style: this.width !== '' && this.width !== 0
10530
10509
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
10531
- : {} }, addon && (hAsync("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
10532
- 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: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), 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))))));
10510
+ : {} }, addon && (hAsync("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
10511
+ 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: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), 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))))));
10533
10512
  }
10534
10513
  renderLabel(label) {
10535
10514
  if (label == null || label === '')
@@ -10656,7 +10635,7 @@ class SdFilePicker {
10656
10635
  maxFiles;
10657
10636
  // sd-field 패스스루 props
10658
10637
  /** 폼 연동용 name 속성 */
10659
- name = nanoid$1();
10638
+ name = nanoid();
10660
10639
  /** 레이블 텍스트 */
10661
10640
  label = '';
10662
10641
  /** 레이블 너비 */
@@ -10897,24 +10876,24 @@ class SdFilePicker {
10897
10876
  '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
10898
10877
  };
10899
10878
  const showListbox = this.multiple && this.useMultipleListBox;
10900
- const content = (hAsync("div", { key: '692bb28ba1adaa90317e18c6b824ab7d2287eb96', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
10879
+ const content = (hAsync("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
10901
10880
  if (e.key === 'Enter' || e.key === ' ') {
10902
10881
  e.preventDefault();
10903
10882
  this.handleClick();
10904
10883
  }
10905
- } }, hAsync("input", { key: '7a1cddff8097952c0c9eda9ae8d1b46b4a18967e', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { key: '2f7dffb5bfc39efb0eace252a45aaaa23091d337', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '1a6ae3daa59c7befebcfcfdcbbb2c46a32c6c40c', ref: el => (this.fileNamesRef = el), class: {
10884
+ } }, hAsync("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
10906
10885
  'sd-file-picker__text': true,
10907
10886
  'sd-file-picker__text--placeholder': !hasFiles,
10908
10887
  'sd-file-picker__text--active': hasFiles,
10909
- } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: '895eafa47b1e1d851794fd471b304f8458bcac0f', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10888
+ } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10910
10889
  'sd-file-picker__caret': true,
10911
10890
  'sd-file-picker__caret--open': this.isListboxOpen,
10912
- }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '38d3fe31be05ae66a170671ffb4855bce4984630', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'bb94815d7149ce9f1117828f893224c8bc1dbc50', class: "sd-file-picker__tooltip" }, displayText))));
10913
- return (hAsync("div", { key: '3ada174508214a9fafd4f7f228ff52eb60aa76e4', class: {
10891
+ }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
10892
+ return (hAsync("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
10914
10893
  'sd-file-picker__wrapper': true,
10915
10894
  'sd-file-picker--inline': this.inline,
10916
10895
  'sd-file-picker--inline-disabled': this.inline && this.disabled,
10917
- }, style: cssVars }, hAsync("sd-field", { key: '29314b3ba5fc7c6b7d2f1a93a14381d9fb91bcfc', borderless: this.inline, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
10896
+ }, style: cssVars }, hAsync("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
10918
10897
  }
10919
10898
  static get watchers() { return {
10920
10899
  "value": [{
@@ -11146,7 +11125,7 @@ class SdFloatingPopover {
11146
11125
  }
11147
11126
  }
11148
11127
  render() {
11149
- return hAsync("slot", { key: '7bdfc66c7baa0a195d1c0438e6bdd0705a7e5ffd' });
11128
+ return hAsync("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
11150
11129
  }
11151
11130
  static get style() { return sdFloatingPortalCss(); }
11152
11131
  static get cmpMeta() { return {
@@ -12132,7 +12111,7 @@ class SdInput {
12132
12111
  nativeEl = undefined;
12133
12112
  formField;
12134
12113
  /** 폼 연동용 name 속성 */
12135
- name = nanoid$1();
12114
+ name = nanoid();
12136
12115
  /** 값이 변경될 때 발생합니다. */
12137
12116
  input;
12138
12117
  /** 포커스될 때 발생합니다. */
@@ -12212,12 +12191,12 @@ class SdInput {
12212
12191
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
12213
12192
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
12214
12193
  };
12215
- return (hAsync("sd-field", { key: '7ec67f4433bff2a7d2f1b44935f761d79f0e8681', 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: '6c0118c2610f06d13d4a38a857bf37c7ad9508d0', class: "sd-input__content" }, hAsync("slot", { key: '31cd8fe72ab21cb7a562accff98545fdf59efa80', name: "prefix" }), hAsync("input", { key: '47579f31e9255bda6d5623eca8071ffdafd0ca55', 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: 'f2d6e313c8c542d88c252e26cbb2618977fda5fa', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: 'b24cb32d5963b244aef76e31f1c0f350d316be5c', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12194
+ return (hAsync("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', 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: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, hAsync("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), hAsync("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', 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: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12216
12195
  if (this.disabled || this.readonly)
12217
12196
  return;
12218
12197
  this.internalValue = '';
12219
12198
  await this.formField?.sdValidate();
12220
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '9592350fd3820fa8c8af637cb84f2d4517d6decd', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12199
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12221
12200
  if (this.disabled || this.readonly)
12222
12201
  return;
12223
12202
  this.passwordVisible = !this.passwordVisible;
@@ -12284,43 +12263,19 @@ class SdInput {
12284
12263
 
12285
12264
  const table = {
12286
12265
  header: {
12287
- height: "36",
12288
12266
  paddingX: "16",
12289
12267
  gap: "4",
12290
12268
  bg: "#F5FAFF",
12291
12269
  typography: {
12292
12270
  fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
12293
- fontWeight: "500",
12294
12271
  fontSize: "12",
12295
- lineHeight: "20",
12296
- textDecoration: "none"
12297
- },
12298
- resizingBar: {
12299
- color: "#CCCCCC",
12300
- height: "16"
12301
- }
12302
- },
12272
+ lineHeight: "20"}},
12303
12273
  body: {
12304
- "default": {
12305
- height: "44",
12306
- paddingY: "8"
12307
- },
12308
- dense: {
12309
- height: "32"
12310
- },
12311
- paddingY: {
12312
- dense: "6"},
12313
- paddingX: {
12314
- "default": "8",
12315
- wide: "16"
12316
- },
12317
12274
  typography: {
12318
12275
  fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
12319
12276
  fontWeight: "400",
12320
12277
  fontSize: "12",
12321
- lineHeight: "20",
12322
- textDecoration: "none"
12323
- }
12278
+ lineHeight: "20"}
12324
12279
  },
12325
12280
  border: {
12326
12281
  color: "#E1E1E1",
@@ -12332,21 +12287,18 @@ const table = {
12332
12287
  radius: "8",
12333
12288
  keyValue: {
12334
12289
  body: {
12335
- paddingY: "8"},
12290
+ paddingY: "8",
12291
+ paddingX: {
12292
+ "default": "8",
12293
+ wide: "16"
12294
+ }
12295
+ },
12336
12296
  height: "44",
12337
12297
  search: {
12338
12298
  paddingX: "32",
12339
12299
  bg: "#F9F9F9"
12340
12300
  }
12341
- },
12342
- separator: {
12343
- color: "#EEEEEE",
12344
- width: {
12345
- "default": "6",
12346
- dense: "4"
12347
- }
12348
- }
12349
- };
12301
+ }};
12350
12302
  var tableTokens = {
12351
12303
  table: table
12352
12304
  };
@@ -12358,6 +12310,8 @@ const KEY_VALUE_TABLE_LAYOUT = {
12358
12310
  borderRadius: Number(t.radius),
12359
12311
  thPaddingX: Number(t.header.paddingX),
12360
12312
  padding: Number(t.keyValue.body.paddingY),
12313
+ tdPaddingX: Number(t.keyValue.body.paddingX.default),
12314
+ tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
12361
12315
  helpIconSize: 16,
12362
12316
  requiredIconSize: 12,
12363
12317
  gap: Number(t.header.gap),
@@ -12386,7 +12340,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
12386
12340
  tdLineHeight: Number(t.body.typography.lineHeight),
12387
12341
  };
12388
12342
 
12389
- const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
12343
+ const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding) var(--sd-kvt-td-padding-x);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td--text{padding-left:var(--sd-kvt-td-padding-x-wide);padding-right:var(--sd-kvt-td-padding-x-wide)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
12390
12344
 
12391
12345
  class SdKeyValueTable {
12392
12346
  constructor(hostRef) {
@@ -12399,6 +12353,12 @@ class SdKeyValueTable {
12399
12353
  * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
12400
12354
  */
12401
12355
  fields = [];
12356
+ /**
12357
+ * field name을 key로 하는 값 객체 (`{ [name]: value }`).
12358
+ * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
12359
+ * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
12360
+ */
12361
+ values = {};
12402
12362
  /**
12403
12363
  * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
12404
12364
  */
@@ -12410,44 +12370,57 @@ class SdKeyValueTable {
12410
12370
  * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
12411
12371
  */
12412
12372
  radius = 'default';
12413
- /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
12373
+ /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
12414
12374
  change;
12415
12375
  /** search 패널의 검색 버튼 클릭 시 발생합니다. */
12416
12376
  searchEvent;
12417
12377
  emit = (name, value) => {
12418
- this.change.emit({ name, value });
12378
+ this.change.emit({
12379
+ name,
12380
+ value: value,
12381
+ values: { ...this.values, [name]: value },
12382
+ });
12419
12383
  };
12384
+ /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
12385
+ resolveOptions(field) {
12386
+ const options = { ...(field.options ?? {}) };
12387
+ if (Object.prototype.hasOwnProperty.call(this.values, field.name)) {
12388
+ options.value = this.values[field.name];
12389
+ }
12390
+ return options;
12391
+ }
12420
12392
  handleSearchClick = () => {
12421
12393
  this.searchEvent.emit();
12422
12394
  };
12423
12395
  renderField(field) {
12424
12396
  const onSdUpdate = (e) => this.emit(field.name, e.detail);
12397
+ const options = this.resolveOptions(field);
12425
12398
  switch (field.type) {
12426
12399
  case 'input':
12427
- return hAsync("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12400
+ return hAsync("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12428
12401
  case 'textarea':
12429
- return hAsync("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12402
+ return hAsync("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12430
12403
  case 'number-input':
12431
- return hAsync("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12404
+ return hAsync("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12432
12405
  case 'select':
12433
- return hAsync("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12406
+ return hAsync("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12434
12407
  case 'radio': {
12435
- const { value, direction, ...rest } = field.options ?? {};
12408
+ const { value, direction, ...rest } = options;
12436
12409
  return (hAsync("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
12437
12410
  }
12438
12411
  case 'checkbox': {
12439
- const { value, ...rest } = field.options ?? {};
12412
+ const { value, ...rest } = options;
12440
12413
  return hAsync("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
12441
12414
  }
12442
12415
  case 'date-picker':
12443
- return hAsync("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12416
+ return hAsync("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12444
12417
  case 'date-range-picker':
12445
- return (hAsync("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
12418
+ return hAsync("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12446
12419
  case 'file-picker':
12447
- return hAsync("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12420
+ return hAsync("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12448
12421
  case 'text':
12449
12422
  default:
12450
- return hAsync("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
12423
+ return hAsync("span", { class: "sd-key-value-table__text" }, options.value ?? '');
12451
12424
  }
12452
12425
  }
12453
12426
  renderHelpIcon(helpText) {
@@ -12536,7 +12509,13 @@ class SdKeyValueTable {
12536
12509
  renderTd(field, r, c) {
12537
12510
  const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
12538
12511
  const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
12539
- return (hAsync("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12512
+ // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
12513
+ // 폼 필드 셀은 default paddingX 유지.
12514
+ const isText = field.type == null || field.type === 'text';
12515
+ return (hAsync("td", { key: `td-${r}-${c}`, class: {
12516
+ 'sd-key-value-table__td': true,
12517
+ 'sd-key-value-table__td--text': isText,
12518
+ }, rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12540
12519
  }
12541
12520
  warnDuplicateNames() {
12542
12521
  const seen = new Set();
@@ -12561,6 +12540,8 @@ class SdKeyValueTable {
12561
12540
  '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
12562
12541
  '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
12563
12542
  '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
12543
+ '--sd-kvt-td-padding-x': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingX}px`,
12544
+ '--sd-kvt-td-padding-x-wide': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingXWide}px`,
12564
12545
  '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
12565
12546
  '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
12566
12547
  '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
@@ -12621,6 +12602,7 @@ class SdKeyValueTable {
12621
12602
  "$tagName$": "sd-key-value-table",
12622
12603
  "$members$": {
12623
12604
  "fields": [16],
12605
+ "values": [16],
12624
12606
  "search": [4],
12625
12607
  "radius": [1]
12626
12608
  },
@@ -12678,7 +12660,7 @@ class SdLinearProgress {
12678
12660
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
12679
12661
  };
12680
12662
  const valueText = `${Math.round(this.clampedValue)}%`;
12681
- return (hAsync(Host, { key: 'c87705d4ca2e7d61de15412af8df8fe32aec6e56', style: hostStyle }, hAsync("div", { key: '0343b5d209cf49e7d25bb7ede349eae791890e29', class: "sd-linear-progress__track" }, hAsync("div", { key: '7771c6589c061d7bba7eb2ae88e1752d80912357', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: '66f85b9d5f87d7c2aeafd6eadcdc3fb1739124c9', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: 'd8581b453770e4c8db55abddc6c57f9b90701786', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '4223bfa7292cc9adeb9dca1ce18ee45cefc8d670', class: "sd-linear-progress__label" }, this.label)));
12663
+ return (hAsync(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, hAsync("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, hAsync("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
12682
12664
  }
12683
12665
  static get style() { return sdLinearProgressCss(); }
12684
12666
  static get cmpMeta() { return {
@@ -12734,10 +12716,10 @@ class SdLoadingContainer {
12734
12716
  this.prevBodyOverflow = null;
12735
12717
  }
12736
12718
  render() {
12737
- return (hAsync("div", { key: 'c2dad1bed0e513341a447f164fecbb2f879ed523', class: {
12719
+ return (hAsync("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
12738
12720
  'sd-loading-container': true,
12739
12721
  'sd-loading-container--visible': this.visible,
12740
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '254c3cb5eeb25b6c69b3812fbaada2a26d6620e0', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '58ca4033b25302d8a7ea3f25e6b5e8aa7ce9f51c', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'c8d48fa1814186a674d3f7c8b63bcd26541299ba', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: '899a5f32ceecb23b4f88b750aa634106bb42b394', class: "sd-loading-container__message" }, this.message))));
12722
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
12741
12723
  }
12742
12724
  static get style() { return sdLoadingContainerCss(); }
12743
12725
  static get cmpMeta() { return {
@@ -12849,7 +12831,7 @@ class SdLoadingModal {
12849
12831
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
12850
12832
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
12851
12833
  };
12852
- return (hAsync(Host, { key: '71bec4b63fc71720dfc10daecab4e63b8fc12b68', style: hostStyle }, hAsync("div", { key: '20f67d5f61a7c7150b236ebe13fecb345b5a20be', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: '395097aa0cbf7c277f7669bdc01fe756316ba4a0', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '6942b24672bf59b7c7f34bab0cce38b3d0e477f7', 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: '5dd0e24f06c8283b1baa7eeadf6547a96ecc784e', 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.showButton && (hAsync("div", { key: 'b686ab5f29a9a61520ba5a43f9d214f37c1a90d7', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '2378b8f300538c9aab8775a526104acd6089b580', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
12834
+ return (hAsync(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, hAsync("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', 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: '11b93fc8996ca64a42f09e4688267329da8a74c9', 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.showButton && (hAsync("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
12853
12835
  }
12854
12836
  static get style() { return sdLoadingModalCss(); }
12855
12837
  static get cmpMeta() { return {
@@ -13222,7 +13204,21 @@ class SdModalContainer {
13222
13204
  if (this.hasOwnProp(options, 'bottomMessage'))
13223
13205
  el.bottomMessage = options.bottomMessage ?? [];
13224
13206
  if (this.hasOwnProp(options, 'tagContents'))
13225
- el.tagContents = options.tagContents;
13207
+ this.setSlotContent(el, 'tag', options.tagContents);
13208
+ if (this.hasOwnProp(options, 'optionContents')) {
13209
+ this.setSlotContent(el, 'option', options.optionContents);
13210
+ }
13211
+ }
13212
+ /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
13213
+ setSlotContent(el, slot, content) {
13214
+ Array.from(el.children).forEach(child => {
13215
+ if (child.getAttribute('slot') === slot)
13216
+ child.remove();
13217
+ });
13218
+ if (content) {
13219
+ content.setAttribute('slot', slot);
13220
+ el.appendChild(content);
13221
+ }
13226
13222
  }
13227
13223
  handleBackdropClick(id) {
13228
13224
  if (!isTopInteractiveModal(id))
@@ -13485,7 +13481,7 @@ class SdNumberInput {
13485
13481
  nativeEl = undefined;
13486
13482
  formField;
13487
13483
  /** 폼 연동용 name 속성 */
13488
- name = nanoid$1();
13484
+ name = nanoid();
13489
13485
  /** 값이 변경될 때 발생합니다. */
13490
13486
  update;
13491
13487
  /** 포커스될 때 발생합니다. */
@@ -13731,15 +13727,15 @@ class SdNumberInput {
13731
13727
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
13732
13728
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
13733
13729
  };
13734
- return (hAsync("sd-field", { key: '9e82f7ec1e40c7f435233d1d8e05fdd2de0c2712', 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: 'b5f2e1c32bbba8147a72edf2dfe42f591d81d6f7', class: {
13730
+ return (hAsync("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', 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: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
13735
13731
  'sd-number-input__content': true,
13736
13732
  'sd-number-input__content--no-stepper': !this.useButton,
13737
- } }, this.useButton && (hAsync("button", { key: '07e053c769556282da7595ba7d185db7c9af19a2', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '95b48b8a0fa45ff60b3097d24405b48e4776b928', name: "minus", size: iconSize, color: this.isDecrementDisabled()
13733
+ } }, this.useButton && (hAsync("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
13738
13734
  ? NUMBER_INPUT_STEPPER.icon.disabled
13739
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '2381fade9767b593d5f6848bc411c3244a6f9da2', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '00b886990e9c1155c20ee404eda26777e56d31c2', 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: {
13735
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', 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: {
13740
13736
  textAlign: this.useButton ? 'center' : 'right',
13741
13737
  ...this.inputStyle,
13742
- } }), this.inputSuffix && hAsync("span", { key: '5254313e957f3ded4139f047b588e38222c33975', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'f7389a1c5869460791249f579b3195b3583255fe', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: 'b272b62e2ce27a1e5ecb86738af6eacb89b0d6c6', name: "add", size: iconSize, color: this.isIncrementDisabled()
13738
+ } }), this.inputSuffix && hAsync("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
13743
13739
  ? NUMBER_INPUT_STEPPER.icon.disabled
13744
13740
  : NUMBER_INPUT_STEPPER.icon.default }))))));
13745
13741
  }
@@ -13958,13 +13954,13 @@ class SdPagination {
13958
13954
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
13959
13955
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
13960
13956
  };
13961
- return (hAsync("div", { key: '4a67cbb9ed9d3cafbd3d9f99562948e3b3840210', class: {
13957
+ return (hAsync("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
13962
13958
  'sd-pagination': true,
13963
13959
  'sd-pagination--simple': this.simple,
13964
- }, style: cssVars }, hAsync("div", { key: 'f0cc77abd3b03a1525f52fbcd2587b6ad9cd468d', 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: {
13960
+ }, style: cssVars }, hAsync("div", { key: '360cdb85715508d2f8155851b11928031015909c', 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: {
13965
13961
  'sd-pagination__item': true,
13966
13962
  'sd-pagination__item--selected': this.currentPage === n,
13967
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'c4053f5917345cf1e7fcea9f3c2fa0d6b5fa7a3f', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13963
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13968
13964
  }
13969
13965
  static get style() { return sdPaginationCss(); }
13970
13966
  static get cmpMeta() { return {
@@ -14204,7 +14200,7 @@ class SdPopup {
14204
14200
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
14205
14201
  ...this.submitButtonProps,
14206
14202
  };
14207
- return (hAsync("div", { key: 'f138f3d792295a6e1cb3894033547176cfd03163', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '7ff26c89a03cd79d5abe83513d96ae5f40b83869', class: "sd-popup__header" }, hAsync("h2", { key: 'd9d3282b60b5b6baa5c2b1568c13db5847e9f9af', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a296adcd58df30f4915b2523931c5b9eb4588e5d', class: "sd-popup__body" }, hAsync("slot", { key: 'aaf4dfc93d5664ca19a8071e3f37bf8a5857e471' })), this.useFooter && (hAsync("footer", { key: '1afb1b638fa8bfa69f5d4bc87fca538800614312', class: "sd-popup__footer" }, hAsync("div", { key: '7539bc751847a03fef6ec1e15587b346ffb19c83', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '66fbec51d23bd1a203159f6c968935034a4c086c', name: "footer-left" })), hAsync("sd-button", { key: '8d236d5fcd9b5fdae1c27ade7bff6bc605ef8bde', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14203
+ return (hAsync("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, hAsync("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, hAsync("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (hAsync("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, hAsync("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), hAsync("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14208
14204
  }
14209
14205
  static get style() { return sdPopupCss(); }
14210
14206
  static get cmpMeta() { return {
@@ -15035,7 +15031,7 @@ class SdSelect {
15035
15031
  triggerComponentRef;
15036
15032
  closeAnimationTimer;
15037
15033
  /** 폼 연동용 name 속성 */
15038
- name = nanoid$1();
15034
+ name = nanoid();
15039
15035
  triggerHasFocus = false;
15040
15036
  watchIsOpen(newValue) {
15041
15037
  this.syncFocusedState(newValue);
@@ -15232,15 +15228,15 @@ class SdSelect {
15232
15228
  this.closeDropdown();
15233
15229
  },
15234
15230
  };
15235
- return (hAsync("sd-field", { key: '2272f300b9aa6645dd772d06694e728f9abcea28', 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: () => {
15231
+ return (hAsync("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', 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: () => {
15236
15232
  this.hovered = true;
15237
15233
  }, onMouseLeave: () => {
15238
15234
  this.hovered = false;
15239
- } }, hAsync("div", { key: 'b9c769146720634abb4d018d022e28749ef0b939', class: "sd-select", ref: el => {
15235
+ } }, hAsync("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
15240
15236
  this.triggerRef = el;
15241
- } }, hAsync("sd-select-trigger", { key: '792bbee6e36298a306d720bc15bff61d5bba7545', ref: el => {
15237
+ } }, hAsync("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
15242
15238
  this.triggerComponentRef = el;
15243
- }, 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: 'c70299735ea4f9fd257a0b3384e728bbf9fc9d97', ...portalProps }, hAsync("sd-select-listbox", { key: 'd0dbfc0382131e998f54d6a0cb04fc6b1a9128c8', 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) })))));
15239
+ }, 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: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, hAsync("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', 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) })))));
15244
15240
  }
15245
15241
  static get watchers() { return {
15246
15242
  "isOpen": [{
@@ -15501,7 +15497,7 @@ class SdSelectListItem {
15501
15497
  return (
15502
15498
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
15503
15499
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
15504
- hAsync("div", { key: '0e0a07c33c9e6718771ba8cc27d62e4909434562', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15500
+ hAsync("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15505
15501
  'sd-select-list-item': true,
15506
15502
  'sd-select-list-item--group': isGroup,
15507
15503
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -15511,7 +15507,7 @@ class SdSelectListItem {
15511
15507
  'sd-select-list-item--focused': this.isFocused,
15512
15508
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
15513
15509
  'sd-select-list-item--disabled': !!this.option.disabled,
15514
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'd3078da8737c28b279f2057c06266710af6191cd', 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: '36b88dbda0d2bbd27b5df60eaaa855ebe77e0905', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15510
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '297067b88bedf8eed648f60050688e23e9dfcbdd', 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: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15515
15511
  }
15516
15512
  static get style() { return sdSelectListItemCss(); }
15517
15513
  static get cmpMeta() { return {
@@ -15583,15 +15579,15 @@ class SdSelectListItemSearch {
15583
15579
  clearTimeout(this.debounceTimer);
15584
15580
  }
15585
15581
  render() {
15586
- return (hAsync("div", { key: '6caac256fb6b1fc3e7b3fc7f7ee66b163737f944', class: {
15582
+ return (hAsync("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
15587
15583
  'sd-select-list-item-search': true,
15588
15584
  'sd-select-list-item-search--scrolled': this.isScrolled,
15589
- } }, hAsync("div", { key: '3193b47072cb73c4400e606aa8dbd4553e178738', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '6165dae71933cbdf5c66d533d4cae43ae95f7bd4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: 'd0526a3a20e220068a4b4cb489af060c80952325', ref: el => {
15585
+ } }, hAsync("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
15590
15586
  this.inputEl = el;
15591
- }, 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: 'e139b3ddab9ac793bfcf44480161a1d0c501a861', type: "button", class: {
15587
+ }, 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: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', type: "button", class: {
15592
15588
  'sd-select-list-item-search__clear': true,
15593
15589
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
15594
- }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '4d29274a17767dec92bb6052196832272ab215df', name: "close", size: 12, color: "#888888" })))));
15590
+ }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
15595
15591
  }
15596
15592
  static get style() { return sdSelectListItemSearchCss(); }
15597
15593
  static get cmpMeta() { return {
@@ -15975,9 +15971,9 @@ class SdSelectListbox {
15975
15971
  '--listbox-max-height': this.maxHeight ?? '260px',
15976
15972
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15977
15973
  };
15978
- return (hAsync("div", { key: '4de15e4c150ee542656ee3f73aa41dd32379748f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: 'cb656ccafc2833b438f14ac48ca8686684212ead', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '5ffaefb63605c4319810046e9d40aa5fcb4754de', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15974
+ return (hAsync("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15979
15975
  this.listEl = el;
15980
- } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: 'e1d3f7a37a037b386aae50cceb61e2b79d37453e', 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) })))))));
15976
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', 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) })))))));
15981
15977
  }
15982
15978
  static get watchers() { return {
15983
15979
  "searchKeyword": [{
@@ -16066,7 +16062,7 @@ class SdSelectTrigger {
16066
16062
  ? SELECT_COLORS.icon.disabled
16067
16063
  : SELECT_COLORS.icon.default,
16068
16064
  };
16069
- return (hAsync("div", { key: '33e639898a581e8556e1e9c966f14cb863246c35', ref: el => {
16065
+ return (hAsync("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
16070
16066
  this.triggerEl = el;
16071
16067
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
16072
16068
  'sd-select-trigger': true,
@@ -16077,7 +16073,7 @@ class SdSelectTrigger {
16077
16073
  e.preventDefault();
16078
16074
  this.handleClick();
16079
16075
  }
16080
- }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'a935f82879727eb212422c875b16e5fbf01460ba', 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: 'e98e8e317aa86a960674b21714ca90cfa3920197', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16076
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', 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: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16081
16077
  'sd-select-trigger__icon': true,
16082
16078
  'sd-select-trigger__icon--open': this.isOpen,
16083
16079
  } }))));
@@ -16206,7 +16202,7 @@ class SdSwitch {
16206
16202
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
16207
16203
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
16208
16204
  };
16209
- return (hAsync("label", { key: '0dd7063a45e2adc589e2e8dfc7cdb5c0c585aeac', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '01b94b14edd1571b8e21ba5a8bb72a0bd151b3a2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '6c6bfaa3909ed885811f3e2af402d3a16c9b75e2', class: "sd-switch__track" }, hAsync("div", { key: 'd3861a5c67779b7e871d7a2f45b20439648402cc', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '25c5198adb208b1016e9eb5bf01eaa6fb501ebe5', class: "sd-switch__label" }, this.label)));
16205
+ return (hAsync("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, hAsync("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
16210
16206
  }
16211
16207
  static get style() { return sdSwitchCss(); }
16212
16208
  static get cmpMeta() { return {
@@ -16223,1082 +16219,6 @@ class SdSwitch {
16223
16219
  }; }
16224
16220
  }
16225
16221
 
16226
- let urlAlphabet =
16227
- 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
16228
-
16229
- const POOL_SIZE_MULTIPLIER = 128;
16230
- let pool, poolOffset;
16231
- function fillPool(bytes) {
16232
- if (bytes < 0 || bytes > 1024) throw new RangeError('Wrong ID size')
16233
- if (!pool || pool.length < bytes) {
16234
- pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
16235
- node_crypto.webcrypto.getRandomValues(pool);
16236
- poolOffset = 0;
16237
- } else if (poolOffset + bytes > pool.length) {
16238
- node_crypto.webcrypto.getRandomValues(pool);
16239
- poolOffset = 0;
16240
- }
16241
- poolOffset += bytes;
16242
- }
16243
- function nanoid(size = 21) {
16244
- fillPool((size |= 0));
16245
- let id = '';
16246
- for (let i = poolOffset - size; i < poolOffset; i++) {
16247
- id += urlAlphabet[pool[i] & 63];
16248
- }
16249
- return id
16250
- }
16251
-
16252
- const TABLE_ID_ATTR = 'table-id';
16253
-
16254
- // ── Header Tokens ──
16255
- const TABLE_HEADER_LAYOUT = {
16256
- height: tableTokens.table.header.height,
16257
- paddingX: tableTokens.table.header.paddingX,
16258
- gap: tableTokens.table.header.gap,
16259
- };
16260
- const TABLE_HEADER_TYPOGRAPHY = {
16261
- fontFamily: tableTokens.table.header.typography.fontFamily,
16262
- fontWeight: tableTokens.table.header.typography.fontWeight,
16263
- fontSize: tableTokens.table.header.typography.fontSize,
16264
- lineHeight: tableTokens.table.header.typography.lineHeight,
16265
- textDecoration: tableTokens.table.header.typography.textDecoration,
16266
- };
16267
- const TABLE_HEADER_COLORS = {
16268
- bg: tableTokens.table.header.bg,
16269
- };
16270
- const TABLE_HEADER_RESIZING_BAR = {
16271
- color: tableTokens.table.header.resizingBar.color,
16272
- height: tableTokens.table.header.resizingBar.height,
16273
- };
16274
- // ── Body Tokens ──
16275
- const TABLE_BODY_LAYOUT = {
16276
- default: {
16277
- height: tableTokens.table.body.default.height,
16278
- paddingY: tableTokens.table.body.default.paddingY,
16279
- },
16280
- dense: {
16281
- height: tableTokens.table.body.dense.height,
16282
- paddingY: tableTokens.table.body.paddingY.dense,
16283
- },
16284
- paddingX: tableTokens.table.body.paddingX.wide,
16285
- densePaddingX: tableTokens.table.body.paddingX.default,
16286
- framePadding: tableTokens.table.body.paddingX.default,
16287
- };
16288
- const TABLE_BODY_TYPOGRAPHY = {
16289
- fontFamily: tableTokens.table.body.typography.fontFamily,
16290
- fontWeight: tableTokens.table.body.typography.fontWeight,
16291
- fontSize: tableTokens.table.body.typography.fontSize,
16292
- lineHeight: tableTokens.table.body.typography.lineHeight,
16293
- textDecoration: tableTokens.table.body.typography.textDecoration,
16294
- };
16295
- // ── Frame / Border Tokens ──
16296
- const TABLE_BORDER = {
16297
- color: tableTokens.table.border.color,
16298
- width: tableTokens.table.border.width,
16299
- };
16300
- const TABLE_SEPARATOR = {
16301
- color: tableTokens.table.separator.color,
16302
- width: tableTokens.table.separator.width.default,
16303
- denseWidth: tableTokens.table.separator.width.dense,
16304
- };
16305
- const TABLE_RADIUS = tableTokens.table.radius;
16306
- // ── Selectable Column ──
16307
- const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
16308
- // ── Header Icon Color Defaults ──
16309
- const ICON_DEFAULT_COLOR = {
16310
- pageEdit: systemTokens.color.darkblue.strong,
16311
- arrowDown: systemTokens.color.darkblue.strong,
16312
- arrowUp: systemTokens.color.darkblue.strong,
16313
- updown: systemTokens.color.grey.strong,
16314
- pageMove: systemTokens.color.darkblue.strong,
16315
- star: systemTokens.color.blue.strong,
16316
- };
16317
- const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
16318
- const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
16319
-
16320
- const sdTableCss = () => `sd-table,:host{display:block;width:100%;height:var(--table-host-height);max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:100%;width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:calc(100% - var(--pagination-height, 0px));border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-useTop{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__wrapper--radius-full{border-radius:0}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-family:var(--table-body-font-family, inherit);font-weight:var(--table-body-font-weight, 400);font-size:var(--table-body-font-size, 12px);line-height:var(--table-body-line-height, 20px);text-decoration:var(--table-body-text-decoration, none);overflow:auto;background:#FFFFFF}.sd-table__scroll-container::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}.sd-table__scroll-container::-webkit-scrollbar:horizontal{height:8px}.sd-table__scroll-container::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}.sd-table__scroll-container::-webkit-scrollbar-track{background-color:#E5E5E5}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;top:36px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:var(--table-body-font-size, 12px);color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.sd-table__no-data-header-overlay{position:absolute;top:0;left:0;right:0;height:36px;background:rgba(255, 255, 255, 0.6);z-index:210;pointer-events:none}.sd-table__no-data-content{pointer-events:auto;min-height:60px;width:100%;display:flex;align-items:center;justify-content:center}.sd-table__loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
16321
-
16322
- class SdTable {
16323
- constructor(hostRef) {
16324
- registerInstance(this, hostRef);
16325
- this.sdSelectChange = createEvent(this, "sdSelectChange", 7);
16326
- this.sdPageChange = createEvent(this, "sdPageChange", 7);
16327
- this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange", 7);
16328
- this.sdVirtualUpdate = createEvent(this, "sdVirtualUpdate", 7);
16329
- this.sdVirtualReachEnd = createEvent(this, "sdVirtualReachEnd", 7);
16330
- }
16331
- static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
16332
- get el() { return getElement(this); }
16333
- /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
16334
- tableId = nanoid(8);
16335
- fallbackTableId = nanoid(8);
16336
- /** 컬럼 정의 목록 */
16337
- columns = [];
16338
- /** 행 데이터 배열 */
16339
- rows;
16340
- /** 현재 선택된 행 목록 */
16341
- selected = [];
16342
- /** 행 고유 식별 필드명 */
16343
- rowKey = 'id';
16344
- /** 행 선택(체크박스) 기능 활성화 여부 */
16345
- selectable = false;
16346
- /** 컬럼 너비 조절 기능 활성화 여부 */
16347
- resizable = false;
16348
- /** 테이블 너비 */
16349
- width;
16350
- /** 테이블 높이 */
16351
- height;
16352
- /** 헤더 고정(sticky) 여부 */
16353
- stickyHeader = false;
16354
- /** 고정할 좌우 컬럼 수 */
16355
- stickyColumn = { left: 0, right: 0 };
16356
- /** border-radius 제어 */
16357
- radius = 'default';
16358
- /** 데이터 없을 때 표시할 메시지 */
16359
- noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16360
- resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16361
- /** 로딩 스피너 표시 여부 */
16362
- isLoading = false;
16363
- /** 페이지네이션 옵션 */
16364
- pagination;
16365
- /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
16366
- useInternalPagination = false;
16367
- /** 페이지당 행 수 선택 셀렉트 표시 여부 */
16368
- useRowsPerPageSelect = false;
16369
- /** 행 높이를 줄인 조밀 모드 여부 */
16370
- dense = false;
16371
- // ─── Virtual Scroll ───────────────────────────────────────────────
16372
- /** 가상 스크롤 사용 여부 */
16373
- useVirtualScroll = false;
16374
- /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
16375
- rowHeight;
16376
- get effectiveRowHeight() {
16377
- if (this.rowHeight != null)
16378
- return this.rowHeight;
16379
- return this.dense
16380
- ? Number(TABLE_BODY_LAYOUT.dense.height)
16381
- : Number(TABLE_BODY_LAYOUT.default.height);
16382
- }
16383
- /** 가상 스크롤 상하 버퍼 행 수 */
16384
- virtualBuffer = 5;
16385
- /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
16386
- virtualEndThreshold = 10;
16387
- // ─────────────────────────────────────────────────────────────────
16388
- /** 페이지당 행 수 선택 옵션 목록 */
16389
- rowsPerPageOption = [
16390
- { label: '10개씩 보기', value: 10 },
16391
- { label: '25개씩 보기', value: 25 },
16392
- { label: '50개씩 보기', value: 50 },
16393
- { label: '100개씩 보기', value: 100 },
16394
- ];
16395
- /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
16396
- sdSelectChange;
16397
- /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
16398
- sdPageChange;
16399
- /** 페이지당 행 수가 변경될 때 발생합니다. */
16400
- sdRowsPerPageChange;
16401
- /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
16402
- sdVirtualUpdate;
16403
- /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
16404
- sdVirtualReachEnd;
16405
- currentPage = 1;
16406
- innerRowsPerPage = 10;
16407
- innerSelected = new Set();
16408
- columnWidths = [];
16409
- scrolledLeft = false;
16410
- scrolledRight = false;
16411
- rowCount = 0;
16412
- loadingScrollTop = 0;
16413
- noDataBodyHeight = 60;
16414
- // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
16415
- // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
16416
- autoThead = false;
16417
- autoTbody = false;
16418
- vsStart = 0;
16419
- vsEnd = 0;
16420
- lastReachEndNotifiedRowCount = -1;
16421
- scrollContainer = null;
16422
- noDataContentEl = null;
16423
- noDataContentResizeObserver;
16424
- onScroll;
16425
- // 키: `${rowKey}::${field}` → { rowspan, colspan }
16426
- spanRegistry = new Map();
16427
- // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
16428
- // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
16429
- useFrameRegistry = new Map();
16430
- // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
16431
- // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
16432
- cellClassRegistry = new Map();
16433
- // rowKey 문자열 → rows 배열에서의 visual index.
16434
- // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
16435
- // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
16436
- rowIndexMap = new Map();
16437
- rebuildRowIndexMap() {
16438
- this.rowIndexMap.clear();
16439
- if (!Array.isArray(this.rows))
16440
- return;
16441
- const field = this.rowKey;
16442
- this.rows.forEach((r, i) => {
16443
- const k = r?.[field];
16444
- if (k == null)
16445
- return;
16446
- this.rowIndexMap.set(String(k), i);
16447
- });
16448
- }
16449
- // rowKey의 시각적 행 인덱스를 돌려준다.
16450
- // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
16451
- // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
16452
- // 3) 둘 다 안 되면 null — rowspan 평가 스킵
16453
- resolveRowIndex(rowKey) {
16454
- const fromMap = this.rowIndexMap.get(rowKey);
16455
- if (fromMap !== undefined)
16456
- return fromMap;
16457
- const n = Number(rowKey);
16458
- return Number.isFinite(n) ? n : null;
16459
- }
16460
- toFiniteNumber(value, fallback) {
16461
- const n = typeof value === 'number' ? value : Number(value);
16462
- return Number.isFinite(n) ? n : fallback;
16463
- }
16464
- isRowsPerPageValue(value) {
16465
- return value === null || typeof value === 'string' || typeof value === 'number';
16466
- }
16467
- isValidTableId(value) {
16468
- return (typeof value === 'string' &&
16469
- value.trim().length > 0 &&
16470
- value !== 'undefined' &&
16471
- value !== 'null');
16472
- }
16473
- getResolvedTableId() {
16474
- if (this.isValidTableId(this.tableId))
16475
- return this.tableId;
16476
- const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
16477
- if (this.isValidTableId(attrId))
16478
- return attrId;
16479
- return this.fallbackTableId;
16480
- }
16481
- syncTableIdAttribute() {
16482
- const resolvedTableId = this.getResolvedTableId();
16483
- if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
16484
- this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
16485
- }
16486
- }
16487
- handleIsLoadingChange(newVal) {
16488
- if (newVal) {
16489
- this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
16490
- }
16491
- this.syncNoDataContentObserver();
16492
- }
16493
- handleUseVirtualScrollChange(newVal) {
16494
- if (newVal) {
16495
- // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
16496
- readTask(() => this.propagateVirtualUpdate());
16497
- }
16498
- }
16499
- handleColumnsChange(newCols) {
16500
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
16501
- this.refreshChildrenConfig();
16502
- }
16503
- handleRowsChange(newRows) {
16504
- if (!Array.isArray(newRows))
16505
- return;
16506
- this.rowCount = newRows.length;
16507
- this.rebuildRowIndexMap();
16508
- if (this.useVirtualScroll)
16509
- this.propagateVirtualUpdate(true);
16510
- this.pushRowsToChildren(newRows);
16511
- this.syncNoDataContentObserver();
16512
- }
16513
- handleRowKeyChange() {
16514
- this.rebuildRowIndexMap();
16515
- }
16516
- handleTableIdChange() {
16517
- this.syncTableIdAttribute();
16518
- }
16519
- handleNoDataLabelChange(newLabel) {
16520
- if (typeof newLabel === 'string' &&
16521
- newLabel.trim().length > 0 &&
16522
- newLabel !== 'undefined' &&
16523
- newLabel !== 'null') {
16524
- this.resolvedNoDataLabel = newLabel;
16525
- }
16526
- else {
16527
- this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16528
- }
16529
- }
16530
- handleConfigChange() {
16531
- this.refreshChildrenConfig();
16532
- }
16533
- handleSelectedChange(newSelected) {
16534
- this.innerSelected = new Set(newSelected);
16535
- }
16536
- handlePaginationChange(newVal) {
16537
- if (newVal?.page != null && newVal.page !== this.currentPage) {
16538
- this.currentPage = newVal.page;
16539
- }
16540
- if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
16541
- this.innerRowsPerPage = newVal.rowsPerPage;
16542
- }
16543
- }
16544
- detectChildren() {
16545
- const hasThead = !!this.el.querySelector(':scope > sd-thead');
16546
- const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
16547
- this.autoThead = !hasThead;
16548
- this.autoTbody = !hasTbody;
16549
- }
16550
- componentWillLoad() {
16551
- this.syncTableIdAttribute();
16552
- this.handleNoDataLabelChange(this.noDataLabel);
16553
- this.detectChildren();
16554
- this.innerSelected = new Set(this.selected || []);
16555
- this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
16556
- this.rebuildRowIndexMap();
16557
- if (this.pagination?.page != null) {
16558
- this.currentPage = this.pagination.page;
16559
- }
16560
- if (this.pagination?.rowsPerPage != null) {
16561
- this.innerRowsPerPage = this.pagination.rowsPerPage;
16562
- }
16563
- // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
16564
- // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
16565
- // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
16566
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16567
- const el = this.el;
16568
- el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
16569
- el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
16570
- el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
16571
- el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
16572
- el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
16573
- el.setRowCountSync = this.setRowCountSync.bind(this);
16574
- el.handleResize = this.handleResize.bind(this);
16575
- el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
16576
- el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
16577
- el.getConfigSync = this.getConfigSync.bind(this);
16578
- el.getTableIdSync = () => this.getResolvedTableId();
16579
- el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
16580
- el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
16581
- el.registerSpanSync = this.registerSpanSync.bind(this);
16582
- el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
16583
- el.getSpanSync = this.getSpanSync.bind(this);
16584
- el.isCoveredSync = this.isCoveredSync.bind(this);
16585
- el.hasRowspanSync = this.hasRowspanSync.bind(this);
16586
- el.registerCellClassSync = this.registerCellClassSync.bind(this);
16587
- el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
16588
- el.getCellClassSync = this.getCellClassSync.bind(this);
16589
- el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
16590
- el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
16591
- el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
16592
- el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
16593
- if (Array.isArray(this.rows)) {
16594
- this.rowCount = this.rows.length;
16595
- this.pushRowsToChildren(this.rows);
16596
- }
16597
- }
16598
- componentDidLoad() {
16599
- if (Array.isArray(this.rows)) {
16600
- this.pushRowsToChildren(this.rows);
16601
- }
16602
- readTask(() => {
16603
- const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
16604
- if (!wrapper)
16605
- return;
16606
- let rafPending = false;
16607
- this.onScroll = () => {
16608
- // 가로 스크롤 그림자
16609
- const scrollLeft = wrapper.scrollLeft;
16610
- const scrollWidth = wrapper.scrollWidth;
16611
- const clientWidth = wrapper.clientWidth;
16612
- const newScrolledLeft = scrollLeft > 0;
16613
- const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
16614
- if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
16615
- this.scrolledLeft = newScrolledLeft;
16616
- this.scrolledRight = newScrolledRight;
16617
- this.refreshChildrenConfig();
16618
- }
16619
- // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
16620
- if (this.useVirtualScroll && !rafPending) {
16621
- rafPending = true;
16622
- requestAnimationFrame(() => {
16623
- rafPending = false;
16624
- this.propagateVirtualUpdate();
16625
- });
16626
- }
16627
- };
16628
- this.scrollContainer = wrapper;
16629
- wrapper.addEventListener('scroll', this.onScroll, { passive: true });
16630
- this.onScroll();
16631
- if (this.useVirtualScroll) {
16632
- this.propagateVirtualUpdate(); // 초기 렌더
16633
- }
16634
- });
16635
- this.syncNoDataContentObserver();
16636
- }
16637
- disconnectedCallback() {
16638
- if (this.scrollContainer && this.onScroll) {
16639
- this.scrollContainer.removeEventListener('scroll', this.onScroll);
16640
- }
16641
- this.noDataContentResizeObserver?.disconnect();
16642
- this.noDataContentResizeObserver = undefined;
16643
- }
16644
- syncNoDataContentObserver() {
16645
- const isNoData = this.rowCount === 0 && !this.isLoading;
16646
- if (!isNoData) {
16647
- this.noDataContentResizeObserver?.disconnect();
16648
- this.noDataContentResizeObserver = undefined;
16649
- this.noDataBodyHeight = 60;
16650
- return;
16651
- }
16652
- this.observeNoDataContentHeight();
16653
- }
16654
- // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
16655
- observeNoDataContentHeight() {
16656
- if (typeof ResizeObserver === 'undefined')
16657
- return;
16658
- const target = this.noDataContentEl;
16659
- if (!target)
16660
- return;
16661
- this.noDataContentResizeObserver?.disconnect();
16662
- this.noDataContentResizeObserver = new ResizeObserver(() => {
16663
- const measured = Math.ceil(target.scrollHeight);
16664
- const nextHeight = Math.max(60, measured);
16665
- if (nextHeight !== this.noDataBodyHeight) {
16666
- this.noDataBodyHeight = nextHeight;
16667
- }
16668
- });
16669
- this.noDataContentResizeObserver.observe(target);
16670
- readTask(() => {
16671
- if (!this.noDataContentEl)
16672
- return;
16673
- const measured = Math.ceil(this.noDataContentEl.scrollHeight);
16674
- const next = Math.max(60, measured);
16675
- if (next !== this.noDataBodyHeight) {
16676
- this.noDataBodyHeight = next;
16677
- }
16678
- });
16679
- }
16680
- queryChildEl(selector) {
16681
- return (this.el.querySelector(selector) ??
16682
- this.el.shadowRoot?.querySelector(selector) ??
16683
- null);
16684
- }
16685
- queryAllTr() {
16686
- const light = Array.from(this.el.querySelectorAll('sd-tr'));
16687
- const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
16688
- return [...light, ...shadow];
16689
- }
16690
- pushRowsToChildren(rows) {
16691
- const tbody = this.queryChildEl('sd-tbody');
16692
- if (tbody)
16693
- tbody.rows = rows;
16694
- const thead = this.queryChildEl('sd-thead');
16695
- if (thead)
16696
- thead.rows = rows;
16697
- }
16698
- handleStructureSlotChange = () => {
16699
- if (Array.isArray(this.rows)) {
16700
- this.pushRowsToChildren(this.rows);
16701
- }
16702
- this.refreshChildrenConfig();
16703
- };
16704
- refreshChildrenSelection() {
16705
- const thead = this.queryChildEl('sd-thead');
16706
- thead?.refreshSelection?.();
16707
- this.queryAllTr().forEach(tr => tr.refreshSelection?.());
16708
- }
16709
- refreshChildrenConfig() {
16710
- const thead = this.queryChildEl('sd-thead');
16711
- thead?.refreshConfig?.();
16712
- this.queryAllTr().forEach(tr => tr.refreshConfig?.());
16713
- }
16714
- maybeEmitVirtualReachEnd(start, end) {
16715
- const threshold = Math.max(1, this.virtualEndThreshold);
16716
- const nearEnd = end >= Math.max(0, this.rowCount - threshold);
16717
- if (!nearEnd)
16718
- return;
16719
- if (this.lastReachEndNotifiedRowCount === this.rowCount)
16720
- return;
16721
- this.lastReachEndNotifiedRowCount = this.rowCount;
16722
- this.sdVirtualReachEnd.emit({
16723
- from: start,
16724
- to: end,
16725
- rowCount: this.rowCount,
16726
- threshold,
16727
- });
16728
- }
16729
- propagateVirtualUpdate(forceSpacerUpdate = false) {
16730
- if (!this.scrollContainer || !this.useVirtualScroll)
16731
- return;
16732
- const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
16733
- const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
16734
- const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
16735
- if (!Number.isFinite(start) || !Number.isFinite(end))
16736
- return;
16737
- const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
16738
- if (!rangeChanged && !forceSpacerUpdate)
16739
- return;
16740
- this.vsStart = start;
16741
- this.vsEnd = end;
16742
- const topHeight = start * this.effectiveRowHeight;
16743
- const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
16744
- // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
16745
- const tbody = this.queryChildEl('sd-tbody');
16746
- tbody?.setSpacersSync?.(topHeight, bottomHeight);
16747
- if (rangeChanged) {
16748
- this.sdVirtualUpdate.emit({
16749
- from: start,
16750
- to: end,
16751
- });
16752
- }
16753
- this.maybeEmitVirtualReachEnd(start, end);
16754
- }
16755
- getVirtualScrollConfigSync() {
16756
- return {
16757
- useVirtualScroll: this.useVirtualScroll,
16758
- rowHeight: this.effectiveRowHeight,
16759
- virtualBuffer: this.virtualBuffer,
16760
- vsStart: this.vsStart,
16761
- vsEnd: this.vsEnd,
16762
- rowCount: this.rowCount,
16763
- };
16764
- }
16765
- getConfigSync() {
16766
- return {
16767
- columns: this.columns,
16768
- selectable: this.selectable,
16769
- resizable: this.resizable,
16770
- stickyColumn: this.stickyColumn,
16771
- stickyHeader: this.stickyHeader,
16772
- scrolledLeft: this.scrolledLeft,
16773
- scrolledRight: this.scrolledRight,
16774
- columnWidths: this.columnWidths,
16775
- dense: this.dense,
16776
- };
16777
- }
16778
- registerUseFrameSync(rowKey, field) {
16779
- if (rowKey == null || field === '')
16780
- return;
16781
- let fields = this.useFrameRegistry.get(rowKey);
16782
- if (!fields) {
16783
- fields = new Set();
16784
- this.useFrameRegistry.set(rowKey, fields);
16785
- }
16786
- fields.add(field);
16787
- }
16788
- unregisterUseFrameSync(rowKey, field) {
16789
- if (rowKey == null || field === '')
16790
- return;
16791
- const fields = this.useFrameRegistry.get(rowKey);
16792
- if (!fields)
16793
- return;
16794
- fields.delete(field);
16795
- if (fields.size === 0)
16796
- this.useFrameRegistry.delete(rowKey);
16797
- }
16798
- hasUseFrameInRowSync(rowKey) {
16799
- const fields = this.useFrameRegistry.get(rowKey);
16800
- return fields != null && fields.size > 0;
16801
- }
16802
- isCellUseFrameSync(rowKey, field) {
16803
- return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
16804
- }
16805
- isRowSelectedSync(row) {
16806
- return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
16807
- }
16808
- /** 행이 선택되어 있는지 확인합니다. */
16809
- async isRowSelected(row) {
16810
- return this.isRowSelectedSync(row);
16811
- }
16812
- updateRowSelectSync(row) {
16813
- const selectedArray = Array.from(this.innerSelected);
16814
- const exists = this.isRowSelectedSync(row);
16815
- const newSelected = exists
16816
- ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
16817
- : [...selectedArray, row];
16818
- if (newSelected.length === selectedArray.length)
16819
- return;
16820
- this.innerSelected = new Set(newSelected);
16821
- this.selected = Array.from(this.innerSelected);
16822
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16823
- this.refreshChildrenSelection();
16824
- }
16825
- /** 행 선택 상태를 토글합니다. */
16826
- async updateRowSelect(row) {
16827
- this.updateRowSelectSync(row);
16828
- }
16829
- toggleSelectAllSync(checked, rows) {
16830
- if (checked) {
16831
- const pageRows = new Set([...rows]);
16832
- this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
16833
- }
16834
- else {
16835
- const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
16836
- this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
16837
- }
16838
- this.selected = Array.from(this.innerSelected);
16839
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16840
- this.refreshChildrenSelection();
16841
- }
16842
- /** 전체 행 선택/해제를 처리합니다. */
16843
- async toggleSelectAll(checked, rows) {
16844
- this.toggleSelectAllSync(checked, rows);
16845
- }
16846
- getIsAllCheckedSync(rows) {
16847
- const total = rows.length;
16848
- const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
16849
- if (selectedCount === 0)
16850
- return false;
16851
- if (selectedCount === total)
16852
- return true;
16853
- return null; // indeterminate
16854
- }
16855
- /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
16856
- async getIsAllChecked(rows) {
16857
- return this.getIsAllCheckedSync(rows);
16858
- }
16859
- changePage(page) {
16860
- if (!this.useInternalPagination) {
16861
- this.sdPageChange.emit(page);
16862
- return;
16863
- }
16864
- this.currentPage = page;
16865
- this.sdPageChange.emit(this.currentPage);
16866
- this.updateRowsVisibility();
16867
- }
16868
- updateRowsVisibility() {
16869
- this.queryAllTr().forEach(tr => tr.updateVisibility?.());
16870
- }
16871
- changeRowsPerPage(perPage) {
16872
- const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
16873
- if (!this.useInternalPagination) {
16874
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16875
- return;
16876
- }
16877
- this.innerRowsPerPage = changedRowsPerPage;
16878
- const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
16879
- if (this.currentPage > newLastPage) {
16880
- this.currentPage = newLastPage;
16881
- }
16882
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16883
- this.updateRowsVisibility();
16884
- }
16885
- get lastPageNumber() {
16886
- if (this.useInternalPagination) {
16887
- return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
16888
- }
16889
- const { lastPage, rowsPerPage = 10 } = this.pagination || {};
16890
- return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
16891
- }
16892
- handleResize(index, event, reversed = false) {
16893
- if (typeof document === 'undefined')
16894
- return;
16895
- const startX = event.clientX;
16896
- const startWidth = this.columnWidths[index];
16897
- const handleMouseMove = (moveEvent) => {
16898
- const col = this.columns[index];
16899
- if (col == null)
16900
- return;
16901
- const minWidth = col.minWidth || 50;
16902
- const maxWidth = col.maxWidth || 9999;
16903
- const delta = moveEvent.clientX - startX;
16904
- const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
16905
- this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
16906
- const thead = this.queryChildEl('sd-thead');
16907
- thead?.setColumnWidths?.(this.columnWidths);
16908
- this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
16909
- const stickyRightCount = this.stickyColumn?.right || 0;
16910
- const visibleColCount = this.columns.filter(c => c.visible !== false).length;
16911
- const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
16912
- if (isRightStickyEdgeResizer) {
16913
- requestAnimationFrame(() => {
16914
- this.onScroll?.();
16915
- });
16916
- }
16917
- };
16918
- const handleMouseUp = () => {
16919
- document.removeEventListener('mousemove', handleMouseMove);
16920
- document.removeEventListener('mouseup', handleMouseUp);
16921
- };
16922
- document.addEventListener('mousemove', handleMouseMove);
16923
- document.addEventListener('mouseup', handleMouseUp);
16924
- }
16925
- getStickyStyleSync(colIdx) {
16926
- const leftOffset = this.columnWidths
16927
- .slice(0, colIdx)
16928
- .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
16929
- const rightOffset = this.columnWidths
16930
- .filter((_, i) => i >=
16931
- this.columns.filter(c => c.visible !== false).length -
16932
- (this.stickyColumn?.right || 0) && i > colIdx)
16933
- .reduce((a, b) => a + b, 0);
16934
- const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
16935
- const base = {
16936
- '--sticky-left-offset': `${leftOffset}px`,
16937
- '--sticky-right-offset': `${rightOffset}px`,
16938
- };
16939
- if (!visibleCol?.autoWidth) {
16940
- base['width'] = `${this.columnWidths[colIdx]}px`;
16941
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
16942
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
16943
- }
16944
- return base;
16945
- }
16946
- /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
16947
- async getStickyStyle(colIdx) {
16948
- return this.getStickyStyleSync(colIdx);
16949
- }
16950
- // ─── rowspan / colspan registry ─────────────────────────────────
16951
- // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
16952
- // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
16953
- // 덮였는지 판정해 <td>를 그릴지 결정한다.
16954
- spanKey(rowKey, field) {
16955
- return `${rowKey}::${field}`;
16956
- }
16957
- // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
16958
- // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
16959
- // 덮인 셀이 사라지거나 다시 나타난다.
16960
- // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
16961
- // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
16962
- requestAllTrUpdate() {
16963
- this.queryAllTr().forEach(tr => {
16964
- if (typeof tr.bumpSpansVersion === 'function') {
16965
- tr.bumpSpansVersion();
16966
- }
16967
- });
16968
- }
16969
- registerSpanSync(rowKey, field, rowspan, colspan) {
16970
- if (rowKey == null || field === '')
16971
- return;
16972
- const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
16973
- const safeColspan = Math.max(1, Math.floor(colspan || 1));
16974
- const key = this.spanKey(rowKey, field);
16975
- const prev = this.spanRegistry.get(key);
16976
- if (safeRowspan === 1 && safeColspan === 1) {
16977
- if (!prev)
16978
- return;
16979
- this.spanRegistry.delete(key);
16980
- this.requestAllTrUpdate();
16981
- return;
16982
- }
16983
- if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
16984
- return;
16985
- this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
16986
- this.requestAllTrUpdate();
16987
- }
16988
- unregisterSpanSync(rowKey, field) {
16989
- if (rowKey == null || field === '')
16990
- return;
16991
- const key = this.spanKey(rowKey, field);
16992
- if (!this.spanRegistry.has(key))
16993
- return;
16994
- this.spanRegistry.delete(key);
16995
- this.requestAllTrUpdate();
16996
- }
16997
- getSpanSync(rowKey, field) {
16998
- return this.spanRegistry.get(this.spanKey(rowKey, field));
16999
- }
17000
- // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
17001
- // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
17002
- // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
17003
- registerCellClassSync(rowKey, field, cls) {
17004
- if (rowKey == null || field === '')
17005
- return;
17006
- const key = this.spanKey(rowKey, field);
17007
- const safe = (cls ?? '').trim();
17008
- if (safe === '') {
17009
- this.cellClassRegistry.delete(key);
17010
- return;
17011
- }
17012
- this.cellClassRegistry.set(key, safe);
17013
- }
17014
- unregisterCellClassSync(rowKey, field) {
17015
- if (rowKey == null || field === '')
17016
- return;
17017
- this.cellClassRegistry.delete(this.spanKey(rowKey, field));
17018
- }
17019
- getCellClassSync(rowKey, field) {
17020
- return this.cellClassRegistry.get(this.spanKey(rowKey, field));
17021
- }
17022
- // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
17023
- // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
17024
- hasRowspanSync() {
17025
- for (const span of this.spanRegistry.values()) {
17026
- if (span.rowspan > 1)
17027
- return true;
17028
- }
17029
- return false;
17030
- }
17031
- isCoveredSync(rowKey, colIdx, columns) {
17032
- if (this.spanRegistry.size === 0)
17033
- return false;
17034
- const visibleCols = columns.filter(c => c.visible !== false);
17035
- // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
17036
- for (let i = 0; i < colIdx; i++) {
17037
- const c = visibleCols[i];
17038
- if (c == null)
17039
- continue;
17040
- const field = typeof c.field === 'string' ? c.field : c.name;
17041
- const span = this.spanRegistry.get(this.spanKey(rowKey, field));
17042
- if (!span)
17043
- continue;
17044
- if (i + span.colspan > colIdx)
17045
- return true;
17046
- }
17047
- // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
17048
- // rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
17049
- // 없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
17050
- const myRowIdx = this.resolveRowIndex(rowKey);
17051
- if (myRowIdx == null)
17052
- return false;
17053
- for (const [key, span] of this.spanRegistry) {
17054
- if (span.rowspan <= 1)
17055
- continue;
17056
- const sepIdx = key.indexOf('::');
17057
- if (sepIdx < 0)
17058
- continue;
17059
- const otherRowKey = key.slice(0, sepIdx);
17060
- const otherField = key.slice(sepIdx + 2);
17061
- const otherRowIdx = this.resolveRowIndex(otherRowKey);
17062
- if (otherRowIdx == null)
17063
- continue;
17064
- if (otherRowIdx >= myRowIdx)
17065
- continue;
17066
- if (otherRowIdx + span.rowspan <= myRowIdx)
17067
- continue;
17068
- const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
17069
- if (otherColIdx < 0)
17070
- continue;
17071
- if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
17072
- return true;
17073
- }
17074
- return false;
17075
- }
17076
- setRowCountSync(count) {
17077
- const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
17078
- if (safeCount !== this.rowCount) {
17079
- this.lastReachEndNotifiedRowCount = -1;
17080
- }
17081
- this.rowCount = safeCount;
17082
- if (this.useVirtualScroll) {
17083
- this.propagateVirtualUpdate(true);
17084
- }
17085
- }
17086
- /** 가상 스크롤 총 행 수를 설정합니다. */
17087
- async setRowCount(count) {
17088
- this.setRowCountSync(count);
17089
- }
17090
- calculateVisibleRange(scrollTop, containerHeight) {
17091
- const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
17092
- const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
17093
- const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
17094
- const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
17095
- const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
17096
- const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
17097
- const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
17098
- const start = Math.max(0, firstVisible - safeBuffer);
17099
- const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
17100
- return { start, end };
17101
- }
17102
- getPaginationInfoSync() {
17103
- if (!this.useInternalPagination || !this.pagination)
17104
- return null;
17105
- const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
17106
- const endIndex = startIndex + this.innerRowsPerPage;
17107
- return {
17108
- startIndex,
17109
- endIndex,
17110
- currentPage: this.currentPage,
17111
- rowsPerPage: this.innerRowsPerPage,
17112
- };
17113
- }
17114
- /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
17115
- async getPaginationInfo() {
17116
- return this.getPaginationInfoSync();
17117
- }
17118
- getVirtualScrollRangeSync() {
17119
- if (!this.useVirtualScroll)
17120
- return null;
17121
- if (!(this.vsEnd > 0))
17122
- return null;
17123
- return { from: this.vsStart, to: this.vsEnd };
17124
- }
17125
- // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
17126
- // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
17127
- renderAutoRows() {
17128
- if (this.useVirtualScroll)
17129
- return null;
17130
- const allRows = this.rows ?? [];
17131
- const pageInfo = this.getPaginationInfoSync();
17132
- const startIdx = pageInfo?.startIndex ?? 0;
17133
- const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
17134
- return displayed.map((row, i) => {
17135
- const absoluteIdx = startIdx + i;
17136
- return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
17137
- });
17138
- }
17139
- get tableClasses() {
17140
- return [
17141
- 'sd-table',
17142
- this.stickyHeader && 'sd-table--sticky-header',
17143
- this.selectable && 'sd-table--selectable',
17144
- this.resizable && 'sd-table--resizable',
17145
- (this.selectable ||
17146
- (this.stickyColumn?.left ?? 0) > 0 ||
17147
- (this.stickyColumn?.right ?? 0) > 0) &&
17148
- 'sd-table--sticky-column',
17149
- this.scrolledLeft && 'sd-table--scrolled-left',
17150
- this.scrolledRight && 'sd-table--scrolled-right',
17151
- this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
17152
- ]
17153
- .filter(Boolean)
17154
- .join(' ');
17155
- }
17156
- render() {
17157
- const resolvedTableId = this.getResolvedTableId();
17158
- const isNoData = this.rowCount === 0 && !this.isLoading;
17159
- const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
17160
- const noDataTotalHeight = 36 + this.noDataBodyHeight;
17161
- const hostHeight = isNoData
17162
- ? this.height !== undefined
17163
- ? `max(${this.height}, ${noDataTotalHeight}px)`
17164
- : `max(${noDataTotalHeight}px, 100%)`
17165
- : (this.height ?? '100%');
17166
- const hostStyle = {
17167
- '--table-radius': `${TABLE_RADIUS}px`,
17168
- '--table-border-color': TABLE_BORDER.color,
17169
- '--table-border-width': `${TABLE_BORDER.width}px`,
17170
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
17171
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
17172
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
17173
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
17174
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
17175
- '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
17176
- '--table-host-height': hostHeight,
17177
- };
17178
- return (hAsync(Host, { key: 'e4f8c5d93a6fdae077abab4641ea4ea883249cae', style: hostStyle }, hAsync("div", { key: '4af67aafb4cadc6de00ae92884e7d3585d85990b', class: "sd-table__container", style: {
17179
- '--table-width': this.width,
17180
- '--pagination-height': `${paginationHeight}px`,
17181
- } }, hAsync("div", { key: 'd88a3f49c6cd1c0798774d06b9510fa62592138f', class: {
17182
- 'sd-table__wrapper': true,
17183
- 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
17184
- 'sd-table__wrapper--radius-full': this.radius === 'full',
17185
- } }, hAsync("div", { key: '891e2acca41a9224acaa1a688eedbb2defea7964', class: {
17186
- 'sd-table__scroll-container': true,
17187
- 'sd-table__scroll-container--loading': this.isLoading,
17188
- 'sd-table__scroll-container--no-data': isNoData,
17189
- } }, this.isLoading && (hAsync("div", { key: 'e59045daf43b2ac2e34a77e6b3532d5f6b18d1f5', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '88023a5a6a25fef9f643e9c25a822adc292d8dff', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: 'd532beb284595d75086b9fd529ecd23c8ca9f03d', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'f0d1047870fdb069bfc89caf14e52c14c664e57e', class: "sd-table__no-data" }, hAsync("div", { key: '827123263a6dfaef37a59f6773e1385d4fc56579', class: "sd-table__no-data-content", ref: el => {
17190
- this.noDataContentEl = el;
17191
- if (el)
17192
- this.syncNoDataContentObserver();
17193
- } }, hAsync("slot", { key: '208dec9639a23e294eb8b2d806a0bc4a33fbfee7', name: "no-data" }, hAsync("span", { key: '7afeda8315328ffb550bbf977ad8c68aaf7ea8cb' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: '66fc88a1ce062da02512fa4ec8f147cb8a24c876', 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 &&
17194
- this.pagination.rowsPerPage > 0 &&
17195
- this.rowCount > 0 &&
17196
- !this.useVirtualScroll && (hAsync("div", { key: '98a0feac03369f0fb49db1378b0a1bdc84b4cf8e', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'b030119f0952a7375176775c666a16952828057b', 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: '3873d513d3f17a3ff3ae92fcbe38132faef8e07a', value: this.useInternalPagination
17197
- ? this.innerRowsPerPage
17198
- : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
17199
- if (!this.isRowsPerPageValue(e.detail))
17200
- return;
17201
- this.changeRowsPerPage(e.detail);
17202
- } })))))));
17203
- }
17204
- static get watchers() { return {
17205
- "isLoading": [{
17206
- "handleIsLoadingChange": 0
17207
- }],
17208
- "useVirtualScroll": [{
17209
- "handleUseVirtualScrollChange": 0
17210
- }],
17211
- "columns": [{
17212
- "handleColumnsChange": 0
17213
- }],
17214
- "rows": [{
17215
- "handleRowsChange": 0
17216
- }],
17217
- "rowKey": [{
17218
- "handleRowKeyChange": 0
17219
- }],
17220
- "tableId": [{
17221
- "handleTableIdChange": 0
17222
- }],
17223
- "noDataLabel": [{
17224
- "handleNoDataLabelChange": 0
17225
- }],
17226
- "selectable": [{
17227
- "handleConfigChange": 0
17228
- }],
17229
- "resizable": [{
17230
- "handleConfigChange": 0
17231
- }],
17232
- "stickyColumn": [{
17233
- "handleConfigChange": 0
17234
- }],
17235
- "stickyHeader": [{
17236
- "handleConfigChange": 0
17237
- }],
17238
- "dense": [{
17239
- "handleConfigChange": 0
17240
- }],
17241
- "selected": [{
17242
- "handleSelectedChange": 0
17243
- }],
17244
- "pagination": [{
17245
- "handlePaginationChange": 0
17246
- }]
17247
- }; }
17248
- static get style() { return sdTableCss(); }
17249
- static get cmpMeta() { return {
17250
- "$flags$": 777,
17251
- "$tagName$": "sd-table",
17252
- "$members$": {
17253
- "tableId": [513, "table-id"],
17254
- "columns": [16],
17255
- "rows": [16],
17256
- "selected": [1040],
17257
- "rowKey": [1, "row-key"],
17258
- "selectable": [4],
17259
- "resizable": [4],
17260
- "width": [1],
17261
- "height": [1],
17262
- "stickyHeader": [4, "sticky-header"],
17263
- "stickyColumn": [16],
17264
- "radius": [1],
17265
- "noDataLabel": [1, "no-data-label"],
17266
- "isLoading": [4, "is-loading"],
17267
- "pagination": [16],
17268
- "useInternalPagination": [4, "use-internal-pagination"],
17269
- "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
17270
- "dense": [4],
17271
- "useVirtualScroll": [4, "use-virtual-scroll"],
17272
- "rowHeight": [2, "row-height"],
17273
- "virtualBuffer": [2, "virtual-buffer"],
17274
- "virtualEndThreshold": [2, "virtual-end-threshold"],
17275
- "rowsPerPageOption": [16],
17276
- "resolvedNoDataLabel": [32],
17277
- "currentPage": [32],
17278
- "innerRowsPerPage": [32],
17279
- "innerSelected": [32],
17280
- "columnWidths": [32],
17281
- "scrolledLeft": [32],
17282
- "scrolledRight": [32],
17283
- "rowCount": [32],
17284
- "loadingScrollTop": [32],
17285
- "noDataBodyHeight": [32],
17286
- "autoThead": [32],
17287
- "autoTbody": [32],
17288
- "isRowSelected": [64],
17289
- "updateRowSelect": [64],
17290
- "toggleSelectAll": [64],
17291
- "getIsAllChecked": [64],
17292
- "getStickyStyle": [64],
17293
- "setRowCount": [64],
17294
- "getPaginationInfo": [64]
17295
- },
17296
- "$listeners$": undefined,
17297
- "$lazyBundleId$": "-",
17298
- "$attrsToReflect$": [["tableId", "table-id"]]
17299
- }; }
17300
- }
17301
-
17302
16222
  const tab = {
17303
16223
  main: {
17304
16224
  lg: {
@@ -17504,7 +16424,7 @@ class SdTabs {
17504
16424
  };
17505
16425
  }
17506
16426
  render() {
17507
- return (hAsync("div", { key: 'a844eb9710ff03e3878225aa8dc5e14ed270efde', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16427
+ return (hAsync("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
17508
16428
  const badgeName = this.getBadgeName(tab);
17509
16429
  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 => {
17510
16430
  if (e.key === 'Enter' || e.key === ' ') {
@@ -17753,7 +16673,7 @@ class SdTag {
17753
16673
  const config = this.resolvedConfig;
17754
16674
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17755
16675
  const width = this.resolvedWidth;
17756
- return (hAsync(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
16676
+ return (hAsync(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
17757
16677
  '--sd-tag-background': config.background,
17758
16678
  '--sd-tag-content': config.content,
17759
16679
  '--sd-tag-height': config.height,
@@ -17763,7 +16683,7 @@ class SdTag {
17763
16683
  '--sd-tag-font-weight': config.fontWeight,
17764
16684
  '--sd-tag-line-height': config.lineHeight,
17765
16685
  '--sd-tag-radius': config.radius,
17766
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
16686
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
17767
16687
  }
17768
16688
  static get style() { return sdTagCss(); }
17769
16689
  static get cmpMeta() { return {
@@ -17782,292 +16702,6 @@ class SdTag {
17782
16702
  }; }
17783
16703
  }
17784
16704
 
17785
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17786
-
17787
- class SdTbody {
17788
- constructor(hostRef) {
17789
- registerInstance(this, hostRef);
17790
- }
17791
- get el() { return getElement(this); }
17792
- /** 렌더링할 행 데이터 목록 */
17793
- rows = [];
17794
- tableId = '';
17795
- topSpacerHeight = 0;
17796
- bottomSpacerHeight = 0;
17797
- tableEl = null;
17798
- handleRowsChange(newRows) {
17799
- const safeRows = newRows ?? [];
17800
- if (this.tableEl?.setRowCountSync) {
17801
- this.tableEl.setRowCountSync(safeRows.length);
17802
- }
17803
- }
17804
- componentWillLoad() {
17805
- this.syncTableContext();
17806
- this.rows = this.rows ?? [];
17807
- if (this.tableEl?.setRowCountSync) {
17808
- this.tableEl.setRowCountSync(this.rows.length);
17809
- }
17810
- this.el.setSpacersSync = (top, bottom) => {
17811
- this.topSpacerHeight = top;
17812
- this.bottomSpacerHeight = bottom;
17813
- };
17814
- }
17815
- componentDidLoad() {
17816
- this.syncTableContext();
17817
- }
17818
- syncTableContext() {
17819
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
17820
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
17821
- const closest = this.el.closest('sd-table');
17822
- const root = this.el.getRootNode();
17823
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
17824
- const table = closest ?? fromShadow;
17825
- this.tableEl = table;
17826
- const fromMethod = table?.getTableIdSync?.();
17827
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17828
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17829
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17830
- '';
17831
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
17832
- this.tableId = resolvedTableId;
17833
- }
17834
- }
17835
- render() {
17836
- return (hAsync(Host, { key: '72061abfda67f548675b6def5d217d2263b693a9', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'e2ac60a7c395d2a411ac7811851a2916fe762f3c', class: { tbody: true } }, [
17837
- this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17838
- hAsync("slot", { key: 'af37117b1e162581569bcf6d14a8cc3289f9c6d4' }),
17839
- this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17840
- ])));
17841
- }
17842
- static get watchers() { return {
17843
- "rows": [{
17844
- "handleRowsChange": 0
17845
- }]
17846
- }; }
17847
- static get style() { return sdTbodyCss(); }
17848
- static get cmpMeta() { return {
17849
- "$flags$": 777,
17850
- "$tagName$": "sd-tbody",
17851
- "$members$": {
17852
- "rows": [16],
17853
- "tableId": [32],
17854
- "topSpacerHeight": [32],
17855
- "bottomSpacerHeight": [32]
17856
- },
17857
- "$listeners$": undefined,
17858
- "$lazyBundleId$": "-",
17859
- "$attrsToReflect$": []
17860
- }; }
17861
- }
17862
-
17863
- const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
17864
-
17865
- class SdTd {
17866
- constructor(hostRef) {
17867
- registerInstance(this, hostRef);
17868
- }
17869
- get el() { return getElement(this); }
17870
- /** 데이터 필드명 (슬롯 이름 생성에 사용) */
17871
- field;
17872
- /** 행 식별 키 */
17873
- rowKey;
17874
- /** 셀 내용 정렬 */
17875
- align;
17876
- /** 행 병합 수 */
17877
- rowspan;
17878
- /** 열 병합 수 */
17879
- colspan;
17880
- // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
17881
- // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
17882
- // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
17883
- /** td에 병합할 사용자 클래스 */
17884
- sdClass;
17885
- /** 좌측 구분선 표시 여부 */
17886
- dividerLeft = false;
17887
- /** 우측 구분선 표시 여부 */
17888
- dividerRight = false;
17889
- // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
17890
- /** frame 레이아웃 사용 여부 */
17891
- useFrame = false;
17892
- handleFieldChange(_newField, oldField) {
17893
- this.syncSlotName();
17894
- this.syncSpanRegistration();
17895
- this.syncCellClassRegistration(oldField);
17896
- this.syncUseFrameRegistration(oldField);
17897
- }
17898
- handleRowKeyChange(_newKey, oldKey) {
17899
- this.syncSlotName();
17900
- this.syncSpanRegistration();
17901
- this.syncCellClassRegistration(undefined, oldKey);
17902
- this.syncUseFrameRegistration(undefined, oldKey);
17903
- }
17904
- handleSpanChange() {
17905
- this.syncSpanRegistration();
17906
- }
17907
- handleSdClassChange() {
17908
- this.syncCellClassRegistration();
17909
- }
17910
- handleDividerChange() {
17911
- this.syncCellClassRegistration();
17912
- }
17913
- handleUseFrameChange() {
17914
- this.syncUseFrameRegistration();
17915
- this.requestParentTrUpdate();
17916
- }
17917
- componentWillLoad() {
17918
- this.syncSlotName();
17919
- this.syncSpanRegistration();
17920
- this.syncCellClassRegistration();
17921
- this.syncUseFrameRegistration();
17922
- // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
17923
- const parentTr = this.el.parentElement;
17924
- if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
17925
- }
17926
- componentDidLoad() {
17927
- this.syncSlotName();
17928
- this.syncSpanRegistration();
17929
- this.syncCellClassRegistration();
17930
- this.syncUseFrameRegistration();
17931
- }
17932
- // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
17933
- // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
17934
- // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
17935
- connectedCallback() {
17936
- this.syncSpanRegistration();
17937
- this.syncCellClassRegistration();
17938
- this.syncUseFrameRegistration();
17939
- }
17940
- disconnectedCallback() {
17941
- const table = this.findTable();
17942
- if (table != null && this.field !== '' && this.rowKey != null) {
17943
- table.unregisterSpanSync?.(String(this.rowKey), this.field);
17944
- table.unregisterCellClassSync?.(String(this.rowKey), this.field);
17945
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
17946
- this.requestParentTrUpdate();
17947
- }
17948
- }
17949
- findTable() {
17950
- return this.el.closest('sd-table');
17951
- }
17952
- requestParentTrUpdate() {
17953
- const parentTr = this.el.parentElement;
17954
- if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
17955
- return;
17956
- const trAny = parentTr;
17957
- if (typeof trAny.bumpSpansVersion === 'function') {
17958
- trAny.bumpSpansVersion();
17959
- }
17960
- }
17961
- syncSpanRegistration() {
17962
- const table = this.findTable();
17963
- if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
17964
- return;
17965
- const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
17966
- const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
17967
- table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
17968
- this.requestParentTrUpdate();
17969
- }
17970
- // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
17971
- syncCellClassRegistration(prevField, prevRowKey) {
17972
- const table = this.findTable();
17973
- if (!table)
17974
- return;
17975
- const oldField = prevField ?? this.field;
17976
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17977
- if (oldField !== '' && oldRowKey != null) {
17978
- table.unregisterCellClassSync?.(oldRowKey, oldField);
17979
- }
17980
- if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
17981
- return;
17982
- const combinedClass = [
17983
- this.sdClass,
17984
- this.dividerLeft && 'td--divider-left',
17985
- this.dividerRight && 'td--divider-right',
17986
- ]
17987
- .filter(Boolean)
17988
- .join(' ') || undefined;
17989
- table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
17990
- this.requestParentTrUpdate();
17991
- }
17992
- syncUseFrameRegistration(prevField, prevRowKey) {
17993
- const table = this.findTable();
17994
- if (!table)
17995
- return;
17996
- const oldField = prevField ?? this.field;
17997
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17998
- if (oldField !== '' && oldRowKey != null) {
17999
- table.unregisterUseFrameSync?.(oldRowKey, oldField);
18000
- }
18001
- if (this.field === '' || this.rowKey == null)
18002
- return;
18003
- if (this.useFrame) {
18004
- table.registerUseFrameSync?.(String(this.rowKey), this.field);
18005
- }
18006
- else {
18007
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
18008
- }
18009
- }
18010
- syncSlotName() {
18011
- const table = this.el.closest('sd-table');
18012
- const fromMethod = table?.getTableIdSync?.();
18013
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
18014
- const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
18015
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
18016
- '';
18017
- if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
18018
- this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
18019
- }
18020
- }
18021
- render() {
18022
- return (hAsync(Host, { key: 'b2037351ddf7c9a8998befd477ffb81b7f204c99', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'f9d2bd1433c737fc6cb209f45e773c5317cf3cde' })));
18023
- }
18024
- static get watchers() { return {
18025
- "field": [{
18026
- "handleFieldChange": 0
18027
- }],
18028
- "rowKey": [{
18029
- "handleRowKeyChange": 0
18030
- }],
18031
- "rowspan": [{
18032
- "handleSpanChange": 0
18033
- }],
18034
- "colspan": [{
18035
- "handleSpanChange": 0
18036
- }],
18037
- "sdClass": [{
18038
- "handleSdClassChange": 0
18039
- }],
18040
- "dividerLeft": [{
18041
- "handleDividerChange": 0
18042
- }],
18043
- "dividerRight": [{
18044
- "handleDividerChange": 0
18045
- }],
18046
- "useFrame": [{
18047
- "handleUseFrameChange": 0
18048
- }]
18049
- }; }
18050
- static get style() { return sdTdCss(); }
18051
- static get cmpMeta() { return {
18052
- "$flags$": 772,
18053
- "$tagName$": "sd-td",
18054
- "$members$": {
18055
- "field": [1],
18056
- "rowKey": [1, "row-key"],
18057
- "align": [1],
18058
- "rowspan": [2],
18059
- "colspan": [2],
18060
- "sdClass": [1, "sd-class"],
18061
- "dividerLeft": [4, "divider-left"],
18062
- "dividerRight": [4, "divider-right"],
18063
- "useFrame": [4, "use-frame"]
18064
- },
18065
- "$listeners$": undefined,
18066
- "$lazyBundleId$": "-",
18067
- "$attrsToReflect$": []
18068
- }; }
18069
- }
18070
-
18071
16705
  const textLink = {
18072
16706
  sm: {
18073
16707
  gap: "4",
@@ -18356,7 +16990,7 @@ class SdTextarea {
18356
16990
  nativeEl = undefined;
18357
16991
  formField;
18358
16992
  /** 폼 연동용 name 속성 */
18359
- name = nanoid$1();
16993
+ name = nanoid();
18360
16994
  /** 값이 변경될 때 발생합니다. */
18361
16995
  input;
18362
16996
  /** 포커스될 때 발생합니다. */
@@ -18437,7 +17071,7 @@ class SdTextarea {
18437
17071
  '--sd-system-size-field-sm-height': 'auto',
18438
17072
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
18439
17073
  };
18440
- return (hAsync("sd-field", { key: '2ad9f1d11282bcbf4da1d365e8084b3e6dd1a434', 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: '8e70c87579b4d2ec7908b749867ba090cd4ca743', class: "sd-textarea__content" }, hAsync("textarea", { key: 'fe72f7208a22c8f36786cb53b8bbf18e5d7cf939', 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 }))));
17074
+ return (hAsync("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', 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: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, hAsync("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', 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 }))));
18441
17075
  }
18442
17076
  static get watchers() { return {
18443
17077
  "value": [{
@@ -18491,370 +17125,6 @@ class SdTextarea {
18491
17125
  }; }
18492
17126
  }
18493
17127
 
18494
- 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--has-dropdown{cursor:pointer}.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}`;
18495
-
18496
- class SdThead {
18497
- constructor(hostRef) {
18498
- registerInstance(this, hostRef);
18499
- this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
18500
- }
18501
- get el() { return getElement(this); }
18502
- /** 테이블 컬럼 목록 */
18503
- columns;
18504
- /** 행 선택 기능 사용 여부 */
18505
- selectable;
18506
- /** 컬럼 너비 조절 가능 여부 */
18507
- resizable;
18508
- /** 고정 컬럼 설정 */
18509
- stickyColumn;
18510
- /** 헤더 고정 여부 */
18511
- stickyHeader;
18512
- /** 좌측 스크롤 여부 */
18513
- scrolledLeft;
18514
- /** 우측 스크롤 여부 */
18515
- scrolledRight;
18516
- /** 전체 선택 체크박스용 행 데이터 */
18517
- rows = [];
18518
- /** 컬럼 너비 목록 */
18519
- columnWidths = [];
18520
- /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
18521
- sdColumnSort;
18522
- tableId = '';
18523
- _columns = [];
18524
- _selectable = false;
18525
- _resizable = false;
18526
- _stickyColumn = { left: 0, right: 0 };
18527
- _stickyHeader = false;
18528
- _scrolledLeft = false;
18529
- _scrolledRight = false;
18530
- dropdownOpenMap = {};
18531
- tableEl = null;
18532
- dropdownRefs = {};
18533
- dropdownThRefs = {};
18534
- dropdownPortals = {};
18535
- handleColumnsChange(newCols) {
18536
- if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
18537
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
18538
- }
18539
- }
18540
- disconnectedCallback() {
18541
- const portals = this.dropdownPortals ?? {};
18542
- Object.values(portals).forEach(portal => {
18543
- if (portal?.parentNode != null)
18544
- portal.parentNode.removeChild(portal);
18545
- });
18546
- }
18547
- componentWillLoad() {
18548
- this.syncTableContext();
18549
- this.dropdownOpenMap = this.dropdownOpenMap ?? {};
18550
- this.dropdownRefs = this.dropdownRefs ?? {};
18551
- this.dropdownThRefs = this.dropdownThRefs ?? {};
18552
- this.dropdownPortals = this.dropdownPortals ?? {};
18553
- this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
18554
- this.resolveConfig();
18555
- if ((this.columnWidths ?? []).length === 0) {
18556
- this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
18557
- }
18558
- }
18559
- componentDidLoad() {
18560
- this.syncTableContext();
18561
- this.resolveConfig();
18562
- this.initDropdownPortals();
18563
- }
18564
- // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
18565
- // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
18566
- initDropdownPortals() {
18567
- const cols = this._columns ?? [];
18568
- const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
18569
- if (hasDropdownCols.length === 0)
18570
- return;
18571
- for (const col of hasDropdownCols) {
18572
- const colName = col.name;
18573
- // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
18574
- if ((this.dropdownPortals ?? {})[colName] != null)
18575
- continue;
18576
- const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
18577
- if (slotContent == null)
18578
- continue;
18579
- // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
18580
- slotContent.removeAttribute('slot');
18581
- const portal = document.createElement('sd-portal');
18582
- portal.parentRef = this.dropdownThRefs[colName] ?? null;
18583
- portal.open = false;
18584
- // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
18585
- // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
18586
- portal.style.display = 'none';
18587
- portal.addEventListener('sdClose', () => this.closeDropdown(colName));
18588
- portal.appendChild(slotContent);
18589
- document.body.appendChild(portal);
18590
- this.dropdownPortals[colName] = portal;
18591
- }
18592
- }
18593
- syncTableContext() {
18594
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
18595
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
18596
- const closest = this.el.closest('sd-table');
18597
- const root = this.el.getRootNode();
18598
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
18599
- const table = closest ?? fromShadow;
18600
- this.tableEl = table;
18601
- const fromMethod = table?.getTableIdSync?.();
18602
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
18603
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
18604
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
18605
- '';
18606
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
18607
- this.tableId = resolvedTableId;
18608
- }
18609
- }
18610
- resolveConfig() {
18611
- const config = this.tableEl?.getConfigSync?.();
18612
- const resolvedColumns = Array.isArray(this.columns)
18613
- ? this.columns
18614
- : Array.isArray(config?.columns)
18615
- ? config.columns
18616
- : [];
18617
- this._columns = resolvedColumns;
18618
- this._selectable = this.selectable ?? config?.selectable ?? false;
18619
- this._resizable = this.resizable ?? config?.resizable ?? false;
18620
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
18621
- this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
18622
- this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
18623
- this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
18624
- if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
18625
- this.columnWidths = [...config.columnWidths];
18626
- }
18627
- if (!Array.isArray(this.columnWidths)) {
18628
- this.columnWidths = [];
18629
- }
18630
- }
18631
- /** 테이블 설정을 다시 불러옵니다. */
18632
- async refreshConfig() {
18633
- this.resolveConfig();
18634
- this.initDropdownPortals();
18635
- }
18636
- /** 컬럼 너비를 업데이트합니다. */
18637
- async setColumnWidths(widths) {
18638
- this.columnWidths = Array.isArray(widths) ? widths : [];
18639
- }
18640
- /** 전체 선택 체크박스 상태를 갱신합니다. */
18641
- async refreshSelection() {
18642
- const checkbox = this.el.querySelector('sd-checkbox');
18643
- if (checkbox) {
18644
- checkbox.value = this.getIsAllChecked();
18645
- }
18646
- }
18647
- get visibleColumns() {
18648
- return this._columns.filter(col => col.visible !== false);
18649
- }
18650
- getStickyStyle(colIdx) {
18651
- if (this.tableEl?.getStickyStyleSync) {
18652
- return this.tableEl.getStickyStyleSync(colIdx);
18653
- }
18654
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
18655
- (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
18656
- const rightOffset = this.columnWidths
18657
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
18658
- .reduce((a, b) => a + b, 0);
18659
- const col = this.visibleColumns[colIdx];
18660
- const base = {
18661
- '--sticky-left-offset': `${leftOffset}px`,
18662
- '--sticky-right-offset': `${rightOffset}px`,
18663
- };
18664
- if (!col?.autoWidth) {
18665
- base['width'] = `${this.columnWidths[colIdx]}px`;
18666
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
18667
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
18668
- }
18669
- return base;
18670
- }
18671
- handleResize(index, event, reversed = false) {
18672
- if (this.tableEl?.handleResize) {
18673
- this.tableEl.handleResize(index, event, reversed);
18674
- }
18675
- }
18676
- handleColumnSort = (col) => {
18677
- this.sdColumnSort.emit({ column: col });
18678
- };
18679
- toggleDropdown(name) {
18680
- const isOpen = this.dropdownOpenMap[name] !== true;
18681
- const portals = this.dropdownPortals ?? {};
18682
- const newMap = { ...this.dropdownOpenMap };
18683
- // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
18684
- for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
18685
- const shouldBeOpen = col.name === name ? isOpen : false;
18686
- newMap[col.name] = shouldBeOpen;
18687
- const portal = portals[col.name];
18688
- if (portal != null)
18689
- portal.open = shouldBeOpen;
18690
- }
18691
- this.dropdownOpenMap = newMap;
18692
- }
18693
- closeDropdown(name) {
18694
- if (this.dropdownOpenMap[name] !== true)
18695
- return;
18696
- this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
18697
- const portal = (this.dropdownPortals ?? {})[name];
18698
- if (portal != null)
18699
- portal.open = false;
18700
- }
18701
- handleSelectAll(checked) {
18702
- const nextChecked = !!checked;
18703
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18704
- if (this.tableEl?.toggleSelectAllSync) {
18705
- this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
18706
- }
18707
- }
18708
- getIsAllChecked() {
18709
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18710
- if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
18711
- return this.tableEl.getIsAllCheckedSync(safeRows);
18712
- }
18713
- return false;
18714
- }
18715
- render() {
18716
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18717
- const dropdownOpenMap = this.dropdownOpenMap ?? {};
18718
- const dropdownRefs = this.dropdownRefs ?? {};
18719
- const stickyLeftCount = this._stickyColumn.left || 0;
18720
- const stickyRightCount = this._stickyColumn.right || 0;
18721
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
18722
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18723
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18724
- const lastColIdx = this.visibleColumns.length - 1;
18725
- const headStyle = {
18726
- '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
18727
- '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
18728
- '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
18729
- '--table-header-bg': TABLE_HEADER_COLORS.bg,
18730
- '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
18731
- '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
18732
- '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
18733
- '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
18734
- '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
18735
- '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
18736
- '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
18737
- '--table-border-color': TABLE_BORDER.color,
18738
- '--table-border-width': `${TABLE_BORDER.width}px`,
18739
- };
18740
- return (hAsync(Host, { key: '2f2218c9c0ba02fc59eb026944a3e26fbf741f23', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '008fc1ef83c882dd85fd9d6b8490a3246183e758', class: {
18741
- 'thead': true,
18742
- 'thead--sticky': this._stickyHeader,
18743
- } }, hAsync("tr", { key: 'ff679599539ea36d74160d31258bc06c4c6d0fda', class: "tr" }, this._selectable && (hAsync("th", { key: '9fd149c26ec979f3f82eb5b1fad56cf963ee1e7f', class: {
18744
- 'th': true,
18745
- 'th--selected': true,
18746
- 'sticky-left': true,
18747
- 'sticky-left-edge': stickyLeftCount === 0,
18748
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18749
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'feab85e049c99a1a565b250f5b0aa0ed6d986d65', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: 'bf68afc8990977e607cbd6f25b19f6442b7fbab3', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
18750
- 'th': true,
18751
- [`${col.thClass}`]: Boolean(col.thClass),
18752
- 'sticky-left': true,
18753
- 'sticky-left-edge': idx === stickyLeftCount - 1,
18754
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18755
- 'th--has-dropdown': col.hasDropdown === true,
18756
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
18757
- ? el => {
18758
- this.dropdownThRefs[col.name] = el;
18759
- }
18760
- : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : 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: (e) => {
18761
- e.stopPropagation();
18762
- this.handleColumnSort(col);
18763
- }, 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: {
18764
- 'th__dropdown-trigger': true,
18765
- 'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
18766
- }, ref: el => {
18767
- dropdownRefs[col.name] = el;
18768
- }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
18769
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18770
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18771
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
18772
- const actualColIdx = stickyLeftCount + relativeIdx;
18773
- return (hAsync("th", { key: col.name, class: {
18774
- 'th': true,
18775
- [`${col.thClass}`]: Boolean(col.thClass),
18776
- 'th--has-dropdown': col.hasDropdown === true,
18777
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18778
- ? el => {
18779
- this.dropdownThRefs[col.name] = el;
18780
- }
18781
- : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : 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: (e) => {
18782
- e.stopPropagation();
18783
- this.handleColumnSort(col);
18784
- }, 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: {
18785
- 'th__dropdown-trigger': true,
18786
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18787
- }, ref: el => {
18788
- this.dropdownRefs[col.name] = el;
18789
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
18790
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18791
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18792
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
18793
- }), stickyRightCols.map((col, relativeIdx) => {
18794
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
18795
- return (hAsync("th", { key: col.name, class: {
18796
- 'th': true,
18797
- [`${col.thClass}`]: Boolean(col.thClass),
18798
- 'sticky-right': true,
18799
- 'sticky-right-edge': relativeIdx === 0,
18800
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
18801
- 'th--has-dropdown': col.hasDropdown === true,
18802
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18803
- ? el => {
18804
- this.dropdownThRefs[col.name] = el;
18805
- }
18806
- : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : 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: (e) => {
18807
- e.stopPropagation();
18808
- this.handleColumnSort(col);
18809
- }, 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: {
18810
- 'th__dropdown-trigger': true,
18811
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18812
- }, ref: el => {
18813
- this.dropdownRefs[col.name] = el;
18814
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
18815
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18816
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18817
- hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
18818
- })))));
18819
- }
18820
- static get watchers() { return {
18821
- "columns": [{
18822
- "handleColumnsChange": 0
18823
- }]
18824
- }; }
18825
- static get style() { return sdTheadCss(); }
18826
- static get cmpMeta() { return {
18827
- "$flags$": 512,
18828
- "$tagName$": "sd-thead",
18829
- "$members$": {
18830
- "columns": [16],
18831
- "selectable": [4],
18832
- "resizable": [4],
18833
- "stickyColumn": [16],
18834
- "stickyHeader": [4, "sticky-header"],
18835
- "scrolledLeft": [4, "scrolled-left"],
18836
- "scrolledRight": [4, "scrolled-right"],
18837
- "rows": [16],
18838
- "columnWidths": [1040],
18839
- "tableId": [32],
18840
- "_columns": [32],
18841
- "_selectable": [32],
18842
- "_resizable": [32],
18843
- "_stickyColumn": [32],
18844
- "_stickyHeader": [32],
18845
- "_scrolledLeft": [32],
18846
- "_scrolledRight": [32],
18847
- "dropdownOpenMap": [32],
18848
- "refreshConfig": [64],
18849
- "setColumnWidths": [64],
18850
- "refreshSelection": [64]
18851
- },
18852
- "$listeners$": undefined,
18853
- "$lazyBundleId$": "-",
18854
- "$attrsToReflect$": []
18855
- }; }
18856
- }
18857
-
18858
17128
  const toast = {
18859
17129
  icon: "16",
18860
17130
  "default": {
@@ -18946,12 +17216,12 @@ class SdToast {
18946
17216
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
18947
17217
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
18948
17218
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
18949
- return (hAsync("div", { key: '434d4e58eed6589ed5cceb9df4c131a0594055e6', style: {
17219
+ return (hAsync("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
18950
17220
  '--sd-toast-bg': typeConfig.bg,
18951
17221
  '--sd-toast-text': typeConfig.content,
18952
17222
  '--sd-toast-icon': iconColor,
18953
17223
  '--sd-toast-link': linkColor,
18954
- } }, hAsync("div", { key: '51209146aa46961d9a673417b72e96e1aef3f53b', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'a2b10d38936b85174d0315cae7bee2115ae06aba', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '96243916be0cf117a0f85801de8294eec8f7900b', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'bb5b2363aafb9322a356f7e0e94acd5b2723f8d2', class: "sd-toast__content" }, hAsync("span", { key: '25535fc30123491e5cea78ae17ee8e32c2c8b986', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'bf110d2492ae38fbac422f7fbf6177bbd56fae2d', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'f8543c13d11222bac64dd4eab79cda0eaf78a396', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: 'c9ccf9348f116c3a5b22d649407c281cb22c09ab', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
17224
+ } }, hAsync("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, hAsync("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
18955
17225
  }
18956
17226
  static get style() { return sdToastCss(); }
18957
17227
  static get cmpMeta() { return {
@@ -19213,7 +17483,7 @@ class SdToastContainer {
19213
17483
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
19214
17484
  const indexMap = new Map();
19215
17485
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
19216
- return (hAsync("div", { key: '005ce1d424e17b13a685c99e49d2eeda295d4346', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17486
+ return (hAsync("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
19217
17487
  this.expanded = true;
19218
17488
  this.pauseTimers();
19219
17489
  }, onMouseLeave: () => {
@@ -19374,7 +17644,7 @@ class SdToggle {
19374
17644
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
19375
17645
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
19376
17646
  };
19377
- return (hAsync("label", { key: 'e60aa1379566c4586ea4f7e852425f8829e806d1', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '9f2260749b392c0c72ad2a53b515f0b886e62c3a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
17647
+ return (hAsync("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
19378
17648
  }
19379
17649
  static get style() { return sdToggleCss(); }
19380
17650
  static get cmpMeta() { return {
@@ -19562,7 +17832,7 @@ class SdTooltip {
19562
17832
  const bodyHTML = this.message && this.message.length > 0
19563
17833
  ? this.message.map(line => `<div>${line}</div>`).join('')
19564
17834
  : this.slotContentHTML;
19565
- return (hAsync(Fragment, { key: '107b6b1440f67af45a464b40087332516629307e' }, hAsync("div", { key: 'fc25ef3729300faabb5ce8b2c6b68ecded179231', 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: '05260374115f355f0fda28e02cf4a3a04e0dff42', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '49a4403383ff133755e0347a27c5552e7b2ed73a', ref: el => (this.menuEl = el), class: {
17835
+ return (hAsync(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, hAsync("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', 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: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
19566
17836
  'sd-floating-menu': true,
19567
17837
  [`sd-floating-menu--${tooltipType}`]: true,
19568
17838
  [`sd-floating-menu--${placement}`]: true,
@@ -19570,7 +17840,7 @@ class SdTooltip {
19570
17840
  }, style: {
19571
17841
  '--sd-floating-bg': typeConfig.bg,
19572
17842
  '--sd-floating-content': typeConfig.content,
19573
- }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '7944b50d1b97f97689572f672e86c80c0a4d516e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '582508e26720f9890fec206b5d78a054797d85d1' })), hAsync("div", { key: 'a4555d1a0fc7a6c76206626fe8e7dec897a07e74', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '2852500a51166b6b851fd7361f75e16d1bcb9d5c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
17843
+ }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), hAsync("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
19574
17844
  }
19575
17845
  static get style() { return sdTooltipCss(); }
19576
17846
  static get cmpMeta() { return {
@@ -19605,315 +17875,6 @@ class SdTooltip {
19605
17875
  }; }
19606
17876
  }
19607
17877
 
19608
- const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.tr--separator:hover .td{background-color:var(--table-separator-color, #eeeeee)}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--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}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.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}.td.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}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.tr--separator:hover .td.sticky-left,.tr--separator:hover .td.sticky-right{background-color:var(--table-separator-color, #eeeeee)}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.tr--separator--dense .td--separator{height:var(--table-separator-dense-width, 4px)}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}`;
19609
-
19610
- class SdTr {
19611
- constructor(hostRef) {
19612
- registerInstance(this, hostRef);
19613
- }
19614
- get el() { return getElement(this); }
19615
- /** 테이블 컬럼 목록 */
19616
- columns;
19617
- /** 행 선택 기능 사용 여부 */
19618
- selectable;
19619
- /** 고정 컬럼 설정 */
19620
- stickyColumn;
19621
- /** 행 식별 키 */
19622
- rowKey = '';
19623
- /** 행 데이터 객체 */
19624
- row = {};
19625
- /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
19626
- separator = null;
19627
- tableId = '';
19628
- columnWidths = [];
19629
- isVisible = true;
19630
- spansVersion = 0;
19631
- _columns = [];
19632
- _selectable = false;
19633
- _stickyColumn = { left: 0, right: 0 };
19634
- _scrolledLeft = false;
19635
- _scrolledRight = false;
19636
- _dense = false;
19637
- tableEl = null;
19638
- componentWillLoad() {
19639
- this.row = this.row ?? {};
19640
- this.syncTableContext();
19641
- this.columnWidths = this.columnWidths ?? [];
19642
- this.resolveConfig();
19643
- this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
19644
- this.updateVisibilitySync();
19645
- }
19646
- componentDidLoad() {
19647
- this.syncTableContext();
19648
- }
19649
- syncTableContext() {
19650
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
19651
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
19652
- const closest = this.el.closest('sd-table');
19653
- const root = this.el.getRootNode();
19654
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
19655
- const table = closest ?? fromShadow;
19656
- this.tableEl = table;
19657
- const fromMethod = table?.getTableIdSync?.();
19658
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
19659
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
19660
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
19661
- '';
19662
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
19663
- this.tableId = resolvedTableId;
19664
- }
19665
- }
19666
- resolveConfig() {
19667
- const config = this.tableEl?.getConfigSync?.();
19668
- this._columns = this.columns ?? config?.columns ?? [];
19669
- this._selectable = this.selectable ?? config?.selectable ?? false;
19670
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
19671
- this._scrolledLeft = config?.scrolledLeft ?? false;
19672
- this._scrolledRight = config?.scrolledRight ?? false;
19673
- this._dense = config?.dense ?? false;
19674
- if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
19675
- this.columnWidths = [...config.columnWidths];
19676
- }
19677
- }
19678
- /** 테이블 설정을 다시 불러옵니다. */
19679
- async refreshConfig() {
19680
- this.resolveConfig();
19681
- }
19682
- /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
19683
- async bumpSpansVersion() {
19684
- this.spansVersion = this.spansVersion + 1;
19685
- }
19686
- /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
19687
- async updateVisibility() {
19688
- this.updateVisibilitySync();
19689
- }
19690
- updateVisibilitySync() {
19691
- const rowIndex = parseInt(this.rowKey, 10);
19692
- const pageInfo = this.tableEl?.getPaginationInfoSync?.();
19693
- if (!pageInfo) {
19694
- this.isVisible = true;
19695
- return;
19696
- }
19697
- this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
19698
- }
19699
- /** 컬럼 너비를 업데이트합니다. */
19700
- async setColumnWidths(widths) {
19701
- this.columnWidths = widths;
19702
- }
19703
- /** 체크박스 선택 상태를 갱신합니다. */
19704
- async refreshSelection() {
19705
- const checkbox = this.el.querySelector('sd-checkbox');
19706
- if (checkbox) {
19707
- checkbox.value = this.isSelected();
19708
- }
19709
- }
19710
- get visibleColumns() {
19711
- return this._columns.filter(col => col.visible !== false);
19712
- }
19713
- formatValue(value) {
19714
- if (value === null || value === undefined) {
19715
- return '';
19716
- }
19717
- if (typeof value === 'number') {
19718
- return value.toLocaleString();
19719
- }
19720
- return String(value);
19721
- }
19722
- getCellValue(column) {
19723
- const { field, format, name } = column;
19724
- const value = typeof field === 'function'
19725
- ? field(this.row)
19726
- : field !== ''
19727
- ? this.row[field]
19728
- : this.row[name];
19729
- return format ? format(value, this.row) : this.formatValue(value);
19730
- }
19731
- getStickyStyle(colIdx) {
19732
- if (this.tableEl?.getStickyStyleSync) {
19733
- return this.tableEl.getStickyStyleSync(colIdx);
19734
- }
19735
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
19736
- const rightOffset = this.columnWidths
19737
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
19738
- .reduce((a, b) => a + b, 0);
19739
- const col = this.visibleColumns[colIdx];
19740
- const base = {
19741
- '--sticky-left-offset': `${leftOffset}px`,
19742
- '--sticky-right-offset': `${rightOffset}px`,
19743
- };
19744
- if (!col?.autoWidth) {
19745
- base['width'] = `${this.columnWidths[colIdx]}px`;
19746
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
19747
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
19748
- }
19749
- return base;
19750
- }
19751
- isSelected() {
19752
- if (this.tableEl?.isRowSelectedSync) {
19753
- return this.tableEl.isRowSelectedSync(this.row);
19754
- }
19755
- return false;
19756
- }
19757
- handleSelect() {
19758
- if (this.tableEl?.updateRowSelectSync) {
19759
- this.tableEl.updateRowSelectSync(this.row);
19760
- }
19761
- }
19762
- getSpanFor(col) {
19763
- if (!this.tableEl?.getSpanSync)
19764
- return undefined;
19765
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19766
- return this.tableEl.getSpanSync(this.rowKey, fieldName);
19767
- }
19768
- isCovered(colIdx) {
19769
- if (!this.tableEl?.isCoveredSync)
19770
- return false;
19771
- return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
19772
- }
19773
- getCellClassFor(col) {
19774
- if (!this.tableEl?.getCellClassSync)
19775
- return undefined;
19776
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19777
- return this.tableEl.getCellClassSync(this.rowKey, fieldName);
19778
- }
19779
- getFramePaddingStyle(field) {
19780
- if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
19781
- return undefined;
19782
- return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
19783
- }
19784
- expandCellClass(classStr) {
19785
- if (classStr == null || classStr === '')
19786
- return {};
19787
- return Object.fromEntries(classStr
19788
- .split(/\s+/)
19789
- .filter(Boolean)
19790
- .map(c => [c, true]));
19791
- }
19792
- render() {
19793
- const stickyLeftCount = this._stickyColumn.left || 0;
19794
- const stickyRightCount = this._stickyColumn.right || 0;
19795
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
19796
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
19797
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
19798
- const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
19799
- const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
19800
- const effectiveDense = this._dense && !isUseFrameRow;
19801
- const rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
19802
- const rowPaddingX = effectiveDense
19803
- ? TABLE_BODY_LAYOUT.densePaddingX
19804
- : TABLE_BODY_LAYOUT.paddingX;
19805
- const rowStyle = {
19806
- 'display': this.isVisible ? '' : 'none',
19807
- '--table-body-height': `${rowLayoutY.height}px`,
19808
- '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
19809
- '--table-body-padding-x': `${rowPaddingX}px`,
19810
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
19811
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
19812
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
19813
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
19814
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
19815
- '--table-border-color': TABLE_BORDER.color,
19816
- '--table-border-width': `${TABLE_BORDER.width}px`,
19817
- '--table-separator-color': TABLE_SEPARATOR.color,
19818
- '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
19819
- '--table-separator-dense-width': `${TABLE_SEPARATOR.denseWidth}px`,
19820
- };
19821
- if (this.separator != null) {
19822
- const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
19823
- const isDense = this.separator === 4;
19824
- return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--separator': true, 'tr--separator--dense': isDense } }, hAsync("td", { colSpan: totalCols, class: "td td--separator" }))));
19825
- }
19826
- return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
19827
- 'td': true,
19828
- 'td--selected': true,
19829
- 'sticky-left': true,
19830
- 'sticky-left-edge': stickyLeftCount === 0,
19831
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
19832
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
19833
- if (this.isCovered(idx))
19834
- return null;
19835
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19836
- const span = this.getSpanFor(col);
19837
- const sdCellClass = this.getCellClassFor(col);
19838
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19839
- 'td': true,
19840
- [`td--${col.align || 'left'}`]: true,
19841
- 'sticky-left': true,
19842
- 'sticky-left-edge': idx === stickyLeftCount - 1,
19843
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
19844
- [`${col.tdClass}`]: Boolean(col.tdClass),
19845
- ...this.expandCellClass(sdCellClass),
19846
- }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19847
- }), middleCols.map((col, relativeIdx) => {
19848
- const actualColIdx = stickyLeftCount + relativeIdx;
19849
- if (this.isCovered(actualColIdx))
19850
- return null;
19851
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19852
- const span = this.getSpanFor(col);
19853
- const sdCellClass = this.getCellClassFor(col);
19854
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19855
- td: true,
19856
- [`td--${col.align || 'left'}`]: true,
19857
- [`${col.tdClass}`]: Boolean(col.tdClass),
19858
- ...this.expandCellClass(sdCellClass),
19859
- }, style: {
19860
- ...this.getStickyStyle(actualColIdx),
19861
- ...this.getFramePaddingStyle(fieldName),
19862
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19863
- }), stickyRightCols.map((col, relativeIdx) => {
19864
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
19865
- if (this.isCovered(actualColIdx))
19866
- return null;
19867
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19868
- const span = this.getSpanFor(col);
19869
- const sdCellClass = this.getCellClassFor(col);
19870
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19871
- 'td': true,
19872
- [`td--${col.align || 'left'}`]: true,
19873
- 'sticky-right': true,
19874
- 'sticky-right-edge': relativeIdx === 0,
19875
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
19876
- [`${col.tdClass}`]: Boolean(col.tdClass),
19877
- ...this.expandCellClass(sdCellClass),
19878
- }, style: {
19879
- ...this.getStickyStyle(actualColIdx),
19880
- ...this.getFramePaddingStyle(fieldName),
19881
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19882
- }))));
19883
- }
19884
- static get style() { return sdTrCss(); }
19885
- static get cmpMeta() { return {
19886
- "$flags$": 772,
19887
- "$tagName$": "sd-tr",
19888
- "$members$": {
19889
- "columns": [16],
19890
- "selectable": [4],
19891
- "stickyColumn": [16],
19892
- "rowKey": [1, "row-key"],
19893
- "row": [16],
19894
- "separator": [8],
19895
- "tableId": [32],
19896
- "columnWidths": [32],
19897
- "isVisible": [32],
19898
- "spansVersion": [32],
19899
- "_columns": [32],
19900
- "_selectable": [32],
19901
- "_stickyColumn": [32],
19902
- "_scrolledLeft": [32],
19903
- "_scrolledRight": [32],
19904
- "_dense": [32],
19905
- "refreshConfig": [64],
19906
- "bumpSpansVersion": [64],
19907
- "updateVisibility": [64],
19908
- "setColumnWidths": [64],
19909
- "refreshSelection": [64]
19910
- },
19911
- "$listeners$": undefined,
19912
- "$lazyBundleId$": "-",
19913
- "$attrsToReflect$": []
19914
- }; }
19915
- }
19916
-
19917
17878
  registerComponents([
19918
17879
  SdActionModal,
19919
17880
  SdBadge,
@@ -19961,19 +17922,14 @@ registerComponents([
19961
17922
  SdSelectListbox,
19962
17923
  SdSelectTrigger,
19963
17924
  SdSwitch,
19964
- SdTable,
19965
17925
  SdTabs,
19966
17926
  SdTag,
19967
- SdTbody,
19968
- SdTd,
19969
17927
  SdTextLink,
19970
17928
  SdTextarea,
19971
- SdThead,
19972
17929
  SdToast,
19973
17930
  SdToastContainer,
19974
17931
  SdToggle,
19975
17932
  SdTooltip,
19976
- SdTr,
19977
17933
  ]);
19978
17934
 
19979
17935
  exports.hydrateApp = hydrateApp;