@sellmate/design-system 1.29.0 → 1.32.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 (411) hide show
  1. package/dist/cjs/design-system.cjs.js +2 -2
  2. package/dist/cjs/{index-iiJZMzVM.js → index-Cg7X15Hq.js} +1 -1
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/sd-action-modal.cjs.entry.js +2 -2
  5. package/dist/cjs/sd-badge.cjs.entry.js +2 -2
  6. package/dist/cjs/sd-barcode-input.cjs.entry.js +2 -2
  7. package/dist/cjs/sd-button_2.cjs.entry.js +3 -3
  8. package/dist/cjs/sd-calendar_2.cjs.entry.js +8 -9
  9. package/dist/cjs/sd-callout.cjs.entry.js +2 -2
  10. package/dist/cjs/sd-card.cjs.entry.js +2 -2
  11. package/dist/cjs/sd-checkbox.cjs.entry.js +5 -5
  12. package/dist/cjs/sd-chip-input.cjs.entry.js +22 -17
  13. package/dist/cjs/sd-chip.cjs.entry.js +7 -7
  14. package/dist/cjs/sd-circle-progress.cjs.entry.js +3 -3
  15. package/dist/cjs/sd-confirm-modal_2.cjs.entry.js +3 -3
  16. package/dist/cjs/sd-date-box.cjs.entry.js +1 -1
  17. package/dist/cjs/{component.datepicker-zFTQQKMH.js → sd-date-picker.config-CgyNxY03.js} +66 -1
  18. package/dist/cjs/sd-date-picker_8.cjs.entry.js +141 -51
  19. package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js +162 -12
  20. package/dist/cjs/sd-divider.cjs.entry.js +3 -3
  21. package/dist/cjs/sd-dropdown-button.cjs.entry.js +2 -2
  22. package/dist/cjs/sd-field_3.cjs.entry.js +51 -52
  23. package/dist/cjs/sd-form.cjs.entry.js +1 -1
  24. package/dist/cjs/sd-ghost-button_3.cjs.entry.js +14 -10
  25. package/dist/cjs/sd-guide.cjs.entry.js +2 -2
  26. package/dist/cjs/sd-key-value-table.cjs.entry.js +2 -2
  27. package/dist/cjs/sd-linear-progress.cjs.entry.js +3 -3
  28. package/dist/cjs/sd-loading-container.cjs.entry.js +3 -3
  29. package/dist/cjs/sd-modal-container.cjs.entry.js +1 -1
  30. package/dist/cjs/sd-pagination.cjs.entry.js +4 -4
  31. package/dist/cjs/sd-popover.cjs.entry.js +134 -44
  32. package/dist/cjs/sd-popup.cjs.entry.js +4 -4
  33. package/dist/cjs/sd-radio-button.cjs.entry.js +3 -3
  34. package/dist/cjs/sd-radio.cjs.entry.js +4 -2
  35. package/dist/cjs/sd-scroll-area.cjs.entry.js +44 -0
  36. package/dist/cjs/sd-select-list-item_4.cjs.entry.js +12 -12
  37. package/dist/cjs/sd-stepper.cjs.entry.js +190 -0
  38. package/dist/cjs/sd-switch.cjs.entry.js +13 -3
  39. package/dist/cjs/sd-tabs.cjs.entry.js +2 -2
  40. package/dist/cjs/sd-text-link.cjs.entry.js +4 -4
  41. package/dist/cjs/sd-time-picker-selector.cjs.entry.js +179 -0
  42. package/dist/cjs/sd-time-picker-trigger.cjs.entry.js +75 -0
  43. package/dist/cjs/sd-time-picker.cjs.entry.js +173 -0
  44. package/dist/cjs/sd-time-picker.config-C7REB08L.js +156 -0
  45. package/dist/cjs/sd-time-range-picker-selector.cjs.entry.js +219 -0
  46. package/dist/cjs/sd-time-range-picker.cjs.entry.js +204 -0
  47. package/dist/cjs/sd-toast-container.cjs.entry.js +2 -2
  48. package/dist/cjs/sd-toast.cjs.entry.js +3 -3
  49. package/dist/cjs/sd-toggle.cjs.entry.js +2 -2
  50. package/dist/cjs/{system-B4KkVpu2.js → system-BGCBFBcM.js} +3 -1
  51. package/dist/cjs/{tooltipArrow-DOOcBlLp.js → tooltipArrow-CZff77W-.js} +1 -1
  52. package/dist/cjs/useDatePicker-j06ymWZ_.js +103 -0
  53. package/dist/collection/collection-manifest.json +10 -3
  54. package/dist/collection/components/sd-action-modal/sd-action-modal.js +1 -1
  55. package/dist/collection/components/sd-badge/sd-badge.js +1 -1
  56. package/dist/collection/components/sd-barcode-input/sd-barcode-input.js +1 -1
  57. package/dist/collection/components/sd-button/sd-button.js +2 -2
  58. package/dist/collection/components/sd-calendar/sd-calendar.js +3 -3
  59. package/dist/collection/components/sd-callout/sd-callout.js +1 -1
  60. package/dist/collection/components/sd-card/sd-card.js +1 -1
  61. package/dist/collection/components/sd-checkbox/sd-checkbox.js +8 -8
  62. package/dist/collection/components/sd-chip/sd-chip.js +8 -8
  63. package/dist/collection/components/sd-chip-input/sd-chip-input.css +3 -0
  64. package/dist/collection/components/sd-chip-input/sd-chip-input.js +43 -17
  65. package/dist/collection/components/sd-circle-progress/sd-circle-progress.js +1 -1
  66. package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js +1 -1
  67. package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js +2 -2
  68. package/dist/collection/components/sd-date-picker/sd-date-picker.js +23 -2
  69. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.css +75 -0
  70. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js +152 -6
  71. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.config.js +27 -0
  72. package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js +59 -3
  73. package/dist/collection/components/sd-divider/sd-divider.js +1 -1
  74. package/dist/collection/components/sd-field/sd-field.css +4 -0
  75. package/dist/collection/components/sd-field/sd-field.js +58 -5
  76. package/dist/collection/components/sd-file-picker/sd-file-picker.config.js +17 -10
  77. package/dist/collection/components/sd-file-picker/sd-file-picker.js +46 -16
  78. package/dist/collection/components/sd-floating-portal/sd-floating-portal.js +1 -1
  79. package/dist/collection/components/sd-ghost-button/sd-ghost-button.js +27 -3
  80. package/dist/collection/components/sd-input/sd-input.js +4 -4
  81. package/dist/collection/components/sd-linear-progress/sd-linear-progress.js +1 -1
  82. package/dist/collection/components/sd-loading-container/sd-loading-container.js +2 -2
  83. package/dist/collection/components/sd-loading-modal/sd-loading-modal.js +1 -1
  84. package/dist/collection/components/sd-number-input/sd-number-input.js +58 -7
  85. package/dist/collection/components/sd-pagination/sd-pagination.js +3 -3
  86. package/dist/collection/components/sd-popover/sd-popover.config.js +41 -0
  87. package/dist/collection/components/sd-popover/sd-popover.js +189 -191
  88. package/dist/collection/components/sd-popup/sd-popup.css +40 -0
  89. package/dist/collection/components/sd-popup/sd-popup.js +1 -1
  90. package/dist/collection/components/sd-portal/sd-portal.js +1 -1
  91. package/dist/collection/components/sd-radio/sd-radio.js +25 -4
  92. package/dist/collection/components/sd-radio-button/sd-radio-button.js +6 -6
  93. package/dist/collection/components/sd-radio-group/sd-radio-group.js +7 -7
  94. package/dist/collection/components/sd-scroll-area/sd-scroll-area.config.js +8 -0
  95. package/dist/collection/components/sd-scroll-area/sd-scroll-area.css +61 -0
  96. package/dist/collection/components/sd-scroll-area/sd-scroll-area.js +151 -0
  97. package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js +2 -2
  98. package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js +4 -4
  99. package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.css +33 -9
  100. package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js +2 -2
  101. package/dist/collection/components/sd-select/sd-select-trigger/sd-select-trigger.js +2 -2
  102. package/dist/collection/components/sd-select/sd-select.js +4 -4
  103. package/dist/collection/components/sd-stepper/sd-stepper.config.js +35 -0
  104. package/dist/collection/components/sd-stepper/sd-stepper.css +50 -0
  105. package/dist/collection/components/sd-stepper/sd-stepper.js +186 -0
  106. package/dist/collection/components/sd-switch/sd-switch.js +54 -3
  107. package/dist/collection/components/sd-tabs/sd-tabs.js +1 -1
  108. package/dist/collection/components/sd-tag/sd-tag.js +7 -8
  109. package/dist/collection/components/sd-text-link/sd-text-link.js +3 -3
  110. package/dist/collection/components/sd-textarea/sd-textarea.js +1 -1
  111. package/dist/collection/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.css +87 -0
  112. package/dist/collection/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.js +266 -0
  113. package/dist/collection/components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.css +38 -0
  114. package/dist/collection/components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.js +216 -0
  115. package/dist/collection/components/sd-time-picker/sd-time-picker.config.js +78 -0
  116. package/dist/collection/components/sd-time-picker/sd-time-picker.css +12 -0
  117. package/dist/collection/components/sd-time-picker/sd-time-picker.js +761 -0
  118. package/dist/collection/components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.css +102 -0
  119. package/dist/collection/components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.js +338 -0
  120. package/dist/collection/components/sd-time-range-picker/sd-time-range-picker.config.js +23 -0
  121. package/dist/collection/components/sd-time-range-picker/sd-time-range-picker.css +12 -0
  122. package/dist/collection/components/sd-time-range-picker/sd-time-range-picker.js +809 -0
  123. package/dist/collection/components/sd-toast/sd-toast.js +2 -2
  124. package/dist/collection/components/sd-toast-container/sd-toast-container.js +1 -1
  125. package/dist/collection/components/sd-toggle/sd-toggle.js +1 -1
  126. package/dist/collection/components/sd-tooltip/sd-tooltip.js +36 -189
  127. package/dist/components/index.js +1 -1
  128. package/dist/components/p--BJuy06e.js +1 -0
  129. package/dist/components/p-22hyxPno.js +1 -0
  130. package/dist/components/p-7lGaExLM.js +1 -0
  131. package/dist/components/{p-oYbVr-z0.js → p-B6BgOB_-.js} +1 -1
  132. package/dist/components/{p-R-Sdglj0.js → p-BBAwMOGx.js} +1 -1
  133. package/dist/components/{p-CbS69IvC.js → p-BDULNyBw.js} +1 -1
  134. package/dist/components/p-BI1iKxNN.js +1 -0
  135. package/dist/components/{p-Bpv90tfa.js → p-BPzs63D8.js} +1 -1
  136. package/dist/components/{p-DMoFncVl.js → p-BU1DclrU.js} +1 -1
  137. package/dist/components/{p-OO7xxhkC.js → p-BhLF3gGb.js} +1 -1
  138. package/dist/components/p-Bk6mL1Ml.js +1 -0
  139. package/dist/components/p-BkyM9ded.js +1 -0
  140. package/dist/components/{p-CFTyEfB9.js → p-BoJ_gLp7.js} +1 -1
  141. package/dist/components/{p-Di1q4f5E.js → p-BpTKv3vN.js} +1 -1
  142. package/dist/components/p-C0IFrSzM.js +1 -0
  143. package/dist/components/p-C1KeTx0Z.js +1 -0
  144. package/dist/components/p-C8x8VEb8.js +1 -0
  145. package/dist/components/p-CBx8KWmu.js +1 -0
  146. package/dist/components/p-CNNjhHTA.js +1 -0
  147. package/dist/components/{p-CErFctrV.js → p-CRDS2TOy.js} +1 -1
  148. package/dist/components/p-CdeywvU6.js +1 -0
  149. package/dist/components/{p-BOxGhKKP.js → p-CghFB91T.js} +1 -1
  150. package/dist/components/p-CikPzSw-.js +1 -0
  151. package/dist/components/{p-9Ap2W-Mi.js → p-D0IDp-M3.js} +1 -1
  152. package/dist/components/p-D2oNz1s-.js +1 -0
  153. package/dist/components/p-DApl37Qw.js +1 -0
  154. package/dist/components/{p-BIEPMPWA.js → p-DGAzuK5C.js} +1 -1
  155. package/dist/components/p-DMm_GeZC.js +1 -0
  156. package/dist/components/{p-C_in6AVN.js → p-DONA7SlO.js} +1 -1
  157. package/dist/components/{p-C7mC7a1z.js → p-DVdDYnTl.js} +1 -1
  158. package/dist/components/{p-Dg1UrMqI.js → p-DdYWQ4Z5.js} +1 -1
  159. package/dist/components/p-DtadjLky.js +1 -0
  160. package/dist/components/p-DvlLDBO7.js +1 -0
  161. package/dist/components/p-ETWwVYq6.js +1 -0
  162. package/dist/components/{p-idG6CMO0.js → p-ISXxxDfX.js} +1 -1
  163. package/dist/components/p-UFNg7rhE.js +1 -0
  164. package/dist/{design-system/p-B91K50wC.js → components/p-bXzpfkfN.js} +1 -1
  165. package/dist/components/{p-BHjezpAC.js → p-irA7XFIS.js} +1 -1
  166. package/dist/components/{p-Bth2l1cy.js → p-rayWyWtG.js} +1 -1
  167. package/dist/components/{p-CSr33M9s.js → p-sLMSwbXi.js} +1 -1
  168. package/dist/components/p-vj3gimgB.js +1 -0
  169. package/dist/components/sd-action-modal.js +1 -1
  170. package/dist/components/sd-badge.js +1 -1
  171. package/dist/components/sd-barcode-input.js +1 -1
  172. package/dist/components/sd-button.js +1 -1
  173. package/dist/components/sd-calendar.js +1 -1
  174. package/dist/components/sd-callout.js +1 -1
  175. package/dist/components/sd-card.js +1 -1
  176. package/dist/components/sd-checkbox.js +1 -1
  177. package/dist/components/sd-chip-input.js +1 -1
  178. package/dist/components/sd-chip.js +1 -1
  179. package/dist/components/sd-circle-progress.js +1 -1
  180. package/dist/components/sd-confirm-modal.js +1 -1
  181. package/dist/components/sd-date-box.js +1 -1
  182. package/dist/components/sd-date-picker-trigger.js +1 -1
  183. package/dist/components/sd-date-picker.js +1 -1
  184. package/dist/components/sd-date-range-picker-calendar.js +1 -1
  185. package/dist/components/sd-date-range-picker.js +1 -1
  186. package/dist/components/sd-divider.js +1 -1
  187. package/dist/components/sd-dropdown-button.js +1 -1
  188. package/dist/components/sd-field.js +1 -1
  189. package/dist/components/sd-file-picker.js +1 -1
  190. package/dist/components/sd-floating-portal.js +1 -1
  191. package/dist/components/sd-form.js +1 -1
  192. package/dist/components/sd-ghost-button.js +1 -1
  193. package/dist/components/sd-guide.js +1 -1
  194. package/dist/components/sd-icon.js +1 -1
  195. package/dist/components/sd-input.js +1 -1
  196. package/dist/components/sd-key-value-table.js +1 -1
  197. package/dist/components/sd-linear-progress.js +1 -1
  198. package/dist/components/sd-loading-container.js +1 -1
  199. package/dist/components/sd-loading-modal.js +1 -1
  200. package/dist/components/sd-modal-container.js +1 -1
  201. package/dist/components/sd-number-input.js +1 -1
  202. package/dist/components/sd-pagination.js +1 -1
  203. package/dist/components/sd-popover.js +1 -1
  204. package/dist/components/sd-popup.js +1 -1
  205. package/dist/components/sd-portal.js +1 -1
  206. package/dist/components/sd-radio-button.js +1 -1
  207. package/dist/components/sd-radio-group.js +1 -1
  208. package/dist/components/sd-radio.js +1 -1
  209. package/dist/components/sd-scroll-area.d.ts +11 -0
  210. package/dist/components/sd-scroll-area.js +1 -0
  211. package/dist/components/sd-select-list-item-search.js +1 -1
  212. package/dist/components/sd-select-list-item.js +1 -1
  213. package/dist/components/sd-select-listbox.js +1 -1
  214. package/dist/components/sd-select-trigger.js +1 -1
  215. package/dist/components/sd-select.js +1 -1
  216. package/dist/components/sd-stepper.d.ts +11 -0
  217. package/dist/components/sd-stepper.js +1 -0
  218. package/dist/components/sd-switch.js +1 -1
  219. package/dist/components/sd-tabs.js +1 -1
  220. package/dist/components/sd-tag.js +1 -1
  221. package/dist/components/sd-text-link.js +1 -1
  222. package/dist/components/sd-textarea.js +1 -1
  223. package/dist/components/sd-time-picker-selector.d.ts +11 -0
  224. package/dist/components/sd-time-picker-selector.js +1 -0
  225. package/dist/components/sd-time-picker-trigger.d.ts +11 -0
  226. package/dist/components/sd-time-picker-trigger.js +1 -0
  227. package/dist/components/sd-time-picker.d.ts +11 -0
  228. package/dist/components/sd-time-picker.js +1 -0
  229. package/dist/components/sd-time-range-picker-selector.d.ts +11 -0
  230. package/dist/components/sd-time-range-picker-selector.js +1 -0
  231. package/dist/components/sd-time-range-picker.d.ts +11 -0
  232. package/dist/components/sd-time-range-picker.js +1 -0
  233. package/dist/components/sd-toast-container.js +1 -1
  234. package/dist/components/sd-toast.js +1 -1
  235. package/dist/components/sd-toggle.js +1 -1
  236. package/dist/components/sd-tooltip.js +1 -1
  237. package/dist/design-system/design-system.css +1 -1
  238. package/dist/design-system/design-system.esm.js +1 -1
  239. package/dist/design-system/{p-840006b1.entry.js → p-0cdd05eb.entry.js} +1 -1
  240. package/dist/design-system/p-1c4ba7ae.entry.js +1 -0
  241. package/dist/design-system/{p-c7d2c195.entry.js → p-2a36028d.entry.js} +1 -1
  242. package/dist/design-system/{p-be54fd3a.entry.js → p-2e76157e.entry.js} +1 -1
  243. package/dist/design-system/p-336cb0c1.entry.js +1 -0
  244. package/dist/design-system/{p-26a27312.entry.js → p-34e8dda6.entry.js} +1 -1
  245. package/dist/design-system/p-370b820e.entry.js +1 -0
  246. package/dist/design-system/{p-c5cffcc6.entry.js → p-39db3098.entry.js} +1 -1
  247. package/dist/design-system/p-3a2be559.entry.js +1 -0
  248. package/dist/design-system/p-405cb160.entry.js +1 -0
  249. package/dist/design-system/{p-246aafb9.entry.js → p-456479cc.entry.js} +1 -1
  250. package/dist/design-system/{p-86329ae3.entry.js → p-4d845113.entry.js} +1 -1
  251. package/dist/design-system/p-5761352f.entry.js +1 -0
  252. package/dist/design-system/{p-3cd2751a.entry.js → p-5b725381.entry.js} +1 -1
  253. package/dist/design-system/p-5d7820f7.entry.js +1 -0
  254. package/dist/design-system/p-5dd631fe.entry.js +1 -0
  255. package/dist/design-system/p-66e3fba3.entry.js +1 -0
  256. package/dist/design-system/{p-c1066f40.entry.js → p-6a5540d8.entry.js} +1 -1
  257. package/dist/design-system/{p-55c0be7d.entry.js → p-703bb49a.entry.js} +1 -1
  258. package/dist/design-system/{p-0c1d1a15.entry.js → p-71e7031e.entry.js} +1 -1
  259. package/dist/design-system/p-7837f8f8.entry.js +1 -0
  260. package/dist/design-system/{p-5a257ed9.entry.js → p-814ae5f1.entry.js} +1 -1
  261. package/dist/design-system/p-8804e3f3.entry.js +1 -0
  262. package/dist/design-system/p-8ea038d7.entry.js +1 -0
  263. package/dist/design-system/{p-b585f94b.entry.js → p-937a30af.entry.js} +1 -1
  264. package/dist/design-system/{p-1ed1bfa1.entry.js → p-94d4c093.entry.js} +1 -1
  265. package/dist/design-system/p-97a059b0.entry.js +1 -0
  266. package/dist/design-system/{p-53fe2741.entry.js → p-9afada52.entry.js} +1 -1
  267. package/dist/design-system/{p-d2ce01ac.entry.js → p-9df0dd32.entry.js} +1 -1
  268. package/dist/design-system/{p-BPKiBSGr.js → p-BnUjeY2n.js} +1 -1
  269. package/dist/design-system/p-CHijmX_D.js +1 -0
  270. package/dist/design-system/p-CdvQqvIe.js +2 -0
  271. package/dist/design-system/p-DMm_GeZC.js +1 -0
  272. package/dist/design-system/p-Dz23PPdF.js +1 -0
  273. package/dist/design-system/{p-3595cafb.entry.js → p-a05f4888.entry.js} +1 -1
  274. package/dist/design-system/p-a81e4ae0.entry.js +1 -0
  275. package/dist/design-system/p-aaa551fa.entry.js +1 -0
  276. package/dist/design-system/p-adc218f5.entry.js +1 -0
  277. package/dist/design-system/{p-8ed1d470.entry.js → p-b7e913e7.entry.js} +1 -1
  278. package/dist/design-system/p-b90eaebd.entry.js +1 -0
  279. package/dist/design-system/{p-d9f33192.entry.js → p-c5263a22.entry.js} +1 -1
  280. package/dist/design-system/{p-ec4ad48c.entry.js → p-c5eea64c.entry.js} +1 -1
  281. package/dist/design-system/{p-02f0b906.entry.js → p-c906d22d.entry.js} +1 -1
  282. package/dist/design-system/{p-d204cac5.entry.js → p-defe65db.entry.js} +1 -1
  283. package/dist/design-system/{p-4c85f6f6.entry.js → p-e16725f7.entry.js} +1 -1
  284. package/dist/design-system/p-e4096b72.entry.js +1 -0
  285. package/dist/design-system/{p-8de3b502.entry.js → p-e72706ea.entry.js} +1 -1
  286. package/dist/design-system/p-fb01f963.entry.js +1 -0
  287. package/dist/design-system/{p-adf2f398.entry.js → p-fc9577d9.entry.js} +1 -1
  288. package/dist/design-system/{p-Bth2l1cy.js → p-rayWyWtG.js} +1 -1
  289. package/dist/esm/design-system.js +3 -3
  290. package/dist/esm/{index-Dz490Ukt.js → index-CdvQqvIe.js} +1 -1
  291. package/dist/esm/loader.js +3 -3
  292. package/dist/esm/sd-action-modal.entry.js +2 -2
  293. package/dist/esm/sd-badge.entry.js +2 -2
  294. package/dist/esm/sd-barcode-input.entry.js +2 -2
  295. package/dist/esm/sd-button_2.entry.js +3 -3
  296. package/dist/esm/sd-calendar_2.entry.js +8 -9
  297. package/dist/esm/sd-callout.entry.js +2 -2
  298. package/dist/esm/sd-card.entry.js +2 -2
  299. package/dist/esm/sd-checkbox.entry.js +5 -5
  300. package/dist/esm/sd-chip-input.entry.js +22 -17
  301. package/dist/esm/sd-chip.entry.js +7 -7
  302. package/dist/esm/sd-circle-progress.entry.js +3 -3
  303. package/dist/esm/sd-confirm-modal_2.entry.js +3 -3
  304. package/dist/esm/sd-date-box.entry.js +1 -1
  305. package/dist/esm/{component.datepicker-BOxGhKKP.js → sd-date-picker.config-CdXJcOGr.js} +65 -2
  306. package/dist/esm/sd-date-picker_8.entry.js +141 -51
  307. package/dist/esm/sd-date-range-picker-calendar.entry.js +158 -8
  308. package/dist/esm/sd-divider.entry.js +3 -3
  309. package/dist/esm/sd-dropdown-button.entry.js +2 -2
  310. package/dist/esm/sd-field_3.entry.js +51 -52
  311. package/dist/esm/sd-form.entry.js +1 -1
  312. package/dist/esm/sd-ghost-button_3.entry.js +14 -10
  313. package/dist/esm/sd-guide.entry.js +2 -2
  314. package/dist/esm/sd-key-value-table.entry.js +2 -2
  315. package/dist/esm/sd-linear-progress.entry.js +3 -3
  316. package/dist/esm/sd-loading-container.entry.js +3 -3
  317. package/dist/esm/sd-modal-container.entry.js +1 -1
  318. package/dist/esm/sd-pagination.entry.js +4 -4
  319. package/dist/esm/sd-popover.entry.js +134 -44
  320. package/dist/esm/sd-popup.entry.js +4 -4
  321. package/dist/esm/sd-radio-button.entry.js +3 -3
  322. package/dist/esm/sd-radio.entry.js +4 -2
  323. package/dist/esm/sd-scroll-area.entry.js +42 -0
  324. package/dist/esm/sd-select-list-item_4.entry.js +12 -12
  325. package/dist/esm/sd-stepper.entry.js +188 -0
  326. package/dist/esm/sd-switch.entry.js +13 -3
  327. package/dist/esm/sd-tabs.entry.js +2 -2
  328. package/dist/esm/sd-text-link.entry.js +4 -4
  329. package/dist/esm/sd-time-picker-selector.entry.js +177 -0
  330. package/dist/esm/sd-time-picker-trigger.entry.js +73 -0
  331. package/dist/esm/sd-time-picker.config-DUq29Nhs.js +148 -0
  332. package/dist/esm/sd-time-picker.entry.js +171 -0
  333. package/dist/esm/sd-time-range-picker-selector.entry.js +217 -0
  334. package/dist/esm/sd-time-range-picker.entry.js +202 -0
  335. package/dist/esm/sd-toast-container.entry.js +2 -2
  336. package/dist/esm/sd-toast.entry.js +3 -3
  337. package/dist/esm/sd-toggle.entry.js +2 -2
  338. package/dist/esm/{system-Bth2l1cy.js → system-rayWyWtG.js} +3 -1
  339. package/dist/esm/{tooltipArrow-CEHVt90h.js → tooltipArrow-BsQ__AbZ.js} +1 -1
  340. package/dist/esm/{useDatePicker-BG0lUGJG.js → useDatePicker-DQ5Kyy_D.js} +1 -1
  341. package/dist/types/components/sd-checkbox/sd-checkbox.d.ts +2 -2
  342. package/dist/types/components/sd-chip/sd-chip.d.ts +3 -3
  343. package/dist/types/components/sd-chip-input/sd-chip-input.d.ts +4 -2
  344. package/dist/types/components/sd-date-picker/sd-date-picker.d.ts +2 -0
  345. package/dist/types/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.d.ts +20 -0
  346. package/dist/types/components/sd-date-range-picker/sd-date-range-picker.config.d.ts +25 -0
  347. package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts +9 -0
  348. package/dist/types/components/sd-field/sd-field.d.ts +7 -0
  349. package/dist/types/components/sd-file-picker/sd-file-picker.config.d.ts +28 -0
  350. package/dist/types/components/sd-file-picker/sd-file-picker.d.ts +3 -1
  351. package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts +5 -0
  352. package/dist/types/components/sd-input/sd-input.d.ts +1 -1
  353. package/dist/types/components/sd-number-input/sd-number-input.d.ts +8 -0
  354. package/dist/types/components/sd-popover/sd-popover.config.d.ts +22 -0
  355. package/dist/types/components/sd-popover/sd-popover.d.ts +29 -36
  356. package/dist/types/components/sd-radio/sd-radio.d.ts +3 -1
  357. package/dist/types/components/sd-radio-button/sd-radio-button.d.ts +2 -2
  358. package/dist/types/components/sd-radio-group/sd-radio-group.d.ts +2 -2
  359. package/dist/types/components/sd-scroll-area/sd-scroll-area.config.d.ts +5 -0
  360. package/dist/types/components/sd-scroll-area/sd-scroll-area.d.ts +14 -0
  361. package/dist/types/components/sd-stepper/sd-stepper.config.d.ts +43 -0
  362. package/dist/types/components/sd-stepper/sd-stepper.d.ts +18 -0
  363. package/dist/types/components/sd-switch/sd-switch.d.ts +8 -1
  364. package/dist/types/components/sd-tag/sd-tag.d.ts +2 -2
  365. package/dist/types/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.d.ts +35 -0
  366. package/dist/types/components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.d.ts +21 -0
  367. package/dist/types/components/sd-time-picker/sd-time-picker.config.d.ts +71 -0
  368. package/dist/types/components/sd-time-picker/sd-time-picker.d.ts +84 -0
  369. package/dist/types/components/sd-time-range-picker/sd-time-range-picker-selector/sd-time-range-picker-selector.d.ts +40 -0
  370. package/dist/types/components/sd-time-range-picker/sd-time-range-picker.config.d.ts +9 -0
  371. package/dist/types/components/sd-time-range-picker/sd-time-range-picker.d.ts +88 -0
  372. package/dist/types/components/sd-tooltip/sd-tooltip.d.ts +7 -22
  373. package/dist/types/components.d.ts +2630 -1611
  374. package/hydrate/index.js +2163 -436
  375. package/hydrate/index.mjs +2163 -436
  376. package/package.json +1 -1
  377. package/dist/cjs/sd-date-picker.config-Chrd8c4v.js +0 -41
  378. package/dist/cjs/useDatePicker-CgpIfwLA.js +0 -103
  379. package/dist/components/p-BFVfSW9t.js +0 -1
  380. package/dist/components/p-BKu0I6Io.js +0 -1
  381. package/dist/components/p-B_Zwr4Et.js +0 -1
  382. package/dist/components/p-CBoDoYDO.js +0 -1
  383. package/dist/components/p-CYMMLsGt.js +0 -1
  384. package/dist/components/p-C_SG4M4z.js +0 -1
  385. package/dist/components/p-CgSXYw_0.js +0 -1
  386. package/dist/components/p-CmRF12Fy.js +0 -1
  387. package/dist/components/p-CnRfET5y.js +0 -1
  388. package/dist/components/p-Cvsrc0be.js +0 -1
  389. package/dist/components/p-DJ8z7_EG.js +0 -1
  390. package/dist/components/p-DJmxpVkK.js +0 -1
  391. package/dist/components/p-DN7MAx-q.js +0 -1
  392. package/dist/components/p-DS6NVBvu.js +0 -1
  393. package/dist/components/p-D_56BjcD.js +0 -1
  394. package/dist/components/p-Uh9emYrV.js +0 -1
  395. package/dist/components/p-f0aBxUBG.js +0 -1
  396. package/dist/design-system/p-0e014b76.entry.js +0 -1
  397. package/dist/design-system/p-1b5fcf7b.entry.js +0 -1
  398. package/dist/design-system/p-2a4d2ee0.entry.js +0 -1
  399. package/dist/design-system/p-2d6a7d7b.entry.js +0 -1
  400. package/dist/design-system/p-4b474538.entry.js +0 -1
  401. package/dist/design-system/p-BOxGhKKP.js +0 -1
  402. package/dist/design-system/p-BhcvMs8c.js +0 -1
  403. package/dist/design-system/p-Dz490Ukt.js +0 -2
  404. package/dist/design-system/p-a631cd78.entry.js +0 -1
  405. package/dist/design-system/p-cb6ab65c.entry.js +0 -1
  406. package/dist/design-system/p-d51f4170.entry.js +0 -1
  407. package/dist/design-system/p-e7740a5f.entry.js +0 -1
  408. package/dist/design-system/p-e85bf462.entry.js +0 -1
  409. package/dist/design-system/p-ea008087.entry.js +0 -1
  410. package/dist/design-system/p-f962e5d2.entry.js +0 -1
  411. package/dist/esm/sd-date-picker.config-krRuSUsA.js +0 -38
package/hydrate/index.mjs CHANGED
@@ -132,7 +132,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
132
132
  const NAMESPACE = 'design-system';
133
133
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
134
134
 
