@hivcd-printshop/design-system 1.2.0 → 1.2.2

package/dist/index.js

@@ -28,6 +28,8 @@ __export(index_exports, {
   CategorySegmentedControl: () => CategorySegmentedControl,
   Column: () => Column,
   ColumnContentContainer: () => ColumnContentContainer,
+  ColumnDescription: () => ColumnDescription,
+  ColumnDescriptionList: () => ColumnDescriptionList,
   ColumnLabel: () => ColumnLabel,
   ColumnSubTitle: () => ColumnSubTitle,
   ColumnText: () => ColumnText,
@@ -44,7 +46,12 @@ __export(index_exports, {
   FormTextArea: () => FormTextArea,
   IconCheck: () => IconCheck,
   IconChevronDownXS: () => IconChevronDownXS,
+  IconClose: () => IconClose,
+  IconCompass: () => IconCompass,
+  IconExclamation: () => IconExclamation,
   IconInfo: () => IconInfo,
+  IconRadioSelected: () => IconRadioSelected,
+  IconRadioUnselected: () => IconRadioUnselected,
   List: () => List,
   Modal: () => Modal,
   ModalText: () => ModalText,
@@ -219,6 +226,111 @@ var IconGoBack = ({ className, stroke }) => {
     }
   );
 };
+var IconCompass = ({ className, fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "4", fill: fill || "#121212" })
+      ]
+    }
+  );
+};
+var IconRadioUnselected = ({
+  className,
+  stroke
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#B4B9C2" })
+    }
+  );
+};
+var IconExclamation = ({ className, fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "6", r: "4.5", stroke: fill || "#505865" })
+      ]
+    }
+  );
+};
+var IconClose = ({ className, stroke }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: stroke || "#6d7683",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+};
 
 // src/components/BackButton/BackButton.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -307,8 +419,8 @@ var MultiColumn = Object.assign(MultiColumnMain, {
 // src/components/Column/Column.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Column = ({ className, children, header }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 pt-3 pb-8", className), children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: cn("text-head3-medium text-primary font-bold"), children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: cn("text-body1-medium text-primary"), children: header }),
     children
   ] });
 };
@@ -345,70 +457,87 @@ var ColumnSubTitle = ({
   as: Tag2 = "h2"
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-head3-medium text-strong"), children }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-body1-medium text-primary"), children }),
     action && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex shrink-0 items-center", children: action })
   ] });
 };
 
