@sellmate/design-system 1.27.1 → 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 (378) hide show
  1. package/dist/cjs/{component.datepicker-CUQbDSku.js → component.datepicker-zFTQQKMH.js} +1 -2
  2. package/dist/cjs/component.listBox-MHAv4Yy7.js +15 -0
  3. package/dist/cjs/{component.listItem-Bnh0r_CA.js → component.listItem-cAO_ppOz.js} +0 -7
  4. package/dist/cjs/design-system.cjs.js +2 -2
  5. package/dist/cjs/{index-DsYLSqCp.js → index-iiJZMzVM.js} +1 -15
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/sd-action-modal.cjs.entry.js +1 -1
  8. package/dist/cjs/sd-badge.cjs.entry.js +1 -1
  9. package/dist/cjs/sd-barcode-input.cjs.entry.js +1 -1
  10. package/dist/cjs/sd-button_2.cjs.entry.js +1 -1
  11. package/dist/cjs/sd-calendar_2.cjs.entry.js +6 -6
  12. package/dist/cjs/sd-callout.cjs.entry.js +1 -1
  13. package/dist/cjs/sd-card.cjs.entry.js +1 -1
  14. package/dist/cjs/sd-checkbox.cjs.entry.js +2 -3
  15. package/dist/cjs/sd-chip-input.cjs.entry.js +5 -4
  16. package/dist/cjs/sd-chip.cjs.entry.js +1 -1
  17. package/dist/cjs/sd-circle-progress.cjs.entry.js +6 -4
  18. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +37 -37
  19. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  20. package/dist/cjs/{sd-date-picker.config-De7ahWIs.js → sd-date-picker.config-Chrd8c4v.js} +1 -1
  21. package/dist/cjs/{sd-date-picker_7.cjs.entry.js → sd-date-picker_8.cjs.entry.js} +381 -19
  22. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +4 -4
  23. package/dist/cjs/sd-divider.cjs.entry.js +3 -3
  24. package/dist/cjs/sd-dropdown-button.cjs.entry.js +2 -2
  25. package/dist/cjs/sd-field_3.cjs.entry.js +10 -10
  26. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  27. package/dist/cjs/sd-ghost-button_3.cjs.entry.js +4 -5
  28. package/dist/cjs/sd-guide.cjs.entry.js +5 -10
  29. package/dist/cjs/sd-key-value-table.cjs.entry.js +88 -18
  30. package/dist/cjs/sd-linear-progress.cjs.entry.js +3 -3
  31. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  32. package/dist/cjs/sd-modal-container.cjs.entry.js +16 -2
  33. package/dist/cjs/sd-pagination.cjs.entry.js +173 -0
  34. package/dist/cjs/sd-popover.cjs.entry.js +2 -2
  35. package/dist/cjs/sd-popup.cjs.entry.js +3 -3
  36. package/dist/cjs/sd-radio-button.cjs.entry.js +1 -1
  37. package/dist/cjs/sd-radio.cjs.entry.js +2 -3
  38. package/dist/cjs/{sd-select_3.cjs.entry.js → sd-select-list-item_4.cjs.entry.js} +294 -314
  39. package/dist/cjs/sd-switch.cjs.entry.js +2 -2
  40. package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
  41. package/dist/cjs/sd-text-link.cjs.entry.js +1 -1
  42. package/dist/cjs/sd-toast-container.cjs.entry.js +2 -2
  43. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  44. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  45. package/dist/cjs/{system-MjrAugX-.js → system-B4KkVpu2.js} +1 -7
  46. package/dist/cjs/{tooltipArrow-FLiD3ceS.js → tooltipArrow-DOOcBlLp.js} +1 -1
  47. package/dist/cjs/{useDatePicker-iMd6WToc.js → useDatePicker-CgpIfwLA.js} +1 -1
  48. package/dist/collection/collection-manifest.json +0 -5
  49. package/dist/collection/components/sd-circle-progress/sd-circle-progress.css +13 -0
  50. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +23 -1
  51. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.css +3 -0
  52. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +35 -59
  53. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  54. package/dist/collection/components/sd-date-picker/sd-date-picker.js +2 -2
  55. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +1 -1
  56. package/dist/collection/components/sd-divider/sd-divider.js +1 -1
  57. package/dist/collection/components/sd-field/sd-field.js +4 -4
  58. package/dist/collection/components/sd-file-picker/sd-file-picker.config.js +9 -0
  59. package/dist/collection/components/sd-file-picker/sd-file-picker.css +18 -0
  60. package/dist/collection/components/sd-file-picker/sd-file-picker.js +73 -7
  61. package/dist/collection/components/sd-floating-portal/sd-floating-portal.css +1 -1
  62. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  63. package/dist/collection/components/sd-guide/sd-guide.config.js +0 -1
  64. package/dist/collection/components/sd-guide/sd-guide.css +0 -3
  65. package/dist/collection/components/sd-guide/sd-guide.js +2 -3
  66. package/dist/collection/components/sd-input/sd-input.js +2 -2
  67. package/dist/collection/components/sd-key-value-table/sd-key-value-table.config.js +2 -0
  68. package/dist/collection/components/sd-key-value-table/sd-key-value-table.css +5 -1
  69. package/dist/collection/components/sd-key-value-table/sd-key-value-table.js +65 -15
  70. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  71. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  72. package/dist/collection/components/sd-loading-modal/sd-loading-modal.css +7 -0
  73. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +18 -1
  74. package/dist/collection/components/sd-modal-container/sd-modal-container.js +15 -1
  75. package/dist/collection/components/sd-number-input/sd-number-input.js +4 -4
  76. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  77. package/dist/collection/components/sd-popup/sd-popup.js +1 -1
  78. package/dist/collection/components/sd-radio-group/sd-radio-group.css +2 -2
  79. package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
  80. package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
  81. package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
  82. package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
  83. package/dist/collection/components/sd-select/sd-select.js +4 -4
  84. package/dist/collection/components/sd-switch/sd-switch.js +1 -1
  85. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  86. package/dist/collection/components/sd-tag/sd-tag.js +2 -2
  87. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  88. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  89. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  90. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  91. package/dist/collection/components/sd-tooltip/sd-tooltip.js +2 -2
  92. package/dist/components/index.js +1 -1
  93. package/dist/components/p-4S0_Ykmo.js +1 -0
  94. package/dist/components/{p-Dy6LmOzw.js → p-9Ap2W-Mi.js} +1 -1
  95. package/dist/components/{p-NeXvaRu7.js → p-BFVfSW9t.js} +1 -1
  96. package/dist/components/{p-Du_Yc-lW.js → p-BHjezpAC.js} +1 -1
  97. package/dist/components/{p-DnxEeX9I.js → p-BIEPMPWA.js} +1 -1
  98. package/dist/components/{p--AZbwi7P.js → p-BKu0I6Io.js} +1 -1
  99. package/dist/components/{p-DTb2c83G.js → p-B_Zwr4Et.js} +1 -1
  100. package/dist/components/{p-BysikR_g.js → p-Bpv90tfa.js} +1 -1
  101. package/dist/components/p-Bth2l1cy.js +1 -0
  102. package/dist/components/{p-Cok_EW_N.js → p-C7mC7a1z.js} +1 -1
  103. package/dist/components/{p-CIPPETF-.js → p-CBoDoYDO.js} +1 -1
  104. package/dist/components/p-CErFctrV.js +1 -0
  105. package/dist/components/{p-SROa9QCy.js → p-CFTyEfB9.js} +1 -1
  106. package/dist/components/{p-BaRjXqSM.js → p-CSr33M9s.js} +1 -1
  107. package/dist/components/p-CYMMLsGt.js +1 -0
  108. package/dist/components/{p-CvSPsoRb.js → p-C_SG4M4z.js} +1 -1
  109. package/dist/components/{p-BV4cnHWn.js → p-C_in6AVN.js} +1 -1
  110. package/dist/components/{p-DsQQFJ8o.js → p-CbS69IvC.js} +1 -1
  111. package/dist/components/{p-BOJALVxB.js → p-CgSXYw_0.js} +1 -1
  112. package/dist/components/{p-DVq9oE_p.js → p-CmRF12Fy.js} +1 -1
  113. package/dist/components/p-CnRfET5y.js +1 -0
  114. package/dist/components/{p-BFy8txYj.js → p-Cvsrc0be.js} +1 -1
  115. package/dist/components/{p-PvltLPHp.js → p-DJ8z7_EG.js} +1 -1
  116. package/dist/components/{p-CwwJD-NF.js → p-DJmxpVkK.js} +1 -1
  117. package/dist/components/{p-D7XGOtx0.js → p-DMoFncVl.js} +1 -1
  118. package/dist/components/{p-BxphFsxh.js → p-DN7MAx-q.js} +1 -1
  119. package/dist/components/{p-hP1aeMuZ.js → p-DS6NVBvu.js} +1 -1
  120. package/dist/components/{p-Bk6aI8rL.js → p-D_56BjcD.js} +1 -1
  121. package/dist/components/{p-DMrzTImA.js → p-Dg1UrMqI.js} +1 -1
  122. package/dist/components/{p-BU1H7ElF.js → p-Di1q4f5E.js} +1 -1
  123. package/dist/components/p-DlJaYVWf.js +1 -0
  124. package/dist/components/p-OO7xxhkC.js +1 -0
  125. package/dist/components/{p-DYp8I4VH.js → p-R-Sdglj0.js} +1 -1
  126. package/dist/components/p-Uh9emYrV.js +1 -0
  127. package/dist/components/{p-DkaajrxX.js → p-f0aBxUBG.js} +1 -1
  128. package/dist/components/{p-DT-e9J59.js → p-idG6CMO0.js} +1 -1
  129. package/dist/components/p-oYbVr-z0.js +1 -0
  130. package/dist/components/p-x9AWBHPy.js +1 -0
  131. package/dist/components/sd-action-modal.js +1 -1
  132. package/dist/components/sd-badge.js +1 -1
  133. package/dist/components/sd-barcode-input.js +1 -1
  134. package/dist/components/sd-button.js +1 -1
  135. package/dist/components/sd-calendar.js +1 -1
  136. package/dist/components/sd-callout.js +1 -1
  137. package/dist/components/sd-card.js +1 -1
  138. package/dist/components/sd-checkbox.js +1 -1
  139. package/dist/components/sd-chip-input.js +1 -1
  140. package/dist/components/sd-chip.js +1 -1
  141. package/dist/components/sd-circle-progress.js +1 -1
  142. package/dist/components/sd-confirm-modal.js +1 -1
  143. package/dist/components/sd-date-box.js +1 -1
  144. package/dist/components/sd-date-picker-trigger.js +1 -1
  145. package/dist/components/sd-date-picker.js +1 -1
  146. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  147. package/dist/components/sd-date-range-picker.js +1 -1
  148. package/dist/components/sd-divider.js +1 -1
  149. package/dist/components/sd-dropdown-button.js +1 -1
  150. package/dist/components/sd-field.js +1 -1
  151. package/dist/components/sd-file-picker.js +1 -1
  152. package/dist/components/sd-floating-portal.js +1 -1
  153. package/dist/components/sd-form.js +1 -1
  154. package/dist/components/sd-ghost-button.js +1 -1
  155. package/dist/components/sd-guide.js +1 -1
  156. package/dist/components/sd-icon.js +1 -1
  157. package/dist/components/sd-input.js +1 -1
  158. package/dist/components/sd-key-value-table.js +1 -1
  159. package/dist/components/sd-linear-progress.js +1 -1
  160. package/dist/components/sd-loading-container.js +1 -1
  161. package/dist/components/sd-loading-modal.js +1 -1
  162. package/dist/components/sd-modal-container.js +1 -1
  163. package/dist/components/sd-number-input.js +1 -1
  164. package/dist/components/sd-pagination.js +1 -1
  165. package/dist/components/sd-popover.js +1 -1
  166. package/dist/components/sd-popup.js +1 -1
  167. package/dist/components/sd-portal.js +1 -1
  168. package/dist/components/sd-radio-button.js +1 -1
  169. package/dist/components/sd-radio-group.js +1 -1
  170. package/dist/components/sd-radio.js +1 -1
  171. package/dist/components/sd-select-list-item-search.js +1 -1
  172. package/dist/components/sd-select-list-item.js +1 -1
  173. package/dist/components/sd-select-listbox.js +1 -1
  174. package/dist/components/sd-select-trigger.js +1 -1
  175. package/dist/components/sd-select.js +1 -1
  176. package/dist/components/sd-switch.js +1 -1
  177. package/dist/components/sd-tabs.js +1 -1
  178. package/dist/components/sd-tag.js +1 -1
  179. package/dist/components/sd-text-link.js +1 -1
  180. package/dist/components/sd-textarea.js +1 -1
  181. package/dist/components/sd-toast-container.js +1 -1
  182. package/dist/components/sd-toast.js +1 -1
  183. package/dist/components/sd-toggle.js +1 -1
  184. package/dist/components/sd-tooltip.js +1 -1
  185. package/dist/design-system/design-system.css +1 -1
  186. package/dist/design-system/design-system.esm.js +1 -1
  187. package/dist/design-system/{p-ddb9a2c4.entry.js → p-02f0b906.entry.js} +1 -1
  188. package/dist/design-system/{p-a4e1dd8c.entry.js → p-0c1d1a15.entry.js} +1 -1
  189. package/dist/design-system/{p-cb0cbcb0.entry.js → p-0e014b76.entry.js} +1 -1
  190. package/dist/design-system/{p-49b1636a.entry.js → p-1b5fcf7b.entry.js} +1 -1
  191. package/dist/design-system/{p-5aa5aec3.entry.js → p-1ed1bfa1.entry.js} +1 -1
  192. package/dist/design-system/{p-8c1a9374.entry.js → p-246aafb9.entry.js} +1 -1
  193. package/dist/design-system/p-26a27312.entry.js +1 -0
  194. package/dist/design-system/{p-d790fbb8.entry.js → p-2a4d2ee0.entry.js} +1 -1
  195. package/dist/design-system/{p-270c8529.entry.js → p-2d6a7d7b.entry.js} +1 -1
  196. package/dist/design-system/{p-947dcc28.entry.js → p-3595cafb.entry.js} +1 -1
  197. package/dist/design-system/p-3cd2751a.entry.js +1 -0
  198. package/dist/design-system/p-4S0_Ykmo.js +1 -0
  199. package/dist/design-system/p-4b474538.entry.js +1 -0
  200. package/dist/design-system/{p-e63bf0e1.entry.js → p-4c85f6f6.entry.js} +1 -1
  201. package/dist/design-system/{p-55c8ce37.entry.js → p-53fe2741.entry.js} +1 -1
  202. package/dist/design-system/{p-06b56059.entry.js → p-55c0be7d.entry.js} +1 -1
  203. package/dist/design-system/p-5a257ed9.entry.js +1 -0
  204. package/dist/design-system/{p-459a408f.entry.js → p-840006b1.entry.js} +1 -1
  205. package/dist/design-system/{p-dae6914d.entry.js → p-86329ae3.entry.js} +1 -1
  206. package/dist/design-system/{p-8ac340db.entry.js → p-8de3b502.entry.js} +1 -1
  207. package/dist/design-system/{p-9603971e.entry.js → p-8ed1d470.entry.js} +1 -1
  208. package/dist/design-system/{p-D2S9Zafz.js → p-B91K50wC.js} +1 -1
  209. package/dist/design-system/{p-BqWuC4-J.js → p-BPKiBSGr.js} +1 -1
  210. package/dist/design-system/p-BhcvMs8c.js +1 -0
  211. package/dist/design-system/p-Bth2l1cy.js +1 -0
  212. package/dist/design-system/p-DlJaYVWf.js +1 -0
  213. package/dist/design-system/p-Dz490Ukt.js +2 -0
  214. package/dist/design-system/{p-761c008c.entry.js → p-a631cd78.entry.js} +1 -1
  215. package/dist/design-system/p-adf2f398.entry.js +1 -0
  216. package/dist/design-system/{p-26297c6e.entry.js → p-b585f94b.entry.js} +1 -1
  217. package/dist/design-system/p-be54fd3a.entry.js +1 -0
  218. package/dist/design-system/{p-7540f591.entry.js → p-c1066f40.entry.js} +1 -1
  219. package/dist/design-system/{p-b86a69ce.entry.js → p-c5cffcc6.entry.js} +1 -1
  220. package/dist/design-system/p-c7d2c195.entry.js +1 -0
  221. package/dist/design-system/{p-839e6b5a.entry.js → p-cb6ab65c.entry.js} +1 -1
  222. package/dist/design-system/{p-07755193.entry.js → p-d204cac5.entry.js} +1 -1
  223. package/dist/design-system/p-d2ce01ac.entry.js +1 -0
  224. package/dist/design-system/p-d51f4170.entry.js +1 -0
  225. package/dist/design-system/{p-dfa16f49.entry.js → p-d9f33192.entry.js} +1 -1
  226. package/dist/design-system/{p-b9387621.entry.js → p-e7740a5f.entry.js} +1 -1
  227. package/dist/design-system/p-e85bf462.entry.js +1 -0
  228. package/dist/design-system/{p-9c0d3011.entry.js → p-ea008087.entry.js} +1 -1
  229. package/dist/design-system/{p-5142cd06.entry.js → p-ec4ad48c.entry.js} +1 -1
  230. package/dist/design-system/{p-5f1dae23.entry.js → p-f962e5d2.entry.js} +1 -1
  231. package/dist/esm/{component.datepicker-laVsm9VM.js → component.datepicker-BOxGhKKP.js} +1 -2
  232. package/dist/esm/component.listBox-DlJaYVWf.js +13 -0
  233. package/dist/esm/{component.listItem-U8VaRj9c.js → component.listItem-4S0_Ykmo.js} +1 -7
  234. package/dist/esm/design-system.js +3 -3
  235. package/dist/esm/{index-BZg-6aSz.js → index-Dz490Ukt.js} +2 -14
  236. package/dist/esm/loader.js +3 -3
  237. package/dist/esm/sd-action-modal.entry.js +1 -1
  238. package/dist/esm/sd-badge.entry.js +1 -1
  239. package/dist/esm/sd-barcode-input.entry.js +1 -1
  240. package/dist/esm/sd-button_2.entry.js +1 -1
  241. package/dist/esm/sd-calendar_2.entry.js +6 -6
  242. package/dist/esm/sd-callout.entry.js +1 -1
  243. package/dist/esm/sd-card.entry.js +1 -1
  244. package/dist/esm/sd-checkbox.entry.js +2 -3
  245. package/dist/esm/sd-chip-input.entry.js +4 -3
  246. package/dist/esm/sd-chip.entry.js +1 -1
  247. package/dist/esm/sd-circle-progress.entry.js +6 -4
  248. package/dist/esm/sd-confirm-modal_2.entry.js +37 -37
  249. package/dist/esm/sd-date-box.entry.js +1 -1
  250. package/dist/esm/{sd-date-picker.config-D-ks6qNf.js → sd-date-picker.config-krRuSUsA.js} +1 -1
  251. package/dist/esm/{sd-date-picker_7.entry.js → sd-date-picker_8.entry.js} +381 -20
  252. package/dist/esm/sd-date-range-picker-calendar.entry.js +4 -4
  253. package/dist/esm/sd-divider.entry.js +3 -3
  254. package/dist/esm/sd-dropdown-button.entry.js +2 -2
  255. package/dist/esm/sd-field_3.entry.js +10 -10
  256. package/dist/esm/sd-form.entry.js +1 -1
  257. package/dist/esm/sd-ghost-button_3.entry.js +4 -5
  258. package/dist/esm/sd-guide.entry.js +5 -10
  259. package/dist/esm/sd-key-value-table.entry.js +87 -17
  260. package/dist/esm/sd-linear-progress.entry.js +3 -3
  261. package/dist/esm/sd-loading-container.entry.js +3 -3
  262. package/dist/esm/sd-modal-container.entry.js +16 -2
  263. package/dist/esm/sd-pagination.entry.js +171 -0
  264. package/dist/esm/sd-popover.entry.js +2 -2
  265. package/dist/esm/sd-popup.entry.js +3 -3
  266. package/dist/esm/sd-radio-button.entry.js +1 -1
  267. package/dist/esm/sd-radio.entry.js +2 -3
  268. package/dist/esm/{sd-select_3.entry.js → sd-select-list-item_4.entry.js} +277 -298
  269. package/dist/esm/sd-switch.entry.js +2 -2
  270. package/dist/esm/sd-tabs.entry.js +2 -2
  271. package/dist/esm/sd-text-link.entry.js +1 -1
  272. package/dist/esm/sd-toast-container.entry.js +2 -2
  273. package/dist/esm/sd-toast.entry.js +3 -3
  274. package/dist/esm/sd-toggle.entry.js +2 -2
  275. package/dist/esm/{system-BJfiMC9H.js → system-Bth2l1cy.js} +1 -7
  276. package/dist/esm/{tooltipArrow-BAi-pktU.js → tooltipArrow-CEHVt90h.js} +1 -1
  277. package/dist/esm/{useDatePicker-DoUg--aq.js → useDatePicker-BG0lUGJG.js} +1 -1
  278. package/dist/types/components/sd-circle-progress/sd-circle-progress.d.ts +2 -0
  279. package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts +10 -10
  280. package/dist/types/components/sd-file-picker/sd-file-picker.config.d.ts +6 -0
  281. package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +10 -0
  282. package/dist/types/components/sd-guide/sd-guide.config.d.ts +0 -1
  283. package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts +22 -3
  284. package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts +9 -1
  285. package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts +2 -0
  286. package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts +3 -0
  287. package/dist/types/components/sd-modal-container/sd-modal-container.d.ts +2 -0
  288. package/dist/types/components.d.ts +44 -696
  289. package/dist/types/index.d.ts +0 -1
  290. package/hydrate/index.js +254 -2235
  291. package/hydrate/index.mjs +254 -2235
  292. package/package.json +1 -1
  293. package/dist/cjs/component.table-BrI3b--h.js +0 -71
  294. package/dist/cjs/constants-DJRV1upE.js +0 -5
  295. package/dist/cjs/sd-pagination_4.cjs.entry.js +0 -856
  296. package/dist/cjs/sd-select-list-item_2.cjs.entry.js +0 -172
  297. package/dist/cjs/sd-select.config-C9Ohe1QA.js +0 -143
  298. package/dist/cjs/sd-table.cjs.entry.js +0 -956
  299. package/dist/cjs/sd-table.config-DzC55sap.js +0 -82
  300. package/dist/cjs/sd-td.cjs.entry.js +0 -201
  301. package/dist/collection/components/sd-table/constants.js +0 -1
  302. package/dist/collection/components/sd-table/sd-table.config.js +0 -87
  303. package/dist/collection/components/sd-table/sd-table.css +0 -180
  304. package/dist/collection/components/sd-table/sd-table.js +0 -1709
  305. package/dist/collection/components/sd-table/sd-table.stories.helpers.js +0 -242
  306. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css +0 -10
  307. package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js +0 -110
  308. package/dist/collection/components/sd-table/sd-td/sd-td.css +0 -15
  309. package/dist/collection/components/sd-table/sd-td/sd-td.js +0 -381
  310. package/dist/collection/components/sd-table/sd-thead/sd-thead.css +0 -186
  311. package/dist/collection/components/sd-table/sd-thead/sd-thead.js +0 -629
  312. package/dist/collection/components/sd-table/sd-tr/sd-tr.css +0 -145
  313. package/dist/collection/components/sd-table/sd-tr/sd-tr.js +0 -528
  314. package/dist/components/p-BHNytAtJ.js +0 -1
  315. package/dist/components/p-BJfiMC9H.js +0 -1
  316. package/dist/components/p-BQqXWtI6.js +0 -1
  317. package/dist/components/p-BXcizROm.js +0 -1
  318. package/dist/components/p-BZdgdRXJ.js +0 -1
  319. package/dist/components/p-CJcs7kNH.js +0 -1
  320. package/dist/components/p-CV5LiFKt.js +0 -1
  321. package/dist/components/p-CiTn4ZiI.js +0 -1
  322. package/dist/components/p-CmK45nj3.js +0 -1
  323. package/dist/components/p-D9tQwTWy.js +0 -1
  324. package/dist/components/p-DeXLIS7e.js +0 -1
  325. package/dist/components/p-DmC83_E9.js +0 -1
  326. package/dist/components/p-DvvGi4J_.js +0 -1
  327. package/dist/components/p-U8VaRj9c.js +0 -1
  328. package/dist/components/p-jwusYvH0.js +0 -1
  329. package/dist/components/p-sZMi_32I.js +0 -1
  330. package/dist/components/sd-table.d.ts +0 -11
  331. package/dist/components/sd-table.js +0 -1
  332. package/dist/components/sd-tbody.d.ts +0 -11
  333. package/dist/components/sd-tbody.js +0 -1
  334. package/dist/components/sd-td.d.ts +0 -11
  335. package/dist/components/sd-td.js +0 -1
  336. package/dist/components/sd-thead.d.ts +0 -11
  337. package/dist/components/sd-thead.js +0 -1
  338. package/dist/components/sd-tr.d.ts +0 -11
  339. package/dist/components/sd-tr.js +0 -1
  340. package/dist/design-system/p-147e0413.entry.js +0 -1
  341. package/dist/design-system/p-51c7839c.entry.js +0 -1
  342. package/dist/design-system/p-5f5f2fbe.entry.js +0 -1
  343. package/dist/design-system/p-65285327.entry.js +0 -1
  344. package/dist/design-system/p-6aec5853.entry.js +0 -1
  345. package/dist/design-system/p-80abdfe7.entry.js +0 -1
  346. package/dist/design-system/p-9825e76c.entry.js +0 -1
  347. package/dist/design-system/p-B-LOf2aM.js +0 -1
  348. package/dist/design-system/p-BJfiMC9H.js +0 -1
  349. package/dist/design-system/p-BXcizROm.js +0 -1
  350. package/dist/design-system/p-BZg-6aSz.js +0 -2
  351. package/dist/design-system/p-CAFz8W8_.js +0 -1
  352. package/dist/design-system/p-D9tQwTWy.js +0 -1
  353. package/dist/design-system/p-U8VaRj9c.js +0 -1
  354. package/dist/design-system/p-b84f5550.entry.js +0 -1
  355. package/dist/design-system/p-edfb5c83.entry.js +0 -1
  356. package/dist/design-system/p-efc55114.entry.js +0 -1
  357. package/dist/design-system/p-fd671afe.entry.js +0 -1
  358. package/dist/design-system/p-fe2b853f.entry.js +0 -1
  359. package/dist/design-system/p-ff9ccbf6.entry.js +0 -1
  360. package/dist/design-system/p-sZMi_32I.js +0 -1
  361. package/dist/esm/component.table-D9tQwTWy.js +0 -69
  362. package/dist/esm/constants-sZMi_32I.js +0 -3
  363. package/dist/esm/sd-pagination_4.entry.js +0 -851
  364. package/dist/esm/sd-select-list-item_2.entry.js +0 -169
  365. package/dist/esm/sd-select.config-D6ktrl7E.js +0 -128
  366. package/dist/esm/sd-table.config-BbIWNUE2.js +0 -69
  367. package/dist/esm/sd-table.entry.js +0 -954
  368. package/dist/esm/sd-td.entry.js +0 -199
  369. package/dist/types/components/sd-table/constants.d.ts +0 -50
  370. package/dist/types/components/sd-table/sd-table.config.d.ts +0 -70
  371. package/dist/types/components/sd-table/sd-table.d.ts +0 -199
  372. package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts +0 -39
  373. package/dist/types/components/sd-table/sd-tbody/sd-tbody.d.ts +0 -15
  374. package/dist/types/components/sd-table/sd-td/sd-td.d.ts +0 -38
  375. package/dist/types/components/sd-table/sd-thead/sd-thead.d.ts +0 -62
  376. package/dist/types/components/sd-table/sd-tr/sd-tr.d.ts +0 -54
  377. /package/dist/components/{p-laVsm9VM.js → p-BOxGhKKP.js} +0 -0
  378. /package/dist/design-system/{p-laVsm9VM.js → p-BOxGhKKP.js} +0 -0
