@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.js CHANGED
@@ -131,12 +131,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
131
131
  /*hydrateAppClosure start*/
132
132
 
133
133
 
134
- var node_crypto = require('node:crypto');
135
-
136
134
  const NAMESPACE = 'design-system';
137
135
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
138
136
 
139
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-ghost-button-ghost-button-group-gap: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}";
137
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-neutral-bright:#F9F9F9;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-ghost-button-ghost-button-group-gap:8px;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-text-link-text-link-group-horizontal-normal:16px;--sd-text-link-text-link-group-horizontal-wide:24px;--sd-text-link-text-link-group-vertical-normal:4px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-toggle-toggle-group-gap:8px;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-checkbox-checkbox-group-gap-horizontal:24px;--sd-checkbox-checkbox-group-gap-vertical:8px;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-radio-group-gap-horizontal:24px;--sd-radio-radio-group-gap-vertical:8px;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:16px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-number-input-number-input-stepper-border-default:#93C4FF;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-datepicker-datepicker-calendar-time-bg-default:#F9F9F9;--sd-datepicker-datepicker-calendar-time-bg-selected:#F5FAFF;--sd-datepicker-datepicker-calendar-time-date-label:#222222;--sd-datepicker-datepicker-calendar-time-date-unit:#888888;--sd-datepicker-datepicker-calendar-time-date-gap:6px;--sd-datepicker-datepicker-calendar-time-radius:8px;--sd-datepicker-datepicker-calendar-time-padding-x:16px;--sd-datepicker-datepicker-calendar-time-padding-y:12px;--sd-datepicker-datepicker-calendar-time-gap:12px;--sd-datepicker-datepicker-calendar-time-section-gap:12px;--sd-datepicker-datepicker-calendar-time-unit-gap:2px;--sd-datepicker-datepicker-calendar-time-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-time-typography-font-weight:500;--sd-datepicker-datepicker-calendar-time-typography-font-size:12px;--sd-datepicker-datepicker-calendar-time-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-time-typography-line-height:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#222222;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-timepicker-timepicker-border-default:#AAAAAA;--sd-timepicker-timepicker-border-focus:#0075FF;--sd-timepicker-timepicker-border-disabled:#CCCCCC;--sd-timepicker-timepicker-border-width:1px;--sd-timepicker-timepicker-bg-default:#FFFFFF;--sd-timepicker-timepicker-bg-disabled:#E1E1E1;--sd-timepicker-timepicker-icon-default:#888888;--sd-timepicker-timepicker-icon-disabled:#BBBBBB;--sd-timepicker-timepicker-text-default:#222222;--sd-timepicker-timepicker-text-disabled:#888888;--sd-timepicker-timepicker-selector-bg:#FFFFFF;--sd-timepicker-timepicker-selector-range-heading-color:#555555;--sd-timepicker-timepicker-selector-range-heading-gap:16px;--sd-timepicker-timepicker-selector-range-padding-x-y:24px;--sd-timepicker-timepicker-selector-range-panel-gap:24px;--sd-timepicker-timepicker-selector-range-section-gap:12px;--sd-timepicker-timepicker-selector-radius:8px;--sd-timepicker-timepicker-selector-section-padding-x:16px;--sd-timepicker-timepicker-selector-section-padding-y:12px;--sd-timepicker-timepicker-selector-time-gap:4px;--sd-timepicker-timepicker-selector-time-column-gap:8px;--sd-timepicker-timepicker-selector-input-width:40px;--sd-timepicker-timepicker-selector-colon-size:16px;--sd-timepicker-timepicker-sm-height:28px;--sd-timepicker-timepicker-sm-padding-x:12px;--sd-timepicker-timepicker-sm-gap:8px;--sd-timepicker-timepicker-sm-icon:16px;--sd-timepicker-timepicker-sm-radius:4px;--sd-timepicker-timepicker-md-height:36px;--sd-timepicker-timepicker-md-padding-x:16px;--sd-timepicker-timepicker-md-gap:12px;--sd-timepicker-timepicker-md-icon:20px;--sd-timepicker-timepicker-md-radius:6px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-tag-tag-group-gap:8px;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-overlay-overlay-header-bg:#FFFFFF;--sd-overlay-overlay-header-padding-x:24px;--sd-overlay-overlay-header-padding-y:20px;--sd-overlay-overlay-header-gap:12px;--sd-overlay-overlay-header-title-color:#033F59;--sd-overlay-overlay-header-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-overlay-overlay-header-title-typography-font-weight:700;--sd-overlay-overlay-header-title-typography-font-size:16px;--sd-overlay-overlay-header-title-typography-text-decoration:none;--sd-overlay-overlay-header-title-typography-line-height:26px;--sd-overlay-overlay-footer-bg-default:#FFFFFF;--sd-overlay-overlay-footer-bg-neutral:#F6F6F6;--sd-overlay-overlay-footer-padding-x:20px;--sd-overlay-overlay-footer-padding-y:8px;--sd-overlay-overlay-footer-gap:16px;--sd-overlay-overlay-footer-shadow-x:0px;--sd-overlay-overlay-footer-shadow-y:0px;--sd-overlay-overlay-footer-shadow-blur:24px;--sd-overlay-overlay-footer-shadow-spread:0px;--sd-overlay-overlay-footer-shadow-color:rgba(34,34,34,0.2);--sd-overlay-overlay-footer-shadow-type:dropShadow;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-header-padding-x:16px;--sd-popup-popup-header-padding-y:12px;--sd-popup-popup-bg:#EEEEEE;--sd-drawer-drawer-bg:#F6F6F6;--sd-drawer-drawer-body-border:#E1E1E1;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-progress-progress-inverse-color:#FFFFFF;--sd-progress-progress-inverse-opacity:40%;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-padding-y-dense:6px;--sd-table-table-body-padding-y-default:8px;--sd-table-table-body-padding-x-default:8px;--sd-table-table-body-padding-x-wide:16px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding-y:8px;--sd-table-table-key-value-body-padding-x-default:8px;--sd-table-table-key-value-body-padding-x-wide:16px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-pagination-pagination-simple-gap:8px;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-stepper-stepper-sm-sequence-size:20px;--sd-stepper-stepper-sm-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-active-font-weight:700;--sd-stepper-stepper-sm-typography-active-font-size:12px;--sd-stepper-stepper-sm-typography-active-line-height:20px;--sd-stepper-stepper-sm-typography-active-text-decoration:none;--sd-stepper-stepper-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-default-font-weight:500;--sd-stepper-stepper-sm-typography-default-font-size:12px;--sd-stepper-stepper-sm-typography-default-line-height:20px;--sd-stepper-stepper-sm-typography-default-text-decoration:none;--sd-stepper-stepper-dash-width:20px;--sd-stepper-stepper-dash-color:#888888;--sd-stepper-stepper-lg-sequence-size:24px;--sd-stepper-stepper-lg-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-active-font-weight:700;--sd-stepper-stepper-lg-typography-active-font-size:14px;--sd-stepper-stepper-lg-typography-active-line-height:24px;--sd-stepper-stepper-lg-typography-active-text-decoration:none;--sd-stepper-stepper-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-default-font-weight:500;--sd-stepper-stepper-lg-typography-default-font-size:14px;--sd-stepper-stepper-lg-typography-default-line-height:24px;--sd-stepper-stepper-lg-typography-default-text-decoration:none;--sd-stepper-stepper-container-gap:12px;--sd-stepper-stepper-item-gap:8px;--sd-stepper-stepper-sequence-radius:9999px;--sd-stepper-stepper-sequence-border-active:#93C4FF;--sd-stepper-stepper-sequence-border-default:#E1E1E1;--sd-stepper-stepper-sequence-border-completed:#CCCCCC;--sd-stepper-stepper-sequence-border-witdh:1px;--sd-stepper-stepper-sequence-icon:12px;--sd-stepper-stepper-sequence-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sequence-typography-font-weight:700;--sd-stepper-stepper-sequence-typography-font-size:12px;--sd-stepper-stepper-sequence-typography-line-height:20px;--sd-stepper-stepper-sequence-typography-text-decoration:none;--sd-stepper-stepper-sequence-bg-active:#D9EAFF;--sd-stepper-stepper-sequence-bg-default:#FFFFFF;--sd-stepper-stepper-sequence-bg-completed:#E1E1E1;--sd-stepper-stepper-sequence-text-active:#0075FF;--sd-stepper-stepper-sequence-text-default:#AAAAAA;--sd-stepper-stepper-text-active:#0075FF;--sd-stepper-stepper-text-default:#888888;--sd-gnb-light-bg:#FFFFFF;--sd-gnb-light-divider:#E1E1E1;--sd-gnb-light-item-bg-default:#FFFFFF;--sd-gnb-light-item-bg-hover:#F6F6F6;--sd-gnb-light-item-bg-selected:#EFF6FF;--sd-gnb-light-item-fg-default:#222222;--sd-gnb-light-item-fg-hover:#222222;--sd-gnb-light-item-fg-selected:#0075FF;--sd-gnb-light-item-chevron:#555555;--sd-gnb-light-top-icon:#888888;--sd-gnb-dark-bg:#001B39;--sd-gnb-dark-divider:#004177;--sd-gnb-dark-item-bg-default:#001B39;--sd-gnb-dark-item-bg-hover:#07284A;--sd-gnb-dark-item-bg-selected:#002B5E;--sd-gnb-dark-item-fg-default:#FFFFFF;--sd-gnb-dark-item-fg-hover:#FFFFFF;--sd-gnb-dark-item-fg-selected:#93C4FF;--sd-gnb-dark-item-chevron:#AAAAAA;--sd-gnb-dark-top-icon:#FFFFFF}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
140
138
 
141
139
  /*
142
140
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5135,15 +5133,6 @@ var registerComponents = (Cstrs) => {
5135
5133
  }
5136
5134
  };
5137
5135
  var win = window;
5138
- var readTask = (cb) => {
5139
- nextTick(() => {
5140
- try {
5141
- cb();
5142
- } catch (e) {
5143
- consoleError(e);
5144
- }
5145
- });
5146
- };
5147
5136
  var writeTask = (cb) => {
5148
5137
  nextTick(() => {
5149
5138
  try {
@@ -5426,13 +5415,13 @@ class SdBadge {
5426
5415
  }
5427
5416
 
5428
5417
  /* @ts-self-types="./index.d.ts" */
5429
- let urlAlphabet$1 =
5418
+ let urlAlphabet =
5430
5419
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
5431
- let nanoid$1 = (size = 21) => {
5420
+ let nanoid = (size = 21) => {
5432
5421
  let id = '';
5433
5422
  let i = size | 0;
5434
5423
  while (i--) {
5435
- id += urlAlphabet$1[(Math.random() * 64) | 0];
5424
+ id += urlAlphabet[(Math.random() * 64) | 0];
5436
5425
  }
5437
5426
  return id
5438
5427
  };
@@ -5575,7 +5564,7 @@ class SdBarcodeInput {
5575
5564
  nativeEl = undefined;
5576
5565
  formField;
5577
5566
  /** 폼 연동용 name 속성 */
5578
- name = nanoid$1();
5567
+ name = nanoid();
5579
5568
  /** 입력값 변경 시 발생합니다. */
5580
5569
  input;
5581
5570
  /** 포커스 진입 시 발생합니다. */
@@ -6792,8 +6781,7 @@ const datepicker = {
6792
6781
  group: {
6793
6782
  gap: "12"
6794
6783
  }
6795
- }
6796
- }
6784
+ }}
6797
6785
  };
6798
6786
  var datepickerTokens = {
6799
6787
  datepicker: datepicker
@@ -7395,8 +7383,7 @@ const checkbox = {
7395
7383
  },
7396
7384
  border: {
7397
7385
  disabled: "#CCCCCC"
7398
- }
7399
- };
7386
+ }};
7400
7387
  var checkboxTokens = {
7401
7388
  checkbox: checkbox
7402
7389
  };
@@ -7989,13 +7976,7 @@ const color = {
7989
7976
  },
