@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.js CHANGED
@@ -134,7 +134,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
134
134
  const NAMESPACE = 'design-system';
135
135
  const BUILD = /* design-system */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
136
136
 
137
- const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-default-font-weight:400;--sd-system-typography-navigation-sm-default-font-size:12px;--sd-system-typography-navigation-sm-default-line-height:20px;--sd-system-typography-navigation-sm-default-text-decoration:none;--sd-system-typography-navigation-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-medium-font-weight:500;--sd-system-typography-navigation-sm-medium-font-size:12px;--sd-system-typography-navigation-sm-medium-line-height:20px;--sd-system-typography-navigation-sm-medium-text-decoration:none;--sd-system-typography-navigation-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-sm-bold-font-weight:700;--sd-system-typography-navigation-sm-bold-font-size:12px;--sd-system-typography-navigation-sm-bold-line-height:20px;--sd-system-typography-navigation-sm-bold-text-decoration:none;--sd-system-typography-navigation-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-md-bold-font-weight:700;--sd-system-typography-navigation-md-bold-font-size:13px;--sd-system-typography-navigation-md-bold-line-height:22px;--sd-system-typography-navigation-md-bold-text-decoration:none;--sd-system-typography-navigation-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-medium-font-weight:500;--sd-system-typography-navigation-lg-medium-font-size:14px;--sd-system-typography-navigation-lg-medium-line-height:24px;--sd-system-typography-navigation-lg-medium-text-decoration:none;--sd-system-typography-navigation-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-navigation-lg-bold-font-weight:700;--sd-system-typography-navigation-lg-bold-font-size:14px;--sd-system-typography-navigation-lg-bold-line-height:24px;--sd-system-typography-navigation-lg-bold-text-decoration:none;--sd-system-typography-table-header-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-header-font-weight:500;--sd-system-typography-table-header-font-size:12px;--sd-system-typography-table-header-line-height:20px;--sd-system-typography-table-header-text-decoration:none;--sd-system-typography-table-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-body-font-weight:400;--sd-system-typography-table-body-font-size:12px;--sd-system-typography-table-body-line-height:20px;--sd-system-typography-table-body-text-decoration:none;--sd-system-typography-table-accent-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-table-accent-font-weight:700;--sd-system-typography-table-accent-font-size:12px;--sd-system-typography-table-accent-line-height:20px;--sd-system-typography-table-accent-text-decoration:none;--sd-system-size-control-xs-height:24px;--sd-system-size-control-sm-height:28px;--sd-system-size-control-md-height:36px;--sd-system-size-control-lg-height:62px;--sd-system-size-icon-xxxs:8px;--sd-system-size-icon-xxs:10px;--sd-system-size-icon-xs:12px;--sd-system-size-icon-sm:16px;--sd-system-size-icon-md:20px;--sd-system-size-icon-lg:24px;--sd-system-size-icon-xl:32px;--sd-system-size-feedback-arrow-width:16px;--sd-system-size-feedback-arrow-height:12px;--sd-system-size-feedback-xs-height:20px;--sd-system-size-feedback-sm-height:24px;--sd-system-size-feedback-md-height:28px;--sd-system-size-field-control:16px;--sd-system-size-field-icon:12px;--sd-system-size-field-sm-height:28px;--sd-system-size-field-md-height:36px;--sd-system-size-navigation-lg-height:44px;--sd-system-size-navigation-md-height:36px;--sd-system-size-navigation-gnb-topbar-height:56px;--sd-system-size-table-height-xs:32px;--sd-system-size-table-height-sm:36px;--sd-system-size-table-height-md:44px;--sd-system-space-control-xs-padding-x:8px;--sd-system-space-control-xs-gap:4px;--sd-system-space-control-sm-padding-x:12px;--sd-system-space-control-sm-gap:6px;--sd-system-space-control-md-padding-x:20px;--sd-system-space-control-md-gap:8px;--sd-system-space-control-lg-padding-x:28px;--sd-system-space-control-lg-gap:12px;--sd-system-space-feedback-xs-padding-x:6px;--sd-system-space-feedback-xs-gap:4px;--sd-system-space-feedback-sm-padding-x:8px;--sd-system-space-feedback-sm-gap:6px;--sd-system-space-feedback-md-padding-x:12px;--sd-system-space-feedback-md-gap:8px;--sd-system-space-feedback-lg-padding-x:16px;--sd-system-space-feedback-lg-gap:12px;--sd-system-space-stack-gap-text-tight:2px;--sd-system-space-stack-gap-text-normal:4px;--sd-system-space-stack-gap-text-relaxed:8px;--sd-system-space-stack-gap-element-tight:4px;--sd-system-space-stack-gap-element-normal:8px;--sd-system-space-stack-gap-element-relaxed:12px;--sd-system-space-stack-gap-element-wide:16px;--sd-system-space-stack-gap-element-spacious:24px;--sd-system-space-field-sm-padding-x:12px;--sd-system-space-field-sm-padding-y:4px;--sd-system-space-field-sm-container-gap:8px;--sd-system-space-field-sm-gap:12px;--sd-system-space-field-md-padding-x:16px;--sd-system-space-field-md-padding-y:8px;--sd-system-space-field-md-container-gap:12px;--sd-system-space-field-md-gap:16px;--sd-system-space-navigation-lg-padding-x:32px;--sd-system-space-navigation-md-padding-x:24px;--sd-system-space-table-padding-sm:8px;--sd-system-space-table-padding-md:16px;--sd-system-space-action-gap:16px;--sd-system-space-overlay-padding-x-sm:20px;--sd-system-space-overlay-padding-x-md:24px;--sd-system-space-overlay-padding-y-sm:8px;--sd-system-space-panel-gap:12px;--sd-system-radius-control-sm:4px;--sd-system-radius-control-md:6px;--sd-system-radius-feedback-xs-square:6px;--sd-system-radius-feedback-sm-square:8px;--sd-system-radius-feedback-pill:9999px;--sd-system-radius-field-sm:4px;--sd-system-radius-field-md:6px;--sd-system-radius-navigation:6px;--sd-system-border-width-control-default:1px;--sd-system-border-width-field-default:1px;--sd-system-border-width-navigation-default:1px;--sd-system-color-bg-screen:#EEEEEE;--sd-system-color-bg-frame:#FFFFFF;--sd-system-color-bg-brand:#025497;--sd-system-color-bg-subtle:#1F8AE1;--sd-system-color-bg-accent-default:#0075FF;--sd-system-color-bg-accent-light:#F5FAFF;--sd-system-color-bg-accent-light-default:#2D8DFF;--sd-system-color-bg-accent-light-light:#F5FAFF;--sd-system-color-bg-accent-bright-default:#D9EAFF;--sd-system-color-bg-accent-bright-light:#F5FAFF;--sd-system-color-bg-deep:#07284A;--sd-system-color-bg-danger-default:#E30000;--sd-system-color-bg-danger-light:#FCEFEF;--sd-system-color-bg-danger-light-default:#FB4444;--sd-system-color-bg-danger-light-light:#FCEFEF;--sd-system-color-bg-warning:#FF6B00;--sd-system-color-bg-caution:#FFC700;--sd-system-color-bg-progress:#0075FF;--sd-system-color-bg-success-default:#00973C;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-success-light:#12B553;--sd-system-color-bg-neutral-light:#F6F6F6;--sd-system-color-bg-neutral-bright:#F9F9F9;--sd-system-color-bg-table-header:#F5FAFF;--sd-system-color-fg-primary:#222222;--sd-system-color-fg-secondary:#555555;--sd-system-color-fg-tertiary:#888888;--sd-system-color-fg-quaternary:#AAAAAA;--sd-system-color-fg-brand:#005CC9;--sd-system-color-fg-subtle-warm:#066D9B;--sd-system-color-fg-subtle-cool:#025497;--sd-system-color-fg-deep:#004290;--sd-system-color-fg-success:#00973C;--sd-system-color-fg-danger-light:#FB4444;--sd-system-color-fg-accent:#0075FF;--sd-system-color-fg-danger:#E30000;--sd-system-color-fg-warning:#FF6B00;--sd-system-color-fg-inverse:#FFFFFF;--sd-system-color-disabled-bg:#E1E1E1;--sd-system-color-disabled-text:#888888;--sd-system-color-disabled-icon:#BBBBBB;--sd-system-color-disabled-border:#CCCCCC;--sd-system-color-link-accent:#006AC1;--sd-system-color-divider-default:#E1E1E1;--sd-system-color-border-default:#E1E1E1;--sd-system-color-border-accent:#0075FF;--sd-system-color-border-accent-light:#93C4FF;--sd-system-color-border-danger:#FB4444;--sd-system-color-border-success:#12B553;--sd-system-color-red-strong:#FB4444;--sd-system-color-red-subtle:#FCEFEF;--sd-system-color-orange-strong:#FF6B00;--sd-system-color-orange-subtle:#FEF1EA;--sd-system-color-yellow-strong:#916C0D;--sd-system-color-yellow-moderate:#FFC700;--sd-system-color-yellow-subtle:#FFF7DD;--sd-system-color-green-strong:#00973C;--sd-system-color-green-subtle:#E8F9EF;--sd-system-color-blue-strong:#0075FF;--sd-system-color-blue-subtle:#E6F1FF;--sd-system-color-darkblue-strong:#006AC1;--sd-system-color-darkblue-subtle:#EAF5FE;--sd-system-color-indigo-strong:#004290;--sd-system-color-indigo-subtle:#EFF6FF;--sd-system-color-grey-strong:#737373;--sd-system-color-grey-subtle:#EEEEEE;--sd-system-color-field-bg-default:#FFFFFF;--sd-system-color-field-bg-hover:#0075FF;--sd-system-color-field-bg-read-only:#EEEEEE;--sd-system-color-field-border-default:#AAAAAA;--sd-system-color-field-border-focus:#0075FF;--sd-system-color-field-border-hover:#0075FF;--sd-system-color-field-border-danger:#FB4444;--sd-system-color-field-border-success:#12B553;--sd-system-color-field-text-default:#222222;--sd-system-color-field-text-placeholder:#AAAAAA;--sd-system-color-field-text-read-only:#555555;--sd-system-color-field-icon-default:#888888;--sd-system-color-control-bg-inverse-hover:#0075FF;--sd-system-color-navigation-gnb-bg-dark:#001B39;--sd-system-shadow-spread-sm-x:0px;--sd-system-shadow-spread-sm-y:0px;--sd-system-shadow-spread-sm-blur:8px;--sd-system-shadow-spread-sm-spread:0px;--sd-system-shadow-spread-sm-color:rgba(34,34,34,0.1);--sd-system-shadow-spread-sm-type:dropShadow;--sd-system-shadow-spread-md-x:0px;--sd-system-shadow-spread-md-y:0px;--sd-system-shadow-spread-md-blur:24px;--sd-system-shadow-spread-md-spread:0px;--sd-system-shadow-spread-md-color:rgba(34,34,34,0.2);--sd-system-shadow-spread-md-type:dropShadow;--sd-system-shadow-focus-x:0px;--sd-system-shadow-focus-y:0px;--sd-system-shadow-focus-blur:8px;--sd-system-shadow-focus-spread:0px;--sd-system-shadow-focus-color:rgba(0,117,255,0.25);--sd-system-shadow-focus-type:dropShadow;--sd-button-button-xs-height:24px;--sd-button-button-xs-padding-x:8px;--sd-button-button-xs-gap:4px;--sd-button-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-xs-typography-font-size:12px;--sd-button-button-xs-typography-font-weight:500;--sd-button-button-xs-typography-text-decoration:none;--sd-button-button-xs-typography-line-height:20px;--sd-button-button-xs-icon:12px;--sd-button-button-sm-height:28px;--sd-button-button-sm-padding-x:12px;--sd-button-button-sm-gap:6px;--sd-button-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-sm-typography-font-size:12px;--sd-button-button-sm-typography-font-weight:500;--sd-button-button-sm-typography-text-decoration:none;--sd-button-button-sm-typography-line-height:20px;--sd-button-button-sm-icon:16px;--sd-button-button-md-height:36px;--sd-button-button-md-padding-x:20px;--sd-button-button-md-gap:8px;--sd-button-button-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-md-typography-font-size:16px;--sd-button-button-md-typography-font-weight:500;--sd-button-button-md-typography-text-decoration:none;--sd-button-button-md-typography-line-height:26px;--sd-button-button-md-icon:20px;--sd-button-button-lg-height:62px;--sd-button-button-lg-padding-x:28px;--sd-button-button-lg-gap:12px;--sd-button-button-lg-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-button-button-lg-typography-font-size:18px;--sd-button-button-lg-typography-font-weight:500;--sd-button-button-lg-typography-text-decoration:none;--sd-button-button-lg-typography-line-height:30px;--sd-button-button-lg-icon:24px;--sd-button-button-radius-sm:4px;--sd-button-button-radius-md:6px;--sd-button-button-border-width-default:1px;--sd-button-button-border-disabled:#CCCCCC;--sd-button-button-icon-only-xs-width:24px;--sd-button-button-icon-only-sm-width:28px;--sd-button-button-icon-only-md-width:36px;--sd-button-button-icon-only-lg-width:62px;--sd-button-button-bg-disabled:#E1E1E1;--sd-button-button-text-disabled:#888888;--sd-button-button-icon-disabled:#BBBBBB;--sd-button-button-brand-strong-bg-default:#025497;--sd-button-button-brand-strong-bg-hover:#004177;--sd-button-button-brand-strong-content:#FFFFFF;--sd-button-button-brand-subtle-bg-default:#1F8AE1;--sd-button-button-brand-subtle-bg-hover:#006AC1;--sd-button-button-brand-subtle-content:#FFFFFF;--sd-button-button-brand-outline-bg-default:#FFFFFF;--sd-button-button-brand-outline-bg-hover:#EAF5FE;--sd-button-button-brand-outline-border:#025497;--sd-button-button-brand-outline-content:#025497;--sd-button-button-dropdown-brand-strong-split:#006AC1;--sd-button-button-dropdown-brand-subtle-split:#5CB0F3;--sd-button-button-dropdown-danger-strong-split:#FF7C7C;--sd-button-button-dropdown-xs-arrow:12px;--sd-button-button-dropdown-xs-gap:6px;--sd-button-button-dropdown-sm-arrow:12px;--sd-button-button-dropdown-sm-gap:8px;--sd-button-button-dropdown-md-arrow:16px;--sd-button-button-dropdown-md-gap:16px;--sd-button-button-neutral-outline-bg-default:#FFFFFF;--sd-button-button-neutral-outline-bg-hover:#EEEEEE;--sd-button-button-neutral-outline-border:#888888;--sd-button-button-neutral-outline-text:#222222;--sd-button-button-neutral-outline-icon:#555555;--sd-button-button-danger-strong-bg-default:#E30000;--sd-button-button-danger-strong-bg-hover:#AD0000;--sd-button-button-danger-strong-content:#FFFFFF;--sd-button-button-danger-outline-bg-default:#FFFFFF;--sd-button-button-danger-outline-bg-hover:#FCEFEF;--sd-button-button-danger-outline-border:#E30000;--sd-button-button-danger-outline-content:#E30000;--sd-button-button-group-gap-normal:8px;--sd-button-button-group-gap-wide:12px;--sd-ghost-button-ghost-button-xxs-size:16px;--sd-ghost-button-ghost-button-xxs-icon:12px;--sd-ghost-button-ghost-button-xs-size:24px;--sd-ghost-button-ghost-button-xs-icon:16px;--sd-ghost-button-ghost-button-sm-size:28px;--sd-ghost-button-ghost-button-sm-icon:20px;--sd-ghost-button-ghost-button-md-size:36px;--sd-ghost-button-ghost-button-md-icon:24px;--sd-ghost-button-ghost-button-lg-size:62px;--sd-ghost-button-ghost-button-lg-icon:32px;--sd-ghost-button-ghost-button-radius-sm:4px;--sd-ghost-button-ghost-button-radius-md:6px;--sd-ghost-button-ghost-button-hover-opacity:5%;--sd-ghost-button-ghost-button-icon-disabled:#BBBBBB;--sd-ghost-button-ghost-button-default-content:#888888;--sd-ghost-button-ghost-button-default-hover-bg:#222222;--sd-ghost-button-ghost-button-danger-content:#E30000;--sd-ghost-button-ghost-button-danger-hover-bg:#E30000;--sd-ghost-button-ghost-button-action-content:#025497;--sd-ghost-button-ghost-button-action-hover-bg:#0075FF;--sd-ghost-button-ghost-button-inverse-content:#FFFFFF;--sd-ghost-button-ghost-button-inverse-disabled:#E1E1E1;--sd-ghost-button-ghost-button-inverse-hover-bg:#FFFFFF;--sd-ghost-button-ghost-button-group-gap:8px;--sd-text-link-text-link-sm-gap:4px;--sd-text-link-text-link-sm-icon:16px;--sd-text-link-text-link-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-default-font-size:12px;--sd-text-link-text-link-sm-typography-default-font-weight:500;--sd-text-link-text-link-sm-typography-default-text-decoration:none;--sd-text-link-text-link-sm-typography-default-line-height:20px;--sd-text-link-text-link-sm-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-sm-typography-underline-font-size:12px;--sd-text-link-text-link-sm-typography-underline-font-weight:500;--sd-text-link-text-link-sm-typography-underline-text-decoration:underline;--sd-text-link-text-link-sm-typography-underline-line-height:20px;--sd-text-link-text-link-md-gap:8px;--sd-text-link-text-link-md-icon:16px;--sd-text-link-text-link-md-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-default-font-size:14px;--sd-text-link-text-link-md-typography-default-font-weight:500;--sd-text-link-text-link-md-typography-default-text-decoration:none;--sd-text-link-text-link-md-typography-default-line-height:24px;--sd-text-link-text-link-md-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-md-typography-underline-font-size:14px;--sd-text-link-text-link-md-typography-underline-font-weight:500;--sd-text-link-text-link-md-typography-underline-text-decoration:underline;--sd-text-link-text-link-md-typography-underline-line-height:24px;--sd-text-link-text-link-content-default:#222222;--sd-text-link-text-link-content-disabled:#888888;--sd-text-link-text-link-icon-default:#006AC1;--sd-text-link-text-link-icon-disabled:#BBBBBB;--sd-text-link-text-link-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-default-font-size:16px;--sd-text-link-text-link-lg-typography-default-font-weight:500;--sd-text-link-text-link-lg-typography-default-text-decoration:none;--sd-text-link-text-link-lg-typography-default-line-height:26px;--sd-text-link-text-link-lg-typography-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-text-link-text-link-lg-typography-underline-font-size:16px;--sd-text-link-text-link-lg-typography-underline-font-weight:500;--sd-text-link-text-link-lg-typography-underline-text-decoration:underline;--sd-text-link-text-link-lg-typography-underline-line-height:26px;--sd-text-link-text-link-lg-gap:8px;--sd-text-link-text-link-lg-icon:20px;--sd-text-link-text-link-group-horizontal-normal:16px;--sd-text-link-text-link-group-horizontal-wide:24px;--sd-text-link-text-link-group-vertical-normal:4px;--sd-switch-switch-width:32px;--sd-switch-switch-height:20px;--sd-switch-switch-padding-x-y:2px;--sd-switch-switch-radius:9999px;--sd-switch-switch-knob-size:16px;--sd-switch-switch-knob-default:#FFFFFF;--sd-switch-switch-knob-disabled:#EEEEEE;--sd-switch-switch-bg-on:#0075FF;--sd-switch-switch-bg-off:#CCCCCC;--sd-switch-switch-bg-disabled-on:#BBDAFF;--sd-switch-switch-bg-disabled-off:#E1E1E1;--sd-switch-switch-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-switch-switch-label-typography-font-weight:500;--sd-switch-switch-label-typography-font-size:12px;--sd-switch-switch-label-typography-text-decoration:none;--sd-switch-switch-label-typography-line-height:20px;--sd-switch-switch-gap:6px;--sd-toggle-toggle-height:28px;--sd-toggle-toggle-padding-x:12px;--sd-toggle-toggle-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toggle-toggle-typography-font-size:14px;--sd-toggle-toggle-typography-font-weight:500;--sd-toggle-toggle-typography-text-decoration:none;--sd-toggle-toggle-typography-line-height:24px;--sd-toggle-toggle-radius:9999px;--sd-toggle-toggle-border-width:1px;--sd-toggle-toggle-border-default:#CCCCCC;--sd-toggle-toggle-border-select:#0075FF;--sd-toggle-toggle-border-disabled:#CCCCCC;--sd-toggle-toggle-bg-default:#FFFFFF;--sd-toggle-toggle-bg-hover:#0075FF;--sd-toggle-toggle-bg-select:#FFFFFF;--sd-toggle-toggle-bg-disabled:#E1E1E1;--sd-toggle-toggle-content-default:#555555;--sd-toggle-toggle-content-hover:#FFFFFF;--sd-toggle-toggle-content-select:#0075FF;--sd-toggle-toggle-content-disabled:#888888;--sd-toggle-toggle-group-gap:8px;--sd-checkbox-checkbox-size:16px;--sd-checkbox-checkbox-radius:2px;--sd-checkbox-checkbox-border-width:1px;--sd-checkbox-checkbox-gap:8px;--sd-checkbox-checkbox-icon:12px;--sd-checkbox-checkbox-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-default-font-weight:400;--sd-checkbox-checkbox-typography-default-font-size:12px;--sd-checkbox-checkbox-typography-default-line-height:20px;--sd-checkbox-checkbox-typography-default-text-decoration:none;--sd-checkbox-checkbox-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-checkbox-checkbox-typography-selected-font-weight:500;--sd-checkbox-checkbox-typography-selected-font-size:12px;--sd-checkbox-checkbox-typography-selected-text-decoration:none;--sd-checkbox-checkbox-typography-selected-line-height:20px;--sd-checkbox-checkbox-unchecked-bg-default:#FFFFFF;--sd-checkbox-checkbox-unchecked-bg-hover:#D9EAFF;--sd-checkbox-checkbox-unchecked-border-default:#AAAAAA;--sd-checkbox-checkbox-unchecked-border-hover:#0075FF;--sd-checkbox-checkbox-checked-bg-default:#0075FF;--sd-checkbox-checkbox-checked-icon-default:#FFFFFF;--sd-checkbox-checkbox-checked-icon-disabled:#BBBBBB;--sd-checkbox-checkbox-checked-icon-inverse:#FFFFFF;--sd-checkbox-checkbox-checked-border-inverse:#FFFFFF;--sd-checkbox-checkbox-label-default:#222222;--sd-checkbox-checkbox-label-inverse:#FFFFFF;--sd-checkbox-checkbox-label-disabled:#888888;--sd-checkbox-checkbox-bg-disabled:#E1E1E1;--sd-checkbox-checkbox-border-disabled:#CCCCCC;--sd-checkbox-checkbox-group-gap-horizontal:24px;--sd-checkbox-checkbox-group-gap-vertical:8px;--sd-radio-radio-size:16px;--sd-radio-radio-radius:9999px;--sd-radio-radio-border-width:1px;--sd-radio-radio-gap:8px;--sd-radio-radio-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-default-font-weight:400;--sd-radio-radio-typography-default-font-size:12px;--sd-radio-radio-typography-default-line-height:20px;--sd-radio-radio-typography-default-text-decoration:none;--sd-radio-radio-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-radio-typography-selected-font-weight:500;--sd-radio-radio-typography-selected-font-size:12px;--sd-radio-radio-typography-selected-text-decoration:none;--sd-radio-radio-typography-selected-line-height:20px;--sd-radio-radio-bg-default:#FFFFFF;--sd-radio-radio-bg-disabled:#E1E1E1;--sd-radio-radio-bg-hover:#D9EAFF;--sd-radio-radio-border-default:#AAAAAA;--sd-radio-radio-border-hover:#0075FF;--sd-radio-radio-border-active:#0075FF;--sd-radio-radio-border-disabled:#CCCCCC;--sd-radio-radio-dot-default:#0075FF;--sd-radio-radio-dot-disabled:#CCCCCC;--sd-radio-radio-dot-size:10px;--sd-radio-radio-label-default:#222222;--sd-radio-radio-label-disabled:#888888;--sd-radio-radio-group-gap-horizontal:24px;--sd-radio-radio-group-gap-vertical:8px;--sd-radio-button-radio-button-xs-height:24px;--sd-radio-button-radio-button-xs-padding-x:8px;--sd-radio-button-radio-button-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-xs-typography-font-size:12px;--sd-radio-button-radio-button-xs-typography-font-weight:500;--sd-radio-button-radio-button-xs-typography-text-decoration:none;--sd-radio-button-radio-button-xs-typography-line-height:20px;--sd-radio-button-radio-button-sm-height:28px;--sd-radio-button-radio-button-sm-padding-x:12px;--sd-radio-button-radio-button-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-radio-button-radio-button-sm-typography-font-size:12px;--sd-radio-button-radio-button-sm-typography-font-weight:500;--sd-radio-button-radio-button-sm-typography-text-decoration:none;--sd-radio-button-radio-button-sm-typography-line-height:20px;--sd-radio-button-radio-button-radius:4px;--sd-radio-button-radio-button-border-width:1px;--sd-radio-button-radio-button-border-default:#CCCCCC;--sd-radio-button-radio-button-border-select:#0075FF;--sd-radio-button-radio-button-border-disabled:#CCCCCC;--sd-radio-button-radio-button-bg-default:#FFFFFF;--sd-radio-button-radio-button-bg-hover:#0075FF;--sd-radio-button-radio-button-bg-select:#FFFFFF;--sd-radio-button-radio-button-bg-disabled:#E1E1E1;--sd-radio-button-radio-button-content-default:#555555;--sd-radio-button-radio-button-content-hover:#FFFFFF;--sd-radio-button-radio-button-content-select:#0075FF;--sd-radio-button-radio-button-content-disabled:#888888;--sd-radio-button-radio-button-group-gap:-1px;--sd-list-item-list-item-padding-y:4px;--sd-list-item-list-item-padding-right:12px;--sd-list-item-list-item-gap:8px;--sd-list-item-list-item-padding-left-depth1:12px;--sd-list-item-list-item-padding-left-depth2:20px;--sd-list-item-list-item-padding-left-depth3:28px;--sd-list-item-list-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-default-font-weight:400;--sd-list-item-list-item-typography-default-font-size:12px;--sd-list-item-list-item-typography-default-line-height:20px;--sd-list-item-list-item-typography-default-text-decoration:none;--sd-list-item-list-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-typography-selected-font-weight:700;--sd-list-item-list-item-typography-selected-font-size:12px;--sd-list-item-list-item-typography-selected-text-decoration:none;--sd-list-item-list-item-typography-selected-line-height:20px;--sd-list-item-list-item-bg-default:#FFFFFF;--sd-list-item-list-item-bg-hover:#0075FF;--sd-list-item-list-item-content-default:#222222;--sd-list-item-list-item-content-hover:#FFFFFF;--sd-list-item-list-item-content-disabled:#888888;--sd-list-item-list-item-content-selected:#0075FF;--sd-list-item-list-item-indeterminate-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-indeterminate-typography-font-weight:700;--sd-list-item-list-item-indeterminate-typography-font-size:12px;--sd-list-item-list-item-indeterminate-typography-text-decoration:none;--sd-list-item-list-item-indeterminate-typography-line-height:20px;--sd-list-item-list-item-depth1-bg-default:#EFF6FF;--sd-list-item-list-item-depth1-bg-disabled:#EEEEEE;--sd-list-item-list-item-depth1-border-color:#E1E1E1;--sd-list-item-list-item-depth1-border-width:1px;--sd-list-item-list-item-depth1-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth1-title-typography-font-weight:700;--sd-list-item-list-item-depth1-title-typography-font-size:12px;--sd-list-item-list-item-depth1-title-typography-text-decoration:none;--sd-list-item-list-item-depth1-title-typography-line-height:20px;--sd-list-item-list-item-depth2-middle-bg:#F6F6F6;--sd-list-item-list-item-depth2-middle-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-depth2-middle-title-typography-font-weight:500;--sd-list-item-list-item-depth2-middle-title-typography-font-size:12px;--sd-list-item-list-item-depth2-middle-title-typography-text-decoration:none;--sd-list-item-list-item-depth2-middle-title-typography-line-height:20px;--sd-list-item-list-item-count-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-list-item-list-item-count-typography-font-weight:500;--sd-list-item-list-item-count-typography-font-size:12px;--sd-list-item-list-item-count-typography-text-decoration:none;--sd-list-item-list-item-count-typography-line-height:20px;--sd-list-item-list-item-count-color:#888888;--sd-list-box-list-box-radius:4px;--sd-list-box-list-box-bg:#FFFFFF;--sd-list-box-list-box-chip-padding-x-y:8px;--sd-list-box-list-box-chip-gap:8px;--sd-select-select-sm-height:28px;--sd-select-select-sm-radius:4px;--sd-select-select-sm-border-width:1px;--sd-select-select-sm-padding-x:12px;--sd-select-select-sm-gap:8px;--sd-select-select-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-sm-typography-font-weight:400;--sd-select-select-sm-typography-font-size:12px;--sd-select-select-sm-typography-line-height:20px;--sd-select-select-sm-typography-text-decoration:none;--sd-select-select-sm-icon:16px;--sd-select-select-md-height:36px;--sd-select-select-md-radius:6px;--sd-select-select-md-border-width:1px;--sd-select-select-md-padding-x:16px;--sd-select-select-md-gap:12px;--sd-select-select-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-select-select-md-typography-font-weight:400;--sd-select-select-md-typography-font-size:14px;--sd-select-select-md-typography-text-decoration:none;--sd-select-select-md-typography-line-height:24px;--sd-select-select-md-icon:16px;--sd-select-select-icon-default:#888888;--sd-select-select-icon-disabled:#BBBBBB;--sd-select-select-border-default:#AAAAAA;--sd-select-select-border-hover:#0075FF;--sd-select-select-border-danger:#FB4444;--sd-select-select-border-disabled:#CCCCCC;--sd-select-select-bg-default:#FFFFFF;--sd-select-select-bg-disabled:#E1E1E1;--sd-select-select-text-default:#222222;--sd-select-select-text-disabled:#888888;--sd-field-field-label-sm-height:28px;--sd-field-field-label-sm-gap:6px;--sd-field-field-label-sm-icon:16px;--sd-field-field-label-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-sm-typography-font-weight:700;--sd-field-field-label-sm-typography-font-size:12px;--sd-field-field-label-sm-typography-text-decoration:none;--sd-field-field-label-sm-typography-line-height:20px;--sd-field-field-label-md-height:36px;--sd-field-field-label-md-gap:8px;--sd-field-field-label-md-icon:16px;--sd-field-field-label-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-label-md-typography-font-weight:700;--sd-field-field-label-md-typography-font-size:14px;--sd-field-field-label-md-typography-text-decoration:none;--sd-field-field-label-md-typography-line-height:24px;--sd-field-field-addon-label-height:28px;--sd-field-field-addon-label-gap:6px;--sd-field-field-addon-label-padding-x:12px;--sd-field-field-addon-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-addon-label-typography-font-weight:500;--sd-field-field-addon-label-typography-font-size:12px;--sd-field-field-addon-label-typography-text-decoration:none;--sd-field-field-addon-label-typography-line-height:20px;--sd-field-field-addon-label-bg:#F6F6F6;--sd-field-field-addon-label-border-default:#AAAAAA;--sd-field-field-addon-label-border-disabled:#CCCCCC;--sd-field-field-addon-label-border-width:1px;--sd-field-field-hint-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-hint-typography-font-weight:400;--sd-field-field-hint-typography-font-size:12px;--sd-field-field-hint-typography-line-height:20px;--sd-field-field-hint-typography-text-decoration:none;--sd-field-field-hint-color:#555555;--sd-field-field-error-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-field-field-error-message-typography-font-weight:400;--sd-field-field-error-message-typography-font-size:12px;--sd-field-field-error-message-typography-line-height:20px;--sd-field-field-error-message-typography-text-decoration:none;--sd-field-field-error-message-color:#E30000;--sd-field-field-contents-gap:4px;--sd-textinput-textinput-sm-height:28px;--sd-textinput-textinput-sm-padding-x:12px;--sd-textinput-textinput-sm-padding-y:4px;--sd-textinput-textinput-sm-gap:8px;--sd-textinput-textinput-sm-radius:4px;--sd-textinput-textinput-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-sm-typography-font-weight:400;--sd-textinput-textinput-sm-typography-font-size:12px;--sd-textinput-textinput-sm-typography-line-height:20px;--sd-textinput-textinput-sm-typography-text-decoration:none;--sd-textinput-textinput-md-padding-x:16px;--sd-textinput-textinput-md-padding-y:8px;--sd-textinput-textinput-md-height:36px;--sd-textinput-textinput-md-gap:12px;--sd-textinput-textinput-md-radius:6px;--sd-textinput-textinput-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-textinput-textinput-md-typography-font-weight:400;--sd-textinput-textinput-md-typography-font-size:14px;--sd-textinput-textinput-md-typography-text-decoration:none;--sd-textinput-textinput-md-typography-line-height:24px;--sd-textinput-textinput-border-width:1px;--sd-textinput-textinput-border-default:#AAAAAA;--sd-textinput-textinput-border-focus:#0075FF;--sd-textinput-textinput-border-danger:#FB4444;--sd-textinput-textinput-border-success:#12B553;--sd-textinput-textinput-border-disabled:#CCCCCC;--sd-textinput-textinput-bg-default:#FFFFFF;--sd-textinput-textinput-bg-disabled:#E1E1E1;--sd-textinput-textinput-bg-barcode:#FAFAA1;--sd-textinput-textinput-text-default:#222222;--sd-textinput-textinput-text-placeholder:#AAAAAA;--sd-textinput-textinput-text-disabled:#888888;--sd-textinput-textinput-size-icon:16px;--sd-textinput-textinput-icon-default:#888888;--sd-textinput-textinput-unit-color:#888888;--sd-textinput-textinput-resizer-size:12px;--sd-textinput-textinput-resizer-color:#AAAAAA;--sd-number-input-number-input-sm-height:28px;--sd-number-input-number-input-sm-padding-x:6px;--sd-number-input-number-input-sm-radius:4px;--sd-number-input-number-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-sm-typography-font-weight:400;--sd-number-input-number-input-sm-typography-font-size:12px;--sd-number-input-number-input-sm-typography-line-height:20px;--sd-number-input-number-input-sm-typography-text-decoration:none;--sd-number-input-number-input-sm-gap:4px;--sd-number-input-number-input-md-height:36px;--sd-number-input-number-input-md-padding-x:8px;--sd-number-input-number-input-md-radius:6px;--sd-number-input-number-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-number-input-number-input-md-typography-font-weight:400;--sd-number-input-number-input-md-typography-font-size:14px;--sd-number-input-number-input-md-typography-text-decoration:none;--sd-number-input-number-input-md-typography-line-height:24px;--sd-number-input-number-input-md-gap:6px;--sd-number-input-number-input-border-width:1px;--sd-number-input-number-input-border-default:#AAAAAA;--sd-number-input-number-input-border-focus:#0075FF;--sd-number-input-number-input-border-danger:#FB4444;--sd-number-input-number-input-border-success:#12B553;--sd-number-input-number-input-border-disabled:#CCCCCC;--sd-number-input-number-input-bg-default:#FFFFFF;--sd-number-input-number-input-bg-disabled:#E1E1E1;--sd-number-input-number-input-text-default:#222222;--sd-number-input-number-input-text-placeholder:#AAAAAA;--sd-number-input-number-input-text-disabled:#888888;--sd-number-input-number-input-stepper-sm-size:20px;--sd-number-input-number-input-stepper-md-size:24px;--sd-number-input-number-input-stepper-radius:4px;--sd-number-input-number-input-stepper-bg-default:#EFF6FF;--sd-number-input-number-input-stepper-bg-disabled:#EEEEEE;--sd-number-input-number-input-stepper-icon-default:#0075FF;--sd-number-input-number-input-stepper-icon-disabled:#BBBBBB;--sd-number-input-number-input-stepper-border-default:#93C4FF;--sd-chip-input-chip-input-sm-min-height:36px;--sd-chip-input-chip-input-sm-padding-x:12px;--sd-chip-input-chip-input-sm-padding-y:6px;--sd-chip-input-chip-input-sm-radius:4px;--sd-chip-input-chip-input-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-sm-typography-font-weight:400;--sd-chip-input-chip-input-sm-typography-font-size:12px;--sd-chip-input-chip-input-sm-typography-line-height:20px;--sd-chip-input-chip-input-sm-typography-text-decoration:none;--sd-chip-input-chip-input-md-min-height:40px;--sd-chip-input-chip-input-md-padding-x:16px;--sd-chip-input-chip-input-md-padding-y:8px;--sd-chip-input-chip-input-md-radius:6px;--sd-chip-input-chip-input-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-input-chip-input-md-typography-font-weight:400;--sd-chip-input-chip-input-md-typography-font-size:14px;--sd-chip-input-chip-input-md-typography-text-decoration:none;--sd-chip-input-chip-input-md-typography-line-height:24px;--sd-chip-input-chip-input-chip-gap:8px;--sd-chip-input-chip-input-border-width:1px;--sd-chip-input-chip-input-border-default:#AAAAAA;--sd-chip-input-chip-input-border-focus:#0075FF;--sd-chip-input-chip-input-border-disabled:#CCCCCC;--sd-chip-input-chip-input-bg-default:#FFFFFF;--sd-chip-input-chip-input-bg-disabled:#E1E1E1;--sd-chip-input-chip-input-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-sm-height:28px;--sd-filepicker-filepicker-sm-padding-x:12px;--sd-filepicker-filepicker-sm-gap:8px;--sd-filepicker-filepicker-sm-radius:4px;--sd-filepicker-filepicker-sm-border-width:1px;--sd-filepicker-filepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-sm-typography-font-weight:400;--sd-filepicker-filepicker-sm-typography-font-size:12px;--sd-filepicker-filepicker-sm-typography-line-height:20px;--sd-filepicker-filepicker-sm-typography-text-decoration:none;--sd-filepicker-filepicker-sm-icon:16px;--sd-filepicker-filepicker-md-height:36px;--sd-filepicker-filepicker-md-padding-x:16px;--sd-filepicker-filepicker-md-gap:12px;--sd-filepicker-filepicker-md-radius:6px;--sd-filepicker-filepicker-md-border-width:1px;--sd-filepicker-filepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-filepicker-filepicker-md-typography-font-weight:400;--sd-filepicker-filepicker-md-typography-font-size:14px;--sd-filepicker-filepicker-md-typography-text-decoration:none;--sd-filepicker-filepicker-md-typography-line-height:24px;--sd-filepicker-filepicker-md-icon:20px;--sd-filepicker-filepicker-border-default:#AAAAAA;--sd-filepicker-filepicker-border-disabled:#CCCCCC;--sd-filepicker-filepicker-bg-default:#FFFFFF;--sd-filepicker-filepicker-bg-disabled:#E1E1E1;--sd-filepicker-filepicker-text-default:#222222;--sd-filepicker-filepicker-text-placeholder:#AAAAAA;--sd-filepicker-filepicker-text-disabled:#888888;--sd-filepicker-filepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-sm-height:28px;--sd-datepicker-datepicker-sm-padding-x:12px;--sd-datepicker-datepicker-sm-gap:8px;--sd-datepicker-datepicker-sm-icon:16px;--sd-datepicker-datepicker-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-sm-typography-font-weight:400;--sd-datepicker-datepicker-sm-typography-font-size:12px;--sd-datepicker-datepicker-sm-typography-line-height:20px;--sd-datepicker-datepicker-sm-typography-text-decoration:none;--sd-datepicker-datepicker-sm-radius:4px;--sd-datepicker-datepicker-md-height:36px;--sd-datepicker-datepicker-md-padding-x:16px;--sd-datepicker-datepicker-md-gap:12px;--sd-datepicker-datepicker-md-icon:20px;--sd-datepicker-datepicker-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-md-typography-font-weight:400;--sd-datepicker-datepicker-md-typography-font-size:14px;--sd-datepicker-datepicker-md-typography-text-decoration:none;--sd-datepicker-datepicker-md-typography-line-height:24px;--sd-datepicker-datepicker-md-radius:6px;--sd-datepicker-datepicker-border-width:1px;--sd-datepicker-datepicker-border-default:#AAAAAA;--sd-datepicker-datepicker-border-focus:#0075FF;--sd-datepicker-datepicker-border-disabled:#CCCCCC;--sd-datepicker-datepicker-bg-default:#FFFFFF;--sd-datepicker-datepicker-bg-disabled:#E1E1E1;--sd-datepicker-datepicker-icon-default:#888888;--sd-datepicker-datepicker-icon-disabled:#BBBBBB;--sd-datepicker-datepicker-text-default:#222222;--sd-datepicker-datepicker-text-disabled:#888888;--sd-datepicker-datepicker-calendar-bg:#FFFFFF;--sd-datepicker-datepicker-calendar-padding-x-y:24px;--sd-datepicker-datepicker-calendar-gap:12px;--sd-datepicker-datepicker-calendar-radius:8px;--sd-datepicker-datepicker-calendar-header-gap:8px;--sd-datepicker-datepicker-calendar-header-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-header-typography-font-weight:500;--sd-datepicker-datepicker-calendar-header-typography-font-size:14px;--sd-datepicker-datepicker-calendar-header-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-header-typography-line-height:24px;--sd-datepicker-datepicker-calendar-week-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-week-typography-font-weight:400;--sd-datepicker-datepicker-calendar-week-typography-font-size:12px;--sd-datepicker-datepicker-calendar-week-typography-line-height:20px;--sd-datepicker-datepicker-calendar-week-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-week-color:#888888;--sd-datepicker-datepicker-calendar-grid-row-gap:4px;--sd-datepicker-datepicker-calendar-day-width:40px;--sd-datepicker-datepicker-calendar-day-circle-size:32px;--sd-datepicker-datepicker-calendar-day-circle-radius:9999px;--sd-datepicker-datepicker-calendar-day-default-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-text:#222222;--sd-datepicker-datepicker-calendar-day-hover-border:#0075FF;--sd-datepicker-datepicker-calendar-day-select-bg:#0075FF;--sd-datepicker-datepicker-calendar-day-select-text:#FFFFFF;--sd-datepicker-datepicker-calendar-day-disabled-text:#BBBBBB;--sd-datepicker-datepicker-calendar-day-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-default-font-weight:400;--sd-datepicker-datepicker-calendar-day-typography-default-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-default-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-default-line-height:24px;--sd-datepicker-datepicker-calendar-day-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-day-typography-bold-font-weight:700;--sd-datepicker-datepicker-calendar-day-typography-bold-font-size:14px;--sd-datepicker-datepicker-calendar-day-typography-bold-text-decoration:none;--sd-datepicker-datepicker-calendar-day-typography-bold-line-height:24px;--sd-datepicker-datepicker-calendar-day-dot-size:6px;--sd-datepicker-datepicker-calendar-day-dot-gap:2px;--sd-datepicker-datepicker-calendar-day-dot-padding-y:4px;--sd-datepicker-datepicker-calendar-range-bg:#D9EAFF;--sd-datepicker-datepicker-calendar-range-height:32px;--sd-datepicker-datepicker-calendar-range-panel-gap:24px;--sd-datepicker-datepicker-calendar-range-divider:#E1E1E1;--sd-datepicker-datepicker-calendar-range-width:20px;--sd-datepicker-datepicker-calendar-legend-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-legend-typography-font-weight:400;--sd-datepicker-datepicker-calendar-legend-typography-font-size:11px;--sd-datepicker-datepicker-calendar-legend-typography-line-height:18px;--sd-datepicker-datepicker-calendar-legend-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-legend-gap:4px;--sd-datepicker-datepicker-calendar-legend-group-gap:12px;--sd-datepicker-datepicker-calendar-time-bg-default:#F9F9F9;--sd-datepicker-datepicker-calendar-time-bg-selected:#F5FAFF;--sd-datepicker-datepicker-calendar-time-date-label:#222222;--sd-datepicker-datepicker-calendar-time-date-unit:#888888;--sd-datepicker-datepicker-calendar-time-date-gap:6px;--sd-datepicker-datepicker-calendar-time-radius:8px;--sd-datepicker-datepicker-calendar-time-padding-x:16px;--sd-datepicker-datepicker-calendar-time-padding-y:12px;--sd-datepicker-datepicker-calendar-time-gap:12px;--sd-datepicker-datepicker-calendar-time-section-gap:12px;--sd-datepicker-datepicker-calendar-time-unit-gap:2px;--sd-datepicker-datepicker-calendar-time-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-datepicker-datepicker-calendar-time-typography-font-weight:500;--sd-datepicker-datepicker-calendar-time-typography-font-size:12px;--sd-datepicker-datepicker-calendar-time-typography-text-decoration:none;--sd-datepicker-datepicker-calendar-time-typography-line-height:20px;--sd-chip-chip-height:24px;--sd-chip-chip-padding-x:8px;--sd-chip-chip-gap:4px;--sd-chip-chip-radius:9999px;--sd-chip-chip-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-default-font-size:12px;--sd-chip-chip-typography-default-font-weight:500;--sd-chip-chip-typography-default-text-decoration:none;--sd-chip-chip-typography-default-line-height:20px;--sd-chip-chip-typography-focus-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-chip-chip-typography-focus-font-size:12px;--sd-chip-chip-typography-focus-font-weight:400;--sd-chip-chip-typography-focus-text-decoration:none;--sd-chip-chip-typography-focus-line-height:20px;--sd-chip-chip-bg-default:#F6F6F6;--sd-chip-chip-bg-error:#FCEFEF;--sd-chip-chip-bg-focus:#FFFFFF;--sd-chip-chip-bg-disabled:#F6F6F6;--sd-chip-chip-content-default:#222222;--sd-chip-chip-content-error:#E30000;--sd-chip-chip-content-focus:#222222;--sd-chip-chip-content-disabled:#888888;--sd-chip-chip-border-focus:#E1E1E1;--sd-chip-chip-border-width:1px;--sd-timepicker-timepicker-border-default:#AAAAAA;--sd-timepicker-timepicker-border-focus:#0075FF;--sd-timepicker-timepicker-border-disabled:#CCCCCC;--sd-timepicker-timepicker-border-width:1px;--sd-timepicker-timepicker-bg-default:#FFFFFF;--sd-timepicker-timepicker-bg-disabled:#E1E1E1;--sd-timepicker-timepicker-icon-default:#888888;--sd-timepicker-timepicker-icon-disabled:#BBBBBB;--sd-timepicker-timepicker-text-default:#222222;--sd-timepicker-timepicker-text-disabled:#888888;--sd-timepicker-timepicker-selector-bg:#FFFFFF;--sd-timepicker-timepicker-selector-range-heading-color:#555555;--sd-timepicker-timepicker-selector-range-heading-gap:16px;--sd-timepicker-timepicker-selector-range-padding-x-y:24px;--sd-timepicker-timepicker-selector-range-panel-gap:24px;--sd-timepicker-timepicker-selector-range-section-gap:12px;--sd-timepicker-timepicker-selector-radius:8px;--sd-timepicker-timepicker-selector-section-padding-x:16px;--sd-timepicker-timepicker-selector-section-padding-y:12px;--sd-timepicker-timepicker-selector-time-gap:4px;--sd-timepicker-timepicker-selector-time-column-gap:8px;--sd-timepicker-timepicker-selector-input-width:40px;--sd-timepicker-timepicker-selector-colon-size:16px;--sd-timepicker-timepicker-sm-height:28px;--sd-timepicker-timepicker-sm-padding-x:12px;--sd-timepicker-timepicker-sm-gap:8px;--sd-timepicker-timepicker-sm-icon:16px;--sd-timepicker-timepicker-sm-radius:4px;--sd-timepicker-timepicker-md-height:36px;--sd-timepicker-timepicker-md-padding-x:16px;--sd-timepicker-timepicker-md-gap:12px;--sd-timepicker-timepicker-md-icon:20px;--sd-timepicker-timepicker-md-radius:6px;--sd-tag-tag-xs-height:20px;--sd-tag-tag-xs-padding-x:8px;--sd-tag-tag-xs-gap:4px;--sd-tag-tag-xs-icon:12px;--sd-tag-tag-xs-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-xs-typography-font-size:11px;--sd-tag-tag-xs-typography-font-weight:500;--sd-tag-tag-xs-typography-line-height:18px;--sd-tag-tag-xs-typography-text-decoration:none;--sd-tag-tag-xs-radius:6px;--sd-tag-tag-sm-height:24px;--sd-tag-tag-sm-padding-x:8px;--sd-tag-tag-sm-gap:4px;--sd-tag-tag-sm-icon:16px;--sd-tag-tag-sm-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-sm-typography-font-size:12px;--sd-tag-tag-sm-typography-font-weight:700;--sd-tag-tag-sm-typography-text-decoration:none;--sd-tag-tag-sm-typography-line-height:20px;--sd-tag-tag-sm-radius:6px;--sd-tag-tag-md-height:28px;--sd-tag-tag-md-padding-x:12px;--sd-tag-tag-md-gap:6px;--sd-tag-tag-md-icon:16px;--sd-tag-tag-md-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tag-tag-md-typography-font-size:14px;--sd-tag-tag-md-typography-font-weight:700;--sd-tag-tag-md-typography-line-height:24px;--sd-tag-tag-md-typography-text-decoration:none;--sd-tag-tag-md-radius:8px;--sd-tag-tag-red-content:#FB4444;--sd-tag-tag-red-bg:#FCEFEF;--sd-tag-tag-orange-content:#FF6B00;--sd-tag-tag-orange-bg:#FEF1EA;--sd-tag-tag-yellow-content:#916C0D;--sd-tag-tag-yellow-bg:#FFF7DD;--sd-tag-tag-green-content:#00973C;--sd-tag-tag-green-bg:#E8F9EF;--sd-tag-tag-blue-content:#0075FF;--sd-tag-tag-blue-bg:#E6F1FF;--sd-tag-tag-darkblue-content:#006AC1;--sd-tag-tag-darkblue-bg:#EAF5FE;--sd-tag-tag-indigo-content:#004290;--sd-tag-tag-indigo-bg:#EFF6FF;--sd-tag-tag-grey-content:#737373;--sd-tag-tag-grey-bg:#EEEEEE;--sd-tag-tag-group-gap:8px;--sd-badge-badge-size:6px;--sd-badge-badge-radius:9999px;--sd-badge-badge-red:#FB4444;--sd-badge-badge-orange:#FF6B00;--sd-badge-badge-yellow:#FFC700;--sd-badge-badge-green:#00973C;--sd-badge-badge-blue:#0075FF;--sd-badge-badge-darkblue:#006AC1;--sd-badge-badge-indigo:#004290;--sd-badge-badge-grey:#737373;--sd-tooltip-tooltip-radius:6px;--sd-tooltip-tooltip-padding-y:12px;--sd-tooltip-tooltip-padding-x:16px;--sd-tooltip-tooltip-gap:12px;--sd-tooltip-tooltip-arrow-width:16px;--sd-tooltip-tooltip-arrow-height:12px;--sd-tooltip-tooltip-default-bg:#07284A;--sd-tooltip-tooltip-default-content:#FFFFFF;--sd-tooltip-tooltip-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-default-typography-font-size:12px;--sd-tooltip-tooltip-default-typography-font-weight:500;--sd-tooltip-tooltip-default-typography-line-height:20px;--sd-tooltip-tooltip-default-typography-text-decoration:none;--sd-tooltip-tooltip-danger-bg:#FCEFEF;--sd-tooltip-tooltip-danger-content:#FB4444;--sd-tooltip-tooltip-danger-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-danger-typography-font-size:12px;--sd-tooltip-tooltip-danger-typography-font-weight:700;--sd-tooltip-tooltip-danger-typography-text-decoration:none;--sd-tooltip-tooltip-danger-typography-line-height:20px;--sd-tooltip-tooltip-warning-bg:#FEF1EA;--sd-tooltip-tooltip-warning-content:#FF6B00;--sd-tooltip-tooltip-warning-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-warning-typography-font-size:12px;--sd-tooltip-tooltip-warning-typography-font-weight:700;--sd-tooltip-tooltip-warning-typography-text-decoration:none;--sd-tooltip-tooltip-warning-typography-line-height:20px;--sd-tooltip-tooltip-accent-bg:#E6F1FF;--sd-tooltip-tooltip-accent-content:#0075FF;--sd-tooltip-tooltip-accent-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tooltip-tooltip-accent-typography-font-size:12px;--sd-tooltip-tooltip-accent-typography-font-weight:700;--sd-tooltip-tooltip-accent-typography-text-decoration:none;--sd-tooltip-tooltip-accent-typography-line-height:20px;--sd-popover-popover-radius:6px;--sd-popover-popover-padding-x:20px;--sd-popover-popover-padding-y:16px;--sd-popover-popover-gap:12px;--sd-popover-popover-contents-gap:4px;--sd-popover-popover-arrow-width:16px;--sd-popover-popover-arrow-height:12px;--sd-popover-popover-default-bg:#07284A;--sd-popover-popover-default-title:#FFFFFF;--sd-popover-popover-default-description:#FFFFFF;--sd-popover-popover-default-sub-action:#D8D8D8;--sd-popover-popover-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-title-typography-font-size:14px;--sd-popover-popover-title-typography-font-weight:700;--sd-popover-popover-title-typography-line-height:24px;--sd-popover-popover-title-typography-text-decoration:none;--sd-popover-popover-title-leading-icon:16px;--sd-popover-popover-title-gap:8px;--sd-popover-popover-description-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-description-typography-font-size:12px;--sd-popover-popover-description-typography-font-weight:500;--sd-popover-popover-description-typography-line-height:20px;--sd-popover-popover-description-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popover-popover-sub-action-typography-font-size:12px;--sd-popover-popover-sub-action-typography-font-weight:700;--sd-popover-popover-sub-action-typography-text-decoration:none;--sd-popover-popover-sub-action-typography-line-height:20px;--sd-popover-popover-danger-bg:#FCEFEF;--sd-popover-popover-danger-title:#FB4444;--sd-popover-popover-warning-bg:#FEF1EA;--sd-popover-popover-warning-title:#FF6B00;--sd-popover-popover-accent-bg:#E6F1FF;--sd-popover-popover-accent-title:#0075FF;--sd-popover-popover-light-description:#555555;--sd-popover-popover-light-sub-action:#888888;--sd-toast-toast-radius:8px;--sd-toast-toast-padding-x:24px;--sd-toast-toast-padding-y:12px;--sd-toast-toast-gap:16px;--sd-toast-toast-icon:16px;--sd-toast-toast-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-default-font-size:14px;--sd-toast-toast-typography-default-font-weight:500;--sd-toast-toast-typography-default-line-height:24px;--sd-toast-toast-typography-default-text-decoration:none;--sd-toast-toast-typography-link-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-toast-toast-typography-link-font-size:14px;--sd-toast-toast-typography-link-font-weight:700;--sd-toast-toast-typography-link-line-height:24px;--sd-toast-toast-typography-link-text-decoration:underline;--sd-toast-toast-default-bg:#07284A;--sd-toast-toast-default-content:#FFFFFF;--sd-toast-toast-danger-bg:#FB4444;--sd-toast-toast-danger-content:#FFFFFF;--sd-toast-toast-caution-bg:#FFC700;--sd-toast-toast-caution-content:#222222;--sd-toast-toast-complete-bg:#00973C;--sd-toast-toast-complete-content:#FFFFFF;--sd-toast-toast-accent-bg:#005CC9;--sd-toast-toast-accent-content:#FFFFFF;--sd-toast-toast-info-bg:#E6F1FF;--sd-toast-toast-info-icon:#0075FF;--sd-toast-toast-info-text:#222222;--sd-toast-toast-info-text-link:#555555;--sd-overlay-overlay-header-bg:#FFFFFF;--sd-overlay-overlay-header-padding-x:24px;--sd-overlay-overlay-header-padding-y:20px;--sd-overlay-overlay-header-gap:12px;--sd-overlay-overlay-header-title-color:#033F59;--sd-overlay-overlay-header-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-overlay-overlay-header-title-typography-font-weight:700;--sd-overlay-overlay-header-title-typography-font-size:16px;--sd-overlay-overlay-header-title-typography-text-decoration:none;--sd-overlay-overlay-header-title-typography-line-height:26px;--sd-overlay-overlay-footer-bg-default:#FFFFFF;--sd-overlay-overlay-footer-bg-neutral:#F6F6F6;--sd-overlay-overlay-footer-padding-x:20px;--sd-overlay-overlay-footer-padding-y:8px;--sd-overlay-overlay-footer-gap:16px;--sd-overlay-overlay-footer-shadow-x:0px;--sd-overlay-overlay-footer-shadow-y:0px;--sd-overlay-overlay-footer-shadow-blur:24px;--sd-overlay-overlay-footer-shadow-spread:0px;--sd-overlay-overlay-footer-shadow-color:rgba(34,34,34,0.2);--sd-overlay-overlay-footer-shadow-type:dropShadow;--sd-modal-modal-radius:8px;--sd-modal-modal-confirm-padding-x:32px;--sd-modal-modal-confirm-padding-y:40px;--sd-modal-modal-confirm-gap:40px;--sd-modal-modal-confirm-body-gap:20px;--sd-modal-modal-confirm-title-gap:12px;--sd-modal-modal-confirm-title-color:#222222;--sd-modal-modal-confirm-title-icon:32px;--sd-modal-modal-confirm-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-title-typography-font-weight:700;--sd-modal-modal-confirm-title-typography-font-size:18px;--sd-modal-modal-confirm-title-typography-line-height:30px;--sd-modal-modal-confirm-title-typography-text-decoration:none;--sd-modal-modal-confirm-button-gap:8px;--sd-modal-modal-confirm-message-color:#222222;--sd-modal-modal-confirm-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-confirm-message-typography-font-size:12px;--sd-modal-modal-confirm-message-typography-font-weight:400;--sd-modal-modal-confirm-message-typography-line-height:20px;--sd-modal-modal-confirm-message-typography-text-decoration:none;--sd-modal-modal-confirm-positive-icon:#0075FF;--sd-modal-modal-confirm-negative-icon:#E30000;--sd-modal-modal-bg:#FFFFFF;--sd-modal-modal-action-body-padding-x:20px;--sd-modal-modal-action-body-padding-bottom:20px;--sd-modal-modal-action-footer-padding-x:20px;--sd-modal-modal-action-footer-padding-y:8px;--sd-modal-modal-action-footer-gap:16px;--sd-modal-modal-action-footer-bg:#F6F6F6;--sd-modal-modal-action-footer-border:#E1E1E1;--sd-modal-modal-loading-width:520px;--sd-modal-modal-loading-height:320px;--sd-modal-modal-loading-gap:20px;--sd-modal-modal-loading-content:80px;--sd-modal-modal-loading-message-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-modal-modal-loading-message-typography-font-size:12px;--sd-modal-modal-loading-message-typography-font-weight:400;--sd-modal-modal-loading-message-typography-line-height:20px;--sd-modal-modal-loading-message-typography-text-decoration:none;--sd-modal-modal-loading-message-color:#888888;--sd-popup-popup-header-bg-default:#07284A;--sd-popup-popup-header-bg-inverse:#FFFFFF;--sd-popup-popup-header-title-default:#FFFFFF;--sd-popup-popup-header-title-inverse:#004290;--sd-popup-popup-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-popup-popup-header-typography-font-weight:700;--sd-popup-popup-header-typography-font-size:18px;--sd-popup-popup-header-typography-line-height:30px;--sd-popup-popup-header-typography-text-decoration:none;--sd-popup-popup-header-padding-x:16px;--sd-popup-popup-header-padding-y:12px;--sd-popup-popup-bg:#EEEEEE;--sd-drawer-drawer-bg:#F6F6F6;--sd-drawer-drawer-body-border:#E1E1E1;--sd-callout-callout-radius:8px;--sd-callout-callout-border-width:1px;--sd-callout-callout-body-gap:2px;--sd-callout-callout-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-body-typography-font-size:12px;--sd-callout-callout-body-typography-font-weight:400;--sd-callout-callout-body-typography-line-height:20px;--sd-callout-callout-body-typography-text-decoration:none;--sd-callout-callout-body-padding-x:12px;--sd-callout-callout-body-padding-y:8px;--sd-callout-callout-default-bg:#F9F9F9;--sd-callout-callout-default-border:#E1E1E1;--sd-callout-callout-default-content:#555555;--sd-callout-callout-danger-bg:#FCEFEF;--sd-callout-callout-danger-border:#FFB5B5;--sd-callout-callout-danger-content:#222222;--sd-callout-callout-danger-title-bg:#FB4444;--sd-callout-callout-danger-title-padding-x:24px;--sd-callout-callout-danger-title-gap:2px;--sd-callout-callout-danger-title-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-callout-callout-danger-title-typography-font-weight:700;--sd-callout-callout-danger-title-typography-font-size:16px;--sd-callout-callout-danger-title-typography-text-decoration:none;--sd-callout-callout-danger-title-typography-line-height:26px;--sd-callout-callout-danger-title-color:#FFFFFF;--sd-callout-callout-danger-title-icon:24px;--sd-guide-guide-gap:4px;--sd-guide-guide-button-height:28px;--sd-guide-guide-button-padding-x:12px;--sd-guide-guide-button-radius:9999px;--sd-guide-guide-button-gap:6px;--sd-guide-guide-button-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-button-typography-font-size:12px;--sd-guide-guide-button-typography-font-weight:500;--sd-guide-guide-button-typography-text-decoration:none;--sd-guide-guide-button-typography-line-height:20px;--sd-guide-guide-button-icon-size:16px;--sd-guide-guide-button-icon-default:#00973C;--sd-guide-guide-button-icon-active:#FFFFFF;--sd-guide-guide-button-border-width:1px;--sd-guide-guide-button-border-default:#E1E1E1;--sd-guide-guide-button-bg-default:#FFFFFF;--sd-guide-guide-button-bg-tip:#00973C;--sd-guide-guide-button-bg-notion:#1F8AE1;--sd-guide-guide-button-text-default:#222222;--sd-guide-guide-button-text-active:#FFFFFF;--sd-guide-guide-contents-padding-x:24px;--sd-guide-guide-contents-padding-y:20px;--sd-guide-guide-contents-gap:12px;--sd-guide-guide-contents-title-gap:8px;--sd-guide-guide-contents-body-gap:2px;--sd-guide-guide-contents-typography-title-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-title-font-weight:700;--sd-guide-guide-contents-typography-title-font-size:16px;--sd-guide-guide-contents-typography-title-text-decoration:none;--sd-guide-guide-contents-typography-title-line-height:26px;--sd-guide-guide-contents-typography-body-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-guide-guide-contents-typography-body-font-weight:400;--sd-guide-guide-contents-typography-body-font-size:12px;--sd-guide-guide-contents-typography-body-line-height:20px;--sd-guide-guide-contents-typography-body-text-decoration:none;--sd-guide-guide-contents-typography-color:#222222;--sd-guide-guide-contents-icon:#00973C;--sd-guide-guide-contents-radius:8px;--sd-guide-guide-contents-depth-padding-left:32px;--sd-progress-progress-linear-height:20px;--sd-progress-progress-linear-radius:9999px;--sd-progress-progress-linear-gap:12px;--sd-progress-progress-linear-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-linear-typography-font-size:12px;--sd-progress-progress-linear-typography-font-weight:700;--sd-progress-progress-linear-typography-text-decoration:none;--sd-progress-progress-linear-typography-line-height:20px;--sd-progress-progress-circular-size:80px;--sd-progress-progress-circular-gap:8px;--sd-progress-progress-circular-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-circular-typography-font-weight:700;--sd-progress-progress-circular-typography-font-size:16px;--sd-progress-progress-circular-typography-text-decoration:none;--sd-progress-progress-circular-typography-line-height:26px;--sd-progress-progress-label-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-progress-progress-label-typography-font-size:12px;--sd-progress-progress-label-typography-font-weight:400;--sd-progress-progress-label-typography-line-height:20px;--sd-progress-progress-label-typography-text-decoration:none;--sd-progress-progress-color-track:#EEEEEE;--sd-progress-progress-color-label:#555555;--sd-progress-progress-active-color:#2D8DFF;--sd-progress-progress-success-color:#12B553;--sd-progress-progress-error-color:#FB4444;--sd-progress-progress-bar-text:#FFFFFF;--sd-progress-progress-inverse-color:#FFFFFF;--sd-progress-progress-inverse-opacity:40%;--sd-table-table-header-height:36px;--sd-table-table-header-padding-x:16px;--sd-table-table-header-gap:4px;--sd-table-table-header-bg:#F5FAFF;--sd-table-table-header-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-header-typography-font-weight:500;--sd-table-table-header-typography-font-size:12px;--sd-table-table-header-typography-line-height:20px;--sd-table-table-header-typography-text-decoration:none;--sd-table-table-header-resizing-bar-color:#CCCCCC;--sd-table-table-header-resizing-bar-height:16px;--sd-table-table-body-default-height:44px;--sd-table-table-body-default-padding-y:8px;--sd-table-table-body-dense-height:32px;--sd-table-table-body-padding-y-dense:6px;--sd-table-table-body-padding-y-default:8px;--sd-table-table-body-padding-x-default:8px;--sd-table-table-body-padding-x-wide:16px;--sd-table-table-body-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-table-table-body-typography-font-weight:400;--sd-table-table-body-typography-font-size:12px;--sd-table-table-body-typography-line-height:20px;--sd-table-table-body-typography-text-decoration:none;--sd-table-table-border-color:#E1E1E1;--sd-table-table-border-width:1px;--sd-table-table-content-gap:8px;--sd-table-table-bar-section-gap:12px;--sd-table-table-bar-divider-height:20px;--sd-table-table-bar-height:44px;--sd-table-table-bar-count-total:#066D9B;--sd-table-table-bar-count-null:#888888;--sd-table-table-radius:8px;--sd-table-table-key-value-body-padding-y:8px;--sd-table-table-key-value-body-padding-x-default:8px;--sd-table-table-key-value-body-padding-x-wide:16px;--sd-table-table-key-value-height:44px;--sd-table-table-key-value-search-padding-x:32px;--sd-table-table-key-value-search-bg:#F9F9F9;--sd-table-table-separator-color:#EEEEEE;--sd-table-table-separator-width-default:6px;--sd-table-table-separator-width-dense:4px;--sd-pagination-pagination-height:24px;--sd-pagination-pagination-padding-x:6px;--sd-pagination-pagination-radius:6px;--sd-pagination-pagination-gap:12px;--sd-pagination-pagination-move-gap:4px;--sd-pagination-pagination-icon:12px;--sd-pagination-pagination-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-font-size:12px;--sd-pagination-pagination-typography-default-font-weight:500;--sd-pagination-pagination-typography-default-text-decoration:none;--sd-pagination-pagination-typography-default-line-height:20px;--sd-pagination-pagination-typography-default-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-default-selected-font-weight:700;--sd-pagination-pagination-typography-default-selected-font-size:12px;--sd-pagination-pagination-typography-default-selected-line-height:20px;--sd-pagination-pagination-typography-default-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-font-weight:700;--sd-pagination-pagination-typography-selected-font-size:12px;--sd-pagination-pagination-typography-selected-line-height:20px;--sd-pagination-pagination-typography-selected-text-decoration:none;--sd-pagination-pagination-typography-selected-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-pagination-pagination-typography-selected-selected-font-weight:700;--sd-pagination-pagination-typography-selected-selected-font-size:12px;--sd-pagination-pagination-typography-selected-selected-line-height:20px;--sd-pagination-pagination-typography-selected-selected-text-decoration:none;--sd-pagination-pagination-item-bg-hover:#EEEEEE;--sd-pagination-pagination-item-bg-selected:#E6F1FF;--sd-pagination-pagination-item-content-default:#555555;--sd-pagination-pagination-item-content-hover:#004290;--sd-pagination-pagination-item-content-selected:#004290;--sd-pagination-pagination-simple-gap:8px;--sd-tab-tab-main-lg-height:44px;--sd-tab-tab-main-lg-padding-x:32px;--sd-tab-tab-main-md-height:36px;--sd-tab-tab-main-md-padding-x:24px;--sd-tab-tab-main-gap:8px;--sd-tab-tab-main-container-gap:4px;--sd-tab-tab-main-radius:6px;--sd-tab-tab-main-border-width:1px;--sd-tab-tab-main-selected-bg:#FFFFFF;--sd-tab-tab-main-selected-text:#0075FF;--sd-tab-tab-main-selected-border:#0075FF;--sd-tab-tab-main-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-selected-typography-font-weight:700;--sd-tab-tab-main-selected-typography-font-size:12px;--sd-tab-tab-main-selected-typography-line-height:20px;--sd-tab-tab-main-selected-typography-text-decoration:none;--sd-tab-tab-main-default-bg:#F6F6F6;--sd-tab-tab-main-default-text:#888888;--sd-tab-tab-main-default-border:#CCCCCC;--sd-tab-tab-main-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-main-default-typography-font-weight:400;--sd-tab-tab-main-default-typography-font-size:12px;--sd-tab-tab-main-default-typography-line-height:20px;--sd-tab-tab-main-default-typography-text-decoration:none;--sd-tab-tab-sub-selected-text:#0075FF;--sd-tab-tab-sub-selected-line:#0075FF;--sd-tab-tab-sub-selected-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-selected-typography-font-weight:700;--sd-tab-tab-sub-selected-typography-font-size:12px;--sd-tab-tab-sub-selected-typography-line-height:20px;--sd-tab-tab-sub-selected-typography-text-decoration:none;--sd-tab-tab-sub-default-text:#222222;--sd-tab-tab-sub-default-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-tab-tab-sub-default-typography-font-weight:400;--sd-tab-tab-sub-default-typography-font-size:12px;--sd-tab-tab-sub-default-typography-line-height:20px;--sd-tab-tab-sub-default-typography-text-decoration:none;--sd-tab-tab-sub-border-width:1px;--sd-tab-tab-sub-gap-horizontal:24px;--sd-tab-tab-sub-gap-vertical:16px;--sd-tab-tab-sub-content-gap:4px;--sd-tab-tab-sub-item-height:20px;--sd-gnb-belt-gnb-belt-top-height:56px;--sd-gnb-belt-gnb-belt-top-padding-x:12px;--sd-gnb-belt-gnb-belt-top-gap:8px;--sd-gnb-belt-gnb-belt-logo-height:32px;--sd-gnb-belt-gnb-belt-body-padding-y:12px;--sd-gnb-belt-gnb-belt-item-padding-y:6px;--sd-gnb-belt-gnb-belt-item-padding-right:20px;--sd-gnb-belt-gnb-belt-item-gap:12px;--sd-gnb-belt-gnb-belt-item-icon:12px;--sd-gnb-belt-gnb-belt-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-default-font-weight:500;--sd-gnb-belt-gnb-belt-item-typography-default-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-default-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-default-text-decoration:none;--sd-gnb-belt-gnb-belt-item-typography-selected-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-typography-selected-font-weight:700;--sd-gnb-belt-gnb-belt-item-typography-selected-font-size:12px;--sd-gnb-belt-gnb-belt-item-typography-selected-line-height:20px;--sd-gnb-belt-gnb-belt-item-typography-selected-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth1-padding-left:20px;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-weight:700;--sd-gnb-belt-gnb-belt-item-depth1-typography-font-size:13px;--sd-gnb-belt-gnb-belt-item-depth1-typography-line-height:22px;--sd-gnb-belt-gnb-belt-item-depth1-typography-text-decoration:none;--sd-gnb-belt-gnb-belt-item-depth2-padding-left:32px;--sd-gnb-belt-gnb-belt-item-depth3-padding-left:44px;--sd-gnb-belt-gnb-belt-fold-width:48px;--sd-gnb-box-gnb-box-top-height:56px;--sd-gnb-box-gnb-box-padding-x:16px;--sd-gnb-box-gnb-box-gap:16px;--sd-gnb-box-gnb-box-button-gap:8px;--sd-gnb-box-gnb-box-logo-height:32px;--sd-gnb-box-gnb-box-menu-body-padding:12px;--sd-gnb-box-gnb-box-item-padding-y:6px;--sd-gnb-box-gnb-box-item-padding-right:12px;--sd-gnb-box-gnb-box-item-gap:8px;--sd-gnb-box-gnb-box-item-radius:8px;--sd-gnb-box-gnb-box-item-arrow:12px;--sd-gnb-box-gnb-box-item-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-default-font-weight:500;--sd-gnb-box-gnb-box-item-typography-default-font-size:14px;--sd-gnb-box-gnb-box-item-typography-default-line-height:24px;--sd-gnb-box-gnb-box-item-typography-default-text-decoration:none;--sd-gnb-box-gnb-box-item-typography-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-gnb-box-gnb-box-item-typography-bold-font-weight:700;--sd-gnb-box-gnb-box-item-typography-bold-font-size:14px;--sd-gnb-box-gnb-box-item-typography-bold-line-height:24px;--sd-gnb-box-gnb-box-item-typography-bold-text-decoration:none;--sd-gnb-box-gnb-box-item-depth1-padding-left:12px;--sd-gnb-box-gnb-box-item-depth1-icon:20px;--sd-gnb-box-gnb-box-item-depth2-padding-left:24px;--sd-gnb-box-gnb-box-item-depth3-padding-left:36px;--sd-stepper-stepper-sm-sequence-size:20px;--sd-stepper-stepper-sm-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-active-font-weight:700;--sd-stepper-stepper-sm-typography-active-font-size:12px;--sd-stepper-stepper-sm-typography-active-line-height:20px;--sd-stepper-stepper-sm-typography-active-text-decoration:none;--sd-stepper-stepper-sm-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sm-typography-default-font-weight:500;--sd-stepper-stepper-sm-typography-default-font-size:12px;--sd-stepper-stepper-sm-typography-default-line-height:20px;--sd-stepper-stepper-sm-typography-default-text-decoration:none;--sd-stepper-stepper-dash-width:20px;--sd-stepper-stepper-dash-color:#888888;--sd-stepper-stepper-lg-sequence-size:24px;--sd-stepper-stepper-lg-typography-active-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-active-font-weight:700;--sd-stepper-stepper-lg-typography-active-font-size:14px;--sd-stepper-stepper-lg-typography-active-line-height:24px;--sd-stepper-stepper-lg-typography-active-text-decoration:none;--sd-stepper-stepper-lg-typography-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-lg-typography-default-font-weight:500;--sd-stepper-stepper-lg-typography-default-font-size:14px;--sd-stepper-stepper-lg-typography-default-line-height:24px;--sd-stepper-stepper-lg-typography-default-text-decoration:none;--sd-stepper-stepper-container-gap:12px;--sd-stepper-stepper-item-gap:8px;--sd-stepper-stepper-sequence-radius:9999px;--sd-stepper-stepper-sequence-border-active:#93C4FF;--sd-stepper-stepper-sequence-border-default:#E1E1E1;--sd-stepper-stepper-sequence-border-completed:#CCCCCC;--sd-stepper-stepper-sequence-border-witdh:1px;--sd-stepper-stepper-sequence-icon:12px;--sd-stepper-stepper-sequence-typography-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-stepper-stepper-sequence-typography-font-weight:700;--sd-stepper-stepper-sequence-typography-font-size:12px;--sd-stepper-stepper-sequence-typography-line-height:20px;--sd-stepper-stepper-sequence-typography-text-decoration:none;--sd-stepper-stepper-sequence-bg-active:#D9EAFF;--sd-stepper-stepper-sequence-bg-default:#FFFFFF;--sd-stepper-stepper-sequence-bg-completed:#E1E1E1;--sd-stepper-stepper-sequence-text-active:#0075FF;--sd-stepper-stepper-sequence-text-default:#AAAAAA;--sd-stepper-stepper-text-active:#0075FF;--sd-stepper-stepper-text-default:#888888;--sd-gnb-light-bg:#FFFFFF;--sd-gnb-light-divider:#E1E1E1;--sd-gnb-light-item-bg-default:#FFFFFF;--sd-gnb-light-item-bg-hover:#F6F6F6;--sd-gnb-light-item-bg-selected:#EFF6FF;--sd-gnb-light-item-fg-default:#222222;--sd-gnb-light-item-fg-hover:#222222;--sd-gnb-light-item-fg-selected:#0075FF;--sd-gnb-light-item-chevron:#555555;--sd-gnb-light-top-icon:#888888;--sd-gnb-dark-bg:#001B39;--sd-gnb-dark-divider:#004177;--sd-gnb-dark-item-bg-default:#001B39;--sd-gnb-dark-item-bg-hover:#07284A;--sd-gnb-dark-item-bg-selected:#002B5E;--sd-gnb-dark-item-fg-default:#FFFFFF;--sd-gnb-dark-item-fg-hover:#FFFFFF;--sd-gnb-dark-item-fg-selected:#93C4FF;--sd-gnb-dark-item-chevron:#AAAAAA;--sd-gnb-dark-top-icon:#FFFFFF}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5e0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #ad0000)}.bg-red_75{background-color:var(--color-red_75, #e30000)}.bg-red_70{background-color:var(--color-red_70, #fb4444)}.bg-red_60{background-color:var(--color-red_60, #ff7c7c)}.bg-red_45{background-color:var(--color-red_45, #ffb5b5)}.bg-red_30{background-color:var(--color-red_30, #ffd3d3)}.bg-red_20{background-color:var(--color-red_20, #fce6e6)}.bg-red_15{background-color:var(--color-red_15, #fcefef)}.bg-caution_bg{background-color:var(--color-caution_bg, #fef1f1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2f1100)}.bg-orange_95{background-color:var(--color-orange_95, #4d1b00)}.bg-orange_90{background-color:var(--color-orange_90, #752a00)}.bg-orange_85{background-color:var(--color-orange_85, #9b3700)}.bg-orange_75{background-color:var(--color-orange_75, #ce4900)}.bg-orange_65{background-color:var(--color-orange_65, #ff6b00)}.bg-orange_60{background-color:var(--color-orange_60, #ff7f22)}.bg-orange_55{background-color:var(--color-orange_55, #ffa452)}.bg-orange_45{background-color:var(--color-orange_45, #ffbc81)}.bg-orange_35{background-color:var(--color-orange_35, #ffd5af)}.bg-orange_20{background-color:var(--color-orange_20, #ffead7)}.bg-orange_10{background-color:var(--color-orange_10, #fef1ea)}.bg-header_alert{background-color:var(--color-header_alert, #ff7a00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6c5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9c7a00)}.bg-yellow_60{background-color:var(--color-yellow_60, #c49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #ebb800)}.bg-yellow_45{background-color:var(--color-yellow_45, #ffc700)}.bg-yellow_40{background-color:var(--color-yellow_40, #ffd643)}.bg-yellow_30{background-color:var(--color-yellow_30, #fee17c)}.bg-yellow_25{background-color:var(--color-yellow_25, #ffe99e)}.bg-yellow_20{background-color:var(--color-yellow_20, #fef1c4)}.bg-yellow_10{background-color:var(--color-yellow_10, #fff7dd)}.bg-olive_95{background-color:var(--color-olive_95, #2c2c00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #a5a500)}.bg-olive_55{background-color:var(--color-olive_55, #c7c700)}.bg-olive_45{background-color:var(--color-olive_45, #dddd12)}.bg-olive_30{background-color:var(--color-olive_30, #eeee37)}.bg-olive_20{background-color:var(--color-olive_20, #f6f65f)}.bg-olive_15{background-color:var(--color-olive_15, #fafaa1)}.bg-olive_10{background-color:var(--color-olive_10, #fbfbbf)}.bg-olive_05{background-color:var(--color-olive_05, #fefed9)}.bg-green_99{background-color:var(--color-green_99, #001d0b)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461c)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007b31)}.bg-green_75{background-color:var(--color-green_75, #00973c)}.bg-green_70{background-color:var(--color-green_70, #12b553)}.bg-green_65{background-color:var(--color-green_65, #2bce6c)}.bg-green_55{background-color:var(--color-green_55, #6de39c)}.bg-green_45{background-color:var(--color-green_45, #acf4c9)}.bg-green_25{background-color:var(--color-green_25, #d4fae3)}.bg-green_15{background-color:var(--color-green_15, #e8f9ef)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #d8d8d8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #e5e5e5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5e0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #ad0000)}.text-red_75{color:var(--color-red_75, #e30000)}.text-red_70{color:var(--color-red_70, #fb4444)}.text-red_60{color:var(--color-red_60, #ff7c7c)}.text-red_45{color:var(--color-red_45, #ffb5b5)}.text-red_30{color:var(--color-red_30, #ffd3d3)}.text-red_20{color:var(--color-red_20, #fce6e6)}.text-red_15{color:var(--color-red_15, #fcefef)}.text-caution_bg{color:var(--color-caution_bg, #fef1f1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2f1100)}.text-orange_95{color:var(--color-orange_95, #4d1b00)}.text-orange_90{color:var(--color-orange_90, #752a00)}.text-orange_85{color:var(--color-orange_85, #9b3700)}.text-orange_75{color:var(--color-orange_75, #ce4900)}.text-orange_65{color:var(--color-orange_65, #ff6b00)}.text-orange_60{color:var(--color-orange_60, #ff7f22)}.text-orange_55{color:var(--color-orange_55, #ffa452)}.text-orange_45{color:var(--color-orange_45, #ffbc81)}.text-orange_35{color:var(--color-orange_35, #ffd5af)}.text-orange_20{color:var(--color-orange_20, #ffead7)}.text-orange_10{color:var(--color-orange_10, #fef1ea)}.text-header_alert{color:var(--color-header_alert, #ff7a00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6c5602)}.text-yellow_70{color:var(--color-yellow_70, #9c7a00)}.text-yellow_60{color:var(--color-yellow_60, #c49900)}.text-yellow_50{color:var(--color-yellow_50, #ebb800)}.text-yellow_45{color:var(--color-yellow_45, #ffc700)}.text-yellow_40{color:var(--color-yellow_40, #ffd643)}.text-yellow_30{color:var(--color-yellow_30, #fee17c)}.text-yellow_25{color:var(--color-yellow_25, #ffe99e)}.text-yellow_20{color:var(--color-yellow_20, #fef1c4)}.text-yellow_10{color:var(--color-yellow_10, #fff7dd)}.text-olive_95{color:var(--color-olive_95, #2c2c00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #a5a500)}.text-olive_55{color:var(--color-olive_55, #c7c700)}.text-olive_45{color:var(--color-olive_45, #dddd12)}.text-olive_30{color:var(--color-olive_30, #eeee37)}.text-olive_20{color:var(--color-olive_20, #f6f65f)}.text-olive_15{color:var(--color-olive_15, #fafaa1)}.text-olive_10{color:var(--color-olive_10, #fbfbbf)}.text-olive_05{color:var(--color-olive_05, #fefed9)}.text-green_99{color:var(--color-green_99, #001d0b)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461c)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007b31)}.text-green_75{color:var(--color-green_75, #00973c)}.text-green_70{color:var(--color-green_70, #12b553)}.text-green_65{color:var(--color-green_65, #2bce6c)}.text-green_55{color:var(--color-green_55, #6de39c)}.text-green_45{color:var(--color-green_45, #acf4c9)}.text-green_25{color:var(--color-green_25, #d4fae3)}.text-green_15{color:var(--color-green_15, #e8f9ef)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #d8d8d8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #e5e5e5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}*{scroll-behavior:smooth}*::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}*::-webkit-scrollbar:horizontal{height:8px}*::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}*::-webkit-scrollbar-track{background-color:#E5E5E5}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}";
137
+ const globalStyles = ":root{--color-primary:#051D36;--sd-primary:#051D36;--color-secondary:#555555;--sd-secondary:#555555;--color-accent:#9C27B0;--sd-accent:#9C27B0;--color-positive:#0075FF;--sd-positive:#0075FF;--color-negative:#E30000;--sd-negative:#E30000;--color-info:#00CD52;--sd-info:#00CD52;--color-warning:#F2C037;--sd-warning:#F2C037;--color-caution_bg:#FEF1F1;--sd-caution_bg:#FEF1F1;--color-caution_icon:#FD9595;--sd-caution_icon:#FD9595;--color-header_alert:#FF7A00;--sd-header_alert:#FF7A00;--color-white:#FFFFFF;--sd-white:#FFFFFF;--color-black:#000000;--sd-black:#000000;--color-grey_10:#F6F6F6;--sd-grey_10:#F6F6F6;--color-grey_20:#EEEEEE;--sd-grey_20:#EEEEEE;--color-grey_25:#E5E5E5;--sd-grey_25:#E5E5E5;--color-grey_30:#E1E1E1;--sd-grey_30:#E1E1E1;--color-grey_35:#D8D8D8;--sd-grey_35:#D8D8D8;--color-grey_45:#CCCCCC;--sd-grey_45:#CCCCCC;--color-grey_50:#BBBBBB;--sd-grey_50:#BBBBBB;--color-grey_55:#AAAAAA;--sd-grey_55:#AAAAAA;--color-grey_60:#999999;--sd-grey_60:#999999;--color-grey_65:#888888;--sd-grey_65:#888888;--color-grey_70:#737373;--sd-grey_70:#737373;--color-grey_80:#555555;--sd-grey_80:#555555;--color-grey_85:#444444;--sd-grey_85:#444444;--color-grey_90:#333333;--sd-grey_90:#333333;--color-grey_95:#222222;--sd-grey_95:#222222;--color-grey_05:#F9F9F9;--sd-grey_05:#F9F9F9;--color-red_15:#FCEFEF;--sd-red_15:#FCEFEF;--color-red_20:#FCE6E6;--sd-red_20:#FCE6E6;--color-red_30:#FFD3D3;--sd-red_30:#FFD3D3;--color-red_45:#FFB5B5;--sd-red_45:#FFB5B5;--color-red_60:#FF7C7C;--sd-red_60:#FF7C7C;--color-red_70:#FB4444;--sd-red_70:#FB4444;--color-red_75:#E30000;--sd-red_75:#E30000;--color-red_75_006:#E30000;--sd-red_75_006:#E30000;--color-red_80:#AD0000;--sd-red_80:#AD0000;--color-red_85:#820000;--sd-red_85:#820000;--color-red_90:#5E0000;--sd-red_90:#5E0000;--color-red_95:#440000;--sd-red_95:#440000;--color-red_99:#220000;--sd-red_99:#220000;--color-orange_10:#FEF1EA;--sd-orange_10:#FEF1EA;--color-orange_20:#FFEAD7;--sd-orange_20:#FFEAD7;--color-orange_35:#FFD5AF;--sd-orange_35:#FFD5AF;--color-orange_45:#FFBC81;--sd-orange_45:#FFBC81;--color-orange_55:#FFA452;--sd-orange_55:#FFA452;--color-orange_60:#FF7F22;--sd-orange_60:#FF7F22;--color-orange_65:#FF6B00;--sd-orange_65:#FF6B00;--color-orange_75:#CE4900;--sd-orange_75:#CE4900;--color-orange_85:#9B3700;--sd-orange_85:#9B3700;--color-orange_90:#752A00;--sd-orange_90:#752A00;--color-orange_95:#4D1B00;--sd-orange_95:#4D1B00;--color-orange_99:#2F1100;--sd-orange_99:#2F1100;--color-yellow_10:#FFF7DD;--sd-yellow_10:#FFF7DD;--color-yellow_20:#FEF1C4;--sd-yellow_20:#FEF1C4;--color-yellow_25:#FFE99E;--sd-yellow_25:#FFE99E;--color-yellow_30:#FEE17C;--sd-yellow_30:#FEE17C;--color-yellow_40:#FFD643;--sd-yellow_40:#FFD643;--color-yellow_45:#FFC700;--sd-yellow_45:#FFC700;--color-yellow_50:#EBB110;--sd-yellow_50:#EBB110;--color-yellow_60:#CA9612;--sd-yellow_60:#CA9612;--color-yellow_70:#916C0D;--sd-yellow_70:#916C0D;--color-yellow_80:#6C5002;--sd-yellow_80:#6C5002;--color-yellow_90:#453602;--sd-yellow_90:#453602;--color-yellow_95:#322700;--sd-yellow_95:#322700;--color-olive_10:#FBFBBF;--sd-olive_10:#FBFBBF;--color-olive_15:#FAFAA1;--sd-olive_15:#FAFAA1;--color-olive_20:#F6F65F;--sd-olive_20:#F6F65F;--color-olive_30:#EEEE37;--sd-olive_30:#EEEE37;--color-olive_45:#DDDD12;--sd-olive_45:#DDDD12;--color-olive_55:#C7C700;--sd-olive_55:#C7C700;--color-olive_65:#A5A500;--sd-olive_65:#A5A500;--color-olive_70:#838300;--sd-olive_70:#838300;--color-olive_80:#636300;--sd-olive_80:#636300;--color-olive_90:#454500;--sd-olive_90:#454500;--color-olive_95:#2C2C00;--sd-olive_95:#2C2C00;--color-olive_05:#FEFED9;--sd-olive_05:#FEFED9;--color-green_15:#E8F9EF;--sd-green_15:#E8F9EF;--color-green_25:#D4FAE3;--sd-green_25:#D4FAE3;--color-green_45:#ACF4C9;--sd-green_45:#ACF4C9;--color-green_55:#6DE39C;--sd-green_55:#6DE39C;--color-green_65:#2BCE6C;--sd-green_65:#2BCE6C;--color-green_70:#12B553;--sd-green_70:#12B553;--color-green_75:#00973C;--sd-green_75:#00973C;--color-green_80:#007B31;--sd-green_80:#007B31;--color-green_85:#006629;--sd-green_85:#006629;--color-green_90:#00461C;--sd-green_90:#00461C;--color-green_95:#003013;--sd-green_95:#003013;--color-green_99:#001D0B;--sd-green_99:#001D0B;--color-steelblue_10:#ECF8FD;--sd-steelblue_10:#ECF8FD;--color-steelblue_25:#D9F2FD;--sd-steelblue_25:#D9F2FD;--color-steelblue_45:#A4E2FD;--sd-steelblue_45:#A4E2FD;--color-steelblue_60:#50BFF0;--sd-steelblue_60:#50BFF0;--color-steelblue_65:#229FD7;--sd-steelblue_65:#229FD7;--color-steelblue_70:#128FC7;--sd-steelblue_70:#128FC7;--color-steelblue_75:#066D9B;--sd-steelblue_75:#066D9B;--color-steelblue_80:#06587D;--sd-steelblue_80:#06587D;--color-steelblue_85:#033F59;--sd-steelblue_85:#033F59;--color-steelblue_90:#032D40;--sd-steelblue_90:#032D40;--color-steelblue_95:#02212F;--sd-steelblue_95:#02212F;--color-steelblue_99:#021A25;--sd-steelblue_99:#021A25;--color-oceanblue_15:#EAF5FE;--sd-oceanblue_15:#EAF5FE;--color-oceanblue_25:#D5EBFE;--sd-oceanblue_25:#D5EBFE;--color-oceanblue_50:#9CD1FC;--sd-oceanblue_50:#9CD1FC;--color-oceanblue_60:#5CB0F3;--sd-oceanblue_60:#5CB0F3;--color-oceanblue_65:#1F8AE1;--sd-oceanblue_65:#1F8AE1;--color-oceanblue_70:#006AC1;--sd-oceanblue_70:#006AC1;--color-oceanblue_75:#025497;--sd-oceanblue_75:#025497;--color-oceanblue_80:#004177;--sd-oceanblue_80:#004177;--color-oceanblue_85:#07284A;--sd-oceanblue_85:#07284A;--color-oceanblue_90:#051D36;--sd-oceanblue_90:#051D36;--color-oceanblue_95:#03172D;--sd-oceanblue_95:#03172D;--color-oceanblue_99:#011428;--sd-oceanblue_99:#011428;--color-brilliantblue_10:#EFF6FF;--sd-brilliantblue_10:#EFF6FF;--color-brilliantblue_20:#E6F1FF;--sd-brilliantblue_20:#E6F1FF;--color-brilliantblue_25:#D9EAFF;--sd-brilliantblue_25:#D9EAFF;--color-brilliantblue_40:#BBDAFF;--sd-brilliantblue_40:#BBDAFF;--color-brilliantblue_50:#93C4FF;--sd-brilliantblue_50:#93C4FF;--color-brilliantblue_60:#64ABFF;--sd-brilliantblue_60:#64ABFF;--color-brilliantblue_70:#2D8DFF;--sd-brilliantblue_70:#2D8DFF;--color-brilliantblue_75:#0075FF;--sd-brilliantblue_75:#0075FF;--color-brilliantblue_80:#005CC9;--sd-brilliantblue_80:#005CC9;--color-brilliantblue_85:#004290;--sd-brilliantblue_85:#004290;--color-brilliantblue_90:#002B5E;--sd-brilliantblue_90:#002B5E;--color-brilliantblue_95:#001B39;--sd-brilliantblue_95:#001B39;--color-brilliantblue_99:#001226;--sd-brilliantblue_99:#001226;--color-brilliantblue_05:#F5FAFF;--sd-brilliantblue_05:#F5FAFF;--sd-system-typography-control-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-default-font-size:12px;--sd-system-typography-control-xs-default-font-weight:400;--sd-system-typography-control-xs-default-text-decoration:none;--sd-system-typography-control-xs-default-line-height:20px;--sd-system-typography-control-xs-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-medium-font-size:12px;--sd-system-typography-control-xs-medium-font-weight:500;--sd-system-typography-control-xs-medium-text-decoration:none;--sd-system-typography-control-xs-medium-line-height:20px;--sd-system-typography-control-xs-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-underline-font-size:12px;--sd-system-typography-control-xs-underline-font-weight:500;--sd-system-typography-control-xs-underline-text-decoration:underline;--sd-system-typography-control-xs-underline-line-height:20px;--sd-system-typography-control-xs-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-xs-bold-font-weight:700;--sd-system-typography-control-xs-bold-font-size:12px;--sd-system-typography-control-xs-bold-line-height:20px;--sd-system-typography-control-xs-bold-text-decoration:none;--sd-system-typography-control-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-default-font-size:14px;--sd-system-typography-control-sm-default-font-weight:500;--sd-system-typography-control-sm-default-text-decoration:none;--sd-system-typography-control-sm-default-line-height:24px;--sd-system-typography-control-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-sm-underline-font-size:14px;--sd-system-typography-control-sm-underline-font-weight:500;--sd-system-typography-control-sm-underline-text-decoration:underline;--sd-system-typography-control-sm-underline-line-height:24px;--sd-system-typography-control-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-default-font-size:16px;--sd-system-typography-control-md-default-font-weight:500;--sd-system-typography-control-md-default-text-decoration:none;--sd-system-typography-control-md-default-line-height:26px;--sd-system-typography-control-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-md-underline-font-size:16px;--sd-system-typography-control-md-underline-font-weight:500;--sd-system-typography-control-md-underline-text-decoration:underline;--sd-system-typography-control-md-underline-line-height:26px;--sd-system-typography-control-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-control-lg-font-size:18px;--sd-system-typography-control-lg-font-weight:500;--sd-system-typography-control-lg-text-decoration:none;--sd-system-typography-control-lg-line-height:30px;--sd-system-typography-feedback-xs-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-xs-font-size:11px;--sd-system-typography-feedback-xs-font-weight:500;--sd-system-typography-feedback-xs-line-height:18px;--sd-system-typography-feedback-xs-text-decoration:none;--sd-system-typography-feedback-sm-regular-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-regular-font-size:12px;--sd-system-typography-feedback-sm-regular-font-weight:400;--sd-system-typography-feedback-sm-regular-line-height:20px;--sd-system-typography-feedback-sm-regular-text-decoration:none;--sd-system-typography-feedback-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-medium-font-size:12px;--sd-system-typography-feedback-sm-medium-font-weight:500;--sd-system-typography-feedback-sm-medium-line-height:20px;--sd-system-typography-feedback-sm-medium-text-decoration:none;--sd-system-typography-feedback-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-bold-font-size:12px;--sd-system-typography-feedback-sm-bold-font-weight:700;--sd-system-typography-feedback-sm-bold-text-decoration:none;--sd-system-typography-feedback-sm-bold-line-height:20px;--sd-system-typography-feedback-sm-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-sm-underline-font-size:12px;--sd-system-typography-feedback-sm-underline-font-weight:500;--sd-system-typography-feedback-sm-underline-line-height:20px;--sd-system-typography-feedback-sm-underline-text-decoration:underline;--sd-system-typography-feedback-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-bold-font-size:14px;--sd-system-typography-feedback-md-bold-font-weight:700;--sd-system-typography-feedback-md-bold-line-height:24px;--sd-system-typography-feedback-md-bold-text-decoration:none;--sd-system-typography-feedback-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-medium-font-size:14px;--sd-system-typography-feedback-md-medium-font-weight:500;--sd-system-typography-feedback-md-medium-line-height:24px;--sd-system-typography-feedback-md-medium-text-decoration:none;--sd-system-typography-feedback-md-underline-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-feedback-md-underline-font-size:14px;--sd-system-typography-feedback-md-underline-font-weight:700;--sd-system-typography-feedback-md-underline-line-height:24px;--sd-system-typography-feedback-md-underline-text-decoration:underline;--sd-system-typography-heading-sm-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-sm-font-weight:700;--sd-system-typography-heading-sm-font-size:14px;--sd-system-typography-heading-sm-line-height:24px;--sd-system-typography-heading-sm-text-decoration:none;--sd-system-typography-heading-md-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-md-font-weight:700;--sd-system-typography-heading-md-font-size:16px;--sd-system-typography-heading-md-text-decoration:none;--sd-system-typography-heading-md-line-height:26px;--sd-system-typography-heading-lg-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-heading-lg-font-weight:700;--sd-system-typography-heading-lg-font-size:18px;--sd-system-typography-heading-lg-line-height:30px;--sd-system-typography-heading-lg-text-decoration:none;--sd-system-typography-field-xs-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-xs-default-font-weight:400;--sd-system-typography-field-xs-default-font-size:11px;--sd-system-typography-field-xs-default-line-height:18px;--sd-system-typography-field-xs-default-text-decoration:none;--sd-system-typography-field-sm-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-default-font-weight:400;--sd-system-typography-field-sm-default-font-size:12px;--sd-system-typography-field-sm-default-line-height:20px;--sd-system-typography-field-sm-default-text-decoration:none;--sd-system-typography-field-sm-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-medium-font-weight:500;--sd-system-typography-field-sm-medium-font-size:12px;--sd-system-typography-field-sm-medium-text-decoration:none;--sd-system-typography-field-sm-medium-line-height:20px;--sd-system-typography-field-sm-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-sm-bold-font-weight:700;--sd-system-typography-field-sm-bold-font-size:12px;--sd-system-typography-field-sm-bold-text-decoration:none;--sd-system-typography-field-sm-bold-line-height:20px;--sd-system-typography-field-md-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-default-font-weight:400;--sd-system-typography-field-md-default-font-size:14px;--sd-system-typography-field-md-default-text-decoration:none;--sd-system-typography-field-md-default-line-height:24px;--sd-system-typography-field-md-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-medium-font-weight:500;--sd-system-typography-field-md-medium-font-size:14px;--sd-system-typography-field-md-medium-text-decoration:none;--sd-system-typography-field-md-medium-line-height:24px;--sd-system-typography-field-md-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-md-bold-font-weight:700;--sd-system-typography-field-md-bold-font-size:14px;--sd-system-typography-field-md-bold-text-decoration:none;--sd-system-typography-field-md-bold-line-height:24px;--sd-system-typography-field-lg-default-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-default-font-weight:400;--sd-system-typography-field-lg-default-font-size:16px;--sd-system-typography-field-lg-default-line-height:26px;--sd-system-typography-field-lg-default-text-decoration:none;--sd-system-typography-field-lg-medium-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-medium-font-weight:500;--sd-system-typography-field-lg-medium-font-size:16px;--sd-system-typography-field-lg-medium-line-height:26px;--sd-system-typography-field-lg-medium-text-decoration:none;--sd-system-typography-field-lg-bold-font-family:Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;--sd-system-typography-field-lg-bold-font-weight:700;--sd-system-typography-field-lg-bold-font-size:16px;--sd-system-typography-field-lg-bold-line-height:26px;--sd-system-typography-field-lg-bold-text-decoration:none;--sd-system-typography-navigation-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}";
138
138
 