135
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-neutral-bright:#F9F9F9;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-ghost-button-ghost-button-group-gap:8px;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-text-link-text-link-group-horizontal-normal:16px;--sd-text-link-text-link-group-horizontal-wide:24px;--sd-text-link-text-link-group-vertical-normal:4px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-toggle-toggle-group-gap:8px;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-checkbox-checkbox-group-gap-horizontal:24px;--sd-checkbox-checkbox-group-gap-vertical:8px;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-radio-group-gap-horizontal:24px;--sd-radio-radio-group-gap-vertical:8px;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:16px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-number-input-number-input-stepper-border-default:#93C4FF;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-datepicker-datepicker-calendar-time-bg-default:#F9F9F9;--sd-datepicker-datepicker-calendar-time-bg-selected:#F5FAFF;--sd-datepicker-datepicker-calendar-time-date-label:#222222;--sd-datepicker-datepicker-calendar-time-date-unit:#888888;--sd-datepicker-datepicker-calendar-time-date-gap:6px;--sd-datepicker-datepicker-calendar-time-radius:8px;--sd-datepicker-datepicker-calendar-time-padding-x:16px;--sd-datepicker-datepicker-calendar-time-padding-y:12px;--sd-datepicker-datepicker-calendar-time-gap:12px;--sd-datepicker-datepicker-calendar-time-section-gap:12px;--sd-datepicker-datepicker-calendar-time-unit-gap:2px;--sd-datepicker-datepicker-calendar-time-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-time-typography-font-weight:500;--sd-datepicker-datepicker-calendar-time-typography-font-size:12px;--sd-datepicker-datepicker-calendar-time-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-time-typography-line-height:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#222222;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-timepicker-timepicker-border-default:#AAAAAA;--sd-timepicker-timepicker-border-focus:#0075FF;--sd-timepicker-timepicker-border-disabled:#CCCCCC;--sd-timepicker-timepicker-border-width:1px;--sd-timepicker-timepicker-bg-default:#FFFFFF;--sd-timepicker-timepicker-bg-disabled:#E1E1E1;--sd-timepicker-timepicker-icon-default:#888888;--sd-timepicker-timepicker-icon-disabled:#BBBBBB;--sd-timepicker-timepicker-text-default:#222222;--sd-timepicker-timepicker-text-disabled:#888888;--sd-timepicker-timepicker-selector-bg:#FFFFFF;--sd-timepicker-timepicker-selector-range-heading-color:#555555;--sd-timepicker-timepicker-selector-range-heading-gap:16px;--sd-timepicker-timepicker-selector-range-padding-x-y:24px;--sd-timepicker-timepicker-selector-range-panel-gap:24px;--sd-timepicker-timepicker-selector-range-section-gap:12px;--sd-timepicker-timepicker-selector-radius:8px;--sd-timepicker-timepicker-selector-section-padding-x:16px;--sd-timepicker-timepicker-selector-section-padding-y:12px;--sd-timepicker-timepicker-selector-time-gap:4px;--sd-timepicker-timepicker-selector-time-column-gap:8px;--sd-timepicker-timepicker-selector-input-width:40px;--sd-timepicker-timepicker-selector-colon-size:16px;--sd-timepicker-timepicker-sm-height:28px;--sd-timepicker-timepicker-sm-padding-x:12px;--sd-timepicker-timepicker-sm-gap:8px;--sd-timepicker-timepicker-sm-icon:16px;--sd-timepicker-timepicker-sm-radius:4px;--sd-timepicker-timepicker-md-height:36px;--sd-timepicker-timepicker-md-padding-x:16px;--sd-timepicker-timepicker-md-gap:12px;--sd-timepicker-timepicker-md-icon:20px;--sd-timepicker-timepicker-md-radius:6px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-tag-tag-group-gap:8px;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-overlay-overlay-header-bg:#FFFFFF;--sd-overlay-overlay-header-padding-x:24px;--sd-overlay-overlay-header-padding-y:20px;--sd-overlay-overlay-header-gap:12px;--sd-overlay-overlay-header-title-color:#033F59;--sd-overlay-overlay-header-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-overlay-overlay-header-title-typography-font-weight:700;--sd-overlay-overlay-header-title-typography-font-size:16px;--sd-overlay-overlay-header-title-typography-text-decoration:none;--sd-overlay-overlay-header-title-typography-line-height:26px;--sd-overlay-overlay-footer-bg-default:#FFFFFF;--sd-overlay-overlay-footer-bg-neutral:#F6F6F6;--sd-overlay-overlay-footer-padding-x:20px;--sd-overlay-overlay-footer-padding-y:8px;--sd-overlay-overlay-footer-gap:16px;--sd-overlay-overlay-footer-shadow-x:0px;--sd-overlay-overlay-footer-shadow-y:0px;--sd-overlay-overlay-footer-shadow-blur:24px;--sd-overlay-overlay-footer-shadow-spread:0px;--sd-overlay-overlay-footer-shadow-color:rgba(34,34,34,0.2);--sd-overlay-overlay-footer-shadow-type:dropShadow;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-header-padding-x:16px;--sd-popup-popup-header-padding-y:12px;--sd-popup-popup-bg:#EEEEEE;--sd-drawer-drawer-bg:#F6F6F6;--sd-drawer-drawer-body-border:#E1E1E1;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-progress-progress-inverse-color:#FFFFFF;--sd-progress-progress-inverse-opacity:40%;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-padding-y-dense:6px;--sd-table-table-body-padding-y-default:8px;--sd-table-table-body-padding-x-default:8px;--sd-table-table-body-padding-x-wide:16px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding-y:8px;--sd-table-table-key-value-body-padding-x-default:8px;--sd-table-table-key-value-body-padding-x-wide:16px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-pagination-pagination-simple-gap:8px;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-stepper-stepper-sm-sequence-size:20px;--sd-stepper-stepper-sm-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-active-font-weight:700;--sd-stepper-stepper-sm-typography-active-font-size:12px;--sd-stepper-stepper-sm-typography-active-line-height:20px;--sd-stepper-stepper-sm-typography-active-text-decoration:none;--sd-stepper-stepper-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-default-font-weight:500;--sd-stepper-stepper-sm-typography-default-font-size:12px;--sd-stepper-stepper-sm-typography-default-line-height:20px;--sd-stepper-stepper-sm-typography-default-text-decoration:none;--sd-stepper-stepper-dash-width:20px;--sd-stepper-stepper-dash-color:#888888;--sd-stepper-stepper-lg-sequence-size:24px;--sd-stepper-stepper-lg-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-active-font-weight:700;--sd-stepper-stepper-lg-typography-active-font-size:14px;--sd-stepper-stepper-lg-typography-active-line-height:24px;--sd-stepper-stepper-lg-typography-active-text-decoration:none;--sd-stepper-stepper-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-default-font-weight:500;--sd-stepper-stepper-lg-typography-default-font-size:14px;--sd-stepper-stepper-lg-typography-default-line-height:24px;--sd-stepper-stepper-lg-typography-default-text-decoration:none;--sd-stepper-stepper-container-gap:12px;--sd-stepper-stepper-item-gap:8px;--sd-stepper-stepper-sequence-radius:9999px;--sd-stepper-stepper-sequence-border-active:#93C4FF;--sd-stepper-stepper-sequence-border-default:#E1E1E1;--sd-stepper-stepper-sequence-border-completed:#CCCCCC;--sd-stepper-stepper-sequence-border-witdh:1px;--sd-stepper-stepper-sequence-icon:12px;--sd-stepper-stepper-sequence-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sequence-typography-font-weight:700;--sd-stepper-stepper-sequence-typography-font-size:12px;--sd-stepper-stepper-sequence-typography-line-height:20px;--sd-stepper-stepper-sequence-typography-text-decoration:none;--sd-stepper-stepper-sequence-bg-active:#D9EAFF;--sd-stepper-stepper-sequence-bg-default:#FFFFFF;--sd-stepper-stepper-sequence-bg-completed:#E1E1E1;--sd-stepper-stepper-sequence-text-active:#0075FF;--sd-stepper-stepper-sequence-text-default:#AAAAAA;--sd-stepper-stepper-text-active:#0075FF;--sd-stepper-stepper-text-default:#888888;--sd-gnb-light-bg:#FFFFFF;--sd-gnb-light-divider:#E1E1E1;--sd-gnb-light-item-bg-default:#FFFFFF;--sd-gnb-light-item-bg-hover:#F6F6F6;--sd-gnb-light-item-bg-selected:#EFF6FF;--sd-gnb-light-item-fg-default:#222222;--sd-gnb-light-item-fg-hover:#222222;--sd-gnb-light-item-fg-selected:#0075FF;--sd-gnb-light-item-chevron:#555555;--sd-gnb-light-top-icon:#888888;--sd-gnb-dark-bg:#001B39;--sd-gnb-dark-divider:#004177;--sd-gnb-dark-item-bg-default:#001B39;--sd-gnb-dark-item-bg-hover:#07284A;--sd-gnb-dark-item-bg-selected:#002B5E;--sd-gnb-dark-item-fg-default:#FFFFFF;--sd-gnb-dark-item-fg-hover:#FFFFFF;--sd-gnb-dark-item-fg-selected:#93C4FF;--sd-gnb-dark-item-chevron:#AAAAAA;--sd-gnb-dark-top-icon:#FFFFFF}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
135
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-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-navigation-xs-medium-font-weight:500;--sd-system-typography-navigation-xs-medium-font-size:11px;--sd-system-typography-navigation-xs-medium-line-height:18px;--sd-system-typography-navigation-xs-medium-text-decoration:none;--sd-system-typography-navigation-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-navigation-xs-bold-font-weight:700;--sd-system-typography-navigation-xs-bold-font-size:11px;--sd-system-typography-navigation-xs-bold-line-height:18px;--sd-system-typography-navigation-xs-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-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-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-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-gnb-light-bg:#FFFFFF;--sd-gnb-gnb-light-divider:#E1E1E1;--sd-gnb-gnb-light-item-bg-default:#FFFFFF;--sd-gnb-gnb-light-item-bg-hover:#F6F6F6;--sd-gnb-gnb-light-item-bg-selected:#EFF6FF;--sd-gnb-gnb-light-item-fg-default:#222222;--sd-gnb-gnb-light-item-fg-hover:#222222;--sd-gnb-gnb-light-item-fg-selected:#0075FF;--sd-gnb-gnb-light-item-chevron:#555555;--sd-gnb-gnb-light-top-icon:#888888;--sd-gnb-gnb-light-rail-fg-default:#888888;--sd-gnb-gnb-dark-bg:#001B39;--sd-gnb-gnb-dark-divider:#004177;--sd-gnb-gnb-dark-item-bg-default:#001B39;--sd-gnb-gnb-dark-item-bg-hover:#07284A;--sd-gnb-gnb-dark-item-bg-selected:#002B5E;--sd-gnb-gnb-dark-item-fg-default:#FFFFFF;--sd-gnb-gnb-dark-item-fg-hover:#FFFFFF;--sd-gnb-gnb-dark-item-fg-selected:#93C4FF;--sd-gnb-gnb-dark-item-chevron:#AAAAAA;--sd-gnb-gnb-dark-top-icon:#FFFFFF;--sd-gnb-gnb-dark-rail-fg-default:#AAAAAA;--sd-gnb-gnb-top-height:56px;--sd-gnb-gnb-top-padding-x:16px;--sd-gnb-gnb-top-gap:16px;--sd-gnb-gnb-logo-height:32px;--sd-gnb-gnb-fold-width:48px;--sd-gnb-gnb-body-padding:12px;--sd-gnb-gnb-item-padding-y:6px;--sd-gnb-gnb-item-chevron-size:12px;--sd-gnb-gnb-box-item-padding-right:12px;--sd-gnb-gnb-box-item-gap:8px;--sd-gnb-gnb-box-item-radius:8px;--sd-gnb-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-gnb-box-item-typography-default-font-weight:500;--sd-gnb-gnb-box-item-typography-default-font-size:14px;--sd-gnb-gnb-box-item-typography-default-line-height:24px;--sd-gnb-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-gnb-box-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-gnb-box-item-typography-selected-font-weight:700;--sd-gnb-gnb-box-item-typography-selected-font-size:14px;--sd-gnb-gnb-box-item-typography-selected-line-height:24px;--sd-gnb-gnb-box-item-typography-selected-text-decoration:none;--sd-gnb-gnb-box-item-depth1-padding-left:12px;--sd-gnb-gnb-box-item-depth1-icon:20px;--sd-gnb-gnb-box-item-depth2-padding-left:24px;--sd-gnb-gnb-box-item-depth3-padding-left:36px;--sd-gnb-gnb-belt-item-padding-right:20px;--sd-gnb-gnb-belt-item-gap:8px;--sd-gnb-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-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-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-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-gnb-belt-item-depth1-icon:16px;--sd-gnb-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-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-gnb-rail-padding:12px;--sd-gnb-gnb-rail-gap:16px;--sd-gnb-gnb-rail-item-padding-top:4px;--sd-gnb-gnb-rail-item-padding-bottom:2px;--sd-gnb-gnb-rail-item-radius:8px;--sd-gnb-gnb-rail-item-icon:24px;--sd-gnb-gnb-rail-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-gnb-rail-item-typography-default-font-weight:500;--sd-gnb-gnb-rail-item-typography-default-font-size:11px;--sd-gnb-gnb-rail-item-typography-default-line-height:18px;--sd-gnb-gnb-rail-item-typography-default-text-decoration:none;--sd-gnb-gnb-rail-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-gnb-rail-item-typography-selected-font-weight:700;--sd-gnb-gnb-rail-item-typography-selected-font-size:11px;--sd-gnb-gnb-rail-item-typography-selected-line-height:18px;--sd-gnb-gnb-rail-item-typography-selected-text-decoration:none;--sd-gnb-gnb-rail-item-width:44px}.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{width:12px;height:12px;background:transparent}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}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}";
136
136
 
137
137
  /*
138
138
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5344,7 +5344,7 @@ class SdActionModal {
5344
5344
  if (this.height != null && this.height !== '') {
5345
5345
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5346
5346
  }
5347
- return (hAsync("div", { key: '19ea6ad7ef8aeb5fc4a8537e388542c6c2244c71', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: 'd56e8c35c88b3f4c2f279ee7e8b2f92c9e9760c5', class: "sd-action-modal__header" }, hAsync("h2", { key: '50e3334be477751314febff5b29103cc7600201e', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: 'bc95f535e273ad97f820d548647601897b6d4253', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '332a0923092c0ecec193d774f9b77316d41cd97c', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '56127a67e0130b9639b7b9146604ce09f9d48e16', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: '22668cbe686a310e829c9d6052cec4b62a7bd194', class: "sd-action-modal__body" }, hAsync("slot", { key: '58621eddef8c7423620a41a3c8c52b128554946e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: '6c5ed286a5cfa39a1a46da606fee61767199344c', class: "sd-action-modal__footer" }, hAsync("div", { key: 'ea0f414e3a1aecd3b150f93d544b801d633793c8', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '171f7df6863e49565e9bf0d7193e7c39c05462b5', name: "bottom-sub-content" })), hAsync("sd-button", { key: '919ec31d0ab1c60fb1f186c6c404ba9452ff0dbb', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5347
+ return (hAsync("div", { key: '0ea43d16b08533b5b9cfbeb6ba841e6deb9a4212', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, hAsync("header", { key: '410e57f4bf29a2f754d86b78292e2281625d7cc7', class: "sd-action-modal__header" }, hAsync("h2", { key: '0d27f2538b7b65d7cb0e708e431ba93bbe874e7f', class: "sd-action-modal__title" }, this.modalTitle), hAsync("div", { key: '9ad61d454f2305165878a8e41c2165590e56b8e2', class: "sd-action-modal__header-sub" }, hAsync("slot", { key: '7a0cdfa33590fbc743e8cace34f2963f1f413516', name: "header-sub-title" })), hAsync("sd-ghost-button", { key: '4a216590c2a4ab28dbaf5cead04c1239c46897a6', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'a127cc066dc02a421b8bf79ac8c4ee9149e14988', class: "sd-action-modal__body" }, hAsync("slot", { key: '0db445593169be7f38bde831d0024edc199720f2', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (hAsync("footer", { key: 'ea4255f7c8d010ba6305a9cec484ea6625eab9ee', class: "sd-action-modal__footer" }, hAsync("div", { key: 'f722674d3f478748b826ee2265412e700bcdacc4', class: "sd-action-modal__footer-sub" }, hAsync("slot", { key: '96c8ab1d079c4824ef661e2fa0565023ac2222f4', name: "bottom-sub-content" })), hAsync("sd-button", { key: '0d63bee0d36c827c49ddf96fe41de67d1dc4524d', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
5348
5348
  }
5349
5349
  static get style() { return sdActionModalCss(); }
5350
5350
  static get cmpMeta() { return {
@@ -5397,7 +5397,7 @@ class SdBadge {
5397
5397
  color = 'blue';
5398
5398
  render() {
5399
5399
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5400
- return (hAsync("div", { key: '2531ebcfe66e33f8ac31be0299865ee8aa45ed17', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'a8ddd518167b90fedb4d6d26cc28b17082f5fe0b', class: "sd-badge__dot" })));
5400
+ return (hAsync("div", { key: '71aebd3dd22a67eeb04189ff0e7c4379ec5d6802', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'd40e81130d58b6a03ffe0461478ee8af50cd7cf6', class: "sd-badge__dot" })));
5401
5401
  }
5402
5402
  static get style() { return sdBadgeCss(); }
5403
5403
  static get cmpMeta() { return {
@@ -5470,26 +5470,26 @@ var inputTokens = {
5470
5470
  textinput: textinput
5471
5471
  };
5472
5472
 
5473
- const sm$5 = inputTokens.textinput.sm;
5474
- const md$5 = inputTokens.textinput.md;
5473
+ const sm$6 = inputTokens.textinput.sm;
5474
+ const md$6 = inputTokens.textinput.md;
5475
5475
  const BARCODE_INPUT_SIZE_MAP = {
5476
5476
  sm: {
5477
- height: sm$5.height,
5478
- paddingX: sm$5.paddingX,
5479
- gap: sm$5.gap,
5480
- radius: sm$5.radius,
5481
- fontSize: sm$5.typography.fontSize,
5482
- lineHeight: sm$5.typography.lineHeight,
5483
- fontWeight: sm$5.typography.fontWeight,
5477
+ height: sm$6.height,
5478
+ paddingX: sm$6.paddingX,
5479
+ gap: sm$6.gap,
5480
+ radius: sm$6.radius,
5481
+ fontSize: sm$6.typography.fontSize,
5482
+ lineHeight: sm$6.typography.lineHeight,
5483
+ fontWeight: sm$6.typography.fontWeight,
5484
5484
  },
5485
5485
  md: {
5486
- height: md$5.height,
5487
- paddingX: md$5.paddingX,
5488
- gap: md$5.gap,
5489
- radius: md$5.radius,
5490
- fontSize: md$5.typography.fontSize,
5491
- lineHeight: md$5.typography.lineHeight,
5492
- fontWeight: md$5.typography.fontWeight,
5486
+ height: md$6.height,
5487
+ paddingX: md$6.paddingX,
5488
+ gap: md$6.gap,
5489
+ radius: md$6.radius,
5490
+ fontSize: md$6.typography.fontSize,
5491
+ lineHeight: md$6.typography.lineHeight,
5492
+ fontWeight: md$6.typography.fontWeight,
5493
5493
  },
5494
5494
  };
5495
5495
  const BARCODE_INPUT_COLORS = {
@@ -5640,7 +5640,7 @@ class SdBarcodeInput {
5640
5640
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5641
5641
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5642
5642
  };
5643
- return (hAsync("sd-field", { key: '79dd05ab7f39104c2aa54c44a71cc3fe4cf7870f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: '5470e7e6ddff60239bf1d42d78843f807a72c07b', class: "sd-barcode-input__content" }, hAsync("slot", { key: 'ab15a2e5a9287f3c124f48f89610ab55c898b76e', name: "prefix" }), hAsync("input", { key: 'e2edbbcfb70ec035e68735c4de7792d6c8ef177f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'd2065cad4d491747a2a61b60b2bb10a7ef5b18d9', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: '2b88fe6fd8c1c013c60b50584721a7c4d4f3bef5', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5643
+ return (hAsync("sd-field", { key: 'a1b0bba7815d907fbe1bd255a852a05c83837c27', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'c1f5145823f0a66dd0207b2b634963360d81dfd9', class: "sd-barcode-input__content" }, hAsync("slot", { key: '09d3d9aee00e59c6445c0f6701017dac236de9ac', name: "prefix" }), hAsync("input", { key: 'c626ca1f66c660d340202d47b523e379c20dff0e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'b0989ed15b141b29472a884302b1f25d8c8616e2', name: "suffix" }), this.clearable && this.internalValue && (hAsync("sd-ghost-button", { key: 'ec07f8233456f8a4e039048ac2958da4ccc0709e', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
5644
5644
  if (this.disabled)
5645
5645
  return;
5646
5646
  this.internalValue = '';
@@ -6585,14 +6585,14 @@ class SdButton {
6585
6585
  const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
6586
6586
  const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
6587
6587
  const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
6588
- return (hAsync("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
6588
+ return (hAsync("button", { key: '2a57abd6819306be62a379861e15cfa06c626e63', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
6589
6589
  '--sd-button-bg': config.color,
6590
6590
  '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6591
6591
  '--sd-button-border': PRESET_BORDER_COLORS$1[preset],
6592
6592
  '--sd-button-text': PRESET_TEXT_COLORS$1[preset],
6593
6593
  '--sd-button-icon': PRESET_ICON_COLORS$1[preset],
6594
6594
  '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
6595
- }, onClick: this.handleClick }, hAsync("span", { key: 'fd0cbd15e1edf4dc599e7eb3df3dcb1ddbd4732e', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: '5ace6d85974e1c2ecb0fcf55b0330801f78f094f', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: 'ef1240a6acee55def8244149b0af4e0252be558c', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: '127de568676734d75dd801b9ea46aa35e09b558c', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
6595
+ }, onClick: this.handleClick }, hAsync("span", { key: 'af0bcef670ee1d3963f9e2f19fbba369bb8fa341', class: "sd-button__content" }, validIcon && (hAsync("sd-icon", { key: 'f2a104e410d76363981acd565ffe76132d69a420', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && hAsync("span", { key: '0e19594ad6525841f7567aced516aa82321c83a2', class: "sd-button__label" }, this.label), validRightIcon && (hAsync("sd-icon", { key: '01cb1bba8a4a1450c0a2cc30abfb4608190788d5', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
6596
6596
  }
6597
6597
  static get style() { return sdButtonCss(); }
6598
6598
  static get cmpMeta() { return {
@@ -6779,7 +6779,34 @@ const datepicker = {
6779
6779
  group: {
6780
6780
  gap: "12"
6781
6781
  }
6782
- }}
6782
+ },
6783
+ time: {
6784
+ bg: {
6785
+ "default": "#F9F9F9",
6786
+ selected: "#F5FAFF"
6787
+ },
6788
+ date: {
6789
+ label: "#222222",
6790
+ unit: "#888888",
6791
+ gap: "6"
6792
+ },
6793
+ radius: "8",
6794
+ paddingX: "16",
6795
+ paddingY: "12",
6796
+ gap: "12",
6797
+ section: {
6798
+ gap: "12"
6799
+ },
6800
+ unit: {
6801
+ gap: "2"
6802
+ },
6803
+ typography: {
6804
+ fontWeight: "500",
6805
+ fontSize: "12",
6806
+ lineHeight: "20"
6807
+ }
6808
+ }
6809
+ }
6783
6810
  };
6784
6811
  var datepickerTokens = {
6785
6812
  datepicker: datepicker
@@ -7020,7 +7047,7 @@ class SdCalendar {
7020
7047
  const eventMap = this.eventMap;
7021
7048
  const legend = this.legendItems;
7022
7049
  const hasEvents = (this.events?.length ?? 0) > 0;
7023
- return (hAsync("div", { key: '317beb7cdffbba8982306539441fec46e6330d82', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: '0d9e1084ee0bff994b4a00b7f2d490c0e101aa16', class: "sd-calendar__header" }, hAsync("div", { key: '8d82438f1820721fcbcd14cf42c1ae00b3a517d9', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '4e3391c57c0fdf3ad95b82d82c7a130c3202229d', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '6a7cbfb0069dd1d29e195cc09a9c55a8ae52aa40', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '239d5e623f830e8ceeb069e78126175772af48de', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '24362199d36afc204eebe5c5f14a41705f6782d9', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: '7aa04fa1fbb355d8b3fae4cca011999b4f7f5850', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: 'ea5d0129d4f7eecaeff5793460363e2f15c238b8', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '7a3879edb74cb71c46fc500d7c230c21e19042c4', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: '7532053f6607d9e4940403f22fd32994128fc457', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'ef59638defed69c325e49fc71ca0cc73a7d778bf', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '0205b10254c75567336bc7e4ed8a26d2227ecb33', class: "sd-calendar__grid" }, this.cells.map(cell => {
7050
+ return (hAsync("div", { key: 'e1e0c276ef6642e811b796d6840ea2ed8860e5ef', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, hAsync("div", { key: 'ed4cb4166fe14237a0291986caae6641f7075be7', class: "sd-calendar__header" }, hAsync("div", { key: '83fb71b32ca4adaf6e42eee2a069d64ed67e08a2', class: "sd-calendar__nav-group" }, hAsync("sd-ghost-button", { key: '35610f7ad609f1f694929355ab6aa363609d035f', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), hAsync("span", { key: '413232de704c401ff38a02e9d5d05788e53d650e', class: "sd-calendar__label" }, this.currentYear), hAsync("sd-ghost-button", { key: '5d60b66064809edaf3505659cca23e70c0702f97', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), hAsync("span", { key: '0d137eea005ac4ee7dd21075f3954b1259a43de1', class: "sd-calendar__divider", "aria-hidden": "true" }), hAsync("div", { key: 'b66dc00192dfd111b3afe98d7ad0ebb775de264d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, hAsync("sd-ghost-button", { key: '9e0087e68fe1ec2ac7d36454e135f0cd5dac71ce', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), hAsync("span", { key: '83ff452dd50105c7515143a6fae5b33da204a945', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), hAsync("sd-ghost-button", { key: 'abc04cedfd725eb5b87ab49d451e55ab727d8fad', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), hAsync("div", { key: 'e06706abdd90a500067b211dea6141a99c736be9', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (hAsync("span", { key: label, class: "sd-calendar__week-cell" }, label)))), hAsync("div", { key: '11a86af0b5b297ad3cfe66e207f2e7a12e9bf869', class: "sd-calendar__grid" }, this.cells.map(cell => {
7024
7051
  const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
7025
7052
  const isToday = cell.inCurrentMonth && today === cell.date;
7026
7053
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -7033,8 +7060,8 @@ class SdCalendar {
7033
7060
  'sd-calendar__day--disabled': isDisabled,
7034
7061
  }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, hAsync("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (hAsync("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (hAsync("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
7035
7062
  })), legend.length > 0 && [
7036
- hAsync("span", { key: 'a06b1cd9ec93891e3762f6334949cd23b643290f', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
7037
- hAsync("div", { key: '8dc6bd2495ab471b56ed6fa252c9e0ad5ebe8341', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
7063
+ hAsync("span", { key: 'd924bb7ce8ceb077cad4d35face238cbb6e39802', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
7064
+ hAsync("div", { key: '2738f49b64e7a45aee0f11eac96c98b811312ad6', class: "sd-calendar__legend" }, legend.map(item => (hAsync("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, hAsync("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), hAsync("span", { class: "sd-calendar__legend-label" }, item.label))))),
7038
7065
  ]));
7039
7066
  }
7040
7067
  static get watchers() { return {
@@ -7291,7 +7318,7 @@ class SdCallout {
7291
7318
  }
7292
7319
  render() {
7293
7320
  const showTitle = this.type === 'danger';
7294
- return (hAsync("div", { key: '6f1f3f4b05febbac7fcfe163d641beca60a67ddb', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '2e0c4050c4ed2d353cd270420abfbd6aac014015', class: "sd-callout__body" }, this.renderBody())));
7321
+ return (hAsync("div", { key: 'dc97a963717ac7f0eb3c18e7f56e46278775ce6b', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), hAsync("div", { key: '6f03a18f95672b95c3e24b3d113b281d40d97f35', class: "sd-callout__body" }, this.renderBody())));
7295
7322
  }
7296
7323
  static get style() { return sdCalloutCss(); }
7297
7324
  static get cmpMeta() { return {
@@ -7318,7 +7345,7 @@ class SdCard {
7318
7345
  /** 카드 루트 엘리먼트에 추가할 클래스 */
7319
7346
  sdClass = '';
7320
7347
  render() {
7321
- return (hAsync(Fragment, { key: 'c8835377275c2bed1a193eaf0a1db0c1c6fde960' }, hAsync("div", { key: '37cec8daa273881a40258f632109d9490e5c6978', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'b1b485f3cfe056db25c79bbe15420484e61e5d1a' }))));
7348
+ return (hAsync(Fragment, { key: '517d48bc3444e448241974b93e31f0079d1f3ef6' }, hAsync("div", { key: '3917d6ba9fc5e20a4f45d8c798f9b29eb6a239de', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '430091d73c9419fdf8496f17fa1f52b5906fa1a4' }))));
7322
7349
  }
7323
7350
  static get style() { return sdCardCss(); }