7990
7977
  divider: {
7991
7978
  "default": "#E1E1E1"
7992
- },
7993
- blue: {
7994
- strong: "#0075FF"},
7995
- darkblue: {
7996
- strong: "#006AC1"},
7997
- grey: {
7998
- strong: "#737373"}};
7979
+ }};
7999
7980
  const shadow = {
8000
7981
  spread: {
8001
7982
  md: {
@@ -8012,7 +7993,13 @@ var systemTokens = {
8012
7993
  };
8013
7994
 
8014
7995
  const listBox = {
8015
- radius: "4"};
7996
+ radius: "4",
7997
+ bg: "#FFFFFF",
7998
+ chip: {
7999
+ paddingXY: "8",
8000
+ gap: "8"
8001
+ }
8002
+ };
8016
8003
  var listBoxTokens = {
8017
8004
  listBox: listBox
8018
8005
  };
@@ -8149,7 +8136,7 @@ class SdChipInput {
8149
8136
  /** 입력 placeholder */
8150
8137
  placeholder = '입력해 주세요.';
8151
8138
  /** 폼 연동용 name 속성 */
8152
- name = nanoid$1();
8139
+ name = nanoid();
8153
8140
  /** 유효성 검사 규칙 목록 */
8154
8141
  rules = [];
8155
8142
  /** 에러 상태 여부 */
@@ -8752,7 +8739,7 @@ const CIRCLE_PROGRESS_RADIUS = 34;
8752
8739
  const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
8753
8740
  const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;
8754
8741
 
8755
- 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}}`;
8742
+ const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;flex-direction:column;align-items:center;gap:8px}sd-circle-progress .sd-circle-progress{width:80px;height:80px}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.4s linear, stroke-dashoffset 0.4s linear}sd-circle-progress .sd-circle-progress__percent{text-align:center;color:var(--sd-circle-progress-percent-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:16px;font-weight:700;line-height:26px}sd-circle-progress .sd-circle-progress__label{text-align:center;color:var(--sd-circle-progress-label-color);font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;font-size:12px;font-weight:400;line-height:20px}sd-circle-progress{}sd-circle-progress[inner-value]{position:relative}sd-circle-progress[inner-value] .sd-circle-progress__percent{position:absolute;top:40px;left:50%;transform:translate(-50%, -50%);line-height:normal}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
8756
8743
 
8757
8744
  class SdCircleProgress {
8758
8745
  constructor(hostRef) {
@@ -8766,6 +8753,8 @@ class SdCircleProgress {
8766
8753
  type = 'primary';
8767
8754
  /** 원 하단에 표시할 레이블 텍스트 */
8768
8755
  label;
8756
+ /** true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 */
8757
+ innerValue = false;
8769
8758
  get clampedValue() {
8770
8759
  if (!Number.isFinite(this.value))
8771
8760
  return 0;
@@ -8788,7 +8777,7 @@ class SdCircleProgress {
8788
8777
  }
8789
8778
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
8790
8779
  const showPercent = !this.indeterminate;
8791
- 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)));
8780
+ 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)));
8792
8781
  }
8793
8782
  static get style() { return sdCircleProgressCss(); }
8794
8783
  static get cmpMeta() { return {
@@ -8798,11 +8787,12 @@ class SdCircleProgress {
8798
8787
  "indeterminate": [516],
8799
8788
  "value": [2],
8800
8789
  "type": [513],
8801
- "label": [1]
8790
+ "label": [1],
8791
+ "innerValue": [516, "inner-value"]
8802
8792
  },
8803
8793
  "$listeners$": undefined,
8804
8794
  "$lazyBundleId$": "-",
8805
- "$attrsToReflect$": [["indeterminate", "indeterminate"], ["type", "type"]]
8795
+ "$attrsToReflect$": [["indeterminate", "indeterminate"], ["type", "type"], ["innerValue", "inner-value"]]
8806
8796
  }; }
8807
8797
  }
8808
8798
 
@@ -8824,7 +8814,7 @@ const CONFIRM_MODAL_ICON_COLOR = {
8824
8814
  const TITLE_ICON_SIZE = Number(modalTokens.modal.confirm.title.icon);
8825
8815
  const SUB_BUTTON_PRESET = 'neutral_outline_md';
8826
8816
 
8827
- const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
8817
+ const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__option{text-align:center}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
8828
8818
 
8829
8819
  class SdConfirmModal {
8830
8820
  constructor(hostRef) {
@@ -8834,8 +8824,8 @@ class SdConfirmModal {
8834
8824
  this.ok = createEvent(this, "sdOk", 7);
8835
8825
  }
8836
8826
  get el() { return getElement(this); }
8837
- hasSlottedContent = false;
8838
- customContentRef;
8827
+ hasTagSlot = false;
8828
+ hasOptionSlot = false;
8839
8829
  slotObserver;
8840
8830
  /** 모달 타입 (아이콘·버튼 색상 결정) */
8841
8831
  type = 'positive';
@@ -8853,14 +8843,12 @@ class SdConfirmModal {
8853
8843
  mainButtonLabel = '확인';
8854
8844
  /** 취소 버튼 레이블 (없으면 취소 버튼 미표시) */
8855
8845
  subButtonLabel = '';
8856
- /** 콘텐츠 박스에 표시할 태그 프리셋 */
8846
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 프리셋 (slot="tag" 미지정 시) */
8857
8847
  tagPreset = 'square_sm_grey';
8858
- /** 콘텐츠 박스에 표시할 태그 레이블 */
8848
+ /** 콘텐츠 박스 tag 슬롯 기본 태그 레이블 (slot="tag" 미지정 시) */
8859
8849
  tagLabel = '';
8860
- /** 콘텐츠 박스에 표시할 텍스트 (tagLabel 없을 때 사용) */
8850
+ /** 콘텐츠 박스 option 슬롯 기본 텍스트 (slot="option" 미지정 시) */
8861
8851
  slotLabel = '';
8862
- /** 콘텐츠 박스에 직접 삽입할 HTMLElement */
8863
- tagContents;
8864
8852
  /** 닫기 버튼 클릭 시 발생합니다. */
8865
8853
  close;
8866
8854
  /** 취소 버튼 클릭 시 발생합니다. */
@@ -8879,17 +8867,6 @@ class SdConfirmModal {
8879
8867
  characterData: true,
8880
8868
  });
8881
8869
  }
8882
- componentDidRender() {
8883
- if (this.customContentRef && this.tagContents instanceof HTMLElement) {
8884
- if (typeof this.customContentRef.replaceChildren === 'function') {
8885
- this.customContentRef.replaceChildren(this.tagContents);
8886
- }
8887
- else {
8888
- this.customContentRef.innerHTML = '';
8889
- this.customContentRef.appendChild(this.tagContents);
8890
- }
8891
- }
8892
- }
8893
8870
  disconnectedCallback() {
8894
8871
  this.slotObserver?.disconnect();
8895
8872
  }
@@ -8899,29 +8876,39 @@ class SdConfirmModal {
8899
8876
  get resolvedMainButton() {
8900
8877
  return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.resolvedType];
8901
8878
  }
8902
- get hasTagContent() {
8903
- return ((this.tagLabel !== undefined && this.tagLabel !== '') ||
8904
- (this.slotLabel !== undefined && this.slotLabel !== ''));
8879
+ /** tag 위치 콘텐츠 박스 표시 여부 (tagLabel fallback 또는 slot="tag") */
8880
+ get showTagBox() {
8881
+ return this.tagLabel !== '' || this.hasTagSlot;
8905
8882
  }
8906
- get showContentBox() {
8907
- return this.tagContents != null || this.hasTagContent || this.hasSlottedContent;
8883
+ /** option 위치(bottomMessage 아래) 표시 여부 (slotLabel fallback 또는 slot="option") */
8884
+ get showOption() {
8885
+ return this.slotLabel !== '' || this.hasOptionSlot;
8908
8886
  }
8887
+ /** light-DOM 에 slot="tag" / slot="option" 콘텐츠가 있는지 감지 */
8909
8888
  syncHasSlottedContent() {
8910
- const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
8911
- node.classList.contains('sd-confirm-modal')) &&
8912
- (node.nodeType === Node.ELEMENT_NODE ||
8913
- (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
8914
- if (hasSlottedContent !== this.hasSlottedContent) {
8915
- this.hasSlottedContent = hasSlottedContent;
8916
- }
8889
+ let hasTagSlot = false;
8890
+ let hasOptionSlot = false;
8891
+ Array.from(this.el.children).forEach(node => {
8892
+ if (!(node instanceof HTMLElement))
8893
+ return;
8894
+ if (node.classList.contains('sd-confirm-modal'))
8895
+ return;
8896
+ const slot = node.getAttribute('slot');
8897
+ if (slot === 'tag')
8898
+ hasTagSlot = true;
8899
+ else if (slot === 'option')
8900
+ hasOptionSlot = true;
8901
+ });
8902
+ if (hasTagSlot !== this.hasTagSlot)
8903
+ this.hasTagSlot = hasTagSlot;
8904
+ if (hasOptionSlot !== this.hasOptionSlot)
8905
+ this.hasOptionSlot = hasOptionSlot;
8917
8906
  }
8918
8907
  render() {
8919
8908
  const type = this.resolvedType;
8920
8909
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
8921
8910
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
8922
- 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 => {
8923
- this.customContentRef = el;
8924
- } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'e99adc95c95be16945407d54833164908aad0b50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), hAsync("div", { key: '20a6660323e1d9f4ee096f0c07bf0596f5a2445a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '73141dd6fc6f703bff11e71ca9820cf3e1045466', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: 'bed2d910b4b35d59897e14222f86f20a7e8c3bde', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8911
+ return (hAsync("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (hAsync("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, hAsync("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (hAsync("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, hAsync("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (hAsync("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), hAsync("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8925
8912
  }
8926
8913
  static get style() { return sdConfirmModalCss(); }
8927
8914
  static get cmpMeta() { return {
@@ -8939,8 +8926,8 @@ class SdConfirmModal {
8939
8926
  "tagPreset": [1, "tag-preset"],
8940
8927
  "tagLabel": [1, "tag-label"],
8941
8928
  "slotLabel": [1, "slot-label"],
8942
- "tagContents": [16],
8943
- "hasSlottedContent": [32]
8929
+ "hasTagSlot": [32],
8930
+ "hasOptionSlot": [32]
8944
8931
  },
8945
8932
  "$listeners$": undefined,
8946
8933
  "$lazyBundleId$": "-",
@@ -9176,7 +9163,7 @@ class SdDatePicker {
9176
9163
  formField;
9177
9164
  closeAnimationTimer;
9178
9165
  /** 폼 연동용 name 속성 */
9179
- name = nanoid$1();
9166
+ name = nanoid();
9180
9167
  watchIsOpen(newValue) {
9181
9168
  this.focused = newValue;
9182
9169
  }
@@ -9241,9 +9228,9 @@ class SdDatePicker {
9241
9228
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9242
9229
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9243
9230
  };
9244
- return (hAsync("sd-field", { key: '4359c9ce80bfc919088774a4458c730c427aa3f5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '638f4e59c9a7c5c841428c424181b3d2320857eb', class: "sd-date-picker", ref: el => {
9231
+ return (hAsync("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
9245
9232
  this.triggerRef = el;
9246
- } }, hAsync("sd-date-picker-trigger", { key: 'cbfe2bee0fdea1f089860cf3a7da9b7e35327c87', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'a348437c5f9f53180cc7f74d5b275e4f3fbedea6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '7dd08053b3a24d25e6149d4bc751c75eff94f752', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9233
+ } }, hAsync("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9247
9234
  }
9248
9235
  static get watchers() { return {
9249
9236
  "isOpen": [{
@@ -9331,7 +9318,7 @@ class SdDatePickerTrigger {
9331
9318
  ? DATEPICKER_COLORS.icon.disabled
9332
9319
  : DATEPICKER_COLORS.icon.default,
9333
9320
  };
9334
- return (hAsync("div", { key: '6fbd05e53170cb323d3db5fe5fb7bf17e03f3af9', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9321
+ return (hAsync("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9335
9322
  'sd-date-picker-trigger': true,
9336
9323
  'sd-date-picker-trigger--disabled': this.disabled,
9337
9324
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -9339,7 +9326,7 @@ class SdDatePickerTrigger {
9339
9326
  e.preventDefault();
9340
9327
  this.handleClick();
9341
9328
  }
9342
- } }, hAsync("sd-icon", { key: '60e23369acd45ae6a74b076c08309644a10aceb3', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '5db37f4d71914215e4ae4236791dd3e0eda10c96', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9329
+ } }, hAsync("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9343
9330
  }
9344
9331
  static get style() { return sdDatePickerTriggerCss(); }
9345
9332
  static get cmpMeta() { return {
@@ -9423,7 +9410,7 @@ class SdDateRangePicker {
9423
9410
  formField;
9424
9411
  closeAnimationTimer;
9425
9412
  /** 폼 연동용 name 속성 */
9426
- name = nanoid$1();
9413
+ name = nanoid();
9427
9414
  watchIsOpen(newValue) {
9428
9415
  this.focused = newValue;
9429
9416
  }
@@ -9788,7 +9775,7 @@ class SdDateRangePickerCalendar {
9788
9775
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
9789
9776
  '--range-divider': RANGE_LAYOUT.divider,
9790
9777
  };
9791
- return (hAsync(Fragment, { key: '4502cc08eb9df7c24cdc9f22564fb2a4a0b2736e' }, hAsync("div", { key: '9da4356920cbce83c548a4c5f40cb2af9e36a257', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: 'a8117206cd3d9368a86f4cc307037461c1314aad', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '0f6cbaf53781429b3de08aa992a45f2c26444625', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9778
+ return (hAsync(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, hAsync("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9792
9779
  }
9793
9780
  static get watchers() { return {
9794
9781
  "value": [{
@@ -9831,7 +9818,7 @@ class SdDivider {
9831
9818
  const hostStyle = {
9832
9819
  '--sd-divider-color': DIVIDER_COLORS.default,
9833
9820
  };
9834
- return (hAsync(Host, { key: '73be9d4cc38b230e4cff7f8ebcdc81bd2d56e0e7', style: hostStyle }, hAsync("hr", { key: 'a4da09faca453df8cb6ea3ed00609d4e0c238a7a', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9821
+ return (hAsync(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, hAsync("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9835
9822
  }
9836
9823
  static get style() { return sdDividerCss(); }
9837
9824
  static get cmpMeta() { return {
@@ -10511,19 +10498,19 @@ class SdField {
10511
10498
  : {}),
10512
10499
  }
10513
10500
  : {};
10514
- return (hAsync("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
10501
+ return (hAsync("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
10515
10502
  'sd-field': true,
10516
10503
  'sd-field--has-label': this.label !== '',
10517
10504
  'sd-field--has-addon': addon !== '',
10518
10505
  'sd-field--borderless': this.borderless,
10519
10506
  [this.fieldStatus]: this.fieldStatus !== '',
10520
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, hAsync("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
10507
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, hAsync("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
10521
10508
  'sd-field__control': true,
10522
10509
  'sd-field__control--has-addon': addon !== '',
10523
10510
  }, style: this.width !== '' && this.width !== 0
10524
10511
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
10525
- : {} }, addon && (hAsync("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
10526
- Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
10512
+ : {} }, addon && (hAsync("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
10513
+ Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
10527
10514
  }
10528
10515
  renderLabel(label) {
10529
10516
  if (label == null || label === '')
@@ -10610,8 +10597,16 @@ const FILE_PICKER_COLORS = {
10610
10597
  disabled: fp.icon.disabled,
10611
10598
  },
10612
10599
  };
10600
+ // useMultipleListBox 모드에서 파일 칩을 담는 floating 리스트박스 카드
10601
+ // (sd-select-listbox 와 동일한 배경/radius/그림자 토큰 사용)
10602
+ const FILE_PICKER_LIST_BOX = {
10603
+ radius: listBoxTokens.listBox.radius,
10604
+ bg: listBoxTokens.listBox.bg,
10605
+ chipPadding: listBoxTokens.listBox.chip.paddingXY,
10606
+ chipGap: listBoxTokens.listBox.chip.gap,
10607
+ };
10613
10608
 
10614
- 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)}`;
10609
+ 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)}`;
10615
10610
 
10616
10611
  class SdFilePicker {
10617
10612
  constructor(hostRef) {
@@ -10630,6 +10625,8 @@ class SdFilePicker {
10630
10625
  inline = false;
10631
10626
  /** 다중 파일 선택 여부 */
10632
10627
  multiple = false;
10628
+ /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 */
10629
+ useMultipleListBox = false;
10633
10630
  /** 허용할 파일 타입 (input accept 속성과 동일) */
10634
10631
  accept;
10635
10632
  /** 파일 한 개의 최대 크기 (bytes) */
@@ -10640,7 +10637,7 @@ class SdFilePicker {
10640
10637
  maxFiles;
10641
10638
  // sd-field 패스스루 props
10642
10639
  /** 폼 연동용 name 속성 */
10643
- name = nanoid$1();
10640
+ name = nanoid();
10644
10641
  /** 레이블 텍스트 */
10645
10642
  label = '';
10646
10643
  /** 레이블 너비 */
@@ -10673,9 +10670,13 @@ class SdFilePicker {
10673
10670
  hovered = false;
10674
10671
  internalValue = null;
10675
10672
  showTooltip = false;
10673
+ isListboxOpen = false;
10674
+ listboxWidth = '';
10676
10675
  fileInputRef;
10677
10676
  fileNamesRef;
10677
+ contentRef;
10678
10678
  formField;
10679
+ static VIEWPORT_PADDING = 20;
10679
10680
  /** 파일 선택 또는 삭제 시 현재 파일 값을 전달합니다. */
10680
10681
  update;
10681
10682
  /** 파일이 크기·개수 제한을 초과하여 거부됐을 때 발생합니다. */
@@ -10777,6 +10778,7 @@ class SdFilePicker {
10777
10778
  this.value = clearedValue;
10778
10779
  this.internalValue = clearedValue;
10779
10780
  this.update?.emit(clearedValue);
10781
+ this.isListboxOpen = false;
10780
10782
  if (this.fileInputRef) {
10781
10783
  this.fileInputRef.value = '';
10782
10784
  }
@@ -10786,6 +10788,23 @@ class SdFilePicker {
10786
10788
  return;
10787
10789
  this.fileInputRef?.click();
10788
10790
  };
10791
+ /** caret(▼) 클릭 시 파일 목록 리스트박스를 토글한다. */
10792
+ handleListboxToggle = (event) => {
10793
+ event.stopPropagation();
10794
+ if (this.disabled)
10795
+ return;
10796
+ if (this.isListboxOpen) {
10797
+ this.isListboxOpen = false;
10798
+ return;
10799
+ }
10800
+ if (this.contentRef) {
10801
+ this.listboxWidth = `${this.contentRef.offsetWidth}px`;
10802
+ }
10803
+ this.isListboxOpen = true;
10804
+ };
10805
+ closeListbox = () => {
10806
+ this.isListboxOpen = false;
10807
+ };
10789
10808
  hasFiles() {
10790
10809
  if (Array.isArray(this.internalValue)) {
10791
10810
  return this.internalValue.length > 0;
@@ -10811,12 +10830,28 @@ class SdFilePicker {
10811
10830
  this.internalValue = newFiles;
10812
10831
  this.value = newFiles;
10813
10832
  this.update?.emit(this.value);
10833
+ // 리스트박스에서 마지막 파일을 지우면 caret 이 사라지므로 함께 닫는다.
10834
+ if (newFiles.length === 0) {
10835
+ this.isListboxOpen = false;
10836
+ }
10814
10837
  };
10815
10838
  renderChipList() {
10816
10839
  if (!this.hasChips())
10817
10840
  return null;
10818
10841
  return (hAsync("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (hAsync("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
10819
10842
  }
10843
+ renderListbox() {
10844
+ if (!this.hasChips() || !this.isListboxOpen)
10845
+ return null;
10846
+ const listboxStyle = {
10847
+ width: this.listboxWidth,
10848
+ padding: `${FILE_PICKER_LIST_BOX.chipPadding}px`,
10849
+ gap: `${FILE_PICKER_LIST_BOX.chipGap}px`,
10850
+ borderRadius: `${FILE_PICKER_LIST_BOX.radius}px`,
10851
+ background: FILE_PICKER_LIST_BOX.bg,
10852
+ };
10853
+ 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) }))))));
10854
+ }
10820
10855
  checkOverflow() {
10821
10856
  if (!this.fileNamesRef)
10822
10857
  return;
@@ -10842,21 +10877,25 @@ class SdFilePicker {
10842
10877
  '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
10843
10878
  '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
10844
10879
  };
10845
- const content = (hAsync("div", { key: 'f686c8d06b3dbecc037e21f41e7f307d08349e8b', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
10880
+ const showListbox = this.multiple && this.useMultipleListBox;
10881
+ const content = (hAsync("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
10846
10882
  if (e.key === 'Enter' || e.key === ' ') {
10847
10883
  e.preventDefault();
10848
10884
  this.handleClick();
10849
10885
  }
10850
- } }, 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: {
10886
+ } }, hAsync("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
10851
10887
  'sd-file-picker__text': true,
10852
10888
  'sd-file-picker__text--placeholder': !hasFiles,
10853
10889
  'sd-file-picker__text--active': hasFiles,
10854
- } }, 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))));
10855
- return (hAsync("div", { key: '4e25add1b74a232e8786efca26f87ccb5d48f19d', class: {
10890
+ } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10891
+ 'sd-file-picker__caret': true,
10892
+ 'sd-file-picker__caret--open': this.isListboxOpen,
10893
+ }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
10894
+ return (hAsync("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
10856
10895
  'sd-file-picker__wrapper': true,
10857
10896
  'sd-file-picker--inline': this.inline,
10858
10897
  'sd-file-picker--inline-disabled': this.inline && this.disabled,
10859
- }, 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()));
10898
+ }, style: cssVars }, hAsync("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
10860
10899
  }
10861
10900
  static get watchers() { return {
10862
10901
  "value": [{
@@ -10873,6 +10912,7 @@ class SdFilePicker {
10873
10912
  "disabled": [516],
10874
10913
  "inline": [516],
10875
10914
  "multiple": [516],
10915
+ "useMultipleListBox": [516, "use-multiple-list-box"],
10876
10916
  "accept": [1],
10877
10917
  "maxFileSize": [8, "max-file-size"],
10878
10918
  "maxTotalSize": [8, "max-total-size"],
@@ -10895,17 +10935,19 @@ class SdFilePicker {
10895
10935
  "hovered": [1028],
10896
10936
  "internalValue": [32],
10897
10937
  "showTooltip": [32],
10938
+ "isListboxOpen": [32],
10939
+ "listboxWidth": [32],
10898
10940
  "sdValidate": [64],
10899
10941
  "sdReset": [64],
10900
10942
  "sdResetValidate": [64]
10901
10943
  },
10902
10944
  "$listeners$": undefined,
10903
10945
  "$lazyBundleId$": "-",
10904
- "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"]]
10946
+ "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"], ["useMultipleListBox", "use-multiple-list-box"]]
10905
10947
  }; }
10906
10948
  }
10907
10949
 
10908
- 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)}}`;
10950
+ 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)}}`;
10909
10951
 
10910
10952
  class SdFloatingPopover {
10911
10953
  constructor(hostRef) {
@@ -11085,7 +11127,7 @@ class SdFloatingPopover {
11085
11127
  }
11086
11128
  }
11087
11129
  render() {
11088
- return hAsync("slot", { key: '487d3c23320bd5f44492e3fb84e3cb357605de39' });
11130
+ return hAsync("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
11089
11131
  }
11090
11132
  static get style() { return sdFloatingPortalCss(); }
11091
11133
  static get cmpMeta() { return {
@@ -11457,9 +11499,6 @@ const guide = {
11457
11499
  title: {
11458
11500
  gap: "8"
11459
11501
  },
11460
- row: {
11461
- gap: "8"
11462
- },
11463
11502
  body: {
11464
11503
  gap: "2"
11465
11504
  },
@@ -11508,7 +11547,6 @@ const GUIDE_CONFIG = {
11508
11547
  paddingX: `${contents.paddingX}px`,
11509
11548
  paddingY: `${contents.paddingY}px`,
11510
11549
  gap: `${contents.gap}px`,
11511
- rowGap: `${contents.row.gap}px`,
11512
11550
  bodyGap: `${contents.body.gap}px`,
11513
11551
  titleGap: `${contents.title.gap}px`,
11514
11552
  radius: `${contents.radius}px`,
@@ -11524,7 +11562,7 @@ const GUIDE_CONFIG = {
11524
11562
  },
11525
11563
  };
11526
11564
 
11527
- 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}`;
11565
+ 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}`;
11528
11566
 
11529
11567
  const DEFAULT_LABEL_BY_TYPE = {
11530
11568
  tip: '활용 TIP',
@@ -11588,7 +11626,6 @@ class SdGuide {
11588
11626
  '--sd-guide-contents-padding-x': contents.paddingX,
11589
11627
  '--sd-guide-contents-padding-y': contents.paddingY,
11590
11628
  '--sd-guide-contents-gap': contents.gap,
11591
- '--sd-guide-contents-row-gap': contents.rowGap,
11592
11629
  '--sd-guide-contents-body-gap': contents.bodyGap,
11593
11630
  '--sd-guide-contents-title-gap': contents.titleGap,
11594
11631
  '--sd-guide-contents-radius': contents.radius,
@@ -11611,10 +11648,10 @@ class SdGuide {
11611
11648
  const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
11612
11649
  if (isActive)
11613
11650
  buttonClasses.push('sd-guide__button--active');
11614
- 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: {
11651
+ 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: {
11615
11652
  ...this.guideStyle,
11616
11653
  width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
11617
- } }, 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)))))));
11654
+ } }, 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)))))));
11618
11655
  }
11619
11656
  // 현재 2depth까지만 스타일 적용
11620
11657
  renderListItem(message, depth = 0) {
@@ -12076,7 +12113,7 @@ class SdInput {
12076
12113
  nativeEl = undefined;
12077
12114
  formField;
12078
12115
  /** 폼 연동용 name 속성 */
12079
- name = nanoid$1();
12116
+ name = nanoid();
12080
12117
  /** 값이 변경될 때 발생합니다. */
12081
12118
  input;
12082
12119
  /** 포커스될 때 발생합니다. */
@@ -12156,12 +12193,12 @@ class SdInput {
12156
12193
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
12157
12194
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
12158
12195
  };
12159
- 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 () => {
12196
+ return (hAsync("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, hAsync("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), hAsync("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12160
12197
  if (this.disabled || this.readonly)
12161
12198
  return;
12162
12199
  this.internalValue = '';
12163
12200
  await this.formField?.sdValidate();
12164
- } })), 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: () => {
12201
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12165
12202
  if (this.disabled || this.readonly)
12166
12203
  return;
12167
12204
  this.passwordVisible = !this.passwordVisible;
@@ -12228,42 +12265,19 @@ class SdInput {
12228
12265
 
12229
12266
  const table = {
12230
12267
  header: {
12231
- height: "36",
12232
12268
  paddingX: "16",
12233
12269
  gap: "4",
12234
12270
  bg: "#F5FAFF",
12235
12271
  typography: {
12236
12272
  fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
12237
- fontWeight: "500",
12238
12273
  fontSize: "12",
12239
- lineHeight: "20",
12240
- textDecoration: "none"
12241
- },
12242
- resizingBar: {
12243
- color: "#CCCCCC",
12244
- height: "16"
12245
- }
12246
- },
12274
+ lineHeight: "20"}},
12247
12275
  body: {
12248
- "default": {
12249
- height: "44",
12250
- paddingY: "8"
12251
- },
12252
- dense: {
12253
- height: "32",
12254
- paddingY: "6"
12255
- },
12256
- paddingX: {
12257
- "default": "16",
12258
- frame: "8"
12259
- },
12260
12276
  typography: {
12261
12277
  fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
12262
12278
  fontWeight: "400",
12263
12279
  fontSize: "12",
12264
- lineHeight: "20",
12265
- textDecoration: "none"
12266
- }
12280
+ lineHeight: "20"}
12267
12281
  },
12268
12282
  border: {
12269
12283
  color: "#E1E1E1",
@@ -12275,21 +12289,18 @@ const table = {
12275
12289
  radius: "8",
12276
12290
  keyValue: {
12277
12291
  body: {
12278
- paddingY: "8"},
12292
+ paddingY: "8",
12293
+ paddingX: {
12294
+ "default": "8",
12295
+ wide: "16"
12296
+ }
12297
+ },
12279
12298
  height: "44",
12280
12299
  search: {
12281
12300
  paddingX: "32",
12282
12301
  bg: "#F9F9F9"
12283
12302
  }
12284
- },
12285
- separator: {
12286
- color: "#EEEEEE",
12287
- width: {
12288
- "default": "6",
12289
- dense: "4"
12290
- }
12291
- }
12292
- };
12303
+ }};
12293
12304
  var tableTokens = {
12294
12305
  table: table
12295
12306
  };
@@ -12301,6 +12312,8 @@ const KEY_VALUE_TABLE_LAYOUT = {
12301
12312
  borderRadius: Number(t.radius),
12302
12313
  thPaddingX: Number(t.header.paddingX),
12303
12314
  padding: Number(t.keyValue.body.paddingY),
12315
+ tdPaddingX: Number(t.keyValue.body.paddingX.default),
12316
+ tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
12304
12317
  helpIconSize: 16,
12305
12318
  requiredIconSize: 12,
12306
12319
  gap: Number(t.header.gap),
@@ -12329,7 +12342,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
12329
12342
  tdLineHeight: Number(t.body.typography.lineHeight),
12330
12343
  };
12331
12344
 
12332
- const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
12345
+ const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding) var(--sd-kvt-td-padding-x);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td--text{padding-left:var(--sd-kvt-td-padding-x-wide);padding-right:var(--sd-kvt-td-padding-x-wide)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
12333
12346
 
12334
12347
  class SdKeyValueTable {
12335
12348
  constructor(hostRef) {
@@ -12342,6 +12355,12 @@ class SdKeyValueTable {
12342
12355
  * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
12343
12356
  */
12344
12357
  fields = [];
12358
+ /**
12359
+ * field name을 key로 하는 값 객체 (`{ [name]: value }`).
12360
+ * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
12361
+ * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
12362
+ */
12363
+ values = {};
12345
12364
  /**
12346
12365
  * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
12347
12366
  */
@@ -12353,44 +12372,57 @@ class SdKeyValueTable {
12353
12372
  * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
12354
12373
  */
12355
12374
  radius = 'default';
12356
- /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
12375
+ /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
12357
12376
  change;
12358
12377
  /** search 패널의 검색 버튼 클릭 시 발생합니다. */
12359
12378
  searchEvent;
12360
12379
  emit = (name, value) => {
12361
- this.change.emit({ name, value });
12380
+ this.change.emit({
12381
+ name,
12382
+ value: value,
12383
+ values: { ...this.values, [name]: value },
12384
+ });
12362
12385
  };
12386
+ /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
12387
+ resolveOptions(field) {
12388
+ const options = { ...(field.options ?? {}) };
12389
+ if (Object.prototype.hasOwnProperty.call(this.values, field.name)) {
12390
+ options.value = this.values[field.name];
12391
+ }
12392
+ return options;
12393
+ }
12363
12394
  handleSearchClick = () => {
12364
12395
  this.searchEvent.emit();
12365
12396
  };
12366
12397
  renderField(field) {
12367
12398
  const onSdUpdate = (e) => this.emit(field.name, e.detail);
12399
+ const options = this.resolveOptions(field);
12368
12400
  switch (field.type) {
12369
12401
  case 'input':
12370
- return hAsync("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12402
+ return hAsync("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12371
12403
  case 'textarea':
12372
- return hAsync("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12404
+ return hAsync("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12373
12405
  case 'number-input':
12374
- return hAsync("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12406
+ return hAsync("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12375
12407
  case 'select':
12376
- return hAsync("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12408
+ return hAsync("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12377
12409
  case 'radio': {
12378
- const { value, direction, ...rest } = field.options ?? {};
12410
+ const { value, direction, ...rest } = options;
12379
12411
  return (hAsync("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
12380
12412
  }
12381
12413
  case 'checkbox': {
12382
- const { value, ...rest } = field.options ?? {};
12414
+ const { value, ...rest } = options;
12383
12415
  return hAsync("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
12384
12416
  }
12385
12417
  case 'date-picker':
12386
- return hAsync("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12418
+ return hAsync("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12387
12419
  case 'date-range-picker':
12388
- return (hAsync("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
12420
+ return hAsync("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12389
12421
  case 'file-picker':
12390
- return hAsync("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
12422
+ return hAsync("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
12391
12423
  case 'text':
12392
12424
  default:
12393
- return hAsync("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
12425
+ return hAsync("span", { class: "sd-key-value-table__text" }, options.value ?? '');
12394
12426
  }
12395
12427
  }
12396
12428
  renderHelpIcon(helpText) {
@@ -12479,7 +12511,13 @@ class SdKeyValueTable {
12479
12511
  renderTd(field, r, c) {
12480
12512
  const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
12481
12513
  const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
12482
- return (hAsync("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12514
+ // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
12515
+ // 폼 필드 셀은 default paddingX 유지.
12516
+ const isText = field.type == null || field.type === 'text';
12517
+ return (hAsync("td", { key: `td-${r}-${c}`, class: {
12518
+ 'sd-key-value-table__td': true,
12519
+ 'sd-key-value-table__td--text': isText,
12520
+ }, rowSpan: tdRowSpan, colSpan: tdColSpan }, hAsync("div", { class: "sd-key-value-table__td-inner" }, hAsync("slot", { name: `field-${field.name}` }, this.renderField(field)))));
12483
12521
  }
12484
12522
  warnDuplicateNames() {
12485
12523
  const seen = new Set();
@@ -12504,6 +12542,8 @@ class SdKeyValueTable {
12504
12542
  '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
12505
12543
  '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
12506
12544
  '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
12545
+ '--sd-kvt-td-padding-x': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingX}px`,
12546
+ '--sd-kvt-td-padding-x-wide': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingXWide}px`,
12507
12547
  '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
12508
12548
  '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
12509
12549
  '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,
@@ -12564,6 +12604,7 @@ class SdKeyValueTable {
12564
12604
  "$tagName$": "sd-key-value-table",
12565
12605
  "$members$": {
12566
12606
  "fields": [16],
12607
+ "values": [16],
12567
12608
  "search": [4],
12568
12609
  "radius": [1]
12569
12610
  },
@@ -12621,7 +12662,7 @@ class SdLinearProgress {
12621
12662
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
12622
12663
  };
12623
12664
  const valueText = `${Math.round(this.clampedValue)}%`;
12624
- 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)));
12665
+ return (hAsync(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, hAsync("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, hAsync("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
12625
12666
  }
12626
12667
  static get style() { return sdLinearProgressCss(); }
12627
12668
  static get cmpMeta() { return {
@@ -12677,10 +12718,10 @@ class SdLoadingContainer {
12677
12718
  this.prevBodyOverflow = null;
12678
12719
  }
12679
12720
  render() {
12680
- return (hAsync("div", { key: '7abf314b6518ab7e6ba0ef60236a8ca6846b0cf4', class: {
12721
+ return (hAsync("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
12681
12722
  'sd-loading-container': true,
12682
12723
  'sd-loading-container--visible': this.visible,
12683
- }, "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))));
12724
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
12684
12725
  }
12685
12726
  static get style() { return sdLoadingContainerCss(); }
12686
12727
  static get cmpMeta() { return {
@@ -12725,12 +12766,13 @@ const LOADING_MODAL_DEFAULT_BUTTON_LABEL = {
12725
12766
  };
12726
12767
  const LOADING_MODAL_BUTTON_PRESET = 'neutral_outline_sm';
12727
12768
 
12728
- 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}`;
12769
+ 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}`;
12729
12770
 
12730
12771
  class SdLoadingModal {
12731
12772
  constructor(hostRef) {
12732
12773
  registerInstance(this, hostRef);
12733
12774
  this.click = createEvent(this, "sdClick", 7);
12775
+ this.close = createEvent(this, "sdClose", 7);
12734
12776
  }
12735
12777
  /** 모달 상태 (loading: 로딩 중, error: 에러) */
12736
12778
  state = 'loading';
@@ -12748,6 +12790,8 @@ class SdLoadingModal {
12748
12790
  progress;
12749
12791
  /** 버튼 클릭 시 발생합니다. */
12750
12792
  click;
12793
+ /** 닫기 버튼 클릭 시 발생합니다. (error 상태에서만 노출) */
12794
+ close;
12751
12795
  get resolvedState() {
12752
12796
  return this.state ?? 'loading';
12753
12797
  }
@@ -12789,7 +12833,7 @@ class SdLoadingModal {
12789
12833
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
12790
12834
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
12791
12835
  };
12792
- 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 }))))));
12836
+ return (hAsync(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, hAsync("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '11b93fc8996ca64a42f09e4688267329da8a74c9', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (hAsync("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
12793
12837
  }
12794
12838
  static get style() { return sdLoadingModalCss(); }
12795
12839
  static get cmpMeta() { return {
@@ -13162,7 +13206,21 @@ class SdModalContainer {
13162
13206
  if (this.hasOwnProp(options, 'bottomMessage'))
13163
13207
  el.bottomMessage = options.bottomMessage ?? [];
13164
13208
  if (this.hasOwnProp(options, 'tagContents'))
13165
- el.tagContents = options.tagContents;
13209
+ this.setSlotContent(el, 'tag', options.tagContents);
13210
+ if (this.hasOwnProp(options, 'optionContents')) {
13211
+ this.setSlotContent(el, 'option', options.optionContents);
13212
+ }
13213
+ }
13214
+ /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
13215
+ setSlotContent(el, slot, content) {
13216
+ Array.from(el.children).forEach(child => {
13217
+ if (child.getAttribute('slot') === slot)
13218
+ child.remove();
13219
+ });
13220
+ if (content) {
13221
+ content.setAttribute('slot', slot);
13222
+ el.appendChild(content);
13223
+ }
13166
13224
  }
13167
13225
  handleBackdropClick(id) {
13168
13226
  if (!isTopInteractiveModal(id))
@@ -13425,7 +13483,7 @@ class SdNumberInput {
13425
13483
  nativeEl = undefined;
13426
13484
  formField;
13427
13485
  /** 폼 연동용 name 속성 */
13428
- name = nanoid$1();
13486
+ name = nanoid();
13429
13487
  /** 값이 변경될 때 발생합니다. */
13430
13488
  update;
13431
13489
  /** 포커스될 때 발생합니다. */
@@ -13671,15 +13729,15 @@ class SdNumberInput {
13671
13729
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
13672
13730
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
13673
13731
  };
13674
- 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: {
13732
+ return (hAsync("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
13675
13733
  'sd-number-input__content': true,
13676
13734
  'sd-number-input__content--no-stepper': !this.useButton,
13677
- } }, 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()
13735
+ } }, this.useButton && (hAsync("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
13678
13736
  ? NUMBER_INPUT_STEPPER.icon.disabled
13679
- : 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: {
13737
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
13680
13738
  textAlign: this.useButton ? 'center' : 'right',
13681
13739
  ...this.inputStyle,
13682
- } }), 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()
13740
+ } }), this.inputSuffix && hAsync("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
13683
13741
  ? NUMBER_INPUT_STEPPER.icon.disabled
13684
13742
  : NUMBER_INPUT_STEPPER.icon.default }))))));
13685
13743
  }
@@ -13898,13 +13956,13 @@ class SdPagination {
13898
13956
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
13899
13957
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
13900
13958
  };
13901
- return (hAsync("div", { key: '2e5fdcc2d6a426be32128960131db2ed51674939', class: {
13959
+ return (hAsync("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
13902
13960
  'sd-pagination': true,
13903
13961
  'sd-pagination--simple': this.simple,
13904
- }, 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: {
13962
+ }, style: cssVars }, hAsync("div", { key: '360cdb85715508d2f8155851b11928031015909c', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
13905
13963
  'sd-pagination__item': true,
13906
13964
  'sd-pagination__item--selected': this.currentPage === n,
13907
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3c98ea6c1bf5bea43baaa73a2a7db5c4fe1404e5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13965
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13908
13966
  }
13909
13967
  static get style() { return sdPaginationCss(); }
13910
13968
  static get cmpMeta() { return {
@@ -14144,7 +14202,7 @@ class SdPopup {
14144
14202
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
14145
14203
  ...this.submitButtonProps,
14146
14204
  };
14147
- 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() })))));
14205
+ return (hAsync("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, hAsync("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, hAsync("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (hAsync("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, hAsync("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), hAsync("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14148
14206
  }
14149
14207
  static get style() { return sdPopupCss(); }
14150
14208
  static get cmpMeta() { return {
@@ -14492,8 +14550,7 @@ const radio = {
14492
14550
  label: {
14493
14551
  "default": "#222222",
14494
14552
  disabled: "#888888"
14495
- }
14496
- };
14553
+ }};
14497
14554
  var radioTokens = {
14498
14555
  radio: radio
14499
14556
  };
@@ -14822,7 +14879,7 @@ class SdRadioButton {
14822
14879
  }; }
14823
14880
  }
14824
14881
 
14825
- 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}`;
14882
+ 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)}`;
14826
14883
 
14827
14884
  class SdRadioGroup {
14828
14885
  constructor(hostRef) {
@@ -14976,7 +15033,7 @@ class SdSelect {
14976
15033
  triggerComponentRef;
14977
15034
  closeAnimationTimer;
14978
15035
  /** 폼 연동용 name 속성 */
14979
- name = nanoid$1();
15036
+ name = nanoid();
14980
15037
  triggerHasFocus = false;
14981
15038
  watchIsOpen(newValue) {
14982
15039
  this.syncFocusedState(newValue);
@@ -15173,15 +15230,15 @@ class SdSelect {
15173
15230
  this.closeDropdown();
15174
15231
  },
15175
15232
  };
15176
- 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: () => {
15233
+ return (hAsync("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
15177
15234
  this.hovered = true;
15178
15235
  }, onMouseLeave: () => {
15179
15236
  this.hovered = false;
15180
- } }, hAsync("div", { key: '2e47d100a63bd6445f452701409cf05efabb30e0', class: "sd-select", ref: el => {
15237
+ } }, hAsync("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
15181
15238
  this.triggerRef = el;
15182
- } }, hAsync("sd-select-trigger", { key: '65763371f56bae558f927189931b567e5ca73df6', ref: el => {
15239
+ } }, hAsync("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
15183
15240
  this.triggerComponentRef = el;
15184
- }, 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) })))));
15241
+ }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, hAsync("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
15185
15242
  }
15186
15243
  static get watchers() { return {
15187
15244
  "isOpen": [{
@@ -15442,7 +15499,7 @@ class SdSelectListItem {
15442
15499
  return (
15443
15500
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
15444
15501
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
15445
- hAsync("div", { key: 'dd2c4cbd210ed70c00a954a9c6da6923ea76c91e', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15502
+ hAsync("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15446
15503
  'sd-select-list-item': true,
15447
15504
  'sd-select-list-item--group': isGroup,
15448
15505
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -15452,7 +15509,7 @@ class SdSelectListItem {
15452
15509
  'sd-select-list-item--focused': this.isFocused,
15453
15510
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
15454
15511
  'sd-select-list-item--disabled': !!this.option.disabled,
15455
- }, 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, ")"))));
15512
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '297067b88bedf8eed648f60050688e23e9dfcbdd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15456
15513
  }
15457
15514
  static get style() { return sdSelectListItemCss(); }
15458
15515
  static get cmpMeta() { return {
@@ -15524,15 +15581,15 @@ class SdSelectListItemSearch {
15524
15581
  clearTimeout(this.debounceTimer);
15525
15582
  }
15526
15583
  render() {
15527
- return (hAsync("div", { key: '951bb1f2507918c057bb88bd8254a8b4bc4b6018', class: {
15584
+ return (hAsync("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
15528
15585
  'sd-select-list-item-search': true,
15529
15586
  'sd-select-list-item-search--scrolled': this.isScrolled,
15530
- } }, 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 => {
15587
+ } }, hAsync("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
15531
15588
  this.inputEl = el;
15532
- }, 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: {
15589
+ }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', type: "button", class: {
15533
15590
  'sd-select-list-item-search__clear': true,
15534
15591
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
15535
- }, 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" })))));
15592
+ }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
15536
15593
  }
15537
15594
  static get style() { return sdSelectListItemSearchCss(); }
15538
15595
  static get cmpMeta() { return {
@@ -15916,9 +15973,9 @@ class SdSelectListbox {
15916
15973
  '--listbox-max-height': this.maxHeight ?? '260px',
15917
15974
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15918
15975
  };
15919
- 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 => {
15976
+ return (hAsync("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15920
15977
  this.listEl = el;
15921
- } }, 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) })))))));
15978
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
15922
15979
  }
15923
15980
  static get watchers() { return {
15924
15981
  "searchKeyword": [{
@@ -16007,7 +16064,7 @@ class SdSelectTrigger {
16007
16064
  ? SELECT_COLORS.icon.disabled
16008
16065
  : SELECT_COLORS.icon.default,
16009
16066
  };
16010
- return (hAsync("div", { key: 'a261a38ab844572d693bdb736e8c6c5df8b2b0c6', ref: el => {
16067
+ return (hAsync("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
16011
16068
  this.triggerEl = el;
16012
16069
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
16013
16070
  'sd-select-trigger': true,
@@ -16018,7 +16075,7 @@ class SdSelectTrigger {
16018
16075
  e.preventDefault();
16019
16076
  this.handleClick();
16020
16077
  }
16021
- }, 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: {
16078
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16022
16079
  'sd-select-trigger__icon': true,
16023
16080
  'sd-select-trigger__icon--open': this.isOpen,
16024
16081
  } }))));
@@ -16147,7 +16204,7 @@ class SdSwitch {
16147
16204
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
16148
16205
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
16149
16206
  };
16150
- 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)));
16207
+ return (hAsync("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, hAsync("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
16151
16208
  }
16152
16209
  static get style() { return sdSwitchCss(); }
16153
16210
  static get cmpMeta() { return {
@@ -16164,1081 +16221,6 @@ class SdSwitch {
16164
16221
  }; }
16165
16222
  }
16166
16223
 
16167
- let urlAlphabet =
16168
- 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
16169
-
16170
- const POOL_SIZE_MULTIPLIER = 128;
16171
- let pool, poolOffset;
16172
- function fillPool(bytes) {
16173
- if (bytes < 0 || bytes > 1024) throw new RangeError('Wrong ID size')
16174
- if (!pool || pool.length < bytes) {
16175
- pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
16176
- node_crypto.webcrypto.getRandomValues(pool);
16177
- poolOffset = 0;
16178
- } else if (poolOffset + bytes > pool.length) {
16179
- node_crypto.webcrypto.getRandomValues(pool);
16180
- poolOffset = 0;
16181
- }
16182
- poolOffset += bytes;
16183
- }
16184
- function nanoid(size = 21) {
16185
- fillPool((size |= 0));
16186
- let id = '';
16187
- for (let i = poolOffset - size; i < poolOffset; i++) {
16188
- id += urlAlphabet[pool[i] & 63];
16189
- }
16190
- return id
16191
- }
16192
-
16193
- const TABLE_ID_ATTR = 'table-id';
16194
-
16195
- // ── Header Tokens ──
16196
- const TABLE_HEADER_LAYOUT = {
16197
- height: tableTokens.table.header.height,
16198
- paddingX: tableTokens.table.header.paddingX,
16199
- gap: tableTokens.table.header.gap,
16200
- };
16201
- const TABLE_HEADER_TYPOGRAPHY = {
16202
- fontFamily: tableTokens.table.header.typography.fontFamily,
16203
- fontWeight: tableTokens.table.header.typography.fontWeight,
16204
- fontSize: tableTokens.table.header.typography.fontSize,
16205
- lineHeight: tableTokens.table.header.typography.lineHeight,
16206
- textDecoration: tableTokens.table.header.typography.textDecoration,
16207
- };
16208
- const TABLE_HEADER_COLORS = {
16209
- bg: tableTokens.table.header.bg,
16210
- };
16211
- const TABLE_HEADER_RESIZING_BAR = {
16212
- color: tableTokens.table.header.resizingBar.color,
16213
- height: tableTokens.table.header.resizingBar.height,
16214
- };
16215
- // ── Body Tokens ──
16216
- const TABLE_BODY_LAYOUT = {
16217
- default: {
16218
- height: tableTokens.table.body.default.height,
16219
- paddingY: tableTokens.table.body.default.paddingY,
16220
- },
16221
- dense: {
16222
- height: tableTokens.table.body.dense.height,
16223
- paddingY: tableTokens.table.body.dense.paddingY,
16224
- },
16225
- paddingX: tableTokens.table.body.paddingX.default,
16226
- framePadding: tableTokens.table.body.paddingX.frame,
16227
- };
16228
- const TABLE_BODY_TYPOGRAPHY = {
16229
- fontFamily: tableTokens.table.body.typography.fontFamily,
16230
- fontWeight: tableTokens.table.body.typography.fontWeight,
16231
- fontSize: tableTokens.table.body.typography.fontSize,
16232
- lineHeight: tableTokens.table.body.typography.lineHeight,
16233
- textDecoration: tableTokens.table.body.typography.textDecoration,
16234
- };
16235
- // ── Frame / Border Tokens ──
16236
- const TABLE_BORDER = {
16237
- color: tableTokens.table.border.color,
16238
- width: tableTokens.table.border.width,
16239
- };
16240
- const TABLE_SEPARATOR = {
16241
- color: tableTokens.table.separator.color,
16242
- width: tableTokens.table.separator.width.default,
16243
- denseWidth: tableTokens.table.separator.width.dense,
16244
- };
16245
- const TABLE_RADIUS = tableTokens.table.radius;
16246
- // ── Selectable Column ──
16247
- const TABLE_SELECTABLE_COLUMN_WIDTH = 48;
16248
- // ── Header Icon Color Defaults ──
16249
- const ICON_DEFAULT_COLOR = {
16250
- pageEdit: systemTokens.color.darkblue.strong,
16251
- arrowDown: systemTokens.color.darkblue.strong,
16252
- arrowUp: systemTokens.color.darkblue.strong,
16253
- updown: systemTokens.color.grey.strong,
16254
- pageMove: systemTokens.color.darkblue.strong,
16255
- star: systemTokens.color.blue.strong,
16256
- };
16257
- const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
16258
- const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
16259
-
16260
- 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%)}`;
16261
-
16262
- class SdTable {
16263
- constructor(hostRef) {
16264
- registerInstance(this, hostRef);
16265
- this.sdSelectChange = createEvent(this, "sdSelectChange", 7);
16266
- this.sdPageChange = createEvent(this, "sdPageChange", 7);
16267
- this.sdRowsPerPageChange = createEvent(this, "sdRowsPerPageChange", 7);
16268
- this.sdVirtualUpdate = createEvent(this, "sdVirtualUpdate", 7);
16269
- this.sdVirtualReachEnd = createEvent(this, "sdVirtualReachEnd", 7);
16270
- }
16271
- static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
16272
- get el() { return getElement(this); }
16273
- /** 테이블 고유 ID (자식 슬롯 매핑에 사용) */
16274
- tableId = nanoid(8);
16275
- fallbackTableId = nanoid(8);
16276
- /** 컬럼 정의 목록 */
16277
- columns = [];
16278
- /** 행 데이터 배열 */
16279
- rows;
16280
- /** 현재 선택된 행 목록 */
16281
- selected = [];
16282
- /** 행 고유 식별 필드명 */
16283
- rowKey = 'id';
16284
- /** 행 선택(체크박스) 기능 활성화 여부 */
16285
- selectable = false;
16286
- /** 컬럼 너비 조절 기능 활성화 여부 */
16287
- resizable = false;
16288
- /** 테이블 너비 */
16289
- width;
16290
- /** 테이블 높이 */
16291
- height;
16292
- /** 헤더 고정(sticky) 여부 */
16293
- stickyHeader = false;
16294
- /** 고정할 좌우 컬럼 수 */
16295
- stickyColumn = { left: 0, right: 0 };
16296
- /** border-radius 제어 */
16297
- radius = 'default';
16298
- /** 데이터 없을 때 표시할 메시지 */
16299
- noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16300
- resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16301
- /** 로딩 스피너 표시 여부 */
16302
- isLoading = false;
16303
- /** 페이지네이션 옵션 */
16304
- pagination;
16305
- /** 테이블 내부에서 페이지네이션을 직접 관리할지 여부 */
16306
- useInternalPagination = false;
16307
- /** 페이지당 행 수 선택 셀렉트 표시 여부 */
16308
- useRowsPerPageSelect = false;
16309
- /** 행 높이를 줄인 조밀 모드 여부 */
16310
- dense = false;
16311
- // ─── Virtual Scroll ───────────────────────────────────────────────
16312
- /** 가상 스크롤 사용 여부 */
16313
- useVirtualScroll = false;
16314
- /** 가상 스크롤 행 높이 (px, 없으면 dense 여부에 따라 자동) */
16315
- rowHeight;
16316
- get effectiveRowHeight() {
16317
- if (this.rowHeight != null)
16318
- return this.rowHeight;
16319
- return this.dense
16320
- ? Number(TABLE_BODY_LAYOUT.dense.height)
16321
- : Number(TABLE_BODY_LAYOUT.default.height);
16322
- }
16323
- /** 가상 스크롤 상하 버퍼 행 수 */
16324
- virtualBuffer = 5;
16325
- /** 가상 스크롤 끝 도달 감지 임계값 (마지막 N행 이내에 들어오면 이벤트 발생) */
16326
- virtualEndThreshold = 10;
16327
- // ─────────────────────────────────────────────────────────────────
16328
- /** 페이지당 행 수 선택 옵션 목록 */
16329
- rowsPerPageOption = [
16330
- { label: '10개씩 보기', value: 10 },
16331
- { label: '25개씩 보기', value: 25 },
16332
- { label: '50개씩 보기', value: 50 },
16333
- { label: '100개씩 보기', value: 100 },
16334
- ];
16335
- /** 행 선택 상태가 변경될 때 선택된 행 목록을 전달합니다. */
16336
- sdSelectChange;
16337
- /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
16338
- sdPageChange;
16339
- /** 페이지당 행 수가 변경될 때 발생합니다. */
16340
- sdRowsPerPageChange;
16341
- /** 가상 스크롤 가시 범위가 변경될 때 발생합니다. */
16342
- sdVirtualUpdate;
16343
- /** 가상 스크롤이 끝 임계값에 도달할 때 발생합니다. */
16344
- sdVirtualReachEnd;
16345
- currentPage = 1;
16346
- innerRowsPerPage = 10;
16347
- innerSelected = new Set();
16348
- columnWidths = [];
16349
- scrolledLeft = false;
16350
- scrolledRight = false;
16351
- rowCount = 0;
16352
- loadingScrollTop = 0;
16353
- noDataBodyHeight = 60;
16354
- // light DOM에 sd-thead / sd-tbody 자식이 없으면 sd-table이 직접 렌더해야 함을 알리는 플래그.
16355
- // componentWillLoad에서 한 번 결정되며, 이후 동적 토글은 지원하지 않는다.
16356
- autoThead = false;
16357
- autoTbody = false;
16358
- vsStart = 0;
16359
- vsEnd = 0;
16360
- lastReachEndNotifiedRowCount = -1;
16361
- scrollContainer = null;
16362
- noDataContentEl = null;
16363
- noDataContentResizeObserver;
16364
- onScroll;
16365
- // 키: `${rowKey}::${field}` → { rowspan, colspan }
16366
- spanRegistry = new Map();
16367
- // rowKey → Set<field>: useFrame=true인 sd-td가 있는 행을 추적한다.
16368
- // 하나라도 등록되면 해당 행은 dense를 무시하고 default 레이아웃으로 렌더된다.
16369
- useFrameRegistry = new Map();
16370
- // 키: `${rowKey}::${field}` → sd-td의 sdClass 문자열
16371
- // sd-tr가 td를 그릴 때 머지해서 셀-단위 커스텀 클래스를 적용한다.
16372
- cellClassRegistry = new Map();
16373
- // rowKey 문자열 → rows 배열에서의 visual index.
16374
- // rowspan 위쪽 행 스캔에서 "내 위에 있느냐"를 판정하기 위한 시각적 순서 소스.
16375
- // rows prop이 있으면 채워지고, 없으면 비어 있어 Number(rowKey) fallback이 사용된다.
16376
- rowIndexMap = new Map();
16377
- rebuildRowIndexMap() {
16378
- this.rowIndexMap.clear();
16379
- if (!Array.isArray(this.rows))
16380
- return;
16381
- const field = this.rowKey;
16382
- this.rows.forEach((r, i) => {
16383
- const k = r?.[field];
16384
- if (k == null)
16385
- return;
16386
- this.rowIndexMap.set(String(k), i);
16387
- });
16388
- }
16389
- // rowKey의 시각적 행 인덱스를 돌려준다.
16390
- // 1) rows 기반 맵에 있으면 그 값 (임의 문자열 rowKey 지원)
16391
- // 2) 없으면 Number(rowKey) fallback (rows prop 없이 슬롯-온리 + 숫자 rowKey 사용 패턴)
16392
- // 3) 둘 다 안 되면 null — rowspan 평가 스킵
16393
- resolveRowIndex(rowKey) {
16394
- const fromMap = this.rowIndexMap.get(rowKey);
16395
- if (fromMap !== undefined)
16396
- return fromMap;
16397
- const n = Number(rowKey);
16398
- return Number.isFinite(n) ? n : null;
16399
- }
16400
- toFiniteNumber(value, fallback) {
16401
- const n = typeof value === 'number' ? value : Number(value);
16402
- return Number.isFinite(n) ? n : fallback;
16403
- }
16404
- isRowsPerPageValue(value) {
16405
- return value === null || typeof value === 'string' || typeof value === 'number';
16406
- }
16407
- isValidTableId(value) {
16408
- return (typeof value === 'string' &&
16409
- value.trim().length > 0 &&
16410
- value !== 'undefined' &&
16411
- value !== 'null');
16412
- }
16413
- getResolvedTableId() {
16414
- if (this.isValidTableId(this.tableId))
16415
- return this.tableId;
16416
- const attrId = this.el?.getAttribute(TABLE_ID_ATTR);
16417
- if (this.isValidTableId(attrId))
16418
- return attrId;
16419
- return this.fallbackTableId;
16420
- }
16421
- syncTableIdAttribute() {
16422
- const resolvedTableId = this.getResolvedTableId();
16423
- if (this.el?.getAttribute(TABLE_ID_ATTR) !== resolvedTableId) {
16424
- this.el.setAttribute(TABLE_ID_ATTR, resolvedTableId);
16425
- }
16426
- }
16427
- handleIsLoadingChange(newVal) {
16428
- if (newVal) {
16429
- this.loadingScrollTop = this.scrollContainer?.scrollTop ?? 0;
16430
- }
16431
- this.syncNoDataContentObserver();
16432
- }
16433
- handleUseVirtualScrollChange(newVal) {
16434
- if (newVal) {
16435
- // DOM이 새 --table-container-height로 업데이트된 후 계산해야 정확함
16436
- readTask(() => this.propagateVirtualUpdate());
16437
- }
16438
- }
16439
- handleColumnsChange(newCols) {
16440
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
16441
- this.refreshChildrenConfig();
16442
- }
16443
- handleRowsChange(newRows) {
16444
- if (!Array.isArray(newRows))
16445
- return;
16446
- this.rowCount = newRows.length;
16447
- this.rebuildRowIndexMap();
16448
- if (this.useVirtualScroll)
16449
- this.propagateVirtualUpdate(true);
16450
- this.pushRowsToChildren(newRows);
16451
- this.syncNoDataContentObserver();
16452
- }
16453
- handleRowKeyChange() {
16454
- this.rebuildRowIndexMap();
16455
- }
16456
- handleTableIdChange() {
16457
- this.syncTableIdAttribute();
16458
- }
16459
- handleNoDataLabelChange(newLabel) {
16460
- if (typeof newLabel === 'string' &&
16461
- newLabel.trim().length > 0 &&
16462
- newLabel !== 'undefined' &&
16463
- newLabel !== 'null') {
16464
- this.resolvedNoDataLabel = newLabel;
16465
- }
16466
- else {
16467
- this.resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
16468
- }
16469
- }
16470
- handleConfigChange() {
16471
- this.refreshChildrenConfig();
16472
- }
16473
- handleSelectedChange(newSelected) {
16474
- this.innerSelected = new Set(newSelected);
16475
- }
16476
- handlePaginationChange(newVal) {
16477
- if (newVal?.page != null && newVal.page !== this.currentPage) {
16478
- this.currentPage = newVal.page;
16479
- }
16480
- if (newVal?.rowsPerPage != null && newVal.rowsPerPage !== this.innerRowsPerPage) {
16481
- this.innerRowsPerPage = newVal.rowsPerPage;
16482
- }
16483
- }
16484
- detectChildren() {
16485
- const hasThead = !!this.el.querySelector(':scope > sd-thead');
16486
- const hasTbody = !!this.el.querySelector(':scope > sd-tbody');
16487
- this.autoThead = !hasThead;
16488
- this.autoTbody = !hasTbody;
16489
- }
16490
- componentWillLoad() {
16491
- this.syncTableIdAttribute();
16492
- this.handleNoDataLabelChange(this.noDataLabel);
16493
- this.detectChildren();
16494
- this.innerSelected = new Set(this.selected || []);
16495
- this.columnWidths = (this.columns || []).map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
16496
- this.rebuildRowIndexMap();
16497
- if (this.pagination?.page != null) {
16498
- this.currentPage = this.pagination.page;
16499
- }
16500
- if (this.pagination?.rowsPerPage != null) {
16501
- this.innerRowsPerPage = this.pagination.rowsPerPage;
16502
- }
16503
- // host element 에 자식 컴포넌트(sd-thead/sd-tbody/sd-tr) 가 직접 접근하는 internal sync helpers 를 monkey-patch.
16504
- // 28개 메서드 전체를 typed interface 로 노출하면 코드 비용이 크고, 어차피 internal 이라 외부 사용자가 호출하지 않는다.
16505
- // 정식 @Method 노출로 옮기는 작업은 별도 이슈로 분리.
16506
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16507
- const el = this.el;
16508
- el.isRowSelectedSync = this.isRowSelectedSync.bind(this);
16509
- el.updateRowSelectSync = this.updateRowSelectSync.bind(this);
16510
- el.toggleSelectAllSync = this.toggleSelectAllSync.bind(this);
16511
- el.getIsAllCheckedSync = this.getIsAllCheckedSync.bind(this);
16512
- el.getStickyStyleSync = this.getStickyStyleSync.bind(this);
16513
- el.setRowCountSync = this.setRowCountSync.bind(this);
16514
- el.handleResize = this.handleResize.bind(this);
16515
- el.getPaginationInfoSync = this.getPaginationInfoSync.bind(this);
16516
- el.getVirtualScrollRangeSync = this.getVirtualScrollRangeSync.bind(this);
16517
- el.getConfigSync = this.getConfigSync.bind(this);
16518
- el.getTableIdSync = () => this.getResolvedTableId();
16519
- el.getVirtualScrollConfigSync = this.getVirtualScrollConfigSync.bind(this);
16520
- el.calculateVisibleRange = this.calculateVisibleRange.bind(this);
16521
- el.registerSpanSync = this.registerSpanSync.bind(this);
16522
- el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
16523
- el.getSpanSync = this.getSpanSync.bind(this);
16524
- el.isCoveredSync = this.isCoveredSync.bind(this);
16525
- el.hasRowspanSync = this.hasRowspanSync.bind(this);
16526
- el.registerCellClassSync = this.registerCellClassSync.bind(this);
16527
- el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
16528
- el.getCellClassSync = this.getCellClassSync.bind(this);
16529
- el.registerUseFrameSync = this.registerUseFrameSync.bind(this);
16530
- el.unregisterUseFrameSync = this.unregisterUseFrameSync.bind(this);
16531
- el.hasUseFrameInRowSync = this.hasUseFrameInRowSync.bind(this);
16532
- el.isCellUseFrameSync = this.isCellUseFrameSync.bind(this);
16533
- if (Array.isArray(this.rows)) {
16534
- this.rowCount = this.rows.length;
16535
- this.pushRowsToChildren(this.rows);
16536
- }
16537
- }
16538
- componentDidLoad() {
16539
- if (Array.isArray(this.rows)) {
16540
- this.pushRowsToChildren(this.rows);
16541
- }
16542
- readTask(() => {
16543
- const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
16544
- if (!wrapper)
16545
- return;
16546
- let rafPending = false;
16547
- this.onScroll = () => {
16548
- // 가로 스크롤 그림자
16549
- const scrollLeft = wrapper.scrollLeft;
16550
- const scrollWidth = wrapper.scrollWidth;
16551
- const clientWidth = wrapper.clientWidth;
16552
- const newScrolledLeft = scrollLeft > 0;
16553
- const newScrolledRight = scrollLeft + clientWidth < scrollWidth;
16554
- if (this.scrolledLeft !== newScrolledLeft || this.scrolledRight !== newScrolledRight) {
16555
- this.scrolledLeft = newScrolledLeft;
16556
- this.scrolledRight = newScrolledRight;
16557
- this.refreshChildrenConfig();
16558
- }
16559
- // 세로 가상 스크롤 — RAF로 프레임당 1회만 처리
16560
- if (this.useVirtualScroll && !rafPending) {
16561
- rafPending = true;
16562
- requestAnimationFrame(() => {
16563
- rafPending = false;
16564
- this.propagateVirtualUpdate();
16565
- });
16566
- }
16567
- };
16568
- this.scrollContainer = wrapper;
16569
- wrapper.addEventListener('scroll', this.onScroll, { passive: true });
16570
- this.onScroll();
16571
- if (this.useVirtualScroll) {
16572
- this.propagateVirtualUpdate(); // 초기 렌더
16573
- }
16574
- });
16575
- this.syncNoDataContentObserver();
16576
- }
16577
- disconnectedCallback() {
16578
- if (this.scrollContainer && this.onScroll) {
16579
- this.scrollContainer.removeEventListener('scroll', this.onScroll);
16580
- }
16581
- this.noDataContentResizeObserver?.disconnect();
16582
- this.noDataContentResizeObserver = undefined;
16583
- }
16584
- syncNoDataContentObserver() {
16585
- const isNoData = this.rowCount === 0 && !this.isLoading;
16586
- if (!isNoData) {
16587
- this.noDataContentResizeObserver?.disconnect();
16588
- this.noDataContentResizeObserver = undefined;
16589
- this.noDataBodyHeight = 60;
16590
- return;
16591
- }
16592
- this.observeNoDataContentHeight();
16593
- }
16594
- // observer를 붙이고 콘텐츠 높이를 측정해 noDataBodyHeight를 갱신하는 함수
16595
- observeNoDataContentHeight() {
16596
- if (typeof ResizeObserver === 'undefined')
16597
- return;
16598
- const target = this.noDataContentEl;
16599
- if (!target)
16600
- return;
16601
- this.noDataContentResizeObserver?.disconnect();
16602
- this.noDataContentResizeObserver = new ResizeObserver(() => {
16603
- const measured = Math.ceil(target.scrollHeight);
16604
- const nextHeight = Math.max(60, measured);
16605
- if (nextHeight !== this.noDataBodyHeight) {
16606
- this.noDataBodyHeight = nextHeight;
16607
- }
16608
- });
16609
- this.noDataContentResizeObserver.observe(target);
16610
- readTask(() => {
16611
- if (!this.noDataContentEl)
16612
- return;
16613
- const measured = Math.ceil(this.noDataContentEl.scrollHeight);
16614
- const next = Math.max(60, measured);
16615
- if (next !== this.noDataBodyHeight) {
16616
- this.noDataBodyHeight = next;
16617
- }
16618
- });
16619
- }
16620
- queryChildEl(selector) {
16621
- return (this.el.querySelector(selector) ??
16622
- this.el.shadowRoot?.querySelector(selector) ??
16623
- null);
16624
- }
16625
- queryAllTr() {
16626
- const light = Array.from(this.el.querySelectorAll('sd-tr'));
16627
- const shadow = Array.from(this.el.shadowRoot?.querySelectorAll('sd-tr') ?? []);
16628
- return [...light, ...shadow];
16629
- }
16630
- pushRowsToChildren(rows) {
16631
- const tbody = this.queryChildEl('sd-tbody');
16632
- if (tbody)
16633
- tbody.rows = rows;
16634
- const thead = this.queryChildEl('sd-thead');
16635
- if (thead)
16636
- thead.rows = rows;
16637
- }
16638
- handleStructureSlotChange = () => {
16639
- if (Array.isArray(this.rows)) {
16640
- this.pushRowsToChildren(this.rows);
16641
- }
16642
- this.refreshChildrenConfig();
16643
- };
16644
- refreshChildrenSelection() {
16645
- const thead = this.queryChildEl('sd-thead');
16646
- thead?.refreshSelection?.();
16647
- this.queryAllTr().forEach(tr => tr.refreshSelection?.());
16648
- }
16649
- refreshChildrenConfig() {
16650
- const thead = this.queryChildEl('sd-thead');
16651
- thead?.refreshConfig?.();
16652
- this.queryAllTr().forEach(tr => tr.refreshConfig?.());
16653
- }
16654
- maybeEmitVirtualReachEnd(start, end) {
16655
- const threshold = Math.max(1, this.virtualEndThreshold);
16656
- const nearEnd = end >= Math.max(0, this.rowCount - threshold);
16657
- if (!nearEnd)
16658
- return;
16659
- if (this.lastReachEndNotifiedRowCount === this.rowCount)
16660
- return;
16661
- this.lastReachEndNotifiedRowCount = this.rowCount;
16662
- this.sdVirtualReachEnd.emit({
16663
- from: start,
16664
- to: end,
16665
- rowCount: this.rowCount,
16666
- threshold,
16667
- });
16668
- }
16669
- propagateVirtualUpdate(forceSpacerUpdate = false) {
16670
- if (!this.scrollContainer || !this.useVirtualScroll)
16671
- return;
16672
- const scrollTop = this.toFiniteNumber(this.scrollContainer.scrollTop, 0);
16673
- const containerHeight = this.toFiniteNumber(this.scrollContainer.clientHeight, 0);
16674
- const { start, end } = this.calculateVisibleRange(scrollTop, containerHeight);
16675
- if (!Number.isFinite(start) || !Number.isFinite(end))
16676
- return;
16677
- const rangeChanged = this.vsStart !== start || this.vsEnd !== end;
16678
- if (!rangeChanged && !forceSpacerUpdate)
16679
- return;
16680
- this.vsStart = start;
16681
- this.vsEnd = end;
16682
- const topHeight = start * this.effectiveRowHeight;
16683
- const bottomHeight = Math.max(0, (this.rowCount - end) * this.effectiveRowHeight);
16684
- // setSpacersSync 는 sd-tbody 가 host element 에 monkey-patch 하는 internal sync helper.
16685
- const tbody = this.queryChildEl('sd-tbody');
16686
- tbody?.setSpacersSync?.(topHeight, bottomHeight);
16687
- if (rangeChanged) {
16688
- this.sdVirtualUpdate.emit({
16689
- from: start,
16690
- to: end,
16691
- });
16692
- }
16693
- this.maybeEmitVirtualReachEnd(start, end);
16694
- }
16695
- getVirtualScrollConfigSync() {
16696
- return {
16697
- useVirtualScroll: this.useVirtualScroll,
16698
- rowHeight: this.effectiveRowHeight,
16699
- virtualBuffer: this.virtualBuffer,
16700
- vsStart: this.vsStart,
16701
- vsEnd: this.vsEnd,
16702
- rowCount: this.rowCount,
16703
- };
16704
- }
16705
- getConfigSync() {
16706
- return {
16707
- columns: this.columns,
16708
- selectable: this.selectable,
16709
- resizable: this.resizable,
16710
- stickyColumn: this.stickyColumn,
16711
- stickyHeader: this.stickyHeader,
16712
- scrolledLeft: this.scrolledLeft,
16713
- scrolledRight: this.scrolledRight,
16714
- columnWidths: this.columnWidths,
16715
- dense: this.dense,
16716
- };
16717
- }
16718
- registerUseFrameSync(rowKey, field) {
16719
- if (rowKey == null || field === '')
16720
- return;
16721
- let fields = this.useFrameRegistry.get(rowKey);
16722
- if (!fields) {
16723
- fields = new Set();
16724
- this.useFrameRegistry.set(rowKey, fields);
16725
- }
16726
- fields.add(field);
16727
- }
16728
- unregisterUseFrameSync(rowKey, field) {
16729
- if (rowKey == null || field === '')
16730
- return;
16731
- const fields = this.useFrameRegistry.get(rowKey);
16732
- if (!fields)
16733
- return;
16734
- fields.delete(field);
16735
- if (fields.size === 0)
16736
- this.useFrameRegistry.delete(rowKey);
16737
- }
16738
- hasUseFrameInRowSync(rowKey) {
16739
- const fields = this.useFrameRegistry.get(rowKey);
16740
- return fields != null && fields.size > 0;
16741
- }
16742
- isCellUseFrameSync(rowKey, field) {
16743
- return this.useFrameRegistry.get(rowKey)?.has(field) ?? false;
16744
- }
16745
- isRowSelectedSync(row) {
16746
- return Array.from(this.innerSelected).some(r => r[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id']);
16747
- }
16748
- /** 행이 선택되어 있는지 확인합니다. */
16749
- async isRowSelected(row) {
16750
- return this.isRowSelectedSync(row);
16751
- }
16752
- updateRowSelectSync(row) {
16753
- const selectedArray = Array.from(this.innerSelected);
16754
- const exists = this.isRowSelectedSync(row);
16755
- const newSelected = exists
16756
- ? selectedArray.filter(r => r[this.rowKey ?? 'id'] !== row[this.rowKey ?? 'id'])
16757
- : [...selectedArray, row];
16758
- if (newSelected.length === selectedArray.length)
16759
- return;
16760
- this.innerSelected = new Set(newSelected);
16761
- this.selected = Array.from(this.innerSelected);
16762
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16763
- this.refreshChildrenSelection();
16764
- }
16765
- /** 행 선택 상태를 토글합니다. */
16766
- async updateRowSelect(row) {
16767
- this.updateRowSelectSync(row);
16768
- }
16769
- toggleSelectAllSync(checked, rows) {
16770
- if (checked) {
16771
- const pageRows = new Set([...rows]);
16772
- this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
16773
- }
16774
- else {
16775
- const currentPageKeys = rows.map(r => r[this.rowKey ?? 'id']);
16776
- this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey ?? 'id'])));
16777
- }
16778
- this.selected = Array.from(this.innerSelected);
16779
- this.sdSelectChange.emit(Array.from(this.innerSelected));
16780
- this.refreshChildrenSelection();
16781
- }
16782
- /** 전체 행 선택/해제를 처리합니다. */
16783
- async toggleSelectAll(checked, rows) {
16784
- this.toggleSelectAllSync(checked, rows);
16785
- }
16786
- getIsAllCheckedSync(rows) {
16787
- const total = rows.length;
16788
- const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey ?? 'id'] === row[this.rowKey ?? 'id'])).length;
16789
- if (selectedCount === 0)
16790
- return false;
16791
- if (selectedCount === total)
16792
- return true;
16793
- return null; // indeterminate
16794
- }
16795
- /** 전체 선택 체크 상태를 반환합니다 (true/false/null=indeterminate). */
16796
- async getIsAllChecked(rows) {
16797
- return this.getIsAllCheckedSync(rows);
16798
- }
16799
- changePage(page) {
16800
- if (!this.useInternalPagination) {
16801
- this.sdPageChange.emit(page);
16802
- return;
16803
- }
16804
- this.currentPage = page;
16805
- this.sdPageChange.emit(this.currentPage);
16806
- this.updateRowsVisibility();
16807
- }
16808
- updateRowsVisibility() {
16809
- this.queryAllTr().forEach(tr => tr.updateVisibility?.());
16810
- }
16811
- changeRowsPerPage(perPage) {
16812
- const changedRowsPerPage = perPage != null && perPage !== '' ? Number(perPage) : 0;
16813
- if (!this.useInternalPagination) {
16814
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16815
- return;
16816
- }
16817
- this.innerRowsPerPage = changedRowsPerPage;
16818
- const newLastPage = Math.max(1, Math.ceil(this.rowCount / changedRowsPerPage));
16819
- if (this.currentPage > newLastPage) {
16820
- this.currentPage = newLastPage;
16821
- }
16822
- this.sdRowsPerPageChange.emit(changedRowsPerPage);
16823
- this.updateRowsVisibility();
16824
- }
16825
- get lastPageNumber() {
16826
- if (this.useInternalPagination) {
16827
- return Math.max(1, Math.ceil(this.rowCount / this.innerRowsPerPage));
16828
- }
16829
- const { lastPage, rowsPerPage = 10 } = this.pagination || {};
16830
- return lastPage ?? Math.max(1, Math.ceil(this.rowCount / rowsPerPage));
16831
- }
16832
- handleResize(index, event, reversed = false) {
16833
- if (typeof document === 'undefined')
16834
- return;
16835
- const startX = event.clientX;
16836
- const startWidth = this.columnWidths[index];
16837
- const handleMouseMove = (moveEvent) => {
16838
- const col = this.columns[index];
16839
- if (col == null)
16840
- return;
16841
- const minWidth = col.minWidth || 50;
16842
- const maxWidth = col.maxWidth || 9999;
16843
- const delta = moveEvent.clientX - startX;
16844
- const newWidth = Math.min(Math.max(startWidth + (reversed ? -delta : delta), minWidth), maxWidth);
16845
- this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
16846
- const thead = this.queryChildEl('sd-thead');
16847
- thead?.setColumnWidths?.(this.columnWidths);
16848
- this.queryAllTr().forEach(tr => tr.setColumnWidths?.(this.columnWidths));
16849
- const stickyRightCount = this.stickyColumn?.right || 0;
16850
- const visibleColCount = this.columns.filter(c => c.visible !== false).length;
16851
- const isRightStickyEdgeResizer = stickyRightCount > 0 && index === visibleColCount - stickyRightCount;
16852
- if (isRightStickyEdgeResizer) {
16853
- requestAnimationFrame(() => {
16854
- this.onScroll?.();
16855
- });
16856
- }
16857
- };
16858
- const handleMouseUp = () => {
16859
- document.removeEventListener('mousemove', handleMouseMove);
16860
- document.removeEventListener('mouseup', handleMouseUp);
16861
- };
16862
- document.addEventListener('mousemove', handleMouseMove);
16863
- document.addEventListener('mouseup', handleMouseUp);
16864
- }
16865
- getStickyStyleSync(colIdx) {
16866
- const leftOffset = this.columnWidths
16867
- .slice(0, colIdx)
16868
- .reduce((a, b) => a + b, this.selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
16869
- const rightOffset = this.columnWidths
16870
- .filter((_, i) => i >=
16871
- this.columns.filter(c => c.visible !== false).length -
16872
- (this.stickyColumn?.right || 0) && i > colIdx)
16873
- .reduce((a, b) => a + b, 0);
16874
- const visibleCol = this.columns.filter(c => c.visible !== false)[colIdx];
16875
- const base = {
16876
- '--sticky-left-offset': `${leftOffset}px`,
16877
- '--sticky-right-offset': `${rightOffset}px`,
16878
- };
16879
- if (!visibleCol?.autoWidth) {
16880
- base['width'] = `${this.columnWidths[colIdx]}px`;
16881
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
16882
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
16883
- }
16884
- return base;
16885
- }
16886
- /** 지정한 컬럼 인덱스의 sticky 스타일 객체를 반환합니다. */
16887
- async getStickyStyle(colIdx) {
16888
- return this.getStickyStyleSync(colIdx);
16889
- }
16890
- // ─── rowspan / colspan registry ─────────────────────────────────
16891
- // sd-td가 mount/unmount 시 자기 (rowKey, field)와 span을 등록한다.
16892
- // sd-tr는 render마다 isCoveredSync로 자신의 셀 위치가 다른 셀의 span에
16893
- // 덮였는지 판정해 <td>를 그릴지 결정한다.
16894
- spanKey(rowKey, field) {
16895
- return `${rowKey}::${field}`;
16896
- }
16897
- // span 등록은 sd-td의 lifecycle에서 비동기적으로 일어나므로,
16898
- // 등록/해제 직후 형제 sd-tr들이 새 레지스트리 상태로 다시 그려져야
16899
- // 덮인 셀이 사라지거나 다시 나타난다.
16900
- // forceUpdate는 React 래퍼 환경에서 prop 동기화 사이클과 부딪혀 누락되는
16901
- // 경우가 있어, sd-tr의 @State (spansVersion)을 통해 재렌더를 강제한다.
16902
- requestAllTrUpdate() {
16903
- this.queryAllTr().forEach(tr => {
16904
- if (typeof tr.bumpSpansVersion === 'function') {
16905
- tr.bumpSpansVersion();
16906
- }
16907
- });
16908
- }
16909
- registerSpanSync(rowKey, field, rowspan, colspan) {
16910
- if (rowKey == null || field === '')
16911
- return;
16912
- const safeRowspan = Math.max(1, Math.floor(rowspan || 1));
16913
- const safeColspan = Math.max(1, Math.floor(colspan || 1));
16914
- const key = this.spanKey(rowKey, field);
16915
- const prev = this.spanRegistry.get(key);
16916
- if (safeRowspan === 1 && safeColspan === 1) {
16917
- if (!prev)
16918
- return;
16919
- this.spanRegistry.delete(key);
16920
- this.requestAllTrUpdate();
16921
- return;
16922
- }
16923
- if (prev && prev.rowspan === safeRowspan && prev.colspan === safeColspan)
16924
- return;
16925
- this.spanRegistry.set(key, { rowspan: safeRowspan, colspan: safeColspan });
16926
- this.requestAllTrUpdate();
16927
- }
16928
- unregisterSpanSync(rowKey, field) {
16929
- if (rowKey == null || field === '')
16930
- return;
16931
- const key = this.spanKey(rowKey, field);
16932
- if (!this.spanRegistry.has(key))
16933
- return;
16934
- this.spanRegistry.delete(key);
16935
- this.requestAllTrUpdate();
16936
- }
16937
- getSpanSync(rowKey, field) {
16938
- return this.spanRegistry.get(this.spanKey(rowKey, field));
16939
- }
16940
- // sd-td의 sdClass 등록. 빈/공백만 있는 값은 해제로 취급.
16941
- // span과 달리 다른 셀에 영향이 없으므로 형제 sd-tr 전체를 재렌더하지 않고,
16942
- // sd-td 쪽에서 자기 부모 tr만 bumpSpansVersion으로 새로 그린다.
16943
- registerCellClassSync(rowKey, field, cls) {
16944
- if (rowKey == null || field === '')
16945
- return;
16946
- const key = this.spanKey(rowKey, field);
16947
- const safe = (cls ?? '').trim();
16948
- if (safe === '') {
16949
- this.cellClassRegistry.delete(key);
16950
- return;
16951
- }
16952
- this.cellClassRegistry.set(key, safe);
16953
- }
16954
- unregisterCellClassSync(rowKey, field) {
16955
- if (rowKey == null || field === '')
16956
- return;
16957
- this.cellClassRegistry.delete(this.spanKey(rowKey, field));
16958
- }
16959
- getCellClassSync(rowKey, field) {
16960
- return this.cellClassRegistry.get(this.spanKey(rowKey, field));
16961
- }
16962
- // 레지스트리에 rowspan>1 항목이 하나라도 있으면 true.
16963
- // hover 동작을 끌지 결정하는 데 사용 — colspan만 있는 경우는 그대로 hover 유지.
16964
- hasRowspanSync() {
16965
- for (const span of this.spanRegistry.values()) {
16966
- if (span.rowspan > 1)
16967
- return true;
16968
- }
16969
- return false;
16970
- }
16971
- isCoveredSync(rowKey, colIdx, columns) {
16972
- if (this.spanRegistry.size === 0)
16973
- return false;
16974
- const visibleCols = columns.filter(c => c.visible !== false);
16975
- // 1. 같은 행 왼쪽 스캔 — colspan으로 이 위치를 덮는 셀이 있는가
16976
- for (let i = 0; i < colIdx; i++) {
16977
- const c = visibleCols[i];
16978
- if (c == null)
16979
- continue;
16980
- const field = typeof c.field === 'string' ? c.field : c.name;
16981
- const span = this.spanRegistry.get(this.spanKey(rowKey, field));
16982
- if (!span)
16983
- continue;
16984
- if (i + span.colspan > colIdx)
16985
- return true;
16986
- }
16987
- // 2. 위쪽 행 스캔 — rows 기반 visual index로 "내 위에 있느냐" 판정
16988
- // rows prop이 있으면 rowIndexMap로 임의 문자열 rowKey 지원,
16989
- // 없으면 Number(rowKey) fallback (resolveRowIndex가 처리)
16990
- const myRowIdx = this.resolveRowIndex(rowKey);
16991
- if (myRowIdx == null)
16992
- return false;
16993
- for (const [key, span] of this.spanRegistry) {
16994
- if (span.rowspan <= 1)
16995
- continue;
16996
- const sepIdx = key.indexOf('::');
16997
- if (sepIdx < 0)
16998
- continue;
16999
- const otherRowKey = key.slice(0, sepIdx);
17000
- const otherField = key.slice(sepIdx + 2);
17001
- const otherRowIdx = this.resolveRowIndex(otherRowKey);
17002
- if (otherRowIdx == null)
17003
- continue;
17004
- if (otherRowIdx >= myRowIdx)
17005
- continue;
17006
- if (otherRowIdx + span.rowspan <= myRowIdx)
17007
- continue;
17008
- const otherColIdx = visibleCols.findIndex(c => (typeof c.field === 'string' ? c.field : c.name) === otherField);
17009
- if (otherColIdx < 0)
17010
- continue;
17011
- if (otherColIdx <= colIdx && otherColIdx + span.colspan > colIdx)
17012
- return true;
17013
- }
17014
- return false;
17015
- }
17016
- setRowCountSync(count) {
17017
- const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
17018
- if (safeCount !== this.rowCount) {
17019
- this.lastReachEndNotifiedRowCount = -1;
17020
- }
17021
- this.rowCount = safeCount;
17022
- if (this.useVirtualScroll) {
17023
- this.propagateVirtualUpdate(true);
17024
- }
17025
- }
17026
- /** 가상 스크롤 총 행 수를 설정합니다. */
17027
- async setRowCount(count) {
17028
- this.setRowCountSync(count);
17029
- }
17030
- calculateVisibleRange(scrollTop, containerHeight) {
17031
- const safeRowHeight = Math.max(1, this.toFiniteNumber(this.effectiveRowHeight, 40));
17032
- const safeBuffer = Math.max(0, Math.floor(this.toFiniteNumber(this.virtualBuffer, 5)));
17033
- const safeScrollTop = Math.max(0, this.toFiniteNumber(scrollTop, 0));
17034
- const safeContainerHeight = Math.max(0, this.toFiniteNumber(containerHeight, 0));
17035
- const safeRowCount = Math.max(0, Math.floor(this.toFiniteNumber(this.rowCount, 0)));
17036
- const firstVisible = Math.floor(safeScrollTop / safeRowHeight);
17037
- const visibleCount = Math.ceil(safeContainerHeight / safeRowHeight);
17038
- const start = Math.max(0, firstVisible - safeBuffer);
17039
- const end = Math.min(safeRowCount, firstVisible + visibleCount + safeBuffer);
17040
- return { start, end };
17041
- }
17042
- getPaginationInfoSync() {
17043
- if (!this.useInternalPagination || !this.pagination)
17044
- return null;
17045
- const startIndex = (this.currentPage - 1) * this.innerRowsPerPage;
17046
- const endIndex = startIndex + this.innerRowsPerPage;
17047
- return {
17048
- startIndex,
17049
- endIndex,
17050
- currentPage: this.currentPage,
17051
- rowsPerPage: this.innerRowsPerPage,
17052
- };
17053
- }
17054
- /** 현재 페이지네이션 상태(startIndex, endIndex, currentPage, rowsPerPage)를 반환합니다. */
17055
- async getPaginationInfo() {
17056
- return this.getPaginationInfoSync();
17057
- }
17058
- getVirtualScrollRangeSync() {
17059
- if (!this.useVirtualScroll)
17060
- return null;
17061
- if (!(this.vsEnd > 0))
17062
- return null;
17063
- return { from: this.vsStart, to: this.vsEnd };
17064
- }
17065
- // autoTbody fallback에서 sd-table이 직접 sd-tr을 만들어내는 경로.
17066
- // 가상 스크롤은 사용자가 직접 SdTbody+SdTr을 작성해야 하므로 빈 배열을 반환한다.
17067
- renderAutoRows() {
17068
- if (this.useVirtualScroll)
17069
- return null;
17070
- const allRows = this.rows ?? [];
17071
- const pageInfo = this.getPaginationInfoSync();
17072
- const startIdx = pageInfo?.startIndex ?? 0;
17073
- const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
17074
- return displayed.map((row, i) => {
17075
- const absoluteIdx = startIdx + i;
17076
- return hAsync("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
17077
- });
17078
- }
17079
- get tableClasses() {
17080
- return [
17081
- 'sd-table',
17082
- this.stickyHeader && 'sd-table--sticky-header',
17083
- this.selectable && 'sd-table--selectable',
17084
- this.resizable && 'sd-table--resizable',
17085
- (this.selectable ||
17086
- (this.stickyColumn?.left ?? 0) > 0 ||
17087
- (this.stickyColumn?.right ?? 0) > 0) &&
17088
- 'sd-table--sticky-column',
17089
- this.scrolledLeft && 'sd-table--scrolled-left',
17090
- this.scrolledRight && 'sd-table--scrolled-right',
17091
- this.rowCount === 0 && !this.isLoading && 'sd-table--no-data',
17092
- ]
17093
- .filter(Boolean)
17094
- .join(' ');
17095
- }
17096
- render() {
17097
- const resolvedTableId = this.getResolvedTableId();
17098
- const isNoData = this.rowCount === 0 && !this.isLoading;
17099
- const paginationHeight = this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0;
17100
- const noDataTotalHeight = 36 + this.noDataBodyHeight;
17101
- const hostHeight = isNoData
17102
- ? this.height !== undefined
17103
- ? `max(${this.height}, ${noDataTotalHeight}px)`
17104
- : `max(${noDataTotalHeight}px, 100%)`
17105
- : (this.height ?? '100%');
17106
- const hostStyle = {
17107
- '--table-radius': `${TABLE_RADIUS}px`,
17108
- '--table-border-color': TABLE_BORDER.color,
17109
- '--table-border-width': `${TABLE_BORDER.width}px`,
17110
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
17111
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
17112
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
17113
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
17114
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
17115
- '--table-selectable-width': `${TABLE_SELECTABLE_COLUMN_WIDTH}px`,
17116
- '--table-host-height': hostHeight,
17117
- };
17118
- return (hAsync(Host, { key: 'b90b9865f78c2b42c3c13ad27ed968dd97827eb6', style: hostStyle }, hAsync("div", { key: '2eb291b03b219a3abb4da5967c6d0f43195b458e', class: "sd-table__container", style: {
17119
- '--table-width': this.width,
17120
- '--pagination-height': `${paginationHeight}px`,
17121
- } }, hAsync("div", { key: '999feaffbf82db9233416a1d66974e8859b9b3a0', class: {
17122
- 'sd-table__wrapper': true,
17123
- 'sd-table__wrapper--radius-useTop': this.radius === 'useTop',
17124
- 'sd-table__wrapper--radius-full': this.radius === 'full',
17125
- } }, hAsync("div", { key: 'ff0a04325ab9fe1ba5e6b25f52bb8265226fbba4', class: {
17126
- 'sd-table__scroll-container': true,
17127
- 'sd-table__scroll-container--loading': this.isLoading,
17128
- 'sd-table__scroll-container--no-data': isNoData,
17129
- } }, 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 => {
17130
- this.noDataContentEl = el;
17131
- if (el)
17132
- this.syncNoDataContentObserver();
17133
- } }, 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 &&
17134
- this.pagination.rowsPerPage > 0 &&
17135
- this.rowCount > 0 &&
17136
- !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
17137
- ? this.innerRowsPerPage
17138
- : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
17139
- if (!this.isRowsPerPageValue(e.detail))
17140
- return;
17141
- this.changeRowsPerPage(e.detail);
17142
- } })))))));
17143
- }
17144
- static get watchers() { return {
17145
- "isLoading": [{
17146
- "handleIsLoadingChange": 0
17147
- }],
17148
- "useVirtualScroll": [{
17149
- "handleUseVirtualScrollChange": 0
17150
- }],
17151
- "columns": [{
17152
- "handleColumnsChange": 0
17153
- }],
17154
- "rows": [{
17155
- "handleRowsChange": 0
17156
- }],
17157
- "rowKey": [{
17158
- "handleRowKeyChange": 0
17159
- }],
17160
- "tableId": [{
17161
- "handleTableIdChange": 0
17162
- }],
17163
- "noDataLabel": [{
17164
- "handleNoDataLabelChange": 0
17165
- }],
17166
- "selectable": [{
17167
- "handleConfigChange": 0
17168
- }],
17169
- "resizable": [{
17170
- "handleConfigChange": 0
17171
- }],
17172
- "stickyColumn": [{
17173
- "handleConfigChange": 0
17174
- }],
17175
- "stickyHeader": [{
17176
- "handleConfigChange": 0
17177
- }],
17178
- "dense": [{
17179
- "handleConfigChange": 0
17180
- }],
17181
- "selected": [{
17182
- "handleSelectedChange": 0
17183
- }],
17184
- "pagination": [{
17185
- "handlePaginationChange": 0
17186
- }]
17187
- }; }
17188
- static get style() { return sdTableCss(); }
17189
- static get cmpMeta() { return {
17190
- "$flags$": 777,
17191
- "$tagName$": "sd-table",
17192
- "$members$": {
17193
- "tableId": [513, "table-id"],
17194
- "columns": [16],
17195
- "rows": [16],
17196
- "selected": [1040],
17197
- "rowKey": [1, "row-key"],
17198
- "selectable": [4],
17199
- "resizable": [4],
17200
- "width": [1],
17201
- "height": [1],
17202
- "stickyHeader": [4, "sticky-header"],
17203
- "stickyColumn": [16],
17204
- "radius": [1],
17205
- "noDataLabel": [1, "no-data-label"],
17206
- "isLoading": [4, "is-loading"],
17207
- "pagination": [16],
17208
- "useInternalPagination": [4, "use-internal-pagination"],
17209
- "useRowsPerPageSelect": [4, "use-rows-per-page-select"],
17210
- "dense": [4],
17211
- "useVirtualScroll": [4, "use-virtual-scroll"],
17212
- "rowHeight": [2, "row-height"],
17213
- "virtualBuffer": [2, "virtual-buffer"],
17214
- "virtualEndThreshold": [2, "virtual-end-threshold"],
17215
- "rowsPerPageOption": [16],
17216
- "resolvedNoDataLabel": [32],
17217
- "currentPage": [32],
17218
- "innerRowsPerPage": [32],
17219
- "innerSelected": [32],
17220
- "columnWidths": [32],
17221
- "scrolledLeft": [32],
17222
- "scrolledRight": [32],
17223
- "rowCount": [32],
17224
- "loadingScrollTop": [32],
17225
- "noDataBodyHeight": [32],
17226
- "autoThead": [32],
17227
- "autoTbody": [32],
17228
- "isRowSelected": [64],
17229
- "updateRowSelect": [64],
17230
- "toggleSelectAll": [64],
17231
- "getIsAllChecked": [64],
17232
- "getStickyStyle": [64],
17233
- "setRowCount": [64],
17234
- "getPaginationInfo": [64]
17235
- },
17236
- "$listeners$": undefined,
17237
- "$lazyBundleId$": "-",
17238
- "$attrsToReflect$": [["tableId", "table-id"]]
17239
- }; }
17240
- }
17241
-
17242
16224
  const tab = {
17243
16225
  main: {
17244
16226
  lg: {
@@ -17444,7 +16426,7 @@ class SdTabs {
17444
16426
  };
17445
16427
  }
17446
16428
  render() {
17447
- return (hAsync("div", { key: 'd5df329922f73444775ec827ce8cf3850c369131', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16429
+ return (hAsync("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
17448
16430
  const badgeName = this.getBadgeName(tab);
17449
16431
  return (hAsync("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
17450
16432
  if (e.key === 'Enter' || e.key === ' ') {
@@ -17539,8 +16521,7 @@ const tag = {
17539
16521
  grey: {
17540
16522
  content: "#737373",
17541
16523
  bg: "#EEEEEE"
17542
- }
17543
- };
16524
+ }};
17544
16525
  var tagTokens = {
17545
16526
  tag: tag
17546
16527
  };
@@ -17694,7 +16675,7 @@ class SdTag {
17694
16675
  const config = this.resolvedConfig;
17695
16676
  const iconNode = this.renderIcon(config.icon, config.iconSize);
17696
16677
  const width = this.resolvedWidth;
17697
- return (hAsync(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
16678
+ return (hAsync(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
17698
16679
  '--sd-tag-background': config.background,
17699
16680
  '--sd-tag-content': config.content,
17700
16681
  '--sd-tag-height': config.height,
@@ -17704,7 +16685,7 @@ class SdTag {
17704
16685
  '--sd-tag-font-weight': config.fontWeight,
17705
16686
  '--sd-tag-line-height': config.lineHeight,
17706
16687
  '--sd-tag-radius': config.radius,
17707
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
16688
+ }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
17708
16689
  }
17709
16690
  static get style() { return sdTagCss(); }
17710
16691
  static get cmpMeta() { return {
@@ -17723,292 +16704,6 @@ class SdTag {
17723
16704
  }; }
17724
16705
  }
17725
16706
 
17726
- const sdTbodyCss = () => `:host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}`;
17727
-
17728
- class SdTbody {
17729
- constructor(hostRef) {
17730
- registerInstance(this, hostRef);
17731
- }
17732
- get el() { return getElement(this); }
17733
- /** 렌더링할 행 데이터 목록 */
17734
- rows = [];
17735
- tableId = '';
17736
- topSpacerHeight = 0;
17737
- bottomSpacerHeight = 0;
17738
- tableEl = null;
17739
- handleRowsChange(newRows) {
17740
- const safeRows = newRows ?? [];
17741
- if (this.tableEl?.setRowCountSync) {
17742
- this.tableEl.setRowCountSync(safeRows.length);
17743
- }
17744
- }
17745
- componentWillLoad() {
17746
- this.syncTableContext();
17747
- this.rows = this.rows ?? [];
17748
- if (this.tableEl?.setRowCountSync) {
17749
- this.tableEl.setRowCountSync(this.rows.length);
17750
- }
17751
- this.el.setSpacersSync = (top, bottom) => {
17752
- this.topSpacerHeight = top;
17753
- this.bottomSpacerHeight = bottom;
17754
- };
17755
- }
17756
- componentDidLoad() {
17757
- this.syncTableContext();
17758
- }
17759
- syncTableContext() {
17760
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
17761
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
17762
- const closest = this.el.closest('sd-table');
17763
- const root = this.el.getRootNode();
17764
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
17765
- const table = closest ?? fromShadow;
17766
- this.tableEl = table;
17767
- const fromMethod = table?.getTableIdSync?.();
17768
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17769
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17770
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17771
- '';
17772
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
17773
- this.tableId = resolvedTableId;
17774
- }
17775
- }
17776
- render() {
17777
- return (hAsync(Host, { key: '6d4bea755b962e2f5b9f37129d0b03fd7f997e93', slot: `${this.tableId}-body` }, hAsync("tbody", { key: '11543f7ea385458bcb57ae4e62bfd258bacb9e01', class: { tbody: true } }, [
17778
- this.topSpacerHeight > 0 && (hAsync("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
17779
- hAsync("slot", { key: '515aa270f49dfd20f78de1d11c3c5b914cfda792' }),
17780
- this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
17781
- ])));
17782
- }
17783
- static get watchers() { return {
17784
- "rows": [{
17785
- "handleRowsChange": 0
17786
- }]
17787
- }; }
17788
- static get style() { return sdTbodyCss(); }
17789
- static get cmpMeta() { return {
17790
- "$flags$": 777,
17791
- "$tagName$": "sd-tbody",
17792
- "$members$": {
17793
- "rows": [16],
17794
- "tableId": [32],
17795
- "topSpacerHeight": [32],
17796
- "bottomSpacerHeight": [32]
17797
- },
17798
- "$listeners$": undefined,
17799
- "$lazyBundleId$": "-",
17800
- "$attrsToReflect$": []
17801
- }; }
17802
- }
17803
-
17804
- 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}`;
17805
-
17806
- class SdTd {
17807
- constructor(hostRef) {
17808
- registerInstance(this, hostRef);
17809
- }
17810
- get el() { return getElement(this); }
17811
- /** 데이터 필드명 (슬롯 이름 생성에 사용) */
17812
- field;
17813
- /** 행 식별 키 */
17814
- rowKey;
17815
- /** 셀 내용 정렬 */
17816
- align;
17817
- /** 행 병합 수 */
17818
- rowspan;
17819
- /** 열 병합 수 */
17820
- colspan;
17821
- // sd-tr가 그리는 실제 <td>에 머지될 사용자 클래스.
17822
- // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
17823
- // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
17824
- /** td에 병합할 사용자 클래스 */
17825
- sdClass;
17826
- /** 좌측 구분선 표시 여부 */
17827
- dividerLeft = false;
17828
- /** 우측 구분선 표시 여부 */
17829
- dividerRight = false;
17830
- // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
17831
- /** frame 레이아웃 사용 여부 */
17832
- useFrame = false;
17833
- handleFieldChange(_newField, oldField) {
17834
- this.syncSlotName();
17835
- this.syncSpanRegistration();
17836
- this.syncCellClassRegistration(oldField);
17837
- this.syncUseFrameRegistration(oldField);
17838
- }
17839
- handleRowKeyChange(_newKey, oldKey) {
17840
- this.syncSlotName();
17841
- this.syncSpanRegistration();
17842
- this.syncCellClassRegistration(undefined, oldKey);
17843
- this.syncUseFrameRegistration(undefined, oldKey);
17844
- }
17845
- handleSpanChange() {
17846
- this.syncSpanRegistration();
17847
- }
17848
- handleSdClassChange() {
17849
- this.syncCellClassRegistration();
17850
- }
17851
- handleDividerChange() {
17852
- this.syncCellClassRegistration();
17853
- }
17854
- handleUseFrameChange() {
17855
- this.syncUseFrameRegistration();
17856
- this.requestParentTrUpdate();
17857
- }
17858
- componentWillLoad() {
17859
- this.syncSlotName();
17860
- this.syncSpanRegistration();
17861
- this.syncCellClassRegistration();
17862
- this.syncUseFrameRegistration();
17863
- // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
17864
- const parentTr = this.el.parentElement;
17865
- if (parentTr?.tagName?.toLowerCase() === 'sd-tr') ;
17866
- }
17867
- componentDidLoad() {
17868
- this.syncSlotName();
17869
- this.syncSpanRegistration();
17870
- this.syncCellClassRegistration();
17871
- this.syncUseFrameRegistration();
17872
- }
17873
- // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
17874
- // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
17875
- // 재연결 시점에도 등록 상태를 복구해야 rowspan/colspan이 유지된다.
17876
- connectedCallback() {
17877
- this.syncSpanRegistration();
17878
- this.syncCellClassRegistration();
17879
- this.syncUseFrameRegistration();
17880
- }
17881
- disconnectedCallback() {
17882
- const table = this.findTable();
17883
- if (table != null && this.field !== '' && this.rowKey != null) {
17884
- table.unregisterSpanSync?.(String(this.rowKey), this.field);
17885
- table.unregisterCellClassSync?.(String(this.rowKey), this.field);
17886
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
17887
- this.requestParentTrUpdate();
17888
- }
17889
- }
17890
- findTable() {
17891
- return this.el.closest('sd-table');
17892
- }
17893
- requestParentTrUpdate() {
17894
- const parentTr = this.el.parentElement;
17895
- if (parentTr?.tagName?.toLowerCase() !== 'sd-tr')
17896
- return;
17897
- const trAny = parentTr;
17898
- if (typeof trAny.bumpSpansVersion === 'function') {
17899
- trAny.bumpSpansVersion();
17900
- }
17901
- }
17902
- syncSpanRegistration() {
17903
- const table = this.findTable();
17904
- if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
17905
- return;
17906
- const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
17907
- const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
17908
- table.registerSpanSync(String(this.rowKey), this.field, rs, cs);
17909
- this.requestParentTrUpdate();
17910
- }
17911
- // field/rowKey가 바뀌면 이전 키에 등록된 클래스가 남으므로 먼저 해제하고 새 키로 등록한다.
17912
- syncCellClassRegistration(prevField, prevRowKey) {
17913
- const table = this.findTable();
17914
- if (!table)
17915
- return;
17916
- const oldField = prevField ?? this.field;
17917
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17918
- if (oldField !== '' && oldRowKey != null) {
17919
- table.unregisterCellClassSync?.(oldRowKey, oldField);
17920
- }
17921
- if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
17922
- return;
17923
- const combinedClass = [
17924
- this.sdClass,
17925
- this.dividerLeft && 'td--divider-left',
17926
- this.dividerRight && 'td--divider-right',
17927
- ]
17928
- .filter(Boolean)
17929
- .join(' ') || undefined;
17930
- table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
17931
- this.requestParentTrUpdate();
17932
- }
17933
- syncUseFrameRegistration(prevField, prevRowKey) {
17934
- const table = this.findTable();
17935
- if (!table)
17936
- return;
17937
- const oldField = prevField ?? this.field;
17938
- const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
17939
- if (oldField !== '' && oldRowKey != null) {
17940
- table.unregisterUseFrameSync?.(oldRowKey, oldField);
17941
- }
17942
- if (this.field === '' || this.rowKey == null)
17943
- return;
17944
- if (this.useFrame) {
17945
- table.registerUseFrameSync?.(String(this.rowKey), this.field);
17946
- }
17947
- else {
17948
- table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
17949
- }
17950
- }
17951
- syncSlotName() {
17952
- const table = this.el.closest('sd-table');
17953
- const fromMethod = table?.getTableIdSync?.();
17954
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
17955
- const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
17956
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
17957
- '';
17958
- if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
17959
- this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
17960
- }
17961
- }
17962
- render() {
17963
- return (hAsync(Host, { key: '2fce45ffda30fd75a0c0ef2ff0de5896c409c108', class: { [`align-${this.align}`]: Boolean(this.align) } }, hAsync("slot", { key: '3e2131547d544d01c745017f3375a26df35a9d6e' })));
17964
- }
17965
- static get watchers() { return {
17966
- "field": [{
17967
- "handleFieldChange": 0
17968
- }],
17969
- "rowKey": [{
17970
- "handleRowKeyChange": 0
17971
- }],
17972
- "rowspan": [{
17973
- "handleSpanChange": 0
17974
- }],
17975
- "colspan": [{
17976
- "handleSpanChange": 0
17977
- }],
17978
- "sdClass": [{
17979
- "handleSdClassChange": 0
17980
- }],
17981
- "dividerLeft": [{
17982
- "handleDividerChange": 0
17983
- }],
17984
- "dividerRight": [{
17985
- "handleDividerChange": 0
17986
- }],
17987
- "useFrame": [{
17988
- "handleUseFrameChange": 0
17989
- }]
17990
- }; }
17991
- static get style() { return sdTdCss(); }
17992
- static get cmpMeta() { return {
17993
- "$flags$": 772,
17994
- "$tagName$": "sd-td",
17995
- "$members$": {
17996
- "field": [1],
17997
- "rowKey": [1, "row-key"],
17998
- "align": [1],
17999
- "rowspan": [2],
18000
- "colspan": [2],
18001
- "sdClass": [1, "sd-class"],
18002
- "dividerLeft": [4, "divider-left"],
18003
- "dividerRight": [4, "divider-right"],
18004
- "useFrame": [4, "use-frame"]
18005
- },
18006
- "$listeners$": undefined,
18007
- "$lazyBundleId$": "-",
18008
- "$attrsToReflect$": []
18009
- }; }
18010
- }
18011
-
18012
16707
  const textLink = {
18013
16708
  sm: {
18014
16709
  gap: "4",
@@ -18297,7 +16992,7 @@ class SdTextarea {
18297
16992
  nativeEl = undefined;
18298
16993
  formField;
18299
16994
  /** 폼 연동용 name 속성 */
18300
- name = nanoid$1();
16995
+ name = nanoid();
18301
16996
  /** 값이 변경될 때 발생합니다. */
18302
16997
  input;
18303
16998
  /** 포커스될 때 발생합니다. */
@@ -18378,7 +17073,7 @@ class SdTextarea {
18378
17073
  '--sd-system-size-field-sm-height': 'auto',
18379
17074
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
18380
17075
  };
18381
- 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 }))));
17076
+ return (hAsync("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, hAsync("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
18382
17077
  }
18383
17078
  static get watchers() { return {
18384
17079
  "value": [{
@@ -18432,370 +17127,6 @@ class SdTextarea {
18432
17127
  }; }
18433
17128
  }
18434
17129
 
18435
- 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}`;
18436
-
18437
- class SdThead {
18438
- constructor(hostRef) {
18439
- registerInstance(this, hostRef);
18440
- this.sdColumnSort = createEvent(this, "sdColumnSort", 7);
18441
- }
18442
- get el() { return getElement(this); }
18443
- /** 테이블 컬럼 목록 */
18444
- columns;
18445
- /** 행 선택 기능 사용 여부 */
18446
- selectable;
18447
- /** 컬럼 너비 조절 가능 여부 */
18448
- resizable;
18449
- /** 고정 컬럼 설정 */
18450
- stickyColumn;
18451
- /** 헤더 고정 여부 */
18452
- stickyHeader;
18453
- /** 좌측 스크롤 여부 */
18454
- scrolledLeft;
18455
- /** 우측 스크롤 여부 */
18456
- scrolledRight;
18457
- /** 전체 선택 체크박스용 행 데이터 */
18458
- rows = [];
18459
- /** 컬럼 너비 목록 */
18460
- columnWidths = [];
18461
- /** 컬럼 정렬 버튼 클릭 시 발생합니다. */
18462
- sdColumnSort;
18463
- tableId = '';
18464
- _columns = [];
18465
- _selectable = false;
18466
- _resizable = false;
18467
- _stickyColumn = { left: 0, right: 0 };
18468
- _stickyHeader = false;
18469
- _scrolledLeft = false;
18470
- _scrolledRight = false;
18471
- dropdownOpenMap = {};
18472
- tableEl = null;
18473
- dropdownRefs = {};
18474
- dropdownThRefs = {};
18475
- dropdownPortals = {};
18476
- handleColumnsChange(newCols) {
18477
- if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
18478
- this.columnWidths = newCols.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
18479
- }
18480
- }
18481
- disconnectedCallback() {
18482
- const portals = this.dropdownPortals ?? {};
18483
- Object.values(portals).forEach(portal => {
18484
- if (portal?.parentNode != null)
18485
- portal.parentNode.removeChild(portal);
18486
- });
18487
- }
18488
- componentWillLoad() {
18489
- this.syncTableContext();
18490
- this.dropdownOpenMap = this.dropdownOpenMap ?? {};
18491
- this.dropdownRefs = this.dropdownRefs ?? {};
18492
- this.dropdownThRefs = this.dropdownThRefs ?? {};
18493
- this.dropdownPortals = this.dropdownPortals ?? {};
18494
- this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
18495
- this.resolveConfig();
18496
- if ((this.columnWidths ?? []).length === 0) {
18497
- this.columnWidths = this._columns.map(c => c.autoWidth ? 0 : parseInt(c.width || '120', 10));
18498
- }
18499
- }
18500
- componentDidLoad() {
18501
- this.syncTableContext();
18502
- this.resolveConfig();
18503
- this.initDropdownPortals();
18504
- }
18505
- // sd-portal을 body에 붙여 CSS transform 영향 없이 정확한 위치에 패널을 표시한다.
18506
- // <slot>을 render에 두지 않고 직접 DOM 이동(slot 속성 제거)으로 Stencil 슬롯 에뮬레이션 충돌을 피한다.
18507
- initDropdownPortals() {
18508
- const cols = this._columns ?? [];
18509
- const hasDropdownCols = cols.filter(c => c.hasDropdown === true);
18510
- if (hasDropdownCols.length === 0)
18511
- return;
18512
- for (const col of hasDropdownCols) {
18513
- const colName = col.name;
18514
- // 이미 포탈이 생성된 컬럼은 건너뜀 (refreshConfig 재호출 대비)
18515
- if ((this.dropdownPortals ?? {})[colName] != null)
18516
- continue;
18517
- const slotContent = this.el.querySelector(`[slot="dropdown-${colName}"]`);
18518
- if (slotContent == null)
18519
- continue;
18520
- // slot 속성 제거: Stencil 슬롯 에뮬레이션이 재배포하지 못하게 한다
18521
- slotContent.removeAttribute('slot');
18522
- const portal = document.createElement('sd-portal');
18523
- portal.parentRef = this.dropdownThRefs[colName] ?? null;
18524
- portal.open = false;
18525
- // 첫 open 전까지 포탈 호스트 자체를 숨긴다.
18526
- // moveSlotContent()가 open=true 시 children을 독립 wrapper div로 이동하므로 이후 동작에 영향 없음.
18527
- portal.style.display = 'none';
18528
- portal.addEventListener('sdClose', () => this.closeDropdown(colName));
18529
- portal.appendChild(slotContent);
18530
- document.body.appendChild(portal);
18531
- this.dropdownPortals[colName] = portal;
18532
- }
18533
- }
18534
- syncTableContext() {
18535
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
18536
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
18537
- const closest = this.el.closest('sd-table');
18538
- const root = this.el.getRootNode();
18539
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
18540
- const table = closest ?? fromShadow;
18541
- this.tableEl = table;
18542
- const fromMethod = table?.getTableIdSync?.();
18543
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
18544
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
18545
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
18546
- '';
18547
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
18548
- this.tableId = resolvedTableId;
18549
- }
18550
- }
18551
- resolveConfig() {
18552
- const config = this.tableEl?.getConfigSync?.();
18553
- const resolvedColumns = Array.isArray(this.columns)
18554
- ? this.columns
18555
- : Array.isArray(config?.columns)
18556
- ? config.columns
18557
- : [];
18558
- this._columns = resolvedColumns;
18559
- this._selectable = this.selectable ?? config?.selectable ?? false;
18560
- this._resizable = this.resizable ?? config?.resizable ?? false;
18561
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
18562
- this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
18563
- this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
18564
- this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
18565
- if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
18566
- this.columnWidths = [...config.columnWidths];
18567
- }
18568
- if (!Array.isArray(this.columnWidths)) {
18569
- this.columnWidths = [];
18570
- }
18571
- }
18572
- /** 테이블 설정을 다시 불러옵니다. */
18573
- async refreshConfig() {
18574
- this.resolveConfig();
18575
- this.initDropdownPortals();
18576
- }
18577
- /** 컬럼 너비를 업데이트합니다. */
18578
- async setColumnWidths(widths) {
18579
- this.columnWidths = Array.isArray(widths) ? widths : [];
18580
- }
18581
- /** 전체 선택 체크박스 상태를 갱신합니다. */
18582
- async refreshSelection() {
18583
- const checkbox = this.el.querySelector('sd-checkbox');
18584
- if (checkbox) {
18585
- checkbox.value = this.getIsAllChecked();
18586
- }
18587
- }
18588
- get visibleColumns() {
18589
- return this._columns.filter(col => col.visible !== false);
18590
- }
18591
- getStickyStyle(colIdx) {
18592
- if (this.tableEl?.getStickyStyleSync) {
18593
- return this.tableEl.getStickyStyleSync(colIdx);
18594
- }
18595
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) +
18596
- (this._selectable ? TABLE_SELECTABLE_COLUMN_WIDTH : 0);
18597
- const rightOffset = this.columnWidths
18598
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
18599
- .reduce((a, b) => a + b, 0);
18600
- const col = this.visibleColumns[colIdx];
18601
- const base = {
18602
- '--sticky-left-offset': `${leftOffset}px`,
18603
- '--sticky-right-offset': `${rightOffset}px`,
18604
- };
18605
- if (!col?.autoWidth) {
18606
- base['width'] = `${this.columnWidths[colIdx]}px`;
18607
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
18608
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
18609
- }
18610
- return base;
18611
- }
18612
- handleResize(index, event, reversed = false) {
18613
- if (this.tableEl?.handleResize) {
18614
- this.tableEl.handleResize(index, event, reversed);
18615
- }
18616
- }
18617
- handleColumnSort = (col) => {
18618
- this.sdColumnSort.emit({ column: col });
18619
- };
18620
- toggleDropdown(name) {
18621
- const isOpen = this.dropdownOpenMap[name] !== true;
18622
- const portals = this.dropdownPortals ?? {};
18623
- const newMap = { ...this.dropdownOpenMap };
18624
- // _columns 기준으로 순회: portals가 비어도 dropdownOpenMap은 항상 갱신됨
18625
- for (const col of (this._columns ?? []).filter(c => c.hasDropdown === true)) {
18626
- const shouldBeOpen = col.name === name ? isOpen : false;
18627
- newMap[col.name] = shouldBeOpen;
18628
- const portal = portals[col.name];
18629
- if (portal != null)
18630
- portal.open = shouldBeOpen;
18631
- }
18632
- this.dropdownOpenMap = newMap;
18633
- }
18634
- closeDropdown(name) {
18635
- if (this.dropdownOpenMap[name] !== true)
18636
- return;
18637
- this.dropdownOpenMap = { ...this.dropdownOpenMap, [name]: false };
18638
- const portal = (this.dropdownPortals ?? {})[name];
18639
- if (portal != null)
18640
- portal.open = false;
18641
- }
18642
- handleSelectAll(checked) {
18643
- const nextChecked = !!checked;
18644
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18645
- if (this.tableEl?.toggleSelectAllSync) {
18646
- this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
18647
- }
18648
- }
18649
- getIsAllChecked() {
18650
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18651
- if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
18652
- return this.tableEl.getIsAllCheckedSync(safeRows);
18653
- }
18654
- return false;
18655
- }
18656
- render() {
18657
- const safeRows = Array.isArray(this.rows) ? this.rows : [];
18658
- const dropdownOpenMap = this.dropdownOpenMap ?? {};
18659
- const dropdownRefs = this.dropdownRefs ?? {};
18660
- const stickyLeftCount = this._stickyColumn.left || 0;
18661
- const stickyRightCount = this._stickyColumn.right || 0;
18662
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
18663
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
18664
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
18665
- const lastColIdx = this.visibleColumns.length - 1;
18666
- const headStyle = {
18667
- '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
18668
- '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
18669
- '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
18670
- '--table-header-bg': TABLE_HEADER_COLORS.bg,
18671
- '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
18672
- '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
18673
- '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
18674
- '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
18675
- '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
18676
- '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
18677
- '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
18678
- '--table-border-color': TABLE_BORDER.color,
18679
- '--table-border-width': `${TABLE_BORDER.width}px`,
18680
- };
18681
- return (hAsync(Host, { key: 'ec85c86aa6d93e5a2405262809bf790fbb12ee79', slot: `${this.tableId}-head`, style: headStyle }, hAsync("thead", { key: '8afbdf4d81ebb649e262baa6da8ce3a1eca31e15', class: {
18682
- 'thead': true,
18683
- 'thead--sticky': this._stickyHeader,
18684
- } }, hAsync("tr", { key: '9643f19e95aa00f5bb5d6462ecb0da4ca95c3dcc', class: "tr" }, this._selectable && (hAsync("th", { key: '6d87ceb557e61454eaf0acf492234788bfd99235', class: {
18685
- 'th': true,
18686
- 'th--selected': true,
18687
- 'sticky-left': true,
18688
- 'sticky-left-edge': stickyLeftCount === 0,
18689
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
18690
- }, 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: {
18691
- 'th': true,
18692
- [`${col.thClass}`]: Boolean(col.thClass),
18693
- 'sticky-left': true,
18694
- 'sticky-left-edge': idx === stickyLeftCount - 1,
18695
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
18696
- 'th--has-dropdown': col.hasDropdown === true,
18697
- }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
18698
- ? el => {
18699
- this.dropdownThRefs[col.name] = el;
18700
- }
18701
- : 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) => {
18702
- e.stopPropagation();
18703
- this.handleColumnSort(col);
18704
- }, 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: {
18705
- 'th__dropdown-trigger': true,
18706
- 'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
18707
- }, ref: el => {
18708
- dropdownRefs[col.name] = el;
18709
- }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
18710
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18711
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18712
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
18713
- const actualColIdx = stickyLeftCount + relativeIdx;
18714
- return (hAsync("th", { key: col.name, class: {
18715
- 'th': true,
18716
- [`${col.thClass}`]: Boolean(col.thClass),
18717
- 'th--has-dropdown': col.hasDropdown === true,
18718
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18719
- ? el => {
18720
- this.dropdownThRefs[col.name] = el;
18721
- }
18722
- : 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) => {
18723
- e.stopPropagation();
18724
- this.handleColumnSort(col);
18725
- }, 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: {
18726
- 'th__dropdown-trigger': true,
18727
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18728
- }, ref: el => {
18729
- this.dropdownRefs[col.name] = el;
18730
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
18731
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18732
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18733
- hAsync("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
18734
- }), stickyRightCols.map((col, relativeIdx) => {
18735
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
18736
- return (hAsync("th", { key: col.name, class: {
18737
- 'th': true,
18738
- [`${col.thClass}`]: Boolean(col.thClass),
18739
- 'sticky-right': true,
18740
- 'sticky-right-edge': relativeIdx === 0,
18741
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
18742
- 'th--has-dropdown': col.hasDropdown === true,
18743
- }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
18744
- ? el => {
18745
- this.dropdownThRefs[col.name] = el;
18746
- }
18747
- : 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) => {
18748
- e.stopPropagation();
18749
- this.handleColumnSort(col);
18750
- }, 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: {
18751
- 'th__dropdown-trigger': true,
18752
- 'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
18753
- }, ref: el => {
18754
- this.dropdownRefs[col.name] = el;
18755
- }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, hAsync("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
18756
- // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
18757
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
18758
- hAsync("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
18759
- })))));
18760
- }
18761
- static get watchers() { return {
18762
- "columns": [{
18763
- "handleColumnsChange": 0
18764
- }]
18765
- }; }
18766
- static get style() { return sdTheadCss(); }
18767
- static get cmpMeta() { return {
18768
- "$flags$": 512,
18769
- "$tagName$": "sd-thead",
18770
- "$members$": {
18771
- "columns": [16],
18772
- "selectable": [4],
18773
- "resizable": [4],
18774
- "stickyColumn": [16],
18775
- "stickyHeader": [4, "sticky-header"],
18776
- "scrolledLeft": [4, "scrolled-left"],
18777
- "scrolledRight": [4, "scrolled-right"],
18778
- "rows": [16],
18779
- "columnWidths": [1040],
18780
- "tableId": [32],
18781
- "_columns": [32],
18782
- "_selectable": [32],
18783
- "_resizable": [32],
18784
- "_stickyColumn": [32],
18785
- "_stickyHeader": [32],
18786
- "_scrolledLeft": [32],
18787
- "_scrolledRight": [32],
18788
- "dropdownOpenMap": [32],
18789
- "refreshConfig": [64],
18790
- "setColumnWidths": [64],
18791
- "refreshSelection": [64]
18792
- },
18793
- "$listeners$": undefined,
18794
- "$lazyBundleId$": "-",
18795
- "$attrsToReflect$": []
18796
- }; }
18797
- }
18798
-
18799
17130
  const toast = {
18800
17131
  icon: "16",
18801
17132
  "default": {
@@ -18887,12 +17218,12 @@ class SdToast {
18887
17218
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
18888
17219
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
18889
17220
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
18890
- return (hAsync("div", { key: '124b32e52e9dfd7a09ac67ffb8032bf2217e9c05', style: {
17221
+ return (hAsync("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
18891
17222
  '--sd-toast-bg': typeConfig.bg,
18892
17223
  '--sd-toast-text': typeConfig.content,
18893
17224
  '--sd-toast-icon': iconColor,
18894
17225
  '--sd-toast-link': linkColor,
18895
- } }, 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() })))));
17226
+ } }, hAsync("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, hAsync("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
18896
17227
  }
18897
17228
  static get style() { return sdToastCss(); }
18898
17229
  static get cmpMeta() { return {
@@ -19154,7 +17485,7 @@ class SdToastContainer {
19154
17485
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
19155
17486
  const indexMap = new Map();
19156
17487
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
19157
- return (hAsync("div", { key: '17526924c57e06a77725f66233f5b5360097fac0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17488
+ return (hAsync("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
19158
17489
  this.expanded = true;
19159
17490
  this.pauseTimers();
19160
17491
  }, onMouseLeave: () => {
@@ -19315,7 +17646,7 @@ class SdToggle {
19315
17646
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
19316
17647
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
19317
17648
  };
19318
- 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 })));
17649
+ return (hAsync("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
19319
17650
  }
19320
17651
  static get style() { return sdToggleCss(); }
19321
17652
  static get cmpMeta() { return {
@@ -19503,7 +17834,7 @@ class SdTooltip {
19503
17834
  const bodyHTML = this.message && this.message.length > 0
19504
17835
  ? this.message.map(line => `<div>${line}</div>`).join('')
19505
17836
  : this.slotContentHTML;
19506
- 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: {
17837
+ return (hAsync(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, hAsync("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
19507
17838
  'sd-floating-menu': true,
19508
17839
  [`sd-floating-menu--${tooltipType}`]: true,
19509
17840
  [`sd-floating-menu--${placement}`]: true,
@@ -19511,7 +17842,7 @@ class SdTooltip {
19511
17842
  }, style: {
19512
17843
  '--sd-floating-bg': typeConfig.bg,
19513
17844
  '--sd-floating-content': typeConfig.content,
19514
- }, 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() })))))));
17845
+ }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), hAsync("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
19515
17846
  }
19516
17847
  static get style() { return sdTooltipCss(); }
19517
17848
  static get cmpMeta() { return {
@@ -19546,313 +17877,6 @@ class SdTooltip {
19546
17877
  }; }
19547
17878
  }
19548
17879
 
19549
- 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)}`;
19550
-
19551
- class SdTr {
19552
- constructor(hostRef) {
19553
- registerInstance(this, hostRef);
19554
- }
19555
- get el() { return getElement(this); }
19556
- /** 테이블 컬럼 목록 */
19557
- columns;
19558
- /** 행 선택 기능 사용 여부 */
19559
- selectable;
19560
- /** 고정 컬럼 설정 */
19561
- stickyColumn;
19562
- /** 행 식별 키 */
19563
- rowKey = '';
19564
- /** 행 데이터 객체 */
19565
- row = {};
19566
- /** 구분선 높이 (4 또는 6px, null이면 일반 행) */
19567
- separator = null;
19568
- tableId = '';
19569
- columnWidths = [];
19570
- isVisible = true;
19571
- spansVersion = 0;
19572
- _columns = [];
19573
- _selectable = false;
19574
- _stickyColumn = { left: 0, right: 0 };
19575
- _scrolledLeft = false;
19576
- _scrolledRight = false;
19577
- _dense = false;
19578
- tableEl = null;
19579
- componentWillLoad() {
19580
- this.row = this.row ?? {};
19581
- this.syncTableContext();
19582
- this.columnWidths = this.columnWidths ?? [];
19583
- this.resolveConfig();
19584
- this.columnWidths = this._columns.map(c => (c.autoWidth ? 0 : parseInt(c.width || '120', 10)));
19585
- this.updateVisibilitySync();
19586
- }
19587
- componentDidLoad() {
19588
- this.syncTableContext();
19589
- }
19590
- syncTableContext() {
19591
- // sd-table이 shadow:true이므로 fallback content로 렌더되면 closest가 경계를 못 넘는다.
19592
- // 그 경우 getRootNode().host(=sd-table)로 폴백한다.
19593
- const closest = this.el.closest('sd-table');
19594
- const root = this.el.getRootNode();
19595
- const fromShadow = root instanceof ShadowRoot ? root.host : null;
19596
- const table = closest ?? fromShadow;
19597
- this.tableEl = table;
19598
- const fromMethod = table?.getTableIdSync?.();
19599
- const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
19600
- const resolvedTableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
19601
- (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
19602
- '';
19603
- if (resolvedTableId !== '' && resolvedTableId !== this.tableId) {
19604
- this.tableId = resolvedTableId;
19605
- }
19606
- }
19607
- resolveConfig() {
19608
- const config = this.tableEl?.getConfigSync?.();
19609
- this._columns = this.columns ?? config?.columns ?? [];
19610
- this._selectable = this.selectable ?? config?.selectable ?? false;
19611
- this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
19612
- this._scrolledLeft = config?.scrolledLeft ?? false;
19613
- this._scrolledRight = config?.scrolledRight ?? false;
19614
- this._dense = config?.dense ?? false;
19615
- if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
19616
- this.columnWidths = [...config.columnWidths];
19617
- }
19618
- }
19619
- /** 테이블 설정을 다시 불러옵니다. */
19620
- async refreshConfig() {
19621
- this.resolveConfig();
19622
- }
19623
- /** 셀 병합 버전을 갱신해 td를 재렌더링합니다. */
19624
- async bumpSpansVersion() {
19625
- this.spansVersion = this.spansVersion + 1;
19626
- }
19627
- /** 페이지네이션에 따른 행 표시 여부를 갱신합니다. */
19628
- async updateVisibility() {
19629
- this.updateVisibilitySync();
19630
- }
19631
- updateVisibilitySync() {
19632
- const rowIndex = parseInt(this.rowKey, 10);
19633
- const pageInfo = this.tableEl?.getPaginationInfoSync?.();
19634
- if (!pageInfo) {
19635
- this.isVisible = true;
19636
- return;
19637
- }
19638
- this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
19639
- }
19640
- /** 컬럼 너비를 업데이트합니다. */
19641
- async setColumnWidths(widths) {
19642
- this.columnWidths = widths;
19643
- }
19644
- /** 체크박스 선택 상태를 갱신합니다. */
19645
- async refreshSelection() {
19646
- const checkbox = this.el.querySelector('sd-checkbox');
19647
- if (checkbox) {
19648
- checkbox.value = this.isSelected();
19649
- }
19650
- }
19651
- get visibleColumns() {
19652
- return this._columns.filter(col => col.visible !== false);
19653
- }
19654
- formatValue(value) {
19655
- if (value === null || value === undefined) {
19656
- return '';
19657
- }
19658
- if (typeof value === 'number') {
19659
- return value.toLocaleString();
19660
- }
19661
- return String(value);
19662
- }
19663
- getCellValue(column) {
19664
- const { field, format, name } = column;
19665
- const value = typeof field === 'function'
19666
- ? field(this.row)
19667
- : field !== ''
19668
- ? this.row[field]
19669
- : this.row[name];
19670
- return format ? format(value, this.row) : this.formatValue(value);
19671
- }
19672
- getStickyStyle(colIdx) {
19673
- if (this.tableEl?.getStickyStyleSync) {
19674
- return this.tableEl.getStickyStyleSync(colIdx);
19675
- }
19676
- const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
19677
- const rightOffset = this.columnWidths
19678
- .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
19679
- .reduce((a, b) => a + b, 0);
19680
- const col = this.visibleColumns[colIdx];
19681
- const base = {
19682
- '--sticky-left-offset': `${leftOffset}px`,
19683
- '--sticky-right-offset': `${rightOffset}px`,
19684
- };
19685
- if (!col?.autoWidth) {
19686
- base['width'] = `${this.columnWidths[colIdx]}px`;
19687
- base['minWidth'] = `${this.columnWidths[colIdx]}px`;
19688
- base['maxWidth'] = `${this.columnWidths[colIdx]}px`;
19689
- }
19690
- return base;
19691
- }
19692
- isSelected() {
19693
- if (this.tableEl?.isRowSelectedSync) {
19694
- return this.tableEl.isRowSelectedSync(this.row);
19695
- }
19696
- return false;
19697
- }
19698
- handleSelect() {
19699
- if (this.tableEl?.updateRowSelectSync) {
19700
- this.tableEl.updateRowSelectSync(this.row);
19701
- }
19702
- }
19703
- getSpanFor(col) {
19704
- if (!this.tableEl?.getSpanSync)
19705
- return undefined;
19706
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19707
- return this.tableEl.getSpanSync(this.rowKey, fieldName);
19708
- }
19709
- isCovered(colIdx) {
19710
- if (!this.tableEl?.isCoveredSync)
19711
- return false;
19712
- return this.tableEl.isCoveredSync(this.rowKey, colIdx, this._columns);
19713
- }
19714
- getCellClassFor(col) {
19715
- if (!this.tableEl?.getCellClassSync)
19716
- return undefined;
19717
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19718
- return this.tableEl.getCellClassSync(this.rowKey, fieldName);
19719
- }
19720
- getFramePaddingStyle(field) {
19721
- if (!(this.tableEl?.isCellUseFrameSync?.(this.rowKey, field) ?? false))
19722
- return undefined;
19723
- return { padding: `${TABLE_BODY_LAYOUT.framePadding}px` };
19724
- }
19725
- expandCellClass(classStr) {
19726
- if (classStr == null || classStr === '')
19727
- return {};
19728
- return Object.fromEntries(classStr
19729
- .split(/\s+/)
19730
- .filter(Boolean)
19731
- .map(c => [c, true]));
19732
- }
19733
- render() {
19734
- const stickyLeftCount = this._stickyColumn.left || 0;
19735
- const stickyRightCount = this._stickyColumn.right || 0;
19736
- const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
19737
- const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
19738
- const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
19739
- const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
19740
- const isUseFrameRow = this.tableEl?.hasUseFrameInRowSync?.(this.rowKey) ?? false;
19741
- const effectiveDense = this._dense && !isUseFrameRow;
19742
- const rowLayoutY = effectiveDense ? TABLE_BODY_LAYOUT.dense : TABLE_BODY_LAYOUT.default;
19743
- const rowPaddingX = this._dense && isUseFrameRow ? TABLE_BODY_LAYOUT.paddingX : TABLE_BODY_LAYOUT.paddingX;
19744
- const rowStyle = {
19745
- 'display': this.isVisible ? '' : 'none',
19746
- '--table-body-height': `${rowLayoutY.height}px`,
19747
- '--table-body-padding-y': `${rowLayoutY.paddingY}px`,
19748
- '--table-body-padding-x': `${rowPaddingX}px`,
19749
- '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
19750
- '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
19751
- '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
19752
- '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
19753
- '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
19754
- '--table-border-color': TABLE_BORDER.color,
19755
- '--table-border-width': `${TABLE_BORDER.width}px`,
19756
- '--table-separator-color': TABLE_SEPARATOR.color,
19757
- '--table-separator-width': `${TABLE_SEPARATOR.width}px`,
19758
- '--table-separator-dense-width': `${TABLE_SEPARATOR.denseWidth}px`,
19759
- };
19760
- if (this.separator != null) {
19761
- const totalCols = this.visibleColumns.length + (this._selectable ? 1 : 0);
19762
- const isDense = this.separator === 4;
19763
- 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" }))));
19764
- }
19765
- return (hAsync(Host, { style: rowStyle }, hAsync("tr", { class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (hAsync("td", { class: {
19766
- 'td': true,
19767
- 'td--selected': true,
19768
- 'sticky-left': true,
19769
- 'sticky-left-edge': stickyLeftCount === 0,
19770
- 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
19771
- }, style: { '--sticky-left-offset': '0px' } }, hAsync("sd-checkbox", { value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
19772
- if (this.isCovered(idx))
19773
- return null;
19774
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19775
- const span = this.getSpanFor(col);
19776
- const sdCellClass = this.getCellClassFor(col);
19777
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19778
- 'td': true,
19779
- [`td--${col.align || 'left'}`]: true,
19780
- 'sticky-left': true,
19781
- 'sticky-left-edge': idx === stickyLeftCount - 1,
19782
- 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
19783
- [`${col.tdClass}`]: Boolean(col.tdClass),
19784
- ...this.expandCellClass(sdCellClass),
19785
- }, style: { ...this.getStickyStyle(idx), ...this.getFramePaddingStyle(fieldName) } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19786
- }), middleCols.map((col, relativeIdx) => {
19787
- const actualColIdx = stickyLeftCount + relativeIdx;
19788
- if (this.isCovered(actualColIdx))
19789
- return null;
19790
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19791
- const span = this.getSpanFor(col);
19792
- const sdCellClass = this.getCellClassFor(col);
19793
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19794
- td: true,
19795
- [`td--${col.align || 'left'}`]: true,
19796
- [`${col.tdClass}`]: Boolean(col.tdClass),
19797
- ...this.expandCellClass(sdCellClass),
19798
- }, style: {
19799
- ...this.getStickyStyle(actualColIdx),
19800
- ...this.getFramePaddingStyle(fieldName),
19801
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19802
- }), stickyRightCols.map((col, relativeIdx) => {
19803
- const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
19804
- if (this.isCovered(actualColIdx))
19805
- return null;
19806
- const fieldName = typeof col.field === 'string' ? col.field : col.name;
19807
- const span = this.getSpanFor(col);
19808
- const sdCellClass = this.getCellClassFor(col);
19809
- return (hAsync("td", { key: col.name, rowSpan: span?.rowspan, colSpan: span?.colspan, class: {
19810
- 'td': true,
19811
- [`td--${col.align || 'left'}`]: true,
19812
- 'sticky-right': true,
19813
- 'sticky-right-edge': relativeIdx === 0,
19814
- 'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
19815
- [`${col.tdClass}`]: Boolean(col.tdClass),
19816
- ...this.expandCellClass(sdCellClass),
19817
- }, style: {
19818
- ...this.getStickyStyle(actualColIdx),
19819
- ...this.getFramePaddingStyle(fieldName),
19820
- } }, hAsync("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, hAsync("span", null, this.getCellValue(col)))));
19821
- }))));
19822
- }
19823
- static get style() { return sdTrCss(); }
19824
- static get cmpMeta() { return {
19825
- "$flags$": 772,
19826
- "$tagName$": "sd-tr",
19827
- "$members$": {
19828
- "columns": [16],
19829
- "selectable": [4],
19830
- "stickyColumn": [16],
19831
- "rowKey": [1, "row-key"],
19832
- "row": [16],
19833
- "separator": [8],
19834
- "tableId": [32],
19835
- "columnWidths": [32],
19836
- "isVisible": [32],
19837
- "spansVersion": [32],
19838
- "_columns": [32],
19839
- "_selectable": [32],
19840
- "_stickyColumn": [32],
19841
- "_scrolledLeft": [32],
19842
- "_scrolledRight": [32],
19843
- "_dense": [32],
19844
- "refreshConfig": [64],
19845
- "bumpSpansVersion": [64],
19846
- "updateVisibility": [64],
19847
- "setColumnWidths": [64],
19848
- "refreshSelection": [64]
19849
- },
19850
- "$listeners$": undefined,
19851
- "$lazyBundleId$": "-",
19852
- "$attrsToReflect$": []
19853
- }; }
19854
- }
19855
-
19856
17880
  registerComponents([
19857
17881
  SdActionModal,
19858
17882
  SdBadge,
@@ -19900,19 +17924,14 @@ registerComponents([
19900
17924
  SdSelectListbox,
19901
17925
  SdSelectTrigger,
19902
17926
  SdSwitch,
19903
- SdTable,
19904
17927
  SdTabs,
19905
17928
  SdTag,
19906
- SdTbody,
19907
- SdTd,
19908
17929
  SdTextLink,
19909
17930
  SdTextarea,
19910
- SdThead,
19911
17931
  SdToast,
19912
17932
  SdToastContainer,
19913
17933
  SdToggle,
19914
17934
  SdTooltip,
19915
- SdTr,
19916
17935
  ]);
19917
17936
 
19918
17937
  exports.hydrateApp = hydrateApp;