139
139
  /*
140
140
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -5346,7 +5346,7 @@ class SdActionModal {
5346
5346
  if (this.height != null && this.height !== '') {
5347
5347
  sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
5348
5348
  }
5349
- 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() })))));
5349
+ 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() })))));
5350
5350
  }
5351
5351
  static get style() { return sdActionModalCss(); }
5352
5352
  static get cmpMeta() { return {
@@ -5399,7 +5399,7 @@ class SdBadge {
5399
5399
  color = 'blue';
5400
5400
  render() {
5401
5401
  const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
5402
- return (hAsync("div", { key: '2531ebcfe66e33f8ac31be0299865ee8aa45ed17', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'a8ddd518167b90fedb4d6d26cc28b17082f5fe0b', class: "sd-badge__dot" })));
5402
+ return (hAsync("div", { key: '71aebd3dd22a67eeb04189ff0e7c4379ec5d6802', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, hAsync("div", { key: 'd40e81130d58b6a03ffe0461478ee8af50cd7cf6', class: "sd-badge__dot" })));
5403
5403
  }
5404
5404
  static get style() { return sdBadgeCss(); }
5405
5405
  static get cmpMeta() { return {
@@ -5472,26 +5472,26 @@ var inputTokens = {
5472
5472
  textinput: textinput
5473
5473
  };
5474
5474
 
5475
- const sm$5 = inputTokens.textinput.sm;
5476
- const md$5 = inputTokens.textinput.md;
5475
+ const sm$6 = inputTokens.textinput.sm;
5476
+ const md$6 = inputTokens.textinput.md;
5477
5477
  const BARCODE_INPUT_SIZE_MAP = {
5478
5478
  sm: {
5479
- height: sm$5.height,
5480
- paddingX: sm$5.paddingX,
5481
- gap: sm$5.gap,
5482
- radius: sm$5.radius,
5483
- fontSize: sm$5.typography.fontSize,
5484
- lineHeight: sm$5.typography.lineHeight,
5485
- fontWeight: sm$5.typography.fontWeight,
5479
+ height: sm$6.height,
5480
+ paddingX: sm$6.paddingX,
5481
+ gap: sm$6.gap,
5482
+ radius: sm$6.radius,
5483
+ fontSize: sm$6.typography.fontSize,
5484
+ lineHeight: sm$6.typography.lineHeight,
5485
+ fontWeight: sm$6.typography.fontWeight,
5486
5486
  },
5487
5487
  md: {
5488
- height: md$5.height,
5489
- paddingX: md$5.paddingX,
5490
- gap: md$5.gap,
5491
- radius: md$5.radius,
5492
- fontSize: md$5.typography.fontSize,
5493
- lineHeight: md$5.typography.lineHeight,
5494
- fontWeight: md$5.typography.fontWeight,
5488
+ height: md$6.height,
5489
+ paddingX: md$6.paddingX,
5490
+ gap: md$6.gap,
5491
+ radius: md$6.radius,
5492
+ fontSize: md$6.typography.fontSize,
5493
+ lineHeight: md$6.typography.lineHeight,
5494
+ fontWeight: md$6.typography.fontWeight,
5495
5495
  },
5496
5496
  };
5497
5497
  const BARCODE_INPUT_COLORS = {
@@ -5642,7 +5642,7 @@ class SdBarcodeInput {
5642
5642
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
5643
5643
  '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
5644
5644
  };
5645
- 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 () => {
5645
+ 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 () => {
5646
5646
  if (this.disabled)
5647
5647
  return;
5648
5648
  this.internalValue = '';
@@ -6587,14 +6587,14 @@ class SdButton {
6587
6587
  const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
6588
6588
  const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
6589
6589
  const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
6590
- return (hAsync("button", { key: 'ea6482b86f91b26cd20ab635c357b655e92c2ec1', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
6590
+ return (hAsync("button", { key: '2a57abd6819306be62a379861e15cfa06c626e63', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
6591
6591
  '--sd-button-bg': config.color,
6592
6592
  '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS$1[preset],
6593
6593
  '--sd-button-border': PRESET_BORDER_COLORS$1[preset],
6594
6594
  '--sd-button-text': PRESET_TEXT_COLORS$1[preset],
6595
6595
  '--sd-button-icon': PRESET_ICON_COLORS$1[preset],
6596
6596
  '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
6597
- }, 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)" })))));
6597
+ }, 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)" })))));
6598
6598
  }
6599
6599
  static get style() { return sdButtonCss(); }
6600
6600
  static get cmpMeta() { return {
@@ -6781,7 +6781,34 @@ const datepicker = {
6781
6781
  group: {
6782
6782
  gap: "12"
6783
6783
  }
6784
- }}
6784
+ },
6785
+ time: {
6786
+ bg: {
6787
+ "default": "#F9F9F9",
6788
+ selected: "#F5FAFF"
6789
+ },
6790
+ date: {
6791
+ label: "#222222",
6792
+ unit: "#888888",
6793
+ gap: "6"
6794
+ },
6795
+ radius: "8",
6796
+ paddingX: "16",
6797
+ paddingY: "12",
6798
+ gap: "12",
6799
+ section: {
6800
+ gap: "12"
6801
+ },
6802
+ unit: {
6803
+ gap: "2"
6804
+ },
6805
+ typography: {
6806
+ fontWeight: "500",
6807
+ fontSize: "12",
6808
+ lineHeight: "20"
6809
+ }
6810
+ }
6811
+ }
6785
6812
  };
6786
6813
  var datepickerTokens = {
6787
6814
  datepicker: datepicker
@@ -7022,7 +7049,7 @@ class SdCalendar {
7022
7049
  const eventMap = this.eventMap;
7023
7050
  const legend = this.legendItems;
7024
7051
  const hasEvents = (this.events?.length ?? 0) > 0;
7025
- 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 => {
7052
+ 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 => {
7026
7053
  const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
7027
7054
  const isToday = cell.inCurrentMonth && today === cell.date;
7028
7055
  const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -7035,8 +7062,8 @@ class SdCalendar {
7035
7062
  'sd-calendar__day--disabled': isDisabled,
7036
7063
  }, 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 } })))))));
7037
7064
  })), legend.length > 0 && [
7038
- hAsync("span", { key: 'a06b1cd9ec93891e3762f6334949cd23b643290f', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
7039
- 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))))),
7065
+ hAsync("span", { key: 'd924bb7ce8ceb077cad4d35face238cbb6e39802', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
7066
+ 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))))),
7040
7067
  ]));
7041
7068
  }
7042
7069
  static get watchers() { return {
@@ -7293,7 +7320,7 @@ class SdCallout {
7293
7320
  }
7294
7321
  render() {
7295
7322
  const showTitle = this.type === 'danger';
7296
- 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())));
7323
+ 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())));
7297
7324
  }
7298
7325
  static get style() { return sdCalloutCss(); }
7299
7326
  static get cmpMeta() { return {
@@ -7320,7 +7347,7 @@ class SdCard {
7320
7347
  /** 카드 루트 엘리먼트에 추가할 클래스 */
