@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.js CHANGED
@@ -131,12 +131,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
131
131
  /*hydrateAppClosure start*/
132
132
 
133
133
 
134
- var node_crypto = require('node:crypto');
135
-
136
134
  const NAMESPACE = 'design-system';
137
135
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
138
136
 
139
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-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}";
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-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}";
140
138
 
141
139
  /*
142
140
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5135,15 +5133,6 @@ var registerComponents = (Cstrs) => {
5135
5133
  }
5136
5134
  };
5137
5135
  var win = window;
5138
- var readTask = (cb) => {
5139
- nextTick(() => {
5140
- try {
5141
- cb();
5142
- } catch (e) {
5143
- consoleError(e);
5144
- }
5145
- });
5146
- };
5147
5136
  var writeTask = (cb) => {
5148
5137
  nextTick(() => {
5149
5138
  try {
@@ -5426,13 +5415,13 @@ class SdBadge {
5426
5415
  }
5427
5416
 
5428
5417
  /* @ts-self-types="./index.d.ts" */
5429
- let urlAlphabet$1 =
5418
+ let urlAlphabet =
5430
5419
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
5431
- let nanoid$1 = (size = 21) => {
5420
+ let nanoid = (size = 21) => {
5432
5421
  let id = '';
5433
5422
  let i = size | 0;
5434
5423
  while (i--) {
5435
- id += urlAlphabet$1[(Math.random() * 64) | 0];
5424
+ id += urlAlphabet[(Math.random() * 64) | 0];
5436
5425
  }
5437
5426
  return id
5438
5427
  };
@@ -5575,7 +5564,7 @@ class SdBarcodeInput {
5575
5564
  nativeEl = undefined;
5576
5565
  formField;
5577
5566
  /** 폼 연동용 name 속성 */
5578
- name = nanoid$1();
5567
+ name = nanoid();
5579
5568
  /** 입력값 변경 시 발생합니다. */
5580
5569
  input;
5581
5570
  /** 포커스 진입 시 발생합니다. */
@@ -6792,8 +6781,7 @@ const datepicker = {
6792
6781
  group: {
6793
6782
  gap: "12"
6794
6783
  }
6795
- }
6796
- }
6784
+ }}
6797
6785
  };
6798
6786
  var datepickerTokens = {
6799
6787
  datepicker: datepicker
@@ -7988,13 +7976,7 @@ const color = {
7988
7976
  },
7989
7977
  divider: {
7990
7978
  "default": "#E1E1E1"
7991
- },
7992
- blue: {
7993
- strong: "#0075FF"},
7994
- darkblue: {
7995
- strong: "#006AC1"},
7996
- grey: {
7997
- strong: "#737373"}};
7979
+ }};
7998
7980
  const shadow = {
7999
7981
  spread: {
8000
7982
  md: {
@@ -8154,7 +8136,7 @@ class SdChipInput {
8154
8136
  /** 입력 placeholder */
8155
8137
  placeholder = '입력해 주세요.';
8156
8138
  /** 폼 연동용 name 속성 */
8157
- name = nanoid$1();
8139
+ name = nanoid();
8158
8140
  /** 유효성 검사 규칙 목록 */
8159
8141
  rules = [];
8160
8142
  /** 에러 상태 여부 */
@@ -8757,7 +8739,7 @@ const CIRCLE_PROGRESS_RADIUS = 34;
8757
8739
  const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
8758
8740
  const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;
8759
8741
 
8760
- 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}}`;
8742
+ 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}}`;
8761
8743
 
8762
8744
  class SdCircleProgress {
8763
8745
  constructor(hostRef) {
@@ -8832,7 +8814,7 @@ const CONFIRM_MODAL_ICON_COLOR = {
8832
8814
  const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
8833
8815
  const SUB_BUTTON_PRESET = 'neutral_outline_md';
8834
8816
 
8835
- 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}`;
8817
+ 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}`;
8836
8818
 
8837
8819
  class SdConfirmModal {
8838
8820
  constructor(hostRef) {
@@ -8842,8 +8824,8 @@ class SdConfirmModal {
8842
8824
  this.ok = createEvent(this, "sdOk", 7);
8843
8825
  }
8844
8826
  get el() { return getElement(this); }
8845
- hasSlottedContent = false;
8846
- customContentRef;
8827
+ hasTagSlot = false;
8828
+ hasOptionSlot = false;
8847
8829
  slotObserver;
8848
8830
  /** 모달 타입 (아이콘·버튼 색상 결정) */
8849
8831
  type = 'positive';
@@ -8861,14 +8843,12 @@ class SdConfirmModal {
8861
8843
  mainButtonLabel = '확인';
8862
8844
  /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
8863
8845
  subButtonLabel = '';
8864
- /** 콘텐츠 박스에 표시할 태그 프리셋 */
8846
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
8865
8847
  tagPreset = 'square_sm_grey';
8866
- /** 콘텐츠 박스에 표시할 태그 레이블 */
8848
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
8867
8849
  tagLabel = '';
8868
- /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
8850
+ /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
8869
8851
  slotLabel = '';
8870
- /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
8871
- tagContents;
8872
8852
  /** 닫기 버튼 클릭 시 발생합니다. */
8873
8853
  close;
8874
8854
  /** 취소 버튼 클릭 시 발생합니다. */
@@ -8887,17 +8867,6 @@ class SdConfirmModal {
8887
8867
  characterData: true,
8888
8868
  });
8889
8869
  }
8890
- componentDidRender() {
8891
- if (this.customContentRef && this.tagContents instanceof HTMLElement) {
8892
- if (typeof this.customContentRef.replaceChildren === 'function') {
8893
- this.customContentRef.replaceChildren(this.tagContents);
8894
- }
8895
- else {
8896
- this.customContentRef.innerHTML = '';
8897
- this.customContentRef.appendChild(this.tagContents);
8898
- }
8899
- }
8900
- }
8901
8870
  disconnectedCallback() {
8902
8871
  this.slotObserver?.disconnect();
8903
8872
  }
@@ -8907,29 +8876,39 @@ class SdConfirmModal {
8907
8876
  get resolvedMainButton() {
8908
8877
  return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
8909
8878
  }
8910
- get hasTagContent() {
8911
- return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
8912
- (this.slotLabel !== undefined && this.slotLabel !== ''));
8879
+ /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
8880
+ get showTagBox() {
8881
+ return this.tagLabel !== '' || this.hasTagSlot;
8913
8882
  }
8914
- get showContentBox() {
8915
- return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
8883
+ /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
8884
+ get showOption() {
8885
+ return this.slotLabel !== '' || this.hasOptionSlot;
8916
8886
  }
8887
+ /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
8917
8888
  syncHasSlottedContent() {
8918
- const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
8919
- node.classList.contains('sd-confirm-modal')) &&
8920
- (node.nodeType === Node.ELEMENT_NODE ||
8921
- (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
8922
- if (hasSlottedContent !== this.hasSlottedContent) {
8923
- this.hasSlottedContent = hasSlottedContent;
8924
- }
8889
+ let hasTagSlot = false;
8890
+ let hasOptionSlot = false;
8891
+ Array.from(this.el.children).forEach(node => {
8892
+ if (!(node instanceof HTMLElement))
8893
+ return;
8894
+ if (node.classList.contains('sd-confirm-modal'))
8895
+ return;
8896
+ const slot = node.getAttribute('slot');
8897
+ if (slot === 'tag')
8898
+ hasTagSlot = true;
8899
+ else if (slot === 'option')
8900
+ hasOptionSlot = true;
8901
+ });
8902
+ if (hasTagSlot !== this.hasTagSlot)
8903
+ this.hasTagSlot = hasTagSlot;
8904
+ if (hasOptionSlot !== this.hasOptionSlot)
8905
+ this.hasOptionSlot = hasOptionSlot;
8925
8906
  }
8926
8907
  render() {
8927
8908
  const type = this.resolvedType;
8928
8909
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
8929
8910
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
8930
- 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 => {
8931
- this.customContentRef = el;
8932
- } })) : (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() }))));
8911
+ 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() }))));
8933
8912
  }
8934
8913
  static get style() { return sdConfirmModalCss(); }
8935
8914
  static get cmpMeta() { return {
@@ -8947,8 +8926,8 @@ class SdConfirmModal {
8947
8926
  "tagPreset": [1, "tag-preset"],
8948
8927
  "tagLabel": [1, "tag-label"],
8949
8928
  "slotLabel": [1, "slot-label"],
8950
- "tagContents": [16],
8951
- "hasSlottedContent": [32]
8929
+ "hasTagSlot": [32],
8930
+ "hasOptionSlot": [32]
8952
8931
  },
8953
8932
  "$listeners$": undefined,
8954
8933
  "$lazyBundleId$": "-",
@@ -9184,7 +9163,7 @@ class SdDatePicker {
9184
9163
  formField;
9185
9164
  closeAnimationTimer;
9186
9165
  /** 폼 연동용 name 속성 */
9187
- name = nanoid$1();
9166
+ name = nanoid();
9188
9167
  watchIsOpen(newValue) {
9189
9168
  this.focused = newValue;
9190
9169
  }
@@ -9249,9 +9228,9 @@ class SdDatePicker {
9249
9228
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9250
9229
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9251
9230
  };
9252
- 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 => {
9231
+ 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 => {
9253
9232
  this.triggerRef = el;
9254
- } }, 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 })))));
9233
+ } }, 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 })))));
9255
9234
  }
9256
9235
  static get watchers() { return {
9257
9236
  "isOpen": [{
@@ -9339,7 +9318,7 @@ class SdDatePickerTrigger {
9339
9318
  ? DATEPICKER_COLORS.icon.disabled
9340
9319
  : DATEPICKER_COLORS.icon.default,
9341
9320
  };
9342
- return (hAsync("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9321
+ return (hAsync("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9343
9322
  'sd-date-picker-trigger': true,
9344
9323
  'sd-date-picker-trigger--disabled': this.disabled,
9345
9324
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -9347,7 +9326,7 @@ class SdDatePickerTrigger {
9347
9326
  e.preventDefault();
9348
9327
  this.handleClick();
9349
9328
  }
9350
- } }, 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)));
9329
+ } }, 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)));
9351
9330
  }
9352
9331
  static get style() { return sdDatePickerTriggerCss(); }
9353
9332
  static get cmpMeta() { return {
@@ -9431,7 +9410,7 @@ class SdDateRangePicker {
9431
9410
  formField;
9432
9411
  closeAnimationTimer;
9433
9412
  /** 폼 연동용 name 속성 */
9434
- name = nanoid$1();
9413
+ name = nanoid();
9435
9414
  watchIsOpen(newValue) {
9436
9415
  this.focused = newValue;
9437
9416
  }
@@ -9796,7 +9775,7 @@ class SdDateRangePickerCalendar {
9796
9775
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
9797
9776
  '--range-divider': RANGE_LAYOUT.divider,
9798
9777
  };
9799
- 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)))));
9778
+ 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)))));
9800
9779
  }
9801
9780
  static get watchers() { return {
9802
9781
  "value": [{
@@ -9839,7 +9818,7 @@ class SdDivider {
9839
9818
  const hostStyle = {
9840
9819
  '--sd-divider-color': DIVIDER_COLORS.default,
9841
9820
  };
9842
- return (hAsync(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, hAsync("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9821
+ return (hAsync(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, hAsync("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9843
9822
  }
9844
9823
  static get style() { return sdDividerCss(); }
9845
9824
  static get cmpMeta() { return {
@@ -10519,19 +10498,19 @@ class SdField {
10519
10498
  : {}),
10520
10499
  }
10521
10500
  : {};
10522
- return (hAsync("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
10501
+ return (hAsync("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
10523
10502
  'sd-field': true,
10524
10503
  'sd-field--has-label': this.label !== '',
10525
10504
  'sd-field--has-addon': addon !== '',
10526
10505
  'sd-field--borderless': this.borderless,
10527
10506
  [this.fieldStatus]: this.fieldStatus !== '',
10528
- }, 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: {
10507
+ }, 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: {
10529
10508
  'sd-field__control': true,
10530
10509
  'sd-field__control--has-addon': addon !== '',
10531
10510
  }, style: this.width !== '' && this.width !== 0
10532
10511
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
10533
- : {} }, addon && (hAsync("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
10534
- 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))))));
10512
+ : {} }, addon && (hAsync("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
10513
+ 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))))));
10535
10514
  }
10536
10515
  renderLabel(label) {
10537
10516
  if (label == null || label === '')
@@ -10658,7 +10637,7 @@ class SdFilePicker {
10658
10637
  maxFiles;
10659
10638
  // sd-field 패스스루 props
10660
10639
  /** 폼 연동용 name 속성 */
10661
- name = nanoid$1();
10640
+ name = nanoid();
10662
10641
  /** 레이블 텍스트 */
10663
10642
  label = '';
10664
10643
  /** 레이블 너비 */
@@ -10899,24 +10878,24 @@ class SdFilePicker {
10899
10878
  '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
10900
10879
  };
10901
10880
  const showListbox = this.multiple && this.useMultipleListBox;
10902
- 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 => {
10881
+ 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 => {
10903
10882
  if (e.key === 'Enter' || e.key === ' ') {
10904
10883
  e.preventDefault();
10905
10884
  this.handleClick();
10906
10885
  }
10907
- } }, 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: {
10886
+ } }, 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: {
10908
10887
  'sd-file-picker__text': true,
10909
10888
  'sd-file-picker__text--placeholder': !hasFiles,
10910
10889
  'sd-file-picker__text--active': hasFiles,
10911
- } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: '895eafa47b1e1d851794fd471b304f8458bcac0f', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10890
+ } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10912
10891
  'sd-file-picker__caret': true,
10913
10892
  'sd-file-picker__caret--open': this.isListboxOpen,
10914
- }, 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))));
10915
- return (hAsync("div", { key: '3ada174508214a9fafd4f7f228ff52eb60aa76e4', class: {
10893
+ }, 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))));
10894
+ return (hAsync("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
10916
10895
  'sd-file-picker__wrapper': true,
10917
10896
  'sd-file-picker--inline': this.inline,
10918
10897
  'sd-file-picker--inline-disabled': this.inline && this.disabled,
10919
- }, 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()));
10898
+ }, 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()));
10920
10899
  }
