@krds.ui/vue 0.0.12 → 0.0.14

package/dist/krds-vue.es.js

@@ -1,5 +1,13 @@
-import { defineComponent as _, computed as h, h as u, ref as B, onMounted as le, onBeforeUnmount as Se, createElementBlock as S, openBlock as k, createElementVNode as r, normalizeClass as E, withDirectives as Q, unref as A, toDisplayString as V, Fragment as F, renderList as N, vShow as te, createBlock as ie, withCtx as de, createTextVNode as P, watch as ae, provide as Ve, inject as Ie, createCommentVNode as Y, onUnmounted as J, resolveDirective as ze, resolveDynamicComponent as ye, renderSlot as G, normalizeStyle as ne, nextTick as we, withModifiers as re, getCurrentInstance as Ee, Teleport as Le } from "vue";
-const Ce = _({
+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 = {};
+  for (var l in e)
+    be(n, l, {
+      get: e[l],
+      enumerable: !0
+    });
+  return a || be(n, Symbol.toStringTag, { value: "Module" }), n;
+}, _e = B({
   name: "KrdsButton",
   props: {
     type: {
@@ -40,37 +48,27 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const n = ["krds-btn"];
-      return e.icon && n.push("icon"), e.border && n.push("border"), e.pure && n.push("pure"), e.text && n.push("text"), e.variant && !e.icon && n.push(e.variant), e.size && n.push(e.size), e.class && n.push(e.class), n;
-    }), t = (n) => {
-      e.disabled || o("click", n);
+  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);
     };
-    return () => u(
-      "button",
-      {
-        type: e.type,
-        class: l.value,
-        disabled: e.disabled,
-        onClick: t
-      },
-      a.default?.()
-    );
+    return () => t("button", {
+      type: e.type,
+      class: l.value,
+      disabled: e.disabled,
+      onClick: s
+    }, n.default?.());
   }
-}), Me = _({
+}), Ae = _e, Re = B({
   name: "KrdsButtonGroup",
   props: {},
-  setup(e, { slots: o }) {
-    return () => u(
-      "div",
-      {
-        class: "btn-group"
-      },
-      o.default?.()
-    );
+  setup(e, { slots: a }) {
+    return () => t("div", { class: "btn-group" }, a.default?.());
   }
-}), Re = _({
+}), Pe = B({
   name: "KrdsIcon",
   props: {
     name: {
@@ -83,11 +81,13 @@ const Ce = _({
     }
   },
   setup(e) {
-    return () => u("i", {
-      class: ["svg-icon", e.name, e.class].filter(Boolean).join(" ")
-    });
+    return () => t("i", { class: [
+      "svg-icon",
+      e.name,
+      e.class
+    ].filter(Boolean).join(" ") });
   }
-}), Te = _({
+}), He = B({
   name: "KrdsLink",
   props: {
     href: {
@@ -124,41 +124,38 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const i = ["krds-btn"];
-      return e.size && i.push(e.size), e.link && i.push("link"), e.basic && i.push("basic"), e.pure && i.push("pure"), e.class && i.push(e.class), i;
-    }), t = h(() => {
-      const i = {
+  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 = {
         href: e.href,
         class: l.value
       };
-      return e.target && (i.target = e.target), e.title && (i.title = e.title), e.target === "_blank" && (i.rel = "noopener noreferrer"), i;
-    }), n = (i) => {
-      o("click", i);
+      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 () => u(
-      "a",
-      {
-        ...t.value,
-        onClick: n
-      },
-      a.default?.()
-    );
+    return () => t("a", {
+      ...s.value,
+      onClick: r
+    }, n.default?.());
   }
-}), xe = _({
+}), Ce = B({
   name: "KrdsSpinner",
-  props: {
-    label: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: { label: {
+    type: String,
+    default: void 0
+  } },
   render() {
-    const e = [u("span", { class: "sr-only" }, "로딩 중")];
-    return this.label && e.push(u("span", this.label)), u("div", { class: "krds-spinner", role: "status" }, e);
+    const e = [t("span", { class: "sr-only" }, "로딩 중")];
+    return this.label && e.push(t("span", this.label)), t("div", {
+      class: "krds-spinner",
+      role: "status"
+    }, e);
   }
-}), Ae = _({
+}), qe = B({
   name: "KrdsInput",
   props: {
     modelValue: {
@@ -246,26 +243,34 @@ const Ce = _({
       default: void 0
     }
   },
-  emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const b = ["krds-input"];
-      return e.size && b.push(e.size), e.class && b.push(e.class), b;
-    }), t = (b) => {
-      const D = b.target, m = e.type === "number" ? Number(D.value) : D.value;
-      o("update:modelValue", m), o("input", b);
-    }, n = (b) => {
-      o("change", b);
-    }, i = (b) => {
-      o("focus", b);
-    }, v = (b) => {
-      o("blur", b);
-    }, p = (b) => {
-      o("keydown", b);
-    }, y = (b) => {
-      o("keyup", b);
-    }, g = h(() => {
-      const b = {
+  emits: [
+    "update:modelValue",
+    "input",
+    "change",
+    "focus",
+    "blur",
+    "keydown",
+    "keyup"
+  ],
+  setup(e, { emit: a, slots: n }) {
+    const l = k(() => {
+      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) => {
+      a("change", S);
+    }, o = (S) => {
+      a("focus", S);
+    }, v = (S) => {
+      a("blur", S);
+    }, f = (S) => {
+      a("keydown", S);
+    }, b = (S) => {
+      a("keyup", S);
+    }, g = k(() => {
+      const S = {
         type: e.type,
         class: l.value,
         value: e.modelValue,
@@ -277,24 +282,24 @@ const Ce = _({
         disabled: e.disabled,
         autocomplete: e.autocomplete,
         autofocus: e.autofocus,
-        onInput: t,
-        onChange: n,
-        onFocus: i,
+        onInput: s,
+        onChange: r,
+        onFocus: o,
         onBlur: v,
-        onKeydown: p,
-        onKeyup: y
+        onKeydown: f,
+        onKeyup: b
       };
-      return e.maxlength !== void 0 && (b.maxlength = e.maxlength), e.minlength !== void 0 && (b.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (b.max = e.max), e.min !== void 0 && (b.min = e.min), e.step !== void 0 && (b.step = e.step)), b;
-    }), w = h(() => {
-      const b = ["form-conts"];
-      return e.state !== "default" && b.push(`is-${e.state}`), e.icon && b.push("btn-ico-wrap"), b;
+      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(() => {
+      const S = ["form-conts"];
+      return e.state !== "default" && S.push(`is-${e.state}`), e.icon && S.push("btn-ico-wrap"), S;
     });
     return () => {
-      const b = [u("input", g.value)];
-      return e.loading ? u("div", { class: w.value }, [u("div", { class: "form-spinner" }, [...b, u(xe)])]) : (a.default && b.push(...a.default()), u("div", { class: w.value }, b));
+      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));
     };
   }
-}), Pe = _({
+}), Oe = qe, Ne = B({
   name: "KrdsFormLabel",
   props: {
     for: {
@@ -315,25 +320,19 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = (t) => {
-      o("click", t);
+  setup(e, { emit: a, slots: n }) {
+    const l = (s) => {
+      a("click", s);
     };
-    return () => u("div", { class: "form-tit" }, [
-      u(
-        "label",
-        {
-          for: e.for,
-          id: e.id,
-          class: e.class,
-          style: e.style,
-          onClick: l
-        },
-        a.default?.()
-      )
-    ]);
+    return () => t("div", { class: "form-tit" }, [t("label", {
+      for: e.for,
+      id: e.id,
+      class: e.class,
+      style: e.style,
+      onClick: l
+    }, n.default?.())]);
   }
-}), Fe = _({
+}), je = Ne, We = B({
   name: "KrdsFormHint",
   props: {
     type: {
@@ -354,39 +353,35 @@ const Ce = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = (n) => {
-      o("click", n);
-    }, t = () => {
-      let n;
+  setup(e, { emit: a, slots: n }) {
+    const l = (r) => {
+      a("click", r);
+    }, s = () => {
+      let r;
       switch (e.type) {
         case "error":
-          n = "form-hint-invalid";
+          r = "form-hint-invalid";
           break;
         case "success":
-          n = "form-hint-success";
+          r = "form-hint-success";
           break;
         case "information":
-          n = "form-hint-information";
+          r = "form-hint-information";
           break;
         default:
-          n = "form-hint";
+          r = "form-hint";
           break;
       }
-      return e.class ? `${n} ${e.class}` : n;
+      return e.class ? `${r} ${e.class}` : r;
     };
-    return () => u(
-      "p",
-      {
-        id: e.id,
-        class: t(),
-        style: e.style,
-        onClick: l
-      },
-      a.default?.()
-    );
+    return () => t("p", {
+      id: e.id,
+      class: s(),
+      style: e.style,
+      onClick: l
+    }, n.default?.());
   }
-}), Oe = _({
+}), Ge = We, Ye = B({
   name: "KrdsFormGroup",
   props: {
     class: {
@@ -402,173 +397,190 @@ const Ce = _({
       default: void 0
     }
   },
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: a }) {
+    const n = k(() => {
       const l = ["form-group"];
       return e.class && l.push(e.class), l;
     });
-    return () => u(
-      "div",
-      {
-        id: e.id,
-        class: a.value,
-        style: e.style
-      },
-      o.default?.()
-    );
+    return () => t("div", {
+      id: e.id,
+      class: n.value,
+      style: e.style
+    }, a.default?.());
   }
-});
-function qe(e, o) {
-  const a = /* @__PURE__ */ new Date(), l = B(e || a.getFullYear()), t = B(o || a.getMonth() + 1), n = B(null), i = B(null), v = B(null), p = h(() => {
-    const c = a.getFullYear(), d = [];
-    for (let f = c - 10; f <= c + 10; f++)
-      d.push(f);
-    return d;
-  }), y = h(() => Array.from({ length: 12 }, (c, d) => d + 1)), g = () => {
-    n.value = null, i.value = null;
-  }, w = () => {
-    t.value === 1 ? (t.value = 12, l.value -= 1) : t.value -= 1;
-  }, b = () => {
-    t.value === 12 ? (t.value = 1, l.value += 1) : t.value += 1;
-  }, D = (c, d = !1) => {
-    if (d)
-      n.value = c, i.value = c;
-    else if (!n.value || n.value && i.value)
-      n.value = c, i.value = null;
+}), 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;
+  }, 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;
     else {
-      const f = new Date(n.value.replace(/\./g, "-"));
-      new Date(c.replace(/\./g, "-")) < f ? (n.value = c, i.value = null) : i.value = c;
+      const h = new Date(r.value.replace(/\./g, "-"));
+      new Date(c.replace(/\./g, "-")) < h ? (r.value = c, o.value = null) : o.value = c;
     }
   };
   return {
-    // State
     currentYear: l,
-    currentMonth: t,
-    selectedStartDate: n,
-    selectedEndDate: i,
+    currentMonth: s,
+    selectedStartDate: r,
+    selectedEndDate: o,
     activeDateSelector: v,
-    // Computed
-    yearOptions: p,
-    monthOptions: y,
-    // Methods
+    yearOptions: f,
+    monthOptions: b,
     clearDateSelection: g,
-    prevMonth: w,
-    nextMonth: b,
-    handleDateSelection: D,
+    prevMonth: _,
+    nextMonth: S,
+    handleDateSelection: V,
     selectToday: () => {
-      const c = `${a.getFullYear()}.${String(a.getMonth() + 1).padStart(2, "0")}.${String(a.getDate()).padStart(2, "0")}`;
-      D(c, !0);
+      V(`${n.getFullYear()}.${String(n.getMonth() + 1).padStart(2, "0")}.${String(n.getDate()).padStart(2, "0")}`, !0);
     },
     isDateInSelectedRange: (c) => {
-      if (!n.value || !i.value)
-        return { isInRange: !1, isStart: !1, isEnd: !1 };
-      const d = new Date(c.replace(/\./g, "-")), f = new Date(n.value.replace(/\./g, "-")), x = new Date(i.value.replace(/\./g, "-")), R = c === n.value, L = c === i.value;
-      return { isInRange: d >= f && d <= x, isStart: R, isEnd: L };
+      if (!r.value || !o.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;
+      return {
+        isInRange: u >= h && u <= m,
+        isStart: w,
+        isEnd: C
+      };
     }
   };
 }
-function Ne(e, o, a = {}) {
+function Je(e, a, n = {}) {
   let l = null;
-  const t = typeof a == "string" ? { ignore: a } : a, { ignore: n, event: i = "click" } = t, v = () => {
-    l = (y) => {
-      const g = y.target;
-      e.value?.contains(g) || n && g.closest(n) || o();
-    }, document.addEventListener(i, l);
-  }, p = () => {
+  const { ignore: s, event: r = "click" } = typeof n == "string" ? { ignore: n } : n, o = () => {
+    l = (f) => {
+      const b = f.target;
+      e.value?.contains(b) || s && b.closest(s) || a();
+    }, document.addEventListener(r, l);
+  }, v = () => {
     if (l) {
-      const y = typeof a == "string" ? "click" : a.event || "click";
-      document.removeEventListener(y, l), l = null;
+      const f = typeof n == "string" ? "click" : n.event || "click";
+      document.removeEventListener(f, l), l = null;
     }
   };
-  return le(() => {
+  return te(() => {
+    o();
+  }), fe(() => {
     v();
-  }), Se(() => {
-    p();
   }), {
-    setupGlobalListeners: v,
-    removeGlobalListeners: p
+    setupGlobalListeners: o,
+    removeGlobalListeners: v
   };
 }
-const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id", "name", "placeholder", "value", "readonly", "disabled", "required", "autofocus"], Ye = ["disabled", "aria-expanded"], Ge = { class: "calendar-head" }, Ue = { class: "calendar-switch-wrap" }, Xe = { class: "calendar-drop-down" }, Je = ["aria-expanded"], Qe = { class: "calendar-select calendar-year-wrap" }, Ze = { class: "sel year" }, et = ["onClick"], tt = { class: "calendar-drop-down" }, lt = ["aria-expanded"], at = { class: "calendar-select calendar-mon-wrap" }, nt = { class: "sel month" }, st = ["onClick"], ot = { class: "calendar-body" }, it = { class: "calendar-table-wrap" }, dt = { class: "calendar-tbl" }, rt = ["data-date"], ct = ["aria-pressed", "onClick"], ut = { class: "calendar-footer" }, ft = { class: "calendar-btn-wrap" }, vt = /* @__PURE__ */ _({
+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",
   props: {
     modelValue: { default: void 0 },
     size: { default: "medium" },
     placeholder: { default: "YYYY.MM.DD" },
-    disabled: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 },
-    autofocus: { type: Boolean, default: !1 },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    autofocus: {
+      type: Boolean,
+      default: !1
+    },
     eventDates: { default: () => [] },
     holidays: { default: () => [] },
     initialYear: { default: void 0 },
     initialMonth: { default: void 0 },
     name: { default: void 0 },
-    required: { type: Boolean, default: !1 },
+    required: {
+      type: Boolean,
+      default: !1
+    },
     class: { default: void 0 },
     style: {},
     id: { default: void 0 }
   },
-  emits: ["update:modelValue", "input", "change", "focus", "blur"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = B(), n = B(), i = B(!1), v = B(null), {
-      currentYear: p,
-      currentMonth: y,
-      selectedStartDate: g,
-      selectedEndDate: w,
-      yearOptions: b,
-      monthOptions: D,
-      prevMonth: m,
-      nextMonth: s,
-      handleDateSelection: c,
-      selectToday: d,
-      isDateInSelectedRange: f
-    } = qe(a.initialYear, a.initialMonth), x = () => {
-      i.value && n.value?.focus(), i.value = !1, v.value = null;
+  emits: [
+    "update:modelValue",
+    "input",
+    "change",
+    "focus",
+    "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;
     };
-    Ne(t, x, ".calendar-conts");
-    const R = h(() => {
-      const C = ["krds-input", "datepicker", "cal"];
-      return a.size && C.push(a.size), a.class && C.push(a.class), C;
-    }), L = h(() => ["form-conts", "calendar-conts"]), M = h(() => ({
+    Je(s, m, ".calendar-conts");
+    const w = k(() => {
+      const I = [
+        "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(() => ({
       "krds-calendar-area": !0,
-      active: i.value
-    })), z = h(() => {
-      const C = p.value, $ = y.value, K = new Date(C, $ - 1, 1), U = new Date(K);
-      U.setDate(U.getDate() - K.getDay());
-      const W = [], T = new Date(U);
-      for (let oe = 0; oe < 6; oe++) {
-        const pe = [];
+      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 De = `${T.getFullYear()}.${String(T.getMonth() + 1).padStart(2, "0")}.${String(T.getDate()).padStart(2, "0")}`, he = T.getDay();
-          pe.push({
-            day: T.getDate(),
-            dateString: De,
-            isCurrentMonth: T.getMonth() === $ - 1,
-            isToday: T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
-            isPrevMonth: T.getMonth() < $ - 1 || T.getMonth() === 11 && $ === 1,
-            isNextMonth: T.getMonth() > $ - 1 || T.getMonth() === 0 && $ === 12,
-            isSunday: he === 0,
-            isSaturday: he === 6
-          }), T.setDate(T.getDate() + 1);
+          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);
         }
-        W.push(pe);
+        U.push(he);
       }
-      return W;
-    }), H = (C) => {
-      const $ = [];
-      if (C.isPrevMonth && $.push("old"), C.isNextMonth && $.push("new"), C.isToday && $.push("today"), C.isSunday && $.push("day-off"), a.holidays?.includes(C.dateString) && $.push("day-off"), a.eventDates?.includes(C.dateString) && $.push("day-event"), C.isCurrentMonth) {
-        const K = f(C.dateString);
-        K.isInRange && ($.push("period"), K.isStart && $.push("start"), K.isEnd && $.push("end"));
+      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 $;
-    }, I = h(() => [
+      return z;
+    }, K = k(() => [
       {
         id: "get-today",
         label: "오늘",
         class: "text",
         variant: void 0,
         size: "small",
-        handler: d
+        handler: u
       },
       {
         id: "cancel-btn",
@@ -576,7 +588,7 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         class: void 0,
         variant: "tertiary",
         size: "small",
-        handler: x
+        handler: m
       },
       {
         id: "confirm-btn",
@@ -584,211 +596,142 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         class: void 0,
         variant: "primary",
         size: "small",
-        handler: X
-      }
-    ]), j = (C) => {
-      v.value === C ? v.value = null : v.value = C;
-    }, Z = (C) => {
-      p.value = C, v.value = null;
-    }, se = (C) => {
-      y.value = C, v.value = null;
-    }, X = () => {
-      if (g.value) {
-        if (w.value && g.value !== w.value) {
-          const C = `${g.value} ~ ${w.value}`;
-          l("update:modelValue", C);
-        } else
-          l("update:modelValue", g.value);
-        x();
+        handler: j
       }
+    ]), 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 = () => {
-      i.value = !0, v.value = null, setTimeout(() => {
-        t.value?.querySelector(".calendar-wrap")?.focus();
+      o.value = !0, v.value = null, setTimeout(() => {
+        s.value?.querySelector(".calendar-wrap")?.focus();
       }, 50);
-    }, q = () => {
-      i.value ? x() : O();
-    }, ve = (C) => {
-      C.code === "Escape" && (v.value ? v.value = null : i.value && x());
-    }, ee = (C) => {
-      const $ = C.target;
-      l("update:modelValue", $.value), l("input", C);
-    }, _e = (C) => {
-      l("change", C);
-    }, Be = (C) => {
-      l("focus", C);
-    }, Ke = (C) => {
-      l("blur", C);
+    }, 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 (C, $) => (k(), S("div", He, [
-      r("div", {
-        class: E(L.value)
-      }, [
-        r("div", je, [
-          r("input", {
-            id: e.id,
-            name: e.name,
-            class: E(R.value),
-            placeholder: e.placeholder,
-            value: e.modelValue,
-            readonly: e.readonly,
-            disabled: e.disabled,
-            required: e.required,
-            autofocus: e.autofocus,
-            type: "text",
-            onInput: ee,
-            onChange: _e,
-            onFocus: Be,
-            onBlur: Ke
-          }, null, 42, We),
-          r("button", {
-            ref_key: "datePickerButtonRef",
-            ref: n,
-            class: E(`krds-btn ${e.size || "medium"} icon form-btn-datepicker`),
-            disabled: e.disabled,
-            "aria-expanded": i.value,
-            type: "button",
-            onClick: q
-          }, [...$[4] || ($[4] = [
-            r("span", { class: "sr-only" }, "달력 열기", -1),
-            r("i", { class: "svg-icon ico-calendar" }, null, -1)
-          ])], 10, Ye)
-        ]),
-        r("div", {
-          ref_key: "datePickerAreaRef",
-          ref: t,
-          class: E(M.value)
-        }, [
-          Q(r("div", {
-            class: "calendar-wrap bottom",
-            "aria-label": "달력",
-            tabindex: "0",
-            onKeydown: ve
-          }, [
-            r("div", Ge, [
-              r("button", {
-                type: "button",
-                class: "btn-cal-move prev",
-                onClick: $[0] || ($[0] = //@ts-ignore
-                (...K) => A(m) && A(m)(...K))
-              }, [...$[5] || ($[5] = [
-                r("span", { class: "sr-only" }, "이전 달", -1)
-              ])]),
-              r("div", Ue, [
-                r("div", Xe, [
-                  r("button", {
-                    type: "button",
-                    class: "btn-cal-switch year",
-                    "aria-label": "연도 선택",
-                    "aria-expanded": v.value === "year",
-                    onClick: $[1] || ($[1] = (K) => j("year"))
-                  }, V(A(p)) + "년 ", 9, Je),
-                  Q(r("div", Qe, [
-                    r("ul", Ze, [
-                      (k(!0), S(F, null, N(A(b), (K) => (k(), S("li", { key: K }, [
-                        r("button", {
-                          type: "button",
-                          class: E({ active: K === A(p) }),
-                          onClick: (U) => Z(K)
-                        }, V(K) + "년", 11, et)
-                      ]))), 128))
-                    ])
-                  ], 512), [
-                    [te, v.value === "year"]
-                  ])
-                ]),
-                r("div", tt, [
-                  r("button", {
-                    type: "button",
-                    class: "btn-cal-switch month",
-                    "aria-label": "월 선택",
-                    "aria-expanded": v.value === "month",
-                    onClick: $[2] || ($[2] = (K) => j("month"))
-                  }, V(A(y).toString().padStart(2, "0")) + "월 ", 9, lt),
-                  Q(r("div", at, [
-                    r("ul", nt, [
-                      (k(!0), S(F, null, N(A(D), (K) => (k(), S("li", { key: K }, [
-                        r("button", {
-                          type: "button",
-                          class: E({ active: K === A(y) }),
-                          onClick: (U) => se(K)
-                        }, V(K.toString().padStart(2, "0")) + "월 ", 11, st)
-                      ]))), 128))
-                    ])
-                  ], 512), [
-                    [te, v.value === "month"]
-                  ])
-                ])
-              ]),
-              r("button", {
-                type: "button",
-                class: "btn-cal-move next",
-                onClick: $[3] || ($[3] = //@ts-ignore
-                (...K) => A(s) && A(s)(...K))
-              }, [...$[6] || ($[6] = [
-                r("span", { class: "sr-only" }, "다음 달", -1)
-              ])])
-            ]),
-            r("div", ot, [
-              r("div", it, [
-                r("table", dt, [
-                  r("caption", null, V(A(p)) + "년 " + V(A(y).toString().padStart(2, "0")) + "월", 1),
-                  $[7] || ($[7] = r("thead", null, [
-                    r("tr", null, [
-                      r("th", null, "일"),
-                      r("th", null, "월"),
-                      r("th", null, "화"),
-                      r("th", null, "수"),
-                      r("th", null, "목"),
-                      r("th", null, "금"),
-                      r("th", null, "토")
-                    ])
-                  ], -1)),
-                  r("tbody", null, [
-                    (k(!0), S(F, null, N(z.value, (K, U) => (k(), S("tr", { key: U }, [
-                      (k(!0), S(F, null, N(K, (W, T) => (k(), S("td", {
-                        key: T,
-                        class: E(H(W)),
-                        "data-date": W.dateString
-                      }, [
-                        r("button", {
-                          type: "button",
-                          class: "btn-set-date",
-                          "aria-pressed": A(f)(W.dateString).isInRange ? "true" : "false",
-                          onClick: (oe) => A(c)(W.dateString)
-                        }, [
-                          r("span", null, V(W.day), 1)
-                        ], 8, ct)
-                      ], 10, rt))), 128))
-                    ]))), 128))
-                  ])
-                ])
-              ])
-            ]),
-            r("div", ut, [
-              r("div", ft, [
-                (k(!0), S(F, null, N(I.value, (K) => (k(), ie(A(Ce), {
-                  id: K.id,
-                  key: K.id,
-                  class: E(K.class),
-                  variant: K.variant,
-                  size: K.size,
-                  onClick: K.handler
-                }, {
-                  default: de(() => [
-                    P(V(K.label), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["id", "class", "variant", "size", "onClick"]))), 128))
-              ])
-            ])
-          ], 544), [
-            [te, i.value]
-          ])
-        ], 2)
-      ], 2)
-    ]));
+    return (I, z) => (D(), T("div", Qe, [p("div", { class: R(C.value) }, [p("div", Ze, [p("input", {
+      id: e.id,
+      name: e.name,
+      class: R(w.value),
+      placeholder: e.placeholder,
+      value: e.modelValue,
+      readonly: e.readonly,
+      disabled: e.disabled,
+      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`),
+      disabled: e.disabled,
+      "aria-expanded": o.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", {
+      class: "calendar-wrap bottom",
+      "aria-label": "달력",
+      tabindex: "0",
+      onKeydown: le
+    }, [
+      p("div", at, [
+        p("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", {
+          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)])])
+      ]),
+      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)]));
   }
-}), pt = _({
+}), Kt = St, wt = Kt, _t = B({
   name: "KrdsTextarea",
   props: {
     modelValue: {
@@ -847,7 +790,6 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       type: String,
       default: "vertical"
     },
-    // BaseFormProps에서 상속
     class: {
       type: String,
       default: void 0
@@ -861,39 +803,43 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       default: void 0
     }
   },
-  emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup"],
-  setup(e, { emit: o }) {
-    const a = B(0);
-    ae(
-      () => e.modelValue,
-      (s) => {
-        a.value = (s || "").length;
-      },
-      { immediate: !0 }
-    );
-    const l = h(() => {
-      const s = ["krds-input"];
-      return e.size && s.push(e.size), e.class && s.push(e.class), s;
-    }), t = h(() => {
-      const s = {};
-      return e.resize && (s.resize = e.resize), s;
-    }), n = (s) => {
-      const d = s.target.value;
-      a.value = d.length, o("update:modelValue", d), o("input", s);
-    }, i = (s) => {
-      o("change", s);
-    }, v = (s) => {
-      o("focus", s);
-    }, p = (s) => {
-      o("blur", s);
-    }, y = (s) => {
-      o("keydown", s);
-    }, g = (s) => {
-      o("keyup", s);
-    }, w = h(() => {
-      const s = {
+  emits: [
+    "update:modelValue",
+    "input",
+    "change",
+    "focus",
+    "blur",
+    "keydown",
+    "keyup"
+  ],
+  setup(e, { emit: a }) {
+    const n = L(0);
+    re(() => e.modelValue, (i) => {
+      n.value = (i || "").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 = {
         class: l.value,
-        style: t.value,
+        style: s.value,
         value: e.modelValue,
         placeholder: e.placeholder,
         name: e.name,
@@ -904,37 +850,32 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
         autofocus: e.autofocus,
         rows: e.rows,
         cols: e.cols,
-        onInput: n,
-        onChange: i,
+        onInput: r,
+        onChange: o,
         onFocus: v,
-        onBlur: p,
-        onKeydown: y,
+        onBlur: f,
+        onKeydown: b,
         onKeyup: g
       };
-      return e.maxlength !== void 0 && (s.maxlength = e.maxlength), e.minlength !== void 0 && (s.minlength = e.minlength), s;
-    }), b = h(() => ["form-conts"]), D = h(() => ["textarea-wrap"]), m = h(() => {
-      if (!e.showCount) return null;
-      const s = a.value, c = e.maxlength;
-      return {
-        current: s,
-        max: c || ""
-      };
-    });
+      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,
+      max: e.maxlength || ""
+    } : null);
     return () => {
-      const s = [u("textarea", w.value)];
-      return m.value && s.push(
-        u("p", { class: "textarea-count" }, [
-          u("span", { class: "count-now" }, m.value.current),
-          u("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")
-        ])
-      ), u("div", { class: b.value }, [u("div", { class: D.value }, s)]);
+      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)]);
     };
   }
-}), mt = _({
+}), Ct = _t, $t = B({
   name: "KrdsSelect",
   props: {
     modelValue: {
-      type: [String, Number, null],
+      type: [
+        String,
+        Number,
+        null
+      ],
       default: null
     },
     size: {
@@ -978,53 +919,55 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       default: void 0
     }
   },
-  emits: ["update:modelValue", "focus", "blur"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
+  emits: [
+    "update:modelValue",
+    "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;
-    }), t = (g) => {
-      const w = g.target, b = w.value === "" ? null : w.value;
-      o("update:modelValue", b);
-    }, n = (g) => {
-      o("focus", g);
-    }, i = (g) => {
-      o("blur", g);
-    }, v = h(() => ({
+    }), s = (g) => {
+      const _ = g.target;
+      a("update:modelValue", _.value === "" ? null : _.value);
+    }, r = (g) => {
+      a("focus", g);
+    }, o = (g) => {
+      a("blur", g);
+    }, v = k(() => ({
       class: l.value,
       value: e.modelValue ?? "",
       title: e.title || e.placeholder,
       name: e.name,
       id: e.id,
       disabled: e.disabled || e.readonly,
-      onChange: t,
-      onFocus: n,
-      onBlur: i
-    })), p = h(() => {
+      onChange: s,
+      onFocus: r,
+      onBlur: o
+    })), f = k(() => {
       const g = ["form-conts"];
       return e.state !== "default" && g.push(`is-${e.state}`), g;
-    }), y = () => {
+    }), b = () => {
       const g = [];
-      return e.placeholder && !e.modelValue && g.push(u("option", { value: "", disabled: !0, selected: !0 }, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((w) => {
-        g.push(
-          u(
-            "option",
-            {
-              value: w.value,
-              disabled: w.disabled,
-              selected: w.value === e.modelValue
-            },
-            w.label
-          )
-        );
-      }), a.default && g.push(...a.default()), g;
+      return e.placeholder && !e.modelValue && g.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;
     };
     return () => {
-      const g = u("select", v.value, y());
-      return e.sort ? g : u("div", { class: p.value }, [g]);
+      const g = t("select", v.value, b());
+      return e.sort ? g : t("div", { class: f.value }, [g]);
     };
   }
-}), ht = _({
+}), xt = $t, Bt = 0, Lt = B({
   name: "KrdsFileUpload",
   props: {
     modelValue: {
@@ -1046,7 +989,6 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     maxFileSize: {
       type: Number,
       default: 20 * 1024 * 1024
-      // 20MB
     },
     multiple: {
       type: Boolean,
@@ -1088,7 +1030,6 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       type: Boolean,
       default: !0
     },
-    // BaseFormProps에서 상속
     name: {
       type: String,
       default: void 0
@@ -1127,15 +1068,128 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     "download",
     "preview"
   ],
-  setup(e, { emit: o }) {
-    B(!1), h(() => {
-      const l = ["krds-file-upload", "line"];
-      return e.class && l.push(e.class), l;
-    });
-    const a = h(() => e.modelValue?.length || 0);
-    return h(() => !e.disabled && a.value < e.maxFiles), () => null;
+  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)} 미만의 파일만 등록할 수 있습니다.`;
+      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 "허용되지 않는 파일 형식입니다.";
+      }
+      return null;
+    }, g = (y) => {
+      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 = {
+          id: f(),
+          file: A,
+          name: A.name,
+          size: A.size,
+          type: A.type,
+          status: j ? "error" : "pending",
+          errorMessage: j || void 0
+        };
+        F.push(O), j ? a("file-error", O, j) : a("file-added", O);
+      }
+      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 = () => {
+      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 = () => {
+      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", {
+      class: "file-upload",
+      onDragover: S,
+      onDragleave: V,
+      onDrop: d
+    }, [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,
+      hidden: !0,
+      accept: e.accept || void 0,
+      multiple: e.multiple,
+      onChange: _
+    }), t("label", { for: s }, [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", {
+        class: "krds-spinner",
+        role: "status"
+      }, [t("span", { class: "sr-only" }, "업로드 중")])) : y.downloadUrl ? (e.showDownload && K.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", {
+        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", {
+        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));
+      }
+      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", {
+        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);
+    };
+    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,
+        style: e.style || void 0
+      }, y);
+    };
   }
-}), yt = _({
+}), Dt = Lt, Tt = B({
   name: "KrdsBadge",
   props: {
     type: {
@@ -1160,27 +1214,23 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const n = ["krds-badge"];
-      return n.push(`${e.type}-${e.color}`), e.size && n.push(e.size), e.number && n.push("number"), e.class && n.push(e.class), n;
-    }), t = (n) => {
-      o("click", n);
+  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);
     };
-    return () => u(
-      "span",
-      {
-        type: e.type,
-        color: e.color,
-        size: e.size,
-        number: e.number,
-        class: l.value,
-        onClick: t
-      },
-      a.default?.()
-    );
+    return () => t("span", {
+      type: e.type,
+      color: e.color,
+      size: e.size,
+      number: e.number,
+      class: l.value,
+      onClick: s
+    }, n.default?.());
   }
-}), gt = _({
+}), Vt = Tt, zt = B({
   name: "KrdsTag",
   props: {
     link: {
@@ -1205,40 +1255,30 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
     }
   },
   emits: ["remove"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const i = ["krds-btn-tag"];
-      return e.link && i.push("link"), e.class && i.push(e.class), i;
-    }), t = (i) => {
-      o("remove", i);
-    }, n = () => u(
-      "button",
-      {
-        type: "button",
-        class: "btn-delete",
-        onClick: t
-      },
-      [u("span", { class: "sr-only" }, "삭제")]
-    );
+  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", {
+      type: "button",
+      class: "btn-delete",
+      onClick: s
+    }, [t("span", { class: "sr-only" }, "삭제")]);
     return () => {
-      const i = [], v = a.default?.();
-      if (v && i.push(v), e.link || i.push(n()), e.link) {
-        const p = {
+      const o = [], v = n.default?.();
+      if (v && o.push(v), e.link || o.push(r()), e.link) {
+        const f = {
           href: e.href,
           class: l.value
         };
-        return e.target && (p.target = e.target), e.rel && (p.rel = e.rel), u("a", p, i);
+        return e.target && (f.target = e.target), e.rel && (f.rel = e.rel), t("a", f, o);
       }
-      return u(
-        "span",
-        {
-          class: l.value
-        },
-        i
-      );
+      return t("span", { class: l.value }, o);
     };
   }
-}), bt = _({
+}), It = zt, Et = B({
   name: "KrdsTagGroup",
   props: {
     size: {
@@ -1250,62 +1290,44 @@ const He = { class: "form-conts" }, je = { class: "calendar-input" }, We = ["id"
       default: void 0
     }
   },
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: a }) {
+    const n = k(() => {
       const l = ["krds-tag-wrap"];
       return e.size && l.push(e.size), e.class && l.push(e.class), l;
     });
-    return () => u(
-      "div",
-      {
-        class: a.value
-      },
-      o.default?.()
-    );
+    return () => t("div", { class: n.value }, a.default?.());
   }
-}), kt = _({
+}), Ft = Et, Mt = B({
   name: "KrdsMasthead",
-  props: {
-    class: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: { class: {
+    type: String,
+    default: void 0
+  } },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = h(() => {
-      const n = [""];
-      return e.class && n.push(e.class), n;
-    }), t = (n) => {
-      o("click", n);
+  setup(e, { emit: a, slots: n }) {
+    const l = k(() => {
+      const r = [""];
+      return e.class && r.push(e.class), r;
+    }), s = (r) => {
+      a("click", r);
     };
-    return () => u(
-      "div",
-      {
-        id: "krds-masthead",
-        class: l.value,
-        onClick: t
-      },
-      [
-        u("div", { class: "toggle-wrap" }, [
-          u("div", { class: "toggle-head" }, [u("div", { class: "inner" }, [u("span", { class: "nuri-txt" }, a.default?.())])])
-        ])
-      ]
-    );
+    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?.())])])])]);
   }
-});
-let St = 0;
-function ce(e = "krds") {
-  return `${e}-${++St}`;
+}), At = Mt, Rt = 0;
+function Gl(e = "krds") {
+  return `${e}-${++Rt}`;
 }
-function Il() {
-  const e = Date.now().toString(36).slice(-4), o = Math.random().toString(36).substring(2, 5);
-  return `${e}${o}`;
+function Yl() {
+  return `${Date.now().toString(36).slice(-4)}${Math.random().toString(36).substring(2, 5)}`;
 }
-function ue(...e) {
+function ve(...e) {
   return e.filter(Boolean).join(" ");
 }
-const wt = _({
+var Pt = B({
   name: "KrdsToggleSwitch",
   props: {
     modelValue: {
@@ -1347,48 +1369,23 @@ const wt = _({
     }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: o, attrs: a }) {
-    const l = h(() => e.modelValue), t = h(() => ue("krds-form-toggle-switch", e.size, e.class)), n = (v) => {
-      if (e.disabled)
-        return;
-      const y = v.target.checked;
-      o("update:modelValue", y), o("change", y);
-    }, i = h(() => e.id || ce("toggle-switch"));
-    return () => u(
-      "div",
-      {
-        class: t.value
-      },
-      [
-        u("input", {
-          type: "checkbox",
-          id: i.value,
-          name: e.name,
-          checked: l.value,
-          disabled: e.disabled,
-          onChange: n,
-          ...a
-        }),
-        u(
-          "label",
-          {
-            for: i.value
-          },
-          [
-            u(
-              "span",
-              {
-                class: "switch-toggle"
-              },
-              [u("i")]
-            ),
-            e.label || ""
-          ]
-        )
-      ]
-    );
+  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) => {
+      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", {
+      type: "checkbox",
+      id: v.value,
+      name: e.name,
+      checked: s.value,
+      disabled: e.disabled,
+      onChange: o,
+      ...n
+    }), t("label", { for: v.value }, [t("span", { class: "switch-toggle" }, [t("i")]), e.label || ""])]);
   }
-}), Ct = _({
+}), Ht = Pt, qt = B({
   name: "KrdsCheckArea",
   props: {
     class: {
@@ -1400,19 +1397,13 @@ const wt = _({
       default: !1
     }
   },
-  setup(e, { slots: o }) {
+  setup(e, { slots: a }) {
     return () => {
-      const a = ["krds-check-area"];
-      return e.column && a.push("chk-column"), e.class && a.push(e.class), u(
-        "div",
-        {
-          class: a
-        },
-        o.default?.()
-      );
+      const n = ["krds-check-area"];
+      return e.column && n.push("chk-column"), e.class && n.push(e.class), t("div", { class: n }, a.default?.());
     };
   }
-}), xt = _({
+}), Ot = qt, Nt = B({
   name: "KrdsCheckbox",
   props: {
     modelValue: {
@@ -1443,52 +1434,41 @@ const wt = _({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: o, attrs: a, slots: l }) {
-    const t = h(() => e.modelValue), n = h(() => {
-      const p = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ue(p, e.size, e.class);
-    }), i = (p) => {
-      if (e.disabled)
-        return;
-      const g = p.target.checked;
-      o("update:modelValue", g);
-    }, v = h(() => e.id || ce("checkbox"));
+  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) => {
+      if (e.disabled) return;
+      const g = b.target.checked;
+      a("update:modelValue", g);
+    }, f = k(() => e.id || s);
     return () => {
-      const p = [
-        u("input", {
-          type: "checkbox",
-          id: v.value,
-          checked: t.value,
-          disabled: e.disabled,
-          onChange: i,
-          ...a
-        }),
-        u(
-          "label",
-          {
-            for: v.value
-          },
-          l.default?.()
-        )
-      ];
-      return l.description && !e.chip && p.push(u("div", { class: "krds-form-check-cnt" }, u("p", { class: "krds-form-check-p" }, l.description()))), u(
-        "div",
-        {
-          class: n.value
-        },
-        p
-      );
+      const b = [t("input", {
+        type: "checkbox",
+        id: f.value,
+        checked: r.value,
+        disabled: e.disabled,
+        onChange: v,
+        ...n
+      }), 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);
     };
   }
-}), $t = _({
+}), jt = Nt, Wt = B({
   name: "KrdsRadio",
   props: {
     modelValue: {
-      type: [String, Number, Boolean],
+      type: [
+        String,
+        Number,
+        Boolean
+      ],
       default: void 0
     },
     value: {
-      type: [String, Number, Boolean],
+      type: [
+        String,
+        Number,
+        Boolean
+      ],
       required: !0
     },
     disabled: {
@@ -1519,45 +1499,25 @@ const wt = _({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { emit: o, attrs: a, slots: l }) {
-    const t = h(() => e.modelValue === e.value), n = h(() => {
-      const y = e.chip ? "krds-form-chip" : "krds-form-check";
-      return ue(y, e.size, e.class);
-    }), i = (y) => {
-      if (e.disabled)
-        return;
-      y.target.checked && o("update:modelValue", e.value);
-    }, v = h(() => e.id || ce("radio")), p = h(() => e.name);
+  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);
     return () => {
-      const y = [
-        u("input", {
-          type: "radio",
-          id: v.value,
-          name: p.value,
-          value: String(e.value),
-          checked: t.value,
-          disabled: e.disabled,
-          onChange: i,
-          ...a
-        }),
-        u(
-          "label",
-          {
-            for: v.value
-          },
-          l.default?.()
-        )
-      ];
-      return l.description && !e.chip && y.push(u("div", { class: "krds-form-check-cnt" }, u("p", { class: "krds-form-check-p" }, l.description()))), u(
-        "div",
-        {
-          class: n.value
-        },
-        y
-      );
+      const g = [t("input", {
+        type: "radio",
+        id: f.value,
+        name: b.value,
+        value: String(e.value),
+        checked: r.value,
+        disabled: e.disabled,
+        onChange: v,
+        ...n
+      }), 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);
     };
   }
-}), _t = _({
+}), Gt = Wt, Yt = Ce, Ut = B({
   name: "KrdsStepIndicator",
   props: {
     modelValue: {
@@ -1570,30 +1530,24 @@ const wt = _({
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: a }) {
+    const n = k(() => {
       const v = ["krds-step-wrap"];
       return e.class && v.push(e.class), v;
     }), l = (v) => {
-      const p = e.modelValue || 0;
-      return v < p ? "done" : v === p ? "active" : "pending";
-    }, t = B(0), n = () => {
-      t.value = 0;
-    }, i = () => t.value++;
-    return Ve("stepIndicator", {
-      activeStep: h(() => e.modelValue || 0),
+      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),
       getStepStatus: l,
-      getNextStepIndex: i,
-      resetStepIndex: n
-    }), () => (n(), u(
-      "ol",
-      {
-        class: a.value
-      },
-      o.default?.()
-    ));
+      getNextStepIndex: o,
+      resetStepIndex: r
+    }), () => (r(), t("ol", { class: n.value }, a.default?.()));
   }
-}), Bt = _({
+}), Xt = Ut, Jt = B({
   name: "KrdsStep",
   props: {
     step: {
@@ -1614,117 +1568,88 @@ const wt = _({
     }
   },
   emits: ["click"],
-  setup(e, { emit: o, slots: a }) {
-    const l = Ie("stepIndicator"), t = l ? l.getNextStepIndex() : -1, n = h(() => e.status ? e.status : l && t >= 0 ? l.getStepStatus(t) : "pending"), i = h(() => {
-      const p = [n.value];
-      return e.class && p.push(e.class), p;
-    }), v = (p) => {
-      o("click", p, e.step);
+  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];
+      return e.class && f.push(e.class), f;
+    }), v = (f) => {
+      a("click", f, e.step);
     };
     return () => {
-      const p = n.value === "active";
-      return u(
-        "li",
-        {
-          class: i.value,
-          onClick: v
-        },
-        [
-          u("span", [
-            // 현재 단계 표시 (활성 상태일 때만)
-            p && u("em", { class: "sr-only" }, "현재단계"),
-            // 단계 번호
-            u("i", { class: "step" }, e.step),
-            // 단계 제목
-            u("span", { class: "step-tit" }, e.title),
-            // 슬롯 내용 (추가 콘텐츠가 있는 경우)
-            a.default?.()
-          ])
-        ]
-      );
+      const f = r.value === "active";
+      return t("li", {
+        class: o.value,
+        onClick: v
+      }, [t("span", [
+        f && t("em", { class: "sr-only" }, "현재단계"),
+        t("i", { class: "step" }, e.step),
+        t("span", { class: "step-tit" }, e.title),
+        n.default?.()
+      ])]);
     };
   }
-}), Kt = _({
+}), Qt = Jt, Zt = B({
   name: "KrdsSkipLink",
   props: {
-    /**
-     * 건너뛸 대상 요소의 ID
-     * @example '#main-content', '#breadcrumb'
-     */
     href: {
       type: String,
       required: !0,
       validator: (e) => e.startsWith("#")
     },
-    /**
-     * 추가 CSS 클래스
-     */
     class: {
-      type: [String, Array, Object],
+      type: [
+        String,
+        Array,
+        Object
+      ],
       default: void 0
     },
-    /**
-     * 요소 ID
-     */
     id: {
       type: String,
       default: "krds-skip-link"
     }
   },
-  setup(e, { slots: o }) {
-    return () => u(
-      "div",
-      {
-        id: e.id,
-        class: e.class
-      },
-      [
-        u(
-          "a",
-          {
-            href: e.href
-          },
-          o.default?.()
-        )
-      ]
-    );
+  setup(e, { slots: a }) {
+    return () => t("div", {
+      id: e.id,
+      class: e.class
+    }, [t("a", { href: e.href }, a.default?.())]);
   }
-}), Dt = ["id", "aria-label"], Vt = { class: "breadcrumb" }, It = ["href", "aria-current", "onClick"], zt = { key: 0 }, Et = /* @__PURE__ */ _({
+}), ea = Zt, ta = ["id", "aria-label"], aa = { class: "breadcrumb" }, la = [
+  "href",
+  "aria-current",
+  "onClick"
+], sa = { key: 0 }, na = /* @__PURE__ */ B({
   __name: "KrdsBreadcrumb",
   props: {
     items: {},
     id: { default: void 0 },
     ariaLabel: { default: "현재 경로" },
-    showHomeIcon: { type: Boolean, default: !0 }
+    showHomeIcon: {
+      type: Boolean,
+      default: !0
+    }
   },
   emits: ["item-click"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = (i) => i === a.items.length - 1, n = (i, v) => {
-      i.onClick && i.onClick(v), l("item-click", i, v);
+  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);
     };
-    return (i, v) => (k(), S("nav", {
+    return (o, v) => (D(), T("nav", {
       id: e.id,
       class: "krds-breadcrumb-wrap",
       "aria-label": e.ariaLabel
-    }, [
-      r("ol", Vt, [
-        (k(!0), S(F, null, N(e.items, (p, y) => (k(), S("li", {
-          key: `breadcrumb-${y}`,
-          class: E({ home: y === 0 && e.showHomeIcon })
-        }, [
-          r("a", {
-            href: p.href || "#",
-            class: "txt",
-            "aria-current": t(y) ? "page" : void 0,
-            onClick: (g) => n(p, g)
-          }, [
-            y === 0 && e.showHomeIcon ? Y("", !0) : (k(), S("span", zt, V(p.text), 1))
-          ], 8, It)
-        ], 2))), 128))
-      ])
-    ], 8, Dt));
+    }, [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));
   }
-}), Lt = _({
+}), ra = na, ia = ra, oa = B({
   name: "KrdsInPageNavigation",
   props: {
     title: {
@@ -1758,107 +1683,97 @@ const wt = _({
   },
   emits: ["itemClick"],
   slots: Object,
-  setup(e, { emit: o, slots: a }) {
-    const l = B(""), t = B(/* @__PURE__ */ new Map()), n = h(() => {
-      const m = ["krds-in-page-navigation-type"];
-      return e.class && m.push(e.class), m;
-    }), i = () => {
-      const m = e.headerTopSelector, s = e.headerInnerSelector, c = document.querySelector(m)?.clientHeight || 0, d = document.querySelector(s)?.clientHeight || 0;
-      return c + d;
-    }, v = (m, s) => {
-      if (o("itemClick", m, s), m.href.startsWith("#")) {
-        s.preventDefault();
-        const c = document.querySelector(m.href);
+  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 d = i();
+          const u = o();
           if (window.scrollTo({
             left: 0,
-            top: c.getBoundingClientRect().top + window.scrollY - d,
+            top: c.getBoundingClientRect().top + window.scrollY - u,
             behavior: "smooth"
-          }), l.value = m.href, s instanceof KeyboardEvent) {
-            const f = c.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
-            f && f instanceof HTMLElement && (f.setAttribute("tabindex", "-1"), f.focus({ preventScroll: !0 }));
+          }), 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 }));
           }
         }
       }
-    }, p = () => {
-      t.value.clear(), e.items && e.items.filter((m) => m.href.startsWith("#")).forEach((m) => {
-        const s = document.querySelector(m.href);
-        s && t.value.set(m.href, s);
+    }, 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);
       });
-    }, y = () => {
-      if (!e.autoActive || !e.items || t.value.size === 0) return;
-      const m = window.innerHeight, s = Math.ceil(m / 5), c = window.scrollY + m, d = document.body.scrollHeight, f = e.items.filter((z) => z.href.startsWith("#") && t.value.has(z.href)).map((z) => ({
-        href: z.href,
-        element: t.value.get(z.href),
-        item: z
+    }, 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: $
       }));
-      if (f.length === 0) return;
-      const x = f[0], R = f[f.length - 1], L = x.element.offsetTop;
-      let M = "";
-      if (c >= d)
-        M = R.href;
-      else if (window.scrollY <= L)
-        M = x.href;
-      else
-        for (const z of f) {
-          const H = z.element.offsetHeight, I = z.element.offsetTop - s;
-          if (window.scrollY > I && window.scrollY <= I + H) {
-            M = z.href;
-            break;
-          }
+      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;
+          break;
         }
-      M && M !== l.value && (l.value = M);
+      }
+      x && x !== l.value && (l.value = x);
     }, g = () => {
       if (!e.items) return;
-      const m = e.items.find((s) => s.active);
-      m ? l.value = m.href : e.items.length > 0 && (l.value = e.items[0].href);
+      const d = e.items.find((i) => i.active);
+      d ? l.value = d.href : e.items.length > 0 && (l.value = e.items[0].href);
     };
-    le(() => {
+    te(() => {
       if (g(), e.autoActive) {
-        p(), y(), window.addEventListener("scroll", y, { passive: !0 });
-        const m = new MutationObserver(() => {
-          p();
+        f(), b(), window.addEventListener("scroll", b, { passive: !0 });
+        const d = new MutationObserver(() => {
+          f();
         });
-        m.observe(document.body, {
+        d.observe(document.body, {
           childList: !0,
           subtree: !0
-        }), J(() => {
-          m.disconnect();
+        }), Z(() => {
+          d.disconnect();
         });
       }
-    }), J(() => {
-      e.autoActive && (window.removeEventListener("scroll", y), t.value.clear());
+    }), Z(() => {
+      e.autoActive && (window.removeEventListener("scroll", b), s.value.clear());
     });
-    const w = () => !e.caption && !e.title ? null : u("div", { class: "in-page-navigation-header" }, [
-      e.caption && u("p", { class: "quick-caption" }, e.caption),
-      e.title && u("p", { class: "quick-title" }, e.title)
-    ]), b = () => {
-      if (!e.items) return null;
-      const m = e.items.map((s) => {
-        const c = l.value === s.href || !e.autoActive && s.active;
-        return u("li", { key: s.href }, [
-          u(
-            "a",
-            {
-              href: s.href,
-              class: c ? "active" : "",
-              onClick: (d) => v(s, d),
-              onKeydown: (d) => {
-                (d.key === "Enter" || d.key === " ") && (d.preventDefault(), v(s, d));
-              }
-            },
-            s.text
-          )
-        ]);
-      });
-      return u("nav", { class: "in-page-navigation-list" }, [u("ul", {}, m)]);
-    }, D = () => a.action ? u("div", { class: "in-page-navigation-action" }, [a.action()]) : null;
-    return () => u("div", { class: n.value }, [
-      u("div", { class: "krds-in-page-navigation-area" }, [w(), b(), D()].filter(Boolean))
-    ]);
+    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" }, [
+      _(),
+      S(),
+      V()
+    ].filter(Boolean))]);
   }
-}), Mt = ["id"], Rt = { class: "page-links" }, Tt = ["href", "aria-current", "onClick"], At = { key: 0 }, Pt = ["aria-label"], Ft = /* @__PURE__ */ _({
+}), da = oa, ua = ["id"], ca = { class: "page-links" }, fa = [
+  "href",
+  "aria-current",
+  "onClick"
+], va = { key: 0 }, pa = ["aria-label"], ha = /* @__PURE__ */ B({
   __name: "KrdsPagination",
   props: {
     modelValue: { default: 1 },
@@ -1869,184 +1784,154 @@ const wt = _({
     pageRange: { default: 8 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = h(() => Math.max(1, a.min)), n = h(() => a.modelValue ?? t.value), i = h(() => n.value <= t.value), v = h(() => n.value >= a.max), p = h(() => {
-      if (!i.value)
+  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)
         return "#";
-    }), y = h(() => {
+    }), b = k(() => {
       if (!v.value)
         return "#";
-    }), g = h(() => {
-      const { pageRange: m, max: s } = a, c = 1, d = [];
-      if (s <= m + 2 * c)
-        for (let f = t.value; f <= s; f++)
-          d.push({
-            type: "page",
-            key: `page-${f}`,
-            page: f,
-            href: "#"
-          });
+    }), 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({
+        type: "page",
+        key: `page-${h}`,
+        page: h,
+        href: "#"
+      });
       else {
-        const f = Math.min(c, s), x = Math.max(s - c + 1, 1), R = Math.max(t.value, n.value - Math.floor(m / 2)), L = Math.min(s, R + m - 1), M = Math.max(t.value, L - m + 1);
-        for (let I = t.value; I <= f; I++)
-          d.push({
-            type: "page",
-            key: `page-${I}`,
-            page: I,
-            href: "#"
-          });
-        M > f + 1 && d.push({
+        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({
+          type: "page",
+          key: `page-${K}`,
+          page: K,
+          href: "#"
+        });
+        x > h + 1 && u.push({
           type: "ellipsis",
           key: "ellipsis-left",
           ariaLabel: "페이지 생략"
         });
-        const z = Math.max(M, f + 1), H = Math.min(L, x - 1);
-        for (let I = z; I <= H; I++)
-          d.push({
-            type: "page",
-            key: `page-${I}`,
-            page: I,
-            href: "#"
-          });
-        L < x - 1 && d.push({
+        const $ = Math.max(x, h + 1), y = Math.min(C, m - 1);
+        for (let K = $; K <= y; K++) u.push({
+          type: "page",
+          key: `page-${K}`,
+          page: K,
+          href: "#"
+        });
+        C < m - 1 && u.push({
           type: "ellipsis",
           key: "ellipsis-right",
           ariaLabel: "페이지 생략"
         });
-        for (let I = x; I <= s; I++)
-          d.push({
-            type: "page",
-            key: `page-${I}`,
-            page: I,
-            href: "#"
-          });
+        for (let K = m; K <= i; K++) u.push({
+          type: "page",
+          key: `page-${K}`,
+          page: K,
+          href: "#"
+        });
       }
-      return d;
-    }), w = (m, s) => {
-      if (m === n.value) {
-        s.preventDefault();
+      return u;
+    }), _ = (d, i) => {
+      if (d === r.value) {
+        i.preventDefault();
         return;
       }
-      l("update:modelValue", m);
-    }, b = (m) => {
-      if (i.value) {
-        m.preventDefault();
+      l("update:modelValue", d);
+    }, S = (d) => {
+      if (o.value) {
+        d.preventDefault();
         return;
       }
-      const s = n.value - 1;
-      l("update:modelValue", s);
-    }, D = (m) => {
+      l("update:modelValue", r.value - 1);
+    }, V = (d) => {
       if (v.value) {
-        m.preventDefault();
+        d.preventDefault();
         return;
       }
-      const s = n.value + 1;
-      l("update:modelValue", s);
+      l("update:modelValue", r.value + 1);
     };
-    return (m, s) => {
-      const c = ze("sr-only");
-      return k(), S("div", {
+    return (d, i) => {
+      const c = Me("sr-only");
+      return D(), T("div", {
         id: e.id,
         class: "krds-pagination"
       }, [
-        (k(), ie(ye(i.value ? "span" : "a"), {
-          href: i.value ? void 0 : p.value,
-          class: E(["page-navi", "prev", { disabled: i.value }]),
-          onClick: b
+        (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: de(() => [...s[0] || (s[0] = [
-            P(" 이전 ", -1)
-          ])]),
+          default: ue(() => [...i[0] || (i[0] = [N(" 이전 ", -1)])]),
           _: 1
         }, 8, ["href", "class"])),
-        r("div", Rt, [
-          (k(!0), S(F, null, N(g.value, (d) => (k(), S(F, {
-            key: d.key
-          }, [
-            d.type === "page" ? (k(), S("a", {
-              key: 0,
-              href: d.href || "#",
-              class: E(["page-link", { active: d.page === n.value }]),
-              "aria-current": d.page === n.value ? "page" : void 0,
-              onClick: (f) => w(d.page, f)
-            }, [
-              d.page === n.value ? Q((k(), S("span", At, [...s[1] || (s[1] = [
-                P("현재페이지", -1)
-              ])])), [
-                [c]
-              ]) : Y("", !0),
-              P(" " + V(d.page), 1)
-            ], 10, Tt)) : d.type === "ellipsis" ? (k(), S("span", {
-              key: 1,
-              class: "page-link link-dot",
-              "aria-label": d.ariaLabel
-            }, null, 8, Pt)) : Y("", !0)
-          ], 64))), 128))
-        ]),
-        (k(), ie(ye(v.value ? "span" : "a"), {
-          href: v.value ? void 0 : y.value,
-          class: E(["page-navi", "next", { disabled: v.value }]),
-          onClick: D
+        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: de(() => [...s[2] || (s[2] = [
-            P(" 다음 ", -1)
-          ])]),
+          default: ue(() => [...i[2] || (i[2] = [N(" 다음 ", -1)])]),
           _: 1
         }, 8, ["href", "class"]))
-      ], 8, Mt);
+      ], 8, ua);
     };
   }
-}), Ot = { class: "inner help-panel-flexible" }, qt = { class: "help-panel-wrap" }, Nt = { class: "help-conts-area" }, Ht = /* @__PURE__ */ _({
+}), 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",
-  props: {
-    modelValue: { type: Boolean, default: !1 }
-  },
+  props: { modelValue: {
+    type: Boolean,
+    default: !1
+  } },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = h({
-      get: () => a.modelValue,
+  setup(e, { emit: a }) {
+    const n = e, l = a, s = k({
+      get: () => n.modelValue,
       set: (v) => l("update:modelValue", v)
-    }), n = () => {
-      t.value = !0;
-    }, i = () => {
-      t.value = !1;
+    }), r = () => {
+      s.value = !0;
+    }, o = () => {
+      s.value = !1;
     };
-    return (v, p) => (k(), S("div", Ot, [
-      r("button", {
-        type: "button",
-        class: "krds-btn small tertiary btn-help-panel expand btn-help-exec",
-        onClick: n
-      }, [...p[0] || (p[0] = [
-        r("i", { class: "svg-icon ico-fold" }, null, -1),
-        P(" 도움말 ", -1)
-      ])]),
-      r("div", {
-        class: E(["krds-help-panel", { expand: t.value }])
-      }, [
-        r("div", qt, [
-          r("div", Nt, [
-            G(v.$slots, "default"),
-            r("button", {
-              type: "button",
-              class: "krds-btn small tertiary btn-help-panel fold",
-              onClick: i
-            }, [...p[1] || (p[1] = [
-              r("span", { class: "sr-only" }, "도움말", -1),
-              P(" 접어두기 ", -1),
-              r("i", { class: "svg-icon ico-angle right" }, null, -1)
-            ])])
-          ])
-        ])
-      ], 2)
-    ]));
+    return (v, f) => (D(), T("div", ga, [p("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", {
+      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)]));
   }
-}), jt = { class: "tooltip-action" }, Wt = {
+}), Ka = Sa, wa = Ka, _a = { class: "tooltip-action" }, Ca = {
   key: 0,
   class: "svg-icon ico-help"
-}, Yt = {
+}, $a = {
   key: 1,
   class: "svg-icon ico-tooltip"
-}, Gt = { class: "tooltip-title" }, Ut = { class: "tooltip-contents" }, Xt = /* @__PURE__ */ _({
+}, xa = { class: "tooltip-title" }, Ba = { class: "tooltip-contents" }, La = /* @__PURE__ */ B({
   __name: "KrdsContextualHelp",
   props: {
     tooltipTitle: { default: "도움말 제목" },
@@ -2054,84 +1939,70 @@ const wt = _({
     position: { default: "top left" }
   },
   setup(e) {
-    const o = e, a = B(), l = B(), t = B(), n = B(), i = B(!1), v = () => {
-      const s = i.value;
-      g(), s || p();
-    }, p = () => {
-      if (!t.value || !l.value) return;
-      i.value = !0, t.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), t.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), w();
-    }, y = () => {
-      !t.value || !l.value || (i.value = !1, t.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
+    const a = e, n = L(), l = L(), s = L(), r = L(), o = L(!1), v = () => {
+      const i = o.value;
+      g(), i || 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 s = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), c = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
-      s.forEach((d) => {
-        d.style.display = "none";
-      }), c.forEach((d) => {
-        d.setAttribute("aria-expanded", "false");
-      }), i.value = !1;
-    }, w = () => {
-      if (!a.value || !t.value) return;
-      const s = window.innerWidth <= 768, c = a.value.querySelector(".tooltip-action");
-      if (s) {
-        const f = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], R = c.getBoundingClientRect().left - parseInt(f), L = document.body.clientWidth - parseInt(f) * 2;
-        t.value.style.left = `-${R}px`, t.value.style.width = `${L}px`;
+      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`;
       } else
-        t.value.style.left = "", t.value.style.right = "", t.value.style.width = "360px";
-    }, b = (s) => {
-      (s.key === "Escape" || s.key === "Esc") && g();
-    }, D = (s) => {
-      s.target.closest(".tooltip-action") || g();
-    }, m = () => {
-      i.value && w();
+        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 && _();
     };
-    return le(() => {
-      a.value && (l.value && l.value.setAttribute("aria-expanded", "false"), t.value && t.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", b), document.addEventListener("click", D), window.addEventListener("resize", m));
-    }), J(() => {
-      document.removeEventListener("keydown", b), document.removeEventListener("click", D), window.removeEventListener("resize", m);
-    }), (s, c) => (k(), S("div", {
+    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: a,
-      class: E(["krds-contextual-help", o.position])
+      ref: n,
+      class: R(["krds-contextual-help", a.position])
+    }, [p("div", _a, [p("button", {
+      ref_key: "tooltipBtnRef",
+      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,
+      class: "tooltip-popover",
+      role: "tooltip"
     }, [
-      r("div", jt, [
-        r("button", {
-          ref_key: "tooltipBtnRef",
-          ref: l,
-          type: "button",
-          class: "krds-btn medium icon tooltip-btn",
-          onClick: v
-        }, [
-          c[0] || (c[0] = r("span", { class: "sr-only" }, "도움말", -1)),
-          o.helpIcon ? (k(), S("i", Wt)) : (k(), S("i", Yt))
-        ], 512),
-        r("div", {
-          ref_key: "tooltipPopoverRef",
-          ref: t,
-          class: "tooltip-popover",
-          role: "tooltip"
-        }, [
-          r("h4", Gt, V(o.tooltipTitle), 1),
-          r("div", Ut, [
-            G(s.$slots, "default")
-          ]),
-          r("button", {
-            ref_key: "closeBtnRef",
-            ref: n,
-            type: "button",
-            class: "krds-btn xsmall icon tooltip-close",
-            onClick: y
-          }, [...c[1] || (c[1] = [
-            r("span", { class: "sr-only" }, "닫기", -1),
-            r("i", { class: "svg-icon ico-modal-close" }, null, -1)
-          ])], 512)
-        ], 512)
-      ])
-    ], 2));
+      p("h4", xa, M(a.tooltipTitle), 1),
+      p("div", Ba, [J(i.$slots, "default")]),
+      p("button", {
+        ref_key: "closeBtnRef",
+        ref: r,
+        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));
   }
-}), Jt = {
+}), Da = La, Ta = Da, Va = {
   key: 0,
   class: "coach-balloon"
-}, Qt = { class: "coach-tit" }, Zt = { class: "desc" }, el = { class: "coach-controls" }, tl = { class: "num" }, ll = { class: "btn-wrap" }, al = /* @__PURE__ */ _({
+}, za = { class: "coach-tit" }, Ia = { class: "desc" }, Ea = { class: "coach-controls" }, Fa = { class: "num" }, Ma = { class: "btn-wrap" }, Aa = /* @__PURE__ */ B({
   __name: "KrdsCoachMark",
   props: {
     coachMarkClass: { default: "" },
@@ -2143,146 +2014,137 @@ const wt = _({
     id: {}
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: o }) {
-    const a = e, l = h(() => {
-      const p = a.activeStep - 1;
-      return a.stepsData && p >= 0 && p < a.stepsData.length ? a.stepsData[p] : null;
-    }), t = o, n = () => {
-      a.activeStep > 1 && t("update:modelValue", a.activeStep - 1);
-    }, i = () => {
-      a.activeStep < a.stepsData.length && t("update:modelValue", a.activeStep + 1);
+  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 = () => {
-      t("close");
+      s("close");
     };
-    return (p, y) => (k(), S("div", {
-      class: E(["krds-coach-mark", e.coachMarkClass]),
+    return (f, b) => (D(), T("div", {
+      class: R(["krds-coach-mark", e.coachMarkClass]),
       style: ne(e.style)
-    }, [
-      e.modelValue === e.activeStep && l.value ? (k(), S("div", Jt, [
-        y[2] || (y[2] = r("h5", { class: "sr-only" }, "따라하기 가이드", -1)),
-        r("h6", Qt, V(e.activeStep) + "단계 : " + V(l.value.title), 1),
-        r("p", Zt, V(l.value.description), 1),
-        r("div", el, [
-          r("div", tl, [
-            y[0] || (y[0] = r("span", { class: "sr-only" }, "현재 단계", -1)),
-            r("strong", null, V(e.activeStep), 1),
-            y[1] || (y[1] = r("span", { class: "sr-only" }, "총 단계", -1)),
-            r("span", null, V(e.stepsData.length), 1)
-          ]),
-          r("div", ll, [
-            r("button", {
-              type: "button",
-              class: "krds-btn small text",
-              onClick: v
-            }, "그만보기"),
-            e.activeStep !== 1 ? (k(), S("button", {
-              key: 0,
-              type: "button",
-              class: "krds-btn small text",
-              onClick: n
-            }, "이전으로")) : Y("", !0),
-            e.activeStep !== e.stepsData.length ? (k(), S("button", {
-              key: 1,
-              type: "button",
-              class: "krds-btn small tertiary",
-              onClick: i
-            }, "다음으로")) : Y("", !0)
-          ])
-        ])
-      ])) : Y("", !0),
-      G(p.$slots, "coach-mark-content")
-    ], 6));
+    }, [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));
   }
-}), nl = ["disabled", "aria-labelledby"], sl = ["id", "aria-hidden"], ol = { class: "sr-only" }, il = /* @__PURE__ */ _({
+}), Ra = Aa, Pa = Ra, Ha = ["disabled"], qa = ["aria-hidden"], Oa = { class: "sr-only" }, Na = /* @__PURE__ */ B({
   __name: "KrdsTooltip",
   props: {
     type: { default: "default" },
     tooltipContent: {},
     vertical: { type: Boolean },
     box: { type: Boolean },
-    disabled: { type: Boolean, default: !1 },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
     class: {},
     style: {},
     id: {}
   },
   setup(e) {
-    const o = e, a = B(null), l = B(null), t = B(!1), n = B({}), i = B(`tooltip-popover-${Math.random().toString(36).substring(2, 9)}`), v = B(!1), p = h(() => {
-      const f = ["krds-btn", "krds-tooltip"];
-      return o.type === "default" ? f.push("small", "text") : o.type === "icon" ? f.push("icon") : o.type === "button" && f.push(""), !o.box && o.vertical && f.push("tooltip-vertical"), o.box && !o.vertical && f.push("tooltip-box"), f.join(" ");
-    }), y = h(() => {
-      const f = [];
-      return o.box && f.push("tooltip-box"), o.vertical && f.push("tooltip-vertical"), t.value && f.push("active"), f;
-    }), g = h(() => a.value?.querySelector("button")?.textContent?.trim() || ""), w = () => window.innerWidth <= 768, b = () => {
-      if (!a.value || !l.value) return;
-      const f = a.value.querySelector("button");
-      if (!f) return;
-      const x = 12, { clientHeight: R, clientWidth: L } = l.value, { top: M, left: z, right: H, height: I, width: j } = f.getBoundingClientRect(), Z = window.innerWidth / 2, se = window.innerHeight / 2;
-      let X, O;
-      const q = [];
-      v.value || o.box || o.vertical ? (M + I > se ? (X = M - R - x, q.push("top")) : (X = M + I + x, q.push("bottom")), z + j > Z ? (O = H - L, q.push("right"), window.innerWidth - (z + j) > L / 2 && (O = z + (j - L) / 2, q.splice(q.indexOf("right"), 1))) : (O = z + (j - L) / 2, O < 0 && (O = z, q.push("left")))) : (X = M + (I - R) / 2, z + j > Z ? (O = z - L - x, q.push("right")) : O = H + x);
-      const ee = window.innerWidth <= 420;
-      n.value = {
-        top: `${X}px`,
-        left: ee ? "50%" : `${O}px`,
-        transform: ee ? "translateX(-50%)" : "none"
-      }, l.value && (l.value.className = `krds-tooltip-popover ${q.join(" ")} ${y.value.join(" ")}`);
-    }, D = async () => {
-      o.disabled || !o.tooltipContent || (t.value = !0, await we(), b());
-    }, m = () => {
-      t.value = !1, n.value = {};
-    }, s = (f) => {
-      (f.key === "Escape" || f.key === "Esc") && t.value && m();
-    }, c = () => {
-      v.value = w(), t.value && m();
+    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);
+      const le = window.innerWidth <= 420;
+      r.value = {
+        top: `${j}px`,
+        left: le ? "50%" : `${O}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 = () => {
-      t.value && m();
+      s.value = !1, r.value = {};
+    }, i = (h) => {
+      (h.key === "Escape" || h.key === "Esc") && s.value && d();
+    }, c = () => {
+      v.value = _(), s.value && d();
+    }, u = () => {
+      s.value && d();
     };
-    return le(() => {
-      v.value = w(), document.addEventListener("keydown", s), window.addEventListener("scroll", d), window.addEventListener("resize", c);
-    }), J(() => {
-      document.removeEventListener("keydown", s), window.removeEventListener("scroll", d), window.removeEventListener("resize", c);
-    }), (f, x) => (k(), S("div", {
+    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: a
-    }, [
-      r("button", {
-        type: "button",
-        class: E(p.value),
-        disabled: e.disabled,
-        "aria-labelledby": i.value,
-        onMouseover: D,
-        onMouseout: m,
-        onFocusin: D,
-        onFocusout: m
-      }, [
-        G(f.$slots, "default")
-      ], 42, nl),
-      Q(r("div", {
-        id: i.value,
-        ref_key: "popoverRef",
-        ref: l,
-        class: E(["krds-tooltip-popover", y.value]),
-        style: ne(n.value),
-        "aria-hidden": !t.value,
-        role: "tooltip"
-      }, [
-        r("span", ol, V(g.value), 1),
-        P(" " + V(e.tooltipContent), 1)
-      ], 14, sl), [
-        [te, t.value]
-      ])
-    ], 512));
+      ref: n
+    }, [p("button", {
+      type: "button",
+      class: R(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",
+      ref: l,
+      class: R(["krds-tooltip-popover", b.value]),
+      style: ne(r.value),
+      "aria-hidden": !s.value,
+      role: "tooltip"
+    }, [p("span", Oa, M(g.value), 1), N(" " + M(e.tooltipContent), 1)], 14, qa), [[se, s.value]])], 512));
   }
-}), dl = ["aria-expanded"], rl = { class: "drop-in" }, cl = {
+}), ja = Na, Wa = ja, Ga = ["aria-expanded"], Ya = { class: "drop-in" }, Ua = {
   key: 0,
   class: "drop-top"
-}, ul = {
+}, Xa = {
   key: 1,
   class: "drop-list"
-}, fl = ["lang", "aria-selected", "onClick"], vl = { class: "sr-only" }, pl = {
+}, Ja = [
+  "lang",
+  "aria-selected",
+  "onClick"
+], Qa = { class: "sr-only" }, Za = {
   key: 2,
   class: "drop-list"
-}, ml = ["href", "lang"], hl = /* @__PURE__ */ _({
+}, el = ["href", "lang"], tl = /* @__PURE__ */ B({
   __name: "KrdsLanguageSwitcher",
   props: {
     languageList: {},
@@ -2294,199 +2156,169 @@ const wt = _({
     id: {}
   },
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = B(!1), n = B(), i = B(), v = () => {
-      t.value = !t.value, t.value && n.value && g();
-    }, p = () => {
-      t.value = !1;
-    }, y = (s) => {
-      l("update:modelValue", s), p(), l("close"), i.value?.focus();
+  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 (!n.value) return;
-      const s = n.value.querySelector(".drop-menu");
-      if (!s) return;
-      const c = s.getBoundingClientRect(), d = window.innerWidth;
-      n.value.classList.remove("drop-left", "drop-right"), c.left < 0 ? n.value.classList.add("drop-left") : d < c.left + c.width && n.value.classList.add("drop-right");
-    }, w = (s) => {
-      s.key === "Escape" && (p(), i.value?.focus());
-    }, b = (s) => {
-      n.value?.contains(s.target) || p();
-    }, D = (s) => {
-      n.value?.contains(s.relatedTarget) || p();
-    }, m = (s) => {
-      if (!n.value) return;
-      n.value.querySelectorAll(".drop-list .item-link").forEach((f) => {
-        f.style.position = "relative", f.style.zIndex = "0";
+      if (!r.value) return;
+      const i = r.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());
+    }, 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";
       });
-      const d = s.target;
-      d.style.zIndex = "1";
+      const c = i.target;
+      c.style.zIndex = "1";
     };
-    return ae(t, (s) => {
-      s ? (document.addEventListener("keydown", w), document.addEventListener("click", b)) : (document.removeEventListener("keydown", w), document.removeEventListener("click", b));
-    }), J(() => {
-      document.removeEventListener("keydown", w), document.removeEventListener("click", b);
-    }), (s, c) => (k(), S("div", {
+    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: n,
-      class: E(["krds-drop-wrap krds-language", {
-        active: t.value,
-        "drop-left": a.dropPosition === "left",
-        "drop-right": a.dropPosition === "right"
+      ref: r,
+      class: R(["krds-drop-wrap krds-language", {
+        active: s.value,
+        "drop-left": n.dropPosition === "left",
+        "drop-right": n.dropPosition === "right"
       }]),
-      onFocusout: D
+      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
     }, [
-      r("button", {
-        ref_key: "buttonRef",
-        ref: i,
-        type: "button",
-        class: E(["krds-btn small text drop-btn", { active: t.value }]),
-        "aria-expanded": t.value,
-        onClick: v
-      }, [
-        c[0] || (c[0] = r("i", { class: "svg-icon ico-global" }, null, -1)),
-        G(s.$slots, "default"),
-        c[1] || (c[1] = r("i", { class: "svg-icon ico-toggle" }, null, -1))
-      ], 10, dl),
-      r("div", {
-        class: "drop-menu",
-        style: ne({ display: t.value ? "block" : "none" })
-      }, [
-        r("div", rl, [
-          s.$slots["prev-item"] ? (k(), S("div", cl, [
-            G(s.$slots, "prev-item")
-          ])) : Y("", !0),
-          a.type === "default" ? (k(), S("ul", ul, [
-            (k(!0), S(F, null, N(e.languageList, (d) => (k(), S("li", {
-              key: d.code
-            }, [
-              r("a", {
-                href: "#",
-                class: E(["item-link", { active: a.modelValue === d.code }]),
-                lang: d.code,
-                "aria-selected": a.modelValue === d.code,
-                onClick: re((f) => y(d.code), ["prevent"]),
-                onFocus: m
-              }, [
-                P(V(d.name) + " ", 1),
-                r("span", vl, V(a.modelValue === d.code ? "선택됨" : ""), 1)
-              ], 42, fl)
-            ]))), 128))
-          ])) : a.type === "external" ? (k(), S("ul", pl, [
-            (k(!0), S(F, null, N(e.languageList, (d) => (k(), S("li", {
-              key: d.code
-            }, [
-              r("a", {
-                href: d.url || "#",
-                class: "item-link",
-                lang: d.code,
-                target: "_blank",
-                title: "새 창 열림",
-                onFocus: m
-              }, [
-                P(V(d.name) + " ", 1),
-                c[2] || (c[2] = r("i", { class: "svg-icon ico-go" }, null, -1))
-              ], 40, ml)
-            ]))), 128))
-          ])) : Y("", !0)
-        ])
-      ], 4)
-    ], 34));
+      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", {
+      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",
+      lang: u.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));
   }
-}), yl = { class: "drop-in" }, gl = { class: "drop-list" }, bl = ["data-adjust-scale", "onClick"], kl = { class: "drop-bottom" }, Sl = /* @__PURE__ */ _({
+}), 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",
   emits: ["update:modelValue", "close"],
-  setup(e, { emit: o }) {
-    const a = o, l = B(!1), t = B(), n = B(), i = B("md"), v = [
-      { key: "sm", label: "작게", zoom: "0.9" },
-      { key: "md", label: "보통", zoom: "1" },
-      { key: "lg", label: "조금 크게", zoom: "1.1" },
-      { key: "xlg", label: "크게", zoom: "1.3" },
-      { key: "xxlg", label: "가장 크게", zoom: "1.5" }
-    ], p = () => {
-      l.value = !l.value, l.value && t.value && b();
-    }, y = () => {
-      l.value = !1;
-    }, g = (d) => {
-      y(), a("close"), n.value?.focus(), i.value = d.key, document.body.style.zoom = d?.zoom;
-    }, w = () => {
-      const d = v.find((f) => f.key === "md");
-      d && g(d);
+  setup(e, { emit: a }) {
+    const n = a, l = L(!1), s = L(), r = L(), o = L("md"), v = [
+      {
+        key: "sm",
+        label: "작게",
+        zoom: "0.9"
+      },
+      {
+        key: "md",
+        label: "보통",
+        zoom: "1"
+      },
+      {
+        key: "lg",
+        label: "조금 크게",
+        zoom: "1.1"
+      },
+      {
+        key: "xlg",
+        label: "크게",
+        zoom: "1.3"
+      },
+      {
+        key: "xxlg",
+        label: "가장 크게",
+        zoom: "1.5"
+      }
+    ], f = () => {
+      l.value = !l.value, l.value && s.value && S();
     }, b = () => {
-      if (!t.value) return;
-      const d = t.value.querySelector(".drop-menu");
-      if (!d) return;
-      const f = d.getBoundingClientRect(), x = window.innerWidth;
-      t.value.classList.remove("drop-left", "drop-right"), f.left < 0 ? t.value.classList.add("drop-left") : x < f.left + f.width && t.value.classList.add("drop-right");
-    }, D = (d) => {
-      d.key === "Escape" && (y(), n.value?.focus());
-    }, m = (d) => {
-      t.value?.contains(d.target) || y();
-    }, s = (d) => {
-      t.value?.contains(d.relatedTarget) || y();
-    }, c = (d) => {
-      if (!t.value) return;
-      t.value.querySelectorAll(".drop-list .item-link").forEach((R) => {
-        R.style.position = "relative", R.style.zIndex = "0";
+      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";
       });
-      const x = d.target;
-      x.style.zIndex = "1";
+      const h = u.target;
+      h.style.zIndex = "1";
     };
-    return ae(l, (d) => {
-      d ? (document.addEventListener("keydown", D), document.addEventListener("click", m)) : (document.removeEventListener("keydown", D), document.removeEventListener("click", m));
-    }), J(() => {
-      document.removeEventListener("keydown", D), document.removeEventListener("click", m);
-    }), (d, f) => (k(), S("div", {
+    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: t,
+      ref: s,
       class: "krds-drop-wrap krds-resize",
       "data-adjust": "scale",
-      onFocusout: s
-    }, [
-      r("button", {
-        ref_key: "buttonRef",
-        ref: n,
-        type: "button",
-        class: "krds-btn small text drop-btn",
-        onClick: p
-      }, [...f[0] || (f[0] = [
-        P(" 화면크기 ", -1),
-        r("i", { class: "svg-icon ico-toggle" }, null, -1)
-      ])], 512),
-      r("div", {
-        class: "drop-menu",
-        style: ne({ display: l.value ? "block" : "none" })
-      }, [
-        r("div", yl, [
-          r("ul", gl, [
-            (k(), S(F, null, N(v, (x) => r("li", {
-              key: x.key
-            }, [
-              r("button", {
-                type: "button",
-                class: E(["item-link", [x.key, x.key === i.value ? "active" : ""]]),
-                "data-adjust-scale": x.key,
-                onClick: re((R) => g(x), ["prevent"]),
-                onFocus: c
-              }, V(x.label), 43, bl)
-            ])), 64))
-          ]),
-          r("div", kl, [
-            r("button", {
-              type: "button",
-              class: "krds-btn medium text",
-              "data-adjust-scale": "md",
-              onClick: re(w, ["prevent"]),
-              onFocus: c
-            }, [...f[1] || (f[1] = [
-              r("i", { class: "svg-icon ico-reset" }, null, -1),
-              P(" 초기화 ", -1)
-            ])], 32)
-          ])
-        ])
-      ], 4)
-    ], 544));
+      onFocusout: i
+    }, [p("button", {
+      ref_key: "buttonRef",
+      ref: r,
+      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", {
+      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", {
+      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", {
+      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));
   }
-}), wl = _({
+}), dl = ol, ul = dl, cl = B({
   name: "KrdsModal",
   props: {
     modelValue: {
@@ -2520,97 +2352,72 @@ const wt = _({
   },
   emits: ["update:modelValue"],
   slots: Object,
-  setup(e, { slots: o, emit: a }) {
-    const l = Ee()?.uid, t = h(() => e.modalId ?? `krds-modal-${l}`), n = h({
+  setup(e, { slots: a, emit: n }) {
+    const l = Ie()?.uid, s = k(() => e.modalId ?? `krds-modal-${l}`), r = k({
       get: () => e.modelValue,
-      set: (c) => a("update:modelValue", c)
-    }), i = h(() => `tit_${t.value}`), v = h(() => ({
+      set: (c) => n("update:modelValue", c)
+    }), o = k(() => `tit_${s.value}`), v = k(() => ({
       small: "modal-sm",
       medium: "modal-md",
       large: "modal-lg"
-    })[e.size]), p = () => {
-      n.value = !1;
+    })[e.size]), f = () => {
+      r.value = !1;
     };
-    let y = "", g = null;
-    const w = B(null), b = (c) => Array.from(c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(
-      (f) => !f.hasAttribute("disabled") && f.getAttribute("tabindex") !== "-1"
-    ), D = (c) => {
-      if (!w.value || c.key !== "Tab") return;
-      const d = b(w.value);
-      if (d.length === 0) {
+    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();
         return;
       }
-      const f = d[0], x = d[d.length - 1];
-      c.shiftKey && document.activeElement === f ? (c.preventDefault(), x.focus()) : !c.shiftKey && document.activeElement === x && (c.preventDefault(), f.focus());
-    }, m = (c) => {
-      c.key === "Escape" && !e.persistent && p();
-    }, s = () => {
-      document.body.style.overflow = y, document.removeEventListener("keydown", D), document.removeEventListener("keydown", m), g && (g.focus(), g = null), w.value = null;
+      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;
     };
-    return ae(
-      () => e.modelValue,
-      async (c) => {
-        if (c) {
-          y = document.body.style.overflow, document.body.style.overflow = "hidden", g = document.activeElement, await we();
-          const d = document.getElementById(t.value);
-          if (d) {
-            w.value = d;
-            const f = d.querySelector(".modal-conts");
-            f && (f.setAttribute("tabindex", "-1"), f.focus()), document.addEventListener("keydown", D), document.addEventListener("keydown", m);
-          }
-        } else
-          s();
-      },
-      { immediate: !0 }
-    ), Se(() => {
-      e.modelValue && s();
+    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);
+        }
+      } else i();
+    }, { immediate: !0 }), fe(() => {
+      e.modelValue && i();
     }), () => {
-      if (!n.value) return null;
+      if (!r.value) return null;
       const c = {
-        id: t.value,
+        id: s.value,
         class: "krds-modal fade in shown",
         role: "dialog",
         "aria-modal": !0,
-        "aria-labelledby": i.value
+        "aria-labelledby": o.value
       };
-      return e.full ? c["data-type"] = "full" : e.bottomSheet && (c["data-type"] = "bottom-sheet"), u(
-        Le,
-        { to: "body" },
-        u("section", c, [
-          u("div", { class: `modal-dialog ${v.value}` }, [
-            u(
-              "div",
-              { class: "modal-content" },
-              [
-                // modal title
-                o.title ? u("div", { class: "modal-header" }, [u("h2", { id: i.value, class: "modal-title" }, o.title())]) : null,
-                // modal contents
-                u("div", { class: "modal-conts" }, [u("div", { class: "conts-area" }, o.default?.())]),
-                // modal btn
-                o.footer ? u("div", { class: "modal-btn btn-wrap" }, o.footer()) : null,
-                // close button
-                u(
-                  "button",
-                  {
-                    type: "button",
-                    class: "krds-btn medium icon btn-close close-modal",
-                    onClick: p
-                  },
-                  [u("span", { class: "sr-only" }, "닫기"), u("i", { class: "svg-icon ico-popup-close" })]
-                )
-              ].filter(Boolean)
-            )
-          ]),
-          u("div", {
-            class: e.backdrop ? "modal-back in" : "modal-back",
-            onClick: e.persistent ? void 0 : p
-          })
-        ])
-      );
+      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" }, [
+        a.title ? t("div", { class: "modal-header" }, [t("h2", {
+          id: o.value,
+          class: "modal-title"
+        }, a.title())]) : null,
+        t("div", { class: "modal-conts" }, [t("div", { class: "conts-area" }, a.default?.())]),
+        a.footer ? t("div", { class: "modal-btn btn-wrap" }, a.footer()) : null,
+        t("button", {
+          type: "button",
+          class: "krds-btn medium icon btn-close close-modal",
+          onClick: f
+        }, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-popup-close" })])
+      ].filter(Boolean))]), t("div", {
+        class: e.backdrop ? "modal-back in" : "modal-back",
+        onClick: e.persistent ? void 0 : f
+      })]));
     };
   }
-}), Cl = _({
+}), fl = cl, vl = B({
   name: "KrdsAccordionGroup",
   props: {
     typeLine: {
@@ -2622,20 +2429,18 @@ const wt = _({
       default: void 0
     }
   },
-  setup(e, { slots: o }) {
-    const a = h(() => {
+  setup(e, { slots: a }) {
+    const n = k(() => {
       const l = ["krds-accordion"];
       return e.typeLine && l.push("type-line"), e.class && l.push(e.class), l;
     });
-    return () => u(
-      "div",
-      {
-        class: a.value
-      },
-      o.default?.()
-    );
+    return () => t("div", { class: n.value }, a.default?.());
   }
-}), xl = ["id"], $l = { class: "accordion-header" }, _l = ["id", "aria-expanded", "aria-controls"], Bl = ["id", "aria-labelledby"], Kl = { class: "accordion-body" }, Dl = /* @__PURE__ */ _({
+}), 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",
   props: {
     id: {},
@@ -2644,152 +2449,698 @@ const wt = _({
     content: {}
   },
   emits: ["toggle"],
-  setup(e, { emit: o }) {
-    const a = e, l = o, t = h(() => a.openItem === a.id), n = () => {
-      l("toggle", a.id);
+  setup(e, { emit: a }) {
+    const n = e, l = a, s = k(() => n.openItem === n.id), r = () => {
+      l("toggle", n.id);
     };
-    return (i, v) => (k(), S("div", {
+    return (o, v) => (D(), T("div", {
       id: e.id,
-      class: E(["accordion-item", { active: t.value }])
-    }, [
-      r("h5", $l, [
-        r("button", {
-          id: `accordion-header-${e.id}`,
-          type: "button",
-          class: "btn-accordion",
-          "aria-expanded": t.value,
-          "aria-controls": `accordion-collapse-${e.id}`,
-          onClick: v[0] || (v[0] = (p) => n())
-        }, [
-          G(i.$slots, "title", {}, () => [
-            P(V(e.title), 1)
-          ])
-        ], 8, _l)
-      ]),
-      r("div", {
-        id: `accordion-collapse-${e.id}`,
-        class: "accordion-collapse collapse",
-        "aria-labelledby": `accordion-header-${e.id}`
-      }, [
-        r("div", Kl, [
-          G(i.$slots, "content", {}, () => [
-            P(V(e.content), 1)
-          ])
-        ])
-      ], 8, Bl)
-    ], 10, xl));
+      class: R(["accordion-item", { active: s.value }])
+    }, [p("h5", ml, [p("button", {
+      id: `accordion-header-${e.id}`,
+      type: "button",
+      class: "btn-accordion",
+      "aria-expanded": s.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", {
+      id: `accordion-collapse-${e.id}`,
+      class: "accordion-collapse collapse",
+      "aria-labelledby": `accordion-header-${e.id}`
+    }, [p("div", bl, [J(o.$slots, "content", {}, () => [N(M(e.content), 1)])])], 8, gl)], 10, hl));
+  }
+}), Sl = kl, Kl = Sl, wl = B({
+  name: "KrdsTts",
+  props: {
+    text: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    icon: {
+      type: String,
+      default: "volume"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    "play",
+    "pause",
+    "end",
+    "error"
+  ],
+  setup(e, { emit: a }) {
+    const n = L(!1);
+    let l = null;
+    const s = () => {
+      typeof window < "u" && window.speechSynthesis && window.speechSynthesis.cancel(), n.value = !1, l = null;
+    }, r = () => {
+      if (!e.disabled) {
+        if (n.value) {
+          s(), a("pause");
+          return;
+        }
+        if (typeof window > "u" || !window.speechSynthesis) {
+          a("error", /* @__PURE__ */ new Error("SpeechSynthesis API is not supported"));
+          return;
+        }
+        window.speechSynthesis.cancel(), l = new SpeechSynthesisUtterance(e.text), l.lang = "ko-KR", l.onstart = () => {
+          n.value = !0;
+        }, l.onend = () => {
+          n.value = !1, l = null, a("end");
+        }, l.onerror = (f) => {
+          n.value = !1, l = null, f.error !== "canceled" && a("error", new Error(f.error));
+        }, window.speechSynthesis.speak(l), a("play", e.text);
+      }
+    }, o = k(() => {
+      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 fe(() => {
+      s();
+    }), () => {
+      const f = [t("span", {
+        class: "krds-tts-icon",
+        "aria-hidden": "true"
+      }, [t("i", { class: `svg-icon ${v.value}` })])];
+      return e.label && f.push(t("span", { class: "krds-tts-text" }, e.label)), t("button", {
+        type: "button",
+        class: o.value,
+        disabled: e.disabled || void 0,
+        onClick: r
+      }, f);
+    };
+  }
+}), _l = wl, Cl = B({
+  name: "KrdsTable",
+  props: {
+    caption: {
+      type: String,
+      default: void 0
+    },
+    columns: {
+      type: Array,
+      required: !0
+    },
+    rows: {
+      type: Array,
+      required: !0
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  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) => {
+      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);
+      }
+      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 () => t("div", { class: s.value }, [t("table", { class: l.value }, [
+      e.caption && t("caption", e.caption),
+      b(),
+      g(),
+      S()
+    ])]);
+  }
+}), $l = Cl, xl = B({
+  name: "KrdsHeader",
+  props: {
+    id: {
+      type: String,
+      default: "krds-header"
+    },
+    mobileNavId: {
+      type: String,
+      default: "mobile-nav"
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(e, { slots: a }) {
+    const n = k(() => {
+      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)]));
+      }
+      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", {
+        id: e.id,
+        class: n.value
+      }, s);
+    };
+  }
+}), Bl = xl, Ll = B({
+  name: "KrdsFooter",
+  props: {
+    id: {
+      type: String,
+      default: "krds-footer"
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  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;
+    return () => {
+      const v = l(), f = s(), b = r(), g = o(), _ = [];
+      f && _.push(f), b && _.push(b), g && _.push(g);
+      const S = [];
+      return v && S.push(v), _.length > 0 && S.push(t("div", { class: "inner" }, _)), t("footer", {
+        id: e.id,
+        class: n.value
+      }, S);
+    };
+  }
+}), Dl = Ll, Tl = B({
+  name: "KrdsDisclosure",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    },
+    modelValue: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: a, slots: n }) {
+    const l = `disclosure-${ae()}`, s = k(() => e.modelValue), r = () => {
+      a("update:modelValue", !e.modelValue);
+    };
+    return () => t("div", { class: [
+      "krds-disclosure",
+      "conts-expand-area",
+      s.value && "active"
+    ] }, [t("button", {
+      type: "button",
+      class: "btn-conts-expand",
+      onClick: r,
+      "aria-expanded": s.value,
+      "aria-controls": l
+    }, e.title), t("div", {
+      id: l,
+      class: "expand-wrap",
+      inert: !s.value
+    }, [t("div", { class: "expand-in" }, n.default?.())])]);
+  }
+}), Vl = Tl, zl = B({
+  name: "KrdsIdentifier",
+  props: {
+    class: {
+      type: String,
+      default: void 0
+    },
+    logoLabel: {
+      type: String,
+      default: "KRDS - Korea Design System"
+    }
+  },
+  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);
+    };
+    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?.())]);
   }
-}), ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  KrdsAccordionGroup: Cl,
-  KrdsAccordionItem: Dl,
-  KrdsBadge: yt,
-  KrdsBreadcrumb: Et,
-  KrdsButton: Ce,
-  KrdsButtonGroup: Me,
-  KrdsCheckArea: Ct,
-  KrdsCheckbox: xt,
-  KrdsCoachMark: al,
-  KrdsContextualHelp: Xt,
-  KrdsDateInput: vt,
-  KrdsFileUpload: ht,
-  KrdsFormGroup: Oe,
-  KrdsFormHint: Fe,
-  KrdsFormLabel: Pe,
-  KrdsIcon: Re,
-  KrdsInPageNavigation: Lt,
-  KrdsInput: Ae,
-  KrdsLanguageSwitcher: hl,
-  KrdsLink: Te,
-  KrdsMasthead: kt,
-  KrdsModal: wl,
-  KrdsPagination: Ft,
-  KrdsPanel: Ht,
-  KrdsRadio: $t,
-  KrdsResize: Sl,
-  KrdsSelect: mt,
-  KrdsSkipLink: Kt,
-  KrdsSpinner: xe,
-  KrdsStep: Bt,
-  KrdsStepIndicator: _t,
-  KrdsTag: gt,
-  KrdsTagGroup: bt,
-  KrdsTextarea: pt,
-  KrdsToggleSwitch: wt,
-  KrdsTooltip: il
-}, Symbol.toStringTag, { value: "Module" })), fe = {
-  mounted(e, o) {
-    o.value !== !1 && e.classList.add("sr-only");
+}), Il = zl, El = 50, Fl = B({
+  name: "KrdsLayout",
+  props: {
+    id: {
+      type: String,
+      default: "wrap"
+    },
+    class: {
+      type: String,
+      default: void 0
+    },
+    enableScrollDetection: {
+      type: Boolean,
+      default: !0
+    }
   },
-  updated(e, o) {
-    o.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
+  emits: {
+    resize: (e) => !0,
+    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", {
+        scrollY: l.value,
+        scrollHeight: s.value,
+        direction: o.value,
+        timestamp: Date.now()
+      });
+    }, S = (d) => {
+      for (const i of d) {
+        const { width: c, height: u } = i.contentRect;
+        n("resize", {
+          width: c,
+          height: u
+        });
+      }
+    }, V = k(() => {
+      const d = ["g-wrap"];
+      return e.class && d.push(e.class), d;
+    });
+    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);
+    }), () => t("div", {
+      id: e.id,
+      class: V.value,
+      ref: v
+    }, a.default?.());
+  }
+}), Ml = Fl, Al = B({
+  name: "KrdsSideNavigation",
+  props: {
+    title: {
+      type: String,
+      required: !0
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
+    }
+  },
+  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
+          };
+          return x && !$.expanded && ($.subItems = w.subItems.map((y) => ({
+            ...y,
+            expanded: !1
+          })), o.value = null), $;
+        }
+        return w;
+      }));
+    }, _ = (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
+            };
+            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();
+              }, { once: !0 });
+            }
+            return K;
+          }
+          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;
+              requestAnimationFrame(() => {
+                K.focus();
+              }), o.value = null;
+            }
+            return {
+              ...$,
+              expanded: !1
+            };
+          }
+          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}-${$}`,
+      role: "none"
+    }, t("a", {
+      href: x.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 }],
+      role: "none"
+    }, [t("button", {
+      type: "button",
+      class: [
+        "lnb-btn",
+        "lnb-toggle",
+        { active: m.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}`,
+      role: "menu"
+    }, u(m.subItems, w))]) : null]));
+    return () => t("nav", { class: "krds-side-navigation" }, [t("h2", { class: "lnb-tit" }, e.title), t("ul", {
+      class: "lnb-list",
+      role: "menubar"
+    }, h())]);
+  }
+}), Rl = Al, Pl = B({
+  name: "KrdsStructuredList",
+  props: { full: {
+    type: Boolean,
+    default: !0
+  } },
+  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),
+        l && t("div", { class: "card-body" }, l),
+        s && t("div", { class: "card-btm" }, s),
+        r && t("div", { class: "card-btn" }, r)
+      ].filter(Boolean))]);
+      return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [o]);
+    };
+  }
+}), Hl = Pl, ql = B({
+  name: "KrdsTextList",
+  props: {
+    type: {
+      type: String,
+      default: "ul"
+    },
+    variant: {
+      type: String,
+      default: "dash"
+    }
+  },
+  setup(e, { slots: a }) {
+    return () => t(e.type, { class: ["krds-info-list", e.variant] }, a.default?.());
+  }
+}), Ol = ql, Nl = B({
+  name: "KrdsCriticalAlerts",
+  props: {
+    type: {
+      type: String,
+      default: "info"
+    },
+    message: {
+      type: String,
+      required: !0
+    },
+    linkHref: {
+      type: String,
+      default: void 0
+    },
+    linkText: {
+      type: String,
+      default: "자세히 보기"
+    }
+  },
+  emits: ["link-click"],
+  setup(e, { emit: a }) {
+    const n = (s) => ({
+      danger: "긴급",
+      ok: "안전",
+      info: "안내"
+    })[s], l = (s) => {
+      a("link-click", s);
+    };
+    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("p", { class: "critical-txt" }, e.message),
+      e.linkHref && t("a", {
+        href: e.linkHref,
+        class: "krds-btn medium link basic",
+        onClick: l
+      }, [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");
+  },
+  updated(e, a) {
+    a.value === !1 ? e.classList.remove("sr-only") : e.classList.add("sr-only");
   },
   unmounted(e) {
     e.classList.remove("sr-only");
   }
-}, be = {
-  "sr-only": fe
-}, $e = (e) => {
-  e.directive("sr-only", fe);
-}, ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: be,
-  directives: be,
-  installDirectives: $e,
-  vSrOnly: fe
-}, Symbol.toStringTag, { value: "Module" })), zl = {
-  install(e, o = {}) {
-    e.provide("krds:config", o);
-    const a = o.components || Object.keys(ge);
-    a.forEach((l) => {
-      const t = ge[l];
-      t && e.component(l, t);
-    }), typeof ke == "object" && ke !== null && $e(e), e.config.globalProperties.$krds = {
-      version: "__VERSION__"
-    }, process.env.NODE_ENV !== "production" && console.log(`[KRDS Vue] v__VERSION__ 설치 완료 - 컴포넌트: ${a.length}개`);
-  }
-}, El = "__VERSION__";
+}, 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;
 export {
-  Cl as KrdsAccordionGroup,
-  Dl as KrdsAccordionItem,
-  yt as KrdsBadge,
-  Et as KrdsBreadcrumb,
-  Ce as KrdsButton,
-  Me as KrdsButtonGroup,
-  Ct as KrdsCheckArea,
-  xt as KrdsCheckbox,
-  al as KrdsCoachMark,
-  Xt as KrdsContextualHelp,
-  vt as KrdsDateInput,
-  ht as KrdsFileUpload,
-  Oe as KrdsFormGroup,
-  Fe as KrdsFormHint,
-  Pe as KrdsFormLabel,
-  Re as KrdsIcon,
-  Lt as KrdsInPageNavigation,
-  Ae as KrdsInput,
-  hl as KrdsLanguageSwitcher,
-  Te as KrdsLink,
-  kt as KrdsMasthead,
-  wl as KrdsModal,
-  Ft as KrdsPagination,
-  Ht as KrdsPanel,
-  $t as KrdsRadio,
-  Sl as KrdsResize,
-  mt as KrdsSelect,
-  Kt as KrdsSkipLink,
-  xe as KrdsSpinner,
-  Bt as KrdsStep,
-  _t as KrdsStepIndicator,
-  gt as KrdsTag,
-  bt as KrdsTagGroup,
-  pt as KrdsTextarea,
-  wt as KrdsToggleSwitch,
-  il as KrdsTooltip,
-  ue as classNames,
-  zl as default,
-  ce as generateId,
-  Il as generateUid,
-  El as version
+  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
 };
-//# sourceMappingURL=krds-vue.es.js.map
+
+//# sourceMappingURL=krds-vue.es.js.map