@hivcd-printshop/design-system 1.2.0 → 1.2.2

package/dist/index.mjs

@@ -153,6 +153,111 @@ var IconGoBack = ({ className, stroke }) => {
     }
   );
 };
+var IconCompass = ({ className, fill }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.5731 7.37945C12.2964 5.32806 10.668 3.70356 8.6166 3.42688V0H7.37945V3.42688C5.32806 3.70356 3.70356 5.32806 3.42688 7.37945H0V8.62055H3.42688C3.70356 10.6719 5.32806 12.2964 7.37945 12.5731V16H8.6166V12.5731C10.668 12.2964 12.2964 10.6719 12.5731 8.62055H16V7.37945H12.5731ZM7.37945 11.3241C6.01186 11.0672 4.93281 9.98814 4.67589 8.62055H7.37945V11.3241ZM7.4664 5.51383C7.41897 5.81423 7.39131 6.14229 7.37945 6.50988V7.37945H4.67589C4.89328 6.22925 5.68775 5.28458 6.75099 4.86166C6.9921 4.73122 7.07905 4.67589 7.19763 4.41502L7.67984 4.57312C7.58498 4.90119 7.51779 5.21344 7.4664 5.51383ZM9.24506 11.1383C9.00395 11.2727 8.917 11.3241 8.79842 11.5889L8.31621 11.4269C8.41107 11.1028 8.47826 10.7905 8.52965 10.4901C8.57312 10.2134 8.60474 9.91304 8.6166 9.58103V8.62055H11.3202C11.1067 9.77075 10.3083 10.7154 9.24506 11.1383ZM8.6166 7.37945V4.67984C9.98419 4.93281 11.0672 6.01186 11.3202 7.37945H8.6166Z",
+          fill: fill || "#121212"
+        }
+      )
+    }
+  );
+};
+var IconRadioSelected = ({
+  className,
+  stroke,
+  fill
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "4", fill: fill || "#121212" })
+      ]
+    }
+  );
+};
+var IconRadioUnselected = ({
+  className,
+  stroke
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#B4B9C2" })
+    }
+  );
+};
+var IconExclamation = ({ className, fill }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.41438 7.18735H5.57954L5.50175 3.10938H6.49218L6.41438 7.18735ZM5.40001 8.3313C5.39801 8.23061 5.42395 8.13738 5.47781 8.05161C5.53167 7.96583 5.60448 7.89777 5.69624 7.84743C5.79 7.79708 5.89174 7.77191 6.00145 7.77191C6.10718 7.77191 6.20592 7.79708 6.29768 7.84743C6.38945 7.89777 6.46226 7.96583 6.51612 8.05161C6.57197 8.13738 6.5999 8.23061 6.5999 8.3313C6.5999 8.43199 6.57197 8.52522 6.51612 8.611C6.46226 8.69677 6.38945 8.76483 6.29768 8.81518C6.20592 8.86552 6.10718 8.89069 6.00145 8.89069C5.89174 8.89069 5.79 8.86552 5.69624 8.81518C5.60448 8.76483 5.53167 8.69677 5.47781 8.611C5.42395 8.52522 5.39801 8.43199 5.40001 8.3313Z",
+            fill: fill || "#505865"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.5", stroke: fill || "#505865" })
+      ]
+    }
+  );
+};
+var IconClose = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: stroke || "#6d7683",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+};
 
 // src/components/BackButton/BackButton.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -241,8 +346,8 @@ var MultiColumn = Object.assign(MultiColumnMain, {
 // src/components/Column/Column.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var Column = ({ className, children, header }) => {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 pt-3 pb-8", className), children: [
-    header && /* @__PURE__ */ jsx5("h1", { className: cn("text-head3-medium text-primary font-bold"), children: header }),
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
+    header && /* @__PURE__ */ jsx5("h1", { className: cn("text-body1-medium text-primary"), children: header }),
     children
   ] });
 };
@@ -279,70 +384,87 @@ var ColumnSubTitle = ({
   as: Tag2 = "h2"
 }) => {
   return /* @__PURE__ */ jsxs4(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
-    /* @__PURE__ */ jsx9("span", { className: cn("text-head3-medium text-strong"), children }),
+    /* @__PURE__ */ jsx9("span", { className: cn("text-body1-medium text-primary"), children }),
     action && /* @__PURE__ */ jsx9("span", { className: "flex shrink-0 items-center", children: action })
   ] });
 };
 
