@krds.ui/vue 0.0.14 → 0.0.16

package/dist/krds-vue.es.js

@@ -1,13 +1,13 @@
-import { Fragment as W, Teleport as ze, computed as k, createBlock as de, createCommentVNode as X, createElementBlock as T, createElementVNode as p, createTextVNode as N, defineComponent as B, getCurrentInstance as Ie, h as t, inject as Ee, nextTick as Ke, normalizeClass as R, normalizeStyle as ne, onBeforeUnmount as fe, onMounted as te, onUnmounted as Z, openBlock as D, provide as Fe, ref as L, renderList as Y, renderSlot as J, resolveDirective as Me, resolveDynamicComponent as ge, toDisplayString as M, unref as q, useId as ae, vShow as se, watch as re, withCtx as ue, withDirectives as ee, withModifiers as ce } from "vue";
-var be = Object.defineProperty, we = (e, a) => {
-  let n = {};
+import { Comment as je, Fragment as Ge, Teleport as Ce, Text as Ue, computed as b, defineComponent as A, getCurrentInstance as xe, h as t, inject as Xe, nextTick as ce, onBeforeUnmount as fe, onMounted as ie, onUnmounted as re, provide as Qe, ref as B, useId as de, vShow as pe, watch as se, withDirectives as ve, withModifiers as ge } from "vue";
+var be = Object.defineProperty, Je = (e, a) => {
+  let r = {};
   for (var l in e)
-    be(n, l, {
+    be(r, l, {
       get: e[l],
       enumerable: !0
     });
-  return a || be(n, Symbol.toStringTag, { value: "Module" }), n;
-}, _e = B({
+  return a || be(r, Symbol.toStringTag, { value: "Module" }), r;
+}, $e = A({
   name: "KrdsButton",
   props: {
     type: {
@@ -48,27 +48,27 @@ var be = Object.defineProperty, we = (e, a) => {
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const r = ["krds-btn"];
-      return e.icon && r.push("icon"), e.border && r.push("border"), e.pure && r.push("pure"), e.text && r.push("text"), e.variant && !e.icon && r.push(e.variant), e.size && r.push(e.size), e.class && r.push(e.class), r;
-    }), s = (r) => {
-      e.disabled || a("click", r);
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const s = ["krds-btn"];
+      return e.icon && s.push("icon"), e.border && s.push("border"), e.pure && s.push("pure"), e.text && s.push("text"), e.variant && !e.icon && s.push(e.variant), e.size && s.push(e.size), e.class && s.push(e.class), s;
+    }), n = (s) => {
+      e.disabled || a("click", s);
     };
     return () => t("button", {
       type: e.type,
       class: l.value,
       disabled: e.disabled,
-      onClick: s
-    }, n.default?.());
+      onClick: n
+    }, r.default?.());
   }
-}), Ae = _e, Re = B({
+}), Ze = $e, et = A({
   name: "KrdsButtonGroup",
   props: {},
   setup(e, { slots: a }) {
     return () => t("div", { class: "btn-group" }, a.default?.());
   }
-}), Pe = B({
+}), tt = A({
   name: "KrdsIcon",
   props: {
     name: {
@@ -87,7 +87,7 @@ var be = Object.defineProperty, we = (e, a) => {
       e.class
     ].filter(Boolean).join(" ") });
   }
-}), He = B({
+}), at = A({
   name: "KrdsLink",
   props: {
     href: {
@@ -124,25 +124,25 @@ var be = Object.defineProperty, we = (e, a) => {
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const o = ["krds-btn"];
-      return e.size && o.push(e.size), e.link && o.push("link"), e.basic && o.push("basic"), e.pure && o.push("pure"), e.class && o.push(e.class), o;
-    }), s = k(() => {
-      const o = {
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const u = ["krds-btn"];
+      return e.size && u.push(e.size), e.link && u.push("link"), e.basic && u.push("basic"), e.pure && u.push("pure"), e.class && u.push(e.class), u;
+    }), n = b(() => {
+      const u = {
         href: e.href,
         class: l.value
       };
-      return e.target && (o.target = e.target), e.title && (o.title = e.title), e.target === "_blank" && (o.rel = "noopener noreferrer"), o;
-    }), r = (o) => {
-      a("click", o);
+      return e.target && (u.target = e.target), e.title && (u.title = e.title), e.target === "_blank" && (u.rel = "noopener noreferrer"), u;
+    }), s = (u) => {
+      a("click", u);
     };
     return () => t("a", {
-      ...s.value,
-      onClick: r
-    }, n.default?.());
+      ...n.value,
+      onClick: s
+    }, r.default?.());
   }