-// src/components/Form/BasicFormField.tsx
+// src/components/Column/ColumnDescription.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var ColumnDescription = ({
+  className,
+  children,
+  bullet = true
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex items-start gap-3", className), children: [
+    bullet && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+  ] });
+};
+var ColumnDescriptionList = ({ className, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col gap-4", className), children });
+};
+
+// src/components/Form/BasicFormField.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var BasicFormField = ({
   children,
   isDanger,
   dangerText,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
     children,
-    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-caption-book text-danger", children: dangerText })
+    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FormText = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTextArea.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "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
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormPassword.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTel.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
   const handlePhoneChange = (e) => {
     const rawValue = e.target.value.replace(/[^0-9]/g, "");
@@ -420,7 +549,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
     e.target.value = formattedValue;
     if (onChange) onChange(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "input",
     {
       type: "tel",
@@ -434,7 +563,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
 
 // src/components/Form/FormColor.tsx
 var import_react = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var FormColor = ({
   className,
   isDanger,
@@ -452,7 +581,7 @@ var FormColor = ({
     setInternalColor(e.target.value);
     onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "label",
     {
       className: getInputStyles(
@@ -461,7 +590,7 @@ var FormColor = ({
         "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             type: "color",
@@ -471,7 +600,7 @@ var FormColor = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
       ]
     }
   ) });
@@ -479,12 +608,11 @@ var FormColor = ({
 
 // src/components/Form/FormFile.tsx
 var import_react2 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var FormFile = ({
   className,
   isDanger,
   dangerText,
-  placeholder = "\uD30C\uC77C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
   fileUrl,
   filename,
   onChange,
@@ -541,32 +669,31 @@ var FormFile = ({
     }
   };
   const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "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__ */ (0, import_jsx_runtime17.jsx)(
-          "div",
+        displayFileName && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "span",
           {
-            className: `truncate flex-1 max-w-50 w-full ${displayFileName ? "text-primary" : "text-quaternary"}`,
-            children: displayFileName ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "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__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "px-1 -mx-1 cursor-pointer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-primary text-caption-regular underline", children: "\uD30C\uC77C \uCCA8\uBD80" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
         ] })
       ]
     }
@@ -574,7 +701,7 @@ var FormFile = ({
 };
 
 // src/components/Form/FormCheckBox.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormCheckBox = ({
   isChecked,
   setIsChecked,
@@ -583,19 +710,18 @@ var FormCheckBox = ({
   textStyle,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "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__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "checkbox",
@@ -605,20 +731,29 @@ var FormCheckBox = ({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center w-5 h-5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "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__ */ (0, import_jsx_runtime18.jsx)(IconCheck, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "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__ */ (0, import_jsx_runtime19.jsx)(IconCheck, {})
+              }
+            )
           }
-        ) }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cn(ColumnTextStyle, textStyle), children })
+        ),
+        children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-body3-book text-primary", textStyle), children })
       ]
     }
   );
@@ -628,19 +763,20 @@ var FormCheckBox = ({
 var import_react3 = require("react");
 
 // src/components/Form/SelectBoxOption.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SelectBoxOption = ({
   label,
   onClick,
   // selectedLabel,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "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",
@@ -656,7 +792,7 @@ var SelectBoxOption = ({
 };
 
 // src/components/Form/FormSelectBox.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var FormSelectBox = ({
   options,
   value,
@@ -679,8 +815,8 @@ var FormSelectBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         tabIndex: 0,
@@ -688,8 +824,8 @@ var FormSelectBox = ({
           isDanger,
           cn(
             "flex items-center justify-between cursor-pointer select-none",
-            isOpen && "border-black",
-            // 💡 열려있을 때는 테두리를 검은색으로 고정 (포커스 효과)
+            isOpen && "border-gray08",
+            // 열려있을 때 테두리 #3A414C 고정 (디자인 스펙)
             className
           )
         ),
@@ -700,8 +836,8 @@ var FormSelectBox = ({
           setIsOpen((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -711,17 +847,17 @@ var FormSelectBox = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "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__ */ (0, import_jsx_runtime20.jsx)(
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           SelectBoxOption,
           {
             label: option,
@@ -738,7 +874,7 @@ var FormSelectBox = ({
 };
 
 // src/components/TextButton/TextButton.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var TextButton = ({
   children,
   icon,
@@ -748,15 +884,15 @@ var TextButton = ({
   className,
   ...props
 }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
-    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex shrink-0 items-center", children: icon })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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",
@@ -766,15 +902,15 @@ var TextButton = ({
   );
   if (props.href !== void 0) {
     const { href, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href, className: classes, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href, className: classes, ...rest, children: content });
   }
   const buttonProps = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
 };
 
 // src/components/Dropdown/Dropdown.tsx
 var import_react4 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
   const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
   const containerRef = (0, import_react4.useRef)(null);
@@ -789,8 +925,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         className: cn(
@@ -803,8 +939,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ),
         onClick: () => setIsOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: selectedLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: selectedLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -814,7 +950,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SelectBoxOption,
       {
         label,
@@ -830,7 +966,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
 };
 
 // src/components/ListView/List.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function List({
   className,
   label1,
@@ -843,7 +979,7 @@ function List({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "li",
     {
       className: cn(
@@ -858,11 +994,11 @@ function List({
       ...props,
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("flex items-center gap-2"), children })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("flex items-center gap-2"), children })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "label",
           {
             className: cn(
@@ -874,41 +1010,60 @@ function List({
             children: label2 ? label2 : "-"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var ModalBase = ({ isVisible, header, children, className }) => {
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "div",
-    {
-      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        "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__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        onClick: onClose,
+        className: cn("fixed inset-0 z-1000 bg-black/10", onClose && "cursor-pointer")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "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__ */ (0, import_jsx_runtime25.jsx)(
+            "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__ */ (0, import_jsx_runtime25.jsx)(IconClose, {})
+            }
           ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
-            children
-          ]
-        }
-      )
-    }
-  ) });
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          children
+        ]
+      }
+    ) })
+  ] });
 };
 var Contents = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: cn(
@@ -925,7 +1080,7 @@ var CTAs2 = ({ children, className, row = false }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         className: cn(
@@ -944,9 +1099,9 @@ var Modal = Object.assign(ModalBase, {
 });
 
 // src/components/Modal/ModalText.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ModalText = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: cn(
@@ -962,14 +1117,14 @@ var ModalText = ({ children, className }) => {
 };
 
 // src/components/createPost/CategorySegment.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: cn(
@@ -989,7 +1144,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("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"],
@@ -1003,8 +1158,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: cn(
@@ -1017,7 +1172,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       CategorySegment,
       {
         label,
@@ -1030,9 +1185,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "input",
     {
       type: "text",
@@ -1052,9 +1207,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "button",
     {
       type: "button",
@@ -1075,7 +1230,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -1084,7 +1239,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       className: cn(
@@ -1096,20 +1251,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "label",
     {
       className: cn(
@@ -1120,8 +1275,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconSearch, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconSearch, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "text",
@@ -1157,20 +1312,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
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -1214,8 +1357,8 @@ var SideRadioAccordion = (0, import_react6.forwardRef)(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref, className: cn("w-full", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Stepper,
         {
           step,
@@ -1226,8 +1369,8 @@ var SideRadioAccordion = (0, import_react6.forwardRef)(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           RadioToggleItem,
           {
             ...item,
@@ -1236,29 +1379,22 @@ var SideRadioAccordion = (0, import_react6.forwardRef)(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          TextButton2,
-          {
-            label: quantityLimitLabel,
-            onClick: onClickQuantityLimit,
-            className: "mt-2"
-          }
-        )
+        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("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__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "button",
     {
       type: "button",
@@ -1266,14 +1402,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          "img",
-          {
-            src: ChevronDown_default,
-            alt: "",
-            className: cn("transition-transform", isOpen && "rotate-180")
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1292,29 +1421,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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "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__ */ (0, import_jsx_runtime32.jsx)(Radio, { selected: open }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Radio, { selected: open }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         TextButton2,
         {
           label: labelTextButton,
@@ -1327,17 +1456,11 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    "img",
-    {
-      src: selected ? RadioSelected_default : RadioUnselected_default,
-      alt: "",
-      className: cn("w-4 h-4", className)
-    }
-  );
+  const Icon = selected ? IconRadioSelected : IconRadioUnselected;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: cn("w-6 h-6", className) });
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "button",
     {
       type: "button",
@@ -1350,18 +1473,18 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconExclamation, {}),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "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
       ),
@@ -1371,7 +1494,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Tag = ({
   className,
   children,
@@ -1381,7 +1504,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "button",
     {
       className: cn(
@@ -1400,7 +1523,7 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children })
     }
   );
 };
@@ -1442,7 +1565,7 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
@@ -1453,53 +1576,62 @@ var WeekNavigation = (0, import_react7.forwardRef)(
     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__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "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__ */ (0, import_jsx_runtime34.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
+  const divider = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "w-6 h-6" });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-stretch", children: [
+      direction === "right" && divider,
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-[42px]" }),
+      direction === "left" && divider
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    "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__ */ (0, import_jsx_runtime34.jsx)(
-        IconChevronDownXS,
-        {
-          className: direction === "left" ? "rotate-90" : "-rotate-90",
-          stroke: "currentColor"
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-stretch", children: [
+    direction === "right" && divider,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "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__ */ (0, import_jsx_runtime35.jsx)(
+          IconChevronDownXS,
+          {
+            className: direction === "left" ? "rotate-90" : "-rotate-90",
+            stroke: "currentColor"
+          }
+        )
+      }
+    ),
+    direction === "left" && divider
+  ] });
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1522,8 +1654,8 @@ var Timetable = (0, import_react8.forwardRef)(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       WeekNavigation,
       {
         date: weekStart,
@@ -1534,7 +1666,7 @@ var Timetable = (0, import_react8.forwardRef)(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -1547,9 +1679,9 @@ var Timetable = (0, import_react8.forwardRef)(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-13 flex items-center justify-center text-body3-medium text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsx)(
       TimeItem,
       {
         state: slot.state,
@@ -1575,17 +1707,17 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "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",
@@ -1600,7 +1732,7 @@ var TimeItem = ({
 
 // src/components/TNB/TNB.tsx
 var import_react9 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
   const [uncontrolled, setUncontrolled] = (0, import_react9.useState)(defaultValue);
@@ -1652,8 +1784,8 @@ var TNB = (0, import_react9.forwardRef)(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       UpperPart,
       {
         logo,
@@ -1664,7 +1796,7 @@ var TNB = (0, import_react9.forwardRef)(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1679,7 +1811,7 @@ var NavClickable = (0, import_react9.forwardRef)(function NavClickable2({ href,
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         Link,
         {
           href,
@@ -1691,7 +1823,7 @@ var NavClickable = (0, import_react9.forwardRef)(function NavClickable2({ href,
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "a",
       {
         href,
@@ -1703,7 +1835,7 @@ var NavClickable = (0, import_react9.forwardRef)(function NavClickable2({ href,
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
     {
       type: "button",
@@ -1725,33 +1857,50 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("w-full h-13 px-4 flex items-center justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NavIconButton, { ...logo, linkComponent }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        UpperPartTab,
-        {
-          label: item.label,
-          href: item.href,
-          selected: item.label === selected,
-          linkComponent,
-          onClick: () => {
-            item.onClick?.();
-            onSelectItem(item.label);
-          }
-        },
-        item.id ?? item.label
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      NavIconButton,
-      {
-        ...icon,
-        linkComponent
-      },
-      icon.id ?? icon.src ?? icon.label ?? index
-    )) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      className: cn(
+        "w-full min-h-13 flex items-stretch justify-between border-b border-gray02",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react9.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                UpperPartTab,
+                {
+                  label: item.label,
+                  href: item.href,
+                  selected: item.label === selected,
+                  linkComponent,
+                  onClick: () => {
+                    item.onClick?.();
+                    onSelectItem(item.label);
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+            ] }, item.id ?? item.label))
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            NavIconButton,
+            {
+              ...icon,
+              linkComponent
+            },
+            icon.id ?? icon.src ?? icon.label ?? index
+          ))
+        ] })
+      ]
+    }
+  );
 };
 var UpperPartTab = ({
   label,
@@ -1761,7 +1910,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     NavClickable,
     {
       href,
@@ -1769,11 +1918,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__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+      ]
     }
   );
 };
@@ -1781,7 +1933,7 @@ var NavIconButton = (0, import_react9.forwardRef)(
   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__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1791,15 +1943,15 @@ var NavIconButton = (0, import_react9.forwardRef)(
         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__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex h-5 w-5 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-5 w-5" }) : null,
-          label ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1825,24 +1977,29 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
-      className: cn("w-full h-9 px-4 flex items-center gap-4 border-t border-gray02", className),
-      children: lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        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__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            LowerPartItemButton,
+            {
+              label: item.label,
+              href: item.href,
+              selected: item.label === selected,
+              linkComponent,
+              onClick: () => {
+                item.onClick?.();
+                onSelectItem(item.label);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        ] }, item.id ?? item.label))
+      ]
     }
   );
 };
@@ -1854,7 +2011,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     NavClickable,
     {
       href,
@@ -1862,9 +2019,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
@@ -1874,7 +2031,7 @@ var LowerPartItemButton = ({
 
 // src/components/Toast/Toast.tsx
 var import_react10 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var EXIT_MS = 300;
 var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
@@ -1897,7 +2054,7 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const banner = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       ref,
@@ -1905,7 +2062,7 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
       "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"),
@@ -1915,7 +2072,7 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: cn(
@@ -1935,6 +2092,8 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
   CategorySegmentedControl,
   Column,
   ColumnContentContainer,
+  ColumnDescription,
+  ColumnDescriptionList,
   ColumnLabel,
   ColumnSubTitle,
   ColumnText,
@@ -1951,7 +2110,12 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
   FormTextArea,
   IconCheck,
   IconChevronDownXS,
+  IconClose,
+  IconCompass,
+  IconExclamation,
   IconInfo,
+  IconRadioSelected,
+  IconRadioUnselected,
   List,
   Modal,
   ModalText,