-// src/components/Form/BasicFormField.tsx
+// src/components/Column/ColumnDescription.tsx
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColumnDescription = ({
+  className,
+  children,
+  bullet = true
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-start gap-3", className), children: [
+    bullet && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ jsx10(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+  ] });
+};
+var ColumnDescriptionList = ({ className, children }) => {
+  return /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col gap-4", className), children });
+};
+
+// src/components/Form/BasicFormField.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var BasicFormField = ({
   children,
   isDanger,
   dangerText,
   className
 }) => {
-  return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1.5", className), children: [
     children,
-    isDanger && dangerText && /* @__PURE__ */ jsx10("span", { className: "text-caption-book text-danger", children: dangerText })
+    isDanger && dangerText && /* @__PURE__ */ jsx11("span", { className: "text-caption-book text-danger", children: dangerText })
   ] });
 };
 var getInputStyles = (isDanger, additionalClass) => {
   return cn(
-    "w-full h-10 px-3",
+    // 디자인 스펙: 높이 41px, 좌우 12px / 상하 10px 패딩
+    "w-full h-[41px] px-3 py-2.5",
     "box-border border border-gray02 focus:outline-none focus:border-black",
-    "bg-white hover:bg-gray00 transition-colors focus:hover:bg-white",
+    "bg-white transition-colors",
     ColumnTextStyle,
     "text-primary placeholder:text-quaternary",
     isDanger && "border-danger",
-    // 에러 시 빨간 테두리
+    // 경고 시 빨간 테두리 (#E42939)
     additionalClass
     // 각 인풋별 추가 스타일 (예: textarea의 h-30)
   );
 };
 
 // src/components/Form/FormText.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var FormText = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx11(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx11("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx12(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx12("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTextArea.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx12(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx13(
     "textarea",
     {
-      className: getInputStyles(isDanger, "resize-none h-30 py-2.5 " + (className || "")),
+      className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
       ...props
     }
   ) });
 };
 
 // src/components/Form/FormNumber.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx13(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx13("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormPassword.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTel.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
   const handlePhoneChange = (e) => {
     const rawValue = e.target.value.replace(/[^0-9]/g, "");
@@ -354,7 +476,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
     e.target.value = formattedValue;
     if (onChange) onChange(e);
   };