7321
7348
  sdClass = '';
7322
7349
  render() {
7323
- return (hAsync(Fragment, { key: 'c8835377275c2bed1a193eaf0a1db0c1c6fde960' }, hAsync("div", { key: '37cec8daa273881a40258f632109d9490e5c6978', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: 'b1b485f3cfe056db25c79bbe15420484e61e5d1a' }))));
7350
+ return (hAsync(Fragment, { key: '517d48bc3444e448241974b93e31f0079d1f3ef6' }, hAsync("div", { key: '3917d6ba9fc5e20a4f45d8c798f9b29eb6a239de', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, hAsync("slot", { key: '430091d73c9419fdf8496f17fa1f52b5906fa1a4' }))));
7324
7351
  }
7325
7352
  static get style() { return sdCardCss(); }
7326
7353
  static get cmpMeta() { return {
@@ -7432,7 +7459,7 @@ class SdCheckbox {
7432
7459
  this.update = createEvent(this, "sdUpdate", 7);
7433
7460
  }
7434
7461
  get el() { return getElement(this); }
7435
- /** 현재 선택 상태 또는 배열 형태의 값 */
7462
+ /** 현재 선택 상태 또는 배열 형태의 값 (미지정 시 미선택 상태) */
7436
7463
  value;
7437
7464
  /** 배열 모드에서의 개별 값 */
7438
7465
  val;
@@ -7537,13 +7564,13 @@ class SdCheckbox {
7537
7564
  '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
7538
7565
  '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
7539
7566
  };
7540
- return (hAsync("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
7567
+ return (hAsync("label", { key: 'e8c51cf3c43e401dc7d5a625a424dc59203a18db', class: this.checkboxClasses, style: cssVars }, hAsync("input", { key: '46d20e76a9c5b7a8a44bf13c7f75970dc5c05bad', type: "checkbox", ref: el => {
7541
7568
  this.inputEl = el;
7542
- }, 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
7569
+ }, 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
7543
7570
  ? CHECKBOX_COLORS.checked.iconDisabled
7544
7571
  : this.inverse
7545
7572
  ? CHECKBOX_COLORS.checked.iconInverse
7546
- : CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
7573
+ : CHECKBOX_COLORS.checked.icon })) : null), this.label && (hAsync("span", { key: '2ef1708c384c6668f256b8a75d2c7821f06ec10f', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
7547
7574
  }
7548
7575
  static get watchers() { return {
7549
7576
  "value": [{
@@ -7653,8 +7680,8 @@ class SdChip {
7653
7680
  error = false;
7654
7681
  /** 비활성 상태 여부 */
7655
7682
  disabled = false;
7656
- /** 인라인 편집 가능 여부 */
7657
- editable = true;
7683
+ /** 인라인 편집 가능 여부 (기본값 false) */
7684
+ editable = false;
7658
7685
  /** 닫기 버튼 표시 여부 */
7659
7686
  showRemove = true;
7660
7687
  /** 편집 중 표시할 placeholder */
@@ -7739,11 +7766,11 @@ class SdChip {
7739
7766
  return this.inputEl ?? null;
7740
7767
  }
7741
7768
  /**
7742
- * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,
7743
- * false로 명시된 경우에만 편집 불가로 처리한다 (기본값 true).
7769
+ * editable이 명시적으로 true일 때만 편집 가능으로 처리한다 (기본값 false — RN SChip과 일치).
7770
+ * SSR 등에서 editable이 undefined로 들어와도 편집 불가로 안전하게 처리된다.
7744
7771
  */
7745
7772
  get isEditable() {
7746
- return this.editable !== false;
7773
+ return this.editable === true;
7747
7774
  }
7748
7775
  enterEditMode = () => {
7749
7776
  if (this.disabled || this.isEditing || !this.isEditable)
@@ -7877,7 +7904,7 @@ class SdChip {
7877
7904
  '--sd-chip-font-weight': typography.fontWeight,
7878
7905
  '--sd-chip-line-height': typography.lineHeight,
7879
7906
  };
7880
- return (hAsync("span", { key: '2cd717bc842330a28bbc89a662deda16f59106ee', class: {
7907
+ return (hAsync("span", { key: '1dbe21611f38fdcd5670bddf6da42ae4581253e8', class: {
7881
7908
  'sd-chip': true,
7882
7909
  [`sd-chip--${state}`]: true,
7883
7910
  'sd-chip--disabled': this.disabled,
@@ -7976,7 +8003,9 @@ const color = {
7976
8003
  },
7977
8004
  divider: {
7978
8005
  "default": "#E1E1E1"
7979
- }};
8006
+ },
8007
+ border: {
8008
+ "default": "#E1E1E1"}};
7980
8009
  const shadow = {
7981
8010
  spread: {
7982
8011
  md: {
@@ -8047,28 +8076,28 @@ var listItemTokens = {
8047
8076
  listItem: listItem$1
8048
8077
  };
8049
8078
 
8050
- const sm$4 = chipInputTokens.chipInput.sm;
8051
- const md$4 = chipInputTokens.chipInput.md;
8079
+ const sm$5 = chipInputTokens.chipInput.sm;
8080
+ const md$5 = chipInputTokens.chipInput.md;
8052
8081
  const CHIP_INPUT_SIZE_MAP = {
8053
8082
  sm: {
8054
- minHeight: sm$4.minHeight,
8055
- paddingX: sm$4.paddingX,
8056
- paddingY: sm$4.paddingY,
8057
- radius: sm$4.radius,
8058
- fontSize: sm$4.typography.fontSize,
8059
- lineHeight: sm$4.typography.lineHeight,
8060
- fontWeight: sm$4.typography.fontWeight,
8061
- fontFamily: sm$4.typography.fontFamily,
8083
+ minHeight: sm$5.minHeight,
8084
+ paddingX: sm$5.paddingX,
8085
+ paddingY: sm$5.paddingY,
8086
+ radius: sm$5.radius,
8087
+ fontSize: sm$5.typography.fontSize,
8088
+ lineHeight: sm$5.typography.lineHeight,
8089
+ fontWeight: sm$5.typography.fontWeight,
8090
+ fontFamily: sm$5.typography.fontFamily,
8062
8091
  },
8063
8092
  md: {
8064
- minHeight: md$4.minHeight,
8065
- paddingX: md$4.paddingX,
8066
- paddingY: md$4.paddingY,
8067
- radius: md$4.radius,
8068
- fontSize: md$4.typography.fontSize,
8069
- lineHeight: md$4.typography.lineHeight,
8070
- fontWeight: md$4.typography.fontWeight,
8071
- fontFamily: md$4.typography.fontFamily,
8093
+ minHeight: md$5.minHeight,
8094
+ paddingX: md$5.paddingX,
8095
+ paddingY: md$5.paddingY,
8096
+ radius: md$5.radius,
8097
+ fontSize: md$5.typography.fontSize,
8098
+ lineHeight: md$5.typography.lineHeight,
8099
+ fontWeight: md$5.typography.fontWeight,
8100
+ fontFamily: md$5.typography.fontFamily,
8072
8101
  },
8073
8102
  };
8074
8103
  const CHIP_INPUT_COLORS = {
@@ -8111,7 +8140,7 @@ const CHIP_INPUT_SUGGESTIONS = {
8111
8140
  emptyLineHeight: '20px',
8112
8141
  };
8113
8142
 
8114
- 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)}`;
8143
+ 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)}`;
8115
8144
 
8116
8145
  class SdChipInput {
8117
8146
  constructor(hostRef) {
@@ -8145,6 +8174,8 @@ class SdChipInput {
8145
8174
  useReset = false;
8146
8175
  /** 최대 입력 가능한 칩 개수 (없으면 제한 없음) */
8147
8176
  maxCount;
8177
+ /** 최대 개수·초기화 meta 위치 (end=우측 끝으로 정렬 / inline=콘텐츠에 이어서 배치) */
8178
+ metaPlacement = 'end';
8148
8179
  /** 중복 에러 메시지에 표시할 항목 이름 (없으면 기본 메시지 사용) */
8149
8180
  duplicateLabel;
8150
8181
  /** 자동완성 후보 목록 */
@@ -8155,8 +8186,8 @@ class SdChipInput {
8155
8186
  recommendedItems = [];
8156
8187
  /** 추천 항목 로딩 중 여부 */
8157
8188
  loadingRecommendedItems = false;
8158
- /** 자동완성 드롭다운 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 없으면 입력 필드 너비를 사용) */
8159
- autocompleteMinWidth;
8189
+ /** 드롭다운(자동완성) 최소 너비 (숫자면 px, 문자열이면 그대로 적용. 기본값 200) */
8190
+ dropdownMinWidth = 200;
8160
8191
  // sd-field props
8161
8192
  /** 레이블 텍스트 */
8162
8193
  label = '';
@@ -8529,16 +8560,16 @@ class SdChipInput {
8529
8560
  ...suggestionBoxBaseStyle,
8530
8561
  width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
8531
8562
  };
8532
- // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비를 유지한 채 텍스트 길이에 따라 늘어난다.
8533
- const autocompleteMinWidth = this.autocompleteMinWidth != null
8534
- ? typeof this.autocompleteMinWidth === 'number'
8535
- ? `${this.autocompleteMinWidth}px`
8536
- : this.autocompleteMinWidth
8537
- : `${this.fieldRef?.offsetWidth ?? 0}px`;
8563
+ // 자동완성은 입력 중인 칩(필드) 기준으로 노출되며, 최소 너비(기본 200px)를 유지한 채 텍스트 길이에 따라 늘어난다.
8564
+ const resolvedDropdownMinWidth = this.dropdownMinWidth == null
8565
+ ? `${this.fieldRef?.offsetWidth ?? 0}px`
8566
+ : typeof this.dropdownMinWidth === 'number'
8567
+ ? `${this.dropdownMinWidth}px`
8568
+ : this.dropdownMinWidth;
8538
8569
  const autocompleteBoxStyle = {
8539
8570
  ...suggestionBoxBaseStyle,
8540
8571
  width: 'max-content',
8541
- minWidth: autocompleteMinWidth,
8572
+ minWidth: resolvedDropdownMinWidth,
8542
8573
  };
8543
8574
  const suggestionItemStyle = {
8544
8575
  display: 'flex',
@@ -8566,7 +8597,7 @@ class SdChipInput {
8566
8597
  fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
8567
8598
  color: CHIP_INPUT_SUGGESTIONS.emptyColor,
8568
8599
  };
8569
- 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: {
8600
+ 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: {
8570
8601
  'sd-chip-input__field': true,
8571
8602
  'sd-chip-input__field--filled': this.inputValue !== '',
8572
8603
  'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -8574,12 +8605,15 @@ class SdChipInput {
8574
8605
  ? this.inputValue
8575
8606
  : this.internalValues.length === 0
8576
8607
  ? this.placeholder
8577
- : '' }, 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 && (
8608
+ : '' }, 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 && (
8578
8609
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
8579
- hAsync("div", { key: 'f2e5336974905e3b7672567b29ad4f902ed2bcdf', class: "sd-chip-input__reset",
8610
+ hAsync("div", { key: '2384ba5c13e27556f8135f71c43aa8dd98922850', class: {
8611
+ 'sd-chip-input__reset': true,
8612
+ 'sd-chip-input__reset--end': this.metaPlacement === 'end',
8613
+ }, "data-placement": this.metaPlacement,
8580
8614
  // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
8581
8615
  // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
8582
- 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) => {
8616
+ 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) => {
8583
8617
  const isSelected = (this.internalValues ?? []).includes(item);
8584
8618
  const isActive = i === this.activeSuggestionIndex && !isSelected;
8585
8619
  return (hAsync("div", { key: item, class: {
@@ -8605,7 +8639,7 @@ class SdChipInput {
8605
8639
  if (!isSelected)
8606
8640
  this.addChip(item);
8607
8641
  } }, hAsync("span", { style: { flex: '1' } }, item), isSelected && (hAsync("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
8608
- }))), 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: {
8642
+ }))), 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: {
8609
8643
  display: 'flex',
8610
8644
  flexWrap: 'wrap',
8611
8645
  gap: '8px',
@@ -8658,12 +8692,13 @@ class SdChipInput {
8658
8692
  "error": [1028],
8659
8693
  "useReset": [4, "use-reset"],
8660
8694
  "maxCount": [2, "max-count"],
8695
+ "metaPlacement": [1, "meta-placement"],
8661
8696
  "duplicateLabel": [1, "duplicate-label"],
8662
8697
  "suggestions": [1040],
8663
8698
  "loadingSuggestions": [4, "loading-suggestions"],
8664
8699
  "recommendedItems": [1040],
8665
8700
  "loadingRecommendedItems": [4, "loading-recommended-items"],
8666
- "autocompleteMinWidth": [8, "autocomplete-min-width"],
8701
+ "dropdownMinWidth": [8, "dropdown-min-width"],
8667
8702
  "label": [1],
8668
8703
  "labelWidth": [8, "label-width"],
8669
8704
  "hint": [1],
@@ -8777,7 +8812,7 @@ class SdCircleProgress {
8777
8812
  }
8778
8813
  const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
8779
8814
  const showPercent = !this.indeterminate;
8780
- return (hAsync(Host, { key: '869ec15d8df4b3e240b70599d8ba72618cda4c87', style: hostStyle }, hAsync("svg", { key: '446fa350f3c7e225e455f5f6c12b4aab45d20287', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { key: 'c3555674067f60ab1a1458d789d62fc9bbc8015f', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), hAsync("circle", { key: '62716c5645d957be08ea0e0818e47edda2c9e471', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (hAsync("span", { key: 'b56d75c0c40cb82d4c4c87161913b28063a9d369', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && hAsync("span", { key: '65cfb5cd0426c7cbf5ee7aefeaf675471abccaaf', class: "sd-circle-progress__label" }, this.label)));
8815
+ 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)));
8781
8816
  }
8782
8817
  static get style() { return sdCircleProgressCss(); }
8783
8818
  static get cmpMeta() { return {
@@ -8908,7 +8943,7 @@ class SdConfirmModal {
8908
8943
  const type = this.resolvedType;
8909
8944
  const iconName = CONFIRM_MODAL_ICON_MAP[type];
8910
8945
  const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
8911
- return (hAsync("div", { key: '0376a60d15b1e090a6ff8d4181f8afb107d5ede3', class: "sd-confirm-modal" }, hAsync("sd-ghost-button", { key: 'e652536ecf9a97c19a943de4ef5ebca99323a40a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '8bb1e4a9207681ced8f06fa1919c99104a03b71c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '08991739402f4a1f8b4da3af3df24eec556cf88e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), hAsync("div", { key: 'ba7aad2acaacc31f6e66122648c36b3398620b5b', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '6a0ccc07791d2d4c8923c1616fe9346d4a3c92c0', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showTagBox && (hAsync("div", { key: '0e380d6d5ffe607863bae04821098b7585016f96', class: "sd-confirm-modal__content-box" }, hAsync("slot", { key: 'de4eddc19f18831bf59797bda48aa4eaea3fac6a', name: "tag", onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (hAsync("sd-tag", { key: 'a63cfc4baaef0a1a8e666d5dba8528b8b135c1bc', name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '0e9ebab6b5aaf4af7282358f7ddc57dc75cd682a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showOption && (hAsync("div", { key: 'cd8088453591b2fbda51aac93c8284e0f3c23aa9', class: "sd-confirm-modal__option" }, hAsync("slot", { key: '4cbe1c57b47f12ba1f3cae23b55fb694f6b00787', name: "option", onSlotchange: () => this.syncHasSlottedContent() }, this.slotLabel && (hAsync("span", { key: 'ed7e7aa05f5e32de4a361dcf8e3f2c2207dc9981', class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), hAsync("div", { key: '069af4cfe63733e6960dd9e35888b26a06269026', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button", { key: 'a5371149596d109bede88df34736aaff88745f18', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), hAsync("sd-button", { key: '46c0406da30bd761aa4d09f70ae9bb735b8dff5f', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
8946
+ 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() }))));
8912
8947
  }
8913
8948
  static get style() { return sdConfirmModalCss(); }
8914
8949
  static get cmpMeta() { return {
@@ -9072,28 +9107,28 @@ var fieldTokens = {
9072
9107
  field: field
9073
9108
  };
9074
9109
 
9075
- const sm$3 = datepickerTokens.datepicker.sm;
9076
- const md$3 = datepickerTokens.datepicker.md;
9110
+ const sm$4 = datepickerTokens.datepicker.sm;
9111
+ const md$4 = datepickerTokens.datepicker.md;
9077
9112
  const DATEPICKER_SIZE_MAP = {
9078
9113
  sm: {
9079
- height: sm$3.height,
9080
- paddingX: sm$3.paddingX,
9081
- gap: sm$3.gap,
9082
- iconSize: sm$3.icon,
9083
- radius: sm$3.radius,
9084
- fontSize: sm$3.typography.fontSize,
9085
- lineHeight: sm$3.typography.lineHeight,
9086
- fontWeight: sm$3.typography.fontWeight,
9114
+ height: sm$4.height,
9115
+ paddingX: sm$4.paddingX,
9116
+ gap: sm$4.gap,
9117
+ iconSize: sm$4.icon,
9118
+ radius: sm$4.radius,
9119
+ fontSize: sm$4.typography.fontSize,
9120
+ lineHeight: sm$4.typography.lineHeight,
9121
+ fontWeight: sm$4.typography.fontWeight,
9087
9122
  },
9088
9123
  md: {
9089
- height: md$3.height,
9090
- paddingX: md$3.paddingX,
9091
- gap: md$3.gap,
9092
- iconSize: md$3.icon,
9093
- radius: md$3.radius,
9094
- fontSize: md$3.typography.fontSize,
9095
- lineHeight: md$3.typography.lineHeight,
9096
- fontWeight: md$3.typography.fontWeight,
9124
+ height: md$4.height,
9125
+ paddingX: md$4.paddingX,
9126
+ gap: md$4.gap,
9127
+ iconSize: md$4.icon,
9128
+ radius: md$4.radius,
9129
+ fontSize: md$4.typography.fontSize,
9130
+ lineHeight: md$4.typography.lineHeight,
9131
+ fontWeight: md$4.typography.fontWeight,
9097
9132
  },
9098
9133
  };
9099
9134
  const DATEPICKER_COLORS = {
@@ -9145,6 +9180,8 @@ class SdDatePicker {
9145
9180
  rules = [];
9146
9181
  /** 에러 상태 여부 */
9147
9182
  error = false;
9183
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
9184
+ status;
9148
9185
  /** 레이블 영역 아이콘 */
9149
9186
  icon = undefined;
9150
9187
  /** 레이블 툴팁 텍스트 */
@@ -9228,9 +9265,9 @@ class SdDatePicker {
9228
9265
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9229
9266
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9230
9267
  };
9231
- return (hAsync("sd-field", { key: 'f6fe03d9c87b8de3d33d641934b28f1e42a1b23a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: '0d77d31b48f1ee8f87f7e59f472b0335f19b00be', class: "sd-date-picker", ref: el => {
9268
+ 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 => {
9232
9269
  this.triggerRef = el;
9233
- } }, hAsync("sd-date-picker-trigger", { key: '003de27ec2c3c660b1c183f10af02d6d982a6069', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '719f5f0a191286d2f2d06ca41c5746f6dea569e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, hAsync("sd-calendar", { key: 'd4a62d31666f21f6fb9d03f09cf36d16acc1c8a9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
9270
+ } }, 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 })))));
9234
9271
  }
9235
9272
  static get watchers() { return {
9236
9273
  "isOpen": [{
@@ -9256,6 +9293,7 @@ class SdDatePicker {
9256
9293
  "errorMessage": [1, "error-message"],
9257
9294
  "rules": [16],
9258
9295
  "error": [1028],
9296
+ "status": [1],
9259
9297
  "icon": [16],
9260
9298
  "labelTooltip": [1, "label-tooltip"],
9261
9299
  "labelTooltipProps": [16],
@@ -9318,7 +9356,7 @@ class SdDatePickerTrigger {
9318
9356
  ? DATEPICKER_COLORS.icon.disabled
9319
9357
  : DATEPICKER_COLORS.icon.default,
9320
9358
  };
9321
- return (hAsync("div", { key: '60a3b3ac02181faaabc1b77bdd8923069afa0af0', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9359
+ return (hAsync("div", { key: 'b52c18bc057886ed8d6b1f5d145225a4c31f0035', role: "button", tabindex: this.disabled ? -1 : 0, class: {
9322
9360
  'sd-date-picker-trigger': true,
9323
9361
  'sd-date-picker-trigger--disabled': this.disabled,
9324
9362
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -9326,7 +9364,7 @@ class SdDatePickerTrigger {
9326
9364
  e.preventDefault();
9327
9365
  this.handleClick();
9328
9366
  }
9329
- } }, hAsync("sd-icon", { key: 'cafd36605dcc7edb20f11c008abd7b434eb1d36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), hAsync("span", { key: '6d9b6fad8b60fe8d9bcc02762b688eccc66f63b3', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
9367
+ } }, 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)));
9330
9368
  }
9331
9369
  static get style() { return sdDatePickerTriggerCss(); }
9332
9370
  static get cmpMeta() { return {
@@ -9350,6 +9388,33 @@ const RANGE_LAYOUT = {
9350
9388
  panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
9351
9389
  divider: datepickerTokens.datepicker.calendar.range.divider,
9352
9390
  };
9391
+ const timeTokens = datepickerTokens.datepicker.calendar.time;
9392
+ /** 시간(시:분) 선택 푸터 레이아웃 토큰 */
9393
+ const TIME_LAYOUT = {
9394
+ bgDefault: timeTokens.bg.default,
9395
+ bgSelected: timeTokens.bg.selected,
9396
+ dateLabel: timeTokens.date.label,
9397
+ dateUnit: timeTokens.date.unit,
9398
+ dateGap: timeTokens.date.gap,
9399
+ radius: timeTokens.radius,
9400
+ paddingX: timeTokens.paddingX,
9401
+ paddingY: timeTokens.paddingY,
9402
+ gap: timeTokens.gap,
9403
+ sectionGap: timeTokens.section.gap,
9404
+ unitGap: timeTokens.unit.gap,
9405
+ fontSize: timeTokens.typography.fontSize,
9406
+ lineHeight: timeTokens.typography.lineHeight,
9407
+ fontWeight: timeTokens.typography.fontWeight,
9408
+ // 시:분 입력 박스는 datepicker 필드(sm) 토큰을 재사용한다
9409
+ input: {
9410
+ height: DATEPICKER_SIZE_MAP.sm.height,
9411
+ radius: DATEPICKER_SIZE_MAP.sm.radius,
9412
+ border: DATEPICKER_COLORS.border.default,
9413
+ borderFocus: DATEPICKER_COLORS.border.focus,
9414
+ text: DATEPICKER_COLORS.text.default,
9415
+ placeholder: DATEPICKER_COLORS.text.disabled,
9416
+ },
9417
+ };
9353
9418
 
9354
9419
  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%}`;
9355
9420
 
@@ -9371,6 +9436,11 @@ class SdDateRangePicker {
9371
9436
  selectable;
9372
9437
  /** 최대 선택 가능한 날짜 범위 (일 단위) */
9373
9438
  maxRange;
9439
+ /**
9440
+ * 시간(시:분) 선택 푸터 사용 여부.
9441
+ * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
9442
+ */
9443
+ useTimePicker = false;
9374
9444
  /** 비활성 상태 여부 */
9375
9445
  disabled = false;
9376
9446
  /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -9392,6 +9462,8 @@ class SdDateRangePicker {
9392
9462
  rules = [];
9393
9463
  /** 에러 상태 여부 */
9394
9464
  error = false;
9465
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
9466
+ status;
9395
9467
  /** 레이블 영역 아이콘 */
9396
9468
  icon = undefined;
9397
9469
  /** 레이블 툴팁 텍스트 */
@@ -9451,7 +9523,9 @@ class SdDateRangePicker {
9451
9523
  }
9452
9524
  };
9453
9525
  handleSelect = (e) => {
9454
- this.closeDropdown();
9526
+ // 시간 선택 모드에서는 사용자가 시:분을 조정할 수 있도록 드롭다운을 닫지 않고 실시간 반영만 한다
9527
+ if (!this.useTimePicker)
9528
+ this.closeDropdown();
9455
9529
  this.value = e.detail;
9456
9530
  const nextValue = this.value;
9457
9531
  requestAnimationFrame(() => {
@@ -9466,6 +9540,14 @@ class SdDateRangePicker {
9466
9540
  return '';
9467
9541
  return `${this.value[0]} ~ ${this.value[1]}`;
9468
9542
  }
9543
+ static DEFAULT_PLACEHOLDER = 'YYYY-MM-DD ~ YYYY-MM-DD';
9544
+ get resolvedPlaceholder() {
9545
+ // placeholder를 따로 지정하지 않았고 시간 선택 모드이면 시:분을 포함한 기본 placeholder를 쓴다
9546
+ if (this.useTimePicker && this.placeholder === SdDateRangePicker.DEFAULT_PLACEHOLDER) {
9547
+ return 'YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm';
9548
+ }
9549
+ return this.placeholder;
9550
+ }
9469
9551
  disconnectedCallback() {
9470
9552
  if (this.closeAnimationTimer)
9471
9553
  clearTimeout(this.closeAnimationTimer);
@@ -9479,9 +9561,9 @@ class SdDateRangePicker {
9479
9561
  '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
9480
9562
  '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
9481
9563
  };
9482
- 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 => {
9564
+ 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 => {
9483
9565
  this.triggerRef = el;
9484
- } }, 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 })))));
9566
+ } }, 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 })))));
9485
9567
  }
9486
9568
  static get watchers() { return {
9487
9569
  "isOpen": [{
@@ -9498,6 +9580,7 @@ class SdDateRangePicker {
9498
9580
  "placeholder": [513],
9499
9581
  "selectable": [16],
9500
9582
  "maxRange": [2, "max-range"],
9583
+ "useTimePicker": [4, "use-time-picker"],
9501
9584
  "disabled": [516],
9502
9585
  "width": [8],
9503
9586
  "label": [1],
@@ -9508,6 +9591,7 @@ class SdDateRangePicker {
9508
9591
  "errorMessage": [1, "error-message"],
9509
9592
  "rules": [16],
9510
9593
  "error": [1028],
9594
+ "status": [1],
9511
9595
  "icon": [16],
9512
9596
  "labelTooltip": [1, "label-tooltip"],
9513
9597
  "labelTooltipProps": [16],
@@ -9526,7 +9610,7 @@ class SdDateRangePicker {
9526
9610
  }; }
9527
9611
  }
9528
9612
 
9529
- 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}`;
9613
+ 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)}`;
9530
9614
 
9531
9615
  class SdDateRangePickerCalendar {
9532
9616
  constructor(hostRef) {
@@ -9540,11 +9624,20 @@ class SdDateRangePickerCalendar {
9540
9624
  selectable;
9541
9625
  /** 최대 선택 가능 일 수 */
9542
9626
  maxRange;
9627
+ /** 시간(시:분) 선택 푸터 사용 여부 */
9628
+ useTimePicker = false;
9543
9629
  currentYear;
9544
9630
  currentMonth;
9545
9631
  pendingStart = '';
9546
9632
  hoverDate = '';
9547
9633
  displayValue = null;
9634
+ // 시:분은 2자리 미만도 허용하기 위해 문자열로 관리하고 emit/blur 시 패딩한다
9635
+ startHour = '00';
9636
+ startMinute = '00';
9637
+ endHour = '00';
9638
+ endMinute = '00';
9639
+ /** 직접 emit한 값이 value prop으로 되돌아오는 에코를 구분해 시간 입력 clobber를 막는다 */
9640
+ lastEmitted = '';
9548
9641
  /** 날짜 범위 선택 시 발생합니다. */
9549
9642
  select;
9550
9643
  /** 달력 뷰가 변경될 때 발생합니다. */
@@ -9557,13 +9650,31 @@ class SdDateRangePickerCalendar {
9557
9650
  this.syncFromValue();
9558
9651
  }
9559
9652
  syncFromValue() {
9560
- const base = this.value?.[0] || today;
9653
+ // 자신이 emit한 값이 그대로 돌아온 경우(에코)에는 시간 입력 상태를 건드리지 않는다
9654
+ if (this.useTimePicker && JSON.stringify(this.value) === this.lastEmitted)
9655
+ return;
9656
+ const start = this.splitDateTime(this.value?.[0]);
9657
+ const end = this.splitDateTime(this.value?.[1]);
9658
+ const base = start.date || today;
9561
9659
  const [year, month] = base.split('-').map(Number);
9562
9660
  this.currentYear = year;
9563
9661
  this.currentMonth = month;
9564
9662
  this.pendingStart = '';
9565
9663
  this.hoverDate = '';
9566
- this.displayValue = this.value ? [this.value[0], this.value[1]] : null;
9664
+ // displayValue는 날짜 부분만 보관 — 캘린더 그리드 로직은 시간과 무관하게 동작한다
9665
+ this.displayValue = this.value ? [start.date, end.date] : null;
9666
+ this.startHour = start.hour;
9667
+ this.startMinute = start.minute;
9668
+ this.endHour = end.hour;
9669
+ this.endMinute = end.minute;
9670
+ }
9671
+ /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DD"를 날짜/시/분으로 분리한다 */
9672
+ splitDateTime(v) {
9673
+ if (v == null || v === '')
9674
+ return { date: '', hour: '00', minute: '00' };
9675
+ const [date = '', time = ''] = v.split(' ');
9676
+ const [hour = '00', minute = '00'] = time.split(':');
9677
+ return { date, hour, minute };
9567
9678
  }
9568
9679
  get rightYear() {
9569
9680
  return this.currentMonth === 12 ? this.currentYear + 1 : this.currentYear;
@@ -9670,13 +9781,69 @@ class SdDateRangePickerCalendar {
9670
9781
  this.pendingStart = cell.date;
9671
9782
  this.displayValue = null;
9672
9783
  this.hoverDate = '';
9784
+ // 새 범위 선택을 시작하면 시작=00:00, 종료=23:59(하루 전체)로 초기화한다
9785
+ if (this.useTimePicker) {
9786
+ this.startHour = '00';
9787
+ this.startMinute = '00';
9788
+ this.endHour = '23';
9789
+ this.endMinute = '59';
9790
+ }
9673
9791
  return;
9674
9792
  }
9675
9793
  const newRange = [this.pendingStart, cell.date];
9676
9794
  this.pendingStart = '';
9677
9795
  this.hoverDate = '';
9678
9796
  this.displayValue = newRange;
9679
- this.select.emit(newRange);
9797
+ this.emitRange(newRange[0], newRange[1]);
9798
+ }
9799
+ /** 날짜 범위(+ useTimePicker면 시:분)를 결합해 sdSelect로 emit한다 */
9800
+ emitRange(startDate, endDate) {
9801
+ const range = this.useTimePicker
9802
+ ? [
9803
+ `${startDate} ${this.pad(this.startHour)}:${this.pad(this.startMinute)}`,
9804
+ `${endDate} ${this.pad(this.endHour)}:${this.pad(this.endMinute)}`,
9805
+ ]
9806
+ : [startDate, endDate];
9807
+ this.lastEmitted = JSON.stringify(range);
9808
+ this.select.emit(range);
9809
+ }
9810
+ pad(v) {
9811
+ return String(Number(v) || 0).padStart(2, '0');
9812
+ }
9813
+ /** 시:분 입력 — 숫자만/2자리로 제한하고 범위(시 0~23, 분 0~59)로 클램프한다 */
9814
+ handleTimeInput(which, part, event) {
9815
+ const input = event.target;
9816
+ const digits = input.value.replace(/\D/g, '').slice(0, 2);
9817
+ const max = part === 'h' ? 23 : 59;
9818
+ const next = digits !== '' && Number(digits) > max ? String(max) : digits;
9819
+ input.value = next;
9820
+ this.setTimePart(which, part, next);
9821
+ // 범위가 확정된 상태면 실시간으로 재emit한다
9822
+ if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
9823
+ this.emitRange(this.displayValue[0], this.displayValue[1]);
9824
+ }
9825
+ }
9826
+ handleTimeBlur(which, part) {
9827
+ this.setTimePart(which, part, this.pad(this.getTimePart(which, part)));
9828
+ }
9829
+ getTimePart(which, part) {
9830
+ if (which === 'start')
9831
+ return part === 'h' ? this.startHour : this.startMinute;
9832
+ return part === 'h' ? this.endHour : this.endMinute;
9833
+ }
9834
+ setTimePart(which, part, value) {
9835
+ if (which === 'start') {
9836
+ if (part === 'h')
9837
+ this.startHour = value;
9838
+ else
9839
+ this.startMinute = value;
9840
+ }
9841
+ else {
9842
+ if (part === 'h')
9843
+ this.endHour = value;
9844
+ else
9845
+ this.endMinute = value;
9846
+ }
9680
9847
  }
9681
9848
  handleDayHover(cell) {
9682
9849
  if (!cell.inCurrentMonth)
@@ -9742,6 +9909,22 @@ class SdDateRangePickerCalendar {
9742
9909
  }, 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 : '')));
9743
9910
  }))));
9744
9911
  }
9912
+ renderTimeSection(which, date, suffix) {
9913
+ const active = date !== '';
9914
+ const [year = '', month = '', day = ''] = active ? date.split('-') : [];
9915
+ const hour = which === 'start' ? this.startHour : this.endHour;
9916
+ const minute = which === 'start' ? this.startMinute : this.endMinute;
9917
+ const renderNum = (n, strip) => (hAsync("span", { class: "sd-date-range-picker-calendar__time-num" }, active && n !== '' ? (strip ? String(Number(n)) : n) : '-'));
9918
+ return (hAsync("div", { class: {
9919
+ 'sd-date-range-picker-calendar__time-section': true,
9920
+ 'sd-date-range-picker-calendar__time-section--active': active,
9921
+ } }, 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)));
9922
+ }
9923
+ renderTimeFooter() {
9924
+ const startDate = this.pendingStart || this.displayValue?.[0] || '';
9925
+ const endDate = this.displayValue?.[1] || '';
9926
+ 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, '까지'))));
9927
+ }
9745
9928
  render() {
9746
9929
  const cssVars = {
9747
9930
  '--calendar-bg': CALENDAR_LAYOUT.bg,
@@ -9774,8 +9957,31 @@ class SdDateRangePickerCalendar {
9774
9957
  '--range-height': `${RANGE_LAYOUT.height}px`,
9775
9958
  '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
9776
9959
  '--range-divider': RANGE_LAYOUT.divider,
9960
+ '--time-bg-default': TIME_LAYOUT.bgDefault,
9961
+ '--time-bg-selected': TIME_LAYOUT.bgSelected,
9962
+ '--time-date-label': TIME_LAYOUT.dateLabel,
9963
+ '--time-date-unit': TIME_LAYOUT.dateUnit,
9964
+ '--time-date-gap': `${TIME_LAYOUT.dateGap}px`,
9965
+ '--time-radius': `${TIME_LAYOUT.radius}px`,
9966
+ '--time-padding-x': `${TIME_LAYOUT.paddingX}px`,
9967
+ '--time-padding-y': `${TIME_LAYOUT.paddingY}px`,
9968
+ '--time-gap': `${TIME_LAYOUT.gap}px`,
9969
+ '--time-section-gap': `${TIME_LAYOUT.sectionGap}px`,
9970
+ '--time-unit-gap': `${TIME_LAYOUT.unitGap}px`,
9971
+ '--time-font-size': `${TIME_LAYOUT.fontSize}px`,
9972
+ '--time-line-height': `${TIME_LAYOUT.lineHeight}px`,
9973
+ '--time-font-weight': TIME_LAYOUT.fontWeight,
9974
+ '--time-input-height': `${TIME_LAYOUT.input.height}px`,
9975
+ '--time-input-radius': `${TIME_LAYOUT.input.radius}px`,
9976
+ '--time-input-border': TIME_LAYOUT.input.border,
9977
+ '--time-input-border-focus': TIME_LAYOUT.input.borderFocus,
9978
+ '--time-input-text': TIME_LAYOUT.input.text,
9979
+ '--time-input-placeholder': TIME_LAYOUT.input.placeholder,
9777
9980
  };
9778
- return (hAsync(Fragment, { key: '21999354836fc4068eecc9d115fb4c5e28a8f411' }, hAsync("div", { key: '1bc993c9e5cb6f02152591c3f70b68fb580a392b', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), hAsync("div", { key: '09564bf7c14a55c7be56726fefbb6cec793df783', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), hAsync("span", { key: '5d8910e7c463c33ad8719a293a616b7f50095532', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
9981
+ return (hAsync(Fragment, { key: '7d368d23f2c9d2b28c847a7fee5de474edc350f0' }, hAsync("div", { key: '6d97bfa728eb65c46d21f53c3b046b1a0c7d2ff6', class: {
9982
+ 'sd-date-range-picker-calendar': true,
9983
+ 'sd-date-range-picker-calendar--with-time': this.useTimePicker,
9984
+ }, 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())));
9779
9985
  }
9780
9986
  static get watchers() { return {
9781
9987
  "value": [{
@@ -9790,11 +9996,16 @@ class SdDateRangePickerCalendar {
9790
9996
  "value": [16],
9791
9997
  "selectable": [16],
9792
9998
  "maxRange": [2, "max-range"],
9999
+ "useTimePicker": [4, "use-time-picker"],
9793
10000
  "currentYear": [32],
9794
10001
  "currentMonth": [32],
9795
10002
  "pendingStart": [32],
9796
10003
  "hoverDate": [32],
9797
- "displayValue": [32]
10004
+ "displayValue": [32],
10005
+ "startHour": [32],
10006
+ "startMinute": [32],
10007
+ "endHour": [32],
10008
+ "endMinute": [32]
9798
10009
  },
9799
10010
  "$listeners$": undefined,
9800
10011
  "$lazyBundleId$": "-",
@@ -9818,7 +10029,7 @@ class SdDivider {
9818
10029
  const hostStyle = {
9819
10030
  '--sd-divider-color': DIVIDER_COLORS.default,
9820
10031
  };
9821
- return (hAsync(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, hAsync("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
10032
+ return (hAsync(Host, { key: '5e25f94dbe34f19280f6952e0a1bfbf4e4816264', style: hostStyle }, hAsync("hr", { key: 'a47f51ba0dfc15819cd5cda169554433b978eb15', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
9822
10033
  }
9823
10034
  static get style() { return sdDividerCss(); }
9824
10035
  static get cmpMeta() { return {
@@ -10263,28 +10474,28 @@ const FIELD_ADDON_ALIGN_MAP = {
10263
10474
  center: 'center',
10264
10475
  end: 'flex-end',
10265
10476
  };
10266
- const sm$2 = fieldTokens.field.label.sm;
10267
- const md$2 = fieldTokens.field.label.md;
10477
+ const sm$3 = fieldTokens.field.label.sm;
10478
+ const md$3 = fieldTokens.field.label.md;
10268
10479
  const FIELD_LABEL_SIZE_MAP = {
10269
10480
  sm: {
10270
- height: sm$2.height,
10271
- gap: sm$2.gap,
10272
- icon: sm$2.icon,
10273
- fontSize: sm$2.typography.fontSize,
10274
- lineHeight: sm$2.typography.lineHeight,
10275
- fontWeight: sm$2.typography.fontWeight,
10481
+ height: sm$3.height,
10482
+ gap: sm$3.gap,
10483
+ icon: sm$3.icon,
10484
+ fontSize: sm$3.typography.fontSize,
10485
+ lineHeight: sm$3.typography.lineHeight,
10486
+ fontWeight: sm$3.typography.fontWeight,
10276
10487
  },
10277
10488
  md: {
10278
- height: md$2.height,
10279
- gap: md$2.gap,
10280
- icon: md$2.icon,
10281
- fontSize: md$2.typography.fontSize,
10282
- lineHeight: md$2.typography.lineHeight,
10283
- fontWeight: md$2.typography.fontWeight,
10489
+ height: md$3.height,
10490
+ gap: md$3.gap,
10491
+ icon: md$3.icon,
10492
+ fontSize: md$3.typography.fontSize,
10493
+ lineHeight: md$3.typography.lineHeight,
10494
+ fontWeight: md$3.typography.fontWeight,
10284
10495
  },
10285
10496
  };
10286
10497
 
10287
- 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)}`;
10498
+ 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)}`;
10288
10499
 
10289
10500
  const FORM_PARENT_TAGS = [
10290
10501
  'sd-input',
@@ -10295,6 +10506,8 @@ const FORM_PARENT_TAGS = [
10295
10506
  'sd-file-picker',
10296
10507
  'sd-date-picker',
10297
10508
  'sd-date-range-picker',
10509
+ 'sd-time-picker',
10510
+ 'sd-time-range-picker',
10298
10511
  'sd-chip-input',
10299
10512
  ];
10300
10513
  class SdField {
@@ -10336,6 +10549,13 @@ class SdField {
10336
10549
  label = '';
10337
10550
  /** 레이블 너비 */
10338
10551
  labelWidth = '';
10552
+ /**
10553
+ * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
10554
+ * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
10555
+ */
10556
+ labelHeight;
10557
+ /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
10558
+ multiline = false;
10339
10559
  /** 필드 우측 어드온 레이블 */
10340
10560
  addonLabel = '';
10341
10561
  /** 어드온 정렬 방향 */
@@ -10466,7 +10686,11 @@ class SdField {
10466
10686
  };
10467
10687
  const labelCssVars = this.label !== ''
10468
10688
  ? {
10469
- '--sd-field-label-height': `${labelTokens.height}px`,
10689
+ '--sd-field-label-height': this.labelHeight !== undefined && this.labelHeight !== '' && this.labelHeight !== 0
10690
+ ? typeof this.labelHeight === 'number'
10691
+ ? `${this.labelHeight}px`
10692
+ : this.labelHeight
10693
+ : `${labelTokens.height}px`,
10470
10694
  '--sd-field-label-gap': `${labelTokens.gap}px`,
10471
10695
  '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
10472
10696
  '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
@@ -10498,19 +10722,20 @@ class SdField {
10498
10722
  : {}),
10499
10723
  }
10500
10724
  : {};
10501
- return (hAsync("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
10725
+ return (hAsync("div", { key: 'd29e49fe9ecf467f0c1ed443524fac2648dc9da4', class: {
10502
10726
  'sd-field': true,
10503
10727
  'sd-field--has-label': this.label !== '',
10504
10728
  'sd-field--has-addon': addon !== '',
10729
+ 'sd-field--multiline': this.multiline,
10505
10730
  'sd-field--borderless': this.borderless,
10506
10731
  [this.fieldStatus]: this.fieldStatus !== '',
10507
- }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, hAsync("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), hAsync("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, hAsync("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
10732
+ }, 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: {
10508
10733
  'sd-field__control': true,
10509
10734
  'sd-field__control--has-addon': addon !== '',
10510
10735
  }, style: this.width !== '' && this.width !== 0
10511
10736
  ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
10512
- : {} }, addon && (hAsync("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
10513
- Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), hAsync("slot", { key: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), this.errorMsg !== '' || this.errorMessage !== '' ? (hAsync("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && hAsync("div", { class: "sd-field__hint" }, this.hint))))));
10737
+ : {} }, addon && (hAsync("div", { key: '7ac28abf5f37b7ada42b16f81227afb5c7f8d656', class: "sd-field__addon" }, this.icon && (hAsync("sd-icon", { key: 'd995424c6f620b090006cdbcf8645d2ff822e802', name: this.icon.name, size: this.icon.size ??
10738
+ 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))))));
10514
10739
  }
10515
10740
  renderLabel(label) {
10516
10741
  if (label == null || label === '')
@@ -10538,6 +10763,8 @@ class SdField {
10538
10763
  "borderless": [4],
10539
10764
  "label": [1],
10540
10765
  "labelWidth": [8, "label-width"],
10766
+ "labelHeight": [8, "label-height"],
10767
+ "multiline": [4],
10541
10768
  "addonLabel": [1, "addon-label"],
10542
10769
  "addonAlign": [1, "addon-align"],
10543
10770
  "icon": [16],
@@ -10561,12 +10788,39 @@ const filepicker = {
10561
10788
  paddingX: "12",
10562
10789
  gap: "8",
10563
10790
  radius: "4",
10791
+ borderWidth: "1",
10564
10792
  typography: {
10793
+ 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",
10565
10794
  fontWeight: "400",
10566
10795
  fontSize: "12",
10567
- lineHeight: "20"},
10796
+ lineHeight: "20",
10797
+ textDecoration: "none"
10798
+ },
10568
10799
  icon: "16"
10569
10800
  },
10801
+ md: {
10802
+ height: "36",
10803
+ paddingX: "16",
10804
+ gap: "12",
10805
+ radius: "6",
10806
+ borderWidth: "1",
10807
+ typography: {
10808
+ 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",
10809
+ fontWeight: "400",
10810
+ fontSize: "14",
10811
+ textDecoration: "none",
10812
+ lineHeight: "24"
10813
+ },
10814
+ icon: "20"
10815
+ },
10816
+ border: {
10817
+ "default": "#AAAAAA",
10818
+ disabled: "#CCCCCC"
10819
+ },
10820
+ bg: {
10821
+ "default": "#FFFFFF",
10822
+ disabled: "#E1E1E1"
10823
+ },
10570
10824
  text: {
10571
10825
  "default": "#222222",
10572
10826
  placeholder: "#AAAAAA",
@@ -10581,15 +10835,25 @@ var filePickerTokens = {
10581
10835
  };
10582
10836
 
10583
10837
  const fp = filePickerTokens.filepicker;
10584
- const FILE_PICKER_LAYOUT = {
10585
- height: fp.sm.height,
10586
- paddingX: fp.sm.paddingX,
10587
- gap: fp.sm.gap,
10588
- radius: fp.sm.radius,
10589
- fontSize: fp.sm.typography.fontSize,
10590
- lineHeight: fp.sm.typography.lineHeight,
10591
- fontWeight: fp.sm.typography.fontWeight,
10592
- iconSize: fp.sm.icon};
10838
+ const buildLayout = (s) => ({
10839
+ height: fp[s].height,
10840
+ paddingX: fp[s].paddingX,
10841
+ gap: fp[s].gap,
10842
+ radius: fp[s].radius,
10843
+ borderWidth: fp[s].borderWidth,
10844
+ fontSize: fp[s].typography.fontSize,
10845
+ lineHeight: fp[s].typography.lineHeight,
10846
+ fontWeight: fp[s].typography.fontWeight,
10847
+ iconSize: fp[s].icon,
10848
+ contentsGap: fieldTokens.field.contents.gap,
10849
+ });
10850
+ /** 기본(sm) 레이아웃 — 하위호환용 단일 export */
10851
+ const FILE_PICKER_LAYOUT = buildLayout('sm');
10852
+ /** size별 레이아웃 맵 */
10853
+ const FILE_PICKER_LAYOUTS = {
10854
+ sm: FILE_PICKER_LAYOUT,
10855
+ md: buildLayout('md'),
10856
+ };
10593
10857
  const FILE_PICKER_COLORS = {
10594
10858
  text: fp.text,
10595
10859
  icon: {
@@ -10636,6 +10900,8 @@ class SdFilePicker {
10636
10900
  /** 최대 파일 개수 */
10637
10901
  maxFiles;
10638
10902
  // sd-field 패스스루 props
10903
+ /** 필드 크기 */
10904
+ size = 'sm';
10639
10905
  /** 폼 연동용 name 속성 */
10640
10906
  name = nanoid();
10641
10907
  /** 레이블 텍스트 */
@@ -10838,7 +11104,7 @@ class SdFilePicker {
10838
11104
  renderChipList() {
10839
11105
  if (!this.hasChips())
10840
11106
  return null;
10841
- return (hAsync("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (hAsync("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
11107
+ 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) })))));
10842
11108
  }
10843
11109
  renderListbox() {
10844
11110
  if (!this.hasChips() || !this.isListboxOpen)
@@ -10864,38 +11130,39 @@ class SdFilePicker {
10864
11130
  render() {
10865
11131
  const hasFiles = this.hasFiles();
10866
11132
  const displayText = this.getDisplayText();
11133
+ const layout = FILE_PICKER_LAYOUTS[this.size] ?? FILE_PICKER_LAYOUT;
10867
11134
  const cssVars = {
10868
- '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
10869
- '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
10870
- '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
10871
- '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
10872
- '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
11135
+ '--sd-file-picker-font-size': `${layout.fontSize}px`,
11136
+ '--sd-file-picker-line-height': `${layout.lineHeight}px`,
11137
+ '--sd-file-picker-font-weight': layout.fontWeight,
11138
+ '--sd-file-picker-padding-x': `${layout.paddingX}px`,
11139
+ '--sd-file-picker-gap': `${layout.gap}px`,
10873
11140
  '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
10874
11141
  '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
10875
11142
  '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
10876
- // sd-field 시스템 변수 override
10877
- '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
10878
- '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
11143
+ // sd-field 시스템 변수 override (size에 맞춰)
11144
+ [`--sd-system-size-field-${this.size}-height`]: `${layout.height}px`,
11145
+ [`--sd-system-radius-field-${this.size}`]: `${layout.radius}px`,
10879
11146
  };
10880
11147
  const showListbox = this.multiple && this.useMultipleListBox;
10881
- const content = (hAsync("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
11148
+ 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 => {
10882
11149
  if (e.key === 'Enter' || e.key === ' ') {
10883
11150
  e.preventDefault();
10884
11151
  this.handleClick();
10885
11152
  }
10886
- } }, hAsync("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), hAsync("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), hAsync("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
11153
+ } }, 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: {
10887
11154
  'sd-file-picker__text': true,
10888
11155
  'sd-file-picker__text--placeholder': !hasFiles,
10889
11156
  'sd-file-picker__text--active': hasFiles,
10890
- } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
11157
+ } }, displayText), showListbox && hasFiles && !this.disabled && (hAsync("sd-ghost-button", { key: '8e42d38452d00256147ee65e614bdeb7040917d7', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
10891
11158
  'sd-file-picker__caret': true,
10892
11159
  'sd-file-picker__caret--open': this.isListboxOpen,
10893
- }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (hAsync("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (hAsync("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
10894
- return (hAsync("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
11160
+ }, 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))));
11161
+ return (hAsync("div", { key: '858fea100a9317ac6806ae40699e9f5608394e10', class: {
10895
11162
  'sd-file-picker__wrapper': true,
10896
11163
  'sd-file-picker--inline': this.inline,
10897
11164
  'sd-file-picker--inline-disabled': this.inline && this.disabled,
10898
- }, style: cssVars }, hAsync("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
11165
+ }, 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()));
10899
11166
  }
10900
11167
  static get watchers() { return {
10901
11168
  "value": [{
@@ -10917,6 +11184,7 @@ class SdFilePicker {
10917
11184
  "maxFileSize": [8, "max-file-size"],
10918
11185
  "maxTotalSize": [8, "max-total-size"],
10919
11186
  "maxFiles": [8, "max-files"],
11187
+ "size": [513],
10920
11188
  "name": [1],
10921
11189
  "label": [1],
10922
11190
  "labelWidth": [8, "label-width"],
@@ -10943,7 +11211,7 @@ class SdFilePicker {
10943
11211
  },
10944
11212
  "$listeners$": undefined,
10945
11213
  "$lazyBundleId$": "-",
10946
- "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"], ["useMultipleListBox", "use-multiple-list-box"]]
11214
+ "$attrsToReflect$": [["placeholder", "placeholder"], ["disabled", "disabled"], ["inline", "inline"], ["multiple", "multiple"], ["useMultipleListBox", "use-multiple-list-box"], ["size", "size"]]
10947
11215
  }; }
10948
11216
  }
10949
11217
 
@@ -11127,7 +11395,7 @@ class SdFloatingPopover {
11127
11395
  }
11128
11396
  }
11129
11397
  render() {
11130
- return hAsync("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
11398
+ return hAsync("slot", { key: 'f45790ba4fc45aef991a54b409acc2791342fcdf' });
11131
11399
  }
11132
11400
  static get style() { return sdFloatingPortalCss(); }
11133
11401
  static get cmpMeta() { return {
@@ -11376,6 +11644,11 @@ class SdGhostButton {
11376
11644
  intent = 'default';
11377
11645
  /** 스크린리더용 접근성 레이블 */
11378
11646
  ariaLabel = '';
11647
+ /**
11648
+ * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
11649
+ * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
11650
+ */
11651
+ pressed;
11379
11652
  /** 호버 시 표시할 툴팁 텍스트 */
11380
11653
  tooltipText;
11381
11654
  /** 비활성 상태 여부 */
@@ -11433,16 +11706,16 @@ class SdGhostButton {
11433
11706
  const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
11434
11707
  const tooltipText = (this.tooltipText ?? '').trim();
11435
11708
  const hasTooltip = tooltipText.length > 0;
11436
- return (hAsync("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
11709
+ return (hAsync("button", { key: '921a2e6e54aa3cbb0e6c14ad117d6ddcfc753618', class: {
11437
11710
  'sd-ghost-button': true,
11438
11711
  'sd-ghost-button--disabled': this.disabled,
11439
- }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
11712
+ }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, "aria-pressed": this.pressed, style: {
11440
11713
  '--sd-ghost-button-size': `${sizeConfig.size}px`,
11441
11714
  '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
11442
11715
  '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
11443
11716
  '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
11444
11717
  '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
11445
- }, 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 })));
11718
+ }, 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 })));
11446
11719
  }
11447
11720
  static get style() { return sdGhostButtonCss(); }
11448
11721
  static get cmpMeta() { return {
@@ -11453,6 +11726,7 @@ class SdGhostButton {
11453
11726
  "size": [1],
11454
11727
  "intent": [1],
11455
11728
  "ariaLabel": [1, "aria-label"],
11729
+ "pressed": [4, "aria-pressed"],
11456
11730
  "tooltipText": [1, "tooltip-text"],
11457
11731
  "disabled": [4],
11458
11732
  "isTooltipOpen": [32]
@@ -12007,26 +12281,26 @@ class SdIcon {
12007
12281
  }; }
12008
12282
  }
12009
12283
 
12010
- const sm$1 = inputTokens.textinput.sm;
12011
- const md$1 = inputTokens.textinput.md;
12284
+ const sm$2 = inputTokens.textinput.sm;
12285
+ const md$2 = inputTokens.textinput.md;
12012
12286
  const INPUT_SIZE_MAP = {
12013
12287
  sm: {
12014
- height: sm$1.height,
12015
- paddingX: sm$1.paddingX,
12016
- gap: sm$1.gap,
12017
- radius: sm$1.radius,
12018
- fontSize: sm$1.typography.fontSize,
12019
- lineHeight: sm$1.typography.lineHeight,
12020
- fontWeight: sm$1.typography.fontWeight,
12288
+ height: sm$2.height,
12289
+ paddingX: sm$2.paddingX,
12290
+ gap: sm$2.gap,
12291
+ radius: sm$2.radius,
12292
+ fontSize: sm$2.typography.fontSize,
12293
+ lineHeight: sm$2.typography.lineHeight,
12294
+ fontWeight: sm$2.typography.fontWeight,
12021
12295
  },
12022
12296
  md: {
12023
- height: md$1.height,
12024
- paddingX: md$1.paddingX,
12025
- gap: md$1.gap,
12026
- radius: md$1.radius,
12027
- fontSize: md$1.typography.fontSize,
12028
- lineHeight: md$1.typography.lineHeight,
12029
- fontWeight: md$1.typography.fontWeight,
12297
+ height: md$2.height,
12298
+ paddingX: md$2.paddingX,
12299
+ gap: md$2.gap,
12300
+ radius: md$2.radius,
12301
+ fontSize: md$2.typography.fontSize,
12302
+ lineHeight: md$2.typography.lineHeight,
12303
+ fontWeight: md$2.typography.fontWeight,
12030
12304
  },
12031
12305
  };
12032
12306
  const INPUT_COLORS = {
@@ -12193,12 +12467,12 @@ class SdInput {
12193
12467
  '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
12194
12468
  '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
12195
12469
  };
12196
- return (hAsync("sd-field", { key: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("label", { key: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, hAsync("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), hAsync("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), hAsync("slot", { key: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (hAsync("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
12470
+ 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 () => {
12197
12471
  if (this.disabled || this.readonly)
12198
12472
  return;
12199
12473
  this.internalValue = '';
12200
12474
  await this.formField?.sdValidate();
12201
- } })), this.type === 'password' && (hAsync("sd-ghost-button", { key: '7062bbfecd4289185dc847bca0524405d6f4bbfe', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
12475
+ } })), 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: () => {
12202
12476
  if (this.disabled || this.readonly)
12203
12477
  return;
12204
12478
  this.passwordVisible = !this.passwordVisible;
@@ -12305,41 +12579,41 @@ var tableTokens = {
12305
12579
  table: table
12306
12580
  };
12307
12581
 
12308
- const t = tableTokens.table;
12582
+ const t$1 = tableTokens.table;
12309
12583
  const KEY_VALUE_TABLE_LAYOUT = {
12310
- rowHeight: Number(t.keyValue.height),
12584
+ rowHeight: Number(t$1.keyValue.height),
12311
12585
  thWidth: 120,
12312
- borderRadius: Number(t.radius),
12313
- thPaddingX: Number(t.header.paddingX),
12314
- padding: Number(t.keyValue.body.paddingY),
12315
- tdPaddingX: Number(t.keyValue.body.paddingX.default),
12316
- tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
12586
+ borderRadius: Number(t$1.radius),
12587
+ thPaddingX: Number(t$1.header.paddingX),
12588
+ padding: Number(t$1.keyValue.body.paddingY),
12589
+ tdPaddingX: Number(t$1.keyValue.body.paddingX.default),
12590
+ tdPaddingXWide: Number(t$1.keyValue.body.paddingX.wide),
12317
12591
  helpIconSize: 16,
12318
12592
  requiredIconSize: 12,
12319
- gap: Number(t.header.gap),
12320
- labelGap: Number(t.content.gap),
12321
- borderWidth: Number(t.border.width),
12322
- searchPaddingX: Number(t.keyValue.search.paddingX),
12593
+ gap: Number(t$1.header.gap),
12594
+ labelGap: Number(t$1.content.gap),
12595
+ borderWidth: Number(t$1.border.width),
12596
+ searchPaddingX: Number(t$1.keyValue.search.paddingX),
12323
12597
  };
12324
12598
  const KEY_VALUE_TABLE_COLORS = {
12325
- border: t.border.color,
12326
- thBg: t.header.bg,
12599
+ border: t$1.border.color,
12600
+ thBg: t$1.header.bg,
12327
12601
  thLabel: systemTokens.color.fg.primary,
12328
12602
  required: systemTokens.color.fg.accent,
12329
12603
  helpIcon: systemTokens.color.fg.success,
12330
12604
  tdBg: systemTokens.color.bg.frame,
12331
12605
  tdText: systemTokens.color.fg.primary,
12332
- searchBg: t.keyValue.search.bg,
12606
+ searchBg: t$1.keyValue.search.bg,
12333
12607
  };
12334
12608
  const KEY_VALUE_TABLE_TYPOGRAPHY = {
12335
- labelFontFamily: t.header.typography.fontFamily,
12336
- labelFontSize: Number(t.header.typography.fontSize),
12609
+ labelFontFamily: t$1.header.typography.fontFamily,
12610
+ labelFontSize: Number(t$1.header.typography.fontSize),
12337
12611
  labelFontWeight: 700,
12338
- labelLineHeight: Number(t.header.typography.lineHeight),
12339
- tdFontFamily: t.body.typography.fontFamily,
12340
- tdFontSize: Number(t.body.typography.fontSize),
12341
- tdFontWeight: Number(t.body.typography.fontWeight),
12342
- tdLineHeight: Number(t.body.typography.lineHeight),
12612
+ labelLineHeight: Number(t$1.header.typography.lineHeight),
12613
+ tdFontFamily: t$1.body.typography.fontFamily,
12614
+ tdFontSize: Number(t$1.body.typography.fontSize),
12615
+ tdFontWeight: Number(t$1.body.typography.fontWeight),
12616
+ tdLineHeight: Number(t$1.body.typography.lineHeight),
12343
12617
  };
12344
12618
 
12345
12619
  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)}`;
@@ -12662,7 +12936,7 @@ class SdLinearProgress {
12662
12936
  clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
12663
12937
  };
12664
12938
  const valueText = `${Math.round(this.clampedValue)}%`;
12665
- return (hAsync(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, hAsync("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, hAsync("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (hAsync("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (hAsync("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && hAsync("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
12939
+ 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)));
12666
12940
  }
12667
12941
  static get style() { return sdLinearProgressCss(); }
12668
12942
  static get cmpMeta() { return {
@@ -12718,10 +12992,10 @@ class SdLoadingContainer {
12718
12992
  this.prevBodyOverflow = null;
12719
12993
  }
12720
12994
  render() {
12721
- return (hAsync("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
12995
+ return (hAsync("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
12722
12996
  'sd-loading-container': true,
12723
12997
  'sd-loading-container--visible': this.visible,
12724
- }, "aria-hidden": this.visible ? 'false' : 'true' }, hAsync("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), hAsync("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, hAsync("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && hAsync("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
12998
+ }, "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))));
12725
12999
  }
12726
13000
  static get style() { return sdLoadingContainerCss(); }
12727
13001
  static get cmpMeta() { return {
@@ -12833,7 +13107,7 @@ class SdLoadingModal {
12833
13107
  '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
12834
13108
  '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
12835
13109
  };
12836
- return (hAsync(Host, { key: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, hAsync("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (hAsync("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), hAsync("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (hAsync("sd-circle-progress", { value: this.progress })) : (hAsync("sd-circle-progress", { indeterminate: true }))) : (hAsync("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), hAsync("div", { key: '11b93fc8996ca64a42f09e4688267329da8a74c9', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (hAsync("p", { class: "sd-loading-modal__message" }, message)))) : (hAsync("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.showButton && (hAsync("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, hAsync("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
13110
+ 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 }))))));
12837
13111
  }
12838
13112
  static get style() { return sdLoadingModalCss(); }
12839
13113
  static get cmpMeta() { return {
@@ -13372,24 +13646,24 @@ var numberInputTokens = {
13372
13646
  numberInput: numberInput
13373
13647
  };
13374
13648
 
13375
- const sm = numberInputTokens.numberInput.sm;
13376
- const md = numberInputTokens.numberInput.md;
13649
+ const sm$1 = numberInputTokens.numberInput.sm;
13650
+ const md$1 = numberInputTokens.numberInput.md;
13377
13651
  const NUMBER_INPUT_SIZE_MAP = {
13378
13652
  sm: {
13379
- height: sm.height,
13380
- paddingX: sm.paddingX,
13381
- radius: sm.radius,
13382
- fontSize: sm.typography.fontSize,
13383
- lineHeight: sm.typography.lineHeight,
13384
- fontWeight: sm.typography.fontWeight,
13653
+ height: sm$1.height,
13654
+ paddingX: sm$1.paddingX,
13655
+ radius: sm$1.radius,
13656
+ fontSize: sm$1.typography.fontSize,
13657
+ lineHeight: sm$1.typography.lineHeight,
13658
+ fontWeight: sm$1.typography.fontWeight,
13385
13659
  },
13386
13660
  md: {
13387
- height: md.height,
13388
- paddingX: md.paddingX,
13389
- radius: md.radius,
13390
- fontSize: md.typography.fontSize,
13391
- lineHeight: md.typography.lineHeight,
13392
- fontWeight: md.typography.fontWeight,
13661
+ height: md$1.height,
13662
+ paddingX: md$1.paddingX,
13663
+ radius: md$1.radius,
13664
+ fontSize: md$1.typography.fontSize,
13665
+ lineHeight: md$1.typography.lineHeight,
13666
+ fontWeight: md$1.typography.fontWeight,
13393
13667
  },
13394
13668
  };
13395
13669
  const NUMBER_INPUT_COLORS = {
@@ -13430,6 +13704,8 @@ class SdNumberInput {
13430
13704
  useButton = false;
13431
13705
  /** 소수점 입력 허용 여부 */
13432
13706
  useDecimal = false;
13707
+ /** 소수점 이하 최대 자리수 (useDecimal일 때만 적용, 초과 입력한 소수부는 잘라냄) */
13708
+ maxDecimalLength;
13433
13709
  /** 입력 값 */
13434
13710
  value = null;
13435
13711
  /** 레이블 텍스트 */
@@ -13510,6 +13786,31 @@ class SdNumberInput {
13510
13786
  const result = isNegative ? '-' + formatted : formatted;
13511
13787
  return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
13512
13788
  }
13789
+ /** useDecimal이면서 유효한 maxDecimalLength가 있을 때만 소수점 이하 제한 자리수를 반환합니다. */
13790
+ getDecimalLimit() {
13791
+ if (!this.useDecimal ||
13792
+ this.maxDecimalLength === undefined ||
13793
+ !Number.isFinite(this.maxDecimalLength)) {
13794
+ return undefined;
13795
+ }
13796
+ return Math.max(0, Math.floor(this.maxDecimalLength));
13797
+ }
13798
+ /** 소수부를 제한 자리수로 잘라낸 문자열을 반환합니다(반올림하지 않고 잘라냄). */
13799
+ truncateToDecimalLimit(cleaned, limit) {
13800
+ if (!cleaned.includes('.'))
13801
+ return cleaned;
13802
+ const [intPart, fractionPart = ''] = cleaned.split('.');
13803
+ const truncatedFraction = fractionPart.slice(0, limit);
13804
+ return truncatedFraction === '' ? intPart : `${intPart}.${truncatedFraction}`;
13805
+ }
13806
+ /** 숫자값의 소수부를 제한 자리수로 잘라냅니다(제한이 없으면 원본 그대로). */
13807
+ applyDecimalLimit(value) {
13808
+ const decimalLimit = this.getDecimalLimit();
13809
+ if (decimalLimit === undefined)
13810
+ return value;
13811
+ const parsed = parseFloat(this.truncateToDecimalLimit(value.toString(), decimalLimit));
13812
+ return isNaN(parsed) ? value : parsed;
13813
+ }
13513
13814
  parseInput(input) {
13514
13815
  if (input.trim() === '')
13515
13816
  return null;
@@ -13517,12 +13818,15 @@ class SdNumberInput {
13517
13818
  if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
13518
13819
  return null;
13519
13820
  }
13520
- const parsed = parseFloat(cleaned);
13521
- if (isNaN(parsed))
13522
- return null;
13523
13821
  if (!this.useDecimal && cleaned.includes('.')) {
13524
13822
  return null;
13525
13823
  }
13824
+ // useDecimal이면서 maxDecimalLength가 설정된 경우 소수부를 제한 자리수로 잘라냄(반올림 아님)
13825
+ const decimalLimit = this.getDecimalLimit();
13826
+ const normalized = decimalLimit !== undefined ? this.truncateToDecimalLimit(cleaned, decimalLimit) : cleaned;
13827
+ const parsed = parseFloat(normalized);
13828
+ if (isNaN(parsed))
13829
+ return null;
13526
13830
  return parsed;
13527
13831
  }
13528
13832
  clampMinMax(value) {
@@ -13677,6 +13981,7 @@ class SdNumberInput {
13677
13981
  if (nextVal > this.max) {
13678
13982
  nextVal = this.max;
13679
13983
  }
13984
+ nextVal = this.applyDecimalLimit(nextVal);
13680
13985
  if (nextVal === currentVal)
13681
13986
  return;
13682
13987
  this.internalValue = nextVal;
@@ -13689,6 +13994,7 @@ class SdNumberInput {
13689
13994
  if (nextVal < this.min) {
13690
13995
  nextVal = this.min;
13691
13996
  }
13997
+ nextVal = this.applyDecimalLimit(nextVal);
13692
13998
  if (nextVal === currentVal)
13693
13999
  return;
13694
14000
  this.internalValue = nextVal;
@@ -13729,15 +14035,15 @@ class SdNumberInput {
13729
14035
  '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
13730
14036
  '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
13731
14037
  };
13732
- return (hAsync("sd-field", { key: 'abfc6fbc218ed829eabbf33476e6feb25ed0b783', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'ab9f55eb4dcf8b345fae2e0546833f9d4216df1d', class: {
14038
+ 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: {
13733
14039
  'sd-number-input__content': true,
13734
14040
  'sd-number-input__content--no-stepper': !this.useButton,
13735
- } }, this.useButton && (hAsync("button", { key: '3a12f0c1c1963790b3337f34452d9bc200e072c1', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'cae2acccfb818a25a1d2c6abe8a0accdff293931', name: "minus", size: iconSize, color: this.isDecrementDisabled()
14041
+ } }, 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()
13736
14042
  ? NUMBER_INPUT_STEPPER.icon.disabled
13737
- : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && hAsync("span", { key: '37a2724e2973205cd9f0083d796c556aed8c50c6', class: "sd-number-input__prefix" }, this.inputPrefix), hAsync("input", { key: '5d9bfccaa121f0bc3ecaac4d8db3023d1d03dd68', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
14043
+ : 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: {
13738
14044
  textAlign: this.useButton ? 'center' : 'right',
13739
14045
  ...this.inputStyle,
13740
- } }), this.inputSuffix && hAsync("span", { key: 'ba990181e4b3d100087d20b177710f09b61f23cc', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (hAsync("button", { key: '91666af2e343d3098bc020fb7266aa1e785783c3', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '336ea010c7e9e314c98f56f4c79c86944087912e', name: "add", size: iconSize, color: this.isIncrementDisabled()
14046
+ } }), 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()
13741
14047
  ? NUMBER_INPUT_STEPPER.icon.disabled
13742
14048
  : NUMBER_INPUT_STEPPER.icon.default }))))));
13743
14049
  }
@@ -13760,6 +14066,7 @@ class SdNumberInput {
13760
14066
  "step": [2],
13761
14067
  "useButton": [4, "use-button"],
13762
14068
  "useDecimal": [4, "use-decimal"],
14069
+ "maxDecimalLength": [2, "max-decimal-length"],
13763
14070
  "value": [1032],
13764
14071
  "label": [1],
13765
14072
  "labelWidth": [8, "label-width"],
@@ -13956,13 +14263,13 @@ class SdPagination {
13956
14263
  '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
13957
14264
  '--sd-pagination-item-width': `${this.buttonWidth}px`,
13958
14265
  };
13959
- return (hAsync("div", { key: '78ef11e415c8d086e0a5f582fa5b4568ed3e49a4', class: {
14266
+ return (hAsync("div", { key: '0b5a2e9aec83e6f6a8de3426e57b3f9a53623652', class: {
13960
14267
  'sd-pagination': true,
13961
14268
  'sd-pagination--simple': this.simple,
13962
- }, style: cssVars }, hAsync("div", { key: '360cdb85715508d2f8155851b11928031015909c', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "sd-pagination__info" }, hAsync("span", { class: "sd-pagination__current" }, this.currentPage), hAsync("span", { class: "sd-pagination__divider" }, "/"), hAsync("span", { class: "sd-pagination__last" }, this.lastPage))) : (hAsync("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
14269
+ }, 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: {
13963
14270
  'sd-pagination__item': true,
13964
14271
  'sd-pagination__item--selected': this.currentPage === n,
13965
- }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '3726aaab29e0347cf7ae5e2aebad268e33eb33c7', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
14272
+ }, onClick: () => this.handlePageChange(n) }, n))))), hAsync("div", { key: '1aa72933c849af4fc886cc4e5f8962710c6c40bf', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
13966
14273
  }
13967
14274
  static get style() { return sdPaginationCss(); }
13968
14275
  static get cmpMeta() { return {
@@ -13983,57 +14290,135 @@ const TooltipArrow = (props) => (hAsync("svg", { width: "16", height: "12", view
13983
14290
 
13984
14291
  const popover = {
13985
14292
  "default": {
13986
- bg: "#07284A"}};
14293
+ bg: "#07284A",
14294
+ title: "#FFFFFF",
14295
+ description: "#FFFFFF",
14296
+ subAction: "#D8D8D8"
14297
+ },
14298
+ title: {
14299
+ leadingIcon: "16",
14300
+ gap: "8"
14301
+ },
14302
+ danger: {
14303
+ bg: "#FCEFEF",
14304
+ title: "#FB4444"
14305
+ },
14306
+ warning: {
14307
+ bg: "#FEF1EA",
14308
+ title: "#FF6B00"
14309
+ },
14310
+ accent: {
14311
+ bg: "#E6F1FF",
14312
+ title: "#0075FF"
14313
+ },
14314
+ light: {
14315
+ description: "#555555",
14316
+ subAction: "#888888"
14317
+ }
14318
+ };
13987
14319
  var popoverTokens = {
13988
14320
  popover: popover
13989
14321
  };
13990
14322
 
14323
+ const t = popoverTokens.popover;
14324
+ /** 제목-아이콘 간격 */
14325
+ const POPOVER_TITLE_GAP = t.title.gap;
14326
+ /** 제목 좌측 아이콘 크기 */
14327
+ const POPOVER_TITLE_ICON_SIZE = t.title.leadingIcon;
14328
+ /**
14329
+ * popoverType별 색상·버튼 매핑.
14330
+ * - default·accent: 하단 버튼 primary(solid) / danger: danger outline / warning: neutral outline
14331
+ * - default: 다크 배경 + 흰색 텍스트 / danger·warning·accent: 라이트 배경 + 타입 색상 제목 + light 계열 본문·링크 색상
14332
+ */
14333
+ const POPOVER_TYPE_CONFIG = {
14334
+ default: {
14335
+ bg: t.default.bg,
14336
+ title: t.default.title,
14337
+ description: t.default.description,
14338
+ subAction: t.default.subAction,
14339
+ buttonName: 'primary_xs',
14340
+ },
14341
+ danger: {
14342
+ bg: t.danger.bg,
14343
+ title: t.danger.title,
14344
+ description: t.light.description,
14345
+ subAction: t.light.subAction,
14346
+ buttonName: 'danger_outline_xs',
14347
+ },
14348
+ warning: {
14349
+ bg: t.warning.bg,
14350
+ title: t.warning.title,
14351
+ description: t.light.description,
14352
+ subAction: t.light.subAction,
14353
+ buttonName: 'neutral_outline_xs',
14354
+ },
14355
+ accent: {
14356
+ bg: t.accent.bg,
14357
+ title: t.accent.title,
14358
+ description: t.light.description,
14359
+ subAction: t.light.subAction,
14360
+ buttonName: 'primary_xs',
14361
+ },
14362
+ };
14363
+
13991
14364
  const sdPopoverCss = () => `sd-popover{position:relative;cursor:pointer;display:inline-flex}`;
13992
14365
 
13993
14366
  class SdPopover {
13994
14367
  constructor(hostRef) {
13995
14368
  registerInstance(this, hostRef);
13996
14369
  this.showChange = createEvent(this, "sdShowChange", 7);
14370
+ this.buttonClick = createEvent(this, "sdButtonClick", 7);
14371
+ this.leftLinkClick = createEvent(this, "sdLeftLinkClick", 7);
13997
14372
  }
13998
14373
  get el() { return getElement(this); }
13999
- /** 팝오버 표시 여부 */
14000
- show = false;
14374
+ /** 표시 여부 (제어). 미지정 시 defaultOpen 기반 비제어로 동작 */
14375
+ open;
14376
+ /** 기본 표시 여부 (비제어) */
14377
+ defaultOpen = false;
14001
14378
  /** 팝오버를 표시할 방향 */
14002
14379
  placement = 'bottom';
14003
- /** 아이콘 트리거 색상 */
14004
- color = '#01BB4B';
14005
- /** 아이콘 트리거 아이콘명 */
14380
+ /** 색상 타입 (default=다크 배경 / danger·warning·accent=라이트 배경) */
14381
+ type = 'default';
14382
+ /** 메뉴 제목 (필수) */
14383
+ menuTitle;
14384
+ /** 제목 좌측 아이콘 (선택) */
14385
+ titleIcon;
14386
+ /** 기본(아이콘) 트리거 아이콘명. slot="trigger" 가 있으면 무시 */
14006
14387
  icon = 'helpOutline';
14007
- /** 아이콘 트리거 크기 */
14388
+ /** 기본(아이콘) 트리거 크기 */
14008
14389
  iconSize = 12;
14009
- /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
14010
- label = '';
14011
- /** 버튼 트리거 프리셋 */
14012
- name = 'primary_sm';
14013
- /** 버튼 트리거 우측 아이콘 */
14014
- rightIcon;
14390
+ /** 기본(아이콘) 트리거 색상 */
14391
+ color = '#01BB4B';
14392
+ /** 하단 좌측 링크 레이블 (선택) */
14393
+ leftLinkLabel;
14394
+ /** 하단 우측 버튼 레이블 (필수). 색상/스타일은 type 별로 고정 */
14395
+ buttonLabel;
14015
14396
  /** 스크린리더용 접근성 레이블 */
14016
14397
  ariaLabel = '';
14017
- /** 비활성 상태 여부 */
14018
- disabled = false;
14019
- /** 버튼 type 속성 */
14020
- type = 'button';
14021
- /** 팝오버 메뉴 제목 */
14022
- menuTitle;
14023
- /** 팝오버 하단 좌측 링크 옵션 */
14024
- leftLink;
14025
- /** 팝오버 하단 버튼 옵션 */
14026
- button;
14027
14398
  /** 팝오버 메뉴에 추가할 클래스 */
14028
- menuClass = '';
14399
+ menuClassName = '';
14400
+ internalOpen = false;
14029
14401
  slotContentHTML = '';
14402
+ triggerHTML = '';
14030
14403
  /** 팝오버 표시 상태가 바뀔 때 발생합니다. */
14031
14404
  showChange;
14032
- buttonEl;
14033
- setShow = (next) => {
14034
- if (this.show === next)
14405
+ /** 하단 우측 버튼 클릭 시 발생합니다. */
14406
+ buttonClick;
14407
+ /** 하단 좌측 링크 클릭 시 발생합니다. */
14408
+ leftLinkClick;
14409
+ triggerEl;
14410
+ get isOpen() {
14411
+ return this.open !== undefined ? this.open : this.internalOpen;
14412
+ }
14413
+ setOpen = (next) => {
14414
+ if (this.isOpen === next)
14035
14415
  return;
14036
- this.show = next;
14416
+ if (this.open === undefined) {
14417
+ this.internalOpen = next;
14418
+ }
14419
+ else {
14420
+ this.open = next;
14421
+ }
14037
14422
  this.showChange.emit(next);
14038
14423
  };
14039
14424
  get popoverOffset() {
@@ -14048,57 +14433,69 @@ class SdPopover {
14048
14433
  return [4, 0];
14049
14434
  }
14050
14435
  }
14051
- handleClose = () => this.setShow(false);
14436
+ handleClose = () => this.setOpen(false);
14052
14437
  componentWillLoad() {
14438
+ this.internalOpen = this.defaultOpen;
14439
+ // slot="trigger" 커스텀 트리거를 분리해 두고, 나머지 라이트 DOM은 메뉴 본문으로 캡처한다.
14440
+ const triggerSlot = this.el.querySelector('[slot="trigger"]');
14441
+ if (triggerSlot) {
14442
+ this.triggerHTML = triggerSlot.outerHTML;
14443
+ triggerSlot.remove();
14444
+ }
14053
14445
  this.slotContentHTML = this.el.innerHTML;
14054
14446
  this.el.innerHTML = '';
14055
14447
  }
14056
14448
  render() {
14057
14449
  const placement = this.placement ?? 'bottom';
14058
- const color = this.color ?? '#01BB4B';
14059
- const icon = this.icon ?? 'helpOutline';
14060
- const iconSize = this.iconSize ?? 12;
14061
- const menuClass = this.menuClass ?? '';
14062
- const leftLink = this.leftLink;
14063
- const button = this.button;
14064
- const hasFooter = !!leftLink || !!button;
14065
- 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: {
14450
+ const typeConfig = POPOVER_TYPE_CONFIG[this.type ?? 'default'] ?? POPOVER_TYPE_CONFIG.default;
14451
+ const menuClassName = this.menuClassName ?? '';
14452
+ const hasLeftLink = this.leftLinkLabel !== undefined && this.leftLinkLabel !== '';
14453
+ return (hAsync(Fragment, { key: '16cc231907c02de80749163ce4b639303e969f4a' }, this.triggerHTML !== '' ? (
14454
+ // 사용자가 넘긴 slot="trigger" 콘텐츠를 감싸 클릭을 전달하는 래퍼(키보드 상호작용은 내부 트리거가 담당)
14455
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
14456
+ 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: {
14066
14457
  'sd-floating-menu': true,
14067
14458
  'sd-floating-menu--popover': true,
14068
14459
  [`sd-floating-menu--${placement}`]: true,
14069
- [menuClass]: menuClass !== '',
14460
+ [menuClassName]: menuClassName !== '',
14070
14461
  }, style: {
14071
- '--sd-floating-bg': popoverTokens.popover.default.bg,
14072
- } }, 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: {
14462
+ '--sd-floating-bg': typeConfig.bg,
14463
+ '--sd-floating-content': typeConfig.description,
14464
+ } }, 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: {
14465
+ color: typeConfig.title,
14466
+ display: 'flex',
14467
+ alignItems: 'center',
14468
+ gap: `${POPOVER_TITLE_GAP}px`,
14469
+ } }, 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: {
14073
14470
  'sd-floating-menu__buttons': true,
14074
- 'sd-floating-menu__buttons--with-link': !!leftLink,
14075
- } }, 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 }))))));
14471
+ 'sd-floating-menu__buttons--with-link': hasLeftLink,
14472
+ } }, 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 }))))));
14076
14473
  }
14077
14474
  static get style() { return sdPopoverCss(); }
14078
14475
  static get cmpMeta() { return {
14079
14476
  "$flags$": 512,
14080
14477
  "$tagName$": "sd-popover",
14081
14478
  "$members$": {
14082
- "show": [1028],
14479
+ "open": [1028],
14480
+ "defaultOpen": [4, "default-open"],
14083
14481
  "placement": [513],
14084
- "color": [513],
14482
+ "type": [513],
14483
+ "menuTitle": [1, "menu-title"],
14484
+ "titleIcon": [1, "title-icon"],
14085
14485
  "icon": [513],
14086
14486
  "iconSize": [514, "icon-size"],
14087
- "label": [1],
14088
- "name": [1],
14089
- "rightIcon": [1, "right-icon"],
14487
+ "color": [513],
14488
+ "leftLinkLabel": [1, "left-link-label"],
14489
+ "buttonLabel": [1, "button-label"],
14090
14490
  "ariaLabel": [1, "aria-label"],
14091
- "disabled": [4],
14092
- "type": [1],
14093
- "menuTitle": [1, "menu-title"],
14094
- "leftLink": [16],
14095
- "button": [16],
14096
- "menuClass": [1, "menu-class"],
14097
- "slotContentHTML": [32]
14491
+ "menuClassName": [1, "menu-class-name"],
14492
+ "internalOpen": [32],
14493
+ "slotContentHTML": [32],
14494
+ "triggerHTML": [32]
14098
14495
  },
14099
14496
  "$listeners$": undefined,
14100
14497
  "$lazyBundleId$": "-",
14101
- "$attrsToReflect$": [["placement", "placement"], ["color", "color"], ["icon", "icon"], ["iconSize", "icon-size"]]
14498
+ "$attrsToReflect$": [["placement", "placement"], ["type", "type"], ["icon", "icon"], ["iconSize", "icon-size"], ["color", "color"]]
14102
14499
  }; }
14103
14500
  }
14104
14501
 
@@ -14156,7 +14553,7 @@ const POPUP_FOOTER = {
14156
14553
  shadow: `${shadowSpreadMd.x}px ${shadowSpreadMd.y}px ${shadowSpreadMd.blur}px ${shadowSpreadMd.spread}px ${shadowSpreadMd.color}`,
14157
14554
  };
14158
14555
 
14159
- 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}`;
14556
+ 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}`;
14160
14557
 
14161
14558
  const DEFAULT_SUBMIT_BUTTON_PROPS = {
14162
14559
  name: 'primary_md',
@@ -14202,7 +14599,7 @@ class SdPopup {
14202
14599
  ...DEFAULT_SUBMIT_BUTTON_PROPS,
14203
14600
  ...this.submitButtonProps,
14204
14601
  };
14205
- return (hAsync("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, hAsync("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, hAsync("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), hAsync("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, hAsync("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (hAsync("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, hAsync("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, hAsync("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), hAsync("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
14602
+ 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() })))));
14206
14603
  }
14207
14604
  static get style() { return sdPopupCss(); }
14208
14605
  static get cmpMeta() { return {
@@ -14493,7 +14890,7 @@ class SdPortal {
14493
14890
  this.close.emit();
14494
14891
  }
14495
14892
  render() {
14496
- return hAsync("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
14893
+ return hAsync("slot", { key: '8b2a674bbd8c75c150940d53c0e5204e951cbb82' });
14497
14894
  }
14498
14895
  static get watchers() { return {
14499
14896
  "open": [{
@@ -14608,6 +15005,8 @@ class SdRadio {
14608
15005
  disabled = false;
14609
15006
  /** 표시할 라벨 텍스트 */
14610
15007
  label;
15008
+ /** native radio 그룹핑을 위한 name 속성 (미지정 시 val을 name으로 사용) */
15009
+ name;
14611
15010
  /** 선택 값이 변경될 때 발생합니다. */
14612
15011
  update;
14613
15012
  valueChanged(newValue) {
@@ -14651,7 +15050,7 @@ class SdRadio {
14651
15050
  '--sd-radio-label-color': RADIO_COLORS.label.default,
14652
15051
  '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
14653
15052
  };
14654
- 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))));
15053
+ 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))));
14655
15054
  }
14656
15055
  static get watchers() { return {
14657
15056
  "value": [{
@@ -14666,7 +15065,8 @@ class SdRadio {
14666
15065
  "value": [1032],
14667
15066
  "val": [8],
14668
15067
  "disabled": [4],
14669
- "label": [1]
15068
+ "label": [1],
15069
+ "name": [1]
14670
15070
  },
14671
15071
  "$listeners$": undefined,
14672
15072
  "$lazyBundleId$": "-",
@@ -14776,7 +15176,7 @@ class SdRadioButton {
14776
15176
  registerInstance(this, hostRef);
14777
15177
  this.change = createEvent(this, "sdUpdate", 7);
14778
15178
  }
14779
- /** 현재 선택된 값 */
15179
+ /** 현재 선택된 값 (미지정 시 선택 없음) */
14780
15180
  value;
14781
15181
  /** 라디오 버튼 옵션 목록 */
14782
15182
  options = [];
@@ -14856,7 +15256,7 @@ class SdRadioButton {
14856
15256
  '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
14857
15257
  '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
14858
15258
  };
14859
- return (hAsync("div", { key: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
15259
+ return (hAsync("div", { key: '7621cf9885bb69bc18083dc076b4e6babc86ff62', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
14860
15260
  const isSelected = this.isOptionSelected(option);
14861
15261
  const isDisabled = this.isOptionDisabled(option);
14862
15262
  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)));
@@ -14886,7 +15286,7 @@ class SdRadioGroup {
14886
15286
  registerInstance(this, hostRef);
14887
15287
  this.change = createEvent(this, "sdUpdate", 7);
14888
15288
  }
14889
- /** 현재 선택된 값 */
15289
+ /** 현재 선택된 값 (미지정 시 선택 없음) */
14890
15290
  value;
14891
15291
  /** 라디오 옵션 목록 */
14892
15292
  options = [];
@@ -14914,8 +15314,8 @@ class SdRadioGroup {
14914
15314
  return classes.join(' ');
14915
15315
  }
14916
15316
  render() {
14917
- return (hAsync("div", { key: 'e5f4051ea9b2843816a849a018b8040e7b951a55', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
14918
- 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) }));
15317
+ return (hAsync("div", { key: '7ee8aaf1872ac215e7d4c27e71d4a0a41c6f5e4e', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
15318
+ 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) }));
14919
15319
  })));
14920
15320
  }
14921
15321
  static get watchers() { return {
@@ -14940,6 +15340,58 @@ class SdRadioGroup {
14940
15340
  }; }
14941
15341
  }
14942
15342
 
15343
+ const SCROLL_AREA_COLORS = {
15344
+ border: systemTokens.color.border.default,
15345
+ };
15346
+
15347
+ 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}`;
15348
+
15349
+ class SdScrollArea {
15350
+ constructor(hostRef) {
15351
+ registerInstance(this, hostRef);
15352
+ }
15353
+ /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */
15354
+ axis = 'both';
15355
+ /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
15356
+ background = false;
15357
+ /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */
15358
+ bordered = false;
15359
+ /** viewport 최대 높이 (예: '400px'). 비우면 호스트 크기를 따른다. */
15360
+ maxHeight = '';
15361
+ /** viewport 최대 너비 (예: '480px'). 비우면 호스트 크기를 따른다. */
15362
+ maxWidth = '';
15363
+ render() {
15364
+ const viewportStyle = {
15365
+ '--sd-scroll-area-border-color': SCROLL_AREA_COLORS.border,
15366
+ };
15367
+ if (this.maxHeight !== '')
15368
+ viewportStyle.maxHeight = this.maxHeight;
15369
+ if (this.maxWidth !== '')
15370
+ viewportStyle.maxWidth = this.maxWidth;
15371
+ return (hAsync(Host, { key: '4b9b22910436388a2017af0bea5d1c55463a5f94' }, hAsync("div", { key: '13d9301c1bd43dad765a6f18bb11482d7ae4788a', class: {
15372
+ 'sd-scroll-area__viewport': true,
15373
+ [`sd-scroll-area__viewport--${this.axis}`]: true,
15374
+ 'sd-scroll-area__viewport--bg': this.background,
15375
+ 'sd-scroll-area__viewport--bordered': this.bordered,
15376
+ }, style: viewportStyle }, hAsync("slot", { key: '1d28dd8bac0a3b40d8beca9553b061ae21be8342' }))));
15377
+ }
15378
+ static get style() { return sdScrollAreaCss(); }
15379
+ static get cmpMeta() { return {
15380
+ "$flags$": 772,
15381
+ "$tagName$": "sd-scroll-area",
15382
+ "$members$": {
15383
+ "axis": [513],
15384
+ "background": [516],
15385
+ "bordered": [516],
15386
+ "maxHeight": [1, "max-height"],
15387
+ "maxWidth": [1, "max-width"]
15388
+ },
15389
+ "$listeners$": undefined,
15390
+ "$lazyBundleId$": "-",
15391
+ "$attrsToReflect$": [["axis", "axis"], ["background", "background"], ["bordered", "bordered"]]
15392
+ }; }
15393
+ }
15394
+
14943
15395
  const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
14944
15396
 
14945
15397
  class SdSelect {
@@ -15230,15 +15682,15 @@ class SdSelect {
15230
15682
  this.closeDropdown();
15231
15683
  },
15232
15684
  };
15233
- return (hAsync("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
15685
+ 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: () => {
15234
15686
  this.hovered = true;
15235
15687
  }, onMouseLeave: () => {
15236
15688
  this.hovered = false;
15237
- } }, hAsync("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
15689
+ } }, hAsync("div", { key: '575ece02e659c99154598ad4ab416e26a7217e52', class: "sd-select", ref: el => {
15238
15690
  this.triggerRef = el;
15239
- } }, hAsync("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
15691
+ } }, hAsync("sd-select-trigger", { key: '39f1dc9bbb7e2e94e0ccf3a3b2f339b48f5e0b84', ref: el => {
15240
15692
  this.triggerComponentRef = el;
15241
- }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (hAsync("sd-portal", { key: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, hAsync("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
15693
+ }, 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) })))));
15242
15694
  }
15243
15695
  static get watchers() { return {
15244
15696
  "isOpen": [{
@@ -15499,7 +15951,7 @@ class SdSelectListItem {
15499
15951
  return (
15500
15952
  // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
15501
15953
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
15502
- hAsync("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15954
+ hAsync("div", { key: 'e4f8fc195a7231cd3218b91a26c77f51df14e6dc', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
15503
15955
  'sd-select-list-item': true,
15504
15956
  'sd-select-list-item--group': isGroup,
15505
15957
  'sd-select-list-item--depth1-group': isDepth1Group,
@@ -15509,7 +15961,7 @@ class SdSelectListItem {
15509
15961
  'sd-select-list-item--focused': this.isFocused,
15510
15962
  'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
15511
15963
  'sd-select-list-item--disabled': !!this.option.disabled,
15512
- }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (hAsync("sd-checkbox", { key: '297067b88bedf8eed648f60050688e23e9dfcbdd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (hAsync("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (hAsync("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (hAsync("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
15964
+ }, 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, ")"))));
15513
15965
  }
15514
15966
  static get style() { return sdSelectListItemCss(); }
15515
15967
  static get cmpMeta() { return {
@@ -15581,15 +16033,15 @@ class SdSelectListItemSearch {
15581
16033
  clearTimeout(this.debounceTimer);
15582
16034
  }
15583
16035
  render() {
15584
- return (hAsync("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
16036
+ return (hAsync("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
15585
16037
  'sd-select-list-item-search': true,
15586
16038
  'sd-select-list-item-search--scrolled': this.isScrolled,
15587
- } }, hAsync("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, hAsync("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), hAsync("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
16039
+ } }, 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 => {
15588
16040
  this.inputEl = el;
15589
- }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), hAsync("button", { key: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', type: "button", class: {
16041
+ }, 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: {
15590
16042
  'sd-select-list-item-search__clear': true,
15591
16043
  'sd-select-list-item-search__clear--hidden': this.searchText === '',
15592
- }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, hAsync("sd-icon", { key: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
16044
+ }, 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" })))));
15593
16045
  }
15594
16046
  static get style() { return sdSelectListItemSearchCss(); }
15595
16047
  static get cmpMeta() { return {
@@ -15606,7 +16058,7 @@ class SdSelectListItemSearch {
15606
16058
  }; }
15607
16059
  }
15608
16060
 
15609
- 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}`;
16061
+ 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}`;
15610
16062
 
15611
16063
  class SdSelectListbox {
15612
16064
  constructor(hostRef) {
@@ -15973,9 +16425,9 @@ class SdSelectListbox {
15973
16425
  '--listbox-max-height': this.maxHeight ?? '260px',
15974
16426
  '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
15975
16427
  };
15976
- return (hAsync("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (hAsync("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), hAsync("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
16428
+ 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 => {
15977
16429
  this.listEl = el;
15978
- } }, this.showSelectAll && (hAsync("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (hAsync("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (hAsync("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
16430
+ } }, 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) })))))));
15979
16431
  }
15980
16432
  static get watchers() { return {
15981
16433
  "searchKeyword": [{
@@ -16064,7 +16516,7 @@ class SdSelectTrigger {
16064
16516
  ? SELECT_COLORS.icon.disabled
16065
16517
  : SELECT_COLORS.icon.default,
16066
16518
  };
16067
- return (hAsync("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
16519
+ return (hAsync("div", { key: 'afda44bd2f8dcf0ab75d75b0178b067f96e61707', ref: el => {
16068
16520
  this.triggerEl = el;
16069
16521
  }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
16070
16522
  'sd-select-trigger': true,
@@ -16075,7 +16527,7 @@ class SdSelectTrigger {
16075
16527
  e.preventDefault();
16076
16528
  this.handleClick();
16077
16529
  }
16078
- }, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (hAsync("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (hAsync("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), hAsync("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
16530
+ }, 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: {
16079
16531
  'sd-select-trigger__icon': true,
16080
16532
  'sd-select-trigger__icon--open': this.isOpen,
16081
16533
  } }))));
@@ -16097,6 +16549,204 @@ class SdSelectTrigger {
16097
16549
  }; }
16098
16550
  }
16099
16551
 
16552
+ const stepper$1 = {
16553
+ sm: {
16554
+ sequence: {
16555
+ size: "20"
16556
+ },
16557
+ typography: {
16558
+ active: {
16559
+ fontWeight: "700"},
16560
+ "default": {
16561
+ 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",
16562
+ fontWeight: "500",
16563
+ fontSize: "12",
16564
+ lineHeight: "20"}
16565
+ }
16566
+ },
16567
+ dash: {
16568
+ width: "20",
16569
+ color: "#888888"
16570
+ },
16571
+ lg: {
16572
+ sequence: {
16573
+ size: "24"
16574
+ },
16575
+ typography: {
16576
+ active: {
16577
+ fontWeight: "700"},
16578
+ "default": {
16579
+ 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",
16580
+ fontWeight: "500",
16581
+ fontSize: "14",
16582
+ lineHeight: "24"}
16583
+ }
16584
+ },
16585
+ container: {
16586
+ gap: "12"
16587
+ },
16588
+ item: {
16589
+ gap: "8"
16590
+ },
16591
+ sequence: {
16592
+ radius: "9999",
16593
+ border: {
16594
+ active: "#93C4FF",
16595
+ "default": "#E1E1E1",
16596
+ completed: "#CCCCCC",
16597
+ witdh: "1"
16598
+ },
16599
+ icon: "12",
16600
+ bg: {
16601
+ active: "#D9EAFF",
16602
+ "default": "#FFFFFF",
16603
+ completed: "#E1E1E1"
16604
+ },
16605
+ text: {
16606
+ active: "#0075FF",
16607
+ "default": "#AAAAAA"
16608
+ }
16609
+ },
16610
+ text: {
16611
+ active: "#0075FF",
16612
+ "default": "#888888"
16613
+ }
16614
+ };
16615
+ var stepperTokens = {
16616
+ stepper: stepper$1
16617
+ };
16618
+
16619
+ const stepper = stepperTokens.stepper;
16620
+ const STEPPER_SIZES = {
16621
+ sm: {
16622
+ sequenceSize: stepper.sm.sequence.size,
16623
+ fontFamily: stepper.sm.typography.default.fontFamily,
16624
+ fontSize: stepper.sm.typography.default.fontSize,
16625
+ lineHeight: stepper.sm.typography.default.lineHeight,
16626
+ fontWeightActive: stepper.sm.typography.active.fontWeight,
16627
+ fontWeightDefault: stepper.sm.typography.default.fontWeight,
16628
+ },
16629
+ lg: {
16630
+ sequenceSize: stepper.lg.sequence.size,
16631
+ fontFamily: stepper.lg.typography.default.fontFamily,
16632
+ fontSize: stepper.lg.typography.default.fontSize,
16633
+ lineHeight: stepper.lg.typography.default.lineHeight,
16634
+ fontWeightActive: stepper.lg.typography.active.fontWeight,
16635
+ fontWeightDefault: stepper.lg.typography.default.fontWeight,
16636
+ },
16637
+ };
16638
+ const STEPPER_LAYOUT = {
16639
+ containerGap: stepper.container.gap,
16640
+ itemGap: stepper.item.gap,
16641
+ dashWidth: stepper.dash.width,
16642
+ radius: stepper.sequence.radius,
16643
+ borderWidth: stepper.sequence.border.witdh,
16644
+ iconSize: stepper.sequence.icon,
16645
+ };
16646
+ const STEPPER_COLORS = {
16647
+ dash: stepper.dash.color,
16648
+ sequenceBorder: stepper.sequence.border,
16649
+ sequenceBg: stepper.sequence.bg,
16650
+ sequenceText: stepper.sequence.text,
16651
+ text: stepper.text,
16652
+ };
16653
+
16654
+ 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)}`;
16655
+
16656
+ class SdStepper {
16657
+ constructor(hostRef) {
16658
+ registerInstance(this, hostRef);
16659
+ }
16660
+ /** 단계 목록 */
16661
+ items = [];
16662
+ /** 현재 활성 단계 value */
16663
+ value = '';
16664
+ /** 크기 */
16665
+ size = 'sm';
16666
+ /** 접근성 레이블 */
16667
+ ariaLabel = '진행 단계';
16668
+ valueChanged(newValue) {
16669
+ this.value = newValue;
16670
+ }
16671
+ getItemValue(item, index) {
16672
+ return item.value ?? String(index + 1);
16673
+ }
16674
+ getActiveIndex() {
16675
+ const found = this.items.findIndex((item, index) => this.getItemValue(item, index) === this.value);
16676
+ return found >= 0 ? found : 0;
16677
+ }
16678
+ getState(index) {
16679
+ const activeIndex = this.getActiveIndex();
16680
+ if (index < activeIndex)
16681
+ return 'completed';
16682
+ if (index === activeIndex)
16683
+ return 'active';
16684
+ return 'default';
16685
+ }
16686
+ buildCssVars() {
16687
+ const size = STEPPER_SIZES[this.size];
16688
+ return {
16689
+ '--sd-stepper-sequence-size': `${size.sequenceSize}px`,
16690
+ '--sd-stepper-font-family': size.fontFamily,
16691
+ '--sd-stepper-font-size': `${size.fontSize}px`,
16692
+ '--sd-stepper-line-height': `${size.lineHeight}px`,
16693
+ '--sd-stepper-font-weight-active': size.fontWeightActive,
16694
+ '--sd-stepper-font-weight-default': size.fontWeightDefault,
16695
+ '--sd-stepper-container-gap': `${STEPPER_LAYOUT.containerGap}px`,
16696
+ '--sd-stepper-item-gap': `${STEPPER_LAYOUT.itemGap}px`,
16697
+ '--sd-stepper-dash-width': `${STEPPER_LAYOUT.dashWidth}px`,
16698
+ '--sd-stepper-dash-color': STEPPER_COLORS.dash,
16699
+ '--sd-stepper-sequence-radius': `${STEPPER_LAYOUT.radius}px`,
16700
+ '--sd-stepper-sequence-border-width': `${STEPPER_LAYOUT.borderWidth}px`,
16701
+ };
16702
+ }
16703
+ getStateVars(state) {
16704
+ return {
16705
+ '--sd-stepper-sequence-border': STEPPER_COLORS.sequenceBorder[state],
16706
+ '--sd-stepper-sequence-bg': STEPPER_COLORS.sequenceBg[state],
16707
+ '--sd-stepper-sequence-text': state === 'completed'
16708
+ ? STEPPER_COLORS.text.default
16709
+ : STEPPER_COLORS.sequenceText[state],
16710
+ '--sd-stepper-text-active': STEPPER_COLORS.text.active,
16711
+ '--sd-stepper-text-default': STEPPER_COLORS.text.default,
16712
+ };
16713
+ }
16714
+ render() {
16715
+ return (hAsync("div", { key: '0255899ce447c38d44a618acc72692d2c746ebc3', class: "sd-stepper", role: "list", "aria-label": this.ariaLabel, style: this.buildCssVars() }, this.items.map((item, index) => {
16716
+ const state = this.getState(index);
16717
+ const className = [
16718
+ 'sd-stepper__item',
16719
+ `sd-stepper__item--${state}`,
16720
+ ]
16721
+ .filter(Boolean)
16722
+ .join(' ');
16723
+ return [
16724
+ 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)),
16725
+ 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" })))),
16726
+ ];
16727
+ })));
16728
+ }
16729
+ static get watchers() { return {
16730
+ "value": [{
16731
+ "valueChanged": 0
16732
+ }]
16733
+ }; }
16734
+ static get style() { return sdStepperCss(); }
16735
+ static get cmpMeta() { return {
16736
+ "$flags$": 512,
16737
+ "$tagName$": "sd-stepper",
16738
+ "$members$": {
16739
+ "items": [1040],
16740
+ "value": [1537],
16741
+ "size": [513],
16742
+ "ariaLabel": [1, "aria-label"]
16743
+ },
16744
+ "$listeners$": undefined,
16745
+ "$lazyBundleId$": "-",
16746
+ "$attrsToReflect$": [["value", "value"], ["size", "size"]]
16747
+ }; }
16748
+ }
16749
+
16100
16750
  var switchTokens = {
16101
16751
  "switch": {
16102
16752
  width: "32",
@@ -16162,7 +16812,14 @@ class SdSwitch {
16162
16812
  }
16163
16813
  /** 현재 on/off 상태 */
16164
16814
  value = false;
16165
- /** 표시할 라벨 텍스트 */
16815
+ /** 스위치 좌측 라벨 */
16816
+ leftLabel;
16817
+ /** 스위치 우측 라벨 */
16818
+ rightLabel;
16819
+ /**
16820
+ * 표시할 라벨 텍스트
16821
+ * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
16822
+ */
16166
16823
  label = '';
16167
16824
  /** 비활성 상태 여부 */
16168
16825
  disabled = false;
@@ -16204,7 +16861,10 @@ class SdSwitch {
16204
16861
  '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
16205
16862
  '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
16206
16863
  };
16207
- return (hAsync("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, hAsync("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), hAsync("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, hAsync("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && hAsync("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
16864
+ // label(deprecated)은 rightLabel 로 흡수 (하위호환)
16865
+ const right = this.rightLabel ?? this.label;
16866
+ const accessibleName = [this.leftLabel, right].filter(Boolean).join(' ') || 'switch';
16867
+ 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)));
16208
16868
  }
16209
16869
  static get style() { return sdSwitchCss(); }
16210
16870
  static get cmpMeta() { return {
@@ -16212,6 +16872,8 @@ class SdSwitch {
16212
16872
  "$tagName$": "sd-switch",
16213
16873
  "$members$": {
16214
16874
  "value": [1028],
16875
+ "leftLabel": [1, "left-label"],
16876
+ "rightLabel": [1, "right-label"],
16215
16877
  "label": [1],
16216
16878
  "disabled": [4]
16217
16879
  },
@@ -16426,7 +17088,7 @@ class SdTabs {
16426
17088
  };
16427
17089
  }
16428
17090
  render() {
16429
- return (hAsync("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
17091
+ return (hAsync("div", { key: 'c88c2d10181fd02076ac9c0ecdb6d3e95bd727c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
16430
17092
  const badgeName = this.getBadgeName(tab);
16431
17093
  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 => {
16432
17094
  if (e.key === 'Enter' || e.key === ' ') {
@@ -16644,9 +17306,8 @@ class SdTag {
16644
17306
  label = '';
16645
17307
  /** 아이콘명 */
16646
17308
  icon;
16647
- // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
16648
- /** true이면 아이콘을 레이블 왼쪽에 배치 */
16649
- isLeft = true;
17309
+ /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
17310
+ iconLeft = true;
16650
17311
  /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
16651
17312
  width = '';
16652
17313
  componentWillLoad() {
@@ -16675,7 +17336,7 @@ class SdTag {
16675
17336
  const config = this.resolvedConfig;
16676
17337
  const iconNode = this.renderIcon(config.icon, config.iconSize);
16677
17338
  const width = this.resolvedWidth;
16678
- return (hAsync(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
17339
+ return (hAsync(Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, hAsync("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
16679
17340
  '--sd-tag-background': config.background,
16680
17341
  '--sd-tag-content': config.content,
16681
17342
  '--sd-tag-height': config.height,
@@ -16685,7 +17346,7 @@ class SdTag {
16685
17346
  '--sd-tag-font-weight': config.fontWeight,
16686
17347
  '--sd-tag-line-height': config.lineHeight,
16687
17348
  '--sd-tag-radius': config.radius,
16688
- }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, hAsync("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
17349
+ }, "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)));
16689
17350
  }
16690
17351
  static get style() { return sdTagCss(); }
16691
17352
  static get cmpMeta() { return {
@@ -16695,7 +17356,7 @@ class SdTag {
16695
17356
  "name": [1],
16696
17357
  "label": [1],
16697
17358
  "icon": [1],
16698
- "isLeft": [4, "is-left"],
17359
+ "iconLeft": [4, "icon-left"],
16699
17360
  "width": [8]
16700
17361
  },
16701
17362
  "$listeners$": undefined,
@@ -16875,7 +17536,7 @@ class SdTextLink {
16875
17536
  };
16876
17537
  const tooltipText = (this.tooltipText ?? '').trim();
16877
17538
  const hasTooltip = tooltipText.length > 0;
16878
- return (hAsync("span", { key: 'd9653ed47a77fb5c00dc57f8f7cc2b4dc9035ca4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
17539
+ return (hAsync("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', role: "button", tabindex: this.disabled ? -1 : 0, class: {
16879
17540
  'sd-text-link': true,
16880
17541
  'sd-text-link--disabled': this.disabled,
16881
17542
  }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -16883,13 +17544,13 @@ class SdTextLink {
16883
17544
  e.preventDefault();
16884
17545
  this.handleClick();
16885
17546
  }
16886
- }, 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: {
17547
+ }, 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: {
16887
17548
  width: `${TEXT_LINK_ARROW.arrowFrame}px`,
16888
17549
  height: `${TEXT_LINK_ARROW.arrowFrame}px`,
16889
17550
  display: 'inline-flex',
16890
17551
  alignItems: 'center',
16891
17552
  justifyContent: 'center',
16892
- } }, hAsync("sd-icon", { key: 'ed0a6bf8b678a93fa8a0da907efb0cbf60427738', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
17553
+ } }, hAsync("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
16893
17554
  }
16894
17555
  static get style() { return sdTextLinkCss(); }
16895
17556
  static get cmpMeta() { return {
@@ -17073,7 +17734,7 @@ class SdTextarea {
17073
17734
  '--sd-system-size-field-sm-height': 'auto',
17074
17735
  '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
17075
17736
  };
17076
- return (hAsync("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, hAsync("div", { key: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, hAsync("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
17737
+ 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 }))));
17077
17738
  }
17078
17739
  static get watchers() { return {
17079
17740
  "value": [{
@@ -17127,89 +17788,1169 @@ class SdTextarea {
17127
17788
  }; }
17128
17789
  }
17129
17790
 
17130
- const toast = {
17131
- icon: "16",
17132
- "default": {
17133
- bg: "#07284A",
17134
- content: "#FFFFFF"
17791
+ const timepicker = {
17792
+ border: {
17793
+ "default": "#AAAAAA",
17794
+ focus: "#0075FF",
17795
+ width: "1"
17135
17796
  },
17136
- danger: {
17137
- bg: "#FB4444",
17138
- content: "#FFFFFF"
17797
+ bg: {
17798
+ "default": "#FFFFFF",
17799
+ disabled: "#E1E1E1"
17139
17800
  },
17140
- caution: {
17141
- bg: "#FFC700",
17142
- content: "#222222"
17801
+ icon: {
17802
+ "default": "#888888",
17803
+ disabled: "#BBBBBB"
17143
17804
  },
17144
- complete: {
17145
- bg: "#00973C",
17146
- content: "#FFFFFF"
17805
+ text: {
17806
+ "default": "#222222",
17807
+ disabled: "#888888"
17147
17808
  },
17148
- accent: {
17149
- bg: "#005CC9",
17150
- content: "#FFFFFF"
17809
+ selector: {
17810
+ bg: "#FFFFFF",
17811
+ range: {
17812
+ heading: {
17813
+ color: "#555555",
17814
+ gap: "16"
17815
+ },
17816
+ paddingXY: "24",
17817
+ panelGap: "24",
17818
+ section: {
17819
+ gap: "12"
17820
+ }
17821
+ },
17822
+ radius: "8",
17823
+ section: {
17824
+ paddingX: "16",
17825
+ paddingY: "12"
17826
+ },
17827
+ time: {
17828
+ gap: "4",
17829
+ column: {
17830
+ gap: "8"
17831
+ }
17832
+ },
17833
+ input: {
17834
+ width: "40"
17835
+ },
17836
+ colon: {
17837
+ size: "16"
17838
+ }
17151
17839
  },
17152
- info: {
17153
- bg: "#E6F1FF",
17154
- icon: "#0075FF",
17155
- text: "#222222",
17156
- textLink: "#555555"
17840
+ sm: {
17841
+ height: "28",
17842
+ paddingX: "12",
17843
+ gap: "8",
17844
+ icon: "16",
17845
+ radius: "4"
17846
+ },
17847
+ md: {
17848
+ height: "36",
17849
+ paddingX: "16",
17850
+ gap: "12",
17851
+ icon: "20",
17852
+ radius: "6"
17157
17853
  }
17158
17854
  };
17159
- var toastTokens = {
17160
- toast: toast
17855
+ var timepickerTokens = {
17856
+ timepicker: timepicker
17161
17857
  };
17162
17858
 
17163
- const TOAST_BUTTON_NAME_BY_TYPE = {
17164
- default: 'secondary_sm',
17165
- danger: 'danger_outline_sm',
17166
- caution: 'neutral_outline_sm',
17167
- complete: 'neutral_outline_sm',
17168
- accent: 'neutral_outline_sm',
17169
- info: 'secondary_sm',
17170
- };
17171
- const TOAST_TYPE_CONFIG = {
17172
- default: { bg: toastTokens.toast.default.bg, content: toastTokens.toast.default.content },
17173
- danger: { bg: toastTokens.toast.danger.bg, content: toastTokens.toast.danger.content },
17174
- caution: { bg: toastTokens.toast.caution.bg, content: toastTokens.toast.caution.content },
17175
- complete: { bg: toastTokens.toast.complete.bg, content: toastTokens.toast.complete.content },
17176
- accent: { bg: toastTokens.toast.accent.bg, content: toastTokens.toast.accent.content },
17177
- info: {
17178
- bg: toastTokens.toast.info.bg,
17179
- content: toastTokens.toast.info.text,
17180
- icon: toastTokens.toast.info.icon,
17181
- linkColor: toastTokens.toast.info.textLink,
17859
+ const sm = timepickerTokens.timepicker.sm;
17860
+ const md = timepickerTokens.timepicker.md;
17861
+ const TIMEPICKER_SIZE_MAP = {
17862
+ sm: {
17863
+ height: sm.height,
17864
+ paddingX: sm.paddingX,
17865
+ gap: sm.gap,
17866
+ iconSize: sm.icon,
17867
+ radius: sm.radius,
17868
+ // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
17869
+ fontSize: '12',
17870
+ lineHeight: '20',
17871
+ fontWeight: '400',
17872
+ minWidth: '128',
17873
+ },
17874
+ md: {
17875
+ height: md.height,
17876
+ paddingX: md.paddingX,
17877
+ gap: md.gap,
17878
+ iconSize: md.icon,
17879
+ radius: md.radius,
17880
+ // TODO: component.timepicker 토큰에 typography가 추가되면 이 fallback을 교체한다.
17881
+ fontSize: '14',
17882
+ lineHeight: '24',
17883
+ fontWeight: '400',
17884
+ minWidth: '160',
17182
17885
  },
17183
17886
  };
17184
- const TOAST_LAYOUT = {
17185
- iconSize: toastTokens.toast.icon,
17887
+ const TIMEPICKER_COLORS = {
17888
+ border: timepickerTokens.timepicker.border,
17889
+ bg: timepickerTokens.timepicker.bg,
17890
+ icon: timepickerTokens.timepicker.icon,
17891
+ text: {
17892
+ ...timepickerTokens.timepicker.text,
17893
+ hint: fieldTokens.field.hint.color,
17894
+ },
17186
17895
  };
17896
+ const TIMEPICKER_SELECTOR = {
17897
+ bg: timepickerTokens.timepicker.selector.bg,
17898
+ radius: timepickerTokens.timepicker.selector.radius,
17899
+ section: timepickerTokens.timepicker.selector.section,
17900
+ time: timepickerTokens.timepicker.selector.time,
17901
+ inputWidth: timepickerTokens.timepicker.selector.input.width,
17902
+ colonSize: timepickerTokens.timepicker.selector.colon.size,
17903
+ range: timepickerTokens.timepicker.selector.range,
17904
+ };
17905
+ function clampTimePart(value, min, max) {
17906
+ if (!Number.isFinite(value))
17907
+ return min;
17908
+ return Math.min(Math.max(value, min), max);
17909
+ }
17910
+ function padTimePart(value) {
17911
+ return String(value).padStart(2, '0');
17912
+ }
17913
+ function parseTimeValue(value) {
17914
+ const match = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? '');
17915
+ if (!match)
17916
+ return { hour: 0, minute: 0 };
17917
+ return {
17918
+ hour: clampTimePart(Number(match[1]), 0, 23),
17919
+ minute: clampTimePart(Number(match[2]), 0, 59),
17920
+ };
17921
+ }
17922
+ function formatTimeValue(hour, minute) {
17923
+ return `${padTimePart(clampTimePart(hour, 0, 23))}:${padTimePart(clampTimePart(minute, 0, 59))}`;
17924
+ }
17925
+ function formatTimeDisplay(value, type) {
17926
+ if (value == null || value === '')
17927
+ return '';
17928
+ const { hour, minute } = parseTimeValue(value);
17929
+ if (type === 'default')
17930
+ return formatTimeValue(hour, minute);
17931
+ const meridiem = hour >= 12 ? '오후' : '오전';
17932
+ const displayHour = hour % 12 === 0 ? 12 : hour % 12;
17933
+ return `${meridiem} ${padTimePart(displayHour)}:${padTimePart(minute)}`;
17934
+ }
17187
17935
 
17188
- 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}`;
17936
+ 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%}`;
17189
17937
 
17190
- class SdToast {
17938
+ class SdTimePicker {
17191
17939
  constructor(hostRef) {
17192
17940
  registerInstance(this, hostRef);
17193
- this.close = createEvent(this, "sdClose", 7);
17194
- this.buttonClick = createEvent(this, "sdButtonClick", 7);
17941
+ this.update = createEvent(this, "sdUpdate", 7);
17942
+ this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
17195
17943
  }
17196
- /** 좌측 아이콘명 */
17197
- icon;
17198
- /** 표시할 메시지 */
17199
- message;
17200
- /** 우측 링크 URL */
17201
- link;
17202
- /** 링크 표시 레이블 (없으면 URL 표시) */
17203
- linkLabel;
17204
- /** 우측 버튼 레이블 */
17205
- buttonLabel;
17206
- /** 닫기 버튼 표시 여부 */
17207
- useClose = false;
17208
- /** 토스트 타입 (색상/아이콘 프리셋) */
17944
+ static CLOSE_ANIMATION_DURATION = 150;
17945
+ get el() { return getElement(this); }
17946
+ /** 선택된 시간 (HH:mm) */
17947
+ value = null;
17948
+ /** 입력 필드 크기 */
17949
+ size = 'sm';
17950
+ /** 표시 타입: default(24시간) / midday(오전·오후) */
17209
17951
  type = 'default';
17210
- /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
17211
- close;
17212
- /** 우측 버튼 클릭 시 발생합니다. */
17952
+ /** 시간 미선택 시 표시할 placeholder */
17953
+ placeholder = '00:00';
17954
+ /** 비활성 상태 여부 */
17955
+ disabled = false;
17956
+ /** 값이 있을 때 지우기 버튼 표시 여부 */
17957
+ clearable = false;
17958
+ /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
17959
+ useMeridiem;
17960
+ /** 분 증감 단위 */
17961
+ minuteStep = 1;
17962
+ /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
17963
+ width = '';
17964
+ // sd-field 공통 props
17965
+ /** 레이블 텍스트 */
17966
+ label = '';
17967
+ /** 레이블 너비 */
17968
+ labelWidth = '';
17969
+ /** 필드 우측 어드온 레이블 */
17970
+ addonLabel = '';
17971
+ /** 어드온 정렬 방향 */
17972
+ addonAlign = 'start';
17973
+ /** 필드 하단 힌트 텍스트 */
17974
+ hint = '';
17975
+ /** 에러 메시지 */
17976
+ errorMessage = '';
17977
+ /** 유효성 검사 규칙 목록 */
17978
+ rules = [];
17979
+ /** 에러 상태 여부 */
17980
+ error = false;
17981
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
17982
+ status;
17983
+ /** 레이블 영역 아이콘 */
17984
+ icon = undefined;
17985
+ /** 레이블 툴팁 텍스트 */
17986
+ labelTooltip = '';
17987
+ /** 레이블 툴팁 상세 옵션 */
17988
+ labelTooltipProps = null;
17989
+ isOpen = false;
17990
+ isAnimatingOut = false;
17991
+ focused = false;
17992
+ hovered = false;
17993
+ /** 시간 선택 시 선택된 시간(HH:mm)을 전달합니다. */
17994
+ update;
17995
+ /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
17996
+ dropDownShow;
17997
+ triggerRef;
17998
+ formField;
17999
+ closeAnimationTimer;
18000
+ /** 폼 연동용 name 속성 */
18001
+ name = nanoid();
18002
+ watchIsOpen(newValue) {
18003
+ this.focused = newValue;
18004
+ this.dropDownShow.emit({ isOpen: newValue });
18005
+ }
18006
+ valueChanged(newValue) {
18007
+ if (newValue == null || newValue === '')
18008
+ return;
18009
+ const parsed = parseTimeValue(newValue);
18010
+ const normalized = formatTimeValue(parsed.hour, parsed.minute);
18011
+ if (normalized !== newValue)
18012
+ this.value = normalized;
18013
+ }
18014
+ /** 유효성 검사를 실행합니다. */
18015
+ async sdValidate() {
18016
+ return this.formField?.sdValidate();
18017
+ }
18018
+ /** 값과 유효성 상태를 초기화합니다. */
18019
+ async sdReset() {
18020
+ return this.formField?.sdReset();
18021
+ }
18022
+ /** 유효성 상태만 초기화합니다. */
18023
+ async sdResetValidate() {
18024
+ return this.formField?.sdResetValidation();
18025
+ }
18026
+ /** 입력 필드에 포커스를 이동합니다. */
18027
+ async sdFocus() {
18028
+ return this.formField?.sdFocus();
18029
+ }
18030
+ componentWillLoad() {
18031
+ this.valueChanged(this.value);
18032
+ }
18033
+ disconnectedCallback() {
18034
+ if (this.closeAnimationTimer)
18035
+ clearTimeout(this.closeAnimationTimer);
18036
+ }
18037
+ closeDropdown() {
18038
+ if (!this.isOpen)
18039
+ return;
18040
+ this.isOpen = false;
18041
+ this.isAnimatingOut = true;
18042
+ if (this.closeAnimationTimer)
18043
+ clearTimeout(this.closeAnimationTimer);
18044
+ this.closeAnimationTimer = setTimeout(() => {
18045
+ this.isAnimatingOut = false;
18046
+ }, SdTimePicker.CLOSE_ANIMATION_DURATION);
18047
+ }
18048
+ handleTriggerClick = () => {
18049
+ if (this.disabled)
18050
+ return;
18051
+ if (this.isOpen) {
18052
+ this.closeDropdown();
18053
+ }
18054
+ else {
18055
+ if (this.closeAnimationTimer)
18056
+ clearTimeout(this.closeAnimationTimer);
18057
+ this.isAnimatingOut = false;
18058
+ this.isOpen = true;
18059
+ }
18060
+ };
18061
+ handleClear = (event) => {
18062
+ event.stopPropagation();
18063
+ this.value = null;
18064
+ this.update.emit(null);
18065
+ };
18066
+ handleSelect = (event) => {
18067
+ event.stopPropagation();
18068
+ this.value = event.detail;
18069
+ this.update.emit(this.value);
18070
+ };
18071
+ get effectiveUseMeridiem() {
18072
+ return this.useMeridiem ?? this.type === 'midday';
18073
+ }
18074
+ render() {
18075
+ const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
18076
+ const cssVars = {
18077
+ '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
18078
+ '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
18079
+ '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
18080
+ '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
18081
+ '--sd-time-picker-min-width': `${sizeTokens.minWidth}px`,
18082
+ '--sd-system-color-field-border-default': TIMEPICKER_COLORS.border.default,
18083
+ '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
18084
+ '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
18085
+ };
18086
+ 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 => {
18087
+ this.triggerRef = el;
18088
+ } }, 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 })))));
18089
+ }
18090
+ static get watchers() { return {
18091
+ "isOpen": [{
18092
+ "watchIsOpen": 0
18093
+ }],
18094
+ "value": [{
18095
+ "valueChanged": 0
18096
+ }]
18097
+ }; }
18098
+ static get style() { return sdTimePickerCss(); }
18099
+ static get cmpMeta() { return {
18100
+ "$flags$": 512,
18101
+ "$tagName$": "sd-time-picker",
18102
+ "$members$": {
18103
+ "value": [1025],
18104
+ "size": [513],
18105
+ "type": [513],
18106
+ "placeholder": [513],
18107
+ "disabled": [516],
18108
+ "clearable": [4],
18109
+ "useMeridiem": [4, "use-meridiem"],
18110
+ "minuteStep": [2, "minute-step"],
18111
+ "width": [8],
18112
+ "label": [1],
18113
+ "labelWidth": [8, "label-width"],
18114
+ "addonLabel": [1, "addon-label"],
18115
+ "addonAlign": [1, "addon-align"],
18116
+ "hint": [1],
18117
+ "errorMessage": [1, "error-message"],
18118
+ "rules": [16],
18119
+ "error": [1028],
18120
+ "status": [1],
18121
+ "icon": [16],
18122
+ "labelTooltip": [1, "label-tooltip"],
18123
+ "labelTooltipProps": [16],
18124
+ "name": [1],
18125
+ "isOpen": [32],
18126
+ "isAnimatingOut": [32],
18127
+ "focused": [32],
18128
+ "hovered": [32],
18129
+ "sdValidate": [64],
18130
+ "sdReset": [64],
18131
+ "sdResetValidate": [64],
18132
+ "sdFocus": [64]
18133
+ },
18134
+ "$listeners$": undefined,
18135
+ "$lazyBundleId$": "-",
18136
+ "$attrsToReflect$": [["size", "size"], ["type", "type"], ["placeholder", "placeholder"], ["disabled", "disabled"]]
18137
+ }; }
18138
+ }
18139
+
18140
+ 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}`;
18141
+
18142
+ class SdTimePickerSelector {
18143
+ constructor(hostRef) {
18144
+ registerInstance(this, hostRef);
18145
+ this.update = createEvent(this, "sdUpdate", 7);
18146
+ }
18147
+ /** 선택된 시간 (HH:mm) */
18148
+ value = null;
18149
+ /** 오전/오후 선택 표시 여부 */
18150
+ useMeridiem = true;
18151
+ /** 분 증감 단위 */
18152
+ minuteStep = 1;
18153
+ /** 시간 변경 시 발생합니다. */
18154
+ update;
18155
+ valueChanged() {
18156
+ this.syncFromValue();
18157
+ }
18158
+ editingPart = null;
18159
+ inputDraft = {};
18160
+ hour = 0;
18161
+ minute = 0;
18162
+ componentWillLoad() {
18163
+ this.syncFromValue();
18164
+ }
18165
+ syncFromValue() {
18166
+ const parsed = parseTimeValue(this.value);
18167
+ this.hour = parsed.hour;
18168
+ this.minute = parsed.minute;
18169
+ }
18170
+ get meridiem() {
18171
+ return this.hour >= 12 ? 'PM' : 'AM';
18172
+ }
18173
+ get displayHour() {
18174
+ if (!this.useMeridiem)
18175
+ return this.hour;
18176
+ const hour = this.hour % 12;
18177
+ return hour === 0 ? 12 : hour;
18178
+ }
18179
+ emitNext(hour, minute) {
18180
+ this.hour = clampTimePart(hour, 0, 23);
18181
+ this.minute = clampTimePart(minute, 0, 59);
18182
+ this.update.emit(formatTimeValue(this.hour, this.minute));
18183
+ }
18184
+ sanitizeInput(value) {
18185
+ return value.replace(/\D/g, '').slice(0, 2);
18186
+ }
18187
+ setDraft(part, value) {
18188
+ this.inputDraft = { ...this.inputDraft, [part]: value };
18189
+ }
18190
+ beginEdit(part, value) {
18191
+ this.editingPart = part;
18192
+ this.setDraft(part, String(value).padStart(2, '0'));
18193
+ }
18194
+ commitHourDraft(draft) {
18195
+ const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
18196
+ const nextHour = this.useMeridiem
18197
+ ? this.meridiem === 'PM'
18198
+ ? raw === 12
18199
+ ? 12
18200
+ : raw + 12
18201
+ : raw === 12
18202
+ ? 0
18203
+ : raw
18204
+ : raw;
18205
+ this.emitNext(nextHour, this.minute);
18206
+ return raw;
18207
+ }
18208
+ commitMinuteDraft(draft) {
18209
+ const minute = clampTimePart(Number(draft), 0, 59);
18210
+ this.emitNext(this.hour, minute);
18211
+ return minute;
18212
+ }
18213
+ endEdit(part) {
18214
+ const draft = this.inputDraft[part];
18215
+ if (part === 'hour' && draft != null && draft !== '') {
18216
+ this.commitHourDraft(draft);
18217
+ }
18218
+ if (part === 'minute' && draft != null && draft !== '') {
18219
+ this.commitMinuteDraft(draft);
18220
+ }
18221
+ this.editingPart = null;
18222
+ this.inputDraft = {};
18223
+ }
18224
+ setMeridiem(meridiem) {
18225
+ if (meridiem === this.meridiem)
18226
+ return;
18227
+ if (meridiem === 'AM') {
18228
+ this.emitNext(this.hour - 12, this.minute);
18229
+ return;
18230
+ }
18231
+ this.emitNext(this.hour + 12, this.minute);
18232
+ }
18233
+ changeHour(delta) {
18234
+ this.emitNext((this.hour + delta + 24) % 24, this.minute);
18235
+ }
18236
+ changeMinute(delta) {
18237
+ const next = this.minute + delta;
18238
+ if (next > 59) {
18239
+ this.emitNext((this.hour + 1) % 24, next - 60);
18240
+ return;
18241
+ }
18242
+ if (next < 0) {
18243
+ this.emitNext((this.hour + 23) % 24, next + 60);
18244
+ return;
18245
+ }
18246
+ this.emitNext(this.hour, next);
18247
+ }
18248
+ handleHourInput = (event) => {
18249
+ const target = event.target;
18250
+ const draft = this.sanitizeInput(target.value);
18251
+ target.value = draft;
18252
+ this.setDraft('hour', draft);
18253
+ if (draft === '')
18254
+ return;
18255
+ if (draft.length < 2)
18256
+ return;
18257
+ const raw = this.commitHourDraft(draft);
18258
+ const displayDraft = Number(draft) === raw ? draft : String(raw);
18259
+ target.value = displayDraft;
18260
+ this.setDraft('hour', displayDraft);
18261
+ };
18262
+ handleMinuteInput = (event) => {
18263
+ const target = event.target;
18264
+ const draft = this.sanitizeInput(target.value);
18265
+ target.value = draft;
18266
+ this.setDraft('minute', draft);
18267
+ if (draft === '')
18268
+ return;
18269
+ if (draft.length < 2)
18270
+ return;
18271
+ const nextMinute = this.commitMinuteDraft(draft);
18272
+ const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
18273
+ target.value = displayDraft;
18274
+ this.setDraft('minute', displayDraft);
18275
+ this.emitNext(this.hour, nextMinute);
18276
+ };
18277
+ renderMeridiemButton(label, meridiem, position) {
18278
+ const selected = this.meridiem === meridiem;
18279
+ return (hAsync("button", { type: "button", class: {
18280
+ 'sd-time-picker-selector__meridiem-button': true,
18281
+ 'sd-time-picker-selector__meridiem-button--selected': selected,
18282
+ [`sd-time-picker-selector__meridiem-button--${position}`]: true,
18283
+ }, onClick: () => this.setMeridiem(meridiem) }, label));
18284
+ }
18285
+ renderColumn(type) {
18286
+ const isHour = type === 'hour';
18287
+ const value = isHour ? this.displayHour : this.minute;
18288
+ const displayValue = this.editingPart === type ? (this.inputDraft[type] ?? '') : String(value).padStart(2, '0');
18289
+ 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)) })));
18290
+ }
18291
+ render() {
18292
+ const cssVars = {
18293
+ '--selector-bg': TIMEPICKER_SELECTOR.bg,
18294
+ '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
18295
+ '--selector-section-padding-x': `${TIMEPICKER_SELECTOR.section.paddingX}px`,
18296
+ '--selector-section-padding-y': `${TIMEPICKER_SELECTOR.section.paddingY}px`,
18297
+ '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
18298
+ '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
18299
+ '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
18300
+ '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
18301
+ };
18302
+ 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'))));
18303
+ }
18304
+ static get watchers() { return {
18305
+ "value": [{
18306
+ "valueChanged": 0
18307
+ }]
18308
+ }; }
18309
+ static get style() { return sdTimePickerSelectorCss(); }
18310
+ static get cmpMeta() { return {
18311
+ "$flags$": 512,
18312
+ "$tagName$": "sd-time-picker-selector",
18313
+ "$members$": {
18314
+ "value": [1],
18315
+ "useMeridiem": [4, "use-meridiem"],
18316
+ "minuteStep": [2, "minute-step"],
18317
+ "editingPart": [32],
18318
+ "inputDraft": [32]
18319
+ },
18320
+ "$listeners$": undefined,
18321
+ "$lazyBundleId$": "-",
18322
+ "$attrsToReflect$": []
18323
+ }; }
18324
+ }
18325
+
18326
+ 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}`;
18327
+
18328
+ class SdTimePickerTrigger {
18329
+ constructor(hostRef) {
18330
+ registerInstance(this, hostRef);
18331
+ this.triggerClick = createEvent(this, "sdTriggerClick", 7);
18332
+ this.clear = createEvent(this, "sdClear", 7);
18333
+ }
18334
+ /** 표시할 시간 텍스트 */
18335
+ displayText = '';
18336
+ /** 입력 힌트 텍스트 */
18337
+ placeholder = '00:00';
18338
+ /** 비활성 상태 여부 */
18339
+ disabled = false;
18340
+ /** 지우기 버튼 표시 여부 */
18341
+ clearable = false;
18342
+ /** 트리거 크기 */
18343
+ size = 'sm';
18344
+ /** 트리거 클릭 시 발생합니다. */
18345
+ triggerClick;
18346
+ /** 지우기 버튼 클릭 시 발생합니다. */
18347
+ clear;
18348
+ handleClick = () => {
18349
+ if (this.disabled)
18350
+ return;
18351
+ this.triggerClick.emit();
18352
+ };
18353
+ handleClear = (event) => {
18354
+ event.stopPropagation();
18355
+ if (this.disabled)
18356
+ return;
18357
+ this.clear.emit();
18358
+ };
18359
+ render() {
18360
+ const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
18361
+ const hasValue = this.displayText !== '';
18362
+ const textMinWidth = this.size === 'md' ? 96 : 80;
18363
+ const cssVars = {
18364
+ '--trigger-padding-x': `${sizeTokens.paddingX}px`,
18365
+ '--trigger-gap': `${sizeTokens.gap}px`,
18366
+ '--trigger-icon-size': `${sizeTokens.iconSize}px`,
18367
+ '--trigger-font-size': `${sizeTokens.fontSize}px`,
18368
+ '--trigger-line-height': `${sizeTokens.lineHeight}px`,
18369
+ '--trigger-font-weight': sizeTokens.fontWeight,
18370
+ '--trigger-radius': `${sizeTokens.radius}px`,
18371
+ '--trigger-text-min-width': `${textMinWidth}px`,
18372
+ '--trigger-text-color': this.disabled
18373
+ ? TIMEPICKER_COLORS.text.disabled
18374
+ : hasValue
18375
+ ? TIMEPICKER_COLORS.text.default
18376
+ : TIMEPICKER_COLORS.text.hint,
18377
+ '--trigger-icon-color': this.disabled
18378
+ ? TIMEPICKER_COLORS.icon.disabled
18379
+ : TIMEPICKER_COLORS.icon.default,
18380
+ };
18381
+ return (hAsync("div", { key: '4cd9086e21a7e7fedb6601c163dcf9c5c8f374d1', role: "button", tabindex: this.disabled ? -1 : 0, class: {
18382
+ 'sd-time-picker-trigger': true,
18383
+ 'sd-time-picker-trigger--disabled': this.disabled,
18384
+ }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
18385
+ if (e.key === 'Enter' || e.key === ' ') {
18386
+ e.preventDefault();
18387
+ this.handleClick();
18388
+ }
18389
+ } }, 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 }))));
18390
+ }
18391
+ static get style() { return sdTimePickerTriggerCss(); }
18392
+ static get cmpMeta() { return {
18393
+ "$flags$": 512,
18394
+ "$tagName$": "sd-time-picker-trigger",
18395
+ "$members$": {
18396
+ "displayText": [1, "display-text"],
18397
+ "placeholder": [1],
18398
+ "disabled": [4],
18399
+ "clearable": [4],
18400
+ "size": [1]
18401
+ },
18402
+ "$listeners$": undefined,
18403
+ "$lazyBundleId$": "-",
18404
+ "$attrsToReflect$": []
18405
+ }; }
18406
+ }
18407
+
18408
+ function getTimeMinutes(value) {
18409
+ const { hour, minute } = parseTimeValue(value);
18410
+ return hour * 60 + minute;
18411
+ }
18412
+ function normalizeTimeRangeValue(value, rangeOrder = 'strict') {
18413
+ if (value == null)
18414
+ return null;
18415
+ const normalized = value.map(item => {
18416
+ const parsed = parseTimeValue(item);
18417
+ return formatTimeValue(parsed.hour, parsed.minute);
18418
+ });
18419
+ if (rangeOrder === 'strict' && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
18420
+ return [normalized[0], normalized[0]];
18421
+ }
18422
+ return normalized;
18423
+ }
18424
+ function formatTimeRangeDisplay(value, type) {
18425
+ if (value == null || value[0] === '' || value[1] === '')
18426
+ return '';
18427
+ return `${formatTimeDisplay(value[0], type)} ~ ${formatTimeDisplay(value[1], type)}`;
18428
+ }
18429
+
18430
+ 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%}`;
18431
+
18432
+ class SdTimeRangePicker {
18433
+ constructor(hostRef) {
18434
+ registerInstance(this, hostRef);
18435
+ this.update = createEvent(this, "sdUpdate", 7);
18436
+ this.dropDownShow = createEvent(this, "sdDropDownShow", 7);
18437
+ }
18438
+ static CLOSE_ANIMATION_DURATION = 150;
18439
+ get el() { return getElement(this); }
18440
+ /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
18441
+ value = null;
18442
+ /** 입력 필드 크기 */
18443
+ size = 'sm';
18444
+ /** 표시 타입: default(24시간) / midday(오전·오후) */
18445
+ type = 'default';
18446
+ /** 시간 미선택 시 표시할 placeholder */
18447
+ placeholder = '00:00 ~ 23:59';
18448
+ /** 비활성 상태 여부 */
18449
+ disabled = false;
18450
+ /** 값이 있을 때 지우기 버튼 표시 여부 */
18451
+ clearable = false;
18452
+ /** 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. */
18453
+ useMeridiem;
18454
+ /** 분 증감 단위 */
18455
+ minuteStep = 1;
18456
+ /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
18457
+ rangeOrder = 'strict';
18458
+ /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
18459
+ width = '';
18460
+ // sd-field 공통 props
18461
+ /** 레이블 텍스트 */
18462
+ label = '';
18463
+ /** 레이블 너비 */
18464
+ labelWidth = '';
18465
+ /** 필드 우측 어드온 레이블 */
18466
+ addonLabel = '';
18467
+ /** 어드온 정렬 방향 */
18468
+ addonAlign = 'start';
18469
+ /** 필드 하단 힌트 텍스트 */
18470
+ hint = '';
18471
+ /** 에러 메시지 */
18472
+ errorMessage = '';
18473
+ /** 유효성 검사 규칙 목록 */
18474
+ rules = [];
18475
+ /** 에러 상태 여부 */
18476
+ error = false;
18477
+ /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
18478
+ status;
18479
+ /** 레이블 영역 아이콘 */
18480
+ icon = undefined;
18481
+ /** 레이블 툴팁 텍스트 */
18482
+ labelTooltip = '';
18483
+ /** 레이블 툴팁 상세 옵션 */
18484
+ labelTooltipProps = null;
18485
+ isOpen = false;
18486
+ isAnimatingOut = false;
18487
+ focused = false;
18488
+ hovered = false;
18489
+ /** 시간 범위 선택 시 선택된 범위([시작, 종료])를 전달합니다. */
18490
+ update;
18491
+ /** 선택기 열림/닫힘 상태가 바뀔 때 발생합니다. */
18492
+ dropDownShow;
18493
+ triggerRef;
18494
+ formField;
18495
+ closeAnimationTimer;
18496
+ /** 폼 연동용 name 속성 */
18497
+ name = nanoid();
18498
+ watchIsOpen(newValue) {
18499
+ this.focused = newValue;
18500
+ this.dropDownShow.emit({ isOpen: newValue });
18501
+ }
18502
+ valueChanged(newValue) {
18503
+ const normalized = normalizeTimeRangeValue(newValue, this.rangeOrder);
18504
+ if (normalized != null && JSON.stringify(normalized) !== JSON.stringify(newValue)) {
18505
+ this.value = normalized;
18506
+ }
18507
+ }
18508
+ rangeOrderChanged() {
18509
+ this.valueChanged(this.value);
18510
+ }
18511
+ /** 유효성 검사를 실행합니다. */
18512
+ async sdValidate() {
18513
+ return this.formField?.sdValidate();
18514
+ }
18515
+ /** 값과 유효성 상태를 초기화합니다. */
18516
+ async sdReset() {
18517
+ return this.formField?.sdReset();
18518
+ }
18519
+ /** 유효성 상태만 초기화합니다. */
18520
+ async sdResetValidate() {
18521
+ return this.formField?.sdResetValidation();
18522
+ }
18523
+ /** 입력 필드에 포커스를 이동합니다. */
18524
+ async sdFocus() {
18525
+ return this.formField?.sdFocus();
18526
+ }
18527
+ componentWillLoad() {
18528
+ this.valueChanged(this.value);
18529
+ }
18530
+ disconnectedCallback() {
18531
+ if (this.closeAnimationTimer)
18532
+ clearTimeout(this.closeAnimationTimer);
18533
+ }
18534
+ closeDropdown() {
18535
+ if (!this.isOpen)
18536
+ return;
18537
+ this.isOpen = false;
18538
+ this.isAnimatingOut = true;
18539
+ if (this.closeAnimationTimer)
18540
+ clearTimeout(this.closeAnimationTimer);
18541
+ this.closeAnimationTimer = setTimeout(() => {
18542
+ this.isAnimatingOut = false;
18543
+ }, SdTimeRangePicker.CLOSE_ANIMATION_DURATION);
18544
+ }
18545
+ handleTriggerClick = () => {
18546
+ if (this.disabled)
18547
+ return;
18548
+ if (this.isOpen) {
18549
+ this.closeDropdown();
18550
+ }
18551
+ else {
18552
+ if (this.closeAnimationTimer)
18553
+ clearTimeout(this.closeAnimationTimer);
18554
+ this.isAnimatingOut = false;
18555
+ this.isOpen = true;
18556
+ }
18557
+ };
18558
+ handleClear = (event) => {
18559
+ event.stopPropagation();
18560
+ this.value = null;
18561
+ this.update.emit(null);
18562
+ };
18563
+ handleSelect = (event) => {
18564
+ event.stopPropagation();
18565
+ this.value = event.detail;
18566
+ this.update.emit(this.value);
18567
+ };
18568
+ get effectiveUseMeridiem() {
18569
+ return this.useMeridiem ?? this.type === 'midday';
18570
+ }
18571
+ get displayText() {
18572
+ return formatTimeRangeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default');
18573
+ }
18574
+ render() {
18575
+ const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
18576
+ const cssVars = {
18577
+ '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
18578
+ '--sd-system-size-field-md-height': `${sizeTokens.height}px`,
18579
+ '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
18580
+ '--sd-system-radius-field-md': `${sizeTokens.radius}px`,
18581
+ '--sd-time-range-picker-min-width': `${sizeTokens.minWidth}px`,
18582
+ '--sd-system-color-field-border-default': TIMEPICKER_COLORS.border.default,
18583
+ '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
18584
+ '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
18585
+ };
18586
+ 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 => {
18587
+ this.triggerRef = el;
18588
+ } }, 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 })))));
18589
+ }
18590
+ static get watchers() { return {
18591
+ "isOpen": [{
18592
+ "watchIsOpen": 0
18593
+ }],
18594
+ "value": [{
18595
+ "valueChanged": 0
18596
+ }],
18597
+ "rangeOrder": [{
18598
+ "rangeOrderChanged": 0
18599
+ }]
18600
+ }; }
18601
+ static get style() { return sdTimeRangePickerCss(); }
18602
+ static get cmpMeta() { return {
18603
+ "$flags$": 512,
18604
+ "$tagName$": "sd-time-range-picker",
18605
+ "$members$": {
18606
+ "value": [1040],
18607
+ "size": [513],
18608
+ "type": [513],
18609
+ "placeholder": [513],
18610
+ "disabled": [516],
18611
+ "clearable": [4],
18612
+ "useMeridiem": [4, "use-meridiem"],
18613
+ "minuteStep": [2, "minute-step"],
18614
+ "rangeOrder": [1, "range-order"],
18615
+ "width": [8],
18616
+ "label": [1],
18617
+ "labelWidth": [8, "label-width"],
18618
+ "addonLabel": [1, "addon-label"],
18619
+ "addonAlign": [1, "addon-align"],
18620
+ "hint": [1],
18621
+ "errorMessage": [1, "error-message"],
18622
+ "rules": [16],
18623
+ "error": [1028],
18624
+ "status": [1],
18625
+ "icon": [16],
18626
+ "labelTooltip": [1, "label-tooltip"],
18627
+ "labelTooltipProps": [16],
18628
+ "name": [1],
18629
+ "isOpen": [32],
18630
+ "isAnimatingOut": [32],
18631
+ "focused": [32],
18632
+ "hovered": [32],
18633
+ "sdValidate": [64],
18634
+ "sdReset": [64],
18635
+ "sdResetValidate": [64],
18636
+ "sdFocus": [64]
18637
+ },
18638
+ "$listeners$": undefined,
18639
+ "$lazyBundleId$": "-",
18640
+ "$attrsToReflect$": [["size", "size"], ["type", "type"], ["placeholder", "placeholder"], ["disabled", "disabled"]]
18641
+ }; }
18642
+ }
18643
+
18644
+ 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}`;
18645
+
18646
+ class SdTimeRangePickerSelector {
18647
+ constructor(hostRef) {
18648
+ registerInstance(this, hostRef);
18649
+ this.update = createEvent(this, "sdUpdate", 7);
18650
+ }
18651
+ /** 선택된 시간 범위 [시작, 종료] (HH:mm) */
18652
+ value = null;
18653
+ /** 오전/오후 선택 표시 여부 */
18654
+ useMeridiem = false;
18655
+ /** 분 증감 단위 */
18656
+ minuteStep = 1;
18657
+ /** 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. */
18658
+ rangeOrder = 'strict';
18659
+ /** 시간 범위 변경 시 발생합니다. */
18660
+ update;
18661
+ editingKey = null;
18662
+ inputDraft = {};
18663
+ autoAdjusted = null;
18664
+ getRange() {
18665
+ return this.value ?? ['00:00', '23:59'];
18666
+ }
18667
+ getParts(side) {
18668
+ const [start, end] = this.getRange();
18669
+ return parseTimeValue(side === 'start' ? start : end);
18670
+ }
18671
+ getMeridiem(side) {
18672
+ return this.getParts(side).hour >= 12 ? 'PM' : 'AM';
18673
+ }
18674
+ getDisplayHour(side) {
18675
+ const { hour } = this.getParts(side);
18676
+ if (!this.useMeridiem)
18677
+ return hour;
18678
+ const displayHour = hour % 12;
18679
+ return displayHour === 0 ? 12 : displayHour;
18680
+ }
18681
+ emitSide(side, hour, minute, direction = 'unknown') {
18682
+ const [start, end] = this.getRange();
18683
+ const next = formatTimeValue(hour, minute);
18684
+ this.update.emit(this.normalizeNextRange(side === 'start' ? [next, end] : [start, next], side, direction));
18685
+ }
18686
+ getTimeMinutes(value) {
18687
+ const { hour, minute } = parseTimeValue(value);
18688
+ return hour * 60 + minute;
18689
+ }
18690
+ normalizeNextRange(range, changedSide, direction) {
18691
+ if (this.rangeOrder === 'allow-cross-day')
18692
+ return range;
18693
+ const [start, end] = range;
18694
+ const [currentStart, currentEnd] = this.getRange();
18695
+ if (this.getTimeMinutes(start) <= this.getTimeMinutes(end)) {
18696
+ const shouldKeepSynced = this.autoAdjusted?.side === changedSide &&
18697
+ currentStart === currentEnd &&
18698
+ start !== end &&
18699
+ (direction === 'unknown' || this.autoAdjusted.direction === direction);
18700
+ if (shouldKeepSynced) {
18701
+ return changedSide === 'start' ? [start, start] : [end, end];
18702
+ }
18703
+ this.autoAdjusted = null;
18704
+ return range;
18705
+ }
18706
+ this.autoAdjusted = {
18707
+ side: changedSide,
18708
+ direction: changedSide === 'start' ? 'increase' : 'decrease',
18709
+ };
18710
+ return changedSide === 'start' ? [start, start] : [end, end];
18711
+ }
18712
+ getEditingKey(side, part) {
18713
+ return `${side}-${part}`;
18714
+ }
18715
+ sanitizeInput(value) {
18716
+ return value.replace(/\D/g, '').slice(0, 2);
18717
+ }
18718
+ setDraft(key, value) {
18719
+ this.inputDraft = { ...this.inputDraft, [key]: value };
18720
+ }
18721
+ beginEdit(side, part, value) {
18722
+ const key = this.getEditingKey(side, part);
18723
+ this.editingKey = key;
18724
+ this.setDraft(key, String(value).padStart(2, '0'));
18725
+ }
18726
+ commitHourDraft(side, draft) {
18727
+ const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
18728
+ const { minute } = this.getParts(side);
18729
+ const meridiem = this.getMeridiem(side);
18730
+ const nextHour = this.useMeridiem
18731
+ ? meridiem === 'PM'
18732
+ ? raw === 12
18733
+ ? 12
18734
+ : raw + 12
18735
+ : raw === 12
18736
+ ? 0
18737
+ : raw
18738
+ : raw;
18739
+ this.emitSide(side, nextHour, minute);
18740
+ return raw;
18741
+ }
18742
+ commitMinuteDraft(side, draft) {
18743
+ const { hour } = this.getParts(side);
18744
+ const nextMinute = clampTimePart(Number(draft), 0, 59);
18745
+ this.emitSide(side, hour, nextMinute);
18746
+ return nextMinute;
18747
+ }
18748
+ endEdit(side, part) {
18749
+ const draft = this.inputDraft[this.getEditingKey(side, part)];
18750
+ if (part === 'hour' && draft != null && draft !== '') {
18751
+ this.commitHourDraft(side, draft);
18752
+ }
18753
+ if (part === 'minute' && draft != null && draft !== '') {
18754
+ this.commitMinuteDraft(side, draft);
18755
+ }
18756
+ this.editingKey = null;
18757
+ this.inputDraft = {};
18758
+ }
18759
+ setMeridiem(side, meridiem) {
18760
+ const current = this.getMeridiem(side);
18761
+ if (current === meridiem)
18762
+ return;
18763
+ const { hour, minute } = this.getParts(side);
18764
+ this.emitSide(side, meridiem === 'AM' ? hour - 12 : hour + 12, minute);
18765
+ }
18766
+ changeHour(side, delta) {
18767
+ const { hour, minute } = this.getParts(side);
18768
+ this.emitSide(side, (hour + delta + 24) % 24, minute, delta > 0 ? 'increase' : 'decrease');
18769
+ }
18770
+ changeMinute(side, delta) {
18771
+ const { hour, minute } = this.getParts(side);
18772
+ const next = minute + delta;
18773
+ if (next > 59) {
18774
+ this.emitSide(side, (hour + 1) % 24, next - 60, delta > 0 ? 'increase' : 'decrease');
18775
+ return;
18776
+ }
18777
+ if (next < 0) {
18778
+ this.emitSide(side, (hour + 23) % 24, next + 60, delta > 0 ? 'increase' : 'decrease');
18779
+ return;
18780
+ }
18781
+ this.emitSide(side, hour, next, delta > 0 ? 'increase' : 'decrease');
18782
+ }
18783
+ handleHourInput = (side, event) => {
18784
+ const target = event.target;
18785
+ const draft = this.sanitizeInput(target.value);
18786
+ target.value = draft;
18787
+ this.setDraft(this.getEditingKey(side, 'hour'), draft);
18788
+ if (draft === '')
18789
+ return;
18790
+ if (draft.length < 2)
18791
+ return;
18792
+ const raw = this.commitHourDraft(side, draft);
18793
+ const displayDraft = Number(draft) === raw ? draft : String(raw);
18794
+ target.value = displayDraft;
18795
+ this.setDraft(this.getEditingKey(side, 'hour'), displayDraft);
18796
+ };
18797
+ handleMinuteInput = (side, event) => {
18798
+ const target = event.target;
18799
+ const draft = this.sanitizeInput(target.value);
18800
+ target.value = draft;
18801
+ this.setDraft(this.getEditingKey(side, 'minute'), draft);
18802
+ if (draft === '')
18803
+ return;
18804
+ if (draft.length < 2)
18805
+ return;
18806
+ const nextMinute = this.commitMinuteDraft(side, draft);
18807
+ const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
18808
+ target.value = displayDraft;
18809
+ this.setDraft(this.getEditingKey(side, 'minute'), displayDraft);
18810
+ };
18811
+ renderMeridiemButton(side, label, meridiem, position) {
18812
+ const selected = this.getMeridiem(side) === meridiem;
18813
+ return (hAsync("button", { type: "button", class: {
18814
+ 'sd-time-range-picker-selector__meridiem-button': true,
18815
+ 'sd-time-range-picker-selector__meridiem-button--selected': selected,
18816
+ [`sd-time-range-picker-selector__meridiem-button--${position}`]: true,
18817
+ }, onClick: () => this.setMeridiem(side, meridiem) }, label));
18818
+ }
18819
+ renderColumn(side, type) {
18820
+ const isHour = type === 'hour';
18821
+ const { minute } = this.getParts(side);
18822
+ const value = isHour ? this.getDisplayHour(side) : minute;
18823
+ const editingKey = this.getEditingKey(side, type);
18824
+ const displayValue = this.editingKey === editingKey
18825
+ ? (this.inputDraft[editingKey] ?? '')
18826
+ : String(value).padStart(2, '0');
18827
+ 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) })));
18828
+ }
18829
+ renderPanel(side, title) {
18830
+ 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'))));
18831
+ }
18832
+ render() {
18833
+ const cssVars = {
18834
+ '--selector-bg': TIMEPICKER_SELECTOR.bg,
18835
+ '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
18836
+ '--selector-range-padding': `${TIMEPICKER_SELECTOR.range.paddingXY}px`,
18837
+ '--selector-range-panel-gap': `${TIMEPICKER_SELECTOR.range.panelGap}px`,
18838
+ '--selector-range-section-gap': `${TIMEPICKER_SELECTOR.range.section.gap}px`,
18839
+ '--selector-range-heading-gap': `${TIMEPICKER_SELECTOR.range.heading.gap}px`,
18840
+ '--selector-range-heading-color': TIMEPICKER_SELECTOR.range.heading.color,
18841
+ '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
18842
+ '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
18843
+ '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
18844
+ '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
18845
+ '--selector-border-width': `${TIMEPICKER_COLORS.border.width}px`,
18846
+ '--selector-border-default': TIMEPICKER_COLORS.border.default,
18847
+ '--selector-border-focus': TIMEPICKER_COLORS.border.focus,
18848
+ '--selector-bg-disabled': TIMEPICKER_COLORS.bg.disabled,
18849
+ '--selector-text-default': TIMEPICKER_COLORS.text.default,
18850
+ };
18851
+ 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', '종료 시간')));
18852
+ }
18853
+ static get style() { return sdTimeRangePickerSelectorCss(); }
18854
+ static get cmpMeta() { return {
18855
+ "$flags$": 512,
18856
+ "$tagName$": "sd-time-range-picker-selector",
18857
+ "$members$": {
18858
+ "value": [16],
18859
+ "useMeridiem": [4, "use-meridiem"],
18860
+ "minuteStep": [2, "minute-step"],
18861
+ "rangeOrder": [1, "range-order"],
18862
+ "editingKey": [32],
18863
+ "inputDraft": [32]
18864
+ },
18865
+ "$listeners$": undefined,
18866
+ "$lazyBundleId$": "-",
18867
+ "$attrsToReflect$": []
18868
+ }; }
18869
+ }
18870
+
18871
+ const toast = {
18872
+ icon: "16",
18873
+ "default": {
18874
+ bg: "#07284A",
18875
+ content: "#FFFFFF"
18876
+ },
18877
+ danger: {
18878
+ bg: "#FB4444",
18879
+ content: "#FFFFFF"
18880
+ },
18881
+ caution: {
18882
+ bg: "#FFC700",
18883
+ content: "#222222"
18884
+ },
18885
+ complete: {
18886
+ bg: "#00973C",
18887
+ content: "#FFFFFF"
18888
+ },
18889
+ accent: {
18890
+ bg: "#005CC9",
18891
+ content: "#FFFFFF"
18892
+ },
18893
+ info: {
18894
+ bg: "#E6F1FF",
18895
+ icon: "#0075FF",
18896
+ text: "#222222",
18897
+ textLink: "#555555"
18898
+ }
18899
+ };
18900
+ var toastTokens = {
18901
+ toast: toast
18902
+ };
18903
+
18904
+ const TOAST_BUTTON_NAME_BY_TYPE = {
18905
+ default: 'secondary_sm',
18906
+ danger: 'danger_outline_sm',
18907
+ caution: 'neutral_outline_sm',
18908
+ complete: 'neutral_outline_sm',
18909
+ accent: 'neutral_outline_sm',
18910
+ info: 'secondary_sm',
18911
+ };
18912
+ const TOAST_TYPE_CONFIG = {
18913
+ default: { bg: toastTokens.toast.default.bg, content: toastTokens.toast.default.content },
18914
+ danger: { bg: toastTokens.toast.danger.bg, content: toastTokens.toast.danger.content },
18915
+ caution: { bg: toastTokens.toast.caution.bg, content: toastTokens.toast.caution.content },
18916
+ complete: { bg: toastTokens.toast.complete.bg, content: toastTokens.toast.complete.content },
18917
+ accent: { bg: toastTokens.toast.accent.bg, content: toastTokens.toast.accent.content },
18918
+ info: {
18919
+ bg: toastTokens.toast.info.bg,
18920
+ content: toastTokens.toast.info.text,
18921
+ icon: toastTokens.toast.info.icon,
18922
+ linkColor: toastTokens.toast.info.textLink,
18923
+ },
18924
+ };
18925
+ const TOAST_LAYOUT = {
18926
+ iconSize: toastTokens.toast.icon,
18927
+ };
18928
+
18929
+ 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}`;
18930
+
18931
+ class SdToast {
18932
+ constructor(hostRef) {
18933
+ registerInstance(this, hostRef);
18934
+ this.close = createEvent(this, "sdClose", 7);
18935
+ this.buttonClick = createEvent(this, "sdButtonClick", 7);
18936
+ }
18937
+ /** 좌측 아이콘명 */
18938
+ icon;
18939
+ /** 표시할 메시지 */
18940
+ message;
18941
+ /** 우측 링크 URL */
18942
+ link;
18943
+ /** 링크 표시 레이블 (없으면 URL 표시) */
18944
+ linkLabel;
18945
+ /** 우측 버튼 레이블 */
18946
+ buttonLabel;
18947
+ /** 닫기 버튼 표시 여부 */
18948
+ useClose = false;
18949
+ /** 토스트 타입 (색상/아이콘 프리셋) */
18950
+ type = 'default';
18951
+ /** 닫기 버튼 클릭 또는 자동 닫힘 시 발생합니다. */
18952
+ close;
18953
+ /** 우측 버튼 클릭 시 발생합니다. */
17213
18954
  buttonClick;
17214
18955
  render() {
17215
18956
  const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
@@ -17218,12 +18959,12 @@ class SdToast {
17218
18959
  const linkColor = typeConfig.linkColor ?? typeConfig.content;
17219
18960
  const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
17220
18961
  const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
17221
- return (hAsync("div", { key: 'c402e2eabab8b2d229cc40550d2ffb7c601ad992', style: {
18962
+ return (hAsync("div", { key: '5d7511c3fe5a5ef828986ff624af7c52ff087cfa', style: {
17222
18963
  '--sd-toast-bg': typeConfig.bg,
17223
18964
  '--sd-toast-text': typeConfig.content,
17224
18965
  '--sd-toast-icon': iconColor,
17225
18966
  '--sd-toast-link': linkColor,
17226
- } }, hAsync("div", { key: 'a6dbbc079649181799f434f7158791ec1e52fd4a', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (hAsync("div", { key: 'c8210c48776c0722ed025049ebfce5eb8477df0a', class: "sd-toast__icon" }, hAsync("sd-icon", { key: 'ee99941287447694a3aa700281bacdbb5d9605bc', name: this.icon, size: iconSize, color: iconColor }))), hAsync("div", { key: 'f4be8a8599e84bb75aeaa5414cf6ff2cd063e391', class: "sd-toast__content" }, hAsync("span", { key: 'af60e01cf1be615fd3b462885c9060445e49c809', class: "sd-toast__message" }, this.message)), this.link && (hAsync("a", { key: 'cd7bbe3ef56e6f475d4182118321645b444c2334', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (hAsync("sd-button", { key: '87c9a38fead8416d36850ff9247d02a962e92f27', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (hAsync("sd-ghost-button", { key: '1af5e0ffa26a26574bb9935fdeb01192895c32eb', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
18967
+ } }, 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() })))));
17227
18968
  }
17228
18969
  static get style() { return sdToastCss(); }
17229
18970
  static get cmpMeta() { return {
@@ -17485,7 +19226,7 @@ class SdToastContainer {
17485
19226
  const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
17486
19227
  const indexMap = new Map();
17487
19228
  activeToasts.forEach((t, i) => indexMap.set(t.id, i));
17488
- return (hAsync("div", { key: '9d0347cd5aba313c4e5cddaf7ecd9eaa3be096c8', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
19229
+ return (hAsync("div", { key: '166ac21503b08853631fddaed047ab108a99570a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
17489
19230
  this.expanded = true;
17490
19231
  this.pauseTimers();
17491
19232
  }, onMouseLeave: () => {
@@ -17646,7 +19387,7 @@ class SdToggle {
17646
19387
  '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
17647
19388
  '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
17648
19389
  };
17649
- return (hAsync("label", { key: '26ca7c70bf68964bc7bd0fd321912ee49dfc5c73', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, hAsync("input", { key: '5189d6d9f234921d78a0bd3cdded8256ad273702', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
19390
+ 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 })));
17650
19391
  }
17651
19392
  static get style() { return sdToggleCss(); }
17652
19393
  static get cmpMeta() { return {
@@ -17699,42 +19440,29 @@ class SdTooltip {
17699
19440
  trigger = 'hover';
17700
19441
  /** 툴팁 표시 방향 */
17701
19442
  placement = 'top';
17702
- /** 아이콘 트리거 색상 */
19443
+ /** 기본(아이콘) 트리거 색상 */
17703
19444
  color = '#01BB4B';
17704
19445
  /** 툴팁 배경/텍스트 색상 타입 */
17705
19446
  tooltipType = 'default';
17706
- /** 아이콘 트리거 아이콘명 */
19447
+ /** 기본(아이콘) 트리거 아이콘명. slot="anchor" 가 있으면 무시 */
17707
19448
  icon = 'helpOutline';
17708
- /** 아이콘 트리거 크기 */
19449
+ /** 기본(아이콘) 트리거 크기 */
17709
19450
  iconSize = 12;
17710
- /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
17711
- label = '';
17712
- /** 버튼 트리거 프리셋 */
17713
- name = 'primary_sm';
17714
- /** 버튼 트리거 우측 아이콘 */
17715
- rightIcon;
17716
19451
  /** 스크린리더용 접근성 레이블 */
17717
19452
  ariaLabel = '';
17718
- /** 비활성 상태 여부 */
19453
+ /** 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 */
17719
19454
  disabled = false;
17720
- /** 버튼 type 속성 */
17721
- type = 'button';
17722
19455
  /** 툴팁 우측 상단 닫기 버튼 표시 여부 */
17723
19456
  useClose = false;
17724
- /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스 */
17725
- sdClass = '';
17726
19457
  /**
17727
19458
  * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
17728
- * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
19459
+ * (HTML 문자열 허용) 지정하지 않으면 default slot 으로 전달한 내용을 본문으로 사용합니다.
17729
19460
  */
17730
19461
  message = [];
17731
- /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
17732
- triggerClass = '';
17733
- /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
17734
- triggerStyle = '';
19462
+ /** 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
19463
+ triggerClassName = '';
17735
19464
  showTooltip = false;
17736
19465
  slotContentHTML = '';
17737
- buttonEl;
17738
19466
  triggerEl;
17739
19467
  isAnchorMode = false;
17740
19468
  menuEl;
@@ -17742,6 +19470,8 @@ class SdTooltip {
17742
19470
  closeTimeout;
17743
19471
  static CLOSE_ANIM_MS = 150;
17744
19472
  openTooltip = () => {
19473
+ if (this.disabled)
19474
+ return;
17745
19475
  this.cancelHideTimer();
17746
19476
  this.showTooltip = true;
17747
19477
  if (this.menuEl) {
@@ -17791,22 +19521,16 @@ class SdTooltip {
17791
19521
  this.closeTooltip();
17792
19522
  }
17793
19523
  componentWillLoad() {
17794
- // slot="anchor" 자식이 있으면 anchor 모드(다른 컴포넌트를 트리거로 사용)
19524
+ // slot="anchor" 자식이 있으면 anchor 모드(다른 요소를 트리거로 사용)
17795
19525
  this.isAnchorMode = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'anchor');
17796
19526
  if (!this.isAnchorMode) {
17797
- // 레거시 모드: 슬롯 내용을 본문으로 캡처하고 자식을 비웁니다.
19527
+ // 기본 모드: default slot 내용을 본문으로 캡처하고 자식을 비웁니다.
17798
19528
  this.slotContentHTML = this.el.innerHTML;
17799
19529
  this.el.replaceChildren();
17800
19530
  }
17801
19531
  // anchor 모드: 자식(slot="anchor")은 그대로 두어 Stencil 슬롯으로 투영합니다.
17802
19532
  this.el.classList.toggle('visible', true);
17803
19533
  }
17804
- componentDidRender() {
17805
- // CSS 문자열 스타일은 ref로 직접 적용 (속성/프로퍼티 전달 모두 호환)
17806
- if (this.triggerEl && this.triggerStyle !== '') {
17807
- this.triggerEl.setAttribute('style', this.triggerStyle);
17808
- }
17809
- }
17810
19534
  render() {
17811
19535
  const trigger = this.trigger ?? 'hover';
17812
19536
  const placement = this.placement ?? 'top';
@@ -17814,27 +19538,29 @@ class SdTooltip {
17814
19538
  const icon = this.icon ?? 'helpOutline';
17815
19539
  const color = this.color ?? '#01BB4B';
17816
19540
  const typeConfig = TOOLTIP_TYPE_CONFIG[tooltipType] ?? TOOLTIP_TYPE_CONFIG.default;
17817
- const hoverTrigger = {
17818
- onMouseEnter: () => this.openTooltip(),
17819
- onMouseLeave: () => !this.useClose && this.startHideTimer(),
19541
+ // 클릭 토글: 열림은 openTooltip(타이머 정리), 닫힘은 즉시(애니메이션 없이)
19542
+ const toggleTooltip = () => {
19543
+ if (this.showTooltip) {
19544
+ this.showTooltip = false;
19545
+ }
19546
+ else {
19547
+ this.openTooltip();
19548
+ }
17820
19549
  };
17821
- const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
17822
- const hasLabel = this.label !== undefined && this.label !== '';
17823
- const anchorMode = this.isAnchorMode;
17824
19550
  const divTrigger = trigger === 'hover'
17825
- ? hoverTrigger
17826
- : anchorMode || !hasLabel
17827
- ? { onClick: toggleTooltip }
17828
- : {};
17829
- const buttonClickTrigger = trigger === 'click' && !anchorMode && hasLabel ? { onSdClick: toggleTooltip } : {};
17830
- const triggerClasses = ['sd-tooltip-trigger', this.sdClass, this.triggerClass]
19551
+ ? {
19552
+ onMouseEnter: () => this.openTooltip(),
19553
+ onMouseLeave: () => !this.useClose && this.startHideTimer(),
19554
+ }
19555
+ : { onClick: toggleTooltip };
19556
+ const triggerClasses = ['sd-tooltip-trigger', this.triggerClassName]
17831
19557
  .filter(c => c !== undefined && c !== '')
17832
19558
  .join(' ');
17833
- // anchor 모드에서는 slot 을 트리거로 쓰므로 본문은 message 로 받습니다.
19559
+ // 본문: message 가 있으면 각 줄을 innerHTML 로, 없으면 default slot 캡처 내용 사용
17834
19560
  const bodyHTML = this.message && this.message.length > 0
17835
19561
  ? this.message.map(line => `<div>${line}</div>`).join('')
17836
19562
  : this.slotContentHTML;
17837
- return (hAsync(Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, hAsync("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
19563
+ 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: {
17838
19564
  'sd-floating-menu': true,
17839
19565
  [`sd-floating-menu--${tooltipType}`]: true,
17840
19566
  [`sd-floating-menu--${placement}`]: true,
@@ -17842,7 +19568,7 @@ class SdTooltip {
17842
19568
  }, style: {
17843
19569
  '--sd-floating-bg': typeConfig.bg,
17844
19570
  '--sd-floating-content': typeConfig.content,
17845
- }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, hAsync("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), hAsync("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
19571
+ }, 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() })))))));
17846
19572
  }
17847
19573
  static get style() { return sdTooltipCss(); }
17848
19574
  static get cmpMeta() { return {
@@ -17855,17 +19581,11 @@ class SdTooltip {
17855
19581
  "tooltipType": [1, "tooltip-type"],
17856
19582
  "icon": [1],
17857
19583
  "iconSize": [2, "icon-size"],
17858
- "label": [1],
17859
- "name": [1],
17860
- "rightIcon": [1, "right-icon"],
17861
19584
  "ariaLabel": [1, "aria-label"],
17862
19585
  "disabled": [4],
17863
- "type": [1],
17864
19586
  "useClose": [4, "use-close"],
17865
- "sdClass": [1, "sd-class"],
17866
19587
  "message": [16],
17867
- "triggerClass": [1, "trigger-class"],
17868
- "triggerStyle": [1, "trigger-style"],
19588
+ "triggerClassName": [1, "trigger-class-name"],
17869
19589
  "showTooltip": [32],
17870
19590
  "slotContentHTML": [32],
17871
19591
  "show": [64],
@@ -17918,16 +19638,23 @@ registerComponents([
17918
19638
  SdRadio,
17919
19639
  SdRadioButton,
17920
19640
  SdRadioGroup,
19641
+ SdScrollArea,
17921
19642
  SdSelect,
17922
19643
  SdSelectListItem,
17923
19644
  SdSelectListItemSearch,
17924
19645
  SdSelectListbox,
17925
19646
  SdSelectTrigger,
19647
+ SdStepper,
17926
19648
  SdSwitch,
17927
19649
  SdTabs,
17928
19650
  SdTag,
17929
19651
  SdTextLink,
17930
19652
  SdTextarea,
19653
+ SdTimePicker,
19654
+ SdTimePickerSelector,
19655
+ SdTimePickerTrigger,
19656
+ SdTimeRangePicker,
19657
+ SdTimeRangePickerSelector,
17931
19658
  SdToast,
17932
19659
  SdToastContainer,
17933
19660
  SdToggle,