10921
10900
  static get watchers() { return {
10922
10901
  "value": [{
@@ -11148,7 +11127,7 @@ class SdFloatingPopover {
11148
11127
  }
11149
11128
  }
11150
11129
  render() {
11151
- return hAsync("slot", { key: '7bdfc66c7baa0a195d1c0438e6bdd0705a7e5ffd' });
11130
+ return hAsync("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
11152
11131
  }
11153
11132
  static get style() { return sdFloatingPortalCss(); }
11154
11133
  static get cmpMeta() { return {
@@ -12134,7 +12113,7 @@ class SdInput {
12134
12113
  nativeEl = undefined;
12135
12114
  formField;
12136
12115
  /** 폼 연동용 name 속성 */
12137
- name = nanoid$1();
12116
+ name = nanoid();
12138
12117
  /** 값이 변경될 때 발생합니다. */
12139
12118
  input;
12140
12119
  /** 포커스될 때 발생합니다. */
@@ -12214,12 +12193,12 @@ class SdInput {
12214
12193
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
12215
12194
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
12216
12195
  };
12217
- 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 () => {
12196
+ 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 () => {
12218
12197
  if (this.disabled || this.readonly)
12219
12198
  return;
12220
12199
  this.internalValue = '';
12221
12200
  await this.formField?.sdValidate();
12222
- } })), 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: () => {
12201
+ } })), 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: () => {
12223
12202
  if (this.disabled || this.readonly)
12224
12203
  return;
12225
12204
  this.passwordVisible = !this.passwordVisible;
@@ -12286,43 +12265,19 @@ class SdInput {
12286
12265
 
12287
12266
  const table = {
12288
12267
  header: {
12289
- height: "36",
12290
12268
  paddingX: "16",
12291
12269
  gap: "4",
12292
12270
  bg: "#F5FAFF",
12293
12271
  typography: {
12294
12272
  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",
12295
- fontWeight: "500",
12296
12273
  fontSize: "12",
12297
- lineHeight: "20",
12298
- textDecoration: "none"
12299
- },
12300
- resizingBar: {
12301
- color: "#CCCCCC",
12302
- height: "16"
12303
- }
12304
- },
12274
+ lineHeight: "20"}},
12305
12275
  body: {
12306
- "default": {
12307
- height: "44",
12308
- paddingY: "8"
12309
- },
12310
- dense: {
12311
- height: "32"
12312
- },
12313
- paddingY: {
12314
- dense: "6"},
12315
- paddingX: {
12316
- "default": "8",
12317
- wide: "16"
12318
- },
12319
12276
  typography: {
12320
12277
  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",
12321
12278
  fontWeight: "400",
12322
12279
  fontSize: "12",
12323
- lineHeight: "20",
12324
- textDecoration: "none"
12325
- }
12280
+ lineHeight: "20"}
12326
12281
  },
12327
12282
  border: {
12328
12283
  color: "#E1E1E1",
@@ -12334,21 +12289,18 @@ const table = {
12334
12289
  radius: "8",
12335
12290
  keyValue: {
12336
12291
  body: {
12337
- paddingY: "8"},
12292
+ paddingY: "8",
12293
+ paddingX: {
12294
+ "default": "8",
12295
+ wide: "16"
12296
+ }
12297
+ },
12338
12298
  height: "44",
12339
12299
  search: {
12340
12300
  paddingX: "32",
12341
12301
  bg: "#F9F9F9"
12342
12302
  }
12343
- },
12344
- separator: {
12345
- color: "#EEEEEE",
12346
- width: {
12347
- "default": "6",
12348
- dense: "4"
12349
- }
12350
- }
12351
- };
12303
+ }};
12352
12304
  var tableTokens = {
12353
12305
  table: table
12354
12306
  };
@@ -12360,6 +12312,8 @@ const KEY_VALUE_TABLE_LAYOUT = {
12360
12312
  borderRadius: Number(t.radius),
12361
12313
  thPaddingX: Number(t.header.paddingX),
12362
12314
  padding: Number(t.keyValue.body.paddingY),
12315
+ tdPaddingX: Number(t.keyValue.body.paddingX.default),
12316
+ tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
12363
12317
  helpIconSize: 16,
12364
12318
  requiredIconSize: 12,
12365
12319
  gap: Number(t.header.gap),
@@ -12388,7 +12342,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
12388
12342
  tdLineHeight: Number(t.body.typography.lineHeight),
12389
12343
  };
12390
12344
 
12391
- 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)}`;
12345
+ 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)}`;
12392
12346
 
12393
12347
  class SdKeyValueTable {
12394
12348
  constructor(hostRef) {
@@ -12401,6 +12355,12 @@ class SdKeyValueTable {
12401
12355
  * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
12402
12356
  */
12403
12357
  fields = [];
12358
+ /**
12359
+ * field name을 key로 하는 값 객체 (`{ [name]: value }`).
12360
+ * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
12361
+ * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
12362
+ */
12363
+ values = {};
12404
12364
  /**
12405
12365
  * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
12406
12366
  */
@@ -12412,44 +12372,57 @@ class SdKeyValueTable {
12412
12372
  * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
12413
12373
  */
12414
12374
  radius = 'default';
12415
- /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
12375
+ /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
12416
12376
  change;
12417
12377
  /** search 패널의 검색 버튼 클릭 시 발생합니다. */
12418
12378
  searchEvent;
12419
12379
  emit = (name, value) => {
12420
- this.change.emit({ name, value });
12380
+ this.change.emit({
12381
+ name,
12382
+ value: value,
12383
+ values: { ...this.values, [name]: value },
12384
+ });
12421
12385
  };
12386
+ /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
12387
+ resolveOptions(field) {
12388
+ const options = { ...(field.options ?? {}) };
12389
+ if (Object.prototype.hasOwnProperty.call(this.values, field.name)) {
12390
+ options.value = this.values[field.name];
12391
+ }
12392
+ return options;
12393
+ }
12422
12394
  handleSearchClick = () => {
12423
12395
  this.searchEvent.emit();
12424
12396
  };
12425
12397
  renderField(field) {
12426
12398
  const onSdUpdate = (e) => this.emit(field.name, e.detail);
12399
+ const options = this.resolveOptions(field);
12427
12400
  switch (field.type) {
12428
12401
  case 'input':
12429
- return hAsync("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12402
+ return hAsync("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12430
12403
  case 'textarea':
12431
- return hAsync("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12404
+ return hAsync("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12432
12405
  case 'number-input':
12433
- return hAsync("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12406
+ return hAsync("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12434
12407
  case 'select':
12435
- return hAsync("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12408
+ return hAsync("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12436
12409
  case 'radio': {
12437
- const { value, direction, ...rest } = field.options ?? {};
12410
+ const { value, direction, ...rest } = options;
12438
12411
  return (hAsync("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
12439
12412
  }
12440
12413
  case 'checkbox': {
12441
- const { value, ...rest } = field.options ?? {};
12414
+ const { value, ...rest } = options;
12442
12415
  return hAsync("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
12443
12416
  }
12444
12417
  case 'date-picker':
12445
- return hAsync("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12418
+ return hAsync("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12446
12419
  case 'date-range-picker':
12447
- return (hAsync("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
12420
+ return hAsync("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12448
12421
  case 'file-picker':
12449
- return hAsync("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12422
+ return hAsync("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12450
12423
  case 'text':
12451
12424
  default:
12452
- return hAsync("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
12425
+ return hAsync("span", { class: "sd-key-value-table__text" }, options.value ?? '');
12453
12426
  }
12454
12427
  }
12455
12428
  renderHelpIcon(helpText) {
@@ -12538,7 +12511,13 @@ class SdKeyValueTable {
12538
12511
  renderTd(field, r, c) {
12539
12512
  const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
12540
12513
  const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
12541
- 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)))));
12514
+ // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
12515
+ // 폼 필드 셀은 default paddingX 유지.
12516
+ const isText = field.type == null || field.type === 'text';
12517
+ return (hAsync("td", { key: `td-${r}-${c}`, class: {
12518
+ 'sd-key-value-table__td': true,
12519
+ 'sd-key-value-table__td--text': isText,
12520
+ }, rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12542
12521
  }
12543
12522
  warnDuplicateNames() {
12544
12523
  const seen = new Set();
@@ -12563,6 +12542,8 @@ class SdKeyValueTable {
12563
12542
  '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
12564
12543
  '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
12565
12544
  '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
12545
+ '--sd-kvt-td-padding-x': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingX}px`,
12546
+ '--sd-kvt-td-padding-x-wide': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingXWide}px`,
12566
12547
  '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
12567
12548
  '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
12568
12549
  '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
@@ -12623,6 +12604,7 @@ class SdKeyValueTable {
12623
12604
  "$tagName$": "sd-key-value-table",
12624
12605
  "$members$": {
12625
12606
  "fields": [16],
12607
+ "values": [16],
12626
12608
  "search": [4],
12627
12609
  "radius": [1]
12628
12610
  },
@@ -12680,7 +12662,7 @@ class SdLinearProgress {
12680
12662
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
12681
12663
  };
12682
12664
  const valueText = `${Math.round(this.clampedValue)}%`;
12683
- 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)));
12665
+ 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)));
12684
12666
  }
12685
12667
  static get style() { return sdLinearProgressCss(); }
12686
12668
  static get cmpMeta() { return {
@@ -12736,10 +12718,10 @@ class SdLoadingContainer {
12736
12718
  this.prevBodyOverflow = null;
12737
12719
  }
12738
12720
  render() {
12739
- return (hAsync("div", { key: 'c2dad1bed0e513341a447f164fecbb2f879ed523', class: {
12721
+ return (hAsync("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
12740
12722
  'sd-loading-container': true,
12741
12723
  'sd-loading-container--visible': this.visible,
12742
- }, "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))));
12724
+ }, "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))));
12743
12725
  }
12744
12726
  static get style() { return sdLoadingContainerCss(); }
12745
12727
  static get cmpMeta() { return {
@@ -12851,7 +12833,7 @@ class SdLoadingModal {
12851
12833
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
12852
12834
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
12853
12835
  };
12854
- 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 }))))));
12836
+ 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 }))))));
12855
12837
  }
12856
12838
  static get style() { return sdLoadingModalCss(); }
12857
12839
  static get cmpMeta() { return {
@@ -13224,7 +13206,21 @@ class SdModalContainer {
13224
13206
  if (this.hasOwnProp(options, 'bottomMessage'))
13225
13207
  el.bottomMessage = options.bottomMessage ?? [];
13226
13208
  if (this.hasOwnProp(options, 'tagContents'))
13227
- el.tagContents = options.tagContents;
13209
+ this.setSlotContent(el, 'tag', options.tagContents);
13210
+ if (this.hasOwnProp(options, 'optionContents')) {
13211
+ this.setSlotContent(el, 'option', options.optionContents);
13212
+ }
13213
+ }
13214
+ /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
13215
+ setSlotContent(el, slot, content) {
13216
+ Array.from(el.children).forEach(child => {
13217
+ if (child.getAttribute('slot') === slot)
13218
+ child.remove();
13219
+ });
13220
+ if (content) {
13221
+ content.setAttribute('slot', slot);
13222
+ el.appendChild(content);
13223
+ }
13228
13224
  }
13229
13225
  handleBackdropClick(id) {
13230
13226
  if (!isTopInteractiveModal(id))
@@ -13487,7 +13483,7 @@ class SdNumberInput {
13487
13483
  nativeEl = undefined;
13488
13484
  formField;
13489
13485
  /** 폼 연동용 name 속성 */
13490
- name = nanoid$1();
13486
+ name = nanoid();
13491
13487
  /** 값이 변경될 때 발생합니다. */
13492
13488
  update;
13493
13489
  /** 포커스될 때 발생합니다. */
@@ -13733,15 +13729,15 @@ class SdNumberInput {
13733
13729
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
13734
13730
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
13735
13731
  };
13736
- 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: {
13732
+ 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: {
13737
13733
  'sd-number-input__content': true,
13738
13734
  'sd-number-input__content--no-stepper': !this.useButton,
13739
- } }, 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()
13735
+ } }, 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()
13740
13736
  ? NUMBER_INPUT_STEPPER.icon.disabled
13741
- : 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: {
13737
+ : 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: {
13742
13738
  textAlign: this.useButton ? 'center' : 'right',
13743
13739
  ...this.inputStyle,
13744
- } }), 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()
13740
+ } }), 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()
13745
13741
  ? NUMBER_INPUT_STEPPER.icon.disabled
13746
13742
  : NUMBER_INPUT_STEPPER.icon.default }))))));
13747
13743
  }
@@ -13960,13 +13956,13 @@ class SdPagination {
13960
13956
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
13961
13957
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
13962
13958
  };
13963
- return (hAsync("div", { key: '4a67cbb9ed9d3cafbd3d9f99562948e3b3840210', class: {
13959
+ return (hAsync("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
13964
13960
  'sd-pagination': true,
13965
13961
  'sd-pagination--simple': this.simple,
13966
- }, 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: {
13962
+ }, 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: {
13967
13963
  'sd-pagination__item': true,
13968
13964
  'sd-pagination__item--selected': this.currentPage === n,
13969
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: 'c4053f5917345cf1e7fcea9f3c2fa0d6b5fa7a3f', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13965
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13970
13966
  }
13971
13967
  static get style() { return sdPaginationCss(); }
13972
13968
  static get cmpMeta() { return {
@@ -14206,7 +14202,7 @@ class SdPopup {
14206
14202
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
14207
14203
  ...this.submitButtonProps,
14208
14204
  };
14209
- 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() })))));
14205
+ 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() })))));
14210
14206
  }
14211
14207
  static get style() { return sdPopupCss(); }