package/hydrate/index.mjs CHANGED
@@ -129,12 +129,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
129
129
  /*hydrateAppClosure start*/
130
130
 
131
131
 
132
- var node_crypto = require('node:crypto');
133
-
134
132
  const NAMESPACE = 'design-system';
135
133
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
136
134
 
137
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-ghost-button-ghost-button-group-gap:4px;--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-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon: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-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-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-row-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-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-dense-padding-y:6px;--sd-table-table-body-padding-x-default:16px;--sd-table-table-body-padding-x-frame:8px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding-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-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
135
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-neutral-bright:#F9F9F9;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-ghost-button-ghost-button-group-gap:8px;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-text-link-text-link-group-horizontal-normal:16px;--sd-text-link-text-link-group-horizontal-wide:24px;--sd-text-link-text-link-group-vertical-normal:4px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-toggle-toggle-group-gap:8px;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-checkbox-checkbox-group-gap-horizontal:24px;--sd-checkbox-checkbox-group-gap-vertical:8px;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-radio-group-gap-horizontal:24px;--sd-radio-radio-group-gap-vertical:8px;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:16px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-number-input-number-input-stepper-border-default:#93C4FF;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-datepicker-datepicker-calendar-time-bg-default:#F9F9F9;--sd-datepicker-datepicker-calendar-time-bg-selected:#F5FAFF;--sd-datepicker-datepicker-calendar-time-date-label:#222222;--sd-datepicker-datepicker-calendar-time-date-unit:#888888;--sd-datepicker-datepicker-calendar-time-date-gap:6px;--sd-datepicker-datepicker-calendar-time-radius:8px;--sd-datepicker-datepicker-calendar-time-padding-x:16px;--sd-datepicker-datepicker-calendar-time-padding-y:12px;--sd-datepicker-datepicker-calendar-time-gap:12px;--sd-datepicker-datepicker-calendar-time-section-gap:12px;--sd-datepicker-datepicker-calendar-time-unit-gap:2px;--sd-datepicker-datepicker-calendar-time-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-time-typography-font-weight:500;--sd-datepicker-datepicker-calendar-time-typography-font-size:12px;--sd-datepicker-datepicker-calendar-time-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-time-typography-line-height:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#222222;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-timepicker-timepicker-border-default:#AAAAAA;--sd-timepicker-timepicker-border-focus:#0075FF;--sd-timepicker-timepicker-border-disabled:#CCCCCC;--sd-timepicker-timepicker-border-width:1px;--sd-timepicker-timepicker-bg-default:#FFFFFF;--sd-timepicker-timepicker-bg-disabled:#E1E1E1;--sd-timepicker-timepicker-icon-default:#888888;--sd-timepicker-timepicker-icon-disabled:#BBBBBB;--sd-timepicker-timepicker-text-default:#222222;--sd-timepicker-timepicker-text-disabled:#888888;--sd-timepicker-timepicker-selector-bg:#FFFFFF;--sd-timepicker-timepicker-selector-range-heading-color:#555555;--sd-timepicker-timepicker-selector-range-heading-gap:16px;--sd-timepicker-timepicker-selector-range-padding-x-y:24px;--sd-timepicker-timepicker-selector-range-panel-gap:24px;--sd-timepicker-timepicker-selector-range-section-gap:12px;--sd-timepicker-timepicker-selector-radius:8px;--sd-timepicker-timepicker-selector-section-padding-x:16px;--sd-timepicker-timepicker-selector-section-padding-y:12px;--sd-timepicker-timepicker-selector-time-gap:4px;--sd-timepicker-timepicker-selector-time-column-gap:8px;--sd-timepicker-timepicker-selector-input-width:40px;--sd-timepicker-timepicker-selector-colon-size:16px;--sd-timepicker-timepicker-sm-height:28px;--sd-timepicker-timepicker-sm-padding-x:12px;--sd-timepicker-timepicker-sm-gap:8px;--sd-timepicker-timepicker-sm-icon:16px;--sd-timepicker-timepicker-sm-radius:4px;--sd-timepicker-timepicker-md-height:36px;--sd-timepicker-timepicker-md-padding-x:16px;--sd-timepicker-timepicker-md-gap:12px;--sd-timepicker-timepicker-md-icon:20px;--sd-timepicker-timepicker-md-radius:6px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-tag-tag-group-gap:8px;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-overlay-overlay-header-bg:#FFFFFF;--sd-overlay-overlay-header-padding-x:24px;--sd-overlay-overlay-header-padding-y:20px;--sd-overlay-overlay-header-gap:12px;--sd-overlay-overlay-header-title-color:#033F59;--sd-overlay-overlay-header-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-overlay-overlay-header-title-typography-font-weight:700;--sd-overlay-overlay-header-title-typography-font-size:16px;--sd-overlay-overlay-header-title-typography-text-decoration:none;--sd-overlay-overlay-header-title-typography-line-height:26px;--sd-overlay-overlay-footer-bg-default:#FFFFFF;--sd-overlay-overlay-footer-bg-neutral:#F6F6F6;--sd-overlay-overlay-footer-padding-x:20px;--sd-overlay-overlay-footer-padding-y:8px;--sd-overlay-overlay-footer-gap:16px;--sd-overlay-overlay-footer-shadow-x:0px;--sd-overlay-overlay-footer-shadow-y:0px;--sd-overlay-overlay-footer-shadow-blur:24px;--sd-overlay-overlay-footer-shadow-spread:0px;--sd-overlay-overlay-footer-shadow-color:rgba(34,34,34,0.2);--sd-overlay-overlay-footer-shadow-type:dropShadow;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-header-padding-x:16px;--sd-popup-popup-header-padding-y:12px;--sd-popup-popup-bg:#EEEEEE;--sd-drawer-drawer-bg:#F6F6F6;--sd-drawer-drawer-body-border:#E1E1E1;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-progress-progress-inverse-color:#FFFFFF;--sd-progress-progress-inverse-opacity:40%;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-padding-y-dense:6px;--sd-table-table-body-padding-y-default:8px;--sd-table-table-body-padding-x-default:8px;--sd-table-table-body-padding-x-wide:16px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding-y:8px;--sd-table-table-key-value-body-padding-x-default:8px;--sd-table-table-key-value-body-padding-x-wide:16px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-pagination-pagination-simple-gap:8px;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-stepper-stepper-sm-sequence-size:20px;--sd-stepper-stepper-sm-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-active-font-weight:700;--sd-stepper-stepper-sm-typography-active-font-size:12px;--sd-stepper-stepper-sm-typography-active-line-height:20px;--sd-stepper-stepper-sm-typography-active-text-decoration:none;--sd-stepper-stepper-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-default-font-weight:500;--sd-stepper-stepper-sm-typography-default-font-size:12px;--sd-stepper-stepper-sm-typography-default-line-height:20px;--sd-stepper-stepper-sm-typography-default-text-decoration:none;--sd-stepper-stepper-dash-width:20px;--sd-stepper-stepper-dash-color:#888888;--sd-stepper-stepper-lg-sequence-size:24px;--sd-stepper-stepper-lg-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-active-font-weight:700;--sd-stepper-stepper-lg-typography-active-font-size:14px;--sd-stepper-stepper-lg-typography-active-line-height:24px;--sd-stepper-stepper-lg-typography-active-text-decoration:none;--sd-stepper-stepper-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-default-font-weight:500;--sd-stepper-stepper-lg-typography-default-font-size:14px;--sd-stepper-stepper-lg-typography-default-line-height:24px;--sd-stepper-stepper-lg-typography-default-text-decoration:none;--sd-stepper-stepper-container-gap:12px;--sd-stepper-stepper-item-gap:8px;--sd-stepper-stepper-sequence-radius:9999px;--sd-stepper-stepper-sequence-border-active:#93C4FF;--sd-stepper-stepper-sequence-border-default:#E1E1E1;--sd-stepper-stepper-sequence-border-completed:#CCCCCC;--sd-stepper-stepper-sequence-border-witdh:1px;--sd-stepper-stepper-sequence-icon:12px;--sd-stepper-stepper-sequence-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sequence-typography-font-weight:700;--sd-stepper-stepper-sequence-typography-font-size:12px;--sd-stepper-stepper-sequence-typography-line-height:20px;--sd-stepper-stepper-sequence-typography-text-decoration:none;--sd-stepper-stepper-sequence-bg-active:#D9EAFF;--sd-stepper-stepper-sequence-bg-default:#FFFFFF;--sd-stepper-stepper-sequence-bg-completed:#E1E1E1;--sd-stepper-stepper-sequence-text-active:#0075FF;--sd-stepper-stepper-sequence-text-default:#AAAAAA;--sd-stepper-stepper-text-active:#0075FF;--sd-stepper-stepper-text-default:#888888;--sd-gnb-light-bg:#FFFFFF;--sd-gnb-light-divider:#E1E1E1;--sd-gnb-light-item-bg-default:#FFFFFF;--sd-gnb-light-item-bg-hover:#F6F6F6;--sd-gnb-light-item-bg-selected:#EFF6FF;--sd-gnb-light-item-fg-default:#222222;--sd-gnb-light-item-fg-hover:#222222;--sd-gnb-light-item-fg-selected:#0075FF;--sd-gnb-light-item-chevron:#555555;--sd-gnb-light-top-icon:#888888;--sd-gnb-dark-bg:#001B39;--sd-gnb-dark-divider:#004177;--sd-gnb-dark-item-bg-default:#001B39;--sd-gnb-dark-item-bg-hover:#07284A;--sd-gnb-dark-item-bg-selected:#002B5E;--sd-gnb-dark-item-fg-default:#FFFFFF;--sd-gnb-dark-item-fg-hover:#FFFFFF;--sd-gnb-dark-item-fg-selected:#93C4FF;--sd-gnb-dark-item-chevron:#AAAAAA;--sd-gnb-dark-top-icon:#FFFFFF}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
138
136
 
139
137
  /*
140
138
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5133,15 +5131,6 @@ var registerComponents = (Cstrs) => {
5133
5131
  }
5134
5132
  };
5135
5133
  var win = window;
5136
- var readTask = (cb) => {
5137
- nextTick(() => {
5138
- try {
5139
- cb();
5140
- } catch (e) {
5141
- consoleError(e);
5142
- }
5143
- });
5144
- };
5145
5134
  var writeTask = (cb) => {
5146
5135
  nextTick(() => {
5147
5136
  try {
@@ -5424,13 +5413,13 @@ class SdBadge {
5424
5413
  }
5425
5414
 
5426
5415
  /* @ts-self-types="./index.d.ts" */
5427
- let urlAlphabet$1 =
5416
+ let urlAlphabet =
5428
5417
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
5429
- let nanoid$1 = (size = 21) => {
5418
+ let nanoid = (size = 21) => {
5430
5419
  let id = '';
5431
5420
  let i = size | 0;
5432
5421
  while (i--) {
5433
- id += urlAlphabet$1[(Math.random() * 64) | 0];
5422
+ id += urlAlphabet[(Math.random() * 64) | 0];
5434
5423
  }
5435
5424
  return id
5436
5425
  };
@@ -5573,7 +5562,7 @@ class SdBarcodeInput {
5573
5562
  nativeEl = undefined;
5574
5563
  formField;
5575
5564
  /** 폼 연동용 name 속성 */
5576
- name = nanoid$1();
5565
+ name = nanoid();
5577
5566
  /** 입력값 변경 시 발생합니다. */
5578
5567
  input;
5579
5568
  /** 포커스 진입 시 발생합니다. */
@@ -6790,8 +6779,7 @@ const datepicker = {
6790
6779
  group: {
6791
6780
  gap: "12"
6792
6781
  }
6793
- }
6794
- }
6782
+ }}
6795
6783
  };
6796
6784
  var datepickerTokens = {
6797
6785
  datepicker: datepicker
@@ -7393,8 +7381,7 @@ const checkbox = {
7393
7381
  },
7394
7382
  border: {
7395
7383
  disabled: "#CCCCCC"
7396
- }
7397
- };
7384
+ }};
7398
7385
  var checkboxTokens = {
7399
7386
  checkbox: checkbox
7400
7387
  };
@@ -7987,13 +7974,7 @@ const color = {
7987
7974
  },
