diff --git a/src/assets/icon/icon-check-circle.svg b/src/assets/icon/icon-check-circle.svg
new file mode 100644
index 00000000..ea1dc36e
--- /dev/null
+++ b/src/assets/icon/icon-check-circle.svg
@@ -0,0 +1,11 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="32" fill="#6666E5"/>
+<g clip-path="url(#clip0_1168_70615)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.0667 17.0804C49.3271 17.2955 49.5426 17.5598 49.7008 17.8582C49.8591 18.1565 49.957 18.4831 49.989 18.8194C50.021 19.1556 49.9864 19.4948 49.8873 19.8177C49.7882 20.1405 49.6264 20.4407 49.4113 20.701L28.737 45.721L28.7293 45.7262C28.2596 46.2916 27.6696 46.745 27.0022 47.0533C26.3349 47.3616 25.6072 47.517 24.8722 47.5082C24.1261 47.4997 23.3917 47.3222 22.724 46.989C22.0564 46.6559 21.473 46.1758 21.0176 45.5847L21.015 45.5796L14.5402 37.2584C14.324 36.9929 14.163 36.6868 14.0667 36.3582C13.9704 36.0296 13.9407 35.685 13.9793 35.3448C14.018 35.0045 14.1242 34.6754 14.2917 34.3768C14.4593 34.0781 14.6848 33.816 14.9551 33.6056C15.2253 33.3953 15.5349 33.2411 15.8655 33.1521C16.1962 33.063 16.5413 33.0409 16.8806 33.087C17.2199 33.1331 17.5466 33.2465 17.8415 33.4206C18.1364 33.5947 18.3936 33.8259 18.5979 34.1007L24.9339 42.2445L45.4436 17.425C45.6587 17.1646 45.9229 16.9492 46.2213 16.7909C46.5197 16.6327 46.8463 16.5348 47.1825 16.5028C47.5187 16.4708 47.8579 16.5053 48.1808 16.6044C48.5037 16.7036 48.8038 16.8653 49.0642 17.0804H49.0667Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1168_70615">
+<rect width="36" height="36" fill="white" transform="translate(14 14)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icon/icon-close.svg b/src/assets/icon/icon-close.svg
new file mode 100644
index 00000000..fb28d4d7
--- /dev/null
+++ b/src/assets/icon/icon-close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16L11 11L16 16M16 6L10.999 11L6 6" stroke="#5B5D6B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
new file mode 100644
index 00000000..5f2c5c1d
--- /dev/null
+++ b/src/components/common/Modal.tsx
@@ -0,0 +1,23 @@
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export default function Modal({ isOpen, onClose, children }: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center px-6">
+      {/* 배경 레이어 */}
+      <div 
+        className="absolute inset-0 bg-black/30" 
+        onClick={onClose} 
+      />
+      {/* 모달 본체 */}
+      <div className="relative w-full max-w-[327px] bg-white rounded-[10px] p-6 shadow-xl animate-in fade-in zoom-in duration-200">
+        {children}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/globals.css b/src/globals.css
index 76f4d461..778ca87d 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -36,6 +36,7 @@ html {
   --color-core-3: #b7b7f3;
   --color-core-50: #6666e580;
   --color-core-70: #B7B7F3B2;
+  --color-status-review: #A7B8FC; 
   ;
 
   /* State 컬러 */
diff --git a/src/routes/_main/_business/components/CampaignBrandCard.tsx b/src/routes/_main/_business/components/CampaignBrandCard.tsx
index 722aa177..cdf0bfdc 100644
--- a/src/routes/_main/_business/components/CampaignBrandCard.tsx
+++ b/src/routes/_main/_business/components/CampaignBrandCard.tsx
@@ -13,6 +13,7 @@ export default function CampaignBrandCard({
   statusText = "보낸 제안",
   roomId = "123" // 예시 ID 
 }: CampaignBrandCardProps) {
+  const isReviewing = statusText === "검토 중";
   return (
     <section className="bg-bg-w p-5 flex flex-col gap-4 -mx-4 -mt-6">
       {/* 상단 브랜드 정보 */}
@@ -42,7 +43,9 @@ export default function CampaignBrandCard({
             <span className="text-title5 text-core-1">매칭률</span>
             <span className="text-title6 text-core-1">99%</span>
           </div>
-          <span className="text-callout1 text-core-1 mt-3">{statusText}</span>
+          <span className={`text-callout1 mt-3 ${isReviewing ? "text-status-review" : "text-core-1"}`}>
+        {statusText}
+      </span>
         </div>
       </div>
 
diff --git a/src/routes/_main/_business/components/CampaignCard.tsx b/src/routes/_main/_business/components/CampaignCard.tsx
index 9cb91618..5e582f35 100644
--- a/src/routes/_main/_business/components/CampaignCard.tsx
+++ b/src/routes/_main/_business/components/CampaignCard.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "@tanstack/react-router";
 import BrandLogo from "../../../../assets/brand-logo.png";
 import ArrowRight from "../../../../assets/icon/arrow-right.svg";
 import SearchIcon from "../../../../assets/icon/search.svg";
@@ -20,7 +21,7 @@ export default function CampaignCard({
   logo,
   showButton = true,
 }: CampaignCardProps) {
-  const BUTTON_WIDTH = '280px';
+  const navigate = useNavigate();
 
   // 로고 컴포넌트
   const Logo = (
@@ -35,10 +36,7 @@ export default function CampaignCard({
 
   return (
     <Card image={Logo}>
-      <div
-        className="flex flex-col h-[72px] justify-between"
-        style={{ width: BUTTON_WIDTH }}
-      >
+      <div className="flex flex-col flex-1 gap-2 min-w-0">
         {/* 브랜드 + 제목/날짜 */}
         <div className="flex flex-col w-full">
           <div className="flex items-center gap-1">
@@ -51,8 +49,8 @@ export default function CampaignCard({
               {title}
             </p>
             <div className="flex flex-col items-end text-[10px] text-text-gray3 leading-tight ml-2 flex-shrink-0">
-              <span>{startDate}.25</span>
-              <span>{endDate}.25</span>
+              <span>{startDate}</span>
+              <span>{endDate}</span>
             </div>
           </div>
         </div>
@@ -60,13 +58,20 @@ export default function CampaignCard({
         {/* 캠페인 보기 버튼 */}
         {showButton && (
           <button
-            className="relative flex items-center justify-center bg-[#EBEEFB] rounded-[6px] transition-colors hover:bg-[#DEE2F5]"
-            style={{ width: BUTTON_WIDTH, height: '50px' }}
+          onClick={() => navigate({ to: "/campaign" })}
+            className="
+              flex items-center justify-center 
+              w-full max-w-[221px] h-[30px] 
+              gap-2 px-4 py-[5px] 
+              bg-[#EBEEFB] rounded-[6px] 
+              transition-colors hover:bg-[#DEE2F5]
+              mt-1
+            "
           >
             <img
               src={SearchIcon}
               alt="돋보기"
-              className="absolute left-[12px] w-3.5 h-3.5 object-contain"
+              className="w-3.5 h-3.5 object-contain"
             />
             <span className="text-[13px] font-medium text-text-black">
               캠페인 보기
diff --git a/src/routes/_main/_business/components/MonthlyCalendar.tsx b/src/routes/_main/_business/components/MonthlyCalendar.tsx
index 94f3dd33..a0156893 100644
--- a/src/routes/_main/_business/components/MonthlyCalendar.tsx
+++ b/src/routes/_main/_business/components/MonthlyCalendar.tsx
@@ -53,15 +53,15 @@ export default function MonthlyCalendar() {
         </div>
 
         {/* 일정 바 */}
-        <div className="absolute top-[85px] left-0 w-full pointer-events-none">
+        <div className="absolute top-[200px] left-0 w-full pointer-events-none">
           {/* 비플레인 */}
           <div
             className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-1"
             style={{
-              left: "28.57%",
+              left: "16.57%",
               width: "57.14%",
-              height: "20px",
-              borderRadius: "20px",
+              height: "22px",
+              borderRadius: "11px",
               top: "0px",
             }}
           >
@@ -72,11 +72,11 @@ export default function MonthlyCalendar() {
           <div
             className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-2"
             style={{
-              left: "57.14%",
-              width: "42.85%",
-              height: "20px",
-              borderRadius: "20px",
-              top: "25px",
+              left: "48.14%",
+              width: "48.85%",
+              height: "22px",
+              borderRadius: "11px",
+              top: "26px",
             }}
           >
             라운드랩
diff --git a/src/routes/_main/_business/components/WeeklyCalendar.tsx b/src/routes/_main/_business/components/WeeklyCalendar.tsx
index 10a06b06..bed289ad 100644
--- a/src/routes/_main/_business/components/WeeklyCalendar.tsx
+++ b/src/routes/_main/_business/components/WeeklyCalendar.tsx
@@ -4,7 +4,7 @@ export default function WeeklyCalendar() {
   const dates = [6, 7, 8, 9, 10, 11, 12];
 
   return (
-    <div className="flex flex-col gap-3 p-4 bg-white rounded-xl shadow-sm">
+    <div className="flex flex-col gap-3 p-4 bg-white rounded-xl shadow-sm relative">
       {/* 요일 */}
       <div className="grid grid-cols-7 text-center text-callout2 text-text-gray3">
         {WEEK_DAYS.map((day) => (
@@ -12,34 +12,53 @@ export default function WeeklyCalendar() {
         ))}
       </div>
 
-      {/* 날짜 */}
-      <div className="grid grid-cols-7 gap-y-2 text-center">
+      {/* 날짜 그리드 */}
+      <div className="grid grid-cols-7 text-center mb-10">
         {dates.map((date) => (
-          <div
-            key={date}
-            className={`flex items-center justify-center w-8 h-8 mx-auto rounded-full ${
-              date === 11
-                ? "bg-core-1 text-white"
-                : "text-text-gray3"
-            }`}
-          >
-            {date}
+          <div key={date} className="h-10 flex items-center justify-center">
+            <div
+              className={`flex items-center justify-center w-8 h-8 rounded-full text-[15px] ${
+                date === 11
+                  ? "bg-core-1 text-white"
+                  : "text-text-black"
+              }`}
+            >
+              {date}
+            </div>
           </div>
         ))}
       </div>
 
-      {/* 일정 */}
-      <div className="flex flex-col gap-2">
+      {/* 일정 바 컨테이너 */}
+      <div className="absolute top-[82px] left-4 right-4 pointer-events-none">
         {/* 비플레인 */}
-        <div className="w-3/4 py-1 text-center text-callout2 text-white rounded-full bg-grad-1">
+        <div
+          className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-1"
+          style={{
+            left: "14.28%", 
+            width: "57.14%", 
+            height: "22px",
+            borderRadius: "11px",
+            top: "0px",
+          }}
+        >
           비플레인
         </div>
 
         {/* 라운드랩 */}
-        <div className="w-2/3 py-1 text-center text-callout2 text-white rounded-full bg-grad-2">
+        <div
+          className="absolute flex items-center justify-center text-[11px] text-white shadow-sm bg-grad-2"
+          style={{
+            left: "42.85%", 
+            width: "57.14%",
+            height: "22px",
+            borderRadius: "11px",
+            top: "26px", 
+          }}
+        >
           라운드랩
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/routes/_main/_business/proposal/received-proposal-content.tsx b/src/routes/_main/_business/proposal/received-proposal-content.tsx
index 66d3396a..8173844e 100644
--- a/src/routes/_main/_business/proposal/received-proposal-content.tsx
+++ b/src/routes/_main/_business/proposal/received-proposal-content.tsx
@@ -1,38 +1,43 @@
 import { useState } from "react";
-
 import Header from "../../../../components/layout/Header";
 import CampaignBrandCard from "../components/CampaignBrandCard";
 import CampaignInfoGroup from "../components/CampaignInfoGroup";
+import Modal from "../../../../components/common/Modal";
 
 import dropdownIcon from "../../../../assets/arrow-down.svg";
 import dropupIcon from "../../../../assets/arrow-up.svg";
 import arrowRightIcon from "../../../../assets/icon/arrow-right.svg";
-import profileIcon from "../../../../assets/logo/mini-logo.svg"; 
+import profileIcon from "../../../../assets/logo/mini-logo.svg";
+import checkIcon from "../../../../assets/icon/icon-check-circle.svg";
+import closeIcon from "../../../../assets/icon/icon-close.svg";
 
 export default function ReceivedProposalContent() {
+    const [modalType, setModalType] = useState<"none" | "confirm" | "success">("none");
     const [isContentOpen, setIsContentOpen] = useState(false);
 
+    const handleAcceptClick = () => setModalType("confirm");
+    const handleConfirm = () => setModalType("success");
+    const closeModal = () => setModalType("none");
+
     return (
-        <div className="flex flex-col w-full min-h-screen bg-bg-w font-pretendard">
-            <Header title="제안 보기" />
+        <div className="flex flex-col w-full min-h-screen bg-[var(--color-bg-w)] font-pretendard relative">
+            <Header title="제안 보기" showBack={true} />
 
-            <main className="flex flex-col pb-24">
-                {/* 1. 상단 섹션: 브랜드 카드 */}
-                <div className="px-4 py-6">
-                    <CampaignBrandCard
-                        showChatSection={false}
-                        statusText="검토 중"
-                    />
-                    <div className="mt-6">
+            {/* 배경색 및 간격을 CampaignContent와 동일하게 유지 */}
+            <main className="flex flex-col bg-[var(--color-bluegray-1)]">
+                {/* 1. 상단 섹션: 브랜드 카드 및 타이틀 */}
+                {/* CampaignContent와 동일하게 상단만 흰색 배경 유지하거나 구분감 부여 */}
+                <div className="bg-[var(--color-bg-w)] px-4 py-6 flex flex-col gap-2">
+                    <CampaignBrandCard showChatSection={false} statusText="검토 중" />
+                    <div>
                         <h2 className="text-title1 text-text-black">브랜드 제안 캠페인</h2>
                     </div>
                 </div>
 
-                {/* 2. 상세 정보 섹션 */}
-                <div className="bg-bluegray-1 px-4 py-8 flex flex-col gap-6">
-                    {/* 캠페인명 */}
+                {/* 2. 상세 정보 섹션: 여기서부터 회색 배경(bluegray-1) */}
+                <div className="px-4 py-8 flex flex-col gap-6">
                     <CampaignInfoGroup label="캠페인명">
-                        <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 text-text-gray1">
+                        <div className="w-full h-[36px] px-4 flex items-center bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] text-callout1 text-[var(--color-text-gray1)]">
                             비플레인 선크림 리뷰 콘텐츠
                         </div>
                     </CampaignInfoGroup>
@@ -41,27 +46,22 @@ export default function ReceivedProposalContent() {
                     <CampaignInfoGroup
                         label="캠페인 내용"
                         right={
-                            <button onClick={() => setIsContentOpen(prev => !prev)}>
-                                <img
-                                    src={isContentOpen ? dropupIcon : dropdownIcon}
-                                    alt="toggle"
-                                    className="w-5 h-5"
-                                />
+                            <button onClick={() => setIsContentOpen((prev) => !prev)}>
+                                <img src={isContentOpen ? dropupIcon : dropdownIcon} alt="toggle" className="w-4 h-4" />
                             </button>
                         }
                     >
                         <div className="flex flex-col gap-4">
                             <div className="flex flex-col gap-2">
-                                <p className="text-caption2 text-text-gray3">설명</p>
-                                <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 leading-relaxed text-text-gray1">
+                                <p className="text-callout1 text-[var(--color-text-gray2)]">설명</p>
+                                <div className="w-full min-h-[68px] px-[16px] py-[10px] bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] text-callout1 text-[var(--color-text-gray1)] leading-relaxed">
                                     안녕하세요 비플레인 입니다! <br />
-                                    크리에이터님과 이미지와 비플레인이 추구하는 가치가 잘 맞닿아 있다고 생각되어 협찬을 제안드립니다.
+                                    크리에이터님과 이미지가 잘 맞아 협찬을 제안드립니다.
                                 </div>
                             </div>
 
-                            {/* 아코디언 상세 내용 */}
                             {isContentOpen && (
-                                <div className="grid grid-cols-2 gap-4 animate-slide-up">
+                                <div className="grid grid-cols-2 gap-x-[11px] gap-y-4 animate-in fade-in duration-300">
                                     <div className="col-span-2">
                                         <ContentItem label="형식" value="인스타그램 릴스" />
                                     </div>
@@ -74,68 +74,105 @@ export default function ReceivedProposalContent() {
                         </div>
                     </CampaignInfoGroup>
 
-                    {/* 협찬품 / 원고료 */}
+                    {/* 협찬품 / 원고료: 높이 36px 통일 */}
                     <div className="grid grid-cols-2 gap-4">
                         <CampaignInfoGroup label="협찬품">
-                            <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 flex justify-between items-center text-text-gray1">
+                            <div className="w-full h-[36px] px-4 bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] text-callout1 text-[var(--color-text-gray1)] flex justify-between items-center">
                                 <span className="truncate">글로우 크림 1개</span>
                                 <img src={arrowRightIcon} alt="arrow" className="w-4 h-4 opacity-30" />
                             </div>
                         </CampaignInfoGroup>
 
                         <CampaignInfoGroup label="원고료">
-                            <div className="w-full p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 flex justify-between items-center text-text-gray1">
-                                200,000 <span className="text-text-black ml-1">원</span>
+                            <div className="w-full h-[36px] px-4 bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] text-callout1 text-[var(--color-text-gray1)] flex justify-between items-center">
+                                <span>200,000</span>
+                                <span className="shrink-0 ml-1">원</span>
                             </div>
                         </CampaignInfoGroup>
                     </div>
 
-                    {/* 제작 기간 */}
+                    {/* 제작 기간: 36px 및 pl-4 통일 */}
                     <CampaignInfoGroup label="제작 기간">
-                        <div className="flex items-center gap-2 text-text-gray1">
-                            <div className="flex-1 p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1">
-                                2025년 1월 20일
+                        <div className="flex items-center gap-2">
+                            <div className="flex-1 h-[36px] flex items-center pl-[16px] bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] text-callout1 text-[var(--color-text-gray1)]">
+                                2025-01-20
                             </div>
-                            <span className="text-text-gray3">~</span>
-                            <div className="flex-1 p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1">
-                                2025년 1월 30일
+                            <span className="text-[var(--color-text-gray3)] text-date-separator">~</span>
+                            <div className="flex-1 h-[36px] flex items-center pl-[16px] bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] text-callout1 text-[var(--color-text-gray1)]">
+                                2025-01-30
                             </div>
                         </div>
                     </CampaignInfoGroup>
                 </div>
+            </main>
 
-                {/* 3. 하단 액션 버튼 (거절하기 / 제안 수락하기) */}
-                <div className="px-2 py-5 flex gap-3 bg-bg-w">
-                    <button className="flex-1 w-[102px] py-[10px] px-[16px] bg-bg-w border border-core-3 rounded-xl text-core-1 text-title3 hover:bg-bluegray-1 transition-colors">
-                        거절하기
-                    </button>
-                    <button
-                        className="flex-[2.5] py-4 bg-core-1 rounded-xl text-bg-w text-title3 flex items-center justify-center gap-2 hover:bg-core-2 transition-colors shadow-sm"
-                    >
-                        {/* 미니 로고 아이콘 */}
-                        <div className="flex items-center justify-center w-6 h-6">
-                            <img
-                                src={profileIcon} 
-                                alt="mini-logo"
-                                className="w-full h-full object-contain invert brightness-0" 
-                            />
+            {/* 하단 고정 버튼 영역 */}
+            <div className="px-4 py-5 flex gap-3 bg-[var(--color-bg-w)] sticky bottom-0 border-t border-[var(--color-text-gray5)]">
+                <button className="flex-1 h-[52px] bg-[var(--color-bg-w)] border border-[var(--color-core-3)] rounded-xl text-core-1 text-title3 active:bg-gray-50 transition-colors">
+                    거절하기
+                </button>
+                <button
+                    onClick={handleAcceptClick}
+                    className="flex-[2.5] h-[52px] bg-core-1 rounded-xl text-white text-title3 flex items-center justify-center gap-2 active:opacity-90 transition-opacity"
+                >
+                    <img src={profileIcon} alt="logo" className="w-6 h-6 invert brightness-0" />
+                    <span>제안 수락하기</span>
+                </button>
+            </div>
+
+            <Modal isOpen={modalType !== "none"} onClose={closeModal}>
+                {/* 모달 내용은 기존 디자인 유지 (글로벌 규격 적용) */}
+                {modalType === "confirm" && (
+                    <div className="flex flex-col items-center text-center">
+                        <button onClick={closeModal} className="absolute top-4 left-4">
+                            <img src={closeIcon} alt="close" className="w-6 h-6" />
+                        </button>
+                        <div className="mt-8 mb-6">
+                            <img src={checkIcon} alt="check" className="w-[80px] h-[80px]" />
                         </div>
-                        <span>제안 수락하기</span>
-                    </button>
-                </div>
-            </main>
+                        <h3 className="text-callout3 text-text-black mb-10">제안을 수락하시겠습니까?</h3>
+                        <div className="flex w-full gap-[10px] justify-center items-center">
+                            <button
+                                onClick={closeModal}
+                                className="w-[76px] h-[44px] flex items-center justify-center border border-core-3 rounded-[10px] bg-bg-w text-core-1 text-title3"
+                            >
+                                취소
+                            </button>
+                            <button
+                                onClick={handleConfirm}
+                                className="flex-1 h-[44px] flex items-center justify-center bg-core-1 rounded-[10px] text-white text-title3 font-medium"
+                            >
+                                수락하기
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {modalType === "success" && (
+                    <div className="flex flex-col items-center text-center py-4">
+                        <div className="mb-6">
+                            <img src={checkIcon} alt="check" className="w-[80px] h-[80px]" />
+                        </div>
+                        <h3 className="text-callout3 text-text-black mb-2">수락하기 완료</h3>
+                        <p className="text-body1 text-text-gray3 mb-10">브랜드와 채팅방에서<br />협업을 진행해주세요</p>
+                        <button onClick={closeModal} className="w-full py-4 bg-core-1 rounded-xl text-white text-title3">완료하기</button>
+                    </div>
+                )}
+            </Modal>
         </div>
     );
 }
 
-// 기존 ContentItem 재사용
+// ContentItem: CampaignContent의 규격(h-34, text-callout1)으로 수정
 function ContentItem({ label, value }: { label: string; value: string }) {
     return (
-        <div className="flex flex-col gap-1">
-            <p className="text-caption2 text-text-gray3">{label}</p>
-            <div className="p-4 bg-bg-w border border-text-gray5 rounded-xl text-body1 flex justify-between items-center text-text-gray1">
-                <span className="truncate">{value}</span>
-                <img src={arrowRightIcon} alt="arrow" className="w-4 h-4 opacity-30" />
+        <div className="flex flex-col gap-2">
+            <p className="text-callout1 text-[var(--color-text-gray2)]">{label}</p>
+            <div className="w-full h-[34px] flex justify-between items-center bg-[var(--color-bg-w)] border border-[var(--color-text-gray5)] rounded-[6px] box-border">
+                <span className="flex-1 truncate pl-[16px] text-callout1 text-[var(--color-text-gray1)]">
+                    {value}
+                </span>
+                <img src={arrowRightIcon} alt="arrow" className="w-4 h-4 shrink-0 mr-[12px] opacity-30" />
             </div>
         </div>
     );