14212
14208
  static get cmpMeta() { return {
@@ -15037,7 +15033,7 @@ class SdSelect {
15037
15033
  triggerComponentRef;
15038
15034
  closeAnimationTimer;
15039
15035
  /** 폼 연동용 name 속성 */
15040
- name = nanoid$1();
15036
+ name = nanoid();
15041
15037
  triggerHasFocus = false;
15042
15038
  watchIsOpen(newValue) {
15043
15039
  this.syncFocusedState(newValue);
@@ -15234,15 +15230,15 @@ class SdSelect {
15234
15230
  this.closeDropdown();
15235
15231
  },
15236
15232
  };
15237
- 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: () => {
15233
+ 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: () => {
15238
15234
  this.hovered = true;
15239
15235
  }, onMouseLeave: () => {
15240
15236
  this.hovered = false;
15241
- } }, hAsync("div", { key: 'b9c769146720634abb4d018d022e28749ef0b939', class: "sd-select", ref: el => {
15237
+ } }, hAsync("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
15242
15238
  this.triggerRef = el;
15243
- } }, hAsync("sd-select-trigger", { key: '792bbee6e36298a306d720bc15bff61d5bba7545', ref: el => {
15239
+ } }, hAsync("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
15244
15240
  this.triggerComponentRef = el;
15245
- }, 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) })))));
15241
+ }, 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) })))));
15246
15242
  }
15247
15243
  static get watchers() { return {
15248
15244
  "isOpen": [{
@@ -15503,7 +15499,7 @@ class SdSelectListItem {
15503
15499
  return (
15504
15500
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
15505
15501
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
15506
- hAsync("div", { key: '0e0a07c33c9e6718771ba8cc27d62e4909434562', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15502
+ hAsync("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15507
15503
  'sd-select-list-item': true,
15508
15504
  'sd-select-list-item--group': isGroup,
15509
15505
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -15513,7 +15509,7 @@ class SdSelectListItem {
15513
15509
  'sd-select-list-item--focused': this.isFocused,
15514
15510
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
15515
15511
  'sd-select-list-item--disabled': !!this.option.disabled,
15516
- }, 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, ")"))));
15512
+ }, 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, ")"))));
15517
15513
  }
15518
15514
  static get style() { return sdSelectListItemCss(); }
15519
15515
  static get cmpMeta() { return {
@@ -15585,15 +15581,15 @@ class SdSelectListItemSearch {
15585
15581
  clearTimeout(this.debounceTimer);
15586
15582
  }
15587
15583
  render() {
15588
- return (hAsync("div", { key: '6caac256fb6b1fc3e7b3fc7f7ee66b163737f944', class: {
15584
+ return (hAsync("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
15589
15585
  'sd-select-list-item-search': true,
15590
15586
  'sd-select-list-item-search--scrolled': this.isScrolled,
15591
- } }, 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 => {
15587
+ } }, 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 => {
15592
15588
  this.inputEl = el;
15593
- }, 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: {
15589
+ }, 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: {
15594
15590
  'sd-select-list-item-search__clear': true,
15595
15591
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
15596
- }, 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" })))));
15592
+ }, 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" })))));
15597
15593
  }
15598
15594
  static get style() { return sdSelectListItemSearchCss(); }
15599
15595
  static get cmpMeta() { return {
@@ -15977,9 +15973,9 @@ class SdSelectListbox {
15977
15973
  '--listbox-max-height': this.maxHeight ?? '260px',
15978
15974
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15979
15975
  };
15980
- 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 => {
15976
+ 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 => {
15981
15977
  this.listEl = el;
15982
- } }, 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) })))))));
15978
+ } }, 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) })))))));
15983
15979
  }
15984
15980
  static get watchers() { return {
15985
15981
  "searchKeyword": [{
@@ -16068,7 +16064,7 @@ class SdSelectTrigger {
16068
16064
  ? SELECT_COLORS.icon.disabled
16069
16065
  : SELECT_COLORS.icon.default,
16070
16066
  };
16071
- return (hAsync("div", { key: '33e639898a581e8556e1e9c966f14cb863246c35', ref: el => {
16067
+ return (hAsync("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
16072
16068
  this.triggerEl = el;
16073
16069
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
16074
16070
  'sd-select-trigger': true,
@@ -16079,7 +16075,7 @@ class SdSelectTrigger {
16079
16075
  e.preventDefault();
16080
16076
  this.handleClick();
16081
16077
  }
16082
- }, 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: {
16078
+ }, 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: {
16083
16079
  'sd-select-trigger__icon': true,
16084
16080
  'sd-select-trigger__icon--open': this.isOpen,
16085
16081
  } }))));
@@ -16208,7 +16204,7 @@ class SdSwitch {
16208
16204
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
16209
16205
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
16210
16206
  };
16211
- 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)));
16207
+ 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)));
16212
16208
  }
16213
16209
  static get style() { return sdSwitchCss(); }
16214
16210
  static get cmpMeta() { return {
@@ -16225,1082 +16221,6 @@ class SdSwitch {
16225
16221
  }; }
16226
16222
  }
16227
16223
 