7988
7975
  divider: {
7989
7976
  "default": "#E1E1E1"
7990
- },
7991
- blue: {
7992
- strong: "#0075FF"},
7993
- darkblue: {
7994
- strong: "#006AC1"},
7995
- grey: {
7996
- strong: "#737373"}};
7977
+ }};
7997
7978
  const shadow = {
7998
7979
  spread: {
7999
7980
  md: {
@@ -8010,7 +7991,13 @@ var systemTokens = {
8010
7991
  };
8011
7992
 
8012
7993
  const listBox = {
8013
- radius: "4"};
7994
+ radius: "4",
7995
+ bg: "#FFFFFF",
7996
+ chip: {
7997
+ paddingXY: "8",
7998
+ gap: "8"
7999
+ }
8000
+ };
8014
8001
  var listBoxTokens = {
8015
8002
  listBox: listBox
8016
8003
  };
@@ -8147,7 +8134,7 @@ class SdChipInput {
8147
8134
  /** 입력 placeholder */
8148
8135
  placeholder = '입력해 주세요.';
8149
8136
  /** 폼 연동용 name 속성 */
8150
- name = nanoid$1();
8137
+ name = nanoid();
8151
8138
  /** 유효성 검사 규칙 목록 */
8152
8139
  rules = [];
8153
8140
  /** 에러 상태 여부 */
@@ -8750,7 +8737,7 @@ const CIRCLE_PROGRESS_RADIUS = 34;
8750
8737
  const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
8751
8738
  const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;
8752
8739
 
8753
- 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[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
8740
+ const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:8px}sd-circle-progress .sd-circle-progress{width:80px;height:80px}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear}sd-circle-progress .sd-circle-progress__percent{text-align:center;color:var(--sd-circle-progress-percent-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:16px;font-weight:700;line-height:26px}sd-circle-progress .sd-circle-progress__label{text-align:center;color:var(--sd-circle-progress-label-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:12px;font-weight:400;line-height:20px}sd-circle-progress{}sd-circle-progress[inner-value]{position:relative}sd-circle-progress[inner-value] .sd-circle-progress__percent{position:absolute;top:40px;left:50%;transform:translate(-50%, -50%);line-height:normal}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
8754
8741
 
8755
8742
  class SdCircleProgress {
8756
8743
  constructor(hostRef) {
@@ -8764,6 +8751,8 @@ class SdCircleProgress {
8764
8751
  type = 'primary';
8765
8752
  /** 원 하단에 표시할 레이블 텍스트 */
8766
8753
  label;
8754
+ /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */
8755
+ innerValue = false;
8767
8756
  get clampedValue() {
8768
8757
  if (!Number.isFinite(this.value))
8769
8758
  return 0;
@@ -8786,7 +8775,7 @@ class SdCircleProgress {
8786
8775
  }
8787
8776
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
8788
8777
  const showPercent = !this.indeterminate;
8789
- return (hAsync(Host, { key: '49f42179ae3f58775dda407b2a0fe3ad01baf2b8', style: hostStyle }, hAsync("svg", { key: 'f2bcc5ae953409481b823fc7dd754f1e68bc47d8', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: '1dbbe8d19a29cd271c8fa483497ca085ee10831f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '86e6514b2986e5574a78e15e0e3299d8cde858cc', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: '38d0dfc1f810acbe086852b24d83af2d4f707f2a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: 'b10ae78d8b3894b89f0096bea66773006bf526e9', class: "sd-circle-progress__label" }, this.label)));
8778
+ return (hAsync(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, hAsync("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
8790
8779
  }
8791
8780
  static get style() { return sdCircleProgressCss(); }
8792
8781
  static get cmpMeta() { return {
@@ -8796,11 +8785,12 @@ class SdCircleProgress {
8796
8785
  "indeterminate": [516],
8797
8786
  "value": [2],
8798
8787
  "type": [513],
8799
- "label": [1]
8788
+ "label": [1],
8789
+ "innerValue": [516, "inner-value"]
8800
8790
  },
8801
8791
  "$listeners$": undefined,
8802
8792
  "$lazyBundleId$": "-",
8803
- "$attrsToReflect$": [["indeterminate", "indeterminate"], ["type", "type"]]
8793
+ "$attrsToReflect$": [["indeterminate", "indeterminate"], ["type", "type"], ["innerValue", "inner-value"]]
8804
8794
  }; }
8805
8795
  }
8806
8796
 
@@ -8822,7 +8812,7 @@ const CONFIRM_MODAL_ICON_COLOR = {
8822
8812
  const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
8823
8813
  const SUB_BUTTON_PRESET = 'neutral_outline_md';
8824
8814
 
8825
- const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
8815
+ const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__option{text-align:center}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
8826
8816
 
8827
8817
  class SdConfirmModal {
8828
8818
  constructor(hostRef) {
@@ -8832,8 +8822,8 @@ class SdConfirmModal {
8832
8822
  this.ok = createEvent(this, "sdOk", 7);
8833
8823
  }
8834
8824
  get el() { return getElement(this); }
8835
- hasSlottedContent = false;
8836
- customContentRef;
8825
+ hasTagSlot = false;
8826
+ hasOptionSlot = false;
8837
8827
  slotObserver;
8838
8828
  /** 모달 타입 (아이콘·버튼 색상 결정) */
8839
8829
  type = 'positive';
@@ -8851,14 +8841,12 @@ class SdConfirmModal {
8851
8841
  mainButtonLabel = '확인';
8852
8842
  /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
8853
8843
  subButtonLabel = '';
8854
- /** 콘텐츠 박스에 표시할 태그 프리셋 */
8844
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
8855
8845
  tagPreset = 'square_sm_grey';
8856
- /** 콘텐츠 박스에 표시할 태그 레이블 */
8846
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
8857
8847
  tagLabel = '';
8858
- /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
8848
+ /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
8859
8849
  slotLabel = '';
8860
- /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
8861
- tagContents;
8862
8850
  /** 닫기 버튼 클릭 시 발생합니다. */
8863
8851
  close;
8864
8852
  /** 취소 버튼 클릭 시 발생합니다. */
@@ -8877,17 +8865,6 @@ class SdConfirmModal {
8877
8865
  characterData: true,
8878
8866
  });
8879
8867
  }
8880
- componentDidRender() {
8881
- if (this.customContentRef && this.tagContents instanceof HTMLElement) {
8882
- if (typeof this.customContentRef.replaceChildren === 'function') {
8883
- this.customContentRef.replaceChildren(this.tagContents);
8884
- }
8885
- else {
8886
- this.customContentRef.innerHTML = '';
8887
- this.customContentRef.appendChild(this.tagContents);
8888
- }
8889
- }
8890
- }
8891
8868
  disconnectedCallback() {
8892
8869
  this.slotObserver?.disconnect();
8893
8870
  }
@@ -8897,29 +8874,39 @@ class SdConfirmModal {
8897
8874
  get resolvedMainButton() {
8898
8875
  return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
8899
8876
  }
8900
- get hasTagContent() {
8901
- return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
8902
- (this.slotLabel !== undefined && this.slotLabel !== ''));
8877
+ /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
8878
+ get showTagBox() {
8879
+ return this.tagLabel !== '' || this.hasTagSlot;
8903
8880
  }
8904
- get showContentBox() {
8905
- return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
8881
+ /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
8882
+ get showOption() {
8883
+ return this.slotLabel !== '' || this.hasOptionSlot;
8906
8884
  }
8885
+ /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
8907
8886
  syncHasSlottedContent() {
8908
- const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
8909
- node.classList.contains('sd-confirm-modal')) &&
8910
- (node.nodeType === Node.ELEMENT_NODE ||
8911
- (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
8912
- if (hasSlottedContent !== this.hasSlottedContent) {
8913
- this.hasSlottedContent = hasSlottedContent;
8914
- }
8887
+ let hasTagSlot = false;
8888
+ let hasOptionSlot = false;
8889
+ Array.from(this.el.children).forEach(node => {
8890
+ if (!(node instanceof HTMLElement))
8891
+ return;
8892
+ if (node.classList.contains('sd-confirm-modal'))
8893
+ return;
8894
+ const slot = node.getAttribute('slot');
8895
+ if (slot === 'tag')
8896
+ hasTagSlot = true;
8897
+ else if (slot === 'option')
8898
+ hasOptionSlot = true;
8899
+ });
8900
+ if (hasTagSlot !== this.hasTagSlot)
8901
+ this.hasTagSlot = hasTagSlot;
8902
+ if (hasOptionSlot !== this.hasOptionSlot)
8903
+ this.hasOptionSlot = hasOptionSlot;
8915
8904
  }
8916
8905
  render() {
8917
8906
  const type = this.resolvedType;
8918
8907
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
8919
8908
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
8920
- 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 => {
8921
- this.customContentRef = el;
8922
- } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8909
+ return (hAsync("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (hAsync("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, hAsync("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (hAsync("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, hAsync("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (hAsync("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), hAsync("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8923
8910
  }
8924
8911
  static get style() { return sdConfirmModalCss(); }
8925
8912
  static get cmpMeta() { return {
@@ -8937,8 +8924,8 @@ class SdConfirmModal {
8937
8924
  "tagPreset": [1, "tag-preset"],
8938
8925
  "tagLabel": [1, "tag-label"],
8939
8926
  "slotLabel": [1, "slot-label"],
8940
- "tagContents": [16],
8941
- "hasSlottedContent": [32]
8927
+ "hasTagSlot": [32],
8928
+ "hasOptionSlot": [32]
8942
8929
  },
8943
8930
  "$listeners$": undefined,
8944
8931
  "$lazyBundleId$": "-",
@@ -9174,7 +9161,7 @@ class SdDatePicker {
9174
9161
  formField;
9175
9162
  closeAnimationTimer;
9176
9163
  /** 폼 연동용 name 속성 */
9177
- name = nanoid$1();
9164
+ name = nanoid();
9178
9165
  watchIsOpen(newValue) {
9179
9166
  this.focused = newValue;
9180
9167
  }
@@ -9239,9 +9226,9 @@ class SdDatePicker {
9239
9226
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9240
9227
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9241
9228
  };
9242
- return (hAsync("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
9229
+ return (hAsync("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
9243
9230
  this.triggerRef = el;
9244
- } }, hAsync("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9231
+ } }, hAsync("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9245
9232
  }
9246
9233
  static get watchers() { return {
9247
9234
  "isOpen": [{
@@ -9329,7 +9316,7 @@ class SdDatePickerTrigger {
9329
9316
  ? DATEPICKER_COLORS.icon.disabled
9330
9317
  : DATEPICKER_COLORS.icon.default,
9331
9318
  };
9332
- return (hAsync("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9319
+ return (hAsync("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9333
9320
  'sd-date-picker-trigger': true,
9334
9321
  'sd-date-picker-trigger--disabled': this.disabled,
9335
9322
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -9337,7 +9324,7 @@ class SdDatePickerTrigger {
9337
9324
  e.preventDefault();
9338
9325
  this.handleClick();
9339
9326
  }
9340
- } }, hAsync("sd-icon", { key: '60e23369acd45ae6a74b076c08309644a10aceb3', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '5db37f4d71914215e4ae4236791dd3e0eda10c96', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9327
+ } }, hAsync("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9341
9328
  }
9342
9329
  static get style() { return sdDatePickerTriggerCss(); }
9343
9330
  static get cmpMeta() { return {
@@ -9421,7 +9408,7 @@ class SdDateRangePicker {
9421
9408
  formField;
9422
9409
  closeAnimationTimer;
9423
9410
  /** 폼 연동용 name 속성 */
9424
- name = nanoid$1();
9411
+ name = nanoid();
9425
9412
  watchIsOpen(newValue) {
9426
9413
  this.focused = newValue;
9427
9414
  }
@@ -9786,7 +9773,7 @@ class SdDateRangePickerCalendar {
9786
9773
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
9787
9774
  '--range-divider': RANGE_LAYOUT.divider,
9788
9775
  };
9789
- return (hAsync(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, hAsync("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9776
+ return (hAsync(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, hAsync("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9790
9777
  }
9791
9778
  static get watchers() { return {
9792
9779
  "value": [{
@@ -9829,7 +9816,7 @@ class SdDivider {
9829
9816
  const hostStyle = {
9830
9817
  '--sd-divider-color': DIVIDER_COLORS.default,
9831
9818
  };
9832
- return (hAsync(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, hAsync("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9819
+ return (hAsync(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, hAsync("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9833
9820
  }
9834
9821
  static get style() { return sdDividerCss(); }
9835
9822
  static get cmpMeta() { return {
@@ -10509,19 +10496,19 @@ class SdField {
10509
10496
  : {}),
10510
10497
  }
10511
10498
  : {};
10512
- return (hAsync("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
10499
+ return (hAsync("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
10513
10500
  'sd-field': true,
10514
10501
  'sd-field--has-label': this.label !== '',
10515
10502
  'sd-field--has-addon': addon !== '',
10516
10503
  'sd-field--borderless': this.borderless,
10517
10504
  [this.fieldStatus]: this.fieldStatus !== '',
10518
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, hAsync("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
10505
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, hAsync("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
10519
10506
  'sd-field__control': true,
10520
10507
  'sd-field__control--has-addon': addon !== '',
10521
10508
  }, style: this.width !== '' && this.width !== 0
10522
10509
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
10523
- : {} }, addon && (hAsync("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
10524
- Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
10510
+ : {} }, addon && (hAsync("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
10511
+ Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
10525
10512
  }
10526
10513
  renderLabel(label) {
10527
10514
  if (label == null || label === '')
@@ -10608,8 +10595,16 @@ const FILE_PICKER_COLORS = {
10608
10595
  disabled: fp.icon.disabled,
10609
10596
  },
10610
10597
  };
10598
+ // useMultipleListBox 모드에서 파일 칩을 담는 floating 리스트박스 카드
10599
+ // (sd-select-listbox 와 동일한 배경/radius/그림자 토큰 사용)
10600
+ const FILE_PICKER_LIST_BOX = {
10601
+ radius: listBoxTokens.listBox.radius,
10602
+ bg: listBoxTokens.listBox.bg,
10603
+ chipPadding: listBoxTokens.listBox.chip.paddingXY,
10604
+ chipGap: listBoxTokens.listBox.chip.gap,
10605
+ };
10611
10606
 
10612
- const sdFilePickerCss = () => `sd-file-picker{display:flex;flex-direction:column;width:100%}.sd-file-picker__wrapper{display:flex;flex-direction:column;width:100%}.sd-file-picker__chip-list{display:flex;flex-flow:row wrap;gap:8px;margin-top:8px}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{padding:0}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:not(.sd-file-picker--inline-disabled) .sd-file-picker__content:hover .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
10607
+ const sdFilePickerCss = () => `sd-file-picker{display:flex;flex-direction:column;width:100%}.sd-file-picker__wrapper{display:flex;flex-direction:column;width:100%}.sd-file-picker__chip-list{display:flex;flex-flow:row wrap;gap:8px;margin-top:8px}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__caret{flex-shrink:0;cursor:pointer;transition:transform 0.15s ease}.sd-file-picker__caret--open{transform:rotate(180deg)}.sd-file-picker__listbox{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;max-width:100%;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1)}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{padding:0}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:not(.sd-file-picker--inline-disabled) .sd-file-picker__content:hover .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
10613
10608
 
10614
10609
  class SdFilePicker {
10615
10610
  constructor(hostRef) {
@@ -10628,6 +10623,8 @@ class SdFilePicker {
10628
10623
  inline = false;
10629
10624
  /** 다중 파일 선택 여부 */
10630
10625
  multiple = false;
10626
+ /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 */
10627
+ useMultipleListBox = false;
10631
10628
  /** 허용할 파일 타입 (input accept 속성과 동일) */
10632
10629
  accept;
10633
10630
  /** 파일 한 개의 최대 크기 (bytes) */
@@ -10638,7 +10635,7 @@ class SdFilePicker {
10638
10635
  maxFiles;
10639
10636
  // sd-field 패스스루 props
10640
10637
  /** 폼 연동용 name 속성 */
10641
- name = nanoid$1();
10638
+ name = nanoid();
10642
10639
  /** 레이블 텍스트 */
10643
10640
  label = '';
10644
10641
  /** 레이블 너비 */
@@ -10671,9 +10668,13 @@ class SdFilePicker {
10671
10668
  hovered = false;
10672
10669
  internalValue = null;
10673
10670
  showTooltip = false;
10671
+ isListboxOpen = false;
10672
+ listboxWidth = '';
10674
10673
  fileInputRef;
10675
10674
  fileNamesRef;
10675
+ contentRef;
10676
10676
  formField;
10677
+ static VIEWPORT_PADDING = 20;
10677
10678
  /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
10678
10679
  update;
10679
10680
  /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
@@ -10775,6 +10776,7 @@ class SdFilePicker {
10775
10776
  this.value = clearedValue;
10776
10777
  this.internalValue = clearedValue;
10777
10778
  this.update?.emit(clearedValue);
10779
+ this.isListboxOpen = false;
10778
10780
  if (this.fileInputRef) {
10779
10781
  this.fileInputRef.value = '';
10780
10782
  }
@@ -10784,6 +10786,23 @@ class SdFilePicker {
10784
10786
  return;
10785
10787
  this.fileInputRef?.click();
10786
10788
  };
10789
+ /** caret(▼) 클릭 시 파일 목록 리스트박스를 토글한다. */
10790
+ handleListboxToggle = (event) => {
10791
+ event.stopPropagation();
10792
+ if (this.disabled)
10793
+ return;
10794
+ if (this.isListboxOpen) {
10795
+ this.isListboxOpen = false;
10796
+ return;
10797
+ }
10798
+ if (this.contentRef) {
10799
+ this.listboxWidth = `${this.contentRef.offsetWidth}px`;
10800
+ }
10801
+ this.isListboxOpen = true;
10802
+ };
10803
+ closeListbox = () => {
10804
+ this.isListboxOpen = false;
10805
+ };
10787
10806
  hasFiles() {
10788
10807
  if (Array.isArray(this.internalValue)) {
10789
10808
  return this.internalValue.length > 0;
@@ -10809,12 +10828,28 @@ class SdFilePicker {
10809
10828
  this.internalValue = newFiles;
10810
10829
  this.value = newFiles;
10811
10830
  this.update?.emit(this.value);
10831
+ // 리스트박스에서 마지막 파일을 지우면 caret 이 사라지므로 함께 닫는다.
10832
+ if (newFiles.length === 0) {
10833
+ this.isListboxOpen = false;
10834
+ }
10812
10835
  };
10813
10836
  renderChipList() {
10814
10837
  if (!this.hasChips())
10815
10838
  return null;
10816
10839
  return (hAsync("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (hAsync("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
10817
10840
  }
10841
+ renderListbox() {
10842
+ if (!this.hasChips() || !this.isListboxOpen)
10843
+ return null;
10844
+ const listboxStyle = {
10845
+ width: this.listboxWidth,
10846
+ padding: `${FILE_PICKER_LIST_BOX.chipPadding}px`,
10847
+ gap: `${FILE_PICKER_LIST_BOX.chipGap}px`,
10848
+ borderRadius: `${FILE_PICKER_LIST_BOX.radius}px`,
10849
+ background: FILE_PICKER_LIST_BOX.bg,
10850
+ };
10851
+ return (hAsync("sd-portal", { open: this.isListboxOpen, parentRef: this.contentRef, viewportPadding: SdFilePicker.VIEWPORT_PADDING, onSdClose: this.closeListbox }, hAsync("div", { class: "sd-file-picker__listbox", style: listboxStyle }, this.internalValue.map((file, index) => (hAsync("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) }))))));
10852
+ }
10818
10853
  checkOverflow() {
10819
10854
  if (!this.fileNamesRef)
10820
10855
  return;
@@ -10840,21 +10875,25 @@ class SdFilePicker {
10840
10875
  '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
10841
10876
  '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
10842
10877
  };
10843
- const content = (hAsync("div", { key: 'f686c8d06b3dbecc037e21f41e7f307d08349e8b', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
10878
+ const showListbox = this.multiple && this.useMultipleListBox;
10879
+ const content = (hAsync("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
10844
10880
  if (e.key === 'Enter' || e.key === ' ') {
10845
10881
  e.preventDefault();
10846
10882
  this.handleClick();
10847
10883
  }
10848
- } }, hAsync("input", { key: 'a519e5a7c253d9d9bba21401b2f83092aa8a3a91', 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: 'b9e7548365f1d54957b6e575d3532a833e301a98', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: 'cb28d1c3abf0e9c30454f01bb8c81cb0ea4477af', ref: el => (this.fileNamesRef = el), class: {
10884
+ } }, hAsync("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
10849
10885
  'sd-file-picker__text': true,
10850
10886
  'sd-file-picker__text--placeholder': !hasFiles,
10851
10887
  'sd-file-picker__text--active': hasFiles,
10852
- } }, displayText), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: 'c97d7c306ef2087a9874a16b6e485a94c7cc571f', 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: '293a4c75766be383a4ad6f79052111c09608e0e2', class: "sd-file-picker__tooltip" }, displayText))));
10853
- return (hAsync("div", { key: '4e25add1b74a232e8786efca26f87ccb5d48f19d', class: {
10888
+ } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10889
+ 'sd-file-picker__caret': true,
10890
+ 'sd-file-picker__caret--open': this.isListboxOpen,
10891
+ }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
10892
+ return (hAsync("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
10854
10893
  'sd-file-picker__wrapper': true,
10855
10894
  'sd-file-picker--inline': this.inline,
10856
10895
  'sd-file-picker--inline-disabled': this.inline && this.disabled,
10857
- }, style: cssVars }, hAsync("sd-field", { key: 'fda8f53237f5efb4f1dec906d87851dd10c03593', 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.renderChipList()));
10896
+ }, style: cssVars }, hAsync("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
10858
10897
  }
10859
10898
  static get watchers() { return {
10860
10899
  "value": [{
@@ -10871,6 +10910,7 @@ class SdFilePicker {
10871
10910
  "disabled": [516],
10872
10911
  "inline": [516],
10873
10912
  "multiple": [516],
10913
+ "useMultipleListBox": [516, "use-multiple-list-box"],
10874
10914
  "accept": [1],
10875
10915
  "maxFileSize": [8, "max-file-size"],
10876
10916
  "maxTotalSize": [8, "max-total-size"],
@@ -10893,17 +10933,19 @@ class SdFilePicker {
10893
10933
  "hovered": [1028],
10894
10934
  "internalValue": [32],
10895
10935
  "showTooltip": [32],
10936
+ "isListboxOpen": [32],
10937
+ "listboxWidth": [32],
10896
10938
  "sdValidate": [64],
10897
10939
  "sdReset": [64],
10898
10940
  "sdResetValidate": [64]
10899
10941
  },
10900
10942
  "$listeners$": undefined,
10901
10943
  "$lazyBundleId$": "-",
10902
- "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"]]
10944
+ "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"], ["useMultipleListBox", "use-multiple-list-box"]]
10903
10945
  }; }
10904
10946
  }
10905
10947
 
10906
- const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
10948
+ const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1)}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
10907
10949
 
10908
10950
  class SdFloatingPopover {
10909
10951
  constructor(hostRef) {
@@ -11083,7 +11125,7 @@ class SdFloatingPopover {
11083
11125
  }
11084
11126
  }
11085
11127
  render() {
11086
- return hAsync("slot", { key: '487d3c23320bd5f44492e3fb84e3cb357605de39' });
11128
+ return hAsync("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
11087
11129
  }
11088
11130
  static get style() { return sdFloatingPortalCss(); }
11089
11131
  static get cmpMeta() { return {
@@ -11455,9 +11497,6 @@ const guide = {
11455
11497
  title: {
11456
11498
  gap: "8"
11457
11499
  },
11458
- row: {
11459
- gap: "8"
11460
- },
11461
11500
  body: {
11462
11501
  gap: "2"
11463
11502
  },
@@ -11506,7 +11545,6 @@ const GUIDE_CONFIG = {
11506
11545
  paddingX: `${contents.paddingX}px`,
11507
11546
  paddingY: `${contents.paddingY}px`,
11508
11547
  gap: `${contents.gap}px`,
11509
- rowGap: `${contents.row.gap}px`,
11510
11548
  bodyGap: `${contents.body.gap}px`,
11511
11549
  titleGap: `${contents.title.gap}px`,
11512
11550
  radius: `${contents.radius}px`,
@@ -11522,7 +11560,7 @@ const GUIDE_CONFIG = {
11522
11560
  },
11523
11561
  };
11524
11562
 
11525
- const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
11563
+ const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
11526
11564
 
11527
11565
  const DEFAULT_LABEL_BY_TYPE = {
11528
11566
  tip: '활용 TIP',
@@ -11586,7 +11624,6 @@ class SdGuide {
11586
11624
  '--sd-guide-contents-padding-x': contents.paddingX,
11587
11625
  '--sd-guide-contents-padding-y': contents.paddingY,
11588
11626
  '--sd-guide-contents-gap': contents.gap,
11589
- '--sd-guide-contents-row-gap': contents.rowGap,
11590
11627
  '--sd-guide-contents-body-gap': contents.bodyGap,
11591
11628
  '--sd-guide-contents-title-gap': contents.titleGap,
11592
11629
  '--sd-guide-contents-radius': contents.radius,
@@ -11609,10 +11646,10 @@ class SdGuide {
11609
11646
  const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
11610
11647
  if (isActive)
11611
11648
  buttonClasses.push('sd-guide__button--active');
11612
- return (hAsync("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
11649
+ return (hAsync("div", { key: '7d85d4650de1bef19699cdacaceeeab69a7f221c', class: "sd-guide", style: this.guideStyle }, hAsync("sd-button", { key: 'b4cd191ba9593ce83343097e9b24fb56d86c6859', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (hAsync("sd-portal", { key: '2523de8af47987b2f0761c999817bf1ca595b4e6', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, hAsync("div", { key: '2fcc5a768d626d5ba97427ad99dc1c6155b5c36b', class: "sd-guide__popup", style: {
11613
11650
  ...this.guideStyle,
11614
11651
  width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
11615
- } }, hAsync("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
11652
+ } }, hAsync("sd-ghost-button", { key: 'de6b053ff6373bf2690d0874d01692e456a38991', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), hAsync("div", { key: '10f2de0819a6a97571719ca2e04101833c78f1d3', class: "sd-guide__popup__header" }, hAsync("sd-icon", { key: 'b11478e02574f5e211cd9d2478080d2c9895cb5d', name: iconName, size: 24, color: popupIconColor }), hAsync("h3", { key: 'ef361769bc0363ebb7215b6fbd1fdb38b2864434', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), hAsync("ul", { key: '914ae5fa0fa7ae52954df58e17beb187ddc2a966', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
11616
11653
  }
11617
11654
  // 현재 2depth까지만 스타일 적용
11618
11655
  renderListItem(message, depth = 0) {
@@ -12074,7 +12111,7 @@ class SdInput {
12074
12111
  nativeEl = undefined;
12075
12112
  formField;
12076
12113
  /** 폼 연동용 name 속성 */
12077
- name = nanoid$1();
12114
+ name = nanoid();
12078
12115
  /** 값이 변경될 때 발생합니다. */
12079
12116
  input;
12080
12117
  /** 포커스될 때 발생합니다. */
@@ -12154,12 +12191,12 @@ class SdInput {
12154
12191
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
12155
12192
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
12156
12193
  };
12157
- return (hAsync("sd-field", { key: '972d5e17746dc16d4e20b18bd278410fe9c13878', 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: '31e5f2aa7a2f0acaa0bfda8b9bfb94e2d6a98ebe', class: "sd-input__content" }, hAsync("slot", { key: '8230767a7311121fca1d3a1d64be5a04fc3c38aa', name: "prefix" }), hAsync("input", { key: '2961c50e416a08988d3d80022883eab696de2c7c', 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: '6862a98c1254979e0700cd8b18b61517a4c7386a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '9aa967f89fa448df98079ba1b16fe4ea4ef81c0e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12194
+ return (hAsync("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, hAsync("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), hAsync("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12158
12195
  if (this.disabled || this.readonly)
12159
12196
  return;
12160
12197
  this.internalValue = '';
12161
12198
  await this.formField?.sdValidate();
12162
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '2dd03b4920f2e84932c6e8ddb8bbdea2070b070f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12199
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12163
12200
  if (this.disabled || this.readonly)
12164
12201
  return;
12165
12202
  this.passwordVisible = !this.passwordVisible;
@@ -12226,42 +12263,19 @@ class SdInput {
12226
12263
 
12227
12264
  const table = {
12228
12265
  header: {
12229
- height: "36",
12230
12266
  paddingX: "16",
12231
12267
  gap: "4",
12232
12268
  bg: "#F5FAFF",
12233
12269
  typography: {
12234
12270
  fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
12235
- fontWeight: "500",
12236
12271
  fontSize: "12",
12237
- lineHeight: "20",
12238
- textDecoration: "none"
12239
- },
12240
- resizingBar: {
12241
- color: "#CCCCCC",
12242
- height: "16"
12243
- }
12244
- },
12272
+ lineHeight: "20"}},
12245
12273
  body: {
12246
- "default": {
12247
- height: "44",
12248
- paddingY: "8"
12249
- },
12250
- dense: {
12251
- height: "32",
12252
- paddingY: "6"
12253
- },
12254
- paddingX: {
12255
- "default": "16",
12256
- frame: "8"
12257
- },
12258
12274
  typography: {
12259
12275
  fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
12260
12276
  fontWeight: "400",
12261
12277
  fontSize: "12",
12262
- lineHeight: "20",
12263
- textDecoration: "none"
12264
- }
12278
+ lineHeight: "20"}
12265
12279
  },
12266
12280
  border: {
12267
12281
  color: "#E1E1E1",
@@ -12273,21 +12287,18 @@ const table = {
12273
12287
  radius: "8",
12274
12288
  keyValue: {
12275
12289
  body: {
12276
- paddingY: "8"},
12290
+ paddingY: "8",
12291
+ paddingX: {
12292
+ "default": "8",
12293
+ wide: "16"
12294
+ }
12295
+ },
12277
12296
  height: "44",
12278
12297
  search: {
12279
12298
  paddingX: "32",
12280
12299
  bg: "#F9F9F9"
12281
12300
  }
12282
- },
12283
- separator: {
12284
- color: "#EEEEEE",
12285
- width: {
12286
- "default": "6",
12287
- dense: "4"
12288
- }
12289
- }
12290
- };
12301
+ }};
12291
12302
  var tableTokens = {
12292
12303
  table: table
12293
12304
  };
@@ -12299,6 +12310,8 @@ const KEY_VALUE_TABLE_LAYOUT = {
12299
12310
  borderRadius: Number(t.radius),
12300
12311
  thPaddingX: Number(t.header.paddingX),
12301
12312
  padding: Number(t.keyValue.body.paddingY),
12313
+ tdPaddingX: Number(t.keyValue.body.paddingX.default),
12314
+ tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
12302
12315
  helpIconSize: 16,
12303
12316
  requiredIconSize: 12,
12304
12317
  gap: Number(t.header.gap),
@@ -12327,7 +12340,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
12327
12340
  tdLineHeight: Number(t.body.typography.lineHeight),
12328
12341
  };
12329
12342
 
12330
- const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
12343
+ const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding) var(--sd-kvt-td-padding-x);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td--text{padding-left:var(--sd-kvt-td-padding-x-wide);padding-right:var(--sd-kvt-td-padding-x-wide)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
12331
12344
 
12332
12345
  class SdKeyValueTable {
12333
12346
  constructor(hostRef) {
@@ -12340,6 +12353,12 @@ class SdKeyValueTable {
12340
12353
  * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
12341
12354
  */
12342
12355
  fields = [];
12356
+ /**
12357
+ * field name을 key로 하는 값 객체 (`{ [name]: value }`).
12358
+ * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
12359
+ * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
12360
+ */
12361
+ values = {};
12343
12362
  /**
12344
12363
  * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
12345
12364
  */
@@ -12351,44 +12370,57 @@ class SdKeyValueTable {
12351
12370
  * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
12352
12371
  */
12353
12372
  radius = 'default';
12354
- /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
12373
+ /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
12355
12374
  change;
12356
12375
  /** search 패널의 검색 버튼 클릭 시 발생합니다. */
12357
12376
  searchEvent;
12358
12377
  emit = (name, value) => {
12359
- this.change.emit({ name, value });
12378
+ this.change.emit({
12379
+ name,
12380
+ value: value,
12381
+ values: { ...this.values, [name]: value },
12382
+ });
12360
12383
  };
12384
+ /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
12385
+ resolveOptions(field) {
12386
+ const options = { ...(field.options ?? {}) };
12387
+ if (Object.prototype.hasOwnProperty.call(this.values, field.name)) {
12388
+ options.value = this.values[field.name];
12389
+ }
12390
+ return options;
12391
+ }
12361
12392
  handleSearchClick = () => {
12362
12393
  this.searchEvent.emit();
12363
12394
  };
12364
12395
  renderField(field) {
12365
12396
  const onSdUpdate = (e) => this.emit(field.name, e.detail);
12397
+ const options = this.resolveOptions(field);
12366
12398
  switch (field.type) {
12367
12399
  case 'input':
12368
- return hAsync("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12400
+ return hAsync("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12369
12401
  case 'textarea':
12370
- return hAsync("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12402
+ return hAsync("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12371
12403
  case 'number-input':
12372
- return hAsync("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12404
+ return hAsync("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12373
12405
  case 'select':
12374
- return hAsync("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12406
+ return hAsync("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12375
12407
  case 'radio': {
12376
- const { value, direction, ...rest } = field.options ?? {};
12408
+ const { value, direction, ...rest } = options;
12377
12409
  return (hAsync("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
12378
12410
  }
12379
12411
  case 'checkbox': {
12380
- const { value, ...rest } = field.options ?? {};
12412
+ const { value, ...rest } = options;
12381
12413
  return hAsync("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
12382
12414
  }
12383
12415
  case 'date-picker':
12384
- return hAsync("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12416
+ return hAsync("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12385
12417
  case 'date-range-picker':
12386
- return (hAsync("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
12418
+ return hAsync("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12387
12419
  case 'file-picker':
12388
- return hAsync("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12420
+ return hAsync("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12389
12421
  case 'text':
12390
12422
  default:
12391
- return hAsync("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
12423
+ return hAsync("span", { class: "sd-key-value-table__text" }, options.value ?? '');
12392
12424
  }
12393
12425
  }
12394
12426
  renderHelpIcon(helpText) {
@@ -12477,7 +12509,13 @@ class SdKeyValueTable {
12477
12509
  renderTd(field, r, c) {
12478
12510
  const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
12479
12511
  const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
12480
- return (hAsync("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12512
+ // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
12513
+ // 폼 필드 셀은 default paddingX 유지.
12514
+ const isText = field.type == null || field.type === 'text';
12515
+ return (hAsync("td", { key: `td-${r}-${c}`, class: {
12516
+ 'sd-key-value-table__td': true,
12517
+ 'sd-key-value-table__td--text': isText,
12518
+ }, rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12481
12519
  }
12482
12520
  warnDuplicateNames() {
12483
12521
  const seen = new Set();
@@ -12502,6 +12540,8 @@ class SdKeyValueTable {
12502
12540
  '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
12503
12541
  '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
12504
12542
  '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
12543
+ '--sd-kvt-td-padding-x': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingX}px`,
12544
+ '--sd-kvt-td-padding-x-wide': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingXWide}px`,
12505
12545
  '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
12506
12546
  '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
12507
12547
  '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
@@ -12562,6 +12602,7 @@ class SdKeyValueTable {
12562
12602
  "$tagName$": "sd-key-value-table",
12563
12603
  "$members$": {
12564
12604
  "fields": [16],
12605
+ "values": [16],
12565
12606
  "search": [4],
12566
12607
  "radius": [1]
12567
12608
  },
@@ -12619,7 +12660,7 @@ class SdLinearProgress {
12619
12660
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
12620
12661
  };
12621
12662
  const valueText = `${Math.round(this.clampedValue)}%`;
12622
- return (hAsync(Host, { key: '8d19b1c846b14994eceb6381802b19fa92a241cb', style: hostStyle }, hAsync("div", { key: '23d3e839b1e64a81ae86e994bf77a0e9bf53e870', class: "sd-linear-progress__track" }, hAsync("div", { key: '92ea4d28c312e639ec038002beeea60ab39e42bb', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'd65a8726f14302260d0fad1b3a16ba7e8588530f', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '522efd6e3b6f6bbfcb8044113d2e2ae37da84dd6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: '2933b26dc95c1962dc19829f9bf1d8e62d71b0c4', class: "sd-linear-progress__label" }, this.label)));
12663
+ return (hAsync(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, hAsync("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, hAsync("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
12623
12664
  }
12624
12665
  static get style() { return sdLinearProgressCss(); }
12625
12666
  static get cmpMeta() { return {
@@ -12675,10 +12716,10 @@ class SdLoadingContainer {
12675
12716
  this.prevBodyOverflow = null;
12676
12717
  }
12677
12718
  render() {
12678
- return (hAsync("div", { key: '7abf314b6518ab7e6ba0ef60236a8ca6846b0cf4', class: {
12719
+ return (hAsync("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
12679
12720
  'sd-loading-container': true,
12680
12721
  'sd-loading-container--visible': this.visible,
12681
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '5c049ffd686654fb4c63bba829bcbe4968285a74', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '21c50b87eac65eedfe2ae475eda2c04a9b2f781d', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: '1dd29e83461be200d3d23037fc8965dbba675e77', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'deb08b4813d784cf47f43648e8187b22b143dfd5', class: "sd-loading-container__message" }, this.message))));
12722
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
12682
12723
  }
12683
12724
  static get style() { return sdLoadingContainerCss(); }
12684
12725
  static get cmpMeta() { return {
@@ -12723,12 +12764,13 @@ const LOADING_MODAL_DEFAULT_BUTTON_LABEL = {
12723
12764
  };
12724
12765
  const LOADING_MODAL_BUTTON_PRESET = 'neutral_outline_sm';
12725
12766
 
12726
- const sdLoadingModalCss = () => `sd-loading-modal{display:inline-block}sd-loading-modal .sd-loading-modal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sd-loading-modal-gap);min-width:var(--sd-loading-modal-min-width);min-height:var(--sd-loading-modal-min-height);width:var(--sd-loading-modal-width, auto);height:var(--sd-loading-modal-height, auto);border-radius:var(--sd-loading-modal-radius);background:var(--sd-loading-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-loading-modal .sd-loading-modal__content{display:flex;align-items:center;justify-content:center;width:var(--sd-loading-modal-content-size);height:var(--sd-loading-modal-content-size)}sd-loading-modal .sd-loading-modal__message{margin:0;color:var(--sd-loading-modal-message-color);font-family:var(--sd-loading-modal-message-font-family);font-size:var(--sd-loading-modal-message-font-size);font-weight:var(--sd-loading-modal-message-font-weight);line-height:var(--sd-loading-modal-message-line-height);text-align:center}sd-loading-modal .sd-loading-modal__button{display:flex;justify-content:center}`;
12767
+ const sdLoadingModalCss = () => `sd-loading-modal{display:inline-block}sd-loading-modal .sd-loading-modal{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sd-loading-modal-gap);min-width:var(--sd-loading-modal-min-width);min-height:var(--sd-loading-modal-min-height);width:var(--sd-loading-modal-width, auto);height:var(--sd-loading-modal-height, auto);border-radius:var(--sd-loading-modal-radius);background:var(--sd-loading-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-loading-modal .sd-loading-modal__close{position:absolute;top:16px;right:16px;cursor:pointer}sd-loading-modal .sd-loading-modal__content{display:flex;align-items:center;justify-content:center;width:var(--sd-loading-modal-content-size);height:var(--sd-loading-modal-content-size)}sd-loading-modal .sd-loading-modal__message{margin:0;color:var(--sd-loading-modal-message-color);font-family:var(--sd-loading-modal-message-font-family);font-size:var(--sd-loading-modal-message-font-size);font-weight:var(--sd-loading-modal-message-font-weight);line-height:var(--sd-loading-modal-message-line-height);text-align:center}sd-loading-modal .sd-loading-modal__button{display:flex;justify-content:center}`;
12727
12768
 
12728
12769
  class SdLoadingModal {
12729
12770
  constructor(hostRef) {
12730
12771
  registerInstance(this, hostRef);
12731
12772
  this.click = createEvent(this, "sdClick", 7);
12773
+ this.close = createEvent(this, "sdClose", 7);
12732
12774
  }
12733
12775
  /** 모달 상태 (loading: 로딩 중, error: 에러) */
12734
12776
  state = 'loading';
@@ -12746,6 +12788,8 @@ class SdLoadingModal {
12746
12788
  progress;
12747
12789
  /** 버튼 클릭 시 발생합니다. */
12748
12790
  click;
12791
+ /** 닫기 버튼 클릭 시 발생합니다. (error 상태에서만 노출) */
12792
+ close;
12749
12793
  get resolvedState() {
12750
12794
  return this.state ?? 'loading';
12751
12795
  }
@@ -12787,7 +12831,7 @@ class SdLoadingModal {
12787
12831
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
12788
12832
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
12789
12833
  };
12790
- return (hAsync(Host, { key: '01bd677e5ef79c7fba151be5d4fb28f4de53c063', style: hostStyle }, hAsync("div", { key: 'f1062845695886535ee1d96613db83e1a8da4b88', class: "sd-loading-modal" }, hAsync("div", { key: 'c1ca61a82f105e5582719375506634a2ee5a538f', 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: '60039cb0c90b9450355c6545a82301797c0b65bc', 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: '0f00c197e0f320ffb2a8bebe4418307639d5ee09', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '6d8f96e681843afe1590f9a9fcc18c4668f64d22', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
12834
+ return (hAsync(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, hAsync("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '11b93fc8996ca64a42f09e4688267329da8a74c9', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (hAsync("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
12791
12835
  }
12792
12836
  static get style() { return sdLoadingModalCss(); }
12793
12837
  static get cmpMeta() { return {
@@ -13160,7 +13204,21 @@ class SdModalContainer {
13160
13204
  if (this.hasOwnProp(options, 'bottomMessage'))
13161
13205
  el.bottomMessage = options.bottomMessage ?? [];
13162
13206
  if (this.hasOwnProp(options, 'tagContents'))
13163
- el.tagContents = options.tagContents;
13207
+ this.setSlotContent(el, 'tag', options.tagContents);
13208
+ if (this.hasOwnProp(options, 'optionContents')) {
13209
+ this.setSlotContent(el, 'option', options.optionContents);
13210
+ }
13211
+ }
13212
+ /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
13213
+ setSlotContent(el, slot, content) {
13214
+ Array.from(el.children).forEach(child => {
13215
+ if (child.getAttribute('slot') === slot)
13216
+ child.remove();
13217
+ });
13218
+ if (content) {
13219
+ content.setAttribute('slot', slot);
13220
+ el.appendChild(content);
13221
+ }
13164
13222
  }
13165
13223
  handleBackdropClick(id) {
13166
13224
  if (!isTopInteractiveModal(id))
@@ -13423,7 +13481,7 @@ class SdNumberInput {
13423
13481
  nativeEl = undefined;
13424
13482
  formField;
13425
13483
  /** 폼 연동용 name 속성 */
13426
- name = nanoid$1();
13484
+ name = nanoid();
13427
13485
  /** 값이 변경될 때 발생합니다. */
13428
13486
  update;
13429
13487
  /** 포커스될 때 발생합니다. */
@@ -13669,15 +13727,15 @@ class SdNumberInput {
13669
13727
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
13670
13728
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
13671
13729
  };
13672
- return (hAsync("sd-field", { key: '391ac51b1c7844a81664907af4e7c063d6c4c5e4', 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: '7bdc01654f679228c9893d4438daa0a8324b1e56', class: {
13730
+ return (hAsync("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
13673
13731
  'sd-number-input__content': true,
13674
13732
  'sd-number-input__content--no-stepper': !this.useButton,
13675
- } }, this.useButton && (hAsync("button", { key: '57819a2fbc917ebf6fdf640e4226443cf6d138b1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: '05c900ee4b9ccb0f2b8bf5a555f5586fe91c3c53', name: "minus", size: iconSize, color: this.isDecrementDisabled()
13733
+ } }, this.useButton && (hAsync("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
13676
13734
  ? NUMBER_INPUT_STEPPER.icon.disabled
13677
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: 'e406fa40696f58e4a8ad4f2be2a33ecfc2f4ff3a', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '3df235c03deac87a615d295d65473a487155f07c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
13735
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
13678
13736
  textAlign: this.useButton ? 'center' : 'right',
13679
13737
  ...this.inputStyle,
13680
- } }), this.inputSuffix && hAsync("span", { key: 'b23bd9594ca53147d628d97b8a99512d0ecc6c82', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'c4757ac52cccab448a91458ca66e7de29b5d4b5d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '45eadd745300df1f9bec18d7a9d6367f25ee53b7', name: "add", size: iconSize, color: this.isIncrementDisabled()
13738
+ } }), this.inputSuffix && hAsync("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
13681
13739
  ? NUMBER_INPUT_STEPPER.icon.disabled
13682
13740
  : NUMBER_INPUT_STEPPER.icon.default }))))));
13683
13741
  }
@@ -13896,13 +13954,13 @@ class SdPagination {
13896
13954
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
13897
13955
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
13898
13956
  };
13899
- return (hAsync("div", { key: '2e5fdcc2d6a426be32128960131db2ed51674939', class: {
13957
+ return (hAsync("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
13900
13958
  'sd-pagination': true,
13901
13959
  'sd-pagination--simple': this.simple,
13902
- }, style: cssVars }, hAsync("div", { key: 'a83ee12c1af9ca41e3a5773fcd840200fcb873e2', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
13960
+ }, style: cssVars }, hAsync("div", { key: '360cdb85715508d2f8155851b11928031015909c', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
13903
13961
  'sd-pagination__item': true,
13904
13962
  'sd-pagination__item--selected': this.currentPage === n,
13905
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3c98ea6c1bf5bea43baaa73a2a7db5c4fe1404e5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13963
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13906
13964
  }
13907
13965
  static get style() { return sdPaginationCss(); }
13908
13966
  static get cmpMeta() { return {
@@ -14142,7 +14200,7 @@ class SdPopup {
14142
14200
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
14143
14201
  ...this.submitButtonProps,
14144
14202
  };
14145
- return (hAsync("div", { key: 'cc0381250b37b498e93fd7f8d932ad95ff802bcc', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '07b4378a9c8d292f73e0a6307ec2b6335087cc9f', class: "sd-popup__header" }, hAsync("h2", { key: 'a17318a803d2d825e0a85f43ff436944424bb213', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'f2147c40fbd425565f6e61e62e2da2d97eacb27a', class: "sd-popup__body" }, hAsync("slot", { key: '5600679290a775e53e838fd5ea2d9cfc1008130f' })), this.useFooter && (hAsync("footer", { key: '2bfa07724438b8afa03a0654359ab760498ef7dc', class: "sd-popup__footer" }, hAsync("div", { key: 'd70c88b18b23bd8d1b3f6d4899d65b25e378b9aa', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '42d7108b390bf460398dcbc128a837784ba5c544', name: "footer-left" })), hAsync("sd-button", { key: '0525a19c52caef0dcaf0eb2783391132d53d18db', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14203
+ return (hAsync("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, hAsync("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, hAsync("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (hAsync("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, hAsync("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), hAsync("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14146
14204
  }
14147
14205
  static get style() { return sdPopupCss(); }
14148
14206
  static get cmpMeta() { return {
@@ -14490,8 +14548,7 @@ const radio = {
14490
14548
  label: {
14491
14549
  "default": "#222222",
14492
14550
  disabled: "#888888"
14493
- }
14494
- };
14551
+ }};
14495
14552
  var radioTokens = {
14496
14553
  radio: radio
14497
14554
  };
@@ -14820,7 +14877,7 @@ class SdRadioButton {
14820
14877
  }; }
14821
14878
  }
14822
14879
 
14823
- const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height);display:inline-flex;flex-direction:column}sd-radio .sd-radio__label::before{content:attr(data-label);height:0;font-weight:var(--sd-radio-selected-font-weight);visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__label{font-weight:var(--sd-radio-selected-font-weight)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__label{color:var(--sd-radio-label-disabled-color)}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:8px}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:20px}`;
14880
+ const sdRadioGroupCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height);display:inline-flex;flex-direction:column}sd-radio .sd-radio__label::before{content:attr(data-label);height:0;font-weight:var(--sd-radio-selected-font-weight);visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__label{font-weight:var(--sd-radio-selected-font-weight)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__label{color:var(--sd-radio-label-disabled-color)}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}sd-radio-group{display:inline-block}sd-radio-group .sd-radio-group{display:flex}sd-radio-group .sd-radio-group--vertical{flex-direction:column;gap:var(--sd-radio-radio-group-gap-vertical)}sd-radio-group .sd-radio-group--horizontal{flex-direction:row;align-items:center;gap:var(--sd-radio-radio-group-gap-horizontal)}`;
14824
14881
 
14825
14882
  class SdRadioGroup {
14826
14883
  constructor(hostRef) {
@@ -14974,7 +15031,7 @@ class SdSelect {
14974
15031
  triggerComponentRef;
14975
15032
  closeAnimationTimer;
14976
15033
  /** 폼 연동용 name 속성 */
14977
- name = nanoid$1();
15034
+ name = nanoid();
14978
15035
  triggerHasFocus = false;
14979
15036
  watchIsOpen(newValue) {
14980
15037
  this.syncFocusedState(newValue);
@@ -15171,15 +15228,15 @@ class SdSelect {
15171
15228
  this.closeDropdown();
15172
15229
  },
15173
15230
  };
15174
- return (hAsync("sd-field", { key: '426e5777a976da591726108e8a19c27822151c34', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
15231
+ return (hAsync("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
15175
15232
  this.hovered = true;
15176
15233
  }, onMouseLeave: () => {
15177
15234
  this.hovered = false;
15178
- } }, hAsync("div", { key: '2e47d100a63bd6445f452701409cf05efabb30e0', class: "sd-select", ref: el => {
15235
+ } }, hAsync("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
15179
15236
  this.triggerRef = el;
15180
- } }, hAsync("sd-select-trigger", { key: '65763371f56bae558f927189931b567e5ca73df6', ref: el => {
15237
+ } }, hAsync("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
15181
15238
  this.triggerComponentRef = el;
15182
- }, 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: '98518c875649c8e38c15565d9bfccf9c0b0eeb9a', ...portalProps }, hAsync("sd-select-listbox", { key: 'be8e2c814bd30a57ee20b0a0b378f3809ffef26a', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
15239
+ }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, hAsync("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
15183
15240
  }
15184
15241
  static get watchers() { return {
15185
15242
  "isOpen": [{
@@ -15440,7 +15497,7 @@ class SdSelectListItem {
15440
15497
  return (
15441
15498
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
15442
15499
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
15443
- hAsync("div", { key: 'dd2c4cbd210ed70c00a954a9c6da6923ea76c91e', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15500
+ hAsync("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15444
15501
  'sd-select-list-item': true,
15445
15502
  'sd-select-list-item--group': isGroup,
15446
15503
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -15450,7 +15507,7 @@ class SdSelectListItem {
15450
15507
  'sd-select-list-item--focused': this.isFocused,
15451
15508
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
15452
15509
  'sd-select-list-item--disabled': !!this.option.disabled,
15453
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '18fb5ec3ccd00aa34c974975324bb214aa4d38f8', 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: '70ee48fdece9e38db3bf9450a5d82ad6db4ec985', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15510
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '297067b88bedf8eed648f60050688e23e9dfcbdd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15454
15511
  }
15455
15512
  static get style() { return sdSelectListItemCss(); }
15456
15513
  static get cmpMeta() { return {
@@ -15522,15 +15579,15 @@ class SdSelectListItemSearch {
15522
15579
  clearTimeout(this.debounceTimer);
15523
15580
  }
15524
15581
  render() {
15525
- return (hAsync("div", { key: '951bb1f2507918c057bb88bd8254a8b4bc4b6018', class: {
15582
+ return (hAsync("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
15526
15583
  'sd-select-list-item-search': true,
15527
15584
  'sd-select-list-item-search--scrolled': this.isScrolled,
15528
- } }, hAsync("div", { key: '32164db917f4ccadb301c00e77d8296d0ef59e7d', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '9493497b5b8b7274c31bac9e865a1949c0cd4493', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '3917e46b5e6ad55ab7481655fe31d7a3b29632f6', ref: el => {
15585
+ } }, hAsync("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
15529
15586
  this.inputEl = el;
15530
- }, 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: '93c11a138545e9480aae3dd0ed961fe613fc1b14', type: "button", class: {
15587
+ }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', type: "button", class: {
15531
15588
  'sd-select-list-item-search__clear': true,
15532
15589
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
15533
- }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'dead91d16ab3af88a4a94ee061b9ca1c1336f2f7', name: "close", size: 12, color: "#888888" })))));
15590
+ }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
15534
15591
  }
15535
15592
  static get style() { return sdSelectListItemSearchCss(); }
15536
15593
  static get cmpMeta() { return {
@@ -15914,9 +15971,9 @@ class SdSelectListbox {
15914
15971
  '--listbox-max-height': this.maxHeight ?? '260px',
15915
15972
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15916
15973
  };
15917
- return (hAsync("div", { key: '0e322ab6384a37b9ea83883e8012799f157ec833', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '12d35a6ab654d4ce0cf504c0d1b1b6e4cc7eac78', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'ba99682e9c486fe0efa02a888166a06a600c189e', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15974
+ return (hAsync("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15918
15975
  this.listEl = el;
15919
- } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '8f66c32cc3f8287d04ad7081e71903ccb4467b4f', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
15976
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
15920
15977
  }
15921
15978
  static get watchers() { return {
15922
15979
  "searchKeyword": [{
@@ -16005,7 +16062,7 @@ class SdSelectTrigger {
16005
16062
  ? SELECT_COLORS.icon.disabled
16006
16063
  : SELECT_COLORS.icon.default,
16007
16064
  };
16008
- return (hAsync("div", { key: 'a261a38ab844572d693bdb736e8c6c5df8b2b0c6', ref: el => {
16065
+ return (hAsync("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
16009
16066
  this.triggerEl = el;
16010
16067
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
16011
16068
  'sd-select-trigger': true,
@@ -16016,7 +16073,7 @@ class SdSelectTrigger {
16016
16073
  e.preventDefault();
16017
16074
  this.handleClick();
16018
16075
  }
16019
- }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: 'c8255f624c101fa984d7dc081231f0ce957f8707', 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: 'bf2145a098a31eba8a5210eb265fb252b84c9e0b', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16076
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16020
16077
  'sd-select-trigger__icon': true,
16021
16078
  'sd-select-trigger__icon--open': this.isOpen,
16022
16079
  } }))));
@@ -16145,7 +16202,7 @@ class SdSwitch {
16145
16202
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
16146
16203
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
16147
16204
  };
16148
- return (hAsync("label", { key: 'dded99ece17ee7308da9c7183a725493f705caf2', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '8ca9b17fbbd97cdfe351f06fa5dba7efb22faf39', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: 'dffb2503df8755076218fc24ce974ed5cccb37c3', class: "sd-switch__track" }, hAsync("div", { key: '52b8d7b125bf3a2fdddbcfe4690933432cb0ff29', class: "sd-switch__knob" })), this.label && hAsync("span", { key: 'e4e62e02aa1d7336bf1de5add45ed0b2dbecbcd1', class: "sd-switch__label" }, this.label)));
16205
+ return (hAsync("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, hAsync("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
16149
16206
  }
16150
16207
  static get style() { return sdSwitchCss(); }
16151
16208
  static get cmpMeta() { return {
@@ -16162,1081 +16219,6 @@ class SdSwitch {
16162
16219
  }; }
16163
16220
  }
16164
16221
 
16165
- let urlAlphabet =
16166
- 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
16167
-
16168
- const POOL_SIZE_MULTIPLIER = 128;
16169
- let pool, poolOffset;
16170
- function fillPool(bytes) {
16171
- if (bytes < 0 || bytes > 1024) throw new RangeError('Wrong ID size')
16172
- if (!pool || pool.length < bytes) {
16173
- pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
16174
- node_crypto.webcrypto.getRandomValues(pool);
16175
- poolOffset = 0;
16176
- } else if (poolOffset + bytes > pool.length) {
16177
- node_crypto.webcrypto.getRandomValues(pool);
16178
- poolOffset = 0;
16179
- }
16180
- poolOffset += bytes;
16181
- }
16182
- function nanoid(size = 21) {
16183
- fillPool((size |= 0));
16184
- let id = '';
16185
- for (let i = poolOffset - size; i < poolOffset; i++) {
16186
- id += urlAlphabet[pool[i] & 63];
16187
- }
16188
- return id
16189
- }
16190
-
16191
- const TABLE_ID_ATTR = 'table-id';
16192
-
16193
- // ── Header Tokens ──
16194
- const TABLE_HEADER_LAYOUT = {
16195
- height: tableTokens.table.header.height,
16196
- paddingX: tableTokens.table.header.paddingX,
16197
- gap: tableTokens.table.header.gap,
16198
- };
16199
- const TABLE_HEADER_TYPOGRAPHY = {
16200
- fontFamily: tableTokens.table.header.typography.fontFamily,
16201
- fontWeight: tableTokens.table.header.typography.fontWeight,
16202
- fontSize: tableTokens.table.header.typography.fontSize,
16203
- lineHeight: tableTokens.table.header.typography.lineHeight,
16204
- textDecoration: tableTokens.table.header.typography.textDecoration,
16205
- };
16206
- const TABLE_HEADER_COLORS = {
16207
- bg: tableTokens.table.header.bg,
16208
- };
16209
- const TABLE_HEADER_RESIZING_BAR = {
16210
- color: tableTokens.table.header.resizingBar.color,
16211
- height: tableTokens.table.header.resizingBar.height,
16212
- };
16213
- // ── Body Tokens ──
16214
- const TABLE_BODY_LAYOUT = {
16215
- default: {
16216
- height: tableTokens.table.body.default.height,
16217
- paddingY: tableTokens.table.body.default.paddingY,
16218
- },
16219
- dense: {
16220
- height: tableTokens.table.body.dense.height,
16221
- paddingY: tableTokens.table.body.dense.paddingY,
16222
- },
16223
- paddingX: tableTokens.table.body.paddingX.default,
16224
- framePadding: tableTokens.table.body.paddingX.frame,
16225
- };
16226
- const TABLE_BODY_TYPOGRAPHY = {
16227
- fontFamily: tableTokens.table.body.typography.fontFamily,
16228
- fontWeight: tableTokens.table.body.typography.fontWeight,
16229
- fontSize: tableTokens.table.body.typography.fontSize,
16230
- lineHeight: tableTokens.table.body.typography.lineHeight,
16231
- textDecoration: tableTokens.table.body.typography.textDecoration,
16232
- };
16233
- // ── Frame / Border Tokens ──
16234
- const TABLE_BORDER = {
16235
- color: tableTokens.table.border.color,
16236
- width: tableTokens.table.border.width,
16237
- };
16238
- const TABLE_SEPARATOR = {
16239
- color: tableTokens.table.separator.color,
16240
- width: tableTokens.table.separator.width.default,
16241
- denseWidth: tableTokens.table.separator.width.dense,
16242
- };
16243
- const TABLE_RADIUS = tableTokens.table.radius;
16244
- // ── Selectable Column ──
16245
- const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
16246
- // ── Header Icon Color Defaults ──
16247
- const ICON_DEFAULT_COLOR = {
16248
- pageEdit: systemTokens.color.darkblue.strong,
16249
- arrowDown: systemTokens.color.darkblue.strong,
16250
- arrowUp: systemTokens.color.darkblue.strong,
16251
- updown: systemTokens.color.grey.strong,
16252
- pageMove: systemTokens.color.darkblue.strong,
16253
- star: systemTokens.color.blue.strong,
16254
- };
16255
- const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
16256
- const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
16257
-
16258
- 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%)}`;
16259
-
16260
- class SdTable {
16261
- constructor(hostRef) {
16262
- registerInstance(this, hostRef);
16263
- this.sdSelectChange = createEvent(this, "sdSelectChange", 7);
16264
- this.sdPageChange = createEvent(this, "sdPageChange", 7);
16265
- this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange", 7);
16266
- this.sdVirtualUpdate = createEvent(this, "sdVirtualUpdate", 7);
16267
- this.sdVirtualReachEnd = createEvent(this, "sdVirtualReachEnd", 7);
16268
- }
16269
- static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
16270
- get el() { return getElement(this); }
16271
- /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
16272
- tableId = nanoid(8);
16273
- fallbackTableId = nanoid(8);
16274
- /** 컬럼 정의 목록 */
16275
- columns = [];
16276
- /** 행 데이터 배열 */
16277
- rows;
16278
- /** 현재 선택된 행 목록 */
16279
- selected = [];
16280
- /** 행 고유 식별 필드명 */
16281
- rowKey = 'id';
16282
- /** 행 선택(체크박스) 기능 활성화 여부 */
16283
- selectable = false;
16284
- /** 컬럼 너비 조절 기능 활성화 여부 */
16285
- resizable = false;
16286
- /** 테이블 너비 */
16287
- width;
16288
- /** 테이블 높이 */
16289
- height;
16290
- /** 헤더 고정(sticky) 여부 */
16291
- stickyHeader = false;
16292
- /** 고정할 좌우 컬럼 수 */
16293
- stickyColumn = { left: 0, right: 0 };
16294
- /** border-radius 제어 */
16295
- radius = 'default';
16296
- /** 데이터 없을 때 표시할 메시지 */
16297
- noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16298
- resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16299
- /** 로딩 스피너 표시 여부 */
16300
- isLoading = false;
16301
- /** 페이지네이션 옵션 */
16302
- pagination;
16303
- /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
16304
- useInternalPagination = false;
16305
- /** 페이지당 행 수 선택 셀렉트 표시 여부 */
16306
- useRowsPerPageSelect = false;
16307
- /** 행 높이를 줄인 조밀 모드 여부 */
16308
- dense = false;
16309
- // ─── Virtual Scroll ───────────────────────────────────────────────
16310
- /** 가상 스크롤 사용 여부 */
16311
- useVirtualScroll = false;
16312
- /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
16313
- rowHeight;
16314
- get effectiveRowHeight() {
16315
- if (this.rowHeight != null)
16316
- return this.rowHeight;
16317
- return this.dense
16318
- ? Number(TABLE_BODY_LAYOUT.dense.height)
16319
- : Number(TABLE_BODY_LAYOUT.default.height);
16320
- }
16321
- /** 가상 스크롤 상하 버퍼 행 수 */
16322
- virtualBuffer = 5;
16323
- /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
16324
- virtualEndThreshold = 10;
16325
- // ─────────────────────────────────────────────────────────────────
16326
- /** 페이지당 행 수 선택 옵션 목록 */
16327
- rowsPerPageOption = [
16328
- { label: '10개씩 보기', value: 10 },
16329
- { label: '25개씩 보기', value: 25 },
16330
- { label: '50개씩 보기', value: 50 },
16331
- { label: '100개씩 보기', value: 100 },
16332
- ];
16333
- /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
16334
- sdSelectChange;
16335
- /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
16336
- sdPageChange;
16337
- /** 페이지당 행 수가 변경될 때 발생합니다. */
16338
- sdRowsPerPageChange;
16339
- /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
16340
- sdVirtualUpdate;
16341
- /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
16342
- sdVirtualReachEnd;
16343
- currentPage = 1;
16344
- innerRowsPerPage = 10;
16345
- innerSelected = new Set();
16346
- columnWidths = [];
16347
- scrolledLeft = false;
16348
- scrolledRight = false;
16349
- rowCount = 0;
16350
- loadingScrollTop = 0;
16351
- noDataBodyHeight = 60;
16352
- // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
16353
- // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
16354
- autoThead = false;
16355
- autoTbody = false;
16356
- vsStart = 0;
16357
- vsEnd = 0;
16358
- lastReachEndNotifiedRowCount = -1;
16359
- scrollContainer = null;
16360
- noDataContentEl = null;
16361
- noDataContentResizeObserver;
16362
- onScroll;
16363
- // 키: `${rowKey}::${field}` → { rowspan, colspan }
16364
- spanRegistry = new Map();
16365
- // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
16366
- // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
16367
- useFrameRegistry = new Map();
16368
- // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
16369
- // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
16370
- cellClassRegistry = new Map();
16371
- // rowKey 문자열 → rows 배열에서의 visual index.
16372
- // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
16373
- // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
16374
- rowIndexMap = new Map();
16375
- rebuildRowIndexMap() {
16376
- this.rowIndexMap.clear();
16377
- if (!Array.isArray(this.rows))
16378
- return;
16379
- const field = this.rowKey;
16380
- this.rows.forEach((r, i) => {
16381
- const k = r?.[field];
16382
- if (k == null)
16383
- return;
16384
- this.rowIndexMap.set(String(k), i);
16385
- });
16386
- }
16387
- // rowKey의 시각적 행 인덱스를 돌려준다.
16388
- // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
16389
- // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
16390
- // 3) 둘 다 안 되면 null — rowspan 평가 스킵
16391
- resolveRowIndex(rowKey) {
16392
- const fromMap = this.rowIndexMap.get(rowKey);
16393
- if (fromMap !== undefined)
16394
- return fromMap;
16395
- const n = Number(rowKey);
16396
- return Number.isFinite(n) ? n : null;
16397
- }
16398
- toFiniteNumber(value, fallback) {
16399
- const n = typeof value === 'number' ? value : Number(value);
16400
- return Number.isFinite(n) ? n : fallback;
16401
- }
16402
- isRowsPerPageValue(value) {
16403
- return value === null || typeof value === 'string' || typeof value === 'number';
16404
- }
16405
- isValidTableId(value) {
16406
- return (typeof value === 'string' &&
16407
- value.trim().length > 0 &&
16408
- value !== 'undefined' &&
16409
- value !== 'null');
16410
- }
16411
- getResolvedTableId() {
16412
- if (this.isValidTableId(this.tableId))
16413
- return this.tableId;
16414
- const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
16415
- if (this.isValidTableId(attrId))
16416
- return attrId;
16417
- return this.fallbackTableId;
16418
- }
16419
- syncTableIdAttribute() {
16420
- const resolvedTableId = this.getResolvedTableId();
16421
- if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
16422
- this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
16423
- }
16424
- }
16425
- handleIsLoadingChange(newVal) {
16426
- if (newVal) {
16427
- this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
16428
- }
16429
- this.syncNoDataContentObserver();
16430
- }
16431
- handleUseVirtualScrollChange(newVal) {
16432
- if (newVal) {
16433
- // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
16434
- readTask(() => this.propagateVirtualUpdate());
16435
- }
16436
- }
16437
- handleColumnsChange(newCols) {
16438
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
16439
- this.refreshChildrenConfig();
16440
- }
16441
- handleRowsChange(newRows) {
16442
- if (!Array.isArray(newRows))
16443
- return;
16444
- this.rowCount = newRows.length;
16445
- this.rebuildRowIndexMap();
16446
- if (this.useVirtualScroll)
16447
- this.propagateVirtualUpdate(true);
16448
- this.pushRowsToChildren(newRows);
16449
- this.syncNoDataContentObserver();
16450
- }
16451
- handleRowKeyChange() {
16452
- this.rebuildRowIndexMap();
16453
- }
16454
- handleTableIdChange() {
16455
- this.syncTableIdAttribute();
16456
- }
16457
- handleNoDataLabelChange(newLabel) {
16458
- if (typeof newLabel === 'string' &&
16459
- newLabel.trim().length > 0 &&
16460
- newLabel !== 'undefined' &&
16461
- newLabel !== 'null') {
16462
- this.resolvedNoDataLabel = newLabel;
16463
- }
16464
- else {
16465
- this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16466
- }
16467
- }
16468
- handleConfigChange() {
16469
- this.refreshChildrenConfig();
16470
- }
16471
- handleSelectedChange(newSelected) {
16472
- this.innerSelected = new Set(newSelected);
16473
- }
16474
- handlePaginationChange(newVal) {
16475
- if (newVal?.page != null && newVal.page !== this.currentPage) {
16476
- this.currentPage = newVal.page;
16477
- }
16478
- if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
16479
- this.innerRowsPerPage = newVal.rowsPerPage;
16480
- }
16481
- }
16482
- detectChildren() {
16483
- const hasThead = !!this.el.querySelector(':scope > sd-thead');
16484
- const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
16485
- this.autoThead = !hasThead;
16486
- this.autoTbody = !hasTbody;
16487
- }
16488
- componentWillLoad() {
16489
- this.syncTableIdAttribute();
16490
- this.handleNoDataLabelChange(this.noDataLabel);
16491
- this.detectChildren();
16492
- this.innerSelected = new Set(this.selected || []);
16493
- this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
16494
- this.rebuildRowIndexMap();
16495
- if (this.pagination?.page != null) {
16496
- this.currentPage = this.pagination.page;
16497
- }
16498
- if (this.pagination?.rowsPerPage != null) {
16499
- this.innerRowsPerPage = this.pagination.rowsPerPage;
16500
- }
16501
- // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
16502
- // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
16503
- // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
16504
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16505
- const el = this.el;
16506
- el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
16507
- el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
16508
- el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
16509
- el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
16510
- el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
16511
- el.setRowCountSync = this.setRowCountSync.bind(this);
16512
- el.handleResize = this.handleResize.bind(this);
16513
- el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
16514
- el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
16515
- el.getConfigSync = this.getConfigSync.bind(this);
16516
- el.getTableIdSync = () => this.getResolvedTableId();
16517
- el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
16518
- el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
16519
- el.registerSpanSync = this.registerSpanSync.bind(this);
16520
- el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
16521
- el.getSpanSync = this.getSpanSync.bind(this);
16522
- el.isCoveredSync = this.isCoveredSync.bind(this);
16523
- el.hasRowspanSync = this.hasRowspanSync.bind(this);
16524
- el.registerCellClassSync = this.registerCellClassSync.bind(this);
16525
- el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
16526
- el.getCellClassSync = this.getCellClassSync.bind(this);
16527
- el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
16528
- el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
16529
- el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
16530
- el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
16531
- if (Array.isArray(this.rows)) {
16532
- this.rowCount = this.rows.length;
16533
- this.pushRowsToChildren(this.rows);
16534
- }
16535
- }
16536
- componentDidLoad() {
16537
- if (Array.isArray(this.rows)) {
16538
- this.pushRowsToChildren(this.rows);
16539
- }
16540
- readTask(() => {
16541
- const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
16542
- if (!wrapper)
16543
- return;
16544
- let rafPending = false;
16545
- this.onScroll = () => {
16546
- // 가로 스크롤 그림자
16547
- const scrollLeft = wrapper.scrollLeft;
16548
- const scrollWidth = wrapper.scrollWidth;
16549
- const clientWidth = wrapper.clientWidth;
16550
- const newScrolledLeft = scrollLeft > 0;
16551
- const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
16552
- if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
16553
- this.scrolledLeft = newScrolledLeft;
16554
- this.scrolledRight = newScrolledRight;
16555
- this.refreshChildrenConfig();
16556
- }
16557
- // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
16558
- if (this.useVirtualScroll && !rafPending) {
16559
- rafPending = true;
16560
- requestAnimationFrame(() => {
16561
- rafPending = false;
16562
- this.propagateVirtualUpdate();
16563
- });
16564
- }
16565
- };
16566
- this.scrollContainer = wrapper;
16567
- wrapper.addEventListener('scroll', this.onScroll, { passive: true });
16568
- this.onScroll();
16569
- if (this.useVirtualScroll) {
16570
- this.propagateVirtualUpdate(); // 초기 렌더
16571
- }
16572
- });
16573
- this.syncNoDataContentObserver();
16574
- }
16575
- disconnectedCallback() {
16576
- if (this.scrollContainer && this.onScroll) {
16577
- this.scrollContainer.removeEventListener('scroll', this.onScroll);
16578
- }
16579
- this.noDataContentResizeObserver?.disconnect();
16580
- this.noDataContentResizeObserver = undefined;
16581
- }
16582
- syncNoDataContentObserver() {
16583
- const isNoData = this.rowCount === 0 && !this.isLoading;
16584
- if (!isNoData) {
16585
- this.noDataContentResizeObserver?.disconnect();
16586
- this.noDataContentResizeObserver = undefined;
16587
- this.noDataBodyHeight = 60;
16588
- return;
16589
- }
16590
- this.observeNoDataContentHeight();
16591
- }
16592
- // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
16593
- observeNoDataContentHeight() {
16594
- if (typeof ResizeObserver === 'undefined')
16595
- return;
16596
- const target = this.noDataContentEl;
16597
- if (!target)
16598
- return;
16599
- this.noDataContentResizeObserver?.disconnect();
16600
- this.noDataContentResizeObserver = new ResizeObserver(() => {
16601
- const measured = Math.ceil(target.scrollHeight);
16602
- const nextHeight = Math.max(60, measured);
16603
- if (nextHeight !== this.noDataBodyHeight) {
16604
- this.noDataBodyHeight = nextHeight;
16605
- }
16606
- });
16607
- this.noDataContentResizeObserver.observe(target);
16608
- readTask(() => {
16609
- if (!this.noDataContentEl)
16610
- return;
16611
- const measured = Math.ceil(this.noDataContentEl.scrollHeight);
16612
- const next = Math.max(60, measured);
16613
- if (next !== this.noDataBodyHeight) {
16614
- this.noDataBodyHeight = next;
16615
- }
16616
- });
16617
- }
16618
- queryChildEl(selector) {
16619
- return (this.el.querySelector(selector) ??
16620
- this.el.shadowRoot?.querySelector(selector) ??
16621
- null);
16622
- }
16623
- queryAllTr() {
16624
- const light = Array.from(this.el.querySelectorAll('sd-tr'));
16625
- const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
16626
- return [...light, ...shadow];
16627
- }
16628
- pushRowsToChildren(rows) {
16629
- const tbody = this.queryChildEl('sd-tbody');
16630
- if (tbody)
16631
- tbody.rows = rows;
16632
- const thead = this.queryChildEl('sd-thead');
16633
- if (thead)
16634
- thead.rows = rows;
16635
- }
16636
- handleStructureSlotChange = () => {
16637
- if (Array.isArray(this.rows)) {
16638
- this.pushRowsToChildren(this.rows);
16639
- }
16640
- this.refreshChildrenConfig();
16641
- };
16642
- refreshChildrenSelection() {
16643
- const thead = this.queryChildEl('sd-thead');
16644
- thead?.refreshSelection?.();
16645
- this.queryAllTr().forEach(tr => tr.refreshSelection?.());
16646
- }
16647
- refreshChildrenConfig() {
16648
- const thead = this.queryChildEl('sd-thead');
16649
- thead?.refreshConfig?.();
16650
- this.queryAllTr().forEach(tr => tr.refreshConfig?.());
16651
- }
16652
- maybeEmitVirtualReachEnd(start, end) {
16653
- const threshold = Math.max(1, this.virtualEndThreshold);
16654
- const nearEnd = end >= Math.max(0, this.rowCount - threshold);
16655
- if (!nearEnd)
16656
- return;
16657
- if (this.lastReachEndNotifiedRowCount === this.rowCount)
16658
- return;
16659
- this.lastReachEndNotifiedRowCount = this.rowCount;
16660
- this.sdVirtualReachEnd.emit({
16661
- from: start,
16662
- to: end,
16663
- rowCount: this.rowCount,
16664
- threshold,
16665
- });
16666
- }
16667
- propagateVirtualUpdate(forceSpacerUpdate = false) {
16668
- if (!this.scrollContainer || !this.useVirtualScroll)
16669
- return;
16670
- const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
16671
- const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
16672
- const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
16673
- if (!Number.isFinite(start) || !Number.isFinite(end))
16674
- return;
16675
- const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
16676
- if (!rangeChanged && !forceSpacerUpdate)
16677
- return;
16678
- this.vsStart = start;
16679
- this.vsEnd = end;
16680
- const topHeight = start * this.effectiveRowHeight;
16681
- const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
16682
- // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
16683
- const tbody = this.queryChildEl('sd-tbody');
16684
- tbody?.setSpacersSync?.(topHeight, bottomHeight);
16685
- if (rangeChanged) {
16686
- this.sdVirtualUpdate.emit({
16687
- from: start,
16688
- to: end,
16689
- });
16690
- }
16691
- this.maybeEmitVirtualReachEnd(start, end);
16692
- }
16693
- getVirtualScrollConfigSync() {
16694
- return {
16695
- useVirtualScroll: this.useVirtualScroll,
16696
- rowHeight: this.effectiveRowHeight,
16697
- virtualBuffer: this.virtualBuffer,
16698
- vsStart: this.vsStart,
16699
- vsEnd: this.vsEnd,
16700
- rowCount: this.rowCount,
16701
- };
16702
- }
16703
- getConfigSync() {
16704
- return {
16705
- columns: this.columns,
16706
- selectable: this.selectable,
16707
- resizable: this.resizable,
16708
- stickyColumn: this.stickyColumn,
16709
- stickyHeader: this.stickyHeader,
16710
- scrolledLeft: this.scrolledLeft,
16711
- scrolledRight: this.scrolledRight,
16712
- columnWidths: this.columnWidths,
16713
- dense: this.dense,
16714
- };
16715
- }
16716
- registerUseFrameSync(rowKey, field) {
16717
- if (rowKey == null || field === '')
16718
- return;
16719
- let fields = this.useFrameRegistry.get(rowKey);
16720
- if (!fields) {
16721
- fields = new Set();
16722
- this.useFrameRegistry.set(rowKey, fields);
16723
- }
16724
- fields.add(field);
16725
- }
16726
- unregisterUseFrameSync(rowKey, field) {
16727
- if (rowKey == null || field === '')
16728
- return;
16729
- const fields = this.useFrameRegistry.get(rowKey);
16730
- if (!fields)
16731
- return;
16732
- fields.delete(field);
16733
- if (fields.size === 0)
16734
- this.useFrameRegistry.delete(rowKey);
16735
- }
16736
- hasUseFrameInRowSync(rowKey) {
16737
- const fields = this.useFrameRegistry.get(rowKey);
16738
- return fields != null && fields.size > 0;
16739
- }
16740
- isCellUseFrameSync(rowKey, field) {
16741
- return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
16742
- }
16743
- isRowSelectedSync(row) {
16744
- return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
16745
- }
16746
- /** 행이 선택되어 있는지 확인합니다. */
16747
- async isRowSelected(row) {
16748
- return this.isRowSelectedSync(row);
16749
- }
16750
- updateRowSelectSync(row) {
16751
- const selectedArray = Array.from(this.innerSelected);
16752
- const exists = this.isRowSelectedSync(row);
16753
- const newSelected = exists
16754
- ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
16755
- : [...selectedArray, row];
16756
- if (newSelected.length === selectedArray.length)
16757
- return;
16758
- this.innerSelected = new Set(newSelected);
16759
- this.selected = Array.from(this.innerSelected);
16760
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16761
- this.refreshChildrenSelection();
16762
- }
16763
- /** 행 선택 상태를 토글합니다. */
16764
- async updateRowSelect(row) {
16765
- this.updateRowSelectSync(row);
16766
- }
16767
- toggleSelectAllSync(checked, rows) {
16768
- if (checked) {
16769
- const pageRows = new Set([...rows]);
16770
- this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
16771
- }
16772
- else {
16773
- const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
16774
- this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
16775
- }
16776
- this.selected = Array.from(this.innerSelected);
16777
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16778
- this.refreshChildrenSelection();
16779
- }
16780
- /** 전체 행 선택/해제를 처리합니다. */
16781
- async toggleSelectAll(checked, rows) {
16782
- this.toggleSelectAllSync(checked, rows);
16783
- }
16784
- getIsAllCheckedSync(rows) {
16785
- const total = rows.length;
16786
- const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
16787
- if (selectedCount === 0)
16788
- return false;
16789
- if (selectedCount === total)
16790
- return true;
16791
- return null; // indeterminate
16792
- }
16793
- /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
16794
- async getIsAllChecked(rows) {
16795
- return this.getIsAllCheckedSync(rows);
16796
- }
16797
- changePage(page) {
16798
- if (!this.useInternalPagination) {
16799
- this.sdPageChange.emit(page);
16800
- return;
16801
- }
16802
- this.currentPage = page;
16803
- this.sdPageChange.emit(this.currentPage);
16804
- this.updateRowsVisibility();
16805
- }
16806
- updateRowsVisibility() {
16807
- this.queryAllTr().forEach(tr => tr.updateVisibility?.());
16808
- }
16809
- changeRowsPerPage(perPage) {
16810
- const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
16811
- if (!this.useInternalPagination) {
16812
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16813
- return;
16814
- }
16815
- this.innerRowsPerPage = changedRowsPerPage;
16816
- const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
16817
- if (this.currentPage > newLastPage) {
16818
- this.currentPage = newLastPage;
16819
- }
16820
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16821
- this.updateRowsVisibility();
16822
- }
16823
- get lastPageNumber() {
16824
- if (this.useInternalPagination) {
16825
- return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
16826
- }
16827
- const { lastPage, rowsPerPage = 10 } = this.pagination || {};
16828
- return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
16829
- }
16830
- handleResize(index, event, reversed = false) {
16831
- if (typeof document === 'undefined')
16832
- return;
16833
- const startX = event.clientX;
16834
- const startWidth = this.columnWidths[index];
16835
- const handleMouseMove = (moveEvent) => {
16836
- const col = this.columns[index];
16837
- if (col == null)
16838
- return;
16839
- const minWidth = col.minWidth || 50;
16840
- const maxWidth = col.maxWidth || 9999;
16841
- const delta = moveEvent.clientX - startX;
16842
- const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
16843
- this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
16844
- const thead = this.queryChildEl('sd-thead');
16845
- thead?.setColumnWidths?.(this.columnWidths);
16846
- this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
16847
- const stickyRightCount = this.stickyColumn?.right || 0;
16848
- const visibleColCount = this.columns.filter(c => c.visible !== false).length;
16849
- const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
16850
- if (isRightStickyEdgeResizer) {
16851
- requestAnimationFrame(() => {
16852
- this.onScroll?.();
16853
- });
16854
- }
16855
- };
16856
- const handleMouseUp = () => {
16857
- document.removeEventListener('mousemove', handleMouseMove);
16858
- document.removeEventListener('mouseup', handleMouseUp);
16859
- };
16860
- document.addEventListener('mousemove', handleMouseMove);
16861
- document.addEventListener('mouseup', handleMouseUp);
16862
- }
16863
- getStickyStyleSync(colIdx) {
16864
- const leftOffset = this.columnWidths
16865
- .slice(0, colIdx)
16866
- .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
16867
- const rightOffset = this.columnWidths
16868
- .filter((_, i) => i >=
16869
- this.columns.filter(c => c.visible !== false).length -
16870
- (this.stickyColumn?.right || 0) && i > colIdx)
16871
- .reduce((a, b) => a + b, 0);
16872
- const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
16873
- const base = {
16874
- '--sticky-left-offset': `${leftOffset}px`,
16875
- '--sticky-right-offset': `${rightOffset}px`,
16876
- };
16877
- if (!visibleCol?.autoWidth) {
16878
- base['width'] = `${this.columnWidths[colIdx]}px`;
16879
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
16880
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
16881
- }
16882
- return base;
16883
- }
16884
- /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
16885
- async getStickyStyle(colIdx) {
16886
- return this.getStickyStyleSync(colIdx);
16887
- }
16888
- // ─── rowspan / colspan registry ─────────────────────────────────
16889
- // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
16890
- // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
16891
- // 덮였는지 판정해 <td>를 그릴지 결정한다.
16892
- spanKey(rowKey, field) {
16893
- return `${rowKey}::${field}`;
16894
- }
16895
- // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
16896
- // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
16897
- // 덮인 셀이 사라지거나 다시 나타난다.
16898
- // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
16899
- // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
16900
- requestAllTrUpdate() {
16901
- this.queryAllTr().forEach(tr => {
16902
- if (typeof tr.bumpSpansVersion === 'function') {
16903
- tr.bumpSpansVersion();
16904
- }
16905
- });
16906
- }
16907
- registerSpanSync(rowKey, field, rowspan, colspan) {
16908
- if (rowKey == null || field === '')
16909
- return;
16910
- const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
16911
- const safeColspan = Math.max(1, Math.floor(colspan || 1));
16912
- const key = this.spanKey(rowKey, field);
16913
- const prev = this.spanRegistry.get(key);
16914
- if (safeRowspan === 1 && safeColspan === 1) {
16915
- if (!prev)
16916
- return;
16917
- this.spanRegistry.delete(key);
16918
- this.requestAllTrUpdate();
16919
- return;
16920
- }
16921
- if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
16922
- return;
16923
- this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
16924
- this.requestAllTrUpdate();
16925
- }
16926
- unregisterSpanSync(rowKey, field) {
16927
- if (rowKey == null || field === '')
16928
- return;
16929
- const key = this.spanKey(rowKey, field);
16930
- if (!this.spanRegistry.has(key))
16931
- return;
16932
- this.spanRegistry.delete(key);
16933
- this.requestAllTrUpdate();
16934
- }
16935
- getSpanSync(rowKey, field) {
16936
- return this.spanRegistry.get(this.spanKey(rowKey, field));
16937
- }
16938
- // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
16939
- // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
16940
- // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
16941
- registerCellClassSync(rowKey, field, cls) {
16942
- if (rowKey == null || field === '')
16943
- return;
16944
- const key = this.spanKey(rowKey, field);
16945
- const safe = (cls ?? '').trim();
16946
- if (safe === '') {
16947
- this.cellClassRegistry.delete(key);
16948
- return;
16949
- }
16950
- this.cellClassRegistry.set(key, safe);
16951
- }
16952
- unregisterCellClassSync(rowKey, field) {
16953
- if (rowKey == null || field === '')
16954
- return;
16955
- this.cellClassRegistry.delete(this.spanKey(rowKey, field));
16956
- }
16957
- getCellClassSync(rowKey, field) {
16958
- return this.cellClassRegistry.get(this.spanKey(rowKey, field));
16959
- }
16960
- // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
16961
- // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
16962
- hasRowspanSync() {
16963
- for (const span of this.spanRegistry.values()) {
16964
- if (span.rowspan > 1)
16965
- return true;
16966
- }
16967
- return false;
16968
- }
16969
- isCoveredSync(rowKey, colIdx, columns) {
16970
- if (this.spanRegistry.size === 0)
16971
- return false;
16972
- const visibleCols = columns.filter(c => c.visible !== false);
16973
- // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
16974
- for (let i = 0; i < colIdx; i++) {
16975
- const c = visibleCols[i];
16976
- if (c == null)
16977
- continue;
16978
- const field = typeof c.field === 'string' ? c.field : c.name;
16979
- const span = this.spanRegistry.get(this.spanKey(rowKey, field));
16980
- if (!span)
16981
- continue;
16982
- if (i + span.colspan > colIdx)
16983
- return true;
16984
- }
16985
- // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
16986
- // rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
16987
- // 없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
16988
- const myRowIdx = this.resolveRowIndex(rowKey);
16989
- if (myRowIdx == null)
16990
- return false;
16991
- for (const [key, span] of this.spanRegistry) {
16992
- if (span.rowspan <= 1)
16993
- continue;
16994
- const sepIdx = key.indexOf('::');
16995
- if (sepIdx < 0)
16996
- continue;
16997
- const otherRowKey = key.slice(0, sepIdx);
16998
- const otherField = key.slice(sepIdx + 2);
16999
- const otherRowIdx = this.resolveRowIndex(otherRowKey);
17000
- if (otherRowIdx == null)
17001
- continue;
17002
- if (otherRowIdx >= myRowIdx)
17003
- continue;
17004
- if (otherRowIdx + span.rowspan <= myRowIdx)
17005
- continue;
17006
- const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
17007
- if (otherColIdx < 0)
17008
- continue;
17009
- if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
17010
- return true;
17011
- }
17012
- return false;
17013
- }
17014
- setRowCountSync(count) {
17015
- const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
17016
- if (safeCount !== this.rowCount) {
17017
- this.lastReachEndNotifiedRowCount = -1;
17018
- }
17019
- this.rowCount = safeCount;
17020
- if (this.useVirtualScroll) {
17021
- this.propagateVirtualUpdate(true);
17022
- }
17023
- }
17024
- /** 가상 스크롤 총 행 수를 설정합니다. */
17025
- async setRowCount(count) {
17026
- this.setRowCountSync(count);
17027
- }
17028
- calculateVisibleRange(scrollTop, containerHeight) {
17029
- const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
17030
- const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
17031
- const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
17032
- const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
17033
- const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
17034
- const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
17035
- const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
17036
- const start = Math.max(0, firstVisible - safeBuffer);
17037
- const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
17038
- return { start, end };
17039
- }
17040
- getPaginationInfoSync() {
17041
- if (!this.useInternalPagination || !this.pagination)
17042
- return null;
17043
- const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
17044
- const endIndex = startIndex + this.innerRowsPerPage;
17045
- return {
17046
- startIndex,
17047
- endIndex,
17048
- currentPage: this.currentPage,
17049
- rowsPerPage: this.innerRowsPerPage,
17050
- };
17051
- }
17052
- /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
17053
- async getPaginationInfo() {
17054
- return this.getPaginationInfoSync();
17055
- }
17056
- getVirtualScrollRangeSync() {
17057
- if (!this.useVirtualScroll)
17058
- return null;
17059
- if (!(this.vsEnd > 0))
17060
- return null;
17061
- return { from: this.vsStart, to: this.vsEnd };
17062
- }
17063
- // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
17064
- // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
17065
- renderAutoRows() {
17066
- if (this.useVirtualScroll)
17067
- return null;
17068
- const allRows = this.rows ?? [];
17069
- const pageInfo = this.getPaginationInfoSync();
17070
- const startIdx = pageInfo?.startIndex ?? 0;
17071
- const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
17072
- return displayed.map((row, i) => {
17073
- const absoluteIdx = startIdx + i;
17074
- return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
17075
- });
17076
- }
17077
- get tableClasses() {
17078
- return [
17079
- 'sd-table',
17080
- this.stickyHeader && 'sd-table--sticky-header',
17081
- this.selectable && 'sd-table--selectable',
17082
- this.resizable && 'sd-table--resizable',
17083
- (this.selectable ||
17084
- (this.stickyColumn?.left ?? 0) > 0 ||
17085
- (this.stickyColumn?.right ?? 0) > 0) &&
17086
- 'sd-table--sticky-column',
17087
- this.scrolledLeft && 'sd-table--scrolled-left',
17088
- this.scrolledRight && 'sd-table--scrolled-right',
17089
- this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
17090
- ]
17091
- .filter(Boolean)
17092
- .join(' ');
17093
- }
17094
- render() {
17095
- const resolvedTableId = this.getResolvedTableId();
17096
- const isNoData = this.rowCount === 0 && !this.isLoading;
17097
- const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
17098
- const noDataTotalHeight = 36 + this.noDataBodyHeight;
17099
- const hostHeight = isNoData
17100
- ? this.height !== undefined
17101
- ? `max(${this.height}, ${noDataTotalHeight}px)`
17102
- : `max(${noDataTotalHeight}px, 100%)`
17103
- : (this.height ?? '100%');
17104
- const hostStyle = {
17105
- '--table-radius': `${TABLE_RADIUS}px`,
17106
- '--table-border-color': TABLE_BORDER.color,
17107
- '--table-border-width': `${TABLE_BORDER.width}px`,
17108
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
17109
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
17110
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
17111
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
17112
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
17113
- '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
17114
- '--table-host-height': hostHeight,
17115
- };
17116
- return (hAsync(Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, hAsync("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
17117
- '--table-width': this.width,
17118
- '--pagination-height': `${paginationHeight}px`,
17119
- } }, hAsync("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', class: {
17120
- 'sd-table__wrapper': true,
17121
- 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
17122
- 'sd-table__wrapper--radius-full': this.radius === 'full',
17123
- } }, hAsync("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', class: {
17124
- 'sd-table__scroll-container': true,
17125
- 'sd-table__scroll-container--loading': this.isLoading,
17126
- 'sd-table__scroll-container--no-data': isNoData,
17127
- } }, this.isLoading && (hAsync("div", { key: '1a4dbf4a721240b3395230997c18c8ef989bbffc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, hAsync("sd-circle-progress", { key: '793a6772ef4c792e7f50c2ad90d43bdfbdde11a0', indeterminate: true }))), isNoData && (hAsync(hAsync.Fragment, null, hAsync("div", { key: '13b76f695edddfa3d4a13bcb1091f95cafb1ae17', class: "sd-table__no-data-header-overlay" }), hAsync("div", { key: 'f271bfa20d06cba0cc6c5fe6b5af5c874c1e0682', class: "sd-table__no-data" }, hAsync("div", { key: '6791f70e0b4cd1226bdcc16414249ad178b70396', class: "sd-table__no-data-content", ref: el => {
17128
- this.noDataContentEl = el;
17129
- if (el)
17130
- this.syncNoDataContentObserver();
17131
- } }, hAsync("slot", { key: '9cba0ff5c5ea3b4c78ccdb961de9cfe3ef2ac1e9', name: "no-data" }, hAsync("span", { key: '1022372f37f1564b0d636c888a17cb5ab5ac2e35' }, this.resolvedNoDataLabel)))))), hAsync("table", { key: 'e3d8c7dec8b3c76896b3063266dd5450bbfa7c13', 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 &&
17132
- this.pagination.rowsPerPage > 0 &&
17133
- this.rowCount > 0 &&
17134
- !this.useVirtualScroll && (hAsync("div", { key: '5410b53a9182f97406a0992464bc3435eb8439b1', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'aa237fe475797dd626856f5335395bdfa870f6db', 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: 'd2b98c053c6d63f0bbea73d66779dfa5c1828b5a', value: this.useInternalPagination
17135
- ? this.innerRowsPerPage
17136
- : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
17137
- if (!this.isRowsPerPageValue(e.detail))
17138
- return;
17139
- this.changeRowsPerPage(e.detail);
17140
- } })))))));
17141
- }
17142
- static get watchers() { return {
17143
- "isLoading": [{
17144
- "handleIsLoadingChange": 0
17145
- }],
17146
- "useVirtualScroll": [{
17147
- "handleUseVirtualScrollChange": 0
17148
- }],
17149
- "columns": [{
17150
- "handleColumnsChange": 0
17151
- }],
17152
- "rows": [{
17153
- "handleRowsChange": 0
17154
- }],
17155
- "rowKey": [{
17156
- "handleRowKeyChange": 0
17157
- }],
17158
- "tableId": [{
17159
- "handleTableIdChange": 0
17160
- }],
17161
- "noDataLabel": [{
17162
- "handleNoDataLabelChange": 0
17163
- }],
17164
- "selectable": [{
17165
- "handleConfigChange": 0
17166
- }],
17167
- "resizable": [{
17168
- "handleConfigChange": 0
17169
- }],
17170
- "stickyColumn": [{
17171
- "handleConfigChange": 0
17172
- }],
17173
- "stickyHeader": [{
17174
- "handleConfigChange": 0
17175
- }],
17176
- "dense": [{
17177
- "handleConfigChange": 0
17178
- }],
17179
- "selected": [{
17180
- "handleSelectedChange": 0
17181
- }],
17182
- "pagination": [{
17183
- "handlePaginationChange": 0
17184
- }]
17185
- }; }
17186
- static get style() { return sdTableCss(); }
17187
- static get cmpMeta() { return {
17188
- "$flags$": 777,
17189
- "$tagName$": "sd-table",
17190
- "$members$": {
17191
- "tableId": [513, "table-id"],
17192
- "columns": [16],
17193
- "rows": [16],
17194
- "selected": [1040],
17195
- "rowKey": [1, "row-key"],
17196
- "selectable": [4],
17197
- "resizable": [4],
17198
- "width": [1],
17199
- "height": [1],
17200
- "stickyHeader": [4, "sticky-header"],
17201
- "stickyColumn": [16],
17202
- "radius": [1],
17203
- "noDataLabel": [1, "no-data-label"],
17204
- "isLoading": [4, "is-loading"],
17205
- "pagination": [16],
17206
- "useInternalPagination": [4, "use-internal-pagination"],
17207
- "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
17208
- "dense": [4],
17209
- "useVirtualScroll": [4, "use-virtual-scroll"],
17210
- "rowHeight": [2, "row-height"],
17211
- "virtualBuffer": [2, "virtual-buffer"],
17212
- "virtualEndThreshold": [2, "virtual-end-threshold"],
17213
- "rowsPerPageOption": [16],
17214
- "resolvedNoDataLabel": [32],
17215
- "currentPage": [32],
17216
- "innerRowsPerPage": [32],
17217
- "innerSelected": [32],
17218
- "columnWidths": [32],
17219
- "scrolledLeft": [32],
17220
- "scrolledRight": [32],
17221
- "rowCount": [32],
17222
- "loadingScrollTop": [32],
17223
- "noDataBodyHeight": [32],
17224
- "autoThead": [32],
17225
- "autoTbody": [32],
17226
- "isRowSelected": [64],
17227
- "updateRowSelect": [64],
17228
- "toggleSelectAll": [64],
17229
- "getIsAllChecked": [64],
17230
- "getStickyStyle": [64],
17231
- "setRowCount": [64],
17232
- "getPaginationInfo": [64]
17233
- },
17234
- "$listeners$": undefined,
17235
- "$lazyBundleId$": "-",
17236
- "$attrsToReflect$": [["tableId", "table-id"]]
17237
- }; }
17238
- }
17239
-
17240
16222
  const tab = {
17241
16223
  main: {
17242
16224
  lg: {
@@ -17442,7 +16424,7 @@ class SdTabs {
17442
16424
  };
17443
16425
  }
17444
16426
  render() {
17445
- return (hAsync("div", { key: 'd5df329922f73444775ec827ce8cf3850c369131', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16427
+ return (hAsync("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
17446
16428
  const badgeName = this.getBadgeName(tab);
17447
16429
  return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
17448
16430
  if (e.key === 'Enter' || e.key === ' ') {
@@ -17537,8 +16519,7 @@ const tag = {
17537
16519
  grey: {
17538
16520
  content: "#737373",
17539
16521
  bg: "#EEEEEE"
17540
- }
17541
- };
16522
+ }};
17542
16523
  var tagTokens = {
17543
16524
  tag: tag
17544
16525
  };
@@ -17692,7 +16673,7 @@ class SdTag {
17692
16673
  const config = this.resolvedConfig;
17693
16674
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17694
16675
  const width = this.resolvedWidth;
17695
- return (hAsync(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
16676
+ return (hAsync(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
17696
16677
  '--sd-tag-background': config.background,
17697
16678
  '--sd-tag-content': config.content,
17698
16679
  '--sd-tag-height': config.height,
@@ -17702,7 +16683,7 @@ class SdTag {
17702
16683
  '--sd-tag-font-weight': config.fontWeight,
17703
16684
  '--sd-tag-line-height': config.lineHeight,
17704
16685
  '--sd-tag-radius': config.radius,
17705
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
16686
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
17706
16687
  }
17707
16688
  static get style() { return sdTagCss(); }
17708
16689
  static get cmpMeta() { return {
@@ -17721,292 +16702,6 @@ class SdTag {
17721
16702
  }; }
17722
16703
  }
17723
16704
 
17724
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17725
-
17726
- class SdTbody {
17727
- constructor(hostRef) {
17728
- registerInstance(this, hostRef);
17729
- }
17730
- get el() { return getElement(this); }
17731
- /** 렌더링할 행 데이터 목록 */
17732
- rows = [];
17733
- tableId = '';
17734
- topSpacerHeight = 0;
17735
- bottomSpacerHeight = 0;
17736
- tableEl = null;
17737
- handleRowsChange(newRows) {
17738
- const safeRows = newRows ?? [];
17739
- if (this.tableEl?.setRowCountSync) {
17740
- this.tableEl.setRowCountSync(safeRows.length);
17741
- }
17742
- }
17743
- componentWillLoad() {
17744
- this.syncTableContext();
17745
- this.rows = this.rows ?? [];
17746
- if (this.tableEl?.setRowCountSync) {
17747
- this.tableEl.setRowCountSync(this.rows.length);
17748
- }
17749
- this.el.setSpacersSync = (top, bottom) => {
17750
- this.topSpacerHeight = top;
17751
- this.bottomSpacerHeight = bottom;
17752
- };
17753
- }
17754
- componentDidLoad() {
17755
- this.syncTableContext();
17756
- }
17757
- syncTableContext() {
17758
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
17759
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
17760
- const closest = this.el.closest('sd-table');
17761
- const root = this.el.getRootNode();
17762
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
17763
- const table = closest ?? fromShadow;
17764
- this.tableEl = table;
17765
- const fromMethod = table?.getTableIdSync?.();
17766
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17767
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17768
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17769
- '';
17770
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
17771
- this.tableId = resolvedTableId;
17772
- }
17773
- }
17774
- render() {
17775
- return (hAsync(Host, { key: '6d4bea755b962e2f5b9f37129d0b03fd7f997e93', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '11543f7ea385458bcb57ae4e62bfd258bacb9e01', class: { tbody: true } }, [
17776
- this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17777
- hAsync("slot", { key: '515aa270f49dfd20f78de1d11c3c5b914cfda792' }),
17778
- this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17779
- ])));
17780
- }
17781
- static get watchers() { return {
17782
- "rows": [{
17783
- "handleRowsChange": 0
17784
- }]
17785
- }; }
17786
- static get style() { return sdTbodyCss(); }
17787
- static get cmpMeta() { return {
17788
- "$flags$": 777,
17789
- "$tagName$": "sd-tbody",
17790
- "$members$": {
17791
- "rows": [16],
17792
- "tableId": [32],
17793
- "topSpacerHeight": [32],
17794
- "bottomSpacerHeight": [32]
17795
- },
17796
- "$listeners$": undefined,
17797
- "$lazyBundleId$": "-",
17798
- "$attrsToReflect$": []
17799
- }; }
17800
- }
17801
-
17802
- 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}`;
17803
-
17804
- class SdTd {
17805
- constructor(hostRef) {
17806
- registerInstance(this, hostRef);
17807
- }
17808
- get el() { return getElement(this); }
17809
- /** 데이터 필드명 (슬롯 이름 생성에 사용) */
17810
- field;
17811
- /** 행 식별 키 */
17812
- rowKey;
17813
- /** 셀 내용 정렬 */
17814
- align;
17815
- /** 행 병합 수 */
17816
- rowspan;
17817
- /** 열 병합 수 */
17818
- colspan;
17819
- // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
17820
- // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
17821
- // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
17822
- /** td에 병합할 사용자 클래스 */
17823
- sdClass;
17824
- /** 좌측 구분선 표시 여부 */
17825
- dividerLeft = false;
17826
- /** 우측 구분선 표시 여부 */
17827
- dividerRight = false;
17828
- // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
17829
- /** frame 레이아웃 사용 여부 */
17830
- useFrame = false;
17831
- handleFieldChange(_newField, oldField) {
17832
- this.syncSlotName();
17833
- this.syncSpanRegistration();
17834
- this.syncCellClassRegistration(oldField);
17835
- this.syncUseFrameRegistration(oldField);
17836
- }
17837
- handleRowKeyChange(_newKey, oldKey) {
17838
- this.syncSlotName();
17839
- this.syncSpanRegistration();
17840
- this.syncCellClassRegistration(undefined, oldKey);
17841
- this.syncUseFrameRegistration(undefined, oldKey);
17842
- }
17843
- handleSpanChange() {
17844
- this.syncSpanRegistration();
17845
- }
17846
- handleSdClassChange() {
17847
- this.syncCellClassRegistration();
17848
- }
17849
- handleDividerChange() {
17850
- this.syncCellClassRegistration();
17851
- }
17852
- handleUseFrameChange() {
17853
- this.syncUseFrameRegistration();
17854
- this.requestParentTrUpdate();
17855
- }
17856
- componentWillLoad() {
17857
- this.syncSlotName();
17858
- this.syncSpanRegistration();
17859
- this.syncCellClassRegistration();
17860
- this.syncUseFrameRegistration();
17861
- // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
17862
- const parentTr = this.el.parentElement;
17863
- if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
17864
- }
17865
- componentDidLoad() {
17866
- this.syncSlotName();
17867
- this.syncSpanRegistration();
17868
- this.syncCellClassRegistration();
17869
- this.syncUseFrameRegistration();
17870
- }
17871
- // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
17872
- // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
17873
- // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
17874
- connectedCallback() {
17875
- this.syncSpanRegistration();
17876
- this.syncCellClassRegistration();
17877
- this.syncUseFrameRegistration();
17878
- }
17879
- disconnectedCallback() {
17880
- const table = this.findTable();
17881
- if (table != null && this.field !== '' && this.rowKey != null) {
17882
- table.unregisterSpanSync?.(String(this.rowKey), this.field);
17883
- table.unregisterCellClassSync?.(String(this.rowKey), this.field);
17884
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
17885
- this.requestParentTrUpdate();
17886
- }
17887
- }
17888
- findTable() {
17889
- return this.el.closest('sd-table');
17890
- }
17891
- requestParentTrUpdate() {
17892
- const parentTr = this.el.parentElement;
17893
- if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
17894
- return;
17895
- const trAny = parentTr;
17896
- if (typeof trAny.bumpSpansVersion === 'function') {
17897
- trAny.bumpSpansVersion();
17898
- }
17899
- }
17900
- syncSpanRegistration() {
17901
- const table = this.findTable();
17902
- if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
17903
- return;
17904
- const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
17905
- const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
17906
- table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
17907
- this.requestParentTrUpdate();
17908
- }
17909
- // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
17910
- syncCellClassRegistration(prevField, prevRowKey) {
17911
- const table = this.findTable();
17912
- if (!table)
17913
- return;
17914
- const oldField = prevField ?? this.field;
17915
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17916
- if (oldField !== '' && oldRowKey != null) {
17917
- table.unregisterCellClassSync?.(oldRowKey, oldField);
17918
- }
17919
- if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
17920
- return;
17921
- const combinedClass = [
17922
- this.sdClass,
17923
- this.dividerLeft && 'td--divider-left',
17924
- this.dividerRight && 'td--divider-right',
17925
- ]
17926
- .filter(Boolean)
17927
- .join(' ') || undefined;
17928
- table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
17929
- this.requestParentTrUpdate();
17930
- }
17931
- syncUseFrameRegistration(prevField, prevRowKey) {
17932
- const table = this.findTable();
17933
- if (!table)
17934
- return;
17935
- const oldField = prevField ?? this.field;
17936
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17937
- if (oldField !== '' && oldRowKey != null) {
17938
- table.unregisterUseFrameSync?.(oldRowKey, oldField);
17939
- }
17940
- if (this.field === '' || this.rowKey == null)
17941
- return;
17942
- if (this.useFrame) {
17943
- table.registerUseFrameSync?.(String(this.rowKey), this.field);
17944
- }
17945
- else {
17946
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
17947
- }
17948
- }
17949
- syncSlotName() {
17950
- const table = this.el.closest('sd-table');
17951
- const fromMethod = table?.getTableIdSync?.();
17952
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17953
- const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17954
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17955
- '';
17956
- if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
17957
- this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
17958
- }
17959
- }
17960
- render() {
17961
- return (hAsync(Host, { key: '2fce45ffda30fd75a0c0ef2ff0de5896c409c108', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '3e2131547d544d01c745017f3375a26df35a9d6e' })));
17962
- }
17963
- static get watchers() { return {
17964
- "field": [{
17965
- "handleFieldChange": 0
17966
- }],
17967
- "rowKey": [{
17968
- "handleRowKeyChange": 0
17969
- }],
17970
- "rowspan": [{
17971
- "handleSpanChange": 0
17972
- }],
17973
- "colspan": [{
17974
- "handleSpanChange": 0
17975
- }],
17976
- "sdClass": [{
17977
- "handleSdClassChange": 0
17978
- }],
17979
- "dividerLeft": [{
17980
- "handleDividerChange": 0
17981
- }],
17982
- "dividerRight": [{
17983
- "handleDividerChange": 0
17984
- }],
17985
- "useFrame": [{
17986
- "handleUseFrameChange": 0
17987
- }]
17988
- }; }
17989
- static get style() { return sdTdCss(); }
17990
- static get cmpMeta() { return {
17991
- "$flags$": 772,
17992
- "$tagName$": "sd-td",
17993
- "$members$": {
17994
- "field": [1],
17995
- "rowKey": [1, "row-key"],
17996
- "align": [1],
17997
- "rowspan": [2],
17998
- "colspan": [2],
17999
- "sdClass": [1, "sd-class"],
18000
- "dividerLeft": [4, "divider-left"],
18001
- "dividerRight": [4, "divider-right"],
18002
- "useFrame": [4, "use-frame"]
18003
- },
18004
- "$listeners$": undefined,
18005
- "$lazyBundleId$": "-",
18006
- "$attrsToReflect$": []
18007
- }; }
18008
- }
18009
-
18010
16705
  const textLink = {
18011
16706
  sm: {
18012
16707
  gap: "4",
@@ -18295,7 +16990,7 @@ class SdTextarea {
18295
16990
  nativeEl = undefined;
18296
16991
  formField;
18297
16992
  /** 폼 연동용 name 속성 */
18298
- name = nanoid$1();
16993
+ name = nanoid();
18299
16994
  /** 값이 변경될 때 발생합니다. */
18300
16995
  input;
18301
16996
  /** 포커스될 때 발생합니다. */
@@ -18376,7 +17071,7 @@ class SdTextarea {
18376
17071
  '--sd-system-size-field-sm-height': 'auto',
18377
17072
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
18378
17073
  };
18379
- return (hAsync("sd-field", { key: '7adbc4a04c59f162182c87dfcccca82ec0dd4484', 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: 'd4d6c7b39595b40ab6f584aab2b46f4aca184477', class: "sd-textarea__content" }, hAsync("textarea", { key: 'ea2b0526aecd0dd095a9fef6dd0225d6bddc4926', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
17074
+ return (hAsync("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, hAsync("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
18380
17075
  }
18381
17076
  static get watchers() { return {
18382
17077
  "value": [{
@@ -18430,370 +17125,6 @@ class SdTextarea {
18430
17125
  }; }
18431
17126
  }
18432
17127
 
18433
- 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}`;
18434
-
18435
- class SdThead {
18436
- constructor(hostRef) {
18437
- registerInstance(this, hostRef);
18438
- this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
18439
- }
18440
- get el() { return getElement(this); }
18441
- /** 테이블 컬럼 목록 */
18442
- columns;
18443
- /** 행 선택 기능 사용 여부 */
18444
- selectable;
18445
- /** 컬럼 너비 조절 가능 여부 */
18446
- resizable;
18447
- /** 고정 컬럼 설정 */
18448
- stickyColumn;
18449
- /** 헤더 고정 여부 */
18450
- stickyHeader;
18451
- /** 좌측 스크롤 여부 */
18452
- scrolledLeft;
18453
- /** 우측 스크롤 여부 */
18454
- scrolledRight;
18455
- /** 전체 선택 체크박스용 행 데이터 */
18456
- rows = [];
18457
- /** 컬럼 너비 목록 */
18458
- columnWidths = [];
18459
- /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
18460
- sdColumnSort;
18461
- tableId = '';
18462
- _columns = [];
18463
- _selectable = false;
18464
- _resizable = false;
18465
- _stickyColumn = { left: 0, right: 0 };
18466
- _stickyHeader = false;
18467
- _scrolledLeft = false;
18468
- _scrolledRight = false;
18469
- dropdownOpenMap = {};
18470
- tableEl = null;
18471
- dropdownRefs = {};
18472
- dropdownThRefs = {};
18473
- dropdownPortals = {};
18474
- handleColumnsChange(newCols) {
18475
- if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
18476
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
18477
- }
18478
- }
18479
- disconnectedCallback() {
18480
- const portals = this.dropdownPortals ?? {};
18481
- Object.values(portals).forEach(portal => {
18482
- if (portal?.parentNode != null)
18483
- portal.parentNode.removeChild(portal);
18484
- });
18485
- }
18486
- componentWillLoad() {
18487
- this.syncTableContext();
18488
- this.dropdownOpenMap = this.dropdownOpenMap ?? {};
18489
- this.dropdownRefs = this.dropdownRefs ?? {};
18490
- this.dropdownThRefs = this.dropdownThRefs ?? {};
18491
- this.dropdownPortals = this.dropdownPortals ?? {};
18492
- this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
18493
- this.resolveConfig();
18494
- if ((this.columnWidths ?? []).length === 0) {
18495
- this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
18496
- }
18497
- }
18498
- componentDidLoad() {
18499
- this.syncTableContext();
18500
- this.resolveConfig();
18501
- this.initDropdownPortals();
18502
- }
18503
- // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
18504
- // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
18505
- initDropdownPortals() {
18506
- const cols = this._columns ?? [];
18507
- const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
18508
- if (hasDropdownCols.length === 0)
18509
- return;
18510
- for (const col of hasDropdownCols) {
18511
- const colName = col.name;
18512
- // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
18513
- if ((this.dropdownPortals ?? {})[colName] != null)
18514
- continue;
18515
- const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
18516
- if (slotContent == null)
18517
- continue;
18518
- // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
18519
- slotContent.removeAttribute('slot');
18520
- const portal = document.createElement('sd-portal');
18521
- portal.parentRef = this.dropdownThRefs[colName] ?? null;
18522
- portal.open = false;
18523
- // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
18524
- // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
18525
- portal.style.display = 'none';
18526
- portal.addEventListener('sdClose', () => this.closeDropdown(colName));
18527
- portal.appendChild(slotContent);
18528
- document.body.appendChild(portal);
18529
- this.dropdownPortals[colName] = portal;
18530
- }
18531
- }
18532
- syncTableContext() {
18533
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
18534
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
18535
- const closest = this.el.closest('sd-table');
18536
- const root = this.el.getRootNode();
18537
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
18538
- const table = closest ?? fromShadow;
18539
- this.tableEl = table;
18540
- const fromMethod = table?.getTableIdSync?.();
18541
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
18542
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
18543
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
18544
- '';
18545
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
18546
- this.tableId = resolvedTableId;
18547
- }
18548
- }
18549
- resolveConfig() {
18550
- const config = this.tableEl?.getConfigSync?.();
18551
- const resolvedColumns = Array.isArray(this.columns)
18552
- ? this.columns
18553
- : Array.isArray(config?.columns)
18554
- ? config.columns
18555
- : [];
18556
- this._columns = resolvedColumns;
18557
- this._selectable = this.selectable ?? config?.selectable ?? false;
18558
- this._resizable = this.resizable ?? config?.resizable ?? false;
18559
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
18560
- this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
18561
- this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
18562
- this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
18563
- if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
18564
- this.columnWidths = [...config.columnWidths];
18565
- }
18566
- if (!Array.isArray(this.columnWidths)) {
18567
- this.columnWidths = [];
18568
- }
18569
- }
18570
- /** 테이블 설정을 다시 불러옵니다. */
18571
- async refreshConfig() {
18572
- this.resolveConfig();
18573
- this.initDropdownPortals();
18574
- }
18575
- /** 컬럼 너비를 업데이트합니다. */
18576
- async setColumnWidths(widths) {
18577
- this.columnWidths = Array.isArray(widths) ? widths : [];
18578
- }
18579
- /** 전체 선택 체크박스 상태를 갱신합니다. */
18580
- async refreshSelection() {
18581
- const checkbox = this.el.querySelector('sd-checkbox');
18582
- if (checkbox) {
18583
- checkbox.value = this.getIsAllChecked();
18584
- }
18585
- }
18586
- get visibleColumns() {
18587
- return this._columns.filter(col => col.visible !== false);
18588
- }
18589
- getStickyStyle(colIdx) {
18590
- if (this.tableEl?.getStickyStyleSync) {
18591
- return this.tableEl.getStickyStyleSync(colIdx);
18592
- }
18593
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
18594
- (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
18595
- const rightOffset = this.columnWidths
18596
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
18597
- .reduce((a, b) => a + b, 0);
18598
- const col = this.visibleColumns[colIdx];
18599
- const base = {
18600
- '--sticky-left-offset': `${leftOffset}px`,
18601
- '--sticky-right-offset': `${rightOffset}px`,
18602
- };
18603
- if (!col?.autoWidth) {
18604
- base['width'] = `${this.columnWidths[colIdx]}px`;
18605
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
18606
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
18607
- }
18608
- return base;
18609
- }
18610
- handleResize(index, event, reversed = false) {
18611
- if (this.tableEl?.handleResize) {
18612
- this.tableEl.handleResize(index, event, reversed);
18613
- }
18614
- }
18615
- handleColumnSort = (col) => {
18616
- this.sdColumnSort.emit({ column: col });
18617
- };
18618
- toggleDropdown(name) {
18619
- const isOpen = this.dropdownOpenMap[name] !== true;
18620
- const portals = this.dropdownPortals ?? {};
18621
- const newMap = { ...this.dropdownOpenMap };
18622
- // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
18623
- for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
18624
- const shouldBeOpen = col.name === name ? isOpen : false;
18625
- newMap[col.name] = shouldBeOpen;
18626
- const portal = portals[col.name];
18627
- if (portal != null)
18628
- portal.open = shouldBeOpen;
18629
- }
18630
- this.dropdownOpenMap = newMap;
18631
- }
18632
- closeDropdown(name) {
18633
- if (this.dropdownOpenMap[name] !== true)
18634
- return;
18635
- this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
18636
- const portal = (this.dropdownPortals ?? {})[name];
18637
- if (portal != null)
18638
- portal.open = false;
18639
- }
18640
- handleSelectAll(checked) {
18641
- const nextChecked = !!checked;
18642
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18643
- if (this.tableEl?.toggleSelectAllSync) {
18644
- this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
18645
- }
18646
- }
18647
- getIsAllChecked() {
18648
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18649
- if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
18650
- return this.tableEl.getIsAllCheckedSync(safeRows);
18651
- }
18652
- return false;
18653
- }
18654
- render() {
18655
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18656
- const dropdownOpenMap = this.dropdownOpenMap ?? {};
18657
- const dropdownRefs = this.dropdownRefs ?? {};
18658
- const stickyLeftCount = this._stickyColumn.left || 0;
18659
- const stickyRightCount = this._stickyColumn.right || 0;
18660
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
18661
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18662
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18663
- const lastColIdx = this.visibleColumns.length - 1;
18664
- const headStyle = {
18665
- '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
18666
- '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
18667
- '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
18668
- '--table-header-bg': TABLE_HEADER_COLORS.bg,
18669
- '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
18670
- '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
18671
- '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
18672
- '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
18673
- '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
18674
- '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
18675
- '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
18676
- '--table-border-color': TABLE_BORDER.color,
18677
- '--table-border-width': `${TABLE_BORDER.width}px`,
18678
- };
18679
- return (hAsync(Host, { key: 'ec85c86aa6d93e5a2405262809bf790fbb12ee79', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '8afbdf4d81ebb649e262baa6da8ce3a1eca31e15', class: {
18680
- 'thead': true,
18681
- 'thead--sticky': this._stickyHeader,
18682
- } }, hAsync("tr", { key: '9643f19e95aa00f5bb5d6462ecb0da4ca95c3dcc', class: "tr" }, this._selectable && (hAsync("th", { key: '6d87ceb557e61454eaf0acf492234788bfd99235', class: {
18683
- 'th': true,
18684
- 'th--selected': true,
18685
- 'sticky-left': true,
18686
- 'sticky-left-edge': stickyLeftCount === 0,
18687
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18688
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { key: 'c2dc4e112510bb9ab13109fd966cd0485588835a', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), hAsync("div", { key: '478a665c0d06efc829e4f2818be4be1b43e44708', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (hAsync("th", { key: col.name, class: {
18689
- 'th': true,
18690
- [`${col.thClass}`]: Boolean(col.thClass),
18691
- 'sticky-left': true,
18692
- 'sticky-left-edge': idx === stickyLeftCount - 1,
18693
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18694
- 'th--has-dropdown': col.hasDropdown === true,
18695
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
18696
- ? el => {
18697
- this.dropdownThRefs[col.name] = el;
18698
- }
18699
- : 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) => {
18700
- e.stopPropagation();
18701
- this.handleColumnSort(col);
18702
- }, 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: {
18703
- 'th__dropdown-trigger': true,
18704
- 'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
18705
- }, ref: el => {
18706
- dropdownRefs[col.name] = el;
18707
- }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
18708
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18709
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18710
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
18711
- const actualColIdx = stickyLeftCount + relativeIdx;
18712
- return (hAsync("th", { key: col.name, class: {
18713
- 'th': true,
18714
- [`${col.thClass}`]: Boolean(col.thClass),
18715
- 'th--has-dropdown': col.hasDropdown === true,
18716
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18717
- ? el => {
18718
- this.dropdownThRefs[col.name] = el;
18719
- }
18720
- : 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) => {
18721
- e.stopPropagation();
18722
- this.handleColumnSort(col);
18723
- }, 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: {
18724
- 'th__dropdown-trigger': true,
18725
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18726
- }, ref: el => {
18727
- this.dropdownRefs[col.name] = el;
18728
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
18729
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18730
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18731
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
18732
- }), stickyRightCols.map((col, relativeIdx) => {
18733
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
18734
- return (hAsync("th", { key: col.name, class: {
18735
- 'th': true,
18736
- [`${col.thClass}`]: Boolean(col.thClass),
18737
- 'sticky-right': true,
18738
- 'sticky-right-edge': relativeIdx === 0,
18739
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
18740
- 'th--has-dropdown': col.hasDropdown === true,
18741
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18742
- ? el => {
18743
- this.dropdownThRefs[col.name] = el;
18744
- }
18745
- : 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) => {
18746
- e.stopPropagation();
18747
- this.handleColumnSort(col);
18748
- }, 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: {
18749
- 'th__dropdown-trigger': true,
18750
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18751
- }, ref: el => {
18752
- this.dropdownRefs[col.name] = el;
18753
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
18754
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18755
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18756
- hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
18757
- })))));
18758
- }
18759
- static get watchers() { return {
18760
- "columns": [{
18761
- "handleColumnsChange": 0
18762
- }]
18763
- }; }
18764
- static get style() { return sdTheadCss(); }
18765
- static get cmpMeta() { return {
18766
- "$flags$": 512,
18767
- "$tagName$": "sd-thead",
18768
- "$members$": {
18769
- "columns": [16],
18770
- "selectable": [4],
18771
- "resizable": [4],
18772
- "stickyColumn": [16],
18773
- "stickyHeader": [4, "sticky-header"],
18774
- "scrolledLeft": [4, "scrolled-left"],
18775
- "scrolledRight": [4, "scrolled-right"],
18776
- "rows": [16],
18777
- "columnWidths": [1040],
18778
- "tableId": [32],
18779
- "_columns": [32],
18780
- "_selectable": [32],
18781
- "_resizable": [32],
18782
- "_stickyColumn": [32],
18783
- "_stickyHeader": [32],
18784
- "_scrolledLeft": [32],
18785
- "_scrolledRight": [32],
18786
- "dropdownOpenMap": [32],
18787
- "refreshConfig": [64],
18788
- "setColumnWidths": [64],
18789
- "refreshSelection": [64]
18790
- },
18791
- "$listeners$": undefined,
18792
- "$lazyBundleId$": "-",
18793
- "$attrsToReflect$": []
18794
- }; }
18795
- }
18796
-
18797
17128
  const toast = {
18798
17129
  icon: "16",
18799
17130
  "default": {
@@ -18885,12 +17216,12 @@ class SdToast {
18885
17216
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
18886
17217
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
18887
17218
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
18888
- return (hAsync("div", { key: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', style: {
17219
+ return (hAsync("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
18889
17220
  '--sd-toast-bg': typeConfig.bg,
18890
17221
  '--sd-toast-text': typeConfig.content,
18891
17222
  '--sd-toast-icon': iconColor,
18892
17223
  '--sd-toast-link': linkColor,
18893
- } }, hAsync("div", { key: '54eddcc1fe8a0eab427a084e589c0f9a2e0412bf', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '0ff05c4e7cb8dda2f2732cd09bfc586cb21020b6', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '41e1e259ef605454ee680bbd3228c418f013283e', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: '7db4e1bc0ce80bd1887476ac728a7999cb4fee93', class: "sd-toast__content" }, hAsync("span", { key: '88925dfa075a5da813466a74a0f5fa4cb61e3bc9', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '068aaf887a6fe8c18f7db6e513778d862e09bd56', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: 'fb066d2cfaad7668aec48caafc6eb6d6e19ebaee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: 'e610479efe5034a222aa98d19232682243214ee0', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
17224
+ } }, hAsync("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, hAsync("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
18894
17225
  }
18895
17226
  static get style() { return sdToastCss(); }
18896
17227
  static get cmpMeta() { return {
@@ -19152,7 +17483,7 @@ class SdToastContainer {
19152
17483
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
19153
17484
  const indexMap = new Map();
19154
17485
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
19155
- return (hAsync("div", { key: '17526924c57e06a77725f66233f5b5360097fac0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17486
+ return (hAsync("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
19156
17487
  this.expanded = true;
19157
17488
  this.pauseTimers();
19158
17489
  }, onMouseLeave: () => {
@@ -19313,7 +17644,7 @@ class SdToggle {
19313
17644
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
19314
17645
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
19315
17646
  };
19316
- return (hAsync("label", { key: '2b988ca6148da376d9af21538b03764423cb3a0a', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: 'b1bd161b88a627ba296197902d46181925511c70', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
17647
+ return (hAsync("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
19317
17648
  }
19318
17649
  static get style() { return sdToggleCss(); }
19319
17650
  static get cmpMeta() { return {
@@ -19501,7 +17832,7 @@ class SdTooltip {
19501
17832
  const bodyHTML = this.message && this.message.length > 0
19502
17833
  ? this.message.map(line => `<div>${line}</div>`).join('')
19503
17834
  : this.slotContentHTML;
19504
- return (hAsync(Fragment, { key: '682acd0035e35645b1ddcb5b9bfa796f135d26ce' }, hAsync("div", { key: '63550c550389759026812d624bfb8fc152a61dfa', 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: '84c71d8f766d79831e262810918085de1cb76a69', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '622676ac69e0563623a7dfa6ebb9f8d0b8d7761d', ref: el => (this.menuEl = el), class: {
17835
+ return (hAsync(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, hAsync("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
19505
17836
  'sd-floating-menu': true,
19506
17837
  [`sd-floating-menu--${tooltipType}`]: true,
19507
17838
  [`sd-floating-menu--${placement}`]: true,
@@ -19509,7 +17840,7 @@ class SdTooltip {
19509
17840
  }, style: {
19510
17841
  '--sd-floating-bg': typeConfig.bg,
19511
17842
  '--sd-floating-content': typeConfig.content,
19512
- }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'e81b686f152e408e7affc9181e2a19cb0aece8cd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'a91ee4a5c1b2564b63d061c32f5013be6f28b0d0' })), hAsync("div", { key: '77671787b0ee0beb851c7a35a04f8df826b268a8', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '74e41984b8589dba31feb6f269c4ce7ed8fe3c6f', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
17843
+ }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), hAsync("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
19513
17844
  }
19514
17845
  static get style() { return sdTooltipCss(); }
19515
17846
  static get cmpMeta() { return {
@@ -19544,313 +17875,6 @@ class SdTooltip {
19544
17875
  }; }
19545
17876
  }
19546
17877
 
19547
- 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)}`;
19548
-
19549
- class SdTr {
19550
- constructor(hostRef) {
19551
- registerInstance(this, hostRef);
19552
- }
19553
- get el() { return getElement(this); }
19554
- /** 테이블 컬럼 목록 */
19555
- columns;
19556
- /** 행 선택 기능 사용 여부 */
19557
- selectable;
19558
- /** 고정 컬럼 설정 */
19559
- stickyColumn;
19560
- /** 행 식별 키 */
19561
- rowKey = '';
19562
- /** 행 데이터 객체 */
19563
- row = {};
19564
- /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
19565
- separator = null;
19566
- tableId = '';
19567
- columnWidths = [];
19568
- isVisible = true;
19569
- spansVersion = 0;
19570
- _columns = [];
19571
- _selectable = false;
19572
- _stickyColumn = { left: 0, right: 0 };
19573
- _scrolledLeft = false;
19574
- _scrolledRight = false;
19575
- _dense = false;
19576
- tableEl = null;
19577
- componentWillLoad() {
19578
- this.row = this.row ?? {};
19579
- this.syncTableContext();
19580
- this.columnWidths = this.columnWidths ?? [];
19581
- this.resolveConfig();
19582
- this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
19583
- this.updateVisibilitySync();
19584
- }
19585
- componentDidLoad() {
19586
- this.syncTableContext();
19587
- }
19588
- syncTableContext() {
19589
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
19590
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
19591
- const closest = this.el.closest('sd-table');
19592
- const root = this.el.getRootNode();
19593
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
19594
- const table = closest ?? fromShadow;
19595
- this.tableEl = table;
19596
- const fromMethod = table?.getTableIdSync?.();
19597
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
19598
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
19599
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
19600
- '';
19601
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
19602
- this.tableId = resolvedTableId;
19603
- }
19604
- }
19605
- resolveConfig() {
19606
- const config = this.tableEl?.getConfigSync?.();
19607
- this._columns = this.columns ?? config?.columns ?? [];
19608
- this._selectable = this.selectable ?? config?.selectable ?? false;
19609
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
19610
- this._scrolledLeft = config?.scrolledLeft ?? false;
19611
- this._scrolledRight = config?.scrolledRight ?? false;
19612
- this._dense = config?.dense ?? false;
19613
- if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
19614
- this.columnWidths = [...config.columnWidths];
19615
- }
19616
- }
19617
- /** 테이블 설정을 다시 불러옵니다. */
19618
- async refreshConfig() {
19619
- this.resolveConfig();
19620
- }
19621
- /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
19622
- async bumpSpansVersion() {
19623
- this.spansVersion = this.spansVersion + 1;
19624
- }
19625
- /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
19626
- async updateVisibility() {
19627
- this.updateVisibilitySync();
19628
- }
19629
- updateVisibilitySync() {
19630
- const rowIndex = parseInt(this.rowKey, 10);
19631
- const pageInfo = this.tableEl?.getPaginationInfoSync?.();
19632
- if (!pageInfo) {
19633
- this.isVisible = true;
19634
- return;
19635
- }
19636
- this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
19637
- }
19638
- /** 컬럼 너비를 업데이트합니다. */
19639
- async setColumnWidths(widths) {
19640
- this.columnWidths = widths;
19641
- }
19642
- /** 체크박스 선택 상태를 갱신합니다. */
19643
- async refreshSelection() {
19644
- const checkbox = this.el.querySelector('sd-checkbox');
19645
- if (checkbox) {
19646
- checkbox.value = this.isSelected();
19647
- }
19648
- }
19649
- get visibleColumns() {
19650
- return this._columns.filter(col => col.visible !== false);
19651
- }
19652
- formatValue(value) {
19653
- if (value === null || value === undefined) {
19654
- return '';
19655
- }
19656
- if (typeof value === 'number') {
19657
- return value.toLocaleString();
19658
- }
19659
- return String(value);
19660
- }
19661
- getCellValue(column) {
19662
- const { field, format, name } = column;
19663
- const value = typeof field === 'function'
19664
- ? field(this.row)
19665
- : field !== ''
19666
- ? this.row[field]
19667
- : this.row[name];
19668
- return format ? format(value, this.row) : this.formatValue(value);
19669
- }
19670
- getStickyStyle(colIdx) {
19671
- if (this.tableEl?.getStickyStyleSync) {
19672
- return this.tableEl.getStickyStyleSync(colIdx);
19673
- }
19674
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
19675
- const rightOffset = this.columnWidths
19676
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
19677
- .reduce((a, b) => a + b, 0);
19678
- const col = this.visibleColumns[colIdx];
19679
- const base = {
19680
- '--sticky-left-offset': `${leftOffset}px`,
19681
- '--sticky-right-offset': `${rightOffset}px`,
19682
- };
19683
- if (!col?.autoWidth) {
19684
- base['width'] = `${this.columnWidths[colIdx]}px`;
19685
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
19686
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
19687
- }
19688
- return base;
19689
- }
19690
- isSelected() {
19691
- if (this.tableEl?.isRowSelectedSync) {
19692
- return this.tableEl.isRowSelectedSync(this.row);
19693
- }
19694
- return false;
19695
- }
19696
- handleSelect() {
19697
- if (this.tableEl?.updateRowSelectSync) {
19698
- this.tableEl.updateRowSelectSync(this.row);
19699
- }
19700
- }
19701
- getSpanFor(col) {
19702
- if (!this.tableEl?.getSpanSync)
19703
- return undefined;
19704
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19705
- return this.tableEl.getSpanSync(this.rowKey, fieldName);
19706
- }
19707
- isCovered(colIdx) {
19708
- if (!this.tableEl?.isCoveredSync)
19709
- return false;
19710
- return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
19711
- }
19712
- getCellClassFor(col) {
19713
- if (!this.tableEl?.getCellClassSync)
19714
- return undefined;
19715
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19716
- return this.tableEl.getCellClassSync(this.rowKey, fieldName);
19717
- }
19718
- getFramePaddingStyle(field) {
19719
- if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
19720
- return undefined;
19721
- return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
19722
- }
19723
- expandCellClass(classStr) {
19724
- if (classStr == null || classStr === '')
19725
- return {};
19726
- return Object.fromEntries(classStr
19727
- .split(/\s+/)
19728
- .filter(Boolean)
19729
- .map(c => [c, true]));
19730
- }
19731
- render() {
19732
- const stickyLeftCount = this._stickyColumn.left || 0;
19733
- const stickyRightCount = this._stickyColumn.right || 0;
19734
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
19735
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
19736
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
19737
- const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
19738
- const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
19739
- const effectiveDense = this._dense && !isUseFrameRow;
19740
- const rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
19741
- const rowPaddingX = this._dense && isUseFrameRow ? TABLE_BODY_LAYOUT.paddingX : TABLE_BODY_LAYOUT.paddingX;
19742
- const rowStyle = {
19743
- 'display': this.isVisible ? '' : 'none',
19744
- '--table-body-height': `${rowLayoutY.height}px`,
19745
- '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
19746
- '--table-body-padding-x': `${rowPaddingX}px`,
19747
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
19748
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
19749
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
19750
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
19751
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
19752
- '--table-border-color': TABLE_BORDER.color,
19753
- '--table-border-width': `${TABLE_BORDER.width}px`,
19754
- '--table-separator-color': TABLE_SEPARATOR.color,
19755
- '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
19756
- '--table-separator-dense-width': `${TABLE_SEPARATOR.denseWidth}px`,
19757
- };
19758
- if (this.separator != null) {
19759
- const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
19760
- const isDense = this.separator === 4;
19761
- 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" }))));
19762
- }
19763
- return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
19764
- 'td': true,
19765
- 'td--selected': true,
19766
- 'sticky-left': true,
19767
- 'sticky-left-edge': stickyLeftCount === 0,
19768
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
19769
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
19770
- if (this.isCovered(idx))
19771
- return null;
19772
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19773
- const span = this.getSpanFor(col);
19774
- const sdCellClass = this.getCellClassFor(col);
19775
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19776
- 'td': true,
19777
- [`td--${col.align || 'left'}`]: true,
19778
- 'sticky-left': true,
19779
- 'sticky-left-edge': idx === stickyLeftCount - 1,
19780
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
19781
- [`${col.tdClass}`]: Boolean(col.tdClass),
19782
- ...this.expandCellClass(sdCellClass),
19783
- }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19784
- }), middleCols.map((col, relativeIdx) => {
19785
- const actualColIdx = stickyLeftCount + relativeIdx;
19786
- if (this.isCovered(actualColIdx))
19787
- return null;
19788
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19789
- const span = this.getSpanFor(col);
19790
- const sdCellClass = this.getCellClassFor(col);
19791
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19792
- td: true,
19793
- [`td--${col.align || 'left'}`]: true,
19794
- [`${col.tdClass}`]: Boolean(col.tdClass),
19795
- ...this.expandCellClass(sdCellClass),
19796
- }, style: {
19797
- ...this.getStickyStyle(actualColIdx),
19798
- ...this.getFramePaddingStyle(fieldName),
19799
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19800
- }), stickyRightCols.map((col, relativeIdx) => {
19801
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
19802
- if (this.isCovered(actualColIdx))
19803
- return null;
19804
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19805
- const span = this.getSpanFor(col);
19806
- const sdCellClass = this.getCellClassFor(col);
19807
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19808
- 'td': true,
19809
- [`td--${col.align || 'left'}`]: true,
19810
- 'sticky-right': true,
19811
- 'sticky-right-edge': relativeIdx === 0,
19812
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
19813
- [`${col.tdClass}`]: Boolean(col.tdClass),
19814
- ...this.expandCellClass(sdCellClass),
19815
- }, style: {
19816
- ...this.getStickyStyle(actualColIdx),
19817
- ...this.getFramePaddingStyle(fieldName),
19818
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19819
- }))));
19820
- }
19821
- static get style() { return sdTrCss(); }
19822
- static get cmpMeta() { return {
19823
- "$flags$": 772,
19824
- "$tagName$": "sd-tr",
19825
- "$members$": {
19826
- "columns": [16],
19827
- "selectable": [4],
19828
- "stickyColumn": [16],
19829
- "rowKey": [1, "row-key"],
19830
- "row": [16],
19831
- "separator": [8],
19832
- "tableId": [32],
19833
- "columnWidths": [32],
19834
- "isVisible": [32],
19835
- "spansVersion": [32],
19836
- "_columns": [32],
19837
- "_selectable": [32],
19838
- "_stickyColumn": [32],
19839
- "_scrolledLeft": [32],
19840
- "_scrolledRight": [32],
19841
- "_dense": [32],
19842
- "refreshConfig": [64],
19843
- "bumpSpansVersion": [64],
19844
- "updateVisibility": [64],
19845
- "setColumnWidths": [64],
19846
- "refreshSelection": [64]
19847
- },
19848
- "$listeners$": undefined,
19849
- "$lazyBundleId$": "-",
19850
- "$attrsToReflect$": []
19851
- }; }
19852
- }
19853
-
19854
17878
  registerComponents([
19855
17879
  SdActionModal,
19856
17880
  SdBadge,
@@ -19898,19 +17922,14 @@ registerComponents([
19898
17922
  SdSelectListbox,
19899
17923
  SdSelectTrigger,
19900
17924
  SdSwitch,
19901
- SdTable,
19902
17925
  SdTabs,
19903
17926
  SdTag,
19904
- SdTbody,
19905
- SdTd,
19906
17927
  SdTextLink,
19907
17928
  SdTextarea,
19908
- SdThead,
19909
17929
  SdToast,
19910
17930
  SdToastContainer,
19911
17931
  SdToggle,
19912
17932
  SdTooltip,
19913
- SdTr,
19914
17933
  ]);
19915
17934
 
19916
17935
  exports.hydrateApp = hydrateApp;