-  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx16(
     "input",
     {
       type: "tel",
@@ -368,7 +490,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
 
 // src/components/Form/FormColor.tsx
 import { useState } from "react";
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var FormColor = ({
   className,
   isDanger,
@@ -386,7 +508,7 @@ var FormColor = ({
     setInternalColor(e.target.value);
     onChange?.(e);
   };
-  return /* @__PURE__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs7(
     "label",
     {
       className: getInputStyles(
@@ -395,7 +517,7 @@ var FormColor = ({
         "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
       ),
       children: [
-        /* @__PURE__ */ jsx16("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx17(
           "input",
           {
             type: "color",
@@ -405,7 +527,7 @@ var FormColor = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ jsx16("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+        /* @__PURE__ */ jsx17("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
       ]
     }
   ) });
@@ -413,12 +535,11 @@ var FormColor = ({
 
 // src/components/Form/FormFile.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormFile = ({
   className,
   isDanger,
   dangerText,
-  placeholder = "\uD30C\uC77C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
   fileUrl,
   filename,
   onChange,
@@ -475,32 +596,31 @@ var FormFile = ({
     }
   };
   const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
-  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx18(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs8(
     "div",
     {
       className: getInputStyles(
         isDanger,
-        "active:bg-gray00 flex items-center gap-2 justify-between " + (className || "")
+        // 디자인 스펙: 파일 전 상태는 우측 정렬("파일 첨부"만), 파일 후 상태는 좌우 배치
+        cn(
+          "flex items-center gap-2",
+          displayFileName ? "justify-between" : "justify-end",
+          className
+        )
       ),
       children: [
-        /* @__PURE__ */ jsx17(
-          "div",
+        displayFileName && /* @__PURE__ */ jsx18(
+          "span",
           {
-            className: `truncate flex-1 max-w-50 w-full ${displayFileName ? "text-primary" : "text-quaternary"}`,
-            children: displayFileName ? /* @__PURE__ */ jsx17(
-              "span",
-              {
-                onClick: handleDownload,
-                className: "w-full underline text-primary cursor-pointer hover:text-black transition-colors",
-                title: `${displayFileName} \uB2E4\uC6B4\uB85C\uB4DC`,
-                children: displayFileName
-              }
-            ) : /* @__PURE__ */ jsx17("span", { className: "w-full", children: placeholder })
+            onClick: handleDownload,
+            className: "text-body3-book text-primary truncate max-w-[200px] cursor-pointer",
+            title: `${displayFileName} \uB2E4\uC6B4\uB85C\uB4DC`,
+            children: displayFileName
           }
         ),
-        /* @__PURE__ */ jsxs7("label", { className: "px-1 -mx-1 cursor-pointer", children: [
-          /* @__PURE__ */ jsx17("div", { className: "text-primary text-caption-regular underline", children: "\uD30C\uC77C \uCCA8\uBD80" }),
-          /* @__PURE__ */ jsx17("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        /* @__PURE__ */ jsxs8("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ jsx18("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ jsx18("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
         ] })
       ]
     }
@@ -508,7 +628,7 @@ var FormFile = ({
 };
 
 // src/components/Form/FormCheckBox.tsx
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var FormCheckBox = ({
   isChecked,
   setIsChecked,
@@ -517,19 +637,18 @@ var FormCheckBox = ({
   textStyle,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "label",
     {
       className: cn(
-        "w-fit h-fit pr-1",
+        "group w-fit h-fit",
         "flex items-center gap-1",
-        "hover:bg-gray00 active:bg-gray01 transition-colors",
         "cursor-pointer select-none",
         // 💡 1. 텍스트 드래그 방지 추가
         className
       ),
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "input",
           {
             type: "checkbox",
@@ -539,20 +658,29 @@ var FormCheckBox = ({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center w-5 h-5 shrink-0", children: /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "div",
           {
             className: cn(
-              "w-[15px] h-[15px]",
-              "box-border border",
-              "flex items-center justify-center transition-colors duration-200",
-              // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
-              "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
+              "flex items-center justify-center w-5 h-5 shrink-0 rounded transition-colors",
+              "group-hover:bg-gray00 group-active:bg-gray01"
             ),
-            children: isChecked && /* @__PURE__ */ jsx18(IconCheck, {})
+            children: /* @__PURE__ */ jsx19(
+              "div",
+              {
+                className: cn(
+                  "w-[15px] h-[15px]",
+                  "box-border border border-black",
+                  "flex items-center justify-center transition-colors duration-200",
+                  // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
+                ),
+                children: isChecked && /* @__PURE__ */ jsx19(IconCheck, {})
+              }
+            )
           }
-        ) }),
-        children && /* @__PURE__ */ jsx18("span", { className: cn(ColumnTextStyle, textStyle), children })
+        ),
+        children && /* @__PURE__ */ jsx19("span", { className: cn("text-body3-book text-primary", textStyle), children })
       ]
     }
   );
@@ -562,19 +690,20 @@ var FormCheckBox = ({
 import { useEffect, useRef, useState as useState3 } from "react";
 
 // src/components/Form/SelectBoxOption.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var SelectBoxOption = ({
   label,
   onClick,
   // selectedLabel,
   className
 }) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "li",
     {
       onClick,
       className: cn(
-        "w-full h-11 px-3 shrink-0",
+        "w-full p-3 shrink-0",
+        // 디자인 스펙: 12px 패딩
         "flex items-center justify-start",
         // "box-border border-b border-gray02",
         "text-body3-book text-primary",
@@ -590,7 +719,7 @@ var SelectBoxOption = ({
 };
 
 // src/components/Form/FormSelectBox.tsx
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormSelectBox = ({
   options,
   value,
@@ -613,8 +742,8 @@ var FormSelectBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsx20(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs9("div", { ref: containerRef, className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx21(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs10(
       "div",
       {
         tabIndex: 0,
@@ -622,8 +751,8 @@ var FormSelectBox = ({
           isDanger,
           cn(
             "flex items-center justify-between cursor-pointer select-none",
-            isOpen && "border-black",
-            // 💡 열려있을 때는 테두리를 검은색으로 고정 (포커스 효과)
+            isOpen && "border-gray08",
+            // 열려있을 때 테두리 #3A414C 고정 (디자인 스펙)
             className
           )
         ),
@@ -634,8 +763,8 @@ var FormSelectBox = ({
           setIsOpen((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx20("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ jsx21(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -645,17 +774,17 @@ var FormSelectBox = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx20(
+    isOpen && /* @__PURE__ */ jsx21(
       "ul",
       {
         className: cn(
           "absolute top-full left-0 right-0 z-10",
           // 💡 Input 바로 아래에 띄움
           "box-border border border-gray02 bg-white flex flex-col",
-          "max-h-50 overflow-y-auto shadow-sm"
-          // 💡 항목이 너무 많으면 스크롤 생성
+          "max-h-50 overflow-y-auto"
+          // 항목이 너무 많으면 스크롤 생성 (디자인 스펙: 그림자 없음)
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx20(
+        children: options.map((option) => /* @__PURE__ */ jsx21(
           SelectBoxOption,
           {
             label: option,
@@ -672,7 +801,7 @@ var FormSelectBox = ({
 };
 
 // src/components/TextButton/TextButton.tsx
-import { Fragment, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var TextButton = ({
   children,
   icon,
@@ -682,15 +811,15 @@ var TextButton = ({
   className,
   ...props
 }) => {
-  const content = /* @__PURE__ */ jsxs10(Fragment, { children: [
-    icon && iconPosition === "left" && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: icon }),
-    /* @__PURE__ */ jsx21("span", { className: cn(underline && "underline underline-offset-2"), children }),
-    icon && iconPosition === "right" && /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 items-center", children: icon })
+  const content = /* @__PURE__ */ jsxs11(Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ jsx22("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: icon })
   ] });
   const classes = cn(
     "inline-flex w-fit items-center gap-1 px-1 -mx-1",
     "text-caption-book",
-    alert ? "text-danger" : "text-tertiary",
+    alert ? "text-danger" : "text-secondary",
     "hover:bg-gray00 active:bg-gray01 transition-colors",
     alert ? "hover:text-danger" : "hover:text-primary",
     "cursor-pointer select-none",
@@ -700,15 +829,15 @@ var TextButton = ({
   );
   if (props.href !== void 0) {
     const { href, ...rest } = props;
-    return /* @__PURE__ */ jsx21("a", { href, className: classes, ...rest, children: content });
+    return /* @__PURE__ */ jsx22("a", { href, className: classes, ...rest, children: content });
   }
   const buttonProps = props;
-  return /* @__PURE__ */ jsx21("button", { type: "button", className: classes, ...buttonProps, children: content });
+  return /* @__PURE__ */ jsx22("button", { type: "button", className: classes, ...buttonProps, children: content });
 };
 
 // src/components/Dropdown/Dropdown.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
   const [isOpen, setIsOpen] = useState4(false);
   const containerRef = useRef2(null);
@@ -723,8 +852,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs12(
       "div",
       {
         className: cn(
@@ -737,8 +866,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ),
         onClick: () => setIsOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ jsx22("p", { children: selectedLabel }),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23("p", { children: selectedLabel }),
+          /* @__PURE__ */ jsx23(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -748,7 +877,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx22("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx22(
+    isOpen && /* @__PURE__ */ jsx23("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx23(
       SelectBoxOption,
       {
         label,
@@ -764,7 +893,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
 };
 
 // src/components/ListView/List.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function List({
   className,
   label1,
@@ -777,7 +906,7 @@ function List({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "li",
     {
       className: cn(
@@ -792,11 +921,11 @@ function List({
       ...props,
       onClick,
       children: [
-        /* @__PURE__ */ jsxs12("section", { className: cn("flex items-center gap-4"), children: [
-          /* @__PURE__ */ jsx23("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
-          /* @__PURE__ */ jsx23("div", { className: cn("flex items-center gap-2"), children })
+        /* @__PURE__ */ jsxs13("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ jsx24("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ jsx24("div", { className: cn("flex items-center gap-2"), children })
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "label",
           {
             className: cn(
@@ -808,41 +937,60 @@ function List({
             children: label2 ? label2 : "-"
           }
         ),
-        /* @__PURE__ */ jsx23("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+        /* @__PURE__ */ jsx24("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
-var ModalBase = ({ isVisible, header, children, className }) => {
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsx24("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ jsx24(
-    "div",
-    {
-      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
-      children: /* @__PURE__ */ jsxs13(
-        "main",
-        {
-          className: cn(
-            "w-110 pt-8 h-fit",
-            "flex flex-col items-center",
-            "border border-gray02",
-            "bg-white shadow-[0 0 30px 0 rgba(0, 0, 0, 0.08);]",
-            className
+  return /* @__PURE__ */ jsxs14("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ jsx25(
+      "div",
+      {
+        "aria-hidden": true,
+        onClick: onClose,
+        className: cn("fixed inset-0 z-1000 bg-black/10", onClose && "cursor-pointer")
+      }
+    ),
+    /* @__PURE__ */ jsx25("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs14(
+      "main",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "relative w-110 pt-8 h-fit pointer-events-auto",
+          "flex flex-col items-center",
+          "border border-gray02",
+          "bg-white shadow-[0px_0px_30px_0px_rgba(0,0,0,0.08)]",
+          className
+        ),
+        children: [
+          onClose && /* @__PURE__ */ jsx25(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "\uB2EB\uAE30",
+              className: cn(
+                "absolute right-3 top-3 flex size-8 items-center justify-center",
+                "text-tertiary transition-colors hover:bg-gray00 active:bg-gray01 cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsx25(IconClose, {})
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsx24("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
-            children
-          ]
-        }
-      )
-    }
-  ) });
+          /* @__PURE__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          children
+        ]
+      }
+    ) })
+  ] });
 };
 var Contents = ({ children, className }) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: cn(
@@ -859,7 +1007,7 @@ var CTAs2 = ({ children, className, row = false }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       "div",
       {
         className: cn(
@@ -878,9 +1026,9 @@ var Modal = Object.assign(ModalBase, {
 });
 
 // src/components/Modal/ModalText.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ModalText = ({ children, className }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
@@ -896,14 +1044,14 @@ var ModalText = ({ children, className }) => {
 };
 
 // src/components/createPost/CategorySegment.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn(
@@ -923,7 +1071,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var categorySegments = {
   info: ["\uACF5\uC6A9 \uBB3C\uD488", "\uC77C\uBC18 \uAE30\uC790\uC7AC", "\uD2B9\uC218 \uAE30\uC790\uC7AC"],
   archive: ["\uD504\uB9B0\uD2B8\uC2E4", "\uD64D\uC775\uC2DC\uB514"],
@@ -937,8 +1085,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ jsxs14("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ jsx28(
       "div",
       {
         className: cn(
@@ -951,7 +1099,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ jsx27(
+    segments.map((label) => /* @__PURE__ */ jsx28(
       CategorySegment,
       {
         label,
@@ -964,9 +1112,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "input",
     {
       type: "text",
@@ -986,9 +1134,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "button",
     {
       type: "button",
@@ -1009,7 +1157,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -1018,7 +1166,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
@@ -1030,20 +1178,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ jsxs15("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx30(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ jsx30("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ jsxs16("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx31(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ jsx31("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ jsx30("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ jsx31("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "label",
     {
       className: cn(
@@ -1054,8 +1202,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx31(IconSearch, {}),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(IconSearch, {}),
+        /* @__PURE__ */ jsx32(
           "input",
           {
             type: "text",
@@ -1091,20 +1239,8 @@ function useControllableState(controlled, defaultValue) {
   return [value, setValue, isControlled];
 }
 
-// src/components/SideRadioAccordion/Exclamation.svg
-var Exclamation_default = "./Exclamation-IUYZYYC4.svg";
-
-// src/components/SideRadioAccordion/ChevronDown.svg
-var ChevronDown_default = "./ChevronDown-XSALXCW4.svg";
-
-// src/components/SideRadioAccordion/RadioSelected.svg
-var RadioSelected_default = "./RadioSelected-DOLVV7ZM.svg";
-
-// src/components/SideRadioAccordion/RadioUnselected.svg
-var RadioUnselected_default = "./RadioUnselected-QN74EU46.svg";
-
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -1148,8 +1284,8 @@ var SideRadioAccordion = forwardRef(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ jsxs17("div", { ref, className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs18("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ jsx33(
         Stepper,
         {
           step,
@@ -1160,8 +1296,8 @@ var SideRadioAccordion = forwardRef(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ jsx32(
+      expanded && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ jsx33(
           RadioToggleItem,
           {
             ...item,
@@ -1170,29 +1306,22 @@ var SideRadioAccordion = forwardRef(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ jsx32(
-          TextButton2,
-          {
-            label: quantityLimitLabel,
-            onClick: onClickQuantityLimit,
-            className: "mt-2"
-          }
-        )
+        quantityLimitLabel && /* @__PURE__ */ jsx33("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx33(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ jsxs17("span", { children: [
+  const label = /* @__PURE__ */ jsxs18("span", { children: [
     step,
     " | ",
     title
   ] });
-  const base = "w-full flex items-center justify-between px-3 py-2.5 text-body1-medium text-strong text-left bg-white";
+  const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-primary text-left bg-white border-b border-gray02";
   if (!collapsible) {
-    return /* @__PURE__ */ jsx32("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ jsx33("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
@@ -1200,14 +1329,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ jsx32(
-          "img",
-          {
-            src: ChevronDown_default,
-            alt: "",
-            className: cn("transition-transform", isOpen && "rotate-180")
-          }
-        )
+        /* @__PURE__ */ jsx33(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1226,29 +1348,29 @@ var RadioToggleItem = ({
 }) => {
   const rowBg = !open ? "bg-white hover:bg-gray00" : color ? void 0 : printColor ? printColorBgClass[printColor] : "bg-gray00";
   const style = open && color ? { backgroundColor: color } : void 0;
-  return /* @__PURE__ */ jsxs17("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs18(
       "button",
       {
         type: "button",
         onClick: onSelect,
         style,
         className: cn(
-          "w-full flex items-center gap-1.5 px-3 py-2.5",
-          "text-body2-regular text-primary text-left cursor-pointer",
+          "w-full flex items-center gap-1.5 p-3",
+          "text-body1-regular text-secondary text-left cursor-pointer",
           rowBg,
           className
         ),
         children: [
-          /* @__PURE__ */ jsx32(Radio, { selected: open }),
-          /* @__PURE__ */ jsx32("span", { children: title })
+          /* @__PURE__ */ jsx33(Radio, { selected: open }),
+          /* @__PURE__ */ jsx33("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ jsx32("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ jsx32("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx32(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ jsx32(
+    open && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ jsx33("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ jsx33(
         TextButton2,
         {
           label: labelTextButton,
@@ -1261,17 +1383,11 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ jsx32(
-    "img",
-    {
-      src: selected ? RadioSelected_default : RadioUnselected_default,
-      alt: "",
-      className: cn("w-4 h-4", className)
-    }
-  );
+  const Icon = selected ? IconRadioSelected : IconRadioUnselected;
+  return /* @__PURE__ */ jsx33(Icon, { className: cn("w-6 h-6", className) });
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
@@ -1284,18 +1400,18 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx32("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ jsx33(IconExclamation, {}),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: cn(
-        "w-fit h-fit px-2 py-0.5 border border-gray02",
+        "w-fit h-fit px-2 py-0.5 border border-gray02 shrink-0 whitespace-nowrap",
         "text-tertiary text-caption-book",
         className
       ),
@@ -1305,7 +1421,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Tag = ({
   className,
   children,
@@ -1315,7 +1431,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "button",
     {
       className: cn(
@@ -1334,7 +1450,7 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ jsx33("span", { children })
+      children: /* @__PURE__ */ jsx34("span", { children })
     }
   );
 };
@@ -1376,7 +1492,7 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
@@ -1387,53 +1503,62 @@ var WeekNavigation = forwardRef2(
     const showPrev = canPrev ?? (week ? week !== "thisWeek" : true);
     const showNext = canNext ?? (week ? week !== "twoWeeksLater" : true);
     const text = label ?? (week ? `${weekLabel[week]} (${formatWeekRange(date)})` : formatWeekRange(date));
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
         className: cn(
-          "flex items-center justify-between",
-          "w-full h-11 px-3",
-          "bg-white border border-gray02",
-          "text-body2-regular text-primary",
+          "flex items-stretch justify-between",
+          "w-full h-12",
+          "bg-white border-b border-gray02",
+          "text-body1-medium text-secondary",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx34(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ jsx34("span", { children: text }),
-          /* @__PURE__ */ jsx34(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ jsx35(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ jsx35("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ jsx35(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
+  const divider = /* @__PURE__ */ jsx35("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ jsx34("span", { className: "w-6 h-6" });
+    return /* @__PURE__ */ jsxs19("div", { className: "flex items-stretch", children: [
+      direction === "right" && divider,
+      /* @__PURE__ */ jsx35("span", { className: "w-[42px]" }),
+      direction === "left" && divider
+    ] });
   }
-  return /* @__PURE__ */ jsx34(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn(
-        "flex items-center justify-center w-6 h-6",
-        "text-gray06 cursor-pointer",
-        "hover:bg-gray00 active:bg-gray01"
-      ),
-      children: /* @__PURE__ */ jsx34(
-        IconChevronDownXS,
-        {
-          className: direction === "left" ? "rotate-90" : "-rotate-90",
-          stroke: "currentColor"
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs19("div", { className: "flex items-stretch", children: [
+    direction === "right" && divider,
+    /* @__PURE__ */ jsx35(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn(
+          "flex w-[42px] items-center justify-center",
+          "text-gray06 cursor-pointer transition-colors",
+          "hover:bg-gray00 active:bg-gray01"
+        ),
+        children: /* @__PURE__ */ jsx35(
+          IconChevronDownXS,
+          {
+            className: direction === "left" ? "rotate-90" : "-rotate-90",
+            stroke: "currentColor"
+          }
+        )
+      }
+    ),
+    direction === "left" && divider
+  ] });
 };
 
 // src/components/Timetable/Timetable.tsx
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1456,8 +1581,8 @@ var Timetable = forwardRef3(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ jsxs19("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs20("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ jsx36(
       WeekNavigation,
       {
         date: weekStart,
@@ -1468,7 +1593,7 @@ var Timetable = forwardRef3(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ jsx35("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx36(
       DailyTimetable,
       {
         date: day.date,
@@ -1481,9 +1606,9 @@ var Timetable = forwardRef3(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ jsx35("div", { className: "h-13 flex items-center justify-center text-body3-medium text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ jsx36("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
+    slots.map((slot) => /* @__PURE__ */ jsx36(
       TimeItem,
       {
         state: slot.state,
@@ -1509,17 +1634,17 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       onClick: clickable ? onClick : void 0,
       style,
       className: cn(
-        "h-18 flex items-center justify-center",
+        "h-18 flex items-center justify-center border-b border-gray02",
         fluid ? "w-full" : "w-18",
         "text-body1-medium text-center bg-white text-primary",
         state === "none" && "bg-gray00 text-transparent",
-        state === "selected" && "bg-black text-gray02 hover:cursor-pointer",
+        state === "selected" && "bg-black text-white hover:cursor-pointer",
         state === "disabled" && "bg-gray00 text-gray03",
         state === "default" && [
           "hover:cursor-pointer",
@@ -1534,11 +1659,12 @@ var TimeItem = ({
 
 // src/components/TNB/TNB.tsx
 import {
+  Fragment as Fragment2,
   forwardRef as forwardRef4,
   useCallback as useCallback2,
   useState as useState6
 } from "react";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
   const [uncontrolled, setUncontrolled] = useState6(defaultValue);
@@ -1590,8 +1716,8 @@ var TNB = forwardRef4(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ jsxs20("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs21("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ jsx37(
       UpperPart,
       {
         logo,
@@ -1602,7 +1728,7 @@ var TNB = forwardRef4(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1617,7 +1743,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ jsx36(
+      return /* @__PURE__ */ jsx37(
         Link,
         {
           href,
@@ -1629,7 +1755,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
         }
       );
     }
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "a",
       {
         href,
@@ -1641,7 +1767,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
       }
     );
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "button",
     {
       type: "button",
@@ -1663,33 +1789,50 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsxs20("div", { className: cn("w-full h-13 px-4 flex items-center justify-between", className), children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsx36(NavIconButton, { ...logo, linkComponent }),
-      /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ jsx36(
-        UpperPartTab,
-        {
-          label: item.label,
-          href: item.href,
-          selected: item.label === selected,
-          linkComponent,
-          onClick: () => {
-            item.onClick?.();
-            onSelectItem(item.label);
-          }
-        },
-        item.id ?? item.label
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx36("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon, index) => /* @__PURE__ */ jsx36(
-      NavIconButton,
-      {
-        ...icon,
-        linkComponent
-      },
-      icon.id ?? icon.src ?? icon.label ?? index
-    )) })
-  ] });
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: cn(
+        "w-full min-h-13 flex items-stretch justify-between border-b border-gray02",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx37("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx37(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
+              /* @__PURE__ */ jsx37(
+                UpperPartTab,
+                {
+                  label: item.label,
+                  href: item.href,
+                  selected: item.label === selected,
+                  linkComponent,
+                  onClick: () => {
+                    item.onClick?.();
+                    onSelectItem(item.label);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+            ] }, item.id ?? item.label))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsx37(
+            NavIconButton,
+            {
+              ...icon,
+              linkComponent
+            },
+            icon.id ?? icon.src ?? icon.label ?? index
+          ))
+        ] })
+      ]
+    }
+  );
 };
 var UpperPartTab = ({
   label,
@@ -1699,7 +1842,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs21(
     NavClickable,
     {
       href,
@@ -1707,11 +1850,14 @@ var UpperPartTab = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex px-1 py-1.5 text-body2-regular cursor-pointer no-underline",
-        selected ? "text-strong font-medium underline underline-offset-4" : "text-quaternary hover:text-secondary",
+        "inline-flex min-h-13 flex-col items-center gap-2 pt-2.5 cursor-pointer no-underline",
+        "transition-colors hover:bg-gray00 active:bg-gray01",
         className
       ),
-      children: label
+      children: [
+        /* @__PURE__ */ jsx37("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ jsx37("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+      ]
     }
   );
 };
@@ -1719,7 +1865,7 @@ var NavIconButton = forwardRef4(
   function NavIconButton2({ src, icon, alt, label, href, onClick, selected, badge, className, linkComponent }, forwardedRef) {
     const interactive = Boolean(onClick || href);
     const showBadge = badge !== void 0 && badge !== null && badge !== false;
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1729,15 +1875,15 @@ var NavIconButton = forwardRef4(
         current: selected,
         disabled: !interactive,
         className: cn(
-          "relative inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-full px-1.5",
+          "relative inline-flex h-13 min-w-13 items-center justify-center gap-1.5 px-3 transition-colors",
           interactive && "cursor-pointer",
           selected ? "bg-black text-white" : "bg-transparent hover:bg-gray00 active:bg-gray01",
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ jsx36("span", { className: "inline-flex h-5 w-5 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx36("img", { src, alt: alt ?? label ?? "", className: "h-5 w-5" }) : null,
-          label ? /* @__PURE__ */ jsx36("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ jsx36(
+          icon ? /* @__PURE__ */ jsx37("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx37("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ jsx37("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ jsx37(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1763,24 +1909,29 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
-      className: cn("w-full h-9 px-4 flex items-center gap-4 border-t border-gray02", className),
-      children: lowerPartItemList.map((item) => /* @__PURE__ */ jsx36(
-        LowerPartItemButton,
-        {
-          label: item.label,
-          href: item.href,
-          selected: item.label === selected,
-          linkComponent,
-          onClick: () => {
-            item.onClick?.();
-            onSelectItem(item.label);
-          }
-        },
-        item.id ?? item.label
-      ))
+      className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
+      children: [
+        /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
+          /* @__PURE__ */ jsx37(
+            LowerPartItemButton,
+            {
+              label: item.label,
+              href: item.href,
+              selected: item.label === selected,
+              linkComponent,
+              onClick: () => {
+                item.onClick?.();
+                onSelectItem(item.label);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        ] }, item.id ?? item.label))
+      ]
     }
   );
 };
@@ -1792,7 +1943,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     NavClickable,
     {
       href,
@@ -1800,9 +1951,9 @@ var LowerPartItemButton = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex px-1.5 py-1 text-caption-regular cursor-pointer no-underline",
-        "hover:bg-gray00 active:bg-gray01",
-        selected ? "text-strong font-medium" : "text-quaternary",
+        "inline-flex h-full items-center justify-center px-5 text-head3-medium cursor-pointer no-underline",
+        "transition-colors hover:bg-gray00 active:bg-gray01",
+        selected ? "text-strong" : "text-quaternary",
         className
       ),
       children: label
@@ -1812,7 +1963,7 @@ var LowerPartItemButton = ({
 
 // src/components/Toast/Toast.tsx
 import { forwardRef as forwardRef5, useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var EXIT_MS = 300;
 var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
@@ -1835,7 +1986,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ jsx37(
+  const banner = /* @__PURE__ */ jsx38(
     "div",
     {
       ref,
@@ -1843,7 +1994,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
       "aria-live": "polite",
       className: cn(
         "w-full h-fit py-2.5 bg-gray06",
-        "font-pretendard text-white text-center font-semibold text-[17px]",
+        "font-pretendard text-white text-center font-semibold text-[17px] leading-[1.6]",
         "shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
         controlled && "transition-opacity duration-300",
         controlled && (visible ? "opacity-100" : "opacity-0"),
@@ -1853,7 +2004,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -1872,6 +2023,8 @@ export {
   CategorySegmentedControl,
   Column,
   ColumnContentContainer,
+  ColumnDescription,
+  ColumnDescriptionList,
   ColumnLabel,
   ColumnSubTitle,
   ColumnText,
@@ -1888,7 +2041,12 @@ export {
   FormTextArea,
   IconCheck,
   IconChevronDownXS,
+  IconClose,
+  IconCompass,
+  IconExclamation,
   IconInfo,
+  IconRadioSelected,
+  IconRadioUnselected,
   List,
   Modal,
   ModalText,