16228
- let urlAlphabet =
16229
- 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
16230
-
16231
- const POOL_SIZE_MULTIPLIER = 128;
16232
- let pool, poolOffset;
16233
- function fillPool(bytes) {
16234
- if (bytes < 0 || bytes > 1024) throw new RangeError('Wrong ID size')
16235
- if (!pool || pool.length < bytes) {
16236
- pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
16237
- node_crypto.webcrypto.getRandomValues(pool);
16238
- poolOffset = 0;
16239
- } else if (poolOffset + bytes > pool.length) {
16240
- node_crypto.webcrypto.getRandomValues(pool);
16241
- poolOffset = 0;
16242
- }
16243
- poolOffset += bytes;
16244
- }
16245
- function nanoid(size = 21) {
16246
- fillPool((size |= 0));
16247
- let id = '';
16248
- for (let i = poolOffset - size; i < poolOffset; i++) {
16249
- id += urlAlphabet[pool[i] & 63];
16250
- }
16251
- return id
16252
- }
16253
-
16254
- const TABLE_ID_ATTR = 'table-id';
16255
-
16256
- // ── Header Tokens ──
16257
- const TABLE_HEADER_LAYOUT = {
16258
- height: tableTokens.table.header.height,
16259
- paddingX: tableTokens.table.header.paddingX,
16260
- gap: tableTokens.table.header.gap,
16261
- };
16262
- const TABLE_HEADER_TYPOGRAPHY = {
16263
- fontFamily: tableTokens.table.header.typography.fontFamily,
16264
- fontWeight: tableTokens.table.header.typography.fontWeight,
16265
- fontSize: tableTokens.table.header.typography.fontSize,
16266
- lineHeight: tableTokens.table.header.typography.lineHeight,
16267
- textDecoration: tableTokens.table.header.typography.textDecoration,
16268
- };
16269
- const TABLE_HEADER_COLORS = {
16270
- bg: tableTokens.table.header.bg,
16271
- };
16272
- const TABLE_HEADER_RESIZING_BAR = {
16273
- color: tableTokens.table.header.resizingBar.color,
16274
- height: tableTokens.table.header.resizingBar.height,
16275
- };
16276
- // ── Body Tokens ──
16277
- const TABLE_BODY_LAYOUT = {
16278
- default: {
16279
- height: tableTokens.table.body.default.height,
16280
- paddingY: tableTokens.table.body.default.paddingY,
16281
- },
16282
- dense: {
16283
- height: tableTokens.table.body.dense.height,
16284
- paddingY: tableTokens.table.body.paddingY.dense,
16285
- },
16286
- paddingX: tableTokens.table.body.paddingX.wide,
16287
- densePaddingX: tableTokens.table.body.paddingX.default,
16288
- framePadding: tableTokens.table.body.paddingX.default,
16289
- };
16290
- const TABLE_BODY_TYPOGRAPHY = {
16291
- fontFamily: tableTokens.table.body.typography.fontFamily,
16292
- fontWeight: tableTokens.table.body.typography.fontWeight,
16293
- fontSize: tableTokens.table.body.typography.fontSize,
16294
- lineHeight: tableTokens.table.body.typography.lineHeight,
16295
- textDecoration: tableTokens.table.body.typography.textDecoration,
16296
- };
16297
- // ── Frame / Border Tokens ──
16298
- const TABLE_BORDER = {
16299
- color: tableTokens.table.border.color,
16300
- width: tableTokens.table.border.width,
16301
- };
16302
- const TABLE_SEPARATOR = {
16303
- color: tableTokens.table.separator.color,
16304
- width: tableTokens.table.separator.width.default,
16305
- denseWidth: tableTokens.table.separator.width.dense,
16306
- };
16307
- const TABLE_RADIUS = tableTokens.table.radius;
16308
- // ── Selectable Column ──
16309
- const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
16310
- // ── Header Icon Color Defaults ──
16311
- const ICON_DEFAULT_COLOR = {
16312
- pageEdit: systemTokens.color.darkblue.strong,
16313
- arrowDown: systemTokens.color.darkblue.strong,
16314
- arrowUp: systemTokens.color.darkblue.strong,
16315
- updown: systemTokens.color.grey.strong,
16316
- pageMove: systemTokens.color.darkblue.strong,
16317
- star: systemTokens.color.blue.strong,
16318
- };
16319
- const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
16320
- const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
16321
-
16322
- 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%)}`;
16323
-
16324
- class SdTable {
16325
- constructor(hostRef) {
16326
- registerInstance(this, hostRef);
16327
- this.sdSelectChange = createEvent(this, "sdSelectChange", 7);
16328
- this.sdPageChange = createEvent(this, "sdPageChange", 7);
16329
- this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange", 7);
16330
- this.sdVirtualUpdate = createEvent(this, "sdVirtualUpdate", 7);
16331
- this.sdVirtualReachEnd = createEvent(this, "sdVirtualReachEnd", 7);
16332
- }
16333
- static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
16334
- get el() { return getElement(this); }
16335
- /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
16336
- tableId = nanoid(8);
16337
- fallbackTableId = nanoid(8);
16338
- /** 컬럼 정의 목록 */
16339
- columns = [];
16340
- /** 행 데이터 배열 */
16341
- rows;
16342
- /** 현재 선택된 행 목록 */
16343
- selected = [];
16344
- /** 행 고유 식별 필드명 */
16345
- rowKey = 'id';
16346
- /** 행 선택(체크박스) 기능 활성화 여부 */
16347
- selectable = false;
16348
- /** 컬럼 너비 조절 기능 활성화 여부 */
16349
- resizable = false;
16350
- /** 테이블 너비 */
16351
- width;
16352
- /** 테이블 높이 */
16353
- height;
16354
- /** 헤더 고정(sticky) 여부 */
16355
- stickyHeader = false;
16356
- /** 고정할 좌우 컬럼 수 */
16357
- stickyColumn = { left: 0, right: 0 };
16358
- /** border-radius 제어 */
16359
- radius = 'default';
16360
- /** 데이터 없을 때 표시할 메시지 */
16361
- noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16362
- resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16363
- /** 로딩 스피너 표시 여부 */
16364
- isLoading = false;
16365
- /** 페이지네이션 옵션 */
16366
- pagination;
16367
- /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
16368
- useInternalPagination = false;
16369
- /** 페이지당 행 수 선택 셀렉트 표시 여부 */
16370
- useRowsPerPageSelect = false;
16371
- /** 행 높이를 줄인 조밀 모드 여부 */
16372
- dense = false;
16373
- // ─── Virtual Scroll ───────────────────────────────────────────────
16374
- /** 가상 스크롤 사용 여부 */
16375
- useVirtualScroll = false;
16376
- /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
16377
- rowHeight;
16378
- get effectiveRowHeight() {
16379
- if (this.rowHeight != null)
16380
- return this.rowHeight;
16381
- return this.dense
16382
- ? Number(TABLE_BODY_LAYOUT.dense.height)
16383
- : Number(TABLE_BODY_LAYOUT.default.height);
16384
- }
16385
- /** 가상 스크롤 상하 버퍼 행 수 */
16386
- virtualBuffer = 5;
16387
- /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
16388
- virtualEndThreshold = 10;
16389
- // ─────────────────────────────────────────────────────────────────
16390
- /** 페이지당 행 수 선택 옵션 목록 */
16391
- rowsPerPageOption = [
16392
- { label: '10개씩 보기', value: 10 },
16393
- { label: '25개씩 보기', value: 25 },
16394
- { label: '50개씩 보기', value: 50 },
16395
- { label: '100개씩 보기', value: 100 },
16396
- ];
16397
- /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
16398
- sdSelectChange;
16399
- /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
16400
- sdPageChange;
16401
- /** 페이지당 행 수가 변경될 때 발생합니다. */
16402
- sdRowsPerPageChange;
16403
- /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
16404
- sdVirtualUpdate;
16405
- /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
16406
- sdVirtualReachEnd;
16407
- currentPage = 1;
16408
- innerRowsPerPage = 10;
16409
- innerSelected = new Set();
16410
- columnWidths = [];
16411
- scrolledLeft = false;
16412
- scrolledRight = false;
16413
- rowCount = 0;
16414
- loadingScrollTop = 0;
16415
- noDataBodyHeight = 60;
16416
- // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
16417
- // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
16418
- autoThead = false;
16419
- autoTbody = false;
16420
- vsStart = 0;
16421
- vsEnd = 0;
16422
- lastReachEndNotifiedRowCount = -1;
16423
- scrollContainer = null;
16424
- noDataContentEl = null;
16425
- noDataContentResizeObserver;
16426
- onScroll;
16427
- // 키: `${rowKey}::${field}` → { rowspan, colspan }
16428
- spanRegistry = new Map();
16429
- // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
16430
- // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
16431
- useFrameRegistry = new Map();
16432
- // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
16433
- // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
16434
- cellClassRegistry = new Map();
16435
- // rowKey 문자열 → rows 배열에서의 visual index.
16436
- // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
16437
- // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
16438
- rowIndexMap = new Map();
16439
- rebuildRowIndexMap() {
16440
- this.rowIndexMap.clear();
16441
- if (!Array.isArray(this.rows))
16442
- return;
16443
- const field = this.rowKey;
16444
- this.rows.forEach((r, i) => {
16445
- const k = r?.[field];
16446
- if (k == null)
16447
- return;
16448
- this.rowIndexMap.set(String(k), i);
16449
- });
16450
- }
16451
- // rowKey의 시각적 행 인덱스를 돌려준다.
16452
- // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
16453
- // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
16454
- // 3) 둘 다 안 되면 null — rowspan 평가 스킵
16455
- resolveRowIndex(rowKey) {
16456
- const fromMap = this.rowIndexMap.get(rowKey);
16457
- if (fromMap !== undefined)
16458
- return fromMap;
16459
- const n = Number(rowKey);
16460
- return Number.isFinite(n) ? n : null;
16461
- }
16462
- toFiniteNumber(value, fallback) {
16463
- const n = typeof value === 'number' ? value : Number(value);
16464
- return Number.isFinite(n) ? n : fallback;
16465
- }
16466
- isRowsPerPageValue(value) {
16467
- return value === null || typeof value === 'string' || typeof value === 'number';
16468
- }
16469
- isValidTableId(value) {
16470
- return (typeof value === 'string' &&
16471
- value.trim().length > 0 &&
16472
- value !== 'undefined' &&
16473
- value !== 'null');
16474
- }
16475
- getResolvedTableId() {
16476
- if (this.isValidTableId(this.tableId))
16477
- return this.tableId;
16478
- const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
16479
- if (this.isValidTableId(attrId))
16480
- return attrId;
16481
- return this.fallbackTableId;
16482
- }
16483
- syncTableIdAttribute() {
16484
- const resolvedTableId = this.getResolvedTableId();
16485
- if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
16486
- this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
16487
- }
16488
- }
16489
- handleIsLoadingChange(newVal) {
16490
- if (newVal) {
16491
- this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
16492
- }
16493
- this.syncNoDataContentObserver();
16494
- }
16495
- handleUseVirtualScrollChange(newVal) {
16496
- if (newVal) {
16497
- // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
16498
- readTask(() => this.propagateVirtualUpdate());
16499
- }
16500
- }
16501
- handleColumnsChange(newCols) {
16502
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
16503
- this.refreshChildrenConfig();
16504
- }
16505
- handleRowsChange(newRows) {
16506
- if (!Array.isArray(newRows))
16507
- return;
16508
- this.rowCount = newRows.length;
16509
- this.rebuildRowIndexMap();
16510
- if (this.useVirtualScroll)
16511
- this.propagateVirtualUpdate(true);
16512
- this.pushRowsToChildren(newRows);
16513
- this.syncNoDataContentObserver();
16514
- }
16515
- handleRowKeyChange() {
16516
- this.rebuildRowIndexMap();
16517
- }
16518
- handleTableIdChange() {
16519
- this.syncTableIdAttribute();
16520
- }
16521
- handleNoDataLabelChange(newLabel) {
16522
- if (typeof newLabel === 'string' &&
16523
- newLabel.trim().length > 0 &&
16524
- newLabel !== 'undefined' &&
16525
- newLabel !== 'null') {
16526
- this.resolvedNoDataLabel = newLabel;
16527
- }
16528
- else {
16529
- this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16530
- }
16531
- }
16532
- handleConfigChange() {
16533
- this.refreshChildrenConfig();
16534
- }
16535
- handleSelectedChange(newSelected) {
16536
- this.innerSelected = new Set(newSelected);
16537
- }
16538
- handlePaginationChange(newVal) {
16539
- if (newVal?.page != null && newVal.page !== this.currentPage) {
16540
- this.currentPage = newVal.page;
16541
- }
16542
- if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
16543
- this.innerRowsPerPage = newVal.rowsPerPage;
16544
- }
16545
- }
16546
- detectChildren() {
16547
- const hasThead = !!this.el.querySelector(':scope > sd-thead');
16548
- const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
16549
- this.autoThead = !hasThead;
16550
- this.autoTbody = !hasTbody;
16551
- }
16552
- componentWillLoad() {
16553
- this.syncTableIdAttribute();
16554
- this.handleNoDataLabelChange(this.noDataLabel);
16555
- this.detectChildren();
16556
- this.innerSelected = new Set(this.selected || []);
16557
- this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
16558
- this.rebuildRowIndexMap();
16559
- if (this.pagination?.page != null) {
16560
- this.currentPage = this.pagination.page;
16561
- }
16562
- if (this.pagination?.rowsPerPage != null) {
16563
- this.innerRowsPerPage = this.pagination.rowsPerPage;
16564
- }
16565
- // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
16566
- // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
16567
- // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
16568
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16569
- const el = this.el;
16570
- el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
16571
- el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
16572
- el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
16573
- el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
16574
- el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
16575
- el.setRowCountSync = this.setRowCountSync.bind(this);
16576
- el.handleResize = this.handleResize.bind(this);
16577
- el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
16578
- el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
16579
- el.getConfigSync = this.getConfigSync.bind(this);
16580
- el.getTableIdSync = () => this.getResolvedTableId();
16581
- el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
16582
- el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
16583
- el.registerSpanSync = this.registerSpanSync.bind(this);
16584
- el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
16585
- el.getSpanSync = this.getSpanSync.bind(this);
16586
- el.isCoveredSync = this.isCoveredSync.bind(this);
16587
- el.hasRowspanSync = this.hasRowspanSync.bind(this);
16588
- el.registerCellClassSync = this.registerCellClassSync.bind(this);
16589
- el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
16590
- el.getCellClassSync = this.getCellClassSync.bind(this);
16591
- el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
16592
- el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
16593
- el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
16594
- el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
16595
- if (Array.isArray(this.rows)) {
16596
- this.rowCount = this.rows.length;
16597
- this.pushRowsToChildren(this.rows);
16598
- }
16599
- }
16600
- componentDidLoad() {
16601
- if (Array.isArray(this.rows)) {
16602
- this.pushRowsToChildren(this.rows);
16603
- }
16604
- readTask(() => {
16605
- const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
16606
- if (!wrapper)
16607
- return;
16608
- let rafPending = false;
16609
- this.onScroll = () => {
16610
- // 가로 스크롤 그림자
16611
- const scrollLeft = wrapper.scrollLeft;
16612
- const scrollWidth = wrapper.scrollWidth;
16613
- const clientWidth = wrapper.clientWidth;
16614
- const newScrolledLeft = scrollLeft > 0;
16615
- const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
16616
- if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
16617
- this.scrolledLeft = newScrolledLeft;
16618
- this.scrolledRight = newScrolledRight;
16619
- this.refreshChildrenConfig();
16620
- }
16621
- // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
16622
- if (this.useVirtualScroll && !rafPending) {
16623
- rafPending = true;
16624
- requestAnimationFrame(() => {
16625
- rafPending = false;
16626
- this.propagateVirtualUpdate();
16627
- });
16628
- }
16629
- };
16630
- this.scrollContainer = wrapper;
16631
- wrapper.addEventListener('scroll', this.onScroll, { passive: true });
16632
- this.onScroll();
16633
- if (this.useVirtualScroll) {
16634
- this.propagateVirtualUpdate(); // 초기 렌더
16635
- }
16636
- });
16637
- this.syncNoDataContentObserver();
16638
- }
16639
- disconnectedCallback() {
16640
- if (this.scrollContainer && this.onScroll) {
16641
- this.scrollContainer.removeEventListener('scroll', this.onScroll);
16642
- }
16643
- this.noDataContentResizeObserver?.disconnect();
16644
- this.noDataContentResizeObserver = undefined;
16645
- }
16646
- syncNoDataContentObserver() {
16647
- const isNoData = this.rowCount === 0 && !this.isLoading;
16648
- if (!isNoData) {
16649
- this.noDataContentResizeObserver?.disconnect();
16650
- this.noDataContentResizeObserver = undefined;
16651
- this.noDataBodyHeight = 60;
16652
- return;
16653
- }
16654
- this.observeNoDataContentHeight();
16655
- }
16656
- // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
16657
- observeNoDataContentHeight() {
16658
- if (typeof ResizeObserver === 'undefined')
16659
- return;
16660
- const target = this.noDataContentEl;
16661
- if (!target)
16662
- return;
16663
- this.noDataContentResizeObserver?.disconnect();
16664
- this.noDataContentResizeObserver = new ResizeObserver(() => {
16665
- const measured = Math.ceil(target.scrollHeight);
16666
- const nextHeight = Math.max(60, measured);
16667
- if (nextHeight !== this.noDataBodyHeight) {
16668
- this.noDataBodyHeight = nextHeight;
16669
- }
16670
- });
16671
- this.noDataContentResizeObserver.observe(target);
16672
- readTask(() => {
16673
- if (!this.noDataContentEl)
16674
- return;
16675
- const measured = Math.ceil(this.noDataContentEl.scrollHeight);
16676
- const next = Math.max(60, measured);
16677
- if (next !== this.noDataBodyHeight) {
16678
- this.noDataBodyHeight = next;
16679
- }
16680
- });
16681
- }
16682
- queryChildEl(selector) {
16683
- return (this.el.querySelector(selector) ??
16684
- this.el.shadowRoot?.querySelector(selector) ??
16685
- null);
16686
- }
16687
- queryAllTr() {
16688
- const light = Array.from(this.el.querySelectorAll('sd-tr'));
16689
- const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
16690
- return [...light, ...shadow];
16691
- }
16692
- pushRowsToChildren(rows) {
16693
- const tbody = this.queryChildEl('sd-tbody');
16694
- if (tbody)
16695
- tbody.rows = rows;
16696
- const thead = this.queryChildEl('sd-thead');
16697
- if (thead)
16698
- thead.rows = rows;
16699
- }
16700
- handleStructureSlotChange = () => {
16701
- if (Array.isArray(this.rows)) {
16702
- this.pushRowsToChildren(this.rows);
16703
- }
16704
- this.refreshChildrenConfig();
16705
- };
16706
- refreshChildrenSelection() {
16707
- const thead = this.queryChildEl('sd-thead');
16708
- thead?.refreshSelection?.();
16709
- this.queryAllTr().forEach(tr => tr.refreshSelection?.());
16710
- }
16711
- refreshChildrenConfig() {
16712
- const thead = this.queryChildEl('sd-thead');
16713
- thead?.refreshConfig?.();
16714
- this.queryAllTr().forEach(tr => tr.refreshConfig?.());
16715
- }
16716
- maybeEmitVirtualReachEnd(start, end) {
16717
- const threshold = Math.max(1, this.virtualEndThreshold);
16718
- const nearEnd = end >= Math.max(0, this.rowCount - threshold);
16719
- if (!nearEnd)
16720
- return;
16721
- if (this.lastReachEndNotifiedRowCount === this.rowCount)
16722
- return;
16723
- this.lastReachEndNotifiedRowCount = this.rowCount;
16724
- this.sdVirtualReachEnd.emit({
16725
- from: start,
16726
- to: end,
16727
- rowCount: this.rowCount,
16728
- threshold,
16729
- });
16730
- }
16731
- propagateVirtualUpdate(forceSpacerUpdate = false) {
16732
- if (!this.scrollContainer || !this.useVirtualScroll)
16733
- return;
16734
- const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
16735
- const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
16736
- const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
16737
- if (!Number.isFinite(start) || !Number.isFinite(end))
16738
- return;
16739
- const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
16740
- if (!rangeChanged && !forceSpacerUpdate)
16741
- return;
16742
- this.vsStart = start;
16743
- this.vsEnd = end;
16744
- const topHeight = start * this.effectiveRowHeight;
16745
- const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
16746
- // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
16747
- const tbody = this.queryChildEl('sd-tbody');
16748
- tbody?.setSpacersSync?.(topHeight, bottomHeight);
16749
- if (rangeChanged) {
16750
- this.sdVirtualUpdate.emit({
16751
- from: start,
16752
- to: end,
16753
- });
16754
- }
16755
- this.maybeEmitVirtualReachEnd(start, end);
16756
- }
16757
- getVirtualScrollConfigSync() {
16758
- return {
16759
- useVirtualScroll: this.useVirtualScroll,
16760
- rowHeight: this.effectiveRowHeight,
16761
- virtualBuffer: this.virtualBuffer,
16762
- vsStart: this.vsStart,
16763
- vsEnd: this.vsEnd,
16764
- rowCount: this.rowCount,
16765
- };
16766
- }
16767
- getConfigSync() {
16768
- return {
16769
- columns: this.columns,
16770
- selectable: this.selectable,
16771
- resizable: this.resizable,
16772
- stickyColumn: this.stickyColumn,
16773
- stickyHeader: this.stickyHeader,
16774
- scrolledLeft: this.scrolledLeft,
16775
- scrolledRight: this.scrolledRight,
16776
- columnWidths: this.columnWidths,
16777
- dense: this.dense,
16778
- };
16779
- }
16780
- registerUseFrameSync(rowKey, field) {
16781
- if (rowKey == null || field === '')
16782
- return;
16783
- let fields = this.useFrameRegistry.get(rowKey);
16784
- if (!fields) {
16785
- fields = new Set();
16786
- this.useFrameRegistry.set(rowKey, fields);
16787
- }
16788
- fields.add(field);
16789
- }
16790
- unregisterUseFrameSync(rowKey, field) {
16791
- if (rowKey == null || field === '')
16792
- return;
16793
- const fields = this.useFrameRegistry.get(rowKey);
16794
- if (!fields)
16795
- return;
16796
- fields.delete(field);
16797
- if (fields.size === 0)
16798
- this.useFrameRegistry.delete(rowKey);
16799
- }
16800
- hasUseFrameInRowSync(rowKey) {
16801
- const fields = this.useFrameRegistry.get(rowKey);
16802
- return fields != null && fields.size > 0;
16803
- }
16804
- isCellUseFrameSync(rowKey, field) {
16805
- return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
16806
- }
16807
- isRowSelectedSync(row) {
16808
- return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
16809
- }
16810
- /** 행이 선택되어 있는지 확인합니다. */
16811
- async isRowSelected(row) {
16812
- return this.isRowSelectedSync(row);
16813
- }
16814
- updateRowSelectSync(row) {
16815
- const selectedArray = Array.from(this.innerSelected);
16816
- const exists = this.isRowSelectedSync(row);
16817
- const newSelected = exists
16818
- ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
16819
- : [...selectedArray, row];
16820
- if (newSelected.length === selectedArray.length)
16821
- return;
16822
- this.innerSelected = new Set(newSelected);
16823
- this.selected = Array.from(this.innerSelected);
16824
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16825
- this.refreshChildrenSelection();
16826
- }
16827
- /** 행 선택 상태를 토글합니다. */
16828
- async updateRowSelect(row) {
16829
- this.updateRowSelectSync(row);
16830
- }
16831
- toggleSelectAllSync(checked, rows) {
16832
- if (checked) {
16833
- const pageRows = new Set([...rows]);
16834
- this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
16835
- }
16836
- else {
16837
- const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
16838
- this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
16839
- }
16840
- this.selected = Array.from(this.innerSelected);
16841
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16842
- this.refreshChildrenSelection();
16843
- }
16844
- /** 전체 행 선택/해제를 처리합니다. */
16845
- async toggleSelectAll(checked, rows) {
16846
- this.toggleSelectAllSync(checked, rows);
16847
- }
16848
- getIsAllCheckedSync(rows) {
16849
- const total = rows.length;
16850
- const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
16851
- if (selectedCount === 0)
16852
- return false;
16853
- if (selectedCount === total)
16854
- return true;
16855
- return null; // indeterminate
16856
- }
16857
- /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
16858
- async getIsAllChecked(rows) {
16859
- return this.getIsAllCheckedSync(rows);
16860
- }
16861
- changePage(page) {
16862
- if (!this.useInternalPagination) {
16863
- this.sdPageChange.emit(page);
16864
- return;
16865
- }
16866
- this.currentPage = page;
16867
- this.sdPageChange.emit(this.currentPage);
16868
- this.updateRowsVisibility();
16869
- }
16870
- updateRowsVisibility() {
16871
- this.queryAllTr().forEach(tr => tr.updateVisibility?.());
16872
- }
16873
- changeRowsPerPage(perPage) {
16874
- const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
16875
- if (!this.useInternalPagination) {
16876
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16877
- return;
16878
- }
16879
- this.innerRowsPerPage = changedRowsPerPage;
16880
- const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
16881
- if (this.currentPage > newLastPage) {
16882
- this.currentPage = newLastPage;
16883
- }
16884
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16885
- this.updateRowsVisibility();
16886
- }
16887
- get lastPageNumber() {
16888
- if (this.useInternalPagination) {
16889
- return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
16890
- }
16891
- const { lastPage, rowsPerPage = 10 } = this.pagination || {};
16892
- return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
16893
- }
16894
- handleResize(index, event, reversed = false) {
16895
- if (typeof document === 'undefined')
16896
- return;
16897
- const startX = event.clientX;
16898
- const startWidth = this.columnWidths[index];
16899
- const handleMouseMove = (moveEvent) => {
16900
- const col = this.columns[index];
16901
- if (col == null)
16902
- return;
16903
- const minWidth = col.minWidth || 50;
16904
- const maxWidth = col.maxWidth || 9999;
16905
- const delta = moveEvent.clientX - startX;
16906
- const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
16907
- this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
16908
- const thead = this.queryChildEl('sd-thead');
16909
- thead?.setColumnWidths?.(this.columnWidths);
16910
- this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
16911
- const stickyRightCount = this.stickyColumn?.right || 0;
16912
- const visibleColCount = this.columns.filter(c => c.visible !== false).length;
16913
- const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
16914
- if (isRightStickyEdgeResizer) {
16915
- requestAnimationFrame(() => {
16916
- this.onScroll?.();
16917
- });
16918
- }
16919
- };
16920
- const handleMouseUp = () => {
16921
- document.removeEventListener('mousemove', handleMouseMove);
16922
- document.removeEventListener('mouseup', handleMouseUp);
16923
- };
16924
- document.addEventListener('mousemove', handleMouseMove);
16925
- document.addEventListener('mouseup', handleMouseUp);
16926
- }
16927
- getStickyStyleSync(colIdx) {
16928
- const leftOffset = this.columnWidths
16929
- .slice(0, colIdx)
16930
- .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
16931
- const rightOffset = this.columnWidths
16932
- .filter((_, i) => i >=
16933
- this.columns.filter(c => c.visible !== false).length -
16934
- (this.stickyColumn?.right || 0) && i > colIdx)
16935
- .reduce((a, b) => a + b, 0);
16936
- const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
16937
- const base = {
16938
- '--sticky-left-offset': `${leftOffset}px`,
16939
- '--sticky-right-offset': `${rightOffset}px`,
16940
- };
16941
- if (!visibleCol?.autoWidth) {
16942
- base['width'] = `${this.columnWidths[colIdx]}px`;
16943
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
16944
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
16945
- }
16946
- return base;
16947
- }
16948
- /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
16949
- async getStickyStyle(colIdx) {
16950
- return this.getStickyStyleSync(colIdx);
16951
- }
16952
- // ─── rowspan / colspan registry ─────────────────────────────────
16953
- // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
16954
- // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
16955
- // 덮였는지 판정해 <td>를 그릴지 결정한다.
16956
- spanKey(rowKey, field) {
16957
- return `${rowKey}::${field}`;
16958
- }
16959
- // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
16960
- // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
16961
- // 덮인 셀이 사라지거나 다시 나타난다.
16962
- // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
16963
- // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
16964
- requestAllTrUpdate() {
16965
- this.queryAllTr().forEach(tr => {
16966
- if (typeof tr.bumpSpansVersion === 'function') {
16967
- tr.bumpSpansVersion();
16968
- }
16969
- });
16970
- }
16971
- registerSpanSync(rowKey, field, rowspan, colspan) {
16972
- if (rowKey == null || field === '')
16973
- return;
16974
- const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
16975
- const safeColspan = Math.max(1, Math.floor(colspan || 1));
16976
- const key = this.spanKey(rowKey, field);
16977
- const prev = this.spanRegistry.get(key);
16978
- if (safeRowspan === 1 && safeColspan === 1) {
16979
- if (!prev)
16980
- return;
16981
- this.spanRegistry.delete(key);
16982
- this.requestAllTrUpdate();
16983
- return;
16984
- }
16985
- if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
16986
- return;
16987
- this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
16988
- this.requestAllTrUpdate();
16989
- }
16990
- unregisterSpanSync(rowKey, field) {
16991
- if (rowKey == null || field === '')
16992
- return;
16993
- const key = this.spanKey(rowKey, field);
16994
- if (!this.spanRegistry.has(key))
16995
- return;
16996
- this.spanRegistry.delete(key);
16997
- this.requestAllTrUpdate();
16998
- }
16999
- getSpanSync(rowKey, field) {
17000
- return this.spanRegistry.get(this.spanKey(rowKey, field));
17001
- }
17002
- // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
17003
- // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
17004
- // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
17005
- registerCellClassSync(rowKey, field, cls) {
17006
- if (rowKey == null || field === '')
17007
- return;
17008
- const key = this.spanKey(rowKey, field);
17009
- const safe = (cls ?? '').trim();
17010
- if (safe === '') {
17011
- this.cellClassRegistry.delete(key);
17012
- return;
17013
- }
17014
- this.cellClassRegistry.set(key, safe);
17015
- }
17016
- unregisterCellClassSync(rowKey, field) {
17017
- if (rowKey == null || field === '')
17018
- return;
17019
- this.cellClassRegistry.delete(this.spanKey(rowKey, field));
17020
- }
17021
- getCellClassSync(rowKey, field) {
17022
- return this.cellClassRegistry.get(this.spanKey(rowKey, field));
17023
- }
17024
- // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
17025
- // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
17026
- hasRowspanSync() {
17027
- for (const span of this.spanRegistry.values()) {
17028
- if (span.rowspan > 1)
17029
- return true;
17030
- }
17031
- return false;
17032
- }
17033
- isCoveredSync(rowKey, colIdx, columns) {
17034
- if (this.spanRegistry.size === 0)
17035
- return false;
17036
- const visibleCols = columns.filter(c => c.visible !== false);
17037
- // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
17038
- for (let i = 0; i < colIdx; i++) {
17039
- const c = visibleCols[i];
17040
- if (c == null)
17041
- continue;
17042
- const field = typeof c.field === 'string' ? c.field : c.name;
17043
- const span = this.spanRegistry.get(this.spanKey(rowKey, field));
17044
- if (!span)
17045
- continue;
17046
- if (i + span.colspan > colIdx)
17047
- return true;
17048
- }
17049
- // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
17050
- // rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
17051
- // 없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
17052
- const myRowIdx = this.resolveRowIndex(rowKey);
17053
- if (myRowIdx == null)
17054
- return false;
17055
- for (const [key, span] of this.spanRegistry) {
17056
- if (span.rowspan <= 1)
17057
- continue;
17058
- const sepIdx = key.indexOf('::');
17059
- if (sepIdx < 0)
17060
- continue;
17061
- const otherRowKey = key.slice(0, sepIdx);
17062
- const otherField = key.slice(sepIdx + 2);
17063
- const otherRowIdx = this.resolveRowIndex(otherRowKey);
17064
- if (otherRowIdx == null)
17065
- continue;
17066
- if (otherRowIdx >= myRowIdx)
17067
- continue;
17068
- if (otherRowIdx + span.rowspan <= myRowIdx)
17069
- continue;
17070
- const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
17071
- if (otherColIdx < 0)
17072
- continue;
17073
- if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
17074
- return true;
17075
- }
17076
- return false;
17077
- }
17078
- setRowCountSync(count) {
17079
- const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
17080
- if (safeCount !== this.rowCount) {
17081
- this.lastReachEndNotifiedRowCount = -1;
17082
- }
17083
- this.rowCount = safeCount;
17084
- if (this.useVirtualScroll) {
17085
- this.propagateVirtualUpdate(true);
17086
- }
17087
- }
17088
- /** 가상 스크롤 총 행 수를 설정합니다. */
17089
- async setRowCount(count) {
17090
- this.setRowCountSync(count);
17091
- }
17092
- calculateVisibleRange(scrollTop, containerHeight) {
17093
- const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
17094
- const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
17095
- const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
17096
- const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
17097
- const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
17098
- const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
17099
- const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
17100
- const start = Math.max(0, firstVisible - safeBuffer);
17101
- const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
17102
- return { start, end };
17103
- }
17104
- getPaginationInfoSync() {
17105
- if (!this.useInternalPagination || !this.pagination)
17106
- return null;
17107
- const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
17108
- const endIndex = startIndex + this.innerRowsPerPage;
17109
- return {
17110
- startIndex,
17111
- endIndex,
17112
- currentPage: this.currentPage,
17113
- rowsPerPage: this.innerRowsPerPage,
17114
- };
17115
- }
17116
- /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
17117
- async getPaginationInfo() {
17118
- return this.getPaginationInfoSync();
17119
- }
17120
- getVirtualScrollRangeSync() {
17121
- if (!this.useVirtualScroll)
17122
- return null;
17123
- if (!(this.vsEnd > 0))
17124
- return null;
17125
- return { from: this.vsStart, to: this.vsEnd };
17126
- }
17127
- // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
17128
- // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
17129
- renderAutoRows() {
17130
- if (this.useVirtualScroll)
17131
- return null;
17132
- const allRows = this.rows ?? [];
17133
- const pageInfo = this.getPaginationInfoSync();
17134
- const startIdx = pageInfo?.startIndex ?? 0;
17135
- const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
17136
- return displayed.map((row, i) => {
17137
- const absoluteIdx = startIdx + i;
17138
- return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
17139
- });
17140
- }
17141
- get tableClasses() {
17142
- return [
17143
- 'sd-table',
17144
- this.stickyHeader && 'sd-table--sticky-header',
17145
- this.selectable && 'sd-table--selectable',
17146
- this.resizable && 'sd-table--resizable',
17147
- (this.selectable ||
17148
- (this.stickyColumn?.left ?? 0) > 0 ||
17149
- (this.stickyColumn?.right ?? 0) > 0) &&
17150
- 'sd-table--sticky-column',
17151
- this.scrolledLeft && 'sd-table--scrolled-left',
17152
- this.scrolledRight && 'sd-table--scrolled-right',
17153
- this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
17154
- ]
17155
- .filter(Boolean)
17156
- .join(' ');
17157
- }
17158
- render() {
17159
- const resolvedTableId = this.getResolvedTableId();
17160
- const isNoData = this.rowCount === 0 && !this.isLoading;
17161
- const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
17162
- const noDataTotalHeight = 36 + this.noDataBodyHeight;
17163
- const hostHeight = isNoData
17164
- ? this.height !== undefined
17165
- ? `max(${this.height}, ${noDataTotalHeight}px)`
17166
- : `max(${noDataTotalHeight}px, 100%)`
17167
- : (this.height ?? '100%');
17168
- const hostStyle = {
17169
- '--table-radius': `${TABLE_RADIUS}px`,
17170
- '--table-border-color': TABLE_BORDER.color,
17171
- '--table-border-width': `${TABLE_BORDER.width}px`,
17172
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
17173
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
17174
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
17175
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
17176
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
17177
- '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
17178
- '--table-host-height': hostHeight,
17179
- };
17180
- return (hAsync(Host, { key: 'e4f8c5d93a6fdae077abab4641ea4ea883249cae', style: hostStyle }, hAsync("div", { key: '4af67aafb4cadc6de00ae92884e7d3585d85990b', class: "sd-table__container", style: {
17181
- '--table-width': this.width,
17182
- '--pagination-height': `${paginationHeight}px`,
17183
- } }, hAsync("div", { key: 'd88a3f49c6cd1c0798774d06b9510fa62592138f', class: {
17184
- 'sd-table__wrapper': true,
17185
- 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
17186
- 'sd-table__wrapper--radius-full': this.radius === 'full',
17187
- } }, hAsync("div", { key: '891e2acca41a9224acaa1a688eedbb2defea7964', class: {
17188
- 'sd-table__scroll-container': true,
17189
- 'sd-table__scroll-container--loading': this.isLoading,
17190
- 'sd-table__scroll-container--no-data': isNoData,
17191
- } }, 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 => {
17192
- this.noDataContentEl = el;
17193
- if (el)
17194
- this.syncNoDataContentObserver();
17195
- } }, 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 &&
17196
- this.pagination.rowsPerPage > 0 &&
17197
- this.rowCount > 0 &&
17198
- !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
17199
- ? this.innerRowsPerPage
17200
- : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
17201
- if (!this.isRowsPerPageValue(e.detail))
17202
- return;
17203
- this.changeRowsPerPage(e.detail);
17204
- } })))))));
17205
- }
17206
- static get watchers() { return {
17207
- "isLoading": [{
17208
- "handleIsLoadingChange": 0
17209
- }],
17210
- "useVirtualScroll": [{
17211
- "handleUseVirtualScrollChange": 0
17212
- }],
17213
- "columns": [{
17214
- "handleColumnsChange": 0
17215
- }],
17216
- "rows": [{
17217
- "handleRowsChange": 0
17218
- }],
17219
- "rowKey": [{
17220
- "handleRowKeyChange": 0
17221
- }],
17222
- "tableId": [{
17223
- "handleTableIdChange": 0
17224
- }],
17225
- "noDataLabel": [{
17226
- "handleNoDataLabelChange": 0
17227
- }],
17228
- "selectable": [{
17229
- "handleConfigChange": 0
17230
- }],
17231
- "resizable": [{
17232
- "handleConfigChange": 0
17233
- }],
17234
- "stickyColumn": [{
17235
- "handleConfigChange": 0
17236
- }],
17237
- "stickyHeader": [{
17238
- "handleConfigChange": 0
17239
- }],
17240
- "dense": [{
17241
- "handleConfigChange": 0
17242
- }],
17243
- "selected": [{
17244
- "handleSelectedChange": 0
17245
- }],
17246
- "pagination": [{
17247
- "handlePaginationChange": 0
17248
- }]
17249
- }; }
17250
- static get style() { return sdTableCss(); }
17251
- static get cmpMeta() { return {
17252
- "$flags$": 777,
17253
- "$tagName$": "sd-table",
17254
- "$members$": {
17255
- "tableId": [513, "table-id"],
17256
- "columns": [16],
17257
- "rows": [16],
17258
- "selected": [1040],
17259
- "rowKey": [1, "row-key"],
17260
- "selectable": [4],
17261
- "resizable": [4],
17262
- "width": [1],
17263
- "height": [1],
17264
- "stickyHeader": [4, "sticky-header"],
17265
- "stickyColumn": [16],
17266
- "radius": [1],
17267
- "noDataLabel": [1, "no-data-label"],
17268
- "isLoading": [4, "is-loading"],
17269
- "pagination": [16],
17270
- "useInternalPagination": [4, "use-internal-pagination"],
17271
- "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
17272
- "dense": [4],
17273
- "useVirtualScroll": [4, "use-virtual-scroll"],
17274
- "rowHeight": [2, "row-height"],
17275
- "virtualBuffer": [2, "virtual-buffer"],
17276
- "virtualEndThreshold": [2, "virtual-end-threshold"],
17277
- "rowsPerPageOption": [16],
17278
- "resolvedNoDataLabel": [32],
17279
- "currentPage": [32],
17280
- "innerRowsPerPage": [32],
17281
- "innerSelected": [32],
17282
- "columnWidths": [32],
17283
- "scrolledLeft": [32],
17284
- "scrolledRight": [32],
17285
- "rowCount": [32],
17286
- "loadingScrollTop": [32],
17287
- "noDataBodyHeight": [32],
17288
- "autoThead": [32],
17289
- "autoTbody": [32],
17290
- "isRowSelected": [64],
17291
- "updateRowSelect": [64],
17292
- "toggleSelectAll": [64],
17293
- "getIsAllChecked": [64],
17294
- "getStickyStyle": [64],
17295
- "setRowCount": [64],
17296
- "getPaginationInfo": [64]
17297
- },
17298
- "$listeners$": undefined,
17299
- "$lazyBundleId$": "-",
17300
- "$attrsToReflect$": [["tableId", "table-id"]]
17301
- }; }
17302
- }
17303
-
17304
16224
  const tab = {
17305
16225
  main: {
17306
16226
  lg: {
@@ -17506,7 +16426,7 @@ class SdTabs {
17506
16426
  };
17507
16427
  }
17508
16428
  render() {
17509
- return (hAsync("div", { key: 'a844eb9710ff03e3878225aa8dc5e14ed270efde', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16429
+ return (hAsync("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
17510
16430
  const badgeName = this.getBadgeName(tab);
17511
16431
  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 => {
17512
16432
  if (e.key === 'Enter' || e.key === ' ') {
@@ -17755,7 +16675,7 @@ class SdTag {
17755
16675
  const config = this.resolvedConfig;
17756
16676
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17757
16677
  const width = this.resolvedWidth;
17758
- return (hAsync(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
16678
+ return (hAsync(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
17759
16679
  '--sd-tag-background': config.background,
17760
16680
  '--sd-tag-content': config.content,
17761
16681
  '--sd-tag-height': config.height,
@@ -17765,7 +16685,7 @@ class SdTag {
17765
16685
  '--sd-tag-font-weight': config.fontWeight,
17766
16686
  '--sd-tag-line-height': config.lineHeight,
17767
16687
  '--sd-tag-radius': config.radius,
17768
- }, "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)));
16688
+ }, "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)));
17769
16689
  }
17770
16690
  static get style() { return sdTagCss(); }
17771
16691
  static get cmpMeta() { return {
@@ -17784,292 +16704,6 @@ class SdTag {
17784
16704
  }; }
17785
16705
  }
17786
16706
 
17787
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17788
-
17789
- class SdTbody {
17790
- constructor(hostRef) {
17791
- registerInstance(this, hostRef);
17792
- }
17793
- get el() { return getElement(this); }
17794
- /** 렌더링할 행 데이터 목록 */
17795
- rows = [];
17796
- tableId = '';
17797
- topSpacerHeight = 0;
17798
- bottomSpacerHeight = 0;
17799
- tableEl = null;
17800
- handleRowsChange(newRows) {
17801
- const safeRows = newRows ?? [];
17802
- if (this.tableEl?.setRowCountSync) {
17803
- this.tableEl.setRowCountSync(safeRows.length);
17804
- }
17805
- }
17806
- componentWillLoad() {
17807
- this.syncTableContext();
17808
- this.rows = this.rows ?? [];
17809
- if (this.tableEl?.setRowCountSync) {
17810
- this.tableEl.setRowCountSync(this.rows.length);
17811
- }
17812
- this.el.setSpacersSync = (top, bottom) => {
17813
- this.topSpacerHeight = top;
17814
- this.bottomSpacerHeight = bottom;
17815
- };
17816
- }
17817
- componentDidLoad() {
17818
- this.syncTableContext();
17819
- }
17820
- syncTableContext() {
17821
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
17822
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
17823
- const closest = this.el.closest('sd-table');
17824
- const root = this.el.getRootNode();
17825
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
17826
- const table = closest ?? fromShadow;
17827
- this.tableEl = table;
17828
- const fromMethod = table?.getTableIdSync?.();
17829
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17830
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17831
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17832
- '';
17833
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
17834
- this.tableId = resolvedTableId;
17835
- }
17836
- }
17837
- render() {
17838
- return (hAsync(Host, { key: '72061abfda67f548675b6def5d217d2263b693a9', slot: `${this.tableId}-body` }, hAsync("tbody", { key: 'e2ac60a7c395d2a411ac7811851a2916fe762f3c', class: { tbody: true } }, [
17839
- this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17840
- hAsync("slot", { key: 'af37117b1e162581569bcf6d14a8cc3289f9c6d4' }),
17841
- this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17842
- ])));
17843
- }
17844
- static get watchers() { return {
17845
- "rows": [{
17846
- "handleRowsChange": 0
17847
- }]
17848
- }; }
17849
- static get style() { return sdTbodyCss(); }
17850
- static get cmpMeta() { return {
17851
- "$flags$": 777,
17852
- "$tagName$": "sd-tbody",
17853
- "$members$": {
17854
- "rows": [16],
17855
- "tableId": [32],
17856
- "topSpacerHeight": [32],
17857
- "bottomSpacerHeight": [32]
17858
- },
17859
- "$listeners$": undefined,
17860
- "$lazyBundleId$": "-",
17861
- "$attrsToReflect$": []
17862
- }; }
17863
- }
17864
-
17865
- 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}`;
17866
-
17867
- class SdTd {
17868
- constructor(hostRef) {
17869
- registerInstance(this, hostRef);
17870
- }
17871
- get el() { return getElement(this); }
17872
- /** 데이터 필드명 (슬롯 이름 생성에 사용) */
17873
- field;
17874
- /** 행 식별 키 */
17875
- rowKey;
17876
- /** 셀 내용 정렬 */
17877
- align;
17878
- /** 행 병합 수 */
17879
- rowspan;
17880
- /** 열 병합 수 */
17881
- colspan;
17882
- // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
17883
- // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
17884
- // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
17885
- /** td에 병합할 사용자 클래스 */
17886
- sdClass;
17887
- /** 좌측 구분선 표시 여부 */
17888
- dividerLeft = false;
17889
- /** 우측 구분선 표시 여부 */
17890
- dividerRight = false;
17891
- // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
17892
- /** frame 레이아웃 사용 여부 */
17893
- useFrame = false;
17894
- handleFieldChange(_newField, oldField) {
17895
- this.syncSlotName();
17896
- this.syncSpanRegistration();
17897
- this.syncCellClassRegistration(oldField);
17898
- this.syncUseFrameRegistration(oldField);
17899
- }
17900
- handleRowKeyChange(_newKey, oldKey) {
17901
- this.syncSlotName();
17902
- this.syncSpanRegistration();
17903
- this.syncCellClassRegistration(undefined, oldKey);
17904
- this.syncUseFrameRegistration(undefined, oldKey);
17905
- }
17906
- handleSpanChange() {
17907
- this.syncSpanRegistration();
17908
- }
17909
- handleSdClassChange() {
17910
- this.syncCellClassRegistration();
17911
- }
17912
- handleDividerChange() {
17913
- this.syncCellClassRegistration();
17914
- }
17915
- handleUseFrameChange() {
17916
- this.syncUseFrameRegistration();
17917
- this.requestParentTrUpdate();
17918
- }
17919
- componentWillLoad() {
17920
- this.syncSlotName();
17921
- this.syncSpanRegistration();
17922
- this.syncCellClassRegistration();
17923
- this.syncUseFrameRegistration();
17924
- // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
17925
- const parentTr = this.el.parentElement;
17926
- if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
17927
- }
17928
- componentDidLoad() {
17929
- this.syncSlotName();
17930
- this.syncSpanRegistration();
17931
- this.syncCellClassRegistration();
17932
- this.syncUseFrameRegistration();
17933
- }
17934
- // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
17935
- // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
17936
- // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
17937
- connectedCallback() {
17938
- this.syncSpanRegistration();
17939
- this.syncCellClassRegistration();
17940
- this.syncUseFrameRegistration();
17941
- }
17942
- disconnectedCallback() {
17943
- const table = this.findTable();
17944
- if (table != null && this.field !== '' && this.rowKey != null) {
17945
- table.unregisterSpanSync?.(String(this.rowKey), this.field);
17946
- table.unregisterCellClassSync?.(String(this.rowKey), this.field);
17947
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
17948
- this.requestParentTrUpdate();
17949
- }
17950
- }
17951
- findTable() {
17952
- return this.el.closest('sd-table');
17953
- }
17954
- requestParentTrUpdate() {
17955
- const parentTr = this.el.parentElement;
17956
- if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
17957
- return;
17958
- const trAny = parentTr;
17959
- if (typeof trAny.bumpSpansVersion === 'function') {
17960
- trAny.bumpSpansVersion();
17961
- }
17962
- }
17963
- syncSpanRegistration() {
17964
- const table = this.findTable();
17965
- if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
17966
- return;
17967
- const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
17968
- const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
17969
- table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
17970
- this.requestParentTrUpdate();
17971
- }
17972
- // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
17973
- syncCellClassRegistration(prevField, prevRowKey) {
17974
- const table = this.findTable();
17975
- if (!table)
17976
- return;
17977
- const oldField = prevField ?? this.field;
17978
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17979
- if (oldField !== '' && oldRowKey != null) {
17980
- table.unregisterCellClassSync?.(oldRowKey, oldField);
17981
- }
17982
- if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
17983
- return;
17984
- const combinedClass = [
17985
- this.sdClass,
17986
- this.dividerLeft && 'td--divider-left',
17987
- this.dividerRight && 'td--divider-right',
17988
- ]
17989
- .filter(Boolean)
17990
- .join(' ') || undefined;
17991
- table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
17992
- this.requestParentTrUpdate();
17993
- }
17994
- syncUseFrameRegistration(prevField, prevRowKey) {
17995
- const table = this.findTable();
17996
- if (!table)
17997
- return;
17998
- const oldField = prevField ?? this.field;
17999
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
18000
- if (oldField !== '' && oldRowKey != null) {
18001
- table.unregisterUseFrameSync?.(oldRowKey, oldField);
18002
- }
18003
- if (this.field === '' || this.rowKey == null)
18004
- return;
18005
- if (this.useFrame) {
18006
- table.registerUseFrameSync?.(String(this.rowKey), this.field);
18007
- }
18008
- else {
18009
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
18010
- }
18011
- }
18012
- syncSlotName() {
18013
- const table = this.el.closest('sd-table');
18014
- const fromMethod = table?.getTableIdSync?.();
18015
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
18016
- const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
18017
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
18018
- '';
18019
- if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
18020
- this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
18021
- }
18022
- }
18023
- render() {
18024
- return (hAsync(Host, { key: 'b2037351ddf7c9a8998befd477ffb81b7f204c99', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: 'f9d2bd1433c737fc6cb209f45e773c5317cf3cde' })));
18025
- }
18026
- static get watchers() { return {
18027
- "field": [{
18028
- "handleFieldChange": 0
18029
- }],
18030
- "rowKey": [{
18031
- "handleRowKeyChange": 0
18032
- }],
18033
- "rowspan": [{
18034
- "handleSpanChange": 0
18035
- }],
18036
- "colspan": [{
18037
- "handleSpanChange": 0
18038
- }],
18039
- "sdClass": [{
18040
- "handleSdClassChange": 0
18041
- }],
18042
- "dividerLeft": [{
18043
- "handleDividerChange": 0
18044
- }],
18045
- "dividerRight": [{
18046
- "handleDividerChange": 0
18047
- }],
18048
- "useFrame": [{
18049
- "handleUseFrameChange": 0
18050
- }]
18051
- }; }
18052
- static get style() { return sdTdCss(); }
18053
- static get cmpMeta() { return {
18054
- "$flags$": 772,
18055
- "$tagName$": "sd-td",
18056
- "$members$": {
18057
- "field": [1],
18058
- "rowKey": [1, "row-key"],
18059
- "align": [1],
18060
- "rowspan": [2],
18061
- "colspan": [2],
18062
- "sdClass": [1, "sd-class"],
18063
- "dividerLeft": [4, "divider-left"],
18064
- "dividerRight": [4, "divider-right"],
18065
- "useFrame": [4, "use-frame"]
18066
- },
18067
- "$listeners$": undefined,
18068
- "$lazyBundleId$": "-",
18069
- "$attrsToReflect$": []
18070
- }; }
18071
- }
18072
-
18073
16707
  const textLink = {
18074
16708
  sm: {
18075
16709
  gap: "4",
@@ -18358,7 +16992,7 @@ class SdTextarea {
18358
16992
  nativeEl = undefined;
18359
16993
  formField;
18360
16994
  /** 폼 연동용 name 속성 */
18361
- name = nanoid$1();
16995
+ name = nanoid();
18362
16996
  /** 값이 변경될 때 발생합니다. */
18363
16997
  input;
18364
16998
  /** 포커스될 때 발생합니다. */
@@ -18439,7 +17073,7 @@ class SdTextarea {
18439
17073
  '--sd-system-size-field-sm-height': 'auto',
18440
17074
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
18441
17075
  };
18442
- 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 }))));
17076
+ 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 }))));
18443
17077
  }