-}), Ce = B({
+}), Le = A({
   name: "KrdsSpinner",
   props: { label: {
     type: String,
@@ -155,7 +155,7 @@ var be = Object.defineProperty, we = (e, a) => {
       role: "status"
     }, e);
   }
-}), qe = B({
+}), lt = A({
   name: "KrdsInput",
   props: {
     modelValue: {
@@ -252,24 +252,24 @@ var be = Object.defineProperty, we = (e, a) => {
     "keydown",
     "keyup"
   ],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
       const S = ["krds-input"];
       return e.size && S.push(e.size), e.class && S.push(e.class), S;
-    }), s = (S) => {
-      const V = S.target;
-      a("update:modelValue", e.type === "number" ? Number(V.value) : V.value), a("input", S);
-    }, r = (S) => {
+    }), n = (S) => {
+      const x = S.target;
+      a("update:modelValue", e.type === "number" ? Number(x.value) : x.value), a("input", S);
+    }, s = (S) => {
       a("change", S);
-    }, o = (S) => {
+    }, u = (S) => {
       a("focus", S);
-    }, v = (S) => {
+    }, h = (S) => {
       a("blur", S);
     }, f = (S) => {
       a("keydown", S);
-    }, b = (S) => {
+    }, w = (S) => {
       a("keyup", S);
-    }, g = k(() => {
+    }, m = b(() => {
       const S = {
         type: e.type,
         class: l.value,
@@ -282,24 +282,24 @@ var be = Object.defineProperty, we = (e, a) => {
         disabled: e.disabled,
         autocomplete: e.autocomplete,
         autofocus: e.autofocus,
-        onInput: s,
-        onChange: r,
-        onFocus: o,
-        onBlur: v,
+        onInput: n,
+        onChange: s,
+        onFocus: u,
+        onBlur: h,
         onKeydown: f,
-        onKeyup: b
+        onKeyup: w
       };
       return e.maxlength !== void 0 && (S.maxlength = e.maxlength), e.minlength !== void 0 && (S.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (S.max = e.max), e.min !== void 0 && (S.min = e.min), e.step !== void 0 && (S.step = e.step)), S;
-    }), _ = k(() => {
+    }), T = b(() => {
       const S = ["form-conts"];
       return e.state !== "default" && S.push(`is-${e.state}`), e.icon && S.push("btn-ico-wrap"), S;
     });
     return () => {
-      const S = [t("input", g.value)];
-      return e.loading ? t("div", { class: _.value }, [t("div", { class: "form-spinner" }, [...S, t(Ce)])]) : (n.default && S.push(...n.default()), t("div", { class: _.value }, S));
+      const S = [t("input", m.value)];
+      return e.loading ? t("div", { class: T.value }, [t("div", { class: "form-spinner" }, [...S, t(Le)])]) : (r.default && S.push(...r.default()), t("div", { class: T.value }, S));
     };
   }
-}), Oe = qe, Ne = B({
+}), nt = lt, st = A({
   name: "KrdsFormLabel",
   props: {
     for: {
@@ -320,9 +320,9 @@ var be = Object.defineProperty, we = (e, a) => {
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = (s) => {
-      a("click", s);
+  setup(e, { emit: a, slots: r }) {
+    const l = (n) => {
+      a("click", n);
     };
     return () => t("div", { class: "form-tit" }, [t("label", {
       for: e.for,
@@ -330,9 +330,9 @@ var be = Object.defineProperty, we = (e, a) => {
       class: e.class,
       style: e.style,
       onClick: l
-    }, n.default?.())]);
+    }, r.default?.())]);
   }
-}), je = Ne, We = B({
+}), rt = st, it = A({
   name: "KrdsFormHint",
   props: {
     type: {
@@ -353,35 +353,34 @@ var be = Object.defineProperty, we = (e, a) => {
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = (r) => {
-      a("click", r);
-    }, s = () => {
-      let r;
+  setup(e, { emit: a, slots: r }) {
+    const l = (s) => {
+      a("click", s);
+    }, n = () => {
+      let s;
       switch (e.type) {
         case "error":
-          r = "form-hint-invalid";
+          s = "form-hint-invalid";
           break;
         case "success":
-          r = "form-hint-success";
+          s = "form-hint-success";
           break;
         case "information":
-          r = "form-hint-information";
+          s = "form-hint-information";
           break;
         default:
-          r = "form-hint";
-          break;
+          s = "form-hint";
       }
-      return e.class ? `${r} ${e.class}` : r;
+      return e.class ? `${s} ${e.class}` : s;
     };
     return () => t("p", {
       id: e.id,
-      class: s(),
+      class: n(),
       style: e.style,
       onClick: l
-    }, n.default?.());
+    }, r.default?.());
   }
-}), Ge = We, Ye = B({
+}), ot = it, dt = A({
   name: "KrdsFormGroup",
   props: {
     class: {
@@ -398,106 +397,119 @@ var be = Object.defineProperty, we = (e, a) => {
     }
   },
   setup(e, { slots: a }) {
-    const n = k(() => {
+    const r = b(() => {
       const l = ["form-group"];
       return e.class && l.push(e.class), l;
     });
     return () => t("div", {
       id: e.id,
-      class: n.value,
+      class: r.value,
       style: e.style
     }, a.default?.());
   }
-}), Ue = Ye;
-function Xe(e, a) {
-  const n = /* @__PURE__ */ new Date(), l = L(e || n.getFullYear()), s = L(a || n.getMonth() + 1), r = L(null), o = L(null), v = L(null), f = k(() => {
-    const c = n.getFullYear(), u = [];
-    for (let h = c - 10; h <= c + 10; h++) u.push(h);
-    return u;
-  }), b = k(() => Array.from({ length: 12 }, (c, u) => u + 1)), g = () => {
-    r.value = null, o.value = null;
-  }, _ = () => {
-    s.value === 1 ? (s.value = 12, l.value -= 1) : s.value -= 1;
+}), ut = dt;
+function ct(e, a) {
+  const r = /* @__PURE__ */ new Date(), l = B(e || r.getFullYear()), n = B(a || r.getMonth() + 1), s = B(null), u = B(null), h = B(null), f = b(() => {
+    const i = r.getFullYear(), p = [];
+    for (let y = i - 10; y <= i + 10; y++) p.push(y);
+    return p;
+  }), w = b(() => Array.from({ length: 12 }, (i, p) => p + 1)), m = () => {
+    s.value = null, u.value = null;
+  }, T = () => {
+    n.value === 1 ? (n.value = 12, l.value -= 1) : n.value -= 1;
   }, S = () => {
-    s.value === 12 ? (s.value = 1, l.value += 1) : s.value += 1;
-  }, V = (c, u = !1) => {
-    if (u)
-      r.value = c, o.value = c;
-    else if (!r.value || r.value && o.value)
-      r.value = c, o.value = null;
+    n.value === 12 ? (n.value = 1, l.value += 1) : n.value += 1;
+  }, x = (i, p = !1) => {
+    if (p)
+      s.value = i, u.value = i;
+    else if (!s.value || s.value && u.value)
+      s.value = i, u.value = null;
     else {
-      const h = new Date(r.value.replace(/\./g, "-"));
-      new Date(c.replace(/\./g, "-")) < h ? (r.value = c, o.value = null) : o.value = c;
+      const y = new Date(s.value.replace(/\./g, "-"));
+      new Date(i.replace(/\./g, "-")) < y ? (s.value = i, u.value = null) : u.value = i;
     }
   };
   return {
     currentYear: l,
-    currentMonth: s,
-    selectedStartDate: r,
-    selectedEndDate: o,
-    activeDateSelector: v,
+    currentMonth: n,
+    selectedStartDate: s,
+    selectedEndDate: u,
+    activeDateSelector: h,
     yearOptions: f,
-    monthOptions: b,
-    clearDateSelection: g,
-    prevMonth: _,
+    monthOptions: w,
+    clearDateSelection: m,
+    prevMonth: T,
     nextMonth: S,
-    handleDateSelection: V,
+    handleDateSelection: x,
     selectToday: () => {
-      V(`${n.getFullYear()}.${String(n.getMonth() + 1).padStart(2, "0")}.${String(n.getDate()).padStart(2, "0")}`, !0);
+      const i = `${r.getFullYear()}.${String(r.getMonth() + 1).padStart(2, "0")}.${String(r.getDate()).padStart(2, "0")}`;
+      x(i, !0);
     },
-    isDateInSelectedRange: (c) => {
-      if (!r.value || !o.value) return {
+    isDateInSelectedRange: (i) => {
+      if (!s.value || !u.value) return {
         isInRange: !1,
         isStart: !1,
         isEnd: !1
       };
-      const u = new Date(c.replace(/\./g, "-")), h = new Date(r.value.replace(/\./g, "-")), m = new Date(o.value.replace(/\./g, "-")), w = c === r.value, C = c === o.value;
+      const p = new Date(i.replace(/\./g, "-")), y = new Date(s.value.replace(/\./g, "-")), $ = new Date(u.value.replace(/\./g, "-")), C = i === s.value, E = i === u.value;
       return {
-        isInRange: u >= h && u <= m,
-        isStart: w,
-        isEnd: C
+        isInRange: p >= y && p <= $,
+        isStart: C,
+        isEnd: E
       };
     }
   };
 }
-function Je(e, a, n = {}) {
+function ft(e, a, r = {}) {
   let l = null;
-  const { ignore: s, event: r = "click" } = typeof n == "string" ? { ignore: n } : n, o = () => {
+  const { ignore: n, event: s = "click" } = typeof r == "string" ? { ignore: r } : r, u = () => {
     l = (f) => {
-      const b = f.target;
-      e.value?.contains(b) || s && b.closest(s) || a();
-    }, document.addEventListener(r, l);
-  }, v = () => {
+      const w = f.target;
+      e.value?.contains(w) || n && w.closest(n) || a();
+    }, document.addEventListener(s, l);
+  }, h = () => {
     if (l) {
-      const f = typeof n == "string" ? "click" : n.event || "click";
+      const f = typeof r == "string" ? "click" : r.event || "click";
       document.removeEventListener(f, l), l = null;
     }
   };
-  return te(() => {
-    o();
+  return ie(() => {
+    u();
   }), fe(() => {
-    v();
+    h();
   }), {
-    setupGlobalListeners: o,
-    removeGlobalListeners: v
+    setupGlobalListeners: u,
+    removeGlobalListeners: h
   };
 }
-var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
-  "id",
-  "name",
-  "placeholder",
-  "value",
-  "readonly",
-  "disabled",
-  "required",
-  "autofocus"
-], tt = ["disabled", "aria-expanded"], at = { class: "calendar-head" }, lt = { class: "calendar-switch-wrap" }, st = { class: "calendar-drop-down" }, nt = ["aria-expanded"], rt = { class: "calendar-select calendar-year-wrap" }, it = { class: "sel year" }, ot = ["onClick"], dt = { class: "calendar-drop-down" }, ut = ["aria-expanded"], ct = { class: "calendar-select calendar-mon-wrap" }, ft = { class: "sel month" }, vt = ["onClick"], pt = { class: "calendar-body" }, ht = { class: "calendar-table-wrap" }, mt = { class: "calendar-tbl" }, yt = ["data-date"], gt = ["aria-pressed", "onClick"], bt = { class: "calendar-footer" }, kt = { class: "calendar-btn-wrap" }, St = /* @__PURE__ */ B({
-  __name: "KrdsDateInput",
+var vt = [
+  "일",
+  "월",
+  "화",
+  "수",
+  "목",
+  "금",
+  "토"
+], pt = A({
+  name: "KrdsDateInput",
   props: {
-    modelValue: { default: void 0 },
-    size: { default: "medium" },
-    placeholder: { default: "YYYY.MM.DD" },
-    disabled: {
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    placeholder: {
+      type: String,
+      default: "YYYY.MM.DD"
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    required: {
       type: Boolean,
       default: !1
     },
@@ -505,22 +517,42 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
       type: Boolean,
       default: !1
     },
-    autofocus: {
+    disabled: {
       type: Boolean,
       default: !1
     },
-    eventDates: { default: () => [] },
-    holidays: { default: () => [] },
-    initialYear: { default: void 0 },
-    initialMonth: { default: void 0 },
-    name: { default: void 0 },
-    required: {
+    autofocus: {
       type: Boolean,
       default: !1
     },
-    class: { default: void 0 },
-    style: {},
-    id: { default: void 0 }
+    eventDates: {
+      type: Array,
+      default: () => []
+    },
+    holidays: {
+      type: Array,
+      default: () => []
+    },
+    initialYear: {
+      type: Number,
+      default: void 0
+    },
+    initialMonth: {
+      type: Number,
+      default: void 0
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
   },
   emits: [
     "update:modelValue",
@@ -530,57 +562,57 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
     "blur"
   ],
   setup(e, { emit: a }) {
-    const n = e, l = a, s = L(), r = L(), o = L(!1), v = L(null), { currentYear: f, currentMonth: b, selectedStartDate: g, selectedEndDate: _, yearOptions: S, monthOptions: V, prevMonth: d, nextMonth: i, handleDateSelection: c, selectToday: u, isDateInSelectedRange: h } = Xe(n.initialYear, n.initialMonth), m = () => {
-      o.value && r.value?.focus(), o.value = !1, v.value = null;
+    const r = B(), l = B(), n = B(!1), s = B(null), { currentYear: u, currentMonth: h, selectedStartDate: f, selectedEndDate: w, yearOptions: m, monthOptions: T, prevMonth: S, nextMonth: x, handleDateSelection: c, selectToday: o, isDateInSelectedRange: i } = ct(e.initialYear, e.initialMonth), p = () => {
+      n.value && l.value?.focus(), n.value = !1, s.value = null;
     };
-    Je(s, m, ".calendar-conts");
-    const w = k(() => {
-      const I = [
+    ft(r, p, ".calendar-conts");
+    const y = b(() => {
+      const L = [
         "krds-input",
         "datepicker",
         "cal"
       ];
-      return n.size && I.push(n.size), n.class && I.push(n.class), I;
-    }), C = k(() => ["form-conts", "calendar-conts"]), x = k(() => ({
+      return e.size && L.push(e.size), e.class && L.push(e.class), L;
+    }), $ = b(() => ["form-conts", "calendar-conts"]), C = b(() => ({
       "krds-calendar-area": !0,
-      active: o.value
-    })), $ = k(() => {
-      const I = f.value, z = b.value, E = new Date(I, z - 1, 1), Q = new Date(E);
-      Q.setDate(Q.getDate() - E.getDay());
-      const U = [], H = new Date(Q);
-      for (let ie = 0; ie < 6; ie++) {
-        const he = [];
-        for (let me = 0; me < 7; me++) {
-          const Ve = `${H.getFullYear()}.${String(H.getMonth() + 1).padStart(2, "0")}.${String(H.getDate()).padStart(2, "0")}`, ye = H.getDay();
-          he.push({
-            day: H.getDate(),
-            dateString: Ve,
-            isCurrentMonth: H.getMonth() === z - 1,
-            isToday: H.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
-            isPrevMonth: H.getMonth() < z - 1 || H.getMonth() === 11 && z === 1,
-            isNextMonth: H.getMonth() > z - 1 || H.getMonth() === 0 && z === 12,
-            isSunday: ye === 0,
-            isSaturday: ye === 6
-          }), H.setDate(H.getDate() + 1);
+      active: n.value
+    })), E = b(() => {
+      const L = u.value, R = h.value, Y = new Date(L, R - 1, 1), V = new Date(Y);
+      V.setDate(V.getDate() - Y.getDay());
+      const F = [], z = new Date(V);
+      for (let O = 0; O < 6; O++) {
+        const U = [];
+        for (let J = 0; J < 7; J++) {
+          const ee = `${z.getFullYear()}.${String(z.getMonth() + 1).padStart(2, "0")}.${String(z.getDate()).padStart(2, "0")}`, oe = z.getDay();
+          U.push({
+            day: z.getDate(),
+            dateString: ee,
+            isCurrentMonth: z.getMonth() === R - 1,
+            isToday: z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
+            isPrevMonth: z.getMonth() < R - 1 || z.getMonth() === 11 && R === 1,
+            isNextMonth: z.getMonth() > R - 1 || z.getMonth() === 0 && R === 12,
+            isSunday: oe === 0,
+            isSaturday: oe === 6
+          }), z.setDate(z.getDate() + 1);
         }
-        U.push(he);
+        F.push(U);
       }
-      return U;
-    }), y = (I) => {
-      const z = [];
-      if (I.isPrevMonth && z.push("old"), I.isNextMonth && z.push("new"), I.isToday && z.push("today"), I.isSunday && z.push("day-off"), n.holidays?.includes(I.dateString) && z.push("day-off"), n.eventDates?.includes(I.dateString) && z.push("day-event"), I.isCurrentMonth) {
-        const E = h(I.dateString);
-        E.isInRange && (z.push("period"), E.isStart && z.push("start"), E.isEnd && z.push("end"));
+      return F;
+    }), D = (L) => {
+      const R = [];
+      if (L.isPrevMonth && R.push("old"), L.isNextMonth && R.push("new"), L.isToday && R.push("today"), L.isSunday && R.push("day-off"), e.holidays?.includes(L.dateString) && R.push("day-off"), e.eventDates?.includes(L.dateString) && R.push("day-event"), L.isCurrentMonth) {
+        const Y = i(L.dateString);
+        Y.isInRange && (R.push("period"), Y.isStart && R.push("start"), Y.isEnd && R.push("end"));
       }
-      return z;
-    }, K = k(() => [
+      return R;
+    }, _ = b(() => [
       {
         id: "get-today",
         label: "오늘",
         class: "text",
         variant: void 0,
         size: "small",
-        handler: u
+        handler: o
       },
       {
         id: "cancel-btn",
@@ -588,7 +620,7 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
         class: void 0,
         variant: "tertiary",
         size: "small",
-        handler: m
+        handler: p
       },
       {
         id: "confirm-btn",
@@ -596,38 +628,64 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
         class: void 0,
         variant: "primary",
         size: "small",
-        handler: j
+        handler: N
       }
-    ]), F = (I) => {
-      v.value === I ? v.value = null : v.value = I;
-    }, P = (I) => {
-      f.value = I, v.value = null;
-    }, A = (I) => {
-      b.value = I, v.value = null;
-    }, j = () => {
-      g.value && (_.value && g.value !== _.value ? l("update:modelValue", `${g.value} ~ ${_.value}`) : l("update:modelValue", g.value), m());
-    }, O = () => {
-      o.value = !0, v.value = null, setTimeout(() => {
-        s.value?.querySelector(".calendar-wrap")?.focus();
+    ]), v = (L) => {
+      s.value === L ? s.value = null : s.value = L;
+    }, M = (L) => {
+      u.value = L, s.value = null;
+    }, I = (L) => {
+      h.value = L, s.value = null;
+    }, N = () => {
+      f.value && (w.value && f.value !== w.value ? a("update:modelValue", `${f.value} ~ ${w.value}`) : a("update:modelValue", f.value), p());
+    }, H = () => {
+      n.value = !0, s.value = null, setTimeout(() => {
+        r.value?.querySelector(".calendar-wrap")?.focus();
       }, 50);
     }, G = () => {
-      o.value ? m() : O();
-    }, le = (I) => {
-      I.code === "Escape" && (v.value ? v.value = null : o.value && m());
-    }, Be = (I) => {
-      const z = I.target;
-      l("update:modelValue", z.value), l("input", I);
-    }, Le = (I) => {
-      l("change", I);
-    }, De = (I) => {
-      l("focus", I);
-    }, Te = (I) => {
-      l("blur", I);
-    };
-    return (I, z) => (D(), T("div", Qe, [p("div", { class: R(C.value) }, [p("div", Ze, [p("input", {
+      n.value ? p() : H();
+    }, j = (L) => {
+      L.code === "Escape" && (s.value ? s.value = null : n.value && p());
+    }, X = (L) => {
+      const R = L.target;
+      a("update:modelValue", R.value), a("input", L);
+    }, le = (L) => {
+      a("change", L);
+    }, ue = (L) => {
+      a("focus", L);
+    }, ae = (L) => {
+      a("blur", L);
+    }, Q = (L) => {
+      const R = L === "year", Y = R ? m.value : T.value, V = R ? u.value : h.value, F = (z) => R ? `${z}년` : `${z.toString().padStart(2, "0")}월`;
+      return t("div", { class: "calendar-drop-down" }, [t("button", {
+        type: "button",
+        class: `btn-cal-switch ${L}`,
+        "aria-label": R ? "연도 선택" : "월 선택",
+        "aria-expanded": s.value === L,
+        onClick: () => v(L)
+      }, F(V)), ve(t("div", { class: `calendar-select ${R ? "calendar-year-wrap" : "calendar-mon-wrap"}` }, [t("ul", { class: `sel ${L}` }, Y.map((z) => t("li", { key: z }, [t("button", {
+        type: "button",
+        class: { active: z === V },
+        onClick: () => R ? M(z) : I(z)
+      }, F(z))])))]), [[pe, s.value === L]])]);
+    }, ne = () => t("table", { class: "calendar-tbl" }, [
+      t("caption", null, `${u.value}년 ${h.value.toString().padStart(2, "0")}월`),
+      t("thead", null, [t("tr", null, vt.map((L) => t("th", null, L)))]),
+      t("tbody", null, E.value.map((L, R) => t("tr", { key: R }, L.map((Y, V) => t("td", {
+        key: V,
+        class: D(Y),
+        "data-date": Y.dateString
+      }, [t("button", {
+        type: "button",
+        class: "btn-set-date",
+        "aria-pressed": i(Y.dateString).isInRange ? "true" : "false",
+        onClick: () => c(Y.dateString)
+      }, [t("span", null, String(Y.day))])])))))
+    ]);
+    return () => t("div", { class: "form-conts" }, [t("div", { class: $.value }, [t("div", { class: "calendar-input" }, [t("input", {
       id: e.id,
       name: e.name,
-      class: R(w.value),
+      class: y.value,
       placeholder: e.placeholder,
       value: e.modelValue,
       readonly: e.readonly,
@@ -635,103 +693,51 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
       required: e.required,
       autofocus: e.autofocus,
       type: "text",
-      onInput: Be,
-      onChange: Le,
-      onFocus: De,
-      onBlur: Te
-    }, null, 42, et), p("button", {
-      ref_key: "datePickerButtonRef",
-      ref: r,
-      class: R(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
+      onInput: X,
+      onChange: le,
+      onFocus: ue,
+      onBlur: ae
+    }), t("button", {
+      ref: l,
+      class: `krds-btn ${e.size || "medium"} icon form-btn-datepicker`,
       disabled: e.disabled,
-      "aria-expanded": o.value,
+      "aria-expanded": n.value,
       type: "button",
       onClick: G
-    }, [...z[4] || (z[4] = [p("span", { class: "sr-only" }, "달력 열기", -1), p("i", { class: "svg-icon ico-calendar" }, null, -1)])], 10, tt)]), p("div", {
-      ref_key: "datePickerAreaRef",
-      ref: s,
-      class: R(x.value)
-    }, [ee(p("div", {
+    }, [t("span", { class: "sr-only" }, "달력 열기"), t("i", { class: "svg-icon ico-calendar" })])]), t("div", {
+      ref: r,
+      class: C.value
+    }, [ve(t("div", {
       class: "calendar-wrap bottom",
       "aria-label": "달력",
       tabindex: "0",
-      onKeydown: le
+      onKeydown: j
     }, [
-      p("div", at, [
-        p("button", {
+      t("div", { class: "calendar-head" }, [
+        t("button", {
           type: "button",
           class: "btn-cal-move prev",
-          onClick: z[0] || (z[0] = (...E) => q(d) && q(d)(...E))
-        }, [...z[5] || (z[5] = [p("span", { class: "sr-only" }, "이전 달", -1)])]),
-        p("div", lt, [p("div", st, [p("button", {
-          type: "button",
-          class: "btn-cal-switch year",
-          "aria-label": "연도 선택",
-          "aria-expanded": v.value === "year",
-          onClick: z[1] || (z[1] = (E) => F("year"))
-        }, M(q(f)) + "년 ", 9, nt), ee(p("div", rt, [p("ul", it, [(D(!0), T(W, null, Y(q(S), (E) => (D(), T("li", { key: E }, [p("button", {
-          type: "button",
-          class: R({ active: E === q(f) }),
-          onClick: (Q) => P(E)
-        }, M(E) + "년", 11, ot)]))), 128))])], 512), [[se, v.value === "year"]])]), p("div", dt, [p("button", {
-          type: "button",
-          class: "btn-cal-switch month",
-          "aria-label": "월 선택",
-          "aria-expanded": v.value === "month",
-          onClick: z[2] || (z[2] = (E) => F("month"))
-        }, M(q(b).toString().padStart(2, "0")) + "월 ", 9, ut), ee(p("div", ct, [p("ul", ft, [(D(!0), T(W, null, Y(q(V), (E) => (D(), T("li", { key: E }, [p("button", {
-          type: "button",
-          class: R({ active: E === q(b) }),
-          onClick: (Q) => A(E)
-        }, M(E.toString().padStart(2, "0")) + "월 ", 11, vt)]))), 128))])], 512), [[se, v.value === "month"]])])]),
-        p("button", {
+          onClick: S
+        }, [t("span", { class: "sr-only" }, "이전 달")]),
+        t("div", { class: "calendar-switch-wrap" }, [Q("year"), Q("month")]),
+        t("button", {
           type: "button",
           class: "btn-cal-move next",
-          onClick: z[3] || (z[3] = (...E) => q(i) && q(i)(...E))
-        }, [...z[6] || (z[6] = [p("span", { class: "sr-only" }, "다음 달", -1)])])
+          onClick: x
+        }, [t("span", { class: "sr-only" }, "다음 달")])
       ]),
-      p("div", pt, [p("div", ht, [p("table", mt, [
-        p("caption", null, M(q(f)) + "년 " + M(q(b).toString().padStart(2, "0")) + "월", 1),
-        z[7] || (z[7] = p("thead", null, [p("tr", null, [
-          p("th", null, "일"),
-          p("th", null, "월"),
-          p("th", null, "화"),
-          p("th", null, "수"),
-          p("th", null, "목"),
-          p("th", null, "금"),
-          p("th", null, "토")
-        ])], -1)),
-        p("tbody", null, [(D(!0), T(W, null, Y($.value, (E, Q) => (D(), T("tr", { key: Q }, [(D(!0), T(W, null, Y(E, (U, H) => (D(), T("td", {
-          key: H,
-          class: R(y(U)),
-          "data-date": U.dateString
-        }, [p("button", {
-          type: "button",
-          class: "btn-set-date",
-          "aria-pressed": q(h)(U.dateString).isInRange ? "true" : "false",
-          onClick: (ie) => q(c)(U.dateString)
-        }, [p("span", null, M(U.day), 1)], 8, gt)], 10, yt))), 128))]))), 128))])
-      ])])]),
-      p("div", bt, [p("div", kt, [(D(!0), T(W, null, Y(K.value, (E) => (D(), de(q(_e), {
-        id: E.id,
-        key: E.id,
-        class: R(E.class),
-        variant: E.variant,
-        size: E.size,
-        onClick: E.handler
-      }, {
-        default: ue(() => [N(M(E.label), 1)]),
-        _: 2
-      }, 1032, [
-        "id",
-        "class",
-        "variant",
-        "size",
-        "onClick"
-      ]))), 128))])])
-    ], 544), [[se, o.value]])], 2)], 2)]));
+      t("div", { class: "calendar-body" }, [t("div", { class: "calendar-table-wrap" }, [ne()])]),
+      t("div", { class: "calendar-footer" }, [t("div", { class: "calendar-btn-wrap" }, _.value.map((L) => t($e, {
+        id: L.id,
+        key: L.id,
+        class: L.class,
+        variant: L.variant,
+        size: L.size,
+        onClick: L.handler
+      }, { default: () => L.label })))])
+    ]), [[pe, n.value]])])])]);
   }
-}), Kt = St, wt = Kt, _t = B({
+}), gt = pt, ht = A({
   name: "KrdsTextarea",
   props: {
     modelValue: {
@@ -813,33 +819,33 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
     "keyup"
   ],
   setup(e, { emit: a }) {
-    const n = L(0);
-    re(() => e.modelValue, (i) => {
-      n.value = (i || "").length;
+    const r = B(0);
+    se(() => e.modelValue, (o) => {
+      r.value = (o || "").length;
     }, { immediate: !0 });
-    const l = k(() => {
-      const i = ["krds-input"];
-      return e.size && i.push(e.size), e.class && i.push(e.class), i;
-    }), s = k(() => {
-      const i = {};
-      return e.resize && (i.resize = e.resize), i;
-    }), r = (i) => {
-      const c = i.target.value;
-      n.value = c.length, a("update:modelValue", c), a("input", i);
-    }, o = (i) => {
-      a("change", i);
-    }, v = (i) => {
-      a("focus", i);
-    }, f = (i) => {
-      a("blur", i);
-    }, b = (i) => {
-      a("keydown", i);
-    }, g = (i) => {
-      a("keyup", i);
-    }, _ = k(() => {
-      const i = {
+    const l = b(() => {
+      const o = ["krds-input"];
+      return e.size && o.push(e.size), e.class && o.push(e.class), o;
+    }), n = b(() => {
+      const o = {};
+      return e.resize && (o.resize = e.resize), o;
+    }), s = (o) => {
+      const i = o.target.value;
+      r.value = i.length, a("update:modelValue", i), a("input", o);
+    }, u = (o) => {
+      a("change", o);
+    }, h = (o) => {
+      a("focus", o);
+    }, f = (o) => {
+      a("blur", o);
+    }, w = (o) => {
+      a("keydown", o);
+    }, m = (o) => {
+      a("keyup", o);
+    }, T = b(() => {
+      const o = {
         class: l.value,
-        style: s.value,
+        style: n.value,
         value: e.modelValue,
         placeholder: e.placeholder,
         name: e.name,
@@ -850,24 +856,24 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
         autofocus: e.autofocus,
         rows: e.rows,
         cols: e.cols,
-        onInput: r,
-        onChange: o,
-        onFocus: v,
+        onInput: s,
+        onChange: u,
+        onFocus: h,
         onBlur: f,
-        onKeydown: b,
-        onKeyup: g
+        onKeydown: w,
+        onKeyup: m
       };
-      return e.maxlength !== void 0 && (i.maxlength = e.maxlength), e.minlength !== void 0 && (i.minlength = e.minlength), i;
-    }), S = k(() => ["form-conts"]), V = k(() => ["textarea-wrap"]), d = k(() => e.showCount ? {
-      current: n.value,
+      return e.maxlength !== void 0 && (o.maxlength = e.maxlength), e.minlength !== void 0 && (o.minlength = e.minlength), o;
+    }), S = b(() => ["form-conts"]), x = b(() => ["textarea-wrap"]), c = b(() => e.showCount ? {
+      current: r.value,
       max: e.maxlength || ""
     } : null);
     return () => {
-      const i = [t("textarea", _.value)];
-      return d.value && i.push(t("p", { class: "textarea-count" }, [t("span", { class: "count-now" }, d.value.current), t("span", { class: "count-total" }, d.value.max ? `/${d.value.max}` : "")])), t("div", { class: S.value }, [t("div", { class: V.value }, i)]);
+      const o = [t("textarea", T.value)];
+      return c.value && o.push(t("p", { class: "textarea-count" }, [t("span", { class: "count-now" }, c.value.current), t("span", { class: "count-total" }, c.value.max ? `/${c.value.max}` : "")])), t("div", { class: S.value }, [t("div", { class: x.value }, o)]);
     };
   }
-}), Ct = _t, $t = B({
+}), yt = ht, mt = A({
   name: "KrdsSelect",
   props: {
     modelValue: {
@@ -924,50 +930,50 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
     "focus",
     "blur"
   ],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const g = [];
-      return e.sort ? g.push("krds-form-select-sort") : g.push("krds-form-select"), e.size && g.push(e.size), e.class && g.push(e.class), g;
-    }), s = (g) => {
-      const _ = g.target;
-      a("update:modelValue", _.value === "" ? null : _.value);
-    }, r = (g) => {
-      a("focus", g);
-    }, o = (g) => {
-      a("blur", g);
-    }, v = k(() => ({
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const m = [];
+      return e.sort ? m.push("krds-form-select-sort") : m.push("krds-form-select"), e.size && m.push(e.size), e.class && m.push(e.class), m;
+    }), n = (m) => {
+      const T = m.target;
+      a("update:modelValue", T.value === "" ? null : T.value);
+    }, s = (m) => {
+      a("focus", m);
+    }, u = (m) => {
+      a("blur", m);
+    }, h = b(() => ({
       class: l.value,
       value: e.modelValue ?? "",
       title: e.title || e.placeholder,
       name: e.name,
       id: e.id,
       disabled: e.disabled || e.readonly,
-      onChange: s,
-      onFocus: r,
-      onBlur: o
-    })), f = k(() => {
-      const g = ["form-conts"];
-      return e.state !== "default" && g.push(`is-${e.state}`), g;
-    }), b = () => {
-      const g = [];
-      return e.placeholder && !e.modelValue && g.push(t("option", {
+      onChange: n,
+      onFocus: s,
+      onBlur: u
+    })), f = b(() => {
+      const m = ["form-conts"];
+      return e.state !== "default" && m.push(`is-${e.state}`), m;
+    }), w = () => {
+      const m = [];
+      return e.placeholder && !e.modelValue && m.push(t("option", {
         value: "",
         disabled: !0,
         selected: !0
-      }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((_) => {
-        g.push(t("option", {
-          value: _.value,
-          disabled: _.disabled,
-          selected: _.value === e.modelValue
-        }, _.label));
-      }), n.default && g.push(...n.default()), g;
+      }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((T) => {
+        m.push(t("option", {
+          value: T.value,
+          disabled: T.disabled,
+          selected: T.value === e.modelValue
+        }, T.label));
+      }), r.default && m.push(...r.default()), m;
     };
     return () => {
-      const g = t("select", v.value, b());
-      return e.sort ? g : t("div", { class: f.value }, [g]);
+      const m = t("select", h.value, w());
+      return e.sort ? m : t("div", { class: f.value }, [m]);
     };
   }
-}), xt = $t, Bt = 0, Lt = B({
+}), bt = mt, kt = 0, St = A({
   name: "KrdsFileUpload",
   props: {
     modelValue: {
@@ -988,7 +994,7 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
     },
     maxFileSize: {
       type: Number,
-      default: 20 * 1024 * 1024
+      default: 20971520
     },
     multiple: {
       type: Boolean,
@@ -1069,127 +1075,127 @@ var Qe = { class: "form-conts" }, Ze = { class: "calendar-input" }, et = [
     "preview"
   ],
   setup(e, { emit: a }) {
-    const n = L(!1), l = L(null), s = e.id ? `${e.id}-input` : `krds-file-upload-${++Bt}`, r = (y) => y < 1024 ? `${y}B` : y < 1024 * 1024 ? `${Math.round(y / 1024)}KB` : `${(y / (1024 * 1024)).toFixed(1)}MB`, o = (y) => {
-      const K = y.split(".");
-      return K.length > 1 ? K.pop().toLowerCase() : "";
-    }, v = (y) => {
-      const K = o(y.name), F = K ? y.name.slice(0, -(K.length + 1)) : y.name;
-      return K ? `${F} [${K}, ${r(y.size)}]` : `${y.name} [${r(y.size)}]`;
-    }, f = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, b = (y) => {
-      if (e.maxFileSize && y.size > e.maxFileSize) return `등록 가능한 파일 용량을 초과하였습니다.
-${r(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
+    const r = B(!1), l = B(null), n = e.id ? `${e.id}-input` : `krds-file-upload-${++kt}`, s = (v) => v < 1024 ? `${v}B` : v < 1048576 ? `${Math.round(v / 1024)}KB` : `${(v / 1048576).toFixed(1)}MB`, u = (v) => {
+      const M = v.split(".");
+      return M.length > 1 ? M.pop().toLowerCase() : "";
+    }, h = (v) => {
+      const M = u(v.name), I = M ? v.name.slice(0, -(M.length + 1)) : v.name;
+      return M ? `${I} [${M}, ${s(v.size)}]` : `${v.name} [${s(v.size)}]`;
+    }, f = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, w = (v) => {
+      if (e.maxFileSize && v.size > e.maxFileSize) return `등록 가능한 파일 용량을 초과하였습니다.
+${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
       if (e.accept) {
-        const K = e.accept.split(",").map((A) => A.trim().toLowerCase()), F = `.${o(y.name)}`, P = y.type;
-        if (!K.some((A) => A.startsWith(".") ? F === A : A.endsWith("/*") ? P.startsWith(A.replace("/*", "/")) : P === A)) return "허용되지 않는 파일 형식입니다.";
+        const M = e.accept.split(",").map((H) => H.trim().toLowerCase()), I = `.${u(v.name)}`, N = v.type;
+        if (!M.some((H) => H.startsWith(".") ? I === H : H.endsWith("/*") ? N.startsWith(H.replace("/*", "/")) : N === H)) return "허용되지 않는 파일 형식입니다.";
       }
       return null;
-    }, g = (y) => {
+    }, m = (v) => {
       if (e.disabled || e.readonly) return;
-      let K = [...e.modelValue || []];
-      !e.multiple && K.length > 0 && (K = []);
-      const F = [];
-      for (let P = 0; P < y.length && !(K.length + F.length >= e.maxFiles); P++) {
-        const A = y[P], j = b(A), O = {
+      let M = [...e.modelValue || []];
+      !e.multiple && M.length > 0 && (M = []);
+      const I = [];
+      for (let N = 0; N < v.length && !(M.length + I.length >= e.maxFiles); N++) {
+        const H = v[N], G = w(H), j = {
           id: f(),
-          file: A,
-          name: A.name,
-          size: A.size,
-          type: A.type,
-          status: j ? "error" : "pending",
-          errorMessage: j || void 0
+          file: H,
+          name: H.name,
+          size: H.size,
+          type: H.type,
+          status: G ? "error" : "pending",
+          errorMessage: G || void 0
         };
-        F.push(O), j ? a("file-error", O, j) : a("file-added", O);
+        I.push(j), G ? a("file-error", j, G) : a("file-added", j);
       }
-      F.length > 0 && a("update:modelValue", [...K, ...F]);
-    }, _ = (y) => {
-      const K = y.target;
-      K.files?.length && (g(K.files), K.value = "");
-    }, S = (y) => {
-      e.disabled || e.readonly || !e.dragAndDrop || (y.preventDefault(), n.value = !0);
-    }, V = () => {
-      n.value = !1;
-    }, d = (y) => {
-      y.preventDefault(), n.value = !1, !(e.disabled || e.readonly || !e.dragAndDrop) && y.dataTransfer?.files && g(y.dataTransfer.files);
-    }, i = () => {
+      I.length > 0 && a("update:modelValue", [...M, ...I]);
+    }, T = (v) => {
+      const M = v.target;
+      M.files?.length && (m(M.files), M.value = "");
+    }, S = (v) => {
+      e.disabled || e.readonly || !e.dragAndDrop || (v.preventDefault(), r.value = !0);
+    }, x = () => {
+      r.value = !1;
+    }, c = (v) => {
+      v.preventDefault(), r.value = !1, !(e.disabled || e.readonly || !e.dragAndDrop) && v.dataTransfer?.files && m(v.dataTransfer.files);
+    }, o = () => {
       e.disabled || e.readonly || l.value?.click();
-    }, c = (y) => {
-      e.disabled || e.readonly || (a("update:modelValue", (e.modelValue || []).filter((K) => K.id !== y)), a("file-removed", y));
-    }, u = () => {
+    }, i = (v) => {
+      e.disabled || e.readonly || (a("update:modelValue", (e.modelValue || []).filter((M) => M.id !== v)), a("file-removed", v));
+    }, p = () => {
       e.disabled || e.readonly || (a("update:modelValue", []), a("clear-all"));
-    }, h = k(() => {
-      const y = ["krds-file-upload", "line"];
-      return e.class && y.push(e.class), y;
-    }), m = () => t("div", { class: "file-head" }, [t("h3", { class: "tit" }, e.title), t("div", null, [t("p", null, e.description)])]), w = () => t("div", {
+    }, y = b(() => {
+      const v = ["krds-file-upload", "line"];
+      return e.class && v.push(e.class), v;
+    }), $ = () => t("div", { class: "file-head" }, [t("h3", { class: "tit" }, e.title), t("div", null, [t("p", null, e.description)])]), C = () => t("div", {
       class: "file-upload",
       onDragover: S,
-      onDragleave: V,
-      onDrop: d
+      onDragleave: x,
+      onDrop: c
     }, [t("p", { class: "txt" }, e.placeholder), t("div", { class: "file-upload-btn-wrap" }, [t("input", {
       ref: l,
       type: "file",
       name: e.name || "myFile",
-      id: s,
+      id: n,
       hidden: !0,
       accept: e.accept || void 0,
       multiple: e.multiple,
-      onChange: _
-    }), t("label", { for: s }, [t("button", {
+      onChange: T
+    }), t("label", { for: n }, [t("button", {
       type: "button",
       class: ["krds-btn", e.size],
       disabled: e.disabled || void 0,
-      onClick: i
-    }, [t("i", { class: "svg-icon ico-upload" }), "파일선택"])])])]), C = (y) => {
-      const K = [];
-      return y.status === "uploading" ? K.push(t("span", {
+      onClick: o
+    }, [t("i", { class: "svg-icon ico-upload" }), "파일선택"])])])]), E = (v) => {
+      const M = [];
+      return v.status === "uploading" ? M.push(t("span", {
         class: "krds-spinner",
         role: "status"
-      }, [t("span", { class: "sr-only" }, "업로드 중")])) : y.downloadUrl ? (e.showDownload && K.push(t("button", {
+      }, [t("span", { class: "sr-only" }, "업로드 중")])) : v.downloadUrl ? (e.showDownload && M.push(t("button", {
         type: "button",
         class: "krds-btn medium text",
-        onClick: () => a("download", y)
-      }, ["다운로드 ", t("i", { class: "svg-icon ico-down" })])), e.showPreviewButton && K.push(t("button", {
+        onClick: () => a("download", v)
+      }, ["다운로드 ", t("i", { class: "svg-icon ico-down" })])), e.showPreviewButton && M.push(t("button", {
         type: "button",
         class: "krds-btn medium text",
-        onClick: () => a("preview", y)
-      }, ["바로보기 ", t("i", { class: "svg-icon ico-angle right" })]))) : y.status === "completed" ? K.push(t("span", { class: "ico-invalid complete" }, [t("em", { class: "sr-only" }, "업로드 완료")])) : e.readonly || K.push(t("button", {
+        onClick: () => a("preview", v)
+      }, ["바로보기 ", t("i", { class: "svg-icon ico-angle right" })]))) : v.status === "completed" ? M.push(t("span", { class: "ico-invalid complete" }, [t("em", { class: "sr-only" }, "업로드 완료")])) : e.readonly || M.push(t("button", {
         type: "button",
         class: "krds-btn medium text",
         disabled: e.disabled || void 0,
-        onClick: () => c(y.id)
-      }, ["삭제 ", t("i", { class: "svg-icon ico-delete-fill" })])), K;
-    }, x = (y) => {
-      const K = [t("div", { class: y.downloadUrl ? "file-info m-column" : "file-info" }, [t("div", { class: "file-name" }, v(y)), t("div", { class: "btn-wrap" }, C(y))])];
-      if (y.status === "error" && y.errorMessage) {
-        const F = y.errorMessage.split(`
-`), P = [];
-        F.forEach((A, j) => {
-          j > 0 && P.push(t("br")), P.push(A);
-        }), K.push(t("p", { class: "file-hint-invalid" }, P));
+        onClick: () => i(v.id)
+      }, ["삭제 ", t("i", { class: "svg-icon ico-delete-fill" })])), M;
+    }, D = (v) => {
+      const M = [t("div", { class: v.downloadUrl ? "file-info m-column" : "file-info" }, [t("div", { class: "file-name" }, h(v)), t("div", { class: "btn-wrap" }, E(v))])];
+      if (v.status === "error" && v.errorMessage) {
+        const I = v.errorMessage.split(`
+`), N = [];
+        I.forEach((H, G) => {
+          G > 0 && N.push(t("br")), N.push(H);
+        }), M.push(t("p", { class: "file-hint-invalid" }, N));
       }
       return t("li", {
-        key: y.id,
-        class: y.status === "error" ? "is-error" : void 0
-      }, K);
-    }, $ = (y) => {
-      const K = y.filter((P) => P.status !== "error").length, F = [t("div", { class: "total" }, [t("span", { class: "current" }, `${K}개`), ` / ${e.maxFiles}개`]), t("ul", { class: "upload-list" }, y.map(x))];
-      return e.showClearAll && !e.readonly && F.push(t("div", { class: "upload-delete-btn" }, [t("button", {
+        key: v.id,
+        class: v.status === "error" ? "is-error" : void 0
+      }, M);
+    }, _ = (v) => {
+      const M = v.filter((N) => N.status !== "error").length, I = [t("div", { class: "total" }, [t("span", { class: "current" }, `${M}개`), ` / ${e.maxFiles}개`]), t("ul", { class: "upload-list" }, v.map(D))];
+      return e.showClearAll && !e.readonly && I.push(t("div", { class: "upload-delete-btn" }, [t("button", {
         type: "button",
         class: "krds-btn xsmall tertiary",
         disabled: e.disabled || void 0,
-        onClick: u
-      }, ["전체 파일 삭제", t("i", { class: "svg-icon ico-angle right" })])])), t("div", { class: "file-list" }, F);
+        onClick: p
+      }, ["전체 파일 삭제", t("i", { class: "svg-icon ico-angle right" })])])), t("div", { class: "file-list" }, I);
     };
     return () => {
-      const y = [m()];
-      e.readonly || y.push(w());
-      const K = e.modelValue || [];
-      return K.length > 0 && y.push($(K)), t("div", {
-        class: h.value,
+      const v = [$()];
+      e.readonly || v.push(C());
+      const M = e.modelValue || [];
+      return M.length > 0 && v.push(_(M)), t("div", {
+        class: y.value,
         style: e.style || void 0
-      }, y);
+      }, v);
     };
   }
-}), Dt = Lt, Tt = B({
+}), wt = St, Kt = A({
   name: "KrdsBadge",
   props: {
     type: {
@@ -1214,12 +1220,12 @@ ${r(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const r = ["krds-badge"];
-      return r.push(`${e.type}-${e.color}`), e.size && r.push(e.size), e.number && r.push("number"), e.class && r.push(e.class), r;
-    }), s = (r) => {
-      a("click", r);
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const s = ["krds-badge"];
+      return s.push(`${e.type}-${e.color}`), e.size && s.push(e.size), e.number && s.push("number"), e.class && s.push(e.class), s;
+    }), n = (s) => {
+      a("click", s);
     };
     return () => t("span", {
       type: e.type,
@@ -1227,10 +1233,10 @@ ${r(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
       size: e.size,
       number: e.number,
       class: l.value,
-      onClick: s
-    }, n.default?.());
+      onClick: n
+    }, r.default?.());
   }
-}), Vt = Tt, zt = B({
+}), Ct = Kt, xt = A({
   name: "KrdsTag",
   props: {
     link: {
@@ -1255,30 +1261,30 @@ ${r(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
     }
   },
   emits: ["remove"],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const o = ["krds-btn-tag"];
-      return e.link && o.push("link"), e.class && o.push(e.class), o;
-    }), s = (o) => {
-      a("remove", o);
-    }, r = () => t("button", {
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const u = ["krds-btn-tag"];
+      return e.link && u.push("link"), e.class && u.push(e.class), u;
+    }), n = (u) => {
+      a("remove", u);
+    }, s = () => t("button", {
       type: "button",
       class: "btn-delete",
-      onClick: s
+      onClick: n
     }, [t("span", { class: "sr-only" }, "삭제")]);
     return () => {
-      const o = [], v = n.default?.();
-      if (v && o.push(v), e.link || o.push(r()), e.link) {
+      const u = [], h = r.default?.();
+      if (h && u.push(h), e.link || u.push(s()), e.link) {
         const f = {
           href: e.href,
           class: l.value
         };
-        return e.target && (f.target = e.target), e.rel && (f.rel = e.rel), t("a", f, o);
+        return e.target && (f.target = e.target), e.rel && (f.rel = e.rel), t("a", f, u);
       }
-      return t("span", { class: l.value }, o);
+      return t("span", { class: l.value }, u);
     };
   }
-}), It = zt, Et = B({
+}), $t = xt, Lt = A({
   name: "KrdsTagGroup",
   props: {
     size: {
@@ -1291,43 +1297,43 @@ ${r(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
     }
   },
   setup(e, { slots: a }) {
-    const n = k(() => {
+    const r = b(() => {
       const l = ["krds-tag-wrap"];
       return e.size && l.push(e.size), e.class && l.push(e.class), l;
     });
-    return () => t("div", { class: n.value }, a.default?.());
+    return () => t("div", { class: r.value }, a.default?.());
   }
-}), Ft = Et, Mt = B({
+}), Dt = Lt, Bt = A({
   name: "KrdsMasthead",
   props: { class: {
     type: String,
     default: void 0
   } },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const r = [""];
-      return e.class && r.push(e.class), r;
-    }), s = (r) => {
-      a("click", r);
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const s = [""];
+      return e.class && s.push(e.class), s;
+    }), n = (s) => {
+      a("click", s);
     };
     return () => t("div", {
       id: "krds-masthead",
       class: l.value,
-      onClick: s
-    }, [t("div", { class: "toggle-wrap" }, [t("div", { class: "toggle-head" }, [t("div", { class: "inner" }, [t("span", { class: "nuri-txt" }, n.default?.())])])])]);
+      onClick: n
+    }, [t("div", { class: "toggle-wrap" }, [t("div", { class: "toggle-head" }, [t("div", { class: "inner" }, [t("span", { class: "nuri-txt" }, r.default?.())])])])]);
   }
-}), At = Mt, Rt = 0;
-function Gl(e = "krds") {
-  return `${e}-${++Rt}`;
+}), Et = Bt, Tt = 0;
+function Za(e = "krds") {
+  return `${e}-${++Tt}`;
 }
-function Yl() {
+function el() {
   return `${Date.now().toString(36).slice(-4)}${Math.random().toString(36).substring(2, 5)}`;
 }
-function ve(...e) {
+function he(...e) {
   return e.filter(Boolean).join(" ");
 }
-var Pt = B({
+var _t = A({
   name: "KrdsToggleSwitch",
   props: {
     modelValue: {
@@ -1369,23 +1375,23 @@ var Pt = B({
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: a, attrs: n }) {
-    const l = `toggle-switch-${ae()}`, s = k(() => e.modelValue), r = k(() => ve("krds-form-toggle-switch", e.size, e.class)), o = (f) => {
+  setup(e, { emit: a, attrs: r }) {
+    const l = `toggle-switch-${de()}`, n = b(() => e.modelValue), s = b(() => he("krds-form-toggle-switch", e.size, e.class)), u = (f) => {
       if (e.disabled) return;
-      const b = f.target.checked;
-      a("update:modelValue", b), a("change", b);
-    }, v = k(() => e.id || l);
-    return () => t("div", { class: r.value }, [t("input", {
+      const w = f.target.checked;
+      a("update:modelValue", w), a("change", w);
+    }, h = b(() => e.id || l);
+    return () => t("div", { class: s.value }, [t("input", {
       type: "checkbox",
-      id: v.value,
+      id: h.value,
       name: e.name,
-      checked: s.value,
+      checked: n.value,
       disabled: e.disabled,
-      onChange: o,
-      ...n
-    }), t("label", { for: v.value }, [t("span", { class: "switch-toggle" }, [t("i")]), e.label || ""])]);
+      onChange: u,
+      ...r
+    }), t("label", { for: h.value }, [t("span", { class: "switch-toggle" }, [t("i")]), e.label || ""])]);
   }
-}), Ht = Pt, qt = B({
+}), Mt = _t, At = A({
   name: "KrdsCheckArea",
   props: {
     class: {
@@ -1399,11 +1405,11 @@ var Pt = B({
   },
   setup(e, { slots: a }) {
     return () => {
-      const n = ["krds-check-area"];
-      return e.column && n.push("chk-column"), e.class && n.push(e.class), t("div", { class: n }, a.default?.());
+      const r = ["krds-check-area"];
+      return e.column && r.push("chk-column"), e.class && r.push(e.class), t("div", { class: r }, a.default?.());
     };
   }
-}), Ot = qt, Nt = B({
+}), Vt = At, Pt = A({
   name: "KrdsCheckbox",
   props: {
     modelValue: {
@@ -1434,25 +1440,28 @@ var Pt = B({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: a, attrs: n, slots: l }) {
-    const s = `checkbox-${ae()}`, r = k(() => e.modelValue), o = k(() => ve(e.chip ? "krds-form-chip" : "krds-form-check", e.size, e.class)), v = (b) => {
+  setup(e, { emit: a, attrs: r, slots: l }) {
+    const n = `checkbox-${de()}`, s = b(() => e.modelValue), u = b(() => {
+      const w = e.chip ? "krds-form-chip" : "krds-form-check";
+      return he(w, e.size, e.class);
+    }), h = (w) => {
       if (e.disabled) return;
-      const g = b.target.checked;
-      a("update:modelValue", g);
-    }, f = k(() => e.id || s);
+      const m = w.target.checked;
+      a("update:modelValue", m);
+    }, f = b(() => e.id || n);
     return () => {
-      const b = [t("input", {
+      const w = [t("input", {
         type: "checkbox",
         id: f.value,
-        checked: r.value,
+        checked: s.value,
         disabled: e.disabled,
-        onChange: v,
-        ...n
+        onChange: h,
+        ...r
       }), t("label", { for: f.value }, l.default?.())];
-      return l.description && !e.chip && b.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: o.value }, b);
+      return l.description && !e.chip && w.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: u.value }, w);
     };
   }
-}), jt = Nt, Wt = B({
+}), zt = Pt, Ft = A({
   name: "KrdsRadio",
   props: {
     modelValue: {
@@ -1499,25 +1508,28 @@ var Pt = B({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: a, attrs: n, slots: l }) {
-    const s = `radio-${ae()}`, r = k(() => e.modelValue === e.value), o = k(() => ve(e.chip ? "krds-form-chip" : "krds-form-check", e.size, e.class)), v = (g) => {
-      e.disabled || g.target.checked && a("update:modelValue", e.value);
-    }, f = k(() => e.id || s), b = k(() => e.name);
+  setup(e, { emit: a, attrs: r, slots: l }) {
+    const n = `radio-${de()}`, s = b(() => e.modelValue === e.value), u = b(() => {
+      const m = e.chip ? "krds-form-chip" : "krds-form-check";
+      return he(m, e.size, e.class);
+    }), h = (m) => {
+      e.disabled || m.target.checked && a("update:modelValue", e.value);
+    }, f = b(() => e.id || n), w = b(() => e.name);
     return () => {
-      const g = [t("input", {
+      const m = [t("input", {
         type: "radio",
         id: f.value,
-        name: b.value,
+        name: w.value,
         value: String(e.value),
-        checked: r.value,
+        checked: s.value,
         disabled: e.disabled,
-        onChange: v,
-        ...n
+        onChange: h,
+        ...r
       }), t("label", { for: f.value }, l.default?.())];
-      return l.description && !e.chip && g.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: o.value }, g);
+      return l.description && !e.chip && m.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: u.value }, m);
     };
   }
-}), Gt = Wt, Yt = Ce, Ut = B({
+}), Rt = Ft, It = Le, Ht = A({
   name: "KrdsStepIndicator",
   props: {
     modelValue: {
@@ -1531,23 +1543,23 @@ var Pt = B({
   },
   emits: ["update:modelValue"],
   setup(e, { slots: a }) {
-    const n = k(() => {
-      const v = ["krds-step-wrap"];
-      return e.class && v.push(e.class), v;
-    }), l = (v) => {
+    const r = b(() => {
+      const h = ["krds-step-wrap"];
+      return e.class && h.push(e.class), h;
+    }), l = (h) => {
       const f = e.modelValue || 0;
-      return v < f ? "done" : v === f ? "active" : "pending";
-    }, s = L(0), r = () => {
-      s.value = 0;
-    }, o = () => s.value++;
-    return Fe("stepIndicator", {
-      activeStep: k(() => e.modelValue || 0),
+      return h < f ? "done" : h === f ? "active" : "pending";
+    }, n = B(0), s = () => {
+      n.value = 0;
+    }, u = () => n.value++;
+    return Qe("stepIndicator", {
+      activeStep: b(() => e.modelValue || 0),
       getStepStatus: l,
-      getNextStepIndex: o,
-      resetStepIndex: r
-    }), () => (r(), t("ol", { class: n.value }, a.default?.()));
+      getNextStepIndex: u,
+      resetStepIndex: s
+    }), () => (s(), t("ol", { class: r.value }, a.default?.()));
   }
-}), Xt = Ut, Jt = B({
+}), Ot = Ht, Nt = A({
   name: "KrdsStep",
   props: {
     step: {
@@ -1568,27 +1580,27 @@ var Pt = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = Ee("stepIndicator"), s = l ? l.getNextStepIndex() : -1, r = k(() => e.status ? e.status : l && s >= 0 ? l.getStepStatus(s) : "pending"), o = k(() => {
-      const f = [r.value];
+  setup(e, { emit: a, slots: r }) {
+    const l = Xe("stepIndicator"), n = l ? l.getNextStepIndex() : -1, s = b(() => e.status ? e.status : l && n >= 0 ? l.getStepStatus(n) : "pending"), u = b(() => {
+      const f = [s.value];
       return e.class && f.push(e.class), f;
-    }), v = (f) => {
+    }), h = (f) => {
       a("click", f, e.step);
     };
     return () => {
-      const f = r.value === "active";
+      const f = s.value === "active";
       return t("li", {
-        class: o.value,
-        onClick: v
+        class: u.value,
+        onClick: h
       }, [t("span", [
         f && t("em", { class: "sr-only" }, "현재단계"),
         t("i", { class: "step" }, e.step),
         t("span", { class: "step-tit" }, e.title),
-        n.default?.()
+        r.default?.()
       ])]);
     };
   }
-}), Qt = Jt, Zt = B({
+}), qt = Nt, Wt = A({
   name: "KrdsSkipLink",
   props: {
     href: {
@@ -1615,16 +1627,21 @@ var Pt = B({
       class: e.class
     }, [t("a", { href: e.href }, a.default?.())]);
   }
-}), ea = Zt, ta = ["id", "aria-label"], aa = { class: "breadcrumb" }, la = [
-  "href",
-  "aria-current",
-  "onClick"
-], sa = { key: 0 }, na = /* @__PURE__ */ B({
-  __name: "KrdsBreadcrumb",
+}), Yt = Wt, jt = A({
+  name: "KrdsBreadcrumb",
   props: {
-    items: {},
-    id: { default: void 0 },
-    ariaLabel: { default: "현재 경로" },
+    items: {
+      type: Array,
+      required: !0
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    ariaLabel: {
+      type: String,
+      default: "현재 경로"
+    },
     showHomeIcon: {
       type: Boolean,
       default: !0
@@ -1632,24 +1649,27 @@ var Pt = B({
   },
   emits: ["item-click"],
   setup(e, { emit: a }) {
-    const n = e, l = a, s = (o) => o === n.items.length - 1, r = (o, v) => {
-      o.onClick && o.onClick(v), l("item-click", o, v);
+    const r = (n) => n === e.items.length - 1, l = (n, s) => {
+      n.onClick && n.onClick(s), a("item-click", n, s);
     };
-    return (o, v) => (D(), T("nav", {
+    return () => t("nav", {
       id: e.id,
       class: "krds-breadcrumb-wrap",
       "aria-label": e.ariaLabel
-    }, [p("ol", aa, [(D(!0), T(W, null, Y(e.items, (f, b) => (D(), T("li", {
-      key: `breadcrumb-${b}`,
-      class: R({ home: b === 0 && e.showHomeIcon })
-    }, [p("a", {
-      href: f.href || "#",
-      class: "txt",
-      "aria-current": s(b) ? "page" : void 0,
-      onClick: (g) => r(f, g)
-    }, [b === 0 && e.showHomeIcon ? X("", !0) : (D(), T("span", sa, M(f.text), 1))], 8, la)], 2))), 128))])], 8, ta));
+    }, [t("ol", { class: "breadcrumb" }, e.items.map((n, s) => {
+      const u = s === 0 && e.showHomeIcon;
+      return t("li", {
+        key: `breadcrumb-${s}`,
+        class: { home: u }
+      }, [t("a", {
+        href: n.href || "#",
+        class: "txt",
+        "aria-current": r(s) ? "page" : void 0,
+        onClick: (h) => l(n, h)
+      }, u ? [] : [t("span", null, n.text)])]);
+    }))]);
   }
-}), ra = na, ia = ra, oa = B({
+}), Gt = jt, Ut = A({
   name: "KrdsInPageNavigation",
   props: {
     title: {
@@ -1683,554 +1703,640 @@ var Pt = B({
   },
   emits: ["itemClick"],
   slots: Object,
-  setup(e, { emit: a, slots: n }) {
-    const l = L(""), s = L(/* @__PURE__ */ new Map()), r = k(() => {
-      const d = ["krds-in-page-navigation-type"];
-      return e.class && d.push(e.class), d;
-    }), o = () => {
-      const d = e.headerTopSelector, i = e.headerInnerSelector;
-      return (document.querySelector(d)?.clientHeight || 0) + (document.querySelector(i)?.clientHeight || 0);
-    }, v = (d, i) => {
-      if (a("itemClick", d, i), d.href.startsWith("#")) {
-        i.preventDefault();
-        const c = document.querySelector(d.href);
-        if (c) {
-          const u = o();
+  setup(e, { emit: a, slots: r }) {
+    const l = B(""), n = B(/* @__PURE__ */ new Map()), s = b(() => {
+      const c = ["krds-in-page-navigation-type"];
+      return e.class && c.push(e.class), c;
+    }), u = () => {
+      const c = e.headerTopSelector, o = e.headerInnerSelector;
+      return (document.querySelector(c)?.clientHeight || 0) + (document.querySelector(o)?.clientHeight || 0);
+    }, h = (c, o) => {
+      if (a("itemClick", c, o), c.href.startsWith("#")) {
+        o.preventDefault();
+        const i = document.querySelector(c.href);
+        if (i) {
+          const p = u();
           if (window.scrollTo({
             left: 0,
-            top: c.getBoundingClientRect().top + window.scrollY - u,
+            top: i.getBoundingClientRect().top + window.scrollY - p,
             behavior: "smooth"
-          }), l.value = d.href, i instanceof KeyboardEvent) {
-            const h = c.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
-            h && h instanceof HTMLElement && (h.setAttribute("tabindex", "-1"), h.focus({ preventScroll: !0 }));
+          }), l.value = c.href, o instanceof KeyboardEvent) {
+            const y = i.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
+            y && y instanceof HTMLElement && (y.setAttribute("tabindex", "-1"), y.focus({ preventScroll: !0 }));
           }
         }
       }
     }, f = () => {
-      s.value.clear(), e.items && e.items.filter((d) => d.href.startsWith("#")).forEach((d) => {
-        const i = document.querySelector(d.href);
-        i && s.value.set(d.href, i);
+      n.value.clear(), e.items && e.items.filter((c) => c.href.startsWith("#")).forEach((c) => {
+        const o = document.querySelector(c.href);
+        o && n.value.set(c.href, o);
       });
-    }, b = () => {
-      if (!e.autoActive || !e.items || s.value.size === 0) return;
-      const d = window.innerHeight, i = Math.ceil(d / 5), c = window.scrollY + d, u = document.body.scrollHeight, h = e.items.filter(($) => $.href.startsWith("#") && s.value.has($.href)).map(($) => ({
-        href: $.href,
-        element: s.value.get($.href),
-        item: $
+    }, w = () => {
+      if (!e.autoActive || !e.items || n.value.size === 0) return;
+      const c = window.innerHeight, o = Math.ceil(c / 5), i = window.scrollY + c, p = document.body.scrollHeight, y = e.items.filter((_) => _.href.startsWith("#") && n.value.has(_.href)).map((_) => ({
+        href: _.href,
+        element: n.value.get(_.href),
+        item: _
       }));
-      if (h.length === 0) return;
-      const m = h[0], w = h[h.length - 1], C = m.element.offsetTop;
-      let x = "";
-      if (c >= u) x = w.href;
-      else if (window.scrollY <= C) x = m.href;
-      else for (const $ of h) {
-        const y = $.element.offsetHeight, K = $.element.offsetTop - i;
-        if (window.scrollY > K && window.scrollY <= K + y) {
-          x = $.href;
+      if (y.length === 0) return;
+      const $ = y[0], C = y[y.length - 1], E = $.element.offsetTop;
+      let D = "";
+      if (i >= p) D = C.href;
+      else if (window.scrollY <= E) D = $.href;
+      else for (const _ of y) {
+        const v = _.element.offsetHeight, M = _.element.offsetTop - o;
+        if (window.scrollY > M && window.scrollY <= M + v) {
+          D = _.href;
           break;
         }
       }
-      x && x !== l.value && (l.value = x);
-    }, g = () => {
+      D && D !== l.value && (l.value = D);
+    }, m = () => {
       if (!e.items) return;
-      const d = e.items.find((i) => i.active);
-      d ? l.value = d.href : e.items.length > 0 && (l.value = e.items[0].href);
+      const c = e.items.find((o) => o.active);
+      c ? l.value = c.href : e.items.length > 0 && (l.value = e.items[0].href);
     };
-    te(() => {
-      if (g(), e.autoActive) {
-        f(), b(), window.addEventListener("scroll", b, { passive: !0 });
-        const d = new MutationObserver(() => {
+    ie(() => {
+      if (m(), e.autoActive) {
+        f(), w(), window.addEventListener("scroll", w, { passive: !0 });
+        const c = new MutationObserver(() => {
           f();
         });
-        d.observe(document.body, {
+        c.observe(document.body, {
           childList: !0,
           subtree: !0
-        }), Z(() => {
-          d.disconnect();
+        }), re(() => {
+          c.disconnect();
         });
       }
-    }), Z(() => {
-      e.autoActive && (window.removeEventListener("scroll", b), s.value.clear());
+    }), re(() => {
+      e.autoActive && (window.removeEventListener("scroll", w), n.value.clear());
     });
-    const _ = () => !e.caption && !e.title ? null : t("div", { class: "in-page-navigation-header" }, [e.caption && t("p", { class: "quick-caption" }, e.caption), e.title && t("p", { class: "quick-title" }, e.title)]), S = () => e.items ? t("nav", { class: "in-page-navigation-list" }, [t("ul", {}, e.items.map((d) => {
-      const i = l.value === d.href || !e.autoActive && d.active;
-      return t("li", { key: d.href }, [t("a", {
-        href: d.href,
-        class: i ? "active" : "",
-        onClick: (c) => v(d, c),
-        onKeydown: (c) => {
-          (c.key === "Enter" || c.key === " ") && (c.preventDefault(), v(d, c));
-        }
-      }, d.text)]);
-    }))]) : null, V = () => n.action ? t("div", { class: "in-page-navigation-action" }, [n.action()]) : null;
-    return () => t("div", { class: r.value }, [t("div", { class: "krds-in-page-navigation-area" }, [
-      _(),
+    const T = () => !e.caption && !e.title ? null : t("div", { class: "in-page-navigation-header" }, [e.caption && t("p", { class: "quick-caption" }, e.caption), e.title && t("p", { class: "quick-title" }, e.title)]), S = () => {
+      if (!e.items) return null;
+      const c = e.items.map((o) => {
+        const i = l.value === o.href || !e.autoActive && o.active;
+        return t("li", { key: o.href }, [t("a", {
+          href: o.href,
+          class: i ? "active" : "",
+          onClick: (p) => h(o, p),
+          onKeydown: (p) => {
+            (p.key === "Enter" || p.key === " ") && (p.preventDefault(), h(o, p));
+          }
+        }, o.text)]);
+      });
+      return t("nav", { class: "in-page-navigation-list" }, [t("ul", {}, c)]);
+    }, x = () => r.action ? t("div", { class: "in-page-navigation-action" }, [r.action()]) : null;
+    return () => t("div", { class: s.value }, [t("div", { class: "krds-in-page-navigation-area" }, [
+      T(),
       S(),
-      V()
+      x()
     ].filter(Boolean))]);
   }
-}), da = oa, ua = ["id"], ca = { class: "page-links" }, fa = [
-  "href",
-  "aria-current",
-  "onClick"
-], va = { key: 0 }, pa = ["aria-label"], ha = /* @__PURE__ */ B({
-  __name: "KrdsPagination",
+}), Xt = Ut, De = {
+  mounted(e, a) {
+    a.value !== !1 && e.classList.add("sr-only");
+  },
+  updated(e, a) {
+    a.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
+  },
+  unmounted(e) {
+    e.classList.remove("sr-only");
+  }
+}, Qt = (e) => {
+  e.directive("sr-only", De);
+}, ke = 1, Se = 8, Jt = A({
+  name: "KrdsPagination",
   props: {
-    modelValue: { default: 1 },
-    min: { default: 1 },
-    max: {},
-    id: { default: void 0 },
-    ariaLabel: { default: "페이지 내비게이션" },
-    pageRange: { default: 8 }
+    modelValue: {
+      type: Number,
+      default: 1
+    },
+    min: {
+      type: Number,
+      default: ke
+    },
+    max: {
+      type: Number,
+      required: !0
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    ariaLabel: {
+      type: String,
+      default: "페이지 내비게이션"
+    },
+    pageRange: {
+      type: Number,
+      default: Se
+    }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const n = e, l = a, s = k(() => Math.max(1, n.min)), r = k(() => n.modelValue ?? s.value), o = k(() => r.value <= s.value), v = k(() => r.value >= n.max), f = k(() => {
-      if (!o.value)
+    const r = b(() => Math.max(1, e.min ?? ke)), l = b(() => e.modelValue ?? r.value), n = b(() => l.value <= r.value), s = b(() => l.value >= e.max), u = b(() => {
+      if (!n.value)
         return "#";
-    }), b = k(() => {
-      if (!v.value)
+    }), h = b(() => {
+      if (!s.value)
         return "#";
-    }), g = k(() => {
-      const { pageRange: d, max: i } = n, c = 1, u = [];
-      if (i <= d + 2 * c) for (let h = s.value; h <= i; h++) u.push({
+    }), f = b(() => {
+      const { max: x } = e, c = e.pageRange ?? Se, o = 1, i = [];
+      if (x <= c + 2) for (let p = r.value; p <= x; p++) i.push({
         type: "page",
-        key: `page-${h}`,
-        page: h,
+        key: `page-${p}`,
+        page: p,
         href: "#"
       });
       else {
-        const h = Math.min(c, i), m = Math.max(i - c + 1, 1), w = Math.max(s.value, r.value - Math.floor(d / 2)), C = Math.min(i, w + d - 1), x = Math.max(s.value, C - d + 1);
-        for (let K = s.value; K <= h; K++) u.push({
+        const p = Math.min(o, x), y = Math.max(x - o + 1, 1), $ = Math.max(r.value, l.value - Math.floor(c / 2)), C = Math.min(x, $ + c - 1), E = Math.max(r.value, C - c + 1);
+        for (let v = r.value; v <= p; v++) i.push({
           type: "page",
-          key: `page-${K}`,
-          page: K,
+          key: `page-${v}`,
+          page: v,
           href: "#"
         });
-        x > h + 1 && u.push({
+        E > p + 1 && i.push({
           type: "ellipsis",
           key: "ellipsis-left",
           ariaLabel: "페이지 생략"
         });
-        const $ = Math.max(x, h + 1), y = Math.min(C, m - 1);
-        for (let K = $; K <= y; K++) u.push({
+        const D = Math.max(E, p + 1), _ = Math.min(C, y - 1);
+        for (let v = D; v <= _; v++) i.push({
           type: "page",
-          key: `page-${K}`,
-          page: K,
+          key: `page-${v}`,
+          page: v,
           href: "#"
         });
-        C < m - 1 && u.push({
+        C < y - 1 && i.push({
           type: "ellipsis",
           key: "ellipsis-right",
           ariaLabel: "페이지 생략"
         });
-        for (let K = m; K <= i; K++) u.push({
+        for (let v = y; v <= x; v++) i.push({
           type: "page",
-          key: `page-${K}`,
-          page: K,
+          key: `page-${v}`,
+          page: v,
           href: "#"
         });
       }
-      return u;
-    }), _ = (d, i) => {
-      if (d === r.value) {
-        i.preventDefault();
+      return i;
+    }), w = (x, c) => {
+      if (x === l.value) {
+        c.preventDefault();
         return;
       }
-      l("update:modelValue", d);
-    }, S = (d) => {
-      if (o.value) {
-        d.preventDefault();
+      a("update:modelValue", x);
+    }, m = (x) => {
+      if (n.value) {
+        x.preventDefault();
         return;
       }
-      l("update:modelValue", r.value - 1);
-    }, V = (d) => {
-      if (v.value) {
-        d.preventDefault();
+      a("update:modelValue", l.value - 1);
+    }, T = (x) => {
+      if (s.value) {
+        x.preventDefault();
         return;
       }
-      l("update:modelValue", r.value + 1);
-    };
-    return (d, i) => {
-      const c = Me("sr-only");
-      return D(), T("div", {
-        id: e.id,
-        class: "krds-pagination"
-      }, [
-        (D(), de(ge(o.value ? "span" : "a"), {
-          href: o.value ? void 0 : f.value,
-          class: R([
-            "page-navi",
-            "prev",
-            { disabled: o.value }
-          ]),
-          onClick: S
-        }, {
-          default: ue(() => [...i[0] || (i[0] = [N(" 이전 ", -1)])]),
-          _: 1
-        }, 8, ["href", "class"])),
-        p("div", ca, [(D(!0), T(W, null, Y(g.value, (u) => (D(), T(W, { key: u.key }, [u.type === "page" ? (D(), T("a", {
-          key: 0,
-          href: u.href || "#",
-          class: R(["page-link", { active: u.page === r.value }]),
-          "aria-current": u.page === r.value ? "page" : void 0,
-          onClick: (h) => _(u.page, h)
-        }, [u.page === r.value ? ee((D(), T("span", va, [...i[1] || (i[1] = [N("현재페이지", -1)])])), [[c]]) : X("", !0), N(" " + M(u.page), 1)], 10, fa)) : u.type === "ellipsis" ? (D(), T("span", {
-          key: 1,
-          class: "page-link link-dot",
-          "aria-label": u.ariaLabel
-        }, null, 8, pa)) : X("", !0)], 64))), 128))]),
-        (D(), de(ge(v.value ? "span" : "a"), {
-          href: v.value ? void 0 : b.value,
-          class: R([
-            "page-navi",
-            "next",
-            { disabled: v.value }
-          ]),
-          onClick: V
-        }, {
-          default: ue(() => [...i[2] || (i[2] = [N(" 다음 ", -1)])]),
-          _: 1
-        }, 8, ["href", "class"]))
-      ], 8, ua);
+      a("update:modelValue", l.value + 1);
+    }, S = (x) => {
+      if (x.type === "page") {
+        const c = x.page === l.value;
+        return t("a", {
+          key: x.key,
+          href: x.href || "#",
+          class: ["page-link", { active: c }],
+          "aria-current": c ? "page" : void 0,
+          onClick: (o) => w(x.page, o)
+        }, [c ? ve(t("span", null, "현재페이지"), [[De]]) : null, ` ${x.page} `]);
+      }
+      return t("span", {
+        key: x.key,
+        class: "page-link link-dot",
+        "aria-label": x.ariaLabel
+      });
     };
+    return () => t("div", {
+      id: e.id,
+      class: "krds-pagination"
+    }, [
+      t(n.value ? "span" : "a", {
+        href: n.value ? void 0 : u.value,
+        class: [
+          "page-navi",
+          "prev",
+          { disabled: n.value }
+        ],
+        onClick: m
+      }, "이전"),
+      t("div", { class: "page-links" }, f.value.map(S)),
+      t(s.value ? "span" : "a", {
+        href: s.value ? void 0 : h.value,
+        class: [
+          "page-navi",
+          "next",
+          { disabled: s.value }
+        ],
+        onClick: T
+      }, "다음")
+    ]);
   }
-}), ma = ha, ya = ma, ga = { class: "inner help-panel-flexible" }, ba = { class: "help-panel-wrap" }, ka = { class: "help-conts-area" }, Sa = /* @__PURE__ */ B({
-  __name: "KrdsPanel",
+}), Zt = Jt, ea = A({
+  name: "KrdsPanel",
   props: { modelValue: {
     type: Boolean,
     default: !1
   } },
   emits: ["update:modelValue"],
-  setup(e, { emit: a }) {
-    const n = e, l = a, s = k({
-      get: () => n.modelValue,
-      set: (v) => l("update:modelValue", v)
-    }), r = () => {
-      s.value = !0;
-    }, o = () => {
-      s.value = !1;
+  setup(e, { emit: a, slots: r }) {
+    const l = b({
+      get: () => e.modelValue,
+      set: (u) => a("update:modelValue", u)
+    }), n = () => {
+      l.value = !0;
+    }, s = () => {
+      l.value = !1;
     };
-    return (v, f) => (D(), T("div", ga, [p("button", {
+    return () => t("div", { class: "inner help-panel-flexible" }, [t("button", {
       type: "button",
       class: "krds-btn small tertiary btn-help-panel expand btn-help-exec",
-      onClick: r
-    }, [...f[0] || (f[0] = [p("i", { class: "svg-icon ico-fold" }, null, -1), N(" 도움말 ", -1)])]), p("div", { class: R(["krds-help-panel", { expand: s.value }]) }, [p("div", ba, [p("div", ka, [J(v.$slots, "default"), p("button", {
+      onClick: n
+    }, [t("i", { class: "svg-icon ico-fold" }), " 도움말"]), t("div", { class: ["krds-help-panel", { expand: l.value }] }, [t("div", { class: "help-panel-wrap" }, [t("div", { class: "help-conts-area" }, [r.default?.(), t("button", {
       type: "button",
       class: "krds-btn small tertiary btn-help-panel fold",
-      onClick: o
-    }, [...f[1] || (f[1] = [
-      p("span", { class: "sr-only" }, "도움말", -1),
-      N(" 접어두기 ", -1),
-      p("i", { class: "svg-icon ico-angle right" }, null, -1)
-    ])])])])], 2)]));
+      onClick: s
+    }, [
+      t("span", { class: "sr-only" }, "도움말"),
+      " 접어두기 ",
+      t("i", { class: "svg-icon ico-angle right" })
+    ])])])])]);
   }
-}), Ka = Sa, wa = Ka, _a = { class: "tooltip-action" }, Ca = {
-  key: 0,
-  class: "svg-icon ico-help"
-}, $a = {
-  key: 1,
-  class: "svg-icon ico-tooltip"
-}, xa = { class: "tooltip-title" }, Ba = { class: "tooltip-contents" }, La = /* @__PURE__ */ B({
-  __name: "KrdsContextualHelp",
+}), ta = ea, aa = A({
+  name: "KrdsContextualHelp",
   props: {
-    tooltipTitle: { default: "도움말 제목" },
-    helpIcon: { type: Boolean },
-    position: { default: "top left" }
+    tooltipTitle: {
+      type: String,
+      default: "도움말 제목"
+    },
+    helpIcon: {
+      type: Boolean,
+      default: !1
+    },
+    position: {
+      type: String,
+      default: "top left"
+    }
   },
-  setup(e) {
-    const a = e, n = L(), l = L(), s = L(), r = L(), o = L(!1), v = () => {
-      const i = o.value;
-      g(), i || f();
+  setup(e, { slots: a }) {
+    const r = B(), l = B(), n = B(), s = B(), u = B(!1), h = () => {
+      const o = u.value;
+      m(), o || f();
     }, f = () => {
-      !s.value || !l.value || (o.value = !0, s.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), s.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), _());
-    }, b = () => {
-      !s.value || !l.value || (o.value = !1, s.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
-    }, g = () => {
-      const i = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), c = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
-      i.forEach((u) => {
-        u.style.display = "none";
-      }), c.forEach((u) => {
-        u.setAttribute("aria-expanded", "false");
-      }), o.value = !1;
-    }, _ = () => {
-      if (!n.value || !s.value) return;
-      const i = window.innerWidth <= 768, c = n.value.querySelector(".tooltip-action");
-      if (i) {
-        const u = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], h = c.getBoundingClientRect().left - parseInt(u), m = document.body.clientWidth - parseInt(u) * 2;
-        s.value.style.left = `-${h}px`, s.value.style.width = `${m}px`;
+      !n.value || !l.value || (u.value = !0, n.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), n.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), T());
+    }, w = () => {
+      !n.value || !l.value || (u.value = !1, n.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
+    }, m = () => {
+      const o = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), i = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
+      o.forEach((p) => {
+        p.style.display = "none";
+      }), i.forEach((p) => {
+        p.setAttribute("aria-expanded", "false");
+      }), u.value = !1;
+    }, T = () => {
+      if (!r.value || !n.value) return;
+      const o = window.innerWidth <= 768, i = r.value.querySelector(".tooltip-action");
+      if (o) {
+        const p = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], y = i.getBoundingClientRect().left - parseInt(p), $ = document.body.clientWidth - parseInt(p) * 2;
+        n.value.style.left = `-${y}px`, n.value.style.width = `${$}px`;
       } else
-        s.value.style.left = "", s.value.style.right = "", s.value.style.width = "360px";
-    }, S = (i) => {
-      (i.key === "Escape" || i.key === "Esc") && g();
-    }, V = (i) => {
-      i.target.closest(".tooltip-action") || g();
-    }, d = () => {
-      o.value && _();
+        n.value.style.left = "", n.value.style.right = "", n.value.style.width = "360px";
+    }, S = (o) => {
+      (o.key === "Escape" || o.key === "Esc") && m();
+    }, x = (o) => {
+      o.target.closest(".tooltip-action") || m();
+    }, c = () => {
+      u.value && T();
     };
-    return te(() => {
-      n.value && (l.value && l.value.setAttribute("aria-expanded", "false"), s.value && s.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", S), document.addEventListener("click", V), window.addEventListener("resize", d));
-    }), Z(() => {
-      document.removeEventListener("keydown", S), document.removeEventListener("click", V), window.removeEventListener("resize", d);
-    }), (i, c) => (D(), T("div", {
-      ref_key: "containerRef",
-      ref: n,
-      class: R(["krds-contextual-help", a.position])
-    }, [p("div", _a, [p("button", {
-      ref_key: "tooltipBtnRef",
+    return ie(() => {
+      r.value && (l.value && l.value.setAttribute("aria-expanded", "false"), n.value && n.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", S), document.addEventListener("click", x), window.addEventListener("resize", c));
+    }), re(() => {
+      document.removeEventListener("keydown", S), document.removeEventListener("click", x), window.removeEventListener("resize", c);
+    }), () => t("div", {
+      ref: r,
+      class: ["krds-contextual-help", e.position]
+    }, [t("div", { class: "tooltip-action" }, [t("button", {
       ref: l,
       type: "button",
       class: "krds-btn medium icon tooltip-btn",
-      onClick: v
-    }, [c[0] || (c[0] = p("span", { class: "sr-only" }, "도움말", -1)), a.helpIcon ? (D(), T("i", Ca)) : (D(), T("i", $a))], 512), p("div", {
-      ref_key: "tooltipPopoverRef",
-      ref: s,
+      onClick: h
+    }, [t("span", { class: "sr-only" }, "도움말"), e.helpIcon ? t("i", { class: "svg-icon ico-help" }) : t("i", { class: "svg-icon ico-tooltip" })]), t("div", {
+      ref: n,
       class: "tooltip-popover",
       role: "tooltip"
     }, [
-      p("h4", xa, M(a.tooltipTitle), 1),
-      p("div", Ba, [J(i.$slots, "default")]),
-      p("button", {
-        ref_key: "closeBtnRef",
-        ref: r,
+      t("h4", { class: "tooltip-title" }, e.tooltipTitle),
+      t("div", { class: "tooltip-contents" }, a.default?.()),
+      t("button", {
+        ref: s,
         type: "button",
         class: "krds-btn xsmall icon tooltip-close",
-        onClick: b
-      }, [...c[1] || (c[1] = [p("span", { class: "sr-only" }, "닫기", -1), p("i", { class: "svg-icon ico-modal-close" }, null, -1)])], 512)
-    ], 512)])], 2));
+        onClick: w
+      }, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-modal-close" })])
+    ])])]);
   }
-}), Da = La, Ta = Da, Va = {
-  key: 0,
-  class: "coach-balloon"
-}, za = { class: "coach-tit" }, Ia = { class: "desc" }, Ea = { class: "coach-controls" }, Fa = { class: "num" }, Ma = { class: "btn-wrap" }, Aa = /* @__PURE__ */ B({
-  __name: "KrdsCoachMark",
+}), la = aa, na = A({
+  name: "KrdsCoachMark",
   props: {
-    coachMarkClass: { default: "" },
-    stepsData: {},
-    activeStep: {},
-    modelValue: { default: null },
-    class: {},
-    style: {},
-    id: {}
+    coachMarkClass: {
+      type: [String, Array],
+      default: ""
+    },
+    stepsData: {
+      type: Array,
+      required: !0
+    },
+    activeStep: {
+      type: Number,
+      required: !0
+    },
+    modelValue: {
+      type: Number,
+      default: null
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: a }) {
-    const n = e, l = k(() => {
-      const f = n.activeStep - 1;
-      return n.stepsData && f >= 0 && f < n.stepsData.length ? n.stepsData[f] : null;
-    }), s = a, r = () => {
-      n.activeStep > 1 && s("update:modelValue", n.activeStep - 1);
-    }, o = () => {
-      n.activeStep < n.stepsData.length && s("update:modelValue", n.activeStep + 1);
-    }, v = () => {
-      s("close");
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const f = e.activeStep - 1;
+      return e.stepsData && f >= 0 && f < e.stepsData.length ? e.stepsData[f] : null;
+    }), n = () => {
+      e.activeStep > 1 && a("update:modelValue", e.activeStep - 1);
+    }, s = () => {
+      e.activeStep < e.stepsData.length && a("update:modelValue", e.activeStep + 1);
+    }, u = () => {
+      a("close");
+    }, h = () => {
+      const f = l.value;
+      return e.modelValue !== e.activeStep || !f ? null : t("div", { class: "coach-balloon" }, [
+        t("h5", { class: "sr-only" }, "따라하기 가이드"),
+        t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${f.title}`),
+        t("p", { class: "desc" }, f.description),
+        t("div", { class: "coach-controls" }, [t("div", { class: "num" }, [
+          t("span", { class: "sr-only" }, "현재 단계"),
+          t("strong", null, String(e.activeStep)),
+          t("span", { class: "sr-only" }, "총 단계"),
+          t("span", null, String(e.stepsData.length))
+        ]), t("div", { class: "btn-wrap" }, [
+          t("button", {
+            type: "button",
+            class: "krds-btn small text",
+            onClick: u
+          }, "그만보기"),
+          e.activeStep !== 1 ? t("button", {
+            type: "button",
+            class: "krds-btn small text",
+            onClick: n
+          }, "이전으로") : null,
+          e.activeStep !== e.stepsData.length ? t("button", {
+            type: "button",
+            class: "krds-btn small tertiary",
+            onClick: s
+          }, "다음으로") : null
+        ])])
+      ]);
     };
-    return (f, b) => (D(), T("div", {
-      class: R(["krds-coach-mark", e.coachMarkClass]),
-      style: ne(e.style)
-    }, [e.modelValue === e.activeStep && l.value ? (D(), T("div", Va, [
-      b[2] || (b[2] = p("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
-      p("h6", za, M(e.activeStep) + "단계 : " + M(l.value.title), 1),
-      p("p", Ia, M(l.value.description), 1),
-      p("div", Ea, [p("div", Fa, [
-        b[0] || (b[0] = p("span", { class: "sr-only" }, "현재 단계", -1)),
-        p("strong", null, M(e.activeStep), 1),
-        b[1] || (b[1] = p("span", { class: "sr-only" }, "총 단계", -1)),
-        p("span", null, M(e.stepsData.length), 1)
-      ]), p("div", Ma, [
-        p("button", {
-          type: "button",
-          class: "krds-btn small text",
-          onClick: v
-        }, "그만보기"),
-        e.activeStep !== 1 ? (D(), T("button", {
-          key: 0,
-          type: "button",
-          class: "krds-btn small text",
-          onClick: r
-        }, "이전으로")) : X("", !0),
-        e.activeStep !== e.stepsData.length ? (D(), T("button", {
-          key: 1,
-          type: "button",
-          class: "krds-btn small tertiary",
-          onClick: o
-        }, "다음으로")) : X("", !0)
-      ])])
-    ])) : X("", !0), J(f.$slots, "coach-mark-content")], 6));
+    return () => t("div", {
+      class: ["krds-coach-mark", e.coachMarkClass],
+      style: e.style
+    }, [h(), r["coach-mark-content"]?.()]);
   }
-}), Ra = Aa, Pa = Ra, Ha = ["disabled"], qa = ["aria-hidden"], Oa = { class: "sr-only" }, Na = /* @__PURE__ */ B({
-  __name: "KrdsTooltip",
+}), sa = na, ra = A({
+  name: "KrdsTooltip",
   props: {
-    type: { default: "default" },
-    tooltipContent: {},
-    vertical: { type: Boolean },
-    box: { type: Boolean },
+    type: {
+      type: String,
+      default: "default"
+    },
+    tooltipContent: {
+      type: String,
+      required: !0
+    },
+    vertical: {
+      type: Boolean,
+      default: !1
+    },
+    box: {
+      type: Boolean,
+      default: !1
+    },
     disabled: {
       type: Boolean,
       default: !1
     },
-    class: {},
-    style: {},
-    id: {}
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
   },
-  setup(e) {
-    const a = e, n = L(null), l = L(null), s = L(!1), r = L({}), o = `tooltip-popover-${ae()}`, v = L(!1), f = k(() => {
-      const h = ["krds-btn", "krds-tooltip"];
-      return a.type === "default" ? h.push("small", "text") : a.type === "icon" ? h.push("icon") : a.type === "button" && h.push(""), !a.box && a.vertical && h.push("tooltip-vertical"), a.box && !a.vertical && h.push("tooltip-box"), h.join(" ");
-    }), b = k(() => {
-      const h = [];
-      return a.box && h.push("tooltip-box"), a.vertical && h.push("tooltip-vertical"), s.value && h.push("active"), h;
-    }), g = k(() => n.value?.querySelector("button")?.textContent?.trim() || ""), _ = () => window.innerWidth <= 768, S = () => {
-      if (!n.value || !l.value) return;
-      const h = n.value.querySelector("button");
-      if (!h) return;
-      const m = 12, { clientHeight: w, clientWidth: C } = l.value, { top: x, left: $, right: y, height: K, width: F } = h.getBoundingClientRect(), P = window.innerWidth / 2, A = window.innerHeight / 2;
-      let j, O;
-      const G = [];
-      v.value || a.box || a.vertical ? (x + K > A ? (j = x - w - m, G.push("top")) : (j = x + K + m, G.push("bottom")), $ + F > P ? (O = y - C, G.push("right"), window.innerWidth - ($ + F) > C / 2 && (O = $ + (F - C) / 2, G.splice(G.indexOf("right"), 1))) : (O = $ + (F - C) / 2, O < 0 && (O = $, G.push("left")))) : (j = x + (K - w) / 2, $ + F > P ? (O = $ - C - m, G.push("right")) : O = y + m);
+  setup(e, { slots: a }) {
+    const r = B(null), l = B(null), n = B(!1), s = B({}), u = `tooltip-popover-${de()}`, h = B(!1), f = b(() => {
+      const y = ["krds-btn", "krds-tooltip"];
+      return e.type === "default" ? y.push("small", "text") : e.type === "icon" ? y.push("icon") : e.type === "button" && y.push(""), !e.box && e.vertical && y.push("tooltip-vertical"), e.box && !e.vertical && y.push("tooltip-box"), y.join(" ");
+    }), w = b(() => {
+      const y = [];
+      return e.box && y.push("tooltip-box"), e.vertical && y.push("tooltip-vertical"), n.value && y.push("active"), y;
+    }), m = b(() => r.value?.querySelector("button")?.textContent?.trim() || ""), T = () => window.innerWidth <= 768, S = () => {
+      if (!r.value || !l.value) return;
+      const y = r.value.querySelector("button");
+      if (!y) return;
+      const $ = 12, { clientHeight: C, clientWidth: E } = l.value, { top: D, left: _, right: v, height: M, width: I } = y.getBoundingClientRect(), N = window.innerWidth / 2, H = window.innerHeight / 2;
+      let G, j;
+      const X = [];
+      h.value || e.box || e.vertical ? (D + M > H ? (G = D - C - $, X.push("top")) : (G = D + M + $, X.push("bottom")), _ + I > N ? (j = v - E, X.push("right"), window.innerWidth - (_ + I) > E / 2 && (j = _ + (I - E) / 2, X.splice(X.indexOf("right"), 1))) : (j = _ + (I - E) / 2, j < 0 && (j = _, X.push("left")))) : (G = D + (M - C) / 2, _ + I > N ? (j = _ - E - $, X.push("right")) : j = v + $);
       const le = window.innerWidth <= 420;
-      r.value = {
-        top: `${j}px`,
-        left: le ? "50%" : `${O}px`,
+      s.value = {
+        top: `${G}px`,
+        left: le ? "50%" : `${j}px`,
         transform: le ? "translateX(-50%)" : "none"
-      }, l.value && (l.value.className = `krds-tooltip-popover ${G.join(" ")} ${b.value.join(" ")}`);
-    }, V = async () => {
-      a.disabled || !a.tooltipContent || (s.value = !0, await Ke(), S());
-    }, d = () => {
-      s.value = !1, r.value = {};
-    }, i = (h) => {
-      (h.key === "Escape" || h.key === "Esc") && s.value && d();
+      }, l.value && (l.value.className = `krds-tooltip-popover ${X.join(" ")} ${w.value.join(" ")}`);
+    }, x = async () => {
+      e.disabled || !e.tooltipContent || (n.value = !0, await ce(), S());
     }, c = () => {
-      v.value = _(), s.value && d();
-    }, u = () => {
-      s.value && d();
+      n.value = !1, s.value = {};
+    }, o = (y) => {
+      (y.key === "Escape" || y.key === "Esc") && n.value && c();
+    }, i = () => {
+      h.value = T(), n.value && c();
+    }, p = () => {
+      n.value && c();
     };
-    return te(() => {
-      v.value = _(), document.addEventListener("keydown", i), window.addEventListener("scroll", u), window.addEventListener("resize", c);
-    }), Z(() => {
-      document.removeEventListener("keydown", i), window.removeEventListener("scroll", u), window.removeEventListener("resize", c);
-    }), (h, m) => (D(), T("div", {
-      ref_key: "containerRef",
-      ref: n
-    }, [p("button", {
+    return ie(() => {
+      h.value = T(), document.addEventListener("keydown", o), window.addEventListener("scroll", p), window.addEventListener("resize", i);
+    }), re(() => {
+      document.removeEventListener("keydown", o), window.removeEventListener("scroll", p), window.removeEventListener("resize", i);
+    }), () => t("div", { ref: r }, [t("button", {
       type: "button",
-      class: R(f.value),
+      class: f.value,
       disabled: e.disabled,
-      "aria-labelledby": o,
-      onMouseover: V,
-      onMouseout: d,
-      onFocusin: V,
-      onFocusout: d
-    }, [J(h.$slots, "default")], 42, Ha), ee(p("div", {
-      id: o,
-      ref_key: "popoverRef",
+      "aria-labelledby": u,
+      onMouseover: x,
+      onMouseout: c,
+      onFocusin: x,
+      onFocusout: c
+    }, a.default?.()), ve(t("div", {
+      id: u,
       ref: l,
-      class: R(["krds-tooltip-popover", b.value]),
-      style: ne(r.value),
-      "aria-hidden": !s.value,
+      class: ["krds-tooltip-popover", w.value],
+      style: s.value,
+      "aria-hidden": !n.value,
       role: "tooltip"
-    }, [p("span", Oa, M(g.value), 1), N(" " + M(e.tooltipContent), 1)], 14, qa), [[se, s.value]])], 512));
+    }, [
+      t("span", { class: "sr-only" }, m.value),
+      " ",
+      e.tooltipContent
+    ]), [[pe, n.value]])]);
   }
-}), ja = Na, Wa = ja, Ga = ["aria-expanded"], Ya = { class: "drop-in" }, Ua = {
-  key: 0,
-  class: "drop-top"
-}, Xa = {
-  key: 1,
-  class: "drop-list"
-}, Ja = [
-  "lang",
-  "aria-selected",
-  "onClick"
-], Qa = { class: "sr-only" }, Za = {
-  key: 2,
-  class: "drop-list"
-}, el = ["href", "lang"], tl = /* @__PURE__ */ B({
-  __name: "KrdsLanguageSwitcher",
+}), ia = ra, oa = A({
+  name: "KrdsLanguageSwitcher",
   props: {
-    languageList: {},
-    modelValue: { default: "" },
-    type: { default: "default" },
-    dropPosition: { default: "center" },
-    class: {},
-    style: {},
-    id: {}
+    languageList: {
+      type: Array,
+      required: !0
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "default"
+    },
+    dropPosition: {
+      type: String,
+      default: "center"
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [String, Object],
+      default: void 0
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: a }) {
-    const n = e, l = a, s = L(!1), r = L(), o = L(), v = () => {
-      s.value = !s.value, s.value && r.value && g();
-    }, f = () => {
-      s.value = !1;
-    }, b = (i) => {
-      l("update:modelValue", i), f(), l("close"), o.value?.focus();
-    }, g = () => {
-      if (!r.value) return;
-      const i = r.value.querySelector(".drop-menu");
+  setup(e, { emit: a, slots: r }) {
+    const l = B(!1), n = B(), s = B(), u = () => {
+      l.value = !l.value, l.value && n.value && w();
+    }, h = () => {
+      l.value = !1;
+    }, f = (i) => {
+      a("update:modelValue", i), h(), a("close"), s.value?.focus();
+    }, w = () => {
+      if (!n.value) return;
+      const i = n.value.querySelector(".drop-menu");
       if (!i) return;
-      const c = i.getBoundingClientRect(), u = window.innerWidth;
-      r.value.classList.remove("drop-left", "drop-right"), c.left < 0 ? r.value.classList.add("drop-left") : u < c.left + c.width && r.value.classList.add("drop-right");
-    }, _ = (i) => {
-      i.key === "Escape" && (f(), o.value?.focus());
+      const p = i.getBoundingClientRect(), y = window.innerWidth;
+      n.value.classList.remove("drop-left", "drop-right"), p.left < 0 ? n.value.classList.add("drop-left") : y < p.left + p.width && n.value.classList.add("drop-right");
+    }, m = (i) => {
+      i.key === "Escape" && (h(), s.value?.focus());
+    }, T = (i) => {
+      n.value?.contains(i.target) || h();
     }, S = (i) => {
-      r.value?.contains(i.target) || f();
-    }, V = (i) => {
-      r.value?.contains(i.relatedTarget) || f();
-    }, d = (i) => {
-      if (!r.value) return;
-      r.value.querySelectorAll(".drop-list .item-link").forEach((u) => {
-        u.style.position = "relative", u.style.zIndex = "0";
+      n.value?.contains(i.relatedTarget) || h();
+    }, x = (i) => {
+      if (!n.value) return;
+      n.value.querySelectorAll(".drop-list .item-link").forEach((y) => {
+        y.style.position = "relative", y.style.zIndex = "0";
       });
-      const c = i.target;
-      c.style.zIndex = "1";
+      const p = i.target;
+      p.style.zIndex = "1";
     };
-    return re(s, (i) => {
-      i ? (document.addEventListener("keydown", _), document.addEventListener("click", S)) : (document.removeEventListener("keydown", _), document.removeEventListener("click", S));
-    }), Z(() => {
-      document.removeEventListener("keydown", _), document.removeEventListener("click", S);
-    }), (i, c) => (D(), T("div", {
-      ref_key: "dropdownRef",
-      ref: r,
-      class: R(["krds-drop-wrap krds-language", {
-        active: s.value,
-        "drop-left": n.dropPosition === "left",
-        "drop-right": n.dropPosition === "right"
-      }]),
-      onFocusout: V
-    }, [p("button", {
-      ref_key: "buttonRef",
-      ref: o,
-      type: "button",
-      class: R(["krds-btn small text drop-btn", { active: s.value }]),
-      "aria-expanded": s.value,
-      onClick: v
-    }, [
-      c[0] || (c[0] = p("i", { class: "svg-icon ico-global" }, null, -1)),
-      J(i.$slots, "default"),
-      c[1] || (c[1] = p("i", { class: "svg-icon ico-toggle" }, null, -1))
-    ], 10, Ga), p("div", {
-      class: "drop-menu",
-      style: ne({ display: s.value ? "block" : "none" })
-    }, [p("div", Ya, [i.$slots["prev-item"] ? (D(), T("div", Ua, [J(i.$slots, "prev-item")])) : X("", !0), n.type === "default" ? (D(), T("ul", Xa, [(D(!0), T(W, null, Y(e.languageList, (u) => (D(), T("li", { key: u.code }, [p("a", {
+    se(l, (i) => {
+      i ? (document.addEventListener("keydown", m), document.addEventListener("click", T)) : (document.removeEventListener("keydown", m), document.removeEventListener("click", T));
+    }), re(() => {
+      document.removeEventListener("keydown", m), document.removeEventListener("click", T);
+    });
+    const c = () => t("ul", { class: "drop-list" }, e.languageList.map((i) => t("li", { key: i.code }, [t("a", {
       href: "#",
-      class: R(["item-link", { active: n.modelValue === u.code }]),
-      lang: u.code,
-      "aria-selected": n.modelValue === u.code,
-      onClick: ce((h) => b(u.code), ["prevent"]),
-      onFocus: d
-    }, [N(M(u.name) + " ", 1), p("span", Qa, M(n.modelValue === u.code ? "선택됨" : ""), 1)], 42, Ja)]))), 128))])) : n.type === "external" ? (D(), T("ul", Za, [(D(!0), T(W, null, Y(e.languageList, (u) => (D(), T("li", { key: u.code }, [p("a", {
-      href: u.url || "#",
+      class: ["item-link", { active: e.modelValue === i.code }],
+      lang: i.code,
+      "aria-selected": e.modelValue === i.code,
+      onClick: ge(() => f(i.code), ["prevent"]),
+      onFocus: x
+    }, [
+      i.name,
+      " ",
+      t("span", { class: "sr-only" }, e.modelValue === i.code ? "선택됨" : "")
+    ])]))), o = () => t("ul", { class: "drop-list" }, e.languageList.map((i) => t("li", { key: i.code }, [t("a", {
+      href: i.url || "#",
       class: "item-link",
-      lang: u.code,
+      lang: i.code,
       target: "_blank",
       title: "새 창 열림",
-      onFocus: d
-    }, [N(M(u.name) + " ", 1), c[2] || (c[2] = p("i", { class: "svg-icon ico-go" }, null, -1))], 40, el)]))), 128))])) : X("", !0)])], 4)], 34));
+      onFocus: x
+    }, [
+      i.name,
+      " ",
+      t("i", { class: "svg-icon ico-go" })
+    ])])));
+    return () => t("div", {
+      ref: n,
+      class: [
+        "krds-drop-wrap",
+        "krds-language",
+        {
+          active: l.value,
+          "drop-left": e.dropPosition === "left",
+          "drop-right": e.dropPosition === "right"
+        }
+      ],
+      onFocusout: S
+    }, [t("button", {
+      ref: s,
+      type: "button",
+      class: ["krds-btn small text drop-btn", { active: l.value }],
+      "aria-expanded": l.value,
+      onClick: u
+    }, [
+      t("i", { class: "svg-icon ico-global" }),
+      r.default?.(),
+      t("i", { class: "svg-icon ico-toggle" })
+    ]), t("div", {
+      class: "drop-menu",
+      style: { display: l.value ? "block" : "none" }
+    }, [t("div", { class: "drop-in" }, [r["prev-item"] ? t("div", { class: "drop-top" }, r["prev-item"]()) : null, e.type === "default" ? c() : e.type === "external" ? o() : null])])]);
   }
-}), al = tl, ll = al, sl = { class: "drop-in" }, nl = { class: "drop-list" }, rl = ["data-adjust-scale", "onClick"], il = { class: "drop-bottom" }, ol = /* @__PURE__ */ B({
-  __name: "KrdsResize",
+}), da = oa, ua = A({
+  name: "KrdsResize",
   emits: ["update:modelValue", "close"],
   setup(e, { emit: a }) {
-    const n = a, l = L(!1), s = L(), r = L(), o = L("md"), v = [
+    const r = B(!1), l = B(), n = B(), s = B("md"), u = [
       {
         key: "sm",
         label: "작게",
@@ -2256,69 +2362,71 @@ var Pt = B({
         label: "가장 크게",
         zoom: "1.5"
       }
-    ], f = () => {
-      l.value = !l.value, l.value && s.value && S();
-    }, b = () => {
-      l.value = !1;
-    }, g = (u) => {
-      b(), n("close"), r.value?.focus(), o.value = u.key, document.body.style.zoom = u?.zoom;
-    }, _ = () => {
-      const u = v.find((h) => h.key === "md");
-      u && g(u);
-    }, S = () => {
-      if (!s.value) return;
-      const u = s.value.querySelector(".drop-menu");
-      if (!u) return;
-      const h = u.getBoundingClientRect(), m = window.innerWidth;
-      s.value.classList.remove("drop-left", "drop-right"), h.left < 0 ? s.value.classList.add("drop-left") : m < h.left + h.width && s.value.classList.add("drop-right");
-    }, V = (u) => {
-      u.key === "Escape" && (b(), r.value?.focus());
-    }, d = (u) => {
-      s.value?.contains(u.target) || b();
-    }, i = (u) => {
-      s.value?.contains(u.relatedTarget) || b();
-    }, c = (u) => {
-      if (!s.value) return;
-      s.value.querySelectorAll(".drop-list .item-link").forEach((m) => {
-        m.style.position = "relative", m.style.zIndex = "0";
+    ], h = () => {
+      r.value = !r.value, r.value && l.value && T();
+    }, f = () => {
+      r.value = !1;
+    }, w = (i) => {
+      f(), a("close"), n.value?.focus(), s.value = i.key, document.body.style.zoom = i?.zoom;
+    }, m = () => {
+      const i = u.find((p) => p.key === "md");
+      i && w(i);
+    }, T = () => {
+      if (!l.value) return;
+      const i = l.value.querySelector(".drop-menu");
+      if (!i) return;
+      const p = i.getBoundingClientRect(), y = window.innerWidth;
+      l.value.classList.remove("drop-left", "drop-right"), p.left < 0 ? l.value.classList.add("drop-left") : y < p.left + p.width && l.value.classList.add("drop-right");
+    }, S = (i) => {
+      i.key === "Escape" && (f(), n.value?.focus());
+    }, x = (i) => {
+      l.value?.contains(i.target) || f();
+    }, c = (i) => {
+      l.value?.contains(i.relatedTarget) || f();
+    }, o = (i) => {
+      if (!l.value) return;
+      l.value.querySelectorAll(".drop-list .item-link").forEach((y) => {
+        y.style.position = "relative", y.style.zIndex = "0";
       });
-      const h = u.target;
-      h.style.zIndex = "1";
+      const p = i.target;
+      p.style.zIndex = "1";
     };
-    return re(l, (u) => {
-      u ? (document.addEventListener("keydown", V), document.addEventListener("click", d)) : (document.removeEventListener("keydown", V), document.removeEventListener("click", d));
-    }), Z(() => {
-      document.removeEventListener("keydown", V), document.removeEventListener("click", d);
-    }), (u, h) => (D(), T("div", {
-      ref_key: "dropdownRef",
-      ref: s,
+    return se(r, (i) => {
+      i ? (document.addEventListener("keydown", S), document.addEventListener("click", x)) : (document.removeEventListener("keydown", S), document.removeEventListener("click", x));
+    }), re(() => {
+      document.removeEventListener("keydown", S), document.removeEventListener("click", x);
+    }), () => t("div", {
+      ref: l,
       class: "krds-drop-wrap krds-resize",
       "data-adjust": "scale",
-      onFocusout: i
-    }, [p("button", {
-      ref_key: "buttonRef",
-      ref: r,
+      onFocusout: c
+    }, [t("button", {
+      ref: n,
       type: "button",
       class: "krds-btn small text drop-btn",
-      onClick: f
-    }, [...h[0] || (h[0] = [N(" 화면크기 ", -1), p("i", { class: "svg-icon ico-toggle" }, null, -1)])], 512), p("div", {
+      onClick: h
+    }, ["화면크기 ", t("i", { class: "svg-icon ico-toggle" })]), t("div", {
       class: "drop-menu",
-      style: ne({ display: l.value ? "block" : "none" })
-    }, [p("div", sl, [p("ul", nl, [(D(), T(W, null, Y(v, (m) => p("li", { key: m.key }, [p("button", {
+      style: { display: r.value ? "block" : "none" }
+    }, [t("div", { class: "drop-in" }, [t("ul", { class: "drop-list" }, u.map((i) => t("li", { key: i.key }, [t("button", {
       type: "button",
-      class: R(["item-link", [m.key, m.key === o.value ? "active" : ""]]),
-      "data-adjust-scale": m.key,
-      onClick: ce((w) => g(m), ["prevent"]),
-      onFocus: c
-    }, M(m.label), 43, rl)])), 64))]), p("div", il, [p("button", {
+      class: [
+        "item-link",
+        i.key,
+        i.key === s.value ? "active" : ""
+      ],
+      "data-adjust-scale": i.key,
+      onClick: ge(() => w(i), ["prevent"]),
+      onFocus: o
+    }, i.label)]))), t("div", { class: "drop-bottom" }, [t("button", {
       type: "button",
       class: "krds-btn medium text",
       "data-adjust-scale": "md",
-      onClick: ce(_, ["prevent"]),
-      onFocus: c
-    }, [...h[1] || (h[1] = [p("i", { class: "svg-icon ico-reset" }, null, -1), N(" 초기화 ", -1)])], 32)])])], 4)], 544));
+      onClick: ge(m, ["prevent"]),
+      onFocus: o
+    }, [t("i", { class: "svg-icon ico-reset" }), " 초기화"])])])])]);
   }
-}), dl = ol, ul = dl, cl = B({
+}), ca = ua, fa = A({
   name: "KrdsModal",
   props: {
     modelValue: {
@@ -2352,56 +2460,56 @@ var Pt = B({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { slots: a, emit: n }) {
-    const l = Ie()?.uid, s = k(() => e.modalId ?? `krds-modal-${l}`), r = k({
+  setup(e, { slots: a, emit: r }) {
+    const l = xe()?.uid, n = b(() => e.modalId ?? `krds-modal-${l}`), s = b({
       get: () => e.modelValue,
-      set: (c) => n("update:modelValue", c)
-    }), o = k(() => `tit_${s.value}`), v = k(() => ({
+      set: (i) => r("update:modelValue", i)
+    }), u = b(() => `tit_${n.value}`), h = b(() => ({
       small: "modal-sm",
       medium: "modal-md",
       large: "modal-lg"
     })[e.size]), f = () => {
-      r.value = !1;
+      s.value = !1;
     };
-    let b = "", g = null;
-    const _ = L(null), S = (c) => Array.from(c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((u) => !u.hasAttribute("disabled") && u.getAttribute("tabindex") !== "-1"), V = (c) => {
-      if (!_.value || c.key !== "Tab") return;
-      const u = S(_.value);
-      if (u.length === 0) {
-        c.preventDefault();
+    let w = "", m = null;
+    const T = B(null), S = (i) => Array.from(i.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((p) => !p.hasAttribute("disabled") && p.getAttribute("tabindex") !== "-1"), x = (i) => {
+      if (!T.value || i.key !== "Tab") return;
+      const p = S(T.value);
+      if (p.length === 0) {
+        i.preventDefault();
         return;
       }
-      const h = u[0], m = u[u.length - 1];
-      c.shiftKey && document.activeElement === h ? (c.preventDefault(), m.focus()) : !c.shiftKey && document.activeElement === m && (c.preventDefault(), h.focus());
-    }, d = (c) => {
-      c.key === "Escape" && !e.persistent && f();
-    }, i = () => {
-      document.body.style.overflow = b, document.removeEventListener("keydown", V), document.removeEventListener("keydown", d), g && (g.focus(), g = null), _.value = null;
+      const y = p[0], $ = p[p.length - 1];
+      i.shiftKey && document.activeElement === y ? (i.preventDefault(), $.focus()) : !i.shiftKey && document.activeElement === $ && (i.preventDefault(), y.focus());
+    }, c = (i) => {
+      i.key === "Escape" && !e.persistent && f();
+    }, o = () => {
+      document.body.style.overflow = w, document.removeEventListener("keydown", x), document.removeEventListener("keydown", c), m && (m.focus(), m = null), T.value = null;
     };
-    return re(() => e.modelValue, async (c) => {
-      if (c) {
-        b = document.body.style.overflow, document.body.style.overflow = "hidden", g = document.activeElement, await Ke();
-        const u = document.getElementById(s.value);
-        if (u) {
-          _.value = u;
-          const h = u.querySelector(".modal-conts");
-          h && (h.setAttribute("tabindex", "-1"), h.focus()), document.addEventListener("keydown", V), document.addEventListener("keydown", d);
+    return se(() => e.modelValue, async (i) => {
+      if (i) {
+        w = document.body.style.overflow, document.body.style.overflow = "hidden", m = document.activeElement, await ce();
+        const p = document.getElementById(n.value);
+        if (p) {
+          T.value = p;
+          const y = p.querySelector(".modal-conts");
+          y && (y.setAttribute("tabindex", "-1"), y.focus()), document.addEventListener("keydown", x), document.addEventListener("keydown", c);
         }
-      } else i();
+      } else o();
     }, { immediate: !0 }), fe(() => {
-      e.modelValue && i();
+      e.modelValue && o();
     }), () => {
-      if (!r.value) return null;
-      const c = {
-        id: s.value,
+      if (!s.value) return null;
+      const i = {
+        id: n.value,
         class: "krds-modal fade in shown",
         role: "dialog",
         "aria-modal": !0,
-        "aria-labelledby": o.value
+        "aria-labelledby": u.value
       };
-      return e.full ? c["data-type"] = "full" : e.bottomSheet && (c["data-type"] = "bottom-sheet"), t(ze, { to: "body" }, t("section", c, [t("div", { class: `modal-dialog ${v.value}` }, [t("div", { class: "modal-content" }, [
+      return e.full ? i["data-type"] = "full" : e.bottomSheet && (i["data-type"] = "bottom-sheet"), t(Ce, { to: "body" }, t("section", i, [t("div", { class: `modal-dialog ${h.value}` }, [t("div", { class: "modal-content" }, [
         a.title ? t("div", { class: "modal-header" }, [t("h2", {
-          id: o.value,
+          id: u.value,
           class: "modal-title"
         }, a.title())]) : null,
         t("div", { class: "modal-conts" }, [t("div", { class: "conts-area" }, a.default?.())]),
@@ -2417,7 +2525,7 @@ var Pt = B({
       })]));
     };
   }
-}), fl = cl, vl = B({
+}), va = fa, pa = A({
   name: "KrdsAccordionGroup",
   props: {
     typeLine: {
@@ -2430,46 +2538,55 @@ var Pt = B({
     }
   },
   setup(e, { slots: a }) {
-    const n = k(() => {
+    const r = b(() => {
       const l = ["krds-accordion"];
       return e.typeLine && l.push("type-line"), e.class && l.push(e.class), l;
     });
-    return () => t("div", { class: n.value }, a.default?.());
+    return () => t("div", { class: r.value }, a.default?.());
   }
-}), pl = vl, hl = ["id"], ml = { class: "accordion-header" }, yl = [
-  "id",
-  "aria-expanded",
-  "aria-controls"
-], gl = ["id", "aria-labelledby"], bl = { class: "accordion-body" }, kl = /* @__PURE__ */ B({
-  __name: "KrdsAccordionItem",
+}), ga = pa, ha = A({
+  name: "KrdsAccordionItem",
   props: {
-    id: {},
-    openItem: {},
-    title: {},
-    content: {}
+    id: {
+      type: String,
+      required: !0
+    },
+    openItem: {
+      type: String,
+      default: void 0
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    content: {
+      type: String,
+      default: void 0
+    }
   },
   emits: ["toggle"],
-  setup(e, { emit: a }) {
-    const n = e, l = a, s = k(() => n.openItem === n.id), r = () => {
-      l("toggle", n.id);
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => e.openItem === e.id), n = () => {
+      a("toggle", e.id);
     };
-    return (o, v) => (D(), T("div", {
+    return () => t("div", {
       id: e.id,
-      class: R(["accordion-item", { active: s.value }])
-    }, [p("h5", ml, [p("button", {
+      class: ["accordion-item", { active: l.value }]
+    }, [t("h5", { class: "accordion-header" }, [t("button", {
       id: `accordion-header-${e.id}`,
       type: "button",
-      class: "btn-accordion",
-      "aria-expanded": s.value,
+      class: ["btn-accordion", { active: l.value }],
+      "aria-expanded": l.value,
       "aria-controls": `accordion-collapse-${e.id}`,
-      onClick: v[0] || (v[0] = (f) => r())
-    }, [J(o.$slots, "title", {}, () => [N(M(e.title), 1)])], 8, yl)]), p("div", {
+      onClick: n
+    }, r.title?.() ?? e.title)]), t("div", {
       id: `accordion-collapse-${e.id}`,
       class: "accordion-collapse collapse",
+      role: "region",
       "aria-labelledby": `accordion-header-${e.id}`
-    }, [p("div", bl, [J(o.$slots, "content", {}, () => [N(M(e.content), 1)])])], 8, gl)], 10, hl));
+    }, [t("div", { class: "accordion-body" }, r.content?.() ?? e.content)])]);
   }
-}), Sl = kl, Kl = Sl, wl = B({
+}), ya = ha, ma = A({
   name: "KrdsTts",
   props: {
     text: {
@@ -2504,14 +2621,14 @@ var Pt = B({
     "error"
   ],
   setup(e, { emit: a }) {
-    const n = L(!1);
+    const r = B(!1);
     let l = null;
-    const s = () => {
-      typeof window < "u" && window.speechSynthesis && window.speechSynthesis.cancel(), n.value = !1, l = null;
-    }, r = () => {
+    const n = () => {
+      typeof window < "u" && window.speechSynthesis && window.speechSynthesis.cancel(), r.value = !1, l = null;
+    }, s = () => {
       if (!e.disabled) {
-        if (n.value) {
-          s(), a("pause");
+        if (r.value) {
+          n(), a("pause");
           return;
         }
         if (typeof window > "u" || !window.speechSynthesis) {
@@ -2519,33 +2636,33 @@ var Pt = B({
           return;
         }
         window.speechSynthesis.cancel(), l = new SpeechSynthesisUtterance(e.text), l.lang = "ko-KR", l.onstart = () => {
-          n.value = !0;
+          r.value = !0;
         }, l.onend = () => {
-          n.value = !1, l = null, a("end");
+          r.value = !1, l = null, a("end");
         }, l.onerror = (f) => {
-          n.value = !1, l = null, f.error !== "canceled" && a("error", new Error(f.error));
+          r.value = !1, l = null, f.error !== "canceled" && a("error", new Error(f.error));
         }, window.speechSynthesis.speak(l), a("play", e.text);
       }
-    }, o = k(() => {
+    }, u = b(() => {
       const f = ["krds-tts"];
-      return e.size && f.push(e.size), n.value ? f.push("pause") : e.icon === "play" && f.push("play"), e.class && f.push(e.class), f;
-    }), v = k(() => n.value ? "ico-stop" : e.icon === "play" ? "ico-play" : "ico-volume");
+      return e.size && f.push(e.size), r.value ? f.push("pause") : e.icon === "play" && f.push("play"), e.class && f.push(e.class), f;
+    }), h = b(() => r.value ? "ico-stop" : e.icon === "play" ? "ico-play" : "ico-volume");
     return fe(() => {
-      s();
+      n();
     }), () => {
       const f = [t("span", {
         class: "krds-tts-icon",
         "aria-hidden": "true"
-      }, [t("i", { class: `svg-icon ${v.value}` })])];
+      }, [t("i", { class: `svg-icon ${h.value}` })])];
       return e.label && f.push(t("span", { class: "krds-tts-text" }, e.label)), t("button", {
         type: "button",
-        class: o.value,
+        class: u.value,
         disabled: e.disabled || void 0,
-        onClick: r
+        onClick: s
       }, f);
     };
   }
-}), _l = wl, Cl = B({
+}), ba = ma, ka = A({
   name: "KrdsTable",
   props: {
     caption: {
@@ -2567,65 +2684,72 @@ var Pt = B({
   },
   emits: ["row-click"],
   slots: Object,
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const d = ["tbl"];
-      return e.class && d.push(e.class), d;
-    }), s = k(() => ["krds-table-wrap"]), r = (d) => d.headerStyle || void 0, o = (d) => {
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const c = ["tbl"];
+      return e.class && c.push(e.class), c;
+    }), n = b(() => ["krds-table-wrap"]), s = (c) => c.headerStyle || void 0, u = (c) => {
+      const o = [];
+      return c.align && o.push(`text-${c.align}`), c.headerClasses && o.push(c.headerClasses), o.length > 0 ? o : void 0;
+    }, h = (c, o) => {
+      if (o.style)
+        return typeof o.style == "function" ? o.style(c) : o.style;
+    }, f = (c, o) => {
       const i = [];
-      return d.align && i.push(`text-${d.align}`), d.headerClasses && i.push(d.headerClasses), i.length > 0 ? i : void 0;
-    }, v = (d, i) => {
-      if (i.style)
-        return typeof i.style == "function" ? i.style(d) : i.style;
-    }, f = (d, i) => {
-      const c = [];
-      if (i.align && c.push(`text-${i.align}`), i.classes) {
-        const u = typeof i.classes == "function" ? i.classes(d) : i.classes;
-        c.push(u);
+      if (o.align && i.push(`text-${o.align}`), o.classes) {
+        const p = typeof o.classes == "function" ? o.classes(c) : o.classes;
+        i.push(p);
       }
-      return c.length > 0 ? c : void 0;
-    }, b = () => !e.columns.length || !e.columns.some((d) => d.headerStyle && d.headerStyle.includes("width")) ? null : t("colgroup", e.columns.map((d) => {
-      if (!d.headerStyle) return t("col");
-      const i = d.headerStyle.match(/width\s*:\s*([^;]+)/i);
-      return t("col", { style: i ? { width: i[1].trim() } : void 0 });
-    })), g = () => e.columns.length ? t("thead", [t("tr", e.columns.map((d) => {
-      const i = r(d);
-      return t("th", {
-        scope: "col",
-        class: o(d),
-        style: i
-      }, d.label);
-    }))]) : null, _ = (d, i) => typeof i.field == "function" ? i.field(d) : d[i.field], S = () => e.rows.length ? t("tbody", e.rows.map((d, i) => t("tr", { onClick: () => V(d, i) }, e.columns.map((c, u) => {
-      const h = _(d, c), m = typeof h == "function" ? h() : h, w = v(d, c), C = f(d, c);
-      return t(u === 0 ? "th" : "td", {
-        scope: u === 0 ? "row" : void 0,
-        class: C,
-        style: w
-      }, m);
-    })))) : t("tbody", [t("tr", [t("td", {
-      colspan: e.columns.length || 1,
-      class: "text-center"
-    }, n["no-data"] ? n["no-data"]() : "데이터가 없습니다.")])]), V = (d, i) => {
-      a("row-click", d, i);
+      return i.length > 0 ? i : void 0;
+    }, w = () => !e.columns.length || !e.columns.some((c) => c.headerStyle && c.headerStyle.includes("width")) ? null : t("colgroup", e.columns.map((c) => {
+      if (!c.headerStyle) return t("col");
+      const o = c.headerStyle.match(/width\s*:\s*([^;]+)/i);
+      return t("col", { style: o ? { width: o[1].trim() } : void 0 });
+    })), m = () => {
+      if (!e.columns.length) return null;
+      const c = e.columns.map((o) => {
+        const i = s(o), p = u(o);
+        return t("th", {
+          scope: "col",
+          class: p,
+          style: i
+        }, o.label);
+      });
+      return t("thead", [t("tr", c)]);
+    }, T = (c, o) => typeof o.field == "function" ? o.field(c) : c[o.field], S = () => {
+      if (!e.rows.length) return t("tbody", [t("tr", [t("td", {
+        colspan: e.columns.length || 1,
+        class: "text-center"
+      }, r["no-data"] ? r["no-data"]() : "데이터가 없습니다.")])]);
+      const c = e.rows.map((o, i) => {
+        const p = e.columns.map((y, $) => {
+          const C = T(o, y), E = typeof C == "function" ? C() : C, D = h(o, y), _ = f(o, y);
+          return t($ === 0 ? "th" : "td", {
+            scope: $ === 0 ? "row" : void 0,
+            class: _,
+            style: D
+          }, E);
+        });
+        return t("tr", { onClick: () => x(o, i) }, p);
+      });
+      return t("tbody", c);
+    }, x = (c, o) => {
+      a("row-click", c, o);
     };
-    return () => t("div", { class: s.value }, [t("table", { class: l.value }, [
+    return () => t("div", { class: n.value }, [t("table", { class: l.value }, [
       e.caption && t("caption", e.caption),
-      b(),
-      g(),
+      w(),
+      m(),
       S()
     ])]);
   }
-}), $l = Cl, xl = B({
+}), Sa = ka, wa = A({
   name: "KrdsHeader",
   props: {
     id: {
       type: String,
       default: "krds-header"
     },
-    mobileNavId: {
-      type: String,
-      default: "mobile-nav"
-    },
     class: {
       type: String,
       default: void 0
@@ -2633,28 +2757,25 @@ var Pt = B({
   },
   slots: Object,
   setup(e, { slots: a }) {
-    const n = k(() => {
+    const r = b(() => {
       const l = [];
       return e.class && l.push(e.class), l;
     });
     return () => {
       const l = [];
       if (a.utility || a.branding) {
-        const r = [];
-        a.utility && r.push(t("div", { class: "header-utility" }, a.utility())), a.branding && r.push(t("div", { class: "header-branding" }, a.branding())), l.push(t("div", { class: "header-container" }, [t("div", { class: "inner" }, r)]));
+        const s = [];
+        a.utility && s.push(t("div", { class: "header-utility" }, a.utility())), a.branding && s.push(t("div", { class: "header-branding" }, a.branding())), l.push(t("div", { class: "header-container" }, [t("div", { class: "inner" }, s)]));
       }
-      a.navigation && l.push(t("nav", { class: "krds-main-menu" }, [t("div", { class: "inner" }, a.navigation())]));
-      const s = [t("div", { class: "header-in" }, l)];
-      return a.mobileNavigation && s.push(t("div", {
-        id: e.mobileNavId,
-        class: "krds-main-menu-mobile"
-      }, a.mobileNavigation())), t("header", {
+      a.navigation && l.push(...a.navigation());
+      const n = [t("div", { class: "header-in" }, l)];
+      return a.mobileNavigation && n.push(...a.mobileNavigation()), t("header", {
         id: e.id,
-        class: n.value
-      }, s);
+        class: r.value
+      }, n);
     };
   }
-}), Bl = xl, Ll = B({
+}), Ka = wa, Ca = A({
   name: "KrdsFooter",
   props: {
     id: {
@@ -2667,21 +2788,21 @@ var Pt = B({
     }
   },
   setup(e, { slots: a }) {
-    const n = k(() => {
-      const v = [];
-      return e.class && v.push(e.class), v;
-    }), l = () => a.top ? t("div", { class: "foot-quick" }, [t("div", { class: "inner" }, a.top())]) : null, s = () => a.logo ? t("div", { class: "f-logo" }, a.logo()) : null, r = () => a.content ? t("div", { class: "f-cnt" }, a.content()) : null, o = () => a.bottom ? t("div", { class: "f-btm" }, a.bottom()) : null;
+    const r = b(() => {
+      const h = [];
+      return e.class && h.push(e.class), h;
+    }), l = () => a.top ? t("div", { class: "foot-quick" }, [t("div", { class: "inner" }, a.top())]) : null, n = () => a.logo ? t("div", { class: "f-logo" }, a.logo()) : null, s = () => a.content ? t("div", { class: "f-cnt" }, a.content()) : null, u = () => a.bottom ? t("div", { class: "f-btm" }, a.bottom()) : null;
     return () => {
-      const v = l(), f = s(), b = r(), g = o(), _ = [];
-      f && _.push(f), b && _.push(b), g && _.push(g);
+      const h = l(), f = n(), w = s(), m = u(), T = [];
+      f && T.push(f), w && T.push(w), m && T.push(m);
       const S = [];
-      return v && S.push(v), _.length > 0 && S.push(t("div", { class: "inner" }, _)), t("footer", {
+      return h && S.push(h), T.length > 0 && S.push(t("div", { class: "inner" }, T)), t("footer", {
         id: e.id,
-        class: n.value
+        class: r.value
       }, S);
     };
   }
-}), Dl = Ll, Tl = B({
+}), xa = Ca, $a = A({
   name: "KrdsDisclosure",
   props: {
     title: {
@@ -2694,27 +2815,27 @@ var Pt = B({
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: a, slots: n }) {
-    const l = `disclosure-${ae()}`, s = k(() => e.modelValue), r = () => {
+  setup(e, { emit: a, slots: r }) {
+    const l = `disclosure-${de()}`, n = b(() => e.modelValue), s = () => {
       a("update:modelValue", !e.modelValue);
     };
     return () => t("div", { class: [
       "krds-disclosure",
       "conts-expand-area",
-      s.value && "active"
+      n.value && "active"
     ] }, [t("button", {
       type: "button",
       class: "btn-conts-expand",
-      onClick: r,
-      "aria-expanded": s.value,
+      onClick: s,
+      "aria-expanded": n.value,
       "aria-controls": l
     }, e.title), t("div", {
       id: l,
       class: "expand-wrap",
-      inert: !s.value
-    }, [t("div", { class: "expand-in" }, n.default?.())])]);
+      inert: !n.value
+    }, [t("div", { class: "expand-in" }, r.default?.())])]);
   }
-}), Vl = Tl, zl = B({
+}), La = $a, Da = A({
   name: "KrdsIdentifier",
   props: {
     class: {
@@ -2727,19 +2848,19 @@ var Pt = B({
     }
   },
   emits: ["click"],
-  setup(e, { emit: a, slots: n }) {
-    const l = k(() => {
-      const r = ["krds-identifier"];
-      return e.class && r.push(e.class), r;
-    }), s = (r) => {
-      a("click", r);
+  setup(e, { emit: a, slots: r }) {
+    const l = b(() => {
+      const s = ["krds-identifier"];
+      return e.class && s.push(e.class), s;
+    }), n = (s) => {
+      a("click", s);
     };
     return () => t("div", {
       class: l.value,
-      onClick: s
-    }, [t("span", { class: "logo" }, [t("span", { class: "sr-only" }, e.logoLabel)]), t("span", { class: "ban-txt" }, n.default?.())]);
+      onClick: n
+    }, [t("span", { class: "logo" }, [t("span", { class: "sr-only" }, e.logoLabel)]), t("span", { class: "ban-txt" }, r.default?.())]);
   }
-}), Il = zl, El = 50, Fl = B({
+}), Ba = Da, Ea = 50, Ta = A({
   name: "KrdsLayout",
   props: {
     id: {
@@ -2760,46 +2881,46 @@ var Pt = B({
     scroll: (e) => !0,
     "scroll-height": (e) => !0
   },
-  setup(e, { slots: a, emit: n }) {
-    const l = L(0), s = L(0), r = L(0), o = L(null), v = L(null), f = L(null), b = () => {
-      const d = s.value;
-      l.value = window.scrollY, s.value = document.body.scrollHeight, d !== s.value && d > 0 && n("scroll-height", s.value);
-    }, g = () => {
-      if (!v.value || !e.enableScrollDetection) return;
-      const d = document.querySelector("#container");
-      if (!d) return;
-      const i = d.offsetTop, c = window.scrollY, u = c > r.value, h = c < r.value;
-      c > i + El ? u ? (v.value.classList.add("scroll-down"), v.value.classList.remove("scroll-up"), o.value = "down") : h && (v.value.classList.add("scroll-up"), v.value.classList.remove("scroll-down"), o.value = "up") : (v.value.classList.remove("scroll-down", "scroll-up"), o.value = null), r.value = c;
-    }, _ = () => {
-      b(), g(), n("scroll", {
+  setup(e, { slots: a, emit: r }) {
+    const l = B(0), n = B(0), s = B(0), u = B(null), h = B(null), f = B(null), w = () => {
+      const c = n.value;
+      l.value = window.scrollY, n.value = document.body.scrollHeight, c !== n.value && c > 0 && r("scroll-height", n.value);
+    }, m = () => {
+      if (!h.value || !e.enableScrollDetection) return;
+      const c = document.querySelector("#container");
+      if (!c) return;
+      const o = c.offsetTop, i = window.scrollY, p = i > s.value, y = i < s.value;
+      i > o + Ea ? p ? (h.value.classList.add("scroll-down"), h.value.classList.remove("scroll-up"), u.value = "down") : y && (h.value.classList.add("scroll-up"), h.value.classList.remove("scroll-down"), u.value = "up") : (h.value.classList.remove("scroll-down", "scroll-up"), u.value = null), s.value = i;
+    }, T = () => {
+      w(), m(), r("scroll", {
         scrollY: l.value,
-        scrollHeight: s.value,
-        direction: o.value,
+        scrollHeight: n.value,
+        direction: u.value,
         timestamp: Date.now()
       });
-    }, S = (d) => {
-      for (const i of d) {
-        const { width: c, height: u } = i.contentRect;
-        n("resize", {
-          width: c,
-          height: u
+    }, S = (c) => {
+      for (const o of c) {
+        const { width: i, height: p } = o.contentRect;
+        r("resize", {
+          width: i,
+          height: p
         });
       }
-    }, V = k(() => {
-      const d = ["g-wrap"];
-      return e.class && d.push(e.class), d;
+    }, x = b(() => {
+      const c = ["g-wrap"];
+      return e.class && c.push(e.class), c;
     });
-    return te(() => {
-      e.enableScrollDetection && (b(), window.addEventListener("scroll", _, { passive: !0 })), v.value && typeof ResizeObserver < "u" && (f.value = new ResizeObserver(S), f.value.observe(v.value));
-    }), Z(() => {
-      e.enableScrollDetection && window.removeEventListener("scroll", _), f.value && (f.value.disconnect(), f.value = null);
+    return ie(() => {
+      e.enableScrollDetection && (w(), window.addEventListener("scroll", T, { passive: !0 })), h.value && typeof ResizeObserver < "u" && (f.value = new ResizeObserver(S), f.value.observe(h.value));
+    }), re(() => {
+      e.enableScrollDetection && window.removeEventListener("scroll", T), f.value && (f.value.disconnect(), f.value = null);
     }), () => t("div", {
       id: e.id,
-      class: V.value,
-      ref: v
+      class: x.value,
+      ref: h
     }, a.default?.());
   }
-}), Ml = Fl, Al = B({
+}), _a = Ta, Ma = A({
   name: "KrdsSideNavigation",
   props: {
     title: {
@@ -2813,139 +2934,142 @@ var Pt = B({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
-    const n = k(() => e.modelValue || []), l = L(/* @__PURE__ */ new Map()), s = L(/* @__PURE__ */ new Map()), r = L(/* @__PURE__ */ new Map()), o = L(null), v = (m, w, C) => {
-      const x = `${w}-${C}`;
-      m ? l.value.set(x, m) : l.value.delete(x);
-    }, f = (m, w, C) => {
-      const x = `${w}-${C}`;
-      m ? s.value.set(x, m) : s.value.delete(x);
-    }, b = (m, w, C) => {
-      const x = `${w}-${C}`;
-      m ? r.value.set(x, m) : r.value.delete(x);
-    }, g = (m) => {
-      a("update:modelValue", n.value.map((w, C) => {
-        if (C === m && w.subItems) {
-          const x = w.expanded, $ = {
-            ...w,
-            expanded: !w.expanded
+    const r = b(() => e.modelValue || []), l = B(/* @__PURE__ */ new Map()), n = B(/* @__PURE__ */ new Map()), s = B(/* @__PURE__ */ new Map()), u = B(null), h = ($, C, E) => {
+      const D = `${C}-${E}`;
+      $ ? l.value.set(D, $) : l.value.delete(D);
+    }, f = ($, C, E) => {
+      const D = `${C}-${E}`;
+      $ ? n.value.set(D, $) : n.value.delete(D);
+    }, w = ($, C, E) => {
+      const D = `${C}-${E}`;
+      $ ? s.value.set(D, $) : s.value.delete(D);
+    }, m = ($) => {
+      a("update:modelValue", r.value.map((C, E) => {
+        if (E === $ && C.subItems) {
+          const D = C.expanded, _ = {
+            ...C,
+            expanded: !C.expanded
           };
-          return x && !$.expanded && ($.subItems = w.subItems.map((y) => ({
-            ...y,
+          return D && !_.expanded && (_.subItems = C.subItems.map((v) => ({
+            ...v,
             expanded: !1
-          })), o.value = null), $;
+          })), u.value = null), _;
         }
-        return w;
+        return C;
       }));
-    }, _ = (m, w) => {
-      a("update:modelValue", n.value.map((C, x) => x === m && C.subItems ? {
-        ...C,
-        subItems: C.subItems.map(($, y) => {
-          if (y === w && $.subItems) {
-            const K = {
-              ...$,
-              expanded: !$.expanded
+    }, T = ($, C) => {
+      a("update:modelValue", r.value.map((E, D) => D === $ && E.subItems ? {
+        ...E,
+        subItems: E.subItems.map((_, v) => {
+          if (v === C && _.subItems) {
+            const M = {
+              ..._,
+              expanded: !_.expanded
             };
-            if (K.expanded) {
-              const F = `${m}-${w}`;
-              o.value = l.value.get(F) || null;
-              const P = s.value.get(F), A = r.value.get(F);
-              P && A && P.addEventListener("transitionend", () => {
-                A.focus();
+            if (M.expanded) {
+              const I = `${$}-${C}`;
+              u.value = l.value.get(I) || null;
+              const N = n.value.get(I), H = s.value.get(I);
+              N && H && N.addEventListener("transitionend", () => {
+                H.focus();
               }, { once: !0 });
             }
-            return K;
+            return M;
           }
-          return $;
+          return _;
         })
-      } : C));
-    }, S = (m, w) => {
-      a("update:modelValue", n.value.map((C, x) => x === m && C.subItems ? {
-        ...C,
-        subItems: C.subItems.map(($, y) => {
-          if (y === w && $.subItems && $.expanded) {
-            if (o.value) {
-              const K = o.value;
+      } : E));
+    }, S = ($, C) => {
+      a("update:modelValue", r.value.map((E, D) => D === $ && E.subItems ? {
+        ...E,
+        subItems: E.subItems.map((_, v) => {
+          if (v === C && _.subItems && _.expanded) {
+            if (u.value) {
+              const M = u.value;
               requestAnimationFrame(() => {
-                K.focus();
-              }), o.value = null;
+                M.focus();
+              }), u.value = null;
             }
             return {
-              ...$,
+              ..._,
               expanded: !1
             };
           }
-          return $;
+          return _;
         })
-      } : C));
-    }, V = (m, w, C) => {
-      const x = `${w}-${C}`, $ = s.value.get(x);
-      $ && !$.contains(m.relatedTarget) && S(w, C);
-    }, d = (m, w) => {
-      S(m, w);
-    }, i = (m, w) => {
-      m.onClick && m.onClick(w);
-    }, c = (m, w, C) => m.map((x, $) => t("li", {
-      key: `popup-item-${w}-${C}-${$}`,
+      } : E));
+    }, x = ($, C, E) => {
+      const D = `${C}-${E}`, _ = n.value.get(D);
+      _ && !_.contains($.relatedTarget) && S(C, E);
+    }, c = ($, C) => {
+      S($, C);
+    }, o = ($, C) => {
+      $.onClick && $.onClick(C);
+    }, i = ($, C, E) => $.map((D, _) => t("li", {
+      key: `popup-item-${C}-${E}-${_}`,
       role: "none"
     }, t("a", {
-      href: x.href || "#",
+      href: D.href || "#",
       class: "lnb-btn",
       role: "menuitem",
-      onClick: (y) => i(x, y)
-    }, x.text))), u = (m, w) => m.map((C, x) => t("li", {
-      key: `lnb-subitem-${w}-${x}`,
-      class: ["lnb-subitem", { active: C.expanded }],
-      role: "none"
-    }, [C.subItems ? [t("button", {
-      ref: ($) => v($, w, x),
-      type: "button",
-      class: "lnb-btn lnb-toggle-popup",
-      role: "menuitem",
-      "aria-controls": `lnbmenu-${w}-${x}`,
-      "aria-expanded": C.expanded ? "true" : "false",
-      "aria-haspopup": "true",
-      onClick: () => _(w, x)
-    }, C.text), t("div", {
-      ref: ($) => f($, w, x),
-      id: `lnbmenu-${w}-${x}`,
-      class: ["lnb-submenu-lv2", { active: C.expanded }],
-      role: "menu",
-      onFocusout: ($) => V($, w, x)
-    }, [t("button", {
-      ref: ($) => b($, w, x),
-      type: "button",
-      class: "lnb-btn-tit",
-      onClick: () => d(w, x)
-    }, C.popupTitle || C.text), t("ul", {}, c(C.subItems || [], w, x))])] : t("a", {
-      href: C.href || "#",
-      class: ["lnb-btn", "lnb-link"],
-      role: "menuitem",
-      onClick: ($) => i(C, $)
-    }, C.text)])), h = () => n.value.map((m, w) => t("li", {
-      key: `lnb-item-${w}`,
-      class: ["lnb-item", { active: m.expanded }],
+      onClick: (v) => o(D, v)
+    }, D.text))), p = ($, C) => $.map((E, D) => {
+      const _ = `lnb-subitem-${C}-${D}`;
+      return t("li", {
+        key: _,
+        class: ["lnb-subitem", { active: E.expanded }],
+        role: "none"
+      }, [E.subItems ? [t("button", {
+        ref: (v) => h(v, C, D),
+        type: "button",
+        class: "lnb-btn lnb-toggle-popup",
+        role: "menuitem",
+        "aria-controls": `lnbmenu-${C}-${D}`,
+        "aria-expanded": E.expanded ? "true" : "false",
+        "aria-haspopup": "true",
+        onClick: () => T(C, D)
+      }, E.text), t("div", {
+        ref: (v) => f(v, C, D),
+        id: `lnbmenu-${C}-${D}`,
+        class: ["lnb-submenu-lv2", { active: E.expanded }],
+        role: "menu",
+        onFocusout: (v) => x(v, C, D)
+      }, [t("button", {
+        ref: (v) => w(v, C, D),
+        type: "button",
+        class: "lnb-btn-tit",
+        onClick: () => c(C, D)
+      }, E.popupTitle || E.text), t("ul", {}, i(E.subItems || [], C, D))])] : t("a", {
+        href: E.href || "#",
+        class: ["lnb-btn", "lnb-link"],
+        role: "menuitem",
+        onClick: (v) => o(E, v)
+      }, E.text)]);
+    }), y = () => r.value.map(($, C) => t("li", {
+      key: `lnb-item-${C}`,
+      class: ["lnb-item", { active: $.expanded }],
       role: "none"
     }, [t("button", {
       type: "button",
       class: [
         "lnb-btn",
         "lnb-toggle",
-        { active: m.expanded }
+        { active: $.expanded }
       ],
       role: "menuitem",
-      "aria-controls": `lnbmenu-${w}`,
-      "aria-expanded": m.expanded ? "true" : "false",
-      onClick: () => g(w)
-    }, m.text), m.subItems ? t("div", { class: "lnb-submenu" }, [t("ul", {
-      id: `lnbmenu-${w}`,
+      "aria-controls": `lnbmenu-${C}`,
+      "aria-expanded": $.expanded ? "true" : "false",
+      onClick: () => m(C)
+    }, $.text), $.subItems ? t("div", { class: "lnb-submenu" }, [t("ul", {
+      id: `lnbmenu-${C}`,
       role: "menu"
-    }, u(m.subItems, w))]) : null]));
+    }, p($.subItems, C))]) : null]));
     return () => t("nav", { class: "krds-side-navigation" }, [t("h2", { class: "lnb-tit" }, e.title), t("ul", {
       class: "lnb-list",
       role: "menubar"
-    }, h())]);
+    }, y())]);
   }
-}), Rl = Al, Pl = B({
+}), Aa = Ma, Va = A({
   name: "KrdsStructuredList",
   props: { full: {
     type: Boolean,
@@ -2954,16 +3078,16 @@ var Pt = B({
   slots: Object,
   setup(e, { slots: a }) {
     return () => {
-      const n = a.cardTop?.(), l = a.cardBody?.(), s = a.cardBtm?.(), r = a.cardBtn?.(), o = t("li", { class: "structured-item" }, [t("div", { class: "in" }, [
-        n && t("div", { class: "card-top" }, n),
+      const r = a.cardTop?.(), l = a.cardBody?.(), n = a.cardBtm?.(), s = a.cardBtn?.(), u = t("li", { class: "structured-item" }, [t("div", { class: "in" }, [
+        r && t("div", { class: "card-top" }, r),
         l && t("div", { class: "card-body" }, l),
-        s && t("div", { class: "card-btm" }, s),
-        r && t("div", { class: "card-btn" }, r)
+        n && t("div", { class: "card-btm" }, n),
+        s && t("div", { class: "card-btn" }, s)
       ].filter(Boolean))]);
-      return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [o]);
+      return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [u]);
     };
   }
-}), Hl = Pl, ql = B({
+}), Pa = Va, za = A({
   name: "KrdsTextList",
   props: {
     type: {
@@ -2978,7 +3102,7 @@ var Pt = B({
   setup(e, { slots: a }) {
     return () => t(e.type, { class: ["krds-info-list", e.variant] }, a.default?.());
   }
-}), Ol = ql, Nl = B({
+}), Fa = za, Ra = A({
   name: "KrdsCriticalAlerts",
   props: {
     type: {
@@ -3000,15 +3124,15 @@ var Pt = B({
   },
   emits: ["link-click"],
   setup(e, { emit: a }) {
-    const n = (s) => ({
+    const r = (n) => ({
       danger: "긴급",
       ok: "안전",
       info: "안내"
-    })[s], l = (s) => {
-      a("link-click", s);
+    })[n], l = (n) => {
+      a("link-click", n);
     };
     return () => t("ul", { class: "krds-critical-alerts" }, [t("li", [t("div", { class: "critical-ban" }, [
-      t("span", { class: ["critical-badge", e.type] }, n(e.type)),
+      t("span", { class: ["critical-badge", e.type] }, r(e.type)),
       t("p", { class: "critical-txt" }, e.message),
       e.linkHref && t("a", {
         href: e.linkHref,
@@ -3017,130 +3141,806 @@ var Pt = B({
       }, [t("span", { class: "m-hide" }, e.linkText), t("i", { class: "svg-icon ico-angle right" })])
     ])])]);
   }
-}), jl = Nl, ke = /* @__PURE__ */ we({
-  KrdsAccordionGroup: () => pl,
-  KrdsAccordionItem: () => Kl,
-  KrdsBadge: () => Vt,
-  KrdsBreadcrumb: () => ia,
-  KrdsButton: () => Ae,
-  KrdsButtonGroup: () => Re,
-  KrdsCheckArea: () => Ot,
-  KrdsCheckbox: () => jt,
-  KrdsCoachMark: () => Pa,
-  KrdsContextualHelp: () => Ta,
-  KrdsCriticalAlerts: () => jl,
-  KrdsDateInput: () => wt,
-  KrdsDisclosure: () => Vl,
-  KrdsFileUpload: () => Dt,
-  KrdsFooter: () => Dl,
-  KrdsFormGroup: () => Ue,
-  KrdsFormHint: () => Ge,
-  KrdsFormLabel: () => je,
-  KrdsHeader: () => Bl,
-  KrdsIcon: () => Pe,
-  KrdsIdentifier: () => Il,
-  KrdsInPageNavigation: () => da,
-  KrdsInput: () => Oe,
-  KrdsLanguageSwitcher: () => ll,
-  KrdsLayout: () => Ml,
-  KrdsLink: () => He,
-  KrdsMasthead: () => At,
-  KrdsModal: () => fl,
-  KrdsPagination: () => ya,
-  KrdsPanel: () => wa,
-  KrdsRadio: () => Gt,
-  KrdsResize: () => ul,
-  KrdsSelect: () => xt,
-  KrdsSideNavigation: () => Rl,
-  KrdsSkipLink: () => ea,
-  KrdsSpinner: () => Yt,
-  KrdsStep: () => Qt,
-  KrdsStepIndicator: () => Xt,
-  KrdsStructuredList: () => Hl,
-  KrdsTable: () => $l,
-  KrdsTag: () => It,
-  KrdsTagGroup: () => Ft,
-  KrdsTextList: () => Ol,
-  KrdsTextarea: () => Ct,
-  KrdsToggleSwitch: () => Ht,
-  KrdsTooltip: () => Wa,
-  KrdsTts: () => _l
-}), pe = {
-  mounted(e, a) {
-    a.value !== !1 && e.classList.add("sr-only");
+}), Ia = Ra, Ha = "새 창 열림", Oa = 100, we = 400, Na = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', qa = A({
+  name: "KrdsMainMenu",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    variant: {
+      type: String,
+      default: "pc"
+    },
+    ariaLabel: {
+      type: String,
+      default: "메인 메뉴"
+    },
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    mobileId: {
+      type: String,
+      default: "mobile-nav"
+    },
+    backdrop: {
+      type: Boolean,
+      default: !0
+    },
+    closeLabel: {
+      type: String,
+      default: "전체메뉴 닫기"
+    }
   },
-  updated(e, a) {
-    a.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
+  emits: [
+    "update:open",
+    "menu-toggle",
+    "item-click"
+  ],
+  slots: Object,
+  setup(e, { emit: a, slots: r }) {
+    const l = de(), n = B(null), s = B(null), u = B(null), h = b(() => e.variant === "pc"), f = (d) => `${l}-gnb-panel-${d}`, w = (d, g) => `${l}-gnb-sub-${d}-${g}`, m = (d) => `${l}-gnb-tab-${d}`, T = (d, g) => `${l}-gnb-depth3-${d}-${g}`, S = (d) => !!d?.subItems?.length, x = (d) => !S(d) && !!d?.items?.length, c = (d) => S(d) || x(d), o = (d) => !d.items?.length, i = (d) => d ? {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: Ha
+    } : {}, p = (d, g) => {
+      d.onClick?.(g), a("item-click", d, g);
+    }, y = B(-1), $ = B({}), C = B(0), E = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new Map(), _ = (d, g, K) => {
+      g ? d.set(K, g) : d.delete(K);
+    }, v = (d) => {
+      const g = d?.subItems?.findIndex((K) => !o(K));
+      return g === void 0 ? -1 : g;
+    }, M = (d) => {
+      const g = $.value[d];
+      return g === void 0 ? v(e.items[d]) : g;
+    }, I = (d) => {
+      if (typeof document > "u") return;
+      document.body.classList.toggle("is-gnb-web", d);
+      const g = document.body.scrollHeight > window.innerHeight;
+      document.body.classList.toggle("hasScrollY", d && g);
+    }, N = async () => {
+      await ce();
+      const d = E.get(y.value)?.querySelector(".gnb-sub-list.active");
+      C.value = d?.scrollHeight ?? 0;
+    }, H = (d = !1) => {
+      if (y.value === -1) return;
+      const g = y.value;
+      y.value = -1, C.value = 0, I(!1), a("menu-toggle", g, !1), d && D.get(g)?.focus();
+    }, G = (d) => {
+      if (c(e.items[d])) {
+        if (y.value === d) {
+          H();
+          return;
+        }
+        y.value = d, I(!0), a("menu-toggle", d, !0), N();
+      }
+    }, j = (d, g) => {
+      $.value = {
+        ...$.value,
+        [d]: g
+      }, N();
+    }, X = (d) => {
+      const g = n.value;
+      !g || g.contains(d.target) || H();
+    }, le = (d) => {
+      const g = n.value, K = d.relatedTarget;
+      !g || !K || g.contains(K) || H();
+    }, ue = (d) => {
+      if (d.key === "Escape") {
+        H(!0);
+        return;
+      }
+      const g = d.target;
+      if (!g?.dataset.trigger) return;
+      const K = (k) => {
+        const P = g.closest("li");
+        (k === "next" ? P?.nextElementSibling : P?.previousElementSibling)?.querySelector("[data-trigger]")?.focus();
+      };
+      switch (d.key) {
+        case "Home":
+          d.preventDefault(), D.get(0)?.focus();
+          break;
+        case "End":
+          d.preventDefault(), D.get(e.items.length - 1)?.focus();
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          d.preventDefault(), K("next");
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          d.preventDefault(), K("prev");
+      }
+    }, ae = B(0), Q = B({}), ne = B(null), L = B(null), R = B(e.open), Y = B(e.open), V = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(), U = (d, g, K) => {
+      g ? d.set(K, g) : d.delete(K);
+    };
+    let J, ee;
+    const oe = (d) => {
+      typeof document > "u" || document.body.classList.toggle("is-gnb-mobile", d);
+    }, Te = () => {
+      ee && clearTimeout(ee), R.value = !0, J = setTimeout(() => {
+        Y.value = !0, oe(!0), s.value?.focus();
+      }, Oa);
+    }, _e = () => {
+      J && clearTimeout(J), Y.value = !1, ee = setTimeout(() => {
+        R.value = !1, oe(!1);
+      }, we);
+    };
+    se(() => e.open, (d) => {
+      d ? Te() : _e();
+    });
+    const Me = (d, g) => {
+      d.preventDefault(), ae.value = g;
+      const K = u.value, k = V.get(g);
+      K && k && K.scrollTo({
+        left: 0,
+        top: k.offsetTop,
+        behavior: "smooth"
+      });
+    }, Ae = () => {
+      const d = u.value;
+      if (!d) return;
+      const { scrollTop: g, scrollHeight: K, clientHeight: k } = d;
+      let P = ae.value;
+      V.forEach((q, W) => {
+        (g >= q.offsetTop || g + k >= K) && (P = W);
+      }), ae.value = P;
+    }, Ve = (d, g) => {
+      d.preventDefault(), Q.value = {
+        ...Q.value,
+        [g]: !Q.value[g]
+      };
+    }, Pe = async (d, g) => {
+      d.preventDefault(), ne.value = g, await ce(), L.value = g, await ce(), O.get(g)?.focus();
+    }, ye = (d) => {
+      L.value = null, F.get(d)?.focus(), setTimeout(() => {
+        L.value || (ne.value = null);
+      }, we);
+    }, ze = (d, g) => {
+      const K = Array.from(d.querySelectorAll(Na));
+      if (!K.length) return;
+      const k = K[0], P = K[K.length - 1], q = document.activeElement;
+      g.shiftKey && (q === k || q === d) ? (g.preventDefault(), P.focus()) : !g.shiftKey && q === P && (g.preventDefault(), k.focus());
+    }, Fe = (d) => {
+      if (d.key === "Escape") {
+        L.value ? ye(L.value) : a("update:open", !1);
+        return;
+      }
+      if (d.key !== "Tab") return;
+      const g = L.value ? z.get(L.value) : s.value;
+      g && ze(g, d);
+    };
+    ie(() => {
+      if (h.value) {
+        document.addEventListener("click", X);
+        return;
+      }
+      e.open && (R.value = !0, Y.value = !0, oe(!0));
+      const d = {};
+      e.items.forEach((g, K) => {
+        g.subItems?.forEach((k, P) => {
+          k.expanded && (d[`${K}-${P}`] = !0);
+        });
+      }), Q.value = d;
+    }), fe(() => {
+      typeof document < "u" && (document.removeEventListener("click", X), document.body.classList.remove("is-gnb-web", "hasScrollY", "is-gnb-mobile")), J && clearTimeout(J), ee && clearTimeout(ee);
+    });
+    const Re = (d) => {
+      const g = d.some((k) => !!k.description), K = d.map((k, P) => {
+        const q = i(k.external), W = k.external ? t("i", { class: "svg-icon ico-go" }) : null;
+        if (g) return t("li", { key: `link-${P}` }, [t("h3", { class: "tit" }, [t("a", {
+          href: k.href || "#",
+          ...q,
+          onClick: (te) => p(k, te)
+        }, [k.text, W])]), k.description ? t("p", { class: "txt" }, k.description) : null]);
+        const Z = k.href ? "a" : "button";
+        return t("li", { key: `link-${P}` }, [t(Z, {
+          ...k.href ? {
+            href: k.href,
+            ...q
+          } : { type: "button" },
+          class: { active: k.selected },
+          onClick: (te) => p(k, te)
+        }, [k.text, W])]);
+      });
+      return t("ul", { class: g ? "type-description" : void 0 }, K);
+    }, me = (d) => {
+      const g = d.titleLink ? [d.title, t("a", {
+        href: d.titleLink.href,
+        class: "krds-btn link basic small"
+      }, [t("span", { class: "underline" }, d.titleLink.text || "바로가기"), t("i", { class: "svg-icon ico-angle right" })])] : [t("span", d.title)];
+      return t("div", {
+        id: d.id,
+        class: ["gnb-sub-list", {
+          active: d.active,
+          between: d.layout === "between",
+          "single-list": d.single
+        }]
+      }, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" }, g), Re(d.linkItems)]), d.banner]);
+    }, Ie = (d, g) => (d.subItems ?? []).map((K, k) => {
+      if (o(K)) {
+        const W = K.href ? "a" : "button";
+        return t("li", { key: `sub-${k}` }, [t(W, {
+          ...K.href ? {
+            href: K.href,
+            ...i(K.external)
+          } : { type: "button" },
+          class: [
+            "gnb-sub-trigger",
+            "is-link",
+            {
+              "external-link": K.external,
+              selected: K.selected
+            }
+          ],
+          "data-trigger": "gnb",
+          onClick: (Z) => p(K, Z)
+        }, K.text)]);
+      }
+      const P = M(g) === k, q = K.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
+        item: d,
+        subItem: K,
+        index: g,
+        subIndex: k
+      })) : null;
+      return t("li", { key: `sub-${k}` }, [t("button", {
+        type: "button",
+        class: ["gnb-sub-trigger", {
+          active: P,
+          selected: K.selected
+        }],
+        "data-trigger": "gnb",
+        "aria-controls": w(g, k),
+        "aria-expanded": P ? "true" : "false",
+        "aria-haspopup": "true",
+        onClick: (W) => {
+          j(g, k), p(K, W);
+        }
+      }, K.text), me({
+        id: w(g, k),
+        title: K.title || K.text,
+        titleLink: K.titleLink,
+        linkItems: K.items ?? [],
+        layout: K.layout,
+        active: P,
+        banner: q
+      })]);
+    }), He = (d, g) => {
+      const K = y.value === g, k = S(d), P = k ? [t("ul", {}, Ie(d, g))] : [me({
+        title: d.title || d.text,
+        linkItems: d.items ?? [],
+        layout: d.layout,
+        single: !0,
+        banner: d.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
+          item: d,
+          index: g,
+          subIndex: -1
+        })) : null
+      })];
+      return t("div", {
+        id: f(g),
+        class: ["gnb-toggle-wrap", { "is-open": K }]
+      }, [t("div", {
+        ref: (q) => _(E, q, g),
+        class: "gnb-main-list",
+        ...k ? { "data-has-submenu": "true" } : {},
+        style: K && C.value ? { minHeight: `${C.value}px` } : void 0
+      }, P)]);
+    }, Oe = () => {
+      const d = e.items.map((K, k) => {
+        const P = c(K), q = y.value === k, W = !P && K.href ? "a" : "button", Z = t(W, {
+          ref: (te) => _(D, te, k),
+          ...W === "a" ? {
+            href: K.href,
+            ...i(K.external)
+          } : { type: "button" },
+          class: ["gnb-main-trigger", {
+            active: q,
+            "is-link": !P,
+            selected: K.selected
+          }],
+          "data-trigger": "gnb",
+          ...P ? {
+            "aria-controls": f(k),
+            "aria-expanded": q ? "true" : "false",
+            "aria-haspopup": "true"
+          } : {},
+          onClick: (te) => {
+            P && G(k), p(K, te);
+          }
+        }, K.text);
+        return t("li", { key: `main-${k}` }, [Z, P ? He(K, k) : null]);
+      }), g = e.backdrop && y.value !== -1 ? t(Ce, { to: "body" }, [t("div", {
+        class: "gnb-backdrop active",
+        "aria-hidden": "true"
+      })]) : null;
+      return t("nav", {
+        ref: n,
+        class: "krds-main-menu",
+        "aria-label": e.ariaLabel,
+        onKeydown: ue,
+        onFocusout: le
+      }, [t("div", { class: "inner" }, [t("ul", {
+        class: "gnb-menu",
+        "aria-label": e.ariaLabel
+      }, d)]), g]);
+    }, Ne = (d, g) => {
+      const K = () => ye(g);
+      return t("div", {
+        ref: (k) => U(z, k, g),
+        class: ["depth4-wrap", { "is-open": L.value === g }],
+        style: ne.value === g ? { display: "block" } : void 0
+      }, [t("div", { class: "depth4-head" }, [t("button", {
+        ref: (k) => U(O, k, g),
+        type: "button",
+        class: "krds-btn icon trigger-prev",
+        onClick: K
+      }, [t("span", { class: "sr-only" }, "이전화면"), t("i", { class: "svg-icon ico-angle left" })]), t("button", {
+        type: "button",
+        class: "krds-btn icon trigger-close",
+        onClick: K
+      }, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])]), t("div", { class: "depth4-body" }, [t("h4", { class: "sub-title" }, d.panelTitle || d.text), t("ul", { class: "depth4-ul" }, (d.items ?? []).map((k, P) => t("li", { key: `depth4-${P}` }, [t("a", {
+        href: k.href || "#",
+        ...i(k.external),
+        class: { selected: k.selected },
+        onClick: (q) => p(k, q)
+      }, k.text)])))])]);
+    }, qe = (d, g, K) => {
+      const k = (d.items ?? []).map((P, q) => {
+        const W = `${g}-${K}-${q}`, Z = !!P.items?.length;
+        return t("li", { key: `depth3-${q}` }, [t("a", {
+          ref: (te) => U(F, te, W),
+          href: P.href || "#",
+          ...Z ? {} : i(P.external),
+          class: ["depth3-trigger", {
+            "has-depth4": Z,
+            selected: P.selected
+          }],
+          ...Z ? {
+            "aria-haspopup": "true",
+            "aria-expanded": L.value === W ? "true" : "false"
+          } : {},
+          onClick: (te) => {
+            Z && Pe(te, W), p(P, te);
+          }
+        }, P.text), Z ? Ne(P, W) : null]);
+      });
+      return t("div", { class: ["depth3-wrap", { "is-open": Q.value[`${g}-${K}`] }] }, [t("ul", {}, k)]);
+    }, We = (d, g) => {
+      const K = (d.subItems ?? []).map((k, P) => {
+        const q = `${g}-${P}`, W = !!k.items?.length;
+        return t("li", { key: `sub-${P}` }, [t("a", {
+          href: k.href || "#",
+          ...W ? {} : i(k.external),
+          class: ["gnb-sub-trigger", {
+            "has-depth3": W,
+            active: W && Q.value[q],
+            selected: k.selected
+          }],
+          ...W ? {
+            "aria-controls": T(g, P),
+            "aria-expanded": Q.value[q] ? "true" : "false"
+          } : {},
+          onClick: (Z) => {
+            W && Ve(Z, q), p(k, Z);
+          }
+        }, k.text), W ? qe(k, g, P) : null]);
+      });
+      return t("div", {
+        ref: (k) => _(V, k, g),
+        id: f(g),
+        class: "gnb-sub-list",
+        role: "tabpanel",
+        "aria-labelledby": m(g)
+      }, [t("h2", { class: "sub-title" }, d.title || d.text), t("ul", {}, K)]);
+    }, Ye = () => {
+      const d = e.items.map((K, k) => t("li", {
+        key: `tab-${k}`,
+        role: "none"
+      }, [t("a", {
+        id: m(k),
+        href: `#${f(k)}`,
+        class: ["gnb-main-trigger", { active: ae.value === k }],
+        role: "tab",
+        "aria-controls": f(k),
+        "aria-selected": ae.value === k ? "true" : "false",
+        onClick: (P) => {
+          Me(P, k), p(K, P);
+        }
+      }, K.text)])), g = [t("div", { class: "gnb-menu" }, [t("div", { class: "menu-wrap" }, [t("ul", {
+        role: "tablist",
+        "aria-label": e.ariaLabel
+      }, d)]), t("div", { class: "submenu-wrap" }, e.items.map(We))]), r.bottom ? t("div", { class: "gnb-bottom" }, r.bottom()) : null];
+      return t("div", {
+        ref: n,
+        id: e.mobileId,
+        class: ["krds-main-menu-mobile", {
+          "is-open": Y.value,
+          "is-backdrop": Y.value
+        }],
+        style: R.value ? void 0 : { display: "none" },
+        onKeydown: Fe
+      }, [t("div", {
+        ref: s,
+        class: "gnb-wrap",
+        tabindex: -1
+      }, [
+        t("div", { class: "gnb-header" }, r.header ? r.header() : []),
+        t("div", {
+          ref: u,
+          class: "gnb-body",
+          onScroll: Ae
+        }, g),
+        t("button", {
+          type: "button",
+          id: "close-nav",
+          class: "krds-btn medium icon",
+          onClick: () => a("update:open", !1)
+        }, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])
+      ])]);
+    };
+    return () => h.value ? Oe() : Ye();
+  }
+}), Wa = qa, Ya = 400, ja = 2500, Ga = 0, Ua = 16, Be = (e) => e ? e.flatMap((a) => a.type === Ge ? Array.isArray(a.children) ? Be(a.children) : [] : a.type === je ? [] : a.type === Ue && typeof a.children == "string" && a.children.trim() === "" ? [] : [a]) : [], Xa = A({
+  name: "KrdsCarousel",
+  props: {
+    variant: {
+      type: String,
+      default: "visual"
+    },
+    activeIndex: {
+      type: Number,
+      default: void 0
+    },
+    loop: {
+      type: Boolean,
+      default: !0
+    },
+    autoplay: {
+      type: Boolean,
+      default: !1
+    },
+    autoplayDelay: {
+      type: Number,
+      default: ja
+    },
+    pauseOnHover: {
+      type: Boolean,
+      default: !0
+    },
+    speed: {
+      type: Number,
+      default: Ya
+    },
+    spaceBetween: {
+      type: Number,
+      default: void 0
+    },
+    pagination: {
+      type: String,
+      default: void 0
+    },
+    navigation: {
+      type: Boolean,
+      default: !0
+    },
+    moreHref: {
+      type: String,
+      default: void 0
+    },
+    ariaLabel: {
+      type: String,
+      default: "캐러셀"
+    },
+    prevLabel: {
+      type: String,
+      default: "이전"
+    },
+    nextLabel: {
+      type: String,
+      default: "다음"
+    },
+    playLabel: {
+      type: String,
+      default: "슬라이드 재생"
+    },
+    stopLabel: {
+      type: String,
+      default: "슬라이드 멈춤"
+    },
+    moreLabel: {
+      type: String,
+      default: "더 보기"
+    },
+    id: {
+      type: String,
+      default: void 0
+    }
   },
-  unmounted(e) {
-    e.classList.remove("sr-only");
+  emits: [
+    "update:activeIndex",
+    "change",
+    "play",
+    "stop",
+    "more-click"
+  ],
+  setup(e, { emit: a, slots: r }) {
+    const l = xe()?.uid, n = b(() => `${e.id ?? `krds-carousel-${l}`}-wrapper`);
+    let s = 0;
+    const u = B(e.activeIndex ?? 0), h = b(() => e.spaceBetween ?? (e.variant === "banner" ? Ua : Ga)), f = b(() => e.pagination ?? (e.variant === "banner" ? "fraction" : "bullets")), w = B(!1), m = B(!1), T = B(!1), S = b(() => m.value || T.value);
+    let x;
+    const c = () => {
+      x !== void 0 && (clearInterval(x), x = void 0);
+    }, o = (V) => {
+      if (s <= 0) return;
+      const F = e.loop ? (V % s + s) % s : Math.min(Math.max(V, 0), s - 1);
+      F !== u.value && (u.value = F, a("update:activeIndex", F), a("change", F));
+    }, i = () => o(u.value - 1), p = () => o(u.value + 1), y = () => {
+      w.value || (w.value = !0, a("play"));
+    }, $ = () => {
+      w.value && (w.value = !1, a("stop"));
+    };
+    se([
+      w,
+      S,
+      () => e.autoplayDelay
+    ], () => {
+      c(), !(!w.value || S.value) && (x = setInterval(() => {
+        if (!e.loop && s > 0 && u.value >= s - 1) {
+          $();
+          return;
+        }
+        p();
+      }, e.autoplayDelay));
+    }), se(() => e.autoplay, (V) => {
+      V ? y() : $();
+    }), se(() => e.activeIndex, (V) => {
+      typeof V != "number" || V === u.value || (u.value = s > 0 ? Math.min(Math.max(V, 0), s - 1) : V);
+    });
+    const E = B(!1);
+    let D;
+    const _ = (V) => {
+      E.value = V.matches;
+    }, v = b(() => E.value ? 0 : e.speed);
+    ie(() => {
+      typeof window < "u" && window.matchMedia && (D = window.matchMedia("(prefers-reduced-motion: reduce)"), E.value = D.matches, D.addEventListener("change", _)), e.autoplay && y();
+    }), fe(() => {
+      c(), D?.removeEventListener("change", _);
+    });
+    const M = () => {
+      e.pauseOnHover && (m.value = !0);
+    }, I = () => {
+      m.value = !1;
+    }, N = () => {
+      T.value = !0;
+    }, H = (V) => {
+      const F = V.currentTarget;
+      F && F.contains(V.relatedTarget) || (T.value = !1);
+    }, G = (V) => {
+      a("more-click", V);
+    }, j = {
+      position: "relative",
+      overflow: "hidden",
+      width: "100%"
+    }, X = {
+      flex: "0 0 100%",
+      width: "100%"
+    }, le = (V) => ({
+      display: "flex",
+      width: "100%",
+      gap: h.value > 0 ? `${h.value}px` : void 0,
+      transform: `translate3d(calc(${-V} * (100% + ${h.value}px)), 0, 0)`,
+      transitionProperty: "transform",
+      transitionDuration: `${v.value}ms`,
+      transitionTimingFunction: "ease-out",
+      willChange: "transform"
+    }), ue = (V) => ({
+      position: "absolute",
+      top: "50%",
+      left: V ? "0" : void 0,
+      right: V ? void 0 : "0",
+      transform: "translateY(-50%)",
+      zIndex: 10
+    }), ae = (V, F) => V.map((z, O) => {
+      const U = O === F;
+      return t("li", {
+        key: z.key ?? `krds-carousel-slide-${O}`,
+        class: ["swiper-slide", { "swiper-slide-active": U }],
+        style: X,
+        "aria-roledescription": "slide",
+        "aria-label": `${O + 1} / ${V.length}`,
+        "aria-hidden": U ? void 0 : "true",
+        inert: U ? void 0 : !0
+      }, [z]);
+    }), Q = (V, F, z) => {
+      const O = V === "prev", U = !e.loop && (O ? F <= 0 : F >= s - 1);
+      return t("button", {
+        type: "button",
+        class: [`swiper-button-${V}`, { "swiper-button-disabled": U }],
+        style: z ? ue(O) : void 0,
+        disabled: U,
+        "aria-controls": n.value,
+        onClick: O ? i : p
+      }, [t("span", { class: "sr-only" }, O ? e.prevLabel : e.nextLabel)]);
+    }, ne = () => t("a", {
+      href: e.moreHref,
+      class: "swiper-button-more",
+      onClick: G
+    }, [t("span", { class: "sr-only" }, e.moreLabel)]), L = (V, F) => f.value === "fraction" ? t("div", { class: "swiper-pagination swiper-pagination-fraction" }, [
+      t("span", { class: "swiper-pagination-current" }, String(F + 1)),
+      t("span", { "aria-hidden": "true" }, "/"),
+      t("span", { class: "swiper-pagination-total" }, String(V))
+    ]) : t("div", { class: "swiper-pagination" }, Array.from({ length: V }, (z, O) => t("button", {
+      key: `krds-carousel-bullet-${O}`,
+      type: "button",
+      class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active": O === F }],
+      "aria-label": `${O + 1}번째 슬라이드로 이동`,
+      "aria-current": O === F ? "true" : void 0,
+      "aria-controls": n.value,
+      onClick: () => o(O)
+    }))), R = () => t("div", { class: "swiper-controller" }, [t("button", {
+      type: "button",
+      class: "swiper-button-play",
+      style: w.value ? { display: "none" } : void 0,
+      "aria-controls": n.value,
+      onClick: y
+    }, [t("span", { class: "sr-only" }, e.playLabel)]), t("button", {
+      type: "button",
+      class: "swiper-button-stop",
+      style: w.value ? void 0 : { display: "none" },
+      "aria-controls": n.value,
+      onClick: $
+    }, [t("span", { class: "sr-only" }, e.stopLabel)])]), Y = (V, F) => {
+      const z = e.variant === "banner", O = f.value !== "none", U = !!e.moreHref, J = [];
+      if (O && J.push(L(V, F)), e.autoplay && J.push(R()), z) {
+        const ee = [];
+        e.navigation && ee.push(Q("prev", F, !1), Q("next", F, !1)), U && ee.push(ne()), ee.length > 0 && J.push(t("div", { class: "swiper-navigation" }, ee));
+      } else U && J.push(ne());
+      return J.length === 0 ? null : t("div", { class: ["swiper-indicator", { "text-center": !z }] }, J);
+    };
+    return () => {
+      const V = Be(r.default?.()), F = V.length;
+      s = F;
+      const z = F > 0 ? Math.min(Math.max(u.value, 0), F - 1) : 0, O = e.variant === "banner";
+      return t("div", {
+        id: e.id,
+        class: ["krds-carousel", O ? "main-d-ban-swiper" : "vb-swiper"],
+        style: { position: "relative" },
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": e.ariaLabel,
+        onMouseenter: M,
+        onMouseleave: I,
+        onFocusin: N,
+        onFocusout: H
+      }, [
+        t("div", {
+          class: "swiper",
+          style: j,
+          "aria-live": w.value ? "off" : "polite"
+        }, [t("ul", {
+          id: n.value,
+          class: "swiper-wrapper",
+          style: le(z)
+        }, ae(V, z))]),
+        !O && e.navigation && F > 0 ? Q("prev", z, !0) : null,
+        !O && e.navigation && F > 0 ? Q("next", z, !0) : null,
+        F > 0 ? Y(F, z) : null
+      ]);
+    };
   }
-}, oe = /* @__PURE__ */ we({
-  default: () => Se,
-  directives: () => Se,
-  installDirectives: () => $e,
-  vSrOnly: () => pe
-}), Se = { "sr-only": pe }, $e = (e) => {
-  e.directive("sr-only", pe);
-}, xe = "0.0.14", Ul = { install(e, a = {}) {
-  e.provide("krds:config", a), (a.components || Object.keys(ke)).forEach((n) => {
-    const l = ke[n];
-    l && e.component(n, l);
-  }), typeof oe == "object" && oe !== null && "installDirectives" in oe && $e(e), e.config.globalProperties.$krds = { version: xe };
-} }, Xl = xe;
+}), Qa = Xa, Ke = /* @__PURE__ */ Je({
+  KrdsAccordionGroup: () => ga,
+  KrdsAccordionItem: () => ya,
+  KrdsBadge: () => Ct,
+  KrdsBreadcrumb: () => Gt,
+  KrdsButton: () => Ze,
+  KrdsButtonGroup: () => et,
+  KrdsCarousel: () => Qa,
+  KrdsCheckArea: () => Vt,
+  KrdsCheckbox: () => zt,
+  KrdsCoachMark: () => sa,
+  KrdsContextualHelp: () => la,
+  KrdsCriticalAlerts: () => Ia,
+  KrdsDateInput: () => gt,
+  KrdsDisclosure: () => La,
+  KrdsFileUpload: () => wt,
+  KrdsFooter: () => xa,
+  KrdsFormGroup: () => ut,
+  KrdsFormHint: () => ot,
+  KrdsFormLabel: () => rt,
+  KrdsHeader: () => Ka,
+  KrdsIcon: () => tt,
+  KrdsIdentifier: () => Ba,
+  KrdsInPageNavigation: () => Xt,
+  KrdsInput: () => nt,
+  KrdsLanguageSwitcher: () => da,
+  KrdsLayout: () => _a,
+  KrdsLink: () => at,
+  KrdsMainMenu: () => Wa,
+  KrdsMasthead: () => Et,
+  KrdsModal: () => va,
+  KrdsPagination: () => Zt,
+  KrdsPanel: () => ta,
+  KrdsRadio: () => Rt,
+  KrdsResize: () => ca,
+  KrdsSelect: () => bt,
+  KrdsSideNavigation: () => Aa,
+  KrdsSkipLink: () => Yt,
+  KrdsSpinner: () => It,
+  KrdsStep: () => qt,
+  KrdsStepIndicator: () => Ot,
+  KrdsStructuredList: () => Pa,
+  KrdsTable: () => Sa,
+  KrdsTag: () => $t,
+  KrdsTagGroup: () => Dt,
+  KrdsTextList: () => Fa,
+  KrdsTextarea: () => yt,
+  KrdsToggleSwitch: () => Mt,
+  KrdsTooltip: () => ia,
+  KrdsTts: () => ba
+}), Ee = "0.0.16", tl = { install(e, a = {}) {
+  e.provide("krds:config", a), (a.components || Object.keys(Ke)).forEach((r) => {
+    const l = Ke[r];
+    l && e.component(r, l);
+  }), Qt(e), e.config.globalProperties.$krds = { version: Ee };
+} }, al = Ee;
 export {
-  pl as KrdsAccordionGroup,
-  Kl as KrdsAccordionItem,
-  Vt as KrdsBadge,
-  ia as KrdsBreadcrumb,
-  Ae as KrdsButton,
-  Re as KrdsButtonGroup,
-  Ot as KrdsCheckArea,
-  jt as KrdsCheckbox,
-  Pa as KrdsCoachMark,
-  Ta as KrdsContextualHelp,
-  jl as KrdsCriticalAlerts,
-  wt as KrdsDateInput,
-  Vl as KrdsDisclosure,
-  Dt as KrdsFileUpload,
-  Dl as KrdsFooter,
-  Ue as KrdsFormGroup,
-  Ge as KrdsFormHint,
-  je as KrdsFormLabel,
-  Bl as KrdsHeader,
-  Pe as KrdsIcon,
-  Il as KrdsIdentifier,
-  da as KrdsInPageNavigation,
-  Oe as KrdsInput,
-  ll as KrdsLanguageSwitcher,
-  Ml as KrdsLayout,
-  He as KrdsLink,
-  At as KrdsMasthead,
-  fl as KrdsModal,
-  ya as KrdsPagination,
-  wa as KrdsPanel,
-  Gt as KrdsRadio,
-  ul as KrdsResize,
-  xt as KrdsSelect,
-  Rl as KrdsSideNavigation,
-  ea as KrdsSkipLink,
-  Yt as KrdsSpinner,
-  Qt as KrdsStep,
-  Xt as KrdsStepIndicator,
-  Hl as KrdsStructuredList,
-  $l as KrdsTable,
-  It as KrdsTag,
-  Ft as KrdsTagGroup,
-  Ol as KrdsTextList,
-  Ct as KrdsTextarea,
-  Ht as KrdsToggleSwitch,
-  Wa as KrdsTooltip,
-  _l as KrdsTts,
-  ve as classNames,
-  Ul as default,
-  Gl as generateId,
-  Yl as generateUid,
-  Xl as version
+  ga as KrdsAccordionGroup,
+  ya as KrdsAccordionItem,
+  Ct as KrdsBadge,
+  Gt as KrdsBreadcrumb,
+  Ze as KrdsButton,
+  et as KrdsButtonGroup,
+  Qa as KrdsCarousel,
+  Vt as KrdsCheckArea,
+  zt as KrdsCheckbox,
+  sa as KrdsCoachMark,
+  la as KrdsContextualHelp,
+  Ia as KrdsCriticalAlerts,
+  gt as KrdsDateInput,
+  La as KrdsDisclosure,
+  wt as KrdsFileUpload,
+  xa as KrdsFooter,
+  ut as KrdsFormGroup,
+  ot as KrdsFormHint,
+  rt as KrdsFormLabel,
+  Ka as KrdsHeader,
+  tt as KrdsIcon,
+  Ba as KrdsIdentifier,
+  Xt as KrdsInPageNavigation,
+  nt as KrdsInput,
+  da as KrdsLanguageSwitcher,
+  _a as KrdsLayout,
+  at as KrdsLink,
+  Wa as KrdsMainMenu,
+  Et as KrdsMasthead,
+  va as KrdsModal,
+  Zt as KrdsPagination,
+  ta as KrdsPanel,
+  Rt as KrdsRadio,
+  ca as KrdsResize,
+  bt as KrdsSelect,
+  Aa as KrdsSideNavigation,
+  Yt as KrdsSkipLink,
+  It as KrdsSpinner,
+  qt as KrdsStep,
+  Ot as KrdsStepIndicator,
+  Pa as KrdsStructuredList,
+  Sa as KrdsTable,
+  $t as KrdsTag,
+  Dt as KrdsTagGroup,
+  Fa as KrdsTextList,
+  yt as KrdsTextarea,
+  Mt as KrdsToggleSwitch,
+  ia as KrdsTooltip,
+  ba as KrdsTts,
+  he as classNames,
+  tl as default,
+  Za as generateId,
+  el as generateUid,
+  al as version
 };
 
 //# sourceMappingURL=krds-vue.es.js.map