7324
7351
  static get cmpMeta() { return {
@@ -7430,7 +7457,7 @@ class SdCheckbox {
7430
7457
  this.update = createEvent(this, "sdUpdate", 7);
7431
7458
  }
7432
7459
  get el() { return getElement(this); }
7433
- /** 현재 선택 상태 또는 배열 형태의 값 */
7460
+ /** 현재 선택 상태 또는 배열 형태의 값 (미지정 시 미선택 상태) */
7434
7461
  value;
7435
7462
  /** 배열 모드에서의 개별 값 */
7436
7463
  val;
@@ -7535,13 +7562,13 @@ class SdCheckbox {
7535
7562
  '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
7536
7563
  '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
7537
7564
  };
7538
- return (hAsync("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
7565
+ return (hAsync("label", { key: 'e8c51cf3c43e401dc7d5a625a424dc59203a18db', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '46d20e76a9c5b7a8a44bf13c7f75970dc5c05bad', type: "checkbox", ref: el => {
7539
7566
  this.inputEl = el;
7540
- }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
7567
+ }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), hAsync("div", { key: '86a6a05ee77c940ae0eb54c0839eda9c0afb988e', class: "sd-checkbox__bg" }, this.isChecked !== false ? (hAsync("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
7541
7568
  ? CHECKBOX_COLORS.checked.iconDisabled
7542
7569
  : this.inverse
7543
7570
  ? CHECKBOX_COLORS.checked.iconInverse
7544
- : CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
7571
+ : CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '2ef1708c384c6668f256b8a75d2c7821f06ec10f', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
7545
7572
  }
7546
7573
  static get watchers() { return {
7547
7574
  "value": [{
@@ -7651,8 +7678,8 @@ class SdChip {
7651
7678
  error = false;
7652
7679
  /** 비활성 상태 여부 */
7653
7680
  disabled = false;
7654
- /** 인라인 편집 가능 여부 */
7655
- editable = true;
7681
+ /** 인라인 편집 가능 여부 (기본값 false) */
7682
+ editable = false;
7656
7683
  /** 닫기 버튼 표시 여부 */
7657
7684
  showRemove = true;
7658
7685
  /** 편집 중 표시할 placeholder */
@@ -7737,11 +7764,11 @@ class SdChip {
7737
7764
  return this.inputEl ?? null;
7738
7765
  }
7739
7766
  /**
7740
- * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,
7741
- * false로 명시된 경우에만 편집 불가로 처리한다 (기본값 true).
7767
+ * editable이 명시적으로 true일 때만 편집 가능으로 처리한다 (기본값 false — RN SChip과 일치).
7768
+ * SSR 등에서 editable이 undefined로 들어와도 편집 불가로 안전하게 처리된다.
7742
7769
  */
7743
7770
  get isEditable() {
7744
- return this.editable !== false;
7771
+ return this.editable === true;
7745
7772
  }
7746
7773
  enterEditMode = () => {
7747
7774
  if (this.disabled || this.isEditing || !this.isEditable)
@@ -7875,7 +7902,7 @@ class SdChip {
7875
7902
  '--sd-chip-font-weight': typography.fontWeight,
7876
7903
  '--sd-chip-line-height': typography.lineHeight,
7877
7904
  };
7878
- return (hAsync("span", { key: '2cd717bc842330a28bbc89a662deda16f59106ee', class: {
7905
+ return (hAsync("span", { key: '1dbe21611f38fdcd5670bddf6da42ae4581253e8', class: {
7879
7906
  'sd-chip': true,
7880
7907
  [`sd-chip--${state}`]: true,
7881
7908
  'sd-chip--disabled': this.disabled,
@@ -7974,7 +8001,9 @@ const color = {
7974
8001
  },
7975
8002
  divider: {
7976
8003
  "default": "#E1E1E1"
7977
- }};
8004
+ },
8005
+ border: {
8006
+ "default": "#E1E1E1"}};
7978
8007
  const shadow = {
7979
8008
  spread: {
7980
8009
  md: {
@@ -8045,28 +8074,28 @@ var listItemTokens = {
8045
8074
  listItem: listItem$1
8046
8075
  };
8047
8076
 
8048
- const sm$4 = chipInputTokens.chipInput.sm;
8049
- const md$4 = chipInputTokens.chipInput.md;
8077
+ const sm$5 = chipInputTokens.chipInput.sm;
8078
+ const md$5 = chipInputTokens.chipInput.md;
8050
8079
  const CHIP_INPUT_SIZE_MAP = {
8051
8080
  sm: {
8052
- minHeight: sm$4.minHeight,
8053
- paddingX: sm$4.paddingX,
8054
- paddingY: sm$4.paddingY,
8055
- radius: sm$4.radius,
8056
- fontSize: sm$4.typography.fontSize,
8057
- lineHeight: sm$4.typography.lineHeight,
8058
- fontWeight: sm$4.typography.fontWeight,
8059
- fontFamily: sm$4.typography.fontFamily,
8081
+ minHeight: sm$5.minHeight,
8082
+ paddingX: sm$5.paddingX,
8083
+ paddingY: sm$5.paddingY,
8084
+ radius: sm$5.radius,
8085
+ fontSize: sm$5.typography.fontSize,
8086
+ lineHeight: sm$5.typography.lineHeight,
8087
+ fontWeight: sm$5.typography.fontWeight,
8088
+ fontFamily: sm$5.typography.fontFamily,
8060
8089
  },
8061
8090
  md: {
8062
- minHeight: md$4.minHeight,
8063
- paddingX: md$4.paddingX,
8064
- paddingY: md$4.paddingY,
8065
- radius: md$4.radius,
8066
- fontSize: md$4.typography.fontSize,
8067
- lineHeight: md$4.typography.lineHeight,
8068
- fontWeight: md$4.typography.fontWeight,
8069
- fontFamily: md$4.typography.fontFamily,
8091
+ minHeight: md$5.minHeight,
8092
+ paddingX: md$5.paddingX,
8093
+ paddingY: md$5.paddingY,
8094
+ radius: md$5.radius,
8095
+ fontSize: md$5.typography.fontSize,
8096
+ lineHeight: md$5.typography.lineHeight,
8097
+ fontWeight: md$5.typography.fontWeight,
8098
+ fontFamily: md$5.typography.fontFamily,
8070
8099
  },
8071
8100
  };
8072
8101
  const CHIP_INPUT_COLORS = {
@@ -8109,7 +8138,7 @@ const CHIP_INPUT_SUGGESTIONS = {
8109
8138
  emptyLineHeight: '20px',
8110
8139
  };
8111
8140
 
8112
- const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input sd-portal{display:none}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestions--autocomplete{width:max-content}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
8141
+ const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input sd-portal{display:none}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__reset--end{margin-left:auto}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestions--autocomplete{width:max-content}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
8113
8142
 
8114
8143
  class SdChipInput {
8115
8144
  constructor(hostRef) {
@@ -8143,6 +8172,8 @@ class SdChipInput {
8143
8172
  useReset = false;
8144
8173
  /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
8145
8174
  maxCount;
8175
+ /** 최대 개수·초기화 meta 위치 (end=우측 끝으로 정렬 / inline=콘텐츠에 이어서 배치) */
8176
+ metaPlacement = 'end';
8146
8177
  /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
8147
8178
  duplicateLabel;
8148
8179
  /** 자동완성 후보 목록 */
@@ -8153,8 +8184,8 @@ class SdChipInput {
8153
8184
  recommendedItems = [];
8154
8185
  /** 추천 항목 로딩 중 여부 */
8155
8186
  loadingRecommendedItems = false;
8156
- /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
8157
- autocompleteMinWidth;
8187
+ /** 드롭다운(자동완성) 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 기본값 200) */
8188
+ dropdownMinWidth = 200;
8158
8189
  // sd-field props
8159
8190
  /** 레이블 텍스트 */
8160
8191
  label = '';
@@ -8527,16 +8558,16 @@ class SdChipInput {
8527
8558
  ...suggestionBoxBaseStyle,
8528
8559
  width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
8529
8560
  };
8530
- // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비를 유지한 채 텍스트 길이에 따라 늘어난다.
8531
- const autocompleteMinWidth = this.autocompleteMinWidth != null
8532
- ? typeof this.autocompleteMinWidth === 'number'
8533
- ? `${this.autocompleteMinWidth}px`
8534
- : this.autocompleteMinWidth
8535
- : `${this.fieldRef?.offsetWidth ?? 0}px`;
8561
+ // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비(기본 200px)를 유지한 채 텍스트 길이에 따라 늘어난다.
8562
+ const resolvedDropdownMinWidth = this.dropdownMinWidth == null
8563
+ ? `${this.fieldRef?.offsetWidth ?? 0}px`
8564
+ : typeof this.dropdownMinWidth === 'number'
8565
+ ? `${this.dropdownMinWidth}px`
8566
+ : this.dropdownMinWidth;
8536
8567
  const autocompleteBoxStyle = {
8537
8568
  ...suggestionBoxBaseStyle,
8538
8569
  width: 'max-content',
8539
- minWidth: autocompleteMinWidth,
8570
+ minWidth: resolvedDropdownMinWidth,
8540
8571
  };
8541
8572
  const suggestionItemStyle = {
8542
8573
  display: 'flex',
@@ -8564,7 +8595,7 @@ class SdChipInput {
8564
8595
  fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
8565
8596
  color: CHIP_INPUT_SUGGESTIONS.emptyColor,
8566
8597
  };
8567
- return (hAsync("sd-field", { key: 'c5f94bcc3343549d225d8310e98d424bd74471e5', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '40a0d8d08b33ff454eae29e815afd0378b93d927', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: 'c40b423a77272adaded79c3bc45af2084ef76ecf', class: {
8598
+ return (hAsync("sd-field", { key: '7be2526c67f5eddf5a8652211e7fb47610559d84', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, hAsync("div", { key: '07534d138b631226433ed17101de70170df269cb', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (hAsync("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (hAsync("div", { key: '329ec02d448fe6da2b9cba977fc2e17fa86e358f', class: {
8568
8599
  'sd-chip-input__field': true,
8569
8600
  'sd-chip-input__field--filled': this.inputValue !== '',
8570
8601
  'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -8572,12 +8603,15 @@ class SdChipInput {
8572
8603
  ? this.inputValue
8573
8604
  : this.internalValues.length === 0
8574
8605
  ? this.placeholder
8575
- : '' }, hAsync("input", { key: '05ff9dc453577cb53a6284b9d064ef3e572bbc83', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
8606
+ : '' }, hAsync("input", { key: 'bbe535cc1dd12db472b995bbe1c7d4ac43aa85e4', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
8576
8607
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
8577
- hAsync("div", { key: 'f2e5336974905e3b7672567b29ad4f902ed2bcdf', class: "sd-chip-input__reset",
8608
+ hAsync("div", { key: '2384ba5c13e27556f8135f71c43aa8dd98922850', class: {
8609
+ 'sd-chip-input__reset': true,
8610
+ 'sd-chip-input__reset--end': this.metaPlacement === 'end',
8611
+ }, "data-placement": this.metaPlacement,
8578
8612
  // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
8579
8613
  // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
8580
- onMouseDown: e => e.preventDefault() }, this.inputValue === '' && hAsync("span", { key: '65f0bcd6086029ab9637dd6c7a64524478c11e76', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: 'd4702a86e9f1ca03bf74937dfb9e0c822e9722bf', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '70a5d27129e37e49d8d8d7f92b6ad9471575fa71', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), hAsync("sd-portal", { key: '24e9ac9124c514debc6df00ed663c20ac0f92bf7', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: 'd0e7697fc7a8a754d6b1ce6a34c205bbc7630a81', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (hAsync("div", { key: '2709073f6174ede46b5d9e4d0c72f9b2dc207c54', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
8614
+ onMouseDown: e => e.preventDefault() }, this.inputValue === '' && hAsync("span", { key: 'b332a240d13c48f31c76cf7c5afffe69b25213e5', class: "sd-chip-input__divider" }), this.maxCount != null && (hAsync("span", { key: '70641e0b72e6aec6e02a9cfa84e7a118b24f1355', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (hAsync("sd-text-link", { key: '2dba93d961187b5f2a8501038ea01beb45123a5a', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), hAsync("sd-portal", { key: '68eea57d431b5aafecafc785febe50ead9586652', class: "sd-chip-input__autocomplete-portal", open: showAutocomplete, parentRef: this.fieldRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: 'face530c9604516f06ed9c304172f64fa44d42b0', class: "sd-chip-input__suggestions sd-chip-input__suggestions--autocomplete", role: "listbox", style: autocompleteBoxStyle }, isAutocompleteLoading && (hAsync("div", { key: '1d691afb5bf3a65991bcff925bb8c6ceffa3a688', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), autocompleteListItems.map((item, i) => {
8581
8615
  const isSelected = (this.internalValues ?? []).includes(item);
8582
8616
  const isActive = i === this.activeSuggestionIndex && !isSelected;
8583
8617
  return (hAsync("div", { key: item, class: {
@@ -8603,7 +8637,7 @@ class SdChipInput {
8603
8637
  if (!isSelected)
8604
8638
  this.addChip(item);
8605
8639
  } }, hAsync("span", { style: { flex: '1' } }, item), isSelected && (hAsync("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
8606
- }))), hAsync("sd-portal", { key: '96424b38ffe1ec646b48fdea0b65cdb9dbc2caf7', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: '2ae809c5d03b662e98252768ac3f7ac44730dbb7', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (hAsync("div", { key: '3dbf23b89e923762c0ee092f9f5f724a043bd3a6', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), hAsync("div", { key: 'ebbccb03b333bed84a88d1ca10f0e4e142211582', style: {
8640
+ }))), hAsync("sd-portal", { key: '44d969fb589aad9d292725e6d5fa90da814012fe', class: "sd-chip-input__recommendation-portal", open: showRecommendations, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, hAsync("div", { key: 'e87049f20b42bfe12e8127aa51133704d4bdd233', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isRecommendationLoading && (hAsync("div", { key: '63815fc8325a93178fd8eb1b6394bb489ae1344d', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), hAsync("div", { key: '2598ec64253198067f3b215e79d90d256a9eb562', style: {
8607
8641
  display: 'flex',
8608
8642
  flexWrap: 'wrap',
8609
8643
  gap: '8px',
@@ -8656,12 +8690,13 @@ class SdChipInput {
8656
8690
  "error": [1028],
8657
8691
  "useReset": [4, "use-reset"],
8658
8692
  "maxCount": [2, "max-count"],
8693
+ "metaPlacement": [1, "meta-placement"],
8659
8694
  "duplicateLabel": [1, "duplicate-label"],
8660
8695
  "suggestions": [1040],
8661
8696
  "loadingSuggestions": [4, "loading-suggestions"],
8662
8697
  "recommendedItems": [1040],
8663
8698
  "loadingRecommendedItems": [4, "loading-recommended-items"],
8664
- "autocompleteMinWidth": [8, "autocomplete-min-width"],
8699
+ "dropdownMinWidth": [8, "dropdown-min-width"],
8665
8700
  "label": [1],
8666
8701
  "labelWidth": [8, "label-width"],
8667
8702
  "hint": [1],
@@ -8775,7 +8810,7 @@ class SdCircleProgress {
8775
8810
  }
8776
8811
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
8777
8812
  const showPercent = !this.indeterminate;
8778
- return (hAsync(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, hAsync("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
8813
+ return (hAsync(Host, { key: '7458f47e0e621f2cead4d72618edcd2bdab4b923', style: hostStyle }, hAsync("svg", { key: 'ca0b2b99ac2e1c4a6a51b509fa37292689f4f6ff', 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: '61d09511593f23d1e88712fa45c341a45e34589d', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: 'a4875d4001db2ee091a41c0afe7a4afb0062c610', 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: 'a49f13b27e1c8ee46370ff0fc7692e7d535ddca3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '0c76f052dbccb5f2e33511afb5ff5d325e36d697', class: "sd-circle-progress__label" }, this.label)));
8779
8814
  }
8780
8815
  static get style() { return sdCircleProgressCss(); }
8781
8816
  static get cmpMeta() { return {
@@ -8906,7 +8941,7 @@ class SdConfirmModal {
8906
8941
  const type = this.resolvedType;
8907
8942
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
8908
8943
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
8909
- return (hAsync("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (hAsync("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, hAsync("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (hAsync("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, hAsync("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (hAsync("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), hAsync("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8944
+ return (hAsync("div", { key: '8d84d72de4a8194100a22c2f19190d35da8ad9d0', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: '8d3c11e01819fc4b3a92ef2c00afab336b12a4d8', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: 'f5013d2753d946a46666c3fc4e7e5ec79ebb5bf3', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '88ca2b2d80ec9dfe06aa6d9ae4d65a9bf365e52e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ab9ad0c312d4155a5d8985d43c31f4ab11fc9110', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '294bea4d946392e63ec152f4a109e75fd9c5a743', 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: '6ab23578df59a6c29718087fda729a256f32e725', class: "sd-confirm-modal__content-box" }, hAsync("slot", { key: '48c21c001a4608d1b36c4a8feee99d7ee05422c7', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { key: 'fb227ba974fc9b176e90bfa906c212099c23c98b', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '665429ebae13b9c71e4eeaf372c45dbb98b71aa8', 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: '589d730c0952cd6370f96984f2d0e3c9a9fe50e6', class: "sd-confirm-modal__option" }, hAsync("slot", { key: '23a57ca4663436aabd4f606246c80d3c3aec1ecf', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (hAsync("span", { key: '6dead5dc544f4f1ed68a50d2619a6c10f438ea67', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), hAsync("div", { key: '7156c27678f8f9a6de5afdbeed191a954420f1fa', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: '02a6b6ffe4218e93ceef0dad349cd122587864df', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '6441fda6cebcc24fd48715ed85909b652725788f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8910
8945
  }
8911
8946
  static get style() { return sdConfirmModalCss(); }
8912
8947
  static get cmpMeta() { return {
@@ -9070,28 +9105,28 @@ var fieldTokens = {
9070
9105
  field: field
9071
9106
  };
9072
9107
 
9073
- const sm$3 = datepickerTokens.datepicker.sm;
9074
- const md$3 = datepickerTokens.datepicker.md;
9108
+ const sm$4 = datepickerTokens.datepicker.sm;
9109
+ const md$4 = datepickerTokens.datepicker.md;
9075
9110
  const DATEPICKER_SIZE_MAP = {
9076
9111
  sm: {
9077
- height: sm$3.height,
9078
- paddingX: sm$3.paddingX,
9079
- gap: sm$3.gap,
9080
- iconSize: sm$3.icon,
9081
- radius: sm$3.radius,
9082
- fontSize: sm$3.typography.fontSize,
9083
- lineHeight: sm$3.typography.lineHeight,
9084
- fontWeight: sm$3.typography.fontWeight,
9112
+ height: sm$4.height,
9113
+ paddingX: sm$4.paddingX,
9114
+ gap: sm$4.gap,
9115
+ iconSize: sm$4.icon,
9116
+ radius: sm$4.radius,
9117
+ fontSize: sm$4.typography.fontSize,
9118
+ lineHeight: sm$4.typography.lineHeight,
9119
+ fontWeight: sm$4.typography.fontWeight,
9085
9120
  },
9086
9121
  md: {
9087
- height: md$3.height,
9088
- paddingX: md$3.paddingX,
9089
- gap: md$3.gap,
9090
- iconSize: md$3.icon,
9091
- radius: md$3.radius,
9092
- fontSize: md$3.typography.fontSize,
9093
- lineHeight: md$3.typography.lineHeight,
9094
- fontWeight: md$3.typography.fontWeight,
9122
+ height: md$4.height,
9123
+ paddingX: md$4.paddingX,
9124
+ gap: md$4.gap,
9125
+ iconSize: md$4.icon,
9126
+ radius: md$4.radius,
9127
+ fontSize: md$4.typography.fontSize,
9128
+ lineHeight: md$4.typography.lineHeight,
9129
+ fontWeight: md$4.typography.fontWeight,
9095
9130
  },
9096
9131
  };
9097
9132
  const DATEPICKER_COLORS = {
@@ -9143,6 +9178,8 @@ class SdDatePicker {
9143
9178
  rules = [];
9144
9179
  /** 에러 상태 여부 */
9145
9180
  error = false;
9181
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
9182
+ status;
9146
9183
  /** 레이블 영역 아이콘 */
9147
9184
  icon = undefined;
9148
9185
  /** 레이블 툴팁 텍스트 */
@@ -9226,9 +9263,9 @@ class SdDatePicker {
9226
9263
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9227
9264
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9228
9265
  };
9229
- return (hAsync("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
9266
+ return (hAsync("sd-field", { key: 'c3adbcb65f372a7c33350a747b29b5a35990c292', 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, status: this.status, 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: 'aac9b498321c4506a6979a17de4896c4521887a1', class: "sd-date-picker", ref: el => {
9230
9267
  this.triggerRef = el;
9231
- } }, hAsync("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9268
+ } }, hAsync("sd-date-picker-trigger", { key: '00a558ac1c9a5af666c62c15e18e240036e1bb34', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '142098d59d8a5df4054e7a39f4d93b0ddc06109b', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: '319dc85ff9a41e8b04fdaecc1c7e9e01c953014b', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9232
9269
  }
9233
9270
  static get watchers() { return {
9234
9271
  "isOpen": [{
@@ -9254,6 +9291,7 @@ class SdDatePicker {
9254
9291
  "errorMessage": [1, "error-message"],
9255
9292
  "rules": [16],
9256
9293
  "error": [1028],
9294
+ "status": [1],
9257
9295
  "icon": [16],
9258
9296
  "labelTooltip": [1, "label-tooltip"],
9259
9297
  "labelTooltipProps": [16],
@@ -9316,7 +9354,7 @@ class SdDatePickerTrigger {
9316
9354
  ? DATEPICKER_COLORS.icon.disabled
9317
9355
  : DATEPICKER_COLORS.icon.default,
9318
9356
  };
9319
- return (hAsync("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9357
+ return (hAsync("div", { key: 'b52c18bc057886ed8d6b1f5d145225a4c31f0035', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9320
9358
  'sd-date-picker-trigger': true,
9321
9359
  'sd-date-picker-trigger--disabled': this.disabled,
9322
9360
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -9324,7 +9362,7 @@ class SdDatePickerTrigger {
9324
9362
  e.preventDefault();
9325
9363
  this.handleClick();
9326
9364
  }
9327
- } }, hAsync("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9365
+ } }, hAsync("sd-icon", { key: 'd653fa9a79c41b39e77a6a77afba2233a977ba29', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: 'e37f745bab9ea7ac1864ce0944ffd9d1d62eecd2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9328
9366
  }
9329
9367
  static get style() { return sdDatePickerTriggerCss(); }
9330
9368
  static get cmpMeta() { return {
@@ -9348,6 +9386,33 @@ const RANGE_LAYOUT = {
9348
9386
  panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
9349
9387
  divider: datepickerTokens.datepicker.calendar.range.divider,
9350
9388
  };
9389
+ const timeTokens = datepickerTokens.datepicker.calendar.time;
9390
+ /** 시간(시:분) 선택 푸터 레이아웃 토큰 */
9391
+ const TIME_LAYOUT = {
9392
+ bgDefault: timeTokens.bg.default,
9393
+ bgSelected: timeTokens.bg.selected,
9394
+ dateLabel: timeTokens.date.label,
9395
+ dateUnit: timeTokens.date.unit,
9396
+ dateGap: timeTokens.date.gap,
9397
+ radius: timeTokens.radius,
9398
+ paddingX: timeTokens.paddingX,
9399
+ paddingY: timeTokens.paddingY,
9400
+ gap: timeTokens.gap,
9401
+ sectionGap: timeTokens.section.gap,
9402
+ unitGap: timeTokens.unit.gap,
9403
+ fontSize: timeTokens.typography.fontSize,
9404
+ lineHeight: timeTokens.typography.lineHeight,
9405
+ fontWeight: timeTokens.typography.fontWeight,
9406
+ // 시:분 입력 박스는 datepicker 필드(sm) 토큰을 재사용한다
9407
+ input: {
9408
+ height: DATEPICKER_SIZE_MAP.sm.height,
9409
+ radius: DATEPICKER_SIZE_MAP.sm.radius,
9410
+ border: DATEPICKER_COLORS.border.default,
9411
+ borderFocus: DATEPICKER_COLORS.border.focus,
9412
+ text: DATEPICKER_COLORS.text.default,
9413
+ placeholder: DATEPICKER_COLORS.text.disabled,
9414
+ },
9415
+ };
9351
9416
 
9352
9417
  const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
9353
9418
 
@@ -9369,6 +9434,11 @@ class SdDateRangePicker {
9369
9434
  selectable;
9370
9435
  /** 최대 선택 가능한 날짜 범위 (일 단위) */
9371
9436
  maxRange;
9437
+ /**
9438
+ * 시간(시:분) 선택 푸터 사용 여부.
9439
+ * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
9440
+ */
9441
+ useTimePicker = false;
9372
9442
  /** 비활성 상태 여부 */
9373
9443
  disabled = false;
9374
9444
  /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -9390,6 +9460,8 @@ class SdDateRangePicker {
9390
9460
  rules = [];
9391
9461
  /** 에러 상태 여부 */
9392
9462
  error = false;
9463
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
9464
+ status;
9393
9465
  /** 레이블 영역 아이콘 */
9394
9466
  icon = undefined;
9395
9467
  /** 레이블 툴팁 텍스트 */
@@ -9449,7 +9521,9 @@ class SdDateRangePicker {
9449
9521
  }
9450
9522
  };
9451
9523
  handleSelect = (e) => {
9452
- this.closeDropdown();
9524
+ // 시간 선택 모드에서는 사용자가 시:분을 조정할 수 있도록 드롭다운을 닫지 않고 실시간 반영만 한다
9525
+ if (!this.useTimePicker)
9526
+ this.closeDropdown();
9453
9527
  this.value = e.detail;
9454
9528
  const nextValue = this.value;
9455
9529
  requestAnimationFrame(() => {
@@ -9464,6 +9538,14 @@ class SdDateRangePicker {
9464
9538
  return '';
9465
9539
  return `${this.value[0]} ~ ${this.value[1]}`;
9466
9540
  }
9541
+ static DEFAULT_PLACEHOLDER = 'YYYY-MM-DD ~ YYYY-MM-DD';
9542
+ get resolvedPlaceholder() {
9543
+ // placeholder를 따로 지정하지 않았고 시간 선택 모드이면 시:분을 포함한 기본 placeholder를 쓴다
9544
+ if (this.useTimePicker && this.placeholder === SdDateRangePicker.DEFAULT_PLACEHOLDER) {
9545
+ return 'YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm';
9546
+ }
9547
+ return this.placeholder;
9548
+ }
9467
9549
  disconnectedCallback() {
9468
9550
  if (this.closeAnimationTimer)
9469
9551
  clearTimeout(this.closeAnimationTimer);
@@ -9477,9 +9559,9 @@ class SdDateRangePicker {
9477
9559
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9478
9560
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9479
9561
  };
9480
- return (hAsync("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
9562
+ return (hAsync("sd-field", { key: '01098a74a5066d2328409dcdf21bb38691adf455', 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, status: this.status, 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: 'dab4a666f5c144bbcbf3848528ce246c752ab906', class: "sd-date-range-picker", ref: el => {
9481
9563
  this.triggerRef = el;
9482
- } }, hAsync("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9564
+ } }, hAsync("sd-date-picker-trigger", { key: '5aa378df1b53a2b8cc29e159e7bda0544210a81e', displayText: this.displayText, placeholder: this.resolvedPlaceholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '8d18658004dc009d869804bdabd31155117edde3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-date-range-picker-calendar", { key: '0bf96efeed4c567052e690a83a70f27df85ccc64', value: this.value, selectable: this.selectable, maxRange: this.maxRange, useTimePicker: this.useTimePicker, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9483
9565
  }
9484
9566
  static get watchers() { return {
9485
9567
  "isOpen": [{
@@ -9496,6 +9578,7 @@ class SdDateRangePicker {
9496
9578
  "placeholder": [513],
9497
9579
  "selectable": [16],
9498
9580
  "maxRange": [2, "max-range"],
9581
+ "useTimePicker": [4, "use-time-picker"],
9499
9582
  "disabled": [516],
9500
9583
  "width": [8],
9501
9584
  "label": [1],
@@ -9506,6 +9589,7 @@ class SdDateRangePicker {
9506
9589
  "errorMessage": [1, "error-message"],
9507
9590
  "rules": [16],
9508
9591
  "error": [1028],
9592
+ "status": [1],
9509
9593
  "icon": [16],
9510
9594
  "labelTooltip": [1, "label-tooltip"],
9511
9595
  "labelTooltipProps": [16],
@@ -9524,7 +9608,7 @@ class SdDateRangePicker {
9524
9608
  }; }
9525
9609
  }
9526
9610
 
9527
- const sdDateRangePickerCalendarCss = () => `sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}`;
9611
+ const sdDateRangePickerCalendarCss = () => `sd-date-range-picker-calendar{display:block}sd-date-range-picker-calendar .sd-date-range-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:364px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar--with-time{height:auto}sd-date-range-picker-calendar .sd-date-range-picker-calendar__top-bar{position:relative;display:flex;align-items:center;justify-content:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__year-nav{display:flex;align-items:center;justify-content:center;gap:var(--calendar-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button{position:absolute;right:0;background:transparent;cursor:pointer;font-size:var(--calendar-week-font-size);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text);min-width:37px;height:24px;line-height:24px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__today-button:hover{text-decoration:underline}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panels{display:flex;flex-direction:row;gap:var(--range-panel-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__divider{flex-shrink:0;width:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__panel{display:flex;flex-direction:column;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__header{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-group-month{display:flex;width:100%;align-items:center;gap:var(--calendar-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-range-picker-calendar .sd-date-range-picker-calendar__label-month{flex:1}sd-date-range-picker-calendar .sd-date-range-picker-calendar__nav-placeholder{visibility:hidden;pointer-events:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-range-picker-calendar .sd-date-range-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:var(--range-height);padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day-circle{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--today .sd-date-range-picker-calendar__day-circle{font-weight:700}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--in-range{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-start{background:linear-gradient(to right, transparent 50%, var(--range-bg) 50%)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:var(--range-bg)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-startsd-date-range-picker-calendar .sd-date-range-picker-calendar__day--range-end{background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected .sd-date-range-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--selected:not(:disabled):hover .sd-date-range-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--disabled:not(.sd-date-range-picker-calendar__day--in-range):not(.sd-date-range-picker-calendar__day--range-start):not(.sd-date-range-picker-calendar__day--range-end){background:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__day--empty{visibility:hidden;pointer-events:none;background:transparent}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-divider{width:100%;height:1px;background:var(--range-divider)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time{display:flex;flex-direction:row;gap:var(--time-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--time-section-gap);padding:var(--time-padding-y) var(--time-padding-x);border-radius:var(--time-radius);background:var(--time-bg-default);font-size:var(--time-font-size);line-height:var(--time-line-height);font-weight:var(--time-font-weight)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-section--active{background:var(--time-bg-selected)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-date{display:inline-flex;align-items:center;gap:var(--time-date-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-num{color:var(--time-date-label)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-unit{color:var(--time-date-unit)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input-group{display:inline-flex;align-items:center;gap:var(--time-unit-gap)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input{width:40px;height:var(--time-input-height);padding:0;border:1px solid var(--time-input-border);border-radius:var(--time-input-radius);background:var(--calendar-bg);text-align:center;font-size:var(--time-font-size);line-height:var(--time-line-height);font-weight:var(--time-font-weight);color:var(--time-input-text);box-sizing:border-box;outline:none}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input::placeholder{color:var(--time-input-placeholder)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:focus{border-color:var(--time-input-border-focus)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-input:disabled{cursor:not-allowed}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-colon{color:var(--time-date-label)}sd-date-range-picker-calendar .sd-date-range-picker-calendar__time-suffix{color:var(--time-date-unit)}`;
9528
9612
 
9529
9613
  class SdDateRangePickerCalendar {
9530
9614
  constructor(hostRef) {
@@ -9538,11 +9622,20 @@ class SdDateRangePickerCalendar {
9538
9622
  selectable;
9539
9623
  /** 최대 선택 가능 일 수 */
9540
9624
  maxRange;
9625
+ /** 시간(시:분) 선택 푸터 사용 여부 */
9626
+ useTimePicker = false;
9541
9627
  currentYear;
9542
9628
  currentMonth;
9543
9629
  pendingStart = '';
9544
9630
  hoverDate = '';
9545
9631
  displayValue = null;
9632
+ // 시:분은 2자리 미만도 허용하기 위해 문자열로 관리하고 emit/blur 시 패딩한다
9633
+ startHour = '00';
9634
+ startMinute = '00';
9635
+ endHour = '00';
9636
+ endMinute = '00';
9637
+ /** 직접 emit한 값이 value prop으로 되돌아오는 에코를 구분해 시간 입력 clobber를 막는다 */
9638
+ lastEmitted = '';
9546
9639
  /** 날짜 범위 선택 시 발생합니다. */
9547
9640
  select;
9548
9641
  /** 달력 뷰가 변경될 때 발생합니다. */
@@ -9555,13 +9648,31 @@ class SdDateRangePickerCalendar {
9555
9648
  this.syncFromValue();
9556
9649
  }
9557
9650
  syncFromValue() {
9558
- const base = this.value?.[0] || today;
9651
+ // 자신이 emit한 값이 그대로 돌아온 경우(에코)에는 시간 입력 상태를 건드리지 않는다
9652
+ if (this.useTimePicker && JSON.stringify(this.value) === this.lastEmitted)
9653
+ return;
9654
+ const start = this.splitDateTime(this.value?.[0]);
9655
+ const end = this.splitDateTime(this.value?.[1]);
9656
+ const base = start.date || today;
9559
9657
  const [year, month] = base.split('-').map(Number);
9560
9658
  this.currentYear = year;
9561
9659
  this.currentMonth = month;
9562
9660
  this.pendingStart = '';
9563
9661
  this.hoverDate = '';
9564
- this.displayValue = this.value ? [this.value[0], this.value[1]] : null;
9662
+ // displayValue는 날짜 부분만 보관 — 캘린더 그리드 로직은 시간과 무관하게 동작한다
9663
+ this.displayValue = this.value ? [start.date, end.date] : null;
9664
+ this.startHour = start.hour;
9665
+ this.startMinute = start.minute;
9666
+ this.endHour = end.hour;
9667
+ this.endMinute = end.minute;
9668
+ }
9669
+ /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DD"를 날짜/시/분으로 분리한다 */
9670
+ splitDateTime(v) {
9671
+ if (v == null || v === '')
9672
+ return { date: '', hour: '00', minute: '00' };
9673
+ const [date = '', time = ''] = v.split(' ');
9674
+ const [hour = '00', minute = '00'] = time.split(':');
9675
+ return { date, hour, minute };
9565
9676
  }
9566
9677
  get rightYear() {
9567
9678
  return this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear;
@@ -9668,13 +9779,69 @@ class SdDateRangePickerCalendar {
9668
9779
  this.pendingStart = cell.date;
9669
9780
  this.displayValue = null;
9670
9781
  this.hoverDate = '';
9782
+ // 새 범위 선택을 시작하면 시작=00:00, 종료=23:59(하루 전체)로 초기화한다
9783
+ if (this.useTimePicker) {
9784
+ this.startHour = '00';
9785
+ this.startMinute = '00';
9786
+ this.endHour = '23';
9787
+ this.endMinute = '59';
9788
+ }
9671
9789
  return;
9672
9790
  }
9673
9791
  const newRange = [this.pendingStart, cell.date];
9674
9792
  this.pendingStart = '';
9675
9793
  this.hoverDate = '';
9676
9794
  this.displayValue = newRange;
9677
- this.select.emit(newRange);
9795
+ this.emitRange(newRange[0], newRange[1]);
9796
+ }
9797
+ /** 날짜 범위(+ useTimePicker면 시:분)를 결합해 sdSelect로 emit한다 */
9798
+ emitRange(startDate, endDate) {
9799
+ const range = this.useTimePicker
9800
+ ? [
9801
+ `${startDate} ${this.pad(this.startHour)}:${this.pad(this.startMinute)}`,
9802
+ `${endDate} ${this.pad(this.endHour)}:${this.pad(this.endMinute)}`,
9803
+ ]
9804
+ : [startDate, endDate];
9805
+ this.lastEmitted = JSON.stringify(range);
9806
+ this.select.emit(range);
9807
+ }
9808
+ pad(v) {
9809
+ return String(Number(v) || 0).padStart(2, '0');
9810
+ }
9811
+ /** 시:분 입력 — 숫자만/2자리로 제한하고 범위(시 0~23, 분 0~59)로 클램프한다 */
9812
+ handleTimeInput(which, part, event) {
9813
+ const input = event.target;
9814
+ const digits = input.value.replace(/\D/g, '').slice(0, 2);
9815
+ const max = part === 'h' ? 23 : 59;
9816
+ const next = digits !== '' && Number(digits) > max ? String(max) : digits;
9817
+ input.value = next;
9818
+ this.setTimePart(which, part, next);
9819
+ // 범위가 확정된 상태면 실시간으로 재emit한다
9820
+ if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
9821
+ this.emitRange(this.displayValue[0], this.displayValue[1]);
9822
+ }
9823
+ }
9824
+ handleTimeBlur(which, part) {
9825
+ this.setTimePart(which, part, this.pad(this.getTimePart(which, part)));
9826
+ }
9827
+ getTimePart(which, part) {
9828
+ if (which === 'start')
9829
+ return part === 'h' ? this.startHour : this.startMinute;
9830
+ return part === 'h' ? this.endHour : this.endMinute;
9831
+ }
9832
+ setTimePart(which, part, value) {
9833
+ if (which === 'start') {
9834
+ if (part === 'h')
9835
+ this.startHour = value;
9836
+ else
9837
+ this.startMinute = value;
9838
+ }
9839
+ else {
9840
+ if (part === 'h')
9841
+ this.endHour = value;
9842
+ else
9843
+ this.endMinute = value;
9844
+ }
9678
9845
  }
9679
9846
  handleDayHover(cell) {
9680
9847
  if (!cell.inCurrentMonth)
@@ -9740,6 +9907,22 @@ class SdDateRangePickerCalendar {
9740
9907
  }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => this.handleDayClick(cell), onMouseEnter: () => this.handleDayHover(cell) }, hAsync("span", { class: "sd-date-range-picker-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : '')));
9741
9908
  }))));
9742
9909
  }
9910
+ renderTimeSection(which, date, suffix) {
9911
+ const active = date !== '';
9912
+ const [year = '', month = '', day = ''] = active ? date.split('-') : [];
9913
+ const hour = which === 'start' ? this.startHour : this.endHour;
9914
+ const minute = which === 'start' ? this.startMinute : this.endMinute;
9915
+ const renderNum = (n, strip) => (hAsync("span", { class: "sd-date-range-picker-calendar__time-num" }, active && n !== '' ? (strip ? String(Number(n)) : n) : '-'));
9916
+ return (hAsync("div", { class: {
9917
+ 'sd-date-range-picker-calendar__time-section': true,
9918
+ 'sd-date-range-picker-calendar__time-section--active': active,
9919
+ } }, hAsync("div", { class: "sd-date-range-picker-calendar__time-date" }, renderNum(year, false), hAsync("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uB144"), renderNum(month, true), hAsync("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uC6D4"), renderNum(day, true), hAsync("span", { class: "sd-date-range-picker-calendar__time-unit" }, "\uC77C")), hAsync("div", { class: "sd-date-range-picker-calendar__time-input-group" }, hAsync("input", { type: "text", inputMode: "numeric", maxLength: 2, class: "sd-date-range-picker-calendar__time-input", placeholder: "--", "aria-label": `${suffix} 시`, disabled: !active, value: active ? hour : '', onInput: e => this.handleTimeInput(which, 'h', e), onBlur: () => this.handleTimeBlur(which, 'h') }), hAsync("span", { class: "sd-date-range-picker-calendar__time-colon" }, ":"), hAsync("input", { type: "text", inputMode: "numeric", maxLength: 2, class: "sd-date-range-picker-calendar__time-input", placeholder: "--", "aria-label": `${suffix} 분`, disabled: !active, value: active ? minute : '', onInput: e => this.handleTimeInput(which, 'm', e), onBlur: () => this.handleTimeBlur(which, 'm') })), hAsync("span", { class: "sd-date-range-picker-calendar__time-suffix" }, suffix)));
9920
+ }
9921
+ renderTimeFooter() {
9922
+ const startDate = this.pendingStart || this.displayValue?.[0] || '';
9923
+ const endDate = this.displayValue?.[1] || '';
9924
+ return (hAsync(Fragment, null, hAsync("span", { class: "sd-date-range-picker-calendar__time-divider", "aria-hidden": "true" }), hAsync("div", { class: "sd-date-range-picker-calendar__time" }, this.renderTimeSection('start', startDate, '부터'), this.renderTimeSection('end', endDate, '까지'))));
9925
+ }
9743
9926
  render() {
9744
9927
  const cssVars = {
9745
9928
  '--calendar-bg': CALENDAR_LAYOUT.bg,
@@ -9772,8 +9955,31 @@ class SdDateRangePickerCalendar {
9772
9955
  '--range-height': `${RANGE_LAYOUT.height}px`,
9773
9956
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
9774
9957
  '--range-divider': RANGE_LAYOUT.divider,
9958
+ '--time-bg-default': TIME_LAYOUT.bgDefault,
9959
+ '--time-bg-selected': TIME_LAYOUT.bgSelected,
9960
+ '--time-date-label': TIME_LAYOUT.dateLabel,
9961
+ '--time-date-unit': TIME_LAYOUT.dateUnit,
9962
+ '--time-date-gap': `${TIME_LAYOUT.dateGap}px`,
9963
+ '--time-radius': `${TIME_LAYOUT.radius}px`,
9964
+ '--time-padding-x': `${TIME_LAYOUT.paddingX}px`,
9965
+ '--time-padding-y': `${TIME_LAYOUT.paddingY}px`,
9966
+ '--time-gap': `${TIME_LAYOUT.gap}px`,
9967
+ '--time-section-gap': `${TIME_LAYOUT.sectionGap}px`,
9968
+ '--time-unit-gap': `${TIME_LAYOUT.unitGap}px`,
9969
+ '--time-font-size': `${TIME_LAYOUT.fontSize}px`,
9970
+ '--time-line-height': `${TIME_LAYOUT.lineHeight}px`,
9971
+ '--time-font-weight': TIME_LAYOUT.fontWeight,
9972
+ '--time-input-height': `${TIME_LAYOUT.input.height}px`,
9973
+ '--time-input-radius': `${TIME_LAYOUT.input.radius}px`,
9974
+ '--time-input-border': TIME_LAYOUT.input.border,
9975
+ '--time-input-border-focus': TIME_LAYOUT.input.borderFocus,
9976
+ '--time-input-text': TIME_LAYOUT.input.text,
9977
+ '--time-input-placeholder': TIME_LAYOUT.input.placeholder,
9775
9978
  };
9776
- return (hAsync(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, hAsync("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9979
+ return (hAsync(Fragment, { key: '7d368d23f2c9d2b28c847a7fee5de474edc350f0' }, hAsync("div", { key: '6d97bfa728eb65c46d21f53c3b046b1a0c7d2ff6', class: {
9980
+ 'sd-date-range-picker-calendar': true,
9981
+ 'sd-date-range-picker-calendar--with-time': this.useTimePicker,
9982
+ }, style: cssVars }, this.renderYearNav(), hAsync("div", { key: '45b4a2488f6e73814d3a6be9710d7c14fd2e8130', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: 'f1d741f8684ca213d30f559e7f6fc5a4388bbac1', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)), this.useTimePicker && this.renderTimeFooter())));
9777
9983
  }
9778
9984
  static get watchers() { return {
9779
9985
  "value": [{
@@ -9788,11 +9994,16 @@ class SdDateRangePickerCalendar {
9788
9994
  "value": [16],
9789
9995
  "selectable": [16],
9790
9996
  "maxRange": [2, "max-range"],
9997
+ "useTimePicker": [4, "use-time-picker"],
9791
9998
  "currentYear": [32],
9792
9999
  "currentMonth": [32],
9793
10000
  "pendingStart": [32],
9794
10001
  "hoverDate": [32],
9795
- "displayValue": [32]
10002
+ "displayValue": [32],
10003
+ "startHour": [32],
10004
+ "startMinute": [32],
10005
+ "endHour": [32],
10006
+ "endMinute": [32]
9796
10007
  },
9797
10008
  "$listeners$": undefined,
9798
10009
  "$lazyBundleId$": "-",
@@ -9816,7 +10027,7 @@ class SdDivider {
9816
10027
  const hostStyle = {
9817
10028
  '--sd-divider-color': DIVIDER_COLORS.default,
9818
10029
  };
9819
- return (hAsync(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, hAsync("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
10030
+ return (hAsync(Host, { key: '5e25f94dbe34f19280f6952e0a1bfbf4e4816264', style: hostStyle }, hAsync("hr", { key: 'a47f51ba0dfc15819cd5cda169554433b978eb15', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9820
10031
  }
9821
10032
  static get style() { return sdDividerCss(); }
9822
10033
  static get cmpMeta() { return {
@@ -10261,28 +10472,28 @@ const FIELD_ADDON_ALIGN_MAP = {
10261
10472
  center: 'center',
10262
10473
  end: 'flex-end',
10263
10474
  };
10264
- const sm$2 = fieldTokens.field.label.sm;
10265
- const md$2 = fieldTokens.field.label.md;
10475
+ const sm$3 = fieldTokens.field.label.sm;
10476
+ const md$3 = fieldTokens.field.label.md;
10266
10477
  const FIELD_LABEL_SIZE_MAP = {
10267
10478
  sm: {
10268
- height: sm$2.height,
10269
- gap: sm$2.gap,
10270
- icon: sm$2.icon,
10271
- fontSize: sm$2.typography.fontSize,
10272
- lineHeight: sm$2.typography.lineHeight,
10273
- fontWeight: sm$2.typography.fontWeight,
10479
+ height: sm$3.height,
10480
+ gap: sm$3.gap,
10481
+ icon: sm$3.icon,
10482
+ fontSize: sm$3.typography.fontSize,
10483
+ lineHeight: sm$3.typography.lineHeight,
10484
+ fontWeight: sm$3.typography.fontWeight,
10274
10485
  },
10275
10486
  md: {
10276
- height: md$2.height,
10277
- gap: md$2.gap,
10278
- icon: md$2.icon,
10279
- fontSize: md$2.typography.fontSize,
10280
- lineHeight: md$2.typography.lineHeight,
10281
- fontWeight: md$2.typography.fontWeight,
10487
+ height: md$3.height,
10488
+ gap: md$3.gap,
10489
+ icon: md$3.icon,
10490
+ fontSize: md$3.typography.fontSize,
10491
+ lineHeight: md$3.typography.lineHeight,
10492
+ fontWeight: md$3.typography.fontWeight,
10282
10493
  },
10283
10494
  };
10284
10495
 
10285
- const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover),sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover,sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border-color:transparent !important;background:transparent !important;box-shadow:none !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
10496
+ const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field--multiline .sd-field__wrapper .sd-field__control{height:auto;min-height:var(--sd-field-wrapper-height)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--borderless .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless.sd-field--error .sd-field__wrapper .sd-field__control:not(:hover),sd-field .sd-field.sd-field--borderless.sd-field--pass .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--borderless:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover,sd-field .sd-field.sd-field--borderless.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border-color:transparent !important;background:transparent !important;box-shadow:none !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
10286
10497
 
10287
10498
  const FORM_PARENT_TAGS = [
10288
10499
  'sd-input',
@@ -10293,6 +10504,8 @@ const FORM_PARENT_TAGS = [
10293
10504
  'sd-file-picker',
10294
10505
  'sd-date-picker',
10295
10506
  'sd-date-range-picker',
10507
+ 'sd-time-picker',
10508
+ 'sd-time-range-picker',
10296
10509
  'sd-chip-input',
10297
10510
  ];
10298
10511
  class SdField {
@@ -10334,6 +10547,13 @@ class SdField {
10334
10547
  label = '';
10335
10548
  /** 레이블 너비 */
10336
10549
  labelWidth = '';
10550
+ /**
10551
+ * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
10552
+ * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
10553
+ */
10554
+ labelHeight;
10555
+ /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
10556
+ multiline = false;
10337
10557
  /** 필드 우측 어드온 레이블 */
10338
10558
  addonLabel = '';
10339
10559
  /** 어드온 정렬 방향 */
@@ -10464,7 +10684,11 @@ class SdField {
10464
10684
  };
10465
10685
  const labelCssVars = this.label !== ''
10466
10686
  ? {
10467
- '--sd-field-label-height': `${labelTokens.height}px`,
10687
+ '--sd-field-label-height': this.labelHeight !== undefined && this.labelHeight !== '' && this.labelHeight !== 0
10688
+ ? typeof this.labelHeight === 'number'
10689
+ ? `${this.labelHeight}px`
10690
+ : this.labelHeight
10691
+ : `${labelTokens.height}px`,
10468
10692
  '--sd-field-label-gap': `${labelTokens.gap}px`,
10469
10693
  '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
10470
10694
  '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
@@ -10496,19 +10720,20 @@ class SdField {
10496
10720
  : {}),
10497
10721
  }
10498
10722
  : {};
10499
- return (hAsync("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
10723
+ return (hAsync("div", { key: 'd29e49fe9ecf467f0c1ed443524fac2648dc9da4', class: {
10500
10724
  'sd-field': true,
10501
10725
  'sd-field--has-label': this.label !== '',
10502
10726
  'sd-field--has-addon': addon !== '',
10727
+ 'sd-field--multiline': this.multiline,
10503
10728
  'sd-field--borderless': this.borderless,
10504
10729
  [this.fieldStatus]: this.fieldStatus !== '',
10505
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, hAsync("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
10730
+ }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '396173067f4a8ce38ea8ea9f5a6b9d76303b16fa', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '3e4aab5e10cf52f116aabfe1a8d36a806eb03af4', class: "sd-field__main" }, hAsync("div", { key: 'edbe4443387935e2b51469339284024429f1f0d3', class: {
10506
10731
  'sd-field__control': true,
10507
10732
  'sd-field__control--has-addon': addon !== '',
10508
10733
  }, style: this.width !== '' && this.width !== 0
10509
10734
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
10510
- : {} }, addon && (hAsync("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
10511
- Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
10735
+ : {} }, addon && (hAsync("div", { key: '7ac28abf5f37b7ada42b16f81227afb5c7f8d656', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'd995424c6f620b090006cdbcf8645d2ff822e802', name: this.icon.name, size: this.icon.size ??
10736
+ 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: 'd105a65b5c926b5db9dd1d68239c0a2015739aba' })), 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
10737
  }
10513
10738
  renderLabel(label) {
10514
10739
  if (label == null || label === '')
@@ -10536,6 +10761,8 @@ class SdField {
10536
10761
  "borderless": [4],
10537
10762
  "label": [1],
10538
10763
  "labelWidth": [8, "label-width"],
10764
+ "labelHeight": [8, "label-height"],
10765
+ "multiline": [4],
10539
10766
  "addonLabel": [1, "addon-label"],
10540
10767
  "addonAlign": [1, "addon-align"],
10541
10768
  "icon": [16],
@@ -10559,12 +10786,39 @@ const filepicker = {
10559
10786
  paddingX: "12",
10560
10787
  gap: "8",
10561
10788
  radius: "4",
10789
+ borderWidth: "1",
10562
10790
  typography: {
10791
+ 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",
10563
10792
  fontWeight: "400",
10564
10793
  fontSize: "12",
10565
- lineHeight: "20"},
10794
+ lineHeight: "20",
10795
+ textDecoration: "none"
10796
+ },
10566
10797
  icon: "16"
10567
10798
  },
10799
+ md: {
10800
+ height: "36",
10801
+ paddingX: "16",
10802
+ gap: "12",
10803
+ radius: "6",
10804
+ borderWidth: "1",
10805
+ typography: {
10806
+ 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",
10807
+ fontWeight: "400",
10808
+ fontSize: "14",
10809
+ textDecoration: "none",
10810
+ lineHeight: "24"
10811
+ },
10812
+ icon: "20"
10813
+ },
10814
+ border: {
10815
+ "default": "#AAAAAA",
10816
+ disabled: "#CCCCCC"
10817
+ },
10818
+ bg: {
10819
+ "default": "#FFFFFF",
10820
+ disabled: "#E1E1E1"
10821
+ },
10568
10822
  text: {
10569
10823
  "default": "#222222",
10570
10824
  placeholder: "#AAAAAA",
@@ -10579,15 +10833,25 @@ var filePickerTokens = {
10579
10833
  };
10580
10834
 
10581
10835
  const fp = filePickerTokens.filepicker;
10582
- const FILE_PICKER_LAYOUT = {
10583
- height: fp.sm.height,
10584
- paddingX: fp.sm.paddingX,
10585
- gap: fp.sm.gap,
10586
- radius: fp.sm.radius,
10587
- fontSize: fp.sm.typography.fontSize,
10588
- lineHeight: fp.sm.typography.lineHeight,
10589
- fontWeight: fp.sm.typography.fontWeight,
10590
- iconSize: fp.sm.icon};
10836
+ const buildLayout = (s) => ({
10837
+ height: fp[s].height,
10838
+ paddingX: fp[s].paddingX,
10839
+ gap: fp[s].gap,
10840
+ radius: fp[s].radius,
10841
+ borderWidth: fp[s].borderWidth,
10842
+ fontSize: fp[s].typography.fontSize,
10843
+ lineHeight: fp[s].typography.lineHeight,
10844
+ fontWeight: fp[s].typography.fontWeight,
10845
+ iconSize: fp[s].icon,
10846
+ contentsGap: fieldTokens.field.contents.gap,
10847
+ });
10848
+ /** 기본(sm) 레이아웃 — 하위호환용 단일 export */
10849
+ const FILE_PICKER_LAYOUT = buildLayout('sm');
10850
+ /** size별 레이아웃 맵 */
10851
+ const FILE_PICKER_LAYOUTS = {
10852
+ sm: FILE_PICKER_LAYOUT,
10853
+ md: buildLayout('md'),
10854
+ };
10591
10855
  const FILE_PICKER_COLORS = {
10592
10856
  text: fp.text,
10593
10857
  icon: {
@@ -10634,6 +10898,8 @@ class SdFilePicker {
10634
10898
  /** 최대 파일 개수 */
10635
10899
  maxFiles;
10636
10900
  // sd-field 패스스루 props
10901
+ /** 필드 크기 */
10902
+ size = 'sm';
10637
10903
  /** 폼 연동용 name 속성 */
10638
10904
  name = nanoid();
10639
10905
  /** 레이블 텍스트 */
@@ -10836,7 +11102,7 @@ class SdFilePicker {
10836
11102
  renderChipList() {
10837
11103
  if (!this.hasChips())
10838
11104
  return null;
10839
- return (hAsync("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (hAsync("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
11105
+ return (hAsync("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (hAsync("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) })))));
10840
11106
  }
10841
11107
  renderListbox() {
10842
11108
  if (!this.hasChips() || !this.isListboxOpen)
@@ -10862,38 +11128,39 @@ class SdFilePicker {
10862
11128
  render() {
10863
11129
  const hasFiles = this.hasFiles();
10864
11130
  const displayText = this.getDisplayText();
11131
+ const layout = FILE_PICKER_LAYOUTS[this.size] ?? FILE_PICKER_LAYOUT;
10865
11132
  const cssVars = {
10866
- '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
10867
- '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
10868
- '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
10869
- '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
10870
- '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
11133
+ '--sd-file-picker-font-size': `${layout.fontSize}px`,
11134
+ '--sd-file-picker-line-height': `${layout.lineHeight}px`,
11135
+ '--sd-file-picker-font-weight': layout.fontWeight,
11136
+ '--sd-file-picker-padding-x': `${layout.paddingX}px`,
11137
+ '--sd-file-picker-gap': `${layout.gap}px`,
10871
11138
  '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
10872
11139
  '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
10873
11140
  '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
10874
- // sd-field 시스템 변수 override
10875
- '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
10876
- '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
11141
+ // sd-field 시스템 변수 override (size에 맞춰)
11142
+ [`--sd-system-size-field-${this.size}-height`]: `${layout.height}px`,
11143
+ [`--sd-system-radius-field-${this.size}`]: `${layout.radius}px`,
10877
11144
  };
10878
11145
  const showListbox = this.multiple && this.useMultipleListBox;
10879
- const content = (hAsync("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
11146
+ const content = (hAsync("div", { key: 'd1c3af9860038ddb11d540af8312ad59d051524f', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
10880
11147
  if (e.key === 'Enter' || e.key === ' ') {
10881
11148
  e.preventDefault();
10882
11149
  this.handleClick();
10883
11150
  }
10884
- } }, hAsync("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
11151
+ } }, hAsync("input", { key: '760c38cd73d0a2a3d0832c5597c0e22bf737bb06', 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: '96ff0bf43eb3f17df92bd8834cd38a1ae36ad475', name: "attachFile", size: Number(layout.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '0757b8b734e21fcf7bed04d7306ee3a9d202f950', ref: el => (this.fileNamesRef = el), class: {
10885
11152
  'sd-file-picker__text': true,
10886
11153
  'sd-file-picker__text--placeholder': !hasFiles,
10887
11154
  'sd-file-picker__text--active': hasFiles,
10888
- } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
11155
+ } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: '8e42d38452d00256147ee65e614bdeb7040917d7', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10889
11156
  'sd-file-picker__caret': true,
10890
11157
  'sd-file-picker__caret--open': this.isListboxOpen,
10891
- }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
10892
- return (hAsync("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
11158
+ }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '6f65042ce5e4efa1b6ab126653d434ca77cdd790', 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: 'b41146f39c384a5954dca22f2d3da767a63ef0c0', class: "sd-file-picker__tooltip" }, displayText))));
11159
+ return (hAsync("div", { key: '858fea100a9317ac6806ae40699e9f5608394e10', class: {
10893
11160
  'sd-file-picker__wrapper': true,
10894
11161
  'sd-file-picker--inline': this.inline,
10895
11162
  'sd-file-picker--inline-disabled': this.inline && this.disabled,
10896
- }, style: cssVars }, hAsync("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
11163
+ }, style: cssVars }, hAsync("sd-field", { key: '1b7a6a57e4e46c253bd9f77c500dabf92edc2ae0', borderless: this.inline, size: this.size, 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()));
10897
11164
  }
10898
11165
  static get watchers() { return {
10899
11166
  "value": [{
@@ -10915,6 +11182,7 @@ class SdFilePicker {
10915
11182
  "maxFileSize": [8, "max-file-size"],
10916
11183
  "maxTotalSize": [8, "max-total-size"],
10917
11184
  "maxFiles": [8, "max-files"],
11185
+ "size": [513],
10918
11186
  "name": [1],
10919
11187
  "label": [1],
10920
11188
  "labelWidth": [8, "label-width"],
@@ -10941,7 +11209,7 @@ class SdFilePicker {
10941
11209
  },
10942
11210
  "$listeners$": undefined,
10943
11211
  "$lazyBundleId$": "-",
10944
- "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"], ["useMultipleListBox", "use-multiple-list-box"]]
11212
+ "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"], ["useMultipleListBox", "use-multiple-list-box"], ["size", "size"]]
10945
11213
  }; }
10946
11214
  }
10947
11215
 
@@ -11125,7 +11393,7 @@ class SdFloatingPopover {
11125
11393
  }
11126
11394
  }
11127
11395
  render() {
11128
- return hAsync("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
11396
+ return hAsync("slot", { key: 'f45790ba4fc45aef991a54b409acc2791342fcdf' });
11129
11397
  }
11130
11398
  static get style() { return sdFloatingPortalCss(); }
11131
11399
  static get cmpMeta() { return {
@@ -11374,6 +11642,11 @@ class SdGhostButton {
11374
11642
  intent = 'default';
11375
11643
  /** 스크린리더용 접근성 레이블 */
11376
11644
  ariaLabel = '';
11645
+ /**
11646
+ * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
11647
+ * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
11648
+ */
11649
+ pressed;
11377
11650
  /** 호버 시 표시할 툴팁 텍스트 */
11378
11651
  tooltipText;
11379
11652
  /** 비활성 상태 여부 */
@@ -11431,16 +11704,16 @@ class SdGhostButton {
11431
11704
  const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
11432
11705
  const tooltipText = (this.tooltipText ?? '').trim();
11433
11706
  const hasTooltip = tooltipText.length > 0;
11434
- return (hAsync("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
11707
+ return (hAsync("button", { key: '921a2e6e54aa3cbb0e6c14ad117d6ddcfc753618', class: {
11435
11708
  'sd-ghost-button': true,
11436
11709
  'sd-ghost-button--disabled': this.disabled,
11437
- }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
11710
+ }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, "aria-pressed": this.pressed, style: {
11438
11711
  '--sd-ghost-button-size': `${sizeConfig.size}px`,
11439
11712
  '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
11440
11713
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
11441
11714
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
11442
11715
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
11443
- }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, hAsync("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), hAsync("sd-icon", { key: '4caac22d0d888c1998032697043e3a3761e012aa', name: this.icon, size: sizeConfig.icon, color: contentColor })));
11716
+ }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '90817207f1b8b5c1d55ce510dfb5ea90cf614bfd', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, hAsync("div", { key: '75379a80a230eb197d56df9eb3a79f4536c425d5', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: 'b7cc000adb2aaa3e9f65635d7e9cab7fceff62c3', name: "square_xs_grey", label: tooltipText })))), hAsync("sd-icon", { key: '0df3fd325eb7e82b3da6427e22c05819f35d307e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
11444
11717
  }
11445
11718
  static get style() { return sdGhostButtonCss(); }
11446
11719
  static get cmpMeta() { return {
@@ -11451,6 +11724,7 @@ class SdGhostButton {
11451
11724
  "size": [1],
11452
11725
  "intent": [1],
11453
11726
  "ariaLabel": [1, "aria-label"],
11727
+ "pressed": [4, "aria-pressed"],
11454
11728
  "tooltipText": [1, "tooltip-text"],
11455
11729
  "disabled": [4],
11456
11730
  "isTooltipOpen": [32]
@@ -12005,26 +12279,26 @@ class SdIcon {
12005
12279
  }; }
12006
12280
  }
12007
12281
 
12008
- const sm$1 = inputTokens.textinput.sm;
12009
- const md$1 = inputTokens.textinput.md;
12282
+ const sm$2 = inputTokens.textinput.sm;
12283
+ const md$2 = inputTokens.textinput.md;
12010
12284
  const INPUT_SIZE_MAP = {
12011
12285
  sm: {
12012
- height: sm$1.height,
12013
- paddingX: sm$1.paddingX,
12014
- gap: sm$1.gap,
12015
- radius: sm$1.radius,
12016
- fontSize: sm$1.typography.fontSize,
12017
- lineHeight: sm$1.typography.lineHeight,
12018
- fontWeight: sm$1.typography.fontWeight,
12286
+ height: sm$2.height,
12287
+ paddingX: sm$2.paddingX,
12288
+ gap: sm$2.gap,
12289
+ radius: sm$2.radius,
12290
+ fontSize: sm$2.typography.fontSize,
12291
+ lineHeight: sm$2.typography.lineHeight,
12292
+ fontWeight: sm$2.typography.fontWeight,
12019
12293
  },
12020
12294
  md: {
12021
- height: md$1.height,
12022
- paddingX: md$1.paddingX,
12023
- gap: md$1.gap,
12024
- radius: md$1.radius,
12025
- fontSize: md$1.typography.fontSize,
12026
- lineHeight: md$1.typography.lineHeight,
12027
- fontWeight: md$1.typography.fontWeight,
12295
+ height: md$2.height,
12296
+ paddingX: md$2.paddingX,
12297
+ gap: md$2.gap,
12298
+ radius: md$2.radius,
12299
+ fontSize: md$2.typography.fontSize,
12300
+ lineHeight: md$2.typography.lineHeight,
12301
+ fontWeight: md$2.typography.fontWeight,
12028
12302
  },
12029
12303
  };
12030
12304
  const INPUT_COLORS = {
@@ -12191,12 +12465,12 @@ class SdInput {
12191
12465
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
12192
12466
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
12193
12467
  };
12194
- return (hAsync("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, hAsync("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), hAsync("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12468
+ return (hAsync("sd-field", { key: '66c7d6a9292bf8129fea6a33d2288733c264a39f', 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: 'b429ae6e521440eb917b17b10525ff3d3767a50d', class: "sd-input__content" }, hAsync("slot", { key: 'dc1cd825ff1bea6484eada71d5aff621f82522c2', name: "prefix" }), hAsync("input", { key: '93bd923644ac7660c2c9be28e4c64d39d93365c3', 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: 'ec2f67a7ae01ebbaaa1f48f1e231f6fe2cfb413c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: 'de33f6902ab5560e151ef13e01ef84eea14da17d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12195
12469
  if (this.disabled || this.readonly)
12196
12470
  return;
12197
12471
  this.internalValue = '';
12198
12472
  await this.formField?.sdValidate();
12199
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12473
+ } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: 'db07c28cede67dbec93454b5ea90e94f72c5f313', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12200
12474
  if (this.disabled || this.readonly)
12201
12475
  return;
12202
12476
  this.passwordVisible = !this.passwordVisible;
@@ -12303,41 +12577,41 @@ var tableTokens = {
12303
12577
  table: table
12304
12578
  };
12305
12579
 
12306
- const t = tableTokens.table;
12580
+ const t$1 = tableTokens.table;
12307
12581
  const KEY_VALUE_TABLE_LAYOUT = {
12308
- rowHeight: Number(t.keyValue.height),
12582
+ rowHeight: Number(t$1.keyValue.height),
12309
12583
  thWidth: 120,
12310
- borderRadius: Number(t.radius),
12311
- thPaddingX: Number(t.header.paddingX),
12312
- padding: Number(t.keyValue.body.paddingY),
12313
- tdPaddingX: Number(t.keyValue.body.paddingX.default),
12314
- tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
12584
+ borderRadius: Number(t$1.radius),
12585
+ thPaddingX: Number(t$1.header.paddingX),
12586
+ padding: Number(t$1.keyValue.body.paddingY),
12587
+ tdPaddingX: Number(t$1.keyValue.body.paddingX.default),
12588
+ tdPaddingXWide: Number(t$1.keyValue.body.paddingX.wide),
12315
12589
  helpIconSize: 16,
12316
12590
  requiredIconSize: 12,
12317
- gap: Number(t.header.gap),
12318
- labelGap: Number(t.content.gap),
12319
- borderWidth: Number(t.border.width),
12320
- searchPaddingX: Number(t.keyValue.search.paddingX),
12591
+ gap: Number(t$1.header.gap),
12592
+ labelGap: Number(t$1.content.gap),
12593
+ borderWidth: Number(t$1.border.width),
12594
+ searchPaddingX: Number(t$1.keyValue.search.paddingX),
12321
12595
  };
12322
12596
  const KEY_VALUE_TABLE_COLORS = {
12323
- border: t.border.color,
12324
- thBg: t.header.bg,
12597
+ border: t$1.border.color,
12598
+ thBg: t$1.header.bg,
12325
12599
  thLabel: systemTokens.color.fg.primary,
12326
12600
  required: systemTokens.color.fg.accent,
12327
12601
  helpIcon: systemTokens.color.fg.success,
12328
12602
  tdBg: systemTokens.color.bg.frame,
12329
12603
  tdText: systemTokens.color.fg.primary,
12330
- searchBg: t.keyValue.search.bg,
12604
+ searchBg: t$1.keyValue.search.bg,
12331
12605
  };
12332
12606
  const KEY_VALUE_TABLE_TYPOGRAPHY = {
12333
- labelFontFamily: t.header.typography.fontFamily,
12334
- labelFontSize: Number(t.header.typography.fontSize),
12607
+ labelFontFamily: t$1.header.typography.fontFamily,
12608
+ labelFontSize: Number(t$1.header.typography.fontSize),
12335
12609
  labelFontWeight: 700,
12336
- labelLineHeight: Number(t.header.typography.lineHeight),
12337
- tdFontFamily: t.body.typography.fontFamily,
12338
- tdFontSize: Number(t.body.typography.fontSize),
12339
- tdFontWeight: Number(t.body.typography.fontWeight),
12340
- tdLineHeight: Number(t.body.typography.lineHeight),
12610
+ labelLineHeight: Number(t$1.header.typography.lineHeight),
12611
+ tdFontFamily: t$1.body.typography.fontFamily,
12612
+ tdFontSize: Number(t$1.body.typography.fontSize),
12613
+ tdFontWeight: Number(t$1.body.typography.fontWeight),
12614
+ tdLineHeight: Number(t$1.body.typography.lineHeight),
12341
12615
  };
12342
12616
 
12343
12617
  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)}`;
@@ -12660,7 +12934,7 @@ class SdLinearProgress {
12660
12934
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
12661
12935
  };
12662
12936
  const valueText = `${Math.round(this.clampedValue)}%`;
12663
- return (hAsync(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, hAsync("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, hAsync("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
12937
+ return (hAsync(Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, hAsync("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, hAsync("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', class: "sd-linear-progress__label" }, this.label)));
12664
12938
  }
12665
12939
  static get style() { return sdLinearProgressCss(); }
12666
12940
  static get cmpMeta() { return {
@@ -12716,10 +12990,10 @@ class SdLoadingContainer {
12716
12990
  this.prevBodyOverflow = null;
12717
12991
  }
12718
12992
  render() {
12719
- return (hAsync("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
12993
+ return (hAsync("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
12720
12994
  'sd-loading-container': true,
12721
12995
  'sd-loading-container--visible': this.visible,
12722
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
12996
+ }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), hAsync("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', class: "sd-loading-container__message" }, this.message))));
12723
12997
  }
12724
12998
  static get style() { return sdLoadingContainerCss(); }
12725
12999
  static get cmpMeta() { return {
@@ -12831,7 +13105,7 @@ class SdLoadingModal {
12831
13105
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
12832
13106
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
12833
13107
  };
12834
- return (hAsync(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, hAsync("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '11b93fc8996ca64a42f09e4688267329da8a74c9', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (hAsync("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
13108
+ return (hAsync(Host, { key: 'c6b6406cc751cfc007f6fbff72580a22b2975c03', style: hostStyle }, hAsync("div", { key: '139b7397598768e526275dc8b508a333ba1e6058', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: '098c693d5da0c333fb06309be5371a5e8a6c3016', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'f072a17c4c8e47e296cbf52d34414a32efa6aaa1', 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: 'a2c501cfee2181b2a7dda2544e03bf1a709baaf3', 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: 'e9d1beef80bf8fa4a0647802ce4a6e023e74bc12', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '63a64f356fc09cbaf56ff715d04c97b208f63945', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
12835
13109
  }
12836
13110
  static get style() { return sdLoadingModalCss(); }
12837
13111
  static get cmpMeta() { return {
@@ -13370,24 +13644,24 @@ var numberInputTokens = {
13370
13644
  numberInput: numberInput
13371
13645
  };
13372
13646
 
13373
- const sm = numberInputTokens.numberInput.sm;
13374
- const md = numberInputTokens.numberInput.md;
13647
+ const sm$1 = numberInputTokens.numberInput.sm;
13648
+ const md$1 = numberInputTokens.numberInput.md;
13375
13649
  const NUMBER_INPUT_SIZE_MAP = {
13376
13650
  sm: {
13377
- height: sm.height,
13378
- paddingX: sm.paddingX,
13379
- radius: sm.radius,
13380
- fontSize: sm.typography.fontSize,
13381
- lineHeight: sm.typography.lineHeight,
13382
- fontWeight: sm.typography.fontWeight,
13651
+ height: sm$1.height,
13652
+ paddingX: sm$1.paddingX,
13653
+ radius: sm$1.radius,
13654
+ fontSize: sm$1.typography.fontSize,
13655
+ lineHeight: sm$1.typography.lineHeight,
13656
+ fontWeight: sm$1.typography.fontWeight,
13383
13657
  },
13384
13658
  md: {
13385
- height: md.height,
13386
- paddingX: md.paddingX,
13387
- radius: md.radius,
13388
- fontSize: md.typography.fontSize,
13389
- lineHeight: md.typography.lineHeight,
13390
- fontWeight: md.typography.fontWeight,
13659
+ height: md$1.height,
13660
+ paddingX: md$1.paddingX,
13661
+ radius: md$1.radius,
13662
+ fontSize: md$1.typography.fontSize,
13663
+ lineHeight: md$1.typography.lineHeight,
13664
+ fontWeight: md$1.typography.fontWeight,
13391
13665
  },
13392
13666
  };
13393
13667
  const NUMBER_INPUT_COLORS = {
@@ -13428,6 +13702,8 @@ class SdNumberInput {
13428
13702
  useButton = false;
13429
13703
  /** 소수점 입력 허용 여부 */
13430
13704
  useDecimal = false;
13705
+ /** 소수점 이하 최대 자리수 (useDecimal일 때만 적용, 초과 입력한 소수부는 잘라냄) */
13706
+ maxDecimalLength;
13431
13707
  /** 입력 값 */
13432
13708
  value = null;
13433
13709
  /** 레이블 텍스트 */
@@ -13508,6 +13784,31 @@ class SdNumberInput {
13508
13784
  const result = isNegative ? '-' + formatted : formatted;
13509
13785
  return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
13510
13786
  }
13787
+ /** useDecimal이면서 유효한 maxDecimalLength가 있을 때만 소수점 이하 제한 자리수를 반환합니다. */
13788
+ getDecimalLimit() {
13789
+ if (!this.useDecimal ||
13790
+ this.maxDecimalLength === undefined ||
13791
+ !Number.isFinite(this.maxDecimalLength)) {
13792
+ return undefined;
13793
+ }
13794
+ return Math.max(0, Math.floor(this.maxDecimalLength));
13795
+ }
13796
+ /** 소수부를 제한 자리수로 잘라낸 문자열을 반환합니다(반올림하지 않고 잘라냄). */
13797
+ truncateToDecimalLimit(cleaned, limit) {
13798
+ if (!cleaned.includes('.'))
13799
+ return cleaned;
13800
+ const [intPart, fractionPart = ''] = cleaned.split('.');
13801
+ const truncatedFraction = fractionPart.slice(0, limit);
13802
+ return truncatedFraction === '' ? intPart : `${intPart}.${truncatedFraction}`;
13803
+ }
13804
+ /** 숫자값의 소수부를 제한 자리수로 잘라냅니다(제한이 없으면 원본 그대로). */
13805
+ applyDecimalLimit(value) {
13806
+ const decimalLimit = this.getDecimalLimit();
13807
+ if (decimalLimit === undefined)
13808
+ return value;
13809
+ const parsed = parseFloat(this.truncateToDecimalLimit(value.toString(), decimalLimit));
13810
+ return isNaN(parsed) ? value : parsed;
13811
+ }
13511
13812
  parseInput(input) {
13512
13813
  if (input.trim() === '')
13513
13814
  return null;
@@ -13515,12 +13816,15 @@ class SdNumberInput {
13515
13816
  if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
13516
13817
  return null;
13517
13818
  }
13518
- const parsed = parseFloat(cleaned);
13519
- if (isNaN(parsed))
13520
- return null;
13521
13819
  if (!this.useDecimal && cleaned.includes('.')) {
13522
13820
  return null;
13523
13821
  }
13822
+ // useDecimal이면서 maxDecimalLength가 설정된 경우 소수부를 제한 자리수로 잘라냄(반올림 아님)
13823
+ const decimalLimit = this.getDecimalLimit();
13824
+ const normalized = decimalLimit !== undefined ? this.truncateToDecimalLimit(cleaned, decimalLimit) : cleaned;
13825
+ const parsed = parseFloat(normalized);
13826
+ if (isNaN(parsed))
13827
+ return null;
13524
13828
  return parsed;
13525
13829
  }
13526
13830
  clampMinMax(value) {
@@ -13675,6 +13979,7 @@ class SdNumberInput {
13675
13979
  if (nextVal > this.max) {
13676
13980
  nextVal = this.max;
13677
13981
  }
13982
+ nextVal = this.applyDecimalLimit(nextVal);
13678
13983
  if (nextVal === currentVal)
13679
13984
  return;
13680
13985
  this.internalValue = nextVal;
@@ -13687,6 +13992,7 @@ class SdNumberInput {
13687
13992
  if (nextVal < this.min) {
13688
13993
  nextVal = this.min;
13689
13994
  }
13995
+ nextVal = this.applyDecimalLimit(nextVal);
13690
13996
  if (nextVal === currentVal)
13691
13997
  return;
13692
13998
  this.internalValue = nextVal;
@@ -13727,15 +14033,15 @@ class SdNumberInput {
13727
14033
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
13728
14034
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
13729
14035
  };
13730
- return (hAsync("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
14036
+ return (hAsync("sd-field", { key: 'ffa6befb9565a33e762fce231c29d7a2f663eb08', 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: '2fb1686b071fd69c65fc0c908807c029edc3b253', class: {
13731
14037
  'sd-number-input__content': true,
13732
14038
  'sd-number-input__content--no-stepper': !this.useButton,
13733
- } }, this.useButton && (hAsync("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
14039
+ } }, this.useButton && (hAsync("button", { key: '6b2464867bb0224f4fbcb50ea4e4bfc5386474ba', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'f65e9144ad93f4ba8d293b5af1bf9fd1286e7520', name: "minus", size: iconSize, color: this.isDecrementDisabled()
13734
14040
  ? NUMBER_INPUT_STEPPER.icon.disabled
13735
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
14041
+ : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '3d89b3557f961f36b429e3cf4ae247098a412b30', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: 'c5c503b634aee3b0c8d81f855b5de1d0abe35eac', 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: {
13736
14042
  textAlign: this.useButton ? 'center' : 'right',
13737
14043
  ...this.inputStyle,
13738
- } }), this.inputSuffix && hAsync("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
14044
+ } }), this.inputSuffix && hAsync("span", { key: '15177064a4daab2ede3af4f8758912da266f1c29', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: 'dcc1fbfe7c4e7eaa6db95fe7dc9a34f4b82ade8b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '58eee48f37c0e942a3734a9275a9d459bc9bc420', name: "add", size: iconSize, color: this.isIncrementDisabled()
13739
14045
  ? NUMBER_INPUT_STEPPER.icon.disabled
13740
14046
  : NUMBER_INPUT_STEPPER.icon.default }))))));
13741
14047
  }
@@ -13758,6 +14064,7 @@ class SdNumberInput {
13758
14064
  "step": [2],
13759
14065
  "useButton": [4, "use-button"],
13760
14066
  "useDecimal": [4, "use-decimal"],
14067
+ "maxDecimalLength": [2, "max-decimal-length"],
13761
14068
  "value": [1032],
13762
14069
  "label": [1],
13763
14070
  "labelWidth": [8, "label-width"],
@@ -13954,13 +14261,13 @@ class SdPagination {
13954
14261
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
13955
14262
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
13956
14263
  };
13957
- return (hAsync("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
14264
+ return (hAsync("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
13958
14265
  'sd-pagination': true,
13959
14266
  'sd-pagination--simple': this.simple,
13960
- }, style: cssVars }, hAsync("div", { key: '360cdb85715508d2f8155851b11928031015909c', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
14267
+ }, style: cssVars }, hAsync("div", { key: 'aa53d0366ae4678950ecd3917fd0d7011dd9608d', 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: {
13961
14268
  'sd-pagination__item': true,
13962
14269
  'sd-pagination__item--selected': this.currentPage === n,
13963
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
14270
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13964
14271
  }
13965
14272
  static get style() { return sdPaginationCss(); }
13966
14273
  static get cmpMeta() { return {
@@ -13981,57 +14288,135 @@ const TooltipArrow = (props) => (hAsync("svg", { width: "16", height: "12", view
13981
14288
 
13982
14289
  const popover = {
13983
14290
  "default": {
13984
- bg: "#07284A"}};
14291
+ bg: "#07284A",
14292
+ title: "#FFFFFF",
14293
+ description: "#FFFFFF",
14294
+ subAction: "#D8D8D8"
14295
+ },
14296
+ title: {
14297
+ leadingIcon: "16",
14298
+ gap: "8"
14299
+ },
14300
+ danger: {
14301
+ bg: "#FCEFEF",
14302
+ title: "#FB4444"
14303
+ },
14304
+ warning: {
14305
+ bg: "#FEF1EA",
14306
+ title: "#FF6B00"
14307
+ },
14308
+ accent: {
14309
+ bg: "#E6F1FF",
14310
+ title: "#0075FF"
14311
+ },
14312
+ light: {
14313
+ description: "#555555",
14314
+ subAction: "#888888"
14315
+ }
14316
+ };
13985
14317
  var popoverTokens = {
13986
14318
  popover: popover
13987
14319
  };
13988
14320
 
14321
+ const t = popoverTokens.popover;
14322
+ /** 제목-아이콘 간격 */
14323
+ const POPOVER_TITLE_GAP = t.title.gap;
14324
+ /** 제목 좌측 아이콘 크기 */
14325
+ const POPOVER_TITLE_ICON_SIZE = t.title.leadingIcon;
14326
+ /**
14327
+ * popoverType별 색상·버튼 매핑.
14328
+ * - default·accent: 하단 버튼 primary(solid) / danger: danger outline / warning: neutral outline
14329
+ * - default: 다크 배경 + 흰색 텍스트 / danger·warning·accent: 라이트 배경 + 타입 색상 제목 + light 계열 본문·링크 색상
14330
+ */
14331
+ const POPOVER_TYPE_CONFIG = {
14332
+ default: {
14333
+ bg: t.default.bg,
14334
+ title: t.default.title,
14335
+ description: t.default.description,
14336
+ subAction: t.default.subAction,
14337
+ buttonName: 'primary_xs',
14338
+ },
14339
+ danger: {
14340
+ bg: t.danger.bg,
14341
+ title: t.danger.title,
14342
+ description: t.light.description,
14343
+ subAction: t.light.subAction,
14344
+ buttonName: 'danger_outline_xs',
14345
+ },
14346
+ warning: {
14347
+ bg: t.warning.bg,
14348
+ title: t.warning.title,
14349
+ description: t.light.description,
14350
+ subAction: t.light.subAction,
14351
+ buttonName: 'neutral_outline_xs',
14352
+ },
14353
+ accent: {
14354
+ bg: t.accent.bg,
14355
+ title: t.accent.title,
14356
+ description: t.light.description,
14357
+ subAction: t.light.subAction,
14358
+ buttonName: 'primary_xs',
14359
+ },
14360
+ };
14361
+
13989
14362
  const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
13990
14363
 
13991
14364
  class SdPopover {
13992
14365
  constructor(hostRef) {
13993
14366
  registerInstance(this, hostRef);
13994
14367
  this.showChange = createEvent(this, "sdShowChange", 7);
14368
+ this.buttonClick = createEvent(this, "sdButtonClick", 7);
14369
+ this.leftLinkClick = createEvent(this, "sdLeftLinkClick", 7);
13995
14370
  }
13996
14371
  get el() { return getElement(this); }
13997
- /** 팝오버 표시 여부 */
13998
- show = false;
14372
+ /** 표시 여부 (제어). 미지정 시 defaultOpen 기반 비제어로 동작 */
14373
+ open;
14374
+ /** 기본 표시 여부 (비제어) */
14375
+ defaultOpen = false;
13999
14376
  /** 팝오버를 표시할 방향 */
14000
14377
  placement = 'bottom';
14001
- /** 아이콘 트리거 색상 */
14002
- color = '#01BB4B';
14003
- /** 아이콘 트리거 아이콘명 */
14378
+ /** 색상 타입 (default=다크 배경 / danger·warning·accent=라이트 배경) */
14379
+ type = 'default';
14380
+ /** 메뉴 제목 (필수) */
14381
+ menuTitle;
14382
+ /** 제목 좌측 아이콘 (선택) */
14383
+ titleIcon;
14384
+ /** 기본(아이콘) 트리거 아이콘명. slot="trigger" 가 있으면 무시 */
14004
14385
  icon = 'helpOutline';
14005
- /** 아이콘 트리거 크기 */
14386
+ /** 기본(아이콘) 트리거 크기 */
14006
14387
  iconSize = 12;
14007
- /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
14008
- label = '';
14009
- /** 버튼 트리거 프리셋 */
14010
- name = 'primary_sm';
14011
- /** 버튼 트리거 우측 아이콘 */
14012
- rightIcon;
14388
+ /** 기본(아이콘) 트리거 색상 */
14389
+ color = '#01BB4B';
14390
+ /** 하단 좌측 링크 레이블 (선택) */
14391
+ leftLinkLabel;
14392
+ /** 하단 우측 버튼 레이블 (필수). 색상/스타일은 type 별로 고정 */
14393
+ buttonLabel;
14013
14394
  /** 스크린리더용 접근성 레이블 */
14014
14395
  ariaLabel = '';
14015
- /** 비활성 상태 여부 */
14016
- disabled = false;
14017
- /** 버튼 type 속성 */
14018
- type = 'button';
14019
- /** 팝오버 메뉴 제목 */
14020
- menuTitle;
14021
- /** 팝오버 하단 좌측 링크 옵션 */
14022
- leftLink;
14023
- /** 팝오버 하단 버튼 옵션 */
14024
- button;
14025
14396
  /** 팝오버 메뉴에 추가할 클래스 */
14026
- menuClass = '';
14397
+ menuClassName = '';
14398
+ internalOpen = false;
14027
14399
  slotContentHTML = '';
14400
+ triggerHTML = '';
14028
14401
  /** 팝오버 표시 상태가 바뀔 때 발생합니다. */
14029
14402
  showChange;
14030
- buttonEl;
14031
- setShow = (next) => {
14032
- if (this.show === next)
14403
+ /** 하단 우측 버튼 클릭 시 발생합니다. */
14404
+ buttonClick;
14405
+ /** 하단 좌측 링크 클릭 시 발생합니다. */
14406
+ leftLinkClick;
14407
+ triggerEl;
14408
+ get isOpen() {
14409
+ return this.open !== undefined ? this.open : this.internalOpen;
14410
+ }
14411
+ setOpen = (next) => {
14412
+ if (this.isOpen === next)
14033
14413
  return;
14034
- this.show = next;
14414
+ if (this.open === undefined) {
14415
+ this.internalOpen = next;
14416
+ }
14417
+ else {
14418
+ this.open = next;
14419
+ }
14035
14420
  this.showChange.emit(next);
14036
14421
  };
14037
14422
  get popoverOffset() {
@@ -14046,57 +14431,69 @@ class SdPopover {
14046
14431
  return [4, 0];
14047
14432
  }
14048
14433
  }
14049
- handleClose = () => this.setShow(false);
14434
+ handleClose = () => this.setOpen(false);
14050
14435
  componentWillLoad() {
14436
+ this.internalOpen = this.defaultOpen;
14437
+ // slot="trigger" 커스텀 트리거를 분리해 두고, 나머지 라이트 DOM은 메뉴 본문으로 캡처한다.
14438
+ const triggerSlot = this.el.querySelector('[slot="trigger"]');
14439
+ if (triggerSlot) {
14440
+ this.triggerHTML = triggerSlot.outerHTML;
14441
+ triggerSlot.remove();
14442
+ }
14051
14443
  this.slotContentHTML = this.el.innerHTML;
14052
14444
  this.el.innerHTML = '';
14053
14445
  }
14054
14446
  render() {
14055
14447
  const placement = this.placement ?? 'bottom';
14056
- const color = this.color ?? '#01BB4B';
14057
- const icon = this.icon ?? 'helpOutline';
14058
- const iconSize = this.iconSize ?? 12;
14059
- const menuClass = this.menuClass ?? '';
14060
- const leftLink = this.leftLink;
14061
- const button = this.button;
14062
- const hasFooter = !!leftLink || !!button;
14063
- return (hAsync(Fragment, { key: '163802d6f0954b87902bbf957831f311829e63dc' }, this.label !== '' ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (hAsync("sd-floating-portal", { key: '1bd73048fd65916a400840c572d988c445dd662b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: 'f3791b078c7970174d9394ffcbb19beb450f12c5', class: {
14448
+ const typeConfig = POPOVER_TYPE_CONFIG[this.type ?? 'default'] ?? POPOVER_TYPE_CONFIG.default;
14449
+ const menuClassName = this.menuClassName ?? '';
14450
+ const hasLeftLink = this.leftLinkLabel !== undefined && this.leftLinkLabel !== '';
14451
+ return (hAsync(Fragment, { key: '16cc231907c02de80749163ce4b639303e969f4a' }, this.triggerHTML !== '' ? (
14452
+ // 사용자가 넘긴 slot="trigger" 콘텐츠를 감싸 클릭을 전달하는 래퍼(키보드 상호작용은 내부 트리거가 담당)
14453
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
14454
+ hAsync("span", { ref: el => (this.triggerEl = el), class: "sd-popover", "aria-label": this.ariaLabel || undefined, innerHTML: this.triggerHTML, onClick: () => this.setOpen(!this.isOpen) })) : (hAsync("sd-icon", { ref: el => (this.triggerEl = el), name: this.icon ?? 'helpOutline', size: this.iconSize ?? 12, color: this.color ?? '#01BB4B', class: "sd-popover", "aria-label": this.ariaLabel || undefined, onClick: () => this.setOpen(!this.isOpen) })), this.isOpen && (hAsync("sd-floating-portal", { key: 'c59ec7fb1b7ea137b95542f7e8f775c6bd837975', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, hAsync("div", { key: '97e68e0246997a0a73beb3e984331daa57161e8e', class: {
14064
14455
  'sd-floating-menu': true,
14065
14456
  'sd-floating-menu--popover': true,
14066
14457
  [`sd-floating-menu--${placement}`]: true,
14067
- [menuClass]: menuClass !== '',
14458
+ [menuClassName]: menuClassName !== '',
14068
14459
  }, style: {
14069
- '--sd-floating-bg': popoverTokens.popover.default.bg,
14070
- } }, hAsync("i", { key: 'f9ab66a933669a057a1da5188cb82ca9e5f17ed6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '6ea9ca3bacd2c84c468e5f00fa33e93e61a6bf9d' })), hAsync("div", { key: '91d094cd45973bcc5ea6e6016510006f41956546', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'ebe9a1e130792d7e60ca9abef9020dff6c0bd4c4', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (hAsync("div", { key: 'b898402e77f125099b29f6bd8eb5384a70aa671a', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (hAsync("div", { key: 'e797202b27ff538d4148f3b6782b33f58fc6bc2f', class: {
14460
+ '--sd-floating-bg': typeConfig.bg,
14461
+ '--sd-floating-content': typeConfig.description,
14462
+ } }, hAsync("i", { key: 'b96d7dc623a1fab61ee84f612c68c9f7bbac7405', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '92c6e5ef1258d6e99f744c75cef7ee3dd26d0367' })), hAsync("div", { key: '9c9f3cfcc8a3d60e5282a5f6f2653e2cce17cf56', class: "sd-floating-menu__content" }, this.menuTitle && (hAsync("div", { key: '044ae6b271fbf0cede0b4983e074d56882d5f50f', class: "sd-floating-menu__title", style: {
14463
+ color: typeConfig.title,
14464
+ display: 'flex',
14465
+ alignItems: 'center',
14466
+ gap: `${POPOVER_TITLE_GAP}px`,
14467
+ } }, this.titleIcon && (hAsync("sd-icon", { key: '360cf55b73ee395191836ee13a2d492460059f4a', name: this.titleIcon, size: Number(POPOVER_TITLE_ICON_SIZE), color: typeConfig.title })), hAsync("span", { key: '5cc44d0806971433b42c41e48a48e7ea8cc2c975' }, this.menuTitle))), this.slotContentHTML && (hAsync("div", { key: 'a5343a56938c0d6d5d5fd07fb83b7ccee4e81cf0', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hAsync("div", { key: '1f6a0f46b2b6b5f08a0d453cae2a868f93015ac7', class: {
14071
14468
  'sd-floating-menu__buttons': true,
14072
- 'sd-floating-menu__buttons--with-link': !!leftLink,
14073
- } }, leftLink && (hAsync("sd-text-link", { key: 'fdeacc2b97c997d0c7385bab5260e060a70292e6', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', rightArrow: leftLink.rightArrow ?? 'none', underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (hAsync("sd-button", { key: '4a56e7e714517edcbea075e7d4521f0a54388e9f', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), hAsync("sd-ghost-button", { key: 'ca713f6a07637b014c58923db2ff7af1f3ae98a8', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
14469
+ 'sd-floating-menu__buttons--with-link': hasLeftLink,
14470
+ } }, hasLeftLink && (hAsync("sd-text-link", { key: '5ec7502837f7417266810769885e2318c80ad986', class: "sd-floating-menu__left-link", style: { '--sd-text-link-color': typeConfig.subAction }, label: this.leftLinkLabel, onSdClick: () => this.leftLinkClick.emit() })), hAsync("sd-button", { key: '3d9df22cd0b65add5cd18b3750888248dc235408', name: typeConfig.buttonName, label: this.buttonLabel, ariaLabel: this.buttonLabel || 'confirm', onSdClick: () => this.buttonClick.emit() }))), hAsync("sd-ghost-button", { key: '7e1ca491a2539b52ded454aca8afd26a92dc2ef6', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
14074
14471
  }
14075
14472
  static get style() { return sdPopoverCss(); }
14076
14473
  static get cmpMeta() { return {
14077
14474
  "$flags$": 512,
14078
14475
  "$tagName$": "sd-popover",
14079
14476
  "$members$": {
14080
- "show": [1028],
14477
+ "open": [1028],
14478
+ "defaultOpen": [4, "default-open"],
14081
14479
  "placement": [513],
14082
- "color": [513],
14480
+ "type": [513],
14481
+ "menuTitle": [1, "menu-title"],
14482
+ "titleIcon": [1, "title-icon"],
14083
14483
  "icon": [513],
14084
14484
  "iconSize": [514, "icon-size"],
14085
- "label": [1],
14086
- "name": [1],
14087
- "rightIcon": [1, "right-icon"],
14485
+ "color": [513],
14486
+ "leftLinkLabel": [1, "left-link-label"],
14487
+ "buttonLabel": [1, "button-label"],
14088
14488
  "ariaLabel": [1, "aria-label"],
14089
- "disabled": [4],
14090
- "type": [1],
14091
- "menuTitle": [1, "menu-title"],
14092
- "leftLink": [16],
14093
- "button": [16],
14094
- "menuClass": [1, "menu-class"],
14095
- "slotContentHTML": [32]
14489
+ "menuClassName": [1, "menu-class-name"],
14490
+ "internalOpen": [32],
14491
+ "slotContentHTML": [32],
14492
+ "triggerHTML": [32]
14096
14493
  },
14097
14494
  "$listeners$": undefined,
14098
14495
  "$lazyBundleId$": "-",
14099
- "$attrsToReflect$": [["placement", "placement"], ["color", "color"], ["icon", "icon"], ["iconSize", "icon-size"]]
14496
+ "$attrsToReflect$": [["placement", "placement"], ["type", "type"], ["icon", "icon"], ["iconSize", "icon-size"], ["color", "color"]]
14100
14497
  }; }
14101
14498
  }
14102
14499
 
@@ -14154,7 +14551,7 @@ const POPUP_FOOTER = {
14154
14551
  shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
14155
14552
  };
14156
14553
 
14157
- const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
14554
+ const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__body::-webkit-scrollbar{width:12px;height:12px;background:transparent}sd-popup .sd-popup__body::-webkit-scrollbar-track{background:transparent}sd-popup .sd-popup__body::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){sd-popup .sd-popup__body{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}sd-popup .sd-popup__body::-webkit-scrollbar,sd-popup .sd-popup__body::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){sd-popup .sd-popup__body{scrollbar-color:#CCCCCC #F6F6F6}}sd-popup .sd-popup__body::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}sd-popup .sd-popup__body::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}sd-popup .sd-popup__body::-webkit-scrollbar-thumb:vertical{border-left-width:3px}sd-popup .sd-popup__body::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
14158
14555
 
14159
14556
  const DEFAULT_SUBMIT_BUTTON_PROPS = {
14160
14557
  name: 'primary_md',
@@ -14200,7 +14597,7 @@ class SdPopup {
14200
14597
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
14201
14598
  ...this.submitButtonProps,
14202
14599
  };
14203
- return (hAsync("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, hAsync("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, hAsync("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (hAsync("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, hAsync("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), hAsync("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14600
+ return (hAsync("div", { key: '1b8dc171a7b0dea5216aa63425ccc72ae80e3a3e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '1ae57ef360ad124a2afac3340258dce481bb7bc7', class: "sd-popup__header" }, hAsync("h2", { key: '3d0cc0df6ba901b4dc9e0917103e57d6279cde31', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a0fee226ac513744243d6f78ddce6125170700da', class: "sd-popup__body" }, hAsync("slot", { key: '55c5f94dff5413810f2c4648c9684e520db7268b' })), this.useFooter && (hAsync("footer", { key: 'f8f0dc3751324ac5976aef55bec974341db036c1', class: "sd-popup__footer" }, hAsync("div", { key: 'ea2f7e63c857d135eeffd7c2a43b171619067161', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '0d56c0c25e1e10f6900af0f632c7bb339b736032', name: "footer-left" })), hAsync("sd-button", { key: 'd334174cd98be32856a6f3b1b3348ca2ebea3cdd', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14204
14601
  }
14205
14602
  static get style() { return sdPopupCss(); }
14206
14603
  static get cmpMeta() { return {
@@ -14491,7 +14888,7 @@ class SdPortal {
14491
14888
  this.close.emit();
14492
14889
  }
14493
14890
  render() {
14494
- return hAsync("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
14891
+ return hAsync("slot", { key: '8b2a674bbd8c75c150940d53c0e5204e951cbb82' });
14495
14892
  }
14496
14893
  static get watchers() { return {
14497
14894
  "open": [{
@@ -14606,6 +15003,8 @@ class SdRadio {
14606
15003
  disabled = false;
14607
15004
  /** 표시할 라벨 텍스트 */
14608
15005
  label;
15006
+ /** native radio 그룹핑을 위한 name 속성 (미지정 시 val을 name으로 사용) */
15007
+ name;
14609
15008
  /** 선택 값이 변경될 때 발생합니다. */
14610
15009
  update;
14611
15010
  valueChanged(newValue) {
@@ -14649,7 +15048,7 @@ class SdRadio {
14649
15048
  '--sd-radio-label-color': RADIO_COLORS.label.default,
14650
15049
  '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
14651
15050
  };
14652
- return (hAsync("label", { key: 'cc7ff62ac992791ef81db9212bb5986989f6b4d6', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '20bfeaf5bc322335f5300955ebf653213d662fa6', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: '61d8bdfdb5f8309b8832b89ea2979db5b80968c8', class: "sd-radio__circle" }), this.label && (hAsync("span", { key: 'cc2a5402e4745aaae897c8f37d5fc287a2ba9b29', class: "sd-radio__label", "data-label": this.label }, this.label))));
15051
+ return (hAsync("label", { key: 'c4179fa98fcfdb885e7760a99acad56106cf2445', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("input", { key: '0fe92e2cf0a539ebe2562e907f41c0055eb5d54e', type: "radio", name: this.name || String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), hAsync("span", { key: 'abf2338b324ee693edf3c98564f2e8f63028e584', class: "sd-radio__circle" }), this.label && (hAsync("span", { key: '738c30cf39dd497bc2b710d5384be9634bbf74bf', class: "sd-radio__label", "data-label": this.label }, this.label))));
14653
15052
  }
14654
15053
  static get watchers() { return {
14655
15054
  "value": [{
@@ -14664,7 +15063,8 @@ class SdRadio {
14664
15063
  "value": [1032],
14665
15064
  "val": [8],
14666
15065
  "disabled": [4],
14667
- "label": [1]
15066
+ "label": [1],
15067
+ "name": [1]
14668
15068
  },
14669
15069
  "$listeners$": undefined,
14670
15070
  "$lazyBundleId$": "-",
@@ -14774,7 +15174,7 @@ class SdRadioButton {
14774
15174
  registerInstance(this, hostRef);
14775
15175
  this.change = createEvent(this, "sdUpdate", 7);
14776
15176
  }
14777
- /** 현재 선택된 값 */
15177
+ /** 현재 선택된 값 (미지정 시 선택 없음) */
14778
15178
  value;
14779
15179
  /** 라디오 버튼 옵션 목록 */
14780
15180
  options = [];
@@ -14854,7 +15254,7 @@ class SdRadioButton {
14854
15254
  '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
14855
15255
  '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
14856
15256
  };
14857
- return (hAsync("div", { key: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
15257
+ return (hAsync("div", { key: '7621cf9885bb69bc18083dc076b4e6babc86ff62', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
14858
15258
  const isSelected = this.isOptionSelected(option);
14859
15259
  const isDisabled = this.isOptionDisabled(option);
14860
15260
  return (hAsync("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, hAsync("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && hAsync("span", { class: "sd-radio-button__label" }, option.label)));
@@ -14884,7 +15284,7 @@ class SdRadioGroup {
14884
15284
  registerInstance(this, hostRef);
14885
15285
  this.change = createEvent(this, "sdUpdate", 7);
14886
15286
  }
14887
- /** 현재 선택된 값 */
15287
+ /** 현재 선택된 값 (미지정 시 선택 없음) */
14888
15288
  value;
14889
15289
  /** 라디오 옵션 목록 */
14890
15290
  options = [];
@@ -14912,8 +15312,8 @@ class SdRadioGroup {
14912
15312
  return classes.join(' ');
14913
15313
  }
14914
15314
  render() {
14915
- return (hAsync("div", { key: 'e5f4051ea9b2843816a849a018b8040e7b951a55', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
14916
- return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
15315
+ return (hAsync("div", { key: '7ee8aaf1872ac215e7d4c27e71d4a0a41c6f5e4e', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
15316
+ return (hAsync("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value ?? ''), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
14917
15317
  })));
14918
15318
  }
14919
15319
  static get watchers() { return {
@@ -14938,6 +15338,58 @@ class SdRadioGroup {
14938
15338
  }; }
14939
15339
  }
14940
15340
 
15341
+ const SCROLL_AREA_COLORS = {
15342
+ border: systemTokens.color.border.default,
15343
+ };
15344
+
15345
+ const sdScrollAreaCss = () => `sd-scroll-area{display:block;min-width:0;min-height:0}.sd-scroll-area__viewport{width:100%;height:100%}.sd-scroll-area__viewport::-webkit-scrollbar{width:12px;height:12px;background:transparent}.sd-scroll-area__viewport::-webkit-scrollbar-track{background:transparent}.sd-scroll-area__viewport::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){.sd-scroll-area__viewport{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}.sd-scroll-area__viewport--bg::-webkit-scrollbar,.sd-scroll-area__viewport--bg::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){.sd-scroll-area__viewport--bg{scrollbar-color:#CCCCCC #F6F6F6}}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:vertical{border-left:1px solid var(--sd-scroll-area-border-color)}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:horizontal{border-top:1px solid var(--sd-scroll-area-border-color)}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:vertical{border-left-width:3px}.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}.sd-scroll-area__viewport--vertical{overflow-x:hidden;overflow-y:auto}.sd-scroll-area__viewport--horizontal{overflow-x:auto;overflow-y:hidden}.sd-scroll-area__viewport--both{overflow:auto}`;
15346
+
15347
+ class SdScrollArea {
15348
+ constructor(hostRef) {
15349
+ registerInstance(this, hostRef);
15350
+ }
15351
+ /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */
15352
+ axis = 'both';
15353
+ /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
15354
+ background = false;
15355
+ /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */
15356
+ bordered = false;
15357
+ /** viewport 최대 높이 (예: '400px'). 비우면 호스트 크기를 따른다. */
15358
+ maxHeight = '';
15359
+ /** viewport 최대 너비 (예: '480px'). 비우면 호스트 크기를 따른다. */
15360
+ maxWidth = '';
15361
+ render() {
15362
+ const viewportStyle = {
15363
+ '--sd-scroll-area-border-color': SCROLL_AREA_COLORS.border,
15364
+ };
15365
+ if (this.maxHeight !== '')
15366
+ viewportStyle.maxHeight = this.maxHeight;
15367
+ if (this.maxWidth !== '')
15368
+ viewportStyle.maxWidth = this.maxWidth;
15369
+ return (hAsync(Host, { key: '4b9b22910436388a2017af0bea5d1c55463a5f94' }, hAsync("div", { key: '13d9301c1bd43dad765a6f18bb11482d7ae4788a', class: {
15370
+ 'sd-scroll-area__viewport': true,
15371
+ [`sd-scroll-area__viewport--${this.axis}`]: true,
15372
+ 'sd-scroll-area__viewport--bg': this.background,
15373
+ 'sd-scroll-area__viewport--bordered': this.bordered,
15374
+ }, style: viewportStyle }, hAsync("slot", { key: '1d28dd8bac0a3b40d8beca9553b061ae21be8342' }))));
15375
+ }
15376
+ static get style() { return sdScrollAreaCss(); }
15377
+ static get cmpMeta() { return {
15378
+ "$flags$": 772,
15379
+ "$tagName$": "sd-scroll-area",
15380
+ "$members$": {
15381
+ "axis": [513],
15382
+ "background": [516],
15383
+ "bordered": [516],
15384
+ "maxHeight": [1, "max-height"],
15385
+ "maxWidth": [1, "max-width"]
15386
+ },
15387
+ "$listeners$": undefined,
15388
+ "$lazyBundleId$": "-",
15389
+ "$attrsToReflect$": [["axis", "axis"], ["background", "background"], ["bordered", "bordered"]]
15390
+ }; }
15391
+ }
15392
+
14941
15393
  const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
14942
15394
 
14943
15395
  class SdSelect {
@@ -15228,15 +15680,15 @@ class SdSelect {
15228
15680
  this.closeDropdown();
15229
15681
  },
15230
15682
  };
15231
- return (hAsync("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
15683
+ return (hAsync("sd-field", { key: '5a224160fc18dff8deb4c3a2a9d1bc024c3ebd5b', 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: () => {
15232
15684
  this.hovered = true;
15233
15685
  }, onMouseLeave: () => {
15234
15686
  this.hovered = false;
15235
- } }, hAsync("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
15687
+ } }, hAsync("div", { key: '575ece02e659c99154598ad4ab416e26a7217e52', class: "sd-select", ref: el => {
15236
15688
  this.triggerRef = el;
15237
- } }, hAsync("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
15689
+ } }, hAsync("sd-select-trigger", { key: '39f1dc9bbb7e2e94e0ccf3a3b2f339b48f5e0b84', ref: el => {
15238
15690
  this.triggerComponentRef = el;
15239
- }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, hAsync("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
15691
+ }, 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: 'c1ec4d1f8f5aebeff2427e8323a3eb74f7c02ebb', ...portalProps }, hAsync("sd-select-listbox", { key: 'd74641151357b007a7293d5a2a0dabb625a5e55b', 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) })))));
15240
15692
  }
15241
15693
  static get watchers() { return {
15242
15694
  "isOpen": [{
@@ -15497,7 +15949,7 @@ class SdSelectListItem {
15497
15949
  return (
15498
15950
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
15499
15951
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
15500
- hAsync("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15952
+ hAsync("div", { key: 'e4f8fc195a7231cd3218b91a26c77f51df14e6dc', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15501
15953
  'sd-select-list-item': true,
15502
15954
  'sd-select-list-item--group': isGroup,
15503
15955
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -15507,7 +15959,7 @@ class SdSelectListItem {
15507
15959
  'sd-select-list-item--focused': this.isFocused,
15508
15960
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
15509
15961
  'sd-select-list-item--disabled': !!this.option.disabled,
15510
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '297067b88bedf8eed648f60050688e23e9dfcbdd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15962
+ }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'a9720067837860a8259b1a16b5eab111f02c7ac4', 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: '8ece77c44bea9aea99883efe099137bca7d89475', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15511
15963
  }
15512
15964
  static get style() { return sdSelectListItemCss(); }
15513
15965
  static get cmpMeta() { return {
@@ -15579,15 +16031,15 @@ class SdSelectListItemSearch {
15579
16031
  clearTimeout(this.debounceTimer);
15580
16032
  }
15581
16033
  render() {
15582
- return (hAsync("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
16034
+ return (hAsync("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
15583
16035
  'sd-select-list-item-search': true,
15584
16036
  'sd-select-list-item-search--scrolled': this.isScrolled,
15585
- } }, hAsync("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
16037
+ } }, hAsync("div", { key: 'd07b293bf685652dcc965071f47c0492776f9d41', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '065e1df3105048322ababd7237df83d045543fc3', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '973977bfbd98f5430b1b53f1ad59128383481197', ref: el => {
15586
16038
  this.inputEl = el;
15587
- }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', type: "button", class: {
16039
+ }, 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: '2a1386ef266f7398f97ff99adc89ee3cec4a594e', type: "button", class: {
15588
16040
  'sd-select-list-item-search__clear': true,
15589
16041
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
15590
- }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
16042
+ }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: '1060c9fe4e3e6ce239800f04b382df9ce83e9d16', name: "close", size: 12, color: "#888888" })))));
15591
16043
  }
15592
16044
  static get style() { return sdSelectListItemSearchCss(); }
15593
16045
  static get cmpMeta() { return {
@@ -15604,7 +16056,7 @@ class SdSelectListItemSearch {
15604
16056
  }; }
15605
16057
  }
15606
16058
 
15607
- const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}:host .sd-select-listbox__list::-webkit-scrollbar:horizontal{height:8px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}:host .sd-select-listbox__list::-webkit-scrollbar-track{background-color:#E5E5E5}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
16059
+ const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{width:12px;height:12px;background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-track{background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}:host .sd-select-listbox__list::-webkit-scrollbar,:host .sd-select-listbox__list::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-color:#CCCCCC #F6F6F6}}:host .sd-select-listbox__list::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:vertical{border-left-width:3px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
15608
16060
 
15609
16061
  class SdSelectListbox {
15610
16062
  constructor(hostRef) {
@@ -15971,9 +16423,9 @@ class SdSelectListbox {
15971
16423
  '--listbox-max-height': this.maxHeight ?? '260px',
15972
16424
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15973
16425
  };
15974
- return (hAsync("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
16426
+ return (hAsync("div", { key: '060d455fa7eb31d50fb13251f352643460cc1232', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '70543defd307911c3885b9ef3a0726465e9e4471', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: '17aed7b1eb402f3b61044814cfad734e2cd4b922', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
15975
16427
  this.listEl = el;
15976
- } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
16428
+ } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '1f43ef353e470ebb0f70bfed5c495eb7de227c62', 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) })))))));
15977
16429
  }
15978
16430
  static get watchers() { return {
15979
16431
  "searchKeyword": [{
@@ -16062,7 +16514,7 @@ class SdSelectTrigger {
16062
16514
  ? SELECT_COLORS.icon.disabled
16063
16515
  : SELECT_COLORS.icon.default,
16064
16516
  };
16065
- return (hAsync("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
16517
+ return (hAsync("div", { key: 'afda44bd2f8dcf0ab75d75b0178b067f96e61707', ref: el => {
16066
16518
  this.triggerEl = el;
16067
16519
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
16068
16520
  'sd-select-trigger': true,
@@ -16073,7 +16525,7 @@ class SdSelectTrigger {
16073
16525
  e.preventDefault();
16074
16526
  this.handleClick();
16075
16527
  }
16076
- }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16528
+ }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '061acc7d557d222b2616538346d415a6f37a198e', 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: '6444177838d54360776bbbfa7f08da7a6f556a16', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16077
16529
  'sd-select-trigger__icon': true,
16078
16530
  'sd-select-trigger__icon--open': this.isOpen,
16079
16531
  } }))));
@@ -16095,6 +16547,204 @@ class SdSelectTrigger {
16095
16547
  }; }
16096
16548
  }
16097
16549
 
16550
+ const stepper$1 = {
16551
+ sm: {
16552
+ sequence: {
16553
+ size: "20"
16554
+ },
16555
+ typography: {
16556
+ active: {
16557
+ fontWeight: "700"},
16558
+ "default": {
16559
+ 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",
16560
+ fontWeight: "500",
16561
+ fontSize: "12",
16562
+ lineHeight: "20"}
16563
+ }
16564
+ },
16565
+ dash: {
16566
+ width: "20",
16567
+ color: "#888888"
16568
+ },
16569
+ lg: {
16570
+ sequence: {
16571
+ size: "24"
16572
+ },
16573
+ typography: {
16574
+ active: {
16575
+ fontWeight: "700"},
16576
+ "default": {
16577
+ 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",
16578
+ fontWeight: "500",
16579
+ fontSize: "14",
16580
+ lineHeight: "24"}
16581
+ }
16582
+ },
16583
+ container: {
16584
+ gap: "12"
16585
+ },
16586
+ item: {
16587
+ gap: "8"
16588
+ },
16589
+ sequence: {
16590
+ radius: "9999",
16591
+ border: {
16592
+ active: "#93C4FF",
16593
+ "default": "#E1E1E1",
16594
+ completed: "#CCCCCC",
16595
+ witdh: "1"
16596
+ },
16597
+ icon: "12",
16598
+ bg: {
16599
+ active: "#D9EAFF",
16600
+ "default": "#FFFFFF",
16601
+ completed: "#E1E1E1"
16602
+ },
16603
+ text: {
16604
+ active: "#0075FF",
16605
+ "default": "#AAAAAA"
16606
+ }
16607
+ },
16608
+ text: {
16609
+ active: "#0075FF",
16610
+ "default": "#888888"
16611
+ }
16612
+ };
16613
+ var stepperTokens = {
16614
+ stepper: stepper$1
16615
+ };
16616
+
16617
+ const stepper = stepperTokens.stepper;
16618
+ const STEPPER_SIZES = {
16619
+ sm: {
16620
+ sequenceSize: stepper.sm.sequence.size,
16621
+ fontFamily: stepper.sm.typography.default.fontFamily,
16622
+ fontSize: stepper.sm.typography.default.fontSize,
16623
+ lineHeight: stepper.sm.typography.default.lineHeight,
16624
+ fontWeightActive: stepper.sm.typography.active.fontWeight,
16625
+ fontWeightDefault: stepper.sm.typography.default.fontWeight,
16626
+ },
16627
+ lg: {
16628
+ sequenceSize: stepper.lg.sequence.size,
16629
+ fontFamily: stepper.lg.typography.default.fontFamily,
16630
+ fontSize: stepper.lg.typography.default.fontSize,
16631
+ lineHeight: stepper.lg.typography.default.lineHeight,
16632
+ fontWeightActive: stepper.lg.typography.active.fontWeight,
16633
+ fontWeightDefault: stepper.lg.typography.default.fontWeight,
16634
+ },
16635
+ };
16636
+ const STEPPER_LAYOUT = {
16637
+ containerGap: stepper.container.gap,
16638
+ itemGap: stepper.item.gap,
16639
+ dashWidth: stepper.dash.width,
16640
+ radius: stepper.sequence.radius,
16641
+ borderWidth: stepper.sequence.border.witdh,
16642
+ iconSize: stepper.sequence.icon,
16643
+ };
16644
+ const STEPPER_COLORS = {
16645
+ dash: stepper.dash.color,
16646
+ sequenceBorder: stepper.sequence.border,
16647
+ sequenceBg: stepper.sequence.bg,
16648
+ sequenceText: stepper.sequence.text,
16649
+ text: stepper.text,
16650
+ };
16651
+
16652
+ const sdStepperCss = () => `sd-stepper{display:inline-flex}sd-stepper .sd-stepper{display:inline-flex;align-items:center;gap:var(--sd-stepper-container-gap);font-family:var(--sd-stepper-font-family);font-size:var(--sd-stepper-font-size);line-height:var(--sd-stepper-line-height)}sd-stepper .sd-stepper__item{display:inline-flex;align-items:center;gap:var(--sd-stepper-item-gap);color:var(--sd-stepper-text-default);font-weight:var(--sd-stepper-font-weight-default);white-space:nowrap}sd-stepper .sd-stepper__item--active{color:var(--sd-stepper-text-active);font-weight:var(--sd-stepper-font-weight-active)}sd-stepper .sd-stepper__sequence{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-stepper-sequence-size);height:var(--sd-stepper-sequence-size);flex:0 0 var(--sd-stepper-sequence-size);border-radius:var(--sd-stepper-sequence-radius);border:var(--sd-stepper-sequence-border-width) solid var(--sd-stepper-sequence-border);background:var(--sd-stepper-sequence-bg);color:var(--sd-stepper-sequence-text);font-size:12px;line-height:20px;font-weight:700}sd-stepper .sd-stepper__label{color:inherit}sd-stepper .sd-stepper__dash{display:inline-flex;align-items:center;width:var(--sd-stepper-dash-width);height:1px;flex:0 0 var(--sd-stepper-dash-width);color:var(--sd-stepper-dash-color)}`;
16653
+
16654
+ class SdStepper {
16655
+ constructor(hostRef) {
16656
+ registerInstance(this, hostRef);
16657
+ }
16658
+ /** 단계 목록 */
16659
+ items = [];
16660
+ /** 현재 활성 단계 value */
16661
+ value = '';
16662
+ /** 크기 */
16663
+ size = 'sm';
16664
+ /** 접근성 레이블 */
16665
+ ariaLabel = '진행 단계';
16666
+ valueChanged(newValue) {
16667
+ this.value = newValue;
16668
+ }
16669
+ getItemValue(item, index) {
16670
+ return item.value ?? String(index + 1);
16671
+ }
16672
+ getActiveIndex() {
16673
+ const found = this.items.findIndex((item, index) => this.getItemValue(item, index) === this.value);
16674
+ return found >= 0 ? found : 0;
16675
+ }
16676
+ getState(index) {
16677
+ const activeIndex = this.getActiveIndex();
16678
+ if (index < activeIndex)
16679
+ return 'completed';
16680
+ if (index === activeIndex)
16681
+ return 'active';
16682
+ return 'default';
16683
+ }
16684
+ buildCssVars() {
16685
+ const size = STEPPER_SIZES[this.size];
16686
+ return {
16687
+ '--sd-stepper-sequence-size': `${size.sequenceSize}px`,
16688
+ '--sd-stepper-font-family': size.fontFamily,
16689
+ '--sd-stepper-font-size': `${size.fontSize}px`,
16690
+ '--sd-stepper-line-height': `${size.lineHeight}px`,
16691
+ '--sd-stepper-font-weight-active': size.fontWeightActive,
16692
+ '--sd-stepper-font-weight-default': size.fontWeightDefault,
16693
+ '--sd-stepper-container-gap': `${STEPPER_LAYOUT.containerGap}px`,
16694
+ '--sd-stepper-item-gap': `${STEPPER_LAYOUT.itemGap}px`,
16695
+ '--sd-stepper-dash-width': `${STEPPER_LAYOUT.dashWidth}px`,
16696
+ '--sd-stepper-dash-color': STEPPER_COLORS.dash,
16697
+ '--sd-stepper-sequence-radius': `${STEPPER_LAYOUT.radius}px`,
16698
+ '--sd-stepper-sequence-border-width': `${STEPPER_LAYOUT.borderWidth}px`,
16699
+ };
16700
+ }
16701
+ getStateVars(state) {
16702
+ return {
16703
+ '--sd-stepper-sequence-border': STEPPER_COLORS.sequenceBorder[state],
16704
+ '--sd-stepper-sequence-bg': STEPPER_COLORS.sequenceBg[state],
16705
+ '--sd-stepper-sequence-text': state === 'completed'
16706
+ ? STEPPER_COLORS.text.default
16707
+ : STEPPER_COLORS.sequenceText[state],
16708
+ '--sd-stepper-text-active': STEPPER_COLORS.text.active,
16709
+ '--sd-stepper-text-default': STEPPER_COLORS.text.default,
16710
+ };
16711
+ }
16712
+ render() {
16713
+ return (hAsync("div", { key: '0255899ce447c38d44a618acc72692d2c746ebc3', class: "sd-stepper", role: "list", "aria-label": this.ariaLabel, style: this.buildCssVars() }, this.items.map((item, index) => {
16714
+ const state = this.getState(index);
16715
+ const className = [
16716
+ 'sd-stepper__item',
16717
+ `sd-stepper__item--${state}`,
16718
+ ]
16719
+ .filter(Boolean)
16720
+ .join(' ');
16721
+ return [
16722
+ hAsync("span", { class: className, role: "listitem", "aria-current": state === 'active' ? 'step' : undefined, style: this.getStateVars(state) }, hAsync("span", { class: "sd-stepper__sequence", "aria-hidden": "true" }, state === 'completed' ? (hAsync("sd-icon", { name: "check", size: STEPPER_LAYOUT.iconSize, color: "currentColor" })) : (index + 1)), hAsync("span", { class: "sd-stepper__label" }, item.label)),
16723
+ index < this.items.length - 1 && (hAsync("span", { class: "sd-stepper__dash", "aria-hidden": "true" }, hAsync("svg", { width: STEPPER_LAYOUT.dashWidth, height: "1", viewBox: `0 0 ${STEPPER_LAYOUT.dashWidth} 1`, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("rect", { width: "1.6", height: "1", fill: "#888888" }), hAsync("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }), hAsync("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }), hAsync("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })))),
16724
+ ];
16725
+ })));
16726
+ }
16727
+ static get watchers() { return {
16728
+ "value": [{
16729
+ "valueChanged": 0
16730
+ }]
16731
+ }; }
16732
+ static get style() { return sdStepperCss(); }
16733
+ static get cmpMeta() { return {
16734
+ "$flags$": 512,
16735
+ "$tagName$": "sd-stepper",
16736
+ "$members$": {
16737
+ "items": [1040],
16738
+ "value": [1537],
16739
+ "size": [513],
16740
+ "ariaLabel": [1, "aria-label"]
16741
+ },
16742
+ "$listeners$": undefined,
16743
+ "$lazyBundleId$": "-",
16744
+ "$attrsToReflect$": [["value", "value"], ["size", "size"]]
16745
+ }; }
16746
+ }
16747
+
16098
16748
  var switchTokens = {
16099
16749
  "switch": {
16100
16750
  width: "32",
@@ -16160,7 +16810,14 @@ class SdSwitch {
16160
16810
  }
16161
16811
  /** 현재 on/off 상태 */
16162
16812
  value = false;
16163
- /** 표시할 라벨 텍스트 */
16813
+ /** 스위치 좌측 라벨 */
16814
+ leftLabel;
16815
+ /** 스위치 우측 라벨 */
16816
+ rightLabel;
16817
+ /**
16818
+ * 표시할 라벨 텍스트
16819
+ * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
16820
+ */
16164
16821
  label = '';
16165
16822
  /** 비활성 상태 여부 */
16166
16823
  disabled = false;
@@ -16202,7 +16859,10 @@ class SdSwitch {
16202
16859
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
16203
16860
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
16204
16861
  };
16205
- return (hAsync("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, hAsync("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
16862
+ // label(deprecated)은 rightLabel 로 흡수 (하위호환)
16863
+ const right = this.rightLabel ?? this.label;
16864
+ const accessibleName = [this.leftLabel, right].filter(Boolean).join(' ') || 'switch';
16865
+ return (hAsync("label", { key: '3ff528a7fe1a39cae2475d31af98036dd5f0c7d8', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, hAsync("input", { key: '02e54ab9b626be19ff1efd330069e3f9477367c6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && hAsync("span", { key: '2eed006c7de45f1cda9d009fa4228c8cb1f56755', class: "sd-switch__label" }, this.leftLabel), hAsync("div", { key: '031c7c3121c54a45b7de0187c31e2e298a0f9701', class: "sd-switch__track" }, hAsync("div", { key: '15a3225b7dd4deab98feb4f6581d89f9cf480edd', class: "sd-switch__knob" })), right && hAsync("span", { key: '04b2185de5b5d2c05f24b3818c6dbc1300680d13', class: "sd-switch__label" }, right)));
16206
16866
  }
16207
16867
  static get style() { return sdSwitchCss(); }
16208
16868
  static get cmpMeta() { return {
@@ -16210,6 +16870,8 @@ class SdSwitch {
16210
16870
  "$tagName$": "sd-switch",
16211
16871
  "$members$": {
16212
16872
  "value": [1028],
16873
+ "leftLabel": [1, "left-label"],
16874
+ "rightLabel": [1, "right-label"],
16213
16875
  "label": [1],
16214
16876
  "disabled": [4]
16215
16877
  },
@@ -16424,7 +17086,7 @@ class SdTabs {
16424
17086
  };
16425
17087
  }
16426
17088
  render() {
16427
- return (hAsync("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
17089
+ return (hAsync("div", { key: 'c88c2d10181fd02076ac9c0ecdb6d3e95bd727c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16428
17090
  const badgeName = this.getBadgeName(tab);
16429
17091
  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 => {
16430
17092
  if (e.key === 'Enter' || e.key === ' ') {
@@ -16642,9 +17304,8 @@ class SdTag {
16642
17304
  label = '';
16643
17305
  /** 아이콘명 */
16644
17306
  icon;
16645
- // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
16646
- /** true이면 아이콘을 레이블 왼쪽에 배치 */
16647
- isLeft = true;
17307
+ /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
17308
+ iconLeft = true;
16648
17309
  /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
16649
17310
  width = '';
16650
17311
  componentWillLoad() {
@@ -16673,7 +17334,7 @@ class SdTag {
16673
17334
  const config = this.resolvedConfig;
16674
17335
  const iconNode = this.renderIcon(config.icon, config.iconSize);
16675
17336
  const width = this.resolvedWidth;
16676
- return (hAsync(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
17337
+ return (hAsync(Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
16677
17338
  '--sd-tag-background': config.background,
16678
17339
  '--sd-tag-content': config.content,
16679
17340
  '--sd-tag-height': config.height,
@@ -16683,7 +17344,7 @@ class SdTag {
16683
17344
  '--sd-tag-font-weight': config.fontWeight,
16684
17345
  '--sd-tag-line-height': config.lineHeight,
16685
17346
  '--sd-tag-radius': config.radius,
16686
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
17347
+ }, "aria-label": this.label || 'tag' }, this.icon && this.iconLeft && iconNode, hAsync("span", { key: '9c4a07ac015672839dc5dda40d01609870979e04', class: "sd-tag__label" }, this.label), this.icon && !this.iconLeft && iconNode)));
16687
17348
  }
16688
17349
  static get style() { return sdTagCss(); }
16689
17350
  static get cmpMeta() { return {
@@ -16693,7 +17354,7 @@ class SdTag {
16693
17354
  "name": [1],
16694
17355
  "label": [1],
16695
17356
  "icon": [1],
16696
- "isLeft": [4, "is-left"],
17357
+ "iconLeft": [4, "icon-left"],
16697
17358
  "width": [8]
16698
17359
  },
16699
17360
  "$listeners$": undefined,
@@ -16873,7 +17534,7 @@ class SdTextLink {
16873
17534
  };
16874
17535
  const tooltipText = (this.tooltipText ?? '').trim();
16875
17536
  const hasTooltip = tooltipText.length > 0;
16876
- return (hAsync("span", { key: 'd9653ed47a77fb5c00dc57f8f7cc2b4dc9035ca4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
17537
+ return (hAsync("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', role: "button", tabindex: this.disabled ? -1 : 0, class: {
16877
17538
  'sd-text-link': true,
16878
17539
  'sd-text-link--disabled': this.disabled,
16879
17540
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -16881,13 +17542,13 @@ class SdTextLink {
16881
17542
  e.preventDefault();
16882
17543
  this.handleClick();
16883
17544
  }
16884
- }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '62b3cb48c5b5fa6eb0b2b2962ef6c78bac5ac545', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, hAsync("div", { key: '5a428366f5bc2f8686a78fc73d91517ccca13eb9', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: '3416662595e9bfd164279e684e2ead9d1575a9d8', name: "square_xs_grey", label: tooltipText })))), this.icon && (hAsync("sd-icon", { key: '5056f0c55ebe92963e856f2970cfd74143876cfb', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '6cf8474ba642c9ec3dc5952c5530f9ba15046053', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: '17a74ec3a3e1a26f18b73f7d4816ea0aee0cb22c', class: "sd-text-link__arrow", style: {
17545
+ }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (hAsync("sd-portal", { key: '4dcb8ca39f7b9627b5f77885c0823848d0aa5a5f', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, hAsync("div", { key: '7bbcabbd9d9bb3594d8c4817dbbb922018bbbd19', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, hAsync("sd-tag", { key: '313c23dc9caf81d885ebf288c475ebe01bd24515', name: "square_xs_grey", label: tooltipText })))), this.icon && (hAsync("sd-icon", { key: '2668c579bc22547b542ca2045f9af0fad25a5ee7', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), hAsync("span", { key: '28246109bab90175498e841ecb02ac4a53a992b8', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (hAsync("span", { key: 'c157788957cbba17a1411ebb329897fc6524171d', class: "sd-text-link__arrow", style: {
16885
17546
  width: `${TEXT_LINK_ARROW.arrowFrame}px`,
16886
17547
  height: `${TEXT_LINK_ARROW.arrowFrame}px`,
16887
17548
  display: 'inline-flex',
16888
17549
  alignItems: 'center',
16889
17550
  justifyContent: 'center',
16890
- } }, hAsync("sd-icon", { key: 'ed0a6bf8b678a93fa8a0da907efb0cbf60427738', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
17551
+ } }, hAsync("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
16891
17552
  }
16892
17553
  static get style() { return sdTextLinkCss(); }
16893
17554
  static get cmpMeta() { return {
@@ -17071,7 +17732,7 @@ class SdTextarea {
17071
17732
  '--sd-system-size-field-sm-height': 'auto',
17072
17733
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17073
17734
  };
17074
- return (hAsync("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, hAsync("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
17735
+ return (hAsync("sd-field", { key: '007bdda5f38f94997c65f3542b4075a62c11a391', 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: '536185bb53815baae7807a5d4708d9f0100c07c1', class: "sd-textarea__content" }, hAsync("textarea", { key: '144ae3ca78f8c3953bfef9951cb79952186b856c', 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 }))));
17075
17736
  }
17076
17737
  static get watchers() { return {
17077
17738
  "value": [{
@@ -17125,89 +17786,1169 @@ class SdTextarea {
17125
17786
  }; }
17126
17787
  }
17127
17788
 
17128
- const toast = {
17129
- icon: "16",
17130
- "default": {
17131
- bg: "#07284A",
17132
- content: "#FFFFFF"
17789
+ const timepicker = {
17790
+ border: {
17791
+ "default": "#AAAAAA",
17792
+ focus: "#0075FF",
17793
+ width: "1"
17133
17794
  },
17134
- danger: {
17135
- bg: "#FB4444",
17136
- content: "#FFFFFF"
17795
+ bg: {
17796
+ "default": "#FFFFFF",
17797
+ disabled: "#E1E1E1"
17137
17798
  },
17138
- caution: {
17139
- bg: "#FFC700",
17140
- content: "#222222"
17799
+ icon: {
17800
+ "default": "#888888",
17801
+ disabled: "#BBBBBB"
17141
17802
  },
17142
- complete: {
17143
- bg: "#00973C",
17144
- content: "#FFFFFF"
17803
+ text: {
17804
+ "default": "#222222",
17805
+ disabled: "#888888"
17145
17806
  },
17146
- accent: {
17147
- bg: "#005CC9",
17148
- content: "#FFFFFF"
17807
+ selector: {
17808
+ bg: "#FFFFFF",
17809
+ range: {
17810
+ heading: {
17811
+ color: "#555555",
17812
+ gap: "16"
17813
+ },
17814
+ paddingXY: "24",
17815
+ panelGap: "24",
17816
+ section: {
17817
+ gap: "12"
17818
+ }
17819
+ },
17820
+ radius: "8",
17821
+ section: {
17822
+ paddingX: "16",
17823
+ paddingY: "12"
17824
+ },
17825
+ time: {
17826
+ gap: "4",
17827
+ column: {
17828
+ gap: "8"
17829
+ }
17830
+ },
17831
+ input: {
17832
+ width: "40"
17833
+ },
17834
+ colon: {
17835
+ size: "16"
17836
+ }
17149
17837
  },
17150
- info: {
17151
- bg: "#E6F1FF",
17152
- icon: "#0075FF",
17153
- text: "#222222",
17154
- textLink: "#555555"
17838
+ sm: {
17839
+ height: "28",
17840
+ paddingX: "12",
17841
+ gap: "8",
17842
+ icon: "16",
17843
+ radius: "4"
17844
+ },
17845
+ md: {
17846
+ height: "36",
17847
+ paddingX: "16",
17848
+ gap: "12",
17849
+ icon: "20",
17850
+ radius: "6"
17155
17851
  }
17156
17852
  };
17157
- var toastTokens = {
17158
- toast: toast
17853
+ var timepickerTokens = {
17854
+ timepicker: timepicker
17159
17855
  };
17160
17856
 
17161
- const TOAST_BUTTON_NAME_BY_TYPE = {
17162
- default: 'secondary_sm',
17163
- danger: 'danger_outline_sm',
17164
- caution: 'neutral_outline_sm',
17165
- complete: 'neutral_outline_sm',
17166
- accent: 'neutral_outline_sm',
17167
- info: 'secondary_sm',
17168
- };
17169
- const TOAST_TYPE_CONFIG = {
17170
- default: { bg: toastTokens.toast.default.bg, content: toastTokens.toast.default.content },
17171
- danger: { bg: toastTokens.toast.danger.bg, content: toastTokens.toast.danger.content },
17172
- caution: { bg: toastTokens.toast.caution.bg, content: toastTokens.toast.caution.content },
17173
- complete: { bg: toastTokens.toast.complete.bg, content: toastTokens.toast.complete.content },
17174
- accent: { bg: toastTokens.toast.accent.bg, content: toastTokens.toast.accent.content },
17175
- info: {
17176
- bg: toastTokens.toast.info.bg,
17177
- content: toastTokens.toast.info.text,
17178
- icon: toastTokens.toast.info.icon,
17179
- linkColor: toastTokens.toast.info.textLink,
17857
+ const sm = timepickerTokens.timepicker.sm;
17858
+ const md = timepickerTokens.timepicker.md;
17859
+ const TIMEPICKER_SIZE_MAP = {
17860
+ sm: {
17861
+ height: sm.height,
17862
+ paddingX: sm.paddingX,
17863
+ gap: sm.gap,
17864
+ iconSize: sm.icon,
17865
+ radius: sm.radius,
17866
+ // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
17867
+ fontSize: '12',
17868
+ lineHeight: '20',
17869
+ fontWeight: '400',
17870
+ minWidth: '128',
17871
+ },
17872
+ md: {
17873
+ height: md.height,
17874
+ paddingX: md.paddingX,
17875
+ gap: md.gap,
17876
+ iconSize: md.icon,
17877
+ radius: md.radius,
17878
+ // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
17879
+ fontSize: '14',
17880
+ lineHeight: '24',
17881
+ fontWeight: '400',
17882
+ minWidth: '160',
17180
17883
  },
17181
17884
  };
17182
- const TOAST_LAYOUT = {
17183
- iconSize: toastTokens.toast.icon,
17885
+ const TIMEPICKER_COLORS = {
17886
+ border: timepickerTokens.timepicker.border,
17887
+ bg: timepickerTokens.timepicker.bg,
17888
+ icon: timepickerTokens.timepicker.icon,
17889
+ text: {
17890
+ ...timepickerTokens.timepicker.text,
17891
+ hint: fieldTokens.field.hint.color,
17892
+ },
17184
17893
  };
17894
+ const TIMEPICKER_SELECTOR = {
17895
+ bg: timepickerTokens.timepicker.selector.bg,
17896
+ radius: timepickerTokens.timepicker.selector.radius,
17897
+ section: timepickerTokens.timepicker.selector.section,
17898
+ time: timepickerTokens.timepicker.selector.time,
17899
+ inputWidth: timepickerTokens.timepicker.selector.input.width,
17900
+ colonSize: timepickerTokens.timepicker.selector.colon.size,
17901
+ range: timepickerTokens.timepicker.selector.range,
17902
+ };
17903
+ function clampTimePart(value, min, max) {
17904
+ if (!Number.isFinite(value))
17905
+ return min;
17906
+ return Math.min(Math.max(value, min), max);
17907
+ }
17908
+ function padTimePart(value) {
17909
+ return String(value).padStart(2, '0');
17910
+ }
17911
+ function parseTimeValue(value) {
17912
+ const match = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? '');
17913
+ if (!match)
17914
+ return { hour: 0, minute: 0 };
17915
+ return {
17916
+ hour: clampTimePart(Number(match[1]), 0, 23),
17917
+ minute: clampTimePart(Number(match[2]), 0, 59),
17918
+ };
17919
+ }
17920
+ function formatTimeValue(hour, minute) {
17921
+ return `${padTimePart(clampTimePart(hour, 0, 23))}:${padTimePart(clampTimePart(minute, 0, 59))}`;
17922
+ }
17923
+ function formatTimeDisplay(value, type) {
17924
+ if (value == null || value === '')
17925
+ return '';
17926
+ const { hour, minute } = parseTimeValue(value);
17927
+ if (type === 'default')
17928
+ return formatTimeValue(hour, minute);
17929
+ const meridiem = hour >= 12 ? '오후' : '오전';
17930
+ const displayHour = hour % 12 === 0 ? 12 : hour % 12;
17931
+ return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
17932
+ }
17185
17933
 
17186
- const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}`;
17934
+ const sdTimePickerCss = () => `sd-time-picker{display:inline-flex}sd-time-picker sd-portal{display:none}sd-time-picker .sd-time-picker{position:relative;min-width:var(--sd-time-picker-min-width);width:100%;height:100%}`;
17187
17935
 
17188
- class SdToast {
17936
+ class SdTimePicker {
17189
17937
  constructor(hostRef) {
17190
17938
  registerInstance(this, hostRef);
17191
- this.close = createEvent(this, "sdClose", 7);
17192
- this.buttonClick = createEvent(this, "sdButtonClick", 7);
17939
+ this.update = createEvent(this, "sdUpdate", 7);
17940
+ this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
17193
17941
  }
17194
- /** 좌측 아이콘명 */
17195
- icon;
17196
- /** 표시할 메시지 */
17197
- message;
17198
- /** 우측 링크 URL */
17199
- link;
17200
- /** 링크 표시 레이블 (없으면 URL 표시) */
17201
- linkLabel;
17202
- /** 우측 버튼 레이블 */
17203
- buttonLabel;
17204
- /** 닫기 버튼 표시 여부 */
17205
- useClose = false;
17206
- /** 토스트 타입 (색상/아이콘 프리셋) */
17942
+ static CLOSE_ANIMATION_DURATION = 150;
17943
+ get el() { return getElement(this); }
17944
+ /** 선택된 시간 (HH:mm) */
17945
+ value = null;
17946
+ /** 입력 필드 크기 */
17947
+ size = 'sm';
17948
+ /** 표시 타입: default(24시간) / midday(오전·오후) */
17207
17949
  type = 'default';
17208
- /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
17209
- close;
17210
- /** 우측 버튼 클릭 시 발생합니다. */
17950
+ /** 시간 미선택 시 표시할 placeholder */
17951
+ placeholder = '00:00';
17952
+ /** 비활성 상태 여부 */
17953
+ disabled = false;
17954
+ /** 값이 있을 때 지우기 버튼 표시 여부 */
17955
+ clearable = false;
17956
+ /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
17957
+ useMeridiem;
17958
+ /** 분 증감 단위 */
17959
+ minuteStep = 1;
17960
+ /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
17961
+ width = '';
17962
+ // sd-field 공통 props
17963
+ /** 레이블 텍스트 */
17964
+ label = '';
17965
+ /** 레이블 너비 */
17966
+ labelWidth = '';
17967
+ /** 필드 우측 어드온 레이블 */
17968
+ addonLabel = '';
17969
+ /** 어드온 정렬 방향 */
17970
+ addonAlign = 'start';
17971
+ /** 필드 하단 힌트 텍스트 */
17972
+ hint = '';
17973
+ /** 에러 메시지 */
17974
+ errorMessage = '';
17975
+ /** 유효성 검사 규칙 목록 */
17976
+ rules = [];
17977
+ /** 에러 상태 여부 */
17978
+ error = false;
17979
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
17980
+ status;
17981
+ /** 레이블 영역 아이콘 */
17982
+ icon = undefined;
17983
+ /** 레이블 툴팁 텍스트 */
17984
+ labelTooltip = '';
17985
+ /** 레이블 툴팁 상세 옵션 */
17986
+ labelTooltipProps = null;
17987
+ isOpen = false;
17988
+ isAnimatingOut = false;
17989
+ focused = false;
17990
+ hovered = false;
17991
+ /** 시간 선택 시 선택된 시간(HH:mm)을 전달합니다. */
17992
+ update;
17993
+ /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
17994
+ dropDownShow;
17995
+ triggerRef;
17996
+ formField;
17997
+ closeAnimationTimer;
17998
+ /** 폼 연동용 name 속성 */
17999
+ name = nanoid();
18000
+ watchIsOpen(newValue) {
18001
+ this.focused = newValue;
18002
+ this.dropDownShow.emit({ isOpen: newValue });
18003
+ }
18004
+ valueChanged(newValue) {
18005
+ if (newValue == null || newValue === '')
18006
+ return;
18007
+ const parsed = parseTimeValue(newValue);
18008
+ const normalized = formatTimeValue(parsed.hour, parsed.minute);
18009
+ if (normalized !== newValue)
18010
+ this.value = normalized;
18011
+ }
18012
+ /** 유효성 검사를 실행합니다. */
18013
+ async sdValidate() {
18014
+ return this.formField?.sdValidate();
18015
+ }
18016
+ /** 값과 유효성 상태를 초기화합니다. */
18017
+ async sdReset() {
18018
+ return this.formField?.sdReset();
18019
+ }
18020
+ /** 유효성 상태만 초기화합니다. */
18021
+ async sdResetValidate() {
18022
+ return this.formField?.sdResetValidation();
18023
+ }
18024
+ /** 입력 필드에 포커스를 이동합니다. */
18025
+ async sdFocus() {
18026
+ return this.formField?.sdFocus();
18027
+ }
18028
+ componentWillLoad() {
18029
+ this.valueChanged(this.value);
18030
+ }
18031
+ disconnectedCallback() {
18032
+ if (this.closeAnimationTimer)
18033
+ clearTimeout(this.closeAnimationTimer);
18034
+ }
18035
+ closeDropdown() {
18036
+ if (!this.isOpen)
18037
+ return;
18038
+ this.isOpen = false;
18039
+ this.isAnimatingOut = true;
18040
+ if (this.closeAnimationTimer)
18041
+ clearTimeout(this.closeAnimationTimer);
18042
+ this.closeAnimationTimer = setTimeout(() => {
18043
+ this.isAnimatingOut = false;
18044
+ }, SdTimePicker.CLOSE_ANIMATION_DURATION);
18045
+ }
18046
+ handleTriggerClick = () => {
18047
+ if (this.disabled)
18048
+ return;
18049
+ if (this.isOpen) {
18050
+ this.closeDropdown();
18051
+ }
18052
+ else {
18053
+ if (this.closeAnimationTimer)
18054
+ clearTimeout(this.closeAnimationTimer);
18055
+ this.isAnimatingOut = false;
18056
+ this.isOpen = true;
18057
+ }
18058
+ };
18059
+ handleClear = (event) => {
18060
+ event.stopPropagation();
18061
+ this.value = null;
18062
+ this.update.emit(null);
18063
+ };
18064
+ handleSelect = (event) => {
18065
+ event.stopPropagation();
18066
+ this.value = event.detail;
18067
+ this.update.emit(this.value);
18068
+ };
18069
+ get effectiveUseMeridiem() {
18070
+ return this.useMeridiem ?? this.type === 'midday';
18071
+ }
18072
+ render() {
18073
+ const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
18074
+ const cssVars = {
18075
+ '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
18076
+ '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
18077
+ '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
18078
+ '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
18079
+ '--sd-time-picker-min-width': `${sizeTokens.minWidth}px`,
18080
+ '--sd-system-color-field-border-default': TIMEPICKER_COLORS.border.default,
18081
+ '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
18082
+ '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
18083
+ };
18084
+ return (hAsync("sd-field", { key: '77b2d4c36e19481ccb6a3d0cef288fe9eb902330', 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, status: this.status, 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: '2d25872f4d1253faf85384030de21ef283e0696d', class: "sd-time-picker", ref: el => {
18085
+ this.triggerRef = el;
18086
+ } }, hAsync("sd-time-picker-trigger", { key: 'fe4a4611216642bcee5632c2202dec0058cc6898', displayText: formatTimeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default'), placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'd2f921b2eee8d3cc33c52c6eb06f24188f18a78a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-time-picker-selector", { key: 'd53c348ef16a1ddac731a49d0aafe64931007d32', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
18087
+ }
18088
+ static get watchers() { return {
18089
+ "isOpen": [{
18090
+ "watchIsOpen": 0
18091
+ }],
18092
+ "value": [{
18093
+ "valueChanged": 0
18094
+ }]
18095
+ }; }
18096
+ static get style() { return sdTimePickerCss(); }
18097
+ static get cmpMeta() { return {
18098
+ "$flags$": 512,
18099
+ "$tagName$": "sd-time-picker",
18100
+ "$members$": {
18101
+ "value": [1025],
18102
+ "size": [513],
18103
+ "type": [513],
18104
+ "placeholder": [513],
18105
+ "disabled": [516],
18106
+ "clearable": [4],
18107
+ "useMeridiem": [4, "use-meridiem"],
18108
+ "minuteStep": [2, "minute-step"],
18109
+ "width": [8],
18110
+ "label": [1],
18111
+ "labelWidth": [8, "label-width"],
18112
+ "addonLabel": [1, "addon-label"],
18113
+ "addonAlign": [1, "addon-align"],
18114
+ "hint": [1],
18115
+ "errorMessage": [1, "error-message"],
18116
+ "rules": [16],
18117
+ "error": [1028],
18118
+ "status": [1],
18119
+ "icon": [16],
18120
+ "labelTooltip": [1, "label-tooltip"],
18121
+ "labelTooltipProps": [16],
18122
+ "name": [1],
18123
+ "isOpen": [32],
18124
+ "isAnimatingOut": [32],
18125
+ "focused": [32],
18126
+ "hovered": [32],
18127
+ "sdValidate": [64],
18128
+ "sdReset": [64],
18129
+ "sdResetValidate": [64],
18130
+ "sdFocus": [64]
18131
+ },
18132
+ "$listeners$": undefined,
18133
+ "$lazyBundleId$": "-",
18134
+ "$attrsToReflect$": [["size", "size"], ["type", "type"], ["placeholder", "placeholder"], ["disabled", "disabled"]]
18135
+ }; }
18136
+ }
18137
+
18138
+ const sdTimePickerSelectorCss = () => `sd-time-picker-selector{display:block}sd-time-picker-selector .sd-time-picker-selector{display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:4px 8px 16px -4px rgba(34, 34, 34, 0.1), 0 0 24px -6px rgba(34, 34, 34, 0.12)}sd-time-picker-selector .sd-time-picker-selector__meridiem{display:flex;align-items:center;justify-content:center;padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-picker-selector .sd-time-picker-selector__meridiem-button{width:61px;height:28px;border:1px solid #ccc;background:#fff;color:#555;font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--selected{z-index:1;border-color:#0075ff;color:#0075ff}sd-time-picker-selector .sd-time-picker-selector__divider{height:1px;width:100%;background:#e1e1e1}sd-time-picker-selector .sd-time-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-picker-selector .sd-time-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:1px solid #aaa;border-radius:4px;background:#fff;color:#222;font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-picker-selector .sd-time-picker-selector__colon{width:var(--selector-colon-size);color:#555;font-size:16px;line-height:16px;text-align:center}`;
18139
+
18140
+ class SdTimePickerSelector {
18141
+ constructor(hostRef) {
18142
+ registerInstance(this, hostRef);
18143
+ this.update = createEvent(this, "sdUpdate", 7);
18144
+ }
18145
+ /** 선택된 시간 (HH:mm) */
18146
+ value = null;
18147
+ /** 오전/오후 선택 표시 여부 */
18148
+ useMeridiem = true;
18149
+ /** 분 증감 단위 */
18150
+ minuteStep = 1;
18151
+ /** 시간 변경 시 발생합니다. */
18152
+ update;
18153
+ valueChanged() {
18154
+ this.syncFromValue();
18155
+ }
18156
+ editingPart = null;
18157
+ inputDraft = {};
18158
+ hour = 0;
18159
+ minute = 0;
18160
+ componentWillLoad() {
18161
+ this.syncFromValue();
18162
+ }
18163
+ syncFromValue() {
18164
+ const parsed = parseTimeValue(this.value);
18165
+ this.hour = parsed.hour;
18166
+ this.minute = parsed.minute;
18167
+ }
18168
+ get meridiem() {
18169
+ return this.hour >= 12 ? 'PM' : 'AM';
18170
+ }
18171
+ get displayHour() {
18172
+ if (!this.useMeridiem)
18173
+ return this.hour;
18174
+ const hour = this.hour % 12;
18175
+ return hour === 0 ? 12 : hour;
18176
+ }
18177
+ emitNext(hour, minute) {
18178
+ this.hour = clampTimePart(hour, 0, 23);
18179
+ this.minute = clampTimePart(minute, 0, 59);
18180
+ this.update.emit(formatTimeValue(this.hour, this.minute));
18181
+ }
18182
+ sanitizeInput(value) {
18183
+ return value.replace(/\D/g, '').slice(0, 2);
18184
+ }
18185
+ setDraft(part, value) {
18186
+ this.inputDraft = { ...this.inputDraft, [part]: value };
18187
+ }
18188
+ beginEdit(part, value) {
18189
+ this.editingPart = part;
18190
+ this.setDraft(part, String(value).padStart(2, '0'));
18191
+ }
18192
+ commitHourDraft(draft) {
18193
+ const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
18194
+ const nextHour = this.useMeridiem
18195
+ ? this.meridiem === 'PM'
18196
+ ? raw === 12
18197
+ ? 12
18198
+ : raw + 12
18199
+ : raw === 12
18200
+ ? 0
18201
+ : raw
18202
+ : raw;
18203
+ this.emitNext(nextHour, this.minute);
18204
+ return raw;
18205
+ }
18206
+ commitMinuteDraft(draft) {
18207
+ const minute = clampTimePart(Number(draft), 0, 59);
18208
+ this.emitNext(this.hour, minute);
18209
+ return minute;
18210
+ }
18211
+ endEdit(part) {
18212
+ const draft = this.inputDraft[part];
18213
+ if (part === 'hour' && draft != null && draft !== '') {
18214
+ this.commitHourDraft(draft);
18215
+ }
18216
+ if (part === 'minute' && draft != null && draft !== '') {
18217
+ this.commitMinuteDraft(draft);
18218
+ }
18219
+ this.editingPart = null;
18220
+ this.inputDraft = {};
18221
+ }
18222
+ setMeridiem(meridiem) {
18223
+ if (meridiem === this.meridiem)
18224
+ return;
18225
+ if (meridiem === 'AM') {
18226
+ this.emitNext(this.hour - 12, this.minute);
18227
+ return;
18228
+ }
18229
+ this.emitNext(this.hour + 12, this.minute);
18230
+ }
18231
+ changeHour(delta) {
18232
+ this.emitNext((this.hour + delta + 24) % 24, this.minute);
18233
+ }
18234
+ changeMinute(delta) {
18235
+ const next = this.minute + delta;
18236
+ if (next > 59) {
18237
+ this.emitNext((this.hour + 1) % 24, next - 60);
18238
+ return;
18239
+ }
18240
+ if (next < 0) {
18241
+ this.emitNext((this.hour + 23) % 24, next + 60);
18242
+ return;
18243
+ }
18244
+ this.emitNext(this.hour, next);
18245
+ }
18246
+ handleHourInput = (event) => {
18247
+ const target = event.target;
18248
+ const draft = this.sanitizeInput(target.value);
18249
+ target.value = draft;
18250
+ this.setDraft('hour', draft);
18251
+ if (draft === '')
18252
+ return;
18253
+ if (draft.length < 2)
18254
+ return;
18255
+ const raw = this.commitHourDraft(draft);
18256
+ const displayDraft = Number(draft) === raw ? draft : String(raw);
18257
+ target.value = displayDraft;
18258
+ this.setDraft('hour', displayDraft);
18259
+ };
18260
+ handleMinuteInput = (event) => {
18261
+ const target = event.target;
18262
+ const draft = this.sanitizeInput(target.value);
18263
+ target.value = draft;
18264
+ this.setDraft('minute', draft);
18265
+ if (draft === '')
18266
+ return;
18267
+ if (draft.length < 2)
18268
+ return;
18269
+ const nextMinute = this.commitMinuteDraft(draft);
18270
+ const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
18271
+ target.value = displayDraft;
18272
+ this.setDraft('minute', displayDraft);
18273
+ this.emitNext(this.hour, nextMinute);
18274
+ };
18275
+ renderMeridiemButton(label, meridiem, position) {
18276
+ const selected = this.meridiem === meridiem;
18277
+ return (hAsync("button", { type: "button", class: {
18278
+ 'sd-time-picker-selector__meridiem-button': true,
18279
+ 'sd-time-picker-selector__meridiem-button--selected': selected,
18280
+ [`sd-time-picker-selector__meridiem-button--${position}`]: true,
18281
+ }, onClick: () => this.setMeridiem(meridiem) }, label));
18282
+ }
18283
+ renderColumn(type) {
18284
+ const isHour = type === 'hour';
18285
+ const value = isHour ? this.displayHour : this.minute;
18286
+ const displayValue = this.editingPart === type ? (this.inputDraft[type] ?? '') : String(value).padStart(2, '0');
18287
+ return (hAsync("div", { class: `sd-time-picker-selector__column sd-time-picker-selector__column--${type}` }, hAsync("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 증가`, onSdClick: () => (isHour ? this.changeHour(1) : this.changeMinute(this.minuteStep)) }), hAsync("input", { class: "sd-time-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(type, value), onBlur: () => this.endEdit(type), onInput: isHour ? this.handleHourInput : this.handleMinuteInput, "aria-label": isHour ? '시' : '분' }), hAsync("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 감소`, onSdClick: () => (isHour ? this.changeHour(-1) : this.changeMinute(-this.minuteStep)) })));
18288
+ }
18289
+ render() {
18290
+ const cssVars = {
18291
+ '--selector-bg': TIMEPICKER_SELECTOR.bg,
18292
+ '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
18293
+ '--selector-section-padding-x': `${TIMEPICKER_SELECTOR.section.paddingX}px`,
18294
+ '--selector-section-padding-y': `${TIMEPICKER_SELECTOR.section.paddingY}px`,
18295
+ '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
18296
+ '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
18297
+ '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
18298
+ '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
18299
+ };
18300
+ return (hAsync("div", { key: '9bf6683c63cf784bba552872b00b53a19e7bd77d', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (hAsync("div", { key: '096e30217c77ab8faf305965528f97026eefee85', class: "sd-time-picker-selector__meridiem" }, hAsync("div", { key: '4931f8e17bfb1cb356e1d713dfdf1635ced0429a', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && hAsync("div", { key: 'a69fcd7379092069faaa556e7dc6649c46072314', class: "sd-time-picker-selector__divider" }), hAsync("div", { key: '620e20c888b254533c34d626eac5012456b76052', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), hAsync("span", { key: '483fc0afbbaf8faae65012bcead48a04bce6b446', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
18301
+ }
18302
+ static get watchers() { return {
18303
+ "value": [{
18304
+ "valueChanged": 0
18305
+ }]
18306
+ }; }
18307
+ static get style() { return sdTimePickerSelectorCss(); }
18308
+ static get cmpMeta() { return {
18309
+ "$flags$": 512,
18310
+ "$tagName$": "sd-time-picker-selector",
18311
+ "$members$": {
18312
+ "value": [1],
18313
+ "useMeridiem": [4, "use-meridiem"],
18314
+ "minuteStep": [2, "minute-step"],
18315
+ "editingPart": [32],
18316
+ "inputDraft": [32]
18317
+ },
18318
+ "$listeners$": undefined,
18319
+ "$lazyBundleId$": "-",
18320
+ "$attrsToReflect$": []
18321
+ }; }
18322
+ }
18323
+
18324
+ const sdTimePickerTriggerCss = () => `sd-time-picker-trigger{display:block;width:100%;height:100%}sd-time-picker-trigger .sd-time-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-time-picker-trigger .sd-time-picker-trigger--disabled{cursor:not-allowed}sd-time-picker-trigger .sd-time-picker-trigger__icon,sd-time-picker-trigger .sd-time-picker-trigger__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-time-picker-trigger .sd-time-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
18325
+
18326
+ class SdTimePickerTrigger {
18327
+ constructor(hostRef) {
18328
+ registerInstance(this, hostRef);
18329
+ this.triggerClick = createEvent(this, "sdTriggerClick", 7);
18330
+ this.clear = createEvent(this, "sdClear", 7);
18331
+ }
18332
+ /** 표시할 시간 텍스트 */
18333
+ displayText = '';
18334
+ /** 입력 힌트 텍스트 */
18335
+ placeholder = '00:00';
18336
+ /** 비활성 상태 여부 */
18337
+ disabled = false;
18338
+ /** 지우기 버튼 표시 여부 */
18339
+ clearable = false;
18340
+ /** 트리거 크기 */
18341
+ size = 'sm';
18342
+ /** 트리거 클릭 시 발생합니다. */
18343
+ triggerClick;
18344
+ /** 지우기 버튼 클릭 시 발생합니다. */
18345
+ clear;
18346
+ handleClick = () => {
18347
+ if (this.disabled)
18348
+ return;
18349
+ this.triggerClick.emit();
18350
+ };
18351
+ handleClear = (event) => {
18352
+ event.stopPropagation();
18353
+ if (this.disabled)
18354
+ return;
18355
+ this.clear.emit();
18356
+ };
18357
+ render() {
18358
+ const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
18359
+ const hasValue = this.displayText !== '';
18360
+ const textMinWidth = this.size === 'md' ? 96 : 80;
18361
+ const cssVars = {
18362
+ '--trigger-padding-x': `${sizeTokens.paddingX}px`,
18363
+ '--trigger-gap': `${sizeTokens.gap}px`,
18364
+ '--trigger-icon-size': `${sizeTokens.iconSize}px`,
18365
+ '--trigger-font-size': `${sizeTokens.fontSize}px`,
18366
+ '--trigger-line-height': `${sizeTokens.lineHeight}px`,
18367
+ '--trigger-font-weight': sizeTokens.fontWeight,
18368
+ '--trigger-radius': `${sizeTokens.radius}px`,
18369
+ '--trigger-text-min-width': `${textMinWidth}px`,
18370
+ '--trigger-text-color': this.disabled
18371
+ ? TIMEPICKER_COLORS.text.disabled
18372
+ : hasValue
18373
+ ? TIMEPICKER_COLORS.text.default
18374
+ : TIMEPICKER_COLORS.text.hint,
18375
+ '--trigger-icon-color': this.disabled
18376
+ ? TIMEPICKER_COLORS.icon.disabled
18377
+ : TIMEPICKER_COLORS.icon.default,
18378
+ };
18379
+ return (hAsync("div", { key: '4cd9086e21a7e7fedb6601c163dcf9c5c8f374d1', role: "button", tabindex: this.disabled ? -1 : 0, class: {
18380
+ 'sd-time-picker-trigger': true,
18381
+ 'sd-time-picker-trigger--disabled': this.disabled,
18382
+ }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
18383
+ if (e.key === 'Enter' || e.key === ' ') {
18384
+ e.preventDefault();
18385
+ this.handleClick();
18386
+ }
18387
+ } }, hAsync("sd-icon", { key: 'c38c13b3dc8c072430bb5b40765b96582696e04c', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), hAsync("span", { key: '245e636a0645d97c825a44607516d8821cc533f9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (hAsync("sd-ghost-button", { key: 'fa740470bf8b798fcf0863ba9e7822e496e8e841', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
18388
+ }
18389
+ static get style() { return sdTimePickerTriggerCss(); }
18390
+ static get cmpMeta() { return {
18391
+ "$flags$": 512,
18392
+ "$tagName$": "sd-time-picker-trigger",
18393
+ "$members$": {
18394
+ "displayText": [1, "display-text"],
18395
+ "placeholder": [1],
18396
+ "disabled": [4],
18397
+ "clearable": [4],
18398
+ "size": [1]
18399
+ },
18400
+ "$listeners$": undefined,
18401
+ "$lazyBundleId$": "-",
18402
+ "$attrsToReflect$": []
18403
+ }; }
18404
+ }
18405
+
18406
+ function getTimeMinutes(value) {
18407
+ const { hour, minute } = parseTimeValue(value);
18408
+ return hour * 60 + minute;
18409
+ }
18410
+ function normalizeTimeRangeValue(value, rangeOrder = 'strict') {
18411
+ if (value == null)
18412
+ return null;
18413
+ const normalized = value.map(item => {
18414
+ const parsed = parseTimeValue(item);
18415
+ return formatTimeValue(parsed.hour, parsed.minute);
18416
+ });
18417
+ if (rangeOrder === 'strict' && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
18418
+ return [normalized[0], normalized[0]];
18419
+ }
18420
+ return normalized;
18421
+ }
18422
+ function formatTimeRangeDisplay(value, type) {
18423
+ if (value == null || value[0] === '' || value[1] === '')
18424
+ return '';
18425
+ return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
18426
+ }
18427
+
18428
+ const sdTimeRangePickerCss = () => `sd-time-range-picker{display:inline-flex}sd-time-range-picker sd-portal{display:none}sd-time-range-picker .sd-time-range-picker{position:relative;min-width:var(--sd-time-range-picker-min-width);width:100%;height:100%}`;
18429
+
18430
+ class SdTimeRangePicker {
18431
+ constructor(hostRef) {
18432
+ registerInstance(this, hostRef);
18433
+ this.update = createEvent(this, "sdUpdate", 7);
18434
+ this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
18435
+ }
18436
+ static CLOSE_ANIMATION_DURATION = 150;
18437
+ get el() { return getElement(this); }
18438
+ /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
18439
+ value = null;
18440
+ /** 입력 필드 크기 */
18441
+ size = 'sm';
18442
+ /** 표시 타입: default(24시간) / midday(오전·오후) */
18443
+ type = 'default';
18444
+ /** 시간 미선택 시 표시할 placeholder */
18445
+ placeholder = '00:00 ~ 23:59';
18446
+ /** 비활성 상태 여부 */
18447
+ disabled = false;
18448
+ /** 값이 있을 때 지우기 버튼 표시 여부 */
18449
+ clearable = false;
18450
+ /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
18451
+ useMeridiem;
18452
+ /** 분 증감 단위 */
18453
+ minuteStep = 1;
18454
+ /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
18455
+ rangeOrder = 'strict';
18456
+ /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
18457
+ width = '';
18458
+ // sd-field 공통 props
18459
+ /** 레이블 텍스트 */
18460
+ label = '';
18461
+ /** 레이블 너비 */
18462
+ labelWidth = '';
18463
+ /** 필드 우측 어드온 레이블 */
18464
+ addonLabel = '';
18465
+ /** 어드온 정렬 방향 */
18466
+ addonAlign = 'start';
18467
+ /** 필드 하단 힌트 텍스트 */
18468
+ hint = '';
18469
+ /** 에러 메시지 */
18470
+ errorMessage = '';
18471
+ /** 유효성 검사 규칙 목록 */
18472
+ rules = [];
18473
+ /** 에러 상태 여부 */
18474
+ error = false;
18475
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
18476
+ status;
18477
+ /** 레이블 영역 아이콘 */
18478
+ icon = undefined;
18479
+ /** 레이블 툴팁 텍스트 */
18480
+ labelTooltip = '';
18481
+ /** 레이블 툴팁 상세 옵션 */
18482
+ labelTooltipProps = null;
18483
+ isOpen = false;
18484
+ isAnimatingOut = false;
18485
+ focused = false;
18486
+ hovered = false;
18487
+ /** 시간 범위 선택 시 선택된 범위([시작, 종료])를 전달합니다. */
18488
+ update;
18489
+ /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
18490
+ dropDownShow;
18491
+ triggerRef;
18492
+ formField;
18493
+ closeAnimationTimer;
18494
+ /** 폼 연동용 name 속성 */
18495
+ name = nanoid();
18496
+ watchIsOpen(newValue) {
18497
+ this.focused = newValue;
18498
+ this.dropDownShow.emit({ isOpen: newValue });
18499
+ }
18500
+ valueChanged(newValue) {
18501
+ const normalized = normalizeTimeRangeValue(newValue, this.rangeOrder);
18502
+ if (normalized != null && JSON.stringify(normalized) !== JSON.stringify(newValue)) {
18503
+ this.value = normalized;
18504
+ }
18505
+ }
18506
+ rangeOrderChanged() {
18507
+ this.valueChanged(this.value);
18508
+ }
18509
+ /** 유효성 검사를 실행합니다. */
18510
+ async sdValidate() {
18511
+ return this.formField?.sdValidate();
18512
+ }
18513
+ /** 값과 유효성 상태를 초기화합니다. */
18514
+ async sdReset() {
18515
+ return this.formField?.sdReset();
18516
+ }
18517
+ /** 유효성 상태만 초기화합니다. */
18518
+ async sdResetValidate() {
18519
+ return this.formField?.sdResetValidation();
18520
+ }
18521
+ /** 입력 필드에 포커스를 이동합니다. */
18522
+ async sdFocus() {
18523
+ return this.formField?.sdFocus();
18524
+ }
18525
+ componentWillLoad() {
18526
+ this.valueChanged(this.value);
18527
+ }
18528
+ disconnectedCallback() {
18529
+ if (this.closeAnimationTimer)
18530
+ clearTimeout(this.closeAnimationTimer);
18531
+ }
18532
+ closeDropdown() {
18533
+ if (!this.isOpen)
18534
+ return;
18535
+ this.isOpen = false;
18536
+ this.isAnimatingOut = true;
18537
+ if (this.closeAnimationTimer)
18538
+ clearTimeout(this.closeAnimationTimer);
18539
+ this.closeAnimationTimer = setTimeout(() => {
18540
+ this.isAnimatingOut = false;
18541
+ }, SdTimeRangePicker.CLOSE_ANIMATION_DURATION);
18542
+ }
18543
+ handleTriggerClick = () => {
18544
+ if (this.disabled)
18545
+ return;
18546
+ if (this.isOpen) {
18547
+ this.closeDropdown();
18548
+ }
18549
+ else {
18550
+ if (this.closeAnimationTimer)
18551
+ clearTimeout(this.closeAnimationTimer);
18552
+ this.isAnimatingOut = false;
18553
+ this.isOpen = true;
18554
+ }
18555
+ };
18556
+ handleClear = (event) => {
18557
+ event.stopPropagation();
18558
+ this.value = null;
18559
+ this.update.emit(null);
18560
+ };
18561
+ handleSelect = (event) => {
18562
+ event.stopPropagation();
18563
+ this.value = event.detail;
18564
+ this.update.emit(this.value);
18565
+ };
18566
+ get effectiveUseMeridiem() {
18567
+ return this.useMeridiem ?? this.type === 'midday';
18568
+ }
18569
+ get displayText() {
18570
+ return formatTimeRangeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default');
18571
+ }
18572
+ render() {
18573
+ const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
18574
+ const cssVars = {
18575
+ '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
18576
+ '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
18577
+ '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
18578
+ '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
18579
+ '--sd-time-range-picker-min-width': `${sizeTokens.minWidth}px`,
18580
+ '--sd-system-color-field-border-default': TIMEPICKER_COLORS.border.default,
18581
+ '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
18582
+ '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
18583
+ };
18584
+ return (hAsync("sd-field", { key: 'b709c0fe129ab899b60aa75e41bc949cb82184d7', 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, status: this.status, 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: '7fffb9bb91a0fa8a8fdce7704c47aea2de0b509a', class: "sd-time-range-picker", ref: el => {
18585
+ this.triggerRef = el;
18586
+ } }, hAsync("sd-time-picker-trigger", { key: 'b1f42c77070fc46da93aa66e681ee9504c999d11', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: 'ad91d531c8326a7e977f8c576e1026c4d6d0115c', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-time-range-picker-selector", { key: '0df138447c01169ea3e0462d012c4917ac7f904b', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
18587
+ }
18588
+ static get watchers() { return {
18589
+ "isOpen": [{
18590
+ "watchIsOpen": 0
18591
+ }],
18592
+ "value": [{
18593
+ "valueChanged": 0
18594
+ }],
18595
+ "rangeOrder": [{
18596
+ "rangeOrderChanged": 0
18597
+ }]
18598
+ }; }
18599
+ static get style() { return sdTimeRangePickerCss(); }
18600
+ static get cmpMeta() { return {
18601
+ "$flags$": 512,
18602
+ "$tagName$": "sd-time-range-picker",
18603
+ "$members$": {
18604
+ "value": [1040],
18605
+ "size": [513],
18606
+ "type": [513],
18607
+ "placeholder": [513],
18608
+ "disabled": [516],
18609
+ "clearable": [4],
18610
+ "useMeridiem": [4, "use-meridiem"],
18611
+ "minuteStep": [2, "minute-step"],
18612
+ "rangeOrder": [1, "range-order"],
18613
+ "width": [8],
18614
+ "label": [1],
18615
+ "labelWidth": [8, "label-width"],
18616
+ "addonLabel": [1, "addon-label"],
18617
+ "addonAlign": [1, "addon-align"],
18618
+ "hint": [1],
18619
+ "errorMessage": [1, "error-message"],
18620
+ "rules": [16],
18621
+ "error": [1028],
18622
+ "status": [1],
18623
+ "icon": [16],
18624
+ "labelTooltip": [1, "label-tooltip"],
18625
+ "labelTooltipProps": [16],
18626
+ "name": [1],
18627
+ "isOpen": [32],
18628
+ "isAnimatingOut": [32],
18629
+ "focused": [32],
18630
+ "hovered": [32],
18631
+ "sdValidate": [64],
18632
+ "sdReset": [64],
18633
+ "sdResetValidate": [64],
18634
+ "sdFocus": [64]
18635
+ },
18636
+ "$listeners$": undefined,
18637
+ "$lazyBundleId$": "-",
18638
+ "$attrsToReflect$": [["size", "size"], ["type", "type"], ["placeholder", "placeholder"], ["disabled", "disabled"]]
18639
+ }; }
18640
+ }
18641
+
18642
+ const sdTimeRangePickerSelectorCss = () => `sd-time-range-picker-selector{display:block}sd-time-range-picker-selector .sd-time-range-picker-selector{display:flex;align-items:flex-start;justify-content:center;gap:var(--selector-range-panel-gap);padding:var(--selector-range-padding);overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:var(--sd-system-shadow-spread-sm-x) var(--sd-system-shadow-spread-sm-y) var(--sd-system-shadow-spread-sm-blur) var(--sd-system-shadow-spread-sm-spread) var(--sd-system-shadow-spread-sm-color), var(--sd-system-shadow-spread-md-x) var(--sd-system-shadow-spread-md-y) var(--sd-system-shadow-spread-md-blur) var(--sd-system-shadow-spread-md-spread) var(--sd-system-shadow-spread-md-color)}sd-time-range-picker-selector .sd-time-range-picker-selector__panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-range-section-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading{display:flex;flex-direction:column;align-items:center;gap:var(--selector-range-heading-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading-text{color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:700;text-align:center;white-space:nowrap}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button{width:61px;height:28px;border:var(--selector-border-width) solid var(--selector-border-default);background:var(--selector-bg);color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--selected{z-index:1;border-color:var(--selector-border-focus);color:var(--selector-border-focus)}sd-time-range-picker-selector .sd-time-range-picker-selector__divider{align-self:stretch;width:1px;background:var(--selector-bg-disabled)}sd-time-range-picker-selector .sd-time-range-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:0 16px;background:var(--selector-bg)}sd-time-range-picker-selector .sd-time-range-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:var(--selector-border-width) solid var(--selector-border-default);border-radius:4px;background:var(--selector-bg);color:var(--selector-text-default);font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-range-picker-selector .sd-time-range-picker-selector__colon{width:var(--selector-colon-size);color:var(--selector-range-heading-color);font-size:16px;line-height:16px;text-align:center}`;
18643
+
18644
+ class SdTimeRangePickerSelector {
18645
+ constructor(hostRef) {
18646
+ registerInstance(this, hostRef);
18647
+ this.update = createEvent(this, "sdUpdate", 7);
18648
+ }
18649
+ /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
18650
+ value = null;
18651
+ /** 오전/오후 선택 표시 여부 */
18652
+ useMeridiem = false;
18653
+ /** 분 증감 단위 */
18654
+ minuteStep = 1;
18655
+ /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
18656
+ rangeOrder = 'strict';
18657
+ /** 시간 범위 변경 시 발생합니다. */
18658
+ update;
18659
+ editingKey = null;
18660
+ inputDraft = {};
18661
+ autoAdjusted = null;
18662
+ getRange() {
18663
+ return this.value ?? ['00:00', '23:59'];
18664
+ }
18665
+ getParts(side) {
18666
+ const [start, end] = this.getRange();
18667
+ return parseTimeValue(side === 'start' ? start : end);
18668
+ }
18669
+ getMeridiem(side) {
18670
+ return this.getParts(side).hour >= 12 ? 'PM' : 'AM';
18671
+ }
18672
+ getDisplayHour(side) {
18673
+ const { hour } = this.getParts(side);
18674
+ if (!this.useMeridiem)
18675
+ return hour;
18676
+ const displayHour = hour % 12;
18677
+ return displayHour === 0 ? 12 : displayHour;
18678
+ }
18679
+ emitSide(side, hour, minute, direction = 'unknown') {
18680
+ const [start, end] = this.getRange();
18681
+ const next = formatTimeValue(hour, minute);
18682
+ this.update.emit(this.normalizeNextRange(side === 'start' ? [next, end] : [start, next], side, direction));
18683
+ }
18684
+ getTimeMinutes(value) {
18685
+ const { hour, minute } = parseTimeValue(value);
18686
+ return hour * 60 + minute;
18687
+ }
18688
+ normalizeNextRange(range, changedSide, direction) {
18689
+ if (this.rangeOrder === 'allow-cross-day')
18690
+ return range;
18691
+ const [start, end] = range;
18692
+ const [currentStart, currentEnd] = this.getRange();
18693
+ if (this.getTimeMinutes(start) <= this.getTimeMinutes(end)) {
18694
+ const shouldKeepSynced = this.autoAdjusted?.side === changedSide &&
18695
+ currentStart === currentEnd &&
18696
+ start !== end &&
18697
+ (direction === 'unknown' || this.autoAdjusted.direction === direction);
18698
+ if (shouldKeepSynced) {
18699
+ return changedSide === 'start' ? [start, start] : [end, end];
18700
+ }
18701
+ this.autoAdjusted = null;
18702
+ return range;
18703
+ }
18704
+ this.autoAdjusted = {
18705
+ side: changedSide,
18706
+ direction: changedSide === 'start' ? 'increase' : 'decrease',
18707
+ };
18708
+ return changedSide === 'start' ? [start, start] : [end, end];
18709
+ }
18710
+ getEditingKey(side, part) {
18711
+ return `${side}-${part}`;
18712
+ }
18713
+ sanitizeInput(value) {
18714
+ return value.replace(/\D/g, '').slice(0, 2);
18715
+ }
18716
+ setDraft(key, value) {
18717
+ this.inputDraft = { ...this.inputDraft, [key]: value };
18718
+ }
18719
+ beginEdit(side, part, value) {
18720
+ const key = this.getEditingKey(side, part);
18721
+ this.editingKey = key;
18722
+ this.setDraft(key, String(value).padStart(2, '0'));
18723
+ }
18724
+ commitHourDraft(side, draft) {
18725
+ const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
18726
+ const { minute } = this.getParts(side);
18727
+ const meridiem = this.getMeridiem(side);
18728
+ const nextHour = this.useMeridiem
18729
+ ? meridiem === 'PM'
18730
+ ? raw === 12
18731
+ ? 12
18732
+ : raw + 12
18733
+ : raw === 12
18734
+ ? 0
18735
+ : raw
18736
+ : raw;
18737
+ this.emitSide(side, nextHour, minute);
18738
+ return raw;
18739
+ }
18740
+ commitMinuteDraft(side, draft) {
18741
+ const { hour } = this.getParts(side);
18742
+ const nextMinute = clampTimePart(Number(draft), 0, 59);
18743
+ this.emitSide(side, hour, nextMinute);
18744
+ return nextMinute;
18745
+ }
18746
+ endEdit(side, part) {
18747
+ const draft = this.inputDraft[this.getEditingKey(side, part)];
18748
+ if (part === 'hour' && draft != null && draft !== '') {
18749
+ this.commitHourDraft(side, draft);
18750
+ }
18751
+ if (part === 'minute' && draft != null && draft !== '') {
18752
+ this.commitMinuteDraft(side, draft);
18753
+ }
18754
+ this.editingKey = null;
18755
+ this.inputDraft = {};
18756
+ }
18757
+ setMeridiem(side, meridiem) {
18758
+ const current = this.getMeridiem(side);
18759
+ if (current === meridiem)
18760
+ return;
18761
+ const { hour, minute } = this.getParts(side);
18762
+ this.emitSide(side, meridiem === 'AM' ? hour - 12 : hour + 12, minute);
18763
+ }
18764
+ changeHour(side, delta) {
18765
+ const { hour, minute } = this.getParts(side);
18766
+ this.emitSide(side, (hour + delta + 24) % 24, minute, delta > 0 ? 'increase' : 'decrease');
18767
+ }
18768
+ changeMinute(side, delta) {
18769
+ const { hour, minute } = this.getParts(side);
18770
+ const next = minute + delta;
18771
+ if (next > 59) {
18772
+ this.emitSide(side, (hour + 1) % 24, next - 60, delta > 0 ? 'increase' : 'decrease');
18773
+ return;
18774
+ }
18775
+ if (next < 0) {
18776
+ this.emitSide(side, (hour + 23) % 24, next + 60, delta > 0 ? 'increase' : 'decrease');
18777
+ return;
18778
+ }
18779
+ this.emitSide(side, hour, next, delta > 0 ? 'increase' : 'decrease');
18780
+ }
18781
+ handleHourInput = (side, event) => {
18782
+ const target = event.target;
18783
+ const draft = this.sanitizeInput(target.value);
18784
+ target.value = draft;
18785
+ this.setDraft(this.getEditingKey(side, 'hour'), draft);
18786
+ if (draft === '')
18787
+ return;
18788
+ if (draft.length < 2)
18789
+ return;
18790
+ const raw = this.commitHourDraft(side, draft);
18791
+ const displayDraft = Number(draft) === raw ? draft : String(raw);
18792
+ target.value = displayDraft;
18793
+ this.setDraft(this.getEditingKey(side, 'hour'), displayDraft);
18794
+ };
18795
+ handleMinuteInput = (side, event) => {
18796
+ const target = event.target;
18797
+ const draft = this.sanitizeInput(target.value);
18798
+ target.value = draft;
18799
+ this.setDraft(this.getEditingKey(side, 'minute'), draft);
18800
+ if (draft === '')
18801
+ return;
18802
+ if (draft.length < 2)
18803
+ return;
18804
+ const nextMinute = this.commitMinuteDraft(side, draft);
18805
+ const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
18806
+ target.value = displayDraft;
18807
+ this.setDraft(this.getEditingKey(side, 'minute'), displayDraft);
18808
+ };
18809
+ renderMeridiemButton(side, label, meridiem, position) {
18810
+ const selected = this.getMeridiem(side) === meridiem;
18811
+ return (hAsync("button", { type: "button", class: {
18812
+ 'sd-time-range-picker-selector__meridiem-button': true,
18813
+ 'sd-time-range-picker-selector__meridiem-button--selected': selected,
18814
+ [`sd-time-range-picker-selector__meridiem-button--${position}`]: true,
18815
+ }, onClick: () => this.setMeridiem(side, meridiem) }, label));
18816
+ }
18817
+ renderColumn(side, type) {
18818
+ const isHour = type === 'hour';
18819
+ const { minute } = this.getParts(side);
18820
+ const value = isHour ? this.getDisplayHour(side) : minute;
18821
+ const editingKey = this.getEditingKey(side, type);
18822
+ const displayValue = this.editingKey === editingKey
18823
+ ? (this.inputDraft[editingKey] ?? '')
18824
+ : String(value).padStart(2, '0');
18825
+ return (hAsync("div", { class: "sd-time-range-picker-selector__column" }, hAsync("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'} 증가`, onSdClick: () => isHour ? this.changeHour(side, 1) : this.changeMinute(side, this.minuteStep) }), hAsync("input", { class: "sd-time-range-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(side, type, value), onBlur: () => this.endEdit(side, type), onInput: event => isHour ? this.handleHourInput(side, event) : this.handleMinuteInput(side, event), "aria-label": `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'}` }), hAsync("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${side === 'start' ? '시작' : '종료'} ${isHour ? '시' : '분'} 감소`, onSdClick: () => isHour ? this.changeHour(side, -1) : this.changeMinute(side, -this.minuteStep) })));
18826
+ }
18827
+ renderPanel(side, title) {
18828
+ return (hAsync("div", { class: "sd-time-range-picker-selector__panel" }, hAsync("div", { class: "sd-time-range-picker-selector__heading" }, hAsync("div", { class: "sd-time-range-picker-selector__heading-text" }, title), this.useMeridiem && (hAsync("div", { class: "sd-time-range-picker-selector__meridiem-group" }, this.renderMeridiemButton(side, '오전', 'AM', 'first'), this.renderMeridiemButton(side, '오후', 'PM', 'end')))), hAsync("div", { class: "sd-time-range-picker-selector__time" }, this.renderColumn(side, 'hour'), hAsync("span", { class: "sd-time-range-picker-selector__colon" }, ":"), this.renderColumn(side, 'minute'))));
18829
+ }
18830
+ render() {
18831
+ const cssVars = {
18832
+ '--selector-bg': TIMEPICKER_SELECTOR.bg,
18833
+ '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
18834
+ '--selector-range-padding': `${TIMEPICKER_SELECTOR.range.paddingXY}px`,
18835
+ '--selector-range-panel-gap': `${TIMEPICKER_SELECTOR.range.panelGap}px`,
18836
+ '--selector-range-section-gap': `${TIMEPICKER_SELECTOR.range.section.gap}px`,
18837
+ '--selector-range-heading-gap': `${TIMEPICKER_SELECTOR.range.heading.gap}px`,
18838
+ '--selector-range-heading-color': TIMEPICKER_SELECTOR.range.heading.color,
18839
+ '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
18840
+ '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
18841
+ '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
18842
+ '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
18843
+ '--selector-border-width': `${TIMEPICKER_COLORS.border.width}px`,
18844
+ '--selector-border-default': TIMEPICKER_COLORS.border.default,
18845
+ '--selector-border-focus': TIMEPICKER_COLORS.border.focus,
18846
+ '--selector-bg-disabled': TIMEPICKER_COLORS.bg.disabled,
18847
+ '--selector-text-default': TIMEPICKER_COLORS.text.default,
18848
+ };
18849
+ return (hAsync("div", { key: 'd62a959d611bd9379c0f07cd29cea18cda66b1f6', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), hAsync("div", { key: '23e668d0bae4a16fdc8af3be4a2c40bec2d7f1cd', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
18850
+ }
18851
+ static get style() { return sdTimeRangePickerSelectorCss(); }
18852
+ static get cmpMeta() { return {
18853
+ "$flags$": 512,
18854
+ "$tagName$": "sd-time-range-picker-selector",
18855
+ "$members$": {
18856
+ "value": [16],
18857
+ "useMeridiem": [4, "use-meridiem"],
18858
+ "minuteStep": [2, "minute-step"],
18859
+ "rangeOrder": [1, "range-order"],
18860
+ "editingKey": [32],
18861
+ "inputDraft": [32]
18862
+ },
18863
+ "$listeners$": undefined,
18864
+ "$lazyBundleId$": "-",
18865
+ "$attrsToReflect$": []
18866
+ }; }
18867
+ }
18868
+
18869
+ const toast = {
18870
+ icon: "16",
18871
+ "default": {
18872
+ bg: "#07284A",
18873
+ content: "#FFFFFF"
18874
+ },
18875
+ danger: {
18876
+ bg: "#FB4444",
18877
+ content: "#FFFFFF"
18878
+ },
18879
+ caution: {
18880
+ bg: "#FFC700",
18881
+ content: "#222222"
18882
+ },
18883
+ complete: {
18884
+ bg: "#00973C",
18885
+ content: "#FFFFFF"
18886
+ },
18887
+ accent: {
18888
+ bg: "#005CC9",
18889
+ content: "#FFFFFF"
18890
+ },
18891
+ info: {
18892
+ bg: "#E6F1FF",
18893
+ icon: "#0075FF",
18894
+ text: "#222222",
18895
+ textLink: "#555555"
18896
+ }
18897
+ };
18898
+ var toastTokens = {
18899
+ toast: toast
18900
+ };
18901
+
18902
+ const TOAST_BUTTON_NAME_BY_TYPE = {
18903
+ default: 'secondary_sm',
18904
+ danger: 'danger_outline_sm',
18905
+ caution: 'neutral_outline_sm',
18906
+ complete: 'neutral_outline_sm',
18907
+ accent: 'neutral_outline_sm',
18908
+ info: 'secondary_sm',
18909
+ };
18910
+ const TOAST_TYPE_CONFIG = {
18911
+ default: { bg: toastTokens.toast.default.bg, content: toastTokens.toast.default.content },
18912
+ danger: { bg: toastTokens.toast.danger.bg, content: toastTokens.toast.danger.content },
18913
+ caution: { bg: toastTokens.toast.caution.bg, content: toastTokens.toast.caution.content },
18914
+ complete: { bg: toastTokens.toast.complete.bg, content: toastTokens.toast.complete.content },
18915
+ accent: { bg: toastTokens.toast.accent.bg, content: toastTokens.toast.accent.content },
18916
+ info: {
18917
+ bg: toastTokens.toast.info.bg,
18918
+ content: toastTokens.toast.info.text,
18919
+ icon: toastTokens.toast.info.icon,
18920
+ linkColor: toastTokens.toast.info.textLink,
18921
+ },
18922
+ };
18923
+ const TOAST_LAYOUT = {
18924
+ iconSize: toastTokens.toast.icon,
18925
+ };
18926
+
18927
+ const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}`;
18928
+
18929
+ class SdToast {
18930
+ constructor(hostRef) {
18931
+ registerInstance(this, hostRef);
18932
+ this.close = createEvent(this, "sdClose", 7);
18933
+ this.buttonClick = createEvent(this, "sdButtonClick", 7);
18934
+ }
18935
+ /** 좌측 아이콘명 */
18936
+ icon;
18937
+ /** 표시할 메시지 */
18938
+ message;
18939
+ /** 우측 링크 URL */
18940
+ link;
18941
+ /** 링크 표시 레이블 (없으면 URL 표시) */
18942
+ linkLabel;
18943
+ /** 우측 버튼 레이블 */
18944
+ buttonLabel;
18945
+ /** 닫기 버튼 표시 여부 */
18946
+ useClose = false;
18947
+ /** 토스트 타입 (색상/아이콘 프리셋) */
18948
+ type = 'default';
18949
+ /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
18950
+ close;
18951
+ /** 우측 버튼 클릭 시 발생합니다. */
17211
18952
  buttonClick;
17212
18953
  render() {
17213
18954
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
@@ -17216,12 +18957,12 @@ class SdToast {
17216
18957
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
17217
18958
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
17218
18959
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
17219
- return (hAsync("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
18960
+ return (hAsync("div", { key: '5d7511c3fe5a5ef828986ff624af7c52ff087cfa', style: {
17220
18961
  '--sd-toast-bg': typeConfig.bg,
17221
18962
  '--sd-toast-text': typeConfig.content,
17222
18963
  '--sd-toast-icon': iconColor,
17223
18964
  '--sd-toast-link': linkColor,
17224
- } }, hAsync("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, hAsync("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
18965
+ } }, hAsync("div", { key: 'c35b42d7ece2030ed0e27abb0059f9b09c4edb9e', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: '015223ab3e9d4296d3782afc0c6cfd60e54289c7', class: "sd-toast__icon" }, hAsync("sd-icon", { key: '6d8e5d73fc026df0d8f75439b926bd027ca6a008', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'b601081818d66910d9d2f9984bfb9a473237b065', class: "sd-toast__content" }, hAsync("span", { key: '6a17766f5a337cbc85179dc310fb400186f35ac6', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: '80abceec8d37905073c9a8e43fcdd1a78978b5f6', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '212516f32c46938d405e68dbb156cf139b39ffd8', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '9fd34f93f46d9a5a25ec52e0d164bbcaf4297e2e', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
17225
18966
  }
17226
18967
  static get style() { return sdToastCss(); }
17227
18968
  static get cmpMeta() { return {
@@ -17483,7 +19224,7 @@ class SdToastContainer {
17483
19224
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
17484
19225
  const indexMap = new Map();
17485
19226
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
17486
- return (hAsync("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
19227
+ return (hAsync("div", { key: '166ac21503b08853631fddaed047ab108a99570a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17487
19228
  this.expanded = true;
17488
19229
  this.pauseTimers();
17489
19230
  }, onMouseLeave: () => {
@@ -17644,7 +19385,7 @@ class SdToggle {
17644
19385
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
17645
19386
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
17646
19387
  };
17647
- return (hAsync("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
19388
+ return (hAsync("label", { key: 'f78d58c01b943a5f22ace9cb14e50b0098cc8206', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '8b8d8e09b322a5093c57129f94c49f6951d78df7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
17648
19389
  }
17649
19390
  static get style() { return sdToggleCss(); }
17650
19391
  static get cmpMeta() { return {
@@ -17697,42 +19438,29 @@ class SdTooltip {
17697
19438
  trigger = 'hover';
17698
19439
  /** 툴팁 표시 방향 */
17699
19440
  placement = 'top';
17700
- /** 아이콘 트리거 색상 */
19441
+ /** 기본(아이콘) 트리거 색상 */
17701
19442
  color = '#01BB4B';
17702
19443
  /** 툴팁 배경/텍스트 색상 타입 */
17703
19444
  tooltipType = 'default';
17704
- /** 아이콘 트리거 아이콘명 */
19445
+ /** 기본(아이콘) 트리거 아이콘명. slot="anchor" 가 있으면 무시 */
17705
19446
  icon = 'helpOutline';
17706
- /** 아이콘 트리거 크기 */
19447
+ /** 기본(아이콘) 트리거 크기 */
17707
19448
  iconSize = 12;
17708
- /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
17709
- label = '';
17710
- /** 버튼 트리거 프리셋 */
17711
- name = 'primary_sm';
17712
- /** 버튼 트리거 우측 아이콘 */
17713
- rightIcon;
17714
19449
  /** 스크린리더용 접근성 레이블 */
17715
19450
  ariaLabel = '';
17716
- /** 비활성 상태 여부 */
19451
+ /** 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 */
17717
19452
  disabled = false;
17718
- /** 버튼 type 속성 */
17719
- type = 'button';
17720
19453
  /** 툴팁 우측 상단 닫기 버튼 표시 여부 */
17721
19454
  useClose = false;
17722
- /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
17723
- sdClass = '';
17724
19455
  /**
17725
19456
  * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
17726
- * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
19457
+ * (HTML 문자열 허용) 지정하지 않으면 default slot 으로 전달한 내용을 본문으로 사용합니다.
17727
19458
  */
17728
19459
  message = [];
17729
- /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
17730
- triggerClass = '';
17731
- /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
17732
- triggerStyle = '';
19460
+ /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
19461
+ triggerClassName = '';
17733
19462
  showTooltip = false;
17734
19463
  slotContentHTML = '';
17735
- buttonEl;
17736
19464
  triggerEl;
17737
19465
  isAnchorMode = false;
17738
19466
  menuEl;
@@ -17740,6 +19468,8 @@ class SdTooltip {
17740
19468
  closeTimeout;
17741
19469
  static CLOSE_ANIM_MS = 150;
17742
19470
  openTooltip = () => {
19471
+ if (this.disabled)
19472
+ return;
17743
19473
  this.cancelHideTimer();
17744
19474
  this.showTooltip = true;
17745
19475
  if (this.menuEl) {
@@ -17789,22 +19519,16 @@ class SdTooltip {
17789
19519
  this.closeTooltip();
17790
19520
  }
17791
19521
  componentWillLoad() {
17792
- // slot="anchor" 자식이 있으면 anchor 모드(다른 컴포넌트를 트리거로 사용)
19522
+ // slot="anchor" 자식이 있으면 anchor 모드(다른 요소를 트리거로 사용)
17793
19523
  this.isAnchorMode = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'anchor');
17794
19524
  if (!this.isAnchorMode) {
17795
- // 레거시 모드: 슬롯 내용을 본문으로 캡처하고 자식을 비웁니다.
19525
+ // 기본 모드: default slot 내용을 본문으로 캡처하고 자식을 비웁니다.
17796
19526
  this.slotContentHTML = this.el.innerHTML;
17797
19527
  this.el.replaceChildren();
17798
19528
  }
17799
19529
  // anchor 모드: 자식(slot="anchor")은 그대로 두어 Stencil 슬롯으로 투영합니다.
17800
19530
  this.el.classList.toggle('visible', true);
17801
19531
  }
17802
- componentDidRender() {
17803
- // CSS 문자열 스타일은 ref로 직접 적용 (속성/프로퍼티 전달 모두 호환)
17804
- if (this.triggerEl && this.triggerStyle !== '') {
17805
- this.triggerEl.setAttribute('style', this.triggerStyle);
17806
- }
17807
- }
17808
19532
  render() {
17809
19533
  const trigger = this.trigger ?? 'hover';
17810
19534
  const placement = this.placement ?? 'top';
@@ -17812,27 +19536,29 @@ class SdTooltip {
17812
19536
  const icon = this.icon ?? 'helpOutline';
17813
19537
  const color = this.color ?? '#01BB4B';
17814
19538
  const typeConfig = TOOLTIP_TYPE_CONFIG[tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
17815
- const hoverTrigger = {
17816
- onMouseEnter: () => this.openTooltip(),
17817
- onMouseLeave: () => !this.useClose && this.startHideTimer(),
19539
+ // 클릭 토글: 열림은 openTooltip(타이머 정리), 닫힘은 즉시(애니메이션 없이)
19540
+ const toggleTooltip = () => {
19541
+ if (this.showTooltip) {
19542
+ this.showTooltip = false;
19543
+ }
19544
+ else {
19545
+ this.openTooltip();
19546
+ }
17818
19547
  };
17819
- const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
17820
- const hasLabel = this.label !== undefined && this.label !== '';
17821
- const anchorMode = this.isAnchorMode;
17822
19548
  const divTrigger = trigger === 'hover'
17823
- ? hoverTrigger
17824
- : anchorMode || !hasLabel
17825
- ? { onClick: toggleTooltip }
17826
- : {};
17827
- const buttonClickTrigger = trigger === 'click' && !anchorMode && hasLabel ? { onSdClick: toggleTooltip } : {};
17828
- const triggerClasses = ['sd-tooltip-trigger', this.sdClass, this.triggerClass]
19549
+ ? {
19550
+ onMouseEnter: () => this.openTooltip(),
19551
+ onMouseLeave: () => !this.useClose && this.startHideTimer(),
19552
+ }
19553
+ : { onClick: toggleTooltip };
19554
+ const triggerClasses = ['sd-tooltip-trigger', this.triggerClassName]
17829
19555
  .filter(c => c !== undefined && c !== '')
17830
19556
  .join(' ');
17831
- // anchor 모드에서는 slot 을 트리거로 쓰므로 본문은 message 로 받습니다.
19557
+ // 본문: message 가 있으면 각 줄을 innerHTML 로, 없으면 default slot 캡처 내용 사용
17832
19558
  const bodyHTML = this.message && this.message.length > 0
17833
19559
  ? this.message.map(line => `<div>${line}</div>`).join('')
17834
19560
  : this.slotContentHTML;
17835
- return (hAsync(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, hAsync("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
19561
+ return (hAsync(Fragment, { key: 'd5854a26d23173e2c3493d301b0befefccd25cac' }, hAsync("div", { key: '996d9ca989e7032f86ea3744b878b596e5947d15', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, this.isAnchorMode ? (hAsync("slot", { name: "anchor" })) : (hAsync("sd-icon", { name: icon, size: this.iconSize ?? 12, color: color, "aria-label": this.ariaLabel || undefined, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '5583e344bac78edbd353c759f187c387823a4304', parentRef: this.triggerEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '446e2fbf5e0e26901e635081a1e1100c7bfb8106', ref: el => (this.menuEl = el), class: {
17836
19562
  'sd-floating-menu': true,
17837
19563
  [`sd-floating-menu--${tooltipType}`]: true,
17838
19564
  [`sd-floating-menu--${placement}`]: true,
@@ -17840,7 +19566,7 @@ class SdTooltip {
17840
19566
  }, style: {
17841
19567
  '--sd-floating-bg': typeConfig.bg,
17842
19568
  '--sd-floating-content': typeConfig.content,
17843
- }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), hAsync("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
19569
+ }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: '0ccae56e8e88cf2ca33eeb4780fbfabd9fa33a99', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: 'e10701628f3cb708f89fad5f910475edc30e0e50' })), hAsync("div", { key: '3cbedf1225e4cc5bf3fad45754b7ab663e9ab5f2', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '90198241c12483bb8db4d13d5ba73ea6d3765574', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
17844
19570
  }
17845
19571
  static get style() { return sdTooltipCss(); }
17846
19572
  static get cmpMeta() { return {
@@ -17853,17 +19579,11 @@ class SdTooltip {
17853
19579
  "tooltipType": [1, "tooltip-type"],
17854
19580
  "icon": [1],
17855
19581
  "iconSize": [2, "icon-size"],
17856
- "label": [1],
17857
- "name": [1],
17858
- "rightIcon": [1, "right-icon"],
17859
19582
  "ariaLabel": [1, "aria-label"],
17860
19583
  "disabled": [4],
17861
- "type": [1],
17862
19584
  "useClose": [4, "use-close"],
17863
- "sdClass": [1, "sd-class"],
17864
19585
  "message": [16],
17865
- "triggerClass": [1, "trigger-class"],
17866
- "triggerStyle": [1, "trigger-style"],
19586
+ "triggerClassName": [1, "trigger-class-name"],
17867
19587
  "showTooltip": [32],
17868
19588
  "slotContentHTML": [32],
17869
19589
  "show": [64],
@@ -17916,16 +19636,23 @@ registerComponents([
17916
19636
  SdRadio,
17917
19637
  SdRadioButton,
17918
19638
  SdRadioGroup,
19639
+ SdScrollArea,
17919
19640
  SdSelect,
17920
19641
  SdSelectListItem,
17921
19642
  SdSelectListItemSearch,
17922
19643
  SdSelectListbox,
17923
19644
  SdSelectTrigger,
19645
+ SdStepper,
17924
19646
  SdSwitch,
17925
19647
  SdTabs,
17926
19648
  SdTag,
17927
19649
  SdTextLink,
17928
19650
  SdTextarea,
19651
+ SdTimePicker,
19652
+ SdTimePickerSelector,
19653
+ SdTimePickerTrigger,
19654
+ SdTimeRangePicker,
19655
+ SdTimeRangePickerSelector,
17929
19656
  SdToast,
17930
19657
  SdToastContainer,
17931
19658
  SdToggle,