18444
17078
  static get watchers() { return {
18445
17079
  "value": [{
@@ -18493,370 +17127,6 @@ class SdTextarea {
18493
17127
  }; }
18494
17128
  }
18495
17129
 
18496
- 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}`;
18497
-
18498
- class SdThead {
18499
- constructor(hostRef) {
18500
- registerInstance(this, hostRef);
18501
- this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
18502
- }
18503
- get el() { return getElement(this); }
18504
- /** 테이블 컬럼 목록 */
18505
- columns;
18506
- /** 행 선택 기능 사용 여부 */
18507
- selectable;
18508
- /** 컬럼 너비 조절 가능 여부 */
18509
- resizable;
18510
- /** 고정 컬럼 설정 */
18511
- stickyColumn;
18512
- /** 헤더 고정 여부 */
18513
- stickyHeader;
18514
- /** 좌측 스크롤 여부 */
18515
- scrolledLeft;
18516
- /** 우측 스크롤 여부 */
18517
- scrolledRight;
18518
- /** 전체 선택 체크박스용 행 데이터 */
18519
- rows = [];
18520
- /** 컬럼 너비 목록 */
18521
- columnWidths = [];
18522
- /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
18523
- sdColumnSort;
18524
- tableId = '';
18525
- _columns = [];
18526
- _selectable = false;
18527
- _resizable = false;
18528
- _stickyColumn = { left: 0, right: 0 };
18529
- _stickyHeader = false;
18530
- _scrolledLeft = false;
18531
- _scrolledRight = false;
18532
- dropdownOpenMap = {};
18533
- tableEl = null;
18534
- dropdownRefs = {};
18535
- dropdownThRefs = {};
18536
- dropdownPortals = {};
18537
- handleColumnsChange(newCols) {
18538
- if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
18539
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
18540
- }
18541
- }
18542
- disconnectedCallback() {
18543
- const portals = this.dropdownPortals ?? {};
18544
- Object.values(portals).forEach(portal => {
18545
- if (portal?.parentNode != null)
18546
- portal.parentNode.removeChild(portal);
18547
- });
18548
- }
18549
- componentWillLoad() {
18550
- this.syncTableContext();
18551
- this.dropdownOpenMap = this.dropdownOpenMap ?? {};
18552
- this.dropdownRefs = this.dropdownRefs ?? {};
18553
- this.dropdownThRefs = this.dropdownThRefs ?? {};
18554
- this.dropdownPortals = this.dropdownPortals ?? {};
18555
- this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
18556
- this.resolveConfig();
18557
- if ((this.columnWidths ?? []).length === 0) {
18558
- this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
18559
- }
18560
- }
18561
- componentDidLoad() {
18562
- this.syncTableContext();
18563
- this.resolveConfig();
18564
- this.initDropdownPortals();
18565
- }
18566
- // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
18567
- // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
18568
- initDropdownPortals() {
18569
- const cols = this._columns ?? [];
18570
- const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
18571
- if (hasDropdownCols.length === 0)
18572
- return;
18573
- for (const col of hasDropdownCols) {
18574
- const colName = col.name;
18575
- // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
18576
- if ((this.dropdownPortals ?? {})[colName] != null)
18577
- continue;
18578
- const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
18579
- if (slotContent == null)
18580
- continue;
18581
- // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
18582
- slotContent.removeAttribute('slot');
18583
- const portal = document.createElement('sd-portal');
18584
- portal.parentRef = this.dropdownThRefs[colName] ?? null;
18585
- portal.open = false;
18586
- // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
18587
- // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
18588
- portal.style.display = 'none';
18589
- portal.addEventListener('sdClose', () => this.closeDropdown(colName));
18590
- portal.appendChild(slotContent);
18591
- document.body.appendChild(portal);
18592
- this.dropdownPortals[colName] = portal;
18593
- }
18594
- }
18595
- syncTableContext() {
18596
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
18597
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
18598
- const closest = this.el.closest('sd-table');
18599
- const root = this.el.getRootNode();
18600
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
18601
- const table = closest ?? fromShadow;
18602
- this.tableEl = table;
18603
- const fromMethod = table?.getTableIdSync?.();
18604
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
18605
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
18606
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
18607
- '';
18608
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
18609
- this.tableId = resolvedTableId;
18610
- }
18611
- }
18612
- resolveConfig() {
18613
- const config = this.tableEl?.getConfigSync?.();
18614
- const resolvedColumns = Array.isArray(this.columns)
18615
- ? this.columns
18616
- : Array.isArray(config?.columns)
18617
- ? config.columns
18618
- : [];
18619
- this._columns = resolvedColumns;
18620
- this._selectable = this.selectable ?? config?.selectable ?? false;
18621
- this._resizable = this.resizable ?? config?.resizable ?? false;
18622
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
18623
- this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
18624
- this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
18625
- this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
18626
- if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
18627
- this.columnWidths = [...config.columnWidths];
18628
- }
18629
- if (!Array.isArray(this.columnWidths)) {
18630
- this.columnWidths = [];
18631
- }
18632
- }
18633
- /** 테이블 설정을 다시 불러옵니다. */
18634
- async refreshConfig() {
18635
- this.resolveConfig();
18636
- this.initDropdownPortals();
18637
- }
18638
- /** 컬럼 너비를 업데이트합니다. */
18639
- async setColumnWidths(widths) {
18640
- this.columnWidths = Array.isArray(widths) ? widths : [];
18641
- }
18642
- /** 전체 선택 체크박스 상태를 갱신합니다. */
18643
- async refreshSelection() {
18644
- const checkbox = this.el.querySelector('sd-checkbox');
18645
- if (checkbox) {
18646
- checkbox.value = this.getIsAllChecked();
18647
- }
18648
- }
18649
- get visibleColumns() {
18650
- return this._columns.filter(col => col.visible !== false);
18651
- }
18652
- getStickyStyle(colIdx) {
18653
- if (this.tableEl?.getStickyStyleSync) {
18654
- return this.tableEl.getStickyStyleSync(colIdx);
18655
- }
18656
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
18657
- (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
18658
- const rightOffset = this.columnWidths
18659
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
18660
- .reduce((a, b) => a + b, 0);
18661
- const col = this.visibleColumns[colIdx];
18662
- const base = {
18663
- '--sticky-left-offset': `${leftOffset}px`,
18664
- '--sticky-right-offset': `${rightOffset}px`,
18665
- };
18666
- if (!col?.autoWidth) {
18667
- base['width'] = `${this.columnWidths[colIdx]}px`;
18668
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
18669
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
18670
- }
18671
- return base;
18672
- }
18673
- handleResize(index, event, reversed = false) {
18674
- if (this.tableEl?.handleResize) {
18675
- this.tableEl.handleResize(index, event, reversed);
18676
- }
18677
- }
18678
- handleColumnSort = (col) => {
18679
- this.sdColumnSort.emit({ column: col });
18680
- };
18681
- toggleDropdown(name) {
18682
- const isOpen = this.dropdownOpenMap[name] !== true;
18683
- const portals = this.dropdownPortals ?? {};
18684
- const newMap = { ...this.dropdownOpenMap };
18685
- // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
18686
- for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
18687
- const shouldBeOpen = col.name === name ? isOpen : false;
18688
- newMap[col.name] = shouldBeOpen;
18689
- const portal = portals[col.name];
18690
- if (portal != null)
18691
- portal.open = shouldBeOpen;
18692
- }
18693
- this.dropdownOpenMap = newMap;
18694
- }
18695
- closeDropdown(name) {
18696
- if (this.dropdownOpenMap[name] !== true)
18697
- return;
18698
- this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
18699
- const portal = (this.dropdownPortals ?? {})[name];
18700
- if (portal != null)
18701
- portal.open = false;
18702
- }
18703
- handleSelectAll(checked) {
18704
- const nextChecked = !!checked;
18705
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18706
- if (this.tableEl?.toggleSelectAllSync) {
18707
- this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
18708
- }
18709
- }
18710
- getIsAllChecked() {
18711
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18712
- if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
18713
- return this.tableEl.getIsAllCheckedSync(safeRows);
18714
- }
18715
- return false;
18716
- }
18717
- render() {
18718
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18719
- const dropdownOpenMap = this.dropdownOpenMap ?? {};
18720
- const dropdownRefs = this.dropdownRefs ?? {};
18721
- const stickyLeftCount = this._stickyColumn.left || 0;
18722
- const stickyRightCount = this._stickyColumn.right || 0;
18723
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
18724
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18725
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18726
- const lastColIdx = this.visibleColumns.length - 1;
18727
- const headStyle = {
18728
- '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
18729
- '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
18730
- '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
18731
- '--table-header-bg': TABLE_HEADER_COLORS.bg,
18732
- '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
18733
- '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
18734
- '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
18735
- '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
18736
- '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
18737
- '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
18738
- '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
18739
- '--table-border-color': TABLE_BORDER.color,
18740
- '--table-border-width': `${TABLE_BORDER.width}px`,
18741
- };
18742
- return (hAsync(Host, { key: '2f2218c9c0ba02fc59eb026944a3e26fbf741f23', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '008fc1ef83c882dd85fd9d6b8490a3246183e758', class: {
18743
- 'thead': true,
18744
- 'thead--sticky': this._stickyHeader,
18745
- } }, hAsync("tr", { key: 'ff679599539ea36d74160d31258bc06c4c6d0fda', class: "tr" }, this._selectable && (hAsync("th", { key: '9fd149c26ec979f3f82eb5b1fad56cf963ee1e7f', class: {
18746
- 'th': true,
18747
- 'th--selected': true,
18748
- 'sticky-left': true,
18749
- 'sticky-left-edge': stickyLeftCount === 0,
18750
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18751
- }, 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: {
18752
- 'th': true,
18753
- [`${col.thClass}`]: Boolean(col.thClass),
18754
- 'sticky-left': true,
18755
- 'sticky-left-edge': idx === stickyLeftCount - 1,
18756
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18757
- 'th--has-dropdown': col.hasDropdown === true,
18758
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
18759
- ? el => {
18760
- this.dropdownThRefs[col.name] = el;
18761
- }
18762
- : 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) => {
18763
- e.stopPropagation();
18764
- this.handleColumnSort(col);
18765
- }, 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: {
18766
- 'th__dropdown-trigger': true,
18767
- 'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
18768
- }, ref: el => {
18769
- dropdownRefs[col.name] = el;
18770
- }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
18771
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18772
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18773
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
18774
- const actualColIdx = stickyLeftCount + relativeIdx;
18775
- return (hAsync("th", { key: col.name, class: {
18776
- 'th': true,
18777
- [`${col.thClass}`]: Boolean(col.thClass),
18778
- 'th--has-dropdown': col.hasDropdown === true,
18779
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18780
- ? el => {
18781
- this.dropdownThRefs[col.name] = el;
18782
- }
18783
- : 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) => {
18784
- e.stopPropagation();
18785
- this.handleColumnSort(col);
18786
- }, 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: {
18787
- 'th__dropdown-trigger': true,
18788
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18789
- }, ref: el => {
18790
- this.dropdownRefs[col.name] = el;
18791
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
18792
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18793
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18794
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
18795
- }), stickyRightCols.map((col, relativeIdx) => {
18796
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
18797
- return (hAsync("th", { key: col.name, class: {
18798
- 'th': true,
18799
- [`${col.thClass}`]: Boolean(col.thClass),
18800
- 'sticky-right': true,
18801
- 'sticky-right-edge': relativeIdx === 0,
18802
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
18803
- 'th--has-dropdown': col.hasDropdown === true,
18804
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18805
- ? el => {
18806
- this.dropdownThRefs[col.name] = el;
18807
- }
18808
- : 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) => {
18809
- e.stopPropagation();
18810
- this.handleColumnSort(col);
18811
- }, 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: {
18812
- 'th__dropdown-trigger': true,
18813
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18814
- }, ref: el => {
18815
- this.dropdownRefs[col.name] = el;
18816
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
18817
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18818
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18819
- hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
18820
- })))));
18821
- }
18822
- static get watchers() { return {
18823
- "columns": [{
18824
- "handleColumnsChange": 0
18825
- }]
18826
- }; }
18827
- static get style() { return sdTheadCss(); }
18828
- static get cmpMeta() { return {
18829
- "$flags$": 512,
18830
- "$tagName$": "sd-thead",
18831
- "$members$": {
18832
- "columns": [16],
18833
- "selectable": [4],
18834
- "resizable": [4],
18835
- "stickyColumn": [16],
18836
- "stickyHeader": [4, "sticky-header"],
18837
- "scrolledLeft": [4, "scrolled-left"],
18838
- "scrolledRight": [4, "scrolled-right"],
18839
- "rows": [16],
18840
- "columnWidths": [1040],
18841
- "tableId": [32],
18842
- "_columns": [32],
18843
- "_selectable": [32],
18844
- "_resizable": [32],
18845
- "_stickyColumn": [32],
18846
- "_stickyHeader": [32],
18847
- "_scrolledLeft": [32],
18848
- "_scrolledRight": [32],
18849
- "dropdownOpenMap": [32],
18850
- "refreshConfig": [64],
18851
- "setColumnWidths": [64],
18852
- "refreshSelection": [64]
18853
- },
18854
- "$listeners$": undefined,
18855
- "$lazyBundleId$": "-",
18856
- "$attrsToReflect$": []
18857
- }; }
18858
- }
18859
-
18860
17130
  const toast = {
18861
17131
  icon: "16",
18862
17132
  "default": {
@@ -18948,12 +17218,12 @@ class SdToast {
18948
17218
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
18949
17219
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
18950
17220
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
18951
- return (hAsync("div", { key: '434d4e58eed6589ed5cceb9df4c131a0594055e6', style: {
17221
+ return (hAsync("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
18952
17222
  '--sd-toast-bg': typeConfig.bg,
18953
17223
  '--sd-toast-text': typeConfig.content,
18954
17224
  '--sd-toast-icon': iconColor,
18955
17225
  '--sd-toast-link': linkColor,
18956
- } }, 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() })))));
17226
+ } }, 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() })))));
18957
17227
  }
18958
17228
  static get style() { return sdToastCss(); }
18959
17229
  static get cmpMeta() { return {
@@ -19215,7 +17485,7 @@ class SdToastContainer {
19215
17485
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
19216
17486
  const indexMap = new Map();
19217
17487
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
19218
- return (hAsync("div", { key: '005ce1d424e17b13a685c99e49d2eeda295d4346', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17488
+ return (hAsync("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
19219
17489
  this.expanded = true;
19220
17490
  this.pauseTimers();
19221
17491
  }, onMouseLeave: () => {
@@ -19376,7 +17646,7 @@ class SdToggle {
19376
17646
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
19377
17647
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
19378
17648
  };
19379
- 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 })));
17649
+ 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 })));
19380
17650
  }
19381
17651
  static get style() { return sdToggleCss(); }
19382
17652
  static get cmpMeta() { return {
@@ -19564,7 +17834,7 @@ class SdTooltip {
19564
17834
  const bodyHTML = this.message && this.message.length > 0
19565
17835
  ? this.message.map(line => `<div>${line}</div>`).join('')
19566
17836
  : this.slotContentHTML;
19567
- 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: {
17837
+ 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: {
19568
17838
  'sd-floating-menu': true,
19569
17839
  [`sd-floating-menu--${tooltipType}`]: true,
19570
17840
  [`sd-floating-menu--${placement}`]: true,
@@ -19572,7 +17842,7 @@ class SdTooltip {
19572
17842
  }, style: {
19573
17843
  '--sd-floating-bg': typeConfig.bg,
19574
17844
  '--sd-floating-content': typeConfig.content,
19575
- }, 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() })))))));
17845
+ }, 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() })))))));
19576
17846
  }
19577
17847
  static get style() { return sdTooltipCss(); }
19578
17848
  static get cmpMeta() { return {
@@ -19607,315 +17877,6 @@ class SdTooltip {
19607
17877
  }; }
19608
17878
  }
19609
17879
 
19610
- 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)}`;
19611
-
19612
- class SdTr {
19613
- constructor(hostRef) {
19614
- registerInstance(this, hostRef);
19615
- }
19616
- get el() { return getElement(this); }
19617
- /** 테이블 컬럼 목록 */
19618
- columns;
19619
- /** 행 선택 기능 사용 여부 */
19620
- selectable;
19621
- /** 고정 컬럼 설정 */
19622
- stickyColumn;
19623
- /** 행 식별 키 */
19624
- rowKey = '';
19625
- /** 행 데이터 객체 */
19626
- row = {};
19627
- /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
19628
- separator = null;
19629
- tableId = '';
19630
- columnWidths = [];
19631
- isVisible = true;
19632
- spansVersion = 0;
19633
- _columns = [];
19634
- _selectable = false;
19635
- _stickyColumn = { left: 0, right: 0 };
19636
- _scrolledLeft = false;
19637
- _scrolledRight = false;
19638
- _dense = false;
19639
- tableEl = null;
19640
- componentWillLoad() {
19641
- this.row = this.row ?? {};
19642
- this.syncTableContext();
19643
- this.columnWidths = this.columnWidths ?? [];
19644
- this.resolveConfig();
19645
- this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
19646
- this.updateVisibilitySync();
19647
- }
19648
- componentDidLoad() {
19649
- this.syncTableContext();
19650
- }
19651
- syncTableContext() {
19652
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
19653
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
19654
- const closest = this.el.closest('sd-table');
19655
- const root = this.el.getRootNode();
19656
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
19657
- const table = closest ?? fromShadow;
19658
- this.tableEl = table;
19659
- const fromMethod = table?.getTableIdSync?.();
19660
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
19661
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
19662
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
19663
- '';
19664
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
19665
- this.tableId = resolvedTableId;
19666
- }
19667
- }
19668
- resolveConfig() {
19669
- const config = this.tableEl?.getConfigSync?.();
19670
- this._columns = this.columns ?? config?.columns ?? [];
19671
- this._selectable = this.selectable ?? config?.selectable ?? false;
19672
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
19673
- this._scrolledLeft = config?.scrolledLeft ?? false;
19674
- this._scrolledRight = config?.scrolledRight ?? false;
19675
- this._dense = config?.dense ?? false;
19676
- if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
19677
- this.columnWidths = [...config.columnWidths];
19678
- }
19679
- }
19680
- /** 테이블 설정을 다시 불러옵니다. */
19681
- async refreshConfig() {
19682
- this.resolveConfig();
19683
- }
19684
- /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
19685
- async bumpSpansVersion() {
19686
- this.spansVersion = this.spansVersion + 1;
19687
- }
19688
- /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
19689
- async updateVisibility() {
19690
- this.updateVisibilitySync();
19691
- }
19692
- updateVisibilitySync() {
19693
- const rowIndex = parseInt(this.rowKey, 10);
19694
- const pageInfo = this.tableEl?.getPaginationInfoSync?.();
19695
- if (!pageInfo) {
19696
- this.isVisible = true;
19697
- return;
19698
- }
19699
- this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
19700
- }
19701
- /** 컬럼 너비를 업데이트합니다. */
19702
- async setColumnWidths(widths) {
19703
- this.columnWidths = widths;
19704
- }
19705
- /** 체크박스 선택 상태를 갱신합니다. */
19706
- async refreshSelection() {
19707
- const checkbox = this.el.querySelector('sd-checkbox');
19708
- if (checkbox) {
19709
- checkbox.value = this.isSelected();
19710
- }
19711
- }
19712
- get visibleColumns() {
19713
- return this._columns.filter(col => col.visible !== false);
19714
- }
19715
- formatValue(value) {
19716
- if (value === null || value === undefined) {
19717
- return '';
19718
- }
19719
- if (typeof value === 'number') {
19720
- return value.toLocaleString();
19721
- }
19722
- return String(value);
19723
- }
19724
- getCellValue(column) {
19725
- const { field, format, name } = column;
19726
- const value = typeof field === 'function'
19727
- ? field(this.row)
19728
- : field !== ''
19729
- ? this.row[field]
19730
- : this.row[name];
19731
- return format ? format(value, this.row) : this.formatValue(value);
19732
- }
19733
- getStickyStyle(colIdx) {
19734
- if (this.tableEl?.getStickyStyleSync) {
19735
- return this.tableEl.getStickyStyleSync(colIdx);
19736
- }
19737
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
19738
- const rightOffset = this.columnWidths
19739
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
19740
- .reduce((a, b) => a + b, 0);
19741
- const col = this.visibleColumns[colIdx];
19742
- const base = {
19743
- '--sticky-left-offset': `${leftOffset}px`,
19744
- '--sticky-right-offset': `${rightOffset}px`,
19745
- };
19746
- if (!col?.autoWidth) {
19747
- base['width'] = `${this.columnWidths[colIdx]}px`;
19748
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
19749
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
19750
- }
19751
- return base;
19752
- }
19753
- isSelected() {
19754
- if (this.tableEl?.isRowSelectedSync) {
19755
- return this.tableEl.isRowSelectedSync(this.row);
19756
- }
19757
- return false;
19758
- }
19759
- handleSelect() {
19760
- if (this.tableEl?.updateRowSelectSync) {
19761
- this.tableEl.updateRowSelectSync(this.row);
19762
- }
19763
- }
19764
- getSpanFor(col) {
19765
- if (!this.tableEl?.getSpanSync)
19766
- return undefined;
19767
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19768
- return this.tableEl.getSpanSync(this.rowKey, fieldName);
19769
- }
19770
- isCovered(colIdx) {
19771
- if (!this.tableEl?.isCoveredSync)
19772
- return false;
19773
- return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
19774
- }
19775
- getCellClassFor(col) {
19776
- if (!this.tableEl?.getCellClassSync)
19777
- return undefined;
19778
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19779
- return this.tableEl.getCellClassSync(this.rowKey, fieldName);
19780
- }
19781
- getFramePaddingStyle(field) {
19782
- if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
19783
- return undefined;
19784
- return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
19785
- }
19786
- expandCellClass(classStr) {
19787
- if (classStr == null || classStr === '')
19788
- return {};
19789
- return Object.fromEntries(classStr
19790
- .split(/\s+/)
19791
- .filter(Boolean)
19792
- .map(c => [c, true]));
19793
- }
19794
- render() {
19795
- const stickyLeftCount = this._stickyColumn.left || 0;
19796
- const stickyRightCount = this._stickyColumn.right || 0;
19797
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
19798
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
19799
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
19800
- const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
19801
- const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
19802
- const effectiveDense = this._dense && !isUseFrameRow;
19803
- const rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
19804
- const rowPaddingX = effectiveDense
19805
- ? TABLE_BODY_LAYOUT.densePaddingX
19806
- : TABLE_BODY_LAYOUT.paddingX;
19807
- const rowStyle = {
19808
- 'display': this.isVisible ? '' : 'none',
19809
- '--table-body-height': `${rowLayoutY.height}px`,
19810
- '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
19811
- '--table-body-padding-x': `${rowPaddingX}px`,
19812
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
19813
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
19814
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
19815
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
19816
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
19817
- '--table-border-color': TABLE_BORDER.color,
19818
- '--table-border-width': `${TABLE_BORDER.width}px`,
19819
- '--table-separator-color': TABLE_SEPARATOR.color,
19820
- '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
19821
- '--table-separator-dense-width': `${TABLE_SEPARATOR.denseWidth}px`,
19822
- };
19823
- if (this.separator != null) {
19824
- const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
19825
- const isDense = this.separator === 4;
19826
- 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" }))));
19827
- }
19828
- return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
19829
- 'td': true,
19830
- 'td--selected': true,
19831
- 'sticky-left': true,
19832
- 'sticky-left-edge': stickyLeftCount === 0,
19833
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
19834
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
19835
- if (this.isCovered(idx))
19836
- return null;
19837
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19838
- const span = this.getSpanFor(col);
19839
- const sdCellClass = this.getCellClassFor(col);
19840
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19841
- 'td': true,
19842
- [`td--${col.align || 'left'}`]: true,
19843
- 'sticky-left': true,
19844
- 'sticky-left-edge': idx === stickyLeftCount - 1,
19845
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
19846
- [`${col.tdClass}`]: Boolean(col.tdClass),
19847
- ...this.expandCellClass(sdCellClass),
19848
- }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19849
- }), middleCols.map((col, relativeIdx) => {
19850
- const actualColIdx = stickyLeftCount + relativeIdx;
19851
- if (this.isCovered(actualColIdx))
19852
- return null;
19853
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19854
- const span = this.getSpanFor(col);
19855
- const sdCellClass = this.getCellClassFor(col);
19856
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19857
- td: true,
19858
- [`td--${col.align || 'left'}`]: true,
19859
- [`${col.tdClass}`]: Boolean(col.tdClass),
19860
- ...this.expandCellClass(sdCellClass),
19861
- }, style: {
19862
- ...this.getStickyStyle(actualColIdx),
19863
- ...this.getFramePaddingStyle(fieldName),
19864
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19865
- }), stickyRightCols.map((col, relativeIdx) => {
19866
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
19867
- if (this.isCovered(actualColIdx))
19868
- return null;
19869
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19870
- const span = this.getSpanFor(col);
19871
- const sdCellClass = this.getCellClassFor(col);
19872
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19873
- 'td': true,
19874
- [`td--${col.align || 'left'}`]: true,
19875
- 'sticky-right': true,
19876
- 'sticky-right-edge': relativeIdx === 0,
19877
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
19878
- [`${col.tdClass}`]: Boolean(col.tdClass),
19879
- ...this.expandCellClass(sdCellClass),
19880
- }, style: {
19881
- ...this.getStickyStyle(actualColIdx),
19882
- ...this.getFramePaddingStyle(fieldName),
19883
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19884
- }))));
19885
- }
19886
- static get style() { return sdTrCss(); }
19887
- static get cmpMeta() { return {
19888
- "$flags$": 772,
19889
- "$tagName$": "sd-tr",
19890
- "$members$": {
19891
- "columns": [16],
19892
- "selectable": [4],
19893
- "stickyColumn": [16],
19894
- "rowKey": [1, "row-key"],
19895
- "row": [16],
19896
- "separator": [8],
19897
- "tableId": [32],
19898
- "columnWidths": [32],
19899
- "isVisible": [32],
19900
- "spansVersion": [32],
19901
- "_columns": [32],
19902
- "_selectable": [32],
19903
- "_stickyColumn": [32],
19904
- "_scrolledLeft": [32],
19905
- "_scrolledRight": [32],
19906
- "_dense": [32],
19907
- "refreshConfig": [64],
19908
- "bumpSpansVersion": [64],
19909
- "updateVisibility": [64],
19910
- "setColumnWidths": [64],
19911
- "refreshSelection": [64]
19912
- },
19913
- "$listeners$": undefined,
19914
- "$lazyBundleId$": "-",
19915
- "$attrsToReflect$": []
19916
- }; }
19917
- }
19918
-
19919
17880
  registerComponents([
19920
17881
  SdActionModal,
19921
17882
  SdBadge,
@@ -19963,19 +17924,14 @@ registerComponents([
19963
17924
  SdSelectListbox,
19964
17925
  SdSelectTrigger,
19965
17926
  SdSwitch,
19966
- SdTable,
19967
17927
  SdTabs,
19968
17928
  SdTag,
19969
- SdTbody,
19970
- SdTd,
19971
17929
  SdTextLink,
19972
17930
  SdTextarea,
19973
- SdThead,
19974
17931
  SdToast,
19975
17932
  SdToastContainer,
19976
17933
  SdToggle,
19977
17934
  SdTooltip,
19978
- SdTr,
19979
17935
  ]);
19980
17936
 
19981
17937
  exports.hydrateApp = hydrateApp;